:root{
    --bg:#09111d;
    --panel:rgba(16, 27, 45, 0.92);
    --panel-2:rgba(20, 34, 56, 0.96);
    --line:rgba(255,255,255,0.08);
    --text:#eef4ff;
    --muted:#b7c4d8;
    --accent:#7bb0ff;
    --accent-2:#b8d3ff;
    --gold:#d9b56b;
    --shadow:0 24px 60px rgba(0,0,0,0.34);
    --radius:24px;
    --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(123,176,255,0.20), transparent 30%),
        radial-gradient(circle at top right, rgba(217,181,107,0.10), transparent 22%),
        linear-gradient(180deg, #07101b 0%, #09111d 42%, #0d1727 100%);
    color:var(--text);
    line-height:1.65;
}
a{color:inherit;text-decoration:none}
.container{width:min(calc(100% - 32px), var(--max));margin:0 auto}
.topbar{
    position:sticky;top:0;z-index:999;backdrop-filter:blur(18px);
    background:rgba(7,16,27,0.84);border-bottom:1px solid rgba(255,255,255,0.06)
}
.nav{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;flex-direction:column;gap:4px}
.brand-title{font-size:1.14rem;font-weight:700;letter-spacing:0.03em}
.brand-sub{color:var(--muted);font-size:0.94rem}
.nav-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px}
.nav-links a{color:var(--muted);padding:10px 14px;border-radius:999px;transition:0.2s ease;font-size:0.95rem}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,0.06)}
.nav-links a.login-link{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#071223;font-weight:700}
.hero{padding:94px 0 58px}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:24px;align-items:stretch}
.hero-card,.info-card,.content-card,.footer-card,.login-card,.dashboard-card,.notice-card{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.hero-card{padding:44px;position:relative;overflow:hidden}
.hero-card::after{
    content:"";position:absolute;right:-70px;bottom:-80px;width:260px;height:260px;
    background:radial-gradient(circle, rgba(123,176,255,0.28), transparent 70%);pointer-events:none
}
.eyebrow{
    display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.03);
    color:var(--accent-2);font-size:0.88rem;margin-bottom:18px
}
h1{font-size:clamp(2.3rem, 4vw, 4.2rem);line-height:1.05;margin-bottom:18px;max-width:13ch}
h2{font-size:clamp(1.8rem, 3vw, 2.8rem);line-height:1.1}
.hero-card p,.lead,.content-card p,.info-card p,.footer-card p,.footer-card li,.notice-card p,.notice-card li{color:var(--muted)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{
    display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;
    border-radius:999px;border:none;cursor:pointer;font-weight:700;transition:0.2s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#071223}
.btn-secondary{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.10);color:var(--text)}
.info-stack{display:grid;gap:22px}
.info-card,.content-card,.login-card,.dashboard-card,.notice-card{padding:28px}
.info-card h3,.content-card h3,.login-card h3,.dashboard-card h3,.notice-card h3{font-size:1.14rem;margin-bottom:10px}
.list{list-style:none;display:grid;gap:10px;margin-top:12px}
.list li{position:relative;padding-left:18px}
.list li::before{
    content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);position:absolute;left:0;top:9px
}
.page-section{padding:34px 0}
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.section-head span{color:var(--accent-2);text-transform:uppercase;font-size:0.8rem;font-weight:700;letter-spacing:0.05em}
.section-head p{max-width:72ch;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.stats{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px}
.stat{padding:20px;border-radius:20px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.stat strong{display:block;font-size:1.7rem;margin-bottom:6px;color:#e6f0ff}
.stat span{color:var(--muted);font-size:0.94rem}
.page-hero{padding:74px 0 14px}
.page-hero-card{padding:34px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font-size:0.84rem;font-weight:700;margin-right:8px;margin-top:8px}
.pill-blue{background:rgba(123,176,255,0.12);color:var(--accent-2)}
.pill-gold{background:rgba(217,181,107,0.12);color:#f3d79b}
.login-layout{display:grid;grid-template-columns:0.9fr 1.1fr;gap:22px}
.form-grid{display:grid;gap:14px;margin-top:16px}
.field{display:grid;gap:8px}
.field label{color:var(--muted);font-size:0.95rem}
.field input{
    min-height:54px;width:100%;border-radius:16px;border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);color:var(--text);padding:0 16px;outline:none
}
.field input:focus{border-color:rgba(123,176,255,0.5);box-shadow:0 0 0 4px rgba(123,176,255,0.10)}
.note{color:var(--muted);font-size:0.92rem}
.notice-card{background:var(--panel-2)}
.dashboard-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px;margin-top:18px}
.dashboard-card{min-height:180px}
.table-wrap{overflow:auto;margin-top:14px;border:1px solid var(--line);border-radius:18px}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.06);color:var(--muted);font-size:0.95rem}
th{color:var(--text);background:rgba(255,255,255,0.03)}
.status{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:0.82rem;font-weight:700}
.status-open{background:rgba(124,214,161,0.12);color:#baf0cb}
.status-review{background:rgba(123,176,255,0.12);color:var(--accent-2)}
.status-urgent{background:rgba(255,158,158,0.12);color:#ffc3c3}
footer{padding:40px 0 56px}
.footer-card{padding:28px;background:rgba(12,22,38,0.96)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
.footer-card h3{margin-bottom:12px;font-size:1.08rem}
.footer-card ul{list-style:none;display:grid;gap:8px}
.divider{height:1px;background:var(--line);margin:22px 0}
.copyright{color:var(--muted);font-size:0.92rem}
.case-panel{display:none;margin-top:18px}
.case-panel.active{display:block}
.fake-alert{
    margin-top:16px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);color:var(--muted)
}
.badge-row{margin-top:12px}
@media (max-width:1100px){
    .hero-grid,.grid-2,.grid-3,.login-layout,.footer-grid,.stats,.dashboard-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
    .nav{flex-direction:column;align-items:flex-start;padding:14px 0}
    .nav-links{justify-content:flex-start}
    .hero{padding-top:46px}
    .hero-card,.info-card,.content-card,.login-card,.dashboard-card,.notice-card,.page-hero-card,.footer-card{padding:22px}
    h1{max-width:none}
}