:root{
  --glass:rgba(24,15,39,.62);
  --glass-strong:rgba(18,11,31,.82);
  --glass-line:rgba(226,180,86,.18);
  --violet-line:rgba(178,92,255,.24);
  --shadow:0 24px 70px rgba(0,0,0,.38);
  --glow:0 0 34px rgba(171,77,255,.16);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 84% -5%,rgba(126,45,195,.28),transparent 31%),
    radial-gradient(circle at 4% 80%,rgba(123,36,172,.18),transparent 34%),
    linear-gradient(145deg,#06040d 0%,#0b0615 48%,#07040f 100%);
  background-attachment:fixed;
  letter-spacing:.005em;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-3;
  background:linear-gradient(115deg,transparent 15%,rgba(255,216,139,.025) 42%,transparent 62%);
}
.cosmic-aurora{
  position:fixed;inset:-20%;pointer-events:none;z-index:-2;filter:blur(80px);opacity:.7;
  background:conic-gradient(from 180deg at 50% 50%,transparent,rgba(133,47,201,.12),transparent,rgba(222,169,72,.08),transparent);
  animation:aurora-drift 26s ease-in-out infinite alternate;
}
.stars{opacity:.58;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.8) 70%,transparent 100%);animation:star-drift 45s linear infinite}
.stars::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,221,151,.92) 0 1px,transparent 1.8px);background-size:149px 149px;background-position:35px 61px;animation:twinkle 5s ease-in-out infinite alternate}

