/* Vibekids design system — ported from flow-mockup/html/style.css.
   Warm purple/coral/lime flat-cartoon. Mockup browser-chrome rules removed. */

:root{
  --purple:#7C5CE6; --purple-deep:#5B3FC4; --purple-soft:#EDE7FB;
  --coral:#FF7A6B; --coral-deep:#F2553F; --coral-soft:#FFE6E1;
  --lime:#9FD23C; --lime-deep:#7FB325; --lime-soft:#EEF7D6;
  --cream:#FFF8EE; --card:#FFFFFF;
  --ink:#3A2F4A; --muted:#8C8199; --line:#ECE4F5;
  --ok:#3FB27F; --skip:#B6AABE;
  --shadow:0 10px 30px rgba(91,63,196,.10);
  --shadow-sm:0 4px 14px rgba(91,63,196,.08);
  --r:18px; --r-lg:26px;
  --font: 'SF Pro Rounded','SF Pro Display',ui-rounded,-apple-system,system-ui,'Segoe UI',sans-serif;
  --mono:'SF Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.45}

/* ---------- auth screens ---------- */
.auth{min-height:100vh;display:flex}
.auth .brandside{width:46%;background:linear-gradient(150deg,var(--purple) 0%,var(--coral) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;padding:40px}
.auth .brandside img{width:280px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.18))}
.auth .brandside h1{font-size:46px;font-weight:800;letter-spacing:-1px}
.auth .brandside p{font-size:20px;opacity:.92;max-width:360px;text-align:center}
.auth .formside{flex:1;display:flex;align-items:flex-start;justify-content:center;padding-top:40px} /* align top so tall forms don't clip/center offscreen; whole page scrolls */
.formcard{width:420px}
html, body { height: auto; min-height: 100%; } /* allow natural document height for auth + other full-bleed pages */
.formcard h2{font-size:30px;font-weight:800;margin-bottom:6px}
.formcard .sub{color:var(--muted);margin-bottom:26px}

.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px}
.logo img{width:40px;height:40px}
.logo b{color:var(--purple)} .logo b span{color:var(--coral)}

