:root{
  --paper:#f2f1ec; --paper-raised:#fbfaf6; --paper-sunken:#e9e7de;
  --ink:#1c1e1b; --ink-soft:#5c5d55; --ink-faint:#8b8b81;
  --line:#dad8ce; --line-strong:#c4c2b6;
  --accent:#2454c9; --accent-ink:#ffffff; --accent-soft:#e4eafb; --accent-soft-line:#c3d1f4;
  --good:#3c8d5a; --good-soft:#e2efe6; --warn:#c4791e; --warn-soft:#f7e9d6;
  --bad:#c13b3b; --bad-soft:#f7e0e0; --mute:#8b8b81; --mute-soft:#eae9e2;
  --radius:10px;
  --shadow:0 1px 2px rgba(28,30,27,0.06), 0 6px 20px -12px rgba(28,30,27,0.18);
  --font-label:'Bahnschrift','Arial Narrow','Helvetica Neue Condensed',Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'Cascadia Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#17181a; --paper-raised:#1f2124; --paper-sunken:#131415;
    --ink:#edebe3; --ink-soft:#a6a395; --ink-faint:#726f63;
    --line:#34363a; --line-strong:#454850;
    --accent:#6e8fff; --accent-ink:#0d1220; --accent-soft:#202a47; --accent-soft-line:#33417a;
    --good:#4cae77; --good-soft:#193627; --warn:#e0973b; --warn-soft:#3a2b14;
    --bad:#e06060; --bad-soft:#3b1e1e; --mute:#726f63; --mute-soft:#25262a;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -14px rgba(0,0,0,0.6);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--font-body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);}
button{font-family:inherit;}

.shell{ display:grid; grid-template-columns:210px 1fr; min-height:100vh; }
@media (max-width:820px){ .shell{grid-template-columns:1fr;} }

.rail{
  background:var(--paper-sunken); border-right:1px solid var(--line); padding:20px 14px;
  display:flex; flex-direction:column; gap:22px;
  /* Without this, a grid item stretches to match the row height — so a long
     table in .main drags the rail (and the "Log out" link pinned to its
     bottom via .rail-foot's margin-top:auto) down with it. Pinning it to
     the viewport instead keeps it — and Log out — always in place. */
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
}
@media (max-width:820px){ .rail{ position:static; height:auto; } }
.brand{ display:flex; flex-direction:column; gap:2px; padding:2px 8px 14px; border-bottom:1px solid var(--line); }
.brand-mark{ font-family:var(--font-label); font-weight:700; font-size:1.05rem; letter-spacing:0.02em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.brand-mark .swatch{width:11px;height:11px;border-radius:2px;background:var(--accent);flex:none;}
.brand-sub{ font-size:0.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.08em; font-family:var(--font-label); }
.rail-nav{display:flex;flex-direction:column;gap:2px;}
.rail-eyebrow{ font-family:var(--font-label); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); padding:0 10px; margin:10px 0 4px; }
.rail-link{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  border:1px solid transparent; background:transparent; color:var(--ink-soft);
  font-size:0.9rem; text-decoration:none;
}
.rail-link:hover{background:var(--paper-raised);color:var(--ink);}
.rail-link.is-active{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft-line); font-weight:600; }
.rail-badge{
  margin-left:auto; font-family:var(--font-mono); font-size:0.68rem; font-weight:700;
  background:var(--bad); color:#fff; border-radius:999px; padding:1px 7px; line-height:1.4;
}
.rail-foot{ margin-top:auto; padding:10px 8px 0; border-top:1px solid var(--line); font-size:0.76rem; color:var(--ink-faint); }
.rail-foot a{color:var(--ink-faint);}
.rail-foot form{display:inline;margin:0;}
.rail-foot .link-button{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--ink-faint);text-decoration:underline;cursor:pointer;}