.portal{grid-template-columns:292px minmax(0,1fr);gap:18px;padding:14px}
.sidebar{
  top:14px;height:calc(100vh - 28px);padding:24px 15px;border:1px solid var(--glass-line);border-radius:28px;
  background:linear-gradient(155deg,rgba(27,17,43,.88),rgba(8,5,16,.78));
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.055),0 0 50px rgba(118,37,182,.08);
  backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);
}
.logo{position:relative;margin:0 10px 25px;padding:20px 12px 21px;border-bottom:1px solid rgba(234,191,102,.13)}
.logo::before{content:"";position:absolute;left:50%;top:4px;width:48px;height:48px;transform:translateX(-50%);border:1px solid rgba(235,188,88,.36);border-radius:50%;box-shadow:0 0 25px rgba(225,172,65,.16)}
.logo span{position:relative;z-index:1;font-size:29px;filter:drop-shadow(0 0 10px rgba(235,185,79,.55))}
.logo strong{font-size:18px;text-shadow:0 0 20px rgba(232,185,79,.24)}
.logo small{color:#8f849d}
nav{gap:6px;padding:0 4px 20px;scrollbar-width:thin;scrollbar-color:rgba(185,100,235,.35) transparent}
.nav-label{margin-top:8px;padding:14px 12px 6px;font-size:9px;letter-spacing:.24em;color:rgba(241,195,101,.78)}
nav button,.logout{
  position:relative;min-height:47px;padding:12px 15px;border:1px solid transparent;border-radius:15px;
  color:#bcb2ca;transition:transform .22s ease,color .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
nav button::after{content:"";position:absolute;left:7px;top:50%;width:3px;height:0;border-radius:5px;background:linear-gradient(var(--gold2),var(--purple));transform:translateY(-50%);transition:height .22s ease;box-shadow:0 0 12px var(--purple)}
nav button:hover{transform:translateX(3px);color:#fff;border-color:rgba(183,102,235,.18);background:rgba(115,58,148,.13)}
nav button.active{
  transform:translateX(3px);border:1px solid rgba(225,179,84,.22);border-left:1px solid rgba(225,179,84,.22);
  background:linear-gradient(100deg,rgba(115,55,154,.32),rgba(51,28,73,.18));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.16),0 0 25px rgba(144,54,207,.1);
}
nav button.active::after{height:24px}
.logout{margin:12px 4px 0;border:1px solid rgba(255,103,124,.12);background:rgba(87,23,40,.09)}
.logout:hover{background:rgba(118,30,51,.2);color:#ffb2bd}

main{border-radius:27px;overflow:clip;background:rgba(5,3,11,.16)}
header{
  height:88px;top:14px;margin:0 2px;z-index:10;padding:15px 28px;border:1px solid var(--glass-line);border-radius:25px;
  background:linear-gradient(100deg,rgba(17,10,29,.78),rgba(25,14,41,.55));
  box-shadow:0 14px 45px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(26px) saturate(145%);-webkit-backdrop-filter:blur(26px) saturate(145%);
}
header h2{font-size:26px;font-weight:500;letter-spacing:.025em}
.eyebrow{color:#e7b955;text-shadow:0 0 14px rgba(231,185,85,.3)}
.admin-chip{border-color:rgba(235,190,98,.25);background:rgba(229,177,75,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(15px)}
.content{padding:32px 34px 50px}
.hero{
  position:relative;overflow:hidden;padding:31px 32px;border:1px solid var(--glass-line);border-radius:27px;
  background:linear-gradient(125deg,rgba(47,25,68,.68),rgba(14,8,26,.58));
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06),var(--glow);backdrop-filter:blur(20px);
}
.hero::before{content:"";position:absolute;right:-50px;top:-80px;width:260px;height:260px;border:1px solid rgba(225,179,84,.13);border-radius:50%;box-shadow:0 0 70px rgba(151,54,216,.13),inset 0 0 50px rgba(221,165,57,.04)}
.hero::after{content:"✦";position:absolute;right:46px;top:29px;color:var(--gold);font-size:28px;text-shadow:0 0 19px rgba(232,184,76,.6);animation:twinkle 3s ease-in-out infinite alternate}
.hero h3{position:relative;font-size:34px;font-weight:500;letter-spacing:.01em}

.metrics{gap:17px}
.metric,.panel,.oracle-card,.table-wrap,.public-creator-card{
  border-color:var(--glass-line);background:linear-gradient(145deg,rgba(31,19,49,.66),rgba(12,8,22,.62));
  box-shadow:0 16px 45px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(18px) saturate(125%);
}
.metric{position:relative;overflow:hidden;padding:23px;border-radius:20px;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.metric::before{content:"";position:absolute;right:-35px;bottom:-40px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(165,75,225,.18),transparent 70%)}
.metric:hover{transform:translateY(-4px);border-color:rgba(235,188,91,.32);box-shadow:0 22px 52px rgba(0,0,0,.28),0 0 28px rgba(148,58,207,.1)}
.metric strong{font-size:34px;text-shadow:0 0 17px rgba(229,178,73,.2)}
.panel{border-radius:23px;padding:24px}
.panel h3{font-size:21px;font-weight:500;color:#f7ecff}
.soft,.primary,.danger,.actions button{transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease}
.primary{background:linear-gradient(115deg,#b77820 0%,#ecc45f 48%,#ffe7a0 100%);box-shadow:0 9px 24px rgba(191,132,36,.2),inset 0 1px 0 rgba(255,255,255,.42)}
.primary:hover,.soft:hover,.actions button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.soft{border:1px solid rgba(190,108,239,.18);background:linear-gradient(120deg,rgba(82,38,118,.7),rgba(42,22,62,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
input,textarea,select{border-color:rgba(171,101,207,.26);background:rgba(8,5,15,.62);box-shadow:inset 0 1px 8px rgba(0,0,0,.18);transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(232,187,90,.62);background:rgba(12,7,21,.82);box-shadow:0 0 0 3px rgba(225,177,76,.08),0 0 25px rgba(155,67,214,.1)}
.table-wrap{border-radius:20px}
th{padding:16px;background:rgba(27,15,42,.88);backdrop-filter:blur(15px)}
td{padding:15px 16px;border-bottom-color:rgba(156,89,190,.11)}
tr:hover td{background:rgba(113,55,145,.11)}
.badge{border:1px solid rgba(199,131,237,.12);background:rgba(97,47,132,.28);backdrop-filter:blur(10px)}
dialog{border-color:rgba(232,185,87,.27);background:linear-gradient(145deg,rgba(27,16,43,.94),rgba(8,5,16,.95));box-shadow:0 32px 100px rgba(0,0,0,.65),0 0 60px rgba(139,46,202,.12);backdrop-filter:blur(28px)}
dialog::backdrop{background:rgba(2,1,6,.76);backdrop-filter:blur(10px)}
#toast{background:rgba(28,17,43,.88);box-shadow:0 20px 55px rgba(0,0,0,.4),0 0 25px rgba(229,181,78,.12);backdrop-filter:blur(20px)}
.login-card{border-color:rgba(235,190,93,.29);background:linear-gradient(145deg,rgba(31,18,49,.82),rgba(8,5,17,.82));box-shadow:0 35px 110px rgba(0,0,0,.58),0 0 70px rgba(121,38,181,.13),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(30px)}
.login-card::before{content:"";position:absolute;inset:-1px;border-radius:30px;padding:1px;background:linear-gradient(145deg,rgba(255,224,157,.45),transparent 36%,rgba(167,76,225,.3));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.google-button{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.92);box-shadow:0 10px 28px rgba(0,0,0,.2);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.google-button:hover{transform:translateY(-2px);background:#fff;box-shadow:0 15px 34px rgba(0,0,0,.28)}
.wizard-step{background:rgba(13,8,23,.38);backdrop-filter:blur(10px)}
.wizard-step.active{border-color:rgba(231,184,80,.28);background:linear-gradient(120deg,rgba(100,44,140,.5),rgba(45,24,66,.54));box-shadow:0 10px 25px rgba(0,0,0,.17)}
.oracle-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.oracle-card:hover,.public-creator-card:hover{transform:translateY(-5px);border-color:rgba(233,188,92,.3);box-shadow:0 25px 65px rgba(0,0,0,.35),0 0 35px rgba(145,55,205,.1)}

@keyframes aurora-drift{to{transform:translate3d(5%,-3%,0) rotate(18deg) scale(1.08)}}
@keyframes star-drift{to{background-position:65px 73px,132px 148px}}
@keyframes twinkle{from{opacity:.35;transform:scale(.88)}to{opacity:1;transform:scale(1.08)}}

@media(max-width:1000px){.portal{grid-template-columns:260px minmax(0,1fr);gap:10px;padding:9px}.content{padding:26px 22px 44px}}
@media(max-width:760px){.portal{display:block;padding:0}.sidebar{top:0;height:100vh;border-radius:0 25px 25px 0}.sidebar.open{box-shadow:25px 0 80px rgba(0,0,0,.65)}main{border-radius:0}header{top:0;margin:0;border-radius:0 0 22px 22px}.content{padding:20px 16px 40px}.hero{padding:25px 22px}.hero h3{font-size:28px}.hero::after{right:22px}.metrics{gap:11px}.metric{padding:18px}.metric strong{font-size:28px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.live-remote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.live-remote-status{display:flex;align-items:center;gap:16px}.live-dot{width:14px;height:14px;border-radius:50%;background:var(--success);box-shadow:0 0 18px var(--success)}.live-dot.offline{background:var(--danger);box-shadow:0 0 18px var(--danger)}.live-actions{display:flex;flex-wrap:wrap;gap:10px}.live-actions button{width:auto}@media(max-width:760px){.live-remote-grid{grid-template-columns:1fr}}