@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&display=swap');

/* ===== Kidzink brand foundation (from the prototype) ===== */
:root{
  --ivory:#F4EFE3;--cream:#F4EFE3;--red:#E43C2F;--yellow:#F5AF4D;
  --violet:#CDA5CB;--green:#71A94F;--ink:#2E2D2C;--paper:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ivory);color:var(--ink);font-family:'Poppins',system-ui,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-weight:900;line-height:0.98;letter-spacing:-0.02em}
.shout{text-transform:uppercase;letter-spacing:0.02em}
a{color:inherit}

.nb-card{background:var(--paper);border:4px solid var(--ink);border-radius:0;box-shadow:8px 8px 0 0 var(--ink);}
.nb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:900;text-transform:uppercase;letter-spacing:0.02em;font-size:16px;line-height:1;padding:16px 22px;background:var(--paper);color:var(--ink);border:4px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 0 var(--ink);cursor:pointer;transition:transform .08s ease, box-shadow .08s ease;user-select:none;}
.nb-btn:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 0 var(--ink)}
.nb-btn:active{transform:translate(6px,6px);box-shadow:0 0 0 0 var(--ink)}
.nb-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:6px 6px 0 0 var(--ink)}
.nb-btn--red{background:var(--red);color:var(--paper)}.nb-btn--yellow{background:var(--yellow)}.nb-btn--violet{background:var(--violet)}
.nb-pill{display:inline-flex;align-items:center;gap:6px;border:3px solid var(--ink);border-radius:999px;padding:6px 14px;font-weight:900;font-size:13px;text-transform:uppercase;background:var(--paper);box-shadow:3px 3px 0 0 var(--ink);}
.nb-avatar{display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--ink);border-radius:999px;font-weight:900;color:var(--ink);width:44px;height:44px;font-size:16px;box-shadow:3px 3px 0 0 var(--ink);flex-shrink:0;}
.nb-input,.nb-textarea{width:100%;font-family:inherit;font-weight:700;font-size:16px;background:var(--paper);color:var(--ink);border:4px solid var(--ink);border-radius:0;padding:14px 16px;outline:none;}
.nb-input::placeholder,.nb-textarea::placeholder{color:#9b9b9b;font-weight:700}
.nb-input:focus,.nb-textarea:focus{background:#FFFEF8;box-shadow:4px 4px 0 0 var(--ink)}
.nb-track{background:var(--paper);border:4px solid var(--ink);height:26px;overflow:hidden}
.nb-fill{height:100%;background:var(--red);border-right:4px solid var(--ink);transition:width .4s ease}
/* margin-top:auto, not position:fixed — body is a flex column, so this eats the
   leftover space and pins the marquee to the bottom of a short page, while a
   long page just scrolls it off the end instead of covering the last row. */
.nb-marquee{margin-top:auto;overflow:hidden;white-space:nowrap;border-top:4px solid var(--ink);background:var(--yellow)}
@keyframes nb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nb-marquee>div{display:inline-block;animation:nb-marquee 18s linear infinite;font-weight:900;text-transform:uppercase;padding:14px 0;font-size:20px}
.av-violet{background:var(--violet)}.av-yellow{background:var(--yellow)}.av-green{background:var(--green)}.av-red{background:var(--red);color:var(--paper)}

/* tier chips */
.tier-easy{background:var(--green)}
.tier-medium{background:var(--yellow)}
.tier-specialist{background:var(--red);color:var(--paper)}

/* ===== Navbar (shared) ===== */
body{min-height:100vh;display:flex;flex-direction:column}
.navbar{background:var(--paper);border-bottom:4px solid var(--ink);display:flex;align-items:center;gap:28px;padding:14px 26px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;cursor:pointer}
.logo .mark{width:40px;height:40px;background:var(--red);border:4px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:var(--paper);box-shadow:4px 4px 0 0 var(--ink)}
.logo .word{font-weight:800;font-size:26px;letter-spacing:-0.03em}
.logo .word .k{color:var(--red)}.logo .word .q{color:var(--ink)}
.xp{flex:1;min-width:240px;max-width:620px}
.xp .xp-label{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:6px}
.xp .xp-label .rank{font-weight:900;font-size:13px;text-transform:uppercase}
.xp-bar{position:relative}.xp-bar .nb-fill{background:var(--green)}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto}
.nav-tab{cursor:pointer;font-size:14px;padding:10px 14px}
.nav-tab.active{background:var(--ink);color:var(--paper)}
.bell-btn{position:relative;width:48px;height:48px;padding:0;font-size:20px}
.bell-dot{position:absolute;top:-6px;right:-8px;min-width:20px;height:20px;padding:0 4px;background:var(--red);color:var(--paper);border:3px solid var(--ink);border-radius:999px;font-size:11px;display:flex;align-items:center;justify-content:center}
.bell-dot.off{display:none}

/* ===== Progress strip ===== */
.strip{background:var(--violet);border-bottom:4px solid var(--ink);display:flex;align-items:center;gap:18px;padding:12px 26px}
.strip .label{font-weight:900;font-size:14px;text-transform:uppercase;white-space:nowrap}
.strip .nb-track{flex:1;height:20px}.strip .nb-fill{background:var(--ink)}
.strip .qpct{font-weight:900;font-size:13px;background:var(--paper);border:3px solid var(--ink);padding:3px 10px;box-shadow:2px 2px 0 0 var(--ink);white-space:nowrap}

/* ===== Main layout ===== */
.main{flex:1;display:grid;grid-template-columns:1fr 360px;gap:26px;padding:30px 26px;max-width:1280px;width:100%;margin:0 auto;align-items:start}
.single{max-width:1280px;width:100%;margin:0 auto;padding:30px 26px;flex:1}

/* ===== Annotate card ===== */
.annotate{padding:30px}
.badge-row{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.filename{font-size:26px;font-weight:900;line-height:1.05;letter-spacing:-0.03em;margin-bottom:18px;word-break:break-word}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
.meta{border:3px solid var(--ink);background:var(--cream);padding:12px 14px;box-shadow:3px 3px 0 0 var(--ink)}
.meta .k{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:0.08em;opacity:.65;margin-bottom:4px}
.meta .v{font-size:15px;font-weight:900;word-break:break-word}

.ta-label{font-size:13px;font-weight:900;text-transform:uppercase;margin-bottom:8px}
.helper{display:flex;align-items:center;gap:8px;margin-top:12px;margin-bottom:22px;font-size:13px;font-weight:700;flex-wrap:wrap}
.helper .pts{background:var(--green);border:3px solid var(--ink);padding:3px 9px;font-weight:900;text-transform:uppercase;font-size:12px}
.action-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;position:relative}
.action-row .submit{font-size:18px;padding:18px 28px}

.referral-banner{background:var(--yellow);border:4px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);padding:12px 16px;margin-bottom:18px;font-weight:700;font-size:14px}
.referral-banner b{font-weight:900}

