:root {
  --ink: #173349;
  --ink-soft: #456273;
  --muted: #78909c;
  --green: #087e72;
  --green-2: #11a58f;
  --green-3: #dff4ed;
  --teal: #0b9aa2;
  --yellow: #f7b84b;
  --orange: #f17855;
  --blue: #4d7cf3;
  --bg: #f4f8fa;
  --surface: #ffffff;
  --line: #dce8eb;
  --shadow: 0 20px 60px rgba(33, 69, 89, .09);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px "Be Vietnam Pro", system-ui, sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: inherit; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 270px; padding: 26px 18px; background: rgba(255,255,255,.94); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 10; backdrop-filter: blur(18px); }
.brand { display: flex; gap: 11px; align-items: center; padding: 7px 8px; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: white; font-size: 23px; background: linear-gradient(135deg, var(--green), #18b59d); box-shadow: 0 10px 22px #087e7222; }
.brand strong { display: block; font: 700 16px "Space Grotesk", sans-serif; letter-spacing: -.4px; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: 1.35px; text-transform: uppercase; }
.nav { display: grid; gap: 7px; margin-top: 36px; }
.nav-button { border: 0; border-radius: 14px; color: var(--ink-soft); background: transparent; padding: 13px 14px; text-align: left; font-weight: 700; display: flex; gap: 11px; align-items: center; transition: .2s ease; }
.nav-button span { font-size: 20px; }
.nav-button:hover { background: #f1f8f7; transform: translateX(2px); }
.nav-button.active { background: linear-gradient(100deg, #e3f6ef, #edf8f4); color: var(--green); box-shadow: inset 3px 0 var(--green); }
.sidebar-note { margin-top: auto; padding: 17px; border: 1px solid #ccebe2; border-radius: 17px; background: radial-gradient(circle at 90% 0,#fff 0 17%,transparent 18%), linear-gradient(145deg,#e9f8f2,#f5fbf9); color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.sidebar-note b { display: block; color: var(--green); margin-bottom: 5px; }
.sidebar-note .dot { display: inline-block; width: 7px; height: 7px; background: #20b486; border-radius: 50%; margin-right: 5px; }
.main { margin-left: 270px; padding: 0 46px 48px; max-width: 1700px; }
.topbar { min-height: 90px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.crumb { color: var(--muted); font-size: 12px; font-weight: 600; }
.profile-wrap { display: flex; align-items: center; gap: 13px; }
.profile-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 16px; padding: 7px 12px 7px 7px; background: var(--surface); }
.avatar { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: #ffe9bd; color: #8b5c0b; font-weight: 800; }
.profile-chip b { display: block; font-size: 12px; }
.profile-chip small { color: var(--muted); font-size: 10px; }
.ghost-btn, .icon-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.icon-btn { padding: 10px; width: 40px; height: 40px; }
.page { padding-top: 29px; }
.eyebrow { color: var(--green); text-transform: uppercase; letter-spacing: 1.8px; font-size: 11px; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 8px 0 11px; font: 700 clamp(28px, 3vw, 42px)/1.18 "Space Grotesk", sans-serif; letter-spacing: -1.6px; }
h2 { margin-bottom: 17px; font: 700 23px/1.25 "Space Grotesk", sans-serif; letter-spacing: -.7px; }
h3 { margin-bottom: 8px; font-size: 16px; }
p { line-height: 1.75; }
.muted { color: var(--muted); }
.hero { position: relative; overflow: hidden; padding: 36px 39px; min-height: 266px; display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius); background: linear-gradient(115deg,#d9f2e9 0%,#dff5f1 54%,#e6f1fb 100%); box-shadow: var(--shadow); }
.hero:after { content: ""; width: 360px; height: 360px; position: absolute; right: 80px; top: -180px; border-radius: 50%; background: radial-gradient(circle,#ffffff96 0 28%,transparent 29%); background-size: 22px 22px; transform: rotate(10deg); opacity: .55; }
.hero-copy { position: relative; z-index: 1; max-width: 670px; }
.hero-copy p { max-width: 620px; margin-bottom: 22px; color: #3f6170; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-art { position: relative; z-index: 1; width: 240px; height: 175px; flex: 0 0 240px; }
.planet { position: absolute; width: 125px; height: 125px; left: 45px; top: 29px; border-radius: 50%; background: linear-gradient(145deg,#b6e8d7,#7acabd); box-shadow: inset -14px -18px 20px #278f7b33, 0 20px 28px #277d6c26; }
.planet:before { content: ""; position: absolute; width: 92px; height: 25px; left: 16px; top: 58px; border: 7px solid #f8ffffaa; border-left-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-18deg); }
.art-emoji { position: absolute; font-size: 66px; left: 75px; top: 53px; filter: drop-shadow(0 8px 8px #1b6c5e33); }
.float { position: absolute; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 12px 26px #2f6b6120; font-size: 23px; animation: float 4s ease-in-out infinite; }
.float.a { right: 0; top: 0; }.float.b { left: 0; bottom: 4px; animation-delay: -1.5s; }.float.c { right: 5px; bottom: 4px; animation-delay: -2.5s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.btn { border: 0; border-radius: 12px; padding: 12px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,var(--green),#0b9c87); color: white; font-weight: 800; box-shadow: 0 8px 18px #087e7224; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px #087e7230; }
.btn.secondary { color: var(--ink); background: white; border: 1px solid var(--line); box-shadow: none; }
.btn.warning { color: #744b00; background: #fff1c9; box-shadow: none; }
.btn.danger { color: #9a382d; background: #fff0ed; box-shadow: none; }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 22px; }
.stat { display: flex; align-items: center; gap: 13px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 9px 26px #315d6c08; }
.stat-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: #eff8fb; font-size: 22px; }
.stat strong { display:block; font: 700 24px "Space Grotesk",sans-serif; }.stat small { color: var(--muted); font-size: 11px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin: 33px 0 17px; }
.section-head h2 { margin: 0; }.section-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.search-wrap { position: relative; min-width: 250px; }.search-wrap input { width: 100%; padding: 12px 39px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; outline: none; }.search-wrap input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px #0b9c8717; }.search-wrap span { position:absolute; right:13px; top:11px; color:var(--muted); }
.task-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.task-card { position: relative; overflow: hidden; display:flex; flex-direction:column; min-height: 290px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: .24s ease; }
.task-card:hover { transform: translateY(-4px); border-color: #aeddd1; box-shadow: 0 17px 35px #315d6c12; }
.task-card.completed { border-color:#95d9c5; background: linear-gradient(180deg,#fafffd,#fff); }.task-card.completed:after { content:"✓"; position:absolute; right:16px; top:16px; width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--green); font-weight:800; }
.task-top { display:flex; justify-content:space-between; align-items:center; }.subject-tag { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; color:#527180; background:#eef7f9; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; }.task-time { color:var(--muted); font-size:10px; }
.task-icon { width:56px; height:56px; margin:18px 0 13px; display:grid; place-items:center; border-radius:18px; font-size:30px; background:#e8f6f0; }.task-card:nth-child(4n+2) .task-icon { background:#fff1cf; }.task-card:nth-child(4n+3) .task-icon { background:#e7efff; }.task-card:nth-child(4n+4) .task-icon { background:#ffece6; }
.task-card h3 { margin-bottom: 7px; font-size: 16px; line-height:1.4; }.task-card p { margin-bottom: 14px; color:var(--muted); font-size:12px; line-height:1.65; }.task-card .btn { margin-top:auto; width:100%; padding:10px; font-size:12px; }
.layout-2 { display:grid; grid-template-columns: 1.45fr .9fr; gap: 19px; margin-top: 23px; }.panel { padding: 23px; background:white; border:1px solid var(--line); border-radius:18px; }.panel h2 { margin-bottom:10px; }.panel p { color:var(--muted); font-size:12px; }
.mini-steps { display:grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-top:20px; }.mini-step { padding: 11px 5px; border-radius: 12px; background:#f4faf8; text-align:center; color:#55727f; font-size:10px; }.mini-step b { display:grid; place-items:center; width:30px; height:30px; margin:0 auto 7px; color:var(--green); border-radius:50%; background:#def3ea; }.mini-step.active { background:#e2f6ee; color:var(--green); }.mini-step.active b { background:var(--green); color:#fff; }
.tips-list { display:grid; gap:11px; margin:17px 0 0; }.tip { display:flex; gap:10px; align-items:flex-start; padding:11px; border-radius:13px; background:#f7fbfc; font-size:12px; line-height:1.55; }.tip-icon { font-size:19px; }
.page-header { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:23px; }.page-header p { max-width:690px; color:var(--muted); margin-bottom:0; }.pill { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; color:var(--green); background:#e4f7ef; border-radius:999px; font-size:11px; font-weight:800; }
.knowledge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.knowledge-card { padding:20px; border:1px solid var(--line); border-radius:17px; background:white; }.knowledge-card .k-icon { width:49px;height:49px;display:grid;place-items:center;border-radius:15px;background:#eff9f5;font-size:25px;margin-bottom:13px; }.knowledge-card h3 { line-height:1.4; }.knowledge-card p { color:var(--muted); font-size:12px; line-height:1.7; }.knowledge-card .btn { width:100%; margin-top:8px; font-size:12px; }.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }.filter { border:1px solid var(--line); background:#fff; color:var(--ink-soft); border-radius:999px; padding:8px 12px; font-size:11px; font-weight:700; }.filter.active { color:var(--green); border-color:#9edbca; background:#e5f6ee; }
.material-list { margin-top:25px; display:grid; gap:10px; }.material { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#fff; }.material-title { display:flex; gap:10px; align-items:center; }.material-icon { width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#edf6fb; }.material small { display:block;color:var(--muted);font-size:10px;margin-top:2px; }
.journey-table { overflow:auto; background:white; border:1px solid var(--line); border-radius:18px; }.journey-table table { width:100%; min-width:690px; border-collapse:collapse; }.journey-table th,.journey-table td { padding:14px 15px; text-align:left; border-bottom:1px solid #edf2f3; font-size:12px; }.journey-table th { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.8px; background:#f8fbfb; }.journey-table tr:last-child td { border-bottom:0; }.status { display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800; }.status.done { color:#087e72;background:#e1f6ed; }.status.doing { color:#8b5c0b;background:#fff1cf; }.status.idle { color:#6d7e86;background:#edf2f4; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; }.guide-card { padding:21px; border:1px solid var(--line); border-radius:17px; background:white; }.guide-card .guide-number { width:34px;height:34px;display:grid;place-items:center;color:white;background:var(--green);border-radius:12px;font-weight:800;margin-bottom:12px; }.guide-card p,.guide-card li { color:var(--muted); font-size:12px; line-height:1.8; }.guide-card ol { padding-left:18px; margin:8px 0 0; }.accordion { border-top:1px solid var(--line); }.accordion button { width:100%; border:0; background:none; display:flex; justify-content:space-between; padding:14px 0; color:var(--ink); font-weight:800; text-align:left; }.accordion-content { padding:0 0 14px; color:var(--muted); font-size:12px; line-height:1.7; }
.study-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }.study-top h1 { max-width:800px; }.study-top p { color:var(--muted); margin-bottom:0; }.study-actions { display:flex; gap:8px; flex-wrap:wrap; }.stepper { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; padding:8px; margin-bottom:18px; border-radius:18px; background:#eaf4f2; }.step-button { border:0; background:transparent; border-radius:12px; padding:11px 7px; text-align:left; color:#6b828c; font-weight:800; font-size:11px; }.step-button span { display:block; font-size:17px; margin-bottom:4px; }.step-button.current { color:var(--green); background:white; box-shadow:0 8px 18px #245f4f12; }.step-button.complete { color:#318f78; }.study-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:18px; align-items:start; }.study-main,.chat-panel { padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; }.study-main h2 { margin-bottom:7px; }.question { padding:14px 15px; margin:15px 0; border-left:4px solid var(--green-2); border-radius:11px; background:#f2faf7; color:#355a66; font-size:13px; line-height:1.7; }.field-label { display:block; margin:14px 0 7px; font-size:11px; font-weight:800; color:var(--ink-soft); }.field, .text-field, .select { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 13px; background:#fcfefe; color:var(--ink); outline:none; }.field { min-height:135px; resize:vertical; }.field:focus,.text-field:focus,.select:focus { border-color:var(--green-2); box-shadow:0 0 0 3px #0b9c8714; }.actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:17px; }.sourcebox { margin-top:17px; padding:15px; border:1px solid #b9e2d4; border-radius:15px; background:#f3fbf7; }.sourcebox h3 { color:var(--green); }.sourcebox p { color:#55727f; font-size:12px; margin-bottom:0; white-space:pre-wrap; }.chat-panel { position:sticky; top:18px; background:linear-gradient(180deg,#123e4d 0%,#0d3344 45%,#092b3b 100%); color:#fff; border:0; box-shadow:0 20px 50px #102f3c2b; }.chat-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding-bottom:16px; border-bottom:1px solid #ffffff20; }.chat-title { display:flex; gap:10px; align-items:center; }.bot-avatar { width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#79dbbb;color:#0a4c47;font-size:22px; }.chat-panel h3 { margin:0; }.chat-panel small { color:#a8d1cd; }.chat-state { color:#9ef0c6; font-size:10px; }.chat-hint { margin:16px 0; color:#b6d8d7; font-size:11px; line-height:1.6; }.chat-panel .field-label { color:#b6d8d7; }.chat-panel .field { min-height:90px; color:white; background:#ffffff0d; border-color:#ffffff22; }.chat-panel .field:focus { border-color:#70d6b7; box-shadow:0 0 0 3px #70d6b720; }.chat-panel .btn { background:#68d5b2; color:#073d3c; box-shadow:none; }.chat-panel .btn.secondary { background:#ffffff12; color:white; border-color:#ffffff20; }.chat-msgs { display:grid; gap:9px; margin:15px 0; max-height:225px; overflow:auto; }.chat-msg { padding:10px 11px; border-radius:12px; background:#ffffff12; color:#d8eeee; font-size:11px; line-height:1.55; }.chat-msg.user { background:#70d6b71a; color:#dffff0; border-left:3px solid #70d6b7; }.chat-panel .limit { color:#9dbabd; font-size:10px; margin-top:11px; }.quick-actions { display:flex; flex-wrap:wrap; gap:7px; }.quick-actions button { font-size:10px; padding:8px 9px; border-radius:10px; border:1px solid #ffffff20; background:#ffffff10; color:#dff8f1; }
.hint-box { margin-top:15px; padding:14px; border:1px dashed #a2d9ca; border-radius:13px; background:#f2fbf7; color:#426670; font-size:12px; line-height:1.65; }.hint-box b { color:var(--green); }
.teacher-banner { padding:18px 20px; margin-bottom:18px; border-radius:17px; background:linear-gradient(115deg,#1d4655,#0d7e74); color:white; display:flex; justify-content:space-between; gap:15px; align-items:center; }.teacher-banner p { margin:5px 0 0; color:#cde8e6; font-size:12px; }.teacher-banner .btn { background:#fff; color:var(--green); box-shadow:none; }.teacher-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; }.teacher-card { padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; }.teacher-card h2 { margin-bottom:13px; }.teacher-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.teacher-stat { padding:12px; border-radius:13px; background:#f5faf9; }.teacher-stat b { display:block; font:700 21px "Space Grotesk",sans-serif; }.teacher-stat small { color:var(--muted); font-size:10px; }.teacher-table { overflow:auto; margin-top:15px; }.teacher-table table { width:100%; min-width:620px; border-collapse:collapse; }.teacher-table th,.teacher-table td { padding:12px 10px; border-bottom:1px solid #edf2f3; text-align:left; font-size:11px; }.teacher-table th { color:var(--muted); font-size:10px; }.teacher-lock { text-align:center; padding:53px 22px; border:1px dashed #b6cfd0; border-radius:20px; background:#fbfefe; }.teacher-lock .lock-icon { font-size:42px; margin-bottom:13px; }
.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; padding:18px; background:#0d2e3a7a; backdrop-filter:blur(7px); z-index:50; }.modal { width:min(450px,100%); padding:28px; border-radius:23px; background:#fff; box-shadow:0 26px 80px #092f3c3a; }.modal h2 { margin-bottom:7px; }.modal p { color:var(--muted); font-size:12px; }.modal .field { min-height:auto; }.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }.close-x { float:right; border:0; background:#f1f7f7; border-radius:9px; width:32px;height:32px; font-size:18px; color:var(--muted); }
#toast-root { position:fixed; right:24px; bottom:24px; z-index:80; display:grid; gap:8px; }.toast { padding:12px 16px; max-width:360px; color:white; background:#123e4d; border-radius:12px; box-shadow:0 14px 35px #17334938; font-size:12px; animation:toast .25s ease both; }.toast.ok { background:#087e72; }.toast.warn { background:#8b5c0b; }@keyframes toast { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.empty { padding:35px; text-align:center; color:var(--muted); border:1px dashed #b8ced1; border-radius:17px; background:#fff; }.hidden { display:none!important; }
@media (max-width:1200px) { .task-grid { grid-template-columns:repeat(3,1fr); }.stats { grid-template-columns:repeat(2,1fr); }.study-grid { grid-template-columns:1fr; }.chat-panel { position:relative; top:auto; }.teacher-grid,.layout-2 { grid-template-columns:1fr; } }
@media (max-width:820px) { .sidebar { position:static; width:100%; padding:13px 14px; border-right:0; border-bottom:1px solid var(--line); }.brand { padding:0; }.nav { grid-template-columns:repeat(5,1fr); gap:4px; margin-top:14px; }.nav-button { justify-content:center; padding:8px 4px; font-size:0; }.nav-button span { font-size:19px; margin:0; }.sidebar-note { display:none; }.main { margin-left:0; padding:0 17px 35px; }.topbar { min-height:72px; }.topbar .crumb { display:none; }.profile-chip { padding-right:8px; }.profile-chip div:not(.avatar) { display:none; }.hero { padding:25px; }.hero-art { display:none; }.task-grid { grid-template-columns:repeat(2,1fr); }.knowledge-grid,.guide-grid { grid-template-columns:1fr; }.page-header,.study-top { align-items:flex-start; flex-direction:column; }.search-wrap { width:100%; }.study-actions { width:100%; }.study-actions .btn { flex:1; }.stepper { overflow:auto; grid-template-columns:repeat(5,minmax(115px,1fr)); }.teacher-stats { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .task-grid,.stats { grid-template-columns:1fr; }.hero h1 { font-size:29px; }.section-head { align-items:flex-start; flex-direction:column; }.mini-steps { gap:4px; }.mini-step { font-size:9px; padding:8px 3px; }.main { padding-left:13px; padding-right:13px; }.teacher-stats { grid-template-columns:1fr; } }

/* Interactive simulations, Gemini prompts and admin workspace */
.guest-link { display:block; width:100%; margin-top:13px; border:1px dashed #9bd5c7; border-radius:12px; padding:10px; background:#f0fbf7; color:var(--green); font-weight:800; cursor:pointer; }
.simulation-card { margin-top:19px; padding:18px; border:1px solid #bce4d7; border-radius:18px; background:linear-gradient(145deg,#f8fffc,#eef9f7); box-shadow:0 10px 25px #25695b0d; }
.sim-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px; }.sim-head b { font-size:15px; }.sim-kicker { color:var(--green); font-size:10px; font-weight:900; letter-spacing:1px; }.sim-live { margin-left:auto; color:#1c987f; font-size:10px; font-weight:800; }.simulation-card p { color:#607b82; font-size:11px; margin-bottom:14px; }
.sim-controls { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.sim-controls label,.sim-wide { color:#476871; font-size:11px; font-weight:700; }.sim-controls output,.sim-wide output { float:right; color:var(--green); font-weight:900; }.sim-slider { display:block; width:100%; margin-top:9px; accent-color:var(--green); }.sim-result { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:15px; }.sim-result>div { padding:12px; border-radius:13px; background:#fff; border:1px solid #d8eee8; }.sim-result small { display:block; color:#789097; font-size:10px; margin-bottom:4px; }.sim-result strong { font:700 19px "Space Grotesk",sans-serif; }.sim-accent { color:var(--green); }.sim-note { font:700 12px/1.45 "Be Vietnam Pro",sans-serif!important; color:#52707a; }.sim-meter,.sim-progress { height:8px; margin-top:13px; overflow:hidden; border-radius:99px; background:#d8eee8; }.sim-meter span,.sim-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#55c9a8,#0b8d7c); transition:width .25s ease; }
.sim-stages { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.sim-stage { border:1px solid #d0e9e3; border-radius:13px; padding:10px 5px; background:#fff; color:#57727c; font-size:11px; font-weight:800; cursor:pointer; }.sim-stage span { display:block; font-size:22px; margin-bottom:4px; }.sim-stage.active { color:var(--green); border-color:#62bea7; background:#e1f7ee; box-shadow:0 5px 12px #217b6218; }.sim-stage-note { display:flex; gap:8px; margin-top:12px; padding:11px; border-radius:12px; color:#43656e; background:#fff; font-size:11px; }.sim-stage-note b { color:var(--green); text-transform:capitalize; }
.lung-visual { display:flex; align-items:center; justify-content:center; gap:18px; margin:15px 0; padding:13px; border-radius:14px; color:#1a5e67; background:#dff5f1; text-align:center; }.lung-visual span { font-size:40px; color:#3ab29b; }.lung-visual strong,.lung-visual small { display:block; }.lung-visual small { margin-top:3px; color:#5c7b82; font-size:10px; }.sim-note-box { margin-top:12px; padding:11px; border-radius:12px; color:#356872; background:#e6f6f3; font-size:11px; line-height:1.55; }.cross-grid { display:grid; grid-template-columns:.75fr 1.25fr; align-items:center; gap:15px; }.cross-parent { padding:15px; color:#356872; background:#fff; border-radius:13px; text-align:center; }.cross-parent b { color:var(--green); font-size:21px; }.punnett { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; text-align:center; }.punnett>* { padding:10px; border-radius:7px; background:#fff; color:#54727a; font-size:12px; }.punnett b { color:var(--green); background:#dff5ec; }.dna-helix { display:grid; gap:7px; margin-top:12px; padding:12px; border-radius:12px; color:#345e69; background:#fff; font-family:monospace; letter-spacing:2px; }.sim-dna-input { font-family:monospace; letter-spacing:3px; text-transform:uppercase; }.sim-lab-row { display:flex; gap:7px; }.sim-choice { border:1px solid #c2e4da; border-radius:10px; padding:9px 13px; background:#fff; color:#55727b; font-weight:800; cursor:pointer; }.sim-choice.active { background:#d9f4eb; color:var(--green); border-color:#78c9b2; }.sim-lab-output { margin-top:11px; padding:13px; border-radius:12px; color:#6a8389; background:#fff; font-size:11px; }.sim-lab-output.ready { color:#186c5e; background:#dcf6ed; }.evidence-list { display:grid; gap:8px; }.evidence-item { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid #d8ebe6; border-radius:11px; background:#fff; color:#52727b; font-size:11px; cursor:pointer; }.evidence-item.checked { border-color:#7dcbb7; color:var(--green); background:#e6f8f0; }.rubric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.rubric { border:1px solid #d4e9e4; border-radius:11px; padding:11px; background:#fff; color:#54737c; text-align:left; font-size:11px; font-weight:800; cursor:pointer; }.rubric.on { color:var(--green); border-color:#7bcab6; background:#e2f7ef; }.scenario-options { display:grid; gap:8px; }.scenario-option { border:1px solid #d4e9e4; border-radius:11px; padding:11px; background:#fff; color:#4f707a; text-align:left; font-size:11px; cursor:pointer; }.scenario-option:hover,.scenario-option.correct { color:var(--green); border-color:#70c6b0; background:#e1f7ee; }
.gemini-box { margin-top:18px; border:1px solid #d5c9f0; border-radius:15px; background:linear-gradient(145deg,#fbf9ff,#f4f0ff); overflow:hidden; }.gemini-box summary { padding:14px 16px; color:#624ea3; font-size:12px; font-weight:900; cursor:pointer; }.gemini-box>p { margin:0; padding:0 16px 10px; color:#74678d; font-size:11px; }.prompt-pre { display:block; width:calc(100% - 32px); min-height:190px; margin:0 16px; padding:13px; border:1px solid #e4dcf5; border-radius:11px; resize:vertical; background:#fff; color:#4d4664; font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }.prompt-actions { display:flex; gap:8px; padding:12px 16px 16px; }.prompt-actions .btn { font-size:11px; padding:9px 12px; color:#624ea3; border-color:#ddd2f5; }.prompt-actions .btn:hover { border-color:#b8a9e3; }
.admin-banner { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; padding:25px 28px; border-radius:20px; color:#fff; background:linear-gradient(115deg,#153f50,#0a8174); box-shadow:0 16px 35px #123e4d20; }.admin-banner h1 { margin-bottom:7px; }.admin-banner p { margin:0; color:#c8e8e5; font-size:12px; }.admin-banner .eyebrow { color:#a7f1ce; }.admin-tabs { display:flex; gap:8px; margin-bottom:17px; padding:7px; border-radius:15px; background:#eaf5f3; overflow:auto; }.admin-tab { display:flex; align-items:center; gap:8px; white-space:nowrap; border:0; border-radius:11px; padding:11px 15px; background:transparent; color:#637e84; font-weight:800; font-size:11px; cursor:pointer; }.admin-tab span { font-size:18px; }.admin-tab.active { color:var(--green); background:#fff; box-shadow:0 7px 15px #1b6c5c12; }.admin-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:17px; }.admin-metric { padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; }.admin-metric b { display:block; font:700 26px "Space Grotesk",sans-serif; color:var(--green); }.admin-metric span { display:block; margin-top:3px; color:#607b82; font-size:11px; }.admin-metric i { display:block; margin-top:10px; color:#8a9ca1; font-size:10px; font-style:normal; }.admin-grid-2 { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }.admin-card { padding:20px; border:1px solid var(--line); border-radius:17px; background:#fff; }.admin-card h2 { margin-bottom:15px; }.admin-check,.admin-user,.admin-row,.health { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid #edf2f3; }.admin-check:last-child,.admin-user:last-child,.admin-row:last-child,.health:last-child { border-bottom:0; }.admin-check>span { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; color:var(--green); background:#dff5ec; font-weight:900; }.admin-check.pending>span { color:#9a6b14; background:#fff1cb; }.admin-check b,.admin-user b { display:block; font-size:12px; }.admin-check small,.admin-user small { display:block; margin-top:3px; color:#82969c; font-size:10px; }.admin-list { display:grid; }.admin-row { justify-content:space-between; color:#637f85; font-size:11px; }.admin-row>b,.admin-task-title { color:#2d5964; }.admin-user .avatar { flex:0 0 34px; }.admin-user .status { margin-left:auto; }.admin-form { display:flex; gap:7px; margin-top:14px; }.admin-form .text-field { flex:1; }.timeline>div { position:relative; margin-left:8px; padding:0 0 18px 20px; border-left:2px solid #c8e8df; }.timeline>div:last-child { border:0; }.timeline>div:before { content:""; position:absolute; left:-6px; top:2px; width:9px; height:9px; border-radius:50%; background:var(--green); }.timeline b,.timeline span { display:block; }.timeline b { color:var(--green); font-size:10px; }.timeline span { margin-top:4px; color:#627c83; font-size:11px; }.health { justify-content:space-between; color:#55747b; font-size:11px; }.health b { color:var(--green); font-size:11px; }.health-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#23b485; }.health-dot.warn { background:#e4a53c; }.admin-lock { max-width:680px; margin:25px auto; padding:55px 30px; border:1px dashed #b3ced1; border-radius:21px; background:#fff; text-align:center; }.admin-lock .lock-icon { font-size:45px; margin-bottom:12px; }.admin-lock p { color:#71878d; font-size:12px; }
@media (max-width:820px){.admin-banner{align-items:flex-start;flex-direction:column}.admin-metrics,.admin-grid-2{grid-template-columns:1fr 1fr}.sim-controls,.cross-grid{grid-template-columns:1fr}.sim-stages{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.admin-metrics,.admin-grid-2,.sim-result{grid-template-columns:1fr}.prompt-actions{flex-direction:column}.prompt-actions .btn{width:100%}.admin-form{flex-direction:column}}

/* Lucide icon system */
.ui-icon { width:1em; height:1em; display:inline-block; flex:0 0 auto; vertical-align:-.16em; stroke:currentColor; }
.brand-mark .ui-icon { width:25px; height:25px; stroke-width:1.7; }
.nav-button .ui-icon { width:19px; height:19px; }
.nav-button span { display:grid; place-items:center; width:22px; height:22px; }
.ghost-btn .ui-icon,.btn .ui-icon { width:15px; height:15px; }
.task-top .ui-icon { width:13px; height:13px; }.task-time { display:inline-flex; align-items:center; gap:4px; }
.subject-tag { display:inline-flex; align-items:center; gap:6px; }.subject-tag .ui-icon { width:14px; height:14px; }
.task-icon .ui-icon { width:31px; height:31px; stroke-width:1.7; }.art-emoji .ui-icon { width:58px; height:58px; stroke-width:1.45; }
.float .ui-icon { width:23px; height:23px; stroke-width:1.7; }.eyebrow { display:inline-flex; align-items:center; gap:6px; }.eyebrow .ui-icon { width:14px; height:14px; }
.stat-icon .ui-icon { width:22px; height:22px; }.step-button span .ui-icon { width:18px; height:18px; }
.admin-tab span .ui-icon { width:18px; height:18px; }.admin-tab span { display:grid; place-items:center; }
.guest-link { display:flex; align-items:center; justify-content:center; gap:7px; }.guest-link .ui-icon { width:16px; height:16px; }
.admin-entry-link,.admin-back-link { display:flex; align-items:center; gap:6px; border:0; background:none; color:#65858b; font-size:10px; cursor:pointer; }.admin-entry-link { justify-content:center; width:100%; margin-top:12px; padding-top:12px; border-top:1px solid #edf3f3; }.admin-entry-link:hover,.admin-back-link:hover { color:var(--green); }.admin-entry-link .ui-icon,.admin-back-link .ui-icon { width:14px; height:14px; }.admin-back-link { margin:-22px 0 24px; padding:0; }

/* Admin authentication and polished control center */
.admin-auth-page { min-height:calc(100vh - 120px); display:grid; place-items:center; }
.admin-auth-shell { width:min(1100px,100%); min-height:620px; display:grid; grid-template-columns:1.08fr .92fr; overflow:hidden; border:1px solid #d4e9e5; border-radius:28px; background:#fff; box-shadow:0 28px 80px #164d5b1a; }
.admin-auth-visual { position:relative; overflow:hidden; padding:56px 50px; color:#effffc; background:radial-gradient(circle at 18% 12%,#2fc8a311 0 20%,transparent 21%),linear-gradient(145deg,#123b4c,#0b766f 72%,#0c9c84); }
.admin-auth-visual:after { content:""; position:absolute; width:420px; height:420px; right:-180px; bottom:-200px; border:1px solid #ffffff27; border-radius:50%; box-shadow:0 0 0 35px #ffffff0b,0 0 0 70px #ffffff08; }
.admin-auth-visual .eyebrow { position:relative; z-index:2; color:#a9f3d2; }.admin-auth-visual h1 { position:relative; z-index:2; max-width:460px; margin-top:22px; font-size:42px; }.admin-auth-visual>p { position:relative; z-index:2; max-width:445px; color:#c9ebe7; font-size:13px; }
.admin-auth-symbol { position:absolute; z-index:1; top:135px; right:80px; display:grid; place-items:center; width:120px; height:120px; border:1px solid #ffffff3b; border-radius:38px; color:#8ef1ca; background:#ffffff12; box-shadow:0 18px 44px #062d3b2e; transform:rotate(9deg); }.admin-auth-symbol .ui-icon { width:54px; height:54px; }
.admin-orbit { position:absolute; border:1px solid #a1f4d133; border-radius:50%; transform:rotate(-24deg); }.orbit-one { width:300px; height:92px; top:150px; right:-35px; }.orbit-two { width:340px; height:110px; top:138px; right:-55px; transform:rotate(36deg); }
.admin-auth-points { position:absolute; z-index:2; bottom:43px; left:50px; display:grid; gap:13px; color:#d8f5ef; font-size:12px; }.admin-auth-points span { display:flex; align-items:center; gap:9px; }.admin-auth-points .ui-icon { width:16px; height:16px; color:#83e8c2; }
.admin-auth-card { display:flex; flex-direction:column; justify-content:center; padding:45px 52px; background:#fff; }.admin-auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:40px; }.admin-auth-logo { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#fff; background:linear-gradient(140deg,#0b9c87,#087a78); box-shadow:0 9px 18px #087e722d; }.admin-auth-logo .ui-icon { width:24px; height:24px; }.admin-auth-brand b,.admin-auth-brand small { display:block; }.admin-auth-brand b { color:#173f4b; font-size:14px; }.admin-auth-brand small { margin-top:2px; color:#89a0a5; font-size:10px; }.admin-auth-card .eyebrow { color:var(--green); }.admin-auth-card h2 { margin:9px 0 5px; font-size:28px; }.admin-auth-subtitle { color:#748b90; font-size:12px; }.input-with-icon { position:relative; }.input-with-icon>.ui-icon { position:absolute; z-index:1; left:13px; top:13px; width:16px; height:16px; color:#7e999e; }.input-with-icon .text-field { padding-left:39px; }.admin-login-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:13px 0 19px; color:#7d9297; font-size:10px; }.admin-login-meta label { display:flex; align-items:center; gap:5px; }.admin-login-meta span { display:flex; align-items:center; gap:4px; color:#3f9b83; }.admin-login-meta .ui-icon { width:13px; height:13px; }.admin-login-button { width:100%; min-height:47px; margin-top:3px; }.admin-demo-fill { margin-top:13px; border:0; background:none; color:#66828a; font-size:10px; cursor:pointer; }.admin-demo-fill:hover { color:var(--green); }.admin-auth-foot { display:flex; justify-content:space-between; margin-top:33px; padding-top:14px; border-top:1px solid #edf3f3; color:#93a6aa; font-size:10px; }.admin-auth-foot span:first-child { display:flex; align-items:center; gap:5px; color:#4d9b87; }.admin-auth-foot .ui-icon { width:13px; height:13px; }
.admin-banner { position:relative; overflow:hidden; }.admin-banner:after { content:""; position:absolute; right:32px; top:-130px; width:290px; height:290px; border:1px solid #ffffff22; border-radius:50%; box-shadow:0 0 0 27px #ffffff08,0 0 0 54px #ffffff05; pointer-events:none; }.admin-banner>* { position:relative; z-index:1; }
.admin-card { box-shadow:0 10px 26px #315d6c08; }.admin-card h2 { display:flex; align-items:center; gap:8px; }.admin-card h2 .ui-icon { width:19px; height:19px; color:var(--green); }.admin-row .icon-btn { margin-left:auto; }.admin-list { max-height:370px; overflow:auto; padding-right:3px; }.admin-list::-webkit-scrollbar { width:5px; }.admin-list::-webkit-scrollbar-thumb { background:#cde5df; border-radius:10px; }
@media (max-width:900px){.admin-auth-shell{grid-template-columns:1fr}.admin-auth-visual{min-height:360px;padding:35px 30px}.admin-auth-visual h1{font-size:32px;max-width:390px}.admin-auth-symbol{top:38px;right:45px;transform:scale(.75) rotate(9deg)}.admin-auth-points{left:30px;bottom:29px}.admin-auth-card{padding:35px 30px}}
@media (max-width:520px){.admin-auth-visual{min-height:390px}.admin-auth-visual h1{font-size:29px}.admin-auth-symbol{top:32px;right:17px}.admin-auth-card{padding:28px 20px}.admin-auth-brand{margin-bottom:29px}.admin-login-meta{align-items:flex-start;flex-direction:column}.admin-banner{padding:22px 20px}}