/* ─── Global Design Tokens ──────────────────────────────────────────────── */
:root {
  /* Warm neutral palette — schedule.html is the reference */
  --bg:           #f7f4ef;
  --panel:        rgba(255, 253, 250, 0.97);
  --panel-solid:  #fffdfb;
  --line:         #dfd4c8;
  --line-soft:    #ede5da;
  --text:         #2f2a24;
  --muted:        #7f7468;

  /* Brand / accent */
  --orange:       #f56b2a;
  --orange-dark:  #db5b1e;
  --orange-soft:  #fff1e8;

  /* Semantic */
  --green:        #2f9b5f;
  --green-soft:   #ebf8f0;
  --red:          #d5543f;
  --red-soft:     #fff0ed;
  --info:         #2474b8;
  --info-soft:    #eaf3ff;

  /* Shadow */
  --shadow:       0 18px 50px rgba(117, 87, 48, 0.08);
  --shadow-lg:    0 28px 70px rgba(117, 87, 48, 0.12);
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: "IBM Plex Sans", "PingFang SC", "Noto Sans SC", sans-serif;
  /* Warm dot-grid background — matches schedule.html */
  background:
    radial-gradient(circle at 1px 1px, rgba(245, 107, 42, 0.13) 1px, transparent 0) 0 0 / 18px 18px,
    linear-gradient(135deg, #fff8f1 0%, #f8f5f0 40%, #f4f7f8 100%);
  min-height: 100vh;
}

/* ─── Shared Icon Nav Sidebar ────────────────────────────────────────────── */
.nav {
  border-radius: 22px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.nav-logo,
.nav-item {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-decoration: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.nav-logo,
.nav-item.active {
  background: var(--orange);
  color: white;
  border-color: transparent;
}

/* ─── Shared Message / Feedback ─────────────────────────────────────────── */
.msg {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel-solid);
}

.msg.ok,
.msg-success {
  color: #1d6a53;
  background: #e7f5ef;
  border-color: #cce8dd;
}

.msg.err,
.msg-error {
  color: var(--red);
  background: var(--red-soft);
  border-color: #f2cfc2;
}

.msg-info {
  color: var(--info);
  background: var(--info-soft);
  border-color: #cddff8;
}

/* ─── Utility ────────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.hidden { display: none !important; }