/* ============ design tokens ============ */
:root{
  /* school brand purple */
  --brand-50:  oklch(0.97 0.02 305);
  --brand-100: oklch(0.93 0.04 305);
  --brand-200: oklch(0.85 0.07 305);
  --brand-300: oklch(0.76 0.10 305);
  --brand-400: oklch(0.66 0.13 305);
  --brand-500: oklch(0.58 0.13 305); /* primary - matches logo */
  --brand-600: oklch(0.50 0.13 305);
  --brand-700: oklch(0.42 0.11 305);
  --brand-900: oklch(0.25 0.07 305);

  /* warm accent (orange/peach) */
  --warm-50:  oklch(0.98 0.015 65);
  --warm-100: oklch(0.95 0.04 65);
  --warm-200: oklch(0.90 0.08 65);
  --warm-400: oklch(0.78 0.14 55);
  --warm-500: oklch(0.72 0.16 50);
  --warm-600: oklch(0.64 0.16 45);
  --warm-700: oklch(0.54 0.14 40);

  /* neutrals (warm-tinted) */
  --bg:       oklch(0.985 0.005 80);
  --paper:    oklch(0.995 0.003 80);
  --surface:  #ffffff;
  --line:     oklch(0.91 0.008 290);
  --line-strong: oklch(0.84 0.012 290);
  --ink:      oklch(0.20 0.02 290);
  --ink-2:    oklch(0.35 0.02 290);
  --muted:    oklch(0.55 0.015 290);
  --muted-2:  oklch(0.70 0.012 290);

  --green-500: oklch(0.65 0.14 150);
  --red-500:   oklch(0.62 0.18 25);
  --blue-500:  oklch(0.60 0.14 235);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-1: 0 1px 2px rgba(43, 24, 68, .04), 0 0 0 1px rgba(43, 24, 68, .04);
  --shadow-2: 0 4px 14px -4px rgba(43, 24, 68, .08), 0 0 0 1px rgba(43, 24, 68, .04);
  --shadow-3: 0 16px 40px -16px rgba(43, 24, 68, .22), 0 0 0 1px rgba(43, 24, 68, .06);

  --font-thai: "Kanit", system-ui, sans-serif;
  --font-serif: "Kanit", "Times New Roman", serif;
  --font-mono: "Kanit", ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-thai);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100vh;font-size:14px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--brand-200)}

/* scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:oklch(0.85 0.01 290);border-radius:99px;border:2px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

/* ============ app shell ============ */
.app-root{min-height:100vh;display:flex;flex-direction:column}

/* role switcher chip */
.role-switcher{
  position:fixed; top:14px; right:14px; z-index:80;
  display:flex; gap:4px; padding:4px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:99px;
  box-shadow:var(--shadow-2);
  font-size:12px; font-weight:500;
}
.role-switcher button{
  padding:6px 12px; border-radius:99px; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px;
  transition:.15s ease;
}
.role-switcher button:hover{color:var(--ink)}
.role-switcher button.active{background:var(--ink);color:var(--paper)}
.role-switcher .dot{width:6px;height:6px;border-radius:99px;background:currentColor;opacity:.6}

/* ============ layout: sidebar + main ============ */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{
  background:var(--paper); border-right:1px solid var(--line);
  padding:18px 14px; display:flex; flex-direction:column; gap:18px;
  position:sticky; top:0; height:100vh; overflow:auto;
}
.sidebar-brand{display:flex;gap:10px;align-items:center;padding:6px 6px 14px;border-bottom:1px solid var(--line)}
.sidebar-brand .logo{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex-shrink:0;background:var(--brand-500)}
.sidebar-brand .logo img{width:100%;height:100%;object-fit:cover;display:block}

/* auth screen logo - new circular brand mark */
.auth-logo{width:48px;height:48px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.12);flex-shrink:0}
.auth-logo img{width:100%;height:100%;object-fit:cover;display:block}

.auth-logo-wrap{width:72px;height:72px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.14);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.18);position:relative;z-index:1}
.auth-logo-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.sidebar-brand .name{font-weight:600;font-size:13px;line-height:1.2}
.sidebar-brand .sub{font-size:10.5px;color:var(--muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}

.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group .lbl{font-size:10.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;padding:0 8px 6px;font-family:var(--font-mono)}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px; color:var(--ink-2);
  font-size:13.5px; font-weight:500; transition:.15s ease;
  width:100%; text-align:left;
}
.nav-item:hover{background:var(--brand-50);color:var(--ink)}
.nav-item.active{background:var(--ink);color:var(--paper)}
.nav-item .icon{width:18px;height:18px;flex-shrink:0;opacity:.85}
.nav-item .badge{margin-left:auto;font-size:10.5px;background:var(--warm-500);color:white;padding:1px 7px;border-radius:99px;font-weight:600}
.nav-item.active .badge{background:var(--paper);color:var(--ink)}

