:root{--bg:#eef4fb;--panel:#ffffff;--panel-2:#e5eef8;--line:#d6e2f0;--text:#1b2a3c;--muted:#64798f;--purple:#4f8fdb;--purple-2:#3b74bd;--green:#45d39a;--gold:#e7b84e;--red:#ef6f83;--blue:#4f8fdb;--radius:16px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(900px 500px at 76% -10%,#322a61 0%,transparent 56%),linear-gradient(135deg,#111015,#17151d 56%,#14131b);color:var(--text);font-family:Cairo,system-ui,sans-serif;min-height:100vh}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;color:inherit}.hidden{display:none!important}.ambient{position:fixed;pointer-events:none;filter:blur(70px);opacity:.17;border-radius:50%}.ambient-a{width:260px;height:260px;background:#4f8fdb;left:37%;top:8%}.ambient-b{width:220px;height:220px;background:#173a5e;right:3%;bottom:4%}.app{display:flex;min-height:100vh}.sidebar{width:248px;flex:0 0 248px;border-left:1px solid var(--line);background:rgba(19,18,24,.78);padding:25px 15px 18px;display:flex;flex-direction:column;gap:25px}.brand{display:flex;align-items:center;gap:10px;padding:0 10px}.brand-symbol,.login-mark{width:35px;height:35px;border-radius:11px;background:linear-gradient(145deg,#8fc4ff,#3d7fd1);display:grid;place-items:center;font:800 21px 'Space Grotesk';color:white;box-shadow:0 8px 24px #3d7fd144}.brand strong{font:700 24px 'Space Grotesk';letter-spacing:.4px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.3px;text-transform:uppercase}.server{background:#22202a;border:1px solid var(--line);border-radius:13px;padding:11px;display:flex;align-items:center;gap:9px}.server-icon{width:34px;height:34px;border-radius:10px;background:#5549a9;display:grid;place-items:center;font-weight:800}.server b{font-size:12px}.server small{display:block;color:var(--muted);font-size:10px}.server>span{margin-right:auto;color:var(--muted)}nav{display:flex;flex-direction:column;gap:4px}.nav-label{font-size:10px;color:#746e80;text-transform:uppercase;letter-spacing:1.1px;margin:7px 10px 5px}.nav-item{background:transparent;border-radius:10px;width:100%;height:42px;display:flex;align-items:center;gap:11px;padding:0 12px;color:#aaa4b4;text-align:right;font-size:12px;transition:.2s}.nav-item i{font-style:normal;font-size:18px;width:19px;text-align:center;color:#88819c}.nav-item b{margin-right:auto;background:#302c47;color:#b9b0ff;border-radius:20px;padding:2px 7px;font-size:10px}.nav-item:hover{background:#25222f;color:white}.nav-item.active{background:linear-gradient(90deg,#665bd1,#4b437e);color:#fff;box-shadow:0 7px 20px #5146b833}.nav-item.active i{color:#dedaff}.sidebar-bottom{margin-top:auto;display:grid;gap:4px}.muted{color:#746e80}.main{flex:1;min-width:0;padding:27px 38px 45px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.breadcrumb{color:#777182;font-size:11px}.breadcrumb span{color:#b4aec1}.topbar h2{font-size:25px;margin:6px 0 0;font-weight:700;letter-spacing:-.4px}.top-actions{display:flex;align-items:center;gap:13px}.live{font:700 10px 'Space Grotesk';letter-spacing:1px;color:var(--green);background:#1a332d;border:1px solid #235844;padding:6px 9px;border-radius:20px}.live i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-left:5px}.user-avatar{width:35px;height:35px;border-radius:50%;background:#3d7fd1;display:grid;place-items:center;font-weight:bold;overflow:hidden}.user-avatar img,.avatar img{width:100%;height:100%;object-fit:cover}.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:var(--panel);border-radius:9px;color:#aaa2b5;font-size:18px}.view{max-width:1350px}.eyebrow{font:700 10px 'Space Grotesk';letter-spacing:2px;color:#7fb8f5}.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.hero h1{font-size:28px;line-height:1.25;margin:5px 0}.hero p{color:var(--muted);font-size:12px;margin:0}.actions{display:flex;gap:8px}.primary,.secondary,.danger{border-radius:10px;padding:10px 15px;font-size:12px;font-weight:700}.primary{background:var(--purple);box-shadow:0 8px 22px #4f8fdb44}.primary:hover{background:#6fa8e0}.secondary{background:var(--panel-2);border:1px solid var(--line);color:#c5c0ce}.danger{background:#512a39;color:#ffb4c0}.wide{width:100%;margin:22px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px}.stat,.panel,.staff-card,.request-card{background:rgba(29,28,36,.9);border:1px solid var(--line);border-radius:var(--radius)}.stat{padding:18px;min-height:112px}.stat .stat-icon{color:var(--purple);font-size:21px}.stat strong{display:block;font:700 28px 'Space Grotesk';margin-top:9px}.stat span{color:var(--muted);font-size:11px}.stat small{display:block;color:var(--green);font-size:10px;margin-top:4px}.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.panel-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.panel-head h3{font-size:13px;margin:0}.panel-head p{font-size:10px;color:var(--muted);margin:4px 0 0}.panel-body{padding:18px}.empty{min-height:180px;display:grid;place-items:center;text-align:center;color:#777180;font-size:12px}.empty b{display:block;color:#aaa3b5;margin-bottom:5px}.staff-list{display:grid;gap:8px}.staff-row{display:flex;align-items:center;gap:11px;padding:11px;border-bottom:1px solid #2b2932}.staff-row:last-child{border-bottom:0}.avatar{width:34px;height:34px;border-radius:11px;overflow:hidden;background:#473e80;display:grid;place-items:center;font-weight:700}.staff-row .meta{flex:1}.staff-row b{font-size:12px}.staff-row small{display:block;color:var(--muted);font-size:10px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-left:4px}.rate{color:var(--gold);font-size:11px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:15px}.section-head h1{margin:0;font-size:23px}.section-head p{color:var(--muted);font-size:11px;margin:5px 0 0}.search{background:#17161c;border:1px solid var(--line);border-radius:10px;color:white;padding:11px 14px;outline:0;width:270px;font-size:12px}.search:focus{border-color:var(--purple)}.staff-layout{display:grid;grid-template-columns:minmax(420px,1fr) .95fr;gap:18px}.staff-grid{display:grid;gap:8px}.staff-card{overflow:hidden}.staff-main{display:flex;align-items:center;padding:15px;gap:12px}.staff-card .avatar{width:43px;height:43px;border-radius:13px}.staff-card .main-info{flex:1}.staff-card .main-info b{font-size:13px}.staff-card .main-info small{display:block;color:var(--muted);font-size:10px}.score{font:700 19px 'Space Grotesk';text-align:left}.score small{display:block;color:var(--muted);font:10px Cairo}.card-foot{border-top:1px solid var(--line);padding:8px 15px;color:#aaa3b0;font-size:10px;display:flex;gap:20px}.profile{min-height:410px;overflow:hidden}.profile-cover{height:86px;background:linear-gradient(120deg,#382d73,#1c223c);background-size:cover;background-position:center}.profile-content{padding:0 20px 20px;margin-top:-25px}.profile-avatar{width:64px;height:64px;border:4px solid var(--panel);border-radius:19px}.profile-content h2{font-size:18px;margin:10px 0 0}.profile-content .handle{color:var(--muted);font-size:11px}.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.mini-stat{background:#151419;border:1px solid var(--line);border-radius:10px;padding:11px}.mini-stat small{color:var(--muted);display:block;font-size:10px}.mini-stat b{display:block;font:700 18px 'Space Grotesk';margin-top:5px}.bars{margin-top:18px}.bar-line{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:10px}.bar-line label{width:30px;color:var(--muted)}.bar{height:6px;background:#36333e;border-radius:9px;flex:1;overflow:hidden}.bar i{display:block;height:100%;background:var(--green);border-radius:9px}.request-list{display:grid;gap:10px}.request-card{padding:16px;display:flex;align-items:center;gap:13px}.request-card .request-content{flex:1}.request-card b{font-size:13px}.request-card p{font-size:11px;color:var(--muted);margin:5px 0}.tag{font-size:10px;padding:4px 8px;border-radius:15px;background:#16233a;color:#9cc7f5}.tag.pending{background:#45391f;color:#f3c66f}.tag.approved{background:#1e3a31;color:#63dfad}.tag.rejected{background:#442934;color:#ff9fb0}.request-actions{display:flex;gap:6px}.request-actions button{padding:7px 10px;border-radius:7px;font-size:10px}.login-shell{width:min(430px,90%);min-height:100vh;margin:auto;display:flex;flex-direction:column;justify-content:center;padding:35px}.login-shell .login-mark{width:52px;height:52px;font-size:30px;margin-bottom:24px}.login-shell h1{font-size:42px;line-height:1.23;margin:10px 0;letter-spacing:-1px}.login-shell h1 em{color:#7fb8f5;font-style:normal}.login-shell p{color:var(--muted);font-size:13px;line-height:1.9}.login-shell small{display:block;text-align:center;color:#716c7b;font-size:10px}.toast{position:fixed;left:25px;bottom:25px;z-index:5;background:#302b47;border:1px solid #50477d;padding:12px 16px;border-radius:10px;font-size:12px;opacity:0;transform:translateY(12px);transition:.25s}.toast.show{opacity:1;transform:none}@media(max-width:1050px){.sidebar{width:215px;flex-basis:215px}.main{padding:25px}.stats-grid{grid-template-columns:repeat(2,1fr)}.staff-layout,.grid-2{grid-template-columns:1fr}}@media(max-width:700px){.sidebar{width:67px;flex-basis:67px;padding:18px 9px}.brand div:not(.brand-symbol),.server>div:not(.server-icon),.server>span,.nav-item span,.nav-item b,.nav-label{display:none}.brand{padding:0 7px}.server{padding:8px;justify-content:center}.nav-item{justify-content:center;padding:0}.main{padding:20px 15px}.topbar h2{font-size:19px}.live{display:none}.hero,.section-head{display:block}.hero .actions,.section-head .search{margin-top:15px;width:100%}.stats-grid{gap:8px}.stat{padding:13px;min-height:100px}.stat strong{font-size:23px}.staff-layout{display:block}.profile{margin-top:16px}.login-shell h1{font-size:36px}}

.server{width:100%;text-align:right}.status-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.status-choice{background:#17161c;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:right;font-weight:700}.status-choice span{display:block;color:var(--muted);font-size:10px;margin-top:7px}.status-choice.selected{border-color:var(--purple);background:#292342;box-shadow:0 0 0 1px var(--purple)}.custom-status-form{display:grid;grid-template-columns:1fr 190px;gap:12px;padding:18px;border-top:1px solid var(--line)}.custom-status-form label{display:grid;gap:7px;color:var(--muted);font-size:11px}.custom-status-form textarea,.custom-status-form input{background:#151419;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:10px;outline:0;font-size:12px}.custom-status-form textarea{min-height:100px;resize:vertical}.custom-status-form button{align-self:end;height:40px}@media(max-width:700px){.status-controls{grid-template-columns:1fr 1fr}.custom-status-form{grid-template-columns:1fr}}
.login-logo{width:72px;height:72px;border-radius:22px;margin-bottom:24px;filter:drop-shadow(0 12px 28px #3d7fd166)}.brand-symbol{object-fit:cover;padding:0!important}.server img{display:block}.server{cursor:pointer}
.login-link{text-decoration:none;text-align:center;display:block}
.setup-shell{max-width:980px;margin:30px auto;display:grid;grid-template-columns:.72fr 1.28fr;gap:22px;align-items:start}.setup-intro{padding:25px 8px}.setup-intro h1{font-size:35px;line-height:1.25;margin:9px 0}.setup-intro p{color:var(--muted);font-size:13px;line-height:2;max-width:320px}.setup-progress{margin-top:35px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.setup-progress i{width:10px;height:10px;background:var(--green);border-radius:50%;box-shadow:0 0 0 7px #45d39a1f}.setup-panel{overflow:hidden}.setup-form{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.setup-field{display:grid;gap:7px}.setup-field span{font-size:11px;color:#aaa3b5}.setup-field select{width:100%;background:#151419;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:11px;outline:0;font-size:12px}.setup-field select:focus{border-color:var(--purple)}.setup-form .wide{grid-column:1/-1;margin:8px 0 0}@media(max-width:800px){.setup-shell{grid-template-columns:1fr;margin:10px 0}.setup-intro{padding:10px 0}.setup-intro h1{font-size:28px}.setup-form{grid-template-columns:1fr}}

@keyframes rift-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes rift-pulse{0%,100%{transform:scale(1);opacity:.14}50%{transform:scale(1.12);opacity:.24}}@keyframes rift-glow{0%,100%{box-shadow:0 0 0 rgba(129,117,245,0)}50%{box-shadow:0 12px 45px rgba(129,117,245,.16)}}.ambient-a{animation:rift-pulse 9s ease-in-out infinite}.ambient-b{animation:rift-pulse 12s ease-in-out infinite reverse}.view{animation:rift-rise .42s cubic-bezier(.2,.7,.2,1) both}.stat,.panel,.staff-card,.request-card{animation:rift-rise .45s cubic-bezier(.2,.7,.2,1) both}.stats-grid .stat:nth-child(2){animation-delay:.05s}.stats-grid .stat:nth-child(3){animation-delay:.1s}.stats-grid .stat:nth-child(4){animation-delay:.15s}.panel:hover,.staff-card:hover,.request-card:hover{border-color:#514878;transform:translateY(-2px);transition:border-color .25s,transform .25s}.primary{animation:rift-glow 4s ease-in-out infinite}.login-shell{animation:rift-rise .65s cubic-bezier(.2,.7,.2,1) both}.setup-shell{animation:rift-rise .55s cubic-bezier(.2,.7,.2,1) both}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.resignation-create{margin-bottom:16px;border-color:#4b4277;animation:rift-rise .35s ease both}.resignation-create .setup-form{grid-template-columns:1fr 1fr}.resignation-create input,.resignation-create textarea{width:100%;background:#151419;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:11px;outline:0;font-size:12px}.resignation-create textarea{min-height:82px;resize:vertical}.resignation-create input:focus,.resignation-create textarea:focus{border-color:var(--purple)}.resignation-create .setup-field:nth-child(3),.resignation-create .setup-field:nth-child(4){grid-column:auto}.request-actions{display:flex;gap:6px;flex-wrap:wrap}.request-actions button{white-space:nowrap}@media(max-width:800px){.resignation-create .setup-form{grid-template-columns:1fr}.resignation-create .setup-field:nth-child(3),.resignation-create .setup-field:nth-child(4){grid-column:1}}
.profile-report-note{margin:16px 0;padding:12px;border:1px solid #38334d;border-radius:10px;background:#211d31}.profile-report-note span{display:block;color:#c0b8ff;font-weight:700;font-size:11px}.profile-report-note small{display:block;color:var(--muted);font-size:10px;margin-top:4px}

.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(8,7,13,.72);backdrop-filter:blur(12px);animation:modal-fade .2s ease both}.modal-backdrop.hidden{display:none}@keyframes modal-fade{from{opacity:0}to{opacity:1}}@keyframes modal-rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}.modal-card{position:relative;width:min(430px,100%);border:1px solid #3a3548;border-radius:18px;background:linear-gradient(145deg,#25232c,#1b1a21);box-shadow:0 25px 80px #0009;padding:25px;animation:modal-rise .28s cubic-bezier(.2,.7,.2,1) both}.modal-close{position:absolute;top:16px;left:16px;width:28px;height:28px;border-radius:50%;background:transparent;color:#9d97a9;font-size:23px;line-height:1}.modal-close:hover{background:#35303f;color:white}.modal-heading{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}.modal-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#7fb8f5;background:#142236;font-size:20px}.modal-heading h2{font-size:17px;margin:0}.modal-heading p{font-size:10px;color:var(--muted);margin:4px 0 0}.modal-form{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;padding-top:20px}.modal-field{display:grid;gap:7px}.modal-field.full,.modal-section-label.full,.modal-hint.full,.modal-actions.full{grid-column:1/-1}.modal-field span,.modal-section-label{font-size:10px;color:#aaa3b5;text-transform:uppercase;letter-spacing:.7px}.modal-field span b{color:var(--red)}.modal-field span em,.modal-section-label small{font-style:normal;color:#777183;font-size:9px;margin-right:5px}.modal-field input{width:100%;height:40px;border:1px solid var(--line);border-radius:9px;background:#151419;color:var(--text);padding:0 11px;outline:0;font-size:12px}.modal-field input:focus{border-color:var(--purple);box-shadow:0 0 0 3px #4f8fdb1c}.modal-section-label{padding-top:3px}.modal-hint{color:#7e7889;font-size:10px;line-height:1.6;margin:0}.modal-actions{display:flex;gap:9px;margin-top:4px}.modal-actions button{flex:1;height:41px}.modal-actions .secondary{border:1px solid var(--line)}@media(max-width:480px){.modal-card{padding:20px}.modal-form{grid-template-columns:1fr 1fr}.modal-field.full,.modal-section-label.full,.modal-hint.full,.modal-actions.full{grid-column:1/-1}}
.shift-panel-form{display:flex;gap:10px}.shift-panel-form select{flex:1;background:#151419;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:11px;outline:0}.shift-panel-form button{min-width:145px}@media(max-width:650px){.shift-panel-form{display:grid}.shift-panel-form button{width:100%}}
.command-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:900px}.command-card{position:relative;display:flex;align-items:center;gap:13px;min-height:104px;text-align:right;padding:18px;background:linear-gradient(145deg,#24222b,#1b1a21);border:1px solid var(--line);border-radius:15px;transition:.25s;overflow:hidden}.command-card:hover{border-color:#4f8fdb;transform:translateY(-3px);box-shadow:0 14px 35px #4f8fdb29}.command-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#30295a;color:#afa6ff;font-size:22px}.command-copy{flex:1}.command-copy b{display:block;font-size:13px}.command-copy small{display:block;color:var(--muted);font-size:10px;line-height:1.7;margin-top:5px}.command-arrow{color:#9e96ff;font-size:18px}.command-card em{position:absolute;bottom:9px;right:72px;color:#777183;font-style:normal;font-size:9px;opacity:0;transition:.2s}.command-card:hover em{opacity:1}.command-note{max-width:900px;margin-top:18px}@media(max-width:700px){.command-grid{grid-template-columns:1fr}}

.message-template{margin:0 20px 20px;padding:16px;border:1px solid #38334d;border-radius:13px;background:linear-gradient(145deg,#211d31,#191820)}.message-template h3{margin:0;font-size:13px;color:#c7c0ff}.message-template p{margin:5px 0 13px;color:var(--muted);font-size:10px}.message-template form{display:grid;gap:9px}.message-template input,.message-template textarea{width:100%;background:#151419;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:10px;outline:0;font-size:11px}.message-template textarea{min-height:70px;resize:vertical}.message-template input:focus,.message-template textarea:focus{border-color:var(--purple)}.message-template small{color:#81798e;font-size:10px}.message-template button{justify-self:start}

html[dir="ltr"] body{font-family:'Space Grotesk',Cairo,system-ui,sans-serif;background:linear-gradient(135deg,#0f1420 0%,#101a2b 58%,#0b1420 100%)}html[dir="ltr"] .sidebar{border-left:0;border-right:1px solid var(--line);padding:24px 14px}html[dir="ltr"] .main{padding:25px 32px}html[dir="ltr"] .nav-item{text-align:left}html[dir="ltr"] .server{text-align:left}html[dir="ltr"] .server>span{margin-left:auto;margin-right:0}html[dir="ltr"] .hero,html[dir="ltr"] .section-head{align-items:flex-end}html[dir="ltr"] .topbar h2,html[dir="ltr"] h1,html[dir="ltr"] h2,html[dir="ltr"] h3{letter-spacing:-.35px}html[dir="ltr"] .panel,html[dir="ltr"] .stat,html[dir="ltr"] .staff-card,html[dir="ltr"] .request-card{border-radius:12px}html[dir="ltr"] .stats-grid{gap:12px}html[dir="ltr"] .stat{min-height:126px}html[dir="ltr"] .stat strong{font-size:30px}html[dir="ltr"] .panel-head{padding:15px 17px}html[dir="ltr"] .panel-body{padding:15px 17px}html[dir="ltr"] .login-shell{text-align:left}html[dir="ltr"] .login-shell .wide{align-self:flex-start}@media(max-width:700px){html[dir="ltr"] .main{padding:18px 14px}}
.leaderboard{padding:8px 18px 16px}.leader-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);animation:rift-rise .4s ease both}.leader-row:last-child{border-bottom:0}.rank{width:28px;color:#8b82e8;font:700 14px 'Space Grotesk'}.leader-meta{flex:1}.leader-meta b{display:block;font-size:12px}.leader-meta small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.leader-stat{text-align:right;min-width:55px}.leader-stat b{display:block;font:700 20px 'Space Grotesk';color:#c4bdff}.leader-stat small{color:var(--muted);font-size:9px}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px}.rule-grid div{padding:16px;background:#17161c;border:1px solid var(--line);border-radius:10px}.rule-grid b{display:block;color:#7fb8f5;font:700 22px 'Space Grotesk'}.rule-grid span{display:block;color:var(--muted);font-size:10px;margin-top:5px}@media(max-width:650px){.rule-grid{grid-template-columns:1fr}.leader-row .secondary{padding:7px}}

.personal-points{margin-bottom:16px}.personal-points .panel-head{align-items:center}.personal-points .panel-head .avatar{width:38px;height:38px}.personal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);padding:1px}.personal-grid>div{background:var(--panel);padding:18px 14px}.personal-grid b{display:block;font:700 25px 'Space Grotesk';color:#9cc7f5}.personal-grid span{display:block;color:var(--muted);font-size:10px;margin-top:5px}@media(max-width:900px){.personal-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:500px){.personal-grid{grid-template-columns:repeat(2,1fr)}}

.staff-main{position:relative}.more-button{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;width:30px;height:30px;border-radius:7px;cursor:pointer}.more-button:hover{background:var(--panel-2);color:var(--text)}.profile-content{position:relative}.profile-more{position:absolute;top:16px;right:18px;background:var(--panel-2)}
.action-modal{max-width:460px}.action-modal .modal-form{grid-template-columns:1fr;gap:14px;padding-top:18px}.adjust-tabs.full,.adjust-help.full{grid-column:1/-1}.adjust-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px}.adjust-tab{border:0;border-radius:8px;background:transparent;color:var(--muted);padding:10px 8px;font-weight:700;cursor:pointer}.adjust-tab.active{background:var(--accent);color:#fff}.adjust-help{color:var(--muted);font-size:13px;line-height:1.45;margin:2px 0 8px}.modal-field span{display:flex;justify-content:space-between;gap:12px}.modal-field span small{color:var(--muted);font-weight:500}.action-modal .modal-field input{height:42px}

.profile-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.profile-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.profile-metric{min-height:86px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);display:flex;flex-direction:column;justify-content:center}.profile-metric small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.profile-metric strong{margin-top:7px;color:var(--text);font-size:24px;line-height:1}.profile-metric.rating strong{color:#f0c64f}.profile-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}.profile-actions button{min-width:0}.profile-history{margin-top:18px}.profile-history .panel-head{margin-bottom:8px}@media(max-width:720px){.profile-metrics{grid-template-columns:1fr}.profile-actions{grid-template-columns:1fr}}
.recent-ratings{margin-top:18px}.rating-list{display:grid;gap:8px}.rating-entry{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}.rating-entry-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.rating-entry-head b{color:var(--text);font-size:12px}.rating-stars{color:#f0c64f;letter-spacing:1px;white-space:nowrap}.rating-entry p{margin:8px 0 4px;color:var(--text);font-size:12px}.rating-entry small{color:var(--muted);font-size:10px}
.rating-score-5 .rating-stars,.rating-score-5 .bar i{color:#35c48d!important;background:#35c48d!important}.rating-score-4 .rating-stars,.rating-score-4 .bar i{color:#3bb7d6!important;background:#3bb7d6!important}.rating-score-3 .rating-stars,.rating-score-3 .bar i{color:#f0c64f!important;background:#f0c64f!important}.rating-score-2 .rating-stars,.rating-score-2 .bar i{color:#f29d49!important;background:#f29d49!important}.rating-score-1 .rating-stars,.rating-score-1 .bar i{color:#ef6f83!important;background:#ef6f83!important}
.profile-content{position:relative}.profile-tools{position:absolute;top:14px;right:16px;display:flex;gap:8px}.profile-manage,.profile-close{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);font-size:19px;cursor:pointer;box-shadow:0 5px 14px #0002}.profile-manage{color:#7fb8f5}.profile-close{color:var(--muted);font-size:25px;line-height:1}.profile-manage:hover{background:var(--purple);color:#fff;transform:translateY(-1px)}.profile-close:hover{background:#ef6f83;color:#fff}.my-rating-badge{padding:8px 11px;border:1px solid #5b4b1b;border-radius:10px;background:#2a2515;color:#f0c64f;font-size:11px}.my-rating-badge.hidden{display:none}

.report-card{position:relative;overflow:hidden;display:block;padding:0}.report-cover{height:88px;background:var(--panel-2) center/cover no-repeat;border-bottom:1px solid var(--line)}.report-accent{position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--accent)}.report-card .request-content{padding:14px 20px 18px}.report-identity{display:flex;align-items:center;gap:10px}.report-identity img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--accent)}.report-identity b,.report-identity small{display:block}.report-identity b{font-size:13px}.report-identity small{margin-top:3px;color:var(--muted);font-size:10px}.report-card .request-content p{margin:9px 0;color:var(--muted);font-size:11px}.report-metrics{display:flex;flex-wrap:wrap;gap:7px}.report-metrics span{padding:5px 8px;border:1px solid var(--line);border-radius:7px;color:var(--accent);background:var(--panel-2);font-size:10px}.report-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.report-actions button{min-height:32px;padding:6px 12px;font-size:11px}
.report-action-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(3,8,16,.72)}.report-action-modal.hidden{display:none}.report-action-dialog{position:relative;width:min(460px,100%);padding:24px;border:1px solid var(--theme-line);border-radius:18px;background:var(--theme-surface);box-shadow:0 24px 70px #0009}.report-action-dialog h3{margin:0 0 6px}.report-action-dialog p{margin:0 0 16px;color:var(--muted);font-size:12px}.report-action-dialog textarea{width:100%;resize:vertical;background:var(--theme-bg-deep);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px}.report-action-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.report-action-buttons button{min-height:38px}
.manage-modal{position:relative;width:min(385px,100%);padding:25px;border:1px solid #3a3548;border-radius:17px;background:linear-gradient(145deg,#26242d,#1c1b22);box-shadow:0 25px 80px #0009;animation:modal-rise .28s cubic-bezier(.2,.7,.2,1) both}.manage-modal h2{font-size:17px;margin:0 0 22px}.manage-modal h2 span{color:#aaa2ff}.manage-options{display:grid;gap:10px}.manage-option{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:12px 14px;border:1px solid #393541;border-radius:12px;background:#232129;text-align:left;color:var(--text);transition:.2s}.manage-option:hover{border-color:var(--purple);background:#2a2735;transform:translateY(-1px)}.manage-option span{flex:1}.manage-option b{display:block;font-size:12px}.manage-option small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.manage-option em{font-style:normal;color:#8f88a4;font-size:22px}.manage-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;font-style:normal;font-size:19px}.manage-icon.adjust{background:#28265b;color:#8990ff}.manage-icon.reset{background:#43371f;color:#f0c04e}.manage-icon.remove{background:#482b37;color:#ff6f86}

.top-actions{gap:9px}.theme-control{height:34px;padding:0 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:#c5bfd0;font-size:10px;outline:0}.identity{display:flex;align-items:center;gap:7px;padding:3px 8px 3px 3px;border:1px solid var(--line);border-radius:18px;background:#201e27;color:#d9d4e1;font-size:10px}.identity .user-avatar{width:29px;height:29px}.identity img{width:100%;height:100%;object-fit:cover;border-radius:50%}.theme-light-gray{--bg:#eef0f4;--panel:#fff;--panel-2:#f6f7f9;--line:#d7dbe3;--text:#20242c;--muted:#707783;--purple:#5f68d9;--purple-2:#4d55b9;--green:#269b72}.theme-light-gray body{background:linear-gradient(135deg,#f7f8fa,#e9ecf2)}.theme-light-gray .sidebar{background:#f8f9fb}.theme-light-gray .stat,.theme-light-gray .panel,.theme-light-gray .staff-card{background:#fff}.theme-light-gray .search,.theme-light-gray .modal-field input{background:#f4f5f7;color:var(--text)}.theme-graphite{--bg:#15171a;--panel:#202327;--panel-2:#272a2f;--line:#353a42;--text:#f0f2f4;--muted:#969da7;--purple:#9b8cff;--purple-2:#7667dc;--green:#58d6a0}.theme-graphite body{background:linear-gradient(135deg,#111315,#1b1e22 60%,#23202d)}.theme-slate{--bg:#161a21;--panel:#202631;--panel-2:#29313f;--line:#384253;--text:#eef3fa;--muted:#9aa7b7;--purple:#8798ff;--purple-2:#6476dc;--green:#5ed5b0}.theme-slate body{background:linear-gradient(135deg,#12161c,#19202b 60%,#242138)}.theme-midnight{--bg:#0b0d14;--panel:#121622;--panel-2:#171c2b;--line:#273047;--purple:#6f8cff;--purple-2:#506ddd}.theme-midnight body{background:linear-gradient(135deg,#090b11,#101526 60%,#101b35)}.theme-ocean{--bg:#101820;--panel:#172631;--panel-2:#1d3140;--line:#2d4758;--text:#eefaff;--muted:#91aebb;--purple:#49bde8;--purple-2:#3686d1;--green:#52d1aa}.theme-ocean body{background:linear-gradient(135deg,#0c151d,#132a37 60%,#1c1f3a)}.theme-forest{--bg:#111813;--panel:#1b271d;--panel-2:#233324;--line:#354937;--text:#eff9ec;--muted:#99aa95;--purple:#77d181;--purple-2:#4da65d;--green:#8be28d}.theme-forest body{background:linear-gradient(135deg,#0d130f,#17251a 60%,#252b1f)}.theme-sunset{--bg:#1b1517;--panel:#292022;--panel-2:#35282a;--line:#51383a;--text:#fff2ed;--muted:#bda39f;--purple:#ff879d;--purple-2:#dd637c;--green:#79d3a1}.theme-sunset body{background:linear-gradient(135deg,#171113,#2a1b24 60%,#3a281f)}

.picker{position:relative}.picker-button{height:38px;min-width:128px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:11px;font-weight:700;display:flex;align-items:center;gap:8px}.picker-button span{flex:1;text-align:left}.picker-button:hover{border-color:var(--purple)}.picker-menu{position:absolute;top:46px;right:0;z-index:30;width:265px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);box-shadow:0 18px 45px #0008;display:none}.picker-menu.open{display:grid;animation:picker-in .18s ease both}@keyframes picker-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.picker-option{width:100%;display:grid;grid-template-columns:31px 1fr 16px;gap:9px;align-items:center;padding:11px 9px;border-radius:8px;background:transparent;text-align:left;color:var(--text)}.picker-option:hover{background:var(--panel)}.picker-option span{min-width:0}.picker-option b{display:block;font-size:11px}.picker-option small{display:block;color:var(--muted);font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-option em{font-style:normal;color:var(--purple);opacity:0}.picker-option[data-theme="melyx"] em,.picker-option[data-language="en"] em{opacity:1}.swatch{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:13px;background:var(--purple)}.swatch-melyx{background:#4f8fdb}.swatch-sky{background:#4f8fdb}.swatch-graphite{background:#8e7aff}.swatch-slate{background:#748bff}.swatch-midnight{background:#5277ff}.swatch-light-gray{background:#7b83db}.swatch-ocean{background:#24b8dc}.swatch-forest{background:#42bd75}.swatch-sunset{background:#f07d7d}.flag{font-style:normal;font-size:21px;text-align:center}@media(max-width:700px){.picker-menu{right:auto;left:0}.picker-button{min-width:92px}.picker-button span{font-size:10px}}

.nav-item i{font-size:15px!important;width:19px;height:19px;display:grid;place-items:center;opacity:.88}.stat-icon{font-size:18px!important}.command-icon{font-size:18px}.status-choice{font-size:12px}.status-choice span{font-weight:400}

.setup-error{max-width:680px;margin:48px auto;padding:30px;text-align:center}.setup-error h2{margin:0 0 8px}.setup-error p{color:var(--muted);font-size:12px;margin-bottom:20px}

.setup-help{display:grid;gap:7px;margin-top:28px;padding:15px;border:1px solid #1e3350;border-radius:12px;background:#101c2c;color:#8ca3c0;font-size:11px;line-height:1.5}.setup-help b{color:#9cc7f5;font-size:12px}.setup-help span{display:block}.setup-help span:before{content:'•';color:var(--purple);margin-right:7px}

.notification-count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ef6f83;color:#fff;font-size:10px;line-height:17px}.notification-list{display:grid;gap:10px;padding:16px}.notification-card{padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04)}.notification-card.is-unread{border-color:#4f8fdb;background:rgba(79,143,219,.1)}.notification-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.notification-card-head b{display:block}.notification-card-head small,.notification-seen{display:block;color:var(--muted);font-size:11px;margin-top:5px}.notification-card p{white-space:pre-wrap;line-height:1.65;margin:12px 0;color:var(--text)}.notification-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#4f8fdb;margin-top:5px}.notification-read{font-size:11px;padding:7px 10px}

:root {
  --theme-bg: #0d1626;
  --theme-bg-deep: #070c16;
  --theme-surface: rgba(16, 26, 42, .92);
  --theme-surface-strong: #16233a;
  --theme-sidebar: rgba(9, 15, 26, .95);
  --theme-line: #223349;
  --theme-text: #eaf2ff;
  --theme-muted: #8ca3c0;
  --theme-accent: #4f8fdb;
  --theme-accent-strong: #3d7fd1;
  --theme-glow: rgba(79, 143, 219, .28);
  --border: var(--theme-line);
  --accent: var(--theme-accent);
}

body {
  background: radial-gradient(900px 500px at 76% -10%, var(--theme-glow) 0%, transparent 56%), linear-gradient(135deg, var(--theme-bg-deep), var(--theme-bg) 56%, var(--theme-bg-deep));
  color: var(--theme-text);
}

body[class*="theme-"] {
  --bg: var(--theme-bg);
  --panel: var(--theme-surface);
  --panel-2: var(--theme-surface-strong);
  --line: var(--theme-line);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --purple: var(--theme-accent);
  --purple-2: var(--theme-accent-strong);
}

.sidebar, .topbar, .panel, .modal-card, .manage-modal, .picker-menu, .server, .profile, .staff-card, .table-wrap, .setup-card, .message-template, .report-card, .personal-points, .action-modal {
  background-color: var(--theme-surface);
  border-color: var(--theme-line);
}

.sidebar { background-color: var(--theme-sidebar); }
.server { background-color: var(--theme-surface-strong); }
input, textarea, select { background-color: var(--theme-bg-deep); color: var(--theme-text); border-color: var(--theme-line); }
.nav-item:hover, .nav-item.active, .picker-option:hover, .manage-option:hover { background-color: var(--theme-surface-strong); }
.topbar, .modal-backdrop { background-color: color-mix(in srgb, var(--theme-bg-deep) 72%, transparent); }
.brand small, .server small, .nav-label, .modal-hint, .modal-field em { color: var(--theme-muted); }
.primary, .btn-primary, .tag.approved, .status-pill.active { background: var(--theme-accent); }
.primary:hover, .btn-primary:hover { background: var(--theme-accent-strong); }
.ambient-a { background: var(--theme-accent); }
.ambient-b { background: var(--theme-accent-strong); }

body.theme-graphite { --theme-bg:#17191d; --theme-bg-deep:#101216; --theme-surface:rgba(31,34,40,.94); --theme-surface-strong:#282c34; --theme-sidebar:rgba(22,24,29,.96); --theme-line:#3a404a; --theme-text:#f1f3f5; --theme-muted:#9da5b1; --theme-accent:#a78bfa; --theme-accent-strong:#8b5cf6; --theme-glow:rgba(167,139,250,.2); }
body.theme-slate { --theme-bg:#17212b; --theme-bg-deep:#0f1720; --theme-surface:rgba(29,42,54,.94); --theme-surface-strong:#26394a; --theme-sidebar:rgba(18,29,39,.96); --theme-line:#3a5163; --theme-text:#edf6fb; --theme-muted:#9db0be; --theme-accent:#67c4ee; --theme-accent-strong:#3b9dcc; --theme-glow:rgba(65,171,222,.2); }
body.theme-midnight { --theme-bg:#111a2b; --theme-bg-deep:#080f1d; --theme-surface:rgba(18,31,52,.95); --theme-surface-strong:#1c3150; --theme-sidebar:rgba(10,20,36,.97); --theme-line:#294568; --theme-text:#eef5ff; --theme-muted:#94a9c3; --theme-accent:#7c9cff; --theme-accent-strong:#5275e8; --theme-glow:rgba(82,117,232,.24); }
body.theme-light-gray { --theme-bg:#e8ebf0; --theme-bg-deep:#f7f8fa; --theme-surface:rgba(255,255,255,.94); --theme-surface-strong:#edf0f5; --theme-sidebar:rgba(247,248,250,.96); --theme-line:#d4d9e2; --theme-text:#202532; --theme-muted:#687286; --theme-accent:#6258d9; --theme-accent-strong:#4d43bd; --theme-glow:rgba(98,88,217,.14); }
body.theme-ocean { --theme-bg:#092a35; --theme-bg-deep:#061b25; --theme-surface:rgba(10,49,61,.95); --theme-surface-strong:#115263; --theme-sidebar:rgba(6,34,44,.97); --theme-line:#216678; --theme-text:#e9fcff; --theme-muted:#91c5cb; --theme-accent:#35d0c2; --theme-accent-strong:#16a9aa; --theme-glow:rgba(53,208,194,.22); }
body.theme-forest { --theme-bg:#17261f; --theme-bg-deep:#0d1712; --theme-surface:rgba(27,48,38,.95); --theme-surface-strong:#315540; --theme-sidebar:rgba(16,35,25,.97); --theme-line:#426b50; --theme-text:#effaf1; --theme-muted:#a3bea8; --theme-accent:#72d68c; --theme-accent-strong:#45ad64; --theme-glow:rgba(81,194,111,.2); }
body.theme-sunset { --theme-bg:#30201e; --theme-bg-deep:#1d1212; --theme-surface:rgba(57,35,32,.95); --theme-surface-strong:#754338; --theme-sidebar:rgba(38,22,21,.97); --theme-line:#805045; --theme-text:#fff5ed; --theme-muted:#d3aaa0; --theme-accent:#ff9b73; --theme-accent-strong:#e56d52; --theme-glow:rgba(229,109,82,.2); }
body.theme-sky { --theme-bg:#eef4fb; --theme-bg-deep:#f7fafd; --theme-surface:rgba(255,255,255,.94); --theme-surface-strong:#e5eef8; --theme-sidebar:rgba(247,250,253,.96); --theme-line:#d6e2f0; --theme-text:#1b2a3c; --theme-muted:#64798f; --theme-accent:#4f8fdb; --theme-accent-strong:#3b74bd; --theme-glow:rgba(79,143,219,.16); }
body.theme-melyx { --theme-bg:#0d1626; --theme-bg-deep:#070c16; --theme-surface:rgba(16,26,42,.92); --theme-surface-strong:#16233a; --theme-sidebar:rgba(9,15,26,.95); --theme-line:#223349; --theme-text:#eaf2ff; --theme-muted:#8ca3c0; --theme-accent:#4f8fdb; --theme-accent-strong:#3d7fd1; --theme-glow:rgba(79,143,219,.28); }
body.theme-dark-purple { --theme-bg:#17131f; --theme-bg-deep:#0d0a13; --theme-surface:rgba(32,24,46,.94); --theme-surface-strong:#2a2140; --theme-sidebar:rgba(19,13,29,.97); --theme-line:#3b3354; --theme-text:#f3f0ff; --theme-muted:#ada3c9; --theme-accent:#a78bfa; --theme-accent-strong:#8b5cf6; --theme-glow:rgba(139,92,246,.22); }
body.theme-orange { --theme-bg:#231812; --theme-bg-deep:#100c0a; --theme-surface:rgba(38,28,24,.95); --theme-surface-strong:#3a2921; --theme-sidebar:rgba(20,14,12,.98); --theme-line:#5a3b2b; --theme-text:#fff4eb; --theme-muted:#c6a99a; --theme-accent:#ff6b18; --theme-accent-strong:#e64f0b; --theme-glow:rgba(255,107,24,.22); }
body.theme-light { --theme-bg:#f1f3f5; --theme-bg-deep:#ffffff; --theme-surface:rgba(255,255,255,.96); --theme-surface-strong:#e9edf1; --theme-sidebar:rgba(248,249,250,.98); --theme-line:#d2d8df; --theme-text:#20242b; --theme-muted:#68727e; --theme-accent:#f36b18; --theme-accent-strong:#d9510d; --theme-glow:rgba(243,107,24,.14); }
body.theme-cyberpunk { --theme-bg:#171225; --theme-bg-deep:#090812; --theme-surface:rgba(29,20,43,.96); --theme-surface-strong:#30204c; --theme-sidebar:rgba(12,9,21,.98); --theme-line:#52306f; --theme-text:#fff0ff; --theme-muted:#c3a5c9; --theme-accent:#ff10d7; --theme-accent-strong:#00d9e8; --theme-glow:rgba(255,16,215,.22); }
body.theme-purple-dream { --theme-bg:#251b36; --theme-bg-deep:#120d1d; --theme-surface:rgba(45,32,63,.95); --theme-surface-strong:#5a3d76; --theme-sidebar:rgba(24,15,37,.98); --theme-line:#735492; --theme-text:#fff3ff; --theme-muted:#ccb4d8; --theme-accent:#b76cff; --theme-accent-strong:#8c4be1; --theme-glow:rgba(183,108,255,.22); }
body.theme-velora-dark { --theme-bg:#171326; --theme-bg-deep:#0a0812; --theme-surface:rgba(31,23,51,.96); --theme-surface-strong:#432c72; --theme-sidebar:rgba(15,10,27,.98); --theme-line:#65439c; --theme-text:#f8f0ff; --theme-muted:#bda8d4; --theme-accent:#8f5bff; --theme-accent-strong:#d048bc; --theme-glow:rgba(143,91,255,.25); }
body.theme-velora-light { --theme-bg:#f3effa; --theme-bg-deep:#fffaff; --theme-surface:rgba(255,255,255,.97); --theme-surface-strong:#eee6f8; --theme-sidebar:rgba(251,248,255,.98); --theme-line:#ddd0eb; --theme-text:#292033; --theme-muted:#766786; --theme-accent:#8557e8; --theme-accent-strong:#bd4fae; --theme-glow:rgba(133,87,232,.14); }
body.theme-melyx,body.theme-dark-purple { --border: var(--theme-line); --accent: var(--theme-accent); }
body.theme-graphite,body.theme-slate,body.theme-midnight,body.theme-light-gray,body.theme-ocean,body.theme-forest,body.theme-sunset,body.theme-sky { --border: var(--theme-line); --accent: var(--theme-accent); }

/* ==========================================================================
   Melyx Dashboard — visual enhancements
   Loaded last so it refines every existing component without breaking markup.
   ========================================================================== */

:root {
  --border: var(--line);
  --accent: var(--purple, #4f8fdb);
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .10), 0 10px 30px -12px rgba(0, 0, 0, .45);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .55);
  --font-display: 'Space Grotesk', Cairo, system-ui, sans-serif;
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

html { scrollbar-color: color-mix(in srgb, var(--text) 20%, transparent) transparent; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* --- Scrollbars --------------------------------------------------------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 16%, transparent);
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 45%, transparent); background-clip: padding-box; }

/* --- Focus rings for keyboard users ------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* --- Sidebar polish ------------------------------------------------------ */
.sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-sidebar) 98%, var(--accent) 2%), var(--theme-sidebar));
  border-color: var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand strong { font-size: 25px; letter-spacing: -.4px; }
.brand-symbol { transition: transform .3s ease, box-shadow .3s ease; }
.brand-symbol:hover { transform: rotate(-6deg) scale(1.06); }

.server { cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.server:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 6px 18px -8px var(--theme-glow); }

.nav-item { border-radius: 12px; height: 43px; position: relative; }
.nav-item b { background: color-mix(in srgb, var(--accent) 22%, transparent); color: color-mix(in srgb, var(--accent) 70%, #fff); }
.nav-item.active::before {
  content: '';
  position: absolute;
  inset-inline-start: -15px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

/* --- Topbar -------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  margin-bottom: 24px;
  padding: 13px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--theme-surface) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar h2 { font-size: 22px; margin-top: 4px; font-family: var(--font-display); }
.breadcrumb { letter-spacing: .3px; }
.icon-btn { transition: color .2s, border-color .2s, transform .2s; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* --- Panels, cards, stats ------------------------------------------------- */
.panel, .staff-card, .request-card, .stat {
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.panel { border-radius: 16px; }
.panel:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.panel-head { padding: 17px 19px; }
.panel-head h3 { font-family: var(--font-display); letter-spacing: -.2px; }
.staff-card:hover, .request-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.stat { position: relative; overflow: hidden; border-radius: 16px; }
.stat::after {
  content: '';
  position: absolute;
  inset-inline-end: -24px;
  top: -24px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--theme-glow);
  filter: blur(20px);
  opacity: .7;
}
.stat strong { font-family: var(--font-display); letter-spacing: -.5px; }
.stat-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.staff-card .avatar { box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 55%, transparent); }

/* --- Buttons -------------------------------------------------------------- */
.primary, .secondary, .danger { border-radius: 11px; transition: transform .15s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s; }
.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), var(--accent)); }
.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.primary:active, .secondary:active, .danger:active { transform: translateY(0); }
.secondary:hover { border-color: var(--accent); color: var(--text); }
.danger:hover { background: #6d2b3e; color: #fff; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* --- Forms ---------------------------------------------------------------- */
input, select, textarea {
  transition: border-color .2s, box-shadow .2s;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; appearance: none; -webkit-appearance: none; padding-inline-end: 30px !important; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.search { border-radius: 12px; }

/* --- Tags ----------------------------------------------------------------- */
.tag { border: 1px solid transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent); }
.tag.pending { color: #f3c66f; }
.tag.approved { color: #63dfad; }
.tag.rejected { color: #ff9fb0; }

/* --- Request / staff rows -------------------------------------------------- */
.staff-row { border-radius: 12px; transition: background .2s; }
.staff-row:hover { background: color-mix(in srgb, var(--theme-surface-strong) 60%, transparent); }
.request-card { border-radius: 14px; }

/* --- Avatars --------------------------------------------------------------- */
.avatar { box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .4); }
.user-avatar { transition: filter .2s; }
.user-avatar img { border-radius: 50%; }

/* --- Profile --------------------------------------------------------------- */
.profile { border-radius: 18px; }
.profile-cover { border-radius: 18px 18px 0 0; }
.profile-content h2 { font-family: var(--font-display); }
.profile-metric { transition: transform .2s, border-color .2s; }
.profile-metric:hover { transform: translateY(-2px); border-color: var(--accent); }
.profile-manage, .profile-close { transition: transform .15s, color .2s, background .2s; }

/* --- Empty states ---------------------------------------------------------- */
.empty { min-height: 170px; border: 1.5px dashed var(--line); border-radius: 14px; margin: 10px; color: var(--muted); }
.empty b { color: color-mix(in srgb, var(--text) 65%, transparent); }

/* --- Leading section headers ----------------------------------------------- */
.section-head h1, .hero h1 { font-family: var(--font-display); letter-spacing: -.5px; }

/* --- Toast ----------------------------------------------------------------- */
.toast {
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-surface-strong) 92%, var(--accent) 8%);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-pop);
  color: var(--text);
  font-weight: 600;
}
.toast.show { transform: translateY(-4px); }

/* --- Modals ---------------------------------------------------------------- */
.modal-card, .manage-modal, .action-modal {
  border-radius: 20px;
  box-shadow: var(--shadow-pop);
}
.modal-card h2, .manage-modal h2 { font-family: var(--font-display); }
.modal-actions button { min-height: 42px; }

/* --- Setup page ------------------------------------------------------------ */
.setup-shell { max-width: 1060px; }
.setup-intro h1 { font-family: var(--font-display); letter-spacing: -.7px; }
.setup-panel { border-radius: 20px; overflow: visible; }
.setup-form { gap: 16px; padding: 22px 22px 6px; }
.setup-field span { display: flex; align-items: center; gap: 6px; }
.setup-optional { font-style: normal; color: var(--muted); opacity: .75; font-weight: 600; text-transform: none; letter-spacing: 0; }
.setup-field select, .setup-field input, .setup-field textarea { border-radius: 11px; padding: 11px 13px; }
.setup-progress { padding: 6px 10px; border-radius: 20px; background: color-mix(in srgb, var(--green) 12%, transparent); width: fit-content; }
.setup-form .wide { margin-top: 10px; min-height: 46px; }
.setup-field select[required] { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.message-template { border-radius: 16px; }
.message-template h3 { font-family: var(--font-display); }
.setup-help { border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.setup-help b { color: var(--accent); }

/* --- Panels / grid love ----------------------------------------------------- */
.grid-2 { gap: 18px; }
.staff-list { gap: 10px; }

/* --- Leaderboard ------------------------------------------------------------ */
.leader-row { padding: 14px 0; transition: background .2s, padding-inline .2s; border-radius: 14px; padding-inline: 6px; }
.leader-row:hover { background: color-mix(in srgb, var(--theme-surface-strong) 55%, transparent); }
.leader-stat b { color: var(--accent); font-weight: 700; }

/* --- Status page ------------------------------------------------------------- */
.status-choice { transition: border-color .2s, transform .2s, background .2s; }
.status-choice:hover { border-color: var(--accent); transform: translateY(-2px); }
.status-choice.selected { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 0 0 1px var(--accent), 0 8px 22px -8px var(--theme-glow); }

/* --- Shift panel form -------------------------------------------------------- */
.shift-panel-form select { border-radius: 11px; padding: 11px 13px; }

/* --- Login ------------------------------------------------------------------- */
.login-shell .login-logo { transition: transform .3s ease; }
.login-shell .login-logo:hover { transform: scale(1.05) rotate(-2deg); }
.login-link { box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--accent) 60%, transparent); }

/* --- Light theme coherence ---------------------------------------------- */
body.theme-light-gray select,
body.theme-sky select,
body.theme-light-gray .status-choice,
body.theme-sky .status-choice,
body.theme-light-gray .leader-row,
body.theme-sky .leader-row,
body.theme-light-gray .staff-row,
body.theme-sky .staff-row { background-color: color-mix(in srgb, var(--theme-surface-strong) 55%, var(--theme-bg-deep)); background-image: none; }
body.theme-light-gray .search,
body.theme-sky .search { background: var(--theme-bg-deep); }
body.theme-light-gray .message-template,
body.theme-sky .message-template,
body.theme-light-gray .manage-modal,
body.theme-sky .manage-modal,
body.theme-light-gray .modal-card,
body.theme-sky .modal-card,
body.theme-light-gray .action-modal,
body.theme-sky .action-modal,
body.theme-light-gray .rule-grid div,
body.theme-sky .rule-grid div,
body.theme-light-gray .adjust-tabs,
body.theme-sky .adjust-tabs,
body.theme-light-gray .server,
body.theme-sky .server,
body.theme-light-gray .identity,
body.theme-sky .identity,
body.theme-light-gray .tag,
body.theme-sky .tag { background: var(--theme-surface-strong); border-color: var(--theme-line); box-shadow: none; }
body.theme-light-gray .toast,
body.theme-sky .toast { background: var(--theme-surface-strong); color: var(--theme-text); }
body.theme-light-gray .empty,
body.theme-sky .empty { color: var(--theme-muted); }

/* --- Iconsax and theme consistency ---------------------------------------- */
iconify-icon { display: inline-flex; width: 19px; height: 19px; flex: 0 0 19px; color: currentColor; }
.nav-emoji { display: inline-grid; width: 22px; place-items: center; font-style: normal; font-size: 16px; filter: saturate(.9); }
.nav-icon { display: inline-grid; width: 22px; height: 20px; place-items: center; font-style: normal; font-size: 18px; line-height: 1; color: var(--muted); }
.nav-icon::before { display: block; }
.nav-icon-home::before { content: '⌂'; }
.nav-icon-users::before { content: '♙'; }
.nav-icon-clock::before { content: '◷'; }
.nav-icon-star::before { content: '★'; }
.nav-icon-chart::before { content: '▥'; }
.nav-icon-command::before { content: '⌘'; }
.nav-icon-alert::before { content: '◇'; }
.nav-icon-export::before { content: '↗'; }
.nav-icon-leave::before { content: '⌁'; }
.nav-icon-status::before { content: '●'; }
.nav-icon-settings::before { content: '⚙'; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { color: var(--accent); }
.nav-item iconify-icon { color: var(--muted); }
.nav-item.active iconify-icon, .nav-item:hover iconify-icon { color: var(--accent); }
.server-icon { background: var(--accent) !important; color: #fff; }
.identity { background: var(--theme-surface-strong); color: var(--text); }
.modal-card, .manage-modal, .action-modal, .message-template { background: var(--theme-surface) !important; border-color: var(--theme-line) !important; }
.manage-option:hover { background: var(--theme-surface-strong) !important; border-color: var(--accent) !important; }
.staff-card { overflow: hidden; padding: 0; }
.staff-cover { height: 58px; background: var(--theme-surface-strong) center/cover no-repeat; border-bottom: 1px solid var(--line); }
.report-cover { background-image: url('/default-banner.svg'); }
.staff-card .staff-main, .staff-card .card-foot { padding-inline: 15px; }
.staff-card .staff-main { padding-top: 12px; }
@keyframes dashboard-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.nav-item { animation: dashboard-enter .35s ease both; }
.nav-item:nth-of-type(2) { animation-delay: .03s; }
.nav-item:nth-of-type(3) { animation-delay: .06s; }
.nav-item:nth-of-type(4) { animation-delay: .09s; }
.nav-item:nth-of-type(5) { animation-delay: .12s; }
.nav-item:nth-of-type(6) { animation-delay: .15s; }
.nav-item:nth-of-type(7) { animation-delay: .18s; }
.nav-item:nth-of-type(8) { animation-delay: .21s; }
.nav-item:nth-of-type(9) { animation-delay: .24s; }
.nav-item:nth-of-type(10) { animation-delay: .27s; }
.nav-item:nth-of-type(11) { animation-delay: .3s; }
.view > *, .view .panel, .view .stat, .view .staff-card, .view .request-card, .view .setup-shell { animation: none; }
.view.page-enter > *, .view.page-enter .panel, .view.page-enter .stat, .view.page-enter .staff-card, .view.page-enter .request-card, .view.page-enter .setup-shell { animation: dashboard-enter .45s ease both; }
.staff-card { animation: none; }
.staff-grid .staff-card:nth-child(2) { animation-delay: .05s; }
.staff-grid .staff-card:nth-child(3) { animation-delay: .1s; }
.staff-grid .staff-card:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .nav-item, .staff-card { animation: none; } }

/* --- Small responsive corrections -------------------------------------------- */
@media (max-width: 1050px) {
  .topbar { padding: 12px 16px; }
}
@media (max-width: 700px) {
  .topbar { margin-bottom: 18px; padding: 11px 12px; border-radius: 13px; }
  .stat { min-height: 104px; }
  .panel { border-radius: 14px; }
}
.setup-resource-search { grid-column: 1 / -1; }
.setup-resource-search input { width: 100%; }
.status-controls { padding: 20px; gap: 14px; }
.status-choice { min-height: 94px; display: grid; align-content: center; gap: 7px; text-align: start; background: var(--theme-surface-strong); border-color: var(--theme-line); color: var(--theme-text); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.status-choice:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 26px -18px var(--theme-glow); }
.status-choice.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--theme-surface-strong)); box-shadow: 0 0 0 1px var(--accent), 0 14px 30px -20px var(--theme-glow); }
.custom-status-form, .devmode-form { background: var(--theme-surface); border-color: var(--theme-line); }
.custom-status-form textarea, .custom-status-form input { background: var(--theme-bg-deep); border-color: var(--theme-line); color: var(--theme-text); }
.devmode-head { border-top: 1px solid var(--theme-line); margin-top: 8px; }
@media (max-width: 700px) { .status-choice { min-height: 78px; padding: 13px; } }
/* Melyx control room visual system */
:root {
  --shell-sidebar: 236px;
  --shell-gap: 28px;
  --ink-soft: color-mix(in srgb, var(--text) 68%, transparent);
  --surface-raised: color-mix(in srgb, var(--theme-surface-strong) 68%, var(--theme-surface));
  --surface-deep: color-mix(in srgb, var(--theme-bg-deep) 86%, #000);
  --accent-cyan: #52c7df;
  --accent-lime: #83d98c;
  --accent-warm: #f0b65b;
  --line-soft: color-mix(in srgb, var(--theme-line) 72%, transparent);
}

body {
  background: var(--theme-bg-deep);
  font-family: 'Space Grotesk', 'Cairo', sans-serif;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, color-mix(in srgb, var(--theme-accent) 7%, transparent), transparent 34%), radial-gradient(600px 320px at 88% 0%, color-mix(in srgb, var(--theme-accent) 10%, transparent), transparent 70%);
  opacity: .7;
}
.ambient { display: none; }
.boot-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #123d76 0%, #071a3b 32%, #030a19 74%); color: #eaf2ff; transition: opacity .75s ease, visibility .75s ease; }
.prism-backdrop { position: absolute; inset: -20%; background: radial-gradient(ellipse at 50% 45%, rgba(42,132,255,.25), transparent 34%), conic-gradient(from 120deg at 50% 50%, rgba(30,86,255,.08), transparent 18%, rgba(39,220,255,.11), transparent 42%, rgba(93,61,255,.12), transparent 68%); filter: blur(18px); animation: prism-aurora 7s ease-in-out infinite; }
.prism-stage { position: relative; z-index: 3; width: 190px; height: 190px; display: grid; place-items: center; }
.prism-core { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 28px; background: linear-gradient(145deg, rgba(117,191,255,.18), rgba(36,93,215,.08)); box-shadow: 0 0 0 1px rgba(137,214,255,.28), 0 0 45px rgba(48,143,255,.42), inset 0 0 25px rgba(162,229,255,.12); animation: prism-core 2.6s ease-in-out infinite; }
.prism-core img { width: 70px; height: 70px; filter: drop-shadow(0 0 17px rgba(137,213,255,.9)); }
.prism-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(98,194,255,.3); box-shadow: 0 0 22px rgba(46,144,255,.18); }
.ring-one { inset: 7px; border-top-color: #8be5ff; border-right-color: transparent; transform: rotate(25deg); animation: prism-spin 4.5s linear infinite; }
.ring-two { inset: 26px; border-left-color: #7e9dff; border-bottom-color: transparent; transform: rotate(-35deg); animation: prism-spin 3.2s linear infinite reverse; }
.ring-three { inset: -13px; border-color: rgba(56,175,255,.13); border-left-color: rgba(145,105,255,.45); animation: prism-spin 8s linear infinite; }
.prism-label { position: relative; z-index: 3; display: grid; justify-items: center; gap: 5px; margin-top: -24px; text-shadow: 0 0 22px rgba(79,185,255,.45); }
.prism-label b { color: #e3f5ff; font: 700 19px 'Space Grotesk', sans-serif; letter-spacing: 7px; margin-inline-start: 7px; }
.prism-label span { color: #6fa9d6; font: 8px 'Space Grotesk', sans-serif; letter-spacing: 3px; }
.prism-particles { position: absolute; inset: 0; z-index: 2; }
.prism-particles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #b3edff; box-shadow: 0 0 14px 4px #389fff; animation: prism-particle 4s ease-in-out infinite; }
.prism-particles i:nth-child(1) { left: 20%; top: 38%; }.prism-particles i:nth-child(2) { left: 76%; top: 31%; animation-delay: -1.5s; }.prism-particles i:nth-child(3) { left: 28%; top: 70%; animation-delay: -2.4s; }.prism-particles i:nth-child(4) { left: 69%; top: 66%; animation-delay: -.8s; }.prism-particles i:nth-child(5) { left: 84%; top: 54%; animation-delay: -3s; }
.boot-screen::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(ellipse at 50% 52%, rgba(57,177,255,.26), transparent 38%), linear-gradient(180deg, rgba(2,8,23,.35), rgba(2,8,23,.85)); animation: tide-breathe 4.5s ease-in-out infinite; }
.boot-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(122,218,255,.28) 50%, transparent 65%); transform: translateX(-120%); }
.boot-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
html.melyx-route-entry .boot-screen:not(.is-hidden) { opacity: 1; visibility: visible; pointer-events: auto; }
.route-loader { display: none; position: relative; z-index: 4; width: 170px; height: 170px; place-items: center; }
html.melyx-route-entry .tide-light, html.melyx-route-entry .tide-particles, html.melyx-route-entry .tide-waves, html.melyx-route-entry .tide-center { display: none; }
html.melyx-route-entry .route-loader { display: grid; }
.route-orbit { position: absolute; border: 1px solid rgba(98,191,255,.5); border-radius: 50%; box-shadow: 0 0 22px rgba(47,151,255,.18); animation: route-orbit-spin 3.8s linear infinite; }
.orbit-one { width: 118px; height: 118px; border-top-color: #a9edff; }
.orbit-two { width: 88px; height: 88px; opacity: .7; animation-duration: 2.8s; animation-direction: reverse; }
.orbit-three { width: 58px; height: 58px; opacity: .48; animation-duration: 2s; }
.route-core { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 16px; background: rgba(71,145,235,.16); box-shadow: 0 0 28px rgba(47,151,255,.4), inset 0 0 18px rgba(166,229,255,.16); animation: route-core-pulse 1.4s ease-in-out infinite; }
.route-core img { width: 42px; height: 42px; filter: drop-shadow(0 0 10px rgba(154,219,255,.8)); }
.route-label { position: absolute; top: 184px; display: grid; justify-items: center; gap: 4px; color: #d8efff; text-shadow: 0 0 16px rgba(88,190,255,.42); }
.route-label b { font: 700 12px 'Space Grotesk', sans-serif; letter-spacing: 5px; margin-inline-start: 5px; }
.route-label small { color: #79b2df; font: 6px 'Space Grotesk', sans-serif; letter-spacing: 2px; }
.boot-screen.route-transition { background: rgba(5, 9, 20, .94); backdrop-filter: blur(10px); }
.boot-screen.route-transition::before { inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(41,160,255,.13), transparent 55%); animation: none; }
.boot-screen.route-transition::after { background: linear-gradient(90deg, transparent, rgba(107,224,255,.42), transparent); animation: route-scan .8s ease-out both; }
.boot-screen.route-transition .tide-waves { display: none; }
.boot-screen.route-transition .tide-light { width: 360px; height: 240px; opacity: .45; }
.boot-screen.route-transition .tide-mark { width: 78px; height: 78px; }
.boot-screen.route-transition .tide-mark img { width: 68px; height: 68px; }
.boot-screen.route-transition .tide-rings { width: 170px; height: 170px; }
.boot-screen.route-transition .tide-center span { font-size: 11px; letter-spacing: 5px; }
.boot-screen.route-transition .tide-center small { font-size: 6px; letter-spacing: 2px; }
.boot-screen.route-transition .tide-center { animation: none; }
.boot-screen.route-transition .prism-stage { transform: scale(.68); }
.boot-screen.route-transition .prism-label { transform: scale(.78); margin-top: -50px; }
.boot-screen.is-hidden::after { animation: tide-sweep .8s ease-out both; }
.tide-light { position: absolute; width: 780px; height: 480px; border-radius: 50%; background: radial-gradient(ellipse, rgba(67,184,255,.2), transparent 68%); filter: blur(20px); animation: tide-light 5s ease-in-out infinite; }
.tide-waves { position: absolute; inset: auto -10% -24%; height: 60%; transform: perspective(280px) rotateX(54deg); transform-origin: bottom; opacity: .86; }
.tide-waves i { position: absolute; inset: 0; display: block; border-radius: 50% 50% 0 0; border-top: 1px solid rgba(105,207,255,.34); box-shadow: 0 -12px 26px rgba(47,155,255,.14), inset 0 16px 40px rgba(17,116,220,.1); animation: tide-wave 5s ease-in-out infinite; }
.tide-waves i:nth-child(2) { inset: 12% -8% -8%; opacity: .58; animation-delay: -1.6s; animation-duration: 6.5s; }
.tide-waves i:nth-child(3) { inset: 25% -16% -16%; opacity: .35; animation-delay: -3s; animation-duration: 8s; }
.tide-center { position: relative; z-index: 3; display: grid; justify-items: center; gap: 7px; margin-top: -30px; text-shadow: 0 0 22px rgba(88,190,255,.42); }
.tide-rings { position: absolute; width: 310px; height: 310px; pointer-events: none; }
.tide-rings i { position: absolute; inset: 0; border: 1px solid rgba(104,198,255,.2); border-radius: 50%; box-shadow: 0 0 24px rgba(53,154,255,.12), inset 0 0 24px rgba(53,154,255,.06); animation: ring-drift 7s linear infinite; }
.tide-rings i::after { content: ''; position: absolute; width: 7px; height: 7px; top: -3px; left: 50%; border-radius: 50%; background: #b8edff; box-shadow: 0 0 16px 4px #3eb5ff; }
.tide-rings i:nth-child(2) { inset: 24px; opacity: .62; animation-duration: 5s; animation-direction: reverse; }
.tide-rings i:nth-child(2)::after { top: auto; bottom: -3px; }
.tide-rings i:nth-child(3) { inset: 52px; opacity: .45; animation-duration: 3.5s; }
.tide-rings i:nth-child(3)::after { left: auto; right: -3px; top: 50%; }
.tide-mark { width: 132px; height: 132px; display: grid; place-items: center; animation: tide-mark 2.8s ease-in-out infinite; }
.tide-mark img { width: 118px; height: 118px; filter: drop-shadow(0 0 24px rgba(140,211,255,.72)); }
.tide-center span { color: #d8efff; font: 700 18px 'Space Grotesk', sans-serif; letter-spacing: 8px; margin-inline-start: 8px; }
.tide-center small { color: #79b2df; font: 8px 'Space Grotesk', sans-serif; letter-spacing: 3px; }
.tide-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tide-particles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #9de8ff; box-shadow: 0 0 13px 3px #3caeff; animation: tide-float 4s ease-in-out infinite; }
.tide-particles i:nth-child(1) { left: 24%; top: 32%; animation-delay: -.4s; }.tide-particles i:nth-child(2) { left: 72%; top: 28%; animation-delay: -2s; }.tide-particles i:nth-child(3) { left: 34%; top: 65%; animation-delay: -1.3s; }.tide-particles i:nth-child(4) { left: 65%; top: 61%; animation-delay: -3s; }.tide-particles i:nth-child(5) { left: 16%; top: 52%; animation-delay: -2.4s; }.tide-particles i:nth-child(6) { left: 83%; top: 49%; animation-delay: -1.8s; }
.boot-orbit { position: relative; z-index: 1; width: 190px; height: 190px; display: grid; place-items: center; border: 1px solid rgba(113,190,255,.28); border-radius: 50%; box-shadow: 0 0 0 10px rgba(53,143,255,.035), inset 0 0 30px rgba(53,143,255,.12), 0 0 60px rgba(26,120,255,.2); animation: boot-orbit-spin 8s linear infinite; }
.boot-orbit::before, .boot-orbit::after { content: ''; position: absolute; inset: 13px; border: 1px solid rgba(55,187,255,.26); border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; animation: boot-orbit-spin 3.4s linear infinite reverse; }
.boot-orbit::after { inset: 27px; border-color: rgba(119,170,255,.18); border-right-color: transparent; animation-duration: 5s; }
.boot-core { width: 108px; height: 108px; display: grid; place-items: center; animation: boot-float 1.8s ease-in-out infinite; }
.boot-core img { width: 94px; height: 94px; filter: drop-shadow(0 0 18px rgba(139,190,255,.42)); animation: boot-logo-glow 1.8s ease-in-out infinite; }
.orbit-particle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #9ee5ff; box-shadow: 0 0 12px 3px #369cff; }
.particle-a { top: 17px; left: 55px; }.particle-b { right: 20px; top: 82px; }.particle-c { bottom: 23px; left: 66px; }.particle-d { left: 20px; top: 70px; }
.boot-line { width: 120px; height: 3px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--theme-text) 12%, transparent); }
.boot-line i { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--theme-accent); animation: boot-scan 1.1s ease-in-out infinite; }
.boot-screen p { margin: 0; color: #91a7c7; font: 10px 'Space Grotesk', sans-serif; letter-spacing: 1px; }
.boot-screen.boot-slow p { color: var(--accent-warm); }
.boot-screen.boot-error p { color: #ff9a9a; letter-spacing: 0; }
.boot-screen.boot-error p button { margin-inline-start: 5px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font: inherit; }
@keyframes tide-breathe { 0%, 100% { transform: scale(.95); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes tide-light { 0%, 100% { transform: translate(-5%, 3%) scale(.9); opacity: .55; } 50% { transform: translate(5%, -4%) scale(1.08); opacity: 1; } }
@keyframes tide-wave { 0%, 100% { transform: translateX(-3%) scaleY(.9); } 50% { transform: translateX(3%) scaleY(1.1); } }
@keyframes tide-mark { 0%, 100% { transform: translateY(2px) scale(.96); opacity: .82; } 50% { transform: translateY(-5px) scale(1); opacity: 1; } }
@keyframes tide-float { 0%, 100% { transform: translateY(18px); opacity: .15; } 50% { transform: translateY(-20px); opacity: .9; } }
@keyframes ring-drift { to { transform: rotate(360deg); } }
@keyframes tide-sweep { from { transform: translateX(-120%); opacity: 0; } 25% { opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
@keyframes route-scan { 0%, 100% { transform: translateX(-120%); opacity: 0; } 45%, 55% { opacity: 1; } 100% { transform: translateX(120%); } }
@keyframes route-orbit-spin { to { transform: rotate(360deg); } }
@keyframes route-core-pulse { 0%, 100% { transform: scale(.92); opacity: .78; } 50% { transform: scale(1); opacity: 1; } }
@keyframes prism-aurora { 0%, 100% { transform: rotate(0deg) scale(.96); opacity: .7; } 50% { transform: rotate(18deg) scale(1.08); opacity: 1; } }
@keyframes prism-spin { to { transform: rotate(385deg); } }
@keyframes prism-core { 0%, 100% { transform: translateY(2px) scale(.96); } 50% { transform: translateY(-4px) scale(1); } }
@keyframes prism-particle { 0%, 100% { transform: translateY(18px); opacity: .15; } 50% { transform: translateY(-20px); opacity: .95; } }

.app { position: relative; z-index: 1; }
body.loaded .app, body.loaded .topbar, body.loaded .view { animation: none; }
html.melyx-route-entry body.loaded .app, html.melyx-route-entry body.loaded .topbar, html.melyx-route-entry body.loaded .view { animation: none; }
@keyframes interface-enter { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: scale(1); } }
@keyframes interface-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.sidebar {
  width: var(--shell-sidebar);
  flex-basis: var(--shell-sidebar);
  padding: 24px 13px 18px;
  gap: 22px;
  background: color-mix(in srgb, var(--theme-sidebar) 94%, #000);
  border-inline-end: 1px solid var(--line-soft);
}
.brand { padding: 0 11px; gap: 11px; }
.brand-symbol { width: 38px; height: 38px; border-radius: 0; background: transparent !important; object-fit: contain; padding: 0 !important; filter: drop-shadow(0 5px 12px rgba(78,157,255,.28)); }
.brand strong { font-size: 20px; letter-spacing: -.7px; }
.brand small { font-size: 8px; letter-spacing: 1.5px; }
.server { min-height: 56px; border-radius: 12px; background: var(--surface-raised); border-color: var(--line-soft); }
.server-icon { background: color-mix(in srgb, var(--theme-accent) 22%, var(--theme-bg-deep)); color: var(--theme-accent); }
.server-icon img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.nav-label { margin: 12px 11px 6px; font-size: 9px; letter-spacing: 1.4px; }
.nav-item { height: 40px; border-radius: 9px; padding: 0 11px; gap: 11px; font-size: 11px; color: var(--ink-soft); }
.nav-item .nav-icon { width: 18px; height: 18px; flex: 0 0 18px; color: color-mix(in srgb, var(--text) 50%, transparent); font-size: 17px; }
.nav-item:hover { background: color-mix(in srgb, var(--theme-accent) 9%, transparent); color: var(--text); }
.nav-item.active { background: var(--theme-accent); color: #071017; box-shadow: 0 10px 24px -14px var(--theme-accent); font-weight: 700; }
.nav-item.active .nav-icon { color: #071017; }
.nav-item.active::before { display: none; }
.nav-item b { margin-inline-start: auto; margin-inline-end: 0; min-width: 20px; text-align: center; padding: 2px 6px; background: color-mix(in srgb, var(--theme-accent) 18%, transparent); color: var(--theme-accent); }
.nav-item.active b { background: rgba(0,0,0,.16); color: #071017; }

.main { padding: 22px 30px 48px; }
.topbar { min-height: 62px; margin-bottom: 28px; padding: 11px 16px 11px 19px; border-radius: 13px; background: color-mix(in srgb, var(--theme-surface) 82%, transparent); border-color: var(--line-soft); box-shadow: 0 12px 34px -28px #000; }
.topbar h2 { font-size: 18px; letter-spacing: -.5px; }
.breadcrumb { font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--theme-muted); }
.top-actions { gap: 8px; }
.top-actions .live { padding: 5px 8px; font-size: 9px; }
.identity { display: flex; align-items: center; gap: 8px; padding-inline-start: 8px; border-inline-start: 1px solid var(--line-soft); font-size: 11px; font-weight: 700; }
.modal-card .modal-close { left: 16px; right: auto; top: 16px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; position: relative; background: var(--surface-raised); border-color: var(--line-soft); }
.icon-btn iconify-icon { font-size: 17px; }
.notification-button { color: var(--theme-muted); }
.notification-count { top: -4px; right: -4px; min-width: 16px; height: 16px; border: 2px solid var(--theme-surface); line-height: 12px; background: var(--accent-warm); color: #1a1308; }
.status-page { display: grid; gap: 14px; }
.status-hero { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.status-hero h1 { margin: 5px 0; font-size: 28px; letter-spacing: -1px; }
.status-hero p { margin: 0; color: var(--theme-muted); font-size: 11px; }
.status-live { min-width: 150px; display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-raised); }
.status-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-lime); box-shadow: 0 0 10px var(--accent-lime); }
.status-live span { color: var(--theme-muted); font-size: 9px; }.status-live b { font-size: 12px; text-transform: capitalize; }
.status-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; align-items: start; }
.presence-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 15px; }
.status-choice { min-height: 78px; display: grid; grid-template-columns: 14px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-deep); color: var(--theme-text); text-align: start; }
.status-choice:hover, .status-choice.selected { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 10%, var(--surface-deep)); }
.status-choice b { font-size: 11px; }.status-choice small { grid-column: 2; color: var(--theme-muted); font-size: 9px; }
.presence-dot { width: 10px; height: 10px; grid-row: 1 / span 2; border-radius: 50%; background: var(--theme-muted); }.presence-online { background: #63d99a; box-shadow: 0 0 9px #63d99a; }.presence-idle { background: #e4b968; }.presence-dnd { background: #ef7187; }.presence-invisible { background: #818b99; }
.status-form { display: grid; gap: 12px; padding: 15px 17px 18px; }.status-form label { display: grid; gap: 6px; }.status-form label span { color: var(--theme-muted); font-size: 10px; }.status-form label small { color: var(--theme-muted); font-size: 9px; }.status-form input, .status-form select, .status-form textarea { width: 100%; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface-deep); color: var(--theme-text); padding: 10px 11px; outline: 0; font-size: 11px; }.status-form textarea { resize: vertical; min-height: 82px; }.status-form input:focus, .status-form select:focus, .status-form textarea:focus { border-color: var(--theme-accent); }
.status-help, .status-dev { display: flex; align-items: center; gap: 12px; padding: 16px; }.status-help-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 14%, transparent); font-weight: 700; }.status-help h3, .status-dev h3 { margin: 0 0 4px; font-size: 12px; }.status-help p, .status-dev p { margin: 0; color: var(--theme-muted); font-size: 10px; line-height: 1.55; }.status-help .tag { margin-inline-start: auto; white-space: nowrap; }.status-dev > div { flex: 1; }.status-dev form { margin-inline-start: auto; }
@media (max-width: 800px) { .status-grid { grid-template-columns: 1fr; }.status-hero { align-items: stretch; flex-direction: column; }.status-live { width: fit-content; }.status-help, .status-dev { align-items: flex-start; }.status-help .tag { margin-inline-start: 0; }.status-help { flex-wrap: wrap; } }
.picker-menu-title { display: flex; justify-content: space-between; padding: 8px 9px 6px; color: var(--theme-muted); font-size: 10px; letter-spacing: 1px; }
.picker-menu-title small { font-size: 9px; letter-spacing: 0; }
.picker-option[data-selected="true"] em { opacity: 1; }
.swatch-orange { background: #ff6b18; }
.swatch-light { background: #f36b18; }
.swatch-cyberpunk { background: linear-gradient(90deg, #ff10d7 50%, #00d9e8 50%); }
.swatch-purple-dream { background: #b76cff; }
.swatch-velora-dark { background: linear-gradient(90deg, #8f5bff 50%, #d048bc 50%); }
.swatch-velora-light { background: linear-gradient(90deg, #8557e8 50%, #bd4fae 50%); }

.view { max-width: 1420px; }
.page-loading { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--theme-muted); font-size: 10px; letter-spacing: .8px; }
.page-loader-ring { position: relative; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, transparent); border-radius: 50%; box-shadow: 0 0 18px color-mix(in srgb, var(--theme-accent) 14%, transparent); animation: page-ring-spin 1.8s linear infinite; }
.page-loader-ring::before, .page-loader-ring::after { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--accent-cyan) 65%, transparent); border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent; animation: page-ring-spin 1.1s linear infinite reverse; }
.page-loader-ring::after { inset: 14px; border-color: color-mix(in srgb, var(--theme-accent) 75%, transparent); border-left-color: transparent; animation-duration: .8s; }
.page-loader-ring i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 9px 2px var(--accent-cyan); }
.page-loader-ring i:nth-child(1) { top: 0; left: 27px; }.page-loader-ring i:nth-child(2) { right: 3px; top: 28px; }.page-loader-ring i:nth-child(3) { bottom: 4px; left: 14px; }
@keyframes page-ring-spin { to { transform: rotate(360deg); } }
.hero, .section-head { margin-bottom: 22px; }
.hero h1, .section-head h1 { font-size: 27px; letter-spacing: -1px; }
.hero-side { display: flex; align-items: center; gap: 18px; }
.viewer-summary { display: flex; align-items: center; gap: 9px; padding-inline-end: 17px; border-inline-end: 1px solid var(--line-soft); }
.viewer-summary .avatar { width: 34px; height: 34px; border-radius: 50%; }
.viewer-summary b, .viewer-summary small { display: block; }
.viewer-summary b { font-size: 11px; }
.viewer-summary small { color: var(--theme-muted); font-size: 9px; margin-top: 3px; }
.hero p, .section-head p { color: var(--theme-muted); }
.eyebrow { color: var(--theme-accent); font-size: 9px; letter-spacing: 1.7px; }
.actions { gap: 7px; }
.primary, .secondary, .danger { min-height: 36px; padding: 8px 13px; border-radius: 8px; font-size: 11px; }
.primary { background: var(--theme-accent); color: #071017; box-shadow: 0 9px 22px -14px var(--theme-accent); }
.primary:hover { background: color-mix(in srgb, var(--theme-accent) 82%, white); color: #071017; }
.secondary { background: var(--surface-raised); border-color: var(--line-soft); color: var(--theme-text); }

.stats-grid { gap: 11px; margin-bottom: 17px; }
.stat, .panel, .staff-card, .request-card { border-radius: 12px; border-color: var(--line-soft); background: color-mix(in srgb, var(--theme-surface) 90%, transparent); box-shadow: 0 8px 28px -24px #000; }
.stat { min-height: 120px; padding: 16px; }
.stat::after { width: 72px; height: 72px; opacity: .35; }
.stat .stat-icon { width: 34px; height: 34px; border-radius: 9px; color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 12%, transparent); }
.stat strong { margin-top: 10px; font-size: 27px; }
.stat span { font-size: 10px; }
.stat small { color: var(--accent-lime); font-size: 9px; }
.grid-2 { gap: 14px; }
.panel-head { padding: 14px 16px; border-color: var(--line-soft); }
.panel-head h3 { font-size: 12px; }
.panel-head p { font-size: 10px; }
.panel-body { padding: 15px 16px; }
.staff-row { padding: 10px 8px; }
.request-card { padding: 13px; }
.tag { border-radius: 6px; font-size: 9px; }

.staff-layout { gap: 14px; }
.staff-card .staff-main { padding: 13px; }
.staff-card .avatar { width: 39px; height: 39px; border-radius: 10px; }
.profile { border-radius: 14px; }
.profile-cover { height: 94px; }
.profile-content { padding-inline: 18px; }

.notification-compose { max-width: 820px; margin-bottom: 14px; }
.notification-list { padding: 14px; gap: 8px; }
.notification-card { border-radius: 10px; padding: 14px; background: var(--surface-deep); }
.notification-card.is-unread { border-color: color-mix(in srgb, var(--theme-accent) 65%, var(--theme-line)); background: color-mix(in srgb, var(--theme-accent) 8%, var(--surface-deep)); }
.notification-card-head b { font-size: 12px; }
.notification-card-head small { font-size: 10px; }
.notification-sender { display: flex; align-items: center; gap: 9px; }
.notification-sender > img, .notification-sender > span { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; object-fit: cover; background: color-mix(in srgb, var(--theme-accent) 18%, transparent); color: var(--theme-accent); font-weight: 700; }
.notification-sender b, .notification-sender small { display: block; }
.notification-sender small { margin-top: 3px; color: var(--theme-muted); }
.notification-card p { color: var(--theme-text); font-size: 13px; line-height: 1.65; margin: 12px 0; white-space: pre-wrap; }
.notification-dot { background: var(--accent-warm); }
.notification-layout { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(420px, 1.28fr); gap: 14px; align-items: start; }
.notification-layout.inbox-only { grid-template-columns: minmax(420px, 820px); }
.notification-layout .setup-form { grid-template-columns: 1fr; }
.notification-layout .setup-form .wide { grid-column: 1; }
.inbox-panel { position: fixed; z-index: 40; top: 0; inset-inline-end: 0; width: min(390px, 100vw); height: 100vh; display: flex; flex-direction: column; background: color-mix(in srgb, var(--theme-surface) 97%, #000); border-inline-start: 1px solid var(--theme-line); box-shadow: -24px 0 70px -35px #000; transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.inbox-panel.open { transform: translateX(0); }
.inbox-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 17px 16px; border-bottom: 1px solid var(--line-soft); }
.inbox-head h3 { margin: 4px 0 2px; font-size: 16px; }
.inbox-head small { color: var(--theme-accent); font-size: 10px; }
.inbox-kicker { color: var(--theme-muted); font-size: 8px; letter-spacing: 1.5px; }
.inbox-head > div:last-child { display: flex; align-items: center; gap: 7px; }
.inbox-read-all, .inbox-foot button { border: 0; background: transparent; color: var(--theme-muted); font-size: 10px; cursor: pointer; }
.inbox-read-all:hover, .inbox-foot button:hover { color: var(--theme-accent); }
.inbox-list { flex: 1; overflow-y: auto; }
.inbox-item { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 16px; text-align: start; background: transparent; color: var(--theme-text); border: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.inbox-item:hover, .inbox-item.unread { background: color-mix(in srgb, var(--theme-accent) 7%, transparent); }
.inbox-item-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 14%, transparent); }
.inbox-item-icon img, .inbox-item-icon span { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; border-radius: inherit; font-weight: 700; }
.inbox-item b, .inbox-item small, .inbox-item em { display: block; }
.inbox-item b { font-size: 11px; }
.inbox-item small { margin-top: 4px; color: var(--theme-muted); font-size: 9px; }
.inbox-item em { margin-top: 7px; color: var(--theme-muted); font-size: 11px; font-style: normal; line-height: 1.5; }
.inbox-empty { display: grid; place-items: center; gap: 7px; min-height: 220px; color: var(--theme-muted); text-align: center; font-size: 10px; }
.inbox-empty iconify-icon { color: var(--accent-lime); font-size: 28px; }
.inbox-empty b { color: var(--theme-text); font-size: 12px; }
.inbox-foot { display: flex; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--line-soft); color: var(--theme-muted); font-size: 9px; }

@media (max-width: 900px) {
  :root { --shell-sidebar: 210px; }
  .main { padding: 18px 20px 40px; }
}
@media (max-width: 700px) {
  :root { --shell-sidebar: 62px; }
  .sidebar { padding: 18px 8px; }
  .main { padding: 14px 12px 30px; }
  .topbar { padding: 9px; }
  .topbar > div:first-child, .top-actions .live, .identity span { display: none; }
  .top-actions { margin-inline-start: auto; }
  .hero h1, .section-head h1 { font-size: 23px; }
  .hero-side { display: block; margin-top: 16px; }
  .viewer-summary { width: fit-content; margin-bottom: 12px; border: 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .notification-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tide-mark, .tide-mark img, .tide-rings i, .tide-waves i, .tide-light, .tide-particles i, .prism-backdrop, .prism-core, .prism-ring, .prism-particles i, .boot-screen::before { animation: none; }
  .boot-screen.is-hidden::after, body.loaded .app, body.loaded .topbar, body.loaded .view { animation: none; }
}

/* ==========================================================================
   Melyx dashboard: flat dark layer. Loaded last; owns tokens, shell and motion.
   Rules: dark only, flat fills, one accent per theme, one radius scale
   (controls and panels 10px, chips full-round), no gradients, no glow.
   ========================================================================== */

@font-face { font-family: 'Geist'; src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Cairo'; src: url('/fonts/cairo-arabic-wght-normal.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  color-scheme: dark;
  --font: 'Geist', 'Cairo', system-ui, sans-serif;
  --font-display: var(--font);
  --mono: 'Geist Mono', ui-monospace, monospace;
  --r: 10px;
  --radius: var(--r);
  --radius-sm: 8px;
  --sidebar-w: 236px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* default theme: melyx */
  --bg: #0a0d12; --surface: #10141b; --surface-2: #161b24; --line: #212833;
  --text: #e6eaf0; --muted: #8792a2; --accent: #5b9be0; --on-accent: #07101a;
  --good: #4fc08d; --warn: #e0b04f; --bad: #e9697b;
}
body.theme-melyx { --bg: #0a0d12; --surface: #10141b; --surface-2: #161b24; --line: #212833; --text: #e6eaf0; --muted: #8792a2; --accent: #5b9be0; }
body.theme-graphite { --bg: #0e0e10; --surface: #151517; --surface-2: #1c1c1f; --line: #2a2a2e; --text: #ececee; --muted: #8f8f96; --accent: #d9a441; }
body.theme-slate { --bg: #0b1014; --surface: #111820; --surface-2: #18212b; --line: #24303c; --text: #e7eef4; --muted: #8798a8; --accent: #6db4d4; }
body.theme-midnight { --bg: #090c15; --surface: #0f1420; --surface-2: #151c2c; --line: #212b40; --text: #e8edf8; --muted: #8492b0; --accent: #8ea6f2; }
body.theme-ocean { --bg: #081114; --surface: #0e191d; --surface-2: #142228; --line: #1f3339; --text: #e4f2f3; --muted: #7fa0a4; --accent: #38c4b5; }
body.theme-forest { --bg: #0a100c; --surface: #101812; --surface-2: #16211a; --line: #233128; --text: #e7f1e9; --muted: #869b8b; --accent: #6fcf8a; }
body.theme-sunset { --bg: #110c0b; --surface: #181211; --surface-2: #201817; --line: #33251f; --text: #f3e9e4; --muted: #a08c84; --accent: #f0866a; }
body.theme-orange { --bg: #0f0d0b; --surface: #161310; --surface-2: #1e1a16; --line: #302a22; --text: #f1ebe4; --muted: #9a9086; --accent: #ff7a2f; }

/* Map every legacy token used by the older stylesheets onto the new palette. */
body[class*="theme-"], body {
  --panel: var(--surface); --panel-2: var(--surface-2); --border: var(--line);
  --purple: var(--accent); --purple-2: color-mix(in srgb, var(--accent) 88%, #000);
  --green: var(--good); --gold: var(--warn); --red: var(--bad); --blue: var(--accent);
  --theme-bg: var(--bg); --theme-bg-deep: var(--bg); --theme-surface: var(--surface); --theme-surface-strong: var(--surface-2);
  --theme-sidebar: var(--surface); --theme-line: var(--line); --theme-text: var(--text); --theme-muted: var(--muted);
  --theme-accent: var(--accent); --theme-accent-strong: var(--accent); --theme-glow: transparent;
  --ink-soft: var(--muted); --accent-cyan: var(--accent); --accent-lime: var(--good); --accent-warm: var(--warn);
  --surface-raised: var(--surface-2); --surface-deep: var(--bg); --line-soft: var(--line);
  --shadow-card: none; --shadow-pop: 0 20px 48px -20px #000c;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

html, body { background: var(--bg) !important; background-image: none !important; }
body { font-family: var(--font); font-size: 13px; color: var(--text); -webkit-font-smoothing: antialiased; }
.ambient { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
*::-webkit-scrollbar-thumb { background: var(--line); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); }
.eyebrow, .inbox-kicker { display: none !important; }
.nav-emoji { display: none; }

/* ---- Icons --------------------------------------------------------------- */
mx-i { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; vertical-align: -0.2em; }
.ix { display: block; stroke-width: 1.5; }
.ix.on { color: var(--warn); }
.ix.off { color: var(--line); }
.ix.on path, .ix.on g { fill: currentColor; fill-opacity: .18; }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.rating-stars { letter-spacing: 0; }
.rating-stars .ix.on { color: currentColor; }

/* ---- Shell --------------------------------------------------------------- */
.app { min-height: 100dvh; }
.sidebar { width: var(--sidebar-w); flex-basis: var(--sidebar-w); background: var(--surface) !important; border: 0; border-inline-end: 1px solid var(--line); padding: 18px 12px 14px; gap: 18px; }
html[dir="rtl"] .sidebar { border-inline-end: 1px solid var(--line); }
.brand { padding: 0 8px; gap: 10px; }
.brand-symbol { width: 32px; height: 32px; border-radius: var(--r); background: none !important; box-shadow: none !important; transform: none !important; object-fit: contain; }
.brand strong { font: 650 19px/1 var(--font); letter-spacing: -.02em; text-transform: lowercase; }
.brand small { font: 500 10px var(--mono); letter-spacing: .04em; color: var(--muted); margin-top: 3px; text-transform: none; }
.server { background: var(--surface-2) !important; border: 1px solid var(--line); border-radius: var(--r); padding: 9px; box-shadow: none !important; transform: none !important; text-align: start; width: 100%; }
.server:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.server-icon { background: var(--bg) !important; border: 1px solid var(--line); border-radius: 8px; color: var(--accent); font-weight: 700; overflow: hidden; }
.server-icon img { width: 100%; height: 100%; object-fit: cover; }
.server .chev { margin-inline-start: auto; color: var(--muted); }
nav { gap: 2px; }
.nav-label { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 10px 6px; opacity: .8; }
.nav-item { height: 38px; border-radius: 8px; padding: 0 10px; gap: 10px; font-size: 13px; font-weight: 500; color: var(--muted); text-align: start; background: transparent !important; box-shadow: none !important; transition: color .15s, background-color .15s; }
.nav-item .nav-icon { display: inline-flex; width: 20px; height: 20px; font-size: 0; color: inherit; }
.nav-item .nav-icon::before { content: none !important; }
.nav-item:hover { color: var(--text); background: var(--surface-2) !important; }
.nav-item.active { color: var(--text); background: var(--surface-2) !important; }
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item.active::before { content: '' !important; position: absolute; inset-inline-start: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
html[dir="rtl"] .nav-item.active::before { border-radius: 3px 0 0 3px; }
.nav-item b { margin-inline-start: auto; margin-right: 0; background: var(--bg) !important; border: 1px solid var(--line); color: var(--muted) !important; border-radius: 999px; padding: 1px 7px; font: 500 10px var(--mono); }

.main { padding: 0 32px 48px !important; }
.topbar { position: sticky; top: 0; z-index: 30; margin: 0 -32px 24px; padding: 14px 32px; min-height: 64px; background: color-mix(in srgb, var(--bg) 94%, transparent) !important; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.breadcrumb { font: 500 11px var(--mono); color: var(--muted); }
.breadcrumb span { color: var(--muted); }
.topbar h2 { font: 620 20px/1.2 var(--font); letter-spacing: -.02em; margin-top: 3px; }
.top-actions { gap: 8px; }
.icon-btn, .picker-button { height: 36px; min-width: 36px; border: 1px solid var(--line); background: var(--surface) !important; border-radius: var(--r); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 9px; font-size: 12px; font-weight: 500; transition: color .15s, border-color .15s, background-color .15s; box-shadow: none !important; transform: none !important; }
.icon-btn:hover, .picker-button:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.picker-button { color: var(--text); }
.picker-button .swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.lang-code { font: 600 10px var(--mono); color: var(--accent); letter-spacing: .04em; }
.live { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--mono); letter-spacing: .06em; color: var(--good); background: transparent !important; border: 1px solid var(--line); padding: 0 10px; height: 36px; border-radius: var(--r); }
.live i { margin: 0; width: 6px; height: 6px; background: var(--good); animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }
.identity { background: transparent !important; border: 0; padding: 0; gap: 9px; }
.user-avatar { width: 32px; height: 32px; border-radius: 8px; background-color: var(--surface-2); color: var(--text); background-size: cover; background-position: center; }
.my-rating-badge { background: var(--surface) !important; border: 1px solid var(--line); color: var(--warn); border-radius: var(--r); height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; }
.notification-button { position: relative; }
.notification-count { position: absolute; top: -5px; inset-inline-end: -5px; background: var(--accent) !important; color: var(--on-accent) !important; border-radius: 999px; min-width: 16px; height: 16px; font: 600 10px/16px var(--mono); padding: 0 4px; text-align: center; }

/* ---- Pickers ------------------------------------------------------------- */
.picker-menu { background: var(--surface-2) !important; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 6px; }
.picker-menu-title { font: 500 10px var(--mono); letter-spacing: .06em; color: var(--muted); }
.picker-option { border-radius: 8px; padding: 8px; gap: 10px; background: transparent; color: var(--text); text-align: start; }
.picker-option:hover { background: var(--surface) !important; }
.picker-option small { color: var(--muted); }
.picker-option em { color: var(--accent); opacity: 0; font-style: normal; margin-inline-start: auto; display: inline-flex; }
.picker-option[data-selected="true"] em { opacity: 1; }
.swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #ffffff22; background: var(--accent); display: inline-block; font-size: 0; }
.swatch-melyx { background: #5b9be0; } .swatch-graphite { background: #d9a441; } .swatch-slate { background: #6db4d4; } .swatch-midnight { background: #8ea6f2; }
.swatch-ocean { background: #38c4b5; } .swatch-forest { background: #6fcf8a; } .swatch-sunset { background: #f0866a; } .swatch-orange { background: #ff7a2f; }
.picker-button .swatch { width: 10px; height: 10px; }
.flag { font: 600 10px var(--mono); color: var(--accent); width: 26px; text-align: center; font-style: normal; }

/* ---- Surfaces ------------------------------------------------------------ */
.panel, .stat, .staff-card, .request-card, .setup-panel, .report-card, .personal-points, .profile, .leader-row, .status-choice, .profile-metric, .mini-stat, .table-wrap, .message-template {
  background: var(--surface) !important; background-image: none !important; border: 1px solid var(--line); border-radius: var(--r); box-shadow: none !important;
}
.panel:hover, .staff-card:hover, .request-card:hover, .stat:hover { transform: none !important; box-shadow: none !important; }
.staff-card, .request-card, .leader-row { transition: border-color .15s; }
.staff-card:hover, .request-card:hover, .leader-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.stat::after { display: none !important; }
.panel-head { border-color: var(--line); }
.panel-head h3 { font: 600 14px var(--font); letter-spacing: -.01em; }
.panel-head p, .section-head p, .hero p { color: var(--muted); font-size: 12px; }
.section-head h1, .hero h1 { font: 640 24px/1.2 var(--font); letter-spacing: -.02em; }
.hero { background: none !important; border: 0; padding: 0; }
.stat { min-height: 104px; }
.stat .stat-icon, .stat-icon { color: var(--accent); display: inline-flex; }
.stat strong { font: 620 28px/1 var(--mono); letter-spacing: -.03em; margin-top: 12px; }
.stat small { color: var(--muted); }
.stats-grid { gap: 12px; }
.staff-row { border-color: var(--line); border-radius: 8px; }
.staff-row:hover { background: var(--surface-2); }
.staff-row strong, .score, .mini-stat b, .leader-stat b, .profile-metric strong { font-family: var(--mono); }
.avatar { border-radius: 8px; background: var(--surface-2); color: var(--accent); border: 1px solid var(--line); }
.avatar.avatar-image { border: 0; }
.avatar .ix { color: var(--accent); }
.staff-cover, .profile-cover, .report-cover { background-color: var(--surface-2); background-image: var(--cover, none); }
.profile-cover[style*="url"], .staff-cover[style*="url"] { background-size: cover; background-position: center; }
.empty { color: var(--muted); }
.empty b { color: var(--text); }
.bar { background: var(--surface-2); }
.rate { color: var(--warn); }

/* ---- Controls ------------------------------------------------------------ */
.primary, .secondary, .danger, .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border-radius: var(--r); padding: 0 14px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; box-shadow: none !important; transition: background-color .15s, border-color .15s, transform .1s; }
.primary, .btn-primary { background: var(--accent) !important; background-image: none !important; color: var(--on-accent); }
.primary:hover, .btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff) !important; }
.secondary { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.secondary:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.danger { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); color: var(--bad); }
.danger:hover { background: color-mix(in srgb, var(--bad) 22%, var(--surface)); }
.primary:active, .secondary:active, .danger:active { transform: scale(.98); }
.wide { width: 100%; }
input, select, textarea, .search { background: var(--bg) !important; color: var(--text); border: 1px solid var(--line); border-radius: var(--r); font-size: 13px; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 85%, var(--bg)); }
input:focus, select:focus, textarea:focus, .search:focus { border-color: var(--accent); box-shadow: none; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238792a2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.92 8.95l-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; padding-inline-end: 34px; }
html[dir="rtl"] select { background-position: left 12px center !important; }
.tag { border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); padding: 2px 9px; font: 500 11px var(--font); }
.tag.pending { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.tag.approved, .tag.accepted, .status-pill.active { background: color-mix(in srgb, var(--good) 12%, var(--surface)); color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, var(--line)); }
.tag.rejected { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.status-dot { background: var(--good); }
.toast { background: var(--surface-2) !important; border: 1px solid var(--line); color: var(--text); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.command-card { background: var(--surface) !important; background-image: none !important; border: 1px solid var(--line); border-radius: var(--r); box-shadow: none !important; text-align: start; }
.command-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: none !important; }
.command-icon { background: var(--bg) !important; border: 1px solid var(--line); color: var(--accent); border-radius: 8px; }
.command-arrow { color: var(--muted); }
.command-card:hover .command-arrow { color: var(--accent); }

/* ---- Modals -------------------------------------------------------------- */
.modal-backdrop { background: #05070bd9 !important; backdrop-filter: none; }
.modal-card, .manage-modal, .action-modal { background: var(--surface) !important; background-image: none !important; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop) !important; }
.modal-close, .profile-close, .profile-manage { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); border: 0; border-radius: 8px; }
.modal-close:hover, .profile-close:hover, .profile-manage:hover { background: var(--surface-2); color: var(--text); }
.modal-icon, .manage-icon { background: var(--bg) !important; border: 1px solid var(--line); color: var(--accent) !important; border-radius: 8px; display: inline-grid; place-items: center; }
.manage-icon.remove, .manage-icon.reset { color: var(--bad) !important; }
.manage-option { border-radius: var(--r); background: transparent; text-align: start; }
.manage-option:hover { background: var(--surface-2) !important; }
.manage-option em { margin-inline-start: auto; color: var(--muted); font-style: normal; display: inline-flex; }
html[dir="rtl"] .manage-option em .ix, html[dir="rtl"] .command-arrow .ix { transform: scaleX(-1); }
.inbox-panel { background: var(--surface) !important; border-color: var(--line); box-shadow: var(--shadow-pop); }

/* ---- Boot: one flat mark, no particles ----------------------------------- */
.boot-screen { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg) !important; background-image: none !important; transition: opacity .25s ease, visibility .25s; }
.boot-screen::before, .boot-screen::after { content: none !important; }
.boot-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-mark { display: grid; justify-items: center; gap: 6px; opacity: 0; animation: boot-in .2s ease .25s forwards; }
@keyframes boot-in { to { opacity: 1; } }
.boot-mark > span { font: 600 11px var(--mono); letter-spacing: .3em; color: var(--muted); margin-top: -14px; }
.boot-mark p { margin: 0; font-size: 12px; color: var(--muted); }
.boot-mark p button { margin-inline-start: 8px; background: var(--accent); color: var(--on-accent); border-radius: var(--r); padding: 6px 12px; font-weight: 600; }
.boot-error .boot-mark { animation-delay: 0s; }

/* Sparkle loader (flat: the shading gradients and glow of the original are dropped). */
.loader { width: 100px; height: 100px; position: relative; transform: scale(.5); color: var(--accent); }
.loader svg { position: absolute; inset: 0; width: 100px; height: 100px; }
.loader #pegtopone { animation: flowe-one 1s linear infinite; }
.loader #pegtoptwo { opacity: 0; transform: scale(0) translateY(-200px) translateX(-100px); animation: flowe-two 1s linear .3s infinite; }
.loader #pegtopthree { opacity: 0; transform: scale(0) translateY(-200px) translateX(100px); animation: flowe-three 1s linear .6s infinite; }
@keyframes flowe-one { 0% { transform: scale(.5) translateY(-200px); opacity: 0; } 25% { transform: scale(.75) translateY(-100px); opacity: 1; } 50% { transform: scale(1) translateY(0); opacity: 1; } 75% { transform: scale(.5) translateY(50px); opacity: 1; } 100% { transform: scale(0) translateY(100px); opacity: 0; } }
@keyframes flowe-two { 0% { transform: scale(.5) rotateZ(-10deg) translateY(-200px) translateX(-100px); opacity: 0; } 25% { transform: scale(1) rotateZ(-5deg) translateY(-100px) translateX(-50px); opacity: 1; } 50% { transform: scale(1) rotateZ(0) translateY(0) translateX(-25px); opacity: 1; } 75% { transform: scale(.5) rotateZ(5deg) translateY(50px) translateX(0); opacity: 1; } 100% { transform: scale(0) rotateZ(10deg) translateY(100px) translateX(25px); opacity: 0; } }
@keyframes flowe-three { 0% { transform: scale(.5) rotateZ(10deg) translateY(-200px) translateX(100px); opacity: 0; } 25% { transform: scale(1) rotateZ(5deg) translateY(-100px) translateX(50px); opacity: 1; } 50% { transform: scale(1) rotateZ(0) translateY(0) translateX(25px); opacity: 1; } 75% { transform: scale(.5) rotateZ(-5deg) translateY(50px) translateX(0); opacity: 1; } 100% { transform: scale(0) rotateZ(-10deg) translateY(100px) translateX(-25px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .loader svg { animation: none !important; opacity: 1 !important; transform: none !important; } .loader #pegtoptwo, .loader #pegtopthree { display: none; } }

/* ---- Skeleton and error -------------------------------------------------- */
.page-loading { display: grid; gap: 12px; min-height: 0; padding: 4px 0; }
.page-loading .skeleton { display: block; height: 96px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); animation: skeleton 1.2s ease-in-out infinite; }
.page-loading .skeleton:nth-child(2) { height: 220px; animation-delay: .15s; }
.page-loading .skeleton:nth-child(3) { height: 140px; animation-delay: .3s; }
@keyframes skeleton { 50% { opacity: .45; } }
.error-state { display: grid; justify-items: start; gap: 10px; padding: 24px; border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); border-radius: var(--r); background: var(--surface); }
.error-state .ix { color: var(--bad); }
.error-state h3 { margin: 0; font-size: 15px; }
.error-state p { margin: 0; color: var(--muted); }

/* ---- Page wipe (diagonal band across the viewport) ----------------------- */
.wipe { position: fixed; z-index: 80; inset: -15vh -25vw; background: var(--wipe, var(--accent)); pointer-events: none; transform: translateX(-130%) skewX(12deg); }
.wipe.run { will-change: transform; animation: wipe .64s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes wipe {
  0% { transform: translateX(-130%) skewX(12deg); }
  47% { transform: translateX(0) skewX(0); }
  53% { transform: translateX(0) skewX(0); }
  100% { transform: translateX(130%) skewX(-12deg); }
}
.view.enter > * { animation: content-in .5s var(--ease) both; }
.view.enter > *:nth-child(2) { animation-delay: .05s; }
.view.enter > *:nth-child(3) { animation-delay: .1s; }
.view.enter > *:nth-child(n+4) { animation-delay: .14s; }
@keyframes content-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Login --------------------------------------------------------------- */
.login-shell { align-items: flex-start; }
.login-shell h1 { font: 650 44px/1.08 var(--font); letter-spacing: -.035em; }
.login-shell h1 em { color: var(--accent); font-style: normal; }
.login-shell .login-logo { width: 44px; height: 44px; margin-bottom: 20px; }
.login-shell p { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 38ch; }
.login-link { gap: 8px; margin: 22px 0 14px; }
.login-shell small { color: var(--muted); text-align: start; }

@media (max-width: 1050px) { .main { padding: 0 20px 40px !important; } .topbar { margin: 0 -20px 20px; padding: 12px 20px; } }
@media (max-width: 700px) {
  .sidebar { width: 64px; flex-basis: 64px; padding: 14px 8px; }
  .main { padding: 0 14px 32px !important; } .topbar { margin: 0 -14px 16px; padding: 10px 14px; }
  .picker-button span, .identity span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wipe { display: none !important; }
  .view.enter > *, .live i, .page-loading .skeleton { animation: none !important; }
}

/* ---- Late fixes ---------------------------------------------------------- */
.staff-card .avatar, .avatar, .profile-avatar { box-shadow: none !important; filter: none !important; }

body::before, body::after { content: none !important; background: none !important; }
html[dir] body, html body { font-family: var(--font) !important; }
button, input, select, textarea { font-family: inherit; }
.login-shell .login-logo, .login-logo { filter: none !important; box-shadow: none !important; border-radius: 12px; width: 44px; height: 44px; transform: none !important; }
.view > .panel, .view > section { margin-bottom: 16px; }
.view > .panel:last-child { margin-bottom: 0; }
.staff-grid { align-content: start; }
.staff-cover, .report-cover, .profile-cover { background-color: var(--surface-2); }
.bar-line label { display: inline-flex; align-items: center; gap: 3px; width: 36px; white-space: nowrap; }
.modal-close { position: absolute; top: 12px; inset-inline-end: 12px; inset-inline-start: auto; left: auto; width: 32px; height: 32px; }
html[dir="rtl"] .modal-close { left: 12px; right: auto; }
.manage-modal h2 span { color: var(--accent); }
.manage-modal h2, .action-modal h2, .modal-heading { padding-inline-end: 32px; }
.inbox-panel:not(.open) { visibility: hidden; pointer-events: none; }
.inbox-panel { transition: transform .25s var(--ease), visibility 0s linear .25s; }
.inbox-panel.open { visibility: visible; transition-delay: 0s; }

/* ==========================================================================
   Round 2: no badges, stronger icons, settings and header layouts
   ========================================================================== */

/* ---- No badges: counts, states and labels are plain text ----------------- */
.nav-item b { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0; margin-inline-start: auto; font: 500 11px var(--mono); color: var(--muted) !important; min-width: 0; }
.nav-item.active b { color: var(--text) !important; }
.tag, .status-pill { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0; font: 600 12px var(--font); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tag.pending { color: var(--warn) !important; }
.tag.approved, .tag.accepted, .status-pill.active { color: var(--good) !important; }
.tag.rejected, .tag.declined { color: var(--bad) !important; }
.live { background: none !important; border: 0 !important; padding: 0 4px !important; height: auto; }
.notification-count { font-size: 0 !important; min-width: 0 !important; width: 8px; height: 8px; padding: 0 !important; top: 6px; inset-inline-end: 6px; border-radius: 50%; }
.my-rating-badge { border: 0 !important; background: none !important; padding: 0 !important; }
.setup-optional, .modal-field em, .setup-field em { background: none !important; border: 0; padding: 0; font: 500 11px var(--font); color: var(--muted); font-style: normal; text-transform: none; letter-spacing: 0; }
.status-help .tag { margin-inline-start: auto; }
[class*="badge"], .count-pill, .pill { background: none !important; border: 0 !important; padding: 0 !important; }

/* ---- Icons: bigger, a touch heavier, consistent per context -------------- */
.ix path, .ix circle, .ix rect, .ix line, .ix polyline { stroke-width: 1.7; }
.ix.on path { stroke-width: 1.4; }
.nav-item .nav-icon { width: 22px; height: 22px; }
.nav-item .nav-icon .ix { width: 22px; height: 22px; }
.stat-icon { width: 44px; height: 44px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: inline-grid !important; place-items: center; color: var(--accent); }
.stat-icon .ix { width: 24px; height: 24px; }
.icon-btn .ix, .picker-button .ix { width: 20px; height: 20px; }
.notification-button .ix { width: 21px; height: 21px; }
.primary .ix, .secondary .ix, .danger .ix { width: 18px; height: 18px; }
.command-icon { width: 46px; height: 46px; }
.command-icon .ix { width: 24px; height: 24px; }
.avatar .ix { width: 20px; height: 20px; }
.modal-icon .ix, .manage-icon .ix { width: 22px; height: 22px; }
.manage-icon, .modal-icon { width: 40px; height: 40px; }
.modal-close .ix, .profile-close .ix, .profile-manage .ix { width: 22px; height: 22px; }
.picker-option em .ix { width: 18px; height: 18px; }
.stars .ix { width: 14px; height: 14px; }
.error-state .ix { width: 30px; height: 30px; }
.stat { display: grid; align-content: start; justify-items: start; gap: 2px; }
.stat strong { margin-top: 14px; }

/* ---- Section header and stat rows --------------------------------------- */
.section-head { align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 20px; }
.section-head .stats-grid { margin: 0; }

/* ---- Settings: one calm column, sections divided by lines ---------------- */
.setup-shell { display: block !important; max-width: 860px; margin: 0 !important; }
.setup-intro { padding: 0 0 20px !important; }
.setup-intro h1 { font: 640 24px/1.2 var(--font) !important; margin: 0 0 6px !important; }
.setup-intro p { max-width: 60ch !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--muted); margin: 0; }
.setup-help, #setupQuickGuide .setup-help { background: none !important; border: 0 !important; padding: 0 !important; margin: 14px 0 0 !important; gap: 4px; color: var(--muted); font-size: 12px; }
.setup-help b { color: var(--text); font-size: 12px; }
.setup-help span::before { content: none !important; }
.setup-panel { overflow: visible !important; }
.setup-form { padding: 20px !important; gap: 16px !important; }
.setup-field span { font-size: 12px !important; font-weight: 500; color: var(--text) !important; }
.setup-field select, .setup-field input { width: 100%; min-height: 40px; padding: 0 12px; }
.setup-field select { padding-inline-end: 34px; }
.setup-form .wide { justify-self: start; width: auto; padding: 0 20px; }
.message-template { margin: 0 !important; padding: 20px !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; }
#setupQuickGuide { border: 0 !important; padding: 16px 0 0 !important; margin-top: 16px !important; border-top: 1px solid var(--line) !important; }
.message-template h3 { color: var(--text) !important; font: 600 14px var(--font); margin: 0 0 4px; }
.message-template p { color: var(--muted); font-size: 12px; margin: 0 0 14px; line-height: 1.5; }
.message-template form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.message-template form input, .message-template form select { flex: 1 1 220px; min-height: 40px; padding: 0 12px; }
.setup-resource-search, .setup-channel-search { grid-column: 1 / -1; }

/* ---- Focus and hover polish --------------------------------------------- */
.nav-item, .icon-btn, .picker-button, .primary, .secondary, .danger, .staff-card, .command-card { -webkit-tap-highlight-color: transparent; }
.stat:hover { border-color: var(--line); }

/* ---- Leftover legacy colours and fonts ----------------------------------- */
h1, h2, h3, h4, .brand strong, .status-hero h1, .hero h1, .leader-rank, .rank-number { font-family: var(--font) !important; }
.status-hero { align-items: flex-end; }
.status-hero h1 { font: 640 24px/1.2 var(--font) !important; letter-spacing: -.02em !important; }
.status-live { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 8px; }
.status-live span { color: var(--muted); }
.status-choice, .status-choice.selected { box-shadow: none !important; }
.status-choice { background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--r); }
.status-choice.selected { border-color: var(--accent); background: var(--surface-2) !important; }
.profile-report-note { background: var(--surface-2) !important; border-color: var(--line) !important; }
.server-icon { background: var(--bg) !important; }
.command-icon, .modal-icon, .manage-icon.adjust { background: var(--bg) !important; color: var(--accent) !important; }
.status-help-icon { background: none !important; border: 1px solid var(--line); border-radius: 8px; }

.request-content { min-width: 0; }
.request-content b, .request-content p { display: block; }
.request-content p { margin: 4px 0; }
.section-head > .tag, .section-head > .status-pill { display: none; }
.leader-row { gap: 14px; padding: 12px 14px !important; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 8px; background: var(--surface); animation: none; }
.leader-row:last-child { margin-bottom: 0; }
.leader-row > :first-child:not(.avatar) { font: 600 12px var(--mono) !important; color: var(--muted) !important; min-width: 22px; }
.leader-stat b { color: var(--accent); }
.request-list { gap: 8px; }
.panel-body { padding: 16px; }

/* ---- System health ------------------------------------------------------- */
.hl-summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.hl-summary b { display: block; font-size: 16px; font-weight: 620; letter-spacing: -.01em; }
.hl-summary small { color: var(--muted); font-size: 12px; }
.hl-mark { display: inline-flex; }
.hl-summary.hl-ok .hl-mark, .hl-summary.hl-ok b { color: var(--good); }
.hl-summary.hl-warn .hl-mark, .hl-summary.hl-warn b { color: var(--warn); }
.hl-summary.hl-bad .hl-mark, .hl-summary.hl-bad b { color: var(--bad); }
.hl-summary b { color: var(--text); }
.hl-summary.hl-ok { border-color: color-mix(in srgb, var(--good) 30%, var(--line)); }
.hl-summary.hl-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.hl-summary.hl-bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.hl-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.hl-side { display: grid; gap: 16px; }
.hl-checks { display: grid; }
.hl-check { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 13px 18px; }
.hl-check + .hl-check { border-top: 1px solid var(--line); }
.hl-check b { display: block; font-size: 13px; font-weight: 600; }
.hl-check small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.hl-ico { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.hl-check em { font: 600 12px var(--font); font-style: normal; white-space: nowrap; }
.hl-check.hl-ok .hl-ico, .hl-check.hl-ok em { color: var(--good); }
.hl-check.hl-warn .hl-ico, .hl-check.hl-warn em { color: var(--warn); }
.hl-check.hl-bad .hl-ico, .hl-check.hl-bad em { color: var(--bad); }
.hl-bars { display: flex; align-items: flex-end; gap: 3px; height: 84px; }
.hl-bars i { flex: 1; min-width: 3px; max-width: 16px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .85; }
.hl-scale { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px var(--mono); color: var(--muted); }
.hl-empty { color: var(--muted); font-size: 12px; padding: 12px 18px; }
.hl-queue { display: grid; }
.hl-queue button { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: none; text-align: start; color: var(--text); font-size: 13px; transition: background-color .15s; }
.hl-queue button + button { border-top: 1px solid var(--line); }
.hl-queue button:hover { background: var(--surface-2); }
.hl-queue button span { flex: 1; }
.hl-queue button b { font: 600 13px var(--mono); }
.hl-queue button .ix { color: var(--muted); }
.hl-log { display: grid; }
.hl-log > div { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: center; padding: 11px 18px; font-size: 13px; }
.hl-log > div + div { border-top: 1px solid var(--line); }
.hl-log span { color: var(--text); font-weight: 500; }
.hl-log b { font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-log time { font: 500 11px var(--mono); color: var(--muted); }
@media (max-width: 1050px) { .hl-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .hl-log > div { grid-template-columns: 1fr auto; } .hl-log b { display: none; } }

/* ==========================================================================
   Round 3: profile, palette, confirm, list tools, overview queue, uptime, audit
   ========================================================================== */
[hidden] { display: none !important; }
[data-profile] { cursor: pointer; }
.identity[data-profile] { border-radius: var(--r); padding: 3px 6px !important; transition: background-color .15s; }
.identity[data-profile]:hover { background: var(--surface-2) !important; }
.status-dot.is-break { background: var(--warn); }

/* ---- Confirm dialog ------------------------------------------------------ */
.confirm-backdrop { z-index: 70; }
.confirm-card { width: min(440px, 100%); padding: 22px; display: grid; gap: 16px; }
.confirm-head { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.confirm-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--accent); }
.confirm-icon.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.confirm-card h2 { margin: 0 0 4px; font-size: 17px; }
.confirm-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.confirm-list { margin: 0; padding: 0 0 0 18px; color: var(--muted); font-size: 12px; display: grid; gap: 4px; }
.confirm-type { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.confirm-type b { color: var(--text); font-family: var(--mono); }
.confirm-type input { min-height: 40px; padding: 0 12px; font-family: var(--mono); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.confirm-actions button:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Command palette ----------------------------------------------------- */
.palette-backdrop { z-index: 75; align-items: start; padding-top: 12vh; }
.palette { width: min(600px, 100%); background: var(--surface) !important; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); overflow: hidden; }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette-input input { flex: 1; height: 100%; border: 0 !important; background: none !important; color: var(--text); font-size: 15px; box-shadow: none !important; padding: 0; }
kbd { font: 500 11px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; background: var(--bg); }
.palette-list { max-height: min(50vh, 420px); overflow-y: auto; padding: 6px; }
.palette-group { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.palette-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; background: none; color: var(--text); text-align: start; font-size: 13px; }
.palette-row.active { background: var(--surface-2); }
.palette-row img, .palette-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; object-fit: cover; }
.palette-ico { display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
.palette-row.active .palette-ico { color: var(--accent); }
.palette-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-row small { color: var(--muted); font-size: 11px; }
.palette-empty { padding: 28px; text-align: center; color: var(--muted); }
.palette footer { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.palette footer kbd { margin-inline-end: 3px; }

/* ---- List tools ---------------------------------------------------------- */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.lt-search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 340px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--muted); }
.lt-search:focus-within { border-color: var(--accent); }
.lt-search input { flex: 1; min-width: 0; border: 0 !important; background: none !important; padding: 0; min-height: 34px; box-shadow: none !important; }
.list-tools select { min-height: 36px; padding: 0 30px 0 12px; }
.list-tools .secondary { min-height: 36px; }
.lt-count { margin-inline-start: auto; font: 500 12px var(--mono); color: var(--muted); }
.list-more { width: 100%; margin-top: 10px; }
[data-empty="true"]::after { content: 'No results. Adjust the search or filter.'; display: block; padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r); }
.au-date { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.au-date input { min-height: 36px; padding: 0 10px; color-scheme: dark; }

/* ---- Overview workbench -------------------------------------------------- */
.hero { align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.viewer-summary[data-profile]:hover b { color: var(--accent); }
.ov-queue { display: grid; }
.ov-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; }
.ov-item + .ov-item { border-top: 1px solid var(--line); }
.ov-ico { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--accent); }
.ov-text b { display: block; font-size: 13px; font-weight: 600; }
.ov-text p { margin: 3px 0 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ov-text time { font: 500 11px var(--mono); color: var(--muted); }
.ov-actions { display: flex; gap: 6px; }
.ov-actions button { min-height: 32px; padding: 0 12px; font-size: 12px; }
.ov-more { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.ov-empty { min-height: 140px; display: flex; gap: 14px; align-items: center; justify-content: center; text-align: start; }
.ov-empty .ix { color: var(--good); }
.ov-empty div { display: grid; gap: 2px; }
.ov-elapsed { font: 500 12px var(--mono); color: var(--muted); }
.ov-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ov-toggle button { background: none; padding: 7px 12px; font-size: 12px; color: var(--muted); }
.ov-toggle button + button { border-inline-start: 1px solid var(--line); }
.ov-toggle button[aria-selected="true"] { background: var(--surface-2); color: var(--text); }
.ov-bars { height: 120px; }
.staff-row[role="link"]:hover b { color: var(--accent); }

/* ---- Uptime -------------------------------------------------------------- */
.ut-panel { margin-bottom: 16px; }
.ut-figures { display: flex; gap: 24px; text-align: end; }
.ut-figures strong { display: block; font: 620 20px/1.1 var(--mono); }
.ut-figures span { color: var(--muted); font-size: 11px; }
.ut-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.ut-gap { margin-top: 20px; }
.ut-bar { display: flex; gap: 3px; height: 40px; }
.ut-hours { height: 28px; gap: 2px; }
.ut-bar i { flex: 1; border-radius: 3px; transition: transform .12s, opacity .12s; }
.ut-bar i:hover { transform: scaleY(1.12); opacity: .85; }
.ut-up { background: var(--good); } .ut-part { background: var(--warn); } .ut-down { background: var(--bad); } .ut-nodata { background: var(--surface-2); }
.ut-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 12px; color: var(--muted); }
.ut-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ut-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ut-events-head { padding: 12px 18px; border-top: 1px solid var(--line); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ut-incident { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); }
.ut-incident b { display: block; font-size: 13px; font-weight: 600; }
.ut-incident small { color: var(--muted); font-size: 12px; }
.ut-incident time { font: 500 11px var(--mono); color: var(--muted); }
.ut-incident.is-down .hl-ico { color: var(--bad); }
.ut-incident.is-restart .hl-ico { color: var(--warn); }
@media (max-width: 700px) { .ut-figures { gap: 14px; } .ut-bar { height: 32px; } }

/* ---- Audit log ----------------------------------------------------------- */
.au-head, .au-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 90px; gap: 12px; align-items: center; padding: 11px 18px; }
.au-head { border-bottom: 1px solid var(--line); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.au-row + .au-row { border-top: 1px solid var(--line); }
.au-row:hover { background: var(--surface-2); }
.au-event { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.au-event .ix { color: var(--accent); flex: none; }
.au-member a { color: var(--text); text-decoration: none; }
.au-member a:hover { color: var(--accent); text-decoration: underline; }
.au-actor { color: var(--muted); }
.au-row time { font: 500 11px var(--mono); color: var(--muted); text-align: end; }
.au-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.au-foot:has([hidden]) { display: none; }
#auditRows .page-loading { padding: 16px; }
@media (max-width: 800px) { .au-head { display: none; } .au-row { grid-template-columns: 1fr auto; } .au-actor { display: none; } }

/* ---- Profile ------------------------------------------------------------- */
.pf { max-width: 1080px; }
.pf-banner { height: 190px; border: 1px solid var(--line); border-radius: 14px 14px 0 0; background-color: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); background-size: cover; background-position: center; }
.pf-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: end; padding: 0 22px; margin-top: -44px; }
.pf-avatar { width: 108px; height: 108px; border-radius: 22px; border: 4px solid var(--bg); background: var(--surface-2); overflow: hidden; display: grid; place-items: center; font: 700 38px var(--font); color: var(--accent); flex: none; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-id { padding-bottom: 6px; min-width: 0; }
.pf-id h1 { margin: 0; font: 680 26px/1.15 var(--font) !important; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pf-handle { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.pf-handle i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); vertical-align: middle; margin: 0 6px; }
.pf-tagline { margin: 6px 0 0; color: var(--text); font-size: 14px; }
.pf-actions { display: flex; gap: 8px; padding-bottom: 8px; }
.pf-bio { margin: 18px 0 0; padding: 0 22px; max-width: 70ch; font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.pf-quiet { color: var(--muted) !important; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding: 0 22px; color: var(--muted); font-size: 13px; }
.pf-meta span, .pf-meta a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; }
.pf-meta a { color: var(--accent); }
.pf-meta a:hover { text-decoration: underline; }
.pf-stats { display: grid; grid-template-columns: repeat(5, 1fr); margin: 22px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pf-stats > div { padding: 16px 18px; }
.pf-stats > div + div { border-inline-start: 1px solid var(--line); }
.pf-stats strong { display: block; font: 620 22px/1.1 var(--mono); letter-spacing: -.02em; }
.pf-stats span { color: var(--muted); font-size: 12px; }
.pf-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pf-side { display: grid; gap: 16px; }
.pf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pf-tabs button { background: none; padding: 10px 14px; margin-bottom: -1px; color: var(--muted); font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; }
.pf-tabs button:hover { color: var(--text); }
.pf-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.pf-tabs button span { font: 500 11px var(--mono); color: var(--muted); margin-inline-start: 4px; }
.pf-feed { display: grid; gap: 10px; }
.pf-post { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pf-post header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-post header b { font-size: 13px; }
.pf-post header time { margin-inline-start: auto; font: 500 11px var(--mono); color: var(--muted); }
.pf-post p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.pf-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r); }
.pf-empty b { color: var(--text); font-size: 14px; }
.pf-empty span { font-size: 12px; max-width: 34ch; }
.pf-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-timeline li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding-bottom: 14px; position: relative; }
.pf-timeline li:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 16px; top: 34px; bottom: 0; width: 1px; background: var(--line); }
.pf-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--accent); }
.pf-timeline b { display: block; font-size: 13px; font-weight: 600; padding-top: 2px; }
.pf-timeline time { font: 500 11px var(--mono); color: var(--muted); }
.pf-rows > div { display: flex; align-items: center; gap: 12px; padding: 11px 18px; font-size: 13px; }
.pf-rows > div + div { border-top: 1px solid var(--line); }
.pf-rows span { color: var(--muted); flex: 1; }
.pf-rows b { font: 600 13px var(--mono); }
.pf-rows em { font-style: normal; color: var(--muted); font-size: 12px; min-width: 84px; text-align: end; }
.pf-main > [data-panel] .pf-rows { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pf-bars { height: 96px; }
.pf-edit { width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; }
.pf-edit h2 { margin: 0; font-size: 18px; }
.pf-edit-sub { margin: 4px 0 18px; color: var(--muted); font-size: 12px; }
.pf-form { display: grid; gap: 16px; }
.pf-form .modal-field { display: grid; gap: 7px; }
.pf-form .modal-field > span { font-size: 12px; font-weight: 500; }
.pf-form input, .pf-form textarea { width: 100%; min-height: 40px; padding: 10px 12px; }
.pf-form textarea { resize: vertical; line-height: 1.5; }
.pf-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-swatches button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; outline: 1px solid var(--line); outline-offset: 2px; display: grid; place-items: center; color: var(--muted); background: var(--bg); }
.pf-swatches button[aria-checked="true"] { border-color: var(--text); }
.pf-links { display: grid; gap: 8px; }
.pf-links > div { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.pf-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.pf-check input { width: 18px; min-height: 18px; margin-top: 2px; accent-color: var(--accent); }
.pf-check b { display: block; font-size: 13px; }
.pf-check small { color: var(--muted); font-size: 12px; }
.pf-error { margin: 0; color: var(--bad); font-size: 13px; }
@media (max-width: 900px) { .pf-cols { grid-template-columns: 1fr; } .pf-stats { grid-template-columns: repeat(2, 1fr); } .pf-stats > div:nth-child(odd) { border-inline-start: 0; } .pf-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .pf-head { grid-template-columns: auto 1fr; } .pf-actions { grid-column: 1 / -1; } .pf-avatar { width: 84px; height: 84px; font-size: 30px; } .pf-banner { height: 130px; } .pf-links > div { grid-template-columns: 1fr; } }
.list-wrap { min-width: 0; }
.modal-card { position: relative; }
.pf-edit .modal-close, .confirm-card .modal-close { position: absolute; top: 14px; right: 14px; left: auto; inset-inline-start: auto; }
html[dir="rtl"] .pf-edit .modal-close { right: auto; left: 14px; }
.pf-edit h2, .pf-edit-sub { padding-inline-end: 36px; }
.grid-2 { margin-bottom: 16px; }
.staff-cover[style*="default-banner"] { display: none; }
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar > div:first-child { min-width: 0; flex: 1 1 100%; }
  .top-actions { flex-wrap: wrap; gap: 6px; width: 100%; }
  .top-actions .live, .top-actions #refresh, .identity span { display: none !important; }
  .icon-btn, .picker-button { height: 40px; min-width: 40px; }
}

/* ==========================================================================
   Standalone profile page (/p/:name): its own layout, no dashboard sidebar
   ========================================================================== */
.pp-body { min-height: 100dvh; }
.pp-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 max(20px, calc((100vw - 1120px) / 2)); background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--line); }
.pp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.pp-brand img { width: 28px; height: 28px; }
.pp-brand b { font: 650 18px var(--font); letter-spacing: -.02em; }
.pp-nav nav { display: flex; gap: 4px; margin-inline-start: 8px; }
.pp-nav nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .15s, background-color .15s; }
.pp-nav nav a:hover { color: var(--text); background: var(--surface-2); }
.pp-user { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500; background: var(--surface); }
.pp-user:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.pp-nav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.pp-initial { display: grid; place-items: center; background: var(--surface-2); color: var(--accent); font-weight: 700; }
.pp { max-width: 1120px; margin: 0 auto; padding: 24px 20px 64px; }
.pp.enter > * { animation: content-in .5s var(--ease) both; }

.pp-hero { position: relative; z-index: 2; margin-bottom: 20px; }
.pp-banner { position: relative; height: 220px; border: 1px solid var(--line); border-radius: 16px; background-color: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); background-size: cover; background-position: center; }
.pp-views { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--line); font: 500 12px var(--mono); }
.pp-id { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: end; padding: 0 20px; margin-top: -48px; }
.pp-avatar { width: 112px; height: 112px; border-radius: 50%; border: 4px solid var(--bg); background: var(--surface-2); overflow: hidden; flex: none; }
.pp-avatar img, .pp-avatar .pp-initial { width: 100%; height: 100%; object-fit: cover; font-size: 40px; }
.pp-name { padding-bottom: 6px; min-width: 0; }
.pp-name h1 { margin: 0; font: 680 24px/1.15 var(--font) !important; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pp-handle { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.pp-handle i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); vertical-align: middle; margin: 0 6px; }
.pp-counts { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 8px; font-size: 13px; color: var(--muted); }
.pp-counts span { padding: 0 14px; }
.pp-counts span:first-child { padding-inline-start: 0; }
.pp-counts span + span { border-inline-start: 1px solid var(--line); }
.pp-counts b { color: var(--text); font: 600 13px var(--mono); margin-inline-end: 3px; }
.pp-tagline { margin: 8px 0 0; font-size: 14px; }
.pp-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; }
.pp-actions .secondary { min-height: 36px; }
.icon-only { width: 36px; padding: 0 !important; }
.pp-rep[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pp-rep span { font: 600 12px var(--mono); color: var(--muted); }
.pp-rep:disabled { opacity: .5; cursor: not-allowed; }
.pp-menu { position: relative; }
.pp-menu-list { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 210px; padding: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); z-index: 20; display: grid; }
.pp-menu-list > * { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; background: none; color: var(--text); text-decoration: none; font-size: 13px; text-align: start; }
.pp-menu-list > *:hover { background: var(--surface); }

.pp-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.pp-left { display: grid; gap: 16px; min-width: 0; }
.pp-right { position: sticky; top: 76px; }
.pp-about-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pp-about-head h3 { margin: 0; font: 600 14px var(--font); }
.pp-about-body { padding: 16px 18px; display: grid; gap: 12px; }
.pp-bio { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; max-width: 70ch; }
.pp-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--muted); font-size: 13px; }
.pp-meta span { display: inline-flex; align-items: center; gap: 7px; }
.pp-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted); font-size: 12px; line-height: 1.5; }
.pp-hint a { color: var(--accent); }
.pp-conns { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-conn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--text); text-decoration: none; transition: border-color .15s, color .15s; }
.pp-conn:hover, .pp-conn:focus-visible { border-color: var(--accent); color: var(--accent); }
.pp-conn .tip { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; min-width: 120px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); box-shadow: var(--shadow-pop); text-align: start; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 10; white-space: nowrap; }
.pp-conn .tip b { display: block; font-size: 12px; color: var(--text); }
.pp-conn .tip small { color: var(--muted); font-size: 11px; }
.pp-conn:hover .tip, .pp-conn:focus-visible .tip { opacity: 1; transform: none; }
.pp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pp-tabs button { background: none; padding: 10px 14px; margin-bottom: -1px; color: var(--muted); font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.pp-tabs button:hover { color: var(--text); }
.pp-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.pp-tabs button span { font: 500 11px var(--mono); color: var(--muted); margin-inline-start: 4px; }
.pp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pp-tile { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); min-height: 128px; align-content: start; }
.pp-tile span { color: var(--muted); font-size: 12px; }
.pp-tile strong { display: block; margin-top: 8px; font: 620 28px/1 var(--mono); letter-spacing: -.03em; }
.pp-tile > i { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--accent); }
.pp-tile-foot { grid-column: 1 / -1; display: grid; gap: 6px; align-self: end; margin-top: 10px; }
.pp-tile-foot small { color: var(--muted); font-size: 11px; }
.pp-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pp-progress i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.pp-spark { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.pp-spark i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .8; }
.pp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-rows-box { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pp-comments { display: grid; grid-template-rows: auto minmax(120px, 1fr) auto; max-height: calc(100dvh - 100px); overflow: hidden; }
.pp-c-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pp-c-head h3 { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 14px var(--font); }
.pp-c-head output { font: 600 12px var(--mono); color: var(--muted); }
.pp-c-list { overflow-y: auto; padding: 8px 18px; min-height: 120px; }
.pp-c-empty { margin: 36px 0; text-align: center; color: var(--muted); font-size: 12px; }
.pp-comment { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 0; }
.pp-comment + .pp-comment { border-top: 1px solid var(--line); }
.pp-c-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.pp-comment header { display: flex; align-items: center; gap: 8px; }
.pp-comment header a, .pp-comment header b { color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.pp-comment header a:hover { color: var(--accent); }
.pp-comment time { font: 500 11px var(--mono); color: var(--muted); }
.pp-c-del { margin-inline-start: auto; background: none; color: var(--muted); border-radius: 6px; padding: 4px; opacity: 0; transition: opacity .15s, color .15s; }
.pp-comment:hover .pp-c-del, .pp-c-del:focus-visible { opacity: 1; }
.pp-c-del:hover { color: var(--bad); }
.pp-comment p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.pp-c-form { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); }
.pp-c-form textarea { width: 100%; min-height: 64px; resize: vertical; padding: 10px 12px; line-height: 1.5; }
.pp-c-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.pp-c-foot span { font: 500 11px var(--mono); color: var(--muted); }
.pp-c-foot .primary { min-height: 32px; padding: 0 12px; font-size: 12px; }
.pp-error { display: grid; justify-items: center; gap: 10px; padding: 80px 20px; text-align: center; }
.pp-error .ix { color: var(--bad); }
.pp-error h1 { margin: 0; font: 640 22px var(--font) !important; }
.pp-error p { margin: 0; color: var(--muted); }
a.nav-item { text-decoration: none; }
@media (max-width: 900px) { .pp-grid { grid-template-columns: 1fr; } .pp-right { position: static; } .pp-comments { max-height: none; } .pp-id { grid-template-columns: auto 1fr; } .pp-actions { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pp-nav nav { display: none; } .pp-banner { height: 150px; } .pp-avatar { width: 88px; height: 88px; } .pp-tiles, .pp-two { grid-template-columns: 1fr; } .pp-user span { display: none; } .pp-counts span { padding: 0 10px; } }
.pp-nav nav { flex-direction: row; }
.pp-id { position: relative; z-index: 1; }
.pp-nav { z-index: 15; }

/* ---- Maintenance admin --------------------------------------------------- */
.mt-panel { margin-top: 16px; }
.mt-form { display: grid; gap: 14px; padding: 18px; }
.mt-form .modal-field { display: grid; gap: 7px; }
.mt-form .modal-field > span { font-size: 12px; font-weight: 500; }
.mt-form input, .mt-form textarea { width: 100%; min-height: 40px; padding: 10px 12px; color-scheme: dark; }
.mt-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt-affects { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mt-affects legend { font-size: 12px; font-weight: 500; margin-bottom: 8px; padding: 0; }
.mt-affects label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.mt-affects input { width: 16px; min-height: 16px; accent-color: var(--accent); }
.mt-actions { display: flex; }
.mt-list { border-top: 1px solid var(--line); }
.mt-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.mt-row + .mt-row { border-top: 1px solid var(--line); }
.mt-row > div { flex: 1; min-width: 0; }
.mt-row b { display: block; font-size: 13px; }
.mt-row small { color: var(--muted); font-size: 12px; }
.mt-row em { font: 600 12px var(--font); font-style: normal; color: var(--muted); }
.mt-row em.mt-in_progress { color: var(--accent); }
.mt-row .secondary, .mt-row .danger { min-height: 32px; padding: 0 12px; font-size: 12px; }
@media (max-width: 640px) { .mt-times { grid-template-columns: 1fr; } .mt-row { flex-wrap: wrap; } }

/* ==========================================================================
   Applications: dashboard builder + review (ap-*), web form (af-*), Discord preview (dp-*).
   Uses the flat tokens from melyx-ui.css. Loaded last in /app.css.
   ========================================================================== */

/* ---- Shared bits ---------------------------------------------------------- */
.ap { --form-color: var(--accent); }
.ap-muted { color: var(--muted); font-size: 12px; margin: 0; display: flex; align-items: center; gap: 6px; }
.ap-good { color: var(--good); } .ap-bad { color: var(--bad); }
.ap-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.ap-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.ap-chip.req { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.ap-chip.cond { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ap-icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background-color .15s; }
.ap-icon-btn:hover:not(:disabled) { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.ap-icon-btn.danger:hover:not(:disabled) { color: var(--bad); }
.ap-icon-btn:disabled { opacity: .35; cursor: default; }
.ap-link-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 4px 2px; color: var(--accent); font: 500 12px var(--font); cursor: pointer; }
.ap-link-btn:hover { text-decoration: underline; }
.ap-link-btn.danger { color: var(--bad); }
.ap-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.ap-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ap-status.s-pending, .ap-status.s-in_progress { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.ap-status.s-in_progress { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ap-status.s-accepted { color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, var(--line)); background: color-mix(in srgb, var(--good) 10%, var(--surface)); }
.ap-status.s-rejected { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.ap-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.ap-avatar.broken { visibility: hidden; }
.ap-avatar.lg { width: 52px; height: 52px; }
.ap-avatar-fallback { display: inline-grid; place-items: center; color: var(--accent); font-weight: 700; border: 1px solid var(--line); }
.ap-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); color: var(--text); font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.ap-alert > svg { color: var(--warn); flex: none; margin-top: 1px; }
.ap-alert code, .ap-field code { font: 12px var(--mono); background: var(--bg); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); }

/* Switch */
.ap-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.ap-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.ap-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background-color .2s; }
.ap-switch span::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: transform .2s var(--ease); }
.ap-switch input:checked + span { background: var(--good); }
.ap-switch input:checked + span::after { transform: translateX(16px); }
html[dir="rtl"] .ap-switch input:checked + span::after { transform: translateX(-16px); }
.ap-switch input:focus-visible + span { box-shadow: var(--ring); }

/* Fields */
.ap-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-inline > .ap-field { flex: 1 1 220px; }
.ap-inline > .ap-field.small { flex: 0 1 170px; }
.ap-group-body > .ap-field.small { max-width: 280px; }
.ap-field > span { font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.ap-field > span em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 11px; }
.ap-field > small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.ap-field input, .ap-field select, .ap-field textarea { width: 100%; min-height: 36px; padding: 8px 11px; }
.ap-field textarea { resize: vertical; line-height: 1.5; }
.ap-field input[type="color"] { padding: 3px; height: 36px; cursor: pointer; }
.ap-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }

/* Dialog */
.ap-dialog-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: #000a; }
.ap-dialog { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; position: relative; }
.ap-dialog.wide { width: min(760px, 100%); }
.ap-dialog-close { position: absolute; top: 14px; inset-inline-end: 14px; }
.ap-dialog h2 { margin: 0 0 12px; font: 640 17px var(--font); padding-inline-end: 32px; }
.ap-dialog-body { display: flex; flex-direction: column; gap: 14px; }
.ap-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ap-bulk { width: 100%; padding: 10px; font: 13px/1.6 var(--font); resize: vertical; }

/* ---- Header, tabs ----------------------------------------------------------- */
.ap-head { justify-content: space-between; }
.ap-head-actions { display: flex; gap: 8px; }
.ap-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.ap-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font: 600 13px var(--font); cursor: pointer; white-space: nowrap; }
.ap-tabs button:hover { color: var(--text); }
.ap-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.ap-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--warn); color: #140f02; font: 700 11px var(--mono); }

/* ---- Forms tab --------------------------------------------------------------- */
.ap-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 12px; margin-bottom: 18px; }
.ap-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--muted); text-align: start; cursor: pointer; font: inherit; transition: border-color .15s; }
.ap-stat:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ap-stat b { font: 640 26px/1 var(--mono); color: var(--text); letter-spacing: -.03em; }
.ap-stat span { font-size: 12px; }
.ap-stat.s-pending > svg { color: var(--warn); } .ap-stat.s-accepted > svg { color: var(--good); } .ap-stat.s-rejected > svg { color: var(--bad); } .ap-stat.s-in_progress > svg { color: var(--accent); }
.ap-stat-chart { cursor: default; justify-content: space-between; }
.ap-stat-chart:hover { border-color: var(--line); }
.ap-spark { display: flex; align-items: flex-end; gap: 3px; height: 46px; width: 100%; }
.ap-spark i { flex: 1; min-width: 3px; border-radius: 3px 3px 1px 1px; background: var(--accent); opacity: .85; }
.ap-spark i.zero { background: var(--line); opacity: 1; }

.ap-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ap-form-card { --form-color: var(--accent); position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .15s; }
.ap-form-card::before { content: ''; height: 4px; background: var(--form-color); }
.ap-form-card:hover { border-color: color-mix(in srgb, var(--form-color) 45%, var(--line)); }
.ap-form-main { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 12px; background: none; border: 0; text-align: start; color: var(--text); cursor: pointer; font: inherit; }
.ap-form-main b { font: 640 16px/1.35 var(--font); letter-spacing: -.01em; }
.ap-form-main small { color: var(--muted); font-size: 12px; }
.ap-form-top { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.ap-form-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.ap-form-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ap-form-status.open { background: color-mix(in srgb, var(--good) 12%, var(--surface)); color: var(--good); }
.ap-form-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ap-form-stats > * { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: none; border: 0; color: var(--muted); font: 500 11px var(--font); }
.ap-form-stats > button { cursor: pointer; }
.ap-form-stats > button:hover { background: var(--surface-2); color: var(--text); }
.ap-form-stats > * + * { border-inline-start: 1px solid var(--line); }
.ap-form-stats b { font: 640 17px var(--mono); color: var(--text); }
.ap-form-actions { display: flex; align-items: center; gap: 4px; padding: 10px 12px; }
.ap-form-actions .ap-switch { margin-inline-end: 6px; }
.ap-edit-btn { margin-inline-start: auto; min-height: 32px !important; }

.ap-empty { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ap-empty h3 { margin: 6px 0 0; font: 640 18px var(--font); }
.ap-empty > p { color: var(--muted); margin: 0 0 14px; max-width: 460px; }
.ap-empty-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.ap-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; width: 100%; }
.ap-template { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; text-align: start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); cursor: pointer; font: inherit; transition: border-color .15s, transform .15s var(--ease); }
.ap-template:hover { border-color: var(--accent); transform: translateY(-2px); }
.ap-template > svg { color: var(--accent); margin-bottom: 4px; }
.ap-template b { font-size: 14px; }
.ap-template span { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* ---- Builder ---------------------------------------------------------------- */
.ap-builder { --form-color: var(--accent); }
.ap-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 12px; background: var(--bg); }
.ap-back-icon { transform: rotate(180deg); }
html[dir="rtl"] .ap-back-icon { transform: none; }
.ap-bar-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.ap-bar-title b { font: 640 18px/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-save-state { color: var(--muted); font-size: 11.5px; }
.ap-save-state.dirty { color: var(--warn); }
.ap-save-state.dirty::before { content: '● '; }
.ap-open-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 0 12px; min-height: 36px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ap-subtabs { display: flex; flex-direction: row; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px); margin-bottom: 18px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ap-subtabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.ap-subtabs button:hover { color: var(--text); }
.ap-subtabs button[aria-selected="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

.ap-qlist { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ap-form-meta { overflow: hidden; display: flex; flex-direction: column; }
.ap-stripe { height: 6px; background: var(--form-color); }
.ap-title-input { border: 0 !important; background: none !important; font: 650 24px/1.3 var(--font) !important; padding: 18px 20px 4px !important; letter-spacing: -.02em; }
.ap-desc-input { border: 0 !important; background: none !important; padding: 6px 20px 18px !important; resize: vertical; color: var(--muted) !important; line-height: 1.55; }
.ap-title-input:focus, .ap-desc-input:focus { box-shadow: inset 0 -2px 0 var(--form-color) !important; }

.ap-qcard { transition: border-color .15s, box-shadow .15s; }
.ap-qcard.open { border-color: color-mix(in srgb, var(--form-color) 55%, var(--line)); box-shadow: inset 3px 0 0 var(--form-color); }
html[dir="rtl"] .ap-qcard.open { box-shadow: inset -3px 0 0 var(--form-color); }
.ap-qcard.is-section { background: color-mix(in srgb, var(--form-color) 6%, var(--surface)); }
.ap-qcard.dragging { opacity: .45; }
.ap-qcard.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.ap-qcard.drop-after { box-shadow: 0 3px 0 var(--accent); }
.ap-qhead { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 8px; cursor: pointer; min-height: 52px; }
.ap-grip { cursor: grab; color: var(--muted); display: inline-grid; place-items: center; width: 22px; height: 30px; border-radius: 6px; transform: rotate(90deg); }
.ap-grip:hover { color: var(--text); background: var(--surface-2); }
.ap-grip:active { cursor: grabbing; }
.ap-qnum { flex: none; min-width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font: 600 12px var(--mono); color: var(--muted); }
.ap-qcard.is-section .ap-qnum { color: var(--form-color); }
.ap-qtitle { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-qtitle em { color: var(--muted); font-weight: 500; }
.ap-qmeta { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.ap-qtools { display: flex; gap: 1px; opacity: 0; transition: opacity .15s; }
.ap-qcard:hover .ap-qtools, .ap-qcard.open .ap-qtools, .ap-qtools:focus-within { opacity: 1; }
.ap-qbody { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 16px 48px; }
html[dir="rtl"] .ap-qbody { padding: 4px 48px 16px 18px; }
.ap-qrow { display: flex; gap: 10px; flex-wrap: wrap; }
.ap-label-input { flex: 1 1 320px; min-height: 42px; padding: 9px 12px; font-size: 14.5px !important; font-weight: 600; background: var(--surface-2) !important; }
.ap-type-select { flex: 0 0 190px; min-height: 42px; padding-inline-start: 12px; }
.ap-qbody > textarea { min-height: 38px; padding: 8px 12px; resize: vertical; line-height: 1.5; }
.ap-options { display: flex; flex-direction: column; gap: 6px; }
.ap-option { display: flex; align-items: center; gap: 8px; }
.ap-option input { flex: 1; min-height: 34px; padding: 6px 10px; }
.ap-option-mark { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--mono); color: var(--muted); }
.ap-option-mark.checkbox { border-radius: 4px; }
.ap-option-mark.dropdown { border: 0; width: 18px; }
.ap-options > .ap-link-btn { align-self: flex-start; }
.ap-options .ap-link-btn + .ap-link-btn { margin-top: -4px; }
.ap-condition { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r); }
.ap-condition.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ap-cond-values { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; cursor: pointer; background: var(--surface); }
.ap-check input { accent-color: var(--accent); margin: 0; width: 14px; height: 14px; }
.ap-check:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.ap-qfoot { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
.ap-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ap-add-row { position: relative; }
.ap-add { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1.5px dashed var(--line); border-radius: var(--r); background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; transition: color .15s, border-color .15s; }
.ap-add:hover { color: var(--accent); border-color: var(--accent); }
.ap-type-menu { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 6; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; padding: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.ap-type-menu[hidden] { display: none; }
.ap-type-menu button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 500 12.5px var(--font); cursor: pointer; text-align: start; }
.ap-type-menu button:hover { background: var(--surface); }
.ap-type-menu button svg { color: var(--accent); }
.ap-hint { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; margin: 4px 0 0; justify-content: center; text-align: center; }

.ap-settings, .ap-publish { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ap-group > header { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ap-group > header > svg { color: var(--accent); flex: none; margin-top: 2px; }
.ap-group h3 { margin: 0; font: 640 14.5px var(--font); }
.ap-group header p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.ap-group-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px 18px; }
.ap-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ap-mode { cursor: pointer; }
.ap-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ap-mode > span { height: 100%; display: flex; flex-direction: column; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); transition: border-color .15s, background-color .15s; }
.ap-mode > span svg { color: var(--muted); }
.ap-mode b { font-size: 13px; }
.ap-mode small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.ap-mode input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.ap-mode input:checked + span svg { color: var(--accent); }
.ap-mode input:focus-visible + span { box-shadow: var(--ring); }
.ap-toggle-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.ap-toggle-row .ap-switch { margin-top: 1px; }
.ap-toggle-row b { display: block; font-size: 13px; }
.ap-toggle-row small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; line-height: 1.45; }
.ap-roles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; min-height: 42px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.ap-roles select { flex: 1 1 140px; min-height: 28px !important; border: 0 !important; padding: 2px 30px 2px 6px !important; background-color: transparent !important; color: var(--muted); }
.ap-role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 500; }
html[dir="rtl"] .ap-role-chip { padding: 3px 9px 3px 4px; }
.ap-role-chip i { width: 8px; height: 8px; border-radius: 50%; }
.ap-role-chip.warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); color: var(--warn); }
.ap-role-chip button { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.ap-role-chip button:hover { color: var(--bad); }
.ap-member-roles .ap-role-chip { padding: 3px 9px; }
.ap-panel-row { align-items: flex-end; }
.ap-panel-row .primary { min-height: 36px; }
.ap-link-box { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-link-box input { flex: 1 1 280px; min-height: 36px; padding: 0 12px; font: 12.5px var(--mono); color: var(--muted); }
.ap-link-box a { text-decoration: none; }
.ap-preview-label { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Discord message preview */
.dp { display: flex; gap: 14px; padding: 16px; border-radius: var(--r); background: #313338; color: #dbdee1; font-family: 'gg sans', var(--font); }
.dp-avatar img { width: 40px; height: 40px; border-radius: 50%; background: #1e1f22; padding: 6px; }
.dp-main { flex: 1; min-width: 0; }
.dp-name { font-weight: 600; color: #f2f3f5; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.dp-name span { font-size: 10px; background: #5865f2; color: #fff; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.dp-embed { margin-top: 6px; max-width: 480px; padding: 10px 14px 14px; background: #2b2d31; border-radius: 4px; border-inline-start: 4px solid; }
.dp-embed > b { color: #f2f3f5; font-size: 15px; display: block; margin-bottom: 6px; }
.dp-embed > p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.dp-fields { display: flex; gap: 32px; font-size: 14px; }
.dp-fields small { display: block; font-weight: 600; color: #f2f3f5; font-size: 13px; margin-bottom: 2px; }
.dp-banner { width: 100%; margin-top: 12px; border-radius: 4px; }
.dp-buttons { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 4px; background: #4e5058; color: #fff; font-size: 14px; font-weight: 500; }
.dp-btn.primary { background: #5865f2; }

.ap-preview-wrap { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ap-preview-note { justify-content: center; }

/* ---- Responses -------------------------------------------------------------- */
.ap-filters .lt-search { max-width: 300px; }
.ap-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ap-seg button { padding: 6px 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 12px var(--font); cursor: pointer; white-space: nowrap; }
.ap-seg button:hover { color: var(--text); }
.ap-seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.ap-export { text-decoration: none; margin-inline-start: auto; }
.ap-list-panel { overflow: hidden; }
.ap-rows-head, .ap-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(90px, .9fr) 96px 110px; gap: 14px; align-items: center; padding: 10px 16px; }
.ap-rows-head { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.ap-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); text-align: start; font: inherit; cursor: pointer; transition: background-color .12s; }
.ap-row:last-child { border-bottom: 0; }
.ap-row:hover, .ap-row.active { background: var(--surface-2); }
.ap-row.active { box-shadow: inset 3px 0 0 var(--accent); }
html[dir="rtl"] .ap-row.active { box-shadow: inset -3px 0 0 var(--accent); }
.ap-row-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ap-row-user > span { display: flex; flex-direction: column; min-width: 0; }
.ap-row-user b, .ap-row-form { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-row-user b { font-size: 13px; }
.ap-row small { color: var(--muted); font-size: 11.5px; display: flex; align-items: center; gap: 4px; }
.ap-row-form { display: flex; flex-direction: column; font-size: 12.5px; }
.ap-row-time { color: var(--muted); font-size: 12px; }
.ap-row-votes { display: flex; gap: 8px; font: 12px var(--mono); color: var(--muted); }
.ap-list-panel .empty { padding: 36px; display: flex; justify-content: center; text-align: center; }
.ap-list-panel .empty > div { display: flex; flex-direction: column; gap: 4px; }

/* Drawer */
.ap-drawer { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; }
.ap-drawer-scrim { position: absolute; inset: 0; background: #0008; animation: ap-fade .2s ease; }
.ap-drawer-card { position: relative; width: min(620px, 100%); height: 100%; overflow-y: auto; background: var(--surface); border-inline-start: 1px solid var(--line); box-shadow: var(--shadow-pop); padding: 20px 22px 28px; display: flex; flex-direction: column; gap: 16px; animation: ap-slide .28s var(--ease); }
.ap-drawer-card > * { flex-shrink: 0; }
html[dir="rtl"] .ap-drawer-card { animation-name: ap-slide-rtl; }
@keyframes ap-fade { from { opacity: 0; } }
@keyframes ap-slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes ap-slide-rtl { from { transform: translateX(-40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ap-drawer-card, .ap-drawer-scrim { animation: none; } }
.ap-drawer-head { display: flex; align-items: center; gap: 12px; }
.ap-drawer-head > div { flex: 1; min-width: 0; }
.ap-drawer-head h2 { margin: 0; font: 650 18px/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; }
.ap-drawer-head small { color: var(--muted); font-size: 12px; }
.ap-drawer-head .ap-link-btn { font-family: var(--mono); color: var(--muted); padding: 0; }
.ap-decide { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); position: sticky; top: -20px; z-index: 2; }
.ap-accept { background: var(--good) !important; color: #06110c !important; }
.ap-accept:hover { background: color-mix(in srgb, var(--good) 86%, #fff) !important; }
.ap-votes { display: flex; gap: 6px; margin-inline-start: auto; }
.ap-vote { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 12.5px var(--mono); cursor: pointer; }
.ap-vote.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.ap-decision { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); }
.ap-decision.s-accepted { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); background: color-mix(in srgb, var(--good) 8%, var(--surface)); color: var(--good); }
.ap-decision.s-rejected { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); color: var(--bad); }
.ap-decision b { display: block; font-size: 13px; }
.ap-decision small { color: var(--muted); font-size: 11.5px; }
.ap-decision p { margin: 6px 0 0; color: var(--text); font-size: 13px; white-space: pre-wrap; }
.ap-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); }
.ap-meta > div { background: var(--surface); padding: 10px 12px; min-width: 0; }
.ap-meta dt { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ap-meta dd { margin: 3px 0 0; font-size: 12.5px; display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-member-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.ap-answers { display: flex; flex-direction: column; gap: 8px; }
.ap-answer-section { margin: 10px 0 0; font: 650 12px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.ap-answer { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.ap-answer.empty { opacity: .6; }
.ap-answer-q { display: flex; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.ap-answer-q i { font: 600 11px var(--mono); font-style: normal; color: var(--accent); flex: none; }
.ap-answer-a { margin-top: 6px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.ap-notes, .ap-history { display: flex; flex-direction: column; gap: 8px; }
.ap-notes h4, .ap-history h4 { margin: 6px 0 0; display: flex; align-items: center; gap: 7px; font: 640 13px var(--font); }
.ap-notes h4 small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.ap-note { padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--warn) 6%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--warn) 18%, var(--line)); }
.ap-note b { font-size: 12.5px; } .ap-note small { color: var(--muted); font-size: 11px; margin-inline-start: 6px; }
.ap-note p { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; }
.ap-note-form { display: flex; gap: 8px; align-items: flex-end; }
.ap-note-form textarea { flex: 1; padding: 8px 10px; resize: vertical; min-height: 38px; }
.ap-history-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: start; }
.ap-history-item span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-history-item small { color: var(--muted); }
.ap-history-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ap-drawer-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); margin-top: auto; }
.ap-drawer-foot a { text-decoration: none; }

@media (max-width: 1100px) {
  .ap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-stat-chart { grid-column: 1 / -1; }
  .ap-rows-head, .ap-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 100px; }
  .ap-rows-head span:nth-child(3), .ap-rows-head span:nth-child(4), .ap-row-time, .ap-row-votes { display: none; }
}
@media (max-width: 720px) {
  .ap-modes { grid-template-columns: 1fr; }
  .ap-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-qbody, html[dir="rtl"] .ap-qbody { padding: 4px 12px 14px; }
  .ap-qmeta { display: none; }
  .ap-qtools { opacity: 1; }
  .ap-type-select { flex: 1 1 100%; }
  .ap-rows-head { display: none; }
  .ap-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ap-row-form { display: none; }
  .ap-drawer-card { padding: 16px; }
  .ap-bar { gap: 8px; }
  .ap-open-toggle > span:first-child { display: none; }
}

/* ==========================================================================
   Web form (public /apply page and the builder preview)
   ========================================================================== */
.af-body { min-height: 100dvh; background: var(--bg) !important; }
.af-shell { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; display: flex; flex-direction: column; gap: 14px; }
.af-preview { display: flex; flex-direction: column; gap: 14px; }
.af-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.af-loading { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.af-head { overflow: hidden; }
.af-stripe { height: 10px; background: var(--accent); }
.af-banner { aspect-ratio: 4 / 1; background: var(--surface-2); }
.af-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-head-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.af-guild { display: flex; align-items: center; gap: 10px; }
.af-guild img, .af-guild > span { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--accent); font-weight: 700; }
.af-guild b { display: block; font-size: 13.5px; }
.af-guild small { color: var(--muted); font-size: 12px; }
.af-head h1 { margin: 4px 0 0; font: 680 clamp(22px, 4vw, 30px)/1.25 var(--font); letter-spacing: -.02em; }
.af-lead { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.af-meta { margin: 0; color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.af-account { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.af-account img { width: 38px; height: 38px; border-radius: 50%; }
.af-account > div { flex: 1; min-width: 0; }
.af-account small { display: block; color: var(--muted); font-size: 11.5px; }
.af-account b { font-size: 14px; }
.af-link { background: none; border: 0; color: var(--accent); font: 500 12.5px var(--font); cursor: pointer; padding: 4px; }
.af-link:hover { text-decoration: underline; }
.af-form { padding: 8px 0 18px; }
.af-progress { display: flex; align-items: center; gap: 12px; padding: 14px 24px 6px; color: var(--muted); font-size: 12px; }
.af-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.af-progress-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .35s var(--ease); }
.af-note { margin: 10px 24px 0; color: var(--bad); font-size: 12px; }
.af-page { display: flex; flex-direction: column; }
.af-section { padding: 20px 24px 6px; }
.af-section h2 { margin: 0; font: 660 19px/1.3 var(--font); }
.af-section p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.af-q { padding: 18px 24px; border-bottom: 1px solid var(--line); transition: background-color .2s; }
.af-q:last-child { border-bottom: 0; }
.af-q[hidden] { display: none; }
.af-q.has-error { background: color-mix(in srgb, var(--bad) 6%, transparent); box-shadow: inset 3px 0 0 var(--bad); }
[dir="rtl"] .af-q.has-error { box-shadow: inset -3px 0 0 var(--bad); }
.af-label { display: flex; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.af-num { flex: none; color: var(--muted); font: 600 12px/22px var(--mono); }
.af-req { color: var(--bad); font-weight: 700; }
.af-desc { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.af-field { margin-top: 12px; }
.af-input { width: 100%; min-height: 42px; padding: 10px 13px; font-size: 14px !important; border-radius: 10px; }
.af-narrow { max-width: 280px; }
.af-textarea { resize: vertical; line-height: 1.6; min-height: 110px; }
.af-count { text-align: end; color: var(--muted); font: 11px var(--mono); margin-top: 4px; }
.af-options { display: flex; flex-direction: column; gap: 6px; }
.af-opt { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; transition: border-color .15s, background-color .15s; }
.af-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.af-opt input, .af-pill input, .af-scale-item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.af-mark { flex: none; width: 18px; height: 18px; border: 2px solid var(--muted); border-radius: 50%; display: grid; place-items: center; transition: border-color .15s; }
.af-check .af-mark { border-radius: 5px; }
.af-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.af-opt:has(input:checked) .af-mark { border-color: var(--accent); }
.af-opt:has(input:checked) .af-mark::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.af-check:has(input:checked) .af-mark { background: var(--accent); }
.af-check:has(input:checked) .af-mark::after { width: 9px; height: 5px; border-radius: 0; background: none; border: 2px solid var(--on-accent); border-top: 0; border-inline-end: 0; transform: rotate(-45deg) translate(1px, -1px); }
[dir="rtl"] .af-check:has(input:checked) .af-mark::after { border-inline-end: 2px solid var(--on-accent); border-inline-start: 0; transform: rotate(45deg) translate(-1px, -1px); }
.af-opt:has(input:focus-visible), .af-pill:has(input:focus-visible), .af-scale-item:has(input:focus-visible) { box-shadow: var(--ring); }
.af-clear { margin-top: 6px; background: none; border: 0; color: var(--muted); font: 500 12px var(--font); cursor: pointer; padding: 4px 0; }
.af-clear:hover { color: var(--text); }
.af-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.af-pill { position: relative; cursor: pointer; }
.af-pill span { display: inline-flex; min-width: 96px; justify-content: center; padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; transition: border-color .15s, background-color .15s; }
.af-pill:hover span { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.af-pill input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.af-scale { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.af-scale-label { color: var(--muted); font-size: 12.5px; }
.af-scale-row { display: flex; gap: 6px; flex-wrap: wrap; }
.af-scale-item { position: relative; cursor: pointer; }
.af-scale-item span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; font: 600 14px var(--mono); transition: border-color .15s, background-color .15s; }
.af-scale-item:hover span { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.af-scale-item input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.af-error { margin: 8px 0 0; color: var(--bad); font-size: 12.5px; font-weight: 500; }
.af-error:empty { display: none; }
.af-actions { display: flex; justify-content: space-between; gap: 10px; padding: 18px 24px 0; }
.af-actions .primary, .af-actions .secondary { min-height: 42px; padding: 0 20px; font-size: 14px; }
[dir="rtl"] .af-flip { transform: rotate(180deg); }
.af-flip-back { transform: rotate(180deg); } [dir="rtl"] .af-flip-back { transform: none; }
.af-draft { margin: 12px 24px 0; color: var(--muted); font-size: 11.5px; display: flex; align-items: center; gap: 5px; }
.af-login, .af-notice { padding: 36px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.af-login h2, .af-notice h2 { margin: 6px 0 0; font: 660 20px/1.3 var(--font); }
.af-login p, .af-notice p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 460px; }
.af-discord { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: #5865f2; color: #fff; }
.af-discord svg { width: 32px; height: 32px; }
.af-login-btn { margin-top: 10px; min-height: 46px !important; padding: 0 24px !important; font-size: 14.5px !important; text-decoration: none; background: #5865f2 !important; color: #fff !important; }
.af-login-btn:hover { background: #4752c4 !important; }
.af-error-text { color: var(--bad) !important; }
.af-notice-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.af-good .af-notice-icon { background: color-mix(in srgb, var(--good) 16%, var(--surface)); color: var(--good); }
.af-bad .af-notice-icon { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); color: var(--bad); }
.af-warn .af-notice-icon { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); }
.af-wait .af-notice-icon { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }
.af-ref { margin-top: 8px; padding: 10px 18px; border-radius: 10px; border: 1px dashed var(--line); }
.af-ref small { display: block; color: var(--muted); font-size: 11px; }
.af-ref b { font: 650 18px var(--mono); letter-spacing: .08em; }
.af-reason { margin: 6px 0 0; padding: 10px 14px; border-inline-start: 3px solid var(--bad); background: var(--surface-2); border-radius: 8px; text-align: start; font-size: 13.5px; white-space: pre-wrap; max-width: 460px; width: 100%; }
.af-reason small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.af-foot { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; padding-top: 6px; }
.af-foot img { width: 16px; height: 16px; }
.af-flash { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 50; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 13px; box-shadow: var(--shadow-pop); transition: opacity .2s, transform .2s var(--ease); }
.af-flash.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 560px) {
  .af-shell { padding: 16px 12px 36px; }
  .af-head-body, .af-q, .af-section { padding-inline: 16px; }
  .af-progress, .af-actions { padding-inline: 16px; }
  .af-note, .af-draft { margin-inline: 16px; }
  .af-narrow { max-width: none; }
  .af-scale-item span { width: 38px; height: 38px; }
}

/* ==========================================================================
   Embed Studio (st-*), Discord message preview (dpv / dp-*), staff reports (rp-*), mod reports (mr-*).
   Loaded after applications.css and reuses its ap-* building blocks.
   ========================================================================== */

/* ---- Discord preview ---------------------------------------------------- */
.dpv { display: flex; gap: 14px; padding: 16px 16px 18px; background: #313338; color: #dbdee1; border-radius: var(--r); font: 400 15px/1.375 'gg sans', 'Noto Sans', var(--font); text-align: start; min-width: 0; }
.dpv-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: #1e1f22; padding: 6px; object-fit: contain; }
.dpv-main { flex: 1; min-width: 0; }
.dpv-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dpv-head b { color: #f2f3f5; font-weight: 600; font-size: 15px; }
.dpv-head small { color: #949ba4; font-size: 12px; margin-inline-start: 2px; }
.dpv-app { font-size: 10px; background: #5865f2; color: #fff; padding: 1px 5px; border-radius: 4px; font-weight: 600; line-height: 1.4; }
.dp-empty { color: #949ba4; font-size: 14px; padding: 20px 0; }
.dp-text { overflow-wrap: anywhere; unicode-bidi: plaintext; }
.dp-content { margin-bottom: 4px; }
.dp-line { min-height: 1.375em; }
.dp-h1 { font-size: 24px; font-weight: 700; color: #f2f3f5; line-height: 1.3; margin: 8px 0 4px; }
.dp-h2 { font-size: 20px; font-weight: 700; color: #f2f3f5; line-height: 1.3; margin: 8px 0 4px; }
.dp-h3 { font-size: 16px; font-weight: 700; color: #f2f3f5; margin: 8px 0 4px; }
.dp-text > :first-child.dp-h1, .dp-text > :first-child.dp-h2, .dp-text > :first-child.dp-h3 { margin-top: 0; }
.dp-sub { font-size: 12px; color: #949ba4; }
.dp-quote { border-inline-start: 4px solid #4e5058; padding-inline-start: 12px; }
.dp-li { display: flex; gap: 8px; padding-inline-start: calc(var(--indent, 0) * 20px + 4px); }
.dp-li > span { color: #b5bac1; flex: none; }
.dp-code { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; padding: 0 3px; font: 13.5px var(--mono); }
.dp-pre { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; padding: 8px 10px; margin: 4px 0; font: 13.5px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.dp-link { color: #00a8fc; text-decoration: none; }
.dp-link:hover { text-decoration: underline; }
.dp-mention { background: color-mix(in srgb, var(--mc, #5865f2) 30%, transparent); color: color-mix(in srgb, var(--mc, #c9cdfb) 70%, #fff); border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dp-emoji { width: 1.375em; height: 1.375em; vertical-align: -.3em; object-fit: contain; }
.dp-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; }
.dp-spoiler:hover, .dp-spoiler:focus { color: inherit; background: #3f4147; }
.dp-ts { background: #3f4147; border-radius: 3px; padding: 0 2px; }
.dp-container { position: relative; margin-top: 6px; max-width: 520px; padding: 16px; background: #393a41; border: 1px solid #44464f; border-radius: 8px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.dp-container[style*="--accent-bar"]::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--accent-bar); }
.dp-container.spoiler > * { filter: blur(10px); }
.dp-section { display: flex; gap: 16px; align-items: flex-start; }
.dp-section-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dp-accessory { flex: none; }
.dp-thumb { width: 85px; height: 85px; border-radius: 8px; object-fit: cover; display: block; background: #2b2d31; }
.dp-thumb.broken { background: repeating-linear-gradient(45deg, #2b2d31, #2b2d31 6px, #313338 6px, #313338 12px); }
.dp-gallery { display: grid; gap: 4px; border-radius: 8px; overflow: hidden; }
.dp-gallery.n1 { grid-template-columns: 1fr; } .dp-gallery.n2, .dp-gallery.n4 { grid-template-columns: 1fr 1fr; } .dp-gallery.n3, .dp-gallery.n5 { grid-template-columns: repeat(3, 1fr); }
.dp-gallery-item { background: #2b2d31; min-height: 80px; aspect-ratio: 16 / 10; }
.dp-gallery.n1 .dp-gallery-item { aspect-ratio: auto; max-height: 300px; }
.dp-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-gallery-item.spoiler img { filter: blur(24px); }
.dp-gallery-item img.broken { visibility: hidden; }
.dp-file { display: flex; align-items: center; gap: 12px; padding: 12px; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 8px; max-width: 420px; }
.dp-file b { color: #00a8fc; font-weight: 500; font-size: 15px; display: block; overflow: hidden; text-overflow: ellipsis; }
.dp-file small { color: #949ba4; font-size: 12px; }
.dp-sep { border-top: 1px solid #4e5058; margin: 2px 0; }
.dp-sep.blank { border-top-color: transparent; }
.dp-sep.large { margin: 8px 0; }
.dp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; position: relative; }
.dp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 2px 16px; border-radius: 8px; background: #4e5058; color: #fff; font-size: 14px; font-weight: 500; cursor: default; user-select: none; }
.dp-btn .dp-emoji { width: 18px; height: 18px; }
.dp-btn.primary { background: #5865f2; } .dp-btn.success { background: #00863a; } .dp-btn.danger { background: #d22d39; } .dp-btn.link, .dp-btn.secondary { background: #4e5058; }
.dp-btn.disabled { opacity: .5; }
.dp-btn[data-preview-button] { cursor: pointer; }
.dp-btn[data-preview-button]:hover { filter: brightness(1.1); }
.dp-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; max-width: 400px; min-height: 40px; padding: 8px 12px; border-radius: 8px; background: #1e1f22; border: 1px solid #1e1f22; color: #949ba4; font-size: 15px; cursor: pointer; }
.dp-select.disabled { opacity: .5; }
.dp-options { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 2; width: 100%; max-width: 400px; max-height: 260px; overflow-y: auto; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 8px; box-shadow: 0 8px 24px #0008; padding: 4px; }
.dp-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; }
.dp-option:hover { background: #393c41; }
.dp-option b { display: block; color: #dbdee1; font-weight: 500; font-size: 14px; }
.dp-option small { color: #949ba4; font-size: 12px; }
.dp-embed2 { display: flex; gap: 16px; max-width: 520px; margin-top: 6px; padding: 8px 16px 16px 12px; background: #2b2d31; border-radius: 4px; border-inline-start: 4px solid var(--embed-color); }
.dp-embed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; font-size: 14px; }
.dp-embed-author { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #f2f3f5; }
.dp-embed-author img, .dp-embed-footer img { width: 24px; height: 24px; border-radius: 50%; }
.dp-embed-title { font-weight: 600; font-size: 16px; color: #f2f3f5; }
.dp-embed-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dp-embed-field { grid-column: 1 / -1; }
.dp-embed-field.inline { grid-column: auto; }
.dp-embed-field b { display: block; color: #f2f3f5; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.dp-embed-image { width: 100%; border-radius: 4px; margin-top: 8px; max-height: 300px; object-fit: cover; }
.dp-embed-thumb { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; flex: none; margin-top: 8px; }
.dp-embed-footer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #949ba4; margin-top: 4px; }
.dp-embed-footer img { width: 20px; height: 20px; }

/* ---- Studio library ---------------------------------------------------- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.st-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .15s; }
.st-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.st-card-preview { display: block; height: 210px; overflow: hidden; background: #313338; border: 0; padding: 0; cursor: pointer; position: relative; text-align: start; }
.st-card-preview::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 50px; background: linear-gradient(transparent, #313338); }
.st-mini { transform: scale(.72); transform-origin: top left; width: 139%; pointer-events: none; }
[dir="rtl"] .st-mini { transform-origin: top right; }
.st-card-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.st-card-body > div:first-child { min-width: 0; display: flex; flex-direction: column; }
.st-card-body b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-card-body small { color: var(--muted); font-size: 11.5px; }
.st-card-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.st-card-actions .secondary { min-height: 32px; }

/* ---- Studio editor ----------------------------------------------------- */
.st-editor { display: flex; flex-direction: column; gap: 12px; }
.st-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
.st-name { font: 640 16px var(--font) !important; min-height: 36px; padding: 0 10px; flex: 0 1 280px; min-width: 140px; background: transparent !important; border-color: transparent !important; }
.st-name:hover, .st-name:focus { border-color: var(--line) !important; background: var(--surface) !important; }
.st-spacer { flex: 1; }
.st-undo { transform: scaleX(-1); }
.st-mode button { font-size: 12px; }
.st-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(320px, 440px); gap: 14px; align-items: start; }
.st-palette { position: sticky; top: 64px; display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); max-height: calc(100dvh - 90px); overflow-y: auto; }
.st-palette-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 8px; }
.st-palette-head b { font-size: 13px; }
.st-palette-head span { font: 11px var(--mono); color: var(--muted); }
.st-palette-head .over { color: var(--bad); font-weight: 700; }
.st-pal { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); text-align: start; cursor: pointer; font: inherit; }
.st-pal:hover { background: var(--surface-2); border-color: var(--line); }
.st-pal > svg { color: var(--accent); margin-top: 1px; flex: none; }
.st-pal b { display: block; font-size: 12.5px; }
.st-pal small { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; margin-top: 1px; }
.st-vars { margin-top: 10px; padding: 10px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; }
.st-vars b { width: 100%; font-size: 11px; color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.st-vars code, .st-var-hint code, .st-form-foot code { font: 11px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); color: var(--accent); }
.st-vars small { width: 100%; color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.6; }
.st-tree { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-drop-hint { padding: 16px; border: 1.5px dashed var(--line); border-radius: var(--r); color: var(--muted); font-size: 12.5px; text-align: center; }
.st-drop-hint.big { padding: 60px 20px; font-size: 14px; }
.st-node { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s; }
.st-node.open { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.st-node.t-container, .st-node.t-embed { border-inline-start: 3px solid var(--node-accent, var(--line)); }
.st-node-head { display: flex; align-items: center; gap: 9px; padding: 8px 8px 8px 12px; cursor: pointer; min-height: 44px; }
.st-node-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); color: var(--accent); flex: none; }
.st-node-head > b { font-size: 12.5px; flex: none; }
.st-node-sum { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-node-tools { display: flex; gap: 1px; opacity: 0; transition: opacity .15s; }
.st-node:hover > .st-node-head .st-node-tools, .st-node.open > .st-node-head .st-node-tools, .st-node-tools:focus-within { opacity: 1; }
.st-node-tools .ap-icon-btn { width: 28px; height: 28px; }
.st-node-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px; }
.st-children { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px 18px; }
[dir="rtl"] .st-children { padding: 0 18px 10px 10px; }
.st-children .st-node { background: var(--surface-2); }
.st-md { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.st-md:focus-within { border-color: var(--accent); }
.st-md textarea { border: 0 !important; border-radius: 0; padding: 10px 12px 22px; resize: vertical; font-size: 13.5px !important; line-height: 1.55; min-height: 70px; }
.st-md-tools { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); background: var(--surface); }
.st-md-tools button { min-width: 28px; height: 26px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 600 12px var(--font); cursor: pointer; }
.st-md-tools button:hover { background: var(--surface-2); color: var(--text); }
.st-md-tools button[data-wrap="*"] { font-style: italic; } .st-md-tools button[data-wrap="__"] { text-decoration: underline; } .st-md-tools button[data-wrap="~~"] { text-decoration: line-through; }
.st-count { position: absolute; bottom: 4px; inset-inline-end: 10px; font: 10.5px var(--mono); color: var(--muted); pointer-events: none; }
.st-sub { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.st-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-sub-head b { font-size: 12px; }
.st-sub-head small { color: var(--muted); font: 11px var(--mono); }
.st-sub .ap-seg button { padding: 4px 10px; font-size: 11.5px; }
.st-color { display: flex; align-items: center; gap: 10px; }
.st-color input[type="color"] { width: 54px; height: 34px; padding: 2px; cursor: pointer; }
.st-color input:disabled { opacity: .35; }
.st-list-item { display: flex; align-items: center; gap: 6px; }
.st-list-item > .st-button-row { flex: 1; }
.st-list-tools { display: flex; }
.st-button-row, .st-option-row, .st-media-row, .st-field-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-button-row input, .st-option-row input, .st-media-row input, .st-field-row input, .st-field-row textarea, .st-style-select { min-height: 34px; padding: 6px 10px; flex: 1 1 120px; min-width: 0; }
.st-field-row textarea { resize: vertical; }
.st-style-select { flex: 0 0 116px !important; }
.st-emoji { flex: 0 0 110px !important; }
.st-url { flex: 2 1 200px !important; }
.st-swatch { width: 10px; height: 34px; border-radius: 4px; flex: none; background: #4e5058; }
.st-swatch.s-primary { background: #5865f2; } .st-swatch.s-success { background: #00863a; } .st-swatch.s-danger { background: #d22d39; }
.st-steps-btn { min-height: 34px !important; padding: 0 12px !important; font-size: 12px !important; }
.st-mini-check { padding: 4px 8px; font-size: 11.5px; }
.st-thumb { width: 34px; height: 34px; border-radius: 6px; background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--line); flex: none; }
.st-add-row { display: flex; gap: 12px; }
.st-preview { position: sticky; top: 64px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-height: calc(100dvh - 90px); }
.st-preview-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.st-preview-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 12px var(--font); cursor: pointer; }
.st-preview-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--text); }
.st-preview-body { overflow-y: auto; padding: 10px; background: #313338; min-height: 200px; }
.st-preview-body .dpv { padding: 6px; }
.st-json { position: relative; }
.st-json pre { margin: 0; font: 11.5px/1.5 var(--mono); color: #dbdee1; white-space: pre-wrap; overflow-wrap: anywhere; }
.st-copy { position: sticky; top: 0; float: right; min-height: 28px !important; padding: 0 10px !important; font-size: 11.5px !important; }
.st-json-input { font: 12px/1.5 var(--mono) !important; }

/* Steps dialog */
.st-steps-dialog { width: min(980px, 100%) !important; }
.st-steps { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .85fr); gap: 16px; }
.st-steps-main, .st-catalog { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.st-steps-head { display: flex; align-items: baseline; gap: 8px; }
.st-steps-head b { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-steps-head small { color: var(--muted); font-size: 11.5px; }
.st-step-list { display: flex; flex-direction: column; gap: 4px; }
.st-step { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); text-align: start; cursor: pointer; font: inherit; }
.st-step.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.st-step i { font: 600 11px var(--mono); color: var(--muted); font-style: normal; }
.st-step > svg { color: var(--accent); flex: none; }
.st-step > span { flex: 1; min-width: 0; }
.st-step b { display: block; font-size: 12.5px; }
.st-step small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-step em { display: flex; gap: 4px; font-style: normal; color: var(--muted); }
.st-step em > span, .st-step em[data-submit-del] { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; }
.st-step em > span:hover, .st-step em[data-submit-del]:hover { background: var(--surface); color: var(--bad); }
.st-empty-steps { padding: 20px; text-align: center; border: 1.5px dashed var(--line); border-radius: 8px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.st-empty-steps b { color: var(--text); }
.st-step-settings { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.st-catalog > button, .st-catalog.mini > button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); text-align: start; cursor: pointer; font: inherit; }
.st-catalog > button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line); }
.st-catalog > button:disabled { opacity: .4; cursor: not-allowed; }
.st-catalog > button > svg:first-child { color: var(--accent); flex: none; }
.st-catalog > button > span { flex: 1; }
.st-catalog > button b { display: block; font-size: 12.5px; }
.st-catalog > button small { display: block; color: var(--muted); font-size: 11px; }
.st-catalog.mini { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.st-catalog.mini > button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; gap: 5px; }
.st-catalog.mini > button:hover { border-color: var(--accent); color: var(--accent); }
.st-note { font-size: 11.5px; line-height: 1.5; }
.st-var-hint { color: var(--muted); font-size: 11px; line-height: 1.8; }
.st-form-field { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.st-form-foot { display: flex; align-items: center; gap: 10px; }
.st-form-foot .ap-link-btn { margin-inline-start: auto; }
.st-channel-search { max-width: none !important; }
.st-channel-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.st-channel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); font: 500 13px var(--font); cursor: pointer; text-align: start; }
.st-channel span { color: var(--muted); }
.st-channel:hover { background: var(--surface-2); }
.st-channel[hidden] { display: none; }

@media (max-width: 1280px) { .st-layout { grid-template-columns: 190px minmax(0, 1fr) minmax(280px, 380px); } }
@media (max-width: 1080px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); }
  .st-palette { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; }
  .st-palette-head { width: 100%; }
  .st-pal { flex: 1 1 150px; }
  .st-pal small, .st-vars { display: none; }
  .st-preview { position: static; max-height: none; }
  .st-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .st-bar .secondary span, .st-mode { display: none; } .st-node-tools { opacity: 1; } }

/* ---- Staff reports ------------------------------------------------------- */
.rp-weekly .panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.rp-weekly h3 { display: flex; align-items: center; gap: 8px; }
.rp-settings { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-actions select { min-height: 36px; padding: 0 34px 0 12px; }
.rp-form .rp-note { grid-column: 1 / -1; }
.rp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.rp-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.rp-card header { display: flex; align-items: center; gap: 10px; }
.rp-card header img, .rp-av { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); flex: none; }
.rp-card header > div { flex: 1; min-width: 0; }
.rp-card header b { display: block; font-size: 13.5px; }
.rp-card header small { color: var(--muted); font-size: 11.5px; }
.rp-grade { display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 4px 8px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--g) 45%, var(--line)); background: color-mix(in srgb, var(--g) 12%, var(--surface)); }
.rp-grade b { font: 700 18px/1.1 var(--mono); color: var(--g); }
.rp-grade small { font: 10px var(--mono); color: var(--muted); }
.rp-bar { height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.rp-bar i { display: block; height: 100%; border-radius: inherit; }
.rp-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rp-metrics span { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: var(--surface); }
.rp-metrics b { font: 600 13px var(--mono); }
.rp-metrics small { color: var(--muted); font-size: 10.5px; }
.rp-text { margin: 0; padding: 8px 10px; border-inline-start: 3px solid var(--accent); background: var(--surface); border-radius: 6px; font-size: 12.5px; white-space: pre-wrap; }
.rp-card footer { display: flex; justify-content: space-between; align-items: center; }
.rp-card footer .secondary { min-height: 30px; font-size: 12px; }

/* ---- Mod reports ---------------------------------------------------------- */
.mr-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.3fr) 90px 100px !important; }
.mr-cell { display: flex; flex-direction: column; min-width: 0; }
.mr-cell b { font-size: 12.5px; }
.mr-cell small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-actions > div, .mr-top > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-stat.mr-actions .ap-chip b { color: var(--text); margin-inline-start: 2px; font: 600 11px var(--mono); letter-spacing: 0; }
.ap-stat.mr-top .mr-top-item b { font: 600 12px var(--font); letter-spacing: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.ap-stat.mr-top > div { flex-direction: column; gap: 4px; width: 100%; }
.mr-top-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); }
.mr-top-item .ap-avatar { width: 22px; height: 22px; }
.mr-top-item small { color: var(--muted); }
.ap-stats:has(.mr-top) { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr) minmax(0, 1.4fr); }
.mr-reopen { margin-inline-start: auto; min-height: 32px !important; }
.mr-save { display: flex; justify-content: flex-end; position: sticky; bottom: 12px; }
@media (max-width: 1100px) { .ap-stats:has(.mr-top) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mr-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 100px !important; } .mr-grid > :nth-child(3), .mr-grid > :nth-child(4) { display: none; } }
.mr-settings-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 16px; align-items: start; }
.mr-settings-wrap .ap-settings { max-width: none; margin: 0; }
.mr-preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.mr-preview-body { max-height: calc(100dvh - 90px); overflow-y: auto; border-radius: var(--r); background: #313338; color: #949ba4; font-size: 13px; }
@media (max-width: 1100px) { .mr-settings-wrap { grid-template-columns: 1fr; } .mr-preview { position: static; } }

/* ---- Support page admin (spa-*) ------------------------------------------ */
.spa-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.spa-reviews { position: sticky; top: 16px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
.spa-reviews .ap-group-body { overflow-y: auto; }
.spa-list { display: flex; flex-direction: column; gap: 8px; }
.spa-review { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.spa-review.is-hidden { opacity: .55; }
.spa-review header { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 12.5px; }
.spa-review header span { color: var(--muted); }
.spa-stars { margin-inline-start: auto; font-style: normal; color: #f5b748; letter-spacing: 1px; }
.spa-review p { margin: 6px 0 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.spa-review footer { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.spa-review footer small { color: var(--muted); font-size: 11px; margin-inline-end: auto; }
@media (max-width: 1100px) { .spa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .spa-reviews { position: static; max-height: none; } }
.stp-kinds { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.stp-kinds .ap-mode > span { align-items: center; text-align: center; padding: 10px; }
.stp-actions { display: flex; justify-content: flex-end; gap: 8px; }
.stp-list { max-height: 70vh; overflow-y: auto; }
.stp-post.k-incident { border-inline-start: 3px solid var(--bad); } .stp-post.k-resolved { border-inline-start: 3px solid var(--good); } .stp-post.k-announcement { border-inline-start: 3px solid #b48cff; } .stp-post.k-maintenance { border-inline-start: 3px solid var(--accent); }
@media (max-width: 720px) { .stp-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---- Notifications (nt-*) ------------------------------------------------- */
.nt-form { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.nt-target { align-self: flex-start; }
.nt-levels { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.nt-levels .ap-mode > span { flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; }
.nt-preview { display: flex; flex-direction: column; gap: 6px; }
.nt-preview > span { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nt-card h4 { margin: 8px 0 0; font: 650 14px var(--font); }
.nt-card.lv-warning { border-inline-start: 3px solid var(--warn); }
.nt-card.lv-important { border-inline-start: 3px solid var(--bad); }
.ap-field[hidden] { display: none !important; }

/* ---- Bot presence (bp-*) --------------------------------------------------- */
.bp-page .eyebrow { font: 600 10.5px var(--mono); letter-spacing: .08em; color: var(--muted); }
.bp-note { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); color: var(--text); font-size: 13px; }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.bp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bp-card .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bp-card > :not(.panel-head) { margin-inline: 18px; }
.bp-card > :last-child { margin-bottom: 18px; }
.bp-states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bp-state { display: flex; align-items: flex-start; gap: 10px; padding: 12px; text-align: start; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.bp-state:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.bp-state.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.bp-state .presence-dot { flex: none; margin-top: 4px; }
.bp-state b { display: block; font-size: 13px; }
.bp-state small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.bp-lines { display: flex; flex-direction: column; gap: 8px; }
.bp-line { display: grid; grid-template-columns: 26px 128px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.bp-grip { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--bg); color: var(--muted); font: 600 11px var(--mono); }
.bp-line select, .bp-line input { width: 100%; min-width: 0; }
.bp-input { position: relative; min-width: 0; }
.bp-input input { padding-inline-end: 58px; }
.bp-input small { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font: 500 10.5px var(--mono); pointer-events: none; }
.bp-line-tools { display: flex; flex-direction: row; gap: 4px; }
.bp-line-tools .icon-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.bp-line-tools .icon-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.bp-line-tools .icon-btn.danger:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }
.bp-line-tools .icon-btn:disabled { opacity: .35; cursor: default; }
.bp-vars, .bp-presets { display: flex; flex-flow: row wrap; align-items: center; gap: 6px; margin-top: 14px; }
.bp-vars > span, .bp-presets > span { margin-inline-end: 4px; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font: 500 12px var(--mono); cursor: pointer; }
.bp-chip em { font-style: normal; color: var(--muted); font-family: var(--font); }
.bp-chip:hover { border-color: var(--accent); }
.bp-chip.ghost { font-family: var(--font); background: transparent; border-style: dashed; }
.bp-rotation { display: flex; flex-direction: column; gap: 14px; }
.bp-range { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.bp-range input[type=range] { flex: 1; accent-color: var(--accent); }
.bp-range input[type=number] { width: 84px; }
.bp-range em { font-style: normal; color: var(--muted); font-size: 12px; }
.bp-dev { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; }
.bp-dev > * { margin: 0 !important; }
.bp-dev h3 { margin: 0 0 4px; font-size: 14px; }
.bp-dev p { margin: 0; color: var(--muted); font-size: 12.5px; }
.bp-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.bp-profile { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #232428; color: #f2f3f5; box-shadow: var(--shadow-pop); }
.bp-banner { height: 72px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, #000), color-mix(in srgb, var(--accent) 35%, #111)); }
.bp-avatar { position: relative; width: 84px; height: 84px; margin: -42px 0 0 16px; border: 6px solid #232428; border-radius: 50%; background: #313338; }
.bp-avatar img, .bp-avatar > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bp-avatar > span { display: grid; place-items: center; font: 700 28px var(--font); }
.bp-avatar .presence-dot { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border: 5px solid #232428; box-shadow: none; }
.presence-streaming { background: #9b59f6; }
.bp-profile-body { padding: 10px 16px 18px; }
.bp-profile-body > b { font: 700 19px var(--font); }
.bp-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; font: 700 10px var(--font); vertical-align: 3px; }
.bp-activity { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #111214; min-height: 44px; }
.bp-activity small { display: block; color: #b5bac1; font-size: 11.5px; font-weight: 600; }
.bp-activity p { margin: 2px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.bp-activity p.is-stream { color: #b98cff; }
.bp-activity .bp-custom { margin: 0; font-weight: 500; }
.bp-side-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bp-side-meta > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.bp-side-meta span { display: block; color: var(--muted); font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.bp-side-meta b { font: 600 14px var(--mono); }
.bp-hint { display: flex; gap: 6px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.bp-hint svg { flex: none; margin-top: 2px; }
.bp-save { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.bp-save span { color: var(--muted); font-size: 12px; }
.bp-save.is-dirty { border-color: var(--warn); }
.bp-save.is-dirty span { color: var(--warn); }
.bp-save .primary { width: 100%; justify-content: center; }
@media (max-width: 1100px) { .bp-grid { grid-template-columns: 1fr; } .bp-side { position: static; order: -1; } .bp-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bp-line { grid-template-columns: 26px minmax(0, 1fr); } .bp-line .bp-input, .bp-line .bp-line-tools { grid-column: 1 / -1; } .bp-states { grid-template-columns: 1fr; } .bp-dev { flex-direction: column; align-items: flex-start; } }
.nt-target button, .bp-page .ap-seg button { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.nt-card .notification-sender small { white-space: nowrap; }

/* ---- Points (pt-*) ---------------------------------------------------------- */
.pt-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pt-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pt-card .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pt-card > :not(.panel-head) { margin-inline: 18px; }
.pt-card > :last-child { margin-bottom: 18px; }
.pt-card h4 { margin: 16px 0 8px; color: var(--muted); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pt-empty { color: var(--muted); font-size: 13.5px; list-style: none; padding: 8px 0; }
.pt-total { display: flex; align-items: baseline; gap: 10px; }
.pt-total b { font: 700 48px/1 var(--font); letter-spacing: -.02em; color: var(--accent); }
.pt-total span { color: var(--muted); font-size: 13px; }
.pt-parts, .pt-rules, .pt-board, .pt-recent { margin: 0; padding: 0; list-style: none; }
.pt-parts li { display: grid; grid-template-columns: 30px minmax(0, 1.3fr) minmax(40px, 1fr) 52px; align-items: center; gap: 10px; padding: 8px 0; }
.pt-parts li + li { border-top: 1px solid var(--line); }
.pt-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--accent); }
.pt-parts li.neg .pt-ic { color: var(--bad); }
.pt-label b { display: block; font-size: 13.5px; font-weight: 600; }
.pt-label small { display: block; color: var(--muted); font-size: 12px; }
.pt-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pt-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pt-parts li.neg .pt-bar i { background: var(--bad); }
.pt-parts em, .pt-rules em, .pt-recent em { font: 700 14px var(--mono); font-style: normal; color: var(--good); text-align: end; }
.pt-parts li.neg em, .pt-rules em.neg, .pt-recent em.neg { color: var(--bad); }
.pt-rules em.mid { color: var(--warn); }
.pt-rules li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; font-size: 13.5px; line-height: 1.5; }
.pt-rules li + li { border-top: 1px solid var(--line); }
.pt-rules em { text-align: center; padding: 4px 0; border-radius: 8px; background: color-mix(in srgb, currentColor 10%, transparent); font-size: 13px; }
.pt-count { color: var(--muted); font: 600 12px var(--mono); }
.pt-board li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.pt-board li[data-member] { cursor: pointer; }
.pt-board li[data-member]:hover, .pt-board li[data-member]:focus-visible { background: var(--surface-2); outline: none; }
.pt-board li.is-me { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pt-board .avatar, .pt-board img { width: 30px; height: 30px; flex: none; }
.pt-place { width: 28px; flex: none; text-align: center; color: var(--muted); font: 600 13px var(--mono); }
.pt-place.p1, .pt-place.p2, .pt-place.p3 { font-size: 18px; }
.pt-name { flex: 1; min-width: 0; }
.pt-name b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-name small { color: var(--muted); font-size: 11.5px; }
.pt-board strong { font: 700 15px var(--mono); }
.pt-form { display: flex; flex-direction: column; gap: 12px; }
.pt-row { display: flex; align-items: flex-end; gap: 12px; }
.pt-row .ap-seg button { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.pt-amount { flex: 1; }
.pt-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.pt-sub { margin-top: 20px !important; }
.pt-recent li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; }
.pt-recent li + li { border-top: 1px solid var(--line); }
.pt-recent em { text-align: start; }
.pt-recent b { display: block; font-size: 13px; }
.pt-recent small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.pt-recent time { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 1000px) { .pt-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pt-parts li { grid-template-columns: 30px minmax(0, 1fr) 48px; } .pt-bar { display: none; } .pt-recent li { grid-template-columns: 48px minmax(0, 1fr); } .pt-recent time { grid-column: 2; } }
.pt-recent li.pt-empty, .pt-parts li.pt-empty { display: block; }
.pt-rules li { grid-template-columns: 86px minmax(0, 1fr); }
.pt-rules em { white-space: nowrap; }
.pt-place.p1 { color: #f5c542; } .pt-place.p2 { color: #c9ced6; } .pt-place.p3 { color: #d08a4f; }
.pt-place svg { vertical-align: middle; }
.mr-act { display: inline-flex; align-items: center; gap: 6px; vertical-align: -2px; }
.mr-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mr-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.mr-ok { color: var(--good); } .mr-warn { color: var(--warn); }
.ap-row-votes > span, .ap-vote { display: inline-flex; align-items: center; gap: 4px; }
.dp-btn .dp-emoji, .dp-fields .dp-emoji { width: 18px; height: 18px; vertical-align: -4px; }

/* ---- Slash command list (commands page) ------------------------------------ */
.cmd-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; padding: 4px 18px 18px; }
.cmd-group h4 { margin: 0 0 8px; color: var(--muted); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cmd-group ul { margin: 0; padding: 0; list-style: none; }
.cmd-group li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.cmd-group li:first-child { border-top: 0; }
.cmd-group code { align-self: flex-start; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--accent); font: 600 12.5px var(--mono); }
.cmd-group span { color: var(--muted); font-size: 12.5px; }