/* ============================================================
   Findorado Dashboard – dashboard.css
   Same design language as website (Playfair + DM Sans + cream)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:       #0a0a0f;
  --paper:     #fafaf7;
  --cream:     #f3f0e8;
  --cream2:    #ede9dc;
  --accent:    #e8420a;
  --accent-d:  #c93800;
  --accent2:   #2a5fff;
  --gold:      #c9a84c;
  --muted:     #7a7a72;
  --border:    #e2dfd6;
  --border2:   #d4d0c4;
  --green:     #16a34a;
  --green-bg:  #dcfce7;
  --blue-bg:   #dbeafe;
  --r:         10px;
  --r-lg:      16px;
  --shadow:    0 1px 3px rgba(10,10,15,.06),0 2px 8px rgba(10,10,15,.04);
  --shadow-md: 0 4px 20px rgba(10,10,15,.10);
}

html{height:100%}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:14px;min-height:100vh}

/* ── LOGIN ──────────────────────────────────────── */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--cream)}
.login-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:48px 44px;width:400px;box-shadow:var(--shadow-md)}
.login-logo{font-family:'Playfair Display',serif;font-size:26px;font-weight:900;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.login-logo svg{flex-shrink:0}
.login-logo em{color:var(--accent);font-style:italic}
.login-card h1{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;margin-bottom:6px}
.login-card p{font-size:13px;color:var(--muted);margin-bottom:28px}

/* ── DASHBOARD LAYOUT ───────────────────────────── */
.dash-body{display:flex;min-height:100vh}

/* Sidebar – dark ink like website footer */
.sidebar{width:235px;background:var(--ink);display:flex;flex-direction:column;flex-shrink:0}
.sb-logo{padding:20px 18px 22px;display:flex;align-items:center;gap:9px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo-icon{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-logo-text{font-family:'Playfair Display',serif;font-size:17px;font-weight:900;color:#fff;letter-spacing:-.3px}
.sb-logo-text em{color:var(--accent);font-style:italic}
.sb-nav{padding:14px 10px;flex:1;display:flex;flex-direction:column;gap:1px}
.sb-section{font-size:10px;font-weight:600;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:.12em;padding:14px 10px 6px}
.sb-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.45);cursor:pointer;transition:all .15s;text-decoration:none}
.sb-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
.sb-item.active{background:var(--accent);color:#fff}
.sb-item svg{width:15px;height:15px;flex-shrink:0}
.sb-bottom{padding:12px 10px;border-top:1px solid rgba(255,255,255,.08)}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px}
.sb-avatar{width:32px;height:32px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.sb-uname{font-size:13px;font-weight:500;color:#fff}
.sb-urole{font-size:11px;color:rgba(255,255,255,.3)}
.sb-logout{display:block;font-size:12px;color:rgba(255,255,255,.3);text-align:center;padding:8px;transition:color .15s;text-decoration:none}
.sb-logout:hover{color:rgba(255,255,255,.7)}

/* Main area */
.dash-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--border);background:var(--paper)}
.topbar-left h1{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;letter-spacing:-.4px}
.topbar-left p{font-size:12px;color:var(--muted);margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:10px}

/* ── Buttons ─────────────────────────────────────── */
.btn-primary{padding:8px 18px;background:var(--ink);color:#fff;border:none;border-radius:40px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit;text-decoration:none;display:inline-block}
.btn-primary:hover{background:var(--accent)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-primary.full{width:100%;text-align:center;padding:11px}
.btn-outline{padding:8px 16px;background:transparent;border:1px solid var(--border2);border-radius:40px;font-size:13px;color:var(--ink);cursor:pointer;transition:all .15s;font-family:inherit;text-decoration:none;display:inline-block}
.btn-outline:hover{border-color:var(--ink)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-d)}

/* ── Content ─────────────────────────────────────── */
.content{padding:24px 28px;overflow-y:auto;flex:1}

/* ── Stats ───────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.sc{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:18px 16px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.sc-stripe{position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r) var(--r) 0 0}
.sc.c1 .sc-stripe{background:var(--accent)}
.sc.c2 .sc-stripe{background:var(--green)}
.sc.c3 .sc-stripe{background:var(--accent2)}
.sc.c4 .sc-stripe{background:var(--gold)}
.sc-label{font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.sc-value{font-family:'Playfair Display',serif;font-size:32px;font-weight:700;letter-spacing:-1px;margin-bottom:5px}
.sc-delta{font-size:11px;font-weight:500;display:flex;align-items:center;gap:3px}
.sc-delta.up{color:var(--green)}.sc-delta.neu{color:var(--muted)}

/* ── Charts ──────────────────────────────────────── */
.charts-row{display:grid;grid-template-columns:1.7fr 1fr;gap:12px;margin-bottom:18px}
.chart-box{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.chart-title{font-family:'Playfair Display',serif;font-size:15px;font-weight:700}
.chart-tabs{display:flex;gap:2px;background:var(--cream);border-radius:40px;padding:3px}
.ctab{padding:4px 12px;border-radius:40px;font-size:11px;font-weight:500;cursor:pointer;color:var(--muted);transition:all .15s}
.ctab.a{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.chart-legend{display:flex;gap:14px;margin-top:10px}
.chart-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.chart-legend-line{width:14px;height:2px;border-radius:1px}
.donut-wrap{display:flex;align-items:center;gap:18px;justify-content:center;padding:4px 0}
.donut-legend{display:flex;flex-direction:column;gap:9px}
.dl-item{display:flex;align-items:center;gap:8px;font-size:12px}
.dl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dl-pct{color:var(--muted);margin-left:auto;padding-left:12px;font-size:11px}

/* ── Bottom panels ───────────────────────────────── */
.bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel-title{font-family:'Playfair Display',serif;font-size:15px;font-weight:700}
.panel-link{font-size:11px;color:var(--accent);cursor:pointer;font-weight:500;text-decoration:none}
.panel-link:hover{text-decoration:underline}

/* ── Tables ──────────────────────────────────────── */
.dash-table{width:100%;border-collapse:collapse;font-size:13px}
.dash-table th{color:var(--muted);font-weight:500;text-align:left;padding:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border)}
.dash-table td{padding:10px 0;border-bottom:1px solid var(--border);vertical-align:middle}
.dash-table tr:last-child td{border-bottom:none}
.dash-table tr:hover td{background:var(--cream)}
.dash-table a{color:var(--accent2)}
.td-title{font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-bar-wrap{width:72px;height:3px;background:var(--cream2);border-radius:2px}
.td-bar{height:3px;border-radius:2px;background:var(--accent)}
.td-num{font-size:12px;color:var(--muted);text-align:right;padding-left:8px;white-space:nowrap}

/* ── Article Queue ───────────────────────────────── */
.queue-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.queue-item:last-child{border-bottom:none}
.qi-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.qi-info{flex:1;min-width:0}
.qi-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.qi-meta{font-size:11px;color:var(--muted)}
.badge{display:inline-block;font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;flex-shrink:0}
.badge-published{background:var(--green-bg);color:var(--green)}
.badge-draft{background:var(--cream);color:var(--muted)}
.badge-scheduled{background:var(--blue-bg);color:var(--accent2)}

/* ── Write Layout ────────────────────────────────── */
.write-layout{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start}
.ws-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:14px;box-shadow:var(--shadow)}
.ws-title{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;margin-bottom:14px;color:var(--ink)}

/* ── Forms ───────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.field input,.field select,.field textarea{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--ink);background:#fff;outline:none;font-family:inherit;transition:border-color .15s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{resize:vertical;line-height:1.65}
.field small{font-size:11px;color:var(--muted)}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ai-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;padding:12px;background:var(--cream);border-radius:var(--r)}

/* Toggle switch */
.toggle-wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.toggle-wrap:last-child{border-bottom:none}
.toggle-label{font-size:13px;font-weight:500}
.toggle-desc{font-size:11px;color:var(--muted);margin-top:2px}
.toggle{position:relative;width:38px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--border2);border-radius:11px;cursor:pointer;transition:.2s}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:var(--accent)}
.toggle input:checked+.toggle-slider::before{transform:translateX(16px)}

/* Status messages */
.status-msg{font-size:13px;padding:9px 12px;border-radius:8px;margin-top:8px}
.status-ok{background:var(--green-bg);color:var(--green)}
.status-err{background:#fef2f2;color:#dc2626}
.status-info{background:var(--cream);color:var(--muted)}

/* Alerts */
.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;border:1px solid}
.alert-err{background:#fef2f2;color:#dc2626;border-color:#fecaca}
.alert-ok{background:var(--green-bg);color:var(--green);border-color:#bbf7d0}

/* Product edit cards */
.product-edit-card{display:flex;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);align-items:flex-start;transition:background .15s}
.product-edit-card:hover{background:var(--cream)}
.pec-img{width:72px;height:72px;flex-shrink:0;border-radius:8px;background:#fff;border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pec-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.pec-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.pec-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.pec-meta{display:flex;align-items:center;gap:12px}
.pec-clicks{font-size:11px;color:var(--muted);background:var(--cream);padding:2px 8px;border-radius:20px}
.pec-link{font-size:11px;color:var(--accent2);text-decoration:none}
.pec-link:hover{text-decoration:underline}
.pec-edit{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ── Product Slots ───────────────────────────────── */
.product-slot{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.product-slot:last-child{border-bottom:none}
.slot-num{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:6px}
.slot-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.slot-inputs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.slot-inputs input{padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-size:12px;font-family:inherit;color:var(--ink);background:#fff;outline:none;min-width:120px}
.slot-inputs input:focus{border-color:var(--ink)}
.slot-preview{display:flex;align-items:center;gap:12px;background:var(--cream);border-radius:10px;padding:10px 14px}
.slot-preview img{width:56px;height:56px;object-fit:contain;border-radius:6px;background:#fff;padding:4px;flex-shrink:0}
.slot-preview-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.slot-pname{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-pprice{font-size:14px;font-weight:700;color:var(--accent);font-family:'Playfair Display',serif}
.slot-clear{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:0 4px;line-height:1}
.slot-clear:hover{color:#dc2626}

/* ── Product Cards (new grid) ───────────────────── */
.pcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:box-shadow .2s}
.pcard:hover{box-shadow:var(--shadow-md)}
.pcard-img{height:160px;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border)}
.pcard-img img{max-width:100%;max-height:140px;object-fit:contain;padding:10px;background:#fff}
.pcard-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.pcard-price{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--accent)}
.pcard-stars{font-size:14px;color:var(--gold);letter-spacing:1px}
.pcard-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.pcard-clicks{font-size:11px;color:var(--muted);background:var(--cream);padding:2px 8px;border-radius:20px}
.pcard-amz{font-size:11px;color:var(--accent2);text-decoration:none}
.pcard-amz:hover{text-decoration:underline}
.pcard-actions{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}

/* ── DnD Product Slots ──────────────────────────── */
.slots-dnd { display: flex; flex-direction: column; gap: 8px; }
.product-slot { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: #fff; cursor: default; transition: all .15s; user-select: none; }
.product-slot.drag-over { border-color: var(--accent); background: var(--accent-light); }
.product-slot[draggable="true"] { cursor: grab; }
.product-slot[draggable="true"]:active { cursor: grabbing; }
.slot-drag-handle { font-size: 16px; color: var(--border2); padding: 4px 2px; cursor: grab; flex-shrink: 0; line-height: 1; margin-top: 6px; }
.slot-drag-handle:hover { color: var(--muted); }
.slot-num { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 5px; }
.slot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.slot-inputs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.slot-inputs input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; color: var(--ink); background: #fff; outline: none; transition: border-color .15s; min-width: 100px; }
.slot-inputs input:focus { border-color: var(--ink); }
.slot-preview { display: flex; align-items: center; gap: 10px; background: var(--cream); border-radius: 8px; padding: 8px 12px; }
.slot-preview-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.slot-pname { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-pprice { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: var(--accent); }
.slot-clear { background: none; border: 1px solid var(--border2); border-radius: 6px; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 8px; line-height: 1; transition: all .15s; }
.slot-clear:hover { border-color: var(--accent); color: var(--accent); }

/* ── Write Editor Layout (2-col: textarea left, products right) ── */
.write-top-section { margin-bottom: 0; }
.write-top-section .ws-card { margin-bottom: 10px; }

.write-editor-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
.write-editor-left { display: flex; flex-direction: column; gap: 12px; }
.write-editor-right { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; }

/* Compact slots in right column */
.write-editor-right .product-slot { padding: 8px 10px; }
.write-editor-right .slot-inputs { flex-wrap: wrap; }
.write-editor-right .slot-inputs input { font-size: 12px; padding: 6px 8px; min-width: 80px; }
.write-editor-right #product-slots-card .ws-title { font-size: 13px; }

/* Ai bar in top section */
.write-top-section .ai-bar { background: var(--cream); border-radius: var(--r); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 0; }

@media(max-width: 1100px) {
  .write-editor-layout { grid-template-columns: 1fr; }
  .write-editor-right { position: static; max-height: none; }
}

/* ── Write Tab 2/3 | 1/3 Layout ─────────────────── */
.write-2col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
.write-left  { display: flex; flex-direction: column; gap: 12px; }
.write-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: thin;
}
/* Compact product slots in right col */
.write-right .product-slot { padding: 8px 10px; gap: 8px; }
.write-right .slot-inputs  { flex-wrap: wrap; gap: 4px; }
.write-right .slot-inputs input { font-size: 11px; padding: 5px 8px; }
.write-right .slots-dnd    { gap: 6px; }
.write-right #product-slots-card { padding: 14px; }
.write-right #product-slots-card .ws-title { font-size: 12px; }
.write-right #product-slots-card p { font-size: 11px; margin-bottom: 10px; }

@media(max-width: 1100px) {
  .write-2col { grid-template-columns: 1fr; }
  .write-right { position: static; max-height: none; }
}

/* ── Write Grid Layout (2/3 | 1/3) ─────────────── */
.write-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
.write-main-col { display: flex; flex-direction: column; gap: 14px; }
.write-side-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.write-side-col .ws-card { margin-bottom: 0; }
/* Compact slots in side column */
.write-side-col .product-slot { padding: 8px; gap: 7px; }
.write-side-col .slot-inputs input { font-size: 11px; padding: 5px 8px; min-width: 60px; }
.write-side-col #product-slots-card { padding: 14px; }
.write-side-col #product-slots-card > p { font-size: 11px; margin-bottom: 8px; }
.write-side-col .slots-dnd { gap: 5px; }
.write-side-col .slot-drag-handle { font-size: 14px; }
.write-side-col .slot-num { width: 22px; height: 22px; font-size: 10px; margin-top: 6px; }
@media(max-width: 1100px) {
  .write-grid { grid-template-columns: 1fr; }
  .write-side-col { position: static; max-height: none; }
}

/* ── Category Filter Pills ──────────────────────── */
.filter-pill {
  padding: 6px 14px;
  border-radius: 40px;
  border: 1px solid var(--border2);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.filter-pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Write Tab Grid (wgrid) ─────────────────────── */
.wgrid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
.wgrid-left  { display: flex; flex-direction: column; gap: 14px; }
.wgrid-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
/* Compact slots in right column */
.wgrid-right .product-slot       { padding: 7px 8px; gap: 6px; }
.wgrid-right .slot-inputs        { flex-wrap: wrap; gap: 4px; }
.wgrid-right .slot-inputs input  { font-size: 11px; padding: 5px 7px; min-width: 50px; }
.wgrid-right .slots-dnd          { gap: 5px; }
.wgrid-right .slot-drag-handle   { font-size: 13px; margin-top: 4px; }
.wgrid-right .slot-num           { width: 20px; height: 20px; font-size: 10px; margin-top: 4px; }
.wgrid-right #product-slots-card { padding: 12px; }
.wgrid-right #product-slots-card > p { font-size: 11px; margin-bottom: 8px; line-height: 1.4; }
.wgrid-right #insert-btn         { font-size: 12px; padding: 8px 12px; }
.wgrid-right .ws-card            { margin-bottom: 0; }

@media(max-width: 1100px) {
  .wgrid { grid-template-columns: 1fr; }
  .wgrid-right { position: static; max-height: none; }
}