:root{
    --bg:#0a0f1c;
    --bg-2:#10182b;
    --surface:#121c31;
    --surface-2:#182540;
    --surface-3:#1e2d4d;
    --text:#eef4ff;
    --muted:#9caecc;
    --line:rgba(255,255,255,.08);
    --primary:#4f8cff;
    --primary-2:#00d2ff;
    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;
    --shadow:0 18px 50px rgba(0,0,0,.35);
    --radius:22px;
    --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
            radial-gradient(circle at top left, rgba(79,140,255,.18), transparent 26%),
            radial-gradient(circle at top right, rgba(0,210,255,.14), transparent 22%),
            linear-gradient(180deg, #0a0f1c 0%, #0d1424 100%);
    min-height:100vh;
}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
.container{width:min(calc(100% - 32px), var(--container));margin:0 auto}

.navbar{
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(16px);
    background:rgba(10,15,28,.75);
    border-bottom:1px solid var(--line);
}
.nav-inner{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.logo{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    letter-spacing:-.03em;
    font-size:1.06rem;
}
.logo-mark{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff;
    font-weight:900;
    box-shadow:0 14px 28px rgba(79,140,255,.35);
}
.nav-links{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.nav-link{
    color:var(--muted);
    font-weight:600;
    transition:.2s ease;
}
.nav-link:hover{color:var(--text)}

.btn{
    border:0;
    cursor:pointer;
    border-radius:16px;
    padding:12px 18px;
    font-weight:700;
    transition:.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    box-shadow:0 16px 34px rgba(79,140,255,.28);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{
    color:var(--text);
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
}
.btn-secondary:hover{background:rgba(255,255,255,.08)}
.btn-danger{
    background:rgba(239,68,68,.12);
    color:#ffd8d8;
    border:1px solid rgba(239,68,68,.22);
}
.btn-info{
    background:rgba(0,210,255,.12);
    color:#c7f6ff;
    border:1px solid rgba(0,210,255,.22);
}

.card{
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
    border:1px solid var(--line);
    border-radius:28px;
    box-shadow:var(--shadow);
}
.soft-card{
    background:linear-gradient(180deg, rgba(24,37,64,.95), rgba(16,24,43,.95));
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(79,140,255,.12);
    color:#d7e6ff;
    font-weight:700;
    font-size:.92rem;
}

.hero{
    padding:84px 0 64px;
}
.hero-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:28px;
    align-items:center;
}
.hero-copy h1{
    margin:18px 0 16px;
    font-size:clamp(2.6rem, 5vw, 5.1rem);
    line-height:.95;
    letter-spacing:-.05em;
}
.hero-copy p{
    color:var(--muted);
    line-height:1.85;
    max-width:720px;
    font-size:1.03rem;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:26px;
}
.hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:28px;
}
.hero-stat{
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
}
.hero-stat strong{
    display:block;
    margin-bottom:6px;
}
.hero-stat span{
    color:var(--muted);
    font-size:.93rem;
}

.hero-panel{
    padding:24px;
}
.hero-panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}
.hero-panel-top h3{
    margin:0;
    font-size:1.16rem;
}
.hero-panel-top p{
    margin:6px 0 0;
    color:var(--muted);
}
.hero-panel-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}
.dashboard-mini-card{
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
}
.dashboard-mini-card span{
    display:block;
    color:var(--muted);
    margin-bottom:8px;
}
.dashboard-mini-card strong{
    display:block;
    font-size:1.4rem;
    margin-bottom:6px;
}
.dashboard-mini-card small{
    color:#d7e3fb;
}

.badge{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:700;
}
.badge-success{
    background:rgba(34,197,94,.14);
    color:#b7f5ca;
}

.section{padding:76px 0}
.alt-section{
    background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.04);
}
.section-head{
    text-align:center;
    margin-bottom:34px;
}
.section-head h2{
    margin:0 0 12px;
    font-size:clamp(1.9rem,3vw,2.9rem);
    letter-spacing:-.04em;
}
.section-head p{
    max-width:760px;
    margin:0 auto;
    color:var(--muted);
    line-height:1.8;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.feature-card{
    padding:28px;
}
.feature-card h3{margin:0 0 10px}
.feature-card p{margin:0;color:var(--muted);line-height:1.75}
.feature-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    margin-bottom:16px;
    background:linear-gradient(135deg, rgba(79,140,255,.22), rgba(0,210,255,.14));
    font-size:1.4rem;
}

.timeline-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.timeline-card{
    padding:28px;
}
.timeline-number{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:16px;
    font-weight:800;
    margin-bottom:16px;
    background:rgba(79,140,255,.16);
    color:#deebff;
}

