@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#1a3a5c;--teal:#0ea5e9;--gold:#f59e0b;--bg:#f0f5fa;--white:#fff;
  --border:#e2e8f0;--slate:#334155;--muted:#64748b;--sw:280px;--hh:64px;--r:14px;
  --sh:0 4px 24px rgba(26,58,92,.1)}
body{font-family:'Noto Sans',sans-serif;background:var(--bg);color:var(--slate);
  display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* Header */
.app-header{height:var(--hh);background:var(--navy);display:flex;align-items:center;
  padding:0 24px;gap:16px;flex-shrink:0;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--teal),var(--gold));
  border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}
.logo-text{font-family:'Playfair Display',serif;color:#fff;font-size:17px}
.logo-sub{color:rgba(255,255,255,.5);font-size:11px}
.hsp{flex:1}
.live-badge{display:flex;align-items:center;gap:6px;background:rgba(16,185,129,.18);
  border:1px solid rgba(16,185,129,.35);color:#6ee7b7;font-size:11px;font-weight:600;
  padding:4px 12px;border-radius:99px}
.live-dot{width:7px;height:7px;background:#10b981;border-radius:50%;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
.btn-tog{display:none;background:none;border:none;cursor:pointer;color:#fff;padding:6px}

/* Layout */
.app-body{display:flex;flex:1;overflow:hidden}
#sidebar{width:var(--sw);background:var(--white);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:transform .3s}
.sb-inner{flex:1;overflow-y:auto;padding:12px 0}
.sb-inner::-webkit-scrollbar{width:4px}
.sb-inner::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.nav-group{margin-bottom:4px}
.nav-group-label{display:flex;align-items:center;gap:8px;padding:6px 20px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.nav-group-label .material-icons{font-size:16px;color:var(--teal)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px 9px 32px;
  font-size:13px;cursor:pointer;border-left:3px solid transparent;transition:all .18s;color:var(--slate)}
.nav-item .material-icons{font-size:17px;color:var(--muted)}
.nav-item:hover{background:#f0f9ff;color:var(--teal)}
.nav-item:hover .material-icons{color:var(--teal)}
.nav-item.active{background:#e0f2fe;border-left-color:var(--teal);color:var(--navy);font-weight:600}
.nav-item.active .material-icons{color:var(--teal)}
.app-main{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:20px;gap:14px}
.chart-header{display:flex;align-items:center;gap:10px}
#chart-title{font-family:'Playfair Display',serif;font-size:20px;color:var(--navy)}
.type-badge{padding:3px 11px;background:var(--teal);color:#fff;font-size:10px;
  font-weight:700;border-radius:99px;text-transform:uppercase;letter-spacing:.06em}
.chart-card{flex:1;background:var(--white);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
#chart-container{width:100%;height:100%;padding:20px;position:relative}

/* S01 cards */
.s01-header{text-align:center;padding:20px 20px 14px;border-bottom:1px solid var(--border);margin-bottom:20px}
.s01-school{font-family:'Playfair Display',serif;font-size:24px;color:var(--navy)}
.s01-meta{font-size:12px;color:var(--muted);margin-top:4px}
.s01-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;padding:0 20px 20px}
.s01-card{background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;padding:20px;
  text-align:center;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.s01-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac)}
.s01-card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.s01-val{font-size:30px;font-weight:700;color:var(--navy);margin:8px 0 4px}
.s01-lbl{font-size:12px;color:var(--muted);font-weight:500}

/* S12 */
.s12-wrap{height:100%;display:flex;flex-direction:column}
.s12-head{display:flex;align-items:center;gap:10px;padding:14px 20px;
  background:linear-gradient(135deg,var(--navy),#1e4d8c);color:#fff;
  border-radius:var(--r) var(--r) 0 0;font-size:14px;font-weight:600}
.s12-loc{display:flex;align-items:center;gap:4px;font-size:12px;color:rgba(255,255,255,.65);margin-left:8px}
.s12-pager{margin-left:auto;display:flex;gap:6px}
.pgb{width:30px;height:30px;background:rgba(255,255,255,.15);color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:7px;cursor:pointer;font-weight:700;transition:all .2s}
.pgb.active,.pgb:hover{background:var(--teal);border-color:var(--teal)}
.s12-pages{flex:1;overflow:hidden}
.s12-page{height:100%;padding:16px}
.s12-p1{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;height:100%}
.s12-criteria{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:10px}
.s12-cc{background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;
  padding:12px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.s12-bar{position:absolute;bottom:0;left:0;height:4px;width:var(--pct);
  background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .6s}
.s12-score{font-size:20px;font-weight:700;color:var(--navy)}
.s12-score span{font-size:12px;color:var(--muted);font-weight:400}
.s12-name{font-size:11px;color:var(--muted);margin-top:2px;font-weight:500}
.s12-subj-area{position:relative}
.s12-p2{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;height:100%}
.s12-box{background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;align-items:center}
.s12-bt{font-size:11px;font-weight:600;color:var(--slate);text-align:center;margin-top:8px}
.s12-bs{font-size:11px;color:var(--muted);margin-top:2px}

/* Loading/error */
.chart-loading{display:flex;align-items:center;justify-content:center;height:100%}
.spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--teal);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chart-error{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:12px;color:var(--muted)}

@media(max-width:768px){
  #sidebar{position:fixed;left:0;top:var(--hh);bottom:0;z-index:200;transform:translateX(-100%)}
  #sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.2)}
  .btn-tog{display:block}
  .app-main{padding:12px}
  .s12-p1{grid-template-columns:1fr}
  .s12-p2{grid-template-columns:1fr 1fr}
}

/* ════ S12 ТУСГАЙ ЗАГВАР ════════════════════════════════════════ */
.s12-wrap{height:100%;display:flex;flex-direction:column;background:#0f2744;border-radius:4px}

/* Header */
.s12-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;background:linear-gradient(135deg,#0a1e3d,#1a3a6e);
  border-bottom:2px solid #faa500;flex-shrink:0;
}
.s12-head-left{display:flex;flex-direction:column;gap:2px}
.s12-head-year{font-size:11px;color:rgba(255,255,255,.7);font-weight:500}
.s12-head-level{font-size:13px;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.s12-head-name{font-size:18px;font-weight:900;color:#faa500;letter-spacing:.08em;text-transform:uppercase}
.s12-pager{display:flex;gap:6px}

/* Pages */
.s12-pages{flex:1;overflow:hidden}
.s12-page{height:100%;overflow:hidden}

/* ── ХУУДАС 1 ──────────────────────────────────────────────── */
.s12-p1{display:grid;grid-template-columns:1fr 1.3fr;height:100%;gap:0}

.s12-left{
  padding:14px 16px;
  background:linear-gradient(180deg,#0f2744 0%,#0a1e3d 100%);
  border-right:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;
}
.s12-section-title{
  font-size:14px;font-weight:800;color:#faa500;
  padding-bottom:10px;border-bottom:1px solid rgba(250,165,0,.3);
  margin-bottom:12px;text-align:center;letter-spacing:.05em;
}

/* Шалгуур үзүүлэлтийн мөрүүд */
.s12-criteria-list{display:flex;flex-direction:column;gap:8px;flex:1}
.s12-crit-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);border-radius:8px;
  padding:8px 10px;border:1px solid rgba(255,255,255,.08);
}
.s12-crit-num{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#c8860a,#faa500);
  color:#fff;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 8px rgba(250,165,0,.3);
}
.s12-crit-name{flex:1;font-size:11.5px;color:rgba(255,255,255,.9);line-height:1.4;font-weight:500}
.s12-crit-score{
  min-width:48px;text-align:center;
  background:linear-gradient(135deg,#1a3a6e,#1e5fa8);
  color:#fff;font-size:14px;font-weight:800;
  padding:4px 10px;border-radius:6px;
  border:1px solid rgba(30,95,168,.5);
}

/* Баруун хэсэг */
.s12-right{
  padding:14px 16px;background:linear-gradient(180deg,#0f2744 0%,#0a1e3d 100%);
  display:flex;flex-direction:column;
}
.s12-subj-chart-wrap{flex:1;position:relative;min-height:0}
.s12-subj-legend{
  display:flex;gap:16px;justify-content:center;margin-top:8px;
}
.s12-leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:rgba(255,255,255,.8)}
.s12-leg-item span{width:14px;height:10px;border-radius:2px;display:inline-block}

/* ── ХУУДАС 2 ──────────────────────────────────────────────── */
.s12-p2{
  display:grid;
  grid-template-columns:200px 1fr 1fr 1fr 1fr;
  grid-template-rows:1fr;
  gap:10px;padding:12px;height:100%;
}

/* Хамрагдалт */
.s12-cov-box{
  display:flex;flex-direction:column;gap:8px;
  grid-column:1;
}
.s12-cov-header{display:flex;flex-direction:column;gap:4px}
.s12-cov-badge{
  background:linear-gradient(135deg,#1a3a6e,#1e5fa8);
  color:#fff;font-size:10px;font-weight:800;
  padding:5px 10px;border-radius:6px;text-align:center;
  letter-spacing:.05em;border:1px solid rgba(30,95,168,.4);
}
.s12-cov-badge.wide{background:linear-gradient(135deg,#0a1e3d,#1a3a6e)}
.s12-cov-body{
  display:flex;flex-direction:column;gap:8px;flex:1;
  background:rgba(255,255,255,.04);border-radius:8px;
  padding:12px;border:1px solid rgba(255,255,255,.08);
}
.s12-cov-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.s12-cov-icon{font-size:28px}
.s12-cov-val{font-size:26px;font-weight:900;color:#fff}
.s12-cov-lbl{font-size:11px;color:rgba(255,255,255,.7);font-weight:500}
.s12-cov-pct{
  text-align:center;font-size:11px;color:rgba(255,255,255,.8);
  background:rgba(30,95,168,.3);border-radius:6px;padding:8px;
  border:1px solid rgba(30,95,168,.4);
}
.s12-cov-pct strong{font-size:16px;color:#faa500;display:block}

/* Индекс */
.s12-idx-box{
  display:flex;flex-direction:column;gap:6px;
  background:rgba(255,255,255,.04);border-radius:8px;
  padding:12px;border:1px solid rgba(255,255,255,.08);
}
.s12-idx-title{
  font-size:12px;font-weight:800;color:#fff;
  text-align:center;padding:5px;
  background:rgba(30,95,168,.4);border-radius:5px;margin-bottom:4px;
}
.s12-idx-row{display:flex;align-items:center;gap:6px}
.s12-idx-lbl{font-size:10px;color:rgba(255,255,255,.8);min-width:58px;font-weight:600}
.s12-idx-bar-wrap{flex:1;height:12px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.s12-idx-bar{height:100%;border-radius:3px;transition:width .6s ease;min-width:2px}
.s12-idx-bar.org{background:linear-gradient(90deg,#c8860a,#faa500)}
.s12-idx-bar.teach{background:linear-gradient(90deg,#1e5fa8,#42a5f5)}
.s12-idx-val{font-size:11px;font-weight:700;color:#fff;min-width:24px;text-align:right}

/* Гүйцэтгэлийн "шат" загвар */
.s12-perf-box{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.04);border-radius:8px;
  padding:12px;border:1px solid rgba(255,255,255,.08);
}
.s12-perf-title{
  font-size:11px;font-weight:800;color:#fff;text-align:center;
  padding:6px;background:rgba(30,95,168,.4);border-radius:5px;
  margin-bottom:10px;letter-spacing:.03em;
}
.s12-perf-bars{display:flex;gap:6px;align-items:flex-end;flex:1;justify-content:center}
.s12-perf-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.s12-perf-pct{font-size:13px;font-weight:900;line-height:1}
.s12-perf-bar-3d{
  width:100%;height:60px;
  background:var(--c);
  border-radius:4px 4px 0 0;
  position:relative;
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
  min-height:30px;
}
.s12-perf-bar-3d::after{
  content:'';position:absolute;
  top:-8px;left:0;right:-6px;height:8px;
  background:color-mix(in srgb, var(--c) 70%, white);
  transform:skewX(-30deg);transform-origin:bottom left;
  border-radius:2px 4px 0 0;
}
.s12-perf-bar-3d::before{
  content:'';position:absolute;
  top:-8px;right:-6px;bottom:0;width:6px;
  background:color-mix(in srgb, var(--c) 50%, black);
  transform:skewY(-30deg);transform-origin:top left;
}
.s12-perf-lbl{font-size:9px;color:rgba(255,255,255,.7);text-align:center;line-height:1.3;font-weight:600}