/* ============================================================
   Wedding Cards — admin. Same tokens as the customer site, but
   built for a phone at the shop counter and a desktop at home.
   ============================================================ */
:root{
  --maroon:#5b1620; --maroon-2:#3f0e16; --gold:#c9a227; --gold-lt:#e9d18c;
  --sand:#f7f3ea; --line:#e3dac6; --ink:#241a17; --muted:#7d6d60;
  --ok:#1f7a4d; --danger:#b03a2e; --wa:#128c4b;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Mukta",-apple-system,"Segoe UI",sans-serif;
}
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--sand);color:var(--ink);font-size:15px;line-height:1.5}
img{display:block;max-width:100%}
input,select,textarea,button{font-family:var(--sans)}
.hint{font-size:.83rem;color:var(--muted)}
.err{color:var(--danger);font-size:.88rem;min-height:18px}

/* ---------- buttons ---------- */
.btn,.primary,.ghost{border-radius:10px;cursor:pointer;font-weight:600;border:1px solid transparent}
.btn.out{background:#fff;border-color:var(--line)}
.btn.out:hover{border-color:var(--gold)}
.btn.sm{padding:9px 13px;font-size:.86rem}
.primary{background:var(--maroon);color:var(--gold-lt);border-color:var(--maroon)}
.primary:hover{background:var(--maroon-2)}
.ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.sw{width:46px;height:26px;border-radius:999px;background:#d8d2c6;position:relative;border:0;cursor:pointer;
  transition:.15s;flex:0 0 auto}
.sw:after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;
  transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw.on{background:var(--ok)}
.sw.on:after{left:22px}
.mini{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;font-size:.79rem;cursor:pointer}
.mini.red{color:var(--danger);border-color:#f0d3ce;background:#fdf2f0}
.mini.grey{color:#555;background:#f2f1ee}

/* ---------- login ---------- */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(165deg,var(--maroon),var(--maroon-2))}
.login-box{background:#fff;border-radius:18px;padding:30px 26px;width:100%;max-width:370px;
  box-shadow:0 24px 60px rgba(0,0,0,.32);display:flex;flex-direction:column;gap:8px}
.login-box h1{font-family:var(--serif);font-size:1.9rem;color:var(--maroon)}
.login-box label{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-top:8px}
.login-box input{padding:14px;border:1px solid var(--line);border-radius:10px;font-size:1rem}
.login-box .primary{padding:15px;font-size:1rem;margin-top:8px}

/* ---------- shell ---------- */
.hdr{position:sticky;top:0;z-index:30;background:var(--maroon);color:#f6ebd6;padding:12px 16px;display:flex;
  align-items:center;gap:12px;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.hdr h1{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:#fff}
.hdr .grow{flex:1}
.hdr button,.hdr-link{border:1px solid rgba(233,209,140,.5);background:transparent;color:var(--gold-lt);
  border-radius:8px;padding:7px 12px;font-size:.84rem;cursor:pointer}
.hdr-link:hover,.hdr button:hover{background:rgba(233,209,140,.14)}
.tabs{display:flex;gap:6px;padding:12px 14px 0;position:sticky;top:53px;z-index:20;background:var(--sand)}
.tab{flex:1;padding:11px;border:1px solid var(--line);background:#fff;border-radius:10px;font-weight:600;
  font-size:.9rem;cursor:pointer}
.tab.on{background:var(--maroon);border-color:var(--maroon);color:var(--gold-lt)}
main{padding:14px 14px 120px;max-width:1220px;margin:0 auto}

/* ---------- stats + tools ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.stat b{display:block;font-size:1.4rem;font-family:var(--serif);color:var(--maroon);line-height:1.1}
.stat span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.tools{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tools input[type=search]{flex:1;min-width:190px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:.94rem}
.seg2{display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg2 button{border:0;background:transparent;padding:10px 14px;font-size:.86rem;font-weight:600;cursor:pointer}
.seg2 button.on{background:#f1e8d8;color:var(--maroon)}

/* ---------- rows ---------- */
.pane{display:grid;gap:16px}
.rows{display:flex;flex-direction:column;gap:10px}
.row{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;gap:12px;align-items:center}
.row.picked{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,162,39,.22)}
.row .tick{width:20px;height:20px;accent-color:var(--maroon);flex:0 0 auto}
.row img{width:56px;height:74px;object-fit:cover;background:#f1e8d8;cursor:pointer;flex:0 0 auto}
.row .g{flex:1;min-width:0}
.row b{display:block;font-size:.98rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .m{font-size:.8rem;color:var(--muted);margin-top:2px}
.row .code{font-size:.72rem;letter-spacing:.1em;color:var(--gold);font-weight:700;text-transform:uppercase}
.row .price{color:var(--maroon);font-weight:700}
.row .rail{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.chipmini{display:inline-flex;gap:5px;align-items:center;font-size:.7rem;background:#f1e8d8;color:var(--maroon);
  border-radius:999px;padding:3px 8px;margin:2px 4px 0 0}
.nimg{background:#fdf2f0;color:var(--danger);border:1px solid #f0d3ce;border-radius:999px;padding:2px 8px;
  font-size:.68rem;font-weight:700;margin-left:6px}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.panel h2{font-family:var(--serif);font-size:1.3rem;color:var(--maroon);margin-bottom:4px}
.panel .qa{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- form ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.form h2{font-family:var(--serif);font-size:1.45rem;color:var(--maroon)}
.form .hint{margin:4px 0 14px}
.field{margin-bottom:16px}
.field>label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.field>label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400}
.field input[type=text],.field input[type=number],.field select,.field textarea{width:100%;padding:13px;
  border:1px solid var(--line);border-radius:10px;font-size:1rem;background:#fff}
.field textarea{resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photobtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pb{border:1.5px dashed var(--gold);background:#fffaf0;border-radius:12px;padding:18px 10px;text-align:center;
  font-weight:600;color:#8f7118;cursor:pointer;font-size:.92rem;display:block}
.pb:active{background:#fdf3dc}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.th{position:relative;width:84px}
.th img{width:84px;height:112px;object-fit:cover;border:1px solid var(--line)}
.th .del{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;
  background:var(--danger);color:#fff;font-size:.72rem;cursor:pointer;line-height:1}
.th .ord{display:flex;gap:3px;margin-top:4px}
.th .ord button{flex:1;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-size:.7rem;
  padding:3px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:.87rem;cursor:pointer}
.chip.on{background:var(--maroon);border-color:var(--maroon);color:var(--gold-lt)}
.switchrow{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;
  margin-bottom:10px}
.switchrow .g{flex:1}
.switchrow b{display:block;font-size:.92rem}
.switchrow span{font-size:.78rem;color:var(--muted)}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:35;background:rgba(255,255,255,.98);
  border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px}
.savebar .ghost{flex:0 0 32%;padding:15px;font-size:.95rem}
.savebar .prim{flex:1;padding:15px;font-size:1rem}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:60;background:#221a16;color:#fff;
  padding:12px 20px;border-radius:999px;font-size:.88rem;box-shadow:0 10px 28px rgba(0,0,0,.3);opacity:0;
  pointer-events:none;transition:.2s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- desktop ---------- */
@media(min-width:1000px){
  .pane{grid-template-columns:1fr 360px;align-items:start}
  .rows{max-height:74vh;overflow:auto;padding-right:6px}
  .side{position:sticky;top:130px}
  main{padding-bottom:40px}
  .savebar{position:static;border:0;background:transparent;padding:16px 0 0}
  .savebar .prim,.savebar .ghost{flex:1}
  .form{max-width:820px}
}
@media(max-width:999px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
  .side{order:-1}
}