/* ============================================
   空闲教室查询系统 - 现代工业风格 (Modern Industrial UI)
   Spec: 硬核重工业 × 近未来科幻 × 粗野主义
   ============================================ */

/* --- CSS Variables (Design Tokens) --- */
:root {
  --ef-bg: #0a0a0a;
  --ef-surface: #121212;
  --ef-surface-raised: #1a1a1a;
  --ef-accent: #ffcc00;
  --ef-accent-blue: #0088ff;
  --ef-accent-red: #ff3344;
  --ef-border: #2a2a2a;
  --ef-border-hover: #444444;
  --ef-text-main: #e0e0e0;
  --ef-text-secondary: #888888;
  --ef-text-tertiary: #555555;
  --ef-font-sans: 'Inter', 'Oswald', -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', sans-serif;
  --ef-font-mono: 'JetBrains Mono', 'Roboto Mono', 'SF Mono', 'Cascadia Code', 'Consolas', 'Droid Sans Mono', monospace;
  --ef-transition: all 0.2s cubic-bezier(0.2, 1, 0.3, 1);
  --ef-chamfer: 12px;
  --nav-height: 52px;
}


/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ef-font-sans);
  background: var(--ef-bg);
  color: var(--ef-text-main);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Industrial grid dot pattern */
  background-image:
    radial-gradient(circle at 1px 1px, #1a1a1a 1px, transparent 0);
  background-size: 40px 40px;
  min-height: 100vh;
  overflow-x: hidden;
}

.page-transition-layer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(24vw, 280px);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(110vw, 0, 0) skewX(-8deg);
  background:
    linear-gradient(90deg, rgba(4, 5, 6, 0.04), rgba(255, 51, 68, 0.08) 42%, rgba(0, 136, 255, 0.03)),
    linear-gradient(90deg, transparent 0 44px, rgba(255, 255, 255, 0.18) 44px 45px, transparent 45px 92px),
    linear-gradient(90deg, transparent 0 112px, rgba(255, 204, 0, 0.22) 112px 113px, transparent 113px 160px),
    linear-gradient(90deg, transparent 0 184px, rgba(255, 51, 68, 0.18) 184px 185px, transparent 185px);
  will-change: transform, opacity;
}

.page-transition-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 100% 100%, 100% 34px;
  mix-blend-mode: screen;
  opacity: 0.48;
}

.page-transition-layer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ffcc00;
  box-shadow:
    0 0 20px rgba(255, 204, 0, 0.76),
    8px 0 0 rgba(255, 255, 255, 0.12),
    18px 0 0 rgba(255, 51, 68, 0.16);
}

body.enter-forward .page-transition-layer {
  --scan-start: 112vw;
  --scan-end: -36vw;
  animation: scanTravel 0.46s cubic-bezier(0.72, 0, 0.2, 1) both;
}

body.enter-forward .page-transition-layer::after {
  left: 0;
}

body.enter-back .page-transition-layer {
  --scan-start: -36vw;
  --scan-end: 112vw;
  animation: scanTravel 0.46s cubic-bezier(0.72, 0, 0.2, 1) both;
}

body.enter-back .page-transition-layer::after {
  right: 0;
}

body.is-entering.enter-forward .nav,
body.is-entering.enter-forward main,
body.is-entering.enter-forward .landing-footer {
  animation: pageEnterForward 0.46s cubic-bezier(0.2, 1, 0.3, 1) both;
}

body.is-entering.enter-back .nav,
body.is-entering.enter-back main,
body.is-entering.enter-back .landing-footer {
  animation: pageEnterBack 0.46s cubic-bezier(0.2, 1, 0.3, 1) both;
}

body.is-entering .nav,
body.is-entering main,
body.is-entering .landing-footer,
body.is-leaving .nav,
body.is-leaving main,
body.is-leaving .landing-footer {
  will-change: transform, opacity;
}

body.is-leaving .nav,
body.is-leaving main,
body.is-leaving .landing-footer {
  opacity: 0.82;
  transition:
    opacity 0.11s cubic-bezier(0.2, 1, 0.3, 1),
    transform 0.11s cubic-bezier(0.2, 1, 0.3, 1);
}

body.is-leaving.leave-forward .nav,
body.is-leaving.leave-forward main,
body.is-leaving.leave-forward .landing-footer {
  transform: translateX(-26px);
}

body.is-leaving.leave-back .nav,
body.is-leaving.leave-back main,
body.is-leaving.leave-back .landing-footer {
  transform: translateX(26px);
}

/* ============================================
   Navigation Bar (Industrial Style)
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(10, 10, 10, 0.95);
  border-bottom: 1px solid var(--ef-border);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav::before {
  content: '// SYS_NAV';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ef-font-mono);
  font-size: 9px;
  color: var(--ef-text-tertiary);
  letter-spacing: 0.1em;
  pointer-events: none;
}

.nav-inner {
  width: 100%;
  max-width: 1100px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-title {
  font-family: var(--ef-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ef-text-main);
  letter-spacing: 0.15em;
  text-decoration: none;
  padding: 6px 0;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links a,
.nav-back {
  display: flex;
  align-items: center;
  font-family: var(--ef-font-mono);
  font-size: 11px;
  color: var(--ef-text-secondary);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: var(--ef-transition);
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}

.nav-links a:hover,
.nav-back:hover {
  color: var(--ef-accent);
  border-color: var(--ef-border);
  background: rgba(255, 204, 0, 0.03);
}

.nav-links a::after,
.nav-back::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--ef-accent);
  transition: var(--ef-transition);
  transform: translateX(-50%);
}

.nav-links a:hover::after,
.nav-back:hover::after {
  width: 60%;
}

.nav-back {
  color: var(--ef-accent-blue);
  gap: 4px;
  border: 1px solid rgba(0, 136, 255, 0.2);
}

.nav-back:hover {
  color: var(--ef-accent-blue);
  border-color: var(--ef-accent-blue);
  background: rgba(0, 136, 255, 0.05);
}

.nav-back svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Main Content Wrapper --- */
.main {
  padding-top: calc(var(--nav-height) + 24px);
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 80px;
}

/* ============================================
   Chamfered Panel Mixin (via class)
   ============================================ */
.panel {
  background: var(--ef-surface);
  border: 1px solid var(--ef-border);
  position: relative;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--ef-chamfer)),
    calc(100% - var(--ef-chamfer)) 100%,
    0 100%
  );
}

/* Corner L-brackets (crosshairs) */
.panel::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--ef-border-hover);
  border-left: 2px solid var(--ef-border-hover);
  pointer-events: none;
  opacity: 0.6;
}