label{display:block;font-weight:600;font-size:15px;margin:16px 0 7px}
.input{width:100%;height:52px;border:2px solid var(--line);border-radius:14px;padding:0 16px;font:inherit;background:#fff;color:var(--ink)}
.input.filled{border-color:var(--purple-soft);background:#FCFAFF}
.row{display:flex;gap:14px}.row>*{flex:1}

.btn{height:54px;border:none;border-radius:14px;font:inherit;font-weight:700;font-size:18px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;padding:0 26px}
.btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none!important}
.btn.primary{background:var(--purple);color:#fff;box-shadow:0 8px 18px rgba(124,92,230,.35)}
.btn.coral{background:var(--coral);color:#fff;box-shadow:0 8px 18px rgba(242,85,63,.30)}
.btn.lime{background:var(--lime);color:#274d00}
.btn.ghost{background:#fff;color:var(--purple);border:2px solid var(--purple-soft)}
.btn.block{width:100%}
.btn.sm{height:40px;font-size:15px;padding:0 16px;border-radius:11px}
.btn.big{height:64px;font-size:22px}
.muted-link{color:var(--muted);font-size:15px;margin-top:18px;text-align:center}
.muted-link a{color:var(--purple);font-weight:600;text-decoration:none}

/* ---------- teacher app shell ---------- */
.app{height:100%;display:flex;flex-direction:column}
.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  padding:0 30px;gap:20px;flex:0 0 auto}
.topbar .logo{font-size:21px}.topbar .logo img{width:34px;height:34px}
.topbar .spacer{flex:1}
.crumbs{color:var(--muted);font-size:15px}.crumbs b{color:var(--ink)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--purple);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.pill{background:var(--purple-soft);color:var(--purple-deep);border-radius:20px;padding:6px 14px;font-size:14px;font-weight:600}

.body{flex:1;display:flex;overflow:hidden}
.content{flex:1;padding:34px 40px;overflow-y:auto}
.page-h{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.page-h h1{font-size:30px;font-weight:800}
.page-h .spacer{flex:1}

/* ---------- kid app sidebar ---------- */
.kid-shell{height:100%;display:flex;background:var(--cream)}
.sidebar{width:108px;background:linear-gradient(180deg,var(--purple),var(--purple-deep));
  display:flex;flex-direction:column;align-items:center;padding:22px 0;gap:8px;flex:0 0 auto}
.sidebar .mark{width:52px;height:52px;border-radius:16px;background:#fff;display:flex;align-items:center;
  justify-content:center;margin-bottom:18px;overflow:hidden}
.sidebar .mark img{width:46px}
.nav-item{width:84px;padding:12px 0;border-radius:16px;color:#fff;text-align:center;font-size:12px;font-weight:600;opacity:.78}
.nav-item .ic{font-size:24px;display:block;margin-bottom:4px}
.nav-item.active{background:rgba(255,255,255,.18);opacity:1}
.kid-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.kid-top{height:74px;display:flex;align-items:center;padding:0 34px;gap:16px;border-bottom:1px solid var(--line);background:#fff}
.kid-top h1{font-size:24px;font-weight:800}.kid-top .spacer{flex:1}
.kid-body{flex:1;padding:30px 34px;overflow-y:auto}
.kidface{width:44px;height:44px;border-radius:50%;background:var(--coral-soft);display:flex;align-items:center;justify-content:center;font-size:24px}
.streak{background:var(--lime-soft);color:var(--lime-deep);border-radius:20px;padding:7px 14px;font-weight:700;font-size:14px}

/* ---------- cards / grids ---------- */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px}
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:1fr 1fr}

/* ---------- responsive: stack on narrow / zoomed screens ---------- */
/* Without this the form rows + grids stay multi-column and .content's overflow:hidden
   clips them (e.g. the theme-color swatches get cut off). */
@media (max-width: 720px){
  .content{padding:20px 16px;overflow-x:hidden}
  .row{flex-direction:column}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .table .th,.table .tr{grid-template-columns:40px 1.3fr 1fr 100px;font-size:13px}
  .table .th>:nth-child(3),.table .tr>:nth-child(3){display:none} /* hide 'Login (auto)' col on mobile */
  .topbar .crumbs{display:none}
  .card{max-width:100%;box-sizing:border-box} /* cap any inline fixed-width card so it can't overflow */
}

.class-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:22px;border:1px solid var(--line)}
.class-card .top{display:flex;justify-content:space-between;align-items:flex-start}
.class-card h3{font-size:20px;font-weight:800}
.class-card .meta{color:var(--muted);font-size:14px;margin-top:3px}
.swatch{width:46px;height:46px;border-radius:14px}
.bar{height:9px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:14px}
.bar>i{display:block;height:100%;background:var(--lime);border-radius:6px}
.add-card{border:2.5px dashed var(--purple-soft);background:#FCFAFF;border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--purple);font-weight:700;min-height:170px}
.add-card .plus{width:54px;height:54px;border-radius:50%;background:var(--purple);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center}

/* ---------- roster table ---------- */
.table{width:100%;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid var(--line)}
.table .th,.table .tr{display:grid;grid-template-columns:54px 1.4fr 1fr 1fr 120px;align-items:center;padding:15px 22px;gap:12px}
.table .th{background:#FAF7FF;color:var(--muted);font-weight:700;font-size:14px;border-bottom:1px solid var(--line)}
.table .tr{border-bottom:1px solid var(--line);font-size:16px}
.table .tr:last-child{border-bottom:none}
.chip{display:inline-block;background:var(--purple-soft);color:var(--purple-deep);border-radius:8px;padding:4px 10px;font-family:var(--mono);font-size:14px;font-weight:600}
.kavatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}

/* ---------- builder ---------- */
/* Builder is full-bleed (no topbar); panes scroll inside, not the page. */
html.builder-html,body.builder-body{margin:0;height:100%;overflow:hidden}
body.builder-body{display:flex;flex-direction:column;height:100vh;max-height:100vh}
body.builder-body .builder-page{flex:1 1 0;min-height:0;height:auto!important;overflow:hidden}
body.builder-body .builder-page .sidebar{width:72px;padding:10px 0;gap:4px}
body.builder-body .builder-page .sidebar .mark{width:40px;height:40px;margin-bottom:6px;border-radius:12px}
body.builder-body .builder-page .nav-item{width:60px;padding:6px 0;font-size:10px}
body.builder-body .builder-page .nav-item .ic{font-size:20px;margin-bottom:2px}
body.builder-body .kid-main{flex:1 1 0;min-height:0;overflow:hidden}
body.builder-body .builder-strip{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:5px 12px;min-height:34px;
  background:linear-gradient(120deg,var(--purple),var(--coral));color:#fff;font-size:13px;font-weight:600}
body.builder-body .builder-strip .ic{font-size:18px;flex:0 0 auto}
body.builder-body .builder-back{color:#fff;text-decoration:none;font-size:18px;font-weight:800;opacity:.9;padding:0 2px}
body.builder-body .builder-strip-title{white-space:nowrap;font-weight:800}
body.builder-body .builder-strip-goal{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:.88;font-size:12px;font-weight:500}
body.builder-body .builder-vocab{flex:0 0 auto;background:rgba(255,255,255,.2);border-radius:10px;padding:3px 10px;font-size:12px}
body.builder-body .builder-resume{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:5px 12px;
  background:var(--lime-soft);border-bottom:1px solid var(--lime);font-size:13px;font-weight:600}
body.builder-body .builder-parent-note{flex:0 0 auto;font-size:12px;border-bottom:1px solid var(--line);background:#FCFAFF}
body.builder-body .builder-parent-note summary{padding:4px 12px;cursor:pointer;font-weight:700;color:var(--purple-deep)}
body.builder-body .builder-parent-note p{padding:0 12px 6px;margin:0}
body.builder-body .builder-wrap{flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
body.builder-body .builder{flex:1 1 0;min-height:0;display:grid;grid-template-columns:1.08fr .92fr 200px;grid-template-rows:minmax(0,1fr);gap:0}
.b-pane{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--line);min-height:0}
.b-head{height:50px;flex:0 0 50px;display:flex;align-items:center;gap:9px;padding:0 18px;background:#fff;border-bottom:1px solid var(--line);font-weight:700;font-size:15px}
body.builder-body .b-head{height:34px;flex:0 0 34px;font-size:13px;padding:0 10px}
.b-head .ic{font-size:18px}
body.builder-body .b-head .ic{font-size:15px}
.term{flex:1 1 0;min-height:0;background:#241B33;color:#EDE7FB;font-family:var(--mono);font-size:15px;line-height:1.6;padding:18px 20px;overflow:hidden}
.term.term-embed{position:relative;padding:0;overflow:hidden}
.term.term-embed #vk-ttyd{position:absolute;inset:0;width:100%;height:100%;border:0}
.term .u{color:var(--lime)} .term .a{color:#C9B8FF} .term .d{color:#9C90AD} .term .ok{color:#7FE6B0}
.term .cursor{display:inline-block;width:9px;height:18px;background:var(--lime);vertical-align:-3px;margin-left:2px}
.term .prompt{margin-top:10px}
.preview{flex:1;min-height:0;background:repeating-conic-gradient(#F4EEFB 0% 25%,#fff 0% 50%) 50%/26px 26px;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.preview iframe{width:100%;height:100%;border:0}
.preview img{max-width:100%;max-height:100%;border-radius:18px;box-shadow:var(--shadow)}
.cpanel{background:#fff;display:flex;flex-direction:column;padding:18px;gap:14px;overflow-y:auto;min-height:0}
body.builder-body .cpanel{padding:8px 10px;gap:6px}
body.builder-body .cpanel h4{font-size:10px;margin:0;letter-spacing:.4px}
body.builder-body .cpanel .mt{margin-top:8px}
body.builder-body .task-btn{padding:7px 9px;font-size:12px;border-radius:10px;line-height:1.3}
body.builder-body .stepchip{padding:4px 8px;font-size:11px}
body.builder-body .btn.sm{height:32px;font-size:13px;padding:0 12px}
.cpanel h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.drop{border:2.5px dashed var(--purple-soft);border-radius:16px;background:#FCFAFF;padding:20px;text-align:center;color:var(--purple);font-weight:600;font-size:14px}
.drop .ic{font-size:30px;display:block;margin-bottom:6px}
.task-btn{width:100%;text-align:left;background:var(--purple-soft);border:none;border-radius:13px;padding:12px 14px;font:inherit;font-weight:600;color:var(--purple-deep);display:flex;align-items:center;gap:9px;cursor:pointer}

/* ---------- lessons ladder ---------- */
.ladder{display:flex;flex-direction:column;gap:0;max-width:560px}
.rung{display:flex;align-items:center;gap:18px;padding:8px 0;position:relative}
.rung .node{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:26px;flex:0 0 auto;z-index:2}
.rung.done .node{background:var(--lime);color:#274d00}
.rung.active .node{background:var(--coral);color:#fff;box-shadow:0 0 0 6px var(--coral-soft)}
.rung.locked .node{background:#fff;border:2px solid var(--line);color:var(--skip)}
.rung .info h3{font-size:19px;font-weight:800}
.rung .info p{color:var(--muted);font-size:14px}
.rung .status{margin-left:auto;font-weight:700;font-size:14px}
.rung.done .status{color:var(--lime-deep)}.rung.active .status{color:var(--coral-deep)}.rung.locked .status{color:var(--skip)}
.rung:not(:last-child):after{content:"";position:absolute;left:27px;top:48px;width:3px;height:34px;background:var(--line);z-index:1}
.rung.done:not(:last-child):after{background:var(--lime)}

/* ---------- gallery ---------- */
.gcard{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid var(--line)}
.gcard .thumb{aspect-ratio:1/1;overflow:hidden;background:var(--cream)}
.gcard .thumb img{width:100%;height:100%;object-fit:cover}
.gcard .cap{padding:13px 15px}
.gcard .cap h4{font-size:16px;font-weight:800}
.gcard .cap .by{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:7px;margin-top:3px}
.gcard .cap .by .d{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
.heart{color:var(--coral);font-weight:700;font-size:13px}

/* ---------- issues ---------- */
.issue{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-sm)}
.issue .from{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:0 0 auto}
.issue .txt{flex:1}
.issue .txt .who{font-weight:700}.issue .txt .who span{color:var(--muted);font-weight:500;font-size:14px}
.issue .txt p{margin-top:3px}
.issue .acts{display:flex;gap:8px;align-items:center}
.tag{border-radius:10px;padding:6px 12px;font-weight:700;font-size:13px}
.tag.open{background:var(--coral-soft);color:var(--coral-deep)}
.tag.done{background:var(--lime-soft);color:var(--lime-deep)}
.tag.skip{background:#F0ECF4;color:var(--skip)}
.issue.is-done{opacity:.72}.issue.is-skip{opacity:.6}

/* ---------- mastery ---------- */
.skill{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)}
.skill h4{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.skill .lvl{color:var(--muted);font-size:14px;margin:3px 0 12px}
.mbar{height:12px;border-radius:7px;background:var(--line);overflow:hidden}
.mbar>i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--purple),var(--coral))}
.trend{font-size:13px;font-weight:700;color:var(--ok);margin-top:8px}

/* ---------- share with parent ---------- */
.sharewrap{height:100%;display:flex;align-items:center;justify-content:center}
.sharecard{width:760px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:36px;display:flex;gap:30px;align-items:center}
.sharecard .preview-mini{width:280px;flex:0 0 auto;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
.sharecard .preview-mini img{width:100%;display:block}
.sharecard h2{font-size:26px;font-weight:800}
.linkbox{display:flex;gap:10px;margin:16px 0}
.linkbox .input{font-family:var(--mono);font-size:14px}
.chan{display:flex;gap:10px;margin-top:8px}
.chan .c{flex:1;border:2px solid var(--line);border-radius:14px;padding:14px;text-align:center;font-weight:700;font-size:14px;color:var(--ink)}
.chan .c .ic{font-size:24px;display:block;margin-bottom:5px}

/* ---------- lesson-first components ---------- */
.learn-banner{background:linear-gradient(120deg,var(--purple),var(--coral));color:#fff;
  border-radius:18px;padding:14px 20px;display:flex;align-items:center;gap:16px}
.learn-banner .ic{font-size:30px}
.learn-banner .lbl{font-size:13px;text-transform:uppercase;letter-spacing:.6px;opacity:.85;font-weight:700}
.learn-banner h3{font-size:20px;font-weight:800;line-height:1.2}
.learn-banner p{font-size:14px;opacity:.92}
.vocab{display:inline-flex;align-items:center;gap:8px;background:var(--lime-soft);color:var(--lime-deep);
  border-radius:14px;padding:9px 14px;font-weight:700;font-size:15px}
.vocab b{color:var(--ink)}
.concept-tag{display:inline-block;background:var(--purple-soft);color:var(--purple-deep);border-radius:10px;
  padding:5px 12px;font-weight:700;font-size:14px}
.whatlearn{display:flex;flex-direction:column;gap:9px}
.whatlearn div{display:flex;gap:10px;align-items:flex-start}
.whatlearn .b{color:var(--lime-deep);font-weight:800}
.lesson-hero{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px;display:flex;gap:28px;align-items:center}
.lesson-hero .art{width:230px;flex:0 0 auto;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
.lesson-hero .art img{width:100%;display:block}
.stepchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.stepchip{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:8px 13px;font-weight:600;font-size:14px;color:var(--ink)}
.stepchip.now{background:var(--coral-soft);border-color:var(--coral);color:var(--coral-deep)}
.stepchip.done{background:var(--lime-soft);border-color:var(--lime);color:var(--lime-deep)}

/* helpers */
.muted{color:var(--muted)} .mt{margin-top:16px}.mt-s{margin-top:8px}.mb{margin-bottom:16px}
.center{display:flex;align-items:center;justify-content:center}
h2.section{font-size:20px;font-weight:800;margin:6px 0 16px}

/* ---------- Avatar Dropdown ---------- */
.avatar-container {
  position: relative;
  display: inline-block;
}
.avatar-container .avatar {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}
.avatar-container .avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(124,92,230,0.3);
}
.avatar-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 52px;
  width: 270px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
  z-index: 1000;
  text-align: left;
  animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.avatar-dropdown.active {
  display: block;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.avatar-dropdown .dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}
.avatar-dropdown .avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-dropdown .dropdown-user {
  flex: 1;
  overflow: hidden;
}
.avatar-dropdown .dropdown-user h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-dropdown .dropdown-user p {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.avatar-dropdown .dropdown-divider {
  border: none;
  border-top: 2px solid var(--line);
  margin: 12px 0;
}
.avatar-dropdown .dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.avatar-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.avatar-dropdown .dropdown-item:hover {
  background: var(--purple-soft);
  color: var(--purple-deep);
}
.avatar-dropdown .logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  background: var(--coral-soft);
  color: var(--coral-deep);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.avatar-dropdown .logout-btn:hover {
  background: var(--coral);
  color: #fff;
}
.avatar-dropdown .logout-btn:active {
  transform: scale(0.98);
}