:root {
  --chalk: #f8f4dc;
  --chalk-soft: rgba(248,244,220,.78);
  --board-dark: rgba(5, 46, 35, .50);
  --board-panel: rgba(3, 41, 31, .68);
  --board-line: rgba(255,255,255,.22);
  --primary: #ffd04a;
  --accent: #75e0b3;
  --orange: #ff9d3d;
  --sky: #78cfff;
  --danger: #ff8076;
  --shadow: 0 10px 28px rgba(0,0,0,.22);
  --body-font: 'Nunito', system-ui, sans-serif;
  --heading-font: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --board-opacity: 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f2eadf; font-family: var(--body-font); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
textarea { resize: vertical; }
.hidden { display: none !important; }

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: auto;
}

.scene {
  position: relative;
  width: min(100vw, calc(100vh * 1.7779));
  aspect-ratio: 1672 / 941;
  background: url('./assets/classroom-bg.png') center / 100% 100% no-repeat;
  min-width: 720px;
  min-height: 405px;
}

.board-shell {
  position: absolute;
  left: 24.45%;
  top: 10.9%;
  width: 58.15%;
  height: 41.6%;
  color: var(--chalk);
  overflow: hidden;
  border-radius: 8px;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  opacity: var(--board-opacity);
}

.view { width: 100%; height: 100%; padding: 2.1% 2.4% 2%; }

#loginView, #registerView {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 4%;
}

.brand-kicker {
  color: var(--primary);
  font-size: clamp(10px, .85vw, 16px);
  font-weight: 900;
  letter-spacing: .15em;
}

.brand h1, .board-header h1, .admin-panel h2, .admin-panel h3, .menu-tile .tile-title {
  font-family: var(--heading-font);
}
.brand h1, .board-header h1 { margin: .15em 0 .12em; line-height: .95; font-weight: 800; }
.brand h1 { font-size: clamp(25px, 2.35vw, 46px); }
.brand p { margin: .5em 0 0; color: var(--chalk-soft); font-size: clamp(11px, .9vw, 17px); max-width: 36ch; }
.compact-brand h1 { font-size: clamp(22px, 2vw, 38px); }

.login-card {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px;
  padding: 5%;
  box-shadow: var(--shadow);
  backdrop-filter: blur(3px);
}
.login-card label { display: block; margin-bottom: 3%; font-size: clamp(10px, .78vw, 15px); font-weight: 800; }
.login-card input, .admin-panel input, .admin-panel select, .admin-panel textarea {
  width: 100%;
  margin-top: 1.8%;
  padding: .65em .8em;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.94);
  color: #143b31;
  outline: none;
}
.login-card input:focus, .admin-panel input:focus, .admin-panel select:focus, .admin-panel textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.button-row { display: flex; gap: .5em; }
.button-row > * { flex: 1; }
.register-cta { width: 100%; margin-top: .5em; }