.empty-state{text-align:center;padding:60px 20px}
.empty-state .ic{font-size:64px}
.empty-state h2{font-size:30px;margin:14px 0 8px}

/* float points */
.floatpts{position:absolute;left:60px;top:0;font-weight:900;font-size:34px;color:var(--green);-webkit-text-stroke:2px var(--ink);pointer-events:none;opacity:0}
.floatpts.go{animation:rise 1.1s ease-out forwards}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.3)}}

/* ===== Leaderboard ===== */
.board{padding:24px}
.board h3{font-size:18px;text-transform:uppercase;margin-bottom:18px}
.board h3 .wk{color:var(--red)}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:3px dashed var(--ink)}
.lb-row:last-of-type{border-bottom:none}
.rankbox{width:34px;height:34px;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;background:var(--cream);box-shadow:2px 2px 0 0 var(--ink);flex-shrink:0}
.lb-avatar{width:38px;height:38px;font-size:14px}
.lb-name{flex:1;min-width:0}.lb-name .nm{font-weight:900;font-size:15px}
.lb-pts{font-weight:900;font-size:14px;white-space:nowrap}
.you-row .rankbox{background:var(--red);color:var(--paper)}
.you-pill{border:3px solid var(--ink);border-radius:999px;background:var(--red);color:var(--paper);padding:2px 9px;font-size:10px;font-weight:900;text-transform:uppercase;margin-left:6px}

/* ===== Modal ===== */
.overlay{position:fixed;inset:0;background:rgba(46,45,44,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal{background:var(--paper);border:4px solid var(--ink);box-shadow:10px 10px 0 0 var(--ink);max-width:560px;width:100%;padding:28px;max-height:90vh;overflow:auto}
.modal h2{font-size:24px;margin-bottom:6px}
.modal .sub{font-weight:700;font-size:14px;margin-bottom:18px}
.colleague-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;max-height:300px;overflow:auto}
.colleague{display:flex;align-items:center;gap:10px;border:3px solid var(--ink);padding:8px 10px;cursor:pointer;box-shadow:3px 3px 0 0 var(--ink);background:var(--paper)}
.colleague:hover{background:var(--cream)}
.colleague.sel{background:var(--violet)}
.colleague .nm{font-weight:900;font-size:14px}
.colleague .dp{font-size:11px;font-weight:700;opacity:.7;text-transform:uppercase}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}

