:root{
    --bg:#0b1020;
    --bg-soft:#111a34;
    --panel:#111827;
    --panel-2:#16213d;
    --card:#121d35;
    --card-soft:#182646;
    --text:#edf2ff;
    --muted:#9fb0d0;
    --border:rgba(255,255,255,.08);
    --primary:#6366f1;
    --primary-dark:#4f46e5;
    --success:#22c55e;
    --danger:#ef4444;
    --warning:#f59e0b;
    --shadow:0 22px 60px rgba(0,0,0,.35);
    --radius:22px;
    --radius-sm:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:
        radial-gradient(circle at top left, rgba(99,102,241,.16), transparent 28%),
        radial-gradient(circle at top right, rgba(34,197,94,.08), transparent 22%),
        linear-gradient(180deg, var(--bg), #0a1227);
    color:var(--text);
}
a{color:inherit;text-decoration:none}
strong{color:#fff}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.gap{gap:10px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.app-shell{display:flex;min-height:100vh}
.sidebar{
    width:300px;flex:0 0 300px;
    background:linear-gradient(180deg, rgba(17,24,39,.96), rgba(17,24,39,.82));
    border-right:1px solid var(--border);
    padding:24px 18px;
    position:sticky;top:0;height:100vh;overflow:auto
}
.sidebar-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.brand{font-weight:900;font-size:1.2rem;letter-spacing:-.02em}
.brand-subtitle{color:var(--muted);font-size:.9rem;margin-top:4px}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.nav-link{
    display:flex;align-items:center;gap:12px;
    padding:13px 14px;border-radius:16px;
    color:#dbe5ff;background:transparent;border:1px solid transparent;
    transition:.18s ease;
}
.nav-link:hover,.nav-link.active{
    background:rgba(99,102,241,.13);
    border-color:rgba(99,102,241,.22);
    transform:translateY(-1px);
}
.nav-link-logout:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.18)}
.sidebar-card{
    margin-top:18px;padding:16px;border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    border:1px solid var(--border)
}
.sidebar-card-title{font-weight:700;margin-bottom:8px}
.sidebar-card-text{font-size:.92rem;color:var(--muted);line-height:1.6}

.content{flex:1;min-width:0;padding:24px 28px 36px}
.content-topbar{
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    margin-bottom:18px;padding:14px 18px;border-radius:20px;
    background:rgba(255,255,255,.04);border:1px solid var(--border)
}
.content-topbar-left{display:flex;align-items:center;gap:12px}
.content-kicker{font-size:.76rem;font-weight:800;color:#c8d5ff;letter-spacing:.12em}
.content-subtle{font-size:.92rem;color:var(--muted)}
.content-topbar-right{display:flex;gap:10px;flex-wrap:wrap}
.topbar-chip{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);
    color:#dfe7ff;font-size:.92rem;font-weight:700
}
.mobile-menu-button{display:none}

.alert{padding:14px 16px;border-radius:16px;margin-bottom:16px;border:1px solid var(--border);box-shadow:var(--shadow)}
.alert-success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.2)}
.alert-error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.2)}

