/* ═══════════════════════════════════════════════════
   ModernEast Admin — Layout & Components
   ═══════════════════════════════════════════════════ */

/* ────────────────────────────────────────
   APP SHELL
   ──────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--duration-normal) var(--ease-out);
}
.app.sidebar-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* ────────────────────────────────────────
   SIDEBAR
   ──────────────────────────────────────── */
.sidebar {
  background: var(--dark);
  color: rgba(255,255,255,.8);
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.04);
}

.sb-brand {
  padding: 24px 24px 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
}
.sb-brand .mark {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}
.sb-brand .wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: .32em;
  color: #fff;
  white-space: nowrap;
}
.sb-brand .wordmark small {
  display: block;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
  font-weight: 300;
}

.sb-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 12px 24px;
}
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

.sb-group-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(255,255,255,.35);
  padding: 18px 16px 8px;
  text-transform: uppercase;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  font-size: 13px;
  color: rgba(255,255,255,.68);
  letter-spacing: .05em;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast);
  white-space: nowrap;
}
.sb-item:hover { color: #fff; background: rgba(255,255,255,.04); }
.sb-item.active {
  color: #fff;
  background: rgba(154,132,86,.14);
}
.sb-item.active::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; background: var(--accent);
}
.sb-item .ic {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55);
}
.sb-item.active .ic { color: var(--accent); }
.sb-item .lbl { flex: 1; }
.sb-item .count {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  letter-spacing: .05em;
}
.sb-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

.sb-user {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
}
.sb-user .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--terra));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  flex-shrink: 0;
}
.sb-user .meta { flex: 1; min-width: 0; }
.sb-user .name {
  font-size: 13px; color: #fff; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user .role {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--accent);
  margin-top: 2px;
}
.sb-user .logout {
  color: rgba(255,255,255,.4);
  font-size: 14px;
  padding: 6px;
  border-radius: 3px;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.sb-user .logout:hover { color: #fff; background: rgba(255,255,255,.06); }

/* Collapsed state */
.app.sidebar-collapsed .sb-brand { padding: 24px 19px; justify-content: center; }
.app.sidebar-collapsed .sb-brand .wordmark { display: none; }
.app.sidebar-collapsed .sb-scroll { padding: 18px 8px; }
.app.sidebar-collapsed .sb-item { justify-content: center; padding: 10px 0; }
.app.sidebar-collapsed .sb-item .lbl,
.app.sidebar-collapsed .sb-item .count,
.app.sidebar-collapsed .sb-group-label { display: none; }
.app.sidebar-collapsed .sb-user { justify-content: center; padding: 16px 8px; }
.app.sidebar-collapsed .sb-user .meta,
.app.sidebar-collapsed .sb-user .logout { display: none; }

/* ────────────────────────────────────────
   MAIN / TOPBAR
   ──────────────────────────────────────── */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 72px;
  background: rgba(247,245,241,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.tb-collapse {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  color: var(--mute);
  transition: color var(--duration-fast), background var(--duration-fast);
}
.tb-collapse:hover { color: var(--accent); background: var(--surface-warm); }

.tb-crumbs {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--mute);
  text-transform: uppercase;
}
.tb-crumbs .sep { color: var(--line); }
.tb-crumbs .here { color: var(--ink); }

.tb-search {
  margin-left: auto;
  position: relative;
  width: 280px;
}
.tb-search input {
  width: 100%;
  height: 36px;
  padding: 0 14px 0 38px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  border-radius: 2px;
  transition: border-color var(--duration-fast);
}
.tb-search input:focus { border-color: var(--accent); }
.tb-search input::placeholder { color: var(--mute); font-weight: 300; }
.tb-search .sic {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--mute);
  pointer-events: none;
}
.tb-search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--mute);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.tb-actions { display: flex; align-items: center; gap: 8px; }
.tb-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mute);
  border-radius: 2px;
  position: relative;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.tb-btn:hover { color: var(--accent); background: var(--surface-warm); }
.tb-btn .badge-dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-sizing: content-box;
}

.tb-line-bot {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: .05em;
  transition: all var(--duration-fast);
}
.tb-line-bot:hover { border-color: var(--line-green); color: var(--line-green); }
.tb-line-bot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-green); box-shadow: 0 0 0 3px rgba(6,199,85,.12); }

/* ────────────────────────────────────────
   PAGE BODY
   ──────────────────────────────────────── */
