/* Liquid Glass layer — iOS 26-style materials on top of glass.css.
   Surfaces get rim lighting (bright top edge, softer sides), a specular sheen,
   stronger blur + saturation, and capsule shapes. Space colours still come from glass.css. */
:root{
 --lg-blur:blur(26px) saturate(190%) brightness(1.04);
 --lg-rim:inset 0 1px 0 #ffffffeb,inset 0 -1px 1px #ffffff59,inset 1px 0 0 #ffffff6b,inset -1px 0 0 #ffffff40;
 --lg-drop:0 10px 32px #12284614,0 1px 3px #1228460f;
 --lg-sheen:linear-gradient(165deg,#ffffff70 0%,#ffffff1a 28%,#ffffff00 55%,#ffffff14 100%);
 --lg-fill:#ffffff9e;--lg-bar:#ffffffc4;--lg-fill-strong:#ffffffcf;--lg-lens:#ffffffb8;
}
:root[data-theme=dark]{
 --lg-blur:blur(26px) saturate(170%) brightness(.92);
 --lg-rim:inset 0 1px 0 #ffffff38,inset 0 -1px 1px #ffffff12,inset 1px 0 0 #ffffff1c,inset -1px 0 0 #ffffff12;
 --lg-drop:0 14px 40px #0000004d,0 1px 3px #00000033;
 --lg-sheen:linear-gradient(165deg,#ffffff1f 0%,#ffffff08 30%,#ffffff00 55%,#ffffff0a 100%);
 --lg-fill:#1c263a9e;--lg-bar:#18213ad1;--lg-fill-strong:#1a2436db;--lg-lens:#ffffff1f;
}
/* Glass surfaces */
.card,.metric:not(.hero){background-image:var(--lg-sheen);box-shadow:var(--lg-drop),var(--lg-rim);border-color:transparent;backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur)}
.metric.hero{box-shadow:0 18px 44px #0d203a2e,inset 0 1px 0 #ffffff6e,inset 0 -1px 1px #ffffff1f,inset 1px 0 0 #ffffff2e}
.card{border-radius:28px}.metric{border-radius:26px}
/* Capsule controls */
.primary,.secondary,.text-button.secondary,.filters select,.filters input,.search{border-radius:999px}
.primary{box-shadow:0 8px 22px #0b3a4a2e,inset 0 1px 0 #ffffff80,inset 0 -1px 1px #00000014}
.secondary,.filters select,.filters input,.search{background:var(--lg-fill);background-image:var(--lg-sheen);border:1px solid transparent;box-shadow:var(--lg-drop),var(--lg-rim);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur)}
/* Segmented space picker with a glass "lens" thumb */
.spaces{border-radius:999px;background:var(--lg-fill);background-image:var(--lg-sheen);border:1px solid transparent;box-shadow:var(--lg-drop),var(--lg-rim);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur)}
.spaces button{border-radius:999px;transition:background .25s,box-shadow .25s,color .25s,transform .2s}
.spaces button.selected{box-shadow:0 4px 14px #1228461f,var(--lg-rim)}
/* Header: content scrolls under a soft fade instead of a solid bar */
.appearance-button,.install-button,dialog .close{background:var(--lg-fill);background-image:var(--lg-sheen);border:1px solid transparent;box-shadow:var(--lg-drop),var(--lg-rim);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);color:var(--ink)}
dialog .close{border-radius:50%;width:40px;height:40px;outline:none}
/* Sheets */
dialog{background:var(--lg-fill-strong);background-image:var(--lg-sheen);border:1px solid transparent;box-shadow:0 30px 90px #00142240,var(--lg-rim);backdrop-filter:blur(44px) saturate(190%);-webkit-backdrop-filter:blur(44px) saturate(190%);border-radius:34px}
dialog input,dialog select{border-radius:16px;box-shadow:inset 0 1px 2px #12284612}
dialog .primary{width:100%;min-height:52px}
.foreign-expense{border-radius:20px;box-shadow:var(--lg-rim)}
/* Desktop sidebar becomes a floating glass panel */
@media(min-width:701px){
 aside{inset:12px auto 12px 12px;border-radius:30px;border:1px solid transparent;background:var(--lg-fill);background-image:var(--lg-sheen);box-shadow:var(--lg-drop),var(--lg-rim);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur)}
 nav button{border-radius:999px}
 nav button.active{background:var(--lg-lens);box-shadow:0 4px 14px #1228461a,var(--lg-rim)}
}
/* Phone: floating capsule tab bar + separate round Add button (iOS 26 layout) */
@media(max-width:700px){
 header{background:linear-gradient(to bottom,var(--paper) 0%,color-mix(in srgb,var(--paper) 70%,transparent) 55%,transparent 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent);box-shadow:none}
 aside{left:14px;right:86px;bottom:calc(12px + env(safe-area-inset-bottom));height:64px;padding:4px;border-radius:999px;border:1px solid transparent;background:var(--lg-bar);background-image:var(--lg-sheen);box-shadow:0 12px 34px #12284626,var(--lg-rim);backdrop-filter:blur(32px) saturate(200%) brightness(1.05);-webkit-backdrop-filter:blur(32px) saturate(200%) brightness(1.05)}
 nav{height:100%}
 nav button{min-height:54px;height:100%;border-radius:999px;padding:6px 2px;gap:3px;font-size:10px}
 nav button.active{background:var(--lg-lens);box-shadow:0 3px 12px #12284618,var(--lg-rim);border-color:transparent}
 nav .nav-icon{height:22px}
 .quick-add{right:14px;bottom:calc(12px + env(safe-area-inset-bottom));width:64px;height:64px;padding:0;border-radius:50%;justify-content:center;font-size:28px;line-height:1;box-shadow:0 12px 30px #0b3a4a40,inset 0 1px 0 #ffffffa6,inset 0 -1px 2px #00000026,inset 1px 0 0 #ffffff4d}
 .quick-add span{display:none}
 main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
 dialog{border-radius:34px 34px 0 0}
}
:root[data-theme=dark] .primary{box-shadow:0 8px 22px #00000040,inset 0 1px 0 #ffffff59,inset 0 -1px 1px #00000033}
/* Accessibility: solid surfaces when transparency is reduced or blur unsupported */
@media(prefers-reduced-transparency:reduce){.secondary,.spaces,.filters select,.filters input,.search,.appearance-button,.install-button,dialog .close,aside,dialog{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-strong)}}
@supports not (backdrop-filter:blur(1px)){.spaces,aside,dialog,.quick-add{background-color:var(--glass-strong)}}
.card-glyph{display:inline-flex;vertical-align:-5px;margin-right:8px;color:var(--teal)}.credit-card .account-value small{font-size:13px;color:var(--muted);margin-right:4px}.credit-card .card-label{margin:12px 0 0}
/* App lock */
.app-locked body>*:not(#lock-screen){visibility:hidden!important}
dialog#lock-screen{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:auto}dialog#lock-screen:before{display:none!important}dialog#lock-screen::backdrop{background:var(--paper)}dialog#lock-screen[open]{display:grid}#lock-screen{z-index:9999;place-items:center;padding:24px!important;background:radial-gradient(ellipse at 80% 0%,#99dbde70,transparent 50%),radial-gradient(ellipse at 10% 70%,#b9c7f560,transparent 50%),var(--paper);color:var(--ink)}
[data-theme=dark] dialog#lock-screen{background:radial-gradient(ellipse at 80% 0%,#17758045,transparent 50%),radial-gradient(ellipse at 10% 70%,#6050aa30,transparent 50%),var(--paper)}
.lock-card{width:min(340px,100%);text-align:center;display:flex;flex-direction:column;align-items:center}
.lock-logo{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font:750 38px -apple-system,sans-serif;color:var(--teal);background:var(--lg-fill);background-image:var(--lg-sheen);box-shadow:var(--lg-drop),var(--lg-rim);position:relative}.lock-logo span{position:absolute;font-size:15px;top:9px;right:10px}
.lock-card h2{margin:18px 0 4px;font-size:22px}.lock-card p{color:var(--muted);font-size:14px;min-height:40px;margin:0 0 6px;max-width:300px}
.lock-dots{display:flex;gap:14px;margin:8px 0 26px}.lock-dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--ink);opacity:.75;transition:background .15s}.lock-dots i.on{background:var(--ink)}
.lock-dots.shake{animation:lockshake .35s}@keyframes lockshake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.lock-pad{display:grid;grid-template-columns:repeat(3,76px);gap:16px 24px}
.lock-pad button{width:76px;height:76px;border-radius:50%;border:1px solid transparent;font:400 30px -apple-system,sans-serif;color:var(--ink);background:var(--lg-fill);background-image:var(--lg-sheen);box-shadow:var(--lg-drop),var(--lg-rim);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);display:grid;place-items:center}
.lock-pad button:active{transform:scale(.93);background:var(--lg-lens)}
.lock-pad .lock-del,.lock-pad .lock-bio{background:none;box-shadow:none;font-size:24px;color:var(--teal)}
.lock-forgot{margin-top:22px;font-size:13px}
.lock-toggle{display:flex;align-items:center;gap:10px;font-weight:500}.lock-toggle input{width:20px;height:20px}
/* Quick log */
.quick-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 14px}
.quick-chips button{border-radius:999px;padding:8px 14px;font-size:13px;color:var(--ink);border:1px solid transparent;background:var(--lg-fill);background-image:var(--lg-sheen);box-shadow:var(--lg-rim)}
.quick-chips button.selected{background:var(--teal);color:#fff}
.quick-h{font-size:14px;margin:20px 0 8px}
.quick-link{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.quick-link span{min-width:0}.quick-link b{display:block;font-size:13px}.quick-link small{display:block;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
/* Accounts grouped by currency + card totals */
.currency-group{margin-bottom:30px}
.group-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:6px 2px 2px}.group-head h2{font-size:22px;margin:0}
.group-total{text-align:right}.group-total span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}.group-total b{font-size:20px}
.currency-group>.hint{margin:2px 2px 12px}
.card-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:4px 0 16px;border-radius:22px;background:var(--lg-fill);background-image:var(--lg-sheen);box-shadow:var(--lg-drop),var(--lg-rim);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);overflow:hidden}.cstat{padding:14px 12px;min-width:0}.cstat+.cstat{border-left:1px solid var(--line)}.cstat label{display:block;font-size:11px;color:var(--muted);font-weight:500}.cstat strong{display:block;font-size:17px;font-weight:650;margin:6px 0 2px;letter-spacing:-.4px;overflow-wrap:anywhere}.cstat strong small{display:block;font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.3px}.cstat p{font-size:11px;color:var(--muted);margin:0}.cstat.income strong{color:var(--on-green)}.cstat.expense strong{color:var(--orange)}@media(min-width:701px){.cstat{padding:18px 20px}.cstat strong{font-size:22px}}.credit-summary .card-stats{margin:6px 0 8px;box-shadow:var(--lg-rim)}
.account-value small{font-size:13px;color:var(--muted);margin-right:4px;font-weight:500}
/* iPhone Home Screen app: Faru draws behind the status bar (black-translucent), so it always
   matches Faru's own appearance. In light mode a soft shade keeps the white status icons legible. */
@media(display-mode:standalone){:root:not([data-theme=dark]) body:after{content:'';position:fixed;left:0;right:0;top:0;height:calc(env(safe-area-inset-top) + 6px);background:linear-gradient(#10243599,#10243500);pointer-events:none;z-index:6}}
/* Space tabs: all visible on phones without sideways scrolling */
.sp-short{display:none}
@media(max-width:700px){
 .spaces{flex-wrap:wrap!important;overflow:visible!important;justify-content:space-between!important;gap:2px!important;padding:4px!important;width:100%}
 .spaces button{flex:1 1 auto!important;min-width:0;min-height:40px!important;padding:8px 7px!important;font-size:clamp(11.5px,3.3vw,13.5px)!important;white-space:nowrap;display:flex;align-items:center;justify-content:center;flex-shrink:1!important}
 .spaces button[data-space]{gap:5px}
}
@media(max-width:440px){.sp-long{display:none}.sp-short{display:inline}}
/* Light mode: space tabs with stronger colour — selected tab filled with its space colour */
:root:not([data-theme=dark]) .spaces button{color:#3d4b5c;font-weight:500}
:root:not([data-theme=dark]) .spaces button.selected{color:#fff!important;font-weight:600;text-shadow:0 1px 1px #0000001f}
:root:not([data-theme=dark]) .spaces button[data-space="All spaces"].selected{background:linear-gradient(135deg,#25aaa2,#0b7f7a)!important;box-shadow:0 6px 16px #0b7f7a40,inset 0 1px 0 #ffffff70,inset 0 -1px 1px #00000020!important}
:root:not([data-theme=dark]) .spaces button[data-space="Personal"].selected{background:linear-gradient(135deg,#3cc673,#17924b)!important;box-shadow:0 6px 16px #17924b40,inset 0 1px 0 #ffffff70,inset 0 -1px 1px #00000020!important}
:root:not([data-theme=dark]) .spaces button[data-space="Faru Lifestyle"].selected{background:linear-gradient(135deg,#4f8ff0,#1f5fd0)!important;box-shadow:0 6px 16px #1f5fd040,inset 0 1px 0 #ffffff70,inset 0 -1px 1px #00000020!important}
:root:not([data-theme=dark]) .spaces button[data-space="VeyruKeyolhu"].selected{background:linear-gradient(135deg,#ec5466,#c4202f)!important;box-shadow:0 6px 16px #c4202f40,inset 0 1px 0 #ffffff70,inset 0 -1px 1px #00000020!important}
:root:not([data-theme=dark]) .spaces button[data-space="Personal"]:before{background:#1fa456!important;box-shadow:0 0 0 3px #1fa45622!important}
:root:not([data-theme=dark]) .spaces button[data-space="Faru Lifestyle"]:before{background:#2468e0!important;box-shadow:0 0 0 3px #2468e022!important}
:root:not([data-theme=dark]) .spaces button[data-space="VeyruKeyolhu"]:before{background:#d8283a!important;box-shadow:0 0 0 3px #d8283a22!important}
:root:not([data-theme=dark]) .spaces button.selected:before{background:#fff!important;box-shadow:0 0 0 3px #ffffff40!important}

/* Slightly more opaque glass on cards and tiles: blend each theme's glass 25% toward its solid version */
.card,.metric:not(.hero){background-color:color-mix(in srgb,var(--glass),var(--glass-strong) 25%)}