/* Xterminal Mini App — design system.
   One dark world: black/white swirl wallpaper under clear liquid glass. Single theme on purpose (matches the owner's reference).
   Phone: floating glass tab bar + round action button. ≥920px: glass sidebar + split panes. */
:root{
  --bg:#000;
  --ink:#fff; --ink2:rgba(255,255,255,.64); --ink3:rgba(255,255,255,.4); --ink4:rgba(255,255,255,.22);
  --sep:rgba(255,255,255,.1);
  --fill:rgba(255,255,255,.08); --fill2:rgba(255,255,255,.13); --fill3:rgba(255,255,255,.2);
  --white:#fff; --on-white:#000;
  --lime:#c8f43a; --on-lime:#0a0a0a;
  --green:#32d74b; --orange:#ff9f0a; --red:#ff453a; --blue:#0a84ff; --indigo:#7d7aff; --teal:#64d2ff; --yellow:#ffd60a;
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fd:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fr:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fm:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.3,1.3,.5,1);
  --sat:max(env(safe-area-inset-top,0px),calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))); --sab:env(safe-area-inset-bottom,0px);
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.3;letter-spacing:-.022em;overflow:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-user-select:none;user-select:none;
  padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px}
svg{flex:none;display:block}
.tn{font-variant-numeric:tabular-nums}
.mono{font-family:var(--fm);letter-spacing:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── wallpaper ── */
#wall{position:fixed;inset:0;width:100%;height:100%;z-index:0;transform:translateZ(0)}
#wall-dim{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(140% 100% at 50% 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.38) 100%)}

/* ── glass ── */
.gl{position:relative;isolation:isolate;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025) 42%,rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(18px) saturate(1.5) brightness(.62);backdrop-filter:blur(18px) saturate(1.5) brightness(.62);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.16),inset 0 0 0 .5px rgba(255,255,255,.06),inset 0 -1px 1px rgba(0,0,0,.18),0 14px 34px -14px rgba(0,0,0,.55)}
.gl.ctl{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(10px) saturate(1.6) brightness(.78);backdrop-filter:blur(10px) saturate(1.6) brightness(.78)}
.gl.sheet{background:linear-gradient(180deg,rgba(40,40,42,.5),rgba(22,22,24,.62));
  -webkit-backdrop-filter:blur(34px) saturate(1.6);backdrop-filter:blur(34px) saturate(1.6)}
.gl.flat{box-shadow:inset 0 .5px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.05)}
.gl > .rip-wave,.gl > .rip-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4}
.rip-glow{overflow:hidden}
.rip-glow i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 70%);transform:translate(-50%,-50%) scale(0);opacity:0}
.pressable{cursor:pointer;touch-action:manipulation}

