/* Layout: phone-first field app. Top bar, one scrolling view, floating select bar, bottom tabs.
     Palette: cool paper, ink, one teal accent; pastel category tiles like a retail app. */
  :root {
    --bg:#F3F5F6; --card:#FFFFFF; --ink:#12181C; --muted:#667178; --line:#E1E6E8;
    --accent:#0E6B66; --accent-ink:#FFFFFF; --accent-soft:#DCEFEC;
    --ladies:#F8E4E6; --gents:#E3EDDD; --warn:#B26A00; --warn-soft:#FBEBCF; --bad:#B3261E;
    --display:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --tabh:62px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#0F1315; --card:#181E21; --ink:#ECF0F1; --muted:#93A0A6; --line:#262E32;
      --accent:#4FB8B0; --accent-ink:#06211F; --accent-soft:#17302E;
      --ladies:#3A2529; --gents:#25301F; --warn:#E5A53A; --warn-soft:#3A2D12; --bad:#F2877F; color-scheme:dark;
    }
  }
  :root[data-theme="dark"] {
    --bg:#0F1315; --card:#181E21; --ink:#ECF0F1; --muted:#93A0A6; --line:#262E32;
    --accent:#4FB8B0; --accent-ink:#06211F; --accent-soft:#17302E;
    --ladies:#3A2529; --gents:#25301F; --warn:#E5A53A; --warn-soft:#3A2D12; --bad:#F2877F; color-scheme:dark;
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  body { background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.4; padding-bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px)); }
  button { font:inherit; color:inherit; cursor:pointer; }
  input, select { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 13px; min-width:0; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  h1,h2,h3 { font-family:var(--display); margin:0; letter-spacing:-.01em; }

  .top { position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg); display:flex; align-items:center; gap:10px; padding:12px 16px; }
  .top h1 { font-size:1.25rem; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .iconbtn { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; flex:none; }
  .iconbtn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  main { padding:4px 16px 24px; max-width:900px; margin:0 auto; }

  .search { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:0 14px; }
  .search input { border:0; background:transparent; flex:1; padding:12px 0; }
  .search svg { width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; }

  .cats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
  .cat { border:0; border-radius:20px; padding:14px; height:200px; position:relative; overflow:hidden; text-align:left; display:flex; align-items:flex-end; }
  .cat.ladies { background:var(--ladies); } .cat.gents { background:var(--gents); }
  .cat .t { font-family:var(--display); font-size:1.35rem; font-weight:600; position:relative; z-index:2; }
  .cat .s { font-size:.78rem; color:var(--muted); position:relative; z-index:2; display:block; font-family:var(--body); font-weight:500; }
  .cat img { position:absolute; width:62%; aspect-ratio:3/4; object-fit:cover; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.18); }
  .cat img.a { top:12px; right:-6px; transform:rotate(6deg); } .cat img.b { top:36px; right:44%; transform:rotate(-7deg); }
  .sec { display:flex; justify-content:space-between; align-items:baseline; margin:22px 0 10px; }
  .sec h2 { font-size:1.05rem; } .sec span { color:var(--muted); font-size:.82rem; }
  .chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chip { flex:none; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:8px 16px; font-weight:500; }
  .chip.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .banner { margin-top:16px; width:100%; text-align:left; border:0; background:var(--warn-soft); color:var(--ink); border-radius:16px; padding:14px 16px; display:flex; justify-content:space-between; gap:10px; align-items:center; }
  .banner b { font-family:var(--display); }

  .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
  @media (min-width:640px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (min-width:860px) { .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .cat { height:240px; } }
  .tile { background:var(--card); border-radius:16px; overflow:hidden; position:relative; border:1px solid var(--line); text-align:left; padding:0; display:block; width:100%; }
  .tile .ph { aspect-ratio:4/5; background:var(--line); display:block; width:100%; object-fit:cover; object-position:center 60%; }
  .tile .meta { padding:9px 11px 11px; }
  .tile .n { font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tile .d { color:var(--muted); font-size:.8rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pick { position:absolute; top:8px; left:8px; width:30px; height:30px; border-radius:50%; border:2px solid #fff; background:rgba(0,0,0,.35); display:grid; place-items:center; color:#fff; }
  .pick.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .pick svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
  .pick.on svg { opacity:1; }
  .tag { position:absolute; top:8px; right:8px; font-size:.68rem; font-weight:600; padding:3px 8px; border-radius:999px; background:var(--warn-soft); color:var(--warn); }
  .tag.untag { background:#fde2e0; color:var(--bad); }
  .more { display:block; margin:18px auto 0; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:10px 22px; }

  .pager { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; scrollbar-width:none; margin-top:8px; }
  .pager::-webkit-scrollbar { display:none; }
  .slide { flex:0 0 100%; scroll-snap-align:center; background:var(--card); border-radius:20px; overflow:hidden; position:relative; border:1px solid var(--line); }
  .slide img { width:100%; height:min(62vh,560px); object-fit:contain; display:block; background:var(--card); }
  .slide .cap { padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--line); }
  .slide .cap b { font-family:var(--display); font-size:1.05rem; display:block; }
  .btn { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:10px 18px; font-weight:600; }
  .btn.pri { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .btn.dark { background:var(--ink); border-color:var(--ink); color:var(--bg); }
  .btn.wa { background:#1FA855; border-color:#1FA855; color:#fff; }
  .btn.danger { color:var(--bad); border-color:var(--bad); }
  .btn:disabled { opacity:.45; cursor:not-allowed; }
  .dots { display:flex; gap:6px; justify-content:center; margin-top:10px; }
  .dots i { width:7px; height:7px; border-radius:50%; background:var(--line); } .dots i.on { background:var(--ink); }

  .row { display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px; margin-top:8px; }
  .row img { width:56px; height:70px; object-fit:cover; border-radius:10px; flex:none; background:var(--line); }
  .row .x { flex:1; min-width:0; } .row .x b { display:block; } .row .x span { color:var(--muted); font-size:.82rem; }
  .actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
  .empty { text-align:center; padding:48px 16px; color:var(--muted); }

  .selbar { position:fixed; left:12px; right:12px; bottom:calc(var(--tabh) + 10px + env(safe-area-inset-bottom,0px)); z-index:30; background:var(--ink); color:var(--bg); border-radius:18px; padding:10px 10px 10px 16px; display:flex; align-items:center; gap:8px; box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:876px; margin:0 auto; }
  .selbar b { flex:1; font-family:var(--display); }
  .selbar .btn { padding:8px 14px; font-size:.85rem; }
  .tabbar { position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--card); border-top:1px solid var(--line); display:flex; padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px)); height:calc(var(--tabh) + env(safe-area-inset-bottom,0px)); }
  .tabbar button { flex:1; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:.72rem; font-weight:600; color:var(--muted); position:relative; }
  .tabbar button.on { color:var(--accent); }
  .tabbar svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .tabbar .badge { position:absolute; top:0; left:calc(50% + 6px); background:var(--accent); color:var(--accent-ink); border-radius:999px; font-size:.65rem; min-width:18px; padding:1px 5px; }

  dialog { border:0; border-radius:20px; padding:0; background:var(--card); color:var(--ink); width:min(440px,92vw); max-height:90vh; }
  dialog::backdrop { background:rgba(0,0,0,.5); }
  .dform { padding:18px; display:flex; flex-direction:column; gap:10px; }
  .dform label { font-size:.78rem; color:var(--muted); margin-bottom:-6px; }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .two > div { display:flex; flex-direction:column; gap:10px; min-width:0; }
  .preview { width:100%; max-height:260px; object-fit:contain; border-radius:12px; background:var(--bg); }
  .dact { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
  .toast { position:fixed; left:50%; bottom:calc(var(--tabh) + 90px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:12px; font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .2s; z-index:60; max-width:90vw; }
  .toast.show { opacity:1; }
  .seg { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
  .missRow { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.88rem; }
  @media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; transition:none !important; } }
body{margin:0}
.login{max-width:380px;margin:12vh auto 0;padding:0 20px;display:flex;flex-direction:column;gap:12px}
.login h1{font-size:1.8rem;margin-bottom:4px}
.login p{color:var(--muted);margin:0 0 6px}
.interp{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.interp span{background:var(--accent-soft);color:var(--ink);border-radius:999px;padding:4px 11px;font-size:.8rem;font-weight:600}
.note{color:var(--muted);font-size:.82rem;margin:8px 0 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:12px}
.card h3{font-size:1rem;margin-bottom:6px}
.prog{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:10px}
.prog i{display:block;height:100%;background:var(--accent);width:0}
textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;min-height:64px;resize:vertical}
.urow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.urow small{color:var(--muted);display:block}
.offpill{position:fixed;top:calc(env(safe-area-inset-top,0px) + 4px);right:8px;z-index:50;background:var(--warn-soft);color:var(--warn);font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:99px}
[hidden]{display:none!important}
.cat>span{background:rgba(255,255,255,.88);color:#12181C;border-radius:12px;padding:6px 11px}
.cat .s{color:#4d585e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cat>span{background:rgba(15,19,21,.82);color:#ECF0F1}:root:not([data-theme="light"]) .cat .s{color:#b4bfc4}}
.cat>span{position:relative;z-index:3;align-self:flex-end}