/*
 * Semantic theme bridge.
 * Raw palette values live in theme-tokens.css; components consume tokens here.
 */

html {
    color-scheme: light;
    background: var(--surface-page);
}

html[data-theme-mode="dark"] {
    color-scheme: dark;
}

body {
    background: var(--shell-canvas-color, var(--surface-page));
    background-image: var(--shell-canvas-bg, var(--app-bg));
    background-attachment: var(--app-bg-fixed, fixed);
    color: var(--text-primary);
    animation: none;
}

body.page-links-dashboard,
body.page-planner,
body.page-stats {
    background: var(--shell-canvas-color, var(--surface-page));
    background-image: none;
}

body.modal-open {
    overflow: hidden;
}

a {
    color: var(--accent);
}

::selection {
    background: var(--accent-soft);
    color: var(--text-primary);
}

*:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.u-hidden,
.u-file-input {
    display: none !important;
}

.u-layer-modal {
    z-index: 1200;
}

.u-layer-preview {
    z-index: 1150;
}

.u-modal-xs { max-width: 360px; }
.u-modal-sm { max-width: 400px; }
.u-modal-md { max-width: 420px; }
.u-modal-lg { max-width: 450px; }
.u-modal-xl { max-width: 480px; }
.u-modal-2xl { max-width: 500px; }
.u-modal-3xl { max-width: 560px; }

.u-center-muted,
.u-center-loading,
.u-center-note,
.u-center-summary,
.u-warning-note,
.u-success-message,
.u-danger-message,
.delete-page-warning {
    text-align: center;
}

.u-center-muted,
.u-center-loading,
.u-center-note {
    color: var(--text-secondary);
}

.u-center-loading { padding: 20px; }
.u-center-loading-lg { padding: 40px; }
.u-center-note {
    margin-bottom: 20px;
    font-size: 14px;
}
.u-center-summary {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 16px;
}
.u-warning-note {
    color: var(--warning);
    margin-top: 20px;
    font-size: 12px;
}
.delete-page-warning {
    color: var(--warning);
    font-size: 13px;
    margin-top: 12px;
}
.u-success-message {
    color: var(--success);
    font-size: 14px;
}
.u-danger-message {
    color: var(--danger);
}

.u-form-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.u-input-row,
.u-inline-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.u-input-row input {
    flex: 1;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
}

.u-copy-button { padding: 10px 16px; }
.u-field-label-small {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 12px;
}
.u-spacer-top { margin-top: 20px; }
.u-spacer-bottom { margin-bottom: 20px; }
.u-spacer-bottom-lg { margin-bottom: 24px; }
.auth-error-spaced { margin-bottom: 16px; }
.u-flex-button { flex: 1; }
.u-modal-actions { gap: 12px; }
.u-scroll-preview {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 24px;
}
.u-grid-loading {
    grid-column: 1 / -1;
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
}

.btn.is-success {
    background: var(--success);
    color: var(--accent-text);
}

.btn-danger,
.btn.is-danger {
    background: var(--button-danger-bg);
    color: var(--button-danger-text);
}

.folder-links-grid {
    grid-template-columns: repeat(var(--folder-visible-cols, 4), 112px);
}

.folder-links-grid[data-visible-cols="1"] { --folder-visible-cols: 1; }
.folder-links-grid[data-visible-cols="2"] { --folder-visible-cols: 2; }
.folder-links-grid[data-visible-cols="3"] { --folder-visible-cols: 3; }
.folder-links-grid[data-visible-cols="4"] { --folder-visible-cols: 4; }
.folder-links-grid[data-visible-cols="5"] { --folder-visible-cols: 5; }
.folder-links-grid[data-visible-cols="6"] { --folder-visible-cols: 6; }
.folder-links-grid[data-visible-cols="7"] { --folder-visible-cols: 7; }
.shortcut[role="link"] { cursor: pointer; }

