/* Windows chrome and workspace proportions. All product overrides stay native-only. */
:root.native-client {
  --desktop-titlebar-height:40px;
  --desktop-rail-width:100px;
  --desktop-sidebar-width:224px;
  --desktop-chrome:#f2f8fc;
  --desktop-nav-hover:#eaf2f8;
  --desktop-nav-active:#e0edf9;
}
body.native-client {
  padding-top:var(--desktop-titlebar-height);
  overscroll-behavior:none;
}
.desktop-titlebar {
  position:fixed; inset:0 0 auto; height:var(--desktop-titlebar-height); z-index:1200;
  display:flex; align-items:center; border:0;
  background:linear-gradient(100deg,#edf6fc 0%,#f5f9fc 64%,#f1f8f9 100%);
  color:#2b4052; font:12px/1.2 "Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  user-select:none; -webkit-user-select:none;
}
.desktop-drag-region {
  display:flex; align-items:center; gap:12px; flex:1; min-width:0; height:100%;
  padding-left:18px; touch-action:none;
}
.desktop-brand { display:inline-flex; align-items:center; gap:9px; flex:none; font-weight:600; font-size:12px; letter-spacing:.025em; }
.desktop-brand svg { width:24px; height:24px; flex:none; }
.desktop-title-divider { width:3px; height:3px; border-radius:50%; background:#b4c7d7; flex:none; }
.desktop-screen { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#728393; }
.desktop-connection {
  margin-left:auto; margin-right:16px; display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px; border:0; border-radius:20px; color:#718491; background:#ffffff80;
  white-space:nowrap; font-size:11px;
}
.desktop-connection-dot { width:6px; height:6px; flex:none; border-radius:50%; background:#bacbd7; }
.desktop-connection[data-state=connected] { color:#397f78; background:#e3f2ed; }
.desktop-connection[data-state=connected] .desktop-connection-dot { background:#34988b; }
.desktop-connection[data-state=offline] { color:#996b38; background:#fff0df; }
.desktop-connection[data-state=offline] .desktop-connection-dot { background:#cf964e; }
.desktop-window-controls { height:var(--desktop-titlebar-height); display:flex; align-self:flex-start; flex:none; }
.desktop-window-controls button {
  width:46px; height:var(--desktop-titlebar-height); min-height:0; border:0; border-radius:0; padding:0;
  background:transparent; color:#617788; display:flex; align-items:center; justify-content:center;
  cursor:default; box-shadow:none; transition:background 120ms,color 120ms;
}
.desktop-window-controls button svg {
  width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1;
  stroke-linecap:square; stroke-linejoin:miter; pointer-events:none;
}
.desktop-window-controls button:hover { background:#deebf3; color:#294659; }
.desktop-window-controls button:active { background:#d4e3ee; }
.desktop-window-controls button:focus-visible { outline:2px solid var(--color-primary); outline-offset:-4px; }
.desktop-window-controls button[data-desktop-action=close]:hover { background:#c94949; color:#fff; }
.desktop-window-controls button[data-desktop-action=close]:active { background:#b33d3d; color:#fff; }
.desktop-titlebar.is-inactive .desktop-brand,.desktop-titlebar.is-inactive .desktop-window-controls { opacity:.62; }
.desktop-titlebar.is-inactive { background:#f3f7fa; }
.desktop-titlebar[data-closing=true] .desktop-window-controls button { pointer-events:none; opacity:.5; }

/* Quiet native surfaces: navigation is defined by spacing and color, not a frame. */
html.native-client :is(.side-nav-item,.sidebar-shortcut-link,.child-nav a,.icon-btn,.top-child-btn) {
  transition:background 160ms,color 160ms,box-shadow 160ms;
}
html.native-client :is(.side-nav-item,.sidebar-shortcut-link,.child-nav a,.top-child-btn):focus-visible {
  outline:2px solid var(--color-primary); outline-offset:3px;
}
html.native-client .workspace-statusbar {
  height:32px; padding:0 26px; border:0; background:#f6fafccc; color:#7a8a98;
  font-size:11px; letter-spacing:.01em;
}
html.native-client .workspace-statusbar i { width:5px; height:5px; background:#359b8d; }
html.native-client .learning-statusbar { padding:16px 4px 2px; border:0; color:#7b8d9a; }
html.native-client .admin-shell .sidebar { background:#f6fafc; border:0; box-shadow:none; }
html.native-client .admin-shell .sidebar-header { height:88px; padding:24px 24px 18px; }
html.native-client .admin-shell .brand-mark { width:36px; height:36px; border-radius:12px; background:#e4eefb; color:var(--color-primary); box-shadow:none; }
html.native-client .admin-shell .brand-mark .icon { width:22px; height:22px; }
html.native-client .admin-shell .brand-name { font-size:15px; color:#2b4052; letter-spacing:.01em; }
html.native-client .admin-shell .brand-sub { margin-top:3px; color:#8697a4; font-size:10px; }
html.native-client .admin-shell .sidebar-scroll { padding:18px 14px; scrollbar-width:thin; }
html.native-client .admin-shell .nav-caption { padding:0 14px 12px; color:#94a3af; font-size:11px; letter-spacing:.08em; }
html.native-client .admin-shell .nav-group+.nav-group { margin-top:30px; }
html.native-client .admin-shell .side-nav { gap:6px; }
html.native-client .admin-shell .side-nav-item {
  position:relative; height:46px; padding:0 14px; gap:12px; border:0; border-radius:14px;
  color:#657b8d; font-size:13px; font-weight:500;
}
html.native-client .admin-shell .side-nav-item:hover { background:var(--desktop-nav-hover); color:#365877; }
html.native-client .admin-shell .side-nav-item.active { background:var(--desktop-nav-active); color:#3574bb; font-weight:600; box-shadow:none; }
html.native-client .admin-shell .side-nav-item.active .nav-icon-box { color:#4b84c2; }
html.native-client .admin-shell .nav-icon-box .icon { width:19px; height:19px; stroke-width:1.6; }
html.native-client .admin-shell .nav-count-badge { padding:2px 6px; border:0; border-radius:7px; background:#ffffff80; color:#8099b1; font-size:10px; }
html.native-client .admin-shell .sidebar-footer { padding:16px 14px 20px; border:0; }
html.native-client .admin-shell .sidebar-shortcuts { padding-bottom:16px; }
html.native-client .admin-shell .sidebar-shortcut-link { min-height:38px; padding:8px 12px; border-radius:12px; gap:10px; color:#7a8e9e; }
html.native-client .admin-shell .sidebar-shortcut-link:hover { background:#eaf3f5; color:#38887f; }
html.native-client .admin-shell .sidebar-user-card { padding:14px 10px 0; border:0; }
html.native-client .admin-shell .sidebar-user-card .avatar { width:34px; height:34px; border:0; border-radius:12px; background:#e5eeef; color:#52777a; }
html.native-client .admin-shell .user-name { font-size:12px; color:#405969; }
html.native-client .admin-shell .user-role-badge { color:#8a9ba7; font-size:10px; }
html.native-client .admin-shell .logout-action { border:0; border-radius:10px; }
html.native-client .admin-top { height:60px; flex-basis:60px; padding:0 28px; border:0; background:#fbfdffb8; }
html.native-client .admin-top .collapse-sidebar { width:34px; height:34px; border:0; border-radius:11px; color:#8396a6; }
html.native-client .admin-top .collapse-sidebar:hover { background:#e8f0f7; color:#4c718e; }
html.native-client .admin-top .top-breadcrumb { font-size:12px; gap:10px; }
html.native-client .admin-top .bc-item.active { color:#5d7488; font-weight:500; }
html.native-client .admin-top .top-child-btn { min-height:34px; padding:8px 12px; border:0; border-radius:12px; color:#508b83; background:#edf7f4; }
html.native-client .admin-top .top-child-btn:hover { background:#dff0eb; color:#2b7c71; }
html.native-client .admin-main {
  background:radial-gradient(ellipse at 96% 0%,#e5f2f45c,transparent 48%),radial-gradient(ellipse at 0% 100%,#eaf1fd80,transparent 50%),#f3f8fc;
  padding:28px 32px 32px; scrollbar-width:thin; scrollbar-color:#cbd9e2 transparent;
}
html.native-client :is(.admin-main,.sidebar-scroll,.studio-canvas,.studio-settings)::-webkit-scrollbar { width:7px; height:7px; }
html.native-client :is(.admin-main,.sidebar-scroll,.studio-canvas,.studio-settings)::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:10px; background:#cbd9e2; background-clip:padding-box; }
html.native-client :is(.admin-main,.sidebar-scroll,.studio-canvas,.studio-settings)::-webkit-scrollbar-thumb:hover { background:#afc5d4; background-clip:padding-box; }

@media(min-width:761px) {
  html.native-client .admin-shell { grid-template-columns:var(--desktop-sidebar-width) minmax(0,1fr); height:calc(100dvh - var(--desktop-titlebar-height)); min-height:0; }
  html.native-client .admin-shell.sidebar-collapsed { grid-template-columns:80px minmax(0,1fr); }
  html.native-client .sidebar-collapsed .sidebar-header { justify-content:center; padding:24px 12px 18px; }
  html.native-client .sidebar-collapsed .sidebar-scroll { padding-inline:12px; }
  html.native-client .sidebar-collapsed .side-nav-item { padding:0; }
  html.native-client .sidebar-collapsed .sidebar-footer { padding-inline:10px; }
  html.native-client .sidebar-collapsed .sidebar-user-card { padding-inline:0; }
  html.native-client .sidebar-collapsed .side-nav-item:is(:hover,:focus-visible)::after { left:74px; border:0; border-radius:10px; padding:10px 14px; box-shadow:0 8px 24px #52769720; }
  html.native-client .child-shell { grid-template-columns:var(--desktop-rail-width) minmax(0,1fr); min-height:calc(100dvh - var(--desktop-titlebar-height)); background:transparent; }
  html.native-client .child-mode .child-header,html.native-client .child-mode.classroom-mode .child-header {
    position:sticky; top:var(--desktop-titlebar-height); align-self:start; width:var(--desktop-rail-width);
    height:calc(100dvh - var(--desktop-titlebar-height)); min-height:0; padding:24px 14px 22px;
    display:flex; flex-direction:column; gap:34px; border:0; background:#f6fbfd; box-shadow:none;
  }
  html.native-client .child-header .brand-mark { width:48px; height:48px; border:0; border-radius:17px; background:#e6effb; }
  html.native-client .child-mode .child-nav,html.native-client .child-mode.classroom-mode .child-nav { display:flex; position:static; flex-direction:column; width:100%; margin:0; padding:0; gap:12px; border:0; background:transparent; }
  html.native-client .child-mode .child-nav a {
    position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;
    width:100%; min-width:0; min-height:76px; height:76px; padding:12px 8px; gap:8px;
    border:0; border-radius:20px; background:transparent; color:#8799a8; font-size:12px; font-weight:500;
    box-shadow:none;
  }
  html.native-client .child-mode .child-nav a>span:last-child { position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip-path:none; white-space:normal; line-height:18px; }
  html.native-client .child-mode .child-nav a:hover { background:#eaf2fa; color:#4f7eaa; }
  html.native-client .child-mode .child-nav a.active { border:0; color:#3c79b9; background:#e1eefb; box-shadow:none; font-weight:600; }
  html.native-client .child-nav-icon { display:grid; place-items:center; width:26px; height:26px; }
  html.native-client .child-nav-icon img { width:24px; height:24px; }
  html.native-client .child-mode .child-header .child-profile { width:100%; margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:16px; justify-self:auto; }
  html.native-client .child-profile .learning-preferences { width:46px; height:46px; border:0; border-radius:16px; color:#8197a5; background:transparent; }
  html.native-client .child-profile .learning-preferences:hover { background:#e7f0f5; }
  html.native-client .child-profile .btn { width:100%; min-height:38px; border:0; border-radius:12px; padding:8px 4px; background:#edf3f7; color:#8295a5; font-size:10px; line-height:17px; white-space:normal; }
  html.native-client .child-profile .btn:hover { background:#e2eef6; color:#56768f; }
  html.native-client .child-mode .child-main,html.native-client .child-mode.classroom-mode .child-main { min-height:calc(100dvh - var(--desktop-titlebar-height)); padding:28px 32px 16px; }
  html.native-client #learning-home-assistant .learning-assistant,html.native-client #learning-assistant .learning-assistant { min-height:calc(100dvh - var(--desktop-titlebar-height) - 76px); }
  html.native-client .admin-main:has(.studio-editor) { height:auto; padding-top:24px; padding-bottom:12px; }
}
@media(min-width:761px) and (max-width:1080px) {
  :root.native-client { --desktop-rail-width:88px; --desktop-sidebar-width:208px; }
  html.native-client .child-mode .child-header,html.native-client .child-mode.classroom-mode .child-header { padding-inline:10px; }
  html.native-client .child-mode .child-main,html.native-client .child-mode.classroom-mode .child-main { padding-inline:24px; }
  html.native-client .admin-main { padding:24px; }
}
/* A common 768px laptop window keeps the teaching action and status in view. */
@media(min-width:761px) and (max-height:800px) {
  html.native-client .child-mode .child-main,html.native-client .child-mode.classroom-mode .child-main { padding-top:22px; padding-bottom:10px; }
  html.native-client .child-home-left { gap:18px; }
  html.native-client .child-home-workspace .guided-home-heading { height:62px; }
  html.native-client .child-home-workspace .course-invitation { min-height:264px; padding:24px 28px; gap:28px; border-radius:28px; }
  html.native-client .child-home-workspace .guided-home-art { height:186px; }
  html.native-client .child-home-workspace .guided-home-actions { margin-top:20px; }
  html.native-client .home-course-library>header { margin-bottom:12px; }
  html.native-client .home-course-library .course-card { min-height:192px; padding:14px; }
  html.native-client .home-course-library .course-cover { height:92px; }
  html.native-client .guided-toolbar { min-height:62px; }
  html.native-client .guided-classroom .mvp-question,
  html.native-client .guided-classroom .mvp-question:has(.multi-options.picture-options),
  html.native-client .guided-classroom .guided-story { min-height:540px; padding:22px 28px; }
  html.native-client .guided-classroom .mvp-question h2 { font-size:26px; line-height:39px; margin-bottom:16px; }
  html.native-client .guided-classroom .picture-options:not(.multi-options) .answer-option { min-height:248px; }
  html.native-client .guided-classroom .picture-options:not(.multi-options) .answer-option img { height:186px; }
  html.native-client .guided-classroom .picture-options.multi-options .answer-option { min-height:160px; }
  html.native-client .guided-classroom .picture-options.multi-options .answer-option img { height:104px; }
  html.native-client .guided-classroom .courseware-response { margin-top:14px; }
  html.native-client .guided-classroom .courseware-nav { padding-top:12px; }
  html.native-client .learning-statusbar { padding-top:12px; }
  html.native-client #learning-home-assistant .learning-assistant,html.native-client #learning-assistant .learning-assistant { min-height:calc(100dvh - var(--desktop-titlebar-height) - 64px); padding-top:12px; padding-bottom:16px; }
  html.native-client .assistant-robot { width:224px; height:292px; margin-top:16px; }
  html.native-client .assistant-bubble { min-height:132px; padding:20px; }
  html.native-client .assistant-message,html.native-client #learning-home-assistant .assistant-message { font-size:18px; line-height:29px; }
  html.native-client .assistant-presence { margin-top:10px; }
}
@media(max-width:760px) {
  .desktop-connection-label { display:none; }
  .desktop-drag-region { padding-left:12px; gap:9px; }
  .desktop-connection { margin-right:10px; padding:6px; background:transparent; }
  .desktop-connection-dot { width:5px; height:5px; }
  .desktop-window-controls button { width:42px; }
  html.native-client .workspace-statusbar { padding-inline:16px; }
  html.native-client .admin-main { padding:22px 16px; }
  html.native-client .admin-top { padding-inline:16px; }
  html.native-client .admin-shell .sidebar { top:var(--desktop-titlebar-height); height:calc(100dvh - var(--desktop-titlebar-height)); }
  html.native-client .child-mode .child-header { border:0; background:#f6fbfd; }
}
@media(max-width:440px) {
  .desktop-screen { max-width:104px; font-size:11px; }
  .desktop-drag-region { gap:7px; }
  .desktop-brand { gap:6px; font-size:11px; }
  .desktop-brand svg { width:21px; height:21px; }
  .desktop-connection { margin-right:4px; padding:3px; }
  .desktop-window-controls button { width:36px; }
}
@media(prefers-reduced-motion:reduce) {
  html.native-client :is(.side-nav-item,.sidebar-shortcut-link,.child-nav a,.icon-btn,.top-child-btn),.desktop-window-controls button { transition:none; }
}
@media print {
  body.native-client { padding-top:0; }
  .desktop-titlebar { display:none; }
}
/* The desktop rail is outside the classroom; only the title bar uses height. */
@media(min-width:761px){
 html.native-client .child-mode.classroom-mode .child-main{height:calc(100dvh - var(--desktop-titlebar-height));min-height:0;padding:20px 28px 12px}
 html.native-client #learning-assistant .learning-assistant{height:100%;min-height:0;padding:16px}
 html.native-client .guided-classroom .mvp-question,html.native-client .guided-classroom .mvp-question:has(.multi-options.picture-options),html.native-client .guided-classroom .guided-story{min-height:0;padding:24px}
 html.native-client .guided-toolbar{min-height:0}
 html.native-client .guided-classroom .picture-options .answer-option,html.native-client .guided-classroom .picture-options.multi-options .answer-option{min-height:112px}
 html.native-client .guided-classroom .picture-options:not(.multi-options) .answer-option{min-height:112px}
 html.native-client .guided-classroom .picture-options .answer-option img,html.native-client .guided-classroom .picture-options.multi-options .answer-option img{height:0;min-height:0}
 html.native-client .guided-classroom .picture-options:not(.multi-options) .answer-option img{height:0;min-height:0}
 html.native-client #learning-assistant .assistant-robot{width:100%;height:100%;min-height:0;margin:8px 0}
 html.native-client #learning-assistant .assistant-bubble{min-height:0}
 html.native-client .guided-classroom .learning-statusbar{padding-top:0}
}