*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

button, input, [role="button"], .control-btn, .sidebar-btn, .setting-btn,
.lang-option-btn, .drawer-close, .ritual-quick-btn, .task-check, .task-delete, .task-text-btn,
.toggle-switch, .test-btn, .j2m-btn, .j2m-done-btn, .tag-chip-button {
    touch-action: manipulation;
}

.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;
}

.skip-to-timer-link {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: calc(var(--z-drawer) + 20);
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    transform: translateY(-160%);
    transition: transform var(--speed) var(--ease), background var(--speed) var(--ease);
}

.skip-to-timer-link:focus-visible {
    transform: translateY(0);
}

:is(
    button,
    [role="button"],
    input,
    select,
    textarea,
    .sidebar-btn,
    .control-btn,
    .setting-btn,
    .lang-option-btn,
    .drawer-close,
    .ritual-quick-btn,
    .task-check,
    .task-drag-handle,
    .task-delete,
    .task-text-btn,
    .test-btn,
    .tag-chip-button,
    .tag-menu-option
):focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--focus-ring-shadow);
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('./assets/fonts/Vazir.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('./assets/fonts/Vazir-‌Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sigma';
    src: url('./assets/fonts/Sigma-Style1-WOFF2.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Sigma2';
    src: url('./assets/fonts/Sigma-Style2-WOFF2.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --drawer-font-scale: 1;

    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --surface: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --glass: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --text-muted: #606070;
    --accent: #7c6fe0;
    --accent-rgb: 124, 111, 224;
    --accent-glow: rgba(124, 111, 224, 0.3);
    --danger: #e06c75;
    --success: #98c379;
    --break-accent: #56b6c2;
    --break-button-shadow: #367c86;
    --break-glow: rgba(86, 182, 194, 0.3);
    --points-bg: rgba(255, 255, 255, 0.08);
    --points-text: #e0e0e0;
    --ritual-progress: 0;
    --ritual-ring-rgb: 78, 165, 255;
    --ritual-journey-rgb: 58, 70, 128;
    --ring-track-color: rgba(255, 255, 255, 0.12);
    --focus-ring-color: rgba(160, 189, 255, 0.95);
    --focus-ring-shadow: rgba(79, 70, 229, 0.32);
    --ambient-line: rgba(255, 255, 255, 0.055);
    --ambient-glow-a: rgba(78, 165, 255, 0.16);
    --ambient-glow-b: rgba(248, 184, 90, 0.1);
    --timer-panel-bg: rgba(20, 23, 38, 0.72);
    --timer-panel-highlight: rgba(255, 255, 255, 0.035);
    --timer-panel-shadow: rgba(0, 0, 0, 0.18);

    --sidebar-width: 56px;
    --topbar-height: 52px;
    --drawer-width: 330px;
    --radius: 16px;
    --radius-sm: 10px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --speed: 0.3s;

    --z-bg: -1;
    --z-stage: 1;
    --z-shell: 10;
    --z-focus-overlay: 40;
    --z-focus-stage: 55;
    --z-overlay: 50;
    --z-drawer: 60;
}

html[data-theme='light'] {
    color-scheme: light;
    --bg-primary: #eef2f7;
    --bg-secondary: #f8fafc;
    --surface: rgba(15, 23, 42, 0.05);
    --surface-hover: rgba(15, 23, 42, 0.09);
    --glass: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(15, 23, 42, 0.14);
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --accent: #4f46e5;
    --accent-rgb: 79, 70, 229;
    --accent-glow: rgba(79, 70, 229, 0.25);
    --danger: #dc2626;
    --success: #16a34a;
    --break-accent: #0f766e;
    --break-button-shadow: #09504a;
    --break-glow: rgba(15, 118, 110, 0.25);
    --points-bg: rgba(255, 255, 255, 0.9);
    --points-text: #1f2937;
    --ritual-ring-rgb: 79, 70, 229;
    --ritual-journey-rgb: 152, 173, 220;
    --ring-track-color: rgba(71, 85, 105, 0.42);
    --focus-ring-color: rgba(79, 70, 229, 0.95);
    --focus-ring-shadow: rgba(79, 70, 229, 0.24);
    --ambient-line: rgba(79, 70, 229, 0.07);
    --ambient-glow-a: rgba(79, 70, 229, 0.13);
    --ambient-glow-b: rgba(15, 118, 110, 0.1);
    --timer-panel-bg: rgba(255, 255, 255, 0.72);
    --timer-panel-highlight: rgba(255, 255, 255, 0.36);
    --timer-panel-shadow: rgba(15, 23, 42, 0.1);
}

html[data-theme='dark'] {
    color-scheme: dark;
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --surface: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --glass: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --text-muted: #606070;
    --accent: #7c6fe0;
    --accent-glow: rgba(124, 111, 224, 0.3);
    --danger: #e06c75;
    --success: #98c379;
    --break-accent: #56b6c2;
    --break-glow: rgba(86, 182, 194, 0.3);
    --points-bg: rgba(255, 255, 255, 0.08);
    --points-text: #e0e0e0;
    --ritual-ring-rgb: 78, 165, 255;
    --ritual-journey-rgb: 58, 70, 128;
    --focus-ring-color: rgba(152, 202, 255, 0.95);
    --focus-ring-shadow: rgba(124, 111, 224, 0.35);
    --ambient-line: rgba(255, 255, 255, 0.055);
    --ambient-glow-a: rgba(78, 165, 255, 0.16);
    --ambient-glow-b: rgba(248, 184, 90, 0.1);
    --timer-panel-bg: rgba(20, 23, 38, 0.72);
    --timer-panel-highlight: rgba(255, 255, 255, 0.035);
    --timer-panel-shadow: rgba(0, 0, 0, 0.18);
}


html, body {
    height: 100%;
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
}

html {
    color-scheme: dark light;
}

.bg-animation {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(145deg, var(--bg-primary), var(--bg-secondary)),
        linear-gradient(90deg, transparent, rgba(var(--ritual-ring-rgb), 0.05), transparent);
    opacity: 1;
    transition: filter 1.2s var(--ease), opacity 1.2s var(--ease);
}

.bg-animation::before,
.bg-animation::after {
    content: "";
    position: absolute;
    inset: -18%;
    transition: transform 1.2s var(--ease), opacity 1.2s var(--ease);
}

.bg-animation::before {
    background:
        linear-gradient(115deg, transparent 0 30%, var(--ambient-glow-a) 48%, transparent 68%),
        linear-gradient(245deg, transparent 0 36%, var(--ambient-glow-b) 54%, transparent 74%);
    opacity: 0.78;
    transform: translate3d(-1.4%, 0.8%, 0);
}

.bg-animation::after {
    background:
        repeating-linear-gradient(118deg, transparent 0 22px, var(--ambient-line) 23px, transparent 24px),
        linear-gradient(180deg, transparent 0 62%, rgba(var(--ritual-ring-rgb), 0.04) 100%);
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    opacity: 0.58;
    transform: translate3d(0.8%, 0, 0);
}

html[data-theme='light'] .bg-animation {
    opacity: 0.82;
}

#app-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar stage";
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
}

html #app-logo{
    font-size: 1.6rem;
    color: var(--accent);
}

html[lang="fa"] #app-logo {
    font-family: 'Sigma2', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html[lang="en"] #app-logo {
    font-family: 'Sigma', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.sidebar {
    grid-area: sidebar;
    background: var(--surface);
    border-right: 1px solid var(--glass-border);
    z-index: var(--z-shell);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 14px;
    gap: 20px;
}

.logo-icon {
    font-size: 1.3rem;
    color: var(--accent);
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: none;
    color: var(--text-secondary);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--speed) var(--ease),
                background var(--speed) var(--ease);
}

.sidebar-btn:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.sidebar-btn.is-active {
    color: var(--text-primary);
    background: var(--surface-hover);
    border-color: rgba(var(--ritual-ring-rgb), 0.34);
    box-shadow: inset 0 0 0 1px rgba(var(--ritual-ring-rgb), 0.22);
}

.topbar {
    grid-area: topbar;
    background: var(--surface);
    border-bottom: 1px solid var(--glass-border);
    z-index: var(--z-shell);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.topbar-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: color var(--speed) var(--ease),
                background var(--speed) var(--ease);
}

.topbar-btn:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.sidebar-theme-btn {
    margin-top: auto;
    margin-bottom: 14px;
    border: 1px solid var(--glass-border);
    background: var(--surface);
}

body.focus-ritual-active .bg-animation {
    filter: brightness(0.8) saturate(0.9);
}

html[data-theme='light'] body.focus-ritual-active .bg-animation {
    filter: brightness(0.82) saturate(0.86);
}

.sidebar,
.topbar,
.drawer,
.drawer-overlay,
#route-indicator,
.session-type,
.timer-controls,
.session-dots,
.current-task-display,
.timer-tag-picker {
    transition: opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease);
}

.language-switch {
    display: inline-flex;
    gap: 4px;
    padding: 2px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--surface-hover);
}

.lang-option-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1;
    padding: 8px 10px;
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    transition: color var(--speed) var(--ease),
                background var(--speed) var(--ease);
}

.lang-option-btn:hover {
    color: var(--text-primary);
}

.lang-option-btn.active {
    color: var(--text-primary);
    background: rgba(124, 111, 224, 0.2);
}

#stage {
    grid-area: stage;
    z-index: var(--z-stage);
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-height: 0;
}

#settings-page,
#stats-page {
    grid-area: stage;
    display: none;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-secondary);
}

.settings-page-header,
.stats-page-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--glass-border);
    min-height: 56px;
}

.settings-page-header h2,
.stats-page-header h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 600;
    max-width: calc(100% - 160px);
}

.settings-page-body,
.stats-page-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px 24px;
}

.settings-content,
.stats-content {
    width: min(100%, 860px);
    margin: 0 auto;
}

.settings-back-btn {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    position: relative;
    z-index: 1;
}

body.settings-view #stage {
    display: none;
}

body.settings-view #app-shell,
body.stats-view #app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
    grid-template-areas:
        "topbar"
        "stage";
}

body.settings-view #sidebar,
body.stats-view #sidebar {
    display: none;
}

body.settings-view #settings-page {
    display: flex;
    flex-direction: column;
}

body.stats-view #stage,
body.stats-view #settings-page {
    display: none;
}

body.stats-view #stats-page {
    display: flex;
    flex-direction: column;
}

body.settings-view #tasks-toggle,
body.settings-view #history-toggle,
body.stats-view #tasks-toggle,
body.stats-view #history-toggle {
    display: none;
}

#focus-core {
    width: 100%;
    max-width: 460px;
    position: relative;
    transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
    isolation: isolate;
}

#focus-core::before {
    display: none;
}

.timer-panel {
    position: relative;
    overflow: visible;
    background:
        linear-gradient(180deg, var(--timer-panel-highlight), transparent 36%),
        var(--timer-panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 44px 32px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    box-shadow:
        0 16px 42px var(--timer-panel-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: background 1s var(--ease),
                border-color 1s var(--ease),
                box-shadow 1s var(--ease),
                transform 1.2s var(--ease);
}

.timer-panel::before {
    display: none;
}

.ritual-timer-stage {
    position: relative;
    width: 360px;
    height: 360px;
    display: grid;
    place-items: center;
}

.orbital-progress-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg) scale(1);
    opacity: 0.28;
    transition: opacity 0.8s var(--ease), transform 1.2s var(--ease);
}

.ring-track,
.ring-progress {
    fill: none;
    stroke-width: 10;
}

.ring-track {
    stroke: var(--ring-track-color);
    opacity: 0.72;
}

html[data-theme='light'] .orbital-progress-ring {
    opacity: 0.42;
}

.ring-progress {
    stroke: rgb(var(--ritual-ring-rgb));
    stroke-linecap: round;
    stroke-dasharray: 816.81;
    stroke-dashoffset: 816.81;
    transition: stroke-dashoffset 0.85s linear, stroke 0.9s var(--ease);
    filter: drop-shadow(0 0 6px rgba(var(--ritual-ring-rgb), 0.38));
}

.ritual-ripple,
.ritual-points-anchor {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ritual-ripple {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--ritual-ring-rgb), 0.7);
    opacity: 0;
}

.ritual-points-anchor {
    width: 1px;
    height: 1px;
}

.ritual-quick-controls {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.ritual-quick-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.08);
    transition: background var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                transform 0.15s var(--ease);
}

.ritual-quick-btn:hover {
    background: var(--surface-hover);
    border-color: rgba(var(--ritual-ring-rgb), 0.38);
    box-shadow:
        0 8px 18px rgba(var(--accent-rgb), 0.16),
        0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.ritual-quick-btn:active {
    transform: translateY(0) scale(0.96);
}

.session-type {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-secondary);
    font-weight: 500;
    border: 1px solid var(--glass-border);
    background: var(--surface);
    border-radius: 999px;
    padding: 7px 12px;
    line-height: 1;
    min-width: 96px;
    text-align: center;
    transition: color var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                background var(--speed) var(--ease);
}

html[lang="fa"] .session-type {
    font-size: 0.96rem;
    text-transform: none;
    letter-spacing: 0;
}

.session-type-clickable {
    cursor: pointer;
    user-select: none;
    transition: opacity var(--speed) var(--ease), 
                filter var(--speed) var(--ease), 
                transform var(--speed) var(--ease),
                background var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.session-type-clickable:hover {
    filter: brightness(1.15);
}

.session-type-locked {
    pointer-events: none;
}


.timer-display {
    font-size: 5rem;
    font-family: 'Vazirmatn', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    letter-spacing: 4px;
    line-height: 1;
    min-width: 5.35ch;
    direction: ltr;
    unicode-bidi: isolate;
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: text-shadow 0.9s var(--ease), transform 0.3s var(--ease);
    text-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.12);
}

.timer-display .colon {
    margin: 0 2px;
}

.timer-controls {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.timer-control-item {
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.timer-control-text {
    font-size: 0.63rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    line-height: 1;
    min-height: 1em;
    user-select: none;
}

html[lang="fa"] .timer-control-text {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
}

.timer-control-primary .timer-control-text {
    color: var(--text-secondary);
}

.control-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.08);
    transition: background var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                color var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                transform 0.15s var(--ease);
}