:is(
    .app-topbar,
    .top-tools .info-btn,
    .date-btn,
    .theme-mode-switch,
    .page-switcher-pill,
    .top-add-btn,
    .top-notification-btn,
    .search-bar,
    .planner-page-back,
    .planner-page-new,
    .planner-page-filter-tabs,
    .planner-page-filter-btn,
    .planner-page-tools input,
    .shortcut-icon,
    .folder-modal-content,
    .command-palette-content,
    .context-menu,
    .user-dropdown-menu,
    .modal-content,
    .calendar-picker,
    .planner-time-picker
) {
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

:is(
    .top-tools .info-btn,
    .date-btn,
    .theme-mode-switch,
    .page-switcher-pill,
    .top-add-btn,
    .top-notification-btn,
    .planner-page-back,
    .planner-page-new,
    .planner-page-filter-tabs,
    .planner-page-filter-btn,
    .dashboard-planner-see-all,
    .modal-close,
    .folder-modal-close,
    .account-page-delete,
    .planner-task-delete,
    .planner-page-detail-head button,
    .planner-page-detail-actions button,
    .planner-page-timeline-entry button,
    .calendar-nav-btn,
    .calendar-picker-year-btn,
    .planner-time-actions button,
    .planner-time-preview button
) {
    background: var(--surface-control);
    border-color: var(--border-control);
    color: var(--text-primary);
}

:is(
    .top-tools .info-btn,
    .date-btn,
    .theme-mode-switch button,
    .page-switcher-pill,
    .top-add-btn,
    .top-notification-btn,
    .planner-page-back,
    .planner-page-new,
    .planner-page-filter-btn,
    .dashboard-planner-see-all,
    .modal-close,
    .folder-modal-close,
    .account-page-delete:not(.disabled),
    .planner-task-delete,
    .planner-page-detail-head button,
    .planner-page-detail-actions button,
    .planner-page-timeline-entry button,
    .calendar-nav-btn,
    .calendar-picker-year-btn,
    .planner-time-actions button,
    .planner-time-preview button
):hover {
    background: var(--surface-control-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

:is(
    .theme-mode-thumb,
    .page-switcher-pill.active,
    .planner-page-filter-btn.active,
    .dashboard-planner-scope-btn.active,
    .planner-scope-btn.active,
    .calendar-day.selected,
    .calendar-month-option.selected
) {
    background: var(--button-primary-bg);
    border-color: var(--accent);
    color: var(--accent-text);
    box-shadow: var(--shadow-sm);
}

:is(.context-menu, .user-dropdown-menu, .command-palette-content, .calendar-picker, .planner-time-picker) {
    background: var(--popover-bg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-popover);
}

:is(.context-menu-item, .dropdown-item, .quick-action-btn, .command-palette-item) {
    color: var(--text-secondary);
}

:is(.context-menu-item, .dropdown-item, .quick-action-btn, .command-palette-item):hover,
:is(.command-palette-item.active) {
    background: var(--surface-control-hover);
    color: var(--text-primary);
}

:is(.dropdown-divider, .context-menu-divider, .planner-task-timeline::before, .planner-page-timeline-list::before) {
    background: var(--border-subtle);
}

:is(
    .search-bar,
    .modal-content input,
    .modal-content select,
    .modal-content textarea,
    .planner-task-modal-content input,
    .planner-task-modal-content select:not(.planner-task-schedule-control),
    .planner-task-modal-content textarea,
    .planner-page-tools input,
    .planner-page-tools select,
    .planner-page-timeline-entry textarea,
    .command-palette-content input,
    .folder-title-input
) {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    box-shadow: none;
}

:is(
    .search-bar,
    .modal-content input,
    .modal-content select,
    .modal-content textarea,
    .planner-task-modal-content input,
    .planner-task-modal-content select:not(.planner-task-schedule-control),
    .planner-task-modal-content textarea,
    .planner-page-tools input,
    .planner-page-tools select,
    .planner-page-timeline-entry textarea,
    .command-palette-content input,
    .folder-title-input
):focus {
    background: var(--input-bg-focus);
    border-color: var(--border-focus);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

:is(
    .search-bar,
    .modal-content input,
    .modal-content textarea,
    .planner-task-modal-content input,
    .planner-task-modal-content textarea,
    .planner-page-tools input,
    .planner-page-timeline-entry textarea,
    .command-palette-content input
)::placeholder {
    color: var(--input-placeholder);
}

.modal {
    background: var(--overlay-backdrop);
}

:is(.modal-content, .folder-modal-content, .manual-modal-content, .command-palette-content) {
    background: var(--modal-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

:is(
    .modal-content h2,
    .calendar-header h2,
    .planner-panel-header h2,
    .planner-task-modal-content h2,
    .planner-page-title h1,
    .planner-page-list-head h2,
    .planner-page-detail h2,
    .planner-page-timeline h2,
    .account-section-title,
    .shortcut-label,
    .folder-modal-header h2,
    .editable-folder-title,
    .planner-task-main strong,
    .dashboard-planner-task-main strong,
    .planner-page-task-main strong,
    .planner-page-detail-grid strong,
    .planner-page-detail-title-field strong,
    .planner-timeline-body strong,
    .account-page-name,
    .account-info-value
) {
    color: var(--text-primary);
}

:is(
    .btn,
    button.btn,
    .planner-new-task-btn,
    .planner-page-new,
    .calendar-today-btn,
    .planner-time-actions button.primary,
    .planner-page-detail-actions button:not(.danger),
    .planner-page-timeline-entry button
) {
    background: var(--button-secondary-bg);
    border: 1px solid var(--border-control);
    color: var(--button-secondary-text);
    box-shadow: none;
}

:is(
    .btn,
    button.btn,
    .planner-new-task-btn,
    .planner-page-new,
    .calendar-today-btn,
    .planner-time-actions button,
    .planner-page-detail-actions button,
    .planner-page-timeline-entry button
):hover {
    background: var(--button-secondary-bg-hover);
}

:is(
    .btn-primary,
    button.btn-primary,
    .planner-new-task-btn,
    .planner-time-actions button.primary,
    .planner-page-detail-actions button:not(.danger),
    .planner-page-timeline-entry button
) {
    background: var(--button-primary-bg);
    border-color: var(--accent);
    color: var(--button-primary-text);
    box-shadow: 0 8px 18px var(--accent-soft);
}

:is(
    .btn-primary,
    button.btn-primary,
    .planner-new-task-btn,
    .planner-time-actions button.primary,
    .planner-page-detail-actions button:not(.danger),
    .planner-page-timeline-entry button
):hover {
    background: var(--button-primary-bg-hover);
}

:is(.btn-secondary, button.btn-secondary, .app-action-btn) {
    background: var(--button-secondary-bg);
    border-color: var(--border-control);
    color: var(--button-secondary-text);
}

:is(.app-action-btn):hover {
    background: var(--button-secondary-bg-hover);
    border-color: var(--border-control);
}

:is(.app-action-btn-primary) {
    background: var(--button-primary-bg);
    border-color: var(--border-focus);
    color: var(--accent-text);
}

:is(.app-action-btn-primary):hover {
    background: var(--button-primary-bg-hover);
    border-color: var(--accent);
}

:is(.btn-danger, button.btn-danger, .app-action-btn-danger, .dropdown-item.logout:hover, .context-menu-item.delete:hover, .planner-page-detail-actions button.danger) {
    background: var(--button-danger-bg);
    border-color: var(--danger);
    color: var(--button-danger-text);
}

:is(.btn-danger, button.btn-danger, .app-action-btn-danger, .planner-page-detail-actions button.danger):hover {
    background: var(--button-danger-bg-hover);
}

:is(.auth-error, .context-menu-item.delete, .dropdown-item.logout, .planner-task-delete, .planner-page-detail-actions button.danger) {
    color: var(--text-danger);
}

:is(.auth-success, .share-success) {
    color: var(--text-success);
}

:is(
    .auth-footer,
    .auth-header p,
    .form-hint,
    .dashboard-module-title p,
    .planner-panel-header p,
    .planner-calendar-hint,
    .calendar-today-text,
    .planner-page-title p,
    .planner-page-list-head p,
    .planner-page-detail-empty p,
    .planner-page-timeline-empty p,
    .planner-page-task-main span,
    .planner-page-task-main em,
    .planner-page-log-count,
    .dashboard-planner-task-meta,
    .dashboard-planner-task-main em,
    .account-page-stats,
    .account-empty-text,
    .account-danger-text
) {
    color: var(--text-secondary);
}

:is(
    .dashboard-module-icon,
    .search-icon,
    .calendar-weekdays span,
    .calendar-week-number,
    .calendar-day.outside-month,
    .planner-empty,
    .dashboard-planner-empty
) {
    color: var(--text-muted);
}

:is(
    .planner-calendar-panel,
    .planner-side-panel,
    .planner-task-view-grid div,
    .planner-page-detail-grid div,
    .icon-upload-area,
    .icon-picker-grid,
    .share-preview-link,
    .calendar-holidays li
) {
    background: var(--surface-panel);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

:is(.shortcut-icon, .folder-shortcut .shortcut-icon) {
    background: var(--shortcut-bg);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

:is(.shortcut:hover .shortcut-icon, .folder-shortcut:hover .shortcut-icon) {
    background: var(--surface-control-hover);
}

:is(.folder-badge, .top-notification-btn strong, .planner-open-count) {
    background: var(--accent-soft);
    color: var(--accent);
}

:is(.planner-scope-tabs) {
    background: var(--surface-control);
}

:is(.planner-task, .planner-page-task) {
    background: var(--planner-task-bg);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

:is(.planner-task, .planner-page-task):hover,
:is(.planner-page-task.active, .planner-page-task.active:hover) {
    background: var(--surface-control-hover);
}

:is(.planner-task-check, .planner-page-task-check) {
    border-color: var(--border-strong);
}

:is(.planner-task.done .planner-task-check, .planner-page-task.done .planner-page-task-check) {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 4px var(--surface-modal);
}

:is(.planner-task, .planner-page-task, .planner-task-urgency).urgency-overdue {
    background: var(--surface-danger);
    color: var(--text-danger);
}

:is(.planner-task, .planner-page-task, .planner-task-urgency).urgency-soon {
    background: var(--surface-warning);
    color: var(--text-warning);
}

:is(.planner-task, .planner-page-task).priority-high {
    border-left-color: var(--danger);
}

:is(.planner-task, .planner-page-task).priority-low {
    border-left-color: var(--success);
}

:is(.planner-page-detail-kicker, .planner-page-detail-kicker.is-done, .dashboard-planner-log-count, .planner-page-log-count) {
    background: var(--accent-soft);
    color: var(--accent);
}

:is(.calendar-day, .calendar-month-option, .planner-time-preview button) {
    background: var(--surface-control);
    border-color: transparent;
    color: var(--text-primary);
}

:is(.calendar-day, .calendar-month-option, .planner-time-preview button):hover {
    background: var(--surface-control-hover);
}

.calendar-day.today {
    border-color: var(--accent);
    color: var(--text-primary);
}

.calendar-day.has-tasks:not(.selected) { border-color: var(--border-focus); }
.calendar-day.holiday { color: var(--text-danger); }
.calendar-day.weekend { color: var(--text-secondary); }

.planner-timeline-dot {
    background: var(--surface-modal);
    border-color: var(--border-subtle);
}

.account-danger-zone {
    background: var(--surface-danger);
}

.icon-option {
    background: var(--surface-control);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.icon-option:hover,
.icon-option.active {
    background: var(--surface-control-hover);
    border-color: var(--accent);
}

.manual-modal-content iframe {
    background: var(--surface-page);
}

html[data-theme-mode="light"] .google-logo path,
:root:not([data-theme-mode]) .google-logo path {
    filter: none;
}

/* Product surfaces: shared language across overlays, cards, forms and controls. */
:is(.modal-content, .folder-modal-content, .manual-modal-content, .command-palette-content) {
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--surface-modal), var(--surface-elevated));
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

:is(.context-menu, .user-dropdown-menu, .theme-user-menu, .calendar-picker, .planner-time-picker) {
    border-radius: var(--radius-md);
    background: var(--popover-bg);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-popover);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

:is(.dropdown-item, .context-menu-item, .quick-action-btn, .command-palette-item, .theme-user-menu button) {
    border-radius: var(--radius-xs);
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

:is(.btn, button.btn, .modal-close, .folder-modal-close, .account-page-delete, .planner-page-detail-head button, .planner-page-detail-actions button, .planner-page-timeline-entry button) {
    border-radius: var(--radius-xs);
    font-weight: 750;
}

:is(.btn, button.btn, .quick-action-btn, .planner-page-detail-head button, .planner-page-detail-actions button, .planner-page-timeline-entry button):focus-visible,
:is(.dropdown-item, .context-menu-item, .theme-user-menu button, .page-switcher-pill, .top-add-btn, .top-notification-btn):focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-soft);
}

:is(.share-item, .share-preview-link, .icon-upload-area, .icon-picker-grid, .planner-page-detail-grid div) {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    box-shadow: inset 0 1px 0 var(--surface-control-hover);
}

:is(.share-item, .icon-picker-item, .quick-action-btn):hover {
    background: var(--surface-control-hover);
    border-color: var(--border-strong);
}

:is(.modal-content input, .modal-content select, .modal-content textarea, .planner-task-modal-content input, .planner-task-modal-content select:not(.planner-task-schedule-control), .planner-task-modal-content textarea, .planner-page-tools input, .planner-page-tools select, .command-palette-content input, .folder-title-input) {
    border-radius: var(--radius-xs);
}

.planner-task-modal-content :is(
    input:not([type="hidden"]),
    select:not(.planner-task-schedule-control),
    textarea
),
.planner-task-schedule-grid .planner-task-schedule-control {
    border-radius: var(--radius-sm);
}

/* Dashboard planner component skin. */
.dashboard-planner {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.dashboard-planner-tabs {
    background: var(--surface-control);
    border-color: var(--border-subtle);
}

.planner-page-filter-tabs {
    background: var(--surface-control);
    border-color: var(--border-subtle);
}

.planner-page-filter-tabs .planner-page-filter-btn.active,
.dashboard-planner-tabs .dashboard-planner-scope-btn.active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.planner-page-tools select,
.planner-page-filter-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--input-border);
    background:
        linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%) calc(100% - 17px) 50% / 5px 5px no-repeat,
        linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%) calc(100% - 12px) 50% / 5px 5px no-repeat,
        var(--input-bg);
    color: var(--text-primary);
    box-shadow: none;
    cursor: pointer;
}

.planner-page-tools select {
    border-radius: 10px;
    padding-right: 32px;
}

.planner-page-filter-select {
    border-radius: var(--radius-full);
}

.planner-page-tools select:hover,
.planner-page-filter-select:hover {
    border-color: var(--border-strong);
    background:
        linear-gradient(45deg, transparent 50%, var(--text-primary) 50%) calc(100% - 17px) 50% / 5px 5px no-repeat,
        linear-gradient(135deg, var(--text-primary) 50%, transparent 50%) calc(100% - 12px) 50% / 5px 5px no-repeat,
        var(--surface-control-hover);
}

.planner-page-tools select:focus,
.planner-page-filter-select:focus {
    border-color: var(--border-focus);
    background:
        linear-gradient(45deg, transparent 50%, var(--text-primary) 50%) calc(100% - 17px) 50% / 5px 5px no-repeat,
        linear-gradient(135deg, var(--text-primary) 50%, transparent 50%) calc(100% - 12px) 50% / 5px 5px no-repeat,
        var(--input-bg-focus);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.planner-page-tools select option,
.planner-page-filter-select option {
    background: var(--surface-popover);
    color: var(--text-primary);
}

@media (forced-colors: active) {
    :is(.btn, .modal-content, .context-menu, .theme-mode-switch, .page-switcher-pill, .search-bar) {
        forced-color-adjust: auto;
    }
}

/* Product chrome and visible surfaces. */
body {
    text-rendering: optimizeLegibility;
}

:is(button, input, select, textarea, a) {
    -webkit-tap-highlight-color: transparent;
}

:is(button, input, select, textarea, a):focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}


.top-tools {
    top: 25px;
    left: 30px;
    gap: 12px;
}

.search-wrapper {
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    box-shadow: var(--shadow-sm);
}

.search-bar {
    color: var(--text-primary);
    font-size: 15px;
}

:is(.top-add-btn, .planner-page-back, .planner-page-new, .dashboard-planner-see-all, .btn, button.btn, .app-action-btn, .planner-new-task-btn) {
    min-height: var(--control-height);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-control);
    box-shadow: none;
    font-weight: 780;
    letter-spacing: 0;
}

:is(.top-add-btn, .planner-page-back, .dashboard-planner-see-all, .btn, button.btn, .app-action-btn) {
    background: var(--surface-control);
    color: var(--text-primary);
}

:is(.planner-page-new, .planner-new-task-btn, .app-action-btn-primary, button.btn-primary, .btn-primary) {
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

:is(.app-action-btn-danger, .btn-danger, button.btn-danger, .planner-task-delete-current) {
    border-color: color-mix(in srgb, var(--danger) 58%, transparent);
    background: var(--button-danger-bg);
    color: var(--button-danger-text);
}

:is(.top-add-btn, .planner-page-back, .dashboard-planner-see-all, .btn, button.btn, .app-action-btn, .planner-page-new, .planner-new-task-btn):hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    background: var(--surface-control-hover);
}

:is(.planner-page-new, .planner-new-task-btn, .app-action-btn-primary, button.btn-primary, .btn-primary):hover {
    background: var(--button-primary-bg-hover);
}

:is(.app-action-btn-danger, .btn-danger, button.btn-danger, .planner-task-delete-current):hover {
    background: var(--button-danger-bg-hover);
}

:is(input, select, textarea, .planner-date-trigger, .planner-time-trigger, .date-btn) {
    border-radius: var(--radius-sm);
}

:is(.modal-content input, .modal-content select, .modal-content textarea,
    .planner-task-modal-content input, .planner-task-modal-content select:not(.planner-task-schedule-control), .planner-task-modal-content textarea,
    .planner-page-tools input, .planner-page-tools select, .planner-page-filter-select,
    .command-palette-content input, .folder-title-input) {
    min-height: var(--control-height);
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--text-primary);
    box-shadow: none;
}

:is(.modal-content input, .modal-content select, .modal-content textarea,
    .planner-task-modal-content input, .planner-task-modal-content select:not(.planner-task-schedule-control), .planner-task-modal-content textarea,
    .planner-page-tools input, .planner-page-tools select, .planner-page-filter-select,
    .command-palette-content input, .folder-title-input):focus {
    border-color: var(--border-focus);
    background-color: var(--input-bg-focus);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

:is(.modal-content, .folder-modal-content, .manual-modal-content, .command-palette-content, .planner-task-modal-content, .planner-confirm-content) {
    border-radius: var(--radius-lg);
    background: var(--surface-modal);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

.modal {
    background: var(--overlay-backdrop);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

:is(.modal-close, .folder-modal-close) {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--surface-control);
    color: var(--text-secondary);
}

:is(.modal-close, .folder-modal-close):hover {
    background: var(--surface-control-hover);
    color: var(--text-primary);
}

:is(.context-menu, .user-dropdown-menu, .theme-user-menu, .calendar-picker, .planner-time-picker, .planner-date-picker) {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--surface-popover);
    box-shadow: var(--shadow-popover);
}

.planner-page-detail,
.planner-page-timeline {
    border-left: 1px solid var(--border-subtle);
}

.planner-page-title > span {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 18px;
}

.planner-page-title h1 {
    font-size: 27px;
    font-weight: 820;
    line-height: 1.05;
}

.planner-page-title p {
    color: var(--text-secondary);
    font-size: 13px;
}

.shortcuts-grid {
    width: 100%;
}

.grid-cell {
    min-width: 0;
}

.shortcut-icon {
    border-radius: var(--radius-lg);
    background: var(--shortcut-bg);
    box-shadow: var(--shadow-sm);
}

.shortcut:hover .shortcut-icon,
.shortcut:focus-visible .shortcut-icon {
    box-shadow: var(--shadow-md);
}

.folder-badge,
.planner-open-count,
.planner-page-log-count,
.dashboard-planner-log-count {
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent);
}

:is(.planner-page-filter-tabs, .planner-scope-tabs, .theme-mode-switch) {
    border-radius: var(--radius-sm);
    background: var(--surface-control);
    border: 1px solid var(--border-control);
    box-shadow: none;
}

:is(.dashboard-planner-tabs-thumb, .planner-page-filter-thumb, .theme-mode-thumb) {
    border-radius: calc(var(--radius-sm) - 2px);
    box-shadow: none;
}

:is(.dashboard-planner-scope-btn, .planner-page-filter-btn, .planner-scope-btn, .theme-mode-switch button) {
    border-radius: calc(var(--radius-sm) - 2px);
}

.planner-page-workbar {
    margin-bottom: 12px;
}

.planner-page-list-head {
    margin-bottom: 14px;
}

.planner-page-tools,
.planner-page-filter-row {
    margin-bottom: 12px;
}

:is(.planner-page-task, .dashboard-planner-task, .planner-task) {
    border-radius: var(--radius-sm);
    background: var(--planner-task-bg);
    box-shadow: none;
}

:is(.planner-page-task, .dashboard-planner-task, .planner-task):hover,
.planner-page-task.active {
    background: var(--surface-control-hover);
    box-shadow: none;
}

:is(.planner-page-empty, .dashboard-planner-empty, .planner-empty) {
    border-radius: var(--radius-sm);
    background: var(--surface-control);
    border: 1px dashed var(--border-subtle);
}

.planner-page-detail-grid div,
.planner-task-view-grid div,
.planner-task-meta div {
    border-radius: var(--radius-sm);
    background: var(--surface-panel);
}

.planner-page-timeline-entry,
.planner-task-log-entry {
    background: transparent;
}

.planner-page-timeline-entry textarea,
.planner-task-log-entry textarea {
    background: var(--input-bg);
    border-color: var(--input-border);
}

.manual-modal-content iframe {
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* Density rules shared by product surfaces. */
.grid-cell:hover,
.folder-grid-cell:hover {
    background: color-mix(in srgb, var(--accent-soft) 54%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
    transform: none;
}

.shortcut:hover,
.shortcut:hover .shortcut-icon {
    transform: translateY(-1px);
}

.shortcut-label {
    max-width: 100%;
    margin-top: 7px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 760;
    line-height: 1.18;
}

.shortcut-more-hint {
    border-radius: var(--radius-sm);
}

.planner-page-filter-row {
    grid-template-columns: minmax(0, 1fr) 116px;
}

.planner-page-filter-tabs {
    gap: 2px;
    padding: 3px;
}

.planner-page-filter-thumb {
    top: 3px;
    left: 3px;
    width: calc((100% - 6px) / 5);
    height: calc(100% - 6px);
}

.planner-page-filter-btn {
    height: 32px;
    font-size: 12px;
}

.planner-page-filter-select {
    height: 40px;
    border-radius: var(--radius-sm);
}

.planner-page-task {
    min-height: 54px;
    padding: 10px 11px;
}

.planner-page-task.active,
.planner-page-task.active:hover,
.planner-page-task:hover {
    transform: none;
}

.planner-page-detail-head {
    margin-bottom: 14px;
}

.planner-page-detail-grid {
    gap: 8px;
}

.planner-page-detail-grid div {
    padding: 10px 11px;
}

.planner-page-detail-title-field {
    min-height: 96px;
}

.planner-page-detail-meta span,
.planner-page-detail-grid span,
.planner-task-view-grid span {
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 830;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.planner-page-detail-meta strong,
.planner-page-detail-grid strong,
.planner-task-view-grid strong {
    font-size: 13px;
    font-weight: 760;
    line-height: 1.35;
}

.planner-page-timeline-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 0;
    border-bottom: 1px solid var(--border-subtle);
}

.planner-page-timeline-entry textarea {
    min-height: 60px;
    margin: 0;
    resize: vertical;
}

.planner-page-timeline-entry button {
    height: 38px;
    margin-bottom: 0;
    white-space: nowrap;
}

.planner-page-timeline-list {
    padding-right: 2px;
}

.planner-timeline-item {
    gap: 10px;
}

.planner-timeline-dot {
    width: 22px;
    height: 22px;
}

.folder-select-trigger,
.folder-select-menu {
    border-radius: var(--radius-sm);
}

.folder-select-menu {
    background: var(--surface-popover);
    box-shadow: var(--shadow-popover);
}

.folder-select-option {
    border-radius: calc(var(--radius-sm) - 2px);
}

.icon-upload-area,
.icon-picker-grid,
.found-icon-grid {
    border-radius: var(--radius-sm);
    background: var(--surface-panel);
}

.command-palette-content {
    border-radius: var(--radius-lg);
}

/* Desktop product shell. */
body {
    --app-content-max: 1900px;
    --app-content-gutter: 28px;
    --app-shell-gap: 24px;
    --app-topbar-height: 78px;
    --app-top-offset: calc(var(--app-topbar-height) + 14px);
    --app-bottom-offset: 22px;
    --dashboard-side-col-width: clamp(280px, 22vw, 360px);
    --dashboard-sidebar-width: var(--dashboard-side-col-width);
    --dashboard-page-rail-width: calc(var(--dashboard-side-col-width) - var(--app-shell-gap));
    /* Fallback before shortcut-grid container tokens resolve. */
    --dashboard-icon-size: clamp(34px, min(6.2vh, 7.5vw), 56px);
}

.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    min-height: var(--app-topbar-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: var(--app-topbar-height);
    align-items: center;
    column-gap: 26px;
    padding-inline: var(--app-content-gutter);
    background: var(--surface-topbar);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38), 0 10px 28px rgba(35, 45, 63, 0.08);
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
}

html[data-theme-mode="dark"] .app-topbar,
html[data-theme-mode="user"] .app-topbar {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 30px rgba(0, 0, 0, 0.28);
}

.app-topbar-left {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-shell-mark {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.app-shell-logo {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 17px;
}

.app-shell-copy {
    display: grid;
    gap: 1px;
}

.app-shell-copy strong {
    font-size: 15px;
    font-weight: 840;
    line-height: 1.1;
}

.app-shell-copy small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 720;
    line-height: 1.15;
}

.app-topbar-search {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    margin: 0;
    justify-self: center;
    display: grid;
    grid-template-columns: minmax(0, 660px) auto;
    align-items: center;
    gap: 12px;
}

.app-topbar-search .search-wrapper {
    width: clamp(280px, 42vw, 660px);
    min-width: 0;
}

.topbar-user-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.topbar-info-btn {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    font-size: 19px;
    z-index: auto;
}

.theme-mode-switch,
.page-links-dashboard .date-btn,
.page-planner .date-btn {
    height: 42px;
}

.top-tools .info-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

.search-wrapper {
    height: 46px;
}

.user-dropdown-btn,
.planner-page-user {
    min-height: 42px;
    padding-inline: 8px;
    border-radius: var(--radius-sm);
}

.dashboard-shell {
    width: var(--app-content-width);
    max-width: 100%;
    margin: 0 auto;
    height: 100vh;
    display: grid;
    grid-template-columns: var(--dashboard-page-rail-width) minmax(0, 1fr) var(--dashboard-sidebar-width);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--app-shell-gap);
    padding: var(--app-top-offset) var(--app-content-gutter) var(--app-bottom-offset);
    overflow: hidden;
}

body.page-stats {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.container.stats-page-container {
    max-width: none;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    display: block;
    overflow: visible;
}

.app-topbar-spacer {
    height: var(--app-top-offset);
    pointer-events: none;
}

.stats-page-main {
    width: var(--app-content-width);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--app-content-gutter) var(--app-bottom-offset);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-switcher-bar,
.dashboard-module-card,
.dashboard-todo-col {
    min-height: 0;
}

.page-switcher-bar {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 16px 0 8px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.page-switcher-bar::before {
    content: none;
}

.page-switcher-bar::after {
    content: none;
}

.page-switcher-bar.has-left-overflow::before,
.page-switcher-bar.has-right-overflow::after {
    opacity: 1;
}

.page-switcher-bar.has-overflow .page-switcher-scroll {
    padding: 0 2px 0 0;
}

.page-switcher-scroll {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 2px 0 0;
    scrollbar-width: thin;
}

.dashboard-column-head {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard-column-title {
    min-width: 0;
}

.dashboard-column-title h1,
.dashboard-column-title h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
}

.dashboard-column-title p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.page-switcher-add {
    align-self: center;
    margin: 0;
    white-space: nowrap;
}

.page-switcher-pill {
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 46px;
    justify-content: flex-start;
    padding-inline: 12px;
    gap: 10px;
    text-align: left;
    overflow: hidden;
}

.page-switcher-pill.active {
    box-shadow: none;
}

.page-switcher-icon {
    width: 24px;
    min-width: 24px;
    flex: 0 0 24px;
    text-align: center;
}

.page-switcher-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-module-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-module-add {
    justify-self: end;
    align-self: center;
    min-width: 142px;
    height: 42px;
    background: var(--button-primary-bg);
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    color: var(--button-primary-text);
    white-space: nowrap;
}

.dashboard-module-head {
    margin-bottom: 12px;
    opacity: 0.94;
}

.dashboard-module-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dashboard-module-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--border-strong);
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

.dashboard-module-title h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 740;
    line-height: 1.1;
}

.dashboard-module-title p {
    margin: 2px 0 0;
    color: var(--border-strong);
    font-size: 12px;
    line-height: 1.35;
}

.dashboard-module-card .shortcuts-grid {
    --shortcut-grid-gap-min: clamp(12px, 1.05cqw, 20px);
    --shortcut-grid-cols: 8;
    --shortcut-grid-rows: 6;
    --shortcut-cell-min: 56px;
    --shortcut-cell-max: 126px;
    --shortcut-cell-size: clamp(
        var(--shortcut-cell-min),
        min(
            calc((100cqw - (var(--shortcut-grid-cols) - 1) * var(--shortcut-grid-gap-min)) / var(--shortcut-grid-cols)),
            calc((100vh - var(--desktop-titlebar-height, 52px) - var(--desktop-statusbar-height, 28px) - 128px) / var(--shortcut-grid-rows))
        ),
        var(--shortcut-cell-max)
    );
    --shortcut-icon-size: clamp(
        36px,
        calc(var(--shortcut-cell-size) * 0.58),
        72px
    );
    --shortcut-gap-x: var(--shortcut-grid-gap-min);
    --shortcut-gap-y: var(--shortcut-grid-gap-min);
    --dashboard-icon-size: var(--shortcut-icon-size);
    display: grid;
    grid-template-columns: repeat(var(--shortcut-grid-cols), var(--shortcut-cell-size));
    grid-template-rows: repeat(var(--shortcut-grid-rows), var(--shortcut-cell-size));
    column-gap: var(--shortcut-gap-x);
    row-gap: var(--shortcut-gap-y);
    align-content: start;
    justify-content: start;
    aspect-ratio: auto;
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 8px;
}

.dashboard-module-card .grid-cell {
    width: var(--shortcut-cell-size);
    height: var(--shortcut-cell-size);
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
}

.dashboard-module-card .grid-cell-empty::before {
    width: clamp(26px, calc(var(--shortcut-cell-size) * 0.36), 34px);
    height: clamp(26px, calc(var(--shortcut-cell-size) * 0.36), 34px);
    font-size: clamp(18px, calc(var(--shortcut-cell-size) * 0.28), 24px);
}

.dashboard-module-card .shortcut {
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
}

.dashboard-module-card .shortcut:hover,
.dashboard-module-card .shortcut:focus-visible {
    background: var(--surface-control);
    border-color: var(--border-subtle);
}

.dashboard-module-card .shortcut-icon,
.dashboard-module-card .folder-shortcut .shortcut-icon {
    width: var(--shortcut-icon-size);
    height: var(--shortcut-icon-size);
}

.dashboard-module-card .shortcut-label {
    max-width: var(--shortcut-cell-size);
}

.dashboard-todo-col {
    min-height: 0;
}

.planner-page-main {
    grid-template-columns: 0.98fr 1.02fr 0.98fr;
    padding-top: var(--app-top-offset);
}

.planner-desktop-main .planner-page-main-embedded {
    padding-top: 0;
}

.planner-page-workbar {
    align-items: center;
    margin-bottom: 6px;
}

.planner-page-back {
    align-self: center;
}

.planner-page-title {
    align-items: center;
}

.planner-page-list-panel,
.planner-page-detail,
.planner-page-timeline {
    padding-top: 10px;
}

.planner-page-detail,
.planner-page-timeline {
    padding-left: 24px;
}

.planner-page-list-head {
    align-items: center;
}

.planner-page-list-head h2,
.planner-page-detail h2,
.planner-page-timeline h2 {
    font-size: 21px;
}

.planner-page-tools {
    grid-template-columns: minmax(0, 1fr) 150px;
}

.planner-page-filter-row {
    grid-template-columns: minmax(0, 1fr);
}

.planner-page-filter-select {
    width: 150px;
    justify-self: end;
}

.planner-page-list {
    gap: 7px;
}

.planner-page-task {
    border-left-width: 0;
    border-color: var(--border-subtle);
}

.planner-page-task.priority-high {
    box-shadow: inset 3px 0 0 var(--danger);
}

.planner-page-task.priority-low {
    box-shadow: inset 3px 0 0 var(--success);
}

.planner-page-task.active {
    box-shadow: inset 3px 0 0 var(--accent);
}

.planner-page-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planner-page-detail-title-field {
    min-height: 116px;
}

.planner-page-timeline-log h3 {
    display: none;
}

.modal-content:not(.planner-modal-content):not(.planner-task-modal-content):not(.folder-modal-content):not(.manual-modal-content) {
    max-width: 430px;
}

.planner-modal-content {
    width: min(860px, calc(100vw - 32px));
    max-width: min(860px, calc(100vw - 32px));
    height: min(620px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    padding: 22px;
    overflow: hidden;
}

.planner-modal-content .modal-close {
    top: 14px;
    right: 14px;
}

.add-choice-modal {
    max-width: 380px;
}

.add-choice-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.icon-picker-current {
    align-items: stretch;
}

.icon-picker-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.account-modal-content,
.u-modal-3xl {
    max-width: 620px;
}

.folder-modal-content {
    max-width: min(860px, calc(100vw - 72px));
    padding: 24px;
}

.command-palette-modal {
    padding-top: 86px;
}

.command-palette-content {
    width: min(720px, calc(100vw - 48px));
}

.auth-container {
    max-width: 420px;
}

.auth-container-wide {
    max-width: 560px;
}