:root {
  /* BYU–Hawaii brand colors: red, white, gold, gray, and turquoise accents. */
  --ink: #141414;
  --muted: #748087;
  --paper: #ffffff;
  --surface: #ffffff;
  --line: #d0d3d4;
  --navy: #ba0c2f;
  --blue: #006c5b;
  --gold: #c69214;
  --coral: #d14124;
  --shadow: 0 18px 50px rgba(83, 86, 90, 0.14);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 264px; flex: 0 0 264px; min-height: 100vh; display: flex; flex-direction: column; padding: 30px 18px 22px; background: var(--navy); color: #eaf4f1; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 12px 40px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px 12px 12px 3px; background: var(--gold); color: #ffffff; font: 700 12px "Space Grotesk", sans-serif; letter-spacing: -0.05em; }
.brand-name { margin: 0; font: 700 18px "Space Grotesk", sans-serif; letter-spacing: -0.03em; }
.brand-subtitle { margin: 2px 0 0; color: #a6c0c3; font-size: 11px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 10px; padding: 11px 12px; background: transparent; color: #aec3c5; font-size: 13px; text-align: left; transition: 0.2s ease; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,0.1); color: #fff; }
.nav-icon { width: 17px; color: var(--gold); font-size: 17px; text-align: center; }
.nav-count { margin-left: auto; color: #88a6a9; font-size: 11px; }
.sidebar-section { margin-top: 35px; }
.section-label-row { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 10px; }
.section-label, .eyebrow { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.section-label { color: #719499; }
.tiny-button { border: 0; background: transparent; color: #9bb5b5; font-size: 21px; line-height: 1; }
.tiny-button:hover { color: var(--gold); }
.class-list { display: grid; gap: 2px; }
.class-item { color: #aec3c5; }
.class-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-color, var(--blue)); }
.sidebar-bottom { margin-top: auto; }
.tip-card { display: flex; gap: 10px; margin: 24px 5px 18px; padding: 14px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(255,255,255,0.05); }
.tip-icon { color: var(--gold); }
.tip-card strong { display: block; font-size: 12px; }
.tip-card p { margin: 4px 0 0; color: #99b4b5; font-size: 10px; line-height: 1.45; }

.main-content { width: calc(100% - 264px); max-width: 1480px; padding: 0 clamp(26px, 5vw, 82px) 26px; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.breadcrumb-slash { color: #b7c0be; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.icon-button, .mobile-menu { border: 0; background: transparent; color: var(--muted); font-size: 24px; }
.mobile-menu { display: none; }
.hero { min-height: 280px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 44px 0 37px; }
.eyebrow { color: var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 15px 0 13px; font: 600 clamp(38px, 5vw, 66px)/0.99 "Space Grotesk", sans-serif; letter-spacing: -0.07em; }
h1 span { color: var(--coral); }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.search-box { min-width: 260px; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.search-box input::placeholder { color: #a8b0ae; }
kbd { border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; color: #a0aaa7; font-size: 10px; white-space: nowrap; }
.toolbar-actions { display: flex; align-items: center; gap: 11px; }
.select-wrap select { appearance: none; border: 1px solid var(--line); border-radius: 8px; padding: 10px 30px 10px 12px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23748087' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center; color: var(--muted); font-size: 12px; outline: 0; }
.add-button, .outline-button { border-radius: 8px; padding: 10px 15px; font-size: 12px; font-weight: 700; transition: 0.2s ease; }
.add-button { border: 1px solid var(--navy); background: var(--navy); color: #fff; }
.add-button:hover { background: #9e1b34; transform: translateY(-1px); }
.add-button span { margin-right: 4px; color: var(--gold); font-size: 16px; vertical-align: -1px; }
.outline-button { border: 1px solid var(--line); background: var(--surface); color: var(--navy); }
.outline-button:hover { border-color: var(--blue); }
.content-section { padding-top: 37px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }
h2 { margin: 7px 0 0; font: 600 25px "Space Grotesk", sans-serif; letter-spacing: -0.05em; }
.resource-total { margin: 0; color: var(--muted); font-size: 12px; }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 15px; }
.resource-card { min-height: 196px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 20px rgba(24,59,77,0.025); transition: 0.2s ease; }
.resource-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.resource-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: var(--icon-bg, #e5f1ef); color: var(--icon-color, var(--blue)); font-size: 17px; }
.favorite-button { border: 0; background: transparent; color: #bec7c4; font-size: 22px; line-height: 1; }
.favorite-button.active { color: var(--coral); }
.resource-card h3 { margin: 19px 0 7px; font: 600 16px/1.2 "Space Grotesk", sans-serif; letter-spacing: -0.03em; }
.resource-card .description { min-height: 35px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 18px; color: var(--muted); font-size: 10px; }
.class-tag { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; border-radius: 5px; padding: 4px 7px; background: #f0f3ef; color: var(--navy); font-weight: 700; }
.resource-link { color: var(--blue); text-decoration: none; font-weight: 700; }
.resource-link:hover { text-decoration: underline; }
.empty-state { padding: 55px 20px; border: 1px dashed #cbd6d2; border-radius: var(--radius); text-align: center; }
.empty-icon { margin-bottom: 12px; color: var(--gold); font-size: 28px; }
.empty-state h3 { margin-bottom: 7px; font: 600 18px "Space Grotesk", sans-serif; }
.empty-state p { margin-bottom: 18px; color: var(--muted); font-size: 12px; }
.footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 66px; padding-top: 18px; border-top: 1px solid var(--line); color: #a1aaa7; font-size: 10px; }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(13,31,39,0.55); backdrop-filter: blur(5px); }
.modal { position: relative; width: min(100%, 500px); max-height: 90vh; overflow-y: auto; padding: 32px; border-radius: 20px; background: var(--surface); box-shadow: 0 30px 90px rgba(0,0,0,0.2); }
.modal h2 { font-size: 30px; }
.modal-copy { margin: 10px 0 24px; color: var(--muted); font-size: 13px; }
.modal-close { position: absolute; top: 17px; right: 20px; border: 0; background: transparent; color: var(--muted); font-size: 26px; }
.modal form { display: grid; gap: 15px; }
.modal label { display: grid; gap: 7px; color: var(--navy); font-size: 11px; font-weight: 700; }
.modal input, .modal select, .modal textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; outline: 0; background: var(--paper); color: var(--ink); font-size: 12px; resize: vertical; }
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(95,158,170,0.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 6px; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; visibility: hidden; opacity: 0; transform: translateY(8px); padding: 12px 16px; border-radius: 9px; background: var(--navy); color: #fff; font-size: 12px; transition: 0.25s ease; }
.toast.show { visibility: visible; opacity: 1; transform: translateY(0); }

/* BYU–Hawaii directory cards */
.brand-mark { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: transparent; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.hero-copy { max-width: 560px; }
.resource-grid { grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); }
.resource-card { min-height: 270px; }
.resource-card h3 { margin-top: 16px; }
.resource-card .description { min-height: 0; }
.card-details { display: grid; gap: 5px; margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.info-line { display: flex; align-items: flex-start; gap: 7px; }
.info-line span:first-child { flex: 0 0 14px; color: var(--blue); font-size: 12px; text-align: center; }
.info-line a { color: inherit; text-decoration: none; }
.info-line a:hover { color: var(--blue); text-decoration: underline; }
.resource-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 17px; }
.resource-link { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #d9e5e1; border-radius: 6px; padding: 5px 7px; background: #f7faf8; font-size: 10px; }
.resource-link:hover { background: #edf5f1; text-decoration: none; }
.resource-link.emergency { border-color: #f2c2b9; background: #fff5f2; color: #c45e51; }
.resource-card .card-meta { margin-top: 14px; padding-top: 0; }
.optional { color: var(--muted); font-size: 10px; font-weight: 400; }
body.dark .resource-link { border-color: #39545a; background: #253f45; }
body.dark .resource-link:hover { background: #2d4c52; }
body.dark .resource-link.emergency { border-color: #754b45; background: #452f2d; }

body.dark { --ink: #f7f7f7; --muted: #d0d3d4; --paper: #24171b; --surface: #342025; --line: #5a3b41; --shadow: 0 18px 50px rgba(0,0,0,0.24); }
body.dark .class-tag { background: #29454b; color: #dcebe8; }
body.dark .modal input, body.dark .modal select, body.dark .modal textarea { background: #15252b; }

@media (max-width: 820px) {
  .sidebar { position: fixed; z-index: 5; left: -280px; transition: left 0.25s ease; box-shadow: 15px 0 35px rgba(0,0,0,0.15); }
  .sidebar.open { left: 0; }
  .main-content { width: 100%; padding: 0 22px 22px; }
  .mobile-menu { display: block; margin-right: 12px; }
  .topbar { justify-content: flex-start; }
  .topbar-actions { margin-left: auto; }
  .hero-shape { width: 160px; flex-basis: 160px; transform: scale(0.8); transform-origin: right center; }
}
@media (max-width: 570px) {
  .hero { min-height: 0; padding: 38px 0 32px; }
  .hero-shape { display: none; }
  h1 { font-size: 42px; }
  .toolbar { align-items: stretch; flex-direction: column; padding: 15px 0; }
  .toolbar-actions { justify-content: space-between; }
  .search-box { min-width: 0; }
  .section-heading, .footer { align-items: flex-start; flex-direction: column; }
  .resource-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .modal { padding: 26px 20px; }
}