/* 後台界面皮：data-ui = material | flat | bauhaus。預設（無屬性）= 彼岸現況。
   唔改 .dg-block / .week-sheet / 日程磚。本機 localStorage，唔寫庫。 */

html[data-ui] .week-sheet,
html[data-ui] .dg-block,
html[data-ui] .dg-th,
html[data-ui] .day-pane,
html[data-ui] .mac-cal,
html[data-ui] .mac-evt,
html[data-ui] .mac-pill {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    system-ui, sans-serif;
  letter-spacing: -0.022em;
}

.seg-ui {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 28rem;
}

/* ——— Material 3 ——— */
html[data-ui="material"] {
  --bg: #f7f9ff;
  --ink: #1a1c1e;
  --ink-80: rgba(26, 28, 30, 0.8);
  --ink-48: rgba(26, 28, 30, 0.52);
  --blue: #0b57d0;
  --link: #0b57d0;
  --white: #ffffff;
  --card: #ffffff;
  --nav: #f3f4fa;
  --hairline: #c4c6d0;
  --danger: #ba1a1a;
  --ok: #1b7f3b;
  --radius: 16px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
  font-family: Roboto, "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0.01em;
  background: var(--bg);
  color: var(--ink);
}
html[data-ui="material"][data-theme="ink"] {
  --bg: #1a1c1e;
  --ink: #e3e2e6;
  --ink-80: rgba(227, 226, 230, 0.82);
  --ink-48: rgba(227, 226, 230, 0.5);
  --blue: #a8c7fa;
  --link: #a8c7fa;
  --white: #e3e2e6;
  --card: #2b2f33;
  --nav: #1f2226;
  --hairline: rgba(255, 255, 255, 0.14);
  --danger: #ffb4ab;
  --ok: #7ddc8a;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: #1a1c1e;
  color: #e3e2e6;
}
html[data-ui="material"] .nav {
  background: var(--nav);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  border-bottom: 0;
}
html[data-ui="material"] .nav a.active {
  color: var(--blue);
  font-weight: 600;
}
html[data-ui="material"] .btn {
  border-radius: 20px;
  min-height: 40px;
  padding: 8px 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: box-shadow 180ms ease, filter 120ms ease;
}
html[data-ui="material"] .btn:hover { filter: brightness(1.05); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); }
html[data-ui="material"] .btn-ghost {
  box-shadow: none;
  background: transparent;
}
html[data-ui="material"] .card,
html[data-ui="material"] .group,
html[data-ui="material"] .add-panel,
html[data-ui="material"] .settings-stack .fold-block,
html[data-ui="material"] .fin-all-stack .fold-block {
  border-radius: 16px;
  box-shadow: var(--shadow);
}
html[data-ui="material"] .dash-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
}
html[data-ui="material"] input,
html[data-ui="material"] select,
html[data-ui="material"] textarea {
  border-radius: 4px 4px 0 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: rgba(11, 87, 208, 0.06);
  min-height: 44px;
}
html[data-ui="material"][data-theme="ink"] input,
html[data-ui="material"][data-theme="ink"] select,
html[data-ui="material"][data-theme="ink"] textarea {
  background: rgba(168, 199, 250, 0.08);
}
html[data-ui="material"] .sheet {
  background: var(--card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 28px 28px 0 0;
  border: 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}
html[data-ui="material"] .scrim.center .sheet {
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
html[data-ui="material"] .seg { background: #e8eaf1; border-radius: 20px; padding: 4px; }
html[data-ui="material"] .seg a,
html[data-ui="material"] .seg button { border-radius: 16px; }
html[data-ui="material"][data-theme="ink"] .seg { background: #2b2f33; }
html[data-ui="material"] .account-badge { border-radius: 8px; background: #d3e3fd; color: #041e49; }
html[data-ui="material"][data-theme="ink"] .account-badge { background: #2b4678; color: #d3e3fd; }
html[data-ui="material"] .display { font-weight: 400; letter-spacing: 0; }

/* ——— Flat ——— */
html[data-ui="flat"] {
  --bg: #eceff1;
  --ink: #212121;
  --ink-80: rgba(33, 33, 33, 0.82);
  --ink-48: rgba(33, 33, 33, 0.5);
  --blue: #2196f3;
  --link: #1565c0;
  --white: #ffffff;
  --card: #ffffff;
  --nav: #37474f;
  --hairline: #cfd8dc;
  --danger: #e53935;
  --ok: #43a047;
  --radius: 0;
  --shadow: none;
  font-family: "Segoe UI", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  letter-spacing: 0;
  background: var(--bg);
  color: var(--ink);
}
html[data-ui="flat"][data-theme="ink"] {
  --bg: #121212;
  --ink: #eeeeee;
  --ink-80: rgba(238, 238, 238, 0.82);
  --ink-48: rgba(238, 238, 238, 0.5);
  --blue: #42a5f5;
  --link: #90caf9;
  --white: #eeeeee;
  --card: #1e1e1e;
  --nav: #000000;
  --hairline: #333333;
  --danger: #ef5350;
  --ok: #66bb6a;
  background: #121212;
  color: #eeeeee;
}
html[data-ui="flat"] .nav {
  background: var(--nav);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 0;
}
html[data-ui="flat"] .nav a,
html[data-ui="flat"] .nav .account-badge,
html[data-ui="flat"] .nav .center-badge,
html[data-ui="flat"] .nav .nav-drop-label,
html[data-ui="flat"] .nav label {
  color: rgba(255, 255, 255, 0.78);
}
html[data-ui="flat"] .nav a:hover,
html[data-ui="flat"] .nav a.active,
html[data-ui="flat"] .nav-drop:hover > .nav-drop-label {
  color: #fff;
}
html[data-ui="flat"] .nav a.active {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 #ffc107;
}
html[data-ui="flat"] .nav-menu {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-ui="flat"] .nav-menu a,
html[data-ui="flat"] .nav-menu button {
  color: var(--ink-80);
  border-radius: 0;
  box-shadow: none;
}
html[data-ui="flat"] .nav-menu a:hover,
html[data-ui="flat"] .nav-menu button:hover,
html[data-ui="flat"] .nav-menu a.active {
  color: var(--ink);
  background: none;
  box-shadow: none;
}
html[data-ui="flat"][data-theme="ink"] .nav-menu a:hover,
html[data-ui="flat"][data-theme="ink"] .nav-menu button:hover,
html[data-ui="flat"][data-theme="ink"] .nav-menu a.active {
  background: none;
}
html[data-ui="flat"] .nav .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
html[data-ui="flat"] .nav select,
html[data-ui="flat"] .nav .help-q {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
}
html[data-ui="flat"] .account-badge {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 0;
}
html[data-ui="flat"] .btn {
  border-radius: 0;
  box-shadow: none;
  min-height: 36px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
html[data-ui="flat"] .btn:hover { filter: brightness(1.08); }
html[data-ui="flat"] .btn:active { transform: none; filter: brightness(0.95); }
/* 區塊直角。唔改 .dg-block／日程磚。排課日欄只去圓角，唔加新邊。 */
html[data-ui="flat"] .card,
html[data-ui="flat"] .group,
html[data-ui="flat"] .add-panel,
html[data-ui="flat"] .fold-block,
html[data-ui="flat"] .composer.compact,
html[data-ui="flat"] .dash-card,
html[data-ui="flat"] .login-card,
html[data-ui="flat"] .hero-tap,
html[data-ui="flat"] .flash,
html[data-ui="flat"] .fin-sheet-wrap,
html[data-ui="flat"] .risk-hero,
html[data-ui="flat"] .prospect-month,
html[data-ui="flat"] .prospect-gap,
html[data-ui="flat"] .bill-sec,
html[data-ui="flat"] .consume-month,
html[data-ui="flat"] .case-list,
html[data-ui="flat"] table.data,
html[data-ui="flat"] .cal,
html[data-ui="flat"] .cal-head,
html[data-ui="flat"] .cal-body,
html[data-ui="flat"] .tl,
html[data-ui="flat"] .board,
html[data-ui="flat"] .sheet,
html[data-ui="flat"] .sheet.tall,
html[data-ui="flat"] .scrim.center .sheet {
  border-radius: 0;
  box-shadow: none;
}
html[data-ui="flat"] .card,
html[data-ui="flat"] .group,
html[data-ui="flat"] .add-panel,
html[data-ui="flat"] .fold-block,
html[data-ui="flat"] .composer.compact,
html[data-ui="flat"] .dash-card,
html[data-ui="flat"] .login-card,
html[data-ui="flat"] .hero-tap,
html[data-ui="flat"] .fin-sheet-wrap,
html[data-ui="flat"] .risk-hero,
html[data-ui="flat"] .bill-sec,
html[data-ui="flat"] .case-list,
html[data-ui="flat"] .sheet {
  border: 1px solid var(--hairline);
}
html[data-ui="flat"] .week-cal,
html[data-ui="flat"] .day-pane,
html[data-ui="flat"][data-theme="ink"] .week-cal,
html[data-ui="flat"][data-theme="ink"] .day-pane {
  border-radius: 0;
  box-shadow: none;
}
html[data-ui="flat"] input,
html[data-ui="flat"] select,
html[data-ui="flat"] textarea {
  border-radius: 0;
  background: var(--card);
  border: 1px solid #b0bec5;
}
html[data-ui="flat"] .sheet {
  background: var(--card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  border: 1px solid var(--hairline);
  box-shadow: none;
}
html[data-ui="flat"] .scrim.center .sheet {
  border-radius: 0;
  box-shadow: none;
}
html[data-ui="flat"] .seg {
  background: #cfd8dc;
  border-radius: 0;
  box-shadow: none;
}
html[data-ui="flat"] .seg a,
html[data-ui="flat"] .seg button { border-radius: 0; }
html[data-ui="flat"] .seg a.on,
html[data-ui="flat"] .seg button.on { box-shadow: none; }
html[data-ui="flat"][data-theme="ink"] .seg { background: #333; }
html[data-ui="flat"] .display { font-weight: 600; letter-spacing: 0; }

/* ——— Bauhaus ——— */
html[data-ui="bauhaus"] {
  --bg: #f4f1ea;
  --ink: #111111;
  --ink-80: rgba(17, 17, 17, 0.82);
  --ink-48: rgba(17, 17, 17, 0.5);
  --blue: #0057b8;
  --link: #0057b8;
  --white: #ffffff;
  --card: #ffffff;
  --nav: #111111;
  --hairline: #111111;
  --danger: #e30613;
  --ok: #0057b8;
  --radius: 0;
  --shadow: none;
  font-family: Futura, "Century Gothic", "Avenir Next", "PingFang SC", "Helvetica Neue", sans-serif;
  letter-spacing: 0.02em;
  background: var(--bg);
  color: var(--ink);
}
html[data-ui="bauhaus"][data-theme="ink"] {
  --bg: #0a0a0a;
  --ink: #f4f1ea;
  --ink-80: rgba(244, 241, 234, 0.84);
  --ink-48: rgba(244, 241, 234, 0.5);
  --blue: #f7d117;
  --link: #f7d117;
  --white: #f4f1ea;
  --card: #161616;
  --nav: #000000;
  --hairline: #f7d117;
  --danger: #e30613;
  --ok: #f7d117;
  background: #0a0a0a;
  color: #f4f1ea;
}
html[data-ui="bauhaus"] .nav {
  background: #111;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 8px solid #f7d117;
}
html[data-ui="bauhaus"] .nav a,
html[data-ui="bauhaus"] .nav .center-badge,
html[data-ui="bauhaus"] .nav .nav-drop-label,
html[data-ui="bauhaus"] .nav label {
  color: #f4f1ea;
  font-weight: 600;
  letter-spacing: 0.04em;
}
html[data-ui="bauhaus"] .nav a:hover,
html[data-ui="bauhaus"] .nav-drop:hover > .nav-drop-label { color: #f7d117; }
html[data-ui="bauhaus"] .nav a.active {
  color: #111;
  background: #f7d117;
  font-weight: 700;
  padding: 4px 8px;
}
html[data-ui="bauhaus"] .nav-menu {
  background: #111;
  border: 2px solid #f7d117;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-ui="bauhaus"] .nav-menu a,
html[data-ui="bauhaus"] .nav-menu button {
  color: #f4f1ea;
  border-radius: 0;
}
html[data-ui="bauhaus"] .nav-menu a:hover,
html[data-ui="bauhaus"] .nav-menu button:hover {
  color: #f7d117;
  background: transparent;
}
html[data-ui="bauhaus"] .nav-menu a.active {
  color: #111;
  background: #f7d117;
}
html[data-ui="bauhaus"] .account-badge {
  background: #e30613;
  color: #fff;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
}
html[data-ui="bauhaus"] .nav .btn-ghost {
  color: #f4f1ea;
  border-color: #f4f1ea;
  background: transparent;
}
html[data-ui="bauhaus"] .nav select,
html[data-ui="bauhaus"] .nav .help-q {
  color: #f4f1ea;
  background: #111;
  border: 2px solid #f7d117;
  border-radius: 0;
}
html[data-ui="bauhaus"] .btn {
  border-radius: 0;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: 0.06em;
  min-height: 40px;
  border: 2px solid #111;
}
html[data-ui="bauhaus"] .btn-ghost {
  background: transparent;
  color: #111;
  border: 2px solid #111;
}
html[data-ui="bauhaus"][data-theme="ink"] .btn {
  background: #f7d117;
  color: #111;
  border-color: #f7d117;
}
html[data-ui="bauhaus"][data-theme="ink"] .btn-ghost {
  background: transparent;
  color: #f7d117;
  border-color: #f7d117;
}
html[data-ui="bauhaus"] .btn-danger {
  background: #e30613;
  border-color: #e30613;
  color: #fff;
}
html[data-ui="bauhaus"] .card,
html[data-ui="bauhaus"] .group,
html[data-ui="bauhaus"] .add-panel,
html[data-ui="bauhaus"] .settings-stack .fold-block,
html[data-ui="bauhaus"] .fin-all-stack .fold-block {
  border-radius: 0;
  box-shadow: none;
  border: 2px solid #111;
}
html[data-ui="bauhaus"][data-theme="ink"] .card,
html[data-ui="bauhaus"][data-theme="ink"] .group,
html[data-ui="bauhaus"][data-theme="ink"] .add-panel,
html[data-ui="bauhaus"][data-theme="ink"] .settings-stack .fold-block,
html[data-ui="bauhaus"][data-theme="ink"] .fin-all-stack .fold-block {
  border-color: #f7d117;
}
html[data-ui="bauhaus"] .dash-card {
  box-shadow: none;
  border: 2px solid #111;
  border-radius: 0;
}
html[data-ui="bauhaus"][data-theme="ink"] .dash-card { border-color: #f7d117; }
html[data-ui="bauhaus"] .week-cal,
html[data-ui="bauhaus"] .day-pane,
html[data-ui="bauhaus"] .composer.compact {
  border-radius: 0;
  box-shadow: none;
  border: 2px solid #111;
}
html[data-ui="bauhaus"][data-theme="ink"] .week-cal,
html[data-ui="bauhaus"][data-theme="ink"] .day-pane,
html[data-ui="bauhaus"][data-theme="ink"] .composer.compact {
  border-color: #f7d117;
}
html[data-ui="bauhaus"] input,
html[data-ui="bauhaus"] select,
html[data-ui="bauhaus"] textarea {
  border-radius: 0;
  border: 2px solid #111;
  background: #fff;
}
html[data-ui="bauhaus"][data-theme="ink"] input,
html[data-ui="bauhaus"][data-theme="ink"] select,
html[data-ui="bauhaus"][data-theme="ink"] textarea {
  border-color: #f7d117;
  background: #161616;
}
html[data-ui="bauhaus"] .sheet {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  border: 2px solid #111;
  box-shadow: none;
}
html[data-ui="bauhaus"][data-theme="ink"] .sheet {
  background: #161616;
  border-color: #f7d117;
}
html[data-ui="bauhaus"] .scrim.center .sheet { border-radius: 0; }
html[data-ui="bauhaus"] .seg {
  background: #fff;
  border-radius: 0;
  border: 2px solid #111;
  padding: 0;
}
html[data-ui="bauhaus"] .seg a,
html[data-ui="bauhaus"] .seg button {
  border-radius: 0;
  font-weight: 700;
}
html[data-ui="bauhaus"] .seg a.on,
html[data-ui="bauhaus"] .seg button.on {
  background: #0057b8;
  color: #fff;
  box-shadow: none;
}
html[data-ui="bauhaus"][data-theme="ink"] .seg { background: #111; border-color: #f7d117; }
html[data-ui="bauhaus"][data-theme="ink"] .seg a.on,
html[data-ui="bauhaus"][data-theme="ink"] .seg button.on {
  background: #f7d117;
  color: #111;
}
html[data-ui="bauhaus"] .display {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[data-ui="bauhaus"] .page-head {
  position: relative;
  border-left: 12px solid #e30613;
  padding-left: 16px;
  padding-bottom: 20px;
}
html[data-ui="bauhaus"] .page-head::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: 0;
  display: block;
  height: 8px;
  width: 72px;
  background: #0057b8;
  margin: 0;
}