/* Shams Mini App — Apple gallery palette (obsidian stage, porcelain type, one Apple Blue action
   colour, candy category tags kept as the product's own signal). Elevation is a 1px keyline, never a
   shadow: layers separate by surface shift and 28px geometry. docs/style-midnight-canvas.css holds
   the previous midnight-canvas design if this is ever put back. */
@font-face {
  font-family: 'SystemEmoji';
  src: local('Apple Color Emoji'),
       local('Noto Color Emoji'),
       local('Samsung Color Emoji'),
       local('Android Emoji'),
       local('Segoe UI Emoji');
  unicode-range: U+1F1E6-1F1FF, U+1F300-1FAD6, U+2600-27BF;
}
:root{
  --canvas:#000000;--surface:#0e0e0e;--surface-2:#1d1d1f;--surface-3:#333336;
  --text:#f5f5f7;--fog:#a1a1a6;--mist:#86868b;--line:#333336;--hairline:rgba(255,255,255,.1);
  --accent:#0071e3;--accent-soft:rgba(0,113,227,.16);--link:#2997ff;--green:#30d158;--red:#ff453a;
  --tag-coral:#ff4433;--tag-lime:#00cc4b;--tag-tangerine:#ff8833;--tag-hot-pink:#ff33aa;--tag-violet:#9019e6;
  --tag-sunflower:#ffcc02;--tag-sky:#00acfe;--tag-ember:#ea687c;--tag-olive:#94ae43;--tag-slate:#5c6f8a;
  --radius-card:28px;--radius-btn:14px;--radius-tag:20px;--radius-lg:28px;--radius-pill:9999px;
  --shadow-card:none;
  --shadow-pressed:none;
  --shadow-glow:none;
  --shadow-tag:none;
  /* Apple's own emoji come first: on iPhone and Mac they draw every flag, and Google serves those
     devices a 5 MB bitmap Noto that WebKit cannot paint, so letting Noto win there left the flags
     blank. Where Apple's font does not exist, Noto takes over — only for the flags it was subsetted
     with, because Windows' Segoe UI Emoji draws «US» and «GB» as letters. Everything else (the
     category icons) still comes from the system font behind it. */
  --font-emoji:"Apple Color Emoji","Noto Color Emoji","SystemEmoji","Samsung Color Emoji","Segoe UI Emoji","Android Emoji",sans-serif;
  --font-display:"Manrope",var(--font-emoji),ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Manrope",var(--font-emoji),ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --w-thin:400;--w-body:400;--w-label:600;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--canvas)}
body{margin:0;min-height:100vh;background:var(--canvas);color:var(--text);font-family:var(--font-body);font-weight:var(--w-thin);font-size:15px;line-height:1.4;letter-spacing:-.01em;font-variant-emoji:emoji;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{opacity:.4;cursor:not-allowed}
a{color:inherit;text-decoration:none}
input,select,textarea{outline:none}
#app{min-height:100vh}
b,strong{font-weight:var(--w-label)}

/* Frame */
.shell{width:min(100%,480px);min-height:100vh;margin:auto;background:var(--canvas);display:flex;flex-direction:column;position:relative;padding-top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))}
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex:none}
.topbar-title{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar button{color:var(--text);min-width:36px;min-height:36px;display:inline-grid;place-items:center;border-radius:12px;padding:0 6px}
.topbar .back{font-size:28px;line-height:1;margin-left:-10px;color:var(--fog)}
.topbar .info{width:28px;height:28px;min-width:28px;min-height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.35);font-size:12px;color:var(--fog);font-weight:var(--w-body)}
.topbar .text-btn{color:var(--link);font-weight:var(--w-body)}
.content{flex:1;overflow:auto;padding:12px 16px 100px;-webkit-overflow-scrolling:touch}
.content::-webkit-scrollbar{width:0;height:0}
.content.has-action{padding-bottom:176px}
.shell.home-screen .topbar{display:none}
[hidden]{display:none!important}

/* Bottom navigation */
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);height:72px;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--hairline);box-shadow:var(--shadow-glow);padding-bottom:max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px));z-index:10}
.tab{color:var(--mist);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:var(--w-body);letter-spacing:0;border-radius:0}
.tab .ico{width:22px;height:22px;display:grid;place-items:center;line-height:1}
.tab .ico svg{width:22px;height:22px}
.tab.active{color:var(--accent)}

/* Surfaces */
.card{background:var(--surface);border-radius:var(--radius-card);border:1px solid var(--line);box-shadow:var(--shadow-card);overflow:hidden}
.card+.card{margin-top:12px}
.section-label,.eyebrow{display:block;font-size:11px;font-weight:var(--w-label);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin:26px 4px 10px;line-height:1}
.section-label.hrow{display:flex}
.section-label .text-btn{font-size:11px;letter-spacing:.06em;text-transform:none;padding:0}
.eyebrow{margin:0 0 8px;color:var(--accent)}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--mist)}.tiny{font-size:11px}.center{text-align:center}
.row{min-height:54px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hairline);color:var(--text);width:100%;text-align:left;font-size:15px;font-weight:var(--w-thin);border-radius:0}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.row small,.subtle{color:var(--mist);font-size:12px;font-weight:var(--w-body)}
.row .end{margin-left:auto;color:var(--fog);white-space:nowrap;font-size:14px;font-weight:var(--w-body);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right}
.row .arrow{color:var(--mist);margin-left:2px;font-size:18px}
.row .emoji,.cat-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--surface-2);font-size:17px;box-shadow:var(--shadow-pressed);font-family:var(--font-emoji);letter-spacing:0;font-variant-emoji:emoji}

