.avatar{display:block;object-fit:contain;font-size:0;position:relative;z-index:2}
html,body{scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden}html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
.eyebrow{font-size:10px;letter-spacing:.13em;font-weight:800;color:#a9c2d8}.market-heading,.settings-heading{display:flex;align-items:center;gap:12px;margin:12px 4px 18px}.market-heading .page-title,.settings-heading .page-title{margin:0}.market-heading .page-subtitle,.settings-heading .page-subtitle{margin:6px 0 0}.market-icon,.settings-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;font-size:30px;font-weight:700;color:#75d7ff;background:linear-gradient(145deg,rgba(24,151,230,.35),rgba(17,66,111,.26));border:1px solid rgba(92,205,255,.36);box-shadow:0 0 24px rgba(44,173,255,.18)}.settings-icon{color:#b9e6ff;font-size:25px}
.balance-card{background:linear-gradient(135deg,rgba(14,55,87,.98),rgba(7,26,45,.98));border-color:rgba(82,199,255,.42);position:relative;box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 25px rgba(24,159,225,.08),inset 0 1px 0 rgba(166,230,255,.12)}.balance-card:before{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;background:linear-gradient(130deg,rgba(48,190,255,.17),transparent 45%,rgba(38,226,167,.1))}.balance{position:relative;z-index:1}.wallet-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#8ceaff;background:rgba(67,190,255,.16);border:1px solid rgba(103,217,255,.55);font-size:20px;box-shadow:0 0 22px rgba(59,187,255,.24)}.sparkline{position:absolute;z-index:0;right:14px;bottom:36px;width:43%;height:72px;opacity:1}.spark-line{fill:none;stroke:#53d9ff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(62,210,255,.8))}.spark-fill{stroke:none}.balance-card .status-line{position:relative;z-index:1;margin-top:20px}.value{color:#f5fbff;text-shadow:0 2px 18px rgba(122,218,255,.16)}.positive{color:#36efad;text-shadow:0 0 12px rgba(49,239,173,.24)}.pnl{background:linear-gradient(135deg,rgba(14,50,73,.96),rgba(7,24,39,.97));border-color:rgba(56,188,180,.26);box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05)}.pnl strong{color:#36f0ad;text-shadow:0 0 18px rgba(41,234,160,.28)}
.agent{position:relative;overflow:visible;background:linear-gradient(145deg,rgba(18,51,77,.98),rgba(7,24,40,.98));border-color:rgba(87,184,235,.32);box-shadow:0 16px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(187,232,255,.1);padding:15px 14px 14px}.agent:before{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;background:linear-gradient(120deg,rgba(63,187,255,.08),transparent 44%,rgba(46,229,171,.06))}.agent-mimi{border-color:rgba(75,201,255,.55)}.agent-lulu{border-color:rgba(88,164,255,.45)}.agent-nunu{border-color:rgba(56,218,177,.4)}.agent-head{position:relative;display:grid;grid-template-columns:82px 1fr auto;gap:12px;align-items:center;min-height:76px}.avatar-stage{width:82px;height:82px;position:relative;display:grid;place-items:center;z-index:1}.avatar-stage:before{content:"";position:absolute;width:75px;height:75px;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(127,231,255,.55),rgba(36,143,216,.28) 54%,rgba(5,19,35,.2) 72%);border:2px solid rgba(110,220,255,.72);box-shadow:0 0 0 5px rgba(56,187,255,.12),0 0 25px rgba(47,183,255,.42),inset 0 0 20px rgba(118,235,255,.22)}.avatar-glow{position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle,rgba(54,224,255,.36),transparent 65%);filter:blur(8px);z-index:0}.avatar{width:106px;height:106px;max-width:none;transform:translateY(-7px);filter:drop-shadow(0 8px 10px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(80,204,255,.42))}.agent-identity{align-self:center;z-index:2}.agent-name{font-size:20px;text-shadow:0 2px 12px rgba(0,0,0,.28)}.agent-meta{color:#b6cbe0;font-size:12px;margin-top:4px}.scan-note{color:#8faec6;font-size:11px;margin-top:8px}.state{z-index:2;border-radius:999px;padding:8px 11px;background:rgba(11,130,91,.48);border:1px solid rgba(68,244,179,.42);color:#63f5ba;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 0 16px rgba(38,224,159,.1)}.state.warn{background:rgba(27,93,146,.46);border-color:rgba(103,196,255,.38);color:#8dd7ff}.state.wait{background:rgba(143,101,18,.44);border-color:rgba(255,202,87,.4);color:#ffd976}.stats{position:relative;z-index:2;margin-top:14px}.stat{background:rgba(4,17,29,.63);border:1px solid rgba(111,190,231,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.stat span{color:#41caff;font-size:14px;float:right}.stat label{display:block;color:#9eb8cd;font-size:11px}.stat strong{color:#f1f8ff}.progress{background:#0c263c;box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}.progress i{background:linear-gradient(90deg,#38c4ff,#3be5a6);box-shadow:0 0 14px rgba(40,219,171,.6)}
.settings-card{background:linear-gradient(145deg,rgba(15,44,68,.97),rgba(7,23,38,.98));border-color:rgba(88,181,228,.3);box-shadow:0 15px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(190,233,255,.07)}.section-heading{display:flex;align-items:center;gap:11px;margin-bottom:14px}.section-heading>div{flex:1}.section-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;color:#49edb1;background:rgba(33,214,160,.13);border:1px solid rgba(57,236,174,.3);font-size:20px}.settings-section-title{font-size:13px;font-weight:850;color:#dcecf8;margin-bottom:8px;letter-spacing:.01em}.permission-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid rgba(112,181,231,.13)}.permission-row>div{flex:1}.permission-row small{display:block;color:#98b0c4;font-size:11px;margin-top:4px}.permission-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;font-size:22px}.futures-mark{background:rgba(71,177,255,.16);color:#70d6ff}.spot-mark{background:rgba(51,220,165,.14);color:#52e8af}.api-card .button{margin-top:5px}.warning{background:linear-gradient(145deg,rgba(91,63,12,.75),rgba(52,35,7,.68));border-color:rgba(255,190,63,.38);box-shadow:0 10px 30px rgba(0,0,0,.2),0 0 20px rgba(255,186,54,.06)}.bottom-nav{background:rgba(3,13,24,.98);border-top-color:rgba(112,181,231,.24);box-shadow:0 -16px 34px rgba(0,0,0,.35)}
.agent-head{grid-template-columns:94px minmax(0,1fr);padding-right:88px;min-width:0}.agent-identity{min-width:0}.agent-name,.agent-meta,.scan-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.state{position:absolute;right:0;top:3px;max-width:84px;overflow:hidden;text-overflow:ellipsis}.avatar-stage{width:88px;height:88px}.avatar-stage:before{width:80px;height:80px}.avatar{width:96px;height:96px;transform:translateY(-5px)}
@media(max-width:390px){.agent-head{grid-template-columns:84px minmax(0,1fr);padding-right:78px}.avatar-stage{width:80px;height:80px}.avatar-stage:before{width:73px;height:73px}.avatar{width:88px;height:88px}.state{max-width:74px;padding:7px 8px;font-size:10px}.agent-name{font-size:18px}}
/* Mockup alignment: compact dark canvas, clear avatar column, restrained neon accents. */
html,body{background:#020a14;color:#f4f8fc}body{background:radial-gradient(520px 320px at 50% -80px,#102b44 0%,#071522 45%,#020a14 100%)}.app-shell:before{background:radial-gradient(420px 260px at 50% 8%,rgba(37,129,189,.08),transparent 70%)}
.topbar{height:70px}.brand{font-size:17px}.page-title{font-size:28px}.page-subtitle{font-size:12px;margin-bottom:16px}.market-heading,.settings-heading{margin-top:10px;margin-bottom:15px}.market-icon,.settings-icon{width:43px;height:43px;border-radius:14px}.card{border-radius:18px;padding:13px;margin:9px 0;background:linear-gradient(145deg,rgba(10,31,49,.97),rgba(5,18,31,.98));border-color:rgba(84,157,203,.28);box-shadow:0 10px 25px rgba(0,0,0,.2),inset 0 1px 0 rgba(186,230,255,.045)}.balance-card{min-height:131px;padding:14px;background:linear-gradient(145deg,rgba(12,48,75,.98),rgba(6,26,43,.99));border-color:rgba(73,180,237,.38)}.pnl{min-height:68px}.pnl strong{font-size:24px}.agent{padding:11px 11px 12px}.agent-head{grid-template-columns:82px minmax(0,1fr) auto;padding-right:0;gap:10px;min-height:78px}.avatar-stage{width:78px;height:78px}.avatar-stage:before{width:72px;height:72px}.avatar{width:84px;height:84px;transform:translateY(-4px)}.agent-identity{min-width:0}.agent-name{font-size:19px}.agent-meta{font-size:11px}.scan-note{font-size:10px;margin-top:6px}.state{position:static;max-width:82px;padding:7px 9px;font-size:10px}.stats{gap:7px;margin-top:10px}.stat{padding:8px 9px;min-height:48px;border-radius:12px;font-size:10px}.stat strong{font-size:12px;margin-top:4px}.status-line{font-size:10px;margin-top:8px}.progress{height:5px;margin-top:9px}.settings-heading{align-items:flex-start}.settings-heading .page-title{font-size:28px}.settings-card{padding:12px}.section-heading{margin-bottom:11px}.permission-row{padding:10px 0}.row{padding:11px 0}.warning{font-size:11px}.bottom-nav{height:72px}
@media(max-width:390px){.agent-head{grid-template-columns:78px minmax(0,1fr) auto;padding-right:0;gap:8px}.avatar-stage{width:74px;height:74px}.avatar-stage:before{width:68px;height:68px}.avatar{width:80px;height:80px}.state{max-width:70px;padding:6px 7px;font-size:9px}.agent-name{font-size:18px}}
.balance{min-height:78px}.balance-card{min-height:112px}.balance-card .status-line{margin-top:7px}.sparkline{bottom:27px;height:58px}.value{font-size:27px}.pnl{min-height:62px}.pnl strong{font-size:22px}.page-title{font-size:26px}.page-subtitle{font-size:11px}.card{padding:12px;margin:8px 0}.agent{padding:10px 10px 11px}.agent-head{min-height:72px}.avatar-stage{width:76px;height:76px}.avatar-stage:before{width:70px;height:70px}.avatar{width:82px;height:82px}.agent-name{font-size:18px}.stats{margin-top:8px}.status-line{font-size:10px}.settings-heading .page-title{font-size:26px}.settings-card{padding:11px}
.topbar{grid-template-columns:1fr auto 1fr}.topbar>div{grid-column:2}.topbar>.icon-button{grid-column:3;justify-self:end}.sparkline{z-index:0}.spark-line{stroke:currentColor}.pnl-positive{color:#32e69b}.pnl-negative{color:#ff5f76}.pnl-positive .spark-line{filter:drop-shadow(0 0 6px rgba(50,230,155,.72))}.pnl-negative .spark-line{filter:drop-shadow(0 0 6px rgba(255,95,118,.72))}
/* Compact scale to match the reference mockup. */
body{font-size:12px}.topbar{height:62px}.brand{font-size:22px}.subtitle{font-size:12px}.live{font-size:9px;padding:4px 8px}.live:before{width:6px;height:6px}.icon-button{font-size:24px}.market-heading,.settings-heading{gap:9px;margin:8px 3px 11px}.market-icon,.settings-icon{width:36px;height:36px;border-radius:11px;font-size:23px}.page-title,.settings-heading .page-title{font-size:22px;line-height:1}.page-subtitle{font-size:10px;margin-top:4px;margin-bottom:10px}.card{padding:9px;border-radius:15px;margin:6px 0}.balance-card{min-height:98px;padding:10px}.balance{min-height:65px}.eyebrow{font-size:8px;letter-spacing:.1em}.value{font-size:22px;margin-top:5px}.positive{font-size:10px;margin-top:3px}.wallet-icon{width:29px;height:29px;border-radius:9px;font-size:16px}.sparkline{height:48px;bottom:24px;right:10px}.balance-card .status-line{font-size:8px;margin-top:3px}.pnl{min-height:53px;padding:9px}.pnl strong{font-size:19px;margin-top:3px}.pill{font-size:9px;padding:5px 7px}.agent{padding:8px 8px 9px}.agent-head{grid-template-columns:69px minmax(0,1fr) auto;gap:7px;min-height:62px}.avatar-stage{width:65px;height:65px}.avatar-stage:before{width:60px;height:60px}.avatar{width:70px;height:70px;transform:translateY(-3px)}.agent-name{font-size:16px}.agent-meta{font-size:9px;margin-top:2px}.scan-note{font-size:8px;margin-top:4px}.state{max-width:69px;padding:5px 7px;font-size:8px}.stats{gap:5px;margin-top:6px}.stat{padding:6px 7px;min-height:39px;border-radius:9px;font-size:8px}.stat span{font-size:11px}.stat label{font-size:8px}.stat strong{font-size:10px;margin-top:2px}.status-line{font-size:8px;margin-top:5px}.progress{height:4px;margin-top:6px}.settings-card{padding:9px}.section-heading{gap:8px;margin-bottom:8px}.section-icon,.permission-icon{width:29px;height:29px;border-radius:9px;font-size:16px}.settings-section-title{font-size:10px;margin-bottom:4px}.permission-row{gap:8px;padding:7px 0}.permission-row strong{font-size:11px}.permission-row small{font-size:8px;margin-top:2px}.row{padding:8px 0}.row strong,.row>span:last-child{font-size:10px}.button{padding:10px;border-radius:10px;font-size:10px}.security{font-size:9px;line-height:1.4}.bottom-nav{height:76px}.nav-item span{font-size:18px}.nav-item small{font-size:12px}
.split-summary{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);align-items:center;gap:12px;min-height:86px}.summary-col{min-width:0}.summary-col .value{white-space:nowrap}.summary-col .status-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}.summary-divider{width:1px;height:54px;background:linear-gradient(180deg,transparent,rgba(123,204,245,.38),transparent)}.pnl-col strong{display:block;color:#35eca9;font-size:22px;letter-spacing:-.04em;margin-top:5px;text-shadow:0 0 16px rgba(41,234,160,.24)}
.brand-name{font-weight:900;letter-spacing:-.055em;background:linear-gradient(110deg,#ffffff 8%,#d8f3ff 48%,#73dcff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(95,210,255,.18)}.nav-icon,.market-icon svg,.settings-icon svg,.permission-icon svg{display:grid;place-items:center}.nav-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.market-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.market-icon svg path:nth-child(2){fill:currentColor;stroke:none}.settings-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.permission-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.permission-icon svg path:nth-child(2){fill:currentColor;stroke:none}.nav-item.active .nav-icon{filter:drop-shadow(0 0 7px rgba(54,183,255,.55))}.nav-item .nav-icon{height:26px}.nav-item small{line-height:1}.market-icon{flex:0 0 auto}
.live.status-live{color:#4af0ae;border-color:rgba(63,240,167,.7);background:rgba(17,106,78,.24)}.live.status-off{color:#a9bbcc;border-color:rgba(153,174,193,.45);background:rgba(73,91,108,.22)}.live.status-sleep{color:#ffd36a;border-color:rgba(255,197,73,.62);background:rgba(125,88,13,.28)}.pnl-col strong.pnl-up{color:#35eca9}.pnl-col strong.pnl-down{color:#ff6077;text-shadow:0 0 14px rgba(255,96,119,.24)}.pnl-col strong.pnl-flat{color:#a9bfd0}
.live.status-off:before{background:#91a6b8;box-shadow:0 0 5px rgba(145,166,184,.35)}.live.status-sleep:before{background:#ffd36a;box-shadow:0 0 7px rgba(255,211,106,.6)}
.market-heading{position:relative}.agent-control{margin-left:auto;align-self:flex-start;position:relative}.scan-toggle{border:1px solid rgba(64,231,167,.42);border-radius:999px;padding:6px 9px;background:rgba(11,116,78,.35);color:#58efb2;font-size:9px;font-weight:850;cursor:pointer;white-space:nowrap}.scan-toggle.toggle-off{background:rgba(65,82,98,.3);border-color:rgba(157,180,198,.35);color:#afc0ce}.toggle-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:4px;vertical-align:1px}.toggle-chevron{font-size:12px;margin-left:3px}.agent-picker{display:none;position:absolute;right:0;top:33px;z-index:8;width:178px;padding:9px;border:1px solid rgba(91,191,236,.34);border-radius:13px;background:rgba(5,20,34,.98);box-shadow:0 14px 28px rgba(0,0,0,.4)}.agent-picker.open{display:block}.picker-title{font-size:9px;font-weight:850;color:#d9edf9;margin-bottom:6px}.agent-check{display:flex;align-items:center;gap:7px;padding:6px 3px;color:#e6f3fb;font-size:10px;cursor:pointer;border-top:1px solid rgba(111,173,213,.12)}.agent-check input{position:absolute;opacity:0;pointer-events:none}.checkmark{width:14px;height:14px;border-radius:4px;border:1px solid #608198;background:#0a2033;position:relative;flex:0 0 14px}.agent-check input:checked+.checkmark{background:#27dca2;border-color:#57f0b8;box-shadow:0 0 9px rgba(39,220,162,.35)}.agent-check input:checked+.checkmark:after{content:'✓';position:absolute;color:#03171a;font-size:11px;font-weight:900;left:2px;top:-1px}.agent-check b{display:block;font-size:10px}.agent-check small{display:block;color:#88a7bc;font-size:8px;margin-top:1px}.agent-idle{opacity:.48;filter:saturate(.35)}.agent-idle .avatar{filter:grayscale(.7) brightness(.68);}.agent-idle .avatar-stage:before{border-color:rgba(133,157,176,.38);box-shadow:0 0 0 4px rgba(124,149,169,.06),0 0 15px rgba(87,108,126,.12)}.agent-idle .progress i{background:#607486;box-shadow:none}.agent-idle .state{background:rgba(73,91,108,.32);border-color:rgba(141,163,178,.25);color:#a8bac8}
.market-heading .agent-control{margin-left:0;align-self:flex-start;flex:0 0 auto}.toggle-chevron{display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin:0 0 0 6px;vertical-align:middle}
.market-heading{align-items:center}.picker-caption{font-size:10px;color:#9bb4c8;line-height:1.2}.agent-picker{left:0;right:auto}.toggle-dot{display:none}
.split-summary{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:0;align-items:center;min-height:86px}
.summary-top,.summary-values{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;grid-column:1/-1;min-width:0}
.summary-top .eyebrow{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.summary-values .value,.summary-values strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.summary-values .value{font-size:20px}
.summary-values strong{display:block;font-size:20px;letter-spacing:-.04em}
.summary-values strong.pnl-up{color:#35eca9;text-shadow:0 0 16px rgba(41,234,160,.24)}
.summary-values strong.pnl-down{color:#ff6077;text-shadow:0 0 14px rgba(255,96,119,.24)}
.summary-values strong.pnl-flat{color:#a9bfd0}
.summary-update{grid-column:1/-1;min-width:0;border-top:1px solid rgba(112,181,231,.14);padding-top:6px;margin-top:7px;color:#89a6bb;font-size:8px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html,body{touch-action:manipulation}
.brand{display:inline-flex;align-items:center;gap:6px}.brand .live{margin-left:0}
@media(max-width:340px){.summary-values .value,.summary-values strong{font-size:18px}}
/* —— Dong bo size UI: 5 cap —— */
.live,.state,.pill{font-size:10px}
.scan-toggle,.picker-caption,.agent-meta,.picker-title,.agent-check,.agent-check b,.permission-row strong,.row strong,.row>span:last-child,.settings-section-title,.button{font-size:12px}
.eyebrow,.scan-note,.stat label,.stat strong,.status-line,.summary-update,.agent-check small,.permission-row small,.security{font-size:10px}
.agent-name{display:inline-block;max-width:100%;font-weight:900;letter-spacing:-.055em;background-image:linear-gradient(110deg,#ffffff 0%,#d8f3ff 30%,#73dcff 85%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(95,210,255,.18)}
.agent-head .state{align-self:start;margin-top:1.5px}
html,body{overflow:hidden}
.app-shell{position:relative;left:50%;transform:translateX(-50%);transform-origin:top center;padding-left:12px;padding-right:12px;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
.topbar{height:70px;align-items:start;padding-top:20px}
.market-heading{margin-top:30px}
.card.agent{margin-top:10px}
.card.balance-card{margin-top:24px}
.state{max-width:none}
#settings .card:first-child{margin-top:24px}
.pill-off{color:#a9bbcc;border-color:rgba(153,174,193,.45);background:rgba(73,91,108,.22)}
.pill-warn{color:#ffd36a;border-color:rgba(255,197,73,.62);background:rgba(125,88,13,.28)}
.key-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(2,9,17,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);padding:16px}
.key-box{position:relative;width:min(92vw,360px);background:linear-gradient(145deg,rgba(10,31,49,.98),rgba(5,18,31,.99));border:1px solid rgba(84,157,203,.38);border-radius:18px;padding:20px 16px 16px;box-shadow:0 22px 60px rgba(0,0,0,.55)}
.key-close{position:absolute;top:6px;right:8px;border:0;background:transparent;color:#9bb4c8;font-size:18px;line-height:1;padding:8px;cursor:pointer}
.key-label{display:block;font-size:12px;font-weight:800;color:#dcecf8;margin:0 0 6px}
.key-input{display:block;width:100%;box-sizing:border-box;background:#0a2033;border:1px solid rgba(111,173,213,.35);border-radius:10px;color:#e6f3fb;font-size:12px;padding:10px;margin:0 0 12px;outline:none}
.key-input:focus{border-color:rgba(64,231,167,.6)}
.key-error{min-height:15px;text-align:center;color:#ff6077;font-size:11px;margin:0 0 8px}
.key-agree{display:block;width:100%;max-width:220px;margin:0 auto}
.key-agree:disabled{opacity:.6;cursor:default}
.key-actions{display:flex;justify-content:center;gap:10px}
.key-actions .button{flex:1;max-width:140px;width:auto;margin:0}
.key-cancel{background:transparent;border:1px solid rgba(111,173,213,.45);color:#9bb4c8}
.scan-toggle:disabled{opacity:.5;cursor:default}
.user-list{max-height:210px;overflow-y:auto;margin:0 0 6px}
.user-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(112,181,213,.12);font-size:12px}
.user-list .user-row:last-child{border-bottom:none}
.user-id{color:#dcecf8;font-weight:700;flex:0 0 auto}
.user-name{flex:1;min-width:0;color:#9bb4c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-del{border:1px solid rgba(255,95,118,.5);background:rgba(115,30,45,.3);color:#ff8a9b;border-radius:8px;font-size:11px;padding:5px 10px;cursor:pointer;flex:0 0 auto}
.user-divider{border-top:1px solid rgba(112,181,213,.25);margin:6px 0 10px}
.user-add-row{display:flex;gap:8px;align-items:stretch}
.user-input{margin:0;flex:1;min-width:0}
.user-add{white-space:nowrap;padding:10px 16px;width:auto;flex:0 0 auto}
.user-error{min-height:15px;text-align:center;color:#ff6077;font-size:11px;margin:0 0 8px}
.user-empty,.user-loading{color:#9bb4c8;font-size:11px;text-align:center;padding:8px 0}
.api-card .section-heading{border-bottom:1px solid rgba(112,181,231,.22);padding-bottom:10px;margin-bottom:12px}
.settings-section-title{border-bottom:1px solid rgba(112,181,231,.22);padding-bottom:6px;margin-bottom:8px}
/* —— Settings text scale: 12px content / 16px personal info / 10px badges —— */
.permission-row small{font-size:12px}
.security{font-size:12px;line-height:1.5}
.row strong,.row>span:last-child{font-size:16px;font-weight:750}
/* —— Popups: no title, roomier inputs, full-width buttons —— */
.key-box{width:min(94vw,380px);background:linear-gradient(160deg,rgba(13,38,60,.99),rgba(5,17,30,.99));border:1px solid rgba(92,205,255,.34);border-radius:20px;padding:22px 18px 18px;box-shadow:0 26px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.key-close{top:10px;right:10px;padding:8px;font-size:19px;color:#a9c0d6;border-radius:10px}
.key-close:hover{background:rgba(255,255,255,.07);color:#e8f4ff}
.key-label{font-size:12px;font-weight:800;color:#cfe3f5;margin:0 0 8px}
.key-input{padding:11px 12px;border-radius:12px;font-size:13px;margin-bottom:14px;border:1px solid rgba(112,173,213,.4);background:#081c2e}
.key-input:focus{border-color:rgba(64,231,167,.65);box-shadow:0 0 0 3px rgba(64,231,167,.12);outline:none}
.key-error{min-height:16px;font-size:11px;margin:0 0 10px}
.key-agree{width:100%;max-width:none;padding:12px;font-size:13px;font-weight:850;margin:0}
.key-actions .button{padding:12px;font-size:13px;font-weight:850;max-width:none}
.user-list{max-height:230px;margin:0 0 8px}
.user-row{padding:9px 2px;font-size:13px;gap:10px}
.user-id,.user-name{font-size:13px}
.user-del{font-size:12px;padding:6px 12px;border-radius:9px}
.user-divider{margin:8px 0 12px;border-top-color:rgba(112,181,231,.3)}
.user-input{font-size:13px;padding:11px 12px;border-radius:12px}
.user-add{padding:11px 18px;font-size:13px;font-weight:850}
.user-error{font-size:11px;margin-bottom:10px}
/* —— iOS auto-zooms focused inputs below 16px: keep all inputs at 16px —— */
.key-input,.user-input{font-size:16px}
/* —— Agree button sits right under the Secret field when there is no error —— */
.key-input{margin-bottom:10px}
.key-error:empty{min-height:0;margin:0}
/* —— Admin box: clear ✕ zone, 3 equal columns, matching button widths —— */
.key-box{padding-top:42px}
.key-close{top:8px;right:8px;padding:6px;font-size:18px}
.user-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 2px;font-size:13px}
.user-del{width:74px;text-align:center;padding:8px 10px;font-size:12px;border-radius:10px}
.user-add{width:74px;text-align:center;padding:11px 0}
.user-divider{margin:8px 0 8px}
.user-error{margin:8px 0 0}
/* —— Settings heading scale: title 16px (Settings 22 - 6), fields 14px —— */
.settings-section-title{font-size:16px;padding-bottom:8px;margin-bottom:10px}
.api-card .section-heading strong{font-size:16px}
.permission-row strong{font-size:14px}
.row strong,.row>span:last-child{font-size:14px}