@layer reset,tokens,layout,components,responsive;
@layer reset{*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}svg{display:block}button:disabled,fieldset:disabled input,fieldset:disabled select{cursor:not-allowed}button:disabled{opacity:.4}input,select,textarea{min-width:0}input[type=search]::-webkit-search-cancel-button{cursor:pointer}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}h1,h2,h3,p{margin:0}button,a,input,select,textarea{transition:background .16s,border-color .16s,color .16s,opacity .16s,transform .16s}button:active:not(:disabled),a.button:active{transform:translateY(1px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--text);color:var(--bg);padding:12px}.skip-link:focus{top:10px}}
@layer tokens{:root{--bg:#090a0b;--panel:#101214;--surface:#16191c;--hover:#202428;--border:#292d31;--muted:#9ca3aa;--text:#f0f2f3;--accent:#b5e4d0;--danger:#f1aaaa;--amber:#e5c389;--radius:16px;--gutter:clamp(20px,3vw,48px)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.5;background:var(--bg);color:var(--text);font-feature-settings:"cv02","cv03","cv04","cv11";font-variant-numeric:tabular-nums}h1{font-size:clamp(25px,2.6vw,36px);line-height:1.2;letter-spacing:-1.1px;font-weight:600}h2{font-size:17px;letter-spacing:-.35px;font-weight:600}h3{font-size:15px}small{font-size:12px;color:var(--muted)}p{color:var(--muted)}strong{font-weight:550}.muted{color:var(--muted)}.accent{color:var(--accent)}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:500;color:var(--muted);margin-bottom:10px}.big-number{display:block;font-size:32px;letter-spacing:-1px}.fine-print{font-size:12px}}
@layer layout{.signed-in{padding-left:96px}header{min-height:84px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);gap:16px}.brand{font-size:14px;letter-spacing:1.9px;font-weight:650;display:flex;align-items:center;gap:22px}.brand span{font-size:9px;letter-spacing:1.6px;color:var(--muted);font-weight:400}.rail{position:fixed;inset:0 auto 0 0;width:96px;border-right:1px solid var(--border);display:flex;align-items:center;flex-direction:column;justify-content:center;z-index:20;background:var(--bg)}.monogram{position:absolute;top:25px;font-size:23px;letter-spacing:-2px}.monogram span{color:var(--accent);font-size:16px}.rail-foot{position:absolute;bottom:26px;color:#727a81;font-size:9px;letter-spacing:2px}main{padding:var(--gutter);padding-bottom:60px;min-width:0;max-width:2000px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}.chart-grid,.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.span-2{grid-column:span 2}.form-card{max-width:1000px}.auth-card{width:100%;max-width:410px;margin:clamp(25px,8vh,95px) auto;padding:32px!important}.auth-card h1{margin-bottom:30px}.signed-out main{padding-top:10px}.settings-grid>section{min-width:0}}
@layer components{.card{padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(135deg,#121416,#101214);margin-bottom:22px}.card .card{background:var(--surface)}.stats-grid .card,.chart-grid .card,.partner-grid .card,.settings-grid .card{margin:0}.stat{display:flex;flex-direction:column;gap:14px}.stat>span{font-size:12px;color:var(--muted)}.stat>strong{font-size:34px;letter-spacing:-1px;line-height:1.1}.stat a{font-size:11px;color:var(--muted)}.stat a:hover,a:hover{color:var(--accent)}.chart-card strong{font-size:22px}.chart-card svg{width:100%;height:160px;margin:26px 0 12px;overflow:visible}.chart-gridline{fill:none;stroke:var(--border);stroke-width:1}.chart-line{fill:none;stroke:var(--accent);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.row,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-heading{margin-bottom:18px}.section-heading a{font-size:12px;color:var(--muted)}.host-strip{display:flex;flex-wrap:wrap;gap:24px;font-size:12px}.host-strip span{display:flex;gap:10px;align-items:center;color:var(--muted)}.host-strip b{font-weight:450;color:var(--text)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7c858e}.status-dot.healthy{background:var(--accent)}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.button,button{display:inline-flex;justify-content:center;align-items:center;min-height:40px;border:1px solid var(--border);border-radius:9px;padding:9px 15px;background:var(--surface);color:var(--text);font-size:12px;font-weight:500;gap:8px;white-space:nowrap}.button:hover,button:hover{background:var(--hover);border-color:#42494f;color:var(--text)}.primary{background:var(--text);color:#0d1012;border-color:var(--text)}.primary:hover{background:var(--accent);color:#0d1012;border-color:var(--accent)}button.quiet{border-color:transparent;background:transparent;color:var(--muted)}.danger{color:var(--danger)}.stack{display:flex;flex-direction:column;gap:20px}.stack>button{align-self:flex-start;min-width:140px}.auth-card .stack>button{align-self:stretch}.stack label,.form-grid label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#c5cacf}label small{font-size:10px;color:#9ca3aa;font-weight:400}input:not([type=checkbox]):not([type=range]),select,textarea{background:#0d0f11;border:1px solid var(--border);color:var(--text);padding:11px 12px;min-height:44px;border-radius:8px;width:100%;font-size:14px}input:hover,select:hover,textarea:hover{border-color:#434950}input:focus,select:focus,textarea:focus{border-color:var(--accent)}input::placeholder,textarea::placeholder{color:#717a82}.input-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.password-field{position:relative;display:block}.password-field input{padding-right:64px!important}.password-field button{position:absolute;right:4px;top:3px;min-height:36px;background:transparent;border:0;color:var(--muted);padding:6px 10px}.tabs{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border);margin-bottom:24px;overflow:auto;scrollbar-width:thin}.tabs>a,.tabs>button{background:transparent;border:0;border-radius:0;border-bottom:2px solid transparent;display:flex;align-items:center;gap:10px;padding:13px 16px;color:var(--muted);font-size:12px;white-space:nowrap}.tabs .selected{color:var(--text);border-color:var(--accent)}.tabs span{background:var(--surface);border-radius:5px;padding:1px 6px;color:var(--muted);font-size:10px}.table-card{padding:0;overflow:hidden}.table-toolbar{padding:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--border)}.search-label{flex:1;min-width:180px;max-width:440px}.table-toolbar select{width:auto;max-width:100%}.table-scroll{width:100%;overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:500;background:#101214}th,td{padding:17px 20px;border-bottom:1px solid var(--border);vertical-align:middle}td small{display:block;margin-top:5px;font-size:10px}td time{white-space:nowrap;font-size:11px;color:#c0c6cb}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#14171a}.copy-value{padding:4px 0;min-height:32px;background:transparent;border:0;font-size:12px;letter-spacing:.2px}.copy-value span{color:var(--muted);margin-left:10px}.badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;border-radius:6px;border:1px solid var(--border);padding:4px 8px;white-space:nowrap;color:var(--muted);background:var(--surface)}.badge.active{color:var(--accent);background:#14241f;border-color:#254037}.badge.expired{color:var(--amber);background:#282116;border-color:#4b3c25}.badge.disabled{color:#c6b8c4;background:#221f25;border-color:#3e3543}.pagination{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 20px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}.pagination>div{display:flex;gap:8px}.empty{text-align:center;padding:65px 20px;color:var(--muted);font-size:13px}.record-list{display:flex;flex-direction:column}.record{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--border)}.record>span:nth-child(2){flex:1}.record strong{display:block}.record small{display:block;font-size:11px;margin-top:3px}.record time{color:var(--muted);font-size:11px}.avatar{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid #3c4547;border-radius:10px;background:#1e2828;color:var(--accent);font-size:12px}.partner-card{display:flex;flex-direction:column;gap:18px}.partner-card h2{font-size:20px}.slot-meter{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.slot-meter strong{color:var(--text)}progress{width:100%;height:4px;border:0;appearance:none;background:var(--border);border-radius:4px}progress::-webkit-progress-bar{background:var(--border);border-radius:4px}progress::-webkit-progress-value{background:var(--accent);border-radius:4px}progress::-moz-progress-bar{background:var(--accent)}.duration-tags{display:flex;flex-wrap:wrap;gap:8px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}.detail-grid div{min-width:0}.detail-grid dt{font-size:11px;color:var(--muted);margin-bottom:5px}.detail-grid dd{margin:0;font-size:13px;overflow-wrap:anywhere}.form-error,.notice{font-size:12px;color:var(--danger);border:1px solid #4c3434;border-radius:8px;padding:12px 14px;background:#241b1b}.notice{margin-bottom:18px}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:80;max-width:calc(100vw - 30px);padding:12px 20px;color:var(--text);background:#22292a;border:1px solid #3b4d46;border-radius:10px;box-shadow:0 8px 40px #0008;font-size:12px}.toast[data-error=true]{border-color:#835252}dialog{width:min(580px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:28px;background:#121517;color:var(--text);border:1px solid #3c4247;border-radius:18px;box-shadow:0 24px 80px #0009}dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}dialog[open]{animation:dialog-in .18s ease-out}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}.dialog-heading button{font-size:22px;min-width:38px;padding:2px;background:transparent;border:0}.dialog-heading h2{font-size:20px}dialog p{margin-bottom:20px}dialog .actions{margin-top:24px}dialog code{display:block;font-size:19px;background:#090c0e;padding:20px;border-radius:10px;overflow-wrap:anywhere;user-select:all}details{margin-top:24px;border-top:1px solid var(--border);padding-top:16px}summary{cursor:pointer;color:var(--muted);font-size:12px}details .record{font-size:11px}#confirm-dialog{width:min(430px,calc(100vw - 32px))}.glass-dock{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px 8px;border:1px solid #2a2c30;border-radius:40px;background:linear-gradient(150deg,#17191bc9,#0d0e10e8);box-shadow:inset 0 1px 0 #ffffff08}.dock-link{position:relative;display:flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:50%;color:#929a9f;outline-offset:3px}.dock-link svg{width:19px;height:19px;stroke-width:1.5}.dock-link:hover{background:#232629;color:#f1f2f3}.dock-link[aria-current=page]{background:#edf2f0;color:#101614}.dock-tooltip{pointer-events:none;position:absolute;left:74px;z-index:30;white-space:nowrap;background:#edf2f0;color:#111718;border-radius:8px;border:1px solid #fff2;padding:8px 12px;font-size:11px;box-shadow:0 4px 18px #0006}.account-summary{display:flex;align-items:center;gap:32px;justify-content:space-between}.account-summary .muted{display:block;font-size:11px;margin-bottom:6px}.account-summary time{font-size:12px;display:block}.uid-display{display:flex;align-items:center;gap:14px;font-size:23px;letter-spacing:.5px}.uid-display button{background:transparent;border:0;padding:6px;min-width:36px}.session-panel .section-heading{margin-bottom:20px}.live-pill{display:inline-flex;gap:8px;align-items:center;font-size:11px;color:var(--muted)}[data-state=connected] .live-pill .status-dot{background:var(--accent)}.connection-steps{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--muted);margin-bottom:24px}.connection-steps span{display:flex;gap:8px;align-items:center}.connection-steps i{width:6px;height:6px;border:1px solid #67737c;border-radius:50%}.connection-steps .complete{color:var(--accent)}.connection-steps .complete i{background:var(--accent);border-color:var(--accent)}.connection-steps b{width:28px;height:1px;background:var(--border)}#controls{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;min-width:0}.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:500}.switch input{appearance:none;width:36px;height:22px;background:#343c42;border:1px solid #424c54;border-radius:20px;position:relative;flex-shrink:0;margin:0;cursor:pointer;transition:.18s}.switch input:before{content:"";position:absolute;width:16px;height:16px;top:2px;left:2px;border-radius:50%;background:#acb8be;transition:.18s}.switch input:checked{background:#a8d9c4;border-color:#a8d9c4}.switch input:checked:before{background:#16251f;transform:translateX(14px)}fieldset:disabled .feature-card{opacity:.45}.feature-card .two{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}.two label{font-size:10px;color:var(--muted)}.two select{margin-top:6px;font-size:12px;min-height:40px}.range-heading{display:flex;justify-content:flex-end;margin:25px 0 8px;font-size:11px}.strength-range{appearance:none;-webkit-appearance:none;background:linear-gradient(to right,var(--accent) var(--progress,47%),#343b40 var(--progress,47%));height:5px;display:block;border-radius:10px;width:100%;margin:22px 0;cursor:pointer;touch-action:pan-y}.strength-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;border:3px solid var(--accent);background:#f1f6f4;border-radius:50%;box-shadow:0 0 0 3px #b5e4d015}.strength-range::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--accent);background:#f1f6f4;border-radius:50%}.panel-footer{display:flex;gap:20px;align-items:center;justify-content:flex-end;border-top:1px solid var(--border);margin-top:24px;padding-top:18px;font-size:10px}.panel-footer>span{margin-right:auto;font-size:8px;letter-spacing:1.5px}.uid-warning{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#292217;border:1px solid #635033;border-radius:12px;padding:18px;margin-bottom:20px;color:var(--amber)}.uid-warning p{font-size:11px;color:var(--amber);margin-top:5px}.countdown{display:flex;flex-direction:column;align-items:flex-end}.countdown>span{font-size:24px}.countdown small{font-size:8px;letter-spacing:1px;color:var(--amber)}@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
@layer responsive{@media(min-width:1600px){main{padding-top:40px}#controls{gap:20px}.feature-card{padding:26px}.feature-card .two{grid-template-columns:1fr 1fr}.chart-card svg{height:200px}}@media(max-width:1280px){#controls{grid-template-columns:1fr 1fr}.feature-card .two{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1024px){.signed-in{padding-left:80px}.rail{width:80px}.card{padding:20px}.table-card{padding:0}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.brand span{display:none}th,td{padding:14px}.record time{display:none}}@media(max-width:767px){:root{--gutter:20px}.signed-in{padding-left:0}header{min-height:68px;padding-top:calc(14px + env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.signed-in main{padding-bottom:calc(115px + env(safe-area-inset-bottom))}.rail{inset:auto 0 0;width:100%;height:calc(78px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border:0;background:linear-gradient(transparent,#090a0bf5 25%);pointer-events:none}.monogram,.rail-foot{display:none}#navigation{pointer-events:auto}.glass-dock{flex-direction:row;padding:6px;gap:10px;border-radius:32px;backdrop-filter:blur(14px);background:#15191beb}.dock-link{width:46px;height:46px}.dock-tooltip{display:none}.page-heading{margin-bottom:24px;gap:14px;align-items:flex-start;flex-wrap:wrap}.page-heading .actions{width:100%}.page-heading .button,.page-heading button{font-size:11px}.eyebrow{font-size:9px}.chart-grid,.settings-grid{grid-template-columns:1fr}.chart-card svg{height:135px}.stats-grid{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:18px;gap:10px}.stat>strong{font-size:29px}.stat a{font-size:10px}.host-strip{gap:16px;display:grid;grid-template-columns:1fr 1fr;font-size:10px}.host-strip span{display:block}.host-strip b{display:block;margin-top:4px}.host-strip .status-dot{margin-right:5px}.tabs{gap:0}.tabs>a,.tabs>button{font-size:11px;padding:12px 10px;gap:7px}.tabs span{font-size:9px}.table-toolbar{padding:16px;gap:8px}.search-label{min-width:100%;max-width:none}.table-toolbar select{font-size:12px;min-height:40px}.table-toolbar label{flex:1}.table-toolbar label select{width:100%}table.responsive-table,table.responsive-table tbody,table.responsive-table tr,table.responsive-table td{display:block}.responsive-table thead{display:none}.responsive-table tr{padding:17px 18px;border-bottom:1px solid var(--border)}.responsive-table td{padding:5px 0;border:0;display:flex!important;align-items:baseline;justify-content:space-between;gap:20px;text-align:right;overflow-wrap:anywhere}.responsive-table td:before{content:attr(data-label);font-size:11px;color:var(--muted);text-align:left;flex-shrink:0}.responsive-table td:first-child{display:block!important;text-align:left;margin-bottom:12px}.responsive-table td:first-child:before{display:none}.responsive-table td:first-child strong{font-size:15px}.responsive-table .row-actions{justify-content:flex-end;margin-top:10px}.responsive-table .row-actions button{width:100%}.pagination{align-items:flex-start;font-size:10px}.pagination .button{padding:7px 9px;min-height:34px}.partner-grid{grid-template-columns:1fr}.form-grid{gap:16px}.form-grid,.detail-grid{grid-template-columns:1fr 1fr}.form-card .form-grid{grid-template-columns:1fr}.form-card .span-2{grid-column:auto}input:not([type=checkbox]):not([type=range]),select,textarea{font-size:16px}dialog{padding:22px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}dialog .form-grid{grid-template-columns:1fr}dialog .span-2{grid-column:auto}.account-summary{align-items:flex-start;flex-wrap:wrap;gap:20px}.account-summary>div:first-child{flex:1 0 100%}.account-summary>div:nth-child(2){flex:1}.uid-display{font-size:25px}.account-summary time{font-size:11px}#controls{grid-template-columns:1fr 1fr;gap:10px}.feature-card{padding:16px}.switch{font-size:12px;gap:6px}.switch input{width:32px;height:20px}.switch input:before{width:14px;height:14px}.switch input:checked:before{transform:translateX(12px)}.feature-card .two{grid-template-columns:1fr}.two select{font-size:12px}.connection-steps{gap:12px}.session-panel .section-heading{align-items:flex-start;gap:10px}.session-panel h2{font-size:15px}.live-pill{font-size:10px}.panel-footer{flex-wrap:wrap;gap:14px;justify-content:flex-start}.panel-footer>span{flex:1 0 100%}.toast{bottom:calc(94px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 30px)}.auth-card{padding:26px!important}.record{gap:10px}.record .badge{font-size:9px}.record strong{font-size:12px}.uid-warning{padding:14px}.countdown>span{font-size:22px}}@media(max-width:360px){:root{--gutter:14px}.card{padding:17px}.table-card{padding:0}#controls{grid-template-columns:1fr}.feature-card .two{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:1fr 1fr}.stat{padding:14px}.stat>span{font-size:10px}.account-summary{gap:15px}.tabs>a,.tabs>button{padding:11px 8px;gap:4px}.host-strip{grid-template-columns:1fr}.page-heading h1{font-size:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}}

#main[aria-busy="true"]::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;background:var(--accent);z-index:99;opacity:.65}#main:focus{outline:none}

main,.table-card,.table-toolbar,.tabs{min-width:0}.table-card{width:100%;max-width:100%}.table-scroll{max-width:100%}.table-toolbar>label{min-width:0}.table-toolbar .search-label{min-width:min(180px,100%)}.table-toolbar input{max-width:100%}

.table-scroll{position:relative}

/* Owner/reseller account form; shared behavior is unchanged. */
.pro-choice{flex-direction:row!important;align-items:center;flex-wrap:wrap;border:1px solid var(--border);border-radius:10px;padding:12px}.pro-choice input{width:18px;height:18px;accent-color:var(--accent);margin-left:auto}.pro-choice small{flex-basis:100%}


/* Owner-supplied customer design. Staff styles are outside this scope. */
.user-app { background:#000;--accent:#7c5cff; }
.user-app.signed-in { padding:0; }
.user-app>header,.user-app>.rail { display:none; }
.user-app #main { width:100%;max-width:none;margin:0;padding:0; }
.user-app #main>:not(#customer-app-root):not(noscript) { display:none; }
.user-app #main:not(:has(#customer-app-root))::before { content:'';display:block;width:calc(100% - 32px);max-width:960px;height:320px;border-radius:20px;margin:24px auto;background:#100e1c80;border:1px solid #ffffff0b; }
.dashboard-page #main>.account-summary,.dashboard-page #main>.session-panel { display:none; }
.friend-ui {
  --bg:#000;--panel:rgba(16,14,28,.72);--line:rgba(255,255,255,.08);--text:#ecebf5;--muted:#8c8aa3;--accent:#7c5cff;--accent-2:#4fe3c1;--danger:#ff5c7a;
  color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:normal;color-scheme:dark;
}
.friend-ui button,.friend-ui input { min-height:0;min-width:0;font:inherit; }
.friend-ui input { padding:0; }
.friend-ui .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.friend-ui .feature-card.check-group,.friend-ui .feature-card.check-single { padding:0;min-width:0;border:0;background:none;border-radius:14px; }
.friend-ui .feature-card.check-group { border:1px solid var(--line);background:rgba(255,255,255,.025); }
.friend-ui .feature-card.check-group.is-on { background:color-mix(in srgb,var(--acc) 9%,transparent);border-color:color-mix(in srgb,var(--acc) 35%,transparent); }
.friend-ui .check__label small { display:inline-block;margin-left:7px;font-size:10px;color:var(--muted); }
.friend-ui #controls { margin:0;padding:0;border:0;min-width:0; }
.friend-ui .friend-tier { font-size:9px;font-weight:500;color:var(--muted);padding:2px 4px;border:1px solid var(--line);border-radius:5px; }
.friend-ui .topbar form { margin:0;display:flex; }
.friend-ui header.topbar { min-height:0; }
.friend-ui .friend-signout { padding:0 10px; }
.friend-ui .friend-session { border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px 16px; }
.friend-ui .friend-status-row { display:flex;align-items:center;gap:18px;font-size:11px;color:var(--muted); }
.friend-ui #connection { display:flex;align-items:center;gap:6px; }
.friend-ui #connection>i,.friend-ui .friend-steps i { display:inline-block;width:5px;height:5px;border-radius:50%;background:#60606c; }
.friend-ui #connection>i.is-connected,.friend-ui .friend-steps .complete i { background:var(--acc);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 60%,transparent); }
.friend-ui .friend-steps { display:flex;gap:12px;font-size:10px; }
.friend-ui .friend-steps>span { display:flex;align-items:center;gap:5px; }
.friend-ui .friend-steps .complete { color:var(--text); }
.friend-ui .friend-saving { margin-left:auto;font-size:10px;color:var(--acc); }
.friend-ui .friend-account-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;font-size:10px;color:var(--muted); }
.friend-ui .friend-account-row strong { color:var(--text);font-weight:500;margin-left:4px; }
.friend-ui .friend-account-row button { display:flex;align-items:center;gap:4px;padding:3px 5px;border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.025);font-size:9px;color:var(--muted); }
.friend-ui .friend-account-row time { margin-left:auto;font-size:9px; }
.friend-ui .friend-account-row #uid-cooldown { font-size:9px; }
.friend-ui .friend-account-row #uid-cooldown:empty { display:none; }
.friend-ui .friend-warning { display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:10px;padding:12px;border:1px solid #d8b27c44;border-radius:10px;background:#49341a44;color:#dfbe92; }
.friend-ui .friend-warning strong { font-size:12px; }
.friend-ui .friend-warning p { margin:4px 0 0;font-size:11px; }
.friend-ui .friend-warning #logout-countdown { display:block;font-size:23px; }
.friend-ui .friend-warning small { font-size:7px;letter-spacing:1px; }
.friend-ui .friend-error { border:1px solid #ff5c7a33;background:#ff5c7a0a;color:#ff8ba0;border-radius:10px;padding:12px;font-size:12px; }
.friend-ui .friend-account-link { display:flex;align-items:center;gap:7px;margin:0 auto;font-size:11px;color:var(--muted); }
.friend-ui .friend-account-link>svg:last-child { display:none; }
.friend-ui .friend-dialog { color:var(--text); }
.friend-ui .friend-dialog .dialog-heading { margin-bottom:16px; }
.friend-ui .friend-dialog .dialog-heading h2 { font-size:20px;margin:0; }
.friend-ui .friend-dialog .dialog-heading button { padding:5px;border:0;background:none;color:var(--muted); }
.friend-ui .friend-dialog::backdrop { background:#000b;backdrop-filter:blur(5px); }
.friend-ui .auth-card { margin:0; }
.friend-ui .account__grid.settings-grid { margin:0; }
.friend-ui .account__card.form-card { max-width:none;margin:0; }
.friend-ui .connection-setup { align-items:center; }
.friend-ui .connection-setup>header { width:100%; }
.friend-ui .connection-setup .panel--wide { align-self:center; }
.friend-ui .setup-details { display:flex;flex-direction:column;gap:10px;min-width:0; }
.friend-ui .setup-detail { display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;padding-block:8px;border-bottom:1px solid var(--line); }
.friend-ui .setup-detail>span { color:var(--muted);font-size:12px; }
.friend-ui .setup-detail>strong { font-size:13px;font-weight:500;overflow-wrap:anywhere; }
.friend-ui .setup-platforms { display:flex;flex-wrap:wrap;gap:10px; }
.friend-ui .setup-platforms .btn,.friend-ui .connection-setup .btn--ghost { display:flex;gap:7px;align-items:center;justify-content:center;text-align:center; }
.friend-ui .setup-note,.friend-ui .setup-steps { color:var(--muted);font-size:12px;line-height:1.7; }
.friend-ui .live--online .live__dot { background:#4fe3c1; }
.friend-ui .setup-steps { padding-left:20px; }
.friend-ui .customer-loading { font-size:12px;color:var(--muted); }
.user-app #confirm-dialog { background:#100e1cf5;border:1px solid #ffffff14;border-radius:20px; }
.user-app #confirm-dialog .primary { background:#7c5cff;border-color:#7c5cff;color:#fff; }
.user-app #confirm-dialog::backdrop { background:#000b;backdrop-filter:blur(5px); }
.friend-ui .feature-card[hidden],.friend-ui [hidden] { display:none!important; }
.friend-ui-portal { display:contents; }
.friend-ui .dd__menu { scrollbar-width:thin;scrollbar-color:#ffffff30 transparent; }
.friend-ui .check input:disabled~.check__text,.friend-ui .check input:disabled~.check__box { opacity:.45; }
.friend-ui .check:has(input:disabled) { cursor:not-allowed; }
.console-loading { display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px;min-height:400px;max-width:960px;margin:auto; }
.console-loading>span { border:1px solid #ffffff0b;border-radius:20px;background:#100e1cb8; }
@media(max-width:600px){
  .friend-ui .friend-session{padding:10px 12px;}
  .friend-ui .friend-status-row{gap:10px;flex-wrap:wrap;font-size:10px;}
  .friend-ui .friend-steps{gap:9px;font-size:9px;}
  .friend-ui .friend-account-row time{font-size:8px;}
  .friend-ui .friend-tier{display:none;}
  .friend-ui .friend-account-row{font-size:9px;gap:5px;}
  .friend-ui .setup-detail{grid-template-columns:85px minmax(0,1fr) auto;gap:7px;}
  .friend-ui .setup-platforms{flex-direction:column;}
}
@media(prefers-reduced-motion:reduce){.friend-ui *,.friend-ui *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

.spotlight-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 2rem;
  border-radius: 1.5rem;
  background-color: var(--spotlight-card-surface);
  box-shadow: var(--spotlight-card-shadow);
}

.spotlight-card__light,
.spotlight-card__grain,
.spotlight-card__border,
.spotlight-card__edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.spotlight-card__light,
.spotlight-card__grain {
  z-index: -1;
  opacity: 0;
}

.spotlight-card__grain {
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

.spotlight-card__border,
.spotlight-card__edge {
  z-index: 1;
  padding: 1px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

.spotlight-card__border {
  background: var(--spotlight-card-border);
}

.spotlight-card__edge {
  opacity: 0;
}


.friend-ui .app{ position: relative; min-height: 100vh; min-height: 100dvh; }
.friend-ui .stage{
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  pointer-events: none;
}
.friend-ui .stage > *{ pointer-events: auto; }
.friend-ui .stage:has(.dash){ align-items: flex-start; padding-top: 24px; }/* shared */
.friend-ui .panel{
  width: 100%; max-width: 440px;
  padding: 28px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 20px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px -20px rgba(0,0,0,0.6);
}
.friend-ui .brand{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.friend-ui .brand__name{ font-weight: 800; font-size: 20px; letter-spacing: 0.02em; }
.friend-ui .brand__sub{ font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.friend-ui .title{ margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.friend-ui .muted{ color: var(--muted); margin: 0 0 16px; font-size: 14px; }
.friend-ui .row{ display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.friend-ui .icon{ fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.friend-ui .btn{
  border: 1px solid var(--line); background: rgba(255,255,255,0.04);
  padding: 11px 18px; border-radius: 12px; cursor: pointer; white-space: nowrap;
  transition: background .15s, transform .1s, border-color .15s;
}
.friend-ui .btn:hover{ background: rgba(255,255,255,0.08); }
.friend-ui .btn:active{ transform: scale(0.98); }
.friend-ui .btn--primary{
  background: var(--acc, var(--accent)); border-color: transparent; color: #fff; font-weight: 600;
}
.friend-ui .btn--primary:hover{ filter: brightness(1.1); background: var(--acc, var(--accent)); }
.friend-ui .btn--ghost{ border: none; background: none; color: var(--muted); margin-top: 14px; }
.friend-ui .btn--launch{ min-width: 140px; }/* login */
.friend-ui .form{ display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.friend-ui .field{ display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.friend-ui .field input{
  padding: 12px 14px; border-radius: 12px; font-size: 16px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--line); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.friend-ui .field input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,255,0.2); }
.friend-ui .error{ color: var(--danger); font-size: 13px; }/* region / server picker */
.friend-ui .panel--wide{ max-width: 520px; }
.friend-ui .ping{ font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.friend-ui .flag{
  flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 4px 10px -4px rgba(0,0,0,0.6);
  position: relative;
}
.friend-ui .flag svg{ width: 100%; height: 100%; display: block; }
.friend-ui .flag::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.22), transparent 45%, rgba(0,0,0,0.18));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.friend-ui .flag--lg{ width: 40px; height: 40px; border-radius: 10px; }
.friend-ui .flag--sm{ width: 18px; height: 18px; border-radius: 5px; }
.friend-ui .srv{
  border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,0.28);
  transition: border-color .2s, box-shadow .2s;
}
.friend-ui .srv.is-open,.friend-ui .srv:focus-within{
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent);
}
.friend-ui .srv__trigger{
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: none; background: none; cursor: pointer; text-align: left; outline: none;
  border-radius: 16px;
}
.friend-ui .srv__chevron{
  flex: none; width: 16px; height: 16px;
  fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.friend-ui .srv.is-open .srv__chevron{ stroke: var(--acc); }
.friend-ui .srv__drawer{ overflow: hidden; }
.friend-ui .srv__list{
  list-style: none; margin: 0; padding: 6px; max-height: 312px; overflow-y: auto;
  border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.friend-ui .srv__list::-webkit-scrollbar{ width: 6px; }
.friend-ui .srv__list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.15); border-radius: 6px; }
.friend-ui .srv-row{
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 12px; cursor: pointer; user-select: none;
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.friend-ui .srv-row > *{ position: relative; z-index: 1; }
.friend-ui .srv-row > .srv-row__hl{
  position: absolute; inset: 0; z-index: 0; border-radius: 12px;
  background: rgba(255,255,255,0.05);
}
.friend-ui .srv-row.is-selected{
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  border-color: color-mix(in srgb, var(--acc) 32%, transparent);
}
.friend-ui .srv-row.is-down{ opacity: .45; cursor: not-allowed; }
.friend-ui .srv-row__text{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.friend-ui .srv-row__name{ font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-ui .srv-row__num{ color: var(--muted); font-weight: 500; }
.friend-ui .srv-row__status{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.friend-ui .st-dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.friend-ui .st--online .st-dot{ color: #4fe3c1; box-shadow: 0 0 6px #4fe3c1; }
.friend-ui .st--busy .st-dot{ color: #ffb547; }
.friend-ui .st--offline .st-dot{ color: var(--danger); }
.friend-ui .live{
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 24px; padding: 0 9px; border-radius: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--muted);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
}
.friend-ui .live__dot{ width: 6px; height: 6px; border-radius: 50%; background: #ff4d6a; position: relative; }
.friend-ui .live__dot::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit;
  animation: live-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}
.friend-ui .live--offline .live__dot{ background: var(--muted); }
.friend-ui .live--offline .live__dot::after{ animation: none; }
@keyframes live-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.friend-ui .radio{
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,0.22);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.friend-ui .radio svg{
  width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .25s ease .05s;
}
.friend-ui .srv-row.is-selected .radio{
  background: var(--acc); border-color: var(--acc); transform: scale(1.05);
  box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 55%, transparent);
}
.friend-ui .srv-row.is-selected .radio svg{ stroke-dashoffset: 0; }
.friend-ui .ping--good,.friend-ui .dot--good{ color: #4fe3c1; }
.friend-ui .ping--ok,.friend-ui .dot--ok{ color: #ffb547; }
.friend-ui .ping--bad,.friend-ui .dot--bad{ color: var(--danger); }/* accent picker (features summary) */
.friend-ui .accents{
  display: flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 10px; border-radius: 12px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--line);
}
.friend-ui .accent{
  position: relative; width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--c); border: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
  transition: transform .15s;
}
.friend-ui .accent:hover{ transform: scale(1.12); }
.friend-ui .accent:focus-visible{ outline: 2px solid var(--c); outline-offset: 3px; }
.friend-ui .accent__ring{
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--c); box-shadow: 0 0 10px var(--c);
}/* ── features ─────────────────────────────────────────────────────────── */
.friend-ui .dash{ width: 100%; max-width: 960px; display: flex; flex-direction: column; gap: 16px; }
.friend-ui .topbar{
  position: sticky; top: 12px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 18px;
  background: rgba(12, 11, 22, 0.7); border: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.friend-ui .topbar .brand{ margin: 0; flex: none; }
.friend-ui .chips{ display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.friend-ui .chips::-webkit-scrollbar{ display: none; }
.friend-ui .chip{
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.friend-ui .chip:hover{ border-color: var(--acc); background: rgba(255,255,255,0.07); }
.friend-ui .chip__dim{ color: var(--muted); font-variant-numeric: tabular-nums; }
.friend-ui .chip kbd{
  font: 11px ui-monospace, Consolas, monospace; padding: 2px 6px; border-radius: 6px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--line); color: var(--muted);
}
.friend-ui .chip--user{ padding: 0 12px 0 4px; }
.friend-ui .avatar{
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc); color: #fff; font-weight: 700; font-size: 12px; text-transform: uppercase;
}
.friend-ui .dot{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.friend-ui .summary{
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.friend-ui .summary__text{ flex: 1; min-width: 0; }
.friend-ui .summary .title{ margin: 0; }
.friend-ui .summary .muted{ margin: 2px 0 0; }
.friend-ui .ring{ position: relative; width: 56px; height: 56px; flex: none; }
.friend-ui .ring svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.friend-ui .ring circle{ fill: none; stroke-width: 5; }
.friend-ui .ring__track{ stroke: rgba(255,255,255,0.08); }
.friend-ui .ring__fill{
  stroke: var(--acc); stroke-linecap: round;
  transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 60%, transparent));
}
.friend-ui .ring__num{ position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.friend-ui .search{
  display: flex; align-items: center; gap: 8px; width: 240px;
  padding: 0 12px; height: 40px; border-radius: 12px; color: var(--muted);
  background: rgba(0,0,0,0.3); border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .15s;
}
.friend-ui .search:focus-within{ border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); }
.friend-ui .search input{ flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: 14px; color: var(--text); }
.friend-ui .search input::placeholder{ color: var(--muted); }/* two columns; an odd last card spans both and splits its own list in two */
.friend-ui .grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.friend-ui .cat{ max-width: none; padding: 18px !important; }
.friend-ui .grid > .cat:last-child:nth-child(odd){ grid-column: 1 / -1; }
.friend-ui .grid > .cat:last-child:nth-child(odd) .cat__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.friend-ui .cat__head{ display: flex; align-items: center; gap: 12px; }
.friend-ui .cat__icon{
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
}
.friend-ui .cat__title{ flex: 1; min-width: 0; }
.friend-ui .cat__title h3{ margin: 0; font-size: 15px; font-weight: 650; }
.friend-ui .cat__count{ font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.friend-ui .pill{
  height: 28px; padding: 0 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--acc); background: transparent; border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
  transition: background .15s;
}
.friend-ui .pill:hover{ background: color-mix(in srgb, var(--acc) 14%, transparent); }
.friend-ui .pill.is-on{ color: var(--muted); border-color: var(--line); }
.friend-ui .cat__bar{ height: 3px; border-radius: 3px; background: rgba(255,255,255,0.06); margin: 14px 0 12px; overflow: hidden; }
.friend-ui .cat__bar span{ display: block; height: 100%; background: var(--acc); border-radius: inherit; transition: width .35s cubic-bezier(.2,.8,.2,1); }
.friend-ui .cat__list{ display: grid; grid-template-columns: 1fr; gap: 8px; }
.friend-ui .check{
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px; cursor: pointer; min-height: 60px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.friend-ui .check:hover{ background: rgba(255,255,255,0.05); }
.friend-ui .check.is-on{
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  border-color: color-mix(in srgb, var(--acc) 35%, transparent);
}
.friend-ui .check input{ position: absolute; opacity: 0; pointer-events: none; }
.friend-ui .check__box{
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,0.25);
  display: grid; place-items: center;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.friend-ui .check:active .check__box{ transform: scale(0.9); }
.friend-ui .check__box svg{ width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .2s ease; }
.friend-ui .check.is-on .check__box{ background: var(--acc); border-color: var(--acc); box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 55%, transparent); }
.friend-ui .check.is-on .check__box svg{ stroke-dashoffset: 0; }
.friend-ui .check input:focus-visible + .check__box{ outline: 2px solid var(--acc); outline-offset: 2px; }
.friend-ui .check__text{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
.friend-ui .check__label{ font-size: 14px; font-weight: 550; }
.friend-ui .check__hint{ font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-ui .check__state{
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); opacity: .7;
}
.friend-ui .check.is-on .check__state{ color: var(--acc); opacity: 1; }/* feature row with combo boxes: one bordered unit, row on top, selects below */
.friend-ui .check-group{
  border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
  transition: background .15s, border-color .15s;
}
.friend-ui .check-group.is-on{
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  border-color: color-mix(in srgb, var(--acc) 35%, transparent);
}
.friend-ui .check-group .check,.friend-ui .check-group .check.is-on{ background: none; border: none; }
.friend-ui .check-group__opts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }/* −/+ slider (Slider.jsx) */
.friend-ui .check-group__slider{ padding: 0 12px 12px; }
.friend-ui .check-group__opts + .check-group__slider{ padding-top: 2px; }
.friend-ui .slider{ display: flex; flex-direction: column; gap: 8px; transition: opacity .2s; }
.friend-ui .slider.is-off{ opacity: .45; }
.friend-ui .slider__top{ display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.friend-ui .slider__label{ color: var(--muted); }
.friend-ui .slider__val{ font-weight: 600; font-variant-numeric: tabular-nums; color: var(--acc); display: inline-flex; overflow: hidden; }
.friend-ui .slider__val > span{ display: inline-block; }
.friend-ui .slider__unit{ white-space: pre; }
.friend-ui .slider__row{ display: flex; align-items: center; gap: 10px; }
.friend-ui .slider__btn{
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  background: rgba(0,0,0,0.35); border: 1px solid var(--line); color: var(--text);
  transition: background .15s, border-color .15s, transform .1s;
}
.friend-ui .slider__btn:hover:not(:disabled){ border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.friend-ui .slider__btn:active:not(:disabled){ transform: scale(0.9); }
.friend-ui .slider__btn:disabled{ opacity: .35; cursor: not-allowed; }
.friend-ui .slider__btn svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.friend-ui .slider__track{ position: relative; flex: 1; height: 30px; display: flex; align-items: center; }
.friend-ui .slider__track::before{
  content: ''; position: absolute; left: 0; right: 0; height: 6px; border-radius: 6px;
  background: rgba(255,255,255,0.08);
}
.friend-ui .slider__fill{
  position: absolute; left: 0; width: var(--pct); height: 6px; border-radius: 6px;
  background: var(--acc); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 50%, transparent);
  transition: width .18s cubic-bezier(.2,.8,.2,1);
}
.friend-ui .slider__thumb{
  position: absolute; left: var(--pct); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: #fff; border: 3px solid var(--acc); box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: left .18s cubic-bezier(.2,.8,.2,1), transform .15s; pointer-events: none;
}
.friend-ui .slider__track:hover .slider__thumb{ transform: scale(1.12); }
.friend-ui .slider__track input{
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.friend-ui .slider__track input:disabled{ cursor: not-allowed; }
.friend-ui .slider__track:has(input:focus-visible) .slider__thumb{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 35%, transparent); }/* animated combo box (Dropdown.jsx) */
.friend-ui .dd{
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%;
  height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer; overflow: hidden;
  font-size: 13px; color: var(--text); text-align: left;
  background: rgba(0,0,0,0.35); border: 1px solid var(--line); outline: none;
  transition: border-color .15s, box-shadow .2s, opacity .2s, background .15s;
}
.friend-ui .dd:hover{ border-color: rgba(255,255,255,0.16); }
.friend-ui .dd:focus-visible,.friend-ui .dd.is-open{
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
}
.friend-ui .dd.is-off{ opacity: .45; cursor: not-allowed; }
.friend-ui .dd__value{ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-ui .dd__chevron{
  flex: none; width: 14px; height: 14px;
  fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.friend-ui .dd.is-open .dd__chevron{ stroke: var(--acc); }
.friend-ui .dd__menu{
  position: fixed; z-index: 1000; margin: 0; padding: 6px; list-style: none;
  border-radius: 12px; overflow: hidden;
  background: rgba(16, 14, 28, 0.92); border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px color-mix(in srgb, var(--acc) 12%, transparent);
  font-size: 13px; color: var(--text);
}
.friend-ui .dd__opt{
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px; border-radius: 8px; cursor: pointer; user-select: none;
}
.friend-ui .dd__hl{
  position: absolute; inset: 0; border-radius: 8px; z-index: 0;
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
}
.friend-ui .dd__label{ position: relative; z-index: 1; flex: 1; }
.friend-ui .dd__tick{
  position: relative; z-index: 1; width: 14px; height: 14px; flex: none;
  fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .25s ease;
}
.friend-ui .dd__opt.is-selected{ color: var(--acc); font-weight: 600; }
.friend-ui .dd__opt.is-selected .dd__tick{ stroke-dashoffset: 0; }
.friend-ui .empty{ grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; }/* ── admin panel ──────────────────────────────────────────────────────── */
.friend-ui .chip--admin{ color: var(--acc); border-color: color-mix(in srgb, var(--acc) 35%, transparent); }
.friend-ui .admin{ max-width: 1080px; }
.friend-ui .card{
  padding: 18px; border-radius: 20px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px -20px rgba(0,0,0,0.6);
}
.friend-ui .card__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 32px; }
.friend-ui .card__head h3{ margin: 0; font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.friend-ui .count{
  font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.06);
}
.friend-ui .stats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.friend-ui .stat{
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.friend-ui .stat__val{ font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.friend-ui .stat__label{ font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.friend-ui .tabs{
  display: flex; gap: 4px; padding: 4px; border-radius: 14px; width: fit-content; max-width: 100%;
  background: rgba(12, 11, 22, 0.7); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.friend-ui .tab{
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 36px; padding: 0 14px; border-radius: 10px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 600; transition: color .15s;
}
.friend-ui .tab > :not(.tab__pill){ position: relative; z-index: 1; }
.friend-ui .tab.is-on{ color: #fff; }
.friend-ui .tab__pill{ position: absolute; inset: 0; border-radius: 10px; background: var(--acc); box-shadow: 0 6px 18px -6px var(--acc); }
.friend-ui .admin-grid{ display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.friend-ui .form-card{ display: flex; flex-direction: column; gap: 12px; }
.friend-ui .form-card .btn--primary{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.friend-ui .form-card .btn--primary:disabled{ opacity: .45; cursor: not-allowed; filter: none; }
.friend-ui .form-extra{ display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.friend-ui .field__hint{ font-size: 11px; color: var(--muted); opacity: .8; }
.friend-ui .input-row{ display: flex; gap: 8px; }
.friend-ui .input-row input{ flex: 1; min-width: 0; }
.friend-ui .mono{ font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }
.friend-ui .form-card .dd{ height: 44px; border-radius: 12px; font-size: 14px; }
.friend-ui .icon-btn{
  flex: none; display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 10px; cursor: pointer; color: var(--muted);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  transition: color .15s, background .15s, border-color .15s;
}
.friend-ui .input-row .icon-btn{ height: auto; min-width: 44px; border-radius: 12px; }
.friend-ui .icon-btn:hover{ color: var(--text); background: rgba(255,255,255,0.08); }
.friend-ui .icon-btn.is-on{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.friend-ui .icon-btn--danger:hover{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.friend-ui .icon-btn.is-confirm{ color: #fff; background: var(--danger); border-color: var(--danger); font-size: 12px; font-weight: 600; }
.friend-ui .credits{
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; color: #ffb547; background: rgba(255,181,71,0.1);
}
.friend-ui .credits.is-out{ color: var(--danger); background: rgba(255,92,122,0.1); }
.friend-ui .search--sm{ width: 180px; height: 34px; }
.friend-ui .search--sm input{ font-size: 13px; }
.friend-ui .ulist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
.friend-ui .urow{
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--line);
  transition: background .15s, opacity .2s;
}
.friend-ui .urow:hover{ background: rgba(255,255,255,0.05); }
.friend-ui .urow.is-banned{ opacity: .5; }
.friend-ui .urow__main{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.friend-ui .urow__name{ display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; flex-wrap: wrap; }
.friend-ui .urow__meta{ display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.friend-ui .urow__actions{ display: flex; gap: 6px; }
.friend-ui .you{ font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.friend-ui .avatar--admin{ background: #ff5c7a; }
.friend-ui .avatar--manager{ background: #ffb547; }
.friend-ui .avatar--reseller{ background: #5cb8ff; }
.friend-ui .avatar--user{ background: rgba(255,255,255,0.14); }
.friend-ui .role{
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px; border: 1px solid currentColor;
}
.friend-ui .role--admin{ color: #ff5c7a; }
.friend-ui .role--manager{ color: #ffb547; }
.friend-ui .role--reseller{ color: #5cb8ff; }
.friend-ui .role--user{ color: var(--muted); }
.friend-ui .chip .role{ margin-left: 2px; }
.friend-ui .tag{ font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.friend-ui .tag--bad{ color: var(--danger); background: rgba(255,92,122,0.12); }
.friend-ui .uid{
  font: 12px ui-monospace, Consolas, monospace; color: var(--acc); cursor: pointer;
  padding: 1px 6px; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--acc) 40%, transparent);
  background: none; transition: background .15s;
}
.friend-ui .uid:hover{ background: color-mix(in srgb, var(--acc) 12%, transparent); }
.friend-ui .uid--lg{ font-size: 13px; padding: 2px 8px; }
.friend-ui .plans{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.friend-ui .plan{
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 18px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.friend-ui .plan::before{
  content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--plan-c);
  box-shadow: 0 0 18px var(--plan-c);
}
.friend-ui .plan--starter{ --plan-c: #5cb8ff; }
.friend-ui .plan--pro{ --plan-c: #7c5cff; }
.friend-ui .plan--elite{ --plan-c: #ffb547; }
.friend-ui .plan__name{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--plan-c); }
.friend-ui .plan__price{ font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.friend-ui .plan__credits{ font-size: 13px; color: var(--muted); }
.friend-ui .plan__credits strong{ color: var(--text); }
.friend-ui .plan__count{ font-size: 12px; color: var(--muted); margin-top: 6px; }
.friend-ui .plan-pick{ width: 150px; flex: none; }
.friend-ui .stepper-num{ display: flex; align-items: center; gap: 6px; flex: none; }
.friend-ui .stepper-num__val{ min-width: 40px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.friend-ui .toggle{
  position: relative; flex: none; width: 40px; height: 24px; padding: 3px; border-radius: 999px; cursor: pointer;
  display: flex; justify-content: flex-start;
  background: rgba(255,255,255,0.1); border: 1px solid var(--line); transition: background .2s, border-color .2s;
}
.friend-ui .toggle.is-on{ justify-content: flex-end; background: var(--acc); border-color: var(--acc); }
.friend-ui .toggle__knob{ width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.friend-ui .toasts{
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 1100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px);
}
.friend-ui .toast{
  padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 500;
  background: rgba(16, 14, 28, 0.95); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7);
}/* ── account settings ─────────────────────────────────────────────────── */
.friend-ui .chip--out:hover{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.friend-ui .account__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 8px 4px 0; }
.friend-ui .eyebrow{ display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.friend-ui .account__title{ margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.friend-ui .account__title span{ color: var(--acc); }
.friend-ui .status{
  flex: none; margin-top: 4px; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1px solid currentColor;
}
.friend-ui .status--active{ color: #4fe3c1; background: rgba(79,227,193,0.08); }
.friend-ui .status--expired,.friend-ui .status--banned{ color: var(--danger); background: rgba(255,92,122,0.08); }
.friend-ui .account__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.friend-ui .account__card{ padding: 24px; }
.friend-ui .account__card h2{ margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.friend-ui .account__who{ display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.friend-ui .avatar--lg{ width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
.friend-ui .info-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.friend-ui .info{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.friend-ui .info__label{ font-size: 12px; color: var(--muted); }
.friend-ui .info__val{ font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.friend-ui .account__card.form-card{ gap: 14px; }
.friend-ui .account__card.form-card h2{ margin-bottom: 2px; }
.friend-ui .pass-input{ position: relative; display: flex; }
.friend-ui .pass-input input{ flex: 1; min-width: 0; padding-right: 44px; }
.friend-ui .pass-input__eye{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: none; border: none; cursor: pointer; color: var(--muted); transition: color .15s, background .15s;
}
.friend-ui .pass-input__eye:hover{ color: var(--text); background: rgba(255,255,255,0.06); }
.friend-ui .pass-input__eye svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.friend-ui .btn--light{
  align-self: flex-start; margin-top: 4px; font-weight: 600;
  background: #f2f2f5; color: #0b0a12; border-color: transparent;
}
.friend-ui .btn--light:hover{ background: #fff; }
.friend-ui .btn--light:disabled{ opacity: .5; cursor: wait; }
.friend-ui .success{ color: #4fe3c1; font-size: 13px; }

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.friend-ui .summary{ flex-wrap: wrap; }
.friend-ui .search{ width: 100%; order: 3; }
.friend-ui .chip__name,.friend-ui .chip__dim{ display: none; }
.friend-ui .admin-grid,.friend-ui .account__grid{ grid-template-columns: 1fr; }
.friend-ui .stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.friend-ui .search--sm{ width: 140px; order: 0; }
}

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.friend-ui .stage{ padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.friend-ui .stage:has(.dash){ padding-top: 12px; }
.friend-ui .panel{ padding: 20px !important; border-radius: 18px !important; }
.friend-ui .title{ font-size: 22px; }
.friend-ui .row{ flex-wrap: wrap; }
.friend-ui .row .btn{ flex: 1; }
.friend-ui .srv__trigger{ padding: 10px 12px; gap: 10px; }
.friend-ui .srv-row{ gap: 10px; padding: 8px; }
.friend-ui .srv-row .live{ display: none; }
.friend-ui .flag{ width: 30px; height: 30px; }
.friend-ui .flag--lg{ width: 36px; height: 36px; }
.friend-ui .flag--sm{ width: 18px; height: 18px; }
.friend-ui .card{ padding: 14px; border-radius: 18px; }
.friend-ui .stat{ padding: 12px 14px; }
.friend-ui .stat__val{ font-size: 20px; }
.friend-ui .tabs{ width: 100%; }
.friend-ui .tab{ flex: 1; justify-content: center; padding: 0 10px; }
.friend-ui .plans{ grid-template-columns: 1fr; gap: 8px; }
.friend-ui .plan{ flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px; }
.friend-ui .plan__price{ font-size: 20px; }
.friend-ui .plan__count{ margin: 0 0 0 auto; }
.friend-ui .urow{ flex-wrap: wrap; padding: 10px; }
.friend-ui .urow--reseller .urow__main{ flex: 1 1 calc(100% - 60px); }
.friend-ui .urow--wl .urow__main{ flex: 1 1 calc(100% - 70px); }
.friend-ui .urow--wl > .icon-btn{ order: 4; }
.friend-ui .urow--reseller .plan-pick,.friend-ui .urow--wl .plan-pick{ order: 3; flex: 1; width: auto; }
.friend-ui .urow--reseller .stepper-num{ order: 4; }
.friend-ui .chip .role{ display: none; }
.friend-ui .account__title{ font-size: 28px; }
.friend-ui .account__card{ padding: 18px; }
.friend-ui .btn--light{ align-self: stretch; }
.friend-ui .summary .muted{ white-space: nowrap; }
.friend-ui .dash{ gap: 12px; }
.friend-ui .topbar{ top: 8px; padding: 8px 8px 8px 14px; border-radius: 16px; }
.friend-ui .topbar .brand__name{ font-size: 17px; }
.friend-ui .chip{ height: 34px; padding: 0 10px; }
.friend-ui .chip--user{ padding: 0 3px; }
.friend-ui .chip__region{ display: none; }
.friend-ui .chip__dim{ display: inline; }
.friend-ui .chip kbd{ display: none; }
.friend-ui .summary{ padding: 14px 16px; gap: 12px; }
.friend-ui .ring{ width: 48px; height: 48px; }
.friend-ui .grid{ grid-template-columns: 1fr; gap: 12px; }
.friend-ui .grid > .cat:last-child:nth-child(odd) .cat__list{ grid-template-columns: 1fr; }
.friend-ui .cat{ padding: 14px !important; border-radius: 18px !important; }
.friend-ui .check{ min-height: 56px; }
}


.friend-ui .shiny-text{
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.friend-ui .shiny-text__glow{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(0.14em);
  pointer-events: none;
  user-select: none;
}