:root{
  --brand-primary:#9a3412;
  --brand-secondary:#0f766e;
  --app-surface:#f6f7fb;
  --app-panel:#0f172a;
  --app-text:#111827;
  --app-muted:#64748b;
  --app-line:#d7deea;
  --app-card:#ffffff;
  --app-soft:#eef2ff;
  --app-ok:#15803d;
  --app-bad:#b91c1c;
  --app-warn:#b45309;
  --app-shadow:0 22px 60px rgba(15, 23, 42, 0.10);
  --app-shadow-soft:0 14px 40px rgba(15, 23, 42, 0.08);
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:12px;

  /* ---- Гадаргуу / текст / зураас / төлөвийн токенууд (цайвар) ---- */
  color-scheme:light;
  --surface:#ffffff;
  --surface-glass:rgba(255,255,255,.92);
  --surface-2:#f8fafc;
  --surface-3:#f1f5f9;
  --surface-4:#e2e8f0;
  --text:#0f172a;
  --text-2:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --ok-bg:#ecfdf3;   --ok-fg:#166534;   --ok-line:#bbf7d0;
  --bad-bg:#fef2f2;  --bad-fg:#991b1b;  --bad-line:#fecaca;
  --info-bg:#eff6ff; --info-fg:#1d4ed8; --info-line:#bfdbfe;
  --warn-bg:#fff7ed; --warn-fg:#9a3412; --warn-line:#fed7aa;
  --teal-bg:#f0fdfa; --teal-fg:#0f766e;
  --link:var(--brand-primary);

  /* evaluation_entry.php-ийн токенууд — бусад хуудас (assistant.php) ч ашигладаг тул энд үндсэн утгатай. */
  --bg-app:var(--app-surface);
  --bg-card:#ffffff;
  --bg-input:#ffffff;
  --border-light:#e2e8f0;
  --border-hover:#cbd5e1;
  --text-primary:var(--app-text);
  --text-muted:#64748b;
  --text-light:#6b7280;
  --color-success:#10b981; --color-success-bg:#ecfdf5; --color-success-border:#a7f3d0;
  --color-warning:#f59e0b; --color-warning-bg:#fffbeb; --color-warning-border:#fde68a;
  --color-danger:#ef4444;  --color-danger-bg:#fef2f2;  --color-danger-border:#fecaca;
  --color-info:#3b82f6;    --color-info-bg:#eff6ff;    --color-info-border:#bfdbfe;
}

