@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

:root{
    --bg:#eef3fb;
    --card:#ffffff;
    --text:#0b1220;
    --muted:#64748b;
    --line:#dbe3ef;
    --dark:#08111f;
    --dark2:#111827;
    --blue:#2563eb;
    --cyan:#06b6d4;
    --green:#16a34a;
    --red:#dc2626;
    --orange:#f59e0b;
    --purple:#7c3aed;
    --gold:#d4a62a;
    --pink:#db2777;
    --shadow:0 18px 50px rgba(15,23,42,.10);
    --shadow2:0 28px 80px rgba(15,23,42,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,Arial,sans-serif;
    background:
        radial-gradient(circle at 8% 0%,rgba(37,99,235,.18),transparent 28%),
        radial-gradient(circle at 86% 0%,rgba(212,166,42,.18),transparent 30%),
        radial-gradient(circle at 50% 70%,rgba(124,58,237,.10),transparent 34%),
        linear-gradient(180deg,#f8fbff 0%,var(--bg) 55%,#f6f7fb 100%);
    color:var(--text);
}
a{text-decoration:none;color:inherit}
.premium-shell{min-height:100vh;padding:18px 18px 34px}
.premium-header{
    position:relative;
    isolation:isolate;
    max-width:1540px;
    margin:0 auto;
    padding:18px 22px;
    border-radius:30px;
    color:#fff;
    background:
        linear-gradient(135deg,rgba(8,17,31,.98),rgba(17,24,39,.96) 48%,rgba(76,29,149,.88) 76%,rgba(146,64,14,.92));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    box-shadow:var(--shadow2);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
}
.header-glow{
    position:absolute;
    inset:-80px -120px auto auto;
    width:340px;
    height:220px;
    border-radius:999px;
    background:radial-gradient(circle,rgba(245,158,11,.46),rgba(124,58,237,.10),transparent 70%);
    z-index:-1;
}
.premium-header:after{
    content:"";
    position:absolute;
    inset:auto 18px 0 18px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
}
.brand-wide{display:flex;gap:15px;align-items:center;min-width:320px}
.brand-mark{
    width:62px;height:62px;border-radius:21px;
    background:linear-gradient(135deg,#fbbf24,#f97316 70%,#d4a62a);
    display:flex;align-items:center;justify-content:center;
    color:#111827;
    box-shadow:0 15px 35px rgba(249,115,22,.38), inset 0 1px 0 rgba(255,255,255,.40);
    font-weight:950;font-size:21px;
}
.brand-mark span{filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.brand-copy strong{display:block;font-size:24px;letter-spacing:-.5px}
.brand-copy span{display:block;color:#cbd5e1;font-size:12px;margin-top:5px;letter-spacing:.2px}
.header-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.site-switcher select,.input,select,textarea{
    padding:12px 14px;
    border:1px solid rgba(15,23,42,.12);
    border-radius:16px;
    background:#fff;
    color:#111827;
    font-size:14px;
    min-width:260px;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    outline:none;
}
.site-switcher select{font-weight:800}
.user-pill{
    display:flex;gap:10px;align-items:center;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    padding:11px 13px;border-radius:18px;
    backdrop-filter:blur(12px);
    font-size:13px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.user-pill a{color:#fff;font-weight:900;background:rgba(255,255,255,.12);padding:6px 9px;border-radius:12px}
.user-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.16)}

.bubble-nav{
    max-width:1540px;
    margin:16px auto 22px;
    display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.bubble{
    display:flex;align-items:center;gap:9px;
    padding:12px 15px;
    border-radius:999px;
    color:#fff;
    font-weight:900;
    font-size:13px;
    box-shadow:0 12px 30px rgba(15,23,42,.12);
    border:1px solid rgba(255,255,255,.50);
    opacity:.95;
    transition:.18s ease;
}
.bubble-icon{
    width:24px;height:24px;border-radius:50%;
    background:rgba(255,255,255,.18);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:12px;
}
.bubble:hover,.bubble.active{transform:translateY(-2px);opacity:1;box-shadow:0 18px 40px rgba(15,23,42,.20)}
.bubble.active{outline:3px solid rgba(255,255,255,.75)}
.bubble.blue{background:linear-gradient(135deg,#2563eb,#0891b2)}
.bubble.cyan{background:linear-gradient(135deg,#0891b2,#0e7490)}
.bubble.red{background:linear-gradient(135deg,#dc2626,#991b1b)}
.bubble.green{background:linear-gradient(135deg,#16a34a,#047857)}
.bubble.orange{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.bubble.purple{background:linear-gradient(135deg,#7c3aed,#4c1d95)}
.bubble.gold{background:linear-gradient(135deg,#facc15,#f97316);color:#111827}
.bubble.gold .bubble-icon{background:rgba(0,0,0,.12)}

.premium-main{max-width:1540px;margin:0 auto}
.page-title{
    display:flex;justify-content:space-between;align-items:center;gap:18px;
    margin-bottom:18px;
    background:rgba(255,255,255,.80);
    backdrop-filter:blur(15px);
    border:1px solid rgba(219,227,239,.9);
    border-radius:26px;
    padding:22px 24px;
    box-shadow:var(--shadow);
}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:950;color:var(--blue);margin-bottom:7px}
.page-title h1{margin:0;font-size:34px;letter-spacing:-1px}
.page-title p{margin:7px 0 0;color:var(--muted);font-weight:700}
.page-title-actions{display:flex;gap:10px;flex-wrap:wrap}
.status-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;font-weight:950;font-size:12px}
.status-chip:before{content:"";width:8px;height:8px;border-radius:50%;display:inline-block}
.status-chip.live{background:#ecfeff;color:#0e7490;border:1px solid #a5f3fc}
.status-chip.live:before{background:#06b6d4;box-shadow:0 0 0 5px rgba(6,182,212,.16)}
.status-chip.secure{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.status-chip.secure:before{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.14)}

.grid{display:grid;gap:18px}
.grid.cards{grid-template-columns:repeat(4,minmax(190px,1fr))}
.card{
    background:rgba(255,255,255,.92);
    border:1px solid var(--line);
    border-radius:24px;
    padding:20px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}
.card:after{
    content:"";
    position:absolute;
    right:-40px;
    top:-40px;
    width:110px;height:110px;
    border-radius:50%;
    background:rgba(37,99,235,.08);
}
.metric{min-height:132px}
.metric .label{font-size:13px;color:var(--muted);font-weight:900;position:relative;z-index:1}
.metric .value{font-size:36px;font-weight:950;margin-top:13px;position:relative;z-index:1;letter-spacing:-1px}
.metric .mini{margin-top:8px;color:var(--muted);font-size:12px;font-weight:700}
.metric.blue{border-top:6px solid var(--blue)}
.metric.red{border-top:6px solid var(--red)}
.metric.orange{border-top:6px solid var(--orange)}
.metric.green{border-top:6px solid var(--green)}
.metric.purple{border-top:6px solid var(--purple)}
.metric.gold{border-top:6px solid var(--gold)}
.metric.cyan{border-top:6px solid var(--cyan)}

.section{
    background:rgba(255,255,255,.94);
    border:1px solid var(--line);
    border-radius:26px;
    padding:22px;
    margin-top:20px;
    box-shadow:var(--shadow);
}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.section h2{margin:0;font-size:21px;letter-spacing:-.4px}
.section-sub{color:var(--muted);margin:6px 0 0;font-size:13px;font-weight:700}
.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:#fff}
th{
    background:linear-gradient(135deg,#0f172a,#111827);
    color:#fff;text-align:left;font-size:12px;padding:14px;white-space:nowrap;letter-spacing:.02em
}
td{padding:14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
tr:hover td{background:#f8fafc}
.badge{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;color:#fff;font-weight:950;font-size:11px;white-space:nowrap}
.badge-danger{background:linear-gradient(135deg,#dc2626,#991b1b)}
.badge-warn{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.badge-success{background:linear-gradient(135deg,#16a34a,#047857)}
.badge-info{background:linear-gradient(135deg,#2563eb,#0891b2)}
.badge-purple{background:linear-gradient(135deg,#7c3aed,#4c1d95)}
.badge-muted{background:#64748b}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 15px;border-radius:15px;background:#111827;color:#fff;border:0;font-weight:950;cursor:pointer;font-size:13px;
    box-shadow:0 10px 22px rgba(15,23,42,.13)
}
.btn.blue{background:linear-gradient(135deg,#2563eb,#0891b2)}
.btn.red{background:linear-gradient(135deg,#dc2626,#991b1b)}
.btn.green{background:linear-gradient(135deg,#16a34a,#047857)}
.btn.orange{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.btn.purple{background:linear-gradient(135deg,#7c3aed,#4c1d95)}
.btn.light{background:#e8eef7;color:#111827;box-shadow:none}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.alert{padding:14px;border-radius:16px;background:#eff6ff;border:1px solid #bfdbfe;margin-bottom:14px}
.alert.error{background:#fef2f2;border-color:#fecaca}
.alert.success{background:#f0fdf4;border-color:#bbf7d0}
.hero{
    background:
        radial-gradient(circle at 90% -10%,rgba(245,158,11,.36),transparent 28%),
        radial-gradient(circle at 25% 0%,rgba(37,99,235,.24),transparent 32%),
        linear-gradient(135deg,#08111f,#17143d 55%,#7c2d12);
    border-radius:32px;color:#fff;padding:34px;box-shadow:var(--shadow2);margin-bottom:20px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.16)
}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 45%);pointer-events:none}
.hero h2{font-size:42px;margin:0 0 10px;letter-spacing:-1.3px}
.hero p{color:#e5e7eb;max-width:950px;line-height:1.65;font-weight:600}
.kpi-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.kpi{background:rgba(255,255,255,.12);padding:11px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);font-weight:800}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:15px}
label{font-weight:900;font-size:13px;color:#374151}
label span{display:block;margin-bottom:7px}
.small{color:var(--muted);font-size:12px;line-height:1.45}
pre.code{background:#0f172a;color:#e5e7eb;border-radius:16px;padding:18px;white-space:pre-wrap;overflow:auto}
.premium-panels{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:20px}
.radar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.radar-box{border-radius:20px;padding:16px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--line)}
.radar-box strong{display:block;font-size:22px;margin-top:8px}
.radar-box span{font-size:12px;color:var(--muted);font-weight:900}
.action-list{display:grid;gap:10px}
.action-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px;border-radius:18px;background:#f8fafc;border:1px solid var(--line)}
.action-item strong{font-size:13px}
.action-item span{font-size:12px;color:var(--muted);font-weight:800}
.progress{height:9px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:9px}
.progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#2563eb,#f59e0b)}
@media(max-width:1100px){
    .premium-header{display:block}
    .header-actions{justify-content:flex-start;margin-top:14px}
    .grid.cards{grid-template-columns:repeat(2,1fr)}
    .premium-panels{grid-template-columns:1fr}
}
@media(max-width:700px){
    .premium-shell{padding:10px}
    .grid.cards,.radar-grid{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr}
    .page-title{display:block}
    .page-title-actions{margin-top:12px}
    .hero h2{font-size:32px}
    .bubble{font-size:12px;padding:10px 12px}
    .site-switcher select{min-width:100%;width:100%}
}