.sidebar-user{
  margin-top:auto; padding:10px; display:flex; gap:10px; align-items:center;
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
}
.sidebar-user .who{font-size:12.5px;font-weight:600;line-height:1.2}
.sidebar-user .role{font-size:10.5px;color:var(--muted);font-family:var(--font-mono);text-transform:uppercase}

/* main area */
.main{padding:0;background:var(--bg);min-width:0}
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:18px 28px;border-bottom:1px solid var(--line);
  background:rgba(253,251,247,.7); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:30;
}
.topbar h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em;font-family:var(--font-thai)}
.topbar .sub-en{margin-left:6px;color:var(--muted);font-family:var(--font-serif);font-weight:300;font-style:italic;font-size:18px}
.topbar .spacer{flex:1}
.content{padding:28px}

/* ============ avatars ============ */
.avatar{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
  font-weight:600;font-size:13px;color:white;
  font-family:var(--font-thai);
}
.avatar.sm{width:26px;height:26px;font-size:11px}
.avatar.lg{width:48px;height:48px;font-size:16px}
.avatar.xl{width:72px;height:72px;font-size:24px}

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 14px; border-radius:10px;
  font-size:13px; font-weight:500; transition:.15s ease;
  border:1px solid transparent; white-space:nowrap;
}
.btn.sm{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.btn.lg{height:44px;padding:0 18px;font-size:14px;border-radius:12px}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:oklch(0.30 0.02 290)}
.btn-brand{background:var(--brand-500);color:white}
.btn-brand:hover{background:var(--brand-600)}
.btn-warm{background:var(--warm-500);color:white}
.btn-warm:hover{background:var(--warm-600)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--brand-50)}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--ink);background:var(--paper)}
.btn-danger{background:transparent;color:var(--red-500);border-color:transparent}
.btn-danger:hover{background:oklch(0.96 0.02 25)}

/* ============ cards & surfaces ============ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.card-pad{padding:20px}
.surface{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}

/* ============ form ============ */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:500;color:var(--ink-2)}
.input,.select,.textarea{
  border:1px solid var(--line-strong); background:var(--surface);
  border-radius:10px; padding:10px 12px; font-size:13.5px;
  transition:.15s ease; width:100%;
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.textarea{resize:vertical;min-height:80px;line-height:1.5}
.input-lg{height:46px;border-radius:12px;font-size:14px;padding:0 14px}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;font-size:11.5px;font-weight:500;
  background:var(--brand-50);color:var(--brand-700);
  border-radius:99px;
}
.chip.warm{background:var(--warm-100);color:var(--warm-700)}
.chip.neutral{background:oklch(0.94 0.005 290);color:var(--ink-2)}
.chip.dot::before{content:'';width:6px;height:6px;border-radius:99px;background:currentColor}

/* ============ work cards ============ */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.work-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; cursor:pointer; transition:.2s ease; display:flex; flex-direction:column;
}
.work-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-3); border-color:var(--brand-200)}
.work-thumb{aspect-ratio:4/3;background:var(--brand-50);position:relative;overflow:hidden;display:grid;place-items:center}
.work-thumb .placeholder{font-family:var(--font-mono);font-size:10.5px;color:var(--brand-700);text-transform:uppercase;letter-spacing:.08em;text-align:center;padding:0 18px}
.work-thumb .corner{position:absolute;top:10px;left:10px;display:flex;gap:4px}
.work-thumb .corner-r{position:absolute;top:10px;right:10px}
.work-card .meta{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.work-card .title{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.005em}
.work-card .by{font-size:12px;color:var(--muted)}
.work-card .footer{margin-top:8px;display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted);font-family:var(--font-mono)}
.work-card .footer .stat{display:inline-flex;align-items:center;gap:4px}
.work-card .footer .score{margin-left:auto;font-weight:600;color:var(--warm-700)}

