:root {
  --chyin-navy: #082f49;
  --chyin-deep: #06273c;
  --chyin-coral: #ee6959;
  --chyin-paper: #f7f6f2;
  --chyin-ink: #132f43;
  --chyin-line: #dce2e2;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  color: var(--chyin-ink);
  background: var(--chyin-paper);
}

body { background: var(--chyin-paper); }
.app-shell { grid-template-columns: 244px minmax(0, 1fr); }
.sidebar {
  background: var(--chyin-deep);
  color: #f5f4ef;
  padding: 20px 0 24px;
  overflow-y: auto;
}
.brand {
  display: block;
  padding: 0 24px 35px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.brand-logo {
  display: block;
  width: 178px;
  height: 142px;
  object-fit: contain;
  background: #fff;
  padding: 8px 7px;
  margin-bottom: 19px;
}
.brand-copy {
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: .04em;
  line-height: 1.35;
}
.brand-copy small {
  margin-top: 4px;
  color: #91aebd;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .14em;
}
.workspace-label {
  color: var(--chyin-coral);
  font-size: 10px;
  margin: 0 25px 15px;
  letter-spacing: .18em;
}
.workspace-label span { color: #9bb2bd; letter-spacing: .03em; }
.nav-list { gap: 3px; }
.nav-link {
  position: relative;
  border-radius: 0;
  padding: 15px 25px;
  color: #beced6;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
}
.nav-link:hover,.nav-link:focus-visible { background: #123d55; }
.nav-link.active { background: #113a53; color: #fff; }
.nav-link.active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--chyin-coral);
}
.nav-index {
  display: inline-block;
  width: 39px;
  color: #7393a6;
  font-family: Arial,sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
}
.active .nav-index { color: var(--chyin-coral); }
.sidebar-bottom { border-color: rgba(255,255,255,.16); padding: 18px 24px 0; color: #d4dfe2; }
.sidebar-bottom small { color: #96afb9; }
.offline-dot { background: var(--chyin-coral); }
.main-area { padding: 0 clamp(24px,3.5vw,64px); }
.topbar { height: 106px; border-bottom: 1px solid var(--chyin-line); }
.topbar h1 { margin-top: 8px; color: var(--chyin-ink); font-size: 28px; letter-spacing: .045em; }
.eyebrow { color: #557182; font-family: Arial,sans-serif; font-size: 10px; letter-spacing: .18em; }
.eyebrow i { display: inline-block; width: 14px; border-top: 1px solid var(--chyin-coral); margin: 0 8px 4px; }
.topbar-side { gap: 18px; }
.date-chip { color: #67808e; font-size: 12px; }
.preview-badge {
  background: #fce5df;
  color: #9a4239;
  border: 1px solid #f1c8be;
  border-radius: 2px;
  padding: 7px 11px;
  font-size: 11px;
  letter-spacing: .08em;
}
.notice {
  background: #f8f2e9;
  border: 0;
  border-left: 3px solid var(--chyin-coral);
  color: #665a4b;
  border-radius: 0;
  margin: 22px 0;
  font-size: 12px;
}
.notice strong { color: var(--chyin-ink); }
.dashboard-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-height: 192px;
  padding: 24px 34px;
  overflow: hidden;
  background: var(--chyin-navy);
  color: #fff;
}
.dashboard-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30%;
  width: 1px;
  background: rgba(255,255,255,.10);
  transform: skewX(-22deg);
}
.hero-label,.hero-caption { position: relative; z-index: 1; }
.hero-label { color: #9eb9c7; font-family: Arial,sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.hero-lead { position: relative; z-index: 1; margin: 13px 0 8px; font-size: clamp(25px,2.4vw,39px); font-weight: 800; line-height: 1.26; letter-spacing: .04em; }
.hero-lead em { color: var(--chyin-coral); font-style: normal; }
.hero-caption { color: #bbced5; font-size: 11px; letter-spacing: .03em; }
.hero-art { position: absolute; inset: 0 0 0 auto; width: 37%; overflow: hidden; }
.hero-line { position: absolute; right: 48px; top: 18px; color: rgba(255,255,255,.09); font-family: Arial,sans-serif; font-size: 98px; font-weight: 800; letter-spacing: -.06em; }
.hero-number { position: absolute; right: 27px; bottom: -49px; color: rgba(255,255,255,.08); font-family: Arial,sans-serif; font-size: 166px; font-weight: 800; letter-spacing: -.1em; }
.hero-slash { position: absolute; right: 85px; top: -12px; height: 240px; width: 26px; background: var(--chyin-coral); transform: skewX(-28deg); }
.section-heading { margin: 30px 0 16px; }
.section-heading h2 { margin-top: 5px; font-size: 22px; letter-spacing: .03em; }
.section-heading p { color: #71818a; }
.overline { color: var(--chyin-coral); font-family: Arial,sans-serif; font-size: 10px; letter-spacing: .16em; }
.metric-grid { gap: 1px; background: var(--chyin-line); border: 1px solid var(--chyin-line); }
.metric,.card { border: 0; border-radius: 0; box-shadow: none; }
.metric { padding: 20px 22px 17px; background: #fff; }
.metric span { color: #4a6472; font-size: 12px; font-weight: 700; }
.metric strong { color: var(--chyin-navy); font-family: Arial,sans-serif; font-size: 39px; line-height: 1.25; letter-spacing: -.05em; }
.metric small { color: #8b9aa1; font-size: 11px; }
.metric.attention { background: #fdf1eb; }
.metric.attention strong { color: #bf584a; }
.content-grid { gap: 1px; margin-top: 19px; background: var(--chyin-line); border: 1px solid var(--chyin-line); }
.card { background: #fff; padding: 22px; }
.card-head { padding-bottom: 13px; border-bottom: 1px solid #e7ebeb; }
.card h3 { color: var(--chyin-ink); font-size: 17px; letter-spacing: .025em; }
.text-button { color: var(--chyin-coral); font-size: 12px; }
.appointment { border: 0; border-bottom: 1px solid #e5e9e9; border-radius: 0; padding: 13px 0; }
.appointment:last-child { border-bottom: 0; }
.appointment .time { color: var(--chyin-navy); }
.appointment .who small { color: #84959d; }
.tag { border-radius: 2px; background: #dfeeea; color: #287268; }
.tag.pending { background: #fbe8cd; color: #945e20; }
.tag.cancelled { background: #f5e3e2; color: #9a4f4e; }
.tag.dark { background: #e8edf0; color: #526676; }
.reminder { border-radius: 0; padding: 13px 14px; }
.reminder.amber { background: #fbf1e4; }
.reminder.blue { background: #edf3f3; }
.reminder-icon,.blue .reminder-icon { border-radius: 0; background: var(--chyin-coral); color: #fff; }
.blue .reminder-icon { background: var(--chyin-navy); }
.toolbar { margin: 0 0 16px; }
.search-box { border: 1px solid #cdd8d9; border-radius: 0; max-width: 740px; color: #6e8894; }
.search-box:focus-within { border-color: var(--chyin-coral); box-shadow: inset 0 0 0 1px var(--chyin-coral); }
.toolbar select { border-radius: 0; border-color: #cdd8d9; color: var(--chyin-ink); }
.count-label { color: #7c8c94; }
.two-column { gap: 16px; border: 0; background: transparent; align-items: stretch; }
.two-column > .card { border: 1px solid var(--chyin-line); }
.list-card { min-height: 320px; max-height: calc(100vh - 270px); padding: 6px; }
.list-item { border-radius: 0; padding: 12px; border-bottom: 1px solid #edf0ef; }
.list-item:hover,.list-item:focus-visible { background: #f6f7f5; }
.list-item.selected { background: #e8f0f1; box-shadow: inset 3px 0 var(--chyin-coral); }
.avatar { border-radius: 0; background: #dce6e9; color: var(--chyin-navy); }
.list-text small,.profile-head p { color: #83949d; }
.detail-card { min-height: 320px; }
.definition-grid { border-color: var(--chyin-line); }
.definition-grid dt { color: #85939a; }
.note-box { background: #f1f4f3; border-left: 2px solid #bccfd2; border-radius: 0; }
.form-grid input,.form-grid select { border-radius: 0; border-color: #cbd7d8; }
.primary,.danger,.secondary { border-radius: 0; }
.primary { background: var(--chyin-navy); }
.primary:hover { background: #0e4767; }
.danger { background: #bf4f4b; }
.danger:hover { background: #a33a39; }
.secondary { background: #e5eded; }
.analytics-card { border: 1px solid var(--chyin-line); }
thead th { background: var(--chyin-navy); color: #fff; }
th,td { border-color: #e4e8e8; }
tbody tr:nth-child(even) { background: #f8f9f7; }
footer { color: #899aa0; }
.toast { background: var(--chyin-navy); border-radius: 0; }
button:focus-visible,input:focus-visible,select:focus-visible { outline-color: var(--chyin-coral); }

@media (max-width: 1100px) {
  .main-area { padding: 0 24px; }
  .content-grid { gap: 1px; }
}
@media (max-width: 740px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; overflow: visible; padding: 10px 0; }
  .brand { display: flex; align-items: center; gap: 14px; padding: 0 14px 9px; margin: 0; border: 0; }
  .brand-logo { width: 73px; height: 59px; padding: 3px; margin: 0; }
  .brand-copy { font-size: 13px; }
  .brand-copy small { font-size: 8px; }
  .workspace-label { display: none; }
  .nav-list { padding: 0 7px; }
  .nav-link { padding: 10px 11px; font-size: 12px; }
  .nav-index { display: none; }
  .main-area { padding: 0 14px; }
  .topbar { height: auto; padding: 17px 0; }
  .topbar h1 { font-size: 21px; }
  .topbar-side { gap: 7px; }
  .dashboard-hero { min-height: 165px; padding: 21px; }
  .hero-lead { font-size: 27px; }
  .hero-caption { display: none; }
  .hero-art { width: 40%; opacity: .65; }
  .hero-line { right: 5px; font-size: 52px; }
  .hero-number { right: 7px; font-size: 105px; bottom: -19px; }
  .hero-slash { right: 40px; }
  .section-heading { margin-top: 24px; }
  .metric-grid { gap: 1px; }
  .metric { padding: 14px; }
  .metric strong { font-size: 30px; }
  .content-grid { grid-template-columns: 1fr; }
  .two-column { grid-template-columns: 1fr; }
  .list-card { min-height: 0; max-height: 290px; }
}