:root { --primary:#2563eb; --accent:#38bdf8; --dark:#172554; --sidebar-start:#172554; --sidebar-end:#1e3a8a; --bg:#f5f7fb; --card:#fff; --border:#e5e7eb; --muted:#64748b; --danger:#991b1b; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,Arial,sans-serif; background:var(--bg); color:#1f2937; transition:background-color .35s ease; }
button,input,select,textarea { font:inherit; }
.hidden { display:none !important; }
.center { text-align:center; }
.auth { max-width:430px; margin:8vh auto; background:#fff; padding:30px; border:1px solid var(--border); border-radius:18px; box-shadow:0 12px 35px #17255412; }
.auth-pending { visibility:hidden; }
.auth h1 { margin-bottom:6px; text-align:center; color:var(--dark); }
.app-logo { display:block; object-fit:contain; }
.auth-logo { width:82px; height:82px; margin:0 auto 10px; }
.side-logo { width:52px; height:52px; margin-bottom:10px; }
.auth label,.auth input { display:block; width:100%; }
.auth label { margin-top:16px; }
.app { display:flex; min-height:100vh; }
.side { position:sticky; top:0; display:flex; flex-direction:column; width:260px; height:100vh; flex:none; overflow:hidden; background:linear-gradient(165deg,var(--sidebar-start),var(--sidebar-end)); color:#fff; padding:20px 14px; box-shadow:8px 0 28px #0f172a14; transition:background .35s ease; }
.brand { display:grid; grid-template-columns:1fr; align-items:center; gap:12px; min-height:84px; padding:10px 10px 18px; border-bottom:1px solid #ffffff22; }
.brand.has-logo { grid-template-columns:54px minmax(0,1fr); }
.brand:not(.has-logo) .brand-logo-wrap { display:none; }
.brand h2 { margin:0; overflow:hidden; text-overflow:ellipsis; font-size:21px; letter-spacing:.02em; }
.brand small { display:block; margin-top:4px; overflow:hidden; color:#dbeafe; text-overflow:ellipsis; white-space:nowrap; }
.side-logo { width:52px; height:52px; margin:0; padding:4px; border-radius:12px; background:#ffffff12; }
.side > #userRole { margin:14px 4px 12px; padding:10px 11px; border:1px solid #ffffff18; border-radius:10px; background:#ffffff0d; color:#e0e7ff; font-size:12px; line-height:1.45; }
.nav { display:flex; flex:1; flex-direction:column; gap:5px; min-height:0; }
.nav button { display:flex; align-items:center; gap:11px; width:100%; border:1px solid transparent; background:transparent; color:#dbeafe; text-align:left; padding:11px 12px; border-radius:10px; cursor:pointer; transition:background-color .2s ease,transform .2s ease,border-color .2s ease; }
.nav button:hover { background:#ffffff12; color:#fff; transform:translateX(2px); }
.nav button.active { background:#ffffff1c; border-color:#ffffff18; color:#fff; box-shadow:inset 3px 0 0 var(--accent); }
.nav-icon { display:grid; place-items:center; width:21px; flex:none; color:var(--accent); font-size:19px; font-weight:700; }
#logoutButton { margin-top:auto; color:#fecaca; }
.main { flex:1; min-width:0; padding:26px; }
.page { display:none; }
.page.active { display:block; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:15px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:17px; }
.num { margin-top:5px; font-size:30px; font-weight:700; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.full-field { grid-column:1/-1; }
.aspects { margin-top:16px; }
label { display:block; margin-top:12px; font-size:12px; font-weight:700; }
input,select,textarea { width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px; margin-top:5px; background:#fff; }
input:focus,select:focus,textarea:focus { outline:3px solid #bfdbfe; border-color:var(--primary); }
.custom-select { position:relative; width:100%; margin-top:5px; }
.custom-select.open { z-index:80; }
.custom-select-native { position:absolute !important; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important; opacity:0; pointer-events:none; }
.custom-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:42px; padding:9px 11px 9px 13px; border:1px solid #cbd5e1; border-radius:10px; background:linear-gradient(180deg,#fff,#f8fafc); color:#1e293b; cursor:pointer; text-align:left; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.custom-select-trigger:hover { border-color:color-mix(in srgb,var(--primary) 55%,#cbd5e1); background:#fff; }
.custom-select-trigger:focus-visible,.custom-select.open .custom-select-trigger { outline:0; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent); }
.custom-select-trigger:disabled { cursor:not-allowed; opacity:.6; }
.custom-select-value,.custom-select-option-content { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; flex:1; }
.custom-select-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.custom-select-count { display:inline-grid; place-items:center; min-width:27px; height:22px; flex:none; padding:0 7px; border-radius:99px; background:#e2e8f0; color:#475569; font-size:10px; font-weight:800; line-height:1; }
.custom-select-trigger .custom-select-count { background:color-mix(in srgb,var(--primary) 12%,white); color:var(--primary); }
.custom-select-status { display:inline-flex; align-items:center; gap:5px; flex:none; min-width:84px; padding:4px 7px; border-radius:99px; font-size:9px; font-weight:800; line-height:1; }.custom-select-status i { font-style:normal; font-size:13px; line-height:.7; }.custom-select-status em { font-style:normal; white-space:nowrap; }
.custom-select-status.status-not-started { background:#f1f5f9; color:#64748b; }.custom-select-status.status-progress { background:#fef3c7; color:#b45309; }.custom-select-status.status-completed { background:#dcfce7; color:#15803d; }
.custom-select-trigger svg { width:18px; height:18px; flex:none; fill:none; stroke:var(--primary); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.custom-select.open .custom-select-trigger svg { transform:rotate(180deg); }
.custom-select-menu { position:absolute; top:calc(100% + 7px); right:0; left:0; display:none; min-width:max(100%,220px); max-height:320px; padding:7px; overflow:hidden; border:1px solid #dbe3ef; border-radius:12px; background:#fff; box-shadow:0 18px 45px #0f172a2b; }
.custom-select.drop-up .custom-select-menu { top:auto; bottom:calc(100% + 7px); }
.custom-select.open .custom-select-menu { display:block; animation:select-menu-in .18s ease both; }
.custom-select-search { margin:0 0 6px; padding:9px 10px; border-radius:8px; background:#f8fafc; font-size:12px; }
.custom-select-options { display:grid; gap:2px; max-height:250px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.custom-select-option { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:36px; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:#334155; cursor:pointer; text-align:left; }
.custom-select-option:hover,.custom-select-option:focus-visible { outline:0; background:color-mix(in srgb,var(--primary) 9%,white); color:var(--primary); }
.custom-select-option[aria-selected="true"] { background:color-mix(in srgb,var(--primary) 13%,white); color:var(--primary); font-weight:800; }
.custom-select-option:hover .custom-select-count,.custom-select-option:focus-visible .custom-select-count,.custom-select-option[aria-selected="true"] .custom-select-count { background:color-mix(in srgb,var(--primary) 17%,white); color:var(--primary); }
.custom-select-option:disabled { cursor:not-allowed; opacity:.45; }
.custom-select-option svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.custom-select-option[aria-selected="true"] svg { opacity:1; }
.custom-select.invalid .custom-select-trigger { border-color:#ef4444; box-shadow:0 0 0 3px #fee2e2; }
@keyframes select-menu-in { from{opacity:0;transform:translateY(-5px) scale(.985)} to{opacity:1;transform:none} }
.password-field { position:relative; }
.password-field input { padding-right:52px; }
.password-toggle { position:absolute; right:6px; bottom:6px; display:grid; place-items:center; width:38px; height:calc(100% - 11px); padding:0; border:0; border-left:1px solid var(--border); background:transparent; color:var(--primary); cursor:pointer; }
.password-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.password-toggle:hover { background:color-mix(in srgb,var(--primary) 8%,transparent); border-radius:6px; }
.password-toggle:focus-visible { outline:3px solid #bfdbfe; border-radius:6px; }
textarea { min-height:80px; resize:vertical; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.btn { border:0; background:var(--primary); color:#fff; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:700; }
.btn.gray { background:#64748b; }
.btn:disabled { opacity:.65; cursor:wait; }
.notice { margin:14px 0; padding:10px 12px; border-radius:8px; background:#eff6ff; color:#1e40af; font-size:13px; }
.notice.error { background:#fee2e2; color:var(--danger); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:10px; border-bottom:1px solid var(--border); text-align:left; }
th { font-size:11px; color:var(--muted); }
.badge { display:inline-block; padding:5px 8px; border-radius:99px; font-size:11px; font-weight:700; }
.BB { background:#fee2e2; color:#991b1b; }.MB { background:#fef3c7; color:#92400e; }.BSH { background:#dbeafe; color:#1d4ed8; }.BSB { background:#dcfce7; color:#166534; }
.account-hero { display:flex; align-items:center; gap:15px; margin-bottom:18px; padding:20px; border-radius:16px; background:linear-gradient(120deg,var(--sidebar-start),var(--sidebar-end)); color:#fff; box-shadow:0 12px 28px #1725541a; }
.account-hero h2,.account-hero p { margin:0; }.account-hero p { margin-top:4px; color:#dbeafe; }
.account-avatar { display:grid; place-items:center; width:58px; height:58px; flex:none; border:2px solid #ffffff40; border-radius:16px; background:#ffffff18; color:var(--accent); font-size:24px; font-weight:800; }
.account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.account-card { margin:0; }
.account-card-heading { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.account-card-heading h2,.account-card-heading p { margin:0; }.account-card-heading h2 { font-size:17px; }.account-card-heading p { margin-top:3px; color:var(--muted); font-size:12px; }
.account-card-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:11px; background:color-mix(in srgb,var(--primary) 12%,white); color:var(--primary); font-size:19px; font-weight:800; }
.parent-account-logout { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:17px; }.parent-account-logout strong,.parent-account-logout p { display:block; margin:0; }.parent-account-logout p { margin-top:4px; color:var(--muted); font-size:12px; }
.parent-dashboard { display:grid; gap:16px; }.parent-dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; overflow:hidden; border-radius:17px; background:linear-gradient(125deg,var(--sidebar-start),var(--sidebar-end)); color:#fff; box-shadow:0 14px 35px color-mix(in srgb,var(--primary) 20%,transparent); }.parent-dashboard-hero span { color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.parent-dashboard-hero h1 { margin:5px 0; color:#fff; }.parent-dashboard-hero p { margin:0; color:#dbeafe; font-size:12px; }.parent-dashboard-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.parent-dashboard-summary span,.parent-dashboard-summary strong,.parent-dashboard-summary small { display:block; }.parent-dashboard-summary span,.parent-dashboard-notes span { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }.parent-dashboard-summary strong { margin:7px 0 4px; color:#172554; font-size:22px; text-transform:capitalize; }.parent-dashboard-summary small { color:var(--muted); font-size:10px; }.parent-dashboard-notes { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.parent-dashboard-notes article { min-height:125px; }.parent-dashboard-notes p { margin:10px 0 0; color:#334155; line-height:1.65; white-space:pre-wrap; }
.account-submit { width:100%; margin-top:14px; transition:background-color .2s ease,transform .2s ease; }
.account-submit.success { background:#16a34a; animation:saved-pop .45s ease; }
.form-feedback { min-height:18px; margin-top:10px; color:var(--muted); font-size:12px; }.form-feedback.error { color:#b91c1c; }.form-feedback.success { color:#15803d; }
.password-meter { height:6px; margin-top:12px; overflow:hidden; border-radius:99px; background:#e2e8f0; }.password-meter span { display:block; width:0; height:100%; border-radius:inherit; background:#ef4444; transition:width .25s ease,background-color .25s ease; }
.settings-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.settings-heading h1 { margin-bottom:4px; }.settings-heading p,.panel-note { margin-top:0; color:var(--muted); }
.unsaved { padding:7px 10px; border-radius:99px; background:#fff7ed; color:#9a3412; font-size:12px; font-weight:700; animation:pulse-soft 1.8s infinite; }
.settings-shell { display:grid; grid-template-columns:210px minmax(0,1fr); overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 10px 30px #1725540d; }
.settings-tabs { padding:14px; background:#f8fafc; border-right:1px solid var(--border); }
.settings-tabs button { display:block; width:100%; margin-bottom:5px; padding:11px 12px; border:0; border-radius:9px; background:transparent; color:#475569; text-align:left; cursor:pointer; font-weight:700; }
.settings-tabs button:hover,.settings-tabs button.active { background:#fff; color:var(--primary); box-shadow:0 3px 12px #17255412; }
.settings-content { min-height:390px; padding:26px; }
.settings-panel { display:none; }
.settings-panel.active { display:block; animation:panel-in .28s ease both; }
.settings-panel h2 { margin-top:0; margin-bottom:7px; }
.theme-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:22px; }
.theme-card { position:relative; margin:0; padding:10px; overflow:hidden; border:2px solid var(--border); border-radius:14px; background:#fff; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.theme-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px #17255414; }
.theme-card:has(input:checked) { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent); }
.theme-card input { position:absolute; width:1px; height:1px; opacity:0; }
.theme-card strong,.theme-card small { display:block; }
.theme-card strong { margin-top:10px; font-size:13px; }.theme-card small { margin-top:3px; color:var(--muted); font-size:11px; }
.theme-preview { position:relative; display:grid; grid-template-columns:32% 1fr; height:80px; overflow:hidden; border-radius:10px; background:var(--preview-bg); }
.theme-preview i { grid-row:1/3; background:linear-gradient(160deg,var(--preview-side-a),var(--preview-side-b)); }
.theme-preview b,.theme-preview em { display:block; margin:10px 10px 0; border-radius:6px; background:#fff; box-shadow:0 3px 8px #0f172a10; }
.theme-preview em { margin-top:0; margin-bottom:10px; background:var(--preview-accent); opacity:.85; }
.theme-ocean { --preview-side-a:#172554;--preview-side-b:#1e3a8a;--preview-bg:#f5f7fb;--preview-accent:#38bdf8; }
.theme-emerald { --preview-side-a:#022c22;--preview-side-b:#047857;--preview-bg:#f0fdf4;--preview-accent:#34d399; }
.theme-sunset { --preview-side-a:#7c2d12;--preview-side-b:#c2410c;--preview-bg:#fff7ed;--preview-accent:#fbbf24; }
.theme-violet { --preview-side-a:#2e1065;--preview-side-b:#6d28d9;--preview-bg:#f7f5ff;--preview-accent:#c4b5fd; }
.theme-rose { --preview-side-a:#4c0519;--preview-side-b:#be123c;--preview-bg:#fff1f2;--preview-accent:#fda4af; }
.logo-editor { display:grid; grid-template-columns:170px 1fr; align-items:center; gap:24px; margin-top:22px; }
.logo-preview { display:grid; place-items:center; width:170px; height:170px; overflow:hidden; border:2px dashed #cbd5e1; border-radius:18px; background:#f8fafc; color:var(--muted); font-size:12px; }
.logo-preview img { width:100%; height:100%; padding:14px; object-fit:contain; animation:logo-in .3s ease; }
.logo-bg-light { background:#fff !important; box-shadow:inset 0 0 0 1px #e2e8f0; }
.logo-bg-dark { background:#0f172a !important; box-shadow:inset 0 0 0 1px #ffffff1f; }
.app-logo.logo-bg-light,.app-logo.logo-bg-dark { padding:6px; border-radius:12px; }
.logo-background-options { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 0; padding:0; border:0; }
.logo-background-options legend { width:100%; margin-bottom:8px; font-size:12px; font-weight:700; }
.logo-bg-option { display:flex; align-items:center; gap:10px; min-width:190px; margin:0; padding:11px 13px; border:2px solid var(--border); border-radius:12px; cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease; }
.logo-bg-option:has(input:checked) { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent); }
.logo-bg-option input { position:absolute; width:1px; height:1px; opacity:0; }
.logo-bg-option strong,.logo-bg-option small { display:block; }.logo-bg-option small { margin-top:2px; color:var(--muted); font-size:10px; }
.logo-bg-swatch { width:38px; height:38px; flex:none; border-radius:9px; border:1px solid #cbd5e1; box-shadow:inset 0 0 0 7px #ffffff26; }
.light-swatch { background:#fff; }.dark-swatch { background:#0f172a; border-color:#334155; }
.small-action { margin-top:12px; }
.map-link { display:inline-block; margin-top:6px; color:var(--primary); font-weight:700; }
.settings-savebar { position:sticky; bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; padding:13px 16px; background:#fffffff2; border:1px solid var(--border); border-radius:13px; box-shadow:0 8px 25px #17255418; backdrop-filter:blur(8px); }
.settings-savebar > span { color:var(--muted); font-size:13px; }
.birth-login-note { display:grid; gap:3px; margin:2px 0 15px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--primary) 18%,#dbe3ef); border-radius:11px; background:color-mix(in srgb,var(--primary) 6%,white); }
.login-audience-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 15px; padding:4px; border-radius:11px; background:#eef2f7; }
.login-audience-tabs button { min-height:36px; padding:7px 9px; border:0; border-radius:8px; background:transparent; color:#64748b; cursor:pointer; font-size:11px; font-weight:800; }
.login-audience-tabs button.active { background:#fff; color:var(--primary); box-shadow:0 3px 10px #17255413; }
.login-audience-tabs button:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.birth-login-note strong { color:var(--dark); font-size:13px; }
.birth-login-note span { color:var(--muted); font-size:11px; line-height:1.45; }
.birth-login-example { margin:7px 1px 13px; color:var(--muted); font-size:10px; line-height:1.45; }
.birth-login-example strong { color:var(--primary); letter-spacing:.04em; }
.family-login-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:17px; }
.family-login-mode { position:relative; margin:0; cursor:pointer; }
.family-login-mode input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.family-login-mode > span { display:grid; grid-template-columns:38px 1fr; gap:3px 11px; min-height:145px; padding:17px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,#fff,#f8fafc); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.family-login-mode:hover > span { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 35%,var(--border)); box-shadow:0 9px 25px #17255412; }
.family-login-mode input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--primary) 20%,transparent); outline-offset:2px; }
.family-login-mode input:checked + span { border-color:var(--primary); background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 7%,white),#fff); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 11%,transparent); }
.family-login-mode i { grid-row:1/3; display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:#e8eef8; color:#64748b; font-size:11px; font-style:normal; font-weight:900; }
.family-login-mode input:checked + span i { background:var(--primary); color:#fff; }
.family-login-mode strong { align-self:end; color:var(--dark); font-size:15px; }
.family-login-mode small { grid-column:2; color:var(--muted); font-size:11px; line-height:1.55; }
.security-warning { display:flex; align-items:flex-start; gap:12px; margin-top:15px; padding:13px 15px; border:1px solid #fde68a; border-radius:11px; background:#fffbeb; color:#92400e; }
.security-warning strong { flex:none; font-size:11px; }
.security-warning span { font-size:11px; line-height:1.5; }
.save-button { display:flex; align-items:center; gap:9px; min-width:174px; justify-content:center; transition:transform .2s ease,background-color .2s ease; }
.save-button.saved { background:#16a34a; animation:saved-pop .45s ease; }
.page-heading,.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.page-heading h1,.panel-heading h2 { margin-bottom:4px; }
.page-heading p,.panel-heading p { margin-top:0; color:var(--muted); }
.page-actions { display:flex; flex:none; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.export-button { background:#15803d; }
.admin-summary .card { position:relative; overflow:hidden; }
.admin-summary .card::after { position:absolute; right:-18px; bottom:-28px; width:78px; height:78px; border-radius:50%; background:color-mix(in srgb,var(--primary) 8%,transparent); content:""; }
.compact-num { max-width:100%; overflow:hidden; font-size:22px; text-overflow:ellipsis; white-space:nowrap; }
.management-shell { margin-top:4px; }
.management-tabs { display:flex; gap:7px; margin-bottom:16px; padding:6px; overflow-x:auto; border:1px solid var(--border); border-radius:13px; background:#fff; box-shadow:0 7px 22px #1725540a; }
.management-tabs button { min-width:110px; padding:10px 15px; border:0; border-radius:9px; background:transparent; color:#64748b; cursor:pointer; font-weight:700; }
.management-tabs button:hover,.management-tabs button.active { background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); }
.management-panel { display:none; }
.management-panel.active { display:block; animation:panel-in .28s ease both; }
.panel-filter { width:min(240px,100%); }
.panel-filter label { margin-top:0; }
.compact-form { padding-top:8px; }
.management-form-grid { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; }
.check-row { display:flex; align-items:center; gap:9px; width:max-content; margin-top:12px; cursor:pointer; }
.check-row input { width:17px; height:17px; margin:0; accent-color:var(--primary); }
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:99px; background:#e2e8f0; color:#475569; font-size:11px; font-weight:700; }
.status-pill.active { background:#dcfce7; color:#166534; }
.status-pill.warning { background:#fef3c7; color:#92400e; }
.table-actions { display:flex; flex-wrap:wrap; gap:6px; }
.btn.small { padding:7px 9px; font-size:11px; }
.btn.soft { background:color-mix(in srgb,var(--primary) 12%,white); color:var(--primary); }
.btn.danger-soft { background:#fee2e2; color:#b91c1c; }
.empty-state { padding:25px !important; color:var(--muted); text-align:center; }
.copy-classes-control { margin:5px 0 18px; padding:13px 15px; border:1px solid var(--border); border-radius:12px; background:#f8fafc; }
.copy-classes-options { display:grid; grid-template-columns:minmax(220px,360px) 1fr; align-items:end; gap:16px; margin-top:8px; }
.copy-classes-control > .panel-note { margin:9px 0 0; font-size:11px; }
.category-form { padding-top:14px; }
.category-toolbar { display:flex; align-items:flex-end; gap:9px; }
.category-toolbar .panel-filter { min-width:210px; }
.category-main-fields { grid-template-columns:minmax(240px,2fr) minmax(130px,.6fr); }
.category-main-fields .full-field { grid-column:1/-1; }
.category-grade-fieldset { margin:4px 0 14px; padding:8px 12px 13px; border:1px solid var(--border); border-radius:12px; }.category-grade-fieldset legend { padding:0 7px; color:#475569; font-size:11px; font-weight:800; }
.category-grade-grid { display:grid; grid-template-columns:repeat(6,minmax(75px,1fr)); gap:8px; }.category-grade-grid label { position:relative; margin:0; cursor:pointer; }.category-grade-grid input { position:absolute; width:1px; height:1px; opacity:0; }.category-grade-grid label > span { display:flex; align-items:center; gap:8px; padding:9px; border:2px solid var(--border); border-radius:10px; background:#fff; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }.category-grade-grid input:checked + span { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 7%,white); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent); }.category-grade-grid strong { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:#e2e8f0; color:#475569; font-size:11px; }.category-grade-grid input:checked + span strong { background:var(--primary); color:#fff; }.category-grade-grid small { color:var(--muted); font-size:9px; white-space:nowrap; }
.category-order { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#f1f5f9; color:#475569; font-size:11px; font-weight:900; }.category-description { display:block; max-width:440px; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.4; }.category-grade-pills { display:flex; flex-wrap:wrap; gap:5px; }.category-grade-pills span { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); font-size:10px; font-weight:900; }
.student-form-section { margin:0 0 17px; padding:5px 16px 0; border:1px solid var(--border); border-radius:12px; }
.student-form-section legend { padding:0 8px; color:var(--primary); font-size:13px; font-weight:800; }
.student-form-section .form-grid { margin-bottom:13px; }
.student-directory-toolbar { display:grid; grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(150px,1fr)); align-items:end; gap:12px; margin-bottom:14px; padding:15px; }
.student-directory-toolbar label { margin-top:0; }
.student-directory-card { padding:0; overflow:hidden; }
.student-directory-table { min-width:720px; }
.student-directory-table th { color:#64748b; font-size:11px; text-transform:uppercase; letter-spacing:.035em; }
.student-directory-table td { vertical-align:middle; }
.student-row-number { width:44px; color:var(--muted); font-size:12px; font-weight:700; }
.table-sort { display:flex; align-items:center; gap:6px; width:100%; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; text-align:left; text-transform:inherit; letter-spacing:inherit; }
.table-sort:hover { color:var(--primary); }.sort-indicator { color:var(--primary); font-size:14px; line-height:1; }
.student-name,.student-nisn { display:block; }.student-name { color:#0f172a; font-size:14px; }.student-nisn { margin-top:4px; color:var(--muted); font-size:11px; }
.class-pill { display:inline-flex; padding:5px 9px; border-radius:99px; background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); font-size:11px; font-weight:800; }
.student-icon-actions { display:flex; align-items:center; gap:6px; }
.icon-action { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:9px; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease; }
.icon-action:hover { transform:translateY(-1px); box-shadow:0 5px 12px #0f172a1c; }
.icon-action svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-action.detail { background:#e0f2fe; color:#0369a1; }.icon-action.edit { background:#e8efff; color:#1d4ed8; }.icon-action.delete { background:#fee2e2; color:#b91c1c; }.icon-action.restore { background:#dcfce7; color:#15803d; }.icon-action.family { background:#f3e8ff; color:#7e22ce; }.icon-action.family.active { background:#dcfce7; color:#15803d; }
.student-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 18px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
.student-pagination > div { display:flex; align-items:center; gap:10px; }.student-pagination .icon-button { width:30px; height:30px; font-size:21px; }
.student-pagination .icon-button:disabled { opacity:.4; cursor:not-allowed; }
.student-empty-row td { padding:36px; color:var(--muted); text-align:center; }
.student-detail-content section { margin-top:20px; }.student-detail-content h3 { margin:0 0 10px; color:var(--primary); font-size:13px; }
.student-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.student-detail-field { min-width:0; padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; }
.student-detail-field span,.student-detail-field strong { display:block; }.student-detail-field span { margin-bottom:4px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.03em; }.student-detail-field strong { overflow-wrap:anywhere; color:#1e293b; font-size:13px; }
.assessment-period-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; margin-bottom:16px; padding:17px 20px; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border)); border-radius:16px; background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 9%,white),#fff); box-shadow:0 8px 24px #1725540b; }
.assessment-calendar-icon { display:grid; grid-template-rows:1fr auto; place-items:center; width:58px; height:62px; overflow:hidden; border-radius:13px; background:#fff; color:var(--primary); box-shadow:0 5px 16px #17255418; }
.assessment-calendar-icon span { padding-top:5px; font-size:24px; font-weight:900; }.assessment-calendar-icon small { width:100%; padding:4px; background:var(--primary); color:#fff; text-align:center; font-size:9px; font-weight:900; }
.assessment-period-card h2,.assessment-period-card p { margin:0; }.assessment-period-card h2 { margin:3px 0; color:#172554; font-size:19px; text-transform:capitalize; }.assessment-period-card p { color:var(--muted); font-size:12px; }
.assessment-eyebrow { color:var(--primary); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.assessment-window-badge { padding:8px 11px; border-radius:99px; background:#fee2e2; color:#b91c1c; font-size:11px; font-weight:800; }.assessment-window-badge.open { background:#dcfce7; color:#15803d; }
.assessment-period-card.locked { filter:saturate(.75); }
.assessment-form { padding:20px; }
.assessment-student-row { display:block; }
.assessment-student-field { width:100%; }
.assessment-student-row label { margin-top:0; }
.assessment-meta-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:25px; margin-top:6px; }
.assessment-status-legend { display:flex; flex-wrap:wrap; gap:8px; }.assessment-status-legend span { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:9px; font-weight:700; }.assessment-status-legend i { font-style:normal; font-size:12px; }.assessment-status-legend .status-progress { color:#b45309; }.assessment-status-legend .status-completed { color:#15803d; }
.assessment-completion { display:flex; align-items:center; gap:7px; min-width:230px; }
.assessment-completion > span,.assessment-completion > strong { flex:none; font-size:9px; }.assessment-completion > span { color:var(--muted); }.assessment-completion > strong { min-width:24px; color:var(--primary); text-align:right; }
.assessment-completion > div { width:110px; height:5px; overflow:hidden; border-radius:99px; background:#e2e8f0; }.assessment-completion i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width .3s ease; }
.assessment-existing { margin-top:14px; padding:10px 12px; border-radius:10px; background:#eff6ff; color:#1d4ed8; font-size:12px; }
.assessment-tabs { display:flex; gap:7px; margin:20px 0 13px; padding:6px; overflow-x:auto; border:1px solid var(--border); border-radius:13px; background:#f8fafc; scrollbar-width:thin; }
.assessment-tabs button { position:relative; display:flex; align-items:center; gap:7px; min-width:max-content; padding:9px 11px; border:0; border-radius:9px; background:transparent; color:#64748b; cursor:pointer; font-size:11px; font-weight:800; }
.assessment-tabs button > span { display:grid; place-items:center; width:21px; height:21px; border-radius:7px; background:#e2e8f0; color:#475569; font-size:10px; }
.assessment-tabs button.active { background:#fff; color:var(--primary); box-shadow:0 4px 14px #17255412; }.assessment-tabs button.active > span { background:var(--primary); color:#fff; }
.assessment-tabs button i { width:7px; height:7px; border-radius:50%; background:#cbd5e1; }.assessment-tabs button.completed i { background:#22c55e; box-shadow:0 0 0 3px #dcfce7; }
.assessment-category-panel { padding:18px; border:1px solid var(--border); border-radius:14px; background:#fff; }
.assessment-category-heading span { color:var(--primary); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }.assessment-category-heading h2 { margin:4px 0; color:#172554; font-size:20px; }.assessment-category-heading p { margin:0; color:var(--muted); font-size:12px; }
.assessment-level-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.assessment-level-card { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin:0; padding:14px; border:2px solid var(--border); border-radius:13px; background:#fff; cursor:pointer; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.assessment-level-card:hover { transform:translateY(-1px); box-shadow:0 7px 18px #17255412; }.assessment-level-card:has(input:checked) { border-color:var(--level-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--level-color) 13%,transparent); }
.assessment-level-card input { position:absolute; width:1px; height:1px; opacity:0; }.assessment-level-card:has(input:disabled) { cursor:not-allowed; opacity:.55; transform:none; }
.assessment-level-code { display:grid; place-items:center; width:45px; height:45px; border-radius:12px; background:color-mix(in srgb,var(--level-color) 13%,white); color:var(--level-color); font-size:14px; font-weight:900; }
.assessment-level-copy strong,.assessment-level-copy small { display:block; }.assessment-level-copy strong { color:#1e293b; font-size:13px; }.assessment-level-copy small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.4; }
.assessment-level-check { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e2e8f0; color:#fff; opacity:.55; }.assessment-level-card:has(input:checked) .assessment-level-check { background:var(--level-color); opacity:1; }
.level-BB { --level-color:#dc2626; }.level-MB { --level-color:#d97706; }.level-BSH { --level-color:#2563eb; }.level-BSB { --level-color:#16a34a; }
.assessment-tab-navigation { display:flex; justify-content:space-between; gap:10px; margin-top:16px; }.assessment-tab-navigation .btn:disabled { cursor:not-allowed; opacity:.4; }
.assessment-notes { margin-top:18px; }.assessment-notes textarea { min-height:105px; }
.assessment-note-field { display:flex; flex-direction:column; }
.assessment-field-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.assessment-field-heading label { margin:0; }
.reference-trigger { padding:5px 8px; border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border)); border-radius:7px; background:color-mix(in srgb,var(--primary) 6%,white); color:var(--primary); cursor:pointer; font-size:9px; font-weight:800; }.reference-trigger:hover { background:color-mix(in srgb,var(--primary) 12%,white); }.reference-trigger:disabled { cursor:not-allowed; opacity:.45; }
.field-example { min-height:34px; margin:0 0 9px; color:var(--muted); font-size:11px; line-height:1.45; }
.field-example strong { color:#475569; }
.reference-search { margin:15px 0 10px; }.reference-search input { margin:0; }
.assessment-reference-list { display:grid; gap:7px; min-height:90px; max-height:360px; overflow:auto; }
.assessment-reference-item { position:relative; display:grid; grid-template-columns:auto 1fr; align-items:start; gap:10px; margin:0; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; transition:border-color .18s ease,background .18s ease; }.assessment-reference-item:hover { border-color:color-mix(in srgb,var(--primary) 40%,var(--border)); }.assessment-reference-item:has(input:checked) { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 6%,white); }.assessment-reference-item input { position:absolute; width:1px; height:1px; opacity:0; }
.assessment-reference-check { display:grid; place-items:center; width:22px; height:22px; border:1px solid #cbd5e1; border-radius:7px; color:transparent; font-size:12px; }.assessment-reference-item:has(input:checked) .assessment-reference-check { border-color:var(--primary); background:var(--primary); color:#fff; }.assessment-reference-item strong,.assessment-reference-item small { display:block; }.assessment-reference-item strong { color:#334155; font-size:12px; line-height:1.45; }.assessment-reference-item small { margin-top:4px; color:var(--muted); font-size:10px; text-transform:capitalize; }
.reference-empty { display:grid; place-items:center; min-height:90px; padding:20px; border:1px dashed #cbd5e1; border-radius:10px; color:var(--muted); font-size:12px; text-align:center; }.reference-dialog-status { min-height:17px; margin:9px 0 0; color:var(--muted); font-size:10px; }
.assessment-save { width:100%; margin-top:5px; padding:12px; }
.report-toolbar { display:grid; grid-template-columns:repeat(3,minmax(190px,1fr)); align-items:end; gap:12px; padding:15px; }.report-toolbar label { margin-top:0; }
.parent-category-trend { margin-bottom:16px; padding:19px 20px; overflow:hidden; }.parent-chart-heading span,.parent-chart-heading h2,.parent-chart-heading p { display:block; margin:0; }.parent-chart-heading span { color:var(--primary); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.parent-chart-heading h2 { margin:4px 0; color:#172554; font-size:18px; }.parent-chart-heading p { color:var(--muted); font-size:10px; }.parent-category-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin:15px 0 7px; }.parent-category-legend span { display:inline-flex; align-items:center; gap:6px; color:#475569; font-size:10px; font-weight:700; }.parent-category-legend i { width:10px; height:10px; border-radius:50%; background:var(--chart-color); }.parent-category-chart { min-height:250px; overflow-x:auto; }.parent-category-chart svg { display:block; width:100%; min-width:620px; height:auto; }.category-chart-grid line { stroke:#e2e8f0; stroke-width:1; }.category-chart-grid text { fill:#64748b; font-size:10px; font-weight:700; text-transform:capitalize; }.category-chart-lines polyline { fill:none; stroke:var(--chart-color); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.category-chart-lines circle { fill:#fff; stroke:var(--chart-color); stroke-width:3; }
body[data-role="parent"] #reportStudentField,body[data-role="parent"] .report-student-navigation { display:none; }body[data-role="parent"] .parent-category-trend + .report-toolbar { grid-template-columns:minmax(220px,360px); }
.report-student-navigation { grid-column:1/-1; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:12px; border-top:1px solid var(--border); }.report-student-navigation span { min-width:115px; color:var(--muted); text-align:center; font-size:10px; font-weight:800; }.report-student-navigation .btn { min-width:125px; padding:8px 11px; font-size:11px; }.report-student-navigation .btn:disabled { cursor:not-allowed; opacity:.42; }
.report-pdf-host { position:fixed; top:0; left:-100000px; width:210mm; background:#fff; pointer-events:none; }.report-pdf-sheet { width:210mm; max-width:none; margin:0; padding:10mm; overflow:visible; border:0; border-radius:0; background:#fff; box-shadow:none; }.report-pdf-sheet .table-wrap { overflow:visible; }.report-pdf-sheet .report-category-table { width:100%; min-width:0; }.report-download-busy { cursor:wait !important; opacity:.7; }
.report-document { max-width:980px; margin-right:auto; margin-left:auto; padding:28px; overflow:hidden; }
.report-empty { display:grid; place-items:center; min-height:300px; color:var(--muted); text-align:center; }.report-empty strong,.report-empty span { display:block; }.report-empty strong { color:#334155; font-size:18px; }.report-empty span { margin-top:7px; font-size:12px; }
.report-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding-bottom:19px; border-bottom:2px solid var(--primary); }.report-header > img,.report-logo-placeholder { width:64px; height:64px; padding:5px; object-fit:contain; border:1px solid var(--border); border-radius:13px; }.report-logo-placeholder { display:grid; place-items:center; background:var(--primary); color:#fff; font-size:24px; font-weight:900; }.report-header span,.report-header h2,.report-header p { display:block; margin:0; }.report-header span { color:var(--primary); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }.report-header h2 { margin:4px 0; color:#172554; font-size:22px; }.report-header p { color:var(--muted); font-size:12px; }.report-period { min-width:155px; padding:11px 13px; border-radius:10px; background:#eff6ff; text-align:right; }.report-period small,.report-period strong { display:block; }.report-period small { color:var(--muted); font-size:9px; text-transform:uppercase; }.report-period strong { margin-top:4px; color:var(--primary); font-size:12px; text-transform:capitalize; }
.report-student-info { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:9px; margin:18px 0; }.report-student-info > div { min-width:0; padding:11px 12px; border:1px solid var(--border); border-radius:9px; background:#f8fafc; }.report-student-info span,.report-student-info strong { display:block; }.report-student-info span { margin-bottom:4px; color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }.report-student-info strong { overflow:hidden; color:#1e293b; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.report-completion { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; background:#eff6ff; }.report-completion span,.report-completion strong { display:block; }.report-completion span { color:#64748b; font-size:9px; }.report-completion strong { margin-top:2px; color:#1e40af; font-size:12px; }.report-completion > div:nth-child(2) { height:7px; overflow:hidden; border-radius:99px; background:#dbeafe; }.report-completion i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--accent)); }.report-completion b { color:var(--primary); font-size:11px; }
.report-no-data { padding:18px; border:1px dashed #cbd5e1; border-radius:10px; color:var(--muted); text-align:center; font-size:11px; }.report-no-data.important { margin:17px 0; border-color:#fbbf24; background:#fffbeb; color:#92400e; }
.report-section { margin-top:22px; }.report-section h3 { margin:0 0 10px; color:#334155; font-size:14px; }.report-category-table { min-width:620px; border:1px solid var(--border); }.report-category-table th { background:#f8fafc; text-transform:uppercase; letter-spacing:.035em; }.report-category-table td { font-size:11px; }.report-category-table td:first-child { width:42px; color:var(--muted); text-align:center; }.report-category-table strong,.report-category-table small { display:block; }.report-category-table small { margin-top:3px; color:var(--muted); font-size:9px; }.report-level { display:inline-grid; place-items:center; min-width:42px; padding:6px 8px; border-radius:8px; font-size:10px; font-weight:900; }.report-level.BB { background:#fee2e2; color:#b91c1c; }.report-level.MB { background:#fef3c7; color:#b45309; }.report-level.BSH { background:#dbeafe; color:#1d4ed8; }.report-level.BSB { background:#dcfce7; color:#15803d; }.report-level.empty { background:#f1f5f9; color:#64748b; }
.report-notes { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.report-notes article { min-height:105px; padding:13px 14px; border:1px solid var(--border); border-radius:10px; }.report-notes span { color:var(--primary); font-size:9px; font-weight:900; text-transform:uppercase; }.report-notes p { margin:8px 0 0; color:#334155; font-size:11px; line-height:1.55; white-space:pre-wrap; }
.report-trend { display:flex; align-items:flex-end; gap:12px; min-height:165px; padding:16px 12px 8px; overflow-x:auto; border:1px solid var(--border); border-radius:11px; background:linear-gradient(to top,#f8fafc 1px,transparent 1px); background-size:100% 25%; }.report-trend-column { display:grid; justify-items:center; gap:6px; min-width:56px; flex:1; }.report-trend-track { position:relative; width:30px; height:115px; border-radius:8px 8px 3px 3px; background:#e2e8f0; }.report-trend-track i { position:absolute; right:0; bottom:0; left:0; min-height:2px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--accent),var(--primary)); }.report-trend-track span { position:absolute; top:-16px; left:50%; color:#475569; font-size:9px; font-weight:900; transform:translateX(-50%); }.report-trend-column small { color:var(--muted); font-size:8px; text-align:center; text-transform:capitalize; }
.report-footer { display:flex; justify-content:space-between; gap:15px; margin-top:25px; padding-top:11px; border-top:1px solid var(--border); color:var(--muted); font-size:8px; }
.monitoring-summary .card { position:relative; overflow:hidden; padding:16px 18px; }
.monitoring-summary .card::after { position:absolute; right:-16px; bottom:-24px; width:70px; height:70px; border-radius:50%; background:#e2e8f055; content:""; }
.monitoring-summary span,.monitoring-summary small { display:block; }.monitoring-summary span { color:#475569; font-size:12px; font-weight:700; }.monitoring-summary small { color:var(--muted); font-size:10px; }.monitoring-summary .num { margin:4px 0 2px; }
.monitoring-summary .status-not-started-card { border-top:3px solid #94a3b8; }.monitoring-summary .status-progress-card { border-top:3px solid #f59e0b; }.monitoring-summary .status-completed-card { border-top:3px solid #22c55e; }
.monitor-trend-card { margin-bottom:16px; padding:18px 20px; overflow:hidden; }
.monitor-trend-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }.monitor-trend-heading span,.monitor-trend-heading h2,.monitor-trend-heading p { display:block; margin:0; }.monitor-trend-heading > div > span { color:var(--primary); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }.monitor-trend-heading h2 { margin:4px 0; color:#172554; font-size:18px; }.monitor-trend-heading p { max-width:650px; color:var(--muted); font-size:10px; line-height:1.5; }
.monitor-trend-legend { display:flex; align-items:center; gap:7px; flex:none; padding:7px 10px; border-radius:99px; background:#f8fafc; color:#64748b; font-size:9px; font-weight:800; }.monitor-trend-legend i { width:9px; height:9px; border-radius:3px; background:linear-gradient(180deg,var(--accent),var(--primary)); }
.monitor-trend-chart { display:grid; grid-template-columns:repeat(6,minmax(74px,1fr)); align-items:end; gap:12px; min-height:205px; margin-top:17px; padding:16px 14px 9px; overflow-x:auto; border:1px solid var(--border); border-radius:13px; background:repeating-linear-gradient(to top,#e2e8f0 0 1px,transparent 1px 25%); }
.monitor-trend-column { display:grid; grid-template-rows:145px auto auto; justify-items:center; gap:6px; min-width:65px; padding:0 4px 5px; border:0; background:transparent; color:inherit; cursor:pointer; }.monitor-trend-column:hover .monitor-trend-bar,.monitor-trend-column:focus-visible .monitor-trend-bar { transform:translateY(-3px); box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 22%,transparent); }.monitor-trend-column:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:10px; }
.monitor-trend-track { position:relative; width:42px; height:145px; border-radius:9px 9px 4px 4px; background:#e2e8f080; }.monitor-trend-bar { position:absolute; right:0; bottom:0; left:0; min-height:3px; border-radius:9px 9px 4px 4px; background:linear-gradient(180deg,var(--accent),var(--primary)); transition:transform .18s ease,box-shadow .18s ease; }.monitor-trend-value { position:absolute; top:-20px; left:50%; color:#334155; font-size:10px; font-weight:900; transform:translateX(-50%); }.monitor-trend-column strong { color:#334155; font-size:10px; text-transform:capitalize; }.monitor-trend-column small { color:var(--muted); font-size:8px; }
.monitoring-toolbar { display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(145px,1fr)); align-items:end; gap:11px; padding:15px; }
.monitoring-toolbar label { margin-top:0; }.monitoring-table-card { padding:0; overflow:hidden; }.monitoring-table { min-width:1050px; }.monitoring-table td { vertical-align:middle; }.monitor-row-number { width:42px; color:var(--muted); font-size:11px; font-weight:800; }
.monitor-student-name,.monitor-student-id { display:block; }.monitor-student-name { color:#1e293b; font-size:13px; }.monitor-student-id { margin-top:4px; color:var(--muted); font-size:10px; }
.monitor-completeness { display:flex; align-items:center; gap:8px; min-width:105px; }.monitor-completeness > div { width:72px; height:6px; overflow:hidden; border-radius:99px; background:#e2e8f0; }.monitor-completeness i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--accent)); }.monitor-completeness span { color:#475569; font-size:10px; font-weight:800; }
.monitor-level-list { display:flex; flex-wrap:wrap; gap:5px; max-width:430px; }.monitor-level-chip { display:flex; align-items:center; gap:5px; padding:4px 6px 4px 8px; border-radius:8px; background:color-mix(in srgb,var(--level-color) 10%,white); color:var(--level-color); }.monitor-level-chip small { max-width:85px; overflow:hidden; color:#475569; text-overflow:ellipsis; white-space:nowrap; font-size:8px; }.monitor-level-chip strong { font-size:9px; }.monitor-level-chip.empty { --level-color:#94a3b8; }.monitor-no-category { color:var(--muted); font-size:10px; }
.monitor-status { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:99px; font-size:10px; font-weight:800; white-space:nowrap; }.monitor-status i { font-style:normal; font-size:13px; }.monitor-status.not-started { background:#f1f5f9; color:#64748b; }.monitor-status.progress { background:#fef3c7; color:#b45309; }.monitor-status.completed { background:#dcfce7; color:#15803d; }.icon-action.view { background:#e0f2fe; color:#0369a1; }
.monitoring-table-footer,.monitoring-table-footer > div,.monitor-pagination { display:flex; align-items:center; gap:12px; }.monitoring-table-footer { justify-content:space-between; padding:12px 18px; border-top:1px solid var(--border); color:var(--muted); font-size:11px; }.monitoring-table-footer #monitorCompletionRate { color:#15803d; font-weight:800; }.monitor-pagination .icon-button { width:30px; height:30px; font-size:21px; }.monitor-pagination .icon-button:disabled { cursor:not-allowed; opacity:.4; }
.monitor-trend-detail-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:16px 0; }.monitor-trend-detail-summary article { padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:#f8fafc; }.monitor-trend-detail-summary span,.monitor-trend-detail-summary strong { display:block; }.monitor-trend-detail-summary span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }.monitor-trend-detail-summary strong { margin-top:5px; color:#1e293b; font-size:17px; }.monitor-trend-detail-table table { min-width:650px; }.monitor-trend-detail-table td { vertical-align:middle; }.monitor-class-progress { display:flex; align-items:center; gap:8px; min-width:125px; }.monitor-class-progress > div { width:75px; height:6px; overflow:hidden; border-radius:99px; background:#e2e8f0; }.monitor-class-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--accent)); }.monitor-class-progress strong { min-width:34px; color:var(--primary); font-size:10px; }
.monitor-detail-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:16px; }.monitor-detail-summary article { padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:#f8fafc; }.monitor-detail-summary article > span,.monitor-detail-summary article > strong { display:block; }.monitor-detail-summary article > span { margin-bottom:6px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }.monitor-detail-summary article > strong:not(.monitor-status) { color:#1e293b; font-size:14px; }
.monitor-detail-section { margin-top:20px; }.monitor-detail-section h3 { margin:0 0 10px; color:#334155; font-size:14px; }.monitor-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }.monitor-detail-heading > span { color:var(--primary); font-size:11px; font-weight:800; text-transform:capitalize; }
.monitor-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.monitor-category-result { --level-color:#94a3b8; padding:12px; border:1px solid color-mix(in srgb,var(--level-color) 25%,var(--border)); border-radius:11px; background:color-mix(in srgb,var(--level-color) 7%,white); }.monitor-category-result span,.monitor-category-result strong,.monitor-category-result small { display:block; }.monitor-category-result span { min-height:28px; color:#475569; font-size:10px; font-weight:800; }.monitor-category-result strong { margin:5px 0 2px; color:var(--level-color); font-size:18px; }.monitor-category-result small { color:var(--muted); font-size:9px; line-height:1.35; }.monitor-category-result.empty { --level-color:#94a3b8; }
.monitor-note-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.monitor-note-grid article { min-height:95px; padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:#fff; }.monitor-note-grid span { color:var(--primary); font-size:9px; font-weight:900; text-transform:uppercase; }.monitor-note-grid p { margin:7px 0 0; color:#334155; font-size:12px; line-height:1.55; white-space:pre-wrap; }
.monitor-history { display:grid; gap:7px; }.monitor-history-item { display:grid; grid-template-columns:minmax(145px,.8fr) minmax(110px,1fr) 42px; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; }.monitor-history-item strong,.monitor-history-item small { display:block; }.monitor-history-item strong { color:#334155; font-size:11px; text-transform:capitalize; }.monitor-history-item small { margin-top:3px; color:var(--muted); font-size:9px; }.monitor-history-item > span { color:var(--primary); text-align:right; font-size:10px; font-weight:900; }.monitor-history-bar { height:6px; overflow:hidden; border-radius:99px; background:#e2e8f0; }.monitor-history-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--accent)); }
.history-section { margin-top:20px; }.history-section h3 { margin:0 0 10px; color:#334155; font-size:14px; }
.history-table { min-width:650px !important; }.history-table strong { display:block; }
.history-timeline { display:grid; gap:8px; max-height:230px; overflow:auto; }
.history-event { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; }
.history-event .history-dot { width:9px; height:9px; flex:none; margin-top:4px; border-radius:50%; background:#dc2626; box-shadow:0 0 0 4px #fee2e2; }
.history-event.restored .history-dot { background:#16a34a; box-shadow:0 0 0 4px #dcfce7; }
.history-event strong,.history-event small { display:block; }.history-event strong { color:#334155; font-size:12px; }.history-event small { margin-top:3px; color:var(--muted); font-size:10px; }
.import-card { border-top:3px solid var(--primary); }
.import-controls { grid-template-columns:minmax(220px,320px) minmax(260px,1fr); margin-top:12px; }
.import-help { margin-top:4px; padding:10px 12px; border-radius:9px; background:#eff6ff; color:#1e40af; font-size:12px; }
.import-preview { padding:0; overflow:hidden; }
.import-summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 18px; border-bottom:1px solid var(--border); }
.import-summary strong,.import-summary span { display:block; }.import-summary span { margin-top:3px; color:var(--muted); font-size:11px; }
.import-status { display:inline-block; max-width:250px; font-size:11px; font-weight:700; }
.import-status.valid { color:#15803d; }.import-status.invalid { color:#b91c1c; }
.app-dialog { width:min(500px,calc(100% - 28px)); max-height:calc(100dvh - 28px); padding:0; overflow:auto; border:0; border-radius:17px; box-shadow:0 25px 70px #0f172a45; }
.app-dialog.wide-dialog { width:min(880px,calc(100% - 28px)); }
.app-dialog.import-dialog { width:min(1080px,calc(100% - 28px)); }
.app-dialog.history-dialog { width:min(850px,calc(100% - 28px)); }
.app-dialog::backdrop { background:#0f172a80; backdrop-filter:blur(3px); }
.app-dialog[open] { animation:dialog-in .24s ease both; }
.app-dialog form,.dialog-body { padding:22px; }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.dialog-heading h2,.dialog-heading p { margin:0; }.dialog-heading p { margin-top:4px; color:var(--muted); font-size:12px; }
.import-toolbar { display:flex; justify-content:flex-end; margin-top:16px; }
.icon-button { display:grid; place-items:center; width:34px; height:34px; flex:none; border:0; border-radius:9px; background:#f1f5f9; color:#475569; cursor:pointer; font-size:22px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:19px; }
@keyframes dialog-in { from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:none} }
.spinner { width:16px; height:16px; border:2px solid #ffffff70; border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes panel-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes logo-in { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes saved-pop { 50%{transform:scale(1.04)} }
@keyframes pulse-soft { 50%{opacity:.65} }
@media (max-width:800px) {
  body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  .app { display:block; }
  .side { position:static; display:block; width:100%; height:auto; padding:0; overflow:visible; background:transparent; box-shadow:none; }
  .brand { min-height:0; padding:13px 16px 10px; border:0; background:linear-gradient(120deg,var(--sidebar-start),var(--sidebar-end)); }
  .brand.has-logo { grid-template-columns:42px minmax(0,1fr); }
  .brand h2 { font-size:18px; }.brand small { margin-top:1px; font-size:11px; }
  .side-logo { width:40px; height:40px; border-radius:9px; }
  .side > #userRole { margin:0; padding:0 16px 12px; border:0; border-radius:0; background:linear-gradient(120deg,var(--sidebar-start),var(--sidebar-end)); font-size:11px; }
  .nav { position:fixed; right:0; bottom:0; left:0; z-index:1000; display:flex; flex-direction:row; height:calc(68px + env(safe-area-inset-bottom)); padding:5px 5px env(safe-area-inset-bottom); gap:2px; overflow-x:auto; overflow-y:hidden; background:linear-gradient(120deg,var(--sidebar-start),var(--sidebar-end)); box-shadow:0 -6px 24px #0f172a24; scrollbar-width:none; }
  .nav::-webkit-scrollbar { display:none; }
  .nav button,#logoutButton { flex:1 0 74px; min-width:74px; height:58px; margin:0; padding:6px 5px; flex-direction:column; justify-content:center; gap:3px; border-radius:9px; text-align:center; font-size:10px; line-height:1.05; }
  .nav button:hover { transform:none; }
  .nav button.active { background:#ffffff1c; box-shadow:inset 0 3px 0 var(--accent); }
  .nav-icon { width:auto; height:23px; font-size:19px; }
  body[data-role="parent"] .nav { overflow:hidden; }
  body[data-role="parent"] .nav [data-page],body[data-role="parent"] .nav button { flex:1 1 33.333%; min-width:0; }
  body[data-role="parent"] #logoutButton { display:none !important; }
  .main { padding:14px; }
  .main h1 { font-size:23px; }
  .form-grid { grid-template-columns:1fr; }
  .account-grid { grid-template-columns:1fr; }
  .parent-dashboard-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .full-field { grid-column:auto; }
  input,select,textarea { font-size:16px; }
  .auth { margin:3vh 14px; }
  .table-wrap table { min-width:620px; }
  .settings-shell { grid-template-columns:1fr; }
  .settings-tabs { display:flex; overflow-x:auto; padding:9px; border-right:0; border-bottom:1px solid var(--border); scrollbar-width:none; }
  .settings-tabs::-webkit-scrollbar { display:none; }
  .settings-tabs button { min-width:max-content; margin:0 4px 0 0; }
  .settings-content { min-height:430px; padding:19px 16px; }
  .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .theme-preview { height:68px; }
  .logo-editor { grid-template-columns:1fr; }
  .logo-preview { width:150px; height:150px; }
  .settings-savebar { bottom:78px; align-items:flex-start; }
  .settings-savebar > span { max-width:45%; }
  .management-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-grade-grid { grid-template-columns:repeat(3,1fr); }
  .panel-heading { align-items:flex-start; }
  .page-heading { align-items:flex-start; }
  .student-directory-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .student-search { grid-column:1/-1; }
  .report-student-info { grid-template-columns:repeat(2,minmax(0,1fr)); }.report-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }.report-student-navigation { grid-column:1/-1; }
  .monitoring-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }.monitor-search { grid-column:1/-1; }
  .monitor-trend-chart { grid-template-columns:repeat(6,minmax(70px,1fr)); }
  .assessment-level-options { grid-template-columns:1fr; }
  .copy-classes-options { grid-template-columns:1fr; }
  .import-controls { grid-template-columns:1fr; }
  .import-summary { align-items:stretch; flex-direction:column; }
  .management-table { min-width:760px !important; }
}
@media (max-width:420px) {
  .parent-dashboard-hero { align-items:flex-start; flex-direction:column; padding:19px; }.parent-dashboard-hero .btn { width:100%; }.parent-dashboard-summary,.parent-dashboard-notes { grid-template-columns:1fr; }.parent-dashboard-summary { gap:10px; }.parent-dashboard-notes { gap:10px; }.parent-account-logout { align-items:stretch; flex-direction:column; }.parent-account-logout .btn { width:100%; }.parent-category-trend { padding:16px 13px; }.parent-category-chart { margin-right:-4px; margin-left:-4px; }
  .theme-grid { grid-template-columns:1fr; }
  .family-login-mode-grid { grid-template-columns:1fr; }
  .family-login-mode > span { min-height:0; }
  .security-warning { flex-direction:column; gap:4px; }
  .settings-heading { align-items:flex-start; flex-direction:column; }
  .settings-savebar { align-items:stretch; flex-direction:column; }
  .settings-savebar > span { max-width:none; }
  .save-button { width:100%; }
  .management-form-grid,.category-main-fields { grid-template-columns:1fr; }
  .category-grade-grid { grid-template-columns:repeat(2,1fr); }
  .category-toolbar { align-items:stretch; flex-direction:column; width:100%; }
  .category-toolbar .panel-filter,.category-toolbar .btn { width:100%; }
  .panel-heading { flex-direction:column; }
  .panel-heading .btn { width:100%; }
  .page-heading { flex-direction:column; }
  .page-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .page-actions .btn { width:100%; }
  .student-directory-toolbar { grid-template-columns:1fr; }
  .student-search { grid-column:auto; }
  .report-toolbar,.report-notes { grid-template-columns:1fr; }.report-student-navigation { align-items:stretch; display:grid; grid-template-columns:1fr 1fr; }.report-student-navigation span { grid-column:1/-1; grid-row:1; width:100%; }.report-student-navigation .btn { min-width:0; }.report-document { padding:17px; }.report-header { grid-template-columns:auto 1fr; }.report-period { grid-column:1/-1; text-align:left; }.report-student-info { grid-template-columns:1fr 1fr; }
  .monitoring-toolbar { grid-template-columns:1fr; }.monitor-search { grid-column:auto; }
  .monitor-trend-heading,.monitoring-table-footer { align-items:stretch; flex-direction:column; }.monitor-trend-legend { align-self:flex-start; }.monitoring-table-footer > div { justify-content:space-between; }.monitor-pagination { justify-content:center !important; }.monitor-trend-detail-summary { grid-template-columns:1fr; }
  .monitor-detail-summary,.monitor-category-grid,.monitor-note-grid { grid-template-columns:1fr; }
  .monitor-history-item { grid-template-columns:1fr 42px; }.monitor-history-bar { grid-column:1/-1; grid-row:2; }
  .student-directory-card { padding:10px; background:transparent; border:0; box-shadow:none; }
  .student-directory-card .table-wrap { overflow:visible; }
  .student-directory-table { display:block; min-width:0 !important; }
  .student-directory-table thead { display:none; }
  .student-directory-table tbody { display:grid; gap:10px; }
  .student-directory-table tr { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; border:1px solid var(--border); border-radius:13px; background:#fff; box-shadow:0 5px 18px #1725540b; }
  .student-directory-table td { display:block; padding:0; border:0; }
  .student-directory-table .student-row-number { position:absolute; top:14px; left:14px; display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); }
  .student-directory-table .student-identity-cell { grid-column:1/-1; min-height:30px; padding:2px 0 11px 38px; border-bottom:1px solid var(--border); }
  .student-directory-table td::before { display:block; margin-bottom:4px; color:var(--muted); content:attr(data-label); font-size:9px; font-weight:800; text-transform:uppercase; }
  .student-directory-table .student-row-number::before,.student-directory-table .student-identity-cell::before { display:none; }
  .student-directory-table td:last-child { grid-column:1/-1; }
  .student-icon-actions { justify-content:flex-end; }
  .student-empty-row { display:block !important; }.student-empty-row td { padding:20px !important; }
  .student-pagination { align-items:stretch; flex-direction:column; padding:12px 4px; text-align:center; }
  .student-pagination > div { justify-content:center; }
  .student-detail-grid { grid-template-columns:1fr; }
  .assessment-period-card { grid-template-columns:auto 1fr; padding:14px; }.assessment-window-badge { grid-column:1/-1; width:max-content; }
  .assessment-meta-row { align-items:flex-start; flex-direction:column; gap:5px; }.assessment-completion { width:100%; min-width:0; }.assessment-completion > div { flex:1; width:auto; }
  .assessment-category-panel { padding:14px; }
  .app-dialog form,.dialog-body { padding:17px; }
  .import-toolbar .btn { width:100%; }
  .dialog-actions .btn { flex:1; }
}
@media print {
  @page { size:A4 portrait; margin:12mm; }
  body.printing-report { background:#fff; }
  body.printing-report * { visibility:hidden !important; }
  body.printing-report #reportContent,body.printing-report #reportContent * { visibility:visible !important; }
  body.printing-report #reportContent { position:absolute; top:0; left:0; width:100%; max-width:none; margin:0; padding:0; border:0; box-shadow:none; }
  body.printing-report .table-wrap { overflow:visible; }
  body.printing-report .report-category-table { min-width:0; }
  body.printing-report .report-section,body.printing-report .report-notes,body.printing-report .report-trend-section { break-inside:avoid; }
  body.printing-report .report-trend { min-height:145px; }
  body.printing-report .report-trend-track { height:95px; }
  body.printing-report .report-header,body.printing-report .report-completion,body.printing-report .report-level,body.printing-report .report-trend-track i { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}