@layer reset, tokens, base, layout, components, utilities; @layer reset { * { box-sizing: border-box; } } @layer tokens { :root { --bg: oklch(0.99 0.01 90); --surface: oklch(1 0 0); --border: oklch(0.88 0.01 90); --border-soft: oklch(0.93 0.01 90); --text-2: oklch(0.55 0.02 90); --text-1: oklch(0.25 0.02 90); --ink: oklch(0.16 0.01 90); --ink-2: oklch(0.28 0.01 90); --brand: oklch(0.56 0.15 40); --brand-hover: oklch(0.50 0.15 40); --brand-wash: oklch(0.85 0.05 40); --success: oklch(0.6 0.14 145); --success-bg: oklch(0.94 0.05 145); --success-fg: oklch(0.4 0.12 145); --success-alert-bg: oklch(0.97 0.02 145); --success-alert-fg: oklch(0.3 0.05 145); --danger: oklch(0.58 0.18 25); --danger-bg: oklch(0.94 0.06 25); --danger-fg: oklch(0.45 0.15 25); --danger-alert-bg: oklch(0.97 0.02 25); --danger-alert-fg: oklch(0.35 0.08 25); --info: oklch(0.55 0.14 250); --info-bg: oklch(0.94 0.04 250); --info-fg: oklch(0.42 0.12 250); --warn: oklch(0.75 0.15 80); --warn-bg: oklch(0.95 0.05 80); --warn-fg: oklch(0.45 0.12 80); --warn-alert-bg: oklch(0.98 0.02 80); --warn-alert-fg: oklch(0.35 0.06 80); --neutral-bg: oklch(0.93 0.01 90); --neutral-fg: oklch(0.5 0.02 90); --locked-bg: oklch(0.9 0.01 90); --locked-fg: oklch(0.3 0.02 90); --surface-sunken: oklch(0.99 0.005 90); --text-3: oklch(0.6 0.02 90); --danger-ink: oklch(0.5 0.15 25); --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 26px; --text-stat: 28px; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --space-0: 0; --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-44: 44px; --space-56: 56px; --radius-sm: 3px; --radius: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 999px; --sidebar-w: 240px; --content-max: 1100px; --shadow-none: none; --shadow-sm: 0 1px 2px oklch(0.15 0.01 90 / 0.05); --shadow-md: 0 2px 8px -2px oklch(0.15 0.01 90 / 0.10); --shadow-lg: 0 8px 24px -8px oklch(0.15 0.01 90 / 0.18); --shadow-xl: 0 24px 48px -24px oklch(0.15 0.01 90 / 0.28); --nav-active-bg: oklch(0.30 0.02 250); --nav-active-fg: oklch(0.98 0.005 250); --nav-accent: oklch(0.62 0.10 250); --focus-ring: oklch(0.55 0.18 250); --chart-band-1: oklch(0.90 0.030 90); --chart-band-2: oklch(0.82 0.050 75); --chart-band-3: oklch(0.73 0.070 60); --chart-band-4: oklch(0.64 0.090 48); --chart-band-5: oklch(0.55 0.110 40); --chart-band-6: oklch(0.45 0.110 34); --chart-band-7: oklch(0.36 0.090 30); --chart-grid: oklch(0.90 0.01 90); --chart-track: oklch(0.95 0.01 90); --chart-ink: oklch(0.25 0.02 90); --chart-ink-muted: oklch(0.50 0.02 90); --chart-ink-invert: oklch(0.99 0.005 90); --chart-median: oklch(0.25 0.02 90); --chart-mean: oklch(0.56 0.15 40); --transition-fast: 120ms cubic-bezier(0.2, 0.7, 0.3, 1); --transition-base: 180ms cubic-bezier(0.2, 0.7, 0.3, 1); } } @layer base { @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text-1); font-family: 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } .num, .tabular { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); text-decoration: underline; } input, select, textarea, button { font-family: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; } :where(a, button, summary, [tabindex], [role="button"], [role="tab"], [role="link"]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } } @layer layout { body, a.back-link { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input, textarea, .app-main .content{ -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--ink); color: white; display: flex; flex-direction: column; padding: 14px 0; position: sticky; top: 0; align-self: flex-start; height: 100vh; will-change: transform; } .sidebar-header { padding: 0 20px 14px; border-bottom: 1px solid var(--ink-2); display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .sidebar-identity { display: flex; align-items: center; gap: 10px; min-width: 0; } .sidebar-identity-text { min-width: 0; } .sidebar-school { font-size: 15px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sidebar-programme { font-size: 11px; color: var(--text-3); margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sidebar-close { display: none; } .drawer-backdrop { display: none; } .sidebar-nav { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px 14px; overflow-y: auto; min-height: 0; contain: paint; scrollbar-width: thin; scrollbar-color: oklch(0.4 0.01 90) transparent; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: oklch(0.4 0.01 90); border-radius: var(--radius-full); } .sidebar-nav::-webkit-scrollbar-thumb:hover { background: oklch(0.5 0.01 90); } .nav-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 8px 12px 4px; } .nav-section-label:first-child { padding-top: 2px; } .nav-item { text-align: left; padding: 8px 12px; font-size: 14px; font-weight: 500; border: none; border-left: 3px solid transparent; border-radius: var(--radius); cursor: pointer; background: transparent; color: oklch(0.75 0.02 90); text-decoration: none; display: flex; align-items: center; gap: 10px; } .nav-item .icon { flex-shrink: 0; color: oklch(0.6 0.02 90); } .nav-item:hover .icon, .nav-item.is-active .icon { color: inherit; } .nav-item:hover { background: var(--ink-2); color: white; text-decoration: none; } .nav-item.is-active { background: var(--nav-active-bg); color: var(--nav-active-fg); border-left-color: var(--nav-accent); } .nav-item.is-locked { justify-content: space-between; color: var(--text-3); } .nav-item.is-locked:hover { background: var(--ink-2); color: oklch(0.8 0.02 90); } span.nav-item.is-locked { cursor: default; } .nav-item-lock { flex-shrink: 0; opacity: 0.75; display: inline-flex; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 44px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 20; } .topbar-crumb { font-size: 13px; color: var(--text-2); font-weight: 500; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; } .topbar-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .drawer-trigger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: none; border: none; border-radius: var(--radius); color: var(--text-1); cursor: pointer; } .drawer-trigger:hover { background: var(--bg); } .user-menu { position: relative; } .user-menu-trigger { display: flex; align-items: center; gap: 10px; background: none; border: none; border-radius: var(--radius); padding: 4px 6px 4px 4px; cursor: pointer; color: inherit; text-align: left; } .user-menu-trigger:hover { background: var(--bg); } .user-menu-trigger .icon { color: var(--text-3); } .user-chip { display: flex; align-items: center; gap: 10px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .avatar-lg { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--bg); border: 1px solid var(--border); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; } .avatar-lg img { width: 100%; height: 100%; object-fit: cover; } .user-name { font-size: 13px; font-weight: 600; line-height: 1.2; } .user-role { font-size: 11px; color: var(--text-2); line-height: 1.2; } .user-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; display: none; } .user-menu.is-open .user-menu-panel { display: block; } .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius); font-size: 13px; font-weight: 500; color: var(--text-1); background: none; border: none; cursor: pointer; text-align: left; text-decoration: none; } .user-menu-item:hover { background: var(--bg); text-decoration: none; } .user-menu-item .icon { color: var(--text-3); flex-shrink: 0; } .user-menu-divider { height: 1px; background: var(--border-soft); margin: 6px 4px; } .content { padding: 36px 44px; max-width: var(--content-max); width: 100%; position: relative; } @media (max-width: 900px) { .drawer-trigger { display: inline-flex; width: 44px; height: 44px; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(82vw, 300px); transform: translateX(-100%); transition: transform var(--transition-base); box-shadow: var(--shadow-xl); } .sidebar.is-open { transform: translateX(0); } .sidebar-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; background: none; border: none; border-radius: var(--radius); color: white; cursor: pointer; } .sidebar-close:hover { background: var(--ink-2); } .drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: oklch(0.1 0.01 90 / 0.5); } .drawer-backdrop.is-open { display: block; } .content { padding: 24px 20px; } .topbar { padding: 12px 20px; } .user-meta { display: none; } } .auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: var(--bg); gap: 28px; } .auth-wordmark { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; } .auth-wordmark a { color: var(--ink); } .auth-wordmark a:hover { color: var(--brand); text-decoration: none; } .auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 20px; } .auth-card--wide { max-width: 440px; } .plan-picker { display: flex; flex-direction: column; gap: 10px; } .plan-option { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; } .plan-option:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); } .plan-option input[type="radio"] { margin-top: 3px; flex-shrink: 0; } .plan-option-name { font-size: 14px; font-weight: 600; color: var(--ink); } .plan-option-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; } .auth-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); text-align: center; } .auth-title { font-size: 22px; font-weight: 700; color: var(--ink); text-align: center; margin: 0; } .auth-sub { font-size: 13px; color: var(--text-2); text-align: center; margin: 8px 0 0; } .auth-form { display: flex; flex-direction: column; gap: 16px; } .auth-hint { font-size: 12px; color: var(--text-2); text-align: center; } @media (max-width: 480px) { .auth-card { max-width: 100%; } } .public-page { min-height: 100vh; display: flex; flex-direction: column; } .public-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 44px; border-bottom: 1px solid var(--border); } .public-wordmark { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; } .public-wordmark:hover { color: var(--brand); text-decoration: none; } .public-nav { display: flex; align-items: center; gap: 20px; } .public-nav a:not(.btn) { color: var(--text-1); font-size: 14px; font-weight: 500; } .public-nav a:not(.btn):hover { color: var(--brand); } .public-main { flex: 1; } .public-footer { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 24px 44px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); } .public-footer a { color: var(--text-2); } .public-footer a:hover { color: var(--brand); } @media (max-width: 600px) { .public-topbar { padding: 14px 20px; } .public-footer { padding: 20px; flex-direction: column; gap: 8px; } } .portal-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } .portal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 44px; border-bottom: 1px solid var(--border); background: var(--surface); } .portal-wordmark { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); } .portal-wordmark:hover { text-decoration: none; } .portal-wordmark:hover .portal-wordmark-school { color: var(--brand); } .portal-logo { max-width: 32px; max-height: 32px; object-fit: contain; flex-shrink: 0; } .portal-wordmark-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .portal-wordmark-school { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-wordmark-portal { font-size: 12px; font-weight: 500; color: var(--brand); } .portal-topbar-right { display: flex; align-items: center; gap: 12px; } .portal-switch-trigger { display: inline-flex; align-items: center; gap: 6px; } .portal-switch-panel { min-width: 240px; } .portal-switch-item { justify-content: space-between; } .portal-switch-name { display: block; font-weight: 600; color: var(--ink); } .portal-switch-meta { display: block; font-size: 12px; font-weight: 400; color: var(--text-2); } .portal-switch-item.is-current { background: var(--bg); } .portal-content { flex: 1; padding: 32px 44px 56px; max-width: var(--content-max); margin: 0 auto; width: 100%; } .portal-content:focus { outline: none; } .portal-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 16px 44px; font-size: 13px; color: var(--text-2); text-align: center; } } @layer components { .h1 { font-size: 26px; font-weight: 700; margin: 0; } .h2 { font-size: 18px; font-weight: 700; margin: 36px 0 0; } .sub { font-size: 14px; color: var(--text-2); margin: 4px 0 0; } .group-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); font-weight: 600; } .icon { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; } .icon-xs { font-size: 14px; } .icon-sm { font-size: 16px; } .icon-md { font-size: 18px; } .icon-lg { font-size: 22px; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: var(--radius); border: none; cursor: pointer; line-height: 1.2; } .btn-sm { padding: 7px 14px; font-size: 13px; } .btn-primary { background: var(--brand); color: white; } .btn-primary:hover { background: var(--brand-hover); } .btn-primary:disabled { background: var(--brand-wash); cursor: not-allowed; } .btn-secondary { background: white; color: var(--text-1); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg); } .btn-danger { background: white; color: oklch(0.5 0.15 25); border: 1px solid oklch(0.75 0.1 25); } .btn-danger:hover { background: var(--danger-alert-bg); } .btn-ghost { background: transparent; color: var(--text-2); border: none; padding: 10px 4px; } .btn-ghost:hover { color: var(--text-1); } .back-link { background: none; border: none; color: var(--text-2); font-size: 13px; cursor: pointer; padding: 4px 0; font-weight: 500; display: inline-block; margin-bottom: 6px; } .back-link:hover { color: var(--text-1); text-decoration: none; } .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 3px; white-space: nowrap; } .badge-present { background: var(--success-bg); color: var(--success-fg); } .badge-absent { background: var(--danger-bg); color: var(--danger-fg); } .badge-exempt { background: var(--info-bg); color: var(--info-fg); } .badge-pending { background: var(--warn-bg); color: var(--warn-fg); } .badge-neutral { background: var(--neutral-bg); color: var(--neutral-fg); } .badge-locked { background: var(--locked-bg); color: var(--locked-fg); } .year-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .year-tab { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; white-space: nowrap; } .year-tab:hover { border-color: var(--text-2); color: var(--text-1); } .year-tab.is-active { background: var(--success); border-color: var(--success); color: white; } .year-tab .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; } .booklet-nav { position: sticky; top: var(--booklet-nav-top, 56px); z-index: 10; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .booklet-nav-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); white-space: nowrap; } .booklet-nav-list { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 2px; } .bk-anchor { display: block; height: 0; scroll-margin-top: var(--booklet-anchor-offset, 120px); } @media (max-width: 600px) { .booklet-nav-label { display: none; } } .field { display: flex; flex-direction: column; } .field label { display: block; font-size: 12px; font-weight: 600; color: oklch(0.4 0.02 90); margin-bottom: 6px; } .input, select.input { width: 100%; padding: 9px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-1); } .input-compact { width: 150px; } .input-narrow { width: 180px; } .setup-form { max-width: 480px; } .logo-preview { max-width: 72px; max-height: 72px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; flex-shrink: 0; } .input-error { border: 1.5px solid var(--danger); background: var(--danger-alert-bg); } .field-error { font-size: 12px; color: oklch(0.55 0.18 25); margin-top: 5px; } .score-input { width: 56px; padding: 5px; font-size: 13px; font-weight: 600; text-align: center; border: 1px solid var(--border); border-radius: 3px; background: white; color: var(--text-1); } .score-input:disabled { background: oklch(0.95 0.01 90); color: var(--text-3); } .score-input.is-invalid { border-color: var(--danger); background: var(--danger-alert-bg); } .toggle-group { display: flex; gap: 4px; justify-content: center; } .toggle-pill { padding: 4px 8px; font-size: 11px; font-weight: 600; border-radius: 3px; cursor: pointer; border: none; background: var(--neutral-bg); color: var(--neutral-fg); } .toggle-pill.is-active-present { background: var(--success); color: white; } .toggle-pill.is-active-absent { background: var(--danger); color: white; } .toggle-pill.is-active-exempt { background: var(--info); color: white; } .toggle-pill.is-active-late { background: var(--warn); color: white; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); } .card.is-active { border-color: var(--ink); } .card-row { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-sm); } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stat-grid-auto { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .stat-label { font-size: 12px; color: var(--text-2); font-weight: 500; } .stat-value { font-size: 28px; font-weight: 700; margin-top: 6px; } .stat-value-money { font-size: 22px; font-weight: 700; margin-top: 6px; } .stat-delta { font-size: 12px; margin-top: 6px; font-weight: 600; color: var(--text-2); } .row-stack { display: flex; flex-direction: column; gap: 12px; } .alert { font-size: 14px; padding: 12px 16px; border-radius: var(--radius); border-left: 3px solid; } .alert-present { background: var(--success-alert-bg); border-color: var(--success); color: var(--success-alert-fg); } .alert-pending { background: var(--warn-alert-bg); border-color: var(--warn); color: var(--warn-alert-fg); } .alert-absent { background: var(--danger-alert-bg); border-color: var(--danger); color: var(--danger-alert-fg); } .alert-warn { background: oklch(0.97 0.03 65); border-color: oklch(0.7 0.14 65); color: oklch(0.4 0.1 55); } .alert-info { background: var(--info-bg); border-color: var(--info); color: var(--info-fg); } .detail-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin: 24px 0 20px; } .detail-tab { padding: 10px 2px; font-size: 14px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; } .detail-tab:hover { color: var(--text-1); text-decoration: none; } .detail-tab.is-active { color: var(--ink); border-bottom-color: var(--brand); } .detail-tabs-divider { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--border); } .impersonation-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 44px; font-size: 13px; font-weight: 600; background: var(--warn-bg); color: var(--warn-fg); border-bottom: 1px solid var(--warn); } .impersonation-banner a { color: var(--warn-fg); text-decoration: underline; } .trial-banner { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 44px; font-size: 13px; font-weight: 500; background: var(--brand-wash); color: var(--text-1); border-bottom: 1px solid var(--border); } .trial-banner a { color: var(--brand-hover); text-decoration: underline; font-weight: 600; } .empty-state { border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--text-2); } .empty-state p { font-size: 14px; margin: 0 0 12px; } .child-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; text-decoration: none; } .child-card-name { font-size: 16px; font-weight: 700; color: var(--ink); } .child-card-meta { font-size: 12px; color: var(--text-2); margin-top: 4px; } .child-card-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--text-1); } .portal-news-item { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; } .portal-title { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 4px; } .portal-sub { margin-bottom: 24px; } .portal-back { margin-bottom: 8px; } .portal-block { margin-bottom: 20px; } .portal-label { margin: 0 0 14px; } .portal-sublabel { margin: 0 0 8px; } .portal-divided { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .portal-stack { margin-top: 16px; } .portal-empty { margin-top: 14px; } .row-text { font-size: 13px; } .row-title { font-size: 13px; font-weight: 600; } .row-strong { font-size: 14px; font-weight: 600; } .row-meta { font-size: 13px; color: var(--text-2); } .row-note { font-size: 12px; color: var(--text-2); } .row-note-spaced { margin-top: 2px; } .row-end { display: flex; align-items: center; gap: 10px; } .row-badge { margin-left: 6px; } .card-row-wrap { flex-wrap: wrap; } .fees-amount { font-size: 20px; font-weight: 700; margin-top: 4px; } .fees-unit { font-size: 13px; font-weight: 400; color: var(--text-2); } .fees-breakdown { font-size: 13px; color: var(--text-2); margin-top: 2px; } .tt-day { margin-bottom: 6px; } .tt-row { padding: 8px 10px; } .tt-time { color: var(--text-2); } .tt-grid-wrap { overflow-x: auto; margin-top: var(--space-20); } .tt-grid { border-collapse: collapse; width: 100%; min-width: 820px; } .tt-grid th, .tt-grid td { padding: var(--space-8); text-align: left; } .tt-grid thead th { font-size: var(--text-xs); color: var(--text-2); font-weight: var(--weight-normal); min-width: 130px; } .tt-grid tbody th[scope="row"] { font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; vertical-align: top; } .tt-grid thead th:first-child, .tt-grid tbody th[scope="row"] { position: sticky; left: 0; background: var(--surface); } .tt-grid tbody td { vertical-align: top; } .tt-period-time { font-size: var(--text-2xs); font-weight: var(--weight-normal); color: var(--text-2); } .tt-period-break { margin-top: var(--space-4); display: inline-block; } .tt-entry-card { padding: var(--space-8); font-size: var(--text-xs); } .tt-entry-actions { margin-top: var(--space-6); display: flex; gap: var(--space-8); } .tt-entry-remove { font-size: var(--text-2xs); background: none; border: none; padding: 0; cursor: pointer; } .term-picker { max-width: 240px; margin-top: var(--space-16); } .form-narrow { max-width: 640px; margin-top: var(--space-24); } @media print { .tt-print-landscape { page: tt-landscape; } @page tt-landscape { size: landscape; margin: 10mm 8mm; } } @media (max-width: 600px) { .portal-topbar { padding: 12px 16px; } .portal-content { padding: 20px 16px 40px; } .portal-footer { padding: 14px 16px; } .child-card { flex-direction: column; align-items: flex-start; } .portal-content .btn, .portal-topbar .btn, .portal-switch-item { min-height: 44px; } .portal-content .card-row .btn { width: 100%; } } @media (max-width: 600px), (pointer: coarse) { .btn, .btn-sm, .back-link, .year-tab, .detail-tab, .nav-item, .user-menu-trigger, .user-menu-item { min-height: 44px; } .year-tab, .detail-tab, .nav-item { display: inline-flex; align-items: center; } .nav-item { display: flex; } .input, select.input { min-height: 44px; font-size: var(--text-lg); } } .lp-kicker, .lp-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--brand); margin: 0 0 16px; } .lp-switch-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .lp-switcher { display: inline-flex; gap: 2px; margin: 0 0 22px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .lp-switcher-legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .lp-switch-tab { font-size: 13px; font-weight: 600; color: var(--text-2); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; -webkit-user-select: none; user-select: none; } .lp-switch-tab:hover { color: var(--ink); } .lp-switch-input:checked + .lp-switch-tab { background: var(--ink); color: white; } .lp-switch-input:focus-visible + .lp-switch-tab { outline: 2px solid var(--brand); outline-offset: 2px; } .lp-panel-secondary { display: none; } #lp-prog-secondary:checked ~ .lp-hero-copy .lp-panel-primary, #lp-prog-secondary:checked ~ .lp-artifact .lp-panel-primary { display: none; } #lp-prog-secondary:checked ~ .lp-hero-copy .lp-panel-secondary, #lp-prog-secondary:checked ~ .lp-artifact .lp-panel-secondary { display: block; } .lp-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: radial-gradient(120% 90% at 85% -10%, oklch(0.9 0.06 40 / 0.35), transparent 60%), repeating-linear-gradient(oklch(0.5 0.02 90 / 0.035) 0 1px, transparent 1px 34px), var(--bg); } .lp-hero-grid { max-width: var(--content-max); margin: 0 auto; padding: clamp(48px, 8vw, 96px) 44px clamp(56px, 8vw, 104px); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .lp-hero-copy { max-width: 540px; } .lp-title { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .lp-title-accent { color: var(--brand); } .lp-lede { font-size: 17px; line-height: 1.6; color: var(--text-2); margin: 20px 0 0; max-width: 480px; } .lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .lp-cta .btn { padding: 12px 22px; } .lp-note { font-size: 13px; color: var(--text-2); margin: 16px 0 0; } .lp-artifact { position: relative; justify-self: center; width: 100%; max-width: 420px; } .lp-artifact-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; box-shadow: var(--shadow-sm), var(--shadow-xl); transform: rotate(-1.4deg); } .lp-ac-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); } .lp-ac-logo { flex-shrink: 0; width: 38px; height: 38px; border-radius: 6px; background: var(--ink); color: white; font-weight: 700; font-size: 14px; display: grid; place-items: center; letter-spacing: 0.02em; } .lp-ac-school { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; } .lp-ac-meta { font-size: 11px; color: var(--text-2); margin-top: 2px; } .lp-ac-lock { margin-left: auto; align-self: flex-start; white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--locked-fg); background: var(--locked-bg); padding: 3px 8px; border-radius: 3px; } .lp-ac-lock::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 3px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-repeat: no-repeat; mask-size: contain; mask-position: center; vertical-align: -1px; } .lp-ac-rows { margin: 14px 0; } .lp-ac-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); } .lp-ac-row:last-child { border-bottom: 0; } .lp-ac-row.is-muted .lp-ac-comp { color: var(--text-2); } .lp-ac-comp { font-size: 12.5px; color: var(--text-1); line-height: 1.3; } .lp-ac-coef { font-size: 10px; color: var(--text-2); margin-left: 5px; } .lp-ac-score { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; } .lp-ac-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-2); } .lp-ac-stat strong { color: var(--ink); font-size: 13px; } .lp-ac-code { letter-spacing: 0.02em; } .lp-artifact-tag { position: absolute; right: 8px; bottom: -14px; font-size: 11px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; box-shadow: var(--shadow-lg); } .lp-tracks, .lp-cycle, .lp-proof, .lp-roles { max-width: var(--content-max); margin: 0 auto; padding: clamp(56px, 8vw, 88px) 44px; } .lp-tracks, .lp-cycle, .lp-roles { border-bottom: 1px solid var(--border); } .lp-section-head { max-width: 640px; margin-bottom: 40px; } .lp-section-head h2, .lp-proof-copy h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0; } .lp-tracks-sub { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 14px 0 0; } .lp-track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .lp-track-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 26px 28px; } .lp-track-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; } .lp-track-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 18px; } .lp-track-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .lp-track-specs li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--text-1); } .lp-track-specs li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 1px; background: var(--brand); } .lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: none; } .lp-step { border-top: 2px solid var(--brand); padding-top: 18px; } .lp-step-num { font-size: 13px; font-weight: 600; color: var(--brand); } .lp-step-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 10px 0 8px; } .lp-step-body { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; } .lp-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .lp-proof-lede { font-size: 15px; line-height: 1.65; color: var(--text-2); margin: 18px 0 0; max-width: 420px; } .lp-proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .lp-proof-list li { font-size: 14px; line-height: 1.55; color: var(--text-1); padding: 16px 0; border-bottom: 1px solid var(--border-soft); } .lp-proof-list li:last-child { border-bottom: 0; } .lp-proof-term { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin-bottom: 5px; } .lp-role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .lp-role { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .lp-role-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; } .lp-role-body { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; } .lp-final { background: var(--ink); color: white; } .lp-final-inner { max-width: 640px; margin: 0 auto; text-align: center; padding: clamp(56px, 8vw, 88px) 24px; } .lp-final-title { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; letter-spacing: -0.01em; margin: 0; color: #fff; } .lp-final-sub { font-size: 15px; line-height: 1.6; color: oklch(0.78 0.02 90); margin: 14px 0 0; } .lp-final .lp-cta { justify-content: center; margin-top: 28px; } @media (prefers-reduced-motion: no-preference) { .lp-hero-copy > *, .lp-artifact { animation: lp-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; } .lp-eyebrow { animation-delay: 0.02s; } .lp-title { animation-delay: 0.08s; } .lp-lede { animation-delay: 0.14s; } .lp-hero-copy .lp-cta { animation-delay: 0.20s; } .lp-note { animation-delay: 0.26s; } .lp-artifact { animation-delay: 0.24s; } } @keyframes lp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .lp-artifact { animation-name: lp-rise-art; } @keyframes lp-rise-art { from { opacity: 0; transform: translateY(18px) rotate(0deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } } @media (max-width: 900px) { .lp-hero-grid { grid-template-columns: 1fr; gap: 44px; padding-left: 24px; padding-right: 24px; } .lp-hero-copy { max-width: none; } .lp-tracks, .lp-cycle, .lp-proof, .lp-roles { padding-left: 24px; padding-right: 24px; } .lp-track-grid { grid-template-columns: 1fr; gap: 14px; } .lp-steps { grid-template-columns: 1fr; gap: 8px; } .lp-step { padding-bottom: 18px; } .lp-proof-grid { grid-template-columns: 1fr; gap: 28px; } .lp-role-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .lp-artifact-card { transform: none; } .lp-cta .btn { flex: 1; } } .pricing-header { max-width: 640px; margin: 0 auto; padding: 56px 24px 8px; text-align: center; } .pricing-header h1 { font-size: 30px; font-weight: 700; color: var(--ink); margin: 0; } .pricing-header p { font-size: 15px; color: var(--text-2); margin: 12px 0 0; } .pricing-grid { max-width: 920px; margin: 40px auto 88px; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; } .plan-card { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 24px; } .plan-card.is-featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .plan-card-name { font-size: 15px; font-weight: 700; color: var(--ink); } .plan-card-price { font-size: 28px; font-weight: 700; color: var(--ink); margin: 10px 0 0; } .plan-card-price small { font-size: 13px; font-weight: 500; color: var(--text-2); } .plan-card-price-was { font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: line-through; margin-right: 8px; display: inline-block; } .plan-card-discount-label { font-size: 12px; font-weight: 600; color: var(--brand); margin: 6px 0 0; letter-spacing: .01em; } .plan-card-trial { margin-top: 10px; } .plan-card-features { list-style: none; margin: 20px 0 0; padding: 0; flex: 1; } .plan-card-features li { font-size: 13px; color: var(--text-1); padding: 6px 0 6px 22px; position: relative; line-height: 1.5; } .plan-card-features li::before { content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 14px; background-color: var(--success); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-repeat: no-repeat; mask-size: contain; mask-position: center; } .plan-card .btn { margin-top: 24px; text-align: center; } @media (max-width: 600px) { .pricing-header { padding: 40px 20px 4px; } .pricing-grid { padding: 0 20px; margin-bottom: 56px; } } .content-page { max-width: 640px; margin: 0 auto; padding: 56px 24px 80px; } .content-page h1 { font-size: 26px; font-weight: 700; color: var(--ink); margin: 0 0 8px; } .content-page .sub { margin-bottom: 32px; } .content-page h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 32px 0 10px; } .content-page p, .content-page li { font-size: 14px; line-height: 1.7; color: var(--text-1); } .content-page ul { padding-left: 20px; } @media (max-width: 600px) { .content-page { padding: 32px 20px 56px; } } .grid-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .grid-header-row, .grid-row { display: grid; grid-template-columns: 40px 1fr 70px 70px 70px 140px 90px; align-items: center; } .grid-header-row { background: oklch(0.99 0.005 90); border-bottom: 1px solid var(--border); } .grid-row { height: 40px; border-bottom: 1px solid var(--border-soft); } .grid-row:last-child { border-bottom: none; } .th { padding: 8px 12px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); font-weight: 600; } .td { padding: 6px 12px; } .td-name { font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid-table-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: oklch(0.97 0.01 90); border-bottom: 1px solid var(--border); } .results-header-row, .results-row { display: grid; grid-template-columns: 40px 1fr 90px 90px 70px; align-items: center; } .results-header-row { background: oklch(0.99 0.005 90); border-bottom: 1px solid var(--border); } .results-row { height: 38px; border-bottom: 1px solid var(--border-soft); } .results-footer-row { display: grid; grid-template-columns: 40px 1fr 90px 90px 70px; align-items: center; height: 38px; background: oklch(0.98 0.005 90); } @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-table { display: none; } .stat-grid { grid-template-columns: 1fr; } .card-row { flex-direction: column; align-items: flex-start; gap: 12px; } .card-row > div:last-child { width: 100%; justify-content: space-between; } .input, select.input { font-size: 16px; } } .mark-cards { display: none; } @media (max-width: 600px) { .mark-cards { display: flex; flex-direction: column; gap: 12px; } .mark-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .mark-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .mark-card-name { font-weight: 600; font-size: 15px; } .mark-card-fields { display: flex; flex-direction: column; gap: 10px; } .mark-card-field { display: flex; justify-content: space-between; align-items: center; } .mark-card-field label { font-size: 13px; color: var(--text-2); font-weight: 500; } .mark-card .score-input { width: 88px; height: 44px; font-size: 16px; } .mark-card .toggle-pill { padding: 10px 14px; font-size: 13px; min-width: 44px; min-height: 44px; } } .gb-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; } .page-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-12); } .tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } .tbl { width: 100%; border-collapse: collapse; font-size: var(--text-base); } .tbl th, .tbl td { border-bottom: 1px solid var(--border-soft); padding: var(--space-8) var(--space-10); text-align: left; } .tbl td { vertical-align: middle; } .tbl thead th { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); background: var(--surface-sunken); border-bottom: 1px solid var(--border); } .tbl tbody tr:last-child td { border-bottom: none; } .tbl-num { font-variant-numeric: tabular-nums; text-align: right; } .tbl-num-center { font-variant-numeric: tabular-nums; text-align: center; } .form-inline-toggle { display: flex; width: 100%; margin-top: var(--space-12); gap: var(--space-10); align-items: flex-end; flex-wrap: wrap; } .form-inline-toggle[hidden] { display: none; } .inv-subrow td { padding: 4px 0; } .inv-total td { padding: 12px 0; font-weight: 700; } .inv-total td:last-child { text-align: right; } .prose { color: var(--text-1); line-height: var(--leading-relaxed); } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); margin: 0 0 var(--space-8); } .prose h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: var(--space-32) 0 var(--space-12); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-soft); } .prose h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: var(--space-24) 0 var(--space-8); } .prose p, .prose ul, .prose ol { margin: 0 0 var(--space-12); } .prose ul, .prose ol { padding-left: var(--space-20); } .prose li { margin-bottom: var(--space-4); } .prose hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-24) 0; } .prose a { color: var(--brand); text-decoration: underline; } .prose code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--text-sm); background: var(--surface-sunken); padding: 2px 3px; border-radius: var(--radius-sm); } .prose pre { background: var(--surface-sunken); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--space-12); margin: 0 0 var(--space-16); overflow-x: auto; } .prose pre code { background: none; padding: 0; font-size: var(--text-sm); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--text-base); margin: 0 0 var(--space-16); } .prose th, .prose td { border-bottom: 1px solid var(--border-soft); padding: var(--space-8) var(--space-10); text-align: left; } .prose thead th { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); background: var(--surface-sunken); border-bottom: 1px solid var(--border); } .prose-scroll { overflow-x: auto; } .tbl-empty { padding: var(--space-24) var(--space-10); text-align: center; color: var(--text-2); } .tbl-cards { display: none; } @media (max-width: 600px) { .tbl-cards { display: flex; flex-direction: column; gap: var(--space-12); } } .gb-table { min-width: 760px; } .gb-table input[type="number"] { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } .gb-row-delete { background: transparent; border: none; color: var(--text-2); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; } .gb-row-delete:hover, .gb-row-delete:focus-visible { color: oklch(0.5 0.15 25); background: var(--danger-alert-bg); } .gb-cards { display: none; } @media (max-width: 600px) { .tbl-wrap.has-cards { display: none; } .gb-cards { display: flex; flex-direction: column; gap: 12px; } .gb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .gb-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .gb-card-title { font-weight: 600; font-size: 15px; } .gb-card-fields { display: flex; flex-direction: column; gap: 10px; } .gb-card-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .gb-card-field label { font-size: 13px; color: var(--text-2); font-weight: 500; flex-shrink: 0; } .gb-card-field .input { text-align: right; } .gb-card .score-input, .gb-card input[type="number"] { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } .gb-card-actions { display: flex; justify-content: flex-end; margin-top: 12px; } } .skeleton-overlay { position: absolute; inset: 0; z-index: 5; background: var(--bg); padding: 36px 44px; display: flex; flex-direction: column; gap: var(--space-14); overflow: hidden; } .skeleton-line { position: relative; height: 14px; border-radius: var(--radius); background: var(--neutral-bg); overflow: hidden; } .skeleton-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--surface-sunken), transparent); transform: translateX(-100%); animation: skeleton-shimmer 1.4s ease-in-out infinite; } .skeleton-line-title { height: 22px; width: 220px; margin-bottom: var(--space-6); } @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } } .progress { height: 10px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; } .progress-fill { height: 100%; width: 0; background: var(--brand); transition: width .3s ease; } .progress-fill-danger { background: var(--danger); } .progress-fill-warn { background: var(--warn); } .progress-fill-success { background: var(--success); } .progress-fill-neutral { background: var(--neutral-fg); } @media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } } .combo { position: relative; } .combo-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); } .combo-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; font-family: inherit; } .combo-trigger::after { content: ""; flex-shrink: 0; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-2); } .combo-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-value.is-placeholder { color: var(--text-3); } .combo-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; } .combo-search { width: 100%; padding: 8px 10px; margin-bottom: 4px; font-family: inherit; font-size: 14px; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .combo-list { max-height: 260px; overflow-y: auto; margin: 0; padding: 0; list-style: none; } .combo-option { padding: 8px 10px; border-radius: var(--radius); font-size: 14px; color: var(--text-1); cursor: pointer; } .combo-option:hover, .combo-option.is-active { background: var(--bg); } .combo-option[aria-selected="true"] { font-weight: 600; } .combo-option[aria-selected="true"]::after { content: "\2713"; float: right; color: var(--brand); } .combo-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); } .combo-empty { padding: 10px; font-size: 13px; color: var(--text-2); } @media (max-width: 600px) { .combo-option { padding: 12px 10px; min-height: 44px; display: flex; align-items: center; } .combo-search { min-height: 44px; } .combo-list { max-height: 45vh; } } .chart-figure { margin: 0; break-inside: avoid; page-break-inside: avoid; } .chart { display: block; width: 100%; height: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .chart-caption { margin-top: 6px; font-size: var(--text-xs); color: var(--text-2); line-height: var(--leading-normal); } .chart-band-1 { fill: var(--chart-band-1); } .chart-band-2 { fill: var(--chart-band-2); } .chart-band-3 { fill: var(--chart-band-3); } .chart-band-4 { fill: var(--chart-band-4); } .chart-band-5 { fill: var(--chart-band-5); } .chart-band-6 { fill: var(--chart-band-6); } .chart-band-7 { fill: var(--chart-band-7); } .chart-seg { stroke: var(--surface); stroke-width: 1; } .chart-track { fill: var(--chart-track); } .chart-grid { stroke: var(--chart-grid); stroke-width: 1; } .chart-bar { fill: var(--chart-band-4); } .chart-label { font-size: 11px; font-weight: 600; fill: var(--chart-ink); } .chart-label-invert { font-size: 11px; font-weight: 600; fill: var(--chart-ink-invert); } .chart-axis { font-size: 10px; fill: var(--chart-ink-muted); } .chart-series { font-size: 11px; font-weight: 600; fill: var(--chart-ink); } .chart-median { stroke: var(--chart-median); stroke-width: 2.5; } .chart-mean { fill: none; stroke: var(--chart-mean); stroke-width: 1.75; } .chart-whisker { stroke: var(--chart-ink-muted); stroke-width: 1; } .chart-box { fill: var(--chart-band-2); stroke: var(--chart-ink-muted); stroke-width: 1; } .chart-axis-line { stroke: var(--chart-ink-muted); stroke-width: 1; } .chart-tick { stroke: var(--chart-ink-muted); stroke-width: 1; } .chart-area { fill: var(--chart-band-1); opacity: 0.55; } .chart-value { font-size: 10px; font-weight: 600; fill: var(--chart-ink-muted); } .chart-ref { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 4 3; } .chart-line { fill: none; stroke: var(--chart-band-5); stroke-width: 2; stroke-linejoin: round; } .chart-line-alt { fill: none; stroke: var(--chart-band-7); stroke-width: 2; stroke-dasharray: 5 3; stroke-linejoin: round; } .chart-point { fill: var(--chart-band-5); } .chart-point-alt { fill: var(--chart-band-7); } .chart-spark { display: inline-block; width: 84px; height: 22px; vertical-align: middle; } .chart-spark-line { fill: none; stroke: var(--chart-band-5); stroke-width: 1.5; stroke-linejoin: round; } .chart-spark-last { fill: var(--chart-band-7); } .chart-spark-flat { stroke: var(--chart-grid); stroke-width: 1; } .chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; padding: 0; list-style: none; } .chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-2); } .chart-swatch { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 2px; border: 1px solid var(--chart-grid); } .chart-swatch-1 { background: var(--chart-band-1); } .chart-swatch-2 { background: var(--chart-band-2); } .chart-swatch-3 { background: var(--chart-band-3); } .chart-swatch-4 { background: var(--chart-band-4); } .chart-swatch-5 { background: var(--chart-band-5); } .chart-swatch-6 { background: var(--chart-band-6); } .chart-swatch-7 { background: var(--chart-band-7); } .chart-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } } @layer utilities { .u-flex { display: flex; } .u-row { display: flex; align-items: center; } .u-row-start { display: flex; align-items: flex-start; } .u-row-between { display: flex; align-items: center; justify-content: space-between; } .u-wrap { flex-wrap: wrap; } .u-stack { display: flex; flex-direction: column; } .u-flex-1 { flex: 1; } .u-flex-2 { flex: 2; } .u-items-start { align-items: flex-start; } .u-items-end { align-items: flex-end; } .u-between { justify-content: space-between; } .u-self-start { align-self: flex-start; } .u-w-full { width: 100%; } .u-basis-full { flex-basis: 100%; } .u-min-w-120 { min-width: 120px; } .u-clickable { cursor: pointer; } .u-list-plain { list-style: none; padding-left: 0; } .u-form-narrow { max-width: 420px; } .u-gap-2 { gap: var(--space-2); } .u-gap-4 { gap: var(--space-4); } .u-gap-6 { gap: var(--space-6); } .u-gap-8 { gap: var(--space-8); } .u-gap-10 { gap: var(--space-10); } .u-gap-12 { gap: var(--space-12); } .u-gap-14 { gap: var(--space-14); } .u-gap-16 { gap: var(--space-16); } .u-gap-20 { gap: var(--space-20); } .u-text-2xs { font-size: var(--text-2xs); } .u-text-xs { font-size: var(--text-xs); } .u-text-sm { font-size: var(--text-sm); } .u-text-base { font-size: var(--text-base); } .u-text-md { font-size: var(--text-md); } .u-text-lg { font-size: var(--text-lg); } .u-text-xl { font-size: var(--text-xl); } .u-muted { color: var(--text-2); } .u-strong { color: var(--ink); } .u-text-1 { color: var(--text-1); } .u-brand { color: var(--brand); } .u-success { color: var(--success-fg); } .u-danger { color: var(--danger-fg); } .u-danger-strong { color: var(--danger); } .u-warn { color: var(--warn-fg); } .u-weight-normal { font-weight: var(--weight-normal); } .u-weight-medium { font-weight: var(--weight-medium); } .u-weight-semibold { font-weight: var(--weight-semibold); } .u-weight-bold { font-weight: var(--weight-bold); } .u-center { text-align: center; } .u-right { text-align: right; } .u-pre-line { white-space: pre-line; } .u-lead { line-height: var(--leading-relaxed); } .u-nowrap { white-space: nowrap; } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-struck { text-decoration: line-through; color: var(--text-2); } .u-tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .u-m-0 { margin: 0; } .u-mt-0 { margin-top: 0; } .u-mt-2 { margin-top: var(--space-2); } .u-mt-4 { margin-top: var(--space-4); } .u-mt-6 { margin-top: var(--space-6); } .u-mt-8 { margin-top: var(--space-8); } .u-mt-10 { margin-top: var(--space-10); } .u-mt-12 { margin-top: var(--space-12); } .u-mt-14 { margin-top: var(--space-14); } .u-mt-16 { margin-top: var(--space-16); } .u-mt-20 { margin-top: var(--space-20); } .u-mt-24 { margin-top: var(--space-24); } .u-mt-28 { margin-top: var(--space-28); } .u-mt-32 { margin-top: var(--space-32); } .u-mb-0 { margin-bottom: 0; } .u-mb-2 { margin-bottom: var(--space-2); } .u-mb-4 { margin-bottom: var(--space-4); } .u-mb-6 { margin-bottom: var(--space-6); } .u-mb-8 { margin-bottom: var(--space-8); } .u-mb-10 { margin-bottom: var(--space-10); } .u-mb-12 { margin-bottom: var(--space-12); } .u-mb-14 { margin-bottom: var(--space-14); } .u-mb-16 { margin-bottom: var(--space-16); } .u-mb-20 { margin-bottom: var(--space-20); } .u-mb-24 { margin-bottom: var(--space-24); } .u-hidden { display: none; } .u-inline { display: inline; } .u-link-plain { text-decoration: none; color: inherit; } .u-hide-print { } .u-print-only { display: none; } @media print { .u-hide-print { display: none !important; } .u-print-only { display: revert; } } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: var(--radius); background: var(--ink); color: var(--surface); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 12px; } .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .is-busy { opacity: .65; pointer-events: none; cursor: default; } } .report-card { background: white; border: 1px solid var(--border); max-width: 640px; margin: 24px 0; padding: 32px; box-shadow: 0 2px 12px oklch(0 0 0 / 0.06); } .report-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid oklch(0.2 0.02 90); padding-bottom: 12px; } .report-school-name { font-size: 16px; font-weight: 700; } .report-motto { font-size: 11px; color: var(--text-2); } .report-ministry { text-align: right; font-size: 11px; color: var(--text-2); } .report-student-line { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; } .report-domain { margin-top: 16px; } .report-domain-header { display: flex; justify-content: space-between; background: oklch(0.96 0.01 90); padding: 5px 8px; font-size: 12px; font-weight: 700; } .report-subject-line { display: flex; justify-content: space-between; padding: 4px 8px; font-size: 12px; border-bottom: 1px solid var(--border-soft); } .report-subject-line .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .report-subject-line .score { white-space: nowrap; flex-shrink: 0; padding-left: 12px; } .report-total-line { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 10px; border-top: 2px solid oklch(0.2 0.02 90); font-size: 13px; font-weight: 700; } .report-remark { margin-top: 14px; font-size: 11px; color: oklch(0.45 0.02 90); } .report-signatures { display: flex; justify-content: space-between; margin-top: 24px; font-size: 11px; color: var(--text-2); } .print-check { margin-top: 12px; } .cba-card { background: white; color: #000; max-width: 210mm; margin: 16px 0; padding: 10mm 8mm; border: 1px solid var(--border); box-shadow: 0 2px 12px oklch(0 0 0 / 0.06); font-family: Arial, Helvetica, sans-serif; } table.cba-head { width: 100%; border-collapse: collapse; } table.cba-head td { padding: 0 0 6px; vertical-align: bottom; border-bottom: 2px solid #000; } .cba-head-logo { width: 48px; } .cba-head-name { width: auto; } .cba-logo { max-width: 40px; max-height: 40px; object-fit: contain; } .cba-school { font-size: 15px; font-weight: 700; } .cba-motto { font-size: 10px; } .cba-head-right { width: 1%; white-space: nowrap; text-align: right; font-size: 10px; font-weight: 700; } .cba-student { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 10px; padding: 6px 0; border-bottom: 1px solid #000; margin-bottom: 8px; } table.cba-comp-banner { width: 100%; border-collapse: collapse; font-size: 9px; font-weight: 700; margin-top: 8px; } table.cba-comp-banner td { padding: 4px 2px 2px; vertical-align: bottom; } .cba-comp-title { text-align: left; } .cba-comp-score { width: 1%; white-space: nowrap; text-align: right; padding-left: 8px; } .cba-or { font-size: 8px; font-weight: 700; padding: 2px; } table.cba-block { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8px; line-height: 1.2; margin-bottom: 2px; } table.cba-block th, table.cba-block td { border: 0.6px solid #000; text-align: center; vertical-align: middle; height: 11px; padding: 0 1px; overflow: hidden; white-space: nowrap; } table.cba-block th { font-weight: 700; font-size: 8px; background: oklch(0.97 0.01 90); } .cba-block .cba-code { font-weight: 700; font-size: 8px; white-space: normal; word-break: break-word; } .cba-block .cba-term-group { font-size: 8px; font-weight: 700; letter-spacing: 0.01em; } td.cba-diag { position: relative; padding: 0; background: oklch(0.97 0.01 90); background-image: linear-gradient(to bottom right, transparent calc(50% - 0.4px), #000 calc(50% - 0.4px), #000 calc(50% + 0.4px), transparent calc(50% + 0.4px)); } td.cba-diag .cba-diag-term { position: absolute; top: 1px; right: 2px; font-size: 7.3px; font-weight: 700; } td.cba-diag .cba-diag-month { position: absolute; bottom: 1px; left: 2px; font-size: 7.3px; font-weight: 700; } .cba-block .cba-desc, .cba-block .cba-eval-head { text-align: left; font-size: 8px; padding: 1px 3px; white-space: normal; } .cba-block .cba-eval-head { font-weight: 700; } .cba-block .cba-eval { text-align: left; font-weight: 400; padding: 0 2px; white-space: normal; } .cba-block .cba-mk { font-size: 7.3px; color: var(--text-2); } .cba-block .cba-appr-code { font-size: 8px; } .cba-block .cba-appr-mark { font-weight: 700; } .cba-block .cba-sub { background: oklch(0.97 0.01 90); font-weight: 600; } .cba-total-row td { font-weight: 700; background: oklch(0.95 0.01 90); text-align: left; padding-left: 3px; } .cba-total-row td.num { text-align: center; padding-left: 1px; } .cba-total-row td.cba-appr-mark { text-align: center; padding-left: 1px; } table.cba-alt { opacity: 0.7; } .cba-grand { font-size: 10px; font-weight: 700; padding: 8px 2px; border-top: 2px solid #000; margin-top: 6px; } .cba-obs-title { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 12px 0 4px; } table.cba-obs { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9px; } table.cba-obs th, table.cba-obs td { border: 0.8px solid #000; text-align: center; vertical-align: middle; padding: 2px; } table.cba-obs th { height: 26px; line-height: 1.25; } .cba-obs .cba-box { height: 60px; } .cba-obs .cba-term-label { font-weight: 700; } .cba-legend { font-size: 11px; color: var(--text-2); margin-top: 12px; line-height: 1.5; } @media print { .sidebar, .topbar, .no-print { display: none !important; } .app-main, .content { padding: 0; margin: 0; max-width: none; } .report-card { box-shadow: none; border: none; margin: 0; } .cba-card { box-shadow: none; border: none; margin: 0; padding: 0; max-width: none; } table.cba-block, table.cba-comp-banner, table.cba-obs { break-inside: avoid; page-break-inside: avoid; } .chart, .chart-swatch { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .chart-figure { break-inside: avoid; page-break-inside: avoid; } .chart-data { position: static; width: auto; height: auto; margin: 8px 0 0; overflow: visible; clip-path: none; white-space: normal; } @page { size: A4 portrait; margin: 10mm 8mm; } } @font-face { font-family: 'Carlito'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/carlito/Carlito-Regular.ttf') format('truetype'); } @font-face { font-family: 'Carlito'; font-style: normal; font-weight: 700; font-display: block; src: url('../fonts/carlito/Carlito-Bold.ttf') format('truetype'); } @font-face { font-family: 'Carlito'; font-style: italic; font-weight: 400; font-display: block; src: url('../fonts/carlito/Carlito-Italic.ttf') format('truetype'); } @font-face { font-family: 'Carlito'; font-style: italic; font-weight: 700; font-display: block; src: url('../fonts/carlito/Carlito-BoldItalic.ttf') format('truetype'); } .bk { color: #000; font-family: Carlito, Calibri, sans-serif; } @media screen { .bk { overflow-x: auto; } } .bk-page { width: 210mm; height: 297mm; margin: 0 auto 16px; background: #fff; box-shadow: 0 2px 12px oklch(0 0 0 / 0.06); } .bk .pg { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: Carlito, Calibri, sans-serif; color: #000; padding: 28pt 30.8pt 0; box-sizing: border-box; } .bk .t { border-collapse: collapse; table-layout: fixed; } .bk .t td { border: 0.5pt solid #000; padding: 0 4.8pt; font-size: 9pt; line-height: 9.95pt; vertical-align: middle; text-align: left; font-weight: normal; } .bk .h td { font-weight: bold; text-align: center; } .bk .t td.c, .bk td.c { text-align: center; } .bk .b { font-weight: bold; } .bk .t td.b, .bk td.b { font-weight: bold; } .bk .t tr.sp td { height: 0; padding: 0; border: none; line-height: 0; font-size: 0; } .bk .t.cm td { font-size: 10pt; line-height: 12pt; } .bk .t.cm tr.sp td { font-size: 0; line-height: 0; } .bk .p { font-size: 9pt; line-height: 10.4pt; text-align: justify; margin: 6.6pt 0 0 5.2pt; } .bk .sh { font-size: 9pt; line-height: 10.4pt; font-weight: bold; margin: 7pt 0 0 5.2pt; } .bk .ft { position: absolute; left: 0; right: 0; bottom: 42pt; text-align: center; font-size: 11pt; } .bk .lay { border-collapse: collapse; table-layout: fixed; } .bk .lay > tbody > tr > td { padding: 0; border: none; vertical-align: top; } .bk .hb { font-size: 8pt; font-weight: bold; line-height: 9.27pt; } .bk .hb > tbody > tr > td { text-align: center; } .bk .ov { width: 119.7pt; border: 0.75pt solid #000; border-radius: 50%; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: 0 auto; } .bk .ov > tbody > tr > td { height: 74.3pt; padding: 0; border: none; text-align: center; vertical-align: middle; } .bk .ovt { width: 83.5pt; margin: 0 auto; text-align: center; font-size: 9pt; font-weight: normal; font-style: italic; line-height: 11.5pt; } .bk .ov img { max-width: 100%; max-height: 72.8pt; object-fit: contain; } .bk .ttl { text-align: center; font-size: 14pt; font-weight: bold; line-height: 16pt; } .bk .sy { text-align: center; font-size: 12pt; line-height: 14pt; } .bk .cm-sheet { width: 533.8pt; } .bk .cm-col { width: 254.3pt; } .bk .cm-gap { width: 25.2pt; } .bk .cm-title { text-align: center; font-size: 12pt; font-weight: bold; line-height: 14pt; margin-top: 7pt; } .bk .cm-title-first { margin-top: 2pt; } .bk .photo { width: 74.8pt; border-collapse: collapse; table-layout: fixed; } .bk .photo > tbody > tr > td { height: 88.6pt; border: 0.5pt solid #000; padding: 0; text-align: center; vertical-align: middle; font-size: 9pt; font-style: italic; line-height: 11.5pt; } .bk .photo img { width: 100%; height: 87.6pt; object-fit: cover; } .bk .cb { display: inline-block; width: 10.5pt; height: 10.5pt; border: 0.75pt solid #000; vertical-align: -1.5pt; overflow: hidden; line-height: 10.5pt; } .bk .cb.on { position: relative; } .bk .cb.on::after { content: ""; position: absolute; left: 2.4pt; top: 0.4pt; width: 3.2pt; height: 6.4pt; border: solid #000; border-width: 0 1pt 1pt 0; transform: rotate(45deg); } .bk .ct { border: 0.5pt solid #000; border-collapse: collapse; table-layout: fixed; } .bk .ct td { border: 0.5pt solid #000; padding: 0 5.2pt; vertical-align: middle; font-weight: normal; text-align: left; } .bk .ct tr.sp td { height: 0; padding: 0; border: none; line-height: 0; font-size: 0; } @media print { .bk-page { margin: 0; box-shadow: none; break-after: page; } .bk-page:last-child { break-after: auto; } }