/* ── shell ── */
#root{position:fixed;inset:0;z-index:1}
.app{position:absolute;inset:0;display:grid;grid-template-columns:1fr}
.main{position:relative;overflow:hidden;min-width:0;transform-origin:50% 0;transition:transform .55s var(--ease),border-radius .55s var(--ease)}
.app.stacked .main{transform:scale(.92) translateY(calc(var(--sat) + 10px));border-radius:30px}
.tabview{position:absolute;inset:0}
.tabview[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.page{position:absolute;inset:0;contain:layout style}
.page.covered{pointer-events:none}
.page-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:50}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{display:none}
.wrap{min-height:100%;padding:calc(var(--sat) + 56px) var(--gr) calc(var(--sab) + 120px) var(--gl);max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.page.sub .wrap{padding-top:calc(var(--sat) + 66px)}
.wrap.wide{max-width:1160px}

/* nav bar with iOS scroll-edge blur */
.navbar{position:absolute;inset:0 0 auto;z-index:20;height:calc(var(--sat) + 54px);padding:var(--sat) var(--gr) 0 var(--gl);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;pointer-events:none}
.navbar > *{pointer-events:auto}
.navbar .edge{position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  -webkit-backdrop-filter:blur(14px) brightness(.6);backdrop-filter:blur(14px) brightness(.6);
  -webkit-mask:linear-gradient(#000 0%,#000 48%,transparent 100%);mask:linear-gradient(#000 0%,#000 48%,transparent 100%)}
.navbar.on .edge{opacity:1}
.navtitle{font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(60vw,520px);opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.navbar.on .navtitle,.page.sub .navtitle{opacity:1;transform:none}
.navleft{justify-self:start;display:flex;gap:8px}
.navright{justify-self:end;display:flex;gap:8px}
.navbtn{height:44px;min-width:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 10px;font-size:16px;font-weight:500}
.large{margin:4px 4px 2px}
.large h1{font-family:var(--fd);font-weight:700;font-size:34px;line-height:1.08;letter-spacing:-.03em;margin:0;text-wrap:balance}
.large p{margin:4px 0 0;color:var(--ink2);font-size:15px;letter-spacing:-.01em}

/* tab bar */
.tabbar{position:fixed;z-index:30;left:var(--gl);bottom:calc(var(--sab) + 12px);height:62px;border-radius:31px;right:calc(var(--gr) + 72px);display:flex;padding:4px;touch-action:none;transition:right .6s var(--spring),opacity .3s,transform .5s var(--ease)}
.tabbar.nofab{right:var(--gr)}
.tabbar.away{transform:translateY(140%);opacity:0;pointer-events:none}
.tab{position:relative;z-index:3;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;letter-spacing:0;color:var(--ink2);border-radius:27px;transition:color .3s}
.tab.on{color:var(--ink)}
.tab .tl{white-space:nowrap}
.lens{position:absolute;z-index:2;top:4px;bottom:4px;left:0;border-radius:27px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.28),inset 0 -.5px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.25)}
.fab{position:fixed;z-index:30;right:var(--gr);bottom:calc(var(--sab) + 12px);width:62px;height:62px;border-radius:31px;display:grid;place-items:center;transition:transform .55s var(--spring),opacity .3s}
.fab.away{transform:scale(.3);opacity:0;pointer-events:none}
.badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font:600 11.5px/18px var(--f);letter-spacing:0;text-align:center;transform-origin:30% 70%}
.badge.lime{background:var(--lime);color:var(--on-lime)}

/* role pill */
.rolepill{position:fixed;z-index:31;top:calc(var(--sat) + 8px);right:var(--gr);height:38px;border-radius:19px;display:flex;align-items:center;gap:8px;padding:0 14px 0 4px;font-size:14px;font-weight:600;transition:opacity .3s,transform .5s var(--spring)}
.rolepill.away{opacity:0;transform:translateY(-14px) scale(.9);pointer-events:none}

/* sidebar */
.side{display:none}
@media (min-width:920px){
  .app{grid-template-columns:300px 1fr}
  .side{display:flex;flex-direction:column;gap:4px;margin:calc(var(--sat) + 14px) 0 14px 14px;padding:16px 12px;border-radius:30px;min-height:0;overflow-y:auto;scrollbar-width:none}
  .tabbar,.fab,.rolepill{display:none}
  .app.stacked .main{transform:none;border-radius:0}
  .wrap{padding:calc(var(--sat) + 30px) 32px 48px}
  .page.sub .wrap{padding-top:calc(var(--sat) + 78px)}
  .navbar{padding:calc(var(--sat) + 12px) 32px 0;height:calc(var(--sat) + 66px)}
  .large h1{font-size:40px}
}
.sbrand{display:flex;align-items:center;gap:12px;padding:6px 8px 18px}
.sbrand b{display:block;font-family:var(--fd);font-size:19px;font-weight:700;letter-spacing:-.025em}
.sbrand span{display:block;font-size:13px;color:var(--ink2);letter-spacing:-.01em}
.sitem{position:relative;display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border-radius:23px;color:var(--ink2);font-weight:500;font-size:16px;transition:color .25s}
.sitem.on{color:var(--ink)}
.sitem .badge{position:static;margin-left:auto}
.slens{position:absolute;left:12px;right:12px;height:46px;border-radius:23px;pointer-events:none;background:rgba(255,255,255,.1);box-shadow:inset 0 .5px 0 rgba(255,255,255,.18)}
.sfoot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:16px 4px 4px}
.ssec{font-size:12.5px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;padding:14px 14px 6px}