.control-btn:hover {
    background: var(--surface-hover);
    border-color: rgba(var(--ritual-ring-rgb), 0.38);
    box-shadow:
        0 8px 18px rgba(var(--accent-rgb), 0.16),
        0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.control-btn:active {
    transform: translateY(0) scale(0.96);
}

.control-btn.brown-noise-active i {
    color: var(--accent);
}

.control-btn.brown-noise-active {
    border-color: rgba(var(--ritual-ring-rgb), 0.48);
    box-shadow:
        0 8px 18px rgba(var(--ritual-ring-rgb), 0.16),
        inset 0 0 0 1px rgba(var(--ritual-ring-rgb), 0.18);
}

html[data-theme='light'] .control-btn.brown-noise-active {
    background: var(--accent);
    color: white;
}

html[data-theme='light'] .control-btn.brown-noise-active i {
    color: white;
}

.primary-btn {
    width: 58px;
    height: 58px;
    font-size: 1.15rem;
    border-color: rgba(255, 255, 255, 0.18);
    background: var(--accent);
    color: #fff;
    box-shadow:
        0 10px 22px rgba(var(--accent-rgb), 0.22),
        0 1px 0 rgba(255, 255, 255, 0.16);
}

.primary-btn:hover {
    transform: translateY(-2px) scale(1.03);
}

.timer-control-primary .control-btn:active {
    transform: translateY(0) scale(0.98);
}

.session-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}

.dot.completed {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}

.dot.active {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}

.current-task-display {
    font-size: 0.82rem;
    color: var(--text-muted);
    min-height: 1.2em;
}

body.break-mode .timer-panel {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(86, 182, 194, 0.12);
}

body.break-mode .session-type {
    color: var(--break-accent);
    border-color: rgba(15, 118, 110, 0.36);
    background: rgba(15, 118, 110, 0.12);
}

body.break-mode .primary-btn {
    background: var(--break-accent);
    border-color: var(--break-accent);
}

body.break-mode .dot.completed,
body.break-mode .dot.active {
    background: var(--break-accent);
    box-shadow: 0 0 6px var(--break-glow);
}

.focus-ritual-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-focus-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s var(--ease);
}

.focus-ritual-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(2, 2, 6, 0.96), rgba(12, 16, 28, 0.9) 48%, rgba(2, 2, 6, 0.96)),
        linear-gradient(115deg, transparent 18%, rgba(var(--ritual-ring-rgb), 0.1), transparent 78%);
    transition: background 1s linear, transform 1.2s var(--ease);
    transform: scale(1.05);
}

html[data-theme='light'] .focus-ritual-overlay::before {
    background:
        linear-gradient(135deg, rgba(244, 247, 253, 0.94), rgba(233, 238, 247, 0.86) 48%, rgba(244, 247, 253, 0.94)),
        linear-gradient(115deg, transparent 18%, rgba(var(--ritual-ring-rgb), 0.08), transparent 78%);
}

body.focus-ritual-active .focus-ritual-overlay {
    opacity: 1;
}

body.focus-ritual-active .focus-ritual-overlay::before {
    transform: scale(1);
}

body.focus-ritual-active #stage {
    z-index: var(--z-focus-stage);
}

body.focus-ritual-active #focus-core {
    transform: translateY(-3vh) scale(1.03);
}

body.focus-ritual-active .timer-panel {
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transform: translateY(-2px);
}

body.focus-ritual-active .orbital-progress-ring {
    opacity: 1;
    transform: rotate(-90deg) scale(1);
}

body.focus-ritual-active .ring-track {
    opacity: 0.42;
}

body.focus-ritual-active .timer-display {
    color: var(--text-primary);
    text-shadow: 0 0 22px rgba(var(--ritual-ring-rgb), 0.18);
}

body.focus-ritual-active .ritual-quick-controls {
    bottom: -48px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

body.j2m-mode.j2m-running .ritual-quick-controls {
    opacity: 0;
    pointer-events: none;
}

body.focus-ritual-active .ring-progress {
    animation: ritual-breathe 4s ease-in-out infinite;
}

body.focus-ritual-active .timer-display {
    animation: ritual-text-breathe 4s ease-in-out infinite;
}

body.focus-ritual-active #focus-core::before {
    opacity: 0.2;
}

body.focus-ritual-active .timer-panel::before {
    opacity: 0;
}

body.focus-ritual-active .control-btn,
body.focus-ritual-active .ritual-quick-btn {
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.08);
}

body.focus-ritual-active .sidebar,
body.focus-ritual-active .topbar,
body.focus-ritual-active #route-indicator,
body.focus-ritual-active .session-type,
body.focus-ritual-active .timer-controls,
body.focus-ritual-active .session-dots,
body.focus-ritual-active .timer-tag-picker,
body.focus-ritual-active .current-task-display {
    opacity: 0;
    filter: blur(16px);
    pointer-events: none;
    transform: translateY(6px) scale(0.98);
    transition: opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease);
}

body.focus-ritual-completing .ring-progress.is-bursting {
    animation: ritual-flash 0.65s ease-out;
}

.ritual-ripple.run {
    animation: ritual-ripple 0.92s cubic-bezier(0.12, 0.72, 0.24, 1) forwards;
}

@keyframes ritual-breathe {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(var(--ritual-ring-rgb), 0.34));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(var(--ritual-ring-rgb), 0.58));
    }
}

/* Drag-to-adjust duration */
body.dragging-duration {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

body.dragging-duration .ritual-timer-stage {
    cursor: grabbing;
}

body.dragging-duration .orbital-progress-ring {
    opacity: 1;
    transform: rotate(-90deg) scale(1);
}

body.dragging-duration .ring-track {
    opacity: 0.48;
    stroke-width: 12;
}

body.dragging-duration .ring-progress {
    filter: drop-shadow(0 0 14px rgba(var(--ritual-ring-rgb), 0.64));
    stroke-width: 12;
    transition: none;
}

body.dragging-duration .timer-controls,
body.dragging-duration .session-dots,
body.dragging-duration .timer-tag-picker,
body.dragging-duration .current-task-display {
    pointer-events: none;
    opacity: 0.5;
}

.ritual-timer-stage {
    touch-action: none;
}

body.drag-enabled .ritual-timer-stage:hover {
    cursor: grab;
}

body.drag-enabled .ritual-timer-stage:hover .orbital-progress-ring {
    opacity: 0.52;
    transition: opacity 0.3s var(--ease);
}

/* Drag handle indicator */
.drag-handle {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgb(var(--ritual-ring-rgb));
    border: 4px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.32),
        0 0 0 6px rgba(var(--ritual-ring-rgb), 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    will-change: left, top;
    z-index: 10;
}

@media (max-width: 768px) {
    .drag-handle {
        width: 18px;
        height: 18px;
        border-width: 2.5px;
    }
}

@media (max-width: 480px) {
    .drag-handle {
        width: 16px;
        height: 16px;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(var(--ritual-ring-rgb), 0.2);
    }
}

body.drag-enabled .ritual-timer-stage:hover .drag-handle {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.1);
}

@media (max-width: 768px) {
    body.drag-enabled .drag-handle {
        opacity: 0.58;
    }

    body.drag-enabled .ritual-timer-stage:hover .drag-handle {
        opacity: 0.72;
    }
}

body.dragging-duration .drag-handle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.24);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.38),
        0 0 0 8px rgba(var(--ritual-ring-rgb), 0.26);
}

/* Cursor trail effect */
body.dragging-duration .drag-handle::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ritual-ring-rgb), 0.4) 0%, transparent 70%);
    animation: drag-pulse 1s ease-in-out infinite;
}


@keyframes drag-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

@keyframes ritual-text-breathe {
    0%, 100% {
        text-shadow: 0 0 0 rgba(var(--ritual-ring-rgb), 0);
    }
    50% {
        text-shadow: 0 0 18px rgba(var(--ritual-ring-rgb), 0.22);
    }
}

.timer-start-cue .timer-panel {
    transform: scale(1.02);
}

.timer-start-cue .timer-display {
    transform: scale(1.01);
}

@keyframes ritual-flash {
    0% {
        stroke-width: 8;
        filter: drop-shadow(0 0 8px rgba(var(--ritual-ring-rgb), 0.45));
    }
    30% {
        stroke-width: 11;
        filter: drop-shadow(0 0 24px rgba(255, 233, 190, 0.98));
    }
    100% {
        stroke-width: 8;
        filter: drop-shadow(0 0 10px rgba(var(--ritual-ring-rgb), 0.52));
    }
}

@keyframes ritual-ripple {
    0% {
        opacity: 0.84;
        transform: translate(-50%, -50%) scale(0.25);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .focus-ritual-overlay,
    .focus-ritual-overlay::before,
    #focus-core,
    .timer-panel,
    .orbital-progress-ring,
    .sidebar,
    .topbar,
    .drawer,
    .drawer-overlay,
    #route-indicator,
    .session-type,
    .timer-controls,
    .session-dots,
    .current-task-display,
    .ring-progress,
    .timer-display,
    .ritual-ripple,
    .ritual-quick-controls,
    .ritual-quick-btn,
    .ep-popup,
    .skip-to-timer-link {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .timer-panel,
    #focus-core,
    .timer-display,
    .control-btn,
    .ritual-quick-btn,
    .orbital-progress-ring,
    .ring-progress,
    .focus-ritual-overlay,
    .focus-ritual-overlay::before,
    .sidebar,
    .topbar,
    .drawer,
    .drawer-overlay,
    #route-indicator,
    .session-type,
    .timer-controls,
    .session-dots,
    .current-task-display {
        transform: none !important;
    }

    body.focus-ritual-active .ring-progress,
    body.focus-ritual-active .timer-display,
    body.dragging-duration .drag-handle::after,
    .timer-start-cue .timer-panel,
    .timer-start-cue .timer-display {
        animation: none !important;
    }

    .orbital-progress-ring,
    body.focus-ritual-active .orbital-progress-ring,
    body.dragging-duration .orbital-progress-ring {
        transform: rotate(-90deg) scale(1) !important;
    }

    .bg-animation::before,
    .bg-animation::after {
        transform: none !important;
    }
}

@media (min-width: 768px) {
    #focus-core {
        max-width: 480px;
    }

    .timer-panel {
        padding: 52px 36px 36px;
    }

    .timer-display {
        font-size: 5.5rem;
    }

    .timer-controls {
        gap: 14px;
    }
}

@media (min-width: 1200px) {
    #focus-core {
        max-width: 520px;
    }

    #focus-core::before {
        inset: -34px -48px -38px;
    }

    .timer-panel {
        padding: 52px 40px 40px;
    }

    .ritual-timer-stage {
        width: 380px;
        height: 380px;
    }

    .timer-display {
        font-size: 6rem;
    }
}

@media (min-width: 1600px) {
    #focus-core {
        max-width: 560px;
    }

    .timer-display {
        font-size: 6.25rem;
    }

    .ritual-timer-stage {
        width: 400px;
        height: 400px;
    }
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed) var(--ease);
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--drawer-width);
    background: var(--bg-secondary);
    border-left: 1px solid var(--glass-border);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    transition: transform var(--speed) var(--ease);
}

.drawer-right {
    right: 0;
    transform: translateX(100%);
}

.drawer-right.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.drawer-header h2 {
    font-size: calc(0.95rem * var(--drawer-font-scale));
    font-weight: 600;
}

.drawer-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: color var(--speed) var(--ease),
                background var(--speed) var(--ease);
}

.drawer-close:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}


.settings-section {
    margin-bottom: 1rem;
}

.settings-card {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 12px 14px;
}

.settings-section-title {
    font-size: calc(0.75rem * var(--drawer-font-scale));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--glass-border);
}


.settings-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--glass-border);
}

.settings-group[hidden] {
    display: none !important;
}

.settings-group:last-child {
    border-bottom: none;
}

.settings-group > label {
    font-size: calc(0.88rem * var(--drawer-font-scale));
    color: var(--text-secondary);
}

.setting-control {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.setting-select {
    min-width: 120px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: calc(0.82rem * var(--drawer-font-scale));
}

.setting-select:focus {
    outline: none;
    border-color: var(--accent);
}

html[dir="rtl"] .setting-select {
    text-align: right;
}

.test-notification-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.test-notification-btn:active {
    transform: scale(0.96);
}

.setting-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.setting-btn:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
}

.setting-control > span {
    min-width: 26px;
    text-align: center;
    font-size: calc(0.95rem * var(--drawer-font-scale));
    font-weight: 600;
}

#completionReminderDelay1Display,
#completionReminderDelay2Display {
    min-width: 38px;
}

.test-btn {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: calc(0.85rem * var(--drawer-font-scale));
    cursor: pointer;
    transition: background var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.test-btn:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    transition: background var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: transform var(--speed) var(--ease),
                background var(--speed) var(--ease);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent);
    border-color: var(--accent);
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--focus-ring-shadow);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
    background: #fff;
}

.task-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.task-input-group input {
    flex: 1;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: calc(0.88rem * var(--drawer-font-scale));
    outline: none;
    transition: border-color var(--speed) var(--ease);
    direction: ltr;
    text-align: left;
}

.task-input-group input::placeholder { color: var(--text-muted); }
.task-input-group input:focus { border-color: var(--accent); }

.task-input-group button {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--accent);
    color: #fff;
    font-size: calc(0.95rem * var(--drawer-font-scale));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow var(--speed) var(--ease);
}

.task-input-group button:hover {
    box-shadow: 0 0 14px var(--accent-glow);
}

.task-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 100px;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.task-item:hover {
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--glass-border));
}

.task-item.active {
    border-color: var(--accent);
    background: rgba(124, 111, 224, 0.07);
}

.task-check {
    width: 18px;
    height: 18px;
    padding: 0;
    appearance: none;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    cursor: pointer;
    transition: background var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.task-text-btn {
    flex: 1;
    border: none;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    appearance: none;
    text-align: left;
    min-width: 0;
    padding: 0.2rem 0.38rem;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: background var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}

.task-text-btn:hover,
.task-text-btn:focus-visible {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-hover));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.task-item.editing {
    border-color: var(--accent);
}

.task-item.editing .task-text-btn {
    cursor: text;
}

