/* ════════════════════════════════════════════════════════════════
   APP COMPONENTS — layered on top of styles.css
════════════════════════════════════════════════════════════════ */

/* ── Login (split panel, premium) ───────────────────────────── */
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--navy-dark); padding:0;}
.login-split{width:100%; min-height:100vh; display:flex; background:#fff;}
@media (max-width:820px){ .login-split{min-height:100vh;} }

.login-visual{
  flex:1.05; display:none; position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-dim) 100%);
}
@media (min-width:820px){ .login-visual{display:flex; align-items:stretch; justify-content:center;} }
.login-visual::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(560px circle at 88% 8%, rgba(232,184,75,0.14), transparent 60%);
}
.login-visual-inner{position:relative; z-index:1; padding:48px 52px; color:#fff; width:100%; display:flex; flex-direction:column; justify-content:space-between;}

.login-visual-brandrow{display:flex; align-items:center; gap:12px;}
.login-visual-logo{width:42px; height:42px; border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.14), 0 4px 14px rgba(0,0,0,0.3);}
.login-visual-logo-fallback{width:42px; height:42px; border-radius:50%; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:19px; color: var(--navy-dark); box-shadow:0 0 0 3px rgba(255,255,255,0.14);}
.login-visual-brand{font-family: var(--font-display); font-weight:600; font-size:16.5px; letter-spacing:0.01em;}

.login-visual-center{padding:58px 0 42px;}
.login-visual-badge{
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:100px;
  background: rgba(232,184,75,0.14); border:1px solid rgba(232,184,75,0.3);
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold-pale);
  margin-bottom:24px;
}
.login-visual-badge span{width:6px; height:6px; border-radius:50%; background: var(--gold-pale); box-shadow:0 0 0 3px rgba(232,184,75,0.25);}
.login-visual-title{font-family: var(--font-display); font-weight:700; font-size: clamp(2.3rem, 3.6vw, 3.1rem); line-height:1.14; margin-bottom:18px;}
.login-visual-title em{font-style:normal; color: var(--gold-pale);}
.login-visual-desc{font-size:15px; line-height:1.7; color: rgba(255,255,255,0.6); max-width:390px;}