.main{padding:22px 30px 60px;max-width:1180px;}
.topbar{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:8px; flex-wrap:wrap; }
.crumb{ font-family:var(--font-label); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 4px; text-decoration:none; display:inline-block; }
.crumb:hover{color:var(--accent);}
.h1{ font-family:var(--font-label); font-weight:700; font-size:1.6rem; letter-spacing:0.01em; margin:0; }
.lede{ color:var(--ink-soft); font-size:0.92rem; margin:0 0 20px; max-width:70ch; }

.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:8px;
  border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink);
  font-size:0.87rem; font-weight:600; cursor:pointer; text-decoration:none;
}
.btn:hover{border-color:var(--ink-faint);}
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{filter:brightness(1.06);}
.btn-danger{background:var(--bad-soft);border-color:transparent;color:var(--bad);}
.btn-sm{padding:6px 11px;font-size:0.8rem;}
.btn:disabled{opacity:0.45;cursor:not-allowed;}

.toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.search{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--paper-raised);
  border-radius:8px; padding:8px 12px; flex:1; min-width:200px; max-width:320px; color:var(--ink-faint);
}
.search input{ border:none;background:transparent;outline:none;color:var(--ink); font-size:0.87rem;width:100%; }
.spacer{flex:1;}

.summary-strip{
  display:flex; border:1px solid var(--line); background:var(--paper-raised);
  border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden;
}
.summary-cell{ flex:1; padding:12px 16px; border-right:1px solid var(--line); }
.summary-cell:last-child{border-right:none;}
.summary-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:1.3rem; font-weight:600; line-height:1.1; }
.summary-num.warn{color:var(--warn);}
.summary-label{ font-size:0.75rem; color:var(--ink-soft); margin-top:2px; }

.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:0.74rem; font-weight:600;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.badge.good{background:var(--good-soft);color:var(--good);}
.badge.warn{background:var(--warn-soft);color:var(--warn);}
.badge.bad{background:var(--bad-soft);color:var(--bad);}
.badge.mute{background:var(--mute-soft);color:var(--ink-faint);}

.table-wrap{ border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); box-shadow:var(--shadow); overflow-x:auto; }
table{width:100%;border-collapse:collapse;}
th{
  text-align:left; font-family:var(--font-label); text-transform:uppercase; letter-spacing:0.05em;
  font-size:0.68rem; color:var(--ink-faint); padding:10px 14px; border-bottom:1px solid var(--line);
  background:var(--paper-sunken); white-space:nowrap;
}
td{ padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td{border-bottom:none;}
tbody tr.is-clickable{cursor:pointer;}
tbody tr.is-clickable:hover td{background:var(--paper-sunken);}
.product-name{font-weight:700;font-size:0.94rem;}
.product-type{color:var(--ink-faint);font-size:0.8rem;}
.mono{font-family:var(--font-mono);}
.sku-cell{font-family:var(--font-mono);font-size:0.84rem;color:var(--ink-soft);}
.progress-track{ width:100px;height:6px;border-radius:999px;background:var(--mute-soft);overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px; }
.progress-fill{height:100%;background:var(--good);}
.progress-fill.warn{background:var(--warn);}
.mapped-count .num-ready{color:var(--ink);}
.mapped-count.is-pending .num-ready{color:var(--bad);font-weight:700;}
.mapped-count .num-total{color:var(--ink-faint);}
.chevron{color:var(--ink-faint);}

.cell-input{
  width:100%; border:1px solid transparent; background:transparent; border-radius:6px; padding:6px 8px;
  color:var(--ink); font-size:0.86rem; font-family:inherit;
}
.cell-input:hover{border-color:var(--line);}
.cell-input:focus{outline:none;border-color:var(--accent);background:var(--paper);}
.link-cell{display:flex;align-items:center;gap:6px;}
.link-cell .cell-input{flex:1;}
.link-open{ color:var(--ink-faint); flex:none; display:flex; }

.drive-thumb{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:6px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper-sunken);
  font-size:18px; color:var(--ink-faint);
}
img.drive-thumb{ object-fit:cover; }
.drive-thumb-folder{ text-decoration:none; }
.drive-thumb-empty{ border-style:dashed; }
.row-delete{ background:none;border:none;color:var(--ink-faint);cursor:pointer;padding:4px; border-radius:6px; }
.row-delete:hover{color:var(--bad);background:var(--bad-soft);}