.task-item.completed .task-check {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.task-check i {
    width: 0.62rem;
    height: 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.56rem;
    line-height: 1;
    transform: translateY(-0.2px);
}

.task-text {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: calc(0.88rem * var(--drawer-font-scale));
    cursor: pointer;
    color: var(--text-primary);
    transition: color var(--speed) var(--ease);
    text-align: left;
    overflow-wrap: anywhere;
}

.task-edit-hint {
    color: var(--text-muted);
    flex: 0 0 auto;
    font-size: 0.64rem;
    opacity: 0.38;
    transition: color var(--speed) var(--ease),
                opacity var(--speed) var(--ease);
}

.task-text-btn:hover .task-edit-hint,
.task-text-btn:focus-visible .task-edit-hint {
    color: var(--accent);
    opacity: 0.8;
}

.task-item.completed .task-text {
    text-decoration: line-through;
    color: var(--text-muted);
}

.task-edit-input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: var(--surface-hover);
    color: var(--text-primary);
    font: inherit;
    font-size: calc(0.88rem * var(--drawer-font-scale));
    line-height: 1.3;
    padding: 0.22rem 0.35rem;
    outline: none;
    text-align: left;
}

.task-edit-input:focus {
    border-color: var(--accent);
}

.task-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: calc(0.75rem * var(--drawer-font-scale));
    opacity: 0.55;
    transition: opacity var(--speed) var(--ease),
                color var(--speed) var(--ease);
}

.task-item:hover .task-delete { opacity: 1; }
.task-delete:hover { color: var(--danger); }

/* Task Drag Handle */
.task-drag-handle {
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: grab;
    opacity: 0;
    transition: opacity var(--speed) var(--ease);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    touch-action: none;
}

.task-item:hover .task-drag-handle {
    opacity: 0.6;
}

.task-drag-handle:hover {
    opacity: 1 !important;
}

body.dragging-task .task-drag-handle {
    cursor: grabbing;
}

/* Dragging State */
body.dragging-task {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.task-item.dragging {
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    min-height: 0;
}

/* Placeholder */
.task-drag-placeholder {
    background: transparent !important;
    border: 2px dashed var(--accent) !important;
    opacity: 0.6;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.placeholder-content {
    flex: 1;
    height: calc(100% - 4px);
    margin: 2px;
    background: var(--accent);
    opacity: 0.1;
    border-radius: 4px;
}

.task-item {
    transition: transform 0.2s var(--ease),
                background var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

body.dragging-task .task-item:not(.dragging):not(.task-drag-placeholder) {
    transition: all 0.2s var(--ease);
}

/* Floating Clone */
.task-drag-clone {
    opacity: 0.98;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.2);
    transition: none !important;
    cursor: grabbing;
    border-color: var(--accent) !important;
    transform: scale(1.05);
}

.history-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.summary-card {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}

.summary-value {
    font-size: calc(1.5rem * var(--drawer-font-scale));
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.summary-label {
    font-size: calc(0.7rem * var(--drawer-font-scale));
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.history-date-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-date-label {
    font-size: calc(0.75rem * var(--drawer-font-scale));
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 0.5rem;
    margin-bottom: 0.25rem;
}

.history-session {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.history-session:hover {
    background: var(--surface-hover);
}
.history-session.is-tag-updating {
    opacity: 0.6;
    pointer-events: none;
}

.history-session.is-tag-updating .history-session-tag {
    cursor: wait;
    opacity: 0.7;
}


.history-session-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: calc(1rem * var(--drawer-font-scale));
    flex-shrink: 0;
}

.history-session-icon.focus {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent);
}

.history-session-icon.short-break {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.history-session-icon.long-break {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.history-session-icon.two-minute {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.history-session-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.history-session-type {
    font-size: calc(0.85rem * var(--drawer-font-scale));
    font-weight: 500;
    color: var(--text-primary);
}

.history-session-time {
    font-size: calc(0.75rem * var(--drawer-font-scale));
    color: var(--text-muted);
}

.history-session-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.history-session-ep {
    font-size: calc(0.8rem * var(--drawer-font-scale));
    font-weight: 600;
    color: var(--accent);
}

.history-session-badge {
    font-size: calc(0.7rem * var(--drawer-font-scale));
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.history-reflection-indicator {
    font-size: calc(0.9rem * var(--drawer-font-scale));
    color: var(--accent);
    opacity: 0.6;
}

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

#tagPickerMenu {
    top: var(--tag-picker-menu-top, calc(100% + 4px));
    right: auto;
    inset-inline-start: auto;
    inset-inline-end: auto;
    left: var(--tag-picker-menu-left, 50%);
    bottom: auto;
    width: min(210px, calc(100vw - 24px));
    max-height: var(--tag-picker-menu-max-height, min(210px, calc(100vh - 120px)));
    gap: 0.28rem;
    padding: 0.45rem;
    transform: none;
}

#tagPickerMenu .tag-menu-option {
    gap: 0.42rem;
    min-height: 36px;
    padding: 0.42rem 0.5rem;
    font-size: calc(0.72rem * var(--drawer-font-scale));
}

#tagPickerMenu .tag-icon {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.72rem;
}

#tagPickerMenu .tag-dot {
    width: 0.48rem;
    height: 0.48rem;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-color) 16%, transparent);
}

#tagPickerMenu .tag-menu-description {
    font-size: 0.64rem;
}

.history-empty p {
    font-size: calc(0.9rem * var(--drawer-font-scale));
    max-width: 240px;
}

.tag-manager-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: calc(0.9rem * var(--drawer-font-scale));
}

.timer-tag-picker {
    position: relative;
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    margin-top: -0.35rem;
}

.timer-tag-picker .tag-chip {
    gap: 0.34rem;
    max-width: min(220px, 86vw);
    min-height: 34px;
    padding: 0.32rem 0.58rem;
    font-size: calc(0.72rem * var(--drawer-font-scale));
}

.timer-tag-picker #activeTagLabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-chip {
    --tag-color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    min-height: 44px;
    padding: 0.45rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--tag-color) 44%, var(--glass-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tag-color) 13%, var(--surface));
    color: var(--text-primary);
    font-size: calc(0.78rem * var(--drawer-font-scale));
    line-height: 1;
}

.tag-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-chip-button {
    cursor: pointer;
    font: inherit;
    transition: transform 0.15s var(--ease),
                background var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.tag-chip-button:hover {
    background: color-mix(in srgb, var(--tag-color) 20%, var(--surface-hover));
    transform: translateY(-1px);
}

.tag-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--tag-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tag-color) 18%, transparent);
    flex: 0 0 auto;
}

.timer-tag-picker .tag-dot {
    width: 0.48rem;
    height: 0.48rem;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-color) 16%, transparent);
}

.tag-icon {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tag-color) 14%, var(--surface));
    color: var(--tag-color);
    font-size: 0.72em;
    flex: 0 0 auto;
}

.timer-tag-picker .tag-icon {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.76rem;
}

.tag-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: min(260px, calc(100vw - 48px));
    max-height: 310px;
    overflow-y: auto;
    z-index: calc(var(--z-drawer) + 20);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.tag-menu[hidden] {
    display: none;
}

.tag-menu-option {
    --tag-color: var(--accent);
    width: 100%;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    text-align: start;
}

.tag-menu-option .tag-label,
.tag-menu-label-wrap {
    flex: 1;
}

.tag-menu-label-wrap {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.tag-menu-description {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-selected-icon {
    margin-inline-start: auto;
    color: var(--tag-color);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.tag-menu-option:hover,
.tag-menu-option[aria-selected="true"] {
    background: color-mix(in srgb, var(--tag-color) 12%, var(--surface-hover));
    border-color: color-mix(in srgb, var(--tag-color) 28%, var(--glass-border));
}

.tag-menu-option[aria-selected="true"] .tag-selected-icon {
    opacity: 1;
    transform: scale(1);
}

.stats-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stats-hero h3 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.stats-hero p {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.stats-range-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.stats-range-tab {
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.42rem 0.7rem;
    font-size: 0.78rem;
}

.stats-range-tab.is-active {
    color: var(--text-primary);
    background: rgba(var(--ritual-ring-rgb), 0.15);
    border-color: rgba(var(--ritual-ring-rgb), 0.35);
}

.stats-summary-grid,
.stats-main-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

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

.stats-main-grid {
    grid-template-columns: minmax(280px, 0.85fr) minmax(280px, 1.15fr);
}

.stats-card {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.stats-card-value {
    color: var(--accent);
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[lang="fa"] .stats-card-value {
    line-height: 1.25;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.stats-card-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-chart-card {
    min-height: 320px;
    display: grid;
    place-items: center;
    position: relative;
}

.donut-chart {
    width: min(100%, 310px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.donut-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.donut-center {
    fill: var(--text-primary);
    font-weight: 700;
    font-size: 0.42rem;
    text-anchor: middle;
}

.donut-center-sub {
    fill: var(--text-muted);
    font-size: 0.2rem;
    text-anchor: middle;
}

html[lang="fa"] .donut-center {
    font-size: 0.38rem;
}

html[lang="fa"] .donut-center-sub {
    font-size: 0.18rem;
}

.stats-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

.stats-empty[hidden] {
    display: none;
}

.stats-empty i {
    font-size: 2.5rem;
    opacity: 0.35;
}

.tag-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tag-breakdown-row {
    --tag-color: var(--accent);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 0.75rem;
    align-items: center;
}

.tag-breakdown-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.tag-breakdown-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.tag-breakdown-bar {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-hover);
}

.tag-breakdown-fill {
    height: 100%;
    width: var(--tag-percent, 0%);
    border-radius: inherit;
    background: var(--tag-color);
}

.stats-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.tag-manager-card,
.stats-history-card {
    margin-bottom: 1rem;
}

.tag-manage-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.tag-manage-row {
    --tag-color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.tag-manage-fields {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.tag-manage-name {
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    border-radius: 6px;
    padding: 0.25rem 0.35rem;
}

.tag-manage-description {
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 0.2rem 0.35rem;
    font-size: 0.74rem;
}

.tag-manage-row .tag-icon {
    background: color-mix(in srgb, var(--tag-color) 12%, var(--surface-hover));
}

.tag-manage-name:focus,
.tag-manage-description:focus {
    border-color: var(--glass-border);
    background: var(--surface-hover);
}

.tag-archive-btn,
.tag-restore-btn,
.tag-delete-btn,
.history-tag-edit {
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
}

.tag-archive-btn:hover,
.tag-restore-btn:hover,
.history-tag-edit:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.tag-delete-btn:hover {
    color: var(--danger);
    background: var(--surface-hover);
}

.tag-add-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 180px) auto;
    gap: 0.6rem;
    align-items: start;
}

.tag-input-field {
    min-width: 0;
}

.tag-add-row input,
.tag-add-row select {
    width: 100%;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    padding: 0.65rem 0.75rem;
}

.tag-add-row input.has-error {
    border-color: color-mix(in srgb, #ef4444 70%, var(--glass-border));
}

.tag-add-row input:disabled,
.tag-add-row select:disabled,
.tag-add-row button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.tag-feedback {
    min-height: 1rem;
    margin: 0.35rem 0 0;
    color: #ef4444;
    font-size: 0.75rem;
    line-height: 1.35;
    opacity: 0;
}

.tag-feedback.is-visible {
    opacity: 1;
}

.stats-history-list .history-session {
    position: relative;
}

.history-session-tag {
    align-self: flex-start;
    gap: 0.3rem;
    max-width: min(100%, 180px);
    min-height: 30px;
    margin-top: 0.25rem;
    padding: 0.26rem 0.5rem;
    width: fit-content;
    font-size: calc(0.68rem * var(--drawer-font-scale));
}

.history-session-tag .tag-dot {
    width: 0.45rem;
    height: 0.45rem;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-color) 16%, transparent);
}

.history-session-tag .tag-icon {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.74rem;
}

.history-tag-menu {
    position: absolute;
    inset-inline-end: 0.75rem;
    top: calc(100% - 0.5rem);
    z-index: calc(var(--z-drawer) + 10);
    transform: none;
}

@media (max-width: 480px) {
    .stats-hero,
    .stats-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .stats-range-tabs {
        justify-content: flex-start;
    }

    .stats-summary-grid,
    .stats-main-grid,
    .tag-add-row {
        grid-template-columns: 1fr;
    }

    .stats-card-value {
        font-size: 1.25rem;
    }

    .tag-menu {
        width: min(280px, calc(100vw - 32px));
    }

    #tagPickerMenu {
        width: min(200px, calc(100vw - 24px));
        max-height: var(--tag-picker-menu-max-height, min(180px, calc(100vh - 120px)));
    }

    #tagPickerMenu .tag-menu-option {
        min-height: 34px;
        padding: 0.38rem 0.46rem;
    }

    .history-summary {
    grid-template-columns: 1fr;
    }

    .summary-card {
    padding: 0.6rem;
    }

    .summary-value {
    font-size: 1.3rem;
    }

    .history-session {
    gap: 0.6rem;
    padding: 0.6rem;
    }

    .history-session-icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    }
}





#route-indicator {
    font-size: 0.74rem;
    color: var(--text-secondary);
    text-align: center;
    min-height: 1.5em;
    margin-bottom: 6px;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--ritual-ring-rgb), 0.26);
    background: rgba(var(--ritual-ring-rgb), 0.08);
    width: fit-content;
    margin-inline: auto;
}

#route-indicator:empty {
    display: none;
}

html.lang-transition *,
html.lang-transition *::before,
html.lang-transition *::after {
    transition-property: direction, text-align, margin, padding, transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html[dir="rtl"] .drawer {
    border-left: none;
    border-right: 1px solid var(--glass-border);
}

html[lang="fa"] {
    --font-family: 'Vazirmatn', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --drawer-font-scale: 0.9;
}

html[dir="rtl"] .sidebar {
    border-right: none;
    border-left: 1px solid var(--glass-border);
}

html[dir="rtl"] #app-shell {
    direction: rtl;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar stage";
}

html[dir="rtl"] body.settings-view #app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
    grid-template-areas:
        "topbar"
        "stage";
}

