/*
 * MagicEye UI — 2.3.0. Visual language from the product's Figma Make redesign, applied on top of Filament.
 * Plain CSS (no build step). Colours come from Filament's palette variables (--primary-*, --gray-*), so an
 * institution's own brand colour still drives every accent. Dark mode follows html.dark; RTL via logical props.
 */

:root {
    --me-bg: #f6f8fb;
    --me-surface: #ffffff;
    --me-surface-soft: #f8fafc;
    --me-text: #162033;
    --me-text-soft: #65728a;
    --me-text-faint: #94a3b8;
    --me-border: #e6eaf0;
    --me-border-strong: #d7dde7;
    --me-primary: var(--primary-600);
    --me-primary-hover: var(--primary-700);
    --me-primary-soft: color-mix(in oklab, var(--primary-500) 9%, #ffffff);
    --me-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 4px 16px rgba(15, 23, 42, .035);
    --me-radius: 12px;
    --me-success: #169b62; --me-success-soft: #ecfdf5;
    --me-warning: #d97706; --me-warning-soft: #fff7ed;
    --me-danger: #dc3545;  --me-danger-soft: #fff1f2;
    --me-info: #0284c7;    --me-info-soft: #f0f9ff;
    --me-violet: #7c3aed;  --me-violet-soft: #f5f3ff;
}

html.dark {
    --me-bg: #0b1220;
    --me-surface: #111b2d;
    --me-surface-soft: #0e1828;
    --me-text: #edf3fb;
    --me-text-soft: #98a7bd;
    --me-text-faint: #6f7f96;
    --me-border: #223047;
    --me-border-strong: #314158;
    --me-primary: var(--primary-400);
    --me-primary-hover: var(--primary-300);
    --me-primary-soft: color-mix(in oklab, var(--primary-500) 20%, #111b2d);
    --me-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    --me-success-soft: #0d2b26; --me-warning-soft: #302315; --me-danger-soft: #321a24;
    --me-info-soft: #102c3d;    --me-violet-soft: #261d42;
}

/* ---------------------------------------------------------------- base */
.fi-body, .fi-simple-layout { background: var(--me-bg); color: var(--me-text); }
.fi-body { --topbar-height: 4.5rem; }

/* ---------------------------------------------------------------- sidebar */
.fi-sidebar.fi-main-sidebar { background: var(--me-surface); }
.fi-sidebar-nav { padding-inline: .875rem; padding-top: .5rem; scrollbar-width: thin; }
.fi-sidebar-nav-groups { row-gap: .25rem; margin-inline: 0; }
.fi-sidebar-group { row-gap: .125rem; }
.fi-sidebar-group-btn { padding: .875rem .625rem .375rem; }
.fi-sidebar-group-label { font-size: .6875rem; font-weight: 600; color: var(--me-text-faint); letter-spacing: .01em; }
.fi-sidebar-group-btn .fi-icon { color: var(--me-text-faint); }
.fi-sidebar-group-items { row-gap: .125rem; }
.fi-sidebar-item-btn {
    min-height: 2.625rem; border-radius: 9px; padding-inline: .6875rem; gap: .6875rem;
    color: var(--me-text-soft); transition: background .15s, color .15s;
}
.fi-sidebar-item-btn:hover, .fi-sidebar-item-btn:focus-visible { background: var(--me-surface-soft); color: var(--me-text); }
.fi-sidebar-item-label { font-size: .8125rem; font-weight: 500; color: inherit; }
.fi-sidebar-item-icon { color: var(--me-text-faint); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--me-primary-soft); color: var(--me-primary); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--me-primary); font-weight: 600; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: var(--me-primary); }
.fi-sidebar-item-badge-ctn .fi-badge { border-radius: 8px; min-width: 1.375rem; font-size: .625rem; padding: .125rem .375rem; }
.fi-sidebar-header-logo-ctn .fi-logo { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; color: var(--me-text); }

@media (min-width: 1024px) {
    /* Full-height sidebar beside the header, as in the design. */
    .fi-body-has-topbar:not(.fi-body-has-top-navigation) .fi-sidebar.fi-main-sidebar {
        top: 0; height: 100dvh; margin-top: calc(-1 * var(--topbar-height)); z-index: 31;
        border-inline-end: 1px solid var(--me-border);
    }
    .fi-body-has-topbar:not(.fi-body-has-top-navigation) .fi-sidebar-header {
        display: flex; height: var(--topbar-height); padding-inline: 1.375rem; background: transparent;
        box-shadow: none; border-bottom: 1px solid var(--me-border); margin-inline: .875rem; padding-inline: .5rem;
    }
    .fi-body-has-topbar:not(.fi-body-has-top-navigation) .fi-topbar-start .fi-logo { display: none; }
    .fi-body-has-topbar:not(.fi-body-has-top-navigation):has(.fi-sidebar.fi-sidebar-open) .fi-topbar { padding-inline-start: calc(var(--sidebar-width) + 1.25rem); }
    .fi-body-has-topbar:not(.fi-body-has-top-navigation):has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar { padding-inline-start: calc(var(--collapsed-sidebar-width) + 1.25rem); }
    .fi-body-has-topbar .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header { border-bottom-color: transparent; }
}