/* ── building blocks ── */
.group{border-radius:26px;overflow:hidden}
.ghead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 6px -6px;font-family:var(--fd);font-size:22px;font-weight:700;letter-spacing:-.025em}
.ghead small{font:400 15px var(--f);color:var(--ink2);letter-spacing:-.01em}
.ghead button{font:500 15px var(--f);color:var(--ink2)}
.gfoot{font-size:13.5px;color:var(--ink3);margin:-8px 8px 0;line-height:1.4;letter-spacing:-.005em}
.cell{position:relative;width:100%;display:flex;align-items:center;gap:13px;padding:11px 16px;min-height:58px;text-align:left;transition:background .25s}
.cell.press:active{background:rgba(255,255,255,.06)}
.cell.sel{background:rgba(255,255,255,.1)}
.cell + .cell::before{content:"";position:absolute;top:0;left:var(--inset,64px);right:0;height:.5px;background:var(--sep)}
.cell.noicon{--inset:16px}
.cell .ci{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--fill);color:var(--ink)}
.cell .cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cell .ct{font-size:17px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.022em}
.cell .cs{font-size:14.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;display:flex;align-items:center;gap:6px}
.cell .cs.wrap2{white-space:normal}
.cell .cr{display:flex;align-items:center;gap:8px;color:var(--ink2);font-size:16px;flex:none}
.cell .cr b{color:var(--ink);font-weight:600}
.chev{color:var(--ink4)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:26px;font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;isolation:isolate;transition:opacity .25s,background .25s}
.btn.m{height:44px;padding:0 18px;font-size:16px;border-radius:22px}
.btn.s{height:34px;padding:0 14px;font-size:14.5px;border-radius:17px}
.btn.full{width:100%}
.btn.primary{background:var(--white);color:var(--on-white)}
.btn.lime{background:var(--lime);color:var(--on-lime)}
.btn.tint{background:var(--fill2);color:var(--ink)}
.btn.danger{background:rgba(255,69,58,.18);color:#ff6b61}
.btn.success{background:rgba(50,215,75,.18);color:#4be06a}
.btn.plain{background:none;color:var(--ink2);height:auto;padding:6px 8px}
.btn[disabled]{opacity:.32;pointer-events:none}
.btn .spin{width:18px;height:18px}
.row{display:flex;gap:10px}
.row > *{flex:1}
.stack{display:flex;flex-direction:column;gap:10px}

.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:16px;background:var(--fill);color:var(--ink2);font-size:14.5px;font-weight:500;white-space:nowrap;transition:background .3s,color .3s}
.chip.on{background:var(--white);color:var(--on-white)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl));padding:2px var(--gr) 2px var(--gl)}
.chips::-webkit-scrollbar{display:none}
@media (min-width:920px){.chips{margin:0;padding:2px 0;flex-wrap:wrap}}

.seg{position:relative;display:flex;padding:3px;border-radius:21px;background:rgba(255,255,255,.08);height:42px;touch-action:pan-y}
.seg > button{position:relative;z-index:2;flex:1 1 0;min-width:0;border-radius:18px;font-size:14.5px;font-weight:600;color:var(--ink2);transition:color .3s;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;padding:0 8px;letter-spacing:-.01em}
.seg > button.on{color:var(--ink)}
.seg > button i{font-style:normal;font-weight:500;opacity:.55;font-size:13.5px}
.seg .thumb{position:absolute;z-index:1;top:3px;bottom:3px;left:0;border-radius:18px;background:rgba(255,255,255,.17);box-shadow:inset 0 .5px 0 rgba(255,255,255,.25),0 3px 10px rgba(0,0,0,.28);will-change:transform}

.toggle{position:relative;width:51px;height:31px;flex:none;border-radius:16px;background:rgba(120,120,128,.32);transition:background .35s var(--ease)}
.toggle.on{background:var(--green)}
.toggle i{position:absolute;top:2px;left:2px;height:27px;width:27px;border-radius:14px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.12)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13.5px;color:var(--ink2);padding:0 6px;letter-spacing:-.005em}
.inp{display:flex;align-items:center;gap:8px;min-height:50px;padding:0 16px;border-radius:16px;background:rgba(255,255,255,.08);transition:background .3s,box-shadow .3s}
.inp:focus-within{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.inp.err{box-shadow:inset 0 0 0 1px rgba(255,69,58,.7)}
.inp input,.inp textarea{flex:1;min-width:0;background:none;border:0;outline:none;padding:13px 0;font-size:17px;line-height:1.35;resize:none}
.inp input::placeholder,.inp textarea::placeholder{color:var(--ink4)}
.inp .sfx{color:var(--ink2);font-size:16px}
.field .hint{font-size:13px;color:var(--ink3);padding:0 6px;line-height:1.4}
.field .hint.err{color:#ff6b61}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 20px;color:var(--ink2);font-size:15px}
.empty b{color:var(--ink);font-size:19px;font-weight:600;margin-top:12px;letter-spacing:-.02em}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%) 0 0/200% 100%;animation:skel 1.4s linear infinite;border-radius:10px}
@keyframes skel{to{background-position:-200% 0}}
.avatar{border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff;flex:none;letter-spacing:0}
.kv{display:grid;grid-template-columns:1fr auto;gap:12px 16px;font-size:16px}
.kv dt{color:var(--ink2)}
.kv dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.hr{height:.5px;background:var(--sep);margin:2px 0}
.muted{color:var(--ink2)}
.small{font-size:14px}
.pad{padding:18px}

