/* PalPanel Command Center UI — additive visual layer, no backend logic changes */
:root{
  --cc-bg:#030711;
  --cc-surface:rgba(8,17,35,.82);
  --cc-surface-2:rgba(10,24,48,.72);
  --cc-line:rgba(110,176,255,.16);
  --cc-cyan:#56e7ff;
  --cc-violet:#8e6cff;
  --cc-lime:#73ffa6;
  --cc-amber:#ffc56b;
  --cc-danger:#ff6680;
  --cc-shadow:0 28px 90px rgba(0,0,0,.48);
}
body:not([data-page="login"]){background:
  radial-gradient(circle at 78% -10%,rgba(31,169,255,.17),transparent 31%),
  radial-gradient(circle at 12% 18%,rgba(142,108,255,.12),transparent 30%),
  linear-gradient(180deg,#050a14 0%,#030711 52%,#02050b 100%)}
body:not([data-page="login"])::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(115deg,transparent 0 48%,rgba(86,231,255,.025) 49%,transparent 50% 100%);background-size:52px 52px;opacity:.8}
.sidebar{width:288px;padding:18px 14px;background:linear-gradient(180deg,rgba(4,10,22,.985),rgba(3,7,15,.97));border-right:1px solid rgba(111,176,255,.13);box-shadow:18px 0 70px rgba(0,0,0,.25)}
.shell{margin-left:288px;padding:18px 24px 28px;max-width:2000px}
.brand{padding:7px 8px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand-icon{border-radius:15px;background:linear-gradient(145deg,#19d7ff,#7458ff 58%,#ff52c8);box-shadow:0 10px 36px rgba(61,183,255,.28)}
.brand b{font-size:25px;letter-spacing:.09em}.brand small{font-size:10px}
.server-chip{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(17,37,66,.76),rgba(7,18,35,.82));border-color:rgba(115,255,166,.15)}
.server-chip::after{content:"";position:absolute;inset:auto -30% -80% 30%;height:140px;background:radial-gradient(circle,rgba(74,255,168,.12),transparent 66%)}
nav{gap:5px}nav::before{content:"NAVIGATION";font-size:10px;font-weight:900;letter-spacing:.2em;color:#59708f;padding:7px 14px 4px}
nav a{min-height:48px;border-radius:12px;color:#aebed5;font-size:13px;letter-spacing:.01em}
nav a span{font-size:18px;opacity:.92}nav a.active{color:#fff;background:linear-gradient(90deg,rgba(69,219,255,.16),rgba(139,92,255,.10));border-color:rgba(92,224,255,.28);box-shadow:inset 3px 0 0 var(--cc-cyan),0 12px 28px rgba(0,0,0,.18)}
nav a:hover{color:#fff;background:rgba(255,255,255,.045)}
.side-health,.side-footer{background:rgba(8,18,35,.7);border-color:rgba(105,168,255,.13)}
.topbar{height:72px;border-radius:20px;background:linear-gradient(180deg,rgba(11,24,47,.80),rgba(7,16,32,.78));border-color:rgba(111,176,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.24)}
.welcome b{font-size:14px}.welcome small{font-size:11px}.welcome .mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(86,231,255,.08);border:1px solid rgba(86,231,255,.14)}
.pill,.clock,.top-icon,.user-pill{background:rgba(3,9,20,.58);border-color:rgba(110,176,255,.13);border-radius:12px}
.page-title{position:relative;margin:24px 0 20px;padding-left:2px}.page-title::after{content:"PALPANEL // SECURE OPERATIONS";position:absolute;right:3px;bottom:4px;font-size:9px;font-weight:900;letter-spacing:.21em;color:#49627f}.page-title h1{font-size:clamp(31px,3vw,48px);letter-spacing:-.045em;text-shadow:none;background:linear-gradient(100deg,#fff 5%,#b7d8ff 55%,#62eaff);-webkit-background-clip:text;background-clip:text;color:transparent}.eyebrow{font-size:10px;color:#6fdfff}
.glass,.panel,.card{background:linear-gradient(155deg,rgba(12,26,50,.76),rgba(5,12,25,.86));border-color:rgba(105,168,255,.14);box-shadow:var(--cc-shadow);backdrop-filter:blur(24px)}
.panel{overflow:hidden}.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(111,232,255,.46),transparent);opacity:.65}
.server-hero{grid-template-columns:minmax(0,1.42fr) minmax(330px,.58fr);gap:18px}
.world-card{min-height:292px;border-radius:26px;border-color:rgba(100,188,255,.23);box-shadow:0 30px 95px rgba(0,0,0,.46);background-position:center 42%}
.world-card::after{content:"LIVE WORLD";position:absolute;z-index:3;right:22px;top:20px;padding:7px 10px;border-radius:999px;background:rgba(4,12,24,.66);border:1px solid rgba(112,255,166,.22);color:#8dffb3;font-size:9px;font-weight:900;letter-spacing:.16em;backdrop-filter:blur(12px)}
.world-card:before{background:linear-gradient(90deg,rgba(2,7,17,.84),rgba(2,7,17,.30) 57%,rgba(2,7,17,.70)),linear-gradient(0deg,rgba(2,7,17,.92),transparent 55%)}
.pal-badge{width:92px;height:92px;left:28px;top:31px;font-size:49px;border:2px solid rgba(89,232,255,.45);background:linear-gradient(145deg,rgba(21,54,73,.95),rgba(15,82,67,.9));box-shadow:0 0 0 8px rgba(7,19,36,.48),0 0 42px rgba(49,229,255,.24)}
.world-info{left:28px;right:28px;bottom:24px}.world-info h2{font-size:clamp(27px,2.5vw,40px);letter-spacing:-.04em;margin-bottom:18px}.world-stats{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.world-stats div{min-height:66px;padding:10px 12px;border-radius:12px;background:rgba(2,8,18,.58);border-color:rgba(137,179,255,.13)}.world-stats small{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.world-stats b{font-size:13px;margin-top:7px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.control-card{position:relative;overflow:hidden;padding:22px;border-radius:26px;background:linear-gradient(155deg,rgba(14,30,57,.93),rgba(5,12,26,.95));border-color:rgba(102,174,255,.17)}.control-card::before{content:"CONTROL DECK";display:block;font-size:9px;font-weight:900;letter-spacing:.18em;color:#6d86a8;margin-bottom:6px}.control-card::after{content:"";position:absolute;width:220px;height:220px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(86,231,255,.16),transparent 68%);pointer-events:none}.control-card h3{font-size:19px;margin-bottom:19px}.control-grid{gap:10px}.control-grid button{height:58px;border-radius:13px;font-size:12px;letter-spacing:.035em;box-shadow:none;border:1px solid rgba(255,255,255,.10)}.control-grid button:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.dashboard-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:18px}.player-overview,.system-status{min-height:390px}.panel-head{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.055)}.panel-head h3{font-size:15px;letter-spacing:.01em}.panel-head h3 span{color:#6fe4ff}.small-btn,.count-badge{border-radius:999px;background:rgba(78,212,255,.075);border:1px solid rgba(78,212,255,.15);color:#9eefff}
.compact-table .row{border-radius:12px;margin-top:7px;background:rgba(4,12,25,.43);border:1px solid rgba(255,255,255,.04)}.compact-table .row.head{background:transparent;border:0;color:#647b9a;text-transform:uppercase;letter-spacing:.1em;font-size:9px}.face{background:linear-gradient(145deg,#203c5b,#174438)}
.ring-grid{gap:12px}.ring{background:radial-gradient(circle at center,rgba(9,20,38,.96) 54%,transparent 56%),conic-gradient(var(--purple) calc(var(--p)*1%),rgba(255,255,255,.055) 0);box-shadow:inset 0 0 30px rgba(0,0,0,.24)}.ring.cyan{background:radial-gradient(circle at center,rgba(9,20,38,.96) 54%,transparent 56%),conic-gradient(var(--cyan) calc(var(--p)*1%),rgba(255,255,255,.055) 0)}.ring.orange{background:radial-gradient(circle at center,rgba(9,20,38,.96) 54%,transparent 56%),conic-gradient(var(--orange) calc(var(--p)*1%),rgba(255,255,255,.055) 0)}
.network-card{background:linear-gradient(145deg,rgba(11,34,55,.76),rgba(6,16,31,.84));border-color:rgba(92,219,255,.12)}
.quick-modules{gap:12px!important;margin-top:18px}.module{height:206px!important;min-height:206px!important;padding:19px!important;border-radius:20px!important;background:linear-gradient(150deg,rgba(12,27,51,.80),rgba(5,12,25,.90))!important;border-color:rgba(104,170,255,.13)!important;box-shadow:0 18px 50px rgba(0,0,0,.28)!important}.module::after{width:7px!important;height:7px!important}.module span{width:58px!important;height:58px!important;flex-basis:58px!important;font-size:34px!important;border-radius:16px}.module b{font-size:12px!important;letter-spacing:.07em!important}.module small{font-size:11px!important;color:#7890ad!important;margin:9px 0 14px!important}.module em{font-size:11px;color:#76e8ff!important}.module:hover{transform:translateY(-5px)!important;border-color:rgba(85,226,255,.32)!important}
.bottom-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;overflow:hidden;border-radius:20px;margin-top:18px}.bottom-timeline>div{padding:18px 20px;border-right:1px solid rgba(255,255,255,.055);background:rgba(5,14,29,.48)}.bottom-timeline>div:last-child{border-right:0}.bottom-timeline span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#647d9d}.bottom-timeline b{font-size:12px;margin-top:7px}
.broadcast-panel{margin-top:18px}.broadcast-panel .inline{display:grid;grid-template-columns:1fr auto;gap:10px}.mini-console{border-radius:14px;background:#02060c;border:1px solid rgba(105,168,255,.10)}
.cc-command-strip{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:-5px 0 18px;padding:11px 13px;border-radius:15px;background:rgba(6,15,30,.66);border:1px solid rgba(105,168,255,.11);color:#7790af;font-size:10px;letter-spacing:.04em}.cc-command-strip strong{color:#d8e9ff}.cc-command-strip kbd{padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:#9deaff;font-family:inherit}.cc-scanline{position:fixed;left:288px;right:0;height:1px;z-index:0;background:linear-gradient(90deg,transparent,rgba(86,231,255,.15),transparent);animation:ccScan 9s linear infinite;pointer-events:none}@keyframes ccScan{from{top:0}to{top:100vh}}
body.cc-focus-mode .sidebar{transform:translateX(-100%)}body.cc-focus-mode .shell{margin-left:0}body.cc-focus-mode .cc-scanline{left:0}.sidebar,.shell{transition:margin-left .25s ease,transform .25s ease}
@media(max-width:1500px){.world-stats{grid-template-columns:repeat(3,1fr)}.server-hero{grid-template-columns:1fr}.control-card{margin-top:0}.dashboard-grid{grid-template-columns:1fr}.bottom-timeline{grid-template-columns:1fr 1fr}.bottom-timeline>div:nth-child(2){border-right:0}}
@media(max-width:900px){.sidebar{width:auto}.shell{margin-left:0}.page-title::after,.cc-scanline{display:none}.world-stats{grid-template-columns:1fr 1fr}.bottom-timeline{grid-template-columns:1fr}.bottom-timeline>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.055)}}