.panel{
  border:1px solid var(--line); background:var(--paper-raised); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; margin-bottom:14px;
}
.panel.is-resolved{opacity:0.6;}
.panel-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.panel-order{ font-family:var(--font-mono); font-weight:700; font-size:0.95rem; }
.panel-sku{ font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-soft); }
.panel-msg{ font-size:0.86rem; color:var(--ink-soft); margin:2px 0 0; max-width:60ch; }
.panel-fix-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.panel-fix-row input[type="text"], .panel-fix-row input[type="url"]{
  flex:1; min-width:220px; border:1px solid var(--line-strong); border-radius:7px; padding:8px 10px;
  background:var(--paper); color:var(--ink); font-size:0.85rem; font-family:var(--font-mono);
}

.form-panel{
  border:1px solid var(--accent-soft-line); background:var(--accent-soft); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:18px;
}
.form-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;align-items:center;}
.form-row input, .form-row select{
  border:1px solid var(--line-strong); border-radius:7px; padding:8px 10px; background:var(--paper-raised);
  color:var(--ink); font-size:0.86rem;
}
.form-row label{font-size:0.78rem;color:var(--ink-soft);}
.field-hint{font-size:0.78rem;color:var(--ink-faint);margin:0 0 10px;}
.helper-text{color:var(--ink-faint);font-size:0.85rem;margin:0 0 18px;max-width:68ch;}

.pagination-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.pagination-count{font-size:0.82rem;color:var(--ink-faint);}
.pagination-controls{display:flex;align-items:center;gap:10px;}
.pagination-page{font-size:0.82rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;}

.toolbar select{
  border:1px solid var(--line); background:var(--paper-raised); color:var(--ink);
  border-radius:8px; padding:8px 12px; font-size:0.87rem;
}
.toolbar form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.email-list{ display:flex; flex-direction:column; gap:8px; max-width:480px; margin-bottom:18px; }
.email-row{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--paper-raised);
  border-radius:8px; padding:9px 12px;
}
.email-row span{flex:1;font-size:0.88rem;}
.email-add-row{ display:flex; gap:8px; max-width:480px; }
.email-add-row input{
  flex:1; border:1px solid var(--line-strong); border-radius:8px; padding:9px 12px;
  background:var(--paper-raised); color:var(--ink); font-size:0.88rem;
}

.flash{
  border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:0.88rem;
  border:1px solid var(--bad); background:var(--bad-soft); color:var(--bad);
}

/* ---- Confirm modal (public/js/confirmModal.js) ---- */
dialog.confirm-dialog{
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  background:var(--paper-raised); color:var(--ink); padding:20px 22px;
  width:100%; max-width:380px; font-family:var(--font-body);
}
dialog.confirm-dialog::backdrop{background:rgba(15,15,12,0.4);}
@media (prefers-color-scheme: dark){ dialog.confirm-dialog::backdrop{background:rgba(0,0,0,0.6);} }
.confirm-dialog-msg{margin:0 0 18px;font-size:0.92rem;line-height:1.5;}
.confirm-dialog-actions{display:flex;justify-content:flex-end;gap:8px;}

/* ---- Login ---- */
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{
  width:100%; max-width:360px; border:1px solid var(--line); background:var(--paper-raised);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 26px;
}
.login-card .brand-mark{margin-bottom:18px;}
.login-card .form-group{margin-bottom:14px;}
.login-card label{display:block;font-size:0.78rem;color:var(--ink-soft);margin-bottom:4px;}
.login-card input{
  width:100%; border:1px solid var(--line-strong); border-radius:8px; padding:10px 12px;
  background:var(--paper); color:var(--ink); font-size:0.9rem;
}
.login-card .btn{width:100%;justify-content:center;margin-top:6px;}