:root {
  --primary:    #04302a;
  --primary-2:  #0b5d4b;
  --gold:       #d4af37;
  --gold-soft:  #f0d98a;
  --accent:     #0b7a5c;
  --clo1:       #1d4ed8;
  --clo2:       #b45309;
  --clo3:       #7e22ce;
  --concept:    #04302a;
  --operation:  #0e6a8c;
  --application:#0f766e;
  --comparison: #9f1239;
  --sustain:    #0b7a5c;
  --summary:    #581c87;
  --bg:         #f7f3e8;
  --bg-dark:    #03110e;
  --sidebar-w:  280px;
  --header-h:   84px;

  --surface:    #fffdf7;
  --text:       #14201c;
  --text-muted: #5b6b64;
  --border:     #e2d9bf;
  --on-primary: #fffdf7;
  --placeholder-bg: #e9e0c6;
}

:root[data-theme="dark"] {
  --bg:         var(--bg-dark);
  --accent:     #34d3a0;
  --sustain:    #34d3a0;
  --surface:    #08241e;
  --text:       #f6f1e0;
  --text-muted: #a8b9b0;
  --border:     #1c4a3d;
  --placeholder-bg: #1c4a3d;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}

#app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: linear-gradient(100deg, var(--primary) 0%, var(--primary-2) 100%);
  color: var(--on-primary);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 18px rgba(4, 48, 42, 0.35);
  z-index: 100;
}

.logo { height: 66px; width: auto; flex: none; border-radius: 6px; display: block; }
.logo-placeholder {
  width: 48px; height: 48px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--placeholder-bg);
  color: var(--text-muted);
  font-size: 0.7rem;
  border-radius: 6px;
}

.course-info { flex: 1; min-width: 0; }
.course-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.course-code { font-weight: 800; }
.lecturer { margin: 2px 0 0; font-size: 0.8rem; }
.author-badge { display: inline-block; padding: 1px 10px; border-radius: 999px; background: linear-gradient(135deg, #f0d98a, #d4af37 60%, #b8901f); color: #04302a; font-weight: 800; letter-spacing: 0.03em; box-shadow: 0 1px 6px rgba(212, 175, 55, 0.45); }

.mode-toggle { display: flex; gap: 4px; }
.mode-btn, .icon-btn {
  font: inherit;
  border: 1px solid transparent;
  background: transparent;
  color: var(--on-primary);
  cursor: pointer;
  border-radius: 6px;
  padding: 6px 12px;
}
.mode-btn:hover, .icon-btn:hover { background: rgba(255, 255, 255, 0.15); }
.mode-btn.active { background: linear-gradient(135deg, #f0d98a, #d4af37); color: #04302a; font-weight: 800; }
.mode-icon { margin-right: 6px; }

.header-actions { display: flex; gap: 4px; }
.menu-btn { display: none; }

#sidebar {
  position: fixed;
  top: var(--header-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 90;
}

#content-panel {
  margin-left: var(--sidebar-w);
  padding: calc(var(--header-h) + 24px) 32px 32px;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .menu-btn { display: inline-block; }
  #sidebar { transform: translateX(-100%); transition: transform 0.2s ease; }
  body.sidebar-open #sidebar { transform: translateX(0); }
  #content-panel { margin-left: 0; padding-left: 16px; padding-right: 16px; }
  .lecturer { font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .author-badge { padding: 0 8px; }
}

@media (max-width: 600px) {
  .mode-label { display: none; }
  .mode-icon { margin-right: 0; }
  #app-header { gap: 6px; padding: 0 8px; }
  :root { --header-h: 64px; }
  .logo { height: 34px; }
  #btn-print { display: none; }
  .author-badge { font-size: 0.6rem; padding: 0 6px; }
  .mode-btn, .icon-btn { padding: 6px 8px; }
  .course-title { font-size: 0.85rem; }
  .course-info { min-width: 0; }
  .by { display: none; }
  .lecturer { white-space: normal; line-height: 1.15; font-size: 0.65rem; }
}