/* ===== Notifications ===== */
.notif{display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:14px}
.notif .body{flex:1;min-width:0}
.notif .ttl{font-weight:900;font-size:16px;word-break:break-word}
.notif .meta2{font-size:13px;font-weight:700;opacity:.8;margin-top:2px}

/* ===== Setup (handler download) ===== */
.setup-panel{padding:26px 28px}
.setup-title{font-size:24px;text-transform:uppercase;margin-bottom:10px}
.setup-intro{font-weight:700;font-size:14px;margin-bottom:20px}
.setup-card{border:3px solid var(--ink);box-shadow:3px 3px 0 0 var(--ink);padding:16px 18px;margin-bottom:18px}
.setup-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.setup-head h3{font-size:19px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.setup-ic{font-size:22px;line-height:1}
.setup-dl{font-size:13px;padding:10px 14px;box-shadow:4px 4px 0 0 var(--ink);text-decoration:none;color:inherit}
.setup-dl:active{transform:translate(4px,4px)}
.setup-steps{margin:0;padding-left:20px;font-weight:700;font-size:14px}
.setup-steps li{margin-bottom:6px}
.setup-note{font-weight:700;font-size:12.5px;opacity:.75;margin-top:12px}
.setup-foot{font-weight:700;font-size:14px;text-align:center;border-top:3px dotted var(--ink);padding-top:16px;margin-top:4px}
/* nowrap, not break-all: a share path split across two lines is unreadable and
   uncopyable, and these are short enough to keep whole. */
.setup-steps code,.setup-note code,.hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--ink);color:var(--paper);padding:1px 5px;white-space:nowrap}
.fl-note a,.hint a{color:var(--red);font-weight:900}

/* ===== Login ===== */
/* Sign in left, helper right — stacks on anything narrow.
   align-content centres the row inside the tall flex child; align-items:start
   keeps the short card from stretching to match the tall one. Two different
   axes, so both are needed. */
.login-wrap{flex:1;display:grid;grid-template-columns:minmax(0,420px) minmax(0,540px);
  align-content:center;justify-content:center;align-items:start;gap:26px;padding:34px 26px}
.login-card{width:100%;padding:38px}
@media (max-width:900px){
  .login-wrap{grid-template-columns:minmax(0,520px)}
}
.login-card .mark-lg{width:64px;height:64px;background:var(--red);border:4px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;color:var(--paper);box-shadow:6px 6px 0 0 var(--ink);margin-bottom:20px}
.login-card h1{font-size:38px;margin-bottom:6px}
.login-card h1 .k{color:var(--red)}
.login-card p.tag{font-weight:700;font-size:15px;margin-bottom:26px}
.login-card label{display:block;font-weight:900;text-transform:uppercase;font-size:12px;margin-bottom:8px}
.hint{font-weight:700;font-size:12px;opacity:.7;margin-top:8px}
.err{color:var(--red);font-weight:900;margin-top:12px;font-size:14px}

/* ===== Section headings ===== */
.section-title{font-size:22px;margin:26px 0 14px;text-transform:uppercase}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-weight:900;padding:14px 22px;border:4px solid var(--ink);box-shadow:6px 6px 0 0 var(--red);z-index:80}

@media(max-width:900px){.main{grid-template-columns:1fr}.meta-grid{grid-template-columns:1fr}.colleague-grid{grid-template-columns:1fr}}

/* tier chip for the media tier (video / audio) */
.tier-media{background:var(--violet)}

/* ===== Cluster file list (v2: no previews — files open locally) ===== */
.fl-list{border:4px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);background:var(--cream);margin-bottom:12px;max-height:420px;overflow:auto}
.fl-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:3px dashed var(--ink);flex-wrap:wrap}
.fl-row:last-child{border-bottom:none}
.fl-name{flex:1;min-width:180px;font-weight:900;font-size:14px;word-break:break-word}
.fl-meta{font-size:12px;font-weight:700;opacity:.7;white-space:nowrap}
.fl-acts{display:flex;gap:6px;flex-shrink:0}
.fl-btn{padding:7px 11px;font-size:11px;box-shadow:3px 3px 0 0 var(--ink)}
.fl-btn:hover{box-shadow:4px 4px 0 0 var(--ink)}
.fl-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--ink)}
.fl-more{font-weight:700;font-size:13px;background:var(--yellow);border:3px solid var(--ink);padding:10px 14px;margin-bottom:12px}
.fl-note{font-size:12px;font-weight:700;opacity:.7;margin-bottom:20px;line-height:1.5}