:root {
  --bg-1: #071624;
  --bg-2: #0d2540;
  --panel: rgba(255,255,255,0.92);
  --panel-strong: rgba(255,255,255,0.98);
  --text: #0c1b2a;
  --muted: #4b5e74;
  --shadow: 0 14px 34px rgba(0,0,0,0.18);
  --yellow: #ffd63d;
  --blue: #2da5ff;
  --green: #37d46f;
  --purple: #8f44ff;
  --red: #ff5656;
  --teal: #18c6ad;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255,214,61,0.18), transparent 20%),
    radial-gradient(circle at 85% 20%, rgba(45,165,255,0.14), transparent 22%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2));
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; padding: 18px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.topbar-left, .topbar-right { display:flex; align-items:center; gap:10px; }
.topbar-note { color:#eef6ff; font-weight:700; letter-spacing:.02em; text-shadow:0 2px 8px rgba(0,0,0,.25); }
.home-button, .teacher-button {
  border:0; border-radius:16px; padding:12px 18px; font-weight:800; color:#fff; cursor:pointer;
  background:rgba(255,255,255,.14); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.home-button:hover, .teacher-button:hover, .teacher-button.teacher-active { background:rgba(255,255,255,.24); }
.teacher-button.teacher-active { box-shadow:0 0 0 3px rgba(255,214,61,.55); }
.sync-badge { padding:7px 11px; border-radius:999px; font-size:.78rem; font-weight:900; color:#fff; background:rgba(255,255,255,.16); }
.sync-badge.cloud { background:#0a9d78; }
.sync-badge.local { background:#c87916; }
.main-layout { display:grid; gap:16px; }
.card-surface { background:var(--panel); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; }
.brand-panel { padding:10px 18px 6px; text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,250,255,.95)); }
.brand-logo { max-width:min(760px,100%); max-height:190px; width:100%; height:auto; display:block; margin:0 auto; object-fit:contain; }
.brand-copy { margin:4px 0 2px; font-size:.98rem; font-weight:700; color:var(--muted); }
.subject-nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.subject-tab {
  border:0; border-radius:20px; padding:16px 10px; font-size:1rem; font-weight:900; cursor:pointer; color:#08203a;
  background:#ffffffd9; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.subject-tab:hover { transform:translateY(-2px); }
.subject-tab[data-subject="morning"] { border-bottom:7px solid var(--yellow); }
.subject-tab[data-subject="phonics"] { border-bottom:7px solid var(--blue); }
.subject-tab[data-subject="math"] { border-bottom:7px solid var(--green); }
.subject-tab[data-subject="win"] { border-bottom:7px solid var(--purple); }
.subject-tab[data-subject="reading-knowledge"] { border-bottom:7px solid var(--red); }
.subject-tab[data-subject="resources"] { border-bottom:7px solid var(--teal); }
.subject-tab.active[data-subject="morning"] { background:#fff0a8; }
.subject-tab.active[data-subject="phonics"] { background:#d9efff; }
.subject-tab.active[data-subject="math"] { background:#daf7e3; }
.subject-tab.active[data-subject="win"] { background:#eadcff; }
.subject-tab.active[data-subject="reading-knowledge"] { background:#ffe0e0; }
.subject-tab.active[data-subject="resources"] { background:#d5faf3; }
.subject-tab.active { transform:translateY(-3px) scale(1.02); box-shadow:0 18px 38px rgba(0,0,0,.28); }
.content-panel { padding:22px; background:linear-gradient(180deg,var(--panel-strong),rgba(246,249,255,.98)); }
.section-header { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:18px; border-bottom:2px solid rgba(12,27,42,.08); padding-bottom:14px; }
.eyebrow { margin:0 0 4px; text-transform:uppercase; font-size:.8rem; letter-spacing:.14em; font-weight:900; color:#526983; }
#sectionTitle { margin:0; font-size:clamp(2rem,3vw,3rem); line-height:1; }
.section-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.section-tagline { margin:0; text-align:right; font-size:1rem; font-style:italic; font-weight:800; color:#23486f; max-width:360px; }
.exit-teacher-button { border:0; border-radius:999px; padding:8px 12px; background:#17263a; color:#fff; font-weight:800; cursor:pointer; }
.teacher-notice { display:flex; align-items:center; gap:10px; margin:-4px 0 18px; padding:12px 14px; border-radius:16px; background:#fff4bd; border:2px solid #f1cd41; color:#513f00; }
.app-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.app-card {
  position:relative; text-decoration:none; color:inherit; background:#fff; border-radius:22px; padding:20px 16px; min-height:210px;
  border:2px solid rgba(10,34,58,.06); box-shadow:0 10px 24px rgba(10,34,58,.10); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,opacity .16s ease;
}
.app-card:hover,.app-card:focus-visible { transform:translateY(-4px); box-shadow:0 18px 30px rgba(10,34,58,.15); border-color:rgba(23,62,120,.18); outline:0; }
.app-card.hidden-tile { opacity:.48; filter:grayscale(.45); border-style:dashed; }
.app-icon { width:104px; height:104px; border-radius:50%; display:grid; place-items:center; font-size:2.35rem; font-weight:900; color:#fff; box-shadow:inset 0 -10px 18px rgba(0,0,0,.10); overflow:hidden; }
.app-icon.image-icon { width:156px; height:156px; border-radius:50%; background:transparent !important; box-shadow:none; padding:0; }
.app-icon-image { width:100%; height:100%; object-fit:contain; display:block; border-radius:0; }
.app-name { font-size:1.2rem; line-height:1.05; margin:0; }
.app-description { display:none; }
.edit-tile-button { position:absolute; top:10px; right:10px; width:38px; height:38px; border:0; border-radius:12px; background:#102a43; color:white; font-size:1.05rem; cursor:pointer; box-shadow:0 5px 12px rgba(0,0,0,.2); }
.visibility-chip { position:absolute; left:10px; top:10px; padding:5px 8px; border-radius:999px; font-size:.72rem; font-weight:900; background:#fff3bf; color:#6b4e00; }
.modal-dialog { border:0; padding:0; border-radius:24px; width:min(520px,calc(100vw - 28px)); box-shadow:0 30px 90px rgba(0,0,0,.45); }
.modal-dialog::backdrop { background:rgba(2,12,22,.72); backdrop-filter:blur(4px); }
.modal-card { position:relative; display:grid; gap:14px; padding:26px; background:#fff; }
.modal-card h2 { margin:0; font-size:1.8rem; }
.modal-eyebrow { margin:0; text-transform:uppercase; letter-spacing:.13em; font-size:.75rem; font-weight:900; color:#526983; }
.modal-help { margin:0; color:#526983; line-height:1.4; }
.modal-card label { display:grid; gap:7px; font-weight:800; color:#243b53; }
.modal-card input[type="text"], .modal-card input[type="url"], .modal-card input[type="password"] { width:100%; border:2px solid #d5dfeb; border-radius:14px; padding:12px 13px; color:#102a43; background:#fbfdff; }
.modal-card input:focus { outline:3px solid rgba(45,165,255,.22); border-color:#2da5ff; }
.toggle-row { grid-template-columns:auto 1fr!important; align-items:center; gap:10px!important; }
.toggle-row input { width:20px; height:20px; }
.modal-close { position:absolute; top:12px; right:14px; width:38px; height:38px; border:0; border-radius:50%; background:#eef3f8; color:#102a43; font-size:1.5rem; cursor:pointer; }
.reorder-panel { display:grid; gap:10px; padding:13px; border-radius:16px; background:#f3f7fb; border:2px solid #dde7f1; }
.reorder-panel > div:first-child { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#243b53; }
.order-position-label { font-size:.82rem; font-weight:900; color:#526983; }
.reorder-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.reorder-button { border:0; border-radius:12px; padding:10px 12px; background:#dce9f7; color:#173e78; font-weight:900; cursor:pointer; }
.reorder-button:hover:not(:disabled) { background:#c9def3; }
.reorder-button:disabled { opacity:.4; cursor:not-allowed; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
.primary-button,.secondary-button { border:0; border-radius:14px; padding:12px 16px; font-weight:900; cursor:pointer; }
.primary-button { background:#173e78; color:white; }
.secondary-button { background:#e9eff5; color:#243b53; }
.form-error { margin:0; padding:9px 11px; border-radius:10px; color:#8c1c13; background:#ffe3e0; font-weight:700; }
.toast { position:fixed; z-index:20; left:50%; bottom:26px; transform:translateX(-50%); padding:12px 18px; border-radius:999px; background:#102a43; color:white; font-weight:900; box-shadow:0 12px 30px rgba(0,0,0,.28); }
@media (max-width:1000px){ .subject-nav{grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .topbar{align-items:stretch;flex-direction:column}.topbar-left,.topbar-right{justify-content:space-between}.subject-nav{grid-template-columns:1fr 1fr}.section-header{flex-direction:column;align-items:start}.section-actions{align-items:start}.section-tagline{text-align:left;max-width:none} }
@media (max-width:480px){ .app-shell{padding:12px}.subject-nav{grid-template-columns:1fr}.app-grid{grid-template-columns:1fr}.content-panel{padding:18px}.topbar-note{font-size:.86rem} }


.teacher-notice { justify-content:space-between; }
.teacher-notice-copy { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.add-link-button { border:0; border-radius:999px; padding:9px 14px; background:#173e78; color:#fff; font-weight:900; cursor:pointer; white-space:nowrap; }
.add-link-button:hover { background:#0f315f; }
.modal-card input[type="file"] { width:100%; border:2px dashed #cbd8e6; border-radius:14px; padding:10px; background:#fbfdff; color:#243b53; }
.image-preview-wrap { display:flex; align-items:center; gap:14px; padding:12px; border-radius:16px; background:#f3f7fb; border:2px solid #dde7f1; }
.image-preview { width:92px; height:92px; object-fit:contain; display:block; }
.compact-button { padding:9px 12px; }
@media (max-width:720px){ .teacher-notice{align-items:flex-start;flex-direction:column}.add-link-button{width:100%}.image-preview-wrap{align-items:flex-start;flex-direction:column} }