:root{
  --bg:#F1F1ED; --surface:#FFFFFF; --ink:#2B2F2A; --muted:#7C817A; --line:#E3E3DD;
  --pist:#A6C287; --pist-soft:#E7EFD9; --rose:#C4918E; --rose-soft:#F3E2E0;
  --grey:#A2A69F; --slab:#39412F; --slab-ink:#EEF3E4; --accent:#A9736F;
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#191C17; --surface:#232720; --ink:#E7EAE1; --muted:#969C91; --line:#333830;
    --pist:#9DBB7E; --pist-soft:#2B3524; --rose:#C08F8D; --rose-soft:#392B2A;
    --grey:#6C716A; --slab:#101309; --slab-ink:#E9EEDF; --accent:#C99A97;
  }
}
:root[data-theme="dark"]{
  --bg:#191C17; --surface:#232720; --ink:#E7EAE1; --muted:#969C91; --line:#333830;
  --pist:#9DBB7E; --pist-soft:#2B3524; --rose:#C08F8D; --rose-soft:#392B2A;
  --grey:#6C716A; --slab:#101309; --slab-ink:#E9EEDF; --accent:#C99A97;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15.5px;line-height:1.45;-webkit-text-size-adjust:100%}
.wrap{max-width:880px;margin:0 auto;padding:18px 16px 72px}
.brand{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.brand h1{font-family:"Literata",Georgia,serif;font-weight:600;font-size:20px;margin:0;letter-spacing:-.01em}
.brand .sub{color:var(--muted);font-size:12.5px}
.chip{font-size:12px;color:var(--muted);white-space:nowrap}
.chip.dirty{color:var(--accent)}

.slab{background:var(--slab);color:var(--slab-ink);border-radius:16px;padding:18px 18px 16px;margin-bottom:14px}
.slab .cap{font-size:12.5px;opacity:.7;margin-bottom:4px}
.slab .big{font-family:"Literata",Georgia,serif;font-size:clamp(30px,8vw,42px);line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.slab .cur{font-size:.5em;opacity:.6;margin-left:6px}
.bar{height:10px;border-radius:6px;background:rgba(255,255,255,.14);margin:14px 0 9px;overflow:hidden;display:flex}
.bar i{display:block;background:var(--pist);height:100%}
.bar u{display:block;background:var(--rose);height:100%}
.slab .legend{font-size:12.5px;opacity:.78;display:flex;flex-wrap:wrap;gap:3px 14px}
.slab .legend b{font-weight:400;border-bottom:2px solid var(--pist);padding-bottom:1px}
.slab .legend i{font-style:normal;border-bottom:2px solid var(--rose);padding-bottom:1px}

.tabs{display:flex;gap:2px;overflow-x:auto;margin:0 -16px 16px;padding:0 16px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font:inherit;font-size:14.5px;padding:7px 10px;cursor:pointer;border-radius:4px 4px 0 0}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:500}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;margin-bottom:16px}
.cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px}
.cell .k{font-size:12px;color:var(--muted);margin-bottom:2px}
.cell .v{font-family:"Literata",Georgia,serif;font-size:18px;font-variant-numeric:tabular-nums}
.cell.good{background:var(--pist-soft);border-color:transparent}
.cell.cost{background:var(--rose-soft);border-color:transparent}

