:root {
    --paper: #fff;
    --ink: #1b2421;
    --muted: #5e675f;
    --line: #ddd4c6;
    --sidebar: #048bc0;
    --sidebar-text: #f7fbff;
    --accent: #b85a32;
    --accent-ink: #fff8f3;
    --card: #fffdf8;
    --good: #1f6b45;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font: 16px/1.5 "Segoe UI", sans-serif;
}

h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 560; letter-spacing: -0.03em; }
h1 { font-size: 2rem; margin: 0; }
h2 { font-size: 1.25rem; margin: 20px 0 0.75rem; }
a { color: inherit; }

.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--sidebar); color: var(--sidebar-text); padding: 1.1rem 0.75rem; display: flex; flex-direction: column; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; font-family: Georgia, serif; font-size: 1.35rem; color: #fff; padding: 0 0.45rem; }
.brand .logo { display: block; width: 100%; height: auto; background: #fff; border-radius: 8px; padding: 0.4rem 0.5rem; }
.brand .logo-mark { display: none; width: 2rem; height: 2rem; }
.mark { width: 2rem; height: 2rem; display: grid; place-items: center; background: #000; color: #fff; }
.side-nav { display: flex; flex-direction: column; gap: 0.15rem; overflow: auto; }
.side-nav a, .side-nav summary { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; padding: 0.5rem 0.65rem; color: #f7fbff; border-radius: 8px; }
.nav-ico { width: 1.15rem; height: 1.15rem; flex: none; opacity: 0.9; }
.side-nav > a::before,
.side-nav > details > summary::before {
    content: "";
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    background: var(--nav-ico) center / contain no-repeat;
}
.side-nav > a:has(.nav-ico)::before,
.side-nav > details > summary:has(.nav-ico)::before { content: none; }
.side-nav > a:nth-child(1) { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.side-nav > a.nav-tasks { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='16' rx='1.5'/%3E%3Cpath d='M9 4.2h6v2.6H9z'/%3E%3Cpath d='M9 11h6M9 15h4'/%3E%3C/svg%3E"); }
.side-nav > a:nth-child(3) { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12a7 7 0 0 1 14 0'/%3E%3Cpath d='M8.2 12a3.8 3.8 0 0 1 7.6 0'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23f7fbff' stroke='none'/%3E%3Cpath d='M12 16v4'/%3E%3C/svg%3E"); }
.side-nav > details:nth-child(4) > summary { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3C/svg%3E"); }
.side-nav > details:nth-child(5) > summary { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3.5' width='12' height='17' rx='1.5'/%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M9 12.5 11 14.5 15.5 10'/%3E%3C/svg%3E"); }
.side-nav > details:nth-child(6) > summary { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h4'/%3E%3C/svg%3E"); }
.side-nav > details:nth-child(7) > summary { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='1.5'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 10h16'/%3E%3C/svg%3E"); }
.side-nav > details:nth-child(8) > summary { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8.5 12.5 11 15l4.5-5'/%3E%3C/svg%3E"); }
.side-nav > a:nth-child(9) { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l5 5V20a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3.5V9h5'/%3E%3Cpath d='M9 13h6M9 16.5h6'/%3E%3C/svg%3E"); }
.side-nav > a:nth-child(10) { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='2.5'/%3E%3Cpath d='M4.5 18.5c.6-2.6 2.4-4 4.5-4s3.9 1.4 4.5 4'/%3E%3Ccircle cx='16.5' cy='9' r='2'/%3E%3Cpath d='M15.5 14.8c1.4.4 2.5 1.5 3 3.2'/%3E%3C/svg%3E"); }
.side-nav > a:nth-child(11) { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='8' r='.8' fill='%23f7fbff' stroke='none'/%3E%3C/svg%3E"); }
.side-nav > a:nth-child(12) { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 4 4 8l8 4 8-4-8-4z'/%3E%3Cpath d='M4 12l8 4 8-4'/%3E%3Cpath d='M4 16l8 4 8-4'/%3E%3C/svg%3E"); }
.side-nav > a:nth-child(13) { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='2.2'/%3E%3Ccircle cx='16' cy='8' r='2.2'/%3E%3Cpath d='M4.2 18c.5-2.3 2-3.6 3.8-3.6s3.3 1.3 3.8 3.6'/%3E%3Cpath d='M14.2 15.2c1.3.3 2.3 1.3 2.8 2.8'/%3E%3Cpath d='M16 12.5h4M18 10.5v4'/%3E%3C/svg%3E"); }
.side-nav > a.nav-meetings { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='1.5'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 10h16'/%3E%3C/svg%3E"); }
.side-nav > details:nth-child(15) > summary { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v2.2M12 18.3v2.2M3.5 12h2.2M18.3 12h2.2M6.2 6.2l1.6 1.6M16.2 16.2l1.6 1.6M17.8 6.2l-1.6 1.6M7.8 16.2 6.2 17.8'/%3E%3C/svg%3E"); }
.side-nav a:hover, .side-nav summary:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.side-nav a.active { background: #000000bd; color: #fff; }
.side-nav a.active .nav-ico, .side-nav summary:hover .nav-ico { opacity: 1; }
.side-nav details { display: flex; flex-direction: column; }
.side-nav summary { cursor: pointer; list-style: none; }
.side-nav summary::-webkit-details-marker { display: none; }
.side-nav summary::after { content: ""; margin-left: auto; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.7; }
.side-nav details[open] > summary::after { transform: rotate(45deg); }
.side-nav details > a { padding-left: 2.5rem; font-size: 0.92rem; }
.sidebar-user { margin-top: auto; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.86rem; padding: 0.75rem 0.7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.2); line-height: 1.35; }
.sidebar-user p { margin: 0; color: #fff; }
.sidebar-user .label { color: #d5e6fb; }
.muted, .hint { color: var(--muted); }
.sidebar-user button, .actions button, .danger { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; }
.sidebar-user form { margin: 0.55rem 0 0; }
.sidebar-user button { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; }
.sidebar-user button::before { content: ""; width: 1.05rem; height: 1.05rem; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7fbff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M10 12h9'/%3E%3Cpath d='m16 8 4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.side-head { display: flex; align-items: center; gap: 0.35rem; }
.side-head .brand { min-width: 0; flex: 1; }
.side-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
}
.side-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.side-toggle:hover { background: rgba(255, 255, 255, 0.3); }
.side-tip {
    position: fixed;
    z-index: 40;
    min-width: 8.5rem;
    padding: 0.35rem;
    border-radius: 10px;
    background: #123044;
    color: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
}
.side-tip[hidden] { display: none; }
.side-tip p { margin: 0; padding: 0.3rem 0.55rem 0.15rem; font-size: 12px; font-weight: 700; color: #d5e6fb; }
.side-tip a, .side-tip > span {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.side-tip a:hover, .side-tip a.active { background: #000000bd; }
@media (min-width: 801px) {
    html.sidebar-collapsed .shell { grid-template-columns: 4.25rem minmax(0, 1fr); }
    html.sidebar-collapsed .sidebar { align-items: center; padding: 0.75rem 0.35rem; }
    html.sidebar-collapsed .side-head { flex-direction: column; width: 100%; }
    html.sidebar-collapsed .side-toggle svg { transform: rotate(180deg); }
    html.sidebar-collapsed .brand { padding: 0; justify-content: center; }
    html.sidebar-collapsed .brand .logo { display: none; }
    html.sidebar-collapsed .brand .logo-mark { display: block; width: 2.5rem; height: 2.5rem; padding: 0; background: transparent; border-radius: 5px; object-fit: contain; }
    html.sidebar-collapsed .side-nav { width: 100%; overflow: auto; }
    html.sidebar-collapsed .side-nav > a,
    html.sidebar-collapsed .side-nav > details > summary {
        justify-content: center;
        gap: 0;
        padding: 0.62rem 0.35rem;
        font-size: 0;
    }
    html.sidebar-collapsed .side-nav summary::after,
    html.sidebar-collapsed .side-nav details > a { display: none; }
    html.sidebar-collapsed .sidebar-user { align-items: center; width: 100%; padding-left: 0; padding-right: 0; }
    html.sidebar-collapsed .sidebar-user p { display: none; }
    html.sidebar-collapsed .sidebar-user button { justify-content: center; font-size: 0; }
}

.main { min-width: 0; padding: 2rem 2.25rem 3rem; overflow-x: auto; }
table { min-width: 680px; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.page-head:has(.page-intro) { align-items: flex-start; }
.page-head > div { min-width: 0; flex: 1; }
.page-head > .actions { flex: none; margin-left: auto; }
.page-total { flex: none; white-space: nowrap; align-self: flex-start; margin: 1.65rem 0 0; font-size: 1.15rem; }
.page-intro { margin: 0.45rem 0 1rem; max-width: 90%; color: #000; font-size: 1rem; }
.page-head .page-intro { margin-bottom: 0; }
.dash-hero .hero-intro { max-width: 100%; }
.kicker { margin: 0 0 0.25rem; text-transform: uppercase; letter-spacing: 0.12em; font-size: 1rem; color: #ff4c00; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.stats article, .form-card, .home-card { background: var(--card); border: 1px solid var(--line); padding: 1rem 1.1rem; }
.stats span { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 20px; }
.stats strong { font-family: Georgia, serif; font-size: 2rem; }
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.flash { background: #e5f2ea; border: 1px solid #b7d7c4; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }
.flash.error { background: #f8ece7; border-color: #e2c2b6; }

table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
th, td { text-align: left; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.muted { display: block; color: var(--muted); font-size: 0.88rem; }
.pill { display: inline-block; padding: 0.1rem 0.45rem; background: #e7f3ec; color: var(--good); font-size: 0.82rem; }
.pill.warn { background: #f8efd8; color: #8a5a12; }
.pill.bad { background: #f8ece7; color: #8d2f24; }
.stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.actions { display: flex; gap: 0.8rem; align-items: center; }
.plain .actions { flex-direction: row; align-items: center; margin-top: 0.45rem; }
.actions a.button, .actions button.button { background: #057fea; color: #fff; border: 0; border-radius: 40px; padding: 0.45rem 1.2rem; }
a.text-link, button.text-link, .actions button.text-link { background: none; border: 0; padding: 0; color: #b42318; text-decoration: underline; cursor: pointer; font: inherit; }
.actions form { margin: 0; }
.pager { margin-top: 1rem; }
.pager nav > div:first-child { display: none; }
.pager nav > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pager p { margin: 0; }
.pager .inline-flex { display: inline-flex; align-items: center; }
.pager svg { width: 1.1rem; height: 1.1rem; display: block; }
.pager a,
.pager span[aria-current] > span,
.pager span[aria-disabled] > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    height: 2.15rem;
    padding: 0 0.55rem;
    border: 1px solid var(--line);
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    line-height: 1;
}
.pager span[aria-current] > span { background: #057fea; color: #fff; border-color: #057fea; }

.form-card, .stack { display: flex; flex-direction: column; gap: 0.9rem; max-width: 860px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.92rem; }
input, select, textarea { font: inherit; color: inherit; background: #fff; border: 1px solid var(--line); padding: 0.55rem 0.65rem; }
fieldset { border: 1px solid var(--line); padding: 0.9rem; display: flex; flex-direction: column; gap: 0.8rem; }
.check { flex-direction: row; align-items: center; }
.form-actions { display: flex; gap: 1rem; align-items: center; }
.meeting-notes .form-actions { margin-top: 0.9rem; }
.filter-bar { display: flex; gap: 0.75rem; align-items: flex-end; margin-bottom: 1rem; }
.filter-bar .button { padding: 0.55rem 1.5rem; line-height: 1.5; }
.people-search { display: flex; gap: 0.75rem; align-items: end; margin-bottom: 1.1rem; }
.people-search label { flex: 1; max-width: 28rem; }
.people-search input { border-radius: 12px; }
.people-table { width: 100%; table-layout: fixed; min-width: 0; }
.people-table th, .people-table td { vertical-align: middle; }
.people-table strong, .people-table .muted { display: block; }
.people-table col.row-action, .people-table .row-action { width: 5.5rem; text-align: right; white-space: nowrap; }
.button { display: inline-block; background: #057fea; color: #fff; text-decoration: none; border: 0; border-radius: 40px; padding: 0.65rem 1.95rem; cursor: pointer; font: inherit; }
.button:hover, .actions a.button:hover, .actions button.button:hover { background: #000; color: #fff; }
.danger { color: #8d2f24; }
.guest-body { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.guest-body:has(.login-screen),
.guest-body:has(.login-screen) .guest-shell,
.guest-body:has(.auth-layout),
.guest-body:has(.auth-layout) .guest-shell,
.guest-body:has(.home),
.guest-body:has(.home) .guest-shell { display: block; width: 100%; max-width: none; padding: 0; }
.login-brand img { display: block; height: 46px; width: auto; }
.home-card { width: min(520px, 100%); }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; background: #048bc0 center / cover no-repeat; position: relative; }
.login-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(4, 139, 192, 0.45), rgba(2, 100, 145, 0.62)); }
.login-card { position: relative; width: min(420px, 100%); background: #fff; border-radius: 22px; padding: 2.2rem 2rem 1.8rem; box-shadow: 0 24px 50px rgba(0, 18, 48, 0.28); }
.login-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.4rem; color: #10233d; font-family: Georgia, serif; font-size: 1.7rem; }
.login-card h1 { font-size: 1.7rem; }
.login-card .lede { margin: 0.25rem 0 1.2rem; }
.login-card .stack { max-width: none; }
.login-card input[type="email"],
.login-card input[type="password"] { border-radius: 12px; padding: 0.75rem 0.85rem; background: #f6f8fb; border-color: #d5deea; }
.login-card .check { gap: 0.5rem; color: #3d4d5c; }
.login-card .button { width: 100%; margin-top: 0.3rem; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.auth-aside, .auth-panel { min-width: 0; }
.auth-aside { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 4rem 4.5rem; color: #fff; background: #048bc0 url("../images/login-bg.jpg?v=2") center / cover no-repeat; position: relative; }
.auth-aside::before { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(4, 139, 192, 0.55), rgba(2, 110, 156, 0.68)); }
.auth-aside > * { position: relative; }
.auth-home, .auth-logo-link { align-self: flex-start; color: #fff; font-weight: 600; text-decoration: none; }
.auth-home:hover { text-decoration: underline; }
.auth-logo { width: 240px; max-width: 100%; height: auto; align-self: flex-start; background: #fff; border-radius: 12px; padding: 0.75rem 0.9rem; }
.auth-aside h1 { margin: 0.6rem 0 0; max-width: 15ch; font-size: 3rem; line-height: 1.05; color: #fff; }
.auth-aside p { margin: 20px 0 10px; max-width: 36rem; color: #e7f1fb; font-size: 1.05rem; }
.auth-aside .auth-points { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.6; }
.auth-aside ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.auth-aside li { display: flex; align-items: center; gap: 0.7rem; color: #fff; }
.auth-aside li::before { content: ""; width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 0.75rem no-repeat; }
.auth-panel { display: grid; place-items: center; padding: 2.5rem 1.5rem; background: #f5f8fc; }
.auth-form { width: min(450px, 100%); min-width: 0; display: flex; flex-direction: column; gap: 0.85rem; background: #fff; border: 1px solid #e6eef6; border-radius: 20px; padding: 2rem 1.8rem 1.5rem; box-shadow: 0 18px 40px rgba(16, 42, 80, 0.06); }
.auth-form h2 { margin: 0; font-family: Georgia, serif; font-size: 1.7rem; font-weight: 560; color: #16345c; }
.auth-welcome { margin: 0 0 0.45rem; color: #3d5270; font-size: 0.98rem; }
.auth-form .lede { margin: 0; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-weight: 600; color: #1d334d; }
.field-head a, .auth-back { color: #0055b9; font-weight: 600; text-decoration: none; }
.field-head a { font-size: 0.88rem; white-space: nowrap; }
.auth-back { text-align: center; }
.auth-solo { min-height: 100vh; }
.auth-form .auth-logo { height: 42px; margin-bottom: 0.4rem; }
.auth-form label { font-weight: 600; color: #1d334d; }
.auth-form input[type="email"],
.auth-form input[type="password"] { width: 100%; border-radius: 12px; padding: 0.8rem 0.9rem; background: #f7f9fc; border: 1px solid #d7e1ec; }
.auth-form input:focus { outline: 2px solid rgba(0, 85, 185, 0.25); border-color: #0055b9; }
.auth-form .check { font-weight: 500; color: #4d6074; gap: 0.5rem; }
.auth-form .button { width: 100%; margin-top: 0.35rem; }
.auth-form .button::after { content: " \2192"; }
.auth-foot { margin: 0.35rem 0 0; text-align: center; color: #7b8b9c; font-size: 0.88rem; }
.welcome-card { text-align: left; }
.main { background: #f4f7fb; }
.dash-hello { margin: 0; color: #16345c; font-size: 1.7rem; }
.dash-date { margin: 0.25rem 0 1rem; color: #66788c; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; margin-bottom: 1rem; }
.kpi { display: block; padding: 1rem 1rem 1.05rem; background: #fff; border: 1px solid #e4edf7; border-radius: 16px; text-decoration: none; box-shadow: 0 10px 28px rgba(0, 40, 90, 0.05); }
.dash-kpis .kpi:has(.kpi-mark) { display: flex; align-items: center; gap: 0.9rem; }
.kpi span { display: block; color: #66788c; font-size: 0.85rem; font-weight: 700; }
.kpi strong { display: block; margin: 0.2rem 0; color: #16345c; font-size: 2rem; line-height: 1; }
.kpi small { color: #66788c; font-size: 0.82rem; }
.kpi .kpi-mark { display: grid; place-items: center; flex: 0 0 2.7rem; width: 2.7rem; height: 2.7rem; margin: 0; padding: 0; border-radius: 999px; color: #fff; font-size: 0; line-height: 0; overflow: hidden; }
.kpi .kpi-mark svg { display: block; width: 1.45rem; height: 1.45rem; }
.kpi .kpi-mark svg * { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kpi-tasks .kpi-mark { background: #2563eb; }
.kpi-people .kpi-mark { background: #16a34a; }
.kpi-ops .kpi-mark { background: #7c3aed; }
.kpi-copy { min-width: 0; }
.dash-board { display: grid; grid-template-columns: 1.4fr 0.7fr; gap: 1rem; margin-bottom: 1rem; }
.task-rows { list-style: none; margin: 0; padding: 0; }
.task-rows li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0.6rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid #eef3f8; }
.task-check { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 999px; }
.task-check svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.task-check.c1 { background: #2563eb; }
.task-check.c2 { background: #22c55e; }
.task-check.c3 { background: #7c3aed; }
.task-check.c0 { background: #f59e0b; }
.task-rows li.empty { display: block; }
.task-rows a { color: #1d334d; font-weight: 650; }
.task-rows small { color: #66788c; font-size: 0.82rem; }
.tag { border-radius: 999px; padding: 0.1rem 0.45rem; font-style: normal; font-size: 0.75rem; font-weight: 700; }
.tag.high, .tag.urgent { background: #fee2e2; color: #b91c1c; }
.tag.medium { background: #ffedd5; color: #c2410c; }
.tag.low { background: #dcfce7; color: #15803d; }
.dash-attend { text-align: center; }
.dash-attend h2, .attend-today { text-align: left; }
.attend-today { margin: 0 0 0.2rem; color: #66788c; font-size: 0.85rem; font-weight: 700; }
.dash-ring { display: grid; place-items: center; width: 8rem; height: 8rem; margin: 0.4rem auto; border-radius: 50%; background: conic-gradient(#22c55e calc(var(--pct) * 1%), #e8eef5 0); }
.dash-ring b { display: grid; place-items: center; width: 5.35rem; height: 5.35rem; border-radius: 50%; background: #fff; color: #16345c; font-size: 1.25rem; }
.dash-attend form { margin-top: 0.7rem; }
.dash-hero h1 { color: #fff; font-size: 2rem; }
.dash-hero p { margin: 0.2rem 0 0; color: #e7f1fb; }
.dash-hero .kicker { color: #ff4c00; }
.dash-hero .button { background: #fff; color: #057fea; }
.dash-hero .button.ghost { display: inline-flex; margin-top: 0.85rem; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.75); }
.dash-hero .hero-attendance { text-align: right; }
.dash-hero .hero-attendance p { margin: 0 0 0.45rem; }
.dash-hero .hero-attendance form { margin: 0; }
.dash-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; margin-bottom: 1.1rem; }
.dash-stats article, .dash-panel { background: #fff; border: 1px solid #e4edf7; border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 40, 90, 0.05); }
.dash-stats article { padding: 0.95rem 1rem; }
.dash-stats span, .dash-stats em { display: block; color: #66788c; font-size: 0.82rem; font-style: normal; }
.dash-stats strong { display: block; margin-top: 0.2rem; font-family: Georgia, serif; font-size: 1.7rem; color: #16345c; }
.dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.7rem; margin-bottom: 1.1rem; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 0.75rem; align-items: start; }
.kanban section { background: #f4f7fb; border-radius: 14px; padding: 0.75rem; }
.kanban h2 { margin-top: 0; font-size: 1rem; }
.task-card { display: flex; flex-direction: column; gap: 0.2rem; background: #fff; border: 1px solid #e4edf7; border-radius: 12px; padding: 0.7rem; margin-top: 0.5rem; text-decoration: none; color: inherit; }
.task-card span { color: #66788c; font-size: 0.86rem; }
.tag { display: inline-block; margin: 0 0.35rem 0.35rem 0; padding: 0.15rem 0.55rem; border-radius: 999px; background: #e7f1fb; color: #0055b9; font-size: 0.85rem; }
.page-head > .actions { flex-wrap: wrap; justify-content: flex-end; }
.month-nav { display: flex; align-items: center; gap: 1rem; margin: 0 0 0.8rem; }
.month-nav a { color: #0055b9; }
.cal-wrap { overflow-x: auto; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; min-width: 720px; }
.cal-names { margin-bottom: 0.35rem; color: #66788c; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cal-day { min-height: 6.2rem; background: #fff; border: 1px solid #e4edf7; border-radius: 10px; padding: 0.35rem; }
.cal-day.out { opacity: 0.45; }
.cal-day > span { display: block; color: #66788c; font-size: 0.78rem; }
.cal-day a { display: block; margin-top: 0.25rem; font-size: 0.82rem; color: #16345c; }
.tl { display: flex; flex-direction: column; gap: 0.45rem; }
.tl-row { display: grid; grid-template-columns: 180px 1fr; gap: 0.6rem; align-items: center; }
.tl-days { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); color: #66788c; font-size: 0.72rem; }
.tl-track { position: relative; height: 1.7rem; overflow: hidden; background: #f4f7fb; border-radius: 8px; }
.tl-bar { position: absolute; top: 0.25rem; height: 1.2rem; overflow: hidden; padding: 0 0.35rem; border-radius: 6px; background: #0055b9; color: #fff; font-size: 0.75rem; line-height: 1.2rem; text-decoration: none; white-space: nowrap; }
.tl-bar.done { background: #1f6b45; }
.tl-bar.bad { background: #8d2f24; }
.org { list-style: none; margin: 0.35rem 0 0; padding-left: 1.15rem; border-left: 1px solid #d5e2f0; }
.org > li { margin: 0.55rem 0; }
.org strong { display: block; }
.org span { color: #66788c; font-size: 0.9rem; }
.dash-actions a { background: #fff; border: 1px solid #e4edf7; border-radius: 14px; padding: 0.85rem 0.5rem; text-align: center; text-decoration: none; color: #16345c; font-weight: 600; }
.dash-actions a:hover { border-color: #0055b9; color: #0055b9; }
.dash-attendance { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.1rem; padding: 1rem 1.15rem; }
.dash-attendance h2, .dash-panel h2 { margin-bottom: 0.35rem; }
.dash-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 1rem; min-width: 0; }
.dash-panel { padding: 1.1rem 1.15rem; min-width: 0; }
.report-panels table { min-width: 0; width: 100%; table-layout: fixed; }
.report-panels td.num { width: 4.5rem; text-align: right; white-space: nowrap; }
.dash-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.dash-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid #eef3f8; }
.dash-list li:last-child { border-bottom: 0; }
.dash-list strong, .dash-list em { display: block; font-style: normal; }
.dash-list em { color: #66788c; font-size: 0.86rem; }
.avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #e7f1fb; color: #0055b9; display: grid; place-items: center; font-weight: 700; flex: none; }
.lede { color: var(--muted); }
.hint { font-size: 0.9rem; }
code { font-family: Consolas, monospace; }

@media (max-width: 800px) {
    .shell, .stats, .split, .grid, .dash-stats, .dash-actions, .dash-grid, .dash-kpis, .dash-board, .auth-layout, .kanban { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .dash-hero, .dash-attendance { flex-direction: column; align-items: flex-start; }
    .dash-hero .hero-attendance { text-align: left; }
    .auth-layout, .auth-panel, .auth-form { min-width: 0; }
    .auth-aside { padding: 2rem 1.25rem 1.4rem; }
    .auth-aside h1 { max-width: 15ch; font-size: 2.1rem; }
    .auth-logo { width: 240px; max-width: 100%; height: auto; }
    .auth-panel { padding: 1.25rem 1rem 2rem; }
    .auth-form { padding: 1.35rem 1.1rem 1.2rem; }
}