/* Talentverse design system v2 — framed, layered surfaces on a tinted ground (complements Tailwind utilities) */
:root { --teal:#1AA89E; --teal-d:#12756F; --teal-dd:#0C4542; --red:#B52532; --ink:#111515; --ink-2:#2B3333; --ink-3:#5B6666; --paper:#F3F6F6; --card:#FFFFFF;
        --line:#CBD7D6; --line-2:#B3C4C3; --gold:#D98E04; --blue:#3B82F6; --p1:#3B82F6; --p2:#B52532; --p3:#D98E04; --p4:#1AA89E;
        --r-lg:18px; --r-md:14px; --r-sm:10px;
        --shadow-card:0 1px 0 rgba(17,21,21,.04), 0 10px 30px -16px rgba(12,69,66,.28);
        --shadow-pop:0 24px 60px -24px rgba(12,69,66,.45);
        --grad-brand:linear-gradient(90deg,var(--teal) 0%, #6BC9C0 55%, var(--red) 100%); }
html { scroll-behavior: smooth; }
body { font-size: 15px; line-height: 1.55; color: var(--ink); background:
  radial-gradient(1100px 420px at 12% -8%, rgba(26,168,158,.16), transparent 62%),
  radial-gradient(800px 360px at 100% -4%, rgba(181,37,50,.07), transparent 60%),
  linear-gradient(180deg, #EEF4F4 0%, var(--paper) 38%, var(--paper) 100%); background-attachment: fixed; }
h1,h2,h3,h4,.display { font-family: 'Prompt','Sarabun',sans-serif; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
a { color: var(--teal-d); }

/* ---- surfaces */
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-card); }
.card::before { content:''; position:absolute; left:14px; right:14px; top:-1px; height:3px; border-radius:0 0 4px 4px; background:var(--grad-brand); opacity:.9; }
.card > .eyebrow:first-child, .card > h3:first-child, .card > h2:first-child { margin-top:2px; }
.card-tight { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:var(--r-md); padding:13px 15px; box-shadow:0 1px 0 rgba(17,21,21,.03), 0 6px 18px -12px rgba(12,69,66,.25); }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.kpi::after { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--teal); }
.kpi b { display:block; font-family:'Prompt',sans-serif; font-size:26px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi span { font-size:12.5px; color:var(--ink-3); }
.tw { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(17,21,21,.03); }
.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th { text-align:left; font-family:'Prompt',sans-serif; font-weight:500; font-size:12px; letter-spacing:.05em; color:var(--teal-dd); padding:9px 11px; border-bottom:2px solid var(--line); background:#EEF6F5; white-space:nowrap; }
.tbl td { padding:9px 11px; border-bottom:1px solid #E6EDEC; vertical-align:top; }
.tbl tr:last-child td { border-bottom:none; } .tbl tr.clickable:hover td { background:#F3FAF9; cursor:pointer; }
.tbl tbody tr:nth-child(even) td { background:#FAFCFC; }
.note { border:1px solid #BFE3DF; border-left:4px solid var(--teal); background:#EEF8F7; padding:10px 14px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13.5px; }
.warn { border:1px solid #F2D79B; border-left:4px solid var(--gold); background:#FDF6E4; padding:10px 14px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13.5px; }
.alert { border:1px solid #EBA2A9; border-left:4px solid var(--red); background:#FBEEF0; padding:10px 14px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13.5px; }

/* ---- controls */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:12px; font-family:'Prompt',sans-serif; font-weight:500; font-size:14px;
       border:1px solid transparent; cursor:pointer; transition:.15s; white-space:nowrap; }
.btn:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.btn-primary { background:linear-gradient(180deg,#22B5AA,#158F87); color:#fff; border-color:#128079; box-shadow:0 6px 16px -8px rgba(18,117,111,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn-danger { background:linear-gradient(180deg,#C42C3A,#9E1F2B); color:#fff; border-color:#8F1B26; box-shadow:0 6px 16px -8px rgba(181,37,50,.7); } .btn-danger:hover { filter:brightness(1.05); }
.btn-ghost { background:#fff; border-color:var(--line-2); color:var(--ink); box-shadow:0 1px 0 rgba(17,21,21,.04); } .btn-ghost:hover { border-color:var(--teal); color:var(--teal-d); background:#F6FBFA; }
.btn-soft { background:#EEF8F7; color:var(--teal-d); border-color:#BFE3DF; } .btn-soft:hover { background:#D6F0ED; }
.btn[disabled], .btn.disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-sm { padding:5px 11px; font-size:12.5px; border-radius:9px; }
.input, select.input, textarea.input { width:100%; border:1px solid var(--line-2); border-radius:12px; padding:9px 12px; background:#fff; font:inherit; font-size:14px; box-shadow:inset 0 1px 2px rgba(17,21,21,.05); }
.input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(26,168,158,.18); }
label.lbl { display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-family:'Prompt',sans-serif; margin-bottom:4px; }
.pill { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-family:'Prompt',sans-serif; font-size:11.5px; font-weight:500; letter-spacing:.02em; white-space:nowrap; border:1px solid transparent; }
.pill-teal { background:#EEF8F7; color:var(--teal-d); border-color:#B1D7D4; } .pill-red { background:#FBEEF0; color:var(--red); border-color:#EBA2A9; }
.pill-gold { background:#FDF3DF; color:#9A6502; border-color:#F2D79B; } .pill-grey { background:#F1F4F4; color:var(--ink-3); border-color:var(--line); }
.pill-ink { background:var(--ink); color:#fff; border-color:var(--ink); } .pill-blue { background:#EAF2FF; color:#1D4ED8; border-color:#BFD5FF; } .pill-ok { background:#E8F5EE; color:#1E7A46; border-color:#B5E0C6; }
.eyebrow { font-family:'Prompt',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.bar { height:8px; background:#E6EDEC; border-radius:4px; overflow:hidden; box-shadow:inset 0 1px 1px rgba(17,21,21,.06); } .bar > i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--teal),#158F87); transition:width .5s ease; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; } .tabs button, .tabs a { padding:7px 12px; border-radius:10px; border:1px solid var(--line-2); background:#fff; font-family:'Prompt',sans-serif; font-size:13px; cursor:pointer; box-shadow:0 1px 0 rgba(17,21,21,.04); color:var(--ink); text-decoration:none; }
.tabs button:hover, .tabs a:hover { border-color:var(--teal); }
.tabs button.on, .tabs a.on { background:linear-gradient(180deg,#2B3333,var(--ink)); color:#fff; border-color:var(--ink); }
.steps { display:flex; gap:6px; flex-wrap:wrap; } .steps a { padding:6px 11px; border-radius:999px; border:1px solid var(--line-2); font-size:12.5px; font-family:'Prompt',sans-serif; background:#fff; color:var(--ink-2); }
.steps a.on { background:var(--teal); color:#fff; border-color:var(--teal-d); box-shadow:0 4px 10px -6px rgba(18,117,111,.8); } .steps a.done { border-color:#B1D7D4; color:var(--teal-d); background:#F3FAF9; }
.code-tag { font-family:'IBM Plex Mono',monospace; font-size:11.5px; padding:1px 6px; border-radius:5px; border:1px solid var(--line); background:#fff; }
.code-F { color:var(--teal-d); border-color:#B1D7D4; } .code-L { color:#9A6502; border-color:#F2D79B; } .code-C { color:var(--ink); border-color:#8A9494; } .code-P { color:var(--red); border-color:#EBA2A9; }

/* ---- shell */
.topbar { background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line); box-shadow:0 6px 20px -16px rgba(12,69,66,.35); position:relative; }
.topbar::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--grad-brand); }
.logo-mark { width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:#fff; box-shadow:0 2px 6px -3px rgba(17,21,21,.3); object-fit:cover; }
.sidenav { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:10px; box-shadow:var(--shadow-card); }
.sidenav a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; color:var(--ink-2); font-size:14px; border:1px solid transparent; }
.sidenav a:hover { background:#EEF8F7; color:var(--teal-d); border-color:#BFE3DF; }
.sidenav a.active { background:linear-gradient(90deg,#22B5AA,#158F87); color:#fff; border-color:#128079; box-shadow:0 8px 18px -10px rgba(18,117,111,.8); }
.sidenav .grp { font-family:'Prompt',sans-serif; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8A9494; padding:12px 12px 4px; }
.school-chip { margin:12px 4px 4px; padding:10px; border-radius:14px; border:1px solid #BFE3DF; background:linear-gradient(180deg,#F3FAF9,#EEF8F7); font-size:12px; color:var(--teal-d); display:flex; gap:10px; align-items:center; }

/* ---- feature blocks */
.fade { animation: fade .45s ease both; } @keyframes fade { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }
.uni { display:grid; grid-template-columns:34px 72px 1fr auto; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; box-shadow:0 1px 0 rgba(17,21,21,.03), 0 8px 22px -16px rgba(12,69,66,.3); transition:.15s; }
.uni:hover { transform:translateY(-1px); box-shadow:0 14px 30px -18px rgba(12,69,66,.45); border-color:var(--line-2); }
.uni.pin { border-color:#EBA2A9; border-left:4px solid var(--red); background:linear-gradient(90deg,#FFF6F6,#fff 32%); }
.uni .rank { font-family:'Prompt',sans-serif; font-size:22px; font-weight:600; color:var(--ink-3); text-align:center; }
.mb { display:grid; grid-template-columns:26px 1fr 30px; gap:6px; align-items:center; font-size:11.5px; color:var(--ink-3); }
.mb .tr { height:6px; background:#E6EDEC; border-radius:3px; overflow:hidden; } .mb .tr i { display:block; height:100%; border-radius:3px; }
.wcell { background:#F4F8F8; border:1px solid var(--line); border-radius:12px; padding:10px 12px; } .wcell .nm { display:flex; justify-content:space-between; font-size:12.5px; font-family:'Prompt',sans-serif; margin-bottom:4px; }
input[type=range] { width:100%; accent-color:var(--teal); }
.ring-box { display:flex; flex-direction:column; align-items:center; gap:4px; } .ring-box .cap { font-size:11.5px; color:var(--ink-3); font-family:'Prompt',sans-serif; }
.hero { position:relative; overflow:hidden; color:#fff; border-radius:22px; padding:24px 26px; border:1px solid rgba(255,255,255,.25);
        background:linear-gradient(135deg,rgba(12,69,66,.97),rgba(18,117,111,.94) 58%,rgba(26,168,158,.92)), url('/assets/img/talent-bg-wave.png') center/cover; box-shadow:0 18px 40px -22px rgba(12,69,66,.7); }
.hero::after { content:''; position:absolute; inset:0; background:radial-gradient(600px 200px at 100% 0, rgba(255,255,255,.14), transparent 60%); pointer-events:none; }
.hero > * { position:relative; z-index:1; }
.hero .av { width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.45); display:flex; align-items:center; justify-content:center; font-family:'Prompt',sans-serif; font-size:24px; font-weight:600; box-shadow:0 6px 16px -8px rgba(0,0,0,.5); }
.timeline .ev { border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:#fff; box-shadow:0 1px 0 rgba(17,21,21,.03), 0 6px 16px -14px rgba(12,69,66,.3); }
.timeline .ev.done { border-color:#B1D7D4; border-left:4px solid var(--teal); background:linear-gradient(90deg,#F3FAF9,#fff 40%); } .timeline .mhead { font-family:'Prompt',sans-serif; font-weight:600; margin:14px 0 8px; }
.chat { display:flex; flex-direction:column; gap:10px; } .msg { max-width:78%; padding:10px 14px; border-radius:16px; font-size:14px; white-space:pre-wrap; }
.msg.user { align-self:flex-end; background:linear-gradient(180deg,#22B5AA,#158F87); color:#fff; border-bottom-right-radius:4px; box-shadow:0 6px 14px -8px rgba(18,117,111,.7); } .msg.ai { align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; box-shadow:0 1px 0 rgba(17,21,21,.03); }
.modal-bg { position:fixed; inset:0; background:rgba(12,31,37,.5); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal { background:#fff; border:1px solid var(--line); border-radius:20px; width:min(720px,100%); max-height:90vh; overflow:auto; padding:22px 24px; box-shadow:var(--shadow-pop); position:relative; }
.modal::before { content:''; position:absolute; left:18px; right:18px; top:0; height:3px; border-radius:0 0 4px 4px; background:var(--grad-brand); }
.toast { background:var(--ink); color:#fff; padding:10px 16px; border-radius:12px; font-size:13.5px; box-shadow:0 10px 30px -10px rgba(0,0,0,.4); animation: fade .3s ease; max-width:360px; border:1px solid rgba(255,255,255,.12); }
.toast.ok { background:#1E7A46; } .toast.err { background:var(--red); }
.countdown { font-family:'Prompt',sans-serif; font-size:34px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.mark-btn { width:100%; padding:40px 20px; border-radius:24px; background:linear-gradient(180deg,#C42C3A,#9E1F2B); color:#fff; font-family:'Prompt',sans-serif; font-size:24px; font-weight:600; border:1px solid #8F1B26; cursor:pointer; box-shadow:0 16px 40px -14px rgba(181,37,50,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.mark-btn:active { transform:scale(.98); }
.level { height:14px; background:#E6EDEC; border-radius:7px; overflow:hidden; border:1px solid var(--line); } .level i { display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--gold) 70%,var(--red)); width:0; transition:width .1s; }
.ring-box svg, .uni svg { filter: drop-shadow(0 2px 3px rgba(12,69,66,.15)); }
@media (max-width: 860px) { .uni { grid-template-columns:28px 60px 1fr; } .uni .act { grid-column: 1 / -1; } .card { padding:16px; } }
@media print { .no-print { display:none !important; } body { background:#fff; } .card::before, .topbar::after { display:none; } }

/* ---------- inline SVG icons (icons.js) — replace emoji everywhere ---------- */
.ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.18em; flex: none; }
.ic-lg { width: 1.35em; height: 1.35em; vertical-align: -0.3em; }
.ic-xl { width: 2.2rem; height: 2.2rem; }
.ic-2x { width: 3rem; height: 3rem; stroke-width: 1.5; }
.sidenav a .ic, .sidenav a .nav-ic { width: 18px; height: 18px; margin-right: 10px; opacity: .9; }
.pill .ic { width: .95em; height: .95em; margin-right: .25em; vertical-align: -0.12em; }
.ic-box { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: #E6F5F3; color: var(--teal); border: 1px solid #CDEBE7; flex: none; }
.ic-box.red { background: #FBE9EB; color: var(--red); border-color: #F3CDD2; }
.ic-box.gold { background: #FFF4DB; color: #9A6A00; border-color: #F5E1AE; }
.ic-box .ic { width: 1.25rem; height: 1.25rem; }

/* ---------- people: portrait + name block next to every student code / username ---------- */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 999px; overflow: hidden;
  background: #E6F5F3; color: #0F7A72; font-weight: 700; font-family: var(--font-display, inherit); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(11,43,40,.12); width: 40px; height: 40px; font-size: 15px; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.avatar.md { width: 46px; height: 46px; font-size: 17px; }
.avatar.lg { width: 64px; height: 64px; font-size: 24px; border-width: 3px; }
.avatar.xl { width: 88px; height: 88px; font-size: 32px; border-width: 3px; }
.avatar.dark { border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.25); }
.person { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.person .nm { font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .nm small { font-weight: 500; color: var(--ink-3); }
.person .meta { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .meta .code-tag, .person .meta .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.tbl td .person { padding: 2px 0; }
.avatar-stack { display: inline-flex; } .avatar-stack .avatar { margin-left: -10px; } .avatar-stack .avatar:first-child { margin-left: 0; }