/* ---- Бараан горим ----
   iOS 12 prefers-color-scheme-г мэдэхгүй тул гар товч (html[data-theme]) үндсэн арга;
   iOS 13+/компьютер дээр сонголт хийгээгүй бол системийн тохиргоог дагана. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --app-surface:#0b1220; --app-text:#e6eaf2; --app-muted:#97a3b8; --app-line:#26344f;
    --app-card:#131c2e; --app-soft:#1a2438;
    --app-shadow:0 22px 60px rgba(0,0,0,.45); --app-shadow-soft:0 14px 40px rgba(0,0,0,.35);
    --surface:#131c2e; --surface-glass:rgba(19,28,46,.94); --surface-2:#0f1728; --surface-3:#1a2438; --surface-4:#24324b;
    --text:#e6eaf2; --text-2:#c4cbd9; --muted:#97a3b8; --line:#26344f; --line-strong:#344563;
    --ok-bg:#0f2e1f;   --ok-fg:#86efac;   --ok-line:#166534;
    --bad-bg:#3a1519;  --bad-fg:#fca5a5;  --bad-line:#7f1d1d;
    --info-bg:#10244a; --info-fg:#93c5fd; --info-line:#1e3a8a;
    --warn-bg:#3a2210; --warn-fg:#fdba74; --warn-line:#7c2d12;
    --teal-bg:#0d2b29; --teal-fg:#5eead4; --link:#fb923c;
    --bg-app:#0b1220; --bg-card:#131c2e; --bg-input:#0f1728; --border-light:#26344f; --border-hover:#344563;
    --text-primary:#e6eaf2; --text-muted:#97a3b8; --text-light:#7c879b;
    --color-success-bg:#0f2e1f; --color-success-border:#166534;
    --color-warning-bg:#3a2210; --color-warning-border:#7c2d12;
    --color-danger-bg:#3a1519;  --color-danger-border:#7f1d1d;
    --color-info-bg:#10244a;    --color-info-border:#1e3a8a;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.35);
    --shadow-lg:0 12px 28px rgba(0,0,0,.4); --shadow-xl:0 20px 48px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --app-surface:#0b1220; --app-text:#e6eaf2; --app-muted:#97a3b8; --app-line:#26344f;
  --app-card:#131c2e; --app-soft:#1a2438;
  --app-shadow:0 22px 60px rgba(0,0,0,.45); --app-shadow-soft:0 14px 40px rgba(0,0,0,.35);
  --surface:#131c2e; --surface-glass:rgba(19,28,46,.94); --surface-2:#0f1728; --surface-3:#1a2438; --surface-4:#24324b;
  --text:#e6eaf2; --text-2:#c4cbd9; --muted:#97a3b8; --line:#26344f; --line-strong:#344563;
  --ok-bg:#0f2e1f;   --ok-fg:#86efac;   --ok-line:#166534;
  --bad-bg:#3a1519;  --bad-fg:#fca5a5;  --bad-line:#7f1d1d;
  --info-bg:#10244a; --info-fg:#93c5fd; --info-line:#1e3a8a;
  --warn-bg:#3a2210; --warn-fg:#fdba74; --warn-line:#7c2d12;
  --teal-bg:#0d2b29; --teal-fg:#5eead4; --link:#fb923c;
  --bg-app:#0b1220; --bg-card:#131c2e; --bg-input:#0f1728; --border-light:#26344f; --border-hover:#344563;
  --text-primary:#e6eaf2; --text-muted:#97a3b8; --text-light:#7c879b;
  --color-success-bg:#0f2e1f; --color-success-border:#166534;
  --color-warning-bg:#3a2210; --color-warning-border:#7c2d12;
  --color-danger-bg:#3a1519;  --color-danger-border:#7f1d1d;
  --color-info-bg:#10244a;    --color-info-border:#1e3a8a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 12px 28px rgba(0,0,0,.4); --shadow-xl:0 20px 48px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI Variable Text","Bahnschrift","Trebuchet MS",sans-serif;
  background:
    radial-gradient(circle at top right, rgba(154,52,18,.14), transparent 26%),
    radial-gradient(circle at left 20%, rgba(15,118,110,.10), transparent 28%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--app-surface) 100%);
  color:var(--app-text);
}

h1,h2,h3,h4{
  margin:0 0 14px;
  font-family:"Segoe UI Variable Display","Bahnschrift","Trebuchet MS",sans-serif;
  letter-spacing:.01em;
}

p{margin:0 0 14px}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.auth-body{
  min-height:100vh;
  padding:32px;
  background:
    radial-gradient(circle at top left, rgba(15,118,110,.18), transparent 24%),
    radial-gradient(circle at bottom right, rgba(154,52,18,.20), transparent 26%),
    linear-gradient(135deg, #0f172a 0%, #172554 55%, #1f2937 100%);
}

.auth-shell{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr .95fr;
  gap:24px;
  align-items:stretch;
}

.auth-hero,
.auth-card,
.card,
.kpi,
.stat-card,
.list-card{
  background:var(--surface-glass);
  border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--app-shadow);
}

.auth-hero{
  border-radius:32px;
  padding:34px;
  color:#fff;
  background:
    linear-gradient(140deg, rgba(15,23,42,.88), rgba(15,23,42,.65)),
    linear-gradient(135deg, rgba(154,52,18,.80), rgba(15,118,110,.72));
  position:relative;
  overflow:hidden;
}

.auth-hero-brand{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:18px;
  align-items:start;
  margin-bottom:18px;
}

.auth-hero-logo{
  display:grid;
  place-items:center;
  padding:12px;
  border-radius:24px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  overflow:hidden;
}

.auth-hero-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.auth-hero-logo-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  text-align:center;
  font-weight:800;
  color:#fff;
}

.auth-hero-brand-copy{
  display:grid;
  gap:8px;
  align-content:start;
}

.hero-subcopy{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:520px;
}

.auth-hero::before,
.auth-hero::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(2px);
}

.auth-hero::before{
  width:280px;
  height:280px;
  top:-110px;
  right:-40px;
  background:rgba(255,255,255,.09);
}

.auth-hero::after{
  width:220px;
  height:220px;
  bottom:-80px;
  left:-40px;
  background:rgba(255,255,255,.08);
}

.auth-card{
  border-radius:32px;
  padding:32px;
  color:var(--app-text);
}

.auth-card.wide{max-width:none}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:inherit;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-title{
  font-size:clamp(34px, 5vw, 54px);
  line-height:1.02;
  margin:18px 0 14px;
}

.hero-copy{
  font-size:16px;
  line-height:1.7;
  color:rgba(255,255,255,.85);
  max-width:720px;
  margin-top:0;
}

.hero-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:28px;
}

.hero-chip{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}

.hero-chip strong{
  display:block;
  font-size:24px;
  margin-bottom:4px;
}

.hero-media{
  margin-top:24px;
  min-height:220px;
  border-radius:26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    center/cover no-repeat;
  border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.92;
}

.muted{color:var(--app-muted)}

.panel-note{
  display:grid;
  gap:10px;
  margin-bottom:18px;
}

label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin:6px 0 8px;
  color:var(--text-2);
  letter-spacing:.02em;
}

input,select,textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:var(--surface);
  font:inherit;
  color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--brand-secondary);
  box-shadow:0 0 0 4px rgba(15,118,110,.10);
  transform:translateY(-1px);
}

textarea{min-height:120px;resize:vertical}

button,.btn{
  -webkit-appearance:none;appearance:none;
  border:0;
  border-radius:14px;
  padding:12px 18px;
  background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color:#fff;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 14px 26px rgba(15,23,42,.14);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

button:hover,.btn:hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 18px 30px rgba(15,23,42,.18);
}

.btn.secondary{
  background:var(--surface-4);
  color:var(--text);
  box-shadow:none;
}

.btn.ghost{
  background:transparent;
  color:var(--app-text);
  border:1px solid var(--app-line);
  box-shadow:none;
}

.btn.danger{
  background:linear-gradient(135deg, #dc2626, #b91c1c);
}

.btn.small{
  padding:8px 12px;
  border-radius:12px;
  font-size:13px;
}

.alert{
  padding:14px 16px;
  border-radius:16px;
  margin-bottom:16px;
  border:1px solid transparent;
}

.alert.ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-line)}
.alert.err{background:var(--bad-bg);color:var(--bad-fg);border-color:var(--bad-line)}
.alert.info{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-line)}
.alert.warn{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-line)}

.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid.three{grid-template-columns:repeat(3, minmax(0, 1fr))}
.grid.four{grid-template-columns:repeat(4, minmax(0, 1fr))}

.layout{
  display:grid;
  grid-template-columns:290px minmax(0, 1fr);
  min-height:100vh;
}

.sidebar{
  background:
    radial-gradient(circle at top, rgba(154,52,18,.26), transparent 25%),
    linear-gradient(180deg, #08111f 0%, var(--app-panel) 100%);
  color:#e2e8f0;
  padding:24px 18px;
  position:-webkit-sticky;position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  border-right:1px solid rgba(255,255,255,.06);
}

.brand-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  margin-bottom:24px;
  width:100%;
}

.brand-mark{
  width:100%;
  max-width:240px;
  height:68px;
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  box-sizing:border-box;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  overflow:hidden;
}

.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-copy strong{display:block;font-size:14px;font-weight:600;color:#fff;line-height:1.4}
.brand-copy span{display:none}

.sidebar-section{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}

.nav-group{
  display:grid;
  gap:6px;
}

.nav-label{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  margin:8px 10px 4px;
}

.sidebar a{
  color:#cbd5e1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-radius:14px;
  margin:0;
  transition:background .18s ease, transform .18s ease, color .18s ease;
}

.sidebar a:hover,.sidebar a.active{
  background:rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
  transform:translateX(2px);
}

.main{
  padding:26px;
  min-width:0;
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-bottom:22px;
}

.page-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.page-title{
  margin:0;
  font-size:clamp(22px, 3vw, 30px);
}

.page-subtitle{
  margin-top:4px;
  color:var(--app-muted);
  max-width:780px;
  line-height:1.6;
}

.topbar-actions,
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.card{
  border-radius:var(--radius-lg);
  padding:20px;
  border:1px solid rgba(203,213,225,.7);
  margin-bottom:18px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  margin-bottom:18px;
}

.kpi,
.stat-card{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(203,213,225,.7);
}

.kpi .num,
.stat-card .num{
  font-size:32px;
  font-weight:800;
  margin-top:8px;
}

.dashboard-kpis .kpi{
  position:relative;
  overflow:hidden;
  color:#fff;
  border:none;
  min-height:148px;
  box-shadow:0 18px 36px rgba(15,23,42,.20);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.dashboard-kpis .kpi::before{
  content:"";
  position:absolute;
  top:auto;right:-20px;bottom:-40px;left:auto;
  width:120px;
  height:120px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}

.dashboard-kpis .kpi::after{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events:none;
}

.dashboard-kpis .kpi .caption,
.dashboard-kpis .kpi .muted{
  color:rgba(255,255,255,.78);
}

.dashboard-kpis .kpi:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 28px 50px rgba(15,23,42,.26);
  filter:saturate(1.05);
}

.dashboard-kpis .kpi-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.dashboard-kpis .kpi-icon{
  width:30px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  flex:0 0 auto;
}

.dashboard-kpis .kpi-icon svg{
  width:14px;
  height:14px;
}

.dashboard-kpis .kpi .num{
  font-size:38px;
  letter-spacing:.02em;
  text-shadow:0 6px 20px rgba(0,0,0,.15);
}

.dashboard-kpis .kpi-tone-1{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #1d4ed8, #0f172a);
}
.dashboard-kpis .kpi-tone-2{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, #14b8a6, #115e59);
}
.dashboard-kpis .kpi-tone-3{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, #f97316, #9a3412);
}
.dashboard-kpis .kpi-tone-4{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.20), transparent 30%),
    linear-gradient(135deg, #8b5cf6, #4c1d95);
}
.dashboard-kpis .kpi-tone-5{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, #ef4444, #991b1b);
}
.dashboard-kpis .kpi-tone-6{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, #64748b, #1e293b);
}

.stat-card .caption{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--app-muted);
}

.filters{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-bottom:0;
}

.search-filter-card{
  background:
    radial-gradient(circle at top right, rgba(16,185,129,.08), transparent 24%),
    linear-gradient(180deg, var(--surface-glass) 0%, var(--surface-2) 100%);
}

.report-export-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 28%),
    linear-gradient(135deg, var(--surface-glass) 0%, rgba(239,246,255,.98) 100%);
}

.filter-inline-note{
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.48);
  background:var(--surface-glass);
  line-height:1.6;
}

.table-wrap{
  overflow:auto;
  border-radius:18px;
  border:1px solid var(--line);
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  background:var(--surface);
}

th,td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

th{
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface-3) 100%);
  color:var(--text-2);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

tr:hover td{background:var(--surface-2)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.badge.ok{background:var(--ok-bg);color:var(--ok-fg)}
.badge.bad{background:var(--bad-bg);color:var(--bad-fg)}
.badge.info{background:var(--info-bg);color:var(--info-fg)}
.badge.warn{background:var(--warn-bg);color:var(--warn-fg)}

.info-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.info-box{
  padding:16px;
  border:1px solid var(--app-line);
  border-radius:18px;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.info-box .label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--app-muted);
}

.info-box .value{
  margin-top:8px;
  font-size:19px;
  font-weight:700;
}

.task-card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-bottom:18px;
}

.task-folder-board{
  margin-bottom:18px;
  padding:22px 22px 24px;
  border-radius:24px;
  background:linear-gradient(180deg, var(--surface-3) 0%, var(--surface-4) 100%);
  box-shadow:var(--app-shadow-soft);
  border:1px solid rgba(148,163,184,.28);
}

.task-folder-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
  margin-bottom:-1px;
  padding-inline:6px;
}

.task-folder-tab{
  position:relative;
  display:block;
  min-width:180px;
  padding:0;
  color:#ffffff;
  text-decoration:none;
  filter:drop-shadow(0 8px 14px rgba(15,23,42,.08));
}

.task-folder-tab::before{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  border-radius:14px 14px 0 0;
  background:linear-gradient(180deg, #27c784 0%, #17a86f 100%);
  -webkit-clip-path:polygon(0 100%, 0 22%, 10% 0, 90% 0, 100% 22%, 100% 100%);clip-path:polygon(0 100%, 0 22%, 10% 0, 90% 0, 100% 22%, 100% 100%);
  border:1px solid rgba(8,88,59,.18);
  border-bottom:none;
}

.task-folder-tab:hover{
  text-decoration:none;
  transform:translateY(-2px);
}

.task-folder-tab.is-open{
  z-index:3;
}

.task-folder-tab.is-open::before{
  background:linear-gradient(180deg, #1fb874 0%, #12875b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
}

.task-folder-tab-inner{
  position:relative;
  z-index:1;
  min-height:64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:14px 18px 12px;
}

.task-folder-tab-step{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.96;
  color:rgba(255,255,255,.96);
}

.task-folder-tab-meta{
  font-size:12px;
  opacity:.98;
  color:rgba(255,255,255,.94);
}

.task-folder-panel{
  position:relative;
  border-radius:0 20px 20px 20px;
  padding:24px;
  background:linear-gradient(180deg, var(--surface-glass) 0%, var(--surface-2) 100%);
  border:1px solid rgba(226,232,240,.96);
  box-shadow:0 20px 44px rgba(15,23,42,.10);
}

.task-folder-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.task-folder-panel-title h3{
  margin:10px 0 6px;
  font-size:28px;
}

.task-folder-panel-side{
  display:grid;
  gap:12px;
  justify-items:end;
}

.task-folder-list{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:0;
  margin-bottom:18px;
  align-items:start;
  max-width:1200px;
  margin-inline:auto;
  padding-top:10px;
}

.task-folder{
  position:relative;
  z-index:var(--folder-z, 1);
  border-radius:28px;
  border:1px solid rgba(203,213,225,.8);
  background:
    radial-gradient(circle at top right, rgba(15,118,110,.08), transparent 24%),
    radial-gradient(circle at bottom left, rgba(154,52,18,.08), transparent 28%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:var(--app-shadow-soft);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  margin-top:calc((var(--stack-order, 1) - 1) * -28px);
  margin-left:calc((var(--stack-order, 1) - 1) * 8px);
}

.task-folder::before{
  content:"";
  position:absolute;
  top:-1px;
  left:24px;
  width:132px;
  height:18px;
  border:1px solid rgba(203,213,225,.8);
  border-bottom:none;
  border-radius:18px 18px 0 0;
  background:linear-gradient(180deg, var(--warn-bg) 0%, var(--warn-bg) 100%);
  box-shadow:0 8px 16px rgba(15,23,42,.05);
}

.task-folder::after{
  content:"";
  position:absolute;
  top:14px;right:18px;bottom:auto;left:18px;
  height:14px;
  border-radius:14px 14px 10px 10px;
  background:linear-gradient(180deg, var(--surface-glass), rgba(226,232,240,.82));
  opacity:.72;
  pointer-events:none;
}

.task-folder:hover{
  transform:translateY(-2px) translateX(4px);
  box-shadow:0 22px 48px rgba(15,23,42,.10);
}

.task-folder.is-open{
  border-color:rgba(15,118,110,.32);
  box-shadow:0 28px 60px rgba(15,23,42,.14);
  transform:translateX(10px);
  z-index:300;
  margin-left:0;
}

.task-folder-head{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:16px;
  padding:28px 20px 20px;
  background:
    linear-gradient(180deg, rgba(254,252,232,.7) 0%, rgba(255,255,255,.4) 36%, rgba(255,255,255,0) 100%);
}

.task-folder-toggle{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:inherit;
}

.task-folder-toggle:hover{
  text-decoration:none;
}

.task-folder-title h3{
  margin:8px 0 6px;
  font-size:24px;
  line-height:1.25;
}

.task-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.task-folder-sequence{
  background:linear-gradient(135deg, rgba(15,118,110,.15), rgba(14,165,233,.16));
  color:var(--text);
  border:1px solid rgba(14,165,233,.18);
}

.task-folder-badge{
  background:linear-gradient(135deg, rgba(15,23,42,.08) 0%, rgba(148,163,184,.16) 100%);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

.task-score-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--ok-bg) 0%, var(--ok-bg) 100%);
  border:1px solid rgba(34,197,94,.24);
  box-shadow:0 10px 24px rgba(34,197,94,.12);
}

.task-score-pill span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ok-fg);
}

.task-score-pill strong{
  font-size:18px;
  font-weight:800;
  color:var(--ok-fg);
}

.task-folder-summary{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-content:flex-start;
}

.task-folder-summary span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:var(--surface-glass);
  border:1px solid rgba(203,213,225,.8);
  color:var(--text-2);
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.task-folder-summary strong{
  font-size:15px;
  color:var(--app-text);
}

.task-folder-body{
  border-top:1px solid rgba(203,213,225,.78);
  padding:0 20px 20px;
  background:
    linear-gradient(180deg, var(--surface-glass) 0%, var(--surface-2) 100%);
}

.task-tabs-shell{
  margin-top:16px;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(203,213,225,.75);
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.10), transparent 28%),
    linear-gradient(180deg, var(--surface-glass) 0%, var(--surface-2) 100%);
}

.task-tab-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.task-tab-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(203,213,225,.88);
  background:var(--surface-glass);
  color:var(--text-2);
  font-weight:700;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

.task-tab-link:hover{
  text-decoration:none;
  border-color:rgba(59,130,246,.34);
  color:var(--info-fg);
}

.task-tab-link.is-active{
  border-color:rgba(14,116,144,.28);
  background:linear-gradient(135deg, #0f766e 0%, #0891b2 100%);
  color:#fff;
  box-shadow:0 14px 28px rgba(8,145,178,.22);
}

.task-tab-panel{
  min-height:120px;
}

.evaluation-board{
  display:grid;
  gap:18px;
}

.evaluation-board-top{
  display:grid;
  grid-template-columns:minmax(280px, 1.15fr) minmax(320px, 1fr);
  gap:16px;
}

.evaluation-hero{
  padding:20px 22px;
  border-radius:26px;
  border:1px solid rgba(14,116,144,.18);
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.14), transparent 32%),
    radial-gradient(circle at bottom left, rgba(16,185,129,.12), transparent 28%),
    linear-gradient(135deg, var(--teal-bg) 0%, var(--info-bg) 100%);
  box-shadow:0 18px 36px rgba(14,116,144,.10);
}

.evaluation-hero h4{
  margin:8px 0 8px;
  font-size:26px;
}

.evaluation-hero p{
  margin:0;
  color:var(--text-2);
  line-height:1.6;
}

.evaluation-hero-score{
  display:grid;
  gap:6px;
  margin-top:18px;
}

.evaluation-hero-score span{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  color:var(--teal-fg);
}

.evaluation-hero-score strong{
  font-size:42px;
  line-height:1;
  font-weight:800;
  color:var(--text);
}

.evaluation-hero-formula{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  font-size:24px;
  font-weight:800;
  color:var(--text);
}

.evaluation-hero-formula span{
  color:#0891b2;
}

.evaluation-metric-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.evaluation-metric-card{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(203,213,225,.78);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:0 10px 22px rgba(15,23,42,.05);
}

.evaluation-metric-card span{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--app-muted);
  font-weight:700;
}

.evaluation-metric-card strong{
  font-size:24px;
  line-height:1.1;
  color:var(--text);
}

.criteria-window{
  margin-top:18px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(203,213,225,.78);
  background:
    radial-gradient(circle at top left, rgba(16,185,129,.10), transparent 24%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.10), transparent 24%),
    linear-gradient(180deg, var(--surface-glass) 0%, var(--surface-2) 100%);
  box-shadow:0 18px 36px rgba(15,23,42,.08);
}

.criteria-window-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.criteria-window-head h4{
  margin:6px 0 0;
  font-size:20px;
}

.criteria-window-text{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.6;
}

.criteria-window-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.criteria-window-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:var(--surface-glass);
  border:1px solid rgba(203,213,225,.88);
  color:var(--text-2);
}

.criteria-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
}

.criteria-card{
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(203,213,225,.82);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 28%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.criteria-card-detail{
  min-height:100%;
}

.criteria-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.criteria-card-index{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.criteria-card h5{
  margin:0;
  font-size:18px;
  line-height:1.35;
}

.criteria-card-note{
  margin:0;
  color:var(--app-muted);
  font-size:13px;
}

.criteria-card-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.criteria-card-stats div{
  padding:12px;
  border-radius:18px;
  background:var(--surface-glass);
  border:1px solid rgba(226,232,240,.95);
}

.criteria-card-stats span{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--app-muted);
}

.criteria-card-stats strong{
  font-size:18px;
  color:var(--text);
}

.criteria-card-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.criteria-window-footer{
  margin-top:14px;
  padding:12px 14px;
  border-radius:18px;
  background:var(--surface-glass);
  border:1px dashed rgba(148,163,184,.5);
  color:var(--text-2);
  font-weight:600;
}

.criteria-table-shell{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(203,213,225,.8);
  background:var(--surface-glass);
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.criteria-table-shell .table-wrap{
  max-height:540px;
}

.criteria-table{
  margin:0;
}

.criteria-table th{
  position:-webkit-sticky;position:sticky;
  top:0;
  z-index:1;
}

.criteria-table td:last-child,
.criteria-table th:last-child{
  min-width:160px;
}

.criteria-table td strong{
  display:block;
  margin-bottom:4px;
}

.task-score-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(59,130,246,.18);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 30%),
    linear-gradient(135deg, var(--info-bg) 0%, #ecfeff 100%);
  box-shadow:0 16px 36px rgba(59,130,246,.10);
}

.task-score-card .label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--info-fg);
  font-weight:700;
}

.task-score-card .value{
  margin-top:6px;
  font-size:30px;
  line-height:1;
  font-weight:800;
  color:var(--text);
}

.task-score-card .formula{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:22px;
  font-weight:800;
  color:var(--text);
}

.task-score-card .formula span{
  color:var(--info-fg);
}

.task-score-card .muted{
  margin-left:auto;
  font-weight:700;
  color:var(--text-2);
}

.task-formula-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.task-formula-note{
  display:grid;
  gap:6px;
  margin-top:16px;
  padding:18px 20px;
  border-radius:20px;
  border:1px dashed rgba(14,116,144,.3);
  background:linear-gradient(135deg, var(--teal-bg) 0%, var(--info-bg) 100%);
}

.task-formula-note strong{
  font-size:14px;
  color:var(--text);
}

.task-formula-note span{
  color:var(--text-2);
  font-weight:600;
}

.criteria-calculation-summary{
  margin-top:18px;
}

.formula-breakdown-card{
  margin-top:16px;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:var(--app-shadow-soft);
}

.formula-breakdown-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.formula-breakdown-head strong{
  display:block;
  font-size:15px;
  color:var(--text);
}

.formula-breakdown-head span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
}

.formula-breakdown-total{
  min-width:88px;
  padding:10px 14px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(15,118,110,.12), rgba(14,165,233,.12));
  text-align:center;
  font-size:20px;
  font-weight:800;
  color:var(--text);
}

.formula-breakdown-list{
  display:grid;
  gap:10px;
}

.formula-breakdown-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border-radius:16px;
  background:var(--surface-2);
  border:1px solid rgba(226,232,240,.9);
}

.formula-breakdown-main{
  display:grid;
  gap:4px;
}

.formula-breakdown-main strong{
  color:var(--text);
  font-size:14px;
}

.formula-breakdown-main span{
  color:var(--text-2);
  font-size:13px;
}

.formula-breakdown-value{
  white-space:nowrap;
  font-size:18px;
  font-weight:800;
  color:var(--teal-fg);
}

.formula-breakdown-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed rgba(148,163,184,.5);
}

.formula-breakdown-summary span{
  color:var(--text-2);
  font-weight:700;
}

.formula-breakdown-summary strong{
  font-size:20px;
  color:var(--warn-fg);
}

.task-card{
  position:relative;
  overflow:hidden;
  padding:20px;
  border-radius:26px;
  border:1px solid rgba(203,213,225,.78);
  background:
    radial-gradient(circle at top right, rgba(15,118,110,.08), transparent 24%),
    radial-gradient(circle at bottom left, rgba(154,52,18,.08), transparent 28%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:var(--app-shadow-soft);
}

.task-card::after{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}

.task-card > *{
  position:relative;
  z-index:1;
}

.task-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.task-card-head h3{
  margin:8px 0 6px;
  font-size:22px;
}

.task-card-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
  margin-bottom:16px;
}

.task-metric{
  padding:14px 15px;
  border-radius:18px;
  background:var(--surface-glass);
  border:1px solid rgba(203,213,225,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.task-metric span{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--app-muted);
}

.task-metric strong{
  font-size:22px;
  line-height:1.1;
}

.task-card .table-wrap{
  background:var(--surface-glass);
}

.task-config-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.task-config-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(203,213,225,.8);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.task-config-row strong{
  display:block;
  margin-bottom:4px;
}

.metric-list{
  display:grid;
  gap:10px;
}

.metric-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:var(--surface-2);
  border:1px solid var(--line);
}

.empty-state{
  padding:28px;
  text-align:center;
  color:var(--app-muted);
  border:1px dashed var(--line-strong);
  border-radius:20px;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.modal-shell{
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:36px 16px;
  z-index:40;
  overflow:auto;
}

.modal-card{
  width:min(980px, 100%);
  background:var(--surface);
  border-radius:30px;
  padding:24px;
  box-shadow:0 28px 80px rgba(15,23,42,.28);
  border:1px solid rgba(226,232,240,.8);
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
}

.modal-head p{margin:6px 0 0}

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}

.stack{
  display:grid;
  gap:16px;
}

.score-highlight{
  background:linear-gradient(135deg, rgba(154,52,18,.08), rgba(15,118,110,.08));
  border:1px solid rgba(154,52,18,.14);
}

.summary-banner{
  padding:18px 20px;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  box-shadow:var(--app-shadow-soft);
  margin-bottom:18px;
}

.summary-banner strong{
  font-size:22px;
  display:block;
  margin-top:6px;
}

.portal-quiz-card{
  display:grid;
  gap:18px;
  background:
    radial-gradient(circle at top right, rgba(16,185,129,.08), transparent 26%),
    linear-gradient(180deg, var(--surface-glass) 0%, var(--surface-2) 100%);
}

.portal-quiz-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.portal-quiz-head h2{
  margin:8px 0 0;
}

.portal-quiz-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.portal-quiz-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.portal-quiz-meta-card{
  padding:16px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid rgba(203,213,225,.72);
  box-shadow:0 18px 40px rgba(15,23,42,.06);
}

.portal-quiz-meta-card span{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.portal-quiz-meta-card strong{
  font-size:18px;
  color:var(--text);
}

.portal-quiz-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.portal-quiz-frame-shell{
  padding:12px;
  border-radius:24px;
  background:var(--surface);
  border:1px solid rgba(203,213,225,.72);
  box-shadow:0 22px 44px rgba(15,23,42,.10);
}

.portal-quiz-frame{
  display:block;
  width:100%;
  min-height:720px;
  border:0;
  border-radius:18px;
  background:var(--surface-2);
}

.settings-preview{
  display:grid;
  gap:16px;
}

.settings-login-preview{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:16px;
}

.settings-login-preview-hero{
  border-radius:28px;
  padding:24px;
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  box-shadow:0 22px 42px rgba(15,23,42,.18);
}

.settings-login-preview-brand{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

.settings-login-preview-logo{
  width:84px;
  height:84px;
  padding:10px;
  border-radius:22px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.16);
  display:grid;
  place-items:center;
}

.settings-login-preview-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.settings-login-preview-media{
  margin-top:16px;
  min-height:140px;
}

.settings-login-preview-panel{
  border-radius:28px;
  padding:22px;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 18px 36px rgba(15,23,42,.08);
  display:grid;
  gap:14px;
}

.media-preview-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.media-preview-card{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--app-line);
  display:grid;
  gap:10px;
}

.media-preview-card img{
  width:100%;
  height:140px;
  object-fit:contain;
  border-radius:14px;
  border:1px solid #dbe3ef;
  background:#fff;
  padding:10px;
}

.media-preview-placeholder{
  min-height:140px;
  border-radius:14px;
  border:1px dashed #cbd5e1;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--app-muted);
  font-weight:700;
  text-align:center;
  padding:16px;
}

.logo-preview-card img,
.logo-preview-card .media-preview-placeholder{
  height:96px;
  min-height:96px;
}

.login-preview-card img,
.login-preview-card .media-preview-placeholder{
  height:132px;
  min-height:132px;
}

.preview-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--app-muted);
}

.color-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.color-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--app-line);
  font-size:13px;
}

.color-chip span{
  width:16px;
  height:16px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(15,23,42,.12);
}

.evaluation-modal-card{
  width:min(1240px, 100%);
  display:grid;
  gap:20px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.16), transparent 34%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.evaluation-modal-head{
  align-items:center;
  margin-bottom:0;
}

.evaluation-modal-title{
  margin:10px 0 6px;
  font-size:clamp(24px, 3vw, 34px);
  color:var(--text);
}

.evaluation-modal-subtitle{
  margin:0;
  color:var(--app-muted);
  font-size:14px;
}

.evaluation-overview-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.evaluation-overview-card{
  padding:18px 20px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.22);
  background:var(--surface-glass);
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.evaluation-overview-hero{
  background:linear-gradient(135deg, rgba(15,118,110,.12), rgba(22,163,74,.14));
  border-color:rgba(15,118,110,.18);
}

.evaluation-overview-label{
  display:block;
  margin-bottom:10px;
  color:var(--text-2);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.evaluation-overview-card strong{
  display:block;
  font-size:28px;
  line-height:1;
  color:var(--text);
}

.evaluation-overview-card p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
}

.evaluation-form-stack{
  display:grid;
  gap:18px;
}

.evaluation-task-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.evaluation-task-tab{
  border:0;
  min-width:180px;
  padding:14px 18px;
  border-radius:22px 22px 0 0;
  background:linear-gradient(135deg, #d7f5ee 0%, #b9f0df 100%);
  color:var(--text);
  text-align:left;
  box-shadow:inset 0 -1px 0 rgba(15,23,42,.08);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.evaluation-task-tab span{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--teal-fg);
  margin-bottom:4px;
}

.evaluation-task-tab strong{
  display:block;
  font-size:15px;
}

.evaluation-task-tab:hover{
  transform:translateY(-2px);
}

.evaluation-task-tab.is-active{
  background:linear-gradient(135deg, #14b8a6 0%, #22c55e 100%);
  color:#fff;
  box-shadow:0 20px 36px rgba(15,118,110,.26);
}

.evaluation-task-tab.is-active span{
  color:rgba(255,255,255,.84);
}

.evaluation-task-card{
  border-radius:28px;
  border:1px solid rgba(148,163,184,.2);
  background:var(--surface);
  box-shadow:0 22px 44px rgba(15,23,42,.08);
  overflow:hidden;
  display:block;
}

.evaluation-modal-card.js-tabs-ready .evaluation-task-card{
  display:none;
}

.evaluation-modal-card.js-tabs-ready .evaluation-task-card.is-active{
  display:block;
}

.evaluation-task-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  padding:20px 22px 16px;
  background:linear-gradient(135deg, rgba(15,118,110,.08), rgba(14,165,233,.08));
  border-bottom:1px solid rgba(148,163,184,.18);
}

.evaluation-task-head h4{
  margin:6px 0 0;
  font-size:22px;
  color:var(--text);
}

.evaluation-task-kicker{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,118,110,.12);
  color:var(--teal-fg);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.evaluation-task-stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.evaluation-task-table-wrap{
  border:0;
  border-radius:0;
  background:var(--surface);
}

.evaluation-score-table{
  margin:0;
}

.evaluation-score-table th{
  white-space:nowrap;
}

.evaluation-score-input-cell{
  min-width:140px;
}

.evaluation-score-input{
  width:100%;
  min-width:110px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line-strong);
  background:var(--surface-2);
  font-size:16px;
  font-weight:700;
  color:var(--text);
}

.evaluation-score-input:focus{
  outline:none;
  border-color:#0f766e;
  box-shadow:0 0 0 4px rgba(15,118,110,.12);
  background:var(--surface);
}

.evaluation-task-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  padding:18px 22px 22px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border-top:1px solid rgba(148,163,184,.16);
  flex-wrap:wrap;
}

.evaluation-task-total-card{
  margin-right:auto;
  min-width:220px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(20,184,166,.22);
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.16), transparent 40%),
    linear-gradient(135deg, var(--teal-bg) 0%, var(--info-bg) 100%);
  box-shadow:0 14px 26px rgba(15,118,110,.08);
}

.evaluation-task-total-label{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--teal-fg);
}

.evaluation-task-total-value{
  display:block;
  margin-top:6px;
  font-size:28px;
  line-height:1;
  font-weight:900;
  color:var(--text);
}

.evaluation-assignee-list{
  display:grid;
  gap:10px;
  min-width:260px;
}

.evaluation-assignee-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.2);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
}

.evaluation-assignee-meta{
  display:grid;
  gap:4px;
}

.evaluation-assignee-meta strong{
  font-size:13px;
  color:var(--text);
}

.evaluation-assignee-meta span{
  font-size:13px;
  color:var(--muted);
}

.evaluation-assignee-action{
  flex-shrink:0;
  white-space:nowrap;
}

.evaluation-assignee-empty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:260px;
}

.evaluation-admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.danger-soft{
  background:linear-gradient(135deg, var(--bad-bg) 0%, var(--bad-bg) 100%);
  color:var(--bad-fg);
  border:1px solid rgba(220,38,38,.16);
}

.evaluation-modal-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.candidate-assignment-panel{
  padding:18px 20px;
  border-radius:24px;
  border:1px solid rgba(20,184,166,.18);
  background:
    radial-gradient(circle at top right, rgba(16,185,129,.08), transparent 28%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.candidate-assignment-head{
  margin-bottom:14px;
}

.candidate-assignment-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:start;
}

.candidate-assignment-summary{
  min-height:100%;
}

.candidate-assignee-list{
  display:grid;
  gap:6px;
  min-width:220px;
}

.candidate-assignee-list strong{
  color:var(--text);
}

hr{border:0;border-top:1px solid var(--app-line);margin:20px 0}

@media (max-width: 1180px){
  .auth-shell{grid-template-columns:1fr}
  .settings-login-preview{grid-template-columns:1fr}
  .cards,.grid.four,.filters,.info-grid,.task-card-grid,.task-card-metrics,.task-formula-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .topbar,.page-head,.modal-head{flex-direction:column}
  .report-export-strip{flex-direction:column;align-items:flex-start}
  .cards,.grid.two,.grid.three,.grid.four,.filters,.info-grid,.hero-grid,.media-preview-grid,.task-card-grid,.task-card-metrics,.task-formula-grid{grid-template-columns:1fr}
  .main{padding:18px}
  .auth-body{padding:18px}
  .auth-card,.auth-hero,.card,.modal-card{padding:18px}
  .auth-hero-brand{grid-template-columns:1fr}
  .auth-hero-logo{max-width:140px}
  .portal-quiz-head{flex-direction:column}
  .portal-quiz-badges{justify-content:flex-start}
  .portal-quiz-meta{grid-template-columns:1fr}
  .portal-quiz-frame{min-height:520px}
  .task-card-head,.task-config-row,.task-folder-head,.task-folder-toggle,.task-score-card{flex-direction:column;align-items:flex-start}
  .task-folder-board{padding:22px 14px 18px}
  .task-folder-tabs{padding-inline:0;gap:8px}
  .task-folder-tab{min-width:calc(50% - 4px)}
  .task-folder-tab-inner{min-height:70px;padding:12px 14px 10px}
  .task-folder-panel{border-radius:0 18px 18px 18px;padding:18px}
  .task-folder-panel-head{flex-direction:column}
  .task-folder-panel-side{justify-items:start}
  .task-folder{margin-top:12px;margin-left:0;transform:none}
  .task-folder.is-open{transform:none}
  .task-folder-summary{justify-content:flex-start}
  .evaluation-board-top,.evaluation-metric-grid{grid-template-columns:1fr}
  .criteria-window-head,.criteria-card-top,.criteria-card-actions{flex-direction:column;align-items:flex-start}
  .criteria-card-stats{grid-template-columns:1fr}
  .evaluation-overview-grid{grid-template-columns:1fr}
  .evaluation-task-tabs{gap:8px}
  .evaluation-task-tab{min-width:calc(50% - 4px)}
  .evaluation-task-head{flex-direction:column}
  .evaluation-task-stats{justify-content:flex-start}
  .evaluation-task-footer{justify-content:flex-start}
  .evaluation-assignee-item,
  .evaluation-assignee-empty{flex-direction:column;align-items:flex-start;min-width:100%}
  .candidate-assignment-grid{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .page-title{font-size:26px}
  .hero-title{font-size:32px}
  th,td{padding:10px 12px}
  .portal-quiz-frame{min-height:420px}
  .task-folder-tab{min-width:100%}
  .evaluation-modal-title{font-size:22px}
  .evaluation-task-tab{min-width:100%;border-radius:18px}
  .evaluation-score-input-cell{min-width:120px}
  .evaluation-score-input{min-width:92px;padding:10px 12px;font-size:15px}
  .evaluation-modal-actions{justify-content:stretch}
  .evaluation-modal-actions .btn,
  .evaluation-modal-actions button{width:100%}
}

/* ============================================================
   ОРЧИН ҮЕИЙН RESPONSIVE ДАВХАРГА — гар утас + таблет (iPad Air)
   Энэ блок файлын ТӨГСГӨЛД байгаа тул дээрх media query-нуудыг
   дарж, хажуугийн цэсийг off-canvas drawer болгож хувиргана.
   ============================================================ */