.panel::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-bottom: 2px solid var(--ef-border-hover);
  border-right: 2px solid var(--ef-border-hover);
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================
   Landing Page (index.html)
   ============================================ */
.landing-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  position: relative;
  overflow: hidden;
}

/* Background image with dark overlay */
.landing-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 5, 6, 0.92) 0%, rgba(6, 7, 8, 0.72) 32%, rgba(6, 7, 8, 0.24) 66%, rgba(5, 5, 6, 0.24) 100%),
    linear-gradient(135deg, rgba(0, 136, 255, 0.16) 0%, transparent 44%),
    linear-gradient(225deg, rgba(255, 204, 0, 0.12) 0%, transparent 54%),
    radial-gradient(ellipse at 24% 52%, rgba(0, 0, 0, 0.72) 0%, transparent 58%),
    image-set(url('../images/industrial-desktop.webp') type('image/webp'), url('../images/industrial-desktop.png') type('image/png')) center center / cover no-repeat;
}

/* Mobile background */
@media (max-width: 768px) {
  .landing-page::before {
    background:
      linear-gradient(180deg, rgba(7, 8, 9, 0.3) 0%, rgba(5, 5, 6, 0.74) 46%, rgba(4, 4, 5, 0.94) 100%),
      linear-gradient(90deg, rgba(6, 6, 7, 0.84) 0%, rgba(6, 6, 7, 0.18) 72%),
      linear-gradient(135deg, rgba(0, 136, 255, 0.12) 0%, transparent 46%),
      linear-gradient(225deg, rgba(255, 51, 68, 0.14) 0%, transparent 54%),
      image-set(url('../images/industrial-mobile.webp') type('image/webp'), url('../images/industrial-mobile.png') type('image/png')) center center / cover no-repeat;
  }
}

/* Decorative grid lines on landing */
.landing-page .grid-lines {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0 47%, rgba(255, 51, 68, 0.16) 47.2%, transparent 47.8%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 320px 320px, 80px 80px, 80px 80px;
  animation: backgroundDrift 16s linear infinite;
}

/* Landing nav transparent */
.landing-page .nav {
  background: rgba(10, 10, 10, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.landing-page .nav::before {
  color: rgba(255, 255, 255, 0.2);
}

.landing-page .nav-title {
  color: var(--ef-text-main);
}

.landing-page .nav-links a {
  color: rgba(255, 255, 255, 0.5);
}

.landing-page .nav-links a:hover {
  color: var(--ef-accent);
}

.landing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  margin-top: -40px;
  position: relative;
  z-index: 1;
}

.landing-title {
  font-family: var(--ef-font-sans);
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ef-text-main);
  margin-bottom: 16px;
  text-transform: uppercase;
  position: relative;
}

/* Decorative tech number next to title */
.landing-title::before {
  content: '// 01';
  position: absolute;
  top: -24px;
  left: 0;
  font-family: var(--ef-font-mono);
  font-size: 11px;
  color: var(--ef-text-tertiary);
  letter-spacing: 0.15em;
}

.landing-subtitle {
  font-family: var(--ef-font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--ef-text-secondary);
  margin-bottom: 48px;
  max-width: 520px;
}

/* Typewriter effect on subtitle */
.landing-subtitle.typing {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--ef-accent);
  animation: typewriter 2.5s steps(30) forwards, blink-cursor 0.8s step-end infinite;
  width: 0;
}

@keyframes typewriter {
  to { width: 100%; }
}

@keyframes blink-cursor {
  50% { border-color: transparent; }
}

/* --- Industrial CTA Button --- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ef-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: #0a0a0a;
  background: var(--ef-accent);
  padding: 14px 40px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: var(--ef-transition);
  min-width: 260px;
  position: relative;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%
  );
}

/* L-bracket corners on button */
.btn-cta::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(0, 0, 0, 0.3);
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.btn-cta::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-right: 2px solid rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.btn-cta:hover {
  background: #ffdd33;
  letter-spacing: 0.2em;
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.2);
}

.btn-cta:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Ghost Button --- */
.btn-ghost {
  display: none;
  font-family: var(--ef-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ef-text-secondary);
  background: transparent;
  padding: 8px 20px;
  border: 1px solid var(--ef-border);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: var(--ef-transition);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.btn-ghost:hover {
  color: var(--ef-accent);
  border-color: var(--ef-accent);
}

/* --- Landing Footer --- */
.landing-footer {
  text-align: center;
  padding: 20px;
  font-family: var(--ef-font-mono);
  font-size: 10px;
  color: var(--ef-text-tertiary);
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}

/* ============================================
   Query Page
   ============================================ */

.query-page {
  background-image:
    linear-gradient(90deg, rgba(10, 10, 10, 0.95), rgba(10, 10, 10, 0.82)),
    linear-gradient(180deg, rgba(255, 51, 68, 0.08), transparent 36%),
    image-set(url('../images/industrial-desktop.webp') type('image/webp'), url('../images/industrial-desktop.png') type('image/png')),
    radial-gradient(circle at 1px 1px, #1a1a1a 1px, transparent 0);
  background-size: cover, cover, cover, 40px 40px;
  background-position: center, center, center top, 0 0;
  background-attachment: fixed, fixed, fixed, scroll;
}

/* --- Page Header --- */
.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ef-border);
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 120px;
  height: 1px;
  background: var(--ef-accent);
}

.page-title {
  font-family: var(--ef-font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--ef-text-main);
  text-transform: uppercase;
}

.page-title::before {
  content: '// SYS_QUERY ';
  font-family: var(--ef-font-mono);
  font-size: 10px;
  color: var(--ef-text-tertiary);
  font-weight: 400;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 4px;
}

.page-subtitle {
  font-family: var(--ef-font-mono);
  font-size: 11px;
  color: var(--ef-text-secondary);
  letter-spacing: 0.06em;
}

/* --- Legend --- */
.legend {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  font-family: var(--ef-font-mono);
  font-size: 11px;
  color: var(--ef-text-secondary);
  letter-spacing: 0.06em;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  display: inline-block;
  flex-shrink: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%);
}

.legend-dot.free {
  background: #00cc66;
}

.legend-dot.occ {
  background: #ff3344;
}