.page {
  padding: 36px 32px 48px;
  max-width: 1440px;
  width: 100%;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.ph-left .ph-date {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ph-left h1 {
  font-family: 'Noto Serif TC', serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink);
  line-height: 1.3;
}
.ph-left h1 .en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 300;
  color: var(--mute);
  letter-spacing: .05em;
  margin-left: 12px;
}
.ph-left .greet {
  margin-top: 8px;
  font-size: 13px;
  color: var(--mute);
  letter-spacing: .05em;
}
.ph-left .greet b { color: var(--ink); font-weight: 500; }

.ph-right {
  display: flex; gap: 10px; align-items: center;
}
.ph-chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 12px;
  color: var(--mute);
  letter-spacing: .1em;
  display: flex; align-items: center; gap: 8px;
  transition: all var(--duration-fast);
}
.ph-chip:hover { border-color: var(--accent); color: var(--ink); }
.ph-chip .num {
  font-family: 'Cormorant Garamond', serif;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: .05em;
}

/* ────────────────────────────────────────
   GRID
   ──────────────────────────────────────── */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(12, 1fr);
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: span 12; }

/* ────────────────────────────────────────
   WIDGETS
   ──────────────────────────────────────── */
.widget {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 22px 24px;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal), transform var(--duration-normal);
  display: flex;
  flex-direction: column;
  position: relative;
}
.widget:hover {
  border-color: rgba(154,132,86,.45);
  box-shadow: var(--shadow-sm);
}
.widget.clickable { cursor: pointer; }
.widget.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.w-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.w-title {
  font-family: 'Noto Serif TC', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink);
}
.w-title .en {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--accent);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.w-more {
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .15em;
  transition: color var(--duration-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.w-more:hover { color: var(--accent); }

.w-divider {
  height: 1px;
  background: var(--line);
  margin: 0 0 16px;
}

/* Big stat display */
.stat-big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 8px;
}
.stat-big .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.01em;
}
.stat-big .unit {
  font-size: 13px;
  color: var(--mute);
  letter-spacing: .1em;
}
.stat-delta {
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--sage);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stat-delta.down { color: var(--error); }
.stat-delta .arr { font-family: 'Cormorant Garamond', serif; font-size: 13px; }
.stat-foot {
  margin-top: auto;
  padding-top: 14px;
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .08em;
  border-top: 1px dashed var(--line);
}

/* Mini sparkline */
.spark {
  height: 44px;
  margin: 10px 0 6px;
}
.spark svg { width: 100%; height: 100%; overflow: visible; }

/* Progress bar */
.bar {
  height: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.bar .fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--accent);
  transition: width var(--duration-normal);
}
.bar.terra .fill { background: var(--terra); }
.bar.sage .fill { background: var(--sage); }
.bar.error .fill { background: var(--error); }

/* Brand revenue list */
.brand-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.brand-row:last-child { border-bottom: 0; }
.brand-row .b-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: .15em;
  color: var(--ink);
}
.brand-row .b-amt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: .02em;
}
.brand-row .b-amt small {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 10px;
  color: var(--mute);
  letter-spacing: .1em;
  margin-left: 4px;
}

