:root{
    --navy:#151d32;
    --navy-soft:#202b45;
    --blue:#316bf4;
    --blue-soft:#edf3ff;
    --pink:#ec4da4;
    --pink-soft:#fff0f8;
    --orange:#f28b28;
    --orange-soft:#fff5e8;
    --green:#2fb66d;
    --green-soft:#eaf8f0;
    --purple:#7d50f5;
    --purple-soft:#f2edff;
    --red:#e74848;
    --yellow:#eeb91d;
    --surface:#fff;
    --background:#f4f7fb;
    --border:#e4e9f2;
    --text:#162038;
    --muted:#718096;
    --shadow:0 14px 35px rgba(25,42,70,.08);
    --sidebar-width:268px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--background);color:var(--text)}
button,input,select,textarea{font:inherit}
a{color:inherit}

.app-shell{min-height:100vh;display:flex}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);display:flex;flex-direction:column;background:linear-gradient(180deg,#17213a 0%,#111827 100%);color:#fff;z-index:50}
.brand{display:flex;gap:13px;align-items:center;padding:19px 17px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-logo{width:62px;height:62px;border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.brand-logo img{width:100%;height:100%;object-fit:contain;padding:4px}
.brand-text strong,.brand-text span{display:block}
.brand-text strong{font-size:14px}
.brand-text span{margin-top:4px;font-size:10px;color:#aeb8ca}

.main-nav{padding:20px 11px;flex:1;overflow:auto}
.nav-label{padding:0 11px 8px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8592a8;font-weight:800}
.nav-label-space{margin-top:22px}
.nav-link{display:flex;align-items:center;gap:11px;padding:11px 12px;margin:3px 0;border-radius:12px;text-decoration:none;color:#d6ddeb;transition:.18s}
.nav-link:hover,.nav-link.is-active{background:rgba(255,255,255,.10);color:#fff}
.nav-link.is-active{box-shadow:inset 3px 0 0 #f3c229}
.nav-symbol{width:23px;text-align:center;font-size:17px}
.nav-pill{margin-left:auto;padding:3px 7px;border-radius:999px;font-size:8px;background:rgba(255,255,255,.12);color:#c8d1df}
.sidebar-bottom{padding:15px;border-top:1px solid rgba(255,255,255,.08)}
.year-card{padding:13px;border-radius:13px;background:rgba(255,255,255,.07)}
.year-card span,.year-card strong,.year-card small{display:block}
.year-card span{font-size:9px;color:#98a5ba;text-transform:uppercase;letter-spacing:.08em}
.year-card strong{margin:5px 0;font-size:15px}
.year-card small{font-size:9px;color:#76e0a7}

.workspace{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));min-height:100vh;display:flex;flex-direction:column}
.topbar{height:88px;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(340px,650px) auto;gap:22px;align-items:center;padding:0 28px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.topbar-title{display:flex;align-items:center;gap:12px}
.topbar-title span{font-size:9px;color:#8290a5;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.topbar-title h1{margin:4px 0 0;font-size:21px}
.mobile-menu{display:none;border:0;background:#f1f4f9;border-radius:9px;padding:8px}
.global-search{height:45px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:13px;background:#f3f6fb}
.global-search input{flex:1;border:0;outline:0;background:transparent}
.global-search kbd{padding:4px 7px;border:1px solid #dce3ee;background:#fff;border-radius:7px;font-size:9px;color:#8491a4}
.topbar-user{display:flex;align-items:center;gap:9px}
.notification{position:relative;border:0;background:#f3f6fb;border-radius:10px;padding:9px}
.notification i{position:absolute;right:6px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid #fff}
.avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#edf2ff,#fff1ca);color:var(--blue);font-weight:900}
.user-text strong,.user-text span{display:block}
.user-text strong{font-size:11px}
.user-text span{margin-top:2px;font-size:9px;color:var(--muted)}
.logout-button{border:0;background:#f3f6fb;padding:8px 10px;border-radius:9px;font-size:10px}

.content{padding:28px;flex:1}
.footer{display:flex;justify-content:space-between;padding:17px 28px;background:#fff;border-top:1px solid var(--border);color:var(--muted);font-size:10px}

.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:29px 31px;border-radius:24px;background:linear-gradient(115deg,#306af2 0%,#7c4df5 53%,#ec4da4 100%);color:#fff;box-shadow:0 20px 40px rgba(111,73,225,.22)}
.hero-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.75);font-weight:800}
.hero h2{margin:7px 0 6px;font-size:32px}
.hero p{margin:0;color:rgba(255,255,255,.88)}
.hero-actions{display:flex;gap:10px;margin-top:21px}
.hero-illustration{display:flex;gap:12px}
.hero-illustration div{width:66px;height:66px;display:grid;place-items:center;border-radius:19px;background:rgba(255,255,255,.17);font-size:36px;transform:rotate(-4deg)}
.button{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;border-radius:11px;border:1px solid transparent;text-decoration:none;font-weight:750;cursor:pointer}
.button-white{background:#fff;color:#4939bf}
.button-glass{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.button-primary{background:linear-gradient(120deg,var(--blue),var(--purple));color:#fff;box-shadow:0 8px 18px rgba(49,107,244,.20)}
.button-secondary{background:#fff;border-color:var(--border);color:var(--text)}

.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:19px 0}
.metric{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--border);border-radius:17px;background:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.metric:before{content:"";position:absolute;inset:0 auto 0 0;width:5px}
.metric-blue:before{background:var(--blue)}
.metric-pink:before{background:var(--pink)}
.metric-orange:before{background:var(--orange)}
.metric-green:before{background:var(--green)}
.metric-icon{width:47px;height:47px;border-radius:15px;display:grid;place-items:center;background:#f5f7fb;font-size:20px}
.metric span,.metric small{display:block}
.metric span{font-size:11px;color:var(--muted)}
.metric strong{display:block;font-size:26px;margin:2px 0}
.metric small{font-size:9px;color:#98a4b4}

.dashboard-columns{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.8fr);gap:18px}
.dashboard-side{display:grid;gap:18px;align-content:start}
.card{background:#fff;border:1px solid var(--border);border-radius:19px;padding:21px;box-shadow:var(--shadow)}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}
.card-header span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#8a96a9;font-weight:800}
.card-header h3{margin:5px 0 0;font-size:18px}
.card-header a{font-size:10px;color:var(--blue);text-decoration:none;font-weight:750}

.timeline{display:grid;gap:11px}
.timeline-item{display:grid;grid-template-columns:55px 12px 1fr;gap:12px;align-items:center;padding:13px;border-radius:14px;background:#f8faff;border:1px solid #edf1f7}
.timeline-item time{font-weight:850;color:#43506a}
.timeline-item strong,.timeline-item span{display:block}
.timeline-item span{margin-top:4px;font-size:10px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%}
.dot-purple{background:var(--purple)}
.dot-blue{background:var(--blue)}
.dot-pink{background:var(--pink)}

.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quick-grid a{padding:13px;border:1px solid var(--border);border-radius:14px;text-decoration:none;background:#fbfcff;transition:.18s}
.quick-grid a:hover{transform:translateY(-2px);border-color:#cbd7ef;box-shadow:0 9px 18px rgba(40,63,99,.07)}
.quick-grid i{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-style:normal;font-size:18px}
.quick-grid strong,.quick-grid small{display:block}
.quick-grid strong{margin-top:9px;font-size:11px}
.quick-grid small{margin-top:3px;font-size:9px;color:var(--muted)}

.alert-count{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#feecec;color:var(--red);font-size:11px}
.alert-list{display:grid;gap:9px}
.alert-list a{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--border);border-radius:13px;text-decoration:none}
.alert-list i{width:8px;height:8px;border-radius:50%}
.alert-list i.red{background:var(--red)}
.alert-list i.orange{background:var(--orange)}
.alert-list i.yellow{background:var(--yellow)}
.alert-list strong,.alert-list span{display:block}
.alert-list strong{font-size:11px}
.alert-list span{margin-top:3px;font-size:9px;color:var(--muted)}

.page-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.page-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#8491a5;font-weight:800}
.page-intro h2{font-size:29px;margin:7px 0}
.page-intro p{margin:0;color:var(--muted)}

.v4-form{display:grid;gap:17px}
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.form-card-header{display:grid;grid-template-columns:40px 1fr 44px;gap:14px;align-items:center;margin-bottom:22px}
.form-card-header h3{margin:0 0 4px;font-size:18px}
.form-card-header p{margin:0;color:var(--muted);font-size:11px}
.form-step{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--blue);color:#fff;font-weight:900}
.form-step.pink{background:var(--pink)}
.form-step.orange{background:var(--orange)}
.form-step.green{background:var(--green)}
.form-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--blue-soft);color:var(--blue);font-size:19px}
.form-icon.pink{background:var(--pink-soft);color:var(--pink)}
.form-icon.orange{background:var(--orange-soft);color:var(--orange)}
.form-icon.green{background:var(--green-soft);color:var(--green)}

.form-grid{display:grid;gap:15px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:grid;gap:7px}
.field>span{font-size:10px;font-weight:800;color:#4d596d}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:11px;padding:11px 12px;background:#fff;outline:0;color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#a7bbef;box-shadow:0 0 0 4px rgba(49,107,244,.08)}
.field textarea{resize:vertical}

.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-bottom:17px}
.choice-card{display:flex;gap:11px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:14px;background:#fbfcff;cursor:pointer}
.choice-card input{margin-top:10px}
.choice-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;font-style:normal}
.choice-icon.blue{background:var(--blue-soft);color:var(--blue)}
.choice-icon.pink{background:var(--pink-soft);color:var(--pink)}
.choice-card strong,.choice-card small{display:block}
.choice-card strong{font-size:11px}
.choice-card small{margin-top:4px;font-size:9px;color:var(--muted);line-height:1.4}

.sticky-actions{position:sticky;bottom:15px;display:flex;justify-content:flex-end;gap:10px;padding:14px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(30,45,70,.13)}

.alert{padding:13px 16px;border-radius:12px;margin-bottom:16px}
.alert-error{background:#feecec;color:#991b1b}
.alert-success{background:var(--green-soft);color:#166534}

.profile-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px;border-radius:21px;background:linear-gradient(120deg,#fff,#f2f5ff);border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:18px}
.profile-main{display:flex;align-items:center;gap:16px}
.profile-avatar-large{width:72px;height:72px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,var(--blue-soft),var(--purple-soft));color:var(--blue);font-size:24px;font-weight:900;text-transform:uppercase}
.profile-code{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#8491a5;font-weight:800}
.profile-main h2{margin:5px 0;font-size:27px}
.profile-main p{margin:0;color:var(--muted)}
.profile-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tag{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:800}
.tag.green{background:var(--green-soft);color:#168347}
.tag.blue{background:var(--blue-soft);color:var(--blue)}
.tag.pink{background:var(--pink-soft);color:var(--pink)}
.profile-actions{display:flex;gap:9px}

.profile-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.75fr);gap:18px}
.profile-content,.profile-sidebar{display:grid;gap:18px;align-content:start}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.info-grid>div{padding:13px 0;border-bottom:1px solid var(--border)}
.info-grid dt{font-size:9px;color:var(--muted);margin-bottom:5px}
.info-grid dd{margin:0;font-weight:750;font-size:11px}
.counter{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:11px}

.course-list{display:grid;gap:10px}
.course-list article{display:grid;grid-template-columns:44px 1fr 120px auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px}
.course-symbol{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#f5f7fb}
.course-list strong,.course-list span{display:block}
.course-list span{margin-top:3px;font-size:9px;color:var(--muted)}
.course-time{text-align:right}
.course-time strong{font-size:10px}
.course-time span{font-size:10px}

.mini-agenda{display:grid;gap:9px}
.mini-agenda article{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:10px;border-radius:12px;background:#f8faff}
.mini-agenda time{font-weight:850;color:var(--blue)}
.mini-agenda strong,.mini-agenda span{display:block}
.mini-agenda strong{font-size:10px}
.mini-agenda span{margin-top:3px;font-size:9px;color:var(--muted)}
.empty-mini{padding:20px;text-align:center;color:var(--muted);font-size:10px}

.document-status{display:grid;gap:10px}
.document-status div{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--border)}
.document-status i{width:8px;height:8px;border-radius:50%}
.document-status i.ok{background:var(--green)}
.document-status i.missing{background:var(--red)}
.document-status i.neutral{background:#a4afbf}
.document-status span{font-size:10px}
.document-status strong{font-size:9px;color:var(--muted)}

.empty-v4{text-align:center;padding:35px 15px}
.empty-v4 div{font-size:35px}
.empty-v4 strong,.empty-v4 span{display:block}
.empty-v4 strong{margin-top:10px}
.empty-v4 span{margin-top:5px;color:var(--muted);font-size:10px}

.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px;background:linear-gradient(135deg,#eef3ff,#fff1f8)}

@media(max-width:1250px){
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .metric-grid{grid-template-columns:repeat(2,1fr)}
    .topbar{grid-template-columns:1fr minmax(280px,420px) auto}
}

@media(max-width:1000px){
    .sidebar{transform:translateX(-100%);transition:.25s}
    .sidebar.is-open{transform:translateX(0)}
    .workspace{margin-left:0;width:100%}
    .mobile-menu{display:inline-flex}
    .topbar{grid-template-columns:1fr auto}
    .global-search{display:none}
    .dashboard-columns,.profile-layout{grid-template-columns:1fr}
}

@media(max-width:680px){
    .content{padding:16px}
    .topbar{padding:0 15px}
    .user-text,.logout-button{display:none}
    .hero,.page-intro,.profile-hero{flex-direction:column;align-items:flex-start}
    .hero-illustration div{width:50px;height:50px;font-size:27px}
    .metric-grid,.grid-4,.grid-2,.choice-grid,.info-grid{grid-template-columns:1fr}
    .course-list article{grid-template-columns:42px 1fr}
    .course-time,.course-list .tag{display:none}
    .sticky-actions{flex-direction:column-reverse}
    .sticky-actions .button{width:100%}
    .footer{flex-direction:column;gap:4px}
}