/* ================================================================
   THAILAND JUNIOR COMPETITION (TJC)  |  SHARED DESIGN SYSTEM
   Edit the global palette and reusable components in this file.
   Edit page-specific styles in assets/css/{page}.css.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap');
:root {
  color-scheme: dark;
  --bg:#090a0b; --bg-raised:#101114; --card:#151515; --card-soft:#1d1b19;
  --ink:#f6efe4; --muted:#b0a795; --edge:#423727; --edge-bright:#826536;
  --gold:#d9b56b; --gold-light:#f2d79a; --gold-deep:#a47d3c; --gold-dark:#312718;
  --violet:var(--gold); --violet2:var(--gold-light); /* legacy class compatibility */
  --radius:18px; --shadow:0 24px 72px rgba(0,0,0,.24);
  --positive:#9bd4a9; --negative:#f4a19f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font:400 14px/1.7 Prompt,system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);background:radial-gradient(ellipse 70% 460px at 60% -260px,#3a2d17 0,transparent 100%),var(--bg)}
::selection{background:#765b32;color:#fff}
a{color:inherit;text-decoration:none}a:hover{color:var(--gold-light)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
img{max-width:100%}h1,h2,h3{color:var(--ink);line-height:1.24;letter-spacing:-.035em}
h1{font-size:clamp(28px,4.4vw,50px);margin:0 0 16px;font-weight:600}
h2{font-size:clamp(21px,2.45vw,30px);margin:0 0 18px;font-weight:600}
h3{font-size:18px;margin:0 0 12px;font-weight:600}
p{line-height:1.85;margin:0 0 13px}
strong,b{font-weight:600}
.container{width:min(1230px,100%);margin:0 auto;padding:0 26px}
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid #393023;
  background:rgba(10,10,10,.91);backdrop-filter:blur(20px)}
.nav{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;color:var(--gold-light)}
.brand-image{display:block;width:54px;height:54px;border:1px solid #6a532f;border-radius:9px;object-fit:contain;background:#000}
.brand-name{display:flex;flex-direction:column;line-height:1.2;gap:5px}
.brand-name strong{font:600 25px/1 'DM Sans',sans-serif;letter-spacing:.22em}
.brand-name small{font:500 9px/1.3 'DM Sans',sans-serif;letter-spacing:.175em;color:#e2c184}
.navlinks{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.navlinks>a{font-size:12px;font-weight:500;white-space:nowrap}
.navlinks>.button{font-size:12px}
.main{min-height:calc(100vh - 186px);padding-top:30px;padding-bottom:88px}
.footer{border-top:1px solid #2f291f;padding:23px 0;background:#0b0b0b;color:#958776;text-align:center;font:500 11px/1.7 'DM Sans',Prompt,sans-serif;letter-spacing:.09em}
.footer strong{color:var(--gold);letter-spacing:.16em}.footer span{padding-left:12px}
.eyebrow{font:600 11px/1.5 'DM Sans',sans-serif;letter-spacing:.21em;color:var(--gold);text-transform:uppercase}
.hero{overflow:hidden;border-radius:var(--radius);border:1px solid #625032;box-shadow:var(--shadow)}
.subnav,.flex,.row,.between{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{justify-content:space-between}
.subnav{background:#161513;border:1px solid var(--edge);padding:10px;border-radius:13px;margin-bottom:30px}
.subnav a{border-radius:10px;padding:9px 13px;color:#d2c1a3;font-size:12px}
.subnav a:hover{background:#342a1b;color:var(--gold-light)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:19px}
.albumgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:17px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}.kpi b{font-size:29px;color:var(--gold-light)}
.card{background:linear-gradient(145deg,#191817,#121211);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card:hover{border-color:#6c5738}
.pad{padding:25px}
.mediaimg{background:linear-gradient(135deg,#2a281f,#14130f);height:220px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:var(--gold);font-size:35px}
.mediaimg img,.thumb img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px;height:190px;background:#161411}
.thumb{border-radius:12px;overflow:hidden;background:#2a251e;display:flex;align-items:center;justify-content:center}
.lock{position:absolute;inset:auto 0 0;padding:30px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.93));color:#f3e5cf;font-size:12px;font-weight:600}
.meta,.help{color:var(--muted);font-size:13px}.price{font-size:23px;font-weight:700;color:var(--gold-light)}
.tag,.badge{display:inline-block;border-radius:100px;border:1px solid #6c532d;background:#382c1b;color:var(--gold-light);font-size:11px;font-weight:600;letter-spacing:.025em;padding:5px 11px}
.tag.ok,.badge.ok{background:#173326;color:#9ce2b0;border-color:#2f6749}
.tag.bad,.badge.bad{background:#3e2424;color:#f4b0a8;border-color:#71403b}
.button,button,.btn{border:1px solid #675639;border-radius:11px;background:#252018;color:#ead7b5;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1.5;font:600 13px Prompt,sans-serif;cursor:pointer;transition:background .15s,transform .15s,border-color .15s}
.button:hover,button:hover,.btn:hover{background:#3d3121;border-color:var(--gold);transform:translateY(-1px);color:#fff}
.button.primary,.primary{background:linear-gradient(130deg,#f0d28b,#c3984f);border-color:#d3aa63;color:#151109!important}
.button.primary:hover,.primary:hover{background:linear-gradient(125deg,#ffe2a3,#cfaa65);color:#080705!important}
.button.dark,.dark{background:#090909;color:var(--gold-light);border-color:var(--edge-bright)}
.button.ok,.ok{background:#204936;border-color:#427658;color:#b5edc2}
.button.bad,.bad{background:#542f2e;border-color:#824742;color:#f6c9c3}
.button.small{padding:7px 12px;font-size:12px}
form{display:grid;gap:13px}form.inline,.inline{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
label{font-weight:500;font-size:13px;color:#d3c5ac}
input,select,textarea{width:100%;min-width:0;border:1px solid #65543a;border-radius:11px;padding:12px 13px;background:#141310;color:#f8eee0;font:inherit}
input::placeholder,textarea::placeholder{color:#988d7b}
input:focus,select:focus,textarea:focus{border-color:var(--gold-light);outline:2px solid #6b542b}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:#d9b56b}
input[type=file]{max-width:100%}select option{background:#141310;color:#fff}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.flash{padding:13px 18px;border:1px solid #6b5a3b;border-radius:12px;background:#30281b;color:#fae5b8;margin-bottom:20px}
.flash.error{background:#3b2222;border-color:#784243;color:#ffc7be}.flash.ok{background:#1e3426;border-color:#366246;color:#b2f3c2}
.table-wrap{overflow-x:auto}.table{border-collapse:collapse;min-width:660px;width:100%}.table th,.table td{text-align:left;padding:14px;vertical-align:top;border-bottom:1px solid var(--edge)}
.table th{background:#262118;color:var(--gold-light);font-size:12px}.table td{background:#161514}
.code{font-family:ui-monospace,monospace;color:#e5c88d;letter-spacing:.02em}
.empty{padding:44px;text-align:center;color:var(--muted)}.header-row{margin:0 0 24px}
.stat{border:1px solid var(--edge);border-radius:12px;background:#1d1a17;padding:17px}
.centered{max-width:500px;margin:34px auto}.total{font-size:32px;font-weight:700;color:var(--gold-light)}
.divider{border:0;border-top:1px solid var(--edge);margin:20px 0}
.crumb{font-size:12px;color:var(--muted);margin-bottom:16px}.full{width:100%}
.person{padding:18px;border:1px solid var(--edge);background:#191713;border-radius:14px;transition:background .15s,border-color .15s}
.person:hover{background:#292216;border-color:var(--gold)}.check{display:flex;align-items:center;gap:6px}
.highlight{border:2px solid var(--gold)!important}
/* Small reusable utilities. Keep page overrides inside the named page CSS. */
.tjc-breakword{overflow-wrap:anywhere}.tjc-mt28{margin-top:28px}.tjc-mb20{margin-bottom:20px}
@media(max-width:800px){.container{padding:0 18px}.nav{padding:12px 0;min-height:76px;flex-wrap:wrap}.navlinks{gap:11px}.main{padding:20px 0 55px}.grid[style*="grid-template-columns"]{grid-template-columns:1fr!important}}
@media(max-width:520px){.brand-image{width:43px;height:43px}.brand-name strong{font-size:20px}.brand-name small{font-size:7px}.navlinks>a{font-size:11px}.albumgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.albumgrid .mediaimg{height:170px}.pad,.albumgrid .pad{padding:15px}.form-row{grid-template-columns:1fr}.table th,.table td{padding:9px}}

/* TJC patch: stand-out sign-out button + mobile-friendly header */
.navlinks .nav-logout{background:linear-gradient(135deg,#d6ae66,#b48843);color:#151008!important;border-color:#e3c68c;font-size:12px;min-height:40px;box-shadow:0 0 0 1px rgba(215,169,83,.12)}
.navlinks .nav-logout:hover{background:#f5d38e;color:#090806!important}
@media(max-width:640px){.nav{gap:10px;padding:12px 0}.brand{gap:9px}.navlinks{width:100%;justify-content:space-between;gap:8px}.navlinks>a{flex:1 1 auto;text-align:center;padding:10px 6px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}.brand-name small{letter-spacing:.08em}.nav-logout{flex:0 0 auto!important}}
@media(max-width:385px){.brand-name small{font-size:6px}.navlinks{gap:4px}.navlinks>a{font-size:10px}}