.btn {
  border: 0;
  border-radius: 999px;
  padding: .55em .9em;
  font-weight: 900;
  line-height: 1;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
  box-shadow: 0 5px 12px rgba(0,0,0,.13);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn:active { transform: translateY(0); }
.btn-primary { width: 100%; color: #173c31; background: linear-gradient(color-mix(in srgb, var(--primary) 68%, white), var(--primary)); padding: .8em 1em; }
.btn-accent { color: #143b31; background: var(--accent); }
.btn-ghost { color: var(--chalk); background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); }
.btn-danger { color: #4b1b17; background: #ffaaa3; }
.btn-small { font-size: .78em; padding: .48em .72em; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.form-message { min-height: 1em; margin: .6em 0 0; color: #ffb7ae; font-weight: 700; font-size: .8em; }

html[data-button-style="flat"] .btn { box-shadow: none; border-radius: 9px; }
html[data-button-style="chalk"] .btn { box-shadow: none; border: 2px dashed rgba(255,255,255,.55); background: transparent; color: var(--chalk); }
html[data-button-style="pill"] .btn { border-radius: 999px; box-shadow: 0 3px 8px rgba(0,0,0,.12); }

#portalView { display: flex; flex-direction: column; }
.board-header { display: flex; align-items: center; justify-content: space-between; gap: 1%; flex: 0 0 auto; }
.board-header h1 { font-size: clamp(18px, 1.65vw, 32px); }
.header-actions { display: flex; gap: .45em; align-items: center; }
.header-actions .btn { font-size: clamp(9px, .72vw, 14px); }
.breadcrumb { color: var(--chalk-soft); font-size: clamp(9px, .66vw, 13px); margin: .3% 0 1%; min-height: 1.1em; }
.content-area { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .2% .4% .6% 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.8%;
  align-content: start;
}
.menu-tile {
  position: relative;
  min-height: clamp(54px, 5.7vw, 104px);
  padding: 8% 7%;
  color: #173e33;
  border: 2px solid rgba(255,255,255,.50);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(236,255,248,.86));
  box-shadow: 0 7px 15px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.9);
  text-align: left;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.menu-tile:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 9px 18px rgba(0,0,0,.20); }
.menu-tile.locked { opacity: .55; filter: saturate(.65); }
.tile-icon { display: block; font-size: clamp(15px, 1.5vw, 28px); margin-bottom: 3%; }
.tile-title { display: block; font-weight: 800; font-size: clamp(11px, .95vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-subtitle { display: block; margin-top: 2%; color: #45695f; font-size: clamp(8px, .63vw, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lock-badge { position: absolute; top: 8%; right: 8%; font-size: .8em; }

html[data-menu-style="large"] .tile-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
html[data-menu-style="large"] .menu-tile { min-height: clamp(72px, 7.2vw, 130px); }
html[data-menu-style="compact"] .tile-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1%; }
html[data-menu-style="compact"] .menu-tile { min-height: clamp(45px, 4.8vw, 82px); padding: 5%; }

.activity-list, .tool-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2%; }
.activity-card, .tool-card {
  min-height: 72px;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--board-line);
  border-radius: 14px;
  padding: 4%;
  display: grid;
  gap: .3em;
}
.activity-card h3, .tool-card h3 { margin: 0; font-size: clamp(11px, .9vw, 17px); font-family: var(--heading-font); }
.activity-card p, .tool-card p { margin: 0; color: var(--chalk-soft); font-size: clamp(8px, .62vw, 12px); }
.activity-card .btn, .tool-card .btn { justify-self: start; margin-top: .25em; background: var(--primary); color: #173c31; font-size: .78em; }
.empty-state { display: grid; place-items: center; height: 70%; text-align: center; color: var(--chalk-soft); }
.empty-state strong { color: var(--chalk); }

.center-card { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--chalk); }
.spinner { width: 28px; height: 28px; border: 4px solid rgba(255,255,255,.22); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Admin */
.admin-wrap { display: grid; grid-template-columns: .72fr 1.28fr; gap: 1.7%; height: 100%; min-height: 0; }
.admin-sidebar, .admin-panel { background: rgba(0,0,0,.13); border: 1px solid var(--board-line); border-radius: 14px; min-height: 0; }
.admin-sidebar { padding: 4%; overflow: auto; }
.admin-panel { padding: 2.2%; overflow: auto; }
.admin-tabs { display: grid; gap: .38em; }
.admin-tabs button { width: 100%; text-align: left; }
.admin-tabs .active { background: var(--primary); color: #173c31; }
.admin-panel h2 { margin: 0 0 .55em; font-size: clamp(14px, 1.15vw, 22px); }
.admin-panel h3 { margin: .2em 0 .45em; font-size: clamp(11px, .85vw, 17px); }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55em; }
.admin-form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.admin-form-grid .wide { grid-column: 1 / -1; }
.admin-panel label { font-size: .72em; font-weight: 800; }
.admin-panel input, .admin-panel select, .admin-panel textarea { font-size: .9em; }
.user-list, .manage-list { display: grid; gap: .35em; }
.user-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .55em .65em; border-radius: 10px; border: 1px solid var(--board-line); background: rgba(255,255,255,.08); color: var(--chalk); text-align: left; }
.user-row.active { background: color-mix(in srgb, var(--primary) 20%, transparent); border-color: color-mix(in srgb, var(--primary) 70%, transparent); }
.user-row small { opacity: .75; }
.permission-group { margin: .6em 0; padding: .6em; border-radius: 12px; border: 1px solid var(--board-line); background: rgba(255,255,255,.05); }
.permission-grade { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-bottom: .4em; }
.permission-units { display: flex; flex-wrap: wrap; gap: .35em .6em; }
.permission-units label { display: inline-flex; align-items: center; gap: .25em; font-size: .72em; }
.admin-note { color: var(--chalk-soft); font-size: .72em; line-height: 1.35; }
.soft { border:0; border-top:1px solid rgba(255,255,255,.18); margin:.8em 0; }
.toast { position: absolute; right: 2%; bottom: 2%; max-width: 45%; padding: .65em .85em; border-radius: 12px; background: rgba(0,0,0,.77); color: white; box-shadow: var(--shadow); z-index: 10; font-size: .8em; }

.request-card, .manage-card, .settings-card, .dashboard-card, .design-card, .package-card, .audit-card {
  border: 1px solid var(--board-line);
  background: rgba(255,255,255,.07);
  border-radius: 12px;
  padding: .65em;
  margin-bottom: .5em;
}
.request-card header, .manage-card, .structure-row, .toggle-line, .package-head { display:flex; justify-content:space-between; gap:.6em; align-items:center; }
.request-actions, .actions, .structure-actions { display:flex; flex-wrap:wrap; gap:.35em; }
.status-pill { display:inline-flex; border-radius:999px; padding:.25em .55em; font-size:.68em; font-weight:900; }
.status-pill.pending { background:#ffd98a; color:#4c3700; }
.status-pill.active { background:#9ef0c9; color:#123b2c; }
.status-pill.owner { background:#d6c2ff; color:#2e155e; }
.meta { font-size:.68em; color:var(--chalk-soft); }
.structure-tree { display:grid; gap:.45em; }
.structure-year { border:1px solid var(--board-line); border-radius:12px; padding:.55em; background:rgba(255,255,255,.05); }
.structure-grade { margin:.4em 0 0 1em; border-left:2px solid rgba(255,255,255,.15); padding-left:.6em; }
.structure-unit { margin:.3em 0 0 1em; display:flex; justify-content:space-between; align-items:center; gap:.5em; padding:.35em .45em; border-radius:8px; background:rgba(255,255,255,.05); }

.switch { position:relative; width:48px; height:26px; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; border-radius:999px; background:#777; transition:.2s; }
.slider:before { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:white; transition:.2s; }
.switch input:checked + .slider { background:var(--accent); }
.switch input:checked + .slider:before { transform:translateX(22px); }

.dashboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55em; }
.dashboard-card strong { display:block; font-size:1.5em; font-family:var(--heading-font); }
.dashboard-card span { font-size:.72em; color:var(--chalk-soft); }

.design-preview { border:1px solid var(--board-line); border-radius:14px; padding:.75em; background:rgba(0,0,0,.15); margin:.6em 0; }
.design-preview .preview-title { font-family:var(--heading-font); font-size:1.35em; margin:0 0 .2em; }
.color-row { display:grid; grid-template-columns:1fr 1fr; gap:.55em; }
.color-row input[type="color"] { min-height:40px; padding:.25em; }
.range-line { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.5em; }

.package-list { display:grid; gap:.45em; }
.package-card .package-units { font-size:.68em; color:var(--chalk-soft); margin-top:.25em; }

.audit-list { display:grid; gap:.35em; }
.audit-card { margin:0; }
.audit-card .audit-time { font-size:.65em; color:var(--chalk-soft); }

.role-badge { display:inline-flex; padding:.22em .5em; border-radius:999px; font-size:.65em; font-weight:900; text-transform:uppercase; letter-spacing:.05em; background:rgba(255,255,255,.15); }
.role-badge.owner { background:#d6c2ff; color:#2e155e; }
.role-badge.admin { background:#9fe0ff; color:#12354b; }
.role-badge.user { background:#e9efe9; color:#29422f; }

/* Theme presets alter the chalkboard UI while preserving the classroom image. */
html[data-theme="classic"] { --chalk:#f8f4dc; --chalk-soft:rgba(248,244,220,.78); --board-line:rgba(255,255,255,.22); }
html[data-theme="blue"] { --chalk:#f4fbff; --chalk-soft:rgba(244,251,255,.78); --accent:#7de0ff; --primary:#ffdb65; }
html[data-theme="dark"] { --chalk:#f5f5f5; --chalk-soft:rgba(245,245,245,.70); --board-line:rgba(255,255,255,.18); }
html[data-theme="colorful"] { --accent:#86efac; --primary:#fde047; }

@media (max-width: 900px) {
  body { place-items: start center; }
  .scene { min-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* v1.4 — access reliability, groups and community */
.full-access-card {
  margin: .65em 0;
  padding: .8em;
  border-radius: 14px;
  border: 1px solid rgba(117,224,179,.55);
  background: rgba(117,224,179,.12);
}
.full-access-card strong { color: var(--mint); }
.full-access-card p { margin: .35em 0 0; color: var(--chalk-soft); font-size: .78em; line-height: 1.4; }
.group-summary { margin: .6em 0; padding: .6em; border-radius: 12px; border: 1px solid var(--board-line); background: rgba(255,255,255,.05); }
.group-member-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .35em .6em; max-height: 180px; overflow: auto; padding-right: .3em; }
.group-member-grid label { display: flex; align-items: center; gap: .35em; padding: .35em .45em; border-radius: 9px; background: rgba(255,255,255,.06); }
.group-member-grid small { opacity: .7; margin-left: auto; }

.community-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5%; }
.community-category {
  min-height: 90px; border:1px solid var(--board-line); border-radius:16px;
  background:rgba(255,255,255,.10); color:var(--chalk); padding:4%; text-align:left;
  display:grid; gap:.3em; box-shadow:var(--shadow);
}
.community-category:hover { transform:translateY(-1px); background:rgba(255,255,255,.14); }
.community-category strong { font-size:1.02em; }
.community-category > span:not(.community-icon), .community-category small { color:var(--chalk-soft); font-size:.72em; line-height:1.35; }
.community-icon { font-size:1.55em; }
.community-compose { margin-bottom:.7em; padding:.7em; border-radius:14px; border:1px solid var(--board-line); background:rgba(0,0,0,.12); display:grid; gap:.45em; }
.community-compose h3 { margin:0; }
.community-compose input, .community-compose textarea, .community-compose select { width:100%; padding:.65em .75em; border-radius:10px; border:1px solid rgba(255,255,255,.30); background:rgba(255,255,255,.95); color:#143b31; font:inherit; }
.community-topic-list, .forum-post-list { display:grid; gap:.5em; }
.community-topic, .forum-post, .forum-topic-detail { border:1px solid var(--board-line); border-radius:13px; background:rgba(255,255,255,.07); padding:.65em; }
.community-topic { display:flex; justify-content:space-between; gap:.7em; align-items:flex-start; }
.community-topic.pinned { border-color:rgba(255,208,74,.65); background:rgba(255,208,74,.08); }
.community-topic p, .forum-topic-detail p, .forum-post p { margin:.35em 0 0; color:var(--chalk-soft); font-size:.78em; line-height:1.4; }
.topic-main { min-width:0; flex:1; }
.meta { color:var(--chalk-soft); font-size:.68em; line-height:1.3; }
.forum-post { display:flex; justify-content:space-between; gap:.6em; }
.forum-topic-detail h2 { margin:.05em 0 .25em; font-size:1.1em; }

@media (max-width: 1050px) {
  .community-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .group-member-grid { grid-template-columns:1fr; }
}


/* v1.5 — performance/reliability UI */
.admin-search { width:100%; margin:.25em 0; padding:.62em .72em; border-radius:10px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.95); color:#143b31; }
.pager { display:flex; align-items:center; justify-content:center; gap:.55em; margin:.65em 0; color:var(--chalk-soft); font-size:.78em; }
.pager button:disabled { opacity:.35; cursor:not-allowed; transform:none; }
.health-banner { padding:.7em .8em; border-radius:12px; margin:.25em 0 .75em; border:1px solid var(--board-line); font-weight:900; }
.health-banner.good { background:rgba(117,224,179,.14); border-color:rgba(117,224,179,.55); }
.health-banner.warn { background:rgba(255,208,74,.14); border-color:rgba(255,208,74,.55); }
.health-banner.bad { background:rgba(255,128,118,.14); border-color:rgba(255,128,118,.55); }
.health-grid .dashboard-card.good { border-color:rgba(117,224,179,.55); }
.health-grid .dashboard-card.warn { border-color:rgba(255,208,74,.55); }
.health-grid .dashboard-card.bad { border-color:rgba(255,128,118,.55); }
.health-details { margin:.65em 0; padding:.65em; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--board-line); }
.health-details p { margin:.25em 0; font-size:.76em; }

/* v1.6 — trusted device security + resource library */
.device-card { max-width: 560px; }
.security-icon { font-size: 2.2rem; text-align:center; margin-bottom:.25rem; }
.device-message { margin:.1rem 0 .8rem; color:var(--chalk-soft); line-height:1.45; text-align:center; }
.security-admin-card { margin:.65em 0; padding:.75em; border-radius:14px; border:1px solid rgba(255,208,74,.45); background:rgba(255,208,74,.08); }
.checkbox-card { display:flex !important; align-items:center; gap:.5em; padding:.6em .7em; border:1px solid var(--board-line); border-radius:10px; background:rgba(255,255,255,.06); }
.checkbox-card input { width:auto !important; margin:0; }
.section-heading { margin:.15em 0 .55em; font-size:1.05em; }
.resource-heading { margin-top:1.1em; }
.resource-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65em; }
.resource-card { display:flex; gap:.75em; align-items:flex-start; padding:.8em; border:1px solid var(--board-line); border-radius:14px; background:rgba(255,255,255,.08); box-shadow:var(--shadow); }
.resource-icon { font-size:1.8em; line-height:1; }
.resource-body { min-width:0; flex:1; }
.resource-body h3 { margin:0 0 .25em; font-size:1em; }
.resource-body p { margin:0 0 .55em; color:var(--chalk-soft); font-size:.76em; line-height:1.35; }
.resource-actions { display:flex; gap:.4em; flex-wrap:wrap; }
@media (max-width:850px){ .resource-list{grid-template-columns:1fr;} }