.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-kicker{font-size:.78rem;font-weight:800;color:#c7d5ff;letter-spacing:.12em;text-transform:uppercase}
.page-title{font-size:2rem;line-height:1.04;letter-spacing:-.04em;margin:6px 0}
.section-title{font-size:1.25rem;letter-spacing:-.02em;margin:0 0 10px}
.section-subtitle{color:var(--muted);line-height:1.7;margin:0}
.card,.metric-card,.history-item,.question-card,.empty-state{
    background:linear-gradient(180deg, rgba(18,29,53,.98), rgba(16,24,45,.92));
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.card{padding:22px}
.metric-card{padding:18px}
.metric-label{font-size:.9rem;color:var(--muted);margin-bottom:8px}
.metric-value{font-size:2rem;font-weight:900;letter-spacing:-.04em}
.stats-grid{display:grid;gap:16px}
.stats-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid{display:grid;gap:18px}
.grid.two-col{grid-template-columns:1.2fr .8fr}
.stack{display:grid;gap:14px}
.activity-link{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--border)
}
.status-badge,.score-badge{
    display:inline-flex;align-items:center;justify-content:center;
    padding:8px 12px;border-radius:999px;font-size:.8rem;font-weight:800
}
.status-published{background:rgba(34,197,94,.14);color:#cbffd7}
.status-draft{background:rgba(245,158,11,.14);color:#ffe3b0}
.status-archived{background:rgba(255,255,255,.08);color:#e2e8f0}
.score-badge{background:rgba(99,102,241,.16);color:#e0e7ff}
.status-badge.status-published{background:rgba(34,197,94,.14);color:#cbffd7}
.status-badge.status-draft{background:rgba(245,158,11,.14);color:#ffe3b0}

.form-grid{display:grid;gap:12px}
.inline-filters{grid-template-columns:repeat(5,minmax(0,1fr))}
.input,.textarea,select{
    width:100%;padding:14px 15px;border-radius:16px;background:rgba(255,255,255,.04);
    border:1px solid var(--border);color:var(--text);outline:none
}
input::placeholder,textarea::placeholder{color:#8da2c5}
.label,.mini-label,.step-label{font-size:.88rem;font-weight:700;color:#d6e2ff}
.step-label{margin-top:8px}
.textarea{resize:vertical;min-height:110px}
.checkbox-row{display:flex;align-items:center;gap:10px;color:var(--muted)}

.button,.icon-button{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    border:none;cursor:pointer;font-weight:800;
    transition:.18s ease
}
.button{
    padding:13px 18px;border-radius:16px
}
.button:hover,.icon-button:hover{transform:translateY(-1px)}
.button-primary{
    color:#fff;background:linear-gradient(180deg,var(--primary),var(--primary-dark));
    box-shadow:0 12px 30px rgba(79,70,229,.28)
}
.button-secondary{
    color:#edf2ff;background:rgba(255,255,255,.05);border:1px solid var(--border)
}
.icon-button{
    width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--border)
}

.history-item{padding:18px}
.history-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.history-block{margin-top:12px;padding:14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--border)}

.empty-state{padding:28px;text-align:center}
.empty-icon{font-size:2rem;margin-bottom:8px}
.empty-title{font-size:1.05rem;font-weight:800;margin-bottom:6px}
.small-empty{padding:20px}

.quiz-progress{height:10px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden;margin-bottom:10px}
.quiz-progress span{display:block;height:100%;background:linear-gradient(180deg,var(--primary),var(--primary-dark));border-radius:999px}
.quiz-progress-text{color:var(--muted);margin-bottom:16px}
.quiz-step{display:none}
.quiz-step.active{display:block}
.question-card{padding:20px}
.question-number{font-size:.9rem;color:#c5d2ef;margin-bottom:10px;font-weight:800}
.question-text{font-size:1.05rem;line-height:1.7;margin-bottom:12px}
.option-buttons{display:grid;gap:10px;margin-top:12px}
.option-btn{padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);text-align:left;cursor:pointer}
.option-btn.selected{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.28)}
.image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.study-image{width:100%;height:auto;border-radius:18px;border:1px solid var(--border);background:#fff}
.timer-box{margin:12px 0 18px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:rgba(245,158,11,.08)}

.tutorial-modal[hidden]{display:none}
.tutorial-modal{position:fixed;inset:0;z-index:100}
.tutorial-backdrop{position:absolute;inset:0;background:rgba(5,8,18,.72);backdrop-filter:blur(4px)}
.tutorial-dialog{
    position:relative;z-index:1;max-width:760px;margin:6vh auto 0;background:linear-gradient(180deg,#121d35,#0f1730);
    border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);overflow:hidden
}
.tutorial-head,.tutorial-foot{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.tutorial-foot{border-bottom:none;border-top:1px solid var(--border);justify-content:flex-end}
.tutorial-body{padding:22px;display:grid;gap:14px;max-height:60vh;overflow:auto}
.tutorial-step{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.tutorial-step-number{
    width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
    background:rgba(99,102,241,.16);font-weight:900
}

@media (max-width:1100px){
    .stats-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid.two-col,.inline-filters{grid-template-columns:1fr}
}
@media (max-width:900px){
    .sidebar{
        position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:.2s ease;z-index:60
    }
    .sidebar.open{transform:translateX(0)}
    .content{padding:16px}
    .mobile-menu-button{display:inline-flex;width:42px;height:42px;border:none;border-radius:12px;background:rgba(255,255,255,.06);color:#fff}
}
@media (max-width:640px){
    .stats-grid.four{grid-template-columns:1fr}
    .page-title{font-size:1.6rem}
    .card,.metric-card,.history-item,.question-card{padding:16px}
}


/* Strong fix for native dropdowns on Windows/Chrome dark UI */
:root{ color-scheme: dark; }
body, input, textarea, select, button { color-scheme: dark; }

select,
select.input{
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    background-color: #16213d !important;
    color: #edf2ff !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}

select option{
    background-color: #16213d !important;
    color: #edf2ff !important;
}

select optgroup{
    background-color: #16213d !important;
    color: #ffffff !important;
}

select:focus,
select.input:focus{
    outline: none !important;
    border-color: rgba(99,102,241,.55) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}



.university-hero{
    display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch;margin-bottom:18px
}
.hero-panel{
    padding:24px;border-radius:24px;border:1px solid var(--border);
    background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(6,182,212,.08), rgba(255,255,255,.03));
    box-shadow:var(--shadow)
}
.hero-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.hero-title{font-size:2.2rem;line-height:1.02;letter-spacing:-.04em;margin:8px 0}
.hero-subtitle{color:var(--muted);line-height:1.7;margin:0;max-width:740px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-badge{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border);font-size:.9rem;font-weight:700;color:#e9eeff}
.hero-side-card{
    padding:20px;border-radius:24px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));box-shadow:var(--shadow)
}
.hero-side-title{font-size:1.05rem;font-weight:800;margin-bottom:12px}
.hero-side-list{display:grid;gap:12px}
.hero-side-item{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pricing-card{
    padding:22px;border-radius:24px;background:linear-gradient(180deg, rgba(17,24,39,.96), rgba(17,24,39,.86));
    border:1px solid var(--border);box-shadow:var(--shadow)
}
.pricing-badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(99,102,241,.16);font-size:.8rem;font-weight:800;color:#dfe3ff}
.pricing-card h3{margin:14px 0 10px;font-size:1.1rem}
.pricing-price{font-size:2rem;font-weight:900;letter-spacing:-.04em}
.pricing-credits{margin:6px 0 10px;color:#dbe5ff;font-weight:700}
@media (max-width:1100px){
  .pricing-grid,.university-hero{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .pricing-grid,.university-hero{grid-template-columns:1fr}
  .hero-title{font-size:1.8rem}
}