/* Loravi Admin — plum on cool stone, phone-first */
:root{
  --bg:#F3F2F6; --surface:#FFFFFF; --sunk:#EBE9F1; --line:#DDD9E5;
  --fg:#1D1A24; --muted:#6C6778; --accent:#5B2A86; --accent-ink:#FFFFFF; --accent-soft:#EFE6F7;
  --good:#1F7A4D; --good-soft:#DDF1E6; --warn:#A35C00; --warn-soft:#FBEBD3; --bad:#B3261E; --bad-soft:#F8DEDC;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141218; --surface:#1E1B24; --sunk:#29252F; --line:#37323F;
  --fg:#EEEAF4; --muted:#A39DAF; --accent:#B98AE6; --accent-ink:#1A1020; --accent-soft:#33263F;
  --good:#5FCB92; --good-soft:#18352A; --warn:#F0AE4E; --warn-soft:#3A2B14; --bad:#F2867E; --bad-soft:#3E1D1B; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.4 var(--body);-webkit-tap-highlight-color:transparent;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.hint{font-size:12.5px;color:var(--muted);margin:0}
[hidden]{display:none!important}

/* top balance band */
.top{background:var(--accent);color:var(--accent-ink);padding:calc(14px + env(safe-area-inset-top,0px)) var(--gut-r) 16px var(--gut)}
.top .in{max-width:760px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.top .brand{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.02em;opacity:.85}
.top .lbl{font-size:12.5px;font-weight:600;opacity:.8}
.top .bal{font-family:var(--num);font-weight:600;font-size:34px;line-height:1.1}
.top .break{font-size:12.5px;opacity:.85;display:flex;gap:4px 12px;flex-wrap:wrap}
.top a.link{background:rgba(255,255,255,.16);color:inherit;text-decoration:none;border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px}
@media (prefers-color-scheme:dark){.top a.link{background:rgba(0,0,0,.18)}}

main{max-width:760px;margin:0 auto;padding:16px var(--gut-r) calc(150px + env(safe-area-inset-bottom,0px)) var(--gut);display:flex;flex-direction:column;gap:14px}
h2{font-family:var(--display);font-weight:800;font-size:22px;margin:0;letter-spacing:-.01em;text-wrap:balance}
h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 0}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .k{font-size:12px;font-weight:700;color:var(--muted)}
.stat .v{font-family:var(--num);font-weight:600;font-size:18px}
.stat .s{font-size:11.5px;color:var(--muted)}
@media(max-width:420px){.stat .v{font-size:16px}.stat{padding:9px 10px}}
.month{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:13px;color:var(--muted);background:var(--sunk);border-radius:12px;padding:9px 12px}
.month b{color:var(--fg);font-family:var(--num);font-weight:600}

/* toolbar */
.search{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 14px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:13.5px;font-weight:700;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.chip b{font-family:var(--num);font-size:12px;background:var(--sunk);color:var(--fg);border-radius:999px;padding:1px 7px}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip[aria-pressed="true"] b{background:var(--bg);color:var(--fg)}

/* cards */
.list{display:flex;flex-direction:column;gap:10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:11px}
.card.returned{border-style:dashed}
.card.done{opacity:.8}
.c-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.c-top .who{min-width:0}
.c-top .name{font-weight:800;font-size:16.5px;overflow-wrap:anywhere}
.c-top .meta{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.small-btn{flex:none;background:var(--sunk);border:0;border-radius:10px;padding:7px 12px;font-size:13px;font-weight:700}
.pill{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;vertical-align:2px;margin-left:4px;letter-spacing:.02em}
.pill.ret{background:var(--bad-soft);color:var(--bad)} .pill.done{background:var(--good-soft);color:var(--good)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pairs{display:flex;flex-direction:column;gap:6px}
.pair{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.pair .t{min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dot{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid var(--line)}
.tag{font-size:10.5px;font-weight:800;border-radius:6px;padding:1px 6px;background:var(--sunk);color:var(--muted)}
.tag.ok{background:var(--good-soft);color:var(--good)}
.money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--sunk);border-radius:12px;padding:8px 10px}
.money div{display:flex;flex-direction:column;min-width:0}
.money .k{font-size:10.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.money .v{font-family:var(--num);font-weight:600;font-size:15px}
.pos{color:var(--good)} .neg{color:var(--bad)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.step{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--muted);line-height:1.15;text-align:center}
.step .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center}
.step.on{background:var(--good-soft);border-color:transparent;color:var(--good)}
.step.on .box{background:var(--good);border-color:var(--good)}
.step.on .box::after,.ck.on::after{content:"";width:9px;height:5px;border:2.5px solid var(--surface);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.step.part{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.step.part .box{border-color:var(--warn)}
.step:disabled{opacity:.4;cursor:default}
.c-actions{display:flex;gap:8px;flex-wrap:wrap}
.go{flex:1 1 210px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;padding:12px;font-weight:800;font-size:15px}
.ghost-btn{flex:none;background:none;border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-weight:700;font-size:13.5px}
.ghost-btn.red{color:var(--bad)}
.retbox{background:var(--bad-soft);border-radius:12px;padding:10px 12px;font-size:13.5px;display:flex;flex-direction:column;gap:4px}

.row{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.row .l{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1 1 180px}
.row .l b{font-size:15px;overflow-wrap:anywhere}
.row .l span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.row .r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.amt{font-family:var(--num);font-weight:600;font-size:17px}
.btn{border:0;border-radius:11px;padding:10px 16px;font-weight:800;font-size:14px;background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:var(--sunk);color:var(--fg)}
.btn.danger{background:var(--bad);color:#fff}
.btn.wide{width:100%;padding:13px}
.btn:disabled{opacity:.45;cursor:default}
.detail{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:2px;width:100%;border-top:1px solid var(--line);padding-top:8px}
.empty{text-align:center;padding:34px 16px;color:var(--muted);display:flex;flex-direction:column;gap:6px;align-items:center}
.empty strong{color:var(--fg);font-family:var(--display);font-size:19px}
.breakdown{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px 14px}
.breakdown .ln{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.breakdown .ln:last-child{border-bottom:0;font-weight:800}
.breakdown .ln span:last-child{font-family:var(--num);font-weight:600}
.notice{background:var(--warn-soft);border-radius:12px;padding:10px 12px;font-size:13.5px}
.notice.err{background:var(--bad-soft)}

/* bottom nav */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);
  padding:6px var(--gut-r) calc(6px + env(safe-area-inset-bottom,0px)) var(--gut)}
nav.tabs .in{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;max-width:760px;margin:0 auto}
nav.tabs a{text-decoration:none;color:var(--muted);border-radius:10px;padding:8px 2px;font-weight:800;font-size:12.5px;text-align:center}
nav.tabs a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.fab{position:fixed;z-index:21;right:max(16px,calc(env(safe-area-inset-right,0px) + 16px));bottom:calc(72px + env(safe-area-inset-bottom,0px));
  background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:15px 22px;font-weight:800;font-size:15.5px;box-shadow:0 8px 24px rgba(40,10,60,.3)}

/* sheet */
.scrim{position:fixed;inset:0;z-index:30;background:rgba(10,6,16,.5)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--bg);border-radius:20px 20px 0 0;max-height:94vh;overflow-y:auto;overscroll-behavior:contain;
  padding:18px var(--gut-r) calc(20px + env(safe-area-inset-bottom,0px)) var(--gut)}
@media (min-width:760px){.sheet{left:50%;right:auto;width:680px;transform:translateX(-50%);bottom:auto;top:4vh;border-radius:20px;max-height:92vh}}
.sheet .in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.sheet h2{font-size:22px}
.sh-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.x{background:var(--sunk);border:0;border-radius:999px;width:34px;height:34px;font-size:18px;line-height:1}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f > label,.lab{font-size:12.5px;font-weight:800;color:var(--muted)}
.f input,.f select,.f textarea{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:11px 12px;width:100%;min-width:0}
.f textarea{min-height:64px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pairform{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:12px}
.pairform .hd{display:flex;justify-content:space-between;align-items:center;font-weight:800}
.pairform .hd button{background:none;border:0;color:var(--bad);font-weight:700;font-size:13px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 12px;font-weight:700;font-size:14px;display:inline-flex;gap:7px;align-items:center}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.seg.sizes button{min-width:46px;justify-content:center;font-family:var(--num)}
.add-pair{background:none;border:1.5px dashed var(--line);border-radius:14px;padding:12px;font-weight:800;color:var(--accent)}
.toggles{display:flex;flex-direction:column;gap:6px}
.tog{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-weight:700;text-align:left}
.ck{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;flex:none}
.ck.on{background:var(--good);border-color:var(--good)}
.sumbar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;background:var(--sunk);border-radius:12px;padding:10px 12px;font-size:14px}
.sumbar b{font-family:var(--num)}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));background:var(--bg);padding:10px 0 4px}
.actions .right{display:flex;gap:8px;margin-left:auto}
.picklist{display:flex;flex-direction:column;gap:6px}
.pick{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;width:100%}
.pick.on{border-color:var(--accent);background:var(--accent-soft)}
.pick .t{flex:1;min-width:0;display:flex;flex-direction:column}
.pick .t b{font-size:14.5px;overflow-wrap:anywhere}
.pick .t span{font-size:12.5px;color:var(--muted)}
.grouphd{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.grouphd b{font-size:15px}
.grouphd button{background:none;border:0;color:var(--accent);font-weight:800;font-size:13px}
.edit-list{display:flex;flex-direction:column;gap:6px}
.edit-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.8fr) auto;gap:6px;align-items:center}
.edit-row input,.edit-row select{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px;min-width:0;width:100%}
@media(max-width:520px){.edit-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.edit-row .wide{grid-column:1/-1}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(140px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:999px;font-weight:700;font-size:14px;max-width:calc(100% - 32px);text-align:center}
.toast.err{background:var(--bad);color:#fff}
.login{min-height:100vh;display:grid;place-items:center;padding:24px var(--gut-r) 24px var(--gut)}
.login form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px}
.login h1{font-family:var(--display);font-weight:800;font-size:34px;margin:0;color:var(--accent)}
.loading{padding:60px 0;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .2s ease-out}@keyframes up{from{transform:translateY(24px)}}
  @media (min-width:760px){.sheet{animation:none}}}

/* ---- simpler UX layer ---- */
.mline{font-size:13.5px;color:var(--muted)}
.mline b{font-family:var(--num);font-weight:600;color:var(--fg)}
.mline b.pos{color:var(--good)} .mline b.neg{color:var(--bad)}
.steps{gap:3px}
.step{flex-direction:row;justify-content:center;gap:4px;padding:7px 2px;font-size:11px;border-radius:9px;background:var(--sunk);border-color:transparent}
.step .box{width:15px;height:15px;border-radius:5px;border-width:1.5px}
.step.on .box::after{width:7px;height:4px;border-width:2px}
@media(max-width:400px){.step{flex-direction:column;gap:3px}}
.card.mini{padding:11px 14px;cursor:pointer;gap:0}
.card.mini .name{font-size:15px}
.card.mini .num{font-weight:600}
.linkish{background:none;border:0;padding:4px 0;color:var(--accent);font-weight:700;font-size:14px;text-align:left}
.linkish u{text-underline-offset:3px}
.pairform{gap:10px}
.seg.big button{padding:11px 14px;font-size:15px}
.pricebox{display:flex;align-items:center;gap:8px;background:var(--sunk);border-radius:12px;padding:6px 6px 6px 14px}
.pricebox label{font-weight:800;font-size:14px;color:var(--muted);flex:1}
.pricebox .cur{font-family:var(--num);font-weight:600;font-size:20px;color:var(--muted)}
.pricebox input{width:110px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;font-family:var(--num);font-size:20px;font-weight:600;text-align:right}
.actions{align-items:center}
.sumline{font-size:13px;color:var(--muted);line-height:1.3}
.sumline b{font-family:var(--num);color:var(--fg)}
.sumline b.pos{color:var(--good)} .sumline b.neg{color:var(--bad)}
.actions .btn[data-act="save-order"]{padding:13px 22px;font-size:15px}
.toast{display:flex;align-items:center;gap:12px}
.toast button{background:none;border:0;color:var(--accent-soft);font-weight:800;font-size:14px;padding:2px 4px;text-decoration:underline;text-underline-offset:3px}
.toast.err button{color:#fff}
.toast{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;box-shadow:0 8px 24px rgba(20,8,30,.25)}
.top .in{flex-wrap:nowrap;align-items:flex-start}
.top a.link{flex:none;margin-top:4px}