/* Candy tags and chips */
.chip{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--tag,var(--tag-slate));color:var(--tag-text,#fff);font-size:17px;line-height:1;box-shadow:var(--shadow-tag);font-family:var(--font-emoji);letter-spacing:0;font-variant-emoji:emoji}
.chip-lg{width:72px;height:72px;border-radius:22px;font-size:34px;margin:0 auto}
.tag{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-tag);background:var(--tag,var(--tag-slate));color:var(--tag-text,#fff);font-size:11px;font-weight:var(--w-body);letter-spacing:.05em;text-transform:uppercase;line-height:1.2;white-space:nowrap;transform:translate(var(--ox,0px),var(--oy,0px)) rotate(var(--rot,0deg));box-shadow:var(--shadow-tag)}
.tag small{font-size:10px;font-weight:var(--w-label);letter-spacing:0;text-transform:none;opacity:.9;padding-left:2px}
.tag-icon{font-size:13px;line-height:1}
.tag-label{overflow:hidden;text-overflow:ellipsis;max-width:190px}
.tag.ghost{background:transparent;color:var(--fog);border:1px solid rgba(255,255,255,.28);box-shadow:none}
.tag-cloud{display:flex;flex-wrap:wrap;gap:14px 10px;padding:14px 8px 8px;justify-content:flex-start;overflow:visible}
.tag-cloud.piled{display:block;position:relative;padding:0}
.tag-cloud.piled .tag{position:absolute;left:0;top:0;transform-origin:50% 50%}
@keyframes tag-drop{
  0%{opacity:0;transform:translate(calc(var(--ox,0px) + var(--dx,0px)),calc(var(--oy,0px) + var(--dy,-80px))) scale(.86) rotate(var(--rot0,0deg))}
  30%{opacity:1}
  100%{opacity:1;transform:translate(var(--ox,0px),var(--oy,0px)) scale(1) rotate(var(--rot,0deg))}
}
.tag-cloud.drop .tag{animation:tag-drop var(--dur,2.2s) cubic-bezier(.16,.84,.28,1) var(--delay,0s) backwards}
@media (prefers-reduced-motion:reduce){.tag-cloud.drop .tag{animation:none}}
/* A mechanical counter: each digit is a reel of numerals, turned upwards by the script as the figure counts. */
.odo{display:inline-flex;font-variant-numeric:tabular-nums;line-height:1.15em;height:1.15em;vertical-align:bottom;overflow:hidden}
.odo-char,.odo-digit{display:inline-block;height:1.15em;white-space:pre}
.odo-digit{overflow:hidden}
.odo-reel{display:flex;flex-direction:column;will-change:transform}
.odo-reel>span{display:block;height:1.15em;text-align:center}
.swatches{display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px 16px}
.swatch{width:30px;height:30px;border-radius:50%;background:var(--tag);border:2px solid transparent;box-shadow:var(--shadow-tag)}
.swatch.selected{border-color:#fff}

/* Home hero */
.hero{padding:6px 4px 4px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.account-pill{border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-pill);background:transparent;color:var(--text);padding:8px 14px;font-size:13px;font-weight:var(--w-body);letter-spacing:0;margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0}
/* The rate ticker sits beside the account pill and rolls one line at a time. The window is exactly
   one item tall, so only the current rate is ever visible and the rest scroll up through it.
   Its width is the widest rate it carries, never a fixed number: every line is then that same width,
   so the flag sits at one left edge and the price ends at one right edge whatever is showing — and
   a long figure like «11 760 / 11 860» is not cut off. The account pill beside it gives way first. */
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;align-self:stretch}
.rate-ticker{border:1px solid var(--hairline);border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text);
  padding:0 12px;height:34px;margin-bottom:12px;overflow:hidden;display:block;flex:0 0 auto;box-sizing:border-box;text-align:left;cursor:pointer}
.rate-strip{display:block;width:100%;will-change:transform}
.rate-item{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;height:34px;font-size:12px;
  font-weight:var(--w-body);color:var(--fog);white-space:nowrap}
.rate-currency{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.rate-currency i,.rate-name i,.flag,i.flag,span.flag{
  font-family:var(--font-emoji)!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:0!important;
  font-variant-emoji:emoji!important;
  -webkit-font-feature-settings:"liga" 1;
  font-feature-settings:"liga" 1;
  text-rendering:optimizeLegibility;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
}
.rate-currency i{font-size:14px;width:18px;height:18px;flex-shrink:0}
.rate-currency span{color:var(--fog);font-weight:var(--w-body)}
.rate-item b,.rate-val{color:var(--text);font-weight:var(--w-strong);font-variant-numeric:tabular-nums;text-align:right;margin-left:auto}
.rate-table{padding:4px 0}
.rate-head{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:10px 16px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.rate-head span:not(:first-child),.rate-row b{min-width:76px;text-align:right}
.rate-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:11px 16px;border-top:1px solid var(--hairline)}
.rate-row b{font-weight:var(--w-strong);font-variant-numeric:tabular-nums}
.rate-name{display:flex;align-items:center;gap:8px;font-weight:var(--w-body)}
.rate-name i{font-size:18px;width:22px;height:22px;flex-shrink:0}
.rate-name small{color:var(--mist);font-size:11px}
/* A currency opens downwards: the two banks worth knowing about first, then the full comparison. */
.rate-row{width:100%;background:none;color:var(--text);text-align:left;cursor:pointer}
.rate-row.open{background:var(--surface-2)}
.rate-compare{padding:4px 16px 16px;background:var(--surface-2);border-top:1px solid var(--hairline)}
.rate-best{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-btn);margin-top:8px;background:var(--surface)}
.rate-best small{display:block;color:var(--mist);font-size:11px;letter-spacing:.02em}
.rate-best b{font-weight:var(--w-strong)}
.rate-best-value{font-variant-numeric:tabular-nums;font-weight:var(--w-strong)}
.rate-best.buy-here .rate-best-value{color:var(--green)}
.rate-best.sell-here .rate-best-value{color:var(--accent)}
.rate-compare-head,.rate-compare-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:7px 12px}
.rate-compare-head{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mist);margin-top:10px}
.rate-compare-head span:not(:first-child),.rate-compare-row b{min-width:64px;text-align:right}
.rate-compare-row{font-size:13px;color:var(--fog)}
.rate-compare-row b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:var(--w-body)}
@media (prefers-reduced-motion:reduce){.rate-strip{transition:none!important}}
.balance{font-family:var(--font-display);font-weight:600;font-size:42px;line-height:.95;letter-spacing:-.02em;overflow-wrap:anywhere}
.hero .tag-cloud{align-self:stretch;margin-top:10px}
.dash-top{display:flex;align-items:center;justify-content:space-between;margin:0 2px 14px}
.chart-card{padding:24px;display:flex;flex-direction:column;min-height:228px;margin-top:20px}
.chart-caption{font-size:12px;color:var(--mist);font-weight:var(--w-body);letter-spacing:.02em}
.chart-total{font-family:var(--font-display);font-weight:600;font-size:28px;letter-spacing:-.02em;margin:8px 0 6px}
.chart-legend{font-size:11px;color:var(--mist);display:flex;gap:16px;font-weight:var(--w-body)}
.chart-legend span:before{content:"";display:inline-block;width:14px;height:2px;background:var(--accent);vertical-align:middle;margin-right:6px}
.chart-legend span+span:before{background:var(--mist);opacity:.55}
.chart-svg{margin:auto 0 4px;width:100%;height:100px}
.agent-card{margin-top:16px;padding:18px 20px;display:flex;align-items:center;gap:14px;width:100%;color:var(--text);text-align:left;background:var(--surface-2);box-shadow:var(--shadow-glow);border-color:rgba(28,108,255,.25)}
.agent-card .grow{flex:1;font-size:15px}
.agent-card .emoji{background:var(--accent);color:#fff;border-radius:14px;width:40px;height:40px;display:grid;place-items:center;font-size:18px;box-shadow:var(--shadow-tag)}
.badge{display:inline-block;border:1px solid var(--accent);color:var(--accent);font-size:9px;font-weight:var(--w-label);letter-spacing:.14em;border-radius:var(--radius-pill);padding:3px 8px;line-height:1;text-transform:uppercase;vertical-align:middle}
.hint{color:var(--mist);font-size:12px;text-align:center;margin:12px 4px 4px;line-height:1.5;font-weight:var(--w-body)}
.note{font-size:12px;color:var(--mist);line-height:1.5;margin:10px 4px 12px;font-weight:var(--w-body)}
.preview{padding:20px;color:var(--fog);font-size:14px;line-height:1.6}
.preview button{margin-top:14px;width:auto}
.stats-link{display:block;text-align:center;color:var(--text);font-size:14px;margin:24px auto 8px;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-pill);padding:10px 20px;font-weight:var(--w-body)}