/* Todo list */
.todo {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.todo:last-child { border-bottom: 0; }
.todo:hover { background: rgba(154,132,86,.03); padding-left: 6px; padding-right: 6px; margin: 0 -6px; }
.todo .t-tag {
  flex-shrink: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: .25em;
  padding: 3px 8px;
  color: var(--mute);
  border: 1px solid var(--line);
  height: 22px;
  display: inline-flex;
  align-items: center;
}
.todo .t-tag.urgent { color: var(--error); border-color: rgba(196,92,92,.3); }
.todo .t-tag.approve { color: var(--accent); border-color: rgba(154,132,86,.3); }
.todo .t-tag.review { color: var(--terra); border-color: rgba(160,120,90,.3); }
.todo .t-tag.new { color: var(--sage); border-color: rgba(138,148,132,.3); }
.todo .t-body { flex: 1; min-width: 0; }
.todo .t-title {
  font-size: 13px; color: var(--ink);
  font-weight: 400;
  margin-bottom: 2px;
}
.todo .t-meta {
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .05em;
  display: flex; gap: 10px;
}
.todo .t-time {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  color: var(--mute);
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Schedule list */
.sched {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  align-items: center;
}
.sched:last-child { border-bottom: 0; }
.sched .s-date {
  font-family: 'Cormorant Garamond', serif;
  text-align: center;
  border: 1px solid var(--line);
  padding: 4px 0 6px;
  line-height: 1;
}
.sched .s-date .d { font-size: 20px; color: var(--ink); }
.sched .s-date .m { font-size: 9px; color: var(--accent); letter-spacing: .2em; margin-top: 2px; text-transform: uppercase; }
.sched .s-body .s-title {
  font-size: 13px; font-weight: 400; color: var(--ink); margin-bottom: 2px;
}
.sched .s-body .s-meta {
  font-size: 11px; color: var(--mute);
  letter-spacing: .05em;
}
.sched .s-body .s-meta .tag-mini {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--accent);
  padding: 1px 6px;
  border: 1px solid var(--line);
  margin-right: 4px;
}
.sched .s-status {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: .25em;
  padding: 4px 10px;
  color: #fff;
  background: var(--accent);
  text-transform: uppercase;
}
.sched .s-status.done { background: var(--sage); }
.sched .s-status.delay { background: var(--error); }
.sched .s-status.wait { background: var(--stone); color: var(--ink); }

/* Attendance dots (people grid) */
.att-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.att-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: var(--stone);
  position: relative;
  cursor: pointer;
  transition: transform var(--duration-fast);
}
.att-dot:hover { transform: scale(1.15); z-index: 2; }
.att-dot.present { background: var(--sage); }
.att-dot.away { background: var(--stone); color: var(--mute); }
.att-dot.leave { background: var(--terra); }
.att-dot.sick { background: var(--error); }

.att-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  margin-top: auto;
}
.att-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .05em;
}
.att-legend .d {
  width: 8px; height: 8px; border-radius: 50%;
}

/* Case progress rows */
.case-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
  align-items: center;
  cursor: pointer;
  transition: background var(--duration-fast), padding var(--duration-fast);
}
.case-row:last-child { border-bottom: 0; }
.case-row:hover { background: rgba(154,132,86,.03); padding-left: 6px; padding-right: 6px; margin: 0 -6px; }
.case-row .c-name {
  font-size: 13px; color: var(--ink); font-weight: 400;
  margin-bottom: 4px;
}
.case-row .c-name .mini {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: .2em;
  margin-right: 8px;
}
.case-row .c-meta {
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .05em;
  display: flex; gap: 10px;
  margin-bottom: 8px;
}
.case-row .c-bar-wrap {
  display: flex; align-items: center; gap: 10px;
}
.case-row .c-bar-wrap .bar { flex: 1; }
.case-row .c-pct {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: .05em;
  min-width: 36px; text-align: right;
}
.case-row .c-amt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .02em;
  white-space: nowrap;
  text-align: right;
}
.case-row .c-amt small {
  display: block;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 10px;
  color: var(--mute);
  letter-spacing: .1em;
  margin-top: 2px;
}

/* Revenue "chart" (pure CSS bar chart) */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 180px;
  padding: 12px 0 0;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.chart-bars .bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.chart-bars .bar-col {
  width: 100%;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-bottom: 0;
  position: relative;
  transition: background var(--duration-fast);
  min-height: 2px;
}
.chart-bars .bar-item:hover .bar-col { background: rgba(154,132,86,.18); }
.chart-bars .bar-col.current { background: var(--accent); border-color: var(--accent); }
.chart-bars .bar-col.current::after {
  content: '';
  position: absolute; top: -8px; left: 0; right: 0;
  height: 3px; background: var(--accent);
}
.chart-bars .bar-item .m-lbl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--mute);
  text-transform: uppercase;
  position: absolute;
  bottom: -22px;
}
.chart-bars .bar-item .m-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  color: var(--ink);
  letter-spacing: .05em;
  position: absolute;
  top: -16px;
  opacity: 0;
  transition: opacity var(--duration-fast);
  white-space: nowrap;
}
.chart-bars .bar-item:hover .m-val,
.chart-bars .bar-item .bar-col.current ~ .m-val,
.chart-bars .bar-col.current + .m-lbl + .m-val { opacity: 1; }

.chart-meta {
  display: flex; justify-content: space-between;
  padding-top: 30px;
  margin-top: 6px;
  border-top: 1px dashed transparent;
  font-size: 11px;
  color: var(--mute);
}

