/**
 * ThreadLine app CSS — lifted from the locked mockup
 * (ThreadLine_Style_D_Vixon.html, the pixel-level source of truth),
 * which is itself built from Vixon's data-sidebar="dark" tokens.
 * Interactive controls are real <a>/<button> elements here (Handoff §8),
 * so this file adds resets + visible focus states on top of the mockup CSS.
 */
:root{
  --primary:#5A58EB; --primary-subtle:#EDEDFC;
  --secondary:#438EFF; --secondary-subtle:#E9F2FF;
  --success:#2DCB73; --success-subtle:#E5F9EE;
  --danger:#F9554C; --danger-subtle:#FEECEB;
  --warning:#E9BC18; --warning-subtle:#FCF6DF;
  --info:#179FAA; --info-subtle:#E2F4F5;
  --body-bg:#F8FAFC; --card-bg:#FFFFFF; --border:#E4EAF1;
  --ink:#0F172A; --muted:#7C8B9E;
  --sb-bg:#332757; --sb-item:#b2a6d6; --sb-hover-bg:#2d234e; --sb-active-bg:#2d234e; --sb-active-item:#f7f6fb;
  --sb-sm:90px; --sb-lg:250px; --header-h:70px;
}
*{box-sizing:border-box;}
html, body{margin:0; padding:0; width:100%;}
body{font-family:'Public Sans', -apple-system, sans-serif; background:var(--body-bg); color:var(--ink); font-size:13.5px;}
.frame{width:100%; background:var(--body-bg); min-height:100vh; position:relative; overflow-x:hidden;}

/* Control resets — mockup used divs; production uses real buttons/links. */
button.hover-toggle, button.hamburger-btn, button.filter-pill, button.pf-row{
  background:transparent; border:none; font-family:inherit;
}
a.nav-item, a.brand-name, a.ticon, a.filter-pill{text-decoration:none;}
a.nav-item:focus-visible, button:focus-visible, a.ticon:focus-visible, a.filter-pill:focus-visible, .pf-row:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px; border-radius:6px;
}
.sidebar a:focus-visible{outline-color:#fff;}

/* ===== Sidebar: Vertical Hovered (sm-hover) ===== */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sb-sm); background:var(--sb-bg);
  overflow:hidden; transition:width .15s ease-out; z-index:1004; padding:0 0 25px 0;
}
@media (min-width:768px){
  .sidebar:hover, .sidebar.locked, .sidebar:focus-within{width:var(--sb-lg); box-shadow:2px 0 14px rgba(0,0,0,.18);}
}
@media (max-width:767.98px){
  .sidebar{width:var(--sb-lg); transform:translateX(-100%); transition:transform .25s ease;}
  .sidebar.mobile-open{transform:translateX(0);}
  .sidebar .lbl-row{display:flex !important;}
  .sidebar .brand-name, .sidebar .nav-label-text{opacity:1 !important; display:inline-block !important;}
  .sidebar .nav-label-ic{display:none;}
  .sidebar .nav-item{justify-content:flex-start !important;}
}
.vertical-overlay{display:none; position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:1003;}
.vertical-overlay.show{display:block;}

