/* One Pocket interface. The theme changes palette tokens only. */
:root{
 color-scheme:dark;--bg:#09090b;--panel:#171719;--surface:#171719;--surface2:#222225;--line:#303035;
 --text:#f4f4f5;--muted:#a6a6b3;--accent:#bac8ff;--orange:var(--accent);--primary:#bac8ff;--primary-hover:#d2daff;--button-ink:#13131a;
 --green:#99cabb;--red:#f3a2ac;--warning:#efc093;--success-bg:#19382f;--success-line:#355348;--warning-bg:#392c22;--warning-line:#624730;
 --danger-bg:#392733;--danger-line:#674451;--shadow:0 14px 40px #060a171c;--radius:15px;
 --font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
html:is([data-design="pocket"],[data-design="flow"]){
 color-scheme:light;--bg:#f3f6f9;--panel:#fff;--surface:#fff;--surface2:#e8f0f6;--line:#dce4ec;
 --text:#182b3d;--muted:#567085;--accent:#259bdb;--orange:var(--accent);--primary:#0c76af;--primary-hover:#095f90;--button-ink:#fff;
 --green:#216b52;--red:#ac344a;--warning:#815015;--success-bg:#e4f4ec;--success-line:#b9dccb;--warning-bg:#fff2dd;--warning-line:#ecd2a8;
 --danger-bg:#fff0f2;--danger-line:#edc8cf;--shadow:0 12px 32px #2b54770b;
}
body{background:var(--bg);color:var(--text);font-family:var(--font)}
button,input,select,textarea{font-family:var(--font)}
::selection{background:var(--accent);color:var(--bg)}
.design-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:0;border:1px solid var(--line);border-radius:8px;color:var(--text);background:var(--surface);cursor:pointer}
.design-toggle svg{display:block;width:19px;height:19px}
.design-toggle-sun{display:none}
html[data-theme="dark"] .design-toggle-moon{display:none}
html[data-theme="dark"] .design-toggle-sun{display:block}
.design-toggle:hover{background:var(--surface2)}
.design-switch{display:flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:50px;gap:2px;flex-shrink:0;background:var(--surface)}
.design-switch button{width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.design-switch svg{width:16px;height:16px;display:block}
.design-switch button[aria-pressed="true"]{background:var(--surface2);color:var(--text)}
.design-switch button:hover{color:var(--accent)}
.design-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.brand .brand-fire{color:inherit}
.brand img{filter:none;object-fit:contain}
.brand strong{text-transform:lowercase}
.btn.primary,.sf-button-primary{background:var(--primary);border-color:var(--primary);color:var(--button-ink)}
.btn.primary:hover,.sf-button-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--button-ink)}
.btn,.icon-btn{background:var(--surface);border-color:var(--line);color:var(--text);transition:border-color .15s}
.sf-button{transition:border-color .15s}
.btn:hover,.icon-btn:hover{background:var(--surface2);border-color:var(--muted)}
.btn.quiet{background:transparent}.btn.quiet:hover{background:var(--surface2)}
.btn.danger{background:var(--danger-bg);border-color:var(--danger-line);color:var(--red)}
.badge{background:var(--surface2);border-color:var(--line);color:var(--muted)}
.badge.green{color:var(--green);background:var(--success-bg);border-color:var(--success-line)}
.badge.orange{color:var(--warning);background:var(--warning-bg);border-color:var(--warning-line)}
.badge.red{color:var(--red);background:var(--danger-bg);border-color:var(--danger-line)}
.sidebar{background:var(--bg);padding-top:32px;border-color:var(--line)}
.nav button{border-radius:11px;color:var(--muted);font-size:13px}
.nav button.active{background:var(--surface2);color:var(--accent)}
.nav button.active svg{color:var(--accent)}.nav button:hover{background:var(--surface)}
.sidebar-foot{border-color:var(--line)}
.sidebar-foot .badge{background:var(--surface2);border-color:var(--line);color:var(--muted)}
.topbar{background:var(--bg);border-color:var(--line)}
.topbar-right{gap:16px}.crumb{color:var(--muted)}.crumb b{color:var(--text)}
.lang{border-color:var(--line);background:var(--surface);border-radius:50px}
.lang button.active{background:var(--surface2);color:var(--text);border-radius:50px}
.content{max-width:1440px;margin-inline:auto;width:100%}
.page-head h1{font-size:32px;font-weight:500;letter-spacing:-1px}
.card,.kpi,.table{background:var(--surface);border-color:var(--line);box-shadow:none;border-radius:var(--radius)}
.kpi{padding:24px}.kpi strong{font-weight:500;letter-spacing:-1.2px}.kpi-label{color:var(--muted)}
.kpi.emphasis{background:var(--surface2);border-color:var(--line)}
.kpi.emphasis strong{color:var(--accent);font-weight:500}
.kpis .kpi:nth-child(3) strong{font-weight:350;letter-spacing:-2.5px}
.card-head h2{font-size:18px;font-weight:550;letter-spacing:-.25px}
.card-head,.account-bottom,.account-details,.schedule-row,.event,.security-method,.device-row{border-color:var(--line)}
.schedule-row .time{color:var(--accent);font-weight:500}
.schedule-row .message-peek{color:var(--muted)}
.avatar{background:var(--surface2);color:var(--accent);border:1px solid var(--line)}
.event-icon,.security-icon,.login-icon{background:var(--surface2);color:var(--accent);border:1px solid var(--line)}
.event-values,.chip,.selection-bar{background:var(--surface2);border-color:var(--line);color:var(--text)}
.event-text p{color:var(--muted)}
.event-text .account-name{color:var(--muted)}.account-name:hover{color:var(--accent)}
input,select,textarea{background:var(--bg);border-color:var(--line);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted)}
.check-block,.check,.check input,input[type="checkbox"]{accent-color:var(--primary)}
.chat-table thead,.chat-table th{background:var(--surface2);color:var(--muted);border-color:var(--line)}
.chat-table td,.chat-table tr{border-color:var(--line)}
.chat-table tr:hover,.chat-table tr.selected{background:var(--surface2)}
dialog{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:0 30px 90px #060a1733}
dialog::backdrop{background:#060a1780;backdrop-filter:blur(4px)}
.modal-head,.modal-foot,.divider,.preview-row{border-color:var(--line)}
.presets .btn{background:var(--bg)}.presets .btn:hover{background:var(--surface2)}
.imp-banner{background:var(--warning-bg);border-color:var(--warning-line);color:var(--warning)}
.imp-banner .btn{background:var(--surface);border-color:var(--warning-line);color:var(--text)}
.login{max-width:1260px;padding-top:36px}
.login-tools{display:flex;align-items:center;gap:14px}
.login-hero h1{font-size:clamp(42px,5vw,70px);font-weight:400;line-height:1.12;letter-spacing:-2.5px}
.login-hero p{color:var(--muted)}.login-proof{color:var(--muted)}
.login-card{border-color:var(--line);background:var(--surface);border-radius:20px;box-shadow:var(--shadow)}
.login-card h2{font-weight:500}.login-card p,.login-foot{color:var(--muted)}
.login-code{background:var(--surface2);border-color:var(--line);color:var(--accent)}
.auth-divider:before,.auth-divider:after{background:var(--line)}
.service-grid>div{background:var(--surface2);border-color:var(--line)}
.finance-hero,.wallet-card{background:var(--surface);border-color:var(--line)}
/* Public guides, pricing and their navigation share the selected palette. */
.site-header,.site-footer{background:var(--bg);border-color:var(--line)}
.header-inner nav a,.intro,.byline,.footer-grid p,.footer-meta,.contents a,.text-link{color:var(--muted)}
.header-inner nav a:hover,.header-inner nav a[aria-current],.contents a:hover{color:var(--text)}
.hero h1,.next h2{font-weight:450;letter-spacing:-1.8px}
.price-card,.preview{background:var(--surface);border-color:var(--line);box-shadow:none}
.price-card.featured,.price-card:first-child{background:var(--surface2);border-color:var(--line)}
.message-bubble,.preview-meta,.soft-tag{background:var(--surface2);color:var(--text)}
.preview:before{border-color:var(--line)}.content-section p,.content-section li,.faq details>p{color:var(--muted)}
.faq details,.content-section,.footer-meta,.next,.contents a{border-color:var(--line)}
.header-actions{gap:14px}.header-inner{gap:24px}
.article-page .hero h1{color:var(--text)}
html:is([data-design="pocket"],[data-design="flow"]) .nav button.active{color:#0c76af;background:#dceefa}
html:is([data-design="pocket"],[data-design="flow"]) .kpi.emphasis{background:#e4f0f8}
html:is([data-design="pocket"],[data-design="flow"]) .schedule-row .time{color:#0c76af}
html:is([data-design="pocket"],[data-design="flow"]) .login{background:var(--bg)}
html:is([data-design="pocket"],[data-design="flow"]) .login-card{box-shadow:0 16px 40px #2b547710}
html:is([data-design="pocket"],[data-design="flow"]) .btn,html:is([data-design="pocket"],[data-design="flow"]) .icon-btn,html:is([data-design="pocket"],[data-design="flow"]) .menu-toggle,html:is([data-design="pocket"],[data-design="flow"]) .site-header .header-login{border-radius:8px;font-weight:500}
html:is([data-design="pocket"],[data-design="flow"]) .design-switch,html:is([data-design="pocket"],[data-design="flow"]) .lang{border-radius:9px;padding:3px;gap:2px}
html:is([data-design="pocket"],[data-design="flow"]) .design-switch button,html:is([data-design="pocket"],[data-design="flow"]) .lang button,html:is([data-design="pocket"],[data-design="flow"]) .lang button.active{border-radius:6px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:760px){
 .page-head h1{font-size:28px}.topbar-right{gap:10px;flex-wrap:wrap}.topbar{min-height:76px;padding-block:12px}
 .topbar-right>.badge{font-size:10px;margin-right:auto}.topbar-right .design-switch{margin-left:auto}
 .login{padding:22px}.login-tools{gap:8px}.login .brand strong{font-size:19px}.login .brand img{width:30px}
 .design-switch button{width:30px;height:30px}.kpi{padding:20px}.kpi strong{font-size:32px}
 .sidebar .nav button.active{background:var(--surface2)}
}
@media(max-width:390px){.login-tools{gap:5px}.login-tools .lang button{padding-inline:7px}.login .brand{gap:6px}.login .brand img{width:25px}.login .brand strong{font-size:17px}.login{padding:17px}.topbar-right .badge{order:4}.topbar-right .design-switch{margin-left:0}}

/* Public navigation keeps one stable header row; smaller screens get a native menu. */
.site-header{position:sticky;top:0;z-index:50}
.site-header .header-inner{min-height:84px;display:flex;align-items:center;flex-wrap:nowrap;gap:24px;padding-block:14px;position:relative}
.site-header .header-inner .site-nav{display:flex;align-items:center;gap:22px;margin:0 0 0 auto;width:auto;flex-basis:auto;order:0;overflow:visible;font-size:13px}
.site-header .header-inner .site-nav a{min-height:44px;font-size:13px;font-weight:500;line-height:1.35;white-space:nowrap;flex-shrink:0}
.site-header .header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.site-header .header-preferences{display:flex;align-items:center;gap:10px}
.site-header .header-login{width:auto;min-height:44px;white-space:nowrap;padding:10px 16px;gap:12px}
.site-header .header-login-label{display:inline}
.site-menu{display:none}
.menu-toggle{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;min-width:44px;padding:10px 13px;border:1px solid var(--line);border-radius:50px;color:var(--text);background:var(--surface);font:500 13px/1.3 var(--font);cursor:pointer;list-style:none;user-select:none}
.menu-toggle::-webkit-details-marker{display:none}
.menu-toggle svg{width:20px;height:20px;flex-shrink:0}
.menu-toggle .menu-close,.site-menu[open] .menu-bars{display:none}
.site-menu[open] .menu-close{display:block}
.menu-toggle:hover,.site-menu[open] .menu-toggle{background:var(--surface2);border-color:var(--muted)}
.menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(340px,100%);padding:10px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 18px 45px #060a1733;max-height:calc(100svh - 110px);overflow-y:auto;overscroll-behavior:contain}
.site-header .header-inner .menu-panel .site-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;width:100%;overflow:visible}
.site-header .header-inner .menu-panel .site-nav a{font-size:15px;min-height:48px;padding:13px 15px;border-radius:10px;justify-content:space-between;gap:14px}
.menu-panel .site-nav a::after{content:'↗';color:var(--muted);font-size:14px}
.menu-panel .site-nav a:hover,.menu-panel .site-nav a[aria-current="page"]{background:var(--surface2);color:var(--text)}
.menu-panel .site-nav a[aria-current="page"]::after{content:'●';font-size:7px;color:var(--accent)}
.menu-preferences{display:none;align-items:center;gap:12px;border-top:1px solid var(--line);padding:13px 5px 3px;margin-top:8px}
.menu-appearance-label{font-size:12px;color:var(--muted);margin-right:auto}
.site-header .menu-preferences .language{min-width:38px;min-height:44px;font-size:12px;border:1px solid var(--line);border-radius:50%;background:var(--bg)}
@media(max-width:1120px){
 .site-header .header-inner{gap:18px;min-height:80px;padding-block:12px}
 .site-header .header-inner>.desktop-nav{display:none}
 .site-header .header-actions{margin-left:auto;gap:12px}
 .site-menu{display:block}
}
@media(max-width:820px){
 .site-header .header-login-label{display:none}
 .site-header .header-login{width:44px;min-height:44px;padding:0;gap:0}
 .site-header .header-login>span:last-child{font-size:19px;margin:0}
}
@media(max-width:640px){
 .site-header .header-inner{min-height:72px;gap:12px}
 .site-header .header-preferences{display:none}
 .site-header .design-toggle{display:flex}
 .site-header .header-actions{gap:8px}
 .menu-preferences{display:flex}
 .site-header .menu-preferences .design-switch button{width:34px;height:34px}
 .site-header .header-inner .menu-panel .site-nav a{font-size:15px;min-height:48px}
 .site-header .brand strong{font-size:19px}
 .site-header .brand img{width:30px;height:30px}
 .site-header .brand{gap:8px}
}
@media(max-width:400px){
 .menu-label{display:none}
 .menu-toggle{padding:10px}
 .site-header .header-actions{gap:7px}
 .site-header .brand strong{font-size:18px}
}

/* Device and Telegram insets are additive; SDK-provided variables remain authoritative. */
:root{
 --sf-viewport:100vh;
 --sf-visual-height:min(var(--sf-viewport),var(--tg-viewport-height,var(--sf-viewport)),var(--sf-visual-viewport-height,var(--sf-viewport)));
 --sf-edge-top:calc(max(env(safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px));
 --sf-edge-bottom:calc(max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)) + var(--tg-content-safe-area-inset-bottom,0px));
 --sf-edge-left:calc(max(env(safe-area-inset-left,0px),var(--tg-safe-area-inset-left,0px)) + var(--tg-content-safe-area-inset-left,0px));
 --sf-edge-right:calc(max(env(safe-area-inset-right,0px),var(--tg-safe-area-inset-right,0px)) + var(--tg-content-safe-area-inset-right,0px));
}
@supports(height:100dvh){:root{--sf-viewport:100dvh}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(90px + var(--sf-edge-top))}
body{min-width:0;padding-left:var(--sf-edge-left);padding-right:var(--sf-edge-right)}
.site-header{padding-top:var(--sf-edge-top);top:0}
.site-footer{padding-bottom:calc(40px + var(--sf-edge-bottom))}
.site-header .menu-panel{max-height:calc(var(--sf-visual-height) - var(--sf-edge-top) - var(--sf-edge-bottom) - 112px)}
body.app-page{padding-top:var(--sf-edge-top);padding-bottom:var(--sf-edge-bottom)}
.app-page #app,.workspace,.content,.form-stack,.field{min-width:0}
.app-page .shell,.app-page .login,.app-page .boot{min-height:calc(var(--sf-visual-height) - var(--sf-edge-top) - var(--sf-edge-bottom))}
.app-page .sidebar{top:var(--sf-edge-top);height:calc(var(--sf-visual-height) - var(--sf-edge-top) - var(--sf-edge-bottom));overflow-y:auto;overscroll-behavior:contain}
.person>div,.card-head>div,.modal-head>div{min-width:0}
.account-name,.account-bottom small,.card-head h2,.modal-head h2,.modal-head p{overflow-wrap:anywhere}
.login-hero h1::first-line{color:var(--accent)}
.login-card .login-icon{background:var(--surface2);border:1px solid var(--line);color:var(--accent)}
dialog{
 max-width:min(620px,calc(100vw - var(--sf-edge-left) - var(--sf-edge-right) - 28px));
 max-height:calc(var(--sf-visual-height) - var(--sf-edge-top) - var(--sf-edge-bottom) - 24px);
 inset:calc(var(--sf-visual-offset-top,0px) + var(--sf-edge-top) + 12px) calc(var(--sf-edge-right) + 14px) calc(var(--sf-layout-height,var(--sf-viewport)) - var(--sf-visual-offset-top,0px) - var(--sf-visual-height) + var(--sf-edge-bottom) + 12px) calc(var(--sf-edge-left) + 14px);
 margin:auto;overflow:hidden;
}
dialog[open]{display:flex;flex-direction:column}
.modal-head{flex:0 0 auto;min-width:0}
.modal-head>div{flex:1}
.modal-head .icon-btn{flex-shrink:0}
.modal-body{flex:1 1 auto;min-width:0;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html[data-compact-viewport="true"] .app-page .modal-head{padding:12px 16px;gap:12px;align-items:center}
html[data-compact-viewport="true"] .app-page .modal-head h2{font-size:18px;line-height:1.2}
html[data-compact-viewport="true"] .app-page .modal-head p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px;font-size:12px}
html[data-compact-viewport="true"] .app-page .modal-body{padding:12px 16px;scroll-padding-block:8px}
.modal-foot .btn{max-width:100%;min-width:0;white-space:normal;text-align:center}
#toast{right:calc(16px + var(--sf-edge-right));bottom:calc(var(--sf-layout-height,var(--sf-viewport)) - var(--sf-visual-offset-top,0px) - var(--sf-visual-height) + 16px + var(--sf-edge-bottom));max-width:min(500px,calc(100vw - var(--sf-edge-left) - var(--sf-edge-right) - 32px))}
@media(max-width:1100px){
 .app-page .topbar{height:auto;min-height:76px;flex-wrap:wrap;padding-block:12px}
 .app-page .topbar-right{min-width:0;max-width:100%;flex-wrap:wrap;margin-left:auto}
 .app-page .crumb{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:760px),(pointer:coarse){
 .app-page input:not([type="checkbox"]):not([type="radio"]),.app-page select,.app-page textarea{font-size:16px}
 .app-page .btn,.app-page .btn.sm,.app-page .icon-btn{min-height:44px}
 .app-page .icon-btn{width:44px;height:44px}
 .app-page .presets .btn{min-width:44px}
 .app-page .lang button{min-width:40px;min-height:44px;font-size:12px}
 .design-switch button,.site-header .menu-preferences .design-switch button{width:44px;height:44px}
 .app-page input[type="checkbox"]{width:20px;height:20px;min-height:20px}
 .app-page .check{min-height:44px}
 html .sf-home .sf-hero .sf-button,html .sf-home .sf-hero .sf-demo-link,.sf-home .sf-button,.sf-home .sf-demo-link,.sf-home .sf-mode-labels label{min-height:44px}
 button,a,summary,label,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 20%,transparent)}
}
@media(max-width:760px){
 .app-page .sidebar{height:auto;position:relative;top:0;padding:16px 18px;overflow-y:visible}
 .app-page .nav button{min-height:44px}
 .app-page .topbar{height:auto;min-height:76px;padding:12px 18px}
 .app-page .topbar-right{width:100%;flex-wrap:wrap;gap:10px}
 .app-page .topbar-right>.badge{flex-basis:100%;justify-content:center;margin:0;font-size:11px}
 .app-page .topbar-right .design-switch{margin-left:0}
 .app-page .login{padding:22px 18px}
 .app-page .login-nav{flex-wrap:wrap;gap:14px;align-items:center}
 .app-page .login-tools{width:100%;justify-content:space-between;gap:12px}
 .app-page .login-main{padding:26px 0 32px;gap:28px;align-items:start}
 .app-page .login-card{order:0;padding:25px}
 .app-page .login-hero{order:1}
 .app-page .login-hero h1{font-size:36px;letter-spacing:-1.2px}
 .app-page .login-hero>p{margin:18px 0;font-size:14px}
 .app-page .login-card .login-icon{margin-bottom:18px}
 .app-page .login-card .btn.primary{margin-top:20px}
 .app-page .login-card .auth-form .btn.primary{margin-top:0}
 .app-page .login-focused .login-main{padding-top:20px}
 .app-page .modal-head,.app-page .modal-body{padding:18px}
}
@media(max-width:360px){
 .app-page .login-card{padding:21px}
 .app-page .login-card h2{font-size:21px}
 .app-page .content{padding-inline:15px}
 .app-page .toolbar{padding-inline:12px}
 .app-page .topbar{padding-inline:15px}
}