@font-face{font-family:"Familjen Grotesk";font-weight:500;font-display:swap;src:url(fonts/familjen-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-weight:700;font-display:swap;src:url(fonts/familjen-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:400;font-display:swap;src:url(fonts/public-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:600;font-display:swap;src:url(fonts/public-sans-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#EEF1EF; --surface:#FFFFFF; --surface-2:#F6F8F7; --ink:#17221E; --muted:#56635D; --line:#D5DCD8; --line-strong:#B9C4BE;
  --pine:#1F5A46; --pine-ink:#FFFFFF; --pine-soft:#DCEAE3; --loan:#8FB5A5;
  --brass:#8A5E10; --brass-bar:#C9973A; --brass-soft:#F4E9D2;
  --brick:#9C3426; --brick-soft:#F5E0DB;
  --shadow:0 1px 2px rgba(23,34,30,.06),0 4px 16px rgba(23,34,30,.05);
  --display:"Familjen Grotesk","Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rail:236px; --tabbar:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="hell"]){
    --bg:#0F1513; --surface:#18211E; --surface-2:#1D2724; --ink:#E3EAE6; --muted:#9AA8A1; --line:#2A3632; --line-strong:#3A4843;
    --pine:#6CC2A0; --pine-ink:#0F1513; --pine-soft:#1C3A2F; --loan:#3E6F5D;
    --brass:#E0AE52; --brass-bar:#B3842F; --brass-soft:#382E18;
    --brick:#EE8576; --brick-soft:#3B2420;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dunkel"]{
    --bg:#0F1513; --surface:#18211E; --surface-2:#1D2724; --ink:#E3EAE6; --muted:#9AA8A1; --line:#2A3632; --line-strong:#3A4843;
    --pine:#6CC2A0; --pine-ink:#0F1513; --pine-soft:#1C3A2F; --loan:#3E6F5D;
    --brass:#E0AE52; --brass-bar:#B3842F; --brass-soft:#382E18;
    --brick:#EE8576; --brick-soft:#3B2420;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.5 var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15;margin:0;letter-spacing:-.005em}
a{color:var(--pine)}
.num,td,.fig{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Shell ---------- */
.shell{min-height:100vh;display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
.rail{position:sticky;top:0;height:100vh;padding:22px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 22px;font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink);text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.nav .badge-n{margin-left:auto;background:var(--pine);color:var(--pine-ink);font-size:.75rem;min-width:22px;text-align:center;padding:1px 7px;border-radius:999px}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:0 4px}
.rail-foot small{color:var(--muted);font-size:.8rem;line-height:1.35;padding:0 6px}
.topbar,.tabbar{display:none}
.content{min-width:0;padding:34px clamp(18px,4vw,48px) 64px;max-width:1120px;width:100%}

@media (max-width:860px){
  .shell{display:block}
  .rail{display:none}
  .topbar{display:flex;position:sticky;top:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;
    padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .topbar .brand{padding:0}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:20;
    padding:6px 6px calc(env(safe-area-inset-bottom,0px) + 6px);background:var(--surface);background:color-mix(in srgb,var(--surface) 92%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--muted);text-decoration:none;font-size:.72rem;font-weight:600;border-radius:8px;position:relative}
  .tabbar a[aria-current="page"]{color:var(--pine)}
  .tabbar .dot{position:absolute;top:4px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--brass-bar)}
  .content{padding:20px 16px calc(var(--tabbar) + env(safe-area-inset-bottom,0px) + 28px)}
}

/* ---------- Buttons & Formulare ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 16px;border-radius:8px;border:1px solid var(--pine);
  background:var(--pine);color:var(--pine-ink);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.06)}
.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.danger{background:transparent;color:var(--brick);border-color:var(--line-strong)}
.btn.sm{min-height:34px;padding:5px 11px;font-size:.9rem}
.btn[disabled]{opacity:.55;cursor:default;filter:none}
.btn .spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.form{display:grid;gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}
.f label,.f .lbl{display:block;font-weight:600;font-size:.92rem;margin-bottom:5px}
.f .hint{display:block;color:var(--muted);font-size:.84rem;margin-top:5px;line-height:1.4}
.inp{position:relative;display:flex;align-items:center}
.inp input,.inp select,.f textarea,.f > input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);outline:none}
.inp input:focus,.inp select:focus,.f textarea:focus,.f > input:focus{border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-soft)}
.inp .unit{position:absolute;right:12px;color:var(--muted);font-size:.88rem;pointer-events:none}
.inp.has-unit input{padding-right:62px}
.f textarea{min-height:110px;resize:vertical;line-height:1.45}
.switch{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;flex:none;width:42px;height:24px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;margin:1px 0 0;transition:background .15s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked{background:var(--pine)}
.switch input:checked::after{transform:translateX(18px)}
.switch b{display:block;font-weight:600;font-size:.95rem}
.switch span{color:var(--muted);font-size:.86rem}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:7px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ---------- Bausteine ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:24px}
.page-head h1{font-size:clamp(1.6rem,3vw,2.1rem)}
.page-head p{margin:6px 0 0;color:var(--muted);max-width:62ch}
.panel{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:22px 24px}
.panel + .panel{margin-top:18px}
.panel h2{font-size:1.18rem;margin-bottom:4px}
.panel .sub{color:var(--muted);margin:0 0 16px;font-size:.94rem;max-width:66ch}
@media (max-width:560px){.panel{padding:18px 16px;border-radius:12px}}
.cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.cols > .panel + .panel{margin-top:0}
@media (max-width:980px){.cols{grid-template-columns:1fr}}
.muted{color:var(--muted)}
.note{border-left:3px solid var(--brass-bar);background:var(--brass-soft);padding:11px 14px;border-radius:0 8px 8px 0;font-size:.93rem;margin:14px 0 0}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty h3{color:var(--ink);font-size:1.1rem;margin-bottom:6px}
.empty .actions{justify-content:center;margin-top:16px}
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.82rem;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill.passt{background:var(--pine-soft);color:var(--pine)}
.pill.knapp{background:var(--brass-soft);color:var(--brass)}
.pill.zu_teuer{background:var(--brick-soft);color:var(--brick)}
.pill.neu{background:var(--pine);color:var(--pine-ink)}
.pill.plain{background:var(--surface-2);color:var(--muted);font-weight:600}
.kv{display:grid;grid-template-columns:1fr auto;gap:0}
.kv > div{display:contents}
.kv dt,.kv dd{padding:9px 0;border-bottom:1px solid var(--line);margin:0}
.kv dd{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.kv .total dt,.kv .total dd{font-weight:700;border-bottom:0;padding-top:12px}
.kv .minus dd{color:var(--muted)}

/* ---------- Rahmen (Hero) ---------- */
.hero{padding:6px 0 28px}
.hero .lead{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.25;margin:0;max-width:30em}
.hero .big{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2.8rem,8vw,5rem);line-height:1;letter-spacing:-.025em;color:var(--pine);margin:.12em 0 .1em}
.hero .after{color:var(--muted);margin:10px 0 0;max-width:64ch}
.stack{display:flex;height:14px;border-radius:4px;overflow:hidden;background:var(--line);margin-top:22px;max-width:860px}
.stack span{height:100%;transition:width .4s ease}
.s-nk{background:var(--brass-bar)}.s-ek{background:var(--pine)}.s-loan{background:var(--loan)}
.legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;font-size:.9rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px}
.legend b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Angebotsliste ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.toolbar .search{flex:1 1 220px}
.toolbar .search input{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.toolbar select{min-height:40px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.list{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 200px 168px auto;grid-template-areas:"main budget right quick";gap:18px;align-items:center;padding:16px 20px;border-top:1px solid var(--line);color:inherit}
.row .main{grid-area:main;min-width:0}.row .budget{grid-area:budget}.row .right{grid-area:right}.row .quick{grid-area:quick}
.row a.t{display:block;color:inherit;text-decoration:none}
.row a.t::after{content:"";position:absolute;inset:0}
.row a.t:focus-visible{outline:none}
.row a.t:focus-visible::after{outline:2px solid var(--pine);outline-offset:-3px;border-radius:4px}
.row.fav{box-shadow:inset 3px 0 0 var(--pine)}
.quick{display:flex;gap:6px;position:relative;z-index:1}
.qb{width:40px;height:40px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.qb:hover{color:var(--ink);border-color:var(--ink)}
.qb.up[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:var(--pine-ink)}
.qb.down[aria-pressed="true"]{background:var(--brick);border-color:var(--brick);color:#fff}
.pill.stand{background:var(--pine-soft);color:var(--pine);font-weight:600;margin-top:6px}
.seg .cnt{display:inline-block;min-width:1.4em;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600;margin-left:2px}
.seg button[aria-pressed="true"] .cnt{color:var(--pine)}
.toolbar .check-line{white-space:nowrap}
.decide{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin-bottom:18px}
.decide h2{font-size:1.08rem}
.decide-a{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.decide-a select{min-height:42px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.btn.dec{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.dec.up[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:var(--pine-ink)}
.btn.dec.down[aria-pressed="true"]{background:var(--brick);border-color:var(--brick);color:#fff}
.kv dd.wrap{white-space:normal;max-width:60%;text-align:right;font-weight:500;font-size:.92rem}
.toast.has-act{display:flex;align-items:center;gap:14px;pointer-events:auto}
.toast-btn{border:0;background:none;color:var(--pine-soft);font-weight:700;cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.row:first-child{border-top:0}
.row:hover{background:var(--surface-2)}
.row .t{font-weight:600;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .m{color:var(--muted);font-size:.88rem;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .right{text-align:right}
.row .pills{margin-top:4px;display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.row .price{font-family:var(--display);font-weight:700;font-size:1.1rem}
.row.dim{opacity:.6}
.meter{position:relative;height:8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.meter span{position:absolute;left:0;top:-1px;bottom:-1px;border-radius:999px}
.meter .tick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.45;left:calc(100% / 1.3)}
.meter-l{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-top:6px}
.meter-l b{color:var(--ink);font-weight:600}
.panel .list.flush .row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main right" "budget quick";gap:10px 14px}
@media (max-width:700px){
  .row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main right" "budget quick";gap:10px 12px;padding:14px 16px}
}

.panel .list.flush{box-shadow:none;margin:0 -24px -22px;border-radius:0 0 14px 14px;border-top:1px solid var(--line)}
@media (max-width:560px){.panel .list.flush{margin:0 -16px -18px;border-radius:0 0 12px 12px}}

/* ---------- Detail ---------- */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:600;margin-bottom:14px}
.detail-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.detail-head h1{font-size:clamp(1.4rem,3vw,2rem);max-width:28ch}
.detail-head .meta{color:var(--muted);margin-top:6px}
.verdict{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.verdict .fig{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1}
.verdict p{margin:0;max-width:40ch}
.sens{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.sens div{background:var(--surface-2);border-radius:10px;padding:12px}
.sens small{display:block;color:var(--muted);font-size:.82rem}
.sens b{font-variant-numeric:tabular-nums;font-size:1.05rem}
.sens .cur{outline:2px solid var(--pine);outline-offset:-2px}

.paste{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.paste summary{cursor:pointer;font-weight:600;color:var(--pine)}
.paste textarea{min-height:140px}

.ms-rows{display:grid;gap:12px;margin:14px 0 4px}
.ms-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 150px auto;gap:10px;align-items:end;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ms-row .icon-btn{margin-bottom:2px;color:var(--brick)}
@media (max-width:640px){.ms-row{grid-template-columns:1fr 1fr}.ms-row .f:nth-child(2){grid-column:1 / -1;order:-1}}
.kv dt .muted{font-size:.86rem}

/* ---------- Zins-Chart ---------- */
.rate-now{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rate-now .fig{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1}
.chart{width:100%;height:auto;display:block;margin-top:14px;overflow:visible}
.chart .ln{fill:none;stroke:var(--pine);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .ar{fill:var(--pine-soft);opacity:.7}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart text{fill:var(--muted);font-size:13px;font-family:var(--text)}
.chart .pt{fill:var(--pine);stroke:var(--surface);stroke-width:2}

/* ---------- Checkliste / Verlauf ---------- */
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.checks li:first-child{border-top:0}
.checks .c{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;margin-top:1px}
.checks .done .c{background:var(--pine);border-color:var(--pine);color:var(--pine-ink)}
.checks .done .c svg{width:14px;height:14px;stroke-width:3}
.checks b{display:block}
.checks span{color:var(--muted);font-size:.9rem}
.checks a{font-weight:600}
.runs{list-style:none;margin:0;padding:0}
.runs li{border-top:1px solid var(--line)}
.runs details summary{display:flex;gap:12px;align-items:center;padding:12px 0;cursor:pointer;list-style:none}
.runs details summary::-webkit-details-marker{display:none}
.runs .st{width:10px;height:10px;border-radius:50%;flex:none}
.runs .ok{background:var(--pine)}.runs .err{background:var(--brick)}
.runs pre{white-space:pre-wrap;font:.84rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border-radius:8px;padding:12px;margin:0 0 12px;overflow-x:auto}
.copy{display:flex;gap:8px}
.copy input{flex:1;min-width:0;min-height:42px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2);font:.86rem ui-monospace,SFMono-Regular,Menlo,monospace}
.steps{margin:12px 0 0;padding-left:20px}
.steps li{margin-bottom:6px}
.settings-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.settings-nav a{padding:7px 13px;border-radius:999px;background:var(--surface);color:var(--muted);text-decoration:none;font-weight:600;font-size:.9rem;box-shadow:var(--shadow)}
.settings-nav a:hover{color:var(--ink)}

/* ---------- Auth / Einrichtung ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 24px) 18px calc(env(safe-area-inset-bottom,0px) + 24px)}
.auth-card{width:100%;max-width:460px}
.auth-card .brand{padding:0 0 26px}
.auth-card h1{font-size:1.9rem;margin-bottom:8px}
.auth-card > p{color:var(--muted);margin:0 0 22px}
.progress{display:flex;gap:6px;margin-bottom:26px}
.progress span{flex:1;height:4px;border-radius:4px;background:var(--line)}
.progress span.on{background:var(--pine)}
.err-msg{color:var(--brick);font-weight:600;font-size:.92rem;min-height:1.4em;margin:0}

/* ---------- Darstellung ---------- */
.theme-seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.theme-seg button{display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;padding:7px 6px;border-radius:7px;color:var(--muted);cursor:pointer;font-weight:600;font-size:.86rem}
.theme-seg button svg{width:17px;height:17px}
.theme-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer}
.topbar .tools{display:flex;gap:8px;align-items:center}
.auth-tools{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px}
.theme-seg button{min-width:0}
.rail .theme-seg .tl{display:none}
.rail .theme-seg button{padding:8px 4px}
.who{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 2px 4px}
.who-n{display:flex;align-items:center;gap:10px;min-width:0}
.who-n > span:last-child{min-width:0;display:block;text-align:left}
.rail-foot .who small,.who small{display:block;color:var(--muted);font-size:.76rem;line-height:1.2;padding:0}
.who b{display:block;color:var(--ink);font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .av{width:32px;height:32px;border-radius:50%;background:var(--pine-soft);color:var(--pine);display:grid;place-items:center;font-weight:700;flex:none;text-transform:uppercase;font-size:.9rem}
.who .icon-btn{width:36px;height:36px;color:var(--muted)}
.who .icon-btn:hover{color:var(--ink)}
.users{list-style:none;margin:0 0 18px;padding:0}
.users li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.users li:first-child{border-top:0}
.users .av{width:34px;height:34px;border-radius:50%;background:var(--pine-soft);color:var(--pine);display:grid;place-items:center;font-weight:700;flex:none;text-transform:uppercase}
.users .nm{flex:1;min-width:0}
.users .nm .nm-sub{display:block;color:var(--muted);font-size:.86rem}
.users .nm .pill{margin-left:6px;vertical-align:1px}
.check-line{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.94rem;cursor:pointer}
.check-line input{width:18px;height:18px;accent-color:var(--pine);margin:0}

/* ---------- Toast ---------- */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:50;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,460px)}
@media (max-width:860px){.toasts{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom,0px) + 14px)}}
.toast{background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:10px;font-weight:600;font-size:.93rem;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:tin .2s ease-out}
.toast.bad{background:var(--brick);color:#fff}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}
.loading{color:var(--muted);padding:40px 0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}