.brand{display:flex; align-items:center; height:var(--header-h); padding:0 20px; position:relative; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:8px;}
.brand-mark{width:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.brand-mark-box{width:30px;height:30px;border-radius:6px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.brand-name{font-weight:700; font-size:16px; color:#fff; white-space:nowrap; margin-left:10px; display:none;}
.sidebar:hover .brand-name, .sidebar.locked .brand-name, .sidebar:focus-within .brand-name{display:inline-block;}

/* Ring-with-inner-dot lock toggle beside the logo — filled primary when
   locked, outlined when not; never a solid disc (Handoff §3). */
.hover-toggle{
  position:absolute; right:18px; top:50%; margin-top:-11px; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--sb-item) !important; display:none; align-items:center; justify-content:center;
  cursor:pointer; background:transparent; transition:border-color .15s; padding:0;
}
.hover-toggle::after{content:''; width:8px; height:8px; border-radius:50%; background:var(--sb-item); transition:background .15s;}
.hover-toggle:hover{border-color:#fff !important;}
.hover-toggle:hover::after{background:#fff;}
.hover-toggle.locked{border-color:var(--primary) !important;}
.hover-toggle.locked::after{background:var(--primary);}
.sidebar:hover .hover-toggle, .sidebar.locked .hover-toggle, .sidebar:focus-within .hover-toggle{display:flex;}
@media (max-width:767.98px){ .hover-toggle{display:none !important;} }

.nav-label{display:flex; align-items:center; min-height:34px;}
.nav-label-ic{width:var(--sb-sm); flex-shrink:0; text-align:center; color:var(--sb-item); font-size:14px; line-height:34px;}
.nav-label-text{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--sb-item); font-weight:600; white-space:nowrap; padding:12px 20px; display:none;}
.sidebar:hover .nav-label-ic, .sidebar:focus-within .nav-label-ic, .sidebar.locked .nav-label-ic{display:none;}
.sidebar:hover .nav-label-text, .sidebar:focus-within .nav-label-text, .sidebar.locked .nav-label-text{display:inline-block;}

/* Nav items — hover changes color only, never background; only .active
   gets a filled background (Handoff §3/§4). Labels wrap, never truncate. */
.nav-item{
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--sb-item); font-size:14px; font-weight:400;
  position:relative; margin:4px 0; padding:10px 28.8px; border-radius:6px;
}
.nav-item .ic{width:28px; flex-shrink:0; text-align:center; font-size:16.8px; color:currentColor;}
.nav-item .lbl-row{display:none; align-items:center; gap:8px; flex:1; min-width:0; white-space:normal; line-height:1.35; margin-left:12px;}
.nav-item .lbl{flex:1; min-width:0;}
.nav-item:hover{color:var(--sb-active-item);}
.nav-item.active{background:var(--sb-active-bg); color:var(--sb-active-item);}
@media (min-width:768px){
  .sidebar:hover .nav-item, .sidebar.locked .nav-item, .sidebar:focus-within .nav-item{ justify-content:flex-start; margin:4px 12px; padding:10px 16px; }
  .sidebar:hover .nav-item .lbl-row, .sidebar.locked .nav-item .lbl-row, .sidebar:focus-within .nav-item .lbl-row{ display:flex; }
}
.nav-badge{background:var(--danger); color:#fff; font-size:10.5px; font-weight:700; border-radius:20px; padding:2px 8px; flex-shrink:0; margin-left:6px;}

/* ===== Main content ===== */
.main{margin-left:var(--sb-sm); transition:margin-left .15s ease-out;}
.main.shifted{margin-left:var(--sb-lg);}
@media (max-width:767.98px){ .main, .main.shifted{margin-left:0;} }

.topbar{height:var(--header-h); display:flex; align-items:center; gap:14px; padding:0 20px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;}
.hamburger-btn{width:38px;height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#54607A; font-size:19px; cursor:pointer; flex-shrink:0;}
.hamburger-btn:hover{background:var(--body-bg);}
@media (min-width:768px){ .hamburger-btn{display:none;} }
.search-pill{display:flex; align-items:center; gap:8px; background:var(--body-bg); border:1px solid var(--border); padding:9px 14px; border-radius:8px; font-size:13px; color:var(--muted); width:280px;}
.topbar-icons{display:flex; align-items:center; gap:4px; margin-left:auto;}
.ticon{width:36px;height:36px;border-radius:8px; display:flex; align-items:center; justify-content:center; color:#54607A; font-size:15px; cursor:pointer; position:relative; flex-shrink:0;}
.ticon:hover{background:var(--body-bg);}
.ticon .bubble{position:absolute; top:4px; right:4px; width:7px;height:7px;border-radius:50%; background:var(--danger);}
.user-chip{display:flex; align-items:center; gap:9px; padding-left:10px; border-left:1px solid var(--border); margin-left:4px;}
.user-avatar{width:34px;height:34px;border-radius:8px; background:var(--secondary-subtle); color:var(--secondary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex-shrink:0;}
.user-name{font-size:12.5px; font-weight:700; color:var(--ink);}
.user-role{font-size:10.5px; color:var(--muted);}

.page-head{padding:22px 20px 17px;}
.page-title{font-size:15px; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:.02em;}
.breadcrumb-mini{font-size:13px; color:var(--muted); margin-top:6px;}
.breadcrumb-mini a{color:var(--muted); text-decoration:none;}
.breadcrumb-mini .current{color:var(--ink); font-weight:500;}
.content{padding:14px 20px 50px;}

.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.filter-pill{background:#fff; border:1px solid var(--border); padding:8px 14px; border-radius:8px; font-size:12.5px; font-weight:600; color:#54607A; cursor:pointer; display:inline-block;}
.filter-pill.active{background:var(--primary); border-color:var(--primary); color:#fff;}
select.filter-pill, input.filter-pill{appearance:auto;}
.btn-tl{padding:9px 16px; border-radius:8px; font-size:12.5px; font-weight:700; cursor:pointer; border:1px solid transparent; display:inline-block; text-decoration:none; font-family:inherit;}
.btn-tl-primary{background:var(--primary); color:#fff;}
.btn-tl-primary:hover{background:#4a48d6; color:#fff;}
.btn-tl-outline{background:#fff; border-color:var(--border); color:var(--ink);}
.btn-tl-outline:hover{background:var(--body-bg);}
.btn-tl-danger{background:#fff; border-color:var(--danger); color:var(--danger);}

.app-notice{border-radius:8px; padding:12px 16px; font-size:12.5px; margin-bottom:18px;}
.app-notice.success{background:var(--success-subtle); color:#157347;}
.app-notice.error{background:var(--danger-subtle); color:var(--danger);}

/* KPI cards */
.kpi-card{background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:20px; height:100%;}
.kpi-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:18px;}
.avatar-title{width:44px;height:44px;border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;}
.kpi-label{font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); font-weight:700;}
.kpi-value{font-size:24px; font-weight:700; color:var(--ink); margin:0 0 4px;}
.kpi-delta{font-size:11.5px; font-weight:700;}
.kpi-delta.up{color:var(--success);} .kpi-delta.down{color:var(--danger);}
.kpi-delta-suffix{color:var(--muted); font-weight:400;}

/* Product Overview stacked % bars */
.po-bars{display:flex; align-items:flex-end; gap:10px; height:150px;}
.po-bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.po-bar-stack{width:100%; max-width:30px; display:flex; flex-direction:column; overflow:hidden; border-radius:4px 4px 0 0;}
.po-seg{width:100%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; line-height:1.6;}
.po-month{font-size:10px; color:var(--muted); margin-top:6px;}

.ro-legend{display:flex; gap:18px; font-size:12px; color:#54607A; margin-bottom:10px; flex-wrap:wrap;}
.ro-legend span{display:inline-flex; align-items:center; gap:6px;}
.ro-dot{width:9px;height:9px;border-radius:50%; display:inline-block;}

/* Top Selling Designs product cards */
.tsp-card{display:flex; flex-direction:column; gap:8px; border:1px solid var(--border); border-radius:8px; padding:12px; height:100%;}
.tsp-img{border-radius:6px; height:100px; display:flex; align-items:center; justify-content:center; font-size:34px;}
.tsp-name{font-weight:700; font-size:12px; color:var(--primary);}
.tsp-cat{font-size:10.5px; color:var(--secondary); margin-top:2px;}
.tsp-price{font-weight:700; font-size:12.5px; margin-top:auto;}
.star{color:var(--warning);}

.badge-tl{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-block;}
.badge-tl.success{background:var(--success-subtle); color:var(--success);}
.badge-tl.warning{background:var(--warning-subtle); color:#8a6d0a;}
.badge-tl.danger{background:var(--danger-subtle); color:var(--danger);}
.badge-tl.info{background:var(--info-subtle); color:var(--info);}
.badge-tl.secondary{background:var(--secondary-subtle); color:var(--secondary);}
.badge-tl.primary{background:var(--primary-subtle); color:var(--primary);}

.card-tl{background:#fff; border:1px solid var(--border); border-radius:8px; padding:18px 20px; height:100%;}
.card-tl h4, .card-tl h2{margin:0 0 12px; font-size:13.5px; font-weight:700;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:8px;}
.card-head h4, .card-head h2{margin:0;}

table.data{width:100%; border-collapse:collapse; background:#fff; margin:0;}
table.data th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); padding:11px 16px; border-bottom:1px solid var(--border); font-weight:700; background:#FAFBFD; white-space:nowrap;}
table.data td{padding:12px 16px; border-bottom:1px solid var(--border); font-size:13px; white-space:nowrap;}
table.data tbody tr:last-child td{border-bottom:none;}
table.data tbody tr:hover{background:#FAFBFD;}
.num{font-variant-numeric:tabular-nums; text-align:right;}
.table-card{background:#fff; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.table-scroll{overflow-x:auto;}
.pos{color:var(--success); font-weight:700;} .neg{color:var(--danger); font-weight:700;}
.table-foot{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; font-size:12px; color:var(--muted); flex-wrap:wrap; gap:8px;}
.pager{display:flex; gap:6px;}
.pager .filter-pill{padding:5px 10px;}

/* Production & Fulfillment */
.pf-summary-item{padding:4px 0;}
.pf-sum-label{font-size:10.5px; color:var(--muted); text-transform:uppercase; font-weight:700;}
.pf-sum-val{font-size:19px; font-weight:700; margin-top:3px;}
.pf-group{background:#fff; border:1px solid var(--border); border-radius:8px; margin-bottom:10px; overflow:hidden;}
.pf-row{display:flex; align-items:center; gap:14px; padding:14px 18px; cursor:pointer; flex-wrap:wrap; width:100%; text-align:left; color:inherit;}
.pf-check{flex-shrink:0; width:16px; height:16px; accent-color:var(--primary);}
.pf-main{flex:1; min-width:160px;}
.pf-title{font-weight:700; font-size:13px; white-space:normal;}
.pf-sub{font-size:11.5px; color:var(--muted); margin-top:2px;}
.pf-qty{text-align:center; padding:0 14px;}
.pf-qty-num{font-size:18px; font-weight:700; color:var(--ink);}
.pf-qty-label{font-size:9.5px; color:var(--muted); text-transform:uppercase;}
.pf-caret{color:var(--muted); font-size:11px; transition:transform .15s linear; width:16px; text-align:center;}
.pf-group.open .pf-caret{transform:rotate(90deg);}
.pf-detail{display:none; border-top:1px solid var(--border); background:#FAFBFD; overflow-x:auto;}
.pf-group.open .pf-detail{display:block;}
.pf-detail th, .pf-detail td{padding:9px 18px; font-size:12px;}
.pf-status-form{display:inline-flex; gap:6px; align-items:center;}
.custom-note{background:var(--secondary-subtle); color:var(--secondary); font-weight:600; padding:2px 8px; border-radius:6px; font-size:11px; white-space:normal; display:inline-block;}
.banner{display:flex; align-items:center; gap:12px; background:var(--warning-subtle); border:1px solid #F0E2A8; border-radius:8px; padding:12px 16px; margin-bottom:18px; font-size:12.5px; color:#8a6d0a; flex-wrap:wrap;}
.banner .btn-tl{margin-left:auto;}
.form-note{background:var(--info-subtle); color:#0d6e76; border-radius:8px; padding:12px 18px; font-size:12px; margin-bottom:18px; line-height:1.5;}

/* Manual Orders form */
.mo-form{background:#fff; border:1px solid var(--border); border-radius:8px; padding:20px 22px; margin-bottom:20px; display:none;}
.mo-form.open{display:block;}
.mo-form h4, .mo-form h2{margin:0 0 4px; font-size:14px; font-weight:700;}
.mo-form-sub{font-size:11.5px; color:var(--muted); margin-bottom:16px;}
.field label{display:block; font-size:11px; font-weight:700; color:#54607A; margin-bottom:5px;}
.field input, .field select, .field textarea{width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; color:var(--ink); background:var(--body-bg);}
.field textarea{resize:vertical; min-height:50px;}
.mo-lineitems{border:1px solid var(--border); border-radius:6px; overflow-x:auto; margin-bottom:12px;}
.mo-lineitems table{width:100%; border-collapse:collapse; min-width:560px;}
.mo-lineitems th{background:#FAFBFD; text-align:left; font-size:10px; text-transform:uppercase; color:var(--muted); padding:8px 10px; font-weight:700;}
.mo-lineitems td{padding:6px 8px; border-top:1px solid var(--border);}
.mo-lineitems input{width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:5px; font-size:12px; background:#fff; font-family:inherit;}
.mo-lineitems input.qty{width:56px; text-align:center;}
.remove-row{background:none; border:none; color:var(--danger); cursor:pointer; font-size:15px; padding:2px 6px;}
.remove-row:disabled{color:var(--muted); cursor:not-allowed;}
.add-row-btn{padding:8px 12px; font-size:12px; font-weight:700; color:var(--primary); background:var(--primary-subtle); border:none; border-radius:6px; cursor:pointer; font-family:inherit;}
.mo-form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap;}

/* Empty state ("Connect your first store" — Handoff §6) */
.empty-state{background:#fff; border:1px dashed var(--border); border-radius:8px; padding:60px 30px; text-align:center;}
.empty-state .es-icon{font-size:40px; margin-bottom:14px;}
.empty-state h2{font-size:16px; font-weight:700; margin:0 0 6px;}
.empty-state p{color:var(--muted); font-size:13px; max-width:440px; margin:0 auto 18px;}

/* One-time API key reveal */
.key-reveal{background:var(--primary-subtle); border:1px solid var(--primary); border-radius:8px; padding:16px 18px; margin-bottom:18px; font-size:12.5px;}
.key-reveal code{display:block; background:#fff; border:1px solid var(--border); border-radius:6px; padding:10px 12px; font-size:13px; margin:10px 0; user-select:all; word-break:break-all;}

/* Settings */
.settings-grid .card-tl{margin-bottom:16px; height:auto;}
.inline-form{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end;}
.inline-form .field{margin:0;}
.chart-holder{min-height:150px;}

/* ===== v1.1 additions ===== */

/* Topbar search is a real form now */
.search-pill input{border:none; background:transparent; outline:none; font-size:13px; color:var(--ink); flex:1; min-width:0; font-family:inherit;}
.search-pill{width:320px;}

/* Animated sync indicator */
.sync-indicator i{display:inline-block;}
.sync-indicator.is-syncing{color:var(--primary);}
.sync-indicator.is-syncing i{animation:tl-spin 1s linear infinite;}
@keyframes tl-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.badge-tl .bi-arrow-repeat{animation:tl-spin 1s linear infinite; display:inline-block;}

/* Sortable table headers */
th a.sort-link{color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:4px;}
th a.sort-link:hover{color:var(--primary);}
th a.sort-link .bi{font-size:10px;}

/* Per-page selector + pagination bar */
.per-page-box{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);}
.per-page-box select{padding:5px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; background:#fff; font-family:inherit;}

/* KPI icon squares use bootstrap-icons now */
.avatar-title .bi{font-size:19px;}

/* Top Selling Designs — full-width row of product cards */
.tsd-row .tsp-card{position:relative;}
.tsp-img{background:#F1F3F9; overflow:hidden;}
.tsp-img img{width:100%; height:100%; object-fit:cover; border-radius:6px;}
.tsp-img .bi{font-size:34px; color:var(--muted);}
.tsp-store{font-size:10.5px; color:var(--muted); display:flex; align-items:center; gap:4px; margin-top:2px;}

/* Production checklist cards (Option A) */
.pf-card{background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px 18px; height:100%;}
.pf-card .prod-img{width:110px; height:126px; border-radius:10px; background:#F1F3F9; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;}
.pf-card .prod-img img{width:100%; height:100%; object-fit:cover;}
.pf-card .prod-img .bi{font-size:38px; color:var(--muted);}
.size-chip{border:1px solid var(--border); border-radius:8px; min-width:56px; padding:7px 9px; text-align:center; background:#FAFBFD; display:inline-block;}
.size-chip b{display:block; font-size:15px;}
.size-chip span{font-size:9.5px; color:var(--muted); text-transform:uppercase; font-weight:700;}
.pf-checklist{border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-top:12px;}
.pf-checklist table.data th{padding:8px 12px; font-size:10px;}
.pf-checklist table.data td{padding:8px 12px; font-size:12.5px; white-space:normal;}
.pf-checklist tr.is-checked td{background:var(--success-subtle);}
.pf-check{width:16px; height:16px; accent-color:var(--primary); cursor:pointer;}
.pf-progress{display:flex; align-items:center; gap:12px; margin-top:12px;}
.pf-progress .bar{flex:1; height:7px; background:var(--border); border-radius:6px; overflow:hidden;}
.pf-progress .bar > span{display:block; height:100%; background:var(--success); border-radius:6px; transition:width .2s;}
.pf-progress .lbl{font-size:11px; color:var(--muted); font-weight:700; white-space:nowrap;}
.store-tab{border:1px solid var(--border); background:#fff; border-radius:8px; padding:8px 16px; font-weight:700; font-size:12.5px; color:#54607A; text-decoration:none; display:inline-block;}
.store-tab.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.view-toggle{display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.view-toggle button{border:none; background:#fff; padding:8px 14px; font-size:12.5px; font-weight:700; color:#54607A; cursor:pointer; font-family:inherit;}
.view-toggle button.active{background:var(--primary); color:#fff;}

/* Size-run grid (Option B) */
.size-matrix th, .size-matrix td{text-align:center;}
.size-matrix td.qty{font-weight:700; font-size:13.5px;}
.size-matrix .design-cell{text-align:left; display:flex; align-items:center; gap:12px; white-space:normal;}
.thumb{width:48px; height:54px; border-radius:8px; background:#F1F3F9; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;}
.thumb img{width:100%; height:100%; object-fit:cover;}
.thumb .bi{font-size:20px; color:var(--muted);}
.grid-expand-row > td{background:#FAFBFD; padding:10px 16px !important;}

/* Designs page cards */
.design-card{background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px; height:100%; display:flex; flex-direction:column; gap:8px;}
.design-card .d-img{height:120px; border-radius:8px; background:#F1F3F9; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.design-card .d-img img{width:100%; height:100%; object-fit:cover;}
.design-card .d-img .bi{font-size:34px; color:var(--muted);}
.design-card .d-name{font-weight:700; font-size:12.5px; color:var(--primary);}
.design-card .d-stats{display:flex; gap:12px; font-size:11px; color:var(--muted);}
.design-card .d-stats b{color:var(--ink); display:block; font-size:13px;}
.cost-form{display:flex; gap:6px; align-items:center; margin-top:auto;}
.cost-form input{width:70px; padding:5px 7px; border:1px solid var(--border); border-radius:6px; font-size:11.5px; background:var(--body-bg); font-family:inherit;}
.cost-form button{padding:5px 9px;}

/* Auth screens (Vixon auth-* layouts) */
.auth-page{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#332757; padding:24px; font-family:'Public Sans',sans-serif;}
.auth-brand{display:flex; align-items:center; gap:10px; margin-bottom:22px; color:#fff;}
.auth-brand .brand-mark-box{width:38px; height:38px; font-size:17px;}
.auth-brand b{font-size:20px;}
.auth-card{background:#fff; border-radius:12px; padding:32px 30px; width:100%; max-width:420px; box-shadow:0 10px 40px rgba(0,0,0,.25);}
.auth-card h1{font-size:17px; font-weight:700; margin:0 0 4px; color:var(--ink); text-align:center;}
.auth-sub{font-size:12.5px; color:var(--muted); text-align:center; margin-bottom:22px;}
.auth-card .field{margin-bottom:14px;}
.auth-card .btn-tl{width:100%; padding:11px; font-size:13px;}
.auth-links{display:flex; justify-content:space-between; align-items:center; font-size:12px; margin:4px 0 16px;}
.auth-links a{color:var(--primary); text-decoration:none; font-weight:600;}
.auth-foot{color:#B2A6D6; font-size:11.5px; margin-top:20px; text-align:center;}
.auth-avatar{width:64px; height:64px; border-radius:50%; background:var(--primary-subtle); color:var(--primary); font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
.auth-error{background:var(--danger-subtle); color:var(--danger); border-radius:8px; padding:10px 14px; font-size:12px; margin-bottom:14px;}