/* Mobile bar, hamburger, backdrop нь зөвхөн жижиг дэлгэцэнд харагдана. */
.app-mobilebar{display:none}
.app-nav-toggle{display:none}
.app-nav-backdrop{display:none}

@media (max-width:1024px){
  /* Үндсэн зохион байгуулалт нэг баганатай болж, main бүтэн өргөнтэй болно. */
  .layout{grid-template-columns:1fr;min-height:100vh;min-height:100dvh}
  body{overflow-x:clip}

  /* Дээд талын наалдмал мобайл бар (hamburger + лого + үүрэг). */
  .app-mobilebar{
    display:flex;
    align-items:center;
    gap:12px;
    position:-webkit-sticky;position:sticky;
    top:0;
    z-index:60;
    padding:10px 14px;
    padding-top:calc(10px + env(safe-area-inset-top));
    background:linear-gradient(180deg,#0b1424 0%, var(--app-panel) 100%);
    color:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.20);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .app-mobilebar-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
  .app-mobilebar-title img{height:30px;max-width:160px;object-fit:contain;display:block}
  .app-mobilebar-title span{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-mobilebar-role{flex:none}

  /* Hamburger товч (нээгдэхэд X болж хувирна). */
  .app-nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;flex:none;padding:0 11px;
    border-radius:12px;border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
  }
  .app-nav-toggle span{display:block;height:2px;width:100%;background:var(--surface);border-radius:2px;
    transition:transform .25s ease, opacity .2s ease}
  body.nav-open .app-nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .app-nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .app-nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Хажуугийн цэс → зүүнээс гулсаж гарах off-canvas drawer. */
  .sidebar{
    position:fixed;top:0;left:0;
    height:100vh;height:100dvh;
    width:min(86vw,320px);
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:70;border-right:0;
    padding-top:calc(24px + env(safe-area-inset-top));
    overflow:auto;
  }
  body.nav-open .sidebar{transform:none;box-shadow:24px 0 60px rgba(0,0,0,.45)}

  /* Цэсний ард гарах бараан давхарга. */
  .app-nav-backdrop{
    display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:65;
    background:rgba(8,13,24,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .28s ease;
  }
  body.nav-open .app-nav-backdrop{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}

  .main{padding:18px 16px calc(28px + env(safe-area-inset-bottom))}

  /* Өргөн хүснэгтийг хэвтээ гулсуулж, толгойг наалдмал болгоно. */
  .table-wrap{-webkit-overflow-scrolling:touch}
  .table-wrap thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1}
}

@media (max-width:600px){
  .app-mobilebar-role{display:none}
  .main{padding:14px 12px calc(22px + env(safe-area-inset-bottom))}
  .card,.auth-card,.auth-hero{padding:16px;border-radius:20px}
  .page-title{font-size:22px}
  .auth-body{padding:12px}

  /* iOS дээр талбарт дармагц томрох (zoom)-оос сэргийлж 16px болгоно. */
  input,select,textarea{font-size:16px}

  /* Хүрэх талбай хангалттай том байх. */
  button,.btn{min-height:46px}
  .btn.small{min-height:38px}
  .sidebar a{padding:14px 16px}

  /* Модал → доороос дээш гарах bottom-sheet хэлбэр. */
  .modal-shell{padding:0;align-items:flex-end}
  .modal-card{
    width:100%;max-height:94vh;max-height:94dvh;overflow:auto;
    border-radius:24px 24px 0 0;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  }

  /* Үйлдлийн товчнууд босоо, бүтэн өргөнтэй. */
  .form-actions{flex-direction:column-reverse}
  .form-actions .btn,.form-actions button{width:100%}
}

/* ============================================================
   iPad Air (iOS 12.5.8 / Safari 12) — мэдрэгчтэй дэлгэцийн засвар
   ============================================================ */
input[type=checkbox],input[type=radio]{width:auto;padding:0}

@media (max-width:1024px){
  /* Safari 12 «overflow-x:clip»-ийг мэдэхгүй тул hidden нөөц. */
  body{overflow-x:hidden;overflow-x:clip}

  /* 16px-ээс жижиг талбарт дармагц iOS хуудсыг томруулдаг. Хуудсуудын inline <style> (жишээ нь
     .filters input{font-size:14px}) app.css-ийн дараа ирдэг тул энд !important шаардлагатай. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px !important}

  /* Хуруугаар дарах талбай ≥44px (Apple HIG). */
  button,.btn{min-height:44px}
  .btn.small{min-height:44px;padding:10px 14px}

  /* 100vh нь Safari-ийн хэрэгслийн мөрийг багтаадаг — drawer-ийг дээд/доод ирмэгээр сунгана. */
  .sidebar{bottom:0;height:auto;-webkit-overflow-scrolling:touch}
}

/* Босоо iPad: толгой хэсгүүд баганаар өрөгдөхөд (≤980px) гарчиг, товчнууд голд биш зүүн талдаа. */
@media (max-width:980px){
  .topbar,.page-head,.modal-head{align-items:flex-start}
}

/* Хулгана байхгүй төхөөрөмж дээр hover эффект товшсоны дараа «гацдаг». */
@media (hover:none){
  button:hover,.btn:hover{transform:none;box-shadow:0 14px 26px rgba(15,23,42,.14)}
  .btn.secondary:hover,.btn.ghost:hover{box-shadow:none}
}

/* Хөдөлгөөн багасгахыг хүссэн хэрэглэгчдэд анимэйшнийг унтраах. */
@media (prefers-reduced-motion:reduce){
  .sidebar,.app-nav-backdrop,.app-nav-toggle span{transition:none}
}

/* ============================================================
   Бараан горим — нэмэлт дүрэм ба горим солих товч
   ============================================================ */
::-webkit-input-placeholder{color:var(--muted);opacity:1}
::placeholder{color:var(--muted);opacity:1}

.theme-toggle{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;padding:0;flex:none;
  border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);
  box-shadow:none;cursor:pointer;
}
.theme-toggle:hover{transform:none;box-shadow:none;background:var(--surface-3)}
.theme-toggle svg{width:20px;height:20px;display:block}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}
/* Бараан мобайл бар / нэвтрэх хуудасны баатар хэсэг дээрх хувилбар */
.app-mobilebar .theme-toggle,.auth-hero .theme-toggle{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;
}

