:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#101828;background:#f5f7fb}*{box-sizing:border-box}body{margin:0}.hidden{display:none!important}.center{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#f7f4ee,#eef3fa)}.login-card{width:min(410px,90vw);padding:34px;background:#fff;border:1px solid #e7eaf0;border-radius:18px;box-shadow:0 16px 50px #17203318}.brand{font-size:21px;margin-bottom:28px}.login-card h1{margin:0 0 6px}.login-card p{color:#667085;margin:0 0 24px}input{width:100%;padding:12px 13px;border:1px solid #d9dee8;border-radius:10px;font-size:14px;background:#fff;margin-top:6px}form input{margin:8px 0}button,.buttonlink{border:0;border-radius:10px;padding:11px 14px;background:#101828;color:#fff;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}.login-card button{width:100%;margin-top:8px}.err{color:#b42318;margin-top:10px;font-size:13px}.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}aside{background:#0c1728;color:#fff;padding:22px 16px;display:flex;flex-direction:column;min-height:100vh}aside .brand{padding:0 8px}.nav{background:transparent;text-align:left;margin:3px 0}.nav.active,.nav:hover{background:#26364f}.spacer{flex:1}.who{font-size:12px;color:#aab4c4;padding:12px 8px;overflow-wrap:anywhere}main{padding:34px;overflow:auto}.top{display:flex;align-items:center;justify-content:space-between;gap:20px}.top h1{margin:0;font-size:30px}.top p{margin:5px 0 0;color:#667085}.secondary{background:#fff;color:#101828;border:1px solid #d9dee8}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0}.stats>div,.card{background:#fff;border:1px solid #e3e7ef;border-radius:14px;box-shadow:0 3px 12px #18223008}.stats>div{padding:18px}.stats b{font-size:26px;display:block}.stats span{color:#667085;font-size:13px}.toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:14px}.toolbar input{max-width:350px;margin:0}.tabs{display:flex;gap:8px}.tab{background:#fff;color:#344054;border:1px solid #dfe4ec}.tab.active{background:#101828;color:#fff}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:13px 14px;text-align:left;border-bottom:1px solid #eef1f5;font-size:13px}th{color:#667085;font-weight:600;background:#fafbfc}tbody tr:hover{background:#fafcff}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}.shopify{background:#eaf7e8;color:#256029}.etsy{background:#fff1e8;color:#9a3d00}.paid{background:#e9f8ef;color:#147a3f}.status{background:#edf4ff;color:#175cd3}.empty{text-align:center;padding:38px;color:#667085}.pad{padding:22px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}.pad h2{margin-top:0}.pad label{display:block;margin:14px 0;color:#344054;font-size:13px;font-weight:600}.hint{font-size:13px;color:#667085;margin-top:12px}.small{font-size:12px;color:#667085;margin-top:14px;overflow-wrap:anywhere}.buttonlink{margin-left:8px;background:#344054}@media(max-width:850px){.shell{grid-template-columns:1fr}aside{min-height:auto;flex-direction:row;align-items:center;gap:6px;position:sticky;top:0;z-index:5;padding:10px}.spacer{display:none}.who{display:none}aside .brand{margin:0 auto 0 0;font-size:16px}.nav{width:auto}main{padding:18px}.stats,.grid2{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.toolbar input{max-width:none}}

.top-actions{display:flex;gap:8px;flex-wrap:wrap}.live-panel{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding:18px;margin:-8px 0 18px}.live-panel h3{margin:0 0 10px;font-size:14px}.live-list>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid #eef1f5;font-size:12px}.live-list small{color:#667085}textarea{width:100%;padding:12px 13px;border:1px solid #d9dee8;border-radius:10px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;margin-top:6px;resize:vertical}@media(max-width:850px){.live-panel{grid-template-columns:1fr}.top-actions{width:100%}}


/* Collapsible sidebar - final */
.shell{
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:100vh;
  transition:grid-template-columns .2s ease;
}

aside{
  background:#0c1728;
  color:#fff;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow:hidden;
  transition:padding .2s ease;
}

#sidebarToggle{
  position:fixed;
  top:24px;
  left:186px;
  width:28px;
  height:34px;
  min-width:28px;
  padding:0;
  border:0;
  border-radius:7px;
  background:#1c2b40;
  color:#fff;
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1001;
  box-shadow:none;
  transition:left .2s ease, background .15s ease;
}

#sidebarToggle:hover{
  background:#2a3c56;
}

.shell.sidebar-hidden{
  grid-template-columns:34px 1fr;
}

.shell.sidebar-hidden aside{
  padding-left:0;
  padding-right:0;
}

.shell.sidebar-hidden aside > *{
  opacity:0;
  pointer-events:none;
}

.shell.sidebar-hidden #sidebarToggle{
  left:3px;
  width:28px;
  height:34px;
  border-radius:0 7px 7px 0;
  background:#0c1728;
}

@media(max-width:850px){
  .shell{
    grid-template-columns:1fr;
  }

  aside{
    min-height:auto;
    flex-direction:row;
    align-items:center;
    gap:6px;
    position:sticky;
    top:0;
    z-index:5;
    padding:10px;
  }

  #sidebarToggle{
    top:12px;
    left:8px;
  }

  .shell.sidebar-hidden{
    grid-template-columns:1fr;
  }

  .shell.sidebar-hidden aside{
    display:none;
  }

  .shell.sidebar-hidden #sidebarToggle{
    left:6px;
    top:12px;
  }
}