html[dir="rtl"] .drawer-right {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

html[dir="rtl"] .drawer-right.open {
    transform: translateX(0);
}

html[dir="rtl"] .task-input-group input,
html[dir="rtl"] .task-item,
html[dir="rtl"] .task-text-btn,
html[dir="rtl"] .task-edit-input {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .task-check {
    order: 2;
}

html[dir="rtl"] .task-text-btn {
    order: 1;
}

html[dir="rtl"] .task-drag-handle {
    order: 3;
}

html[dir="rtl"] .task-delete {
    order: 0;
}

html[dir="rtl"] .settings-group {
    direction: rtl;
}

html[dir="rtl"] .settings-group label {
    text-align: right;
}

html[dir="rtl"] .settings-section-title {
    text-align: right;
}

html[dir="rtl"] .drawer-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .drawer-header h2 {
    text-align: right;
}

html[dir="rtl"] .settings-back-btn i {
    transform: scaleX(-1);
}

html[dir="rtl"] .settings-page-header h2 {
    text-align: center;
}

html[dir="rtl"] .reflection-content h3 {
    text-align: right;
}

html[dir="rtl"] #reflectionInput {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .reflection-actions {
    flex-direction: row-reverse;
}


.j2m-btn {
    width: 44px;
    height: 44px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    border-color: var(--glass-border);
    background: var(--surface);
    border-radius: 50%;
    transition: color var(--speed) var(--ease),
                background var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                transform 0.15s var(--ease);
}

.j2m-btn:hover {
    color: #f5c87a;
    border-color: #f5c87a;
    background: rgba(245, 200, 122, 0.08);
    transform: scale(1.04);
}

.j2m-done-btn {
    width: 48px;
    height: 48px;
    font-size: 1rem;
    background: rgba(245, 200, 122, 0.10);
    border-color: #f5c87a;
    color: #f5c87a;
    border-radius: 50%;
    transition: background var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                transform 0.15s var(--ease);
}

.j2m-done-btn:hover {
    background: rgba(245, 200, 122, 0.18);
    transform: scale(1.04);
}

body.j2m-mode .timer-panel {
    border-color: rgba(245, 200, 122, 0.18);
}

body.j2m-mode .session-type {
    color: #f5c87a;
    border-color: rgba(245, 200, 122, 0.4);
    background: rgba(245, 200, 122, 0.1);
}


.j2m-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(245, 200, 122, 0.12);
    border: 1px solid rgba(245, 200, 122, 0.25);
    color: #f5c87a;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
    z-index: 100;
    pointer-events: none;
    white-space: nowrap;
}

.j2m-toast.has-action {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    pointer-events: auto;
}

.j2m-toast-text {
    min-width: 0;
}

.j2m-toast-action {
    border: 1px solid rgba(245, 200, 122, 0.4);
    border-radius: 999px;
    background: rgba(245, 200, 122, 0.16);
    color: #f5c87a;
    font: inherit;
    line-height: 1;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}

.j2m-toast-action:hover {
    background: rgba(245, 200, 122, 0.24);
}

.j2m-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.app-update-banner {
    position: fixed;
    left: 50%;
    bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(420px, calc(100vw - 32px));
    padding: 12px 14px 12px 18px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass);
    color: var(--text-primary);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateX(-50%);
    z-index: calc(var(--z-drawer) + 50);
    animation: updateBannerIn 0.32s var(--ease);
}

.app-update-banner-text {
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.4;
}

.app-update-banner-btn {
    flex: 0 0 auto;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 14px;
    transition: transform 0.15s var(--ease),
                filter var(--speed) var(--ease),
                opacity var(--speed) var(--ease);
}

.app-update-banner-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.app-update-banner-btn:disabled {
    cursor: progress;
    opacity: 0.65;
}

@keyframes updateBannerIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


.reflection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.reflection-content {
    background: var(--bg-primary);
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.reflection-content h3 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

#reflectionInput {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    margin-bottom: 1rem;
}

#reflectionInput:focus {
    outline: none;
    border-color: var(--accent);
}

.reflection-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.reflection-actions button {
    flex: 1;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) + 80);
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.confirm-modal[hidden] {
    display: none;
}

.confirm-content {
    width: min(100%, 380px);
    padding: 1.25rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.confirm-content h3 {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
}

.confirm-content p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1rem;
}

.danger-btn {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(239, 68, 68, 0.16);
}

.danger-btn:hover {
    background: rgba(239, 68, 68, 0.24);
}



@media (max-width: 768px) {
    :root {
        --sidebar-width: 48px;
        --drawer-width: 280px;
    }

    /* Make drag handle always visible on mobile */
    .task-drag-handle {
        opacity: 0.5;
        width: 32px;
        height: 32px;
    }
    .task-item:hover .task-drag-handle {
        opacity: 0.7;
    }

    .timer-display {
        font-size: 4.25rem;
        letter-spacing: 2.5px;
    }

    .ritual-timer-stage {
        width: 312px;
        height: 312px;
    }

    .orbital-progress-ring {
        opacity: 0.22;
    }

    .ring-track,
    .ring-progress {
        stroke-width: 8;
    }

    .timer-panel {
        padding: 36px 24px 28px;
        gap: 20px;
    }

    .ritual-quick-controls {
        bottom: -32px;
    }

    .ritual-quick-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .timer-control-item {
        min-width: 56px;
        gap: 7px;
    }

    .timer-control-text {
        font-size: 0.64rem;
    }
}

@media (max-width: 480px) {
    :root {
        --topbar-height: 48px;
        --drawer-width: 100%;
    }

    .mobile-only { display: flex; }

    #app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: var(--topbar-height) minmax(0, 1fr) auto;
        grid-template-areas:
            "topbar"
            "stage"
            "sidebar";
    }

    html[dir="rtl"] #app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: var(--topbar-height) minmax(0, 1fr) auto;
        grid-template-areas:
            "topbar"
            "stage"
            "sidebar";
    }

    .sidebar {
        flex-direction: row;
        border-right: none;
        border-top: 1px solid var(--glass-border);
        padding: 0;
        padding-block: 6px;
        justify-content: center;
        gap: 16px;
    }

    html[dir="rtl"] .sidebar {
        border-left: none;
        border-top: 1px solid var(--glass-border);
    }

    .sidebar-header {
        display: none;
    }

    .sidebar-actions {
        flex-direction: row;
        gap: 12px;
    }

    .sidebar-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    #stage {
        padding: 20px 12px 18px;
        align-items: center;
        padding-top: clamp(10px, 3vh, 24px);
        transition: padding-top 1.2s var(--ease);
    }

    #settings-page {
        padding: 0;
    }

    body.settings-view #app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: var(--topbar-height) minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "stage";
    }

    .settings-page-header {
        padding: 12px 14px;
    }

    .settings-back-btn {
        padding: 6px 8px;
        gap: 6px;
    }

    .settings-back-btn span {
        font-size: 0.78rem;
    }

    .settings-page-body {
        padding: 18px 12px 18px;
    }

    .settings-card {
        border-radius: 12px;
        padding: 10px 12px;
    }

    .settings-page-header h2 {
        max-width: calc(100% - 120px);
    }

    #focus-core {
        max-width: 100%;
        width: min(100%, 440px);
        margin: 0 auto;
    }

    #focus-core::before {
        display: none;
    }

    .timer-display {
        font-size: clamp(3.7rem, 11vw, 4.15rem);
        letter-spacing: 2px;
    }

    .ritual-timer-stage {
        width: clamp(286px, 76vw, 318px);
        height: clamp(286px, 76vw, 318px);
    }

    .timer-panel {
        padding: 36px 16px 28px;
        gap: 20px;
        border-radius: 28px;
        width: 100%;
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.08),
            0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .ritual-quick-controls {
        bottom: -30px;
    }

    .ritual-quick-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .control-btn {
        width: 54px;
        height: 54px;
        font-size: 1.04rem;
    }

    .primary-btn {
        width: 70px;
        height: 70px;
        font-size: 1.2rem;
    }

    .j2m-btn {
        width: 50px;
        height: 50px;
        font-size: 0.78rem;
    }

    .j2m-done-btn {
        width: 50px;
        height: 50px;
    }

    .timer-controls {
        gap: 12px 14px;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 364px;
        margin-inline: auto;
    }

    .timer-control-item {
        min-width: 68px;
        gap: 6px;
    }

    .timer-control-text {
        font-size: 0.62rem;
    }

    .session-type {
        font-size: 0.78rem;
        letter-spacing: 1.6px;
    }

    .current-task-display {
        font-size: 0.82rem;
    }

    .drawer {
        width: 100%;
        border-left: none;
    }

    html[dir="rtl"] .drawer {
        border-right: none;
    }

    .drawer-body {
        padding: 16px;
    }

    .settings-group {
        padding: 10px 0;
    }

    .settings-group label {
        font-size: calc(0.82rem * var(--drawer-font-scale));
    }

    .topbar {
        padding: 0 12px;
    }

    .sidebar-theme-btn {
        margin-top: 0;
        margin-bottom: 0;
    }

    .app-title {
        font-size: 0.95rem;
    }

    .reflection-content {
        max-width: 92vw;
        padding: 1.5rem;
    }

    .reflection-content h3 {
        font-size: 1.1rem;
    }

    .j2m-toast {
        bottom: 72px;
        font-size: 0.82rem;
        padding: 10px 18px;
        max-width: 90vw;
        white-space: normal;
        text-align: center;
    }

    .app-update-banner {
        bottom: 16px;
        width: calc(100vw - 24px);
        padding: 10px 12px;
    }

    .app-update-banner-text {
        font-size: 0.82rem;
    }

    .app-update-banner-btn {
        padding: 7px 12px;
    }

    .task-input-group input {
        font-size: 16px;
    }

    body.focus-ritual-active #stage {
        align-items: flex-start;
        padding-top: clamp(20px, 6vh, 48px);
    }

    body.focus-ritual-active #focus-core {
        transform: translateY(-2vh) scale(1.04);
    }
}

@media (max-width: 360px) {
    .timer-display {
        font-size: 3.65rem;
    }

    .ritual-timer-stage {
        width: 272px;
        height: 272px;
    }

    .timer-panel {
        padding: 34px 14px 26px;
    }

    .control-btn {
        width: 50px;
        height: 50px;
    }

    .primary-btn {
        width: 66px;
        height: 66px;
    }

    #stage {
        padding-top: 6vh;
    }

    .timer-control-text {
        font-size: 0.57rem;
    }
}

@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 480px) {
        .sidebar {
            padding-bottom: calc(6px + env(safe-area-inset-bottom));
        }

        .j2m-toast {
            bottom: calc(72px + env(safe-area-inset-bottom));
        }
    }
}

@media (max-height: 500px) and (max-width: 900px) {
    #stage {
        padding: 10px 12px;
        align-items: center;
    }

    .timer-display {
        font-size: 2.8rem;
        letter-spacing: 2px;
    }

    .timer-panel {
        padding: 14px 18px 12px;
        gap: 10px;
    }

    .ritual-timer-stage {
        width: 158px;
        height: 158px;
    }

    .control-btn,
    .j2m-btn,
    .j2m-done-btn {
        width: 42px;
        height: 42px;
        font-size: 0.88rem;
    }

    .primary-btn {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }

    .timer-controls {
        gap: 8px;
    }

    .timer-control-item {
        min-width: 42px;
        gap: 0;
    }

    .timer-control-text,
    .session-dots,
    .timer-tag-picker,
    .current-task-display {
        display: none;
    }
}

#effort-points-display {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    direction: ltr;
    unicode-bidi: isolate;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--points-text);
    background: var(--points-bg);
    padding: 4px 10px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    user-select: none;
}

#effort-points-display .ep-icon,
#effort-points-display .ep-unit {
    line-height: 1;
}

#effort-points-display .ep-wheel {
    position: relative;
    display: inline-block;
    width: calc(var(--ep-digits, 2) * 1.1ch);
    height: 1.05em;
    line-height: 1.05em;
    overflow: hidden;
    perspective: 500px;
    font-variant-numeric: tabular-nums;
}

#effort-points-display .ep-value {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

#effort-points-display .ep-value-current {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
}

#effort-points-display .ep-value-next {
    transform: translateY(115%) rotateX(-80deg);
    opacity: 0;
}

@keyframes ep-wheel-out {
    0% { transform: translateY(0) rotateX(0deg); opacity: 1; }
    100% { transform: translateY(-115%) rotateX(80deg); opacity: 0; }
}

@keyframes ep-wheel-in {
    0% { transform: translateY(115%) rotateX(-80deg); opacity: 0; }
    100% { transform: translateY(0) rotateX(0deg); opacity: 1; }
}

#effort-points-display.ep-flipping .ep-value-current {
    animation: ep-wheel-out 0.42s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

#effort-points-display.ep-flipping .ep-value-next {
    animation: ep-wheel-in 0.42s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

@keyframes ep-popup-fade {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

.ep-popup {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 0.85em;
    font-weight: bold;
    color: #4caf50;
    animation: ep-popup-fade 1.5s ease-out forwards;
    pointer-events: none;
}

.ritual-points-anchor .ep-popup {
    right: auto;
    top: auto;
    left: 12px;
    bottom: 24px;
    font-size: 1.05rem;
    color: rgb(var(--ritual-ring-rgb));
    text-shadow: 0 0 14px rgba(var(--ritual-ring-rgb), 0.58);
    animation: ritual-ep-popup 1.6s ease-out forwards;
}

@keyframes ritual-ep-popup {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-36px) scale(1.12);
    }
}

.toggle-archived-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.toggle-archived-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.toggle-archived-btn[aria-pressed="true"] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.tag-manager-divider {
    margin: 1.5rem 0 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
}

.tag-manager-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tag-manage-row-archived {
    opacity: 0.7;
}

