@font-face {
    font-family: "Elms Sans";
    src:
        local("Elms Sans"),
        url("/static/fonts/ElmsSans.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-alt: #fafafa;
    --surface-soft: #ebebef;
    --surface-field: #f5f5f7;
    --ink: #1d1d1f;
    --muted-strong: #6e6e73;
    --muted: #aeaeb2;
    --line: rgba(0, 0, 0, 0.08);
    --line-soft: rgba(0, 0, 0, 0.05);
    --accent: #0066cc;
    --accent-soft: #ebf4ff;
    --green: #34d399;
    --green-ink: #059669;
    --orange: #f59e0b;
    --orange-ink: #b45309;
    --red: #e11d48;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 14px 34px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 28px 70px rgba(15, 23, 42, 0.16);
    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

[hidden] {
    display: none !important;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 15px;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Avenir Next", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
    background: none;
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-field);
    color: var(--ink);
}

textarea {
    min-height: 104px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: rgba(0, 102, 204, 0.22);
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.08);
}

label {
    display: grid;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #242323;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-logo {
    width: 72px;
    max-width: 100%;
    height: auto;
    filter: grayscale(1) brightness(0) invert(1);
}

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

.sidebar-nav {
    flex: 0 0 auto;
    padding: 28px 8px 10px;
    display: grid;
    gap: 0;
}

.nav-link {
    min-height: 34px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 10px;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 500;
    transition: background 160ms ease, color 160ms ease;
}

.nav-link:hover {
    background: transparent;
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.nav-link-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.icon {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.icon.sm {
    width: 13px;
    height: 13px;
}

.icon.lg {
    width: 18px;
    height: 18px;
}

.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--muted);
    flex: 0 0 auto;
}

.nav-dot.active {
    background: var(--accent);
}

.nav-dot.success {
    background: var(--green);
}

.nav-dot.pause {
    background: var(--orange);
}

.nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.nav-link .icon {
    color: #fff;
}

.nav-link.active .icon {
    color: #fff;
}

.sidebar-footer {
    margin-top: 0;
    padding: 16px 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    gap: 8px;
}

.sidebar-user,
.header-user,
.person-cell,
.person-row,
.author-line,
.stat-icon-row,
.task-person,
.row-between,
.page-chip-tabs,
.conversation-head,
.calendar-row,
.info-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-user strong,
.header-user strong,
.person-cell strong,
.person-row strong {
    display: block;
    font-weight: 600;
}

.sidebar-user strong {
    color: #fff;
}

.sidebar-user span,
.header-user span,
.person-row p,
.author-line span,
.subtle-copy,
.table-subcopy {
    color: var(--muted);
    font-size: 0.72rem;
}

.sidebar-user span {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.58);
}

.logout-link {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
}

.logout-link:hover {
    background: transparent;
}

.sidebar .avatar {
    background: #fff;
    color: #242323;
}

.sidebar .pill-badge,
.sidebar .pill-badge.alert {
    background: #fff;
    color: #242323;
}

.avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 0.72rem;
    font-weight: 700;
    overflow: hidden;
}

.avatar-tone-0 {
    background: #e8f0ff;
    color: #2563eb;
}

.avatar-tone-1 {
    background: #f3e8ff;
    color: #9333ea;
}

.avatar-tone-2 {
    background: #e7f8ef;
    color: #0f9f67;
}

.avatar-tone-3 {
    background: #fff4df;
    color: #d97706;
}

.avatar-tone-4 {
    background: #ffe8ef;
    color: #db2777;
}

.avatar-tone-5 {
    background: #e6f7f7;
    color: #0f766e;
}

.avatar.large {
    width: 48px;
    height: 48px;
    font-size: 0.92rem;
}

.image-avatar {
    object-fit: cover;
}

.pill-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

.pill-badge.alert {
    background: var(--red);
}

.toast-stack {
    position: fixed;
    top: 22px;
    right: 24px;
    z-index: 400;
    display: grid;
    gap: 12px;
    pointer-events: none;
}

.toast-card {
    width: min(340px, calc(100vw - 28px));
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.toast-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-card.accent {
    border-color: rgba(32, 107, 243, 0.16);
}

.toast-card.assistant {
    width: min(390px, calc(100vw - 28px));
    border-color: rgba(36, 35, 35, 0.13);
    box-shadow: 0 22px 58px rgba(29, 29, 31, 0.18);
}

.toast-card.assistant::before {
    content: "✦";
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: #242323;
    font-size: 0.68rem;
}

.toast-card.assistant.urgent {
    border-color: rgba(196, 64, 48, 0.24);
}

.toast-card.assistant.urgent::before {
    background: #c44030;
}

.toast-copy {
    min-width: 0;
    flex: 1;
}

.toast-copy strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--text-primary);
}

.toast-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.toast-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast-open {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
}

.toast-actions .toast-close {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 620;
}

.toast-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 2px;
    cursor: pointer;
}

.toast-close:hover {
    color: var(--text-primary);
}

.main-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.desktop-crumb {
    padding: 24px 32px 0;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.mobile-bar {
    display: none;
    align-items: center;
    min-height: 64px;
    padding: 0 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
}

.main-content {
    flex: 1;
    min-width: 0;
    padding: 22px 38px 36px;
}

.main-content-frame {
    width: min(1180px, 100%);
    min-width: 0;
    margin-right: auto;
    margin-left: auto;
}

.main-content-frame.is-full-bleed {
    width: 100%;
    max-width: none;
}

.page-head {
    margin-bottom: 10px;
}

.dashboard-page {
    min-height: calc(100vh - 58px);
    margin: -22px -38px -36px;
    padding: 22px 38px 36px;
    background-color: #dbe9f2;
    background-image: url("/static/brand/dashboard-background.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.dashboard-page > section {
    width: min(1180px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.dashboard-page .content-card {
    border-color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 34px rgba(43, 77, 99, 0.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.page-kicker {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 500;
}

.page-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-title-row h1 {
    font-size: 2.25rem;
    line-height: 1.02;
    font-weight: 750;
    letter-spacing: -0.035em;
}

.page-title-row p,
.page-description,
.card-heading p,
.empty-copy,
.deadline-item p,
.task-list-item p,
.announcement-panel p,
.conversation-preview p,
.conversation-message p,
.calendar-empty p,
.project-meta p {
    margin-top: 6px;
    color: var(--muted-strong);
    font-size: 0.76rem;
    line-height: 1.5;
}

.page-description {
    max-width: 760px;
}

.back-link,
.text-action,
.table-link {
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 500;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.primary-button,
.secondary-button,
.ghost-button {
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
}

.button-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover {
    transform: translateY(-1px);
}

.primary-button {
    background: var(--accent);
    color: #fff;
}

.secondary-button {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
}

.ghost-button {
    background: var(--surface-field);
    color: var(--ink);
}

.small-button {
    min-height: 34px;
    padding: 0 12px;
}

.full-width {
    width: 100%;
}

.content-card,
.metric-box,
.kanban-column {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.content-card:hover,
.metric-box:hover {
    box-shadow: var(--shadow-md);
}

.content-card,
.metric-box {
    transition: box-shadow 160ms ease;
}

.stack-card,
.table-card,
.announcement-panel {
    padding: 20px;
}

.stats-row,
.two-column-grid,
.three-column-grid,
.my-area-focus,
.inbox-layout,
.filter-panel-grid,
.kanban-grid,
.metric-mini-grid,
.timeline-grid {
    display: grid;
    gap: 22px;
}

.stats-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 24px;
}

.dashboard-focus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 24px;
    position: relative;
    z-index: 6;
}

.dashboard-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    margin-top: 0;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.dashboard-hero-art {
    min-height: 0;
    height: 364px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    display: flex;
    align-items: flex-start;
    position: relative;
    transform: translateY(-49px);
    z-index: 1;
}

.dashboard-hero-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left top;
}

.dashboard-summary-card {
    align-self: start;
    padding: 18px;
    position: relative;
    z-index: 7;
    height: 332px;
    overflow: hidden;
}

.dashboard-top-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.dashboard-focus-grid > .stack-card:first-child {
    position: relative;
    z-index: 8;
}

.dashboard-summary-head {
    margin-bottom: 10px;
}

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

.dashboard-assistant-card {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
}

.dashboard-assistant-head {
    align-items: center;
    margin-bottom: 12px;
}

.dashboard-assistant-head .eyebrow {
    margin-bottom: 3px;
}

.dashboard-assistant-head h2 {
    font-size: 1rem;
    line-height: 1.25;
}

.dashboard-assistant-head p {
    margin-top: 3px;
}

.assistant-live-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--muted-strong);
    font-size: 0.62rem;
    font-weight: 600;
}

.assistant-live-pill span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a9adb5;
}

.assistant-live-pill.is-connected {
    color: #2b7a5b;
}

.assistant-live-pill.is-connected span {
    background: #3ecf8e;
    box-shadow: 0 0 0 4px rgba(62, 207, 142, 0.12);
}

.dashboard-assistant-narrative {
    display: grid;
    align-content: center;
    gap: 12px;
    min-height: 0;
    padding: 12px 4px 14px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.dashboard-assistant-narrative p {
    max-width: 94%;
    color: var(--muted-strong);
    font-size: 0.74rem;
    line-height: 1.58;
}

.dashboard-assistant-narrative p:first-child {
    color: var(--ink);
}

.dashboard-assistant-report {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 0;
}

.assistant-report-section {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: #fafafb;
}

.assistant-report-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.assistant-report-title > span {
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
}

.assistant-report-title small {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-report-list {
    display: grid;
    gap: 2px;
}

.assistant-report-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px;
    margin: 0 -6px;
    border-radius: 10px;
    color: inherit;
}

.assistant-report-row:hover {
    background: #f0f1f4;
}

.assistant-report-dot,
.assistant-priority-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--report-color, var(--accent));
}

.assistant-priority-marker.urgent {
    background: #ef4444;
}

.assistant-priority-marker.warning {
    background: #f59e0b;
}

.assistant-priority-marker.calm {
    background: #36b37e;
}

.assistant-report-copy {
    min-width: 0;
}

.assistant-report-copy strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.66rem;
    line-height: 1.35;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-report-copy small {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.56rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-project-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.assistant-project-line strong {
    min-width: 0;
}

.assistant-project-line em {
    flex: 0 0 auto;
    font-size: 0.54rem;
    font-style: normal;
    font-weight: 650;
}

.assistant-project-line em.urgent {
    color: #dc2626;
}

.assistant-project-line em.warning {
    color: #b45309;
}

.assistant-project-line em.calm {
    color: #2b7a5b;
}

.assistant-report-empty {
    padding: 12px 2px;
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.45;
}

.dashboard-assistant-response {
    min-height: 0;
    overflow-y: auto;
    padding: 11px 13px;
    border: 1px solid #dbe8fb;
    border-radius: 15px;
    background: #f5f9ff;
}

.dashboard-assistant-response-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 650;
}

.dashboard-assistant-response-head a {
    color: var(--muted-strong);
    font-size: 0.58rem;
    font-weight: 500;
}

.dashboard-assistant-response p {
    color: var(--muted-strong);
    font-size: 0.64rem;
    line-height: 1.45;
}

.dashboard-assistant-response p + p {
    margin-top: 5px;
}

.dashboard-assistant-bottom {
    padding-top: 10px;
}

.assistant-encouragement {
    margin-bottom: 8px;
    color: #6f6254;
    font-size: 0.63rem;
    line-height: 1.4;
    font-style: italic;
}

.dashboard-assistant-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.dashboard-assistant-form input[type="text"] {
    min-height: 36px;
    border-radius: 12px;
    background: #f6f6f8;
    font-size: 0.68rem;
}

.dashboard-summary-item {
    padding: 11px 12px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
}

.dashboard-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.dashboard-summary-top span,
.dashboard-summary-item small {
    display: block;
    color: var(--muted);
    font-size: 0.58rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

.dashboard-summary-item strong {
    display: block;
    margin-bottom: 2px;
    font-size: 1.16rem;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 600;
}

.dashboard-summary-item small {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.66rem;
}

.dashboard-day-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.dashboard-agenda-overview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.dashboard-agenda-date {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 7px 18px rgba(0, 102, 204, 0.18);
}

.dashboard-agenda-date strong {
    font-size: 1.02rem;
    line-height: 1;
    font-weight: 650;
}

.dashboard-agenda-date-copy {
    min-width: 0;
}

.dashboard-agenda-date-copy span,
.dashboard-agenda-date-copy small {
    display: block;
}

.dashboard-agenda-date-copy span {
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 650;
}

.dashboard-agenda-date-copy small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.66rem;
}

.dashboard-agenda-count {
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--surface-field);
    color: var(--muted-strong);
    font-size: 0.62rem;
    font-weight: 600;
}

.dashboard-all-day-strip {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}

.dashboard-all-day-strip > span {
    padding-top: 6px;
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 600;
}

.dashboard-all-day-strip > div {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.dashboard-all-day-strip > div::-webkit-scrollbar {
    display: none;
}

.dashboard-all-day-chip {
    max-width: 190px;
    padding: 6px 9px;
    flex: 0 0 auto;
    overflow: hidden;
    border-left: 3px solid var(--event-color, var(--accent));
    border-radius: 9px;
    background: color-mix(in srgb, var(--event-color, var(--accent)) 10%, #fff);
    color: var(--ink);
    font-size: 0.62rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-agenda-timeline {
    max-height: 318px;
    overflow-y: auto;
    padding: 10px 5px 4px 0;
    scrollbar-color: #d7d9de transparent;
    scrollbar-width: thin;
}

.dashboard-agenda-event {
    display: grid;
    grid-template-columns: 54px 16px minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
}

.dashboard-agenda-time {
    padding: 12px 0;
    text-align: right;
}

.dashboard-agenda-time strong,
.dashboard-agenda-time small {
    display: block;
}

.dashboard-agenda-time strong {
    color: var(--ink);
    font-size: 0.67rem;
    font-weight: 650;
}

.dashboard-agenda-time small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.58rem;
}

.dashboard-agenda-axis {
    position: relative;
    display: flex;
    justify-content: center;
}

.dashboard-agenda-axis::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.dashboard-agenda-axis span {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    margin-top: 17px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--event-color, var(--accent));
    box-shadow: 0 0 0 1px var(--event-color, var(--accent));
}

.dashboard-agenda-event-card {
    min-width: 0;
    margin: 5px 0;
    padding: 10px 12px;
    border-left: 3px solid var(--event-color, var(--accent));
    border-radius: 11px;
    background: color-mix(in srgb, var(--event-color, var(--accent)) 8%, #fff);
    transition: background 150ms ease, transform 150ms ease;
}

.dashboard-agenda-event-card:hover {
    background: color-mix(in srgb, var(--event-color, var(--accent)) 13%, #fff);
    transform: translateX(2px);
}

.dashboard-agenda-event-card strong,
.dashboard-agenda-event-card span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-agenda-event-card strong {
    color: var(--ink);
    font-size: 0.7rem;
    line-height: 1.35;
    font-weight: 650;
}

.dashboard-agenda-event-card span {
    margin-top: 3px;
    color: var(--muted-strong);
    font-size: 0.58rem;
}

.dashboard-agenda-empty {
    padding: 34px 0 24px;
    color: var(--muted);
    font-size: 0.72rem;
    text-align: center;
}

.metric-box {
    min-height: 140px;
    padding: 22px 22px 20px;
}

.workers-table-card {
    padding: 0;
}

.workers-table-card .data-table td strong {
    font-size: 0.82rem;
}

.workers-table-card .data-table td {
    color: var(--muted-strong);
    font-size: 0.8rem;
}

.worker-modal {
    width: min(100%, 760px);
}

.avatar-picker-field {
    display: grid;
    gap: 12px;
}

.field-title {
    display: block;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
}

.avatar-selection-shell {
    display: grid;
    gap: 12px;
}

.avatar-selection-current {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fafaf8;
}

.avatar-preview-image,
.avatar-preview-fallback {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
}

.avatar-preview-fallback,
.avatar-choice-fallback {
    background: #e9eefb;
    color: var(--accent);
}

.avatar-selection-current strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.86rem;
}

.avatar-picker {
    display: grid;
    gap: 12px;
}

.avatar-picker summary {
    list-style: none;
    width: fit-content;
    cursor: pointer;
}

.avatar-picker summary::-webkit-details-marker {
    display: none;
}

.avatar-picker-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    max-height: 360px;
    overflow-y: auto;
}

.avatar-choice {
    display: block;
    cursor: pointer;
}

.avatar-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.avatar-choice-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 118px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.avatar-choice-card .avatar {
    width: 80px;
    height: 80px;
}

.avatar-choice:hover .avatar-choice-card {
    border-color: #cfd6e4;
    background: #fcfcfb;
    transform: translateY(-1px);
}

.avatar-choice input:checked + .avatar-choice-card {
    border-color: rgba(32, 107, 243, 0.28);
    background: #eff5ff;
    box-shadow: 0 8px 20px rgba(32, 107, 243, 0.12);
}

.metric-box span,
.metric-box small,
.mini-stat span,
.eyebrow {
    display: block;
    color: var(--muted);
    font-size: 0.58rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
}

.metric-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.icon-tint-blue {
    color: var(--accent);
}

.icon-tint-green {
    color: #10b981;
}

.icon-tint-orange {
    color: #f59e0b;
}

.icon-tint-indigo {
    color: #818cf8;
}

.metric-box strong {
    display: block;
    margin: 18px 0 10px;
    font-size: 1.95rem;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 600;
}

.metric-box small {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
}

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

.dashboard-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dashboard-link-arrow span {
    font-size: 1rem;
    line-height: 1;
}

.announcement-feed,
.announcement-stack,
.project-deadline-list,
.task-list,
.calendar-list,
.people-stack,
.conversation-list,
.timeline-stack,
.detail-list {
    display: grid;
    gap: 0;
}

.feed-row,
.task-list-item,
.deadline-list-item,
.calendar-row,
.conversation-preview,
.conversation-message,
.timeline-row,
.detail-table tbody tr {
    border-top: 1px solid var(--line-soft);
}

.feed-row:first-child,
.task-list-item:first-child,
.deadline-list-item:first-child,
.calendar-row:first-child,
.conversation-preview:first-child,
.conversation-message:first-child,
.timeline-row:first-child,
.detail-table tbody tr:first-child {
    border-top: 0;
}

.feed-row,
.task-list-item,
.deadline-list-item,
.calendar-row {
    padding: 20px 0;
    gap: 16px;
}

.feed-row:hover,
.task-list-item:hover,
.deadline-list-item:hover,
.calendar-row:hover {
    background: #fafafa;
}

.feed-row,
.task-list-item,
.calendar-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.deadline-list-item {
    display: grid;
    gap: 12px;
}

.feed-main,
.conversation-meta,
.project-meta {
    min-width: 0;
    flex: 1;
}

.feed-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.feed-row strong,
.task-list-item strong,
.deadline-list-item strong,
.announcement-panel h3,
.conversation-meta strong,
.detail-heading {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
}

.feed-row time,
.announcement-panel time,
.conversation-preview small,
.timeline-row time,
.mobile-only-time {
    color: var(--muted);
    font-size: 0.66rem;
    white-space: nowrap;
}

.dashboard-announcement-copy {
    margin-top: 8px;
    font-size: 0.78rem;
    line-height: 1.55;
}

.dashboard-author {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.72rem;
}

.chip,
.status-tag,
.filter-chip,
.move-chip,
.switch-chip {
    min-height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 600;
}

.chip.category,
.filter-chip,
.switch-chip {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted-strong);
}

.chip.category.produccion {
    background: #ebf4ff;
    border-color: #bfdbfe;
    color: var(--accent);
}

.chip.category.tecnico {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #7c3aed;
}

.chip.category.general {
    background: #f5f5f5;
    border-color: #e5e7eb;
    color: #6b7280;
}

.chip.category.urgente {
    background: #fff1f2;
    border-color: #fecdd3;
    color: var(--red);
}

.chip.category.recordatorio {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.chip.priority,
.status-tag,
.status-inline {
    border: 0;
}

.filter-row,
.tab-switch,
.chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.tab-switch {
    width: fit-content;
    padding: 4px;
    border-radius: 12px;
    background: var(--surface-soft);
}

.switch-chip {
    border-color: transparent;
}

.filter-chip.active,
.switch-chip.active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.status-tag,
.status-inline {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 500;
}

.status-tag.activo,
.status-inline.ok {
    background: #f0fdf4;
    color: var(--green-ink);
}

.status-tag.en-pausa {
    background: #fffbeb;
    color: var(--orange-ink);
}

.status-tag.finalizado,
.status-inline.muted {
    background: #f3f4f6;
    color: var(--muted-strong);
}

.status-tag.enviado {
    border: 1px solid #c9dcd5;
    background: #edf6f2;
    color: #356f62;
}

.priority.media,
.priority.Media,
.priority-media {
    background: #eff6ff;
    color: var(--accent);
}

.priority.alta,
.priority.Alta,
.priority-alta {
    background: #fff7ed;
    color: #ea580c;
}

.priority.urgente,
.priority.Urgente,
.priority-urgente {
    background: #fff1f2;
    color: var(--red);
}

.priority.baja,
.priority.Baja,
.priority-baja {
    background: #f5f5f5;
    color: var(--muted-strong);
}

.two-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 30px;
}

.three-column-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 24px;
}

.deadline-item,
.kanban-card,
.mini-panel,
.conversation-empty {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.deadline-item {
    padding: 18px 20px;
}

.deadline-list-row,
.deadline-copy {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.deadline-copy {
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
}

.deadline-side {
    align-items: flex-end;
}

.deadline-list-item .deadline-project-title {
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.35;
}

.task-list-item.deadline-list-item {
    align-items: stretch;
}

.task-list-item.deadline-list-item .line-progress {
    margin-top: 2px;
}

.deadline-top,
.task-side,
.column-head,
.timer-state,
.modal-head,
.modal-actions,
.button-row,
.info-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.line-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-soft);
}

.line-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.line-progress.is-warn span {
    background: #f59e0b;
}

.line-progress.is-danger span {
    background: #ef4444;
}

.line-progress.is-calm span {
    background: #10b981;
}

.dashboard-deadline-alert {
    color: #ef4444;
    font-size: 0.72rem;
    font-weight: 700;
}

.dashboard-deadline-alert.warn {
    color: #f59e0b;
}

.progress-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-inline small {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 600;
}

.dashboard-task-date {
    color: var(--muted);
    font-size: 0.76rem;
}

.data-table,
.detail-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td,
.detail-table th,
.detail-table td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: middle;
    border-top: 1px solid var(--line-soft);
}

.data-table thead th,
.detail-table thead th {
    border-top: 0;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.data-table tbody tr:hover,
.detail-table tbody tr:hover {
    background: var(--surface-alt);
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--muted);
    font-size: 0.7rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.accent-text {
    color: var(--accent);
}

.strong {
    font-weight: 700;
}

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

.mini-stat,
.mini-stats > div {
    padding: 14px;
    border-radius: 14px;
    background: var(--surface-field);
    text-align: center;
}

.mini-stat strong,
.mini-stats strong {
    display: block;
    margin-top: 10px;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
    font-weight: 600;
}

.big-number {
    display: block;
    margin: 16px 0 6px;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.05em;
}

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

.align-end {
    align-self: end;
}

.kanban-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kanban-column {
    padding: 16px;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.column-count {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-soft);
    color: var(--muted-strong);
    font-size: 0.68rem;
    font-weight: 700;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #c7c7cc;
}

.dot.en-curso,
.dot.activa {
    background: var(--accent);
}

.dot.en-revision {
    background: var(--orange);
}

.dot.en-edición,
.dot.en-edicion {
    background: #d58b3f;
}

.dot.hecha {
    background: var(--green);
}

.kanban-cards {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.kanban-card {
    padding: 14px;
}

.task-copy {
    min-height: 38px;
}

.task-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 10px;
}

.move-chip {
    min-height: 24px;
    padding: 0 10px;
    background: var(--surface-field);
    color: var(--muted-strong);
    cursor: pointer;
}

.task-filter-card {
    margin-bottom: 18px;
}

.task-filter-form {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
}

.task-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-toolbar {
    margin-bottom: 16px;
}

.assignment-group {
    min-width: 0;
}

.assignment-group + .assignment-group {
    margin-top: 30px;
}

.assignment-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.assignment-group-head h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.assignment-group-head p {
    margin-top: 3px;
    color: var(--muted-strong);
    font-size: 0.72rem;
}

.assignment-count {
    display: inline-grid;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
}

.assignment-group.is-secondary .assignment-count {
    background: var(--surface-alt);
    color: var(--muted-strong);
}

.readonly-chip,
.readonly-notice {
    color: var(--muted-strong);
    font-size: 0.68rem;
}

.readonly-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--surface-alt);
    font-weight: 600;
}

.readonly-notice {
    width: fit-content;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--surface-alt);
    line-height: 1.45;
}

.task-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px;
    align-items: start;
}

.task-page-grid:not(.has-detail) {
    grid-template-columns: minmax(0, 1fr);
}

.task-page-grid:not(.has-detail) .task-detail-panel {
    display: none;
}

.task-primary-panel {
    min-width: 0;
}

.task-kanban-grid {
    align-items: start;
}

.task-kanban-column {
    min-height: 100%;
}

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

.task-card-link {
    color: inherit;
    text-decoration: none;
}

.task-card-link:hover {
    color: var(--accent);
}

.task-card.active {
    box-shadow: inset 0 0 0 1px rgba(30, 100, 220, 0.18), var(--shadow-md);
    background: #fbfdff;
}

.task-card-top,
.task-card-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.task-card-bottom {
    margin-top: 12px;
    flex-direction: column;
    align-items: flex-start;
}

.task-schedule-badge {
    min-width: 132px;
    min-height: 46px;
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #d8e8f5;
    border-radius: 14px;
    color: #24495e;
    background: #edf6fb;
    white-space: nowrap;
}

.task-schedule-badge > .icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #3f7e9d;
}

.task-schedule-badge > span,
.task-schedule-badge strong,
.task-schedule-badge small {
    display: block;
}

.task-schedule-badge strong {
    color: #183a4c;
    font-size: 0.78rem;
    font-weight: 720;
    line-height: 1.05;
    letter-spacing: -0.015em;
}

.task-schedule-badge small {
    margin-top: 3px;
    color: #5d7785;
    font-size: 0.55rem;
    font-weight: 590;
    line-height: 1;
}

.task-schedule-badge.date-only,
.task-schedule-badge.unscheduled {
    border-color: rgba(60, 60, 67, 0.1);
    color: var(--muted);
    background: #f5f5f7;
}

.task-schedule-badge.date-only > .icon,
.task-schedule-badge.unscheduled > .icon,
.task-schedule-badge.date-only strong,
.task-schedule-badge.unscheduled strong,
.task-schedule-badge.date-only small,
.task-schedule-badge.unscheduled small {
    color: var(--muted);
}

.task-schedule-badge.is-compact {
    min-width: 118px;
    min-height: 40px;
    padding: 6px 9px;
    border-radius: 12px;
}

.task-schedule-badge.is-compact strong {
    font-size: 0.72rem;
}

.task-detail-schedule {
    margin: 18px 0;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d8e8f5;
    border-radius: 18px;
    background: #edf6fb;
}

.task-detail-schedule-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: #3f7e9d;
}

.task-detail-schedule-icon .icon {
    width: 18px;
    height: 18px;
}

.task-detail-schedule div,
.task-detail-schedule small,
.task-detail-schedule strong,
.task-detail-schedule div > span {
    display: block;
}

.task-detail-schedule small {
    color: #5d7785;
    font-size: 0.53rem;
    font-weight: 660;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.task-detail-schedule strong {
    margin-top: 2px;
    color: #183a4c;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -0.035em;
}

.task-detail-schedule div > span {
    margin-top: 4px;
    color: #5d7785;
    font-size: 0.61rem;
}

.task-detail-schedule.date-only,
.task-detail-schedule.unscheduled {
    border-color: rgba(60, 60, 67, 0.1);
    background: #f5f5f7;
}

.task-detail-schedule.date-only .task-detail-schedule-icon,
.task-detail-schedule.unscheduled .task-detail-schedule-icon {
    background: #86868b;
}

.task-move-row,
.task-tag-row {
    margin-bottom: 0;
}

.task-list-shell {
    padding: 6px 22px;
}

.task-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    text-decoration: none;
}

.task-list-row.active {
    background: #fbfdff;
}

.task-list-main,
.task-list-side {
    min-width: 0;
}

.task-list-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.task-detail-panel {
    padding: 22px;
    position: sticky;
    top: 18px;
}

.task-detail-head {
    margin-bottom: 18px;
}

.task-detail-head h2 {
    margin-top: 8px;
    font-size: 1.12rem;
    line-height: 1.2;
}

.task-detail-form {
    gap: 14px;
}

.task-detail-block {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
}

.task-subtask-list,
.task-comment-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.task-subtask-row,
.task-comment-item {
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
}

.task-subtask-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.task-subtask-main {
    min-width: 0;
}

.task-subtask-main p,
.task-comment-body {
    margin-top: 6px;
    color: var(--muted-strong);
    font-size: 0.8rem;
    line-height: 1.55;
}

.task-subtask-form,
.task-comment-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.task-comment-item .person-cell {
    align-items: center;
}

.task-detail-empty {
    min-height: 420px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--muted);
}

.empty-column,
.empty-copy,
.conversation-empty,
.calendar-empty,
.inbox-empty {
    color: var(--muted);
}

.empty-column {
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    font-size: 0.76rem;
}

.calendar-hero {
    min-height: 340px;
}

.calendar-empty,
.calendar-connected {
    width: 100%;
    min-width: 0;
    text-align: center;
}

.calendar-page-error {
    margin-bottom: 18px;
    text-align: left;
}

.calendar-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--surface-field);
    color: var(--muted);
    font-size: 1.8rem;
}

.calendar-icon .icon {
    width: 22px;
    height: 22px;
}

.calendar-empty strong {
    display: block;
    font-size: 1rem;
    color: var(--ink);
}

.calendar-corporate-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--surface-field);
    text-align: left;
}

.calendar-corporate-status .mono {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-google-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}

.calendar-google-heading h2 {
    font-size: 1.08rem;
}

.calendar-google-heading p {
    margin-top: 5px;
    color: var(--muted-strong);
    font-size: 0.78rem;
}

.calendar-view-badges {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.status-inline.neutral {
    background: var(--surface-field);
    color: var(--muted-strong);
}

.google-calendar-frame-shell {
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.04);
}

.google-calendar-frame {
    display: block;
    width: 100%;
    height: 720px;
    border: 0;
    background: #fff;
}

.google-calendar-frame-agenda {
    display: none;
}

.calendar-mobile-agenda {
    display: none;
}

.calendar-access-note,
.calendar-embed-hint {
    margin-top: 14px;
    color: var(--muted-strong);
    font-size: 0.72rem;
    line-height: 1.5;
    text-align: left;
}

.calendar-embed-setup {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(360px, 1.28fr);
    align-items: start;
    gap: 28px;
    margin-top: 20px;
    padding: 22px;
    border: 1px solid rgba(0, 102, 204, 0.12);
    border-radius: 18px;
    background: linear-gradient(135deg, #f7fbff 0%, #ffffff 72%);
    text-align: left;
}

.calendar-embed-setup h3,
.calendar-setup-option h3,
.calendar-setting-block h3 {
    margin-top: 6px;
    font-size: 0.9rem;
}

.calendar-embed-setup > div > p,
.calendar-setup-option > div > p,
.calendar-setting-block > div > p {
    margin-top: 6px;
    color: var(--muted-strong);
    font-size: 0.74rem;
    line-height: 1.5;
}

.calendar-embed-form {
    width: 100%;
    text-align: left;
}

.calendar-embed-form.compact {
    margin-top: 16px;
}

.calendar-embed-form textarea {
    min-height: 92px;
    font-size: 0.74rem;
    line-height: 1.45;
    text-transform: none;
}

.calendar-no-events {
    margin-top: 18px;
}

.calendar-first-setup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
    text-align: left;
}

.calendar-setup-option {
    position: relative;
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--surface-field);
}

.calendar-setup-step {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.calendar-setup-help {
    margin-top: 16px;
}

.calendar-source-form {
    width: min(100%, 720px);
    margin: 24px auto 0;
    text-align: left;
}

.calendar-source-form.compact {
    width: 100%;
    margin: 0;
}

.calendar-source-settings {
    margin-top: 14px;
    text-align: left;
}

.calendar-source-settings > summary {
    width: fit-content;
    list-style: none;
    cursor: pointer;
}

.calendar-source-settings > summary::-webkit-details-marker {
    display: none;
}

.calendar-source-settings-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: var(--surface-field);
}

.calendar-integration-card {
    margin-top: 22px;
    padding: 20px;
}

.calendar-integration-card .calendar-source-settings {
    margin-top: 0;
}

.calendar-settings-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.calendar-setting-block {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: var(--surface-field);
    text-align: left;
}

.calendar-create-card {
    margin-top: 22px;
}

.calendar-event-form {
    max-width: 760px;
    margin-top: 22px;
}

.calendar-list {
    margin-top: 18px;
    text-align: left;
}

.calendar-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
    text-align: left;
}

.calendar-week-column {
    min-width: 0;
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    background: #fbfbfa;
    overflow: hidden;
}

.calendar-week-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.82);
}

.calendar-week-head strong {
    font-size: 0.8rem;
    color: var(--ink);
    text-transform: capitalize;
}

.calendar-week-head span {
    color: var(--muted);
    font-size: 0.72rem;
}

.calendar-week-events {
    display: grid;
    gap: 10px;
    padding: 12px;
    min-height: 360px;
}

.calendar-week-event {
    display: grid;
    gap: 6px;
    padding: 12px 12px 11px;
    border-left: 4px solid var(--event-color, #4285f4);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.calendar-week-event small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.calendar-week-event strong {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--ink);
}

.calendar-week-empty {
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    font-size: 0.72rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.68);
}

.my-area-focus {
    grid-template-columns: minmax(0, 458px) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.my-area-page {
    position: relative;
    z-index: 0;
    isolation: isolate;
    min-height: calc(100vh - 58px);
    min-height: calc(100dvh - 58px);
    margin: -22px -38px -36px;
    padding: 22px 38px 36px;
    background-color: #15253a;
}

.my-area-page::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0 0 0 250px;
    background-image: url("/static/brand/my-area-background.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

.my-area-page .page-kicker {
    color: rgba(255, 255, 255, 0.7);
}

.my-area-page .page-title-row h1,
.my-area-page .my-area-status-line {
    color: #fff;
    text-shadow: 0 2px 12px rgba(5, 16, 31, 0.2);
}

.my-area-page .content-card {
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(4, 17, 32, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.my-area-page .tab-switch {
    background: rgba(235, 239, 245, 0.82);
    box-shadow: 0 8px 22px rgba(4, 17, 32, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.timer-card {
    padding: 36px 34px 30px;
    max-width: 458px;
    display: grid;
}

.timer-state {
    margin-bottom: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.tab-switch .icon,
.thread-header .icon,
.timer-state .icon {
    color: currentColor;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #c7c7cc;
}

.status-dot.inline {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
}

.status-dot.is-idle {
    background: #c7c7cc;
}

.status-dot.is-active {
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}

.status-dot.is-paused {
    background: var(--orange);
}

.timer-state-copy,
.my-area-status-line {
    color: var(--muted-strong);
    font-size: 0.82rem;
    font-weight: 600;
}

.my-area-status-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.timer-copy {
    display: grid;
    gap: 14px;
    text-align: center;
    margin-bottom: 28px;
}

.timer-copy span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.timer-copy strong {
    font-size: clamp(3rem, 6vw, 4rem);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.075em;
}

.timer-copy small {
    color: var(--muted);
    font-size: 0.98rem;
}

.mini-stats.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 34px;
}

.mini-stats.compact > div {
    padding: 16px 18px 14px;
    border-radius: 18px;
    background: var(--surface-field);
    text-align: center;
}

.mini-stats.compact span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mini-stats.compact strong {
    margin-top: 6px;
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
}

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

.timer-actions form {
    min-width: 0;
}

.timer-card .primary-button,
.timer-card .secondary-button,
.timer-card .ghost-button,
.timer-card .emphasis-button {
    min-height: 62px;
    border-radius: 18px;
    font-size: 0.98rem;
    font-weight: 600;
}

.timer-card .primary-button {
    background: #156fcb;
}

.timer-card .secondary-button {
    background: #3d3d42;
    border-color: transparent;
    color: #fff;
}

.timer-card .ghost-button {
    background: #f4f4f6;
    border: 1px solid #ececf1;
}

.emphasis-button {
    min-height: 62px;
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
    font-weight: 600;
}

.history-card {
    padding: 24px 26px 22px;
    max-width: 458px;
}

.history-card .card-heading {
    margin-bottom: 6px;
}

.history-card .card-heading h2 {
    color: #b6b6bf;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.history-card .card-heading p {
    margin-top: 8px;
    font-size: 0.78rem;
}

.timeline-row {
    padding: 18px 0;
    display: flex;
    gap: 12px;
}

.timeline-marker {
    width: 10px;
    min-width: 10px;
    display: grid;
    justify-items: center;
}

.timeline-bullet {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent);
    margin-top: 4px;
}

.timeline-bullet.pause {
    background: var(--orange);
}

.timeline-line {
    width: 1px;
    height: calc(100% + 8px);
    margin-top: 4px;
    background: var(--line);
}

.detail-heading {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--ink);
}

.history-card .table-subcopy {
    margin-top: 6px;
    font-size: 0.84rem;
    color: var(--muted);
}

.timer-card.is-active .timer-state-copy,
.my-area-status-line .status-dot.is-active + * {
    color: #1f9f75;
}

.timer-card.is-paused .timer-state-copy,
.my-area-status-line .status-dot.is-paused + * {
    color: #d97706;
}

.timer-card.is-finished .timer-state-copy {
    color: var(--accent);
}

.timer-card.is-idle .mini-stats.compact {
    display: none;
}

.timer-card.is-idle .timer-copy {
    margin-bottom: 40px;
}

.timer-card.is-idle .primary-button {
    min-height: 64px;
}

.timer-card.is-idle .timer-copy small {
    display: none;
}

.timer-card.is-active .timer-state,
.timer-card.is-paused .timer-state {
    margin-bottom: 36px;
}

.timer-card.is-finished .timer-state {
    margin-bottom: 34px;
}

.timer-card.is-finished .mini-stats.compact {
    margin-bottom: 26px;
}

.timer-card.is-finished .emphasis-button {
    background: #e8f1ff;
    color: var(--accent);
}

.inbox-layout {
    grid-template-columns: 304px minmax(0, 1fr);
    align-items: stretch;
    min-height: 700px;
}

.mobile-thread-back {
    display: none;
}

.conversations-card,
.thread-card {
    overflow: hidden;
}

.conversations-card {
    padding: 0;
    align-self: stretch;
}

.conversation-preview {
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.conversation-preview.active {
    background: #eef5ff;
    box-shadow: inset 0 0 0 1px rgba(40, 120, 240, 0.14);
}

.conversation-preview:hover {
    background: #fafafa;
}

.thread-card {
    display: flex;
    flex-direction: column;
    min-height: 700px;
}

.thread-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line-soft);
}

.thread-messages {
    flex: 1;
    padding: 18px 20px;
    display: grid;
    align-content: start;
    gap: 18px;
    overflow: auto;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
}

.message-row {
    display: flex;
}

.message-row.mine {
    justify-content: flex-end;
}

.message-bubble {
    max-width: 78%;
    padding: 12px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    line-height: 1.55;
}

.message-row.mine .message-bubble {
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.message-row.theirs .message-bubble {
    background: var(--surface-field);
    color: var(--ink);
    border-bottom-left-radius: 6px;
}

.message-time {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.64rem;
}

.thread-compose {
    padding: 14px 18px;
    border-top: 1px solid var(--line-soft);
    background: var(--surface);
}

.thread-compose form {
    display: flex;
    gap: 12px;
    align-items: center;
}

.thread-compose textarea {
    min-height: 48px;
    max-height: 140px;
    border-radius: 18px;
    background: #f5f5f7;
    border-color: transparent;
}

.circle-send {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #9ca3af;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.circle-send:disabled {
    background: var(--muted);
    cursor: default;
}

.assistant-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
    gap: 22px;
    align-items: start;
}

.assistant-ai-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.assistant-ai-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--muted-strong);
    font-size: 0.68rem;
    font-weight: 600;
}

.assistant-ai-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a9adb5;
}

.assistant-ai-status.is-connected > span {
    background: #2fbf83;
    box-shadow: 0 0 0 4px rgba(47, 191, 131, 0.12);
}

.assistant-ai-notice {
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid #cfe7dc;
    border-radius: 13px;
    background: #f2faf6;
    color: #27664e;
    font-size: 0.72rem;
    line-height: 1.45;
}

.assistant-ai-notice.is-error {
    border-color: #f3caca;
    background: #fff5f5;
    color: #a63e3e;
}

.assistant-ai-config-card {
    margin-bottom: 22px;
    padding: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
    gap: 24px;
    align-items: end;
}

.assistant-ai-config-card h2 {
    margin-top: 3px;
    font-size: 1rem;
}

.assistant-ai-config-card p {
    max-width: 720px;
    margin-top: 7px;
    color: var(--muted-strong);
    line-height: 1.5;
}

.assistant-ai-config-card small {
    display: block;
    margin-top: 9px;
    color: var(--muted);
}

.assistant-ai-config-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.assistant-ai-config-form label {
    display: grid;
    gap: 6px;
    color: var(--muted-strong);
    font-size: 0.65rem;
    font-weight: 600;
}

.assistant-ai-config-form input {
    min-height: 38px;
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: #f7f7f9;
    padding: 0 12px;
    color: var(--ink);
}

.assistant-ai-remove-form {
    grid-column: 2;
    justify-self: end;
    margin-top: -12px;
}

.assistant-ai-managed-copy {
    display: grid;
    gap: 4px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #f5f7fa;
}

.assistant-ai-managed-copy span,
.assistant-ai-inline-error {
    color: var(--muted-strong);
    font-size: 0.66rem;
}

.assistant-ai-inline-error {
    margin-top: 6px;
    color: #a95a45;
}

.assistant-thread-card {
    display: flex;
    flex-direction: column;
    min-height: 760px;
    overflow: hidden;
}

.assistant-thread-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.assistant-area-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.my-area-assistant-layout .assistant-thread-card {
    background: rgba(255, 255, 255, 0.95);
}

.assistant-quick-prompts {
    padding: 14px 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.assistant-quick-prompts .switch-chip {
    cursor: pointer;
}

.assistant-messages {
    min-height: 480px;
}

.assistant-bubble p + p {
    margin-top: 10px;
}

.assistant-bubble-system {
    background: #f4f7fb;
}

.assistant-compose textarea {
    min-height: 62px;
}

.assistant-side-grid {
    display: grid;
    gap: 22px;
}

.assistant-side-card {
    padding: 20px;
}

.assistant-side-item {
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
}

.assistant-side-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.assistant-side-item strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
}

.assistant-side-item p {
    margin-top: 6px;
}

@media (max-width: 720px) {
    .assistant-ai-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .assistant-ai-config-card,
    .assistant-ai-config-form {
        grid-template-columns: 1fr;
    }

    .assistant-ai-config-form .primary-button {
        width: 100%;
    }

    .assistant-ai-remove-form {
        grid-column: 1;
        justify-self: start;
        margin-top: -10px;
    }

    .assistant-area-head-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    padding: 24px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.18);
}

.modal-card {
    width: min(100%, 460px);
    max-height: calc(100vh - 48px);
    padding: 20px;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-wide {
    width: min(100%, 700px);
}

.stack-form {
    display: grid;
    gap: 14px;
}

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

.form-error {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff1f2;
    color: var(--red);
    font-size: 0.76rem;
}

.form-success {
    padding: 12px 14px;
    border-radius: 12px;
    background: #edf8f2;
    color: #1b7650;
    font-size: 0.76rem;
    line-height: 1.45;
}

.login-page {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top, rgba(255, 248, 239, 0.92) 0%, rgba(255, 255, 255, 0.96) 48%, #ffffff 100%);
}

.login-background-art {
    position: absolute;
    inset: 0;
    background-image: url("/static/brand/login-background.png?v=20260706b");
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(1180px, 92vw);
    opacity: 0.3;
    filter: saturate(0.96);
    pointer-events: none;
}

.login-layout {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    padding: 32px 20px 56px;
}

.login-brand {
    text-align: center;
    margin-bottom: 36px;
}

.login-brand-logo {
    width: 186px;
    max-width: 100%;
    margin: 0 auto 14px;
}

.login-brand p,
.login-footnote {
    color: var(--muted);
    font-size: 0.72rem;
}

.login-card {
    padding: 28px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(14px);
}

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

.login-form label {
    gap: 8px;
}

.login-form .primary-button {
    min-height: 42px;
}

.login-test-copy {
    color: #222;
    font-size: 0.64rem;
    line-height: 1.45;
    text-align: center;
}

.login-test-profiles {
    display: grid;
    gap: 4px;
    color: #383838;
    font-size: 0.58rem;
    line-height: 1.4;
    text-align: center;
}

.login-support-link {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 620;
    text-align: center;
}

.recovery-layout {
    width: min(100%, 460px);
}

.recovery-card {
    display: grid;
    gap: 22px;
}

.recovery-heading {
    display: grid;
    gap: 8px;
}

.recovery-step {
    color: var(--accent);
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.recovery-heading h1 {
    margin: 0;
    color: var(--ink);
    font-size: 1.45rem;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.recovery-heading p,
.recovery-confirmation p {
    margin: 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.55;
}

.recovery-confirmation {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid #cbe8d8;
    border-radius: 15px;
    background: #f4faf7;
}

.recovery-confirmation strong {
    color: #1b7650;
    font-size: 0.76rem;
}

.recovery-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.recovery-links a {
    color: var(--muted-strong);
    font-size: 0.66rem;
    font-weight: 620;
}

.recovery-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.password-reset-review-card {
    margin-bottom: 22px;
    padding: 22px;
}

.password-reset-review-list {
    display: grid;
    gap: 12px;
    margin-top: 17px;
}

.password-reset-review-row {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(360px, 1.2fr);
    gap: 22px;
    align-items: center;
    padding: 17px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: #fafbfc;
}

.password-reset-review-person {
    display: flex;
    align-items: center;
    gap: 11px;
}

.password-reset-review-person > div:last-child,
.password-reset-review-form {
    display: grid;
    gap: 4px;
}

.password-reset-review-person strong {
    color: var(--ink);
    font-size: 0.74rem;
}

.password-reset-review-person span,
.password-reset-review-person small {
    color: var(--muted);
    font-size: 0.63rem;
}

.password-reset-review-form {
    gap: 10px;
}

.password-reset-review-form label {
    display: grid;
    gap: 6px;
    color: var(--muted-strong);
    font-size: 0.61rem;
    font-weight: 680;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.password-reset-review-form input {
    min-height: 38px;
    background: #fff;
    font-size: 0.69rem;
    font-weight: 450;
    letter-spacing: 0;
    text-transform: none;
}

.password-reset-code-card {
    display: grid;
    gap: 24px;
    max-width: 760px;
    padding: 28px;
}

.password-reset-code-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.password-reset-code-person > div:last-child {
    display: grid;
    gap: 3px;
}

.password-reset-code-person span,
.password-reset-code-person small {
    color: var(--muted);
    font-size: 0.65rem;
}

.password-reset-code-person strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.password-reset-code-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid #dce4ec;
    border-radius: 17px;
    background: #f5f8fa;
}

.password-reset-code-value code {
    color: var(--ink);
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    font-weight: 720;
    letter-spacing: 0.08em;
}

.password-reset-protocol {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.55;
}

.password-reset-protocol strong {
    color: var(--ink);
}

@media (max-width: 760px) {
    .password-reset-review-row {
        grid-template-columns: 1fr;
    }

    .password-reset-code-value {
        align-items: stretch;
        flex-direction: column;
    }

    .password-reset-code-value code {
        text-align: center;
    }
}

.role-inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-inline-form select {
    min-width: 126px;
    min-height: 34px;
    padding: 0 30px 0 10px;
    border-radius: 10px;
    font-size: 0.7rem;
}

.login-footnote {
    margin-top: 18px;
    text-align: center;
    color: var(--ink);
}

.workers-table-card,
.reports-card,
.project-list-card {
    overflow-x: auto;
}

.announcement-panel {
    padding: 20px;
}

.announcement-panel .feed-title-line {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.author-line {
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.project-list {
    display: grid;
    gap: 12px;
}

.project-type-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 26px;
}

.project-type-overview-item {
    --project-type-color: #667085;
    --project-type-soft: #f2f4f7;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.project-type-overview-item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--project-type-color) 28%, var(--line-soft));
    background: #fff;
}

.project-type-overview-item.audiobook,
.project-type-section.audiobook,
.project-studio-profile.audiobook,
.project-type-choice.audiobook,
.project-type-badge.audiobook,
.project-type-inline.audiobook {
    --project-type-color: #b85e2d;
    --project-type-soft: #fbefe7;
}

.project-type-overview-item.audioguide,
.project-type-section.audioguide,
.project-studio-profile.audioguide,
.project-type-choice.audioguide,
.project-type-badge.audioguide,
.project-type-inline.audioguide {
    --project-type-color: #256f8e;
    --project-type-soft: #eaf5f8;
}

.project-type-overview-item.dubbing,
.project-type-section.dubbing,
.project-studio-profile.dubbing,
.project-type-choice.dubbing,
.project-type-badge.dubbing,
.project-type-inline.dubbing {
    --project-type-color: #8f5b70;
    --project-type-soft: #f7edf1;
}

.project-type-overview-item.other,
.project-type-section.other,
.project-studio-profile.other,
.project-type-choice.other,
.project-type-badge.other,
.project-type-inline.other {
    --project-type-color: #65707f;
    --project-type-soft: #f0f2f5;
}

.project-type-overview-icon,
.project-type-section-icon,
.project-type-choice-icon {
    display: inline-grid;
    place-items: center;
    color: var(--project-type-color);
    background: var(--project-type-soft);
}

.project-type-overview-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.project-type-overview-item span:nth-child(2) {
    min-width: 0;
}

.project-type-overview-item strong,
.project-type-overview-item small {
    display: block;
}

.project-type-overview-item strong {
    color: var(--ink);
    font-size: 0.78rem;
}

.project-type-overview-item small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.65rem;
}

.project-type-overview-item b,
.project-type-count {
    color: var(--project-type-color);
    font-size: 0.76rem;
}

.project-type-sections {
    display: grid;
    gap: 24px;
}

.project-type-section {
    --project-type-color: #65707f;
    --project-type-soft: #f0f2f5;
    scroll-margin-top: 24px;
}

.project-type-section-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 0 5px;
}

.project-type-section-icon {
    width: 31px;
    height: 31px;
    border-radius: 10px;
}

.project-type-section-head h3 {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 680;
    letter-spacing: -0.015em;
}

.project-type-section-head p {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.67rem;
}

.project-type-section .empty-state {
    padding: 26px 16px;
}

.project-type-count {
    min-width: 28px;
    padding: 5px 8px;
    border-radius: 999px;
    text-align: center;
    background: var(--project-type-soft);
}

.project-format-summary {
    display: block;
    max-width: 100%;
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(110px, auto) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-top: 1px solid var(--line-soft);
}

.project-list-item.has-audiobook-progress {
    grid-template-columns: minmax(0, 1.35fr) minmax(92px, auto) minmax(150px, 0.72fr) minmax(190px, 1fr);
}

.project-list-item:first-child {
    border-top: 0;
}

.project-list-item:hover {
    background: var(--surface-alt);
}

.deadline-item:hover,
.kanban-card:hover,
.announcement-panel:hover,
.metric-box:hover,
.content-card.hoverable:hover {
    background: #fcfcfd;
}

.project-hours {
    display: grid;
    gap: 8px;
}

.project-audiobook-mini-progress {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.project-mini-progress-row {
    --mini-progress-color: #c36a35;
    display: grid;
    gap: 4px;
}

.project-mini-progress-row.editing {
    --mini-progress-color: #277b9d;
}

.project-mini-progress-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted-strong);
    font-size: 0.62rem;
    line-height: 1;
}

.project-mini-progress-row strong {
    color: var(--mini-progress-color);
    font-size: 0.61rem;
    font-weight: 650;
}

.project-mini-progress-track {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-field);
}

.project-mini-progress-track i {
    display: block;
    width: var(--mini-progress);
    height: 100%;
    border-radius: inherit;
    background: var(--mini-progress-color);
}

.project-hours-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted-strong);
    font-size: 0.72rem;
}

.project-timeline-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-timeline-inline small {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
}

.project-detail-header {
    margin-bottom: 18px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.project-details-card {
    margin-bottom: 22px;
    padding: 22px;
    overflow: hidden;
}

.project-type-inline,
.project-type-badge {
    --project-type-color: #65707f;
    --project-type-soft: #f0f2f5;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    color: var(--project-type-color);
    background: var(--project-type-soft);
    font-size: 0.63rem;
    font-weight: 700;
}

.project-type-inline {
    margin-right: 8px;
    padding: 4px 8px;
    vertical-align: 1px;
}

.project-type-badge {
    padding: 6px 10px;
}

.project-studio-profile {
    --project-type-color: #65707f;
    --project-type-soft: #f0f2f5;
    margin-bottom: 16px;
    padding: 17px;
    border: 1px solid color-mix(in srgb, var(--project-type-color) 18%, var(--line-soft));
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--project-type-soft) 72%, #fff), #fff 62%);
}

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

.project-studio-profile-head h3 {
    margin-top: 4px;
    color: var(--ink);
    font-size: 0.94rem;
}

.project-studio-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.project-studio-data-grid > div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.72);
}

.project-studio-data-grid span,
.project-studio-data-grid strong {
    display: block;
}

.project-studio-data-grid span {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.57rem;
    font-weight: 750;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.project-studio-data-grid strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}

.project-metadata-form {
    gap: 12px;
}

.project-type-fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

.project-type-fieldset legend {
    margin-bottom: 7px;
    color: var(--muted-strong);
    font-size: 0.66rem;
    font-weight: 600;
}

.project-type-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.project-type-choice {
    --project-type-color: #65707f;
    --project-type-soft: #f0f2f5;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
    cursor: pointer;
}

.project-type-choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--project-type-color) 45%, var(--line-soft));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--project-type-color) 18%, transparent);
    background: #fff;
}

.project-type-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.project-type-choice-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.project-type-choice strong,
.project-type-choice small {
    display: block;
}

.project-type-choice strong {
    color: var(--ink);
    font-size: 0.71rem;
}

.project-type-choice small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.56rem;
    line-height: 1.35;
}

.project-specific-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 13px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.58);
}

.project-specific-fields.audioguide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-specific-fields[hidden] {
    display: none;
}

.project-specific-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted-strong);
    font-size: 0.64rem;
}

.three-up-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-metadata-actions {
    display: flex;
    justify-content: flex-end;
}

.audiobook-progress-panel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--project-type-color) 14%, var(--line-soft));
}

.audiobook-progress-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.audiobook-progress-heading h4 {
    margin-top: 4px;
    color: var(--ink);
    font-size: 0.83rem;
}

.audiobook-progress-heading > small {
    color: var(--muted);
    font-size: 0.62rem;
}

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

.audiobook-progress-metric {
    --audiobook-progress-color: #c36a35;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
}

.audiobook-progress-metric.editing {
    --audiobook-progress-color: #277b9d;
}

.audiobook-progress-metric.overall {
    --audiobook-progress-color: #242323;
    background: rgba(255, 255, 255, 0.94);
}

.audiobook-progress-metric > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.audiobook-progress-metric span {
    color: var(--muted-strong);
    font-size: 0.62rem;
    font-weight: 650;
}

.audiobook-progress-metric strong {
    color: var(--audiobook-progress-color);
    font-size: 0.94rem;
}

.audiobook-progress-track {
    height: 5px;
    margin: 9px 0 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-field);
}

.audiobook-progress-track i {
    display: block;
    width: var(--book-progress);
    height: 100%;
    border-radius: inherit;
    background: var(--audiobook-progress-color);
}

.audiobook-progress-metric small,
.audiobook-progress-missing {
    color: var(--muted);
    font-size: 0.58rem;
    line-height: 1.4;
}

.audiobook-progress-missing {
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.project-create-modal {
    width: min(100%, 860px);
}

.project-details-card.is-editing {
    border-color: rgba(14, 112, 216, 0.24);
    box-shadow: 0 16px 40px rgba(29, 72, 118, 0.09);
}

.project-details-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.project-details-heading h2 {
    margin-top: 5px;
    font-size: 1.02rem;
}

.project-details-heading p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.76rem;
}

.project-details-notice {
    margin: 0 0 16px;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 0.73rem;
    font-weight: 600;
}

.project-details-notice.success {
    color: #147451;
    background: #eaf8f2;
}

.project-details-notice.error {
    color: #a32e3d;
    background: #fff0f2;
}

.project-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) repeat(2, minmax(260px, 0.92fr));
    gap: 14px;
    align-items: stretch;
}

.project-detail-pane {
    min-width: 0;
    min-height: 248px;
    padding: 17px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: rgba(247, 248, 250, 0.76);
}

.project-detail-pane-head,
.project-detail-pane-title {
    display: flex;
    align-items: center;
}

.project-detail-pane-head {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.project-detail-pane-title {
    gap: 8px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
}

.project-detail-pane-title .icon {
    color: var(--accent);
}

.project-detail-pane-head > small {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
}

.project-details-copy {
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.72;
    white-space: pre-wrap;
}

.project-details-copy-form {
    display: grid;
    gap: 11px;
}

.project-details-copy-form textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.6;
}

.project-details-copy-form .primary-button {
    justify-self: start;
}

.project-detail-empty {
    min-height: 170px;
    display: grid;
    place-content: center;
    gap: 6px;
    padding: 18px;
    text-align: center;
    color: var(--muted);
}

.project-detail-empty.compact {
    min-height: 118px;
    padding: 14px 8px;
}

.project-detail-empty strong {
    color: var(--muted-strong);
    font-size: 0.78rem;
}

.project-detail-empty p {
    max-width: 280px;
    font-size: 0.7rem;
    line-height: 1.5;
}

.project-upload-form {
    display: grid;
    gap: 9px;
    margin-bottom: 14px;
}

.project-file-picker {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px dashed #b8c3d0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    cursor: pointer;
}

.project-file-picker:hover {
    border-color: var(--accent);
    background: #fff;
}

.project-file-picker input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.project-file-picker > span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--ink);
    font-size: 0.73rem;
    font-weight: 650;
}

.project-file-picker [data-project-file-label] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-file-picker > small {
    color: var(--muted);
    font-size: 0.64rem;
}

.project-file-list,
.project-checklist-list {
    display: grid;
    gap: 7px;
    max-height: 286px;
    overflow-y: auto;
    padding-right: 3px;
}

.project-file-row,
.project-checklist-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.82);
}

.project-file-row:hover,
.project-checklist-row:hover {
    background: #fff;
}

.project-file-link {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    color: inherit;
}

.project-file-link > span:last-child,
.project-check-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.project-file-link strong,
.project-check-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-file-link small,
.project-check-copy small {
    color: var(--muted);
    font-size: 0.61rem;
}

.project-file-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--accent);
    background: var(--accent-soft);
}

.project-row-delete,
.project-check-toggle {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
}

.project-row-delete {
    color: var(--muted);
}

.project-row-delete:hover {
    color: #c33c4d;
    background: #fff0f2;
}

.project-check-toggle {
    border: 1.5px solid #b7c1cc;
    color: #fff;
    cursor: pointer;
}

.project-check-toggle:hover {
    border-color: var(--accent);
}

.project-check-toggle.readonly {
    cursor: default;
}

.project-checklist-row.is-completed .project-check-toggle {
    border-color: var(--accent);
    background: var(--accent);
}

.project-checklist-row.is-completed .project-check-copy strong {
    color: var(--muted);
    text-decoration: line-through;
}

.project-checklist-progress {
    height: 5px;
    margin: -3px 0 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e7ed;
}

.project-checklist-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 180ms ease;
}

.project-checklist-add-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    margin-bottom: 13px;
}

.project-checklist-add-form input {
    min-width: 0;
}

.project-checklist-add-form .secondary-button {
    width: 42px;
    min-height: 42px;
    padding: 0;
}

.project-check-copy {
    flex: 1;
}

.project-workspace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.project-work-card {
    min-width: 0;
    overflow-x: auto;
}

.project-work-head {
    padding: 20px 20px 0;
}

.detail-card {
    padding: 18px;
}

.detail-card h2,
.content-card h2 {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
}

.section-copy {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.74rem;
}

.detail-table th:last-child,
.detail-table td:last-child,
.data-table th:last-child,
.data-table td:last-child {
    min-width: 140px;
}

.inline-form {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-field);
}

.inline-form .time-entry-grid {
    margin: 0;
}

.audiobook-time-entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.audiobook-time-entry-grid .align-end {
    grid-column: 1 / -1;
    justify-self: end;
}

.project-log-notice {
    margin: 0 18px;
    padding: 9px 12px;
    border-radius: 11px;
    font-size: 0.67rem;
    font-weight: 600;
}

.project-log-notice.success {
    color: #147451;
    background: #eaf8f2;
}

.project-log-notice.error {
    color: #a32e3d;
    background: #fff0f2;
}

.audiobook-phase-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #975027;
    background: #fbefe7;
    font-size: 0.62rem;
    font-weight: 700;
}

.audiobook-phase-chip.edicion {
    color: #216b87;
    background: #eaf5f8;
}

.team-inline-form {
    border-radius: 18px;
    border-bottom: 0;
}

.project-team-form {
    gap: 16px;
}

.project-team-head {
    align-items: flex-start;
    margin-bottom: 0;
}

.compact-team-stack .calendar-row {
    padding: 14px 0;
}

.support-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.support-option {
    padding: 12px 14px;
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
}

.support-option input {
    margin: 0 0 2px;
}

.support-option span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
}

.support-option small {
    color: var(--muted);
    font-size: 0.72rem;
}

.team-stack {
    gap: 0;
}

.project-team-edit-panel {
    border: 1px solid var(--line-soft);
    border-radius: 18px;
}

.project-team-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.support-picker-modal {
    max-height: 232px;
    overflow-y: auto;
    padding-right: 4px;
}

.project-comment-form {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    gap: 16px;
    margin: 0;
    align-items: start;
}

.project-comment-body {
    min-width: 0;
}

.project-comment-form label {
    align-content: start;
}

.project-comment-form textarea {
    min-height: 118px;
    resize: vertical;
}

.project-comments-empty {
    padding: 20px;
}

.comment-meta span {
    color: var(--muted);
    font-size: 0.7rem;
}

.report-total {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 600;
}

.empty-state {
    padding: 56px 18px;
    text-align: center;
    color: var(--muted);
    font-size: 0.8rem;
}

@media (max-width: 1180px) {
    .stats-row,
    .three-column-grid,
    .kanban-grid,
    .time-entry-grid,
    .filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-hero-row {
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 0 0 24px;
    }

    .dashboard-hero-art {
        height: clamp(240px, 34vw, 340px);
        overflow: hidden;
        transform: none;
    }

    .dashboard-hero-art img {
        object-position: center top;
    }

    .dashboard-summary-card {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .dashboard-focus-grid,
    .dashboard-top-panels {
        grid-template-columns: 1fr;
    }

    .my-area-focus,
    .project-workspace-grid,
    .task-page-grid {
        grid-template-columns: 1fr;
    }

    .project-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-detail-copy-pane {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .timer-card,
    .history-card {
        width: 100%;
        max-width: 680px;
    }

    .task-detail-panel {
        position: static;
        top: auto;
    }

    .task-page-grid.has-detail .task-detail-panel {
        order: -1;
    }

    .calendar-week-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    html {
        scroll-padding-top: 74px;
    }

    body {
        overflow-x: hidden;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 80;
        width: 100%;
        height: 58px;
        min-height: 0;
        display: flex;
        overflow: hidden;
        background: #242323;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
        transition: height 220ms ease;
    }

    .sidebar.menu-open {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }

    .mobile-nav-header {
        flex: 0 0 58px;
        min-height: 58px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-menu-toggle {
        width: 38px;
        height: 38px;
        padding: 9px 7px;
        display: grid;
        align-content: center;
        gap: 5px;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        width: 24px;
        height: 2px;
        display: block;
        border-radius: 999px;
        background: #fff;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .sidebar.menu-open .mobile-menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .sidebar.menu-open .mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .sidebar.menu-open .mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-nav-title {
        min-width: 0;
        overflow: hidden;
        color: #fff;
        font-size: 0.82rem;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar .brand-mark {
        margin-top: auto;
        display: none;
        min-height: 58px;
        padding: 14px 18px 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sidebar.menu-open .brand-mark {
        display: flex;
    }

    .sidebar .brand-logo {
        width: 64px;
    }

    .sidebar-nav {
        min-width: 0;
        display: none;
        padding: 20px 12px 18px;
        gap: 3px;
    }

    .sidebar.menu-open .sidebar-nav {
        display: grid;
    }

    .sidebar .nav-link {
        width: 100%;
        min-height: 44px;
        padding: 0 14px;
        flex: 0 0 auto;
        font-size: 0.78rem;
        white-space: normal;
    }

    .sidebar-footer {
        margin-top: 0;
        padding: 16px 18px;
        display: none;
        gap: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sidebar.menu-open .sidebar-footer {
        display: grid;
    }

    .sidebar-footer .avatar {
        width: 32px;
        height: 32px;
    }

    .logout-link {
        min-height: 38px;
        padding: 0 4px;
        font-size: 0.74rem;
    }

    .desktop-crumb,
    .mobile-bar {
        display: none;
    }

    .main-content {
        padding: 22px 24px 32px;
    }

    .dashboard-page {
        margin: -22px -24px -32px;
        padding: 22px 24px 32px;
    }

    .my-area-page {
        margin: -22px -24px -32px;
        padding: 22px 24px 32px;
    }

    .my-area-page::before {
        inset: 58px 0 0;
    }

    .toast-stack {
        top: 116px;
        right: 14px;
        max-width: calc(100vw - 28px);
    }

    .two-column-grid,
    .inbox-layout,
    .assistant-layout,
    .project-list-item {
        grid-template-columns: 1fr;
    }

    .project-list-item {
        gap: 12px;
    }

    .project-list-item.has-audiobook-progress {
        grid-template-columns: 1fr;
    }

    .project-hours {
        width: 100%;
    }

    .calendar-week-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-embed-setup,
    .calendar-settings-sections {
        grid-template-columns: 1fr;
    }

    .calendar-week-events {
        min-height: 220px;
    }

    .inbox-layout {
        min-height: 0;
    }

    .thread-card {
        min-height: 520px;
    }

    .data-table,
    .detail-table {
        min-width: 680px;
    }
}

@media (max-width: 820px) {
    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table tr {
        padding: 10px 0;
        border-top: 1px solid var(--line-soft);
    }

    .responsive-table tbody tr:first-child {
        border-top: 0;
    }

    .responsive-table td {
        padding: 7px 16px;
        border-top: 0;
        overflow-wrap: anywhere;
    }

    .responsive-table td:not([data-label=""]) {
        display: grid;
        grid-template-columns: minmax(96px, 0.32fr) minmax(0, 1fr);
        align-items: center;
        gap: 14px;
    }

    .responsive-table td:not([data-label=""])::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .responsive-table td[data-label=""] {
        text-align: center;
    }

    .responsive-table .role-inline-form {
        min-width: 0;
        flex-wrap: wrap;
    }

    .responsive-table .role-inline-form select {
        flex: 1 1 150px;
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .main-content {
        padding: 16px 14px 26px;
    }

    .project-type-overview,
    .project-type-picker,
    .project-specific-fields,
    .project-specific-fields.audioguide,
    .three-up-fields {
        grid-template-columns: 1fr;
    }

    .project-type-overview {
        gap: 8px;
        margin-bottom: 20px;
    }

    .project-type-overview-item {
        padding: 11px 12px;
    }

    .project-type-sections {
        gap: 20px;
    }

    .project-studio-profile {
        padding: 14px;
    }

    .project-studio-profile-head {
        align-items: flex-start;
    }

    .project-metadata-actions .primary-button {
        width: 100%;
    }

    .audiobook-progress-heading {
        flex-direction: column;
    }

    .audiobook-progress-grid {
        grid-template-columns: 1fr;
    }

    .audiobook-time-entry-grid .align-end {
        width: 100%;
    }

    .dashboard-page {
        margin: -16px -14px -26px;
        padding: 16px 14px 26px;
        background-attachment: scroll;
    }

    .my-area-page {
        margin: -16px -14px -26px;
        padding: 16px 14px 26px;
    }

    .page-head {
        margin-bottom: 16px;
    }

    .page-title-row,
    .card-heading,
    .deadline-top,
    .author-line,
    .button-row,
    .modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title-row h1 {
        font-size: 1.85rem;
        line-height: 1.08;
    }

    .page-title-row > .primary-button,
    .page-title-row > .secondary-button,
    .modal-actions > .primary-button,
    .modal-actions > .secondary-button {
        width: 100%;
    }

    .stats-row,
    .three-column-grid,
    .kanban-grid,
    .time-entry-grid,
    .filter-form,
    .split-fields,
    .mini-stats,
    .metric-mini-grid,
    .task-filter-form,
    .task-list-row,
    .dashboard-assistant-report,
    .dashboard-assistant-form,
    .project-comment-form,
    .support-picker,
    .calendar-week-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-row,
    .dashboard-focus-grid,
    .two-column-grid,
    .stats-row,
    .three-column-grid,
    .kanban-grid,
    .project-workspace-grid {
        gap: 16px;
    }

    .project-details-card {
        padding: 17px;
    }

    .project-details-heading {
        flex-direction: column;
        align-items: stretch;
    }

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

    .project-detail-copy-pane {
        grid-column: auto;
    }

    .project-detail-pane {
        min-height: 0;
    }

    .dashboard-hero-row {
        margin-bottom: 18px;
    }

    .dashboard-hero-art {
        height: clamp(190px, 54vw, 250px);
    }

    .dashboard-hero-art img {
        object-position: center top;
    }

    .dashboard-summary-card,
    .dashboard-assistant-card {
        height: auto;
        min-height: 0;
    }

    .dashboard-assistant-report {
        gap: 10px;
    }

    .dashboard-assistant-head,
    .assistant-report-title {
        align-items: flex-start;
    }

    .dashboard-assistant-narrative {
        align-content: start;
    }

    .dashboard-assistant-narrative p {
        max-width: none;
    }

    .dashboard-assistant-form .primary-button {
        width: 100%;
    }

    .dashboard-day-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .feed-row,
    .calendar-row,
    .task-list-item:not(.deadline-list-item),
    .deadline-list-row {
        flex-direction: column;
        align-items: stretch;
    }

    .feed-row time,
    .task-side,
    .deadline-side {
        align-self: flex-start;
        align-items: flex-start;
    }

    .task-side,
    .task-list-side,
    .task-filter-actions,
    .task-subtask-row {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .task-filter-actions > * {
        flex: 1 1 120px;
    }

    .content-card,
    .metric-box,
    .kanban-column,
    .announcement-panel,
    .stack-card,
    .table-card {
        padding: 16px;
        border-radius: 18px;
    }

    .workers-table-card {
        padding: 0;
    }

    .project-list-card,
    .reports-card,
    .project-work-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .project-list-item {
        padding: 16px 4px;
    }

    .project-work-head {
        padding: 0 0 14px;
    }

    .inline-form {
        margin: 0 -16px;
        padding: 16px;
    }

    .assignment-group + .assignment-group {
        margin-top: 24px;
    }

    .assignment-group-head {
        align-items: flex-start;
    }

    .dashboard-summary-grid {
        grid-template-columns: 1fr;
    }

    .avatar-picker-panel {
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }

    .data-table th,
    .data-table td,
    .detail-table th,
    .detail-table td {
        padding: 13px 12px;
    }

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table tr {
        padding: 10px 0;
        border-top: 1px solid var(--line-soft);
    }

    .responsive-table tbody tr:first-child {
        border-top: 0;
    }

    .responsive-table td {
        padding: 7px 16px;
        border-top: 0;
        overflow-wrap: anywhere;
    }

    .responsive-table td:not([data-label=""]) {
        display: grid;
        grid-template-columns: minmax(82px, 0.38fr) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
    }

    .responsive-table td:not([data-label=""])::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .responsive-table td[data-label=""] {
        text-align: center;
    }

    .responsive-table .role-inline-form {
        min-width: 0;
        flex-wrap: wrap;
    }

    .responsive-table .role-inline-form select {
        flex: 1 1 130px;
        min-width: 0;
    }

    .project-work-card {
        overflow-x: visible;
    }

    .timer-card,
    .history-card {
        max-width: none;
    }

    .timer-card {
        padding: 24px 18px;
    }

    .timer-copy strong {
        font-size: clamp(2.4rem, 14vw, 3.4rem);
    }

    .timer-actions {
        grid-template-columns: 1fr;
    }

    .inbox-layout.has-contact .conversations-card,
    .inbox-layout:not(.has-contact) .thread-card {
        display: none;
    }

    .mobile-thread-back {
        display: inline-flex;
        margin-bottom: 12px;
        color: var(--accent);
        font-size: 0.74rem;
        font-weight: 600;
    }

    .thread-card {
        min-height: calc(100dvh - 230px);
    }

    .thread-compose form {
        flex-direction: column;
        align-items: stretch;
    }

    .circle-send {
        width: 100%;
    }

    .message-bubble {
        max-width: 92%;
    }

    .modal-backdrop {
        padding: 12px;
        align-items: start;
        overflow-y: auto;
    }

    .modal-card {
        max-height: calc(100dvh - 24px);
        padding: 18px;
        border-radius: 18px;
    }

    .calendar-hero {
        min-height: 0;
    }

    .dashboard-agenda-timeline {
        max-height: 360px;
    }

    .dashboard-agenda-event {
        grid-template-columns: 48px 14px minmax(0, 1fr);
    }

    .calendar-google-heading {
        flex-direction: column;
        gap: 14px;
    }

    .calendar-view-badges {
        justify-content: flex-start;
    }

    .calendar-google-view.has-mobile-agenda .google-calendar-frame-shell,
    .calendar-google-view.has-mobile-agenda .calendar-access-note {
        display: none;
    }

    .calendar-mobile-agenda {
        display: block;
        margin-top: 18px;
        text-align: left;
    }

    .calendar-mobile-agenda-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        padding: 2px 2px 14px;
    }

    .calendar-mobile-agenda-heading h3 {
        margin-top: 4px;
        font-size: 1.08rem;
    }

    .calendar-mobile-sync {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--muted-strong);
        font-size: 0.66rem;
        font-weight: 600;
    }

    .calendar-mobile-days {
        display: grid;
        gap: 10px;
    }

    .calendar-mobile-day {
        overflow: hidden;
        border: 1px solid var(--line-soft);
        border-radius: 16px;
        background: #fbfbfa;
        transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .calendar-mobile-day[open] {
        border-color: rgba(0, 102, 204, 0.18);
        background: #fff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    }

    .calendar-mobile-day > summary {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto 8px;
        align-items: center;
        gap: 11px;
        min-height: 68px;
        padding: 11px 13px;
        list-style: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .calendar-mobile-day > summary::-webkit-details-marker {
        display: none;
    }

    .calendar-mobile-day > summary::after {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 1.5px solid var(--muted);
        border-bottom: 1.5px solid var(--muted);
        transform: rotate(45deg) translate(-2px, 2px);
        transition: transform 160ms ease;
    }

    .calendar-mobile-day[open] > summary::after {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    .calendar-mobile-date {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 13px;
        background: var(--surface-field);
        color: var(--ink);
        font-size: 1rem;
        font-weight: 700;
    }

    .calendar-mobile-day.is-today .calendar-mobile-date {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 7px 16px rgba(0, 102, 204, 0.2);
    }

    .calendar-mobile-day-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    .calendar-mobile-day-copy strong {
        color: var(--ink);
        font-size: 0.82rem;
        text-transform: capitalize;
    }

    .calendar-mobile-day-copy small,
    .calendar-mobile-event-count {
        color: var(--muted);
        font-size: 0.66rem;
    }

    .calendar-mobile-event-count {
        white-space: nowrap;
    }

    .calendar-mobile-events {
        display: grid;
        gap: 8px;
        padding: 0 12px 12px;
        border-top: 1px solid var(--line-soft);
    }

    .calendar-mobile-event {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
        padding: 12px 12px 12px 14px;
        border-left: 4px solid var(--event-color, #4285f4);
        border-radius: 12px;
        background: color-mix(in srgb, var(--event-color, #4285f4) 7%, #fff);
    }

    .calendar-mobile-event > div {
        display: grid;
        gap: 5px;
        min-width: 0;
    }

    .calendar-mobile-event time {
        color: var(--muted-strong);
        font-size: 0.64rem;
        font-weight: 650;
    }

    .calendar-mobile-event strong {
        color: var(--ink);
        font-size: 0.78rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .calendar-mobile-event-link {
        flex: 0 0 auto;
        padding: 7px 9px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.78);
        color: var(--accent);
        font-size: 0.64rem;
        font-weight: 650;
    }

    .calendar-mobile-empty {
        margin-top: 10px;
        padding: 12px;
        border-radius: 12px;
        background: var(--surface-field);
        color: var(--muted);
        font-size: 0.72rem;
        text-align: center;
    }

    .google-calendar-frame-week {
        display: none;
    }

    .google-calendar-frame-agenda {
        display: block;
        height: 650px;
    }

    .calendar-first-setup-grid {
        grid-template-columns: 1fr;
    }

    .calendar-embed-setup,
    .calendar-setup-option,
    .calendar-setting-block {
        padding: 16px;
    }

    .calendar-week-events {
        min-height: 0;
    }

    .calendar-week-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .calendar-corporate-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-source-settings-body {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .login-page {
        overflow-y: auto;
        place-items: start center;
    }

    .login-layout {
        padding-top: 24px;
    }
}

/* Voice casting workspace */
.voice-casting-nav {
    position: relative;
}

.voice-casting-nav [data-casting-nav-count] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #315e53;
    background: #fff;
    font-size: 0.54rem;
    font-weight: 750;
}

.voice-castings-page {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.casting-manager-metrics {
    margin-bottom: 22px;
    background: #f4f7f6;
}

.casting-compose-card,
.casting-management-card,
.casting-list-empty,
.casting-archive-section {
    border: 1px solid rgba(60, 60, 67, 0.1);
    background: #fff;
    box-shadow: 0 16px 44px rgba(36, 35, 35, 0.055);
}

.casting-compose-card {
    padding: 26px;
    border-radius: 28px;
}

.casting-compose-heading,
.casting-section-head,
.casting-management-head,
.casting-draft-head,
.casting-response-list-head,
.casting-management-controls,
.casting-link-actions,
.casting-created-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.casting-compose-heading h2,
.casting-section-head h2 {
    margin-top: 4px;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 680;
    letter-spacing: -0.025em;
}

.casting-security-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #477166;
    font-size: 0.61rem;
    font-weight: 650;
}

.casting-security-note .icon {
    color: #5c8f80;
}

.casting-compose-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 22px;
    margin-top: 22px;
}

.casting-draft-panel,
.casting-create-form {
    min-width: 0;
    padding: 20px;
    border-radius: 22px;
}

.casting-draft-panel {
    background: #f3f7f5;
}

.casting-create-form {
    display: grid;
    align-content: start;
    gap: 14px;
    border: 1px solid var(--line-soft);
    background: #fff;
}

.casting-draft-head {
    margin-bottom: 13px;
}

.casting-draft-head > div {
    display: grid;
    gap: 3px;
}

.casting-draft-head strong,
.casting-response-list-head strong {
    font-size: 0.72rem;
}

.casting-draft-head span,
.casting-response-list-head span {
    color: var(--muted);
    font-size: 0.57rem;
}

.casting-draft-list {
    max-height: 310px;
    display: grid;
    gap: 7px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.casting-draft-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(71, 113, 102, 0.1);
    border-radius: 14px;
    background: #fff;
}

.casting-draft-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #507f73;
    font-size: 0.52rem;
    font-weight: 750;
}

.casting-draft-row > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.casting-draft-row strong {
    font-size: 0.66rem;
}

.casting-draft-row > div span {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.54rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casting-draft-row > button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    color: #7c7c80;
    background: #f2f2f4;
    cursor: pointer;
}

.casting-draft-row > button:hover {
    color: #a13f37;
    background: #fcefed;
}

.casting-draft-empty,
.casting-list-empty {
    display: grid;
    place-items: center;
    text-align: center;
}

.casting-draft-empty {
    min-height: 250px;
    padding: 24px;
}

.casting-draft-empty[hidden] {
    display: none;
}

.casting-draft-empty > span,
.casting-list-empty > span {
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #507f73;
    background: #e6f0ec;
}

.casting-draft-empty > span {
    width: 48px;
    height: 48px;
}

.casting-draft-empty h3,
.casting-list-empty h3 {
    margin-top: 12px;
    font-size: 0.76rem;
}

.casting-draft-empty p,
.casting-list-empty p,
.casting-form-help,
.casting-section-head p {
    color: var(--muted);
    font-size: 0.59rem;
    line-height: 1.5;
}

.casting-draft-empty p {
    max-width: 300px;
    margin: 6px 0 15px;
}

.casting-create-form label {
    display: grid;
    gap: 7px;
    color: var(--muted-strong);
    font-size: 0.59rem;
    font-weight: 650;
}

.casting-create-form input,
.casting-create-form select,
.casting-create-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink);
    background: #f5f7f7;
    font: inherit;
    font-size: 0.66rem;
}

.casting-create-form input,
.casting-create-form select {
    min-height: 42px;
    padding: 9px 12px;
}

.casting-create-form textarea {
    min-height: 102px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.5;
}

.casting-create-submit {
    min-height: 44px;
    justify-content: center;
    background: #507f73;
}

.casting-create-submit:hover {
    background: #426d62;
}

.casting-create-submit.is-loading {
    opacity: 0.64;
}

.casting-form-help {
    margin: -2px 2px 0;
}

.casting-created-panel {
    margin-top: 18px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-radius: 18px;
    color: #355e53;
    background: #e9f3ef;
}

.casting-created-panel[hidden] {
    display: none;
}

.casting-created-panel[data-tone="error"] {
    color: #993c35;
    background: #fceeed;
}

.casting-created-panel > p {
    margin: 0;
    font-size: 0.64rem;
}

.casting-created-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}

.casting-created-copy > span {
    font-size: 0.52rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.casting-created-copy strong {
    font-size: 0.7rem;
}

.casting-created-copy input {
    width: 100%;
    padding: 7px 0 0;
    border: 0;
    color: #41685e;
    background: transparent;
    font-size: 0.58rem;
}

.casting-list-section {
    margin-top: 38px;
}

.casting-section-head {
    align-items: end;
    margin-bottom: 15px;
}

.casting-section-head p {
    margin: 0;
}

.casting-management-list {
    display: grid;
    gap: 14px;
}

.casting-management-card {
    padding: 21px;
    border-radius: 24px;
}

.casting-management-card.has-new-response {
    border-color: rgba(74, 125, 111, 0.28);
    box-shadow: 0 18px 46px rgba(53, 94, 83, 0.1);
}

.casting-management-head {
    align-items: start;
}

.casting-management-title {
    min-width: 0;
}

.casting-management-title h3 {
    margin: 8px 0 3px;
    font-size: 0.88rem;
    font-weight: 680;
    letter-spacing: -0.02em;
}

.casting-management-title p {
    margin: 0;
    color: var(--muted);
    font-size: 0.59rem;
}

.casting-state {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 0.49rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.casting-state.is-active {
    color: #477166;
    background: #e7f1ed;
}

.casting-state.is-new {
    color: #9a542c;
    background: #fbebe0;
}

.casting-state.is-archived {
    color: #6d7075;
    background: #eff0f2;
}

.casting-management-kpis {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 7px;
}

.casting-management-kpis span {
    min-width: 72px;
    padding: 10px 11px;
    display: grid;
    gap: 2px;
    border-radius: 13px;
    color: var(--muted);
    background: #f4f5f6;
    font-size: 0.5rem;
    text-align: center;
}

.casting-management-kpis strong {
    color: var(--ink);
    font-size: 0.73rem;
}

.casting-link-control {
    margin-top: 18px;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    border-radius: 15px;
    background: #f4f7f6;
}

.casting-link-control label {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.casting-link-control label span {
    color: #668078;
    font-size: 0.49rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.casting-link-control input {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: #45685f;
    background: transparent;
    font-size: 0.57rem;
    text-overflow: ellipsis;
}

.casting-link-actions {
    gap: 6px;
}

.casting-link-actions .secondary-button,
.casting-created-actions .secondary-button,
.casting-created-actions .primary-button {
    min-height: 34px;
    padding: 7px 11px;
}

.casting-management-meta {
    margin-top: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: var(--muted);
    font-size: 0.54rem;
}

.casting-management-controls {
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.casting-management-controls form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.casting-management-controls select {
    min-height: 32px;
    padding: 6px 28px 6px 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f4f5f6;
    font-size: 0.56rem;
}

.ghost-button.danger {
    color: #a34841;
}

.ghost-button.danger:hover {
    background: #fceeed;
}

.casting-legacy-note {
    grid-column: 1 / -1;
    margin: 0;
    color: #8b5f35;
    font-size: 0.6rem;
}

.casting-response-list {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.casting-response-list-head {
    margin-bottom: 8px;
}

.casting-response-list-head span {
    padding: 5px 8px;
    border-radius: 999px;
    color: #9a542c;
    background: #fbebe0;
    font-weight: 700;
}

.casting-response-card {
    padding: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-radius: 15px;
    background: #f6f7f7;
}

.casting-response-card + .casting-response-card {
    margin-top: 7px;
}

.casting-response-card.is-unread {
    background: #edf5f1;
}

.casting-response-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.casting-response-copy > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.casting-response-copy strong {
    font-size: 0.65rem;
}

.casting-response-copy > div:first-child span,
.casting-reviewed {
    color: var(--muted);
    font-size: 0.52rem;
}

.casting-response-copy p {
    max-width: 760px;
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.61rem;
    line-height: 1.5;
}

.casting-response-favorites {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.casting-response-favorites span {
    padding: 5px 8px;
    border-radius: 999px;
    color: #45685f;
    background: #fff;
    font-size: 0.53rem;
    font-weight: 700;
}

.casting-list-empty {
    min-height: 230px;
    padding: 28px;
    border-radius: 24px;
}

.casting-list-empty > span {
    width: 52px;
    height: 52px;
}

.casting-list-empty p {
    margin: 7px 0 0;
}

.casting-archive-section {
    margin-top: 22px;
    padding: 4px 20px;
    border-radius: 20px;
}

.casting-archive-section summary {
    min-height: 66px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
}

.casting-archive-section summary::-webkit-details-marker {
    display: none;
}

.casting-archive-section summary > span:first-child {
    display: grid;
    gap: 3px;
}

.casting-archive-section summary strong {
    font-size: 0.72rem;
}

.casting-archive-section summary small,
.casting-archive-section summary > span:last-child {
    color: var(--muted);
    font-size: 0.56rem;
}

.casting-archive-list {
    padding-bottom: 14px;
    border-top: 1px solid var(--line-soft);
}

.casting-archive-list article {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.casting-archive-list article + article {
    border-top: 1px solid var(--line-soft);
}

.casting-archive-list article > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.casting-archive-list article strong {
    font-size: 0.63rem;
}

.casting-archive-list article small {
    color: var(--muted);
    font-size: 0.53rem;
}

.voice-casting-tray {
    width: auto;
    max-width: min(560px, calc(100vw - var(--sidebar-width) - 60px));
    display: flex;
    grid-template-columns: none;
    justify-content: space-between;
}

.voice-casting-tray[hidden] {
    display: none;
}

.voice-casting-tray .voice-casting-actions {
    flex-wrap: nowrap;
}

/* Client response on private casting pages */
.public-casting-favorite {
    grid-column: 1 / -1;
    position: relative;
    cursor: pointer;
}

.public-casting-favorite input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.public-casting-favorite span {
    min-height: 42px;
    padding: 0 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(36, 35, 35, 0.12);
    border-radius: 999px;
    color: #57534e;
    background: #f5f3ee;
    font-size: 0.68rem;
    font-weight: 680;
    transition: 160ms ease;
}

.public-casting-favorite span i {
    width: 16px;
    height: 16px;
    border: 1px solid #a7a29b;
    border-radius: 999px;
    background: #fff;
}

.public-casting-favorite:hover span {
    border-color: rgba(224, 77, 37, 0.35);
    background: #fff8f4;
}

.public-casting-favorite input:checked + span {
    border-color: #e04d25;
    color: #fff;
    background: #e04d25;
}

.public-casting-favorite input:checked + span i {
    border: 4px solid #fff;
    background: #e04d25;
}

.public-casting-response {
    margin-top: 22px;
    padding: clamp(26px, 5vw, 54px);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 6vw, 80px);
    border-radius: 32px;
    color: #fff;
    background: #242323;
}

.public-casting-response-heading > span {
    color: #f27852;
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-casting-response-heading h2 {
    max-width: 480px;
    margin: 14px 0 0;
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.public-casting-response-heading p {
    max-width: 440px;
    margin: 18px 0 0;
    color: #bab7b2;
    font-size: 0.82rem;
    line-height: 1.55;
}

.public-casting-response form {
    display: grid;
    align-content: start;
    gap: 15px;
}

.public-casting-response form label {
    display: grid;
    gap: 7px;
    color: #e2dfda;
    font-size: 0.7rem;
    font-weight: 650;
}

.public-casting-response form label small {
    color: #898681;
    font-size: 0.58rem;
    font-weight: 500;
}

.public-casting-response input,
.public-casting-response textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    color: #fff;
    background: #333231;
    font: inherit;
    font-size: 0.75rem;
}

.public-casting-response input {
    min-height: 48px;
    padding: 11px 14px;
}

.public-casting-response textarea {
    min-height: 118px;
    padding: 13px 14px;
    resize: vertical;
    line-height: 1.5;
}

.public-casting-response input::placeholder,
.public-casting-response textarea::placeholder {
    color: #85827d;
}

.public-casting-response input:focus,
.public-casting-response textarea:focus {
    outline: 0;
    border-color: #f27852;
    box-shadow: 0 0 0 4px rgba(242, 120, 82, 0.12);
}

.public-casting-response form button {
    min-height: 50px;
    padding: 0 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #e04d25;
    font: inherit;
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
}

.public-casting-response form button:hover {
    background: #c94320;
}

.public-casting-response form button span {
    font-size: 1rem;
}

.public-casting-honeypot {
    position: absolute !important;
    left: -10000px !important;
}

.public-casting-response-error {
    margin: -3px 0 0;
    color: #ffb39d;
    font-size: 0.68rem;
}

.public-casting-response-success {
    grid-column: 1 / -1;
    min-height: 190px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.public-casting-response-success > span {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #e04d25;
}

.public-casting-response-success svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.public-casting-response-success h2 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    letter-spacing: -0.045em;
}

.public-casting-response-success p {
    max-width: 620px;
    margin: 10px 0 0;
    color: #bab7b2;
    font-size: 0.82rem;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .casting-compose-grid {
        grid-template-columns: 1fr;
    }

    .casting-draft-list {
        max-height: 245px;
    }

    .casting-created-panel,
    .casting-management-head {
        align-items: stretch;
        flex-direction: column;
    }

    .casting-management-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .casting-link-control {
        grid-template-columns: 1fr;
    }

    .casting-link-actions {
        justify-content: flex-start;
    }

    .public-casting-response {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .casting-manager-head .page-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .casting-manager-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .casting-manager-metrics .voice-metric-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line-soft);
    }

    .casting-manager-metrics .voice-metric-item:nth-child(4) {
        border-top: 1px solid var(--line-soft);
    }

    .casting-compose-card,
    .casting-management-card {
        padding: 16px;
        border-radius: 22px;
    }

    .casting-compose-heading,
    .casting-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .casting-security-note {
        align-self: flex-start;
    }

    .casting-compose-grid {
        gap: 12px;
        margin-top: 16px;
    }

    .casting-draft-panel,
    .casting-create-form {
        padding: 15px;
        border-radius: 18px;
    }

    .casting-create-form .split-fields {
        grid-template-columns: 1fr;
    }

    .casting-created-actions,
    .casting-link-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .casting-created-actions a,
    .casting-created-actions button,
    .casting-link-actions a,
    .casting-link-actions button {
        justify-content: center;
    }

    .casting-management-controls,
    .casting-response-card,
    .casting-archive-list article {
        align-items: stretch;
        flex-direction: column;
    }

    .casting-management-controls form {
        width: 100%;
    }

    .casting-management-controls form:first-child select {
        min-width: 0;
        flex: 1;
    }

    .casting-response-card form,
    .casting-response-card form button {
        width: 100%;
        justify-content: center;
    }

    .casting-archive-list article > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .voice-casting-tray {
        width: calc(100vw - 24px);
        max-width: none;
        display: flex;
        align-items: center;
    }

    .voice-casting-tray .voice-casting-actions {
        width: auto;
        display: flex;
        grid-row: auto;
        grid-column: auto;
    }

    .voice-casting-tray .voice-casting-actions .secondary-button {
        display: none;
    }

    .voice-casting-tray-summary small {
        display: none;
    }

    .public-casting-card {
        min-height: 238px;
    }

    .public-casting-response {
        padding: 28px 21px;
        border-radius: 26px;
    }

    .public-casting-response-heading h2 {
        font-size: clamp(2.1rem, 12vw, 3.25rem);
    }

    .public-casting-response-success {
        min-height: 230px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .mobile-nav-header {
        padding: 0 12px;
    }

    .sidebar .nav-link {
        padding: 0 12px;
        font-size: 0.76rem;
    }

    .page-title-row h1 {
        font-size: 1.68rem;
    }

    .tab-switch {
        width: 100%;
    }

    .tab-switch .switch-chip {
        flex: 1 1 0;
        justify-content: center;
    }

    .mini-stats.compact {
        gap: 8px;
    }

    .mini-stats.compact > div {
        padding: 14px 10px;
    }

    .timer-copy strong {
        font-size: clamp(2.2rem, 15vw, 3rem);
    }

    .toast-stack {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}

/* Jornadas y pulso operativo */
.reports-page-head {
    margin-bottom: 20px;
}

.inline-notice {
    margin: 0 0 18px;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 0.72rem;
    font-weight: 560;
    line-height: 1.45;
}

.success-notice {
    border-color: #cbe8d8;
    background: #edf8f2;
    color: #1b7650;
}

.neutral-notice {
    border-color: #dfe5ec;
    background: #f5f7f9;
    color: #536170;
}

.attendance-compliance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(330px, 0.68fr);
    gap: 20px;
    align-items: start;
    margin-top: 22px;
}

.attendance-history-card,
.attendance-correction-card,
.attendance-approval-card,
.attendance-reviewed-card {
    min-width: 0;
    padding: 22px;
}

.attendance-history-card.attendance-disclosure,
.attendance-correction-card.attendance-disclosure {
    padding: 0;
    overflow: hidden;
}

.attendance-disclosure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 104px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 160ms ease;
}

.attendance-disclosure-summary::-webkit-details-marker {
    display: none;
}

.attendance-disclosure-summary:hover {
    background: rgba(242, 245, 248, 0.72);
}

.attendance-disclosure-summary h2 {
    margin-top: 4px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 680;
}

.attendance-disclosure-summary p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.69rem;
}

.attendance-disclosure-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #e1e5ea;
    border-radius: 50%;
    background: #f7f8fa;
}

.attendance-disclosure-icon::before {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #5b6572;
    border-bottom: 1.5px solid #5b6572;
    content: "";
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
}

.attendance-disclosure[open] .attendance-disclosure-icon::before {
    transform: translateY(2px) rotate(225deg);
}

.attendance-disclosure[open] .attendance-disclosure-summary {
    border-bottom: 1px solid var(--line-soft);
}

.attendance-disclosure-body {
    padding: 18px 22px 22px;
}

.attendance-card-heading {
    align-items: flex-start;
    gap: 18px;
}

.attendance-card-heading h2,
.attendance-approval-card h2 {
    margin-top: 4px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 680;
}

.attendance-card-heading p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.69rem;
}

.attendance-month-nav {
    display: flex;
    align-items: center;
    gap: 7px;
}

.attendance-month-nav .icon-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1.15rem;
}

.attendance-month-nav input {
    width: 146px;
    height: 34px;
    padding: 0 10px;
    border-color: #e0e5eb;
    background: #f7f8fa;
    font-size: 0.68rem;
}

.attendance-table-wrap {
    margin: 16px -10px -6px;
    overflow-x: auto;
}

.compact-attendance-table th,
.compact-attendance-table td {
    padding: 12px 10px;
    font-size: 0.68rem;
}

.attendance-correction-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 0;
}

.attendance-correction-form label,
.attendance-decision-form label {
    display: grid;
    gap: 7px;
    color: var(--muted-strong);
    font-size: 0.62rem;
    font-weight: 680;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.attendance-correction-form input,
.attendance-correction-form select,
.attendance-correction-form textarea,
.attendance-decision-form textarea {
    min-width: 0;
    border-color: #e1e5ea;
    background: #f8f9fa;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 450;
    letter-spacing: 0;
    text-transform: none;
}

.attendance-correction-form textarea,
.attendance-decision-form textarea {
    resize: vertical;
}

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

.attendance-legal-note {
    margin-top: 13px;
    color: var(--muted);
    font-size: 0.64rem;
    line-height: 1.55;
}

.attendance-request-list {
    display: grid;
    gap: 0;
    margin-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.attendance-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}

.attendance-request-row > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.attendance-request-row strong {
    color: var(--ink);
    font-size: 0.7rem;
}

.attendance-request-row span:not(.correction-status) {
    color: var(--muted);
    font-size: 0.63rem;
}

.correction-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    background: #fff5df;
    color: #a76608;
    font-size: 0.61rem;
    font-weight: 680;
    white-space: nowrap;
}

.correction-status.status-aprobada {
    background: #eaf7f0;
    color: #1d8153;
}

.correction-status.status-rechazada {
    background: #fff0f1;
    color: #c13b4c;
}

.attendance-information-card {
    margin-top: 16px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink-soft);
    box-shadow: 0 10px 30px rgba(21, 31, 44, 0.08);
    backdrop-filter: blur(16px);
}

.attendance-information-card summary {
    padding: 14px 17px;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 650;
}

.attendance-information-card > div {
    display: grid;
    gap: 8px;
    padding: 0 17px 16px;
}

.attendance-information-card p {
    margin: 0;
    font-size: 0.66rem;
    line-height: 1.55;
}

.attendance-approval-card {
    margin-bottom: 18px;
}

.attendance-approval-list {
    display: grid;
    gap: 14px;
    margin-top: 17px;
}

.attendance-approval-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    gap: 22px;
    padding: 18px;
    border: 1px solid #e5e8ed;
    border-radius: 16px;
    background: #fafbfc;
}

.attendance-approval-copy,
.attendance-decision-form {
    display: grid;
    align-content: start;
    gap: 13px;
}

.attendance-approval-person {
    display: flex;
    align-items: center;
    gap: 11px;
}

.attendance-approval-person > div:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.attendance-approval-person strong {
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 680;
}

.attendance-approval-person span,
.attendance-empty-copy {
    color: var(--muted);
    font-size: 0.65rem;
}

.attendance-empty-copy {
    margin: 16px 0 0;
    padding: 16px;
    border-radius: 14px;
    background: #f7f9f8;
}

.attendance-approval-copy > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.7rem;
    line-height: 1.5;
}

.attendance-proposal-line {
    display: grid;
    gap: 4px;
}

.attendance-proposal-line span {
    color: var(--muted);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.attendance-proposal-line strong {
    color: var(--ink);
    font-size: 0.71rem;
    font-weight: 620;
}

.attendance-proposal-line.original {
    padding: 9px 11px;
    border-radius: 10px;
    background: #f0f2f5;
}

.attendance-proposal-line.original strong {
    color: var(--muted-strong);
}

.attendance-decision-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.attendance-audit-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
    padding: 13px 16px;
    border: 1px solid #dde6e1;
    border-radius: 14px;
    background: rgba(248, 251, 249, 0.94);
}

.attendance-audit-state {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attendance-audit-state > div,
.attendance-last-export {
    display: grid;
    gap: 2px;
}

.attendance-audit-state strong,
.attendance-last-export strong {
    color: var(--ink);
    font-size: 0.68rem;
}

.attendance-audit-state span,
.attendance-last-export span {
    color: var(--muted);
    font-size: 0.61rem;
}

.attendance-audit-state.is-invalid strong {
    color: #bd3547;
}

.attendance-last-export {
    text-align: right;
}

.attendance-reviewed-card {
    margin-top: -24px;
    margin-bottom: 42px;
}

.report-filter-card {
    margin-bottom: 18px;
}

.compact-heading {
    align-items: flex-start;
}

.compact-heading p,
.report-table-heading p,
.report-section-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

.report-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, 0.65fr) minmax(220px, 1.35fr) auto;
    gap: 14px;
    align-items: end;
}

.report-kpi-grid,
.operations-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.report-kpi-card,
.operation-kpi-card {
    display: grid;
    align-content: start;
    min-height: 126px;
    padding: 20px;
}

.report-kpi-card > span,
.operation-kpi-card > span {
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-kpi-card > strong,
.operation-kpi-card > strong {
    margin-top: 14px;
    color: var(--ink);
    font-size: 1.75rem;
    font-weight: 650;
    line-height: 1;
}

.report-kpi-card > small,
.operation-kpi-card > small {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.7rem;
}

.workday-report-card {
    margin-bottom: 42px;
}

.report-table-heading {
    align-items: center;
}

.workday-table .person-cell > div:last-child {
    display: grid;
    gap: 2px;
}

.work-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: #2169c5;
    font-size: 0.65rem;
    font-weight: 650;
}

.work-status.status-finalizada {
    background: #edf9f2;
    color: #1e8c57;
}

.work-status.status-pausada {
    background: #fff6e7;
    color: #b76d09;
}

.work-status.status-revisar {
    background: #fff0f1;
    color: #d83a4e;
}

.report-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 0 0 18px;
}

.report-section-head h2 {
    margin-top: 4px;
    font-size: 1.35rem;
}

.operation-kpi-card {
    position: relative;
    overflow: hidden;
}

.operation-kpi-card::after {
    position: absolute;
    right: -24px;
    bottom: -38px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(244, 78, 20, 0.07);
    content: "";
}

.report-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
    gap: 18px;
    align-items: stretch;
}

.report-chart-card {
    min-width: 0;
    padding: 22px;
}

.project-evolution-card {
    grid-row: span 2;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    color: var(--muted);
    font-size: 0.66rem;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a7c8f4;
}

.legend-dot.completed {
    background: #f44e14;
}

.monthly-project-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(42px, 1fr));
    gap: 18px;
    min-height: 274px;
    margin-top: 26px;
    padding: 22px 10px 0;
    border-bottom: 1px solid var(--line-soft);
    background-image: linear-gradient(to top, transparent 49%, var(--line-soft) 50%, transparent 51%);
}

.month-chart-group {
    display: grid;
    grid-template-rows: 1fr 24px;
    gap: 8px;
    min-width: 0;
    text-align: center;
}

.month-chart-group > strong {
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 650;
}

.month-bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 6px;
    min-height: 218px;
}

.month-bar {
    position: relative;
    width: min(22px, 42%);
    height: max(4px, var(--bar-value));
    border-radius: 7px 7px 2px 2px;
    background: #a7c8f4;
}

.month-bar.completed {
    background: #f44e14;
}

.month-bar span {
    position: absolute;
    top: -19px;
    left: 50%;
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 700;
    transform: translateX(-50%);
}

.horizontal-chart {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.horizontal-chart-row {
    display: grid;
    gap: 8px;
}

.chart-row-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-soft);
    font-size: 0.7rem;
}

.chart-row-label strong {
    color: var(--ink);
    font-size: 0.72rem;
}

.horizontal-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f4;
}

.horizontal-fill {
    display: block;
    width: max(3px, var(--bar-value));
    height: 100%;
    border-radius: inherit;
    background: #4a8ee5;
}

.horizontal-fill.amber {
    background: #f2a33a;
}

.horizontal-fill.green {
    background: #35b879;
}

.horizontal-fill.task {
    background: #f44e14;
}

@media (max-width: 1180px) {
    .attendance-compliance-grid {
        grid-template-columns: 1fr;
    }

    .attendance-approval-row {
        grid-template-columns: 1fr;
    }

    .report-kpi-grid,
    .operations-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-chart-grid {
        grid-template-columns: 1fr;
    }

    .project-evolution-card {
        grid-row: auto;
    }
}

@media (max-width: 700px) {
    .attendance-history-card,
    .attendance-correction-card,
    .attendance-approval-card,
    .attendance-reviewed-card {
        padding: 17px;
    }

    .attendance-card-heading,
    .attendance-audit-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-card-heading {
        display: flex;
    }

    .attendance-disclosure-summary {
        min-height: 92px;
        padding: 17px;
    }

    .attendance-disclosure-body {
        padding: 15px 17px 17px;
    }

    .attendance-month-nav input {
        flex: 1;
        width: auto;
    }

    .attendance-correction-form {
        grid-template-columns: 1fr;
    }

    .attendance-correction-form .full-span {
        grid-column: auto;
    }

    .attendance-approval-row {
        gap: 17px;
        padding: 15px;
    }

    .attendance-decision-actions,
    .attendance-decision-actions .primary-button,
    .attendance-decision-actions .ghost-button {
        width: 100%;
    }

    .attendance-decision-actions > button {
        justify-content: center;
    }

    .attendance-audit-strip {
        display: flex;
    }

    .attendance-last-export {
        text-align: left;
    }

    .report-filter-form,
    .report-kpi-grid,
    .operations-kpi-grid {
        grid-template-columns: 1fr;
    }

    .report-filter-form .secondary-button,
    .report-table-heading .primary-button {
        width: 100%;
        justify-content: center;
    }

    .report-kpi-card,
    .operation-kpi-card {
        min-height: 108px;
        padding: 17px;
    }

    .report-kpi-card > strong,
    .operation-kpi-card > strong {
        margin-top: 10px;
        font-size: 1.5rem;
    }

    .report-table-heading,
    .report-chart-card .card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-table-heading {
        gap: 14px;
    }

    .workday-report-card {
        margin-bottom: 34px;
    }

    .report-section-head h2 {
        font-size: 1.2rem;
    }

    .report-chart-card {
        padding: 17px;
    }

    .chart-legend {
        justify-content: flex-start;
    }

    .monthly-project-chart {
        gap: 10px;
        min-height: 238px;
        margin-top: 18px;
        padding-inline: 0;
    }

    .month-bars {
        min-height: 184px;
        gap: 3px;
    }

    .month-bar {
        width: min(15px, 45%);
    }

    .workday-table .person-cell {
        align-items: flex-start;
    }
}

/* Perspectiva */
.perspective-page {
    display: grid;
    gap: 22px;
    padding-bottom: 40px;
}

.perspective-page-head {
    margin-bottom: 0;
}

.perspective-title-line {
    display: flex;
    align-items: center;
    gap: 14px;
}

.prototype-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 10px;
    border: 1px solid #f4b29b;
    border-radius: 999px;
    background: #fff4ef;
    color: #db4816;
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.perspective-date {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.perspective-brief-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid var(--line-soft);
}

.perspective-brief-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.perspective-brief-copy > p {
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 620;
    line-height: 1.4;
}

.perspective-brief-copy > p small {
    margin-left: 7px;
    color: var(--muted);
    font-size: 0.63rem;
    font-weight: 450;
}

.perspective-brief-row .perspective-live {
    flex: 0 0 auto;
    color: #4c7664;
}

.perspective-brief-row .perspective-live i {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 4px rgba(55, 171, 117, 0.1);
}

.perspective-brief-row .perspective-section-nav {
    flex: 0 0 auto;
    gap: 5px;
}

.perspective-brief-row .perspective-section-nav a {
    min-height: 27px;
    padding: 0 9px;
    border-color: var(--line);
    color: var(--muted-strong);
    background: rgba(255, 255, 255, 0.64);
    font-size: 0.59rem;
}

.perspective-brief-row .perspective-section-nav a:hover {
    border-color: #ccd1d6;
    color: var(--ink);
    background: #f2f3f4;
}

.perspective-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
}

.perspective-metric-item {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
}

.perspective-metric-item + .perspective-metric-item {
    border-left: 1px solid var(--line-soft);
}

.perspective-metric-item > span {
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.perspective-metric-item > strong {
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1;
}

.perspective-command-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: end;
    padding: 28px 30px;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 18%, rgba(244, 78, 20, 0.3), transparent 25%),
        linear-gradient(130deg, #1b1d21 0%, #282a2f 100%);
    box-shadow: 0 14px 38px rgba(23, 25, 29, 0.12);
    color: #fff;
}

.perspective-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.perspective-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #62d59a;
    box-shadow: 0 0 0 5px rgba(98, 213, 154, 0.13);
}

.perspective-command-copy h2 {
    max-width: 760px;
    margin-top: 13px;
    color: #fff;
    font-size: clamp(1.25rem, 2.25vw, 1.85rem);
    line-height: 1.15;
}

.perspective-command-copy p {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
}

.perspective-section-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.perspective-section-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.66rem;
    font-weight: 600;
}

.perspective-section-nav a:hover {
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.perspective-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.perspective-kpi-card {
    display: grid;
    min-height: 122px;
    padding: 20px;
}

.perspective-kpi-card > span {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.perspective-kpi-card > strong {
    margin-top: 13px;
    font-size: 1.85rem;
    font-weight: 650;
    line-height: 1;
}

.perspective-kpi-card > small {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.68rem;
}

.perspective-section {
    min-width: 0;
    scroll-margin-top: 130px;
}

.perspective-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.perspective-section-heading.compact {
    min-height: 78px;
}

.perspective-section-heading h2 {
    display: inline-block;
    margin: 4px 0 0 8px;
    font-size: 1.25rem;
}

.perspective-section-heading p {
    margin: 4px 0 0 35px;
    color: var(--muted);
    font-size: 0.7rem;
}

.perspective-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: #e8edf4;
    color: #667085;
    font-size: 0.6rem;
    font-weight: 750;
}

.perspective-portfolio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.29fr);
    gap: 18px;
    align-items: start;
}

.perspective-portfolio-card {
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

.perspective-project-head,
.perspective-project-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 0.65fr) minmax(0, 0.85fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: center;
}

.perspective-project-head {
    padding: 16px 20px 12px;
    color: var(--muted);
    font-size: 0.56rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.perspective-project-row {
    min-height: 88px;
    padding: 15px 20px;
    border-top: 1px solid var(--line-soft);
    color: inherit;
}

.perspective-project-row:hover {
    background: #f7f8fa;
}

.perspective-project-main,
.perspective-milestone,
.perspective-project-row > div {
    min-width: 0;
}

.perspective-project-main strong,
.perspective-milestone strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perspective-project-main small,
.perspective-milestone small,
.perspective-cell-note {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-chip,
.phase-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef5ff;
    color: #276dbd;
    font-size: 0.61rem;
    font-weight: 700;
}

.health-chip {
    gap: 6px;
}

.health-chip i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.health-chip.health-critical {
    background: #fff0f1;
    color: #d33b4f;
}

.health-chip.health-risk,
.health-chip.health-paused {
    background: #fff6e7;
    color: #b56c08;
}

.health-chip.health-track {
    background: #edf9f2;
    color: #218a57;
}

.health-chip.health-done {
    background: #eef0f3;
    color: #69717e;
}

.phase-chip {
    background: #f1f2f5;
    color: #555e6d;
}

.perspective-progress-cell {
    display: grid;
    gap: 8px;
}

.perspective-progress-cell > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.perspective-progress-cell strong {
    font-size: 0.7rem;
}

.perspective-progress-cell small {
    color: var(--muted);
    font-size: 0.58rem;
}

.perspective-progress-track,
.capacity-track {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f3;
}

.perspective-progress-track i {
    display: block;
    width: max(4px, var(--progress));
    height: 100%;
    border-radius: inherit;
    background: #3b82d9;
}

.perspective-alert-card {
    padding: 20px;
}

.perspective-alert-card h3,
.perspective-performance-chart h3 {
    margin-top: 4px;
    font-size: 0.88rem;
}

.perspective-alert-count {
    display: inline-grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #1f2227;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
}

.perspective-alert-list {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

.perspective-alert-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 13px;
    border-radius: 13px;
    background: #f8f8f9;
    color: inherit;
}

.perspective-alert-item:hover {
    background: #f2f3f5;
}

.perspective-alert-item > i {
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: #e8495c;
}

.perspective-alert-item.warning > i {
    background: #e49a31;
}

.perspective-alert-item span {
    display: grid;
    gap: 4px;
}

.perspective-alert-item strong {
    font-size: 0.68rem;
}

.perspective-alert-item small {
    color: var(--muted);
    font-size: 0.61rem;
    line-height: 1.42;
}

.perspective-alert-item b {
    color: var(--muted);
    font-weight: 500;
}

.perspective-clear-state {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px 10px;
    text-align: center;
}

.perspective-clear-state span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #edf9f2;
    color: #218a57;
}

.perspective-clear-state strong {
    font-size: 0.72rem;
}

.perspective-clear-state small {
    color: var(--muted);
    font-size: 0.64rem;
}

.perspective-dual-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    gap: 18px;
    align-items: start;
}

.perspective-sessions-card,
.perspective-capacity-card {
    min-height: 392px;
    padding: 20px;
}

.perspective-session-date {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.perspective-session-date > strong {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.perspective-session-date > span {
    display: grid;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 650;
    text-transform: capitalize;
}

.perspective-session-date small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 500;
    text-transform: none;
}

.perspective-session-list {
    display: grid;
}

.perspective-session-row {
    display: grid;
    grid-template-columns: 92px 8px minmax(0, 1fr) minmax(105px, auto);
    gap: 12px;
    align-items: center;
    min-height: 88px;
    border-bottom: 1px solid var(--line-soft);
}

.perspective-session-row:last-child {
    border-bottom: 0;
}

.session-time {
    color: var(--ink-soft);
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
}

.session-color {
    width: 7px;
    height: 34px;
    border-radius: 999px;
    background: var(--session-color);
}

.session-main,
.session-confirmation {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.session-main strong {
    overflow: hidden;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-main small,
.session-confirmation small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-confirmation {
    justify-items: end;
}

.session-status {
    color: #218a57;
    font-size: 0.62rem;
    font-weight: 700;
}

.session-status.pending {
    color: #b56c08;
}

.perspective-capacity-list {
    display: grid;
}

.perspective-capacity-person {
    position: relative;
}

.perspective-capacity-person > summary {
    list-style: none;
    cursor: pointer;
}

.perspective-capacity-person > summary::-webkit-details-marker {
    display: none;
}

.perspective-capacity-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.8fr);
    gap: 18px;
    align-items: center;
    min-height: 70px;
    border-bottom: 1px solid var(--line-soft);
}

.perspective-capacity-row:last-child {
    border-bottom: 0;
}

.perspective-capacity-person:last-child .perspective-capacity-row {
    border-bottom: 0;
}

.perspective-capacity-row .person-cell > div:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.perspective-capacity-row .person-cell strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perspective-capacity-row .person-cell small {
    color: var(--muted);
    font-size: 0.58rem;
}

.capacity-project-hint {
    width: fit-content;
    color: #3f718a;
    font-size: 0.54rem;
    font-weight: 650;
}

.perspective-capacity-row:hover .capacity-project-hint,
.perspective-capacity-person[open] .capacity-project-hint {
    color: #1d1d1f;
}

.capacity-project-popover {
    position: absolute;
    z-index: 50;
    top: calc(100% - 4px);
    right: 0;
    display: none;
    width: min(520px, calc(100% - 38px));
    overflow: hidden;
    border: 1px solid rgba(60, 60, 67, 0.13);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 55px rgba(25, 32, 38, 0.18);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.perspective-capacity-person[open] > .capacity-project-popover {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .perspective-capacity-person > summary {
        cursor: default;
    }

    .perspective-capacity-person [data-capacity-hover-trigger] {
        cursor: help;
    }
}

.capacity-project-popover > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 18px 14px;
    border-bottom: 1px solid var(--line-soft);
    background: #f5f7f8;
}

.capacity-project-popover > header span,
.capacity-project-popover > header small {
    display: block;
    color: var(--muted);
    font-size: 0.52rem;
}

.capacity-project-popover > header h3 {
    margin-top: 3px;
    font-size: 0.82rem;
}

.capacity-project-total {
    flex: 0 0 auto;
    text-align: right;
}

.capacity-project-total strong {
    display: block;
    font-size: 1rem;
    letter-spacing: -0.03em;
}

.capacity-project-list {
    max-height: 330px;
    overflow-y: auto;
    padding: 7px;
}

.capacity-agenda-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: baseline;
    padding: 11px 18px;
    border-bottom: 1px solid var(--line-soft);
    background: #fff;
}

.capacity-agenda-summary span {
    color: #557687;
    font-size: 0.53rem;
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.capacity-agenda-summary strong {
    justify-self: end;
    font-size: 0.7rem;
}

.capacity-agenda-summary small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.53rem;
}

.capacity-project-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border-radius: 13px;
    color: inherit;
    text-decoration: none;
}

.capacity-project-item:hover,
.capacity-project-item:focus-visible {
    background: #f3f5f6;
    outline: none;
}

.capacity-project-type-dot {
    width: 7px;
    height: 34px;
    border-radius: 999px;
    background: #8c8c91;
}

.capacity-project-type-dot.audiobook {
    background: #ca7054;
}

.capacity-project-type-dot.audioguide {
    background: #4f8c72;
}

.capacity-project-type-dot.dubbing {
    background: #8f5b70;
}

.capacity-project-item > div {
    min-width: 0;
}

.capacity-project-item strong,
.capacity-project-item small,
.capacity-project-item > div > span {
    display: block;
}

.capacity-project-item strong {
    overflow: hidden;
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capacity-project-item small,
.capacity-project-item > div > span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.53rem;
}

.capacity-project-item > div > span {
    color: #557687;
}

.capacity-project-item > b {
    color: #1d1d1f;
    font-size: 0.68rem;
    white-space: nowrap;
}

.capacity-project-item > b.is-pending {
    color: var(--muted);
    font-size: 0.54rem;
}

.capacity-project-empty {
    padding: 22px 14px;
    color: var(--muted);
    font-size: 0.6rem;
    text-align: center;
}

.capacity-meter {
    display: grid;
    gap: 7px;
}

.capacity-meter > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.59rem;
}

.capacity-meter span {
    color: var(--muted);
}

.capacity-meter strong {
    font-size: 0.62rem;
}

.capacity-track i {
    display: block;
    width: max(4px, var(--capacity));
    height: 100%;
    border-radius: inherit;
    background: #35b879;
}

.capacity-track i.medium {
    background: #e8a03b;
}

.capacity-track i.high {
    background: #e8495c;
}

.perspective-performance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.5fr);
    gap: 18px;
    align-items: stretch;
}

.perspective-performance-chart {
    min-width: 0;
    padding: 22px;
}

.perspective-monthly-chart {
    min-height: 240px;
}

.perspective-monthly-chart .month-bars {
    min-height: 184px;
}

.perspective-insight-stack {
    display: grid;
    gap: 18px;
}

.perspective-insight-card {
    position: relative;
    display: grid;
    align-content: start;
    min-height: 154px;
    overflow: hidden;
    padding: 20px;
}

.perspective-insight-card::after {
    position: absolute;
    right: -26px;
    bottom: -35px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: rgba(244, 78, 20, 0.08);
    content: "";
}

.perspective-insight-card.blue::after {
    background: rgba(58, 128, 217, 0.09);
}

.perspective-insight-card > span {
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.perspective-insight-card > strong {
    margin-top: 12px;
    font-size: 1.45rem;
    font-weight: 650;
}

.perspective-insight-card p {
    max-width: 220px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.65rem;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .perspective-brief-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .perspective-brief-row .perspective-section-nav {
        justify-content: flex-start;
    }

    .perspective-command-card {
        grid-template-columns: 1fr;
    }

    .perspective-section-nav {
        justify-content: flex-start;
    }

    .perspective-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perspective-portfolio-layout,
    .perspective-dual-grid,
    .perspective-performance-grid {
        grid-template-columns: 1fr;
    }

    .perspective-section-heading.compact {
        min-height: 0;
    }

    .perspective-sessions-card,
    .perspective-capacity-card {
        min-height: 0;
    }

    .perspective-insight-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .perspective-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perspective-metric-item:nth-child(3) {
        border-left: 0;
    }

    .perspective-metric-item:nth-child(n + 3) {
        border-top: 1px solid var(--line-soft);
    }

    .perspective-project-head {
        display: none;
    }

    .perspective-project-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 14px;
    }

    .perspective-project-row {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 16px;
        border: 1px solid var(--line-soft);
        border-radius: 14px;
    }

    .perspective-project-row > div:nth-child(2),
    .perspective-progress-cell,
    .perspective-milestone {
        padding-top: 10px;
        border-top: 1px solid var(--line-soft);
    }

    .perspective-progress-cell > div {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .perspective-page {
        gap: 18px;
    }

    .perspective-title-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .perspective-date {
        display: none;
    }

    .perspective-brief-row {
        gap: 12px;
        padding-bottom: 12px;
    }

    .perspective-brief-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .perspective-brief-copy > p small {
        display: block;
        margin: 4px 0 0;
    }

    .perspective-brief-row .perspective-section-nav {
        width: 100%;
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .perspective-brief-row .perspective-section-nav a {
        flex: 0 0 auto;
    }

    .perspective-command-card {
        gap: 22px;
        padding: 22px 18px;
        border-radius: 19px;
    }

    .perspective-section-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perspective-section-nav a {
        justify-content: center;
    }

    .perspective-kpi-grid,
    .perspective-project-list,
    .perspective-insight-stack {
        grid-template-columns: 1fr;
    }

    .perspective-kpi-card {
        min-height: 106px;
        padding: 17px;
    }

    .perspective-kpi-card > strong {
        margin-top: 9px;
        font-size: 1.55rem;
    }

    .perspective-section-heading,
    .perspective-section-heading.compact {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
        gap: 10px;
    }

    .perspective-section-heading h2 {
        font-size: 1.1rem;
    }

    .perspective-section-heading p {
        margin-left: 0;
    }

    .perspective-project-list {
        padding: 12px;
    }

    .perspective-alert-card,
    .perspective-sessions-card,
    .perspective-capacity-card,
    .perspective-performance-chart,
    .perspective-insight-card {
        padding: 17px;
    }

    .perspective-session-row {
        grid-template-columns: 72px 7px minmax(0, 1fr);
        gap: 9px;
        padding: 13px 0;
    }

    .session-confirmation {
        grid-column: 3;
        justify-items: start;
    }

    .perspective-capacity-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 0;
    }

    .capacity-project-popover {
        position: static;
        width: 100%;
        margin: -3px 0 13px;
        border-radius: 16px;
        box-shadow: none;
    }

    .capacity-project-popover > header {
        padding: 14px;
    }

    .capacity-project-list {
        max-height: none;
    }

    .perspective-monthly-chart {
        gap: 8px;
    }
}

/* Perspective decision center */
.perspective-focus-page {
    gap: 20px;
}

.perspective-decision-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 14px;
    align-items: stretch;
}

.perspective-alert-card-main {
    min-height: 100%;
    padding: 20px;
}

.perspective-outlook-card {
    --outlook-color: #4d8f72;
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--outlook-color) 42%, transparent), transparent 46%),
        #24333a;
    box-shadow: 0 14px 35px rgba(31, 48, 57, 0.13);
}

.perspective-outlook-card.outlook-balanced {
    --outlook-color: #56a778;
}

.perspective-outlook-card.outlook-high {
    --outlook-color: #e09b2d;
}

.perspective-outlook-card.outlook-critical {
    --outlook-color: #d95757;
}

.perspective-outlook-kicker {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.perspective-outlook-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin-top: 16px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.59rem;
    font-weight: 700;
}

.perspective-outlook-status i,
.deadline-verdict i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--outlook-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--outlook-color) 18%, transparent);
}

.perspective-outlook-card h3 {
    max-width: 360px;
    margin: 14px 0 24px;
    color: #fff;
    font-size: 1rem;
    font-weight: 620;
    line-height: 1.38;
}

.perspective-outlook-data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.perspective-outlook-data div {
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.perspective-outlook-data strong,
.perspective-outlook-data span {
    display: block;
}

.perspective-outlook-data strong {
    color: #fff;
    font-size: 0.88rem;
}

.perspective-outlook-data span {
    margin-top: 3px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perspective-capacity-reference {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.56rem;
    font-weight: 650;
}

.perspective-deadline-card {
    padding: 21px;
    overflow: hidden;
}

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

.perspective-deadline-head h3 {
    margin-top: 5px;
    color: var(--ink);
    font-size: 0.9rem;
}

.perspective-pressure-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px 13px;
}

.perspective-pressure-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 0.53rem;
}

.perspective-pressure-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.perspective-pressure-legend i.relaxed,
.perspective-pressure-bar.relaxed {
    background: #70a7b8;
}

.perspective-pressure-legend i.balanced,
.perspective-pressure-bar.balanced {
    background: #4eaa78;
}

.perspective-pressure-legend i.high,
.perspective-pressure-bar.high {
    background: #e09b2d;
}

.perspective-pressure-legend i.critical,
.perspective-pressure-bar.critical {
    background: #d95757;
}

.perspective-pressure-layout {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(700px, 1fr);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.perspective-pressure-scale {
    height: 286px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3px 0 46px;
    color: var(--muted);
    font-size: 0.48rem;
    text-align: right;
}

.perspective-pressure-chart {
    position: relative;
    min-width: 700px;
    display: grid;
    grid-template-columns: repeat(8, minmax(70px, 1fr));
    gap: 10px;
    padding: 0 4px;
}

.pressure-line {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 0;
    border-top: 1px dashed rgba(105, 118, 126, 0.23);
}

.pressure-line-100 {
    top: 37px;
    border-color: rgba(207, 78, 78, 0.27);
}

.pressure-line-80 {
    top: 73px;
    border-color: rgba(224, 155, 45, 0.28);
}

.pressure-line span {
    position: absolute;
    top: -8px;
    right: 4px;
    padding: 1px 4px;
    color: var(--muted);
    background: #fff;
    font-size: 0.45rem;
    font-style: normal;
}

.perspective-pressure-week {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    grid-template-rows: 220px 28px 18px;
    gap: 6px;
    text-align: center;
}

.perspective-pressure-bar-zone {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid var(--line);
}

.perspective-pressure-bar {
    position: relative;
    width: min(44px, 64%);
    height: max(4px, var(--pressure));
    display: flex;
    justify-content: center;
    border-radius: 9px 9px 3px 3px;
    box-shadow: 0 8px 18px color-mix(in srgb, currentColor 10%, transparent);
    transition: filter 150ms ease, transform 150ms ease;
}

.perspective-pressure-bar:hover {
    filter: saturate(1.1);
    transform: scaleX(1.05);
}

.perspective-pressure-bar b {
    position: absolute;
    top: -18px;
    color: var(--ink-soft);
    font-size: 0.53rem;
    font-weight: 750;
}

.perspective-pressure-tooltip {
    position: absolute;
    right: 50%;
    bottom: calc(var(--pressure, 0%) + 22px);
    z-index: 4;
    width: 170px;
    display: none;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(35, 49, 58, 0.14);
    text-align: left;
    transform: translateX(50%);
}

.perspective-pressure-bar-zone:hover .perspective-pressure-tooltip {
    display: grid;
    gap: 3px;
}

.perspective-pressure-tooltip strong {
    color: var(--ink);
    font-size: 0.61rem;
}

.perspective-pressure-tooltip span,
.perspective-pressure-tooltip small {
    color: var(--muted);
    font-size: 0.52rem;
    line-height: 1.35;
}

.perspective-pressure-markers {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.perspective-pressure-markers span {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.46rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perspective-pressure-markers .deadline-marker {
    color: #c24c4c;
    font-weight: 700;
}

.perspective-pressure-week > strong {
    color: var(--ink-soft);
    font-size: 0.56rem;
    text-transform: capitalize;
}

.perspective-deadline-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.deadline-verdict {
    --outlook-color: #4d8f72;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.deadline-verdict.verdict-high {
    --outlook-color: #e09b2d;
}

.deadline-verdict.verdict-critical {
    --outlook-color: #d95757;
}

.deadline-verdict strong,
.perspective-deadline-footer > div:last-child strong {
    color: var(--ink);
    font-size: 0.64rem;
}

.deadline-verdict span,
.perspective-deadline-footer > div:last-child span {
    color: var(--muted);
    font-size: 0.56rem;
}

.perspective-deadline-footer > div:last-child {
    flex: 0 0 auto;
    display: grid;
    gap: 2px;
    text-align: right;
}

.perspective-capacity-layout {
    display: grid;
    grid-template-columns: minmax(250px, 0.36fr) minmax(0, 1.64fr);
    gap: 14px;
    align-items: stretch;
}

.perspective-capacity-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    text-align: center;
}

.perspective-capacity-ring {
    width: 126px;
    height: 126px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#4e91b0 var(--team-load), #e9eef0 0);
}

.perspective-capacity-ring > div {
    width: 96px;
    height: 96px;
    display: grid;
    place-content: center;
    border-radius: 50%;
    background: #fff;
}

.perspective-capacity-ring strong,
.perspective-capacity-ring span {
    display: block;
}

.perspective-capacity-ring strong {
    color: var(--ink);
    font-size: 1.35rem;
}

.perspective-capacity-ring span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.54rem;
}

.perspective-capacity-summary h3 {
    margin-top: 14px;
    color: var(--ink);
    font-size: 0.78rem;
}

.perspective-capacity-summary > p {
    max-width: 260px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.61rem;
    line-height: 1.45;
}

.perspective-capacity-summary-data {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 18px;
}

.perspective-capacity-summary-data span {
    color: var(--muted);
    font-size: 0.48rem;
}

.perspective-capacity-summary-data strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 0.7rem;
}

.perspective-capacity-card-main {
    padding: 18px 20px;
}

.perspective-performance-grid-focus {
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
}

.perspective-operations-kpi-grid {
    margin-bottom: 14px;
}

.perspective-project-types-card {
    margin-bottom: 14px;
    padding: 19px 20px;
}

.perspective-project-types-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.perspective-project-type {
    --project-type-color: #65707f;
    --project-type-soft: #f0f2f5;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--project-type-soft) 55%, #fff));
}

.perspective-project-type.audiobook {
    --project-type-color: #b85e2d;
    --project-type-soft: #fbefe7;
}

.perspective-project-type.audioguide {
    --project-type-color: #256f8e;
    --project-type-soft: #eaf5f8;
}

.perspective-project-type-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.perspective-project-type-icon {
    width: 29px;
    height: 29px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    color: var(--project-type-color);
    background: var(--project-type-soft);
}

.perspective-project-type-head strong,
.perspective-project-type-head small {
    display: block;
}

.perspective-project-type-head strong {
    color: var(--ink);
    font-size: 0.7rem;
}

.perspective-project-type-head small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.51rem;
}

.perspective-project-type-head b {
    color: var(--project-type-color);
    font-size: 1rem;
}

.perspective-project-type-track {
    height: 4px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-field);
}

.perspective-project-type-track span {
    display: block;
    width: max(5px, var(--type-share));
    height: 100%;
    border-radius: inherit;
    background: var(--project-type-color);
}

.perspective-project-type-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.perspective-project-type-data div {
    min-width: 0;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--project-type-color) 12%, var(--line-soft));
}

.perspective-project-type-data strong,
.perspective-project-type-data span {
    display: block;
}

.perspective-project-type-data strong {
    color: var(--ink);
    font-size: 0.68rem;
}

.perspective-project-type-data span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.49rem;
}

.perspective-company-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.perspective-company-status-grid .report-chart-card {
    min-height: 100%;
}

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

.perspective-performance-stat {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-sm);
}

.perspective-performance-stat.wide {
    grid-column: 1 / -1;
}

.perspective-performance-stat > span {
    color: var(--muted);
    font-size: 0.51rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.perspective-performance-stat > strong {
    display: block;
    margin-top: 12px;
    color: var(--ink);
    font-size: 1.55rem;
    line-height: 1;
}

.perspective-performance-stat p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.59rem;
    line-height: 1.42;
}

.perspective-performance-stat > div {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: baseline;
    gap: 5px;
    margin-top: 12px;
}

.perspective-performance-stat > div strong {
    color: var(--ink);
    font-size: 1rem;
}

.perspective-performance-stat > div small {
    color: var(--muted);
    font-size: 0.5rem;
}

.perspective-performance-stat > div i {
    height: 1px;
    margin: 0 6px;
    background: var(--line);
}

@media (max-width: 1100px) {
    .perspective-decision-grid,
    .perspective-capacity-layout,
    .perspective-performance-grid-focus,
    .perspective-company-status-grid {
        grid-template-columns: 1fr;
    }

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

    .perspective-outlook-card {
        min-height: 250px;
    }
}

@media (max-width: 700px) {
    .perspective-decision-grid {
        gap: 11px;
    }

    .perspective-alert-card-main,
    .perspective-deadline-card,
    .perspective-capacity-summary,
    .perspective-capacity-card-main {
        padding: 16px;
    }

    .perspective-project-types-card {
        padding: 16px;
    }

    .perspective-outlook-card {
        min-height: 240px;
        padding: 19px;
        border-radius: 18px;
    }

    .perspective-outlook-data {
        gap: 5px;
    }

    .perspective-outlook-data span {
        white-space: normal;
    }

    .perspective-deadline-head,
    .perspective-deadline-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .perspective-pressure-legend {
        justify-content: flex-start;
    }

    .perspective-pressure-layout {
        grid-template-columns: 30px minmax(700px, 1fr);
        margin-right: -16px;
        padding-right: 16px;
    }

    .perspective-deadline-footer > div:last-child {
        text-align: left;
    }

    .deadline-verdict {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .perspective-capacity-reference {
        align-self: flex-start;
    }

    .perspective-performance-summary {
        grid-template-columns: 1fr;
    }

    .perspective-performance-stat.wide {
        grid-column: auto;
    }
}

/* Development pipeline */
.development-page {
    min-width: 0;
}

.development-page-head {
    margin-bottom: 18px;
}

.development-command-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(520px, 1.15fr);
    gap: 34px;
    align-items: center;
    margin-bottom: 18px;
    padding: 26px 28px;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 120%, rgba(249, 171, 0, 0.3), transparent 35%),
        radial-gradient(circle at 92% -20%, rgba(66, 133, 244, 0.4), transparent 34%),
        linear-gradient(135deg, #18242b 0%, #253c48 55%, #1e3038 100%);
    box-shadow: 0 18px 42px rgba(24, 36, 43, 0.16);
}

.development-command-copy {
    position: relative;
    z-index: 1;
}

.development-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.development-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #70e5b5;
    box-shadow: 0 0 0 5px rgba(112, 229, 181, 0.12);
}

.development-command-copy h2 {
    max-width: 560px;
    margin-top: 12px;
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    line-height: 1.15;
}

.development-command-copy p {
    max-width: 590px;
    margin-top: 11px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.75rem;
    line-height: 1.6;
}

.development-stage-map {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(92px, 1fr));
    align-items: start;
}

.development-stage-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.development-stage-step > span {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    font-size: 0.68rem;
    font-weight: 700;
}

.development-stage-step > strong {
    font-size: 0.63rem;
    font-weight: 650;
}

.development-stage-step > i {
    position: absolute;
    top: 16px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.development-stage-step.stage-aprobado > span {
    border-color: rgba(112, 229, 181, 0.5);
    background: rgba(39, 174, 112, 0.35);
}

.development-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
}

.development-metric-item {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
}

.development-metric-item + .development-metric-item {
    border-left: 1px solid var(--line-soft);
}

.development-metric-item > span {
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.development-metric-item > strong {
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1;
}

.production-mail-shell {
    position: relative;
    min-width: 0;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-sm);
}

.production-mail-shell.is-setup {
    border-color: #dce7ed;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 251, 0.96));
}

.production-mail-shell.is-setup::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, #2f77bd, #69aeb6 52%, #eaa45d);
}

.production-mail-heading,
.production-mail-title,
.production-mail-tools,
.production-mail-sender,
.production-mail-actions {
    display: flex;
    align-items: center;
}

.production-mail-heading {
    justify-content: space-between;
    gap: 22px;
    padding: 17px 19px;
    border-bottom: 1px solid var(--line-soft);
}

.production-mail-title {
    min-width: 0;
    gap: 12px;
}

.production-mail-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #2f77bd;
    background: #e9f3fc;
}

.production-mail-title h2 {
    margin-top: 3px;
    color: var(--ink);
    font-size: 0.9rem;
}

.production-mail-title p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.64rem;
}

.production-mail-tools {
    flex: 0 0 auto;
    gap: 12px;
}

.production-mail-counter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 0.62rem;
}

.production-mail-counter strong {
    min-width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #2f77bd;
    font-size: 0.58rem;
}

.production-mail-shell .compact-button {
    min-height: 32px;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 0.62rem;
}

.production-mail-list {
    max-height: 410px;
    overflow-y: auto;
}

.production-mail-row {
    display: grid;
    grid-template-columns: minmax(155px, 0.55fr) minmax(260px, 1.45fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px 19px;
    border-top: 1px solid var(--line-soft);
    transition: background 150ms ease;
}

.production-mail-row:first-child {
    border-top: 0;
}

.production-mail-row:hover {
    background: #f6f8fa;
}

.production-mail-sender {
    min-width: 0;
    gap: 9px;
}

.production-mail-sender > div,
.production-mail-copy {
    min-width: 0;
}

.production-mail-unread {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: transparent;
}

.production-mail-row.is-unread .production-mail-unread {
    background: #2f77bd;
    box-shadow: 0 0 0 4px rgba(47, 119, 189, 0.1);
}

.production-mail-sender strong,
.production-mail-sender small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-mail-sender strong {
    color: var(--ink);
    font-size: 0.68rem;
}

.production-mail-sender small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.57rem;
}

.production-mail-copy > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.production-mail-copy h3 {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-mail-row.is-unread .production-mail-copy h3 {
    color: var(--ink);
    font-weight: 700;
}

.production-mail-copy time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.55rem;
}

.production-mail-copy p {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.production-mail-actions {
    justify-content: flex-end;
    gap: 9px;
}

.production-mail-actions form {
    display: flex;
}

.production-mail-actions .muted-action {
    color: var(--muted);
    font-size: 0.59rem;
}

.production-mail-setup {
    display: grid;
    grid-template-columns: minmax(300px, 1.05fr) minmax(320px, 0.95fr);
    gap: 34px;
    align-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 83% 42%, rgba(122, 184, 190, 0.13), transparent 30%),
        linear-gradient(120deg, rgba(250, 252, 253, 0.86), rgba(240, 247, 249, 0.84));
}

.production-mail-connect-copy h3,
.production-mail-empty span,
.production-mail-notice strong {
    color: var(--ink);
    font-size: 0.82rem;
}

.production-mail-connect-copy > p,
.production-mail-empty p,
.production-mail-notice span {
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.63rem;
    line-height: 1.55;
}

.production-mail-connect-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #657984;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.production-mail-connect-status i {
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e5a44d;
    box-shadow: 0 0 0 3px rgba(229, 164, 77, 0.16);
}

.production-mail-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.production-mail-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid rgba(72, 108, 123, 0.12);
    border-radius: 999px;
    color: #526873;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.55rem;
    font-weight: 650;
}

.production-mail-benefits .icon {
    color: #2f77bd;
}

.production-mail-requirements {
    margin-top: 14px;
}

.production-mail-requirements summary {
    width: max-content;
    cursor: pointer;
    color: #2f77bd;
    font-size: 0.58rem;
    font-weight: 700;
}

.production-mail-requirements > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.production-mail-requirements span {
    padding: 9px;
    border: 1px solid rgba(72, 108, 123, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.production-mail-requirements strong,
.production-mail-requirements small {
    display: block;
}

.production-mail-requirements strong {
    color: var(--ink-soft);
    font-size: 0.56rem;
}

.production-mail-requirements small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.5rem;
    line-height: 1.35;
}

.production-mail-connect-visual {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(75, 112, 129, 0.13);
    border-radius: 18px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
        radial-gradient(circle at 15% 25%, #d5ebf6, transparent 38%),
        radial-gradient(circle at 90% 80%, #f7dfc8, transparent 42%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.production-mail-connect-envelope {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #fff;
    background: #2f77bd;
    box-shadow: 0 10px 24px rgba(47, 119, 189, 0.2);
}

.production-mail-connect-envelope .icon {
    width: 23px;
    height: 23px;
}

.production-mail-connect-path {
    min-width: 58px;
    display: flex;
    align-items: center;
    color: #7da0b1;
}

.production-mail-connect-path i {
    width: 100%;
    border-top: 1px dashed #9eb6c1;
}

.production-mail-connect-path b {
    margin-left: -2px;
    font-size: 1rem;
    font-weight: 500;
}

.production-mail-connect-opportunity {
    min-width: 145px;
    padding: 13px 14px;
    border: 1px solid rgba(50, 72, 81, 0.1);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(45, 69, 82, 0.1);
}

.production-mail-connect-opportunity small,
.production-mail-connect-opportunity strong,
.production-mail-connect-opportunity em {
    display: block;
}

.production-mail-connect-opportunity small {
    color: #2f77bd;
    font-size: 0.49rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.production-mail-connect-opportunity strong {
    margin-top: 7px;
    color: var(--ink);
    font-size: 0.65rem;
}

.production-mail-connect-opportunity em {
    margin-top: 5px;
    color: #5e8875;
    font-size: 0.52rem;
    font-style: normal;
}

.production-mail-notice,
.production-mail-empty {
    padding: 18px 19px;
}

.production-mail-notice.is-error {
    color: #9d3441;
    background: #fff3f4;
}

.production-mail-notice.is-error strong,
.production-mail-notice.is-error span {
    display: block;
    color: inherit;
}

.development-board-shell {
    min-width: 0;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(242, 245, 247, 0.86);
    box-shadow: var(--shadow-sm);
}

.development-board-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.development-board-heading h2 {
    margin-top: 5px;
    color: var(--ink);
    font-size: 0.98rem;
}

.development-board-heading > p {
    max-width: 390px;
    color: var(--muted);
    font-size: 0.7rem;
    text-align: right;
}

.development-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding: 1px 1px 10px;
    scroll-snap-type: x proximity;
}

.development-column {
    --stage-color: #79909d;
    min-width: 0;
    scroll-snap-align: start;
}

.development-column.stage-contacto {
    --stage-color: #3d8bd7;
}

.development-column.stage-propuesta {
    --stage-color: #e09b2d;
}

.development-column.stage-presupuesto {
    --stage-color: #e2693e;
}

.development-column.stage-aprobado {
    --stage-color: #28a875;
}

.development-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 5px;
}

.development-column-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.development-column-head i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stage-color);
}

.development-column-head strong {
    color: var(--ink);
    font-size: 0.72rem;
}

.development-column-head > span {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.62rem;
    font-weight: 700;
}

.development-card-stack {
    display: grid;
    align-content: start;
    gap: 9px;
}

.development-lead-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(212, 219, 224, 0.9);
    border-top: 3px solid var(--stage-color);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(39, 54, 64, 0.05);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.development-lead-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(39, 54, 64, 0.09);
}

.development-lead-card.is-overdue {
    border-color: rgba(210, 67, 82, 0.22);
    border-top-color: #d24352;
}

.development-lead-top,
.development-lead-footer,
.development-lead-meta,
.development-card-actions,
.development-owner {
    display: flex;
    align-items: center;
}

.development-lead-top,
.development-lead-footer,
.development-lead-meta {
    justify-content: space-between;
    gap: 10px;
}

.development-category {
    max-width: 150px;
    padding: 5px 8px;
    overflow: hidden;
    border-radius: 999px;
    color: #4e6572;
    background: #edf2f4;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.development-probability {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: conic-gradient(var(--stage-color) calc(var(--probability) * 1%), #e9edef 0);
}

.development-probability::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}

.development-probability strong,
.development-probability small {
    position: relative;
    z-index: 1;
    color: var(--ink);
}

.development-probability strong {
    font-size: 0.62rem;
}

.development-probability small {
    margin-left: 1px;
    font-size: 0.44rem;
}

.development-lead-copy {
    margin: 12px 0;
}

.development-lead-copy h3 {
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.28;
}

.development-client {
    margin-top: 3px;
    color: var(--stage-color);
    font-size: 0.65rem;
    font-weight: 650;
}

.development-summary {
    display: -webkit-box;
    margin-top: 9px;
    overflow: hidden;
    color: var(--muted-strong);
    font-size: 0.66rem;
    line-height: 1.52;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.development-next-step {
    display: grid;
    gap: 4px;
    margin: 12px 0;
    padding: 10px;
    border-radius: 11px;
    background: #f6f8f9;
}

.development-next-step span {
    color: var(--muted);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.development-next-step strong {
    color: var(--ink-soft);
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.4;
}

.development-lead-meta {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 0.58rem;
}

.development-lead-meta .is-danger {
    color: #c43d4d;
    font-weight: 700;
}

.development-lead-footer {
    margin-top: 11px;
}

.development-owner {
    min-width: 0;
    gap: 7px;
}

.development-owner .avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 0.55rem;
}

.development-owner > span {
    max-width: 95px;
    overflow: hidden;
    color: var(--muted-strong);
    font-size: 0.59rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.development-card-actions {
    gap: 7px;
}

.development-card-actions .text-action {
    font-size: 0.61rem;
}

.development-card-actions form {
    display: flex;
}

.development-fridge-quick {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #d8e4e9;
    border-radius: 9px;
    color: #668693;
    background: #f3f8fa;
    cursor: pointer;
    font-size: 0.66rem;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.development-fridge-quick:hover {
    border-color: #a8c3ce;
    color: #315f72;
    background: #e5f1f5;
}

.development-advance {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--stage-color);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
}

.development-advance:hover {
    filter: brightness(0.94);
}

.development-advance.approved {
    background: #28a875;
}

.development-column-empty {
    min-height: 164px;
    display: grid;
    place-content: center;
    gap: 7px;
    padding: 20px;
    border: 1px dashed #ccd4d9;
    border-radius: 16px;
    color: var(--muted);
    text-align: center;
}

.development-column-empty span {
    margin: auto;
    font-size: 1.2rem;
}

.development-column-empty p {
    font-size: 0.63rem;
}

.development-fridge-shell {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid #d8e4e9;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(247, 251, 252, 0.96), rgba(234, 243, 247, 0.9));
    box-shadow: var(--shadow-sm);
}

.development-fridge-heading,
.development-fridge-title,
.development-fridge-card,
.development-fridge-actions,
.development-reactivate-form {
    display: flex;
    align-items: center;
}

.development-fridge-heading {
    justify-content: space-between;
    gap: 20px;
    padding: 17px 19px;
    border-bottom: 1px solid rgba(160, 187, 198, 0.25);
}

.development-fridge-title {
    min-width: 0;
    gap: 12px;
}

.development-fridge-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #45778b;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 1px rgba(111, 151, 167, 0.18);
    font-size: 0.9rem;
}

.development-fridge-title h2 {
    margin-top: 3px;
    color: var(--ink);
    font-size: 0.9rem;
}

.development-fridge-title p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.62rem;
}

.development-fridge-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #607985;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.56rem;
}

.development-fridge-count strong {
    color: #315f72;
    font-size: 0.64rem;
}

.development-fridge-list {
    display: grid;
}

.development-fridge-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr) auto;
    gap: 22px;
    padding: 14px 19px;
    border-top: 1px solid rgba(160, 187, 198, 0.2);
    transition: background 150ms ease;
}

.development-fridge-card:first-child {
    border-top: 0;
}

.development-fridge-card:hover {
    background: rgba(255, 255, 255, 0.56);
}

.development-fridge-card.needs-follow-up {
    box-shadow: inset 3px 0 0 #e09b2d;
}

.development-fridge-card-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.development-fridge-card-main > div {
    min-width: 0;
}

.development-fridge-card-main h3,
.development-fridge-card-main p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.development-fridge-card-main h3 {
    color: var(--ink);
    font-size: 0.7rem;
}

.development-fridge-card-main p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.59rem;
}

.development-fridge-next {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.development-fridge-next span {
    color: #708993;
    font-size: 0.49rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.development-fridge-next strong {
    color: var(--ink-soft);
    font-size: 0.62rem;
}

.development-fridge-next small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.development-fridge-actions {
    justify-content: flex-end;
    gap: 8px;
}

.development-fridge-actions form {
    display: flex;
}

.development-fridge-empty {
    padding: 22px 19px;
    color: var(--muted);
    text-align: center;
}

.development-fridge-empty span {
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 700;
}

.development-fridge-empty p {
    margin-top: 4px;
    font-size: 0.6rem;
}

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

.input-suffix {
    position: relative;
}

.input-suffix input {
    width: 100%;
    padding-right: 35px;
}

.input-suffix span {
    position: absolute;
    top: 50%;
    right: 13px;
    color: var(--muted);
    font-size: 0.7rem;
    transform: translateY(-50%);
}

.development-drawer-backdrop {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    justify-content: flex-end;
    padding: 0;
}

.development-drawer {
    width: min(760px, 100%);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #f7f8f9;
    box-shadow: -20px 0 60px rgba(23, 36, 43, 0.2);
    animation: development-drawer-in 220ms ease both;
}

@keyframes development-drawer-in {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

.development-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.development-drawer-head h2 {
    margin-top: 10px;
    color: var(--ink);
    font-size: 1.25rem;
}

.development-drawer-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

.development-drawer-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: #f0f2f4;
    font-size: 1.2rem;
}

.development-drawer > .project-details-notice {
    margin: 14px 24px 0;
}

.development-drawer-scroll {
    display: grid;
    gap: 16px;
    padding: 18px 24px 28px;
    overflow-y: auto;
}

.development-drawer-section,
.development-convert-card {
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.development-drawer-section-head,
.development-convert-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
}

.development-drawer-section-head h3,
.development-convert-head h3 {
    margin-top: 5px;
    color: var(--ink);
    font-size: 0.88rem;
}

.development-stage-badge {
    padding: 6px 9px;
    border-radius: 999px;
    color: #4e6572;
    background: #edf2f4;
    font-size: 0.59rem;
    font-weight: 700;
    text-transform: uppercase;
}

.development-stage-badge.stage-presupuesto {
    color: #a44524;
    background: #fff0e9;
}

.development-stage-badge.stage-aprobado {
    color: #167552;
    background: #e9f8f1;
}

.development-stage-badge.stage-nevera {
    color: #315f72;
    background: #e7f1f5;
}

.development-convert-card {
    border-color: rgba(40, 168, 117, 0.28);
    background: linear-gradient(145deg, #fff 0%, #f2fbf7 100%);
}

.development-convert-head {
    justify-content: flex-start;
}

.development-convert-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #167552;
    background: #dff5eb;
}

.development-convert-head p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.68rem;
}

.development-conversion-options {
    display: grid;
    gap: 10px;
}

.development-conversion-option {
    overflow: hidden;
    border: 1px solid #d7eae1;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.82);
}

.development-conversion-option.is-task {
    border-color: #d9e3ed;
}

.development-conversion-option > summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    cursor: pointer;
    list-style: none;
}

.development-conversion-option > summary::-webkit-details-marker {
    display: none;
}

.development-conversion-option > summary::after {
    margin-left: auto;
    color: var(--muted);
    content: "+";
    font-size: 0.9rem;
}

.development-conversion-option[open] > summary::after {
    content: "-";
}

.development-conversion-option > summary > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #167552;
    background: #e1f5eb;
}

.development-conversion-option.is-task > summary > span {
    color: #386fa9;
    background: #e9f2fb;
}

.development-conversion-option > summary strong,
.development-conversion-option > summary small {
    display: block;
}

.development-conversion-option > summary strong {
    color: var(--ink);
    font-size: 0.7rem;
}

.development-conversion-option > summary small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.59rem;
}

.development-conversion-option > form,
.development-conversion-unavailable {
    margin: 0 13px 13px;
    padding-top: 13px;
    border-top: 1px solid var(--line-soft);
}

.development-conversion-unavailable {
    color: var(--muted);
    font-size: 0.62rem;
}

.development-conversion-gate {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border: 1px dashed #cbd6dc;
    border-radius: 16px;
    color: #6c818c;
    background: rgba(255, 255, 255, 0.54);
}

.development-conversion-gate > .icon {
    flex: 0 0 auto;
}

.development-conversion-gate strong {
    color: var(--ink-soft);
    font-size: 0.67rem;
}

.development-conversion-gate p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.59rem;
}

.development-fridge-drawer-card {
    display: grid;
    gap: 15px;
    padding: 17px 19px;
    border: 1px solid #d5e3e8;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbfc, #eaf3f6);
}

.development-fridge-drawer-card h3 {
    margin-top: 5px;
    color: var(--ink);
    font-size: 0.82rem;
}

.development-fridge-drawer-card p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.63rem;
}

.development-reactivate-form {
    align-items: stretch;
    gap: 9px;
}

.development-reactivate-form select {
    flex: 1 1 auto;
}

.development-kickoff-option {
    display: flex !important;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px solid #d7eae1;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
}

.development-kickoff-option input {
    width: auto;
    margin-top: 2px;
}

.development-kickoff-option span {
    display: grid;
    gap: 3px;
}

.development-kickoff-option strong {
    color: var(--ink);
    font-size: 0.72rem;
}

.development-kickoff-option small {
    color: var(--muted);
    font-size: 0.64rem;
}

.development-archive-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 4px;
}

.development-archive-form small {
    color: var(--muted);
    font-size: 0.62rem;
    text-align: right;
}

@media (max-width: 1180px) {
    .development-command-card {
        grid-template-columns: 1fr;
        gap: 24px;
    }

}

@media (max-width: 820px) {
    .development-command-card {
        padding: 22px;
    }

    .development-stage-map {
        grid-template-columns: repeat(5, minmax(105px, 1fr));
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .development-board-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .development-board-heading > p {
        text-align: left;
    }

    .development-form-trio {
        grid-template-columns: 1fr;
    }

    .production-mail-heading,
    .production-mail-setup {
        grid-template-columns: 1fr;
    }

    .production-mail-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .production-mail-row {
        grid-template-columns: minmax(150px, 0.65fr) minmax(230px, 1.35fr);
    }

    .production-mail-actions {
        grid-column: 1 / -1;
    }

    .development-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .development-metric-item:nth-child(3) {
        border-left: 0;
    }

    .development-metric-item:nth-child(n + 3) {
        border-top: 1px solid var(--line-soft);
    }

    .development-fridge-card {
        grid-template-columns: 1fr auto;
    }

    .development-fridge-next {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 700px) {
    .development-page-head .page-title-row {
        gap: 14px;
    }

    .development-command-card {
        margin-bottom: 14px;
        padding: 19px;
        border-radius: 20px;
    }

    .development-command-copy p {
        font-size: 0.7rem;
    }

    .development-metric-strip {
        margin-bottom: 14px;
    }

    .production-mail-shell {
        margin-bottom: 14px;
        border-radius: 18px;
    }

    .production-mail-heading {
        padding: 15px;
    }

    .production-mail-tools {
        width: 100%;
        flex-wrap: wrap;
    }

    .production-mail-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 15px;
    }

    .production-mail-actions {
        grid-column: auto;
        justify-content: flex-start;
    }

    .production-mail-setup {
        gap: 15px;
        padding: 16px 15px;
    }

    .production-mail-connect-visual {
        min-height: 120px;
    }

    .production-mail-requirements > div {
        grid-template-columns: 1fr;
    }

    .development-board-shell {
        padding: 15px;
        border-radius: 19px;
    }

    .development-board {
        grid-template-columns: repeat(4, minmax(276px, 82vw));
        margin-right: -15px;
    }

    .development-drawer-head {
        padding: 18px 17px 15px;
    }

    .development-drawer-scroll {
        padding: 14px 14px 24px;
    }

    .development-drawer-section,
    .development-convert-card {
        padding: 15px;
        border-radius: 17px;
    }

    .development-drawer-section-head,
    .development-convert-head,
    .development-archive-form {
        flex-direction: column;
        align-items: stretch;
    }

    .development-archive-form small {
        text-align: left;
    }

    .development-fridge-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 15px;
    }

    .development-fridge-card {
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 14px 15px;
    }

    .development-fridge-next {
        grid-column: auto;
        grid-row: auto;
    }

    .development-fridge-actions {
        justify-content: flex-start;
    }

    .development-fridge-card-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .development-reactivate-form {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Personal planner */
.personal-planner-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(480px, 1.28fr);
    gap: 22px;
    align-items: start;
}

.planner-compose-card,
.planner-day-card {
    padding: 26px;
}

.planner-card-heading,
.planner-day-header,
.planner-progress-row,
.planner-section-label,
.planner-item,
.planner-form-actions {
    display: flex;
    align-items: center;
}

.planner-card-heading,
.planner-day-header,
.planner-section-label {
    justify-content: space-between;
    gap: 18px;
}

.planner-card-heading {
    align-items: flex-start;
}

.planner-card-heading h2,
.planner-day-header h2 {
    margin-top: 5px;
    color: var(--ink);
    font-size: 1.03rem;
    font-weight: 680;
}

.planner-card-heading p {
    max-width: 340px;
    margin-top: 7px;
    color: var(--muted-strong);
    font-size: 0.72rem;
    line-height: 1.5;
}

.planner-private-chip {
    min-height: 27px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    color: #456070;
    background: #edf3f6;
    font-size: 0.62rem;
    font-weight: 650;
}

.planner-feedback {
    margin-top: 18px;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 0.71rem;
}

.planner-feedback.success {
    color: #167354;
    background: #eaf7f1;
}

.planner-feedback.error {
    color: #aa2e45;
    background: #fff0f3;
}

.planner-compose-form {
    margin-top: 22px;
    display: grid;
    gap: 16px;
}

.planner-compose-form > label,
.planner-form-grid label {
    display: grid;
    gap: 8px;
    color: var(--muted-strong);
    font-size: 0.63rem;
    font-weight: 680;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.planner-compose-form input,
.planner-compose-form select,
.planner-compose-form textarea {
    min-width: 0;
    border-color: #e2e5e9;
    background: rgba(247, 248, 249, 0.94);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 450;
    letter-spacing: 0;
    text-transform: none;
}

.planner-compose-form textarea {
    min-height: 104px;
    resize: vertical;
}

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

.planner-reminder-field {
    padding: 14px;
    grid-template-columns: minmax(0, 1fr) 118px !important;
    align-items: center;
    gap: 8px 14px !important;
    border-radius: 14px;
    background: rgba(239, 243, 246, 0.78);
}

.planner-reminder-field > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.planner-reminder-field small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}

.planner-form-actions {
    justify-content: flex-end;
    gap: 10px;
}

.planner-form-actions .primary-button,
.planner-form-actions .secondary-button {
    min-width: 132px;
}

.planner-day-card {
    min-height: 510px;
}

.planner-day-header {
    min-height: 52px;
}

.planner-date-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.planner-date-nav > a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
}

.planner-date-nav > a:hover {
    background: #f0f2f4;
}

.planner-date-nav span {
    color: var(--accent);
    font-size: 0.61rem;
    font-weight: 680;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.planner-progress-row {
    margin: 22px 0 24px;
    gap: 14px;
}

.planner-progress-row > div:first-child {
    min-width: 78px;
    display: grid;
    gap: 2px;
}

.planner-progress-row strong {
    color: var(--ink);
    font-size: 0.79rem;
    font-weight: 650;
}

.planner-progress-row span,
.planner-progress-row b {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 580;
}

.planner-progress-track {
    height: 7px;
    flex: 1;
    overflow: hidden;
    border-radius: 999px;
    background: #eceef1;
}

.planner-progress-track > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #2c9873;
    transition: width 220ms ease;
}

.planner-overdue-block {
    margin-bottom: 22px;
    padding: 15px;
    border: 1px solid #f0d9cc;
    border-radius: 16px;
    background: rgba(255, 247, 241, 0.76);
}

.planner-section-label {
    margin-bottom: 10px;
    color: var(--muted-strong);
    font-size: 0.67rem;
    font-weight: 680;
}

.planner-section-label > span {
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.planner-section-label > strong {
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 580;
}

.planner-list {
    display: grid;
}

.planner-item {
    min-width: 0;
    gap: 13px;
    padding: 16px 4px;
    border-top: 1px solid var(--line-soft);
    transition: background 140ms ease;
}

.planner-list .planner-item:first-child {
    border-top: 0;
}

.planner-item:hover {
    margin-inline: -10px;
    padding-inline: 14px;
    border-radius: 14px;
    background: rgba(241, 243, 245, 0.86);
}

.planner-list.compact .planner-item {
    padding-block: 11px;
}

.planner-check-button {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1.5px solid #cbd0d6;
    border-radius: 9px;
    color: transparent;
    background: #fff;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.planner-check-button:hover {
    border-color: #2c9873;
    color: #2c9873;
    background: #edf8f4;
}

.planner-item.completed .planner-check-button {
    border-color: #2c9873;
    color: #fff;
    background: #2c9873;
}

.planner-item-copy {
    min-width: 0;
    flex: 1;
}

.planner-item-copy > strong {
    display: block;
    color: var(--ink);
    font-size: 0.79rem;
    font-weight: 630;
    line-height: 1.4;
}

.planner-item-copy > p {
    margin-top: 5px;
    color: var(--muted-strong);
    font-size: 0.69rem;
    line-height: 1.5;
    white-space: pre-line;
}

.planner-item.completed .planner-item-copy > strong,
.planner-item.completed .planner-item-copy > p {
    color: #9b9fa5;
    text-decoration: line-through;
}

.planner-item-meta {
    margin-top: 9px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.planner-priority,
.planner-reminder-chip,
.planner-date-chip {
    min-height: 23px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 650;
}

.planner-priority.baja {
    color: #477061;
    background: #edf5f1;
}

.planner-priority.media {
    color: #386a98;
    background: #edf4fb;
}

.planner-priority.alta {
    color: #a45b16;
    background: #fff3e5;
}

.planner-reminder-chip,
.planner-date-chip {
    color: #656a71;
    background: #f0f1f3;
}

.planner-reminder-chip.due,
.planner-item.alarm-due .planner-reminder-chip {
    color: #b42349;
    background: #ffeaf0;
}

.planner-item-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transition: opacity 140ms ease;
}

.planner-item:hover .planner-item-actions,
.planner-item:focus-within .planner-item-actions {
    opacity: 1;
}

.planner-item-actions form {
    display: contents;
}

.planner-icon-action {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.planner-icon-action:hover {
    color: var(--ink);
    background: #e8eaed;
}

.planner-icon-action.danger:hover {
    color: #b42349;
    background: #ffeaf0;
}

.planner-edit-link {
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 620;
}

.planner-empty-state {
    min-height: 280px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

.planner-empty-state > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #668090;
    background: #edf2f5;
}

.planner-empty-state strong {
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.planner-empty-state p {
    max-width: 290px;
    font-size: 0.7rem;
    line-height: 1.5;
}

.planner-badge {
    color: #fff;
    background: #2f7fc8;
}

@media (max-width: 1120px) {
    .personal-planner-layout {
        grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
        gap: 18px;
    }
}

@media (max-width: 960px) {
    .personal-planner-layout {
        grid-template-columns: 1fr;
    }

    .planner-compose-card,
    .planner-day-card {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .planner-compose-card,
    .planner-day-card {
        padding: 19px 16px;
        border-radius: 18px;
    }

    .planner-card-heading,
    .planner-day-header {
        align-items: flex-start;
    }

    .planner-private-chip,
    .planner-day-header > .text-action {
        flex: 0 0 auto;
    }

    .planner-date-nav {
        gap: 9px;
    }

    .planner-date-nav > a {
        width: 31px;
        height: 31px;
    }

    .planner-day-header h2 {
        font-size: 0.86rem;
    }

    .planner-form-grid {
        grid-template-columns: 1fr;
    }

    .planner-reminder-field {
        grid-template-columns: 1fr !important;
    }

    .planner-reminder-field input {
        width: 100%;
    }

    .planner-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .planner-form-actions > * {
        width: 100%;
        justify-content: center;
    }

    .planner-progress-row {
        gap: 9px;
    }

    .planner-item {
        align-items: flex-start;
        gap: 10px;
    }

    .planner-item-actions {
        opacity: 1;
    }

    .planner-item:hover {
        margin-inline: 0;
        padding-inline: 4px;
        background: transparent;
    }
}

/* Notification settings */
.notification-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    gap: 22px;
    align-items: start;
}

.notification-device-card,
.notification-preferences-card {
    padding: 26px;
}

.notification-heading {
    align-items: flex-start;
}

.notification-heading h2,
.notification-preferences-card h2 {
    margin-top: 5px;
}

.status-badge {
    min-height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #f0f1f3;
    color: #72767d;
    font-size: 0.67rem;
    font-weight: 650;
    white-space: nowrap;
}

.status-badge.active {
    background: #e7f8ef;
    color: #087a51;
}

.status-badge.warning {
    background: #fff4df;
    color: #a86008;
}

.status-badge.error {
    background: #ffe8ef;
    color: #b42349;
}

.notification-status-copy {
    margin-top: 24px;
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.5;
}

.notification-info-callout,
.notification-saved-copy {
    margin-top: 16px;
    padding: 13px 14px;
    border-radius: 13px;
    background: #f3f4f6;
    color: #63676e;
    font-size: 0.76rem;
    line-height: 1.45;
}

.notification-info-callout.warning {
    background: #fff7e8;
    color: #965f13;
}

.notification-saved-copy {
    background: #eaf8f1;
    color: #087a51;
}

.notification-device-actions {
    margin-top: 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.notification-device-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.notification-device-actions .text-action.danger {
    color: #b42349;
}

.notification-device-meta {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.notification-device-meta > div {
    min-height: 82px;
    padding: 15px;
    display: grid;
    align-content: center;
    gap: 7px;
    border-radius: 15px;
    background: var(--surface-field);
}

.notification-device-meta span {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.notification-device-meta strong {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 620;
}

.notification-privacy-copy {
    margin-top: 18px;
    color: var(--muted-strong);
    font-size: 0.74rem;
    line-height: 1.5;
}

.notification-options-form {
    margin-top: 20px;
    display: grid;
}

.notification-option {
    min-height: 72px;
    padding: 14px 0;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.notification-option span {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.notification-option strong {
    font-size: 0.82rem;
    font-weight: 620;
}

.notification-option small {
    color: var(--muted-strong);
    font-size: 0.71rem;
    line-height: 1.4;
}

.notification-option input[type="checkbox"] {
    position: relative;
    width: 42px;
    min-width: 42px;
    height: 24px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: #d8dade;
    box-shadow: none;
    cursor: pointer;
    transition: background 160ms ease;
}

.notification-option input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 160ms ease;
}

.notification-option input[type="checkbox"]:checked {
    background: #242323;
}

.notification-option input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

.notification-options-form > .primary-button {
    margin-top: 20px;
    justify-self: start;
}

@media (max-width: 960px) {
    .notification-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .notification-device-card,
    .notification-preferences-card {
        padding: 20px 17px;
    }

    .notification-heading {
        gap: 14px;
    }

    .notification-device-meta {
        grid-template-columns: 1fr;
    }

    .notification-device-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .notification-device-actions > * {
        width: 100%;
        justify-content: center;
    }
}

/* Installable app */
.pwa-install-button {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 180;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 60px;
    padding: 7px 17px 7px 8px;
    border: 1px solid rgba(36, 35, 35, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 46px rgba(36, 35, 35, 0.17), 0 2px 7px rgba(36, 35, 35, 0.08);
    color: #242323;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.pwa-install-button[hidden] {
    display: none;
}

.pwa-install-button img {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 13px;
    filter: drop-shadow(0 4px 7px rgba(36, 35, 35, 0.13));
}

.pwa-install-copy {
    display: grid;
    gap: 2px;
    text-align: left;
}

.pwa-install-copy strong,
.pwa-install-copy small {
    display: block;
    white-space: nowrap;
}

.pwa-install-copy strong {
    color: #242323;
    font-size: 0.72rem;
    font-weight: 690;
    letter-spacing: -0.01em;
}

.pwa-install-copy small {
    color: #7c7c80;
    font-size: 0.57rem;
    font-weight: 560;
}

.pwa-install-button:hover {
    background: #fff;
    box-shadow: 0 22px 52px rgba(36, 35, 35, 0.2), 0 3px 9px rgba(36, 35, 35, 0.08);
    transform: translateY(-2px) scale(1.01);
}

.push-activation-card {
    position: fixed;
    top: 86px;
    right: 22px;
    z-index: 205;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: min(440px, calc(100vw - 44px));
    padding: 12px;
    border: 1px solid rgba(36, 35, 35, 0.09);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 54px rgba(36, 35, 35, 0.16), 0 2px 8px rgba(36, 35, 35, 0.06);
    color: #242323;
}

.push-activation-card[hidden] {
    display: none;
}

.push-activation-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: #242323;
    color: #fff;
}

.push-activation-icon .icon {
    width: 20px;
    height: 20px;
}

.push-activation-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.push-activation-copy strong {
    font-size: 0.82rem;
    font-weight: 680;
    letter-spacing: -0.012em;
}

.push-activation-copy small {
    color: #75757a;
    font-size: 0.68rem;
    line-height: 1.35;
}

.push-activation-enable,
.push-activation-later {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.push-activation-enable {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    background: #242323;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 650;
}

.push-activation-later {
    grid-column: 2 / -1;
    justify-self: end;
    padding: 0 4px;
    background: transparent;
    color: #8a8a8f;
    font-size: 0.64rem;
}

.pwa-guide-backdrop {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(20, 22, 26, 0.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pwa-guide-card {
    position: relative;
    width: min(100%, 430px);
    padding: 32px;
    border: 1px solid rgba(25, 28, 33, 0.08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(24, 26, 31, 0.24);
    color: #202124;
}

.pwa-guide-card > img {
    width: 78px;
    height: 78px;
    margin-bottom: 22px;
    border-radius: 22px;
    filter: drop-shadow(0 9px 14px rgba(36, 35, 35, 0.14));
}

.pwa-guide-card .eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #e64b20;
}

.pwa-guide-card h2 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.pwa-guide-card ol {
    display: grid;
    gap: 12px;
    margin: 24px 0;
    padding-left: 22px;
    color: #4f5359;
    line-height: 1.5;
}

.pwa-guide-card p {
    margin: 0;
    color: #85898f;
    font-size: 0.84rem;
    line-height: 1.5;
}

.pwa-guide-close {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    background: #f2f2f4;
    color: #555960;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 700px) {
    .push-activation-card {
        top: calc(70px + env(safe-area-inset-top));
        right: 12px;
        width: calc(100vw - 24px);
    }

    .pwa-install-button {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .pwa-guide-backdrop {
        align-items: end;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }

    .pwa-guide-card {
        padding: 26px 22px;
        border-radius: 22px;
    }
}

@media (display-mode: standalone) {
    .pwa-install-button {
        display: none !important;
    }
}

/* Voice database */
.voice-database-page {
    min-width: 0;
}

.voice-database-page > .project-details-notice {
    margin-bottom: 14px;
}

.voice-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
}

.voice-metric-item {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
}

.voice-metric-item + .voice-metric-item {
    border-left: 1px solid var(--line-soft);
}

.voice-metric-item span,
.voice-filter-bar label > span,
.voice-source-note span {
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.voice-metric-item strong {
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1;
}

.voice-catalog-shell {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(247, 248, 249, 0.94);
    box-shadow: var(--shadow-sm);
}

.voice-filter-bar {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(140px, 0.28fr)) auto auto;
    gap: 10px;
    align-items: end;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.voice-filter-bar label {
    display: grid;
    gap: 6px;
}

.voice-filter-bar input,
.voice-filter-bar select {
    min-height: 39px;
    border-radius: 11px;
    background: #f6f7f8;
}

.voice-search-field {
    position: relative;
}

.voice-search-field .icon {
    position: absolute;
    z-index: 1;
    bottom: 11px;
    left: 12px;
    width: 17px;
    height: 17px;
    color: var(--muted);
}

.voice-search-field input {
    padding-left: 39px;
}

.voice-filter-bar .secondary-button {
    min-height: 39px;
}

.voice-filter-bar > .text-action {
    align-self: center;
    margin: 0 3px 0 1px;
    white-space: nowrap;
}

.voice-results-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 22px 2px 15px;
}

.voice-results-heading h2 {
    margin-top: 5px;
    color: var(--ink);
    font-size: 0.95rem;
}

.voice-results-heading p {
    max-width: 440px;
    color: var(--muted);
    font-size: 0.66rem;
    line-height: 1.5;
    text-align: right;
}

.voice-talent-grid {
    --voice-table-columns: minmax(190px, 1.45fr) minmax(88px, 0.5fr) minmax(125px, 0.85fr) minmax(116px, 0.7fr) 68px minmax(145px, 0.75fr);
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.voice-table-head,
.voice-talent-card {
    display: grid;
    grid-template-columns: var(--voice-table-columns);
    align-items: center;
}

.voice-table-head {
    min-height: 34px;
    padding: 0 11px;
    color: var(--muted);
    background: #f4f6f7;
    font-size: 0.51rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.voice-talent-card {
    min-width: 0;
    min-height: 49px;
    padding: 0 11px;
    border-top: 1px solid var(--line-soft);
    background: #fff;
    transition: background 140ms ease;
}

.voice-talent-card:hover {
    background: #f6f8f8;
}

.voice-row-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px 7px 0;
}

.voice-avatar {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #3f5e67;
    background: #dcebed;
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.voice-avatar.voice-type-masculina {
    color: #235f8e;
    background: #dcecf8;
}

.voice-avatar.voice-type-femenina {
    color: #a34f37;
    background: #fae7df;
}

.voice-avatar.voice-type-otra {
    color: #5d5c62;
    background: #ececef;
}

.voice-row-identity .voice-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    font-size: 0.54rem;
}

.voice-row-identity h3 {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.65rem;
    font-weight: 680;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-row-name {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.voice-actor-code {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid #dbe5e7;
    border-radius: 999px;
    color: #31545d;
    background: #edf4f5;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 0.48rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.voice-actor-code.is-pending {
    color: var(--muted);
    background: #f5f6f7;
    border-color: var(--line);
    font-family: inherit;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.voice-row-type {
    min-width: 0;
}

.voice-type-badge {
    display: inline-flex;
    max-width: 135px;
    padding: 4px 7px;
    overflow: hidden;
    border-radius: 999px;
    color: #52676e;
    background: #edf2f3;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.voice-type-badge.voice-type-masculina {
    color: #236998;
    background: #e8f3fb;
}

.voice-type-badge.voice-type-femenina {
    color: #a34f37;
    background: #fff0e9;
}

.voice-open-arrow {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #426f7a;
    background: #eef4f5;
    font-size: 0.72rem;
}

.voice-language-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    overflow: hidden;
}

.voice-language-row span,
.voice-language-row small {
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--muted-strong);
    background: #f3f5f6;
    font-size: 0.48rem;
    white-space: nowrap;
}

.voice-row-residence {
    min-width: 0;
    display: flex;
    align-items: center;
    padding-right: 8px;
}

.voice-row-residence span {
    overflow: hidden;
    color: #31545d;
    font-size: 0.52rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-row-residence span.is-pending {
    color: var(--muted);
    font-weight: 560;
}

.voice-row-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--muted);
    font-size: 0.49rem;
}

.voice-row-count strong {
    color: var(--ink-soft);
    font-size: 0.65rem;
}

.voice-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.voice-quick-classify {
    display: flex;
    align-items: center;
    gap: 3px;
}

.voice-quick-classify button {
    padding: 4px 6px;
    border: 1px solid #dfe5e7;
    border-radius: 8px;
    color: var(--ink-soft);
    background: #fff;
    font: inherit;
    font-size: 0.47rem;
    font-weight: 650;
    cursor: pointer;
}

.voice-quick-classify button:hover {
    border-color: #b9cbd1;
    background: #edf4f6;
}

.voice-empty-state {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

.voice-empty-state > span {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #406e79;
    background: #e6f0f2;
}

.voice-empty-state h3 {
    color: var(--ink);
    font-size: 0.84rem;
}

.voice-empty-state p {
    max-width: 420px;
    font-size: 0.67rem;
    line-height: 1.5;
}

.voice-empty-state.compact {
    min-height: 100px;
}

.voice-talent-drawer {
    width: min(860px, 100%);
}

.voice-drawer-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.voice-drawer-identity > div:last-child {
    min-width: 0;
}

.voice-drawer-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.voice-review-code-field {
    display: grid;
    gap: 7px;
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 700;
}

.voice-drawer-head h2 {
    margin-top: 6px;
}

.voice-drawer-head p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-source-note {
    display: grid;
    gap: 6px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #f5f6f7;
}

.voice-source-note code {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-sample-total {
    min-width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #406e79;
    background: #e9f2f4;
    font-size: 0.63rem;
    font-weight: 700;
}

.voice-sample-list {
    display: grid;
    gap: 8px;
}

.voice-sample-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(225px, 0.78fr);
    gap: 15px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: #fafbfb;
}

.voice-sample-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.voice-sample-copy span {
    color: #43808b;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.voice-sample-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-sample-copy small {
    color: var(--muted);
    font-size: 0.53rem;
}

.voice-sample-row audio {
    width: 100%;
    height: 35px;
}

.voice-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.voice-pagination > :last-child {
    justify-self: end;
}

.voice-pagination p {
    color: var(--muted);
    font-size: 0.64rem;
}

.voice-pagination strong {
    color: var(--ink);
}

@media (max-width: 1100px) {
    .voice-filter-bar {
        grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(135px, 0.4fr));
    }

    .voice-filter-bar .secondary-button,
    .voice-filter-bar > .text-action {
        justify-self: start;
    }
}

@media (max-width: 820px) {
    .voice-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .voice-metric-item:nth-child(3) {
        border-left: 0;
    }

    .voice-metric-item:nth-child(n + 3) {
        border-top: 1px solid var(--line-soft);
    }

    .voice-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .voice-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .voice-page-head .page-title-row {
        gap: 14px;
    }

    .voice-catalog-shell {
        padding: 14px;
        border-radius: 19px;
    }

    .voice-filter-bar {
        grid-template-columns: 1fr;
    }

    .voice-search-field {
        grid-column: auto;
    }

    .voice-results-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 18px;
    }

    .voice-results-heading p {
        text-align: left;
    }

    .voice-talent-grid {
        gap: 6px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .voice-table-head {
        display: none;
    }

    .voice-talent-card {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "identity actions"
            "type count"
            "languages languages"
            "residence residence";
        gap: 4px 10px;
        padding: 8px 9px;
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .voice-row-identity { grid-area: identity; padding: 0; }
    .voice-row-type { grid-area: type; }
    .voice-language-row { grid-area: languages; padding: 0; }
    .voice-row-residence { grid-area: residence; padding: 1px 0 0 37px; }
    .voice-row-count { grid-area: count; justify-content: flex-end; }
    .voice-row-actions { grid-area: actions; }

    .voice-row-identity .voice-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .voice-drawer-head .voice-avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .voice-sample-row {
        grid-template-columns: 1fr;
    }

    .voice-sample-row audio {
        height: 38px;
    }

    .voice-pagination {
        gap: 8px;
    }

    .voice-pagination .secondary-button {
        padding-inline: 10px;
        font-size: 0.6rem;
    }
}

/* Voice database quick review */
.voice-page-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.voice-page-actions form {
    display: flex;
}

.voice-review-page {
    min-width: 0;
}

.voice-review-progress-card {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px 19px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.voice-review-progress-card > div:first-child {
    display: grid;
    grid-template-columns: auto auto;
    gap: 3px 12px;
    align-items: end;
}

.voice-review-progress-card .eyebrow {
    grid-column: 1 / -1;
}

.voice-review-progress-card strong {
    color: var(--ink);
    font-size: 0.92rem;
}

.voice-review-progress-card p {
    color: var(--muted);
    font-size: 0.62rem;
}

.voice-review-progress-card > span {
    min-width: 42px;
    color: #37717c;
    font-size: 0.73rem;
    font-weight: 750;
    text-align: right;
}

.voice-review-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edef;
}

.voice-review-progress-track i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #4d93a0, #71b7a6);
    transition: width 220ms ease;
}

.voice-review-workspace {
    display: grid;
    grid-template-columns: minmax(330px, 0.85fr) minmax(430px, 1.15fr);
    gap: 16px;
    align-items: start;
}

.voice-review-listen-panel,
.voice-review-form,
.voice-review-complete {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.voice-review-listen-panel {
    position: sticky;
    top: 20px;
    padding: 21px;
}

.voice-review-identity {
    display: flex;
    align-items: center;
    gap: 13px;
}

.voice-review-identity .voice-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 17px;
}

.voice-review-identity h2 {
    margin-top: 6px;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.2;
}

.voice-review-identity p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.63rem;
}

.voice-review-source {
    display: grid;
    gap: 6px;
    margin: 17px 0;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f5f7f8;
}

.voice-review-source span {
    color: var(--muted);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.voice-review-source code {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-review-section-title,
.voice-review-form-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.voice-review-section-title h3,
.voice-review-form-head h2 {
    margin-top: 5px;
    color: var(--ink);
    font-size: 0.86rem;
}

.voice-review-section-title small,
.voice-review-form-head > span {
    color: var(--muted);
    font-size: 0.55rem;
}

.voice-review-page kbd {
    min-width: 20px;
    display: inline-grid;
    place-items: center;
    padding: 3px 5px;
    border: 1px solid #d8e0e3;
    border-bottom-width: 2px;
    border-radius: 6px;
    color: #49636b;
    background: #fff;
    font: inherit;
    font-size: 0.52rem;
    font-weight: 700;
}

.voice-review-samples {
    display: grid;
    gap: 8px;
}

.voice-review-sample {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: #fafbfb;
}

.voice-review-sample > div {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.voice-review-sample span {
    color: #43808b;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.voice-review-sample strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-review-sample audio {
    width: 100%;
    height: 34px;
}

.voice-review-more {
    color: var(--muted);
    font-size: 0.56rem;
    text-align: center;
}

.voice-review-form {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.voice-review-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.voice-review-fieldset legend,
.voice-review-notes {
    width: 100%;
    margin-bottom: 9px;
    color: var(--ink);
    font-size: 0.67rem;
    font-weight: 650;
}

.voice-review-fieldset legend small {
    margin-left: 5px;
    color: var(--muted);
    font-size: 0.52rem;
    font-weight: 500;
}

.voice-review-choice-grid {
    display: grid;
    gap: 8px;
}

.voice-review-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.voice-review-age-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.voice-review-language-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.voice-review-tags-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.voice-review-studio-grid,
.voice-review-residence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.voice-review-choice-grid input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.voice-review-choice-grid label {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px;
    border: 1px solid #dfe5e7;
    border-radius: 11px;
    color: var(--ink-soft);
    background: #f8f9fa;
    cursor: pointer;
    font-size: 0.6rem;
    font-weight: 620;
    text-align: center;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.voice-review-choice-grid label:hover {
    border-color: #b8cbd0;
    background: #f0f5f6;
}

.voice-review-choice-grid input:focus-visible + label {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

.voice-review-choice-grid input:checked + label {
    border-color: #4d93a0;
    color: #1f5c67;
    background: #e5f2f3;
    box-shadow: inset 0 0 0 1px #4d93a0;
}

.voice-review-type-grid label {
    min-height: 54px;
}

.voice-review-notes {
    display: grid;
    gap: 8px;
    margin: 0;
}

.voice-review-notes textarea {
    resize: vertical;
}

.voice-review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 3px;
}

.voice-review-actions .primary-button {
    min-width: 190px;
}

.voice-review-actions .primary-button kbd {
    margin-left: 7px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.12);
}

.voice-review-complete {
    min-height: 390px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 11px;
    padding: 34px;
    text-align: center;
}

.voice-review-complete > span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #2f7964;
    background: #e2f3ec;
}

.voice-review-complete h2 {
    color: var(--ink);
    font-size: 1.15rem;
}

.voice-review-complete p {
    color: var(--muted);
    font-size: 0.68rem;
}

@media (max-width: 1040px) {
    .voice-review-workspace {
        grid-template-columns: 1fr;
    }

    .voice-review-listen-panel {
        position: static;
    }
}

@media (max-width: 700px) {
    .voice-page-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .voice-page-actions form,
    .voice-page-actions .primary-button,
    .voice-page-actions .secondary-button {
        width: 100%;
    }

    .voice-review-progress-card {
        grid-template-columns: 1fr auto;
        gap: 11px;
    }

    .voice-review-progress-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .voice-review-progress-card > span {
        grid-column: 2;
        grid-row: 1;
    }

    .voice-review-listen-panel,
    .voice-review-form {
        padding: 16px;
        border-radius: 18px;
    }

    .voice-review-form-head,
    .voice-review-section-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .voice-review-age-grid,
    .voice-review-language-grid,
    .voice-review-tags-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .voice-review-type-grid {
        grid-template-columns: 1fr;
    }

    .voice-review-type-grid label {
        justify-content: flex-start;
        padding-inline: 14px;
    }

    .voice-review-residence-grid {
        grid-template-columns: 1fr;
    }

    .voice-review-residence-grid label {
        justify-content: flex-start;
        padding-inline: 14px;
    }

    .voice-review-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .voice-review-actions .primary-button {
        width: 100%;
    }
}

/* Studio live map */
.studio-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.studio-page-head {
    margin-bottom: 18px;
}

.studio-refresh-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.studio-refresh-button .icon {
    width: 15px;
    height: 15px;
}

.studio-live-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(18px);
}

.studio-live-source,
.studio-live-metrics,
.studio-live-metrics span {
    display: flex;
    align-items: center;
}

.studio-live-source {
    gap: 10px;
}

.studio-live-source > div {
    display: grid;
    gap: 2px;
}

.studio-live-source time {
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.35;
}

.studio-live-source strong {
    font-size: 0.72rem;
    font-weight: 680;
}

.studio-live-source small {
    color: var(--muted-strong);
    font-size: 0.59rem;
}

.studio-live-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #27ae72;
    box-shadow: 0 0 0 5px rgba(39, 174, 114, 0.12);
}

.studio-live-dot::after {
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(39, 174, 114, 0.38);
    border-radius: inherit;
    content: "";
    animation: studio-live-pulse 2s ease-out infinite;
}

@keyframes studio-live-pulse {
    0% { opacity: 0.8; transform: scale(0.65); }
    75%, 100% { opacity: 0; transform: scale(1.45); }
}

.studio-live-metrics {
    gap: 7px;
}

.studio-live-metrics span {
    gap: 5px;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--muted-strong);
    background: var(--surface-field);
    font-size: 0.59rem;
    white-space: nowrap;
}

.studio-live-metrics strong {
    color: var(--ink);
    font-size: 0.68rem;
}

.studio-calendar-warning {
    display: grid;
    gap: 3px;
    margin-bottom: 18px;
    padding: 12px 15px;
    border: 1px solid rgba(209, 126, 24, 0.2);
    border-radius: 14px;
    color: #87500c;
    background: #fff8e9;
    font-size: 0.62rem;
}

.studio-calendar-warning strong {
    font-size: 0.67rem;
}

.studio-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
    gap: 18px;
    align-items: stretch;
}

.studio-map-panel,
.studio-room-board {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-md);
}

.studio-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line-soft);
}

.studio-panel-heading > div:first-child {
    display: grid;
    gap: 4px;
}

.studio-panel-heading h2 {
    font-size: 0.93rem;
    font-weight: 680;
    letter-spacing: -0.02em;
}

.studio-state-legend {
    display: flex;
    align-items: center;
    gap: 12px;
}

.studio-state-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted-strong);
    font-size: 0.55rem;
    white-space: nowrap;
}

.studio-state-legend i,
.studio-room-row-head span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35a66f;
}

.studio-state-legend i.busy,
.studio-room-row.is-busy .studio-room-row-head span i {
    background: #e5484d;
}

.studio-state-legend i.soon,
.studio-room-row.is-soon .studio-room-row-head span i {
    background: #e8a12d;
}

.studio-map {
    position: relative;
    width: min(100%, 760px);
    margin: 0 auto;
    overflow: hidden;
    background: #2f314a;
}

.studio-map > img {
    width: 100%;
    height: auto;
}

.studio-room-hotspot {
    position: absolute;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: clamp(5px, 0.8vw, 9px);
    border: 0;
    border-radius: 0;
    color: #fff;
    background: transparent;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.78);
    transition: transform 150ms ease, opacity 150ms ease;
}

.studio-room-hotspot:hover {
    z-index: 2;
    transform: translateY(-2px);
    opacity: 0.84;
}

.studio-room-hotspot.room-three { top: 3.1%; left: 3.7%; width: 23.5%; }
.studio-room-hotspot.room-four { top: 30.8%; left: 3.7%; width: 23.5%; }
.studio-room-hotspot.room-two { top: 3.1%; left: 47.7%; width: 23%; }
.studio-room-hotspot.room-one { top: 24.4%; left: 55.6%; width: 36.2%; }
.studio-room-hotspot.room-five { top: 53.6%; left: 65.3%; width: 28.8%; }
.studio-room-hotspot.room-six { top: 78.9%; left: 71.7%; width: 25.2%; }

.studio-map-room-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.studio-map-room-top strong {
    overflow: hidden;
    font-size: clamp(0.76rem, 1.15vw, 0.96rem);
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-map-room-top i {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #35a66f;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(53, 166, 111, 0.24);
}

.studio-room-hotspot.is-busy .studio-map-room-top i {
    background: #e5484d;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.13);
}

.studio-room-hotspot.is-soon .studio-map-room-top i {
    background: #e8a12d;
    box-shadow: 0 0 0 3px rgba(232, 161, 45, 0.15);
}

.studio-room-hotspot b,
.studio-room-hotspot small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-room-hotspot b {
    font-size: clamp(0.61rem, 0.82vw, 0.72rem);
    font-weight: 660;
}

.studio-room-hotspot small {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.51rem, 0.68vw, 0.59rem);
}

.studio-room-board {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 892px;
    overflow-y: auto;
}

.studio-room-board-heading {
    position: sticky;
    z-index: 3;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
}

.studio-board-count {
    min-width: 30px;
    padding: 6px 8px;
    border-radius: 999px;
    color: var(--muted-strong);
    background: var(--surface-field);
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
}

.studio-room-list {
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.studio-room-row {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr);
    scroll-margin-top: 80px;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    transition: background 140ms ease;
}

.studio-room-row:last-child {
    border-bottom: 0;
}

.studio-room-row:hover,
.studio-room-row:target {
    background: var(--surface-alt);
}

.studio-room-color {
    margin: 15px 0 15px 14px;
    border-radius: 999px;
    background: var(--room-color);
}

.studio-room-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 15px 16px 14px 14px;
}

.studio-room-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.studio-room-row-head > strong {
    font-size: 0.69rem;
    font-weight: 720;
}

.studio-room-row-head > span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted-strong);
    font-size: 0.52rem;
    font-weight: 650;
}

.studio-room-copy h3 {
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 640;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-room-copy p {
    overflow: hidden;
    color: var(--muted-strong);
    font-size: 0.57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-room-copy footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 0.5rem;
}

.studio-session-progress {
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-field);
}

.studio-session-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--room-color);
}

.studio-unassigned-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1.45fr);
    gap: 22px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(212, 142, 45, 0.18);
    border-radius: 18px;
    background: rgba(255, 249, 237, 0.9);
}

.studio-unassigned-panel > div:first-child {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.studio-unassigned-icon {
    width: 28px;
    height: 28px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    color: #975b10;
    background: #ffe7bc;
    font-size: 0.68rem;
    font-weight: 800;
}

.studio-unassigned-panel strong {
    font-size: 0.66rem;
}

.studio-unassigned-panel p {
    margin-top: 3px;
    color: #866f4f;
    font-size: 0.56rem;
    line-height: 1.45;
}

.studio-unassigned-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    overflow-x: auto;
}

.studio-unassigned-list > span {
    min-width: 145px;
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr);
    gap: 2px 7px;
    padding: 9px 10px;
    border: 1px solid rgba(212, 142, 45, 0.16);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.7);
}

.studio-unassigned-list i {
    width: 7px;
    height: 7px;
    grid-row: 1 / 3;
    align-self: center;
    border-radius: 50%;
    background: var(--event-color);
}

.studio-unassigned-list strong,
.studio-unassigned-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-unassigned-list strong {
    font-size: 0.56rem;
}

.studio-unassigned-list small {
    color: var(--muted-strong);
    font-size: 0.49rem;
}

@media (max-width: 1200px) {
    .studio-overview-grid {
        grid-template-columns: 1fr;
    }

    .studio-map {
        width: min(100%, 680px);
    }

    .studio-room-board {
        display: block;
        max-height: none;
        overflow: visible;
    }

    .studio-room-board-heading {
        position: static;
    }

    .studio-room-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .studio-room-row:nth-child(odd) {
        border-right: 1px solid var(--line-soft);
    }
}

@media (max-width: 700px) {
    .studio-page-head .page-title-row,
    .studio-live-strip,
    .studio-panel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .studio-refresh-button {
        width: 100%;
        justify-content: center;
    }

    .studio-live-strip {
        gap: 12px;
    }

    .studio-live-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .studio-live-metrics span {
        justify-content: center;
        padding-inline: 6px;
    }

    .studio-map-panel,
    .studio-room-board {
        border-radius: 18px;
    }

    .studio-panel-heading {
        gap: 11px;
        padding: 17px;
    }

    .studio-state-legend {
        justify-content: space-between;
    }

    .studio-room-hotspot {
        gap: 0;
        padding: 5px;
    }

    .studio-room-hotspot b,
    .studio-room-hotspot small {
        display: none;
    }

    .studio-map-room-top strong {
        font-size: 0.63rem;
    }

    .studio-map-room-top i {
        width: 5px;
        height: 5px;
        box-shadow: none !important;
    }

    .studio-room-list {
        grid-template-columns: 1fr;
    }

    .studio-room-row:nth-child(odd) {
        border-right: 0;
    }

    .studio-room-copy {
        padding-right: 14px;
    }

    .studio-unassigned-panel {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .studio-unassigned-list {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-live-dot::after {
        animation: none;
    }
}
.attendance-personal-export {
    margin-left: auto;
    min-height: 36px;
    padding: 0 14px;
}

.account-security-card {
    margin-top: 18px;
}

.account-password-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.account-password-form label {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 900px) {
    .account-password-form {
        grid-template-columns: 1fr;
    }

    .attendance-personal-export {
        width: 100%;
        margin-left: 0;
    }
}

/* Attendance app */
.attendance-app-shell {
    --attendance-blue: #0874e8;
    --attendance-blue-deep: #075fbe;
    --attendance-mint: #28c79a;
    --attendance-coral: #f17852;
    width: min(1120px, 100%);
    margin: 4px auto 0;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 34px;
    background: rgba(242, 247, 252, 0.82);
    box-shadow: 0 28px 80px rgba(3, 18, 37, 0.24);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.attendance-app-main,
.attendance-app-side {
    min-width: 0;
    border-radius: 24px;
}

.attendance-app-main {
    padding: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(8, 116, 232, 0.12), transparent 38%),
        rgba(255, 255, 255, 0.96);
}

.attendance-app-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.attendance-app-eyebrow,
.attendance-app-side > header > span {
    display: block;
    margin-bottom: 5px;
    color: #7b8796;
    font-size: 0.64rem;
    font-weight: 740;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.attendance-app-header h2 {
    color: #17202b;
    font-size: clamp(1.15rem, 2vw, 1.48rem);
    font-weight: 720;
    letter-spacing: -0.035em;
}

.attendance-sync-badge {
    min-height: 32px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #dce8f5;
    border-radius: 999px;
    color: #526276;
    background: rgba(255, 255, 255, 0.84);
    font-size: 0.62rem;
    font-weight: 650;
    white-space: nowrap;
}

.attendance-sync-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--attendance-mint);
    box-shadow: 0 0 0 4px rgba(40, 199, 154, 0.14);
}

.attendance-clock-panel {
    position: relative;
    padding: 26px;
    overflow: hidden;
    border: 1px solid #e7edf4;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 40px rgba(15, 42, 73, 0.08);
}

.attendance-clock-panel::after {
    position: absolute;
    inset: auto -80px -110px auto;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(8, 116, 232, 0.05);
    content: "";
    pointer-events: none;
}

.attendance-state-pill {
    width: fit-content;
    min-height: 30px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    color: #687688;
    background: #f2f5f8;
    font-size: 0.68rem;
    font-weight: 680;
}

.attendance-state-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #aeb8c4;
}

.attendance-app-shell.is-active .attendance-state-pill {
    color: #087b5d;
    background: #e9faf4;
}

.attendance-app-shell.is-active .attendance-state-pulse {
    background: var(--attendance-mint);
    box-shadow: 0 0 0 4px rgba(40, 199, 154, 0.14);
    animation: attendance-pulse 2s ease-in-out infinite;
}

.attendance-app-shell.is-paused .attendance-state-pill {
    color: #9d4b2f;
    background: #fff1eb;
}

.attendance-app-shell.is-paused .attendance-state-pulse {
    background: var(--attendance-coral);
}

@keyframes attendance-pulse {
    50% { box-shadow: 0 0 0 7px rgba(40, 199, 154, 0.04); }
}

.attendance-clock-face {
    padding: 32px 0 30px;
    display: grid;
    justify-items: center;
    text-align: center;
}

.attendance-clock-face > span {
    margin-bottom: 12px;
    color: #8995a3;
    font-size: 0.63rem;
    font-weight: 760;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.attendance-clock-face strong {
    color: #111820;
    font-size: clamp(3.6rem, 7vw, 5.1rem);
    font-variant-numeric: tabular-nums;
    font-weight: 300;
    letter-spacing: -0.075em;
    line-height: 0.98;
}

.attendance-clock-face small {
    margin-top: 14px;
    color: #8a95a2;
    font-size: 0.7rem;
    font-weight: 520;
}

.attendance-app-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.attendance-app-metrics > div {
    min-width: 0;
    min-height: 70px;
    padding: 12px 10px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    border-radius: 16px;
    background: #f4f6f9;
    text-align: center;
}

.attendance-app-metrics span {
    color: #909aa6;
    font-size: 0.57rem;
    font-weight: 730;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.attendance-app-metrics strong {
    overflow: hidden;
    color: #26313d;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    font-weight: 710;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-action-deck {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.attendance-action-deck > form:only-child {
    grid-column: 1 / -1;
}

.attendance-action-deck button {
    width: 100%;
    min-height: 68px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 17px;
    cursor: pointer;
    text-align: left;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.attendance-action-deck button:hover {
    transform: translateY(-2px);
}

.attendance-action-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--attendance-blue), var(--attendance-blue-deep));
    box-shadow: 0 13px 28px rgba(8, 116, 232, 0.24);
}

.attendance-action-secondary {
    color: #27323e;
    background: #f0f3f7;
}

.attendance-action-secondary:hover {
    background: #e7ecf2;
}

.attendance-action-secondary.is-exit {
    color: #fff;
    background: #242323;
}

.attendance-action-secondary.is-exit:hover {
    background: #111;
}

.attendance-action-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: currentColor;
    background: rgba(255, 255, 255, 0.16);
}

.attendance-action-secondary:not(.is-exit) .attendance-action-icon {
    background: #fff;
}

.attendance-action-deck button > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.attendance-action-deck button strong {
    font-size: 0.76rem;
    font-weight: 720;
}

.attendance-action-deck button small {
    color: inherit;
    font-size: 0.58rem;
    opacity: 0.7;
}

.attendance-flow {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.attendance-flow > div {
    position: relative;
    min-width: 0;
    padding: 10px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 12px;
    color: #a1aab5;
    background: rgba(238, 242, 246, 0.72);
}

.attendance-flow span {
    width: 20px;
    height: 20px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.52rem;
    font-weight: 750;
}

.attendance-flow strong {
    overflow: hidden;
    font-size: 0.59rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-flow .is-current {
    color: var(--attendance-blue);
    background: #eaf4ff;
}

.attendance-flow .is-complete {
    color: #138769;
    background: #e9f8f3;
}

.attendance-flow .is-complete span {
    border-color: var(--attendance-mint);
    color: #fff;
    background: var(--attendance-mint);
}

.attendance-flow .is-available {
    color: #303a46;
    background: #edf0f3;
}

.attendance-app-side {
    padding: 26px 22px 20px;
    display: flex;
    flex-direction: column;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(76, 153, 240, 0.24), transparent 32%),
        #242323;
}

.attendance-app-side > header {
    margin-bottom: 18px;
}

.attendance-app-side > header > span {
    color: rgba(255, 255, 255, 0.48);
}

.attendance-app-side h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.attendance-activity-list {
    display: grid;
    gap: 7px;
}

.attendance-activity-row {
    min-width: 0;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
}

.attendance-activity-icon {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    color: #9bc9ff;
    background: rgba(8, 116, 232, 0.18);
}

.attendance-activity-icon.is-complete {
    color: #7be4c6;
    background: rgba(40, 199, 154, 0.15);
}

.attendance-activity-icon.is-pause {
    color: #ffc0aa;
    background: rgba(241, 120, 82, 0.16);
}

.attendance-activity-row > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.attendance-activity-row strong {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.68rem;
    font-weight: 660;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-activity-row small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.57rem;
    font-variant-numeric: tabular-nums;
}

.attendance-activity-empty {
    min-height: 145px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}

.attendance-activity-empty strong {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.7rem;
}

.attendance-activity-empty span {
    font-size: 0.6rem;
}

.attendance-quick-actions {
    margin-top: auto;
    padding-top: 18px;
    display: grid;
    gap: 7px;
}

.attendance-quick-actions button {
    width: 100%;
    min-height: 51px;
    padding: 8px 11px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.075);
    cursor: pointer;
    text-align: left;
    transition: background 160ms ease, transform 160ms ease;
}

.attendance-quick-actions button:hover {
    transform: translateX(2px);
    background: rgba(255, 255, 255, 0.12);
}

.attendance-quick-actions button > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.attendance-quick-actions strong {
    font-size: 0.65rem;
    font-weight: 660;
}

.attendance-quick-actions small {
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.54rem;
}

.attendance-quick-actions b {
    color: rgba(255, 255, 255, 0.38);
    font-size: 1rem;
    font-weight: 400;
}

.attendance-privacy-note {
    margin: 14px 3px 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.55rem;
    line-height: 1.45;
}

.attendance-privacy-note span {
    color: #72d9bb;
}

.attendance-app-followup,
.attendance-information-card,
.attendance-app-shell + .inline-notice {
    width: min(1120px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.attendance-app-followup {
    scroll-margin-top: 90px;
}

.attendance-app-followup .attendance-disclosure {
    scroll-margin-top: 90px;
}

@media (max-width: 1180px) {
    .attendance-app-shell {
        grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    }
}

@media (max-width: 900px) {
    .attendance-app-shell {
        grid-template-columns: 1fr;
    }

    .attendance-app-side {
        min-height: 0;
    }

    .attendance-quick-actions {
        margin-top: 0;
    }
}

@media (max-width: 700px) {
    .attendance-app-shell {
        margin-top: 0;
        padding: 7px;
        border-radius: 27px;
    }

    .attendance-app-main,
    .attendance-app-side {
        border-radius: 21px;
    }

    .attendance-app-main {
        padding: 18px 14px 14px;
    }

    .attendance-app-header {
        align-items: center;
        margin-bottom: 16px;
    }

    .attendance-app-header h2 {
        font-size: 1.1rem;
    }

    .attendance-sync-badge {
        min-height: 28px;
        padding-inline: 9px;
        font-size: 0.55rem;
    }

    .attendance-clock-panel {
        padding: 18px 13px 14px;
        border-radius: 20px;
    }

    .attendance-clock-face {
        padding: 28px 0 25px;
    }

    .attendance-clock-face strong {
        font-size: clamp(3rem, 16vw, 4.25rem);
    }

    .attendance-app-metrics > div {
        min-height: 64px;
        padding-inline: 6px;
    }

    .attendance-app-metrics span {
        font-size: 0.5rem;
    }

    .attendance-app-metrics strong {
        font-size: 0.75rem;
    }

    .attendance-action-deck {
        grid-template-columns: 1fr;
    }

    .attendance-action-deck > form:only-child {
        grid-column: auto;
    }

    .attendance-action-deck button {
        min-height: 64px;
    }

    .attendance-flow {
        gap: 4px;
    }

    .attendance-flow > div {
        padding: 9px 3px;
        gap: 4px;
    }

    .attendance-flow span {
        width: 18px;
        height: 18px;
        font-size: 0.48rem;
    }

    .attendance-flow strong {
        font-size: 0.51rem;
    }

    .attendance-app-side {
        padding: 21px 16px 17px;
    }
}

@media (max-width: 430px) {
    .attendance-sync-badge {
        width: 29px;
        overflow: hidden;
        color: transparent;
        white-space: nowrap;
    }

    .attendance-sync-badge i {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .attendance-app-shell.is-active .attendance-state-pulse {
        animation: none;
    }
}

/* Attendance, Apple-inspired refinement */
.attendance-apple-layout {
    --attendance-apple-blue: #0071e3;
    width: min(1100px, 100%);
    margin: 4px auto 0;
    display: grid;
    grid-template-columns: minmax(360px, 0.88fr) minmax(420px, 1.12fr);
    gap: 22px;
    align-items: stretch;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif;
}

.attendance-apple-card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 1px 1px rgba(7, 20, 36, 0.05),
        0 18px 50px rgba(7, 20, 36, 0.14);
    backdrop-filter: saturate(150%) blur(22px);
    -webkit-backdrop-filter: saturate(150%) blur(22px);
}

.attendance-apple-clock-card {
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.attendance-apple-card-header,
.attendance-apple-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.attendance-apple-card-header time {
    color: #86868b;
    font-size: 0.67rem;
    font-weight: 500;
    text-align: right;
}

.attendance-apple-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6e6e73;
    font-size: 0.76rem;
    font-weight: 600;
}

.attendance-apple-status > span {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #c7c7cc;
}

.attendance-apple-layout.is-active .attendance-apple-status {
    color: #12805c;
}

.attendance-apple-layout.is-active .attendance-apple-status > span {
    background: #30d09b;
    box-shadow: 0 0 0 5px rgba(48, 208, 155, 0.12);
    animation: attendance-apple-pulse 2.2s ease-in-out infinite;
}

.attendance-apple-layout.is-paused .attendance-apple-status {
    color: #9c5e00;
}

.attendance-apple-layout.is-paused .attendance-apple-status > span {
    background: #ff9f0a;
}

@keyframes attendance-apple-pulse {
    50% { box-shadow: 0 0 0 8px rgba(48, 208, 155, 0.025); }
}

.attendance-apple-time {
    padding: 54px 0 48px;
    display: grid;
    justify-items: center;
    text-align: center;
}

.attendance-apple-time > span {
    margin-bottom: 15px;
    color: #86868b;
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.attendance-apple-time strong {
    color: #1d1d1f;
    font-size: clamp(3.7rem, 6.5vw, 5.05rem);
    font-variant-numeric: tabular-nums;
    font-weight: 350;
    letter-spacing: -0.07em;
    line-height: 0.95;
}

.attendance-apple-time small {
    margin-top: 18px;
    color: #86868b;
    font-size: 0.7rem;
    font-weight: 450;
}

.attendance-apple-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 18px;
    background: rgba(242, 242, 247, 0.9);
}

.attendance-apple-summary > div {
    position: relative;
    min-width: 0;
    min-height: 72px;
    padding: 12px 9px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

.attendance-apple-summary > div + div::before {
    position: absolute;
    inset: 16px auto 16px 0;
    width: 1px;
    background: rgba(60, 60, 67, 0.1);
    content: "";
}

.attendance-apple-summary span {
    color: #8e8e93;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.attendance-apple-summary strong {
    max-width: 100%;
    overflow: hidden;
    color: #1d1d1f;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-apple-actions {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.attendance-apple-actions > form:only-child {
    grid-column: 1 / -1;
}

.attendance-apple-button {
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 15px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.attendance-apple-button:hover {
    transform: translateY(-1px);
}

.attendance-apple-button:active {
    transform: scale(0.985);
}

.attendance-apple-button.is-primary {
    color: #fff;
    background: var(--attendance-apple-blue);
}

.attendance-apple-button.is-primary:hover {
    background: #0077ed;
}

.attendance-apple-button.is-secondary {
    color: #1d1d1f;
    background: #e9e9ee;
}

.attendance-apple-button.is-secondary:hover {
    background: #dedee4;
}

.attendance-apple-button.is-end {
    color: #c70016;
    background: rgba(255, 59, 48, 0.09);
}

.attendance-apple-button.is-end:hover {
    background: rgba(255, 59, 48, 0.14);
}

.attendance-apple-history-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.attendance-apple-history-header {
    padding: 28px 28px 22px;
}

.attendance-apple-history-header span {
    display: block;
    margin-bottom: 3px;
    color: #86868b;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.attendance-apple-history-header h2 {
    color: #1d1d1f;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.attendance-apple-history-header button,
.attendance-apple-history-footer button {
    padding: 0;
    border: 0;
    color: var(--attendance-apple-blue);
    background: transparent;
    font: inherit;
    font-size: 0.69rem;
    font-weight: 550;
    cursor: pointer;
}

.attendance-apple-history-header button:hover,
.attendance-apple-history-footer button:hover {
    text-decoration: underline;
}

.attendance-apple-session-list {
    border-top: 1px solid rgba(60, 60, 67, 0.09);
    border-bottom: 1px solid rgba(60, 60, 67, 0.09);
}

.attendance-apple-session-row {
    min-width: 0;
    min-height: 76px;
    padding: 13px 28px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    transition: background 150ms ease;
}

.attendance-apple-session-row:hover {
    background: rgba(242, 242, 247, 0.7);
}

.attendance-apple-session-row + .attendance-apple-session-row {
    border-top: 1px solid rgba(60, 60, 67, 0.08);
}

.attendance-apple-session-symbol {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--attendance-apple-blue);
    background: rgba(0, 113, 227, 0.09);
}

.attendance-apple-session-symbol.is-finished {
    color: #12805c;
    background: rgba(48, 209, 88, 0.1);
}

.attendance-apple-session-symbol.is-pause {
    color: #9c5e00;
    background: rgba(255, 159, 10, 0.12);
}

.attendance-apple-session-row > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.attendance-apple-session-row strong {
    overflow: hidden;
    color: #1d1d1f;
    font-size: 0.73rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-apple-session-row small {
    color: #8e8e93;
    font-size: 0.63rem;
    font-variant-numeric: tabular-nums;
}

.attendance-apple-session-row > b {
    max-width: 88px;
    overflow: hidden;
    color: #6e6e73;
    font-size: 0.67rem;
    font-variant-numeric: tabular-nums;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-apple-empty {
    min-height: 258px;
    padding: 42px 24px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.attendance-apple-empty > span {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #8e8e93;
    background: #f2f2f7;
}

.attendance-apple-empty strong {
    color: #1d1d1f;
    font-size: 0.78rem;
}

.attendance-apple-empty p {
    max-width: 260px;
    margin-top: 6px;
    color: #86868b;
    font-size: 0.67rem;
    line-height: 1.45;
}

.attendance-apple-history-footer {
    margin-top: auto;
    padding: 20px 28px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.attendance-apple-history-footer button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.attendance-apple-history-footer p {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: #8e8e93;
    font-size: 0.58rem;
    line-height: 1.4;
    text-align: right;
}

.attendance-apple-history-footer p span {
    color: #12805c;
}

.attendance-apple-history-footer.is-note-only {
    justify-content: flex-end;
}

@media (max-width: 980px) {
    .attendance-apple-layout {
        grid-template-columns: 1fr;
    }

    .attendance-apple-clock-card,
    .attendance-apple-history-card {
        width: 100%;
        max-width: 720px;
        margin-inline: auto;
    }
}

@media (max-width: 700px) {
    .attendance-apple-layout {
        gap: 16px;
    }

    .attendance-apple-card {
        border-radius: 24px;
    }

    .attendance-apple-clock-card {
        padding: 22px 18px 18px;
    }

    .attendance-apple-card-header {
        align-items: flex-start;
    }

    .attendance-apple-card-header time {
        max-width: 130px;
    }

    .attendance-apple-time {
        padding: 44px 0 38px;
    }

    .attendance-apple-time strong {
        font-size: clamp(3.25rem, 16vw, 4rem);
    }

    .attendance-apple-summary > div {
        min-height: 66px;
        padding-inline: 5px;
    }

    .attendance-apple-summary span {
        font-size: 0.49rem;
    }

    .attendance-apple-summary strong {
        font-size: 0.76rem;
    }

    .attendance-apple-actions {
        grid-template-columns: 1fr;
    }

    .attendance-apple-actions > form:only-child {
        grid-column: auto;
    }

    .attendance-apple-button {
        min-height: 52px;
    }

    .attendance-apple-history-header {
        padding: 23px 20px 18px;
    }

    .attendance-apple-session-row {
        min-height: 72px;
        padding: 12px 20px;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 11px;
    }

    .attendance-apple-session-symbol {
        width: 36px;
        height: 36px;
    }

    .attendance-apple-session-row > b {
        max-width: 68px;
    }

    .attendance-apple-history-footer {
        padding: 18px 20px 21px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .attendance-apple-history-footer p {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .attendance-apple-layout.is-active .attendance-apple-status > span {
        animation: none;
    }
}

/* Personal area microsite */
.my-area-page {
    --personal-blue: #0071e3;
    --personal-ink: #1d1d1f;
    --personal-secondary: #6e6e73;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif;
}

.my-area-page::before {
    background: #fff;
    background-image: none;
    filter: none;
}

.personal-portal-hero,
.personal-portal-nav,
.personal-portal-content {
    width: min(1180px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.personal-portal-hero {
    min-height: 270px;
    padding: 48px 8px 38px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 44px;
}

.personal-portal-welcome {
    min-width: 0;
}

.personal-portal-kicker {
    display: block;
    margin-bottom: 14px;
    color: var(--personal-blue);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.personal-portal-welcome h1 {
    max-width: 900px;
    color: var(--personal-ink);
    font-size: clamp(2.25rem, 4.5vw, 4.5rem);
    font-weight: 720;
    letter-spacing: -0.055em;
    line-height: 0.98;
    text-wrap: balance;
}

.personal-portal-welcome h1 span,
.personal-portal-welcome h1 strong {
    display: block;
}

.personal-portal-welcome h1 strong {
    margin-top: 8px;
    color: #86868b;
    font-weight: 650;
}

.personal-portal-welcome > p {
    max-width: 650px;
    margin-top: 22px;
    color: var(--personal-secondary);
    font-size: 0.82rem;
    line-height: 1.55;
}

.personal-portal-identity {
    min-width: 230px;
    padding: 12px 15px 12px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(60, 60, 67, 0.1);
    border-radius: 18px;
    color: var(--personal-ink);
    background: #f5f5f7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.personal-portal-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.personal-portal-identity > div:last-child {
    min-width: 0;
    display: grid;
}

.personal-portal-identity strong,
.personal-portal-identity > div:last-child > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personal-portal-identity strong {
    font-size: 0.75rem;
    font-weight: 620;
}

.personal-portal-identity > div:last-child > span {
    margin-top: 2px;
    color: #86868b;
    font-size: 0.62rem;
}

.personal-portal-work-status {
    margin-top: 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6e6e73;
    font-size: 0.58rem;
    font-weight: 550;
}

.personal-portal-work-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a9a9ad;
}

.personal-portal-work-status.is-active i {
    background: #30d09b;
    box-shadow: 0 0 0 4px rgba(48, 208, 155, 0.12);
}

.personal-portal-work-status.is-paused i {
    background: #ff9f0a;
}

.personal-portal-nav {
    position: sticky;
    z-index: 30;
    top: 12px;
    padding: 8px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, 1fr);
    gap: 6px;
    overflow-x: auto;
    border: 1px solid rgba(60, 60, 67, 0.1);
    border-radius: 24px;
    background: rgba(250, 250, 252, 0.9);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    scrollbar-width: none;
}

.personal-portal-nav::-webkit-scrollbar {
    display: none;
}

.personal-portal-link {
    position: relative;
    min-width: 108px;
    min-height: 72px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 17px;
    color: #5c5c62;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.personal-portal-link:hover {
    color: var(--personal-ink);
    background: rgba(255, 255, 255, 0.72);
}

.personal-portal-link.active {
    color: #fff;
    background: var(--personal-ink);
    box-shadow: 0 8px 20px rgba(29, 29, 31, 0.18);
}

.personal-portal-link:active {
    transform: scale(0.985);
}

.personal-portal-icon {
    width: 40px;
    height: 40px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: var(--personal-blue);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.personal-portal-icon .icon {
    width: 23px;
    height: 23px;
}

.personal-portal-link.active .personal-portal-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.personal-portal-link-label {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.personal-portal-badge {
    position: absolute;
    top: 8px;
    right: 9px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border: 2px solid #f4f4f6;
    border-radius: 999px;
    color: #fff;
    background: var(--personal-blue);
    font-size: 0.53rem;
    font-weight: 700;
}

.personal-portal-link.active .personal-portal-badge {
    border-color: var(--personal-ink);
    color: var(--personal-ink);
    background: #fff;
}

.personal-portal-content {
    padding-top: 24px;
}

.personal-portal-content .content-card,
.personal-portal-content .attendance-information-card,
.personal-portal-content .attendance-apple-card {
    border-color: rgba(60, 60, 67, 0.11);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.personal-portal-content .content-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.personal-portal-content .card-heading h2,
.personal-portal-content .planner-day-header h2,
.personal-portal-content .notification-heading h2 {
    color: var(--personal-ink);
    font-weight: 680;
    letter-spacing: -0.025em;
}

.personal-portal-content .primary-button.small-button,
.personal-portal-content .planner-form-actions .primary-button,
.personal-portal-content .planner-form-actions .secondary-button,
.personal-portal-content .notification-device-actions .primary-button,
.personal-portal-content .notification-device-actions .secondary-button,
.personal-portal-content .notification-options-form > .primary-button {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.68rem;
}

.personal-portal-content .primary-button {
    background: var(--personal-blue);
}

.personal-portal-content .account-security-card {
    margin-top: 20px;
}

.planner-compose-disclosure {
    align-self: start;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.planner-compose-summary {
    min-height: 84px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.planner-compose-summary::-webkit-details-marker {
    display: none;
}

.planner-compose-summary:hover {
    background: rgba(242, 242, 247, 0.62);
}

.planner-compose-summary-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: var(--personal-blue);
}

.planner-compose-summary-icon .icon {
    width: 21px;
    height: 21px;
}

.planner-compose-summary > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.planner-compose-summary strong {
    color: var(--personal-ink);
    font-size: 0.73rem;
    font-weight: 650;
}

.planner-compose-summary small {
    color: #86868b;
    font-size: 0.6rem;
    line-height: 1.35;
}

.planner-compose-disclosure[open] .planner-compose-summary {
    border-bottom: 1px solid rgba(60, 60, 67, 0.09);
}

.planner-compose-disclosure-body {
    padding: 20px;
}

.personal-portal-content-planificador .personal-planner-layout {
    grid-template-columns: minmax(270px, 0.55fr) minmax(0, 1.45fr);
    gap: 18px;
}

.personal-portal-content-inbox .inbox-layout,
.personal-portal-content-asistente .assistant-layout {
    gap: 18px;
}

.personal-portal-content-inbox .inbox-layout {
    min-height: 640px;
}

.personal-portal-content-inbox .thread-card,
.personal-portal-content-inbox .conversations-card {
    border-radius: 24px;
}

.personal-portal-content-asistente .assistant-thread-card {
    min-height: 680px;
}

.personal-portal-content-asistente .assistant-side-grid {
    gap: 12px;
}

.personal-portal-content-asistente .assistant-side-card {
    padding: 16px;
}

.personal-portal-content-asistente .assistant-quick-prompts .switch-chip {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(60, 60, 67, 0.1);
    border-radius: 999px;
    background: #f2f2f7;
    font-size: 0.62rem;
}

.personal-portal-content-alertas .notification-settings-grid {
    gap: 18px;
}

@media (max-width: 980px) {
    .personal-portal-hero {
        min-height: 235px;
        padding-top: 34px;
    }

    .personal-portal-identity {
        display: none;
    }

    .personal-portal-content-planificador .personal-planner-layout {
        grid-template-columns: 1fr;
    }

    .planner-compose-disclosure {
        width: 100%;
        max-width: 720px;
        margin-inline: auto;
    }
}

@media (max-width: 700px) {
    .personal-portal-hero {
        min-height: 248px;
        padding: 32px 4px 26px;
        align-items: flex-end;
    }

    .personal-portal-kicker {
        margin-bottom: 10px;
        font-size: 0.59rem;
    }

    .personal-portal-welcome h1 {
        font-size: clamp(2rem, 10vw, 2.75rem);
        line-height: 1.01;
    }

    .personal-portal-welcome h1 strong {
        margin-top: 7px;
    }

    .personal-portal-welcome > p {
        max-width: 350px;
        margin-top: 16px;
        font-size: 0.69rem;
    }

    .personal-portal-nav {
        top: 70px;
        width: calc(100% + 4px);
        margin-left: -2px;
        grid-auto-columns: 76px;
        gap: 3px;
        padding: 6px;
        border-radius: 21px;
    }

    .personal-portal-link {
        min-width: 76px;
        min-height: 70px;
        padding: 7px 5px;
        flex-direction: column;
        gap: 5px;
        border-radius: 16px;
    }

    .personal-portal-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .personal-portal-icon .icon {
        width: 21px;
        height: 21px;
    }

    .personal-portal-link-label {
        font-size: 0.54rem;
    }

    .personal-portal-badge {
        top: 5px;
        right: 5px;
    }

    .personal-portal-content {
        padding-top: 16px;
    }

    .personal-portal-content .content-card,
    .personal-portal-content .attendance-information-card,
    .personal-portal-content .attendance-apple-card {
        border-radius: 21px;
    }

    .planner-compose-summary {
        min-height: 76px;
        padding: 11px 13px;
        grid-template-columns: 39px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .planner-compose-summary-icon {
        width: 39px;
        height: 39px;
    }

    .planner-compose-summary small {
        display: none;
    }

    .planner-compose-disclosure-body {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .personal-portal-link,
    .personal-portal-nav {
        scroll-behavior: auto;
        transition: none;
    }
}

/* Intranet-wide Apple workspace */
:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f5f5f7;
    --surface-soft: #f5f5f7;
    --surface-field: #f5f5f7;
    --ink: #1d1d1f;
    --muted-strong: #6e6e73;
    --muted: #86868b;
    --line: rgba(60, 60, 67, 0.12);
    --line-soft: rgba(60, 60, 67, 0.08);
    --accent: #0071e3;
    --accent-soft: #eaf4ff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.055);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.14);
    --radius-xl: 28px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 13px;
}

body:not(.login-page),
.main-pane,
.main-content {
    background: #fff;
}

.main-content {
    padding: 40px 48px 48px;
}

.page-head,
.page-header {
    max-width: 1180px;
    margin-bottom: 28px;
}

.page-kicker,
.page-header .eyebrow {
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-title-row h1,
.page-header h1 {
    color: var(--ink);
    font-size: clamp(2.45rem, 4vw, 4.1rem);
    font-weight: 720;
    letter-spacing: -0.055em;
    line-height: 0.98;
    text-wrap: balance;
}

.page-title-row p,
.page-description,
.page-header p {
    max-width: 700px;
    margin-top: 15px;
    color: var(--muted-strong);
    font-size: 0.79rem;
    line-height: 1.55;
}

.page-title-row > .primary-button,
.page-title-row > .secondary-button,
.page-title-row > div:last-child:not(:first-child) {
    flex: 0 0 auto;
}

.content-card,
.metric-box,
.kanban-column,
.panel,
.studio-map-panel,
.studio-room-board,
.development-board-shell,
.development-fridge-shell,
.voice-catalog-shell,
.voice-review-progress-card {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.content-card,
.metric-box,
.panel,
.project-type-overview-item,
.development-lead-card,
.voice-talent-card,
.kanban-card {
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.content-card:hover,
.metric-box:hover,
.panel:hover {
    border-color: rgba(60, 60, 67, 0.16);
    background: #fbfbfd;
    box-shadow: var(--shadow-md);
}

.stack-card,
.table-card,
.announcement-panel,
.panel {
    padding: 24px;
}

.card-heading,
.panel-header,
.project-work-head,
.report-table-heading {
    gap: 18px;
}

.card-heading h2,
.panel-header h2,
.project-work-head h2,
.report-section-head h2 {
    color: var(--ink);
    font-weight: 680;
    letter-spacing: -0.025em;
}

.card-heading p,
.panel-header p,
.section-copy {
    color: var(--muted-strong);
}

.primary-button,
.secondary-button,
.ghost-button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: none;
}

.primary-button {
    background: var(--accent);
}

.primary-button:hover {
    background: #0077ed;
}

.secondary-button {
    border-color: var(--line);
    background: #fff;
}

.secondary-button:hover,
.ghost-button:hover {
    background: #f5f5f7;
}

.small-button {
    min-height: 34px;
    padding-inline: 13px;
}

input,
select,
textarea {
    border-color: transparent;
    border-radius: 13px;
    background: #f5f5f7;
    color: var(--ink);
}

input:hover,
select:hover,
textarea:hover {
    background: #f0f0f2;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(0, 113, 227, 0.28);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
}

label {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.09em;
}

.tab-switch,
.page-chip-tabs,
.perspective-section-nav {
    padding: 5px;
    border: 1px solid rgba(60, 60, 67, 0.06);
    border-radius: 999px;
    background: #f5f5f7;
}

.switch-chip,
.filter-chip,
.perspective-section-nav a {
    min-height: 34px;
    border-radius: 999px;
}

.switch-chip.active,
.filter-chip.active,
.perspective-section-nav a.active {
    color: #fff;
    background: var(--ink);
    box-shadow: none;
}

.data-table,
.detail-table {
    border-spacing: 0;
}

.data-table th,
.detail-table th {
    color: var(--muted);
    font-size: 0.57rem;
    font-weight: 650;
    letter-spacing: 0.09em;
}

.data-table th,
.data-table td,
.detail-table th,
.detail-table td {
    padding: 14px 16px;
    border-color: var(--line-soft);
}

.data-table tbody tr,
.detail-table tbody tr {
    transition: background 140ms ease;
}

.data-table tbody tr:hover,
.detail-table tbody tr:hover {
    background: #f5f5f7;
}

.modal-overlay {
    background: rgba(29, 29, 31, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.modal-card {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
}

.chip,
.status-tag,
.status-inline,
.pill-badge {
    font-weight: 650;
}

.empty-state,
.task-detail-empty,
.calendar-empty {
    border-radius: 20px;
    color: var(--muted-strong);
    background: #f5f5f7;
}

/* Dashboard: editorial overview rather than decorative canvas. */
.dashboard-page {
    min-height: calc(100vh - 88px);
    margin: -40px -48px -48px;
    padding: 40px 48px 48px;
    background: #fff;
}

.dashboard-page .content-card {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dashboard-page .content-card:hover {
    background: #fbfbfd;
    box-shadow: var(--shadow-md);
}

.dashboard-hero-row {
    margin-bottom: 28px;
}

.dashboard-summary-card {
    height: auto;
    min-height: 318px;
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(145deg, #f5f5f7 0%, #fff 72%) !important;
}

.dashboard-assistant-head h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
    letter-spacing: -0.04em;
}

.dashboard-assistant-narrative {
    padding-block: 20px;
}

.dashboard-assistant-narrative p:first-child {
    font-size: 0.86rem;
}

.dashboard-focus-grid,
.dashboard-bottom-grid {
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-agenda-date {
    background: var(--ink);
    box-shadow: none;
}

.dashboard-agenda-event-card,
.deadline-item,
.task-list-item,
.feed-row {
    border-radius: 14px;
}

.dashboard-agenda-event-card:hover,
.deadline-item:hover,
.task-list-item:hover,
.feed-row:hover {
    background: #f5f5f7;
}

/* Projects: clear hierarchy between catalogue and operational workspace. */
.project-type-overview {
    gap: 14px;
    margin-bottom: 30px;
}

.project-type-overview-item {
    padding: 17px 18px;
    border-color: var(--line);
    border-radius: 20px;
    background: #f5f5f7;
    box-shadow: none;
}

.project-type-overview-item:hover {
    transform: none;
    border-color: rgba(60, 60, 67, 0.16);
    background: #eeeef0;
}

.project-type-section-head {
    margin-bottom: 12px;
}

.project-type-section-head h3 {
    font-size: 1.02rem;
}

.project-list-card,
.project-details-card,
.project-work-card,
.detail-card {
    overflow: hidden;
}

.project-list-item {
    min-height: 74px;
    padding: 16px 18px;
}

.project-list-item:hover {
    background: #f5f5f7;
}

.project-details-card {
    padding: 26px;
}

.project-details-heading h2 {
    font-size: 1.25rem;
}

.project-workspace-grid {
    gap: 24px;
}

/* Tasks: Asana-like density with Apple surfaces. */
.task-filter-card {
    margin-bottom: 16px;
    background: #f5f5f7;
    box-shadow: none;
}

.task-toolbar {
    margin-bottom: 18px;
}

.task-kanban-grid,
.kanban-grid {
    gap: 16px;
}

.task-kanban-column,
.kanban-column {
    padding: 14px;
    border-color: transparent;
    border-radius: 22px;
    background: #f5f5f7;
    box-shadow: none;
}

.kanban-card,
.task-card {
    border-color: var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.kanban-card:hover,
.task-card:hover {
    transform: translateY(-1px);
    border-color: rgba(60, 60, 67, 0.16);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.task-detail-panel {
    border-radius: 24px;
}

/* Calendar: preserve event colours and simplify its chrome. */
.calendar-hero,
.calendar-integration-card {
    padding: 26px;
}

.calendar-corporate-status,
.calendar-access-note,
.calendar-embed-setup,
.calendar-setup-option,
.calendar-setting-block {
    border-radius: 18px;
}

.calendar-week-grid {
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--line-soft);
}

.calendar-week-column {
    border: 0;
    border-radius: 0;
    background: #fff;
}

.calendar-week-event {
    border-radius: 12px;
}

/* Production: a calm pipeline with coloured stage markers only. */
.development-board-shell {
    padding: 24px;
    background: #f5f5f7;
    box-shadow: none;
}

.development-board {
    gap: 14px;
}

.development-lead-card {
    border: 1px solid var(--line);
    border-top: 3px solid var(--stage-color);
    border-radius: 18px;
    box-shadow: none;
}

.development-lead-card:hover {
    transform: translateY(-1px);
    border-color: rgba(60, 60, 67, 0.18);
    border-top-color: var(--stage-color);
    box-shadow: var(--shadow-md);
}

.development-fridge-shell {
    background: #fff;
}

.production-mail-shell,
.production-mail-card {
    border-radius: 22px;
}

/* Perspective: prioritise decisions, capacity and deadlines. */
.perspective-section-nav {
    position: sticky;
    z-index: 20;
    top: 14px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.perspective-section {
    padding-top: 18px;
}

.perspective-section-heading h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.35rem);
    letter-spacing: -0.045em;
}

.perspective-alert-card-main,
.perspective-deadline-card,
.perspective-capacity-card-main {
    border-radius: 28px;
}

.perspective-capacity-summary {
    background: #f5f5f7;
    box-shadow: none;
}

/* Perspective: daily studio pressure combines agenda, editing and absences. */
.studio-pressure-chart {
    min-width: 720px;
    grid-template-columns: repeat(var(--pressure-columns, 7), minmax(82px, 1fr));
    gap: 10px;
}

.studio-pressure-legend i.agenda,
.studio-pressure-segments i.agenda {
    background: #5f8fbd;
}

.studio-pressure-legend i.projects,
.studio-pressure-segments i.projects {
    background: #d89a54;
}

.studio-pressure-legend i.absence {
    background: #a7a7ad;
}

.studio-pressure-legend i.deadline {
    background: #d96861;
}

.perspective-pressure-day {
    grid-template-rows: 220px 32px 18px;
}

.perspective-pressure-day .perspective-pressure-tooltip {
    width: 205px;
}

.perspective-pressure-day.is-today > strong {
    color: #1768b0;
    font-weight: 800;
}

.studio-pressure-stack {
    overflow: visible;
    background: #e9eaed !important;
    box-shadow: 0 7px 16px rgba(41, 54, 66, 0.1);
}

.studio-pressure-stack.high {
    outline: 2px solid rgba(215, 146, 57, 0.42);
}

.studio-pressure-stack.critical {
    outline: 2px solid rgba(204, 73, 69, 0.48);
}

.studio-pressure-segments {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: inherit;
}

.studio-pressure-segments i {
    width: 100%;
    height: var(--segment, 0%);
    flex: 0 0 var(--segment, 0%);
}

.studio-pressure-stack b {
    z-index: 2;
}

.perspective-pressure-markers .absence-marker {
    color: #6e6e73;
    font-weight: 700;
}

@media (max-width: 700px) {
    .studio-pressure-chart {
        min-width: 700px;
    }
}

/* Voice bank and team: compact database views. */
.voice-metric-strip,
.report-kpi-grid {
    border-color: var(--line);
    background: #f5f5f7;
    box-shadow: none;
}

.voice-catalog-shell {
    padding: 18px;
    background: #f5f5f7;
    box-shadow: none;
}

.voice-filter-bar {
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.voice-talent-grid {
    border-radius: 18px;
}

.voice-table-head {
    background: #f5f5f7;
}

.voice-talent-card:hover {
    background: #f5f5f7;
}

.workers-table-card,
.reports-card {
    padding: 8px 0 0;
}

.workers-table-card > .card-heading,
.reports-card > .card-heading,
.reports-card > .report-table-heading {
    padding-inline: 20px;
}

/* Studio: the map remains the visual focus. */
.studio-live-strip {
    border-radius: 20px;
    background: #f5f5f7;
    box-shadow: none;
}

.studio-map-panel,
.studio-room-board {
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.studio-panel-heading {
    padding: 22px 24px;
}

/* Announcements, reports and assistant. */
.announcement-panel {
    border-radius: 22px;
}

.announcement-panel:hover {
    background: #f5f5f7;
}

.report-kpi-card {
    background: #f5f5f7;
    box-shadow: none;
}

.assistant-thread-card,
.assistant-side-card {
    border-radius: 24px;
}

/* Retain the personal portal as the reference implementation. */
.my-area-page {
    background: #fff;
}

@media (max-width: 1180px) {
    .main-content {
        padding: 32px 30px 40px;
    }

    .dashboard-page {
        margin: -32px -30px -40px;
        padding: 32px 30px 40px;
    }

    .page-title-row h1,
    .page-header h1 {
        font-size: clamp(2.25rem, 5vw, 3.45rem);
    }

    .development-board {
        grid-template-columns: repeat(4, minmax(230px, 1fr));
    }
}

@media (max-width: 960px) {
    .main-content {
        padding: 28px 22px 36px;
    }

    .dashboard-page {
        margin: -28px -22px -36px;
        padding: 28px 22px 36px;
        background: #fff;
    }

    .page-head,
    .page-header {
        margin-bottom: 22px;
    }

    .page-title-row {
        align-items: flex-start;
    }

    .dashboard-summary-card {
        min-height: 300px;
    }

    .studio-overview-grid,
    .perspective-capacity-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .main-content {
        padding: 22px 15px 30px;
    }

    .dashboard-page {
        margin: -22px -15px -30px;
        padding: 22px 15px 30px;
    }

    .page-head,
    .page-header {
        margin-bottom: 20px;
    }

    .page-kicker,
    .page-header .eyebrow {
        margin-bottom: 8px;
        font-size: 0.58rem;
    }

    .page-title-row {
        display: grid;
        gap: 16px;
    }

    .page-title-row h1,
    .page-header h1 {
        font-size: clamp(2rem, 11vw, 2.75rem);
        line-height: 1;
    }

    .page-title-row p,
    .page-description,
    .page-header p {
        margin-top: 11px;
        font-size: 0.72rem;
    }

    .page-title-row > .primary-button,
    .page-title-row > .secondary-button {
        width: fit-content;
    }

    .stack-card,
    .table-card,
    .announcement-panel,
    .panel,
    .calendar-hero,
    .calendar-integration-card,
    .project-details-card {
        padding: 18px;
    }

    .content-card,
    .metric-box,
    .kanban-column,
    .panel,
    .studio-map-panel,
    .studio-room-board,
    .development-board-shell,
    .development-fridge-shell,
    .voice-catalog-shell {
        border-radius: 21px;
    }

    .dashboard-summary-card {
        min-height: 0;
        padding: 20px;
        border-radius: 24px;
    }

    .dashboard-assistant-report,
    .dashboard-focus-grid,
    .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }

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

    .project-list-item,
    .project-list-item.has-audiobook-progress {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 17px 4px;
    }

    .task-filter-card,
    .development-board-shell,
    .voice-catalog-shell {
        padding: 14px;
    }

    .development-board {
        grid-template-columns: repeat(4, minmax(245px, 82vw));
    }

    .calendar-week-grid {
        border-radius: 18px;
    }

    .modal-card {
        max-height: calc(100vh - 24px);
        padding: 20px;
        border-radius: 24px;
    }

    .data-table th,
    .data-table td,
    .detail-table th,
    .detail-table td {
        padding: 12px 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-card,
    .metric-box,
    .panel,
    .project-type-overview-item,
    .development-lead-card,
    .voice-talent-card,
    .kanban-card {
        transition: none;
    }
}

/* Airy editorial rhythm, aligned with the personal portal. */
@media (min-width: 701px) {
    .main-content {
        padding: 48px 58px 72px;
    }

    .page-head,
    .page-header,
    .project-detail-header {
        min-height: 252px;
        padding: 52px 0 46px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .page-head,
    .page-header {
        max-width: 1240px;
        margin-bottom: 42px;
    }

    .project-detail-header {
        min-height: 224px;
        margin-bottom: 36px;
    }

    .page-title-row h1,
    .page-header h1,
    .project-detail-header h1 {
        font-size: clamp(3.35rem, 5vw, 4.85rem);
        font-weight: 740;
        letter-spacing: -0.062em;
        line-height: 0.94;
    }

    .page-title-row p,
    .page-description,
    .page-header p,
    .project-detail-header .page-title-row p {
        margin-top: 19px;
        font-size: 0.84rem;
        line-height: 1.6;
    }

    .dashboard-page {
        margin: -48px -58px -72px;
        padding: 48px 58px 72px;
    }

    .dashboard-summary-card {
        min-height: 380px;
        padding: 34px;
    }

    .dashboard-assistant-head h2 {
        font-size: clamp(2.2rem, 3.35vw, 3.35rem);
        font-weight: 730;
        letter-spacing: -0.055em;
        line-height: 0.98;
    }

    .dashboard-assistant-head p {
        margin-top: 12px;
        font-size: 0.8rem;
    }

    .dashboard-assistant-narrative {
        padding-block: 26px;
        gap: 16px;
    }

    .dashboard-assistant-bottom {
        padding-top: 16px;
    }
}

.voice-casting-monitor {
    gap: 7px;
    white-space: nowrap;
}

.voice-casting-monitor-count,
.voice-casting-feedback-count {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.52rem;
    font-weight: 750;
    line-height: 1;
}

.voice-casting-monitor-count {
    color: #41675e;
    background: #e8f1ee;
}

.voice-casting-feedback-count {
    color: #9b442d;
    background: #fde9e2;
}

@media (max-width: 700px) {
    .voice-casting-monitor {
        justify-content: center;
    }
}

.page-kicker,
.page-header .eyebrow {
    margin-bottom: 15px;
}

.stats-row,
.two-column-grid,
.three-column-grid,
.dashboard-focus-grid,
.dashboard-bottom-grid,
.project-workspace-grid,
.task-page-grid,
.assistant-layout,
.inbox-layout,
.perspective-decision-grid,
.perspective-capacity-layout,
.report-kpi-grid,
.report-chart-grid,
.studio-overview-grid {
    gap: 30px;
}

.dashboard-hero-row,
.dashboard-focus-grid,
.dashboard-bottom-grid {
    margin-bottom: 30px;
}

.stack-card,
.table-card,
.announcement-panel,
.panel,
.calendar-hero,
.calendar-integration-card,
.project-details-card,
.project-work-card,
.detail-card,
.assistant-thread-card,
.assistant-side-card {
    padding: 28px;
}

.card-heading,
.panel-header,
.project-work-head,
.report-table-heading {
    margin-bottom: 22px;
}

.card-heading h2,
.panel-header h2,
.project-work-head h2,
.report-section-head h2 {
    font-size: 1.08rem;
}

.filter-row,
.tab-switch,
.chip-row,
.task-toolbar {
    margin-bottom: 26px;
}

.announcement-stack,
.project-list,
.development-card-stack,
.assistant-side-grid,
.notification-settings-grid {
    gap: 18px;
}

.announcement-panel + .announcement-panel {
    margin-top: 18px;
}

.project-type-overview {
    margin-bottom: 38px;
}

.project-type-sections {
    gap: 34px;
}

.project-type-section-head {
    margin-bottom: 17px;
}

.project-details-heading {
    margin-bottom: 26px;
}

.task-filter-card {
    margin-bottom: 24px;
}

.calendar-hero + .calendar-integration-card,
.calendar-integration-card + .calendar-integration-card {
    margin-top: 30px;
}

.development-metric-strip,
.perspective-metric-strip,
.voice-metric-strip {
    margin-bottom: 28px;
}

.production-mail-shell,
.development-board-shell,
.development-fridge-shell {
    margin-bottom: 32px;
}

.perspective-brief-row {
    margin-bottom: 26px;
}

.perspective-section {
    padding-top: 42px;
}

.perspective-section + .perspective-section {
    margin-top: 28px;
}

.perspective-section-heading {
    margin-bottom: 28px;
}

.perspective-section-heading h2 {
    font-size: clamp(1.9rem, 3vw, 2.85rem);
}

.voice-results-heading {
    margin: 30px 3px 20px;
}

.studio-live-strip,
.studio-calendar-warning {
    margin-bottom: 28px;
}

.reports-page-head + .inline-notice,
.reports-page-head + .content-card,
.attendance-approval-card,
.report-filter-card,
.report-kpi-grid,
.reports-card {
    margin-bottom: 28px;
}

@media (max-width: 1180px) and (min-width: 701px) {
    .main-content {
        padding: 40px 36px 58px;
    }

    .dashboard-page {
        margin: -40px -36px -58px;
        padding: 40px 36px 58px;
    }

    .page-head,
    .page-header {
        min-height: 226px;
        padding-top: 40px;
    }

    .page-title-row h1,
    .page-header h1,
    .project-detail-header h1 {
        font-size: clamp(3.1rem, 6vw, 4.2rem);
    }
}

@media (max-width: 700px) {
    .main-content {
        padding: 28px 15px 38px;
    }

    .dashboard-page {
        margin: -28px -15px -38px;
        padding: 28px 15px 38px;
    }

    .page-head,
    .page-header,
    .project-detail-header {
        min-height: 210px;
        margin-bottom: 28px;
        padding: 42px 0 30px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .project-detail-header {
        min-height: 185px;
    }

    .page-title-row h1,
    .page-header h1,
    .project-detail-header h1 {
        font-size: clamp(2.55rem, 13vw, 3.2rem);
        font-weight: 740;
        letter-spacing: -0.06em;
        line-height: 0.96;
    }

    .page-title-row p,
    .page-description,
    .page-header p,
    .project-detail-header .page-title-row p {
        margin-top: 14px;
        font-size: 0.74rem;
        line-height: 1.55;
    }

    .page-kicker,
    .page-header .eyebrow {
        margin-bottom: 12px;
    }

    .dashboard-summary-card {
        padding: 25px 21px;
    }

    .dashboard-assistant-head h2 {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        line-height: 1;
    }

    .dashboard-assistant-narrative {
        padding-block: 22px;
    }

    .stats-row,
    .two-column-grid,
    .three-column-grid,
    .dashboard-focus-grid,
    .dashboard-bottom-grid,
    .project-workspace-grid,
    .task-page-grid,
    .assistant-layout,
    .inbox-layout,
    .perspective-decision-grid,
    .perspective-capacity-layout,
    .report-kpi-grid,
    .report-chart-grid,
    .studio-overview-grid {
        gap: 22px;
    }

    .stack-card,
    .table-card,
    .announcement-panel,
    .panel,
    .calendar-hero,
    .calendar-integration-card,
    .project-details-card,
    .project-work-card,
    .detail-card,
    .assistant-thread-card,
    .assistant-side-card {
        padding: 21px;
    }

    .card-heading,
    .panel-header,
    .project-work-head,
    .report-table-heading {
        margin-bottom: 18px;
    }

    .project-type-overview {
        margin-bottom: 30px;
    }

    .project-type-sections {
        gap: 30px;
    }

    .perspective-section {
        padding-top: 32px;
    }
}

.dashboard-summary-card .dashboard-assistant-head h2 {
    font-size: clamp(2.5rem, 3.8vw, 3.8rem);
    font-weight: 730;
    letter-spacing: -0.058em;
    line-height: 0.98;
}

@media (max-width: 700px) {
    .dashboard-summary-card .dashboard-assistant-head h2 {
        font-size: clamp(1.9rem, 9vw, 2.45rem);
    }
}

/* Global quick actions */
.global-action-dock {
    position: fixed;
    right: 22px;
    top: calc(22px + env(safe-area-inset-top));
    bottom: auto;
    z-index: 190;
    display: flex;
    align-items: center;
    gap: 10px;
}

.global-action-orb {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(60, 60, 67, 0.13);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13);
    cursor: pointer;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.global-action-orb:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.global-action-orb:active {
    transform: scale(0.96);
}

.global-action-orb:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16), 0 12px 30px rgba(0, 0, 0, 0.13);
}

.global-action-orb .icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.8;
}

.global-create-orb {
    border-color: #1d1d1f;
    color: #fff;
    background: #1d1d1f;
}

.global-create-orb:hover {
    background: #000;
}

.global-attendance-orb > span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #aeaeb2;
}

.global-attendance-orb.is-active > span {
    background: #30d09b;
}

.global-attendance-orb.is-paused > span {
    background: #ff9f0a;
}

.global-action-popover {
    position: absolute;
    right: 0;
    top: 62px;
    bottom: auto;
    width: min(350px, calc(100vw - 30px));
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-radius: 24px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    transform-origin: right top;
    animation: global-popover-in 160ms ease-out;
}

.global-create-popover {
    width: min(370px, calc(100vw - 30px));
    max-height: min(620px, calc(100vh - 120px));
    overflow-y: auto;
}

@keyframes global-popover-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.global-action-popover-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.global-action-popover-head > div {
    min-width: 0;
}

.global-action-popover-head span:not(.global-popover-icon) {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 0.55rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.global-action-popover-head h2 {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 690;
    letter-spacing: -0.025em;
}

.global-popover-icon,
.global-create-option-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--accent);
    background: #edf5ff;
}

.global-popover-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.global-popover-icon.create {
    color: #fff;
    background: #1d1d1f;
}

.global-popover-icon.attendance.is-active {
    color: #12825b;
    background: #e8f8f1;
}

.global-popover-icon.attendance.is-paused {
    color: #b45d00;
    background: #fff3df;
}

.global-action-popover-copy {
    margin: 16px 2px;
    color: var(--muted-strong);
    font-size: 0.69rem;
    line-height: 1.5;
}

.global-attendance-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.global-attendance-actions form:only-child {
    grid-column: 1 / -1;
}

.global-popover-button {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 650;
    cursor: pointer;
}

.global-popover-button.is-primary {
    color: #fff;
    background: var(--accent);
}

.global-popover-button.is-secondary {
    color: var(--ink);
    background: #f2f2f7;
}

.global-popover-detail-link {
    margin-top: 14px;
    padding-top: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line-soft);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 600;
}

.global-popover-detail-link span {
    font-size: 1rem;
}

.global-create-menu {
    display: grid;
    gap: 3px;
    padding-top: 10px;
}

.global-create-option {
    width: 100%;
    min-width: 0;
    padding: 9px 8px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-radius: 15px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.global-create-option:hover {
    background: #f5f5f7;
}

.global-create-option-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.global-create-option-icon .icon {
    width: 18px;
    height: 18px;
}

.global-create-option > span:nth-child(2) {
    min-width: 0;
}

.global-create-option strong,
.global-create-option small {
    display: block;
}

.global-create-option strong {
    font-size: 0.7rem;
    font-weight: 650;
}

.global-create-option small {
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-create-option b {
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 400;
}

.global-log-project-picker {
    margin: 2px 7px 8px 56px;
    padding: 12px;
    display: grid;
    gap: 10px;
    border-radius: 15px;
    background: #f5f5f7;
}

.global-log-project-picker label {
    gap: 6px;
}

.global-log-project-picker select {
    min-height: 38px;
    padding-block: 8px;
    background: #fff;
    font-size: 0.67rem;
}

.global-action-dock ~ .pwa-install-button {
    bottom: calc(18px + env(safe-area-inset-bottom));
}

@media (max-width: 700px) {
    .global-action-dock {
        top: calc(6px + env(safe-area-inset-top));
        right: 12px;
        bottom: auto;
        gap: 8px;
    }

    .global-action-orb {
        width: 46px;
        height: 46px;
    }

    .global-action-popover {
        top: 56px;
        right: 0;
        bottom: auto;
        padding: 16px;
        border-radius: 22px;
    }

    .global-create-popover {
        max-height: calc(100vh - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .global-create-orb {
        border-color: rgba(255, 255, 255, 0.88);
        color: #1d1d1f;
        background: #fff;
    }

    .global-create-orb:hover {
        color: #1d1d1f;
        background: #fff;
    }

    .global-create-option {
        min-height: 53px;
    }

    .global-log-project-picker {
        margin-left: 48px;
    }

    .global-action-dock ~ .pwa-install-button {
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-action-orb {
        transition: none;
    }

    .global-action-popover {
        animation: none;
    }
}

/* Salas: keep the live floor plan within the first desktop viewport. */
@media (min-width: 1201px) {
    .studio-page {
        height: calc(100vh - 120px);
        min-height: 0;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 12px;
    }

    .studio-page .studio-page-head {
        min-height: 0;
        margin: 0;
        padding: 0 0 4px;
    }

    .studio-page-head .page-title-row {
        align-items: flex-end;
    }

    .studio-page-head .page-title-row h1 {
        font-size: clamp(2.7rem, 4vw, 3.8rem);
    }

    .studio-page .studio-live-strip {
        margin: 0;
        padding: 10px 14px;
    }

    .studio-page .studio-overview-grid {
        min-height: 0;
        gap: 14px;
    }

    .studio-page .studio-map-panel {
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
    }

    .studio-page .studio-panel-heading {
        padding: 13px 17px;
    }

    .studio-page .studio-map {
        width: auto;
        max-width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: 1059 / 1217;
    }

    .studio-page .studio-map > img {
        width: 100%;
        height: 100%;
    }

    .studio-page .studio-room-board {
        min-height: 0;
        max-height: none;
    }
}

.studio-map-panel-plain {
    position: relative;
    padding-top: 36px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.studio-map-legend-floating {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    padding: 5px 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.studio-map-panel-plain .studio-map {
    border-radius: 30px;
    background: transparent;
    box-shadow: 0 16px 36px rgba(52, 61, 73, 0.12);
}

/* Personal-area secondary information behaves like compact buttons. */
.personal-portal-content .personal-button-disclosure {
    width: min(1120px, 100%);
    margin: 18px auto 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.personal-portal-content .personal-disclosure-button {
    width: fit-content;
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-radius: 999px;
    color: var(--personal-ink);
    background: #f5f5f7;
    font-size: 0.67rem;
    font-weight: 640;
    list-style: none;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}

.personal-portal-content .personal-disclosure-button::-webkit-details-marker {
    display: none;
}

.personal-portal-content .personal-disclosure-button:hover {
    background: #eaeaef;
    transform: translateY(-1px);
}

.personal-portal-content .personal-disclosure-button .icon {
    color: var(--personal-blue);
}

.personal-portal-content .personal-disclosure-button > span {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    margin-left: 2px;
    border-radius: 50%;
    color: var(--personal-secondary);
    background: #fff;
}

.personal-portal-content .personal-disclosure-button > span::before {
    content: "+";
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
}

.personal-portal-content .personal-button-disclosure[open] .personal-disclosure-button > span::before {
    content: "−";
}

.personal-portal-content .personal-button-disclosure > .personal-disclosure-panel {
    margin-top: 12px;
    padding: 19px 20px;
    display: grid;
    gap: 10px;
    border: 1px solid rgba(60, 60, 67, 0.11);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.055);
}

@media (max-width: 700px) {
    .studio-page .studio-page-head {
        margin-bottom: 0;
    }

    .studio-page .studio-live-strip {
        margin-bottom: 10px;
    }

    .studio-page .studio-panel-heading {
        padding: 12px 14px;
    }

    .studio-map-legend-floating {
        top: 0;
        right: 0;
        gap: 8px;
        padding: 5px 2px;
    }

    .studio-map-legend-floating span {
        font-size: 0.48rem;
    }

    .studio-map-panel-plain .studio-map {
        border-radius: 22px;
    }

    .personal-portal-content .personal-disclosure-button {
        min-height: 38px;
        padding: 0 13px;
        font-size: 0.62rem;
    }

    .personal-portal-content .personal-button-disclosure > .personal-disclosure-panel {
        padding: 17px;
        border-radius: 18px;
    }
}

/* Dashboard welcome and daily report follow the personal-area hierarchy. */
.dashboard-welcome {
    width: min(1180px, 100%);
    min-height: 238px;
    margin: 0 auto 34px;
    padding: 52px 8px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.dashboard-welcome-kicker {
    display: block;
    margin-bottom: 14px;
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-welcome h1 {
    max-width: 900px;
    color: var(--ink);
    font-size: clamp(2.65rem, 4.5vw, 4.5rem);
    font-weight: 720;
    letter-spacing: -0.055em;
    line-height: 0.98;
    text-wrap: balance;
}

.dashboard-welcome h1 span,
.dashboard-welcome h1 strong {
    display: block;
}

.dashboard-welcome h1 strong {
    margin-top: 8px;
    color: #86868b;
    font-weight: 650;
}

.dashboard-summary-card .dashboard-assistant-head h2 {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 720;
    letter-spacing: -0.052em;
    line-height: 1;
}

.dashboard-summary-card .dashboard-assistant-head p {
    max-width: 820px;
    margin-top: 13px;
    font-size: 0.88rem;
    line-height: 1.55;
}

.dashboard-summary-card .dashboard-assistant-narrative p {
    max-width: 100%;
    font-size: 0.84rem;
    line-height: 1.65;
}

.dashboard-summary-card .dashboard-assistant-narrative p:first-child {
    font-size: 0.96rem;
    font-weight: 520;
}

.dashboard-summary-card .assistant-encouragement {
    font-size: 0.72rem;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .dashboard-welcome {
        min-height: 190px;
        margin-bottom: 24px;
        padding: 42px 2px 24px;
    }

    .dashboard-welcome-kicker {
        margin-bottom: 11px;
        font-size: 0.58rem;
    }

    .dashboard-welcome h1 {
        font-size: clamp(2.4rem, 13vw, 3.15rem);
        line-height: 0.96;
    }

    .dashboard-summary-card .dashboard-assistant-head h2 {
        font-size: clamp(1.8rem, 9vw, 2.35rem);
    }

    .dashboard-summary-card .dashboard-assistant-head p {
        font-size: 0.78rem;
    }

    .dashboard-summary-card .dashboard-assistant-narrative p,
    .dashboard-summary-card .dashboard-assistant-narrative p:first-child {
        font-size: 0.8rem;
    }
}

/* Attendance corrections use a warm incident treatment, not a destructive red. */
.attendance-correction-card.attendance-disclosure {
    border-color: rgba(255, 159, 10, 0.3);
}

.attendance-correction-card .attendance-disclosure-summary {
    background: linear-gradient(135deg, #fff8ec 0%, #fffdf9 100%);
}

.attendance-correction-card .attendance-disclosure-summary:hover {
    background: #fff2dc;
}

.attendance-correction-card .attendance-disclosure-summary .eyebrow {
    color: #b85c00;
}

.attendance-correction-card .attendance-disclosure-summary h2 {
    color: #7a3d00;
}

.attendance-correction-card .attendance-disclosure-icon {
    border-color: #ff9f0a;
    background: #ff9f0a;
    box-shadow: 0 7px 18px rgba(255, 159, 10, 0.22);
}

.attendance-correction-card .attendance-disclosure-icon::before {
    border-color: #fff;
}

/* Audiobooks: explicit production roles and a compact daily dashboard. */
.project-general-team-fields {
    display: grid;
    gap: 16px;
}

.project-general-team-fields[hidden] {
    display: none;
}

.project-role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-right: 7px;
    padding: 0 8px;
    border-radius: 999px;
    color: #9a5128;
    background: #fbefe7;
    font-size: 0.56rem;
    font-weight: 700;
}

.project-role-pill.editing {
    color: #216b87;
    background: #eaf5f8;
}

.project-team-guidance {
    color: var(--muted-strong);
    font-size: 0.65rem;
    line-height: 1.5;
}

.project-external-recording-note {
    min-height: 58px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    border: 1px solid #d8e8e2;
    border-radius: 14px;
    background: #f2f8f6;
}

.project-external-recording-note span {
    color: #315f52;
    font-size: 0.68rem;
    font-weight: 680;
}

.project-external-recording-note small {
    color: #668078;
    font-size: 0.59rem;
    line-height: 1.4;
}

.project-pdf-assistant {
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.7fr);
    gap: 14px 20px;
    border: 1px solid #dce4eb;
    border-radius: 20px;
    background: #f7f9fb;
}

.project-pdf-assistant-copy {
    display: flex;
    align-items: center;
    gap: 13px;
}

.project-pdf-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #fff;
    background: #377e69;
}

.project-pdf-assistant-copy strong {
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 680;
}

.project-pdf-assistant-copy p,
.project-pdf-status,
.project-pdf-formula {
    color: var(--muted-strong);
    font-size: 0.61rem;
    line-height: 1.45;
}

.project-pdf-assistant-copy p {
    margin-top: 4px;
}

.project-pdf-picker {
    min-height: 62px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 1px dashed #aebdca;
    border-radius: 15px;
    background: #fff;
    cursor: pointer;
}

.project-pdf-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.project-pdf-picker > span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #236b9a;
}

.project-pdf-picker b {
    overflow: hidden;
    font-size: 0.66rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-pdf-picker small {
    color: var(--muted);
    font-size: 0.55rem;
}

.project-pdf-status,
.project-pdf-formula,
.project-pdf-results {
    grid-column: 1 / -1;
}

.project-pdf-results {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.project-pdf-results > div {
    min-width: 0;
    padding: 11px;
    border-radius: 13px;
    background: #fff;
}

.project-pdf-results span,
.project-pdf-results strong {
    display: block;
}

.project-pdf-results span {
    color: var(--muted);
    font-size: 0.52rem;
}

.project-pdf-results strong {
    margin-top: 5px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 680;
}

.project-pdf-results .is-total {
    background: #e9f4f0;
}

.project-pdf-results .is-total strong {
    color: #285f50;
}

.project-auto-plan {
    margin-top: 18px;
    padding: 18px;
    border-radius: 20px;
    background: #f2f7f5;
}

.project-auto-plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.project-auto-plan-head h4 {
    margin-top: 4px;
    color: var(--ink);
    font-size: 0.88rem;
}

.project-auto-plan-head p,
.project-auto-plan-formula,
.project-auto-plan-warning {
    margin-top: 5px;
    color: var(--muted-strong);
    font-size: 0.59rem;
    line-height: 1.45;
}

.project-auto-plan-head > strong {
    color: #2d6f5c;
    font-size: 1.65rem;
    font-weight: 650;
    letter-spacing: -0.05em;
}

.project-auto-plan-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.project-auto-plan-grid > div {
    padding: 10px 12px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.8);
}

.project-auto-plan-grid span,
.project-auto-plan-grid strong {
    display: block;
}

.project-auto-plan-grid span {
    color: var(--muted);
    font-size: 0.52rem;
}

.project-auto-plan-grid strong {
    margin-top: 4px;
    color: var(--ink);
    font-size: 0.74rem;
}

.project-auto-plan-warning {
    color: #9a5c16;
}

@media (max-width: 760px) {
    .project-pdf-assistant {
        grid-template-columns: 1fr;
    }

    .project-pdf-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-auto-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.audiobook-time-entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.audiobook-time-entry-grid .time-entry-description {
    grid-column: span 3;
}

.dashboard-audiobooks {
    margin-bottom: 30px;
}

.dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding-inline: 2px;
}

.dashboard-section-heading .eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #b85e2d;
}

.dashboard-section-heading h2 {
    color: var(--ink);
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    font-weight: 720;
    letter-spacing: -0.045em;
    line-height: 1;
}

.dashboard-section-heading p {
    margin-top: 8px;
    color: var(--muted-strong);
    font-size: 0.72rem;
}

.dashboard-audiobook-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 260px));
    gap: 18px;
    align-items: start;
}

.dashboard-audiobook-card {
    aspect-ratio: 1;
    min-width: 0;
    padding: 18px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 9px;
    overflow: hidden;
    border: 1px solid rgba(60, 60, 67, 0.1);
    border-radius: 24px;
    color: inherit;
    background: linear-gradient(150deg, #fff 0%, #fbf5f1 100%);
    box-shadow: var(--shadow-sm);
    transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.dashboard-audiobook-card:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 94, 45, 0.24);
    box-shadow: var(--shadow-md);
}

.dashboard-audiobook-card-head,
.dashboard-audiobook-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-audiobook-kicker {
    min-width: 0;
    overflow: hidden;
    color: #9a5128;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-audiobook-card .status-tag {
    flex: 0 0 auto;
    min-height: 22px;
    padding-inline: 8px;
    font-size: 0.53rem;
}

.dashboard-audiobook-title {
    min-width: 0;
}

.dashboard-audiobook-title h3 {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 680;
    letter-spacing: -0.025em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-audiobook-title p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.58rem;
}

.dashboard-audiobook-rings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.dashboard-book-ring {
    --ring-color: #b85e2d;
    width: 72px;
    height: 72px;
    padding: 6px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) var(--ring-value), #e8e8ed 0);
}

.dashboard-book-ring.deadline {
    --ring-color: #34a06f;
}

.dashboard-book-ring.deadline.warning {
    --ring-color: #e69a22;
}

.dashboard-book-ring.deadline.danger {
    --ring-color: #e25555;
}

.dashboard-book-ring.deadline.neutral {
    --ring-color: #a8a8ad;
}

.dashboard-book-ring > div {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    background: #fff;
}

.dashboard-book-ring strong,
.dashboard-book-ring small {
    display: block;
}

.dashboard-book-ring strong {
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 720;
    letter-spacing: -0.025em;
}

.dashboard-book-ring small {
    margin-top: 1px;
    color: var(--muted);
    font-size: 0.47rem;
    font-weight: 600;
}

.dashboard-audiobook-progress-copy {
    color: var(--muted-strong);
    font-size: 0.52rem;
    font-weight: 600;
}

.dashboard-audiobook-team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(60, 60, 67, 0.08);
}

.dashboard-audiobook-team div {
    min-width: 0;
}

.dashboard-audiobook-team span,
.dashboard-audiobook-team strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-audiobook-team span {
    color: var(--muted);
    font-size: 0.48rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-audiobook-team strong {
    margin-top: 2px;
    color: var(--ink);
    font-size: 0.57rem;
    font-weight: 650;
}

.dashboard-audiobook-empty {
    max-width: 520px;
    padding: 22px 24px;
    border-radius: 20px;
    color: var(--muted-strong);
    background: #f5f5f7;
}

.dashboard-audiobook-empty strong {
    color: var(--ink);
    font-size: 0.78rem;
}

.dashboard-audiobook-empty p {
    margin-top: 5px;
    font-size: 0.66rem;
}

@media (max-width: 1180px) {
    .audiobook-time-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audiobook-time-entry-grid .time-entry-description {
        grid-column: span 2;
    }

    .dashboard-audiobook-grid {
        grid-template-columns: repeat(2, minmax(210px, 280px));
    }
}

@media (max-width: 700px) {
    .audiobook-role-fields,
    .audiobook-time-entry-grid {
        grid-template-columns: 1fr;
    }

    .audiobook-time-entry-grid .time-entry-description {
        grid-column: auto;
    }

    .dashboard-audiobooks {
        margin-right: -15px;
        margin-bottom: 24px;
    }

    .dashboard-section-heading {
        align-items: flex-start;
        margin-right: 15px;
    }

    .dashboard-section-heading h2 {
        font-size: 1.55rem;
    }

    .dashboard-section-heading p {
        max-width: 270px;
        line-height: 1.45;
    }

    .dashboard-section-heading .text-action {
        display: none;
    }

    .dashboard-audiobook-grid {
        display: flex;
        gap: 13px;
        padding-right: 15px;
        overflow-x: auto;
        scroll-padding-left: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .dashboard-audiobook-grid::-webkit-scrollbar {
        display: none;
    }

    .dashboard-audiobook-card {
        flex: 0 0 min(74vw, 255px);
        scroll-snap-align: start;
    }
}

/* Audiobook closeout: archive and operational productivity report. */
.project-header-actions,
.audiobook-report-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.project-header-actions form {
    margin: 0;
}

.close-project-button {
    background: #242323;
}

.text-button {
    padding: 7px 9px;
    border: 0;
    color: var(--muted-strong);
    background: transparent;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 650;
    cursor: pointer;
}

.text-button:hover {
    color: var(--ink);
}

.closed-audiobook-archive {
    margin-top: 14px;
    border-top: 1px solid rgba(60, 60, 67, 0.1);
}

.closed-audiobook-archive > summary {
    min-height: 60px;
    padding: 14px 4px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.closed-audiobook-archive > summary::-webkit-details-marker {
    display: none;
}

.closed-audiobook-archive > summary::before {
    content: "+";
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #6e6e73;
    background: #ececf0;
    font-size: 0.88rem;
    font-weight: 500;
}

.closed-audiobook-archive[open] > summary::before {
    content: "−";
}

.closed-audiobook-archive > summary span {
    min-width: 0;
    flex: 1;
}

.closed-audiobook-archive > summary strong,
.closed-audiobook-archive > summary small {
    display: block;
}

.closed-audiobook-archive > summary strong {
    font-size: 0.73rem;
    font-weight: 680;
}

.closed-audiobook-archive > summary small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.58rem;
}

.closed-audiobook-archive > summary b {
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #6e6e73;
    background: #f2f2f4;
    font-size: 0.59rem;
}

.closed-audiobook-list .project-list-card {
    margin-top: 4px;
    border-color: rgba(60, 60, 67, 0.08);
    background: rgba(248, 248, 250, 0.84);
    box-shadow: none;
}

.closed-audiobook-list .project-list-item {
    filter: saturate(0.78);
}

.audiobook-productivity-report {
    margin-top: 28px;
    padding: clamp(24px, 3.5vw, 42px);
    overflow: hidden;
    border-radius: 30px;
    background: #fff;
}

.audiobook-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 25px;
}

@media (min-width: 701px) {
    .audiobook-report-actions {
        margin-right: 76px;
    }
}

.audiobook-report-head .eyebrow {
    color: #9a5128;
}

.audiobook-report-head h2 {
    margin-top: 8px;
    color: var(--ink);
    font-size: clamp(1.75rem, 3.2vw, 2.85rem);
    font-weight: 720;
    letter-spacing: -0.052em;
    line-height: 1;
}

.audiobook-report-head p {
    max-width: 620px;
    margin-top: 10px;
    color: var(--muted-strong);
    font-size: 0.72rem;
    line-height: 1.55;
}

.audiobook-health-badge {
    min-height: 30px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    color: #68686d;
    background: #f1f1f3;
    font-size: 0.59rem;
    font-weight: 680;
}

.audiobook-health-badge.good {
    color: #16734a;
    background: #e7f6ee;
}

.audiobook-health-badge.warning {
    color: #986000;
    background: #fff3dd;
}

.audiobook-health-badge.danger {
    color: #b02f35;
    background: #fdebed;
}

.audiobook-report-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(60, 60, 67, 0.09);
    border-radius: 22px;
    background: #f7f7f9;
}

.audiobook-report-kpis article {
    min-width: 0;
    padding: 20px 22px;
}

.audiobook-report-kpis article + article {
    border-left: 1px solid rgba(60, 60, 67, 0.09);
}

.audiobook-report-kpis span,
.audiobook-report-kpis strong,
.audiobook-report-kpis small {
    display: block;
}

.audiobook-report-kpis span {
    color: var(--muted);
    font-size: 0.54rem;
    font-weight: 680;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.audiobook-report-kpis strong {
    margin-top: 8px;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.05em;
}

.audiobook-report-kpis small {
    margin-top: 3px;
    color: var(--muted-strong);
    font-size: 0.57rem;
}

.audiobook-report-analysis,
.audiobook-report-detail-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.audiobook-analysis-card,
.audiobook-session-report,
.audiobook-actor-history {
    min-width: 0;
    padding: 23px;
    border: 1px solid rgba(60, 60, 67, 0.09);
    border-radius: 22px;
    background: #fff;
}

.audiobook-analysis-card.recording {
    background: linear-gradient(145deg, #fff 45%, #fff5ee 100%);
}

.audiobook-analysis-card.editing {
    background: linear-gradient(145deg, #fff 45%, #edf8fb 100%);
}

.audiobook-analysis-head,
.audiobook-report-subhead,
.audiobook-actor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.audiobook-analysis-head span:first-child {
    color: var(--muted);
    font-size: 0.54rem;
    font-weight: 680;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.audiobook-analysis-head h3 {
    margin-top: 5px;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 680;
}

.audiobook-health-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #a8a8ad;
    box-shadow: 0 0 0 5px rgba(168, 168, 173, 0.14);
}

.audiobook-health-dot.good {
    background: #30a46c;
    box-shadow: 0 0 0 5px rgba(48, 164, 108, 0.14);
}

.audiobook-health-dot.warning {
    background: #e59a25;
    box-shadow: 0 0 0 5px rgba(229, 154, 37, 0.14);
}

.audiobook-health-dot.danger {
    background: #e25555;
    box-shadow: 0 0 0 5px rgba(226, 85, 85, 0.14);
}

.audiobook-analysis-card > p {
    margin-top: 18px;
    color: var(--muted-strong);
    font-size: 0.69rem;
    line-height: 1.55;
}

.audiobook-analysis-card > p strong {
    color: var(--ink);
}

.audiobook-analysis-card > small {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.56rem;
    line-height: 1.5;
}

.audiobook-benchmark-track {
    height: 7px;
    margin-top: 17px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(120, 120, 128, 0.14);
}

.audiobook-benchmark-track i {
    width: var(--benchmark-progress);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #a8a8ad;
}

.audiobook-benchmark-track i.good {
    background: #30a46c;
}

.audiobook-benchmark-track i.warning {
    background: #e59a25;
}

.audiobook-benchmark-track i.danger {
    background: #e25555;
}

.audiobook-report-subhead {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(60, 60, 67, 0.08);
}

.audiobook-report-subhead h3 {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 680;
}

.audiobook-report-subhead span {
    color: var(--muted);
    font-size: 0.56rem;
    font-weight: 650;
}

.audiobook-session-list {
    max-height: 280px;
    overflow: auto;
}

.audiobook-session-row {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(110px, 1fr) repeat(3, auto);
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(60, 60, 67, 0.07);
    color: var(--muted-strong);
    font-size: 0.6rem;
}

.audiobook-session-row strong,
.audiobook-session-row small {
    display: block;
}

.audiobook-session-row strong,
.audiobook-session-row b {
    color: var(--ink);
    font-weight: 660;
}

.audiobook-session-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.53rem;
}

.audiobook-report-empty {
    padding: 28px 2px 10px;
    color: var(--muted);
    font-size: 0.65rem;
    line-height: 1.5;
}

.audiobook-actor-heading {
    justify-content: flex-start;
    margin-top: 18px;
}

.audiobook-actor-heading > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.audiobook-actor-heading strong,
.audiobook-actor-heading small {
    display: block;
}

.audiobook-actor-heading strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audiobook-actor-heading small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.56rem;
}

.audiobook-actor-stats {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.audiobook-actor-stats div {
    padding: 13px;
    border-radius: 14px;
    background: #f7f7f9;
}

.audiobook-actor-stats span,
.audiobook-actor-stats strong {
    display: block;
}

.audiobook-actor-stats span {
    color: var(--muted);
    font-size: 0.5rem;
    font-weight: 650;
    text-transform: uppercase;
}

.audiobook-actor-stats strong {
    margin-top: 5px;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 690;
}

.audiobook-actor-history > p {
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.54rem;
    line-height: 1.5;
}

.audiobook-report-footer {
    margin-top: 24px;
    padding-top: 18px;
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(60, 60, 67, 0.09);
    color: var(--muted-strong);
    font-size: 0.58rem;
}

.audiobook-report-footer small {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.52rem;
}

@media (max-width: 900px) {
    .audiobook-report-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audiobook-report-kpis article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(60, 60, 67, 0.09);
    }

    .audiobook-report-kpis article:nth-child(4) {
        border-top: 1px solid rgba(60, 60, 67, 0.09);
    }

    .audiobook-report-analysis,
    .audiobook-report-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .project-detail-header .page-title-row,
    .audiobook-report-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-header-actions,
    .audiobook-report-actions {
        justify-content: flex-start;
    }

    .audiobook-productivity-report {
        margin-top: 20px;
        padding: 20px;
        border-radius: 24px;
    }

    .audiobook-report-kpis article {
        padding: 16px;
    }

    .audiobook-session-row {
        grid-template-columns: minmax(95px, 1fr) repeat(2, auto);
        gap: 10px;
    }

    .audiobook-session-row > span:nth-of-type(2) {
        display: none;
    }

    .audiobook-report-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .audiobook-report-footer small {
        margin-left: 0;
    }
}

@media print {
    .sidebar,
    .mobile-topbar,
    .global-quick-actions,
    .project-detail-header,
    .project-details-card,
    .three-column-grid,
    .project-work-card,
    .audiobook-report-actions,
    .toast-stack {
        display: none !important;
    }

    .app-shell,
    .main-content,
    .page-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .audiobook-productivity-report {
        margin: 0;
        border: 0;
        box-shadow: none;
    }
}

/* Dashboard daily assistant: one welcome per user and a compact persistent bar. */
.dashboard-page {
    display: flex;
    flex-direction: column;
}

.dashboard-page > .dashboard-hero-row {
    order: 1;
}

.dashboard-page > .dashboard-audiobooks {
    order: 2;
}

.dashboard-page > .dashboard-audioguides {
    order: 3;
}

.dashboard-page > .dashboard-focus-grid {
    order: 4;
}

.dashboard-page > .two-column-grid {
    order: 5;
}

.dashboard-page-welcome {
    width: 100%;
    margin: 4px 0 24px;
}

.dashboard-page-welcome h1 {
    color: var(--ink);
    font-size: clamp(2.7rem, 5.5vw, 4.8rem);
    font-weight: 720;
    letter-spacing: -0.058em;
    line-height: 0.96;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.16em;
}

.dashboard-page-welcome h1 span,
.dashboard-page-welcome h1 strong {
    font-weight: inherit;
}

.dashboard-page-welcome h1 strong {
    color: #86868b;
}

.dashboard-hero-row {
    margin-bottom: 22px;
}

.dashboard-assistant-compact {
    width: 100%;
    min-height: 58px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: auto minmax(260px, 520px);
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    border-radius: 20px;
}

.dashboard-assistant-compact-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.dashboard-assistant-orb {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: #242323;
    font-size: 0.85rem;
}

.dashboard-assistant-compact-identity strong,
.dashboard-assistant-compact-identity span {
    display: block;
}

.dashboard-assistant-compact-identity strong {
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 680;
}

.dashboard-assistant-compact-identity div > span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.56rem;
}

.dashboard-assistant-compact-form {
    min-width: 0;
    height: 40px;
    padding: 4px 5px 4px 13px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31px;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(60, 60, 67, 0.1);
    border-radius: 999px;
    background: #f5f5f7;
}

.dashboard-assistant-compact-form input[type="text"] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-size: 0.65rem;
}

.dashboard-assistant-compact-form button {
    width: 31px;
    height: 31px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #242323;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.dashboard-assistant-compact-response {
    grid-column: 1 / -1;
    max-height: 210px;
    padding: 13px 15px;
    overflow-y: auto;
    border: 1px solid #dbe8fb;
    border-radius: 14px;
    background: #f5f9ff;
}

.dashboard-assistant-compact-response p {
    color: var(--muted-strong);
    font-size: 0.64rem;
    line-height: 1.5;
}

.dashboard-assistant-compact-response p + p {
    margin-top: 5px;
}

.dashboard-daily-welcome-backdrop {
    position: fixed;
    inset: 0;
    z-index: 420;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    overflow-y: auto;
    background: rgba(29, 29, 31, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: dashboard-daily-backdrop-in 220ms ease both;
}

.dashboard-daily-welcome {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    padding: clamp(28px, 4.5vw, 48px);
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 30px 90px rgba(29, 29, 31, 0.22);
    animation: dashboard-daily-card-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dashboard-daily-close-form {
    position: absolute;
    top: 18px;
    right: 18px;
}

.dashboard-daily-close {
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #6e6e73;
    background: #f0f0f2;
    font-size: 1.15rem;
    font-weight: 350;
    line-height: 1;
    cursor: pointer;
}

.dashboard-daily-intro .dashboard-welcome-kicker {
    margin-bottom: 12px;
}

.dashboard-daily-intro h1 {
    max-width: 640px;
    padding-right: 28px;
    color: var(--ink);
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 720;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.dashboard-daily-intro h1 strong {
    color: #86868b;
    font-weight: 650;
}

.dashboard-daily-title-row {
    margin-top: clamp(30px, 5vw, 48px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.dashboard-daily-title-row .eyebrow {
    color: var(--accent);
}

.dashboard-daily-title-row h2 {
    margin-top: 6px;
    color: var(--ink);
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.dashboard-daily-lead {
    max-width: 640px;
    margin-top: 12px;
    color: var(--muted-strong);
    font-size: 0.76rem;
    line-height: 1.6;
}

.dashboard-daily-summary {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-daily-summary article {
    padding: 18px;
    border-radius: 18px;
    background: #f5f5f7;
}

.dashboard-daily-summary article > span {
    color: var(--muted);
    font-size: 0.54rem;
    font-weight: 680;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-daily-summary p {
    margin-top: 9px;
    color: var(--ink);
    font-size: 0.68rem;
    line-height: 1.55;
}

.dashboard-daily-footer {
    margin-top: 24px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(60, 60, 67, 0.1);
}

.dashboard-daily-footer > p {
    max-width: 480px;
    color: #6f6254;
    font-size: 0.65rem;
    font-style: italic;
    line-height: 1.5;
}

@keyframes dashboard-daily-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dashboard-daily-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
    .dashboard-page-welcome {
        margin: 4px 0 20px;
    }

    .dashboard-page-welcome h1 {
        font-size: clamp(2.35rem, 12vw, 3.45rem);
        line-height: 0.98;
    }

    .dashboard-page > .dashboard-hero-row {
        margin-bottom: 18px;
    }

    .dashboard-assistant-compact {
        min-height: 104px;
        padding: 10px;
        grid-template-columns: 1fr;
        gap: 8px;
        border-radius: 18px;
    }

    .dashboard-assistant-compact-identity div > span {
        display: none;
    }

    .dashboard-assistant-compact-form {
        width: 100%;
    }

    .dashboard-daily-welcome-backdrop {
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
        align-items: start;
    }

    .dashboard-daily-welcome {
        max-height: calc(100vh - 20px);
        padding: 30px 22px 24px;
        border-radius: 28px;
    }

    .dashboard-daily-close-form {
        top: 14px;
        right: 14px;
    }

    .dashboard-daily-intro h1 {
        padding-right: 34px;
        font-size: clamp(2.2rem, 12vw, 3.2rem);
    }

    .dashboard-daily-title-row {
        margin-top: 28px;
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-daily-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-daily-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-daily-footer form,
    .dashboard-daily-footer .primary-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-daily-welcome-backdrop,
    .dashboard-daily-welcome {
        animation: none;
    }
}

/* Refined studio palette: airy Apple surfaces with restrained colour cues. */
:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f3f6f8;
    --surface-soft: #edf2f5;
    --surface-field: #f1f5f7;
    --ink: #252527;
    --muted-strong: #68737d;
    --muted: #909aa4;
    --line: rgba(65, 82, 96, 0.12);
    --line-soft: rgba(65, 82, 96, 0.075);
    --accent: #3f78aa;
    --accent-soft: #eaf2f8;
    --green: #77aa95;
    --green-ink: #3f7f67;
    --orange: #d9a05c;
    --orange-ink: #9a6630;
    --red: #c95563;
    --studio-blue-soft: #eaf2f8;
    --studio-sage-soft: #edf5f1;
    --studio-peach-soft: #f9eee7;
    --studio-sand-soft: #f8f3e9;
    --studio-lilac-soft: #f0f0f8;
    --shadow-sm: 0 1px 2px rgba(43, 61, 77, 0.045), 0 8px 24px rgba(43, 61, 77, 0.035);
    --shadow-md: 0 16px 38px rgba(43, 61, 77, 0.08);
}

body:not(.login-page),
.main-pane,
.main-content {
    background: #fff;
}

.main-content {
    background-image: none;
}

.content-card,
.metric-box,
.kanban-column,
.panel,
.studio-map-panel,
.studio-room-board,
.development-board-shell,
.development-fridge-shell,
.voice-catalog-shell,
.voice-review-progress-card {
    border-color: var(--line);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.content-card:hover,
.metric-box:hover,
.panel:hover {
    border-color: rgba(74, 104, 127, 0.2);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.page-kicker,
.page-header .eyebrow,
.eyebrow {
    color: #5d7f9d;
}

.page-title-row h1,
.page-header h1 {
    color: #242426;
}

.primary-button {
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(63, 120, 170, 0.15);
}

.primary-button:hover {
    background: #356c9c;
}

.secondary-button {
    border-color: rgba(73, 93, 110, 0.12);
    background: #fff;
}

.secondary-button:hover,
.ghost-button:hover {
    background: var(--studio-blue-soft);
}

input,
select,
textarea {
    background: var(--surface-field);
}

input:hover,
select:hover,
textarea:hover {
    background: #eaf0f3;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(63, 120, 170, 0.3);
    box-shadow: 0 0 0 4px rgba(63, 120, 170, 0.1);
}

.tab-switch,
.page-chip-tabs,
.perspective-section-nav {
    border-color: rgba(70, 91, 108, 0.07);
    background: rgba(235, 241, 245, 0.9);
}

.switch-chip.active,
.filter-chip.active,
.perspective-section-nav a.active {
    color: #fff;
    background: var(--accent);
}

.data-table tbody tr:hover,
.detail-table tbody tr:hover,
.project-list-item:hover,
.dashboard-agenda-event-card:hover,
.deadline-item:hover,
.task-list-item:hover,
.feed-row:hover {
    background: #f1f6f8;
}

.empty-state,
.task-detail-empty,
.calendar-empty,
.dashboard-audiobook-empty {
    background: #f3f6f8;
}

.metric-box:has(.icon-tint-blue),
.stats-row > .metric-box:nth-child(4n + 1) {
    background: #edf4f9;
}

.metric-box:has(.icon-tint-green),
.stats-row > .metric-box:nth-child(4n + 2) {
    background: #edf6f1;
}

.metric-box:has(.icon-tint-orange),
.stats-row > .metric-box:nth-child(4n + 3) {
    background: #fbf2e9;
}

.metric-box:has(.icon-tint-indigo),
.stats-row > .metric-box:nth-child(4n + 4) {
    background: #f0f0f8;
}

.icon-tint-blue { color: #4f86b4; }
.icon-tint-green { color: #6a9e88; }
.icon-tint-orange { color: #c88a4d; }
.icon-tint-indigo { color: #7e83ad; }

.project-type-overview-item {
    border-color: color-mix(in srgb, var(--project-type-color) 14%, var(--line));
    background: var(--project-type-soft);
}

.project-type-overview-item:hover {
    border-color: color-mix(in srgb, var(--project-type-color) 24%, var(--line));
    background: color-mix(in srgb, var(--project-type-soft) 82%, #fff);
}

.task-filter-card,
.task-kanban-column,
.kanban-column {
    background: rgba(239, 244, 247, 0.88);
}

.task-kanban-column:nth-child(4n + 2),
.kanban-column:nth-child(4n + 2) {
    background: rgba(234, 242, 248, 0.9);
}

.task-kanban-column:nth-child(4n + 3),
.kanban-column:nth-child(4n + 3) {
    background: rgba(249, 241, 233, 0.9);
}

.task-kanban-column:nth-child(4n + 4),
.kanban-column:nth-child(4n + 4) {
    background: rgba(237, 245, 241, 0.9);
}

.calendar-week-grid {
    background: rgba(73, 96, 114, 0.08);
}

.calendar-week-column {
    background: rgba(255, 255, 255, 0.94);
}

.development-board-shell,
.voice-catalog-shell,
.voice-metric-strip,
.report-kpi-grid,
.perspective-capacity-summary {
    background: #f1f5f7;
}

.voice-table-head {
    background: #eaf1f5;
}

.chip.category.produccion,
.priority.media,
.priority.Media,
.priority-media {
    border-color: #cddfec;
    color: #3e739e;
    background: var(--studio-blue-soft);
}

.chip.category.tecnico {
    border-color: #d9d9ea;
    color: #6e7398;
    background: var(--studio-lilac-soft);
}

.chip.category.general,
.priority.baja,
.priority.Baja,
.priority-baja,
.status-tag.finalizado,
.status-inline.muted {
    border-color: #dfe5e8;
    color: #68737d;
    background: #eff3f5;
}

.chip.category.recordatorio,
.status-tag.en-pausa {
    border-color: #ead9b9;
    color: #92662f;
    background: var(--studio-sand-soft);
}

.status-tag.activo,
.status-inline.ok {
    color: var(--green-ink);
    background: var(--studio-sage-soft);
}

.priority.alta,
.priority.Alta,
.priority-alta {
    color: #a66438;
    background: var(--studio-peach-soft);
}

.dashboard-page {
    background: #fff;
}

.dashboard-page-welcome {
    width: min(1180px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.dashboard-page .content-card {
    border-color: rgba(84, 107, 124, 0.12);
    background: #fff;
    box-shadow: 0 12px 34px rgba(61, 81, 96, 0.07);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.dashboard-page .content-card:hover {
    border-color: rgba(84, 107, 124, 0.18);
    background: rgba(255, 255, 255, 0.98);
}

.dashboard-assistant-compact {
    background: #f4f8fb !important;
}

.dashboard-assistant-orb,
.dashboard-assistant-compact-form button {
    background: #416f97;
}

.dashboard-audiobook-card {
    border-color: rgba(172, 112, 71, 0.14);
    background: #fff;
}

.dashboard-daily-summary article:first-child {
    background: var(--studio-blue-soft);
}

.dashboard-daily-summary article:last-child {
    background: var(--studio-sage-soft);
}

.global-create-orb {
    border-color: #416f97;
    background: #416f97;
    box-shadow: 0 12px 30px rgba(54, 96, 132, 0.24);
}

.global-create-orb:hover {
    background: #365f82;
}

@media (max-width: 700px) {
    .main-content {
        background: #fff;
    }
}

/* Flat surfaces: no decorative gradients inside the operational interface. */
.calendar-embed-setup,
.thread-messages,
.project-studio-profile,
.perspective-project-type,
.production-mail-shell.is-setup,
.production-mail-setup,
.production-mail-connect-visual,
.development-fridge-shell,
.development-convert-card,
.development-fridge-drawer-card,
.attendance-app-main,
.dashboard-summary-card,
.attendance-correction-card .attendance-disclosure-summary,
.dashboard-audiobook-card,
.audiobook-analysis-card.recording,
.audiobook-analysis-card.editing {
    background-image: none !important;
}

.calendar-embed-setup,
.thread-messages,
.project-studio-profile,
.perspective-project-type,
.production-mail-shell.is-setup,
.attendance-app-main,
.dashboard-summary-card,
.dashboard-audiobook-card {
    background-color: #fff !important;
}

.production-mail-setup,
.production-mail-connect-visual,
.development-fridge-shell,
.development-fridge-drawer-card {
    background-color: #f1f5f7;
}

.development-convert-card,
.audiobook-analysis-card.editing {
    background-color: var(--studio-sage-soft);
}

.attendance-correction-card .attendance-disclosure-summary,
.audiobook-analysis-card.recording {
    background-color: var(--studio-peach-soft);
}

.perspective-command-card,
.perspective-outlook-card,
.development-command-card,
.attendance-app-side {
    background-image: none;
}

.perspective-command-card {
    background-color: #242323;
}

.perspective-outlook-card {
    background-color: #2b3a40;
}

.development-command-card {
    background-color: #22343d;
}

.attendance-app-side {
    background-color: #242323;
}

.production-mail-shell.is-setup::before,
.voice-review-progress-track i,
.attendance-action-primary {
    background-image: none;
}

.production-mail-shell.is-setup::before {
    background-color: #6f94ad;
}

.voice-review-progress-track i {
    background-color: #6e9f91;
}

.attendance-action-primary {
    background-color: var(--attendance-blue);
}

/* Voice casting selection */
.voice-sample-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-sample-heading-actions .text-action {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.voice-prepare-casting {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: #507f73;
    font-size: 0.54rem;
    font-weight: 700;
    white-space: nowrap;
}

.voice-prepare-casting[hidden] {
    display: none;
}

.voice-sample-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(225px, 0.78fr);
}

.voice-sample-selector {
    width: 28px;
    height: 28px;
    position: relative;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.voice-sample-selector input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.voice-sample-selector span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid #d4d8dc;
    border-radius: 9px;
    color: transparent;
    background: #fff;
    transition: 150ms ease;
}

.voice-sample-selector:hover span {
    border-color: #83a99e;
    background: #f2f7f5;
}

.voice-sample-selector input:checked + span {
    border-color: #507f73;
    color: #fff;
    background: #507f73;
}

.voice-casting-tray {
    position: fixed;
    z-index: 90;
    right: 30px;
    bottom: 24px;
    width: min(760px, calc(100vw - var(--sidebar-width) - 60px));
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid rgba(36, 35, 35, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(36, 35, 35, 0.16);
    backdrop-filter: blur(18px);
}

.voice-casting-tray[hidden] {
    display: none;
}

.voice-casting-tray[data-loading="true"] {
    pointer-events: none;
    opacity: 0.68;
}

.voice-casting-tray-summary,
.voice-casting-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.voice-casting-tray-summary > div {
    display: grid;
    gap: 2px;
}

.voice-casting-tray-summary strong {
    color: var(--ink);
    font-size: 0.68rem;
    white-space: nowrap;
}

.voice-casting-tray-summary small {
    color: var(--muted);
    font-size: 0.56rem;
}

.voice-casting-tray-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #4e786d;
    background: #eaf3ef;
}

.voice-casting-name {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.voice-casting-name span {
    color: var(--muted);
    font-size: 0.49rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.voice-casting-name input {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: #f7f8f8;
    font: inherit;
    font-size: 0.64rem;
}

.voice-casting-actions .primary-button,
.voice-casting-actions .secondary-button {
    min-height: 36px;
    padding: 8px 11px;
    white-space: nowrap;
}

.voice-casting-clear {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    color: #777;
    background: #f0f1f2;
    cursor: pointer;
    font-size: 1rem;
}

.voice-casting-status {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #49685f;
    background: #edf5f1;
    font-size: 0.6rem;
}

.voice-casting-status[hidden] {
    display: none;
}

.voice-casting-status[data-tone="error"] {
    color: #a04141;
    background: #fff0ef;
}

.voice-casting-status a {
    color: inherit;
    font-weight: 700;
}

@media (max-width: 900px) {
    .voice-casting-tray {
        right: 16px;
        bottom: 16px;
        width: calc(100vw - 32px);
        grid-template-columns: 1fr auto;
    }

    .voice-casting-name {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .voice-casting-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: stretch;
    }

    .voice-casting-actions .primary-button,
    .voice-casting-actions .secondary-button {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 700px) {
    .voice-sample-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .voice-sample-row audio {
        grid-column: 1 / -1;
    }

    .voice-casting-tray {
        bottom: 12px;
        padding: 12px;
        border-radius: 18px;
    }

    .voice-casting-tray-summary strong {
        white-space: normal;
    }

    .voice-casting-actions {
        flex-wrap: wrap;
    }

    .voice-casting-clear {
        order: -1;
    }
}

/* Private voice links */
.voice-private-links {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.voice-private-links-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    padding-bottom: 15px;
}

.voice-private-links-head h2 {
    margin-top: 3px;
    font-size: 1rem;
}

.voice-private-links-head p,
.voice-private-links-empty {
    color: var(--muted);
    font-size: 0.62rem;
}

.voice-private-link-list {
    border-top: 1px solid var(--line-soft);
}

.voice-private-link-row {
    display: grid;
    grid-template-columns: 36px minmax(180px, 1fr) auto auto;
    gap: 13px;
    align-items: center;
    padding: 12px 2px;
    border-bottom: 1px solid var(--line-soft);
}

.voice-private-link-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #4e786d;
    background: #eaf3ef;
}

.voice-private-link-row > div:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.voice-private-link-row > div:nth-child(2) strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-private-link-row > div:nth-child(2) span,
.voice-private-link-stats span {
    color: var(--muted);
    font-size: 0.55rem;
}

.voice-private-link-stats {
    display: flex;
    gap: 14px;
}

.voice-private-link-stats strong {
    color: var(--ink);
}

.voice-casting-tray {
    width: min(830px, calc(100vw - var(--sidebar-width) - 60px));
    display: block;
}

.voice-casting-tray-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.voice-casting-link-fields {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(140px, 0.8fr) 118px auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
}

.voice-casting-expiry,
.voice-casting-message {
    display: grid;
    gap: 3px;
}

.voice-casting-expiry span,
.voice-casting-message span {
    color: var(--muted);
    font-size: 0.49rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.voice-casting-expiry select,
.voice-casting-message textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: #f7f8f8;
    font: inherit;
    font-size: 0.62rem;
}

.voice-casting-expiry select {
    min-height: 34px;
    padding: 7px 9px;
}

.voice-casting-message {
    grid-column: 1 / 4;
}

.voice-casting-message textarea {
    min-height: 52px;
    padding: 9px 10px;
    resize: vertical;
}

.voice-casting-create {
    min-height: 52px;
    justify-content: center;
}

.voice-casting-status {
    margin-top: 11px;
    align-items: center;
}

.voice-casting-created-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}

.voice-casting-created-copy strong {
    font-size: 0.61rem;
}

.voice-casting-created-copy input {
    width: 100%;
    border: 0;
    color: #41665d;
    background: transparent;
    font-size: 0.58rem;
}

.voice-casting-created-actions {
    display: flex;
    gap: 7px;
}

.voice-casting-created-actions .primary-button,
.voice-casting-created-actions .secondary-button {
    min-height: 32px;
    padding: 7px 10px;
}

/* Client-facing casting page */
.public-casting-page {
    min-height: 100vh;
    margin: 0;
    color: #242323;
    background: #f5f3ee;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Avenir Next", sans-serif;
}

.public-casting-shell {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 30px 0 44px;
}

.public-casting-brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.public-casting-brand img {
    width: 78px;
    height: auto;
}

.public-casting-brand span {
    color: #77736d;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
}

.public-casting-intro {
    max-width: 780px;
    padding: 88px 0 56px;
}

.public-casting-kicker {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #716d67;
    font-size: 0.7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.public-casting-kicker i {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #e85d32;
}

.public-casting-intro h1,
.public-casting-unavailable h1 {
    max-width: 900px;
    margin: 17px 0 0;
    font-size: clamp(2.8rem, 7vw, 6.4rem);
    font-weight: 720;
    letter-spacing: -0.065em;
    line-height: 0.94;
}

.public-casting-client {
    margin: 20px 0 0;
    color: #e04d25;
    font-size: 0.83rem;
    font-weight: 650;
}

.public-casting-message {
    max-width: 680px;
    margin: 22px 0 0;
    color: #67635e;
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.55;
}

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

.public-casting-card {
    min-height: 230px;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 18px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(36, 35, 35, 0.08);
    border-radius: 28px;
    background: #fff;
}

.public-casting-card-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: #242323;
    font-size: 0.67rem;
    font-weight: 700;
}

.public-casting-card-copy {
    align-self: center;
}

.public-casting-card-copy span {
    color: #e04d25;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.public-casting-card-copy h2 {
    margin: 5px 0 0;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    letter-spacing: -0.04em;
}

.public-casting-card-copy p {
    margin: 7px 0 0;
    color: #77736d;
    font-size: 0.72rem;
}

.public-casting-card audio {
    grid-column: 1 / -1;
    width: 100%;
    height: 42px;
}

.public-casting-footer {
    margin-top: 58px;
    padding-top: 28px;
    border-top: 1px solid rgba(36, 35, 35, 0.14);
}

.public-casting-footer > p {
    max-width: 720px;
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 2.1rem);
    font-weight: 640;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.public-casting-footer > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 38px;
    color: #77736d;
    font-size: 0.66rem;
}

.public-casting-footer strong {
    color: #242323;
}

.public-casting-unavailable {
    max-width: 820px;
    padding: 18vh 0 10vh;
}

.public-casting-unavailable > span {
    color: #e04d25;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.public-casting-unavailable p {
    max-width: 620px;
    color: #67635e;
    font-size: 1.08rem;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .voice-private-link-row {
        grid-template-columns: 36px minmax(160px, 1fr) auto;
    }

    .voice-private-link-stats {
        display: none;
    }

    .voice-casting-tray {
        display: block;
    }

    .voice-casting-link-fields {
        grid-template-columns: 1fr 1fr 110px;
    }

    .voice-casting-message {
        grid-column: 1 / 3;
    }

    .voice-casting-create {
        grid-column: 3;
    }
}

@media (max-width: 700px) {
    .voice-private-links {
        padding: 16px;
    }

    .voice-private-links-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .voice-private-link-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .voice-private-link-row form {
        grid-column: 2;
    }

    .voice-casting-link-fields {
        grid-template-columns: 1fr 1fr;
    }

    .voice-casting-expiry {
        grid-column: 1 / -1;
    }

    .voice-casting-message {
        grid-column: 1 / -1;
    }

    .voice-casting-create {
        grid-column: 1 / -1;
    }

    .voice-casting-status {
        align-items: stretch;
        flex-direction: column;
    }

    .voice-casting-created-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .public-casting-shell {
        width: min(100% - 28px, 1120px);
        padding-top: 20px;
    }

    .public-casting-brand img {
        width: 64px;
    }

    .public-casting-intro {
        padding: 62px 0 38px;
    }

    .public-casting-intro h1,
    .public-casting-unavailable h1 {
        font-size: clamp(2.6rem, 15vw, 4.5rem);
    }

    .public-casting-grid {
        grid-template-columns: 1fr;
    }

    .public-casting-card {
        min-height: 210px;
        padding: 21px;
        border-radius: 24px;
    }

    .public-casting-footer > div {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Final casting tray overrides after the legacy selector styles. */
.voice-casting-tray {
    width: auto;
    max-width: min(560px, calc(100vw - var(--sidebar-width) - 60px));
    display: flex;
    grid-template-columns: none;
    justify-content: space-between;
}

.voice-casting-tray[hidden] {
    display: none;
}

.voice-casting-tray .voice-casting-actions {
    flex-wrap: nowrap;
}

@media (max-width: 700px) {
    .voice-casting-tray {
        width: calc(100vw - 24px);
        max-width: none;
        display: flex;
        align-items: center;
    }

    .voice-casting-tray .voice-casting-actions {
        width: auto;
        display: flex;
        grid-row: auto;
        grid-column: auto;
    }

    .voice-casting-tray .voice-casting-actions .secondary-button,
    .voice-casting-tray-summary small {
        display: none;
    }

    .public-casting-card {
        min-height: 238px;
    }
}

/* Voice casting: dedicated selection mode. */
.casting-selection-mode {
    padding-bottom: 92px;
}

.casting-selection-mode .voice-talent-grid {
    --voice-table-columns: 42px minmax(190px, 1.45fr) minmax(88px, 0.5fr) minmax(125px, 0.85fr) minmax(116px, 0.7fr) 68px minmax(92px, 0.55fr);
}

.voice-selection-head {
    width: 28px;
}

.voice-row-selector {
    width: 30px;
    height: 30px;
    position: relative;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.voice-row-selector input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.voice-row-selector span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #cfd8d5;
    border-radius: 8px;
    color: transparent;
    background: #fff;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.voice-row-selector:hover span {
    border-color: #668f84;
    background: #f0f6f3;
    transform: scale(1.04);
}

.voice-row-selector input:focus-visible + span {
    outline: 3px solid rgba(80, 127, 115, 0.2);
    outline-offset: 2px;
}

.voice-row-selector input:checked + span {
    border-color: #507f73;
    color: #fff;
    background: #507f73;
}

.voice-row-selector.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.casting-selection-mode .voice-talent-card:has(.voice-row-selector input:checked) {
    background: #f0f6f3;
}

.voice-casting-tray [data-finish-selection].is-disabled {
    pointer-events: none;
    opacity: 0.42;
}

@media (max-width: 900px) {
    .casting-selection-mode .voice-talent-grid {
        gap: 7px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .casting-selection-mode .voice-table-head {
        display: none;
    }

    .casting-selection-mode .voice-talent-card {
        min-height: 0;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        grid-template-areas:
            "selection identity actions"
            "selection type count"
            "selection languages languages"
            "selection residence residence";
        gap: 5px 10px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 14px;
    }

    .casting-selection-mode .voice-row-selector { grid-area: selection; align-self: center; }
    .casting-selection-mode .voice-row-identity { grid-area: identity; padding: 0; }
    .casting-selection-mode .voice-row-type { grid-area: type; }
    .casting-selection-mode .voice-language-row { grid-area: languages; padding: 1px 0 0; }
    .casting-selection-mode .voice-row-residence { grid-area: residence; padding: 1px 0 0; }
    .casting-selection-mode .voice-row-count { grid-area: count; justify-content: flex-end; }
    .casting-selection-mode .voice-row-actions { grid-area: actions; }
}

@media (max-width: 700px) {
    .casting-selection-mode {
        padding-bottom: 104px;
    }

    .casting-selection-mode .voice-page-actions .secondary-button,
    .casting-selection-mode .voice-page-actions form {
        width: auto;
    }

.casting-selection-mode .voice-casting-tray {
    bottom: calc(92px + env(safe-area-inset-bottom));
    gap: 10px;
}

    .casting-selection-mode .voice-casting-tray-summary small,
    .casting-selection-mode .voice-casting-actions .secondary-button {
        display: none;
    }

    .casting-selection-mode .voice-casting-tray-summary strong {
        font-size: 0.62rem;
    }

    .casting-selection-mode .voice-casting-actions .primary-button {
        min-height: 40px;
    }
}

@media (min-width: 701px) {
    .casting-selection-mode .voice-casting-tray {
        bottom: calc(94px + env(safe-area-inset-bottom));
    }
}

/* Client delivery flow for audiobooks and audioguides. */
.status-tag.esperando-rtks {
    border: 1px solid #ead4a8;
    color: #8b6127;
    background: #fff5df;
}

.status-tag.rtks-enviados {
    border: 1px solid #bfd9d2;
    color: #356f62;
    background: #eaf5f1;
}

.project-list-item.esperando-rtks {
    background: #fffbf3;
    box-shadow: inset 4px 0 #d8a34d;
}

.project-list-item.rtks-enviados {
    background: #f3f9f7;
    box-shadow: inset 4px 0 #65988b;
}

.project-list-item.esperando-rtks:hover {
    background: #fff7e8;
}

.project-list-item.rtks-enviados:hover {
    background: #eaf5f1;
}

.project-list-item.enviado {
    background: #f5faf8;
    box-shadow: inset 4px 0 #78a89b;
}

.project-list-item.enviado:hover {
    background: #edf6f2;
}

.dashboard-audiobook-card.esperando-rtks {
    border-color: #ead4a8;
    background-color: #fffbf3 !important;
}

.dashboard-audiobook-card.rtks-enviados {
    border-color: #bfd9d2;
    background-color: #f3f9f7 !important;
}

/* Compact audioguide tracking: state and deadline without operational noise. */
.dashboard-audioguides {
    margin-bottom: 30px;
}

.dashboard-section-heading.compact {
    align-items: center;
    margin-bottom: 14px;
}

.dashboard-audioguide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 10px;
}

.dashboard-audioguide-card {
    min-width: 0;
    min-height: 116px;
    padding: 13px 14px 12px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 17px;
    color: #fff;
    background-color: var(--audioguide-card, var(--audioguide-stage));
    box-shadow: 0 9px 24px color-mix(in srgb, var(--audioguide-stage) 18%, transparent);
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.dashboard-audioguide-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.38);
    background-color: var(--audioguide-card, var(--audioguide-stage));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--audioguide-stage) 25%, transparent);
}

.dashboard-audioguide-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.dashboard-audioguide-state-label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.dashboard-audioguide-state i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}

.dashboard-audioguide-language {
    max-width: 48%;
    overflow: hidden;
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    font-size: 0.49rem;
    font-weight: 700;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.dashboard-audioguide-card h3 {
    overflow: hidden;
    align-self: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 680;
    letter-spacing: -0.025em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-audioguide-deadline {
    display: grid;
    gap: 7px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.dashboard-audioguide-deadline-copy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 2px 8px;
}

.dashboard-audioguide-deadline-copy span,
.dashboard-audioguide-deadline-copy small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.49rem;
}

.dashboard-audioguide-deadline-copy strong {
    justify-self: end;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: -0.015em;
}

.dashboard-audioguide-deadline-copy small {
    grid-column: 2;
    justify-self: end;
}

.dashboard-audioguide-timebar {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.dashboard-audioguide-timebar i {
    display: block;
    width: var(--deadline-value);
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.82);
}

.dashboard-audioguide-card.deadline-warning .dashboard-audioguide-timebar i {
    background: #ffe09a;
}

.dashboard-audioguide-card.deadline-danger .dashboard-audioguide-timebar i {
    background: #ffd0c8;
}

.dashboard-audioguide-card.deadline-danger .dashboard-audioguide-deadline-copy strong {
    text-shadow: 0 1px 10px rgba(79, 20, 10, 0.2);
}

.dashboard-audioguide-empty {
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.7rem;
}

/* Per-script estimates keep multilingual audioguides measurable. */
.audioguide-language-plan {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}

.audioguide-language-plan-head,
.audioguide-language-row,
.project-guide-breakdown > div {
    display: flex;
    align-items: center;
}

.audioguide-language-plan-head {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 11px;
}

.audioguide-language-plan-head h5 {
    margin-top: 3px;
    color: var(--ink);
    font-size: 0.86rem;
    letter-spacing: -0.025em;
}

.audioguide-language-plan-head > strong {
    color: var(--muted-strong);
    font-size: 0.62rem;
}

.audioguide-language-list {
    display: grid;
    gap: 8px;
}

.audioguide-language-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.6fr) repeat(3, minmax(72px, 0.55fr)) minmax(105px, 0.8fr) auto;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: #fafafa;
}

.audioguide-language-row.is-recorded {
    border-color: #cfe0d9;
    background: #f4f8f6;
}

.audioguide-language-identity,
.audioguide-language-metric,
.audioguide-language-remaining {
    min-width: 0;
}

.audioguide-language-identity span,
.audioguide-language-identity strong,
.audioguide-language-identity small,
.audioguide-language-metric span,
.audioguide-language-metric strong,
.audioguide-language-remaining span,
.audioguide-language-remaining strong {
    display: block;
}

.audioguide-language-identity span {
    color: #607f99;
    font-size: 0.57rem;
    font-weight: 750;
}

.audioguide-language-identity strong {
    margin-top: 2px;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audioguide-language-identity small,
.audioguide-language-metric span,
.audioguide-language-remaining span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.5rem;
}

.audioguide-language-metric strong,
.audioguide-language-remaining strong {
    margin-top: 3px;
    color: var(--ink);
    font-size: 0.64rem;
}

.audioguide-language-row.is-recorded .audioguide-language-remaining strong {
    color: #5f8a77;
}

.audioguide-language-row .text-button {
    white-space: nowrap;
}

.project-guide-breakdown {
    display: grid;
    gap: 7px;
    grid-column: 1 / -1;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: #fafafa;
}

.project-guide-breakdown[hidden] {
    display: none;
}

.project-guide-breakdown > strong {
    color: var(--ink);
    font-size: 0.66rem;
}

.project-guide-breakdown > div {
    justify-content: space-between;
    gap: 12px;
    padding-top: 7px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted-strong);
    font-size: 0.58rem;
}

.project-guide-breakdown > div > span:first-child {
    min-width: 0;
    flex: 1;
}

.project-guide-breakdown b,
.project-guide-breakdown small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-guide-breakdown b {
    color: var(--ink);
    font-size: 0.61rem;
}

@media (max-width: 1050px) {
    .dashboard-audioguide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audioguide-language-row {
        grid-template-columns: minmax(170px, 1.4fr) repeat(2, minmax(80px, 0.6fr));
    }
}

@media (max-width: 700px) {
    .dashboard-audioguides {
        margin-right: -15px;
        margin-bottom: 24px;
    }

    .dashboard-audioguide-grid {
        display: flex;
        gap: 11px;
        padding-right: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .dashboard-audioguide-grid::-webkit-scrollbar {
        display: none;
    }

    .dashboard-audioguide-card {
        flex: 0 0 min(60vw, 196px);
        scroll-snap-align: start;
    }

    .audioguide-language-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audioguide-language-identity,
    .audioguide-language-remaining,
    .audioguide-language-row form {
        grid-column: 1 / -1;
    }

    .audioguide-language-row form,
    .audioguide-language-row form button {
        width: 100%;
    }

    .project-guide-breakdown > div {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

.project-delivery-flow {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
    padding: 24px;
    border-color: #dde3e6;
    background: #fff;
}

.project-delivery-flow.esperando-rtks {
    border-color: #ead4a8;
    background: #fffbf3;
}

.project-delivery-flow.rtks-enviados {
    border-color: #bfd9d2;
    background: #f3f9f7;
}

.project-delivery-flow-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.project-delivery-flow-head .eyebrow {
    display: block;
    margin-bottom: 7px;
}

.project-delivery-flow-head h2 {
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 720;
    letter-spacing: -0.035em;
}

.project-delivery-flow-head p {
    margin-top: 6px;
    color: var(--muted-strong);
    font-size: 0.7rem;
    line-height: 1.5;
}

.project-delivery-state {
    max-width: 220px;
    padding: 8px 12px;
    border: 1px solid rgba(60, 60, 67, 0.1);
    border-radius: 999px;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.62rem;
    font-weight: 650;
    text-align: center;
}

.project-delivery-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.project-delivery-step {
    min-width: 0;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e4e7ea;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}

.project-delivery-step > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #8d959c;
    background: #eef1f3;
    font-size: 0.6rem;
    font-weight: 720;
}

.project-delivery-step strong,
.project-delivery-step small {
    display: block;
}

.project-delivery-step strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-delivery-step small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.56rem;
}

.project-delivery-step.is-complete > span {
    color: #fff;
    background: #648f83;
}

.project-delivery-step.is-current {
    border-color: #9bb7af;
    box-shadow: 0 8px 22px rgba(57, 92, 83, 0.08);
}

.project-delivery-step.is-current > span {
    color: #fff;
    background: #242323;
}

.project-delivery-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.project-delivery-actions > p {
    max-width: 560px;
    margin-right: auto;
    color: var(--muted-strong);
    font-size: 0.68rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .project-delivery-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .project-delivery-flow {
        gap: 16px;
        padding: 18px;
        border-radius: 20px;
    }

    .project-delivery-flow-head {
        display: grid;
        gap: 12px;
    }

    .project-delivery-state {
        max-width: none;
        width: fit-content;
    }

    .project-delivery-steps {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .project-delivery-step {
        padding: 11px 12px;
    }

    .project-delivery-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .project-delivery-actions form,
    .project-delivery-actions button {
        width: 100%;
    }
}

/* Projects use real registered time only; destructive actions stay secondary. */
.delete-project-button {
    color: #b42318;
}

.delete-project-button:hover,
.delete-project-button:focus-visible {
    color: #8f1d14;
    background: #fff1ef;
}

.project-hours-total {
    min-height: 86px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-radius: 18px;
    background: #f5f6f7;
}

.project-hours-total strong {
    color: var(--ink);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 650;
    letter-spacing: -0.055em;
}

.project-hours-total span {
    padding-bottom: 5px;
    color: var(--muted-strong);
    font-size: 0.68rem;
}

.project-list-notice {
    margin-bottom: 18px;
}

@media (max-width: 600px) {
    .project-header-actions {
        align-items: flex-start;
    }

    .project-hours-total {
        min-height: 76px;
        padding: 16px;
    }
}

/* Tasks use a Wallet-like stack on precise pointers; touch layouts stay fully expanded. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
    .task-wallet-stack {
        display: block;
        position: relative;
        isolation: isolate;
        padding: 2px 0 4px;
    }

    .task-wallet-stack .task-card {
        min-height: 224px;
        transition:
            transform 180ms cubic-bezier(.2, .75, .25, 1),
            box-shadow 180ms ease,
            border-color 180ms ease;
    }

    .task-wallet-stack .task-card + .task-card {
        margin-top: -154px;
    }

    .task-wallet-stack .task-card:hover,
    .task-wallet-stack .task-card:focus-within {
        z-index: 30;
        transform: translateY(-8px) scale(1.012);
        border-color: rgba(60, 60, 67, 0.2);
        box-shadow: 0 22px 44px rgba(39, 49, 58, 0.18);
    }

    .task-wallet-stack .task-card.active {
        z-index: 20;
    }
}

/* Audioguide production flow: compact, stateful and intentionally not a Trello board. */
.audioguide-intake { --audioguide-stage: #6f7f89; --audioguide-soft: #edf1f3; --audioguide-card: rgba(76, 91, 100, 0.92); }
.audioguide-recording { --audioguide-stage: #b56c58; --audioguide-soft: #f7ece8; --audioguide-card: rgba(151, 77, 59, 0.92); }
.audioguide-editing { --audioguide-stage: #607f99; --audioguide-soft: #eaf0f5; --audioguide-card: rgba(66, 96, 122, 0.92); }
.audioguide-delivered { --audioguide-stage: #5f8a77; --audioguide-soft: #e9f2ed; --audioguide-card: rgba(66, 113, 92, 0.92); }
.audioguide-retakes { --audioguide-stage: #ad8240; --audioguide-soft: #f7f0e2; --audioguide-card: rgba(133, 91, 30, 0.92); }
.audioguide-retakes-delivered { --audioguide-stage: #68857d; --audioguide-soft: #eaf2ef; --audioguide-card: rgba(68, 106, 96, 0.92); }
.audioguide-closed { --audioguide-stage: #5f6062; --audioguide-soft: #eeeeef; --audioguide-card: rgba(70, 71, 73, 0.92); }

.status-tag.audioguide-intake,
.status-tag.audioguide-recording,
.status-tag.audioguide-editing,
.status-tag.audioguide-delivered,
.status-tag.audioguide-retakes,
.status-tag.audioguide-retakes-delivered,
.status-tag.audioguide-closed {
    color: var(--audioguide-stage);
    border-color: color-mix(in srgb, var(--audioguide-stage) 24%, #fff);
    background: var(--audioguide-soft);
}

.audioguide-flow-card {
    display: grid;
    gap: 22px;
    margin-bottom: 24px;
    padding: 24px;
    border-top: 4px solid var(--audioguide-stage);
    background: #fff;
}

.audioguide-flow-head,
.audioguide-stage-actions,
.audioguide-stage-actions form {
    display: flex;
    align-items: center;
}

.audioguide-flow-head {
    justify-content: space-between;
    gap: 20px;
}

.audioguide-flow-head h2 {
    margin: 3px 0 4px;
    font-size: 1.35rem;
    letter-spacing: -0.035em;
}

.audioguide-flow-head p,
.audioguide-stage-actions small {
    color: var(--muted-strong);
}

.audioguide-current-stage,
.audioguide-list-stage,
.project-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
}

.audioguide-current-stage {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--audioguide-stage);
    background: var(--audioguide-soft);
    font-size: 0.7rem;
    font-weight: 700;
}

.audioguide-current-stage i,
.audioguide-list-stage i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--audioguide-stage);
}

.audioguide-stage-line {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.audioguide-stage-node {
    min-width: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    color: var(--muted-strong);
    background: #fafafa;
}

.audioguide-stage-node > span {
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--muted-strong);
    background: #ececef;
    font-size: 0.62rem;
    font-weight: 700;
}

.audioguide-stage-node strong {
    overflow: hidden;
    font-size: 0.65rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audioguide-stage-node.is-complete,
.audioguide-stage-node.is-current {
    color: var(--audioguide-stage);
    border-color: color-mix(in srgb, var(--audioguide-stage) 24%, #fff);
    background: var(--audioguide-soft);
}

.audioguide-stage-node.is-complete > span,
.audioguide-stage-node.is-current > span {
    color: #fff;
    background: var(--audioguide-stage);
}

.audioguide-stage-node.is-current {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--audioguide-stage) 15%, transparent);
}

.audioguide-stage-actions {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}

.audioguide-stage-actions > div {
    display: grid;
    gap: 3px;
}

.audioguide-stage-actions form {
    gap: 9px;
}

.audioguide-stage-actions select {
    min-width: 190px;
}

.audioguide-list-stage {
    margin-top: 7px;
    color: var(--audioguide-stage);
    font-size: 0.66rem;
    font-weight: 700;
}

.project-source-chip {
    margin-top: 6px;
    color: #64717a;
    font-size: 0.64rem;
}

.project-list-item.audioguide-intake,
.project-list-item.audioguide-recording,
.project-list-item.audioguide-editing,
.project-list-item.audioguide-delivered,
.project-list-item.audioguide-retakes,
.project-list-item.audioguide-retakes-delivered,
.project-list-item.audioguide-closed {
    border-left: 3px solid var(--audioguide-stage);
}

.bitacora-row-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bitacora-row-actions form {
    margin: 0;
}

.bitacora-row-actions .text-button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 0.64rem;
}

.bitacora-row-actions .is-danger {
    color: #b04a3f;
}

.bitacora-edit-modal {
    max-width: 680px;
}

@media (max-width: 1050px) {
    .audioguide-stage-line {
        display: flex;
        overflow-x: auto;
        padding-bottom: 5px;
        scroll-snap-type: x proximity;
    }

    .audioguide-stage-node {
        flex: 0 0 154px;
        scroll-snap-align: start;
    }
}

@media (max-width: 680px) {
    .audioguide-flow-card {
        padding: 18px;
    }

    .audioguide-flow-head,
    .audioguide-stage-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .audioguide-stage-actions form,
    .audioguide-stage-actions select,
    .audioguide-stage-actions button {
        width: 100%;
    }
}

/* Personal dashboard widgets: persisted per user and touch-friendly. */
.dashboard-page-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-layout-controls,
.dashboard-layout-edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-layout-toggle[hidden],
.dashboard-layout-edit-actions[hidden] {
    display: none;
}

.dashboard-layout-controls {
    min-height: 38px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.dashboard-layout-toggle,
.dashboard-layout-text-button,
.dashboard-layout-save {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-radius: 999px;
    color: #3d3d40;
    background: #f5f5f7;
    font: inherit;
    font-size: 0.64rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.dashboard-layout-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
}

.dashboard-layout-toggle:hover,
.dashboard-layout-text-button:hover {
    border-color: rgba(60, 60, 67, 0.2);
    background: #ededf0;
}

.dashboard-layout-save {
    border-color: #242323;
    color: #fff;
    background: #242323;
}

.dashboard-layout-save:hover {
    transform: translateY(-1px);
    background: #3a3939;
}

.dashboard-layout-save:disabled {
    opacity: 0.55;
    cursor: wait;
}

.dashboard-layout-toggle-icon {
    width: 14px;
    display: grid;
    gap: 2px;
}

.dashboard-layout-toggle-icon i {
    height: 1px;
    border-radius: 999px;
    background: currentColor;
}

.dashboard-layout-status {
    width: 100%;
    min-height: 14px;
    color: #557667;
    font-size: 0.56rem;
    text-align: right;
}

.dashboard-layout-status:empty {
    display: none;
}

.dashboard-layout-status.is-error {
    color: #b42318;
}

.dashboard-widget-grid {
    width: min(1180px, 100%);
    margin-right: auto;
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 30px;
}

.dashboard-widget-grid > .dashboard-widget {
    min-width: 0;
    margin: 0;
    order: var(--dashboard-widget-order, 0);
    transition: opacity 160ms ease, outline-color 160ms ease, transform 160ms ease;
}

.dashboard-widget-wide {
    grid-column: 1 / -1;
}

.dashboard-widget-half {
    grid-column: span 1;
}

.dashboard-widget-editor {
    min-height: 42px;
    margin-bottom: 16px;
    padding: 6px 7px 6px 9px;
    display: none;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(60, 60, 67, 0.1);
    border-radius: 14px;
    background: #f5f5f7;
}

.dashboard-widget-grid.is-editing .dashboard-widget-editor {
    display: flex;
}

.dashboard-widget-grid.is-editing .dashboard-widget {
    outline: 2px solid rgba(65, 111, 151, 0.2);
    outline-offset: 7px;
    border-radius: 22px;
}

.dashboard-widget-grid.is-editing .dashboard-widget > :not(.dashboard-widget-editor) {
    pointer-events: none;
    user-select: none;
}

.dashboard-widget-grid.is-editing .dashboard-widget.is-dragging {
    opacity: 0.52;
    outline-color: rgba(65, 111, 151, 0.55);
    transform: scale(0.992);
}

.dashboard-widget-editor > strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.65rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-widget-editor > span {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.55rem;
    white-space: nowrap;
}

.dashboard-widget-grip {
    width: 30px;
    height: 30px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: repeat(2, 3px);
    place-content: center;
    gap: 3px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 9px;
    color: #6e6e73;
    background: #e8e8ed;
    cursor: grab;
}

.dashboard-widget-grip:active {
    cursor: grabbing;
}

.dashboard-widget-grip i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.dashboard-widget-move-buttons {
    display: flex;
    gap: 5px;
}

.dashboard-widget-move-buttons button {
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: #3d3d40;
    background: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.dashboard-widget-move-buttons button:hover {
    background: #e8e8ed;
}

.dashboard-widget-move-buttons button:disabled {
    color: #b7b7bc;
    background: transparent;
    cursor: default;
}

@media (max-width: 900px) {
    .dashboard-page-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-layout-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-layout-status {
        text-align: left;
    }

    .dashboard-widget-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dashboard-widget-wide,
    .dashboard-widget-half {
        grid-column: 1;
    }
}

@media (max-width: 600px) {
    .dashboard-layout-edit-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-layout-save {
        grid-column: 1 / -1;
    }

    .dashboard-layout-toggle,
    .dashboard-layout-text-button,
    .dashboard-layout-save {
        justify-content: center;
        width: 100%;
    }

    .dashboard-widget-grid {
        gap: 22px;
    }

    .dashboard-widget-grid.is-editing .dashboard-widget {
        outline-offset: 5px;
    }

    .dashboard-widget-editor {
        margin-bottom: 13px;
    }

    .dashboard-widget-editor > span {
        display: none;
    }
}