/* Buttons */
.primary{border-radius:var(--radius-btn);background:var(--accent);color:#fff;font-weight:var(--w-body);font-size:15px;min-height:48px;padding:12px 20px;width:100%;letter-spacing:-.01em;transition:box-shadow .15s}
.primary:active{background:#0077ed}
.secondary{border:1px solid rgba(255,255,255,.5);border-radius:var(--radius-btn);background:transparent;color:var(--text);font-weight:var(--w-body);min-height:44px;padding:10px 16px}
.secondary:active{background:rgba(255,255,255,.06)}
.secondary.danger{border-color:rgba(255,68,51,.6);color:var(--red)}
.text-btn{color:var(--link);padding:6px;font-weight:var(--w-body)}
.danger{color:var(--red)}
.fixed-action{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);width:min(100%,480px);background:var(--canvas);padding:14px 16px 14px;z-index:5}
.actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.actions>*{flex:1 1 140px}
.segmented{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px;gap:4px}
.segmented button{color:var(--mist);min-height:36px;flex:1;border-radius:var(--radius-pill);padding:6px 10px;font-size:13px;font-weight:var(--w-body);letter-spacing:0;font-variant-emoji:emoji}
.segmented button.active{background:var(--accent);color:#fff}

/* Entries */
.entry-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--hairline);color:var(--text);width:100%;text-align:left;border-radius:0;line-height:1.25}
.entry-row:last-child{border-bottom:0}
.entry-row .grow{flex:1;min-width:0}
.entry-row .chip{width:32px;height:32px;border-radius:10px;font-size:15px}
.entry-row b{font-weight:var(--w-body);font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-row small{display:block;font-weight:var(--w-body);font-size:11px;margin-top:1px}
.entry-row .amount{font-family:var(--font-display);font-weight:500;font-size:14px;white-space:nowrap;letter-spacing:-.01em}
.entry-row .income{color:var(--green)}
.group-head{display:flex;justify-content:space-between;color:var(--mist);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--w-label);padding:11px 14px 5px}
.group-head span+span{font-family:var(--font-display);letter-spacing:0;text-transform:none;font-size:12px;color:var(--fog)}
.empty{text-align:center;padding:40px 24px;color:var(--mist);line-height:1.5;font-weight:var(--w-body)}
.empty strong{display:block;color:var(--text);font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em;margin-bottom:6px}
.empty .primary{margin-top:14px;width:auto}