/* A quiet focus space keeps controls within reach. */
html[data-theme='dark'] {
    --timer-panel-bg: rgba(45, 45, 64, 0.36);
    --timer-panel-highlight: rgba(255, 255, 255, 0.055);
    --timer-panel-shadow: rgba(6, 8, 20, 0.12);
    --text-muted: #a8a5b8;
}
.timer-panel { border-color: transparent; box-shadow: 0 12px 36px var(--timer-panel-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.focus-ritual-overlay { z-index: 0; opacity: 0; }
body.focus-ritual-active .focus-ritual-overlay { opacity: 0.12; }
body.focus-ritual-active #focus-core { transform: none; }
body.focus-ritual-active .timer-panel { background: var(--timer-panel-bg); box-shadow: 0 12px 36px var(--timer-panel-shadow); }
body.focus-ritual-active .sidebar, body.focus-ritual-active .topbar,
body.focus-ritual-active #route-indicator, body.focus-ritual-active .session-type,
body.focus-ritual-active .timer-controls, body.focus-ritual-active .session-dots,
body.focus-ritual-active .timer-tag-picker, body.focus-ritual-active .current-task-display {
    opacity: 1; filter: none; pointer-events: auto; transform: none;
}
body.focus-ritual-active .ring-progress, body.focus-ritual-active .timer-display { animation: none; }
body.focus-ritual-active .ritual-quick-controls { opacity: 0; pointer-events: none; }
#effort-points-display { position: relative; cursor: pointer; border: 0; font: inherit; }
.storage-warning, .ownership-notice { color: var(--text-primary); background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 12px; }
.storage-warning[hidden], .ownership-notice[hidden], .two-minute-choice[hidden] { display: none; }
.ownership-notice button, .two-minute-choice button, .space-actions button { color: var(--text-primary); background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; cursor: pointer; }
.ownership-notice button:hover, .two-minute-choice button:hover, .space-actions button:hover { background: var(--surface-hover); }
.two-minute-choice { color: var(--text-primary); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.two-minute-choice p { width: 100%; margin: 0; }
#space-page { display: none; min-height: 0; grid-area: stage; }
body.space-view #app-shell { grid-template-columns: 1fr; grid-template-rows: var(--topbar-height) minmax(0, 1fr); grid-template-areas: "topbar" "stage"; }
body.space-view #sidebar, body.space-view #stage, body.space-view #settings-page, body.space-view #stats-page { display: none; }
body.space-view #space-page { display: flex; flex-direction: column; }
.space-content { max-width: 720px; margin: 0 auto; padding-bottom: 40px; }
.space-content h3 { margin: 28px 0 8px; }
.space-intro, .space-content > p { color: var(--text-secondary); }
.space-balance { color: var(--accent) !important; font-weight: 700; }
.space-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--glass-border); }
.space-item-name { flex: 1; }
.space-motif { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--accent); font-size: 1.35rem; }
.space-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.space-actions button:disabled { opacity: 0.55; cursor: default; }
.space-badges p { margin: 8px 0; color: var(--text-secondary); }
.space-badges .badge-earned { color: var(--text-primary); }
html[data-atmosphere='dawn'] { --ambient-glow-a: rgba(239, 149, 127, 0.22); --ambient-glow-b: rgba(245, 193, 128, 0.16); --space-ring: #e99c86; }
html[data-atmosphere='rain'] { --ambient-glow-a: rgba(88, 158, 165, 0.2); --ambient-glow-b: rgba(106, 148, 191, 0.16); --space-ring: #70b8ae; }
html[data-atmosphere='amber'] { --ambient-glow-a: rgba(222, 155, 72, 0.2); --ambient-glow-b: rgba(188, 114, 113, 0.15); --space-ring: #dca35d; }
html[data-atmosphere='dawn'] #focus-core::after, html[data-atmosphere='rain'] #focus-core::after, html[data-atmosphere='amber'] #focus-core::after { position: absolute; bottom: 10px; inset-inline-start: 18px; color: var(--space-ring); font-size: 1.3rem; opacity: 0.72; pointer-events: none; }
html[data-atmosphere='dawn'] #focus-core::after { content: '☼'; }
html[data-atmosphere='rain'] #focus-core::after { content: '♧'; }
html[data-atmosphere='amber'] #focus-core::after { content: '▤'; }
.ring-progress { stroke: var(--space-ring, rgb(var(--ritual-ring-rgb))); }
@media (max-width: 480px) { .space-item { align-items: flex-start; flex-wrap: wrap; } .space-actions { width: 100%; padding-inline-start: 52px; } .space-actions button { min-height: 44px; } }
#stage { flex-direction: column; gap: 8px; overflow-y: auto; }
body.focus-ritual-active .primary-btn { background: var(--accent); color: var(--points-bg); border-color: var(--accent); }
@media (max-height: 820px) {
    .timer-panel { padding: 20px 24px; gap: 12px; }
    .ritual-timer-stage { width: min(300px, 42vh); height: min(300px, 42vh); }
    .timer-display { font-size: clamp(3.4rem, 8vh, 5rem); }
    #stage { justify-content: safe center; }
}
@media (max-width: 480px) { .timer-panel { padding: 20px 14px; gap: 12px; } .ritual-timer-stage { width: min(286px, 65vw, 38vh); height: min(286px, 65vw, 38vh); } }
.focus-today { margin: -8px 0 0; color: var(--text-muted); font-size: 0.72rem; }
.tag-disclosure, .settings-disclosure, .stats-disclosure { color: var(--text-secondary); }
.tag-disclosure summary, .settings-disclosure summary, .stats-disclosure summary { cursor: pointer; min-height: 40px; padding: 8px; font-size: 0.85rem; }
.tag-disclosure[open] .timer-tag-picker { margin-top: 4px; }
.stats-disclosure { margin: 16px 0; }
body.focus-ritual-active .primary-btn { color: var(--primary-button-text); }
html[data-atmosphere] #focus-core::after { display: none; }
.space-decoration { position: absolute; width: 42px; height: 42px; inset-inline-start: 12px; bottom: 8px; color: var(--space-ring, var(--text-muted)); opacity: 0.75; pointer-events: none; }
.space-decoration svg { width: 100%; height: 100%; }
.space-decoration g { display: none; }
html[data-atmosphere='dawn'] .decoration-dawn, html[data-atmosphere='rain'] .decoration-rain, html[data-atmosphere='amber'] .decoration-amber { display: block; }
@media (max-width: 480px) {
    #stage { padding: 8px 12px; }
    .timer-controls { flex-wrap: nowrap; gap: 5px; max-width: 100%; }
    .timer-control-item { width: 60px; min-width: 0; flex: 0 1 60px; }
    .control-btn, .j2m-btn { width: 46px; height: 46px; }
    .primary-btn { width: 54px; height: 54px; }
    .timer-control-text { font-size: 0.68rem; white-space: nowrap; }
}
.drawer { visibility: hidden; transition: transform var(--speed) var(--ease), visibility 0s linear var(--speed); }
.drawer.open { visibility: visible; transition: transform var(--speed) var(--ease), visibility 0s; }

:root { --primary-button-text: #fff; }
.history-empty[hidden] { display: none; }
html[data-theme='light'] {
    --timer-card-start: rgba(255, 250, 247, 0.82);
    --timer-card-end: rgba(238, 237, 247, 0.82);
    --timer-card-border: rgba(138, 120, 145, 0.18);
    --timer-wash: rgba(193, 155, 200, 0.18);
    --timer-controls-surface: rgba(126, 106, 153, 0.025);
    --timer-controls-border: rgba(126, 106, 153, 0.045);
    --timer-button-surface: rgba(255, 255, 255, 0.62);
    --timer-play: #7062b7;
    --timer-play-ink: #fff;
    --shell-tint: rgba(247, 243, 247, 0.72);
    --menu-surface: rgba(247, 243, 247, 0.88);
    --menu-shadow: rgba(44, 33, 58, 0.17);
    --cosmos-star: rgba(105, 99, 146, 0.32);
    --cosmos-core: rgba(87, 82, 119, 0.36);
    --cosmos-ring: rgba(151, 125, 173, 0.36);
    --cosmos-page-overlay: rgba(248, 244, 246, 0.78);
    --cosmos-art: url('./assets/space/daybreak.webp');
}
html[data-theme='dark'] {
    --bg-primary: #191923;
    --bg-secondary: #242539;
    --timer-card-start: rgba(57, 52, 75, 0.82);
    --timer-card-end: rgba(37, 42, 61, 0.82);
    --timer-card-border: rgba(232, 215, 233, 0.12);
    --timer-wash: rgba(188, 137, 184, 0.16);
    --timer-controls-surface: rgba(232, 215, 239, 0.025);
    --timer-controls-border: rgba(235, 219, 239, 0.035);
    --timer-button-surface: rgba(255, 255, 255, 0.075);
    --timer-play: #b6a4dc;
    --timer-play-ink: #29243b;
    --ring-track-color: rgba(227, 214, 237, 0.25);
    --shell-tint: rgba(48, 45, 66, 0.72);
    --menu-surface: rgba(48, 45, 66, 0.88);
    --menu-shadow: rgba(9, 8, 19, 0.38);
    --cosmos-star: rgba(224, 215, 242, 0.62);
    --cosmos-core: rgba(8, 8, 18, 0.85);
    --cosmos-ring: rgba(185, 156, 213, 0.52);
    --cosmos-page-overlay: rgba(32, 33, 50, 0.94);
    --cosmos-art: url('./assets/space/observatory.webp');
}
.bg-animation::after { opacity: 0.18; }
.sidebar, .topbar, .drawer { background: var(--shell-tint); border-color: var(--timer-card-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.drawer { background: var(--menu-surface); }
.cosmos-stars {
    position: absolute;
    inset: -6%;
    background:
        radial-gradient(1px 1px at 9% 22%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1.5px 1.5px at 21% 74%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1px 1px at 31% 17%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1px 1px at 40% 83%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1.5px 1.5px at 54% 12%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1px 1px at 64% 70%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1px 1px at 76% 27%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1.5px 1.5px at 86% 81%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1px 1px at 92% 48%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1px 1px at 15% 51%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1px 1px at 70% 48%, var(--cosmos-star) 95%, transparent),
        radial-gradient(1px 1px at 48% 38%, var(--cosmos-star) 95%, transparent);
    animation: cosmos-drift 90s ease-in-out infinite alternate;
}
.cosmos-hole {
    position: absolute;
    left: 12%;
    top: 28%;
    width: clamp(140px, 19vw, 260px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cosmos-core) 0 15%, transparent 34%);
    opacity: 0.6;
    animation: cosmos-drift 100s ease-in-out infinite alternate-reverse;
}
.cosmos-hole::after {
    content: '';
    position: absolute;
    inset: 26%;
    border: 1px solid var(--cosmos-ring);
    border-radius: 50%;
    box-shadow: 0 0 16px var(--cosmos-ring), inset 0 0 12px var(--cosmos-ring);
    transform: rotate(-24deg) scaleY(0.36);
}
@keyframes cosmos-drift { from { transform: translate3d(-6px, 3px, 0); } to { transform: translate3d(6px, -3px, 0); } }
@media (prefers-reduced-motion: reduce) { .cosmos-stars, .cosmos-hole { animation: none; } }
#focus-core { max-width: 468px; }
.timer-panel, body.focus-ritual-active .timer-panel {
    background: radial-gradient(ellipse at 24% 0%, var(--timer-wash), transparent 48%), linear-gradient(155deg, var(--timer-card-start), var(--timer-card-end));
    border-color: var(--timer-card-border);
    border-radius: 30px;
    box-shadow: 0 24px 64px var(--timer-panel-shadow), inset 0 1px 0 var(--timer-panel-highlight);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 30px 24px 26px;
    gap: 16px;
    transform: none;
}
.ritual-timer-stage {
    width: min(336px, 42vh);
    height: min(336px, 42vh);
    border-radius: 50%;
    background: radial-gradient(circle, var(--timer-wash), transparent 66%);
}
.ring-track, .ring-progress { stroke-width: 6; }
html[data-theme='dark'] .orbital-progress-ring { opacity: 0.78; }
html[data-theme='dark'] body.focus-ritual-active .orbital-progress-ring { opacity: 1; }
.timer-controls {
    align-items: center;
    gap: 8px;
    padding: 10px 12px 9px;
    border: 1px solid var(--timer-controls-border);
    border-radius: 26px;
    background: var(--timer-controls-surface);
}
.timer-control-item { gap: 6px; }
.control-btn { background: var(--timer-button-surface); }
.primary-btn, body.focus-ritual-active .primary-btn { background: var(--timer-play); color: var(--timer-play-ink); border-color: transparent; }
.timer-control-text { color: var(--text-secondary); }
.session-dots { gap: 7px; }
.dot { width: 6px; height: 6px; }
.timer-tag-picker { margin: 0; }
.timer-tag-picker .tag-chip { min-height: 40px; padding: 0.4rem 0.8rem; }
.timer-tag-picker .tag-icon { background: transparent; }
#tagPickerMenu {
    width: min(240px, calc(100vw - 32px));
    gap: 3px;
    padding: 7px;
    border: 1px solid var(--timer-card-border);
    border-radius: 18px;
    background: var(--menu-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 16px 36px var(--menu-shadow);
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}
#tagPickerMenu .tag-menu-option {
    gap: 10px;
    padding: 6px 9px;
    border-radius: 12px;
    font: inherit;
    min-height: 44px;
    font-size: 0.92rem;
    line-height: 1.3;
}
.timer-tag-picker .tag-menu-option .tag-dot { display: none; }
#tagPickerMenu .tag-menu-option .tag-icon {
    width: 30px;
    height: 30px;
    background: color-mix(in srgb, var(--tag-color) 15%, transparent);
    font-size: 0.8rem;
}
.timer-tag-picker .tag-menu-option[aria-selected='true'] {
    background: color-mix(in srgb, var(--tag-color) 13%, transparent);
    border-color: color-mix(in srgb, var(--tag-color) 24%, transparent);
}
.current-task-display:empty { display: none; }
#stage.tag-menu-open-below { padding-bottom: 320px; }
@media (max-height: 820px) {
    .timer-panel, body.focus-ritual-active .timer-panel { padding: 24px 20px 20px; gap: 12px; }
    .ritual-timer-stage { width: min(336px, 39vh); height: min(336px, 39vh); }
}
@media (max-width: 480px) {
    .timer-panel, body.focus-ritual-active .timer-panel { padding: 24px 12px 20px; gap: 12px; border-radius: 26px; }
    .ritual-timer-stage { width: min(286px, 64vw, 36vh); height: min(286px, 64vw, 36vh); }
    .timer-controls { gap: 3px; padding: 9px 8px; }
}

/* Shared observatory surfaces continue the timer's palette without nesting cards. */
html[data-theme='dark'] {
    --observatory-page: #202132;
    --observatory-surface: rgba(63, 57, 79, 0.45);
    --observatory-inset: rgba(228, 215, 237, 0.055);
    --observatory-rule: rgba(233, 223, 241, 0.1);
    --observatory-ink: #e9e1f1;
    --observatory-secondary: #c0b8ca;
    --observatory-accent: #c5b4e5;
    --observatory-selected: rgba(182, 164, 220, 0.2);
}
html[data-theme='light'] {
    --observatory-page: #efedf3;
    --observatory-surface: rgba(255, 250, 249, 0.72);
    --observatory-inset: rgba(103, 83, 133, 0.055);
    --observatory-rule: rgba(96, 77, 110, 0.14);
    --observatory-ink: #302b3a;
    --observatory-secondary: #625a6b;
    --observatory-accent: #655495;
    --observatory-selected: rgba(112, 98, 183, 0.14);
}

/* Font Awesome loads after this stylesheet; the combined selector keeps its glyph centered. */
.tag-icon.fas {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    line-height: 1;
}
.tag-icon.fas::before { display: block; line-height: 1; }

#settings-page, #stats-page, #space-page {
    background-color: var(--observatory-page);
    background-image: radial-gradient(ellipse at 15% 0%, var(--timer-wash), transparent 50%), linear-gradient(var(--cosmos-page-overlay), var(--cosmos-page-overlay)), var(--cosmos-art);
    background-position: center;
    background-size: auto, auto, cover;
}
.settings-page-header, .stats-page-header, .drawer-header {
    background: var(--shell-tint);
    border-color: var(--observatory-rule);
}
.settings-page-header h2, .stats-page-header h2, .drawer-header h2 {
    color: var(--observatory-ink);
    font-weight: 600;
}
.settings-card, .stats-summary-grid, .space-items, .space-badges {
    background: var(--observatory-surface);
    border: 1px solid var(--observatory-rule);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 var(--timer-panel-highlight);
}
.settings-card { padding: 18px 20px; }
.native-notification-hint { color: var(--observatory-secondary); font-size: 0.8rem; line-height: 1.6; margin: 12px 0 0; }
.settings-section-title {
    color: var(--observatory-secondary);
    border-color: var(--observatory-rule);
    letter-spacing: 0.04em;
}
html[lang='fa'] .settings-section-title, html[lang='fa'] .stats-card-label { letter-spacing: 0; }
.settings-group { border-color: var(--observatory-rule); }
.settings-group > label { color: var(--observatory-ink); }
.setting-select, .tag-add-row input, .tag-add-row select, .task-input-group input {
    background: var(--observatory-inset);
    border-color: var(--observatory-rule);
    color: var(--observatory-ink);
}
.setting-btn, .test-btn, .space-actions button, .tag-archive-btn, .tag-restore-btn, .tag-delete-btn {
    background: var(--observatory-inset);
    border-color: var(--observatory-rule);
    color: var(--observatory-ink);
}
.sidebar-btn.is-active, .sidebar-btn:hover { background: var(--observatory-selected); }

.stats-hero { gap: 16px; padding: 20px; }
.stats-hero h3 { color: var(--observatory-ink); font-size: 1.1rem; }
.stats-hero p { color: var(--observatory-secondary); line-height: 1.5; }
.stats-range-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 2px;
    max-width: 100%;
    padding: 4px;
    border: 1px solid var(--observatory-rule);
    border-radius: 15px;
    background: var(--observatory-inset);
    overflow-x: auto;
}
.stats-range-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--observatory-secondary);
    font: inherit;
    font-size: 0.82rem;
    white-space: nowrap;
}
.stats-range-tab:hover { color: var(--observatory-ink); background: var(--observatory-inset); }
.stats-range-tab.is-active {
    color: var(--observatory-ink);
    background: var(--observatory-selected);
    border-color: var(--observatory-rule);
    box-shadow: inset 0 1px 0 var(--timer-panel-highlight);
}
.stats-summary-grid { gap: 0; overflow: hidden; }
.stats-card {
    padding: 18px 20px;
    background: transparent;
    border: 0;
    border-inline-end: 1px solid var(--observatory-rule);
    border-radius: 0;
}
.stats-card:last-child { border-inline-end: 0; }
.stats-card-value { color: var(--observatory-accent); font-size: 1.5rem; }
.stats-card-label { color: var(--observatory-secondary); font-size: 0.78rem; line-height: 1.4; }
.stats-chart-card { min-height: 300px; }
.donut-chart { width: min(100%, 280px); }
.donut-chart circle { stroke-width: 4.8px; filter: saturate(0.78); }
.donut-center { fill: var(--observatory-ink); }
.donut-center-sub, .stats-empty { fill: var(--observatory-secondary); color: var(--observatory-secondary); }
.tag-breakdown { gap: 14px; }
.tag-breakdown-row { padding: 4px 0; }
.tag-breakdown-name { color: var(--observatory-ink); }
.tag-breakdown-meta { color: var(--observatory-secondary); }
.tag-breakdown-bar { height: 6px; background: var(--observatory-inset); }
.tag-manage-row { background: transparent; border-color: var(--observatory-rule); border-radius: 14px; }

