/* EduCoreAI – front-end styles */
:root {
  --bg: #FBFAF8; --surface: #FFFFFF; --line: #ECEAE6; --line-2: #F3F1ED;
  --text: #1E1B18; --text-2: #5C5854; --muted: #8B8680;
  --coral: #F2634A; --coral-2: #FDECE8; --amber: #F7A94A;
  --green: #22A06B; --green-2: #E6F6EE; --blue: #3B82F6; --blue-2: #E8F0FE;
  --purple: #7C5CE6; --purple-2: #EEE9FC; --cyan: #0EA5C9; --cyan-2: #E3F6FB; --orange-2: #FFF1E0;
  --shadow: 0 1px 2px rgba(20,16,12,.04), 0 8px 24px rgba(20,16,12,.06);
  --radius: 16px; --sidebar: 226px; --panel: 400px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
kbd { font: 12px/1 ui-monospace, monospace; color: var(--text-2); background: var(--line-2); border-radius: 6px; padding: 5px 8px; }

.app { display: grid; grid-template-columns: var(--sidebar) 1fr var(--panel); height: 100vh; transition: grid-template-columns .25s ease; }
.app.panel-collapsed { grid-template-columns: var(--sidebar) 1fr 56px; }

/* ───────── sidebar ───────── */
.sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.brand b { color: var(--coral); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--text-2); font-weight: 500; }
.nav a:hover { background: var(--line-2); }
.nav a.active { background: var(--coral-2); color: var(--text); font-weight: 600; }
.nav a.active .ic { color: var(--coral); }
.nav hr { border: 0; border-top: 1px solid var(--line); margin: 14px 8px; }
.user { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 8px 6px 8px 8px; border: 1px solid transparent; background: none; border-radius: 14px; cursor: pointer; text-align: left; width: 100%; transition: background .12s, border-color .12s; }
.user:hover, .user.open { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.avatar { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, var(--coral), var(--amber)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .02em; flex: none; }
.user .avatar.principal { background: linear-gradient(135deg, var(--purple), var(--blue)); }
.user .avatar.parent, .user .avatar.student { background: linear-gradient(135deg, var(--green), var(--cyan)); }
.user .avatar.office { background: linear-gradient(135deg, #E58A1F, var(--amber)); }
.user-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.user-text b { font-size: 13.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-more { color: var(--muted); font-size: 16px; line-height: 1; flex: none; }
.user:hover .user-more { color: var(--text); }
.menu .who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .who b { display: block; font-size: 14px; } .menu .who small { color: var(--muted); font-size: 12px; }
.menu .who .avatar { width: 34px; height: 34px; font-size: 13px; }
.role-menu { position: absolute; left: 14px; bottom: 76px; width: 198px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; z-index: 20; }
.role-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 10px; cursor: pointer; text-align: left; }
.role-menu button:hover, .role-menu button.active { background: var(--coral-2); }
.role-menu small { display: block; color: var(--muted); font-size: 12px; }

/* icons (inline SVG masks) */
.ic { width: 20px; height: 20px; display: inline-block; background: currentColor; flex: none; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-6h-6v6H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.ic-students { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Ccircle cx='17' cy='10' r='2.5'/%3E%3Cpath d='M2.5 20c.5-4 3-6 6.5-6s6 2 6.5 6M15 20c.2-2.5 1.5-4 3.5-4s3.2 1.5 3 4'/%3E%3C/svg%3E"); }
.ic-classes { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7l10-4 10 4-10 4z'/%3E%3Cpath d='M6 9.5V15c0 1.5 3 3 6 3s6-1.5 6-3V9.5M22 7v6'/%3E%3C/svg%3E"); }
.ic-teaching { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.ic-assess { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-8M22 20H2'/%3E%3C/svg%3E"); }
.ic-comms { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h3l8 4V5L7 9H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M18 9a4 4 0 0 1 0 6M7 15l1 5h2'/%3E%3C/svg%3E"); }
.ic-calendar { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ic-reports { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9h-9z'/%3E%3Cpath d='M15 3.5A9 9 0 0 1 20.5 9H15z'/%3E%3C/svg%3E"); }
.ic-templates { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E"); }
.ic-settings { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.ic-chev { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); width: 16px; height: 16px; color: var(--muted); }
.ic-search { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); width: 24px; height: 24px; color: var(--text-2); }
.ic-arrow { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.ic-doc { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E"); width: 18px; height: 18px; color: var(--text-2); vertical-align: -4px; }
.ic-copy { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); width: 15px; height: 15px; vertical-align: -2px; }
.ic-collapse { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3Cpath d='M18 4v16'/%3E%3C/svg%3E"); width: 20px; height: 20px; }
.ic-sidebar { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16'/%3E%3C/svg%3E"); width: 20px; height: 20px; }
.ic-quiz { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.ic-lesson { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h6a3 3 0 0 1 3 3v12a2 2 0 0 0-2-2H2zM22 5h-6a3 3 0 0 0-3 3v12a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E"); }
.ic-notice { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h3l8 4V5L7 9H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M18 9a4 4 0 0 1 0 6M7 15l1 5h2'/%3E%3C/svg%3E"); }
.ic-remark { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.5-4.5 3.5-7 8-7s7.5 2.5 8 7'/%3E%3C/svg%3E"); }
.ic-rubric { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 20v-6M12 20V4M19 20v-10'/%3E%3C/svg%3E"); }
.ic-paper { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.ic-chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.6L18 9l-4.2 1.6L12 15l-1.8-4.4L6 9l4.2-1.4zM5 16l.9 2.1L8 19l-2.1.9L5 22l-.9-2.1L2 19l2.1-.9zM19 14l.8 1.7 1.7.8-1.7.8L19 19l-.8-1.7-1.7-.8 1.7-.8z'/%3E%3C/svg%3E"); }

/* ───────── main ───────── */
/* the main column scrolls on its own; the home page is sized to fit without a scrollbar */
.main { padding: 18px 36px 0; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; }
.page { flex: 1; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; }
/* home screen never scrolls: spacing and the illustration scale with the viewport height */
#page-home { min-height: 0; overflow: hidden; }
#page-home .foot { align-self: end; min-height: 0; }
.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 18px; color: var(--text-2); font-size: 13px; }
.topbar .tagline { border-left: 1px solid var(--line); padding-left: 18px; max-width: 120px; line-height: 1.3; }
.topbar em { color: var(--amber); font-style: normal; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: #C9C4BE; }
.status.online .dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-2); }
.status.offline .dot { background: var(--coral); box-shadow: 0 0 0 3px var(--coral-2); }

.hero { text-align: center; margin: clamp(4px, 1.4vh, 14px) 0 clamp(4px, 1vh, 10px); }
.kicker { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-2); margin: 0 0 clamp(4px, 1.2vh, 12px); }
.hero h1 { font-size: clamp(38px, 4.6vw, 60px); font-weight: 900; letter-spacing: -.035em; margin: 0; line-height: 1.05; }
.hero h1 b { color: var(--coral); }
.hero .sub { font-size: clamp(16px, 2.1vh, 20px); color: var(--text-2); margin: clamp(4px, 1vh, 10px) 0 0; }

.search { display: flex; align-items: center; gap: 14px; margin: clamp(8px, 1.8vh, 18px) auto clamp(10px, 2.2vh, 22px); max-width: 860px; width: 100%; justify-self: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(9px, 1.4vh, 13px) 22px; box-shadow: var(--shadow); }
.search input { flex: 1; border: 0; outline: 0; background: none; font-size: 18px; }
.search input::placeholder { color: var(--muted); }
.search .spark { color: var(--coral); font-size: 20px; border-left: 1px solid var(--line); padding-left: 16px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.8vh, 16px); max-width: 960px; width: 100%; justify-self: center; }
.card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: clamp(12px, 2vh, 18px) 24px; cursor: pointer; text-align: left; position: relative; transition: transform .15s, box-shadow .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card.active { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-2); }
.card .tile { width: clamp(44px, 6vh, 56px); height: clamp(44px, 6vh, 56px); border-radius: 14px; display: grid; place-items: center; margin-bottom: clamp(8px, 1.7vh, 16px); }
.card .tile .ic { width: 28px; height: 28px; }
.card .go { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; background: var(--line-2); display: grid; place-items: center; color: var(--text-2); }
.card.active .go { background: var(--coral-2); color: var(--coral); }
.card h3 { margin: 0 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--text-2); font-size: 15px; }
.tile.coral { background: var(--coral-2); color: var(--coral); } .tile.green { background: var(--green-2); color: var(--green); }
.tile.orange { background: var(--orange-2); color: #E58A1F; } .tile.blue { background: var(--blue-2); color: var(--blue); }
.tile.purple { background: var(--purple-2); color: var(--purple); } .tile.cyan { background: var(--cyan-2); color: var(--cyan); }

/* footer pinned to the bottom of the viewport: quote sits on the illustration's ground line */
.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 8px auto 0; padding-top: 6px; max-width: 960px; width: 100%; justify-self: center; position: relative; }
.foot p { font-style: italic; color: var(--text-2); font-size: 14px; margin: 0 0 clamp(10px, 2.4vh, 22px); }
.foot .leaf { color: var(--coral); font-style: normal; margin-right: 6px; }
.foot .school { display: block; height: clamp(76px, 15vh, 140px); width: auto; max-width: 50%; margin-bottom: -3px; }
.foot .hand { position: absolute; right: 10px; bottom: clamp(48px, 9vh, 80px); font-family: "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive; font-size: 15px; line-height: 1.15; color: var(--coral); transform: rotate(-8deg); text-align: center; width: 120px; }
.foot .hand b { color: var(--amber); font-weight: 400; }

/* task pages reuse the home layout via JS; page headings */
.page h2 { margin: 26px 0 4px; font-size: 26px; letter-spacing: -.02em; }

/* chat */
.thread-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
/* chat page fills the column: header, scrolling thread, composer pinned at the bottom */
#page-chat { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: minmax(0, 1fr); gap: 22px; flex: 1; min-height: 0; padding-bottom: 20px; }
.chat-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding-top: 20px; border-right: 1px solid var(--line); padding-right: 16px; }
.chat-list .newchat { width: 100%; }
.chat-list input { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--surface); outline: 0; font-size: 13.5px; }
.chat-items { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-items .sep { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 10px 8px 4px; }
.chat-items button { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--text-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-items button:hover { background: var(--line-2); }
.chat-items button.active { background: var(--coral-2); color: var(--text); font-weight: 600; }
.chat-items button .pin { color: var(--amber); margin-right: 4px; }
@media (max-width: 1024px) { #page-chat { grid-template-columns: 1fr; } .chat-list { border-right: 0; padding-right: 0; max-height: 200px; } }
.thread { margin: 20px 0 14px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.msg { max-width: 78%; padding: 14px 18px; border-radius: 18px; line-height: 1.55; }
.msg.user { align-self: flex-end; background: var(--coral-2); color: var(--text); border: 1px solid #F8D3CB; border-bottom-right-radius: 6px; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.assistant.routed { border-color: #F5C6A5; background: #FFF8F1; }
.msg .meta { font-size: 12px; color: var(--muted); margin-top: 8px; }
.composer { display: flex; gap: 10px; align-items: flex-end; flex: none; margin-top: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: var(--shadow); }
.composer textarea { flex: 1; border: 0; outline: 0; resize: none; background: none; padding: 8px 10px; max-height: 180px; }

/* buttons */
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 16px; cursor: pointer; font-weight: 600; }
.btn:hover { background: var(--line-2); }
.btn.primary { background: linear-gradient(90deg, var(--coral), var(--amber)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(242,99,74,.22); }
.btn.primary:hover { filter: brightness(1.05); background: linear-gradient(90deg, var(--coral), var(--amber)); }
.btn.small { padding: 8px 12px; font-size: 13px; }
select.btn.small { appearance: none; -webkit-appearance: none; padding-right: 26px; font-family: inherit; color: var(--text); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8680' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }
.btn.ghost { background: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.generate { width: 100%; border: 0; color: #fff; font-size: 17px; padding: 14px; border-radius: 14px; background: linear-gradient(90deg, var(--coral), var(--amber)); box-shadow: 0 8px 20px rgba(242,99,74,.25); margin-top: 6px; }
.btn.generate:hover { filter: brightness(1.04); background: linear-gradient(90deg, var(--coral), var(--amber)); }
.btn.generate.busy { background: linear-gradient(90deg, #C9C4BE, #C9C4BE); box-shadow: none; }
.link { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 8px; }
.link:hover { background: var(--line-2); color: var(--text); }
.link:disabled { opacity: .45; cursor: default; }

/* ───────── right panel ───────── */
.panel { background: var(--surface); border-left: 1px solid var(--line); padding: 26px 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.panel-collapsed .panel { padding: 0; overflow: hidden; }
.panel-collapsed .panel-body { display: none; }
.rail { display: none; width: 100%; height: 100%; border: 0; background: linear-gradient(180deg, var(--coral-2), var(--orange-2)); cursor: pointer; flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; color: var(--coral); }
.rail:hover { filter: brightness(.98); }
.rail .spark { font-size: 22px; }
.rail-text { writing-mode: vertical-rl; font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--text-2); }
.panel-collapsed .rail { display: flex; }
.panel-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.panel-head > div { flex: 1; }
.minimise { padding: 6px; margin: -4px -6px 0 0; }
.panel-head h3 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.panel-head p { margin: 2px 0 0; font-size: 14px; }
.spark.big { color: var(--coral); font-size: 22px; line-height: 1.2; }
.task-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.task-pick button { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; color: var(--text-2); }
.task-pick button.active { background: var(--coral-2); border-color: var(--coral); color: var(--coral); font-weight: 600; }
.quick h4 { margin: 6px 0 8px; font-size: 14px; }
.quick button { display: block; width: 100%; text-align: left; border: 1.5px solid var(--line); background: var(--bg); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-size: 14px; }
.quick button:hover { border-color: var(--coral); background: var(--coral-2); }
.task-form label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 6px; }
.task-form label small { font-weight: 400; color: var(--muted); }
.task-form select, .task-form input, .task-form textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; background: var(--surface); outline: 0; }
.task-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8680' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.task-form :is(select, input, textarea):focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-2); }
.task-form textarea { resize: vertical; min-height: 70px; }
.task-form .invalid { border-color: var(--coral); }

.preview { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; }
.preview-actions { display: flex; gap: 4px; }
.output { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; font-size: 14px; line-height: 1.6; min-height: 90px; background: var(--surface); overflow-wrap: anywhere; }
.output.empty { color: var(--muted); text-align: center; padding: 34px 18px; border-style: dashed; }
.output.streaming::after { content: "▍"; color: var(--coral); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.output h3, .output h4 { margin: 0 0 8px; font-size: 16px; }
.output h4 { font-size: 14.5px; margin-top: 14px; }
.output p { margin: 0 0 10px; }
.output ul, .output ol { padding-left: 20px; margin: 0 0 10px; }
.output table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 8px 0 12px; }
.output th, .output td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.output th { background: var(--line-2); }
.output code { background: var(--line-2); border-radius: 4px; padding: 1px 4px; font-size: 13px; }
.output pre { background: var(--line-2); border-radius: 10px; padding: 12px; overflow: auto; }
.output .ph { background: #FFF3C4; border-radius: 4px; padding: 0 3px; font-family: ui-monospace, monospace; font-size: 12.5px; }
.output .ph.filled { background: var(--green-2); font-family: inherit; font-size: inherit; }
.output blockquote { border-left: 3px solid var(--coral); margin: 0 0 10px; padding: 2px 12px; color: var(--text-2); }

/* quiz task card */
.qhead h3 { margin: 0; font-size: 17px; }
.qhead .chips { color: var(--muted); font-size: 13px; margin: 2px 0 14px; }
.qhead .chips span + span::before { content: " • "; }
.q { margin-bottom: 16px; }
.q .stem { font-weight: 600; margin-bottom: 8px; display: flex; gap: 6px; }
.q .stem .n { color: var(--text-2); flex: none; }
.opt { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px; margin: 6px 0; font-size: 14px; }
.opt .letter { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface); flex: none; }
.opt.correct { background: var(--green-2); border-color: #A5DCC0; }
.opt.correct .letter { background: var(--green); color: #fff; border-color: var(--green); }
.q .ans { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.q .ans b { color: var(--green); }

.verify { background: var(--orange-2); border: 1px solid #F5D6A8; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #7A4A0B; margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start; }
.verify label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.warnings { background: #FFF5F3; border: 1px solid #F8C9BF; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #8A2E1D; margin-bottom: 12px; }
.warnings ul { margin: 0; padding-left: 18px; }
.placeholders { margin-top: 14px; border: 1.5px solid #F2D77B; background: #FFFBEA; border-radius: 14px; padding: 12px 14px; font-size: 13px; }
.placeholders h4 { margin: 0 0 4px; font-size: 14px; }
.placeholders .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.placeholders label { display: block; font-size: 12px; color: var(--text-2); }
.placeholders input { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); outline: 0; }
.placeholders input.missing { border-color: #E5B83A; }
.placeholders .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.refine { display: flex; gap: 8px; margin-top: 12px; }
.refine input { flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; outline: 0; }
.refine input:focus { border-color: var(--coral); }

/* templates / settings / soon */
#page-templates, #page-settings, #page-soon { padding-bottom: 28px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.tpl { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; text-align: left; }
.tpl:hover { border-color: var(--coral); }
.tpl b { display: block; margin-bottom: 4px; }
.tpl small { color: var(--muted); }
.settings { max-width: 720px; margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.setting { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.setting h4 { margin: 0 0 6px; }
.setting dl { display: grid; grid-template-columns: 200px 1fr; gap: 6px 12px; margin: 8px 0 0; font-size: 13.5px; }
.setting dt { color: var(--muted); }
.setting dd { margin: 0; font-family: ui-monospace, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.setting .roles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.soon { text-align: center; padding: 70px 0; }
.soon-links { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #3A2F2A; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 50; box-shadow: var(--shadow); }

/* ───────── responsive ───────── */
@media (max-width: 1280px) { :root { --panel: 360px; } .main { padding-inline: 24px; } .cards { grid-template-columns: repeat(2, 1fr); } }
/* tablet and phone: the Create panel is a full-screen sheet opened by the floating button */
@media (max-width: 1024px) {
  .app, .app.panel-collapsed { grid-template-columns: var(--sidebar) 1fr; }
  .panel { position: fixed; inset: 0; height: auto; z-index: 58; transform: translateY(105%); transition: transform .25s ease; border: 0; padding: 20px 22px 40px; overflow-y: auto; }
  .app.panel-open-mobile .panel { transform: none; }
  .panel-collapsed .panel { padding: 20px 22px; overflow-y: auto; }
  .rail { display: none !important; }
  .panel-collapsed .panel-body { display: block; }
  .fab { display: inline-flex; position: fixed; right: 18px; bottom: 18px; z-index: 45; border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(90deg, var(--coral), var(--amber)); box-shadow: 0 8px 20px rgba(242,99,74,.35); cursor: pointer; }
  .fab.hidden { display: none; }
  .minimise .ic { display: none; } .minimise::after { content: "✕"; font-size: 18px; line-height: 1; }
  .app.panel-open-mobile .backdrop { display: block; }
  .backdrop { position: fixed; inset: 0; background: rgba(30,24,20,.4); z-index: 55; }
}

/* ───────── Tier 3 additions ───────── */
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.row.between { justify-content: space-between; }
.small-row { margin: -6px 0 10px; font-size: 13px; }
.switch { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); cursor: pointer; }
.sel { border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px; background: var(--surface); }

.block { max-width: 960px; width: 100%; justify-self: center; margin-top: 26px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.block h3 { margin: 0 0 4px; font-size: 18px; }
.block p { margin: 0; font-size: 13.5px; }
.block textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); outline: 0; font-family: inherit; resize: vertical; }
.block textarea:focus { border-color: var(--coral); }
.block table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.block th, .block td { border-top: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
.block th { color: var(--muted); font-weight: 600; font-size: 12.5px; border-top: 0; }
.block td textarea { min-height: 64px; font-size: 13.5px; padding: 8px 10px; }
.block td .state { font-size: 12px; color: var(--muted); }
.block td .state.err { color: #B4321F; }
.progress { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 13px; color: var(--text-2); }
.progress .bar { flex: 1; height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--coral), var(--amber)); transition: width .3s; }
.batch-results .verify { margin: 10px 0 0; }
#page-home:has(.block:not(.hidden)) { overflow: visible; flex: none; min-height: auto; padding-bottom: 8px; }   /* reports / communication pages grow and scroll */
#page-home:has(.block:not(.hidden)) .foot { margin-top: 24px; }

.diary { display: flex; flex-direction: column; gap: 8px; }
.diary .entry { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.diary .entry .who { font-weight: 600; }
.diary .entry .when { color: var(--muted); font-size: 12px; text-align: right; }
.diary .entry .txt { grid-column: 1 / -1; white-space: pre-wrap; color: var(--text-2); max-height: 96px; overflow: hidden; }
.diary .entry.open .txt { max-height: none; }
.diary .entry .tools { grid-column: 1 / -1; display: flex; gap: 6px; }
.tag { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 99px; background: var(--line-2); color: var(--text-2); margin-left: 6px; vertical-align: 1px; }
.tag.wa { background: #E6F6EE; color: #1B7F4F; } .tag.email { background: var(--blue-2); color: var(--blue); } .tag.sms { background: var(--purple-2); color: var(--purple); }

.tpl-tools { margin-top: 14px; }
.tpl-tools input { flex: 1; min-width: 200px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface); outline: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--text-2); }
.chips button.active { background: var(--coral-2); border-color: var(--coral); color: var(--coral); font-weight: 600; }
.tpl { position: relative; }
.tpl .del { position: absolute; top: 10px; right: 10px; }
.tpl .cat { display: block; font-size: 11px; color: var(--coral); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }

.actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.feedback { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; font-size: 13px; color: var(--muted); }
.feedback button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 14px; }
.feedback button.on { background: var(--coral-2); border-color: var(--coral); }
.feedback .why { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; width: 100%; }
.feedback .why button { font-size: 12px; }
.msg .feedback { margin: 8px 0 0; }

.modal { position: fixed; inset: 0; background: rgba(30, 24, 20, .45); display: grid; place-items: center; z-index: 60; padding: 16px; }
.dialog { background: var(--surface); border-radius: 18px; padding: 22px 24px; width: min(640px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow); }
.dialog h3 { margin: 0 0 4px; font-size: 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; }
.grid2 label, .pform label { display: block; font-size: 13px; color: var(--text-2); }
.grid2 input, .grid2 select, .pform input, .pform select { width: 100%; margin-top: 4px; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); outline: 0; font-size: 14px; color: var(--text); }
.grid2 input:focus, .grid2 select:focus { border-color: var(--coral); }
.user-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.user-list button { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--bg); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.user-list button:hover { border-color: var(--coral); }
.user-list small { color: var(--muted); display: block; }
.send-preview { margin-top: 12px; max-height: 260px; overflow-y: auto; font-size: 13.5px; }
.output.streaming.json::after { content: none; }
.gen-wait { text-align: center; color: var(--text-2); padding: 30px 10px; }
.gen-wait .spin { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--coral); border-radius: 50%; margin: 0 auto 10px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.setting .stat { display: inline-block; margin-right: 18px; }
.setting .stat b { font-size: 18px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }
@media print { body * { visibility: hidden; } }

/* ───────── quality dashboards ───────── */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 18px; padding-bottom: 30px; }
.dash .setting { margin: 0; }
.dash .wide { grid-column: 1 / -1; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 64px; align-items: center; gap: 10px; font-size: 13px; margin: 6px 0; }
.bar-row .track { height: 10px; border-radius: 99px; background: var(--line-2); overflow: hidden; position: relative; }
.bar-row .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--coral), var(--amber)); }
.bar-row .track i.prev { background: #D9D4CE; opacity: .9; }
.bar-row .val { text-align: right; font-variant-numeric: tabular-nums; }
.delta { font-size: 11px; margin-left: 4px; }
.delta.up { color: var(--green); } .delta.down { color: #B4321F; }
.runs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.runs button { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.runs button.active { border-color: var(--coral); background: var(--coral-2); }
.runs b { display: block; font-size: 15px; }
.fails { font-size: 12.5px; color: var(--text-2); max-height: 160px; overflow-y: auto; margin-top: 8px; }
.fails li { margin: 2px 0; }
.mini { font-size: 12.5px; color: var(--text-2); }
.mini li { margin: 3px 0; }

/* approvals / ops */
.tag.pending { background: #FFF3C4; color: #7A5A00; } .tag.approved { background: var(--green-2); color: #1B7F4F; } .tag.rejected { background: #FDE2DD; color: #B4321F; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.ops-grid div { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ops-grid b { display: block; font-size: 20px; }
.ops-grid small { color: var(--muted); }
.spark-days { display: flex; gap: 3px; align-items: flex-end; height: 44px; margin-top: 8px; }
.spark-days i { flex: 1; background: linear-gradient(180deg, var(--amber), var(--coral)); border-radius: 3px 3px 0 0; min-height: 2px; }
.spark-days i.err { background: #B4321F; }

/* tier 6 */
.bilingual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bilingual > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.bilingual h5 { margin: 0 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; }
.sources { font-size: 12px; color: var(--muted); margin-top: 8px; }
.sources span { display: inline-block; background: var(--line-2); border-radius: 6px; padding: 2px 7px; margin: 2px 4px 0 0; }
.q .stem .vbadge { font-size: 11px; color: var(--green); background: var(--green-2); border-radius: 6px; padding: 1px 6px; margin-left: 6px; font-weight: 600; white-space: nowrap; }
.task-form .check { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 500; font-size: 14px; }
.task-form .check input { width: auto; }
.kid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kid div { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.kid b { display: block; font-size: 18px; }
.kid small { color: var(--muted); }
.block table select { border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 12.5px; background: var(--surface); }

/* sign-in screen */
.modal.signin { background: radial-gradient(1200px 600px at 20% -10%, #FFF1E8 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #E6F6EE 0%, transparent 55%), var(--bg); backdrop-filter: none; }
.signin-card { width: min(560px, 100%); padding: 30px 34px 0; position: relative; overflow: hidden; border: 1px solid var(--line); }
.signin-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.signin-brand b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.signin-brand b span { color: var(--coral); }
.signin-brand small { color: var(--muted); }
.signin-card h3 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 4px; }
.signin-card > p { margin: 0 0 16px; }
.accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.accounts button { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; background: var(--surface); border-radius: 14px; text-align: left; transition: transform .12s, border-color .12s, box-shadow .12s; }
.accounts button:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--coral); }
.accounts button .avatar { width: 40px; height: 40px; font-size: 16px; background: linear-gradient(135deg, var(--coral), var(--amber)); }
.accounts button.principal .avatar { background: linear-gradient(135deg, var(--purple), var(--blue)); }
.accounts button.parent .avatar, .accounts button.student .avatar { background: linear-gradient(135deg, var(--green), var(--cyan)); }
.accounts button b { display: block; font-size: 15px; }
.accounts button .role { display: inline-block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); background: var(--line-2); border-radius: 999px; padding: 2px 8px; }
.accounts button .role.nopin { background: #FDE2DD; color: #B4321F; }
.pin-box { margin: 6px 0 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); }
.pin-who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pin-who .avatar { background: linear-gradient(135deg, var(--coral), var(--amber)); }
.pin-who div { flex: 1; } .pin-who small { display: block; color: var(--muted); }
.pin-box label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.pin-box input { width: 100%; margin-top: 4px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 22px; letter-spacing: .35em; text-align: center; background: var(--surface); outline: 0; }
.pin-box input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-2); }
.pin-box .btn.generate { margin-top: 0; }
.muted.small { font-size: 12.5px; }
.signin-card .pform { margin-top: 4px; }
.signin-art { display: block; width: 62%; margin: 18px auto -6px; opacity: .95; }
.signin-card .row.end { margin-bottom: 4px; }
@media (max-width: 720px) { .signin-card { padding: 22px 18px 0; } .accounts { grid-template-columns: 1fr 1fr; } }

/* item menus (Claude-style ⋯) */
.chat-items .item { position: relative; display: flex; align-items: center; }
.chat-items .item > button:first-child { flex: 1; padding-right: 30px; }
.chat-items .item .more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: none; border-radius: 6px; color: var(--muted); cursor: pointer; opacity: 0; font-size: 16px; line-height: 1; }
.chat-items .item:hover .more, .chat-items .item.active .more, .chat-items .item .more.open { opacity: 1; }
.chat-items .item .more:hover { background: var(--line); color: var(--text); }
.menu { position: fixed; z-index: 70; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 160px; }
.menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.menu button:hover { background: var(--line-2); }
.menu button.danger { color: #B4321F; }
.menu button.danger:hover { background: #FDE2DD; }
/* history page */
.hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; padding-bottom: 30px; }
.hist .card-h { position: relative; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; text-align: left; }
.hist .card-h:hover { border-color: var(--coral); box-shadow: var(--shadow); }
.hist .card-h .kind { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--coral); margin-bottom: 4px; }
.hist .card-h b { display: block; font-size: 15px; margin-bottom: 4px; }
.hist .card-h small { color: var(--muted); }
.hist .card-h .more { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border: 0; background: none; border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 16px; }
.hist .card-h .more:hover { background: var(--line-2); color: var(--text); }
.hist .card-h .pin { color: var(--amber); }
.panel .recent { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; }
.panel .recent h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.panel .recent button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .recent button:hover { background: var(--line-2); color: var(--text); }

/* message action bar (copy · retry · feedback) */
.msg-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; opacity: .55; transition: opacity .15s; }
.msg:hover .msg-actions { opacity: 1; }
.msg-actions .act { border: 1px solid transparent; background: none; border-radius: 8px; padding: 3px 8px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.msg-actions .act:hover { background: var(--line-2); border-color: var(--line); color: var(--text); }
.msg-actions .feedback { margin-left: 4px; font-size: 12.5px; }
.msg-actions .feedback button { padding: 2px 7px; font-size: 13px; }

/* quiz play results */
.pq { display: grid; grid-template-columns: 1fr 120px 60px; gap: 10px; align-items: center; font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.pq .track { height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; } .pq .track i { display: block; height: 100%; background: var(--green); }
.pq .track i.low { background: #B4321F; } .pq .track i.mid { background: var(--amber); }
.att { display: grid; grid-template-columns: 1fr 70px 80px 70px; gap: 8px; font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--line); align-items: center; }

/* ───────── mobile layer (≤ 760px) ───────── */
.mobilebar, .backdrop, .fab, .chat-toggle { display: none; }
@media (max-width: 760px) {
  html, body { overflow: auto; }
  .app { display: block; height: auto; min-height: 100vh; padding-top: 54px; }
  .mobilebar { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 54px; align-items: center; gap: 10px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 40; }
  .mb-btn { width: 40px; height: 40px; border: 0; background: none; font-size: 22px; border-radius: 10px; }
  .mb-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; flex: 1; }
  .mb-brand b { color: var(--coral); }
  .mb-status .dot { width: 10px; height: 10px; }
  /* sidebar → drawer */
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; height: 100vh; z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; overflow-y: auto; }
  .app.drawer-open .sidebar { transform: none; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
  .app.drawer-open .backdrop { display: block; }
  .panel { inset: 54px 0 0 0; padding: 16px 16px 40px; }
  .panel-collapsed .panel { padding: 16px; }
  .nav a { padding: 13px 14px; font-size: 16px; }
  /* main */
  .main { height: auto; min-height: calc(100vh - 54px); overflow: visible; padding: 12px 16px 90px; }
  .topbar { display: none; }
  .hero { margin: 8px 0 6px; } .hero h1 { font-size: 34px; } .hero .sub { font-size: 15px; } .kicker { font-size: 10px; letter-spacing: .2em; }
  .search { padding: 10px 14px; margin: 12px auto 16px; } .search input { font-size: 16px; } .search kbd { display: none; }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px 18px; display: grid; grid-template-columns: 48px 1fr; gap: 4px 14px; align-items: center; }
  .card .tile { width: 48px; height: 48px; margin: 0; grid-row: 1 / 3; } .card .tile .ic { width: 24px; height: 24px; }
  .card h3 { font-size: 17px; margin: 0; } .card p { font-size: 13.5px; } .card .go { display: none; }
  #page-home { overflow: visible; flex: none; min-height: auto; display: block; }
  .foot { flex-direction: column; align-items: flex-start; margin-top: 18px; gap: 8px; padding-top: 4px; }
  .foot p { margin: 0; font-size: 13px; } .foot .school { display: none; } .foot .hand { display: none; }
  .block { padding: 14px 14px; margin-top: 16px; border-radius: 14px; }
  .block-head { flex-direction: column; } .block-head .row { width: 100%; }
  .block-head .sel { flex: 1; min-width: 0; }
  .block table, .setting table, .att, .pq { font-size: 12.5px; }
  .setting dl { grid-template-columns: 1fr; gap: 2px 0; } .setting dt { margin-top: 8px; }
  .settings { margin-top: 12px; }
  .hist { grid-template-columns: 1fr; }
  .tpl-grid { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 96px 1fr 52px; }
  .ops-grid { grid-template-columns: 1fr 1fr; }
  #students table { display: block; overflow-x: auto; white-space: nowrap; }
  .kid { grid-template-columns: 1fr 1fr; }
  /* chat */
  #page-chat { display: flex; flex-direction: column; min-height: calc(100vh - 54px - 24px); gap: 0; padding-bottom: 0; }
  .chat-toggle { display: inline-flex; align-self: flex-start; margin-bottom: 8px; }
  .chat-list { display: none; border: 0; padding: 0 0 10px; }
  #page-chat.show-list .chat-list { display: flex; max-height: 50vh; }
  .chat-main { flex: 1; }
  .thread-head h2 { font-size: 20px; } .thread-head p { font-size: 13px; }
  .thread { margin: 10px 0; overflow: visible; }
  .msg { max-width: 94%; padding: 12px 14px; }
  .composer { position: sticky; bottom: 12px; margin-top: 10px; }
  .task-form select, .task-form input, .task-form textarea { font-size: 16px; }    /* no iOS zoom */
  .preview { margin-top: 16px; }
  .bilingual { grid-template-columns: 1fr; }
  .actions { gap: 6px; } .actions .btn.small { padding: 8px 10px; }
  /* dialogs */
  .modal { padding: 0; align-items: flex-end; }
  .dialog { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; padding: 18px 16px 24px; }
  .signin-card { border-radius: 18px 18px 0 0; padding: 22px 18px 0; }
  .grid2 input, .grid2 select, .pform input, .pform select { font-size: 16px; }
  .accounts { grid-template-columns: 1fr 1fr; }
  .toast { left: 16px; right: 16px; transform: none; text-align: center; }
  .menu { min-width: 180px; }
  .chat-items .item .more { opacity: 1; }
  .msg-actions { opacity: 1; }
  .play { padding: 14px 12px 60px; }
}
@media (max-width: 400px) { .accounts { grid-template-columns: 1fr; } .ops-grid { grid-template-columns: 1fr 1fr; } }

/* ───────── settings (LLM-style: section nav + cards with rows) ───────── */
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-top: 16px; max-width: 980px; padding-bottom: 40px; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; align-self: start; }
.settings-nav button { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--text-2); font-size: 14px; font-weight: 500; }
.settings-nav button:hover { background: var(--line-2); }
.settings-nav button.active { background: var(--coral-2); color: var(--text); font-weight: 600; }
.settings-nav button .ic { width: 18px; height: 18px; }
.settings-nav button.active .ic { color: var(--coral); }
.settings { max-width: none; margin-top: 0; }
.scard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.scard-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.scard-head h4 { margin: 0; font-size: 16px; }
.scard-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.srow { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr); gap: 8px 24px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line-2); }
.srow:last-child { border-bottom: 0; }
.srow .l { min-width: 0; } .srow .l b { display: block; font-size: 14px; font-weight: 600; }
.srow .l small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.srow .r { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; min-width: 0; text-align: right; }
.srow .r .val { font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.srow .r code { background: var(--line-2); border-radius: 6px; padding: 2px 7px; font-size: 12px; }
.srow.stack { grid-template-columns: 1fr; }
.sw { position: relative; width: 40px; height: 22px; border-radius: 99px; background: #D9D4CE; transition: background .15s; cursor: pointer; flex: none; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sw.on { background: var(--green); } .sw.on::after { left: 21px; }
.sw.dis { opacity: .5; cursor: default; }
.profile-hero { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.profile-hero .avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; }
.profile-hero b { display: block; font-size: 18px; } .profile-hero small { color: var(--muted); }
.profile-hero .row { margin-left: auto; gap: 12px; display: flex; }
.profile-hero .row .btn + .btn { margin-left: 12px; }
.row .btn + .btn, .row .btn + .link, .row .link + .btn { margin-left: 6px; }
.stable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.stable th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 8px 20px; border-bottom: 1px solid var(--line-2); }
.stable td { padding: 10px 20px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.stable tr:last-child td { border-bottom: 0; }
.stable select { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 13px; background: var(--surface); }
.sform { padding: 12px 20px 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line-2); }
.sform input, .sform select { border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); outline: 0; font-size: 14px; }
.sform input:focus { border-color: var(--coral); }
.gw .grid2 { padding: 4px 20px 12px; margin-top: 0; }
.gw .grid2 label { font-size: 12.5px; }
.pill { display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: var(--line-2); color: var(--text-2); }
.pill.on { background: var(--green-2); color: #1B7F4F; } .pill.off { background: var(--line-2); }
@media (max-width: 760px) {
  .settings-layout { grid-template-columns: 1fr; gap: 12px; }
  .settings-nav { flex-direction: row; overflow-x: auto; position: static; gap: 6px; padding-bottom: 4px; }
  .settings-nav button { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }
  .srow { grid-template-columns: 1fr; } .srow .r { justify-content: flex-start; }
  .profile-hero { flex-wrap: wrap; } .profile-hero .row { margin-left: 0; }
  .stable th:nth-child(3), .stable td:nth-child(3) { display: none; }
}

/* file drop zone */
.dropzone { display: flex; align-items: center; gap: 14px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 14px 16px; background: var(--bg); cursor: pointer; transition: border-color .12s, background .12s; }
.dropzone:hover, .dropzone.over { border-color: var(--coral); background: var(--coral-2); }
.dropzone .ic { width: 26px; height: 26px; color: var(--coral); }
.dropzone b { display: block; font-size: 14px; } .dropzone small { color: var(--muted); font-size: 12.5px; }
.dropzone .link { padding: 0; font-size: 12.5px; color: var(--coral); text-decoration: underline; }
.dropzone .file-name { margin-left: auto; font-size: 12.5px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone.has-file { border-style: solid; border-color: var(--green); background: var(--green-2); }
/* search + filter chips: breathing room */
/* toolbar: search box on the left, filter chips pushed to the right with real space between */
.tpl-tools { align-items: center; gap: 16px 32px; margin-top: 16px; }
.tpl-tools input { flex: 0 1 380px; min-width: 240px; padding-left: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8680' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 16px; }
.tpl-tools .chips { gap: 8px; margin-left: auto; }
@media (max-width: 760px) { .tpl-tools { gap: 14px; } .tpl-tools input { flex: 1 1 100%; } .tpl-tools .chips { margin-left: 0; } }
.block-head .row { gap: 10px; }
.block-head .sel { min-width: 140px; }
#bankQ.sel, #docSearch.sel { min-width: 220px; }

/* status line: real pipeline stages while waiting */
.stages { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.stage { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.stage .tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; flex: none; border: 1.5px solid var(--line); color: var(--green); }
.stage.done .tick { border-color: var(--green); background: var(--green-2); }
.stage.live { color: var(--text); font-weight: 500; }
.stage.live .tick { border-color: var(--coral); border-top-color: transparent; animation: spin 1s linear infinite; }
.dots { display: inline-flex; gap: 4px; margin-top: 10px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); opacity: .35; animation: blinkdot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blinkdot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.msg.thinking { padding: 12px 16px; }
.gen-wait { padding: 18px 12px; text-align: left; }
.stages.mini { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.stages.mini .stage { font-size: 12.5px; }
.stages.mini .stage .tick { width: 15px; height: 15px; font-size: 9px; }

/* ───────── collapsible sidebar (desktop) ───────── */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 18px; padding: 4px 4px 0 8px; }
.brand-row .brand { padding: 0; }
.collapse-btn { width: 32px; height: 32px; border: 1px solid transparent; background: none; border-radius: 8px; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s; flex: none; }
.collapse-btn .ic { width: 19px; height: 19px; }
.collapse-btn:hover { background: var(--line-2); border-color: var(--line); color: var(--text); }
@media (min-width: 761px) {
  .app { transition: grid-template-columns .2s ease; }
  .app.nav-collapsed { --sidebar: 76px; }
  .app.nav-collapsed .sidebar { padding: 20px 10px; }
  .app.nav-collapsed .brand span, .app.nav-collapsed .user-text, .app.nav-collapsed .user-more { display: none; }
  .app.nav-collapsed .brand-row { flex-direction: column; gap: 6px; align-items: center; }
  .app.nav-collapsed .brand { padding: 0 0 4px; }
  .app.nav-collapsed .collapse-btn { margin-top: 0; }
  .app.nav-collapsed .collapse-btn .ic { transform: none; }
  .app.nav-collapsed .nav a { justify-content: center; padding: 12px; font-size: 0; gap: 0; position: relative; }
  .app.nav-collapsed .nav a .ic { width: 22px; height: 22px; }
  .app.nav-collapsed .nav a::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #2B2724; color: #fff; font-size: 12.5px; padding: 5px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 30; }
  .app.nav-collapsed .nav a:hover::after { opacity: 1; }
  .app.nav-collapsed .user { justify-content: center; padding: 8px 0; }
  .app.nav-collapsed .nav hr { margin: 14px 4px; }
}