/* --- Control Bar --- */
.controls {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.controls select,
.controls input[type="text"] {
  font-family: var(--ef-font-mono);
  font-size: 12px;
  color: var(--ef-text-main);
  background: var(--ef-surface);
  border: 1px solid var(--ef-border);
  padding: 10px 12px;
  outline: none;
  transition: var(--ef-transition);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.controls select {
  flex: 1;
  min-width: 100px;
  padding-right: 32px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px;
}

.controls input[type="text"] {
  flex: 1;
  min-width: 120px;
}

.controls select:hover,
.controls input[type="text"]:hover {
  border-color: var(--ef-border-hover);
  background-color: var(--ef-surface-raised);
}

.controls select:focus,
.controls input[type="text"]:focus {
  border-color: var(--ef-accent);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.15);
}

#results {
  position: relative;
  min-height: 120px;
}

#results::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 2px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.9), rgba(0, 136, 255, 0.7), transparent);
  box-shadow: 0 0 22px rgba(255, 204, 0, 0.34);
}

#results.results-updating::before {
  animation: resultsScan 0.46s cubic-bezier(0.2, 1, 0.3, 1) both;
}

/* --- Industrial Day Block (Chamfered Panel) --- */
.day-block {
  background: var(--ef-surface);
  border: 1px solid var(--ef-border);
  padding: 18px 20px;
  margin-bottom: 16px;
  transition: var(--ef-transition);
  position: relative;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%
  );
  animation: dayMaterialize 0.42s cubic-bezier(0.2, 1, 0.3, 1) both;
  animation-delay: calc(var(--block-index, 0) * 35ms);
}

.day-block::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--ef-border-hover);
  border-left: 1px solid var(--ef-border-hover);
  pointer-events: none;
  opacity: 0.5;
  transition: var(--ef-transition);
}

.day-block::after {
  content: '';
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  border-bottom: 1px solid var(--ef-border-hover);
  border-right: 1px solid var(--ef-border-hover);
  pointer-events: none;
  opacity: 0.5;
  transition: var(--ef-transition);
}

.day-block:hover {
  border-color: var(--ef-border-hover);
  background: #161616;
}

.day-block:hover::before,
.day-block:hover::after {
  border-color: var(--ef-accent);
  opacity: 1;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.day-header:hover .day-title {
  color: var(--ef-accent);
}

.day-header:active {
  opacity: 0.7;
}

.day-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.expand-icon {
  font-family: var(--ef-font-mono);
  font-size: 10px;
  color: var(--ef-text-tertiary);
  flex-shrink: 0;
  transition: transform 0.2s;
  line-height: 1;
  width: 12px;
  text-align: center;
}

.day-body {
  padding-top: 14px;
  animation: dataReveal 0.22s cubic-bezier(0.2, 1, 0.3, 1) both;
}

.day-title {
  font-family: var(--ef-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ef-text-main);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: var(--ef-transition);
}

.day-date {
  font-family: var(--ef-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ef-text-tertiary);
  margin-left: 6px;
  letter-spacing: 0.05em;
}

.free-info {
  font-family: var(--ef-font-mono);
  font-size: 11px;
  color: var(--ef-text-secondary);
  letter-spacing: 0.05em;
}

.free-num {
  color: var(--ef-accent);
  font-weight: 600;
  font-size: 13px;
}

.free-sep {
  color: var(--ef-text-tertiary);
  margin: 0 3px;
}

.free-total {
  color: var(--ef-text-secondary);
}

/* --- Industrial Table --- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  border: 1px solid var(--ef-border);
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  font-family: var(--ef-font-mono);
  font-size: 11px;
  width: 100%;
  white-space: nowrap;
}

th, td {
  padding: 7px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(42, 42, 42, 0.6);
}

th {
  background: rgba(255, 255, 255, 0.02);
  font-weight: 500;
  color: var(--ef-text-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

th.room-name {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #0f0f0f;
  min-width: 88px;
  text-align: left;
  padding-left: 12px;
  border-right: 1px solid var(--ef-border);
  color: var(--ef-text-main);
}

th.seat-th {
  min-width: 40px;
  font-size: 10px;
  color: var(--ef-text-tertiary);
  font-weight: 400;
  border-right: 1px solid var(--ef-border);
}

th.period {
  min-width: 40px;
  font-weight: 500;
  padding: 6px 4px;
  line-height: 1.3;
  color: var(--ef-text-tertiary);
}

.period-time {
  display: block;
  font-weight: 400;
  font-size: 8px;
  color: var(--ef-text-tertiary);
  margin-top: 2px;
  opacity: 0.6;
}

/* --- Table Cells --- */
td.room-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ef-surface);
  text-align: left;
  padding-left: 12px;
  font-weight: 500;
  font-size: 11px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--ef-border);
  white-space: nowrap;
  color: var(--ef-text-main);
}

.room-text {
  display: inline;
}

.room-seats-mobile {
  display: none;
}

td.seat-td {
  font-size: 10px;
  color: var(--ef-text-tertiary);
  border-right: 1px solid var(--ef-border);
}

/* Free / Occupied cells */
td.free {
  background: rgba(0, 204, 102, 0.1);
}

td.occ {
  background: rgba(255, 51, 68, 0.1);
}

tr:hover td.free {
  background: rgba(0, 204, 102, 0.18);
}

tr:hover td.occ {
  background: rgba(255, 51, 68, 0.18);
}

/* Industrial diamond indicators */
.free-mark,
.occ-mark {
  display: inline-block;
  width: 10px;
  height: 10px;
}

.free-mark {
  border: 1.5px solid rgba(0, 204, 102, 0.5);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-sizing: border-box;
}

.occ-mark {
  background: rgba(255, 51, 68, 0.5);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

tr:last-child td {
  border-bottom: none;
}

/* --- Empty State --- */
.empty-msg {
  text-align: center;
  padding: 60px 20px;
  color: var(--ef-text-tertiary);
  font-family: var(--ef-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  border: 1px dashed var(--ef-border);
  background: var(--ef-surface);
}

/* --- Favorites Star --- */
.fav-star {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  color: var(--ef-text-tertiary);
  flex-shrink: 0;
  transition: color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  margin-right: 4px;
}

.fav-star:hover {
  transform: scale(1.2);
  color: var(--ef-accent);
}

.fav-star.filled {
  color: var(--ef-accent);
}

/* --- Favorited Row --- */
tr.fav-row td {
  background: rgba(255, 204, 0, 0.03);
  border-bottom-color: rgba(255, 204, 0, 0.1);
}

tr.fav-row td.room-name {
  background: rgba(255, 204, 0, 0.04);
}

tr.fav-row:hover td {
  background: rgba(255, 204, 0, 0.06);
}

tr.fav-row:hover td.room-name {
  background: rgba(255, 204, 0, 0.08);
}

/* --- Favorites Toggle Button --- */
.fav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ef-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ef-text-secondary);
  background: var(--ef-surface);
  border: 1px solid var(--ef-border);
  padding: 10px 16px;
  cursor: pointer;
  transition: var(--ef-transition);
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.fav-toggle:hover {
  border-color: var(--ef-border-hover);
  background: var(--ef-surface-raised);
}

.fav-toggle:active {
  transform: scale(0.97);
}

.fav-toggle.active {
  color: var(--ef-accent);
  border-color: var(--ef-accent);
  background: rgba(255, 204, 0, 0.06);
}

.fav-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ============================================
   Custom Period Range Bar
   ============================================ */
.custom-range-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 10px 16px;
  background: var(--ef-surface);
  border: 1px solid var(--ef-border);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%
  );
}

