:root {
  color-scheme: dark;
  --ink: #f5f3ed;
  --muted: #b9b7b0;
  --line: #454139;
  --line-gold: #756342;
  --surface: #15161af5;
  --surface-solid: #15161a;
  --surface-raised: #1d1e23;
  --canvas: #0b0c10;
  --field: #0d0e12;
  --primary: #efd17e;
  --primary-dark: #ffe3a0;
  --primary-ink: #211b0c;
  --teal: #96d8c5;
  --amber: #efd17e;
  --danger: #d86a78;
  --danger-dark: #b94b5a;
  --shadow: 0 20px 54px #0006, inset 0 1px 0 #ffffff08;
  --seat-online: #ead08a;
  --seat-onsite: #96d8c5;
  --seat-occupied: #eca3b0;
  --seat-maintenance: #a4a9b3;
  --seat-special: #c6b1eb;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  min-height: 100%;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}
body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background-color: var(--canvas);
  background-image:
    linear-gradient(133deg, transparent 13%, #b6934533 13.1%, #b6934508 14%, transparent 19%),
    linear-gradient(133deg, transparent 79%, #b6934526 79.1%, transparent 79.4%),
    radial-gradient(ellipse at 2% 14%, #65502b38, transparent 46%),
    radial-gradient(ellipse at 100% 90%, #79613626, transparent 40%);
  background-attachment: fixed;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
a:focus-visible, button:focus-visible, .seat-selectable:focus { outline: 2px solid var(--primary-dark); outline-offset: 4px; }

.site-header {
  min-height: 72px;
  padding: 12px clamp(18px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #0b0c10e8;
  border-bottom: 1px solid #ffffff0f;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  color: var(--primary); background: #26231b; border: 1px solid #75603a; box-shadow: none;
}
.brand-mark img { width: 31px; height: 31px; display: block; }
.brand strong, .brand small { display: block; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.top-nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.top-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.user-chip { padding: 7px 11px; border: 1px solid #625337; border-radius: 999px; color: #e8d7ab; background: #28241b; }

.page { flex: 1; width: min(1120px, calc(100% - 30px)); margin: 0 auto; padding: 36px 0 60px; }
.page-wide { width: min(1440px, calc(100% - 30px)); }
.site-footer { color: var(--muted); text-align: center; padding: 22px; border-top: 1px solid #ffffff0f; font-size: 12px; }

h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); line-height: 1.35; letter-spacing: .01em; }
h2 { margin: 0 0 16px; font-size: 22px; }
h3 { margin: 0 0 10px; }
p { line-height: 1.7; }
.lead { color: #dccb9f; font-size: 17px; line-height: 1.7; margin: 0; }
.page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 24px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.card {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-gold);
  border-radius: 22px 10px 22px 10px;
  padding: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.card + .card { margin-top: 18px; }
.card-subtle { box-shadow: none; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid > .card { margin-top: 0; }
.stat { display: grid; gap: 8px; padding: 24px; }
.stat strong { color: var(--primary); font-size: 32px; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); }

.button, button {
  appearance: none; display: inline-flex; justify-content: center; align-items: center; gap: 7px;
  min-height: 44px; border: 1px solid #f7dda0; border-radius: 11px; padding: 10px 16px;
  background: var(--primary); color: var(--primary-ink); font: inherit; font-weight: 700; cursor: pointer;
}
.button:hover, button:hover { background: var(--primary-dark); color: var(--primary-ink); text-decoration: none; }
.button:active, button:active { background: #dec06d; }
.button:disabled, button:disabled { opacity: .52; cursor: not-allowed; }
.button-small { min-height: 38px; padding: 7px 12px; font-size: 14px; }
.button-secondary { color: var(--primary); background: #28241b; border-color: #625337; }
.button-secondary:hover { color: var(--primary-dark); background: #342e22; }
.button-danger { color: #fff1f3; background: #7e303b; border-color: #b75a67; }
.button-danger:hover { color: white; background: #963b48; }
.top-nav .button { color: var(--primary); background: #28241b; border-color: #625337; }

label { display: grid; gap: 8px; color: #eee9dc; font-weight: 600; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #68645a; border-radius: 10px;
  background: var(--field); color: var(--ink); font: inherit; color-scheme: dark;
}
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--primary); }
input::placeholder, textarea::placeholder { color: #94918a; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; }
select option { color: var(--ink); background: var(--surface-solid); }
input[type="file"] { padding: 5px; }
input[type="file"]::file-selector-button {
  min-height: 32px; margin-right: 10px; padding: 6px 11px; border: 1px solid #625337; border-radius: 7px;
  color: var(--primary); background: #28241b; font: inherit; font-weight: 700; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { color: var(--primary-dark); background: #342e22; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--field) inset;
  caret-color: var(--ink);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.help { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.65; }

.alert { padding: 13px 16px; border-radius: 12px; margin-bottom: 18px; border: 1px solid transparent; line-height: 1.65; }
.alert-success { background: #17342c; color: #b9f3db; border-color: #3f806c; }
.alert-error { background: #341d22; color: #ffd2d8; border-color: #9a5965; }
.alert-info { background: #25231b; color: #efdfb6; border-color: #76633f; }

.sub-nav {
  display: flex; gap: 7px; overflow-x: auto; padding: 7px; margin-bottom: 22px;
  background: #121318e8; border: 1px solid var(--line); border-radius: 14px; scrollbar-color: #84714c #15161a;
}
.sub-nav a { flex: 0 0 auto; padding: 9px 12px; border-radius: 9px; color: var(--muted); }
.sub-nav a.active { color: var(--primary-ink); background: var(--primary); }
.sub-nav a:hover { text-decoration: none; }

.table-wrap { overflow-x: auto; border: 1px solid #35342f; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; background: #10111599; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #35342f; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #efd17e0a; }
th { color: #d8cba9; background: #211f19; font-size: 13px; letter-spacing: .02em; }
.badge { display: inline-flex; align-items: center; border: 1px solid #55524a; border-radius: 999px; padding: 5px 9px; background: #292a2f; color: #dad7ce; font-size: 12px; font-weight: 700; }
.badge-success { background: #17342c; color: #aee9d2; border-color: #386f5e; }
.badge-danger { background: #3a2025; color: #ffc6cf; border-color: #844a55; }
.badge-warning { background: #392f1d; color: #f6d995; border-color: #80683a; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }

.seat-map-shell { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: #0b0c10; padding: 14px; scrollbar-color: #84714c #15161a; }
.seat-map { width: 100%; min-width: 720px; height: auto; display: block; }
.map-background { fill: #101115; stroke: #454139; stroke-width: 2; }
.map-object { pointer-events: none; }
.map-object rect { vector-effect: non-scaling-stroke; }
.map-object-door .door-frame,
.map-object-door .door-leaf {
  fill: none;
  stroke: var(--object-color, #d8b66b);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map-object-door .door-swing {
  fill: none;
  stroke: var(--object-color, #d8b66b);
  stroke-width: 2;
  opacity: .8;
  vector-effect: non-scaling-stroke;
}
.map-object-door .door-hinge { fill: var(--object-color, #d8b66b); }
.map-object-entrance rect { fill: #18352f; stroke: var(--object-color, #96d8c5); stroke-width: 3; }
.map-object-entrance path { fill: none; stroke: var(--object-color, #96d8c5); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.map-object-label { fill: #f1dfae; font-size: 14px; font-weight: 700; pointer-events: none; }
.map-object-table { min-width: 1160px; }
.map-object-type-select { min-width: 128px; }
.map-object-name-input { min-width: 145px; }
.map-object-number-input { width: 76px; min-width: 76px; }
.map-object-color-input { width: 48px; min-width: 48px; padding: 3px; }
.map-object-actions { display: flex; gap: 6px; flex-wrap: wrap; min-width: 142px; }
.layout-editor { margin-bottom: 24px; }
.layout-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.layout-toolbar > label:first-child { min-width: 155px; }
.layout-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.layout-status { min-height: 26px; color: var(--primary); font-size: 14px; }
.layout-status.text-danger { color: #ff9eaa; }
.layout-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; }
.layout-canvas { min-width: 0; }
.layout-editor .seat-map-shell { max-height: 72vh; }
.layout-inspector { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #0d0e12; }
.layout-inspector > label, .layout-inspector > .form-row { margin-bottom: 12px; }
.layout-inspector .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-inspector label { font-size: 13px; }
.layout-nudge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.layout-nudge button:first-child { grid-column: 2; }
.layout-nudge button:nth-child(2) { grid-column: 1; }
.layout-editor .map-object { pointer-events: auto; }
.layout-editor .map-object .layout-hitbox { fill: transparent; stroke: transparent; stroke-width: 2; pointer-events: all; }
.layout-editor [data-layout-key] { user-select: none; }
.layout-editor .layout-editable { cursor: grab; }
.layout-editor .layout-editable:active { cursor: grabbing; }
.layout-editor .layout-selected > rect,
.layout-editor .layout-selected > .layout-hitbox { stroke: #ffe3a0; stroke-width: 3; stroke-dasharray: 5 3; fill: #efd17e26; }
.layout-editor [data-layout-key]:focus-visible { outline: none; }
.layout-editor [data-layout-key]:focus-visible > rect { stroke: #fff4c9; stroke-width: 4; }
@media (max-width: 820px) {
  .layout-workspace { display: flex; flex-direction: column-reverse; }
  .layout-inspector, .layout-canvas { width: 100%; }
  .layout-inspector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .layout-inspector > p, .layout-inspector > label:first-child { grid-column: 1 / -1; margin: 0; }
  .layout-inspector > .form-row { grid-column: 1 / -1; }
  .layout-nudge { grid-column: 1 / -1; justify-self: center; width: 180px; margin-top: 0; }
  .layout-editor .seat-map-shell { max-height: 60vh; }
}
.seat rect { stroke-width: 2; }
.seat text { pointer-events: none; font-family: inherit; }
.seat-label { fill: #f5f3ed; font-size: 14px; font-weight: 800; }
.seat-identity { fill: #f5f3ed; font-size: 10px; font-weight: 700; }
.seat-online rect { fill: #393220; stroke: var(--zone-color, var(--seat-online)); }
.seat-onsite rect { fill: #1e3731; stroke: var(--zone-color, var(--seat-onsite)); }
.seat-occupied rect { fill: #45272f; stroke: var(--seat-occupied); }
.seat-special rect { fill: #342b46; stroke: var(--zone-color, var(--seat-special)); }
.seat-disabled rect, .seat-maintenance rect { fill: #282b31; stroke: var(--seat-maintenance); stroke-dasharray: 7 5; }
.seat-selectable { cursor: pointer; }
.seat-selectable:hover rect, .seat-selectable:focus rect, .seat-selected rect { fill: #594c27; stroke: var(--primary-dark); stroke-width: 4; }
.legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 18px 0; color: #d5d1c6; font-size: 13px; line-height: 1.7; }
.legend span::before { content: ""; display: inline-block; width: 13px; height: 13px; border-radius: 4px; background: var(--legend); vertical-align: -2px; margin-right: 6px; }
.legend-online { --legend: var(--seat-online); }
.legend-onsite { --legend: var(--seat-onsite); }
.legend-occupied { --legend: var(--seat-occupied); }
.legend-maintenance { --legend: var(--seat-maintenance); }
.legend-special { --legend: var(--seat-special); }
.legend-maintenance::before { background: transparent !important; border: 1px dashed var(--seat-maintenance); }

.login-page {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background-color: #080a0f;
  background-image:
    radial-gradient(circle at 14% 12%, #9b7a3730 0, transparent 34%),
    radial-gradient(circle at 88% 82%, #29394a30 0, transparent 38%),
    linear-gradient(145deg, #080a0f 0%, #0c1018 48%, #090b10 100%);
}
.login-page .site-header {
  position: relative;
  z-index: 5;
  min-height: 64px;
  padding: 10px 18px;
  background: #090b10b8;
  border-bottom-color: #d8b96b12;
  box-shadow: none;
}
.login-page .brand-mark { display: grid; width: 38px; height: 38px; border-radius: 12px; }
.login-page .brand small { display: none; }
.login-page .top-nav { gap: 12px; }
.login-page .top-nav .button { display: none; }
.login-page .page {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 28px 18px 42px;
}
.login-shell {
  position: relative;
  width: min(100%, 440px);
  min-height: 0;
  display: grid;
  place-items: center;
}
.login-ambient {
  position: fixed;
  z-index: 0;
  inset: 64px 0 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  animation: login-ambient-enter 1.1s ease-out .08s forwards;
}
.login-ambient::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: clamp(540px, 66vw, 1080px);
  height: 2px;
  top: 47%;
  left: 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 3%, #d3ad6152 28%, #fff0bd9c 52%, #bd8e4157 76%, transparent 97%);
  box-shadow: 0 0 14px #e5bd6c38, 0 0 34px #bd8d4030;
  filter: blur(1.4px);
  transform-origin: center;
  will-change: transform, opacity;
  animation: login-highlight-flow 11.6s cubic-bezier(.45, .05, .38, .96) -3.1s infinite;
}
.login-stream {
  position: absolute;
  display: block;
  border-radius: 999px;
  transform-origin: center;
  will-change: transform, opacity;
}
.login-stream-one {
  z-index: 1;
  width: clamp(680px, 94vw, 1540px);
  height: 168px;
  top: 25%;
  left: 50%;
  background: linear-gradient(90deg, transparent 0%, #8f6e3330 20%, #c49a514d 43%, #e5c57a58 57%, #8c6a302e 80%, transparent 100%);
  filter: blur(28px);
  animation: login-stream-one 8.2s cubic-bezier(.45, .05, .38, .96) infinite;
}
.login-stream-two {
  z-index: 2;
  width: clamp(560px, 76vw, 1240px);
  height: 54px;
  top: 55%;
  left: 50%;
  background: linear-gradient(90deg, transparent 0%, #b58a4040 24%, #e9c87970 44%, #fff0bd8f 54%, #a8783550 76%, transparent 100%);
  filter: blur(12px);
  animation: login-stream-two 12.8s cubic-bezier(.42, .08, .35, .95) -4.3s infinite;
}
.login-glow {
  position: absolute;
  z-index: 0;
  width: clamp(260px, 34vw, 520px);
  height: clamp(260px, 34vw, 520px);
  top: 31%;
  left: 50%;
  border-radius: 50%;
  background: #c29d4a20;
  filter: blur(70px);
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: login-glow-drift 15.4s cubic-bezier(.45, .05, .38, .96) -2.2s infinite;
}

@keyframes login-ambient-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes login-stream-one {
  0%, 100% { transform: translate3d(calc(-50% - 10vw), -28px, 0) rotate(-27deg) scale(.96, .9); opacity: .27; }
  28% { transform: translate3d(calc(-50% - 2vw), -8px, 0) rotate(-24deg) scale(1.03, .97); opacity: .39; }
  59% { transform: translate3d(calc(-50% + 9vw), 26px, 0) rotate(-20deg) scale(1.09, 1.03); opacity: .5; }
  82% { transform: translate3d(calc(-50% + 1vw), 9px, 0) rotate(-22deg) scale(1.01, .96); opacity: .35; }
}

@keyframes login-stream-two {
  0%, 100% { transform: translate3d(calc(-50% + 11vw), 18px, 0) rotate(-30deg) scaleX(.92); opacity: .25; }
  33% { transform: translate3d(calc(-50% + 3vw), -10px, 0) rotate(-27deg) scaleX(1.04); opacity: .42; }
  68% { transform: translate3d(calc(-50% - 9vw), 22px, 0) rotate(-24deg) scaleX(1.1); opacity: .56; }
  86% { transform: translate3d(calc(-50% - 2vw), 4px, 0) rotate(-26deg) scaleX(.98); opacity: .35; }
}

@keyframes login-highlight-flow {
  0%, 100% { transform: translate3d(calc(-50% - 7vw), -14px, 0) rotate(-23deg) scaleX(.92); opacity: .07; }
  43% { transform: translate3d(calc(-50% + 8vw), 12px, 0) rotate(-19deg) scaleX(1.08); opacity: .3; }
  74% { transform: translate3d(calc(-50% + 2vw), -2px, 0) rotate(-21deg) scaleX(1.01); opacity: .17; }
}

@keyframes login-glow-drift {
  0%, 100% { transform: translate3d(calc(-50% - 42px), -24px, 0) scale(.92); opacity: .32; }
  38% { transform: translate3d(calc(-50% + 28px), 12px, 0) scale(1.08); opacity: .52; }
  72% { transform: translate3d(calc(-50% - 10px), 34px, 0) scale(1.16); opacity: .43; }
}
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 30px 22px 22px;
  overflow: hidden;
  background: rgba(12, 16, 24, .64);
  border: 1px solid #a98c526e;
  border-radius: 24px;
  box-shadow:
    0 28px 70px #0009,
    0 1px 0 #f4d99524 inset,
    0 0 0 1px #ffffff05 inset;
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
}
.login-card::before {
  content: "";
  position: absolute;
  inset: 0 16% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f5d88db8, transparent);
}
.login-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -100px;
  top: -110px;
  border-radius: 50%;
  background: #cfaa5724;
  filter: blur(28px);
  pointer-events: none;
}
.login-card-header { margin-bottom: 28px; }
.login-product { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #e8cf8b; font-size: 13px; font-weight: 800; letter-spacing: .09em; }
.login-emblem {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid #91763f;
  border-radius: 11px;
  background: linear-gradient(145deg, #302b20, #1c1a16);
  box-shadow: 0 8px 20px #0006, inset 0 1px 0 #fff2;
}
.login-emblem img { width: 27px; height: 27px; display: block; filter: drop-shadow(0 0 8px #efd17e26); }
.login-page h1 { margin-bottom: 7px; font-size: clamp(27px, 8vw, 36px); letter-spacing: .025em; }
.login-page .lead { margin: 0; color: #c8c3b5; font-size: 16px; letter-spacing: .04em; }
.login-form { display: grid; grid-template-columns: 1fr; gap: 9px; }
.login-form label { margin-top: 9px; color: #dad6cb; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.login-input-wrap { position: relative; }
.login-card input {
  min-height: 54px;
  padding: 14px 15px;
  border-color: #5b5b58;
  border-radius: 13px;
  color: #fbfaf6;
  background: linear-gradient(180deg, #151820d9, #0e1118e6);
  box-shadow: inset 0 1px 0 #ffffff0a, 0 8px 20px #0002;
  font-size: 16px;
}
.login-card input:hover { border-color: #777064; }
.login-card input:focus {
  border-color: #d1b468;
  outline: 2px solid #d1b46836;
  outline-offset: 2px;
  box-shadow: inset 0 1px 0 #ffffff10, 0 0 0 4px #c6a75912, 0 10px 26px #0004;
}
.login-password-wrap input { padding-right: 72px; }
.password-toggle {
  position: absolute;
  right: 7px;
  top: 7px;
  min-height: 40px;
  padding: 6px 10px;
  border-color: transparent;
  border-radius: 9px;
  color: #d9c58e;
  background: transparent;
  font-size: 13px;
}
.password-toggle:hover { color: #ffe2a0; background: #efd17e12; }
.login-card .form-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 20px 0 0; }
.login-submit {
  position: relative;
  min-height: 54px;
  border-color: #f2d58c;
  border-radius: 13px;
  background: linear-gradient(180deg, #f4d889 0%, #d7b762 100%);
  box-shadow: inset 0 1px 0 #fff9, 0 11px 25px #b88d3130, 0 2px 0 #806524;
  font-size: 16px;
  letter-spacing: .04em;
}
.login-submit:hover { background: linear-gradient(180deg, #ffe5a0 0%, #e2c36e 100%); box-shadow: inset 0 1px 0 #fff, 0 13px 28px #b88d3140; }
.login-board-link { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #d8c58f; font-size: 14px; }
.login-board-link:hover { color: #ffe2a0; text-decoration: none; }
.login-note { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid #ffffff12; color: #9f9e99; font-size: 12px; line-height: 1.8; text-align: center; }
.login-page .site-footer { position: relative; z-index: 2; padding: 18px; border-top-color: #ffffff0a; color: #777974; background: #080a0f73; }

@media (min-width: 700px) {
  .login-page .site-header { min-height: 72px; padding: 12px clamp(28px, 4vw, 56px); }
  .login-page .brand small { display: block; }
  .login-page .page { padding: 54px 24px 70px; }
  .login-shell { width: min(100%, 480px); }
  .login-card { padding: 42px 40px 30px; border-radius: 28px; }
  .login-card-header { margin-bottom: 32px; }
  .login-product { margin-bottom: 25px; }
  .login-ambient { inset-block-start: 72px; }
}

.board-page .page { padding-top: 40px; min-width: 0; }
.board-page .lead { font-size: 15px; margin-top: 10px; color: var(--muted); }
.board-page .page > .page-heading { margin-bottom: 28px; }
.board-page .stat strong { font-size: 34px; }
.board-map-card { margin-top: 24px; }
.board-map-card h2 { margin-bottom: 8px; }
.board-date { align-items: flex-end; gap: 10px; }
.board-date label { font-size: 13px; font-weight: 500; }
.board-date input, .board-date button { min-height: 48px; }
.board-login-action { display: none; }
.map-scroll-hint { display: none; color: var(--muted); font-size: 13px; line-height: 1.6; }

.empty { color: var(--muted); text-align: center; padding: 34px 18px; }
.muted { color: var(--muted); }
.text-danger { color: #ff9eaa; }
.nowrap { white-space: nowrap; }
.import-format-help { margin-top: 18px; line-height: 1.8; }
.import-progress-wrap { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.import-progress-wrap progress { width: min(620px, 100%); height: 18px; accent-color: var(--primary); }
.import-summary { margin: 16px 0; }
.import-summary .stat { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #101115; }
#import-message:not(:empty) { margin-top: 18px; }
#import-preview { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.zone-editor-table { min-width: 1160px; }
.zone-name-input { min-width: 170px; }
.zone-type-select { min-width: 150px; }
.zone-color-input { width: 72px; min-width: 72px; padding: 5px; cursor: pointer; }
.zone-sort-input { width: 88px; min-width: 88px; }
.zone-position-input { width: 92px; min-width: 92px; }
.zone-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 190px; }
.zone-history-note { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 400; }

.reservation-confirm-dialog {
  width: min(560px, calc(100% - 28px));
  max-height: min(760px, calc(100vh - 28px));
  overflow: auto;
  padding: 0;
  color: var(--ink);
  background: var(--surface-solid);
  border: 1px solid var(--line-gold);
  border-radius: 22px 10px 22px 10px;
  box-shadow: 0 30px 90px #000c, inset 0 1px 0 #ffffff0a;
}
.reservation-confirm-dialog::backdrop { background: #050609cc; backdrop-filter: blur(5px); }
.dialog-heading { padding: 24px 24px 18px; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: 5px 0 6px; }
.dialog-heading p { margin: 0; }
.dialog-eyebrow { color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.reservation-confirm-list { margin: 0; padding: 10px 24px; }
.reservation-confirm-list > div { display: grid; grid-template-columns: 145px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #35342f; }
.reservation-confirm-list > div:last-child { border-bottom: 0; }
.reservation-confirm-list dt { color: var(--muted); }
.reservation-confirm-list dd { margin: 0; text-align: right; font-weight: 700; }
.reservation-confirm-list dd strong { color: var(--primary); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 24px; border-top: 1px solid var(--line); }

@media (min-width: 821px) {
  .board-page .page > .board-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; }
  .board-heading .board-date-desktop { grid-column: 2; justify-self: center; }
  .board-login-action { display: inline-flex; grid-column: 3; justify-self: end; min-height: 56px; padding-inline: 28px; border-radius: 12px; }
  .board-page .top-nav > .button { display: none; }
  .board-date-desktop { gap: 14px; }
  .board-date-desktop label { gap: 10px; font-size: 15px; }
  .board-date-desktop input {
    width: 230px;
    min-height: 56px;
    padding: 13px 16px;
    font-size: 16px;
    border-radius: 12px;
  }
}

@media (max-width: 820px) {
  .site-header { align-items: flex-start; }
  .top-nav { gap: 9px; }
  .top-nav .user-chip { display: none; }
  .grid-2, .grid-3, .form-row, .form-row-4 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .map-scroll-hint { display: block; }
}

@media (max-width: 560px) {
  .site-header { position: static; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 12px 18px; gap: 12px; }
  .brand-mark { display: none; }
  .top-nav { justify-content: flex-start; font-size: 13px; }
  .page { width: calc(100% - 32px); padding: 28px 0 40px; }
  .card { padding: 17px; border-radius: 18px 8px 18px 8px; }
  .grid { gap: 12px; }
  .stat { padding: 18px; }
  .stat strong { font-size: 28px; }
  .board-date { width: 100%; }
  .board-date label { flex: 1; min-width: 0; }
  .board-map-card { padding: 16px; }
  .seat-map-shell { padding: 8px; border-radius: 12px; }
  .legend { gap: 10px 16px; font-size: 12px; }
}

@media (max-width: 390px) {
  .grid-4 { grid-template-columns: 1fr; }
  .reservation-confirm-list > div { grid-template-columns: 1fr; gap: 4px; }
  .reservation-confirm-list dd { text-align: left; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions button { width: 100%; }
  .login-card { padding: 27px 18px 21px; border-radius: 22px; }
  .brand small { font-size: 11px; }
}

@media (prefers-reduced-transparency: reduce) {
  .card, .site-header { background: var(--surface-solid); backdrop-filter: none; }
}

/* Booking controls remain scoped; login and public board layouts are unchanged. */
.seat-adjustments > summary { cursor: pointer; padding-block: .25rem; }
.seat-adjustments > summary::marker { color: var(--primary); }
.seat-adjustments > summary h2 { display: inline; margin: 0; }
.seat-adjustments > summary .muted { display: inline-block; margin-left: .75rem; font-size: 13px; }
.seat-adjustments > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; border-radius: 4px; }
.seat-adjustments[open] > summary { margin-bottom: 1rem; }

.booking-period-form { display: grid; gap: 1rem; align-items: end; }
.booking-period-form label { min-width: 0; }
.booking-period-form input, .booking-period-form select { width: 100%; min-width: 0; }
.booking-preview { margin: 1rem; padding: 1rem; border: 1px solid rgba(216,182,107,.22); border-radius: 14px; background: rgba(216,182,107,.04); }
.booking-preview h3 { margin: 0 0 .75rem; }
.booking-preview ul { padding-left: 1.25rem; margin: .75rem 0; line-height: 1.7; }
.booking-preview [data-booking-dates] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .25rem 1rem; }
.booking-preview summary { cursor: pointer; color: var(--muted); }
.reservation-confirm-dialog { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.reservation-move-form { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; min-width: 220px; }
.reservation-move-form label { flex: 1; min-width: 170px; }
@media (min-width: 720px) {
  .booking-period-form { grid-template-columns: minmax(180px,1fr) minmax(200px,1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  .login-ambient,
  .login-ambient::after,
  .login-stream,
  .login-glow { animation: none; }
  .login-ambient { opacity: 1; }
  .login-ambient::after { transform: translate3d(-50%, 0, 0) rotate(-21deg); opacity: .14; }
  .login-stream-one { transform: translate3d(-54%, -8px, 0) rotate(-23deg); opacity: .36; }
  .login-stream-two { transform: translate3d(-48%, 4px, 0) rotate(-26deg); opacity: .34; }
  .login-glow { transform: translate3d(-50%, 0, 0); opacity: .4; }
}

/* ZWHS school theme: explicit opt-in for login, public board and admin pages. */
html.school-root { color-scheme: light; color: #193e32; background: #f3f5ef; }
.school-theme {
  --ink: #193e32;
  --muted: #53675f;
  --line: #c7d4ca;
  --line-gold: #cbd7ce;
  --surface: rgba(252,253,248,.92);
  --surface-solid: #f9fbf6;
  --surface-raised: #edf3ec;
  --canvas: #f3f5ef;
  --field: #f9fbf7;
  --primary: #285543;
  --primary-dark: #163c2e;
  --primary-ink: #fffef8;
  --shadow: 0 16px 45px #24493710, inset 0 1px 0 #ffffffb3;
  --seat-online: #62816b;
  --seat-onsite: #5a8c80;
  --seat-occupied: #b97954;
  --seat-maintenance: #8b9990;
  --seat-special: #968957;
  position: relative;
  isolation: isolate;
  background: var(--canvas);
  color-scheme: light;
}
.school-theme .site-header { background: #f8faf3ed; border-bottom: 1px solid #cdd8ca; box-shadow: 0 3px 18px #22463306; }
.school-theme .brand { color: var(--ink); }
.school-theme .brand strong { letter-spacing: .12em; }
.school-theme .brand small { color: var(--muted); }
.school-theme .user-chip { color: #285543; background: #eaf0e7; border-color: #ccd8c9; }
.school-theme .site-footer { color: #284c3f; border-top-color: #c7d4ca70; background: #f5f8f0c9; }
.school-theme .card { border-radius: 20px; }
.school-theme label { color: #294b3f; }
.school-theme input, .school-theme select { color-scheme: light; background: var(--field); color: var(--ink); border-color: #a7b9ab; }
.school-theme input::placeholder { color: #697c71; }
.school-theme .button, .school-theme button { border-color: #305c49; }
.school-theme .button:active, .school-theme button:active { background: #123b2b; color: #fff; }
.school-theme .top-nav .button { background: var(--primary); color: #fffef8; border-color: var(--primary); }
.school-theme .lead { color: #456053; }
.school-theme .alert-info { background: #eef3e6; color: #3f5637; border-color: #b5c7a8; }
.school-theme .alert-error { background: #fff1ec; color: #8f3228; border-color: #d6aaa0; }
.school-theme .alert-success { background: #eaf4e8; color: #26502e; border-color: #a3c5a5; }
.school-eyebrow { font-size: 11px; letter-spacing: .22em; color: #627965; margin: 0 0 10px; font-weight: 600; }

/* Clean transparent lockup extracted from the supplied brand board. */
.school-logo-window { width: 100%; }
.school-logo-window img { width: 100%; height: auto; display: block; }
.school-wordmark { display: block; width: 84px; flex: 0 0 auto; }
.school-wordmark img { width: 100%; height: auto; display: block; }

.school-theme.login-page {
  background-image: url('zwhs-login-mist.webp');
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
.school-theme.login-page .site-header { display: none; }
.school-theme.login-page .page { display: grid; align-items: center; width: 100%; padding: 32px 20px 24px; }
.school-theme.login-page .login-shell { width: min(100%,480px); display: grid; gap: 16px; }
.school-login-identity { width: min(100%,360px); justify-self: center; text-align: center; }
.school-login-identity > p { margin: 4px 0 0; font-family: 'Noto Serif TC','PMingLiU','Songti TC',serif; color: #254e3d; letter-spacing: .3em; font-size: 14px; }
.school-theme.login-page .login-card {
  padding: 30px 26px 22px;
  border: 1px solid #fffffff0;
  border-radius: 24px;
  background-color: rgba(242,246,238,.62);
  background-image: linear-gradient(180deg, #ffffff1f 0%, #ffffff00 28%);
  box-shadow: 0 24px 65px #183e3426, inset 0 1px 0 #ffffffed, inset 0 -1px 0 #ffffff33;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.school-theme .login-card::before, .school-theme .login-card::after { display: none; }
.school-theme .login-card-header { text-align: center; margin-bottom: 20px; }
.school-theme .login-product { justify-content: center; color: #436050; font-size: 10px; letter-spacing: .24em; margin-bottom: 15px; font-weight: 600; }
.school-theme.login-page h1 { font-family: 'Noto Serif TC','PMingLiU','Songti TC',serif; color: #173d2e; font-size: clamp(25px,6vw,34px); letter-spacing: .09em; line-height: 1.5; margin-bottom: 9px; }
.school-theme.login-page .lead { color: #3e5c4d; font-size: 14px; letter-spacing: .08em; }
.school-theme .login-form { gap: 7px; }
.school-theme .login-form label { font-size: 13px; color: #365646; }
.school-theme .login-card input { background: rgba(255,255,253,.85); border: 1px solid #bccabf; color: #163d2e; min-height: 54px; border-radius: 12px; box-shadow: inset 0 1px 0 #fff,0 4px 14px #45645205; }
.school-theme .login-card input:focus { border-color: #497a5c; outline: 2px solid #497a5c44; box-shadow: 0 0 0 4px #497a5c0d; }
.school-theme .password-toggle { color: #375d49; background: transparent; border-color: transparent; }
.school-theme .password-toggle:hover { color: #163d2e; background: #dce8da; }
.school-theme .login-submit { min-height: 56px; background: #2f5745; color: #fffef5; border-color: #254c3b; box-shadow: inset 0 1px 0 #ffffff38,0 8px 24px #254c3b24; letter-spacing: .15em; border-radius: 12px; }
.school-theme .login-submit:hover { background: #214b38; box-shadow: 0 10px 26px #254c3b30; }
.school-theme .login-board-link { color: #31533f; }
.school-theme .login-board-link:hover { color: #163e2a; text-decoration: underline; }
.school-theme .login-note { color: #536758; border-top-color: #7890794d; margin-top: 12px; padding-top: 16px; }
.school-card-motto { text-align: center; color: #596d60; font-size: 8px; letter-spacing: .2em; margin: 16px 0 0; line-height: 1.8; }
.school-theme.login-page .site-footer { color: #294c3d; background: #f5f7efc2; border: 0; font-size: 11px; letter-spacing: .07em; padding: 13px; }

/* Real mountain photography below the board; bamboo frames only the edges. */
.school-theme.board-page::before {
  content: ''; position: fixed; inset: auto 0 0; height: 74vh; z-index: -2; pointer-events: none;
  background: url('zwhs-mountain-scene.jpg') center bottom / cover no-repeat;
  mask-image: linear-gradient(to bottom,transparent 0%,#000 55%);
  -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 55%);
  opacity: .7;
}
.school-theme.board-page::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('zwhs-mountain-scene.jpg') center center / cover no-repeat;
  mask-image: linear-gradient(to right,#000 0%,transparent 17%,transparent 83%,#000 100%);
  -webkit-mask-image: linear-gradient(to right,#000 0%,transparent 17%,transparent 83%,#000 100%);
  opacity: .46;
}
.school-theme.board-page .page { width: min(1320px,calc(100% - 40px)); padding-top: 32px; padding-bottom: 90px; }
.school-theme.board-page h1 { font-family: 'Noto Serif TC','PMingLiU','Songti TC',serif; font-size: clamp(26px,2.4vw,36px); letter-spacing: .05em; }
.school-theme.board-page .board-heading { padding: 18px 22px; background: #f7faf3db; border-radius: 18px; align-items: center; }
.school-theme.board-page .board-heading .lead { font-size: 13px; }
.school-theme.board-page .stat { background: rgba(250,252,245,.94); border-color: #c3d2c2; }
.school-theme.board-page .stat strong { color: #2c5d40; }
.school-theme.board-page .board-map-card { background: rgba(251,253,247,.96); }
.school-theme.board-page .seat-map-shell { background: #eff3ea; border-color: #cad6c5; scrollbar-color: #8da287 #e9f0e3; }
.school-theme.board-page .map-background { fill: #f4f7ee; stroke: #c7d3be; }
.school-theme.board-page .legend { color: #465e4d; }
.school-theme.board-page .legend span::before { border: 1px solid #899d8d; }
.school-theme.board-page .seat-label, .school-theme.board-page .seat-identity { fill: #1c3f30; }
.school-theme.board-page .seat-online rect { fill: #dce9dd; stroke: #62816b; }
.school-theme.board-page .seat-onsite rect { fill: #dcefeb; stroke: #5a8c80; }
.school-theme.board-page .seat-occupied rect { fill: #f3dfd2; stroke: #ac7251; }
.school-theme.board-page .seat-special rect { fill: #eee8cf; stroke: #968957; }
.school-theme.board-page .seat-maintenance rect { fill: #e2e6e3; stroke: #819087; }
.school-theme.board-page .seat-disabled rect { fill: #f2f2ec; stroke: #a9b0a3; }
.school-theme.board-page .seat-disabled .seat-label { fill: #63705f; }
.school-theme.board-page .map-object-label { fill: #395747; }
.school-theme.board-page .map-object-entrance rect { fill: #e3eee0; }
.school-theme.board-page .map-object { --object-color: #63826b !important; }
.school-board-vision { width: fit-content; max-width: 100%; margin: 40px auto 0; padding: 12px 24px; color: #284c3b; background: #f5f8efde; border-radius: 999px; text-align: center; font-family: 'Noto Serif TC','PMingLiU','Songti TC',serif; letter-spacing: .18em; }
@media (min-width: 960px) {
  .school-theme.login-page .page { padding: 64px 0 40px; }
  .school-theme.login-page .login-shell { width: min(1448px,calc(100% - 120px)); grid-template-columns: minmax(0,1.2fr) minmax(390px,.9fr); gap: clamp(50px,7vw,124px); align-items: center; }
  .school-login-identity { width: 92%; transform: translateY(-34px); }
  .school-login-identity > p { font-size: 17px; margin-top: 16px; letter-spacing: .45em; }
  .school-theme.login-page .login-card { width: 100%; max-width: 552px; justify-self: end; padding: 52px 48px 32px; }
  .school-theme .login-card-header { margin-bottom: 30px; }
  .school-theme .login-product { margin-bottom: 20px; }
}
@media (max-width: 820px) {
  .school-theme.board-page .page { width: calc(100% - 28px); padding-top: 20px; padding-bottom: 65px; }
  .school-theme.board-page .board-heading { align-items: stretch; padding: 18px; }
  .school-theme.board-page .board-date-desktop { align-self: flex-start; }
  .school-theme.board-page .school-wordmark { display: none; }
  .school-theme.board-page::after { opacity: .24; }
}
@media (max-width: 560px) {
  .school-theme.login-page { background-position: 38% center; }
  .school-theme.login-page .page { padding: 24px 16px 22px; }
  .school-theme.login-page .school-login-identity { width: 230px; }
  .school-login-identity > p { font-size: 11px; margin: 0; }
  .school-theme.login-page .login-shell { gap: 22px; }
  .school-theme.login-page .login-card { padding: 26px 22px 20px; background-color: rgba(242,246,238,.70); }
  .school-theme.board-page .stat strong { font-size: 30px; }
  .school-theme.board-page .board-heading h1 { font-size: 26px; }
}
@media (prefers-reduced-transparency: reduce) {
  .school-theme.login-page .login-card, .school-theme .card, .school-theme .site-header { background: #f7faf3; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Shared signed-in school workspace. Login and public board stay unchanged. */
.school-theme:is(.admin-page, .student-page) {
  --danger: #9a3c43;
  --danger-dark: #7e2e35;
  --teal: #3e7969;
  --amber: #816527;
}
:is(.admin-page, .student-page)::before, :is(.admin-page, .student-page)::after {
  content: ""; position: fixed; pointer-events: none;
  background: url('zwhs-login-mist.webp') center bottom / cover no-repeat;
}
:is(.admin-page, .student-page)::before {
  inset: auto 0 0; height: 68vh; z-index: -2; opacity: .33;
  mask-image: linear-gradient(transparent, #000 75%);
  -webkit-mask-image: linear-gradient(transparent, #000 75%);
}
:is(.admin-page, .student-page)::after {
  inset: 0; z-index: -1; opacity: .2;
  mask-image: linear-gradient(to right,#000,transparent 14%,transparent 86%,#000);
  -webkit-mask-image: linear-gradient(to right,#000,transparent 14%,transparent 86%,#000);
}
:is(.admin-page, .student-page) .page { min-width: 0; padding-top: 28px; padding-bottom: 64px; }
:is(.admin-page, .student-page) .page > .page-heading {
  padding: 22px 24px; border: 1px solid #d3dfd0; border-radius: 20px;
  background: #f9fbf4eb; box-shadow: 0 8px 26px #24493706;
}
:is(.admin-page, .student-page) h1 { font-family: 'Noto Serif TC','PMingLiU','Songti TC',serif; font-size: clamp(28px,3vw,36px); letter-spacing: .06em; }
:is(.admin-page, .student-page) .lead { font-size: 15px; }
:is(.admin-page, .student-page) h2 { font-size: 21px; }
:is(.admin-page, .student-page) .card { background: #fafcf7f5; backdrop-filter: none; -webkit-backdrop-filter: none; }
:is(.admin-page, .student-page) .grid > *, :is(.admin-page, .student-page) .form-row > * { min-width: 0; }
:is(.admin-page, .student-page) .grid + .card { margin-top: 18px; }
:is(.admin-page, .student-page) .sub-nav { background: #f8fbf3f2; border-color: #c7d4ca; scrollbar-color: #90a88d #edf3e8; }
:is(.admin-page, .student-page) .sub-nav a { min-height: 44px; display: inline-flex; align-items: center; color: #41614e; }
:is(.admin-page, .student-page) .sub-nav a:hover { background: #e8f0e3; color: #193e32; }
:is(.admin-page, .student-page) .sub-nav a.active { background: #285543; color: #fffef8; box-shadow: 0 3px 10px #28554320; }
:is(.admin-page, .student-page) .button-secondary { color: #285543; background: #eaf1e5; border-color: #a5bba1; }
:is(.admin-page, .student-page) .button-secondary:hover { color: #173f2b; background: #dce9d6; }
:is(.admin-page, .student-page) .button-danger { color: #fff; background: #963d43; border-color: #84333a; }
:is(.admin-page, .student-page) .button-danger:hover { color: #fff; background: #7c2c34; }
:is(.admin-page, .student-page) .button-secondary:active { background: #cddfc6; color: #173f2b; }
:is(.admin-page, .student-page) .button-danger:active { background: #6f252e; color: #fff; }
:is(.admin-page, .student-page) textarea { background: var(--field); color: var(--ink); color-scheme: light; border-color: #a7b9ab; }
:is(.admin-page, .student-page) textarea::placeholder { color: #697c71; }
:is(.admin-page, .student-page) input:focus, :is(.admin-page, .student-page) select:focus, :is(.admin-page, .student-page) textarea:focus { outline: 2px solid #497a5c; border-color: #497a5c; }
:is(.admin-page, .student-page) input[type="file"]::file-selector-button { background: #eaf1e5; border-color: #a5bba1; color: #285543; }
:is(.admin-page, .student-page) input[type="file"]::file-selector-button:hover { background: #dce9d6; color: #173f2b; }
:is(.admin-page, .student-page) .table-wrap { border-color: #c7d4ca; scrollbar-color: #90a88d #edf3e8; }
:is(.admin-page, .student-page) table { background: #fcfdf9; }
:is(.admin-page, .student-page) th, :is(.admin-page, .student-page) td { border-bottom-color: #d9e2d5; }
:is(.admin-page, .student-page) th { background: #e8f0e3; color: #37563f; }
:is(.admin-page, .student-page) tbody tr:hover { background: #f0f5eb; }
:is(.admin-page, .student-page) .badge { background: #edf1e9; color: #455a48; border-color: #bccbbb; }
:is(.admin-page, .student-page) .badge-success { background: #e4f1e3; color: #2c5935; border-color: #a5c6a3; }
:is(.admin-page, .student-page) .badge-danger { background: #fbe9e7; color: #913a3c; border-color: #d9b2ad; }
:is(.admin-page, .student-page) .badge-warning { background: #f6efd9; color: #70551b; border-color: #cfbf8d; }
:is(.admin-page, .student-page) .text-danger, :is(.admin-page, .student-page) .layout-status.text-danger { color: #9a343c; }
:is(.admin-page, .student-page) .import-summary .stat { background: #eef4e9; }
:is(.admin-page, .student-page) .layout-inspector { background: #eef4e9; }
:is(.admin-page, .student-page) .seat-map-shell { background: #edf3e8; border-color: #c7d4ca; scrollbar-color: #90a88d #edf3e8; }
:is(.admin-page, .student-page) .map-background { fill: #f7f9f1; stroke: #c7d4ca; }
:is(.admin-page, .student-page) #layout-grid path { stroke: #547762; stroke-opacity: .23; }
:is(.admin-page, .student-page) .seat-label, :is(.admin-page, .student-page) .seat-identity { fill: #1c3f30; }
:is(.admin-page, .student-page) .seat-online rect { fill: #dce9dd; }
:is(.admin-page, .student-page) .seat-onsite rect { fill: #dcefeb; }
:is(.admin-page, .student-page) .seat-special rect { fill: #eee8cf; }
:is(.admin-page, .student-page) .seat-occupied rect { fill: #f3dfd2; stroke: #ac7251; }
:is(.admin-page, .student-page) .seat-maintenance rect { fill: #e2e6e3; stroke: #819087; }
:is(.admin-page, .student-page) .seat-disabled rect { fill: #f2f2ec; stroke: #a9b0a3; }
:is(.admin-page, .student-page) .legend { color: #465e4d; }
:is(.admin-page, .student-page) .legend span::before { border: 1px solid #899d8d; }
:is(.admin-page, .student-page) .map-object-label { fill: #395747; }
:is(.admin-page, .student-page) .map-object-entrance rect { fill: #e3eee0; }
/* Keep administrator-selected zone/object colors; only surfaces and selection change. */
:is(.admin-page, .student-page) .layout-editor .layout-selected > rect,
:is(.admin-page, .student-page) .layout-editor .layout-selected > .layout-hitbox { stroke: #245e43; fill: #8cbf9359; stroke-width: 3; stroke-dasharray: 5 3; }
:is(.admin-page, .student-page) .layout-editor [data-layout-key]:focus-visible > rect { stroke: #17472f; stroke-width: 4; }
:is(.admin-page, .student-page) .seat-selectable:hover rect, :is(.admin-page, .student-page) .seat-selectable:focus rect,
:is(.admin-page, .student-page) .seat-selected rect { fill: #bcd8be; stroke: #245e43; stroke-width: 4; }
:is(.admin-page, .student-page) .reservation-confirm-dialog { border-radius: 20px; box-shadow: 0 24px 70px #183e3440; }
:is(.admin-page, .student-page) .reservation-confirm-dialog::backdrop { background: #183b325e; }
:is(.admin-page, .student-page) .reservation-confirm-list > div { border-bottom-color: #d9e2d5; }
:is(.admin-page, .student-page) .booking-preview { background: #edf4e8; border-color: #bdcfb7; }
@media (max-width: 820px) {
  :is(.admin-page, .student-page) .page { width: calc(100% - 28px); padding-top: 20px; }
  :is(.admin-page, .student-page) .page > .page-heading { padding: 18px; }
  :is(.admin-page, .student-page) .school-wordmark { display: none; }
  :is(.admin-page, .student-page)::after { opacity: .1; }
  :is(.admin-page, .student-page) .page-heading > .inline-form { flex-wrap: wrap; max-width: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
  :is(.admin-page, .student-page)::before, :is(.admin-page, .student-page)::after { display: none; }
  :is(.admin-page, .student-page) .card, :is(.admin-page, .student-page) .sub-nav, :is(.admin-page, .student-page) .page > .page-heading { background: #f9fbf6; }
}

/* Student actions: light seat states, readable confirmation and password form. */
.student-page .seat-online rect { stroke: #62816b; }
.student-page .seat-onsite rect { stroke: #5a8c80; }
.student-page .seat-special rect { stroke: #968957; }
.student-page .map-object { --object-color: #63826b !important; }
.student-page .legend-online { --legend: #dce9dd; }
.student-page .legend-onsite { --legend: #dcefeb; }
.student-page .legend-occupied { --legend: #f3dfd2; }
.student-page .seat-selectable:hover rect,
.student-page .seat-selectable:focus rect,
.student-page .seat-selected rect { fill: #bcd8be; stroke: #245e43; stroke-width: 4; }
.student-page .reservation-confirm-list dd { overflow-wrap: anywhere; }
.student-page .sub-nav { margin-top: 20px; align-items: center; }
.student-page .table-wrap table { min-width: 600px; }
.student-page .table-wrap th { white-space: nowrap; }
:is(.admin-page, .student-page) .password-card { width: min(560px,100%); margin: 24px auto; }
:is(.admin-page, .student-page) .password-card form { display: grid; gap: 18px; margin-top: 24px; }
:is(.admin-page, .student-page) .password-card .form-actions { margin-top: 4px; }
@media (max-width: 560px) {
  .student-page .dialog-heading { padding: 20px 18px 16px; }
  .student-page .reservation-confirm-list { padding: 8px 18px; }
  .student-page .reservation-confirm-list > div { grid-template-columns: 1fr; gap: 4px; }
  .student-page .reservation-confirm-list dd { text-align: left; }
  .student-page .booking-preview [data-booking-dates] { grid-template-columns: 1fr; }
  .student-page .dialog-actions { padding: 16px 18px 20px; }
}

/* Weekly booking policy, board announcements and daily confirmation states. */
.study-rules { margin-bottom: 18px; }
.study-rules h2 { margin-top: 0; }
.study-rule-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; list-style: none; padding: 0; margin: 16px 0 20px; }
.study-rule-facts li { padding: 12px 14px; border: 1px solid #c4d3bd; border-radius: 12px; color: #3a5845; background: #edf4e7; font-size: 13px; line-height: 1.6; }
.study-rule-facts strong { display: block; color: #254c36; font-size: 18px; }
.study-rules-list { margin: 0; padding-left: 1.7em; color: #40594a; line-height: 1.9; }
.study-rules-list li + li { margin-top: 8px; }
.study-rules-list strong { color: #284a36; }
.study-day-state { margin: 18px 0; padding: 16px 20px; border: 1px solid #bdcbb9; border-left-width: 5px; border-radius: 12px; background: #f3f7ed; color: #3c5541; }
.study-day-state > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.study-day-state p { margin: 8px 0 0; line-height: 1.7; }
.study-day-state-confirmed { border-color: #83aa80; background: #eef7e9; color: #28512e; }
.study-day-state-pending { border-color: #c8b474; background: #fff9e8; color: #6a521c; }
.study-day-state-cancelled, .study-day-state-closed { border-color: #cca29a; background: #fff1eb; color: #853c33; }
.study-state-badge { display: inline-block; width: fit-content; padding: 4px 10px; border: 1px solid #bacbb6; border-radius: 999px; background: #eef4e8; color: #3e5942; font-size: 13px; line-height: 1.5; font-weight: 600; white-space: nowrap; }
.study-day-state-confirmed .study-state-badge, .study-state-badge-confirmed { background: #e4f1e0; border-color: #98b995; color: #2b5531; }
.study-day-state-pending .study-state-badge, .study-state-badge-pending { background: #fbf1d5; border-color: #c8b474; color: #6a521c; }
.study-day-state-cancelled .study-state-badge, .study-day-state-closed .study-state-badge, .study-state-badge-cancelled, .study-state-badge-closed { background: #fbe8e2; border-color: #cca29a; color: #853c33; }
.booking-cutoff-note { margin-bottom: 8px; color: #31513b; line-height: 1.8; }
.weekly-inline-note { margin-bottom: 0; padding: 12px 14px; border-radius: 10px; background: #f8f0dc; color: #6a521c; line-height: 1.8; }
.reservation-state-note { display: block; max-width: 260px; margin-top: 7px; color: #576b5c; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .study-rule-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .study-rules-list { font-size: 14px; padding-left: 1.5em; }
  .study-rule-facts { gap: 8px; }
  .study-rule-facts li { padding: 10px; }
  .study-rule-facts strong { font-size: 16px; }
  .study-day-state { padding: 14px; }
}