@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..800;1,9..40,400..800&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#1b242c;--panel:#222d38;--border:#2f3f4d;--muted:#8f9aa3;--ink:#f2f4f7;--accent:#f1d1a7;--green:#9edab6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,select,textarea{font:inherit}button,a,input,textarea,select{outline-offset:4px}button{cursor:pointer}a{color:inherit;text-decoration:none}aside{width:244px;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--border);padding:30px 20px;background:#1e2831;display:flex;flex-direction:column}.brand{font:800 20px Manrope,sans-serif;letter-spacing:2px;display:block;padding:0 9px;position:relative}.mark{font-size:31px;color:var(--accent);letter-spacing:-5px;margin-right:15px}.mark span{font-size:17px}.tiny{display:block;font:9px 'DM Sans';color:var(--muted);letter-spacing:3px;margin:5px 0 0 46px}.workspace{display:flex;align-items:center;gap:11px;background:#25323d;border:1px solid var(--border);border-radius:9px;padding:12px;margin-top:33px;font-size:12px}.server-icon,.avatar{width:32px;height:32px;display:grid;place-items:center;background:#364857;color:#eaedf1;border-radius:9px;font-weight:700}small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.chevron{margin-left:auto}.nav-label{color:#636f7a;letter-spacing:1.7px;font-size:10px;margin:28px 13px 12px}nav a{padding:12px 13px;margin:5px 0;display:flex;gap:13px;align-items:center;border-radius:7px;color:var(--muted);font-size:14px}nav a.active{background:#303a44;color:#eaedf1}nav a:hover{background:#27343f;color:#eeeeee}nav b{margin-left:auto;font-size:10px;color:#f0cea1;font-weight:400}nav i{width:6px;height:6px;background:#d6b97b;border-radius:50%;margin-left:auto}.aside-bottom{margin-top:auto}.mini-status{border-bottom:1px solid var(--border);padding:20px 4px;color:#9ba5ae;font-size:11px}.dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--green);margin-right:7px}.amber{background:#d6b97b}.owner{display:flex;gap:10px;align-items:center;margin-top:20px;font-size:12px}.owner>span:last-child{margin-left:auto;color:var(--muted)}.avatar{border-radius:50%;background:#2a3844;color:#c6cbd0}.shell{margin-left:244px}header{height:80px;border-bottom:1px solid var(--border);padding:0 40px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}header strong{font-weight:400;color:#eeeeee;margin-left:12px}header .muted{margin-left:12px}header>div{display:flex;align-items:center;gap:18px}.pill{border:1px solid #364858;background:#2a343c;color:#f2d6b0;font-size:9px;letter-spacing:1.5px;padding:6px 9px;border-radius:5px}.icon-btn{border:0;background:none;color:#b4bbc2;font-size:12px}main{max-width:1510px;margin:auto;padding:40px}.eyebrow{font-size:10px;letter-spacing:2.4px;color:var(--accent);margin-bottom:13px}h1{font:600 34px Manrope,sans-serif;letter-spacing:-1.2px;margin:0 0 12px}h2{font:600 18px Manrope,sans-serif;margin:0 0 8px}h3{font-size:14px;margin:0 0 8px}p{line-height:1.7;color:var(--muted)}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.page-head p{margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--border);border-radius:6px;background:#293642;padding:11px 16px;color:var(--ink);font-size:12px}.btn:hover{filter:brightness(1.13)}.btn.primary{background:var(--accent);color:#27343f;border-color:var(--accent);font-weight:700}.btn.danger{color:#eda7a7}.btn:disabled{opacity:.4;cursor:not-allowed}.hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#2e3943,#24303a);border:1px solid #3f4d5a;border-radius:12px;padding:34px 32px;min-height:235px;margin-bottom:24px}.hero h2{font-size:26px;letter-spacing:-.8px;max-width:440px}.hero p{max-width:440px;font-size:13px}.hero .orb{position:absolute;right:5%;top:12px;width:210px;height:210px;border:1px solid #6b839860;transform:rotate(-20deg);border-radius:40px;display:grid;place-items:center;background:linear-gradient(140deg,#e4a75815,#39485510);box-shadow:0 0 90px #e9b7760a}.orb span{font:600 140px Manrope;color:#f1d1a744;transform:rotate(20deg)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.metric,.card{background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:22px}.metric{position:relative}.metric .label{color:var(--muted);font-size:11px}.metric strong{font:600 30px Manrope;display:block;margin:15px 0 7px}.metric small{font-size:10px}.metric .symbol{position:absolute;right:21px;top:19px;color:var(--accent)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:31px 0 17px}.section-heading span{font-size:11px;color:var(--muted)}.module{display:flex;flex-direction:column;min-height:190px}.module .module-icon{background:#35414c;color:var(--accent);width:34px;height:34px;border-radius:8px;display:grid;place-items:center;margin-bottom:17px;font-size:20px}.module p{font-size:12px;margin:3px 0 20px;flex:1}.module a{color:var(--accent);font-size:11px;display:flex;justify-content:space-between}.note{display:flex;gap:13px;border:1px solid #384b5b;background:#26333e;padding:17px 20px;border-radius:8px;font-size:12px;color:#f0d0a6;margin:22px 0;line-height:1.6}.note p{margin:0;color:inherit}footer{padding:18px 40px;border:1px solid #35424e;border-radius:12px 12px 0 0;background:linear-gradient(105deg,#212b33,#273139 55%,#212b33);display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#8a96a0;letter-spacing:1px;margin-top:20px;box-shadow:0 -8px 28px rgba(22,32,41,.24)}
footer .dot{box-shadow:0 0 0 3px rgba(158,218,182,.1),0 0 12px rgba(158,218,182,.55)}
footer .muted{color:#58636c}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:9px;overflow:hidden}.panel-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px}.panel-body{padding:22px}label{display:block;color:#b6bdc3;font-size:11px;margin:0 0 8px}input,textarea,select{width:100%;padding:11px 12px;border:1px solid #394c5d;background:#1d272f;border-radius:5px;color:#eeeeee;margin-bottom:18px}textarea{min-height:90px;resize:vertical}input[type=color]{padding:4px;width:48px;height:38px}input[type=checkbox]{width:auto;margin:0 9px 0 0;accent-color:var(--accent)}.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.tabs{display:flex;border-bottom:1px solid var(--border);padding:0 12px}.tabs button{border:0;background:none;color:var(--muted);padding:15px 13px;font-size:12px}.tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent)}.discord{background:#324351;padding:28px;min-height:360px;display:flex;gap:12px;align-items:flex-start}.discord-avatar{width:38px;height:38px;border-radius:50%;background:#f1d1a7;display:grid;place-items:center;color:#2e3b47;font-weight:800;flex-shrink:0}.discord-name{font-weight:600;font-size:14px}.botbadge{background:#e7b26d;font-size:9px;padding:2px 4px;border-radius:3px;margin:0 5px}.timestamp{font-size:10px;color:#a4adb5}.discord-content{font-size:13px;white-space:pre-wrap;line-height:1.5;overflow-wrap:anywhere;margin:9px 0}.embed{border-left:4px solid var(--accent);background:#2c3a47;border-radius:4px;padding:15px;max-width:440px;overflow-wrap:anywhere}.embed strong{font-size:15px;display:block;margin-bottom:8px}.embed p{white-space:pre-wrap;color:#dadde0;font-size:12px;margin:0}.embed img{max-width:100%;border-radius:5px;margin-top:12px}.embed small{font-size:10px;margin-top:14px}.discord-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.discord-buttons button{border:0;border-radius:4px;background:#e7b26d;color:white;padding:8px 12px;font-size:11px}.discord select{margin-top:10px;background:#2a3844}.component{border:1px solid var(--border);background:#1e2831;border-radius:5px;padding:12px;margin-bottom:10px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px}.component button{border:0;background:transparent;color:#efcb9c}.muted{color:var(--muted)}.empty{text-align:center;padding:45px 20px;color:var(--muted)}.empty h3{color:#dadde0}.badge{font-size:9px;border:1px solid #43596d;padding:4px 7px;border-radius:4px;color:var(--accent)}.category-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:15px}.category-meta{display:flex;gap:10px;flex-wrap:wrap;margin:17px 0;color:var(--muted);font-size:10px}.list{display:grid;gap:14px}.search{max-width:380px}.command-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:20px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}code{font:12px monospace;color:var(--accent)}.command-row p{margin:0;font-size:12px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#eaedf1;color:#2b363f;padding:13px 20px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:50}#toast.show{opacity:1}dialog{background:#222d38;color:var(--ink);border:1px solid #3f5568;border-radius:12px;max-width:700px;width:calc(100% - 32px);max-height:88vh;padding:30px}dialog::backdrop{background:#0f1318aa;backdrop-filter:blur(5px)}.close{position:absolute;right:18px;top:12px;border:0;background:none;color:#a2abb2;font-size:27px}.check{display:flex;align-items:center;margin:4px 0 17px;font-size:12px}.check label{margin:0}.wide{grid-column:1/-1}.steps{display:grid;gap:0}.step{display:flex;gap:17px;padding:22px 0;border-bottom:1px solid var(--border)}.step>span{width:28px;height:28px;background:#35414c;color:var(--accent);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:11px}.step p{font-size:12px;margin:6px 0}.json{min-height:380px;font:12px/1.7 monospace}.toggle-list .check{padding:12px 0;border-bottom:1px solid var(--border)}@media(min-width:1500px){main{padding:48px 60px}}@media(max-width:1100px){aside{width:210px}.shell{margin-left:210px}.grid{grid-template-columns:repeat(2,1fr)}.studio{grid-template-columns:1fr}.hero .orb{right:0;opacity:.4}main{padding:28px}.page-head{gap:15px}.command-row{grid-template-columns:1fr 1fr}.command-row .badge{display:none}}@media(max-width:700px){aside{position:relative;width:100%;padding:18px}.brand{font-size:17px}.tiny,.workspace,.nav-label,.aside-bottom{display:none}nav{display:flex;flex-wrap:wrap;margin-top:12px}nav a{font-size:11px;padding:8px;gap:5px}nav b,nav i{display:none}aside nav+nav{margin:0}.shell{margin:0}header{height:60px;padding:0 18px}header .pill{display:none}main{padding:23px 18px}h1{font-size:28px}.page-head{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}.hero{padding:25px}.hero .orb{display:none}.hero h2{font-size:23px}.row{grid-template-columns:1fr;gap:0}footer{padding:20px 18px}footer>span:last-child{display:none}.command-row{grid-template-columns:1fr;gap:5px}.discord{padding:18px}.timestamp{display:none}}
.v2-preview{margin-top:14px}.v2-container{background:#2c3a47;border:1px solid #3e5366;border-radius:8px;padding:15px;margin:10px 0}.v2-text{font-size:12px;line-height:1.65;overflow-wrap:anywhere;margin:10px 0}.v2-text h2{font-size:18px}.v2-text h3{font-size:15px}.v2-gallery img{width:100%;border-radius:6px;display:block;margin:8px 0;min-height:30px;font-size:10px;color:#b6bdc3}.v2-section{display:flex;gap:15px;justify-content:space-between;align-items:center;margin:13px 0;font-size:12px}.v2-section .btn{flex-shrink:0}.v2-separator.line{border-top:1px solid #3e5366}
/* Familiar server-settings layout: top navigation, simple cards, focused forms. */
:root{--bg:#2f3f4d;--panel:#26333e;--border:#3b4f60;--muted:#b3bac1;--accent:#47709f}body{background:#2f3f4d;font-size:15px}aside{display:none}.shell{margin-left:0}header{height:96px;background:#24313b;padding:0 32px;gap:30px;box-shadow:0 4px 12px #0f131833;border:0}.top-brand{display:flex;align-items:center;gap:13px;font:bold 32px Manrope;letter-spacing:-1px;color:#f2f2f2}.top-brand>span{display:grid;place-items:center;background:#113b46;color:#4a74a5;width:56px;height:56px;border-radius:12px;font-size:35px}.top-nav{display:flex;gap:7px;margin:0;flex:1}.top-nav a{font-size:17px;white-space:nowrap;margin:0;padding:12px 10px;color:#cbd0d5}.top-nav a:hover{background:#2b3945}.top-nav a.active{background:transparent;color:#4d79ab}header>div{gap:12px}main{max-width:1420px;padding:48px 38px;min-height:calc(100vh - 155px)}.eyebrow{display:none}h1{font-size:34px;letter-spacing:-.7px;font-weight:800}.page-head{margin-bottom:35px}.page-head p{font-size:15px}.btn{background:#4c565e;border:0;border-radius:4px;padding:11px 19px;font-size:14px}.btn.primary{background:#47709f;color:#071a20;font-weight:600}.btn.primary:hover{background:#527eb1}.toolbar{gap:10px}.card,.panel,.server-card{background:#26333e;border:0;border-radius:5px}.server-card{padding:27px;border-left:5px solid #545e66}.server-card p{font-size:14px;min-height:45px}.server-card h2{font-weight:800}.server-title{display:flex;gap:17px;align-items:center;margin-bottom:30px;min-height:56px}.server-title h2{font-size:18px}.server-icon{background:#476f9d;color:#ffffff;width:55px;height:55px;border-radius:50%;font-size:23px}.server-title small{max-width:250px;font-size:12px}.xela-hero{padding:95px 20px 115px;display:grid;grid-template-columns:1.2fr 1fr;gap:90px;align-items:center}.xela-hero h1{font-size:56px;line-height:1.15;margin:0 0 26px;letter-spacing:-1px}.xela-hero h1 span{color:#e7b26d}.xela-hero p{max-width:570px;font-size:18px;margin-bottom:30px}.xela-hero strong{color:#4a74a5}.hero-message{padding:28px;background:#2c3a47;border:1px solid #435a6e;border-radius:10px;transform:rotate(2deg);box-shadow:0 15px 35px #0f131822}.hero-message .v2-container{margin:15px 0;background:#26333e;border:0}.hero-message h2{font-size:20px}.hero-message p{font-size:14px}.hero-message>span{font-size:12px}.sample-options{background:#344656;border:1px solid #445b6f;color:#dadde0;border-radius:4px;padding:12px;font-size:13px;margin-top:20px}.feature-heading{font-size:21px;margin:0 0 25px;font-weight:800}.feature-card{background:#26333e;border-left:5px solid var(--card-accent);padding:25px;border-radius:4px;min-height:165px}.feature-card h2{font-size:20px;font-weight:800}.feature-card p{font-size:15px;margin-bottom:0}.feature-card:hover{background:#293743}.simple-notice{font-size:13px;color:#b3bac1;line-height:1.8;margin:30px 0;padding:15px 0}.simple-notice a,.back-link{color:#4b76a7}.back-link{display:inline-block;margin:0 0 25px;font-size:13px}.studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.panel-head{font-weight:600;background:#283541;font-size:13px;border-color:#3b4f60}.panel-body{padding:25px}input,textarea,select{background:#232f39;border:1px solid #405669;border-radius:4px;padding:12px;font-size:14px}label{font-size:13px;color:#ced3d7}textarea{min-height:105px}.tabs{border-color:#3b4f60}.tabs button{font-size:14px}.badge{color:#4b75a6;border-color:#31575e;font-size:10px}.note{background:#2a3844;border:0;border-left:4px solid #47709f;color:#c2c8ce;border-radius:3px;font-size:13px}.advanced{margin-top:20px;border-top:1px solid #3d5264;padding-top:17px}.advanced summary{cursor:pointer;color:#aab2b9;font-size:13px;margin-bottom:15px}.edit-group{border:1px solid #3b4f60;border-radius:5px;padding:18px;margin:15px 0}.edit-group h3{color:#c6ccd1;font-size:13px;margin-bottom:18px}.edit-group .edit-group{padding:12px}.separator-label{color:#6b7883;text-align:center;font-size:11px;margin:15px 0}.v2-text h2{font-size:20px}.command-row{border-color:#394c5d}code{color:#e4ca24;font-weight:600}.command-row .badge{color:#adb5bc;border-color:#43596d}footer{background:linear-gradient(105deg,#212b33,#273139 55%,#212b33);border-color:#35424e;padding:19px 38px;color:#8a96a0;box-shadow:0 -8px 28px rgba(22,32,41,.24)}#toast{background:#476f9d;color:#0b2026}dialog{background:#26333e;border-color:#3e5366;border-radius:7px;padding:30px}dialog h2{font-size:25px;font-weight:800}
@media(max-width:1100px){header{padding:0 20px;gap:18px}.top-nav{gap:0}.top-nav a{font-size:14px;padding:10px 8px}.top-brand{font-size:26px}.top-brand>span{width:46px;height:46px}header .icon-btn{display:none}.xela-hero{gap:35px;padding:70px 0}.xela-hero h1{font-size:44px}.studio{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){header{height:auto;min-height:90px;flex-wrap:wrap;padding:15px 18px;gap:8px}.top-brand{font-size:24px}.top-brand>span{height:35px;width:35px;font-size:24px}.top-nav{order:3;flex-basis:100%;overflow:auto;flex-wrap:nowrap;margin:7px -8px 0}.top-nav a{font-size:13px;padding:9px 8px}.top-nav span{display:inline}header>div{margin-left:auto}header>div .btn{font-size:12px;padding:9px 12px}main{padding:30px 18px}.xela-hero{grid-template-columns:1fr;gap:35px;padding:30px 0 50px}.xela-hero h1{font-size:39px}.xela-hero p{font-size:16px}.hero-message{transform:none}.grid{grid-template-columns:1fr}.feature-card{min-height:140px}.row{grid-template-columns:1fr}.page-head{gap:20px}h1{font-size:29px}.toolbar .btn{font-size:12px}.panel-body{padding:18px}}
/* Full visual message studio. */
main:has(.sb-app){max-width:none;padding:0}.sb-app{background:#314251}.sb-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 20px;background:#2c3b48;border-bottom:1px solid #3e5365}.sb-toolbar>div:first-child{display:flex;align-items:center;gap:15px}.sb-toolbar h1{font-size:20px;margin:0;letter-spacing:0}.sb-toolbar .btn{font-size:12px;padding:9px 13px}.sb-body{display:grid;grid-template-columns:205px minmax(270px,1fr) 300px minmax(310px,1fr);min-height:calc(100vh - 210px)}.sb-palette,.sb-properties,.sb-preview{background:#2d3c49}.sb-palette{padding:18px 12px;border-right:1px solid #405669}.sb-palette h2{font-size:11px;color:#a3acb3;letter-spacing:1px;margin:5px 0 15px}.sb-palette h2:not(:first-child){margin-top:25px}.sb-palette>button{width:100%;display:flex;gap:12px;align-items:center;background:#25323d;color:#eaedf1;border:1px solid transparent;border-radius:4px;text-align:left;padding:15px 13px;margin:7px 0;font-size:17px;cursor:grab}.sb-palette>button span{font-size:13px}.sb-palette>button:hover{border-color:#7497c0;background:#2b3946}.sb-palette p{font-size:11px;line-height:1.6;margin:22px 4px;color:#9ca6ae}.sb-palette select{font-size:11px;padding:10px 5px}.sb-canvas{border-right:1px solid #405669;background:#324352;min-width:0}.sb-canvas-content{padding:20px}.sb-tabs{display:flex;background:#2e3d4a;border-bottom:1px solid #405669;overflow:auto}.sb-tabs button{border:0;background:none;color:#b6bdc3;padding:16px 15px;white-space:nowrap;font-size:13px}.sb-tabs button.active{border-bottom:2px solid #ecc38d;color:#eff2f4}.sb-tabs small{color:#8d98a2;font-size:10px}.sb-canvas h2{font-size:17px;margin:17px 0}.sb-canvas h3{font-size:13px;color:#cacfd3}.sb-hint{font-size:11px;color:#a9b2b9;margin:8px 0 18px}.sb-component-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#99a3ac;margin:23px 0 12px}.sb-component-heading h3{margin:0}.sb-drop{min-height:200px;padding:8px;border:1px dashed #4a535a;border-radius:5px}.sb-empty{color:#adb5bc;text-align:center;padding:50px 12px;font-size:13px;line-height:1.7}.sb-empty small{font-size:11px}.sb-node{padding:4px;background:#25323d;border:1px solid #384b5c;border-radius:5px;margin:8px 0;cursor:pointer}.sb-node.selected{border-color:#edc591;box-shadow:0 0 0 1px #edc591}.sb-node-line{display:flex;gap:10px;align-items:center;padding:12px 8px}.sb-node-line>div{min-width:0}.sb-node-line small{display:block;text-transform:uppercase;color:#a0aab2;font-size:9px;margin-bottom:5px}.sb-node-line [data-node-summary]{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:#ebf0f6}.sb-grip{color:#838f9a;cursor:grab}.sb-children{padding:4px 8px 6px 15px;margin:0 4px 6px;border-left:1px solid #525c65;min-height:48px}.sb-children>span{font-size:10px;line-height:1.6;color:#8f9aa4;display:block;padding:8px}.sb-properties{border-right:1px solid #405669;min-width:0}.sb-pane-heading{padding:17px 20px;border-bottom:1px solid #405669;font-weight:600;font-size:13px;display:flex;justify-content:space-between;gap:8px}.sb-props-content{padding:20px;max-height:calc(100vh - 230px);overflow:auto;position:sticky;top:0}.sb-property-title h2{font-size:16px;margin-bottom:14px}.sb-property-title{border-bottom:1px solid #3f5466;padding-bottom:15px;margin-bottom:20px}.sb-properties .btn{font-size:11px;padding:7px 10px}.sb-properties input,.sb-properties textarea,.sb-properties select{font-size:12px;padding:10px}.sb-properties label{font-size:11px;color:#bac1c7}.sb-properties textarea{min-height:140px}.sb-properties input[type=color]{width:100%;height:36px;padding:3px}.sb-option{padding:14px 0;border-top:1px solid #42586b;margin:15px 0}.sb-option h3{font-size:12px;color:#d7dbde}.sb-preview{min-width:0;background:#324352}.sb-preview .discord{padding:22px 16px;min-height:350px;font-size:12px}.sb-preview .v2-preview{margin-top:12px}.sb-preview .v2-container{padding:12px}.sb-preview .v2-text{font-size:12px}.sb-preview .v2-text h2{font-size:18px}.sb-preview .v2-gallery img{min-height:70px}.sb-preview .v2-preview>.btn{font-size:12px;margin:5px}.sb-delivery{padding:20px;border-top:1px solid #405669}.sb-delivery label{font-size:11px}.sb-delivery input{font-size:12px}.sb-delivery .btn{font-size:11px}.sb-delivery small{font-size:10px;line-height:1.7;margin-top:15px}.sb-status{display:flex;justify-content:space-between;gap:20px;background:#293642;border-top:1px solid #405669;padding:10px 20px;font-size:10px;color:#abb4bb}.sb-response-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sb-response-bar label{width:100%}.sb-response-bar select{width:100%;margin:0}.sb-response-bar .btn{font-size:11px}.sb-response-settings{padding:16px 0;border-bottom:1px solid #3f5466}.sb-response-settings label:last-child{font-size:11px}.sb-canvas-content>button[data-template]{display:block;margin:15px 0;font-size:12px}#sb-json{min-height:450px;font:11px/1.6 monospace}.sb-app input,.sb-app textarea,.sb-app select{background:#25313c;border-color:#43596d}.sb-app input:focus,.sb-app textarea:focus,.sb-app select:focus{border-color:#edc693}body:has(.sb-app) footer{display:none}
@media(min-width:1600px){.sb-body{grid-template-columns:245px minmax(400px,1.15fr) 340px minmax(400px,1fr)}}@media(max-width:1200px){.sb-body{grid-template-columns:170px minmax(280px,1fr) 290px}.sb-preview{grid-column:2/4;border-top:1px solid #405669}.sb-palette{grid-row:1/3}.sb-props-content{max-height:650px;position:static}.sb-preview .discord{min-height:200px}.sb-preview .sb-delivery{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sb-preview .sb-delivery label{grid-column:1/-1}.sb-preview .sb-delivery small{grid-column:1/-1}.sb-toolbar .badge{display:none}}@media(max-width:750px){.sb-toolbar{flex-direction:column;align-items:flex-start;gap:12px}.sb-toolbar h1{font-size:18px}.sb-body{grid-template-columns:1fr}.sb-palette{grid-row:auto;border-bottom:1px solid #405669;display:flex;flex-wrap:wrap;gap:6px;padding:12px}.sb-palette h2,.sb-palette p,.sb-palette label,.sb-palette select{display:none}.sb-palette>button{width:auto;margin:0;padding:10px;font-size:13px;cursor:pointer}.sb-palette>button span{font-size:11px}.sb-properties,.sb-preview{grid-column:auto;border-top:1px solid #405669}.sb-props-content{max-height:none}.sb-preview .sb-delivery{display:block}.sb-status{font-size:9px}.sb-toolbar .toolbar{gap:6px}.sb-toolbar .btn{padding:8px 10px}.sb-pane-heading{padding:15px}.sb-drop{min-height:130px}}
.nav-dropdown{position:relative;align-self:center;color:#cfd3d7;font-size:17px}.nav-dropdown summary{list-style:none;cursor:pointer;padding:12px 10px;white-space:nowrap}.nav-dropdown summary::-webkit-details-marker{display:none}.nav-dropdown>div{position:absolute;top:100%;left:0;min-width:250px;background:#1b242c;padding:12px;border-radius:10px;box-shadow:0 10px 24px #0f131855;z-index:30}.nav-dropdown>div a{display:block;font-size:15px;padding:12px;border-radius:4px}.nav-dropdown>div a:hover{background:#2a3844}.brand-portrait{width:62px;height:70px;object-fit:cover;object-position:50% 20%;border-radius:10px;background:#2d3c49}.header-profile{margin-left:auto}.profile-preview{display:flex;gap:12px;align-items:center;color:#c3c9ce;font-size:12px}.profile-preview small{font-size:15px;font-weight:700;color:#eeeeee;margin-top:2px}.profile-circle{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#3b4f60;color:#d8e2ee;font-weight:700;font-size:24px}.profile-preview>span:last-child{margin-left:16px}.mascot-hero{display:flex;justify-content:center;align-items:center;min-height:390px}.mascot-hero img{max-width:100%;width:420px;height:440px;object-fit:contain;filter:drop-shadow(0 10px 8px #0f131833)}.xela-hero{grid-template-columns:1.25fr 1fr;gap:50px;padding-top:65px;padding-bottom:85px}.xela-hero h1{font-size:53px}.xela-hero p{font-size:17px;line-height:1.8}.discord-btn{background:#e7b26d;color:#ffffff}.top-brand{font-size:34px}.status-page{max-width:1060px;margin:0 auto}.status-banner{padding:28px;display:flex;align-items:center;gap:22px;background:#26333e;border-radius:7px;border-left:5px solid #d8b770;margin-bottom:25px}.status-banner.healthy{border-color:#80d6a3}.status-banner h2{font-size:22px;font-weight:800}.status-banner p{margin:6px 0 0;font-size:14px}.status-light{width:14px;height:14px;border-radius:50%;background:#d8b770;box-shadow:0 0 0 7px #d8b77015;flex-shrink:0}.status-banner.healthy .status-light{background:#80d6a3;box-shadow:0 0 0 7px #80d6a315}.status-metrics .card{padding:23px}.status-metrics strong{font:700 28px Manrope;display:block;margin:20px 0}.status-metrics label{color:#a0a9b1;font-size:10px;letter-spacing:1px}.status-services{margin-top:25px}.service-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 25px;border-top:1px solid #384a5b}.service-row h3{font-size:15px;margin:0 0 5px}.service-row p{font-size:12px;margin:0}.service-label{font-size:11px;white-space:nowrap;padding:6px 9px;border-radius:4px}.service-label.healthy{color:#8fdbac;background:#23352b}.service-label.waiting{color:#dfc283;background:#373024}.service-label.development{color:#f1d2aa;background:#37444f}.status-checked{font-size:11px;color:#98a2aa;margin:20px 0 45px}.status-explainer h2{margin-bottom:22px}.status-explainer p{font-size:13px}.status-explainer details{margin:25px 0;color:#bac1c7;line-height:1.8;font-size:13px}.status-explainer summary{cursor:pointer}body[data-surface=builder] .top-nav{display:none}body[data-surface=builder] .top-brand:after{content:' / Message Builder';font-size:15px;color:#aeb5bc;font-weight:500}body[data-surface=builder] header{height:78px}body[data-surface=builder] .brand-portrait{width:44px;height:50px}body[data-status-page] header .icon-btn{display:none}
@media(max-width:1000px){.nav-dropdown{font-size:14px}.top-brand{font-size:25px}.brand-portrait{width:45px;height:50px}.top-nav>a{font-size:13px}.profile-circle{width:35px;height:35px;font-size:20px}.profile-preview{font-size:10px}.profile-preview small{font-size:12px}.header-profile .icon-btn{display:none}.profile-preview>span:last-child{margin-left:0}.xela-hero h1{font-size:42px}.mascot-hero img{height:350px}}@media(max-width:700px){.xela-hero{grid-template-columns:1fr;gap:10px;padding:25px 0 45px}.mascot-hero{min-height:250px;order:-1}.mascot-hero img{height:285px}.xela-hero h1{font-size:36px}.xela-hero p{font-size:15px}.nav-dropdown{font-size:13px}.nav-dropdown summary{padding:9px 8px}.nav-dropdown>div{min-width:190px}.profile-preview small{font-size:12px}.status-banner{padding:22px 20px}.status-banner h2{font-size:18px}.service-row{padding:20px 18px}.service-row p{max-width:230px}body[data-surface=builder] .top-brand:after{display:none}body[data-surface=builder] header{height:70px}.profile-circle{display:none}}
/* Server configuration panels */
.settings-group{margin:26px 0}.settings-group>summary{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#c0c6cc;cursor:pointer;padding:12px 0}.settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.setting-card{background:#25323d;border-left:3px solid #455c70;padding:20px;display:flex;flex-direction:column;min-height:175px}.setting-card h2{font-size:15px;margin:0 0 10px}.setting-card p{font-size:12px;line-height:1.6;flex:1;margin:0 0 22px;color:#b2b9c0}.setting-card>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.setting-card .btn{font-size:11px;padding:8px 12px}.config-status{font-size:8px;color:#a9b1b8;letter-spacing:.04em}.setting-card>small{font-size:8px;color:#8f9aa3;margin-top:10px}.settings-dialog{width:min(720px,94vw);max-width:720px;background:#25323d;padding:0;border:1px solid #3c5061;border-radius:4px;max-height:90vh}.settings-dialog #dialogContent{padding:0}.settings-dialog #moduleForm{margin:0}.settings-modal-head{padding:26px 30px 15px}.settings-modal-head h2{font-size:25px;margin:0 30px 12px 0}.settings-modal-head p{font-size:13px;color:#b6bdc4;line-height:1.7}.settings-fields{padding:0 30px 12px;max-height:62vh;overflow:auto}.setting-field{padding:22px 0;border-bottom:1px solid #2c3b48}.setting-field label{font-size:13px;margin:0 0 9px;display:block;color:#e3e6e8}.setting-field input:not([type=checkbox]):not([type=radio]),.setting-field textarea,.setting-field select{background:#222d37;border:1px solid #2f3f4d;border-radius:2px;margin:0;box-sizing:border-box;width:100%;color:#eeeeee;padding:10px;font:inherit;font-size:13px}.setting-field textarea{min-height:120px;resize:vertical}.setting-field small{font-size:11px;display:block;color:#9da6ae;line-height:1.6;margin-top:7px}.setting-switch{display:flex!important;align-items:center;gap:13px;cursor:pointer}.setting-switch input{position:absolute;opacity:0;width:1px;height:1px}.setting-switch span{width:35px;height:20px;background:#66727c;border-radius:20px;position:relative;flex:none}.setting-switch span:before{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;background:#eeeeee;border-radius:50%;transition:transform .15s}.setting-switch input:checked+span{background:#47709e}.setting-switch input:checked+span:before{transform:translateX(15px)}.setting-switch input:focus-visible+span{outline:2px solid white;outline-offset:3px}.settings-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 25px;border-top:1px solid #334554;background:#273440}.settings-modal-footer>small{margin-right:auto;font-size:11px;color:#a2abb2}.save-setting,.add-item{background:#218b54!important;border-color:#218b54!important;color:white!important}.resource-picker{border:1px solid #324352;background:#222d37}.resource-picker>summary{padding:10px;font-size:13px;cursor:pointer;overflow-wrap:anywhere}.resource-search{margin:8px!important;width:calc(100% - 16px)!important}.resource-options{max-height:220px;overflow:auto;padding:8px}.resource-options>label{display:flex;align-items:center;gap:9px;padding:7px;margin:0;font-size:12px;cursor:pointer}.resource-options>label[hidden]{display:none}.resource-options label input{width:auto;margin:0}.resource-options label small{margin:0 0 0 auto;font-size:9px}.resource-options p{font-size:12px;padding:6px;color:#a2abb2}.resource-picker>.btn{margin:8px}.manual-id{display:flex;gap:6px;margin-top:8px}.manual-id .btn{white-space:nowrap;font-size:11px}.repeat-list>h3{font-size:15px;display:flex;align-items:center;justify-content:space-between}.repeat-item{padding:14px;background:#293743;border:1px solid #344655;margin:15px 0}.repeat-item>summary{font-size:14px;font-weight:600;cursor:pointer}.repeat-item .setting-field{padding:17px 0}.repeat-item>.danger{width:100%;margin-top:16px}.add-item{width:100%;margin-top:12px}.empty-list,.module-draft-note{font-size:12px;color:#b4bbc2}.module-draft-note{border-left:2px solid #4872a1;padding:8px 12px;margin:12px 0}.settings-dialog #dialogClose{position:absolute;right:15px;top:15px}.settings-dialog::backdrop{background:#0f1318aa}#resourceStatus{font-size:11px;color:#adb5bc}@media(max-width:1200px){.settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:850px){.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-modal-head,.settings-fields{padding-left:20px;padding-right:20px}}@media(max-width:500px){.settings-grid{grid-template-columns:1fr}.settings-modal-footer{padding:12px}.settings-modal-footer>small{max-width:80px}.resource-options label{flex-wrap:wrap}.setting-card{min-height:145px}}
/* Softer cards and truthful enabled/disabled configuration states. */
.btn{border-radius:12px;transition:background .16s,transform .16s,box-shadow .16s}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px #0f131822}.setting-card{border-radius:20px;border:1px solid #ffffff0b;border-left:3px solid #d96065;padding:22px;box-shadow:0 6px 22px #0f131815;transition:transform .18s,border-color .18s;background:linear-gradient(145deg,#2b3a47,#26333f)}.setting-card:hover{transform:translateY(-3px);border-color:#ffffff26}.setting-card.is-enabled{border-left-color:#49cf92}.setting-card.is-disabled{border-left-color:#e36e76}.config-status{padding:6px 9px;border-radius:20px;font-weight:700;font-size:9px}.config-status.enabled{color:#86efb5;background:#25865730}.config-status.disabled{color:#ff9fa8;background:#bd3b4b26}.setting-card h2{font-size:16px;line-height:1.4}.setting-card p{line-height:1.7}.settings-group>summary{padding:16px 8px;font-weight:600}.settings-dialog{border-radius:24px;box-shadow:0 28px 100px #0f131866}.settings-modal-head{padding-top:30px}.settings-modal-head h2{letter-spacing:-.04em}.settings-modal-footer{border-radius:0 0 24px 24px}.setting-field input:not([type=checkbox]):not([type=radio]),.setting-field textarea,.setting-field select,.resource-picker{border-radius:12px}.repeat-item{border-radius:16px;padding:18px}.module-draft-note,.simple-notice{border-radius:12px}.resource-options>label{border-radius:9px}.resource-options>label:hover{background:#ffffff08}.resource-picker>summary{padding:13px}.switch-field{padding-top:25px;padding-bottom:25px}.setting-switch span{background:#a44852}.setting-switch input:checked+span{background:#2dad74}.server-card,.feature-card,.card,.panel{border-radius:20px}.search{border-radius:14px}.nav-dropdown>div{border-radius:15px}.tagify-panel{margin-top:14px;padding:12px;background:#222e38;border:1px solid #354757;border-radius:14px}.tagify-panel>summary{cursor:pointer;color:#eaedf1;font-size:12px}.tagify-result{font-size:13px;line-height:1.6;margin-top:12px;white-space:pre-wrap;overflow-wrap:anywhere}.tagify-content{margin-bottom:8px}.tagify-embed{background:#2c3b48;border-left:4px solid #ccf0db;border-radius:6px;padding:16px;display:flow-root}.tagify-embed strong{display:block;color:#f3f3f6}.tagify-thumb{float:right;width:65px;max-height:85px;object-fit:contain;margin:0 0 12px 12px;border-radius:9px}.tagify-image{max-width:100%;max-height:240px;display:block;border-radius:10px;margin-top:12px}.tagify-embed small{font-size:10px;margin-top:10px}input:focus,textarea:focus,select:focus{outline:2px solid #edc38e44;outline-offset:2px}
.account-menu{position:relative}.account-menu>summary{display:flex;align-items:center;gap:12px;cursor:pointer;padding:6px 10px;border-radius:14px;list-style:none}.account-menu>summary::-webkit-details-marker{display:none}.account-menu>summary:hover{background:#ffffff08}.account-avatar{width:52px;height:52px;object-fit:cover;border-radius:50%;border:2px solid #ffffff18}.account-menu #profileText{font-size:12px;color:#bcc2c8}.account-menu #profileText small{display:block;font-size:16px;font-weight:700;color:#f5f5f7;margin-top:3px}.account-options{position:absolute;right:0;top:100%;min-width:180px;background:#283540;border:1px solid #ffffff16;border-radius:15px;box-shadow:0 15px 35px #0f131855;padding:7px;z-index:100}.account-options a,.account-options button{display:block;width:100%;box-sizing:border-box;padding:12px;border:0;border-radius:9px;background:none;text-align:left;color:#eaedf1;font:inherit;font-size:13px;cursor:pointer}.account-options a:hover,.account-options button:hover{background:#ffffff0a}.account-options button{color:#f0a3aa}.profile-preview #profileText small{display:block}
.guild-avatar{width:64px;height:64px;flex:none;object-fit:cover;border-radius:20px;border:1px solid #ffffff14}.guild-initial{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#47709f,#e4a758);font-size:28px;font-weight:700;color:white}.server-title{display:flex;align-items:center;gap:16px;min-width:0}.server-title h1,.server-title h2{margin:0 0 5px;overflow-wrap:anywhere}.server-title small{color:#b1b9c0;font-size:12px}.manager-note{padding:18px 22px;border-radius:16px;background:#2b3a47;border:1px solid #ffffff0d;color:#bfc5cb;font-size:13px;line-height:1.7;margin-bottom:24px}.manager-section{margin-top:28px}.managed-guild>.badge{display:inline-block;margin:18px 0 0}.guild-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.guild-metrics>div{background:#ffffff04;border-radius:13px;padding:12px}.guild-metrics strong{display:block;font-size:23px}.guild-metrics small{display:block;font-size:10px;color:#aab3ba;margin-top:6px}.staff-row,.audit-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:13px 0;border-bottom:1px solid #ffffff0b}.staff-row>.btn{margin-left:auto}.audit-row{font-size:12px}.audit-row time{color:#a2abb2}.audit-row small{color:#a2abb2}#assignBotRole{margin-top:20px;max-width:500px}.activity-table{overflow:auto}.activity-table table{width:100%;border-collapse:collapse;font-size:12px}.activity-table th,.activity-table td{text-align:left;padding:12px;border-bottom:1px solid #ffffff12;white-space:nowrap}.activity-table th{color:#adb5bc}.server-card>.server-title{margin-bottom:25px}.server-card h2{font-size:21px}.settings-modal-footer [disabled]{opacity:.4;cursor:not-allowed}@media(max-width:600px){.guild-avatar{width:48px;height:48px;border-radius:15px}.guild-metrics strong{font-size:19px}.guild-metrics small{font-size:9px}}

/* Responsive navigation and personal account decoration */
.top-nav>a,.top-nav>.nav-dropdown>summary{display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:16px;cursor:pointer;transition:background .2s,transform .2s,color .2s,box-shadow .2s}
.top-nav>a:hover,.top-nav>.nav-dropdown>summary:hover,.top-nav>.nav-dropdown[open]>summary{background:#f1d1a822;color:#eceff2;box-shadow:0 4px 20px #0f131822;transform:translateY(-2px)}
.top-nav>a:active,.top-nav>.nav-dropdown>summary:active,.btn:active{transform:scale(.96)}
.top-nav summary{list-style:none}.top-nav summary::marker,.top-nav summary::-webkit-details-marker{display:none;content:''}
.top-nav a:focus-visible,.top-nav summary:focus-visible,.account-menu summary:focus-visible{outline:2px solid #eaedf1;outline-offset:4px}
.nav-dropdown>div,.account-options{animation:caesrov-pop .18s ease-out}
.nav-dropdown>div>a,.account-options>a,.account-options>button{transition:background .18s,padding .18s}
.nav-dropdown>div>a:hover,.account-options>a:hover,.account-options>button:hover{background:#f1d1a822;padding-left:20px}
.feature-card,.card,.server-card{transition:transform .2s,box-shadow .2s,border-color .2s}
.feature-card:hover,.server-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #0f131833}
.btn{transition:transform .18s,box-shadow .18s,filter .18s}.btn:hover{filter:brightness(1.1);box-shadow:0 5px 20px #0f131833}
.account-sparkle{position:relative;border-radius:20px;background-image:linear-gradient(90deg,#202a34c9,#2e3b459c),var(--account-banner,radial-gradient(ellipse at right,#eabc8066,transparent 75%));background-size:cover;background-position:center;isolation:isolate}
.account-sparkle>summary{position:relative;border-radius:20px;padding:10px 14px;overflow:hidden;min-height:68px;cursor:pointer}
.account-sparkle>summary:before{content:'✦ · ✧';position:absolute;right:18%;top:2px;color:#eaedf1;font-size:18px;opacity:.65;pointer-events:none;animation:caesrov-twinkle 3s ease-in-out infinite}
.account-sparkle>summary:after{content:'✧';position:absolute;left:50px;bottom:0;color:#eaedf1;font-size:25px;pointer-events:none;animation:caesrov-twinkle 3s 1s ease-in-out infinite}
.account-sparkle .account-avatar{border:2px solid #eaedf1;box-shadow:0 0 0 4px #f1d1a822,0 0 16px #f0cfa35c;transition:transform .25s,box-shadow .25s}
.account-sparkle:hover .account-avatar,.account-sparkle[open] .account-avatar{transform:rotate(-5deg) scale(1.07);box-shadow:0 0 0 5px #f1d1a844,0 0 22px #f0cfa399}
.account-star{color:#eaedf1}
.access-invite .discord-btn{margin:18px 0;min-height:48px}.access-price{padding:16px;border-radius:16px;background:#f1d1a812;border:1px solid #f1d1a833;font-size:14px}
@keyframes caesrov-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes caesrov-twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:.95;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}


/* Black canvas and cohesive server workspace */
:root{--bg:#14191d;--panel:#1b242c;--border:#2a3844;--muted:#a9b1b8;--accent:#f2d4ad}
html,body,.shell{background:#14191d!important}header{background:#171f26eF!important;border-bottom:1px solid #2a3844;backdrop-filter:blur(20px)}
main{max-width:1550px;margin:auto;padding:30px 42px 70px}.xela-hero{min-height:550px;gap:30px;padding:50px 14px 35px;background:radial-gradient(ellipse at 82% 40%,#5d7b9512,transparent 56%)}.xela-hero h1{font-size:clamp(38px,4.2vw,68px);letter-spacing:-.045em}.xela-hero h1 span{color:#f2d4ad}.xela-hero p{max-width:620px;line-height:1.85}.mascot-hero img{max-height:430px;filter:drop-shadow(0 14px 30px #0f131888)}
.top-brand .brand-portrait{width:54px;height:54px;border-radius:17px;object-fit:cover;padding:0;background:#1e2831}.top-brand{font-size:30px}.top-nav{gap:4px}.top-nav>a,.top-nav>.nav-dropdown>summary{font-size:14px;padding:10px}.header-profile{gap:15px;margin-left:auto}.header-server{max-width:190px}.header-server label{font-size:9px!important;letter-spacing:.1em;color:#edc693}.header-server select{font-size:12px;background:#1f2932;border:1px solid #344555;border-radius:12px;width:185px;padding:8px;margin:4px 0 0!important}
.feature-section{padding-top:10px}.feature-section>p{color:#a9b1b8;margin-bottom:28px}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.feature-card{background:linear-gradient(135deg,#1e2831,#19222a);border:1px solid #2c3a47;border-left:3px solid var(--card-accent);padding:25px;min-height:195px;border-radius:19px}.feature-card h2{font-size:18px}.feature-card p{line-height:1.8}.feature-card small{color:var(--card-accent)}
.card,.panel,.server-card,.setting-card,.manager-note{background:#1b242c!important;border:1px solid #2b3946;border-radius:20px}.panel-head,.settings-modal-footer{background:#1e2830!important;border-color:#2e3d4a}.server-card{padding:26px}.guild-avatar{width:58px;height:58px;border-radius:18px;object-fit:cover}.server-title{gap:16px}.server-title h2{margin:0 0 6px}.server-title small{color:#a9b1b8}.server-card>.btn{margin-top:24px;width:100%}.setting-card{padding:22px;border-left:3px solid #a35665}.setting-card.is-enabled{border-left-color:#69c898}.setting-card.is-disabled{border-left-color:#d46d7e}.settings-grid{gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}.setting-card h2{font-size:16px}.setting-card p{font-size:13px}.setting-card>small{font-size:10px}.settings-group>summary{font-size:13px}.settings-dialog{background:#1b242c!important;border-radius:22px;border-color:#364857}.setting-field input:not([type=checkbox]),.setting-field textarea,.setting-field select,.resource-picker{background:#181e23!important;border-color:#334453!important;border-radius:12px!important}.repeat-item{background:#202b34;border-color:#334453;border-radius:16px}.settings-modal-footer{position:sticky;bottom:0}.settings-modal-head{padding-top:30px}
.workspace-toolbar{justify-content:flex-end;align-items:center;gap:7px;padding:0;margin:24px 0 0;background:transparent;border:0;border-radius:0}.workspace-toolbar #saveStatus{margin-right:auto;font-size:11px;color:#7fbe9c}.workspace-toolbar .btn{min-height:30px;font-size:10px;padding:6px 10px;border-radius:7px}.simple-notice{background:#1f262d;border:1px solid #2d3d4a;border-radius:15px;color:#b7bec4}.manager-section{margin-top:25px}.guild-metrics{background:#181e23;border-radius:15px;padding:17px;margin:20px 0}.managed-guild>.badge{margin-top:18px;display:inline-block}.badge{border-radius:8px;padding:5px 9px}.btn{border-radius:13px}.btn.primary{background:#f1d1a8;color:#1e2b36;border-color:#f1d1a8}.login-card{max-width:600px;padding:36px}.login-card p{line-height:1.8;margin:18px 0 24px}
@media(max-width:1450px){.top-brand{font-size:25px}.header-server{max-width:145px}.header-server select{width:140px}.top-nav>a,.top-nav>.nav-dropdown>summary{font-size:12px;padding:8px}.header-profile #exportAll{display:none}}
@media(max-width:1000px){header{flex-wrap:wrap;gap:12px;height:auto!important;padding:16px!important}.top-nav{order:3;width:100%;justify-content:center;flex-wrap:wrap}.header-profile{margin-left:auto}.feature-grid,.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}main{padding:25px 20px}.xela-hero{min-height:420px}.header-server{display:none}}
@media(max-width:600px){.feature-grid,.settings-grid{grid-template-columns:1fr}.mascot-hero img{max-height:270px}.xela-hero{padding:25px 0;min-height:0}.workspace-toolbar{flex-wrap:wrap}.account-sparkle>summary{min-height:54px;padding:6px}.account-sparkle .account-avatar{width:38px;height:38px}.top-brand .brand-portrait{width:42px;height:42px}.top-brand{font-size:23px}}

/* Touch-first layouts for phones and tablets. */
main,header,header>*{min-width:0}img{max-width:100%}.sb-app{background:#181e23}.sb-canvas,.sb-preview{background:#1b242c}.sb-toolbar,.sb-palette,.sb-properties{background:#1c252d}
@media(max-width:1000px){
 .header-profile{flex-wrap:wrap;justify-content:flex-end;min-width:0}.header-server{display:block;max-width:170px}.header-server select{width:100%;min-width:125px}.account-menu{max-width:220px}.profile-preview{min-width:0}.profile-preview #profileText{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:760px){
 .sb-toolbar{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 16px}.sb-toolbar>div:first-child{flex-wrap:wrap;gap:10px}.sb-toolbar .toolbar{width:100%;gap:8px}.sb-toolbar .btn{min-height:44px;padding:10px 12px;flex:1 0 auto}.sb-toolbar h1{font-size:21px}
 .sb-body{display:flex;flex-direction:column;min-height:0}.sb-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:16px;border-right:0;border-bottom:1px solid #2e3d4a}.sb-palette h2,.sb-palette p,.sb-palette label,.sb-palette select{grid-column:1/-1}.sb-palette h2,.sb-palette h2:not(:first-child){margin:10px 0 4px}.sb-palette>button{margin:0;min-height:46px;padding:12px;cursor:pointer}.sb-palette p{margin:8px 0}.sb-palette select{margin-bottom:0;font-size:16px}
 .sb-canvas,.sb-properties,.sb-preview{width:100%;border-right:0;border-bottom:1px solid #2e3d4a}.sb-props-content{position:static;max-height:none;padding:18px}.sb-canvas-content{padding:18px}.sb-preview .discord{min-height:220px;padding:20px 14px}.sb-status{flex-wrap:wrap;gap:8px;line-height:1.6}.sb-tabs button{min-height:48px}.sb-node-line{min-height:48px}.sb-properties .btn{min-height:44px;font-size:13px}.sb-delivery .btn{min-height:46px;width:100%;font-size:13px}
}
@media(max-width:600px){
 header{gap:12px!important;padding:14px!important;align-items:center}.top-brand{gap:9px;font-size:22px;flex-shrink:0}.header-profile{flex:1;gap:8px}.profile-preview{gap:8px;font-size:10px}.profile-preview small{font-size:12px}.profile-preview #profileText{max-width:100px}.account-menu{max-width:180px}.account-sparkle>summary{gap:8px}.account-sparkle>summary:before,.account-sparkle>summary:after,.account-star{display:none}.header-server{order:2;flex-basis:100%;max-width:none;width:100%}.header-server select{min-height:44px;font-size:16px}.header-server label{display:none}
 .top-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible;margin:0!important;flex-basis:100%}.top-nav>a,.top-nav>.nav-dropdown>summary{justify-content:center;font-size:12px;min-height:44px;padding:9px 7px;background:#ffffff04;border-radius:12px}.nav-dropdown{min-width:0}.nav-dropdown>div{min-width:190px;max-width:calc(100vw - 28px)}.nav-dropdown:last-child>div{left:auto;right:0}.nav-dropdown>div a{min-height:44px;font-size:14px}
 main{padding:22px 16px 45px}.xela-hero{gap:12px}.xela-hero h1{font-size:clamp(30px,8.4vw,40px);line-height:1.2}.xela-hero p{font-size:15px}.xela-hero .toolbar{display:grid;grid-template-columns:1fr;width:100%}.xela-hero .toolbar .btn{min-height:48px}.mascot-hero{min-height:220px}.mascot-hero img{height:240px}.feature-card{min-height:0;padding:22px}.feature-grid,.settings-grid{gap:14px}.grid,.studio{grid-template-columns:minmax(0,1fr)}.server-card{padding:20px}.server-title{gap:12px;overflow-wrap:anywhere}.server-title h1{font-size:25px}.server-card h2{font-size:20px}.guild-metrics{padding:10px;gap:5px}.guild-metrics>div{padding:9px 6px}.guild-metrics strong{font-size:20px}.guild-metrics small{line-height:1.5}.page-head,.section-heading{gap:14px;flex-wrap:wrap}.page-head .toolbar{width:100%}.btn{min-height:44px}.workspace-toolbar{padding:12px}.workspace-toolbar #saveStatus{flex-basis:100%;line-height:1.6}.workspace-toolbar .btn{flex:1;min-height:44px}.card,.panel,.setting-card{min-width:0}.command-row{overflow-wrap:anywhere}.command-row code{white-space:normal}.login-card{padding:24px}.login-card .btn{width:100%}
 input:not([type=checkbox]):not([type=radio]),textarea,select,.sb-properties input,.sb-properties textarea,.sb-properties select,.sb-delivery input,.setting-field input:not([type=checkbox]):not([type=radio]),.setting-field textarea,.setting-field select{font-size:16px}input[type=checkbox],input[type=radio]{min-width:20px;min-height:20px}.setting-switch input{min-width:0;min-height:0}
 .settings-dialog{width:calc(100% - 16px);max-height:94dvh}.settings-modal-head{padding:24px 18px 12px}.settings-modal-head h2{font-size:22px}.settings-fields{padding:0 18px 12px;max-height:58dvh}.settings-modal-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}.settings-modal-footer>small{flex-basis:100%}.settings-modal-footer .btn{flex:1}.resource-options>label{min-height:44px;overflow-wrap:anywhere}.resource-options label small{display:none}.manual-id{flex-wrap:wrap}.manual-id .btn{width:100%}.service-row{align-items:flex-start;flex-direction:column;gap:10px}.service-row p{max-width:none}.status-banner{gap:16px}.status-metrics strong{font-size:24px}dialog{padding:24px 18px}#toast{width:calc(100% - 32px);text-align:center;bottom:calc(16px + env(safe-area-inset-bottom));line-height:1.6}footer{padding:18px 16px}
 .account-options{position:fixed;top:90px;right:12px;left:auto;max-width:calc(100vw - 24px);width:270px}.account-options a,.account-options button{min-height:44px}
}
/* Familiar message canvas: content, embeds, components, properties and preview. */
.builder-login{max-width:560px;margin:70px auto;padding:45px;text-align:center}.builder-login h1{font-size:32px;line-height:1.3}.builder-login p{line-height:1.8;margin:22px 0}.builder-login .btn{min-height:48px;padding:14px 24px}.builder-login small{margin-top:22px;line-height:1.7}.builder-lock{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:22px;background:#f1d1a81c;color:#eaedf1;font-size:36px;margin-bottom:24px}
.sb-toolbar{background:#1c2227;border-color:#2c3b48}.sb-body{grid-template-columns:180px minmax(300px,1.1fr) minmax(260px,.8fr) minmax(300px,1fr)}.sb-canvas,.sb-palette,.sb-properties{border-color:#2e3d4a}.sb-palette>button{border-radius:10px;min-height:46px;font-size:17px}.sb-palette>button span{font-size:13px}.sb-palette-tip{margin:0 0 12px!important}.sb-canvas-content>label{color:#eaedf1}.sb-canvas-content>textarea{min-height:120px}.sb-tabs{background:#1d272f;border-color:#2e3d4a}.sb-tabs button{padding:16px 12px}.sb-tabs button.active{color:#eaedf1;border-color:#f1d1a8}.sb-embed-card{width:100%;background:#232b32;border:1px solid #334554;border-radius:12px;display:flex;align-items:center;gap:13px;padding:16px;color:#eeeeee;text-align:left;margin:12px 0;cursor:pointer;min-width:0}.sb-embed-card>span:nth-child(2){flex:1;min-width:0}.sb-embed-card strong{display:block;font-size:13px;overflow-wrap:anywhere}.sb-embed-card small{font-size:11px;line-height:1.7;overflow-wrap:anywhere}.sb-embed-card.selected{border-color:#f1d1a8;box-shadow:0 0 0 1px #f1d1a8}.sb-embed-stripe{width:4px;align-self:stretch;border-radius:4px;flex:none}.sb-component-heading .btn{font-size:12px;padding:9px 12px}.sb-empty-embed{border:1px dashed #364858;border-radius:12px;padding:32px 12px}.sb-extra{margin:18px 0;border-top:1px solid #334453;padding-top:15px}.sb-extra summary{cursor:pointer;padding:8px 0 16px;color:#dadde0;font-size:13px}.sb-extra input,.sb-extra textarea{margin-bottom:16px}.sb-variable{background:#212c36;border:1px solid #334453;border-radius:10px;padding:15px;margin:12px 0}.sb-variable code{color:#eaedf1}.sb-tag-example{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.8;color:#eaedf1}.sb-preview-field{margin:14px 0}.sb-preview-field strong{font-size:12px;margin:0 0 4px}.sb-preview .tagify-embed{margin:12px 0;max-width:100%;padding:15px}.sb-preview .tagify-image{max-width:100%}.sb-property-title .toolbar{gap:6px}.sb-delivery{background:#1c2227;border-color:#2e3d4a}.sb-delivery label{font-size:12px}.sb-status{background:#182027;border-color:#2e3d4a}.sb-app input,.sb-app select,.sb-app textarea{border-radius:9px;background:#181e23;border-color:#334453}
@media(max-width:1300px) and (min-width:761px){.sb-body{grid-template-columns:160px minmax(280px,1fr) minmax(260px,.85fr)}.sb-preview{grid-column:2/4}.sb-palette{grid-row:1/3}}
@media(max-width:760px){.sb-body{display:flex}.builder-login{margin:30px auto;padding:28px 20px}.builder-login h1{font-size:27px}.sb-properties .sb-extra summary{min-height:44px}.sb-embed-card{min-height:65px}.sb-palette{position:relative}.sb-tabs{overflow-x:auto}.sb-tabs button{flex:none}.sb-preview .tagify-embed{padding:13px}}
/* Private dashboard entry: no server browsing until Discord authentication. */
.auth-required .top-nav,.auth-required #headerServer,.auth-required #exportAll{display:none!important}.auth-required header{flex-wrap:nowrap}.auth-required .header-profile{margin-left:auto}.auth-required main{min-height:calc(100dvh - 170px);display:grid;align-content:center;padding:28px 18px}.auth-required .builder-login{margin:30px auto;width:100%;max-width:560px}.login-help{font-size:13px!important;margin-bottom:0!important}.login-help a{color:#eaedf1}.auth-required .builder-login h1{line-height:1.3}.auth-required .builder-login .btn{width:100%;font-size:15px}
@media(max-width:600px){.auth-required .builder-login{margin:15px auto;padding:30px 22px}.auth-required .builder-login h1{font-size:29px}.auth-required .builder-login p{font-size:14px}.auth-required main{padding:16px;min-height:calc(100dvh - 145px)}.auth-required .builder-login small{font-size:12px}.auth-required header{gap:8px!important}.auth-required .profile-preview #profileText{max-width:90px}}
/* One bounded scroll area per settings dialog, with no scrolling behind it. */
html:has(dialog[open]){overflow:hidden;overscroll-behavior:none}
dialog{overscroll-behavior:contain}
.settings-dialog[open]{display:flex;flex-direction:column;height:fit-content;max-height:90dvh;overflow:hidden;padding:0}
.settings-dialog>form[method=dialog]{flex:0 0 auto;margin:0}
.settings-dialog #dialogContent{display:flex;flex-direction:column;min-height:0;max-height:inherit;overflow:hidden;flex:1 1 auto}
.settings-dialog #moduleForm{display:flex;flex-direction:column;min-height:0;max-height:calc(90dvh - 2px);margin:0;overflow:hidden}
.settings-modal-head{flex:0 0 auto}
.settings-dialog .settings-fields{position:relative;flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:12px}
.settings-dialog .settings-modal-footer{position:static;flex:0 0 auto;bottom:auto}
.setting-switch{position:relative}
.setting-switch input{inset:0 auto auto 0;width:1px;height:1px;min-width:0;min-height:0;margin:0}
@media(max-width:600px){.settings-dialog[open]{max-height:94dvh}.settings-dialog #moduleForm{max-height:calc(94dvh - 2px)}}

/* Compact server controls, based on the supplied dashboard walkthrough. */
.settings-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.settings-grid .setting-card{padding:16px 15px;min-height:158px;border-radius:7px;background:#1b242c!important;box-shadow:none;transition:border-color .15s,background .15s}
.settings-grid .setting-card:hover{transform:none;background:#202a34!important;border-color:#41576a}
.settings-grid .setting-card h2{font-size:14px;margin-bottom:7px}.settings-grid .setting-card p{font-size:11px;line-height:1.5;margin-bottom:15px}.settings-grid .setting-card>small{font-size:8px;line-height:1.4;margin-top:9px;color:#8a959f}
.settings-grid .setting-card>div{gap:6px}.settings-grid .setting-card .btn{font-size:10px;border-radius:4px;padding:7px 9px;min-height:30px}.settings-grid .config-status{font-size:8px;padding:4px 6px;border-radius:4px;white-space:nowrap}
.settings-group>summary{font-size:11px;letter-spacing:.07em;padding:13px 0}
.settings-dialog{width:min(600px,94vw);max-width:600px;border-radius:9px!important;background:#1f2932!important;box-shadow:0 24px 90px #0f1318aa}
.settings-modal-head{padding:21px 24px 12px}.settings-modal-head h2{font-size:21px;letter-spacing:-.02em;margin-bottom:8px}.settings-modal-head p{font-size:12px;line-height:1.5;margin:0;color:#a6afb7}
.settings-dialog .settings-fields{padding:0 24px 12px}.setting-field{padding:18px 0;border-bottom:0}.setting-field label{font-size:12px;margin-bottom:7px}.setting-field small{font-size:10px;line-height:1.5;color:#96a1aa}.setting-field textarea{min-height:100px}
.setting-field input:not([type=checkbox]):not([type=radio]),.setting-field textarea,.setting-field select,.resource-picker{border-radius:5px!important;background:#1b242c!important;font-size:12px;padding:9px!important}
.resource-picker{padding:0!important}.resource-picker>summary{padding:10px;font-size:12px;line-height:1.5}.resource-picker[open]{border-color:#39b98a!important}.resource-search{padding:8px!important}
.resource-options{max-height:230px;padding:4px 8px}.resource-options>label{position:relative;display:flex;flex-wrap:nowrap;gap:8px;padding:8px 4px;font-size:12px;min-height:34px;border-radius:4px}.resource-name{overflow-wrap:anywhere;min-width:0}.resource-symbol{color:#a5aeb5;flex:none}.resource-options label small{font-size:8px;opacity:.5;flex:none}.resource-options input[type=checkbox]{appearance:none;min-width:28px;width:28px;min-height:16px;height:16px;border-radius:20px;background:#5d6872;position:relative;cursor:pointer;flex:none}.resource-options input[type=checkbox]:before{content:'';position:absolute;background:white;width:12px;height:12px;top:2px;left:2px;border-radius:50%;transition:transform .12s}.resource-options input[type=checkbox]:checked{background:#2eb67d}.resource-options input[type=checkbox]:checked:before{transform:translateX(12px)}.resource-options input:focus-visible{outline:2px solid #8ce6c0;outline-offset:2px}
.manual-id-disclosure{margin-top:8px;color:#8a959f;font-size:10px}.manual-id-disclosure>summary{cursor:pointer}.manual-id .btn{border-radius:5px;font-size:10px}
.settings-modal-footer{padding:13px 22px;gap:10px;background:#1f2932!important;border-radius:0 0 9px 9px;border-top:1px solid #ffffff08}.settings-modal-footer .btn{border-radius:4px;font-size:11px;padding:8px 12px;min-height:33px}.settings-modal-footer #discardModule{color:#e77583;background:transparent;border-color:transparent}.settings-modal-footer>small{font-size:10px}.settings-modal-footer .save-setting{background:#27ae70!important;border-color:#27ae70!important}.settings-modal-footer .save-setting:disabled{opacity:.4;transform:none;box-shadow:none}
.duration-control{display:grid;grid-template-columns:minmax(0,1fr) 125px;gap:10px}.repeat-item{border-radius:5px;padding:13px;margin:12px 0}.repeat-item>summary{font-size:12px}.repeat-item .setting-field{padding:13px 0}.module-draft-note{font-size:10px;border-radius:4px;padding:7px 10px}.tagify-panel{border-radius:5px;font-size:11px;padding:9px}.tagify-panel>summary{font-size:10px}
@media(max-width:1200px){.settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.settings-grid .setting-card{padding:13px 11px;min-height:165px}.settings-grid .setting-card>div{align-items:flex-start;flex-direction:column}.settings-dialog{width:calc(100% - 16px)}.settings-modal-head{padding:20px 16px 10px}.settings-dialog .settings-fields{padding:0 16px 12px}.setting-field input:not([type=checkbox]):not([type=radio]),.setting-field textarea,.setting-field select{font-size:16px}.resource-options>label{min-height:44px}.resource-options label small{display:none}.settings-modal-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.settings-modal-footer .btn{min-height:42px}.duration-control{grid-template-columns:minmax(0,1fr) 110px}}@media(max-width:360px){.settings-grid{grid-template-columns:1fr}}
.settings-grid .setting-card .btn.primary{background:#446b98;color:#061214;border-color:#446b98}.settings-grid .setting-card .btn.primary:hover{background:#6089b7}.resource-picker>.btn{border-radius:4px;font-size:10px;min-height:30px;padding:6px 10px}
/* Caesrov staff workspace */
.staff-workspace{display:grid;grid-template-columns:175px minmax(0,1fr);gap:24px;align-items:start}.staff-nav{background:#1d272f;border:1px solid #2d3c49;border-radius:8px;padding:12px;display:grid;gap:5px;position:sticky;top:90px}.staff-nav>strong{font-size:11px;color:#8f9aa3;padding:10px 8px}.staff-nav>button{text-align:left;border:0;background:transparent;color:#b9bfc5;border-radius:5px;padding:11px;cursor:pointer;font-weight:650}.staff-nav>button:hover{background:#2c3b48}.staff-nav>button.active{background:#4973a2;color:#ffffff}.staff-current{display:grid;gap:12px;padding:15px 6px;border-top:1px solid #334453;margin-top:15px}.staff-current small{color:#929ca5;overflow-wrap:anywhere}.staff-content{min-width:0;display:grid;gap:20px}.staff-panel{background:#1b242c;border:1px solid #2c3b48;border-left:3px solid #43596d;border-radius:6px;overflow:hidden}.staff-panel>h2{font-size:13px;padding:18px 20px;margin:0;border-bottom:1px solid #2a3844;color:#b8bec4}.staff-panel-body{padding:20px}.staff-panel-body p{color:#a8b1b8;line-height:1.65}.staff-badge{display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;background:#3c5162;color:#ffffff;padding:4px 7px;border-radius:4px;font-weight:800}.role-owner{background:#ae354c}.role-root{background:#e4a758}.role-prospect{background:#dfbc23;color:#181700}.role-sudo{background:#be3d8d}.role-compliance{background:#5a7f9f}.role-sys{background:#167d9a}.staff-level{padding:14px;background:#232f3a;border:1px solid #2f3f4d;border-radius:6px;margin:10px 0}.staff-level p{margin:8px 0 0}.staff-level code{font-size:11px;color:#919ca5}.staff-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.staff-stats>div{display:grid;gap:5px;text-align:center;padding:20px 8px;border-radius:7px;background:#232e39}.staff-stats strong{font-size:27px;color:#4973a2}.staff-stats small{color:#929ca5}.staff-table-wrap{overflow-x:auto}.staff-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.staff-table th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#8e99a3}.staff-table th,.staff-table td{padding:14px 12px;border-bottom:1px solid #2d3c49}.staff-table code{white-space:nowrap}.staff-table .guild-avatar{width:32px;height:32px;min-width:32px}.staff-table .server-title{gap:10px}.staff-link{border:0;background:transparent;color:#4b75a6;font-weight:700;text-align:left;cursor:pointer}.staff-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}.staff-form>input{flex:1;min-width:150px}.staff-form textarea{width:100%}.staff-form input[type=checkbox],.staff-filters input{width:auto}.staff-filters{display:flex;gap:20px;flex-wrap:wrap;margin-top:15px}.staff-filters label{display:flex;gap:8px;align-items:center}.library-level-\-1{background:#173127}.library-level-1{background:#342e18}.library-level-2{background:#351e22}#promptsForm label{display:grid;gap:8px;margin:15px 0}.staff-workspace a{color:#4e7baf}
@media(max-width:800px){.staff-workspace{grid-template-columns:1fr;gap:14px}.staff-nav{position:static;display:flex;flex-wrap:wrap;gap:5px}.staff-nav>strong{width:100%}.staff-current{width:100%;display:flex;align-items:center;margin:0;padding:10px 5px;flex-wrap:wrap}.staff-nav>button{min-height:44px}.staff-panel-body{padding:14px}.staff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-table td,.staff-table th{padding:12px 8px}.staff-form .btn{min-height:44px}}
.staff-nav{width:auto;inset:auto;top:90px;align-self:start;min-width:0}.staff-workspace .btn.primary{background:#4973a2;border-color:#4973a2;color:#04181e}.staff-workspace input,.staff-workspace select{margin-bottom:0}.staff-nav .staff-badge{width:max-content}@media(max-width:800px){.staff-nav{top:auto;width:100%}}
@media(max-width:800px){.staff-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex-direction:row}.staff-nav>strong,.staff-current{grid-column:1/-1}.staff-nav>button{padding:10px;min-width:0}}

/* ==========================================================================
   Home / Overview redesign  (v14)
   Top-of-page layout: header · announcement pill · hero + scene · tool strip.
   Everything is scoped to .home-* or body[data-surface=dashboard] so the other
   dashboard pages keep their existing look.
   ========================================================================== */

/* ---------- Header (dashboard surface only) ---------- */
body[data-surface=dashboard] header{
  position:sticky;top:0;z-index:60;height:76px;gap:24px;
  justify-content:flex-start;
  padding:0 20px;
  background:rgba(24,31,37,.78)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body[data-surface=dashboard] .top-brand{gap:12px;font:800 19px Manrope,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#ffffff;white-space:nowrap}
body[data-surface=dashboard] .brand-portrait{width:48px;height:48px;border-radius:11px;object-fit:cover;object-position:50% 50%;background:transparent;box-shadow:none;filter:none;transform:scale(1.32)}

body[data-surface=dashboard] .top-nav{gap:2px;margin-left:14px}
body[data-surface=dashboard] .header-profile{margin-left:auto}
body[data-surface=dashboard] .top-nav>a,
body[data-surface=dashboard] .top-nav>.nav-dropdown>summary{
  min-height:40px;padding:8px 14px;border-radius:10px;font-size:15px;font-weight:600;
  color:#a8b0b7;background:transparent;box-shadow:none;transform:none;
  transition:background .16s,color .16s,box-shadow .16s,transform .16s}
body[data-surface=dashboard] .top-nav>a:hover,
body[data-surface=dashboard] .top-nav>.nav-dropdown>summary:hover,
body[data-surface=dashboard] .top-nav>.nav-dropdown[open]>summary{
  color:#ffffff;background:rgba(255,255,255,.09);box-shadow:0 5px 16px rgba(15,19,24,.2);
  transform:translateY(-1px)}
body[data-surface=dashboard] .nav-dropdown>summary::after{
  content:"";display:inline-block;flex:none;width:6px;height:6px;margin:-3px 0 0 9px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .2s}
body[data-surface=dashboard] .nav-dropdown[open]>summary::after{transform:rotate(225deg);margin-top:3px}
body[data-surface=dashboard] .nav-dropdown>div{
  top:calc(100% + 10px);min-width:210px;padding:8px;border-radius:14px;
  background:#212a31;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(15,19,24,.55)}
body[data-surface=dashboard] .nav-dropdown>div a{min-height:42px;display:flex;align-items:center;padding:10px 12px;font-size:14px;border-radius:9px;color:#eaedf1}

/* Signed-out "Sign in" becomes a proper button */
body[data-surface=dashboard] .profile-preview{height:40px;padding:0 16px;border-radius:3px;background:#f1d1a7;border:1px solid #f1d1a7;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#27343f;font-size:13px;font-weight:500;gap:0;transition:background .15s,border-color .15s,transform .15s}
body[data-surface=dashboard] .profile-preview:hover{background:#eaedf1;border-color:#eaedf1;box-shadow:none;transform:translateY(-1px)}
body[data-surface=dashboard] .profile-preview .profile-circle{display:none}
body[data-surface=dashboard] .profile-preview #profileText{display:inline;margin:0;font-size:13px;color:#27343f;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
body[data-surface=dashboard] .profile-preview #profileText small{display:inline;margin:0 0 0 .3em;font-size:13px;color:#27343f}
body[data-surface=dashboard] .profile-preview>span:last-child{margin-left:0}
body[data-surface=dashboard] .account-menu{width:178px}
body[data-surface=dashboard] .account-menu>summary{min-height:58px;padding:5px 8px 5px 5px;border-radius:8px;gap:8px;color:#ffffff;background:transparent;border:none;transition:background .16s,border-color .16s}
body[data-surface=dashboard] .account-menu>summary:hover,
body[data-surface=dashboard] .account-menu[open]>summary{background:transparent;border-color:transparent}
body[data-surface=dashboard] .account-menu.account-sparkle{background:transparent}
body[data-surface=dashboard] .account-menu.account-sparkle>summary:before,
body[data-surface=dashboard] .account-menu.account-sparkle>summary:after{display:none}
body[data-surface=dashboard] .account-menu .account-avatar,
body[data-surface=dashboard] .account-menu:hover .account-avatar,
body[data-surface=dashboard] .account-menu[open] .account-avatar{border-color:rgba(241,209,167,.45);box-shadow:none;transform:none}
body[data-surface=dashboard] .account-menu>summary:hover,
body[data-surface=dashboard] .account-menu[open]>summary{background:transparent;border-color:transparent}
body[data-surface=dashboard] .account-menu .account-avatar{width:43px;height:43px;flex:none;border:2px solid rgba(241,209,167,.45)}
body[data-surface=dashboard] .account-menu #profileText{min-width:0;font-size:10px;line-height:1.1;color:#a7b0b7}
body[data-surface=dashboard] .account-menu #profileText small{display:block;margin-top:2px;font-size:14px;line-height:1.1;color:#f5f6f8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-surface=dashboard] .account-menu .account-role{display:block;width:max-content;margin-top:4px;padding:3px 6px;border-radius:3px;background:#b33d8b;color:#ffffff;font-size:8px;line-height:1;font-weight:800;letter-spacing:.4px}
body[data-surface=dashboard] .account-menu .account-star{font-size:0;margin-left:auto;color:#eaedf1}
body[data-surface=dashboard] .account-menu .account-star::after{content:"⌄";font-size:18px}
body[data-surface=dashboard] .account-menu .account-options{top:calc(100% + 8px);background:#212a31;border-color:rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(15,19,24,.45)}

/* ---------- Full-bleed page ---------- */
body.home-page main{max-width:none;margin:0;padding:0}
body.home-page footer{margin-top:0}

/* ---------- Hero ---------- */
.home-hero{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  min-height:max(640px,calc(100svh - 76px));
  background:
    radial-gradient(68% 52% at 4% 108%,rgba(176,84,140,.40),transparent 70%),
    radial-gradient(46% 56% at 80% 36%,rgba(228,167,88,.20),transparent 70%),
    linear-gradient(180deg,#171e24 0%,#1c2730 42%,#263542 78%,#2e3d4b 100%)}
.home-inner{position:relative;z-index:3;width:100%;max-width:none;margin:0;padding:0 168px}
.home-top{flex:1;display:flex;flex-direction:column;padding-bottom:112px}

/* Announcement pill */
.home-pill{
  align-self:center;display:inline-flex;align-items:center;gap:12px;margin-top:30px;
  padding:6px 9px;border-radius:7px;font-size:12px;color:#eaedf1;
  background:#242d36;border:1px solid #3f4f5d;
  transition:border-color .2s,background .2s,transform .2s;
  animation:homeFade .8s .05s both}
.home-pill:hover{border-color:#f1d1a8;background:#2b3844;transform:translateY(-1px)}
.home-pill:active{transform:translateY(0)}
.home-pill:focus-visible{outline:2px solid #eaedf1;outline-offset:3px}
.home-pill b{padding:3px 7px;border-radius:3px;background:#eaedf1;color:#293c4d;font:800 9px Manrope,sans-serif;letter-spacing:.06em}
.home-pill strong{padding:5px 8px;border-radius:4px;background:#eaedf1;color:#293c4d;font-weight:800;white-space:nowrap}
.home-pill i{display:inline-block;font-style:normal;transition:transform .2s}
.home-pill:hover i{transform:translateX(3px)}

/* Copy */
.home-copy{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:600px;padding-top:28px}
.home-copy>*{animation:homeUp .75s cubic-bezier(.2,.7,.2,1) both}
.home-copy>:nth-child(2){animation-delay:.08s}
.home-copy>:nth-child(3){animation-delay:.16s}
.home-copy>:nth-child(4){animation-delay:.24s}
.home-copy h1{margin:0 0 22px;font:800 clamp(40px,4.7vw,72px)/1.05 Manrope,sans-serif;letter-spacing:-.04em;color:#ffffff}
.home-copy h1 span{background:linear-gradient(90deg,#eaedf1 10%,#efcc9e 55%,#a0b9d5);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-copy p{margin:0 0 32px;max-width:520px;font-size:17px;line-height:1.7;color:#aab2b9}
.home-copy p strong{color:#ffffff;font-weight:700}
.home-actions{display:flex;flex-wrap:wrap;gap:12px}
.home-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;
  border-radius:12px;font:700 15px 'DM Sans',sans-serif;transition:transform .16s,filter .16s,background .16s,box-shadow .16s}
.home-btn:hover{transform:translateY(-2px)}
.home-btn:focus-visible{outline:2px solid #eaedf1;outline-offset:3px}
.home-btn.primary{background:#f1d1a7;color:#233341;box-shadow:0 12px 32px -12px rgba(241,209,167,.85)}
.home-btn.primary:hover{filter:brightness(1.08);box-shadow:0 16px 38px -12px rgba(241,209,167,.95)}
.home-btn.ghost{background:rgba(255,255,255,.08);color:#f2f4f6;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.home-btn.ghost:hover{background:rgba(255,255,255,.14)}
.home-help{margin-top:20px;font-size:13px;color:#89959f}
.home-help a{color:#eaedf1;font-weight:600}
.home-help a:hover{color:#ffffff}

/* ---------- Scene (cliff + moon + mascot) ----------
   .home-stage is a 16:9 box pinned to the hero's bottom-right and sized like
   "background-size: cover", so everything inside is positioned in percentages
   and always lines up with the cliff in home-scene.svg.                       */
.home-stage{
  position:absolute;z-index:1;right:0;bottom:0;pointer-events:none;aspect-ratio:16/9;
  width:min(max(100vw,calc((100svh - 76px)*1.7778)),2100px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#0f1318 16%);mask-image:linear-gradient(90deg,transparent 0,#0f1318 16%)}
.home-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.home-mascot{
  position:absolute;left:74.4%;bottom:33.4%;width:17%;height:auto;
  filter:drop-shadow(0 0 1.5px rgba(234,237,241,.95)) drop-shadow(0 0 18px rgba(241,209,167,.35)) drop-shadow(0 14px 22px rgba(15,19,24,.5))}
.home-contact{position:absolute;left:75.6%;bottom:32.7%;width:14.5%;height:1.6%;border-radius:50%;background:radial-gradient(closest-side,rgba(15,19,24,.65),transparent)}

/* Floating glass chips */
.home-chip{
  position:absolute;display:flex;align-items:center;gap:11px;padding:10px 16px 10px 10px;border-radius:15px;white-space:nowrap;
  font:700 13px/1.25 Manrope,sans-serif;color:#f6f8f9;background:rgba(35,49,61,.62);
  border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 44px rgba(15,19,24,.4);animation:homeFloat 7s ease-in-out infinite}
.home-chip small{display:block;margin:2px 0 0;font:500 11px 'DM Sans',sans-serif;color:#ebbe83}
.home-chip>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.home-chip svg,.home-tool svg{width:18px;height:18px}
.home-chip.c1{left:57%;top:33%}
.home-chip.c2{left:84%;top:21%;animation-delay:-2.4s}
.home-chip.c3{left:61%;top:57%;animation-delay:-4.6s}

/* ---------- Tool strip (analogue of "Used by 20M servers") ---------- */
.home-strip{
  position:relative;z-index:4;height:112px;margin-top:-112px;display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(23,30,36,.55),rgba(23,30,36,.92));
  border-top:1px solid rgba(255,255,255,.07);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.home-strip-in{display:flex;align-items:center;gap:56px}
.home-strip h2{margin:0;flex:none;font:800 24px/1.2 Manrope,sans-serif;letter-spacing:-.02em;color:#ffffff}
.home-tools{flex:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.home-tool{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 2px;border-radius:12px;font-size:12px;font-weight:600;color:#a8b0b7;transition:color .18s,background .18s,transform .18s}
.home-tool>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 22%,transparent);transition:background .18s,transform .18s}
.home-tool:hover{color:#ffffff;transform:translateY(-2px)}
.home-tool:hover>span{background:color-mix(in srgb,var(--c) 24%,transparent)}

/* ---------- Feature section ---------- */
.home-features{max-width:1160px;margin:0 auto;padding:104px 24px 56px;scroll-margin-top:76px}
.home-kicker{font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.home-features h2{margin:16px 0 14px;font:800 clamp(30px,3.4vw,46px)/1.08 Manrope,sans-serif;letter-spacing:-.035em;color:#ffffff}
.home-features>p{max-width:560px;margin:0;font-size:16px}
.home-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.home-card{
  position:relative;display:flex;flex-direction:column;gap:10px;min-height:230px;padding:22px;border-radius:18px;
  background:linear-gradient(160deg,#242c33,#1c252d);border:1px solid rgba(255,255,255,.07);
  transition:transform .22s,border-color .22s,box-shadow .22s}
.home-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 20px 46px -20px color-mix(in srgb,var(--c) 55%,transparent)}
.home-card:focus-visible{outline:2px solid var(--c)}
.home-card .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.home-card .ico svg{width:22px;height:22px}
.home-card h3{margin:10px 0 0;font:700 17px Manrope,sans-serif;letter-spacing:-.01em;color:#ffffff}
.home-card p{margin:0;font-size:14px;line-height:1.65;color:#9aa4ac}
.home-card .state{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#bcc3c9}
.home-card .state i{width:7px;height:7px;border-radius:50%;background:#8e99a2}
.home-card .state.ok i{background:#7fdca8;box-shadow:0 0 0 3px rgba(127,220,168,.16)}
.home-card .state.warn i{background:#e6c37a;box-shadow:0 0 0 3px rgba(230,195,122,.16)}
.home-card .state em{margin-left:auto;font-style:normal;color:var(--c);transition:transform .2s}
.home-card:hover .state em{transform:translate(2px,-2px)}

/* ---------- Motion ---------- */
@keyframes homeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes homeFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes homeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.home-copy>*,.home-pill,.home-chip{animation:none}.home-btn,.home-card,.home-tool{transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .home-strip-in{gap:28px}
  .home-strip h2{font-size:20px}
  .home-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){.home-chip{display:none}}
@media (max-width:900px){
  body[data-surface=dashboard] header{position:static;height:auto;flex-wrap:wrap;gap:10px 14px;padding:12px 18px}
  body[data-surface=dashboard] .top-nav{order:3;display:flex!important;flex-wrap:nowrap;flex:1 0 100%;margin:0!important;gap:0;justify-content:space-between;overflow:visible}
  body[data-surface=dashboard] .top-nav>a,body[data-surface=dashboard] .top-nav>.nav-dropdown>summary{padding:8px 8px;font-size:13px}
  body[data-surface=dashboard] .top-brand{font-size:17px}
  body[data-surface=dashboard] .header-profile{margin-left:auto}

  .home-hero{min-height:0}
  .home-top{padding-bottom:392px}          /* leave room for the scene below the copy */
  .home-stage{width:820px}
  .home-pill{margin-top:22px;max-width:100%;flex-wrap:wrap;justify-content:center;border-radius:20px;padding:6px 14px 6px 6px;gap:6px 10px}
  .home-pill span{flex:1 1 140px}
  .home-copy{padding-top:34px}
  .home-copy h1{font-size:clamp(38px,11vw,52px)}
  .home-copy p{font-size:16px}
  .home-actions{width:100%}
  .home-btn{flex:1 1 150px}

  .home-strip{height:auto;margin-top:0;background:#172027;padding:26px 0}
  .home-strip-in{flex-direction:column;align-items:flex-start;gap:18px}
  .home-strip h2 br{display:none}
  .home-tools{width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 6px}
  .home-features{padding:64px 18px 40px}
}
@media (max-width:560px){
  .home-btn{flex:1 1 100%}
  .home-cards{grid-template-columns:1fr}
  .home-card{min-height:0}
}

/* ---------- Dashboard account card ---------- */
body[data-surface=dashboard] .account-menu{
  width:196px;
  isolation:isolate;
}
@media (min-width:901px){
  body[data-surface=dashboard] .account-menu{margin-right:-22px}
  body[data-surface=dashboard] .account-menu .account-options{right:20px}
}
/* Clicking the account button must never select its text. */
body[data-surface] .account-menu>summary{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;outline:none;
}
body[data-surface] .account-menu>summary *{-webkit-user-select:none;user-select:none}
body[data-surface] .account-menu>summary:focus-visible{outline:2px solid rgba(234,237,241,.5);outline-offset:2px}
body[data-surface=dashboard] .account-menu>summary{
  min-height:68px;
  padding:8px 0px 8px 8px;
  gap:10px;
  overflow:hidden;
  border:none;
  border-radius:14px;
  background:transparent;
  box-shadow:none;
  transition:transform .18s ease;
}
body[data-surface=dashboard] .account-menu>summary:hover,
body[data-surface=dashboard] .account-menu[open]>summary{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  transform:translateY(-1px);
}
body[data-surface=dashboard] .account-menu .account-avatar{
  width:46px;
  height:46px;
  border:2px solid rgba(234,237,241,.72);
  box-shadow:0 0 0 3px rgba(241,209,167,.12),0 4px 14px rgba(15,19,24,.35);
  transition:transform .2s ease,box-shadow .2s ease;
}
body[data-surface=dashboard] .account-avatar-wrap{
  position:relative;
  width:46px;
  height:46px;
  flex:none;
}
body[data-surface=dashboard] .account-avatar-wrap .account-avatar{
  position:relative;
  z-index:1;
}
body[data-surface=dashboard] .account-decoration{
  position:absolute;
  z-index:2;
  inset:-9px;
  width:64px;
  height:64px;
  object-fit:contain;
  pointer-events:none;
}
body[data-surface=dashboard] .account-menu:hover .account-avatar,
body[data-surface=dashboard] .account-menu[open] .account-avatar{
  transform:scale(1.04);
  box-shadow:0 0 0 4px rgba(241,209,167,.2),0 5px 16px rgba(15,19,24,.4);
}
body[data-surface=dashboard] .account-menu #profileText{
  display:block;
  flex:1;
  min-width:0;
  font-size:9px;
  font-weight:600;
  letter-spacing:.35px;
  line-height:1.15;
  color:#a8b0b7;
}
body[data-surface=dashboard] .account-menu #profileText small{
  margin-top:3px;
  font-size:14px;
  font-weight:800;
  letter-spacing:0;
  line-height:1.1;
  color:#ffffff;
}
body[data-surface=dashboard] .account-menu .account-role{
  margin-top:5px;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:5px;
  background:linear-gradient(135deg,#ca55a6,#a93682);
  box-shadow:none;
  font-size:8px;
  font-weight:800;
  letter-spacing:.8px;
  line-height:1;
}
body[data-surface=dashboard] .account-menu .account-star{
  display:block;
  width:22px;
  height:22px;
  margin-left:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#eaedf1;
  text-align:center;
  line-height:18px;
  transition:transform .2s ease,background .2s ease;
}
body[data-surface=dashboard] .account-menu .account-star::after{
  font-size:16px;
  line-height:18px;
}
body[data-surface=dashboard] .account-menu[open] .account-star{
  background:rgba(241,209,167,.2);
  transform:rotate(180deg);
}
body[data-surface=dashboard] .account-menu .account-options{
  top:calc(100% + 9px);
  min-width:210px;
  padding:6px;
  border:1px solid rgba(234,237,241,.22);
  border-radius:13px;
  background:rgba(33,42,49,.97);
  box-shadow:0 18px 42px rgba(15,19,24,.52),0 0 0 3px rgba(241,209,167,.05);
  backdrop-filter:blur(14px);
}
body[data-surface=dashboard] .account-menu .account-options a,
body[data-surface=dashboard] .account-menu .account-options button{
  padding:10px 11px;
  border-radius:8px;
  font-size:12px;
}
body[data-surface=dashboard] .account-menu .account-options a:hover,
body[data-surface=dashboard] .account-menu .account-options button:hover{
  padding-left:14px;
  background:linear-gradient(90deg,rgba(241,209,167,.18),rgba(241,209,167,.04));
}
body[data-surface=dashboard] .account-menu>summary{
  background:transparent;
}
body[data-surface=dashboard] .account-menu>summary:hover,
body[data-surface=dashboard] .account-menu[open]>summary{
  background:transparent;
}

/* ---------- Discord-inspired account effects and role colors ---------- */
body[data-surface=dashboard] .account-menu.account-sparkle>summary:before{
  display:block;
  content:'✦  ·  ✧';
  position:absolute;
  right:72px;
  top:3px;
  color:#eaedf1;
  font-size:12px;
  letter-spacing:3px;
  opacity:.75;
  pointer-events:none;
  animation:accountTwinkle 3s ease-in-out infinite;
}
body[data-surface=dashboard] .account-menu.account-sparkle>summary:after{
  display:block;
  content:'✧';
  position:absolute;
  left:45px;
  bottom:-5px;
  color:#eaedf1;
  font-size:21px;
  opacity:.7;
  pointer-events:none;
  animation:accountTwinkle 3s 1s ease-in-out infinite;
}
body[data-surface=dashboard] .account-menu.account-sparkle .account-avatar{
  background:linear-gradient(135deg,#f1d1a7,#58748b);
}
body[data-surface=dashboard] .account-menu.role-owner .account-role{background:linear-gradient(135deg,#d94e70,#a9284a)}
body[data-surface=dashboard] .account-menu.role-root .account-role{background:linear-gradient(135deg,#e7b36e,#5982a5)}
body[data-surface=dashboard] .account-menu.role-sys .account-role{background:linear-gradient(135deg,#4872a1,#15758d)}
body[data-surface=dashboard] .account-menu.role-compliance .account-role{background:linear-gradient(135deg,#ca55a6,#942d74)}
body[data-surface=dashboard] .account-menu.role-sudo .account-role{background:linear-gradient(135deg,#d14f9b,#9d2f70)}
body[data-surface=dashboard] .account-menu.role-prospect .account-role{background:linear-gradient(135deg,#e1bc28,#b38a0b);color:#17130a}
body[data-surface=dashboard] .account-menu.role-manager .account-role{background:linear-gradient(135deg,#d4784e,#a54624)}
body[data-surface=dashboard] .account-menu.role-auditor .account-role{background:linear-gradient(135deg,#799cc3,#4871a0)}
body[data-surface=dashboard] .account-menu.role-member .account-role,
body[data-surface=dashboard] .account-menu.role-user .account-role{background:linear-gradient(135deg,#687580,#445b6f)}
@keyframes accountTwinkle{0%,100%{opacity:.35;transform:scale(.92) rotate(-5deg)}50%{opacity:1;transform:scale(1.08) rotate(5deg)}}
@media (prefers-reduced-motion:reduce){
  body[data-surface=dashboard] .account-menu.account-sparkle>summary:before,
  body[data-surface=dashboard] .account-menu.account-sparkle>summary:after{animation:none}
}

/* Keep Discord's decoration as the only avatar effect. */
body[data-surface=dashboard] .account-menu>summary{overflow:visible}
body[data-surface=dashboard] .account-menu .account-avatar{
  border:0;
  box-shadow:none;
  transform:none;
}
body[data-surface=dashboard] .account-menu:hover .account-avatar,
body[data-surface=dashboard] .account-menu[open] .account-avatar{
  box-shadow:none;
  transform:none;
}
body[data-surface=dashboard] .account-menu .account-decoration{
  inset:auto;
  left:50%;
  top:50%;
  width:96px;
  height:96px;
  transform:translate(-50%,-50%) scale(1.3);
}
body[data-surface=dashboard] .account-menu.account-sparkle>summary:before,
body[data-surface=dashboard] .account-menu.account-sparkle>summary:after{
  pointer-events:none;
}
body[data-surface=dashboard] .account-menu.account-sparkle>summary:before{
  display:block;
  content:'✦  ·  ✧';
  position:absolute;
  right:27px;
  top:3px;
  color:rgba(236,240,243,.62);
  font-size:12px;
  letter-spacing:2px;
}
body[data-surface=dashboard] .account-menu.account-sparkle>summary:after{
  display:block;
  content:'✦';
  position:absolute;
  left:48px;
  bottom:-6px;
  color:rgba(236,240,243,.72);
  text-shadow:0 1px 5px rgba(15,19,24,.55);
  font-size:19px;
  pointer-events:none;
}
body[data-surface=dashboard] .account-menu .account-star{
  position:absolute;
  right:6px;
  top:50%;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  margin:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#eaedf1;
  font-size:0;
  line-height:1;
  transform:translateY(-50%);
}
body[data-surface=dashboard] .account-menu .account-star::after{
  content:'⌄';
  font-size:14px;
  line-height:1;
  transform:translateY(-4px);
}

/* Keep the embed account card consistent with the dashboard. */
body[data-surface=builder] .account-menu{
  position:relative;
  width:196px;
  isolation:isolate;
}
body[data-surface=builder] .account-menu>summary{
  position:relative;
  min-height:68px;
  padding:8px 42px 8px 8px;
  gap:10px;
  overflow:visible;
  border:1px solid rgba(234,237,241,.18);
  border-radius:14px;
  background:
    radial-gradient(circle at 100% 0,var(--account-banner-color,rgba(241,209,167,.18)),transparent 48%),
    linear-gradient(135deg,#293743,#232f3a 72%);
  box-shadow:0 8px 24px rgba(19,27,35,.24),inset 0 1px 0 rgba(255,255,255,.05);
}
body[data-surface=builder] .account-menu .account-avatar{
  width:46px;
  height:46px;
  border:0;
  box-shadow:none;
  transform:none;
}
body[data-surface=builder] .account-avatar-wrap{
  position:relative;
  width:46px;
  height:46px;
  flex:none;
}
body[data-surface=builder] .account-avatar-wrap .account-avatar{
  position:relative;
  z-index:1;
}
body[data-surface=builder] .account-decoration{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:96px;
  height:96px;
  object-fit:contain;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1.3);
}
body[data-surface=builder] .account-menu #profileText{
  display:block;
  flex:1;
  min-width:0;
  font-size:9px;
  font-weight:600;
  letter-spacing:.35px;
  line-height:1.15;
  color:#a8b0b7;
}
body[data-surface=builder] .account-menu #profileText small{
  display:block;
  margin-top:3px;
  font-size:14px;
  font-weight:800;
  line-height:1.1;
  color:#ffffff;
}
body[data-surface=builder] .account-menu .account-role{
  display:block;
  width:max-content;
  margin-top:5px;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:5px;
  background:linear-gradient(135deg,#687580,#445b6f);
  box-shadow:none;
  font-size:8px;
  font-weight:800;
  letter-spacing:.8px;
  line-height:1;
}
body[data-surface=builder] .account-menu .account-star{
  position:absolute;
  right:8px;
  top:50%;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  margin:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#eaedf1;
  font-size:0;
  line-height:1;
  transform:translateY(-50%);
}
body[data-surface=builder] .account-menu .account-star::after{
  content:'⌄';
  font-size:14px;
  line-height:1;
  transform:translateY(-4px);
}
body[data-surface=builder] .account-menu .account-options{
  top:calc(100% + 9px);
  min-width:210px;
  padding:6px;
  border:1px solid rgba(234,237,241,.22);
  border-radius:13px;
  background:rgba(33,42,49,.97);
  box-shadow:0 18px 42px rgba(15,19,24,.52),0 0 0 3px rgba(241,209,167,.05);
}
body[data-surface=builder] .account-menu.account-sparkle>summary:before{
  content:'✦  ·  ✧';
  position:absolute;
  right:27px;
  top:3px;
  color:rgba(236,240,243,.62);
  font-size:12px;
  letter-spacing:2px;
  pointer-events:none;
}
body[data-surface=builder] .account-menu.account-sparkle>summary:after{
  content:'✦';
  position:absolute;
  left:48px;
  bottom:-6px;
  color:rgba(236,240,243,.72);
  font-size:19px;
  pointer-events:none;
}

body[data-surface=dashboard] #mobileNavToggle{
  display:none;
}

@media (max-width:600px){
  body[data-surface=dashboard] #mobileNavToggle{
    display:grid;
  }
  body[data-surface=dashboard] header{
    position:relative;
  }
  body[data-surface=dashboard] #mobileNavToggle{
    position:absolute;
    right:14px;
    top:9px;
    z-index:2;
    display:grid;
    place-content:center;
    gap:4px;
    width:34px;
    height:34px;
    padding:0;
    border:1px solid rgba(255,255,255,.14);
    border-radius:9px;
    background:rgba(255,255,255,.06);
    color:#f2f4f7;
  }
  body[data-surface=dashboard] #mobileNavToggle span{
    display:block;
    width:15px;
    height:1.5px;
    border-radius:2px;
    background:currentColor;
    transition:transform .18s,opacity .18s;
  }
  body[data-surface=dashboard] header.mobile-nav-open #mobileNavToggle span:nth-child(1){
    transform:translateY(5.5px) rotate(45deg);
  }
  body[data-surface=dashboard] header.mobile-nav-open #mobileNavToggle span:nth-child(2){
    opacity:0;
  }
  body[data-surface=dashboard] header.mobile-nav-open #mobileNavToggle span:nth-child(3){
    transform:translateY(-5.5px) rotate(-45deg);
  }
  body[data-surface=dashboard] .top-nav{
    display:none!important;
  }
  body[data-surface=dashboard] header.mobile-nav-open .top-nav{
    display:grid!important;
  }
  body[data-surface=dashboard] header{
    height:auto;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    gap:8px;
    padding:8px 12px!important;
  }
  body[data-surface=dashboard] .top-brand{
    justify-content:center;
    width:100%;
    min-width:0;
    gap:6px;
    font-size:16px;
    letter-spacing:.1em;
  }
  body[data-surface=dashboard] .brand-portrait{
    width:32px;
    height:32px;
  }
  body[data-surface=dashboard] .header-profile{
    justify-content:center;
    width:100%;
    min-width:0;
    margin-left:0;
  }
  body[data-surface=dashboard] .profile-preview{
    height:34px;
    max-width:142px;
    min-width:0;
    padding:0 9px;
    font-size:11px;
  }
  body[data-surface=dashboard] .profile-preview #profileText{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body[data-surface=dashboard] .account-menu{
    width:150px;
    max-width:150px;
  }
  body[data-surface=dashboard] .account-menu>summary{
    min-height:52px;
    padding:4px 38px 4px 4px;
    gap:6px;
  }
  body[data-surface=dashboard] .account-menu .account-avatar,
  body[data-surface=dashboard] .account-avatar-wrap{
    width:36px;
    height:36px;
  }
  body[data-surface=dashboard] .account-menu #profileText small{
    max-width:74px;
    font-size:12px;
  }
  body[data-surface=dashboard] .account-menu .account-role{
    margin-top:3px;
    font-size:7px;
  }
  body[data-surface=dashboard] .account-menu .account-star{
    right:6px;
  }
  body[data-surface=dashboard] .top-nav{
    grid-column:1/-1;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:4px;
    margin:0!important;
  }
  body[data-surface=dashboard] .top-nav>a,
  body[data-surface=dashboard] .top-nav>.nav-dropdown>summary{
    min-width:0;
    min-height:34px;
    justify-content:center;
    padding:5px 4px;
    font-size:11px;
  }
  body[data-surface=dashboard] .home-hero{
    min-height:0;
  }
  body[data-surface=dashboard] .home-inner{
    padding:0 16px;
  }
  body[data-surface=dashboard] .home-top{
    min-height:560px;
    padding-bottom:190px;
  }
  body[data-surface=dashboard] .home-pill{
    width:100%;
    margin-top:12px;
    padding:5px 7px;
    gap:5px;
    font-size:10px;
    justify-content:center;
    text-align:center;
    white-space:normal;
  }
  body[data-surface=dashboard] .home-copy{
    align-items:center;
    max-width:none;
    padding-top:22px;
    text-align:center;
  }
  body[data-surface=dashboard] .home-copy h1{
    max-width:340px;
    margin-bottom:12px;
    font-size:clamp(30px,9vw,38px);
    line-height:1.05;
  }
  body[data-surface=dashboard] .home-copy p{
    max-width:330px;
    margin-bottom:18px;
    font-size:13px;
    line-height:1.5;
  }
  body[data-surface=dashboard] .home-actions{
    width:100%;
    justify-content:center;
  }
  body[data-surface=dashboard] .home-btn{
    flex:1 1 130px;
    height:42px;
    min-width:0;
    padding:0 10px;
    border-radius:9px;
    font-size:12px;
  }
  body[data-surface=dashboard] .home-stage{
    width:100vw;
    height:210px;
    aspect-ratio:auto;
    -webkit-mask-image:none;
    mask-image:none;
  }
  body[data-surface=dashboard] .home-mascot{
    left:57%;
    bottom:18%;
    width:42%;
  }
  body[data-surface=dashboard] .home-contact{
    left:58%;
    bottom:17%;
    width:38%;
  }
  body[data-surface=dashboard] .home-strip{
    height:auto;
    margin-top:0;
    padding:16px 0 20px;
  }
  body[data-surface=dashboard] .home-strip-in{
    align-items:flex-start;
    gap:10px;
  }
  body[data-surface=dashboard] .home-strip h2{
    font-size:17px;
  }
  body[data-surface=dashboard] .home-tools{
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px 3px;
  }
  body[data-surface=dashboard] .home-tool{
    padding:4px 1px;
    font-size:9px;
  }
  body[data-surface=dashboard] .home-tool>span{
    width:32px;
    height:32px;
  }
}

@media (max-width:600px){
  body[data-surface=dashboard] .top-nav{
    display:none!important;
  }
  body[data-surface=dashboard] header.mobile-nav-open .top-nav{
    display:grid!important;
  }
}

/* Local server directory refresh. */
body[data-surface=dashboard] .server-directory{
  max-width:1240px;
  margin:0 auto;
}
body[data-surface=dashboard] .server-picker-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
body[data-surface=dashboard] .server-picker-head h1{
  margin-bottom:8px;
  font-size:clamp(28px,3vw,40px);
}
body[data-surface=dashboard] .server-picker-head p{margin:0;font-size:13px}
body[data-surface=dashboard] .server-picker-count{
  padding:8px 12px;
  border:1px solid rgba(234,237,241,.24);
  border-radius:9px;
  background:rgba(241,209,167,.1);
  color:#eaedf1;
  font-size:11px;
  white-space:nowrap;
}
body[data-surface=dashboard] .server-directory-hero,
body[data-surface=dashboard] .server-directory-toolbar{
  display:none;
}
body[data-surface=dashboard] .server-directory-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
body[data-surface=dashboard] .server-directory-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:34px;
  border:1px solid rgba(234,237,241,.2);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 18%,rgba(241,209,167,.25),transparent 30%),
    linear-gradient(135deg,#293540,#20282e 68%);
  box-shadow:0 20px 55px rgba(19,27,35,.25);
}
body[data-surface=dashboard] .server-directory-hero h1{
  max-width:600px;
  margin-bottom:10px;
  font-size:clamp(30px,4vw,48px);
}
body[data-surface=dashboard] .server-directory-hero p{margin:0;max-width:520px;font-size:15px}
body[data-surface=dashboard] .server-count{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(23,30,36,.35);
}
body[data-surface=dashboard] .server-count strong{font:800 30px Manrope;color:#eaedf1}
body[data-surface=dashboard] .server-count span{font-size:10px;line-height:1.35;color:#aab2b9}
body[data-surface=dashboard] .server-directory-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:28px 0 14px;
}
body[data-surface=dashboard] .server-directory-toolbar strong{display:block;font:700 18px Manrope}
body[data-surface=dashboard] .server-directory-toolbar small{margin-top:5px}
body[data-surface=dashboard] .server-directory-hint{font-size:11px;color:#8fcca9}
body[data-surface=dashboard] .server-directory-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
body[data-surface=dashboard] .server-directory .server-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:190px;
  padding:22px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:linear-gradient(160deg,#252e36,#1b242c);
  box-shadow:0 12px 30px rgba(19,27,35,.16);
}
body[data-surface=dashboard] .server-directory .server-card.server-readonly{
  border-left:3px solid #5d6872;
}
body[data-surface=dashboard] .server-readonly-label{
  position:absolute;
  top:12px;
  right:-6px;
  padding:5px 8px;
  border-radius:4px;
  background:#d86b36;
  color:#fff5ed;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  transform:rotate(8deg);
  box-shadow:0 4px 10px rgba(15,19,24,.2);
}
body[data-surface=dashboard] .server-directory .server-card:hover{
  border-color:rgba(241,209,167,.5);
  background:linear-gradient(160deg,#293744,#20282e);
  transform:translateY(-3px);
}
body[data-surface=dashboard] .server-directory .server-title{display:flex;align-items:center;gap:14px}
body[data-surface=dashboard] .server-directory .guild-avatar{
  width:58px;
  height:58px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:17px;
}
body[data-surface=dashboard] .server-directory .server-title h2{margin:0;font-size:17px}
body[data-surface=dashboard] .server-directory .server-title small{font-size:11px}
body[data-surface=dashboard] .server-directory .server-card .btn{
  width:100%;
  margin-top:24px;
  min-height:42px;
  justify-content:space-between;
  padding:0 14px;
  border-radius:10px;
}
body[data-surface=dashboard] .server-empty{
  grid-column:1/-1;
  padding:48px 24px;
  text-align:center;
  border:1px dashed rgba(234,237,241,.28);
  border-radius:18px;
  background:#212a31;
}
body[data-surface=dashboard] .server-empty-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 15px;
  border-radius:16px;
  background:#f1d1a71c;
  color:#eaedf1;
  font-size:25px;
}
body[data-surface=dashboard] .server-empty h2{margin-bottom:8px}
body[data-surface=dashboard] .server-empty p{margin:0;font-size:13px}
body[data-surface=dashboard] .server-directory-note{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(241,209,167,.06);
  color:#aab2b9;
}
body[data-surface=dashboard] .server-directory-note>span{color:#eaedf1}
body[data-surface=dashboard] .server-directory-note p{margin:0;font-size:12px}
@media (max-width:900px){
  body[data-surface=dashboard] .server-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  body[data-surface=dashboard] .server-picker-head{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    margin-bottom:18px;
    padding-bottom:16px;
  }
  body[data-surface=dashboard] .server-picker-count{align-self:flex-start}
  body[data-surface=dashboard] .server-directory-hero{
    align-items:flex-start;
    flex-direction:column;
    padding:22px;
    border-radius:18px;
  }
  body[data-surface=dashboard] .server-directory-hero h1{font-size:32px}
  body[data-surface=dashboard] .server-directory-hero p{font-size:13px}
  body[data-surface=dashboard] .server-count{align-self:stretch}
  body[data-surface=dashboard] .server-directory-toolbar{align-items:flex-start;flex-direction:column;gap:8px;margin-top:22px}
  body[data-surface=dashboard] .server-directory-grid{grid-template-columns:1fr;gap:12px}
  body[data-surface=dashboard] .server-directory .server-card{min-height:164px;padding:18px}
}

/* Server cards: spacious Discord-style picker, recolored for Caesrov. */
body[data-surface=dashboard] .server-directory-grid{
  width:100%;
  max-width:none;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:18px;
}
body[data-surface=dashboard] .server-directory .server-card{
  min-height:190px;
  padding:20px 20px 18px;
  overflow:hidden;
  border-left:5px solid #e4a758;
  border-radius:12px;
  background:#202b35;
}
body[data-surface=dashboard] .server-directory .server-card:hover{
  border-left-color:#f1d1a7;
  transform:translateY(-2px);
}
body[data-surface=dashboard] .server-directory .server-title{
  align-items:center;
  gap:13px;
  min-height:64px;
}
body[data-surface=dashboard] .server-directory .guild-avatar{
  width:58px;
  height:58px;
  border-radius:15px;
}
body[data-surface=dashboard] .server-directory .server-title h2{
  font-size:16px;
  line-height:1.2;
}
body[data-surface=dashboard] .server-directory .server-title small{
  margin-top:5px;
  font-size:10px;
}
body[data-surface=dashboard] .server-directory .server-card .btn{
  margin-top:18px;
  min-height:36px;
  justify-content:center;
  border-radius:8px;
  background:#f1d1a7;
  border-color:#f1d1a7;
  color:#27343f;
  font-size:11px;
}
body[data-surface=dashboard] .server-directory .server-card .btn span{
  display:none;
}
body[data-surface=dashboard] .server-readonly-label{
  top:15px;
  right:-34px;
  padding:7px 40px;
  border-radius:3px;
  background:linear-gradient(135deg,#e8b573,#5e86a8);
  color:#ffffff;
  font-size:9px;
  letter-spacing:.1em;
  transform:rotate(14deg);
}
@media (max-width:1100px){
  body[data-surface=dashboard] .server-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  body[data-surface=dashboard] .server-directory-grid{grid-template-columns:minmax(0,420px)}
  body[data-surface=dashboard] .server-directory .server-card{
    min-height:178px;
    padding:18px 16px 16px;
  }
  body[data-surface=dashboard] .server-directory .guild-avatar{
    width:52px;
    height:52px;
  }
  body[data-surface=dashboard] .server-directory .server-title h2{font-size:15px}
}

@media (min-width:601px){
  body[data-surface=dashboard] .server-directory-grid{
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    justify-content:stretch;
  }
}

/* Organized server settings workspace. */
body[data-surface=dashboard] .manage-server-page{
  max-width:1280px;
  margin:0 auto;
}
body[data-surface=dashboard] .manage-server-page .back-link{
  display:inline-flex;
  margin-bottom:22px;
  color:#f1d1a7;
  font-size:12px;
}
body[data-surface=dashboard] .manage-server-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
body[data-surface=dashboard] .manage-server-heading .server-title{
  align-items:center;
}
body[data-surface=dashboard] .manage-server-heading .server-title h1{
  margin:0 0 5px;
  font-size:32px;
}
body[data-surface=dashboard] .manage-server-heading .server-title p{
  margin:0;
  font-size:12px;
}
body[data-surface=dashboard] .manage-server-summary{
  display:flex;
  gap:10px;
  flex:none;
}
body[data-surface=dashboard] .manage-server-summary>span{
  display:grid;
  gap:3px;
  min-width:92px;
  padding:10px 12px;
  border:1px solid rgba(241,209,167,.25);
  border-radius:10px;
  background:#232d35;
  color:#aab2b9;
  font-size:10px;
}
body[data-surface=dashboard] .manage-server-summary strong{
  color:#eaedf1;
  font:700 18px/1 Manrope;
}
body[data-surface=dashboard] .manage-settings-tools{
  display:flex;
  align-items:center;
  gap:12px;
  margin:24px 0 8px;
}
body[data-surface=dashboard] .module-search-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  margin:0;
  padding:0 12px;
  border:1px solid #334453;
  border-radius:9px;
  background:#1c252d;
  color:#aab2b9;
}
body[data-surface=dashboard] .module-search-wrap input{
  margin:0;
  padding:12px 0;
  border:0;
  background:transparent;
}
body[data-surface=dashboard] .module-status-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
body[data-surface=dashboard] .module-status-filters button{
  border:1px solid #334453;
  border-radius:8px;
  padding:9px 11px;
  background:#202b35;
  color:#aab2b9;
  font-size:11px;
}
body[data-surface=dashboard] .module-status-filters button[aria-pressed=true]{
  border-color:#f1d1a7;
  background:#f1d1a7;
  color:#27343f;
  font-weight:700;
}
body[data-surface=dashboard] .manage-settings-context{
  display:flex;
  justify-content:space-between;
  gap:12px;
  min-height:24px;
  color:#7f8b96;
  font-size:11px;
}
body[data-surface=dashboard] .settings-group{
  margin:24px 0 0;
}
body[data-surface=dashboard] .settings-group>summary{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 0;
  color:#eaedf1;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body[data-surface=dashboard] .settings-group>summary span{
  color:#7f8b96;
  font-size:10px;
  font-weight:500;
}
body[data-status-page]{
  background:
    radial-gradient(circle at 78% 0%,rgba(228,167,88,.18),transparent 34rem),
    #1b242c;
}
body[data-status-page] aside{
  display:none;
}
body[data-status-page] .shell{
  margin-left:0;
}
body[data-status-page] header{
  background:rgba(27,36,44,.86);
  backdrop-filter:blur(16px);
  padding:0 20px;
}
body[data-status-page] main{
  max-width:1060px;
  padding:54px 40px 30px;
}
body[data-status-page] .status-page{
  max-width:none;
}
body[data-status-page] .back-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#f1d1a7;
  font-size:12px;
  font-weight:600;
  margin-bottom:26px;
}
body[data-status-page] .back-link:hover{
  color:#eaedf1;
}
body[data-status-page] .page-head{
  align-items:flex-end;
  margin-bottom:28px;
}
body[data-status-page] .page-head h1{
  font-size:38px;
  letter-spacing:-1.5px;
}
body[data-status-page] .page-head p{
  font-size:13px;
}
body[data-status-page] #refreshStatus{
  border-color:#475c6e;
  background:linear-gradient(135deg,#303e4a,#2a353e);
  color:#eaedf1;
  box-shadow:0 8px 24px rgba(69,97,121,.18);
}
body[data-status-page] #refreshStatus:hover{
  border-color:#e5ab5f;
  background:linear-gradient(135deg,#3b4e5e,#303e4a);
}
body[data-status-page] .status-banner{
  position:relative;
  overflow:hidden;
  padding:25px 28px;
  gap:18px;
  background:linear-gradient(110deg,#2f3d4a,#24313b 72%);
  border:1px solid #425362;
  border-left:4px solid #d8b770;
  border-radius:14px;
  box-shadow:0 14px 36px rgba(20,28,36,.2);
}
body[data-status-page] .status-banner::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-54px;
  top:-110px;
  border:1px solid #f1d1a73d;
  border-radius:50%;
  box-shadow:0 0 0 18px #f1d1a70d,0 0 70px #f1d1a714;
}
body[data-status-page] .status-banner.healthy{
  border-left-color:#80d6a3;
}
body[data-status-page] .status-banner h2{
  font-size:18px;
}
body[data-status-page] .status-banner p{
  font-size:12px;
  margin-top:5px;
}
body[data-status-page] .status-metrics{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px;
}
body[data-status-page] .status-metrics .card{
  min-height:142px;
  padding:20px;
  background:linear-gradient(145deg,#24303b,#212c35);
  border-color:#314251;
  border-radius:14px;
}
body[data-status-page] .status-metrics label{
  color:#98a2aa;
  font-size:9px;
  letter-spacing:1.5px;
}
body[data-status-page] .status-metrics strong{
  color:#f3f5f7;
  font-size:27px;
  margin:16px 0 7px;
}
body[data-status-page] .status-metrics small{
  color:#838f99;
  font-size:10px;
}
body[data-status-page] .status-services{
  margin-top:0;
  border-color:#314251;
  border-radius:14px;
  background:#212c35;
  box-shadow:0 14px 36px rgba(20,28,36,.15);
}
body[data-status-page] .status-services .panel-head{
  padding:17px 20px;
  color:#eaedf1;
  background:#24313b;
  border-bottom-color:#314251;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
}
body[data-status-page] .service-row{
  padding:18px 20px;
  border-top-color:#2e3d4a;
}
body[data-status-page] .service-row h3{
  color:#ecf0f3;
  font-size:13px;
}
body[data-status-page] .service-row p{
  color:#87939d;
  font-size:11px;
}
body[data-status-page] .service-label{
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:10px;
}
body[data-status-page] .service-label.healthy{
  color:#9be0b8;
  background:#20352c;
  border-color:#315642;
}
body[data-status-page] .service-label.waiting{
  color:#dfc283;
  background:#382e20;
  border-color:#594727;
}
body[data-status-page] .service-label.development{
  color:#eaedf1;
  background:#33414d;
  border-color:#485c6e;
}
body[data-status-page] .status-checked{
  color:#76838f;
  margin:16px 0 42px;
}
body[data-status-page] .status-explainer h2{
  color:#ecf0f3;
  font-size:20px;
}
body[data-status-page] .status-explainer>.grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
body[data-status-page] .status-explainer .card{
  min-height:150px;
  padding:20px;
  background:#222d38;
  border-color:#314251;
  border-radius:12px;
}
body[data-status-page] .status-explainer .card h3{
  color:#eaedf1;
  font-size:13px;
}
body[data-status-page] .status-explainer .card p,
body[data-status-page] .status-explainer details{
  color:#8e99a2;
  font-size:11px;
}
body[data-status-page] .status-explainer details{
  padding:16px 0 0;
  margin-top:22px;
  border-top:1px solid #2e3d4a;
}
body[data-status-page] footer{
  margin:20px clamp(20px,5vw,72px) 0;
}
body[data-status-page] .header-profile{
  margin-left:auto;
}
body[data-status-page] .top-nav{
  gap:2px;
  margin-left:14px;
}
body[data-status-page] .top-nav>a,
body[data-status-page] .top-nav>.nav-dropdown>summary{
  min-height:40px;
  padding:8px 14px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  color:#a8b0b7;
  background:transparent;
  box-shadow:none;
  transform:none;
}
body[data-status-page] .top-nav>a:hover,
body[data-status-page] .top-nav>.nav-dropdown>summary:hover,
body[data-status-page] .top-nav>.nav-dropdown[open]>summary{
  color:#ffffff;
  background:rgba(255,255,255,.09);
  box-shadow:0 5px 16px rgba(15,19,24,.2);
  transform:translateY(-1px);
}
body[data-status-page] .account-menu{
  width:auto;
  min-width:210px;
  margin-left:auto;
  transform:translateX(10px);
  background:transparent;
}
body[data-status-page] .account-menu>summary,
body[data-status-page] .account-menu>summary:hover,
body[data-status-page] .account-menu[open]>summary{
  min-height:68px;
  padding:8px 0;
  gap:8px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
body[data-status-page] .account-menu .account-avatar-wrap{
  margin-left:18px;
}
body[data-status-page] .account-menu .account-avatar,
body[data-status-page] .account-menu:hover .account-avatar,
body[data-status-page] .account-menu[open] .account-avatar{
  width:43px;
  height:43px;
  flex:none;
  border:2px solid rgba(241,209,167,.45);
  box-shadow:none;
  transform:none;
}
body[data-status-page] .account-menu #profileText{
  min-width:0;
  font-size:10px;
  line-height:1.1;
  color:#a7b0b7;
}
body[data-status-page] .account-menu #profileText small{
  display:block;
  margin-top:2px;
  font-size:14px;
  line-height:1.1;
  color:#f5f6f8;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-status-page] .account-menu .account-role{
  display:block;
  width:max-content;
  margin-top:4px;
  padding:3px 6px;
  border-radius:3px;
  background:#b33d8b;
  color:#ffffff;
  font-size:8px;
  line-height:1;
  font-weight:800;
  letter-spacing:.4px;
}
body[data-status-page] .account-menu .account-star,
body[data-status-page] .account-menu[open] .account-star{
  width:auto;
  height:auto;
  margin-left:auto;
  margin-right:24px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#eaedf1;
  line-height:1;
  font-size:0;
  transform:none;
}
body[data-status-page] .account-menu .account-star::before{
  content:'⌄';
  display:block;
  color:#eaedf1;
  font:700 24px/18px 'DM Sans',sans-serif;
  transform:translate(-8px,-14px);
}
body[data-status-page] .account-menu .account-star::after{
  display:none;
}
body[data-status-page] .account-menu .account-options{
  top:calc(100% + 8px);
  background:#212a31;
  border-color:rgba(255,255,255,.1);
  box-shadow:0 18px 40px rgba(15,19,24,.45);
}
@media(max-width:700px){
  body[data-status-page] main{
    padding:34px 18px 24px;
  }
  body[data-status-page] .page-head{
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }
  body[data-status-page] .page-head h1{
    font-size:31px;
  }
  body[data-status-page] #refreshStatus{
    width:100%;
  }
  body[data-status-page] .status-metrics,
  body[data-status-page] .status-explainer>.grid{
    grid-template-columns:1fr;
  }
  body[data-status-page] .status-banner{
    padding:21px 18px;
  }
  body[data-status-page] footer{
    margin:20px 18px 0;
  }
  body[data-status-page] .account-menu{
    min-width:150px;
    max-width:150px;
  }
  body[data-status-page] .account-menu>summary{
    min-height:52px;
    padding:4px 38px 4px 4px;
    gap:6px;
  }
  body[data-status-page] .account-menu .account-avatar-wrap,
  body[data-status-page] .account-menu .account-avatar{
    width:36px;
    height:36px;
  }
  body[data-status-page] .account-menu .account-avatar-wrap{
    margin-left:0;
  }
  body[data-status-page] .account-menu #profileText small{
    max-width:74px;
    font-size:12px;
  }
}
body[data-surface=dashboard] .settings-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
body[data-surface=dashboard] .settings-grid .setting-card{
  min-height:178px;
  padding:18px;
  border-left:3px solid #545e67;
  border-radius:10px;
  background:linear-gradient(155deg,#202b35,#1c252d)!important;
}
body[data-surface=dashboard] .settings-grid .setting-card.is-enabled{
  border-left-color:#69c898;
}
body[data-surface=dashboard] .settings-grid .setting-card.is-disabled{
  border-left-color:#9b5361;
}
body[data-surface=dashboard] .settings-grid .setting-card h2{
  font-size:15px;
}
body[data-surface=dashboard] .settings-grid .setting-card p{
  min-height:42px;
  font-size:12px;
}
body[data-surface=dashboard] .settings-grid .setting-card>div{
  margin-top:auto;
}
@media (max-width:1100px){
  body[data-surface=dashboard] .settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:800px){
  body[data-surface=dashboard] .manage-server-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  body[data-surface=dashboard] .manage-settings-tools{
    align-items:stretch;
    flex-direction:column;
  }
  body[data-surface=dashboard] .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  body[data-surface=dashboard] .manage-server-heading .server-title h1{font-size:26px}
  body[data-surface=dashboard] .manage-server-summary{width:100%}
  body[data-surface=dashboard] .manage-server-summary>span{flex:1}
  body[data-surface=dashboard] .settings-grid{grid-template-columns:1fr}
}

@media (min-width:1101px){
  body[data-surface=dashboard] .server-directory-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (min-width:601px) and (max-width:1100px){
  body[data-surface=dashboard] .server-directory-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Final sizing polish for the server picker and module search control. */
body[data-surface=dashboard] .server-directory-grid{
  grid-template-columns:repeat(auto-fill,minmax(240px,300px));
  justify-content:start;
}
body[data-surface=dashboard] .server-directory .server-card{
  width:100%;
  max-width:300px;
}
body[data-surface=dashboard] .module-search-wrap input,
body[data-surface=dashboard] .module-search-wrap input:focus{
  border:0;
  outline:0;
  box-shadow:none;
}
@media (max-width:600px){
  body[data-surface=dashboard] .server-directory-grid{
    grid-template-columns:minmax(0,300px);
  }
}

body[data-surface=dashboard] .settings-grid .setting-card .btn.primary{
  background:linear-gradient(135deg,#eaedf1,#ecc28b);
  border-color:#f1d1a7;
  color:#27343f;
  box-shadow:0 6px 16px rgba(241,209,167,.16);
}
body[data-surface=dashboard] .settings-grid .setting-card .btn.primary:hover{
  background:linear-gradient(135deg,#eaedf1,#efcc9f);
  box-shadow:0 8px 20px rgba(241,209,167,.24);
}

/* Personal settings hub, kept distinct from server settings. */
body[data-surface=dashboard] .user-hub{
  max-width:1100px;
  margin:0 auto;
}
body[data-surface=dashboard] .user-profile-hero{
  position:relative;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body[data-surface=dashboard] .user-profile-art{
  display:none;
}
body[data-surface=dashboard] .user-profile-main{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:20px;
  min-height:120px;
  padding:8px 0;
}
body[data-surface=dashboard] .user-profile-avatar{
  width:76px;
  height:76px;
  flex:none;
  object-fit:cover;
  border:3px solid rgba(241,209,167,.25);
  border-radius:50%;
  box-shadow:0 6px 18px rgba(15,19,24,.3);
}
body[data-surface=dashboard] .user-profile-copy{min-width:0}
body[data-surface=dashboard] .user-profile-copy .eyebrow{display:none}
body[data-surface=dashboard] .user-profile-copy h1{margin:0 0 4px;font-size:28px}
body[data-surface=dashboard] .user-profile-copy p{margin:0;font-size:12px}
body[data-surface=dashboard] .user-profile-dot{color:#f1d1a7;margin:0 4px}
body[data-surface=dashboard] .user-profile-role{
  margin-left:auto;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  background:#e7b36e;
  color:#ffffff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
body[data-surface=dashboard] .user-hub-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin:28px 0 18px;
}
body[data-surface=dashboard] .user-hub-intro h2{margin-bottom:6px;font-size:30px}
body[data-surface=dashboard] .user-hub-intro p{margin:0;font-size:13px}
body[data-surface=dashboard] .user-hub-status{display:none}
body[data-surface=dashboard] .user-settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
body[data-surface=dashboard] .user-setting-card{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:205px;
  padding:24px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:linear-gradient(155deg,#273038,#1c252d);
  transition:transform .18s,border-color .18s,background .18s;
  cursor:pointer;
}
body[data-surface=dashboard] .user-setting-card:hover{
  transform:translateY(-3px);
  border-color:rgba(241,209,167,.45);
  background:linear-gradient(155deg,#2b3946,#20282e);
}
body[data-surface=dashboard] .user-setting-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:13px;
  background:#f1d1a71c;
  color:#eaedf1;
  font-size:22px;
}
body[data-surface=dashboard] .user-setting-card h3{margin:0 0 7px;font:700 18px Manrope}
body[data-surface=dashboard] .user-setting-card p{margin:0;max-width:380px;font-size:13px;line-height:1.55}
body[data-surface=dashboard] .user-setting-card .btn{width:max-content;margin-top:auto;min-height:38px;border-radius:9px}
body[data-surface=dashboard] .user-setting-card:focus-visible{outline:2px solid #eaedf1;outline-offset:4px}
body[data-surface=dashboard] .user-setting-card .btn span,
body[data-surface=dashboard] .user-panel .btn span{margin-left:auto}
body[data-surface=dashboard] .user-panel{
  position:fixed;
  z-index:40;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(18,25,31,.78);
  backdrop-filter:blur(5px);
  animation:userModalIn .18s ease both;
}
body[data-surface=dashboard] .user-panel[hidden]{display:none}
body[data-surface=dashboard] .user-panel-dialog{
  width:min(680px,100%);
  max-height:min(720px,calc(100vh - 48px));
  overflow:auto;
  padding:24px;
  border:1px solid rgba(241,209,167,.35);
  border-radius:16px;
  background:#232d35;
  box-shadow:0 24px 80px rgba(15,19,24,.5);
  animation:homeUp .22s ease both;
}
body[data-surface=dashboard] .user-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
body[data-surface=dashboard] .user-panel-head h3{margin:0;font:700 19px Manrope}
body[data-surface=dashboard] .user-panel-close{border:0;background:transparent;color:#aab2b9;font-size:24px;line-height:1}
body[data-surface=dashboard] .user-panel-close{cursor:pointer}
body[data-surface=dashboard] .user-panel-copy{margin:8px 0 18px;font-size:12px}
body[data-surface=dashboard] .user-preferences-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:12px}
body[data-surface=dashboard] .user-preferences-form input{margin:0}
body[data-surface=dashboard] .user-preferences-form .btn{min-height:40px}
body[data-surface=dashboard] .user-access-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
body[data-surface=dashboard] .user-access-list>div{display:grid;gap:5px;padding:12px;border-radius:10px;background:#ffffff08}
body[data-surface=dashboard] .user-access-list span{font-size:11px;color:#aab2b9}
body[data-surface=dashboard] .user-access-list strong{font-size:13px;color:#ffffff}
@keyframes userModalIn{from{opacity:0}to{opacity:1}}
@media (max-width:600px){
  body[data-surface=dashboard] .user-profile-main{align-items:center;min-height:96px;padding:6px 0}
  body[data-surface=dashboard] .user-profile-avatar{width:62px;height:62px}
  body[data-surface=dashboard] .user-profile-copy h1{font-size:22px}
  body[data-surface=dashboard] .user-profile-copy p{font-size:11px}
  body[data-surface=dashboard] .user-profile-role{margin:0}
  body[data-surface=dashboard] .user-hub-intro{align-items:flex-start;flex-direction:column;margin:22px 0 14px}
  body[data-surface=dashboard] .user-hub-intro h2{font-size:25px}
  body[data-surface=dashboard] .user-settings-grid{grid-template-columns:1fr}
  body[data-surface=dashboard] .user-setting-card{min-height:175px;padding:20px}
  body[data-surface=dashboard] .user-preferences-form{grid-template-columns:1fr}
  body[data-surface=dashboard] .user-access-list{grid-template-columns:1fr}
  body[data-surface=dashboard] .user-panel{padding:16px}
  body[data-surface=dashboard] .user-panel-dialog{max-height:calc(100vh - 32px);padding:18px}
}

/* Connection page: use the same compact, purple dashboard language. */
main:has(.access-invite) .page-head{
  margin-bottom:24px;
}
main:has(.access-invite) .page-head h1{
  max-width:760px;
  letter-spacing:-1.5px;
}
main:has(.access-invite) .page-head p{
  max-width:700px;
  font-size:13px;
}
main:has(.access-invite) .studio{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:18px;
}
main:has(.access-invite) .access-invite{
  min-height:100%;
  padding:28px;
  border:1px solid #3e505f;
  border-radius:14px;
  background:
    radial-gradient(circle at 100% 0,#f1d1a714,transparent 38%),
    linear-gradient(145deg,#252f38,#1c252d 72%);
  box-shadow:0 18px 45px rgba(15,19,24,.18);
}
main:has(.access-invite) .access-invite .eyebrow{
  margin-bottom:16px;
}
main:has(.access-invite) .access-invite h2{
  max-width:470px;
  font-size:23px;
  letter-spacing:-.6px;
}
main:has(.access-invite) .access-invite>p:not(.access-price){
  max-width:560px;
  margin:12px 0 0;
  font-size:13px;
}
main:has(.access-invite) .access-invite .discord-btn{
  margin:24px 0 20px;
  border-radius:9px;
  box-shadow:0 8px 20px #f1d1a722;
}
main:has(.access-invite) .access-price{
  margin:0;
  border-radius:10px;
  background:#f1d1a70d;
  border-color:#f1d1a72c;
  font-size:12px;
  line-height:1.55;
}
main:has(.access-invite) .panel{
  border-radius:14px;
  background:linear-gradient(145deg,#1f2a33,#1c252d);
}
main:has(.access-invite) .panel-head{
  padding:17px 20px;
  color:#eaedf1;
  font-size:10px;
  letter-spacing:1.7px;
}
main:has(.access-invite) .panel-body{
  padding:8px 20px 14px;
}
main:has(.access-invite) .step{
  gap:15px;
  padding:20px 0;
}
main:has(.access-invite) .step>span{
  width:29px;
  height:29px;
  background:#324250;
  box-shadow:0 0 0 4px #f1d1a708;
}
main:has(.access-invite) .step h3{
  margin-top:3px;
  font-size:13px;
}
main:has(.access-invite) .step p{
  margin:5px 0 0;
  font-size:11px;
  line-height:1.55;
}
@media (max-width:700px){
  main:has(.access-invite) .access-invite{
    min-height:0;
    padding:22px 18px;
  }
  main:has(.access-invite) .access-invite h2{
    font-size:21px;
  }
  main:has(.access-invite) .access-invite .discord-btn{
    width:100%;
    margin:20px 0 16px;
  }
  main:has(.access-invite) .panel-body{
    padding:4px 18px 10px;
  }
}

/* Keep the account summary open and decorative; only its menu is boxed. */
body[data-surface=dashboard] .account-menu{
  width:auto;
  min-width:210px;
  background:transparent;
  margin-left:auto;
  transform:translateX(10px);
}
body[data-surface=dashboard] .account-menu>summary,
body[data-surface=dashboard] .account-menu>summary:hover,
body[data-surface=dashboard] .account-menu[open]>summary{
  min-height:68px;
  padding:8px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
body[data-surface=dashboard] .account-menu .account-avatar-wrap{
  margin-left:18px;
}
body[data-surface=dashboard] .account-menu .account-star,
body[data-surface=dashboard] .account-menu[open] .account-star{
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:transparent;
  line-height:1;
  font-size:0;
  transition:none;
  transform:none;
  margin-right:24px;
}
body[data-surface=dashboard] .account-menu .account-star::before{
  content:'⌄';
  display:block;
  color:#eaedf1;
  font:700 24px/18px 'DM Sans',sans-serif;
  transform:translate(-8px,-14px);
}
body[data-surface=dashboard] .account-menu .account-star::after{
  display:none;
}
body[data-surface=dashboard] .workspace-menu-separator{
  height:1px;
  margin:7px 5px;
  background:rgba(234,237,241,.2);
}
body[data-surface=dashboard] .account-menu:hover .account-avatar,
body[data-surface=dashboard] .account-menu[open] .account-avatar{
  transform:none;
  box-shadow:none;
}
body[data-surface=dashboard] .account-menu .account-options button{
  width:100%;
  border:0;
  color:#eaedf1;
  text-align:left;
  background:transparent;
}
body[data-surface=dashboard] .account-menu .account-options #accountLogout{
  color:#ed9ca6;
}
body[data-surface=dashboard] .account-menu .account-options #accountLogout:hover{
  color:#ffb0b8;
  background:linear-gradient(90deg,rgba(237,156,166,.16),rgba(237,156,166,.04));
}

/* Builder surface shares the dashboard header. */
/* ---------- Header (dashboard surface only) ---------- */
body[data-surface=builder] header{
  position:sticky;top:0;z-index:60;height:76px;gap:24px;
  justify-content:flex-start;
  padding:0 20px;
  background:rgba(24,31,37,.78)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body[data-surface=builder] .top-brand{gap:12px;font:800 19px Manrope,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#ffffff;white-space:nowrap}
body[data-surface=builder] .brand-portrait{width:48px;height:48px;border-radius:11px;object-fit:cover;object-position:50% 50%;background:transparent;box-shadow:none;filter:none;transform:scale(1.32)}

body[data-surface=builder] .top-nav{gap:2px;margin-left:14px}
body[data-surface=builder] .header-profile{margin-left:auto}
body[data-surface=builder] .top-nav>a,
body[data-surface=builder] .top-nav>.nav-dropdown>summary{
  min-height:40px;padding:8px 14px;border-radius:10px;font-size:15px;font-weight:600;
  color:#a8b0b7;background:transparent;box-shadow:none;transform:none;
  transition:background .16s,color .16s,box-shadow .16s,transform .16s}
body[data-surface=builder] .top-nav>a:hover,
body[data-surface=builder] .top-nav>.nav-dropdown>summary:hover,
body[data-surface=builder] .top-nav>.nav-dropdown[open]>summary{
  color:#ffffff;background:rgba(255,255,255,.09);box-shadow:0 5px 16px rgba(15,19,24,.2);
  transform:translateY(-1px)}
body[data-surface=builder] .nav-dropdown>summary::after{
  content:"";display:inline-block;flex:none;width:6px;height:6px;margin:-3px 0 0 9px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .2s}
body[data-surface=builder] .nav-dropdown[open]>summary::after{transform:rotate(225deg);margin-top:3px}
body[data-surface=builder] .nav-dropdown>div{
  top:calc(100% + 10px);min-width:210px;padding:8px;border-radius:14px;
  background:#212a31;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(15,19,24,.55)}
body[data-surface=builder] .nav-dropdown>div a{min-height:42px;display:flex;align-items:center;padding:10px 12px;font-size:14px;border-radius:9px;color:#eaedf1}

/* Signed-out "Sign in" becomes a proper button */
body[data-surface=builder] .profile-preview{height:40px;padding:0 16px;border-radius:3px;background:#f1d1a7;border:1px solid #f1d1a7;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#27343f;font-size:13px;font-weight:500;gap:0;transition:background .15s,border-color .15s,transform .15s}
body[data-surface=builder] .profile-preview:hover{background:#eaedf1;border-color:#eaedf1;box-shadow:none;transform:translateY(-1px)}
body[data-surface=builder] .profile-preview .profile-circle{display:none}
body[data-surface=builder] .profile-preview #profileText{display:inline;margin:0;font-size:13px;color:#27343f;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
body[data-surface=builder] .profile-preview #profileText small{display:inline;margin:0 0 0 .3em;font-size:13px;color:#27343f}
body[data-surface=builder] .profile-preview>span:last-child{margin-left:0}
body[data-surface=builder] .account-menu{width:178px}
body[data-surface=builder] .account-menu>summary{min-height:58px;padding:5px 8px 5px 5px;border-radius:8px;gap:8px;color:#ffffff;background:#283541;border:1px solid rgba(255,255,255,.04);transition:background .16s,border-color .16s}
body[data-surface=builder] .account-menu>summary:hover,
body[data-surface=builder] .account-menu[open]>summary{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}
body[data-surface=builder] .account-menu.account-sparkle{background:transparent}
body[data-surface=builder] .account-menu.account-sparkle>summary:before,
body[data-surface=builder] .account-menu.account-sparkle>summary:after{display:none}
body[data-surface=builder] .account-menu .account-avatar,
body[data-surface=builder] .account-menu:hover .account-avatar,
body[data-surface=builder] .account-menu[open] .account-avatar{border-color:rgba(241,209,167,.45);box-shadow:none;transform:none}
body[data-surface=builder] .account-menu>summary:hover,
body[data-surface=builder] .account-menu[open]>summary{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09)}
body[data-surface=builder] .account-menu .account-avatar{width:43px;height:43px;flex:none;border:2px solid rgba(241,209,167,.45)}
body[data-surface=builder] .account-menu #profileText{min-width:0;font-size:10px;line-height:1.1;color:#a7b0b7}
body[data-surface=builder] .account-menu #profileText small{display:block;margin-top:2px;font-size:14px;line-height:1.1;color:#f5f6f8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-surface=builder] .account-menu .account-role{display:block;width:max-content;margin-top:4px;padding:3px 6px;border-radius:3px;background:#b33d8b;color:#ffffff;font-size:8px;line-height:1;font-weight:800;letter-spacing:.4px}
body[data-surface=builder] .account-menu .account-star{font-size:0;margin-left:auto;color:#eaedf1}
body[data-surface=builder] .account-menu .account-star::after{content:"⌄";font-size:18px}
body[data-surface=builder] .account-menu .account-options{top:calc(100% + 8px);background:#212a31;border-color:rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(15,19,24,.45)}


/* ==========================================================================
   Midnight Street theme (v21)
   Palette comes from the mascot (cream skin, charcoal coat, grey scarf, steel-blue
   eyes) and the snowy lamp-lit street background. Minimal on purpose: one
   background, one surface style, one accent. Applies to every page.
   ========================================================================== */
:root{
  color-scheme:dark;
  --n-bg:#262626; --n-surface:#1c1c1c; --n-solid:#1c1c1c; --n-raised:#242424;
  --n-line:#343434; --n-line-strong:#454545;
  --n-text:#ededed; --n-muted:#a1a1a1; --n-dim:#7d7d7d;
  --n-accent:#f1d1a7; --n-accent-hover:#f8deb8; --n-ink:#20272e;
  --n-steel:#8fa9c8; --n-ok:#57b87f; --n-warn:#d9a441; --n-bad:#df6a6a;
  --bg:#262626; --panel:#1c1c1c; --border:#343434; --muted:#a1a1a1; --ink:#ededed; --accent:#f1d1a7;
}

/* ---------- Background: the snowy street, dimmed behind content ---------- */
html{background:#131a21!important}
html,body,.shell{background:transparent!important}
html{background:#131a21!important}
body{color:var(--n-text);font:15px/1.6 'DM Sans',sans-serif;isolation:isolate;min-height:100vh}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(19,26,33,.45) 0%,rgba(19,26,33,.55) 55%,rgba(19,26,33,.7) 100%),
    url(street-scene.svg) center bottom/cover no-repeat,#131a21}
body::after,.home-hero::after{
  content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 30px 40px,rgba(255,255,255,.85) 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 120px 150px,rgba(255,255,255,.7) 50%,transparent 52%),
    radial-gradient(1.4px 1.4px at 70px 110px,rgba(255,255,255,.75) 50%,transparent 52%),
    radial-gradient(2.4px 2.4px at 60px 90px,rgba(255,255,255,.8) 50%,transparent 52%),
    radial-gradient(2px 2px at 210px 40px,rgba(255,255,255,.7) 50%,transparent 52%),
    radial-gradient(3px 3px at 150px 170px,rgba(255,255,255,.75) 50%,transparent 52%),
    radial-gradient(3.2px 3.2px at 90px 60px,rgba(255,255,255,.7) 50%,transparent 52%),
    radial-gradient(3px 3px at 300px 210px,rgba(255,255,255,.65) 50%,transparent 52%);
  background-size:160px 160px,210px 210px,260px 260px,340px 340px,340px 340px,400px 400px,520px 520px,520px 520px;
  animation:snowfall 22s linear infinite}
@keyframes snowfall{to{background-position:20px 160px,-30px 210px,40px 260px,-60px 340px,50px 340px,-40px 400px,70px 520px,-50px 520px}}
@media (prefers-reduced-motion:reduce){body::after,.home-hero::after{animation:none}}

/* ---------- Text & links ---------- */
h1,h2,h3{color:var(--n-text);letter-spacing:-.02em}
h1{font:800 34px/1.15 Manrope,sans-serif;letter-spacing:-.03em}
p{color:var(--n-muted)}
::selection{background:rgba(241,207,159,.3)}
:focus-visible{outline:2px solid var(--n-accent);outline-offset:3px}
*{scrollbar-color:#3a4a58 transparent;scrollbar-width:thin}
.eyebrow{display:block!important;font:700 11px/1 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--n-dim)!important;margin:0 0 10px}
.back-link,.simple-notice a,.manage-server-page .back-link{color:var(--n-muted)!important;font-size:13px;font-weight:600}
.back-link:hover{color:var(--n-text)!important}

/* ---------- Header: same on every page ---------- */
body[data-surface] header{
  position:sticky;top:0;z-index:60;height:68px;padding:0 24px;gap:20px;justify-content:flex-start;
  background:rgba(19,26,33,.78)!important;border:0!important;border-bottom:1px solid var(--n-line)!important;
  box-shadow:none!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body[data-surface] .top-brand{font:800 17px Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--n-text);gap:10px}
body[data-surface] .brand-portrait{width:44px;height:44px;border-radius:10px;transform:scale(1.25)}
body[data-surface] .top-nav{display:flex!important;gap:2px;margin-left:12px}
body[data-surface] .top-nav>a,
body[data-surface] .top-nav>.nav-dropdown>summary{
  min-height:38px;padding:7px 13px;border-radius:8px;font-size:14px;font-weight:600;color:var(--n-muted);
  background:transparent;box-shadow:none;transform:none}
body[data-surface] .top-nav>a:hover,
body[data-surface] .top-nav>a.active,
body[data-surface] .top-nav>.nav-dropdown>summary:hover,
body[data-surface] .top-nav>.nav-dropdown[open]>summary{color:var(--n-text);background:rgba(255,255,255,.07);box-shadow:none;transform:none}
body[data-surface] .nav-dropdown>div{background:#18212a;border:1px solid var(--n-line-strong);border-radius:12px;box-shadow:0 18px 44px rgba(5,9,13,.55);padding:6px}
body[data-surface] .nav-dropdown>div a{color:var(--n-text);border-radius:8px;font-size:14px}
body[data-surface] .nav-dropdown>div a:hover{background:rgba(255,255,255,.07)}
body[data-surface] .profile-preview{background:var(--n-accent);border:1px solid var(--n-accent);color:var(--n-ink);border-radius:8px;height:38px}
body[data-surface] .profile-preview:hover{background:var(--n-accent-hover);border-color:var(--n-accent-hover)}
body[data-surface] .profile-preview #profileText,body[data-surface] .profile-preview #profileText small{color:var(--n-ink)}
body[data-surface] .account-menu>summary,
body[data-surface] .account-menu>summary:hover,
body[data-surface] .account-menu[open]>summary{background:transparent;border:0;box-shadow:none;border-radius:10px}
body[data-surface] .account-menu .account-options{background:#18212a;border-color:var(--n-line-strong)}
body[data-surface=builder] .top-brand:after{display:none!important}

/* ---------- Page shell ---------- */
main{max-width:1180px;padding:44px 24px 72px}
body.home-page main,main:has(.sb-app){max-width:none;padding:0}
.page-head{margin-bottom:28px}
.page-head p{margin:6px 0 0;font-size:15px;max-width:640px}

/* ---------- Surfaces: one flat card style ---------- */
body .card,body .panel,body .server-card,body .setting-card,body .manager-note,body .repeat-item,body .tagify-panel,
body .status-banner,body .service-row,body .metric,body .login-card,body .access-invite,body .settings-grid .setting-card,body .edit-group{
  background:var(--n-surface)!important;border:1px solid var(--n-line)!important;border-radius:12px!important;box-shadow:none!important}
body .panel-head,body .settings-modal-footer{background:rgba(255,255,255,.03)!important;border-color:var(--n-line)!important}
body .panel{overflow:hidden}
body .server-card{border-left:1px solid var(--n-line)!important}
body .server-card:hover,body .setting-card:hover,body .settings-grid .setting-card:hover{background:rgba(32,44,55,.92)!important;border-color:var(--n-line-strong)!important;transform:none}
body .guild-avatar,body .server-icon{border-radius:12px;background:var(--n-raised);color:var(--n-text)}

/* ---------- Settings cards (modules) ---------- */
body .setting-card,body .settings-grid .setting-card{border-left:1px solid var(--n-line)!important;padding:20px;min-height:0}
body .setting-card h2{font-size:15px;font-weight:700}
body .setting-card p{font-size:13px;color:var(--n-muted)}
body .setting-card>small{font-size:11px;color:var(--n-dim)}
body .config-status,body .module-availability{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
body .config-status.enabled{color:var(--n-ok);background:rgba(140,197,162,.13)}
body .config-status.disabled{color:var(--n-muted);background:rgba(255,255,255,.06)}
body .settings-group>summary{font:700 12px 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--n-muted)}
body .setting-card.is-enabled::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--n-ok);margin-bottom:12px}
body .setting-card.is-disabled::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:#56636f;margin-bottom:12px}

/* ---------- Buttons ---------- */
body .btn{border-radius:8px!important;background:rgba(255,255,255,.07);border:1px solid var(--n-line-strong);color:var(--n-text);font-weight:600;box-shadow:none!important;transition:background .15s,border-color .15s,transform .15s}
body .btn:hover{background:rgba(255,255,255,.12);transform:none;filter:none}
body .btn.primary,body .save-setting,body .add-item{background:var(--n-accent)!important;border-color:var(--n-accent)!important;color:var(--n-ink)!important}
body .btn.primary:hover,body .save-setting:hover,body .add-item:hover{background:var(--n-accent-hover)!important;border-color:var(--n-accent-hover)!important}
body .btn.danger{color:var(--n-bad);border-color:rgba(226,154,151,.35);background:rgba(226,154,151,.08)}
body .btn:disabled{opacity:.45}

/* ---------- Inputs ---------- */
body input:not([type=checkbox]):not([type=radio]):not([type=color]),body textarea,body select,
body .setting-field input:not([type=checkbox]):not([type=radio]),body .setting-field textarea,body .setting-field select,body .resource-picker,body .sb-app input,body .sb-app textarea,body .sb-app select{
  background:rgba(10,15,20,.55)!important;border:1px solid var(--n-line-strong)!important;border-radius:8px!important;color:var(--n-text)}
body input:focus,body textarea:focus,body select:focus{outline:none;border-color:var(--n-accent)!important;box-shadow:0 0 0 3px rgba(241,207,159,.16)}
body input::placeholder,body textarea::placeholder{color:var(--n-dim)}
body label{color:var(--n-muted);font-size:13px;font-weight:600}
body input[type=checkbox],body input[type=radio]{accent-color:var(--n-accent)}
body .setting-switch span{background:#4a5865}
body .setting-switch input:checked+span{background:var(--n-accent)}
body .setting-switch span:before{background:#fff}
body .search,body .module-search-wrap input{border-radius:10px!important}
body .module-status-filters .btn.active,body .module-status-filters .btn.primary{background:var(--n-accent)!important;color:var(--n-ink)!important}

/* ---------- Badges, callouts, code ---------- */
body .badge{background:rgba(255,255,255,.05);border:1px solid var(--n-line-strong);color:var(--n-muted);border-radius:6px;font-weight:700;letter-spacing:.05em}
body .note,body .simple-notice,body .module-draft-note{background:rgba(255,255,255,.04)!important;border:1px solid var(--n-line)!important;border-left:1px solid var(--n-line)!important;border-radius:10px!important;color:var(--n-muted)}
body code{color:var(--n-accent)!important;font-weight:600}
body .command-row{border-color:var(--n-line)}
body .command-row:hover{background:rgba(255,255,255,.03)}
body .step>span{background:rgba(241,207,159,.12);color:var(--n-accent)}

/* ---------- Status page ---------- */
body .status-banner{overflow:hidden}
body .status-banner::before,body .status-banner::after{display:none!important}
body .status-light{box-shadow:none!important}
body .service-row{border-radius:0!important;border-width:0 0 1px!important;background:transparent!important}
body .status-services{overflow:hidden}
body .status-metrics strong{font:800 28px Manrope,sans-serif}
body .healthy{color:var(--n-ok)!important;background:rgba(140,197,162,.13)!important;border-color:rgba(140,197,162,.3)!important}
body .development{color:var(--n-warn)!important;background:rgba(233,184,114,.12)!important;border-color:rgba(233,184,114,.3)!important}

/* ---------- Dialogs (module settings) ---------- */
body dialog,body .settings-dialog{background:#18212a!important;border:1px solid var(--n-line-strong)!important;border-radius:14px!important;box-shadow:0 30px 90px rgba(4,8,12,.6)!important;color:var(--n-text)}
body dialog::backdrop,body .settings-dialog::backdrop{background:rgba(8,12,16,.72);backdrop-filter:blur(3px)}
body .settings-modal-footer{border-radius:0 0 14px 14px!important}
body .setting-field{border-color:var(--n-line)}
body #toast{background:var(--n-accent);color:var(--n-ink);border-radius:10px;font-weight:600}

/* ---------- Message studio (builder) ---------- */
body .sb-app{background:rgba(19,26,33,.55)}
body .sb-toolbar,body .sb-tabs,body .sb-status{background:rgba(24,33,41,.9);border-color:var(--n-line)}
body .sb-palette,body .sb-properties,body .sb-preview,body .sb-canvas{background:rgba(22,30,38,.86);border-color:var(--n-line)}
body .sb-palette>button,body .sb-node{background:rgba(255,255,255,.04);border:1px solid var(--n-line);border-radius:10px;color:var(--n-text)}
body .sb-palette>button:hover{border-color:var(--n-accent);background:rgba(241,207,159,.07)}
body .sb-node.selected{border-color:var(--n-accent);box-shadow:0 0 0 1px var(--n-accent)}
body .sb-tabs button.active,body .tabs button.active{color:var(--n-accent);border-bottom-color:var(--n-accent)}
body .sb-drop{border-color:var(--n-line-strong);border-radius:10px}
body .sb-preview .discord,body .discord{background:#2a323a;border-radius:10px}
body .sb-pane-heading{border-color:var(--n-line)}

/* ---------- Footer: a quiet single line ---------- */
body footer{background:transparent!important;border:0!important;border-top:1px solid var(--n-line)!important;border-radius:0!important;box-shadow:none!important;color:var(--n-dim);padding:18px 24px;margin-top:0;font-size:12px;letter-spacing:.04em}
body footer .dot{box-shadow:none}
body footer .muted{color:var(--n-dim)}
body:has(.sb-app) footer{display:none}

/* ==========================================================================
   Home
   ========================================================================== */
/* The home page stays full-bleed: the flat workspace padding must never box the hero. */
body.home-page main,body.home-page:not([data-surface=builder]) main{max-width:none!important;margin:0!important;padding:0!important}
body.home-page .home-inner{padding:0 clamp(20px,11.6vw,168px)}
.home-hero{background:#141b22!important}
.home-hero::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(19,26,33,.95) 0%,rgba(19,26,33,.78) 36%,rgba(19,26,33,.12) 62%,rgba(19,26,33,0) 100%)}
.home-hero::after{position:absolute;z-index:2;opacity:.65}
.home-stage{bottom:112px!important;width:max(100vw,calc((100svh - 188px)*1.7778))!important;-webkit-mask-image:none!important;mask-image:none!important}
.home-mascot{left:55.5%!important;bottom:10.5%!important;width:23.5%!important;
  filter:drop-shadow(0 3px 4px rgba(10,14,18,.5)) drop-shadow(0 16px 24px rgba(10,14,18,.4))!important}
.home-contact{left:58.5%!important;bottom:9.4%!important;width:15%!important;height:1.5%!important;background:radial-gradient(closest-side,rgba(10,14,18,.72),transparent)!important}
.home-copy h1,
body.home-page .home-copy h1,
body[data-surface=dashboard] .home-copy h1{
  margin:0 0 22px!important;
  font:800 clamp(48px,5.4vw,76px)/1.06 Manrope,sans-serif!important;
  letter-spacing:-.04em!important;
  color:#ffffff!important;
}
.home-copy h1 span,
body.home-page .home-copy h1 span,
body[data-surface=dashboard] .home-copy h1 span{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:var(--n-accent)!important;
  font:inherit!important;
}
.home-copy p,
body.home-page .home-copy p,
body[data-surface=dashboard] .home-copy p{
  margin:0 0 32px!important;
  max-width:540px!important;
  font-size:17px!important;
  line-height:1.7!important;
  color:#aab2b9!important;
}
.home-pill{background:rgba(19,26,33,.7)!important;border:1px solid var(--n-line-strong)!important;color:var(--n-muted)!important}
.home-pill:hover{border-color:var(--n-accent)!important;background:rgba(32,44,55,.85)!important}
.home-pill b,.home-pill strong{background:var(--n-accent)!important;color:var(--n-ink)!important}
.home-btn.primary{background:var(--n-accent)!important;color:var(--n-ink)!important;box-shadow:none!important}
.home-btn.primary:hover{background:var(--n-accent-hover)!important;filter:none!important}
.home-btn.ghost{background:rgba(255,255,255,.07)!important;border:1px solid var(--n-line-strong)!important;backdrop-filter:none}
.home-help a{color:var(--n-text)!important}
.home-strip{background:rgba(19,26,33,.82)!important;border-top:1px solid var(--n-line)!important}
.home-tool>span{background:rgba(255,255,255,.05)!important;border:1px solid var(--n-line)!important;color:var(--c)}
.home-tool:hover>span{background:rgba(255,255,255,.1)!important}
.home-features{padding-top:88px}
.home-kicker{color:var(--n-dim)!important}
.home-card{
  background:#1c1c1c!important;
  border:1px solid #343434!important;
  box-shadow:none!important;
  border-radius:14px!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease!important;
}
.home-card:hover{
  transform:translateY(-2px)!important;
  border-color:color-mix(in srgb,var(--c) 42%,#3a3a3a)!important;
  background:#232323!important;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--c) 18%,transparent)!important;
}
.home-card .ico{
  background:color-mix(in srgb,var(--c) 14%,transparent)!important;
  color:var(--c)!important;
  transition:background-color .18s ease!important;
}
.home-card:hover .ico{
  background:color-mix(in srgb,var(--c) 22%,transparent)!important;
  transform:none!important;
}
.home-card .state em{
  color:var(--c)!important;
  transition:transform .18s ease!important;
}
.home-card:hover .state em{
  color:var(--c)!important;
  transform:translate(2px,-2px)!important;
}

/* ---------- Small screens ---------- */
@media (max-width:900px){
  body[data-surface] header{position:static;height:auto;padding:12px 16px}
  main{padding:28px 16px 56px}
  h1{font-size:28px}
  .home-hero::before{background:linear-gradient(180deg,rgba(19,26,33,.6) 0%,rgba(19,26,33,.2) 55%,rgba(19,26,33,0) 100%)}
  .home-stage{width:900px!important;bottom:0!important}
  .home-mascot{left:56%!important}
}

/* ---------- Fixes ---------- */
/* Under ~1200px the copy and the figure share too little room, so the figure
   would sit behind the text. The street scene carries the hero on smaller screens. */
@media (max-width:860px){body.home-page .home-mascot,body.home-page .home-contact{display:none}}
#mobileNavToggle{display:none!important}
#crumb{display:none!important}
/* search: one border, on the wrapper */
body .module-search-wrap{background:rgba(10,15,20,.55);border:1px solid var(--n-line-strong);border-radius:10px}
body .module-search-wrap:focus-within{border-color:var(--n-accent);box-shadow:0 0 0 3px rgba(241,207,159,.16)}
body .module-search-wrap input{border:0!important;background:transparent!important;box-shadow:none!important}
/* calmer small print on cards */
body .setting-card>small,body .config-status{text-transform:none;letter-spacing:0}
body .setting-card>small{font-size:12px;line-height:1.5}
body .config-status{font-size:11px}

/* ---------- Fixes 2 ---------- */
body label.module-search-wrap input#moduleSearch{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
body .settings-modal-footer .save-setting{background:var(--n-accent)!important;border-color:var(--n-accent)!important;color:var(--n-ink)!important}
body .settings-modal-footer .save-setting:hover:not(:disabled){background:var(--n-accent-hover)!important}
body .settings-modal-footer .save-setting:disabled{opacity:.35}
body .settings-modal-footer .btn.danger,body .settings-modal-footer .discard{background:transparent;border-color:transparent;color:var(--n-muted)}
/* "Read only" becomes a quiet pill instead of a diagonal ribbon */
body .server-card{position:relative;overflow:hidden}
body .server-readonly-label{position:absolute;top:14px;right:14px;left:auto;bottom:auto;transform:none;width:auto;height:auto;clip-path:none;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--n-muted);border:1px solid var(--n-line);
  font:700 10px/1.2 'DM Sans',sans-serif;letter-spacing:.08em;box-shadow:none}

/* ---------- Fixes 3: phones ---------- */
body[data-surface] .profile-preview #profileText{max-width:none!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap}
@media (max-width:900px){
  body[data-surface] header{display:flex!important;flex-wrap:wrap;justify-content:flex-start!important;align-items:center;gap:8px 12px;padding:10px 14px}
  body[data-surface] .top-brand{margin:0;width:auto!important;flex:0 0 auto!important;justify-content:flex-start!important}
  body[data-surface] .header-profile{margin-left:auto!important;flex:0 0 auto;width:auto}
  body[data-surface] .profile-preview{height:36px;padding:0 14px}
  body[data-surface] .top-nav{order:3;flex:1 0 100%!important;margin:0!important;justify-content:space-between;gap:0}
  body[data-surface] .top-nav>a,body[data-surface] .top-nav>.nav-dropdown>summary{padding:7px 8px;font-size:13px}
  .home-stage{width:780px!important}
  .home-mascot{left:55%!important;width:19.5%!important}
  .home-contact{left:55.8%!important;width:17%!important}
}

/* ==========================================================================
   v22 · Calm page background + polished dialogs
   ========================================================================== */

/* The street scene stays crisp only inside the home hero (it draws its own copy).
   Everywhere else it becomes a soft, dark, blurred backdrop so content stays readable. */
body::before{
  inset:-40px;filter:blur(9px) saturate(.75);transform:translateZ(0);
  background:
    linear-gradient(180deg,rgba(15,21,27,.80) 0%,rgba(15,21,27,.88) 50%,rgba(15,21,27,.94) 100%),
    url(street-scene.svg) center bottom/cover no-repeat,#131a21}

/* ---------- Close button ---------- */
body dialog:focus,body dialog:focus-visible{outline:none}
body dialog .close{
  position:absolute;right:16px;top:16px;z-index:6;width:36px;height:36px;padding:0;
  display:grid;place-items:center;border-radius:11px;border:1px solid var(--n-line);
  background:rgba(255,255,255,.05);color:var(--n-muted);font:400 22px/1 'DM Sans',sans-serif;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
body dialog .close:hover{background:rgba(255,255,255,.12);color:#fff;border-color:var(--n-line-strong)}
body dialog .close:focus{outline:none}
body dialog .close:focus-visible{outline:2px solid var(--n-accent);outline-offset:2px}

/* ---------- Generic dialogs ---------- */
body dialog:not(.settings-dialog):not(.confirm-dialog):not(.uai-dialog){width:min(560px,calc(100% - 32px));padding:30px 28px 26px;border-radius:18px!important}
body dialog:not(.settings-dialog):not(.confirm-dialog):not(.uai-dialog) h2{font-size:22px;font-weight:800;margin:0 44px 12px 0}
body dialog:not(.settings-dialog):not(.confirm-dialog):not(.uai-dialog) form>label{margin-top:14px}
body dialog:not(.settings-dialog):not(.confirm-dialog):not(.uai-dialog) .toolbar{margin-top:6px}
body dialog[open]{animation:dlg-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
@media (prefers-reduced-motion:reduce){body dialog[open]{animation:none}}
body dialog::backdrop{background:rgba(6,10,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- Settings dialog shell ---------- */
body .settings-dialog{
  width:min(640px,94vw);max-width:640px;border-radius:18px!important;
  background:#171f27!important;border:1px solid var(--n-line-strong)!important;
  box-shadow:0 40px 100px rgba(3,6,10,.7),0 0 0 1px rgba(255,255,255,.02)!important}
body .settings-dialog .settings-modal-head{
  padding:26px 70px 18px 28px;border-bottom:1px solid var(--n-line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
body .settings-dialog .settings-modal-head h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
body .settings-dialog .settings-modal-head p{font-size:13px;line-height:1.55;color:var(--n-muted);margin:0}
body .settings-dialog .settings-fields{padding:10px 28px 22px;scrollbar-gutter:stable}
body .settings-dialog .settings-fields::-webkit-scrollbar{width:10px}
body .settings-dialog .settings-fields::-webkit-scrollbar-thumb{background:#33424f;border:3px solid #171f27;border-radius:999px}
body .settings-dialog .module-draft-note{margin:14px 0 4px;padding:11px 14px;border-radius:10px!important;font-size:12.5px;line-height:1.5;color:var(--n-muted);background:rgba(255,255,255,.04)!important;border:1px solid var(--n-line)!important}

/* ---------- Fields ---------- */
body .settings-dialog .setting-field{padding:14px 0;border:0}
body .settings-dialog .setting-field>label,body .settings-dialog .repeat-list>h3{font-size:13px;font-weight:700;color:var(--n-text);margin:0 0 8px;letter-spacing:0}
body .settings-dialog .setting-field small{font-size:12px;line-height:1.5;color:var(--n-dim);margin-top:8px}
body .settings-dialog .setting-field input:not([type=checkbox]):not([type=radio]):not(.resource-search),
body .settings-dialog .setting-field textarea,
body .settings-dialog .setting-field select{
  padding:11px 13px!important;min-height:44px;font-size:14px;line-height:1.4;border-radius:10px!important;
  background:rgba(7,12,17,.6)!important;border:1px solid var(--n-line-strong)!important;color:var(--n-text);
  transition:border-color .15s,box-shadow .15s,background .15s}
body .settings-dialog .setting-field input:hover:not([type=checkbox]):not([type=radio]),
body .settings-dialog .setting-field textarea:hover,body .settings-dialog .setting-field select:hover{border-color:rgba(205,220,235,.32)!important}
body .settings-dialog .setting-field textarea{min-height:120px;resize:vertical}
body .settings-dialog .setting-field select{
  appearance:none;-webkit-appearance:none;padding-right:38px!important;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3afba' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important}
body .settings-dialog .duration-control{grid-template-columns:minmax(0,1fr) 150px;gap:10px}

/* ---------- Toggle row ---------- */
body .settings-dialog .switch-field{padding:0;margin:14px 0 6px}
body .settings-dialog .setting-switch{
  display:flex!important;align-items:center;gap:14px;margin:0;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--n-line);
  font-size:14px;font-weight:700;color:var(--n-text);cursor:pointer;transition:background .15s,border-color .15s}
body .settings-dialog .setting-switch:hover{background:rgba(255,255,255,.07);border-color:var(--n-line-strong)}
body .settings-dialog .setting-switch span{width:44px;height:26px;background:#3b4752;border-radius:999px;transition:background .18s}
body .settings-dialog .setting-switch span:before{top:3px;left:3px;width:20px;height:20px;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .18s}
body .settings-dialog .setting-switch input:checked+span{background:var(--n-accent)}
body .settings-dialog .setting-switch input:checked+span:before{transform:translateX(18px);background:#2a2113}
body .settings-dialog .switch-field>small{padding:0 4px}

/* ---------- Channel / role pickers ---------- */
body .settings-dialog .resource-picker{
  padding:0!important;border-radius:10px!important;overflow:hidden;
  background:rgba(7,12,17,.6)!important;border:1px solid var(--n-line-strong)!important;
  transition:border-color .15s,box-shadow .15s}
body .settings-dialog .resource-picker:hover{border-color:rgba(205,220,235,.32)!important}
body .settings-dialog .resource-picker[open]{border-color:var(--n-accent)!important;box-shadow:0 0 0 3px rgba(241,207,159,.14)}
body .settings-dialog .resource-picker>summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;
  padding:10px 14px!important;font-size:14px;line-height:1.4;cursor:pointer;list-style:none;
  -webkit-user-select:none;user-select:none}
body .settings-dialog .resource-picker>summary::-webkit-details-marker{display:none}
body .settings-dialog .resource-picker>summary::marker{content:''}
body .settings-dialog .resource-value{flex:1;min-width:0;display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .settings-dialog .resource-placeholder{color:var(--n-dim)}
body .settings-dialog .selection-count{margin-left:auto;font-size:12px;color:var(--n-muted)}
body .settings-dialog .resource-multi-field .resource-picker>summary>span:first-child{font-weight:700}
body .settings-dialog .picker-chevron{
  flex:none;width:8px;height:8px;font-size:0;border-right:2px solid var(--n-muted);border-bottom:2px solid var(--n-muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
body .settings-dialog .resource-picker[open]>summary .picker-chevron{transform:rotate(225deg) translate(-2px,-2px)}
body .settings-dialog .resource-popover{border-top:1px solid var(--n-line);background:rgba(10,15,20,.55)}
body .settings-dialog .resource-popover .resource-search{
  display:block;margin:10px!important;width:calc(100% - 20px)!important;min-height:40px;padding:9px 12px!important;
  font-size:13px;border-radius:8px!important;background:rgba(255,255,255,.05)!important;border:1px solid var(--n-line)!important}
body .settings-dialog .resource-options{max-height:min(260px,var(--picker-room,260px));overflow:auto;padding:2px 8px 8px}
body .settings-dialog .resource-options::-webkit-scrollbar{width:8px}
body .settings-dialog .resource-options::-webkit-scrollbar-thumb{background:#33424f;border-radius:999px}
body .settings-dialog .resource-option-group+.resource-option-group{margin-top:4px}
body .settings-dialog .resource-category-label{padding:10px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n-dim)}
body .settings-dialog .resource-options label{
  display:flex;align-items:center;gap:10px;min-height:38px;margin:0;padding:8px 10px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--n-text);cursor:pointer;transition:background .12s}
body .settings-dialog .resource-options label:hover{background:rgba(255,255,255,.07)}
body .settings-dialog .resource-options label:has(input:checked){background:rgba(241,207,159,.12)}
body .settings-dialog .resource-options label small{margin:0 0 0 auto;padding:0;font-size:10px;opacity:.55;color:var(--n-muted);font-variant-numeric:tabular-nums}
body .settings-dialog .resource-options input[type=radio]{
  appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;min-width:16px;min-height:16px;margin:0;
  border-radius:50%;border:2px solid #5b6875;display:grid;place-items:center;background:transparent;cursor:pointer}
body .settings-dialog .resource-options input[type=radio]:checked{border-color:var(--n-accent)}
body .settings-dialog .resource-options input[type=radio]:checked::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--n-accent)}
body .settings-dialog .resource-options input[type=checkbox]{width:32px;min-width:32px;height:18px;min-height:18px;border-radius:999px;background:#3b4752}
body .settings-dialog .resource-options input[type=checkbox]:before{width:14px;height:14px;top:2px;left:2px}
body .settings-dialog .resource-options input[type=checkbox]:checked{background:var(--n-accent)}
body .settings-dialog .resource-options input[type=checkbox]:checked:before{transform:translateX(14px);background:#2a2113}
body .settings-dialog .resource-options p{padding:14px 10px;font-size:13px;color:var(--n-muted)}
body .settings-dialog .resource-popover>.resource-clear{display:flex;width:calc(100% - 20px);min-height:36px;margin:0 10px 10px;font-size:12px;padding:0 12px}
body .settings-dialog .missing-resource{color:var(--n-warn)}

/* ---------- Disclosures (manual ID, repeat items, tagify) ---------- */
body .settings-dialog .manual-id-disclosure>summary,
body .settings-dialog .tagify-panel>summary,
body .settings-dialog .repeat-item>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none}
body .settings-dialog .manual-id-disclosure>summary::-webkit-details-marker,
body .settings-dialog .tagify-panel>summary::-webkit-details-marker,
body .settings-dialog .repeat-item>summary::-webkit-details-marker{display:none}
body .settings-dialog .manual-id-disclosure>summary::before,
body .settings-dialog .repeat-item>summary::before{
  content:'';flex:none;width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s}
body .settings-dialog .manual-id-disclosure[open]>summary::before,
body .settings-dialog .repeat-item[open]>summary::before{transform:rotate(45deg)}
body .settings-dialog .manual-id-disclosure{margin-top:8px}
body .settings-dialog .manual-id-disclosure>summary{width:max-content;padding:4px 2px;font-size:12px;font-weight:600;color:var(--n-dim);border-radius:6px}
body .settings-dialog .manual-id-disclosure>summary:hover{color:var(--n-text)}
body .settings-dialog .manual-id{display:flex;gap:8px;margin-top:8px}
body .settings-dialog .manual-id input{flex:1;margin:0}
body .settings-dialog .manual-id .btn{min-height:44px;padding:0 16px;font-size:13px}
body .settings-dialog .repeat-item{padding:14px 16px;margin:12px 0;border-radius:14px!important;background:rgba(255,255,255,.035)!important;border:1px solid var(--n-line)!important}
body .settings-dialog .repeat-item>summary{font-size:14px;font-weight:700;color:var(--n-text)}
body .settings-dialog .repeat-item .setting-field{padding:12px 0}
body .settings-dialog .repeat-item>.danger{width:100%;margin-top:10px;min-height:40px}
body .settings-dialog .add-item{width:100%;min-height:42px;margin-top:6px}
body .settings-dialog .tagify-panel{margin-top:12px;padding:12px 14px;border-radius:12px!important;background:rgba(255,255,255,.035);border:1px solid var(--n-line)}
body .settings-dialog .tagify-panel>summary{font-size:12.5px;font-weight:600;color:var(--n-muted)}

/* ---------- Footer ---------- */
body .settings-dialog .settings-modal-footer{
  display:flex;align-items:center;gap:10px;padding:14px 28px;
  background:rgba(10,15,20,.6)!important;border-top:1px solid var(--n-line);border-radius:0 0 18px 18px!important}
body .settings-dialog .settings-modal-footer>small{
  display:flex;align-items:center;gap:8px;margin:0 auto 0 0;font-size:12.5px;color:var(--n-muted)}
body .settings-dialog .settings-modal-footer>small::before{content:'';width:8px;height:8px;border-radius:50%;background:#56636f;flex:none}
body .settings-dialog .settings-modal-footer>small.is-dirty{color:var(--n-warn)}
body .settings-dialog .settings-modal-footer>small.is-dirty::before{background:var(--n-warn);box-shadow:0 0 0 3px rgba(233,184,114,.18)}
body .settings-dialog .settings-modal-footer .btn{min-height:40px;padding:0 18px;font-size:13px;border-radius:10px!important}
body .settings-dialog .settings-modal-footer #discardModule{color:var(--n-muted);background:transparent;border-color:var(--n-line)}
body .settings-dialog .settings-modal-footer #discardModule:hover{color:var(--n-text);background:rgba(255,255,255,.07)}
body .settings-dialog .settings-modal-footer .save-setting:disabled{opacity:.35;cursor:not-allowed}

/* ---------- Unsaved-changes prompt ---------- */
body dialog.confirm-dialog{
  width:min(400px,calc(100% - 32px));max-width:400px;padding:28px 24px 22px!important;text-align:center;
  border-radius:18px!important;background:#18212a!important;border:1px solid var(--n-line-strong)!important}
body dialog.confirm-dialog::backdrop{background:rgba(4,7,10,.6);backdrop-filter:blur(3px)}
body dialog.confirm-dialog .confirm-icon{
  width:46px;height:46px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:rgba(233,184,114,.14);color:var(--n-warn);font:800 22px Manrope,sans-serif}
body dialog.confirm-dialog h3{font:800 19px Manrope,sans-serif;margin:0 0 6px;color:var(--n-text)}
body dialog.confirm-dialog p{font-size:14px;line-height:1.55;margin:0 0 22px;color:var(--n-muted)}
body dialog.confirm-dialog .confirm-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
body dialog.confirm-dialog .confirm-actions .btn{min-height:40px;padding:0 16px;font-size:13px;border-radius:10px!important}

@media (max-width:600px){
  body .settings-dialog .settings-modal-head{padding:22px 60px 14px 18px}
  body .settings-dialog .settings-fields{padding:6px 18px 18px}
  body .settings-dialog .settings-modal-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}
  body .settings-dialog .settings-modal-footer>small{flex-basis:100%}
  body .settings-dialog .settings-modal-footer .btn{flex:1}
  body .settings-dialog .duration-control{grid-template-columns:minmax(0,1fr) 120px}
}

/* ---------- Staff workspace (hosts the AI approvals and server prompts) ---------- */
body .staff-nav{background:var(--n-surface);border:1px solid var(--n-line);border-radius:14px;padding:10px}
body .staff-nav>strong{font:800 11px 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--n-dim)}
body .staff-nav>button{border-radius:9px;color:var(--n-muted);font-weight:600;padding:10px 12px;transition:background .15s,color .15s}
body .staff-nav>button:hover{background:rgba(255,255,255,.07);color:var(--n-text)}
body .staff-nav>button.active{background:rgba(241,207,159,.14);color:var(--n-accent)}
body .staff-current{border-top-color:var(--n-line)}
body .staff-panel{background:var(--n-surface);border:1px solid var(--n-line);border-left:1px solid var(--n-line);border-radius:14px}
body .staff-panel>h2{font:800 11px 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--n-muted);border-bottom:1px solid var(--n-line)}
body .staff-workspace a{color:var(--n-accent)}
body .staff-stats>div,body .staff-level{background:rgba(255,255,255,.04);border:1px solid var(--n-line);border-radius:12px}
body .staff-stats strong{color:var(--n-accent)}

/* ==========================================================================
   v23 · Bot Management (staff panel) in the Midnight Street theme
   ========================================================================== */
body .staff-page-head{margin-bottom:22px}
body .staff-page-head h1{margin:0 0 6px}
body .staff-workspace{grid-template-columns:230px minmax(0,1fr);gap:22px}
body .staff-nav{top:88px;gap:3px;padding:12px}
body .staff-nav>strong{padding:8px 10px 10px}
body .staff-nav>button{display:block;width:100%;font-size:14px;border:0}
body .staff-current{display:grid;gap:8px;margin-top:12px;padding:14px 8px 4px}
body .staff-current small{font-size:12px;color:var(--n-dim)}
body .staff-content{gap:16px}
body .staff-panel{overflow:hidden}
body .staff-panel>h2{padding:15px 20px;margin:0;font-size:11px}
body .staff-panel-body{padding:20px}
body .staff-panel-body p{font-size:14px;color:var(--n-muted);line-height:1.65}
body .staff-panel-body p:first-child{margin-top:0}

/* Role badges */
body .staff-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font:800 10px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.14)}
body .staff-badge.role-owner{background:linear-gradient(135deg,#d94e70,#a9284a)}
body .staff-badge.role-root{background:linear-gradient(135deg,#e7b36e,#8f6a37);color:#1c1408}
body .staff-badge.role-sys{background:linear-gradient(135deg,#4872a1,#15758d)}
body .staff-badge.role-compliance{background:linear-gradient(135deg,#ca55a6,#942d74)}
body .staff-badge.role-sudo{background:linear-gradient(135deg,#d14f9b,#9d2f70)}
body .staff-badge.role-prospect{background:linear-gradient(135deg,#e1bc28,#b38a0b);color:#17130a}
body .staff-badge.role-manager,body .staff-badge.role-auditor{background:linear-gradient(135deg,#687580,#445b6f)}

/* Stat tiles and access-level cards */
body .staff-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body .staff-stats>div{padding:20px 12px;text-align:left;gap:6px}
body .staff-stats strong{font:800 26px Manrope,sans-serif;color:var(--n-text)}
body .staff-stats small{margin:0;font-size:12px;color:var(--n-muted)}
body .staff-level{padding:14px 16px;margin:10px 0}
body .staff-level p{margin:8px 0 0;font-size:13px}
body .staff-level code{font-size:11px;color:var(--n-dim)!important;font-weight:500}

/* Tables */
body .staff-table-wrap{border:1px solid var(--n-line);border-radius:12px;background:rgba(7,12,17,.35)}
body .staff-table{font-size:13px}
body .staff-table th{padding:12px 14px;font:800 10px 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--n-dim);background:rgba(255,255,255,.03);border-bottom:1px solid var(--n-line)}
body .staff-table td{padding:12px 14px;border-bottom:1px solid var(--n-line);color:var(--n-text)}
body .staff-table tbody tr:last-child td{border-bottom:0}
body .staff-table tbody tr:hover{background:rgba(255,255,255,.035)}
body .staff-table .server-title{gap:10px;margin:0;min-height:0}
body .staff-table .guild-avatar{width:34px;height:34px;min-width:34px;border-radius:10px}
body .staff-link{padding:0;color:var(--n-text);font:700 14px 'DM Sans',sans-serif;border-radius:6px}
body .staff-link:hover{color:var(--n-accent);text-decoration:underline;text-underline-offset:3px}
body .staff-table .btn{min-height:34px;padding:0 12px;font-size:12px;white-space:nowrap}
body .staff-table .btn+.btn{margin-left:6px}
body .library-level-\-1{background:rgba(140,197,162,.07)}
body .library-level-1{background:rgba(233,184,114,.07)}
body .library-level-2{background:rgba(226,154,151,.09)}
body .library-level-\-1:hover,body .library-level-1:hover,body .library-level-2:hover{background:rgba(255,255,255,.05)}

/* Forms and filters */
body .staff-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
body .staff-form>input,body .staff-form>select{flex:1;min-width:160px;min-height:42px;margin:0}
body .staff-form textarea{width:100%;min-height:96px;margin:0}
body .staff-form .btn{min-height:42px;padding:0 18px}
body .staff-panel-body>input[type=search],body .staff-panel-body>input:not([type=checkbox]){width:100%;min-height:44px;margin:0 0 4px}
body .staff-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
body .staff-filters label{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--n-line);font-size:13px;font-weight:600;color:var(--n-muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
body .staff-filters label:hover{background:rgba(255,255,255,.08);color:var(--n-text)}
body .staff-filters label:has(input:checked){background:rgba(241,207,159,.12);border-color:rgba(241,207,159,.35);color:var(--n-accent)}
body .staff-filters input{width:16px;height:16px;margin:0}
body .staff-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--n-line)}
body .staff-row:last-of-type{border-bottom:0}
body .staff-row>.btn{margin-left:auto;min-height:34px;font-size:12px}
body .staff-row code{font-size:13px}

/* Server details popup (opened from the Servers tab) */
body dialog:not(.settings-dialog):not(.confirm-dialog):not(.uai-dialog) .staff-level{background:rgba(255,255,255,.04);border:1px solid var(--n-line);border-radius:12px}
body dialog:not(.settings-dialog):not(.confirm-dialog):not(.uai-dialog) h3{margin:22px 0 8px;font:800 12px 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--n-dim)}
body dialog:not(.settings-dialog):not(.confirm-dialog):not(.uai-dialog) .server-title{min-height:0;margin:0 44px 8px 0}
body dialog:not(.settings-dialog):not(.confirm-dialog):not(.uai-dialog) .server-title h2{margin:0}

@media(max-width:800px){
  body .staff-workspace{grid-template-columns:1fr;gap:14px}
  body .staff-nav{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  body .staff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .staff-panel-body{padding:16px}
}

/* Resource searches must override the themed row display rules. */
body .settings-dialog .resource-picker [data-resource-name][hidden],
body .settings-dialog .resource-picker .resource-option-group[hidden]{display:none!important}

/* ==========================================================================
   v24 · Bot Management — grouped navigation, sectioned panels, tidy data
   ========================================================================== */

/* ---------- Page heading ---------- */
body .staff-page-head{margin-bottom:24px}
body .staff-page-head h1{margin:0 0 8px}
body .staff-page-head p{margin:0;font-size:15px;color:var(--n-muted);max-width:64ch}

/* ---------- Sidebar: labelled groups, icons, accent active state ---------- */
body .staff-nav{padding:12px}
body .staff-nav>strong{padding:6px 10px 8px;letter-spacing:.16em}
body .staff-nav-group{margin:16px 0 5px;padding:0 10px;font:800 10px/1.3 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--n-dim)}
body .staff-nav>strong+.staff-nav-group{margin-top:6px}
body .staff-nav>button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--n-muted);font-size:14px;font-weight:600;text-align:left;transition:background .15s,color .15s,box-shadow .15s}
body .staff-nav>button span{min-width:0;overflow-wrap:anywhere}
body .staff-nav-ico{flex:none;width:18px;font-style:normal;font-size:14px;text-align:center;color:var(--n-dim);transition:color .15s}
body .staff-nav>button:hover{background:rgba(255,255,255,.06);color:var(--n-text)}
body .staff-nav>button:hover .staff-nav-ico{color:var(--n-accent)}
body .staff-nav>button.active{background:rgba(241,207,159,.13);color:var(--n-accent);box-shadow:inset 2px 0 0 var(--n-accent)}
body .staff-nav>button.active .staff-nav-ico{color:var(--n-accent)}
body .staff-current{margin-top:14px;padding:14px 10px 4px;border-top:1px solid var(--n-line)}
body .staff-current small{font-size:12px;color:var(--n-dim);overflow-wrap:anywhere}

/* ---------- Panels: one head style, optional count chip ---------- */
body .staff-panel{border-radius:14px}
body .staff-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--n-line)}
body .staff-panel-head h2{margin:0;font:800 11px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--n-muted)}
body .staff-count{flex:none;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--n-line);font:700 11px 'DM Sans',sans-serif;letter-spacing:.06em;color:var(--n-muted)}
body .staff-panel-body{padding:20px}
body .staff-panel-body p{margin:0 0 14px;font-size:14px;color:var(--n-muted);line-height:1.65}
body .staff-panel-body p:last-child{margin-bottom:0}

/* ---------- Home: welcome card ---------- */
body .staff-panel-hero{background:linear-gradient(135deg,rgba(241,207,159,.09),rgba(255,255,255,.02) 55%),var(--n-surface)}
body .staff-hero h2{margin:0 0 8px;font:800 24px/1.25 Manrope,sans-serif;letter-spacing:-.02em}
body .staff-hero p{max-width:64ch}
body .staff-home-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--n-line)}
body .staff-home-meta small{font-size:12px;color:var(--n-dim);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
body .staff-home-meta a{font-size:13px;font-weight:700;color:var(--n-accent);text-decoration:none}
body .staff-home-meta a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Role badges: muted pills matching the directory ---------- */
body .staff-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--n-line-strong);background:rgba(255,255,255,.06);color:var(--n-muted);font:800 9.5px/1.5 'DM Sans',sans-serif;letter-spacing:.1em}
body .staff-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
body .staff-badge.role-owner{background:rgba(226,154,151,.12);border-color:rgba(226,154,151,.32);color:#f0b0ad}
body .staff-badge.role-root{background:rgba(241,207,159,.12);border-color:rgba(241,207,159,.34);color:var(--n-accent)}
body .staff-badge.role-prospect{background:rgba(233,184,114,.1);border-color:rgba(233,184,114,.28);color:var(--n-warn)}
body .staff-badge.role-sudo{background:rgba(215,154,196,.1);border-color:rgba(215,154,196,.3);color:#e0b2ce}
body .staff-badge.role-compliance{background:rgba(143,169,200,.1);border-color:rgba(143,169,200,.3);color:#a8c3df}
body .staff-badge.role-sys{background:rgba(140,197,162,.1);border-color:rgba(140,197,162,.3);color:#9ed2b1}
body .staff-badge.role-manager,body .staff-badge.role-auditor{background:rgba(255,255,255,.07);border-color:var(--n-line-strong);color:var(--n-muted)}

/* ---------- Stat tiles: label above value ---------- */
body .staff-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body .staff-stats>div{display:grid;gap:8px;align-content:start;padding:16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--n-line);text-align:left}
body .staff-stats small{order:-1;margin:0;font:800 10px/1.3 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--n-dim)}
body .staff-stats strong{font:800 25px/1.1 Manrope,sans-serif;color:var(--n-text)}

/* ---------- Access levels: two-column role grid ---------- */
body .staff-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
body .staff-level{display:grid;gap:8px;justify-items:start;padding:14px 16px;margin:0;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--n-line)}
body .staff-level p{margin:0;font-size:13px;color:var(--n-muted);line-height:1.6}
body .staff-level code{font-size:11px;color:var(--n-dim)!important}
body .srv-dialog-section .staff-level{margin:0 0 8px}
body dialog .staff-level .btn{margin-top:4px;min-height:34px;font-size:12.5px}

/* ---------- Status pills and level tags ---------- */
body .staff-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid transparent;font:800 10px/1 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
body .staff-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
body .staff-pill.is-ok{color:var(--n-ok);background:rgba(140,197,162,.12);border-color:rgba(140,197,162,.3)}
body .staff-pill.is-bad{color:var(--n-bad);background:rgba(226,154,151,.1);border-color:rgba(226,154,151,.3)}
body .staff-pill.is-warn{color:var(--n-warn);background:rgba(233,184,114,.12);border-color:rgba(233,184,114,.3)}
body .staff-level-tag{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font:800 11px/1 'DM Sans',sans-serif;letter-spacing:.06em;white-space:nowrap}
body .staff-level-tag[data-level="-1"]{color:var(--n-ok);background:rgba(140,197,162,.12);border:1px solid rgba(140,197,162,.3)}
body .staff-level-tag[data-level="0"]{color:var(--n-muted);background:rgba(255,255,255,.06);border:1px solid var(--n-line)}
body .staff-level-tag[data-level="1"]{color:var(--n-warn);background:rgba(233,184,114,.12);border:1px solid rgba(233,184,114,.3)}
body .staff-level-tag[data-level="2"]{color:var(--n-bad);background:rgba(226,154,151,.1);border:1px solid rgba(226,154,151,.3)}
body .staff-install{font-size:13px;font-weight:700;color:var(--n-accent);text-decoration:none;white-space:nowrap}
body .staff-install:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Toolbars, filters and forms ---------- */
body .staff-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
body .staff-toolbar>input{flex:1 1 220px;min-width:0;min-height:44px;margin:0}
body .staff-toolbar .staff-filters{margin-top:0}
body .staff-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:0;padding:14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--n-line)}
body .staff-form>input,body .staff-form>select{flex:1 1 170px;min-width:150px;min-height:42px;margin:0}
body .staff-form>textarea{width:100%;min-height:96px;margin:0}
body .staff-form>.btn{min-height:42px;padding:0 18px}
body .staff-workspace .btn.primary{background:var(--n-accent);border-color:var(--n-accent);color:var(--n-ink)}
body .staff-workspace .btn.primary:hover{background:var(--n-accent-hover);border-color:var(--n-accent-hover);color:var(--n-ink)}

/* ---------- Library level legend ---------- */
body .staff-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
body .staff-legend-item{display:grid;gap:6px;align-content:start;padding:13px 14px;border-radius:12px;border:1px solid var(--n-line);background:rgba(255,255,255,.04)}
body .staff-legend-item b{font:800 11px 'DM Sans',sans-serif;letter-spacing:.1em;color:var(--n-dim)}
body .staff-legend-item strong{font-size:14px;color:var(--n-text)}
body .staff-legend-item span{font-size:12px;line-height:1.5;color:var(--n-muted)}
body .staff-legend-item[data-level="-1"]{border-color:rgba(140,197,162,.3);background:rgba(140,197,162,.07)}
body .staff-legend-item[data-level="-1"] b,body .staff-legend-item[data-level="-1"] strong{color:var(--n-ok)}
body .staff-legend-item[data-level="1"]{border-color:rgba(233,184,114,.3);background:rgba(233,184,114,.07)}
body .staff-legend-item[data-level="1"] b,body .staff-legend-item[data-level="1"] strong{color:var(--n-warn)}
body .staff-legend-item[data-level="2"]{border-color:rgba(226,154,151,.3);background:rgba(226,154,151,.08)}
body .staff-legend-item[data-level="2"] b,body .staff-legend-item[data-level="2"] strong{color:var(--n-bad)}

/* ---------- Pending requests ---------- */
body .staff-request{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;margin-top:10px;border:1px solid var(--n-line);border-radius:12px;background:rgba(255,255,255,.04)}
body .staff-request:first-child{margin-top:0}
body .staff-request-main{display:grid;gap:6px;min-width:0}
body .staff-request-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
body .staff-request-head strong{font-size:14px;color:var(--n-text)}
body .staff-request-head code{font-size:12px}
body .staff-request-main p{margin:0;font-size:13px;color:var(--n-muted);line-height:1.55;overflow-wrap:anywhere}
body .staff-request-actions{display:flex;flex:none;gap:8px}
body .staff-request-actions .btn{min-height:36px;padding:0 14px;font-size:12.5px}

/* ---------- Assigned staff rows ---------- */
body .staff-rows{display:grid;gap:8px}
body .staff-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:0;border:1px solid var(--n-line);border-radius:12px;background:rgba(255,255,255,.035)}
body .staff-row code{font-size:13px}
body .staff-row-note{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n-dim)}
body .staff-row>.btn{margin-left:auto;min-height:34px;padding:0 14px;font-size:12.5px}

/* ---------- Infrastructure links ---------- */
body .staff-linklist{display:grid;gap:8px}
body .staff-linklist a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;border:1px solid var(--n-line);border-radius:12px;background:rgba(255,255,255,.035);color:var(--n-text);text-decoration:none;transition:background .15s,border-color .15s}
body .staff-linklist a:hover{background:rgba(255,255,255,.07);border-color:var(--n-line-strong)}
body .staff-linklist a>span{display:grid;gap:3px;min-width:0}
body .staff-linklist strong{font-size:14px;color:var(--n-text)}
body .staff-linklist small{font-size:12px;color:var(--n-dim);overflow-wrap:anywhere}
body .staff-linklist b{flex:none;font-size:14px;color:var(--n-accent)}

/* ---------- Empty states ---------- */
body .staff-empty{display:grid;justify-items:center;gap:8px;padding:38px 20px;text-align:center}
body .staff-empty>span{font-size:20px;color:var(--n-accent);opacity:.8}
body .staff-empty strong{font-size:14px;color:var(--n-text)}
body .staff-empty small{font-size:12.5px;color:var(--n-dim);max-width:46ch;line-height:1.6}

/* ---------- Smaller screens ---------- */
@media(max-width:1100px){
  body .staff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .staff-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  body .staff-page-head{margin-bottom:16px}
  body .staff-page-head h1{font-size:32px}
  body .staff-workspace{grid-template-columns:1fr;gap:14px}
  body .staff-nav{position:static;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  body .staff-nav::-webkit-scrollbar{display:none}
  body .staff-nav>strong,body .staff-nav-group,body .staff-current{display:none}
  body .staff-nav>button{flex:0 0 auto;width:auto;min-height:40px;padding:8px 12px;white-space:nowrap;border:1px solid transparent}
  body .staff-nav>button.active{box-shadow:none;border-color:rgba(241,207,159,.28);background:rgba(241,207,159,.14)}
  body .staff-panel-head{padding:13px 16px}
  body .staff-panel-body{padding:16px}
  body .staff-levels{grid-template-columns:1fr}
  body .staff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .staff-request{flex-direction:column;align-items:stretch}
  body .staff-request-actions{width:100%}
  body .staff-request-actions .btn{flex:1}
  body .staff-form{padding:12px}
  body .staff-form>input,body .staff-form>select{flex:1 1 100%}
  body .staff-form>.btn{flex:1;min-height:44px}
}
@media(max-width:560px){
  body .staff-legend{grid-template-columns:1fr}
  body .staff-stats{grid-template-columns:1fr}
  body .staff-hero h2{font-size:20px}
  body .srv-filter-row{padding:12px 16px 14px;gap:6px}
  body .srv-chip{min-height:30px;padding:5px 9px;gap:6px;font-size:11.5px}
  body .srv-chip b{min-width:16px;padding:2px 5px;font-size:9.5px}
}

/* ==========================================================================
   Server directory · Bot management → Servers
   Search-first directory with staff badges. Everything is scoped to .srv-*
   so it can be lifted or reused without touching the rest of the staff panel.
   ========================================================================== */
body .srv-panel{background:var(--n-surface);border:1px solid var(--n-line);border-radius:16px;overflow:hidden}
body .srv-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;
  border-bottom:1px solid var(--n-line);
  background:linear-gradient(115deg,rgba(241,207,159,.08),rgba(255,255,255,.015) 46%,transparent),rgba(255,255,255,.01)}
body .srv-panel-title{min-width:0}
body .srv-kicker{display:block;margin:0 0 8px;font:800 10px/1 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--n-accent)}
body .srv-panel-title h2{margin:0 0 5px;font:800 24px/1.2 Manrope,sans-serif;letter-spacing:-.02em;color:var(--n-text)}
body .srv-panel-title p{margin:0;max-width:62ch;font-size:13px;line-height:1.55;color:var(--n-muted)}
body .srv-panel-stats{display:flex;gap:8px;flex:none}
body .srv-panel-stats>div{
  min-width:92px;padding:9px 14px;text-align:right;
  border:1px solid var(--n-line);border-radius:12px;background:rgba(7,12,17,.28)}
body .srv-panel-stats strong{display:block;font:800 19px/1.1 Manrope,sans-serif;color:var(--n-text)}
body .srv-panel-stats small{margin-top:4px;font:800 9px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--n-dim)}

/* Search + sort */
body .srv-controls{display:flex;align-items:center;gap:10px;padding:18px 24px 0}
body .srv-search{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:46px;margin:0;
  padding:0 10px 0 14px;border:1px solid var(--n-line-strong);border-radius:12px;
  background:rgba(7,12,17,.32);color:var(--n-dim);font-weight:400;
  transition:border-color .15s,box-shadow .15s,background .15s}
body .srv-search:hover{background:rgba(7,12,17,.42)}
body .srv-search:focus-within{border-color:rgba(241,207,159,.55);box-shadow:0 0 0 3px rgba(241,207,159,.11);background:rgba(7,12,17,.5)}
body .srv-search svg{flex:none;color:var(--n-dim)}
body .srv-search:focus-within svg{color:var(--n-accent)}
body .srv-search input::-webkit-search-cancel-button{display:none}
body .srv-search input,
body .srv-search input:not([type=checkbox]):not([type=radio]){
  flex:1;min-width:0;width:auto;min-height:44px;margin:0;padding:0;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;outline:none!important;
  color:var(--n-text);font-size:14px}
body .srv-search-clear{
  flex:none;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;
  background:rgba(255,255,255,.07);color:var(--n-muted);font-size:17px;line-height:1}
body .srv-search-clear:hover{background:rgba(255,255,255,.13);color:var(--n-text)}
body .srv-search-clear[hidden]{display:none}
body .srv-sort{
  display:flex;align-items:center;gap:9px;flex:none;min-height:46px;margin:0;padding:0 12px;
  border:1px solid var(--n-line);border-radius:12px;background:rgba(255,255,255,.03);
  font-size:12px;font-weight:700;color:var(--n-dim)}
body .srv-sort>span{font:800 9px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--n-dim)}
body .srv-sort select,
body .srv-sort select:not([type=checkbox]){
  width:auto;min-height:34px;margin:0;padding:0 2px;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:var(--n-text);
  font-size:13px;font-weight:700;cursor:pointer}
body .srv-sort select:focus{outline:none;box-shadow:none}

/* Filter chips */
body .srv-filter-row{display:flex;flex-wrap:wrap;gap:7px;padding:14px 24px 16px;border-bottom:1px solid var(--n-line)}
body .srv-chip{
  --chip:#8fa9c8;display:inline-flex;align-items:center;gap:7px;
  min-height:32px;padding:6px 10px;border:1px solid var(--n-line);border-radius:999px;
  background:rgba(255,255,255,.035);color:var(--n-muted);font-size:12px;font-weight:650;
  transition:background .15s,border-color .15s,color .15s}
body .srv-chip:hover{background:rgba(255,255,255,.07);border-color:var(--n-line-strong);color:var(--n-text)}
body .srv-chip-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--chip);box-shadow:0 0 0 3px color-mix(in srgb,var(--chip) 16%,transparent)}
body .srv-chip b{min-width:18px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.06);font:800 10px/1.2 'DM Sans',sans-serif;color:var(--n-dim);text-align:center}
body .srv-chip.is-on{background:rgba(241,207,159,.11);border-color:rgba(241,207,159,.4);color:var(--n-text)}
body .srv-chip.is-on b{background:rgba(241,207,159,.17);color:var(--n-accent)}
body .srv-chip.is-bypass{--chip:#9db8d6}
body .srv-chip.is-staffBypass{--chip:#c2afe4}
body .srv-chip.is-testing{--chip:#e9b872}
body .srv-chip.is-passedTrial{--chip:#8cc5a2}
body .srv-chip.is-mmDisabled{--chip:#aab6c2}
body .srv-chip.is-strike{--chip:#e29a97}
body .srv-chip.is-compliance{--chip:#d9a5c8}
body .srv-chip.is-under1k{--chip:#8fa9c8}
body .srv-chip.is-disabled{--chip:#e29a97}
body .srv-chip.is-on.is-strike,body .srv-chip.is-on.is-disabled{background:rgba(226,154,151,.3);border-color:rgba(226,154,151,.55);color:#ffd6d3}
body .srv-chip.is-on.is-strike b,body .srv-chip.is-on.is-disabled b{background:rgba(226,154,151,.3);color:#ffd6d3}

/* Result strip */
body .srv-results{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 24px;border-bottom:1px solid var(--n-line);background:rgba(255,255,255,.022);font-size:12px;color:var(--n-dim)}
body .srv-results strong{color:var(--n-text);font-weight:800}
body .srv-clear{padding:3px 0;border:0;background:none;color:var(--n-accent);font-size:12px;font-weight:700}
body .srv-clear:hover{text-decoration:underline;text-underline-offset:3px}
body .srv-clear[hidden]{display:none}
body .srv-results-hint{margin-left:auto;font-size:11px;color:var(--n-dim)}
body .srv-results .staff-empty{grid-column:1/-1}

/* Server rows */
body .srv-list{display:grid}
body .srv-row{
  display:grid;grid-template-columns:26px 46px minmax(0,1fr) 104px 106px;gap:14px;align-items:center;
  padding:14px 24px;border-bottom:1px solid var(--n-line);cursor:pointer;
  transition:background .15s,box-shadow .15s}
body .srv-row:last-child{border-bottom:0}
body .srv-row:hover{background:rgba(255,255,255,.042);box-shadow:inset 2px 0 0 var(--n-accent)}
body .srv-rank{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;color:#55636f;text-align:right}
body .srv-avatar{display:flex;align-items:center}
body .srv-avatar .guild-avatar{width:42px;height:42px;min-width:42px;border-radius:11px;font-size:17px}
body .srv-identity{min-width:0;display:grid;gap:5px}
body .srv-name-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
body .srv-name{
  min-width:0;max-width:100%;padding:0;border:0;background:none;color:var(--n-text);
  font:700 14.5px/1.35 'DM Sans',sans-serif;text-align:left;cursor:pointer;overflow-wrap:anywhere}
body .srv-name:hover{color:var(--n-accent);text-decoration:underline;text-underline-offset:3px}
body .srv-access{
  display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px;
  border:1px solid rgba(140,197,162,.26);background:rgba(140,197,162,.1);
  font:800 8.5px/1.4 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--n-ok);white-space:nowrap}
body .srv-access::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
body .srv-access.is-off{border-color:rgba(226,154,151,.3);background:rgba(226,154,151,.09);color:var(--n-bad)}
body .srv-badges{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
body .srv-badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:6px;
  border:1px solid var(--srv-line,rgba(255,255,255,.12));background:var(--srv-bg,rgba(255,255,255,.05));
  color:var(--srv-fg,var(--n-muted));font:700 10px/1.5 'DM Sans',sans-serif;letter-spacing:.03em;white-space:nowrap}
body .srv-badge::before{content:"";width:4px;height:4px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px rgba(255,255,255,.04)}
body .srv-badge.is-bypass{--srv-fg:#a8c3df;--srv-bg:rgba(143,169,200,.13);--srv-line:rgba(143,169,200,.32)}
body .srv-badge.is-staffBypass{--srv-fg:#c9b8e9;--srv-bg:rgba(179,157,219,.14);--srv-line:rgba(179,157,219,.34)}
body .srv-badge.is-testing{--srv-fg:#ecc183;--srv-bg:rgba(233,184,114,.13);--srv-line:rgba(233,184,114,.32)}
body .srv-badge.is-passedTrial{--srv-fg:#9ed2b1;--srv-bg:rgba(140,197,162,.12);--srv-line:rgba(140,197,162,.3)}
body .srv-badge.is-mmDisabled{--srv-fg:#b3bec9;--srv-bg:rgba(255,255,255,.06);--srv-line:rgba(205,220,235,.16)}
body .srv-badge.is-strike{--srv-fg:#f0b0ad;--srv-bg:rgba(226,154,151,.13);--srv-line:rgba(226,154,151,.38)}
body .srv-badge.is-compliance{--srv-fg:#e0b2ce;--srv-bg:rgba(215,154,196,.12);--srv-line:rgba(215,154,196,.32)}
body .srv-badge.is-small{--srv-fg:#9aa7b3;--srv-bg:rgba(255,255,255,.04);--srv-line:rgba(205,220,235,.12)}
body .srv-badge.is-none{--srv-fg:var(--n-dim);--srv-bg:transparent;--srv-line:var(--n-line)}
body .srv-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--n-dim)}
body .srv-meta code{font:600 10.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:var(--n-dim)!important}
body .srv-meta span{position:relative}
body .srv-meta span::before{content:"·";margin-right:12px;color:#495662}
body .srv-members{text-align:right}
body .srv-members strong{display:block;font:800 14px/1.2 Manrope,sans-serif;color:var(--n-text)}
body .srv-members small{margin-top:3px;font:800 8.5px/1 'DM Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--n-dim)}
body .srv-actions{text-align:right}
body .srv-open-btn{
  min-height:34px;padding:0 11px;font-size:12px;border-radius:9px!important;
  color:var(--n-muted);background:transparent;border-color:var(--n-line)}
body .srv-open-btn span{margin-left:5px;color:var(--n-dim)}
body .srv-row:hover .srv-open-btn,body .srv-open-btn:focus-visible{
  color:var(--n-accent);border-color:rgba(241,207,159,.42);background:rgba(241,207,159,.08)}
body .srv-row:hover .srv-open-btn span{color:var(--n-accent)}
body .srv-list>.staff-empty{margin:0;padding:46px 20px}

/* Server details dialog */
body .srv-dialog-head .server-title{align-items:flex-start;margin:0}
body .srv-dialog-head .guild-avatar{width:52px;height:52px;border-radius:14px;font-size:21px}
body .srv-dialog-head h2{margin:0 0 5px;font-size:24px;letter-spacing:-.02em}
body .srv-dialog-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body .srv-dialog-meta code{font-size:11px}
body .srv-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
body .srv-dialog-bar .srv-badges{margin:0}
body .srv-settings-btn{flex:none;min-height:34px;padding:0 12px;font-size:12px;border-radius:9px!important}
body .srv-settings-btn span{margin-left:4px;color:var(--n-dim)}
body .srv-settings-btn:hover{color:var(--n-accent);border-color:rgba(241,207,159,.42);background:rgba(241,207,159,.08)}
body .srv-settings-btn:hover span{color:var(--n-accent)}
body .srv-dialog-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 4px}
body .srv-dialog-stats>div{padding:10px 12px;border:1px solid var(--n-line);border-radius:10px;background:rgba(255,255,255,.035)}
body .srv-dialog-stats strong{display:block;font:800 19px/1.1 Manrope,sans-serif;color:var(--n-text)}
body .srv-dialog-stats small{margin-top:3px;font:800 8.5px/1.3 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--n-dim)}
body .srv-dialog-section{margin-top:20px;padding-top:18px;border-top:1px solid var(--n-line)}
body .srv-dialog-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
body .srv-dialog-section-head h3{margin:0;font:800 11px/1.3 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--n-muted)}
body .srv-dialog-section-head small{font-size:11px;color:var(--n-dim)}
body .srv-no-entries{margin:0 0 10px;font-size:13px;color:var(--n-dim)}
body .srv-tag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body .srv-tag-option{
  display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;
  border:1px solid var(--n-line);border-radius:10px;background:rgba(255,255,255,.03);
  color:var(--n-muted);font-weight:400;cursor:pointer;transition:background .15s,border-color .15s}
body .srv-tag-option:hover{background:rgba(255,255,255,.06);border-color:var(--n-line-strong)}
body .srv-tag-option input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--n-accent)}
body .srv-tag-option>span{display:grid;gap:2px;min-width:0}
body .srv-tag-option b{font-size:13px;font-weight:700;color:var(--n-text)}
body .srv-tag-option small{margin:0;font-size:11px;line-height:1.45;color:var(--n-dim);font-weight:400}
body .srv-tag-option:has(input:checked){border-color:rgba(241,207,159,.4);background:rgba(241,207,159,.075)}
body .srv-tag-option:has(input:checked) b{color:var(--n-accent)}
body .srv-tag-option:has(input:disabled){cursor:default;opacity:.62}
body .srv-derived-note{margin:10px 0 0;font-size:11px;line-height:1.55;color:var(--n-dim)}
body .srv-readonly-note{margin:10px 0 0;font-size:12px;color:var(--n-dim)}
body .srv-dialog-actions{display:flex;align-items:center;gap:12px;margin-top:12px}
body .srv-dialog-actions .btn{min-height:36px;padding:0 14px;font-size:12.5px}
body .srv-dialog-actions small{font-size:11.5px;color:var(--n-dim)}
body #dialogContent .staff-form{margin-top:12px}
body #dialogContent .staff-form>.btn{margin-left:auto}

/* Responsive */
@media(max-width:700px){
  body .srv-row{grid-template-columns:26px 44px minmax(0,1fr) auto}
  body .srv-members{display:none}
}
@media(max-width:820px){
  body .srv-panel-head{padding:18px 18px;align-items:flex-start}
  body .srv-panel-stats{display:none}
  body .srv-controls{padding:16px 18px 0}
  body .srv-filter-row{padding:12px 18px 14px}
  body .srv-results{padding:10px 18px}
  body .srv-name{font-size:14px}
  body .srv-dialog-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  body .srv-controls{flex-direction:column;align-items:stretch;padding-top:14px}
  body .srv-sort{justify-content:space-between}
  body .srv-row{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:14px 16px;align-items:start}
  body .srv-rank,body .srv-actions{display:none}
  body .srv-avatar{margin-top:1px}
  body .srv-avatar .guild-avatar{width:38px;height:38px;min-width:38px}
  body .srv-results-hint{display:none}
}
@media(max-width:520px){
  body .srv-panel-title h2{font-size:21px}
  body .srv-panel-title p{font-size:12.5px}
  body .srv-controls{padding-top:14px}
  body .srv-tag-grid{grid-template-columns:1fr}
  body .srv-dialog-head h2{font-size:21px}
  body .srv-dialog-bar{align-items:flex-start;flex-direction:column}
  body .srv-dialog-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  body .srv-dialog-stats>div{padding:9px 10px}
  body .srv-dialog-stats strong{font-size:17px}
  body .srv-dialog-stats small{font-size:8px;letter-spacing:.05em}
  body .srv-dialog-actions{flex-wrap:wrap}
}
/* ==========================================================================
   Flat staff workspace
   Neutral dark surfaces, cream accent, square labels, no decoration.
   The site header is deliberately left as-is.
   ========================================================================== */

html,body:not([data-surface=builder]){background:#131a21!important}
body:not([data-surface=builder]){background:transparent!important;color:#e6e6e6;font:15px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body:not([data-surface=builder]) :not(code):not(pre):not(kbd):not(samp){font-family:inherit!important}
::selection{background:rgba(241,209,167,.3)}

/* ---------- Surfaces ---------- */
body:not([data-surface=builder]) .card,body:not([data-surface=builder]) .panel,body:not([data-surface=builder]) .metric,body:not([data-surface=builder]) .staff-panel,body:not([data-surface=builder]) .srv-panel,body:not([data-surface=builder]) .server-card,
body:not([data-surface=builder]) .staff-level,body:not([data-surface=builder]) .staff-request,body:not([data-surface=builder]) .staff-linklist a,body:not([data-surface=builder]) .staff-row,body:not([data-surface=builder]) .staff-form,
body:not([data-surface=builder]) .srv-tag-option,body:not([data-surface=builder]) .srv-dialog-stats>div,body:not([data-surface=builder]) .srv-panel-stats>div,
body:not([data-surface=builder]) .staff-nav,body:not([data-surface=builder]) .login-card,body:not([data-surface=builder]) .setting-card,body:not([data-surface=builder]) .settings-group>details,
body:not([data-surface=builder]) .staff-stats>div,body:not([data-surface=builder]) .staff-legend-item,body:not([data-surface=builder]) .repeat-item,body:not([data-surface=builder]) .edit-group{
  background:#1c1c1c!important;border:1px solid #343434!important;border-radius:4px!important;box-shadow:none!important}
body:not([data-surface=builder]) .settings-grid .setting-card{background:#1c1c1c!important;border-radius:4px!important;box-shadow:none!important}
body:not([data-surface=builder]) .staff-panel-hero,body:not([data-surface=builder]) .hero,body:not([data-surface=builder]) .srv-panel-head,body:not([data-surface=builder]) .panel-head,body:not([data-surface=builder]) .staff-panel-head{
  background:#1f1f1f!important;border-color:#343434!important;border-radius:0!important;box-shadow:none!important}
body:not([data-surface=builder]) .staff-panel-hero{border-radius:4px!important}
body:not([data-surface=builder]) footer{background:#1c1c1c!important;border:1px solid #343434!important;border-radius:4px!important;box-shadow:none!important}
body:not([data-surface=builder]) .note{background:#242424!important;border:1px solid #343434!important;border-left:3px solid #f1d1a7!important;border-radius:4px!important}
body:not([data-surface=builder]) .eyebrow{color:#7d7d7d!important;font-size:10px;letter-spacing:.14em}

/* ---------- Bigger desktop workspace ---------- */
body:not([data-surface=builder]) main{max-width:1840px;padding:36px 40px}
body:not([data-surface=builder]) .staff-page-head h1{font-size:30px!important}
body:not([data-surface=builder]) .staff-page-head p{font-size:15px!important;line-height:1.6!important}
body:not([data-surface=builder]) p{font-size:15px!important;line-height:1.6!important}
body:not([data-surface=builder]) .staff-workspace{grid-template-columns:220px minmax(0,1fr);gap:24px}
body:not([data-surface=builder]) .staff-content{gap:16px}
body:not([data-surface=builder]) .staff-panel-body:not([data-surface=builder]){padding:18px 20px}
body:not([data-surface=builder]) .staff-panel-head{padding:12px 20px}
body:not([data-surface=builder]) .staff-nav{top:88px;padding:12px}
body:not([data-surface=builder]) .staff-nav>button{min-height:38px;font-size:14px}
body:not([data-surface=builder]) .staff-current small{font-size:12px}

/* ---------- Headings ---------- */
body:not([data-surface=builder]) h1{font:700 30px/1.2 Inter,sans-serif!important;letter-spacing:-.02em!important;color:#ededed!important}
body:not([data-surface=builder]) h2{font:600 19px/1.3 Inter,sans-serif!important;letter-spacing:-.01em!important;color:#ededed!important}
body:not([data-surface=builder]) h3{font:600 14px/1.3 Inter,sans-serif!important;color:#ededed!important}
body:not([data-surface=builder]) .staff-panel-head h2,body:not([data-surface=builder]) .staff-panel>h2{
  font:700 11px/1.4 Inter,sans-serif!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;color:#8a8a8a!important}
body:not([data-surface=builder]) .srv-panel-title h2{font:600 21px/1.3 Inter,sans-serif!important;color:#ededed!important}

/* ---------- Sidebar ---------- */
body:not([data-surface=builder]) .staff-nav>button{background:transparent!important;color:#a8a8a8!important;border-radius:4px!important;font-weight:500!important}
body:not([data-surface=builder]) .staff-nav>button:hover{background:#262626!important;color:#ededed!important}
body:not([data-surface=builder]) .staff-nav>button.active,
body:not([data-surface=builder]) .staff-nav>button.active:hover{background:#f1d1a7!important;color:#20272e!important;font-weight:600!important;box-shadow:none!important}
body:not([data-surface=builder]) .staff-nav-group{color:#6f6f6f!important}
body:not([data-surface=builder]) .staff-current{border-top-color:#343434!important}

/* ---------- Buttons ---------- */
body:not([data-surface=builder]) .btn,body:not([data-surface=builder]) .srv-open-btn,body:not([data-surface=builder]) .srv-settings-btn{
  background:#262626!important;border:1px solid #404040!important;border-radius:4px!important;
  color:#e6e6e6!important;font-weight:500!important;box-shadow:none!important}
body:not([data-surface=builder]) .btn:hover,body:not([data-surface=builder]) .srv-open-btn:hover,body:not([data-surface=builder]) .srv-settings-btn:hover{
  background:#303030!important;border-color:#525252!important;color:#ffffff!important;filter:none!important}
body:not([data-surface=builder]) .btn.primary,body:not([data-surface=builder]) .staff-workspace .btn.primary,body:not([data-surface=builder]) .srv-row:hover .srv-open-btn{
  background:#f1d1a7!important;border-color:#f1d1a7!important;color:#20272e!important;font-weight:600!important;box-shadow:none!important}
body:not([data-surface=builder]) .btn.primary:hover,body:not([data-surface=builder]) .staff-workspace .btn.primary:hover{background:#f7dcb9!important;border-color:#f7dcb9!important;color:#20272e!important}
body:not([data-surface=builder]) .btn.danger{color:#e79b9b!important}
body:not([data-surface=builder]) .btn:disabled{opacity:.45!important}

/* ---------- Inputs ---------- */
body:not([data-surface=builder]) input,body:not([data-surface=builder]) textarea,body:not([data-surface=builder]) select{background:#242424!important;border:1px solid #3a3a3a!important;border-radius:4px!important;color:#e8e8e8!important}
body:not([data-surface=builder]) input:focus,body:not([data-surface=builder]) textarea:focus,body:not([data-surface=builder]) select:focus{border-color:#f1d1a7!important;box-shadow:none!important;outline:none!important}
body:not([data-surface=builder]) .srv-search,body:not([data-surface=builder]) .srv-sort{background:#242424!important;border:1px solid #3a3a3a!important;border-radius:4px!important;box-shadow:none!important}
body:not([data-surface=builder]) .srv-search:focus-within{border-color:#f1d1a7!important;box-shadow:none!important;background:#242424!important}
body:not([data-surface=builder]) .srv-search input,body:not([data-surface=builder]) .srv-search input:not([type=checkbox]):not([type=radio]){
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body:not([data-surface=builder]) .srv-sort select,body:not([data-surface=builder]) .srv-sort select:not([type=checkbox]){
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body:not([data-surface=builder]) .srv-search-clear{background:#333333!important;border-radius:3px!important;color:#bdbdbd!important}
body:not([data-surface=builder]) .resource-options input[type=checkbox],body:not([data-surface=builder]) .setting-switch input{background:none!important;border:0!important}

/* ---------- Labels and status marks ---------- */
body:not([data-surface=builder]) .srv-badge,body:not([data-surface=builder]) .srv-access,body:not([data-surface=builder]) .staff-badge,body:not([data-surface=builder]) .staff-pill,body:not([data-surface=builder]) .staff-level-tag,
body:not([data-surface=builder]) .staff-count,body:not([data-surface=builder]) .srv-chip,body:not([data-surface=builder]) .badge,body:not([data-surface=builder]) .pill,body:not([data-surface=builder]) .staff-filters label,body:not([data-surface=builder]) .botbadge{
  border-radius:3px!important;box-shadow:none!important;letter-spacing:.04em!important}
body:not([data-surface=builder]) .srv-badge::before,body:not([data-surface=builder]) .srv-access::before,body:not([data-surface=builder]) .staff-badge::before,
body:not([data-surface=builder]) .staff-pill::before,body:not([data-surface=builder]) .srv-chip-dot{display:none!important}
body:not([data-surface=builder]) .staff-badge{background:#2a2a2a!important;border:1px solid #404040!important;color:#c9c9c9!important;font-weight:600!important}
body:not([data-surface=builder]) .staff-badge.role-owner{background:#4a2c22!important;border-color:#6b4032!important;color:#f3d3b4!important}
body:not([data-surface=builder]) .staff-badge.role-root{background:#3a3323!important;border-color:#5c5136!important;color:#f0dcb6!important}
body:not([data-surface=builder]) .staff-badge.role-sys,body:not([data-surface=builder]) .staff-badge.role-sudo{background:#2a2a2a!important;border-color:#424242!important;color:#cfcfcf!important}
body:not([data-surface=builder]) .staff-badge.role-compliance{background:#2f2530!important;border-color:#473a48!important;color:#dcbcd4!important}
body:not([data-surface=builder]) .staff-badge.role-prospect{background:#2b2b26!important;border-color:#454537!important;color:#d8d2b4!important}
body:not([data-surface=builder]) .staff-pill.is-ok{background:#1f3a2b!important;border-color:#2f5a41!important;color:#9fdcb8!important}
body:not([data-surface=builder]) .staff-pill.is-warn{background:#3a3020!important;border-color:#5a4a2b!important;color:#e8c68c!important}
body:not([data-surface=builder]) .staff-pill.is-bad{background:#3d2222!important;border-color:#5e3232!important;color:#f0b0ad!important}
body:not([data-surface=builder]) .staff-level-tag{background:#2a2a2a!important;border:1px solid #454545!important;color:#d0d0d0!important}
body:not([data-surface=builder]) .staff-level-tag[data-level="-1"]{background:#1f3a2b!important;border-color:#2f5a41!important;color:#9fdcb8!important}
body:not([data-surface=builder]) .staff-level-tag[data-level="1"]{background:#3a3020!important;border-color:#5a4a2b!important;color:#e8c68c!important}
body:not([data-surface=builder]) .staff-level-tag[data-level="2"]{background:#3d2222!important;border-color:#5e3232!important;color:#f0b0ad!important}

/* ---------- Tables ---------- */
body:not([data-surface=builder]) .staff-table{font-size:14px}
body:not([data-surface=builder]) .staff-table th{font:700 10.5px/1.3 Inter,sans-serif!important;letter-spacing:.09em!important;color:#8a8a8a!important}
body:not([data-surface=builder]) .staff-table th,body:not([data-surface=builder]) .staff-table td{padding:13px 14px!important}
body:not([data-surface=builder]) .staff-table-wrap{border:1px solid #343434!important;border-radius:4px!important;background:#1c1c1c!important}
body:not([data-surface=builder]) .staff-link{color:#ededed!important;font-weight:600!important}
body:not([data-surface=builder]) .staff-link:hover{color:#f1d1a7!important}

/* ---------- Server directory ---------- */
body:not([data-surface=builder]) .srv-panel{background:#1c1c1c!important;border:1px solid #343434!important;border-radius:4px!important}
body:not([data-surface=builder]) .srv-kicker{display:none}
body:not([data-surface=builder]) .srv-panel-head{background:#1c1c1c!important;padding:18px 20px!important}
body:not([data-surface=builder]) .srv-panel-stats>div{background:#242424!important;border:1px solid #343434!important;border-radius:4px!important}
body:not([data-surface=builder]) .srv-panel-stats strong{font:600 18px/1.1 Inter,sans-serif!important;color:#f1d1a7!important}
body:not([data-surface=builder]) .srv-panel-stats small{color:#8a8a8a!important;font-weight:500!important;letter-spacing:.06em!important}
body:not([data-surface=builder]) .srv-controls{padding:16px 20px 0!important}
body:not([data-surface=builder]) .srv-filter-row{gap:8px!important;padding:12px 20px 14px!important;border-bottom:1px solid #343434!important}
body:not([data-surface=builder]) .srv-chip{
  background:#242424!important;border:1px solid #3a3a3a!important;border-radius:3px!important;
  color:#b5b5b5!important;font-size:12px!important;font-weight:500!important;min-height:30px!important;padding:5px 9px!important}
body:not([data-surface=builder]) .srv-chip:hover{background:#2e2e2e!important;border-color:#4c4c4c!important;color:#e8e8e8!important}
body:not([data-surface=builder]) .srv-chip.is-on{background:rgba(241,209,167,.12)!important;border-color:#f1d1a7!important;color:#f1d1a7!important}
body:not([data-surface=builder]) .srv-chip b{min-width:0!important;padding:0!important;background:none!important;border-radius:0!important;color:#8a8a8a!important;font-weight:500!important}
body:not([data-surface=builder]) .srv-chip.is-on b{background:none!important;color:#e8d3b4!important}
body:not([data-surface=builder]) .srv-results{padding:9px 20px!important;background:#1c1c1c!important;border-bottom:1px solid #343434!important;color:#8a8a8a!important}
body:not([data-surface=builder]) .srv-results strong{color:#ededed!important;font-weight:600!important}
body:not([data-surface=builder]) .srv-results-hint{color:#6f6f6f!important}
body:not([data-surface=builder]) .srv-clear{color:#f1d1a7!important}
body:not([data-surface=builder]) .srv-row{padding:13px 20px!important;border-bottom:1px solid #2e2e2e!important;background:transparent!important;box-shadow:none!important}
body:not([data-surface=builder]) .srv-row:hover{background:#232323!important;box-shadow:none!important}
body:not([data-surface=builder]) .srv-row:last-child{border-bottom:0!important}
body:not([data-surface=builder]) .srv-rank{color:#6a6a6a!important}
body:not([data-surface=builder]) .srv-avatar .guild-avatar{border-radius:6px!important}
body:not([data-surface=builder]) .srv-name{font:500 15px/1.35 Inter,sans-serif!important;color:#ededed!important}
body:not([data-surface=builder]) .srv-name:hover{color:#f1d1a7!important}
body:not([data-surface=builder]) .srv-access{background:#1f3a2b!important;border:1px solid #2f5a41!important;color:#9fdcb8!important;font-weight:600!important}
body:not([data-surface=builder]) .srv-access.is-off{background:#3d2222!important;border-color:#5e3232!important;color:#f0b0ad!important}
body:not([data-surface=builder]) .srv-badge{background:#2a2a2a!important;border:1px solid #3f3f3f!important;color:#c4c4c4!important;font-weight:500!important}
body:not([data-surface=builder]) .srv-badge.is-bypass{background:#1f2d3a!important;border-color:#33475a!important;color:#b6d3ea!important}
body:not([data-surface=builder]) .srv-badge.is-staffBypass{background:#2b2438!important;border-color:#463a5a!important;color:#d3c1ef!important}
body:not([data-surface=builder]) .srv-badge.is-testing{background:#382f1c!important;border-color:#54462a!important;color:#eccb8e!important}
body:not([data-surface=builder]) .srv-badge.is-passedTrial{background:#1f3a2b!important;border-color:#2f5a41!important;color:#9fdcb8!important}
body:not([data-surface=builder]) .srv-badge.is-mmDisabled{background:#2a2a2a!important;border-color:#424242!important;color:#c2c2c2!important}
body:not([data-surface=builder]) .srv-badge.is-strike{background:#3d2222!important;border-color:#5e3232!important;color:#f0b0ad!important}
body:not([data-surface=builder]) .srv-badge.is-compliance{background:#382531!important;border-color:#573a4b!important;color:#e8b7d2!important}
body:not([data-surface=builder]) .srv-badge.is-small{background:#262626!important;border-color:#3a3a3a!important;color:#b0b0b0!important}
body:not([data-surface=builder]) .srv-badge.is-none{background:transparent!important;border-color:#3a3a3a!important;color:#7d7d7d!important}
body:not([data-surface=builder]) .srv-meta code{color:#7d7d7d!important}
body:not([data-surface=builder]) .srv-members strong{font:600 15px/1.2 Inter,sans-serif!important;color:#ededed!important}
body:not([data-surface=builder]) .srv-members small{color:#7d7d7d!important;font-weight:500!important;letter-spacing:.06em!important}

/* ---------- Dialog ---------- */
body:not([data-surface=builder]) dialog,body:not([data-surface=builder]) .settings-dialog{
  background:#1c1c1c!important;border:1px solid #3a3a3a!important;border-radius:4px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.5)!important;color:#e6e6e6!important}
body:not([data-surface=builder]) dialog::backdrop,body:not([data-surface=builder]) .settings-dialog::backdrop{background:rgba(0,0,0,.62)!important;backdrop-filter:none!important}
body:not([data-surface=builder]) .settings-modal-head,body:not([data-surface=builder]) .settings-dialog .settings-modal-footer{background:#1f1f1f!important;border-color:#343434!important}
body:not([data-surface=builder]) .srv-dialog-head .guild-avatar{border-radius:6px!important}
body:not([data-surface=builder]) .srv-dialog-stats>div{background:#242424!important;border:1px solid #343434!important;border-radius:4px!important}
body:not([data-surface=builder]) .srv-dialog-stats strong{font:600 18px/1.1 Inter,sans-serif!important;color:#f1d1a7!important}
body:not([data-surface=builder]) .srv-dialog-section-head h3{font:600 11px/1.3 Inter,sans-serif!important;letter-spacing:.12em!important;color:#8a8a8a!important}
body:not([data-surface=builder]) .srv-tag-option{background:#242424!important;border:1px solid #343434!important;border-radius:4px!important}
body:not([data-surface=builder]) .srv-tag-option:hover{background:#2a2a2a!important;border-color:#4a4a4a!important}
body:not([data-surface=builder]) .srv-tag-option:has(input:checked){background:rgba(241,209,167,.08)!important;border-color:#f1d1a7!important}
body:not([data-surface=builder]) .srv-tag-option:has(input:checked) b{color:#f1d1a7!important}
body:not([data-surface=builder]) .srv-dialog-bar .btn{background:#262626!important;border-color:#404040!important}
body:not([data-surface=builder]) #toast{background:#2a2a2a!important;color:#e8e8e8!important;border:1px solid #3a3a3a!important;border-radius:4px!important;box-shadow:none!important}

/* ---------- Staff stats ---------- */
body:not([data-surface=builder]) .staff-stats strong{color:#f1d1a7!important;font-weight:600!important}
body:not([data-surface=builder]) .staff-empty>span{color:#6f6f6f!important;opacity:1!important}

/* ---------- Bot console ---------- */
body:not([data-surface=builder]) .console-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
body:not([data-surface=builder]) .console-status{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;font-size:12.5px;color:#8f8f8f}
body:not([data-surface=builder]) .console-status b{color:#e6e6e6;font-weight:600}
body:not([data-surface=builder]) .console-status .ok{color:#8fd0a8}
body:not([data-surface=builder]) .console-status .off{color:#e79b9b}
body:not([data-surface=builder]) .console-out{
  margin:0;background:#141414;border:1px solid #2f2f2f;border-radius:4px;
  padding:14px 16px;min-height:340px;max-height:58vh;overflow:auto;
  font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfcfcf;white-space:pre-wrap;overflow-wrap:anywhere}
body:not([data-surface=builder]) .console-out:empty::before{content:"Waiting for bot output…";color:#6f6f6f}
body:not([data-surface=builder]) .console-line{display:grid;grid-template-columns:70px 46px minmax(0,1fr);gap:10px}
body:not([data-surface=builder]) .console-line time{color:#5f5f5f}
body:not([data-surface=builder]) .console-line .lv{color:#8a8a8a;text-transform:uppercase;font-size:10.5px;letter-spacing:.06em}
body:not([data-surface=builder]) .console-line.err .lv,body:not([data-surface=builder]) .console-line.err .msg{color:#f0b0ad}
body:not([data-surface=builder]) .console-line.warn .lv{color:#e8c68c}
body:not([data-surface=builder]) .console-note{font-size:12px;color:#7d7d7d;margin:12px 0 0}

/* ---------- Compact rows on mid-size screens ---------- */
@media(max-width:1050px){
  body:not([data-surface=builder]) main{padding:30px 24px}
  body:not([data-surface=builder]) .srv-row{grid-template-columns:44px minmax(0,1fr) auto!important;gap:12px!important;padding:13px 18px!important}
  body:not([data-surface=builder]) .srv-rank,body:not([data-surface=builder]) .srv-members{display:none!important}
}
@media(max-width:860px){
  body:not([data-surface=builder]) main{padding:26px 20px}
  body:not([data-surface=builder]) .staff-workspace{grid-template-columns:1fr;gap:14px}
  body:not([data-surface=builder]) .staff-nav{position:static;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px}
  body:not([data-surface=builder]) .staff-nav>strong,body:not([data-surface=builder]) .staff-nav-group,body:not([data-surface=builder]) .staff-current{display:none}
  body:not([data-surface=builder]) .staff-nav>button{flex:0 0 auto;width:auto;min-height:40px;padding:8px 12px;white-space:nowrap}
}

/* Keep every staff dialog square, including the higher-specificity rule above. */
body:not([data-surface=builder]) dialog:not(.settings-dialog):not(.confirm-dialog):not(.uai-dialog){border-radius:4px!important}

/* ==========================================================================
   Consistent flat surfaces: module cards, pickers, personal settings
   ========================================================================== */

/* Neutral hover instead of the leftover blue-grey card tint */
body:not([data-surface=builder]) .btn:hover,body:not([data-surface=builder]) .srv-open-btn:hover,body:not([data-surface=builder]) .srv-settings-btn:hover{transform:none!important;box-shadow:none!important}
body:not([data-surface=builder]) .settings-grid .setting-card:hover,
body:not([data-surface=builder]) .setting-card:hover,
body:not([data-surface=builder]) .server-card:hover,
body:not([data-surface=builder]) .user-setting-card:hover,
body:not([data-surface=builder])[data-surface=dashboard] .user-setting-card:hover{
  background:#232323!important;border-color:#4a4a4a!important;transform:none!important;box-shadow:none!important}

/* Module cards on the server settings page */
body:not([data-surface=builder]) .settings-grid{gap:12px!important}
body:not([data-surface=builder]) .settings-grid .setting-card{
  min-height:0!important;padding:16px 18px!important;border:1px solid #343434!important;
  border-left:1px solid #343434!important;border-radius:4px!important;background:#1c1c1c!important;box-shadow:none!important}
body:not([data-surface=builder]) .settings-grid .setting-card h2{font:600 16px/1.35 Inter,sans-serif!important;margin:0 0 7px!important;color:#ededed!important}
body:not([data-surface=builder]) .settings-grid .setting-card p{font:400 13px/1.55 Inter,sans-serif!important;color:#a1a1a1!important;margin:0 0 14px!important;flex:1}
body:not([data-surface=builder]) .settings-grid .setting-card>.btn,
body:not([data-surface=builder]) .settings-grid .setting-card .btn.primary{
  font-size:12px!important;min-height:32px!important;padding:0 12px!important;border-radius:4px!important;
  background:#f1d1a7!important;border-color:#f1d1a7!important;color:#20272e!important}
body:not([data-surface=builder]) .settings-grid .setting-card>.btn:hover,
body:not([data-surface=builder]) .settings-grid .setting-card .btn.primary:hover{background:#f7dcb9!important;border-color:#f7dcb9!important}
body:not([data-surface=builder]) .settings-grid .config-status{
  font-size:10px!important;font-weight:600!important;letter-spacing:.05em!important;
  padding:4px 7px!important;border-radius:3px!important}
body:not([data-surface=builder]) .settings-grid .config-status.enabled{background:#1f3a2b!important;color:#9fdcb8!important}
body:not([data-surface=builder]) .settings-grid .config-status.disabled{background:#2a2a2a!important;color:#b9b9b9!important}
body:not([data-surface=builder]) .settings-grid .setting-card>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body:not([data-surface=builder]) .settings-grid .setting-card>small{font-size:10.5px!important;color:#7d7d7d!important;margin-top:10px!important}

/* Module search + filter row */
body:not([data-surface=builder]) .settings-toolbar,body:not([data-surface=builder]) .module-toolbar{gap:8px!important}
body:not([data-surface=builder]) .module-filter{border-radius:4px!important}

/* Role / channel picker: compact rows, no selection glow */
body:not([data-surface=builder]) .settings-dialog .resource-picker{border-radius:4px!important}
body:not([data-surface=builder]) .settings-dialog .resource-picker[open]{box-shadow:none!important;border-color:#f1d1a7!important}
body:not([data-surface=builder]) .settings-dialog .resource-picker:hover{border-color:#4a4a4a!important}
body:not([data-surface=builder]) .settings-dialog .resource-options{max-height:340px!important;padding:2px 6px 6px!important}
body:not([data-surface=builder]) .settings-dialog .resource-options label{
  min-height:30px!important;padding:4px 8px!important;font-size:12.5px!important;
  gap:8px!important;border-radius:3px!important;color:#dedede!important}
body:not([data-surface=builder]) .settings-dialog .resource-options label:hover{background:#262626!important}
body:not([data-surface=builder]) .settings-dialog .resource-options label:has(input:checked){background:rgba(241,209,167,.1)!important}
body:not([data-surface=builder]) .settings-dialog .resource-options label small{font-size:10px!important;opacity:.5!important}
body:not([data-surface=builder]) .settings-dialog .resource-symbol{display:inline-flex;align-items:center;gap:5px;min-width:12px;color:#8a8a8a!important}
body:not([data-surface=builder]) .settings-dialog .role-color{
  width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;
  border:1px solid rgba(255,255,255,.22);background:#8a8a8a}
body:not([data-surface=builder]) .settings-dialog .resource-name{color:#dedede!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:not([data-surface=builder]) .settings-dialog .resource-options input[type=checkbox]{
  width:28px!important;min-width:28px!important;height:16px!important;min-height:16px!important;
  border-radius:8px!important;background:#454545!important}
body:not([data-surface=builder]) .settings-dialog .resource-options input[type=checkbox]:checked{background:#f1d1a7!important}
body:not([data-surface=builder]) .settings-dialog .resource-options input[type=checkbox]:checked:before{background:#20272e!important}
body:not([data-surface=builder]) .settings-dialog .resource-options input:focus-visible{outline:2px solid #f1d1a7!important;outline-offset:1px!important;box-shadow:none!important}

/* Personal settings: three aligned cards, same recipe as module cards */
body:not([data-surface=builder])[data-surface=dashboard] .user-hub-intro h2{font:600 22px/1.3 Inter,sans-serif!important;color:#ededed!important}
body:not([data-surface=builder])[data-surface=dashboard] .user-settings-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;align-items:stretch!important}
body:not([data-surface=builder])[data-surface=dashboard] .user-settings-grid .user-setting-card{
  position:relative;grid-column:auto!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;gap:12px!important;min-height:210px!important;padding:18px!important;
  border:1px solid #343434!important;border-radius:4px!important;background:#1c1c1c!important;
  box-shadow:none!important;transform:none!important;cursor:pointer}
body:not([data-surface=builder])[data-surface=dashboard] .user-settings-grid .user-setting-card:focus-visible{outline:1px solid #f1d1a7!important;outline-offset:2px!important}
body:not([data-surface=builder])[data-surface=dashboard] .user-setting-icon{
  width:36px!important;height:36px!important;border-radius:4px!important;background:#262626!important;
  border:1px solid #343434!important;color:#f1d1a7!important;font-size:16px!important}
body:not([data-surface=builder])[data-surface=dashboard] .user-setting-card h3{font:600 16px/1.35 Inter,sans-serif!important;margin:0 0 6px!important;color:#ededed!important}
body:not([data-surface=builder])[data-surface=dashboard] .user-setting-card p{font:400 13px/1.55 Inter,sans-serif!important;color:#a1a1a1!important;max-width:none!important;margin:0!important}
body:not([data-surface=builder])[data-surface=dashboard] .user-setting-card .btn{
  width:max-content!important;margin-top:auto!important;min-height:32px!important;font-size:12px!important;
  padding:0 12px!important;border-radius:4px!important}
body:not([data-surface=builder])[data-surface=dashboard] .user-settings-grid .uai-card-label{
  position:absolute;top:16px;right:16px;order:0!important;margin:0!important;padding:3px 7px!important;
  border-radius:3px!important;border:1px solid #404040!important;background:#262626!important;
  color:#bdbdbd!important;font-size:9px!important;letter-spacing:.06em!important}
body:not([data-surface=builder])[data-surface=dashboard] .user-settings-grid .uai-card .btn{order:3!important;margin:auto 0 0!important}
@media(max-width:1100px){
  body:not([data-surface=builder])[data-surface=dashboard] .user-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  body:not([data-surface=builder])[data-surface=dashboard] .user-settings-grid{grid-template-columns:1fr!important}
  body:not([data-surface=builder])[data-surface=dashboard] .user-settings-grid .user-setting-card{min-height:0!important}
}

/* ==========================================================================
   Final pass: one flat admin surface for module cards, dialogs, pickers
   and the account menu. Everything shares #1c1c1c panels, #343434 lines,
   4px corners and the cream accent.
   ========================================================================== */

/* No default blue focus rings anywhere. */
html body[data-surface] :focus{outline:none}
html body[data-surface] :focus-visible{outline:2px solid rgba(241,209,167,.55)!important;outline-offset:2px}
html body[data-surface] input:focus-visible,html body[data-surface] textarea:focus-visible,html body[data-surface] select:focus-visible{outline:none!important}

/* ---------- Server settings: module cards ---------- */
html body[data-surface] .settings-grid{gap:12px!important}
html body[data-surface] .settings-grid .setting-card{
  background:#1c1c1c!important;border:1px solid #343434!important;border-left:1px solid #343434!important;
  border-radius:4px!important;min-height:0!important;padding:16px 18px!important;
  box-shadow:none!important;transition:background .15s,border-color .15s}
html body[data-surface] .settings-grid .setting-card::before{display:none!important}
html body[data-surface] .settings-grid .setting-card.is-enabled,
html body[data-surface] .settings-grid .setting-card.is-disabled{border-left-color:#343434!important}
html body[data-surface] .settings-grid .setting-card:hover{
  background:#232323!important;border-color:#4a4a4a!important;border-left-color:#4a4a4a!important;
  transform:none!important;box-shadow:none!important}
html body[data-surface] .settings-grid .setting-card h2{font:600 16px/1.35 Inter,sans-serif!important;margin:0 0 7px!important;color:#ededed!important}
html body[data-surface] .settings-grid .setting-card p{font:400 13px/1.55 Inter,sans-serif!important;color:#a1a1a1!important;margin:0 0 14px!important;min-height:58px!important;flex:0 0 auto!important}
html body[data-surface] .settings-grid .setting-card>div{margin-top:0!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html body[data-surface] .settings-grid .setting-card .btn,
html body[data-surface] .settings-grid .setting-card .btn.primary{
  font-size:12px!important;min-height:30px!important;padding:0 11px!important;border-radius:4px!important;
  background:#f1d1a7!important;border:1px solid #f1d1a7!important;color:#20272e!important;font-weight:600!important;box-shadow:none!important}
html body[data-surface] .settings-grid .setting-card .btn:hover,
html body[data-surface] .settings-grid .setting-card .btn.primary:hover{background:#f7dcb9!important;border-color:#f7dcb9!important;color:#20272e!important}
html body[data-surface] .config-status{
  font:600 9.5px/1 Inter,sans-serif!important;letter-spacing:.08em!important;
  padding:4px 7px!important;border-radius:3px!important;box-shadow:none!important}
html body[data-surface] .config-status.enabled{background:#1f3a2b!important;color:#9fdcb8!important}
html body[data-surface] .config-status.disabled{background:#2a2a2a!important;color:#b0b0b0!important}
html body[data-surface] .settings-grid .setting-card>small{font-size:10.5px!important;color:#7d7d7d!important;margin-top:10px!important}
html body[data-surface] .settings-group>summary{
  font:600 11px/1.4 Inter,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important;
  color:#8a8a8a!important;padding:14px 0 10px!important}
html body[data-surface] .settings-group>summary span{color:#6f6f6f!important;font-weight:500!important}

/* ---------- Server settings: toolbar, filters, summary ---------- */
html body[data-surface] .manage-settings-tools .module-search-wrap{
  background:#242424!important;border:1px solid #3a3a3a!important;border-radius:4px!important;box-shadow:none!important;color:#7d7d7d!important}
html body[data-surface] .manage-settings-tools .module-search-wrap:focus-within{border-color:#f1d1a7!important;box-shadow:none!important}
html body[data-surface] .manage-settings-tools .module-search-wrap input{
  background:transparent!important;border:0!important;box-shadow:none!important;color:#e8e8e8!important;padding:12px 0!important;margin:0!important}
html body[data-surface] .module-status-filters{gap:6px!important}
html body[data-surface] .module-status-filters button{
  background:#242424!important;border:1px solid #3a3a3a!important;border-radius:4px!important;
  color:#b5b5b5!important;font:500 12px/1 Inter,sans-serif!important;padding:9px 12px!important;box-shadow:none!important}
html body[data-surface] .module-status-filters button:hover{background:#2e2e2e!important;border-color:#4c4c4c!important;color:#ededed!important}
html body[data-surface] .module-status-filters button[aria-pressed=true],
html body[data-surface] .module-status-filters button[aria-pressed=true]:hover{
  background:#f1d1a7!important;border-color:#f1d1a7!important;color:#20272e!important;font-weight:600!important}
html body[data-surface] .manage-server-summary>span{
  background:#242424!important;border:1px solid #343434!important;border-radius:4px!important;box-shadow:none!important}
html body[data-surface] .manage-server-summary strong{color:#f1d1a7!important;font-weight:600!important}
html body[data-surface] .manage-server-summary small{color:#8a8a8a!important}

/* ---------- Dialogs ---------- */
html body[data-surface] .settings-dialog{
  background:#1c1c1c!important;border:1px solid #3a3a3a!important;border-radius:4px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.55)!important}
html body[data-surface] .settings-dialog::backdrop{background:rgba(0,0,0,.62)!important;backdrop-filter:none!important}
html body[data-surface] .settings-dialog .settings-modal-head{
  background:#1f1f1f!important;border-bottom:1px solid #343434!important;padding:18px 56px 14px 24px!important}
html body[data-surface] .settings-dialog .settings-modal-head h2{font:600 20px/1.3 Inter,sans-serif!important;letter-spacing:-.01em!important;margin:0 0 5px!important}
html body[data-surface] .settings-dialog .settings-modal-head p{font-size:13px!important;line-height:1.5!important;color:#a1a1a1!important;margin:0!important}
html body[data-surface] .settings-dialog .settings-fields{padding:4px 24px 18px!important}
html body[data-surface] .settings-dialog .settings-modal-footer{
  background:#1f1f1f!important;border-top:1px solid #343434!important;padding:13px 24px!important}
html body[data-surface] .settings-dialog .settings-modal-footer>small{color:#7d7d7d!important;font-size:12px!important}
html body[data-surface] .settings-dialog .module-draft-note{background:#242424!important;border:1px solid #343434!important;border-radius:4px!important;color:#a1a1a1!important}
html body[data-surface] dialog .close{
  width:32px!important;height:32px!important;border-radius:4px!important;border:1px solid #404040!important;
  background:#262626!important;color:#c9c9c9!important;font-size:19px!important;right:16px!important;top:14px!important}
html body[data-surface] dialog .close:hover{background:#333333!important;border-color:#555555!important;color:#ffffff!important}
html body[data-surface] dialog .close:focus,html body[data-surface] dialog .close:focus-visible{outline:none!important;box-shadow:none!important}
html body[data-surface] .settings-dialog .tagify-panel{
  background:#202020!important;border:1px solid #343434!important;border-radius:4px!important;
  padding:10px 12px!important;margin:10px 0!important;color:#a1a1a1!important;font-size:12px!important}
html body[data-surface] .settings-dialog .tagify-panel>summary{cursor:pointer;color:#b5b5b5!important;font-size:12px!important}
html body[data-surface] .settings-dialog .tagify-panel>summary:hover{color:#e6e6e6!important}

/* Fields and switches inside settings dialogs */
html body[data-surface] .settings-dialog .setting-field{padding:13px 0!important;border:0!important}
html body[data-surface] .settings-dialog .setting-field>label,html body[data-surface] .settings-dialog .repeat-list>h3{font:600 13px/1.4 Inter,sans-serif!important;color:#e6e6e6!important;margin:0 0 8px!important}
html body[data-surface] .settings-dialog .setting-field small{font-size:11.5px!important;line-height:1.5!important;color:#7d7d7d!important;margin-top:7px!important}
html body[data-surface] .settings-dialog .setting-field input:not([type=checkbox]):not([type=radio]):not(.resource-search),
html body[data-surface] .settings-dialog .setting-field textarea,
html body[data-surface] .settings-dialog .setting-field select{
  background:#242424!important;border:1px solid #3a3a3a!important;border-radius:4px!important;
  min-height:38px!important;padding:8px 11px!important;font-size:13.5px!important;color:#e8e8e8!important;box-shadow:none!important}
html body[data-surface] .settings-dialog .setting-field input:hover:not([type=checkbox]):not([type=radio]),
html body[data-surface] .settings-dialog .setting-field textarea:hover,
html body[data-surface] .settings-dialog .setting-field select:hover{border-color:#4a4a4a!important}
html body[data-surface] .settings-dialog .setting-field input:focus,html body[data-surface] .settings-dialog .setting-field textarea:focus,
html body[data-surface] .settings-dialog .setting-field select:focus{border-color:#f1d1a7!important;box-shadow:none!important}
html body[data-surface] .settings-dialog .switch-field{display:block!important;padding:0!important;margin:12px 0 4px!important;min-height:0!important}
html body[data-surface] .settings-dialog .setting-switch{
  background:#202020!important;border:1px solid #343434!important;border-radius:4px!important;
  padding:10px 12px!important;font-size:13px!important;font-weight:500!important;color:#e6e6e6!important;gap:11px!important}
html body[data-surface] .settings-dialog .setting-switch:hover{background:#262626!important;border-color:#4a4a4a!important}
html body[data-surface] .settings-dialog .setting-switch span{width:34px!important;height:18px!important;background:#3f3f3f!important;border-radius:9px!important}
html body[data-surface] .settings-dialog .setting-switch span:before{width:12px!important;height:12px!important;top:3px!important;left:3px!important;background:#cfcfcf!important;box-shadow:none!important}
html body[data-surface] .settings-dialog .setting-switch input:checked+span{background:#f1d1a7!important}
html body[data-surface] .settings-dialog .setting-switch input:checked+span:before{transform:translateX(16px)!important;background:#20272e!important}

/* ---------- Role / channel pickers ---------- */
html body[data-surface] .settings-dialog .resource-picker{
  background:#242424!important;border:1px solid #3a3a3a!important;border-radius:4px!important;
  padding:0!important;overflow:hidden!important;box-shadow:none!important}
html body[data-surface] .settings-dialog .resource-picker:hover{border-color:#4a4a4a!important}
html body[data-surface] .settings-dialog .resource-picker[open]{border-color:#4a4a4a!important;box-shadow:none!important}
html body[data-surface] .settings-dialog .resource-picker>summary{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
  min-height:36px!important;padding:7px 11px!important;font-size:13px!important;line-height:1.4!important;cursor:pointer}
html body[data-surface] .settings-dialog .resource-placeholder,html body[data-surface] .settings-dialog .selection-count{color:#8a8a8a!important;font-size:12px!important}
html body[data-surface] .settings-dialog .picker-chevron{border-color:#8a8a8a!important;width:7px!important;height:7px!important}
html body[data-surface] .settings-dialog .resource-popover{
  background:#1f1f1f!important;border-top:1px solid #343434!important;padding:7px!important;
  box-shadow:0 16px 34px rgba(0,0,0,.45)!important}
html body[data-surface] .settings-dialog .resource-popover .resource-search{
  display:block!important;margin:0 0 7px!important;width:100%!important;min-height:32px!important;height:32px!important;
  padding:6px 9px!important;font-size:12.5px!important;border-radius:4px!important;
  background:#262626!important;border:1px solid #3a3a3a!important;color:#e8e8e8!important}
html body[data-surface] .settings-dialog .resource-popover .resource-search:focus{border-color:#f1d1a7!important}
html body[data-surface] .settings-dialog .resource-options{max-height:min(46vh,400px)!important;padding:0!important;overflow:auto!important}
html body[data-surface] .settings-dialog .resource-option-group{gap:0!important}
html body[data-surface] .settings-dialog .resource-category-label{
  font:600 9.5px/1.3 Inter,sans-serif!important;letter-spacing:.09em!important;text-transform:uppercase!important;
  color:#6f6f6f!important;padding:8px 6px 5px!important;background:none!important}
html body[data-surface] .settings-dialog .resource-options label{
  position:relative!important;min-height:24px!important;padding:2px 6px!important;gap:8px!important;
  font-size:12.5px!important;line-height:1.35!important;border-radius:3px!important;color:#dedede!important;margin:0!important}
html body[data-surface] .settings-dialog .resource-options label:hover{background:#2a2a2a!important}
html body[data-surface] .settings-dialog .resource-options label:has(input:checked){background:#2e2e2e!important}
html body[data-surface] .settings-dialog .resource-options label:has(input:checked) .resource-name{color:#ffffff!important}
html body[data-surface] .settings-dialog .role-color{
  width:9px!important;height:9px!important;border-radius:50%!important;border:0!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)!important;background:#6f6f6f}
html body[data-surface] .settings-dialog .resource-symbol{color:#8a8a8a!important;min-width:11px!important}
html body[data-surface] .settings-dialog .resource-options label small{font-size:9.5px!important;line-height:1!important;margin-top:0!important;opacity:.4!important;color:#c9c9c9!important}
html body[data-surface] .settings-dialog .resource-options input[type=checkbox]{
  display:block!important;flex:0 0 auto!important;align-self:center!important;
  width:24px!important;min-width:24px!important;max-width:24px!important;
  height:14px!important;min-height:14px!important;max-height:14px!important;
  border-radius:7px!important;background:#3f3f3f!important;border:0!important;padding:0!important}
html body[data-surface] .settings-dialog .resource-options input[type=checkbox]:before{width:10px!important;height:10px!important;top:2px!important;left:2px!important;background:#e0e0e0!important}
html body[data-surface] .settings-dialog .resource-options input[type=checkbox]:checked{background:#f1d1a7!important}
html body[data-surface] .settings-dialog .resource-options input[type=checkbox]:checked:before{transform:translateX(10px)!important;background:#20272e!important}
html body[data-surface] .settings-dialog .resource-options input:focus-visible{outline:1px solid #f1d1a7!important;outline-offset:1px!important;box-shadow:none!important}
html body[data-surface] .settings-dialog .resource-clear{
  width:100%!important;margin:7px 0 0!important;min-height:30px!important;font-size:12px!important;
  background:#262626!important;border:1px solid #3a3a3a!important;color:#b5b5b5!important;border-radius:4px!important}
html body[data-surface] .settings-dialog .resource-clear:hover{background:#2e2e2e!important;border-color:#4c4c4c!important;color:#ededed!important}
html body[data-surface] .settings-dialog .manual-id-disclosure>summary{color:#8a8a8a!important;font-size:12px!important}
html body[data-surface] .settings-dialog .manual-id-disclosure>summary:hover{color:#e6e6e6!important}
html body[data-surface] .settings-dialog .manual-id input{margin:0!important}

/* ---------- Account menu in the header ---------- */
html body[data-surface] .account-menu>summary{
  display:flex!important;align-items:center!important;gap:10px!important;
  min-height:62px!important;padding:7px 10px!important;
  background:transparent!important;border:1px solid transparent!important;border-radius:8px!important;
  box-shadow:none!important;overflow:visible!important;transform:none!important;position:relative!important}
html body[data-surface] .account-menu>summary:hover,
html body[data-surface] .account-menu[open]>summary{
  background:rgba(255,255,255,.045)!important;border-color:#343434!important;transform:none!important;box-shadow:none!important}
html body[data-surface] .account-menu .account-avatar-wrap{margin-left:0!important;width:46px!important;height:46px!important}
html body[data-surface] .account-menu .account-avatar{
  width:46px!important;height:46px!important;border:0!important;box-shadow:none!important;transform:none!important;border-radius:50%!important}
html body[data-surface] .account-menu .account-decoration{
  inset:auto!important;left:50%!important;top:50%!important;
  width:64px!important;min-width:64px!important;max-width:64px!important;
  height:64px!important;min-height:64px!important;max-height:64px!important;
  transform:translate(-50%,-50%)!important;object-fit:contain!important;z-index:2;pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
html body[data-surface] .account-menu #profileText{
  display:block!important;flex:1!important;min-width:0!important;margin:0!important;
  font:500 10px/1.2 Inter,sans-serif!important;letter-spacing:.02em!important;color:#9a9a9a!important}
html body[data-surface] .account-menu #profileText small{
  display:block!important;margin-top:3px!important;font:600 14px/1.1 Inter,sans-serif!important;
  letter-spacing:0!important;color:#ededed!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body[data-surface] .account-menu .account-role{
  display:inline-block!important;width:max-content!important;margin-top:5px!important;padding:3px 7px!important;
  border:1px solid #4a4a4a!important;border-radius:3px!important;background:#262626!important;
  color:#e6cfae!important;font:600 8.5px/1 Inter,sans-serif!important;letter-spacing:.09em!important}
html body[data-surface] .account-menu.account-sparkle>summary:before,
html body[data-surface] .account-menu.account-sparkle>summary:after{display:none!important;content:none!important}
html body[data-surface] .account-menu .account-star{
  position:static!important;display:grid!important;place-items:center!important;flex:none!important;
  width:16px!important;height:16px!important;margin:0 2px 0 auto!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  color:#a0a0a0!important;font-size:0!important;line-height:1!important;
  transform:none!important;transition:transform .15s,color .15s!important}
html body[data-surface] .account-menu .account-star::before{display:none!important;content:none!important}
html body[data-surface] .account-menu .account-star::after{
  content:'⌄'!important;display:block!important;font:600 14px/1 Inter,sans-serif!important;
  transform:none!important;color:inherit!important}
html body[data-surface] .account-menu[open] .account-star{transform:rotate(180deg)!important;color:#ededed!important}
html body[data-surface] .account-menu .account-options{
  top:calc(100% + 8px)!important;right:0!important;min-width:200px!important;
  background:#1f1f1f!important;border:1px solid #3a3a3a!important;border-radius:4px!important;
  box-shadow:0 16px 40px rgba(0,0,0,.5)!important;padding:5px!important;backdrop-filter:none!important}
html body[data-surface] .account-menu .account-options a,
html body[data-surface] .account-menu .account-options button{
  padding:9px 10px!important;border-radius:3px!important;font-size:13px!important;
  color:#e6e6e6!important;background:none!important}
html body[data-surface] .account-menu .account-options a:hover,
html body[data-surface] .account-menu .account-options button:hover{
  padding-left:10px!important;background:#2a2a2a!important;color:#ffffff!important}
html body[data-surface] .workspace-menu-separator{background:#343434!important}

/* Keep the multi-select switch in its own column: it never overlaps the label. */
html body[data-surface] .settings-dialog .resource-options label>input[type=checkbox]{
  display:block!important;position:relative!important;inset:auto!important;
  flex:0 0 24px!important;margin:0!important;float:none!important;
  order:-1!important;z-index:1!important}
html body[data-surface] .settings-dialog .resource-options label{gap:10px!important;align-items:center!important}
html body[data-surface] .settings-dialog .resource-options label>.resource-name,
html body[data-surface] .settings-dialog .resource-options label>.resource-symbol{flex:0 1 auto!important;min-width:0!important}
html body[data-surface] .settings-dialog .resource-options label>small{margin-left:auto!important}

/* ---------- Status page width restoration ---------- */
body[data-status-page] main,
body[data-status-page] .status-page{
  max-width:960px!important;
  margin:0 auto!important;
}

/* ---------- Remove snow effects outside the main dashboard ---------- */
body:not(.home-page)::after,
body[data-page]:not([data-page=overview])::after,
body:not([data-surface=dashboard])::after,
body[data-status-page]::after,
body[data-surface=builder]::after,
body[data-surface=embed]::after{
  display:none!important;
  background:none!important;
  animation:none!important;
  opacity:0!important;
}

body:not(.home-page)::before,
body[data-page]:not([data-page=overview])::before{
  display:none!important;
  background:none!important;
}

body:not(.home-page){
  background:#262626!important;
}

/* ==========================================================================
   Server directory: compact banner tiles
   A slim banner strip, the server icon on the seam, then name and action.
   ========================================================================== */
body[data-surface=dashboard] .server-directory .server-tile-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  width:100%;
  max-width:none;
  align-items:stretch;
  justify-content:stretch;
}
@media (max-width:1180px){
  body[data-surface=dashboard] .server-directory .server-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  body[data-surface=dashboard] .server-directory .server-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  body[data-surface=dashboard] .server-directory .server-tile-grid{grid-template-columns:minmax(0,1fr);gap:12px}
}

body:not([data-surface=builder]) .server-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  background:#1c1c1c;
  border:1px solid #343434;
  border-radius:6px;
  box-shadow:none;
  transition:border-color .15s,background .15s;
}
body:not([data-surface=builder]) .server-tile:hover{
  background:#1f1f1f;
  border-color:#4a4a4a;
  transform:none;
  box-shadow:none;
}

/* Banner strip: the image when the server has one, a clean tint when it does not. */
body:not([data-surface=builder]) .server-tile-media{
  position:relative;
  height:62px;
  flex:none;
  overflow:hidden;
  background:#242424;
  box-shadow:inset 0 -1px 0 #343434;
}
body:not([data-surface=builder]) .server-tile-art{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
}
body:not([data-surface=builder]) .server-tile-fallback{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 170% at 88% 130%,rgba(255,255,255,.07),transparent 62%),
    linear-gradient(120deg,hsl(var(--tile-hue) 30% 30%),hsl(var(--tile-hue) 24% 17%) 62%,#191919);
}
body:not([data-surface=builder]) .server-tile-banner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Icon and name sit on one row under the banner strip. */
body:not([data-surface=builder]) .server-tile-avatar{
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  overflow:hidden;
  border:0;
  border-radius:12px;
  background:#262626;
  box-shadow:none;
}
body:not([data-surface=builder]) .server-tile-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
body:not([data-surface=builder]) .server-tile-avatar.is-initial{
  font:700 20px/1 Inter,sans-serif;
  color:#ededed;
  background:linear-gradient(140deg,hsl(var(--tile-hue) 28% 34%),#222222);
}
body:not([data-surface=builder]) .server-tile-body{
  display:flex;
  align-items:center;
  gap:11px;
  flex:1;
  padding:13px 14px 3px;
}
body:not([data-surface=builder]) .server-tile-copy{min-width:0}
body:not([data-surface=builder]) .server-tile-copy h2{
  display:-webkit-box;
  margin:0 0 3px!important;
  font:700 14px/1.25 Inter,sans-serif!important;
  letter-spacing:.02em!important;
  text-transform:uppercase;
  color:#ededed!important;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow-wrap:anywhere;
}
body:not([data-surface=builder]) .server-tile-copy small{
  display:block;
  font-size:10.5px;
  line-height:1.3;
  color:#8a8a8a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body:not([data-surface=builder]) .server-tile-foot{
  padding:10px 14px 14px;
}
body:not([data-surface=builder]) .server-tile .server-tile-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 18px!important;
  border:1px solid #f1d1a7!important;
  border-radius:4px!important;
  background:#f1d1a7!important;
  color:#20272e!important;
  font:600 12px/1 Inter,sans-serif!important;
  letter-spacing:0!important;
  text-decoration:none;
  box-shadow:none!important;
  transform:none!important;
}
body:not([data-surface=builder]) .server-tile .server-tile-action:hover{
  background:#f7dcb9!important;
  border-color:#f7dcb9!important;
  color:#20272e!important;
  box-shadow:none!important;
  transform:none!important;
}
body:not([data-surface=builder]) .server-tile .server-tile-action:focus-visible{
  outline:2px solid #f1d1a7;
  outline-offset:2px;
}
body:not([data-surface=builder]) .server-tile .server-readonly-label{
  top:8px;
  right:8px;
  left:auto;
  bottom:auto;
  transform:none;
  clip-path:none;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(14,14,14,.72);
  color:#e6e6e6;
  font:600 8px/1.2 Inter,sans-serif;
  letter-spacing:.08em;
  backdrop-filter:blur(4px);
  box-shadow:none;
}
body:not([data-surface=builder]) .server-tile.is-readonly .server-tile-banner,
body:not([data-surface=builder]) .server-tile.is-readonly .server-tile-fallback{opacity:.78}
@media (max-width:600px){
  body:not([data-surface=builder]) .server-tile-media{height:58px}
  body:not([data-surface=builder]) .server-tile-avatar{width:42px;height:42px;border-radius:11px}
  body:not([data-surface=builder]) .server-tile-body{padding:11px 12px 2px}
  body:not([data-surface=builder]) .server-tile-foot{padding:9px 12px 12px}
}

/* ==========================================================================
   Clickable server tiles, footer pinned to the page bottom
   ========================================================================== */
body:not([data-surface=builder]) .server-tile[data-server],
body:not([data-surface=builder]) .server-tile[data-preview]{cursor:pointer}
body:not([data-surface=builder]) .server-tile[data-server]:focus-visible,
body:not([data-surface=builder]) .server-tile[data-preview]:focus-visible{
  outline:2px solid #f1d1a7;
  outline-offset:2px;
}
body:not([data-surface=builder]) .server-tile .server-tile-action{cursor:pointer}

/* Keep the footer at the bottom of the viewport on short pages. */
body[data-surface=dashboard] .shell{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
body[data-surface=dashboard] .shell>main{flex:1 0 auto}

/* ==========================================================================
   v26 · Bot management laid out like the xelA panel, in the Caesrov theme
   Flat sidebar with a divider, accent-edged collapsible cards, centred stat
   tiles with a refresh control, solid role badges, stacked access levels.
   ========================================================================== */
body:not([data-surface=builder]) .staff-workspace{grid-template-columns:236px minmax(0,1fr);gap:0}

/* Sidebar: no card, just a column that the content divider runs alongside */
body:not([data-surface=builder]) .staff-nav{background:transparent!important;border:0!important;border-radius:0!important;padding:2px 20px 2px 0!important;gap:2px;top:88px}
body:not([data-surface=builder]) .staff-nav-group{margin:26px 0 8px;padding:0 12px;font:700 11px/1.3 Inter,sans-serif!important;letter-spacing:.12em;color:#6f6f6f!important}
body:not([data-surface=builder]) .staff-nav>button{min-height:42px;padding:10px 12px!important;font-size:15px;border-radius:6px!important}
body:not([data-surface=builder]) .staff-current{margin-top:26px;padding:16px 12px 0}
body:not([data-surface=builder]) .staff-content{gap:20px;padding-left:28px;border-left:1px solid #343434;min-height:calc(100vh - 230px)}

/* Cards: accent edge on the left, collapsible head */
body:not([data-surface=builder]) .staff-panel,body:not([data-surface=builder]) .srv-panel{border-left:3px solid rgba(241,209,167,.5)!important;border-radius:4px!important}
body:not([data-surface=builder]) .staff-panel-head{background:transparent!important;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0!important;border-bottom:0!important}
body:not([data-surface=builder]) .staff-panel:not(.is-collapsed)>.staff-panel-head{border-bottom:0!important}
body:not([data-surface=builder]) .staff-panel-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:16px 20px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:4px}
body:not([data-surface=builder]) .staff-panel-toggle h2{margin:0;padding:0;border:0}
body:not([data-surface=builder]) .staff-panel-toggle:hover h2{color:#ededed}
body:not([data-surface=builder]) .staff-panel-toggle:focus-visible,body:not([data-surface=builder]) .staff-icon-btn:focus-visible{outline:2px solid #f1d1a7;outline-offset:-2px}
body:not([data-surface=builder]) .staff-chevron{flex:none;color:#7d7d7d;transition:transform .15s ease}
body:not([data-surface=builder]) .staff-panel.is-collapsed .staff-chevron{transform:rotate(-90deg)}
body:not([data-surface=builder]) .staff-panel.is-collapsed .staff-panel-body{display:none}
body:not([data-surface=builder]) .staff-panel-head>.staff-count{margin-right:20px}
body:not([data-surface=builder]) .staff-panel:not(.is-collapsed):not(.staff-panel-hero) .staff-panel-body{padding-top:4px!important}
body:not([data-surface=builder]) .staff-icon-btn{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-right:14px;padding:0;border:0;border-radius:4px;background:transparent;color:#8a8a8a;cursor:pointer;transition:color .15s,background .15s}
body:not([data-surface=builder]) .staff-icon-btn:hover{color:#f1d1a7;background:#262626}

/* Welcome card */
body:not([data-surface=builder]) .staff-panel-hero .staff-panel-body{padding:22px 24px!important}
body:not([data-surface=builder]) .staff-panel-hero h2{margin:0 0 10px;font:700 28px/1.2 Inter,sans-serif!important;letter-spacing:-.02em;color:#f2f2f2;text-transform:none}
body:not([data-surface=builder]) .staff-panel-hero p{margin:0 0 8px;color:#ededed}
body:not([data-surface=builder]) .staff-panel-hero p.staff-hero-note{color:#8d8d8d}
body:not([data-surface=builder]) .staff-panel-hero .staff-home-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;border:0;color:#a1a1a1}
body:not([data-surface=builder]) .staff-panel-hero .staff-home-meta:last-child{margin-bottom:0}
body:not([data-surface=builder]) .staff-panel-hero .staff-home-meta a{font-size:inherit;font-weight:500;color:#f1d1a7;text-decoration:none}
body:not([data-surface=builder]) .staff-panel-hero .staff-home-meta a:hover{text-decoration:underline;text-underline-offset:3px}

/* Live stats: centred tiles, accent number over a plain label */
body:not([data-surface=builder]) .staff-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:10px 0 6px}
body:not([data-surface=builder]) .staff-stats>div{min-width:0;display:grid;gap:6px;justify-items:center;text-align:center;padding:20px 24px;background:#232323!important;border-radius:6px!important}
body:not([data-surface=builder]) .staff-stats strong{order:0;font:700 30px/1.1 Inter,sans-serif!important;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
body:not([data-surface=builder]) .staff-stats small{order:1;margin:0;font:500 14px/1.3 Inter,sans-serif!important;letter-spacing:0;text-transform:none;color:#a1a1a1}

/* Access levels: one card per role, full width */
body:not([data-surface=builder]) .staff-levels{grid-template-columns:1fr;gap:12px;margin-top:14px}
body:not([data-surface=builder]) .staff-level{justify-items:stretch;gap:10px;padding:16px 18px;background:#232323!important;border-radius:6px!important}
body:not([data-surface=builder]) .staff-level-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#8a8a8a;font-size:13px}
body:not([data-surface=builder]) .staff-level-head code{padding:2px 7px;border-radius:4px;background:#171717;color:#d6d6d6;font-size:12.5px}
body:not([data-surface=builder]) .staff-level p{margin:0;color:#ededed;font-size:15px}
body:not([data-surface=builder]) .staff-level ul{margin:0;padding-left:20px;display:grid;gap:3px;color:#d2d2d2;font-size:14.5px;line-height:1.6}
body:not([data-surface=builder]) .staff-level li::marker{color:#7d7d7d}

/* Role badges: solid, square-cornered, one hue per role */
body:not([data-surface=builder]) .staff-badge{padding:4px 9px;border:0!important;border-radius:3px!important;font:800 11px/1.4 Inter,sans-serif!important;letter-spacing:.06em;text-transform:uppercase;background:#9a9a9a!important;color:#1b1b1b!important}
body:not([data-surface=builder]) .staff-badge.role-owner{background:#e08a76!important;color:#2a130d!important}
body:not([data-surface=builder]) .staff-badge.role-root{background:#f1d1a7!important;color:#20272e!important}
body:not([data-surface=builder]) .staff-badge.role-sys{background:#8fa9c8!important;color:#101d2b!important}
body:not([data-surface=builder]) .staff-badge.role-compliance{background:#c993bd!important;color:#261024!important}
body:not([data-surface=builder]) .staff-badge.role-sudo{background:#9fc9ad!important;color:#102014!important}
body:not([data-surface=builder]) .staff-badge.role-prospect{background:#e8c872!important;color:#241c05!important}
body:not([data-surface=builder]) .staff-badge.role-manager,body:not([data-surface=builder]) .staff-badge.role-auditor{background:#9a9a9a!important;color:#1b1b1b!important}

@media(max-width:1000px){
  body:not([data-surface=builder]) .staff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  body:not([data-surface=builder]) .staff-workspace{grid-template-columns:1fr;gap:14px}
  body:not([data-surface=builder]) .staff-nav{border:1px solid #343434!important;border-radius:4px!important;padding:8px!important}
  body:not([data-surface=builder]) .staff-content{padding-left:0;border-left:0;min-height:0}
  body:not([data-surface=builder]) .staff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:not([data-surface=builder]) .staff-stats>div{padding:16px 12px}
  body:not([data-surface=builder]) .staff-panel-hero h2{font-size:22px}
}
@media(max-width:420px){
  body:not([data-surface=builder]) .staff-stats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  body:not([data-surface=builder]) .staff-chevron{transition:none}
}

/* v27 · Keep the staff panel the same width on every tab.
   The page container was shrinking to fit each tab's content. */
html{scrollbar-gutter:stable}
body:not([data-surface=builder]) main:has(.staff-workspace){width:100%;box-sizing:border-box}
body:not([data-surface=builder]) .staff-workspace{width:100%}
body:not([data-surface=builder]) .staff-content>*{min-width:0;max-width:100%}

/* v28 · Selects everywhere: one real height, our own chevron.
   Native selects (especially on macOS) ignore min-height and render as a thin strip. */
html body select:not([multiple]):not([size]){
  -webkit-appearance:none!important;appearance:none!important;
  box-sizing:border-box;height:auto;min-height:44px;padding:10px 40px 10px 14px!important;
  font-size:14px;line-height:1.4;text-overflow:ellipsis;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3a3a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px 8px!important}
html body:not([data-surface=builder]) select:not([multiple]):not([size]){background-color:#242424!important}
html body select:not([multiple]):not([size]):disabled{opacity:.55;cursor:not-allowed}
html body select option{background:#242424;color:#ededed}

/* Compact contexts keep a smaller, but still solid, control */
html body .sb-app select:not([multiple]):not([size]),html body .sb-properties select:not([multiple]):not([size]),html body .sb-delivery select:not([multiple]):not([size]){min-height:38px;padding:8px 34px 8px 12px!important;font-size:12.5px;background-position:right 12px center!important}
html body .srv-sort select:not([multiple]):not([size]){min-height:34px;padding:0 24px 0 2px!important;font-size:13px;background-color:transparent!important;background-position:right 4px center!important}

/* Form rows: input, select and button share one height */
html body:not([data-surface=builder]) .staff-form{align-items:center}
html body:not([data-surface=builder]) .staff-form>input:not([type=checkbox]),html body:not([data-surface=builder]) .staff-form>select{height:44px;min-height:44px;margin:0}
html body:not([data-surface=builder]) .staff-form>.btn{height:44px;min-height:44px}
html body:not([data-surface=builder]) .srv-sort select:not([multiple]):not([size]):not([type=checkbox]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3a3a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 4px center!important;background-size:12px 8px!important;background-color:transparent!important}

/* ==========================================================================
   v29 · Server settings dialog: no glows, rings or tan outlines, and
   cleaner channel / role menus.
   ========================================================================== */

/* ---- No outline, ring or glow on anything inside the dialog or the page behind it ---- */
html body[data-surface] dialog.settings-dialog,html body[data-surface] dialog.settings-dialog:focus,html body[data-surface] dialog.settings-dialog:focus-visible,
html body[data-surface] dialog.settings-dialog *,html body[data-surface] dialog.settings-dialog *:focus,html body[data-surface] dialog.settings-dialog *:focus-visible,html body[data-surface] dialog.settings-dialog *:focus-within,
html body[data-surface] .manage-server-page *:focus,html body[data-surface] .manage-server-page *:focus-visible{
  outline:none!important;box-shadow:none!important}
html body[data-surface] dialog.settings-dialog .close:focus-visible,html body[data-surface] dialog.settings-dialog .btn:focus-visible{background:#2e2e2e!important}
html body[data-surface] dialog.settings-dialog .save-setting:focus-visible{background:#f7dcb9!important}
html body[data-surface] dialog.settings-dialog .settings-modal-footer>small.is-dirty::before{box-shadow:none!important}
html body[data-surface] .manage-server-page .btn:focus-visible{filter:brightness(1.1)}

/* Quiet, neutral focus state for fields (no tan border, no ring) */
html body[data-surface] dialog.settings-dialog .setting-field input:focus:not([type=checkbox]):not([type=radio]),
html body[data-surface] dialog.settings-dialog .setting-field textarea:focus,html body[data-surface] dialog.settings-dialog .setting-field select:focus,
html body[data-surface] dialog.settings-dialog .resource-popover .resource-search:focus,html body[data-surface] dialog.settings-dialog .manual-id input:focus{border-color:#6a6a6a!important}
html body[data-surface] dialog.settings-dialog .setting-switch:has(input:focus-visible){background:#2a2a2a!important}
html body[data-surface] dialog.settings-dialog .manual-id-disclosure>summary:focus-visible,html body[data-surface] dialog.settings-dialog .tagify-panel>summary:focus-visible{color:#ffffff!important}

/* ---- Picker trigger ---- */
html body[data-surface] dialog.settings-dialog .resource-picker{background:#242424!important;border:1px solid #3a3a3a!important;border-radius:6px!important;overflow:hidden!important;transition:border-color .12s}
html body[data-surface] dialog.settings-dialog .resource-picker:hover,html body[data-surface] dialog.settings-dialog .resource-picker[open],html body[data-surface] dialog.settings-dialog .resource-picker:focus-within{border-color:#4f4f4f!important}
html body[data-surface] dialog.settings-dialog .resource-picker>summary{min-height:44px!important;padding:0 14px!important;gap:12px!important;font-size:14px!important;color:#ededed;border-radius:0}
html body[data-surface] dialog.settings-dialog .resource-picker>summary:hover{background:#282828}
html body[data-surface] dialog.settings-dialog .resource-picker>summary:focus-visible{background:#2a2a2a}
html body[data-surface] dialog.settings-dialog .resource-value{gap:9px!important}
html body[data-surface] dialog.settings-dialog .resource-placeholder,html body[data-surface] dialog.settings-dialog .selection-count{font-size:14px!important;color:#8a8a8a!important}
html body[data-surface] dialog.settings-dialog .resource-multi-field .resource-picker>summary>span:first-child{font-weight:600}
html body[data-surface] dialog.settings-dialog .picker-chevron{flex:none;width:12px!important;height:8px!important;border:0!important;font-size:0!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239a9a9a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 8px no-repeat!important;transform:none!important;transition:transform .15s ease}
html body[data-surface] dialog.settings-dialog .resource-picker[open]>summary .picker-chevron{transform:rotate(180deg)!important}

/* ---- Menu panel ---- */
html body[data-surface] dialog.settings-dialog .resource-popover{background:#1f1f1f!important;border-top:1px solid #343434!important;padding:8px 8px 0!important;box-shadow:none!important}
html body[data-surface] dialog.settings-dialog .resource-popover .resource-search{display:block!important;width:100%!important;height:38px!important;min-height:38px!important;margin:0 0 6px!important;
  padding:0 12px 0 36px!important;font-size:14px!important;border-radius:4px!important;background:#262626 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='%237d7d7d' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center/14px 14px no-repeat!important;
  border:1px solid #343434!important;color:#ededed!important}
html body[data-surface] dialog.settings-dialog .resource-popover .resource-search::placeholder{color:#7d7d7d}
html body[data-surface] dialog.settings-dialog .resource-options{max-height:min(44vh,320px)!important;padding:0 0 6px!important;scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
html body[data-surface] dialog.settings-dialog .resource-options::-webkit-scrollbar{width:8px}
html body[data-surface] dialog.settings-dialog .resource-options::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:999px}
html body[data-surface] dialog.settings-dialog .resource-category-label{padding:10px 10px 4px!important;font:600 10.5px/1.3 Inter,sans-serif!important;letter-spacing:.08em!important;color:#6f6f6f!important}

/* ---- Options ---- */
html body[data-surface] dialog.settings-dialog .resource-options label{display:flex!important;align-items:center!important;gap:10px!important;min-height:36px!important;padding:6px 10px!important;margin:0!important;
  border-radius:4px!important;font-size:14px!important;line-height:1.35!important;color:#d6d6d6!important;cursor:pointer;background:transparent!important}
html body[data-surface] dialog.settings-dialog .resource-options label:hover{background:#282828!important}
html body[data-surface] dialog.settings-dialog .resource-options label:has(input:checked){background:#2a2a2a!important}
html body[data-surface] dialog.settings-dialog .resource-options label:has(input:focus-visible){background:#303030!important}
html body[data-surface] dialog.settings-dialog .resource-options label:has(input:checked) .resource-name{color:#ffffff!important;font-weight:600}
html body[data-surface] dialog.settings-dialog .resource-symbol{display:inline-flex!important;align-items:center;justify-content:center;flex:none!important;width:16px;min-width:16px!important;font-size:14px;color:#7d7d7d!important}
html body[data-surface] dialog.settings-dialog .resource-name{flex:1 1 auto!important;min-width:0;color:#dedede!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body[data-surface] dialog.settings-dialog .resource-options label>small{flex:none;margin:0 0 0 auto!important;font-size:11px!important;line-height:1!important;opacity:1!important;color:#6a6a6a!important;font-variant-numeric:tabular-nums}
html body[data-surface] dialog.settings-dialog .role-color{width:10px!important;height:10px!important;border-radius:50%!important;border:0!important;box-shadow:none!important}

/* Single choice: no radio dot, a check mark on the chosen row */
html body[data-surface] dialog.settings-dialog .resource-options label>input[type=radio]{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;min-width:1px!important;min-height:1px!important;
  margin:0!important;padding:0!important;border:0!important;pointer-events:none}
html body[data-surface] dialog.settings-dialog .resource-options label:has(input[type=radio]:checked)::after{content:"";flex:none;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23f1d1a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-6.5'/%3E%3C/svg%3E") center/14px 14px no-repeat}

/* Multiple choice: a plain checkbox instead of a switch */
html body[data-surface] dialog.settings-dialog .resource-options label>input[type=checkbox]{display:block!important;position:relative!important;flex:0 0 18px!important;order:-1!important;
  width:18px!important;min-width:18px!important;max-width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;margin:0!important;padding:0!important;
  -webkit-appearance:none!important;appearance:none!important;border-radius:4px!important;background:transparent!important;border:1.5px solid #5a5a5a!important;cursor:pointer;transition:background .1s,border-color .1s}
html body[data-surface] dialog.settings-dialog .resource-options label>input[type=checkbox]::before{display:none!important}
html body[data-surface] dialog.settings-dialog .resource-options label>input[type=checkbox]:checked{background:#f1d1a7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none' stroke='%2320272e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-6.5'/%3E%3C/svg%3E") center/12px 12px no-repeat!important;border-color:#f1d1a7!important}
html body[data-surface] dialog.settings-dialog .resource-options label>input[type=checkbox]:checked::before{display:none!important}

/* Clear selection: a quiet footer row instead of a boxed button */
html body[data-surface] dialog.settings-dialog .resource-popover>.resource-clear{display:flex!important;align-items:center;justify-content:center;width:calc(100% + 16px)!important;min-height:40px!important;margin:0 -8px!important;padding:0 12px!important;
  border:0!important;border-top:1px solid #343434!important;border-radius:0!important;background:transparent!important;color:#9a9a9a!important;font-size:13px!important;font-weight:500}
html body[data-surface] dialog.settings-dialog .resource-popover>.resource-clear:hover{background:#262626!important;color:#ededed!important}

/* ID disclosure under the picker */
html body[data-surface] dialog.settings-dialog .manual-id-disclosure{margin-top:10px!important}
html body[data-surface] dialog.settings-dialog .manual-id-disclosure>summary{font-size:13px!important;font-weight:500!important;color:#8a8a8a!important}
html body[data-surface] dialog.settings-dialog .manual-id-disclosure>summary:hover{color:#ededed!important}

/* Emoji picker: same menu look */
html body[data-surface] dialog.settings-dialog .emoji-picker{background:#1f1f1f!important}
html body[data-surface] dialog.settings-dialog .emoji-picker>summary{background:#242424;gap:10px!important}
html body[data-surface] dialog.settings-dialog .emoji-picker>summary>span[aria-hidden]{flex:none;margin-left:auto;width:12px;height:8px;font-size:0!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239a9a9a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 8px no-repeat;transition:transform .15s ease}
html body[data-surface] dialog.settings-dialog .emoji-picker[open]>summary>span[aria-hidden]{transform:rotate(180deg)}
html body[data-surface] dialog.settings-dialog .emoji-picker[open]>summary{border-bottom:1px solid #343434}
html body[data-surface] dialog.settings-dialog .emoji-picker>.resource-search{display:block!important;width:calc(100% - 16px)!important;height:38px!important;min-height:38px!important;margin:8px!important;
  padding:0 12px 0 36px!important;font-size:14px!important;border-radius:4px!important;background:#262626 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='%237d7d7d' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center/14px 14px no-repeat!important;border:1px solid #343434!important;color:#ededed!important}
html body[data-surface] dialog.settings-dialog .emoji-options{display:grid!important;grid-template-columns:repeat(auto-fill,40px);gap:4px;padding:0 8px 10px!important}
html body[data-surface] dialog.settings-dialog .emoji-options>button{display:grid!important;place-items:center;width:40px!important;height:40px!important;min-height:0!important;padding:0!important;font-size:20px!important;
  border:0!important;border-radius:4px!important;background:transparent!important;cursor:pointer}
html body[data-surface] dialog.settings-dialog .emoji-options>button:hover{background:#2a2a2a!important}
html body[data-surface] dialog.settings-dialog .emoji-options>button img{width:24px;height:24px;object-fit:contain}
html body[data-surface] dialog.settings-dialog .emoji-empty{display:block;padding:0 12px 12px;color:#8a8a8a}

/* ==========================================================================
   v30 · Message builder (embed.html): arrangeable windows, Caesrov theme
   ========================================================================== */
html body[data-surface=builder]{--b-surface:#1c1c1c;--b-head:#202020;--b-raised:#242424;--b-line:#343434;--b-line2:#3a3a3a;--b-text:#ededed;--b-muted:#a1a1a1;--b-dim:#7d7d7d;--b-accent:#f1d1a7;--b-ink:#20272e;background:#262626!important;color:var(--b-text)}
html body[data-surface=builder] main:has(.sb-app){max-width:none!important;padding:0!important;min-height:0}
html body[data-surface=builder] footer{display:none}
html body[data-surface=builder] .sb-app{display:flex;flex-direction:column;background:transparent!important;min-height:calc(100dvh - 68px);--sb-chrome:236px}

/* ---- Toolbar ---- */
html body[data-surface=builder] .sb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 24px 14px;background:transparent!important;border:0!important}
html body[data-surface=builder] .sb-title{min-width:0}
html body[data-surface=builder] .sb-title-row{display:flex;align-items:center;gap:12px}
html body[data-surface=builder] .sb-toolbar h1{margin:0;font:700 24px/1.2 Inter,sans-serif!important;letter-spacing:-.02em;color:#f2f2f2}
html body[data-surface=builder] .sb-title p{margin:4px 0 0;max-width:62ch;font-size:13.5px!important;line-height:1.5!important;color:var(--b-muted)}
html body[data-surface=builder] .sb-toolbar .badge{padding:4px 8px;border:1px solid var(--b-line2);border-radius:3px;background:var(--b-surface);color:var(--b-muted);font:600 10.5px/1.2 Inter,sans-serif;letter-spacing:.06em}
html body[data-surface=builder] .sb-toolbar .toolbar{display:flex;align-items:center;gap:8px}
html body[data-surface=builder] .tb-sep{width:1px;height:22px;margin:0 4px;background:var(--b-line2)}
html body[data-surface=builder] .sb-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--b-line2);border-radius:6px;background:#262626;color:var(--b-text);font:500 13px/1 Inter,sans-serif;cursor:pointer;transition:background .12s,border-color .12s}
html body[data-surface=builder] .sb-app .btn:hover:not(:disabled){background:#2e2e2e;border-color:#4a4a4a;transform:none;box-shadow:none;filter:none}
html body[data-surface=builder] .sb-app .btn.icon{width:38px;padding:0;color:var(--b-muted)}
html body[data-surface=builder] .sb-app .btn.icon:hover:not(:disabled){color:var(--b-text)}
html body[data-surface=builder] .sb-app .btn.primary{background:var(--b-accent);border-color:var(--b-accent);color:var(--b-ink);font-weight:700}
html body[data-surface=builder] .sb-app .btn.primary:hover:not(:disabled){background:#f7dcb9;border-color:#f7dcb9}
html body[data-surface=builder] .sb-app .btn:disabled{opacity:.4;cursor:not-allowed}
html body[data-surface=builder] .sb-app .btn.danger{color:#eda7a7}
html body[data-surface=builder] .sb-app :focus,html body[data-surface=builder] .sb-app :focus-visible{outline:none!important;box-shadow:none!important}
html body[data-surface=builder] .sb-app .btn:focus-visible{border-color:#6a6a6a}

/* ---- Windows bar ---- */
html body[data-surface=builder] .ws-view{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 24px 12px;padding:8px 12px;border:1px solid var(--b-line);border-radius:6px;background:var(--b-surface)}
html body[data-surface=builder] .ws-view-label{font:600 12px/1 Inter,sans-serif;color:var(--b-dim)}
html body[data-surface=builder] .ws-chips,html body[data-surface=builder] .ws-presets{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
html body[data-surface=builder] .ws-sep{width:1px;height:20px;background:var(--b-line2)}
html body[data-surface=builder] .ws-chip,html body[data-surface=builder] .ws-preset,html body[data-surface=builder] .ws-reset{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 11px;border:1px solid var(--b-line2);border-radius:999px;background:transparent;color:var(--b-muted);font:500 12.5px/1 Inter,sans-serif;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
html body[data-surface=builder] .ws-chip i{width:8px;height:8px;border-radius:50%;background:transparent;border:1.5px solid #5a5a5a;transition:background .12s,border-color .12s}
html body[data-surface=builder] .ws-chip[aria-pressed=true]{color:var(--b-text);background:#262626;border-color:#4a4a4a}
html body[data-surface=builder] .ws-chip[aria-pressed=true] i{background:var(--b-accent);border-color:var(--b-accent)}
html body[data-surface=builder] .ws-chip:hover,html body[data-surface=builder] .ws-preset:hover,html body[data-surface=builder] .ws-reset:hover{color:var(--b-text);background:#262626}
html body[data-surface=builder] .ws-preset{border-radius:6px}
html body[data-surface=builder] .ws-preset[aria-pressed=true]{background:#2e2e2e;border-color:#4a4a4a;color:var(--b-text)}
html body[data-surface=builder] .ws-reset{margin-left:auto;border-color:transparent;border-radius:6px}
html body[data-surface=builder] .ws-tip{flex-basis:100%;font-size:12px;color:var(--b-dim)}
html body[data-surface=builder] .ws-hint{flex-basis:100%;font-size:12.5px;color:#e8c68c}
html body[data-surface=builder] .ws-hint[hidden]{display:none}
html body[data-surface=builder] .ws-hint button{padding:0;border:0;background:none;color:var(--b-accent);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- Board, windows, resize handles ---- */
html body[data-surface=builder] .ws-board{position:relative;display:grid;grid-auto-flow:column;align-items:stretch;flex:1 1 auto;gap:0;
  height:max(560px,calc(100dvh - 68px - var(--sb-chrome)));padding:0 24px 12px;overflow-x:auto;overflow-y:hidden}
html body[data-surface=builder] .ws-win{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--b-line);border-radius:6px;background:var(--b-surface);overflow:hidden}
html body[data-surface=builder] .ws-win[hidden]{display:none!important}
html body[data-surface=builder] .ws-win.is-lifted{position:relative;z-index:5;opacity:.94;border-color:#5a5a5a;box-shadow:0 14px 34px rgba(0,0,0,.55);cursor:grabbing}
html body[data-surface=builder] .ws-board.is-dragging,html body[data-surface=builder] .ws-board.is-dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
html body[data-surface=builder] .ws-board.is-resizing,html body[data-surface=builder] .ws-board.is-resizing *{cursor:col-resize!important;-webkit-user-select:none;user-select:none}
html body[data-surface=builder] .ws-head{display:flex;align-items:center;gap:6px;flex:none;min-height:50px;padding:0 8px 0 6px;border-bottom:1px solid var(--b-line);background:var(--b-head);cursor:grab}
html body[data-surface=builder] .ws-grip,html body[data-surface=builder] .ws-hide{display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--b-dim);cursor:inherit}
html body[data-surface=builder] .ws-hide{cursor:pointer}
html body[data-surface=builder] .ws-grip{touch-action:none}
html body[data-surface=builder] .ws-grip:hover,html body[data-surface=builder] .ws-hide:hover{background:#2a2a2a;color:var(--b-text)}
html body[data-surface=builder] .ws-grip:focus-visible,html body[data-surface=builder] .ws-hide:focus-visible{background:#303030;color:var(--b-text)}
html body[data-surface=builder] .ws-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}
html body[data-surface=builder] .ws-title h2{margin:0;flex:none;font:600 14px/1.3 Inter,sans-serif!important;color:var(--b-text);letter-spacing:0}
html body[data-surface=builder] .ws-title small{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--b-dim)}
html body[data-surface=builder] .ws-body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
html body[data-surface=builder] .ws-body::-webkit-scrollbar{width:8px}
html body[data-surface=builder] .ws-body::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:999px}

html body[data-surface=builder] .ws-split{position:relative;display:grid;place-items:center;cursor:col-resize;touch-action:none}
html body[data-surface=builder] .ws-split span{width:2px;height:36px;border-radius:2px;background:transparent;transition:background .12s,height .12s}
html body[data-surface=builder] .ws-split:hover span,html body[data-surface=builder] .ws-split:focus-visible span,html body[data-surface=builder] .ws-split.is-active span{height:64px;background:#6a6a6a}
html body[data-surface=builder] .ws-split.is-active span{background:var(--b-accent)}
html body[data-surface=builder] .ws-drop{position:absolute;z-index:6;border-radius:2px;background:var(--b-accent);pointer-events:none}
html body[data-surface=builder] .ws-empty{display:none;grid-column:1/-1;place-content:center;justify-items:center;gap:6px;border:1px dashed var(--b-line2);border-radius:6px;color:var(--b-muted);text-align:center}
html body[data-surface=builder] .ws-empty strong{color:var(--b-text);font-size:15px}
html body[data-surface=builder] .ws-board.is-empty .ws-empty{display:grid}

/* ---- Components window ---- */
html body[data-surface=builder] .ws-win[data-win=palette] .ws-body{padding:6px 14px 16px}
html body[data-surface=builder] .pal-group{padding:12px 0 4px}
html body[data-surface=builder] .pal-group+.pal-group{border-top:1px solid var(--b-line);margin-top:10px;padding-top:16px}
html body[data-surface=builder] .pal-group h3{margin:0;font:600 13px/1.3 Inter,sans-serif;color:var(--b-text)}
html body[data-surface=builder] .pal-group p{margin:3px 0 10px;font-size:12.5px!important;line-height:1.45!important;color:var(--b-dim)}
html body[data-surface=builder] .pal-item{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 6px;padding:8px 10px;border:1px solid var(--b-line);border-radius:6px;background:var(--b-raised);color:var(--b-text);text-align:left;cursor:pointer;transition:background .12s,border-color .12s}
html body[data-surface=builder] .pal-item:hover{background:#2a2a2a;border-color:#4a4a4a}
html body[data-surface=builder] .pal-item:active{cursor:grabbing}
html body[data-surface=builder] .pal-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:6px;background:#1c1c1c;border:1px solid var(--b-line);color:var(--b-accent)}
html body[data-surface=builder] .pal-text{display:grid;gap:2px;min-width:0}
html body[data-surface=builder] .pal-text b{font:600 13.5px/1.3 Inter,sans-serif}
html body[data-surface=builder] .pal-text small{margin:0;font-size:12px;line-height:1.35;color:var(--b-dim)}
html body[data-surface=builder] .pal-tip{margin:14px 2px 0;padding-top:12px;border-top:1px solid var(--b-line);font-size:12.5px!important;line-height:1.5!important;color:var(--b-dim)}
html body[data-surface=builder] .pal-saved{margin-top:14px}
html body[data-surface=builder] .pal-saved label{margin:0 0 6px;font:600 12.5px/1.3 Inter,sans-serif;color:var(--b-muted)}

/* ---- Message window ---- */
html body[data-surface=builder] .ws-win[data-win=canvas] .ws-body{padding:0}
html body[data-surface=builder] .sb-tabs{position:sticky;top:0;z-index:2;display:flex;gap:2px;padding:0 10px;background:var(--b-surface)!important;border-bottom:1px solid var(--b-line)!important;overflow-x:auto;scrollbar-width:none}
html body[data-surface=builder] .sb-tabs button{display:inline-flex;align-items:center;gap:6px;flex:none;padding:13px 12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--b-muted);font:500 13px/1 Inter,sans-serif;cursor:pointer}
html body[data-surface=builder] .sb-tabs button:hover{color:var(--b-text)}
html body[data-surface=builder] .sb-tabs button.active{color:var(--b-accent);border-bottom-color:var(--b-accent)}
html body[data-surface=builder] .sb-tabs small{margin:0;padding:2px 6px;border-radius:999px;background:#2a2a2a;color:var(--b-muted);font-size:10.5px}
html body[data-surface=builder] .sb-canvas-content{padding:18px 18px 28px}
html body[data-surface=builder] .sb-canvas-content h2,html body[data-surface=builder] .sb-canvas-content h3{font:600 14px/1.4 Inter,sans-serif!important;color:var(--b-text)}
html body[data-surface=builder] .sb-app label{display:block;margin:0 0 6px;font:600 12.5px/1.3 Inter,sans-serif;color:var(--b-muted)}
html body[data-surface=builder] .sb-app input:not([type=checkbox]):not([type=radio]):not([type=color]),html body[data-surface=builder] .sb-app textarea,html body[data-surface=builder] .sb-app select:not([multiple]):not([size]){width:100%;margin:0 0 14px;padding:10px 12px;border:1px solid var(--b-line2)!important;border-radius:6px!important;background-color:var(--b-raised)!important;color:var(--b-text)!important;font:14px/1.4 Inter,sans-serif;transition:border-color .12s}
html body[data-surface=builder] .sb-app select:not([multiple]):not([size]){padding-right:36px!important}
html body[data-surface=builder] .sb-app input:hover:not([type=checkbox]),html body[data-surface=builder] .sb-app textarea:hover,html body[data-surface=builder] .sb-app select:hover{border-color:#4a4a4a!important}
html body[data-surface=builder] .sb-app input:focus:not([type=checkbox]),html body[data-surface=builder] .sb-app textarea:focus,html body[data-surface=builder] .sb-app select:focus{border-color:#6a6a6a!important}
html body[data-surface=builder] .sb-app textarea{min-height:110px}
html body[data-surface=builder] .sb-app input[type=checkbox]{accent-color:var(--b-accent)}
html body[data-surface=builder] .sb-hint,html body[data-surface=builder] .sb-canvas-content small{font-size:12.5px;line-height:1.5;color:var(--b-dim)}
html body[data-surface=builder] .sb-component-heading{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px;color:var(--b-muted)}
html body[data-surface=builder] .sb-component-heading h3{margin:0}
html body[data-surface=builder] .sb-drop,html body[data-surface=builder] .sb-empty{border:1px dashed var(--b-line2);border-radius:6px;background:transparent;color:var(--b-muted);font-size:13px;text-align:center}
html body[data-surface=builder] .sb-empty{padding:34px 16px}
html body[data-surface=builder] .sb-drop{padding:8px;min-height:150px}
html body[data-surface=builder] .sb-node{margin:8px 0;padding:4px;border:1px solid var(--b-line);border-radius:6px;background:var(--b-raised);cursor:pointer;transition:border-color .12s,background .12s}
html body[data-surface=builder] .sb-node:hover{border-color:#4a4a4a}
html body[data-surface=builder] .sb-node.selected{border-color:var(--b-accent)!important;background:#272521;box-shadow:none!important}
html body[data-surface=builder] .sb-node-line small{color:var(--b-dim);letter-spacing:.06em}
html body[data-surface=builder] .sb-node-line [data-node-summary]{color:var(--b-text);font-size:13px}
html body[data-surface=builder] .sb-grip{color:var(--b-dim)}
html body[data-surface=builder] .sb-children{border-left:1px solid var(--b-line2);margin:2px 4px 6px 14px}
html body[data-surface=builder] .sb-response-bar{align-items:flex-end;gap:10px}
html body[data-surface=builder] .sb-response-bar .btn{margin-bottom:14px}

/* ---- Properties window ---- */
html body[data-surface=builder] .ws-win[data-win=properties] .ws-body{padding:0}
html body[data-surface=builder] .sb-props-content{position:static!important;max-height:none!important;overflow:visible!important;padding:18px!important}
html body[data-surface=builder] .sb-props-content .sb-empty{margin-top:6px}
html body[data-surface=builder] .sb-property-title{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--b-line)}
html body[data-surface=builder] .sb-property-title h2{margin:0;font:600 15px/1.3 Inter,sans-serif!important}
html body[data-surface=builder] .sb-option{margin:14px 0;padding:14px 0 0;border-top:1px solid var(--b-line)}
html body[data-surface=builder] .sb-option h3{margin:0 0 10px;font:600 13px/1.3 Inter,sans-serif!important;color:var(--b-text)}
html body[data-surface=builder] .sb-app .edit-group{margin:14px 0;padding:14px;border:1px solid var(--b-line);border-radius:6px;background:transparent}
html body[data-surface=builder] .sb-props-content .btn{min-height:34px;padding:0 12px;font-size:12.5px}

/* ---- Preview window ---- */
html body[data-surface=builder] .ws-win[data-win=preview] .ws-body{display:flex;flex-direction:column;padding:0;background:#313338}
html body[data-surface=builder] #preview{flex:1 0 auto}
html body[data-surface=builder] #preview .discord{min-height:0;padding:20px 16px;background:#313338!important}
html body[data-surface=builder] #preview .embed{background:#2b2d31!important}
html body[data-surface=builder] #preview .v2-container{background:#2b2d31!important;border:1px solid #3f4147!important}
html body[data-surface=builder] .sb-delivery{flex:none;padding:16px 18px 18px;border-top:1px solid var(--b-line)!important;background:var(--b-surface)}
html body[data-surface=builder] .sb-delivery h3{margin:0 0 12px;font:600 13px/1.3 Inter,sans-serif!important;color:var(--b-text)}
html body[data-surface=builder] .sb-delivery .btn{width:100%}
html body[data-surface=builder] .sb-delivery small{display:block;margin-top:10px;font-size:12px;line-height:1.5;color:var(--b-dim)}

/* ---- Status bar ---- */
html body[data-surface=builder] .sb-status{display:flex;justify-content:space-between;gap:16px;margin:0 24px 16px;padding:10px 14px;border:1px solid var(--b-line);border-radius:6px;background:var(--b-surface);color:var(--b-muted);font-size:12.5px}

/* ---- Smaller screens: windows stack, in the order you chose ---- */
@media(max-width:900px){
  html body[data-surface=builder] .sb-toolbar{padding:16px 16px 12px}
  html body[data-surface=builder] .sb-toolbar .toolbar{flex-wrap:wrap}
  html body[data-surface=builder] .ws-view{margin:0 16px 12px}
  html body[data-surface=builder] .ws-reset{margin-left:0}
  html body[data-surface=builder] .ws-tip{display:none}
  html body[data-surface=builder] .ws-board{display:flex!important;flex-direction:column;gap:12px;height:auto;padding:0 16px 12px;overflow:visible}
  html body[data-surface=builder] .ws-split{display:none!important}
  html body[data-surface=builder] .ws-win{flex:none;max-height:78dvh}
  html body[data-surface=builder] .ws-win[data-win=preview]{min-height:320px}
  html body[data-surface=builder] .ws-head{cursor:default}
  html body[data-surface=builder] .ws-title small{display:none}
  html body[data-surface=builder] .sb-status{margin:0 16px 16px}
}
@media(prefers-reduced-motion:reduce){html body[data-surface=builder] *{transition:none!important}}

/* v30b · title bars: show the hint only when the window is wide enough */
html body[data-surface=builder] .ws-win{container-type:inline-size}
@container (max-width:330px){html body[data-surface=builder] .ws-title small{display:none}}