/* Brand mark next to the name when no logo image is uploaded (sidebar header and login). */
.fi-logo { display: inline-flex; align-items: center; gap: .625rem; }
.fi-logo:not(:has(img))::before {
    content: ""; width: 2.125rem; height: 2.125rem; flex: none; border-radius: 10px;
    background:
        radial-gradient(circle, #fff 0 2.2px, transparent 2.7px),
        radial-gradient(circle, transparent 0 6px, #fff 6.5px 8px, transparent 8.5px),
        radial-gradient(ellipse 12px 5px, transparent 0 9px, transparent 10px),
        var(--me-primary);
    box-shadow: 0 5px 12px color-mix(in oklab, var(--me-primary) 25%, transparent);
}
.fi-sidebar-header-logo-ctn > a { display: inline-flex; align-items: center; gap: .625rem; }

/* Workspace card (whose panel this is). */
.me-workspace {
    margin: .75rem 0 .375rem; padding: .625rem; display: flex; align-items: center; gap: .5625rem;
    background: var(--me-surface-soft); border: 1px solid var(--me-border); border-radius: 10px;
}
.me-workspace-logo {
    width: 2.125rem; height: 2.125rem; flex: none; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
    background: var(--me-primary-soft); color: var(--me-primary); font-weight: 700;
}
.me-workspace-logo svg { width: 1.125rem; height: 1.125rem; }
.me-workspace-text { display: flex; flex-direction: column; min-width: 0; }
.me-workspace-text strong { font-size: .75rem; font-weight: 600; color: var(--me-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-workspace-text small { font-size: .65rem; color: var(--me-text-soft); margin-top: 2px; }

/* Help card at the bottom of the sidebar. */
.me-help {
    margin: .75rem .875rem; padding: .875rem; border-radius: 12px; position: relative; overflow: hidden; flex: none;
    display: flex; flex-direction: column; align-items: flex-start;
    background: linear-gradient(145deg, var(--me-primary-soft), var(--me-surface-soft));
}
.me-help::after {
    content: ""; width: 80px; height: 80px; border: 16px solid color-mix(in oklab, var(--me-primary) 8%, transparent);
    border-radius: 50%; position: absolute; inset-inline-end: -36px; inset-block-end: -36px;
}
.me-help-icon { width: 1.5625rem; height: 1.5625rem; display: grid; place-items: center; background: var(--me-primary); color: #fff; border-radius: 50%; font-weight: 700; margin-bottom: .625rem; font-size: .8rem; }
.me-help strong { font-size: .75rem; color: var(--me-text); }
.me-help small { color: var(--me-text-soft); font-size: .65rem; margin: 3px 0 .625rem; }
.me-help a { color: var(--me-primary); font-size: .7rem; font-weight: 600; position: relative; z-index: 1; }
.me-help a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header */
.fi-topbar {
    min-height: var(--topbar-height); padding-inline: 1.75rem; box-shadow: none;
    background: color-mix(in oklab, var(--me-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--me-border);
}
.fi-topbar-end { flex: 1; gap: .5rem; }
.fi-topbar-end > .fi-global-search-ctn, .fi-topbar-end > div:has(> .fi-global-search) { margin-inline-end: auto; }
.fi-global-search-field .fi-input-wrp {
    width: min(24.5rem, 38vw); height: 2.5rem; border-radius: 9px; background: var(--me-surface-soft);
    box-shadow: 0 0 0 1px var(--me-border);
}
.fi-global-search-field .fi-input { font-size: .8125rem; }
.fi-global-search-field .fi-input-wrp-suffix, .fi-global-search-field kbd {
    font-size: .625rem; color: var(--me-text-soft);
}
.me-icon-btn, .fi-topbar-database-notifications-btn {
    width: 2.375rem; height: 2.375rem; border-radius: 9px; display: inline-grid; place-items: center;
    background: var(--me-surface); color: var(--me-text-soft); border: 1px solid var(--me-border);
}
.me-icon-btn:hover, .fi-topbar-database-notifications-btn:hover { color: var(--me-text); background: var(--me-surface-soft); }
.me-lang { position: relative; display: inline-flex; align-items: center; }
.me-lang select {
    appearance: none; -webkit-appearance: none; height: 2.375rem; border-radius: 9px; padding-inline: .75rem 2rem;
    background: var(--me-surface); color: var(--me-text); border: 1px solid var(--me-border); font-size: .75rem; cursor: pointer;
}
.me-lang svg { position: absolute; inset-inline-end: .625rem; pointer-events: none; color: var(--me-text-soft); }
.me-lang select:focus-visible, .me-icon-btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--me-primary) 24%, transparent); outline-offset: 2px; }
.fi-user-menu { padding-inline-start: .5rem; margin-inline-start: .25rem; border-inline-start: 1px solid var(--me-border); }
.fi-user-avatar { box-shadow: 0 0 0 2px var(--me-surface), 0 0 0 3px var(--me-border); }

/* ---------------------------------------------------------------- page */
.fi-main { padding-top: 1.6875rem; padding-bottom: 2.75rem; }
@media (min-width: 1024px) { .fi-main { padding-inline: 1.875rem; } }
.fi-header { margin-bottom: .25rem; }
.fi-header-heading { font-size: 1.5rem; line-height: 1.35; letter-spacing: -.02em; font-weight: 700; color: var(--me-text); }
.fi-header-subheading { font-size: .8125rem; color: var(--me-text-soft); margin-top: .3rem; }
.fi-breadcrumbs-item-label { font-size: .7rem; color: var(--me-text-faint); }
.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label { color: var(--me-text-soft); }
.fi-breadcrumbs-item-separator { color: var(--me-text-faint); width: .8rem; height: .8rem; }

/* ---------------------------------------------------------------- cards */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section.fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart > .fi-section,
.fi-fo-repeater-item,
.fi-in-repeatable-item,
.me-card {
    background: var(--me-surface); border-radius: var(--me-radius);
    box-shadow: 0 0 0 1px var(--me-border), var(--me-shadow);
}
.fi-section-header-heading { font-size: .875rem; font-weight: 600; color: var(--me-text); }
.fi-section-header-description { font-size: .72rem; color: var(--me-text-soft); }
.fi-section:not(.fi-section-not-contained) > .fi-section-header { padding-block: 1.125rem; }
.fi-section-content-ctn { border-color: var(--me-border) !important; }

/* Stat cards: icon tile beside label and value (MagicEye stat-card). */
.fi-wi-stats-overview-stat { padding: 1.125rem; }
.fi-wi-stats-overview-stat-content { row-gap: .125rem; }
.fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-label-ctn > .fi-icon) .fi-wi-stats-overview-stat-content {
    grid-template-columns: 2.625rem minmax(0, 1fr); column-gap: .8125rem; align-items: start;
}
.fi-wi-stats-overview-stat-label-ctn { display: contents; }
.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    grid-row: 1 / span 3; grid-column: 1; width: 2.625rem; height: 2.625rem; padding: .6875rem; border-radius: 10px;
    background: var(--me-primary-soft); color: var(--me-primary);
}
.fi-wi-stats-overview-stat-label, .fi-wi-stats-overview-stat-value, .fi-wi-stats-overview-stat-description, .fi-wi-stats-overview-stat-placeholder { grid-column: 2; }
.fi-wi-stats-overview-stat:not(:has(.fi-wi-stats-overview-stat-label-ctn > .fi-icon)) .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat:not(:has(.fi-wi-stats-overview-stat-label-ctn > .fi-icon)) .fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat:not(:has(.fi-wi-stats-overview-stat-label-ctn > .fi-icon)) .fi-wi-stats-overview-stat-description { grid-column: auto; }
.fi-wi-stats-overview-stat-label { font-size: .72rem; color: var(--me-text-soft); font-weight: 500; }
.fi-wi-stats-overview-stat-value { font-size: 1.4375rem; font-weight: 700; letter-spacing: -.02em; color: var(--me-text); line-height: 1.5; }
.fi-wi-stats-overview-stat-description { font-size: .65rem; }
.fi-wi-stats-overview-stat.me-tone-green  .fi-wi-stats-overview-stat-label-ctn > .fi-icon { color: var(--me-success); background: var(--me-success-soft); }
.fi-wi-stats-overview-stat.me-tone-violet .fi-wi-stats-overview-stat-label-ctn > .fi-icon { color: var(--me-violet);  background: var(--me-violet-soft); }
.fi-wi-stats-overview-stat.me-tone-amber  .fi-wi-stats-overview-stat-label-ctn > .fi-icon { color: var(--me-warning); background: var(--me-warning-soft); }
.fi-wi-stats-overview-stat.me-tone-red    .fi-wi-stats-overview-stat-label-ctn > .fi-icon { color: var(--me-danger);  background: var(--me-danger-soft); }
.fi-wi-stats-overview-stat.me-tone-sky    .fi-wi-stats-overview-stat-label-ctn > .fi-icon { color: var(--me-info);    background: var(--me-info-soft); }

/* ---------------------------------------------------------------- tables */
.fi-ta-ctn { overflow: hidden; }
.fi-ta-header-toolbar { padding: .875rem 1rem; border-color: var(--me-border); }
.fi-ta-search-field .fi-input-wrp { min-width: 15rem; border-radius: 8px; box-shadow: 0 0 0 1px var(--me-border-strong); }
.fi-ta-table > thead > tr { background: var(--me-surface-soft); }
.fi-ta-header-cell { font-size: .72rem; font-weight: 600; color: var(--me-text-soft); padding-block: .625rem; }
.fi-ta-header-cell-sort-btn .fi-ta-header-cell-label, .fi-ta-header-cell .fi-ta-header-cell-label { color: var(--me-text-soft); }
.fi-ta-table > tbody > tr, .fi-ta-table > thead > tr { border-color: var(--me-border); }
.fi-ta-table { border-color: var(--me-border); }
.fi-ta-row { transition: background .12s; }
.fi-ta-row:hover { background: color-mix(in oklab, var(--me-primary-soft) 55%, transparent); }
.fi-ta-text-item { font-size: .78rem; }
.fi-ta-cell:first-child .fi-ta-text-item, .fi-ta-cell .fi-ta-text-item.fi-font-bold { color: var(--me-text); }
.fi-ta-ctn .fi-pagination { padding: .625rem 1rem; }
.fi-pagination-item-btn { border-radius: 6px; }
.fi-pagination-item.fi-active .fi-pagination-item-btn { background: var(--me-primary); }
.fi-pagination-item.fi-active .fi-pagination-item-label { color: #fff; }
.fi-ta-empty-state-icon-bg { background: var(--me-primary-soft); }
.fi-ta-empty-state-icon-bg .fi-icon { color: var(--me-primary); }

/* ---------------------------------------------------------------- controls */
.fi-btn { border-radius: 8px; min-height: 2.375rem; font-weight: 600; font-size: .78rem; }
.fi-btn.fi-size-sm, .fi-btn.fi-size-xs { min-height: 2rem; }
.fi-btn.fi-color-primary:not(.fi-outlined) { box-shadow: 0 3px 8px color-mix(in oklab, var(--me-primary) 22%, transparent); }
.fi-btn.fi-color-gray:not(.fi-outlined) { box-shadow: 0 0 0 1px var(--me-border-strong); background: var(--me-surface); }
.fi-badge { border-radius: 999px; font-size: .65rem; font-weight: 600; padding-inline: .5rem; }
.fi-ta-cell .fi-badge::before, .fi-in-entry .fi-badge::before, .me-badge::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none;
}
.fi-input-wrp { border-radius: 8px; }
.fi-input-wrp:not(:focus-within):not(.fi-invalid) { box-shadow: 0 0 0 1px var(--me-border-strong); }
html.dark .fi-input-wrp { background: var(--me-surface-soft); }
.fi-fo-field-label-content { font-size: .78rem; font-weight: 600; color: var(--me-text); }
.fi-tabs { border-radius: 10px; box-shadow: 0 0 0 1px var(--me-border); background: var(--me-surface); }
.fi-tabs-item { border-radius: 8px; font-size: .78rem; }
.fi-tabs-item.fi-active { background: var(--me-primary-soft); }
.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-icon { color: var(--me-primary); }
.fi-modal-window { border-radius: 14px; }
.fi-dropdown-panel { border-radius: 10px; box-shadow: 0 0 0 1px var(--me-border), 0 12px 32px rgba(15, 23, 42, .12); }
html.dark .fi-dropdown-panel, html.dark .fi-modal-window { background: var(--me-surface); }
.fi-checkbox-input:checked, .fi-radio-input:checked { background-color: var(--me-primary); }

/* ---------------------------------------------------------------- footer */
.me-footer {
    border-top: 1px solid var(--me-border); min-height: 3.25rem; padding: .75rem 1.875rem; margin-top: auto;
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between;
    color: var(--me-text-faint); font-size: .7rem; background: var(--me-surface);
}
.me-footer a { color: var(--me-primary); font-weight: 600; }
.me-footer a:hover { text-decoration: underline; }
.fi-simple-layout .me-footer { background: transparent; border: 0; justify-content: center; width: 100%; }
.fi-main-ctn { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- login & simple pages */
.fi-simple-main {
    border-radius: 16px; background: var(--me-surface);
    box-shadow: 0 0 0 1px var(--me-border), 0 18px 48px rgba(15, 23, 42, .07);
}
.fi-simple-layout {
    background:
        radial-gradient(60rem 30rem at 85% -10%, color-mix(in oklab, var(--me-primary) 10%, transparent), transparent 60%),
        radial-gradient(40rem 24rem at 0% 110%, color-mix(in oklab, var(--me-primary) 7%, transparent), transparent 60%),
        var(--me-bg);
}
.fi-simple-header-heading { font-size: 1.375rem; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- dashboard blocks (MagicEye UI) */
.me-grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16.875rem, .8fr); gap: .9375rem; }
.me-grid-even { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .9375rem; }
.me-card { padding: 1.125rem 1.25rem; }
.me-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .9375rem; margin-bottom: .75rem; }
.me-card-head h2 { font-size: .875rem; font-weight: 600; color: var(--me-text); }
.me-card-head p { font-size: .68rem; color: var(--me-text-soft); margin-top: 3px; }
.me-card-head a { font-size: .72rem; font-weight: 600; color: var(--me-primary); white-space: nowrap; }
.me-summary { display: flex; align-items: center; gap: .5625rem; margin-bottom: .25rem; }
.me-summary strong { font-size: 1.3125rem; font-weight: 700; color: var(--me-text); }
.me-badge {
    display: inline-flex; align-items: center; gap: 5px; width: fit-content; min-height: 1.375rem; border-radius: 20px;
    padding: 3px 8px; font-size: .62rem; font-weight: 600; white-space: nowrap; color: var(--me-success); background: var(--me-success-soft);
}
.me-badge.info { color: var(--me-info); background: var(--me-info-soft); }
.me-badge.warning { color: var(--me-warning); background: var(--me-warning-soft); }
.me-badge.danger { color: var(--me-danger); background: var(--me-danger-soft); }
.me-badge.neutral { color: var(--me-text-soft); background: var(--me-surface-soft); }
.me-line-chart { position: relative; height: 10.5rem; margin-top: .25rem; }
.me-line-chart .grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; }
.me-line-chart .grid i { border-top: 1px dashed var(--me-border); }
.me-line-chart svg { position: absolute; inset: 5px 0 0; width: 100%; height: calc(100% - 5px); overflow: visible; }
[dir=rtl] .me-line-chart svg { transform: scaleX(-1); } /* time runs with the reading direction, like the labels */
.me-line-chart .area { fill: color-mix(in oklab, var(--me-primary) 14%, transparent); stroke: none; }
.me-line-chart .line { fill: none; stroke: var(--me-primary); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.me-chart-labels { display: flex; justify-content: space-between; color: var(--me-text-faint); font-size: .6rem; margin-top: .375rem; gap: .25rem; }
.me-bars { height: 10.5rem; display: flex; align-items: flex-end; gap: .5rem; padding-top: .5rem; border-bottom: 1px dashed var(--me-border); }
.me-bars > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; min-width: 0; }
.me-bars > div > i { width: 100%; max-width: 2.25rem; border-radius: 6px 6px 2px 2px; background: var(--me-primary); min-height: 2px; }
.me-bars > div > b { font-size: .6rem; color: var(--me-text-soft); font-weight: 600; }
.me-donut-wrap { display: grid; place-items: center; padding: 1.25rem 0 1rem; }
.me-donut { width: 8.25rem; height: 8.25rem; border-radius: 50%; display: grid; place-items: center; }
.me-donut::before { content: ""; grid-area: 1/1; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--me-surface); }
.me-donut > div { grid-area: 1/1; z-index: 1; text-align: center; display: flex; flex-direction: column; }
.me-donut strong { font-size: 1.375rem; color: var(--me-text); }
.me-donut span { font-size: .6rem; color: var(--me-text-soft); }
.me-legend { border-top: 1px solid var(--me-border); padding-top: .5625rem; }
.me-legend > div { display: grid; grid-template-columns: 9px 1fr auto 2.75rem; gap: .4375rem; align-items: center; font-size: .68rem; padding: 5px 0; color: var(--me-text); }
.me-legend i { width: 7px; height: 7px; border-radius: 2px; }
.me-legend small { color: var(--me-text-faint); text-align: end; direction: ltr; }
.me-rows > div { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto auto; align-items: center; gap: .625rem; padding: .625rem 0; border-bottom: 1px solid var(--me-border); }
.me-rows > div:last-child { border-bottom: 0; }
.me-rows > div > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.me-rows strong { font-size: .75rem; color: var(--me-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-rows small { font-size: .62rem; color: var(--me-text-faint); margin-top: 2px; }
.me-rows > div > b { font-size: .78rem; color: var(--me-text); }
.me-tile { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px; background: var(--me-primary-soft); color: var(--me-primary); flex: none; }
.me-tile.green { color: var(--me-success); background: var(--me-success-soft); }
.me-tile.amber { color: var(--me-warning); background: var(--me-warning-soft); }
.me-tile.violet { color: var(--me-violet); background: var(--me-violet-soft); }
.me-tile.red { color: var(--me-danger); background: var(--me-danger-soft); }
.me-tile svg { width: 1.0625rem; height: 1.0625rem; }
.me-activity > div { display: flex; gap: .625rem; padding: .5rem 0; position: relative; }
.me-activity > div:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 1rem; top: 2.5rem; height: 1rem; border-inline-start: 1px dashed var(--me-border-strong); }
.me-activity p { font-size: .72rem; line-height: 1.5; display: flex; flex-direction: column; color: var(--me-text); }
.me-activity small { font-size: .62rem; color: var(--me-text-faint); }
.me-events > div { display: grid; grid-template-columns: 2.375rem 1fr 5px; align-items: center; gap: .625rem; padding: .6875rem 0; border-bottom: 1px solid var(--me-border); }
.me-events > div:last-child { border-bottom: 0; }
.me-events > div > span { border: 1px solid var(--me-border); border-radius: 7px; text-align: center; display: flex; flex-direction: column; padding: 4px; }
.me-events > div > span b { font-size: .8125rem; color: var(--me-text); }
.me-events > div > span small, .me-events > div > div small { font-size: .58rem; color: var(--me-text-faint); }
.me-events > div > div { display: flex; flex-direction: column; min-width: 0; }
.me-events > div > div strong { font-size: .75rem; color: var(--me-text); font-weight: 600; }
.me-events > div > i { width: 5px; height: 28px; border-radius: 4px; background: var(--me-primary); }
.me-empty { font-size: .75rem; color: var(--me-text-faint); padding: 1.5rem 0; text-align: center; }
.me-stack { display: flex; flex-direction: column; gap: .9375rem; }

@media (max-width: 1100px) { .me-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .me-grid-even { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .fi-topbar { padding-inline: 1rem; }
    .fi-global-search-field .fi-input-wrp { width: 100%; }
    .fi-global-search-field .fi-input-wrp-suffix { display: none; }
    .me-theme-toggle { display: none; }
    .fi-header-heading { font-size: 1.25rem; }
    .me-footer { padding-inline: 1rem; justify-content: center; text-align: center; }
}

/* Portal dashboard */
.me-portal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .875rem; }
.me-rows.me-rows-actions > div { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
.me-row-actions { display: flex; gap: .375rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
    .me-rows.me-rows-actions > div { grid-template-columns: 2.25rem minmax(0, 1fr); }
    .me-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Data pages (2.4.0): filters bar, plain tables and small controls. */
.me-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.me-filters label { display: flex; flex-direction: column; gap: .3rem; font-size: .7rem; color: var(--me-text-soft); font-weight: 600; }
.me-select, .me-input {
    height: 2.25rem; border-radius: 8px; border: 1px solid var(--me-border-strong); background: var(--me-surface); color: var(--me-text);
    padding-inline: .625rem; font-size: .78rem; min-width: 9rem; max-width: 100%;
}
.me-select:focus, .me-input:focus { outline: 2px solid color-mix(in oklab, var(--me-primary) 35%, transparent); outline-offset: 1px; }
.me-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.me-table th { background: var(--me-surface-soft); color: var(--me-text-soft); font-weight: 600; text-align: start; padding: .625rem .75rem; white-space: nowrap; border-bottom: 1px solid var(--me-border); }
.me-table td { padding: .625rem .75rem; border-bottom: 1px solid var(--me-border); color: var(--me-text); vertical-align: middle; }
.me-table td small { display: block; color: var(--me-text-faint); font-size: .65rem; margin-top: 2px; }
.me-table tbody tr:hover { background: color-mix(in oklab, var(--me-primary-soft) 55%, transparent); }
.me-table tbody tr:last-child td { border-bottom: 0; }
.me-rank { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--me-surface-soft); font-weight: 700; font-size: .78rem; }
.me-rank.top { background: var(--me-warning-soft); color: var(--me-warning); }
.me-tt { display: grid; gap: 2px; font-size: .7rem; }
.me-tt th { font-size: .68rem; }
.me-tt-cell { min-width: 7rem; }
.me-tt-cell > div { background: var(--me-primary-soft); color: var(--me-primary); border-radius: 6px; padding: .25rem .375rem; margin-bottom: 2px; font-weight: 600; line-height: 1.35; }

/* Sign in with Google / Microsoft (2.6.0) */
.me-sso { display: grid; gap: .5rem; margin-top: .25rem; }
.me-sso-or { display: flex; align-items: center; gap: .75rem; color: var(--me-text-faint); font-size: .72rem; }
.me-sso-or::before, .me-sso-or::after { content: ""; flex: 1; border-top: 1px solid var(--me-border); }
.me-sso-btn {
    display: flex; align-items: center; justify-content: center; gap: .625rem; height: 2.5rem; border-radius: 8px;
    border: 1px solid var(--me-border-strong); background: var(--me-surface); color: var(--me-text); font-size: .8rem; font-weight: 600;
}
.me-sso-btn:hover { background: var(--me-surface-soft); }
.me-sso-error { margin-bottom: .75rem; padding: .625rem .75rem; border-radius: 8px; background: var(--me-danger-soft); color: var(--me-danger); font-size: .78rem; }

/* ---------------------------------------------------------------- 2.8.0 WhatsApp inbox (split pane) */
.me-wa { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1rem; height: calc(100vh - 13rem); min-height: 480px; }
.me-wa > .me-card { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.me-wa-tabs { display: flex; gap: .25rem; padding: .625rem .625rem 0; overflow-x: auto; scrollbar-width: none; }
.me-wa-tab { flex: none; font-size: .75rem; font-weight: 600; padding: .375rem .625rem; border-radius: 999px; color: var(--me-text-soft); }
.me-wa-tab:hover { background: var(--me-surface-soft); color: var(--me-text); }
.me-wa-tab.on { background: var(--me-primary-soft); color: var(--me-primary); }
.me-wa-tab:focus-visible, .me-wa-item:focus-visible, .me-wa-back:focus-visible { outline: 2px solid var(--me-primary); outline-offset: 2px; }
.me-wa-search { display: block; padding: .625rem; border-bottom: 1px solid var(--me-border); }
.me-wa-search input { width: 100%; font-size: .8125rem; padding: .5rem .75rem; border-radius: 8px; border: 1px solid var(--me-border); background: var(--me-surface-soft); color: var(--me-text); }
.me-wa-items { overflow-y: auto; flex: 1; }
.me-wa-item { display: flex; gap: .625rem; width: 100%; text-align: start; padding: .75rem .875rem; border-bottom: 1px solid var(--me-border); transition: background-color .12s ease-out; }
.me-wa-item:hover { background: var(--me-surface-soft); }
.me-wa-item.on { background: var(--me-primary-soft); }
.me-wa-avatar { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: .875rem; background: #dcfce7; color: #15803d; }
.dark .me-wa-avatar { background: #0d2b26; color: #4ade80; }
.me-wa-meta { min-width: 0; flex: 1; display: grid; gap: 2px; }
.me-wa-line { display: flex; justify-content: space-between; gap: .5rem; align-items: center; min-width: 0; font-size: .8125rem; }
.me-wa-line b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--me-text); }
.me-wa-line time { flex: none; font-size: .6875rem; color: var(--me-text-faint); }
.me-wa-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--me-text-soft); font-size: .75rem; }
.me-wa-unread { flex: none; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: #16a34a; color: #fff; font-size: .6875rem; font-weight: 700; display: grid; place-items: center; }
.me-wa-empty, .me-wa-placeholder { padding: 2rem 1rem; text-align: center; color: var(--me-text-soft); font-size: .8125rem; }
.me-wa-placeholder { margin: auto; }
.me-wa-head { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; border-bottom: 1px solid var(--me-border); }
.me-wa-head b { font-size: .9375rem; color: var(--me-text); }
.me-wa-sub { font-size: .75rem; color: var(--me-text-soft); overflow-wrap: anywhere; }
.me-wa-sub a { color: var(--me-primary); font-weight: 600; }
.me-wa-actions { display: flex; gap: .375rem; flex-wrap: wrap; justify-content: flex-end; }
.me-wa-back { display: none; padding: .375rem; border-radius: 8px; color: var(--me-text-soft); }
[dir=rtl] .me-wa-back svg { transform: scaleX(-1); }
.me-wa-note { font-size: .75rem; padding: .5rem 1rem; color: var(--me-text-soft); background: var(--me-surface-soft); border-bottom: 1px solid var(--me-border); }
.me-wa-note.warning { color: var(--me-warning); background: var(--me-warning-soft); border-top: 1px solid var(--me-border); }
.me-wa-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; background: var(--me-bg); }
.me-wa-msg { max-width: min(78%, 34rem); padding: .5rem .75rem; border-radius: 12px; font-size: .875rem; line-height: 1.55; background: var(--me-surface); border: 1px solid var(--me-border); align-self: flex-start; }
.me-wa-msg.out { align-self: flex-end; background: #dcfce7; border-color: #bbf7d0; }
.dark .me-wa-msg.out { background: #10301f; border-color: #1b4a31; }
.me-wa-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--me-text); }
.me-wa-kind { font-size: .6875rem; font-weight: 600; color: var(--me-text-soft); margin-bottom: 2px; }
.me-wa-foot { display: flex; gap: .375rem; justify-content: flex-end; flex-wrap: wrap; font-size: .6875rem; color: var(--me-text-faint); margin-top: 2px; }
.me-wa-status.failed { color: var(--me-danger); font-weight: 600; }
.me-wa-status.read { color: var(--me-info); }
.me-wa-img { display: block; max-width: 100%; max-height: 18rem; border-radius: 8px; margin-bottom: .25rem; }
.me-wa-file { display: inline-block; color: var(--me-primary); font-weight: 600; margin-bottom: .25rem; overflow-wrap: anywhere; }
.me-wa-compose { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; padding: .75rem; border-top: 1px solid var(--me-border); }
.me-wa-compose .me-wa-note { grid-column: 1 / -1; border: 0; border-radius: 8px; padding: .5rem .75rem; }
.me-wa-compose textarea { width: 100%; resize: vertical; min-height: 2.75rem; max-height: 10rem; font-size: .875rem; padding: .625rem .75rem; border-radius: 10px; border: 1px solid var(--me-border-strong); background: var(--me-surface); color: var(--me-text); }
.me-wa-compose textarea:focus { outline: 2px solid var(--me-primary); outline-offset: 0; border-color: transparent; }
@media (max-width: 900px) {
    .me-wa { grid-template-columns: 1fr; height: calc(100dvh - 11rem); }
    .me-wa.has-thread .me-wa-list { display: none; }
    .me-wa:not(.has-thread) .me-wa-thread { display: none; }
    .me-wa-back { display: inline-grid; }
    .me-wa-msg { max-width: 88%; }
}
.me-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; }