.custom-range-label {
  font-family: var(--ef-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ef-text-secondary);
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.period-range {
  font-family: var(--ef-font-mono);
  font-size: 12px;
  color: var(--ef-text-main);
  background: var(--ef-bg);
  border: 1px solid var(--ef-border);
  padding: 6px 8px;
  padding-right: 24px;
  outline: none;
  min-height: 36px;
  width: 56px;
  text-align: center;
  cursor: pointer;
  transition: var(--ef-transition);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3 3.5-3' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 8px;
}

.period-range:hover {
  border-color: var(--ef-border-hover);
}

.period-range:focus {
  border-color: var(--ef-accent);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.15);
}

.period-range-sep {
  font-size: 12px;
  color: var(--ef-text-tertiary);
  user-select: none;
  flex-shrink: 0;
  font-family: var(--ef-font-mono);
}

.period-range-unit {
  font-family: var(--ef-font-mono);
  font-size: 10px;
  color: var(--ef-text-tertiary);
  user-select: none;
  flex-shrink: 0;
}

/* ============================================
   Responsive (Mobile & Tablet)
   ============================================ */

/* Tablet landscape & small desktop - remove clip-path for sticky column compatibility */
@media (max-width: 1024px) {
  .main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .nav-inner {
    padding: 0 20px;
  }

  .day-block {
    clip-path: none;
  }

  .custom-range-bar {
    clip-path: none;
  }

  .btn-cta {
    clip-path: none;
  }

  .btn-ghost {
    clip-path: none;
  }

  .fav-toggle {
    clip-path: none;
  }

  td.room-name {
    max-width: 90px;
  }
}

@media (max-width: 900px) {
  .main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav-inner {
    padding: 0 16px;
  }
}

/* Tablet portrait & large phone landscape */
@media (max-width: 768px) {
  .query-page {
    background-image:
      linear-gradient(90deg, rgba(10, 10, 10, 0.94), rgba(10, 10, 10, 0.82)),
      linear-gradient(180deg, rgba(255, 51, 68, 0.1), transparent 40%),
      image-set(url('../images/industrial-mobile.webp') type('image/webp'), url('../images/industrial-mobile.png') type('image/png')),
      radial-gradient(circle at 1px 1px, #1a1a1a 1px, transparent 0);
    background-size: cover, cover, cover, 40px 40px;
    background-position: center, center, center top, 0 0;
  }

  .nav-links a,
  .nav-back {
    padding: 10px 8px;
    font-size: 10px;
  }

  .nav-back svg {
    width: 18px;
    height: 18px;
  }

  .nav::before {
    display: none;
  }

  .landing-title {
    font-size: 36px;
  }

  .landing-title::before {
    font-size: 9px;
    top: -18px;
  }

  .landing-subtitle {
    font-size: 11px;
  }

  .btn-cta {
    min-height: 48px;
    min-width: 220px;
    font-size: 12px;
  }

  .page-title {
    font-size: 22px;
  }

  .page-title::before {
    font-size: 9px;
  }

  .controls {
    flex-direction: column;
  }

  .controls select,
  .controls input[type="text"] {
    width: 100%;
    font-size: 14px;
  }

  .fav-toggle {
    width: 100%;
    justify-content: center;
  }

  .day-block {
    padding: 14px;
  }

  .day-block::before,
  .day-block::after {
    display: none;
  }

  .day-block:hover {
    border-color: var(--ef-border);
  }

  td.room-name {
    min-width: 72px;
    max-width: 80px;
    padding-left: 8px;
    font-size: 10px;
  }

  th.room-name {
    min-width: 72px;
    padding-left: 8px;
    font-size: 9px;
  }

  th.period {
    min-width: 34px;
    font-size: 9px;
    padding: 5px 3px;
  }

  .period-time {
    font-size: 7px;
  }

  td.seat-td {
    display: none;
  }

  th.seat-th {
    display: none;
  }

  .room-seats-mobile {
    display: inline;
    font-family: var(--ef-font-mono);
    font-size: 9px;
    color: var(--ef-text-tertiary);
    font-weight: 400;
    margin-left: 4px;
  }

  .custom-range-bar {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 12px;
    gap: 6px;
  }

  .custom-range-label {
    font-size: 10px;
  }

  .period-range {
    width: 48px;
    font-size: 12px;
    padding: 6px 4px;
    padding-right: 20px;
    min-height: 34px;
    background-position: right 5px center;
  }
}

/* Phone landscape */
@media (max-width: 640px) and (orientation: landscape) {
  .landing-main {
    margin-top: 0;
    padding-top: 40px;
  }

  .landing-title {
    font-size: 28px;
  }

  .landing-title::before {
    font-size: 8px;
    top: -16px;
  }

  .landing-subtitle {
    font-size: 10px;
    margin-bottom: 24px;
  }

  .btn-cta {
    min-width: 180px;
    font-size: 11px;
    padding: 10px 24px;
  }

  .landing-footer {
    padding: 12px;
  }

  /* Keep controls horizontal on landscape phones */
  .controls {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .controls select,
  .controls input[type="text"] {
    width: auto;
    flex: 1;
    min-width: 80px;
    font-size: 12px;
  }

  .fav-toggle {
    width: auto;
    flex: 0 0 auto;
  }

  .page-title {
    font-size: 20px;
  }

  .day-header {
    flex-direction: row;
    align-items: center;
  }
}

/* Phone portrait */
@media (max-width: 480px) {
  .landing-title {
    font-size: 28px;
  }

  .landing-title::before {
    font-size: 8px;
    top: -16px;
  }

  .landing-subtitle {
    font-size: 10px;
    margin-bottom: 32px;
  }

  .landing-main {
    margin-top: -20px;
    padding: 0 16px;
  }

  .btn-cta {
    font-size: 11px;
    padding: 12px 24px;
    min-width: 180px;
    min-height: 48px;
  }

  .page-title {
    font-size: 18px;
  }

  .day-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .day-block {
    padding: 12px;
  }

  th, td {
    padding: 4px 3px;
    font-size: 9px;
  }

  td.room-name {
    font-size: 9px;
    min-width: 60px;
    max-width: 68px;
    padding-left: 6px;
  }

  th.room-name {
    min-width: 60px;
    padding-left: 6px;
    font-size: 9px;
  }

  th.period {
    min-width: 26px;
    font-size: 8px;
    padding: 4px 2px;
  }

  .period-time {
    font-size: 6px;
  }

  .page-subtitle {
    font-size: 10px;
  }

  .legend {
    font-size: 10px;
    gap: 16px;
  }

  #searchInput {
    -webkit-appearance: none;
    appearance: none;
  }

  .custom-range-bar {
    padding: 8px 10px;
    gap: 4px;
  }

  .period-range {
    width: 42px;
    font-size: 11px;
    padding: 5px 3px;
    padding-right: 18px;
    min-height: 32px;
    background-size: 7px;
  }

  .period-range-sep {
    font-size: 11px;
  }
}

/* Ultra small devices */
@media (max-width: 374px) {
  .landing-title {
    font-size: 24px;
  }

  .btn-cta {
    font-size: 10px;
    padding: 10px 18px;
    min-width: 160px;
  }

  .nav-title {
    font-size: 10px;
  }

  .nav-links a,
  .nav-back {
    font-size: 9px;
    padding: 8px 6px;
  }

  th.period {
    min-width: 20px;
    padding: 3px 1px;
  }

  td.room-name {
    min-width: 48px;
    max-width: 56px;
  }

  th.room-name {
    min-width: 48px;
  }
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ef-border) var(--ef-bg);
}