/* Forms */
.form-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;margin-top:14px}
.form-row{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 16px;border-bottom:1px solid var(--hairline)}
.form-row:last-child{border-bottom:0}
.form-row label{flex:none;color:var(--fog);font-size:14px;font-weight:var(--w-body)}
.form-row input,.form-row select,.form-row textarea{border:0;background:transparent;color:var(--text);text-align:right;width:100%;min-width:0;padding:14px 0;font-weight:var(--w-body);font-size:15px}
.form-row select{text-align-last:right;appearance:none;-webkit-appearance:none;padding-right:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999ca1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center/14px no-repeat}
.form-row select option{background:var(--surface);color:var(--text)}
.form-row input::placeholder{color:var(--mist)}
.form-row textarea{text-align:left;resize:vertical;line-height:1.5}
.form-row input[type=color]{width:42px;height:30px;padding:0;border-radius:10px;overflow:hidden;background:none;flex:none;margin-left:auto}
.form-row input[type=date]{color-scheme:dark}
.form-row .right{flex:1;text-align:right;color:var(--fog)}
.form-row.clickable{cursor:pointer}
.form-row .star{color:var(--accent)}

/* A choice row opens the app's own option sheet: the OS select popup is not part of this design. */
.form-row.choice{width:100%;text-align:left;cursor:pointer;background:none;appearance:none;-webkit-appearance:none}
.form-row.choice .right{flex:1;min-width:0;color:var(--text);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-row.choice .arrow{flex:none;color:var(--mist);font-size:18px;margin-left:2px}
.form-row.choice:active{background:rgba(255,255,255,.04)}
.form-row.block{display:block;padding-top:12px;padding-bottom:2px}
.form-row.block>label{display:block;margin-bottom:2px}
.form-row .swatches{padding:10px 0 12px}
/* Options sit inside a card, so they keep the padding the sheet's own paragraphs give up. */
.sheet .row.option{min-height:42px;padding:8px 16px;font-size:14px}
.sheet .row.option{border-bottom:1px solid var(--hairline)}
.sheet .row.option:last-child{border-bottom:0}
.sheet .row.option.selected{color:var(--accent)}
.sheet .row .check{color:var(--accent);margin-left:auto;font-weight:var(--w-label)}

/* Shortcut page: the key is read and copied, the steps are numbered in the order they are done. */
.key-card{padding:14px 16px}
.key-row{display:flex;align-items:center;gap:12px}
.key-row code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;word-break:break-all;color:var(--text)}
.key-row .text-btn{flex:none;white-space:nowrap;padding:4px 0}
.key-note{margin:10px 0 0;color:var(--mist);font-size:12px;font-weight:var(--w-body);line-height:1.5}
.key-card .secondary{width:100%;margin-top:12px}
.row.step{align-items:center;font-size:14px}
.step-no{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:var(--w-label)}
.row.launch{align-items:center}
.row.launch .grow small{display:block;color:var(--mist);font-size:12px;line-height:1.45;margin-top:3px;font-weight:var(--w-body)}
.play{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:10px;padding-left:2px;box-shadow:var(--shadow-pressed)}
.play:active{opacity:.75}
.phone-frame{display:grid;place-items:center;padding:8px 0 4px}
.phone-frame video{max-height:58vh;max-width:100%;border-radius:20px;background:#000;box-shadow:var(--shadow-card)}
/* Spin buttons are the browser's own control and do not belong on these fields. */
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.list-label{font-size:11px;color:var(--mist);margin:8px 4px}

/* Statistics */
.stats-summary{display:flex;align-items:center;justify-content:center;gap:28px;padding:26px 24px;margin-top:14px}
.donut{width:124px;height:124px;border-radius:50%;position:relative;flex:none;background:conic-gradient(var(--surface-3) 0 100%);box-shadow:var(--shadow-tag)}
.donut:after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-pressed)}
.stat-total{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-.02em;overflow-wrap:anywhere}

