/* ===== Sotuv San'ati — Platforma dizayn tizimi ===== */
:root{
  --ivory:#F7F4EE;
  --ivory-2:#FFFFFF;
  --ink:#17140F;
  --ink-2:#221D14;
  --terracotta:#C15A2A;
  --terracotta-dark:#9C4620;
  --line:#E3DED2;
  --muted:#5B5646;
  --muted-2:#8A8370;
  --muted-3:#A79F8C;
  --pale:#C9C2AE;
  --good:#3F7D5C;
  --good-bg:#E7F1EB;
  --warn:#B4772A;
  --warn-bg:#F5EADA;
  --bad:#B84A3E;
  --bad-bg:#F6E6E3;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:24px;
  --shadow-s:0 1px 2px rgba(23,20,15,.06), 0 1px 1px rgba(23,20,15,.04);
  --shadow-m:0 8px 24px rgba(23,20,15,.08);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background:var(--ivory);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }
h1,h2,h3,h4,p,ul,ol{ margin:0; }
ul,ol{ padding-left:1.2em; }

::selection{ background:#E9CBB8; color:var(--ink); }

/* ---- boot ---- */
.boot-screen{
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; background:var(--ink); color:var(--ivory); z-index:50;
}
.boot-mark{ width:64px; height:64px; border-radius:16px; background:var(--ink-2); display:flex; align-items:center; justify-content:center; }
.boot-text{ font-size:14px; color:var(--muted-3); letter-spacing:.3px; }

/* ---- toast ---- */
.toast-root{ position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:360px; }
.toast{
  background:var(--ink); color:var(--ivory); padding:13px 18px; border-radius:var(--radius-s);
  box-shadow:var(--shadow-m); font-size:14px; line-height:1.5; animation:toast-in .25s ease;
}
.toast.toast-bad{ background:var(--bad); }
.toast.toast-good{ background:var(--good); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;} }

/* ===================== AUTH SCREEN ===================== */
.auth-wrap{
  min-height:100vh; display:flex;
}
.auth-side{
  flex:1.1; background:var(--ink); color:var(--ivory); display:flex; flex-direction:column;
  justify-content:space-between; padding:56px 52px; position:relative; overflow:hidden;
}
.auth-side::after{
  content:""; position:absolute; right:-120px; bottom:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(193,90,42,.22), transparent 70%);
}
.auth-brand{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.auth-brand-mark{ width:40px; height:40px; border-radius:11px; background:var(--ink-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.auth-brand-name{ font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted-3); }
.auth-hero{ position:relative; z-index:1; max-width:460px; }
.auth-hero-eyebrow{ font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--terracotta); margin-bottom:18px; }
.auth-hero h1{ font-size:40px; font-weight:800; line-height:1.15; letter-spacing:-.5px; margin-bottom:18px; }
.auth-hero p{ font-size:16px; line-height:1.65; color:var(--pale); }
.auth-foot{ position:relative; z-index:1; font-size:13px; color:var(--muted-2); }
.auth-form-col{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px 32px; background:var(--ivory); }
.auth-card{ width:100%; max-width:400px; }
.auth-card h2{ font-size:26px; font-weight:800; margin-bottom:6px; }
.auth-card .sub{ color:var(--muted); font-size:14.5px; margin-bottom:28px; }
.auth-tabs{ display:flex; gap:6px; background:var(--line); padding:4px; border-radius:12px; margin-bottom:26px; }
.auth-tab{
  flex:1; border:0; background:transparent; padding:10px 0; border-radius:9px; font-size:14px; font-weight:600;
  color:var(--muted); cursor:pointer; transition:.15s;
}
.auth-tab.active{ background:var(--ivory-2); color:var(--ink); box-shadow:var(--shadow-s); }

/* ===================== FORM ELEMENTS ===================== */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:11px; border:1.5px solid var(--line); background:var(--ivory-2);
  font-size:15px; font-family:inherit; color:var(--ink); transition:.15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(193,90,42,.12); }