/* rolling number */
.num{display:inline-flex;font-variant-numeric:tabular-nums;white-space:nowrap}
.num .d{display:inline-block;height:1.1em;overflow:hidden;position:relative;line-height:1.1}
.num .d > span{display:flex;flex-direction:column;transition:transform .8s var(--spring)}
.num .d > span > span{height:1.1em;line-height:1.1;text-align:center}

/* ring */
.ring{position:relative;display:grid;place-items:center;flex:none}
.ring > svg:first-child{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none}
.ring .rb{stroke:rgba(255,255,255,.12)}
.ring .rf{stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}

/* slide / hold */
.slide{position:relative;height:60px;border-radius:30px;background:rgba(255,255,255,.08);overflow:hidden;touch-action:none}
.slide .sf{position:absolute;inset:0 auto 0 0;width:60px;border-radius:30px;background:rgba(255,255,255,.12)}
.slide .sl{position:absolute;inset:0;display:grid;place-items:center;padding-left:44px;font-weight:600;font-size:16px;
  background:linear-gradient(90deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.35) 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 2.8s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.slide .knob{position:absolute;top:4px;left:4px;width:52px;height:52px;border-radius:26px;background:#fff;color:#000;display:grid;place-items:center;cursor:grab;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.slide.danger .knob{background:var(--red);color:#fff}
.slide.done .sl{animation:none;opacity:0;transition:opacity .2s}
.hold{position:relative;height:56px;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.12);font-weight:600;font-size:16.5px;touch-action:none;-webkit-touch-callout:none}
.hold .hf{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.hold.danger .hf{background:var(--red)}
.hold .hl{position:relative;height:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.hold .hl.top{position:absolute;inset:0;color:#000;clip-path:inset(0 100% 0 0)}
.hold.danger .hl.top{color:#fff}

/* otp */
.otp{position:relative;display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:8px}
.otp input{position:absolute;inset:0;opacity:0;font-size:16px;caret-color:transparent;z-index:2;width:100%}
.otp span{height:54px;border-radius:15px;background:rgba(255,255,255,.08);display:grid;place-items:center;font:600 24px var(--fr);transition:background .25s,box-shadow .25s}
.otp span.cur{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.otp span.cur::after{content:"";width:2px;height:24px;border-radius:1px;background:#fff;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.otp span.full{background:rgba(255,255,255,.14)}

/* sheet */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.4);opacity:0;pointer-events:none}
.scrim.on{pointer-events:auto}
.sheet[role="dialog"]{position:fixed;z-index:41;left:8px;right:8px;bottom:8px;max-height:calc(100% - var(--sat) - 44px);border-radius:38px;display:flex;flex-direction:column;overflow:hidden;will-change:transform}
.sheet .grab{flex:none;height:24px;display:grid;place-items:center;cursor:grab;touch-action:none}
.sheet .grab i{width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.28)}
.sheet .sb{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:2px 20px calc(var(--sab) + 22px);display:flex;flex-direction:column;gap:16px}
.sheet .sb::-webkit-scrollbar{display:none}
.shead{display:flex;align-items:flex-start;gap:12px}
.shead div{flex:1;min-width:0}
.shead h2{font-family:var(--fd);font-size:24px;font-weight:700;letter-spacing:-.028em;margin:2px 0 0;text-wrap:balance}
.shead p{margin:4px 0 0;color:var(--ink2);font-size:15px;letter-spacing:-.01em}
.xbtn{width:34px;height:34px;border-radius:17px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--ink2);flex:none}
@media (min-width:920px){
  .sheet[role="dialog"]{left:50%;right:auto;bottom:auto;top:50%;width:500px;max-height:min(800px,calc(100% - 60px));border-radius:32px}
  .sheet .grab{height:14px}.sheet .grab i{display:none}
  .sheet .sb{padding-bottom:24px}
}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 0 2px}
.done .mark{width:80px;height:80px;border-radius:40px;display:grid;place-items:center;background:#fff;color:#000}
.done .mark.bad{background:rgba(255,69,58,.2);color:#ff6b61}
.done h3{font-family:var(--fd);font-size:24px;font-weight:700;letter-spacing:-.028em;margin:10px 0 0;text-wrap:balance}
.done p{margin:0;color:var(--ink2);max-width:340px;font-size:15.5px;line-height:1.4}

/* island toast */
.island{position:fixed;z-index:70;left:50%;top:calc(var(--sat) + 10px);min-height:54px;max-width:min(420px,calc(100% - 24px));border-radius:27px;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;transform:translateX(-50%)}
.island .ii{width:38px;height:38px;border-radius:19px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none}
.island b{display:block;font-weight:600;font-size:15px;letter-spacing:-.015em}
.island small{display:block;color:var(--ink2);font-size:13.5px;letter-spacing:-.005em}

/* popover menu */
.menu{position:fixed;z-index:60;min-width:230px;border-radius:22px;padding:6px;transform-origin:top right}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;height:44px;padding:0 14px;border-radius:14px;font-size:16px;transition:background .2s}
.menu button:hover,.menu button:active{background:rgba(255,255,255,.1)}
.menu button.danger{color:#ff6b61}
.menu .sep{height:.5px;background:var(--sep);margin:4px 8px}

/* split */
.split{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.pane{display:none}
@media (min-width:920px){
  .split{grid-template-columns:minmax(320px,400px) minmax(0,1fr)}
  .pane{display:flex;flex-direction:column;gap:16px;position:sticky;top:0;min-width:0}
}

/* splash */
.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none}
.splash .drop{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center}
.splash .cap{position:absolute;top:calc(50% + 96px);left:50%;transform:translateX(-50%);font-size:14px;color:var(--ink2);white-space:nowrap;letter-spacing:-.01em}

/* misc */
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;background:rgba(255,255,255,.1);font-size:13.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
.code{font-family:var(--fm);font-weight:600;letter-spacing:.08em;background:rgba(200,244,58,.15);color:var(--lime);padding:2px 8px;border-radius:8px;cursor:pointer}
.kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:rgba(255,255,255,.12);font:600 12px var(--f);color:var(--ink2);letter-spacing:0}
@media (max-width:919px){.desk-only{display:none!important}}
@media (min-width:920px){.phone-only{display:none!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* legibility of text sitting directly on the wallpaper */
.large,.ghead,.gfoot,.empty,.navtitle{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.55)}
.large p,.gfoot{color:rgba(255,255,255,.72)}
.rolebtn{padding:0 12px 0 4px!important;gap:7px!important;font-size:14.5px!important;font-weight:600!important}
/* controls sitting directly on the wallpaper get their own frosted backing */
.seg,.inp,.chip{-webkit-backdrop-filter:blur(14px) saturate(1.4) brightness(.55);backdrop-filter:blur(14px) saturate(1.4) brightness(.55)}
.seg{background:rgba(20,20,22,.42)}
.inp{background:rgba(20,20,22,.42)}
.chip{background:rgba(20,20,22,.42);color:rgba(255,255,255,.78)}
.chip.on{background:#fff;color:#000}
.gl .seg,.gl .inp,.gl .chip,.sheet .seg,.sheet .inp,.sheet .chip{-webkit-backdrop-filter:none;backdrop-filter:none}
.gl .seg,.gl .inp,.sheet .seg,.sheet .inp{background:rgba(255,255,255,.08)}
.gl .chip,.sheet .chip{background:rgba(255,255,255,.1)}
.gl .chip.on,.sheet .chip.on{background:#fff}
.split > *{min-width:0}
.large p{color:rgba(255,255,255,.86)}
.island{width:max-content;white-space:nowrap}.island > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}.island small{overflow:hidden;text-overflow:ellipsis}
/* вход: нет Telegram / нет доступа / подписка */
.fatal{position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:5}
.fatal-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px 24px 24px;max-width:380px;width:100%;border-radius:34px}
.fatal-card b{font-size:21px;font-weight:650;letter-spacing:-.02em;margin-top:4px}
.fatal-card span{color:var(--ink2);line-height:1.45;font-size:15.5px;white-space:pre-line}
.fatal-card .btn{width:100%}