:root {
  --ink: #1E293B;
  --navy: #23527C;
  --navy-deep: #1E304B;
  --terracotta: #C88759;
  --terracotta-deep: #A66A3F;
  --forest: #3A5E43;
  --forest-deep: #2C4733;
  --plum: #6B4A6E;
  --cream: #FDFBF7;
  --card: #FFFFFF;
  --sand: #F7F2EA;
  --border: #EAE6DF;
  --muted: #64748B;
  --success: #2F7A55;
  --success-bg: #E8F2EC;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.03);
  --shadow-float: 0 8px 28px rgba(15,30,46,0.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Noto Sans TC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .yh-display {
  font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
  font-weight: 700;
  margin: 0;
  color: var(--navy-deep);
}

a { text-decoration: none; color: inherit; }
code { background: var(--sand); padding: 1px 5px; border-radius: 4px; }

/* ---- Page shell: responsive container, fluid at every breakpoint ---- */
.yh-shell { min-height: 100vh; display: flex; flex-direction: column; }

.yh-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (min-width: 768px)  { .yh-container { max-width: 760px; padding: 0 28px; } }
@media (min-width: 1024px) { .yh-container { max-width: 1080px; padding: 0 32px; } }
@media (min-width: 1440px) { .yh-container { max-width: 1280px; } }

.yh-container-narrow { max-width: 480px !important; }

/* ---- Header (mobile: compact bar / desktop+: full top nav) ---- */
.yh-header {
  background: var(--navy-deep);
  color: #fff;
  flex-shrink: 0;
}
.yh-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 16px;
}
.yh-brand {
  font-family: 'Noto Serif TC', serif; font-weight: 700; font-size: 17px; color: #fff; flex-shrink: 0;
}
.yh-topnav { display: none; }
@media (min-width: 768px) {
  .yh-topnav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
  .yh-topnav a { color: rgba(247,244,237,0.75); font-weight: 600; }
  .yh-topnav a.active { color: #fff; }
  .yh-topnav-user { color: rgba(247,244,237,0.6); font-size: 13px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,0.2); }
  .yh-topnav-pill { background: var(--terracotta); color: #fff; padding: 6px 14px; border-radius: 999px; font-weight: 700; }
}
.yh-header-mobile-pill {
  background: var(--terracotta); color: #fff; padding: 7px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
@media (min-width: 768px) { .yh-header-mobile-pill { display: none; } }

/* ---- Bottom tab bar: mobile only ---- */
.yh-navbar {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: repeat(var(--yh-nav-cols, 3), 1fr);
  background: #fff; border-top: 1px solid var(--border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}
.yh-navbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.yh-navbar a.active { color: var(--navy-deep); }
@media (min-width: 768px) { .yh-navbar { display: none; } }

.yh-icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Main content ---- */
.yh-main { flex-grow: 1; padding: 20px 0 28px; }

/* ---- Cards, buttons, chips ---- */
.yh-card { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border); }

.yh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 15px;
  padding: 13px 24px; min-height: 44px; cursor: pointer;
}
.yh-btn-primary { background: var(--terracotta); color: #fff; }
.yh-btn-navy { background: var(--navy-deep); color: #fff; }
.yh-btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--border); }
.yh-btn-block { width: 100%; }
.yh-btn-sm { padding: 8px 16px; min-height: unset; font-size: 13px; }
.yh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.yh-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: #fff; color: var(--muted); white-space: nowrap; }
.yh-chip-active { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }

.yh-progress-track { height: 8px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.yh-progress-fill { height: 100%; background: var(--terracotta); border-radius: 999px; }

/* ---- Forms ---- */
.yh-label { font-size: 13px; color: #3A4650; display: block; margin-bottom: 6px; font-weight: 500; }
.yh-input, select.yh-input {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 15px; font-family: inherit; background: #fff; color: var(--ink);
}
.yh-input:focus { outline: none; border-color: var(--navy); }
.yh-field { margin-bottom: 16px; }
.yh-error-text { color: #B45309; font-size: 12.5px; margin-top: 6px; }

.yh-banner { border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.yh-banner-warn { background: #FCEEE7; border: 1px solid var(--terracotta); color: #8A4B26; }
.yh-banner-success { background: var(--success-bg); border: 1px solid var(--success); color: #245C3F; }
.yh-banner-error { background: #FBEAEA; border: 1px solid #C0392B; color: #8B2A21; }

table.yh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.yh-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--border); }
table.yh-table td { padding: 10px 6px; border-bottom: 1px solid var(--border); }

/* ---- Responsive grids used across pages ---- */
.yh-grid-courses { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px)  { .yh-grid-courses { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .yh-grid-courses { grid-template-columns: repeat(3, 1fr); } }

.yh-grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 900px) { .yh-grid-2 { grid-template-columns: 1fr 1.3fr; } }

.yh-grid-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.yh-grid-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .yh-grid-tiers { grid-template-columns: repeat(4, 1fr); } }

/* Course detail: single column on mobile, two columns (info | sticky purchase) on desktop */
.yh-detail-layout { display: block; }
@media (min-width: 900px) {
  .yh-detail-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; }
  .yh-detail-sidebar { position: sticky; top: 20px; }
}

/* Player: video column + chapter list column on wide screens */
.yh-player-layout { display: block; }
@media (min-width: 900px) {
  .yh-player-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }
}