:root{color-scheme:dark;--page:#060a16;--panel:#0c1325;--panel-2:#0b101f;--panel-3:#0b1328;--line:#202944;--line-bright:#34436e;--text:#f2f3ff;--muted:#a2aecb;--soft:#7f8ca9;--violet:#a42dff;--purple:#8136ff;--blue:#047bff;--cyan:#00c6ff;--green:#04e995;--gold:#ffe20b;--halo:rgba(134,36,252,.22);--shadow:0 7px 22px rgba(0,0,0,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 58% 37%,#0a1332 0,#060a16 58%,#040713 100%);color:var(--text);font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif;font-size:12px}button,input,select{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.svg-library{width:0;height:0;position:absolute;visibility:hidden;overflow:hidden}.visually-hidden{position:absolute!important;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;width:1px;height:1px;white-space:nowrap}.app-shell{display:grid;grid-template-areas:'header header' 'sidebar main' 'footer footer';grid-template-columns:166px minmax(0,1fr);grid-template-rows:48px minmax(535px,1fr) 17px;column-gap:14px;min-height:603px;height:100vh;padding:0 0 0 8px;max-width:1920px;margin:auto}.app-shell::before{content:"";position:fixed;z-index:-1;width:400px;height:400px;top:60px;left:27%;background:radial-gradient(circle,rgba(67,25,165,.08),transparent 70%);pointer-events:none}
/* HEADER */
.topbar{grid-area:header;display:flex;align-items:center;gap:12px;min-width:0;z-index:4;padding-right:4px}.brand{flex:0 0 184px;display:flex;align-items:center;gap:7px;min-width:0}.brand-mark{width:49px;height:49px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(175,37,255,.6))}.brand-copy{display:flex;flex-direction:column;gap:1px;white-space:nowrap}.brand-name{font-size:22px;line-height:1.1;font-weight:850;letter-spacing:-.9px}.brand-name span{color:#b446fd}.brand-subtitle{font-size:10px;color:#b1bbdf}.topnav{height:33px;flex:1;max-width:508px;min-width:0;display:flex;align-items:center;justify-content:space-between;padding:2px 6px;border:1px solid #1d2846;border-radius:8px;background:rgba(13,19,36,.85);box-shadow:0 4px 15px rgba(0,0,0,.16)}.topnav-item{height:30px;display:flex;align-items:center;justify-content:center;flex:1;gap:9px;border:1px solid transparent;border-radius:7px;background:transparent;color:#b0bce0;white-space:nowrap;font-size:10px;padding:0 8px;transition:background .2s,color .2s}.topnav-item svg{width:15px;height:15px}.topnav-item.is-active{background:linear-gradient(105deg,#4d1c94,#191c57);border-color:#aa3cff;color:#fff;box-shadow:0 0 0 1px rgba(158,53,255,.13),0 0 15px rgba(170,45,255,.42)}.topnav-item:hover:not(.is-active),.side-link:hover:not(.is-active){background:#171b35;color:#fff}.header-status{display:flex;align-items:center;gap:5px;margin-left:auto;min-width:0}.tiny-status{height:38px;min-width:106px;padding:5px 10px;display:flex;align-items:center;gap:10px;border:1px solid #121b33;border-radius:7px;background:rgba(10,17,33,.93)}.tiny-status span:last-child{display:flex;flex-direction:column;gap:3px}.tiny-status strong{font-size:10px;line-height:1;white-space:nowrap;font-weight:500}.tiny-status small{font-size:9px;color:#9faaca;white-space:nowrap}.status-dot{display:inline-block;flex:none;width:9px;height:9px;background:var(--gold);border-radius:50%;box-shadow:0 0 12px rgba(255,208,9,.45)}.status-dot.is-online{background:var(--green);box-shadow:0 0 13px rgba(0,243,142,.63)}.status-dot.is-busy{background:var(--cyan);box-shadow:0 0 12px rgba(0,198,255,.6)}.status-dot.big{width:17px;height:17px}.wifi-tile{width:34px;height:36px;border:1px solid #203459;background:linear-gradient(145deg,#0c1e3e,#0a1224);border-radius:7px;display:grid;place-items:center;color:var(--cyan)}.wifi-tile svg{width:21px;height:21px}.wifi-tile:hover{border-color:var(--cyan)}.ip-select{min-width:142px;max-width:200px;height:36px;border:1px solid #23304e;border-radius:6px;background:#0c1426;padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap}.ip-select svg{width:13px;height:13px}
/* SIDEBAR */
.sidebar{grid-area:sidebar;min-height:0;margin-top:2px;margin-bottom:1px;padding:6px 4px 9px 4px;display:flex;flex-direction:column;justify-content:space-between;border-radius:9px 12px 10px 10px;background:linear-gradient(172deg,#080e21 10%,#090e20 73%,#11102c);border:1px solid #15223e;box-shadow:inset 3px 0 9px rgba(47,13,124,.12)}.side-links{display:flex;flex-direction:column}.side-link{height:49px;width:100%;border:1px solid transparent;border-bottom-color:#131f36;border-radius:0;background:transparent;text-align:left;display:flex;align-items:center;gap:15px;color:#aeb9e2;padding:0 10px;min-width:0;position:relative}.side-link svg{width:22px;height:22px;flex:none;color:#a3adf8}.side-link>span{display:flex;flex-direction:column;gap:4px;min-width:0;white-space:nowrap}.side-link strong{font-size:10px;color:#edf0ff;font-weight:650}.side-link small{font-size:9px;color:#aab5dc}.side-link.is-active{background:linear-gradient(90deg,#3c186f,#141936);border-color:#5442a1;border-left:3px solid #b12aff;border-radius:8px;box-shadow:inset 14px 0 25px rgba(148,51,255,.07),0 0 15px rgba(133,19,215,.13)}.side-link.is-active svg{color:#a94aff}.scene-card{border:1px solid #3a276a;border-radius:7px;min-height:104px;padding:10px 5px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;box-shadow:inset 0 0 17px rgba(123,46,190,.07);background:linear-gradient(150deg,#0b1129,#0b1121)}.symbols{display:flex;align-items:center;gap:8px;color:#ab3bfc;font-size:26px;line-height:1;font-weight:300;text-shadow:0 0 12px rgba(195,38,255,.5)}.scene-card strong{font-size:11px;font-weight:450;color:#b4c4f9}.scene-card>span{font-size:9px;color:#aebaf0;letter-spacing:.4px}
/* MAIN */
.main-content{grid-area:main;min-width:0;display:grid;grid-template-rows:208px 61px minmax(250px,1fr);gap:9px;min-height:0}.hero{position:relative;isolation:isolate;min-width:0;overflow:hidden;border:1px solid #2a3e88;border-radius:10px;background:linear-gradient(90deg,#091942 0,#111242 45%,#06112a 100%);box-shadow:inset 0 0 20px rgba(10,42,155,.18)}.hero-art{position:absolute;z-index:-2;top:0;bottom:0;right:187px;width:390px;background-image:url('assets/hero-art.png');background-repeat:no-repeat;background-size:390px 207px;background-position:right top;opacity:.98}.hero-light{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,22,59,.98) 0%,rgba(12,21,66,.94) 26%,rgba(7,11,35,.15) 52%,rgba(4,10,26,.03) 75%,rgba(6,12,30,.6) 100%),radial-gradient(ellipse at 53% 98%,rgba(128,28,245,.25),transparent 38%);pointer-events:none}.hero-copy{position:relative;z-index:2;top:17px;left:23px;width:min(430px,55%)}.eyebrow{margin:0 0 13px;font-size:8px;color:#98c9ff;letter-spacing:4px;white-space:nowrap;font-weight:600}.eyebrow b{font-weight:600;color:#cd55fa}.hero h1{font-size:42px;line-height:.99;letter-spacing:-1.5px;margin:0 0 7px;font-weight:830;text-shadow:0 3px 8px rgba(0,0,0,.17)}.hero h1 span{color:#b945ff}.hero-description{font-size:10.5px;color:#b1bee6;margin:0 0 11px;white-space:nowrap}.hero-actions{display:flex;gap:11px}.primary-action,.secondary-action{display:flex;align-items:center;gap:12px;height:47px;border-radius:7px;padding:0 14px;text-align:left;white-space:nowrap}.primary-action{min-width:159px;border:1px solid rgba(147,107,255,.74);background:linear-gradient(105deg,#922af3,#5855fa 52%,#038ef7);box-shadow:0 0 17px rgba(166,39,246,.34)}.secondary-action{min-width:140px;border:1px solid #34456d;background:linear-gradient(100deg,rgba(11,20,48,.94),rgba(16,28,58,.9))}.primary-action svg,.secondary-action svg{width:25px;height:25px;flex:none}.primary-action svg{fill:#fff;stroke-width:1}.primary-action span,.secondary-action span{display:flex;flex-direction:column;gap:3px}.hero-actions strong{font-size:12px}.hero-actions small{font-size:9px;font-weight:400;color:#e0e5ff}.secondary-action small{color:#bbc7e9}.primary-action:hover{filter:brightness(1.12)}.secondary-action:hover{border-color:#a05ef8}.system-panel{position:absolute;right:7px;top:10px;bottom:14px;width:184px;z-index:2;background:linear-gradient(160deg,rgba(10,17,37,.97),rgba(12,20,37,.94));border:1px solid #303f61;border-radius:9px;box-shadow:0 3px 12px rgba(0,0,0,.4),inset 0 0 17px rgba(35,50,100,.14);padding:10px 11px 8px}.system-panel h2{font-size:10px;margin:0 0 7px;font-weight:650}.system-connected{display:flex;align-items:center;gap:11px;border:1px solid #162540;border-radius:8px;min-height:34px;padding:3px 6px;margin-bottom:5px}.system-connected>span:last-child{display:flex;flex-direction:column;gap:2px;overflow:hidden}.system-connected strong{font-size:9.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.system-connected small{font-size:8.5px;color:#aeb8d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.system-spec{display:flex;align-items:center;gap:10px;height:24px;border-bottom:1px solid #1a253b;color:#c2cce8;font-size:9px;white-space:nowrap}.system-spec:last-child{border:0}.system-spec svg{width:14px;height:14px;color:#c4cdfb}.system-spec strong{margin-left:auto;font-size:9px;font-weight:600;color:#23b5ff;overflow:hidden;text-overflow:ellipsis}.system-spec strong.accent-cyan{color:#00edb9}.system-spec strong.accent-gold{color:var(--gold)}.system-spec strong.accent-yellow{color:var(--gold)}.system-spec strong.online{color:var(--green)}
/* STAT CARDS */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;min-width:0}.stat-card{display:flex;align-items:center;gap:13px;min-width:0;min-height:0;border-radius:8px;border:1px solid #202f50;background:linear-gradient(135deg,#0c1528,#090f1d 84%);padding:8px 16px}.stat-icon{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:8px}.stat-icon svg{width:24px;height:24px}.stat-icon.purple{background:#1e143e;border:1px solid #533180;color:#ab3efb}.stat-icon.cyan{background:#041e31;border:1px solid #07517d;color:#00b8fb}.stat-icon.blue{background:#091d44;border:1px solid #1d407a;color:#108fff}.stat-icon.green{background:#09272a;border:1px solid #09453f}.stat-card>div:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}.stat-card div>span:not(.status-dot){font-size:10px;color:#b6c0e0}.stat-card strong{font-size:17px;font-weight:760;line-height:1.05}.stat-card small{font-size:9px;color:#aab6d9;white-space:nowrap}.stat-card .stat-ready{font-size:14px;color:var(--gold)}.stat-card .stat-ready.online{color:var(--green)}
/* LOWER DASHBOARD PANELS */
.workspace{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:11px;min-height:0;min-width:0}.console-panel,.payload-panel{border:1px solid #223151;background:linear-gradient(125deg,#091225,#0a101f);border-radius:9px;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}.panel-header{height:38px;min-height:38px;padding:7px 9px 5px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-header h2{font-size:11px;margin:0;display:flex;align-items:center;gap:9px;font-weight:650;white-space:nowrap}.panel-header h2 svg{width:18px;height:18px;color:#ab39f9}.panel-header-actions{display:flex;gap:8px}.quiet-button{height:23px;border:1px solid #324261;border-radius:5px;background:#18223b;font-size:9px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 9px}.quiet-button svg{width:12px;height:12px}.quiet-button:hover{background:#263452}.console-output{background:#070c19;margin:0 10px 10px;flex:1;min-height:0;border:1px solid #1c2a43;border-radius:7px;overflow:auto;padding:10px 8px;scrollbar-color:#596b95 #111c30;scrollbar-width:thin}.log-line{display:flex;gap:6px;min-height:17px;width:max-content;font:9px/1.55 "Cascadia Code",Consolas,"Liberation Mono",monospace;white-space:pre}.log-time{color:#acb8dc}.log-level{color:#0cd3ff}.log-level.success{color:#0ff09c}.log-level.error{color:#ff687b}.log-level.warn{color:#fbd441}.log-text{color:#bbc8e6}.log-text.success{color:#21f99e}.log-text .log-special{color:#ffdc31}.payload-heading{padding-right:13px;min-height:36px;height:36px}.search-wrap{border:1px solid #203251;background:#081023;border-radius:6px;height:25px;width:179px;max-width:62%;display:flex;flex-direction:row-reverse;align-items:center;padding:0 8px;gap:6px;color:#95a7d1}.search-wrap svg{width:13px;height:13px;flex:none}.search-wrap input{width:100%;min-width:0;color:#e6edff;background:transparent;border:0;outline:0;font-size:9px}.search-wrap:focus-within{border-color:#7d4ddd}.search-wrap input::placeholder{color:#7989aa}.filter-row{display:flex;gap:7px;align-items:center;padding:2px 11px 7px;flex-wrap:nowrap;overflow:auto;scrollbar-width:none;min-height:29px}.filter-row::-webkit-scrollbar{display:none}.filter-chip{flex:1;min-width:0;height:19px;padding:0 8px;border:1px solid #293c5b;border-radius:6px;background:#0a1122;font-size:9px;color:#b7c1df;white-space:nowrap}.filter-chip.is-active{border-color:#9635ef;background:linear-gradient(100deg,#ad29f9,#7540f1);color:#fff;box-shadow:0 0 13px rgba(169,36,247,.25)}.filter-chip:hover:not(.is-active){border-color:#8352b7;color:#fff}.payload-list{flex:1;min-height:0;margin:0 10px;overflow:auto;scrollbar-color:#36466d #091125;scrollbar-width:thin;overscroll-behavior:contain}.payload-list::-webkit-scrollbar,.console-output::-webkit-scrollbar{width:6px}.payload-list::-webkit-scrollbar-thumb,.console-output::-webkit-scrollbar-thumb{background:#465579;border-radius:99px}.payload-list::-webkit-scrollbar-track,.console-output::-webkit-scrollbar-track{background:#0b1324}.payload-row{min-height:32px;display:flex;gap:9px;align-items:center;border:1px solid #1a2947;border-radius:6px;padding:3px 9px 3px 7px;margin-bottom:3px;background:rgba(5,13,30,.49);transition:background .18s,border-color .18s}.payload-row:hover{background:#111b34;border-color:#384775}.payload-row .item-icon{width:29px;height:29px;flex:none;border:1px solid #2c365d;border-radius:7px;display:grid;place-items:center;background:linear-gradient(140deg,#1b173e,#101c3d)}.item-icon svg{width:19px;height:19px}.item-icon.gold{color:#f8dc1d}.item-icon.blue{color:#02b9ff}.item-icon.violet{color:#a84afd}.item-icon.gold svg{fill:#ffdb2e;stroke:#ffdb2e}.item-content{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden}.item-content strong{color:#eef0fd;font-size:10px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-content small{color:#a3aecf;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-version{width:58px;flex:none;text-align:right;color:#a8b5df;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fw-tag{border:1px solid #006e99;color:#09bbf0;border-radius:4px;padding:2px 5px;font-size:9px;min-width:25px;text-align:center;flex:none}.fw-tag.hen{color:#ffdc1a;border-color:#a77b0a}.send-button{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:5px;height:24px;width:73px;flex:none;border:1px solid #754cff;background:linear-gradient(90deg,#972ffd,#5351e8);font-size:10px;box-shadow:0 0 6px rgba(123,46,248,.2)}.send-button svg{width:13px;height:13px;fill:#fff;stroke:#fff}.send-button:hover{filter:brightness(1.2)}.send-button:disabled{cursor:wait;opacity:.6}.favorite-button{width:20px;height:25px;border:0;background:transparent;display:grid;place-items:center;color:#afbedf;padding:0;flex:none}.favorite-button svg{width:15px;height:15px}.favorite-button.is-favorite{color:var(--gold)}.favorite-button.is-favorite svg{fill:var(--gold)}.payload-footer{height:23px;min-height:23px;padding:2px 12px;display:flex;align-items:center;justify-content:space-between;color:#7187b5;font-size:8px}.import-link{border:0;background:transparent;color:#a468ff;padding:1px 3px;display:flex;align-items:center;gap:4px;font-size:9px}.import-link svg{width:12px;height:12px}.empty-state{margin:13px 0;padding:16px;text-align:center;color:#a8b5da;font-size:11px;border:1px dashed #2c345a;border-radius:7px}.empty-state strong{display:block;color:#e0e7ff;margin-bottom:5px}
/* FOOTER */
.footer{grid-area:footer;display:flex;align-items:center;gap:12px;padding:0 4px 0 0;font-size:8px;color:#94a3c9;white-space:nowrap;overflow:hidden}.footer>span{display:inline-flex;align-items:center;gap:4px}.footer-dot{width:5px;height:5px}.footer i{height:8px;width:1px;background:#283452}.footer-right{margin-left:auto;display:flex;gap:10px;color:#a1aed2}.footer-right>span{color:#b859ff;font-size:12px}
/* DIALOGS AND FEEDBACK */
.dialog{color:var(--text);padding:0;background:linear-gradient(140deg,#0c1630,#0b1125);border:1px solid #544185;border-radius:15px;box-shadow:0 20px 90px rgba(0,0,0,.8),0 0 40px rgba(112,50,220,.15);width:min(420px,calc(100vw - 30px));max-height:calc(100vh - 35px);overflow:auto}.dialog::backdrop{background:rgba(1,3,12,.78);backdrop-filter:blur(5px)}.dialog-layout{padding:22px;display:flex;flex-direction:column;gap:15px}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.dialog-kicker{font-size:9px;letter-spacing:2px;color:#b76aff}.dialog-header h2{font-size:22px;margin:6px 0 0}.dialog-help{margin:0;font-size:12px;line-height:1.55;color:#b1bedf}.icon-button{border:1px solid #354062;border-radius:7px;background:#1a2340;padding:5px;display:grid;place-items:center}.icon-button svg{width:15px;height:15px}.form-field{display:flex;flex-direction:column;gap:7px;color:#c6d0ea;font-size:11px}.form-field input,.form-field select{width:100%;height:38px;border:1px solid #38476a;background:#080f21;color:#eef3ff;border-radius:7px;padding:0 11px;outline:0}.form-field input:focus,.form-field select:focus{border-color:#a548ff}.field-optional{font-size:9px;color:#8f9fbd;font-weight:400}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-note{display:flex;align-items:start;gap:8px;font-size:10px;line-height:1.5;color:#95a7cd;background:#121b31;border:1px solid #263658;border-radius:7px;padding:9px}.form-note svg{width:16px;height:16px;flex:none}.dialog-buttons{display:flex;justify-content:flex-end;gap:9px}.secondary-dialog-button,.primary-dialog-button{height:36px;border-radius:7px;border:1px solid #38486b;padding:0 18px;background:#1a2544;font-weight:650}.primary-dialog-button{background:linear-gradient(100deg,#9735fa,#386af0);border-color:#a453fb}.primary-dialog-button:hover,.secondary-dialog-button:hover{filter:brightness(1.18)}.toast{position:fixed;z-index:30;right:20px;bottom:25px;min-width:180px;max-width:min(350px,90vw);padding:11px 16px;color:#eff4ff;border:1px solid #6751a4;background:#151f3a;box-shadow:0 10px 40px rgba(0,0,0,.45);border-radius:9px;opacity:0;transform:translateY(15px);pointer-events:none;transition:opacity .18s,transform .18s}.toast.show{opacity:1;transform:translateY(0)}
/* THEME */
body.theme-cyan{--violet:#009eff;--purple:#1387f2;--halo:rgba(8,166,255,.15)}body.theme-cyan .topnav-item.is-active,body.theme-cyan .filter-chip.is-active,body.theme-cyan .primary-action,body.theme-cyan .send-button,body.theme-cyan .primary-dialog-button{background:linear-gradient(110deg,#047eec,#00bde7);border-color:#00c7ee;box-shadow:0 0 16px rgba(0,155,255,.18)}body.theme-cyan .side-link.is-active{border-left-color:#00c7ee}body.theme-cyan .hero h1 span,body.theme-cyan .brand-name span{color:#20cbff}
/* RESPONSIVENESS */
@media (min-width:1350px){.app-shell{grid-template-columns:205px minmax(0,1fr);grid-template-rows:66px minmax(700px,1fr) 25px;column-gap:16px;padding-left:12px}.topbar{gap:18px}.brand{flex-basis:250px}.brand-mark{width:60px;height:60px}.brand-name{font-size:27px}.brand-subtitle{font-size:12px}.topnav{max-width:680px;height:42px}.topnav-item{height:38px;font-size:12px}.topnav-item svg{width:19px;height:19px}.header-status{gap:9px}.tiny-status{height:43px}.tiny-status strong{font-size:12px}.tiny-status small{font-size:10px}.wifi-tile,.ip-select{height:42px}.sidebar{padding:9px 6px}.side-link{height:62px;gap:18px}.side-link strong{font-size:12px}.side-link small{font-size:10px}.scene-card{min-height:145px;gap:14px}.symbols{font-size:33px}.main-content{grid-template-rows:minmax(268px,33fr) minmax(84px,10fr) minmax(335px,45fr);gap:13px}.hero-copy{top:27px;left:32px}.hero h1{font-size:56px;margin-bottom:13px}.hero-description{font-size:13px;margin-bottom:18px}.eyebrow{font-size:10px;margin-bottom:17px}.hero-actions button{height:59px;padding:0 19px;gap:15px}.hero-actions strong{font-size:14px}.hero-actions small{font-size:11px}.hero-art{right:244px;width:550px;background-size:550px 292px}.system-panel{width:236px;top:16px;bottom:16px;right:13px;padding:15px}.system-panel h2{font-size:13px;margin-bottom:12px}.system-connected{min-height:46px;margin-bottom:10px}.system-connected strong{font-size:12px}.system-connected small{font-size:10px}.system-spec{height:34px;font-size:11px}.system-spec strong{font-size:11px}.stat-card{gap:19px;padding:14px 20px}.stat-icon{height:58px;width:58px}.stat-icon svg{width:29px;height:29px}.stat-card div>span:not(.status-dot){font-size:12px}.stat-card strong{font-size:23px}.stat-card small{font-size:11px}.stat-card .stat-ready{font-size:18px}.workspace{gap:14px}.panel-header{height:52px;min-height:52px;padding:9px 14px}.panel-header h2{font-size:14px}.quiet-button{height:29px;font-size:11px;padding:0 12px}.console-output{margin:0 14px 14px;padding:13px}.log-line{font-size:11px;min-height:21px}.payload-heading{height:49px;min-height:49px}.search-wrap{height:31px;width:240px}.search-wrap input{font-size:11px}.filter-row{padding:4px 14px 9px;gap:10px;min-height:40px}.filter-chip{height:24px;font-size:11px}.payload-list{margin:0 14px}.payload-row{min-height:43px;margin-bottom:5px;gap:12px;padding:5px 12px}.payload-row .item-icon{width:34px;height:34px}.item-content strong{font-size:12px}.item-content small{font-size:10px}.item-version{font-size:11px;width:68px}.fw-tag{font-size:10px}.send-button{height:31px;width:94px;font-size:11px}.favorite-button{width:24px}.payload-footer{height:31px;min-height:31px;font-size:10px}.footer{font-size:10px}.footer-dot{width:7px;height:7px}}
@media (max-width:1020px){.brand{flex-basis:175px}.topnav-item{gap:3px;padding:0 5px}.header-status .tiny-status{display:none}.ip-select{min-width:115px}.hero h1{font-size:38px}.hero-copy{left:18px}.hero-art{right:174px}.system-panel{width:173px}.stat-card{padding:8px;gap:8px}.stat-icon{width:37px;height:40px}.stat-card small{font-size:8px}.workspace{gap:8px}.payload-row{gap:5px}.item-version{width:40px}.send-button{width:62px}.filter-row{gap:3px;padding-left:8px;padding-right:8px}.filter-chip{padding:0 4px}}
@media (max-width:800px){.app-shell{display:block;height:auto;min-height:100vh;padding:0 10px}.topbar{height:auto;min-height:63px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:5px 0 8px}.brand{grid-column:1;flex-basis:auto}.header-status{grid-column:2;grid-row:1}.topnav{grid-column:1/-1;grid-row:2;width:100%;max-width:none;margin-top:5px;min-height:38px}.topnav-item{flex:1;height:34px}.sidebar{display:none}.main-content{display:flex;flex-direction:column;gap:10px}.hero{height:260px;flex:none}.hero-copy{top:23px}.hero-art{right:174px;top:0;height:100%;background-size:auto 100%;background-position:right}.hero h1{font-size:39px}.hero-description{white-space:normal;max-width:310px}.hero-actions{flex-wrap:wrap;gap:7px}.system-panel{top:13px;bottom:13px}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.stat-card{min-height:64px}.workspace{grid-template-columns:1fr;gap:10px}.console-panel,.payload-panel{min-height:280px}.footer{height:29px;padding:0 3px;margin-top:7px}.footer-right{display:none}}
@media (max-width:570px){.app-shell{padding:0 8px}.topbar{grid-template-columns:1fr auto}.brand-name{font-size:22px}.brand-mark{width:43px;height:43px}.header-status{gap:5px}.wifi-tile{width:32px;height:34px}.ip-select{min-width:100px;max-width:145px;height:34px;padding:0 5px;font-size:10px}.topnav{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.topnav-item{min-width:48px;flex:1}.topnav-item svg{width:17px;height:17px}.topnav-item span{display:none}.topnav-item.is-active span{display:block}.hero{height:auto;min-height:375px}.hero-copy{width:auto;left:18px;right:18px;top:19px}.hero h1{font-size:39px}.eyebrow{font-size:8px;letter-spacing:2.5px;margin-bottom:10px}.hero-art{width:100%;right:0;height:180px;top:160px;background-size:auto 180px;background-position:right center;opacity:.72}.hero-light{background:linear-gradient(180deg,rgba(6,16,44,.96) 0%,rgba(10,18,48,.75) 45%,rgba(4,10,28,.75) 75%,rgba(4,9,23,.95) 100%)}.hero-actions{margin-top:13px}.primary-action,.secondary-action{min-width:0;flex:1;padding:0 10px;gap:6px;height:45px}.hero-actions strong{font-size:10px}.hero-actions small{font-size:8px}.primary-action svg,.secondary-action svg{width:20px;height:20px}.system-panel{position:relative;top:auto;right:auto;bottom:auto;margin:186px 11px 12px 11px;width:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px;padding:10px}.system-panel h2{grid-column:1/-1;margin:0}.system-connected{grid-column:1/-1;margin:0}.system-spec{height:22px;gap:6px}.system-spec svg{width:12px;height:12px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.stat-card{padding:9px;min-height:69px}.stat-icon{width:41px;height:43px}.stat-card div>span:not(.status-dot){font-size:10px}.stat-card strong{font-size:16px}.stat-card small{font-size:9px}.payload-panel{min-height:310px}.console-panel{min-height:255px}.payload-row{gap:6px}.item-version{display:none}.payload-footer{display:flex}.footer{gap:6px;font-size:7px}.footer i{height:6px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Compact reference-size payload rows: six catalog items fit the screenshot panel. */
@media (min-width:801px) and (max-width:1349px){.payload-heading{height:31px;min-height:31px}.filter-row{min-height:27px;padding-bottom:6px}.payload-footer{display:none}.payload-row{min-height:29px;padding:2px 7px 2px 6px;margin-bottom:2px;gap:7px}.payload-row .item-icon{width:23px;height:23px}.payload-row .item-icon svg{width:16px;height:16px}.send-button{height:21px}.favorite-button{height:22px}.item-content{gap:0}}
/* Smoothly hide stray copy on the left edge of the user-provided artwork crop. */
.hero-art{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 7%,#000 23%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 7%,#000 23%)}
/* ShieldBreak engine additions: custom dropdowns, rate chip, checks, dialog fallback. */
.rate-chip{font-size:9px;color:#fbd441;border:1px solid #4a3d17;background:#141225;border-radius:5px;padding:3px 8px;cursor:pointer;white-space:nowrap}
.check-field{display:flex;align-items:center;gap:8px;color:#c6d0ea;font-size:11px;cursor:pointer}
.check-field input{width:15px;height:15px;accent-color:#9735fa}
.hidden{display:none !important}
/* Custom dropdown — matches reference: dark field, light-blue highlight */
.shb-drop{position:relative;width:100%}
.shb-drop-btn{width:100%;height:38px;border:1px solid #38476a;background:#080f21;color:#eef3ff;border-radius:7px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px}
.shb-drop-btn:hover{border-color:#a548ff}
.shb-drop-btn svg{width:14px;height:14px;color:#8f9fbd;flex:none}
.shb-drop-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:#0a1226;border:1px solid #38476a;border-radius:7px;overflow:auto;max-height:220px;box-shadow:0 14px 40px rgba(0,0,0,.6);padding:4px}
.shb-drop-list button{display:block;width:100%;text-align:left;background:transparent;border:0;color:#eef3ff;font-size:12px;padding:9px 11px;border-radius:5px;cursor:pointer}
.shb-drop-list button:hover{background:#8ab4f8;color:#0a1226}
.shb-drop-list button.sel{background:#8ab4f8;color:#0a1226}
.shb-drop-list button.sel:hover{background:#a3c4fa}
/* Native dialog fallback for PS4 browser (no <dialog> support) */
.dialog.shb-fallback{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:50;margin:0;max-height:calc(100vh - 35px)}
.dialog.shb-fallback.open{display:block}
.shb-backdrop{position:fixed;inset:0;background:rgba(1,3,12,.78);z-index:40}
/* Dialog visibility: hidden until opened (native + fallback) */
.dialog{display:none}
.dialog[open]{display:block}
.dialog.shb-fallback.open{display:block}
/* Dropdown UI match pass: wide lists, no wrap, no native spinners */
.shb-drop-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.shb-drop-list{min-width:100%;width:max-content;max-width:min(430px,82vw)}
.shb-drop-list button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(422px,80vw)}
.shb-drop-list::-webkit-scrollbar{width:6px}
.shb-drop-list::-webkit-scrollbar-thumb{background:#465579;border-radius:99px}
.shb-drop-list::-webkit-scrollbar-track{background:#0b1324}
.shb-drop-list{scrollbar-color:#465579 #0b1324;scrollbar-width:thin}
.form-field input[type=number]{-moz-appearance:textfield;appearance:textfield}
.form-field input[type=number]::-webkit-outer-spin-button,.form-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-field input[type=number]::-ms-clear,.form-field input[type=number]::-ms-reveal{display:none}
.dialog-layout{position:relative}
/* Console mode (PS4 browser, TV distance): big targets, readable text, overscan-safe */
body.shb-console{font-size:15px}
body.shb-console .app-shell{padding:0 24px 0 28px;grid-template-rows:64px minmax(500px,1fr) 26px;min-height:660px}
body.shb-console .brand-name{font-size:26px}
body.shb-console .brand-mark{width:52px;height:52px}
body.shb-console .brand-subtitle{font-size:12px}
body.shb-console .tiny-status strong{font-size:13px}
body.shb-console .tiny-status small{font-size:11px}
body.shb-console .wifi-tile,body.shb-console .ip-select{min-height:44px;font-size:13px}
body.shb-console .side-link{min-height:64px}
body.shb-console .side-link strong{font-size:14px}
body.shb-console .side-link small{font-size:11px}
body.shb-console .scene-card{display:none}
body.shb-console .hero h1{font-size:52px}
body.shb-console .hero-description{font-size:14px}
body.shb-console .eyebrow{font-size:10px}
body.shb-console .primary-action,body.shb-console .secondary-action{height:62px;min-width:200px}
body.shb-console .hero-actions strong{font-size:15px}
body.shb-console .hero-actions small{font-size:12px}
body.shb-console .system-panel{width:230px}
body.shb-console .system-panel h2{font-size:13px}
body.shb-console .system-connected strong{font-size:12px}
body.shb-console .system-connected small{font-size:11px}
body.shb-console .system-spec{font-size:11px;height:32px}
body.shb-console .system-spec strong{font-size:11px}
body.shb-console .stat-card strong{font-size:24px}
body.shb-console .stat-card div>span:not(.status-dot){font-size:13px}
body.shb-console .stat-card small{font-size:11px}
body.shb-console .panel-header h2{font-size:14px}
body.shb-console .quiet-button{height:32px;font-size:12px}
body.shb-console .rate-chip{font-size:12px;padding:5px 10px}
body.shb-console .log-line{font-size:12px;min-height:22px}
body.shb-console .search-wrap{height:34px;width:230px}
body.shb-console .search-wrap input{font-size:12px}
body.shb-console .filter-chip{height:30px;font-size:12px}
body.shb-console .payload-row{min-height:56px;padding:6px 12px;gap:12px}
body.shb-console .payload-row .item-icon{width:40px;height:40px}
body.shb-console .item-content strong{font-size:14px}
body.shb-console .item-content small{font-size:12px}
body.shb-console .item-version{font-size:12px;width:80px}
body.shb-console .fw-tag{font-size:11px;padding:4px 8px}
body.shb-console .send-button{height:40px;width:112px;font-size:13px}
body.shb-console .favorite-button{width:32px;height:36px}
body.shb-console .favorite-button svg{width:20px;height:20px}
body.shb-console .payload-footer{font-size:11px;height:30px}
body.shb-console .import-link{font-size:12px}
body.shb-console .footer{font-size:11px}
body.shb-console .dialog{width:min(560px,calc(100vw - 48px))}
body.shb-console .dialog-header h2{font-size:26px}
body.shb-console .dialog-help{font-size:14px}
body.shb-console .form-field{font-size:13px}
body.shb-console .form-field input,body.shb-console .form-field select,body.shb-console .shb-drop-btn{height:48px;font-size:14px}
body.shb-console .check-field{font-size:13px}
body.shb-console .check-field input{width:20px;height:20px}
body.shb-console .secondary-dialog-button,body.shb-console .primary-dialog-button{height:48px;font-size:14px;padding:0 24px}
body.shb-console .toast{font-size:14px}
/* D-pad / keyboard focus visibility */
body.shb-console button:focus,body.shb-console input:focus,body.shb-console select:focus,body.shb-console .payload-row:focus{outline:3px solid #fbd441;outline-offset:2px}
body.shb-console .payload-row:focus{border-color:#fbd441;background:#141d38}
/* Dropdown visual-match fix (Quick Setup): field parity, content-sized list, float above rows. PS4-safe base; modern caps last. */
.shb-drop{position:relative;width:100%;max-width:100%;min-width:0}
.form-row .form-field{min-width:0}
.shb-drop-btn{width:100%;height:38px;border:1px solid #38476a;background:#080f21;color:#eef3ff;border-radius:7px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:12px;line-height:1.2;white-space:nowrap;cursor:pointer}
.shb-drop-btn:hover{border-color:#a548ff}
.shb-drop-btn:focus{border-color:#a548ff;outline:0}
.shb-drop-btn:disabled{cursor:default}
.shb-drop-btn:disabled:hover{border-color:#38476a}
.shb-drop-btn span{flex:1;min-width:0;max-width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.shb-drop-btn svg{width:14px;height:14px;color:#8f9fbd;flex:none;margin-left:8px}
.shb-drop-list{position:absolute;top:100%;margin-top:4px;margin-bottom:0;left:0;right:auto;width:auto;min-width:100%;max-width:440px;z-index:200;background:#080f21;border:1px solid #38476a;border-radius:7px;box-shadow:0 20px 50px rgba(0,0,0,.65),0 0 24px rgba(112,50,220,.12);padding:4px;overflow-x:hidden;overflow-y:auto;max-height:230px;scrollbar-color:#465579 #0b1324;scrollbar-width:thin}
.form-row>.form-field+.form-field .shb-drop-list{left:auto;right:0}
.shb-drop-list button{display:block;width:100%;max-width:432px;text-align:left;background:transparent;border:0;color:#eef3ff;font-size:12px;line-height:1.35;padding:9px 11px;border-radius:5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shb-drop-list button:hover{background:#8ab4f8;color:#0a1226}
.shb-drop-list button.sel{background:#8ab4f8;color:#0a1226}
.shb-drop-list button.sel:hover{background:#a3c4fa;color:#0a1226}
.shb-drop-list::-webkit-scrollbar{width:6px}
.shb-drop-list::-webkit-scrollbar-thumb{background:#465579;border-radius:99px}
.shb-drop-list::-webkit-scrollbar-track{background:#0b1324}
.shb-drop--up .shb-drop-list{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}
body.shb-console .shb-drop-btn{height:48px;font-size:14px;padding:0 14px}
body.shb-console .shb-drop-btn svg{width:18px;height:18px;margin-left:10px}
body.shb-console .shb-drop-list{max-width:440px;padding:6px}
body.shb-console .shb-drop-list button{font-size:14px;line-height:1.4;padding:12px 14px;max-width:428px}
/* Modern browsers only: content-sized list with viewport-safe cap (PS4 ignores invalid lines, keeps base above) */
.shb-drop-list{width:max-content;max-width:min(440px,82vw)}
.shb-drop-list button{max-width:min(432px,80vw)}
body.shb-console .shb-drop-list button{max-width:min(428px,80vw)}
/* Alias: JS toggles .open-up (same behavior as .shb-drop--up) */
.shb-drop.open-up .shb-drop-list{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}
/* Native dropdowns: dark field + custom chevron. Open popup is OS-rendered (never clips). */
.form-field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#080f21;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f9fbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px;cursor:pointer}
.form-field select::-ms-expand{display:none}
.form-field select option{background-color:#0a1226;color:#eef3ff}
body.shb-console .form-field select{background-position:right 14px center;padding-right:38px}
/* cyberfox1337x shieldbreak styles: full-page tab views (comment-only marker; CSS has no executable construct) */
/* SHB full-page views: home wrapper, six tab views, big cards, big console, theme previews, about copy. */
#homeView{grid-row:1/-1;display:grid;grid-template-rows:208px 61px minmax(250px,1fr);gap:9px;min-height:100%;min-width:0}
.main-content{overflow:auto}
.view{display:none;grid-row:1/-1;min-height:100%;min-width:0;padding:18px 18px 26px}
.view.active{display:block}
#view-payloads,#view-tools,#view-homebrew,#view-logs,#view-theme,#view-about{min-height:100%;min-width:0}
.view-title{font-size:20px;font-weight:650;margin:0 0 14px;color:#edf0ff;display:flex;align-items:center;gap:10px;letter-spacing:-.3px;white-space:nowrap}
.view-title svg{width:22px;height:22px;color:#ab39f9;flex:none}
.big-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
#bigPayloads,#bigTools,#bigHomebrew{min-width:0}
.big-card,.big-grid .payload-row{display:flex;align-items:center;gap:14px;min-height:84px;margin-bottom:0;padding:14px 16px;border:1px solid #223151;border-radius:9px;background:linear-gradient(125deg,#0b1428,#090f1d);box-shadow:0 7px 22px rgba(0,0,0,.18)}
.big-card:hover,.big-grid .payload-row:hover{background:#101a33;border-color:#384775}
.big-card .item-icon,.big-grid .payload-row .item-icon{width:46px;height:46px;flex:none;display:grid;place-items:center;border:1px solid #2c365d;border-radius:9px;background:linear-gradient(140deg,#1b173e,#101c3d)}
.big-card .item-icon svg,.big-grid .payload-row .item-icon svg{width:26px;height:26px}
.big-card .item-icon.gold,.big-grid .payload-row .item-icon.gold{color:#f8dc1d}
.big-card .item-icon.blue,.big-grid .payload-row .item-icon.blue{color:#02b9ff}
.big-card .item-icon.violet,.big-grid .payload-row .item-icon.violet{color:#a84afd}
.big-card .item-content,.big-grid .payload-row .item-content{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.big-card .item-content strong,.big-card .item-content > strong,.big-grid .payload-row .item-content strong,.big-grid .payload-row .item-content > strong{color:#eef0fd;font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big-card .item-content small,.big-card .item-content > strong + small,.big-grid .payload-row .item-content small,.big-grid .payload-row .item-content > strong + small{color:#a3aecf;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big-card .item-version,.big-grid .payload-row .item-version{width:70px;flex:none;text-align:right;color:#a8b5df;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big-card .fw-tag,.big-grid .payload-row .fw-tag{flex:none;min-width:34px;text-align:center;font-size:11px;border:1px solid #006e99;color:#09bbf0;border-radius:4px;padding:4px 8px}
.big-card .fw-tag.hen,.big-grid .payload-row .fw-tag.hen{color:#ffdc1a;border-color:#a77b0a}
.big-card .send-button,.big-grid .payload-row .send-button{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;width:120px;height:40px;border:1px solid #754cff;border-radius:6px;background:linear-gradient(90deg,#972ffd,#5351e8);font-size:13px;font-weight:650;box-shadow:0 0 6px rgba(123,46,248,.2)}
.big-card .send-button svg,.big-grid .payload-row .send-button svg{width:15px;height:15px;fill:#fff;stroke:#fff}
.big-card .send-button:hover,.big-grid .payload-row .send-button:hover{filter:brightness(1.2)}
.big-card .favorite-button,.big-grid .payload-row .favorite-button{width:32px;height:40px;flex:none;display:grid;place-items:center;border:0;background:transparent;color:#afbedf;padding:0}
.big-card .favorite-button svg,.big-grid .payload-row .favorite-button svg{width:20px;height:20px}
.big-card .favorite-button.is-favorite,.big-grid .payload-row .favorite-button.is-favorite{color:#ffe20b}
.big-card .favorite-button.is-favorite svg,.big-grid .payload-row .favorite-button.is-favorite svg{fill:#ffe20b}
.big-search{display:flex;align-items:center;gap:8px;height:40px;max-width:420px;margin:0 0 14px;padding:0 12px;color:#95a7d1;border:1px solid #203251;background:#081023;border-radius:7px}
#bigSearch,input#bigSearch,input.big-search{display:block;height:40px;width:100%;max-width:420px;margin:0 0 14px;padding:0 12px;color:#e6edff;border:1px solid #203251;background:#081023;border-radius:7px;font-size:13px;outline:0}
.big-search input,.big-search #bigSearch{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;color:#e6edff;background:transparent;border:0;outline:0;font-size:13px}
.big-search:focus-within{border-color:#7d4ddd}
.big-console,#bigConsole{background:#070c19;border:1px solid #1c2a43;border-radius:7px;overflow:auto;padding:14px 12px;min-height:420px;max-height:62vh;scrollbar-color:#596b95 #111c30;scrollbar-width:thin}
.big-console .log-line,#bigConsole .log-line{display:flex;gap:8px;min-height:22px;width:max-content;font:12px/1.6 "Cascadia Code",Consolas,"Liberation Mono",monospace;white-space:pre}
.big-console .log-time,#bigConsole .log-time{color:#acb8dc}
.big-console .log-level,#bigConsole .log-level{color:#0cd3ff}
.big-console .log-level.success,#bigConsole .log-level.success{color:#0ff09c}
.big-console .log-level.error,#bigConsole .log-level.error{color:#ff687b}
.big-console .log-level.warn,#bigConsole .log-level.warn{color:#fbd441}
.big-console .log-text,#bigConsole .log-text{color:#bbc8e6}
.big-console .log-text.success,#bigConsole .log-text.success{color:#21f99e}
#bigClearLog,#bigCopyLog{height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;font-size:12px;border:1px solid #324261;border-radius:6px;background:#18223b;color:#e6edff}
#bigClearLog svg,#bigCopyLog svg{width:14px;height:14px}
#bigClearLog:hover,#bigCopyLog:hover{background:#263452}
.theme-grid,#bigTheme{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:860px}
button[data-settheme],[data-settheme]{min-height:140px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:15px;font-weight:700;line-height:1.4;color:#fff;border:2px solid #2a3e88;border-radius:10px;background:linear-gradient(135deg,#4d1c94,#7b2ff7 55%,#b12aff);text-shadow:0 2px 8px rgba(0,0,0,.4);box-shadow:0 7px 22px rgba(0,0,0,.18)}
button[data-settheme="neon"],button[data-settheme="purple"],button[data-settheme="violet"],button[data-settheme="default"],button[data-settheme="neon-purple"],[data-settheme="neon"],[data-settheme="purple"],[data-settheme="violet"],[data-settheme="default"],[data-settheme="neon-purple"]{background:linear-gradient(135deg,#4d1c94,#7b2ff7 55%,#b12aff);border-color:#6a3aff}
button[data-settheme="cyber"],button[data-settheme="cyan"],button[data-settheme="blue"],button[data-settheme="cyber-blue"],button[data-settheme="theme-cyan"],[data-settheme="cyber"],[data-settheme="cyan"],[data-settheme="blue"],[data-settheme="cyber-blue"],[data-settheme="theme-cyan"]{background:linear-gradient(135deg,#047eec,#00bde7 60%,#20cbff);border-color:#00a3d6}
button[data-settheme]:hover,[data-settheme]:hover{filter:brightness(1.12)}
.theme-grid .sel,#bigTheme .sel,button[data-settheme].sel,[data-settheme].sel{border-color:#aa3cff;box-shadow:0 0 0 2px rgba(170,60,255,.35),0 0 18px rgba(170,45,255,.5)}
.view p,#view-about p{max-width:860px;font-size:13px;line-height:1.7;color:#b1bedf;margin:0 0 12px}
body.shb-console .view{padding:22px 22px 30px}
body.shb-console .view-title{font-size:24px;margin-bottom:18px}
body.shb-console .big-card,body.shb-console .big-grid .payload-row{min-height:110px;padding:18px 20px;gap:16px}
body.shb-console .big-card .item-icon,body.shb-console .big-grid .payload-row .item-icon{width:56px;height:56px}
body.shb-console .big-card .item-icon svg,body.shb-console .big-grid .payload-row .item-icon svg{width:30px;height:30px}
body.shb-console .big-card .item-content strong,body.shb-console .big-card .item-content > strong,body.shb-console .big-grid .payload-row .item-content strong,body.shb-console .big-grid .payload-row .item-content > strong{font-size:17px}
body.shb-console .big-card .item-content small,body.shb-console .big-card .item-content > strong + small,body.shb-console .big-grid .payload-row .item-content small,body.shb-console .big-grid .payload-row .item-content > strong + small{font-size:14px}
body.shb-console .big-card .item-version,body.shb-console .big-grid .payload-row .item-version{font-size:14px;width:90px}
body.shb-console .big-card .fw-tag,body.shb-console .big-grid .payload-row .fw-tag{font-size:13px;padding:6px 10px}
body.shb-console .big-card .send-button,body.shb-console .big-grid .payload-row .send-button{height:48px;width:140px;font-size:15px}
body.shb-console .big-card .favorite-button,body.shb-console .big-grid .payload-row .favorite-button{width:40px;height:48px}
body.shb-console .big-search,body.shb-console #bigSearch,body.shb-console input#bigSearch,body.shb-console input.big-search{height:48px;max-width:520px;font-size:15px}
body.shb-console .big-search input,body.shb-console .big-search #bigSearch{font-size:15px}
body.shb-console .big-console,body.shb-console #bigConsole{min-height:480px;padding:18px 16px}
body.shb-console .big-console .log-line,body.shb-console #bigConsole .log-line{font-size:14px;min-height:26px}
body.shb-console #bigClearLog,body.shb-console #bigCopyLog{height:48px;font-size:14px;padding:0 20px}
body.shb-console .theme-grid button[data-settheme],body.shb-console #bigTheme button[data-settheme],body.shb-console button[data-settheme],body.shb-console [data-settheme]{min-height:170px;font-size:17px}
body.shb-console .view p,body.shb-console #view-about p{font-size:15px}
body.shb-console .big-grid button:focus,body.shb-console .big-grid input:focus,body.shb-console .big-card:focus,body.shb-console .big-grid .payload-row:focus,body.shb-console .theme-grid button:focus,body.shb-console #bigSearch:focus,body.shb-console .big-search input:focus,body.shb-console #bigClearLog:focus,body.shb-console #bigCopyLog:focus{outline:3px solid #fbd441;outline-offset:2px}
body.shb-console .big-card:focus,body.shb-console .big-grid .payload-row:focus{border-color:#fbd441;background:#141d38}
@media (min-width:1350px){#homeView{grid-template-rows:minmax(268px,33fr) minmax(84px,10fr) minmax(335px,45fr);gap:13px}.big-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.view{padding:22px 22px 30px}}
@media (max-width:800px){#homeView{display:flex;flex-direction:column;gap:10px}.view{padding:14px 12px 20px}.big-grid{grid-template-columns:minmax(0,1fr)}.big-card,.big-grid .payload-row{width:100%}.big-search,#bigSearch,input#bigSearch,input.big-search{max-width:none}.theme-grid,#bigTheme{grid-template-columns:minmax(0,1fr)}.big-console,#bigConsole{min-height:320px;max-height:none}}
/* Quick Setup native select: dark popup + span-row stacked layout (append-only; no in-place edits) */
:root{color-scheme:dark}
.dialog{color-scheme:dark}
.form-field select option{background-color:#0a1226;color:#eef3ff}
.form-field select optgroup{background-color:#0a1226;color:#eef3ff}
.form-row.span-row{grid-template-columns:1fr;gap:12px}
.form-row.span-row .form-field{min-width:0}
.form-row.span-row .form-field select{width:100%}
.form-field select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:32px}
.form-field select:hover{border-color:#a548ff}
.form-field select:focus{border-color:#a548ff}
.form-field select:disabled{opacity:.6;cursor:not-allowed}
body.shb-console .form-row.span-row{grid-template-columns:1fr;gap:12px}
body.shb-console .form-row.span-row .form-field select{width:100%;padding-right:38px}
/* Force dark native popup at select level (some engines ignore inherited color-scheme) */
.form-field select{color-scheme:dark}
.form-field select option{background-color:#0a1226 !important;color:#eef3ff !important}
.form-field select optgroup{background-color:#0a1226 !important;color:#8f9fbd !important}
/* Favorites tab/view: gold sidebar star, view/grid family grouping, empty state, console + mobile parity (append-only; no in-place edits) */
.side-link[data-route="favorites"] svg{color:#ffe20b}
.side-link[data-route="favorites"].is-active{border-left-color:#ffe20b}
.side-link[data-route="favorites"].is-active svg{color:#ffe20b}
body.theme-cyan .side-link[data-route="favorites"].is-active{border-left-color:#ffe20b}
body.theme-cyan .side-link[data-route="favorites"].is-active svg{color:#ffe20b}
#view-payloads,#view-tools,#view-homebrew,#view-logs,#view-theme,#view-about,#view-favorites{min-height:100%;min-width:0}
#bigPayloads,#bigTools,#bigHomebrew,#bigFavs{min-width:0}
#bigFavs .empty-state{grid-column:1/-1;max-width:520px;margin:24px auto;padding:28px 24px;font-size:13px;line-height:1.6}
#bigFavs .empty-state strong{font-size:16px;color:#ffe20b;margin-bottom:8px}
#bigFavs .empty-state:before{content:"★";display:block;font-size:32px;line-height:1;color:#ffe20b;opacity:.7;margin-bottom:12px}
#bigFavs .empty-state::before{content:"★";display:block;font-size:32px;line-height:1;color:#ffe20b;opacity:.7;margin-bottom:12px}
body.shb-console .side-link[data-route="favorites"] svg{width:26px;height:26px;color:#ffe20b}
body.shb-console #bigFavs .empty-state{max-width:640px;font-size:15px;line-height:1.65;padding:34px 28px}
body.shb-console #bigFavs .empty-state strong{font-size:19px}
body.shb-console #bigFavs .empty-state:before{font-size:40px}
body.shb-console #bigFavs .empty-state::before{font-size:40px}
@media (max-width:800px){#bigFavs{grid-template-columns:minmax(0,1fr)}#bigFavs .empty-state{margin:16px auto;padding:24px 18px;font-size:13px}}

/* cyberfox1337x.function("responsive_ui"): CSS supports comment markers only. */
/* Keep names readable: content occupies its own row before metadata and actions. */
.big-grid { align-items: stretch; }
.big-grid .payload-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 44px;
  gap: 12px;
  padding: 18px;
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr) auto auto;
}
.big-grid .payload-row .item-icon { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
.big-grid .payload-row .item-content { grid-column: 2 / 4; grid-row: 1; align-self: center; gap: 5px; }
.big-grid .payload-row .item-content strong,
.big-grid .payload-row .item-content small { white-space: normal; overflow-wrap: break-word; line-height: 1.45; }
.big-grid .payload-row .favorite-button { grid-column: 4; grid-row: 1; width: 44px; height: 44px; }
.big-grid .payload-row .item-version { grid-column: 1 / 3; grid-row: 2; width: auto; text-align: left; white-space: normal; overflow-wrap: break-word; line-height: 1.4; }
.big-grid .payload-row .fw-tag { grid-column: 3; grid-row: 2; }
.big-grid .payload-row .send-button { grid-column: 1 / -1; grid-row: 3; width: 100%; height: 40px; }
.big-grid .empty-state { grid-column: 1 / -1; }
.view-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.theme-card { padding: 20px; border: 1px solid var(--line-bright); border-radius: 12px; background: var(--panel); }
.theme-card h3 { margin: 0 0 8px; font-size: 18px; }
.theme-card .theme-button { width: 100%; min-height: 110px; margin-top: 18px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible { outline: 2px solid #cba2ff; outline-offset: 3px; }
body.theme-cyan button:focus-visible, body.theme-cyan a:focus-visible,
body.theme-cyan input:focus-visible { outline-color: #54dcff; }
body.theme-cyan .side-link.is-active { background: linear-gradient(90deg, #073e62, #10213a); border-color: #17688b; }
body.theme-cyan .side-link.is-active svg { color: #54dcff; }
body.theme-cyan .eyebrow b { color: #54dcff; }
@media (min-width: 801px) {
  .sidebar { overflow-y: auto; scrollbar-width: thin; }
  .scene-card { margin-top: 16px; flex-shrink: 0; }
  .app-shell { grid-template-rows: 48px minmax(0, 1fr) 25px; }
}
@media (min-width: 1350px) {
  .app-shell { grid-template-rows: 66px minmax(0, 1fr) 25px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .big-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  #homeView { grid-template-rows: 250px 75px auto; }
  .console-panel { min-height: 230px; }
  .payload-panel { height: 400px; }
  .hero-copy { width: calc(100% - 210px); }
  .hero-description { white-space: normal; }
  .hero-actions { gap: 7px; flex-wrap: wrap; }
  .hero-actions button { height: 40px; min-width: 0; padding: 0 9px; }
  .hero-actions svg { width: 18px; height: 18px; }
  .hero-actions strong { font-size: 11px; }
  .hero-actions small { font-size: 8px; }
}
@media (max-width: 800px) {
  .topbar { padding-top: 8px; }
  .sidebar { display: block; margin: 0 0 12px; padding: 5px; overflow: hidden; }
  .side-links { flex-direction: row; overflow-x: auto; gap: 4px; padding: 2px 0 6px; scrollbar-width: thin; scrollbar-color: #5442a1 #0b1324; }
  .side-link { flex: 0 0 auto; width: auto; min-height: 44px; height: 44px; padding: 0 12px; gap: 8px; border-radius: 7px; border-bottom-color: transparent; }
  .side-link strong { font-size: 12px; }
  .side-link small, .scene-card { display: none; }
  .side-link svg { width: 18px; height: 18px; }
  .view { padding: 12px 4px 20px; }
  .view-title { font-size: 23px; margin-bottom: 16px; }
  .big-grid { gap: 12px; }
  .hero-copy { width: calc(100% - 218px); }
  .hero-description { max-width: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions button { height: 42px; flex: none; }
  .hero { height: 300px; }
  .console-panel { height: 255px; }
  .payload-panel { height: 420px; }
  .panel-header { flex-wrap: wrap; height: auto; min-height: 48px; gap: 8px; padding: 10px; }
  .panel-header h2 { font-size: 12px; }
  .quiet-button { min-height: 32px; font-size: 11px; }
  .filter-row { min-height: 44px; flex-shrink: 0; gap: 6px; }
  .filter-chip { flex: 0 0 auto; min-width: 56px; height: 32px; padding: 0 10px; font-size: 11px; }
  .search-wrap { height: 34px; }
  .search-wrap input { font-size: 12px; }
  .payload-list .payload-row { min-height: 64px; padding: 8px; }
  .payload-list .item-content strong { font-size: 12px; }
  .payload-list .item-content small { font-size: 10px; }
  .payload-list .send-button { min-height: 36px; }
  .payload-list .favorite-button { width: 32px; height: 36px; }
  .payload-footer { min-height: 36px; font-size: 10px; }
  .import-link { min-height: 32px; font-size: 11px; }
  .dialog-layout { padding: 20px; }
  .icon-button { min-width: 36px; min-height: 36px; }
  .form-field input, .form-field select { height: 44px; font-size: 14px; }
  .check-field { min-height: 36px; line-height: 1.4; }
  .check-field input { flex-shrink: 0; width: 18px; height: 18px; }
  .dialog-buttons button { min-height: 44px; }
}
@media (max-width: 570px) {
  .hero { height: auto; min-height: 0; }
  .hero-copy { position: relative; top: auto; left: auto; right: auto; width: auto; padding: 22px 18px 0; }
  .hero h1 { font-size: 38px; }
  .hero-description { font-size: 12px; line-height: 1.5; }
  .hero-actions { flex-direction: row; align-items: stretch; gap: 8px; }
  .hero-actions button { flex: 1 1 135px; height: 48px; }
  .hero-actions strong { font-size: 11px; }
  .hero-actions small { font-size: 8px; }
  .hero-art { top: 160px; height: 220px; background-size: auto 220px; }
  .system-panel { margin: 125px 11px 12px; }
  .system-panel h2 { font-size: 12px; margin-bottom: 4px; }
  .system-connected { min-height: 42px; }
  .system-connected strong { font-size: 11px; }
  .system-connected small { font-size: 10px; }
  .system-spec { font-size: 10px; height: 26px; }
  .system-spec strong { font-size: 10px; }
  .console-panel .panel-header { align-items: flex-start; }
  .panel-header-actions { width: 100%; justify-content: flex-end; }
  .rate-chip { margin-right: auto; display: flex; align-items: center; }
  .payload-list .item-icon, .payload-list .fw-tag { display: none; }
  .payload-list .item-content strong, .payload-list .item-content small { white-space: normal; line-height: 1.4; }
  .big-grid .payload-row { gap: 10px; padding: 15px; }
  .big-grid .payload-row .item-content strong { font-size: 15px; }
  .big-grid .payload-row .send-button { height: 44px; }
  .form-row { gap: 10px; }
  .footer { flex-wrap: wrap; height: auto; min-height: 32px; font-size: 9px; white-space: normal; }
}
@media (max-width: 360px) {
  .brand-name { font-size: 20px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-subtitle { font-size: 9px; }
  .header-status .wifi-tile { display: none; }
  .hero h1 { font-size: 34px; }
  .hero-actions { flex-direction: column; }
  .hero-actions button { flex-basis: auto; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* Progressive native-select styling keeps browser keyboard and form behavior. */
@supports (appearance: base-select) {
  .form-field select,
  .form-field select::picker(select) { appearance: base-select; }
  .form-field select { display: flex; align-items: center; background-image: none; padding-right: 12px; gap: 8px; }
  .form-field select::picker-icon { color: #b897ea; transition: transform .18s; }
  .form-field select:open { border-color: #ac64f6; box-shadow: 0 0 0 3px rgba(164,45,255,.14); }
  .form-field select:open::picker-icon { transform: rotate(180deg); }
  .form-field select::picker(select) {
    margin: 6px 0;
    padding: 5px;
    max-height: min(320px, 50vh);
    max-width: calc(100vw - 32px);
    overflow: auto;
    color: #eef3ff;
    background: #0c1429;
    border: 1px solid #64418b;
    border-radius: 9px;
    box-shadow: 0 16px 44px rgba(0,0,0,.55);
    scrollbar-width: thin;
    scrollbar-color: #64418b #0c1429;
  }
  .form-field select option { padding: 10px 12px; gap: 10px; border-radius: 5px; font-size: 12px; line-height: 1.4; white-space: normal; }
  .form-field select option:hover,
  .form-field select option:focus { background-color: #302047 !important; }
  .form-field select option:checked { background-color: #452366 !important; color: #fff !important; }
  .form-field select option::checkmark { color: #d5a6ff; }
  body.theme-cyan .form-field select::picker(select) { border-color: #236885; }
  body.theme-cyan .form-field select option:checked { background-color: #0c4762 !important; }
  body.theme-cyan .form-field select option:hover,
  body.theme-cyan .form-field select option:focus { background-color: #12344a !important; }
  body.theme-cyan .form-field select::picker-icon,
  body.theme-cyan .form-field select option::checkmark { color: #54dcff; }
}
.big-grid .payload-row .item-content > strong,
.big-grid .payload-row .item-content > strong + small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.big-grid .payload-row .item-version { display: block; }