.field .hint{ font-size:12.5px; color:var(--muted-2); margin-top:6px; }
.field .err{ font-size:12.5px; color:var(--bad); margin-top:6px; display:none; }
.field.has-err input{ border-color:var(--bad); }
.field.has-err .err{ display:block; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12.5px 22px; border-radius:11px; border:0; font-size:15px; font-weight:600;
  cursor:pointer; transition:.15s; font-family:inherit; line-height:1;
}
.btn-primary{ background:var(--terracotta); color:#fff; }
.btn-primary:hover{ background:var(--terracotta-dark); }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; }
.btn-dark{ background:var(--ink); color:var(--ivory); }
.btn-dark:hover{ background:var(--ink-2); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:13.5px; border-radius:9px; }
.btn-danger{ background:var(--bad-bg); color:var(--bad); }
.btn-danger:hover{ background:#f0d3ce; }
.btn-icon{ width:36px; height:36px; padding:0; border-radius:9px; }

/* ===================== APP SHELL ===================== */
.shell{ display:flex; min-height:100vh; }
.sidebar{
  width:264px; flex-shrink:0; background:var(--ink); color:var(--ivory); display:flex; flex-direction:column;
  padding:26px 18px; position:sticky; top:0; height:100vh;
}
.sb-brand{ display:flex; align-items:center; gap:11px; padding:6px 10px 26px; }
.sb-brand-mark{ width:36px; height:36px; border-radius:10px; background:var(--ink-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-brand-text{ line-height:1.25; }
.sb-brand-text b{ display:block; font-size:14.5px; font-weight:700; }
.sb-brand-text span{ font-size:11.5px; color:var(--muted-3); letter-spacing:.5px; }
.sb-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.sb-link{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; color:var(--pale);
  text-decoration:none; font-size:14.5px; font-weight:500; cursor:pointer; border:0; background:transparent;
  width:100%; text-align:left; font-family:inherit; transition:.12s;
}
.sb-link:hover{ background:var(--ink-2); color:var(--ivory); }
.sb-link.active{ background:var(--terracotta); color:#fff; }
.sb-link svg{ flex-shrink:0; }
.sb-user{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; background:var(--ink-2); margin-top:10px; }
.sb-avatar{ width:34px; height:34px; border-radius:50%; background:var(--terracotta); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; overflow:hidden; }
.sb-avatar img{ width:100%; height:100%; object-fit:cover; }
.sb-user-name{ font-size:13.5px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-user-role{ font-size:11.5px; color:var(--muted-3); }
.sb-logout{ background:transparent; border:0; color:var(--muted-3); cursor:pointer; padding:6px; border-radius:7px; flex-shrink:0; }
.sb-logout:hover{ color:var(--ivory); background:rgba(255,255,255,.08); }

.main{ flex:1; min-width:0; }
.topbar{
  display:none; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--ink); color:var(--ivory); position:sticky; top:0; z-index:20;
}
.topbar-burger{ background:transparent; border:0; color:var(--ivory); cursor:pointer; padding:6px; }
.content{ padding:36px 44px 80px; max-width:1180px; }

.page-head{ margin-bottom:30px; }
.page-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--terracotta); margin-bottom:8px; }
.page-head h1{ font-size:30px; font-weight:800; letter-spacing:-.5px; }
.page-head p{ color:var(--muted); margin-top:8px; font-size:15px; max-width:640px; line-height:1.6; }

/* ===================== CARDS / GRID ===================== */
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:var(--ivory-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:24px;
}
.card-flat{ background:var(--ivory-2); border:1px solid var(--line); border-radius:var(--radius-m); }

.stat-card{ display:flex; flex-direction:column; gap:10px; }
.stat-icon{ width:38px; height:38px; border-radius:10px; background:#F1E4D8; color:var(--terracotta); display:flex; align-items:center; justify-content:center; }
.stat-value{ font-size:30px; font-weight:800; letter-spacing:-.5px; }
.stat-label{ font-size:13px; color:var(--muted); font-weight:500; }

.module-card{
  display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:var(--radius-m);
  background:var(--ivory-2); border:1px solid var(--line); text-decoration:none; color:inherit; cursor:pointer;
  transition:.15s;
}
.module-card:hover{ border-color:var(--terracotta); box-shadow:var(--shadow-m); transform:translateY(-1px); }
.module-card.locked{ opacity:.55; cursor:not-allowed; }
.module-card.locked:hover{ border-color:var(--line); box-shadow:none; transform:none; }
.module-num{ font-size:12px; font-weight:700; letter-spacing:2px; color:var(--terracotta); text-transform:uppercase; }
.module-card h3{ font-size:18px; font-weight:700; line-height:1.35; }
.module-card p{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.module-progress-row{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.progress-track{ flex:1; height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
.progress-fill{ height:100%; background:var(--terracotta); border-radius:6px; transition:width .3s; }
.progress-pct{ font-size:12.5px; font-weight:700; color:var(--muted); flex-shrink:0; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.badge-good{ background:var(--good-bg); color:var(--good); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-bad{ background:var(--bad-bg); color:var(--bad); }
.badge-neutral{ background:var(--line); color:var(--muted); }

/* ===================== TABLE ===================== */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--ivory-2); }
table{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
th{ text-align:left; padding:14px 18px; font-size:11.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--muted-2); border-bottom:1px solid var(--line); white-space:nowrap; }
td{ padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td{ border-bottom:0; }
tr.clickable{ cursor:pointer; }
tr.clickable:hover td{ background:#FBF9F5; }
.td-name{ display:flex; align-items:center; gap:10px; font-weight:600; }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* ===================== MODULE / LESSON PAGE ===================== */
.lesson-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:28px; overflow-x:auto; }
.lesson-tab{
  padding:12px 4px; margin-right:26px; border:0; background:transparent; font-size:14.5px; font-weight:600;
  color:var(--muted); cursor:pointer; border-bottom:2.5px solid transparent; white-space:nowrap; font-family:inherit;
}
.lesson-tab.active{ color:var(--ink); border-color:var(--terracotta); }
.lesson-text{ font-size:15.5px; line-height:1.85; color:#2A251C; max-width:760px; }
.lesson-text h4{ font-size:18px; font-weight:700; margin:28px 0 12px; color:var(--ink); }
.lesson-text h4:first-child{ margin-top:0; }
.lesson-text p{ margin-bottom:16px; }

.video-box{
  display:flex; align-items:center; gap:16px; padding:20px 22px; background:var(--ink); color:var(--ivory);
  border-radius:var(--radius-m); max-width:560px; text-decoration:none;
}
.video-play{ width:48px; height:48px; border-radius:50%; background:var(--terracotta); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.video-box b{ display:block; font-size:15px; }
.video-box span{ font-size:12.5px; color:var(--muted-3); }
.video-empty{ padding:20px 22px; border:1.5px dashed var(--line); border-radius:var(--radius-m); color:var(--muted-2); font-size:14px; max-width:560px; }

.pdf-box{
  display:flex; align-items:center; gap:16px; padding:18px 22px; background:var(--ivory-2); border:1px solid var(--line);
  border-radius:var(--radius-m); max-width:560px;
}
.pdf-icon{ width:44px; height:44px; border-radius:10px; background:#F1E4D8; color:var(--terracotta); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.qz-item{ padding:20px 0; border-bottom:1px solid var(--line); }
.qz-item:last-child{ border-bottom:0; }
.qz-q{ font-size:15.5px; font-weight:600; margin-bottom:14px; }
.qz-opts{ display:flex; flex-direction:column; gap:9px; }
.qz-opt{
  display:flex; align-items:center; gap:11px; padding:12px 14px; border:1.5px solid var(--line); border-radius:11px;
  cursor:pointer; font-size:14.5px; transition:.12s;
}
.qz-opt:hover{ border-color:var(--muted-3); }
.qz-opt input{ accent-color:var(--terracotta); width:16px; height:16px; flex-shrink:0; }
.qz-opt.selected{ border-color:var(--terracotta); background:#FBF1EA; }
.qz-opt.correct{ border-color:var(--good); background:var(--good-bg); }
.qz-opt.incorrect{ border-color:var(--bad); background:var(--bad-bg); }
.qz-result-banner{ padding:22px 24px; border-radius:var(--radius-m); margin-bottom:26px; display:flex; align-items:center; gap:18px; }
.qz-result-banner.good{ background:var(--good-bg); }
.qz-result-banner.warn{ background:var(--warn-bg); }
.qz-result-score{ font-size:32px; font-weight:800; }

.hw-item{ padding:22px 0; border-bottom:1px solid var(--line); }
.hw-item:last-child{ border-bottom:0; }
.hw-q-num{ font-size:12px; font-weight:700; color:var(--terracotta); letter-spacing:1px; margin-bottom:6px; }
.hw-q-text{ font-size:15px; font-weight:600; margin-bottom:14px; line-height:1.5; }
.hw-upload-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.file-input-label{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border:1.5px dashed var(--line);
  border-radius:11px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--muted); background:var(--ivory-2);
}
.file-input-label:hover{ border-color:var(--terracotta); color:var(--terracotta); }
.file-input-label input{ display:none; }
.hw-file-chip{ display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--good-bg); color:var(--good); border-radius:10px; font-size:13.5px; font-weight:600; }
.hw-audio-player{ margin-top:12px; width:100%; max-width:420px; }
.hw-grade-box{ margin-top:14px; padding:14px 16px; background:#FBF9F5; border-radius:11px; border:1px solid var(--line); }
.hw-grade-box.graded{ background:var(--good-bg); border-color:transparent; }

/* ===================== MODALS ===================== */
.modal-backdrop{ position:fixed; inset:0; background:rgba(23,20,15,.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal{ background:var(--ivory-2); border-radius:var(--radius-l); padding:30px; width:100%; max-width:460px; max-height:88vh; overflow-y:auto; }
.modal h3{ font-size:20px; font-weight:800; margin-bottom:20px; }
.modal-actions{ display:flex; gap:10px; margin-top:22px; justify-content:flex-end; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--muted-2); }
.empty-state svg{ margin-bottom:14px; opacity:.5; }

.avatar-upload{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.avatar-preview{ width:64px; height:64px; border-radius:50%; background:var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; font-weight:700; color:var(--muted); }
.avatar-preview img{ width:100%; height:100%; object-fit:cover; }

.section-title{ font-size:20px; font-weight:800; margin-bottom:18px; }
.divider{ height:1px; background:var(--line); margin:30px 0; }

.detail-back{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; margin-bottom:18px; cursor:pointer; background:none; border:0; padding:0; font-family:inherit; }
.detail-back:hover{ color:var(--ink); }

.answer-block{ padding:18px; border:1px solid var(--line); border-radius:var(--radius-m); margin-bottom:14px; }
.answer-block-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .sidebar{ position:fixed; left:0; top:0; z-index:40; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--shadow-m); }
  .sidebar.open{ transform:none; }
  .topbar{ display:flex; }
  .content{ padding:24px 18px 70px; }
  .grid-4,.grid-3{ grid-template-columns:1fr 1fr; }
  .auth-side{ display:none; }
  .auth-form-col{ padding:28px 20px; }
}
@media (max-width: 560px){
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; }
  .content{ padding:20px 14px 60px; }
  .page-head h1{ font-size:24px; }
}

/* ============================================================================
   SOTUV MENEJERI — ISHGA QABUL QILISH MODULI (ommaviy ariza sahifasi)
   ============================================================================ */
.career-page{ min-height:100vh; background:var(--ivory); }
.career-header{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 24px; background:var(--ink); color:var(--ivory); position:sticky; top:0; z-index:10;
}
.career-brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.career-progress{ display:flex; align-items:center; gap:12px; flex:1; max-width:320px; }
.career-progress .progress-track{ background:var(--ink-2); }
.career-progress .progress-pct{ color:var(--muted-3); }
.career-body{ max-width:760px; margin:0 auto; padding:40px 20px 80px; }
.career-hero{ text-align:center; }
.career-hero-eyebrow{ font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--terracotta); margin-bottom:14px; }
.career-hero h1{ font-size:32px; font-weight:800; letter-spacing:-.5px; margin-bottom:16px; }
.career-hero-desc{ color:var(--muted); font-size:16px; line-height:1.65; max-width:560px; margin:0 auto 24px; }
.career-video-placeholder{
  width:100%; aspect-ratio:16/9; background:var(--ink); color:var(--muted-3); border-radius:var(--radius-m);
  display:flex; align-items:center; justify-content:center; font-size:14px; margin:0 auto 24px; max-width:640px;
}
.career-bullets{ list-style:none; text-align:left; max-width:420px; margin:0 auto 28px; display:flex; flex-direction:column; gap:10px; }
.career-bullets li{ padding-left:26px; position:relative; color:var(--ink); font-size:15px; }
.career-bullets li::before{ content:"✓"; position:absolute; left:0; color:var(--terracotta); font-weight:800; }
.career-qlist{ display:flex; flex-direction:column; gap:26px; margin-bottom:24px; }
.career-question-text{ font-size:16px; font-weight:700; margin-bottom:12px; line-height:1.45; }
.career-options{ display:flex; flex-direction:column; gap:8px; }
.career-option{
  text-align:left; padding:12px 14px; border-radius:11px; border:1.5px solid var(--line); background:var(--ivory-2);
  font-size:14.5px; font-family:inherit; color:var(--ink); cursor:pointer; transition:.15s;
}
.career-option:hover{ border-color:var(--terracotta); }
.career-option.selected{ border-color:var(--terracotta); background:#FBEEE6; font-weight:600; }
@media (max-width:560px){
  .career-header{ padding:12px 16px; flex-wrap:wrap; }
  .career-progress{ max-width:none; width:100%; order:3; }
  .career-hero h1{ font-size:26px; }
  .career-body{ padding:28px 14px 60px; }
}