/* Activity feed */
.feed { margin-top: 4px; }
.feed-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  padding: 10px 0;
  position: relative;
}
.feed-item::before {
  content: '';
  position: absolute;
  top: 18px; bottom: -10px; left: 6px;
  width: 1px;
  background: var(--line);
}
.feed-item:last-child::before { display: none; }
.feed-item .f-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  margin-top: 6px;
  box-sizing: content-box;
  position: relative;
  z-index: 1;
}
.feed-item.sage .f-dot { border-color: var(--sage); }
.feed-item.terra .f-dot { border-color: var(--terra); }
.feed-item.stone .f-dot { border-color: var(--stone); }
.feed-item .f-body .f-title {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.feed-item .f-body .f-meta {
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .05em;
}
.feed-item .f-body .f-meta b {
  color: var(--accent);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: .1em;
}

/* Quick actions grid */
.quicks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.quick {
  border: 1px solid var(--line);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all var(--duration-fast);
  cursor: pointer;
  background: var(--bg);
}
.quick:hover {
  border-color: var(--accent);
  background: var(--card);
  transform: translateY(-1px);
}
.quick .ic {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  border: 1px solid rgba(154,132,86,.3);
  flex-shrink: 0;
}
.quick .lbl {
  font-size: 12px;
  color: var(--ink);
  letter-spacing: .05em;
  line-height: 1.4;
}
.quick .lbl small {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  color: var(--mute);
  letter-spacing: .2em;
  margin-bottom: 2px;
  text-transform: uppercase;
}

/* CMS pages mini-list */
.cms-page {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  align-items: center;
  cursor: pointer;
  transition: background var(--duration-fast);
}
.cms-page:last-child { border-bottom: 0; }
.cms-page:hover { background: rgba(154,132,86,.03); padding-left: 6px; padding-right: 6px; margin: 0 -6px; }
.cms-page .p-type {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--mute);
  padding: 3px 8px;
  border: 1px solid var(--line);
  text-transform: uppercase;
  min-width: 56px;
  text-align: center;
}
.cms-page .p-title {
  font-size: 13px; color: var(--ink); font-weight: 400;
  margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cms-page .p-path {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .05em;
}
.cms-page .p-status {
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--sage);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cms-page .p-status .d { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.cms-page .p-status.draft { color: var(--accent); }
.cms-page .p-status.draft .d { background: var(--accent); }

/* Notification feed */
.notif {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  align-items: flex-start;
  cursor: pointer;
}
.notif:last-child { border-bottom: 0; }
.notif .n-bar {
  width: 2px; height: 100%;
  min-height: 36px;
  background: var(--accent);
}
.notif.info .n-bar { background: var(--stone); }
.notif.warn .n-bar { background: var(--error); }
.notif.success .n-bar { background: var(--sage); }
.notif .n-body { min-width: 0; }
.notif .n-title { font-size: 13px; color: var(--ink); margin-bottom: 3px; }
.notif .n-desc { font-size: 11px; color: var(--mute); letter-spacing: .03em; }
.notif .n-time {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .05em;
  white-space: nowrap;
}

/* Empty sparkline curves (paths) */
.sp-path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sp-area { fill: rgba(154,132,86,.08); stroke: none; }

/* Dividers / headers inline */
.inline-head {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 10px;
}
.inline-head .bar-a { width: 20px; height: 1px; background: var(--accent); }
.inline-head .lbl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px; letter-spacing: .3em;
  color: var(--accent);
  text-transform: uppercase;
}

/* ────────────────────────────────────────
   TWEAKS PANEL
   ──────────────────────────────────────── */
.tweaks {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 280px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  font-family: 'Noto Sans TC', sans-serif;
  display: none;
}
.tweaks.show { display: block; }
.tweaks-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tweaks-head .ttl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  letter-spacing: .35em;
  color: var(--accent);
  text-transform: uppercase;
}
.tweaks-head .close {
  color: var(--mute);
  padding: 4px;
}
.tweaks-body { padding: 14px 16px; max-height: 60vh; overflow-y: auto; }
.tweak-row { margin-bottom: 16px; }
.tweak-row:last-child { margin-bottom: 0; }
.tweak-row .lbl {
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .15em;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-family: 'Cormorant Garamond', serif;
}
.tweak-segs {
  display: flex;
  border: 1px solid var(--line);
}
.tweak-segs button {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--mute);
  transition: all var(--duration-fast);
  border-right: 1px solid var(--line);
}
.tweak-segs button:last-child { border-right: 0; }
.tweak-segs button.active { background: var(--accent); color: #fff; }
.tweak-segs button:hover:not(.active) { background: var(--surface-warm); color: var(--ink); }

/* ────────────────────────────────────────
   MOBILE FRAME (preview)
   ──────────────────────────────────────── */
.mobile-mode {
  min-height: 100vh;
  background: var(--surface-cool);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.phone {
  width: 390px;
  height: 844px;
  background: var(--bg);
  border: 10px solid #0f0e0c;
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
}
.phone-status {
  height: 44px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--ink);
  flex-shrink: 0;
  background: var(--bg);
  position: relative;
}
.phone-status::after {
  content: '';
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #0f0e0c;
  border-radius: 14px;
}
.phone-status .time { font-weight: 500; }
.phone-status .icons { display: flex; gap: 6px; align-items: center; }

.phone-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}

