:root{--bg:#08121d;--panel:#101f30;--panel-2:#14263a;--line:#223b55;--text:#edf5ff;--muted:#8fa6bd;--accent:#66c4b7;--accent-2:#31a99c;--ok:#5fd0a4;--warn:#f0c36a;--danger:#ff7b7b}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--text);background:radial-gradient(circle at 20% -10%,rgba(102,196,183,.10),transparent 28rem),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.app-shell{min-height:100vh;padding-bottom:84px}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(8,18,29,.92);border-bottom:1px solid rgba(143,166,189,.14);backdrop-filter:blur(16px)}.brand{display:flex;gap:11px;align-items:center}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900;letter-spacing:-1px;color:#07111c;background:linear-gradient(145deg,var(--accent),#91dfd5)}.brand-name{font-weight:800;font-size:17px}.brand-sub{color:var(--muted);font-size:12px;margin-top:1px}.top-actions{display:flex;gap:8px;align-items:center}.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:22px;cursor:pointer}.text-btn{padding:10px 12px;border:1px solid var(--line);border-radius:11px;color:var(--muted);font-size:13px;font-weight:700}main{width:min(1180px,100%);margin:0 auto;padding:20px 16px 36px}.settings-main{width:min(850px,100%)}.toolbar{display:flex;gap:14px;align-items:end;justify-content:space-between;margin-bottom:16px}.eyebrow{color:var(--accent);font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.12em;margin-bottom:4px}h1,h2{margin:0;letter-spacing:-.03em}h1{font-size:clamp(25px,6vw,36px)}h2{font-size:20px}.period-picker{display:flex;padding:4px;border:1px solid var(--line);background:var(--panel);border-radius:12px}.period-picker a{min-width:42px;padding:8px 10px;text-align:center;color:var(--muted);font-size:12px;font-weight:800;border-radius:8px}.period-picker a.active{background:var(--accent);color:#07111c}.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.metric{min-height:132px;padding:16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel-2),var(--panel));display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 12px 30px rgba(0,0,0,.12)}.metric-primary{grid-row:span 2;min-height:274px;background:linear-gradient(145deg,#6bc7ba,#46ad9f);color:#06131d;border-color:transparent}.metric-label{font-weight:700;color:var(--muted)}.metric-primary .metric-label{color:rgba(6,19,29,.72)}.metric strong{font-size:clamp(28px,8vw,42px);letter-spacing:-.04em}.metric-primary strong{font-size:clamp(64px,18vw,96px);line-height:.9}.metric-foot{font-size:12px;color:var(--muted)}.metric-primary .metric-foot{color:rgba(6,19,29,.75)}.section-card{background:linear-gradient(160deg,rgba(20,38,58,.95),rgba(12,25,40,.96));border:1px solid var(--line);border-radius:18px;padding:16px;margin:14px 0;box-shadow:0 16px 36px rgba(0,0,0,.12)}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.status-pill{font-size:12px;font-weight:800;color:var(--warn);background:rgba(240,195,106,.10);border:1px solid rgba(240,195,106,.30);padding:7px 10px;border-radius:999px}.status-pill.ok{color:var(--ok);background:rgba(95,208,164,.10);border-color:rgba(95,208,164,.30)}.connection-grid{display:grid;gap:10px}.connection-row{display:flex;gap:11px;align-items:center;padding:12px 13px;border-radius:13px;background:rgba(255,255,255,.025);border:1px solid rgba(143,166,189,.12)}.connection-row b{display:block;font-size:14px}.connection-row small{display:block;color:var(--muted);margin-top:2px}.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}.dot.pending{background:var(--warn);box-shadow:0 0 0 5px rgba(240,195,106,.08)}.dot.ok{background:var(--ok);box-shadow:0 0 0 5px rgba(95,208,164,.08)}.dot.off{background:#526579;box-shadow:0 0 0 5px rgba(82,101,121,.08)}.dot.error{background:var(--danger);box-shadow:0 0 0 5px rgba(255,123,123,.08)}.stats-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}.stats-strip div{padding:15px;border-left:3px solid var(--accent);background:var(--panel);border-radius:0 12px 12px 0}.stats-strip strong{display:block;font-size:26px;letter-spacing:-.03em}.stats-strip span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.empty-state{text-align:center;padding:30px 18px;color:var(--muted)}.empty-state b{display:block;color:var(--text);font-size:16px}.empty-state p{margin:7px auto 0;max-width:520px;line-height:1.5;font-size:13px}.empty-icon{width:46px;height:46px;margin:0 auto 12px;border-radius:13px;display:grid;place-items:center;background:rgba(102,196,183,.09);color:var(--accent);font-size:22px;border:1px solid rgba(102,196,183,.20)}.bottom-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(8,18,29,.96);border-top:1px solid rgba(143,166,189,.14);backdrop-filter:blur(18px);padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.bottom-nav a{display:grid;place-items:center;color:var(--muted);padding:5px 2px}.bottom-nav a span{font-size:20px}.bottom-nav a small{font-size:10px;margin-top:2px}.bottom-nav a.active{color:var(--accent)}
.auth-body{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-wrap{width:min(470px,100%)}.auth-card{background:linear-gradient(160deg,rgba(20,38,58,.98),rgba(12,25,40,.98));border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.28)}.auth-brand{margin-bottom:28px}.auth-card h1{margin-bottom:10px}.auth-lead,.settings-copy{color:var(--muted);line-height:1.55}.form-stack{display:grid;gap:14px;margin-top:18px}.form-stack label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#bfd0e0}.form-stack input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid var(--line);background:#091624;color:var(--text);outline:none}.form-stack input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(102,196,183,.10)}.primary-btn{border:0;border-radius:11px;padding:13px 16px;background:var(--accent);color:#06131d;font-weight:900;cursor:pointer}.primary-btn:disabled{opacity:.45;cursor:not-allowed}.fine-print,.form-note{color:var(--muted);font-size:12px;line-height:1.5}.alert{padding:12px 14px;border-radius:11px;margin:14px 0;font-size:13px;line-height:1.45}.alert.danger{background:rgba(255,123,123,.10);border:1px solid rgba(255,123,123,.30);color:#ffd0d0}.alert.success{background:rgba(95,208,164,.10);border:1px solid rgba(95,208,164,.30);color:#c9ffe8}.wide-form{max-width:680px}.product-list{display:grid;gap:8px}.product-row{display:grid;grid-template-columns:36px 1fr auto auto;gap:12px;align-items:center;padding:12px;border-radius:12px;border:1px solid rgba(143,166,189,.12);background:rgba(255,255,255,.02)}.rank{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(102,196,183,.10);color:var(--accent);font-weight:900}.product-name b,.product-units b,.product-revenue b{display:block}.product-name small,.product-units small,.product-revenue small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.product-units,.product-revenue{text-align:right}
@media (max-width:560px){.product-row{grid-template-columns:32px 1fr auto}.product-revenue{grid-column:2/4;text-align:left;padding-top:4px}.text-btn{display:none}}
@media (min-width:720px){main{padding:28px 24px 50px}.hero-grid{grid-template-columns:repeat(5,1fr)}.metric-primary{grid-column:span 2;grid-row:span 2}.stats-strip{grid-template-columns:repeat(4,1fr)}.connection-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.bottom-nav{position:sticky;bottom:auto;top:71px;margin:0 auto;width:min(1180px,calc(100% - 32px));border:1px solid var(--line);border-radius:14px;grid-template-columns:repeat(5,1fr)}.app-shell{padding-bottom:0}.hero-grid{grid-template-columns:repeat(6,1fr)}.metric-primary{grid-column:span 2}}

.autofill-trap{
  position:fixed!important;
  left:-10000px!important;
  top:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.api-secret-input{
  -webkit-text-security:disc;
}

.page-subtitle{margin:5px 0 0;color:var(--muted);font-size:13px}
.catalog-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.catalog-stats div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.catalog-stats strong{display:block;font-size:28px;letter-spacing:-.04em}
.catalog-stats span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.catalog-control-grid{display:grid;grid-template-columns:1fr;gap:12px}
.catalog-control-grid label{display:grid;gap:6px;color:#bfd0e0;font-size:12px;font-weight:800}
.catalog-control-grid input,.catalog-control-grid select{width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#091624;color:var(--text);outline:none}
.catalog-control-grid input:focus,.catalog-control-grid select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(102,196,183,.10)}
.catalog-results-head{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-size:12px;margin:12px 2px}
.catalog-grid{display:grid;grid-template-columns:1fr;gap:12px}
.catalog-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(155deg,var(--panel-2),var(--panel));box-shadow:0 14px 34px rgba(0,0,0,.12)}
.catalog-image{aspect-ratio:1/1;background:#0c1b2b;overflow:hidden;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.catalog-image img{width:100%;height:100%;object-fit:cover;display:block}
.product-image-placeholder{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:rgba(102,196,183,.12);border:1px solid rgba(102,196,183,.24);color:var(--accent);font-weight:900;font-size:23px}
.catalog-card-body{padding:14px}
.catalog-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.product-status,.stock{display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;border:1px solid rgba(143,166,189,.22);color:var(--muted)}
.status-publish{color:var(--ok);border-color:rgba(95,208,164,.28);background:rgba(95,208,164,.08)}
.status-draft{color:var(--warn);border-color:rgba(240,195,106,.28);background:rgba(240,195,106,.08)}
.stock-out{color:var(--danger);border-color:rgba(255,123,123,.28);background:rgba(255,123,123,.08)}
.catalog-card h3{margin:12px 0 3px;font-size:17px;line-height:1.25;letter-spacing:-.02em}
.product-category{color:var(--accent);font-size:12px;font-weight:800}
.catalog-data-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.catalog-data-grid div{padding:9px 10px;border:1px solid rgba(143,166,189,.12);border-radius:10px;background:rgba(255,255,255,.02)}
.catalog-data-grid span{display:block;color:var(--muted);font-size:10px;margin-bottom:3px}
.catalog-data-grid b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.category-tags span{font-size:10px;padding:4px 7px;border-radius:999px;background:rgba(102,196,183,.08);color:#a9dbd4}
.catalog-view-btn{display:flex;justify-content:center;align-items:center;margin-top:12px;min-height:39px;border:1px solid var(--line);border-radius:10px;color:#c8d9e8;font-size:12px;font-weight:800}
.catalog-view-btn:hover{border-color:var(--accent);color:var(--accent)}
.catalog-loading{grid-column:1/-1;text-align:center;padding:42px 20px}
.catalog-loading b{display:block;margin-top:12px}
.spinner{width:34px;height:34px;margin:auto;border-radius:50%;border:3px solid rgba(102,196,183,.15);border-top-color:var(--accent);animation:fwspin .8s linear infinite}
@keyframes fwspin{to{transform:rotate(360deg)}}
@media (min-width:640px){
  .catalog-stats{grid-template-columns:repeat(4,1fr)}
  .catalog-control-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:980px){
  .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.orders-control-grid{display:grid;grid-template-columns:1fr;gap:12px}
.orders-control-grid label{display:grid;gap:6px;color:#bfd0e0;font-size:12px;font-weight:800}
.orders-control-grid input,.orders-control-grid select{width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#091624;color:var(--text);outline:none}
.orders-control-grid input:focus,.orders-control-grid select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(102,196,183,.10)}
.orders-list{display:grid;gap:10px}
.order-card{border:1px solid var(--line);border-radius:16px;background:linear-gradient(155deg,var(--panel-2),var(--panel));padding:14px}
.order-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(143,166,189,.12)}
.order-number{font-weight:900;font-size:16px}
.order-date{color:var(--muted);font-size:11px;margin-top:3px}
.order-status{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;border:1px solid rgba(143,166,189,.22);color:var(--muted)}
.status-order-processing{color:#9de9dd;border-color:rgba(102,196,183,.28);background:rgba(102,196,183,.08)}
.status-order-completed{color:var(--ok);border-color:rgba(95,208,164,.28);background:rgba(95,208,164,.08)}
.status-order-pending,.status-order-on-hold{color:var(--warn);border-color:rgba(240,195,106,.28);background:rgba(240,195,106,.08)}
.status-order-cancelled,.status-order-failed,.status-order-refunded{color:var(--danger);border-color:rgba(255,123,123,.28);background:rgba(255,123,123,.08)}
.order-main-grid{display:grid;grid-template-columns:1fr;gap:10px;padding-top:12px}
.order-main-grid>div{padding:10px 11px;border:1px solid rgba(143,166,189,.12);border-radius:11px;background:rgba(255,255,255,.02)}
.order-main-grid span{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}
.order-main-grid b{display:block;font-size:13px}
.order-main-grid small{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:4px}
.order-total b{font-size:18px}
@media (min-width:720px){
  .orders-control-grid{grid-template-columns:2fr 1fr 1fr}
  .order-main-grid{grid-template-columns:1fr 1.5fr .7fr}
  .order-total{text-align:right}
}

/* v0.4.1: always-accessible hamburger navigation */
.app-shell{padding-bottom:0}
.menu-btn{font-size:20px;line-height:1}
.nav-overlay{
  position:fixed;
  inset:0;
  z-index:98;
  background:rgba(0,0,0,.48);
  opacity:0;
  transition:opacity .18s ease;
  backdrop-filter:blur(2px);
}
.nav-overlay.show{opacity:1}
.nav-drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:99;
  width:min(330px,88vw);
  height:100dvh;
  display:flex;
  flex-direction:column;
  padding:18px;
  background:linear-gradient(165deg,#102237,#0a1724);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(0,0,0,.35);
  transform:translateX(105%);
  transition:transform .2s ease;
}
.nav-drawer.open{transform:translateX(0)}
.menu-open{overflow:hidden}
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(143,166,189,.14)
}
.drawer-head h2{font-size:20px}
.drawer-links{
  display:grid;
  gap:7px;
  padding:18px 0
}
.drawer-link{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:10px 12px;
  border-radius:12px;
  color:#bed0e0;
  border:1px solid transparent
}
.drawer-link>span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font-size:18px
}
.drawer-link b{display:block;font-size:14px}
.drawer-link small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.drawer-link:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.025)
}
.drawer-link.active{
  color:var(--text);
  background:rgba(102,196,183,.10);
  border-color:rgba(102,196,183,.26)
}
.drawer-link.active>span{
  background:rgba(102,196,183,.16);
  color:var(--accent)
}
.drawer-link.disabled{opacity:.5;cursor:default}
.drawer-footer{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(143,166,189,.14)
}
.drawer-logout{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:11px;
  color:#c7d7e6;
  font-weight:800;
  font-size:13px
}

/* Old bottom nav is no longer used. */
.bottom-nav{display:none!important}

@media (min-width:900px){
  .nav-drawer{width:320px}
}

.design-explainer{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
}
.design-explainer p{
  margin:8px 0 0;
  max-width:760px;
  color:var(--muted);
  line-height:1.55;
  font-size:13px
}
.compact-btn{width:auto;min-width:210px}
.design-control-grid{display:grid;grid-template-columns:1fr;gap:12px}
.design-control-grid label{display:grid;gap:6px;color:#bfd0e0;font-size:12px;font-weight:800}
.design-control-grid input,.design-control-grid select{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#091624;
  color:var(--text);
  outline:none
}
.design-control-grid input:focus,.design-control-grid select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(102,196,183,.10)
}
.design-grid{display:grid;grid-template-columns:1fr;gap:12px}
.design-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(155deg,var(--panel-2),var(--panel));
  box-shadow:0 14px 34px rgba(0,0,0,.12)
}
.design-preview{
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid var(--line)
}
.design-preview img{width:100%;height:100%;object-fit:cover;display:block}
.design-card-body{padding:14px}
.design-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.design-id{
  display:inline-flex;
  padding:5px 8px;
  border-radius:8px;
  background:rgba(102,196,183,.10);
  border:1px solid rgba(102,196,183,.24);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em
}
.design-units{color:var(--muted);font-size:11px;font-weight:800}
.design-card h3{margin:11px 0 5px;font-size:17px;line-height:1.25}
.design-meta{display:flex;flex-wrap:wrap;gap:7px;color:var(--muted);font-size:10px}
.linked-products{
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid rgba(143,166,189,.12);
  display:grid;
  gap:7px
}
.linked-products-title{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.linked-products a{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border-radius:9px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(143,166,189,.10);
  font-size:11px;
  color:#cbd9e6
}
.linked-products a span{color:var(--muted);white-space:nowrap}
.no-linked-products{font-size:11px;color:var(--muted)}
@media(min-width:700px){
  .design-explainer{flex-direction:row;justify-content:space-between;align-items:center}
  .design-control-grid{grid-template-columns:2fr 1fr 1fr}
  .design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1050px){
  .design-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

[hidden]{display:none!important}

.build-tag{
  display:inline-flex;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(102,196,183,.24);
  background:rgba(102,196,183,.08);
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  vertical-align:middle;
}

.api-key-reveal{
  margin:14px 0;padding:14px;border:1px solid rgba(102,196,183,.28);
  background:rgba(102,196,183,.07);border-radius:12px
}
.api-key-reveal p{margin:4px 0 10px;color:var(--muted);font-size:12px}
.api-key-reveal input{
  width:100%;padding:12px 13px;margin-bottom:10px;border-radius:10px;
  border:1px solid var(--line);background:#07131f;color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}
.settings-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.secondary-danger-btn{
  border:1px solid rgba(255,123,123,.34);background:rgba(255,123,123,.08);
  color:#ffcaca;border-radius:11px;padding:13px 16px;font-weight:900;cursor:pointer
}