*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fff;--bg2:#f7f7f5;--bg3:#f0efea;
  --text:#1a1a1a;--text2:#6b6b6b;--text3:#9a9a9a;
  --border:rgba(0,0,0,0.12);--border2:rgba(0,0,0,0.2);
  --blue:#185FA5;--blue-bg:#E6F1FB;--blue-text:#0C447C;
  --green:#3B6D11;--green-bg:#EAF3DE;
  --red:#A32D2D;--red-bg:#FCEBEB;
  --amber:#854F0B;--amber-bg:#FAEEDA;
  --pink:#72243E;--pink-bg:#FBEAF0;
  --gray:#5F5E5A;--gray-bg:#F1EFE8;
  --purple:#3C3489;--purple-bg:#EEEDFE;
  --radius:8px;--radius-lg:12px;
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg3);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh}
.app{max-width:900px;margin:0 auto;padding:16px}
.hdr{background:linear-gradient(135deg,#2563ea 0%,#1c8abb 50%,#10b982 100%);border:none;border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;box-shadow:0 4px 16px rgba(37,99,234,0.25)}
.hdr h1{font-size:18px;font-weight:600;color:#fff}
.hdr p{font-size:12px;color:rgba(255,255,255,0.8);margin-top:2px}
.name-inp{padding:7px 12px;border:.5px solid rgba(255,255,255,0.4);border-radius:var(--radius);font-size:13px;width:160px;background:rgba(255,255,255,0.15);color:#fff}
.name-inp:focus{outline:none;border-color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.25)}.name-inp::placeholder{color:rgba(255,255,255,0.6)}
.nav{display:flex;gap:4px;background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:6px;margin-bottom:12px;flex-wrap:wrap}
.nb{padding:8px 16px;border:none;border-radius:var(--radius);background:transparent;cursor:pointer;font-size:13px;color:var(--text2);font-weight:500;transition:all .15s;display:flex;align-items:center;gap:6px}
.nb:hover{background:var(--bg2);color:var(--text)}.nb.on{background:var(--blue);color:#fff}
.nb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg{display:none}.pg.on{display:block}
.card{background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:12px}
.ct{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:12px;text-transform:uppercase;letter-spacing:.4px}
.mets{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:12px}
.met{background:var(--bg2);border-radius:var(--radius);padding:12px 14px;text-align:center}
.mv{font-size:22px;font-weight:700;color:var(--text)}.ml{font-size:11px;color:var(--text2);margin-top:2px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.fg label{display:block;font-size:12px;color:var(--text2);margin-bottom:4px;font-weight:500}
input[type=text],input[type=date],input[type=number],select,textarea{width:100%;padding:8px 10px;border:.5px solid var(--border2);border-radius:var(--radius);font-size:13px;background:var(--bg);color:var(--text);font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(24,95,165,.1)}
textarea{resize:vertical;min-height:60px}
.req{color:var(--red)}
.btn{padding:8px 16px;border:.5px solid var(--border2);border-radius:var(--radius);background:transparent;cursor:pointer;font-size:13px;color:var(--text);font-family:inherit;font-weight:500;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--bg2)}.btn:active{transform:scale(.98)}
.bp{background:var(--blue);color:#fff;border-color:var(--blue)}.bp:hover{background:#0C447C}
.bd{color:var(--red);border-color:#F09595;font-size:12px;padding:4px 8px}.bd:hover{background:var(--red-bg)}
.bs{font-size:12px;padding:5px 10px}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.bg{background:var(--green-bg);color:var(--green)}.ba{background:var(--amber-bg);color:var(--amber)}
.br{background:var(--red-bg);color:var(--red)}.bgr{background:var(--gray-bg);color:var(--gray)}
.sb{border:.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:10px}
.sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:6px}
.st{font-size:14px;font-weight:600}.sm{font-size:11px;color:var(--text2)}
.ss{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:10px}
.sx{text-align:center;padding:8px 4px;border-radius:var(--radius);background:var(--bg2)}
.sx.cor{background:var(--green-bg)}.sx.cor .sv{color:var(--green)}.sx.cor .sl{color:var(--green)}
.sx.wrg{background:var(--red-bg)}.sx.wrg .sv{color:var(--red)}.sx.wrg .sl{color:var(--red)}
.sx.sco{background:var(--blue-bg)}.sx.sco .sv{color:var(--blue-text)}.sx.sco .sl{color:var(--blue-text)}
.sx.una{background:var(--purple-bg)}.sx.una .sv{color:var(--purple)}.sx.una .sl{color:var(--purple)}
.sv{font-size:18px;font-weight:700}.sl{font-size:10px;color:var(--text2);margin-top:1px}
.wal{margin-bottom:8px}
.wae{border:.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:6px;background:var(--bg2)}
.waeh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.wan{font-size:11px;font-weight:700;color:var(--text2);min-width:18px}
.wat{font-size:13px;font-weight:600;color:var(--text);flex:1;min-width:0;word-break:break-word}
.wan2{font-size:12px;color:var(--text2);margin-top:2px;padding-left:26px}
.waf{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:8px}
.waft{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:8px}
.pw{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pl{font-size:12px;color:var(--text2);width:140px;flex-shrink:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt{flex:1;background:var(--bg3);border-radius:4px;height:14px;overflow:hidden;border:.5px solid var(--border)}
.pf{height:100%;border-radius:4px;transition:width .4s}
.pv{font-size:12px;color:var(--text);width:44px;text-align:right;flex-shrink:0;font-weight:500}
.tw{overflow-x:auto}
.tf-card{background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px}
.tf-head{background:linear-gradient(135deg,#2563ea 0%,#1c8abb 50%,#10b982 100%);padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.tf-title{font-size:13px;font-weight:600;color:#fff;display:flex;align-items:center;gap:6px}
.tf-date{font-size:11px;color:rgba(255,255,255,0.75)}
.tf-row{padding:12px 16px;border-bottom:.5px solid var(--border);display:flex;gap:12px;align-items:flex-start}
.tf-row:last-child{border-bottom:none}
.tf-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.tf-body{flex:1;min-width:0}
.tf-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.tf-topic{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.tf-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.tf-tip{font-size:11px;color:var(--text2);padding:6px 10px;background:var(--bg2);border-radius:var(--radius);border-left:2px solid var(--border2);line-height:1.5}
.tf-empty{padding:16px;font-size:13px;color:var(--text2);text-align:center}
.qb-row{background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:8px}
.qb-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.qb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.qb-topic{font-size:14px;font-weight:600;color:var(--text);flex:1}
.qb-hint{font-size:12px;color:var(--blue-text);background:var(--blue-bg);border-radius:var(--radius);padding:6px 10px;margin-bottom:8px;border-left:2px solid var(--blue)}
.qb-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--text2)}
.qb-note{font-size:12px;color:var(--text2);margin-top:6px;padding-top:6px;border-top:.5px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
td{padding:8px 10px;border-bottom:.5px solid var(--border);color:var(--text)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg2)}
.cw{position:relative;width:100%}
.al{padding:8px 12px;border-radius:var(--radius);font-size:12px;margin-bottom:10px;display:none}
.al-ok{background:var(--green-bg);color:var(--green);border:.5px solid #C0DD97}
.al-er{background:var(--red-bg);color:var(--red);border:.5px solid #F09595}
.mc{background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius-lg);margin-bottom:10px;overflow:hidden}
.mch{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;flex-wrap:wrap;gap:8px}
.mch:hover{background:var(--bg2)}
.mcb{padding:0 16px 14px;border-top:.5px solid var(--border);display:none}
.mcb.on{display:block;padding-top:12px}
.msg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-bottom:10px}
.msb{border:.5px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.msn{font-size:12px;font-weight:600;margin-bottom:6px}
.empty{text-align:center;padding:40px 20px;color:var(--text2)}
.ei{font-size:36px;margin-bottom:8px;opacity:.4}.et{font-size:14px}
.rs{background:var(--amber-bg);color:var(--amber)}.rc{background:var(--red-bg);color:var(--red)}
.rt{background:var(--blue-bg);color:var(--blue-text)}.rg{background:var(--pink-bg);color:var(--pink)}
.rk{background:var(--gray-bg);color:var(--gray)}
.ut{background:var(--amber-bg);color:var(--amber)}.uk{background:var(--red-bg);color:var(--red)}
.us{background:var(--purple-bg);color:var(--purple)}.uc{background:var(--blue-bg);color:var(--blue-text)}
/* Searchable dropdown */
.ddw{position:relative;width:100%}
.ddi{width:100%;padding:8px 10px;border:.5px solid var(--border2);border-radius:var(--radius);font-size:13px;background:var(--bg);color:var(--text);cursor:pointer;box-sizing:border-box}
.ddi:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(24,95,165,.1)}
.ddi:disabled{opacity:.4;cursor:default;background:var(--bg2)}
.ddl{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--bg);border:.5px solid var(--border2);border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:9999;max-height:220px;overflow-y:auto;display:none}
.ddl.on{display:block}
.ddit{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--text)}
.ddit:hover,.ddit.hi{background:var(--blue-bg);color:var(--blue-text)}
.ddit.gh{font-size:11px;font-weight:700;color:var(--text3);padding:6px 12px 3px;text-transform:uppercase;letter-spacing:.4px;cursor:default;background:var(--bg2);pointer-events:none}
.ddem{padding:10px 12px;font-size:13px;color:var(--text2);font-style:italic}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--blue-bg);color:var(--blue-text);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;margin-top:6px;max-width:100%;flex-wrap:wrap}
.chipc{cursor:pointer;font-size:14px;opacity:.6;flex-shrink:0}.chipc:hover{opacity:1}
.tps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:4px}
.tpl{font-size:11px;color:var(--text2);font-weight:500;margin-bottom:3px}

/* PDF / Print styles */
@media print {
  body * { visibility: hidden; }
  #pdf-report, #pdf-report * { visibility: visible; }
  #pdf-report { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 999999; }
  #pdf-report > div { background: #fff !important; border-radius: 0 !important; padding: 16px !important; }
  button { display: none !important; }
}
#pdf-report { display: none; }
.pdf-header { background: linear-gradient(135deg,#2563ea,#1c8abb,#10b982); color: #fff; padding: 20px 24px; border-radius: 12px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.pdf-header h1 { font-size: 20px; font-weight: 700; }
.pdf-header p { font-size: 12px; opacity: .8; margin-top: 4px; }
.pdf-header .pdf-date { font-size: 12px; opacity: .75; text-align: right; }
.pdf-section { margin-bottom: 16px; }
.pdf-section-title { font-size: 12px; font-weight: 700; color: #6b6b6b; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #e5e5e5; }
.pdf-metrics { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin-bottom: 12px; }
.pdf-met { background: #f7f7f5; border-radius: 8px; padding: 10px; text-align: center; }
.pdf-met-val { font-size: 20px; font-weight: 700; color: #1a1a1a; }
.pdf-met-lbl { font-size: 10px; color: #6b6b6b; margin-top: 2px; }
.pdf-subj-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
.pdf-subj { border-radius: 8px; padding: 10px 12px; }
.pdf-subj-name { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.pdf-subj-score { font-size: 18px; font-weight: 700; }
.pdf-subj-acc { font-size: 11px; margin-top: 2px; opacity: .8; }
.pdf-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 12px; }
.pdf-table th { text-align: left; padding: 6px 10px; background: #f0efea; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #6b6b6b; }
.pdf-table td { padding: 6px 10px; border-bottom: .5px solid #e5e5e5; color: #1a1a1a; }
.pdf-table tr:last-child td { border-bottom: none; }
.pdf-prog-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.pdf-prog-label { font-size: 11px; color: #1a1a1a; width: 160px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-prog-track { flex: 1; background: #f0efea; border-radius: 4px; height: 12px; overflow: hidden; }
.pdf-prog-fill { height: 100%; border-radius: 4px; }
.pdf-prog-val { font-size: 11px; color: #1a1a1a; width: 28px; text-align: right; flex-shrink: 0; font-weight: 600; }
.pdf-badge { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 10px; font-weight: 600; }
.pdf-footer { text-align: center; font-size: 10px; color: #9a9a9a; margin-top: 16px; padding-top: 12px; border-top: .5px solid #e5e5e5; }

@media(max-width:640px){
  .ss{grid-template-columns:1fr 1fr 1fr}
  .msg{grid-template-columns:1fr}
  .nb span{display:none}
  .nb{padding:8px 10px}
  .tps{grid-template-columns:1fr}
}
@media(min-width:641px){
  .nb span{display:inline}
}