/* Subscription */
.plan-card{padding:20px;display:flex;align-items:center;gap:14px;margin-top:12px}
.plan-icon{background:var(--accent);color:#fff;border-radius:14px;width:44px;height:44px;display:grid;place-items:center;font-size:20px;flex:none;box-shadow:var(--shadow-tag)}
.plan-card strong{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.02em}
.plan-card .emoji{font-size:26px}
.feature-row{font-size:14px}
.feature-row .check{color:var(--accent);font-weight:var(--w-label)}
.feature-row.locked{color:var(--mist)}
.feature-row .lock{color:var(--mist)}
.price-card{margin:8px 0;border:1px solid rgba(17,38,59,.6);border-radius:var(--radius-btn);background:var(--surface);color:var(--text);padding:14px;width:100%;text-align:left;box-shadow:var(--shadow-card)}
.price-card.selected{border-color:var(--accent)}
.price-card .price{font-family:var(--font-display);font-size:18px;font-weight:600}

/* Settings */
.switch{width:46px;height:26px;border-radius:var(--radius-pill);background:var(--surface-3);position:relative;flex:none;box-shadow:var(--shadow-pressed);transition:background .15s}
.switch:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.15s}
.switch.on{background:var(--accent)}
.switch.on:after{left:23px}
.pill-note{color:var(--mist);font-size:12px;line-height:1.5;margin:10px 4px 12px}
.settings-row .end{font-size:13px}
.color-dot{width:20px;height:20px;border-radius:50%;background:var(--accent)}
.color-grid{display:flex;gap:10px;flex-wrap:wrap}
.color-grid button{width:32px;height:32px;border-radius:50%;border:2px solid transparent}
.color-grid button.selected{border-color:#fff}
.currency-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.currency-grid button{background:var(--surface);color:var(--text);padding:10px;border-radius:12px;border:1px solid var(--hairline)}
.currency-grid button.selected{border-color:var(--accent)}

/* Receipt itemization */
.receipt-preview{border-bottom:1px solid var(--hairline);padding:0 14px 6px}
.receipt-preview summary{color:var(--link);cursor:pointer;font-size:11px;padding:6px 0;list-style:none;font-weight:var(--w-body);letter-spacing:.04em}
.receipt-preview summary::-webkit-details-marker{display:none}
.receipt-preview summary:after{content:'⌄';float:right}
.receipt-preview[open] summary:after{content:'⌃'}
.receipt-lines{padding:0 0 4px}
.receipt-line{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;border-top:1px solid var(--hairline);font-size:13px}
.receipt-line-name{min-width:0;overflow-wrap:anywhere}
.receipt-line-name small{display:block;color:var(--mist);font-size:11px;margin-top:3px;font-weight:var(--w-body)}
.receipt-line b{white-space:nowrap;font-size:12px;font-family:var(--font-display);font-weight:500}
.receipt-detail{padding:0 16px;margin-bottom:14px}
.receipt-detail .receipt-line:first-child{border-top:0}

/* Receipt lines, editable: the rows Gemini read off the photo, corrected in place. */
.receipt-edit{padding:2px 16px 14px}
.receipt-edit-row{border-top:1px solid var(--hairline);padding:12px 0}
.receipt-edit-row:first-child{border-top:0}
.receipt-edit-head{display:flex;align-items:center;gap:8px}
.receipt-edit-head input{flex:1;min-width:0}
.receipt-edit-head .text-btn{flex:none;font-size:14px;line-height:1}
.receipt-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px}
.receipt-edit-grid label{display:flex;flex-direction:column;gap:4px;min-width:0}
.receipt-edit-grid label span{color:var(--mist);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--w-label)}
.receipt-edit input{width:100%;min-width:0;background:var(--surface-2);border:0;border-radius:12px;color:var(--text);font-size:14px;font-weight:var(--w-body);padding:10px 12px;box-shadow:var(--shadow-glow)}
.receipt-edit input::placeholder{color:var(--mist)}
.receipt-edit input:focus{box-shadow:var(--shadow-glow),0 0 0 1px var(--accent) inset}

/* Toast, sheets, loading */
#toast{position:fixed;bottom:92px;left:50%;transform:translate(-50%,12px);background:var(--surface-3);color:#fff;border:1px solid rgba(28,108,255,.45);padding:12px 18px;border-radius:var(--radius-btn);opacity:0;transition:.25s;z-index:100;max-width:90%;text-align:center;pointer-events:none;box-shadow:var(--shadow-glow);font-size:14px;font-weight:var(--w-body)}
.toast-show{opacity:1!important;transform:translate(-50%,0)!important}
.overlay{position:fixed;inset:0;background:rgba(0,8,20,.74);display:flex;align-items:flex-end;justify-content:center;z-index:30}
.sheet{width:min(100%,480px);background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));max-height:76vh;overflow:auto;box-shadow:var(--shadow-card);border-top:1px solid var(--hairline)}
.sheet h3{margin:0 0 12px;font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.02em}
.sheet p{font-weight:var(--w-body)}
.sheet .row{padding-left:0;padding-right:0}
.sheet .form-row input{text-align:left}
.sheet .actions{display:flex;gap:8px;margin-top:20px}
.sheet .actions>*{flex:1}
.loading{padding:80px 20px;text-align:center;color:var(--mist);font-weight:var(--w-body)}