.history-date-group { gap: 0; }
.history-date-label { color: var(--observatory-secondary); padding: 10px 0; }
.history-session {
    padding: 13px 4px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--observatory-rule);
    border-radius: 0;
}
.history-session:last-child { border-bottom: 0; }
.history-session:hover { background: var(--observatory-inset); }
.history-session-icon { border-radius: 12px; }
.history-session-type { color: var(--observatory-ink); font-weight: 600; }
.history-session-time { color: var(--observatory-secondary); line-height: 1.4; }
.history-session-badge { border-radius: 999px; padding: 5px 9px; }
.history-session-tag { min-height: 40px; font-size: 0.75rem; }
.history-tag-menu {
    padding: 7px;
    border-color: var(--observatory-rule);
    border-radius: 18px;
    background: var(--menu-surface);
    box-shadow: 0 16px 36px var(--menu-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.history-tag-menu .tag-menu-option { border-radius: 12px; font: inherit; font-size: 0.9rem; }
.history-tag-menu .tag-dot { display: none; }
.history-tag-menu .tag-icon { width: 30px; height: 30px; background: color-mix(in srgb, var(--tag-color) 15%, transparent); }

.task-item { border-color: var(--observatory-rule); background: var(--observatory-inset); border-radius: 14px; }
.task-item.active { background: var(--observatory-selected); }
.task-input-group input { direction: inherit; text-align: start; }
.space-content { color: var(--observatory-ink); }
.space-content h3 { color: var(--observatory-ink); }
.space-intro, .space-content > p { color: var(--observatory-secondary); line-height: 1.55; }
.space-balance { color: var(--observatory-accent) !important; }
.space-items { margin-top: 14px; padding: 0 16px; }
.space-item { border-color: var(--observatory-rule); }
.space-motif { background: var(--observatory-selected); color: var(--observatory-accent); }
.space-badges { padding: 8px 16px; }
.space-badges p { color: var(--observatory-secondary); padding: 8px 0; margin: 0; }
.space-badges .badge-earned { color: var(--observatory-ink); }

@media (max-width: 600px) {
    .settings-card { padding: 16px; }
    .stats-hero { align-items: stretch; flex-direction: column; }
    .stats-range-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible; }
    .stats-range-tab { min-width: 0; padding-inline: 5px; text-align: center; }
    .stats-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-card { padding: 16px; }
    .stats-card:nth-child(2) { border-inline-end: 0; }
    .stats-card:nth-child(-n+2) { border-bottom: 1px solid var(--observatory-rule); }
    .stats-main-grid { grid-template-columns: 1fr; }
}

/* Celestial artwork and restrained occasional motion sit behind the app shell. */
.bg-animation::before {
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 17, 30, 0.14), rgba(16, 17, 30, 0.34)), url('./assets/space/observatory.webp') center / cover no-repeat;
    opacity: 0.82;
    transform: none;
}
.bg-animation::after { display: none; }
html[data-theme='light'] .bg-animation { opacity: 1; }
html[data-theme='light'] .bg-animation::before {
    background: linear-gradient(rgba(251, 246, 247, 0.16), rgba(251, 246, 247, 0.16)), var(--cosmos-art) center / cover no-repeat;
    opacity: 0.85;
}
.cosmos-shooting {
    position: absolute;
    width: 54px;
    height: 1px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--cosmos-star));
    pointer-events: none;
    animation: cosmos-meteor 29s linear infinite;
}
.cosmos-shooting-one { top: 19%; left: 66%; }
.cosmos-shooting-two { top: 55%; left: 18%; animation-duration: 37s; animation-delay: -12s; }
@keyframes cosmos-meteor {
    0%, 84% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-24deg); }
    85% { opacity: 0.65; }
    89% { opacity: 0; transform: translate3d(130px, -58px, 0) rotate(-24deg); }
    100% { opacity: 0; transform: translate3d(130px, -58px, 0) rotate(-24deg); }
}
@media (max-width: 600px) {
    .bg-animation::before, html[data-theme='light'] .bg-animation::before { background-position: 23% center; }
}
@media (prefers-reduced-motion: reduce) { .cosmos-shooting { animation: none; } }

/* Full-page views do not reserve a hidden sidebar column in RTL. */
html[dir='rtl'] body.stats-view #app-shell,
html[dir='rtl'] body.space-view #app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
    grid-template-areas: 'topbar' 'stage';
}

.cosmic-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.tag-icon, #tagPickerMenu .tag-menu-option .tag-icon, .history-tag-menu .tag-icon {
    display: inline-grid;
    place-items: center;
    color: color-mix(in srgb, var(--tag-color) 52%, var(--observatory-ink));
    background: color-mix(in srgb, var(--tag-color) 13%, var(--observatory-inset));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-color) 15%, transparent);
}
.tag-icon svg {
    width: 72%;
    height: 72%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tag-chip .tag-dot { display: none; }
.tag-chip {
    gap: 7px;
    background: color-mix(in srgb, var(--tag-color) 8%, var(--observatory-surface));
    border-color: color-mix(in srgb, var(--tag-color) 25%, var(--observatory-rule));
    color: var(--observatory-ink);
}
.timer-tag-picker .tag-chip { min-height: 44px; padding: 5px 12px 5px 8px; border-radius: 15px; font-size: 0.82rem; }
.timer-tag-picker .tag-chip .tag-icon { width: 28px; height: 28px; }
.timer-tag-picker .tag-chip::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-inline-start: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.65;
    transform: translateY(-2px) rotate(45deg);
}
.history-session-tag .tag-icon { width: 24px; height: 24px; }

/* Settings controls share the same soft material and retain native semantics. */
.settings-page-body .settings-content { width: min(100%, 780px); }
.settings-section-title { font-size: 0.85rem; font-weight: 600; }
.settings-group { gap: 16px; min-height: 58px; }
.settings-group > label { font-size: 0.94rem; line-height: 1.55; }
.settings-group .setting-control:has(.setting-btn) {
    gap: 4px;
    padding: 2px;
    border: 1px solid var(--observatory-rule);
    border-radius: 15px;
    background: var(--observatory-inset);
}
.setting-btn { width: 44px; height: 44px; border: 0; border-radius: 12px; font-size: 1.1rem; }
.setting-control > span { min-width: 30px; color: var(--observatory-ink); }
.focus-duration-input { width: 3.5rem; min-height: 44px; border: 0; border-radius: 12px; background: var(--observatory-inset); color: var(--observatory-ink); text-align: center; font: inherit; }

/* A quiet observatory: the timer remains the interactive surface. */
html[data-theme='dark'] {
    --orbit-page: #14132a;
    --orbit-glow: #41315e;
    --orbit-panel: #1c1b35;
    --orbit-rim: #8674ab;
    --orbit-ink: #faf3ff;
    --orbit-button: #c4a8ef;
    --orbit-button-shadow: #776099;
    --orbit-control: #302b4b;
}
html[data-theme='light'] {
    --orbit-page: #f0e8f3;
    --orbit-glow: #d4bddd;
    --orbit-panel: #f9f1f8;
    --orbit-rim: #b6a0c8;
    --orbit-ink: #332746;
    --orbit-button: #8871b5;
    --orbit-button-shadow: #59447e;
    --orbit-control: #e4d8ec;
}
.bg-animation { background: radial-gradient(ellipse at 50% 30%, var(--orbit-glow), var(--orbit-page) 65%); }
.bg-animation::before, html[data-theme='light'] .bg-animation::before { background: none; }
.cosmos-hole { display: none; }
#settings-page, #stats-page, #space-page { background-image: radial-gradient(ellipse at 50% 0%, var(--orbit-glow), transparent 60%); }
#focus-core { max-width: 450px; width: 100%; }
.timer-panel, body.focus-ritual-active .timer-panel {
    background: linear-gradient(155deg, var(--orbit-panel), var(--orbit-page));
    border: 1px solid var(--timer-card-border);
    box-shadow: 0 24px 70px var(--timer-panel-shadow), inset 0 1px 0 var(--timer-panel-highlight);
    padding: 26px 24px 22px;
    gap: 12px;
}
.session-type { color: var(--observatory-secondary); font-weight: 700; letter-spacing: 0; background: var(--orbit-control); border: 0; padding: 9px 18px; }
.ritual-timer-stage { width: min(330px, 39vh); height: min(330px, 39vh); background: transparent; isolation: isolate; }
.ritual-timer-stage::before {
    content: ''; position: absolute; width: 81.25%; height: 81.25%; border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, var(--orbit-glow), var(--orbit-panel) 55%, var(--orbit-page));
    box-shadow: 0 14px 22px var(--timer-panel-shadow), inset 0 0 0 11px var(--orbit-rim), inset 0 13px 18px var(--timer-panel-highlight), inset 0 -14px 24px var(--timer-panel-shadow);
}
.observatory-astronaut { position: absolute; width: 42%; height: auto; inset-inline-end: 0; top: -16%; z-index: 3; pointer-events: none; filter: drop-shadow(0 9px 10px var(--timer-panel-shadow)); }
.orbital-progress-ring { z-index: 1; }
.ring-track { stroke: var(--orbit-rim); opacity: .7; }
.ring-track, .ring-progress { stroke-width: 10; }
.timer-display, body.focus-ritual-active .timer-display { color: var(--orbit-ink); font-family: system-ui, sans-serif; font-size: clamp(3.2rem, 7vh, 4.7rem); font-weight: 750; letter-spacing: -.045em; text-shadow: 0 3px 10px var(--timer-panel-shadow); }
.timer-controls { display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 330px); gap: 15px 9px; padding: 0; background: none; border: 0; }
.timer-control-item { width: auto; min-width: 0; gap: 4px; }
.timer-control-primary { grid-column: 1 / -1; width: 100%; }
.timer-controls .control-btn { width: 100%; height: 48px; border-radius: 15px; background: var(--orbit-control); border: 1px solid var(--timer-card-border); color: var(--orbit-ink); box-shadow: inset 0 2px 3px var(--timer-panel-highlight), 0 3px 0 var(--timer-panel-shadow); }
.timer-controls .primary-btn, body.focus-ritual-active .timer-controls .primary-btn { height: 58px; gap: 12px; border: 0; border-radius: 19px; background: linear-gradient(180deg, var(--orbit-button), var(--orbit-rim)); color: var(--orbit-page); box-shadow: inset 0 2px 4px var(--timer-panel-highlight), 0 5px 0 var(--orbit-button-shadow), 0 10px 16px var(--timer-panel-shadow); }
body.break-mode .timer-controls .primary-btn { background: var(--break-accent); box-shadow: inset 0 2px 4px var(--timer-panel-highlight), 0 5px 0 var(--break-button-shadow), 0 10px 16px var(--timer-panel-shadow); }
.timer-control-primary .timer-control-text, html[lang='fa'] .timer-control-primary .timer-control-text { color: inherit; font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.timer-controls .primary-btn:hover { transform: translateY(-1px); }
.timer-controls .control-btn:active { transform: translateY(2px); }
.timer-control-text, html[lang='fa'] .timer-control-text { color: var(--observatory-secondary); font-size: .75rem; letter-spacing: 0; }
.sidebar, .topbar, .drawer { background: var(--orbit-panel); }
.sidebar-btn { border-radius: 14px; }
@media (max-width: 480px) {
    #stage { overflow-y: auto; align-items: safe center; padding: 12px; }
    .timer-panel, body.focus-ritual-active .timer-panel { padding: 20px 16px 18px; gap: 10px; }
    .ritual-timer-stage { width: min(290px, 70vw, 34vh); height: min(290px, 70vw, 34vh); }
    .timer-controls { width: min(100%, 310px); gap: 14px 7px; padding: 0; }
    .timer-controls .primary-btn { height: 54px; }
}
.toggle-switch { width: 50px; height: 44px; flex: 0 0 auto; }
.toggle-slider { inset: 10px 0; background: var(--observatory-inset); border-color: var(--observatory-rule); }
.toggle-slider::before { width: 18px; height: 18px; left: 3px; bottom: 2px; background: var(--observatory-secondary); }
.toggle-switch input:checked + .toggle-slider { background: var(--timer-play); border-color: var(--timer-play); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); background: var(--timer-play-ink); }
.settings-group input[type='range'] {
    --range-direction: to right;
    width: clamp(120px, 17vw, 190px);
    height: 44px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}