/* ============================================
   Animations
   ============================================ */

@keyframes scanTravel {
  0% {
    opacity: 0;
    transform: translate3d(var(--scan-start), 0, 0) skewX(-8deg);
  }
  12% {
    opacity: 1;
  }
  76% {
    opacity: 0.88;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--scan-end), 0, 0) skewX(-8deg);
  }
}

@keyframes pageEnterForward {
  from {
    opacity: 0.78;
    transform: translateX(46px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pageEnterBack {
  from {
    opacity: 0.78;
    transform: translateX(-46px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes backgroundDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 320px 0, 80px 0, 0 80px;
  }
}

@keyframes resultsScan {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(0.16);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(120px) scaleX(1);
  }
}

@keyframes dayMaterialize {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: brightness(1.32) saturate(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: brightness(1) saturate(1);
  }
}

@keyframes dataReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in up (for landing page) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.5s cubic-bezier(0.2, 1, 0.3, 1) both;
}

.animate-in-delay-1 {
  animation-delay: 0.1s;
}

.animate-in-delay-2 {
  animation-delay: 0.2s;
}

.animate-in-delay-3 {
  animation-delay: 0.3s;
}

/* Glitch effect */
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

.glitch {
  animation: glitch 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}

/* Stepped progress bar animation for loading states */
@keyframes stepProgress {
  0% { width: 0; }
  25% { width: 25%; }
  50% { width: 50%; }
  75% { width: 75%; }
  100% { width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-in {
    animation: none;
    opacity: 1;
  }

  .grid-lines,
  .day-block,
  .day-body,
  #results.results-updating::before {
    animation: none;
  }

  .page-transition-layer {
    display: none;
  }

  body.is-entering .nav,
  body.is-entering main,
  body.is-entering .landing-footer {
    animation: none;
  }

  body.is-leaving .nav,
  body.is-leaving main,
  body.is-leaving .landing-footer {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .landing-subtitle.typing {
    animation: none;
    border-right: none;
  }

  .btn-cta,
  .day-block,
  .controls select,
  .controls input {
    transition: none;
  }
}

/* ============================================
   Selection style
   ============================================ */
::selection {
  background: rgba(255, 204, 0, 0.3);
  color: #ffffff;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ef-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--ef-border);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ef-border-hover);
}

/* ============================================
   Modern Industrial-Inspired Skin
   ============================================ */
:root {
  --ef-bg: #f4f5ef;
  --ef-surface: #ffffff;
  --ef-surface-raised: #f7f8f2;
  --ef-accent: #dfff35;
  --ef-accent-blue: #111111;
  --ef-accent-red: #e33d3d;
  --ef-border: #d4d8cf;
  --ef-border-hover: #171717;
  --ef-text-main: #111111;
  --ef-text-secondary: #5f625f;
  --ef-text-tertiary: #a4aaa2;
  --nav-height: 68px;
}

body {
  background-color: var(--ef-bg);
  color: var(--ef-text-main);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 86px 86px;
}

.nav {
  top: 0;
  right: auto;
  bottom: 0;
  width: 68px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid #d7d9d2;
  border-bottom: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  align-items: stretch;
  justify-content: flex-start;
}

.nav::before {
  display: none;
}

.nav-inner {
  width: 100%;
  height: 100%;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.nav-title {
  min-height: 68px;
  padding: 10px 6px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #111111;
  border-bottom: 1px solid #d7d9d2;
  font-size: 9px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-align: center;
  word-break: break-all;
}

.nav-title::first-line {
  font-size: 13px;
}

.nav-links {
  width: 100%;
  flex-direction: column;
  gap: 0;
  margin-top: 52px;
}

.nav-links a,
.nav-back {
  width: 100%;
  min-height: 54px;
  justify-content: center;
  padding: 7px 4px;
  border: none;
  border-left: 6px solid transparent;
  color: #b5b9b2;
  background: transparent;
  font-size: 0;
}

.nav-links a::before {
  content: '';
  width: 24px;
  height: 24px;
  display: block;
  background:
    linear-gradient(#b5b9b2 0 0) center 5px / 20px 3px no-repeat,
    linear-gradient(#b5b9b2 0 0) center / 20px 3px no-repeat,
    linear-gradient(#b5b9b2 0 0) center 16px / 20px 3px no-repeat;
}

.nav-back {
  order: 2;
  margin-top: 52px;
}

.nav-back svg {
  width: 24px;
  height: 24px;
  color: #b5b9b2;
}

.nav-links a:hover,
.nav-back:hover {
  color: #111111;
  background: #f0f2ea;
  border-left-color: #111111;
}

.nav-links a:hover::before {
  background:
    linear-gradient(#111 0 0) center 5px / 20px 3px no-repeat,
    linear-gradient(#111 0 0) center / 20px 3px no-repeat,
    linear-gradient(#111 0 0) center 16px / 20px 3px no-repeat;
}

.nav-links a::after,
.nav-back::after {
  display: none;
}

.main {
  max-width: none;
  margin-left: 68px;
  padding: 84px clamp(28px, 5vw, 78px) 88px;
}

.landing-page {
  background: #f7f8f3;
}

.landing-page::before {
  z-index: 0;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(247, 248, 243, 0) 0%, rgba(247, 248, 243, 0.18) 50%, #f7f8f3 78%, #f7f8f3 100%),
    linear-gradient(90deg, rgba(247, 248, 243, 0.88) 0%, rgba(247, 248, 243, 0.5) 31%, rgba(247, 248, 243, 0.08) 62%, rgba(247, 248, 243, 0.18) 100%),
    linear-gradient(90deg, rgba(223, 255, 53, 0.34) 0 10%, transparent 10% 100%),
    image-set(url('../images/industrial-desktop.webp') type('image/webp'), url('../images/industrial-desktop.png') type('image/png')) right center / cover no-repeat;
}

.landing-page::after {
  content: '';
  position: fixed;
  inset: 0 0 0 68px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 58%, rgba(223, 255, 53, 0.36), transparent 15%),
    linear-gradient(90deg, transparent 0 7%, rgba(0, 0, 0, 0.08) 7.1% 7.2%, transparent 7.3%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: auto, auto, 98px 98px, 98px 98px;
  mix-blend-mode: multiply;
}

.landing-page .grid-lines {
  z-index: 0;
  left: 68px;
  background-image:
    linear-gradient(110deg, transparent 0 42%, rgba(223, 255, 53, 0.46) 42% 42.8%, transparent 43%),
    radial-gradient(circle, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
  background-size: 420px 420px, 18px 18px;
  opacity: 0.48;
}

.landing-page .nav {
  background: rgba(255, 255, 255, 0.96);
  border-right-color: #d7d9d2;
}

.landing-page .nav-title,
.landing-page .nav-links a {
  color: #111111;
}

.landing-main {
  min-height: 100vh;
  padding: 88px clamp(28px, 10vw, 150px) 150px;
  margin: 0 0 0 68px;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
}

.landing-label {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  padding-left: 28px;
  font-family: var(--ef-font-mono);
  font-size: 12px;
  color: #111111;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: var(--ef-accent);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 76% 100%, 0 100%);
}

.landing-title {
  color: #0a0a0a;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.88;
  letter-spacing: -0.06em;
  font-weight: 950;
  text-shadow:
    0 1px 0 #ffffff,
    12px 12px 0 rgba(223, 255, 53, 0.52);
}

.landing-title::before {
  display: none;
}

.landing-subtitle {
  max-width: 620px;
  color: #272927;
  margin-top: 18px;
  margin-bottom: 34px;
  padding: 10px 0 10px 18px;
  border-left: 5px solid #111111;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0));
  font-size: 13px;
}

.landing-actions {
  position: relative;
  z-index: 3;
}

.btn-cta {
  min-width: 280px;
  min-height: 54px;
  padding-left: 68px;
  background: #111111;
  color: #ffffff;
  border: 1px solid #111111;
  clip-path: none;
  box-shadow:
    inset 8px 0 0 var(--ef-accent),
    0 18px 0 rgba(0, 0, 0, 0.08);
}

.btn-cta::before {
  top: 10px;
  left: 19px;
  width: 22px;
  height: calc(100% - 20px);
  border: none;
  background:
    linear-gradient(135deg, transparent 0 43%, #111111 44% 52%, transparent 53%),
    linear-gradient(var(--ef-accent), var(--ef-accent));
  box-shadow:
    -8px 0 0 var(--ef-accent),
    8px 0 0 rgba(223, 255, 53, 0.12);
}

.btn-cta::after {
  content: 'DOWNLOAD';
  right: -92px;
  bottom: auto;
  top: 50%;
  width: auto;
  height: auto;
  transform: translateY(-50%);
  border: none;
  color: #111111;
  font-family: var(--ef-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.btn-cta:hover {
  background: var(--ef-accent);
  color: #111111;
  letter-spacing: 0.16em;
  box-shadow:
    inset 8px 0 0 #111111,
    0 22px 0 rgba(0, 0, 0, 0.08);
}

.btn-cta:hover::before {
  background:
    linear-gradient(135deg, transparent 0 43%, var(--ef-accent) 44% 52%, transparent 53%),
    linear-gradient(#111111, #111111);
  box-shadow:
    -10px 0 0 #111111,
    8px 0 0 rgba(17, 17, 17, 0.12);
}

.landing-download-panel {
  position: fixed;
  right: 28px;
  bottom: 36px;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  padding: 12px;
  background: rgba(111, 111, 108, 0.88);
  color: #ffffff;
  font-family: var(--ef-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.landing-download-panel span {
  min-width: 132px;
  padding: 10px 14px;
  background: #0f0f0f;
  border-radius: 3px;
  text-align: center;
}

.landing-download-panel .panel-flag {
  background: var(--ef-accent);
  color: #111111;
  font-weight: 900;
}

.landing-footer {
  left: 68px;
  color: rgba(0, 0, 0, 0.52);
}

.query-page {
  background:
    linear-gradient(90deg, rgba(244, 245, 239, 0.96), rgba(244, 245, 239, 0.86)),
    linear-gradient(90deg, rgba(223, 255, 53, 0.26) 0 18%, transparent 18%),
    image-set(url('../images/industrial-desktop.webp') type('image/webp'), url('../images/industrial-desktop.png') type('image/png')) right top / 62vw auto no-repeat,
    #f4f5ef;
  color: #111111;
}

.query-page::before {
  content: '';
  position: fixed;
  inset: 0 0 0 68px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.14) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 12px 12px;
}

.query-band {
  margin: -34px 0 26px;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(18px, 4vw, 48px);
  background:
    linear-gradient(90deg, var(--ef-accent), #f2ff8e 72%, rgba(244, 245, 239, 0.35));
  border-bottom: 5px solid #111111;
  font-family: var(--ef-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.query-band strong {
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-header {
  max-width: 780px;
  margin-bottom: 22px;
  padding: 18px 24px 20px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #cfd4ca;
  border-left: 10px solid #111111;
}

.page-header::after {
  width: 180px;
  height: 5px;
  background: var(--ef-accent);
  bottom: -5px;
}

.page-title {
  color: #111111;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 0.96;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.page-title::before {
  content: '↘ INFORMATION';
  color: #111111;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.page-subtitle {
  color: #4e524c;
}

.legend {
  color: #111111;
}

.legend-dot.free {
  background: #77d96a;
}

.legend-dot.occ {
  background: #e34d57;
}

.controls {
  padding: 14px;
  background: rgba(17, 17, 17, 0.94);
  border-left: 12px solid var(--ef-accent);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.08);
}

.controls select,
.controls input[type="text"],
.fav-toggle,
.period-range {
  background-color: #ffffff;
  color: #111111;
  border-color: #ffffff;
  border-radius: 2px;
  text-transform: none;
}

.controls select:hover,
.controls input[type="text"]:hover,
.fav-toggle:hover {
  background-color: var(--ef-accent);
  border-color: var(--ef-accent);
}

.controls select:focus,
.controls input[type="text"]:focus,
.period-range:focus {
  border-color: var(--ef-accent);
  box-shadow: 0 0 0 2px rgba(223, 255, 53, 0.55);
}

.fav-toggle.active {
  background: var(--ef-accent);
  color: #111111;
  border-color: var(--ef-accent);
}

.custom-range-bar {
  background: #ffffff;
  border: 1px solid #cfd4ca;
  clip-path: none;
}

.custom-range-label,
.period-range-sep,
.period-range-unit {
  color: #111111;
}

#results::before {
  background: linear-gradient(90deg, transparent, #111111, var(--ef-accent), transparent);
}

.day-block {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #cfd4ca;
  border-left: 10px solid #111111;
  clip-path: none;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.055);
}

.day-block::before {
  top: -1px;
  left: -10px;
  width: 10px;
  height: 44px;
  border: none;
  background: var(--ef-accent);
  opacity: 1;
}

.day-block::after {
  display: none;
}

.day-block:hover {
  background: #ffffff;
  border-color: #111111;
}

.day-title,
.free-num {
  color: #111111;
}

.day-date,
.free-info,
.free-total,
.free-sep {
  color: #6b7069;
}

.table-wrap {
  border-color: #cfd4ca;
  background: #ffffff;
}

table {
  color: #111111;
}

th {
  background: #111111;
  color: #ffffff;
  border-bottom-color: #111111;
}

th.room-name,
td.room-name {
  background: #f2f4ed;
  color: #111111;
  border-right-color: #cfd4ca;
}

th.seat-th,
td.seat-td {
  color: #777c74;
  border-right-color: #cfd4ca;
}

th.period {
  color: #ffffff;
}

.period-time {
  color: rgba(255, 255, 255, 0.56);
}

td {
  border-bottom-color: #e5e8df;
}

td.free {
  background: rgba(119, 217, 106, 0.22);
}

td.occ {
  background: rgba(227, 77, 87, 0.22);
}

tr:hover td.free {
  background: rgba(119, 217, 106, 0.36);
}

tr:hover td.occ {
  background: rgba(227, 77, 87, 0.36);
}

.free-mark {
  border-color: rgba(17, 17, 17, 0.38);
}

.occ-mark {
  background: #e34d57;
}

.fav-star,
.fav-toggle {
  color: #111111;
}

.fav-star.filled,
.fav-star:hover {
  color: #111111;
  filter: drop-shadow(0 0 5px rgba(223, 255, 53, 0.85));
}

tr.fav-row td,
tr.fav-row td.room-name {
  background: rgba(223, 255, 53, 0.18);
}

.empty-msg {
  color: #111111;
  background: #ffffff;
  border-color: #cfd4ca;
}

.page-transition-layer {
  background:
    linear-gradient(90deg, rgba(223, 255, 53, 0.04), rgba(223, 255, 53, 0.11) 42%, rgba(17, 17, 17, 0.03)),
    linear-gradient(90deg, transparent 0 44px, rgba(17, 17, 17, 0.16) 44px 45px, transparent 45px 92px),
    linear-gradient(90deg, transparent 0 112px, rgba(223, 255, 53, 0.32) 112px 113px, transparent 113px 160px);
}

.page-transition-layer::after {
  background: #111111;
  box-shadow:
    0 0 0 1px rgba(223, 255, 53, 0.75),
    9px 0 0 rgba(223, 255, 53, 0.34),
    18px 0 0 rgba(17, 17, 17, 0.1);
}

@media (max-width: 768px) {
  .nav {
    right: 0;
    bottom: auto;
    width: 100%;
    height: 58px;
    background: rgba(255, 255, 255, 0.98);
    border-right: none;
    border-bottom: 1px solid #d7d9d2;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
  }

  .nav-title {
    min-height: 0;
    height: 58px;
    max-width: 118px;
    padding: 4px 0;
    border-bottom: none;
    font-size: 9px;
    justify-items: start;
  }

  .nav-links {
    width: auto;
    flex-direction: row;
    margin-top: 0;
  }

  .nav-links a,
  .nav-back {
    min-height: 44px;
    width: 46px;
    border-left: none;
  }

  .nav-back {
    order: 0;
    margin-top: 0;
  }

  .landing-page::before {
    background:
      linear-gradient(180deg, rgba(247, 248, 243, 0) 0%, #f7f8f3 72%, #f7f8f3 100%),
      linear-gradient(90deg, rgba(247, 248, 243, 0.34), rgba(247, 248, 243, 0.04)),
      image-set(url('../images/industrial-mobile.webp') type('image/webp'), url('../images/industrial-mobile.png') type('image/png')) center top / cover no-repeat;
  }

  .landing-page::after,
  .landing-page .grid-lines {
    left: 0;
  }

  .landing-page .grid-lines {
    animation: none;
    opacity: 0.34;
  }

  .landing-main {
    min-height: 100svh;
    margin-left: 0;
    padding: clamp(300px, 44svh, 390px) 18px 36px;
    justify-content: flex-start;
  }

  .landing-title {
    font-size: clamp(46px, 16vw, 68px);
    text-shadow: 7px 7px 0 rgba(223, 255, 53, 0.55);
  }

  .landing-subtitle {
    font-size: 11px;
    margin-bottom: 22px;
  }

  .btn-cta {
    min-width: 230px;
    width: 100%;
    max-width: 360px;
    padding-left: 58px;
  }

  .btn-cta::after {
    display: none;
  }

  .landing-download-panel {
    position: relative;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 360px;
    margin-top: 14px;
    align-self: flex-start;
    grid-template-columns: 1fr 1fr;
    font-size: 9px;
    padding: 8px;
    background: rgba(111, 111, 108, 0.74);
  }

  .landing-download-panel span {
    min-width: 0;
    padding: 8px 6px;
  }

  .landing-footer {
    left: 0;
    padding-bottom: 8px;
  }

  .main {
    margin-left: 0;
    padding: 78px 16px 70px;
  }

  .query-page {
    background:
      linear-gradient(180deg, rgba(244, 245, 239, 0.94), rgba(244, 245, 239, 0.88)),
      image-set(url('../images/industrial-mobile.webp') type('image/webp'), url('../images/industrial-mobile.png') type('image/png')) center top / 100% auto no-repeat,
      #f4f5ef;
  }

  .query-page::before {
    inset: 58px 0 0;
  }

  .query-band {
    margin-top: -18px;
    min-height: 58px;
    padding: 0 14px;
    gap: 8px;
    overflow: hidden;
  }

  .query-band strong {
    font-size: 20px;
  }

  .query-band span {
    font-size: 9px;
  }

  .page-header {
    padding: 15px 14px 18px;
    border-left-width: 7px;
  }

  .controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border-left-width: 8px;
  }

  .controls select,
  .controls input[type="text"],
  .fav-toggle {
    min-width: 0;
    width: 100%;
    min-height: 44px;
  }

  #periodSel {
    order: 3;
  }

  #favToggle {
    order: 4;
  }

  #searchInput {
    grid-column: 1 / -1;
    order: 5;
  }

  .page-transition-layer {
    display: none;
  }

  body.is-entering .nav,
  body.is-entering main,
  body.is-entering .landing-footer,
  body.is-leaving .nav,
  body.is-leaving main,
  body.is-leaving .landing-footer {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .day-block {
    border-left-width: 7px;
    animation: none;
  }

  .day-body,
  #results.results-updating::before {
    animation: none;
  }

  .table-wrap {
    contain: content;
  }
}

@media (max-width: 480px) {
  .landing-main {
    padding-top: clamp(280px, 42svh, 350px);
  }

  .landing-label {
    font-size: 10px;
  }

  .landing-title {
    line-height: 0.94;
  }

  .page-title {
    font-size: 28px;
  }
}

@media (max-width: 374px) {
  .controls {
    grid-template-columns: 1fr;
  }

  #periodSel,
  #favToggle,
  #searchInput {
    grid-column: 1;
  }
}

/* ============================================
   Premium Industrial Refinement
   Lightweight detail layer: no external assets, no JS.
   ============================================ */
:root {
  --ef-ink-soft: rgba(17, 17, 17, 0.68);
  --ef-line-soft: rgba(17, 17, 17, 0.12);
  --ef-line-strong: rgba(17, 17, 17, 0.86);
  --ef-paper-tint: rgba(255, 255, 255, 0.74);
  --ef-lime-soft: rgba(223, 255, 53, 0.46);
  --ef-shadow-sharp: 0 1px 0 rgba(255, 255, 255, 0.86), 0 10px 0 rgba(17, 17, 17, 0.045);
}

.landing-label,
.page-title::before,
.query-band,
.nav-title,
.nav-links a,
.nav-back,
.controls select,
.controls input[type="text"],
.fav-toggle,
.day-title,
.free-info,
table {
  font-variant-numeric: tabular-nums;
}

.nav {
  box-shadow: inset -1px 0 0 rgba(17, 17, 17, 0.04);
}

.nav-title,
.nav-links a,
.nav-back {
  outline-offset: -3px;
}

.nav-links a:focus-visible,
.nav-back:focus-visible,
.btn-cta:focus-visible,
.controls select:focus-visible,
.controls input[type="text"]:focus-visible,
.fav-toggle:focus-visible,
.period-range:focus-visible,
.day-header:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(223, 255, 53, 0.62);
}

.landing-page::after,
.query-page::before {
  opacity: 0.78;
}

.landing-label {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.landing-title,
.page-title {
  text-wrap: balance;
}

.landing-subtitle,
.page-header,
.day-block,
.controls,
.custom-range-bar,
.empty-msg {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 0 0, rgba(223, 255, 53, 0.2), transparent 30%);
}

.page-header,
.day-block,
.controls,
.custom-range-bar {
  box-shadow: var(--ef-shadow-sharp);
}

.page-header::before,
.controls::before,
.day-block::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.page-header::before,
.controls::before {
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

.controls,
.day-block,
.table-wrap {
  position: relative;
}

.controls::after {
  content: 'FILTER MATRIX';
  position: absolute;
  right: 13px;
  bottom: -17px;
  color: rgba(17, 17, 17, 0.38);
  font-family: var(--ef-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.controls select,
.controls input[type="text"],
.fav-toggle,
.period-range {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(17, 17, 17, 0.08);
}

.controls select:focus,
.controls input[type="text"]:focus,
.period-range:focus {
  background-color: #ffffff;
}

.btn-cta {
  isolation: isolate;
  overflow: hidden;
}

.landing-download-panel {
  border: 1px solid rgba(255, 255, 255, 0.52);
}

.query-band {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.day-block {
  content-visibility: auto;
  contain-intrinsic-size: 92px;
}

.day-block.expanded {
  contain-intrinsic-size: 760px;
}

.day-block::after {
  display: block;
  inset: 0;
  z-index: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.84);
  background:
    linear-gradient(90deg, rgba(223, 255, 53, 0.34), transparent 36%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.045), transparent 18%);
  opacity: 0.5;
}

.day-header,
.day-body {
  position: relative;
  z-index: 1;
}

.day-header {
  border-radius: 2px;
}

.day-title {
  letter-spacing: 0.12em;
}

.free-info {
  padding: 4px 0;
}

.table-wrap {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.66);
}

th {
  background:
    linear-gradient(180deg, #171717 0%, #0d0d0d 100%);
}

td {
  background-clip: padding-box;
}

td.free {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
    rgba(119, 217, 106, 0.22);
}

td.occ {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent),
    rgba(227, 77, 87, 0.22);
}

.free-mark,
.occ-mark {
  transform: translateZ(0);
}

.fav-star {
  border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a,
  .nav-back,
  .btn-cta,
  .controls select,
  .controls input[type="text"],
  .fav-toggle,
  .day-header,
  .fav-star {
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      transform 160ms ease,
      box-shadow 160ms ease;
  }

  .day-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 0 rgba(17, 17, 17, 0.07);
  }

  .day-header:hover {
    background: rgba(223, 255, 53, 0.12);
  }

  .controls select:hover,
  .controls input[type="text"]:hover,
  .fav-toggle:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(17, 17, 17, 0.1),
      0 0 0 1px rgba(17, 17, 17, 0.22);
  }
}

@media (max-width: 768px) {
  .page-header,
  .day-block,
  .controls,
  .custom-range-bar {
    box-shadow: 0 6px 0 rgba(17, 17, 17, 0.045);
  }

  .controls::after {
    display: none;
  }

  .day-block:hover {
    transform: none;
  }
}