/* Base styles */
.dark,.screen,body,html{background:#000;color:#e0e0e0}
body,html{margin:0;font-family:Inter,sans-serif;min-height:100vh;-webkit-tap-highlight-color:transparent}
:root{
  --page-slide-dur:220ms;
  --page-fade-dur:180ms;
  --page-slide-distance:12px;
  --page-blur:3px;
  --page-slide-ease:cubic-bezier(0.22,1,0.36,1);
  --page-fade-ease:cubic-bezier(0.22,1,0.36,1);
  --panel-open-dur:360ms;
  --panel-close-dur:260ms;
  --panel-translate-y:10px;
  --panel-blur:2px;
  --panel-ease:cubic-bezier(0.22,1,0.36,1);
  --shake-distance:6px;
  --shake-overshoot:3px;
  --shake-dur-a:80ms;
  --shake-dur-b:60ms;
  --shake-ease:cubic-bezier(0.22,1,0.36,1);
  --revert-hold:3000ms;
  --revert-dur:280ms;
}
header{background:rgba(0,0,0,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:12px 20px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;box-shadow:0 10px 40px rgba(0,0,0,.6)}
header span{color:#fff;font-family:Manrope,sans-serif;font-weight:800;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase}
main{flex:1;max-width:448px;width:100%;margin:0 auto;padding:0 12px 112px;box-sizing:border-box}
nav{position:fixed;bottom:20px;left:0;right:0;z-index:50;padding:0 16px;max-width:480px;margin:0 auto}
nav>div{background:rgba(17,17,17,.6);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border-radius:9999px;border:1px solid rgba(255,255,255,.05);box-shadow:0 20px 40px rgba(0,0,0,.6);display:flex;justify-content:space-around;padding:8px 12px}
nav button{width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a3a3a3;opacity:.6}
nav button.active{color:#fff;opacity:1}
.screen{display:none;flex-direction:column}.screen.active{display:flex}
.screen.active:empty,.screen:empty{display:none}
/* Colors */
.bg-background,.bg-surface-container-lowest,.bg-surface-container-low,.bg-surface-container,.bg-surface,.bg-surface-container-high,.bg-surface-container-highest,.bg-white,.bg-black,#loader,#onboarding,#toast-container{background-color:initial}
.bg-background,.bg-black{background:#000}
.bg-surface-container-low{background:#0d0d0d}
.bg-surface-container{background:#111}
.bg-surface-container-high{background:#1a1a1a}
.bg-surface-container-highest{background:#252525}
.bg-white{background:#fff;color:#000}
.bg-transparent{background:transparent}
/* Text colors */
.text-white,.text-on-surface,.text-on-background,.bg-white .text-white,#loader-text{color:#fff}
.text-black{color:#000}
.text-on-surface-variant,.text-on-surface-variant\/50,.text-on-surface-variant\/60,.text-outline,.text-neutral-400{color:#888}
.text-error,.text-error\/70,.text-error\/60{color:#ff6b6b}
/* Typography */
.font-extrabold{font-weight:800}.font-bold,.font-semibold{font-weight:700}.font-medium{font-weight:500}
.font-headline,.font-headline\!important{font-family:Manrope,sans-serif}
.text-\[9px\],.text-\[10px\],.text-\[11px\],.text-xs{font-size:.75rem}
.text-sm,.text-base{font-size:.875rem}
.text-lg,.text-xl{font-size:1.125rem}
.text-2xl{font-size:1.5rem}
.text-3xl,.text-4xl{font-size:1.875rem}
.text-5xl{font-size:3rem}
.uppercase{text-transform:uppercase}.tracking-widest{letter-spacing:.1em}.tracking-wider{letter-spacing:.05em}.tracking-tight{letter-spacing:-.025em}
.text-center{text-align:center}.text-left{text-align:left}
/* Spacing */
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-7{padding-top:1.75rem}.pb-8{padding-bottom:2rem}.pb-28{padding-bottom:7rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5,.mb-6{margin-bottom:1.5rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6,.mt-10{margin-top:1.5rem}
.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}
/* Layout */
.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}.inline{display:inline}
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}
.flex-1,.flex-auto{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-none{flex:none}.flex-grow{flex-grow:1}.min-w-0{min-width:0}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}
.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
/* Gap */
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}
/* Sizing */
.w-full{width:100%}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-24{width:6rem}
.h-2{height:.5rem}.h-1\.5{height:.375rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-24{height:6rem}
.min-h-dvh{min-height:100dvh}.min-h-\[16px\]{min-height:16px}
.max-w-md{max-width:28rem}.max-w-xs{max-width:20rem}.max-w-full{max-width:100%}
.mx-auto{margin-left:auto;margin-right:auto}
/* Borders */
.border{border-width:1px;border-style:solid}
.border-white\/5{border-color:rgba(255,255,255,.05)}
.border-white\/10{border-color:rgba(255,255,255,.1)}
.border-white\/20{border-color:rgba(255,255,255,.2)}
.border-white\/8{border-color:rgba(255,255,255,.08)}
.border-outline-variant\/10,.border-outline-variant\/20{border-color:rgba(255,255,255,.1)}
.border-error\/20{border-color:rgba(255,107,107,.2)}
.border-2{border-width:2px}
.border-transparent{border-color:transparent}
/* Border radius */
.rounded{border-radius:1rem}.rounded-sm{border-radius:.5rem}.rounded-lg{border-radius:.875rem}.rounded-xl{border-radius:1rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-t-2xl{border-radius:1rem 1rem 0 0}
/* Effects */
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.3)}.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.3)}.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}.shadow-black\/40{box-shadow:0 10px 40px rgba(0,0,0,.4)}.shadow-\[0_20px_40px_rgba\(0\,0\,0\,0\.6\)\]{box-shadow:0 20px 40px rgba(0,0,0,.6)}
.shadow-none{box-shadow:none}
.opacity-10{opacity:.1}.opacity-20{opacity:.2}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}
.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}
.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Text */
.leading-relaxed{line-height:1.625}.leading-none{line-height:1}.leading-tight{line-height:1.25}
/* Transitions */
.transition-all{transition:all .2s}.transition-colors{transition:color .2s,background-color .2s}.transition-transform{transition:transform .1s}.transition-opacity{transition:opacity .2s}
.duration-100{transition-duration:100ms}.duration-200{transition-duration:200ms}.duration-700{transition-duration:700ms}
/* Active states */
.active{transform:scale(.98)}.active\:scale-\[0\.98\]:active{transform:scale(.98)}.active\:scale-95:active{transform:scale(.95)}.active\:opacity-70:active{opacity:.7}.active\:bg-surface-container:active{background:#111}
.hover\:opacity-100:hover{opacity:1}
.disabled\:opacity-30:disabled{opacity:.3}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}
/* Position */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}.top-0{top:0}.right-0{right:0}.bottom-5{bottom:20px}.left-0{left:0}.z-50{z-index:50}.z-\[9997\]{z-index:9997}.z-\[9998\]{z-index:9998}.z-\[9999\]{z-index:9999}
/* Object fit */
.object-cover{object-fit:cover}
/* Cursor */
.cursor-pointer{cursor:pointer}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}
/* Scrollbar */
\::-webkit-scrollbar{width:4px}\::-webkit-scrollbar-track{background:#000}\::-webkit-scrollbar-thumb{background:#353535;border-radius:10px}
/* Material Icons */
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr}
.icon-fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
/* Links */
.underline{text-decoration:underline}a{color:inherit;text-decoration:none}button{background:none;border:none;cursor:pointer;font:inherit;color:inherit}
button,a,label,summary,input,textarea,select,[role=button]{-webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit;background:transparent;border:none;outline:none}
input:focus,textarea:focus,select:focus{outline:none}
/* Screen specific */
#loader,#onboarding,#toast-container{display:none}
#loader.active,#onboarding.active{display:flex}
#loader{position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:24px}
#onboarding{position:fixed;inset:0;z-index:10000;flex-direction:column}
#toast-container{position:fixed;top:max(16px,calc(var(--safe-top,0px) + 16px));left:50%;transform:translateX(-50%);z-index:10001;flex-direction:column;gap:8px;width:calc(100% - 32px);max-width:400px;pointer-events:none}
/* Screen padding - use direct values to avoid override issues */
#screen-home,#screen-about,#screen-keys,#screen-create,#screen-key-detail{padding-top:1.5rem}
.home-info-card{background:#141414;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.home-info-divider{height:1px;background:rgba(255,255,255,.06);margin:11px 0}
.traffic-chart-block{display:flex;flex-direction:column;padding-top:2px}
.traffic-chart-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:30px;padding:0;text-align:left}
.traffic-chart-title{display:flex;align-items:center;gap:6px;min-width:0}
.traffic-chart-chevron{color:rgba(255,255,255,.58);font-size:18px;transition:transform .32s cubic-bezier(.32,.72,0,1),color .2s ease}
.traffic-chart-toggle:active .traffic-chart-chevron{color:#fff}
.traffic-chart-block.is-open .traffic-chart-chevron{transform:rotate(180deg);color:#fff}
.traffic-chart-total{font-family:Manrope,sans-serif;font-size:1.05rem;font-weight:800;line-height:1;letter-spacing:0}
.traffic-chart-content{max-height:0;opacity:0;overflow:hidden;pointer-events:none;transform:translateY(var(--panel-translate-y));filter:blur(var(--panel-blur));transition:max-height var(--panel-close-dur) var(--panel-ease),opacity var(--panel-close-dur) var(--panel-ease),margin-top var(--panel-close-dur) var(--panel-ease),transform var(--panel-close-dur) var(--panel-ease),filter var(--panel-close-dur) var(--panel-ease);margin-top:0;will-change:max-height,opacity,transform,filter}
.traffic-chart-block.is-open .traffic-chart-content{max-height:220px;opacity:1;margin-top:10px;pointer-events:auto;transform:translateY(0);filter:blur(0);transition:max-height var(--panel-open-dur) var(--panel-ease),opacity var(--panel-open-dur) var(--panel-ease),margin-top var(--panel-open-dur) var(--panel-ease),transform var(--panel-open-dur) var(--panel-ease),filter var(--panel-open-dur) var(--panel-ease)}
.line-chart{width:100%;opacity:0;animation:traffic-chart-fade-in 600ms cubic-bezier(.57,.25,.65,1) 1 forwards}
.aspect-ratio{position:relative;width:100%;height:0;padding-bottom:46%}
.aspect-ratio canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.traffic-chart-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:rgba(255,255,255,.46);font-size:.68rem;font-weight:700;line-height:1;text-transform:uppercase}
.traffic-chart-meta span:nth-child(2){color:rgba(255,255,255,.62);letter-spacing:.08em}
.key-traffic-chart-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px 11px}
.key-traffic-chart-total{font-family:Manrope,sans-serif;font-size:.95rem;font-weight:800;line-height:1;letter-spacing:0}
.key-line-chart{margin-top:8px}
.key-chart-ratio{padding-bottom:36%}
@keyframes traffic-chart-fade-in{to{opacity:1}}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.58)}}.dot-loading{animation:dot-pulse 1.4s ease-in-out infinite}
/* Glass effect */
.glass{background:rgba(27,27,27,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* Toast */
.toast{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:12px;padding:14px 16px 17px;border-radius:12px;background:#1a1a1a;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px rgba(0,0,0,.5);opacity:0;transform:translateY(-20px) scale(.95);transition:all .35s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;backdrop-filter:blur(12px)}
.toast.visible{opacity:1;transform:translateY(0) scale(1)}
.toast.hiding{opacity:0;transform:translateY(-10px) scale(.95)}
.toast-icon{font-size:20px;flex-shrink:0;margin-top:1px}.toast-content{flex:1;min-width:0}.toast-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px}.toast-message{font-size:12px;color:#888;line-height:1.4}
.toast-warning .toast-icon{color:#f59e0b}.toast-info .toast-icon{color:#3b82f6}.toast-error .toast-icon{color:#ef4444}.toast-success .toast-icon{color:#22c55e}
.toast-timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.38);transform-origin:left center;transform:scaleX(1)}
.toast-timer.toast-timer-active{animation:toast-timer-shrink var(--toast-duration,15000ms) linear forwards}
.toast-warning .toast-timer{background:#f59e0b}.toast-info .toast-timer{background:#3b82f6}.toast-error .toast-timer{background:#ef4444}.toast-success .toast-timer{background:#22c55e}
@keyframes toast-timer-shrink{to{transform:scaleX(0)}}
/* Modal */
#activation-modal{pointer-events:none;visibility:hidden}#activation-modal.is-open{pointer-events:auto;visibility:visible!important}#modal-sheet{transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1)}
/* Key sheet */
#key-sheet-overlay{pointer-events:none;visibility:hidden}#key-sheet-overlay.is-open{pointer-events:auto;visibility:visible!important}
#key-sheet-backdrop{opacity:0;transition:opacity .3s ease}
#key-sheet{height:min(92dvh,calc(100dvh - max(18px,var(--safe-top,0px) + 10px)));display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1)}
#key-sheet.no-transition{transition:none}
#key-sheet-scroll{flex:1;min-height:0;padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet-handle{position:relative;z-index:3;flex:0 0 auto;background:linear-gradient(180deg,rgba(13,13,13,.98),rgba(13,13,13,.86));touch-action:none}
.sheet-handle-bar{width:48px;height:5px;border-radius:999px;background:rgba(255,255,255,.42);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 14px rgba(0,0,0,.35)}
/* Config block */
.cfg-block{background:rgba(0,0,0,.4);border-radius:12px;padding:14px;font-size:11.5px;font-family:monospace;white-space:pre-wrap;word-break:break-all;color:rgba(255,255,255,.85);max-height:160px;overflow-y:auto;line-height:1.6}
/* QR overlay */
#qr-overlay{display:none;position:fixed;inset:0;z-index:9999;flex-direction:column;align-items:center;justify-content:center;background:#000;cursor:pointer}
#qr-overlay.active,#qr-overlay:not([style*="display"]){display:flex}
/* Space helpers */
.space-x-2>*{margin-left:.5rem}.space-x-2>:first-child{margin-left:0}.-space-x-2>*{margin-left:-.5rem}.-space-x-2>:first-child{margin-left:0}
/* Grid */
.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Sizing extras */
.h-full{height:100%}.h-px{height:1px}.h-10{height:2.5rem}.h-44{height:11rem}.w-2{width:.5rem}.w-1\.5{width:.375rem}.w-44{width:11rem}.w-\[85vmin\]{width:85vmin}.h-\[85vmin\]{height:85vmin}.max-w-sm{max-width:24rem}.ml-auto{margin-left:auto}.my-3{margin-top:.75rem;margin-bottom:.75rem}.mt-5{margin-top:1.25rem}.mb-8{margin-bottom:2rem}.mb-0\.5{margin-bottom:.125rem}.mt-0\.5{margin-top:.125rem}.pt-0\.5{padding-top:.125rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-10{padding-bottom:2.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.p-2\.5{padding:.625rem}.gap-1\.5{gap:.375rem}.gap-2\.5{gap:.625rem}.gap-7{gap:1.75rem}.min-h-\[14px\]{min-height:14px}
/* Typography extras */
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.font-black{font-weight:900}.font-normal{font-weight:400}.tabular-nums{font-variant-numeric:tabular-nums}.break-all{word-break:break-all}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.25em\]{letter-spacing:.25em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.text-surface-container-highest{color:#252525}
/* Colors with opacity */
.bg-black\/10{background:rgba(0,0,0,.1)}.bg-black\/70{background:rgba(0,0,0,.7)}.bg-black\/75{background:rgba(0,0,0,.75)}.bg-background\/80{background:rgba(0,0,0,.8)}.bg-white\/10{background:rgba(255,255,255,.1)}.bg-white\/25{background:rgba(255,255,255,.25)}.bg-surface-container-low\/60{background:rgba(13,13,13,.6)}.bg-outline-variant\/20{background:rgba(34,34,34,.2)}.text-on-surface-variant\/50{color:rgba(136,136,136,.5)}.text-on-surface-variant\/60{color:rgba(136,136,136,.6)}.text-error\/60{color:rgba(255,107,107,.6)}.text-error\/70{color:rgba(255,107,107,.7)}.border-background{border-color:#000}.border-b{border-bottom-width:1px;border-bottom-style:solid}.border-error\/20{border-color:rgba(255,107,107,.2)}.border-outline-variant\/10{border-color:rgba(34,34,34,.1)}
/* Backdrop blur */
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.backdrop-blur-2xl{backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px)}
/* Gradients */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}.from-surface-container-low{--tw-gradient-from:#0d0d0d;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}.via-black\/5{--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.05),var(--tw-gradient-to,transparent)}.to-transparent{--tw-gradient-to:transparent}
/* Misc */
.justify-around{justify-content:space-around}.outline-none{outline:none}.focus\:outline-none:focus{outline:none}.focus\:border-white:focus{border-color:#fff}.hover\:text-white:hover{color:#fff}.active\:opacity-70:active{opacity:.7}.active\:scale-95:active{transform:scale(.95)}.active\:scale-\[0\.98\]:active{transform:scale(.98)}.active\:cursor-grabbing:active{cursor:grabbing}.active\:text-white:active{color:#fff}.active\:bg-surface-container:active{background:#111}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.placeholder-on-surface-variant\/40::placeholder{color:rgba(136,136,136,.4)}.group-hover\:bg-white:hover .group-hover\:bg-white,.group:hover .group-hover\:bg-white{background:#fff}.group:hover .group-hover\:opacity-20{opacity:.2}.group:hover .group-hover\:text-black{color:#000}.group:hover .group-hover\:translate-x-\[100\%\]{transform:translateX(100%)}.translate-x-\[-100\%\]{transform:translateX(-100%)}.app-link{color:inherit;text-decoration:none}

* { box-sizing: border-box; }
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  .icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  body {
    background-color: #000000;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    overflow-x: hidden;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .screen {
    display: none;
    flex-direction: column;
  }
  main > div {
    position: relative;
  }
  .screen.active,
  .screen.screen-enter {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .screen.screen-enter {
    animation: screen-slide-in var(--page-slide-dur) var(--page-slide-ease) both;
    will-change: opacity, transform, filter;
  }
  .screen.screen-exit {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    pointer-events: none;
    animation: screen-slide-out var(--page-fade-dur) var(--page-fade-ease) both;
    will-change: opacity, transform, filter;
  }
  .screen.active {
    position: relative;
    z-index: 1;
  }
  .screen.active.screen-exit {
    position: absolute;
    z-index: 0;
  }
  @keyframes screen-slide-in {
    from {
      opacity: 0;
      transform: translate3d(var(--screen-enter-x, 12px), 0, 0);
      filter: blur(var(--page-blur));
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: blur(0);
    }
  }
  @keyframes screen-slide-out {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: blur(0);
    }
    to {
      opacity: 0;
      transform: translate3d(var(--screen-exit-x, -12px), 0, 0);
      filter: blur(var(--page-blur));
    }
  }

  #auth-code-inputs,
  #key-label {
    transition: border-color 150ms ease-out, box-shadow var(--revert-dur) ease-out;
    will-change: transform;
  }
  #screen-home.home-auth-only > :not(#auth-prompt):not(#tg-link-widget-bank) {
    display: none !important;
  }
  #auth-code-inputs.is-error .auth-digit,
  #key-label.is-error {
    border-color: rgba(255, 107, 107, 0.72) !important;
    box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.22), 0 0 0 4px rgba(255, 107, 107, 0.08);
  }
  #auth-code-inputs.is-shaking,
  #key-label.is-shaking {
    animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
  }
  #auth-err,
  #create-err {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--revert-dur) ease-out, visibility 0s linear var(--revert-dur);
  }
  #auth-err:not(:empty),
  #auth-err.is-error-visible,
  #create-err:not(:empty),
  #create-err.is-error-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  @keyframes t-input-shake {
    0% { transform: translateX(0); animation-timing-function: var(--shake-ease); }
    28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
    57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
    78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
    100% { transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .screen.screen-enter,
    .screen.screen-exit,
    #auth-code-inputs.is-shaking,
    #key-label.is-shaking {
      animation: none !important;
      transform: none !important;
      filter: none !important;
    }
    .traffic-chart-content {
      transition: none !important;
      transform: none !important;
      filter: none !important;
    }
  }

  /* Phrase loader copied from the referenced SVG/checkmark logic, adapted to black */
  #loader .stage {
    width: min(54vw, 220px);
    height: min(60vw, 242px);
    overflow: visible;
    fill: #fff;
    position: relative;
  }
  #loader-status-text {
    width: min(320px, calc(100vw - 48px));
    min-height: 18px;
    color: rgba(255,255,255,0.72);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    margin: 0;
    transition: opacity 0.22s ease;
  }

  /* Loader overlay */
  #loader {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: #000000;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 28px;
  }
  #loader.active { display: flex; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: #000000; }
  ::-webkit-scrollbar-thumb { background: #353535; border-radius: 10px; }

  /* Glass panel */
  .glass {
    background: rgba(27, 27, 27, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  /* Pulse glow */
  .pulse-glow {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.04);
  }

  /* Config block */
  .cfg-block {
    background: rgba(0,0,0,0.4);
    border-radius: 12px; padding: 14px;
    font-size: 11.5px; font-family: monospace;
    white-space: pre-wrap; word-break: break-all;
    color: rgba(255,255,255,0.85);
    max-height: 160px; overflow-y: auto;
    line-height: 1.6;
  }

  /* Active nav icon */
  .nav-active {
    color: #050505;
    opacity: 1;
    text-shadow: none;
  }

  #bottom-nav {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 0 42px;
    max-width: 340px;
  }
  #bottom-nav .liquid-nav-shell {
    --nav-index: 0;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    height: 54px;
    padding: 5px 6px;
    overflow: hidden;
    border-radius: 999px;
    border: 0.5px solid rgba(255,255,255,0.14);
    background: rgba(18,18,18,0.28);
    backdrop-filter: url(#nav-liquid-filter) blur(5px) saturate(1.18) contrast(1.03);
    -webkit-backdrop-filter: url(#nav-liquid-filter) blur(5px) saturate(1.18) contrast(1.03);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.15),
      inset 0 -1px 0 rgba(255,255,255,0.05),
      inset 0 -14px 24px rgba(0,0,0,0.16),
      0 10px 28px rgba(0,0,0,0.48);
  }
  .nav-liquid-filtered {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 28%, rgba(255,255,255,0.035) 72%, rgba(255,255,255,0.06)),
      rgba(255,255,255,0.018);
    opacity: 1;
    pointer-events: none;
  }
  #bottom-nav .liquid-nav-shell::before {
    content: none;
    position: absolute;
    inset: 1px 2px auto;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.09), transparent);
    pointer-events: none;
    z-index: 0;
  }
  #bottom-nav .liquid-nav-shell::after {
    content: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(circle at 16% 20%, rgba(255,255,255,0.07), transparent 28%),
      radial-gradient(circle at 82% 82%, rgba(255,255,255,0.04), transparent 32%);
    mix-blend-mode: screen;
    opacity: 0.42;
    pointer-events: none;
    z-index: 0;
  }
  .nav-liquid-indicator {
    position: absolute;
    z-index: 1;
    top: 5px;
    bottom: 5px;
    left: 6px;
    width: calc((100% - 12px) / 4);
    border-radius: 999px;
    background: rgba(255,255,255,0.46);
    backdrop-filter: url(#nav-liquid-filter) blur(3px) saturate(1.14) contrast(1.02);
    -webkit-backdrop-filter: url(#nav-liquid-filter) blur(3px) saturate(1.14) contrast(1.02);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.62),
      inset 0 -1px 0 rgba(0,0,0,0.08),
      inset 0 -12px 16px rgba(0,0,0,0.08),
      0 8px 18px rgba(0,0,0,0.16);
    transform: translateX(calc(var(--nav-index) * 100%));
    transition: transform 0.42s cubic-bezier(0.2, 0.95, 0.22, 1);
    pointer-events: none;
  }
  .nav-liquid-indicator::before,
  .nav-liquid-indicator::after {
    content: none;
    position: absolute;
    top: 50%;
    width: 18px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255,255,255,0.34);
    filter: blur(9px);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.22s ease;
  }
  .nav-liquid-indicator::before { left: -8px; }
  .nav-liquid-indicator::after { right: -8px; }
  #bottom-nav .liquid-nav-shell:active .nav-liquid-indicator::before,
  #bottom-nav .liquid-nav-shell:active .nav-liquid-indicator::after {
    opacity: 1;
  }
  #bottom-nav .nav-btn {
    position: relative;
    z-index: 2;
    width: auto;
    height: 44px;
    min-width: 0;
    border-radius: 999px;
    color: rgba(255,255,255,0.62);
    opacity: 1;
    transition: color 0.24s ease, transform 0.14s ease;
  }
  #bottom-nav .nav-btn:active {
    transform: scale(0.96);
  }
  #bottom-nav .nav-icon {
    font-size: 20px;
    transition: transform 0.26s cubic-bezier(0.2,0.85,0.22,1), color 0.22s ease, font-variation-settings 0.22s ease;
  }
  #bottom-nav .nav-btn.nav-active .nav-icon {
    transform: translateY(-1px) scale(1.06);
    color: #050505;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
  }
  .nav-liquid-svg {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  @supports not ((backdrop-filter: url(#nav-liquid-filter)) or (-webkit-backdrop-filter: url(#nav-liquid-filter))) {
    #bottom-nav .liquid-nav-shell {
      backdrop-filter: blur(6px) saturate(1.12);
      -webkit-backdrop-filter: blur(6px) saturate(1.12);
    }
    .nav-liquid-indicator {
      backdrop-filter: blur(3px) saturate(1.16);
      -webkit-backdrop-filter: blur(3px) saturate(1.16);
    }
  }

  /* Webapp: Telegram already shows app name in its native bar — hide our header */
  .is-webapp header {
    display: none;
  }
  .is-webapp #auth-prompt {
    display: none !important;
  }
  /* Webapp: push content below Telegram's header bar */
  .is-webapp main {
    padding-top: var(--safe-top, 0px);
  }

  /* Activation modal */
  #activation-modal { pointer-events: none; visibility: hidden; }
  #activation-modal.is-open { pointer-events: auto; visibility: visible !important; }
  #modal-backdrop {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #modal-sheet {
    transform: translateY(100%);
    transition:
      transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
      min-height 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
    max-height: calc(100dvh - max(12px, var(--safe-top, 0px)));
    display: flex;
    flex-direction: column;
  }
  #activation-modal.is-connect-modal #modal-sheet {
    --connect-sheet-expanded-height: calc(100dvh - max(8px, calc(var(--safe-top, 0px) + 6px)));
    min-height: min(78dvh, 640px);
    max-height: var(--connect-sheet-expanded-height);
  }
  #activation-modal.is-connect-modal #modal-sheet.is-expanded {
    min-height: var(--connect-sheet-expanded-height);
  }
  #modal-sheet.no-transition {
    transition: none !important;
  }
  #modal-steps {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #activation-modal.is-connect-modal #modal-steps {
    overflow-y: auto;
    gap: 14px;
  }

  .connect-device-tabs {
    --device-count: 5;
    --active-index: 0;
    flex: 0 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--device-count), minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    padding: 3px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    background: #050505;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .connect-device-indicator {
    position: absolute;
    z-index: 1;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--device-count));
    border-radius: 999px;
    background: #fff;
    transform: translateX(calc(var(--active-index) * 100%));
    transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.2, 1);
    pointer-events: none;
  }
  .connect-app-list {
    interpolate-size: allow-keywords;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.16s ease, transform 0.2s ease, min-height 0.24s cubic-bezier(0.2, 0.85, 0.22, 1);
    will-change: opacity, transform;
  }
  .connect-app-list-title {
    flex: 0 0 auto;
    margin: 0 0 8px;
    color: rgba(255,255,255,0.48);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .connect-app-list.is-switching {
    opacity: 0;
    transform: translateY(6px);
  }
  .connect-primary-panel,
  .connect-next-steps,
  .connect-supported-apps {
    flex: 0 0 auto;
  }
  .connect-primary-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 4px;
  }
  .connect-primary-note {
    margin: 0;
    color: rgba(255,255,255,0.58);
    font-size: 12px;
    line-height: 1.5;
  }
  .connect-primary-note strong {
    color: #fff;
    font-weight: 800;
  }
  .connect-next-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .connect-step-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    color: rgba(255,255,255,0.58);
    font-size: 12px;
    line-height: 1.45;
  }
  .connect-step-row span {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.72);
    font-size: 11px;
    font-weight: 900;
  }
  .connect-supported-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .connect-supported-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
  }
  .connect-supported-row > .material-symbols-outlined {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.62);
    font-size: 20px;
  }
  .connect-supported-row p {
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
  }
  .connect-supported-row small {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,0.46);
    font-size: 10.5px;
    line-height: 1.25;
  }
  .connect-device-tab {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 34px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #888;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.22s ease, opacity 0.22s ease, transform 0.12s ease;
  }
  .connect-device-tab:active {
    transform: scale(0.98);
  }
  .connect-device-tab.is-active {
    color: #000;
  }
  .qr-overlay-content {
    width: min(100%, 380px);
    max-height: calc(100dvh - max(28px, var(--safe-top, 0px)) - max(28px, env(safe-area-inset-bottom, 0px)));
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  #qr-full {
    --qr-size: min(85vmin, 340px, calc(100dvh - 168px - max(20px, var(--safe-top, 0px)) - max(20px, env(safe-area-inset-bottom, 0px))));
    width: var(--qr-size);
    height: var(--qr-size);
    max-width: 100%;
    object-fit: contain;
    flex: 0 0 auto;
  }
  .qr-format-tabs {
    --device-count: 2;
    width: min(100%, 310px);
    margin: 20px 0 0;
    cursor: default;
  }
  .qr-format-tabs .connect-device-tab {
    min-height: 36px;
    font-size: 11px;
  }
  .qr-format-tabs .connect-device-tab:disabled {
    opacity: 0.34;
    cursor: not-allowed;
  }
  .qr-overlay-hint {
    margin: 14px 0 0;
  }
  .connect-app-card {
    flex: 0 0 auto;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .connect-app-card[open] {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
  }
  .connect-app-summary {
    min-height: 66px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
  }
  .connect-app-summary::-webkit-details-marker {
    display: none;
  }
  .connect-app-chevron {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.62);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.24s cubic-bezier(0.2, 0.85, 0.22, 1), background 0.18s ease, color 0.18s ease;
  }
  .connect-app-card[open] .connect-app-chevron {
    background: #fff;
    color: #000;
    transform: rotate(180deg);
  }
  .connect-app-body {
    padding: 0 12px;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.26s cubic-bezier(0.2, 0.85, 0.22, 1), opacity 0.18s ease, padding-bottom 0.26s cubic-bezier(0.2, 0.85, 0.22, 1);
  }
  .connect-app-card[open] .connect-app-body {
    height: auto;
    opacity: 1;
    padding-bottom: 12px;
  }
  .connect-app-body-inner {
    overflow: hidden;
  }
  .connect-app-note {
    overflow: hidden;
    margin: 0 0 10px;
    color: rgba(255,255,255,0.52);
    font-size: 11.5px;
    line-height: 1.45;
  }
  .connect-app-logo-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
  }
  .connect-app-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .connect-app-logo-fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.55);
    font-size: 22px;
  }
  .connect-config-btn,
  .connect-secondary-btn,
  .connect-code-btn {
    min-height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    transition: transform 0.12s ease, opacity 0.12s ease;
  }
  .connect-config-btn:active,
  .connect-secondary-btn:active,
  .connect-code-btn:active {
    transform: scale(0.98);
  }
  .connect-install-link {
    flex: 0 0 auto;
    min-height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    background: rgba(255,255,255,0.04);
    color: #aaa;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 11px;
    font-weight: 800;
    transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease;
  }
  .connect-install-link:active {
    transform: scale(0.96);
  }
  .connect-install-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
  }
  .connect-config-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .connect-config-btn {
    background: #fff;
    color: #000;
  }
  .connect-secondary-btn {
    background: rgba(255,255,255,0.03);
    color: #aaa;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .connect-code-btn {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 4px;
    background: transparent;
    color: #888;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .connect-config-btn:disabled,
  .connect-secondary-btn:disabled,
  .connect-code-btn:disabled {
    opacity: 0.5;
  }

  .connection-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .connection-section {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    background: #111;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  }
  .connection-section-primary {
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  }
  .connection-section-transfer {
    background: rgba(255,255,255,0.025);
  }
  .connection-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .connection-section-title {
    overflow: hidden;
    margin: 0;
    color: #fff;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .connection-section-copy {
    margin: 10px 0 12px;
    color: rgba(255,255,255,0.56);
    font-size: 12px;
    line-height: 1.45;
  }
  .connect-config-btn-main {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font-size: 14px;
    gap: 8px;
  }
  .connection-inline-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }
  .connection-status-line {
    min-height: 16px;
    margin: 8px 0 0;
    color: rgba(255,255,255,0.52);
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
  }
  .connection-status-line.is-error {
    color: #ff6b6b;
  }
  .connection-help-btn {
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.035);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  }
  .connection-help-btn:active,
  .connection-code-request:active {
    transform: scale(0.98);
  }
  .connection-help-arrow {
    color: rgba(255,255,255,0.46);
    font-size: 18px;
  }
  .connection-code-request {
    width: 100%;
    min-height: 42px;
    margin-top: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,0.045);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .connection-code-request:disabled {
    opacity: 0.3;
  }
  .connection-code-error {
    min-height: 14px;
    margin: 8px 0 0;
    color: #ff6b6b;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
  }

  /* Shimmer on buttons */
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  .shimmer::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
    animation: shimmer 2s infinite;
  }

  /* ── Onboarding overlay ─────────────────────────────────── */
  #onboarding {
    display: none;
    position: fixed; inset: 0; z-index: 10000;
    background: #000000;
    flex-direction: column;
  }
  #onboarding.active { display: flex; }
  #onboarding.ob-fade-out { animation: ob-fadeout 0.4s ease forwards; }
  @keyframes ob-fadeout {
    to { opacity: 0; transform: scale(0.97); }
  }
  .ob-topbar {
    flex: 0 0 auto;
  }
  .is-webapp .ob-topbar {
    padding-top: max(20px, calc(var(--safe-top, 0px) + 12px));
    min-height: calc(44px + max(0px, var(--safe-top, 0px))) !important;
  }
  #ob-slides-wrapper {
    position: relative; flex: 1; overflow: hidden;
    min-height: 0;
  }
  .ob-slide {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    transform: translateX(100%); opacity: 0;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                opacity   0.35s ease;
    will-change: transform, opacity;
  }
  .ob-slide.ob-left  { transform: translateX(-100%); opacity: 0; }
  .ob-slide.ob-right { transform: translateX(100%);  opacity: 0; }
  .ob-slide.active   { transform: translateX(0);     opacity: 1; }
  .ob-install-content {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 16px;
    padding-top: 6px;
  }
  .ob-install-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .ob-install-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .ob-install-tabs {
    --active-index: 0;
    --device-count: 3;
    flex: 0 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--device-count), minmax(0, 1fr));
    padding: 3px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    background: #050505;
  }
  .ob-install-tabs::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--device-count));
    border-radius: 999px;
    background: #fff;
    transform: translateX(calc(var(--active-index) * 100%));
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
  }
  .ob-install-tab {
    position: relative;
    z-index: 2;
    min-height: 34px;
    color: #888;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    transition: color 0.18s ease, transform 0.12s ease;
  }
  .ob-install-tab.is-active {
    color: #000;
  }
  .ob-install-apps {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
    padding-bottom: 12px;
  }
  .ob-install-card {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    text-align: left;
  }
  .ob-install-card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ob-install-card__note {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ob-install-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .ob-install-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ob-install-card__download {
    min-height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    background: rgba(255,255,255,0.04);
    color: #aaa;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 11px;
    font-weight: 800;
    transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease;
  }
  .ob-install-card__download:active {
    transform: scale(0.96);
  }
  @media (max-height: 720px) {
    #ob-slide-1 h2 {
      font-size: 1.25rem;
      line-height: 1.15;
    }
    #ob-slide-1 .ob-install-content {
      gap: 12px;
      padding-bottom: 8px;
    }
    .ob-install-header {
      gap: 10px;
    }
    #ob-slide-1 .w-16.h-16 {
      width: 52px;
      height: 52px;
    }
    .ob-install-card {
      min-height: 62px;
      padding: 9px 10px;
    }
  }
  .ob-dot {
    transition: all 0.3s ease;
    cursor: pointer;
    /* larger tap area */
    padding: 6px;
    margin: -6px;
  }

  /* Toast Popup */
  #toast-container {
    position: fixed;
    top: max(16px, calc(var(--safe-top, 0px) + 16px));
    left: 50%; transform: translateX(-50%);
    z-index: 10001; display: flex; flex-direction: column; gap: 8px;
    width: calc(100% - 32px); max-width: 400px; pointer-events: none;
  }
  .toast {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px 17px; border-radius: 12px;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    opacity: 0; transform: translateY(-20px) scale(0.95);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto; backdrop-filter: blur(12px);
  }
  .toast.visible { opacity: 1; transform: translateY(0) scale(1); }
  .toast.hiding { opacity: 0; transform: translateY(-10px) scale(0.95); }
  .toast-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
  .toast-content { flex: 1; min-width: 0; }
  .toast-title { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px; }
  .toast-message { font-size: 12px; color: #888; line-height: 1.4; }
  .toast-timer {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(255,255,255,0.38);
    transform-origin: left center; transform: scaleX(1);
  }
  .toast-timer.toast-timer-active {
    animation: toast-timer-shrink var(--toast-duration, 15000ms) linear forwards;
  }
  .toast-warning .toast-timer { background: #f59e0b; }
  .toast-info .toast-timer { background: #3b82f6; }
  .toast-error .toast-timer { background: #ef4444; }
  .toast-success .toast-timer { background: #22c55e; }
  @keyframes toast-timer-shrink { to { transform: scaleX(0); } }
  .toast-close {
    background: none; border: none; padding: 4px; cursor: pointer;
    color: #666; font-size: 18px; line-height: 1; flex-shrink: 0;
    border-radius: 6px; transition: all 0.2s;
  }
  .toast-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
  .toast-warning .toast-icon { color: #f59e0b; }
  .toast-info .toast-icon { color: #3b82f6; }
  .toast-error .toast-icon { color: #ef4444; }
  .toast-success .toast-icon { color: #22c55e; }

/* ── Curved Scrollbar ───────────────────────────────────────── */
body{timeline-scope:--main-scroll}
main{scroll-timeline:--main-scroll y;scrollbar-width:none}
main::-webkit-scrollbar{display:none}
#curved-scrollbar{position:fixed;width:40px;pointer-events:none;z-index:45;overflow:visible;opacity:0;transition:opacity .45s ease}
#curved-scrollbar.cscroll-on{opacity:1;transition:opacity .1s ease}
.cscroll-track,.cscroll-thumb{stroke-width:4px;fill:none;stroke-linecap:round}
.cscroll-track{stroke:rgba(255,255,255,.07)}
.cscroll-thumb{stroke:rgba(255,255,255,.58);stroke-dasharray:var(--csthumb,64) var(--cstrk,9999)}
@supports (animation-timeline:scroll()){.cscroll-thumb{animation:cscroll-anim both linear;animation-timeline:--main-scroll}}

#key-sheet-overlay{z-index:9997}
#activation-modal{z-index:9998}
#rename-modal,#qr-overlay{z-index:9999}

/* Desktop adaptive layout */
@media (min-width: 900px) {
  :root {
    --desktop-nav-width: 248px;
    --desktop-page-max: 1180px;
    --desktop-gutter: clamp(28px, 4vw, 64px);
    --desktop-panel: rgba(17,17,17,0.78);
    --desktop-panel-soft: rgba(255,255,255,0.035);
    --desktop-line: rgba(255,255,255,0.08);
    --desktop-line-strong: rgba(255,255,255,0.14);
  }

  html,
  body {
    min-width: 900px;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 72px 72px,
      linear-gradient(180deg, rgba(255,255,255,0.026) 1px, transparent 1px) 0 0 / 72px 72px,
      #050505;
  }

  body {
    display: block;
    color: #f1f1f1;
  }

  header {
    min-height: 68px;
    margin-left: var(--desktop-nav-width);
    padding: 0 var(--desktop-gutter);
    border-bottom: 1px solid var(--desktop-line);
    background: rgba(5,5,5,0.82);
    box-shadow: none;
  }

  header > div {
    max-width: var(--desktop-page-max) !important;
    min-height: 68px;
    padding: 0 !important;
    justify-content: flex-end !important;
  }

  header > div > span:first-child {
    display: none;
  }

  main {
    max-width: none;
    width: auto;
    height: calc(100dvh - 68px);
    margin: 0 0 0 var(--desktop-nav-width);
    padding: 30px var(--desktop-gutter) 56px;
    overflow-y: auto;
  }

  .is-webapp main {
    height: 100dvh;
    padding-top: max(30px, calc(var(--safe-top, 0px) + 24px));
  }

  main > .max-w-md {
    max-width: var(--desktop-page-max);
    margin: 0 auto;
  }

  #screen-home,
  #screen-about,
  #screen-keys,
  #screen-create,
  #screen-key-detail {
    padding: 0 !important;
  }

  .screen.active,
  .screen.screen-enter,
  .screen.screen-exit {
    gap: 0;
  }

  #bottom-nav {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: var(--desktop-nav-width);
    max-width: none;
    height: 100dvh;
    margin: 0;
    padding: 22px 16px;
    border-right: 1px solid var(--desktop-line);
    background: rgba(7,7,7,0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  #bottom-nav::before {
    content: "ShadowPass";
    display: block;
    margin: 4px 10px 28px;
    color: #fff;
    font-family: Manrope, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #bottom-nav::after {
    content: "VPN dashboard";
    position: absolute;
    left: 26px;
    bottom: 24px;
    color: rgba(255,255,255,0.34);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  #bottom-nav .liquid-nav-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 56px);
    gap: 8px;
    height: auto;
    padding: 6px;
    border-radius: 18px;
    border-color: var(--desktop-line-strong);
    background: rgba(255,255,255,0.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-liquid-filtered {
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  }

  .nav-liquid-indicator {
    top: 6px;
    right: 6px;
    bottom: auto;
    left: 6px;
    width: auto;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff, #dff7ff);
    transform: translateY(calc(var(--nav-index) * 64px));
  }

  #bottom-nav .nav-btn {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 12px;
    width: 100%;
    height: 56px;
    padding: 0 15px;
    border-radius: 14px;
    text-align: left;
  }

  #bottom-nav .nav-btn::after {
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #bottom-nav .nav-btn[data-tab="home"]::after { content: "Главная"; }
  #bottom-nav .nav-btn[data-tab="keys"]::after { content: "Туннели"; }
  #bottom-nav .nav-btn[data-tab="create"]::after { content: "Создать"; }
  #bottom-nav .nav-btn[data-tab="about"]::after { content: "О сервисе"; }

  #bottom-nav .nav-icon {
    font-size: 22px;
  }

  #bottom-nav .nav-btn.nav-active {
    color: #050505;
  }

  #bottom-nav .nav-btn.nav-active .nav-icon {
    transform: none;
  }

  .nav-liquid-svg {
    display: none;
  }

  #toast-container {
    top: 22px;
    right: 24px;
    left: auto;
    width: min(420px, calc(100vw - var(--desktop-nav-width) - 48px));
    transform: none;
  }

  #screen-home.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    align-items: start;
    gap: 18px 22px;
  }

  #screen-home > #auth-prompt,
  #screen-home > #tg-link-widget-bank,
  #screen-home > #greeting-section {
    grid-column: 1 / -1;
  }

  #auth-prompt {
    width: min(520px, 100%);
    margin: 8vh auto 0;
  }

  #greeting-section {
    margin-bottom: 8px;
  }

  #greeting-name {
    font-size: clamp(2.15rem, 3vw, 3.35rem);
    line-height: 1.02;
  }

  #home-account-summary,
  #screen-home > .flex.flex-col.gap-3,
  #btn-howto,
  #access-section,
  #screen-home > .mt-10 {
    border-radius: 16px;
  }

  #home-account-summary {
    margin-bottom: 0;
    padding: 18px;
    background: var(--desktop-panel);
    border-color: var(--desktop-line);
  }

  #screen-home > .flex.flex-col.gap-3 {
    gap: 12px;
  }

  #btn-create,
  #btn-keys {
    min-height: 108px;
    padding: 22px;
    border-radius: 16px;
  }

  #btn-howto {
    min-height: 58px;
    margin-top: 0;
    padding: 0 20px;
  }

  #access-section {
    grid-column: 2;
    grid-row: 2 / span 4;
    margin-top: 0;
    padding: 22px;
    background: var(--desktop-panel);
    border-color: var(--desktop-line);
  }

  #access-section .grid-cols-2 {
    gap: 12px;
  }

  #access-section .grid-cols-2 > button {
    min-height: 116px;
    border: 1px solid var(--desktop-line);
  }

  #screen-home > .mt-10 {
    grid-column: 2;
    margin-top: 0;
    opacity: 0.32;
  }

  .traffic-chart-block.is-open .traffic-chart-content {
    max-height: 280px;
  }

  #screen-keys.active {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 18px;
  }

  #screen-keys > .flex.items-center {
    grid-column: 1;
    margin-bottom: 0;
    min-height: 54px;
  }

  #screen-keys h2,
  #screen-create h2,
  #screen-key-detail h2 {
    font-size: 1.7rem;
    line-height: 1.1;
  }

  #keys-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
  }

  #keys-list > button {
    min-height: 88px;
    padding: 18px;
    border-radius: 16px;
    background: var(--desktop-panel);
    border-color: var(--desktop-line);
  }

  #btn-create2 {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 190px;
    min-height: 54px;
    margin-top: 0;
    padding: 0 18px;
    border-radius: 14px;
  }

  #screen-create.active,
  #screen-key-detail.active {
    max-width: 760px;
    margin: 0 auto;
  }

  #screen-create > .bg-surface-container-low,
  #screen-create > label,
  #screen-key-detail > .bg-surface-container-low,
  #qr-tap-area {
    border: 1px solid var(--desktop-line);
    border-radius: 16px;
    background: var(--desktop-panel);
  }

  #key-label {
    min-height: 52px;
    border-radius: 14px;
  }

  #btn-do-create,
  #how-btn,
  #dl-btn,
  #gen-code-btn {
    min-height: 52px;
    border-radius: 14px;
  }

  #screen-about.active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
  }

  #screen-about > p:first-child,
  #screen-about > h1 {
    grid-column: 1 / -1;
  }

  #screen-about > h1 {
    max-width: 760px;
    margin-bottom: 8px;
    font-size: clamp(2.2rem, 3vw, 3.4rem);
  }

  #screen-about > .bg-surface-container-low,
  #screen-about > .bg-surface-container-lowest,
  #screen-about > .bg-surface-container-low.border,
  #screen-about > .bg-surface-container-low.border-white\/10 {
    height: 100%;
    border-radius: 16px;
    background: var(--desktop-panel);
    border-color: var(--desktop-line);
  }

  #screen-about > .bg-surface-container-low:last-child {
    grid-column: 1 / -1;
    height: auto;
  }

  #key-sheet-overlay,
  #activation-modal,
  #rename-modal {
    align-items: center;
    padding: 28px;
  }

  #rename-modal[style*="pointer-events:none"],
  #rename-modal[style*="pointer-events: none"] {
    visibility: hidden;
  }

  #rename-modal[style*="pointer-events:auto"],
  #rename-modal[style*="pointer-events: auto"] {
    visibility: visible;
  }

  #key-sheet,
  #modal-sheet,
  #rename-sheet {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    border: 1px solid var(--desktop-line-strong);
    border-radius: 20px !important;
    background: rgba(13,13,13,0.96);
    box-shadow: 0 28px 90px rgba(0,0,0,0.72);
  }

  #key-sheet {
    height: min(82dvh, 760px);
  }

  #modal-sheet {
    max-height: min(82dvh, 760px);
  }

  #rename-sheet {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
  }

  .sheet-handle {
    background: transparent;
  }

  .sheet-handle-bar {
    width: 42px;
    height: 4px;
    opacity: 0.55;
  }

  #key-sheet-scroll {
    padding: 0 22px 28px;
  }

  .key-traffic-chart-card,
  .connection-section,
  #key-sheet-scroll > .flex.flex-col.gap-2 > button {
    border-radius: 16px;
  }

  .connection-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }

  .connection-section-primary {
    grid-column: 1 / -1;
  }

  #activation-modal.is-connect-modal #modal-sheet {
    min-height: auto;
    max-height: min(82dvh, 760px);
  }

  #activation-modal.is-connect-modal #modal-sheet.is-expanded {
    min-height: auto;
  }

  #modal-steps {
    padding-bottom: 26px;
  }

  #activation-modal.is-connect-modal #modal-steps {
    display: grid;
    gap: 14px;
  }

  .connect-app-list {
    max-height: 390px;
  }

  .qr-overlay-content {
    width: min(100%, 520px);
  }

  #qr-full {
    --qr-size: min(52vmin, 420px);
  }

  #curved-scrollbar {
    right: 10px !important;
  }

  @supports selector(:has(*)) {
    body:has(#bottom-nav[style*="display: none"]) header,
    body:has(#bottom-nav[style*="display:none"]) header,
    body:has(#bottom-nav[style*="display: none"]) main,
    body:has(#bottom-nav[style*="display:none"]) main {
      margin-left: 0;
    }

    body:has(#bottom-nav[style*="display: none"]) main,
    body:has(#bottom-nav[style*="display:none"]) main {
      width: auto;
    }
  }
}

@media (min-width: 1200px) {
  #screen-home.active {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 20px 24px;
  }

  #keys-list {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}

@media (min-width: 900px) {
  #screen-keys.active {
    grid-template-columns: minmax(0, 1fr) max-content !important;
  }

  #screen-keys.active > #btn-create2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
    min-width: 190px;
  }
}