/* generated thumb patterns (placeholder art) */
.thumb-bg{position:absolute;inset:0}
.thumb-1{background:repeating-linear-gradient(45deg, oklch(0.85 0.12 50), oklch(0.85 0.12 50) 8px, oklch(0.90 0.10 60) 8px, oklch(0.90 0.10 60) 16px)}
.thumb-2{background:repeating-linear-gradient(135deg, oklch(0.86 0.10 280), oklch(0.86 0.10 280) 10px, oklch(0.92 0.07 280) 10px, oklch(0.92 0.07 280) 20px)}
.thumb-3{background:radial-gradient(circle at 30% 40%, oklch(0.86 0.11 150), oklch(0.94 0.05 150) 60%)}
.thumb-4{background:repeating-linear-gradient(0deg, oklch(0.84 0.13 25), oklch(0.84 0.13 25) 12px, oklch(0.91 0.08 30) 12px, oklch(0.91 0.08 30) 24px)}
.thumb-5{background:linear-gradient(160deg, oklch(0.78 0.14 305), oklch(0.88 0.09 50))}
.thumb-6{background:radial-gradient(circle at 70% 30%, oklch(0.85 0.13 95), oklch(0.92 0.07 200) 70%)}
.thumb-7{background:repeating-linear-gradient(90deg, oklch(0.86 0.10 200), oklch(0.86 0.10 200) 6px, oklch(0.92 0.07 200) 6px, oklch(0.92 0.07 200) 12px)}
.thumb-8{background:linear-gradient(135deg, oklch(0.84 0.10 60), oklch(0.78 0.13 30))}
.thumb-9{background:conic-gradient(from 45deg at 60% 40%, oklch(0.85 0.12 305), oklch(0.87 0.10 50), oklch(0.85 0.11 150), oklch(0.85 0.12 305))}
.thumb-10{background:repeating-linear-gradient(-45deg, oklch(0.80 0.10 180), oklch(0.80 0.10 180) 14px, oklch(0.90 0.06 200) 14px, oklch(0.90 0.06 200) 28px)}

/* small icon badge on thumb */
.type-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:99px;font-size:10.5px;
  background:rgba(255,255,255,.92);color:var(--ink);
  font-weight:500;backdrop-filter:blur(6px);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;
}
.group-badge{
  background:var(--ink);color:var(--paper);
}

/* avatar stack */
.avatar-stack{display:inline-flex}
.avatar-stack > *{margin-left:-8px;border:2px solid var(--surface)}
.avatar-stack > *:first-child{margin-left:0}

/* ============ stats ============ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat-card{padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.stat-card .label{font-size:11.5px;color:var(--muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.stat-card .num{font-family:var(--font-serif);font-size:42px;line-height:1;font-weight:300;margin-top:8px;letter-spacing:-.02em}
.stat-card .delta{font-size:11.5px;color:var(--green-500);margin-top:6px;font-family:var(--font-mono)}
.stat-card.warm{background:var(--warm-100);border-color:var(--warm-200)}
.stat-card.brand{background:var(--brand-500);color:white;border-color:var(--brand-500)}
.stat-card.brand .label,.stat-card.brand .delta{color:rgba(255,255,255,.7)}

/* ============ tables ============ */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono);font-weight:500;padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--brand-50)}

/* ============ modal ============ */
.modal-veil{position:fixed;inset:0;background:rgba(20,10,30,.45);backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:20px;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal{background:var(--surface);border-radius:var(--radius-xl);max-width:980px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .25s ease;box-shadow:var(--shadow-3)}
.modal-head{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.modal-body{overflow:auto;padding:0;display:grid}

/* ============ login screen ============ */
.auth-shell{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
  background:var(--bg);
}
.auth-art{
  background: linear-gradient(155deg, var(--brand-500), var(--brand-700) 60%, oklch(0.32 0.08 320));
  color:white;padding:48px;display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.auth-art::before{
  content:'';position:absolute;inset:auto -10% -20% -10%;height:60%;
  background:radial-gradient(ellipse at 30% 100%, var(--warm-500), transparent 60%);
  opacity:.55; pointer-events:none;
}
.auth-form-wrap{display:grid;place-items:center;padding:40px}
.auth-form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:18px}
.auth-form h1{font-family:var(--font-serif);font-size:42px;font-weight:400;line-height:1;letter-spacing:-.02em;margin:0}
.auth-form h1 em{font-style:italic;color:var(--brand-500);font-weight:300}

/* ============ timeline ============ */
.timeline{position:relative;display:flex;flex-direction:column;gap:34px;padding-left:32px}
.timeline::before{content:'';position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--brand-300),var(--warm-300, var(--warm-200)))}
.tl-mark{position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:99px;background:var(--surface);border:2px solid var(--brand-500);display:grid;place-items:center}
.tl-mark::after{content:'';width:8px;height:8px;border-radius:99px;background:var(--brand-500)}
.tl-item{position:relative}
.tl-date{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}

