@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:ital,wght@0,700;0,800;1,700&display=swap');

/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root {
    /* Brand */
    --accent:       #1a3fa8;
    --accent-hover: #1535931;
    --accent-light: #e8eeff;
    --accent-mid:   #3b6bff;

    /* Status */
    --success: #059669;
    --warn:    #d97706;
    --danger:  #dc2626;

    /* Surface */
    --bg:          #f0f2f8;
    --card-bg:     #ffffff;
    --header-bg:   #f5f7ff;
    --surface-2:   #f8f9fd;
    --surface-3:   #eef0f9;

    /* Text */
    --primary-text: #111827;
    --muted-text:   #6b7280;
    --subtle-text:  #9ca3af;

    /* Border */
    --border-color: #dde1ee;
    --border-focus: #3b6bff;

    /* Shadows */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm:  0 2px 8px rgba(26,63,168,0.08);
    --shadow-md:  0 4px 16px rgba(26,63,168,0.10);
    --shadow-lg:  0 8px 30px rgba(26,63,168,0.13);
    --shadow-xl:  0 20px 50px rgba(26,63,168,0.16);

    /* Typography */
    --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: 'Fraunces', Georgia, serif;

    /* Radius */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 18px;
    --r-xl: 24px;
}

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeIn     { from { opacity:0 }               to { opacity:1 } }
@keyframes slideUpIn  { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
@keyframes toastIn    { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:translateY(0) } }
@keyframes toastOut   { to   { opacity:0; transform:translateY(18px) } }
@keyframes spin       { 100% { transform:rotate(360deg) } }
@keyframes pulseRed   { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)} 70%{box-shadow:0 0 0 7px rgba(220,38,38,0)} }
@keyframes inlineToastIn  { from{opacity:0;transform:translate(-50%,-80%)} to{opacity:1;transform:translate(-50%,-100%)} }
@keyframes inlineToastOut { to  {opacity:0;transform:translate(-50%,-80%)} }
@keyframes shimmerPulse   { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */
html { scroll-behavior:smooth; overflow-x:hidden; width:100%; -webkit-font-smoothing:antialiased; }
body {
    margin:0; background:var(--bg); font-family:var(--font-sans); color:var(--primary-text);
    font-size:14px; line-height:1.5; overflow-x:hidden; width:100%; box-sizing:border-box;
    background-image: radial-gradient(ellipse 80% 50% at 60% -10%, rgba(59,107,255,.07) 0%, transparent 60%);
}
*  { box-sizing:border-box; }

/* ═══════════════════════════════════════
   LAYOUT & HEADER
═══════════════════════════════════════ */
.page-container { max-width:1400px; margin:0 auto; padding:0 24px; animation:fadeIn .5s ease-out; }
.page-header {
    position:sticky; top:10px; z-index:100;
    background:rgba(255,255,255,.92); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
    padding:8px 14px; border-radius:var(--r-lg); box-shadow:var(--shadow-md);
    border:1px solid var(--border-color);
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
main { padding-top:10px; }

.toolbar-group { display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-width:100%; }
.toolbar-group.main-actions  { flex:1 1 auto; }
.toolbar-group.secondary-actions { flex-shrink:0; }
.group { display:flex; gap:10px; align-items:center; }
.group label { font-size:13px; color:var(--muted-text); font-weight:600; }

/* ═══════════════════════════════════════
   INPUTS & SELECTS
═══════════════════════════════════════ */
select,
input[type=text], input[type=number], input[type=date],
input[type=email], input[type=password] {
    padding:9px 12px;
    border:1.5px solid var(--border-color);
    border-radius:var(--r-sm);
    width:100%; min-width:0; box-sizing:border-box;
    background:var(--card-bg);
    font-family:var(--font-sans);
    font-size:14px;
    color:var(--primary-text);
    transition:border-color .18s, box-shadow .18s, background .18s;
    box-shadow:var(--shadow-xs);
}
select:focus, input:focus {
    outline:none;
    border-color:var(--border-focus);
    box-shadow:0 0 0 3px rgba(59,107,255,.14);
    background:#fff;
}
select:disabled, input:disabled {
    background:var(--surface-3); color:var(--subtle-text); cursor:not-allowed; opacity:1;
}
/* Hide spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }
/* Chrome search cancel */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance:none; display:none; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
button, a.btn {
    padding:9px 18px;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
    color:#fff; border:none; border-radius:var(--r-sm); cursor:pointer;
    text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font-family:var(--font-sans); font-weight:700; font-size:13px;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .18s;
    box-shadow:0 3px 10px rgba(26,63,168,.22);
    user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    letter-spacing:.01em;
}
button:hover, a.btn:hover {
    filter:brightness(1.08);
    box-shadow:0 6px 18px rgba(26,63,168,.30);
    transform:translateY(-2px);
}
button:active, a.btn:active {
    transform:translateY(1px) scale(.97);
    box-shadow:0 1px 4px rgba(26,63,168,.18);
    transition:transform .05s;
}
button.secondary, a.btn.secondary {
    background:var(--surface-3); color:#374151;
    border:1.5px solid var(--border-color); box-shadow:none;
}
button.secondary:hover, a.btn.secondary:hover {
    background:#e4e8f5; box-shadow:var(--shadow-xs);
    transform:translateY(-1px); filter:none;
}
button.ghost {
    background:transparent; color:var(--accent);
    border:1.5px solid #c3d0ff; box-shadow:none;
}
button.ghost:hover {
    background:var(--accent-light); box-shadow:var(--shadow-xs);
    transform:translateY(-1px); filter:none;
}
button.danger {
    background:linear-gradient(135deg,#dc2626 0%,#f43f5e 100%);
    box-shadow:0 3px 10px rgba(220,38,38,.22);
}
button.danger:hover {
    filter:brightness(1.08);
    box-shadow:0 6px 18px rgba(220,38,38,.30);
}
button:disabled, a.btn[aria-disabled="true"] {
    background:var(--surface-3); color:var(--subtle-text);
    cursor:not-allowed; box-shadow:none; transform:none; filter:none;
}

/* ═══════════════════════════════════════
   ICONS & CHIPS
═══════════════════════════════════════ */
.icon { transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease; }
.nav-links li a:hover .icon,
button:hover .icon { transform:scale(1.18) rotate(3deg); filter:drop-shadow(0 0 5px currentColor); }

.icon-blue    { stroke:#3b82f6 !important; }
.icon-indigo  { stroke:#6366f1 !important; }
.icon-emerald { stroke:#10b981 !important; }
.icon-violet  { stroke:#8b5cf6 !important; }
.icon-orange  { stroke:#f97316 !important; }
.icon-teal    { stroke:#14b8a6 !important; }
.icon-pink    { stroke:#ec4899 !important; }
.icon-rose    { stroke:#f43f5e !important; }
.icon-amber   { stroke:#f59e0b !important; }
.icon-cyan    { stroke:#06b6d4 !important; }
.icon-fuchsia { stroke:#d946ef !important; }
.icon-red     { stroke:#ef4444 !important; }
.icon-darkred { stroke:#991b1b !important; }

.chip {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--accent-light); color:var(--accent);
    border-radius:999px; padding:4px 12px; font-size:12px; font-weight:700;
    border:1.5px solid rgba(26,63,168,.12);
    letter-spacing:.02em;
}
#unsavedChip { display:none !important; margin:0 !important; padding:0 !important; }

/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */
.hamburger-btn {
    background:transparent; border:none; padding:8px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--r-sm); transition:background .18s, transform .2s;
    box-shadow:none;
}
.hamburger-btn:hover { background:var(--surface-3); transform:translateY(-1px); filter:none; }
.hamburger-btn .icon { width:24px; height:24px; }

.nav-backdrop {
    position:fixed; inset:0; background:rgba(10,15,40,.45); z-index:1000;
    opacity:0; visibility:hidden; transition:opacity .28s, visibility .28s;
    backdrop-filter:blur(3px);
}
.nav-backdrop.open { opacity:1; visibility:visible; }

.nav-drawer {
    position:fixed; top:0; left:0; height:100%; width:285px;
    background:var(--card-bg);
    box-shadow:4px 0 40px rgba(26,63,168,.12);
    z-index:1001;
    display:flex; flex-direction:column;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;
    border-right:1px solid var(--border-color);
}
.nav-drawer.open { transform:translateX(0); }

.nav-header {
    padding:18px 20px; border-bottom:1px solid var(--border-color);
    display:flex; justify-content:space-between; align-items:center;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
}
.nav-header h3 {
    margin:0; font-family:var(--font-display); font-size:20px; color:#fff;
    letter-spacing:-.01em;
}
.nav-header .hamburger-btn { color:#fff; }
.nav-header .hamburger-btn:hover { background:rgba(255,255,255,.15); }
.nav-header .hamburger-btn .icon { stroke:#fff !important; }

.nav-links { list-style:none; padding:10px 0; margin:0; flex-grow:1; overflow-y:auto; }
.nav-links li a {
    display:flex; align-items:center; gap:13px; padding:11px 20px;
    text-decoration:none; color:var(--primary-text); font-weight:600; font-size:13.5px;
    border-left:3px solid transparent;
    transition:background .18s, border-color .18s, color .18s;
    border-radius:0 var(--r-sm) var(--r-sm) 0; margin-right:10px;
}
.nav-links li a:hover {
    background:var(--header-bg); border-left-color:var(--accent); color:var(--accent);
}
.nav-links li a .icon { width:20px; height:20px; flex-shrink:0; }
.nav-links li a.danger-link { color:var(--danger); }
.nav-links li a.danger-link:hover { background:#fef2f2; border-left-color:var(--danger); }
.nav-links .separator {
    height:1px; background:linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin:8px 20px;
}
.nav-section-header {
    padding:10px 20px 6px !important;
    font-size:10.5px !important; font-weight:800 !important;
    color:var(--subtle-text) !important; text-transform:uppercase !important;
    letter-spacing:.12em !important;
}

/* Nav context sidebar */
.nav-context-panel { background:var(--surface-2) !important; }
.nav-context-panel .input-group label { font-size:11px !important; }
.nav-context-panel select,
.nav-context-panel input { font-size:13px !important; padding:7px 10px !important; }

/* ═══════════════════════════════════════
   DROP ZONE & PANELS
═══════════════════════════════════════ */
#drop_zone {
    border:2px dashed var(--border-color); border-radius:var(--r);
    padding:10px 14px; text-align:center; cursor:pointer;
    transition:background .18s, border-color .18s;
    flex-grow:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:48px;
}
#drop_zone.dragover { background:var(--accent-light); border-color:var(--accent); }
#drop_zone svg, #drop_zone img, #drop_zone .icon { width:28px !important; height:28px !important; margin-bottom:4px; }
#drop_zone p { margin:0; color:var(--muted-text); font-weight:600; font-size:12px; }
#drop_zone p small { display:block; font-size:10.5px; margin-top:2px; }
#filename { font-weight:700; color:var(--accent); margin-top:3px; font-size:11px; word-break:break-all; }

.panel:has(#drop_zone) {
    position:sticky; top:58px; z-index:90;
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
    padding:10px 14px; margin-bottom:14px;
    box-shadow:0 4px 16px rgba(26,63,168,.09);
    border-radius:var(--r);
}
@media (min-width:961px) {
    .panel:has(#drop_zone) { top:78px; padding:14px 22px; }
}

.panel {
    background:var(--card-bg); border-radius:var(--r-lg); padding:24px;
    border:1px solid var(--border-color); margin-bottom:20px;
    box-shadow:var(--shadow-sm);
    animation:slideUpIn .45s ease-out forwards;
}
.panel h3 { margin:0 0 16px 0; font-size:17px; font-weight:800; color:var(--primary-text); letter-spacing:-.01em; }
.two-col { display:grid; grid-template-columns:1fr 400px; gap:24px; }

/* Status bar */
#statusBar {
    position:relative; z-index:40; background:var(--surface-2); border-radius:999px;
    padding:5px 12px; border:1.5px solid var(--border-color);
    font-size:11.5px; display:flex; align-items:center; gap:8px; margin:0;
    box-shadow:var(--shadow-xs); white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis;
}
#statusBar .left { font-weight:800; color:var(--primary-text); }
#statusBar .right { display:none; }
@media (min-width:768px) {
    #statusBar { max-width:420px; }
    #statusBar .right { display:inline-block; font-size:11px; overflow:hidden; text-overflow:ellipsis; }
}
#statusBar.ok  { background:#ecfdf5; border-color:#6ee7b7; color:#065f46; }
#statusBar.warn{ background:#fffbeb; border-color:#fcd34d; color:#854d0e; }
#statusBar.err { background:#fef2f2; border-color:#fca5a5; color:#991b1b; }

/* ═══════════════════════════════════════
   REPORT SHEET & TABLES
═══════════════════════════════════════ */
.sheet {
    width:100%; min-height:420px; background:#fff; padding:20px;
    border-radius:var(--r); border:1px solid var(--border-color);
    box-shadow:var(--shadow-sm); overflow:hidden; box-sizing:border-box;
    color:#111; height:auto !important; page-break-inside:avoid; break-inside:avoid;
}
.school-head {
    display:grid; grid-template-columns:120px 1fr 120px;
    align-items:center; margin-bottom:15px; padding:10px 0 15px;
    border-bottom:4px double #111;
}
.school-head .head-left { display:flex; justify-content:flex-start; }
.school-head img { max-width:100%; max-height:85px; object-fit:contain; }
.school-head .head-center { text-align:center; }
.school-head h1 { margin:0; font-family:'Merriweather','Georgia','Times New Roman',serif; font-size:26px; font-weight:800; color:#000; letter-spacing:.5px; text-transform:uppercase; line-height:1.1; }
.school-head .addr { font-family:var(--font-sans); font-size:11px; color:#444; margin-top:6px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; }
.school-head .motto { font-family:'Merriweather','Georgia',serif; margin-top:4px; font-weight:700; font-style:italic; color:#b91c1c; font-size:13px; }

.key { font-size:11px; color:#333; text-align:center; margin:8px 0; padding:4px 8px; background:#f9fafb; border-radius:4px; font-weight:500; }
.title { text-align:center; font-weight:700; margin:16px 0; font-size:16px; text-transform:uppercase; color:#000; }
.meta { display:grid; grid-template-columns:2fr 1fr; gap:15px; background:#f8fafc; border:1px solid #cbd5e1; border-left:4px solid var(--accent); padding:12px 16px; border-radius:4px; font-size:13px; margin-bottom:18px; page-break-inside:avoid; break-inside:avoid; }
.meta div { display:flex; gap:8px; align-items:center; font-size:14px; font-weight:700; color:#111; }
.meta label { font-weight:700; min-width:100px; color:#000; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }

table.report { width:100%; border-collapse:collapse !important; font-size:11.5px; table-layout:fixed; margin-bottom:16px; }
table.report th, table.report td { border:1px solid #000 !important; padding:6px 8px !important; text-align:center; word-break:break-word; vertical-align:middle !important; }
table.report th { background-color:#e2e8f0; font-weight:700; color:#000; text-transform:uppercase; letter-spacing:.5px; font-size:12px; border-bottom:2px solid #475569 !important; }
table.report thead th:first-child { width:18%; min-width:18%; }
table.report tbody td { font-weight:400; color:#111; }
table.report tbody tr:nth-child(even) { background-color:#f8fafc; }
table.report td.label { text-align:left; padding-left:10px; font-weight:700; color:#000; }
tr.total-row td { font-size:12px; font-weight:700; color:#000; }

.grade-ee, .grade-ee1, .grade-ee2 { color:#16a34a; font-weight:700; }
.grade-me, .grade-me1, .grade-me2 { color:#2563eb; font-weight:700; }
.grade-ae, .grade-ae1, .grade-ae2 { color:#d97706; font-weight:700; }
.grade-be, .grade-be1, .grade-be2 { color:#6b7280; font-weight:700; }

/* ═══════════════════════════════════════
   CHARTS
═══════════════════════════════════════ */
.performance-section { display:flex; align-items:flex-start; gap:15px; margin:10px 0; page-break-inside:avoid; break-inside:avoid; }
.performance-label { font-weight:500; color:#333; font-size:12px; flex-shrink:0; width:35%; line-height:1.3; padding-top:5px; }
.mini-chart-wrap { margin:0; flex-grow:1; max-width:280px; position:relative; height:90px; display:flex; gap:5px; }
.y-axis-labels { display:flex; flex-direction:column; justify-content:space-between; font-size:9px; font-weight:500; color:var(--muted-text); height:70px; margin-top:5px; text-align:right; flex-shrink:0; width:30px; }
.mini-chart { flex-grow:1; display:flex; justify-content:space-around; align-items:flex-end; position:relative; height:70px; width:100%; border-bottom:1px solid #333; border-left:1px solid #333; margin-top:5px; padding:0 5%; }
.grid-line { position:absolute; left:0; right:0; height:1px; border-top:1px dashed #d1d5db; z-index:0; }
.bar-item { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; position:relative; height:100%; width:30%; margin:0; text-align:center; z-index:1; }
.chart-bar { height:var(--bar-height); width:100%; min-height:3px; border-radius:2px 2px 0 0; transition:height .5s ease-out; }
.bar-generic-1 { background:#1a3fa8; }
.bar-generic-2 { background:#059669; }
.bar-generic-3 { background:#d97706; }
.bar-generic-4 { background:#dc2626; }
.bar-generic-5 { background:#7c3aed; }
.bar-value { font-size:10px; font-weight:700; color:var(--primary-text); margin-bottom:2px; white-space:nowrap; text-shadow:0 0 2px white; }
.chart-labels { position:absolute; bottom:5px; left:35px; right:0; display:flex; justify-content:space-around; padding:0 5%; }
.chart-label { width:auto; text-align:center; font-weight:600; line-height:1.1; font-size:10px; white-space:nowrap; transform:translateY(80%); }

/* ═══════════════════════════════════════
   SIGNATURES & COMMENTS
═══════════════════════════════════════ */
.comments-row, .sign-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:10px; font-size:12px; page-break-inside:avoid; break-inside:avoid; }
.comments-block { display:flex; flex-direction:column; gap:4px; }
.comments-block>div:first-child { font-weight:700; margin-bottom:0; color:#000; border-bottom:1px solid #111; padding-bottom:3px; font-size:12.5px; }
.comments-block>div:nth-child(2) { min-height:55px; line-height:1.5; color:#111; font-weight:400; font-size:12px; }
.comments-block>div:nth-child(2):empty { min-height:85px; }
.sign-row { margin-top:8px; padding:4px 0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); }
.sign-row.foot-dates { margin-top:8px; padding:4px 0; border:none; border-bottom:1px solid var(--border-color); }
.sign-row + .sign-row:not(.foot-dates) { margin-top:0 !important; border-top:none !important; padding-top:0 !important; }
.sign { border:none; padding:0; border-radius:0; min-height:20px; background:transparent; line-height:1.2; font-size:11px; display:flex; align-items:flex-end; padding-bottom:2px; color:#111; }
.comments-block .sign { border-bottom:none; }
.sign b { color:#000; font-weight:700; margin-right:4px; white-space:nowrap; }
.sign .signature-font { font-family:'Dancing Script',cursive; font-size:20px; color:#223c8a; padding:0 5px; }

/* ═══════════════════════════════════════
   TOASTS & DIALOGS
═══════════════════════════════════════ */
.toasts {
    position:fixed; top:22px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; gap:10px; z-index:9999;
    width:90vw; max-width:400px; align-items:center;
}
.toast {
    background:#1c1c2e; color:#fff; padding:12px 18px;
    border-radius:var(--r); box-shadow:var(--shadow-lg);
    font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px;
    animation:toastIn .35s cubic-bezier(.22,1,.36,1); width:100%;
    box-sizing:border-box; justify-content:center; text-align:center;
    border:1px solid rgba(255,255,255,.08);
}
.toast.exiting  { animation:toastOut .35s ease-in forwards; }
.toast.success  { background:var(--success); border-color:rgba(255,255,255,.12); }
.toast.error    { background:var(--danger);  border-color:rgba(255,255,255,.12); }
.toast.warn     { background:var(--warn); color:#1e293b; }

.inline-toast {
    position:fixed; transform:translate(-50%,-100%);
    background:#1c1c2e; color:#fff; padding:6px 12px;
    border-radius:var(--r-sm); font-size:11.5px; font-weight:700; z-index:10000;
    pointer-events:none; box-shadow:var(--shadow-md);
    animation:inlineToastIn .2s ease-out; white-space:nowrap;
}
.inline-toast::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border-width:5px; border-style:solid; border-color:#1c1c2e transparent transparent transparent; }
.inline-toast.exiting { animation:inlineToastOut .2s ease-in forwards; }
.inline-toast.error  { background:var(--danger); } .inline-toast.error::after  { border-color:var(--danger) transparent transparent transparent; }
.inline-toast.success{ background:var(--success);} .inline-toast.success::after{ border-color:var(--success) transparent transparent transparent; }

dialog {
    border-radius:var(--r-xl); padding:0;
    border:1px solid var(--border-color);
    box-shadow:var(--shadow-xl);
    max-width:740px; width:95%; max-height:90vh; overflow-y:auto; overflow-x:hidden;
    box-sizing:border-box;
}
dialog::backdrop { background:rgba(10,15,40,.5); backdrop-filter:blur(5px); }
dialog[open] { animation:slideUpIn .35s cubic-bezier(.22,1,.36,1); }

.dlg-hd {
    padding:18px 22px; font-weight:800; font-size:16px;
    border-bottom:1px solid var(--border-color);
    letter-spacing:-.01em;
    background:var(--surface-2);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.dlg-bd { padding:22px; line-height:1.6; }
.dlg-ft {
    padding:14px 22px; display:flex; gap:10px; justify-content:flex-end;
    border-top:1px solid var(--border-color); background:var(--surface-2);
    border-radius:0 0 var(--r-xl) var(--r-xl);
}
#errorDlg   .dlg-hd { background:#fef2f2; color:var(--danger); }
#confirmDlg .dlg-hd { background:#fffbeb; color:#854d0e; }
pre.err { background:var(--surface-2); border:1px solid var(--border-color); padding:14px; max-height:240px; overflow:auto; border-radius:var(--r-sm); font-size:13px; white-space:pre-wrap; word-break:break-word; }

/* ═══════════════════════════════════════
   FORMS & LISTS
═══════════════════════════════════════ */
.la-grid { display:grid; grid-template-columns:1fr 120px auto; gap:10px; align-items:center; margin-bottom:10px; }
.la-grid > label { font-weight:700; font-size:12px; color:var(--muted-text); padding-bottom:4px; }
.la-grid-header { border-bottom:1px solid var(--border-color); }
.la-item input[type="text"] { width:100%; }
.la-item .key-display { font-family:monospace; font-size:13px; color:var(--muted-text); padding:8px 12px; background:var(--surface-2); border-radius:var(--r-sm); border:1.5px solid var(--border-color); }
.details-form { display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; }
.details-form .input-group { display:flex; flex-direction:column; gap:6px; }
.details-form label { font-weight:700; font-size:13px; color:var(--primary-text); }
.details-form input, .details-form select { width:100%; }

.user-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.user-badge.admin { background:#fef2f2; color:#991b1b; border:1.5px solid #fecaca; }
.user-badge.user  { background:#ecfdf5; color:#065f46; border:1.5px solid #a7f3d0; }

/* Role-based hiding */
body.user-mode .restricted-action  { display:none !important; }
body.user-mode #livePreviewContainer { display:none !important; }
body.user-mode .two-col             { grid-template-columns:1fr !important; }

/* ═══════════════════════════════════════
   AUTH
═══════════════════════════════════════ */
#firebaseAuthOverlay {
    position:fixed; inset:0; z-index:9999;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:linear-gradient(145deg, #0f2070 0%, #1a3fa8 40%, #2a5cdb 100%);
    padding:20px; box-sizing:border-box;
    overflow:hidden;
}
/* Decorative circles */
#firebaseAuthOverlay::before {
    content:''; position:absolute; width:500px; height:500px; border-radius:50%;
    background:rgba(255,255,255,.04); top:-150px; right:-120px; pointer-events:none;
}
#firebaseAuthOverlay::after {
    content:''; position:absolute; width:320px; height:320px; border-radius:50%;
    background:rgba(255,255,255,.04); bottom:-100px; left:-80px; pointer-events:none;
}

.auth-greeting-container {
    color:#fff; text-align:center; margin-bottom:26px; width:100%; padding:0 20px;
    z-index:10; animation:fadeIn .6s ease-out;
}
.auth-greeting-container h1 { font-family:var(--font-display); font-size:36px; font-weight:700; margin:0 0 4px; letter-spacing:-.02em; opacity:.95; }
.auth-greeting-container h2 { font-size:17px; font-weight:500; margin:0; opacity:.75; letter-spacing:.01em; }

.auth-card {
    background:#fff; padding:34px 28px; border-radius:var(--r-xl);
    box-shadow:0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08);
    width:100%; max-width:400px; text-align:center; height:auto;
    max-height:85vh; overflow-y:auto; z-index:10;
    animation:slideUpIn .5s cubic-bezier(.22,1,.36,1);
}
@media (min-width:600px) {
    .auth-card { max-width:440px; }
    .auth-greeting-container { margin-bottom:32px; }
}

.auth-lang-btn {
    position:absolute; top:18px; right:18px;
    background:rgba(255,255,255,.12); border:none;
    border-radius:var(--r-sm); color:#fff; padding:8px 12px;
    display:flex; align-items:center; cursor:pointer;
    transition:background .2s, transform .2s;
    backdrop-filter:blur(6px); z-index:20;
}
.auth-lang-btn:hover { background:rgba(255,255,255,.22); transform:translateY(-1px); filter:none; }
.auth-lang-btn svg:first-child { width:20px; height:20px; }
.auth-card h2 { color:var(--accent); margin-top:0; font-family:var(--font-display); font-size:22px; font-weight:700; }
.auth-card p { color:var(--muted-text); font-size:14px; margin-bottom:22px; }
.auth-card .input-group { text-align:left; margin-bottom:16px; }
.auth-header-icon {
    width:58px; height:58px;
    background:linear-gradient(135deg, var(--accent-light), #c7d7ff);
    color:var(--accent); border-radius:var(--r-lg);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 16px;
    box-shadow:0 4px 14px rgba(26,63,168,.15);
}
.input-with-icon { position:relative; display:flex; align-items:center; }
.input-with-icon input { width:100%; padding-left:42px !important; padding-right:42px !important; }
.input-icon { position:absolute; left:12px; width:20px; height:20px; color:var(--subtle-text); pointer-events:none; }
.toggle-password {
    position:absolute; right:8px; background:transparent !important; border:none !important;
    padding:6px !important; cursor:pointer; color:var(--subtle-text) !important;
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--r-sm) !important; box-shadow:none !important;
}
.toggle-password:hover { color:var(--primary-text) !important; background:var(--surface-3) !important; transform:none !important; }
.toggle-password svg { width:20px; height:20px; }
.forgot-link { font-size:12px; color:var(--accent); text-decoration:none; font-weight:700; transition:opacity .2s; }
.forgot-link:hover { opacity:.75; text-decoration:underline; }
.auth-btn {
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%) !important;
    color:#fff !important; font-weight:700 !important; font-size:15px !important;
    border-radius:var(--r-sm) !important; padding:13px !important; width:100% !important;
    box-shadow:0 4px 16px rgba(26,63,168,.3) !important;
}

.spinner { animation:spin 1s linear infinite; width:20px; height:20px; color:#fff; margin:0 auto; }
.opacity-25 { opacity:.25; } .opacity-75 { opacity:.75; }
.msg-error   { background:#fef2f2; color:#dc2626; border:1.5px solid #fecaca; }
.msg-success { background:#ecfdf5; color:#059669; border:1.5px solid #a7f3d0; }

/* ═══════════════════════════════════════
   ENTERPRISE DASHBOARD & ANALYTICS
═══════════════════════════════════════ */
.enterprise-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.metric-card {
    background:var(--card-bg); border:1.5px solid var(--border-color);
    border-radius:var(--r-lg); padding:22px; text-align:center;
    box-shadow:var(--shadow-xs); transition:transform .2s, box-shadow .2s;
}
.metric-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.metric-value { font-size:34px; font-weight:800; color:var(--accent); letter-spacing:-.02em; }
.metric-label { font-size:12.5px; color:var(--muted-text); margin-top:5px; font-weight:600; }

.analytics-bar { height:22px; background:var(--surface-3); border-radius:999px; overflow:hidden; margin:8px 0; }
.analytics-fill { height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-mid)); transition:width .5s ease; border-radius:999px; }
.analytics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }

.audit-table { width:100%; font-size:13px; border-collapse:collapse; }
.audit-table th { background:var(--header-bg); text-align:left; padding:10px 12px; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-text); }
.audit-table td { padding:10px 12px; border-bottom:1px solid var(--border-color); }
.audit-timestamp { font-family:monospace; font-size:11.5px; color:var(--muted-text); }
.audit-loading { text-align:center; padding:40px; color:var(--muted-text); }
.audit-empty   { text-align:center; padding:40px; font-style:italic; color:var(--muted-text); }

/* Status cards */
.status-card-content { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; min-height:54px; }
.status-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.status-dot { width:12px; height:12px; border-radius:50%; background:var(--muted-text); transition:background .3s, box-shadow .3s; flex-shrink:0; }
.status-dot.healthy { background:var(--success); box-shadow:0 0 8px rgba(5,150,105,.4); }
.status-dot.error   { background:var(--danger);  box-shadow:0 0 8px rgba(220,38,38,.5); animation:pulseRed 2s infinite; }
.status-main-text { font-size:17px; font-weight:800; color:var(--primary-text); line-height:1; }
.status-sub-text  { font-size:13px; font-weight:500; color:var(--muted-text); text-align:center; }

/* ═══════════════════════════════════════
   ADD MARKS PANEL
═══════════════════════════════════════ */
.am-section {
    background:var(--surface-2); border:1.5px solid var(--border-color);
    border-radius:var(--r); padding:18px; margin-bottom:14px;
    box-shadow:var(--shadow-xs);
    transition:border-color .18s;
}
.am-section:focus-within { border-color:rgba(59,107,255,.35); }
.am-title { margin:0 0 14px; font-size:12px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.07em; }
.am-grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:12px; }
.am-grid-3 .input-group { display:flex; flex-direction:column; gap:6px; }
.am-grid-3 label { font-size:12px; font-weight:700; color:var(--primary-text); }
.am-grid-3 input, .am-grid-3 select { padding:8px 12px; border-radius:var(--r-sm); border:1.5px solid var(--border-color); font-size:14px; width:100%; box-sizing:border-box; background:#fff; font-family:var(--font-sans); }
.am-grid-3 input:focus, .am-grid-3 select:focus { border-color:var(--border-focus); outline:none; box-shadow:0 0 0 3px rgba(59,107,255,.13); }

.am-btn-group { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.am-btn {
    padding:8px 16px; border-radius:999px; border:1.5px solid var(--border-color);
    background:var(--card-bg); color:var(--muted-text);
    font-family:var(--font-sans); font-size:13px; font-weight:700; cursor:pointer;
    transition:all .15s cubic-bezier(.34,1.56,.64,1);
    flex:1 1 auto; text-align:center; user-select:none;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.am-btn:active { transform:scale(.95); transition:transform .05s; }
.am-btn.active { background:var(--accent-light); color:var(--accent); border-color:#a5c0ff; box-shadow:var(--shadow-xs); }
.am-btn:hover:not(.active) { background:var(--surface-3); color:var(--primary-text); }
.grade-group { display:none; }
.grade-group.active { display:flex; animation:fadeIn .3s; }

/* Subjects / out-of grid */
.am-subjects-grid { display:grid; grid-template-columns:1fr; gap:8px; max-height:55vh; min-height:auto; overflow-y:auto; padding-right:4px; margin-bottom:12px; align-content:start; }
.am-subject-row { display:flex; align-items:center; justify-content:space-between; background:#fff; padding:8px 12px !important; border-radius:var(--r-sm); border:1.5px solid var(--border-color); height:50px !important; max-height:50px !important; box-sizing:border-box; }
.am-subject-name { font-size:13px; font-weight:700; color:var(--primary-text); flex:1; text-align:left; }
.am-subject-input-wrapper { display:flex; align-items:center; justify-content:flex-end; gap:8px; width:auto !important; }
.am-subject-input { min-width:0 !important; max-width:80px !important; width:70px !important; height:34px !important; text-align:center; padding:4px 8px !important; border-radius:var(--r-sm); border:1.5px solid var(--border-color); font-size:15px; font-weight:800; color:var(--accent); background:var(--surface-2); transition:all .2s; box-sizing:border-box; margin:0 !important; }
.am-subject-input:focus { border-color:var(--border-focus); outline:none; box-shadow:0 0 0 3px rgba(59,107,255,.13); background:#fff; }
.am-outof-label { font-size:12px; color:var(--muted-text); font-weight:700; white-space:nowrap; margin:0; }

/* Learner list */
.am-split-view { display:flex; gap:16px; flex-direction:column; }
@media (min-width:768px) { .am-split-view { flex-direction:row; align-items:flex-start; } .am-learner-list-wrap { width:220px; flex-shrink:0; } .am-marks-entry { flex:1; } }
.am-learner-list { display:flex; flex-direction:column; gap:6px; max-height:60vh; min-height:auto; overflow-y:auto; padding-right:4px; }
.am-learner-item {
    padding:11px 14px; background:#fff; border:1.5px solid var(--border-color);
    border-radius:var(--r-sm); cursor:pointer; font-size:13px; font-weight:600;
    transition:all .18s; display:flex; justify-content:space-between; align-items:center;
    box-shadow:var(--shadow-xs);
}
.am-learner-item:hover { border-color:#93c5fd; background:var(--header-bg); }
.am-learner-item.active { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--shadow-md); }
.am-learner-item .status { width:10px; height:10px; border-radius:50%; background:var(--border-color); }
.am-learner-item.has-marks .status { background:#34d399; }
.am-learner-item.active .status { border:2px solid rgba(255,255,255,.6); }

.add-marks-flow { display:flex; flex-direction:column; }

/* ═══════════════════════════════════════
   GRID VIEW
═══════════════════════════════════════ */
.am-grid-table-container {
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth; overscroll-behavior-x:contain;
    overflow-x:auto; max-height:60vh; min-height:auto;
    border:1.5px solid var(--border-color); border-radius:var(--r);
    background:#fff; max-width:100%; box-sizing:border-box; display:block;
}
.am-grid-table-container::-webkit-scrollbar { width:6px; height:6px; }
.am-grid-table-container::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:4px; }

#amGridTable { border-collapse:separate !important; border-spacing:0; border-top:1px solid var(--border-color); width:100%; min-width:400px; margin:0; font-size:13px; }
#amGridTable th, #amGridTable td { border-right:1px solid var(--border-color); border-bottom:1px solid var(--border-color); }
#amGridTable th { background:var(--header-bg); color:var(--primary-text); font-weight:800; position:sticky; top:0; z-index:10; white-space:nowrap; padding:9px 8px !important; font-size:12px; }
#amGridTable th.learner-name-cell { left:0; z-index:15; min-width:100px; max-width:130px; border-left:1px solid var(--border-color); }
#amGridTable td { padding:4px 6px !important; text-align:center; vertical-align:middle; }
#amGridTable td.learner-name-cell { text-align:left; font-weight:700; position:sticky; left:0; background:#fff; z-index:5; min-width:100px; max-width:130px; white-space:normal; box-shadow:2px 0 6px rgba(0,0,0,.04); border-left:1px solid var(--border-color); line-height:1.2; }
#amGridTable tr:nth-child(even) td.learner-name-cell { background:var(--surface-2); }
#amGridTable tr:focus-within td { background-color:#f0fdf4 !important; transition:background-color .1s; }

.grid-score-input {
    width:100% !important; min-width:0 !important; max-width:70px !important; height:38px !important;
    margin:0 auto; display:block; text-align:center; padding:4px;
    border-radius:var(--r-sm); border:1.5px solid var(--border-color);
    font-size:15px; font-weight:800; color:var(--accent);
    background:var(--surface-2); transition:all .12s; box-sizing:border-box;
}
.grid-score-input:focus { border-color:var(--success); outline:none; box-shadow:inset 0 0 0 2px rgba(16,185,129,.3); background:#fff; }
.grid-score-input:disabled, .locked-input { background:var(--surface-3) !important; color:var(--subtle-text) !important; cursor:not-allowed !important; }

/* Sticky save bars */
div:has(> #amGridSaveBtn),
div:has(> #amSaveAndNextBtn) {
    position:sticky !important; bottom:-1px;
    padding:12px; background:rgba(255,255,255,.98); backdrop-filter:blur(8px);
    z-index:90; border-top:1px solid var(--border-color);
    margin:auto -12px -12px -12px !important;
    box-shadow:0 -6px 18px rgba(26,63,168,.1);
    border-radius:0 0 var(--r-lg) var(--r-lg);
}
#amSaveOutOfBtn { position:sticky !important; bottom:12px; z-index:90; box-shadow:0 6px 20px rgba(16,185,129,.35); }
#amGridSaveBtn, #amSaveAndNextBtn { box-shadow:0 4px 12px rgba(16,185,129,.28); font-size:15px !important; width:100%; }

/* ═══════════════════════════════════════
   TEACHER MANAGEMENT
═══════════════════════════════════════ */
.subject-checkboxes-container { border:1.5px solid var(--border-color); border-radius:var(--r); background:var(--surface-2); }
.grade-subject-panels .grade-panel { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; max-height:250px; overflow-y:auto; padding:12px; }
.subject-pill { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1.5px solid var(--border-color); border-radius:var(--r-sm); background:#fff; font-size:12px; font-weight:600; cursor:pointer; transition:all .18s; user-select:none; }
.subject-pill.selected { border-color:var(--accent); background:var(--accent-light); color:var(--accent); }
.subject-pill input[type="checkbox"] { width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer; }
.grade-tabs { display:flex; gap:8px; overflow-x:auto; padding:8px; border-bottom:1px solid var(--border-color); background:var(--surface-2); border-radius:var(--r) var(--r) 0 0; }
.grade-tabs::-webkit-scrollbar { height:4px; }
.grade-tabs::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:4px; }

/* ═══════════════════════════════════════
   MISC COMPONENTS
═══════════════════════════════════════ */
.muted { color:var(--muted-text); }

/* Active users list items */
#activeUsersList > div { padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:13px; border-bottom:1px solid var(--border-color); }
#activeUsersList > div:last-child { border-bottom:none; }

/* Global search results */
#globalSearchResults > div { padding:12px 16px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border-color); transition:background .15s; }
#globalSearchResults > div:hover { background:var(--header-bg); }

/* Existing teachers list */
#existingTeachersList > div { padding:10px 12px; border:1px solid var(--border-color); border-radius:var(--r-sm); background:var(--surface-2); display:flex; justify-content:space-between; align-items:center; }

/* ═══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════ */
@media (max-width:960px) {
    .page-container { padding:0 12px; margin:0 auto; }
    .page-header { flex-direction:column; align-items:stretch; top:0; border-radius:0; padding:8px; gap:8px; }
    .two-col { grid-template-columns:1fr; }
    .panel { padding:16px; margin-bottom:12px; }
}
@media (max-width:768px) {
    .toolbar-group { flex-wrap:wrap; }
    .details-form { grid-template-columns:1fr; }
    .am-section { padding:12px; }
    .am-split-view { gap:12px; }
}
@media (max-width:600px) {
    .page-container { padding:0 6px; }
    .panel { padding:10px; }
    .am-section { padding:10px; }
    .toast { font-size:13px; padding:10px; }
    .user-badge { max-width:180px; font-size:11px; }
    .auth-card { padding:24px 16px; box-sizing:border-box; }
    .la-grid { grid-template-columns:1fr 80px auto; gap:6px; }
    .school-head { flex-direction:column !important; text-align:center !important; gap:8px !important; }
    .school-head img { margin:0 auto !important; max-height:60px !important; }
    .meta { grid-template-columns:1fr !important; gap:4px !important; }
    .comments-row, .sign-row { grid-template-columns:1fr !important; gap:8px !important; }
    .sign-row.foot-dates { flex-direction:column !important; gap:8px !important; }
    .sign-row.foot-dates > div { width:100% !important; justify-content:space-between !important; }
    .performance-section { flex-direction:column !important; }
    .performance-label { width:100% !important; }
    .mini-chart-wrap { max-width:100% !important; width:100% !important; }
    table.report th, table.report td { padding:4px 2px !important; font-size:10px !important; }
}

/* ═══════════════════════════════════════
   PRINT CSS — UNCHANGED (critical)
═══════════════════════════════════════ */
@media print {
    @page { size:A4 portrait; margin:5mm; }
    html, body, main, #mainContent, #batchContainer { background:#fff !important; margin:0 !important; padding:0 !important; width:100% !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .page-header, .panel, #statusBar, .toasts, .nav-drawer, .nav-backdrop, #firebaseAuthOverlay { display:none !important; }
    #batchContainer { display:block !important; }
    .sheet { width:100% !important; margin:0 !important; padding:5mm !important; border:none !important; border-radius:0 !important; box-shadow:none !important; box-sizing:border-box !important; overflow:visible !important; page-break-inside:auto !important; break-inside:auto !important; page-break-after:always; break-after:page; display:flex !important; flex-direction:column !important; height:287mm !important; min-height:287mm !important; }
    .sheet:last-child { page-break-after:auto !important; break-after:auto !important; }
    .school-head { border-bottom:4px double #000 !important; }
    .school-head h1 { font-size:24px !important; margin-bottom:4px !important; }
    .school-head .addr { font-size:10px !important; margin-top:0 !important; color:#000 !important; }
    .school-head .motto { font-size:12px !important; margin-top:2px !important; }
    .school-head img { max-height:25mm !important; }
    .key { margin-bottom:2px !important; } .title { font-size:14px !important; margin:2px 0 8px !important; }
    .sheet table.report { font-size:11px !important; margin-bottom:8px !important; }
    .sheet table.report th { font-size:11.5px !important; padding:8px 6px !important; border:1px solid #000 !important; background-color:#e2e8f0 !important; color:#000 !important; }
    .sheet table.report td { font-size:11px !important; padding:8px 6px !important; border:1px solid #000 !important; }
    .sheet tr.total-row td { font-size:11.5px !important; }
    table.report tbody tr:nth-child(even) { background-color:#f8fafc !important; }
    .meta { font-size:11px !important; padding:4px !important; margin-bottom:6px !important; gap:4px 10px !important; }
    .comments-block>div:nth-child(2) { font-size:11.5px !important; min-height:50px !important; } .comments-block>div:nth-child(2):empty { min-height:95px !important; }
    .mini-chart-wrap { height:70px !important; max-width:220px !important; } .mini-chart { height:45px !important; padding-bottom:2px !important; } .chart-bar { min-height:2px !important; } .bar-value { font-size:9px !important; margin-bottom:1px !important; } .chart-labels, .chart-label { font-size:9px !important; }
    .performance-section { margin-top:auto !important; margin-bottom:0 !important; }
    .comments-row { margin-top:auto !important; gap:10px !important; }
    .sign-row { margin-top:15px !important; padding:12px 0 !important; gap:10px !important; } .sign { min-height:18px !important; padding-bottom:0 !important; font-size:11.5px !important; margin-top:2px !important; }
    .sign-row + div:not(.foot-dates) { margin-top:15px !important; gap:15px !important; }
    .sign-row.foot-dates { margin-top:auto !important; padding-top:15px !important; }
    .sheet table, .sheet thead, .sheet tbody, .sheet tr, .sheet td, .sheet th { page-break-inside:avoid !important; break-inside:avoid !important; }
    .comments-row, .sign-row, .meta, .performance-section { page-break-inside:avoid !important; break-inside:avoid !important; }
    img, svg { max-width:100% !important; max-height:120mm !important; height:auto !important; }
    .sheet, .sheet * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}