.auth-wrap{
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 480px;
    gap:28px;
    align-items:center;
    padding:32px;
}
.auth-bg{
    background:
            radial-gradient(circle at 15% 20%, rgba(79,140,255,.18), transparent 24%),
            radial-gradient(circle at 80% 15%, rgba(0,210,255,.12), transparent 18%),
            linear-gradient(180deg,#0a0f1c,#0d1424);
}
.auth-side{
    padding:40px;
}
.auth-side-badge{
    display:inline-flex;
    padding:10px 14px;
    border-radius:999px;
    margin-bottom:18px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:#d9e8ff;
    font-weight:700;
}
.auth-side h1{
    margin:0 0 16px;
    font-size:clamp(2rem,4vw,4rem);
    line-height:1;
    letter-spacing:-.04em;
}
.auth-side p{
    max-width:560px;
    color:var(--muted);
    line-height:1.9;
    font-size:1.02rem;
}
.auth-card{
    width:min(100%, 480px);
    padding:30px;
}
.auth-card h2{
    margin:12px 0 10px;
    letter-spacing:-.03em;
}
.auth-card p{
    margin:0 0 22px;
    color:var(--muted);
}

.form-group{margin-bottom:14px}
.label{
    display:block;
    margin-bottom:8px;
    color:#dde8ff;
    font-weight:600;
}
.input{
    width:100%;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:var(--text);
    outline:none;
    transition:.2s ease;
}
.input:focus{
    border-color:rgba(79,140,255,.55);
    box-shadow:0 0 0 4px rgba(79,140,255,.12);
}

.alert{
    padding:14px 16px;
    border-radius:16px;
    margin-bottom:16px;
    font-size:.95rem;
}
.alert-success{
    background:rgba(34,197,94,.12);
    color:#cef6d8;
    border:1px solid rgba(34,197,94,.22);
}
.alert-danger{
    background:rgba(239,68,68,.12);
    color:#ffd4d4;
    border:1px solid rgba(239,68,68,.22);
}

.dashboard{
    padding:30px 0 60px;
}
.dashboard-hero{
    margin-bottom:24px;
}
.dashboard-hero h1{
    margin:14px 0 10px;
    letter-spacing:-.04em;
}
.dashboard-hero p{
    margin:0;
    color:var(--muted);
    line-height:1.8;
}
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:22px;
}
.stat-card{
    padding:22px;
}
.stat-card span{
    display:block;
    color:var(--muted);
    margin-bottom:8px;
}
.stat-card strong{
    font-size:1.9rem;
}
.section-stack{
    display:grid;
    gap:20px;
}
.table-card{
    padding:22px;
}
.table-headline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:14px;
}
.table-headline p{
    margin:6px 0 0;
    color:var(--muted);
}
.card-title{
    margin:0;
    font-size:1.2rem;
    letter-spacing:-.03em;
}
.table-wrap{overflow:auto}
table{
    width:100%;
    min-width:880px;
    border-collapse:collapse;
}
th,td{
    padding:14px 12px;
    border-bottom:1px solid rgba(255,255,255,.06);
    text-align:left;
    font-size:.95rem;
}
th{
    color:#c9d9ff;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.05em;
}
td{color:#eef4ff}
.muted{color:var(--muted)}

.status{
    display:inline-flex;
    align-items:center;
    padding:7px 11px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:700;
}
.status-pending{background:rgba(245,158,11,.14); color:#ffd28a}
.status-approved{background:rgba(34,197,94,.14); color:#9ef0b8}
.status-rejected{background:rgba(239,68,68,.14); color:#ffb7b7}
.status-cancelled{background:rgba(148,163,184,.16); color:#dae3ef}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(5,10,18,.78);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:9999;
}
.modal-overlay.active{display:flex}
.modal-box{
    width:min(780px,100%);
    background:linear-gradient(180deg, #182540, #10182b);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    box-shadow:0 24px 70px rgba(0,0,0,.45);
    overflow:hidden;
}
.modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 22px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.modal-header h3{
    margin:0;
    font-size:1.22rem;
    letter-spacing:-.03em;
}
.modal-close{
    width:42px;
    height:42px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:#fff;
    cursor:pointer;
    font-size:1.15rem;
}
.modal-body{padding:22px}
.modal-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}
.modal-item{
    padding:15px;
    border-radius:18px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
}
.modal-item strong{
    display:block;
    margin-bottom:6px;
    color:#cad8ff;
    font-size:.9rem;
}
.modal-item span{
    color:#eef4ff;
    word-break:break-word;
}
.modal-footer{
    padding:18px 22px 22px;
    border-top:1px solid rgba(255,255,255,.06);
    display:flex;
    justify-content:flex-end;
}

.footer{
    padding:26px 0 40px;
    color:var(--muted);
}
.footer-inner{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.footer-links{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}
.footer a:hover{text-decoration:underline}

@media (max-width:1080px){
    .hero-grid,
    .auth-wrap{
        grid-template-columns:1fr;
    }
    .auth-side{
        padding:10px 0 0;
    }
}
@media (max-width:980px){
    .grid-3,
    .timeline-grid,
    .stats,
    .hero-stats{
        grid-template-columns:1fr 1fr;
    }
}
@media (max-width:680px){
    .grid-3,
    .timeline-grid,
    .stats,
    .hero-stats,
    .hero-panel-grid,
    .modal-grid{
        grid-template-columns:1fr;
    }
    .hero{padding-top:56px}
    .hero-actions .btn,
    .nav-links .btn{width:100%}
    .auth-wrap{padding:18px}
    .auth-card{padding:24px}
}