/* ---------------------------------------------------------------- 2.9.0 term comparison report */
.me-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.me-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: .375rem .7rem; border-radius: 10px; border: 1px solid var(--me-border-strong); background: var(--me-surface); color: var(--me-text); font-size: .75rem; font-weight: 600; transition: background-color .12s ease-out, border-color .12s ease-out; }
.me-chip small { font-size: .62rem; font-weight: 500; color: var(--me-text-faint); }
.me-chip:hover:not(:disabled) { border-color: var(--me-primary); }
.me-chip.on { background: var(--me-primary-soft); border-color: var(--me-primary); color: var(--me-primary); }
.me-chip.on small { color: var(--me-primary); opacity: .8; }
.me-chip:disabled { opacity: .45; cursor: not-allowed; }
.me-chip:focus-visible { outline: 2px solid var(--me-primary); outline-offset: 2px; }
.me-insights { display: grid; gap: .5rem; }
.me-insights li { display: flex; gap: .5rem; align-items: baseline; font-size: .8125rem; line-height: 1.6; color: var(--me-text); }
.me-insights li > span { flex: none; font-size: .7rem; color: var(--me-text-faint); }
.me-insights li.good > span { color: var(--me-success); }
.me-insights li.bad > span { color: var(--me-danger); }
.me-tr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.me-tr-grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.me-tr-small h2 { font-size: .8125rem; font-weight: 600; color: var(--me-text); margin-bottom: .75rem; }
.me-tr-bars { display: grid; gap: .5rem; }
.me-tr-bar { display: grid; grid-template-columns: minmax(0, 7.5rem) 1fr 3.25rem; gap: .5rem; align-items: center; font-size: .72rem; }
.me-tr-bar .label { color: var(--me-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-tr-bar b { color: var(--me-text); text-align: end; font-variant-numeric: tabular-nums; }
.me-tr-bar .track, .me-tr-cell .track { display: block; block-size: .5rem; border-radius: 999px; background: var(--me-surface-soft); overflow: hidden; }
.me-tr-bar .track i, .me-tr-cell .track i { display: block; block-size: 100%; border-radius: 999px; background: color-mix(in oklab, var(--me-primary) 45%, var(--me-surface)); }
.me-tr-bar .track i.last { background: var(--me-primary); }
.me-tr-table td b { font-variant-numeric: tabular-nums; }
.me-delta { display: inline-block; font-size: .65rem; font-weight: 600; color: var(--me-text-faint); margin-top: 2px; }
.me-delta.good { color: var(--me-success); }
.me-delta.bad { color: var(--me-danger); }
.me-tr-cell { display: grid; grid-template-columns: minmax(3rem, 1fr) auto; gap: .5rem; align-items: center; }
.me-tr-course { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--me-border); font-size: .75rem; }
.me-tr-course:last-child { border-bottom: 0; }
.me-tr-course strong { display: block; color: var(--me-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-tr-course small { color: var(--me-text-faint); font-size: .62rem; }
.me-tr-course .seq { color: var(--me-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .me-tr-course { grid-template-columns: minmax(0, 1fr) auto; } .me-tr-course .seq { grid-column: 1 / -1; order: 3; } }

/* ---------------------------------------------------------------- 3.0.0 exam proctoring */
.me-proctor-modal, .me-proctor-gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .55); }
.me-proctor-gate { background: color-mix(in oklab, var(--me-bg) 92%, transparent); backdrop-filter: blur(6px); }
.me-proctor-card { width: min(34rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; background: var(--me-surface); color: var(--me-text); border: 1px solid var(--me-border); border-radius: 14px; padding: 1.25rem 1.375rem; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); }
.me-proctor-card h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .375rem; }
.me-proctor-card .lead { font-size: .85rem; color: var(--me-text-soft); line-height: 1.6; margin-bottom: .75rem; }
.me-proctor-card ul { display: grid; gap: .4rem; margin: 0 0 1rem; padding-inline-start: 1.1rem; list-style: disc; font-size: .82rem; line-height: 1.6; }
.me-proctor-cam { display: flex; gap: .75rem; align-items: center; padding: .75rem; border: 1px dashed var(--me-border-strong); border-radius: 10px; margin-bottom: 1rem; }
.me-proctor-cam video { inline-size: 7.5rem; block-size: 5.6rem; object-fit: cover; border-radius: 8px; background: #000; flex: none; transform: scaleX(-1); }
.me-proctor-agree { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; font-weight: 600; margin-bottom: 1rem; cursor: pointer; }
.me-proctor-agree input { margin-top: .2rem; inline-size: 1rem; block-size: 1rem; }
.me-proctor-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.me-proctor-strip { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .78rem; color: var(--me-text-soft); padding: .5rem .75rem; border-radius: 10px; background: var(--me-warning-soft); border: 1px solid color-mix(in oklab, var(--me-warning) 25%, transparent); }
.me-proctor-strip .dot { inline-size: .5rem; block-size: .5rem; border-radius: 999px; background: var(--me-text-faint); }
.me-proctor-strip .dot.live { background: var(--me-danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--me-danger) 25%, transparent); }
.me-proctor-strip .count { font-weight: 700; color: var(--me-danger); }
.me-proctor-strip .self { margin-inline-start: auto; inline-size: 4.5rem; block-size: 3.4rem; object-fit: cover; border-radius: 6px; background: #000; transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) { .me-proctor-strip .dot.live { animation: me-pulse 2s ease-in-out infinite; } }
@keyframes me-pulse { 50% { opacity: .45; } }
.me-proctor-timeline { display: grid; gap: .25rem; max-height: 26rem; overflow-y: auto; font-size: .78rem; }
.me-proctor-timeline div { display: grid; grid-template-columns: 4.5rem 1fr; gap: .5rem; padding: .35rem .25rem; border-bottom: 1px solid var(--me-border); }
.me-proctor-timeline div.v { color: var(--me-danger); }
.me-proctor-timeline time { color: var(--me-text-faint); font-variant-numeric: tabular-nums; }
.me-proctor-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.me-proctor-shots figure { margin: 0; }
.me-proctor-shots img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--me-surface-soft); }
.me-proctor-shots figcaption { font-size: .65rem; color: var(--me-text-faint); text-align: center; margin-top: 2px; }