.m-topbar {
  padding: 18px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--line);
}
.m-topbar .greet {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 2px;
  white-space: nowrap;
  line-height: 1.2;
}
.m-topbar .hi {
  font-family: 'Noto Serif TC', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink);
}
.m-topbar .actions { display: flex; gap: 4px; }
.m-ic-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mute);
  position: relative;
}
.m-ic-btn .dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.m-hero {
  margin: 16px 20px 12px;
  padding: 22px 22px 24px;
  background: var(--dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.m-hero::before {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154,132,86,.2), transparent 70%);
}
.m-hero .tag {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: .35em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.m-hero .val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.01em;
}
.m-hero .val small {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 12px;
  font-weight: 300;
  opacity: .65;
  margin-left: 6px;
  letter-spacing: .05em;
}
.m-hero .sub {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(255,255,255,.55);
}
.m-hero .sub .up { color: var(--sage); }
.m-hero .bar-wrap {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-hero .bar-wrap .bar { flex: 1; background: rgba(255,255,255,.12); height: 2px; }
.m-hero .bar-wrap .bar .fill { background: var(--accent); }
.m-hero .bar-wrap .pct {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: .1em;
}

.m-chips {
  padding: 4px 20px 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-chips::-webkit-scrollbar { display: none; }
.m-chip {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .1em;
  display: flex; align-items: center; gap: 6px;
}
.m-chip.active { border-color: var(--accent); color: var(--accent); }
.m-chip .n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: .05em;
}
.m-chip.active .n { color: var(--accent); }

.m-section {
  padding: 20px 20px 6px;
}
.m-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.m-sec-head .t {
  font-family: 'Noto Serif TC', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink);
  line-height: 1.3;
}
.m-sec-head .t .en {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 9px;
  color: var(--accent);
  letter-spacing: .3em;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
}
.m-sec-head .more {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .15em;
}

.m-card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.m-card-row {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: center;
}
.m-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 20px;
}
.m-stat {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 14px;
}
.m-stat .l {
  font-family: 'Cormorant Garamond', serif;
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.m-stat .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
}
.m-stat .v small {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 11px;
  color: var(--mute);
  margin-left: 4px;
}
.m-stat .f {
  margin-top: 6px;
  font-size: 10px;
  color: var(--mute);
  letter-spacing: .05em;
}

.m-tabbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 72px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: flex;
  padding: 6px 0 18px;
}
.m-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--mute);
  font-size: 10px;
  letter-spacing: .1em;
  position: relative;
}
.m-tab.active { color: var(--accent); }
.m-tab.active::before {
  content: '';
  position: absolute; top: 0;
  width: 20px; height: 2px; background: var(--accent);
}
.m-tab .ic { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.m-tab .en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Dual-view (desktop + mobile) */
.view-stack { }
.view-stack .view-title {
  padding: 28px 40px 16px;
  max-width: 1440px;
  margin: 0 auto;
}
.view-stack .view-title .lbl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--accent);
  text-transform: uppercase;
}
.view-stack .view-title h2 {
  font-family: 'Noto Serif TC', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .1em;
  margin-top: 4px;
}

/* ────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────── */
@media (max-width: 1200px) {
  .span-3 { grid-column: span 6; }
  .span-4 { grid-column: span 6; }
  .span-5 { grid-column: span 12; }
  .span-7 { grid-column: span 12; }
  .span-8 { grid-column: span 12; }
  .span-9 { grid-column: span 12; }
}

@media (max-width: 900px) {
  .span-3, .span-4, .span-6 { grid-column: span 12; }
  .page { padding: 24px 18px 40px; }
  .topbar { padding: 0 18px; }
  .tb-search { display: none; }
}