/* ---------- Inter (bundled offline: latin + cyrillic, 400/500) ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-cyrillic-400-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-cyrillic-500-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-cyrillic-ext-500-normal.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-latin-ext-500-normal.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- theme ---------- */
:root{
  --bg:#191714; --card:#221f1b; --card2:#2b2823; --line:#37322c; --tx:#ece9e2; --mut:#a8a196;
  --clay:#cc7d5c; --claybg:#3a2b23; --grn:#8bb06a; --grnbg:#24301c; --gld:#d9a45b; --gldbg:#33291b;
  --cdx:#6fa6ad; --cdxbg:#213033; --danger:#e0736e; --dangerbg:#37211f; --on-clay:#20140f;
  --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.32);
}
[data-theme="light"]{
  --bg:#f4f1ea; --card:#ffffff; --card2:#efece4; --line:#e3ded3; --tx:#2a2620; --mut:#817b6f;
  --clay:#b5613f; --claybg:#f3e3da; --grn:#5f8a3f; --grnbg:#e9f1df; --gld:#a9781f; --gldbg:#f5ecd8;
  --cdx:#3d7d86; --cdxbg:#e0eceb; --danger:#c0483f; --dangerbg:#f7e3e0; --on-clay:#ffffff;
  --shadow:0 6px 20px rgba(30,25,20,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);
  color:var(--tx);line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
.hidden{display:none !important}
.app{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--bg);
  padding:0 0 calc(74px + env(safe-area-inset-bottom));position:relative}
.top{position:sticky;top:0;z-index:20;background:var(--bg);
  padding:calc(14px + env(safe-area-inset-top)) 18px 10px;display:flex;align-items:center;justify-content:space-between}
.top h1{font-size:21px;font-weight:500;margin:0;letter-spacing:-.3px}
.top .sub{font-size:12.5px;color:var(--mut);margin-top:1px}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;color:var(--tx);cursor:pointer}
.icon-btn:active{transform:scale(.94)}
.content{padding:6px 16px 20px;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px;margin-bottom:13px}
.card.tight{padding:11px 12px}
.row{display:flex;align-items:center;gap:11px}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.mut{color:var(--mut)}
.small{font-size:12.5px}.tiny{font-size:11.5px}.b{font-weight:500}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.center{text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spacer{height:6px}
/* buttons */
.btn{appearance:none;border:1px solid transparent;border-radius:12px;padding:12px 15px;font-size:14.5px;
  font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;font-family:inherit;transition:transform .06s;color:var(--tx);background:var(--card2)}
.btn:active{transform:scale(.97)}
.btn.clay{background:var(--clay);color:var(--on-clay)}
.btn.green{background:var(--grn);color:#0f1a0a}
.btn.gold{background:var(--gld);color:#20140f}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.danger{background:var(--dangerbg);color:var(--danger)}
.btn.sm{padding:8px 11px;font-size:13px;width:auto;border-radius:10px}
.btn.lg{padding:15px;font-size:15.5px}
/* inputs */
.field{margin-bottom:11px}
.field label{display:block;font-size:12.5px;color:var(--mut);margin-bottom:6px;font-weight:500}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--card2);color:var(--tx);font-size:16px;font-family:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--clay)}
.amount-input{font-size:30px;font-weight:500;text-align:center;letter-spacing:-.5px;padding:13px}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card2);
  font-size:13px;font-weight:500;cursor:pointer;color:var(--tx)}
.chip.on{background:var(--clay);color:var(--on-clay);border-color:var(--clay)}
.chip.add{border-style:dashed;color:var(--mut)}
.chip.mini{padding:2px 9px;font-size:11px;cursor:default}
/* segmented */
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:none;background:transparent;color:var(--mut);font-weight:500;font-size:13px;
  padding:8px 6px;border-radius:9px;cursor:pointer;font-family:inherit}
.seg button.on{background:var(--card2);color:var(--tx)}
/* timer */
.timer-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 0 4px}
.timer{font-size:48px;font-weight:500;letter-spacing:1px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";margin:2px 0}
.timer.run{color:var(--clay)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--clay)}
.pulse{animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--claybg);color:var(--clay);padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:500}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500}
/* list rows */
.item{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:none}
.badge{min-width:40px;height:40px;padding:0 8px;border-radius:11px;display:grid;place-items:center;font-weight:500;font-size:12.5px}
.badge.money{background:var(--grnbg);color:var(--grn)}
.badge.time{background:var(--gldbg);color:var(--gld)}
.daygroup{font-size:12px;color:var(--mut);font-weight:500;margin:14px 4px 4px;display:flex;justify-content:space-between}
.linkbtn{background:none;border:none;color:var(--mut);cursor:pointer;padding:6px;border-radius:8px;font-size:15px}
.empty{text-align:center;color:var(--mut);padding:28px 10px;font-size:14px}
.emoji-none{font-size:34px;margin-bottom:8px;opacity:.5}
/* bars */
.bar-row{margin:9px 0}
.bar-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.bar{height:8px;background:var(--card2);border-radius:99px;overflow:hidden}
.bar>span{display:block;height:100%;border-radius:99px}
/* nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);
  display:flex;max-width:480px;margin:0 auto;padding:7px 4px calc(7px + env(safe-area-inset-bottom))}
.nav button{flex:1;background:none;border:none;color:var(--mut);display:flex;flex-direction:column;align-items:center;
  gap:3px;font-size:10.5px;font-weight:500;cursor:pointer;padding:4px 0;font-family:inherit}
.nav button.on{color:var(--clay)}
.nav svg{width:22px;height:22px}
/* sheet */
.overlay{position:fixed;inset:0;background:rgba(8,7,6,.55);z-index:40;display:none;align-items:flex-end;justify-content:center}
.overlay.on{display:flex;animation:fade .15s}
.sheet{background:var(--card);width:100%;max-width:480px;border-radius:20px 20px 0 0;
  padding:10px 18px calc(20px + env(safe-area-inset-bottom));max-height:90dvh;overflow:auto;
  animation:up .22s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet .handle{width:38px;height:4px;border-radius:99px;background:var(--line);margin:6px auto 14px}
.sheet h3{margin:0 0 14px;font-size:18px;font-weight:500}
.hint{font-size:12px;color:var(--mut);margin-top:8px}
/* login */
.login{max-width:400px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:28px 26px calc(28px + env(safe-area-inset-bottom));gap:6px}
.login .brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.login .logo{width:52px;height:52px;border-radius:15px;background:var(--clay);display:grid;place-items:center;color:var(--on-clay)}
.login h1{font-size:26px;font-weight:500;margin:0;letter-spacing:-.4px}
.login p{color:var(--mut);font-size:14.5px;margin:2px 0 22px}
.gbtn-wrap{min-height:44px;margin-bottom:12px}
.divider{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:12px;margin:14px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);
  color:var(--tx);padding:11px 16px;border-radius:12px;box-shadow:var(--shadow);font-size:13.5px;z-index:60;max-width:90%;text-align:center}
