/* Ash Panel V2 — refonte structurelle et visuelle */
body{background:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),radial-gradient(900px 520px at 88% -8%,rgba(142,69,255,.16),transparent 58%),#07070a;background-size:36px 36px,36px 36px,auto,auto}
.app{grid-template-columns:276px minmax(0,1fr)}
.app>aside{width:276px;padding:18px 16px;background:rgba(8,8,12,.94);border-right:1px solid #24212d;backdrop-filter:blur(24px)}
.app>aside::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#9a57ff,transparent);opacity:.8}
.brand{min-height:66px;margin:0 0 18px;padding:7px 9px 18px;border-bottom:1px solid #201e28}
.brand-mark{position:relative;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#c494ff,#8d46f3 48%,#4d1d9b);border:1px solid rgba(221,192,255,.38);box-shadow:0 0 0 5px rgba(144,76,244,.08),0 0 32px rgba(139,66,240,.38)}
.brand-mark::after{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.24);border-radius:50%}
.brand b{font-size:14px;letter-spacing:.01em}.brand small{font-size:9px;letter-spacing:.09em;text-transform:uppercase}
nav{gap:5px}
nav button{position:relative;height:46px;min-height:46px;padding:0 12px;border-radius:11px;color:#928c9e;font-size:12px;letter-spacing:.01em}
nav button::before{display:grid;place-items:center;width:25px;height:25px;margin-right:9px;border:1px solid #2c2935;border-radius:7px;background:#14131a;color:#8d8597;font-size:12px;font-weight:800}
nav button[data-page="overview"]::before{content:"D"}nav button[data-page="stats"]::before{content:"S"}nav button[data-page="activity"]::before{content:"!"}nav button[data-page="recordings"]::before{content:"R"}nav button[data-page="players"]::before{content:"P"}nav button[data-page="chat"]::before{content:"C"}nav button[data-page="logs"]::before{content:"L"}nav button[data-page="security"]::before{content:"G"}nav button[data-page="servers"]::before{content:"V"}nav button[data-page="bans"]::before{content:"B"}nav button[data-page="users"]::before{content:"+"}
nav button:hover{background:#15131b;border-color:#2d2938;color:#e2dde8}
nav button.active{background:linear-gradient(100deg,rgba(139,70,244,.3),rgba(91,42,162,.12));border-color:#563681;box-shadow:inset 3px 0 #aa6bff,0 8px 24px rgba(0,0,0,.16)}
nav button.active::before{background:#8d48e9;border-color:#b980ff;color:#fff;box-shadow:0 0 18px rgba(151,78,247,.32)}
.account{margin:14px 3px 0;padding:16px 10px 5px;border-top:1px solid #211f29}.account span{font-weight:750}.account small{font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.app main{grid-column:2;max-width:1780px;padding:28px 38px 60px}
.app header{position:sticky;top:0;z-index:10;min-height:74px;margin:-28px -38px 24px;padding:18px 38px 14px;background:rgba(7,7,10,.82);border-bottom:1px solid rgba(43,39,53,.85);backdrop-filter:blur(18px)}
.app header h2{font-size:25px;font-weight:780}.app header .eyebrow{margin-bottom:5px}.header-actions select{height:38px;min-height:38px;background:#0c0c11;border-color:#2b2735}
.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.metric{position:relative;min-height:118px;padding:18px 18px 16px 68px;overflow:hidden;background:linear-gradient(135deg,#14131b,#0d0d12);border-color:#24222d}
.metric::before{content:"";position:absolute;left:18px;top:18px;width:34px;height:34px;border:1px solid #4c3470;border-radius:10px;background:linear-gradient(145deg,rgba(151,79,250,.26),rgba(91,39,171,.1));box-shadow:0 8px 20px rgba(0,0,0,.24)}
.metric::after{content:"";position:absolute;inset:auto -20px -45px auto;width:110px;height:110px;border-radius:50%;background:rgba(142,66,244,.055);filter:blur(2px)}
.metric small{display:block;max-width:140px;line-height:1.35}.metric b{font-size:29px;margin-top:14px}
.panel{position:relative;padding:20px;border-color:#25222f;border-radius:15px;background:linear-gradient(150deg,rgba(18,18,25,.97),rgba(11,11,16,.97));box-shadow:0 18px 55px rgba(0,0,0,.16)}
.panel::before{content:"";position:absolute;inset:0 18px auto;height:1px;background:linear-gradient(90deg,transparent,rgba(171,111,255,.23),transparent)}
.panel-head{min-height:42px}.panel h3{font-size:15px}.panel p{color:#817b8c}
button,input:not([type="checkbox"]):not([type="range"]),select{height:38px;min-height:38px;border-radius:9px}
button{padding:0 13px;background:#8d48e8;border-color:#a96eff;box-shadow:0 7px 20px rgba(114,50,206,.18);font-size:11px}button:hover{background:#9c58f2}button.ghost{background:#17161d;border-color:#2d2936}button.danger{background:#35161f;border-color:#642737;color:#ffb4c1}.table button{height:32px;min-height:32px;padding:0 10px}
.table{border-collapse:separate;border-spacing:0}.table th{background:#0c0c11;border-top:1px solid #201e28;border-bottom-color:#27232f}.table th:first-child{border-radius:9px 0 0 0}.table th:last-child{border-radius:0 9px 0 0}.table td{height:56px;background:rgba(12,12,17,.34)}.table tbody tr:hover td{background:rgba(139,70,244,.065)}
.server-card{border-radius:15px;background:linear-gradient(145deg,#15141c,#0c0c11);border-color:#282431}.server-card>.server-head{padding-bottom:12px;border-bottom:1px solid #211f29}.server-stats div{border-radius:10px}.real-recording{border-radius:14px;border-color:#4a3268}.drawer{background:linear-gradient(150deg,#13121a,#09090d)}.toast{border-color:#5c3b83;background:#241831}
.login-card{width:min(440px,100%);padding:40px;background:linear-gradient(150deg,rgba(18,17,25,.98),rgba(9,9,13,.98));border-color:#342b43}.login-card::before{content:"ASH CONTROL CENTER";display:block;margin-bottom:26px;color:#a56cf4;font-size:9px;font-weight:800;letter-spacing:.22em}.login-card .brand-mark{border-radius:50%}
@media(max-width:1200px){.app{grid-template-columns:238px minmax(0,1fr)}.app>aside{width:238px}.app main{padding-left:24px;padding-right:24px}.app header{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}}
@media(max-width:900px){.app>aside{width:100%}.app main{padding:16px 12px 82px}.app header{position:static;margin:-16px -12px 20px;padding:17px 14px 14px}.app>aside nav button::before{display:none}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{padding:15px;min-height:96px}.metric::before{display:none}.metric b{font-size:24px}}
@media(max-width:520px){.login-card{padding:28px 22px}.panel{padding:15px}.metrics{gap:8px}}