h2{font-family:"Literata",Georgia,serif;font-size:16px;font-weight:600;margin:20px 0 8px}
h2:first-child{margin-top:0}
.note{color:var(--muted);font-size:12.5px;margin:6px 0 12px}
.two{display:grid;gap:14px}
@media(min-width:720px){.two{grid-template-columns:1fr 1fr;align-items:start}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.panel h3{font-family:"Literata",Georgia,serif;font-size:14.5px;font-weight:600;margin:0 0 8px}

table{width:100%;border-collapse:collapse;font-size:13.8px}
th,td{text-align:right;padding:7px 5px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500;font-size:11.8px}
th:first-child,td:first-child{text-align:left;padding-left:0}
td:last-child,th:last-child{padding-right:0}
td.num{font-variant-numeric:tabular-nums}
td.mine{color:var(--ink);font-weight:500}
tr.total td{font-weight:600;border-bottom:0;border-top:1.5px solid var(--ink)}
.scroll{overflow-x:auto;margin:0 -14px;padding:0 14px}
.sub2{color:var(--muted);font-size:12px;display:block;margin-top:1px}

.chart{display:flex;align-items:flex-end;gap:8px;height:110px;margin:4px 0 0}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-width:0}
.chart .stack{display:flex;flex-direction:column;justify-content:flex-end;height:92px}
.chart .fee{background:var(--rose);border-radius:4px 4px 0 0;opacity:.85}
.chart .net{background:var(--pist);border-radius:0 0 4px 4px}
.chart .lab{font-size:11px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.grp{border:1px solid var(--line);border-left:4px solid var(--tint,var(--grey));background:var(--surface);
  border-radius:var(--r);margin-bottom:7px;overflow:hidden}
.grp>summary{list-style:none;cursor:pointer;padding:10px 13px;display:flex;align-items:center;gap:9px}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary::before{content:"";width:7px;height:7px;border-right:1.7px solid var(--muted);
  border-bottom:1.7px solid var(--muted);transform:rotate(-45deg);flex:0 0 auto;margin-top:-2px}
.grp[open]>summary::before{transform:rotate(45deg);margin-top:2px}
.grp>summary:hover{background:var(--bg)}
.g-title{font-weight:500;font-size:14.5px}
.g-meta{margin-left:auto;text-align:right;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.g-body{padding:0 13px 8px}
.t0{--tint:var(--pist)} .t1{--tint:var(--rose)} .t2{--tint:var(--grey)} .t3{--tint:var(--slab)}

.rows{border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line);padding:10px 0;display:flex;gap:12px;align-items:flex-start}
.row .main{flex:1;min-width:0}
.row .when{font-size:12px;color:var(--muted);margin-bottom:1px}
.row .who{font-weight:500;font-size:14.5px}
.row .items{font-size:12.8px;color:var(--muted);margin-top:2px}
.row .money{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .money b{font-family:"Literata",Georgia,serif;font-weight:600;font-size:15.5px;display:block}
.row .money s{display:block;font-size:12px;color:var(--muted);text-decoration:none}
.qty{display:inline-block;margin-left:6px;background:var(--pist-soft);color:var(--ink);
  border-radius:20px;padding:1px 8px;font-size:12px;font-weight:500;vertical-align:1px;
  font-variant-numeric:tabular-nums}
.row.compact{padding:8px 0}
.row.compact .who{font-size:14px}
.acts{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.acts button{background:none;border:0;color:var(--muted);font:inherit;font-size:12.3px;padding:2px 7px;
  cursor:pointer;border-radius:7px}
.acts button:hover{color:var(--ink);background:var(--bg)}
.acts button.sell{color:var(--accent);font-weight:500;border:1px solid var(--rose);padding:3px 11px}
.acts button.sell:hover{background:var(--rose);color:#fff;border-color:var(--rose)}
.mhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:16px 0 2px}
.mhead h3{font-family:"Literata",Georgia,serif;font-size:15px;font-weight:600;margin:0}
.mhead span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

button.primary{background:var(--slab);color:var(--slab-ink);border:0;border-radius:10px;padding:10px 15px;
  font:inherit;font-size:14.5px;cursor:pointer}
button.primary:hover{opacity:.9}
button.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:9px 13px;font:inherit;font-size:14px;cursor:pointer}
button.link{background:none;border:0;color:var(--accent);font:inherit;font-size:13.5px;cursor:pointer;
  padding:4px 0;text-decoration:underline;text-underline-offset:3px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}

.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:16px;
  color:var(--muted);font-size:13.8px;margin-bottom:14px}
.empty b{display:block;color:var(--ink);font-weight:500;margin-bottom:3px}

details.codes{margin-top:14px}
details.codes>summary{cursor:pointer;color:var(--accent);font-size:13.8px;padding:6px 0;list-style:none}
details.codes>summary::-webkit-details-marker{display:none}

dialog{border:0;border-radius:16px;padding:0;background:var(--surface);color:var(--ink);
  width:min(560px,94vw);max-height:88vh}
dialog::backdrop{background:rgba(25,28,23,.5)}
.dlg{padding:18px}
.dlg h3{font-family:"Literata",Georgia,serif;font-size:17px;margin:0 0 13px}
.f{margin-bottom:11px}
.f label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.f input,.f select,.f textarea{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:10px;font:inherit;font-size:15px}
.f textarea{min-height:60px;resize:vertical}
.f2{display:flex;gap:10px}
.f2>*{flex:1;min-width:0}
.itemrow{border:1px solid var(--line);border-radius:11px;padding:10px;margin-bottom:8px;background:var(--bg)}
.itemrow .top{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.itemrow .top span{font-size:12.5px;color:var(--muted)}
.itemrow .top button{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;
  font:inherit;font-size:13px;padding:2px 6px}
.dlgbar{display:flex;gap:8px;justify-content:flex-end;margin-top:15px;flex-wrap:wrap}
.dlgbar .del{margin-right:auto;color:#A65D57;background:none;border:0;font:inherit;font-size:14px;cursor:pointer}
.err{color:#A65D57;font-size:13px;margin:-4px 0 10px;font-weight:500}
.hint{font-size:12.3px;color:var(--muted);margin-top:4px}
.foot{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:50;max-width:min(560px,92vw);
  background:var(--slab);color:var(--slab-ink);border-radius:13px;padding:12px 14px;font-size:13.8px;
  display:flex;align-items:center;gap:12px;box-shadow:0 8px 28px rgba(0,0,0,.26)}
.toast .txt{flex:1;min-width:0}
.toast button{background:none;border:0;color:inherit;font:inherit;font-size:13.8px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;opacity:.85;padding:2px 4px;white-space:nowrap}
.toast button:hover{opacity:1}

/* ================= перенос на сервер: правки под телефон ================= */

/* безопасные зоны iPhone — чтобы ничего не пряталось под вырезом и полосой */
.wrap{
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
.tabs{
  margin-left:calc(-16px - env(safe-area-inset-left));
  margin-right:calc(-16px - env(safe-area-inset-right));
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
}
.toast{bottom:calc(16px + env(safe-area-inset-bottom))}

/* длинная форма продажи должна прокручиваться внутри окна */
dialog{overflow:auto;overscroll-behavior:contain}

@media (max-width:720px){
  /* 16px — ниже этого Safari сам зумит страницу при вводе */
  .f input,.f select,.f textarea{font-size:16px}
  /* пальцем по мелким ссылкам не попасть */
  .acts button{padding:6px 10px;font-size:13px}
  .tabs button{padding:9px 12px}
}