/* ---------------------------------------------------------------- 3.2.0 parent–teacher meetings */
.me-meet-slots { display: grid; gap: 0; }
.me-meet-slot { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: .625rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--me-border); font-size: .78rem; }
.me-meet-slot:last-child { border-bottom: 0; }
.me-meet-slot time { font-variant-numeric: tabular-nums; color: var(--me-text-soft); font-weight: 600; }
.me-meet-slot strong { display: block; color: var(--me-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-meet-slot small { display: block; color: var(--me-text-faint); font-size: .68rem; }
.me-meet-slot .muted { color: var(--me-text-faint); }
.me-meet-slot.booked time { color: var(--me-primary); }
.me-meet-slot.blocked { opacity: .55; }
.me-meet-pick { display: flex; flex-wrap: wrap; gap: .375rem; }
.me-meet-pick button { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: .4rem .65rem; border-radius: 8px; border: 1px solid var(--me-border-strong); background: var(--me-surface); color: var(--me-text); min-inline-size: 3.75rem; transition: border-color .12s ease-out, background-color .12s ease-out; }
.me-meet-pick button:hover { border-color: var(--me-primary); }
.me-meet-pick button.on { background: var(--me-primary); color: #fff; border-color: var(--me-primary); }
.me-meet-pick button:focus-visible { outline: 2px solid var(--me-primary); outline-offset: 2px; }
.me-meet-teacher { padding: .875rem 0; border-bottom: 1px solid var(--me-border); }
.me-meet-teacher:last-child { border-bottom: 0; }
.me-meet-teacher h3 { font-size: .875rem; font-weight: 600; color: var(--me-text); }
.me-meet-teacher p { font-size: .72rem; color: var(--me-text-soft); margin: 2px 0 .5rem; }

/* ---------------------------------------------------------------- 3.3.0 calendar & permission slips */
.me-consent-stat { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: start; cursor: pointer; transition: border-color .12s ease-out; }
.me-consent-stat span { font-size: .72rem; color: var(--me-text-soft); }
.me-consent-stat b { font-size: 1.35rem; color: var(--me-text); font-variant-numeric: tabular-nums; }
.me-consent-stat.on { border-color: var(--me-primary); box-shadow: 0 0 0 1px var(--me-primary); }
.me-cal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.me-cal-head h2 { font-size: 1rem; font-weight: 700; color: var(--me-text); }
.me-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--me-border); border-inline-start: 1px solid var(--me-border); }
.me-cal .dow { font-size: .68rem; font-weight: 600; color: var(--me-text-soft); padding: .4rem .5rem; border-inline-end: 1px solid var(--me-border); border-bottom: 1px solid var(--me-border); background: var(--me-surface-soft); }
.me-cal .day { min-height: 6.25rem; padding: .35rem; border-inline-end: 1px solid var(--me-border); border-bottom: 1px solid var(--me-border); display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.me-cal .day.out { background: var(--me-surface-soft); }
.me-cal .day.out .n { color: var(--me-text-faint); }
.me-cal .day .n { font-size: .72rem; font-weight: 600; color: var(--me-text-soft); font-variant-numeric: tabular-nums; }
.me-cal .day.today .n { color: #fff; background: var(--me-primary); border-radius: 999px; inline-size: 1.4rem; block-size: 1.4rem; display: grid; place-items: center; }
.me-cal-chip { display: block; font-size: .68rem; line-height: 1.35; padding: .15rem .35rem; border-radius: 5px; background: var(--me-primary-soft); color: var(--me-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.me-cal-chip.trip { background: var(--me-warning-soft); color: var(--me-warning); }
.me-cal-chip.holiday { background: var(--me-success-soft); color: var(--me-success); }
.me-cal-chip.exam { background: var(--me-violet-soft); color: var(--me-violet); }
.me-cal-chip.cancelled { text-decoration: line-through; opacity: .6; }
.me-cal-chip.term { background: transparent; color: var(--me-text-soft); border: 1px dashed var(--me-border-strong); }
.me-agenda { display: none; }
.me-agenda-item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--me-border); font-size: .8rem; }
.me-agenda-item .d { text-align: center; color: var(--me-text-soft); font-size: .68rem; }
.me-agenda-item .d b { display: block; font-size: 1.15rem; color: var(--me-text); }
@media (max-width: 720px) { .me-cal { display: none; } .me-agenda { display: block; } }
.me-slip { border: 1px solid color-mix(in oklab, var(--me-warning) 35%, var(--me-border)); background: var(--me-warning-soft); }
.me-slip h3 { font-size: .9rem; font-weight: 700; color: var(--me-text); }
.me-slip .meta { font-size: .75rem; color: var(--me-text-soft); margin: .2rem 0 .6rem; }