* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: #f4f7fb; color: #16233c; }
.hidden { display: none !important; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
#toast { position: fixed; right: 24px; top: 24px; z-index: 99; display: grid; gap: 8px; }
.toast { background: #102f5c; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 12px 28px #0003; }
.toast.error { background: #a92f37; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 0, #173f78, #071a34 70%); }
.login-card { width: min(420px, 92vw); background: #fff; padding: 34px; border-radius: 20px; box-shadow: 0 25px 60px #0005; text-align: center; }
.crest-wrap { margin: 0 auto 14px; display: grid; place-items: center; }
.crest-img { width: 98px; height: 98px; object-fit: contain; display: block; }
.crest-img.small { width: 56px; height: 56px; }
.login-card h1 { margin: 4px 0; }
.login-card p { color: #66738a; }
.login-card input { width: 100%; padding: 14px 15px; margin: 7px 0; border: 1px solid #dce3ee; border-radius: 10px; font-size: 15px; }
.login-card button, .primary { padding: 13px 18px; background: #123b73; color: #fff; border: 0; border-radius: 10px; font-weight: 700; }
.login-card button { width: 100%; margin-top: 8px; }
.login-card #loginError { min-height: 20px; margin-top: 12px; color: #c83b43; }
.app { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }
aside { background: linear-gradient(#153b70, #0b2a52); color: white; padding: 20px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 25px; }
.brand span { display: block; font-size: 11px; opacity: .7; margin-top: 4px; }
nav { display: grid; gap: 7px; }
nav button { border: 0; background: transparent; color: #dce7f6; text-align: left; padding: 13px 14px; border-radius: 9px; font-size: 14px; }
nav button.active, nav button:hover { background: #2c5790; color: #fff; }
.sidebar-card { margin-top: auto; background: #ffffff12; padding: 16px; border: 1px solid #ffffff17; border-radius: 12px; }
.between { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.progress { height: 8px; background: #e8edf5; border-radius: 999px; overflow: hidden; margin: 12px 0; }
.sidebar-card .progress { background: #ffffff22; }
.progress i { display: block; height: 100%; width: 0; background: #4f9cff; border-radius: 999px; }
main { min-width: 0; }
header { height: 92px; background: #fff; border-bottom: 1px solid #e5eaf2; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
header h2 { margin: 0 0 6px; }
header p { margin: 0; color: #7d899d; }
.user { display: flex; align-items: center; gap: 10px; }
.user span { display: block; font-size: 12px; color: #778399; margin-top: 3px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #e8eef7; }
.ghost { background: #edf3fb; border: 0; padding: 9px 12px; border-radius: 8px; }
#content { padding: 28px; }
.hero { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 22px; }
.hero h1 { margin: 0 0 6px; font-size: 28px; }
.hero p { margin: 0; color: #6e7d93; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: #fff; border: 1px solid #e3e8f0; border-radius: 14px; padding: 18px; box-shadow: 0 8px 22px #1c2d4b0a; }
.metric b { font-size: 24px; }
.metric span { display: block; color: #748197; font-size: 13px; margin-bottom: 10px; }
.metric small { color: #7c8798; }
.grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-top: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.course-list { display: grid; gap: 10px; }
.course-item { padding: 12px 0; border-bottom: 1px solid #edf0f5; }
.course-item:last-child { border: 0; }
.course-item .bar { height: 6px; background: #edf1f6; border-radius: 999px; overflow: hidden; margin-top: 7px; }
.course-item .bar i { display: block; height: 100%; background: #42b878; }
.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef3fa; color: #34557d; }
.badge.ok { background: #e4f7ec; color: #1d8b51; }
.badge.bad { background: #fdebed; color: #be3741; }
.badge.warn { background: #fff4dd; color: #a86a00; }
.badge.founder { background: #efe9ff; color: #6441c1; }
.section-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 0 0 14px; }
.section-title h3 { margin: 0; }
.question { background: #fff; border-radius: 14px; border: 1px solid #e3e8f0; overflow: hidden; max-width: 900px; }
.question-head { background: #113a70; color: #fff; padding: 18px; display: flex; justify-content: space-between; gap: 10px; }
.question-body { padding: 24px; }
.answer { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid #e1e7ef; border-radius: 10px; margin: 9px 0; }
.answer:hover { background: #f4f8fd; }
.result-big { font-size: 54px; font-weight: 800; }
.passed { color: #1e9e5a; }
.failed { color: #d94343; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid #e8edf3; font-size: 14px; vertical-align: top; }
th { color: #64738a; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.table-wrap { overflow: auto; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar input, .toolbar select, .admin-form input, .admin-form select, .admin-form textarea, .form-grid input, .form-grid select, .form-grid textarea { padding: 11px; border: 1px solid #d9e1ec; border-radius: 8px; background: #fff; }
.admin-form { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.admin-form .wide { grid-column: span 2; }
.danger { background: #fbeaec; color: #b22f39; border: 0; padding: 8px 10px; border-radius: 8px; }
.small-btn { border: 0; padding: 8px 10px; border-radius: 8px; background: #edf3fb; color: #173f78; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs button { border: 1px solid #dbe3ee; background: #fff; padding: 9px 12px; border-radius: 9px; }
.tabs button.active { background: #123b73; color: #fff; border-color: #123b73; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.note { padding: 12px 14px; border-radius: 10px; background: #f3f7fc; color: #52647d; }
.exam-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.exam-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }
.exam-card h3 { margin: 0 0 8px; }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kv { padding: 14px; border: 1px solid #e7ebf1; border-radius: 10px; }
.kv small { display: block; color: #78869a; margin-bottom: 4px; }
.empty { padding: 30px; text-align: center; color: #748197; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1ebd6d; margin-right: 6px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .admin-form { grid-template-columns: repeat(2, 1fr); }
  .grid3 { grid-template-columns: 1fr; }
  .exam-list { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
  .app { grid-template-columns: 78px 1fr; }
  .brand > div:last-child, nav button span { display: none; }
  .brand .crest-img { margin: auto; }
  .sidebar-card { display: none; }
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .app { display: block; }
  aside { display: none; }
  header { position: static; height: auto; padding: 16px; gap: 10px; align-items: flex-start; }
  .user { flex-wrap: wrap; justify-content: flex-end; }
  .cards { grid-template-columns: 1fr; }
  #content { padding: 16px; }
  .admin-form, .form-grid, .profile-grid { grid-template-columns: 1fr; }
  .admin-form .wide, .form-grid .full { grid-column: auto; }
  .hero { display: block; }
  .question-head { display: grid; }
}
.badge.chief{background:#e9eefc;color:#284a9b}.badge.deputy{background:#eef6ff;color:#326ca8}

.course-block{padding:8px 0 18px;border-bottom:1px solid #edf0f5}.course-block:last-child{border-bottom:0}.course-block h3{margin:0}.course-item select{padding:8px 10px;border:1px solid #d9e1ec;border-radius:8px;background:#fff;color:#16233c;min-width:130px}

/* v9: global light/dark theme switch */
.theme-toggle{position:fixed;right:22px;bottom:22px;z-index:120;border:1px solid #d8e1ee;background:#fff;color:#17385f;border-radius:999px;padding:11px 15px;display:flex;align-items:center;gap:8px;font-weight:700;box-shadow:0 8px 24px #0b1f3b24;min-height:44px}
.theme-toggle:hover{background:#f2f6fb}.theme-toggle span{white-space:nowrap}
body,body *{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
body.dark-theme{background:#0b1220;color:#e8eef8}
body.dark-theme .login-wrap{background:radial-gradient(circle at 50% 0,#183a66,#070d18 72%)}
body.dark-theme .login-card,body.dark-theme header,body.dark-theme .card,body.dark-theme .question,body.dark-theme .tabs button,body.dark-theme .toolbar input,body.dark-theme .toolbar select,body.dark-theme .admin-form input,body.dark-theme .admin-form select,body.dark-theme .admin-form textarea,body.dark-theme .form-grid input,body.dark-theme .form-grid select,body.dark-theme .form-grid textarea,body.dark-theme .course-item select{background:#111b2c;color:#e8eef8;border-color:#26364e}
body.dark-theme header{border-bottom-color:#26364e}
body.dark-theme header p,body.dark-theme .login-card p,body.dark-theme .hero p,body.dark-theme .metric span,body.dark-theme .metric small,body.dark-theme .user span,body.dark-theme .kv small,body.dark-theme .empty{color:#9baac1}
body.dark-theme .login-card input{background:#0d1726;color:#eef4ff;border-color:#2a3a52}
body.dark-theme .login-card input::placeholder,body.dark-theme input::placeholder,body.dark-theme textarea::placeholder{color:#718099}
body.dark-theme .ghost,body.dark-theme .small-btn{background:#1a2a40;color:#dbe9ff}
body.dark-theme .note{background:#17243a;color:#bccbe0}
body.dark-theme .course-item,body.dark-theme th,body.dark-theme td,body.dark-theme .course-block{border-color:#26364e}
body.dark-theme th{color:#92a3ba}
body.dark-theme .progress,body.dark-theme .course-item .bar{background:#26364e}
body.dark-theme .answer{background:#111b2c;border-color:#2b3b53;color:#e8eef8}
body.dark-theme .answer:hover{background:#18253a}
body.dark-theme .kv{border-color:#26364e;background:#0f1929}
body.dark-theme .badge{background:#1c2b43;color:#bfd3ef}
body.dark-theme .badge.ok{background:#123423;color:#72d69b}
body.dark-theme .badge.bad{background:#3a1d23;color:#ff9aa3}
body.dark-theme .badge.warn{background:#3a301b;color:#ffd27b}
body.dark-theme .badge.founder{background:#2a2143;color:#cbb8ff}
body.dark-theme .badge.chief{background:#202c4b;color:#a9bfff}
body.dark-theme .badge.deputy{background:#172d44;color:#9bc9f3}
body.dark-theme .theme-toggle{background:#17243a;color:#f3f7ff;border-color:#34465f;box-shadow:0 8px 24px #0008}
body.dark-theme .theme-toggle:hover{background:#1e2f49}
body.dark-theme main{background:#0b1220}
body.dark-theme .question-head{background:#142f52}
body.dark-theme .danger{background:#3a1c22;color:#ff9da5}
body.dark-theme .tabs button.active{background:#285d9e;color:#fff;border-color:#285d9e}
@media(max-width:650px){.theme-toggle{right:14px;bottom:14px;padding:10px 12px}.theme-toggle span{display:none}}
.profile-shortcut{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:inherit;padding:6px 8px;border-radius:10px;text-align:left;min-width:0}.profile-shortcut:hover{background:#edf3fb}.profile-shortcut:focus-visible{outline:2px solid #4f9cff;outline-offset:2px}.profile-shortcut-text{min-width:0}.profile-shortcut-text b{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.dark-theme .profile-shortcut:hover{background:#1b2940}