html[dir='rtl'] .settings-group input[type='range'] { --range-direction: to left; }
.settings-group input[type='range']::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(var(--range-direction), var(--timer-play) var(--range-progress, 0%), var(--observatory-rule) var(--range-progress, 0%));
}
.settings-group input[type='range']::-moz-range-track {
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(var(--range-direction), var(--timer-play) var(--range-progress, 0%), var(--observatory-rule) var(--range-progress, 0%));
}
.settings-group input[type='range']::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -7px;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--timer-play);
    border-radius: 50%;
    background: var(--menu-surface);
    box-shadow: 0 2px 8px var(--timer-panel-shadow);
}
.settings-group input[type='range']::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--timer-play);
    border-radius: 50%;
    background: var(--menu-surface);
    box-shadow: 0 2px 8px var(--timer-panel-shadow);
}
.setting-select {
    min-height: 44px;
    padding-inline: 14px 38px;
    border-radius: 13px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--observatory-secondary) 50%), linear-gradient(135deg, var(--observatory-secondary) 50%, transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    font: inherit;
    font-size: 0.9rem;
}
html[dir='rtl'] .setting-select { background-position: 14px 50%, 19px 50%; }
.setting-select:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.language-switch { padding: 4px; border-radius: 14px; background: var(--observatory-inset); }
.lang-option-btn { min-height: 40px; padding-inline: 14px; border-radius: 10px; font: inherit; font-size: 0.88rem; }
.lang-option-btn.active { background: var(--observatory-selected); color: var(--observatory-ink); }
@media (max-width: 480px) {
    .settings-group { gap: 8px; }
    .settings-group > label { font-size: 0.9rem; }
    .settings-group input[type='range'] { width: min(37vw, 150px); }
}

/* Task drawer */
#tasks-drawer { border: 0; }
#tasks-drawer .drawer-body { padding: 22px 20px; }
#tasks-drawer .task-input-group {
    align-items: center;
    gap: 5px;
    padding: 5px;
    margin-bottom: 24px;
    border: 1px solid var(--observatory-rule);
    border-radius: 16px;
    background: var(--observatory-inset);
    transition: border-color var(--speed) var(--ease);
}
#tasks-drawer .task-input-group:focus-within { border-color: var(--observatory-rule); background: var(--observatory-selected); box-shadow: none; }
#tasks-drawer .task-input-group input {
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--observatory-ink);
    font: inherit;
    font-size: 0.9rem;
    box-shadow: none;
    outline: none;
}
#tasks-drawer .task-input-group input:focus-visible { outline: none; box-shadow: none; }
#tasks-drawer .task-input-group button { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 12px; }
.task-empty { padding: 44px 16px 24px; text-align: center; color: var(--observatory-secondary); }
.task-empty[hidden], .sound-picker[hidden], .sound-picker-menu[hidden], .reminder-disclosure[hidden] { display: none; }
.task-empty-art { width: 138px; height: 95px; margin-bottom: 16px; stroke: var(--observatory-accent); stroke-width: 1.3; opacity: 0.72; }
.task-empty-art circle:nth-of-type(2) { fill: var(--observatory-accent); stroke: none; }
.task-empty h3 { margin: 0 0 8px; color: var(--observatory-ink); font-size: 0.95rem; font-weight: 600; }
.task-empty p { max-width: 230px; margin: auto; font-size: 0.82rem; line-height: 1.8; }
#tasks-drawer .task-item { padding: 10px; }
#tasks-drawer .task-text-btn, #tasks-drawer .task-edit-input { font: inherit; }
#tasks-drawer .task-item:focus-within .task-drag-handle { opacity: 1; }
#tasks-drawer .task-item.active, #tasks-drawer .task-item.editing { border-color: var(--observatory-rule); }
#tasks-drawer .task-text-btn { position: relative; }
#tasks-drawer .task-text-btn:hover, #tasks-drawer .task-text-btn:focus-visible { box-shadow: none; }
#tasks-drawer .task-edit-sizing { visibility: hidden; }
#tasks-drawer .task-edit-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0.2rem 0.38rem;
    border: 0;
    border-radius: 7px;
    background: var(--observatory-inset);
    color: var(--observatory-ink);
    font-size: calc(0.88rem * var(--drawer-font-scale));
    box-shadow: none;
}
#tasks-drawer .task-edit-input:focus-visible { outline: none; background: var(--observatory-selected); box-shadow: none; }
#tasks-drawer button:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; box-shadow: none; }


/* Accessible sound menu */
.sound-picker { position: relative; min-width: 140px; }
.sound-picker-button {
    width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 9px 13px; border: 1px solid var(--observatory-rule); border-radius: 13px;
    background: var(--observatory-inset); color: var(--observatory-ink); font: inherit; cursor: pointer;
}
.sound-picker-button:hover, .sound-picker-button[aria-expanded='true'] { border-color: var(--observatory-accent); background: var(--observatory-selected); }
.sound-picker-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sound-picker-menu {
    position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px); min-width: 160px; max-height: 254px; overflow-y: auto;
    padding: 6px; border: 1px solid var(--observatory-rule); border-radius: 15px; background: linear-gradient(var(--menu-surface), var(--menu-surface)), var(--observatory-page);
    box-shadow: 0 16px 36px var(--menu-shadow);
}
.sound-picker-option { min-height: 40px; border-radius: 10px; font: inherit; font-size: 0.86rem; }
.sound-picker-mark { margin-inline-start: auto; color: var(--observatory-accent); }