/* Light variant: same structure, paper surfaces, tags become outlined so candy fills never sit on white. */
body.light{--canvas:#f5f5f7;--surface:#ffffff;--surface-2:#f5f5f7;--surface-3:#e8e8ed;--text:#1d1d1f;--fog:#515154;--mist:#86868b;--line:#d2d2d7;--hairline:rgba(0,0,0,.1);
  --link:#0066cc;--shadow-card:none;--shadow-pressed:none;--shadow-glow:none;--shadow-tag:none;color-scheme:light}
body.light .tag.ghost{color:var(--mist);border-color:var(--line)}
body.light .secondary,body.light .account-pill,body.light .stats-link{border-color:rgba(11,18,32,.28)}
body.light .topbar .info{border-color:rgba(11,18,32,.3)}
body.light .swatch.selected{border-color:var(--text)}
body.light .form-row input[type=date]{color-scheme:light}
body.light .form-row input[type=date]{color-scheme:light}
body.light .agent-card{border-color:rgba(28,108,255,.3)}
body.light .switch:after{box-shadow:0 1px 2px rgba(11,18,32,.2)}

@media(min-width:600px){
  body{background:#000}
  .shell{min-height:100vh;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  body.light{background:#e6eaf2}
}

/* Super admin dashboard */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.stat-tile{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-card);padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-label{font-size:12px;color:var(--mist);font-weight:var(--w-body)}
.stat-value{font-family:var(--font-display);font-weight:600;font-size:28px;letter-spacing:-.02em;line-height:1.1}
.stat-sub{font-size:11px;color:var(--fog);font-weight:var(--w-body);overflow:hidden;text-overflow:ellipsis}
.plan-bar{display:flex;gap:3px;height:10px;margin:16px;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-2)}
.plan-bar span{min-width:3px}
.plan-bar .seg-pro{background:var(--accent)}
.plan-bar .seg-trial{background:var(--link);opacity:.55}
.plan-bar .seg-free{background:var(--surface-3)}
.plan-bar .seg-expired{background:var(--mist);opacity:.5}
.admin-chart{min-height:0}
.admin-bars{width:100%;height:110px;margin-top:10px}
.admin-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--mist);margin-top:4px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.filter-chip{border:1px solid var(--line);background:var(--surface-2);color:var(--fog);border-radius:var(--radius-pill);padding:7px 12px;font-size:13px;font-weight:var(--w-body);min-height:34px}
.filter-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.plan-badge{flex:none;font-size:11px;font-weight:var(--w-label);letter-spacing:.04em;border-radius:var(--radius-pill);padding:4px 9px;border:1px solid var(--line);color:var(--fog);margin-left:auto}
.plan-badge.plan-pro,.plan-badge.plan-admin{background:var(--accent);border-color:var(--accent);color:#fff}
.plan-badge.plan-trial{border-color:var(--link);color:var(--link)}
.plan-badge.plan-expired{color:var(--mist)}
body.light .filter-chip{border-color:rgba(11,18,32,.18)}
.actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.actions-row .secondary{width:100%;min-height:44px;font-size:14px;padding:10px 12px}
.gemini-card.low .chart-total{color:var(--red)}
.gemini-warning{color:var(--red);font-size:12px;font-weight:var(--w-label);margin-top:6px}
.gemini-spent{font-size:13px;color:var(--text);font-weight:var(--w-body);margin-top:6px}
.gemini-spent+.gemini-spent{margin-top:2px;color:var(--fog)}
.gemini-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.period-select{appearance:none;-webkit-appearance:none;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1a6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--text);font:inherit;font-size:13px;font-weight:var(--w-body);padding:6px 28px 6px 12px;min-height:32px;flex:none}
.period-select option{background:var(--surface);color:var(--text)}

/* Plans and referrals */
.plan-row{min-height:66px}
.plan-row b{font-weight:var(--w-label)}
.plan-row .end b{color:var(--text);font-size:16px}
.plan-row.selected{background:var(--accent-soft)}
.plan-hit{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-size:11px;font-weight:var(--w-label);vertical-align:2px}
.plan-save{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--link);font-size:11px;font-weight:var(--w-label)}
.radio{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--mist);margin-left:6px;position:relative}
.radio.on{border-color:var(--accent)}
.radio.on:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.link-card{padding:14px 16px}
.link-text{font-size:13px;color:var(--link);word-break:break-all;font-weight:var(--w-body)}
.method-row{min-height:58px}
.method-row.selected{background:var(--accent-soft)}
.soon-badge{flex:none;font-size:11px;font-weight:var(--w-label);color:var(--mist);border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px 9px}
.plan-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.plan-price small{font-size:11px;color:var(--mist);font-weight:var(--w-body)}
.legal-heading{font-family:var(--font-display);font-size:15px;font-weight:600;margin:22px 4px 8px;letter-spacing:-.01em}
.legal-card{padding:14px 16px}
.legal-card p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--fog);font-weight:var(--w-body)}
.legal-card p:last-child{margin-bottom:0}
mark.placeholder{background:rgba(255,204,2,.18);color:var(--text);border-radius:4px;padding:0 3px}

/* Payment method line and list */
.method-icon{flex:none;width:24px;height:24px;display:grid;place-items:center;color:var(--accent)}
.method-icon svg{width:22px;height:22px}
.sheet .method-option{min-height:52px;gap:12px}
.sheet .method-option.selected{color:var(--text)}

/* Tags open their category chart */
.tag[data-action]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.tag[data-action]:active{filter:brightness(1.12)}
.budget-bar{display:block;background:var(--surface-3);height:3px;margin-top:6px;border-radius:3px;overflow:hidden}
.budget-bar>span{display:block;height:3px;background:var(--tag,var(--accent))}

