:root {
    --bg: #e7edf4;
    --panel: #ffffff;
    --ink: #1f2937;
    --muted: #667085;
    --line: #e5eaf0;
    --green: #163f30;
    --blue: #2563eb;
    --gold: #b7791f;
    --red: #c2410c;
    --shadow: 0 10px 28px rgba(31, 41, 55, .08);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

a { color: var(--blue); text-decoration: none; }

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 248px 1fr;
}

.sidebar {
    background: #ffffff;
    border-right: 1px solid var(--line);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
}

.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #aebbc9 transparent;
}

.sidebar-menu::-webkit-scrollbar { width: 7px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: #aebbc9; border-radius: 999px; }
.sidebar-menu::-webkit-scrollbar-track { background: transparent; }

.menu-toggle {
    display: none;
    min-height: 36px;
    padding: 8px 12px;
    background: #eef4ff;
    color: var(--blue);
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: var(--green);
    font-weight: 700;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, .16);
    box-shadow: 0 6px 16px rgba(31, 41, 55, .08);
}

.brand-mark img {
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.brand small, .profile-chip small, .muted { color: var(--muted); }
.brand strong, .brand small { display: block; }

.nav {
    display: grid;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 auto;
}

.nav a {
    color: var(--ink);
    padding: 8px 11px;
    border-radius: 0;
    line-height: 1.2;
    border-bottom: 1px solid #e8edf3;
    display: flex;
    align-items: center;
    gap: 9px;
}

.nav a:last-child { border-bottom: 0; }

.nav a.active, .nav a:hover {
    background: #eef4ff;
    color: var(--blue);
}

.nav a {
    border-left: 3px solid transparent;
}

.nav a.active, .nav a:hover { border-left-color: var(--blue); }

.nav-icon {
    display: inline-grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 7px;
    background: #eef2f7;
    color: #334155;
    font-size: 14px;
    font-weight: 900;
}

.nav-icon-image {
    object-fit: cover;
    background: #fff;
}

.nav-icon-home { background: #dbeafe; color: #1d4ed8; }
.nav-icon-accounts { background: #dcfce7; color: #166534; }
.nav-icon-devotion { background: #fef3c7; color: #92400e; }
.nav-icon-calendar { background: #ccfbf1; color: #0f766e; }
.nav-icon-projects { background: #e0e7ff; color: #3730a3; }
.nav-icon-tasks { background: #ffedd5; color: #c2410c; }
.nav-icon-departments { background: #f3e8ff; color: #7e22ce; }
.nav-icon-programs { background: #d1fae5; color: #047857; }
.nav-icon-files { background: #e0f2fe; color: #0369a1; }
.nav-icon-reports { background: #fee2e2; color: #b91c1c; }
.nav-icon-news { background: #ffedd5; color: #c2410c; }
.nav-icon-share { background: #dbeafe; color: #1d4ed8; }
.nav-icon-activity { background: #f1f5f9; color: #475569; }
.nav-icon-users { background: #ede9fe; color: #6d28d9; }

.profile-chip {
    margin-top: 4px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    display: grid;
    gap: 4px;
}

.login-forgot-link {
    justify-self: center;
    font-weight: 700;
}

.in-app-notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    border: 1px solid #f0cf75;
    border-left: 5px solid #b7791f;
    border-radius: 10px;
    background: #fff9df;
    padding: 13px 15px;
}

.in-app-notification p {
    margin: 4px 0 0;
    color: #6f5c2c;
}

.content {
    padding: 24px;
    max-width: 1180px;
    width: 100%;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.compact-page-head {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.calendar-page-head {
    margin-bottom: 8px;
}

.calendar-page-head h1 {
    font-size: 28px;
}

.compact-control {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 13px;
}

.page-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.page-controls .btn,
.page-controls button {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 13px;
}

.quiet-signout {
    background: #f4f7fb;
    color: #334155;
    border: 1px solid #d9e2ee;
}

.quiet-signout:hover {
    background: #eaf1f8;
}

.mobile-footer-nav {
    display: none;
}

.app-confirm-backdrop,
.signout-confirm-backdrop,
.action-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, .46);
}

.app-confirm-backdrop[hidden],
.signout-confirm-backdrop[hidden],
.action-confirm-backdrop[hidden] {
    display: none;
}

.app-confirm {
    width: min(420px, 100%);
    padding: 22px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f0fdfa);
    border: 1px solid #99f6e4;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.app-confirm h2 {
    margin: 5px 0 8px;
}

.app-confirm p {
    margin: 0 0 16px;
    color: var(--muted);
}

.app-update-notice {
    position: fixed;
    z-index: 35;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 520px;
    border: 1px solid #86efac;
    border-left: 5px solid #15803d;
    border-radius: 12px;
    background: #f0fdf4;
    padding: 14px 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
}

.app-update-notice[hidden] {
    display: none;
}

.app-update-notice > div {
    display: grid;
    gap: 2px;
}

.app-update-notice strong {
    color: #166534;
}

.app-update-notice span {
    color: #425b52;
}

.app-update-notice .btn {
    flex: 0 0 auto;
}

.landing-app-download {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    width: min(620px, 100%);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf4, #ecfeff);
    padding: 17px;
    color: #163f30;
    text-decoration: none;
    box-shadow: 0 16px 36px rgba(22, 101, 52, .15);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.landing-app-download:hover {
    border-color: #4ade80;
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(22, 101, 52, .2);
}

.landing-app-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 13px;
    background: #15803d;
    color: #fff;
    font-weight: 900;
    align-content: center;
    text-align: center;
}

.landing-app-icon b {
    font-size: 23px;
    line-height: .9;
}

.landing-app-icon small {
    color: #dcfce7;
    font-size: 8px;
    letter-spacing: .12em;
}

.landing-app-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.landing-app-copy > small,
.landing-app-copy em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.landing-app-copy strong {
    font-size: 18px;
    line-height: 1.2;
}

.landing-app-meta {
    margin-top: 3px;
    color: #15803d;
    font-size: 11px;
    font-weight: 800;
}

.landing-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    background: #163f30;
    padding: 11px 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.landing-download-button b {
    font-size: 18px;
    line-height: 1;
}

.landing-install-note {
    max-width: 620px !important;
    margin: -24px 0 0;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

@media (max-width: 520px) {
    .app-update-notice {
        right: 12px;
        bottom: 12px;
        left: 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .landing-app-download {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .landing-app-icon {
        width: 44px;
        height: 44px;
    }

    .landing-download-button {
        grid-column: 1 / -1;
        text-align: center;
    }

    .landing-install-note {
        margin-top: -22px;
    }
}

.document-actions,
.account-entry-actions,
.account-entry-edit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.document-actions .btn,
.document-actions button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
}

.document-organization-header,
.document-signature-space {
    display: none;
}

body.include-organization-header .document-organization-header {
    display: grid;
    grid-template-columns: .75in minmax(0, 1fr) .75in;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #334155;
    padding: 0 0 12px;
    margin: 18px 22px 14px;
}

.document-organization-header::after { content: ""; width: .75in; }
.document-organization-header img { width: .75in; height: .75in; object-fit: contain; }
.document-organization-header div { text-align: center; }
.document-organization-header strong,
.document-organization-header span { display: block; }
.document-organization-header strong { font-size: 18px; font-weight: 800; letter-spacing: .02em; }
.document-organization-header span { margin-top: 4px; font-size: 14px; font-weight: 400; }

.account-entry-actions form {
    margin: 0;
}

.account-transaction-edit-form {
    margin: 8px 0;
}

.account-entry-edit-actions {
    align-self: end;
}

.file-action-buttons {
    flex-wrap: wrap;
}

@media print {
    @page {
        margin: 14mm;
    }

    body {
        background: #fff;
    }

    .sidebar,
    .page-controls,
    .mobile-footer-nav,
    .page-head,
    .account-small-nav,
    .note-navigation,
    .note-subject-index,
    .account-transaction-form,
    .no-print,
    .app-confirm-backdrop,
    .signout-confirm-backdrop,
    .action-confirm-backdrop {
        display: none !important;
    }

    .app-shell,
    .content {
        display: block;
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .card,
    .note-view-card,
    .account-detail-card {
        border: 0;
        box-shadow: none;
        break-inside: auto;
    }

    .account-transaction {
        break-inside: avoid;
    }

    body.include-organization-header .document-organization-header { margin: 0 0 8mm; }
    .document-signature-space {
        display: flex;
        justify-content: flex-end;
        margin: 18mm 6mm 0;
        break-inside: avoid;
    }
    .document-signature-space span {
        width: 42mm;
        border-top: 1px solid #334155;
        padding-top: 3mm;
        text-align: center;
        font-size: 12px;
    }
}

.dashboard-hero {
    min-height: 178px;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    background: #163f30;
    box-shadow: 0 16px 34px rgba(22, 63, 48, .22);
}

.dashboard-hero h1 {
    font-size: 38px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #fff;
    padding: 5px;
    object-fit: contain;
    box-shadow: 0 10px 24px rgba(31, 41, 55, .18);
}

.dashboard-hero p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
}

.hero-kicker {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-org {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.title-mobile { display: none; }
.title-desktop { display: inline; }

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

h1, h2, h3 { margin: 0 0 8px; line-height: 1.2; }
p { line-height: 1.55; }

.grid {
    display: grid;
    gap: 14px;
}

.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.dashboard-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-priority {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.dashboard-priority .dashboard-hero {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.dashboard-priority .task-views-card {
    grid-column: 1;
}

.dashboard-priority .whats-new-card {
    grid-column: 1;
}

.dashboard-priority .events-strip {
    grid-column: 1;
}

.dashboard-priority .devotion-rota-link-card {
    grid-column: 1;
}

.dashboard-priority .dashboard-rota-today {
    grid-column: 1;
}

.dashboard-priority .dashboard-accounts-tile {
    grid-column: 1;
}

.dashboard-priority .attention-card {
    grid-column: 2;
    grid-row: 2 / span 4;
}

.devotion-rota-card {
    position: relative;
    overflow: hidden;
    border-color: #d7c486;
    background: linear-gradient(135deg, #fffdf4 0%, #f5f0d9 100%);
    box-shadow: 0 14px 30px rgba(93, 72, 18, .12);
}

.devotion-rota-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #b7791f, #0f766e);
}

.devotion-rota-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-left: 6px;
}

.devotion-rota-head h2 {
    margin: 2px 0 4px;
    color: #163f30;
    font-size: 27px;
}

.devotion-rota-head p {
    margin: 0;
    color: #625534;
    font-size: 13px;
}

.devotion-kicker {
    color: #9a670f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.devotion-time {
    border: 1px solid #cfb968;
    border-radius: 999px;
    background: #fff8d7;
    padding: 7px 11px;
    color: #77510c;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.devotion-rota-card blockquote {
    margin: 14px 6px;
    border-left: 4px solid #0f766e;
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, .68);
    padding: 11px 13px;
    color: #35544a;
    font-family: Georgia, serif;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
}

.devotion-months {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding-left: 6px;
}

.devotion-month {
    min-width: 0;
    border: 1px solid #dfd4ad;
    border-radius: 9px;
    background: rgba(255, 255, 255, .78);
    overflow: hidden;
}

.devotion-month summary {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 11px;
    color: #163f30;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.devotion-month summary::-webkit-details-marker {
    display: none;
}

.devotion-month summary strong {
    color: #8a6d25;
    font-size: 11px;
    white-space: nowrap;
}

.devotion-month[open] summary {
    border-bottom: 1px solid #e5dcc0;
    background: #fff9df;
}

.devotion-rota-list {
    max-height: 320px;
    overflow: auto;
    padding: 8px;
}

.devotion-rota-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid #eee7d1;
    padding: 7px 3px;
    color: #263b34;
}

.devotion-rota-row:last-child {
    border-bottom: 0;
}

.devotion-date {
    display: grid;
    justify-items: center;
    border-radius: 7px;
    background: #e8f4ed;
    padding: 5px;
    color: #0f766e;
}

.devotion-date strong {
    font-size: 18px;
    line-height: 1;
}

.devotion-date small {
    margin-top: 2px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.devotion-rota-row > span:nth-child(2) {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.devotion-rota-row > span:nth-child(2) small {
    color: #8b7b52;
    font-size: 10px;
}

.devotion-rota-row > span:nth-child(2) strong {
    color: #263b34;
    font-size: 12px;
    overflow-wrap: normal;
    word-break: normal;
}

.devotion-rota-page-card .devotion-months {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rota-week-view,
.rota-month-view,
.rota-year-view {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rota-empty-period {
    margin: 8px 4px;
    border: 1px dashed #d9cda5;
    border-radius: 8px;
    padding: 18px 10px;
    color: #847650;
    font-size: 12px;
    text-align: center;
}

.devotion-rota-row > em {
    align-self: center;
    border-radius: 999px;
    background: #fff4c7;
    padding: 3px 6px;
    color: #805d12;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.rota-editable {
    border-radius: 7px;
    transition: background .15s ease, box-shadow .15s ease;
}

.rota-editable:hover,
.rota-editable:focus-visible {
    background: #fff9df;
    box-shadow: inset 0 0 0 1px #dfc86d;
}

.devotion-rota-row.is-today {
    border: 1px solid #9ed8c4;
    border-radius: 8px;
    background: #effbf6;
    padding-left: 7px;
    padding-right: 7px;
}

.rota-editor-card {
    max-width: 760px;
    border-color: #dfd4ad;
    background: linear-gradient(180deg, #fffdf4, #fff);
}

.rota-delete-form {
    margin-top: 14px;
    border-top: 1px solid #eee7d1;
    padding-top: 14px;
}

.rota-management-card {
    max-width: 900px;
}

.rota-month-filter {
    display: flex;
    align-items: end;
    gap: 10px;
    margin-bottom: 16px;
}

.rota-manage-list {
    display: grid;
    gap: 8px;
}

.rota-manage-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #e5dcc0;
    border-radius: 9px;
    background: #fffdf4;
    padding: 11px 13px;
}

.rota-manage-item > div:first-child {
    display: grid;
    gap: 3px;
}

.rota-manage-item span {
    color: #6f6240;
}

.rota-manage-item .toolbar {
    margin: 0;
}

.rota-delete-month {
    margin-top: 18px;
    border-top: 1px solid #eee7d1;
    padding-top: 14px;
}

.reset-request-badge {
    display: inline-flex;
    margin-top: 6px;
    border-radius: 999px;
    background: #fff1c2;
    color: #805d12;
    padding: 4px 7px;
    font-size: 11px;
    font-weight: 800;
}

.user-password-reset-card {
    max-width: 720px;
}

.user-actions {
    min-width: 190px;
}

.users-mobile-list {
    display: none;
}

.notebook-paper-card {
    position: relative;
    overflow: hidden;
    border-color: #ddcda1;
    background-color: #fffefa;
    background-image:
        linear-gradient(90deg, transparent 0 52px, rgba(220, 82, 82, .23) 52px 54px, transparent 54px),
        repeating-linear-gradient(180deg, transparent 0 30px, rgba(92, 132, 167, .18) 30px 31px);
    background-position: 0 0, 0 17px;
    box-shadow: 0 16px 34px rgba(104, 76, 28, .12);
}

.notebook-paper-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 12px;
    width: 18px;
    background: repeating-linear-gradient(180deg, #b08a42 0 4px, transparent 4px 15px);
    opacity: .55;
}

.notebook-paper-card .note-view-head,
.notebook-paper-card .note-body,
.notebook-paper-card .note-attachments,
.notebook-paper-card .note-navigation {
    position: relative;
    z-index: 1;
    margin-left: 48px;
}

.note-editor-form textarea {
    border-color: #ddcda1;
    background-color: #fffefa;
    background-image:
        linear-gradient(90deg, transparent 0 34px, rgba(220, 82, 82, .18) 34px 36px, transparent 36px),
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(92, 132, 167, .16) 31px 32px);
    background-position: 0 0, 0 14px;
    padding: 20px 18px 20px 48px;
    line-height: 32px;
    box-shadow: inset 10px 0 0 rgba(247, 240, 214, .55);
}

.rota-view-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 14px 6px 8px;
}

.rota-view-tabs a {
    border: 1px solid #d8c98d;
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    padding: 8px;
    color: #68521a;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.rota-view-tabs a.active {
    border-color: #0f766e;
    background: #e8f4ed;
    color: #0f766e;
}

.rota-period-navigation {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 0 6px 14px;
}

.rota-period-navigation .btn {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 11px;
}

.rota-day-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 6px;
}

.rota-day-entry,
.dashboard-rota-entry {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    border: 1px solid #d7c486;
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    padding: 18px;
    color: #263b34;
}

.rota-day-date {
    display: grid;
    justify-items: center;
    border-radius: 10px;
    background: #e8f4ed;
    padding: 13px 8px;
    color: #0f766e;
}

.rota-day-date strong {
    font-size: 40px;
    line-height: 1;
}

.rota-day-date small {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 800;
}

.rota-day-date em {
    margin-top: 5px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.rota-day-leader {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid #e3d8b3;
    border-radius: 10px;
    background: #fff;
    padding: 15px 17px;
}

.rota-day-leader > small {
    color: #8a6d25;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rota-day-leader > strong {
    color: #163f30;
    font-size: 25px;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
}

.rota-day-leader > span {
    color: #6f6240;
    font-size: 12px;
    font-weight: 800;
}

.rota-day-entry > b {
    border-radius: 999px;
    background: #fff4c7;
    padding: 5px 8px;
    color: #805d12;
    font-size: 10px;
    text-transform: uppercase;
}

.rota-day-empty {
    min-height: 180px;
    display: grid;
    place-content: center;
    justify-items: center;
    border: 1px dashed #cdbb74;
    border-radius: 12px;
    background: rgba(255, 255, 255, .66);
    padding: 22px;
    text-align: center;
}

.rota-day-empty h3 {
    margin-top: 5px;
    color: #263b34;
}

.rota-day-empty p {
    margin: 0 0 12px;
    color: #6f6240;
}

.rota-period-list {
    display: grid;
    gap: 2px;
    max-width: 720px;
    margin: 0 auto;
    border: 1px solid #dfd4ad;
    border-radius: 10px;
    background: rgba(255, 255, 255, .78);
    padding: 9px;
}

.dashboard-rota-today {
    display: grid;
    gap: 13px;
    border-color: #d7c486;
    background: linear-gradient(135deg, #fffdf4, #f5f0d9);
    color: #263b34;
}

.dashboard-rota-today:hover,
.dashboard-rota-today:focus-visible {
    border-color: #b99b3f;
    box-shadow: 0 14px 28px rgba(93, 72, 18, .16);
}

.dashboard-rota-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-rota-head h2 {
    color: #163f30;
    margin: 2px 0 0;
}

.dashboard-rota-entry {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    padding: 13px;
}

.dashboard-rota-entry .rota-day-date {
    padding: 9px 6px;
}

.dashboard-rota-entry .rota-day-date strong {
    font-size: 30px;
}

.dashboard-rota-entry .rota-day-leader > strong {
    font-size: 20px;
}

.dashboard-rota-empty {
    display: grid;
    gap: 4px;
    border: 1px dashed #cdbb74;
    border-radius: 9px;
    background: rgba(255, 255, 255, .64);
    padding: 14px;
}

.dashboard-rota-empty strong {
    color: #163f30;
}

.dashboard-rota-empty span {
    color: #6f6240;
    font-size: 12px;
}

.devotion-rota-link-card {
    display: none;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    border-color: #d7c486;
    background: linear-gradient(135deg, #fffdf4, #f5f0d9);
    color: #263b34;
}

.devotion-rota-link-card:hover,
.devotion-rota-link-card:focus-visible {
    border-color: #b99b3f;
    box-shadow: 0 14px 28px rgba(93, 72, 18, .16);
}

.devotion-link-mark {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #163f30, #0f766e);
    color: #fff;
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 900;
}

.devotion-rota-link-card > span:nth-child(2) {
    display: grid;
    gap: 3px;
}

.devotion-rota-link-card > span:nth-child(2) > strong {
    color: #163f30;
    font-size: 20px;
}

.devotion-rota-link-card small {
    color: #6f6240;
    font-size: 12px;
}

.devotion-rota-link-card > b {
    color: #9a670f;
    font-size: 28px;
}

@media (max-width: 900px) {
    .devotion-rota-page-card .devotion-months {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .devotion-rota-list {
        max-height: 520px;
    }
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 16px;
}

body {
    --page-accent: var(--blue);
    --page-accent-soft: #eef4ff;
}

.page-calendar { --page-accent: #0f766e; --page-accent-soft: #e8f7f3; }
.page-notes { --page-accent: #7c3aed; --page-accent-soft: #f7f3ff; }
.page-accounts { --page-accent: #0f766e; --page-accent-soft: #f0fdfa; }
.page-devotion-rota { --page-accent: #9a670f; --page-accent-soft: #fff9df; }
.page-projects { --page-accent: #1746a2; --page-accent-soft: #eef4ff; }
.page-tasks { --page-accent: #b45309; --page-accent-soft: #fff7e6; }
.page-teams { --page-accent: #7c3aed; --page-accent-soft: #f7f3ff; }
.page-programs { --page-accent: #0f766e; --page-accent-soft: #e8f5ec; }
.page-files { --page-accent: #2563eb; --page-accent-soft: #eff6ff; }
.page-reports { --page-accent: #c2410c; --page-accent-soft: #fff1eb; }
.page-users, .page-activity { --page-accent: #475569; --page-accent-soft: #f1f5f9; }
.page-post-notice, .page-notice { --page-accent: var(--red); --page-accent-soft: #fff1eb; }
.page-share, .page-account { --page-accent: #0f766e; --page-accent-soft: #f0fdfa; }

.content > .page-head:not(.calendar-page-head) {
    position: relative;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 25%, #dbe3ed);
    border-radius: 10px;
    background: linear-gradient(135deg, #fff, var(--page-accent-soft));
    padding: 18px 18px 18px 22px;
    overflow: hidden;
}

.content > .page-head:not(.calendar-page-head)::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--page-accent);
}

.content > .page-head h1 {
    color: #172033;
}

.card {
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

a.card:hover,
a.card:focus-visible,
a.list-item:hover,
a.list-item:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--page-accent) 42%, #dbe3ed);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .1);
}

.record-card {
    position: relative;
    overflow: hidden;
}

.record-card::after {
    content: "";
    position: absolute;
    top: -42px;
    right: -42px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--page-accent) 9%, transparent);
    pointer-events: none;
}

.record-card h2 a,
.record-card > strong {
    color: #172033;
}

.record-card h2 a:hover {
    color: var(--page-accent);
}

.record-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--page-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.record-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 14px 0;
}

.record-metrics > span {
    display: grid;
    gap: 1px;
    border: 1px solid #e0e7f0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    padding: 9px;
    text-align: center;
}

.record-metrics strong {
    color: var(--page-accent);
    font-size: 19px;
}

.record-metrics small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.record-progress {
    height: 8px;
    margin: -5px 0 14px;
    border-radius: 999px;
    overflow: hidden;
    background: #e6ebf2;
}

.record-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--page-accent), #2f9e8f);
}

.rich-list-link {
    position: relative;
    display: grid;
    gap: 5px;
    padding-right: 40px;
    color: var(--ink);
}

.rich-list-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    color: var(--page-accent);
    font-size: 25px;
    font-weight: 800;
    transform: translateY(-50%);
}

.member-preview {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.member-preview p {
    margin: 3px 0 0;
}

.member-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: var(--page-accent-soft);
    color: var(--page-accent);
    font-weight: 900;
}

.notes-filter-card {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    border-color: #e4e8ee;
    background: #f8fafc;
    box-shadow: none;
    padding: 13px 15px;
}

.notes-filter-card .record-kicker {
    color: #7b8798;
    font-size: 10px;
}

.notes-filter-card h2 {
    margin: 2px 0 0;
    color: #475569;
    font-size: 16px;
}

.notes-filter-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.notes-filter-links a {
    border: 1px solid #e0e5ec;
    border-radius: 999px;
    background: #fff;
    padding: 5px 9px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.notes-filter-links a.active {
    border-color: #cbd5e1;
    background: #e9eef5;
    color: #334155;
}

.notes-range-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

.notes-range-form label {
    min-width: 150px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.notes-range-form input {
    margin-top: 5px;
    min-height: 34px;
    padding: 7px 9px;
    background: #fff;
    font-size: 12px;
}

.notes-range-form button {
    min-height: 34px;
    padding: 7px 10px;
    background: #64748b;
    font-size: 12px;
}

.note-view-card {
    padding: 0;
    overflow: hidden;
    border-color: #ddd1ff;
    background: linear-gradient(180deg, #fbf9ff, #fff 30%);
}

.note-view-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e8e1f7;
    background: linear-gradient(135deg, #f7f3ff, #fff);
    padding: 20px 22px;
}

.note-view-head h2 {
    margin-bottom: 5px;
    font-size: 25px;
}

.note-count-chip {
    align-self: flex-start;
    border-radius: 999px;
    background: #ede7ff;
    padding: 6px 10px;
    color: #6d28d9;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.note-view-tools {
    display: grid;
    justify-items: end;
    gap: 9px;
}

.note-actions {
    display: flex;
    gap: 7px;
}

.note-actions form {
    margin: 0;
}

.note-actions .btn,
.note-actions button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
}

.note-body {
    min-height: 180px;
    padding: 24px 22px;
    color: #263247;
    font-size: 16px;
    line-height: 1.75;
    white-space: normal;
}

.notes-search-form {
    display: flex;
    align-self: center;
    gap: 6px;
}

.notes-search-form input {
    width: 180px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
}

.notes-search-form button {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 12px;
}

.note-body mark,
.note-view-head mark,
.note-search-results mark {
    border-radius: 3px;
    background: #fde68a;
    padding: 1px 2px;
    color: inherit;
    scroll-margin-top: 92px;
}

.note-search-results {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.note-search-results-head h2 {
    margin: 3px 0 0;
    font-size: 20px;
}

.note-search-results nav {
    display: grid;
    gap: 12px;
}

.note-search-result {
    overflow: hidden;
    border: 1px solid #e4e8ee;
    border-radius: 10px;
    background: #fff;
}

.note-search-result-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4;
    background: #f8fafc;
    padding: 10px 12px;
    color: #334155;
    font-weight: 800;
}

.note-search-result-title small {
    color: #7b8798;
    font-weight: 700;
    white-space: nowrap;
}

.note-search-locations {
    display: grid;
}

.note-search-locations a {
    border-bottom: 1px solid #f0f2f5;
    padding: 9px 12px;
    color: #52647c;
    font-size: 12px;
    line-height: 1.5;
}

.note-search-locations a:last-child {
    border-bottom: 0;
}

.note-search-locations a:hover,
.note-search-locations a:focus-visible {
    background: #faf8ff;
    color: #6d28d9;
}

.note-view-card.notebook-paper-card {
    background: #fffefa;
}

.note-view-card.notebook-paper-card .note-body {
    line-height: 32px;
    white-space: pre-wrap;
    background-color: rgba(255, 254, 250, .88);
    background-image:
        linear-gradient(90deg, transparent 0 34px, rgba(220, 82, 82, .18) 34px 36px, transparent 36px),
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(92, 132, 167, .22) 31px 32px);
    background-position: 0 0, 0 18px;
    padding: 20px 22px 24px 48px;
}

.note-editor-form textarea {
    line-height: 32px;
    background-image:
        linear-gradient(90deg, transparent 0 34px, rgba(220, 82, 82, .18) 34px 36px, transparent 36px),
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(92, 132, 167, .2) 31px 32px);
    background-position: 0 0, 0 18px;
}

.note-subject-index {
    margin-top: 14px;
    border-color: #ddd1ff;
}

.note-subject-index h2 {
    margin: 0 0 8px;
    color: #6d28d9;
    font-size: 12px;
    letter-spacing: .08em;
}

.note-subject-index nav {
    display: grid;
}

.note-subject-index a {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #ebe6f5;
    padding: 10px 2px;
    color: #1d4ed8;
}

.note-subject-index a span {
    font-weight: 700;
}

.note-subject-index a:hover,
.note-subject-index a:focus-visible {
    color: #6d28d9;
    background: #faf8ff;
}

.note-subject-index a small {
    color: #64748b;
    white-space: nowrap;
}

.demo-readonly-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    border: 1px solid #bfdbfe;
    border-left: 5px solid #2563eb;
    border-radius: 9px;
    background: #eff6ff;
    padding: 10px 13px;
    color: #1e3a8a;
    font-size: 13px;
}

.contents-fieldset {
    display: contents;
}

.user-mobile-readonly {
    border-top: 1px solid #e7edf4;
    background: #f8fafc;
    padding: 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.note-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    border-top: 1px solid #ece7f5;
    padding: 18px 22px;
}

.note-attachment {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: 1px solid #e0d9ef;
    border-radius: 9px;
    background: #fff;
    padding: 8px;
    color: var(--ink);
}

.note-attachment:hover {
    border-color: #bda7f5;
    box-shadow: 0 8px 18px rgba(109, 40, 217, .1);
}

.note-attachment img,
.note-file-icon {
    width: 54px;
    height: 54px;
    border-radius: 7px;
}

.note-attachment img {
    object-fit: cover;
    background: #f1eef8;
}

.note-file-icon {
    display: grid;
    place-items: center;
    border: 1px solid #ddd1ff;
    background: #f7f3ff;
    color: #6d28d9;
    font-size: 10px;
    font-weight: 900;
}

.note-attachment > span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.note-attachment strong {
    overflow-wrap: anywhere;
}

.note-attachment small {
    color: var(--muted);
}

.note-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #e8e1f7;
    background: #faf8ff;
    padding: 14px 22px;
}

.note-navigation > :last-child {
    justify-self: end;
}

.note-navigation > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.note-empty-card {
    min-height: 230px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    border-style: dashed;
    border-color: #cfc1ed;
    background: #fbf9ff;
}

.notes-write-action {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.accounts-layout {
    display: grid;
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.accounts-page-head {
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.accounts-page-head h1 {
    margin: 0 0 2px;
    font-size: 24px;
}

.accounts-page-head p {
    margin: 0;
    font-size: 12px;
}

.account-add-link {
    padding: 7px 10px;
    font-size: 12px;
}

.account-mobile-add {
    display: none;
}

.account-type-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.page-accounts .account-type-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    min-width: 0;
    min-height: 230px;
    align-content: end;
    border-width: 2px;
    border-radius: 18px;
    padding: 28px;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
}

.page-accounts .account-type-card:hover,
.page-accounts .account-type-card:focus-visible {
    border-color: #7db9a4;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .14);
    transform: translateY(-3px);
}

.account-type-card.expense-card {
    border-color: #efc5a9;
    background: linear-gradient(145deg, #fffdfb, #fff0e6);
}

.account-type-card.fund-card {
    border-color: #a9d8c7;
    background: linear-gradient(145deg, #fff, #effbf6);
}

.account-card-icon {
    position: absolute;
    top: 24px;
    right: 26px;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    font-size: 23px;
    font-weight: 900;
}

.expense-card .account-card-icon {
    background: #ffe0cc;
    color: #b54720;
}

.fund-card .account-card-icon {
    background: #ccecdf;
    color: #0f766e;
}

.page-accounts .account-type-card > .record-kicker {
    grid-column: 1 / -1;
    font-size: 13px;
    letter-spacing: .1em;
}

.page-accounts .account-type-card > strong {
    grid-column: 1 / -1;
    display: block;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
}

.account-type-card.expense-card > strong,
.account-type-card.expense-card > b,
.account-type-card.expense-card .record-kicker {
    color: #b54720;
}

.account-type-card.fund-card > strong,
.account-type-card.fund-card > b,
.account-type-card.fund-card .record-kicker {
    color: #0f766e;
}

.page-accounts .account-type-card > small {
    display: block;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.page-accounts .account-type-card > b {
    align-self: end;
    justify-self: end;
    color: #0f766e;
    font-size: 14px;
    white-space: nowrap;
}

.dashboard-accounts-tile {
    display: grid;
    gap: 14px;
    border-color: #b9d8ce;
    background: linear-gradient(135deg, #fff, #effbf6);
    color: var(--ink);
}

.dashboard-accounts-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.dashboard-accounts-head h2 {
    margin-top: 3px;
}

.dashboard-accounts-head > span {
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
}

.dashboard-account-balances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-account-balances > span {
    display: grid;
    gap: 3px;
    border-radius: 9px;
    padding: 10px;
}

.dashboard-account-balances small {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-account-balances strong {
    font-size: 16px;
}

.dashboard-expense-balance {
    background: #fff0e6;
    color: #b54720;
}

.dashboard-fund-balance {
    background: #dff5ec;
    color: #0f766e;
}

.account-small-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}

.account-small-nav a {
    border: 1px solid #d5e3de;
    border-radius: 999px;
    background: #fff;
    padding: 6px 9px;
    color: #52675f;
    font-size: 11px;
    font-weight: 800;
}

.account-small-nav a.active,
.account-small-nav a:hover {
    border-color: #8bc4af;
    background: #effbf6;
    color: #0f766e;
}

.account-type-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .62fr);
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0;
}

.account-type-list-head h2 {
    margin: 3px 0 0;
}

.account-type-title-column,
.account-type-list-summary {
    border: 1px solid #cfdce8;
    border-radius: 12px;
    padding: 14px 16px;
}

.account-type-title-column {
    border-left: 5px solid #475569;
    background: linear-gradient(135deg, #fff, #f1f5f9);
}

.page-accounts .account-type-title-column .record-kicker {
    color: #475569;
}

.account-type-list-summary {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
    border-left: 5px solid #0f766e;
    background: linear-gradient(135deg, #fff, #ecfdf5);
}

.account-type-list-summary > span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.account-type-list-summary > strong {
    color: #0f766e;
    font-size: 25px;
    white-space: nowrap;
}

.account-type-list-summary .account-quick-add {
    min-height: 29px;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    font-size: 10px;
}

.account-fixed-type {
    display: grid;
    gap: 4px;
    border: 1px solid #cde2da;
    border-radius: 9px;
    background: #f7fbf9;
    padding: 12px;
}

.account-fixed-type span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.account-fixed-type strong {
    color: #0f766e;
    font-size: 17px;
}

.account-filtered-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.account-list-card.account-list-expense {
    border-color: #efc5a9;
    background: linear-gradient(180deg, #fff, #fff5ee);
}

.account-list-card.account-list-expense > b,
.account-list-card.account-list-expense .record-kicker {
    color: #b54720;
}

.account-list-card.account-list-fund {
    border-color: #a9d8c7;
    background: linear-gradient(180deg, #fff, #effbf6);
}

.account-list-card.account-list-fund > b,
.account-list-card.account-list-fund .record-kicker {
    color: #0f766e;
}

.account-list {
    display: grid;
    gap: 9px;
}

.account-list-card {
    display: grid;
    gap: 5px;
    color: var(--text);
}

.account-list-card:hover,
.account-list-card:focus-visible,
.account-list-card.active {
    border-color: #7db9a4;
    box-shadow: 0 10px 24px rgba(15, 118, 110, .12);
}

.account-list-card.active {
    background: linear-gradient(180deg, #fff, #effbf6);
}

.account-list-card > strong {
    font-size: 16px;
}

.account-list-card > small,
.account-balance small,
.account-summary-grid small {
    color: var(--muted);
}

.account-list-card > b {
    color: #0f766e;
    font-size: 21px;
}

.account-detail-card {
    min-width: 0;
}

.account-detail-expense {
    border-color: #efc5a9;
    box-shadow: inset 5px 0 0 #d97745, var(--shadow);
}

.account-detail-fund {
    border-color: #a9d8c7;
    box-shadow: inset 5px 0 0 #0f766e, var(--shadow);
}

.account-detail-expense .account-balance {
    border-color: #efc5a9;
    background: #fff3eb;
}

.account-detail-expense .account-balance strong {
    color: #b54720;
}

.account-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.account-detail-head h2 {
    margin: 4px 0;
}

.account-balance {
    display: grid;
    flex: 0 0 auto;
    gap: 4px;
    border: 1px solid #b9dfd1;
    border-radius: 10px;
    background: #effbf6;
    padding: 12px 15px;
    text-align: right;
}

.account-balance strong {
    color: #0f766e;
    font-size: 25px;
}

.account-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 15px;
}

.account-summary-grid > div {
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fafbfc;
    padding: 11px;
}

.account-summary-grid strong {
    font-size: 16px;
}

.account-transaction-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(180px, 2fr) auto;
    align-items: end;
    gap: 9px;
    margin-top: 18px;
    border: 1px solid #d8e4df;
    border-radius: 10px;
    background: #f7fbf9;
    padding: 12px;
}

.account-transaction-form label,
.account-editor-form label {
    display: grid;
    gap: 6px;
    color: #425b52;
    font-size: 12px;
    font-weight: 800;
}

.account-transactions {
    margin-top: 20px;
}

.account-transaction {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 11px;
    border-top: 1px solid var(--line);
    padding: 11px 2px;
}

.account-transaction > span:nth-child(2) {
    display: grid;
    gap: 3px;
}

.account-transaction small {
    color: var(--muted);
}

.account-transaction > b {
    white-space: nowrap;
}

.transaction-type {
    border-radius: 999px;
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.transaction-type.deposit {
    background: #e8f5ec;
    color: #167342;
}

.transaction-type.expense,
.transaction-type.withdrawal {
    background: #fff1eb;
    color: #b54720;
}

.account-delete-form {
    margin-top: 20px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.account-editor-card {
    max-width: 760px;
}

.account-type-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.account-type-guide article {
    border: 1px solid #cde2da;
    border-radius: 9px;
    background: #f7fbf9;
    padding: 12px;
}

.account-type-guide strong {
    color: #0f766e;
}

.account-type-guide p {
    margin: 7px 0 0;
    color: #52675f;
    font-size: 12px;
    line-height: 1.45;
}

.account-editor-form textarea {
    min-height: 120px;
}

.account-empty-card {
    text-align: center;
}

.note-editor-card {
    border-color: #ddd1ff;
    background: linear-gradient(180deg, #faf8ff, #fff);
}

.note-editor-form {
    display: grid;
    gap: 16px;
}

.note-editor-form label {
    color: #3b465a;
    font-weight: 800;
}

.note-editor-form input,
.note-editor-form textarea {
    margin-top: 6px;
}

.note-editor-form textarea {
    min-height: 300px;
    line-height: 32px;
}

.note-attachment-drop {
    display: grid;
    gap: 5px;
    border: 2px dashed #c9b8ef;
    border-radius: 10px;
    background: #faf8ff;
    padding: 18px;
}

.note-existing-attachments {
    margin: 0;
    border: 1px solid #e0d9ef;
    border-radius: 10px;
    background: #fbf9ff;
    padding: 14px;
}

.note-existing-attachments legend {
    padding: 0 6px;
    color: #3b465a;
    font-weight: 800;
}

.note-existing-attachments > p {
    margin-top: 0;
}

.note-attachment-removal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 9px;
}

.note-attachment-removal {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid #e0d9ef;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}

.note-attachment-removal img {
    width: 54px;
    height: 54px;
    border-radius: 7px;
    object-fit: cover;
}

.note-attachment-removal > span {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.note-attachment-removal strong {
    overflow-wrap: anywhere;
}

.note-attachment-removal small {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--red);
    font-weight: 800;
}

.note-attachment-removal input {
    width: auto;
    margin: 0;
}

.note-attachment-drop span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.note-upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 9px;
}

.note-upload-preview-item {
    display: grid;
    gap: 6px;
    border: 1px solid #e0d9ef;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.note-upload-preview-item img,
.note-upload-preview-item > strong {
    width: 100%;
    height: 92px;
    border-radius: 6px;
}

.note-upload-preview-item img {
    object-fit: cover;
}

.note-upload-preview-item > strong {
    display: grid;
    place-items: center;
    background: #f2eefb;
    color: #6d28d9;
}

.note-editor-actions {
    position: sticky;
    bottom: 8px;
    justify-content: flex-end;
    border: 1px solid #e0d9ef;
    border-radius: 9px;
    background: rgba(255, 255, 255, .95);
    padding: 11px;
    box-shadow: 0 9px 24px rgba(43, 31, 71, .12);
}

.table-wrap {
    border: 1px solid #dce3ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    overflow: auto;
}

.table-wrap table {
    margin: 0;
}

.table-wrap thead {
    background: var(--page-accent-soft);
}

.table-wrap th {
    color: color-mix(in srgb, var(--page-accent) 76%, #172033);
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.table-wrap tbody tr {
    transition: background .14s ease;
}

.table-wrap tbody tr:hover {
    background: color-mix(in srgb, var(--page-accent-soft) 55%, #fff);
}

.primary-record-cell a {
    color: var(--page-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--page-accent) 35%, transparent);
    text-underline-offset: 3px;
}

.form-grid {
    border-radius: 10px;
}

.card > .form-grid {
    border: 1px solid #e0e7f0;
    background: #fbfcfe;
    padding: 16px;
}

@media (max-width: 760px) {
    .content > .page-head:not(.calendar-page-head) {
        padding: 15px 14px 15px 18px;
    }

    .page-notes .content > .page-head {
        margin-bottom: 10px;
        padding: 10px 12px 10px 16px;
    }

    .page-notes .content > .page-head .section-kicker {
        font-size: 10px;
    }

    .page-notes .content > .page-head h1 {
        margin-bottom: 2px;
        font-size: 22px;
    }

    .page-notes .content > .page-head p {
        margin: 0;
        font-size: 11px;
        line-height: 1.3;
    }

    .record-metrics {
        gap: 5px;
    }

    .record-metrics > span {
        padding: 7px 4px;
    }

    .record-card .toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notes-filter-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notes-filter-links a {
        text-align: center;
    }

    .notes-range-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .notes-range-form button {
        grid-column: 1 / -1;
    }

    .note-view-head {
        display: grid;
        padding: 17px;
    }

    .note-view-head h2 {
        font-size: 23px;
    }

    .note-count-chip {
        justify-self: start;
    }

    .note-view-tools {
        justify-items: start;
    }

    .note-actions {
        width: 100%;
    }

    .note-actions .btn,
    .note-actions form,
    .note-actions button {
        flex: 1;
        width: 100%;
    }

    .note-body,
    .note-attachments,
    .note-navigation {
        padding-left: 17px;
        padding-right: 17px;
    }

    .note-navigation {
        grid-template-columns: 1fr 1fr;
    }

    .note-navigation > span {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
    }

    .note-navigation > .btn {
        grid-row: 2;
        width: 100%;
    }

    .note-editor-form textarea {
        min-height: 230px;
    }

    .note-editor-actions {
        bottom: 64px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .accounts-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .accounts-page-head {
        display: flex;
        padding: 9px 11px !important;
    }

    .accounts-page-head h1 {
        font-size: 20px;
    }

    .account-type-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .page-accounts .account-type-card {
        min-height: 155px;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        border-radius: 12px;
        padding: 12px;
    }

    .account-card-icon {
        top: 10px;
        right: 10px;
        width: 31px;
        height: 31px;
        border-radius: 9px;
        font-size: 14px;
    }

    .page-accounts .account-type-card > .record-kicker {
        max-width: calc(100% - 34px);
        font-size: 9px;
    }

    .page-accounts .account-type-card > strong {
        font-size: 20px;
    }

    .page-accounts .account-type-card > small {
        font-size: 10px;
        line-height: 1.35;
    }

    .page-accounts .account-type-card > b {
        justify-self: start;
        font-size: 11px;
        white-space: normal;
    }

    .accounts-page-head .account-add-link {
        display: none;
    }

    .page-accounts .content {
        padding-top: 8px;
    }

    .page-accounts .sidebar {
        gap: 6px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .page-accounts .content > .page-controls {
        margin-bottom: 4px;
    }

    .page-accounts .accounts-page-head {
        margin-top: 0;
        margin-bottom: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .account-mobile-add {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .account-mobile-add .btn {
        min-width: 150px;
        text-align: center;
    }

    .account-small-nav {
        gap: 5px;
    }

    .account-small-nav a {
        padding: 5px 7px;
        font-size: 10px;
    }

    .account-filtered-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-type-list-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: 8px;
    }

    .account-type-list-head h2 {
        font-size: 23px;
        line-height: 1.08;
    }

    .account-type-list-summary {
        min-width: 0;
        justify-items: start;
    }

    .account-type-title-column,
    .account-type-list-summary {
        min-height: 132px;
        padding: 12px;
    }

    .account-type-list-summary > strong {
        font-size: 20px;
        line-height: 1.1;
    }

    .account-type-list-summary .account-quick-add {
        max-width: 132px;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
    }

    .account-detail-head {
        display: grid;
    }

    .account-balance {
        width: 100%;
        text-align: left;
    }

    .account-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-type-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-transaction-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-transaction-form .transaction-description,
    .account-transaction-form button {
        grid-column: 1 / -1;
    }

    .account-transaction {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .account-transaction .account-entry-actions {
        grid-column: 2 / -1;
        justify-self: end;
    }

    .stacked-table tbody tr {
        border: 1px solid #dce3ec;
        border-left: 5px solid var(--page-accent);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 7px 18px rgba(15, 23, 42, .07);
        padding: 10px;
    }

    .stacked-table td {
        border-bottom-color: #edf1f6;
    }

    .stacked-table td.primary-record-cell {
        display: block;
        border-bottom: 1px solid #dce3ec;
        background: var(--page-accent-soft);
        margin: -10px -10px 7px;
        padding: 12px 10px;
    }

    .stacked-table td.primary-record-cell::before {
        display: none;
    }
}

.page-option-grid {
    margin-bottom: 16px;
}

.option-card {
    color: var(--ink);
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 150px;
    transition: transform .16s ease, box-shadow .16s ease;
}

.option-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(31, 41, 55, .11);
}

.upload-footer {
    margin-top: 16px;
}

.task-summary {
    margin-bottom: 14px;
}

.file-category-card {
    min-width: 0;
}

.whats-new-card {
    position: relative;
    overflow: hidden;
    border-color: #ffd2c0;
    background: linear-gradient(180deg, #fff, #fff6f2);
}

.whats-new-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--red);
}

.notice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.notice-head h2 {
    color: var(--red);
}

.notice-badge {
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-weight: 800;
}

.notice-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notice-actions .btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
}

.notice-item {
    border: 1px solid #ffd2c0;
    border-radius: 8px;
    background: #fff;
    padding: 11px;
    overflow: auto;
}

.notice-item strong {
    display: block;
    margin-bottom: 5px;
}

.notice-item p {
    margin-bottom: 7px;
}

.notice-date {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 8px;
    background: #d9f3ee;
    color: #0f766e;
    border: 1px solid #a9ddd4;
    padding: 5px 9px;
    font-size: 13px;
    font-weight: 800;
    margin: 2px 8px 0 0;
}

.read-more {
    display: inline-block;
    margin-top: 7px;
    font-weight: 800;
    color: var(--red);
}

.notice-manage-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.notice-manage-actions form {
    margin: 0;
}

.notice-manage-actions .btn,
.notice-manage-actions button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
}

.notice-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
}

.notice-pager a,
.notice-pager span {
    min-height: 30px;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 800;
}

.notice-pager a {
    border: 1px solid #ffd2c0;
    background: #fff;
    color: var(--red);
}

.notice-pager span {
    color: #92400e;
    background: #fff7e6;
}

.notice-detail {
    font-size: 16px;
    line-height: 1.7;
}

.notice-thumb {
    float: left;
    width: 96px;
    height: 78px;
    object-fit: cover;
    margin: 2px 12px 8px 0;
    border-radius: 8px;
    border: 1px solid #ffd2c0;
}

.notice-detail-photo {
    float: left;
    width: min(320px, 48%);
    max-height: 260px;
    object-fit: cover;
    margin: 4px 18px 12px 0;
    border-radius: 10px;
    border: 1px solid #d9f3ee;
    box-shadow: 0 12px 28px rgba(15, 118, 110, .16);
}

.notice-photo-drop {
    border: 1px dashed #9ccbc2;
    border-radius: 10px;
    padding: 14px;
    background: #f1fbf8;
}

.notice-photo-drop span {
    display: block;
    margin: 5px 0 10px;
    color: #0f766e;
    font-size: 14px;
}

.notice-photo-drop.has-photo {
    border-style: solid;
    background: #e4f7f2;
}

.post-notice-card {
    max-width: 720px;
}

.stat {
    display: grid;
    gap: 6px;
    position: relative;
    overflow: hidden;
    color: var(--ink);
}

.stat strong {
    font-size: 28px;
}

.stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--green);
}

.stat-green::before { background: var(--green); }
.stat-blue::before { background: var(--blue); }
.stat-red::before { background: var(--red); }
.stat-gold::before { background: var(--gold); }
.stat-online::before { background: #14b8a6; }

.stat-green { background: linear-gradient(180deg, #ffffff, #f3fbf6); }
.stat-blue { background: linear-gradient(180deg, #ffffff, #f4f7ff); }
.stat-red { background: linear-gradient(180deg, #ffffff, #fff6f2); }
.stat-gold { background: linear-gradient(180deg, #ffffff, #fff9ed); }
.stat-online { background: linear-gradient(180deg, #ffffff, #f0fdfa); }

.stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(31, 41, 55, .11);
}

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.task-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.task-filter a {
    min-height: 40px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    padding: 9px 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.task-filter a.active {
    background: #eef4ff;
    border-color: #c9d8ff;
    color: var(--blue);
}

.task-filter span {
    min-width: 24px;
    min-height: 24px;
    border-radius: 999px;
    background: #e9eef5;
    color: var(--muted);
    display: inline-grid;
    place-items: center;
    padding: 0 7px;
    font-size: 12px;
}

.task-filter a.active span {
    background: var(--blue);
    color: #fff;
}

.btn, button {
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    min-height: 40px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.secondary, button.secondary { background: #e9eef5; color: var(--ink); }
.btn.danger, button.danger { background: var(--red); }
.btn.light { background: #ffffff; color: var(--blue); }
.btn.light-outline {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .46);
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 42px;
    padding: 10px 12px;
    font: inherit;
    font-weight: 400;
    background: #fff;
}

input::placeholder,
textarea::placeholder {
    font-weight: 400;
}

textarea { min-height: 110px; resize: vertical; }
label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }

.password-field {
    position: relative;
    display: block;
}

.password-field input {
    padding-right: 76px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    min-height: 30px;
    border-radius: 6px;
    background: #e9eef5;
    color: var(--ink);
    padding: 5px 9px;
    font-size: 12px;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-line input {
    width: auto;
    min-height: auto;
}

.inline-check {
    margin-top: 2px;
    font-weight: 700;
    color: var(--muted);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.form-grid .full { grid-column: 1 / -1; }

.table-wrap {
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

th, td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

th { font-size: 13px; color: var(--muted); background: #fbfcfe; }

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 700;
    background: #eef2f7;
    color: var(--ink);
}

.badge.completed, .badge.active, .badge.low { background: #e8f5ec; color: var(--green); }
.badge.in-progress, .badge.medium { background: #eef4ff; color: var(--blue); }
.badge.to-do, .badge.planned { background: #fff7e6; color: var(--gold); }
.badge.overdue, .badge.high, .badge.delayed { background: #fff1eb; color: var(--red); }

.list {
    display: grid;
    gap: 10px;
}

.list-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.color-card {
    border-left: 5px solid var(--blue);
    background: #f7faff;
}

.color-card.compact {
    border-radius: 8px;
    padding: 10px;
}

.project-description {
    margin-bottom: 12px;
}

.project-description p {
    margin: 0 0 8px;
}

.project-description summary {
    width: fit-content;
    color: var(--blue);
    font-weight: 700;
    cursor: pointer;
}

.project-description details[open] summary {
    margin-bottom: 8px;
}

.project-discussion-link {
    width: fit-content;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 12px;
    border: 1px solid #c9d8ff;
    border-radius: 8px;
    background: #eef4ff;
    color: var(--blue);
    padding: 8px 11px;
    font-weight: 800;
}

.discussion-icon {
    width: 22px;
    height: 18px;
    border-radius: 8px;
    background: var(--blue);
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.discussion-icon::before,
.discussion-icon::after {
    content: "";
    position: absolute;
    background: #fff;
}

.discussion-icon::before {
    left: 5px;
    right: 5px;
    top: 5px;
    height: 2px;
    box-shadow: 0 5px 0 #fff;
}

.discussion-icon::after {
    left: 4px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: var(--blue);
}

.dept-1 { border-left-color: #2563eb; background: #f7faff; }
.dept-2 { border-left-color: #2f855a; background: #f7fcf9; }
.dept-3 { border-left-color: #b7791f; background: #fff9ed; }
.dept-4 { border-left-color: #7c3aed; background: #f7f3ff; }
.dept-5 { border-left-color: #c2410c; background: #fff6f2; }
.dept-0 { border-left-color: #667085; background: #f9fafb; }

.attention-card {
    padding: 0;
    overflow: hidden;
}

.attention-head {
    background: #fff7e6;
    border-bottom: 1px solid #f6dfad;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.attention-head a {
    font-weight: 700;
    white-space: nowrap;
}

.attention-card .list {
    padding: 14px;
}

.section-kicker {
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.attention-item {
    border-left-width: 5px;
}

.attention-item.priority-high {
    border-left-color: var(--red);
    background: #fff8f5;
}

.attention-item.priority-medium {
    border-left-color: var(--blue);
    background: #f7faff;
}

.attention-item.priority-low {
    border-left-color: var(--green);
    background: #f7fcf9;
}

.attention-item.is-overdue {
    border-left-color: var(--red);
    background: #fff1eb;
}

.task-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 9px;
    align-items: center;
}

.comment-callout {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    color: #8a6d3b;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.comment-callout::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d6a84f;
    margin-right: 4px;
}

.events-strip {
    margin-top: 0;
}

.event-card {
    border: 1px solid #dbe6ff;
    border-radius: 8px;
    background: #f7faff;
    padding: 12px;
    display: grid;
    gap: 6px;
}

.upcoming-event-list {
    display: grid;
    gap: 10px;
}

.event-preview-card {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 0;
    overflow: hidden;
    color: var(--ink);
    background: linear-gradient(135deg, #fff 0%, #f5f9ff 100%);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.event-preview-card:hover,
.event-preview-card:focus-visible {
    transform: translateY(-2px);
    border-color: #9fb8ec;
    box-shadow: 0 12px 26px rgba(23, 70, 162, .12);
}

.event-preview-date {
    align-self: stretch;
    display: grid;
    place-content: center;
    justify-items: center;
    min-height: 104px;
    background: linear-gradient(160deg, #1746a2, #2563b8);
    color: #fff;
    text-align: center;
}

.event-preview-date small {
    color: #dbe8ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.event-preview-date strong {
    color: #fff;
    font-size: 30px;
    line-height: 1;
}

.event-preview-date em {
    margin-top: 5px;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.event-preview-content {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px 0;
}

.event-preview-kicker {
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.event-preview-title {
    color: var(--ink);
    font-size: 17px;
}

.event-preview-description {
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}

.event-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

.event-preview-meta > span {
    border-radius: 999px;
    background: #e9f0fb;
    padding: 4px 8px;
    color: #41536d;
    font-size: 11px;
    font-weight: 700;
}

.event-preview-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 14px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.event-preview-link b {
    font-size: 22px;
    line-height: 1;
}

.event-date {
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.event-row {
    border-left: 3px solid var(--blue);
}

.calendar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.calendar-top h2 {
    text-align: center;
}

.calendar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.calendar-head > * {
    min-width: 0;
}

.calendar-view-tabs,
.calendar-scope-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.calendar-view-tabs {
    justify-content: center;
    margin-top: 8px;
}

.calendar-nav-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.calendar-nav-buttons .btn {
    min-height: 30px;
    padding: 6px 10px;
    border-color: #d7dee8;
    background: #f7faff;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.calendar-view-tabs a {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    background: #fff;
}

.calendar-view-tabs a.active {
    background: #eef4ff;
    border-color: #c9d8ff;
    color: var(--blue);
}

.calendar-scope-actions {
    margin: 6px 0 10px;
}

.calendar-scope-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.calendar-user-select-form select {
    width: auto;
    max-width: 100%;
    min-width: 170px;
    min-height: 32px;
    border-color: transparent;
    background: #e9eef5;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.calendar-share-box {
    border: 1px solid #dbe6ff;
    border-radius: 8px;
    background: #f8fbff;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 16px;
}

.calendar-card {
    overflow: hidden;
}

.calendar-share-box strong,
.calendar-share-box small {
    display: block;
}

.external-calendar {
    border: 1px solid #dbe6ff;
    border-radius: 8px;
    background: #f7faff;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.calendar-day-name,
.calendar-cell {
    min-height: 96px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 9px;
    background: #fff;
}

.calendar-day-name {
    min-height: auto;
    background: #f7faff;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.calendar-day-name.sunday-name {
    background: #fff1eb;
    color: var(--red);
}

.calendar-cell.today {
    background: #fff9ed;
}

.calendar-cell.sunday-cell,
.calendar-cell.holiday-cell {
    background: #fff7f5;
}

.calendar-cell.sunday-cell .calendar-day-link,
.calendar-cell.holiday-cell .calendar-day-link {
    color: var(--red);
}

.calendar-day-link {
    color: var(--ink);
    font-weight: 700;
}

.muted-cell {
    background: #f9fafb;
}

.event-pill {
    margin-top: 6px;
    border-radius: 6px;
    padding: 5px 7px;
    background: #eef4ff;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.event-pill span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 2px;
}

.event-pill.private {
    background: #fff1eb;
    color: var(--red);
}

.event-pill.holiday-event-pill {
    background: #fff1eb;
    color: var(--red);
}

.year-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.year-month {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px 12px;
    background: #fff;
    overflow: hidden;
}

.year-month > a {
    display: block;
    margin: 0 -12px 10px;
    padding: 10px 12px;
    color: var(--ink);
    font-weight: 700;
}

.month-card-1 { border-color: #bfe4ca; }
.month-card-1 > a { background: #e8f5ec; }
.month-card-2 { border-color: #c9d8ff; }
.month-card-2 > a { background: #eef4ff; }
.month-card-3 { border-color: #f6dfad; }
.month-card-3 > a { background: #fff7e6; }
.month-card-4 { border-color: #ffd2c0; }
.month-card-4 > a { background: #fff1eb; }
.month-card-5 { border-color: #ddd1ff; }
.month-card-5 > a { background: #f7f3ff; }
.month-card-6 { border-color: #bfe7e2; }
.month-card-6 > a { background: #f0fdfa; }
.month-card-7 { border-color: #d7dee8; }
.month-card-7 > a { background: #f4f6f9; }
.month-card-8 { border-color: #f0d7a4; }
.month-card-8 > a { background: #fff9ed; }
.month-card-9 { border-color: #c7e2f1; }
.month-card-9 > a { background: #eff8ff; }
.month-card-10 { border-color: #e4d2b8; }
.month-card-10 > a { background: #fbf4ec; }
.month-card-11 { border-color: #cfe3bb; }
.month-card-11 > a { background: #f3faee; }
.month-card-12 { border-color: #d4d6f0; }
.month-card-12 > a { background: #f4f5ff; }

.year-event {
    border-left: 3px solid var(--blue);
    padding-left: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.year-event.holiday-event {
    border-left-color: var(--red);
}

.year-event.holiday-event strong,
.year-event.holiday-event a {
    color: var(--red);
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.week-day {
    min-height: 220px;
    border-right: 1px solid var(--line);
    padding: 10px;
    background: #fff;
}

.week-day:last-child {
    border-right: 0;
}

.week-day.today {
    background: #fff9ed;
}

.week-day > strong {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.week-day > strong span {
    color: var(--blue);
    font-size: 20px;
}

.day-panel {
    display: grid;
    gap: 10px;
}

.event-detail-card {
    border: 1px solid #c9d8ff;
    border-radius: 8px;
    background: linear-gradient(180deg, #f7faff 0%, #ffffff 46%);
    box-shadow: 0 18px 42px rgba(31, 41, 55, .12);
    overflow: hidden;
}

.event-detail-card.holiday-detail {
    border-color: #ffd2c0;
    background: linear-gradient(180deg, #fff1eb 0%, #ffffff 46%);
}

.event-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 24px;
    background: linear-gradient(135deg, #1746a2, #0f766e);
    color: #fff;
}

.holiday-detail .event-detail-hero {
    background: linear-gradient(135deg, #c2410c, #b45309);
}

.event-detail-hero h2 {
    margin: 4px 0 6px;
    color: #fff;
    font-size: 30px;
}

.event-detail-hero p,
.event-detail-kicker {
    color: rgba(255, 255, 255, .88);
}

.event-detail-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.event-detail-chip {
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    padding: 6px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.event-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 24px 6px;
}

.event-detail-edit-form {
    padding: 20px 24px 24px;
}

.event-editor-card {
    background: #f4f7fb;
}

.event-editor-card.personal-editor .event-editor-hero {
    background: linear-gradient(135deg, #0f766e, #15803d);
}

.event-editor-form {
    display: grid;
    gap: 16px;
}

.event-editor-section {
    border: 1px solid #dce4ef;
    border-radius: 10px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .05);
}

.event-editor-details {
    border-top: 4px solid #1746a2;
}

.event-editor-schedule {
    border-top: 4px solid #0f766e;
}

.event-editor-related {
    border-top: 4px solid #b45309;
}

.event-editor-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.event-editor-section-head > span {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: #e8efff;
    color: #1746a2;
    font-weight: 900;
}

.event-editor-schedule .event-editor-section-head > span {
    background: #dff6f1;
    color: #0f766e;
}

.event-editor-related .event-editor-section-head > span {
    background: #fff1d6;
    color: #9a4d06;
}

.event-editor-section-head h3 {
    margin: 0 0 2px;
    color: var(--ink);
    font-size: 18px;
}

.event-editor-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.event-editor-form label {
    color: #334155;
    font-weight: 800;
}

.event-editor-form input,
.event-editor-form select,
.event-editor-form textarea {
    margin-top: 6px;
    border-color: #cdd8e6;
    background: #fbfdff;
}

.event-editor-form input:focus,
.event-editor-form select:focus,
.event-editor-form textarea:focus {
    border-color: #6d91d8;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(23, 70, 162, .1);
}

.event-editor-privacy {
    align-items: flex-start;
    border: 1px solid #dbe6ff;
    border-radius: 8px;
    background: #f6f9ff;
    padding: 12px;
}

.event-editor-privacy span {
    display: grid;
    gap: 2px;
}

.event-editor-privacy small {
    color: var(--muted);
    font-weight: 500;
}

.event-editor-actions {
    position: sticky;
    bottom: 8px;
    z-index: 3;
    justify-content: flex-end;
    border: 1px solid #d5dfec;
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    padding: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
    backdrop-filter: blur(8px);
}

.calendar-add-action {
    margin-top: 16px;
}

.event-detail-grid > div {
    border: 1px solid #e1e7f0;
    border-radius: 8px;
    background: #fff;
    padding: 12px;
}

.event-detail-grid span,
.event-detail-note span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.event-detail-grid strong {
    color: var(--ink);
}

.event-detail-note {
    margin: 12px 24px;
    border-left: 4px solid #0f766e;
    border-radius: 8px;
    background: #f0fdfa;
    padding: 14px 16px;
}

.event-detail-note p {
    margin: 0;
}

.event-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 24px 16px;
}

.event-detail-card > p,
.event-detail-actions {
    margin-left: 24px;
    margin-right: 24px;
}

.event-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0 22px;
    border-top: 1px solid #e1e7f0;
}

.share-card {
    border-color: #dbe6ff;
    background: #f8fbff;
}

.upload-zone {
    border: 2px dashed #b8c7ee;
    border-radius: 8px;
    padding: 18px;
    background: #fff;
}

.upload-progress {
    width: 100%;
    height: 28px;
    margin-top: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: #e9eef5;
}

.upload-progress span {
    width: 0;
    height: 100%;
    min-width: 38px;
    display: grid;
    place-items: center;
    background: var(--blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: width .2s ease;
}

.file-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.files-project-grid {
    grid-template-columns: 1fr;
}

.file-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    padding: 10px;
    display: grid;
    gap: 7px;
}

.file-group strong {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.file-group-heading {
    align-items: center;
}

.file-folder-label {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.folder-icon {
    width: 28px;
    height: 22px;
    border: 1px solid #d8a617;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    flex: 0 0 auto;
    background: linear-gradient(180deg, #ffd866, #f2b72b);
    box-shadow: inset 0 -2px 0 rgba(130, 86, 8, .12);
}

.folder-icon::before {
    content: "";
    position: absolute;
    left: 3px;
    top: -5px;
    width: 13px;
    height: 6px;
    border: 1px solid #d8a617;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: #ffd866;
}

.folder-icon::after {
    position: absolute;
    right: 3px;
    bottom: 3px;
    color: #7a4f00;
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
}

.folder-documents::after { content: "DOC"; }
.folder-photographs::after { content: "IMG"; }
.folder-videos::after { content: "VID"; }

.file-group span {
    color: var(--blue);
}

.file-group a,
.file-group small {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.file-actions {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.file-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
}

.file-thumb-image {
    display: block;
    background: #eef2f7;
}

.file-thumb-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.file-thumb-icon {
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    background: #f8fafc;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
}

.file-type-pdf { background: #fff1eb; color: var(--red); border-color: #ffd2c0; }
.file-type-word { background: #eef4ff; color: var(--blue); border-color: #c9d8ff; }
.file-type-excel { background: #e8f5ec; color: var(--green); border-color: #bfe4ca; }
.file-type-video { background: #f7f3ff; color: #7c3aed; border-color: #ddd1ff; }
.file-type-text { background: #f9fafb; color: var(--muted); }

.file-details {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.file-name {
    min-width: 0;
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.file-group .file-name {
    color: var(--ink);
}

.file-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.file-btn {
    min-height: 26px;
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
}

.signout-btn {
    margin-top: 6px;
    width: 100%;
}

.online-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.online-chip {
    border: 1px solid #bfe4ca;
    border-radius: 999px;
    background: #e8f5ec;
    color: var(--green);
    padding: 7px 10px;
    font-weight: 700;
}

.online-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
    margin-right: 7px;
}

.online-chip small {
    color: var(--green);
    font-weight: 400;
}

.comment {
    border-left: 3px solid var(--green);
    padding-left: 12px;
}

.comment p {
    margin-bottom: 6px;
}

.inline-comment-form {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.inline-comment-form textarea {
    min-height: 72px;
}

.inline-comment-form button {
    width: fit-content;
    min-height: 34px;
    padding: 7px 11px;
    font-size: 13px;
}

.primary-comment-form {
    margin-bottom: 12px;
}

.reply-form {
    margin-top: 8px;
}

.reply-form textarea {
    min-height: 52px;
}

.reply-form button {
    min-height: 30px;
    padding: 6px 10px;
}

.task-detail-comment {
    border-top: 1px solid var(--line);
    margin-top: 16px;
    padding-top: 14px;
}

.task-detail-comment h3 {
    font-size: 16px;
}

.task-comment-thread {
    border-top: 1px solid var(--line);
    margin-top: 16px;
    padding-top: 14px;
}

.task-comment-thread h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.comment-thread-list {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.thread-comment {
    position: relative;
    border-left-color: #c9d8ff;
    background: #f8fbff;
    border-radius: 0 8px 8px 0;
    margin-left: calc(var(--comment-depth, 0) * 18px);
    padding: 10px 12px 10px 14px;
}

.thread-comment::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 15px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
}

.comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    margin-top: 7px;
}

.comment-actions details {
    min-width: min(260px, 100%);
}

.quiet-comment-actions {
    align-items: baseline;
}

.quiet-comment-actions .comment-edit-details {
    min-width: 0;
}

.comment-actions summary {
    width: fit-content;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.quiet-delete-form {
    margin: 0;
}

.text-link {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.danger-link {
    color: #9a6a5a;
}

.edit-comment-form textarea {
    min-height: 58px;
}

.task-report-card {
    margin-top: 16px;
}

.task-report-list {
    margin-top: 14px;
}

.report-link-list {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.report-link-list a {
    min-height: 34px;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: 7px 9px;
    font-weight: 700;
}

.flash {
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    background: #e8f5ec;
    color: var(--green);
    border: 1px solid #bfe4ca;
}

.flash.error {
    background: #fff1eb;
    border-color: #ffd2c0;
    color: var(--red);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #eef7f1, #f8fbff);
}

.login-card {
    width: min(440px, 100%);
}

.login-remember {
    font-weight: 700;
    color: var(--muted);
}

.landing-page {
    min-height: 100vh;
    background:
        linear-gradient(115deg, rgba(37, 99, 235, .14) 0 18%, transparent 18% 100%),
        linear-gradient(245deg, rgba(20, 184, 166, .18) 0 16%, transparent 16% 100%),
        linear-gradient(135deg, #f8fbff 0%, #eef7f1 56%, #fff8ec 100%);
}

.landing-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0;
}

.landing-hero {
    min-height: calc(100vh - 68px);
    border-radius: 14px;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .84)),
        linear-gradient(135deg, rgba(22, 63, 48, .08), rgba(37, 99, 235, .06));
    border: 1px solid rgba(148, 163, 184, .26);
    box-shadow: 0 28px 70px rgba(15, 23, 42, .12);
    padding: clamp(24px, 4vw, 54px);
    display: grid;
    align-content: space-between;
    gap: 34px;
    overflow: hidden;
}

.landing-hero > * {
    position: relative;
    z-index: 1;
}

.landing-brand {
    width: fit-content;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(148, 163, 184, .24);
}

.landing-kicker {
    display: block;
    color: #0f766e;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .08em;
}

.landing-hero h1 {
    max-width: 820px;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.02;
    margin-bottom: 18px;
}

.landing-hero p {
    max-width: 660px;
    color: #475569;
    font-size: 20px;
    line-height: 1.55;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.landing-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 980px;
}

.landing-highlights div {
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
}

.landing-highlights strong,
.landing-highlights span {
    display: block;
}

.landing-highlights span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 860px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: start;
    }
    .sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        background:
            linear-gradient(135deg, rgba(232, 245, 236, .85), rgba(238, 244, 255, .86)),
            #fff;
    }
    .menu-toggle {
        display: inline-flex;
        border: 1px solid #c9d8ff;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
    }
    .sidebar-menu {
        display: none;
        overflow: visible;
        padding-right: 0;
    }
    .sidebar.open .sidebar-menu {
        display: flex;
        border-radius: 8px;
        background: rgba(255, 255, 255, .72);
        padding: 12px;
        box-shadow: inset 0 0 0 1px rgba(201, 216, 255, .7);
    }
    .nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        border-color: rgba(215, 222, 232, .88);
        background: #fff;
        box-shadow: 0 8px 18px rgba(31, 41, 55, .06);
        font-weight: 700;
        line-height: 1.15;
        border-left-width: 1px;
        border-bottom-width: 1px;
    }
    .nav a:nth-child(2n) {
        background: #f0fdfa;
        border-color: #bfe7e2;
    }
    .nav a:nth-child(3n) {
        background: #fff9ed;
        border-color: #f0d7a4;
    }
    .nav a:nth-child(4n) {
        background: #fff1eb;
        border-color: #ffd2c0;
    }
    .nav a.active,
    .nav a:hover {
        background: #eef4ff;
        border-color: #9ebcff;
        color: var(--blue);
        box-shadow: 0 10px 22px rgba(37, 99, 235, .14);
    }
    .profile-chip {
        border: 1px solid #dbe6ff;
        border-radius: 8px;
        background: #fff;
        padding: 14px;
        box-shadow: 0 8px 20px rgba(31, 41, 55, .06);
    }

    .in-app-notification {
        align-items: stretch;
    }
    .profile-chip > span {
        font-weight: 800;
    }
    .content { padding: 16px; }
    .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5, .form-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-priority {
        grid-template-columns: 1fr;
    }
    .dashboard-priority .dashboard-hero,
    .dashboard-priority .dashboard-rota-today,
    .dashboard-priority .dashboard-accounts-tile,
    .dashboard-priority .devotion-rota-link-card,
    .dashboard-priority .whats-new-card,
    .dashboard-priority .task-views-card,
    .dashboard-priority .events-strip,
    .dashboard-priority .attention-card,
    .dashboard-priority .dashboard-stats,
    .dashboard-priority .dashboard-stats .stat-online {
        grid-column: auto;
        grid-row: auto;
    }
    .dashboard-priority .dashboard-hero {
        order: 1;
    }
    .dashboard-priority .dashboard-accounts-tile {
        order: 2;
    }
    .dashboard-priority .whats-new-card {
        display: grid;
        order: 3;
    }
    .dashboard-priority .dashboard-rota-today {
        order: 4;
    }
    .dashboard-priority .attention-card {
        order: 5;
    }
    .dashboard-priority .task-views-card {
        order: 6;
    }
    .dashboard-priority .events-strip {
        order: 7;
    }
    .dashboard-priority .dashboard-stats {
        order: 8;
    }
    .page-head {
        display: grid;
        gap: 8px;
        margin-bottom: 10px;
    }
    .calendar-page-head h1 {
        font-size: 24px;
        margin-bottom: 0;
    }
    .compact-page-head {
        margin-bottom: 8px;
    }
    .page-controls {
        display: none;
    }
    .task-summary.grid.cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 7px;
    }
    .task-summary .stat {
        min-height: 76px;
        padding: 9px 5px 9px 9px;
    }
    .task-summary .stat strong {
        font-size: 21px;
    }
    .task-summary .stat .muted {
        font-size: 11px;
        line-height: 1.15;
    }
    .report-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px;
    }
    .report-stat-grid .stat {
        min-height: 86px;
        padding: 11px 8px 11px 12px;
    }
    .report-stat-grid .stat strong {
        font-size: 23px;
    }
    .report-stat-grid .stat .muted {
        font-size: 12px;
        line-height: 1.2;
    }
    .mobile-footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px 10px;
        margin-top: 24px;
        padding: 16px 8px 8px;
        border-top: 1px solid #b7c5d8;
        background: #dce7f3;
        border-radius: 10px 10px 0 0;
    }
    .mobile-footer-nav a,
    .mobile-footer-nav button {
        width: auto;
        min-height: 32px;
        padding: 7px 9px;
        border-radius: 8px;
        background: #ffffff;
        color: #0f172a;
        font-size: 13px;
        font-weight: 800;
        border: 1px solid #9fb0c5;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
    }
    .mobile-footer-nav button {
        color: #ffffff;
        background: #0f766e;
        border-color: #0f766e;
    }
    .mobile-footer-nav .mobile-home-button,
    .mobile-footer-nav .mobile-back-button {
        background: var(--blue);
        border-color: var(--blue);
        color: #ffffff;
    }
    .calendar-head,
    .calendar-top,
    .calendar-share-box {
        display: grid;
    }
    .event-detail-hero {
        display: grid;
        padding: 18px;
    }
    .event-detail-hero h2 {
        font-size: 24px;
    }
    .event-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px 18px 4px;
    }
    .event-detail-note {
        margin: 12px 18px;
    }
    .event-detail-tags {
        padding: 4px 18px 14px;
    }
    .event-detail-card > p,
    .event-detail-actions {
        margin-left: 18px;
        margin-right: 18px;
    }
    .calendar-scope-actions,
    .calendar-view-tabs {
        width: 100%;
    }

    .calendar-scope-primary {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr) minmax(0, 1fr);
        width: 100%;
        gap: 6px;
    }

    .calendar-scope-primary > .btn,
    .calendar-scope-primary > .calendar-user-select-form,
    .calendar-scope-primary .calendar-user-select-form select {
        width: 100%;
        min-width: 0;
    }

    .calendar-scope-primary > .btn,
    .calendar-scope-primary .calendar-user-select-form select {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 12px;
    }

    .event-detail-edit-form {
        padding: 18px;
    }

    .event-editor-section {
        padding: 14px;
    }

    .event-editor-section .form-grid {
        grid-template-columns: 1fr;
    }

    .event-editor-section-head h3 {
        font-size: 17px;
    }

    .event-editor-actions {
        bottom: 64px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .event-preview-card {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
    }

    .event-preview-date {
        min-height: 118px;
    }

    .event-preview-date strong {
        font-size: 26px;
    }

    .event-preview-content {
        padding: 10px 10px 10px 0;
    }

    .event-preview-link {
        grid-column: 2;
        justify-self: start;
        margin-top: -8px;
        padding: 0 10px 10px 0;
    }
    .calendar-top h2,
    .calendar-view-tabs {
        justify-content: start;
        text-align: left;
    }
    .calendar-nav-buttons {
        justify-content: start;
    }
    .dashboard-hero {
        display: grid;
        align-items: start;
        padding: 20px;
    }
    .devotion-rota-card {
        padding: 14px;
    }
    .devotion-rota-head {
        display: grid;
        gap: 8px;
    }
    .devotion-rota-head h2 {
        font-size: 23px;
    }
    .devotion-time {
        justify-self: start;
    }
    .devotion-rota-card blockquote {
        margin: 11px 4px;
        padding: 9px 11px;
        font-size: 12px;
    }
    .devotion-months {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding-left: 4px;
    }
    .devotion-rota-page-card .rota-week-view,
    .devotion-rota-page-card .rota-month-view,
    .devotion-rota-page-card .rota-year-view {
        grid-template-columns: minmax(0, 1fr);
    }
    .rota-week-view .devotion-period-card:nth-child(n + 2),
    .rota-month-view .devotion-period-card:nth-child(n + 2) {
        display: none;
    }
    .rota-year-view .devotion-period-card {
        border-width: 0 0 1px;
        border-radius: 0;
        background: transparent;
    }
    .rota-year-view .devotion-period-card summary {
        border-top: 2px solid #cfb968;
        border-bottom: 1px solid #e5dcc0;
        background: #fff9df;
        padding: 12px 9px;
    }
    .rota-year-view .devotion-period-card:first-child summary {
        border-top: 0;
    }
    .devotion-month summary {
        display: grid;
        padding: 9px;
        font-size: 12px;
    }
    .devotion-rota-row {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 7px;
        padding: 7px 2px;
    }
    .devotion-rota-row > em {
        grid-column: 2;
        justify-self: start;
    }
    .devotion-date {
        padding: 5px 3px;
    }
    .devotion-date strong {
        font-size: 17px;
    }
    .devotion-rota-row > span:nth-child(2) small {
        font-size: 9px;
        line-height: 1.2;
    }
    .devotion-rota-row > span:nth-child(2) strong {
        font-size: 11px;
        line-height: 1.25;
    }
    .rota-view-tabs {
        margin-left: 4px;
        margin-right: 4px;
    }
    .rota-period-navigation {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-left: 4px;
        margin-right: 4px;
    }
    .rota-period-navigation .btn {
        width: 100%;
        text-align: center;
    }
    .rota-day-entry {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }
    .rota-day-date {
        padding: 10px 5px;
    }
    .rota-day-date strong {
        font-size: 31px;
    }
    .rota-day-date small,
    .rota-day-date em {
        font-size: 9px;
    }
    .rota-day-leader > strong {
        font-size: 18px;
        line-height: 1.25;
    }
    .rota-day-leader {
        padding: 12px;
    }
    .rota-day-entry > b {
        grid-column: 2;
        justify-self: start;
    }
    .dashboard-rota-today {
        padding: 14px;
    }
    .dashboard-rota-head h2 {
        font-size: 22px;
    }
    .dashboard-rota-entry {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 11px;
        padding: 10px;
    }
    .dashboard-rota-entry .rota-day-date {
        padding: 9px 4px;
    }
    .dashboard-rota-entry .rota-day-date strong {
        font-size: 27px;
    }
    .dashboard-rota-entry .rota-day-leader {
        padding: 11px;
    }
    .dashboard-rota-entry .rota-day-leader > strong {
        font-size: 18px;
    }
    .devotion-rota-link-card {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        min-height: 82px;
        padding: 12px;
    }
    .devotion-link-mark {
        width: 46px;
        height: 46px;
        font-size: 14px;
    }
    .devotion-rota-link-card > span:nth-child(2) > strong {
        font-size: 17px;
    }
    .devotion-rota-link-card small {
        font-size: 11px;
        line-height: 1.3;
    }
    .dashboard-hero h1 {
        font-size: 32px;
    }
    .title-desktop { display: none; }
    .title-mobile { display: inline; }
    .hero-actions {
        justify-content: start;
    }
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .year-grid,
    .week-grid {
        grid-template-columns: 1fr;
    }
    .week-day {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .week-day:last-child {
        border-bottom: 0;
    }
    .calendar-day-name {
        display: block;
        min-height: auto;
        padding: 6px 3px;
        text-align: center;
        font-size: 10px;
    }
    .calendar-cell,
    .calendar-cell.muted-cell {
        min-height: 72px;
        padding: 5px 4px;
    }
    .calendar-day-link {
        font-size: 13px;
    }
    .event-pill {
        margin-top: 4px;
        padding: 4px 5px;
        font-size: 10px;
        line-height: 1.2;
    }
    .event-pill span {
        font-size: 9px;
    }
    .file-groups {
        grid-template-columns: 1fr;
    }
    .external-calendar {
        display: grid;
    }
    .landing-hero {
        min-height: auto;
    }
    .landing-highlights {
        grid-template-columns: 1fr;
    }
    .landing-hero h1 {
        font-size: 34px;
    }
}

@media (max-width: 520px) {
    .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nav a {
        white-space: nowrap;
        font-size: 15px;
        padding: 10px 11px;
    }
    .toolbar .btn, .toolbar button { width: 100%; }
    .task-filter a { width: 100%; justify-content: space-between; }
    .hero-actions .btn { width: 100%; }
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    .report-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .task-summary.grid.cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 5px;
    }
    .task-summary .stat {
        min-height: 68px;
        padding: 8px 4px 8px 8px;
    }
    .task-summary .stat strong {
        font-size: 18px;
    }
    .task-summary .stat .muted {
        font-size: 10px;
    }
    .dashboard-priority .dashboard-stats {
        grid-template-columns: 1fr;
    }
    .calendar-day-name {
        font-size: 9px;
        padding: 5px 2px;
    }
    .calendar-cell,
    .calendar-cell.muted-cell {
        min-height: 60px;
        padding: 4px 3px;
    }
    .calendar-day-link {
        font-size: 12px;
    }
    .event-pill {
        border-radius: 4px;
        padding: 3px 4px;
        font-size: 9px;
    }
    .event-pill span {
        font-size: 8px;
    }
    .event-detail-grid {
        grid-template-columns: 1fr;
    }
    .event-detail-actions .btn,
    .event-detail-actions button {
        width: 100%;
    }
    .compact-page-head .btn,
    .calendar-scope-actions > .compact-control {
        width: auto;
    }
    .calendar-scope-actions {
        gap: 6px;
    }
    .login-page {
        align-items: start;
        padding-top: 14px;
    }
    .page-users .page-head .btn {
        width: 100%;
    }
    .users-table-wrap { display: none; }
    .users-mobile-list {
        display: grid;
        gap: 12px;
    }
    .user-mobile-card {
        overflow: hidden;
        border: 1px solid #d9e2ec;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 9px 24px rgba(15, 23, 42, .08);
    }
    .user-mobile-card header {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 11px;
        align-items: center;
        border-bottom: 1px solid #e7edf4;
        background: linear-gradient(135deg, #f8fafc, #edf4fb);
        padding: 14px;
    }
    .user-avatar {
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        border-radius: 14px;
        background: #475569;
        color: #fff;
        font-size: 21px;
        font-weight: 900;
    }
    .user-mobile-card h2 {
        margin: 0;
        font-size: 18px;
    }
    .user-mobile-card header p {
        margin: 3px 0 0;
        color: #64748b;
        font-size: 13px;
        overflow-wrap: anywhere;
    }
    .user-mobile-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        background: #e7edf4;
    }
    .user-mobile-meta > div {
        display: grid;
        align-content: start;
        gap: 5px;
        min-height: 72px;
        background: #fff;
        padding: 11px 13px;
    }
    .user-mobile-meta > div.full {
        grid-column: 1 / -1;
        min-height: auto;
    }
    .user-mobile-meta span {
        color: #64748b;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .user-mobile-meta small {
        color: #64748b;
        overflow-wrap: anywhere;
    }
    .user-mobile-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        background: #f8fafc;
    }
    .user-mobile-actions > *,
    .user-mobile-actions .btn,
    .user-mobile-actions button {
        width: 100%;
        margin: 0;
    }
    .user-mobile-actions .full {
        grid-column: 1 / -1;
    }
    .notebook-paper-card {
        padding-left: 10px;
        background-image:
            linear-gradient(90deg, transparent 0 35px, rgba(220, 82, 82, .2) 35px 37px, transparent 37px),
            repeating-linear-gradient(180deg, transparent 0 29px, rgba(92, 132, 167, .16) 29px 30px);
    }
    .notebook-paper-card::before {
        left: 5px;
        width: 13px;
    }
    .notebook-paper-card .note-view-head,
    .notebook-paper-card .note-attachments,
    .notebook-paper-card .note-navigation {
        margin-left: 26px;
    }
    .notebook-paper-card .note-body {
        margin-left: 0;
    }
    .note-view-card.notebook-paper-card .note-body {
        font-size: 15px;
        line-height: 29px;
        background-image:
            linear-gradient(90deg, transparent 0 34px, rgba(220, 82, 82, .18) 34px 36px, transparent 36px),
            repeating-linear-gradient(180deg, transparent 0 28px, rgba(92, 132, 167, .14) 28px 29px);
        background-position: 0 0, 0 12px;
        padding: 16px 14px 20px 46px;
    }
    .note-editor-form textarea {
        font-size: 15px;
        line-height: 29px;
        background-image:
            linear-gradient(90deg, transparent 0 34px, rgba(220, 82, 82, .18) 34px 36px, transparent 36px),
            repeating-linear-gradient(180deg, transparent 0 28px, rgba(92, 132, 167, .14) 28px 29px);
        background-position: 0 0, 0 12px;
        padding-top: 16px;
    }
    .note-editor-actions {
        position: static;
        bottom: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 4px;
        box-shadow: none;
        backdrop-filter: none;
    }
    .notes-search-form {
        width: 100%;
    }
    .notes-search-form input {
        width: auto;
        min-width: 0;
        flex: 1;
    }
    .note-search-result-title {
        display: grid;
        gap: 3px;
    }
    .note-search-result-title small {
        white-space: normal;
    }
    .note-subject-index a {
        display: grid;
        gap: 3px;
    }
    .note-subject-index a small {
        white-space: normal;
    }
    .note-view-head h2 {
        font-size: 23px;
    }
    .note-navigation {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .note-navigation > span {
        order: -1;
        flex: 0 0 100%;
        text-align: center;
    }
    .note-navigation > .btn {
        flex: 1 1 130px;
        width: auto;
        min-width: 0;
        padding-left: 9px;
        padding-right: 9px;
        white-space: nowrap;
        line-height: 1.2;
        text-align: center;
    }
    .demo-readonly-banner {
        display: grid;
    }
    .rota-month-filter,
    .rota-manage-item {
        display: grid;
    }
    .rota-month-filter button,
    .rota-manage-item .toolbar .btn,
    .rota-manage-item .toolbar button {
        width: 100%;
    }
    .in-app-notification {
        display: grid;
    }
    table.stacked-table {
        min-width: 0;
    }
    .stacked-table thead {
        display: none;
    }
    .stacked-table,
    .stacked-table tbody,
    .stacked-table tr,
    .stacked-table td {
        display: block;
        width: 100%;
    }
    .stacked-table tr {
        border-bottom: 1px solid var(--line);
        padding: 10px 0;
    }
    .stacked-table td {
        border-bottom: 0;
        padding: 7px 10px;
    }
    .stacked-table td::before {
        content: attr(data-label);
        display: block;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 3px;
    }
    .stacked-table td.empty-link-cell {
        display: none;
    }
    .task-detail-comment {
        margin-top: 10px;
        padding-top: 10px;
    }
    .task-detail-comment h3,
    .task-report-card h2 {
        font-size: 15px;
        margin-bottom: 6px;
    }
    .task-detail-comment .inline-comment-form,
    .task-report-card .form-grid {
        gap: 8px;
    }
    .task-detail-comment input,
    .task-report-card input,
    .task-report-card textarea {
        min-height: 36px;
        padding: 8px 10px;
        font-size: 14px;
    }
    .task-report-card textarea {
        min-height: 82px;
    }
    .task-detail-comment button,
    .task-report-card button {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 13px;
    }
    .file-actions {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 7px;
        padding: 6px;
    }
    .file-thumb {
        width: 34px;
        height: 34px;
        border-radius: 7px;
    }
    .file-name {
        font-size: 12px;
    }
    .file-btn {
        min-height: 24px;
        padding: 3px 7px;
        font-size: 10px;
    }
}