.login-visual-stats{display:flex; position:relative; z-index:1;}
.login-visual-stats div{display:flex; flex-direction:column; gap:3px; padding-right:32px; margin-right:32px; border-right:1px solid rgba(255,255,255,0.12);}
.login-visual-stats div:last-child{border-right:none; margin-right:0; padding-right:0;}
.login-visual-stats strong{font-family: var(--font-display); font-weight:700; font-size:1.4rem; color:#fff;}
.login-visual-stats span{font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color: rgba(255,255,255,0.45); font-weight:600;}

.login-wave{position:absolute; bottom:0; left:0; width:100%; height:140px; z-index:0;}

.login-form-panel{flex:1; display:flex; align-items:center; justify-content:center; padding:32px 24px; background: var(--bg);}
@media (min-width:820px){ .login-form-panel{background:#fff;} }
.login-box{width:100%; max-width:400px; text-align:center;}
.login-box-logo{width:54px; height:54px; margin:0 auto 22px; border-radius:50%; object-fit:cover; box-shadow: var(--shadow-md);}
.login-box-mark{width:54px; height:54px; margin:0 auto 22px; border-radius:14px; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:25px; color: var(--navy-dark);}
.login-eyebrow{font-size:11.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--gold); margin-bottom:12px;}
.login-title{font-family: var(--font-display); font-weight:700; font-size:2.1rem; color: var(--navy); margin-bottom:8px;}
.login-sub{color: var(--text-light); font-size:14.5px; margin-bottom:32px;}
.login-footnote{color: var(--text-light); font-size:12px; margin-top:22px;}

.pin-boxes{display:flex; justify-content:center; gap:10px;}
.pin-box{
  width:48px; height:58px; text-align:center; font-size:23px; font-weight:600; color: var(--navy);
  border:1.5px solid var(--border); border-radius:11px; background: var(--off-white); font-family: var(--font-mono);
  transition: all .15s ease;
}
.pin-box:focus{outline:none; border-color: var(--gold); background:#fff; box-shadow: 0 0 0 3px rgba(200,148,42,0.14);}
.pin-box.pin-error{border-color: var(--danger); background: var(--danger-bg); animation: shake .3s ease;}
@keyframes shake{0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);}}

.login-error{background: var(--danger-bg); color: var(--danger); border-radius:8px; padding:10px 14px; font-size:13px; margin-top:16px; text-align:left;}

/* ── Tutor login (simple centered card, not split) ──────────── */
.login-brandmark{width:56px; height:56px; border-radius:14px; margin:0 auto 18px; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:26px; color: var(--navy-dark);}
#tutor-login .login-shell{padding:20px; background-image: radial-gradient(circle at 20% 20%, rgba(200,148,42,0.08), transparent 45%), radial-gradient(circle at 80% 80%, rgba(45,107,196,0.08), transparent 45%);}
#tutor-login .login-box{max-width:400px; background:#fff; border-radius:20px; padding:38px 30px; box-shadow: var(--shadow-lg);}

/* ── Home ────────────────────────────────────────────────────── */
.home-hero{padding: 36px 0 34px;}
.home-hero-date{color: var(--gold-pale); font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px;}
.home-hero-name{font-family: var(--font-display); font-weight:700; font-size: clamp(1.9rem,4vw,2.7rem); color:#fff;}
.home-hero-tagline{font-size:14.5px; color: rgba(255,255,255,0.55); margin-top:8px;}
.hero-band{background: var(--navy-dark); position:relative; overflow:hidden;}
.hero-band-wave{display:block; width:100%; height:22px;}
.new-submission-cta{
  display:flex; align-items:center; gap:14px; background: linear-gradient(135deg, var(--navy), var(--navy-dim));
  color:#fff; border-radius:16px; padding:20px; box-shadow: var(--shadow-md); border:1px solid rgba(255,255,255,0.06);
}
.new-submission-cta .icon-wrap{width:46px; height:46px; border-radius:12px; background: rgba(232,184,75,0.14); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.new-submission-cta .icon-wrap svg{width:22px; height:22px; color: var(--gold-pale);}
.new-submission-cta-title{font-family: var(--font-display); font-weight:700; font-size:1.2rem;}
.new-submission-cta-sub{font-size:12.5px; color: rgba(255,255,255,0.6); margin-top:2px;}

/* ── Dashboard grid (Home) ───────────────────────────────────── */
.dash-grid{display:grid; grid-template-columns: 1.7fr 1fr; gap:24px; align-items:start;}
.dash-main, .dash-side{animation: dashFadeIn .45s cubic-bezier(.22,.61,.36,1) backwards;}
.dash-side{animation-delay:.06s;}
@keyframes dashFadeIn{from{opacity:0; transform: translateY(10px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){ .dash-main, .dash-side{animation:none;} }
.dash-main{min-width:0;}
.dash-side{min-width:0;}
@media (max-width:900px){ .dash-grid{grid-template-columns: 1fr;} }

/* ── Quick actions → tactile action list (Home sidebar) ───────── */
.action-list{display:flex; flex-direction:column; gap:10px;}
.action-card{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:16px; cursor:pointer; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.action-card:hover{transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(200,148,42,0.35);}
.action-card:active{transform: translateY(0) scale(0.99);}
.action-card-icon{
  width:42px; height:42px; border-radius:11px; background: var(--off-white); color: var(--navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.action-card-icon svg{width:19px; height:19px;}
.action-card-body{flex:1; min-width:0;}
.action-card-title{font-weight:700; font-size:14.5px; color: var(--navy);}
.action-card-desc{font-size:12px; color: var(--text-light); margin-top:2px;}
.action-card-arrow{width:16px; height:16px; color: var(--text-light); flex-shrink:0; transition: transform .18s ease, color .18s ease;}
.action-card:hover .action-card-arrow{transform: translateX(3px); color: var(--gold);}
.action-card-primary{background: linear-gradient(135deg, var(--navy), var(--navy-dim)); border-color: var(--navy);}
.action-card-primary .action-card-icon{background: rgba(232,184,75,0.16); color: var(--gold-pale);}
.action-card-primary .action-card-title{color:#fff;}
.action-card-primary .action-card-desc{color: rgba(255,255,255,0.55);}
.action-card-primary .action-card-arrow{color: rgba(255,255,255,0.5);}
.action-card-primary:hover .action-card-arrow{color: var(--gold-pale);}

/* ── Academic Performance card (Home) — typography-only, no bars/charts ── */
.scores-hero{
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-dim) 100%);
  border-radius: 18px; padding: 26px 26px 22px; color:#fff; box-shadow: var(--shadow-lg);
  position: relative; overflow:hidden;
}
.scores-hero::before{
  content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(232,184,75,0.14), transparent 70%);
}
.scores-hero-top{display:flex; align-items:flex-start; justify-content:space-between; position:relative; z-index:1;}
.scores-hero-label{font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: rgba(255,255,255,0.5);}
.scores-hero-link{color: var(--gold-pale) !important; font-size:12.5px; flex-shrink:0;}

.scores-hero-avg{font-family: var(--font-display); font-weight:700; font-size: clamp(2.6rem, 7vw, 3.3rem); line-height:1; color:#fff; margin-top:10px; position:relative; z-index:1;}
.scores-hero-avg-label{font-size:12.5px; color: rgba(255,255,255,0.45); margin-top:6px; position:relative; z-index:1;}

/* ── Average ring + grade badge + trend (replaces the plain number) ── */
.scores-hero-avg-row{display:flex; align-items:center; gap:20px; margin-top:16px; position:relative; z-index:1;}
.scores-hero-ring{
  width:108px; height:108px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background: conic-gradient(var(--gold-pale) calc(var(--ring-pct) * 1%), rgba(255,255,255,0.12) 0);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: background 0.6s ease;
}
.scores-hero-ring-inner{
  width:84px; height:84px; border-radius:50%; background: var(--navy-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25) inset;
}
.scores-hero-ring-inner .scores-hero-avg{font-size:1.55rem; margin-top:0; line-height:1;}
.scores-hero-ring-inner .scores-hero-avg-label{font-size:8.5px; margin-top:2px; letter-spacing:0.06em; text-transform:uppercase;}
.scores-hero-avg-side{display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0;}
.scores-hero-grade-badge{
  font-family: var(--font-display); font-weight:800; font-size:1.55rem; line-height:1;
  padding:5px 15px; border-radius:12px; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.scores-hero-trend:empty{display:none;}

.scores-hero-divider{height:1px; background: rgba(255,255,255,0.1); margin:20px 0; position:relative; z-index:1;}

.scores-hero-minirow{display:flex; position:relative; z-index:1;}
.mini-stat{flex:1; text-align:center; padding:0 10px; border-right:1px solid rgba(255,255,255,0.1);}
.mini-stat:last-child{border-right:none;}
.mini-stat:first-child{padding-left:0;}
.mini-stat:last-child{padding-right:0;}
.mini-stat strong{display:block; font-family: var(--font-display); font-weight:700; font-size:1.25rem; color:#fff; line-height:1.2;}
.mini-stat span{font-size:10px; color: rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; margin-top:3px; display:block;}

.scores-hero-subjects-block{position:relative; z-index:1;}
.scores-hero-subjects-label{font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: rgba(255,255,255,0.45); margin-bottom:12px;}
.scores-hero-subjects{display:flex; flex-direction:column; gap:13px;}
.scores-hero-empty{background:#fff; border:1px dashed var(--border); border-radius:20px; margin-top:16px;}
.subject-row{display:flex; flex-direction:column; gap:6px;}
.subject-row-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.subject-row-name{font-size:12.5px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color: rgba(255,255,255,0.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.subject-row-pct{font-family: var(--font-mono); font-size:14px; font-weight:700; color: var(--gold-pale); flex-shrink:0;}
.subject-row-track{height:5px; border-radius:10px; background: rgba(255,255,255,0.12); overflow:hidden;}
.subject-row-fill{height:100%; border-radius:10px; background: linear-gradient(90deg, var(--gold-pale), var(--gold)); transition: width .5s ease;}

.scores-hero-recent{position:relative; z-index:1;}
.scores-hero-recent-label{font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: rgba(255,255,255,0.45); margin-bottom:8px;}
.scores-hero-recent-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.scores-hero-recent-info{min-width:0;}
.scores-hero-recent-name{font-family: var(--font-display); font-weight:700; font-size:15px; color:#fff; line-height:1.3;}
.scores-hero-recent-meta{font-size:11.5px; color: rgba(255,255,255,0.4); margin-top:2px;}
.scores-hero-recent-right{text-align:right; flex-shrink:0;}
.scores-hero-recent-score{font-family: var(--font-mono); font-weight:700; font-size:15px; color: var(--gold-pale);}
.scores-hero-recent-link{display:block; font-size:11.5px; color: rgba(255,255,255,0.45); margin-top:3px;}

/* ── Stat tiles (Test Scores page summary row) ──────────────────── */
.stat-tile-row{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;}
.stat-tile{background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 12px; text-align:center; box-shadow: var(--shadow-sm);}
.stat-tile-num{font-family: var(--font-display); font-weight:700; font-size:1.7rem; color: var(--navy); line-height:1.1;}
.stat-tile-label{font-size:10.5px; color: var(--text-light); text-transform:uppercase; letter-spacing:0.06em; margin-top:5px; font-weight:600;}

/* ── Submissions strip (de-emphasized summary, Home page) ─────── */
.submissions-strip{
  display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:12px 16px;
}
.strip-item{display:flex; flex-direction:column; align-items:center; min-width:44px;}
.strip-item strong{font-family: var(--font-display); font-weight:700; font-size:1.1rem; color: var(--navy); line-height:1.1;}
.strip-item span{font-size:9.5px; color: var(--text-light); text-transform:uppercase; letter-spacing:0.05em; font-weight:600; margin-top:2px;}
.strip-sep{width:1px; height:28px; background: var(--border);}
.strip-link{margin-left:auto; color: var(--navy-dim) !important; font-size:12px; white-space:nowrap;}

/* ── Academic snapshot (Home page) ───────────────────────────── */
.snapshot-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:22px 14px;}
@media (min-width:480px){ .snapshot-grid{grid-template-columns: repeat(4, 1fr);} }
.snapshot-item{text-align:center; position:relative;}
.snapshot-item strong{display:block; font-family: var(--font-display); font-weight:700; font-size:1.55rem; color: var(--navy); line-height:1.1;}
.snapshot-item span{display:block; font-size:9.5px; color: var(--text-light); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; margin-top:5px;}
.snapshot-item.is-empty strong{color: var(--text-light); font-weight:600; font-size:1.3rem;}

/* ── Recent activity (Home page) ─────────────────────────────── */
.activity-list{display:flex; flex-direction:column;}
.activity-item{display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--border);}
.activity-item:first-child{padding-top:0;}
.activity-item:last-child{padding-bottom:0; border-bottom:none;}
.activity-dot{width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; background: var(--text-light);}
.activity-dot.submitted{background: var(--gold);}
.activity-dot.approved{background: var(--success);}
.activity-dot.returned{background: var(--danger);}
.activity-dot.score{background: #1a4fa0;}
.activity-body{flex:1; min-width:0;}
.activity-text{font-size:13.5px; color: var(--text); font-weight:600; line-height:1.4;}
.activity-time{font-size:11px; color: var(--text-light); margin-top:2px;}

/* ── Test Scores page — premium horizontal result rows, no bars ── */
.score-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin-bottom:10px;
  cursor:pointer;
}
.score-row-main{flex:1; min-width:0;}
.score-row-top{display:flex; align-items:baseline; gap:8px; margin-bottom:3px;}
.score-row-name{font-weight:700; font-size:15px; color: var(--navy); font-family: var(--font-display);}
.score-row-meta{font-size:12px; color: var(--text-light);}
.score-row-status-row{display:flex; align-items:center; gap:7px; margin-top:6px;}
.score-row-grade-chip{
  font-family: var(--font-display); font-weight:800; font-size:11.5px; line-height:1;
  width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.score-row-status{font-size:11px; font-weight:700; letter-spacing:0.03em;}
.score-row-status.score-excellent{color:#1e7e42;}
.score-row-status.score-good{color:#1a4fa0;}
.score-row-status.score-fair{color:#92400e;}
.score-row-status.score-weak{color:#b3261e;}
.score-row-right{text-align:right; flex-shrink:0;}
.score-row-marks{font-family: var(--font-mono); font-size:12.5px; color: var(--text-light);}
.score-row-pct{font-family: var(--font-display); font-weight:700; font-size:1.5rem; line-height:1.15;}
.score-row-pct.score-excellent{color:#1e7e42;}
.score-row-pct.score-good{color:#1a4fa0;}
.score-row-pct.score-fair{color:#92400e;}
.score-row-pct.score-weak{color:#b3261e;}
.score-row-view{font-size:11px; color: var(--text-light); margin-top:3px;}
.score-row:hover .score-row-view{color: var(--gold);}

/* ── Admin score editor row (tutor dashboard only — distinct from student-facing .score-row) ── */
.admin-score-row{background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:9px;}
.admin-score-row-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; gap:10px;}
.admin-score-row-name{font-weight:700; font-size:14.5px; color: var(--navy); font-family: var(--font-display);}
.admin-score-row-pct{font-family: var(--font-mono); font-size:12.5px; font-weight:700; padding:2px 10px; border-radius:100px; flex-shrink:0; letter-spacing:0.01em;}
.admin-score-row-meta{font-size:11.5px; color: var(--text-light); margin-bottom:8px;}
.admin-score-bar-track{height:6px; background: var(--off-white); border-radius:10px; overflow:hidden;}
.admin-score-bar-fill{height:100%; border-radius:10px; transition: width .4s ease;}
.score-excellent{color:#1e7e42; background:#e9f6ee;}
.score-good{color:#1a4fa0; background:#e8effb;}
.score-fair{color:#92400e; background:#fdf3dc;}
.score-weak{color:#b3261e; background:#fbeceb;}
.admin-score-bar-fill.score-excellent{background: linear-gradient(90deg,#4ade80,#1e7e42);}
.admin-score-bar-fill.score-good{background: linear-gradient(90deg,#60a5fa,#1a4fa0);}
.admin-score-bar-fill.score-fair{background: linear-gradient(90deg,var(--gold-pale),var(--gold));}
.admin-score-bar-fill.score-weak{background: linear-gradient(90deg,#f87171,#b3261e);}

/* Score result modal (typographic detail view) */
.score-modal-pct{font-family: var(--font-display); font-weight:700; font-size:3rem; line-height:1;}
.score-modal-pct.score-excellent{color:#1e7e42;} .score-modal-pct.score-good{color:#1a4fa0;}
.score-modal-pct.score-fair{color:#92400e;} .score-modal-pct.score-weak{color:#b3261e;}
.score-modal-marks{font-family: var(--font-mono); font-size:14px; color: var(--text-light); margin-top:6px;}
.score-modal-meta{font-size:13px; color: var(--text-light); margin-top:10px; padding-top:14px; border-top:1px solid var(--border);}
.score-modal-status{display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-top:12px; padding:5px 14px; border-radius:100px;}
.score-modal-status.score-excellent{background:#e9f6ee; color:#1e7e42;} .score-modal-status.score-good{background:#e8effb; color:#1a4fa0;}
.score-modal-status.score-fair{background:#fdf3dc; color:#92400e;} .score-modal-status.score-weak{background:#fbeceb; color:#b3261e;}

/* ── Reevaluation ─────────────────────────────────────────────── */
.score-modal-reeval{margin-top:16px; padding-top:16px; border-top:1px solid var(--border);}
.reeval-target{background: var(--off-white); border-radius:12px; padding:12px 14px; margin:12px 0;}
.reeval-target-name{font-weight:700; font-size:14px; color: var(--navy); font-family: var(--font-display);}
.reeval-target-meta{font-size:12px; color: var(--text-light); margin-top:2px;}
.reeval-ack-row{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.55; color: var(--text); cursor:pointer; margin-top:4px;}
.reeval-ack-row input{margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color: var(--gold);}
.reeval-status-box{background: var(--gold-light); border:1px solid rgba(200,148,42,0.25); border-radius:12px; padding:14px 16px; text-align:center;}
.reeval-status-title{font-family: var(--font-display); font-weight:700; font-size:15px; color: var(--gold); margin-bottom:2px;}
.reeval-stale-notice{background:#fdf3dc; border:1px solid rgba(200,148,42,0.3); color:#92400e; font-size:12px; line-height:1.5; border-radius:10px; padding:9px 12px; margin:10px 0 0;}

/* ── Notice board ────────────────────────────────────────────── */
.announcement-card{background:#fff; border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:10px; padding:14px 16px; margin-bottom:9px; position:relative;}
.announcement-card.pinned{background: var(--gold-light); border-left-color: var(--gold);}
.announcement-pin{position:absolute; top:12px; right:14px; font-size:9.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold);}
.announcement-title{font-family: var(--font-display); font-weight:700; font-size:15px; color: var(--navy); margin-bottom:4px; padding-right:50px;}
.announcement-message{font-size:13px; color: var(--text); line-height:1.5;}
.announcement-date{font-size:11px; color: var(--text-light); margin-top:8px;}

/* ── Score trend indicator ──────────────────────────────────── */
.scores-hero-trend{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:100px;}
.trend-up{background: rgba(74,222,128,0.16); color:#86efac;}
.trend-down{background: rgba(248,113,113,0.16); color:#fca5a5;}
.trend-flat{background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7);}

/* ── Assignment urgency ─────────────────────────────────────── */
.assignment-card.urgency-overdue{border-left:3px solid var(--danger); background: var(--danger-bg);}
.assignment-card.urgency-soon{border-left:3px solid var(--gold);}
.assignment-due{font-size:11.5px; font-weight:600; margin-top:6px; color: var(--gold);}
.assignment-due.due-overdue{color: var(--danger);}
.assignment-due.due-soon{color:#92400e;}
.assignment-due.due-normal{color: var(--text-light);}

.assignment-card{display:flex; align-items:center; justify-content:space-between; gap:14px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; transition: box-shadow .18s ease, transform .18s ease;}
.assignment-title{font-weight:700; font-size:14.5px; color: var(--navy);}
.assignment-instructions{font-size:12.5px; color: var(--text-light); margin-top:3px;}
.assignment-due{font-size:11.5px; color: var(--gold); font-weight:600; margin-top:6px;}

/* ── Assignment "Submit" CTA — small but unmissable ── */
.assignment-submit-btn{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:100px; font-size:12.5px;
  box-shadow: 0 3px 10px rgba(200,148,42,0.32);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.assignment-submit-btn svg{width:14px; height:14px;}
.assignment-submit-btn:hover{transform: translateY(-1px); box-shadow: 0 6px 16px rgba(200,148,42,0.42); filter:brightness(1.05);}
.assignment-submit-btn:active{transform: translateY(0) scale(0.96);}
.assignment-card.urgency-soon .assignment-submit-btn{box-shadow: 0 3px 12px rgba(200,148,42,0.5), 0 0 0 3px rgba(200,148,42,0.12);}
.assignment-card.urgency-overdue .assignment-submit-btn{
  background: linear-gradient(135deg, #f87171, var(--danger)); border-color: var(--danger); color:#fff;
  box-shadow: 0 3px 12px rgba(179,38,30,0.35);
}
.assignments-count{background: var(--gold-light); color: var(--gold); font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; margin-bottom:12px;}
.empty.card{border-radius: var(--radius); box-shadow: var(--shadow-sm);}

.submission-row{display:flex; align-items:center; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:9px; cursor:pointer; transition: box-shadow .15s ease;}
.submission-row:hover{box-shadow: var(--shadow-sm);}
.submission-row-main{width:100%;}
.submission-row-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.submission-row-id{font-family: var(--font-mono); font-weight:600; font-size:14.5px; letter-spacing:0.01em; color: var(--navy);}
.submission-row-desc{font-size:13px; color: var(--text); margin-bottom:3px;}
.submission-row-meta{font-size:11.5px; color: var(--text-light);}

/* ── Submission flow ─────────────────────────────────────────── */
.flow-dots{display:flex; align-items:center; gap:6px; margin-bottom:22px;}
.flow-dot{width:8px; height:8px; border-radius:50%; background: var(--border);}
.flow-dot.active{background: var(--gold);}
.sub-step{padding: 4px 0 100px;}

.dropzone{
  border:2px dashed var(--border); border-radius:16px; padding: 30px 20px; text-align:center; background: var(--off-white);
  transition: all .15s ease; cursor:pointer;
}
.dropzone.drag-active{border-color: var(--gold); background: var(--gold-light);}
.dropzone svg{width:30px; height:30px; color: var(--text-light); margin:0 auto 10px;}
.capture-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}

.pages-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap:12px; margin-top:16px;}
.page-cell{background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; position:relative;}
.page-cell.dragging{opacity:.4;}
.page-cell-num{position:absolute; top:6px; left:6px; background: rgba(15,36,73,0.75); color:#fff; font-size:11px; font-weight:700; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2;}
.page-cell-thumb{aspect-ratio:3/4; background: var(--off-white); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.page-cell-thumb img{width:100%; height:100%; object-fit:cover;}
.pdf-badge{display:flex; flex-direction:column; align-items:center; gap:6px; color: var(--text-light); font-size:10.5px; padding:10px; text-align:center; word-break:break-all;}
.pdf-badge svg{width:26px; height:26px;}
.page-cell-actions{display:flex; justify-content:space-between; padding:6px 8px; border-top:1px solid var(--border); background:#fff;}
.btn-icon-sm{width:26px; height:26px; border-radius:6px; border:none; background:none; color: var(--navy); font-size:14px; display:flex; align-items:center; justify-content:center;}
.btn-icon-sm:hover{background: var(--off-white);}
.btn-icon-sm:disabled{opacity:.25;}
.btn-icon-sm.danger{color: var(--danger);}

.review-strip{display:flex; gap:10px; overflow-x:auto; padding: 4px 0 10px;}
.review-thumb{position:relative; width:74px; height:96px; border-radius:8px; overflow:hidden; flex-shrink:0; background: var(--off-white); border:1px solid var(--border);}
.review-thumb img{width:100%; height:100%; object-fit:cover;}
.review-thumb.pdf{display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; color: var(--text-light); gap:4px;}
.review-thumb-num{position:absolute; bottom:4px; right:4px; background: rgba(15,36,73,0.7); color:#fff; font-size:10px; padding:1px 6px; border-radius:20px;}

#submit-progress-wrap{margin-top:16px;}
.progress-track{height:6px; background: var(--border); border-radius:10px; overflow:hidden;}
.progress-fill{height:100%; background: linear-gradient(90deg, var(--gold-pale), var(--gold)); border-radius:10px; transition: width .3s ease;}
.progress-label{font-size:12px; color: var(--text-light); margin-top:8px;}
.submit-confirm-note{font-size:13px; color: var(--text-light); text-align:center; margin-top:20px;}
#submit-error-box{background:#fbeceb; border:1px solid rgba(179,38,30,0.25); border-radius:12px; padding:14px 16px; margin-top:14px;}
.submit-error-title{font-weight:700; font-size:13.5px; color:#b3261e; margin-bottom:3px;}

/* ── Proof card — "Admit Card" ticket, built to be screenshotted
   and shared. Two-part stub construction like an exam hall ticket:
   a record panel on top, a perforated tear-line, and a barcode
   stub below carrying the submission ID. ─────────────────────── */
.proof-wrap{padding: 22px 0 100px;}

.ticket{
  position: relative;
  background: #fffcf6;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(15,36,73,0.08);
  overflow: hidden;
}

.ticket-main{padding: 28px 26px 22px; position:relative;}
.ticket-main::before{
  /* faint corner brace, echoes an official document */
  content:''; position:absolute; top:14px; left:14px; width:16px; height:16px;
  border-top:1.5px solid rgba(200,148,42,0.4); border-left:1.5px solid rgba(200,148,42,0.4);
}
.ticket-main::after{
  content:''; position:absolute; top:14px; right:14px; width:16px; height:16px;
  border-top:1.5px solid rgba(200,148,42,0.4); border-right:1.5px solid rgba(200,148,42,0.4);
}

.ticket-header{display:flex; align-items:center; gap:12px;}
.ticket-brandmark{width:42px; height:42px; border-radius:11px; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:20px; color: var(--navy-dark); flex-shrink:0; box-shadow: 0 3px 10px rgba(200,148,42,0.3);}
.ticket-brandmark img{width:100%; height:100%; object-fit:cover; border-radius:11px;}
.ticket-brand-name{font-family: var(--font-display); font-weight:700; font-size:19px; color: var(--navy); line-height:1.2;}
.ticket-brand-sub{font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color: var(--text-light); font-weight:600;}
.ticket-eyebrow{font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; color: var(--gold); font-weight:700; margin-top:14px;}
.ticket-heading{font-family: var(--font-display); font-weight:700; font-size:1.5rem; color: var(--navy); margin-top:3px;}

/* Rotated status seal — the signature element, reads as a rubber stamp */
.ticket-seal{
  position:absolute; top:20px; right:22px; width:78px; height:78px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border: 2px solid currentColor; transform: rotate(-14deg); opacity:0.94;
}
.ticket-seal::before{
  content:''; position:absolute; inset:5px; border:1px dashed currentColor; border-radius:50%; opacity:0.55;
}
.ticket-seal-text{font-family: var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:0.03em; line-height:1.15; padding:0 6px;}
.ticket-seal.seal-approved{color: var(--success);}
.ticket-seal.seal-pending{color: var(--warn);}
.ticket-seal.seal-returned{color: var(--danger);}

.ticket-divider{height:1px; background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 11px); margin: 18px 0;}
.ticket-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px 20px;}
.ticket-field-label{font-size:9.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--text-light); margin-bottom:3px;}
.ticket-field-value{font-size:14px; color: var(--navy); font-weight:600;}
.ticket-field-value.mono{font-family: var(--font-mono); font-size:13px; letter-spacing:0.01em;}
.ticket-desc{margin-top:18px; padding-top:16px; border-top:1px solid var(--border);}

/* Fanned page thumbnails — reads like a small stack of exam sheets */
.ticket-pages{display:flex; margin-top:22px; padding-left:8px;}
.ticket-page-thumb{
  width:50px; height:66px; border-radius:6px; background: var(--off-white); border:1px solid var(--border);
  overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:11px; color: var(--text-light);
  margin-left:-16px; box-shadow: -2px 0 6px rgba(15,36,73,0.08); transform: rotate(var(--tilt,0deg));
  position:relative; background:#fff;
}
.ticket-page-thumb:first-child{margin-left:0;}
.ticket-page-thumb img{width:100%; height:100%; object-fit:cover;}
.ticket-pages-more{align-self:center; margin-left:10px; font-size:11px; color: var(--text-light); font-weight:600;}

/* Perforation between the record panel and the stub */
.ticket-perf{position:relative; height:0; border-top:2px dashed rgba(15,36,73,0.18);}
.ticket-perf::before, .ticket-perf::after{
  content:''; position:absolute; top:50%; width:22px; height:22px; border-radius:50%;
  background: var(--bg); transform: translateY(-50%);
}
.ticket-perf::before{left:-11px;}
.ticket-perf::after{right:-11px;}

.ticket-stub{background: var(--navy-dark); padding:20px 26px 22px; position:relative; overflow:hidden;}
.ticket-stub::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(300px circle at 90% 0%, rgba(232,184,75,0.12), transparent 65%);
}
.ticket-stub-row{display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; z-index:1;}
.ticket-stub-id{font-family: var(--font-mono); font-weight:700; font-size:17px; letter-spacing:0.03em; color:#fff;}
.ticket-stub-label{font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color: rgba(255,255,255,0.45); font-weight:600; margin-top:3px;}
.ticket-barcode{
  height:36px; margin-top:14px; border-radius:3px; position:relative; z-index:1;
  background: repeating-linear-gradient(90deg,
    #fff 0px, #fff 2px, transparent 2px 5px,
    #fff 5px, #fff 9px, transparent 9px 11px,
    #fff 11px, #fff 12px, transparent 12px 17px,
    #fff 17px, #fff 20px, transparent 20px 23px,
    #fff 23px, #fff 25px, transparent 25px 30px
  );
  opacity:0.92;
}
.ticket-footer{margin-top:14px; text-align:center; font-size:9.5px; letter-spacing:0.08em; color: rgba(255,255,255,0.4); text-transform:uppercase; position:relative; z-index:1;}

.proof-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px;}

/* Reusable label/value pair — used on the Submission Detail page */
.proof-label{font-size:9.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--text-light); margin-bottom:3px;}
.proof-value{font-size:14px; color: var(--navy); font-weight:600;}

/* ── Detail page ─────────────────────────────────────────────── */
.detail-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.detail-id{font-family: var(--font-mono); font-weight:600; font-size:16.5px; letter-spacing:0.01em; color: var(--navy);}
.detail-meta-grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px 20px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px;}
.feedback-box{margin-top:18px; background: var(--danger-bg); border-radius:12px; padding:16px; border:1px solid rgba(179,38,30,0.15);}
.feedback-label{font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--danger); margin-bottom:6px;}
.feedback-text{font-size:14px; color: var(--text); line-height:1.55;}

/* ── Viewer ──────────────────────────────────────────────────── */
.viewer-overlay{position:fixed; inset:0; background: rgba(8,22,48,0.97); z-index:300; display:flex; flex-direction:column;}
.viewer-top{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; color:#fff;}
.viewer-close{background:none; border:none; color:#fff; font-size:28px; line-height:1; padding:4px 8px;}
.viewer-title{font-size:13px; color: rgba(255,255,255,0.7); font-weight:500;}
.viewer-top-actions{display:flex; gap:6px;}
.viewer-icon-btn{background: rgba(255,255,255,0.08); border:none; color:#fff; width:36px; height:36px; border-radius:8px; font-size:16px;}
.viewer-stage{flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; touch-action:none;}
.viewer-image{max-width:92%; max-height:92%; object-fit:contain; transition: transform .15s ease; border-radius:4px;}
.viewer-empty{color: rgba(255,255,255,0.6); font-size:14px; text-align:center; padding:40px;}
.viewer-nav{position:absolute; top:50%; transform:translateY(-50%); background: rgba(255,255,255,0.08); border:none; color:#fff; width:42px; height:42px; border-radius:50%; font-size:24px;}
.viewer-nav.prev{left:12px;} .viewer-nav.next{right:12px;}
.viewer-thumbs{display:flex; gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); overflow-x:auto;}
.viewer-thumb{width:44px; height:58px; object-fit:cover; border-radius:6px; opacity:.45; border:2px solid transparent; flex-shrink:0;}
.viewer-thumb.active{opacity:1; border-color: var(--gold);}

/* ── Tutor dashboard ─────────────────────────────────────────── */
.tutor-tabs{display:flex; gap:4px; overflow-x:auto; padding:5px; background: var(--off-white); border-radius:12px; margin-bottom:4px;}
.tutor-tab{background:none; border:none; padding:10px 16px; font-size:13.5px; font-weight:600; color: var(--text-light); border-radius:9px; white-space:nowrap; display:flex; align-items:center; gap:7px; transition: background-color .15s ease, color .15s ease;}
.tutor-tab:hover{color: var(--navy); background: rgba(255,255,255,0.6);}
.tutor-tab.active{color: var(--navy); background:#fff; box-shadow: var(--shadow-sm);}
.tutor-tab .count{background: rgba(15,36,73,0.08); color: var(--text-light); font-size:11px; padding:1px 7px; border-radius:100px; font-weight:700;}
.tutor-tab.active .count{background: var(--gold-light); color: var(--gold);}
.roster-picker{max-height:180px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; padding:6px 4px;}
.roster-row{display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:13.5px; border-radius:6px;}
.roster-row:hover{background: var(--off-white);}
.roster-list-row{padding:12px 4px; border-bottom:1px solid var(--border); font-size:14px;}
.roster-list-row:last-child{border-bottom:none;}

/* ── Admin storage panel ─────────────────────────────────────── */
#admin-storage-panel{position:fixed; inset:0; background: var(--bg); z-index:120; overflow-y:auto;}
.stat-row{display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin: 16px 0;}
.stat-box{background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center;}
.stat-num{font-family: var(--font-display); font-weight:700; font-size:1.5rem; color: var(--navy);}
.stat-label{font-size:11px; color: var(--text-light); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px;}
.storage-row{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:8px; cursor:pointer;}
.storage-row input{width:18px; height:18px; flex-shrink:0;}

/* ── Topbar brand logo (image variant of .brand-mark) ─────────── */
.brand-mark-logo{width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.25);}
.login-brandmark-logo{width:56px; height:56px; border-radius:50%; object-fit:cover; margin:0 auto 18px; box-shadow: var(--shadow-md); display:block;}

/* ── Topbar responsiveness (small phones) ───────────────────── */
@media (max-width:380px){
  .topbar-right{gap:8px;}
  .link-btn{font-size:11.5px; padding:6px 2px;}
  .brand-sub{display:none;}
}

/* ── Accessible focus rings + extra interactivity polish ─────── */
.btn:focus-visible, .link-btn:focus-visible, .action-card:focus-visible,
.pin-box:focus-visible, .input:focus-visible, textarea.input:focus-visible{
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.action-card{outline:none;}

/* ── Smooth page + interaction polish ──────────────────────────
   Applies a gentle fade/rise whenever a .page (or sub-step) is
   revealed via the hidden-class toggle in showPage()/goToSubStep(). */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
  .page:not(.hidden){animation: viewIn .32s cubic-bezier(.22,.61,.36,1);}
  .sub-step:not(.hidden){animation: viewIn .28s cubic-bezier(.22,.61,.36,1);}
  @keyframes viewIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

  .action-card, .btn, .submission-row, .assignment-card, .announcement-card,
  .score-row, .stat-tile, .admin-score-bar-fill, .scores-hero, .pin-box{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  }
  .btn:active{transform: scale(0.97);}
  .stat-tile:hover{transform: translateY(-2px); box-shadow: var(--shadow-md);}
  .score-row:hover{transform: translateY(-1px); box-shadow: var(--shadow-md);}
  .assignment-card:hover, .announcement-card:hover{transform: translateY(-1px); box-shadow: var(--shadow-sm);}
  .admin-score-bar-fill{transition: width .6s cubic-bezier(.22,.61,.36,1);}
  .progress-fill{transition: width .3s ease;}

  .ticket{animation: ticketIn .5s cubic-bezier(.22,.61,.36,1);}
  .ticket-seal{animation: sealStamp .4s cubic-bezier(.34,1.56,.64,1) .25s backwards;}
  @keyframes ticketIn{from{opacity:0; transform: translateY(16px) scale(.98);} to{opacity:1; transform: translateY(0) scale(1);}}
  @keyframes sealStamp{from{opacity:0; transform: rotate(-14deg) scale(1.6);} to{opacity:0.94; transform: rotate(-14deg) scale(1);}}
}