/* Keep history information together without large, empty rows. */
.stats-history-list .history-session { gap: 10px; min-height: 58px; padding: 7px 4px; }
.stats-history-list .history-session-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 0.85rem; }
.stats-history-list .history-session-details { flex: 0 1 auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.stats-history-list .history-session-tag { min-height: 36px; margin: 0; }
.stats-history-list .history-session-time { white-space: nowrap; }
.stats-history-list .history-session-task { white-space: normal; overflow-wrap: anywhere; }
.stats-history-list .history-session-meta { margin-inline-start: 2px; }
.stats-history-list .history-session-badge { padding: 4px 8px; }
@media (max-width: 600px) {
    .stats-history-list .history-session { flex-wrap: wrap; }
    .stats-history-list .history-session-details { flex: 1 1 180px; }
}

.shared-body { min-height: 100vh; overflow: auto; background: var(--observatory-page); color: var(--observatory-ink); }
.shared-page { position: relative; z-index: 1; max-width: 640px; margin: auto; padding: 24px 16px; }
.shared-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.shared-header a, .shared-header button { color: var(--observatory-ink); }
.shared-card { padding: 24px; background: var(--observatory-surface); border: 1px solid var(--observatory-rule); border-radius: 22px; backdrop-filter: blur(20px); }
.shared-card h1 { font-size: 1.3rem; margin-bottom: 12px; }
.shared-card form, .shared-card label { display: grid; gap: 8px; margin: 14px 0; }
.shared-card input { width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; color: var(--observatory-ink); background: var(--observatory-inset); border: 1px solid var(--observatory-rule); border-radius: 10px; }
.shared-card button, .shared-header button { min-height: 42px; padding: 8px 14px; font: inherit; color: var(--observatory-ink); background: var(--observatory-selected); border: 1px solid var(--observatory-rule); border-radius: 12px; cursor: pointer; }
.shared-card button:disabled { opacity: .45; cursor: default; }
.shared-card p { line-height: 1.7; color: var(--observatory-secondary); }
.shared-time { font-size: clamp(3rem, 12vw, 5rem); direction: ltr; text-align: center; font-variant-numeric: tabular-nums; padding: 24px 0; }
.shared-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.shared-card [hidden] { display: none !important; }
#shared-room-list { display: grid; gap: 8px; margin: 20px 0; }
#shared-room-list h2 { font-size: 1rem; }
#shared-room-list:empty { display: none; }

.timer-tag-picker[hidden] { display: none !important; }
.focus-duration-input { appearance: textfield; -moz-appearance: textfield; }
.focus-duration-input::-webkit-inner-spin-button, .focus-duration-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

html[data-theme='dark'] { --planet-light: #70608a; --planet-middle: #342a4f; --planet-shadow: #15142e; --planet-crater: rgba(18, 15, 36, .18); }
html[data-theme='light'] { --planet-light: #f8edf8; --planet-middle: #c7b2d5; --planet-shadow: #a78fb9; --planet-crater: rgba(86, 66, 105, .12); }
.ritual-timer-stage::before {
    background:
        radial-gradient(ellipse at 22% 32%, var(--planet-crater) 0 2%, transparent 2.5%),
        radial-gradient(ellipse at 78% 67%, var(--planet-crater) 0 3%, transparent 3.5%),
        radial-gradient(ellipse at 32% 79%, var(--planet-crater) 0 2%, transparent 2.5%),
        radial-gradient(circle at 29% 24%, var(--planet-light), var(--planet-middle) 44%, var(--planet-shadow) 84%);
    box-shadow: 0 14px 25px var(--timer-panel-shadow), inset 7px 10px 24px var(--timer-panel-highlight), inset -15px -18px 30px var(--timer-panel-shadow);
}
.ring-track { stroke: var(--orbit-rim); opacity: .55; }
.observatory-astronaut { width: 36%; inset-inline: auto; left: 22%; top: -6%; }
.reflection-modal { padding: 20px; background: rgba(10, 9, 24, .68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.reflection-content { width: min(100%, 430px); padding: 26px; border: 1px solid var(--timer-card-border); border-radius: 26px; background: linear-gradient(150deg, var(--orbit-panel), var(--orbit-page)); box-shadow: 0 22px 65px var(--timer-panel-shadow), inset 0 1px 0 var(--timer-panel-highlight); }
.reflection-content h3 { color: var(--orbit-ink); font-size: 1.35rem; font-weight: 750; margin-bottom: 16px; }
#reflectionInput { min-height: 110px; border-radius: 16px; border: 1px solid var(--timer-card-border); background: var(--orbit-control); color: var(--orbit-ink); padding: 14px; line-height: 1.6; }
#reflectionInput:focus-visible { outline: 2px solid var(--orbit-button); outline-offset: 2px; }
.reflection-actions { gap: 10px; }
.reflection-actions .control-btn { width: auto; min-height: 48px; border-radius: 15px; background: var(--orbit-control); color: var(--orbit-ink); font: inherit; font-weight: 700; }
.reflection-actions .primary-btn, body.break-mode .reflection-actions .primary-btn { background: var(--orbit-button); color: var(--orbit-page); border: 0; box-shadow: 0 4px 0 var(--orbit-button-shadow); }

.timer-panel .session-type { align-self: auto; margin-left: auto; margin-right: 0; }
.atmosphere-preview { position: absolute; z-index: 6; top: 10px; inset-inline: 14px; display: flex; justify-content: center; gap: 12px; align-items: center; color: var(--orbit-ink); font-size: .8rem; }
.atmosphere-preview[hidden] { display: none; }
.atmosphere-preview a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

html[data-atmosphere='dawn'] { --orbit-page:#342334; --orbit-panel:#51354a; --orbit-glow:#9b5f69; --orbit-control:#68475b; --orbit-rim:#d49b99; --orbit-ink:#fff4e8; --orbit-button:#f4c1a3; --orbit-button-shadow:#a96f6a; --planet-light:#e9b19c; --planet-middle:#855869; --planet-shadow:#39283a; }
html[data-atmosphere='rain'] { --orbit-page:#112833; --orbit-panel:#203d49; --orbit-glow:#43717b; --orbit-control:#345665; --orbit-rim:#8abdc1; --orbit-ink:#efffff; --orbit-button:#a9d6d0; --orbit-button-shadow:#5d8f94; --planet-light:#9fcacc; --planet-middle:#496f7a; --planet-shadow:#1b3541; }
html[data-atmosphere='amber'] { --orbit-page:#2c1e28; --orbit-panel:#493039; --orbit-glow:#9e6650; --orbit-control:#62454b; --orbit-rim:#d9a574; --orbit-ink:#fff5e8; --orbit-button:#f1c28a; --orbit-button-shadow:#9f725c; --planet-light:#e6b889; --planet-middle:#8e6455; --planet-shadow:#3a282f; }
html[data-atmosphere='lantern'] { --orbit-page:#11182e; --orbit-panel:#202942; --orbit-glow:#4d4867; --orbit-control:#323d59; --orbit-rim:#dcad77; --orbit-ink:#fff5e6; --orbit-button:#f0c58d; --orbit-button-shadow:#9d765b; --planet-light:#e4bf9a; --planet-middle:#676080; --planet-shadow:#20263d; }
html[data-atmosphere='starlight'] { --orbit-page:#13132e; --orbit-panel:#252448; --orbit-glow:#534f92; --orbit-control:#373663; --orbit-rim:#a99ce8; --orbit-ink:#f8f5ff; --orbit-button:#d3c2ff; --orbit-button-shadow:#7c6ca8; --planet-light:#b9b5f0; --planet-middle:#5a568c; --planet-shadow:#242347; }
html[data-atmosphere='lantern'] .bg-animation::before { background: linear-gradient(rgba(15,18,39,.35), rgba(15,18,39,.35)), url('./assets/space/lantern-night.png') center/cover no-repeat; opacity: .82; transform: none; inset: 0; }
html[data-atmosphere='starlight'] .bg-animation::before { background: linear-gradient(rgba(15,16,43,.4), rgba(15,16,43,.4)), url('./assets/space/starlight-journey.png') center/cover no-repeat; opacity: .82; transform: none; inset: 0; }

.space-content { max-width: 850px; }
.space-intro { font-size: 1.02rem; line-height: 1.8; }
.space-balance { display: inline-flex; padding: 10px 16px; border-radius: 16px; background: var(--observatory-selected); color: var(--observatory-ink) !important; font-size: 1.15rem; }
.space-items, .space-badges { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; padding: 0; background: none; border: 0; box-shadow: none; }
.space-item { display: flex; flex-direction: column; align-items: stretch; gap: 11px; padding: 10px; border: 1px solid var(--observatory-rule); border-radius: 21px; background: var(--observatory-surface); }
.space-item-art { position: relative; overflow: hidden; height: 110px; display: grid; place-items: center; border-radius: 15px; background: radial-gradient(circle at 65% 25%, #8878ab, #26243f 75%); }
.space-item-art::before { content:''; position:absolute; width:100px; height:100px; border-radius:50%; left:12%; bottom:-58px; background:rgba(255,255,255,.14); box-shadow:0 0 32px rgba(255,255,255,.08); }
.space-item[data-atmosphere='dawn'] .space-item-art { background: linear-gradient(150deg,#f3b998,#785269); }
.space-item[data-atmosphere='rain'] .space-item-art { background: linear-gradient(150deg,#85bbc0,#264552); }
.space-item[data-atmosphere='amber'] .space-item-art { background: linear-gradient(150deg,#e3b177,#613f48); }
.space-item[data-atmosphere='lantern'] .space-item-art { background: linear-gradient(#15203a44,#15203a55), url('./assets/space/lantern-night.png') center/cover; }
.space-item[data-atmosphere='starlight'] .space-item-art { background: linear-gradient(#17173544,#17173555), url('./assets/space/starlight-journey.png') center/cover; }
.space-motif { position: relative; z-index:1; width: 46px; height: 46px; font-size: 1.5rem; color:#fff8e8; background:rgba(20,18,42,.35); box-shadow: inset 0 1px 1px #ffffff40; }
.space-item-name { flex: none; font-weight: 750; color: var(--observatory-ink); line-height: 1.45; }
.space-actions { width: auto; padding: 0; margin-top: auto; display: flex; gap: 6px; }
.space-actions button { flex:1; min-width: 0; padding: 8px; font-size: .8rem; line-height:1.4; }
.space-actions button:last-child:not(:disabled) { background: var(--observatory-selected); }
.space-badges > div { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--observatory-rule); border-radius:19px; background:var(--observatory-surface); }
.badge-art { width:64px; height:64px; flex:0 0 64px; }
.badge-art svg { display:block; width:100%; height:100%; }
.badge-locked .badge-art { filter: grayscale(.75); opacity:.5; }
.badge-copy { display:grid; gap:4px; color:var(--observatory-ink); font-size:.85rem; line-height:1.5; }
.badge-copy > span { color:var(--observatory-secondary); font-size:.75rem; }
@media (max-width: 700px) { .space-items, .space-badges { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }
@media (max-width: 390px) { .space-items, .space-badges { grid-template-columns: 1fr; } .space-item-art { height:100px; } }

.observatory-astronaut { left: 27%; top: -14%; }
.space-content .space-intro { margin: 0 0 14px; }
.space-content .space-balance { display: table; margin: 0 0 26px; }
.space-content h3 { margin: 28px 0 8px; }
.space-content .space-intro + .space-balance + h3 { margin-top: 0; }
.stats-chart-card, .tag-breakdown-card { background: linear-gradient(145deg, var(--observatory-surface), var(--orbit-panel)); }
.stats-chart-card { min-height: 280px; }
.donut-chart { width: min(100%, 250px); padding: 8px; border-radius: 50%; background: radial-gradient(circle, var(--observatory-inset), transparent 68%); }
.donut-chart circle { stroke-width: 2.8px; filter: saturate(.65); }
.donut-segment { stroke-linecap: butt; }
.donut-center { font-size: 3.3px; font-weight: 750; }
.donut-center-sub { font-size: 1.8px; }
.tag-breakdown { gap: 18px; }
.tag-breakdown-row { padding: 5px 0; }
.tag-breakdown-bar { height: 7px; border-radius: 99px; overflow: hidden; }
.tag-breakdown-bar > * { border-radius: inherit; }
@media (max-width: 480px) { .space-content .space-balance { margin-bottom: 22px; } .stats-chart-card { min-height: 240px; } }

.orbital-progress-ring .ring-progress { stroke: url(#orbitProgressGradient); filter: drop-shadow(0 0 5px var(--orbit-rim)); }
body.dragging-duration .orbital-progress-ring .ring-progress { filter: drop-shadow(0 0 7px var(--orbit-rim)); }
.drag-handle, body.dragging-duration .drag-handle {
    z-index: 2;
    width: 16px; height: 16px;
    border: 2px solid var(--orbit-ink);
    background: radial-gradient(circle at 32% 26%, var(--orbit-ink), var(--orbit-button) 35%, var(--orbit-rim) 80%);
    box-shadow: 0 2px 6px var(--timer-panel-shadow), 0 0 0 3px var(--timer-panel-highlight);
}
body.drag-enabled .ritual-timer-stage:hover .drag-handle,
body.dragging-duration .drag-handle { transform: translate(-50%, -50%); }
body.dragging-duration .drag-handle::after { display: none; }
.ritual-timer-stage { touch-action: auto; }
body.duration-adjustable .timer-display { pointer-events: auto; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
body.duration-adjustable .timer-display:focus-visible { outline: 2px solid var(--orbit-button); outline-offset: 8px; border-radius: 10px; }
.duration-ruler { --ruler-shift: 0px; position: absolute; z-index: 2; top: 64%; left: 50%; width: 130px; max-width: 48%; height: 14px; transform: translateX(-50%); opacity: 0; pointer-events: none; background: repeating-linear-gradient(to right, var(--orbit-button) 0 2px, transparent 2px 12px) var(--ruler-shift) center / auto 8px repeat-x; mask-image: linear-gradient(to right, transparent, #000 20% 80%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 20% 80%, transparent); transition: opacity .15s var(--ease); }
body.duration-scrubbing .duration-ruler { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .duration-ruler { transition: none; } }

html[data-atmosphere='frieren'] { --orbit-page:#152a29; --orbit-panel:#1f3938; --orbit-glow:#496e62; --orbit-control:#35514d; --orbit-rim:#a6ccad; --orbit-ink:#f5fff2; --orbit-button:#c8e4be; --orbit-button-shadow:#6e9b80; --planet-light:#c6dfc4; --planet-middle:#668f7d; --planet-shadow:#243e38; --character-art:url('./assets/space/frieren-night.png'); }
html[data-atmosphere='wanderer'] { --orbit-page:#101e3d; --orbit-panel:#1b3058; --orbit-glow:#42659e; --orbit-control:#304d7c; --orbit-rim:#8dbbe8; --orbit-ink:#f3f8ff; --orbit-button:#b8dfff; --orbit-button-shadow:#648fbf; --planet-light:#c1e4ff; --planet-middle:#5682b4; --planet-shadow:#1c335e; --character-art:url('./assets/space/wanderer-sky.png'); }
html[data-atmosphere='ranpo'] { --orbit-page:#261b28; --orbit-panel:#3c2936; --orbit-glow:#78504c; --orbit-control:#5a404a; --orbit-rim:#d0a07d; --orbit-ink:#fff4e9; --orbit-button:#efc499; --orbit-button-shadow:#9e6c61; --planet-light:#ecc9a4; --planet-middle:#87645f; --planet-shadow:#3e2935; --character-art:url('./assets/space/ranpo-study.png'); }
html[data-atmosphere='frieren'] .bg-animation::before, html[data-atmosphere='wanderer'] .bg-animation::before, html[data-atmosphere='ranpo'] .bg-animation::before { background: linear-gradient(rgba(12,14,27,.27), rgba(12,14,27,.38)), var(--character-art) 72% center / cover no-repeat; opacity: .9; transform: none; inset: 0; }
.space-item[data-atmosphere='frieren'] .space-item-art { background: linear-gradient(#15132322,#15132344), url('./assets/space/frieren-night.png') 78% center / cover; }
.space-item[data-atmosphere='wanderer'] .space-item-art { background: linear-gradient(#15132322,#15132344), url('./assets/space/wanderer-sky.png') 78% center / cover; }
.space-item[data-atmosphere='ranpo'] .space-item-art { background: linear-gradient(#15132322,#15132344), url('./assets/space/ranpo-study.png') 78% center / cover; }
@media (max-width: 600px) {
    html[data-atmosphere='frieren'] .timer-panel, html[data-atmosphere='wanderer'] .timer-panel, html[data-atmosphere='ranpo'] .timer-panel,
    html[data-atmosphere='frieren'] body.focus-ritual-active .timer-panel, html[data-atmosphere='wanderer'] body.focus-ritual-active .timer-panel, html[data-atmosphere='ranpo'] body.focus-ritual-active .timer-panel { background: linear-gradient(180deg, rgba(15,18,32,.24), var(--orbit-panel) 55%), var(--character-art) 78% top / auto 55% no-repeat, var(--orbit-panel); }
}

.shared-body { background: var(--orbit-page); }
.shared-page { max-width: 720px; padding: clamp(16px, 4vw, 32px); }
.shared-header { gap: 12px; }
.shared-header a, .shared-header button { border: 0; border-radius: 14px; padding: 10px 14px; background: var(--orbit-control); color: var(--orbit-ink); font: inherit; text-decoration: none; }
.shared-brand { flex: 1; text-align: center; color: var(--orbit-button); font-weight: 800; letter-spacing: .05em; }
.shared-card { position: relative; overflow: hidden; padding: clamp(22px, 5vw, 40px); border-radius: 30px; border-color: var(--timer-card-border); background: linear-gradient(155deg, var(--orbit-panel), var(--orbit-page)); box-shadow: 0 22px 60px var(--timer-panel-shadow), inset 0 1px 0 var(--timer-panel-highlight); }
.shared-card h1 { color: var(--orbit-ink); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; }
.shared-eyebrow { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 14px; background: var(--orbit-control); color: var(--orbit-button); }
.shared-card p, .shared-card label { color: var(--observatory-secondary); line-height: 1.7; }
.shared-card form { gap: 10px; }
.shared-card input { min-height: 50px; padding: 10px 14px; border-radius: 15px; background: var(--orbit-control); color: var(--orbit-ink); border-color: var(--timer-card-border); }
.shared-card button { min-height: 48px; border-radius: 15px; background: var(--orbit-control); color: var(--orbit-ink); border-color: var(--timer-card-border); font-weight: 700; }
.shared-card form > button, #shared-start { background: var(--orbit-button); color: var(--orbit-page); border: 0; box-shadow: 0 4px 0 var(--orbit-button-shadow); }
.shared-card button:focus-visible, .shared-card input:focus-visible, .shared-advanced summary:focus-visible { outline: 2px solid var(--orbit-button); outline-offset: 3px; }
.shared-advanced { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--timer-card-border); border-radius: 16px; color: var(--observatory-secondary); }
.shared-advanced summary { cursor: pointer; font-weight: 700; }
.shared-advanced button { margin: 10px 4px 0; }
.shared-room-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.shared-room-meta p { margin: 0; }
#shared-connection { padding: 6px 10px; border-radius: 99px; background: var(--orbit-control); font-size: .8rem; }
#shared-connection[data-connected='false'] { color: var(--orbit-button); }
.shared-planet { position: relative; display: grid; place-items: center; width: min(280px, 68vw); aspect-ratio: 1; margin: 34px auto 12px; border: 8px solid var(--orbit-rim); border-radius: 50%; background: radial-gradient(circle at 28% 24%, var(--planet-light), var(--planet-middle) 44%, var(--planet-shadow) 84%); box-shadow: 0 12px 24px var(--timer-panel-shadow), inset -15px -18px 30px var(--timer-panel-shadow); }
.shared-planet img { position: absolute; z-index: 1; width: 38%; top: -20%; left: 26%; pointer-events: none; }
.shared-time { position: relative; padding: 0; font-family: system-ui, sans-serif; font-size: clamp(3.2rem, 12vw, 4.7rem); font-weight: 750; letter-spacing: -.04em; color: var(--orbit-ink); }
.shared-state { text-align: center; }
.shared-actions { justify-content: center; }
.shared-actions button { flex: 1 1 120px; }
#shared-invite-wrap { padding: 14px; border: 1px solid var(--timer-card-border); border-radius: 16px; background: var(--orbit-control); }
#shared-invite { direction: ltr; }
@media (max-width: 480px) { .shared-page { padding: 12px; } .shared-card { padding: 22px 18px; } .shared-header a, .shared-header button { font-size: .8rem; } }