/* Spending by category, as a ring */
.donut-card{padding:20px 20px 12px;margin-top:12px;display:flex;flex-direction:column;gap:12px}
.donut-body{display:flex;align-items:center;gap:18px}
.donut{position:relative;flex:none;width:128px;height:128px}
.donut svg{width:100%;height:100%;display:block}
.donut-center{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.15}
.donut-center b{font-size:17px;font-weight:var(--w-title,600);color:var(--text)}
.donut-center small{font-size:11px;color:var(--mist)}
.donut-legend{flex:1;min-width:0;display:flex;flex-direction:column}
.donut-row{display:flex;align-items:center;gap:8px;width:100%;padding:7px 0;background:none;border:0;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.donut-row[disabled]{cursor:default;opacity:1}
.donut-row:active:not([disabled]){opacity:.7}
.donut-dot{flex:none;width:9px;height:9px;border-radius:50%}
.donut-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-share{flex:none;color:var(--mist);font-variant-numeric:tabular-nums}
@media (max-width:340px){.donut-body{flex-direction:column;align-items:stretch}.donut{align-self:center}}

/* Agent guide */
.agent-sheet{display:flex;flex-direction:column;gap:14px;max-height:88vh}
.ag-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);font-weight:var(--w-label)}
.ag-close{background:none;border:0;color:var(--mist);font-size:16px;padding:4px;cursor:pointer}
.ag-chat{background:var(--surface-2,var(--surface-3));border-radius:var(--radius,14px);padding:16px 14px;display:flex;flex-direction:column;gap:10px;min-height:190px;justify-content:center}
.ag-who{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:var(--w-label);color:var(--text)}
.ag-avatar{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.ag-msg{max-width:84%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.4}
.ag-msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.ag-msg.bot{align-self:flex-start;background:var(--surface-3);color:var(--text);border-bottom-left-radius:4px}
.ag-gap{align-self:center;font-size:10px;color:var(--mist)}
.ag-table{background:var(--surface-3);border-radius:10px;overflow:hidden;font-size:12px}
.ag-table>div{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;color:var(--mist)}
.ag-table>div+div{border-top:1px solid var(--hairline,var(--line))}
.ag-table>div b{color:var(--text);font-variant-numeric:tabular-nums}
.ag-table>div.hot span{color:var(--text)}
.ag-table>div.hot b{color:var(--accent)}
.ag-text{text-align:center}
.ag-text h3{margin:0 0 6px}
.ag-text p{margin:0;font-size:13px;line-height:1.5}
.ag-dots{display:flex;justify-content:center;gap:5px}
.ag-dots span{width:6px;height:6px;border-radius:3px;background:var(--surface-3);transition:width .2s}
.ag-dots span.on{width:18px;background:var(--accent)}
.ag-nav{display:flex;justify-content:space-between;min-height:24px}

/* Savings card */
.saving-card{padding:20px;margin-top:12px;display:flex;flex-direction:column;gap:6px}
.saving-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.saving-head .text-btn{font-size:17px;padding:0 4px}
.saving-total{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.saving-text{margin:4px 0 8px;font-size:13px;line-height:1.5;color:var(--mist)}
.saving-loading{animation:saving-pulse 1.6s ease-in-out infinite}
@keyframes saving-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.saving-loading{animation:none}}
.habit-list{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.habit-row{display:flex;flex-direction:column;gap:5px;width:100%;padding:8px 0;background:none;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.habit-row:active{opacity:.7}
.habit-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px}
.habit-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.habit-sum{flex:none;font-variant-numeric:tabular-nums}
.habit-bar{display:block;height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.habit-bar>span{display:flex;justify-content:flex-end;height:100%;border-radius:5px}
.habit-bar i,.habit-legend i.hatch{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.55) 0 3px,rgba(255,255,255,.12) 3px 6px)}
.habit-bar i{display:block;width:50%;height:100%}
.habit-row small{font-size:11px}
.habit-legend{display:flex;gap:16px;font-size:11px;color:var(--mist);margin-top:6px}
.habit-legend>span{display:inline-flex;align-items:center;gap:6px}
.habit-legend i{display:inline-block;width:14px;height:8px;border-radius:2px}
.habit-legend i.solid{background:#00acfe}
.habit-legend i.hatch{background-color:#00acfe}

.saving-dupe{margin:6px 0 0;padding:10px 12px;border-radius:10px;background:rgba(255,204,2,.1);color:var(--text);font-size:12px;line-height:1.45}

/* Records that look entered twice: one tappable row each, the surplus on the right */
.saving-total-plain{color:var(--text)}
.dupe-block{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.dupe-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;font-weight:600;color:#ffcc02}
.dupe-head small{font-weight:400;color:var(--mist);font-variant-numeric:tabular-nums}
.dupe-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:12px;background:rgba(255,204,2,.07);box-shadow:inset 0 0 0 1px rgba(255,204,2,.16);color:var(--text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,background .15s ease}
.dupe-row:active{transform:scale(.98);background:rgba(255,204,2,.13)}
.dupe-badge{flex:none;min-width:34px;height:34px;padding:0 6px;border-radius:10px;display:grid;place-items:center;background:rgba(255,204,2,.16);color:#ffcc02;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.dupe-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.dupe-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dupe-text small{font-size:11px;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dupe-extra{flex:none;font-size:12px;font-weight:600;color:#ffcc02;font-variant-numeric:tabular-nums}
.dupe-go{flex:none;color:var(--mist);font-size:16px}
.sheet .card>button.row{margin:0;padding:12px 16px;background:none;border:0;border-bottom:1px solid var(--hairline);border-radius:0;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheet .card>button.row:last-child{border-bottom:0}
.sheet .card>button.row:active{background:var(--surface-2,rgba(255,255,255,.04))}
.primary.danger-fill{background:var(--red);border-color:var(--red)}
@media (prefers-reduced-motion:reduce){.dupe-row{transition:none}}

/* Savings ring */
.saving-donut{margin-top:12px}
.habit-leg{display:flex;align-items:center;gap:8px;width:100%;padding:6px 0;background:none;border:0;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.habit-leg:active:not(.rest){opacity:.7}
.habit-leg.rest{cursor:default;color:var(--mist)}
.habit-leg-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.habit-leg-text>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.habit-leg-text small{font-size:11px}

/* ——— Tejash imkoniyatlari ——— */
.saving-sub{margin:0;font-size:12px;line-height:1.45;color:var(--mist)}
.saving-title{margin-top:10px}
.opp-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.opp-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px;border-radius:18px;background:var(--surface-2);box-shadow:inset 3px 0 0 var(--opp,var(--accent)),var(--shadow-pressed);color:var(--text);text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
.opp-row:active{transform:scale(.985)}
.opp-icon{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface);font-size:19px;font-family:var(--font-emoji)}
.opp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.3}
.opp-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.opp-top b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp-sum{flex:none;font-variant-numeric:tabular-nums}
.opp-body small{font-size:11px;color:var(--mist)}
.opp-save{font-size:12px;color:var(--green);font-variant-numeric:tabular-nums}
.opp-goal{font-size:12px;color:var(--link)}
.ai-card{margin-top:12px;padding:18px 20px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(160deg,rgba(0,113,227,.14),var(--surface) 60%);border-color:rgba(41,151,255,.25)}
.ai-card p{margin:0;font-size:14px;line-height:1.55;color:var(--text)}
.ai-card small{font-size:11px}
.goal-hint{padding:16px;margin-top:12px;display:flex;flex-direction:column;gap:12px}
.goal-hint p{margin:0;font-size:13px;line-height:1.5;color:var(--fog)}

/* ——— Maqsadlar ——— */
.goal-card,.goal-empty{display:flex;flex-direction:column;gap:10px;width:100%;padding:16px 18px;margin-bottom:10px;color:var(--text);text-align:left;cursor:pointer}
.goal-empty{flex-direction:row;align-items:center;gap:12px}
.goal-empty small,.goal-top small{display:block;font-size:12px;color:var(--mist);margin-top:2px}
.goal-top{display:flex;align-items:center;gap:12px}
.goal-top b{font-size:15px;font-weight:600}
.goal-icon{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);font-size:21px;box-shadow:var(--shadow-pressed);font-family:var(--font-emoji)}
.goal-icon.big{width:52px;height:52px;font-size:26px}
.goal-pct{flex:none;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.goal-bar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden;box-shadow:var(--shadow-pressed)}
.goal-bar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--link));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.goal-eta{font-size:12px;color:var(--fog)}
.goal-hero{padding:18px 20px;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.goal-hero .actions{margin-top:4px}
.goal-hero .actions .secondary{flex:1}
.eta-card{margin-top:12px;padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.eta-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;color:var(--fog)}
.eta-row b{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.eta-card p{margin:2px 0 0;font-size:13px;line-height:1.45}
.eta-card small{font-size:11px}
.scenario-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.scenario{padding:12px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0}
.scenario small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.scenario b{font-family:var(--font-display);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.scenario span{font-size:11px;line-height:1.3;color:var(--mist)}
.scenario.max{border-color:rgba(41,151,255,.45);background:linear-gradient(160deg,rgba(0,113,227,.16),var(--surface))}
.scenario.max b{color:var(--link)}
@media (max-width:360px){.scenario-tiles{grid-template-columns:1fr}}
.sim-list{padding:4px 0}
.sim-row{padding:10px 14px;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px}
.sim-row:last-child{border-bottom:0}
.sim-check{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:0;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.sim-check .grow{display:flex;flex-direction:column;font-size:14px;line-height:1.3;min-width:0}
.sim-check small{font-size:11px;color:var(--mist)}
.sim-check b{flex:none;font-size:13px;color:var(--green);font-variant-numeric:tabular-nums}
.sim-check .box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--mist);display:grid;place-items:center;font-size:13px;color:#fff;transition:background .15s,border-color .15s}
.sim-row.on .box{background:var(--accent);border-color:var(--accent)}
.sim-row:not(.on) .sim-steps{opacity:.45}
.sim-steps{display:flex;gap:6px;padding-left:34px}
.sim-steps button{flex:1;min-height:30px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--line);color:var(--fog);font-size:12px}
.sim-steps button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.sim-card{margin-top:12px;padding:14px 16px}
.sim-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sim-figs div{display:flex;flex-direction:column;gap:3px;min-width:0}
.sim-figs small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.sim-figs b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sim-figs small.up{color:var(--green);text-transform:none;letter-spacing:0;font-size:11px}
.sim-figs small.down{color:var(--red);text-transform:none;letter-spacing:0;font-size:11px}
@media (max-width:360px){.sim-figs{grid-template-columns:1fr 1fr}}
.notice-card{margin-top:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.notice-card p{margin:0;font-size:13px;line-height:1.5;color:var(--fog)}
.wiz-dots{display:flex;gap:6px;justify-content:center;margin:6px 0 18px}
.wiz-dots span{width:28px;height:4px;border-radius:2px;background:var(--surface-3);transition:background .2s}
.wiz-dots span.on{background:var(--accent)}
.wiz-q{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}
.goal-icons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.goal-icon-pick{width:46px;height:46px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);font-size:22px;font-family:var(--font-emoji)}
.goal-icon-pick.on{border-color:var(--accent);background:var(--accent-soft)}
.wiz-summary{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:12px}
.wiz-summary small{display:block;color:var(--mist);font-size:13px}
.dupe-banner{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;margin-bottom:10px;border:0;border-radius:16px;background:rgba(255,204,2,.08);box-shadow:inset 0 0 0 1px rgba(255,204,2,.2);color:var(--text);font:inherit;text-align:left;cursor:pointer}
@media (prefers-reduced-motion:reduce){.goal-bar span,.opp-row{transition:none}}
@media (min-width:700px){.opp-list{display:grid;grid-template-columns:1fr 1fr}}

/* Manrope type scale: 400 for text, 600 for titles, 700 for the figures that matter */
.topbar-title,.card-title,.wiz-q,.section-label{font-weight:600}
.amount,.chart-total,.saving-total,.goal-pct,.eta-row b,.scenario b,.donut-center b,.opp-sum,.sim-figs b{font-weight:700;letter-spacing:-.02em}
.balance{font-weight:700;letter-spacing:-.03em}
.muted,.subtle,.row small,.hint,.note{font-weight:400}
.wiz-input input{text-align:left;font-size:18px}
/* Rows inside a card in a sheet keep the card's own inset; bare rows in a sheet still run edge to edge. */
.sheet .card>.row{padding-left:16px;padding-right:16px}