/* ============ comments ============ */
.comment-list{display:flex;flex-direction:column;gap:16px}
.comment{display:flex;gap:10px}
.comment-body{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.comment-body.teacher{background:var(--warm-50);border-color:var(--warm-200)}
.comment-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.comment-head .name{font-weight:600;font-size:12.5px}
.comment-head .when{font-size:11px;color:var(--muted);font-family:var(--font-mono)}
.comment-head .tag{font-size:10px;background:var(--warm-500);color:white;padding:1px 6px;border-radius:99px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.comment-text{font-size:13px;line-height:1.55;color:var(--ink-2)}
.comment-actions{display:flex;gap:6px;margin-top:8px;align-items:center}
.comment-actions button{font-size:11.5px;color:var(--muted);padding:2px 6px;border-radius:6px}
.comment-actions button:hover{background:var(--brand-50);color:var(--ink)}
.reply-list{margin-top:10px;padding-left:18px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:10px}

.reactions{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.reaction{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:99px;
  background:var(--brand-50);border:1px solid var(--brand-100);
  font-size:11.5px;font-weight:500;cursor:pointer;transition:.15s;
}
.reaction:hover{transform:scale(1.05)}
.reaction.active{background:var(--brand-500);border-color:var(--brand-500);color:white}

/* sticker / badge inside comment */
.sticker-row{display:flex;gap:6px;margin-top:6px}
.sticker{
  font-size:11px;font-weight:600;
  padding:3px 8px;border-radius:8px;
  background:var(--warm-500);color:white;
  display:inline-flex;align-items:center;gap:4px;
}
.sticker.purple{background:var(--brand-500)}
.sticker.green{background:var(--green-500)}

/* score widget */
.score-input{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--brand-50);border-radius:10px;font-size:12px}
.star-btn{font-size:18px;line-height:1;color:var(--line-strong);transition:.1s}
.star-btn.on{color:var(--warm-500)}

/* ============ filters bar ============ */
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{padding:6px 12px;font-size:12.5px;font-weight:500;border-radius:7px;color:var(--muted)}
.seg button.on{background:var(--ink);color:var(--paper)}
.seg button:hover:not(.on){color:var(--ink)}

/* ============ upload screen ============ */
.dropzone{
  border:2px dashed var(--brand-300); border-radius:var(--radius-lg);
  padding:48px 24px; text-align:center; background:var(--brand-50);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  transition:.2s;
}
.dropzone:hover{border-color:var(--brand-500);background:oklch(0.94 0.04 305)}

/* ============ utility ============ */
.row{display:flex;gap:12px;align-items:center}
.col{display:flex;flex-direction:column;gap:12px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-serif)}
.hidden{display:none}
.tag-en{font-family:var(--font-serif);font-style:italic;color:var(--muted)}

/* ============ responsive ============ */
@media (max-width: 1024px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-100%;width:240px;z-index:60;transition:.25s;box-shadow:var(--shadow-3)}
  .sidebar.open{left:0}
  .topbar .menu-btn{display:inline-flex !important}
  .work-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .auth-shell{grid-template-columns:1fr}
  .auth-art{padding:32px;min-height:240px}
  .content{padding:20px}
  .topbar{padding:14px 20px}
}
@media (max-width: 640px){
  .stat-card .num{font-size:32px}
  .topbar h1{font-size:18px}
  .topbar .sub-en{font-size:16px}
  .work-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
}

.menu-btn{display:none !important}
@media (max-width:1024px){
  .menu-btn{display:inline-flex !important;padding:6px;border-radius:8px;color:var(--ink);background:var(--surface);border:1px solid var(--line)}
}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs button{padding:10px 14px;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-color:var(--ink)}
.tabs button:hover:not(.on){color:var(--ink-2)}

/* progress bar */
.pbar{height:6px;border-radius:99px;background:var(--brand-100);overflow:hidden}
.pbar > div{height:100%;background:linear-gradient(90deg,var(--brand-500),var(--warm-500));border-radius:99px;transition:.4s}

/* keyframe sparkle */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--green-500);animation:pulse 1.6s infinite;margin-right:6px;vertical-align:middle}