
/* V3.1 — Premium launch polish
   Design principles: one hierarchy, one icon language, clear operational states,
   compact high-speed operation UI, and presentation-ready public pages. */
:root{
  --radius-xs:8px;--radius-sm:12px;--radius-md:16px;--radius-lg:22px;--radius-xl:30px;
  --shadow-xs:0 1px 2px rgba(15,45,48,.04);
  --shadow-sm:0 6px 18px rgba(15,72,70,.06);
  --shadow-md:0 18px 46px rgba(15,72,70,.10);
  --shadow-lg:0 26px 70px rgba(7,63,68,.15);
  --success:#079455;--warning2:#dc6803;--danger2:#d92d20;--info:#1570ef;
  --content:1460px;
}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:"Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{max-width:var(--content);padding:26px 32px 34px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Header */
.topbar{height:82px;padding:0 38px;background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(8,79,75,.05);backdrop-filter:blur(14px)}
.brand{gap:13px}.brand img{width:52px;height:52px}.brand span{font-size:11px;letter-spacing:.01em}.brand strong{font-size:19px;line-height:1.35}.brand small{font-size:12px}.top-meta{gap:9px;font-size:12px}
#roleBadge{font-weight:800}.topbar .btn{box-shadow:none}

/* Typography */
h1,h2,h3{letter-spacing:-.025em}.section-head h2,.panel-head h2{font-weight:800}.eyebrow{letter-spacing:.03em;font-size:11px;color:#55bfb4}.muted{color:var(--muted)}

/* Buttons & form controls */
.btn{border-radius:12px;padding:11px 17px;box-shadow:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 8px 18px rgba(8,127,120,.16)}
.btn.primary:hover{box-shadow:0 12px 24px rgba(8,127,120,.22)}
.btn.secondary{border:1px solid rgba(8,127,120,.08)}.btn.danger{background:#fff6f5;border-color:#fecdca}.btn.ghost{box-shadow:none}
.field{gap:8px}.field>input,.field>select,.field>textarea,.search{border-radius:12px;border-color:#d4e3e0;min-height:44px;padding:11px 13px;transition:border .15s,box-shadow .15s,background .15s}
.field input:focus,.field select:focus,.field textarea:focus,.search:focus{border-color:#66c7be;box-shadow:0 0 0 4px rgba(11,154,145,.10)}

/* Surface language */
.panel,.game,.stat,.mini,.role-card,.resource-card,.operation,.log-card,.table-wrap,.announcement-card,.side{border-color:#dce9e7;box-shadow:var(--shadow-sm)}
.panel{border-radius:20px}.stat,.mini{border-radius:16px}.resource-card,.operation{border-radius:18px}

/* SVG icon system */
.ui-icon{width:20px;height:20px;display:inline-grid;place-items:center;flex:0 0 20px}.ui-icon svg{width:20px;height:20px;display:block}
.sport-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#f3fbfa,#e4f4f1);border:1px solid #d7ebe7;flex:0 0 auto}.sport-icon img{width:34px;height:34px;object-fit:contain}

/* -------- Public landing -------- */
.premium-home{gap:0}
.premium-hero{min-height:342px!important;grid-template-columns:1.05fr .95fr!important;padding:42px 52px!important;border-radius:28px!important;box-shadow:var(--shadow-lg)!important;background:radial-gradient(circle at 18% 15%,rgba(99,222,209,.22),transparent 30%),linear-gradient(135deg,#063f44 0%,#076861 54%,#0b9589 100%)!important;isolation:isolate}
.premium-hero:after{content:"";position:absolute;width:370px;height:370px;border-radius:50%;inset:auto -130px -190px auto;background:rgba(255,255,255,.07);z-index:-1}
.premium-hero .hero-copy{align-self:center;max-width:760px}.premium-hero h1{font-size:43px!important;line-height:1.28!important;margin:9px 0 12px;max-width:750px}.premium-hero p{font-size:15px!important;line-height:1.95!important;max-width:680px;color:#dcefed!important}.hero-eyebrow{color:#9be2da!important}
.hero-primary{min-width:148px;justify-content:center;display:inline-flex;gap:14px;align-items:center;background:#fff!important;color:#086f68!important;box-shadow:0 12px 30px rgba(0,0,0,.13)!important}.hero-primary:hover{background:#f9ffff!important}
.hero-trust{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.hero-trust span{padding:7px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);font-size:11px;color:#e7f6f4}
.premium-visual{position:relative;min-height:250px;overflow:visible}.hero-campus{position:absolute;bottom:-42px;left:-30px;width:118%;max-width:650px;height:auto;object-fit:contain;filter:drop-shadow(0 24px 25px rgba(0,0,0,.14));opacity:.97}.visual-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(99,220,207,.18);filter:blur(5px);left:18%;top:4%}
.floating-sport{position:absolute;width:66px;height:66px;border-radius:20px;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 18px 35px rgba(3,48,48,.17);border:1px solid rgba(255,255,255,.75)}.floating-sport .sport-icon{background:transparent;border:0}.floating-a{top:26px;right:10%}.floating-b{top:92px;left:7%}.floating-c{bottom:12px;right:23%}

.premium-live{margin-top:15px;border-radius:18px!important;padding:14px 20px!important;box-shadow:var(--shadow-sm)!important}.live-state{display:flex;align-items:center;gap:12px}.live-state small,.live-metrics small{display:block;color:var(--muted);font-size:10px;margin-bottom:2px}.live-state b{font-size:14px}.live-metrics{display:flex;align-items:center;gap:28px}.live-metrics>span{padding-inline-start:28px;border-inline-start:1px solid var(--line)}.live-metrics>span:last-child{padding-inline-start:0;border-inline-start:0}.live-metrics b{display:block;font-size:13px}
.premium-section-head{align-items:flex-end;margin-bottom:16px}.premium-section-head h2{font-size:26px;margin-top:4px}.home-info{margin-top:5px;display:block}
.premium-games{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.premium-game{padding:18px 18px 16px!important;min-height:250px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)!important;border:1px solid #dbeae7!important}.premium-game:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-md)!important;border-color:#c4e1dc!important}.game-top{display:flex;justify-content:space-between;align-items:start;gap:12px}.availability-pill{border-radius:999px;padding:6px 9px;display:inline-flex;align-items:center;gap:6px;background:#eff8f5;color:#067647;font-size:10px;font-weight:800}.availability-pill i{width:7px;height:7px;border-radius:50%;background:#12b76a}.availability-pill.closed{background:#f2f4f7;color:#667085}.availability-pill.closed i{background:#98a2b3}.availability-pill.maintenance{background:#fff1f0;color:#b42318}.availability-pill.maintenance i{background:#f04438}.premium-game .game-copy h3{font-size:19px;margin:15px 0 6px}.premium-game .game-copy p{font-size:12px;line-height:1.65;margin:0;min-height:39px}.game-facts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.game-facts span{background:#f6faf9;border:1px solid #e3efed;border-radius:10px;padding:6px 8px;font-size:10px;color:var(--muted)}.game-facts b{color:var(--ink)}.game-live{margin-top:auto;padding-top:12px;border-top:1px solid #e5efed;font-size:11px;color:var(--muted)}.capacity-track{height:4px;background:#edf3f2;border-radius:10px;overflow:hidden;margin-top:8px}.capacity-track i{display:block;height:100%;background:linear-gradient(90deg,#56cbbf,#078c82);border-radius:10px}

.system-portals{margin-top:28px;padding:22px 24px;border-radius:20px;background:linear-gradient(135deg,#f7fbfa,#eef8f6);border:1px solid #d9e9e6;display:grid;grid-template-columns:1fr 1.35fr;align-items:center;gap:24px}.portal-copy h2{margin:4px 0 6px;font-size:20px}.portal-copy p{margin:0}.portal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.portal-card{border:1px solid #d5e7e3;background:#fff;border-radius:16px;padding:14px 15px;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;text-align:right;color:var(--ink);transition:.16s;box-shadow:var(--shadow-xs)}.portal-card:hover{border-color:#9ed4cd;transform:translateY(-2px);box-shadow:var(--shadow-sm)}.portal-card .ui-icon{width:38px;height:38px;border-radius:12px;background:#e7f4f2;color:var(--primary);padding:9px}.portal-card .ui-icon svg{width:20px;height:20px}.portal-card span b,.portal-card span small{display:block}.portal-card span small{font-size:10px;color:var(--muted);margin-top:3px}.portal-card>strong{font-size:18px;color:var(--primary)}.portal-card.admin .ui-icon{background:#edf4ff;color:#175cd3}
.premium-announcement{border-radius:18px!important;overflow:hidden}

/* -------- Trainee booking -------- */
.premium-welcome{padding:22px 24px}.welcome-main{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.welcome-main h1{font-size:26px;margin:4px 0 5px}.hall-status{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;background:#f2f4f7;color:#667085}.hall-status i{width:8px;height:8px;border-radius:50%;background:#98a2b3}.hall-status.open{background:#ecfdf3;color:#027a48}.hall-status.open i{background:#12b76a}.trainee-kpis{margin-top:18px}.trainee-kpis .mini{box-shadow:none;background:#f8fbfa}.trainee-kpis .mini b{font-size:21px}.trainee-kpis em{font-size:11px;font-style:normal;color:var(--muted);font-weight:600}.trainee-kpis .small-value{font-size:14px!important;line-height:1.4}
.premium-booking-grid{grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr)!important;gap:18px}.booking-panel{min-height:500px;padding:25px}.booking-head h2{margin:4px 0 3px}.booking-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.booking-slots{grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0}.booking-slots .slot{border-radius:13px;min-height:64px;border-style:solid;background:#fff}.booking-slots .slot b{font-size:15px}.booking-slots .slot small{font-size:9px;color:var(--muted)}.booking-slots .slot.available:hover{background:#f3fbf9;border-color:#72cfc4}.booking-slots .slot.selected{background:#e7f8f4;border-color:#098a80;box-shadow:0 0 0 3px rgba(8,138,128,.10)}.booking-actions{display:flex;gap:9px;align-items:center;margin-top:14px}.booking-empty{grid-column:1/-1;border:1px dashed #d2e5e1;background:#f8fbfa;border-radius:16px;padding:28px 22px;display:flex;gap:14px;align-items:center;text-align:right}.booking-empty .empty-icon{width:48px;height:48px;border-radius:14px;background:#e8f4f2;color:var(--primary);display:grid;place-items:center}.booking-empty b{font-size:15px}.booking-empty p{margin:4px 0;color:var(--muted);font-size:12px}.booking-empty small{color:#829391}
.instruction-panel{padding:25px;position:relative;overflow:hidden}.instruction-icon{width:48px;height:48px;border-radius:15px;background:#e7f4f2;color:var(--primary);display:grid;place-items:center;margin-bottom:18px}.instruction-panel h2{margin:4px 0 12px}.instruction-list.compact{line-height:1.8;margin:0;padding-right:22px}.instruction-list.compact li{margin-bottom:4px}.premium-pledge{margin-top:20px;padding:13px;border-radius:13px;background:#f7fbfa;border:1px solid #dfebe9;font-size:12px}.premium-pledge input{min-height:auto;width:18px;height:18px;accent-color:var(--primary)}
.participation-panel{border:1px solid #d8e9e6;background:linear-gradient(135deg,#fff,#f0f9f7);border-radius:20px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:var(--shadow-sm)}.participation-panel h2{margin:4px 0 4px}.participation-panel p{margin:0}

/* -------- Admin shell -------- */
.dashboard{grid-template-columns:280px minmax(0,1fr);gap:20px}.premium-side{padding:10px 9px 14px;border-radius:20px;box-shadow:var(--shadow-sm);max-height:calc(100vh - 112px);overflow:auto;scrollbar-width:thin}.premium-side .nav-label{padding:15px 12px 6px;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.premium-side button{display:flex!important;align-items:center;gap:11px;min-height:46px;margin-bottom:3px;padding:11px 12px;border-radius:12px;font-weight:700;color:#43585c}.premium-side button .ui-icon{color:#75918f}.premium-side button.active{background:linear-gradient(135deg,#e4f4f1,#edf8f6);color:#067b73;box-shadow:inset 3px 0 0 #0b9a91}.premium-side button.active .ui-icon{color:#087f78}.premium-side button:hover{background:#f0f7f5}.content>.section-head{padding:5px 2px 10px}.section-head>div>h2{font-size:27px;line-height:1.25;margin-top:4px}.v3-stats{gap:10px}.v3-stats .stat{padding:15px 16px;box-shadow:var(--shadow-xs);background:linear-gradient(180deg,#fff,#fbfdfd)}.v3-stats .stat small{font-size:10px}.v3-stats .stat b{font-size:25px;letter-spacing:-.04em}
.game-status-grid{gap:12px}.game-status-card{border-radius:18px!important;box-shadow:var(--shadow-sm)!important;padding:15px!important}.game-status-icon{background:#f2f9f7!important;border:1px solid #e0efec!important;font-size:0!important}.game-status-icon .sport-icon{width:48px;height:48px;border:0;background:transparent}.game-status-icon .sport-icon img{width:30px;height:30px}.game-status-metrics small{border:1px solid #e8efee;background:#f7faf9!important}

/* Operations */
.operation-list{gap:11px}.operation{box-shadow:var(--shadow-xs);background:#fff;padding:16px}.operation:hover{border-color:#c8dfdb}.operation-actions{min-width:170px;align-self:center}.operator-line{font-size:10px;margin-top:5px}.participant-roster{margin-top:10px}.participant-chip{font-size:10px;padding:6px 9px}
.notice{border:1px solid transparent;border-radius:13px}.notice.ok{border-color:#abefc6}.notice.warn{border-color:#fedf89}.notice.bad{border-color:#fecdca}

/* Resources */
.resource-grid{gap:14px}.resource-card{padding:18px;box-shadow:var(--shadow-sm)}.resource-title{display:flex;align-items:center;gap:10px;margin:0}.resource-title .sport-icon{width:42px;height:42px;border-radius:13px}.resource-title .sport-icon img{width:27px;height:27px}.units{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}.unit{min-height:52px;border:1px solid #d7eee6;border-radius:12px!important;display:flex;justify-content:space-between;align-items:center;gap:8px;background:#effaf5!important}.unit.maintenance{background:#fff4f2!important;border-color:#fecdca!important}

/* Tables */
.table-wrap{border-radius:16px;box-shadow:var(--shadow-xs);border-color:#dbe8e6}.table{font-variant-numeric:tabular-nums}.table th{background:#f6faf9!important;color:#536b6d!important;font-size:10px!important;font-weight:800;letter-spacing:.01em;padding:12px 13px!important}.table td{padding:12px 13px!important;font-size:11px!important}.table tbody tr{transition:background .12s}.table tbody tr:hover{background:#fbfdfc}.table tbody tr:last-child td{border-bottom:0}

/* Modals */
.modal{background:rgba(14,33,36,.56);backdrop-filter:blur(7px);padding:24px}.modal-box{border-radius:22px;padding:22px 24px;box-shadow:0 35px 100px rgba(6,37,39,.28);border:1px solid rgba(255,255,255,.9);max-height:calc(100vh - 48px);overflow:auto}.modal-box>.panel-head{position:sticky;top:-22px;background:var(--surface);z-index:4;padding:3px 0 12px;border-bottom:1px solid var(--line);margin-bottom:18px}.manual-modal{width:min(980px,calc(100vw - 40px))!important}.manual-modal .slots{grid-template-columns:repeat(6,1fr)}

/* Theme/layout previews */
.theme-grid,.layout-grid{gap:14px}.theme-preview,.layout-preview{border-radius:18px;box-shadow:var(--shadow-xs);transition:transform .16s,border .16s,box-shadow .16s}.theme-card:hover .theme-preview,.layout-card:hover .layout-preview{transform:translateY(-2px);box-shadow:var(--shadow-sm)}.theme-card input:checked+.theme-preview,.layout-card input:checked+.layout-preview{border-color:#0b9a91;box-shadow:0 0 0 4px rgba(11,154,145,.10),var(--shadow-sm)}

/* Audit/report polish */
.status{font-weight:800}.toolbar{gap:9px}.toolbar .search{min-width:260px}.pager{align-items:center}.student-result{border-radius:14px}

/* Footer */
footer{max-width:var(--content);margin:0 auto;padding:28px 30px 30px;border-top:1px solid rgba(8,127,120,.08);font-size:10px;letter-spacing:.01em}

/* Dark themes: preserve new surfaces */
[data-theme="midnight"] .system-portals,[data-theme="graphite"] .system-portals{background:linear-gradient(135deg,var(--surface),var(--soft2));border-color:var(--line)}
[data-theme="midnight"] .portal-card,[data-theme="graphite"] .portal-card,[data-theme="midnight"] .premium-game,[data-theme="graphite"] .premium-game{background:var(--surface);border-color:var(--line)}
[data-theme="midnight"] .game-facts span,[data-theme="graphite"] .game-facts span,[data-theme="midnight"] .premium-pledge,[data-theme="graphite"] .premium-pledge{background:var(--soft2);border-color:var(--line)}

/* Responsive */
@media(max-width:1180px){.premium-hero{grid-template-columns:1fr 1fr!important;padding:36px!important}.premium-hero h1{font-size:37px!important}.premium-games{grid-template-columns:repeat(2,1fr)}.dashboard{grid-template-columns:240px 1fr}.system-portals{grid-template-columns:1fr}.premium-booking-grid{grid-template-columns:1.2fr .8fr!important}.manual-modal .slots{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){main{padding:20px}.topbar{padding:0 20px}.premium-hero{grid-template-columns:1fr!important;min-height:auto!important}.premium-visual{min-height:210px}.hero-campus{width:90%;left:5%;bottom:-48px}.premium-games{grid-template-columns:repeat(2,1fr)}.live-metrics{gap:14px}.dashboard{grid-template-columns:1fr}.premium-side{position:static;display:flex;overflow:auto;max-height:none;border-radius:16px;gap:4px;padding:7px}.premium-side .nav-label{display:none}.premium-side button{min-width:max-content}.premium-booking-grid{grid-template-columns:1fr!important}.portal-actions{grid-template-columns:1fr 1fr}.units{grid-template-columns:1fr 1fr}}
@media(max-width:680px){main{padding:12px}.topbar{height:68px;padding:0 12px}.brand img{width:42px;height:42px}.brand strong{font-size:13px}.premium-hero{padding:28px 22px 20px!important;border-radius:22px!important}.premium-hero h1{font-size:29px!important}.premium-hero p{font-size:13px!important}.premium-visual{min-height:170px}.floating-sport{width:50px;height:50px;border-radius:15px}.floating-sport .sport-icon{width:42px;height:42px}.hero-trust{display:none}.premium-live{align-items:stretch!important}.live-metrics{width:100%;justify-content:space-between}.live-metrics>span{padding-inline-start:14px}.premium-games{grid-template-columns:1fr}.premium-game{min-height:220px}.system-portals{padding:18px}.portal-actions{grid-template-columns:1fr}.welcome-main{flex-direction:column}.trainee-kpis{grid-template-columns:repeat(2,1fr)!important}.booking-fields{grid-template-columns:1fr}.booking-slots{grid-template-columns:repeat(3,1fr)}.participation-panel{align-items:flex-start;flex-direction:column}.manual-modal .slots{grid-template-columns:repeat(3,1fr)}.units{grid-template-columns:1fr}.modal{padding:10px}.modal-box{padding:18px;max-height:calc(100vh - 20px)}.modal-box>.panel-head{top:-18px}.section-head{align-items:flex-start;gap:10px}.section-head>div>h2{font-size:23px}.top-meta #clock{display:none}}
@media(max-width:420px){.booking-slots{grid-template-columns:repeat(2,1fr)}.trainee-kpis{grid-template-columns:1fr 1fr!important}.live-metrics{flex-direction:column;align-items:flex-start}.live-metrics>span{border:0;padding:0}.portal-card{grid-template-columns:auto 1fr}.portal-card>strong{display:none}}