/* Хэвлэхэд үргэлж цайвар */
@media print{
  :root,:root[data-theme="dark"],:root:not([data-theme="light"]){
    color-scheme:light;
    --app-surface:#ffffff; --app-text:#111827; --app-muted:#64748b; --app-line:#d7deea;
    --surface:#ffffff; --surface-glass:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9; --surface-4:#e2e8f0;
    --text:#0f172a; --text-2:#334155; --muted:#64748b; --line:#e2e8f0; --line-strong:#cbd5e1;
    --ok-bg:#ecfdf3; --ok-fg:#166534; --bad-bg:#fef2f2; --bad-fg:#991b1b;
    --info-bg:#eff6ff; --info-fg:#1d4ed8; --warn-bg:#fff7ed; --warn-fg:#9a3412;
    --bg-app:#ffffff; --bg-card:#ffffff; --bg-input:#ffffff; --border-light:#e2e8f0; --text-primary:#0f172a; --text-muted:#64748b;
  }
  .theme-toggle,.app-mobilebar,.app-nav-backdrop{display:none !important}
  *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important}
}
/* iPad/утсан дээр мобайл бар дахь товч хангалттай — topbar-ийнхийг нууна. */
@media (max-width:1024px){ .topbar-actions .theme-toggle{display:none} }