/* main.css bundled: 2026-05-07T19:32:59.531Z */
/* zyFOCUS CSS entry (source) */
/* begin import: public/css/zy/system.css */
/* zyFOCUS CSS System (source of truth) */
@layer core, foundation, theme, utilities, modules, sections, overrides;

/* Core primitives */
/* begin import: public/css/zy/zy-ui.css */
/* ZY UI Base (Extracted) */

/* ===============================
   ZyUI Tokens (Additive)
   =============================== */
:root {
    --zyui-radius-sm: 10px;
    --zyui-radius-md: 14px;
    --zyui-radius-lg: 18px;
    --zyui-radius-xl: 22px;
    --zyui-gap-sm: 0.5rem;
    --zyui-gap-md: 0.9rem;
    --zyui-gap-lg: 1.2rem;
    --zyui-shadow-soft: 0 12px 30px rgb(0 0 0 / 20%);
    --zyui-shadow-elevated: 0 20px 48px rgb(0 0 0 / 35%);
    --zyui-border-soft: color-mix(in srgb, var(--primary) 16%, var(--glass-border));
    --zyui-border-strong: color-mix(in srgb, var(--primary) 32%, var(--glass-border));
    --zyui-surface-soft: color-mix(in srgb, var(--surface) 86%, transparent);
    --zyui-surface-strong: color-mix(in srgb, var(--surface) 94%, transparent);
    --zyui-accent-soft: color-mix(in srgb, var(--primary) 22%, transparent);
    --zyui-accent-strong: color-mix(in srgb, var(--primary) 40%, transparent);
    --zyui-focus-ring: var(--focus-ring, color-mix(in srgb, var(--primary) 45%, transparent));
    --zyui-readable-secondary: color-mix(in srgb, var(--text-primary) 78%, var(--background));
    --zyui-readable-tertiary: color-mix(in srgb, var(--text-primary) 58%, var(--background));
}

body,
button,
input,
textarea,
select {
    font-family: var(--font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
}

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--grid-gap);
    margin-bottom: var(--grid-gap);
}

.card-grid > *,
.stats-grid > *,
.actions-grid > * {
    min-width: 0;
}

/* Glass Card Base */
.glass-card {
    background:
        linear-gradient(135deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 1.5%)),
        var(--glass-bg);
    backdrop-filter: blur(28px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: var(--card-pad);
    box-shadow: var(--glass-shadow);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--grid-gap);
    margin-bottom: var(--grid-gap);
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 14px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 36%, transparent);
}

.btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
}

.btn-secondary {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--glass-border));
}

/* ===============================
   ZyUI Namespaced Components
   =============================== */
.zyui-card {
    background:
        linear-gradient(135deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 1.5%)),
        var(--glass-bg);
    backdrop-filter: blur(28px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: var(--zyui-radius-lg);
    padding: var(--card-pad);
    box-shadow: var(--glass-shadow);
}

.zyui-toolbar {
    display: grid;
    gap: var(--zyui-gap-md);
    padding: 1rem 1.2rem;
    border-radius: var(--zyui-radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--primary) 4%), color-mix(in srgb, var(--surface) 88%, transparent));
    border: 1px solid var(--zyui-border-soft);
}

.zyui-section {
    position: relative;
}

.zyui-section-header {
    display: grid;
    gap: 0.35rem;
}

.zyui-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zyui-gap-sm);
    padding: 0.6rem 0.75rem;
    border-radius: 999px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--surface) 92%, var(--primary) 8%), color-mix(in srgb, var(--surface) 84%, transparent));
    border: 1px solid var(--zyui-border-soft);
    align-items: center;
}

.zyui-pill {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--zyui-surface-soft);
    border: 1px solid var(--zyui-border-soft);
}

.zyui-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--zyui-gap-md);
    padding: 1rem 1.2rem;
    border-radius: var(--zyui-radius-lg);
    background: linear-gradient(140deg, color-mix(in srgb, var(--surface) 94%, var(--primary) 6%), color-mix(in srgb, var(--surface) 86%, transparent));
    border: 1px solid var(--zyui-border-strong);
    box-shadow: var(--zyui-shadow-elevated);
}

.zyui-title {
    font-weight: 700;
}

.zyui-subtitle {
    color: var(--zyui-readable-secondary);
    line-height: 1.65;
}

.zyui-meta {
    color: var(--zyui-readable-tertiary);
    font-size: 0.85rem;
    line-height: 1.55;
}

.zyui-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
}

.zyui-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: var(--zyui-gap-lg);
}

.zyui-side {
    display: grid;
    gap: var(--zyui-gap-md);
}

.zyui-main {
    min-width: 0;
}

.zyui-grid {
    display: grid;
    gap: var(--zyui-gap-md);
}

/* ===============================
   ZyUI Bootstrap-like System
   =============================== */
.zyui-card-grid {
    display: grid;
    gap: var(--zyui-gap-lg);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.zyui-card {
    display: grid;
    gap: var(--zyui-gap-sm);
}

.zyui-card-header,
.zyui-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zyui-gap-sm);
}

.zyui-card-title {
    font-weight: 700;
}

.zyui-card-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.zyui-card-body {
    display: grid;
    gap: var(--zyui-gap-sm);
}

.zyui-card-muted {
    background:
        linear-gradient(135deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1%)),
        color-mix(in srgb, var(--surface) 85%, transparent);
    border-color: color-mix(in srgb, var(--glass-border) 70%, transparent);
}

.zyui-card-compact {
    padding: 1rem;
}

.zyui-sidebar {
    display: grid;
    gap: var(--zyui-gap-md);
    padding: 1.2rem;
    border-radius: var(--zyui-radius-lg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--primary) 6%), color-mix(in srgb, var(--surface) 82%, transparent));
    border: 1px solid var(--zyui-border-soft);
    min-width: 240px;
}

.zyui-sidebar-header {
    display: grid;
    gap: 0.3rem;
}

.zyui-sidebar-title {
    font-weight: 700;
}

.zyui-sidebar-nav {
    display: grid;
    gap: 0.35rem;
}

.zyui-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.zyui-sidebar-item:hover,
.zyui-sidebar-item:focus-visible {
    background: color-mix(in srgb, var(--surface) 82%, var(--primary) 18%);
    border-color: var(--zyui-border-soft);
    color: var(--text-primary);
}

.zyui-sidebar-item.is-active {
    background: var(--zyui-accent-soft);
    border-color: var(--zyui-accent-strong);
    color: #fff;
}

.zyui-bottom-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.35rem;
    padding: 0.45rem 0.8rem calc(0.45rem + env(safe-area-inset-bottom));
    border-radius: 18px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--surface) 96%, var(--primary) 4%), color-mix(in srgb, var(--surface) 88%, transparent));
    border: 1px solid var(--zyui-border-soft);
    box-shadow: 0 16px 36px rgb(0 0 0 / 35%);
}

.zyui-bottom-nav.is-fixed {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.25rem;
    width: min(720px, calc(100% - 2rem));
    z-index: 40;
}

.zyui-bottom-nav-item {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    padding: 0.45rem 0.35rem;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.zyui-bottom-nav-item:hover,
.zyui-bottom-nav-item:focus-visible {
    background: color-mix(in srgb, var(--surface) 78%, var(--primary) 22%);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.zyui-bottom-nav-item.is-active {
    background: var(--zyui-accent-soft);
    color: #fff;
}

.zyui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: var(--zyui-surface-soft);
    border: 1px solid var(--zyui-border-soft);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.zyui-icon.is-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
}

.zyui-icon.is-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    font-size: 1.2rem;
}

.zyui-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--zyui-border-soft);
    background: var(--zyui-surface-soft);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}

.zyui-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--zyui-surface-soft);
    border: 1px solid var(--zyui-border-soft);
    color: var(--text-secondary);
}

.zyui-sidebar-item:focus-visible,
.zyui-bottom-nav-item:focus-visible,
.zyui-icon-btn:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--zyui-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    .glass-card,
    .btn,
    .zyui-sidebar-item,
    .zyui-bottom-nav-item {
        transition: none;
        transform: none;
    }
}

.zyui-badge.is-success {
    background: rgb(16 185 129 / 20%);
    border-color: rgb(16 185 129 / 40%);
    color: #b6fcd5;
}

.zyui-badge.is-warning {
    background: rgb(245 158 11 / 18%);
    border-color: rgb(245 158 11 / 40%);
    color: #ffd39a;
}

.zyui-badge.is-danger {
    background: rgb(239 68 68 / 18%);
    border-color: rgb(239 68 68 / 40%);
    color: #ffb7b7;
}

@media (width <= 1080px) {
    .zyui-layout {
        grid-template-columns: 1fr;
    }
}

@media (width <= 720px) {
    .zyui-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* end import: public/css/zy/zy-ui.css */
/* begin import: public/css/zy/zy-base.css */
.btn-secondary,
.btn-icon,
.header-btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgb(15 23 42 / 18%);
}

.btn:focus-visible,
.btn-icon:focus-visible,
.header-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 70%, transparent);
    outline-offset: 2px;
}

.btn-secondary {
    border: 1px solid var(--border-subtle);
}

.form-input,
.form-textarea,
select,
.form-select {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
select:focus {
    border-color: color-mix(in srgb, var(--primary) 70%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.modal,
.modal-content,
.modal2 .modal-content,
.modal3-content {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated);
    border: 1px solid var(--border-subtle);
    background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface) 78%, transparent));
}

.modal-overlay,
.modal2.modal-overlay,
.modal3.modal-overlay {
    backdrop-filter: blur(18px);
}

.header-actions .net-indicator,
.badge-pill {
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
}

.nav-link,
.bottom-nav-link {
    border-radius: var(--radius-md);
}

.calendar-week-header,
.calendar-day-header {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (width <= 768px) {
    .section-header {
        border-radius: var(--radius-lg);
    }

    .glass-card,
    .stat-card {
        border-radius: var(--radius-md);
    }
}

/* end import: public/css/zy/zy-base.css */
/* begin import: public/css/zy/zy-headers.css */
.header {
    height: 78px;
    padding: 0 2.2rem;
    background: linear-gradient(120deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface) 70%, transparent));
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 12px 32px rgb(2 6 23 / 28%);
    backdrop-filter: blur(20px);
}

.header .header-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
}

.header #header-title,
.header #header-subtitle {
    display: block;
}

.header #header-title {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.header #header-subtitle {
    font-size: 0.82rem;
    color: var(--text-tertiary);
}

.header .header-actions {
    gap: 0.75rem;
    align-items: center;
}

.header-profile-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header {
    text-align: left;
}

.section-header .header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.header-btn,
.header-profile-btn,
.mobile-menu-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 10px 20px rgb(2 6 23 / 20%);
    padding: 0;
}

.header-btn:hover,
.header-profile-btn:hover,
.mobile-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgb(2 6 23 / 28%);
}

.header-actions .net-indicator {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    box-shadow: 0 8px 16px rgb(2 6 23 / 18%);
}

@media (width <= 768px) {
    .header {
        height: auto;
        padding: 0.9rem var(--mobile-pad);
    }

    #header-title {
        font-size: 1rem;
    }

    #header-subtitle {
        font-size: 0.75rem;
    }
}

/* end import: public/css/zy/zy-headers.css */
/* begin import: public/css/zy/zy-motion.css */
.glass-card,
.stat-card,
.music-track,
.task-item,
.note-card,
.calendar-grid .calendar-day,
.store-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.glass-card:hover,
.stat-card:hover,
.music-track:hover,
.task-item:hover,
.note-card:hover,
.store-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgb(15 23 42 / 18%);
}

.btn {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.section.active .glass-card,
.section.active .stat-card,
.section.active .music-track,
.section.active .task-item,
.section.active .note-card,
.section.active .store-card {
  animation: fadeUp 0.45s ease both;
}

/* end import: public/css/zy/zy-motion.css */
/* begin import: public/css/zy/zy-forms.css */
.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* end import: public/css/zy/zy-forms.css */
/* begin import: public/css/zy/zy-modals.css */
/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

/* end import: public/css/zy/zy-modals.css */
/* begin import: public/css/zy/zy-tabs.css */
.settings-tabs {
    display: grid;
    gap: 0.45rem;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 0.2rem;
    scrollbar-gutter: stable;
}

.settings-tab {
    border: 1px solid var(--glass-border);
    background: rgb(255 255 255 / 4%);
    color: var(--text-secondary);
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-tab:hover {
    border-color: rgb(99 102 241 / 35%);
    color: var(--text-primary);
}

.settings-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 20px rgb(79 92 251 / 25%);
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border);
    background: var(--surface-light);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-tab:hover {
    border-color: var(--border);
    background: var(--surface);
}

.filter-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
    color: white;
}

.admin-tabs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.25rem;
}

.admin-tab {
    border: 1px solid var(--glass-border);
    background: rgb(15 23 42 / 55%);
    color: var(--text-secondary);
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.admin-tab.active {
    background: linear-gradient(135deg, rgb(99 102 241 / 35%), rgb(15 23 42 / 90%));
    color: var(--text-primary);
    border-color: rgb(99 102 241 / 45%);
    box-shadow: 0 12px 20px rgb(15 23 42 / 35%);
}

.admin-tab {
    position: relative;
}

.admin-tab::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -6px;
    height: 2px;
    border-radius: 999px;
    background: transparent;
    transition: background 0.2s ease;
}

.admin-tab.active::after {
    background: rgb(99 102 241 / 80%);
}

/* end import: public/css/zy/zy-tabs.css */
/* begin import: public/css/zy/zy-pills.css */
.badge-pill {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgb(79 92 251 / 20%);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.badge-pill-accent {
    background: rgb(197 163 98 / 22%);
    color: #d6b470;
    border: 1px solid rgb(214 180 112 / 35%);
}

.vip-pill {
    background: linear-gradient(120deg, #f59e0b, #facc15);
    color: #0f172a;
    border: 1px solid rgb(255 255 255 / 35%);
}

.plus-pill {
    background: linear-gradient(120deg, #38bdf8, #6366f1);
    color: #0b1120;
    border: 1px solid rgb(255 255 255 / 35%);
}

.free-pill {
    background: linear-gradient(120deg, rgb(148 163 184 / 60%), rgb(71 85 105 / 80%));
    color: #f8fafc;
    border: 1px solid rgb(148 163 184 / 45%);
}

.toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    background: rgb(255 255 255 / 4%);
}

.toggle-pill input {
    width: 16px;
    height: 16px;
}

/* end import: public/css/zy/zy-pills.css */
/* begin import: public/css/zy/zy-countdown.css */
/* Countdown UI (v2) */
#countdown-settings {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1rem;
}

#countdown-settings.is-recurring .countdown-recurring-only {
    display: flex;
}

.countdown-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.countdown-field {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.countdown-field-wide {
    grid-column: span 6;
}

.countdown-recurring-only {
    display: none;
}

.countdown-alerts {
    grid-column: span 12;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.countdown-actions {
    grid-column: span 12;
    display: flex;
    justify-content: flex-end;
}

.countdown-actions .btn {
    height: 44px;
    white-space: nowrap;
}

.countdown-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem;
}

.countdown-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.countdown-card {
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0.75rem 0.9rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

.countdown-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.countdown-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.countdown-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgb(99 102 241 / 12%);
    color: var(--primary);
    border: 1px solid rgb(99 102 241 / 30%);
    font-weight: 600;
}

.countdown-title {
    font-weight: 600;
}

.countdown-time {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.countdown-progress {
    height: 4px;
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
}

.countdown-progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.3s ease;
}

.countdown-remove {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    padding: 0.3rem;
    border-radius: 8px;
}

.countdown-remove:hover {
    color: var(--danger);
    background: rgb(239 68 68 / 12%);
}

@media (width <= 900px) {
    .countdown-grid {
        grid-template-columns: 1fr;
    }

    .countdown-field,
    .countdown-field-wide {
        grid-column: span 1;
    }

    .countdown-actions {
        justify-content: flex-start;
    }
}

/* end import: public/css/zy/zy-countdown.css */

/* App system */
/* begin import: public/css/zy/base.css */
/* CSS Variables for Themes */

:root {
    --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
    --font-display: "IBM Plex Serif", "Times New Roman", serif;
    --text-scale: 1;
    --primary: #1ea68c;
    --primary-dark: #15806d;
    --primary-light: #39c7ad;
    --secondary: #f5c84b;
    --accent: #f25f3a;
    --danger: #ef4444;
    --warning: #f97316;
    --info: #38b3f2;
    --success: #22c55e;
    --background: #0b1217;
    --surface: #131a22;
    --surface-light: #1b2430;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --border: #2a3545;
    --glass-bg: rgb(19 26 34 / 72%);
    --glass-border: rgb(255 255 255 / 10%);
    --glass-shadow: 0 30px 80px rgb(4 12 22 / 60%);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 12%);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 10%);
    --shadow-lg: 0 10px 15px rgb(0 0 0 / 10%);
    --shadow-xl: 0 20px 25px rgb(0 0 0 / 10%);
    --space-1: clamp(0.5rem, 0.8vw, 0.75rem);
    --space-2: clamp(0.75rem, 1.2vw, 1rem);
    --space-3: clamp(1rem, 1.8vw, 1.5rem);
    --space-4: clamp(1.25rem, 2.4vw, 2rem);
    --content-pad: clamp(1.2rem, 2.4vw, 2.4rem);
    --card-pad: clamp(1rem, 1.8vw, 1.5rem);
    --grid-gap: clamp(1rem, 2vw, 1.6rem);
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --radius-card: 22px;
    --radius-modal: 28px;
    --motion-fast: 140ms;
    --motion-base: 220ms;
    --motion-slow: 360ms;
    --easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --focus-ring: 0 0 0 3px rgb(30 166 140 / 35%);
    --focus-ring-strong: 0 0 0 4px rgb(242 95 58 / 30%);
    --surface-soft: color-mix(in srgb, var(--surface) 85%, transparent);
    --surface-strong: color-mix(in srgb, var(--surface) 92%, transparent);
    --border-subtle: color-mix(in srgb, var(--text-tertiary) 18%, transparent);
    --shadow-soft: 0 16px 40px rgb(2 6 23 / 40%);
    --shadow-elevated: 0 30px 70px rgb(2 6 23 / 50%);
    --theme-bg-image: none;
    --theme-bg-opacity: 0.14;
    --theme-card-overlay: none;
    --theme-card-border: color-mix(in srgb, var(--primary) 28%, var(--glass-border));
    --theme-card-glow: color-mix(in srgb, var(--primary) 30%, transparent);
    --theme-anim-layer: none;
    --theme-anim-opacity: 0.12;

    /* UI modulation tokens */
    --ui-card-bg: linear-gradient(145deg,
        color-mix(in srgb, var(--surface) 94%, transparent),
        color-mix(in srgb, var(--surface) 78%, transparent));
    --ui-card-border: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
    --ui-card-glow: color-mix(in srgb, var(--primary) 26%, transparent);
    --ui-shadow-soft: 0 18px 42px rgb(6 12 26 / 38%);
    --ui-shadow-strong: 0 34px 72px rgb(6 12 26 / 52%);
    --ui-surface-veil: color-mix(in srgb, var(--surface) 76%, transparent);
    --ui-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 48%, transparent);

    /* Theme system (computed tokens) */
    --theme-surface: color-mix(in srgb, var(--surface) 92%, transparent);
    --theme-surface-2: color-mix(in srgb, var(--surface) 82%, transparent);
    --theme-border-strong: color-mix(in srgb, var(--primary) 26%, var(--glass-border));
    --theme-border-soft: color-mix(in srgb, var(--text-tertiary) 18%, transparent);
    --theme-glow: color-mix(in srgb, var(--primary) 35%, transparent);
    --theme-glow-strong: color-mix(in srgb, var(--accent) 35%, transparent);
    --theme-gradient: linear-gradient(135deg, color-mix(in srgb, var(--primary) 24%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
    --theme-gradient-strong: linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, transparent), color-mix(in srgb, var(--accent) 26%, transparent));

    /* Deep premium tokens */
    --surface-elevated: color-mix(in srgb, var(--surface) 96%, transparent);
    --surface-glow: color-mix(in srgb, var(--primary) 14%, transparent);
    --outline-strong: color-mix(in srgb, var(--primary) 46%, transparent);
    --outline-soft: color-mix(in srgb, var(--text-tertiary) 20%, transparent);
    --shadow-float: 0 22px 50px rgb(6 12 26 / 45%);
    --shadow-tight: 0 8px 18px rgb(6 12 26 / 25%);
    --ring-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 42%, transparent);
    --ring-focus-strong: 0 0 0 4px color-mix(in srgb, var(--primary) 58%, transparent);
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



html {
    scroll-behavior: smooth;
    font-size: calc(16px * var(--text-scale));
    text-size-adjust: 100%;

}



body {
    font-family: var(--font-sans);
    background:

        var(--theme-bg-image),

        radial-gradient(900px 520px at 10% -10%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 60%),

        radial-gradient(800px 420px at 90% 0%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 55%),

        var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    overflow: hidden auto;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-size-adjust: 100%;

}

body.is-offline .ad-slot,
body.is-offline .ad-slot-inline {
    filter: grayscale(1) saturate(0.7);
    opacity: 0.85;
}

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

/* Base element refinement */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: transparent;
    border: none;
    cursor: pointer;
}

input,
select,
textarea {
    background: transparent;
}

select,
select.form-input,
select.form-select {
    color: var(--text-primary);
    background-color: color-mix(in srgb, var(--surface) 92%, transparent);
}

select option {
    color: var(--text-primary);
    background-color: var(--surface);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.65rem 0.75rem;
    text-align: left;
}

hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 1rem 0;
}

/* Utilities */
.mb-0 { margin-bottom: 0 !important; }
.p-3 { padding: 1rem !important; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.justify-center { justify-content: center; }
.btn-small { font-size: 0.78rem; padding: 0.35rem 0.7rem; border-radius: 999px; }
.chart-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.filter-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.modal-actions { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.stat-main { display: grid; gap: 0.35rem; }
.close-modal, .modal-close { cursor: pointer; }
.form-range { width: 100%; }



body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--app-bg-image, none), var(--theme-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: -2;
    transition: opacity 0.4s ease;

}



body.theme-personality::before {
    opacity: var(--theme-bg-opacity, 0.14);

}



body.has-custom-background::before {
    opacity: var(--app-bg-opacity, 0.18);
    background-image: var(--app-bg-image, none);

}



body::after {
    content: "";
    position: fixed;
    inset: -20%;
    background-image: var(--theme-anim-layer, none);
    background-size: 140% 140%;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    transition: opacity 0.4s ease;
    animation: themeDrift 18s ease-in-out infinite;

}



body.theme-personality::after {
    opacity: var(--theme-anim-opacity, 0.12);

}



@keyframes themeDrift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);

    }

    50% {
        transform: translate3d(3%, -2%, 0) rotate(0.4deg);

    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);

    }

}



html,

body {
    min-height: 100%;

}



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

    }



    body::after {
        animation: none !important;
        opacity: 0 !important;

    }

}



::-webkit-scrollbar {
    width: 8px;
    height: 8px;

}



::-webkit-scrollbar-track {
    background: var(--surface);
    border-radius: 4px;

}



::-webkit-scrollbar-thumb {
    background: var(--surface-light);
    border-radius: 4px;

}

/* ===============================
   Responsive System
   =============================== */

@media (width <= 1200px) {
    :root {
        --text-scale: 0.99;
        --content-pad: clamp(1rem, 2.2vw, 2rem);
        --card-pad: clamp(0.9rem, 1.6vw, 1.3rem);
        --grid-gap: clamp(0.9rem, 1.8vw, 1.4rem);
    }
}

@media (width <= 1024px) {
    :root {
        --text-scale: 0.98;
        --content-pad: clamp(0.9rem, 2vw, 1.8rem);
        --card-pad: clamp(0.85rem, 1.5vw, 1.2rem);
        --grid-gap: clamp(0.85rem, 1.6vw, 1.2rem);
        --radius-card: 20px;
    }
}

@media (width <= 900px) {
    :root {
        --text-scale: 0.975;
        --content-pad: clamp(0.85rem, 2.2vw, 1.6rem);
        --card-pad: clamp(0.8rem, 1.6vw, 1.1rem);
        --grid-gap: clamp(0.8rem, 1.6vw, 1.1rem);
        --radius-card: 18px;
        --radius-modal: 22px;
    }
}

@media (width <= 768px) {
    :root {
        --text-scale: 0.96;
        --content-pad: clamp(0.8rem, 3vw, 1.4rem);
        --card-pad: clamp(0.75rem, 2.4vw, 1rem);
        --grid-gap: clamp(0.75rem, 2.6vw, 1rem);
        --radius-card: 16px;
    }
}

@media (width <= 600px) {
    :root {
        --text-scale: 0.94;
        --content-pad: clamp(0.7rem, 3.6vw, 1.2rem);
        --card-pad: clamp(0.7rem, 3.2vw, 0.95rem);
        --grid-gap: clamp(0.7rem, 3.2vw, 0.95rem);
    }
}

@media (width <= 480px) {
    :root {
        --text-scale: 0.92;
        --content-pad: clamp(0.65rem, 4vw, 1.05rem);
        --card-pad: clamp(0.65rem, 3.6vw, 0.9rem);
        --grid-gap: clamp(0.65rem, 3.6vw, 0.9rem);
    }
}

@media (width <= 360px) {
    :root {
        --text-scale: 0.9;
        --content-pad: clamp(0.6rem, 4.2vw, 0.95rem);
        --card-pad: clamp(0.6rem, 3.8vw, 0.85rem);
        --grid-gap: clamp(0.6rem, 3.8vw, 0.85rem);
    }
}

@media (height <= 700px) {
    :root {
        --content-pad: clamp(0.8rem, 2vw, 1.4rem);
        --grid-gap: clamp(0.75rem, 1.8vw, 1.1rem);
    }
}

@media (height <= 520px) {
    :root {
        --text-scale: 0.9;
        --content-pad: clamp(0.65rem, 1.8vw, 1.1rem);
        --card-pad: clamp(0.6rem, 1.6vw, 0.95rem);
        --grid-gap: clamp(0.6rem, 1.6vw, 0.95rem);
    }
}



::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);

}




/* end import: public/css/zy/base.css */
/* begin import: public/css/zy/themes.css */
.light-theme {
    --background: #f6f8fc;
    --surface: #fff;
    --surface-light: #edf2f7;
    --text-primary: #0b1220;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --border: #e2e8f0;
    --glass-bg: rgb(255 255 255 / 82%);
    --glass-border: rgb(15 23 42 / 8%);
    --glass-shadow: 0 26px 54px rgb(15 23 42 / 14%);
    --theme-bg-image:
        radial-gradient(900px 420px at 5% -10%, rgb(59 130 246 / 12%), transparent 60%),
        radial-gradient(700px 360px at 95% 5%, rgb(20 184 166 / 12%), transparent 62%);
    --theme-bg-opacity: 0.1;
    --theme-card-overlay: linear-gradient(135deg, rgb(59 130 246 / 6%), rgb(20 184 166 / 4%));
    --theme-anim-layer:
        radial-gradient(60% 50% at 20% 30%, rgb(59 130 246 / 12%), transparent 60%),
        radial-gradient(50% 40% at 80% 20%, rgb(20 184 166 / 10%), transparent 65%);
    --theme-anim-opacity: 0.1;

}



.theme-ocean {
    --primary: #3aa7ff;
    --primary-dark: #2a7fd4;
    --primary-light: #6bc1ff;
    --accent: #22d3ee;
    --background: #071c2a;
    --surface: #0d2b3f;
    --surface-light: #143a54;
    --text-primary: #e6f2ff;
    --text-secondary: #b6d0e5;
    --text-tertiary: #8fb3c9;
    --border: #1f4966;
    --glass-bg: rgb(13 43 63 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(58 167 255 / 28%), transparent 60%),

        radial-gradient(700px 360px at 85% 10%, rgb(34 211 238 / 22%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(58 167 255 / 8%), rgb(34 211 238 / 5%));
    --theme-anim-layer:

        radial-gradient(60% 50% at 20% 30%, rgb(58 167 255 / 25%), transparent 60%),

        radial-gradient(50% 40% at 80% 20%, rgb(34 211 238 / 20%), transparent 65%);
    --theme-anim-opacity: 0.14;

}



.theme-forest {
    --primary: #34d399;
    --primary-dark: #10b981;
    --primary-light: #6ee7b7;
    --accent: #84cc16;
    --background: #0b1a12;
    --surface: #122417;
    --surface-light: #1a3321;
    --text-primary: #e7f3ea;
    --text-secondary: #b8d0bf;
    --text-tertiary: #8fb19a;
    --border: #264033;
    --glass-bg: rgb(18 36 23 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 0% -5%, rgb(52 211 153 / 22%), transparent 60%),

        radial-gradient(700px 380px at 90% 10%, rgb(132 204 22 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(52 211 153 / 8%), rgb(132 204 22 / 5%));
    --theme-anim-layer:

        radial-gradient(60% 50% at 15% 25%, rgb(52 211 153 / 22%), transparent 60%),

        radial-gradient(50% 45% at 85% 15%, rgb(132 204 22 / 18%), transparent 65%);
    --theme-anim-opacity: 0.12;

}



.theme-sunset {
    --primary: #f97316;
    --primary-dark: #ea580c;
    --primary-light: #fb923c;
    --accent: #ec4899;
    --background: #1b1020;
    --surface: #2a1430;
    --surface-light: #3b1a3f;
    --text-primary: #fde9ff;
    --text-secondary: #e0b8e6;
    --text-tertiary: #c29ac9;
    --border: #4a2950;
    --glass-bg: rgb(42 20 48 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(249 115 22 / 24%), transparent 60%),

        radial-gradient(700px 360px at 90% 15%, rgb(236 72 153 / 20%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(249 115 22 / 8%), rgb(236 72 153 / 6%));
    --theme-anim-layer:

        radial-gradient(55% 45% at 25% 30%, rgb(249 115 22 / 22%), transparent 60%),

        radial-gradient(50% 40% at 75% 20%, rgb(236 72 153 / 20%), transparent 65%);
    --theme-anim-opacity: 0.14;

}



.theme-aurora {
    --primary: #8b5cf6;
    --primary-dark: #7c3aed;
    --primary-light: #a78bfa;
    --accent: #22d3ee;
    --background: #08131f;
    --surface: #101f33;
    --surface-light: #162a44;
    --text-primary: #e6f0ff;
    --text-secondary: #b3c7e6;
    --text-tertiary: #8aa2c7;
    --border: #223a59;
    --glass-bg: rgb(16 31 51 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 15% -10%, rgb(139 92 246 / 22%), transparent 60%),

        radial-gradient(700px 360px at 85% 15%, rgb(34 211 238 / 20%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(139 92 246 / 8%), rgb(34 211 238 / 5%));
    --theme-anim-layer:

        radial-gradient(60% 50% at 20% 25%, rgb(139 92 246 / 24%), transparent 60%),

        radial-gradient(50% 45% at 80% 20%, rgb(34 211 238 / 20%), transparent 65%);
    --theme-anim-opacity: 0.16;

}



.theme-graphite {
    --primary: #94a3b8;
    --primary-dark: #64748b;
    --primary-light: #cbd5f5;
    --accent: #38bdf8;
    --background: #0b0f16;
    --surface: #141b26;
    --surface-light: #1e293b;
    --text-primary: #eef2f7;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border: #27364a;
    --glass-bg: rgb(20 27 38 / 72%);
    --glass-border: rgb(255 255 255 / 6%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 38%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(148 163 184 / 20%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(56 189 248 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(148 163 184 / 8%), rgb(56 189 248 / 5%));

}



.theme-lavender {
    --primary: #a78bfa;
    --primary-dark: #7c3aed;
    --primary-light: #c4b5fd;
    --accent: #f472b6;
    --background: #140f24;
    --surface: #1e1633;
    --surface-light: #2a1f45;
    --text-primary: #f5f0ff;
    --text-secondary: #d9cff5;
    --text-tertiary: #b6a7dd;
    --border: #352655;
    --glass-bg: rgb(30 22 51 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 38%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(167 139 250 / 22%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(244 114 182 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(167 139 250 / 8%), rgb(244 114 182 / 5%));

}



.theme-slate {
    --primary: #38bdf8;
    --primary-dark: #0ea5e9;
    --primary-light: #7dd3fc;
    --accent: #22c55e;
    --background: #0b1220;
    --surface: #111c30;
    --surface-light: #18273f;
    --text-primary: #ecf4ff;
    --text-secondary: #c4d4f0;
    --text-tertiary: #9fb3d1;
    --border: #243652;
    --glass-bg: rgb(17 28 48 / 72%);
    --glass-border: rgb(255 255 255 / 6%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 38%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(56 189 248 / 20%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(34 197 94 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(56 189 248 / 8%), rgb(34 197 94 / 5%));

}



.theme-dawn {
    --primary: #fb7185;
    --primary-dark: #f43f5e;
    --primary-light: #fda4af;
    --accent: #f59e0b;
    --background: #1a1112;
    --surface: #241617;
    --surface-light: #2f1d1f;
    --text-primary: #fff1f2;
    --text-secondary: #f4cbd2;
    --text-tertiary: #d8a1a8;
    --border: #3b2428;
    --glass-bg: rgb(36 22 23 / 72%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 38%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(251 113 133 / 22%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(245 158 11 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(251 113 133 / 8%), rgb(245 158 11 / 5%));

}



.theme-sapphire {
    --primary: #38bdf8;
    --primary-dark: #0ea5e9;
    --primary-light: #7dd3fc;
    --accent: #818cf8;
    --background: #0a1122;
    --surface: #0f1b34;
    --surface-light: #162649;
    --text-primary: #e6f1ff;
    --text-secondary: #bfd6f3;
    --text-tertiary: #93b0d9;
    --border: #223455;
    --glass-bg: rgb(15 27 52 / 72%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 38%);
    --theme-bg-image:

        radial-gradient(900px 420px at 15% -10%, rgb(56 189 248 / 20%), transparent 60%),

        radial-gradient(700px 360px at 85% 10%, rgb(129 140 248 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(56 189 248 / 8%), rgb(129 140 248 / 5%));

}



.theme-onyx {
    --primary: #94a3b8;
    --primary-dark: #64748b;
    --primary-light: #cbd5f1;
    --accent: #475569;
    --background: #0a0d12;
    --surface: #111318;
    --surface-light: #1b1f26;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border: #2b303a;
    --glass-bg: rgb(17 19 24 / 76%);
    --glass-border: rgb(255 255 255 / 6%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 40%);
    --theme-bg-image:

        radial-gradient(900px 420px at 15% -10%, rgb(67 70 81 / 22%), transparent 60%),

        radial-gradient(700px 360px at 85% 10%, rgb(148 163 184 / 12%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(67 70 81 / 10%), rgb(148 163 184 / 4%));

}



.theme-citrus {
    --primary: #f59e0b;
    --primary-dark: #d97706;
    --primary-light: #fbbf24;
    --accent: #22c55e;
    --background: #16110b;
    --surface: #23190f;
    --surface-light: #312214;
    --text-primary: #fff7e5;
    --text-secondary: #f5d6a6;
    --text-tertiary: #d6b27a;
    --border: #3b2a18;
    --glass-bg: rgb(35 25 15 / 72%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 38%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(245 158 11 / 22%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(34 197 94 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(245 158 11 / 8%), rgb(34 197 94 / 5%));

}



.theme-frost {
    --primary: #a5b4fc;
    --primary-dark: #818cf8;
    --primary-light: #c7d2fe;
    --accent: #38bdf8;
    --background: #0b1220;
    --surface: #121a2a;
    --surface-light: #1a263a;
    --text-primary: #f1f5ff;
    --text-secondary: #c8d4f1;
    --text-tertiary: #9fb3d1;
    --border: #243652;
    --glass-bg: rgb(18 26 42 / 72%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 38%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(165 180 252 / 22%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(56 189 248 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(165 180 252 / 8%), rgb(56 189 248 / 5%));

}



.theme-ink {
    --primary: #64748b;
    --primary-dark: #475569;
    --primary-light: #94a3b8;
    --accent: #22d3ee;
    --background: #0b0f16;
    --surface: #101826;
    --surface-light: #182235;
    --text-primary: #eef2f7;
    --text-secondary: #c0c8d6;
    --text-tertiary: #8b98ad;
    --border: #222c3d;
    --glass-bg: rgb(16 24 38 / 72%);
    --glass-border: rgb(255 255 255 / 6%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 38%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(100 116 139 / 20%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(34 211 238 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(100 116 139 / 8%), rgb(34 211 238 / 5%));

}



.theme-gold {
    --primary: #fbbf24;
    --primary-dark: #f59e0b;
    --primary-light: #fde68a;
    --accent: #f97316;
    --background: #1a1208;
    --surface: #2a1c0f;
    --surface-light: #3b2614;
    --text-primary: #fff7e6;
    --text-secondary: #f5d9a6;
    --text-tertiary: #d6b27a;
    --border: #4a3116;
    --glass-bg: rgb(42 28 15 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(251 191 36 / 24%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(249 115 22 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(251 191 36 / 10%), rgb(249 115 22 / 5%));

}



.theme-silver {
    --primary: #cbd5f5;
    --primary-dark: #94a3b8;
    --primary-light: #e2e8f0;
    --accent: #38bdf8;
    --background: #0f172a;
    --surface: #141c2e;
    --surface-light: #1f2a44;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border: #2a3650;
    --glass-bg: rgb(20 28 46 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(203 213 245 / 20%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(56 189 248 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(203 213 245 / 8%), rgb(56 189 248 / 5%));

}



.theme-platinum {
    --primary: #94a3b8;
    --primary-dark: #64748b;
    --primary-light: #e2e8f0;
    --accent: #14b8a6;
    --background: #0b111e;
    --surface: #131b2b;
    --surface-light: #1b2638;
    --text-primary: #e8edf7;
    --text-secondary: #c0cadb;
    --text-tertiary: #9aa7be;
    --border: #27324a;
    --glass-bg: rgb(19 27 43 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(148 163 184 / 20%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(20 184 166 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(148 163 184 / 8%), rgb(20 184 166 / 5%));

}



.theme-coffee {
    --primary: #c08457;
    --primary-dark: #a1623a;
    --primary-light: #e7c7a6;
    --accent: #f59e0b;
    --background: #1a120c;
    --surface: #261a12;
    --surface-light: #332318;
    --text-primary: #f9f4ee;
    --text-secondary: #e3d2c0;
    --text-tertiary: #c1aa96;
    --border: #3b291e;
    --glass-bg: rgb(38 26 18 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(192 132 87 / 24%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(245 158 11 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(192 132 87 / 10%), rgb(245 158 11 / 5%));

}



.theme-rose {
    --primary: #fb7185;
    --primary-dark: #f43f5e;
    --primary-light: #fda4af;
    --accent: #f472b6;
    --background: #1b0b13;
    --surface: #2a111a;
    --surface-light: #3a1824;
    --text-primary: #fff1f2;
    --text-secondary: #fecdd3;
    --text-tertiary: #fda4af;
    --border: #4a1a28;
    --glass-bg: rgb(42 17 26 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(251 113 133 / 22%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(244 114 182 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(251 113 133 / 8%), rgb(244 114 182 / 5%));

}



.theme-mint {
    --primary: #2dd4bf;
    --primary-dark: #14b8a6;
    --primary-light: #5eead4;
    --accent: #22c55e;
    --background: #0b1a18;
    --surface: #112421;
    --surface-light: #17322e;
    --text-primary: #f0fdfa;
    --text-secondary: #ccfbf1;
    --text-tertiary: #99f6e4;
    --border: #1f3a34;
    --glass-bg: rgb(17 36 33 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(46 230 200 / 20%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(34 197 94 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(46 230 200 / 8%), rgb(34 197 94 / 5%));

}



.theme-midnight {
    --primary: #38bdf8;
    --primary-dark: #0ea5e9;
    --primary-light: #7dd3fc;
    --accent: #6366f1;
    --background: #0a1020;
    --surface: #101a2d;
    --surface-light: #16253d;
    --text-primary: #eef2ff;
    --text-secondary: #c7d2fe;
    --text-tertiary: #a5b4fc;
    --border: #1f2a45;
    --glass-bg: rgb(16 26 45 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 15% -10%, rgb(99 102 241 / 20%), transparent 60%),

        radial-gradient(700px 360px at 85% 10%, rgb(56 189 248 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(99 102 241 / 8%), rgb(56 189 248 / 5%));
    --theme-anim-layer:

        radial-gradient(55% 45% at 20% 25%, rgb(99 102 241 / 24%), transparent 60%),

        radial-gradient(50% 40% at 80% 20%, rgb(56 189 248 / 20%), transparent 65%);
    --theme-anim-opacity: 0.16;

}



.theme-nebula {
    --primary: #22d3ee;
    --primary-dark: #06b6d4;
    --primary-light: #67e8f9;
    --accent: #a855f7;
    --background: #0a1226;
    --surface: #111b32;
    --surface-light: #182645;
    --text-primary: #f5f3ff;
    --text-secondary: #ddd6fe;
    --text-tertiary: #c4b5fd;
    --border: #1f2a49;
    --glass-bg: rgb(17 27 50 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(168 85 247 / 24%), transparent 60%),

        radial-gradient(700px 360px at 90% 15%, rgb(34 211 238 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(168 85 247 / 10%), rgb(34 211 238 / 5%));
    --theme-anim-layer:

        radial-gradient(60% 50% at 20% 30%, rgb(168 85 247 / 26%), transparent 60%),

        radial-gradient(50% 45% at 80% 20%, rgb(34 211 238 / 20%), transparent 65%);
    --theme-anim-opacity: 0.18;

}



.theme-ember {
    --primary: #fb923c;
    --primary-dark: #f97316;
    --primary-light: #fdba74;
    --accent: #f43f5e;
    --background: #1a0f0b;
    --surface: #27140f;
    --surface-light: #351d16;
    --text-primary: #fff7ed;
    --text-secondary: #fed7aa;
    --text-tertiary: #fdba74;
    --border: #3a231a;
    --glass-bg: rgb(39 20 15 / 70%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(251 146 60 / 24%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(244 63 94 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(251 146 60 / 10%), rgb(244 63 94 / 5%));
    --theme-anim-layer:

        radial-gradient(60% 50% at 20% 30%, rgb(251 146 60 / 25%), transparent 60%),

        radial-gradient(50% 40% at 80% 20%, rgb(244 63 94 / 20%), transparent 65%);
    --theme-anim-opacity: 0.16;

}



.theme-noir {
    --primary: #3dd9ff;
    --primary-dark: #1aa6d1;
    --primary-light: #7ce9ff;
    --accent: #7c3aed;
    --background: #090b12;
    --surface: #121826;
    --surface-light: #1a2435;
    --text-primary: #eef5ff;
    --text-secondary: #c2d0e6;
    --text-tertiary: #8fa1bf;
    --border: #22304a;
    --glass-bg: rgb(18 24 38 / 72%);
    --glass-border: rgb(255 255 255 / 7%);
    --glass-shadow: 0 14px 36px rgb(0 0 0 / 50%);
    --theme-bg-image:

        radial-gradient(900px 420px at 15% -10%, rgb(61 217 255 / 18%), transparent 60%),

        radial-gradient(700px 360px at 85% 15%, rgb(124 58 237 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(61 217 255 / 8%), rgb(124 58 237 / 5%));
    --theme-anim-layer:

        radial-gradient(55% 45% at 20% 30%, rgb(61 217 255 / 20%), transparent 60%),

        radial-gradient(50% 40% at 80% 20%, rgb(124 58 237 / 18%), transparent 65%);
    --theme-anim-opacity: 0.14;

}



.theme-solar {
    --primary: #ff9f1c;
    --primary-dark: #ff7a00;
    --primary-light: #ffd166;
    --accent: #ff4d6d;
    --background: #1a1208;
    --surface: #2a1a0e;
    --surface-light: #3a2412;
    --text-primary: #fff1dd;
    --text-secondary: #e7c8a6;
    --text-tertiary: #caa783;
    --border: #4a321c;
    --glass-bg: rgb(42 26 14 / 75%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 40%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(255 159 28 / 24%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(255 77 109 / 18%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(255 159 28 / 10%), rgb(255 77 109 / 5%));
    --theme-anim-layer:

        radial-gradient(60% 50% at 20% 30%, rgb(255 159 28 / 24%), transparent 60%),

        radial-gradient(50% 40% at 80% 20%, rgb(255 77 109 / 20%), transparent 65%);
    --theme-anim-opacity: 0.14;

}



.theme-aquamint {
    --primary: #2ee6c8;
    --primary-dark: #15bfa6;
    --primary-light: #7ef5de;
    --accent: #38bdf8;
    --background: #071b1a;
    --surface: #0f2a28;
    --surface-light: #173a36;
    --text-primary: #e6fffa;
    --text-secondary: #b6e6de;
    --text-tertiary: #8ac5bc;
    --border: #254744;
    --glass-bg: rgb(15 42 40 / 75%);
    --glass-border: rgb(255 255 255 / 8%);
    --glass-shadow: 0 12px 32px rgb(0 0 0 / 38%);
    --theme-bg-image:

        radial-gradient(900px 420px at 10% -10%, rgb(46 230 200 / 22%), transparent 60%),

        radial-gradient(700px 360px at 90% 10%, rgb(56 189 248 / 16%), transparent 62%);
    --theme-card-overlay: linear-gradient(135deg, rgb(46 230 200 / 10%), rgb(56 189 248 / 5%));

}



.theme-paper {
    --primary: #2f6bff;
    --primary-dark: #1f4fcc;
    --primary-light: #8bb4ff;
    --accent: #10b981;
    --background: #f6f2ea;
    --surface: #fffaf1;
    --surface-light: #f1e9dd;
    --text-primary: #2a2a2a;
    --text-secondary: #5b5b5b;
    --text-tertiary: #8a8a8a;
    --border: #e2d7c6;
    --glass-bg: rgb(255 250 241 / 88%);
    --glass-border: rgb(32 32 32 / 8%);
    --glass-shadow: 0 18px 40px rgb(73 56 29 / 12%);
    --theme-bg-image:

        repeating-linear-gradient(45deg, rgb(47 107 255 / 8%) 0 2px, transparent 2px 12px),

        radial-gradient(900px 420px at 10% -10%, rgb(246 242 234 / 90%), transparent 60%);
    --theme-bg-opacity: 0.2;
    --theme-card-overlay: linear-gradient(135deg, rgb(47 107 255 / 6%), rgb(246 242 234 / 20%));

}



.theme-mono {
    --primary: #cbd5f5;
    --primary-dark: #a0aec0;
    --primary-light: #e2e8f0;
    --accent: #94a3b8;
    --background: #0f1115;
    --surface: #171a20;
    --surface-light: #1f2430;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border: #2a313f;
    --glass-bg: rgb(23 26 32 / 75%);
    --glass-border: rgb(255 255 255 / 6%);
    --glass-shadow: 0 12px 28px rgb(0 0 0 / 45%);
    --theme-bg-image:

        linear-gradient(120deg, rgb(203 213 245 / 12%), transparent 55%),

        repeating-linear-gradient(90deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 12px);
    --theme-card-overlay: linear-gradient(135deg, rgb(203 213 245 / 8%), rgb(15 17 21 / 30%));

}




/* end import: public/css/zy/themes.css */
/* begin import: public/css/zy/utilities.css */
/* Utility classes (low-specificity, composable) */
:where(.text-balance) {
  text-wrap: balance;
}

:where(.text-pretty) {
  text-wrap: pretty;
}

:where(.text-muted) {
  color: var(--text-tertiary);
}

:where(.surface) {
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  border-radius: calc(var(--radius-card) + 2px);
  box-shadow: 0 18px 40px rgb(6 12 20 / 38%);
}

:where(.stack) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

:where(.cluster) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

:where(.grid-auto) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--card-gap);
}

:where(.pad-compact) {
  padding: var(--card-pad-compact);
}

:where(.pad-roomy) {
  padding: var(--card-pad-roomy);
}

:where(.radius-lg) {
  border-radius: calc(var(--radius-card) + 6px);
}

:where(.radius-xl) {
  border-radius: calc(var(--radius-card) + 10px);
}

:where(.elevated) {
  box-shadow: 0 24px 60px rgb(6 12 20 / 45%);
}

:where(.border-subtle) {
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
}

:where(.bg-wash) {
  background: linear-gradient(135deg, rgb(30 166 140 / 8%), rgb(242 95 58 / 6%));
}

/* end import: public/css/zy/utilities.css */
/* begin import: public/css/zy/components.css */
/* Loading Screen */

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:

        radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 40%),

        radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 42%),

        radial-gradient(circle at 50% 85%, color-mix(in srgb, var(--primary-light) 18%, transparent), transparent 38%),

        var(--background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
    overflow: hidden;

}



.loading-aurora,

.loading-grid,

.loading-orb {
    position: absolute;
    inset: 0;
    z-index: 0;

}



.loading-aurora {
    background:

        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 45%),

        radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 40%),

        radial-gradient(circle at 40% 80%, color-mix(in srgb, var(--primary-light) 24%, transparent), transparent 45%);
    filter: blur(30px);
    animation: auroraShift 8s ease-in-out infinite;

}



.loading-grid {
    background-image:

        linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),

        linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.25;
    mask-image: radial-gradient(circle at center, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));

}



.loading-orb {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / 20%), rgb(255 255 255 / 0%));
    top: 15%;
    left: 65%;
    transform: translate(-50%, -50%);
    animation: floatOrb 6s ease-in-out infinite;
    pointer-events: none;

}



.loading-ring {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 8%);
    box-shadow:

        0 0 40px color-mix(in srgb, var(--primary) 26%, transparent),

        inset 0 0 30px rgb(255 255 255 / 6%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ringPulse 6s ease-in-out infinite;
    pointer-events: none;

}



.loading-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;

}



.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;

}



.loading-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    position: relative;
    z-index: 1;

}



.loading-logo-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    margin-right: 1rem;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 32%, transparent);
    position: relative;
    overflow: hidden;

}



.loading-logo-icon img,

.logo-icon img,

.mobile-brand-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

}



.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

}



.loading-logo-icon::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, rgb(255 255 255 / 50%), transparent 35%, rgb(255 255 255 / 25%));
    animation: spin 6s linear infinite;

}



.loading-title {
    display: grid;
    gap: 0.25rem;
    text-align: left;

}



.loading-logo-text {
    font-size: 40px;
    font-weight: 800;
    background: linear-gradient(to right, var(--primary), var(--accent));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;

}



.loading-tagline {
    font-size: 0.95rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;

}



.loading-word {
    color: var(--primary);
    font-weight: 700;
    position: relative;
    display: inline-block;

}



.loading-word.animate {
    animation: wordPulse 1.8s ease;

}



.loading-status-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;

}



.loading-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgb(255 255 255 / 8%);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);

}



.loading-progress {
    width: min(360px, 70vw);
    height: 6px;
    background: rgb(255 255 255 / 8%);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 12px 24px rgb(15 23 42 / 25%);

}



.loading-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgb(255 255 255 / 35%), transparent);
    transform: translateX(-70%);
    animation: loadingShimmer 2.2s ease-in-out infinite;
    pointer-events: none;

}



.loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 999px;
    width: 0%;
    transition: width 0.3s ease;
    box-shadow: 0 0 20px rgb(99 102 241 / 60%);

}



.loading-caption {
    color: var(--text-tertiary);
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 420px;

}



.loading-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;

}



.loading-percent {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgb(255 255 255 / 6%);

}



.loading-footnote {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    text-align: center;
    max-width: 320px;

}



@media (width <= 600px) {
    .loading-screen {
        padding: 1.25rem;
        justify-content: center;

    }



    .loading-orb {
        width: 160px;
        height: 160px;
        top: 18%;
        left: 50%;

    }



    .loading-ring {
        width: 280px;
        height: 280px;

    }



    .loading-grid {
        background-size: 42px 42px;
        opacity: 0.2;

    }



    .loading-logo {
        margin-bottom: 0;
        flex-direction: column;

    }



    .loading-logo-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        margin-right: 0;
        margin-bottom: 0.5rem;
        box-shadow: 0 10px 24px rgb(99 102 241 / 28%);

    }



    .loading-logo-text {
        font-size: 30px;
        letter-spacing: -0.01em;

    }



    .loading-progress {
        width: min(260px, 85vw);
        height: 6px;
        border-radius: 999px;

    }



    .loading-progress-bar {
        border-radius: 999px;

    }



    .loading-caption {
        font-size: 0.85rem;
        max-width: 300px;
        line-height: 1.4;

    }



    .loading-title {
        text-align: center;

    }



    .loading-tagline {
        font-size: 0.85rem;

    }



    .loading-status-row {
        justify-content: center;

    }

}



@keyframes auroraShift {

    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; }

    50% { transform: translate3d(10px, -20px, 0) scale(1.05); opacity: 1; }

    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; }

}



@keyframes ringPulse {

    0% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.55; }

    50% { transform: translate(-50%, -50%) scale(1.02); opacity: 0.85; }

    100% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.55; }

}



@keyframes loadingShimmer {

    0% { transform: translateX(-70%); opacity: 0; }

    40% { opacity: 0.8; }

    100% { transform: translateX(120%); opacity: 0; }

}



@keyframes wordPulse {

    0% { opacity: 0.2; transform: translateY(3px); }

    40% { opacity: 1; transform: translateY(0); }

    100% { opacity: 1; }

}



@keyframes floatOrb {

    0% { transform: translate(-50%, -50%) scale(1); }

    50% { transform: translate(-52%, -46%) scale(1.05); }

    100% { transform: translate(-50%, -50%) scale(1); }

}



/* Sidebar */

.sidebar {
    grid-area: sidebar;
    width: var(--sidebar-width);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: var(--glass-shadow);

}



.sidebar.collapsed {
    width: var(--sidebar-width);

}



@media (width >= 901px) {
    .app-container.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);

    }



    .app-container.sidebar-collapsed.sidebar-hovered .sidebar {
        width: var(--sidebar-width);
        box-shadow: 0 22px 46px rgb(6 10 22 / 38%);

    }



    .app-container.sidebar-collapsed.sidebar-hovered .nav-text,

    .app-container.sidebar-collapsed.sidebar-hovered .logo-text,

    .app-container.sidebar-collapsed.sidebar-hovered .user-details {
        opacity: 1;
        width: auto;

    }

}



.sidebar-toggle {
    position: absolute;
    top: 1rem;
    right: -12px;
    width: 24px;
    height: 24px;
    background: var(--surface);
    border: 2px solid color-mix(in srgb, var(--text-tertiary) 35%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;

}



.sidebar-toggle:hover {
    background: var(--primary);
    color: white;
    transform: translateX(2px);

}



.logo {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
    padding: 0 0.5rem;

}



.logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;

}



.logo-text {
    font-size: 20px;
    font-weight: 700;
    margin-left: 1rem;
    background: linear-gradient(

        120deg,

        var(--primary),

        color-mix(in srgb, var(--primary) 35%, var(--accent)),

        var(--accent)

    );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brandShift 6s ease-in-out infinite, brandGlow 4.5s ease-in-out infinite;
    white-space: nowrap;

}



@keyframes brandShift {

    0%, 100% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

}



@keyframes brandGlow {

    0%, 100% { text-shadow: 0 0 0 rgb(0 0 0 / 0%); }

    50% { text-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 55%, transparent); }

}



.sidebar.collapsed .logo-text {
    opacity: 0;
    width: 0;

}



.nav-menu {
    list-style: none;
    flex: 1;
    margin: 0;
    padding: 0;

}



.nav-item {
    margin-bottom: 0.25rem;
    position: relative;

}



.nav-link {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

}



.nav-link:hover {
    background: var(--surface);
    color: var(--text-primary);

}



.nav-link.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, transparent), transparent);
    color: var(--primary);
    border-left: 3px solid var(--primary);

}



.nav-link i {
    font-size: 18px;
    width: 24px;
    flex-shrink: 0;

}



.nav-text {
    margin-left: 1rem;
    white-space: nowrap;
    transition: opacity 0.3s ease;

}



.sidebar.collapsed .nav-text {
    opacity: 0;
    width: 0;

}



.notification-badge {
    position: absolute;
    right: 15px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

}



.sidebar.collapsed .notification-badge {
    right: 12px;
    top: 12px;

}



.user-section {
    padding: 1rem;
    border-top: 1px solid var(--border);
    margin-bottom: 1.5rem;

}



.user-info {
    display: flex;
    align-items: center;

}



.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.user-avatar:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgb(79 92 251 / 30%);

}



.user-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--accent);
    color: white;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 0.6rem;
    border: 2px solid var(--surface);

}



.user-details {
    margin-left: 1rem;
    transition: opacity 0.3s ease;

}

.app-sync-card .form-helper {
    margin-top: 6px;
}

.app-sync-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #bff7d5;
    background: rgba(62, 189, 124, 0.18);
    border: 1px solid rgba(62, 189, 124, 0.35);
}

.app-sync-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.app-sync-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.app-sync-row .form-input {
    flex: 1;
    min-width: 140px;
}

.app-sync-code {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(140, 160, 255, 0.25);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-align: center;
}

@media (max-width: 720px) {
    .app-sync-actions {
        flex-direction: column;
    }
    .app-sync-row {
        flex-direction: column;
        align-items: stretch;
    }
}



.sidebar.collapsed .user-details {
    opacity: 0;
    width: 0;

}



.user-name {
    font-weight: 600;
    margin-bottom: 0.125rem;

}



.user-level {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



/* Header */

.header {
    grid-area: header;
    height: 64px;
    background:

        linear-gradient(120deg, rgb(99 102 241 / 18%), rgb(15 23 42 / 55%)),

        var(--glass-bg);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid rgb(148 163 184 / 18%);
    padding: 0.4rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 90;
    box-shadow: 0 18px 36px rgb(8 12 26 / 36%);

}



.header-content h1 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0.02rem;

}



.header-content p {
    color: var(--text-tertiary);
    font-size: 0.74rem;

}



.header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: rgb(15 23 42 / 45%);
    border: 1px solid rgb(148 163 184 / 18%);

}

.header-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgb(15 23 42 / 60%);
    border: 1px solid rgb(99 102 241 / 30%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
}

.header-status-pill .sync-pill,
.header-status-pill .sync-live-pill {
    text-indent: -9999px;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    display: inline-block;
}

.header-status-pill .sync-pill {
    background: rgb(56 189 248 / 80%);
    border: 1px solid rgb(56 189 248 / 60%);
}

.header-status-pill .sync-pill.is-offline,
.header-status-pill .sync-pill.is-pending {
    background: rgb(249 115 22 / 80%);
    border-color: rgb(249 115 22 / 70%);
}

.header-status-pill .sync-pill.is-offline {
    background: rgb(248 113 113 / 85%);
    border-color: rgb(248 113 113 / 75%);
}

.header-status-pill .sync-live-pill {
    background: rgb(34 197 94 / 85%);
    border: 1px solid rgb(34 197 94 / 70%);
    text-indent: -9999px;
}

.header-status-pill .net-indicator {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.header-status-pill .net-dot {
    width: 10px;
    height: 10px;
}




.header-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 10px 22px rgb(8 12 26 / 25%);

}



.header-btn i {
    font-size: 0.85rem;
    line-height: 1;

}

.header-btn:hover {
    background: var(--surface-light);
    color: var(--text-primary);
    transform: translateY(-2px);

}



.header-btn.notification-btn::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--surface);

}



.notification-count {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

}



/* Ensure only one section is active at a time */

.main-content > .section:not(.active) {
    display: none !important;

}



/* Welcome Card */

.welcome-card {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--surface), var(--surface-light));
    border: none;

}



.onboarding-card {
    border: 1px solid var(--glass-border);
    background: linear-gradient(135deg,

        color-mix(in srgb, var(--primary) 14%, transparent),

        color-mix(in srgb, var(--surface) 86%, transparent));
    box-shadow: 0 20px 32px color-mix(in srgb, var(--background) 65%, transparent);
    margin-bottom: 1.5rem;

}



.onboarding-card-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;

}



.onboarding-card-content h3 {
    margin: 0 0 0.4rem;

}



.onboarding-card-text {
    display: grid;
    gap: 0.5rem;

}



.onboarding-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background: rgb(79 92 251 / 15%);
    border: 1px solid rgb(79 92 251 / 30%);

}



.onboarding-highlights {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
    display: grid;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.92rem;

}



.onboarding-highlights li {
    display: flex;
    align-items: center;
    gap: 0.5rem;

}



.onboarding-highlights i {
    color: var(--primary);

}



.onboarding-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-self: end;

}



.welcome-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;

}



#current-time {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(to right, var(--primary), var(--accent));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.25rem;

}



#current-date {
    color: var(--text-secondary);
    font-size: 1rem;

}



.points-badge {
    text-align: center;
    padding: 0.75rem 1rem;
    background: var(--surface-light);
    border-radius: 16px;
    border: 1px solid var(--border);

}



body.badge-active .welcome-card,

body.badge-active .insight-card,

body.badge-active .coach-card,

body.badge-active .goals-card,

body.badge-active .goals-roadmap-card {
    border-color: var(--badge-accent);
    box-shadow: var(--shadow-lg), 0 0 20px var(--badge-glow);

}



body.badge-active .points-badge {
    box-shadow: 0 0 18px var(--badge-glow);
    border-color: var(--badge-accent);

}



body.badge-active .btn-primary {
    box-shadow: 0 0 14px var(--badge-glow);

}



.points-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);

}



.motivational-quote {
    font-style: italic;
    color: var(--text-secondary);
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
    font-size: 1.1rem;

}



.quote-author {
    display: block;
    font-size: 0.9rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;

}





.glass-card {
    background:

        linear-gradient(135deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 1.5%)),

        var(--glass-bg);
    backdrop-filter: blur(28px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: var(--card-pad);
    box-shadow: var(--glass-shadow);

}



body.theme-personality .glass-card {
    border-color: var(--theme-card-border);
    box-shadow: var(--glass-shadow), 0 0 22px var(--theme-card-glow);
    background-image:

        var(--theme-card-overlay),

        linear-gradient(135deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 1.5%));
    background-blend-mode: screen;

}



/* Enhanced Stat Cards */

.stat-card-enhanced {
    padding: var(--card-pad);
    display: flex;
    flex-direction: column;

}



.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);

}



.stat-trend {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;

}



.glass-card,

.stat-card,

.music-track,

.task-item,

.note-card {
    will-change: transform;

}



@media (hover: hover) and (pointer: fine) {
    .glass-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 28px rgb(0 0 0 / 18%);

    }



    .btn:hover,

    .btn-icon:hover {
        transform: translateY(-1px);

    }

}



.btn,

.btn-icon,

.header-btn,

.nav-link,

.bottom-nav-link {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;

}



.circular-progress {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;

}



.progress-circle {
    width: 100%;
    height: 100%;

}



.progress-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

}



.progress-value h3 {
    font-size: 1.25rem;
    margin: 0;

}



.progress-bar-container {
    height: 8px;
    background: var(--surface-light);
    border-radius: 4px;
    margin-top: 0.5rem;
    overflow: hidden;

}



.progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;

}



.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;

}



.stat-meta {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;

}



.meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-tertiary);

}



/* Card Header */

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);

}



.card-header h3 {
    margin: 0;

}



/* Quick Actions Grid */

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;

}



.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    transition: all 0.25s ease;
    cursor: pointer;
    width: 100%;
    min-height: 92px;

}



.action-btn:hover {
    background: var(--surface-light);
    transform: translateY(-3px);
    border-color: var(--primary-light);
    box-shadow: 0 10px 20px rgb(0 0 0 / 12%);

}



.action-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;

}



.action-icon.primary { background: var(--primary); }

.action-icon.secondary { background: var(--secondary); }

.action-icon.accent { background: var(--accent); }

.action-icon.info { background: var(--info); }

.action-icon.success { background: var(--success); }

.action-icon.warning { background: var(--warning); }

.action-icon.tertiary { background: var(--text-tertiary); }

.action-icon.purple { background: #8b5cf6; }



.action-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);

}



.section#dashboard {
    color: var(--text-primary);

}



.section#dashboard .section-subtitle,

.section#dashboard .stat-label,

.section#dashboard .meta-item,

.section#dashboard .quote-author,

.section#dashboard .summary-label,

.section#dashboard .summary-value,

.section#dashboard .activity-time,

.section#dashboard .goal-status {
    color: var(--text-secondary);

}



.section#dashboard .activity-text,

.section#dashboard .goal-text,

.section#dashboard .card-header h3 {
    color: var(--text-primary);

}



.btn.refreshing {
    opacity: 0.7;
    pointer-events: none;

}



#refresh-tasks.refreshing i {
    animation: spin 0.8s linear infinite;

}



@keyframes spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* Accessibility modes */

button:focus-visible,

a:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible,

[role="button"]:focus-visible,

.nav-link:focus-visible,

.bottom-nav-link:focus-visible,

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);

}



body.high-contrast button:focus-visible,

body.high-contrast a:focus-visible,

body.high-contrast input:focus-visible,

body.high-contrast select:focus-visible,

body.high-contrast textarea:focus-visible,

body.high-contrast .btn:focus-visible {
    box-shadow: var(--focus-ring-strong);

}



body.reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;

}



body.large-text {
    font-size: 17px;

}



body.high-contrast {
    --text-primary: #fff;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --border: #64748b;
    --surface: #111827;
    --surface-light: #1f2937;

}



@media (width <= 900px) {
    .settings-shell {
        grid-template-columns: 1fr;

    }



    .settings-nav {
        position: static;

    }



    .preset-grid {
        grid-template-columns: 1fr;

    }

}



@media (width <= 600px) {
    .week-schedule-row {
        grid-template-columns: 36px auto 1fr;

    }



    .week-schedule-row .week-end {
        grid-column: 2 / 4;

    }



    .feature-toggle-grid {
        grid-template-columns: 1fr;

    }

}



@media (width <= 900px) {
    .timer-metrics {
        grid-template-columns: 1fr;

    }



    #settings .glass-card {
        padding: 1rem;

    }

}



/* Danger zone */

.danger-card {
    border: 1px solid rgb(239 68 68 / 50%);
    background: linear-gradient(145deg, rgb(239 68 68 / 8%), rgb(15 23 42 / 80%));

}



.danger-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;

}



.danger-card-header i {
    color: var(--danger);
    font-size: 1.4rem;

}



.btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    box-shadow: 0 12px 20px rgb(239 68 68 / 30%);

}



.btn-danger:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);

}



/* Premium notification system */

.premium-toast-stack {
    position: fixed;
    top: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 2200;
    max-width: min(360px, 90vw);

}



.premium-toast {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: linear-gradient(145deg, rgb(14 20 36 / 94%), rgb(8 12 22 / 98%));
    border: 1px solid rgb(148 163 184 / 22%);
    box-shadow: 0 18px 40px rgb(2 6 23 / 45%);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    color: var(--text-primary);
    backdrop-filter: blur(14px);
    overflow: hidden;

}



.premium-toast.show {
    opacity: 1;
    transform: translateY(0);

}



.premium-toast.hide {
    opacity: 0;
    transform: translateY(-6px);

}



.premium-toast::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgb(255 255 255 / 6%), transparent 45%);
    pointer-events: none;

}



.premium-toast::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.35rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(255 255 255 / 45%), rgb(255 255 255 / 5%));
    transform-origin: left center;
    animation: toast-progress 4.2s linear forwards;

}



.premium-toast-urgent::after {
    animation-duration: 6s;

}



.premium-toast-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgb(99 102 241 / 35%);

}



.premium-toast-success .premium-toast-icon { background: rgb(16 185 129 / 28%); color: #bbf7d0; }

.premium-toast-error .premium-toast-icon { background: rgb(239 68 68 / 28%); color: #fecaca; }

.premium-toast-warning .premium-toast-icon { background: rgb(245 158 11 / 28%); color: #fde68a; }

.premium-toast-info .premium-toast-icon { background: rgb(59 130 246 / 28%); color: #bfdbfe; }



.premium-toast-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.1rem;

}



.premium-toast-message {
    font-size: 0.8rem;
    color: var(--text-secondary);

}



.premium-toast-meta {
    margin-top: 0.35rem;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;

}



.premium-toast-pill {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgb(148 163 184 / 25%);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;

}



.premium-toast-pill.premium-urgent,

.notification-pill.urgent {
    color: #fff;
    background: rgb(239 68 68 / 30%);
    border-color: rgb(239 68 68 / 60%);

}



.premium-toast-close {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgb(148 163 184 / 20%);
    background: rgb(15 23 42 / 45%);
    color: var(--text-tertiary);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;

}



.premium-toast-close:hover {
    background: rgb(15 23 42 / 80%);
    transform: scale(1.05);

}



@keyframes toast-progress {

    from { transform: scaleX(1); opacity: 0.7; }

    to { transform: scaleX(0); opacity: 0.15; }

}



.notification-day {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;

}



.notification-day-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    margin-bottom: 0.15rem;

}



.notification-day-list {
    display: grid;
    gap: 0.65rem;

}



.notification-item.premium {
    border-radius: 16px;
    border: 1px solid rgb(148 163 184 / 20%);
    background: linear-gradient(145deg, rgb(17 24 39 / 80%), rgb(12 18 34 / 90%));
    box-shadow: 0 16px 30px rgb(4 8 18 / 35%);

}



.notification-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;

}



.notification-pill {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgb(148 163 184 / 25%);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;

}



.notification-pill.urgent {
    color: #fff;
    background: rgb(239 68 68 / 30%);
    border-color: rgb(239 68 68 / 60%);

}



.notification-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;

}



.notification-premium-options {
    display: grid;
    gap: 0.5rem;

}



/* Accessibility focus */

:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 65%, transparent);
    outline-offset: 2px;

}



@media (width <= 900px) {
    .premium-toast-stack {
        top: 70px;
        right: 12px;
        left: 12px;
        max-width: none;

    }

}



/* Modal System */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 80%);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;

}



.modal-overlay.active {
    opacity: 1;
    visibility: visible;

}



.modal-content {
    background: var(--surface);
    border-radius: 24px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: var(--shadow-xl);

}



.update-flow-modal {
    max-width: 560px;

}



.update-flow-hero {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.2rem;

}



.update-flow-badge {
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgb(99 102 241 / 18%);
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.7rem;

}



.update-flow-steps {
    display: grid;
    gap: 0.75rem;

}



.update-flow-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.85rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid rgb(148 163 184 / 18%);
    align-items: center;

}



.update-flow-step .step-progress {
    height: 6px;
    border-radius: 999px;
    background: rgb(148 163 184 / 18%);
    overflow: hidden;
    margin-top: 0.45rem;

}



.update-flow-step .step-progress-meta {
    display: flex;
    justify-content: flex-end;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.35rem;

}



.update-flow-step .step-percent {
    font-weight: 600;
    color: var(--text-secondary);

}



.update-flow-step .step-progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: inherit;
    transition: width 0.6s ease;

}



.update-flow-step.is-active {
    border-color: rgb(99 102 241 / 55%);
    box-shadow: 0 16px 28px rgb(15 23 42 / 20%);

}



.update-flow-step.is-active .step-progress span {
    width: 100%;
    animation: updatePulse 1.6s ease-in-out infinite;

}



.update-flow-step.is-complete {
    border-color: rgb(16 185 129 / 50%);

}



.update-flow-step.is-complete .step-progress span {
    width: 100%;
    animation: none;
    background: linear-gradient(90deg, rgb(16 185 129 / 90%), rgb(34 197 94 / 90%));

}



.update-flow-step .step-indicator {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgb(255 255 255 / 8%);
    color: var(--text-primary);

}



.update-flow-step.is-complete .step-indicator {
    background: rgb(16 185 129 / 20%);
    color: #9af3cf;

}



@keyframes updatePulse {

    0% { opacity: 0.6; transform: scaleX(0.9); }

    50% { opacity: 1; transform: scaleX(1); }

    100% { opacity: 0.7; transform: scaleX(0.95); }

}



/* Modal polish */

#task-modal .modal-content,

#event-modal .modal-content,

#note-modal .notes-modal {
    background: linear-gradient(160deg, rgb(15 23 42 / 95%), rgb(12 18 34 / 98%));
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 28px 60px rgb(5 8 18 / 50%);

}



#task-modal .modal-header,

#event-modal .modal-header,

#note-modal .notes-modal-header {
    border-bottom: 1px solid rgb(148 163 184 / 15%);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;

}



#task-modal .modal-footer,

#note-modal .notes-modal-footer {
    border-top: 1px solid rgb(148 163 184 / 15%);
    margin-top: 1rem;
    padding-top: 0.75rem;
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;

}



#event-modal .flex {
    margin-top: 0.75rem;

}



.modal-content .form-group label,

.notes-modal .form-label {
    font-weight: 600;
    color: var(--text-secondary);

}



.modal-overlay.active .modal-content {
    transform: scale(1);

}



.onboarding-modal {
    max-width: 760px;

}



.onboarding-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;

}



.onboarding-progress {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.25rem;

}



.onboarding-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    overflow: hidden;
    border: 1px solid var(--glass-border);

}



.onboarding-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(99 102 241 / 95%), rgb(56 189 248 / 90%));
    transition: width 0.4s ease;

}



.onboarding-progress-label {
    font-size: 0.85rem;

}



.onboarding-carousel {
    overflow: hidden;
    border-radius: 18px;

}



.onboarding-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;

}



.onboarding-slide {
    min-width: 100%;
    padding: 0.35rem;

}



.onboarding-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;

}



.onboarding-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background: rgb(255 255 255 / 20%);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;

}



.onboarding-dot.active {
    background: var(--primary);
    transform: scale(1.2);

}



.onboarding-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;

}



.onboarding-title {
    display: grid;
    gap: 0.4rem;

}



.onboarding-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: 1.5rem;
    align-items: center;
    padding: 1rem;
    border-radius: 18px;
    background: rgb(255 255 255 / 3%);
    border: 1px solid var(--glass-border);
    margin-bottom: 1.5rem;

}



.onboarding-hero-copy h4 {
    margin: 0 0 0.5rem;

}



.onboarding-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



.onboarding-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid var(--glass-border);

}



.onboarding-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;

}



.onboarding-hero-card {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    background: rgb(8 12 24 / 70%);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.8rem;

}



.onboarding-hero-card i {
    color: var(--primary);
    font-size: 1rem;

}



.onboarding-hero-card span {
    color: var(--text-primary);
    font-weight: 600;

}



.onboarding-hero-card small {
    color: var(--text-tertiary);

}



.onboarding-steps {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;

}



.onboarding-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 16px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--glass-border);

}



.onboarding-step h4 {
    margin: 0 0 0.35rem;

}



.onboarding-step p {
    margin: 0;
    color: var(--text-secondary);

}



.step-index {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgb(79 92 251 / 18%);
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;

}



.onboarding-cta-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;

}



.onboarding-theme-btn {
    justify-content: center;
    gap: 0.4rem;

}



.onboarding-theme-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);

}



.onboarding-footer {
    font-size: 0.85rem;
    margin-top: 0.75rem;

}



.sound-settings-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;

}



.sound-preview-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;

}



@media (width <= 720px) {
    .onboarding-hero {
        grid-template-columns: 1fr;

    }



    .onboarding-controls {
        flex-wrap: wrap;
        gap: 0.6rem;

    }



    .onboarding-controls .btn {
        flex: 1 1 auto;

    }

}



/* Form Elements */

.form-group {
    margin-bottom: var(--space-3);

}



.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);

}







.form-textarea {
    min-height: 120px;
    resize: vertical;

}



select.form-input[multiple] {
    min-height: 120px;
    padding: 0.6rem;

}



select.form-input[multiple] option {
    padding: 0.35rem 0.4rem;

}



/* Toggle Switch */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;

}



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

}



.data-sync-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;

}



.data-sync-options {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;

}



.toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.92rem;

}



.toggle-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);

}



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

}



.data-sync-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);

}



.data-sync-meta strong {
    color: var(--text-secondary);

}



.ai-shell .form-row .toggle-row {
    margin-top: 0.4rem;

}



.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--surface-light);
    transition: .3s;
    border-radius: 34px;

}



.toggle-slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background: white;
    transition: .3s;
    border-radius: 50%;

}



input:checked + .toggle-slider {
    background: var(--primary);

}



input:checked + .toggle-slider::before {
    transform: translateX(24px);

}



/* Tracklist Modal for Mobile */

.mobile-tracklist-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    z-index: 1001;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));

}



.mobile-tracklist-modal.active {
    transform: translateY(0);

}



.tracklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);

}



.tracklist-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);

}



.tracklist-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-light);
    border: none;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;

}



.tracklist-close:hover {
    background: var(--surface);

}



.tracklist-content {
    display: flex;
    flex-direction: column;
    gap: 12px;

}



.tracklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--surface-light);
    cursor: pointer;
    transition: all 0.3s ease;

}



.tracklist-item:hover {
    background: var(--surface);
    transform: translateX(4px);

}



.tracklist-item.active {
    background: var(--primary-light);
    border-left: 4px solid var(--primary);

}



.tracklist-cover {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;

}



.tracklist-info {
    flex: 1;

}



.tracklist-title {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 2px;

}



.tracklist-artist {
    font-size: 0.85rem;
    color: var(--text-secondary);

}



.tracklist-duration {
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



/* Safe area handling for notched phones */

@supports (padding: max(0px)) {
    .mobile-music-player {
        padding-bottom: max(env(safe-area-inset-bottom), 0px);

    }

}



/* Bottom Navigation */

.bottom-nav {
    display: none;
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 0.5rem 0.35rem calc(0.6rem + env(safe-area-inset-bottom));
    z-index: 1000;
    box-shadow: 0 -4px 20px rgb(0 0 0 / 20%);

}



.bottom-nav-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;

}



/* Scrollable bottom nav */

@media (width <= 900px) {
    .bottom-nav-items {
        justify-content: center;
        overflow: auto hidden;
        white-space: nowrap;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 0.35rem 0.75rem calc(0.5rem + var(--safe-bottom));
        scrollbar-width: thin;
        scrollbar-color: rgb(255 255 255 / 35%) transparent;

    }



    .bottom-nav-items::-webkit-scrollbar {
        height: 4px;

    }



    .bottom-nav-items::-webkit-scrollbar-track {
        background: transparent;

    }



    .bottom-nav-items::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--surface) 60%, transparent);
        border-radius: 999px;

    }



    .bottom-nav-item {
        flex: 0 0 auto;
        scroll-snap-align: center;

    }



    .bottom-nav-link {
        min-width: 46px;
        min-height: 46px;
        border-radius: 14px;
        padding: 0.25rem;

    }



    .bottom-nav-text {
        display: none;

    }

}



.bottom-nav-item {
    flex: 1 1 0;
    min-width: 56px;
    list-style: none;

}



.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.55rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    transition: all 0.3s ease;
    font-size: 0.75rem;

}



.bottom-nav-link i {
    font-size: clamp(1rem, 2.5vw, 1.25rem);

}



.bottom-nav-link:hover,

.bottom-nav-link.active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    transform: translateY(-1px);

}



.bottom-nav-link i {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;

}



.bottom-nav-link::after {
    content: '';
    width: 18px;
    height: 3px;
    border-radius: 999px;
    margin-top: 4px;
    background: transparent;
    transition: background 0.2s ease, transform 0.2s ease;

}



.bottom-nav-link.active::after {
    background: var(--primary);
    transform: translateY(-1px);

}



.bottom-nav-link.active i {
    color: var(--primary);

}



.mobile-app-name {
    display: none;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    background: linear-gradient(

        120deg,

        var(--primary),

        color-mix(in srgb, var(--primary) 35%, var(--accent)),

        var(--accent)

    );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brandShift 6s ease-in-out infinite, brandGlow 4.5s ease-in-out infinite;

}



.mobile-brand {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;

}



.mobile-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: rgb(255 255 255 / 8%);
    padding: 2px;
    animation: logo-float 3.5s ease-in-out infinite;

}



.mobile-brand {
    gap: 0.5rem;

}



.mobile-brand .mobile-app-name {
    transition: transform 0.3s ease;

}



.mobile-brand:hover .mobile-app-name {
    transform: translateY(-1px);

}



@keyframes logo-float {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgb(79 92 251 / 20%);

    }

    50% {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgb(79 92 251 / 35%);

    }

}



@media (width <= 768px) {
    .mobile-brand {
        display: inline-flex;

    }



    .mobile-app-name {
        display: inline-block;
        margin-bottom: 0;

    }



    .loading-logo-icon img {
        max-width: 100%;
        max-height: 100%;

    }

}



/* Utility Classes */

.hidden {
    display: none !important;

}



.flex {
    display: flex;

}



.items-center {
    align-items: center;

}



.justify-between {
    justify-content: space-between;

}



.gap-1 {
    gap: 0.5rem;

}



.gap-2 {
    gap: 1rem;

}



.gap-3 {
    gap: 1.5rem;

}



.mb-1 {
    margin-bottom: 0.5rem;

}



.mb-2 {
    margin-bottom: 1rem;

}



.mb-3 {
    margin-bottom: 1.5rem;

}



.mt-1 {
    margin-top: 0.5rem;

}



.mt-2 {
    margin-top: 1rem;

}



.mt-3 {
    margin-top: 1.5rem;

}



.text-center {
    text-align: center;

}



.text-secondary {
    color: var(--text-secondary);

}



.text-tertiary {
    color: var(--text-tertiary);

}



.w-full {
    width: 100%;

}



/* ===== MOBILE SIDEBAR ===== */

@media (width <= 767px) {
    .mobile-sidebar {
        position: fixed;
        top: 0;
        right: -320px;
        width: 300px;
        height: 100vh;
        background: linear-gradient(180deg, rgb(10 16 32 / 94%), rgb(13 20 38 / 98%));
        backdrop-filter: blur(24px);
        border-left: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px rgb(6 10 24 / 45%);
        overflow: hidden;
        pointer-events: none;
        opacity: 0;

    }

    

    body, .app-container {
        overflow-x: hidden;

    }

    

    .mobile-sidebar.active {
        right: 0;
        pointer-events: auto;
        opacity: 1;

    }

    

    .mobile-sidebar::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 4px;
        width: 100%;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        z-index: 1;

    }

    

    .mobile-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid rgb(255 255 255 / 8%);
        background: rgb(6 10 24 / 60%);

    }

    

    .mobile-sidebar-title {
        font-size: 1.5rem;
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        background-clip: text;
        -webkit-text-fill-color: transparent;

    }

    

    .mobile-sidebar-close {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgb(255 255 255 / 8%);
        border: 1px solid rgb(255 255 255 / 12%);
        color: var(--text-secondary);
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);

    }

    

    .mobile-sidebar-close:hover {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: white;
        transform: rotate(90deg);

    }



    .mobile-sidebar-body {
        padding: 1.25rem 1.5rem 1.5rem;
        display: grid;
        gap: 1.25rem;
        overflow-y: auto;

    }



    .mobile-sidebar-brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 14px;
        background: rgb(255 255 255 / 6%);
        border: 1px solid rgb(255 255 255 / 8%);

    }



    .mobile-sidebar-logo {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: rgb(255 255 255 / 8%);
        padding: 6px;
        object-fit: contain;

    }



    .mobile-sidebar-app {
        font-weight: 700;
        font-size: 1rem;
        color: var(--text-primary);

    }



    .mobile-sidebar-tagline {
        font-size: 0.8rem;
        color: var(--text-tertiary);

    }



    .mobile-sidebar-nav {
        display: grid;
        gap: 0.5rem;

    }



    .mobile-sidebar-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0.9rem;
        border-radius: 12px;
        background: rgb(255 255 255 / 4%);
        border: 1px solid transparent;

    }



    .mobile-sidebar-nav .nav-link .nav-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        background: rgb(255 255 255 / 8%);

    }



    .mobile-sidebar-nav .nav-link.active {
        background: linear-gradient(135deg, rgb(99 102 241 / 25%), rgb(15 23 42 / 60%));
        border-color: rgb(99 102 241 / 45%);
        color: #fff;

    }



    .mobile-sidebar-nav .nav-link.active .nav-icon {
        background: var(--primary);
        color: #fff;

    }

    

    /* ===== PROFILE ===== */

    .mobile-profile-section {
        padding: 2rem 1.5rem;
        text-align: center;
        border-bottom: 1px solid var(--glass-border);

    }

    

    .mobile-user-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 2rem;
        margin: 0 auto 1rem;
        box-shadow: 0 8px 24px rgb(102 126 234 / 30%);
        position: relative;
        overflow: hidden;

    }

    

    .mobile-user-avatar::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(to right, transparent, rgb(255 255 255 / 30%), transparent);
        transform: rotate(30deg);
        transition: all 0.3s ease;

    }

    

    .mobile-user-avatar:hover::after {
        transform: rotate(30deg) translateX(100%);

    }

    

    .mobile-user-name {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;

    }

    

    .mobile-user-points {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: var(--primary-light);
        color: var(--text-primary);
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.875rem;

    }

    

    /* ===== TASK MANAGER ===== */

    .mobile-task-manager {
        padding: 1.5rem;
        flex: 1;

    }

    

    .mobile-task-manager h4 {
        color: var(--text-primary);
        margin-bottom: 1rem;
        font-size: 1.125rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;

    }

    

    .mobile-task-manager h4::before {
        content: '\1F4CB';
        font-size: 1.1rem;

    }

    

    #mobile-task-list {
        list-style: none;
        padding: 0;
        margin-bottom: 1.5rem;
        max-height: 300px;
        overflow-y: auto;

    }

    

    #mobile-task-list li {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        background: rgb(255 255 255 / 50%);
        border-radius: 8px;
        border-left: 4px solid var(--glass-border);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.3s ease;

    }

    

    #mobile-task-list li:hover {
        background: rgb(255 255 255 / 80%);
        transform: translateX(4px);

    }

    

    #mobile-task-list li::before {
        content: '?';
        color: var(--text-muted);
        font-size: 0.875rem;

    }

    

    .mobile-task-input-container {
        display: flex;
        gap: 0.5rem;
        margin-top: auto;

    }

    

    #mobile-task-input {
        flex: 1;
        padding: 0.5rem 1rem;
        border: 2px solid var(--glass-border);
        border-radius: 8px;
        background: rgb(255 255 255 / 80%);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.3s ease;

    }

    

    #mobile-task-input:focus {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 3px rgb(102 126 234 / 10%);

    }

    

    #mobile-task-add {
        padding: 0.5rem 1.5rem;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        min-width: 60px;

    }

    

    #mobile-task-add:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgb(102 126 234 / 30%);

    }

    

    /* ===== OVERLAY ===== */

    .mobile-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(0 0 0 / 50%);
        backdrop-filter: blur(4px);
        z-index: 1999;
        animation: fadeIn 0.3s ease;

    }

    

    .mobile-sidebar-overlay.active {
        display: block;

    }

    

    @keyframes fadeIn {

        from { opacity: 0; }

        to { opacity: 1; }

    }

    

    /* ===== MOBILE MENU BUTTON ===== */

    .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 140%;
        height: 64px;
        border-radius: 16px;
        background: radial-gradient(circle at 20% 20%, rgb(99 102 241 / 30%), rgb(15 23 42 / 85%));
        border: 1px solid rgb(99 102 241 / 40%);
        color: #fff;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        box-shadow: 0 16px 32px rgb(15 23 42 / 35%), inset 0 0 0 1px rgb(255 255 255 / 6%);
        position: relative;
        overflow: hidden;

    }



    .mobile-menu-btn:hover {
        transform: translateY(-2px);
        background: radial-gradient(circle at 20% 20%, rgb(168 85 247 / 35%), rgb(15 23 42 / 90%));
        box-shadow: 0 18px 36px rgb(15 23 42 / 40%);

    }



    .mobile-menu-btn i {
        font-size: 1.45rem;
        line-height: 1;

    }

    

    /* Hide desktop sidebar */

    .sidebar, .sidebar-toggle {
        display: none !important;

    }

    

    /* Smooth scrollbars */

    .mobile-sidebar, #mobile-task-list {
        scrollbar-width: thin;
        scrollbar-color: rgb(102 126 234 / 30%) transparent;

    }

    

    .mobile-sidebar::-webkit-scrollbar,

    #mobile-task-list::-webkit-scrollbar {
        width: 6px;

    }

    

    .mobile-sidebar::-webkit-scrollbar-track,

    #mobile-task-list::-webkit-scrollbar-track {
        background: transparent;

    }

    

    .mobile-sidebar::-webkit-scrollbar-thumb,

    #mobile-task-list::-webkit-scrollbar-thumb {
        background: rgb(102 126 234 / 30%);
        border-radius: 3px;

    }

    

    .mobile-sidebar::-webkit-scrollbar-thumb:hover,

    #mobile-task-list::-webkit-scrollbar-thumb:hover {
        background: rgb(102 126 234 / 50%);

    }



@media (width >= 901px) {
    #mobile-task-list,

    .mobile-sidebar {
        scrollbar-width: none;

    }



        #mobile-task-list::-webkit-scrollbar,

        .mobile-sidebar::-webkit-scrollbar {
            width: 0;
            height: 0;

        }

    }

    

    /* Force hide when not active */

    .mobile-sidebar:not(.active) {
        transform: translateX(100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;

    }

}



/* Hide mobile elements on larger screens */

@media (width >= 768px) {
    .mobile-sidebar,

    .mobile-sidebar-overlay,

    .mobile-menu-btn {
        display: none !important;

    }

}



/* ===== DISABLE FLOATING PLAYER ON MOBILE ===== */

@media (width <= 767px) {
    .floating-player {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;

    }

    

    /* Show mobile player on mobile screens */

    .mobile-music-player {
        display: block;

    }

    

    /* Add bottom padding to main content to prevent overlap */

    body {
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom)) !important;

    }

    

    .section.active {
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 12px) !important;

    }

    

    .glass-card,

    .task-list-container, .music-grid,

    .notes-grid,

    .calendar-container {
        margin-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 12px);

    }

}



/* Show desktop floating player on larger screens */

@media (width >= 768px) {
    .mobile-music-player {
        display: none !important;

    }

    

    .floating-player {
        display: flex !important;

    }

}



/* Responsive Design */

@media (width <= 1024px) {
    .card-grid {
        grid-template-columns: 1fr;

    }

    

    .actions-grid {
        grid-template-columns: repeat(2, 1fr);

    }

}



@media (width <= 768px) {
    .bottom-nav {
        display: block;

    }

    

    .app-container {
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));

    }

    

    .sidebar {
        display: none;

    }

    

    .section-title {
        font-size: 1.5rem;

    }



    .card-grid {
        grid-template-columns: 1fr;

    }



    .timer-controls {
        flex-wrap: wrap;

    }



    .timer-btn {
        padding: 0.75rem 1.5rem;

    }



    .stats-grid {
        grid-template-columns: 1fr;

    }



    .music-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    }



    .floating-player:hover,

    .floating-player.expanded {
        width: 250px;

    }



    .timer-type-selector {
        flex-direction: column;
        align-items: center;

    }



    .timer-type-btn {
        width: 100%;
        max-width: 250px;
        justify-content: center;

    }

    

    .header-content {
        flex-direction: column;
        gap: 1rem;

    }

    

    .header-actions {
        width: 100%;
        justify-content: flex-end;

    }

    

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);

    }

    

    .welcome-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;

    }

    

    .points-badge {
        align-self: flex-start;

    }

    

    .chart-summary {
        grid-template-columns: 1fr;
        gap: 0.75rem;

    }

}



@media (width <= 500px) {
    .calendar-grid {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));

    }



    .calendar-day {
        font-size: 0.7rem;
        padding: 0.25rem;
        min-width: 40px;

    }



    .calendar-day-header {
        font-size: 0.65rem;
        padding: 0.4rem 0;

    }



    .calendar-nav-btn {
        width: 30px;
        height: 30px;

    }



    .calendar-container {
        padding: 0.75rem;

    }

}



@media (width <= 500px) {
    .bottom-nav-items {
        justify-content: flex-start;
        gap: 0.5rem;

    }



    .bottom-nav-item {
        flex: 0 0 auto;
        min-width: 63px;

    }



    .bottom-nav-link {
        font-size: 0.65rem;
        padding: 0.2rem;

    }



    .bottom-nav-link i {
        font-size: 1rem;
        margin-bottom: 0.2rem;

    }

}



@media (width <= 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        width: 280px;
        z-index: 200;
        transition: transform 0.3s ease-in-out;

    }



    .sidebar.active {
        transform: translateX(0);

    }



    .sidebar-overlay {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgb(0 0 0 / 40%);
        z-index: 150;
        display: none;

    }



    .sidebar.active + .sidebar-overlay {
        display: block;

    }

}



@media (width <= 480px) {
    .stats-grid {
        grid-template-columns: 1fr;

    }

    

    .actions-grid {
        grid-template-columns: repeat(2, 1fr);

    }

    

    .chart-bars {
        height: 100px;

    }

    

    .chart-bar {
        width: 20px;

    }

    

    .timer-display {
        font-size: 2.5rem;

    }

    

    .timer-controls {
        flex-direction: column;
        align-items: center;

    }

    

    .timer-btn {
        width: 200px;
        justify-content: center;

    }

    

    .notes-grid {
        grid-template-columns: 1fr;

    }

    

    .floating-player {
        bottom: 10px;
        left: 10px;

    }

    

    .floating-player:hover,

    .floating-player.expanded {
        width: 200px;

    }

}



@media (height <= 800px) {
    .glass-card {
        padding: 1.25rem;
        border-radius: 18px;

    }



    .glass-card h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;

    }



    .glass-card .flex {
        gap: 0.5rem;

    }



    .glass-card .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        min-height: 40px;

    }

}



/* Additional Modals */

.modal2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 50%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;

}



.modal2.active {
    display: flex;
    opacity: 1;

}



.modal2-content {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    width: 360px;
    max-width: 90%;
    box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;

}



.modal2.active .modal2-content {
    transform: translateY(0);

}



.profile-modal {
    background:

        radial-gradient(900px 260px at 10% -10%, rgb(99 102 241 / 22%), transparent),

        radial-gradient(700px 220px at 100% 0%, rgb(14 165 233 / 18%), transparent),

        linear-gradient(160deg, rgb(255 255 255 / 8%), rgb(10 16 30 / 85%));
    border-radius: 26px;
    padding: 1.9rem;
    width: 560px;
    max-width: 92%;
    border: 1px solid rgb(148 163 184 / 22%);
    box-shadow: 0 30px 70px rgb(5 8 18 / 55%);
    position: relative;
    overflow: hidden;

}



@media (width <= 768px) and (orientation: landscape) {
    .section-brand {
        display: none;

    }

}



.profile-modal-header {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgb(148 163 184 / 18%);
    padding-bottom: 0.9rem;

}



.profile-modal-header .avatar-preview {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 2px solid rgb(255 255 255 / 12%);
    box-shadow: 0 16px 32px rgb(10 16 30 / 35%);
    position: relative;
    overflow: hidden;

}



.profile-modal-header .avatar-preview .avatar-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;

}



.profile-modal-title h3 {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    letter-spacing: -0.01em;

}



.profile-modal .close-btn2 {
    position: static;
    margin-left: auto;
    font-size: 1.4rem;
    color: var(--text-tertiary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(148 163 184 / 18%);
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;

}



.profile-modal .close-btn2:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
    background: rgb(255 255 255 / 8%);

}



.profile-modal form {
    display: grid;
    gap: 1.1rem;

}



.profile-modal .form-group {
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    border: 1px solid rgb(148 163 184 / 18%);
    background: rgb(255 255 255 / 3%);

}



.profile-modal .form-input,

.profile-modal .form-textarea,

.profile-modal .form-select {
    background: rgb(255 255 255 / 4%);
    border-radius: 12px;

}



.profile-modal .btn[type="submit"] {
    border-radius: 999px;
    padding: 0.6rem 1.2rem;

}



.profile-modal .avatar-dropzone {
    border-radius: 16px;
    border: 1px dashed rgb(148 163 184 / 35%);
    background: rgb(255 255 255 / 3%);

}



.profile-modal .avatar-preview-container {
    padding: 0.75rem;
    border-radius: 16px;
    border: 1px solid rgb(148 163 184 / 18%);
    background: rgb(255 255 255 / 3%);

}



@media (width <= 768px) {
    .profile-modal {
        width: min(92vw, 480px);
        padding: 1.35rem;
        border-radius: 22px;

    }



    .profile-modal-header {
        gap: 0.85rem;
        padding-bottom: 0.7rem;

    }



    .profile-modal-header .avatar-preview {
        width: 60px;
        height: 60px;

    }



    .profile-modal-title h3 {
        font-size: 1.2rem;

    }



    .profile-modal .close-btn2 {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;

    }



    .profile-modal .form-group {
        padding: 0.55rem 0.65rem;
        border-radius: 12px;

    }

}



@media (width >= 901px) {
    body.mobile-compact {
        scrollbar-width: none;

    }



    body.mobile-compact ::-webkit-scrollbar {
        width: 0;
        height: 0;

    }

}



/* Modal3 */

.modal3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(30 41 59 / 85%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;

}



.modal3.active {
    display: flex;

}



.modal3-content {
    background: #1e293b;
    color: #f8fafc;
    padding: 2rem;
    border-radius: 1rem;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 10px 25px rgb(0 0 0 / 50%);
    text-align: center;
    position: relative;
    animation: slideUp 0.35s ease-out;

}



@keyframes slideUp {

    0% { transform: translateY(50px); opacity: 0; }

    100% { transform: translateY(0); opacity: 1; }

}



.modal3-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;

}



.modal3-header h3 {
    font-size: 1.25rem;
    font-weight: 600;

}



.close-btn {
    background: transparent;
    border: none;
    color: #f8fafc;
    font-size: 1.25rem;
    cursor: pointer;
    transition: color 0.2s ease;

}



.close-btn:hover {
    color: #6366f1;

}



.modal3-body {
    display: flex;
    flex-direction: column;
    align-items: center;

}



.input-field {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #334155;
    background: #0f172a;
    color: #f8fafc;
    margin-top: 1rem;

}



.input-field::placeholder {
    color: #94a3b8;

}



#show-qr-btn3, #import-qr-btn3 {
    background: #6366f1;
    color: #f8fafc;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;

}



#show-qr-btn3:hover, #import-qr-btn3:hover {
    background: #4f46e5;

}



/* Header */

.section-header {
    background: linear-gradient(135deg,

        color-mix(in srgb, var(--surface) 88%, transparent),

        color-mix(in srgb, var(--surface-light) 94%, transparent));
    color: var(--text-primary);
    padding: calc(var(--space-4) + 0.2rem) calc(var(--space-4) + 0.6rem);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 18px 34px rgb(8 12 26 / 20%);
    margin-bottom: var(--space-3);
    position: relative;
    overflow: hidden;

}



.section-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left,

        color-mix(in srgb, var(--primary) 20%, transparent),

        transparent 55%);
    opacity: 0.6;
    pointer-events: none;

}



.section-header .header-content {
    position: relative;
    z-index: 1;
    align-items: center;

}



.section-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;

}



.section-subtitle {
    color: var(--text-tertiary);
    font-size: 0.9rem;

}



@media (width <= 900px) {
    .section-header {
        padding: var(--space-4);
        border-radius: 14px;

    }



    .section-title {
        font-size: 1.15rem;

    }



    .section-subtitle {
        font-size: 0.82rem;

    }

}



/* Task manager header enhancement */

#tasks .section-header {
    background: linear-gradient(140deg, rgb(79 92 251 / 18%), rgb(18 22 38 / 90%));
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 36px rgb(0 0 0 / 24%);

}



#tasks .section-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 10%, rgb(99 102 241 / 35%), transparent 55%);
    opacity: 0.8;
    pointer-events: none;

}



#tasks .header-content {
    align-items: center;

}



#tasks .section-title i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 10px 18px rgb(79 92 251 / 35%);

}



#tasks .header-actions {
    gap: 0.5rem;
    padding: 0.35rem;
    border-radius: 14px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);

}



#tasks .header-actions .btn {
    border-radius: 10px;

}



#tasks .header-actions .btn-primary {
    box-shadow: 0 10px 18px rgb(79 92 251 / 35%);

}



/* Desktop sidebar fixes */

@media (width >= 901px) {
  :root {
    --header-height: 64px;

  }



  .app-container {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-areas:

      "sidebar header"

      "sidebar main";
    height: 100vh;

  }



  .header-content {
    max-width: none;
    margin: 0;

  }



  .header {
    height: var(--header-height);

  }



  .header-shell {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;

  }



  .main-content {
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    align-items: stretch;
    display: flex;
    flex-direction: column;

  }



  .main-content > .section {
    min-height: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;

  }



  .section {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;

  }



  .section-header {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;

  }



  .section-header .header-content {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;

  }



  .section {
    min-height: auto;
    padding-bottom: clamp(1.2rem, 2.2vw, 2rem);

  }



  .sidebar {
    display: block !important;
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: stretch;
    overflow: hidden;

  }



  .sidebar .nav-menu {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 6px;

  }



  .sidebar-toggle {
    display: flex !important;

  }

}



/* Growth scale expandable */

.growth-card.compact .analytics-stat-grid .stat-tile:nth-child(n + 5) {
  display: none;

}



.growth-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

}



.growth-card .card-header .card-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;

}



.growth-modal-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;

}



.section#dashboard .section-header .header-content.dashboard-header-container {
    max-width: none;
    margin: 0;
    justify-content: stretch !important;
    text-align: right;

}



.section#dashboard .section-header .header-actions {
    margin-top: 0;

}



.section#dashboard .section-header .header-actions .btn {
    white-space: nowrap;

}



.section-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 50%);
    opacity: 0.6;
    pointer-events: none;

}



.section-header::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));

}



.section-header > * {
    position: relative;
    z-index: 1;

}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;

}



.notes-credit {
    background: rgb(255 255 255 / 20%);
    border: 1px solid rgb(255 255 255 / 35%);
    color: white;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;

}



.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.1rem 0;

}



.header-left {
    flex: 1;
    min-width: 0;

}



.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;

}



.section-title i {
    font-size: 1.8rem;
    opacity: 0.9;

}



.section-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;

}



.section-header .header-actions {
    gap: 0.6rem;

}



.section-header .header-actions .btn {
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-weight: 600;

}



.section#dashboard .section-header {
    border-radius: 20px;
    padding: 1.35rem 1.6rem;

}



.section#dashboard .section-header .header-content {
    align-items: center;

}



.section#dashboard .section-title {
    font-size: clamp(1.6rem, 2.2vw, 2.4rem);

}



.section#dashboard .section-subtitle {
    font-size: 1rem;
    max-width: 52ch;

}



@media (width <= 900px) {
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;

    }



    .section-header .header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;

    }



    .section-header .header-actions .btn {
        width: auto;
        padding: 0.45rem 0.9rem;

    }



    .section#dashboard .section-header {
        padding: 1.1rem 1.2rem;
        border-radius: 16px;

    }



    .section#dashboard .section-subtitle {
        font-size: 0.9rem;

    }

}



.header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;

}



.header-profile-tab {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-weight: 600;

}



.header-profile-tab i {
    margin-right: 0.35rem;

}



@media (width <= 900px) {
    .header-profile-tab {
        display: none;

    }

}



@media (width >= 900px) {
    .sidebar .user-avatar {
        display: none;

    }



    .sidebar .user-details {
        margin-left: 0;

    }

}



/* Stats Grid */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    transform: translateY(-1rem);

}



.stat-card {
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;

}



.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: currentcolor;
    opacity: 0.1;

}



.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgb(0 0 0 / 12%);

}



.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;

}



.stat-icon.total {
    background: linear-gradient(135deg, #667eea, #764ba2);

}



.stat-icon.completed {
    background: linear-gradient(135deg, #10b981, #059669);

}



.stat-icon.pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);

}



.stat-icon.overdue {
    background: linear-gradient(135deg, #ef4444, #dc2626);

}



.stat-content {
    flex: 1;

}



.stat-content h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--text-primary);

}



/* Mobile layout alignment fixes */

@media (width <= 768px) {
    .app-container {
        grid-template-columns: 1fr;
        grid-template-areas:

            "header"

            "main";

    }



    .main-content {
        padding: 1rem;

    }



    .header-content,

    .stats-grid,

    .card-grid,

    .tasks-content,

    .calendar-container,

    .task-list-container,

    .task-details-panel,

    .welcome-card,

    .section-header {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;

    }



    .stats-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        transform: none;

    }



    .card-grid {
        grid-template-columns: 1fr;

    }



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

    }



    .tasks-content {
        padding: 0 0 1rem;

    }



    .section-header {
        border-radius: 0 0 20px 20px;

    }



    .header-left {
        transform: none;

    }



    .welcome-content {
        align-items: flex-start;

    }



    .bottom-nav {
        left: 0;
        right: 0;
        width: 100%;

    }



    .section.active {
        padding-bottom: 80px !important;

    }

}



@media (width <= 768px) {
    img, video, canvas {
        max-width: 100%;
        height: auto;

    }



    .header-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;

    }



    .glass-card {
        padding: 1rem;

    }



    .form-input,

    .form-textarea,

    select {
        width: 100%;
        max-width: 100%;

    }

}



@media (width <= 520px) {
    .music-grid {
        grid-template-columns: 1fr;

    }



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

    }



    .section-header {
        padding: 1.25rem 0.75rem;

    }

}



/* Mobile visual refresh */

@media (width <= 768px) {
    :root {
        --mobile-pad: clamp(0.9rem, 3.2vw, 1.25rem);
        --mobile-card-radius: clamp(16px, 4vw, 22px);

    }



    body {
        background:

            radial-gradient(1200px 600px at 20% -10%, rgb(99 102 241 / 18%), transparent 60%),

            radial-gradient(900px 500px at 100% 10%, rgb(16 185 129 / 16%), transparent 55%),

            var(--background);

    }



    .header {
        padding: 0.6rem var(--mobile-pad);
        backdrop-filter: blur(12px);
        background: rgb(15 23 42 / 60%);
        border-bottom: 1px solid rgb(255 255 255 / 6%);

    }



    .header-content {
        gap: 0.25rem;

    }



    #header-title {
        font-size: 1.2rem;
        font-weight: 700;

    }



    #header-subtitle {
        font-size: 0.85rem;

    }



    .header-actions {
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;

    }



    .header-actions .header-btn,

    .header-actions .mobile-menu-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgb(99 102 241 / 20%), rgb(15 23 42 / 65%));
        border: 1px solid rgb(99 102 241 / 35%);
        box-shadow: 0 12px 24px rgb(15 23 42 / 28%);
        line-height: 1;
        position: relative;
        overflow: hidden;

    }



    .header-actions .mobile-menu-btn::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 16px;
        background: conic-gradient(from 120deg, rgb(99 102 241 / 35%), rgb(168 85 247 / 45%), rgb(99 102 241 / 35%));
        filter: blur(6px);
        opacity: 0.7;
        z-index: 0;
        pointer-events: none;

    }



    .header-actions .mobile-menu-btn > i {
        position: relative;
        z-index: 1;

    }



    .header-actions .net-indicator {
        order: -1;
        margin-right: auto;
        padding: 0.35rem 0.6rem;
        border-radius: 999px;
        background: rgb(255 255 255 / 8%);

    }



    .header-actions .net-label {
        font-size: 0.75rem;

    }



    .header-actions .header-btn i,

    .header-actions .mobile-menu-btn i {
        font-size: 1.1rem;
        line-height: 1;

    }



    .main-content {
        padding: var(--mobile-pad);

    }



    .section {
        padding: clamp(0.9rem, 4vw, 1.6rem) 0 clamp(2.2rem, 8vw, 3.4rem);

    }



    .section-title {
        font-size: clamp(1.35rem, 5vw, 1.8rem);

    }



    .section-subtitle {
        font-size: clamp(0.85rem, 3.4vw, 1rem);

    }



    .section-header {
        padding: 0.85rem var(--mobile-pad);
        border-radius: 0 0 22px 22px;
        box-shadow: 0 16px 24px rgb(0 0 0 / 20%);

    }



    .glass-card {
        border-radius: var(--mobile-card-radius);
        padding: 0.9rem;
        box-shadow: 0 12px 24px rgb(0 0 0 / 18%);

    }



    .stats-grid,

    .card-grid,

    .actions-grid {
        gap: 0.7rem;

    }



    .card-grid,

    .stats-grid,

    .actions-grid {
        grid-template-columns: 1fr;

    }



    .music-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

    }



    .stat-card-enhanced {
        padding: 1rem;

    }



    .welcome-card {
        padding: 1.1rem;

    }



    .welcome-content {
        gap: 0.75rem;

    }



    .progress-bar-container {
        height: 6px;

    }



    .toolbar,

    .filters,

    .tasks-content,

    .music-toolbar {
        gap: 0.75rem;

    }



    .form-input,

    .form-textarea,

    select {
        border-radius: 14px;
        padding: 0.75rem 0.9rem;
        background: rgb(255 255 255 / 4%);
        border: 1px solid rgb(255 255 255 / 8%);

    }



    .btn,

    .btn-icon,

    .header-btn {
        border-radius: 14px;
        padding: 0.7rem 1rem;

    }



.bottom-nav {
    background: rgb(15 23 42 / 80%);
    border-top: 1px solid rgb(255 255 255 / 8%);
    backdrop-filter: blur(12px);

}



.bottom-nav-items {
    padding: 0.35rem 0.6rem 0.5rem;

}



.bottom-nav-link {
    padding: 0.4rem 0.6rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 40px;
    min-height: 40px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.bottom-nav-link.active {
    box-shadow: 0 8px 16px rgb(79 92 251 / 25%);
    background: rgb(255 255 255 / 8%);
    transform: translateY(-2px);

}



.bottom-nav-link i {
    font-size: 1.05rem;

}



.bottom-nav-text {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;

}



.bottom-nav-link.active .bottom-nav-text {
    color: var(--primary);

}



/* Bottom nav polish */

.bottom-nav {
    background: linear-gradient(180deg,

        color-mix(in srgb, var(--surface) 88%, transparent),

        color-mix(in srgb, var(--background) 80%, transparent));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    margin: 0 12px 10px;
    padding: 0.4rem 0.6rem calc(env(safe-area-inset-bottom, 0) + 0.4rem);
    box-shadow: 0 -12px 30px color-mix(in srgb, var(--background) 65%, transparent);
    backdrop-filter: blur(16px);

}



.bottom-nav-items {
    gap: 0.35rem;

}



.bottom-nav-link {
    min-width: 52px;
    min-height: 52px;
    border-radius: 16px;
    padding: 0.35rem 0.5rem;
    background: color-mix(in srgb, var(--surface) 72%, transparent);

}



.bottom-nav-link i {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    font-size: 1rem;
    margin-bottom: 0.2rem;

}



.bottom-nav-link.active {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    box-shadow: 0 10px 18px color-mix(in srgb, var(--primary) 30%, transparent);

}



.bottom-nav-link.active i {
    background: var(--primary);
    color: #fff;

}



.bottom-nav-link::after {
    width: 8px;
    height: 8px;
    border-radius: 50%;

}



/* System health flow */

.system-check-shell {
    display: grid;
    gap: 0.75rem;

}



.system-check-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

}



.system-check-header h4 {
    margin: 0;

}



.system-check-meta-line {
    font-size: 0.8rem;
    color: var(--text-tertiary);

}



.system-check-pill {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    color: var(--text-secondary);
    font-weight: 600;

}



/* Task modal mobile improvements */

@media (width <= 768px) {
    #task-modal .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 18px 18px 0 0;
        max-height: 100svh;
        height: 100svh;
        align-self: flex-end;
        box-shadow: 0 -10px 30px rgb(0 0 0 / 35%);
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;

    }



    #task-modal.modal-overlay {
        align-items: flex-end;

    }



    #task-modal form {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;

    }



    #task-modal .modal-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface);
        border-bottom: 1px solid var(--border);

    }



    #task-modal .modal-body {
        flex: 1;
        max-height: none;
        overflow-y: auto;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));

    }



    #task-modal .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));

    }



    #task-modal .form-row {
        grid-template-columns: 1fr;

    }



    #task-modal .form-group label {
        font-size: 0.9rem;

    }



    #task-modal input,

    #task-modal textarea,

    #task-modal select {
        width: 100%;

    }



    #task-modal .date-quick-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;

    }



    #task-modal .btn {
        min-height: 44px;

    }

}



.stat-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;

}



/* Left Panel */

.task-list-panel {
    background: var(--surface);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-direction: column;
    min-height: 0;

}



/* Toolbar */

.toolbar {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    align-items: center;

}



.search-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;

}



.search-box i {
    position: absolute;
    left: 1rem;
    color: var(--text-tertiary);
    font-size: 1rem;

}



.search-box input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: 2px solid color-mix(in srgb, var(--text-tertiary) 35%, transparent);
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: var(--surface);
    color: var(--text-primary);

}



.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgb(79 92 251 / 20%);

}



.clear-search {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background: rgb(255 255 255 / 8%);
    color: var(--text-tertiary);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;

}



.search-box input:not(:placeholder-shown) ~ .clear-search,

.search-box input:focus ~ .clear-search {
    display: flex;

}



.clear-search:hover {
    background: rgb(255 255 255 / 14%);
    color: var(--text-primary);

}



.view-controls {
    display: flex;
    gap: 0.5rem;
    background: var(--surface-light);
    padding: 0.25rem;
    border-radius: 12px;

}



.view-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: var(--text-secondary);

}



.view-btn.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);

}



/* Quick Add */

.quick-add {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;

}



.quick-add input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: 2px solid color-mix(in srgb, var(--text-tertiary) 35%, transparent);
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: var(--surface);
    color: var(--text-primary);

}



.quick-add input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(79 92 251 / 20%);

}



.quick-add-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;

}



.quick-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(102 126 234 / 30%);

}



/* Filters */

.filters {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);

}







.sort-select {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: 2px solid color-mix(in srgb, var(--text-tertiary) 35%, transparent);
    border-radius: 12px;
    background: var(--surface-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    background-size: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    min-width: 140px;

}



.sort-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(79 92 251 / 20%);

}



/* Task Item */

.task-item {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 18%, transparent);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

}



.task-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: currentcolor;
    opacity: 0;
    transition: opacity 0.3s ease;

}



.task-item.high-priority::before {
    opacity: 1;
    color: #ef4444;

}



.task-item.medium-priority::before {
    opacity: 1;
    color: #f59e0b;

}



.task-item.low-priority::before {
    opacity: 1;
    color: #10b981;

}



.task-item:hover {
    border-color: color-mix(in srgb, var(--primary) 32%, transparent);
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow-soft);
    background: var(--surface-light);

}



.task-item.selected {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));

}



.task-item.completed {
    opacity: 0.7;

}



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

}



.task-checkbox {
    margin-top: 0.25rem;

}



.checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--text-tertiary) 35%, transparent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

}



.checkbox.checked {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;

}



.checkbox.checked::after {
    content: '?';
    color: white;
    font-size: 0.75rem;
    font-weight: bold;

}



.task-content {
    flex: 1;
    min-width: 0;

}



.task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;

}



.task-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
    flex: 1;

}



.task-priority {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    flex-shrink: 0;

}



.task-priority.high {
    background: rgb(239 68 68 / 10%);
    color: #ef4444;

}



.task-priority.medium {
    background: rgb(245 158 11 / 10%);
    color: #f59e0b;

}



.task-priority.low {
    background: rgb(16 185 129 / 10%);
    color: #10b981;

}



.task-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

}

.task-meta {
    gap: 0.75rem;
}

.task-actions .btn-icon {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 18%, transparent);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
}



.task-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;

}



.meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.meta-item i {
    font-size: 0.875rem;

}



.due-date.overdue {
    color: #ef4444;
    font-weight: 500;

}



.due-date.today {
    color: #f59e0b;
    font-weight: 500;

}



.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;

}



.task-tag {
    padding: 0.25rem 0.75rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);

}



.task-star {
    color: #f59e0b;
    opacity: 0;
    transition: opacity 0.3s ease;

}



.task-item:hover .task-star {
    opacity: 1;

}



.task-item.starred .task-star {
    opacity: 1;

}



.task-actions {
    display: flex;
    gap: 0.375rem;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;

}



.task-item:hover .task-actions {
    opacity: 1;
    transform: translateX(0);

}



.task-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;

}



.task-action-btn:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
    color: white;

}



/* Right Panel */

.task-details-panel {
    background: var(--surface);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-direction: column;

}



.details-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;

}



.details-empty .empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    opacity: 0.5;

}



.details-empty h4 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem;

}



.details-empty p {
    color: var(--text-secondary);
    margin: 0 0 2rem;

}



.shortcuts-hint {
    background: var(--surface-light);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--text-secondary);

}



.shortcuts-hint kbd {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    font-family: monospace;

}



.gestures-hint {
    display: none;
    margin-bottom: 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: left;

}



.gestures-list {
    display: grid;
    gap: 0.65rem;

}



.gesture-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    font-size: 0.9rem;

}



.gesture-item span:last-child {
    color: var(--text-secondary);
    font-size: 0.85rem;

}



.gesture-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.35rem 0;

}



.gesture-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;

}



.dashboard-gestures-btn {
    display: none;

}



.gesture-toggle {
    margin-top: 1rem;

}



@media (width <= 768px) {
    #shortcuts-btn,

    #shortcuts-modal {
        display: none !important;

    }



    #dashboard-shortcuts-btn {
        display: none !important;

    }



    .dashboard-gestures-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;

    }



    .shortcuts-hint {
        display: none;

    }



    .gestures-hint {
        display: block;

    }

}



@media (width <= 768px) {
    .onboarding-card-content {
        grid-template-columns: 1fr;
        align-items: flex-start;

    }



    .onboarding-actions {
        width: 100%;

    }



    .onboarding-actions .btn {
        flex: 1 1 auto;

    }



    .onboarding-hero {
        grid-template-columns: 1fr;

    }



    .onboarding-cta-row {
        justify-content: stretch;

    }



    .onboarding-cta-row .btn {
        flex: 1 1 auto;

    }

}



/* Form Styles */

.form-group {
    margin-bottom: 1.5rem;

}



.form-group:last-child {
    margin-bottom: 0;

}



.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;

}



.form-group input,

.form-group select,

.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.3s ease;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgb(102 126 234 / 10%);

}



.form-group textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;

}



/* Accent Gradient Picker */

.accent-gradient-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);

}



.accent-preview {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 8px 18px rgb(0 0 0 / 20%);

}



.accent-slider {
    appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(

        90deg,

        hsl(0deg 85% 60%),

        hsl(60deg 85% 60%),

        hsl(120deg 85% 60%),

        hsl(180deg 85% 60%),

        hsl(240deg 85% 60%),

        hsl(300deg 85% 60%),

        hsl(360deg 85% 60%)

    );
    outline: none;
    border: 1px solid rgb(255 255 255 / 10%);

}



.accent-slider::-webkit-slider-thumb {
    appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary);
    box-shadow: 0 6px 12px rgb(0 0 0 / 20%);
    cursor: pointer;

}



.accent-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary);
    box-shadow: 0 6px 12px rgb(0 0 0 / 20%);
    cursor: pointer;

}



.accent-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

}



.accent-label {
    font-weight: 600;
    color: var(--text-primary);

}



.accent-hex {
    max-width: 120px;
    text-align: center;
    background: var(--surface-light);

}



/* Push Controls */

.push-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

}



.push-controls.disabled {
    opacity: 0.6;

}



.push-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

}



.push-input {
    font-size: 0.85rem;

}



#push-status {
    display: block;

}



#push-status[data-state="success"] {
    color: var(--success);

}



#push-status[data-state="warning"] {
    color: var(--warning);

}



#push-status[data-state="error"] {
    color: var(--danger);

}



/* Network Indicator */

.net-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.75rem;
    color: var(--text-secondary);

}



.net-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 10px rgb(16 185 129 / 60%);

}



.net-indicator.offline .net-dot {
    background: var(--danger);
    box-shadow: 0 0 10px rgb(239 68 68 / 60%);

}



.net-indicator.offline .net-label {
    color: var(--danger);

}



.net-indicator.limited .net-dot {
    background: var(--warning);
    box-shadow: 0 0 10px rgb(245 158 11 / 60%);

}



.net-indicator.limited .net-label {
    color: var(--warning);

}



.net-indicator.checking .net-dot {
    background: var(--info);
    box-shadow: 0 0 10px rgb(56 189 248 / 60%);
    animation: netPulse 1.2s ease-in-out infinite;

}



@keyframes netPulse {

    0% { transform: scale(0.9); opacity: 0.6; }

    50% { transform: scale(1.1); opacity: 1; }

    100% { transform: scale(0.9); opacity: 0.6; }

}



.debug-panel {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgb(15 23 42 / 70%);
    border: 1px solid rgb(255 255 255 / 8%);

}



.debug-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    flex-wrap: wrap;

}



.debug-summary {
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;

}



.debug-tests {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.debug-test {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    background: rgb(255 255 255 / 8%);
    color: var(--text-secondary);

}



.debug-test.ok {
    background: rgb(16 185 129 / 15%);
    color: var(--success);

}



.debug-test.bad {
    background: rgb(239 68 68 / 15%);
    color: var(--danger);

}



.debug-logs {
    max-height: 220px;
    overflow: auto;
    display: grid;
    gap: 0.4rem;

}



.debug-log {
    display: grid;
    grid-template-columns: 70px 60px 1fr;
    gap: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.72rem;
    padding: 0.4rem 0.5rem;
    border-radius: 10px;
    background: rgb(0 0 0 / 25%);

}



.debug-log .debug-level {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);

}



.debug-log.error .debug-level {
    color: var(--danger);

}



.debug-log.warn .debug-level {
    color: var(--warning);

}



.debug-log.info .debug-level {
    color: var(--info);

}



.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);

}



.date-quick-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;

}



.date-quick {
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;

}



.date-quick:hover {
    background: #e5e7eb;

}



.tags-input {
    position: relative;

}



.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;

}



.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;

}



.remove-tag {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 0.875rem;

}



.tag-suggestions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;

}



.tag-suggestion {
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;

}



.tag-suggestion:hover {
    background: #e5e7eb;

}



/* Empty & Loading States */

.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;

}



.empty-state .empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: #9ca3af;
    opacity: 0.5;

}



.empty-state h4 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem;

}



.empty-state p {
    color: var(--text-secondary);
    margin: 0 0 1.5rem;

}



.empty-state-soft {
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%);

}



.empty-state .empty-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;

}



.loading-state {
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;

}



.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #f3f4f6;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;

}



@keyframes spin {

    to { transform: rotate(360deg); }

}









/* Shortcuts Modal */

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}



.shortcut-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 12px;

}



.shortcut-item kbd {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    font-family: monospace;
    font-size: 0.875rem;
    color: #374151;
    min-width: 60px;
    text-align: center;

}



.shortcut-item span {
    color: #4b5563;
    font-size: 0.95rem;

}



/* Grid View */

.task-list.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;

}



.task-list.grid-view .task-item {
    flex-direction: column;
    height: auto;

}



.task-list.grid-view .task-checkbox {
    position: absolute;
    top: 1rem;
    right: 1rem;

}



.task-list.grid-view .task-content {
    width: 100%;

}



.task-list.grid-view .task-actions {
    position: absolute;
    top: 1rem;
    right: 3rem;
    opacity: 1;
    transform: none;

}



/* Touch Swipe Actions */

.swipe-actions {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;

}



.swipe-left,

.swipe-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 0.875rem;

}



.swipe-left {
    background: linear-gradient(90deg, #10b981, rgb(16 185 129 / 80%));

}



.swipe-right {
    background: linear-gradient(90deg, rgb(239 68 68 / 80%), #ef4444);

}



.task-item.swiping .swipe-actions {
    opacity: 1;

}



/* ===============================

   Modern UI Refresh Overrides

   =============================== */



body {
    background:

        radial-gradient(1200px 720px at 10% -20%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 55%),

        radial-gradient(900px 600px at 90% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),

        var(--background);

}



h1, h2, h3, h4, .section-title, .card-header h3 {
    letter-spacing: -0.01em;
    font-weight: 600;

}



.header {
    border-bottom: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--background) 80%, transparent);
    backdrop-filter: blur(18px);

}



.sidebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 84%, transparent));
    border-right: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-soft);

}



.glass-card,

.stat-card,

.task-list-container, .music-grid,

.card {
    background: linear-gradient(140deg, var(--surface-strong), color-mix(in srgb, var(--surface) 78%, transparent));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);

}



.glass-card:hover,

.stat-card:hover,

.store-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);

}



.section-header {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));

}



.btn,

.btn-primary,

.glass-card,

    .stat-card {
        border-radius: var(--radius-md);

    }

}



/* ===============================

   Profile UI Refresh

   =============================== */

.profile-desktop-grid {
    gap: 2rem;

}



.profile-desktop-hero {
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-elevated);

}



.profile-desktop-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
    box-shadow: 0 10px 22px rgb(2 6 23 / 25%);

}



.profile-desktop-meta h3 {
    font-size: 1.3rem;
    letter-spacing: -0.01em;

}



.profile-desktop-stats {
    gap: 0.9rem;

}



.profile-stat {
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 6px 14px rgb(2 6 23 / 18%);

}



.profile-desktop-hint {
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid var(--border-subtle);

}



.profile-desktop-form-card {
    padding: 2rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface) 78%, transparent));
    box-shadow: var(--shadow-soft);

}



.profile-highlights {
    gap: 0.9rem;

}



.profile-highlight-card,

.profile-info-card {
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 6px 14px rgb(2 6 23 / 16%);

}



.profile-modal {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-elevated);

}



.profile-modal-header .avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);

}



@media (width <= 900px) {
    .profile-desktop-hero,

    .profile-desktop-form-card {
        padding: 1.5rem;

    }

}



/* Responsive Design */

@media (width <= 1200px) {
    .tasks-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;

    }

    

    .task-details-panel {
        display: none;

    }

    

    .tasks-content.show-details .task-list-panel {
        display: none;

    }

    

    .tasks-content.show-details .task-details-panel {
        display: flex;

    }

}



@media (width <= 768px) {
    .section-header {
        padding: 1.5rem 1rem;
        border-radius: 0 0 20px 20px;

    }

    

    .header-content {
        flex-direction: column;
        gap: 1rem;

    }

    

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 1rem;
        transform: translateY(-0.5rem);

    }

    

    .tasks-content {
        padding: 0 1rem 1rem;

    }

    

    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;

    }

    

    .filters {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;

    }

    

    .filter-tabs {
        overflow-x: auto;
        padding-bottom: 0.5rem;

    }

    

    .toolbar {
        flex-direction: column;
        gap: 1rem;

    }

    

    .search-box {
        width: 100%;

    }

    

    .modal {
        max-height: 100vh;
        border-radius: 0;

    }

    

    .task-list.grid-view {
        grid-template-columns: 1fr;

    }



    /* Analytics Tree Mobile Optimization */

    .analytics-grid {
        grid-template-columns: 1fr;

    }



    .analytics-tree-card {
        padding: 1rem;

    }



    .skill-tree-stage {
        min-height: 520px;
        padding: 1.5rem 1rem 1.75rem;

    }



    .skill-tree {
        max-width: 100%;
        min-height: 520px;

    }



    .skill-tree-stage.expanded {
        min-height: 680px;
        padding: 2rem 1.25rem 2.25rem;

    }



    .skill-tree-stage.expanded .skill-tree {
        min-height: 700px;

    }



    .skill-node {
        width: 84px;

    }



    .skill-orb {
        width: 84px;
        height: 84px;
        border-radius: 20px;

    }



    .skill-tag {
        font-size: 0.65rem;

    }



    .card-actions {
        width: 100%;
        justify-content: flex-start;

    }

}



@media (width <= 480px) {
    .stats-grid {
        grid-template-columns: 1fr;

    }

    

    .section-title {
        font-size: 1.5rem;

    }

    

    .task-item {
        padding: 1rem;

    }

    

    .modal-body,

    .modal-header,

    .modal-footer {
        padding: 1rem;

    }

}



/* Animation Classes */

.fade-in {
    animation: fadeIn 0.3s ease;

}



.slide-in {
    animation: slideUp 0.3s ease;

}



.pulse {
    animation: pulse 2s infinite;

}



@keyframes pulse {

    0% { opacity: 1; }

    50% { opacity: 0.5; }

    100% { opacity: 1; }

}



/* Utility Classes */

.mt-1 { margin-top: 0.25rem; }

.mt-2 { margin-top: 0.5rem; }

.mt-3 { margin-top: 1rem; }

.mt-4 { margin-top: 1.5rem; }



.mb-1 { margin-bottom: 0.25rem; }

.mb-2 { margin-bottom: 0.5rem; }

.mb-3 { margin-bottom: 1rem; }

.mb-4 { margin-bottom: 1.5rem; }



.text-center { text-align: center; }

.text-right { text-align: right; }



.hidden { display: none !important; }



/* Notification Styles */

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    z-index: 10000;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);

}



.notification-success {
    background: var(--success);

}



.notification-error {
    background: var(--danger);

}



.notification-info {
  background: var(--info);

}



.task-detail-actions {
/* ===============================

   Alerts + Modals + Notifications Polish

   =============================== */



.modal-overlay {
  background: color-mix(in srgb, var(--background) 70%, transparent);
  backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 0.25s ease, visibility 0.25s ease;

}



.modal,

.modal-content,

.modal2 .modal-content,

.modal3-content {
  background: var(--surface);
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--background) 65%, transparent);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;

}



.modal-header,

.modal3-header {
  border-bottom: 1px solid var(--glass-border);

}



.modal-footer {
  border-top: 1px solid var(--glass-border);
  gap: 0.75rem;

}



.modal-header h3,

.modal3-header h3,

.modal-content h3 {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.01em;

}



.modal .btn-icon,

.modal-content .btn-icon,

.modal3 .close-btn,

.modal2 .close-btn2 {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text-secondary);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;

}



.modal .btn-icon:hover,

.modal-content .btn-icon:hover,

.modal3 .close-btn:hover,

.modal2 .close-btn2:hover {
  transform: rotate(6deg) scale(1.05);
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--text-primary);

}



.modal-body,

.modal3-body,

.modal2 .modal-content {
  color: var(--text-secondary);

}



.modal3-content {
  background: linear-gradient(145deg,

      color-mix(in srgb, var(--surface) 94%, transparent),

      color-mix(in srgb, var(--background) 88%, transparent));
  color: var(--text-primary);
  border: 1px solid var(--glass-border);

}



.modal-overlay.active .modal,

.modal-overlay.active .modal-content,

.modal-overlay.active .modal2 .modal-content,

.modal-overlay.active .modal3-content {
  transform: translateY(0) scale(1);
  opacity: 1;

}



.modal2.modal-overlay,

.modal3.modal-overlay {
  background: color-mix(in srgb, var(--background) 70%, transparent);
  backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

}



/* Toastify */

.toastify {
  background: linear-gradient(135deg,

      color-mix(in srgb, var(--surface) 92%, transparent),

      color-mix(in srgb, var(--background) 88%, transparent));
  color: var(--text-primary);
  border-radius: 14px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--background) 65%, transparent);
  border: 1px solid var(--glass-border);
  font-weight: 600;
  letter-spacing: 0.01em;
  animation: toast-in 0.35s ease;

}



.toastify .toast-close {
  color: var(--text-secondary);

}



/* SweetAlert2 */

.swal2-popup {
  background: var(--surface);
  color: var(--text-primary);
  border-radius: 22px;
  border: 1px solid rgb(148 163 184 / 20%);
  box-shadow: 0 30px 80px rgb(15 23 42 / 35%);
  animation: modal-pop 0.3s ease;

}



.swal2-title {
  color: var(--text-primary);
  font-weight: 700;

}



.swal2-html-container {
  color: var(--text-secondary);

}



.swal2-actions .swal2-confirm {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 999px;
  padding: 0.65rem 1.5rem;
  box-shadow: 0 12px 30px rgb(99 102 241 / 35%);

}



.swal2-actions .swal2-cancel {
  border-radius: 999px;
  padding: 0.6rem 1.4rem;

}



.swal2-icon.swal2-success {
  border-color: rgb(16 185 129 / 60%);
  color: var(--success);

}



.swal2-icon.swal2-error {
  border-color: rgb(239 68 68 / 60%);
  color: var(--danger);

}



.swal2-icon.swal2-warning {
  border-color: rgb(245 158 11 / 60%);
  color: #f59e0b;

}



/* Bottom nav alignment on mobile */

@media (width <= 900px) {
    .bottom-nav {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
        position: fixed;

    }



    .bottom-nav-items {
        justify-content: center;
        padding-left: 0.8rem;
        padding-right: 0.8rem;

    }

}



.mobile-music-player {
  left: 10px;
  right: 10px;
  bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 10px);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgb(0 0 0 / 35%);

}



.mobile-music-player.active {
  bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 10px);

}



.mobile-player-content {
  gap: 10px;

}



.mobile-track-image {
  border-radius: 14px;
  box-shadow: 0 10px 24px rgb(15 23 42 / 40%);

}



.mobile-player-controls .player-btn {
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 12px;
  transition: transform 0.2s ease, background 0.2s ease, border 0.2s ease;

}



.mobile-player-controls .player-btn:active {
  transform: scale(0.96);

}



/* Push controls */



.push-controls.disabled {
  opacity: 0.55;
  pointer-events: none;

}



/* Note reader */

.note-reader {
  max-width: 820px;
  width: min(92vw, 820px);
  background: linear-gradient(160deg, rgb(15 23 42 / 95%), rgb(15 23 42 / 75%));
  border: 1px solid rgb(148 163 184 / 20%);
  border-radius: 18px;
  padding: 1.2rem 1.4rem;

}



.note-reader-title {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;

}



.note-reader-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);

}



.note-reader-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;

}



.note-reader-body {
  margin-top: 0.75rem;

}



.note-reader-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;

}



.note-reader-content {
  background: rgb(255 255 255 / 2%);
  border-radius: 14px;
  border: 1px solid rgb(148 163 184 / 15%);
  padding: 1rem;
  min-height: 220px;
  line-height: 1.65;
  color: var(--text-primary);

}



/* Card header actions */

.card-header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);

}



/* Card sizing and performance */

@media (width >= 900px) {
  .glass-card {
    padding: 1.15rem;

  }

}



.glass-card,

.stat-card,

.note-card,

.task-item,

.music-track {
  contain-intrinsic-size: 260px 320px;

}

@media (width <= 720px) {
  .note-reader {
    padding: 1rem;

  }

}



@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);

  }

  to {
    opacity: 1;
    transform: translateY(0);

  }

}



@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;

  }

}



/* ===============================

   Performance Hints

   =============================== */



#notifications-list,

.notes-grid,

.tasks-list,

.music-library,

.activity-timeline,

.calendar-grid {
  content-visibility: auto;
  contain-intrinsic-size: 600px;

}

    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);

}



.task-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;

}



/* Bottom nav final override: full-width, no floating */

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: calc(var(--bottom-nav-height) + var(--safe-bottom));
    padding: 0 max(0.75rem, env(safe-area-inset-left)) calc(0.35rem + var(--safe-bottom)) max(0.75rem, env(safe-area-inset-right));
    background: var(--surface);
    border-top: 1px solid var(--border);
    backdrop-filter: none;
    box-shadow: 0 -12px 30px rgb(0 0 0 / 32%);

}



@media (width <= 900px) {
    .bottom-nav-items {
        justify-content: center;
        height: 100%;
        align-items: center;
        gap: clamp(0.35rem, 2.5vw, 0.9rem);
        overflow-x: hidden;
        scroll-snap-type: none;
        padding: 0 0.4rem;
        scrollbar-gutter: auto;

    }

}



@media (width <= 900px) {
    .bottom-nav-item {
        min-width: clamp(52px, 12vw, 72px);
        scroll-snap-align: center;

    }



    .bottom-nav-link {
        height: 100%;
        padding: 0.35rem 0.6rem;

    }

}



.perf-layer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;

}



/* Performance polish */

.section,

.glass-card,

.card,

.store-item,


.note-card,

.calendar-card,

.settings-card {
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 1px 600px;

}



/* Micro-interactions */

.btn,

.nav-link,

.bottom-nav-link,

.card,

.glass-card,

.store-item,

.countdown-card {
  transition: transform var(--motion-fast) var(--easing-standard),

    box-shadow var(--motion-fast) var(--easing-standard),

    background var(--motion-fast) var(--easing-standard),

    border-color var(--motion-fast) var(--easing-standard),

    opacity var(--motion-fast) var(--easing-standard);

}



.btn:active {
  transform: translateY(1px) scale(0.985);

}



.nav-link:hover,

.bottom-nav-link:hover {
  transform: translateY(-1px);

}



.card:hover,

.glass-card:hover,

.store-item:hover,

.countdown-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgb(0 0 0 / 18%);

}



.modal-overlay .modal {
  transform: translateY(8px) scale(0.98);
  opacity: 0.98;
  transition: transform var(--motion-base) var(--easing-emphasized),

    opacity var(--motion-base) var(--easing-emphasized);

}



.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
  opacity: 1;

}



.toast,

.notification {
  transition: transform var(--motion-fast) var(--easing-standard),

    opacity var(--motion-fast) var(--easing-standard);

}



/* ===============================

   Mobile Premium Refresh

   =============================== */

@media (width <= 900px) {
  :root {
    --mobile-pad: 0.95rem;
    --mobile-card-radius: 18px;

  }



  html,

  body {
    height: 100%;
    overflow: hidden auto;

  }



  .app-container {
    grid-template-columns: 1fr;
    grid-template-areas:

      "header"

      "main";
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 100svh;
    height: auto;
    width: 100vw;
    transition: opacity 0.3s ease;

  }



  .app-container.sidebar-open,

  .app-container.sidebar-collapsed {
    grid-template-columns: 1fr;
    width: 100vw;

  }



  .main-content {
    max-width: 100%;
    margin-left: 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
    overscroll-behavior: contain;

  }



  .header {
    margin-left: 0;
    width: 100vw;

  }



  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: min(82vw, 300px);
    max-width: 300px;
    transform: translateX(-105%);
    transition: transform 0.3s ease;
    z-index: 180;

  }



  .sidebar.active,

  .sidebar.open,

  .sidebar.visible {
    transform: translateX(0);

  }



  body {
    background:

      radial-gradient(800px 420px at 10% -10%, rgb(79 92 251 / 16%), transparent),

      radial-gradient(700px 380px at 90% 20%, rgb(14 165 233 / 14%), transparent),

      var(--background);

  }



  .header {
    position: sticky;
    top: 0;
    z-index: 140;
    padding: 0.85rem var(--mobile-pad) 0.75rem;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgb(148 163 184 / 16%);
    background: linear-gradient(180deg, rgb(10 16 30 / 88%), rgb(10 16 30 / 72%));
    box-shadow: 0 14px 30px rgb(6 12 26 / 32%);

  }



  .header-shell {
    gap: 0.75rem;

  }



  .header-brand {
    gap: 0.6rem;

  }



  .header-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgb(15 23 42 / 35%);

  }



  .header-mark,

  .header-logo {
    display: none;

  }



  .header-actions {
    width: 100%;
    padding: 0.45rem 0.5rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(148 163 184 / 18%);
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    max-width: 100%;
    box-sizing: border-box;

  }



  .header-actions::-webkit-scrollbar {
    display: none;

  }



  .header-btn,

  .header-profile-btn,

  .mobile-menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 10px 18px rgb(7 12 24 / 25%);

  }



  .header-actions .net-indicator {
    padding: 0.3rem 0.7rem;
    background: rgb(15 23 42 / 60%);
    border: 1px solid rgb(99 102 241 / 35%);

  }



  .sync-pill {
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.6rem;
    background: rgb(14 165 233 / 14%);
    border: 1px solid rgb(14 165 233 / 30%);
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;

  }



  .main-content {
    padding: 1rem var(--mobile-pad) 5.5rem;
    min-height: calc(100vh - 110px);
    scroll-margin-top: 90px;

  }



  .section-header {
    padding: 1.1rem 1rem;
    border-radius: var(--mobile-card-radius);
    background:

      linear-gradient(140deg, rgb(79 92 251 / 18%), rgb(12 18 34 / 92%));
    border: 1px solid rgb(99 102 241 / 20%);
    box-shadow: 0 14px 26px rgb(8 14 26 / 25%);

  }



  .section-title {
    font-size: 1.35rem;

  }



  .section-subtitle {
    font-size: 0.9rem;

  }



  .glass-card,

  .stat-card,

  .store-item,

  .countdown-card {
    border-radius: var(--mobile-card-radius);
    box-shadow: 0 16px 28px rgb(6 12 24 / 24%);

  }



  .dashboard-header-container {
    gap: 0.65rem;

  }



  .dashboard-header-actions .btn {
    width: 100%;
    justify-content: center;

  }



  /* Settings: mobile premium layout */

  #settings .settings-shell {
    gap: 0.85rem;

  }



  #settings .settings-nav {
    position: static;
    padding: 0.85rem;
    border-radius: 18px;
    background: linear-gradient(160deg, rgb(99 102 241 / 12%), rgb(10 16 30 / 90%));
    border: 1px solid rgb(148 163 184 / 22%);
    box-shadow: 0 14px 28px rgb(6 12 24 / 28%);

  }



  #settings .settings-search .form-input {
    height: 44px;
    border-radius: 16px;
    background: rgb(255 255 255 / 6%);

  }



  #settings .settings-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scroll-snap-type: x proximity;

  }



  #settings .settings-tabs::-webkit-scrollbar {
    display: none;

  }



  #settings .settings-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);

  }



  #settings .settings-tab.active {
    box-shadow: 0 12px 22px rgb(79 92 251 / 30%);

  }



  #settings .settings-card {
    border-radius: 18px;

  }



  #settings .settings-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;

  }



  #settings .settings-card-header .btn {
    width: 100%;
    justify-content: center;

  }



  #settings .form-group {
    padding: 0.75rem 0.8rem;
    border-radius: 16px;
    border: 1px solid rgb(148 163 184 / 18%);
    background: rgb(255 255 255 / 4%);

  }



  #settings .form-row {
    gap: 0.6rem;

  }



  #settings .toggle-switch {
    margin-top: 0.45rem;

  }



  #settings .snapshot-item {
    border-radius: 16px;

  }



  #settings .about-app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;

  }



  #settings .about-app-links {
    gap: 0.5rem;

  }



  .about-card {
    border-radius: 20px;

  }



  .about-app-hero {
    padding: 0.75rem;
    border-radius: 16px;

  }



  .about-detail-card {
    border-radius: 14px;

  }

}



/* Mid-size layout (tablets / small desktop windows) */

@media (width >= 769px) and (width <= 1000px) {
  :root {
    --header-height: 60px;

  }



  html,

  body {
    height: 100%;
    overflow: hidden;

  }



  .app-container {
    height: 100vh;

  }



  .header {
    height: var(--header-height);

  }



  .main-content {
    height: calc(100vh - var(--header-height));
    overflow: hidden auto;

  }

}



/* ===============================

   Premium Global Pass

   =============================== */

:root {
  --radius-xxl: 28px;
  --elev-1: 0 10px 24px rgb(5 8 18 / 22%);
  --elev-2: 0 18px 40px rgb(5 8 18 / 30%);
  --elev-3: 0 26px 60px rgb(5 8 18 / 45%);
  --glass-strong: color-mix(in srgb, var(--surface) 90%, transparent);

}



body {
  letter-spacing: 0.005em;
  text-rendering: optimizelegibility;

}



body.ambient-mode::before {
  content: "";
  position: fixed;
  inset: -20%;
  background:

    radial-gradient(600px 320px at 15% 10%, rgb(99 102 241 / 22%), transparent),

    radial-gradient(520px 280px at 85% 20%, rgb(14 165 233 / 18%), transparent),

    radial-gradient(600px 420px at 50% 90%, rgb(16 185 129 / 12%), transparent);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;

}



body.ambient-mode .app-container {
  position: relative;
  z-index: 1;

}



/* Scroll + touch fixes (mobile + desktop) */

html,

body {
  overscroll-behavior-y: auto;
  touch-action: pan-y;

}



.main-content {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;

}



.mobile-sidebar-overlay {
  pointer-events: none;

}



.mobile-sidebar-overlay.active {
  pointer-events: auto;

}



/* Scroll reliability overrides */

html,
body {
  height: 100%;
  overflow-y: auto;
}

.app-container {
  min-height: 100vh;
}

.main-content {
  overflow: hidden auto;
  overscroll-behavior: contain;
}

@media (width <= 900px) {
  html,
  body {
    height: auto;
    min-height: 100%;
  }

  .app-container {
    height: auto;
    min-height: 100svh;
  }

  .main-content {
    min-height: 0;
    overflow-y: auto;
  }

  .main-content > .section {
    min-height: 0;
  }
}



h1, h2, h3, h4, .section-title, .card-header h3 {
  letter-spacing: -0.012em;

}



.section {
  padding: clamp(1.2rem, 2.2vw, 2rem) 0 clamp(2.4rem, 4vw, 4rem);
  scroll-margin-top: 110px;
  min-height: 100%;

}



/* Performance + compact modes */

body.compact-layout .section {
  padding: clamp(0.9rem, 1.6vw, 1.4rem) 0 clamp(1.6rem, 3vw, 2.6rem);

}



body.compact-layout .card-grid,

body.compact-layout .stats-grid,

body.compact-layout .settings-grid {
  gap: 0.75rem;

}



body.compact-layout .glass-card,

body.compact-layout .settings-card,

body.compact-layout .card {
  padding: calc(var(--card-pad) * 0.85);

}



body.perf-mode * {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;

}



body.perf-mode .glass-card,

body.perf-mode .card,

body.perf-mode .settings-card,

body.perf-mode .section-header {
  box-shadow: none !important;

}



body.perf-mode .header,

body.perf-mode .modal-overlay {
  backdrop-filter: none !important;

}



body.data-saver {
  background: var(--background) !important;

}



body.data-saver .section-header,

body.data-saver .glass-card,

body.data-saver .card,

body.data-saver .settings-card {
  background: var(--surface);

}



/* Lightweight mode */

body.lite-mode {
  background: var(--background) !important;

}



body.lite-mode::before,

body.lite-mode::after {
  content: none !important;

}



body.lite-mode * {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

}



body.lite-mode .glass-card,

body.lite-mode .card,

body.lite-mode .settings-card,

body.lite-mode .section-header,

body.lite-mode .modal,

body.lite-mode .modal2-content,

body.lite-mode .modal3,

body.lite-mode .profile-modal,

body.lite-mode .whats-new-modal {
  background: var(--surface) !important;
  border-color: var(--border) !important;

}



body.lite-mode .header,

body.lite-mode .sidebar,

body.lite-mode .bottom-nav {
  background: var(--surface) !important;

}



/* Motion and effects */

@keyframes riseIn {

  from { opacity: 0; transform: translateY(10px) scale(0.985); }

  to { opacity: 1; transform: translateY(0) scale(1); }

}



.section.active .glass-card,

.section.active .card,

.section.active .settings-card,

.section.active .store-item,

.section.active .countdown-card {
  animation: riseIn 360ms ease both;

}



.card:hover,

.glass-card:hover,

.store-item:hover,

.countdown-card:hover,

.settings-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-2px);

}



/* Performance-focused guards */

.card,

.glass-card,

.store-item,

.settings-card,

.countdown-card,

.modal,

.modal2-content,

.modal3,

.profile-modal,

.whats-new-modal {
  will-change: transform;

}



@media (width <= 768px) {
  .section-header {
    border-radius: 20px;
    box-shadow: var(--elev-1);

  }



  .card,

  .glass-card,

  .stat-card,


  .note-card,

  .music-card,

  .store-item,

  .countdown-card,

  .settings-card {
    border-radius: 18px;

  }



  .btn,

  .btn-primary,

  .btn-secondary,

  .btn-icon {
    border-radius: 16px;

  }



  .insight-actions {
    flex-direction: column;
    align-items: stretch;

  }

}



@media (prefers-reduced-motion: reduce) {
  .btn,

  .nav-link,

  .bottom-nav-link,

  .card,

  .glass-card,

  .store-item,

  .countdown-card,

  .modal-overlay .modal,

  .toast,

  .notification {
    transition: none !important;
    animation: none !important;

  }

}



/* ===============================

   Maintenance Mode

   =============================== */

.maintenance-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at top, rgb(26 41 62 / 90%), rgb(8 12 20 / 98%));
  backdrop-filter: blur(16px);

}



.maintenance-card {
  width: min(640px, 92vw);
  border-radius: 22px;
  padding: 28px;
  background: linear-gradient(160deg, rgb(24 36 58 / 96%), rgb(10 16 28 / 98%));
  border: 1px solid rgb(120 160 220 / 20%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
  text-align: center;

}



.maintenance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgb(74 132 255 / 20%);
  color: #9cc0ff;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-bottom: 16px;

}



.maintenance-card h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 10px;

}



.maintenance-card p {
  margin: 0;
  color: rgb(240 248 255 / 78%);
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);

}



.maintenance-meta {
  margin-top: 16px;
  color: rgb(190 210 240 / 80%);
  font-size: 0.9rem;

}



body.maintenance-active {
  overflow: hidden;

}



body.maintenance-active #app-container {
  display: none;

}



/* Mobile-first Edit Mode polish */

@media (width <= 900px) {
    body.dashboard-edit-mode #dashboard .dashboard-edit-toolbar {
        position: sticky;
        bottom: calc(12px + var(--safe-bottom));
        z-index: 2000;
        border-radius: 18px;
        padding: 0.6rem 0.7rem;
        background: linear-gradient(140deg, rgb(15 23 42 / 92%), rgb(10 15 28 / 88%));
        box-shadow: 0 18px 40px rgb(2 6 23 / 50%);
        backdrop-filter: blur(18px);

    }



    body.dashboard-edit-mode #dashboard .dashboard-edit-title {
        display: none;

    }



    body.dashboard-edit-mode #dashboard .dashboard-edit-actions {
        width: 100%;
        gap: 0.45rem;
        justify-content: space-between;

    }



    body.dashboard-edit-mode #dashboard .dashboard-edit-actions .btn {
        flex: 1;
        min-width: 0;
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
        border-radius: 14px;

    }



    body.dashboard-edit-mode #dashboard .dashboard-edit-hint {
        position: sticky;
        top: 8px;
        z-index: 10;
        padding: 0.6rem 0.75rem;
        border-radius: 16px;
        background: rgb(15 23 42 / 70%);

    }



    body.dashboard-edit-mode #dashboard .card-controls {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);

    }



    body.dashboard-edit-mode #dashboard .card-control-btn {
        width: 34px;
        height: 34px;
        border-radius: 12px;

    }



    body.dashboard-edit-mode #dashboard .glass-card {
        outline: 1px dashed rgb(99 102 241 / 45%);
        outline-offset: 3px;

    }

}

/* ===============================
   Global UI Next-Level Pass
   =============================== */
.glass-card,
.card,
.stat-card,
.stat-card-enhanced,
.settings-card,
.store-item,
.note-card,
.calendar-card {
    position: relative;
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    box-shadow: var(--ui-shadow-soft);
    backdrop-filter: blur(16px) saturate(150%);
}

.glass-card::before,
.card::before,
.stat-card::before,
.stat-card-enhanced::before,
.settings-card::before,
.store-item::before,
.note-card::before,
.calendar-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 140% at 0% 0%, var(--ui-card-glow), transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}

.glass-card:hover,
.card:hover,
.stat-card:hover,
.stat-card-enhanced:hover,
.settings-card:hover,
.store-item:hover,
.note-card:hover,
.calendar-card:hover {
    box-shadow: var(--ui-shadow-strong);
    transform: translateY(-3px);
}

.section-header {
    background: linear-gradient(160deg, rgb(12 18 32 / 92%), rgb(16 24 40 / 80%));
    border: 1px solid var(--ui-card-border);
    box-shadow: var(--ui-shadow-soft);
}

.btn {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 22%, transparent);
    background: var(--ui-surface-veil);
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 75%, var(--primary)));
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 35%, transparent);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 38px color-mix(in srgb, var(--primary) 40%, transparent);
}

.btn-secondary {
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border-color: color-mix(in srgb, var(--text-tertiary) 24%, transparent);
    color: var(--text-primary);
}

.btn:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus);
}

.form-input,
.form-textarea,
select,
textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"] {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 24%, transparent);
    border-radius: 14px;
    color: var(--text-primary);
}

.form-input::placeholder,
.form-textarea::placeholder,
textarea::placeholder,
input::placeholder {
    color: color-mix(in srgb, var(--text-tertiary) 80%, transparent);
}

.modal-content,
.modal2-content,
.modal3,
.profile-modal,
.whats-new-modal {
    background: linear-gradient(160deg, rgb(10 16 30 / 96%), rgb(16 24 40 / 90%));
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 20%, transparent);
    box-shadow: 0 32px 80px rgb(2 6 16 / 60%);
}

.nav-link {
    border-radius: 14px;
}

.nav-link.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 24%, transparent), transparent);
    border-left-color: color-mix(in srgb, var(--primary) 70%, transparent);
}

.header-actions {
    background: color-mix(in srgb, var(--surface) 65%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 22%, transparent);
}

.sidebar {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--text-tertiary) 18%, transparent);
    box-shadow: var(--ui-shadow-soft);
}

@media (width <= 900px) {
    .section-header {
        border-radius: 18px;
    }

    .btn {
        border-radius: 16px;
    }

    .glass-card,
    .card,
    .stat-card,
    .stat-card-enhanced,
    .settings-card,
    .store-item,
    .note-card,
    .calendar-card {
        border-radius: 18px;
    }
}

/* ===============================
   Mobile UI Remake (Premium)
   =============================== */
@media (width <= 900px) {
  :root {
    --mobile-pad: clamp(0.85rem, 3.2vw, 1.25rem);
    --mobile-radius: clamp(16px, 4vw, 22px);
    --mobile-radius-sm: clamp(12px, 3vw, 16px);
    --mobile-shadow: 0 18px 38px rgb(4 8 18 / 40%);
  }

  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body {
    background:
      radial-gradient(900px 420px at 10% -10%, rgb(99 102 241 / 20%), transparent 60%),
      radial-gradient(700px 360px at 90% 10%, rgb(14 165 233 / 18%), transparent 62%),
      var(--background);
  }

  .app-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 100svh;
    height: auto;
    width: 100%;
    overflow: visible;
  }

  .sidebar,
  .sidebar-toggle {
    display: none;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 1200;
    padding: 0.75rem var(--mobile-pad);
    background: linear-gradient(180deg, rgb(10 16 30 / 92%), rgb(10 16 30 / 78%));
    border-bottom: 1px solid rgb(148 163 184 / 16%);
    box-shadow: 0 18px 34px rgb(6 10 22 / 40%);
  }

  .header-shell {
    gap: 0.75rem;
  }

  .header-brand {
    gap: 0.6rem;
  }

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

  .header-subtitle {
    font-size: 0.6rem;
  }

  .header-actions {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 5%);
    border: 1px solid rgb(148 163 184 / 18%);
    gap: 0.45rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .header-actions::-webkit-scrollbar {
    display: none;
  }

  .header-btn,
  .header-profile-btn,
  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 10px 18px rgb(7 12 24 / 25%);
    scroll-snap-align: center;
  }

  .main-content {
    padding: 1rem var(--mobile-pad) calc(5.75rem + var(--safe-bottom));
    width: 100%;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section {
    padding: 1rem 0 2.2rem;
  }

  .section-header {
    padding: 1.1rem 1rem;
    border-radius: var(--mobile-radius);
    background: linear-gradient(140deg, rgb(79 92 251 / 20%), rgb(12 18 34 / 92%));
    border: 1px solid rgb(99 102 241 / 24%);
    box-shadow: var(--mobile-shadow);
  }

  .glass-card,
  .card,
  .stat-card,
  .stat-card-enhanced,
  .store-item,
  .settings-card,
  .note-card,
  .calendar-card {
    border-radius: var(--mobile-radius);
    box-shadow: var(--mobile-shadow);
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-icon {
    border-radius: 16px;
    min-height: 40px;
  }

  .form-input,
  .form-textarea,
  select,
  textarea,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="number"] {
    border-radius: 14px;
    min-height: 42px;
  }

  .mobile-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    background: linear-gradient(180deg, rgb(10 16 30 / 98%), rgb(14 22 40 / 96%));
    border-right: 1px solid rgb(148 163 184 / 18%);
    box-shadow: 20px 0 50px rgb(2 6 16 / 55%);
    transform: translateX(-105%);
    transition: transform 0.28s ease;
    z-index: 1300;
  }

  .mobile-sidebar.active {
    transform: translateX(0);
  }

  .mobile-sidebar-header {
    padding: 1.2rem var(--mobile-pad) 0.75rem;
    border-bottom: 1px solid rgb(148 163 184 / 12%);
  }

  .mobile-sidebar-body {
    padding: 1rem var(--mobile-pad) 1.5rem;
  }

  .mobile-sidebar-nav .nav-link {
    border-radius: var(--mobile-radius-sm);
    padding: 0.75rem 0.9rem;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(148 163 184 / 16%);
  }

  .mobile-sidebar-overlay {
    background: rgb(6 10 20 / 60%);
    backdrop-filter: blur(6px);
  }

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--bottom-nav-height) + var(--safe-bottom));
    padding: 0 max(0.75rem, env(safe-area-inset-left)) calc(0.35rem + var(--safe-bottom)) max(0.75rem, env(safe-area-inset-right));
    background: linear-gradient(180deg, rgb(12 18 32 / 98%), rgb(10 16 28 / 98%));
    border-top: 1px solid rgb(148 163 184 / 18%);
    box-shadow: 0 -18px 34px rgb(2 6 16 / 50%);
    z-index: 1100;
  }

  .bottom-nav-link {
    border-radius: 14px;
    padding: 0.4rem 0.7rem;
    background: transparent;
  }
}

/* ===============================
   Task Manager UI Polish
   =============================== */
#task-modal .modal-content {
    background: linear-gradient(160deg, var(--theme-surface), var(--theme-surface-2));
    border: 1px solid var(--theme-border-soft);
    box-shadow: 0 30px 70px rgb(2 6 18 / 55%);
}

#task-modal .modal-header,
#task-modal .modal-footer {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    border-color: var(--theme-border-soft);
}

#task-modal .date-quick-buttons .date-quick {
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid var(--theme-border-soft);
}

.details-empty,
.empty-state {
    border-radius: 18px;
    border: 1px dashed color-mix(in srgb, var(--text-tertiary) 30%, transparent);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    padding: 1.6rem 1.4rem;
}

.details-empty .empty-icon,
.empty-state .empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
}

/* Global Header + Bottom Nav Upgrade */
.header {
    background:
        var(--theme-gradient),
        var(--glass-bg);
    border-bottom: 1px solid var(--theme-border-soft);
}

.header-actions {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid var(--theme-border-soft);
}

.bottom-nav {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
    border-top: 1px solid var(--theme-border-soft);
}

.bottom-nav-link {
    border-radius: 14px;
    padding: 0.45rem 0.75rem;
}

.bottom-nav-link.active {
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 24%, transparent);
}

@media (width <= 900px) {
    .header-actions {
        background: color-mix(in srgb, var(--surface) 66%, transparent);
    }

    .bottom-nav-link {
        min-height: 44px;
    }

    .bottom-nav-text {
        font-size: 0.7rem;
        letter-spacing: 0.02em;
    }
}

/* Desktop UI Upgrade */
@media (width >= 901px) {
    .sidebar {
        background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 76%, transparent));
        border-right: 1px solid var(--theme-border-soft);
    }

    .header-shell {
        max-width: 1320px;
    }

    .section {
        padding: clamp(1.4rem, 2.4vw, 2.2rem) 0 clamp(2.6rem, 4vw, 4.2rem);
    }
}

/* Mobile scroll safety override */
@media (width <= 900px) {
    html,
    body {
        overflow-y: auto !important;
    }

    body.maintenance-active {
        overflow-y: auto !important;
    }

    .app-container,
    .main-content {
        overflow: visible;
    }

    .main-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile scroll hard-fix */
@media (width <= 900px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body {
        position: relative !important;
    }

    .app-container {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
    }

    .main-content {
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===============================
   Premium Redesign Overrides
   =============================== */
body {
    color: var(--text-primary);
    background:
        var(--theme-bg-image),
        radial-gradient(900px 520px at 12% -10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
        radial-gradient(800px 420px at 90% 0%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 55%),
        var(--background);
}

.header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 78%, transparent));
    border-bottom: 1px solid var(--theme-border-soft);
    box-shadow: 0 18px 40px rgb(6 12 26 / 35%);
    backdrop-filter: blur(16px);
}

.sidebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 80%, transparent));
    border-right: 1px solid var(--theme-border-soft);
    box-shadow: 18px 0 50px rgb(6 12 26 / 25%);
}

.nav-link {
    border-radius: 14px;
    transition: transform var(--motion-base) var(--easing-standard), background var(--motion-base) var(--easing-standard);
}

.nav-link.active,
.nav-link:hover {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 24%, transparent);
    transform: translateY(-1px);
}

.section-header {
    background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
    border: 1px solid var(--theme-border-soft);
    box-shadow: var(--ui-shadow-soft);
}

.glass-card,
.card,
.settings-card,
.stat-card,
.insight-card,
.coach-card,
.goals-card,
.goals-roadmap-card,
.task-list-panel,
.task-details-panel,
.task-list-container,
.notes-grid .note-card,
.music-grid .music-track {
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    box-shadow: var(--ui-shadow-soft);
}

.btn,
.btn-icon {
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid var(--theme-border-soft);
    color: var(--text-primary);
    box-shadow: 0 10px 24px rgb(6 12 26 / 25%);
    transition: transform var(--motion-base) var(--easing-standard), box-shadow var(--motion-base) var(--easing-standard), background var(--motion-base) var(--easing-standard);
}

.btn:hover,
.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-soft);
}

.btn-primary {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, transparent), color-mix(in srgb, var(--secondary) 78%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
    color: #fff;
}

.btn-secondary {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 22%, transparent);
}

.form-input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--theme-border-soft);
    color: var(--text-primary);
    border-radius: 14px;
    box-shadow: inset 0 1px 2px rgb(10 16 32 / 25%);
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: color-mix(in srgb, var(--primary) 48%, transparent);
}

.search-box input {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-color: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
}

.search-box i {
    color: var(--text-secondary);
}

.bottom-nav {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 80%, transparent));
    border-top: 1px solid var(--theme-border-soft);
    box-shadow: 0 -18px 40px rgb(6 12 26 / 28%);
}

.bottom-nav-link.active {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 24%, transparent);
}

.modal,
.modal-content,
.modal2-content,
.modal3,
.profile-modal,
.whats-new-modal {
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    box-shadow: var(--ui-shadow-strong);
}

/* ===============================
   Deep Premium UI (Global)
   =============================== */
.glass-card,
.card,
.settings-card,
.stat-card,
.insight-card,
.coach-card,
.goals-card,
.goals-roadmap-card {
    border-radius: var(--radius-card);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface) 82%, transparent)),
        radial-gradient(300px 160px at 15% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%);
    border: 1px solid var(--outline-soft);
    box-shadow: var(--shadow-tight);
}

.section-header {
    border-radius: 18px;
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
    border: 1px solid var(--outline-soft);
    box-shadow: var(--shadow-tight);
}

.section-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.section-subtitle {
    color: var(--text-secondary);
}

.btn,
.btn-icon {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.btn-primary {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 84%, transparent), color-mix(in srgb, var(--secondary) 78%, transparent));
    box-shadow: 0 16px 32px color-mix(in srgb, var(--primary) 26%, transparent);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 44px color-mix(in srgb, var(--primary) 30%, transparent);
}

.btn-secondary {
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    border: 1px solid var(--outline-soft);
}

.form-input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--outline-soft);
    box-shadow: inset 0 1px 2px rgb(10 16 32 / 22%);
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--outline-strong);
    box-shadow: var(--ring-focus);
}

.search-box {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-radius: 14px;
    padding: 0.35rem;
    border: 1px solid var(--outline-soft);
}

.search-box input {
    border: none;
    box-shadow: none;
    background: transparent;
}

.toolbar {
    border-bottom: 1px solid var(--outline-soft);
    backdrop-filter: blur(16px);
}

.bottom-nav {
    border-top: 1px solid var(--outline-soft);
    backdrop-filter: blur(16px);
}

.bottom-nav-link {
    font-weight: 600;
}

.nav-link {
    font-weight: 600;
}

.nav-text {
    letter-spacing: 0.01em;
}

@media (width >= 901px) {
    #dashboard-gestures-btn {
        display: none !important;
    }
}

@media (width <= 900px) {
    .section-header {
        border-radius: 16px;
    }

    .btn,
    .btn-icon {
        min-height: 42px;
    }
}

/* ===============================
   Sidebar polish overrides
   =============================== */
.sidebar {
    background: linear-gradient(180deg, rgb(12 18 34 / 98%), rgb(10 16 30 / 96%));
    border-right: 1px solid color-mix(in srgb, var(--outline-soft) 70%, transparent);
    box-shadow: 12px 0 36px rgb(4 8 18 / 45%);
    padding: 1.6rem 1.1rem 1.25rem;
    gap: 1.15rem;
    overflow: hidden auto;
    scrollbar-width: thin;
    transition: width 0.2s ease;
}

.sidebar .logo {
    margin-bottom: 1.5rem;
    padding: 0 0.4rem;
}

.sidebar .logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgb(24 32 62 / 35%);
}

.sidebar .logo-text {
    font-size: 20px;
    letter-spacing: 0.01em;
}

.sidebar .nav-menu {
    display: grid;
    gap: 0.35rem;
    overflow: visible;
}

.sidebar .nav-link {
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: transparent;
    border: 1px solid transparent;
    gap: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar .nav-link i {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--text-secondary);
    font-size: 16px;
}

.sidebar .nav-link:hover {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border-color: color-mix(in srgb, var(--outline-soft) 55%, transparent);
    color: var(--text-primary);
}

.sidebar .nav-link.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, transparent), rgb(12 18 34 / 55%));
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}

.sidebar .nav-link.active i {
    background: var(--primary);
    color: #fff;
}

.sidebar .user-profile {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
}

@media (width >= 901px) {
    .sidebar,
    .sidebar-toggle {
        will-change: width;
    }

    .app-container.sidebar-collapsed .sidebar {
        width: 76px;
    }

    .app-container.sidebar-collapsed .nav-text,
    .app-container.sidebar-collapsed .logo-text,
    .app-container.sidebar-collapsed .user-details {
        opacity: 0;
        width: 0;
    }

    .app-container.sidebar-collapsed.sidebar-hovered .sidebar {
        width: 240px;
    }
}

/* Mobile sidebar fixes */
@media (width <= 900px) {
    .header .header-left,
    .header .header-mark {
        display: none !important;
    }

    .mobile-sidebar {
        inset: 0 0 0 auto;
        right: 0;
        left: auto;
        width: min(86vw, 320px);
        transform: translateX(105%);
        pointer-events: none;
        z-index: 2100;
        backdrop-filter: blur(22px);
        border-left: 1px solid color-mix(in srgb, var(--outline-soft) 65%, transparent);
        background:
            radial-gradient(520px 320px at 10% 0%, rgb(99 102 241 / 20%), transparent 60%),
            linear-gradient(180deg, rgb(8 12 22 / 96%), rgb(12 18 32 / 98%));
    }

    .mobile-sidebar.active {
        transform: translateX(0);
        pointer-events: auto;
    }

    .mobile-sidebar-overlay {
        z-index: 2000;
        pointer-events: none;
        background: rgb(5 8 14 / 60%);
        backdrop-filter: blur(8px);
    }

    .mobile-sidebar-overlay.active {
        pointer-events: auto;
    }

    .mobile-sidebar[hidden],
    .mobile-sidebar-overlay[hidden] {
        display: none !important;
    }

    .mobile-sidebar-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: grid;
        gap: 1rem;
    }

    .mobile-sidebar-header {
        position: sticky;
        top: 0;
        z-index: 2;
        backdrop-filter: blur(14px);
        background: linear-gradient(180deg, rgb(8 12 22 / 96%), rgb(8 12 22 / 75%));
    }

    .mobile-sidebar-brand {
        padding: 0.85rem;
        border-radius: 16px;
        background: color-mix(in srgb, var(--surface) 70%, transparent);
        border: 1px solid color-mix(in srgb, var(--outline-soft) 45%, transparent);
        box-shadow: 0 12px 24px rgb(6 10 22 / 35%);
    }

    .mobile-sidebar-nav {
        gap: 0.6rem;
    }

    .mobile-sidebar-nav .nav-link {
        padding: 0.85rem 0.95rem;
        border-radius: 14px;
        border: 1px solid transparent;
        background: color-mix(in srgb, var(--surface) 60%, transparent);
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .mobile-sidebar-nav .nav-link .nav-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        background: color-mix(in srgb, var(--surface) 75%, transparent);
        color: var(--text-secondary);
    }

    .mobile-sidebar-nav .nav-link:hover {
        transform: translateX(-2px);
        border-color: color-mix(in srgb, var(--outline-soft) 55%, transparent);
        background: color-mix(in srgb, var(--surface) 75%, transparent);
    }

    .mobile-sidebar-nav .nav-link.active {
        background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), rgb(8 12 22 / 80%));
        border-color: color-mix(in srgb, var(--primary) 55%, transparent);
        color: #fff;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
    }

    .mobile-sidebar-nav .nav-link.active .nav-icon {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 10px 20px rgb(59 130 246 / 40%);
    }

    .mobile-sidebar-close {
        border-radius: 14px;
        width: 40px;
        height: 40px;
        box-shadow: 0 10px 20px rgb(6 10 22 / 35%);
    }

    .mobile-sidebar-nav .nav-text {
        opacity: 1;
        width: auto;
        display: inline-flex;
    }
}

@media (width <= 900px) and (orientation: landscape) {
    .sidebar {
        width: 220px;
    }

    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .user-details {
        opacity: 1;
        width: auto;
    }
}

#orientation-overlay,
.orientation-overlay {
    display: none !important;
}

.pwa-only {
    display: none !important;
}

@media (width <= 900px) {
    .pwa-only {
        display: block !important;
    }
}

@media (width <= 768px) {
    .header .header-actions {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.35rem;
        padding: 0.35rem 0.5rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .header .header-actions::-webkit-scrollbar {
        display: none;
    }

    .header .header-status-pill {
        flex: 0 0 auto;
        gap: 0.3rem;
        padding: 0.2rem 0.45rem;
    }

    .header .header-status-pill {
        gap: 0.25rem;
        padding: 0.2rem 0.4rem;
    }

    .header .header-status-pill .net-dot,
    .header .header-status-pill .sync-pill,
    .header .header-status-pill .sync-live-pill {
        width: 8px;
        height: 8px;
    }

    .header .header-actions .header-btn,
    .header .header-actions .header-profile-btn,
    .header .header-actions .mobile-menu-btn {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        flex: 0 0 auto;
    }

    .header .notification-count {
        top: -5px;
        right: -5px;
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
}










/* end import: public/css/zy/components.css */
/* begin import: public/css/zy/sections.css */
/* App Container */

.app-container {
    --sidebar-width: 250px;

    display: grid;
    grid-template: "sidebar header" auto "sidebar main" 1fr / var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease, grid-template-columns 0.3s ease;

}



.app-container {
    height: auto;

}



@media (width >= 901px) {
    .app-container {
        --sidebar-width: 280px;

    }



    .app-container {
        height: 100vh;

    }



    .header {
        width: 100%;

    }



    .main-content {
        min-height: 0;

    }



    .main-content {
        display: flex;
        flex-direction: column;
        align-items: center;

    }



    .main-content > .section {
        width: 100%;
        max-width: 1220px;

    }



    .sidebar {
        padding: 1.75rem 1.1rem;
        align-self: stretch;
        height: 100vh;
        overflow-y: auto;

    }



    .nav-link {
        padding: 0.85rem 1rem;
        border-radius: 14px;

    }



    .nav-link i {
        font-size: 19px;

    }

}



.app-container.sidebar-collapsed {
    --sidebar-width: 72px;

}



.app-container.sidebar-collapsed.sidebar-hovered {
    --sidebar-width: 220px;

}



.app-container.loaded {
    opacity: 1;

}



@media (width <= 900px) {
    .app-container {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "header"
            "main" !important;
        grid-template-rows: auto minmax(0, 1fr);
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .sidebar,
    .sidebar-toggle {
        display: none !important;
    }

    .main-content,
    .header {
        margin-left: 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
}



.section.active {
    animation: sectionRise 0.35s ease;

}



@keyframes sectionRise {
    from {
        opacity: 0;
        transform: translateY(10px);

    }

    to {
        opacity: 1;
        transform: translateY(0);

    }

}



/* Main Content */

.main-content {
    grid-area: main;
    padding: var(--content-pad);
    overflow-y: auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;

}



.main-content {
    height: auto;

}



/* Separate header from main content */

.main-content {
    padding-top: calc(var(--content-pad) + 0.75rem);

}



.header {
    position: sticky;
    top: 0;
    z-index: 900;
    padding: 0.6rem var(--content-pad);
    background:

        linear-gradient(120deg, rgb(99 102 241 / 18%), rgb(15 23 42 / 55%)),

        var(--glass-bg);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid rgb(148 163 184 / 18%);
    box-shadow: 0 18px 36px rgb(8 12 26 / 36%);

}



.header-shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

}



.header-left {
    min-width: 0;
    display: flex;
    align-items: center;

}



.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;

}



.header-mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgb(99 102 241 / 35%), rgb(15 23 42 / 40%));
    border: 1px solid rgb(148 163 184 / 25%);
    display: grid;
    place-items: center;
    box-shadow: 0 12px 26px rgb(8 12 26 / 38%);

}



.header-logo {
    width: 22px;
    height: 22px;

}



.header-text {
    display: grid;
    gap: 0.2rem;
    min-width: 0;

}



.header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}



.header-subtitle {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--text-tertiary) 85%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}



.header-actions {
    background: rgb(15 23 42 / 45%);
    border: 1px solid rgb(148 163 184 / 18%);
    border-radius: 999px;
    padding: 0.35rem 0.55rem;
    box-shadow: 0 12px 22px rgb(8 12 26 / 32%);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;

}



.adblock-banner:not(.adblock-modal) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.6rem var(--content-pad) 0;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    background: linear-gradient(120deg, rgb(239 68 68 / 12%), rgb(15 23 42 / 50%));
    border: 1px solid rgb(239 68 68 / 35%);
    color: var(--text-primary);
    box-shadow: 0 12px 26px rgb(10 14 28 / 28%);

}



.adblock-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgb(6 10 20 / 70%);
    backdrop-filter: blur(6px);

}



.adblock-card {
    max-width: 520px;
    width: 100%;
    padding: 1.25rem 1.4rem;
    border-radius: 18px;
    background: linear-gradient(160deg, rgb(239 68 68 / 18%), rgb(15 23 42 / 92%));
    border: 1px solid rgb(239 68 68 / 35%);
    box-shadow: 0 26px 48px rgb(7 12 24 / 50%);
    color: var(--text-primary);

}



.adblock-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;

}



.adblock-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;

}



@media (width <= 900px) {
    .adblock-banner:not(.adblock-modal) {
        margin: 0.5rem var(--mobile-pad) 0;
        flex-direction: column;
        align-items: flex-start;

    }

    .adblock-card {
        padding: 1rem;

    }

}



.sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    white-space: nowrap;

}



.sync-pill.is-pending {
    color: #f59e0b;
    border-color: rgb(245 158 11 / 45%);

}



.sync-pill.is-offline {
    color: #f87171;
    border-color: rgb(248 113 113 / 50%);

}



.sync-pill {
    background: var(--surface);
    border-color: var(--border);

}



.sync-pill.is-pending {
    background: rgb(245 158 11 / 14%);

}



.sync-pill.is-offline {
    background: rgb(248 113 113 / 12%);

}



.header-actions .header-btn,

.header-actions .mobile-menu-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;

}



.header-actions .header-btn:hover,

.header-actions .mobile-menu-btn:hover {
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 14px rgb(10 15 30 / 18%);

}



.header-actions .net-indicator {
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--glass-border);

}



@media (width <= 900px) {
    .header {
        padding: 0.75rem 1rem;

    }



    .header-shell {
        flex-direction: column;
        align-items: stretch;

    }



    .header-brand {
        gap: 0.7rem;

    }



    .header-mark {
        width: 36px;
        height: 36px;

    }



    .header-text,

    .header-title {
        display: none;

    }



    .header-subtitle {
        display: none;

    }



    .header-actions {
        justify-content: space-between;
        border-radius: 16px;
        padding: 0.35rem 0.6rem;

    }



    .sync-pill {
        order: -1;

    }

}



.section {
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
    content-visibility: auto;
    contain-intrinsic-size: 900px 1200px;

}



.section.active {
    display: block !important;
    opacity: 1;
    animation: fadeIn 0.5s ease;

}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);

    }

    to {
        opacity: 1;
        transform: translateY(0);

    }

}



/* Streak Display */

.streak-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;

}



.streak-badge {
    text-align: center;

}



.streak-badge h3 {
    font-size: 2rem;
    margin: 0;
    color: var(--accent);

}



.streak-unit {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    display: block;

}



.streak-calendar {
    display: flex;
    gap: 0.25rem;

}



.streak-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface-light);

}



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

}



/* Score Display */

.score-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;

}



.gauge-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(var(--info) 0% 78%, var(--surface-light) 78% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

}



.gauge-circle::before {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--surface);

}



.gauge-circle span {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);

}



.score-breakdown {
    flex: 1;

}



.breakdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;

}



.breakdown-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    width: 80px;

}



.breakdown-bar {
    flex: 1;
    height: 4px;
    background: var(--surface-light);
    border-radius: 2px;
    overflow: hidden;

}



.bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;

}



/* Activity Timeline */

.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

}



.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: 8px;
    transition: background-color 0.2s ease;

}



.activity-item:hover {
    background: rgb(255 255 255 / 5%);

}



.activity-actions {
    margin-left: auto;
    display: flex;
    align-items: center;

}



.activity-project {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.2rem;

}



.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;

}



.activity-icon.completed {
    background: var(--success);

}



.activity-icon.focus {
    background: var(--primary);

}



.activity-icon.note {
    background: var(--accent);

}



.activity-icon.event {
    background: var(--info);

}



.activity-content {
    flex: 1;

}



.activity-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);

}



.activity-time {
    font-size: 0.8rem;
    color: var(--text-tertiary);

}



/* Goals Card */

.goals-progress {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    background: rgb(99 102 241 / 10%);
    border-radius: 12px;

}



.goals-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;

}



.goals-reward {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgb(99 102 241 / 12%);
    border: 1px solid rgb(99 102 241 / 20%);

}



.goals-reward.earned {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 10px 20px rgb(99 102 241 / 30%);

}



.goals-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

}



.goal-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: 8px;

}



.goal-item.completed {
    opacity: 0.7;

}



.goal-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--surface-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

}



.goal-item.completed .goal-checkbox {
    background: var(--success);
    border-color: var(--success);
    color: white;

}



.goal-item.pending .goal-checkbox .checkbox {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: transparent;
    border: 2px solid var(--surface-light);

}



.goal-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;

}



.goal-text {
    font-size: 0.9rem;
    color: var(--text-primary);

}



.goal-status {
    font-size: 0.8rem;
    color: var(--text-secondary);

}



/* Weekly Chart */

.weekly-chart {
    padding: 1rem 0;

}



.chart-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 120px;
    padding: 0 0.5rem;
    position: relative;

}



.chart-bars::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--glass-border);

}



.chart-bar {
    width: 30px;
    background: linear-gradient(to top, var(--primary), var(--accent));
    border-radius: 6px 6px 0 0;
    position: relative;
    transition: height 0.3s ease;

}



.chart-bar:hover {
    opacity: 0.9;

}



.chart-bar::after {
    content: attr(data-hours);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.2s ease;

}



.chart-bar:hover::after {
    opacity: 1;

}



.chart-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;

}



.chart-labels span {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    width: 30px;
    text-align: center;

}



.chart-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);

}



.summary-item {
    text-align: center;

}



.summary-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;

}



.summary-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);

}



/* Calendar */

.calendar-container {
    background: var(--surface);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;

}



.calendar-card {
    position: relative;
    background: linear-gradient(150deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 0%));
    border: 1px solid var(--border);
    box-shadow: 0 18px 38px rgb(0 0 0 / 16%);

}



.calendar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;

}



.calendar-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

}



.calendar-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);

}



#calendar-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;

}



.calendar-cta .btn {
    border-radius: 999px;
    padding: 0.6rem 1.2rem;

}



.calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;

}



.calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);

}



.calendar-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;

}



.calendar-nav-btn:hover {
    background: var(--surface-light);
    color: var(--text-primary);

}



.calendar-nav-btn.calendar-today-btn {
    width: auto;
    height: 34px;
    padding: 0 0.85rem;
    border-radius: 999px;
    font-weight: 600;

}



.calendar-view-toggle {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);

}



.calendar-view-toggle .btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;

}



.calendar-view-toggle .btn.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border-color: transparent;
    box-shadow: 0 10px 18px rgb(0 0 0 / 18%);

}



.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 0.4rem 0;
    flex-wrap: wrap;

}



.calendar-stack {
    display: grid;
    gap: 0.4rem;
    background: var(--surface);
    border-radius: 18px;
    padding: 0.75rem;
    border: 1px solid var(--border);

}



.calendar-stack-head {
    width: 100%;

}



.calendar-search {
    position: relative;
    flex: 1 1 240px;
    display: flex;
    align-items: center;

}



.calendar-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    z-index: 2;
    pointer-events: none;

}



.calendar-search input {
    padding-left: 2.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    position: relative;
    z-index: 1;
    height: 42px;
    line-height: 42px;

}



.calendar-legend {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--text-tertiary);
    font-size: 0.8rem;

}



.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

}



.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);

}



.legend-dot.legend-today {
    background: var(--primary);

}



.legend-dot.legend-selected {
    background: var(--accent);

}



.legend-dot.legend-event {
    background: var(--primary-light);

}



.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin: 0.2rem 0 0.85rem;
    background: transparent;
    border-radius: 12px;
    padding: 0;
    border: none;

}



body[dir="rtl"] {
    direction: rtl;

}



body[dir="rtl"] .section-header,

body[dir="rtl"] .form-group label,

body[dir="rtl"] .nav-text,

body[dir="rtl"] .section-subtitle,

body[dir="rtl"] .calendar-title-wrap,

body[dir="rtl"] .calendar-legend {
    text-align: right;

}



body[dir="rtl"] .calendar-nav {
    flex-direction: row-reverse;

}



body[dir="rtl"] .calendar-view-toggle {
    flex-direction: row-reverse;

}



.calendar-day-header {
    text-align: center;
    padding: 0.6rem 0;
    color: var(--text-tertiary);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;

}



.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    font-weight: 600;
    background: var(--surface-light);
    border: 1px solid rgb(255 255 255 / 4%);

}



.calendar-day:hover {
    background: color-mix(in srgb, var(--primary) 22%, var(--surface-light));
    color: var(--text-primary);
    transform: translateY(-1px);

}



.calendar-day.today {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, transparent));
    color: white;
    font-weight: 700;
    box-shadow: 0 10px 18px rgb(0 0 0 / 20%);

}



.calendar-day.selected {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, transparent));
    color: white;
    font-weight: 700;
    box-shadow: 0 10px 18px rgb(0 0 0 / 18%);

}



.calendar-day.other-month {
    color: var(--text-tertiary);
    opacity: 0.45;

}



.calendar-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);

}



.calendar-event-count {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--primary);
    color: white;
    border-radius: 999px;
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);

}



.calendar-agenda {
    display: none;
    gap: 0.75rem;
    margin-top: 1rem;

}



.calendar-events-panel {
    margin-top: 1.2rem;
    padding: 1rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);

}



.calendar-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;

}



.calendar-event-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.95rem;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-left: 4px solid color-mix(in srgb, var(--primary) 70%, transparent);

}



.calendar-event-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;

}



.calendar-event-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;

}



.calendar-event-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;

}



.calendar-event-time {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;

}



.calendar-event-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.8rem;

}



.calendar-event-actions {
    display: flex;
    gap: 0.4rem;

}



#event-modal .modal-content {
    max-width: 560px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 90%));
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 30px 80px rgb(15 23 42 / 45%);

}



#event-modal h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;

}



#event-modal .form-group {
    margin-bottom: 1rem;

}



#event-modal .form-input,

#event-modal textarea,

#event-modal select {
    background: rgb(15 23 42 / 60%);
    border: 1px solid rgb(148 163 184 / 25%);
    border-radius: 12px;

}



#event-modal .form-input:focus,

#event-modal textarea:focus,

#event-modal select:focus {
    border-color: rgb(99 102 241 / 70%);
    box-shadow: 0 0 0 4px rgb(99 102 241 / 18%);

}



#event-modal .btn {
    border-radius: 999px;

}



@media (width <= 768px) {
    .main-content {
        padding: 0.9rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.9rem;

    }



    .section {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;

    }

    .header {
        height: auto;
        padding: 0.6rem 0.9rem 0.7rem;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;

    }



    .header > .header-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding-right: 0;

    }



    .header-actions {
        position: static;
        width: 100%;
        justify-content: space-between;
        gap: 0.35rem;

    }



    .header-btn {
        width: 36px;
        height: 36px;

    }



    .mobile-menu-btn {
        position: static;
        transform: none;
        z-index: 2;

    }



    .calendar-top {
        flex-direction: column;
        align-items: flex-start;

    }



    .calendar-controls {
        flex-direction: column;
        align-items: stretch;

    }



    .calendar-nav {
        width: 100%;
        justify-content: space-between;

    }



    .calendar-view-toggle {
        width: 100%;
        justify-content: space-between;

    }



    .calendar-view-toggle .btn {
        flex: 1 1 auto;
        text-align: center;

    }



    .calendar-toolbar {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 0.5rem;

    }



    .calendar-search {
        width: 100%;

    }



    .calendar-legend {
        justify-content: space-between;
        gap: 0.5rem 1rem;

    }



    #calendar-title {
        font-size: 1.2rem;

    }



    .calendar-grid {
        gap: 0.3rem;
        padding: 0.45rem;
        border-radius: 14px;

    }



    .calendar-day-header {
        padding: 0.3rem 0;
        font-size: 0.6rem;

    }



    .calendar-day {
        min-width: 34px;
        min-height: 34px;
        font-size: 0.7rem;
        border-radius: 9px;

    }



    .calendar-day.has-event::after {
        width: 5px;
        height: 5px;
        bottom: 4px;

    }



    .calendar-event-count {
        top: 4px;
        right: 4px;
        font-size: 0.6rem;
        padding: 0.08rem 0.28rem;

    }



    .calendar-event-main {
        flex-direction: column;
        align-items: flex-start;

    }



    .calendar-event-time {
        margin-top: 0.35rem;
        font-size: 0.85rem;

    }



    .calendar-events-panel {
        padding: 0.85rem;

    }



    .calendar-events-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;

    }

}



@media (width <= 768px) {
    .calendar-week-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border-radius: 14px;

    }



    .calendar-week-table .table {
        min-width: 520px;

    }



    .calendar-week-table thead th,

    .calendar-week-table tbody th,

    .calendar-week-table tbody td {
        padding: 0.25rem 0.3rem;
        white-space: nowrap;

    }



    .calendar-week-table thead th.week-time-label,

    .calendar-week-table tbody th.week-time {
        position: sticky;
        left: 0;
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        z-index: 5;
        box-shadow: 6px 0 12px rgb(5 8 18 / 18%);

    }



    .week-time {
        font-size: 0.68rem;
        min-width: 54px;

    }



    .week-day-label {
        font-size: 0.68rem;

    }



    .calendar-week-table tbody td {
        min-width: 56px;

    }



    .week-slot {
        min-height: 30px;
        border-radius: 10px;

    }

}

@media (width <= 520px) {
    .calendar-week-table .table {
        min-width: 480px;

    }



    .calendar-week-table tbody td {
        min-width: 52px;

    }



    .week-slot {
        min-height: 32px;

    }

}

@media (width <= 520px) {
    .calendar-card {
        padding: 0.9rem;

    }



    .calendar-top {
        gap: 0.5rem;

    }



    .calendar-kicker {
        font-size: 0.62rem;

    }



    .calendar-controls {
        gap: 0.6rem;

    }



    .calendar-nav-btn {
        width: 28px;
        height: 28px;

    }



    .calendar-nav-btn.calendar-today-btn {
        height: 30px;
        padding: 0 0.6rem;
        font-size: 0.78rem;

    }



    #calendar-title {
        font-size: 1.05rem;

    }



    .calendar-grid {
        gap: 0.2rem;
        padding: 0.35rem;

    }



    .calendar-day {
        min-width: 30px;
        min-height: 30px;
        font-size: 0.66rem;

    }



    .calendar-day-header {
        font-size: 0.55rem;

    }



    .calendar-search input {
        height: 40px;
        line-height: 40px;
        font-size: 0.85rem;

    }



    .calendar-legend {
        justify-content: flex-start;
        gap: 0.5rem;

    }



    .calendar-event-card {
        padding: 0.75rem;

    }



    .calendar-event-actions {
        flex-wrap: wrap;

    }

}



@media (width <= 420px) {
    .header-actions .net-indicator {
        padding: 0.25rem 0.5rem;

    }



    .header-actions .net-label {
        display: none;

    }



    .header-actions {
        gap: 0.35rem;

    }



    .bottom-nav-link {
        padding: 0.3rem 0.2rem;

    }

}



body.mobile-compact .section-header {
    padding: 0.7rem var(--mobile-pad);

}



body.mobile-compact .glass-card {
    padding: 0.8rem;

}



body.mobile-compact .stats-grid,

body.mobile-compact .card-grid,

body.mobile-compact .actions-grid {
    gap: 0.6rem;

}



@media (width <= 600px) {
    .calendar-card {
        padding: 0.9rem;

    }



    .calendar-top {
        gap: 0.4rem;

    }



    .calendar-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.55rem;

    }



    .calendar-nav {
        order: 1;
        width: 100%;
        justify-content: space-between;

    }



    .calendar-view-toggle {
        order: 2;
        width: 100%;

    }



    .calendar-toolbar {
        order: 3;
        margin-top: 0.35rem;
        justify-content: flex-start;
        gap: 0.5rem;

    }



    .calendar-search {
        width: 100%;

    }



    .calendar-legend {
        order: 4;
        width: 100%;
        font-size: 0.72rem;
        justify-content: flex-start;

    }



    .calendar-grid {
        grid-template-columns: repeat(7, minmax(32px, 1fr));
        gap: 0.2rem;
        padding: 0.5rem;

    }



    .calendar-day-header {
        font-size: 0.54rem;
        padding: 0.25rem 0;

    }



    .calendar-day {
        min-width: 30px;
        min-height: 30px;
        font-size: 0.66rem;

    }



    .calendar-events-panel {
        margin-top: 0.8rem;
        padding: 0.8rem;

    }



    .calendar-stack {
        background: transparent;
        border: none;
        padding: 0;
        gap: 0.6rem;

    }



    .calendar-stack-head {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 0.6rem;
        display: grid;
        gap: 0.5rem;

    }



    .calendar-legend {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;

    }



    .legend-item {
        justify-content: center;
        background: var(--surface-light);
        border-radius: 999px;
        padding: 0.2rem 0.4rem;
        font-size: 0.68rem;

    }



    .calendar-grid {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;

    }

}



/* Timer */

.timer-display {
    font-size: 5rem;
    font-weight: 800;
    text-align: center;
    margin: 2rem 0;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(to right, var(--primary), var(--accent));
    background-clip: text;
    -webkit-text-fill-color: transparent;

}



.timer-core {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    margin: 1.25rem 0 1rem;
    border-radius: 20px;
    background: linear-gradient(140deg, rgb(99 102 241 / 12%), rgb(15 23 42 / 75%));
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 18px 36px rgb(6 10 22 / 32%);

}



.timer-readout {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;

}



.timer-core .timer-display {
    margin: 0;
    font-size: clamp(3.2rem, 5vw, 4.8rem);
    letter-spacing: -0.02em;
    text-align: left;

}



.timer-status-line {
    display: grid;
    gap: 0.2rem;

}



.timer-visual {
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.25rem;
    border-radius: 24px;
    background: linear-gradient(145deg, rgb(255 255 255 / 6%), rgb(0 0 0 / 8%));
    border: 1px solid var(--border);
    box-shadow: 0 16px 40px rgb(0 0 0 / 18%);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    position: relative;
    overflow: hidden;

}



.timer-visual:hover {
    transform: translateY(-2px);
    border-color: rgb(255 255 255 / 20%);
    box-shadow: 0 22px 44px rgb(0 0 0 / 22%);

}



.timer-visual-icon,

.timer-visual-tree {
    display: grid;
    place-items: center;
    gap: 6px;
    color: var(--text-primary);
    transition: opacity 180ms ease, transform 180ms ease;

}



.timer-visual[data-view="icon"] .timer-visual-tree {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    position: absolute;

}



.timer-visual[data-view="tree"] .timer-visual-icon {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    position: absolute;

}



.timer-visual-icon i {
    font-size: 2rem;
    color: var(--primary);

}



.timer-visual-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);

}



.timer-visual-tree {
    width: 80px;
    height: 80px;
    position: relative;

}



.tree-pot {
    width: 42px;
    height: 16px;
    border-radius: 0 0 14px 14px;
    background: #5b3b2b;
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);

}



.tree-stem {
    width: 6px;
    height: 24px;
    background: #6a4a3a;
    border-radius: 4px;
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%) scaleY(var(--growth, 0.4));
    transform-origin: bottom;
    transition: transform 200ms ease;

}



.tree-leaf {
    width: 20px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    position: absolute;
    opacity: 0.85;
    transform: scale(calc(0.4 + (var(--growth, 0.4) * 0.6)));
    transition: transform 200ms ease;

}



.leaf-1 { top: 16px; left: 18px; }

.leaf-2 { top: 8px; right: 16px; }

.leaf-3 { top: 26px; left: 34px; }



.timer-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(135deg, rgb(12 18 35 / 85%), rgb(20 28 52 / 78%));
    box-shadow: 0 22px 40px rgb(8 12 22 / 45%);
    backdrop-filter: blur(18px);
    flex-wrap: wrap;

}



.timer-btn {
    padding: 0.85rem 1.75rem;
    border-radius: 50px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    letter-spacing: 0.01em;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);

}



.timer-controls .timer-btn {
    min-width: 140px;
    justify-content: center;

}



.timer-btn.primary {
    background: linear-gradient(135deg, var(--primary), #5b7cff);
    color: white;
    box-shadow: 0 16px 30px rgb(79 92 251 / 28%);

}



.timer-btn.primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);

}



.timer-btn.secondary {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);

}

.timer-btn.ghost {
    background: rgb(255 255 255 / 6%);
    color: var(--text-primary);
    border: 1px solid rgb(255 255 255 / 12%);

}

.timer-btn.ghost:hover {
    background: rgb(255 255 255 / 12%);
    color: var(--text-primary);

}



.timer-btn.secondary:hover {
    background: var(--surface-light);
    color: var(--text-primary);

}



.timer-quote {
    text-align: center;
    font-style: italic;
    color: var(--text-secondary);
    margin: 1rem auto 1.5rem;
    max-width: 520px;

}

.timer-history {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    margin: 0.5rem 0 1.4rem;

}

.timer-history-empty {
    font-size: 0.85rem;
    color: var(--text-tertiary);

}

.timer-history-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;

}

.timer-history-chip small {
    color: var(--text-tertiary);
    font-weight: 500;

}

.timer-history-chip[data-mode="focus"] {
    border-color: color-mix(in srgb, #38bdf8 30%, transparent);
    color: #cbe7ff;

}

.timer-parallel {
    margin-top: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--surface) 90%, transparent));
    box-shadow: 0 18px 36px rgb(6 10 22 / 26%);
    display: grid;
    gap: 0.85rem;

}

.timer-parallel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

}

.timer-parallel-header h4 {
    margin: 0;
    font-size: 1rem;

}

.timer-parallel-form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) auto;
    gap: 0.6rem;
    align-items: center;

}

.timer-parallel-list {
    display: grid;
    gap: 0.7rem;

}

.parallel-item {
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    display: grid;
    gap: 0.5rem;

}

.parallel-main {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;

}

.parallel-title {
    font-weight: 600;

}

.parallel-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);

}

.parallel-actions {
    display: inline-flex;
    gap: 0.4rem;

}

.parallel-actions .btn {
    padding: 0.35rem 0.5rem;

}

.parallel-progress {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    overflow: hidden;

}

.parallel-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.3s ease;

}

@media (width <= 900px) {
    .timer-parallel-form {
        grid-template-columns: 1fr;

    }
}



.timer-shell .form-input {
    background: rgb(255 255 255 / 4%);
    border-color: rgb(255 255 255 / 12%);

}



.timer-shell .form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(79 92 251 / 20%);

}



.timer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;

}



.timer-type-selector {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;

}



.timer-type-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;

}



.timer-type-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);

}



.timer-type-btn:hover:not(.active) {
    background: var(--surface-light);
    color: var(--text-primary);

}



.daily-advice {
    margin-top: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgb(79 92 251 / 12%), rgb(16 185 129 / 12%));
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;

}



.insight-card {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.9rem;

}



.insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

}



.insight-header h3 {
    margin: 0;
    font-size: 1.15rem;

}



.insight-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgb(14 165 233 / 18%);
    border: 1px solid rgb(14 165 233 / 35%);
    color: var(--text-primary);

}



.insight-body {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;

}



.insight-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.coach-card {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.9rem;
    background: linear-gradient(135deg, rgb(16 185 129 / 12%), rgb(15 23 42 / 88%));
    border: 1px solid rgb(16 185 129 / 35%);

}



.coach-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

}



.coach-header h3 {
    margin: 0;
    font-size: 1.15rem;

}



.coach-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgb(16 185 129 / 18%);
    border: 1px solid rgb(16 185 129 / 40%);
    color: var(--text-primary);

}



.coach-body {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;

}



.coach-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

}



.daily-log-progress {
    margin: 0.75rem 0 1rem;

}



.daily-log-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-tertiary);
    margin-bottom: 0.4rem;

}



.daily-log-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;

}



.daily-log-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.4s ease;

}



.modal-lg {
    max-width: 720px;
    width: 92%;

}



.activity-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.25rem;

}



.activity-modal-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);

}



.activity-modal-item .activity-content {
    flex: 1;

}



.activity-modal-item .activity-actions {
    display: flex;
    align-items: center;

}



.activity-modal-item .activity-time {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-tertiary);
    font-size: 0.85rem;

}



.focus-duration-title {
    text-align: center;
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: 1.5rem;

}



.focus-duration-options {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;

}



.focus-duration-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;

}



.focus-duration-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);

}



.focus-duration-btn:hover:not(.active) {
    background: var(--surface-light);
    color: var(--text-primary);

}



.focus-duration-more {
    border-style: dashed;

}



.focus-duration-note {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-tertiary);

}



.timer input[type="number"],

.timer input[type="date"],

.timer input[type="time"],

.timer input[type="text"] {
    width: 90px;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    border: 2px solid var(--border);
    font-size: 1rem;
    text-align: center;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface);
    transition: all 0.3s ease;
    outline: none;
    cursor: not-allowed;
    pointer-events: none;

}



.timer input:enabled {
    cursor: text;
    pointer-events: auto;

}



.timer input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 8px rgb(79 92 251 / 40%);
    background: #fff;

}



#countdown-settings input[type="date"],

#countdown-settings input[type="time"] {
    width: 130px;

}



#countdown-settings .btn {
    margin-top: 10px;
    padding: 6px 12px;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s ease;

}



@media (width <= 768px) {
    .timer-shell {
        padding: 1.25rem;
        border-radius: 18px;

    }



    .timer-mode-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;

    }



    .timer-mode-pill {
        align-self: flex-start;

    }



    .timer-type-selector {
        gap: 0.6rem;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scroll-snap-type: x proximity;

    }



    .timer-type-btn {
        flex: 0 0 auto;
        min-width: 140px;
        padding: 0.65rem 1rem;
        scroll-snap-align: start;

    }



    .timer-visual {
        width: 96px;
        height: 96px;
        border-radius: 20px;
        margin-bottom: 1rem;

    }



    .timer-visual-icon i {
        font-size: 1.6rem;

    }



    .timer-core {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 1rem;

    }



    .timer-readout {
        align-items: center;

    }



    .timer-core .timer-display {
        text-align: center;
        font-size: clamp(2.6rem, 8vw, 3.4rem);

    }



    .timer-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;

    }



    .timer-controls {
        flex-wrap: wrap;
        gap: 0.65rem;

    }



    .timer-btn {
        flex: 1 1 calc(50% - 0.65rem);
        justify-content: center;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;

    }



    .timer-quote {
        margin-bottom: 1rem;
        font-size: 0.9rem;

    }

}



#countdown-settings .btn:hover {
    background: #3730a3;

}



#countdown-list {
    margin-top: 15px;
    list-style: none;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;

}



#countdown-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 8px;
    background-color: #f9fafb;
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    transition: transform 0.1s ease, background 0.2s ease;

}



#countdown-list li:hover {
    background-color: #eef2ff;
    transform: translateY(-1px);

}



.countdown-name {
    font-weight: 600;
    color: #111827;

}



.countdown-time {
    font-size: 0.85rem;
    color: #6b7280;

}



.remove-countdown {
    margin-left: 10px;
    padding: 3px 6px;
    font-size: 0.75rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;

}



.remove-countdown:hover {
    background: #b91c1c;

}



.countdown-overdue {
    color: #ef4444;
    font-weight: bold;

}



.timer .form-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--text-secondary);
    text-align: center;

}



/* Notes */

.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;

}



.note-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;

}



.note-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);

}



.note-card.favorite {
    border-color: var(--warning);

}



.note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;

}



.note-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);

}



.note-content {
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

}



.note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;

}



.note-date {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.note-actions {
    display: flex;
    gap: 0.5rem;

}



.note-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-light);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

}



.note-action-btn:hover {
    background: var(--primary);
    color: white;

}



.note-action-btn.favorite {
    color: var(--warning);

}



/* Floating Music Player */

.floating-player {
    position: fixed;
    bottom: 26px;
    right: 14px;
    width: 60px;
    height: 60px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: var(--glass-shadow);
    transition: width 0.28s ease, border-radius 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
    overflow: hidden;
    padding: 0;
    transform-origin: right center;

}



.floating-player:hover,

.floating-player.expanded {
    width: 420px;
    height: 84px;
    border-radius: 26px;
    box-shadow: 0 22px 55px rgb(10 14 30 / 55%);
    background: linear-gradient(135deg, rgb(16 24 44 / 90%), rgb(30 42 78 / 90%));
    padding: 0 56px 0 0.9rem;

}



.player-toggle {
    width: 56px;
    height: 56px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 12px 26px rgb(79 140 255 / 35%);

}



.floating-player:hover .player-toggle,

.floating-player.expanded .player-toggle {
    background: var(--primary-dark);
    transform: scale(0.98);

}



.player-content {
    width: calc(100% - 56px);
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    transition: all 0.3s ease;

}



.floating-player:hover .player-content,

.floating-player.expanded .player-content {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;

}



.player-cover {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgb(255 255 255 / 8%);
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    flex-shrink: 0;

}



.player-controls button {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;

}



.player-controls button:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);

}



.floating-player:hover .player-content,

.floating-player.expanded .player-content {
    opacity: 1;
    transform: translateX(0);

}



.track-info {
    flex: 1;
    min-width: 0;

}



.track-title {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.125rem;
    color: var(--text-primary);

}



.track-artist {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}



.player-times {
    display: flex;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-tertiary);

}



.player-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;

}



.player-controls button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;

}



.player-controls button:hover {
    background: var(--primary);
    color: white;

}



.player-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--surface-light);
    overflow: hidden;

}



.player-progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.1s linear;

}



/* Music Library */

.music-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;

}



.music-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;

}



.music-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;

}



.music-search {
    position: relative;
    min-width: 220px;
    flex: 1 1 auto;

}



.music-search input {
    padding-left: 2.5rem;

}



.music-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);

}



@media (width <= 768px) {
    .music-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;

    }



    .music-track {
        padding: 0.85rem;

    }



    .music-toolbar {
        align-items: stretch;

    }



    .music-controls {
        width: 100%;

    }



    .music-search {
        min-width: 0;
        width: 100%;

    }

}



.music-track {
    background: var(--surface);
    border-radius: 16px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);

}



.music-track:hover {
    background: var(--surface-light);
    transform: translateY(-2px);

}



.music-track.playing {
    border: 2px solid var(--primary);
    box-shadow: 0 12px 28px rgb(0 0 0 / 18%);

}



.track-cover {
    width: 100%;
    aspect-ratio: 1;
    background: var(--surface-light);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    position: relative;

}



.track-cover-art {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    font-size: 2rem;

}



@media (width >= 980px) {
    .floating-player:hover,

    .floating-player.expanded {
        width: 460px;
        height: 92px;
        border-radius: 30px;
        padding: 0 60px 0 1rem;

    }



    .player-cover {
        width: 50px;
        height: 50px;

    }



    .player-toggle {
        width: 60px;
        height: 60px;
        font-size: 22px;

    }



    .player-controls button {
        width: 38px;
        height: 38px;

    }

}



.track-cover-art.has-cover {
    background-size: cover;
    background-position: center;
    color: transparent;

}



.player-cover.has-cover,

.mobile-track-image.has-cover,

.expanded-track-image.has-cover,

.music-edit-cover-preview.has-cover {
    background-size: cover;
    background-position: center;
    color: transparent;

}



.player-cover.has-cover i,

.mobile-track-image.has-cover i,

.expanded-track-image.has-cover i,

.music-edit-cover-preview.has-cover i,

.track-cover-art.has-cover i {
    opacity: 0;

}



.music-edit-modal {
    max-width: 520px;

}



.music-edit-cover {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;

}



.music-edit-cover-preview {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    background: var(--surface-light);
    display: grid;
    place-items: center;
    color: var(--text-secondary);

}



.music-edit-cover-actions {
    display: grid;
    gap: 0.5rem;

}



.device-link-modal {
    max-width: 760px;
    width: min(94vw, 760px);

}



.device-link-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;

}



.device-link-panel {
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid rgb(148 163 184 / 20%);
    background: rgb(255 255 255 / 3%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

}



.device-link-code {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    padding: 0.6rem 1rem;
    background: rgb(15 23 42 / 60%);
    border-radius: 12px;
    text-align: center;

}



.device-link-qr {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    background: rgb(15 23 42 / 40%);
    border-radius: 16px;
    border: 1px dashed rgb(148 163 184 / 30%);
    color: var(--text-tertiary);

}



.device-link-requests {
    display: grid;
    gap: 0.5rem;

}



.device-link-scan {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgb(148 163 184 / 20%);
    background: rgb(15 23 42 / 50%);

}



.device-link-scan video {
    width: 100%;
    height: auto;
    display: block;

}



.device-link-request {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgb(148 163 184 / 18%);
    background: rgb(15 23 42 / 50%);

}



.device-link-request strong {
    font-size: 0.9rem;

}



.device-list {
    display: grid;
    gap: 0.5rem;

}



.device-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgb(148 163 184 / 18%);
    background: rgb(15 23 42 / 40%);

}



.device-scope-grid {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.6rem;

}



@media (width <= 900px) {
    .device-link-body {
        grid-template-columns: 1fr;

    }

}



.plan-card .plan-summary {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-bottom: 0.75rem;

}



.plan-list {
    display: grid;
    gap: 0.75rem;

}



.plan-item {
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    gap: 0.5rem;

}



.plan-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

}



.plan-item-title {
    font-weight: 600;
    color: var(--text-primary);

}



.plan-item-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.plan-item-actions {
    display: flex;
    gap: 0.5rem;

}



.goals-roadmap-list {
    display: grid;
    gap: 0.75rem;

}



.goal-roadmap-item {
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    gap: 0.5rem;

}



.goal-roadmap-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;

}



.goal-roadmap-title {
    font-weight: 600;
    color: var(--text-primary);

}



.goal-roadmap-deadline {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.goal-roadmap-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;

}



.goal-roadmap-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    overflow: hidden;

}



.goal-roadmap-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    width: 0%;

}



.goal-roadmap-progress-value {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.goal-modal {
    max-width: 520px;

}



.goal-modal .range-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.35rem;

}



.review-card .review-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;

}



.review-token {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.review-modal {
    max-width: 640px;

}



.review-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;

}



.review-stat {
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    gap: 0.25rem;

}



.review-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.review-section {
    margin-top: 0.75rem;

}



.command-palette,

.global-search {
    max-width: 640px;
    padding: 1.25rem;

}



.command-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: 0.75rem;

}



.command-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);

}



.command-hint {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    border: 1px solid var(--border);
    padding: 0.1rem 0.35rem;
    border-radius: 6px;

}



.command-results {
    display: grid;
    gap: 0.5rem;
    max-height: 380px;
    overflow: auto;

}



.command-item {
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;

}



.command-item:hover,

.command-item.active {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    background: color-mix(in srgb, var(--surface) 85%, var(--primary) 15%);

}



.command-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.task-impact-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    border: 1px solid var(--border);
    color: var(--text-tertiary);

}



.card-grid.drag-enabled .glass-card {
    cursor: grab;

}



.glass-card.dragging {
    opacity: 0.6;
    transform: scale(0.98);

}



.glass-card.drag-over {
    outline: 2px dashed color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 4px;

}



.track-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;

}



.music-track:hover .track-cover img {
    transform: scale(1.05);

}



.play-overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;

}



.music-track:hover .play-overlay {
    opacity: 1;

}



.track-details {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;

}



.track-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;

}



.track-tag {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgb(99 102 241 / 18%);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.65rem;

}



.music-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);

}



/* Achievements */

.achievements-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;

}



.achievements-count {
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



.achievements-list {
    display: grid;
    gap: var(--space-2);

}



.achievement-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);

}



.achievement-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(99 102 241 / 18%);
    color: var(--primary);
    flex-shrink: 0;

}



.achievement-content {
    flex: 1;
    min-width: 0;

}



.achievement-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.15rem;

}



.achievement-desc {
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



.achievement-item.unlocked {
    border-color: rgb(16 185 129 / 50%);
    background: linear-gradient(135deg, rgb(16 185 129 / 8%), rgb(99 102 241 / 8%));

}



.achievement-item.unlocked .achievement-icon {
    background: rgb(16 185 129 / 20%);
    color: var(--secondary);

}



/* Notifications */

.notifications-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;

}



.notifications-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.notifications-filters .btn.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border-color: transparent;

}



.notifications-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.notifications-meta {
    margin: 0.5rem 0 1rem;

}



.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: 0.75rem;

}



.notification-item.unread {
    border-color: rgb(99 102 241 / 50%);
    background: linear-gradient(135deg, rgb(99 102 241 / 8%), rgb(16 185 129 / 8%));

}



.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(99 102 241 / 18%);
    color: var(--primary);
    flex-shrink: 0;

}



.notification-content {
    flex: 1;
    min-width: 0;

}



.notification-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;

}



.notification-message {
    color: var(--text-secondary);
    font-size: 0.9rem;

}



.notification-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.75rem;

}



.notification-actions {
    display: flex;
    gap: 0.25rem;

}



.notification-actions .btn-icon {
    width: 32px;
    height: 32px;

}



/* System check */

.system-check-results {
    margin-top: 1rem;

}



.system-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;

}



.system-check-item {
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    text-align: center;
    font-size: 0.85rem;

}



.system-check-item.ok {
    border-color: rgb(16 185 129 / 60%);
    color: var(--success);

}



.system-check-item.bad {
    border-color: rgb(239 68 68 / 60%);
    color: var(--danger);

}



.system-check-meta {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    text-align: right;

}



@media (width <= 768px) {
    .notifications-toolbar {
        flex-direction: column;
        align-items: stretch;

    }



    .notifications-actions,

    .notifications-filters {
        width: 100%;

    }

}



.music-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text-tertiary);

}



.music-empty h4 {
    margin: 0.5rem 0 0.4rem;
    color: var(--text-primary);

}



.music-empty p {
    margin-bottom: 1rem;

}



.music-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;

}



.music-queue-panel {
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: rgb(255 255 255 / 3%);
    padding: 0.9rem;
    margin-bottom: 1rem;

}



.music-queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;

}



.music-queue-list,

.music-history-list {
    display: grid;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.9rem;

}



.music-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    background: rgb(255 255 255 / 4%);

}



.track-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;

}



.track-actions .btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;

}



.track-actions .btn.active {
    background: rgb(239 68 68 / 20%);
    color: #ef4444;

}



/* Timer UI refresh */

.timer-shell {
    border: 1px solid var(--glass-border);
    background: linear-gradient(145deg, rgb(15 23 42 / 85%), rgb(79 92 251 / 8%));

}



.timer-mode-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: linear-gradient(120deg, rgb(79 92 251 / 18%), rgb(255 255 255 / 4%));
    border: 1px solid var(--glass-border);
    margin-bottom: 1rem;
    gap: 1rem;

}



.timer-mode-text {
    display: flex;
    align-items: center;
    gap: 0.85rem;

}



.timer-mode-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 12%);
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
    opacity: 1;
    visibility: visible;

}



.timer-mode-icon i {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 1;
    visibility: visible;

}



.timer-mode-banner h3 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;

}



.timer-mode-banner p {
    margin: 0;
    color: var(--text-secondary);

}



.timer-mode-pill {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-weight: 600;
    background: rgb(79 92 251 / 20%);
    color: var(--primary);

}



.timer-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;

}



.timer-metrics .metric-card {
    padding: 0.75rem;
    border-radius: 14px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--glass-border);

}



.timer-metrics .metric-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: 0.3rem;

}



.timer-metrics .metric-value {
    font-weight: 700;
    color: var(--text-primary);

}



.timer-shell[data-mode="focus"] .timer-mode-banner {
    background: linear-gradient(120deg, rgb(56 189 248 / 20%), rgb(255 255 255 / 4%));

}



.timer-shell[data-mode="focus"] .timer-mode-pill {
    background: rgb(56 189 248 / 20%);
    color: #38bdf8;

}



.timer-shell[data-mode="countdown"] .timer-mode-banner {
    background: linear-gradient(120deg, rgb(245 158 11 / 20%), rgb(255 255 255 / 4%));

}



.timer-shell[data-mode="countdown"] .timer-mode-pill {
    background: rgb(245 158 11 / 20%);
    color: #f59e0b;

}



.timer-type-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    background: rgb(255 255 255 / 4%);
    padding: 0.75rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);

}



.timer-type-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid transparent;
    text-align: left;

}



.timer-type-btn .timer-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--primary);
    font-size: 1rem;

}



.timer-type-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);

}



.timer-type-desc {
    font-size: 0.8rem;
    color: var(--text-tertiary);

}



.timer-type-btn.active {
    border-color: rgb(79 92 251 / 50%);
    background: rgb(79 92 251 / 18%);
    color: var(--text-primary);

}



.timer-shell[data-mode="pomodoro"] .timer-display {
    color: var(--primary);
    text-shadow: 0 12px 30px rgb(79 92 251 / 25%);

}



.timer-shell[data-mode="focus"] .timer-display {
    color: #38bdf8;
    text-shadow: 0 12px 30px rgb(56 189 248 / 25%);

}



.timer-shell[data-mode="countdown"] .timer-display {
    color: #f59e0b;
    text-shadow: 0 12px 30px rgb(245 158 11 / 25%);

}



.timer-controls {
    gap: 0.75rem;

}



/* Notes rich editor */

.note-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgb(255 255 255 / 4%);

}



.note-editor-divider {
    width: 1px;
    height: 24px;
    background: rgb(255 255 255 / 10%);
    margin: 0 0.2rem;

}



.note-editor {
    margin-top: 0.75rem;
    min-height: 160px;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgb(15 23 42 / 50%);
    color: var(--text-primary);
    outline: none;
    font-size: var(--note-font-size, 16px);
    line-height: var(--note-line-height, 1.5);
    letter-spacing: var(--note-letter-spacing, 0px);
    font-family: var(--note-font-family, inherit);

}



.note-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);

}



.note-font-select {
    min-width: 140px;
    height: 36px;
    padding: 0.3rem 0.6rem;

}



.note-color-input {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: transparent;

}

.note-asset-row {
    margin-top: 0.65rem;
    padding: 0.6rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgb(255 255 255 / 4%);
}

.note-bg-controls {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.note-emoji-panel {
    margin-top: 0.6rem;
    padding: 0.6rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgb(15 23 42 / 60%);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 0.4rem;
}

.note-emoji-panel .emoji-btn {
    border: none;
    background: transparent;
    font-size: 18px;
    padding: 0.35rem;
    border-radius: 8px;
    cursor: pointer;
}

.note-emoji-panel .emoji-btn:hover {
    background: rgb(255 255 255 / 10%);
}

.unsplash-grid {
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
}

.unsplash-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgb(15 23 42 / 40%);
    cursor: pointer;
    position: relative;
}

.unsplash-card img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    display: block;
}

.unsplash-card .unsplash-credit {
    position: absolute;
    left: 6px;
    bottom: 6px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgb(2 6 23 / 70%);
    color: #e2e8f0;
}



.notes-modal.expanded-editor {
    max-width: 900px;
    width: 95%;

}



.notes-modal.expanded-editor .note-editor {
    min-height: 60vh;

}



.notes-modal.expanded-editor .note-preview {
    display: none;

}



/* Settings refresh */

#settings .glass-card {
    border: 1px solid var(--glass-border);
    background: linear-gradient(145deg, rgb(15 23 42 / 85%), rgb(255 255 255 / 2%));
    box-shadow: 0 20px 32px rgb(0 0 0 / 20%);
    padding: 1.1rem 1.2rem;

}



#settings .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.8rem;
    align-items: start;

}



#settings .settings-grid {
    gap: 0.8rem;

}



#settings #notifications-container {
    margin-top: 0.4rem;

}



#settings .section-header {
    padding: 1.1rem 1.2rem;
    border-radius: 18px;

}



#settings .section-title {
    font-size: 1.55rem;

}



#settings .section-subtitle {
    font-size: 0.95rem;

}



#settings .section-header {
    background: linear-gradient(140deg, rgb(79 92 251 / 20%), rgb(18 22 38 / 95%));

}



#settings .form-group {
    margin-bottom: 0.55rem;
    padding: 0.6rem 0.7rem;
    border-radius: 14px;
    background: rgb(255 255 255 / 3%);
    border: 1px solid rgb(255 255 255 / 4%);

}



#settings .form-label {
    font-weight: 600;

}



#settings .btn {
    min-height: 42px;

}



#settings .about-app-card {
    background:

        radial-gradient(900px 260px at 0% -10%, rgb(99 102 241 / 22%), transparent),

        linear-gradient(155deg, rgb(14 165 233 / 8%), rgb(10 16 28 / 92%));
    border: 1px solid rgb(99 102 241 / 28%);
    box-shadow: 0 20px 44px rgb(6 10 22 / 35%);

}



.about-card {
    display: grid;
    gap: 1.1rem;
    border-radius: 24px;
    background:

        radial-gradient(800px 240px at 100% 0%, rgb(99 102 241 / 18%), transparent),

        linear-gradient(160deg, rgb(255 255 255 / 6%), rgb(12 18 34 / 92%));
    border: 1px solid rgb(148 163 184 / 24%);
    box-shadow: 0 24px 48px rgb(5 8 18 / 40%);

}



.about-app-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 1.1rem;
    align-items: center;
    padding: 0.9rem;
    border-radius: 20px;
    background: rgb(255 255 255 / 5%);
    border: 1px solid rgb(148 163 184 / 16%);
    box-shadow: inset 0 0 0 1px rgb(99 102 241 / 8%);

}



.about-app-status {
    display: grid;
    gap: 0.5rem;
    justify-items: start;

}



.about-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgb(148 163 184 / 20%);

}



.about-app-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;

}



.about-detail-card {
    padding: 0.8rem 0.85rem;
    border-radius: 16px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(148 163 184 / 18%);
    display: grid;
    gap: 0.2rem;

}



.about-detail-card span {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.about-detail-card strong {
    font-size: 0.95rem;
    color: var(--text-primary);

}



.about-app-actions {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;

}



/* About card mobile boost */

@media (width <= 768px) {
    .about-card {
        padding: 0.5rem;
        gap: 0.85rem;

    }



    .about-app-hero {
        grid-template-columns: 1fr;
        gap: 0.8rem;

    }



    .about-app-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;

    }



    .about-app-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;

    }



    .about-app-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;

    }



    .about-app-actions .btn {
        width: 100%;
        justify-content: center;

    }

}



@media (width <= 600px) {
    .about-app-hero {
        padding: 0.75rem;

    }



    .about-app-brand {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.6rem;

    }



    .about-app-title {
        font-size: 1rem;

    }



    .about-app-version,

    .about-app-meta {
        font-size: 0.78rem;

    }



    .about-app-status {
        grid-template-columns: 1fr;

    }



    .about-app-links {
        grid-template-columns: 1fr;

    }



    .about-app-links a {
        justify-content: center;
        text-align: center;
        width: 100%;

    }



    .about-app-actions {
        grid-template-columns: 1fr;

    }



    .redeem-card .redeem-row {
        grid-template-columns: 1fr;

    }



    .redeem-card .form-input,

    .redeem-card .btn {
        width: 100%;
        min-height: 44px;

    }



    #redeem-status {
        display: block;
        margin-top: 0.45rem;
        font-size: 0.78rem;

    }

}



.whats-new-modal {
    max-width: 620px;
    width: 94%;
    border-radius: 22px;
    background: linear-gradient(180deg, rgb(14 20 34 / 98%), rgb(10 16 28 / 95%));
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 26px 60px rgb(5 8 18 / 45%);

}



.whats-new-body {
    display: grid;
    gap: 0.75rem;

}



.whats-new-meta {
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



.whats-new-list {
    display: grid;
    gap: 0.6rem;

}



.whats-new-item {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(255 255 255 / 8%);

}



.whats-new-item strong {
    font-size: 0.95rem;
    color: var(--text-primary);

}



.whats-new-item span {
    color: var(--text-secondary);
    font-size: 0.85rem;

}



/* Release notes premium */

.whats-new-modal {
    border: 1px solid rgb(148 163 184 / 24%);
    box-shadow: 0 28px 70px rgb(4 8 18 / 55%);

}



.whats-new-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgb(148 163 184 / 20%);
    background: rgb(255 255 255 / 5%);

}



.whats-new-item {
    border: 1px solid rgb(99 102 241 / 18%);
    background: linear-gradient(150deg, rgb(99 102 241 / 8%), rgb(12 18 34 / 90%));
    box-shadow: 0 12px 26px rgb(6 10 22 / 28%);

}



.whats-new-item:hover {
    border-color: rgb(99 102 241 / 40%);
    transform: translateY(-1px);

}



.whats-new-item strong {
    font-size: 1rem;

}



.whats-new-item span {
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--text-secondary) 92%, transparent);

}



.redeem-card .redeem-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;

}



@media (width <= 900px) {
    .about-app-hero {
        grid-template-columns: 1fr;

    }



    .about-app-details {
        grid-template-columns: 1fr;

    }



    .redeem-card .redeem-row {
        grid-template-columns: 1fr;

    }

}



#settings .about-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;

}



#settings .about-app-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;

}



#settings .about-app-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgb(99 102 241 / 18%), rgb(14 165 233 / 8%));
    padding: 7px;
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 12px 24px rgb(10 16 30 / 35%);

}



#settings .about-app-title {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -0.01em;

}



#settings .about-app-version {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



#settings .about-app-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



#settings .about-app-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;

}



#settings .about-app-links a {
    color: color-mix(in srgb, var(--primary) 80%, #fff 20%);
    font-weight: 600;
    text-decoration: none;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(148 163 184 / 16%);

}



#settings .about-app-links a:hover {
    text-decoration: underline;

}

#settings .glass-card {
    width: 100%;
    min-height: 100%;

}



#settings .toggle-switch {
    margin-top: 0.35rem;

}



#settings .form-row {
    gap: 0.75rem;

}



/* Settings shell */

.settings-shell {
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;

}



.settings-content {
    min-width: 0;

}



.settings-nav {
    position: sticky;
    top: 90px;
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    box-shadow: 0 12px 28px rgb(5 8 18 / 20%);
    max-height: calc(100vh - 120px);
    overflow: hidden;

}



.settings-nav::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    border: 1px solid rgb(99 102 241 / 15%);
    pointer-events: none;

}



.settings-search {
    position: relative;

}



.settings-search i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;

}



.settings-search .form-input {
    padding-left: 2.6rem;
    border-radius: 999px;
    height: 42px;

}







.settings-quick-actions {
    display: grid;
    gap: 0.5rem;

}



.settings-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;

}



.settings-card-header .btn {
    border-radius: 999px;
    padding: 0.35rem 0.85rem;

}



.settings-card {
    position: relative;

}



#settings .settings-card {
    background: linear-gradient(160deg, rgb(255 255 255 / 3%), rgb(15 23 42 / 60%));
    border: 1px solid rgb(148 163 184 / 18%);
    box-shadow: 0 18px 36px rgb(5 8 18 / 26%);

}



#settings .settings-card-header h3,

#settings .settings-card-header h4 {
    letter-spacing: -0.01em;

}



.preset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;

}



.preset-chip {
    border: 1px solid rgb(148 163 184 / 35%);
    background: rgb(255 255 255 / 5%);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.55rem 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;

}



.preset-chip.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 18px rgb(79 92 251 / 25%);

}



.week-schedule {
    display: grid;
    gap: 0.5rem;

}



.week-schedule-row {
    display: grid;
    grid-template-columns: 42px auto 1fr 1fr;
    gap: 0.5rem;
    align-items: center;
    background: rgb(255 255 255 / 4%);
    border-radius: 12px;
    padding: 0.4rem 0.5rem;

}



.week-schedule-row span {
    font-weight: 600;
    color: var(--text-secondary);

}



.week-schedule-row .form-input {
    min-width: 0;
    height: 36px;

}



.snapshot-list {
    margin-top: 0.6rem;
    display: grid;
    gap: 0.5rem;

}



.snapshot-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--glass-border);

}



.snapshot-actions {
    display: flex;
    gap: 0.4rem;

}



.feature-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.6rem;

}



.diagnostics-panel {
    display: grid;
    gap: 0.6rem;
    padding: 0.6rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgb(255 255 255 / 3%);

}



.diagnostics-log-list {
    max-height: 180px;
    overflow-y: auto;
    display: grid;
    gap: 0.35rem;

}



.diagnostics-log-item {
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    background: rgb(255 255 255 / 4%);
    font-size: 0.78rem;
    color: var(--text-secondary);

}



.diagnostics-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;

}



.diagnostics-perf {
    display: grid;
    gap: 0.35rem;

}



.diagnostics-perf-list {
    display: grid;
    gap: 0.35rem;

}



.diagnostics-perf-item {
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    background: rgb(255 255 255 / 4%);
    font-size: 0.78rem;
    color: var(--text-secondary);

}



.btn.is-loading {
    cursor: progress;
    opacity: 0.85;

}



.btn.is-loading .fa-rotate {
    animation: spin 1s linear infinite;

}



/* Music expanded volume + active states */

.expanded-control-btn.active,

.expanded-extra-btn.active {
    background: rgb(79 92 251 / 20%);
    color: var(--primary);

}



.expanded-volume {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem;

}



.expanded-volume input[type="range"] {
    width: 110px;
    accent-color: var(--primary);

}



@media (width <= 768px) {
    .timer-type-selector {
        grid-template-columns: 1fr;

    }



    .note-editor-toolbar {
        gap: 0.3rem;

    }



    .expanded-volume input[type="range"] {
        width: 90px;

    }

}



/* Notes upgrade */

.notes-toolbar {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.2fr auto;
    gap: 0.75rem;
    align-items: center;

}



.notes-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.notes-search {
    position: relative;

}



.notes-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);

}



.notes-search input {
    padding-left: 2.5rem;

}



.notes-filters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;

}



.notes-view-toggle {
    display: flex;
    gap: 0.35rem;

}



.notes-view-toggle .btn {
    padding: 0.45rem 0.65rem;

}



.notes-view-toggle .btn.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border-color: transparent;

}



.notes-meta {
    text-align: right;

}



.notes-grid.list-view {
    display: flex;
    flex-direction: column;

}



.notes-grid.list-view .note-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;

}



.notes-grid.list-view .note-content,

.notes-grid.list-view .note-tags {
    grid-column: 1 / -1;

}



.notes-grid.virtualized {
    gap: 0;

}



.notes-grid.virtualized .note-card {
    margin-bottom: 1rem;

}



.notes-grid .virtual-spacer {
    width: 100%;
    pointer-events: none;
    grid-column: 1 / -1;

}



.note-card {
    position: relative;
    overflow: hidden;

}



.note-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    opacity: 0.7;

}



.note-card[data-color="emerald"]::before { background: #10b981; }

.note-card[data-color="amber"]::before { background: #f59e0b; }

.note-card[data-color="rose"]::before { background: #f43f5e; }

.note-card[data-color="sky"]::before { background: #38bdf8; }



.note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;

}



.note-tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgb(99 102 241 / 16%);
    color: var(--primary);

}



.note-badges {
    display: flex;
    gap: 0.35rem;
    align-items: center;

}



.note-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgb(16 185 129 / 16%);
    color: var(--secondary);

}



.notes-modal {
    max-width: 720px;

}



.notes-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;

}



.notes-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}



.notes-toggle-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;

}

.note-template-row {
    margin-top: -0.25rem;
}

.note-template-row .form-group {
    margin-bottom: 0;
}











.note-preview {
    border: 1px dashed var(--border);
    border-radius: 16px;
    padding: 1rem;
    background: rgb(255 255 255 / 2%);

}



.preview-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;

}



.preview-body {
    color: var(--text-secondary);
    white-space: pre-wrap;

}



.notes-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;

}



@media (width <= 900px) {
    .notes-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;

    }



    .notes-meta {
        text-align: left;

    }

}



@media (width <= 768px) {
    .notes-actions {
        width: 100%;
        justify-content: space-between;

    }



    .notes-view-toggle {
        margin-left: auto;

    }



    .notes-modal {
        max-width: 100%;

    }

}



.now-playing-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgb(0 0 0 / 60%);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.3rem;

}



.equalizer {
    display: inline-flex;
    gap: 2px;

}



.equalizer span {
    width: 3px;
    height: 8px;
    background: #fff;
    display: inline-block;
    border-radius: 2px;
    animation: eq 0.8s ease-in-out infinite;

}



.equalizer span:nth-child(2) { animation-delay: 0.1s; }

.equalizer span:nth-child(3) { animation-delay: 0.2s; }



@keyframes eq {

    0%, 100% { height: 6px; opacity: 0.7; }

    50% { height: 12px; opacity: 1; }

}



.track-details h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}



.track-details p {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;

}



.track-duration {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 0.25rem;

}



/* Notifications */

.notification-item {
    background: var(--surface);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid var(--primary);
    transition: all 0.3s ease;

}



.notification-item:hover {
    transform: translateX(4px);
    background: var(--surface-light);

}



.notification-item.unread {
    background: var(--glass-bg);
    border-left-color: var(--accent);

}



.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;

}



.notification-title {
    font-weight: 600;
    color: var(--text-primary);

}



.notification-time {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.notification-message {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;

}



/* System banners */

.system-banner {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    background: rgb(15 23 42 / 90%);
    border: 1px solid rgb(148 163 184 / 20%);
    color: var(--text-primary);
    box-shadow: 0 14px 30px rgb(2 6 23 / 35%);
    z-index: 2400;

}



.system-banner.update-banner {
    bottom: 64px;
    gap: 0.75rem;

}



.system-banner i {
    color: var(--primary);

}



@media (width <= 768px) {
    .system-banner {
        left: 12px;
        right: 12px;
        transform: none;
        justify-content: center;
        text-align: center;

    }

}



/* Dashboard card playground */

#dashboard .glass-card.card-playground {
    position: relative;
    transform-style: preserve-3d;

}



#dashboard .card-inner {
    position: relative;
    min-height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;

}



#dashboard .card-front,

#dashboard .card-back {
    backface-visibility: hidden;

}



#dashboard .card-back {
    position: absolute;
    inset: 0;
    padding: var(--card-pad);
    border-radius: inherit;
    background: linear-gradient(150deg, rgb(15 23 42 / 95%), rgb(10 16 28 / 90%));
    border: 1px solid rgb(148 163 184 / 18%);
    transform: rotateY(180deg);
    display: grid;
    gap: 1rem;
    align-content: start;

}



#dashboard .glass-card.card-flipped .card-inner {
    transform: rotateY(180deg);

}



#dashboard .card-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;

}



#dashboard .card-control-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgb(148 163 184 / 20%);
    background: rgb(15 23 42 / 70%);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



#dashboard .card-control-btn:active {
    transform: scale(0.98);

}



#dashboard .card-playground.dragging {
    transform: scale(0.99);
    opacity: 0.95;
    box-shadow: 0 24px 60px rgb(0 0 0 / 35%);
    z-index: 20;

}



body.dashboard-edit-mode #dashboard .card-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);

}



body.dashboard-edit-mode #dashboard .glass-card {
    outline: 1px dashed rgb(148 163 184 / 35%);
    outline-offset: 2px;

}



#dashboard .card-control-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgb(0 0 0 / 25%);

}



#dashboard .card-size-label {
    font-weight: 600;
    color: var(--text-primary);

}



#dashboard .card-back-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;

}



#dashboard .card-back-grid span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);

}



#dashboard .card-back-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

}



#dashboard .card-hidden {
    display: none !important;

}



body.dashboard-edit-mode #dashboard .card-hidden {
    display: block !important;

}



#dashboard .card-disabled {
    opacity: 0.45;
    filter: grayscale(0.6);

}



#dashboard .card-control-btn[data-card-action="show"] {
    display: none;

}



#dashboard .card-hidden .card-control-btn[data-card-action="hide"] {
    display: none;

}



#dashboard .card-hidden .card-control-btn[data-card-action="show"] {
    display: grid;

}



#dashboard .card-expanded {
    position: fixed;
    inset: 12vh 8vw;
    max-width: min(1100px, 90vw);
    margin: 0 auto;
    z-index: 3000;
    overflow: auto;

}



#dashboard .card-expanded .card-controls {
    top: 18px;
    right: 18px;

}



.dashboard-card-overlay {
    position: fixed;
    inset: 0;
    background: rgb(6 10 24 / 65%);
    backdrop-filter: blur(8px);
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;

}



.dashboard-card-overlay.active {
    opacity: 1;
    pointer-events: auto;

}



.card-size-sm {
    grid-column: span 1;

}



.card-size-md {
    grid-column: span 1;

}



.card-size-lg {
    grid-column: span 2;

}





.dashboard-edit-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.25rem;
    background: linear-gradient(140deg, rgb(99 102 241 / 16%), rgb(15 23 42 / 70%));
    border: 1px solid rgb(99 102 241 / 30%);

}



.dashboard-edit-hint p {
    margin: 0.25rem 0 0;

}



@media (width <= 900px) {
    .dashboard-edit-hint {
        flex-direction: column;
        align-items: flex-start;

    }

}



@media (width <= 900px) {
    #dashboard .card-controls {
        top: 10px;
        right: 10px;

    }



    #dashboard .card-control-btn {
        width: 28px;
        height: 28px;
        border-radius: 9px;

    }



    #dashboard .card-expanded {
        inset: 10vh 4vw 12vh;

    }



    .card-size-lg {
        grid-column: span 1;

    }

}



/* Project Hub + Timer Context */

.project-hub-card .form-group {
    margin-bottom: 0.6rem;

}

.project-hub-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;

}

.project-hub-actions .form-input {
    min-height: 44px;

}

.project-hub-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;

}

.project-hub-quick .btn {
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;

}



.project-hub-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.75rem;

}



.project-hub-stat {
    padding: 0.5rem 0.65rem;
    border-radius: 14px;
    background: rgb(12 18 34 / 60%);
    border: 1px solid rgb(148 163 184 / 18%);
    display: grid;
    gap: 0.2rem;
    font-size: 0.85rem;

}



.project-hub-stat strong {
    font-size: 1rem;
    color: var(--text-primary);

}



.project-hub-list {
    display: grid;
    gap: 0.5rem;
    max-height: 280px;
    overflow: auto;

}



.project-hub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 14px;
    background: rgb(15 23 42 / 55%);
    border: 1px solid rgb(148 163 184 / 16%);
    font-size: 0.85rem;

}



.project-hub-item .item-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;

}



.project-hub-item .item-type {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgb(148 163 184 / 25%);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);

}

.core-advisor-card {
    display: grid;
    gap: 0.8rem;

}

.core-advisor-list {
    display: grid;
    gap: 0.6rem;

}

.core-advisor-item {
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    display: grid;
    gap: 0.35rem;

}

.core-advisor-title {
    font-weight: 600;

}

.core-advisor-desc {
    color: var(--text-tertiary);
    font-size: 0.82rem;

}

.core-advisor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

}

.core-advisor-actions .btn {
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;

}



.timer-context-card .form-row {
    gap: 0.75rem;

}



.timer-context-card .form-group {
    margin-bottom: 0.6rem;

}



/* Settings input polish */

#settings .form-group {
    margin-bottom: 0.9rem;

}



#settings .form-label {
    font-weight: 600;
    letter-spacing: 0.01em;

}



#settings .form-input,

#settings .form-textarea,

#settings .form-select {
    background: linear-gradient(145deg, rgb(17 24 39 / 92%), rgb(12 18 34 / 95%));
    border: 1px solid rgb(148 163 184 / 25%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);

}



#settings .form-input:hover,

#settings .form-textarea:hover,

#settings .form-select:hover {
    border-color: rgb(148 163 184 / 45%);

}



#settings .form-input:focus,

#settings .form-textarea:focus,

#settings .form-select:focus {
    border-color: color-mix(in srgb, var(--primary) 70%, #fff 10%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent);
    background: linear-gradient(145deg, rgb(18 26 44 / 98%), rgb(12 18 34 / 98%));

}



#settings .form-input::placeholder,

#settings .form-textarea::placeholder {
    color: rgb(148 163 184 / 60%);

}



#settings select.form-input,

#settings select.form-select {
    appearance: none;
    background-image:

        linear-gradient(45deg, transparent 50%, rgb(148 163 184 / 80%) 50%),

        linear-gradient(135deg, rgb(148 163 184 / 80%) 50%, transparent 50%),

        linear-gradient(to right, rgb(148 163 184 / 20%), rgb(148 163 184 / 20%));
    background-position:

        calc(100% - 18px) calc(50% - 3px),

        calc(100% - 12px) calc(50% - 3px),

        calc(100% - 2.25rem) 50%;
    background-size: 6px 6px, 6px 6px, 1px 60%;
    background-repeat: no-repeat;
    padding-right: 2.5rem;

}



#settings input[type="time"].form-input,

#settings input[type="date"].form-input {
    letter-spacing: 0.02em;

}



#settings input[type="range"].form-input {
    height: 6px;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(99 102 241 / 40%), rgb(56 189 248 / 40%));
    border: 1px solid rgb(148 163 184 / 20%);

}



#settings input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgb(99 102 241 / 90%);
    box-shadow: 0 4px 10px rgb(2 6 23 / 35%);

}



#settings input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgb(99 102 241 / 90%);
    box-shadow: 0 4px 10px rgb(2 6 23 / 35%);

}



#settings .text-tertiary {
    color: color-mix(in srgb, var(--text-tertiary) 85%, transparent);

}



#settings .settings-card {
    border-radius: 22px;
    border: 1px solid rgb(148 163 184 / 18%);
    background: linear-gradient(160deg, rgb(12 18 34 / 92%), rgb(10 14 26 / 98%));
    box-shadow: 0 18px 40px rgb(2 6 23 / 40%);

}



#settings .settings-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgb(148 163 184 / 15%);
    margin-bottom: 0.85rem;

}



#settings .settings-card-header h3 {
    font-size: 1rem;
    letter-spacing: 0.02em;

}



#settings .settings-card .form-row {
    gap: 0.8rem;

}



#settings .form-group small,

#settings .form-helper {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;

}



#settings .toggle-switch {
    width: 56px;
    height: 30px;

}



#settings .toggle-slider::before {
    width: 22px;
    height: 22px;

}



#settings input:checked + .toggle-slider::before {
    transform: translateX(26px);

}



#settings .toggle-row {
    background: rgb(15 23 42 / 50%);
    border: 1px solid rgb(148 163 184 / 18%);
    padding: 0.45rem 0.6rem;
    border-radius: 12px;

}



#settings .toggle-row input {
    width: 18px;
    height: 18px;

}



#settings .settings-topbar {
    background: rgb(10 14 26 / 70%);
    border: 1px solid rgb(148 163 184 / 15%);
    border-radius: 18px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 16px 30px rgb(2 6 23 / 30%);

}



#settings .settings-search {
    background: rgb(12 18 34 / 90%);
    border: 1px solid rgb(148 163 184 / 20%);
    border-radius: 14px;
    padding: 0.55rem 0.7rem;

}



#settings .settings-search input {
    background: transparent;
    border: none;
    padding: 0.4rem 0.6rem;

}



#settings .settings-tabs .settings-tab {
    border-radius: 999px;
    border: 1px solid rgb(148 163 184 / 20%);
    background: rgb(12 18 34 / 60%);

}



#settings .settings-tabs .settings-tab.active {
    background: linear-gradient(135deg, rgb(99 102 241 / 35%), rgb(56 189 248 / 30%));
    border-color: rgb(99 102 241 / 60%);
    color: #fff;

}



@media (width <= 900px) {
    #settings .settings-topbar {
        padding: 0.85rem 1rem;

    }

}



/* Mobile Music Player Styles */

.mobile-music-player {
    position: fixed;
    bottom: 0;
    left: 10px;
    right: 10px;
    background: rgb(14 18 28 / 92%);
    backdrop-filter: blur(18px);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 18px;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 16px 30px rgb(0 0 0 / 25%);
    display: block;
    pointer-events: none;

}



.mobile-music-player.active {
    transform: translateY(0);
    bottom: 64px;
    pointer-events: auto;

}



.mobile-progress-container {
    height: 3px;
    background: rgb(255 255 255 / 8%);
    width: 100%;
    cursor: pointer;
    border-radius: 999px;

}



.mobile-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary);
    transition: width 0.1s linear;

}



.mobile-player-content {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding: 10px 12px;
    min-height: 64px;
    gap: 8px;

}



.mobile-track-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    cursor: pointer;

}



.mobile-track-image {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;

}



.mobile-track-details {
    flex: 1;
    min-width: 0;

}



.mobile-track-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;

}



.mobile-track-artist {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}



.mobile-player-controls {
    display: flex;
    align-items: center;
    gap: 10px;

}



.mobile-extra-controls {
    display: flex;
    align-items: center;
    gap: 8px;

}



@media (width <= 480px) {
    .mobile-player-content {
        grid-template-columns: 1fr auto;
        row-gap: 6px;

    }



    .mobile-player-controls {
        grid-column: 2 / 3;
        justify-self: end;

    }



    .mobile-extra-btn {
        grid-column: 2 / 3;
        justify-self: end;
        margin-left: 4px;

    }



    .mobile-extra-controls {
        grid-column: 2 / 3;
        justify-self: end;

    }

}



.mobile-control-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(99 102 241 / 90%), rgb(99 102 241 / 60%));
    border: 1px solid rgb(255 255 255 / 12%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    box-shadow: 0 8px 16px rgb(15 23 42 / 25%);

}



.mobile-extra-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgb(255 255 255 / 12%);
    background: rgb(255 255 255 / 6%);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;

}



.mobile-extra-btn:hover {
    background: rgb(255 255 255 / 12%);
    color: var(--text-primary);

}



.mobile-close-btn {
    background: rgb(255 255 255 / 8%);

}



.mobile-control-btn:hover {
    transform: scale(1.05);

}



.mobile-control-btn:active {
    transform: scale(0.95);

}



.mobile-player-expanded {
    display: none;
    padding: 16px;
    border-top: 1px solid var(--glass-border);
    background: var(--glass-bg);

}



.mobile-player-expanded.active {
    display: block;
    animation: slideUp 0.3s ease;

}



.expanded-header {
    display: flex;
    align-items: center;
    gap: 12px;

}



.expanded-track-image {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;

}



.expanded-track-info h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);

}



.expanded-track-info p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);

}



.expand-close {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

}



.expanded-progress {
    margin: 14px 0 10px;
    cursor: pointer;

}



.expanded-progress-bar {
    height: 4px;
    width: 0%;
    background: var(--primary);
    border-radius: 999px;

}



.expanded-extra-btn.active {
    color: var(--accent);
    border-color: rgb(168 85 247 / 40%);
    background: rgb(168 85 247 / 12%);

}



.expanded-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 6px;

}



.expanded-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;

}



.expanded-control-btn,

.expanded-play-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;

}



.expanded-play-btn {
    background: var(--primary);
    color: white;

}



.expanded-extra-controls {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;

}



.expanded-extra-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-light);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;

}



@keyframes pulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.05); }

    100% { transform: scale(1); }

}



.mobile-music-player.playing .mobile-track-image {
    animation: pulse 2s ease-in-out infinite;

}



@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;

    }

    to {
        transform: translateY(0);
        opacity: 1;

    }

}



.mobile-music-player {
    animation: slideInUp 0.3s ease-out;

}



/* Enhanced music track styling */

.music-track.playing {
    border: 2px solid var(--primary);
    background: var(--glass-bg);
    box-shadow: 0 12px 28px rgb(0 0 0 / 18%);

}



.music-track.playing .track-cover {
    animation: pulse 2s ease-in-out infinite;

}



/* Energy selector container */

#energy-selector {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;

}



.energy-chip {
    flex: 1 1 0;
    min-width: 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid rgb(148 163 184 / 30%);
    background: rgb(148 163 184 / 8%);
    color: var(--text-secondary);
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;

}



.energy-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgb(15 23 42 / 20%);
    border-color: rgb(99 102 241 / 35%);

}



.energy-chip.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 10px 20px rgb(99 102 241 / 25%);

}



.energy-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgb(148 163 184 / 60%);
    box-shadow: 0 0 0 4px rgb(148 163 184 / 15%);

}



.energy-dot.low {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgb(34 197 94 / 20%);

}



.energy-dot.medium {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgb(245 158 11 / 20%);

}



.energy-dot.high {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgb(239 68 68 / 20%);

}



.energy-chip.active .energy-dot {
    background: #fff;
    box-shadow: 0 0 0 4px rgb(255 255 255 / 20%);

}



/* Mobile Profile Styles */

#mobile-profile {
    display: none;

}



@media (width <= 768px) {
    .section-brand {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;

    }



    .section-brand-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        padding: 4px;
        object-fit: contain;
        box-shadow: 0 8px 16px rgb(0 0 0 / 20%);

    }



    .section-brand-name {
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--text-primary);

    }



    .mobile-brand {
        display: none;

    }



    #mobile-profile {
        display: block;
        padding: 1rem;

    }

    

    .section-header-back {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.5rem;

    }

    

    .btn-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text);
        font-size: 1rem;

    }

    

    .profile-avatar-container {
        text-align: center;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border);

    }



.profile-hero-card {
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid rgb(255 255 255 / 8%);
    background:

        radial-gradient(600px 200px at 0% 0%, rgb(99 102 241 / 16%), transparent),

        linear-gradient(160deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%));
    box-shadow: 0 18px 40px rgb(8 14 25 / 30%);

}

.profile-snapshot-card {
    display: grid;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
    border-radius: 22px;
    background: linear-gradient(140deg, rgb(12 18 28 / 90%), rgb(10 15 24 / 70%));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
    box-shadow: 0 20px 48px rgb(6 12 22 / 40%);
}

.profile-snapshot-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

.profile-snapshot-meta h3 {
    font-size: 1.2rem;
    margin: 0;
}

.profile-snapshot-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.profile-snapshot-tier {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgb(30 166 140 / 18%);
    border: 1px solid rgb(30 166 140 / 40%);
    color: #e2f3ee;
}

.profile-snapshot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.profile-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgb(15 23 42 / 55%);
    border: 1px solid rgb(148 163 184 / 20%);
    font-size: 0.85rem;
}

.profile-snapshot-actions {
    display: grid;
    gap: 0.5rem;
    justify-items: end;
}

.profile-snapshot-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.profile-snapshot-stat {
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: rgb(12 18 26 / 70%);
    border: 1px solid rgb(148 163 184 / 18%);
    display: grid;
    gap: 0.3rem;
}

.profile-snapshot-stat span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}

.profile-snapshot-stat strong {
    font-size: 1.05rem;
}

.profile-identity-card,
.profile-dna-card,
.profile-actions-card {
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(150deg, rgb(12 18 26 / 92%), rgb(10 14 22 / 78%));
    box-shadow: 0 18px 36px rgb(5 10 18 / 35%);
}

.profile-identity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.profile-identity-item {
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    background: rgb(10 16 24 / 70%);
    border: 1px solid rgb(148 163 184 / 18%);
    display: grid;
    gap: 0.3rem;
}

.profile-identity-item span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}

.profile-identity-item strong {
    font-size: 0.95rem;
}

.profile-dna-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.profile-dna-chip {
    padding: 0.6rem 0.8rem;
    border-radius: 999px;
    background: rgb(15 23 42 / 70%);
    border: 1px solid rgb(148 163 184 / 20%);
    font-weight: 600;
    font-size: 0.85rem;
}

.profile-actions-row {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.mobile-profile-snapshot .profile-snapshot-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}



.profile-hero-card .profile-avatar-container {
    padding: 0.5rem 0;
    border-bottom: none;

}



.profile-hero {
    display: flex;
    align-items: center;
        gap: 1.25rem;
        flex-wrap: wrap;

    }



    .profile-hero-meta {
        flex: 1 1 200px;
        display: grid;
        gap: 0.6rem;

    }



    .profile-hero-meta h3 {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 700;

    }



    .profile-badges {
        display: flex;
        gap: 0.6rem;
        flex-wrap: wrap;

    }



    .profile-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        background: rgb(255 255 255 / 8%);
        color: var(--text-secondary);
        font-size: 0.8rem;

    }



    .profile-hero-hint {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.75rem;

    }



.profile-form-card {
    margin-top: 0.9rem;
    border-radius: 20px;
    border: 1px solid rgb(255 255 255 / 8%);
    background: linear-gradient(160deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 0%));
    box-shadow: 0 14px 32px rgb(8 14 25 / 25%);

}

    

.profile-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: grid;
    place-items: center;
    font-size: 3rem;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;

}

    

    .input-with-icon {
        position: relative;
        display: flex;
        align-items: center;

    }

    

    .input-with-icon i {
        position: absolute;
        left: 1rem;
        color: var(--text-secondary);

    }

    

    .input-with-icon input {
        padding-left: 3rem;
        width: 100%;

    }



    .input-with-icon select {
        padding-left: 3rem;
        width: 100%;
        background: var(--surface);
        color: var(--text-primary);
        border: 1px solid var(--border);
        border-radius: 12px;
        height: 46px;

    }

    

    .form-helper {
        font-size: 0.875rem;
        color: var(--text-tertiary);
        margin-top: 0.25rem;

    }

    

    .avatar-preview-container {
        background: var(--surface-variant);
        border-radius: var(--radius);
        padding: 1rem;

    }

    

    .avatar-preview-label {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;

    }

    

    .avatar-preview-grid {
        display: flex;
        gap: 1rem;
        justify-content: center;

    }

    

    .avatar-preview-item {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        background-color: var(--surface);
        border: 2px solid var(--border);
        position: relative;

    }

    

    .avatar-preview-item .avatar-preview-label {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 0.75rem;

    }

    

    .message {
        display: flex;
        gap: 1rem;
        padding: 1rem;
        border-radius: var(--radius);
        background: var(--info-bg);
        border-left: 4px solid var(--info);

    }

    

    .message i {
        color: var(--info);
        font-size: 1.25rem;

    }

    

    .message-title {
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: var(--info);

    }

    

    .message-content {
        font-size: 0.875rem;
        color: var(--text-secondary);

    }

    

    .form-actions {
        display: flex;
        flex-direction: column;

    }

    

    .btn-block {
        width: 100%;
        justify-content: center;

    }

    

    .points-info {
        display: flex;
        flex-direction: column;
        gap: 1rem;

    }

    

    .points-item {
        display: flex;
        gap: 1rem;
        align-items: flex-start;

    }

    

    .points-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--primary-light);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

    }

    

    .points-content h4 {
        margin-bottom: 0.25rem;
        color: var(--text);

    }

    

    .points-content p {
        font-size: 0.875rem;
        color: var(--text-secondary);

    }

}



/* Desktop profile section */

.profile-desktop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 1.75rem;

}

.profile-desktop-grid .profile-snapshot-card,
.profile-desktop-grid .profile-identity-card,
.profile-desktop-grid .profile-dna-card {
    grid-column: 1;
}

.profile-desktop-form-card {
    grid-column: 2;
    grid-row: 1 / span 3;
}



.profile-desktop-hero {
    display: grid;
    gap: 1.1rem;
    align-content: start;
    padding: 1.75rem;
    border-radius: 22px;
    background:

        radial-gradient(1200px 200px at 0% 0%, rgb(99 102 241 / 18%), transparent),

        linear-gradient(150deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 0%));
    border: 1px solid rgb(255 255 255 / 10%);
    box-shadow: 0 22px 50px rgb(8 14 25 / 40%);

}



.profile-desktop-avatar {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 34px rgb(15 23 42 / 35%);
    position: relative;
    overflow: hidden;

}



.store-item {
    position: relative;
    overflow: hidden;

}



.store-item[data-item="theme"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--theme-swatch, rgb(255 255 255 / 20%));

}



.store-item[data-item="theme"][data-id="gold"] { --theme-swatch: linear-gradient(90deg, #8d6a17, #f7d774); }

.store-item[data-item="theme"][data-id="coffee"] { --theme-swatch: linear-gradient(90deg, #3a2415, #a16b3c); }

.store-item[data-item="theme"][data-id="rose"] { --theme-swatch: linear-gradient(90deg, #7a1f3b, #f3a6b6); }

.store-item[data-item="theme"][data-id="mint"] { --theme-swatch: linear-gradient(90deg, #1e5a52, #86e3c2); }

.store-item[data-item="theme"][data-id="midnight"] { --theme-swatch: linear-gradient(90deg, #0b1325, #3a4b77); }

.store-item[data-item="theme"][data-id="nebula"] { --theme-swatch: linear-gradient(90deg, #2a0f4a, #8a4bff); }

.store-item[data-item="theme"][data-id="ember"] { --theme-swatch: linear-gradient(90deg, #4a0b0b, #ff7a3d); }

.store-item[data-item="theme"][data-id="aurora"] { --theme-swatch: linear-gradient(90deg, #0f3c3a, #5fe3c0); }

.store-item[data-item="theme"][data-id="sapphire"] { --theme-swatch: linear-gradient(90deg, #0c2a4a, #3bb0ff); }


.store-item[data-item="theme"][data-id="noir"] { --theme-swatch: linear-gradient(90deg, #0b0f1a, #3dd9ff); }

.store-item[data-item="theme"][data-id="solar"] { --theme-swatch: linear-gradient(90deg, #2a1508, #ffb347); }


.store-item[data-item="theme"][data-id="paper"] { --theme-swatch: linear-gradient(90deg, #f6f2ea, #2f6bff); }




.store-item.locked-tier {
  opacity: 0.6;
  filter: grayscale(0.2);

}



.store-item.locked-tier .store-buy {
  cursor: not-allowed;

}



.store-item[data-item="badge"]::before {
    content: "\f005";
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    color: #fff;
    background: rgb(255 255 255 / 16%);
    border: 1px solid rgb(255 255 255 / 20%);

}



.store-item[data-item="badge"][data-id="focus"]::before { content: "\f140"; background: #4f8cff; }

.store-item[data-item="badge"][data-id="star"]::before { content: "\f005"; background: #f6c343; }

.store-item[data-item="badge"][data-id="writer"]::before { content: "\f5ad"; background: #8b6cff; }

.store-item[data-item="badge"][data-id="phoenix"]::before { content: "\f06d"; background: #ff6b3d; }

.store-item[data-item="badge"][data-id="nova"]::before { content: "\f753"; background: #ff9f1a; }

.store-item[data-item="badge"][data-id="atlas"]::before { content: "\f57d"; background: #4fd1c5; }

.store-item[data-item="badge"][data-id="zen"]::before { content: "\f5bb"; background: #7fd38d; }

.store-item[data-item="badge"][data-id="pulse"]::before { content: "\f21e"; background: #ff4d6d; }

.store-item[data-item="badge"][data-id="aether"]::before { content: "\f0c2"; background: #5aa9e6; }

.store-item[data-item="badge"][data-id="vip"]::before { content: "\f521"; background: #caa14a; }

.store-item[data-item="badge"][data-id="apex"]::before { content: "\f6fc"; background: #8ad3ff; }



.profile-desktop-meta h3 {
    margin: 0;
    font-size: 1.55rem;

}



.profile-desktop-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;

}



.profile-stat {
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 12%);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

}



.profile-desktop-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;

}



.profile-desktop-form-card {
    padding: 1.75rem;
    border-radius: 22px;
    border: 1px solid rgb(255 255 255 / 10%);
    background:

        radial-gradient(900px 260px at 100% 0%, rgb(14 165 233 / 10%), transparent),

        linear-gradient(160deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%));
    box-shadow: 0 20px 46px rgb(8 14 25 / 35%);

}



.profile-desktop-form-card .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;

}



.profile-desktop-form-card .form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;

}



@media (width <= 1024px) {
    .profile-desktop-grid {
        grid-template-columns: 1fr;

    }

    .profile-desktop-form-card {
        grid-column: 1;
        grid-row: auto;
    }

}



@media (width <= 768px) {
    #profile {
        display: none !important;

    }

}



@media (width >= 769px) {
    #mobile-profile {
        display: none !important;

    }

}



.profile-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.2rem;

}



.profile-highlight-card {
    padding: 0.75rem;
    border-radius: 12px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--glass-border);
    display: grid;
    gap: 0.25rem;

}



.profile-modal .form-group {
    margin-bottom: 0;

}



.profile-modal .form-group.full {
    grid-column: 1 / -1;

}



@media (width >= 768px) {
    .profile-modal form {
        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.profile-modal button[type="submit"] {
    width: 100%;

}



.close-btn2 {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;

}



.close-btn2:hover {
    color: #333;

}



.modal2 h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--text-primary);

}



.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    background-size: cover;
    background-position: center;
    margin: 0 auto 1rem;
    border: 2px solid #fff;
    box-shadow: 0 4px 15px rgb(0 0 0 / 15%);
    position: relative;
    overflow: hidden;

}



@media (width >= 769px) {
    .header-profile-btn,

    .header-profile-avatar,

    .profile-desktop-avatar,

    .profile-avatar-large,

    .avatar-preview,

    .avatar-fallback,

    .avatar-img {
        border-radius: 0 !important;

    }



    .header-profile-btn,

    .header-profile-avatar,

    .profile-desktop-avatar,

    .profile-avatar-large,

    .avatar-preview {
        overflow: hidden;

    }

}



.avatar-dropzone {
    border: 1.5px dashed rgb(255 255 255 / 20%);
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    background: rgb(255 255 255 / 3%);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;

}



.avatar-dropzone-title {
    font-weight: 600;
    color: var(--text-primary);

}



.avatar-dropzone-subtitle {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;

}



.avatar-dropzone.avatar-dropzone-active {
    border-color: rgb(99 102 241 / 90%);
    background: rgb(99 102 241 / 12%);
    transform: translateY(-1px);

}



.btn-primary2 {
    width: 100%;
    padding: 0.7rem;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.3s ease;

}



.btn-primary2:hover {
    background: var(--accent);

}



/* Widget container */

#focusy-widget {
    position: fixed;
    bottom: -100px;
    right: 20px;
    font-family: Poppins, sans-serif;
    z-index: 9999;
    transition: bottom 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);

}



#focusy-button {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 15px 25px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
    position: relative;
    overflow: hidden;

}



#focusy-button:hover {
    background: linear-gradient(135deg, #2575fc, #6a11cb);

}



#focusy-quotes {
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 250px;
    background: rgb(0 0 0 / 75%);
    color: #fff;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    display: none;
    text-align: center;
    pointer-events: none;

}



#focusy-button:hover + #focusy-quotes {
    display: block;

}



#focusy-chat-container {
    width: 300px;
    height: 400px;
    background: #f4f7fc;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgb(0 0 0 / 20%);
    overflow: hidden;
    display: none;
    flex-direction: column;

}



#focusy-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;

}



#focusy-input {
    border: none;
    padding: 12px;
    border-top: 1px solid #ddd;
    outline: none;
    font-size: 14px;

}



.show-widget {
    bottom: 20px !important;
    animation: jumpIn 0.8s ease;

}



@keyframes jumpIn {

    0% { transform: translateY(100%); }

    60% { transform: translateY(-15%); }

    80% { transform: translateY(5%); }

    100% { transform: translateY(0); }

}



/* Tasks Section */

#tasks {
    padding: 0;
    min-height: 100vh;

    

}



#tasks {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 0 0 auto;
    height: auto;

}



#tasks .tasks-content {
    flex: 0 0 auto;
    min-height: auto;

}



#tasks .task-list-panel,

#tasks .task-list-container,

#tasks .task-list {
    min-height: 0;

}



#tasks .task-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

}

/* ===============================
   Task Manager Production Pass
   =============================== */
#tasks .tasks-content {
    gap: 1.4rem;
}

#tasks .task-list-panel,
#tasks .task-details-panel,
#tasks .task-list-container {
    border-radius: 22px;
    background: linear-gradient(160deg, var(--theme-surface), var(--theme-surface-2));
    border: 1px solid var(--theme-border-soft);
    box-shadow: var(--ui-shadow-soft);
}

#tasks .task-list-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#tasks .toolbar {
    position: sticky;
    top: 0;
    z-index: 4;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--theme-border-soft);
}

#tasks .task-list-header {
    padding: 0.95rem 1.1rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid var(--theme-border-soft);
}

#tasks .task-list {
    flex: 1;
    min-height: 0;
    padding: 0.35rem 0.75rem 1rem;
}

#tasks .task-item {
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 16%, transparent);
    box-shadow: 0 10px 22px rgb(5 8 18 / 18%);
}

#tasks .task-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow-soft);
}

#tasks .task-item.selected {
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--primary) 24%, transparent);
}

#tasks .task-actions .btn-icon {
    border-radius: 12px;
    border: 1px solid var(--theme-border-soft);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
}

#tasks .task-tags .task-tag {
    border-radius: 999px;
    border: 1px solid var(--theme-border-soft);
    padding: 0.2rem 0.6rem;
}

#tasks .task-details-panel {
    padding: 1.2rem 1.3rem;
}

@media (width <= 900px) {
    #tasks .task-list-panel,
    #tasks .task-details-panel,
    #tasks .task-list-container {
        border-radius: 18px;
    }

    #tasks .task-list {
        padding: 0.25rem 0.65rem 1rem;
    }
}



/* Dashboard header button placement */

.section#dashboard .section-header .header-content {
    align-items: center;
    justify-content: stretch;

}



/* Calendar week view (Bootstrap themed) */

.calendar-week-table .table {
  --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgb(148 163 184 / 18%);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: rgb(148 163 184 / 5%);

  margin-bottom: 0;

}



.calendar-week-table thead th {
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;

}



.calendar-week-table tbody tr:hover td,

.calendar-week-table tbody tr:hover th {
  background: rgb(99 102 241 / 8%);

}



.calendar-week-table .week-slot.btn {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid rgb(148 163 184 / 20%);
  color: var(--text-primary);

}



.calendar-week-table .week-slot.btn:hover {
  border-color: rgb(99 102 241 / 50%);
  box-shadow: 0 10px 24px rgb(99 102 241 / 20%);

}



.calendar-week-table .week-slot.has-event {
  background: linear-gradient(135deg, rgb(99 102 241 / 20%), rgb(15 23 42 / 40%));
  border-color: rgb(99 102 241 / 50%);

}



/* Notes editor modern refresh */

.notes-modal {
  background: linear-gradient(180deg, rgb(17 24 39 / 96%), rgb(13 18 32 / 98%));
  border: 1px solid rgb(148 163 184 / 25%);
  box-shadow: 0 24px 60px rgb(5 8 18 / 55%);

}



.note-editor-toolbar {
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgb(148 163 184 / 20%);
  background: rgb(15 23 42 / 60%);

}



.note-editor-toolbar .btn {
  height: 34px;
  width: 34px;
  border-radius: 10px;

}



.note-editor-toolbar .note-font-select {
  min-width: 180px;
  height: 34px;
  border-radius: 10px;
  background: rgb(15 23 42 / 80%);
  border: 1px solid rgb(148 163 184 / 25%);
  color: var(--text-primary);

}



.note-editor-toolbar .note-color-input {
  height: 34px;
  width: 34px;
  border-radius: 10px;
  border: 1px solid rgb(148 163 184 / 25%);
  background: rgb(15 23 42 / 80%);
  padding: 4px;

}



.note-editor {
  background: rgb(10 15 26 / 75%);
  border: 1px solid rgb(148 163 184 / 20%);
  border-radius: 16px;
  padding: 16px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%);
  font-size: var(--note-font-size, 16px);
  line-height: var(--note-line-height, 1.5);
  letter-spacing: var(--note-letter-spacing, 0);

}



.note-editor:focus {
  border-color: rgb(99 102 241 / 60%);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 18%);
  outline: none;

}



.note-preview {
  background: rgb(12 17 30 / 60%);
  border: 1px dashed rgb(148 163 184 / 25%);

}



#note-preview-body {
  font-size: var(--note-font-size, 16px);
  line-height: var(--note-line-height, 1.5);
  letter-spacing: var(--note-letter-spacing, 0);

}



.note-preview .preview-label {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;

}



/* Analytics: Weekly Focus Trend */

.analytics-tree-card .card-header {
  align-items: center;
  gap: 8px;

}



.focus-trend {
  display: flex;
  flex-direction: column;
  gap: 16px;

}



.trend-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  height: 170px;
  padding: 16px 12px 28px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(17 24 39 / 70%), rgb(10 15 26 / 90%));
  border: 1px solid rgb(148 163 184 / 20%);
  position: relative;
  overflow: hidden;

}



.trend-bar {
  position: relative;
  width: 100%;
  min-height: 12%;
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(99 102 241 / 90%), rgb(139 92 246 / 85%));
  box-shadow: 0 8px 20px rgb(79 70 229 / 25%);
  transition: transform 0.2s ease, filter 0.2s ease;

}



.trend-bar:hover {
  transform: translateY(-4px);
  filter: brightness(1.1);

}



.trend-bar::after {
  content: attr(data-hours) "h";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;

}



.trend-bar:hover::after {
  opacity: 1;

}



.trend-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;

}



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

}



/* Header profile button */

.header-profile-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgb(255 255 255 / 6%);
    position: relative !important;
    display: grid;
    place-items: center;
    overflow: hidden !important;

}





.avatar-img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
    display: block;
    position: static !important;
    inset: auto !important;
    pointer-events: none;

}



.header-profile-avatar .avatar-img,

.profile-modal-header .avatar-preview .avatar-img,

.profile-desktop-avatar .avatar-img,

.profile-avatar-large .avatar-img {
    border-radius: inherit;

}



.header-profile-btn .avatar-img,

.header-profile-avatar .avatar-img {
    position: static !important;
    inset: auto !important;
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
    display: block;

}



.avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    pointer-events: none;

}



.profile-modal-header .avatar-preview,

.profile-desktop-avatar,

.profile-avatar-large {
    border-radius: 50%;
    overflow: hidden;
    position: relative;

}



body.pro-active .header-profile-btn,

body.pro-active .profile-desktop-avatar,

body.pro-active .profile-avatar-large,

body.pro-active .user-avatar,

body.pro-active .mobile-user-avatar {
    box-shadow:

        0 0 0 2px rgb(59 130 246 / 60%),

        0 12px 24px rgb(37 99 235 / 22%);

}



body.vip-active .header-profile-btn,

body.vip-active .profile-desktop-avatar,

body.vip-active .profile-avatar-large,

body.vip-active .user-avatar,

body.vip-active .mobile-user-avatar {
    box-shadow:

        0 0 0 2px rgb(250 204 21 / 75%),

        0 0 0 6px rgb(250 204 21 / 12%),

        0 16px 32px rgb(250 204 21 / 25%);

}



body.vip-active .header-profile-btn,

body.vip-active .profile-desktop-avatar,

body.vip-active .user-avatar,

body.vip-active .mobile-user-avatar {
    position: relative;

}



body.vip-active .header-profile-btn::after,

body.vip-active .profile-desktop-avatar::after,

body.vip-active .user-avatar::after,

body.vip-active .mobile-user-avatar::after {
    content: "\f521";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f59e0b, #facc15);
    color: #0f172a;
    box-shadow: 0 8px 16px rgb(250 204 21 / 35%);
    border: 1px solid rgb(255 255 255 / 60%);
    z-index: 2;

}



.profile-modal-header .avatar-preview .avatar-img,

.profile-desktop-avatar .avatar-img,

.profile-avatar-large .avatar-img {
    width: 100% !important;
    height: 100% !important;
    display: block;

}



.profile-modal-header .avatar-preview img,

.profile-desktop-avatar img,

.profile-avatar-large img,

.avatar-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;

}





.avatar-cropper {
    max-width: 520px;
    width: min(92vw, 520px);
    padding: 1.6rem;

}



.avatar-cropper-body {
    display: grid;
    gap: 0.75rem;

}



#avatar-cropper-canvas {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 16px;
    background: rgb(15 23 42 / 60%);
    border: 1px solid rgb(255 255 255 / 12%);
    margin: 0 auto;
    display: block;

}



@media (width >= 769px) {
    .header-profile-tab,

    #sync-btn,

    #notification-btn {
        display: none;

    }

}



.avatar-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 6px 14px rgb(0 0 0 / 20%);
    background: var(--accent);

}



.avatar-badge-lg {
    width: 14px;
    height: 14px;
    border-width: 2.5px;

}



/* Profile info modal */

.profile-info-modal {
    max-width: 520px;

}



.profile-info-body {
    display: grid;
    gap: 1rem;

}



.profile-info-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;

}



.profile-info-card {
    padding: 0.75rem;
    border-radius: 12px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--glass-border);
    display: grid;
    gap: 0.35rem;

}



.profile-info-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}











.support-inbox-list {
    display: grid;
    gap: 0.6rem;

}



.support-inbox-item {
    padding: 0.75rem;
    border-radius: 12px;
    background: rgb(15 23 42 / 45%);
    border: 1px solid var(--glass-border);
    display: grid;
    gap: 0.35rem;

}



.support-inbox-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



.support-inbox-title {
    font-weight: 600;
    color: var(--text-primary);

}



.support-inbox-status {
    font-size: 0.82rem;
    color: var(--text-secondary);

}



.dashboard-edit-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: rgb(15 23 42 / 60%);
    border: 1px solid var(--glass-border);
    margin: 0 0 1rem;
    gap: 1rem;

}



.dashboard-edit-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);

}



.dashboard-edit-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.welcome-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;

}



.daily-login-modal {
    max-width: 520px;
    width: 100%;
    border-radius: 18px;
    background: linear-gradient(145deg, rgb(15 23 42 / 96%), rgb(9 16 32 / 90%));
    border: 1px solid rgb(99 102 241 / 35%);
    box-shadow: 0 24px 48px rgb(6 10 20 / 45%);

}



.daily-login-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;

}

.admin-analytics-list {
    display: grid;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.85rem;

}



.admin-analytics-list .admin-analytics-item {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: rgb(15 23 42 / 55%);
    border-radius: 10px;
    border: 1px solid rgb(148 163 184 / 20%);

}



.admin-analytics-list .admin-analytics-item span {
    color: var(--text-primary);
    font-weight: 600;

}



.admin-section {
    padding-bottom: 2rem;

}



.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;

}







.admin-panels {
    display: grid;
    gap: 1rem;

}



.admin-panel {
    display: none;
    animation: fadeInUp 0.25s ease;

}



.admin-panel.active {
    display: block;

}



.admin-hub-grid {
    margin-bottom: 1rem;

}



.admin-hub-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;

}



.admin-hub-meta {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;

}



.admin-terminal {
    background: #05070d;
    border: 1px solid rgb(148 163 184 / 25%);

}



.admin-terminal-output {
    background: #020409;
    color: #d1fae5;
    border: 1px solid rgb(148 163 184 / 15%);

}



.admin-terminal-line .prompt {
    color: #22c55e;

}



.admin-terminal-input {
    background: #0b1220;
    color: #e2e8f0;

}



.admin-analytics-list .admin-analytics-item {
    position: relative;
    overflow: hidden;

}



.admin-analytics-list .admin-analytics-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--bar, 0%);
    background: linear-gradient(90deg, rgb(99 102 241 / 25%), rgb(99 102 241 / 0%));
    z-index: 0;

}



.admin-analytics-list .admin-analytics-item > div,

.admin-analytics-list .admin-analytics-item > span {
    position: relative;
    z-index: 1;

}



/* Profile sections */

.profile-hero-card {
    background: linear-gradient(140deg, rgb(79 92 251 / 12%), rgb(15 23 42 / 90%));
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 32px rgb(0 0 0 / 20%);

}



.profile-form-card {
    border: 1px solid var(--glass-border);
    background: rgb(255 255 255 / 3%);

}



@media (width <= 768px) {
    .profile-info-stats {
        grid-template-columns: 1fr;

    }

    .profile-highlights {
        grid-template-columns: 1fr;

    }

}



/* Calendar redesign */

.calendar-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    background: linear-gradient(135deg,

        color-mix(in srgb, var(--surface) 88%, transparent),

        color-mix(in srgb, var(--background) 88%, transparent));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);

}



/* Hybrid calendar UX polish */

.section#calendar .calendar-card {
    padding: clamp(0.9rem, 1.1vw, 1.35rem);
    border-radius: clamp(16px, 2vw, 24px);
    gap: clamp(0.75rem, 1.2vw, 1.25rem);

}



.section#calendar .calendar-top {
    align-items: center;
    gap: 0.75rem;

}



.section#calendar .calendar-cta .btn {
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    box-shadow: 0 12px 22px rgb(5 8 18 / 25%);

}



.section#calendar .calendar-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;

}



.section#calendar .calendar-nav {
    justify-self: start;

}



.section#calendar .calendar-view-toggle {
    justify-self: end;

}



.section#calendar .calendar-stack {
    padding: clamp(0.7rem, 1vw, 1rem);
    gap: 0.65rem;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-radius: clamp(14px, 1.8vw, 20px);

}



.section#calendar .calendar-grid {
    min-height: 360px;
    contain: layout paint;

}



.section#calendar .calendar-week,

.section#calendar .calendar-agenda {
    contain: layout paint;

}



.section#calendar .calendar-events-panel {
    min-width: 0;
    border-radius: clamp(14px, 1.8vw, 20px);
    box-shadow: 0 16px 34px rgb(5 10 22 / 24%);

}



.section#calendar .calendar-events-header {
    align-items: center;

}



.section#calendar .calendar-events-header .btn {
    white-space: nowrap;
    border-radius: 999px;

}



.section#calendar .calendar-event-card {
    border-radius: 16px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;

}



@media (hover: hover) and (pointer: fine) {
    .section#calendar .calendar-event-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgb(5 8 18 / 20%);

    }

}



@media (width <= 1100px) {
    .section#calendar .calendar-card {
        grid-template-columns: 1fr;

    }



    .section#calendar .calendar-controls {
        grid-template-columns: 1fr;
        justify-items: stretch;

    }



    .section#calendar .calendar-view-toggle {
        justify-self: stretch;

    }

}



@media (width <= 768px) {
    .section#calendar .calendar-card {
        box-shadow: 0 12px 24px rgb(5 10 22 / 18%);

    }



    .section#calendar .calendar-top {
        align-items: flex-start;

    }



    .section#calendar .calendar-stack {
        padding: 0.6rem;
        background: var(--surface);
        border: 1px solid var(--border);

    }



    .section#calendar .calendar-events-panel {
        box-shadow: 0 10px 20px rgb(5 10 22 / 16%);

    }

}



.calendar-top,

.calendar-controls,

.calendar-toolbar,

.calendar-legend {
    grid-column: 1 / -1;

}



.calendar-stack {
    grid-column: 1 / 2;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0.75rem;

}



.calendar-grid {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border-radius: 16px;
    padding: 0.5rem;

}



.calendar-week {
    display: none;
    width: 100%;

}



.calendar-week-table {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0.35rem;
    box-shadow: 0 18px 36px rgb(5 10 22 / 25%);
    contain: layout paint;

}



.week-time-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;

}



.week-day-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--text-secondary);

}



.week-day-label.today strong {
    background: color-mix(in srgb, var(--primary) 25%, transparent);
    color: var(--text-primary);
    padding: 0.12rem 0.5rem;
    border-radius: 999px;

}



.week-day-label.today span {
    color: var(--primary);

}



.week-day-label.selected strong {
    background: color-mix(in srgb, var(--primary) 35%, transparent);
    color: var(--text-primary);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;

}



.week-day-label.has-event span::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 55%, transparent);

}



.week-day-label strong {
    font-size: 0.95rem;
    color: var(--text-primary);

}



.calendar-week-table table {
    color: var(--text-primary);

}



.calendar-week-table thead th {
    border-bottom: 1px solid rgb(148 163 184 / 20%);
    padding: 0.5rem 0.6rem;

}



.calendar-week-table tbody th,

.calendar-week-table tbody td {
    border-top: 1px solid rgb(148 163 184 / 8%);
    padding: 0.35rem 0.4rem;

}



.week-time {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    align-self: center;
    padding: 0.25rem 0.4rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid var(--glass-border);
    text-align: right;
    white-space: nowrap;

}



.week-slot {
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    min-height: 34px;
    position: relative;
    width: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;

}



.week-slot.has-event {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    background: linear-gradient(135deg, rgb(99 102 241 / 18%), rgb(15 23 42 / 50%));

}



.week-dot {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);

}



.week-slot.is-today {
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);

}



.week-slot.is-selected {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background: linear-gradient(135deg, rgb(168 85 247 / 20%), rgb(15 23 42 / 55%));
    box-shadow: 0 10px 18px rgb(79 92 251 / 22%);

}



.calendar-week-table .week-slot.btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;

}



@media (hover: hover) and (pointer: fine) {
    .calendar-week-table .week-slot.btn:hover {
        transform: translateY(-2px);

    }

}



/* Mobile native weekly layout */

.calendar-week-native {
    display: grid;
    gap: 0.75rem;

}

@media (width >= 901px) {
    .calendar-week-native {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;

    }

    .week-slot-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));

    }
}



.week-day-card {
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    padding: 0.75rem;
    box-shadow: 0 12px 26px rgb(5 10 22 / 20%);

}



.week-day-card.is-today {
    border-color: color-mix(in srgb, var(--primary) 50%, transparent);
    box-shadow: 0 14px 28px rgb(79 92 251 / 20%);

}



.week-day-card.is-selected {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);

}



.week-day-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;

}



.week-day-card-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;

}



.week-day-card-title strong {
    font-size: 1.05rem;
    color: var(--text-primary);
    letter-spacing: 0;

}



.week-day-card-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.week-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;

}



.week-slot.week-chip {
    height: 34px;
    padding: 0;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}



.week-slot.week-chip .week-dot {
    right: 8px;
    top: 6px;

}



@media (width <= 768px) {
    .calendar-week-table {
        box-shadow: 0 12px 24px rgb(5 10 22 / 20%);

    }



    .calendar-week-table tbody th,

    .calendar-week-table tbody td {
        padding: 0.3rem 0.35rem;

    }



    .week-slot {
        min-height: 30px;

    }



    .calendar-week-native {
        gap: 0.65rem;

    }



    .week-slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}

@media (width <= 520px) {
    .week-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



/* Desktop weekly calendar polish */

@media (width >= 901px) {
    .calendar-week-table {
        padding: 0.6rem;
        border-radius: 18px;

    }



    .calendar-week-table thead th {
        padding: 0.7rem 0.8rem;

    }



    .calendar-week-table tbody th,

    .calendar-week-table tbody td {
        padding: 0.5rem 0.6rem;

    }



    .week-time {
        font-size: 0.8rem;
        padding: 0.35rem 0.55rem;
        text-align: right;

    }



    .week-day-label {
        font-size: 0.8rem;
        align-items: flex-start;

    }



    .week-day-label strong {
        font-size: 1rem;

    }



    .week-slot {
        min-height: 44px;
        border-radius: 12px;

    }

}



/* Legal Modal */

.legal-modal {
    max-width: 520px;

}



.legal-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;

}



.legal-summary-grid {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;

}



.legal-summary-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border: 1px solid var(--glass-border);

}



.legal-summary-card i {
    color: var(--primary);
    font-size: 1.1rem;
    margin-top: 0.15rem;

}



.legal-summary-card strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.2rem;

}



.legal-summary-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;

}



.legal-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.8rem;

}



.legal-consent {
    display: grid;
    gap: 0.6rem;

}



.legal-check {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    margin-top: 0.6rem;
    font-size: 0.92rem;

}



.legal-check a {
    color: var(--primary);
    text-decoration: none;

}



.legal-check a:hover {
    text-decoration: underline;

}



.legal-footnote {
    margin-top: 0.75rem;
    font-size: 0.85rem;

}



.week-time {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    align-self: center;
    padding: 0.25rem 0.4rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid var(--glass-border);

}



.week-slot {
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    min-height: 34px;
    position: relative;

}



.week-slot.has-event {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);

}



.week-dot {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);

}



.calendar-day {
    border-radius: 12px;
    border: 1px solid transparent;

}



.calendar-day-header {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);

}



.calendar-day.today {
    box-shadow: 0 12px 22px color-mix(in srgb, var(--primary) 28%, transparent);

}



.calendar-day.selected {
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 26%, transparent);

}



.calendar-event-card {
    background: color-mix(in srgb, var(--surface) 72%, transparent);

}



.calendar-day:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);

}



.calendar-events-panel {
    grid-column: 2 / 3;
    align-self: start;
    position: sticky;
    top: 1rem;
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    border: 1px solid var(--glass-border);

}



.calendar-agenda {
    grid-column: 1 / -1;

}



@media (width >= 1100px) {
    .calendar-card {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
        gap: 1.25rem;
        border-radius: 22px;

    }



    .calendar-top {
        margin-bottom: 1rem;

    }



    .calendar-stack {
        padding: 1rem;
        border-radius: 20px;

    }



    .calendar-grid {
        padding: 0.85rem;
        gap: 0.65rem;

    }



    .calendar-day {
        font-size: 0.95rem;

    }



    .calendar-events-panel {
        top: 1.5rem;
        max-height: calc(100vh - 220px);
        overflow: auto;

    }



    .calendar-events-header {
        position: sticky;
        top: 0;
        background: color-mix(in srgb, var(--surface) 85%, transparent);
        backdrop-filter: blur(8px);
        padding-bottom: 0.6rem;
        z-index: 2;

    }

}



@media (width <= 1024px) {
    .calendar-card {
        grid-template-columns: 1fr;

    }

    .calendar-events-panel {
        position: static;
        grid-column: 1 / -1;

    }

}





.achievement-reward {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgb(99 102 241 / 12%);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;

}



.achievements-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;

}



.achievements-card.compact .achievements-list {
    max-height: 220px;
    overflow: hidden;
    position: relative;

}



.achievements-card.compact .achievements-list::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(15 23 42 / 85%));
    pointer-events: none;

}



.achievements-expand {
    border-radius: 999px;

}



/* Dashboard polish */

.section#dashboard .glass-card {
    border-radius: 18px;
    border: 1px solid rgb(148 163 184 / 22%);
    background:

        radial-gradient(120% 140% at 10% 0%, rgb(99 102 241 / 18%), transparent 55%),

        radial-gradient(120% 140% at 100% 10%, rgb(139 92 246 / 18%), transparent 55%),

        color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 18px 34px rgb(2 6 23 / 28%);

}



.section#dashboard .card-header {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(148 163 184 / 15%);
    margin-bottom: 0.75rem;

}



.section#dashboard .stat-card,

.section#dashboard .stat-card-enhanced {
    border-radius: 18px;
    border: 1px solid rgb(148 163 184 / 20%);
    background:

        radial-gradient(120% 140% at 10% 0%, rgb(99 102 241 / 16%), transparent 55%),

        color-mix(in srgb, var(--surface) 86%, transparent);

}



.section#dashboard .glass-card:hover,

.section#dashboard .stat-card:hover,

.section#dashboard .stat-card-enhanced:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 44px rgb(2 6 23 / 36%);

}



.section#dashboard .card-header h3 {
    font-weight: 600;
    letter-spacing: -0.01em;

}



.section#dashboard .goals-card,

.section#dashboard .achievements-card,

.section#dashboard .challenges-card {
    padding: 1.25rem;

}



/* Dashboard layout polish */

.section#dashboard .card-grid {
    gap: 1.25rem;

}



.section#dashboard .stat-card,

.section#dashboard .stat-card-enhanced {
    padding: 1.2rem 1.25rem;

}



.section#dashboard .stat-header {
    margin-bottom: 0.75rem;

}



.section#dashboard .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;

}



.section#dashboard .stat-content h3 {
    font-size: 1.65rem;
    letter-spacing: -0.02em;

}



.section#dashboard .section-header {
    background: linear-gradient(135deg, rgb(79 92 251 / 20%), rgb(15 23 42 / 92%));
    border: 1px solid rgb(148 163 184 / 20%);
    border-radius: 20px;
    padding: 1.5rem 1.25rem;

}



.section#dashboard .welcome-card {
    border-radius: 24px;
    background:

        radial-gradient(120% 160% at 0% 0%, rgb(99 102 241 / 25%), transparent 60%),

        linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface) 75%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);

}



.section#dashboard .section-title {
    font-size: 2rem;

}



.section#dashboard .section-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);

}



.section#dashboard .dashboard-header {
    padding: 1.75rem 1.5rem;

}



.section#dashboard .dashboard-header-container {
    display: grid !important;
    align-items: center !important;
    grid-template-columns: 1fr auto !important;
    gap: 1.25rem !important;
    padding: 0.25rem;
    border-radius: 18px;

}



.section#dashboard .dashboard-header-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    align-items: flex-start !important;
    text-align: left !important;
    min-width: 0 !important;

}



.section#dashboard .dashboard-header-actions {
    grid-column: 2;
    justify-self: end;

}



.section#dashboard .dashboard-header-main {
    grid-column: 1;

}



.section#dashboard .dashboard-header-actions .btn {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 18%, transparent);
    box-shadow: 0 12px 22px rgb(2 6 23 / 20%);

}



.section#dashboard .dashboard-header-actions {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    justify-content: flex-start !important;

}



.section#dashboard .section-title {
    line-height: 1.15;

}



.section#dashboard .section-subtitle {
    line-height: 1.45;
    max-width: 52ch;

}



.section#dashboard .dashboard-header-actions .btn i {
    margin-right: 0.4rem;

}



@media (width <= 900px) {
    .section#dashboard .dashboard-header-container {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;

    }

    .section#dashboard .dashboard-header-actions {
        grid-column: 1;
        justify-self: end;

    }

}



.section#dashboard .mobile-brand {
    display: none;

}



@media (width <= 900px) {
    .section#dashboard .mobile-brand {
        display: inline-flex;

    }

}



.section#dashboard .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.5rem;

}



.section#dashboard .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem;

}



@media (width <= 1200px) {
    .section#dashboard .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    }

}



@media (width <= 900px) {
    .section#dashboard .stats-grid {
        grid-template-columns: 1fr !important;

    }

    .section#dashboard .card-grid {
        grid-template-columns: 1fr !important;

    }

}



.section#dashboard .quick-stats {
    margin-top: 1.75rem;
    display: grid;
    gap: 1rem;

}



.section#dashboard .quick-stats-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;

}



.section#dashboard .quick-stats-title {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -0.01em;

}



.section#dashboard .quick-stats-subtitle {
    font-size: 0.85rem;

}



.section#dashboard .activity-timeline {
    gap: 0.75rem;

}



.section#dashboard .activity-item {
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 14%, transparent);

}



.section#dashboard .goals-card .goal-item,

.section#dashboard .challenges-card .challenge-item,

.section#dashboard .achievements-card .achievement-item {
    border-radius: 14px;

}



@media (width <= 900px) {
    .section#dashboard .section-header {
        padding: 1.1rem 0.9rem;

    }



    .section#dashboard .section-title {
        font-size: 1.5rem;

    }



    .section#dashboard .stat-content h3 {
        font-size: 1.35rem;

    }

}



.store-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgb(15 23 42 / 50%);
    border: 1px solid var(--glass-border);

}



.store-item-meta {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    color: var(--text-secondary);

}



.store-buy {
    width: 100%;

}



.store-premium-card {
    background: linear-gradient(135deg, rgb(245 158 11 / 12%), rgb(15 23 42 / 85%));
    border: 1px solid rgb(245 158 11 / 40%);

}



.store-tier-card {
    position: relative;
    overflow: hidden;

}



.store-tier-card.tier-active {
    transform: translateY(-4px);
    box-shadow: 0 24px 40px rgb(15 23 42 / 40%);
    border-color: rgb(56 189 248 / 70%);

}



.store-tier-card.tier-locked {
    opacity: 0.85;

}



.store-tier-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgb(255 255 255 / 12%), transparent 55%);
    opacity: 0.6;
    pointer-events: none;

}



.store-tier-card .store-premium-header,

.store-tier-card .store-premium-features,

.store-tier-card .store-premium-actions,

.store-tier-card .text-tertiary {
    position: relative;
    z-index: 1;

}



.store-tier-card.pro-tier {
    background: linear-gradient(135deg, rgb(59 130 246 / 15%), rgb(15 23 42 / 85%));
    border: 1px solid rgb(59 130 246 / 40%);

}



.store-tier-card.plus-tier {
    background: linear-gradient(135deg, rgb(56 189 248 / 16%), rgb(15 23 42 / 86%));
    border: 1px solid rgb(56 189 248 / 45%);
    box-shadow: 0 16px 32px rgb(56 189 248 / 12%);

}



.store-tier-card.free-tier {
    background: linear-gradient(135deg, rgb(148 163 184 / 18%), rgb(15 23 42 / 88%));
    border: 1px solid rgb(148 163 184 / 35%);

}



.store-tier-card.vip-tier {
    background: linear-gradient(135deg, rgb(250 204 21 / 18%), rgb(15 23 42 / 88%));
    border: 1px solid rgb(250 204 21 / 50%);
    box-shadow: 0 18px 36px rgb(250 204 21 / 15%);

}















.store-plus-card {
    border: 1px solid rgb(56 189 248 / 40%);
    background: linear-gradient(135deg, rgb(56 189 248 / 12%), rgb(15 23 42 / 85%));

}



.store-plus-balance {
    display: grid;
    gap: 0.35rem;

}



.store-premium-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;

}



.store-premium-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;

}



.store-status-row {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

}



.store-membership-card {
    border: 1px solid rgb(79 92 251 / 25%);
    background: linear-gradient(135deg, rgb(79 92 251 / 12%), rgb(15 23 42 / 86%));

}



.store-membership-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;

}



.store-membership-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

}



.store-membership-column {
    background: rgb(15 23 42 / 50%);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    display: grid;
    gap: 0.6rem;

}



.store-membership-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);

}



.store-membership-column ul {
    margin: 0;
    padding-left: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;

}



.onboarding-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
    margin-top: 1rem;

}

.store-referral-card {
    background: rgb(255 255 255 / 3%);
    border: 1px solid var(--glass-border);

}



.store-referral-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    margin-top: 0.6rem;

}



@media (width <= 768px) {
    .store-referral-row {
        grid-template-columns: 1fr;

    }

}



/* Desktop music player polish */

.player-content {
    gap: 0.75rem;

}



.player-cover {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgb(255 255 255 / 8%);
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    flex-shrink: 0;

}



.floating-player.expanded .player-cover {
    width: 56px;
    height: 56px;
    border-radius: 16px;

}

@media (width <= 520px) {
    .bottom-nav {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;

    }



    .bottom-nav-items {
        padding: 0.3rem 0.4rem 0.45rem;

    }



    .bottom-nav-link {
        min-width: 38px;
        min-height: 38px;
        border-radius: 10px;

    }

}



@media (width <= 900px) {
    .task-list,

    .notes-grid,

    .music-grid {
        gap: 0.75rem;

    }



    .task-item,

    .note-card,

    .music-track {
        border-radius: 16px;

    }



    .task-list-header {
        padding: 0.75rem 0.5rem;

    }



    .mobile-music-player {
        backdrop-filter: blur(12px);
        background: rgb(15 23 42 / 85%);
        border-top: 1px solid rgb(255 255 255 / 8%);

    }



    /* Tasks section mobile polish */

    .tasks-content {
        padding: 0 0 1rem;
        gap: 1rem;

    }



    .task-list-panel {
        border-radius: 18px;

    }



    .toolbar {
        padding: 1rem;
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--surface);

    }



    .toolbar .search-wrapper,

    .toolbar .filters,

    .toolbar .toolbar-actions {
        width: 100%;

    }



    #task-search {
        width: 100%;

    }



    .task-list {
        padding: 0 1rem 1rem;

    }



    .task-item {
        padding: 0.95rem;
        border-width: 1px;
        background: linear-gradient(135deg, rgb(255 255 255 / 2%), rgb(255 255 255 / 1%));

    }



    .task-item .task-title {
        font-size: 1rem;

    }



    .task-item .task-meta,

    .task-item .task-description {
        font-size: 0.85rem;

    }



    .task-actions {
        opacity: 1;
        transform: none;
        gap: 0.5rem;

    }



    .task-actions .btn-icon {
        width: 36px;
        height: 36px;

    }



    .task-list.grid-view {
        grid-template-columns: 1fr;

    }



    .task-details-panel {
        border-radius: 18px;

    }

}

@media (width <= 520px) {
    #header-title {
        font-size: 1.05rem;

    }



    .section-title {
        font-size: 1.35rem;

    }



    .stats-grid {
        grid-template-columns: 1fr;

    }



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

    }

}



@media (width <= 768px) {
    .section.active .glass-card,

    .section.active .stat-card,

    .section.active .music-track,

    .section.active .task-item,

    .section.active .note-card {
        animation: fadeUp 0.35s ease both;

    }



    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(10px);

        }

        to {
            opacity: 1;
            transform: translateY(0);

        }

    }

}



/* Main Content */

.tasks-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
    padding: 0 2rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 600px;
    min-height: 0;

}



/* Task List Container */

.task-list-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;

}



.task-list-header {
    padding: 1.5rem 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

}



.task-list-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);

}



.task-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;

}



.task-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;

}



.task-list .virtual-spacer {
    flex: 0 0 auto;
    width: 100%;
    pointer-events: none;

}



.task-list.virtualized {
    gap: 0;

}



.task-list.virtualized .task-item {
    margin-bottom: 0.75rem;

}



/* Task Details */

.task-details {
    flex: 1;
    display: flex;
    flex-direction: column;

}



.details-header {
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

}



.details-title-section {
    flex: 1;

}



.details-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.5rem;
    line-height: 1.3;

}



.details-subtitle {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #9ca3af;

}



.details-actions {
    display: flex;
    gap: 0.5rem;

}



.details-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;

}



.details-section {
    margin-bottom: 2rem;

}



.details-section:last-child {
    margin-bottom: 0;

}



.details-section h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;

}



.details-section h4 i {
    font-size: 1rem;

}



.details-description {
    color: #4b5563;
    line-height: 1.6;
    white-space: pre-wrap;

}



.details-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

}



.details-meta-item {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;

}



.meta-label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;

}



.meta-value {
    font-weight: 500;
    color: #1f2937;

}



.details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

}



.details-footer {
    padding: 1.5rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    gap: 0.75rem;

}







@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



.modal-overlay.active {
    display: flex;

}



.modal {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    overflow-y: scroll;

}



@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);

    }

    to {
        opacity: 1;
        transform: translateY(0);

    }

}



.modal-sm {
    max-width: 400px;

}



.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;

}



.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #1f2937;

}



.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;

}



.modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;

}



/* Rituals & Recipes */

.timer-extra-grid {
    margin-top: 1.5rem;
    gap: 1.25rem;

}



.ritual-card,

.craft-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}



.ritual-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;

}



.ritual-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-secondary);

}



.ritual-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;

}



.ritual-steps li {
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-primary);

}



.ritual-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;

}



.craft-list {
    display: grid;
    gap: 0.75rem;

}



.craft-item {
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);

}



.craft-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;

}



.craft-title {
    font-weight: 600;
    color: var(--text-primary);

}



.craft-meta {
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



.craft-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.btn.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);

}



.craft-empty {
    padding: 1.25rem;
    text-align: center;
    border-radius: 16px;
    border: 1px dashed var(--border);
    color: var(--text-secondary);

}



/* Analytics Skill Tree */

.analytics-grid {
    gap: 1.25rem;

}



.analytics-tree-card,

.analytics-stats-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}



.analytics-tree-card {
    padding: 1.25rem;

}



.card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.skill-tree-stage {
    position: relative;
    min-height: 680px;
    padding: 2.5rem 2rem;
    border-radius: 22px;
    background:

        radial-gradient(circle at top, rgb(99 102 241 / 30%), rgb(12 18 36 / 95%)),

        repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0, rgb(255 255 255 / 4%) 1px, transparent 1px, transparent 28px),

        repeating-linear-gradient(90deg, rgb(255 255 255 / 4%) 0, rgb(255 255 255 / 4%) 1px, transparent 1px, transparent 28px);
    border: 1px solid rgb(148 163 184 / 25%);
    overflow: hidden;

}



.skill-tree-stage::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:

        radial-gradient(circle at 20% 10%, rgb(56 189 248 / 18%), transparent 45%),

        radial-gradient(circle at 80% 20%, rgb(251 113 133 / 20%), transparent 45%),

        radial-gradient(circle at 50% 80%, rgb(99 102 241 / 20%), transparent 55%);
    opacity: 0.8;
    pointer-events: none;

}



.skill-tree-links {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

}



.skill-link {
    stroke: rgb(148 163 184 / 35%);
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgb(59 130 246 / 15%));

}



.skill-link.unlocked {
    stroke: rgb(165 180 252 / 90%);
    filter: drop-shadow(0 0 10px rgb(99 102 241 / 35%));

}



.skill-link.active {
    stroke: rgb(251 113 133 / 95%);
    stroke-width: 3;
    animation: linkPulse 2.4s ease-in-out infinite;

}



@keyframes linkPulse {

    0% { opacity: 0.6; }

    50% { opacity: 1; }

    100% { opacity: 0.6; }

}



.skill-tree-stage.expanded {
    min-height: 880px;
    padding: 3rem 2.5rem;
    background:

        radial-gradient(circle at top, rgb(99 102 241 / 40%), rgb(10 16 32 / 98%)),

        repeating-linear-gradient(0deg, rgb(255 255 255 / 5%) 0, rgb(255 255 255 / 5%) 1px, transparent 1px, transparent 32px),

        repeating-linear-gradient(90deg, rgb(255 255 255 / 5%) 0, rgb(255 255 255 / 5%) 1px, transparent 1px, transparent 32px);

}



.skill-tree-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgb(255 255 255 / 8%), transparent 40%);
    pointer-events: none;

}



.skill-tree {
    position: relative;
    height: 100%;
    min-height: 640px;
    margin: 0 auto;
    max-width: 640px;
    transform-style: preserve-3d;
    perspective: 900px;
    z-index: 1;

}



.skill-tree-stage.panning {
    cursor: grabbing;
    user-select: none;

}



.skill-tree-stage {
    cursor: grab;

}



.skill-tree-stage.expanded .skill-tree {
    max-width: 820px;
    min-height: 820px;

}



.skill-root {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgb(255 255 255 / 60%);

}



.skill-node {
    position: absolute;
    width: 96px;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform 0.25s ease;

}



.skill-tree-stage.expanded .skill-node {
    width: 112px;

}



.skill-orb {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-weight: 600;
    color: #0f172a;
    background: linear-gradient(135deg, #f8fafc, #c7d2fe);
    box-shadow: 0 22px 48px rgb(15 23 42 / 45%),

        inset 0 0 18px rgb(255 255 255 / 90%);
    transform: translateZ(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;

}



.skill-node:hover .skill-orb {
    transform: translateZ(30px) scale(1.06);
    box-shadow: 0 28px 56px rgb(79 70 229 / 45%),

        inset 0 0 20px rgb(255 255 255 / 95%);

}



.skill-tree-stage.expanded .skill-orb {
    width: 112px;
    height: 112px;
    border-radius: 28px;

}



.skill-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgb(15 23 42 / 60%);
    color: rgb(255 255 255 / 85%);
    border: 1px solid rgb(255 255 255 / 15%);

}



.skill-node.tier-5 { top: 10px; left: 50%; transform: translateX(-50%); }

.skill-node.tier-4.left { top: 130px; left: 6%; }

.skill-node.tier-4.right { top: 130px; right: 6%; }

.skill-node.tier-3.left { top: 270px; left: 2%; }

.skill-node.tier-3.center { top: 270px; left: 50%; transform: translateX(-50%); }

.skill-node.tier-3.right { top: 270px; right: 2%; }

.skill-node.tier-2.left { top: 420px; left: 10%; }

.skill-node.tier-2.right { top: 420px; right: 10%; }

.skill-node.tier-1.left { top: 560px; left: 22%; }

.skill-node.tier-1.right { top: 560px; right: 22%; }

.skill-node.tier-0 { top: 660px; left: 50%; transform: translateX(-50%); }



.skill-tree-stage.expanded .skill-node.tier-5 { top: 12px; }

.skill-tree-stage.expanded .skill-node.tier-4.left { top: 170px; left: 8%; }

.skill-tree-stage.expanded .skill-node.tier-4.right { top: 170px; right: 8%; }

.skill-tree-stage.expanded .skill-node.tier-3.left { top: 340px; left: 4%; }

.skill-tree-stage.expanded .skill-node.tier-3.center { top: 340px; }

.skill-tree-stage.expanded .skill-node.tier-3.right { top: 340px; right: 4%; }

.skill-tree-stage.expanded .skill-node.tier-2.left { top: 520px; left: 12%; }

.skill-tree-stage.expanded .skill-node.tier-2.right { top: 520px; right: 12%; }

.skill-tree-stage.expanded .skill-node.tier-1.left { top: 700px; left: 24%; }

.skill-tree-stage.expanded .skill-node.tier-1.right { top: 700px; right: 24%; }

.skill-tree-stage.expanded .skill-node.tier-0 { top: 820px; }



.skill-node::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    width: 2px;
    height: 30px;
    background: rgb(255 255 255 / 15%);
    transform: translateX(-50%);

}



.skill-node.tier-4::before {
    display: none;

}



.skill-node.unlocked .skill-orb {
    background: linear-gradient(135deg, #dbeafe, #a5b4fc);
    box-shadow: 0 18px 42px rgb(79 70 229 / 35%),

        inset 0 0 18px rgb(255 255 255 / 90%);

}



.skill-node.active .skill-orb {
    background: linear-gradient(135deg, #fcd34d, #fb7185);
    box-shadow: 0 20px 45px rgb(248 113 113 / 40%),

        inset 0 0 20px rgb(255 255 255 / 90%);
    transform: translateZ(24px) scale(1.05);

}



.skill-node.unlocking .skill-orb {
    animation: unlockBloom 1.2s ease-out;

}



.skill-node.unlocking::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 28px;
    background: radial-gradient(circle, rgb(250 204 21 / 45%), transparent 60%);
    animation: unlockPulse 1.2s ease-out;
    pointer-events: none;

}



@keyframes unlockBloom {

    0% { transform: translateZ(12px) scale(0.85); filter: brightness(0.8); }

    45% { transform: translateZ(40px) scale(1.12); filter: brightness(1.2); }

    100% { transform: translateZ(24px) scale(1.05); filter: brightness(1); }

}



@keyframes unlockPulse {

    0% { opacity: 0.9; transform: scale(0.6); }

    60% { opacity: 0.6; transform: scale(1); }

    100% { opacity: 0; transform: scale(1.2); }

}



.skill-node.locked .skill-orb {
    filter: grayscale(1) brightness(0.8);
    background: linear-gradient(135deg, #94a3b8, #64748b);

}



.skill-tree-legend {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;

}



.skill-tooltip {
    position: absolute;
    min-width: 180px;
    max-width: 260px;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: rgb(8 15 30 / 96%);
    border: 1px solid rgb(99 102 241 / 35%);
    color: rgb(255 255 255 / 90%);
    transform: translate(-50%, -100%);
    box-shadow: 0 16px 40px rgb(15 23 42 / 40%);
    z-index: 2;

}



.skill-tooltip.sticky {
    outline: 1px solid rgb(99 102 241 / 60%);

}



.skill-tooltip-title {
    font-weight: 600;
    margin-bottom: 0.4rem;

}



.skill-tooltip-features {
    display: grid;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: rgb(255 255 255 / 75%);

}



.skill-tooltip-item::before {
    content: "\\2022";
    margin-right: 0.35rem;

}



.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary);

}



.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #94a3b8;

}



.legend-dot.unlocked { background: #a5b4fc; }

.legend-dot.active { background: #fb7185; }

.legend-dot.locked { background: #64748b; }



.analytics-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;

}



.stat-tile {
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: grid;
    gap: 0.35rem;

}



.stat-tile strong {
    font-size: 1.25rem;
    color: var(--text-primary);

}



.stat-tile small {
    color: var(--text-tertiary);

}



.tile-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);

}



.analytics-summary {
    display: grid;
    gap: 0.75rem;

}



.pulse-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgb(148 163 184 / 20%);
    overflow: hidden;

}



.pulse-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #38bdf8, #6366f1, #f472b6);
    transition: width 0.4s ease;

}



.summary-text {
    color: var(--text-secondary);
    font-size: 0.95rem;

}



/* In-app notifications (list + top-right alerts) */

.notification-item {
  border: 1px solid var(--glass-border);
  background: linear-gradient(135deg,

      color-mix(in srgb, var(--surface) 76%, transparent),

      color-mix(in srgb, var(--background) 88%, transparent));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--background) 65%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.notification-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgb(15 23 42 / 16%);

}



.notification-item.unread {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--glass-border));

}



.notification {
  border-radius: 14px;
  border: 1px solid rgb(148 163 184 / 20%);
  box-shadow: 0 16px 36px rgb(15 23 42 / 30%);
  backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: notice-rise 0.3s ease;

}



.notification-success {
  background: linear-gradient(135deg, rgb(16 185 129 / 92%), rgb(6 95 70 / 92%));

}



.notification-error {
  background: linear-gradient(135deg, rgb(239 68 68 / 92%), rgb(127 29 29 / 92%));

}



.notification-info {
  background: linear-gradient(135deg, rgb(59 130 246 / 92%), rgb(30 64 175 / 92%));

}



@keyframes modal-pop {
  0% {
    transform: translateY(18px) scale(0.98);
    opacity: 0;

  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;

  }

}



@keyframes toast-in {
  0% {
    opacity: 0;
    transform: translateY(-12px);

  }

  100% {
    opacity: 1;
    transform: translateY(0);

  }

}



@keyframes notice-rise {
  0% {
    opacity: 0;
    transform: translateY(12px);

  }

  100% {
    opacity: 1;
    transform: translateY(0);

  }

}



@media (width <= 768px) {
  .modal,

  .modal-content,

  .modal2 .modal-content,

  .modal3-content {
    border-radius: 18px 18px 0 0;

  }



  .toastify {
    margin: 0 0.75rem;
    width: calc(100% - 1.5rem);

  }

}



/* ===============================

   Mobile Safe-Area + Viewport Fit

   =============================== */



:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-nav-height: clamp(56px, 8vh, 76px);

}



@media (width <= 900px) and (orientation: landscape) {
  :root {
    --bottom-nav-height: clamp(48px, 9vh, 64px);
    --sidebar-width: 220px;

  }



  /* Use desktop layout on mobile landscape */

  .bottom-nav,

  .mobile-sidebar,

  .mobile-sidebar-overlay,

  .mobile-menu-btn {
    display: none !important;

  }



  .sidebar,

  .sidebar-toggle {
    display: block !important;

  }



  .sidebar {
    width: var(--sidebar-width);

  }



  .logo-icon {
    width: 32px;
    height: 32px;

  }



  .logo-text {
    font-size: 16px;
    margin-left: 0.6rem;

  }



  .app-container {
    grid-template-columns: auto 1fr;
    grid-template-areas:

      "sidebar header"

      "sidebar main";
    padding-bottom: 0;

  }



  .main-content {
    padding: 0.75rem 1rem;

  }



  .section.active {
    padding-bottom: 1rem !important;

  }



  .glass-card,

  .task-list-container, .music-grid,

  .notes-grid,

  .calendar-container {
    margin-bottom: 0.75rem;

  }



  .section-header {
    padding: 0.7rem 0.9rem;

  }



  .section-title {
    font-size: 1.2rem;

  }



  .section-subtitle {
    font-size: 0.82rem;

  }



  .bottom-nav-link {
    padding: 0.3rem 0.5rem;

  }



  .mobile-music-player,

  .mobile-music-player.active {
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 6px);

  }

}



body.orientation-landscape {
  --bottom-nav-height: clamp(48px, 9vh, 64px);
  --sidebar-width: 220px;

}



body.orientation-landscape .bottom-nav,

body.orientation-landscape .mobile-sidebar,

body.orientation-landscape .mobile-sidebar-overlay,

body.orientation-landscape .mobile-menu-btn {
  display: none !important;

}



body.orientation-landscape .sidebar,

body.orientation-landscape .sidebar-toggle {
  display: block !important;

}



body.orientation-landscape .sidebar {
  width: var(--sidebar-width);

}



body.orientation-landscape .logo-icon {
  width: 32px;
  height: 32px;

}



body.orientation-landscape .logo-text {
  font-size: 16px;
  margin-left: 0.6rem;

}



body.orientation-landscape .app-container {
  grid-template-columns: auto 1fr;
  grid-template-areas:

    "sidebar header"

    "sidebar main";
  padding-bottom: 0;

}



body.orientation-landscape .main-content {
  padding: 0.75rem 1rem;

}



body.orientation-landscape .section.active {
  padding-bottom: 1rem !important;

}



body.orientation-landscape .glass-card,

body.orientation-landscape .task-list-container,

body.orientation-landscape body.orientation-landscape .music-grid,

body.orientation-landscape .notes-grid,

body.orientation-landscape .calendar-container {
  margin-bottom: 0.75rem;

}



body.orientation-landscape .section-header {
  padding: 0.7rem 0.9rem;

}

body.orientation-portrait-wide {
  --sidebar-width: 84px;
}

body.orientation-portrait-wide .app-container {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  padding-bottom: 0;
}

body.orientation-portrait-wide .sidebar {
  width: var(--sidebar-width);
  padding: 1rem 0.55rem;
}

body.orientation-portrait-wide .sidebar .logo {
  justify-content: center;
}

body.orientation-portrait-wide .sidebar .logo-text,
body.orientation-portrait-wide .sidebar .user-details,
body.orientation-portrait-wide .sidebar .nav-text {
  display: none;
}

body.orientation-portrait-wide .nav-link {
  justify-content: center;
  gap: 0;
  padding: 0.6rem;
}

body.orientation-portrait-wide .nav-link i {
  margin: 0;
}

body.orientation-portrait-wide .header-shell {
  flex-wrap: wrap;
  gap: 0.6rem;
}

body.orientation-portrait-wide .header-actions {
  flex-wrap: wrap;
  row-gap: 0.4rem;
}

body.orientation-portrait-wide .main-content {
  padding: 0.8rem 1rem;
}

body.orientation-portrait-wide .main-content > .section {
  max-width: 100%;
}

body.orientation-portrait-wide .section-header {
  padding: 0.75rem 0.9rem;
}



body.orientation-landscape .section-title {
  font-size: 1.2rem;

}



body.orientation-landscape .section-subtitle {
  font-size: 0.82rem;

}



body.orientation-landscape .bottom-nav-link {
  padding: 0.3rem 0.5rem;

}



body.orientation-landscape .mobile-music-player,

body.orientation-landscape .mobile-music-player.active {
  bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 6px);

}



body {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);

}



.app-container {
  min-height: calc(100svh - var(--safe-top) - var(--safe-bottom));

}



@media (width <= 900px) {
  .section.active {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 16px) !important;

  }

}



.bottom-nav {
    padding-bottom: calc(0.45rem + var(--safe-bottom));
    height: calc(var(--bottom-nav-height) + var(--safe-bottom));

}



/* Timer icon polish */

.timer-type-icon.dual {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  height: auto;
  padding: 0.2rem 0.45rem;
  border-radius: 12px;
  overflow: visible;

}



.timer-type-icon.dual i:last-child {
  color: #34d399;
  font-size: 0.9em;

}



/* Loading ads */



.loading-ad-grid {
  margin: 1rem 0 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 520px;
  width: min(90vw, 520px);

}



.loading-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.35rem 0 0.75rem;
  justify-content: center;

}



.loading-badge {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cbd5f5;
  background: rgb(99 102 241 / 18%);
  border: 1px solid rgb(99 102 241 / 30%);

}



.loading-ad-slot {
  padding: 0.75rem;
  border-radius: 16px;
  border: 1px dashed rgb(148 163 184 / 35%);
  background: rgb(15 23 42 / 55%);
  text-align: left;
  position: relative;
  overflow: hidden;

}



.loading-ad-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgb(255 255 255 / 8%), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.4s infinite;

}



.ad-badge {
  display: inline-flex;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c7d2fe;
  background: rgb(99 102 241 / 20%);
  margin-bottom: 0.4rem;

}



.ad-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.2rem;

}



.ad-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);

}



.ad-card {
  background: linear-gradient(160deg, rgb(255 255 255 / 3%), rgb(15 23 42 / 65%));
  border: 1px solid rgb(148 163 184 / 20%);

}



.ad-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;

}



.ad-slot {
  padding: 0.8rem;
  border-radius: 16px;
  border: 1px dashed rgb(148 163 184 / 30%);
  background: rgb(15 23 42 / 45%);
  position: relative;
  overflow: hidden;

}



.ad-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgb(255 255 255 / 6%), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s infinite;

}



@keyframes shimmer {

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

  100% { transform: translateX(100%); }

}



@media (width <= 680px) {
  .loading-ad-grid {
    grid-template-columns: 1fr;

  }

}



/* Calendar weekly UI upgrade */

.calendar-week {
  display: none;
  gap: 0.6rem;
  grid-template-rows: auto 1fr;

}



.calendar-week-header {
  background: linear-gradient(135deg, rgb(99 102 241 / 18%), rgb(15 23 42 / 65%));
  border: 1px solid rgb(99 102 241 / 30%);

}



.week-day-label.today strong {
  color: #fff;
  background: rgb(99 102 241 / 40%);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;

}



.calendar-week-grid {
  background: rgb(15 23 42 / 40%);
  border: 1px solid rgb(148 163 184 / 20%);
  border-radius: 16px;
  padding: 0.6rem;

}



.week-slot {
  background: rgb(15 23 42 / 55%);
  border: 1px solid rgb(148 163 184 / 15%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;

}



.week-slot:hover {
  border-color: rgb(99 102 241 / 50%);
  box-shadow: 0 10px 24px rgb(99 102 241 / 20%);
  transform: translateY(-1px);

}



.week-slot.has-event {
  background: linear-gradient(135deg, rgb(99 102 241 / 20%), rgb(15 23 42 / 40%));

}

/* Zyfocusy AI */

.ai-shell {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background:

        radial-gradient(120% 160% at 0% 0%, rgb(99 102 241 / 18%), transparent 55%),

        radial-gradient(120% 160% at 100% 0%, rgb(34 211 238 / 12%), transparent 50%),

        linear-gradient(160deg, rgb(12 16 30 / 92%), rgb(16 20 36 / 95%));
    border: 1px solid rgb(255 255 255 / 12%);
    box-shadow: 0 22px 60px rgb(2 6 23 / 45%);
    padding: 1.6rem;
    border-radius: 26px;

}



.ai-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(255 255 255 / 6%);

}



.ai-shell-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;

}



.ai-shell-actions .btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;

}



.ai-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}

#focusy-policy-badge,
.ai-badge.ai-scope {
    display: none;
}

.ai-usage,
.ai-usage-meter {
    display: none;
}

.ai-config-row {
    display: none;
}



.ai-badge {
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgb(255 255 255 / 8%);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);

}



.ai-badge.ai-model {
    color: var(--text-primary);

}



.ai-badge.ai-scope {
    background: rgb(79 92 251 / 15%);
    color: var(--primary);
    border-color: rgb(79 92 251 / 30%);

}



.ai-badge.ai-beta {
    background: rgb(245 158 11 / 18%);
    color: #fbbf24;
    border-color: rgb(245 158 11 / 40%);

}



.ai-badge.ai-admin {
    background: rgb(16 185 129 / 16%);
    color: var(--success);
    border-color: rgb(16 185 129 / 40%);

}



.ai-usage {
    font-size: 0.85rem;
    color: var(--text-tertiary);

}



.ai-usage-meter {
    display: flex;
    align-items: center;
    gap: 0.75rem;

}



.ai-usage-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    overflow: hidden;

}



.ai-usage-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.3s ease;

}



.ai-usage-text {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    min-width: 64px;
    text-align: right;

}



.ai-notice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    background: rgb(245 158 11 / 8%);
    border: 1px solid rgb(245 158 11 / 25%);
    color: var(--text-secondary);
    font-size: 0.85rem;

}



.ai-notice i {
    color: #fbbf24;
    font-size: 1rem;

}



.ai-notice strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 0.35rem;

}



.ai-chat-window {
    min-height: 360px;
    max-height: 520px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.35rem;
    border-radius: 18px;
    background:

        radial-gradient(120% 140% at 0% 0%, rgb(99 102 241 / 12%), transparent 60%),

        linear-gradient(180deg, rgb(6 10 22 / 96%), rgb(8 12 24 / 82%));
    border: 1px solid rgb(255 255 255 / 8%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%);

}



.ai-chat-window::-webkit-scrollbar {
    width: 6px;

}



.ai-chat-window::-webkit-scrollbar-thumb {
    background: rgb(99 102 241 / 35%);
    border-radius: 999px;

}



.ai-message {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 86%;

}



.ai-message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;

}



.ai-message-copy {
    border: none;
    background: rgb(255 255 255 / 8%);
    color: var(--text-tertiary);
    border-radius: 10px;
    width: 28px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;

}



.ai-message-copy:hover {
    color: var(--text-primary);
    background: rgb(255 255 255 / 16%);

}



.ai-message-bot {
    align-self: flex-start;

}



.ai-message-user {
    align-self: flex-end;

}



.ai-message-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;

}



.ai-message-time {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: none;
    letter-spacing: 0.02em;

}



.ai-message-text {
    padding: 0.9rem 1.1rem;
    border-radius: 16px;
    background: rgb(255 255 255 / 8%);
    color: var(--text-primary);
    line-height: 1.55;
    box-shadow: 0 16px 32px rgb(2 6 23 / 28%);
    border: 1px solid rgb(255 255 255 / 6%);

}

.ai-message {
    animation: aiMessageIn 0.25s ease both;
}

@keyframes aiMessageIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}



.ai-message-bot .ai-message-text {
    border-left: 3px solid rgb(99 102 241 / 75%);

}



.ai-message-user .ai-message-text {
    background: linear-gradient(135deg, rgb(99 102 241 / 55%), rgb(14 116 144 / 55%));
    border-color: rgb(99 102 241 / 35%);

}



.ai-limit-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;

}



.ai-limit-line::before,

.ai-limit-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgb(255 255 255 / 10%);

}



.ai-date-separator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0.4rem 0;

}



.ai-date-separator::before,

.ai-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgb(255 255 255 / 10%);

}



.ai-typing {
    display: flex;
    gap: 0.3rem;
    padding: 0 0.5rem;
    align-items: center;
    color: var(--text-tertiary);

}



.ai-typing-text {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    animation: aiTypingFade 1.6s ease-in-out infinite;

}



.ai-typing-dots {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;

}



.ai-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary);
    animation: aiPulse 1s infinite ease-in-out;

}



.ai-typing-dots span:nth-child(2) {
    animation-delay: 0.15s;

}



.ai-typing-dots span:nth-child(3) {
    animation-delay: 0.3s;

}



@keyframes aiTypingFade {

    0%, 100% { opacity: 0.5; }

    50% { opacity: 1; }

}



@keyframes aiPulse {

    0%, 100% { transform: translateY(0); opacity: 0.5; }

    50% { transform: translateY(-4px); opacity: 1; }

}



.ai-input-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    background: rgb(255 255 255 / 5%);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 22px;
    padding: 0.6rem;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%), 0 16px 30px rgb(2 6 23 / 28%);

}

.ai-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.ai-action-chip {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--glass-border));
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.ai-action-chip:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
    box-shadow: 0 10px 20px rgb(2 6 23 / 28%);
}



.ai-input-row .form-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.65rem 0.8rem;

}



.ai-input-row .btn {
    white-space: nowrap;
    border-radius: 12px;

}



#ai-voice-btn.recording {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 10px 18px rgb(239 68 68 / 35%);

}



#ai-voice-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;

}



.ai-hint {
    font-size: 0.85rem;

}



.ai-support-inline {
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: rgb(15 20 36 / 80%);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-self: flex-start;

}



.ai-support-inline .ai-support-note {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.ai-support-inline .form-row {
    gap: 0.5rem;

}



.ai-support-inline .form-group {
    margin-bottom: 0;

}



.ai-support-inline .form-input,

.ai-support-inline .form-textarea,

.ai-support-inline .form-select {
    background: rgb(255 255 255 / 6%);

}



.ai-support-queue {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

}



.ai-support-queued {
    border: 1px solid rgb(248 184 78 / 35%);
    background: rgb(248 184 78 / 8%);
    border-radius: 14px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;

}



.ai-support-queued-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.85rem;

}



.ai-support-queued-title i {
    margin-right: 0.4rem;
    color: #fbbf24;

}



.ai-support-queued-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;

}



.ai-support-queued-message {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: pre-wrap;

}



.ai-support-queued-status {
    font-size: 0.75rem;
    color: var(--text-tertiary);

}



.ai-support-queued .btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;

}



.ai-history-modal {
    max-width: 720px;
    width: min(92vw, 720px);
    background: linear-gradient(160deg, rgb(11 16 30 / 96%), rgb(14 20 38 / 98%));
    border: 1px solid rgb(255 255 255 / 12%);
    box-shadow: 0 30px 70px rgb(2 6 23 / 55%);
    border-radius: 22px;

}



.ai-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-height: 60vh;
    overflow: auto;
    padding-right: 0.35rem;

}



.ai-history-item {
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgb(255 255 255 / 8%);
    background: rgb(255 255 255 / 5%);
    display: grid;
    gap: 0.4rem;

}



.ai-history-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;

}



.ai-history-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;

}



.ai-badge.online {
    color: var(--success);
    border-color: rgb(16 185 129 / 40%);

}



.ai-badge.offline {
    color: var(--danger);
    border-color: rgb(239 68 68 / 40%);

}



@media (width <= 768px) {
    .ai-chat-window {
        max-height: 360px;

    }

    .ai-message {
        max-width: 92%;

    }

    .ai-input-row {
        flex-direction: column;
        align-items: stretch;

    }

    .ai-input-row .btn {
        width: 100%;

    }

}



.date-presets, .time-presets, .tag-suggestions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;

}



.date-preset, .time-preset, .tag-suggestion {
    padding: 0.25rem 0.75rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;

}



.date-preset:hover, .time-preset:hover, .tag-suggestion:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);

}



/* Dashboard polish */

.welcome-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%), var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 18px 36px rgb(0 0 0 / 18%);

}



.stats-grid .glass-card,

.card-grid .glass-card {
    border: 1px solid var(--border);
    box-shadow: 0 14px 28px rgb(0 0 0 / 16%);

}



.stat-card-enhanced {
    background: linear-gradient(160deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 0%)), var(--surface);

}



.stat-label {
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.01em;

}



.stat-meta .meta-item {
    color: var(--text-tertiary);

}



.activity-card .card-header h3,

.goals-card .card-header h3,

.weekly-card .card-header h3,

.achievements-card .card-header h3 {
    font-weight: 700;

}



.activity-timeline .activity-item {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-2);
    background: var(--surface-light);

}



.goals-list .goal-item {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-light);

}



.weekly-card .chart-bars {
    background: linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 0%));
    border-radius: 14px;
    padding: 0.75rem;

}



.chart-summary .summary-item {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;

}



.quick-actions-card .action-btn {
    border: 1px solid var(--border);
    background: var(--surface);

}



.quick-actions-card .action-btn:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    transform: translateY(-2px);

}



@media (width <= 768px) {
    .activity-timeline .activity-item,

    .goals-list .goal-item {
        padding: 0.7rem;

    }



    .chart-summary .summary-item {
        padding: 0.5rem 0.6rem;

    }



    /* Settings mobile polish */

    #settings .card-grid {
        gap: 0.75rem;

    }



    #settings .glass-card {
        padding: 0.9rem;
        margin-top: 0;

    }



    #settings .glass-card + .glass-card {
        margin-top: 0.75rem;

    }



    #settings .form-group {
        margin-bottom: 0.9rem;

    }



    #settings .form-row {
        gap: 0.6rem;
        margin-bottom: 0.9rem;

    }



    #settings .push-actions {
        flex-direction: column;
        gap: 0.5rem;

    }



    #settings .section-subtitle {
        font-size: 0.9rem;

    }



    #settings .form-group {
        padding: 0.65rem 0.7rem;
        border-radius: 14px;
        background: rgb(255 255 255 / 3%);
        border: 1px solid rgb(255 255 255 / 6%);

    }



    #settings .form-group .form-label {
        font-size: 0.85rem;
        color: var(--text-secondary);

    }



    #settings .form-row {
        flex-direction: column;

    }



    #settings .form-row input,

    #settings .form-row select {
        width: 100%;

    }



    .system-check-results {
        margin-top: 0.75rem;

    }



    .system-check-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;

    }



    .system-check-item {
        padding: 0.75rem 0.85rem;
        border-radius: 14px;

    }



    .system-check-meta {
        font-size: 0.78rem;
        line-height: 1.4;

    }

}



/* Store + Badges */

.badge-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

}



.badge-option {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgb(79 70 229 / 8%), rgb(15 23 42 / 40%));
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-width: 120px;

}



.badge-option-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.75rem;
    box-shadow:

        inset 0 0 0 1px rgb(255 255 255 / 25%),

        0 6px 14px rgb(0 0 0 / 35%);

}



.badge-option-label {
    font-weight: 600;
    letter-spacing: 0.01em;

}



.badge-option:hover:not(.locked) {
    transform: translateY(-1px);
    border-color: rgb(99 102 241 / 60%);
    box-shadow: 0 12px 28px rgb(24 31 70 / 35%);

}



.badge-option.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border-color: transparent;
    box-shadow: 0 14px 32px rgb(99 102 241 / 35%);

}



.badge-option.locked {
    opacity: 0.5;
    cursor: not-allowed;

}



.profile-badge-accent {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    font-weight: 600;

}



.store-premium-features {
    list-style: none;
    margin: 0.75rem 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.9rem;

}



.store-premium-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;

}



.store-premium-features i {
    color: var(--primary);
    font-size: 0.85rem;

}



.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;

}



.package-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.85rem;
    background: rgb(255 255 255 / 3%);
    display: grid;
    gap: 0.5rem;

}



.package-title {
    font-weight: 700;
    font-size: 0.95rem;

}



.analytics-insights-card .insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-top: 0.6rem;

}



.insight-tile {
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 3%);
    display: grid;
    gap: 0.25rem;

}



.insight-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);

}



.insight-tile strong {
    font-size: 1.1rem;

}



.insight-tile small {
    color: var(--text-tertiary);

}



.quick-capture-fab {
    position: fixed;
    right: calc(env(safe-area-inset-right, 0px) + 24px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    box-shadow: 0 16px 32px rgb(0 0 0 / 35%);
    z-index: 2200;
    transition: opacity 0.2s ease, transform 0.2s ease;

}



body.modal-open .quick-capture-fab,

body.mobile-player-open .quick-capture-fab {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);

}



@media (width <= 767px) {
    .quick-capture-fab {
        display: none;

    }

}



.quick-capture-fab:hover {
    transform: translateY(-1px);

}



.quick-capture-modal .modal3-body {
    display: grid;
    gap: 0.75rem;

}



.quick-capture-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;

}



.quick-capture-hint {
    text-align: center;
    font-size: 0.85rem;

}



.qr-scan-wrap {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0;

}



.qr-scan-video {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: #0b1220;
    margin: 0 auto;
    object-fit: cover;

}



.qr-scan-hint {
    font-size: 0.85rem;

}



.package-desc {
    color: var(--text-tertiary);
    font-size: 0.85rem;

}



.package-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.package-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    overflow: hidden;

}



.package-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.2s ease;

}



.package-status,

.package-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);

}



.ai-mode-row {
    display: grid;
    gap: 0.5rem;

}



.store-balance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;

}



.store-balance-label {
    font-size: 0.8rem;
    color: var(--text-tertiary);

}



.store-balance-value {
    font-size: 1.4rem;
    font-weight: 700;

}



.store-convert {
    display: grid;
    gap: 0.6rem;

}



.store-convert-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;

}



.store-items-grid {
    display: grid;
    gap: 0.75rem;

}



.store-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;

}



.store-filter-btn {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;

}



.store-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: transparent;

}



.store-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);

}



.store-item[data-item="membership"] {
    border: 1px solid rgb(250 204 21 / 35%);
    background: linear-gradient(135deg, rgb(250 204 21 / 12%), rgb(15 23 42 / 75%));

}



.store-item[data-item="credit"] {
    border: 1px solid rgb(56 189 248 / 35%);
    background: linear-gradient(135deg, rgb(56 189 248 / 12%), rgb(15 23 42 / 75%));

}



.store-item-locked {
    opacity: 0.6;

}



.store-item.hidden {
    display: none;

}



.store-item-title {
    font-weight: 600;
    margin-bottom: 0.2rem;

}



.store-item-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);

}



.challenges-list {
    display: grid;
    gap: var(--space-2);

}



.challenge-item {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-2);
    background: var(--surface-light);

}



.challenge-title {
    font-weight: 600;
    margin-bottom: 0.15rem;

}



.challenge-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);

}



.coming-soon-card {
    border: 1px dashed var(--border);
    background: var(--surface);
    opacity: 0.75;
    filter: grayscale(0.2);

}



.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--surface-light);
    color: var(--text-tertiary);
    border: 1px solid var(--border);
    margin-bottom: 0.75rem;

}



.nav-link.locked,

.bottom-nav-link.locked {
    opacity: 0.6;

}



.nav-link.locked .nav-text {
    position: relative;

}



.nav-link.locked .nav-text::after {
    content: 'Soon';
    margin-left: 0.4rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);

}



@media (width <= 768px) {
    .header {
        padding: 1rem 1rem 0.6rem;

    }



    .header-content h1 {
        font-size: 1.35rem;

    }



    .header-content p {
        font-size: 0.9rem;

    }



    .header-actions {
        gap: 0.5rem;

    }



    .section {
        padding: 1rem 0.9rem 6.5rem;

    }



    .section-header {
        gap: 0.35rem;

    }



    .section-title {
        font-size: 1.25rem;

    }



    .section-subtitle {
        font-size: 0.9rem;

    }



    .card,

    .glass-card,

    .stat-card,


    .note-card,

    .music-card {
        border-radius: 18px;

    }



    .btn,

    .btn-primary,

    .btn-secondary,

    .btn-icon {
        border-radius: 14px;

    }



    .form-input,

    .form-textarea,

    .form-select {
        border-radius: 14px;
        padding: 0.75rem 0.85rem;

    }



    .bottom-nav {
        box-shadow: 0 -12px 30px rgb(0 0 0 / 30%);
        padding-bottom: env(safe-area-inset-bottom, 0);

    }

}



/* Restore overflow behavior for sections + modals */

.section {
  overflow: visible;

}



.modal-content,

.modal2-content,

.modal3,

.profile-modal,

.whats-new-modal,

.notes-modal {
  overflow: auto;

}



.section-header {
  border-radius: var(--radius-xxl);
  background:

    linear-gradient(140deg, rgb(99 102 241 / 14%), rgb(10 16 30 / 94%));
  border: 1px solid rgb(148 163 184 / 20%);
  box-shadow: var(--elev-2);
  backdrop-filter: blur(14px);

}



.card,

.glass-card,

.stat-card,


.note-card,

.music-card,

.store-item,

.countdown-card,

.settings-card,

.calendar-card {
  border-radius: var(--radius-card);
  border: 1px solid rgb(148 163 184 / 16%);
  background: linear-gradient(165deg, rgb(255 255 255 / 4%), rgb(10 16 30 / 85%));
  box-shadow: var(--elev-1);

}



.card--elevated {
  box-shadow: var(--elev-2);
  border-color: rgb(148 163 184 / 22%);

}



.card--outline {
  background: var(--surface);
  box-shadow: none;
  border-style: dashed;

}



.card--glass {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  backdrop-filter: blur(16px);

}



.card-header,

.settings-card-header,

.stat-header {
  border-bottom: 1px solid rgb(148 163 184 / 14%);

}



.btn,

.btn-primary,

.btn-secondary,

.btn-icon {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 22px rgb(5 8 18 / 18%);

}



.btn--ghost {
  background: transparent;
  border: 1px solid rgb(148 163 184 / 35%);
  box-shadow: none;

}



.btn--soft {
  background: rgb(99 102 241 / 12%);
  border: 1px solid rgb(99 102 241 / 30%);
  box-shadow: none;

}



.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: 1px solid rgb(99 102 241 / 40%);

}



.btn-secondary {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(148 163 184 / 20%);

}



.form-input,

.form-textarea,

.form-select {
  border-radius: 14px;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(148 163 184 / 18%);
  box-shadow: inset 0 0 0 1px rgb(99 102 241 / 6%);

}



.modal,

.modal2-content,

.modal3,

.profile-modal,

.whats-new-modal {
  border-radius: var(--radius-modal);
  border: 1px solid rgb(148 163 184 / 20%);
  box-shadow: var(--elev-3);
  background: linear-gradient(170deg, rgb(255 255 255 / 6%), rgb(10 16 30 / 92%));

}



.modal-header,

.modal3-header {
  border-bottom: 1px solid rgb(148 163 184 / 16%);

}



.header {
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgb(148 163 184 / 16%);

}



.header-actions .header-btn,

.header-actions .mobile-menu-btn,

.header-profile-btn {
  border-radius: 16px;

}



/* Premium Profile Redesign */

#profile .profile-desktop-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: 1.5rem;

}



#profile .profile-desktop-hero {
  background:

    radial-gradient(140% 160% at 10% 0%, rgb(99 102 241 / 20%), transparent 55%),

    linear-gradient(135deg, rgb(15 23 42 / 95%), rgb(6 11 22 / 85%));
  border: 1px solid rgb(148 163 184 / 25%);
  padding: 1.75rem;
  gap: 1.25rem;

}



#profile .profile-desktop-avatar {
  width: 88px;
  height: 88px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgb(99 102 241 / 25%), rgb(30 41 59 / 80%));
  border: 1px solid rgb(148 163 184 / 35%);
  box-shadow: 0 18px 40px rgb(15 23 42 / 35%);

}



#profile .profile-desktop-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;

}



#profile .profile-stat {
  background: rgb(15 23 42 / 45%);
  border: 1px solid rgb(148 163 184 / 20%);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;

}



#profile .profile-desktop-form-card {
  padding: 1.6rem;
  border-radius: 22px;
  border: 1px solid rgb(148 163 184 / 20%);
  background: linear-gradient(160deg, rgb(15 23 42 / 92%), rgb(12 18 36 / 78%));

}



#profile .avatar-dropzone {
  border-radius: 16px;
  padding: 1.25rem;
  border: 1px dashed rgb(148 163 184 / 40%);
  background: rgb(15 23 42 / 40%);

}



#mobile-profile .profile-hero-card {
  background: linear-gradient(160deg, rgb(15 23 42 / 94%), rgb(10 16 32 / 80%));
  border: 1px solid rgb(148 163 184 / 20%);

}



#mobile-profile .profile-avatar-large {
  border-radius: 28px;
  box-shadow: 0 16px 40px rgb(15 23 42 / 35%);

}



#mobile-profile .profile-form-card {
  border-radius: 22px;
  border: 1px solid rgb(148 163 184 / 18%);
  background: linear-gradient(150deg, rgb(15 23 42 / 90%), rgb(8 12 24 / 82%));

}



@media (width <= 980px) {
  #profile .profile-desktop-grid {
    grid-template-columns: 1fr;

  }

}



:root {
  --app-bg-image: none;
  --app-bg-opacity: 0.18;
  --content-max-width: 1280px;

}



body .glass-card,

body .stat-card,

body .note-card,

body .task-item,

body .music-track,

body .store-item {
  border-color: color-mix(in srgb, var(--border) 86%, transparent);
  box-shadow: 0 18px 36px rgb(6 12 28 / 26%);

}



body .glass-card:hover,

body .stat-card:hover,

body .store-item:hover {
  box-shadow: 0 22px 44px rgb(6 12 28 / 30%);

}



body .section-header {
  border-radius: 18px;

}



body .btn-primary {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 35%, transparent);

}



body .btn-secondary {
  background: color-mix(in srgb, var(--surface) 88%, transparent);

}



body .nav-link {
  letter-spacing: 0.01em;

}



/* Settings redesign */

.settings-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 4px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgb(99 102 241 / 8%), rgb(15 23 42 / 20%));

}



.settings-nav {
  position: sticky;
  top: calc(var(--safe-top) + 96px);
  display: grid;
  gap: 16px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgb(30 41 59 / 65%), rgb(15 23 42 / 40%));
  border: 1px solid rgb(148 163 184 / 22%);
  box-shadow: 0 22px 44px rgb(6 12 28 / 35%);
  backdrop-filter: blur(18px);
  max-height: calc(100vh - var(--safe-top) - 140px);
  overflow: auto;
  scrollbar-gutter: stable;

}



.settings-nav-header {
  display: grid;
  gap: 6px;

}



.settings-nav-title {
  font-size: 1.1rem;
  font-weight: 700;

}



.settings-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(120deg, rgb(99 102 241 / 28%), rgb(15 23 42 / 45%));
  border: 1px solid rgb(99 102 241 / 30%);
  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 10%);

}



.settings-topbar-title {
  font-size: 1.15rem;
  font-weight: 700;

}



.settings-topbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

}



.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;

}



.settings-card {
  border-radius: 20px;
  border: 1px solid rgb(148 163 184 / 22%);
  background: linear-gradient(160deg, rgb(30 41 59 / 65%), rgb(15 23 42 / 50%));
  box-shadow: 0 18px 36px rgb(6 12 28 / 32%);
  padding: 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(14px);

}



.settings-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 46px rgb(6 12 28 / 28%);

}



.settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;

}



.settings-card.is-collapsed {
  padding-bottom: 12px;

}



.settings-card.is-collapsed > *:not(.settings-card-header) {
  display: none;

}



.settings-collapse {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

}



.settings-collapse.is-collapsed i {
  transform: rotate(-90deg);

}



.settings-tabs {
  display: grid;
  gap: 8px;

}



.settings-tab {
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;

}



.settings-tab.active {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--text-primary);

}



.settings-tab {
  border: 1px solid rgb(148 163 184 / 24%);
  background: rgb(15 23 42 / 45%);

}



.settings-search .form-input {
  background: rgb(15 23 42 / 55%);
  border: 1px solid rgb(148 163 184 / 24%);

}



@media (width <= 1100px) {
  .settings-shell {
    grid-template-columns: 1fr;

  }



  .settings-nav {
    position: static;
    max-height: none;

  }



  .settings-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;

  }



  .settings-tab {
    white-space: nowrap;

  }

}



@media (width <= 700px) {
  .settings-topbar {
    flex-direction: column;
    align-items: flex-start;

  }



  .settings-grid {
    grid-template-columns: 1fr;

  }

}



/* Ads (non-intrusive) */

.ad-slot {
  position: relative;
  border: 1px dashed rgb(255 255 255 / 14%);
  background: linear-gradient(135deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%));
  padding: 14px 16px;
  margin: 18px 0;
  min-height: 140px;
  width: 100%;
  overflow: hidden;

}



.ad-slot-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 45%);
  margin-bottom: 6px;

}



.ad-slot-body {
  font-size: 0.95rem;
  color: rgb(255 255 255 / 78%);
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

}



.ad-slot-body ins.adsbygoogle {
  display: block;
  min-height: 96px;

}



.ad-placeholder,

.ad-offline {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

}



.ad-house {
  display: grid;
  gap: 6px;

}



.ad-house-title {
  font-weight: 600;
  color: var(--text-primary);

}



.ad-house-body {
  color: rgb(255 255 255 / 70%);
  font-size: 0.92rem;

}



.ad-house-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 20%);
  background: rgb(255 255 255 / 8%);
  color: var(--text-primary);
  font-size: 0.82rem;
  text-decoration: none;
  width: fit-content;

}



.ad-house-cta:hover {
  background: rgb(255 255 255 / 14%);

}



.ad-slot-inline {
  max-width: 720px;
  min-height: 150px;

}



.ad-slot-wide {
  width: 100%;
  min-height: 170px;

}



.ad-slot-offline {
  border-color: rgb(255 255 255 / 8%);
  background: linear-gradient(135deg, rgb(255 255 255 / 2%), rgb(255 255 255 / 1%));

}



.ad-slot-offline .ad-placeholder {
  display: none;

}



.ad-slot-offline .ad-offline {
  display: block;
  color: rgb(255 255 255 / 60%);

}



.ad-slot-blocked .ad-placeholder {
  display: block;

}



/* --- Admin Section Modern Polish --- */

.admin-section {
    position: relative;
    padding: 1.75rem 0 2.5rem;

}



.admin-section::before {
    content: '';
    position: absolute;
    inset: -2rem -2rem auto;
    height: 240px;
    background: radial-gradient(60% 120% at 20% 0%, rgb(99 102 241 / 22%), transparent 70%),

                radial-gradient(45% 90% at 90% 10%, rgb(14 165 233 / 18%), transparent 70%);
    pointer-events: none;
    z-index: 0;

}



.admin-section .section-header,

.admin-header {
    position: relative;
    z-index: 1;
    backdrop-filter: blur(18px) saturate(150%);

}



.admin-header {
    padding: 1.1rem 1.25rem;
    border-radius: 20px;
    background: linear-gradient(140deg, rgb(15 23 42 / 88%), rgb(30 41 59 / 65%));
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 18px 40px rgb(5 10 20 / 35%);

}



.admin-header .section-title {
    font-size: 1.35rem;
    letter-spacing: 0.01em;

}



.admin-tabs {
    position: relative;
    z-index: 1;
    padding: 0.4rem;
    border-radius: 999px;
    background: rgb(15 23 42 / 60%);
    border: 1px solid rgb(148 163 184 / 18%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%);

}



.admin-tab {
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-tertiary);

}



.admin-tab.active {
    background: linear-gradient(135deg, rgb(99 102 241 / 45%), rgb(14 165 233 / 25%));
    color: #f8fafc;
    border-color: rgb(99 102 241 / 60%);
    box-shadow: 0 12px 26px rgb(59 130 246 / 25%);

}



.admin-tab::after,

.admin-tab.active::after {
    display: none;

}



.admin-panels {
    position: relative;
    z-index: 1;

}



.admin-panel.active {
    animation: adminFadeIn 0.35s ease;

}



@keyframes adminFadeIn {

    from { opacity: 0; transform: translateY(8px); }

    to { opacity: 1; transform: translateY(0); }

}



.admin-hub-grid .stat-card {
    border-radius: 18px;
    background: linear-gradient(160deg, rgb(15 23 42 / 88%), rgb(30 41 59 / 65%));
    border: 1px solid rgb(148 163 184 / 18%);
    box-shadow: 0 18px 34px rgb(5 10 20 / 35%);

}



#admin-analytics-card,

#admin-console-card {
    border-radius: 20px;
    background: linear-gradient(160deg, rgb(11 16 30 / 95%), rgb(14 22 40 / 86%));
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 22px 42px rgb(3 7 18 / 45%);

}



.admin-analytics-card,

.admin-chart-card {
    border-radius: 18px;
    background: linear-gradient(160deg, rgb(12 18 32 / 85%), rgb(20 28 45 / 75%));
    border: 1px solid rgb(148 163 184 / 16%);
    box-shadow: 0 18px 30px rgb(3 7 18 / 38%);

}



.admin-analytics-list .admin-analytics-item {
    border-radius: 12px;
    border: 1px solid rgb(148 163 184 / 18%);
    background: rgb(15 23 42 / 50%);

}



.admin-terminal {
    border-radius: 20px;
    background: radial-gradient(circle at 20% 0%, rgb(34 197 94 / 8%), transparent 60%),

                linear-gradient(160deg, rgb(2 6 23 / 96%), rgb(8 14 28 / 88%));
    border: 1px solid rgb(34 197 94 / 25%);
    box-shadow: 0 20px 45px rgb(3 7 18 / 55%);

}



.admin-terminal-toolbar {
    padding: 0.35rem 0.1rem;

}



.admin-terminal-title {
    font-size: 0.95rem;
    color: #bbf7d0;

}



.admin-terminal-output {
    border-radius: 14px;
    background: rgb(2 6 23 / 90%);
    border: 1px solid rgb(34 197 94 / 18%);

}



.admin-terminal-input {
    border-radius: 14px;
    border: 1px solid rgb(34 197 94 / 20%);
    background: rgb(2 6 23 / 85%);

}



.admin-section .section-header {
    border-radius: 24px;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(135deg, rgb(15 23 42 / 92%), rgb(6 13 26 / 92%));
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 26px 60px rgb(3 7 18 / 50%);

}



.admin-tabs {
    display: flex;
    gap: 0.6rem;
    padding: 0.4rem;
    border-radius: 999px;
    background: rgb(15 23 42 / 60%);
    border: 1px solid rgb(148 163 184 / 18%);

}



.admin-terminal {
    background: #0c0c0c;
    border: 1px solid #1f6f3a;
    box-shadow: inset 0 0 0 1px rgb(31 111 58 / 30%), 0 18px 40px rgb(0 0 0 / 45%);
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    color: #d0ffd0;

}



.admin-terminal-title {
    color: #9be59b;
    font-weight: 600;

}



.admin-terminal-output {
    min-height: 200px;
    padding: 0.8rem;
    color: #c7f9cc;
    background: #0a0a0a;

}



.admin-terminal-input {
    color: #d0ffd0;
    background: #0b0b0b;
    border: 1px solid #2a8a4f;

}



.admin-terminal-line {
    font-size: 0.88rem;
    line-height: 1.4;
    margin-bottom: 0.25rem;

}



.admin-terminal-line.cmd {
    color: #9ad6ff;

}



.admin-terminal-line.ok {
    color: #b7ffb7;

}



.admin-terminal-line.err {
    color: #ff8c8c;

}



.admin-auth-modal {
    max-width: 460px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgb(9 14 28 / 98%), rgb(14 20 36 / 92%));
    border: 1px solid rgb(148 163 184 / 20%);
    box-shadow: 0 30px 60px rgb(2 6 23 / 55%);

}



.admin-auth-modal .modal-header {
    border-bottom: 1px solid rgb(148 163 184 / 12%);

}



.admin-auth-modal .form-input {
    background: rgb(7 12 24 / 85%);
    border: 1px solid rgb(99 102 241 / 35%);
    color: var(--text-primary);

}



.admin-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;

}



.admin-chart-card h4 {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    color: var(--text-primary);

}



.admin-chart {
    min-height: 140px;

}



.admin-bar {
    display: grid;
    grid-template-columns: 70px 1fr 48px;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;

}



.admin-bar-track {
    height: 10px;
    border-radius: 999px;
    background: rgb(148 163 184 / 18%);
    overflow: hidden;

}



.admin-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(56 189 248 / 90%), rgb(59 130 246 / 85%));

}



.admin-hub-actions .btn,

#admin-console-card .btn {
    box-shadow: 0 10px 20px rgb(3 7 18 / 30%);

}



@media (width <= 900px) {
    .admin-header {
        padding: 1rem;

    }

    .admin-tabs {
        overflow-x: auto;
        scrollbar-width: thin;

    }

}













/* Analytics Charts */

.analytics-options-card {
    margin-top: 1rem;

}



.analytics-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;

}



.analytics-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;

}



.analytics-chart-card {
    min-height: 180px;
    position: relative;

}



.analytics-chart {
    min-height: 140px;
    margin-top: 0.75rem;
    background: rgb(15 23 42 / 35%);
    border: 1px solid rgb(148 163 184 / 18%);
    border-radius: 14px;
    padding: 0.75rem;

}



.analytics-chart svg {
    width: 100%;
    height: 120px;

}



.analytics-chart-label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 0.4rem;

}



.analytics-locked::after {
    content: 'Upgrade to unlock';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(5 9 20 / 65%);
    color: var(--text-primary);
    font-weight: 600;
    border-radius: 16px;

}



.analytics-locked .analytics-chart {
    filter: blur(2px);
    pointer-events: none;

}



@media (width <= 900px) {
    .analytics-options-grid {
        grid-template-columns: 1fr;

    }

}



.analytics-options-card .header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

}



.analytics-insight {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgb(15 23 42 / 35%);
    border: 1px solid rgb(148 163 184 / 12%);
    padding: 0.6rem 0.75rem;
    border-radius: 12px;

}



.analytics-insight strong {
    color: var(--text-primary);

}



.analytics-options-card {
    border-radius: 20px;
    background: linear-gradient(160deg, rgb(15 23 42 / 92%), rgb(10 16 30 / 85%));
    border: 1px solid rgb(148 163 184 / 18%);
    box-shadow: 0 24px 48px rgb(5 10 20 / 45%);

}



.analytics-chart-card {
    border-radius: 20px;
    background: linear-gradient(160deg, rgb(12 18 32 / 88%), rgb(18 26 44 / 78%));
    border: 1px solid rgb(148 163 184 / 16%);
    box-shadow: 0 20px 38px rgb(5 10 20 / 40%);

}



.analytics-chart {
    background: linear-gradient(140deg, rgb(15 23 42 / 50%), rgb(10 16 30 / 40%));

}



.analytics-options-card .header-actions .btn {
    border-radius: 999px;

}



.analytics-options-card {
    border-radius: 22px;
    background: linear-gradient(160deg, rgb(12 18 32 / 92%), rgb(10 16 30 / 86%));
    border: 1px solid rgb(148 163 184 / 18%);
    box-shadow: 0 26px 55px rgb(5 10 20 / 50%);
    padding: 1.25rem 1.4rem;

}



.analytics-options-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;

}



.analytics-kicker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgb(148 163 184 / 70%);
    margin-bottom: 0.35rem;

}



.analytics-controls {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;

}



.analytics-control {
    grid-column: span 4;

}



.analytics-control-toggle {
    grid-column: span 12;

}



.analytics-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgb(15 23 42 / 50%);
    border: 1px solid rgb(148 163 184 / 18%);
    border-radius: 999px;
    padding: 0.45rem 0.7rem;

}



.analytics-toggle input {
    display: none;

}



.analytics-toggle-track {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgb(148 163 184 / 30%);
    position: relative;
    transition: all 0.2s ease;

}



.analytics-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;

}



.analytics-toggle input:checked + .analytics-toggle-track {
    background: linear-gradient(120deg, #4f46e5, #22d3ee);

}



.analytics-toggle input:checked + .analytics-toggle-track::after {
    transform: translateX(20px);

}



.analytics-toggle-label {
    color: var(--text-secondary);
    font-size: 0.85rem;

}



.analytics-export-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;

}



.analytics-export-bar .btn {
    border-radius: 999px;

}



.analytics-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 1rem;

}



.analytics-chart-card {
    border-radius: 20px;
    background: linear-gradient(160deg, rgb(12 18 32 / 90%), rgb(18 26 44 / 82%));
    border: 1px solid rgb(148 163 184 / 16%);
    box-shadow: 0 22px 40px rgb(5 10 20 / 45%);
    padding: 1rem 1.1rem;

}



.analytics-chart {
    background: linear-gradient(140deg, rgb(8 13 25 / 70%), rgb(12 18 32 / 45%));
    border: 1px solid rgb(148 163 184 / 14%);
    border-radius: 16px;

}



.analytics-insight {
    border-radius: 14px;
    background: rgb(8 13 25 / 60%);

}



@media (width <= 900px) {
    .analytics-controls {
        grid-template-columns: 1fr;

    }

    .analytics-control {
        grid-column: span 1;

    }

    .analytics-control-toggle {
        grid-column: span 1;

    }

}

/* --- Dashboard Premium Refresh --- */
.section#dashboard {
    position: relative;
    isolation: isolate;
    padding-bottom: 2.5rem;
}

.section#dashboard::before {
    content: '';
    position: absolute;
    inset: -2rem -2rem auto;
    height: 260px;
    background:
        radial-gradient(60% 120% at 15% 0%, rgb(99 102 241 / 28%), transparent 70%),
        radial-gradient(45% 90% at 90% 10%, rgb(14 165 233 / 22%), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section#dashboard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 10%, rgb(255 255 255 / 6%), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.section#dashboard > * {
    position: relative;
    z-index: 1;
}

.section#dashboard .section-header {
    background: linear-gradient(135deg, rgb(12 18 32 / 95%), rgb(18 26 44 / 85%));
    border: 1px solid rgb(148 163 184 / 22%);
    border-radius: 22px;
    box-shadow: 0 28px 60px rgb(4 8 18 / 55%);
    backdrop-filter: blur(16px) saturate(160%);
}

.section#dashboard .section-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.section#dashboard .section-title span {
    color: inherit;
}

.section#dashboard .section-subtitle {
    color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
}

.section#dashboard .dashboard-header-actions .btn {
    background: linear-gradient(135deg, rgb(99 102 241 / 18%), rgb(14 165 233 / 10%));
    border: 1px solid rgb(99 102 241 / 35%);
    box-shadow: 0 12px 24px rgb(6 10 20 / 30%);
}

.section#dashboard .dashboard-header-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgb(6 10 20 / 35%);
}

.section#dashboard .glass-card,
.section#dashboard .stat-card,
.section#dashboard .stat-card-enhanced {
    border-radius: 20px;
    border: 1px solid rgb(148 163 184 / 22%);
    background:
        linear-gradient(160deg, rgb(15 23 42 / 92%), rgb(12 18 32 / 85%));
    box-shadow: 0 18px 34px rgb(5 10 20 / 35%);
    position: relative;
    overflow: hidden;
}

.section#dashboard .glass-card::before,
.section#dashboard .stat-card::before,
.section#dashboard .stat-card-enhanced::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 0% 0%, rgb(99 102 241 / 18%), transparent 55%);
    opacity: 0.8;
    pointer-events: none;
}

.section#dashboard .glass-card::after,
.section#dashboard .stat-card::after,
.section#dashboard .stat-card-enhanced::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(148 163 184 / 30%), transparent);
    opacity: 0.7;
    pointer-events: none;
}

.section#dashboard .glass-card:hover,
.section#dashboard .stat-card:hover,
.section#dashboard .stat-card-enhanced:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px rgb(5 10 20 / 45%);
}

.section#dashboard .welcome-card {
    border-radius: 26px;
    background:
        radial-gradient(130% 150% at 0% 0%, rgb(99 102 241 / 30%), transparent 60%),
        linear-gradient(135deg, rgb(12 18 32 / 95%), rgb(18 26 44 / 88%));
    border: 1px solid rgb(99 102 241 / 30%);
    box-shadow: 0 30px 60px rgb(4 8 18 / 50%);
    overflow: hidden;
}

.section#dashboard .welcome-card .points-badge {
    border: 1px solid rgb(99 102 241 / 35%);
    background: linear-gradient(135deg, rgb(99 102 241 / 18%), rgb(14 165 233 / 18%));
}

.section#dashboard .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgb(99 102 241 / 35%), rgb(14 165 233 / 20%));
    border: 1px solid rgb(99 102 241 / 30%);
    box-shadow: 0 12px 24px rgb(7 11 22 / 35%);
}

.section#dashboard .stats-grid,
.section#dashboard .card-grid {
    gap: 1.6rem;
}

.section#dashboard .activity-item {
    background: linear-gradient(140deg, rgb(15 23 42 / 90%), rgb(10 16 30 / 80%));
    border: 1px solid rgb(148 163 184 / 20%);
}

@media (width <= 900px) {
    .section#dashboard {
        padding-bottom: 2rem;
    }

    .section#dashboard .section-header {
        border-radius: 18px;
        padding: 1.1rem 1rem;
        box-shadow: 0 18px 36px rgb(4 8 18 / 45%);
    }

    .section#dashboard .welcome-card {
        border-radius: 20px;
    }

    .section#dashboard .stats-grid,
    .section#dashboard .card-grid {
        gap: 1.1rem;
    }
}

/* Theme modulation for section surfaces */
body.theme-personality .section-header,
body.theme-personality .glass-card,
body.theme-personality .stat-card,
body.theme-personality .stat-card-enhanced {
    background-image: var(--theme-card-overlay);
    background-blend-mode: screen;
}

/* ===============================
   Dashboard Production Pass
   =============================== */
.section#dashboard .section-header {
    border-radius: 24px;
    padding: 1.6rem 1.7rem;
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
        linear-gradient(160deg, var(--theme-surface), var(--theme-surface-2));
    border: 1px solid var(--theme-border-soft);
    box-shadow: var(--ui-shadow-soft);
}

.section#dashboard .dashboard-header-container {
    align-items: center !important;
    gap: 1.5rem !important;
}

.section#dashboard .dashboard-header-actions .btn {
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--theme-border-soft);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.section#dashboard .welcome-card {
    border-radius: 26px;
    padding: 1.5rem 1.6rem;
    background:
        radial-gradient(120% 140% at 0% 0%, var(--theme-glow), transparent 55%),
        linear-gradient(160deg, var(--theme-surface), var(--theme-surface-2));
    border: 1px solid var(--theme-border-strong);
    box-shadow: var(--ui-shadow-soft);
}

.section#dashboard .welcome-actions .btn {
    border-radius: 999px;
}

.section#dashboard .points-badge {
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid var(--theme-border-soft);
}

.section#dashboard .daily-advice {
    margin-top: 1rem;
    border-radius: 16px;
    border: 1px solid var(--theme-border-soft);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.section#dashboard .insight-card {
    border-radius: 22px;
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
        linear-gradient(160deg, var(--theme-surface), var(--theme-surface-2));
    border: 1px solid var(--theme-border-soft);
    box-shadow: var(--ui-shadow-soft);
}

.section#dashboard .insight-header h3 {
    font-size: 1.05rem;
}

.section#dashboard .insight-pill {
    font-size: 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border-strong);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.section#dashboard .quick-stats-header {
    align-items: center;
}

.section#dashboard .stats-grid {
    gap: 1.6rem;
}

.section#dashboard .stat-card,
.section#dashboard .stat-card-enhanced {
    border-radius: 20px;
    border: 1px solid var(--theme-border-soft);
    background: linear-gradient(160deg, var(--theme-surface), var(--theme-surface-2));
    box-shadow: var(--ui-shadow-soft);
}

.section#dashboard .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, transparent), color-mix(in srgb, var(--accent) 26%, transparent));
    border: 1px solid var(--theme-border-strong);
}

.section#dashboard .activity-card,
.section#dashboard .project-hub-card,
.section#dashboard .plan-card,
.section#dashboard .goals-card {
    border-radius: 20px;
    background: linear-gradient(160deg, var(--theme-surface), var(--theme-surface-2));
    border: 1px solid var(--theme-border-soft);
}

.section#dashboard .activity-item {
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    border: 1px solid var(--theme-border-soft);
}

.section#dashboard .card-header-actions .btn-text {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
}

@media (width <= 900px) {
    .section#dashboard .section-header {
        border-radius: 18px;
        padding: 1.1rem;
    }

    .section#dashboard .welcome-card {
        padding: 1.2rem 1.1rem;
    }

    .section#dashboard .stat-icon {
        width: 42px;
        height: 42px;
    }
}

/* Dashboard UI Upgrade */
.section#dashboard .insight-card {
    border-radius: 22px;
    border: 1px solid var(--theme-border-soft);
    background: linear-gradient(160deg, var(--theme-surface), var(--theme-surface-2));
    box-shadow: var(--ui-shadow-soft);
}

.section#dashboard .insight-pill {
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.75rem;
}

.section#dashboard .daily-advice {
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid var(--theme-border-soft);
}

.section#dashboard .card-header-actions .btn-text {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border: 1px solid var(--theme-border-soft);
}

.section#dashboard .quick-stats-title {
    letter-spacing: -0.01em;
}

.section#dashboard .stat-trend {
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--theme-border-soft);
}

.section#dashboard .progress-bar {
    border-radius: 999px;
}

/* Mobile scroll safety override (final) */
@media (width <= 900px) {
    html,
    body {
        overflow-y: auto !important;
    }

    body.maintenance-active {
        overflow-y: auto !important;
    }

    .app-container,
    .main-content {
        overflow: visible;
    }

    .main-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===============================
   Premium Dashboard + Tasks
   =============================== */
#dashboard .section-header {
    background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
    border: 1px solid var(--theme-border-soft);
    box-shadow: var(--ui-shadow-soft);
}

#dashboard .stat-card,
#dashboard .insight-card,
#dashboard .coach-card,
#dashboard .goals-card {
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    box-shadow: var(--ui-shadow-soft);
}

/* ===============================
   Deep Premium: Dashboard
   =============================== */
#dashboard .stats-grid,
#dashboard .card-grid {
    gap: 1.25rem;
}

#dashboard .stat-card,
#dashboard .insight-card,
#dashboard .coach-card,
#dashboard .goals-card {
    padding: 1.2rem 1.35rem;
}

#dashboard .stat-card .stat-value,
#dashboard .stat-card .stat-main {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 700;
}

#dashboard .stat-card .stat-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

#dashboard .chart-panel,
#dashboard .analytics-panel,
#dashboard .insight-panel {
    border-radius: 18px;
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    box-shadow: var(--shadow-tight);
}

#dashboard .chart-header {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--outline-soft);
}

#dashboard .chart-header h3 {
    font-weight: 700;
    font-size: 1rem;
}

/* ===============================
   Deep Premium: Task Manager
   =============================== */
#tasks .tasks-content {
    gap: 1.4rem;
}

#tasks .toolbar {
    padding: 1.1rem 1.2rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
}

#tasks .search-box {
    box-shadow: inset 0 1px 2px rgb(6 12 26 / 18%);
}

#tasks .view-controls .btn {
    border-radius: 12px;
}

#tasks .quick-add {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--outline-soft);
    border-radius: 16px;
    padding: 0.5rem;
    box-shadow: var(--shadow-tight);
}

#tasks .filters {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--outline-soft);
    border-radius: 16px;
    padding: 0.75rem;
}

#tasks .filter-tab {
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--outline-soft);
}

#tasks .filter-tab.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 60%, transparent), color-mix(in srgb, var(--secondary) 55%, transparent));
    color: #fff;
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}

#tasks .task-item {
    padding: 1rem 1.1rem;
}

#tasks .task-title {
    font-weight: 600;
}

#tasks .task-meta,
#tasks .task-description {
    color: var(--text-secondary);
}

#tasks .task-empty,
#tasks .empty-state,
#tasks .task-list-empty {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px dashed color-mix(in srgb, var(--text-tertiary) 30%, transparent);
    border-radius: 18px;
    padding: 1.4rem;
}

#tasks .task-details-panel {
    padding: 1.2rem;
}

#tasks .task-details-panel {
    position: relative;
}

#tasks .close-details-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: none;
    z-index: 2;
}

@media (width <= 1200px) {
    #tasks .close-details-btn {
        display: inline-flex;
    }
}

/* ===============================
   Deep Premium: Navigation
   =============================== */
.sidebar .logo-text {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sidebar .user-details {
    opacity: 0.9;
}

.header-actions .btn,
.header-actions .btn-icon {
    border-radius: 14px;
}

/* ===============================
   Deep Premium: Forms + Empty States
   =============================== */
.empty-state,
.empty-card,
.empty-placeholder {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px dashed color-mix(in srgb, var(--text-tertiary) 28%, transparent);
    border-radius: 18px;
    padding: 1.5rem;
}

.empty-state h3,
.empty-card h3,
.empty-placeholder h3 {
    font-weight: 700;
}

.empty-state p,
.empty-card p,
.empty-placeholder p {
    color: var(--text-secondary);
}

/* ===============================
   Mobile Scroll Hard Fix (final)
   =============================== */
@media (width <= 900px) {
    html,
    body {
        height: auto !important;
        min-height: 100%;
        overflow-y: auto !important;
        overscroll-behavior-y: auto;
    }

    #app-container,
    .app-container,
    main {
        height: auto !important;
        min-height: 100svh;
        overflow: visible !important;
    }

    .main-content {
        height: auto !important;
        min-height: 0;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===============================
   Tasks: Final Layout & System Override
   =============================== */
#tasks .tasks-content {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
    gap: 1.5rem;
    align-items: start;
}

#tasks .task-list-panel,
#tasks .task-details-panel {
    min-height: 0;
}

#tasks .task-list-panel {
    padding: 1rem 1rem 1.25rem;
    gap: 0.9rem;
    position: relative;
    padding-top: 5.8rem;
}

#tasks .toolbar,
#tasks .quick-add,
#tasks .filters {
    width: 100%;
}

#tasks .toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    border-radius: 16px;
}

#tasks .task-list-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#tasks .task-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0.75rem 1rem;
}

#tasks .task-item {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 16%, transparent);
    box-shadow: 0 8px 18px rgb(7 12 24 / 18%);
}

#tasks .task-actions {
    gap: 0.4rem;
}

#tasks .task-actions .btn-icon {
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
}

#tasks .task-details-panel {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 420px;
}

@media (width <= 1200px) {
    #tasks .tasks-content {
        grid-template-columns: 1fr;
    }

    #tasks .task-details-panel {
        position: relative;
        min-height: 0;
    }

    #tasks .toolbar {
        left: 0;
        right: 0;
        width: auto;
    }
}

@media (width <= 900px) {
    #tasks .tasks-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #tasks .task-list-panel,
    #tasks .task-details-panel {
        padding: 0.85rem;
        border-radius: 18px;
    }

    #tasks .task-list-panel {
        padding-top: 5.6rem;
    }

    #tasks .toolbar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
    }

    #tasks .task-list {
        padding: 0.25rem 0.6rem 0.9rem;
    }

    #tasks .task-item {
        padding: 0.9rem;
    }
}

/* ===============================
   Tasks: Toolbar Premium Upgrade
   =============================== */
#tasks .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.9rem;
    border-radius: 18px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    z-index: 8;
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--outline-soft) 65%, transparent);
    box-shadow: 0 12px 28px rgb(6 10 22 / 25%);
    backdrop-filter: blur(12px);
}

#tasks .toolbar .search-box {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 65%, transparent);
    border-radius: 14px;
    padding: 0.35rem 0.6rem;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#tasks .toolbar .search-box input {
    font-size: 0.95rem;
    padding: 0.6rem 0.75rem 0.6rem 2.4rem;
    border: none;
    background: transparent;
    box-shadow: none;
}

#tasks .toolbar .search-box i {
    left: 0.9rem;
    font-size: 1rem;
    color: var(--text-tertiary);
}

#tasks .toolbar .search-box .clear-search {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 55%, transparent);
    color: var(--text-secondary);
}

#tasks .toolbar .search-box .clear-search:hover {
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    color: var(--text-primary);
}

#tasks .toolbar .view-controls {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
    border-radius: 14px;
    padding: 0.25rem;
    align-self: center;
}

#tasks .toolbar .view-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

#tasks .toolbar .view-btn.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
    color: #fff;
    box-shadow: 0 8px 18px rgb(59 130 246 / 25%);
}

@media (width <= 900px) {
    #tasks .toolbar {
        grid-template-columns: 1fr;
    }

    #tasks .toolbar .view-controls {
        justify-content: center;
        width: 100%;
    }
}

/* ===============================
   Tasks: Premium Task Card System
   =============================== */
#tasks .task-item {
    position: relative;
    border-radius: 18px;
    padding: 1.05rem 1.1rem;
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--primary) 6%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--outline-soft) 55%, transparent);
    box-shadow: 0 12px 26px rgb(7 12 24 / 18%);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#tasks .task-item .task-header {
    align-items: center;
    gap: 0.75rem;
}

#tasks .task-item .task-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#tasks .task-item .task-meta {
    margin-top: 0.35rem;
}

#tasks .task-item .meta-item {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 55%, transparent);
}

#tasks .task-impact-chip {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 55%, transparent);
    border-radius: 999px;
}

#tasks .task-star {
    margin-left: auto;
    align-self: flex-start;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#tasks .task-item:hover .task-star {
    opacity: 1;
    transform: translateY(-1px);
}

#tasks .task-actions {
    margin-left: 0.5rem;
    align-self: flex-start;
    gap: 0.45rem;
}

#tasks .task-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
}

#tasks .task-action-btn:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 35%, transparent), color-mix(in srgb, var(--accent) 24%, transparent));
    color: #fff;
    border-color: transparent;
}

/* Details panel polish */
#tasks .details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
}

#tasks .details-title {
    font-size: 1.5rem;
    letter-spacing: 0.01em;
}

#tasks .details-subtitle {
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

#tasks .details-actions .btn-icon {
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
}

#tasks .details-body {
    display: grid;
    gap: 1.1rem;
    padding: 1rem 0;
}

#tasks .details-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}

#tasks .details-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

#tasks .details-meta-item {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 55%, transparent);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    box-shadow: 0 8px 18px rgb(7 12 24 / 16%);
}

#tasks .details-meta-item .meta-label {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#tasks .details-meta-item .meta-value {
    margin-top: 0.35rem;
    font-weight: 600;
}

#tasks .details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#tasks .details-footer {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.8rem;
    border-top: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
}

@media (width <= 900px) {
    #tasks .details-meta-grid {
        grid-template-columns: 1fr;
    }

    #tasks .details-footer {
        flex-direction: column;
    }
}

/* ===============================
   Tasks: Premium Desktop Harmonization
   =============================== */
@media (width >= 901px) {
    #tasks .task-list-panel,
    #tasks .task-details-panel {
        border-radius: 22px;
        background:
            radial-gradient(420px 240px at 15% 0%, rgb(99 102 241 / 12%), transparent 60%),
            linear-gradient(160deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface) 78%, transparent));
        border: 1px solid color-mix(in srgb, var(--outline-soft) 65%, transparent);
        box-shadow: 0 22px 52px rgb(4 8 18 / 32%);
    }

    #tasks .task-list-header {
        border-radius: 20px;
        background:
            linear-gradient(140deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
        border: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
        box-shadow: 0 10px 24px rgb(7 12 24 / 18%), inset 0 0 0 1px rgb(255 255 255 / 5%);
    }

    #tasks .task-item {
        padding: 1.2rem 1.25rem;
        border-radius: 22px;
        box-shadow: 0 18px 38px rgb(7 12 24 / 24%);
    }

    #tasks .task-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 26px 58px rgb(5 10 24 / 34%);
    }

    #tasks .task-actions .btn-icon {
        width: 36px;
        height: 36px;
    }
}

#tasks .task-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgb(255 255 255 / 6%);
    pointer-events: none;
}

#tasks .task-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 50%, transparent);
    box-shadow: 0 18px 36px rgb(6 10 22 / 28%);
}

#tasks .task-item.selected {
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    box-shadow: 0 20px 40px rgb(59 130 246 / 28%);
}

#tasks .task-item .task-title {
    font-weight: 700;
    letter-spacing: 0.01em;
}

#tasks .task-item .task-description {
    color: var(--text-secondary);
}

#tasks .task-item .task-priority {
    border: 1px solid color-mix(in srgb, currentcolor 35%, transparent);
    background: color-mix(in srgb, currentcolor 10%, transparent);
}

#tasks .task-item .task-meta {
    gap: 0.7rem;
    color: var(--text-tertiary);
}

#tasks .task-item .task-tags .task-tag {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 50%, transparent);
    border-radius: 999px;
}

#tasks .task-actions {
    opacity: 1;
    transform: none;
}

#tasks .task-actions .btn-icon {
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
}

#tasks .task-actions .btn-icon:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
    color: #fff;
}

#tasks .task-checkbox .checkbox {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 2px solid color-mix(in srgb, var(--outline-soft) 70%, transparent);
}

#tasks .task-checkbox .checkbox.checked {
    box-shadow: 0 6px 14px rgb(59 130 246 / 35%);
}

@media (width <= 900px) {
    #tasks .task-item {
        padding: 0.95rem;
        border-radius: 16px;
    }

    #tasks .task-actions {
        opacity: 1;
    }
}

/* ===============================
   Focusy Multi-Chat Tabs
   =============================== */

.ai-chat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.85rem 0 0.75rem;
}

.ai-chat-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--outline-soft) 55%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text-secondary);
    font-size: 0.82rem;
    transition: all 0.2s ease;
}

.ai-chat-tab:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    color: var(--text-primary);
}

.ai-chat-tab.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    color: var(--text-primary);
    box-shadow: 0 10px 22px rgb(15 23 42 / 30%);
}

.ai-chat-tab .ai-chat-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    color: var(--text-tertiary);
    font-size: 0.65rem;
}

.ai-chat-tab .ai-chat-close:hover {
    border-color: color-mix(in srgb, var(--outline-soft) 70%, transparent);
    color: var(--text-primary);
}

.ai-chat-tab.ai-chat-new {
    border-style: dashed;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--surface) 75%, transparent);
}

@media (width <= 680px) {
    .ai-chat-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.35rem;
    }
}

/* ===============================
   Performance + Section Rendering
   =============================== */

.section {
    content-visibility: auto;
    contain: content;
    contain-intrinsic-size: 800px;
}

.section.active {
    content-visibility: visible;
}





@media (width <= 900px) and (height <= 600px) {
    :root {
        --content-pad: clamp(10px, 2.5vw, 16px);
        --bottom-nav-height: clamp(42px, 10vh, 54px);
    }

    .app-container {
        --sidebar-width: 220px;
    }

    .header {
        padding: 0.35rem var(--content-pad);
    }

    .header-shell {
        gap: 0.5rem;
    }

    .header-mark {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .header-title {
        font-size: 0.9rem;
    }

    .header-subtitle {
        display: none;
    }

    .header-actions {
        gap: 0.35rem;
    }

    .header-actions .btn,
    .header-btn,
    .mobile-menu-btn {
        height: 34px;
    }

    .main-content {
        padding-top: calc(var(--content-pad) + 0.35rem);
    }

    .section-header {
        padding: 0.6rem 0.75rem;
    }

    .section-title {
        font-size: 1.05rem;
    }

    .section-subtitle {
        display: none;
    }

    .dashboard-header-actions .btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.78rem;
    }

    .sidebar {
        padding: 1rem 0.6rem;
    }

    .nav-link {
        padding: 0.6rem 0.7rem;
    }

    .bottom-nav-text {
        font-size: 0.62rem;
    }
}

/* ===============================
   Tasks + Calendar Final Polish
   =============================== */
#tasks .tasks-content {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
    gap: 1.5rem;
}

#tasks .task-list-panel,
#tasks .task-details-panel {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--outline-soft);
    border-radius: 20px;
    box-shadow: var(--shadow-tight);
}

#tasks .task-list-panel {
    padding: 1rem;
}

#tasks .toolbar {
    position: sticky;
    top: 0.75rem;
    margin-bottom: 0.85rem;
    z-index: 4;
}

#tasks .search-box {
    position: relative;
}

#tasks .search-box input {
    padding-left: 2.5rem;
}

#tasks .task-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 0.3rem 0.9rem;
}

#tasks .task-item {
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--outline-soft) 75%, transparent);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
}

#tasks .task-title {
    font-size: 1.02rem;
    letter-spacing: 0.01em;
}

#tasks .task-actions .btn-icon {
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--outline-soft) 65%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
}

#tasks .task-details-panel {
    padding: 1.1rem;
}

@media (width <= 1200px) {
    #tasks .tasks-content {
        grid-template-columns: 1fr;
    }

    #tasks .task-details-panel {
        position: static;
    }
}

@media (width <= 900px) {
    #tasks .toolbar {
        position: static;
    }

    #tasks .task-list-panel {
        padding-top: 1rem;
    }
}

.section#calendar .calendar-card {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--outline-soft);
    border-radius: clamp(16px, 2.2vw, 24px);
    box-shadow: var(--shadow-tight);
}

.section#calendar .calendar-controls {
    gap: 1rem;
}

.section#calendar .calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
}

.section#calendar .calendar-search {
    flex: 1 1 260px;
}

.section#calendar .calendar-search input {
    min-height: 44px;
}

.section#calendar .calendar-grid,
.section#calendar .calendar-week {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--outline-soft);
    border-radius: 16px;
}

.section#calendar .calendar-events-panel {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid var(--outline-soft);
    box-shadow: 0 16px 32px rgb(6 10 22 / 18%);
}

.section#calendar .calendar-event-card {
    border: 1px solid color-mix(in srgb, var(--outline-soft) 60%, transparent);
}

@media (width <= 900px) {
    .section#calendar .calendar-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .section#calendar .calendar-legend {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }
}

/* ===============================
   Section Suggestions Card
   =============================== */
.section-suggestions {
    margin: 0.85rem 0 1.1rem;
}

.section-suggestions .suggestion-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid var(--outline-soft);
    box-shadow: var(--shadow-tight);
}

.section-suggestions .suggestion-chip {
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--outline-soft) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.section-suggestions .suggestion-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    box-shadow: 0 8px 16px rgb(6 10 22 / 18%);
}

@media (width <= 700px) {
    .section-suggestions .suggestion-row {
        padding: 0.7rem 0.8rem;
    }

    .section-suggestions .suggestion-chip {
        font-size: 0.8rem;
    }
}

@media (width <= 720px) {
    #event-modal .modal-content {
        width: min(94vw, 560px);
        max-height: 86vh;
        margin: 6vh auto;
        padding: 18px;
    }

    #event-modal .modal-body {
        max-height: calc(86vh - 140px);
        overflow-y: auto;
    }
}

/* end import: public/css/zy/sections.css */
/* begin import: public/css/zy/overrides.css */
:root {
  --content-max: 1240px;
  --content-narrow: 980px;
  --card-gap: clamp(0.8rem, 1.6vw, 1.3rem);
  --card-pad-compact: clamp(0.9rem, 1.6vw, 1.25rem);
  --card-pad-roomy: clamp(1.1rem, 2vw, 1.7rem);
  --hero-glow: radial-gradient(800px 420px at 10% -10%, rgb(30 166 140 / 35%), transparent 60%);
  --hero-warm: radial-gradient(700px 380px at 90% 0%, rgb(242 95 58 / 25%), transparent 55%);
  --hero-sun: radial-gradient(500px 320px at 50% 0%, rgb(245 200 75 / 22%), transparent 60%);
  --app-readable-secondary: color-mix(in srgb, var(--text-primary) 78%, var(--background));
  --app-readable-tertiary: color-mix(in srgb, var(--text-primary) 58%, var(--background));
  --app-selection-bg: color-mix(in srgb, var(--primary) 34%, transparent);
  --app-selection-text: var(--text-primary);
  
  /* Premium Music Player Colors */
  --music-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  --music-gradient-accent: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --music-glow: 0 8px 32px rgba(99, 102, 241, 0.4);
  --music-glow-hover: 0 12px 40px rgba(99, 102, 241, 0.6);
}

/* ===============================
   PREMIUM MUSIC PLAYER STYLES
   =============================== */

/* Floating Player - Premium Redesign */
.floating-player {
  position: fixed;
  bottom: 28px;
  right: 18px;
  width: 64px;
  height: 64px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.98));
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  padding: 0;
  transform-origin: right center;
}

.floating-player::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: var(--music-gradient-primary);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.floating-player:hover::before,
.floating-player.expanded::before {
  opacity: 0.6;
}

.floating-player:hover,
.floating-player.expanded {
  width: 440px;
  height: 92px;
  border-radius: 28px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(99, 102, 241, 0.2),
    var(--music-glow-hover);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(20, 30, 48, 0.99));
  padding: 0 64px 0 1rem;
}

/* Premium Player Toggle Button */
.player-toggle {
  width: 60px;
  height: 60px;
  background: var(--music-gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 20px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.player-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%);
}

.player-toggle:hover,
.floating-player.expanded .player-toggle {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%);
  transform: scale(0.96);
  box-shadow: 
    0 6px 24px rgba(99, 102, 241, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Player Content Area */
.player-content {
  width: calc(100% - 64px);
  display: flex;
  align-items: center;
  gap: 1.125rem;
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-player:hover .player-content,
.floating-player.expanded .player-content {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Premium Album Art */
.player-cover {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}

.player-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.floating-player:hover .player-cover::before {
  opacity: 1;
}

.player-cover.has-cover {
  background-size: cover;
  background-position: center;
}

/* Music Wave Animation */
.player-cover .music-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}

.player-cover .music-wave span {
  width: 3px;
  background: var(--primary);
  border-radius: 2px;
  animation: musicWave 1s ease-in-out infinite;
}

.player-cover .music-wave span:nth-child(1) { animation-delay: 0s; height: 8px; }
.player-cover .music-wave span:nth-child(2) { animation-delay: 0.1s; height: 16px; }
.player-cover .music-wave span:nth-child(3) { animation-delay: 0.2s; height: 12px; }
.player-cover .music-wave span:nth-child(4) { animation-delay: 0.3s; height: 18px; }
.player-cover .music-wave span:nth-child(5) { animation-delay: 0.4s; height: 10px; }

@keyframes musicWave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.4); }
}

/* Premium Track Info */
.track-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.track-title {
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.track-artist {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Premium Player Controls */
.player-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.player-controls button {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.875rem;
}

.player-controls button:hover {
  background: var(--primary);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.player-controls button:active {
  transform: translateY(0) scale(0.95);
}

.player-controls button.play-pause {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--music-gradient-primary);
  color: white;
  font-size: 1rem;
  border: none;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.player-controls button.play-pause:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

/* Premium Progress Bar */
.player-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border-radius: 0 0 28px 28px;
}

.player-progress-fill {
  height: 100%;
  background: var(--music-gradient-primary);
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
  position: relative;
}

.player-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
}

/* Player Time Display */
.player-times {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ===============================
   MUSIC LIBRARY - PREMIUM STYLES
   =============================== */

/* Music Grid Premium */
.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: 0.5rem;
}

/* Premium Track Cards */
.music-track {
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-radius: 20px;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.music-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--music-gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 20px;
}

.music-track:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(99, 102, 241, 0.1);
}

.music-track:hover::before {
  opacity: 0.05;
}

.music-track.playing {
  border: 2px solid rgba(99, 102, 241, 0.5);
  box-shadow: 
    0 0 30px rgba(99, 102, 241, 0.2),
    inset 0 0 20px rgba(99, 102, 241, 0.05);
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.02));
}

/* Premium Album Art in Grid */
.track-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.track-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.music-track:hover .track-cover::before {
  opacity: 1;
}

.track-cover-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--text-tertiary);
}

.track-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.music-track:hover .track-cover img {
  transform: scale(1.08);
}

/* Play Overlay */
.track-cover .play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.music-track:hover .play-overlay {
  opacity: 1;
}

.play-overlay button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--music-gradient-primary);
  color: white;
  border: none;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.music-track:hover .play-overlay button {
  transform: scale(1);
}

.play-overlay button:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.5);
}

/* Premium Track Details */
.track-details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.track-details h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.track-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.track-tag {
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.2);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--primary);
}

/* Premium Toolbar */
.music-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.5rem;
}

.music-toolbar h3 {
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.music-toolbar h3::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--music-gradient-primary);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
}

/* Premium Search */
.music-search {
  position: relative;
  min-width: 280px;
  flex: 0 1 320px;
}

.music-search input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}

.music-search input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  outline: none;
}

.music-search i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 0.9375rem;
}

/* Premium Music Controls */
.music-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.music-controls button {
  padding: 0.625rem 1.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.music-controls button:hover {
  background: var(--primary);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .floating-player {
    bottom: 80px;
    right: 12px;
    width: 56px;
    height: 56px;
  }
  
  .floating-player:hover,
  .floating-player.expanded {
    width: calc(100vw - 24px);
    height: 80px;
    border-radius: 24px;
    right: 12px;
    left: 12px;
  }
  
  .player-toggle {
    width: 52px;
    height: 52px;
    font-size: 18px;
  }
  
  .music-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0.25rem;
  }
  
  .music-track {
    padding: 1rem;
    border-radius: 16px;
  }
  
  .track-cover {
    border-radius: 12px;
  }
  
  .music-toolbar {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .music-search {
    min-width: 100%;
    flex: 1;
  }
  
  .music-controls {
    width: 100%;
    justify-content: center;
  }
}

/* Desktop Enhancements */
@media (min-width: 1200px) {
  .music-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  
  .floating-player:hover,
  .floating-player.expanded {
    width: 480px;
  }
  
  .player-cover {
    width: 56px;
    height: 56px;
  }
}

/* ===============================
   TOUR / ONBOARDING STYLES
   =============================== */

/* Tour Spotlight - Dark overlay with cutout */
.tour-spotlight {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.tour-spotlight.active {
  opacity: 1;
  visibility: visible;
}

/* Tour Tooltip - Floating card */
.tour-tooltip {
  position: fixed;
  background: linear-gradient(145deg, rgb(14 22 34 / 98%), rgb(10 16 24 / 96%));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--glass-border));
  border-radius: 16px;
  padding: 1.25rem;
  max-width: 320px;
  z-index: 9999;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(99, 102, 241, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
}

.tour-tooltip.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tour-tooltip-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.tour-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tour-tooltip-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
}

.tour-tooltip-body {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.tour-tooltip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.tour-tooltip-actions {
  display: flex;
  gap: 0.5rem;
}

/* Step Indicator Dots */
.tour-step-indicator {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.tour-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease, transform 0.3s ease;
}

.tour-step-dot.active {
  background: var(--primary);
  transform: scale(1.2);
}

/* Tour Highlight on target elements */
.tour-highlight {
  position: relative;
  z-index: 9999 !important;
  box-shadow: 
    0 0 0 4px rgba(99, 102, 241, 0.4),
    0 0 30px rgba(99, 102, 241, 0.2),
    0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px;
  transition: all 0.3s ease;
  animation: tourPulse 2s infinite;
}

@keyframes tourPulse {
  0%, 100% {
    box-shadow: 
      0 0 0 4px rgba(99, 102, 241, 0.4),
      0 0 30px rgba(99, 102, 241, 0.2),
      0 0 0 9999px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow: 
      0 0 0 6px rgba(99, 102, 241, 0.6),
      0 0 40px rgba(99, 102, 241, 0.3),
      0 0 0 9999px rgba(0, 0, 0, 0.5);
  }
}

/* Skip Tour Button */
.tour-skip-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.tour-skip-btn.visible {
  opacity: 1;
  visibility: visible;
}

.tour-skip-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-secondary);
}

/* Mobile Tour Adjustments */
@media (max-width: 768px) {
  .tour-tooltip {
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
    top: auto !important;
    max-width: none;
    transform: translateY(20px);
  }
  
  .tour-tooltip.active {
    transform: translateY(0);
  }
  
  .tour-skip-btn {
    top: auto;
    bottom: 5.5rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  
  .tour-highlight {
    box-shadow: 
      0 0 0 4px rgba(99, 102, 241, 0.4),
      0 0 30px rgba(99, 102, 241, 0.2);
    animation: tourPulseMobile 2s infinite;
  }
  
  @keyframes tourPulseMobile {
    0%, 100% {
      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4), 0 0 30px rgba(99, 102, 241, 0.2);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.6), 0 0 40px rgba(99, 102, 241, 0.3);
    }
  }
}

/* Section transitions during tour */
.section.tour-active {
  scroll-margin-top: 100px;
}

/* Progress bar for tour */
.tour-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index: 10001;
  transition: width 0.3s ease;
}

.task-focus-card {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--primary, #6d5efc) 20%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary, #6d5efc) 16%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel, #161b25) 96%, #fff 4%), color-mix(in srgb, var(--panel, #161b25) 100%, transparent));
}

.task-focus-card-head,
.task-focus-actions,
.today-focus-meta,
.notes-template-strip-head,
.notes-folder-actions,
.notes-template-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-focus-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.task-focus-title {
  width: 100%;
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 700;
  cursor: pointer;
}

.task-focus-title.has-task {
  color: var(--primary, #6d5efc);
}

.task-focus-badge,
.notes-overview-card strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #6d5efc) 16%, transparent);
  color: var(--text-primary);
  font-weight: 700;
}

.today-focus-meta {
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 0.94rem;
}

.task-focus-insights,
.notes-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.task-focus-stat,
.notes-overview-card,
.integrations-coming-card {
  border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,0.08)) 85%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,0.04)) 92%, transparent);
  padding: 14px 16px;
}

.task-focus-stat .label,
.notes-overview-card .label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.quick-add-hint {
  margin: -6px 0 12px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.quick-add-hint code {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #6d5efc) 14%, transparent);
  color: var(--text-primary);
}

.notes-toolbar {
  display: grid;
  gap: 14px;
}

.notes-overview-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.notes-folder-actions,
.notes-template-actions {
  flex-wrap: wrap;
}

.notes-template-strip {
  margin-bottom: 18px;
  padding: 20px;
}

.notes-template-actions .btn {
  border-radius: 14px;
}

.notes-folder-modal {
  max-width: 560px;
}

.integrations-coming-card {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 280px;
  text-align: center;
  padding: 32px;
}

.integrations-coming-icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--primary, #6d5efc), color-mix(in srgb, var(--primary, #6d5efc) 62%, #fff));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--primary, #6d5efc) 28%, transparent);
}

@media (max-width: 860px) {
  .task-focus-card-head,
  .task-focus-actions,
  .notes-template-strip-head {
    flex-direction: column;
    align-items: stretch;
  }

  .task-focus-insights,
  .notes-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .task-focus-insights,
  .notes-overview-grid {
    grid-template-columns: 1fr;
  }

  .today-focus-meta,
  .notes-folder-actions,
  .notes-template-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.glass-card.task-focus-card {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--primary, #6d5efc) 20%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary, #6d5efc) 16%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel, #161b25) 96%, #fff 4%), color-mix(in srgb, var(--panel, #161b25) 100%, transparent));
}

.glass-card.task-focus-card .task-focus-title {
  width: 100%;
  text-align: left;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 700;
}

body {
  background-image: var(--hero-glow), var(--hero-warm), var(--hero-sun);
  background-attachment: fixed;
  color: var(--text-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: 0.003em;
}

::selection {
  background: var(--app-selection-bg);
  color: var(--app-selection-text);
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  background: rgb(10 16 24 / 95%);
  color: #e5e7eb;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--glass-border));
  transform: translateY(-140%);
  transition: transform 160ms ease;
  z-index: 10000;
}

.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.section-header h2,
.section-header h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p,
li,
.section-subtitle,
.card-header p,
.zyui-subtitle,
.text-secondary {
  color: var(--app-readable-secondary);
  line-height: 1.65;
}

.text-tertiary,
.zyui-meta,
.form-helper,
.text-helper,
.field-hint,
.field-meta,
.muted {
  color: var(--app-readable-tertiary);
  line-height: 1.6;
}

label,
.form-label,
.zyui-label {
  color: var(--app-readable-secondary);
}

.form-input,
.form-textarea,
.form-select,
select,
textarea,
input {
  color: var(--text-primary);
}

.main-content {
  padding: var(--content-pad);
}

.main-content > .section {
  width: 100%;
  max-width: var(--content-max);
}

.section-header {
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 720px;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.card-header h3,
.card-header h4 {
  margin: 0;
  letter-spacing: -0.01em;
}

.card-header p {
  margin: 0.2rem 0 0;
  color: var(--text-tertiary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.card-grid,
.stats-grid,
.actions-grid {
  gap: var(--card-gap);
}

.glass-card,
.stat-card,
.note-card,
.task-item,
.store-card {
  padding: var(--card-pad-roomy);
  border-radius: var(--radius-card);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface) 80%, transparent)),
    radial-gradient(420px 180px at 10% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 22px 48px rgb(6 12 24 / 40%);
  transition: transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease);
}

.glass-card:hover,
.stat-card:hover,
.note-card:hover,
.task-item:hover,
.store-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--glass-border));
  box-shadow: 0 28px 60px rgb(6 12 24 / 50%);
}

.form-input,
.form-textarea,
.form-select,
select {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.btn,
.btn-primary,
.btn-secondary {
  min-height: 44px;
  letter-spacing: 0.02em;
}

.btn {
  font-weight: 600;
  border-radius: 12px;
}

.btn-sm,
.btn-small {
  min-height: 38px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.btn-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  font-weight: 600;
}

.form-helper,
.text-helper,
.field-hint {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

.form-error,
.field-error,
.input-error {
  font-size: 0.8rem;
  color: var(--danger, #ef4444);
}

.input-with-icon {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.input-with-icon .form-input {
  border: none;
  background: transparent;
  min-height: 38px;
  padding: 0;
  box-shadow: none;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent);
}

.toolbar,
.filters,
.quick-add,
.notes-toolbar,
.calendar-toolbar {
  border-radius: 16px;
}

.empty-state,
.empty-card,
.details-empty {
  padding: 1rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
}

.ai-shell {
  max-width: var(--content-narrow);
  margin: 0 auto;
}

.ai-input-row {
  gap: 0.75rem;
}

.ai-input-row .btn {
  min-width: 120px;
}

.modal-content,
.modal2 .modal-content,
.modal3-content {
  max-width: min(92vw, 880px);
}

.modal-overlay {
  backdrop-filter: blur(10px);
  background: rgb(6 10 20 / 70%);
}

.modal-content {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  background: linear-gradient(160deg, rgb(16 24 32 / 96%), rgb(10 16 28 / 96%));
  box-shadow: 0 28px 70px rgb(5 10 20 / 55%);
}

.modal-header,
.notes-modal-header,
.modal3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.modal-body,
.notes-modal-body,
.modal3-body {
  display: grid;
  gap: 0.85rem;
}

.modal-footer,
.notes-modal-footer,
.modal3-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.modal-open {
  overflow: hidden;
}

.section > .glass-card,
.section > .stats-grid,
.section > .actions-grid,
.section > .notes-toolbar,
.section > .calendar-card,
.section > .tasks-content,
.section > .project-hub-shell {
  margin-top: 1rem;
}

.section-header .section-subtitle,
.section-subtitle,
.text-tertiary {
  color: var(--text-tertiary);
}

.stats-grid .stat-card,
.card-grid .glass-card {
  border-radius: calc(var(--radius-card) + 4px);
}

.header {
  backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}

.about-page-content {
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.about-page-shell {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: var(--card-gap);
}

.about-hero-card {
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.about-link-row {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.about-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--card-gap);
}

.about-app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.about-app-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}

.about-app-links a.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

@supports (padding-top: env(safe-area-inset-top)) {
  .header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .header-shell {
    min-height: calc(78px + env(safe-area-inset-top, 0px));
  }

  @media (width <= 768px) {
    .header {
      padding-top: env(safe-area-inset-top, 0px);
    }

    .header-shell {
      min-height: calc(56px + env(safe-area-inset-top, 0px));
    }
  }
}

.sidebar {
  background: linear-gradient(180deg, rgb(19 26 34 / 98%), rgb(15 20 28 / 95%));
  border-right: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}

.nav-link.active,
.bottom-nav-link.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, white), color-mix(in srgb, var(--accent) 70%, white));
  color: #0b1217;
}

@media (width <= 1024px) {
  .main-content > .section {
    max-width: 100%;
  }

  .glass-card,
  .stat-card,
  .note-card,
  .task-item,
  .store-card {
    padding: var(--card-pad-compact);
  }
}

@media (width <= 900px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 12;
  }

  .main-content {
    padding: clamp(0.9rem, 3vw, 1.4rem);
  }

  .section-header {
    margin-bottom: var(--space-2);
  }

  .card-grid,
  .stats-grid,
  .actions-grid {
    grid-template-columns: 1fr;
  }
}

@media (width <= 900px) and (orientation: landscape) {
  /* Force desktop sidebar on phone landscape */
  :root {
    --sidebar-width: 220px;
  }

  .bottom-nav,
  .mobile-sidebar,
  .mobile-sidebar-overlay,
  .mobile-menu-btn,
  .sidebar-overlay {
    display: none !important;
  }

  .sidebar,
  .sidebar-toggle {
    display: block !important;
  }

  .app-container {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-areas:
      "sidebar header"
      "sidebar main";
    padding-bottom: 0;
  }

  .main-content {
    padding: clamp(0.75rem, 2vw, 1.1rem);
  }
}

/* Device sync status */
.device-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid rgb(255 255 255 / 12%);
  background: rgb(8 12 18 / 60%);
  color: var(--text-secondary);
}

.device-status.online {
  border-color: rgb(34 197 94 / 40%);
  color: #d1fae5;
  background: rgb(34 197 94 / 16%);
}

.device-status.offline {
  border-color: rgb(148 163 184 / 40%);
  color: #e2e8f0;
  background: rgb(148 163 184 / 14%);
}

/* Device link upgrade */
.device-link-panel {
  background: linear-gradient(150deg, rgb(16 24 32 / 94%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  box-shadow: 0 16px 40px rgb(6 12 20 / 35%);
}

.device-link-step {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgb(30 166 140 / 18%);
  border: 1px solid rgb(30 166 140 / 40%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.device-link-pair {
  display: grid;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  background: rgb(8 12 18 / 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
}

.device-link-pair .pair-label {
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

.device-link-pair .pair-code {
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  font-weight: 700;
}

.device-link-verify {
  display: grid;
  gap: 0.4rem;
  min-width: 160px;
}

.device-link-verify .form-input {
  height: 38px;
}

#device-link-requests .device-link-request {
  flex-wrap: wrap;
  gap: 0.75rem;
}

.device-link-status {
  margin-top: 0.6rem;
}

/* Mobile viewport safety: prevent horizontal overflow + zoomy layout shifts */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.app-container,
.main-content,
.section,
.section-inner,
.section-content {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

@media (width <= 768px) {
  /* iPhone Safe Area & Dynamic Island Support */
  .app-container {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: max(env(safe-area-inset-bottom), 34px);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Premium iOS-style Header - at the very top */
  .header {
    padding-top: env(safe-area-inset-top, 0px);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(15, 23, 42, 0.75);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  }

  /* iOS-style Bottom Navigation */
  .bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), 20px);
    height: calc(64px + env(safe-area-inset-bottom));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(15, 23, 42, 0.85);
    border-top: 0.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }

  .bottom-nav-item {
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .bottom-nav-item.active {
    color: var(--primary);
    transform: scale(1.05);
  }

  /* iPhone Sidebar with Premium Glass */
  .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: max(env(safe-area-inset-bottom), 20px);
    padding-left: max(1rem, env(safe-area-inset-left));
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    background: rgba(15, 23, 42, 0.92);
    border-right: 0.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  }

  /* Premium iOS-style Touch Targets */
  button, .btn, .icon-btn, .nav-item, .menu-item, .list-item, .card {
    min-height: 44px;
    min-width: 44px;
    border-radius: 12px;
  }

  /* iOS Haptic Touch Feedback */
  button, .btn, .icon-btn, .nav-item, .menu-item, .card, .list-item {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.15);
    touch-action: manipulation;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s ease;
  }

  button:active, .btn:active, .icon-btn:active, .nav-item:active {
    transform: scale(0.96);
    background-color: rgba(99, 102, 241, 0.1);
  }

  /* Premium iOS Typography - SF Pro style */
  html {
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.47059;
    letter-spacing: -0.022em;
  }

  h1 { 
    font-size: 1.75rem; 
    font-weight: 700;
    letter-spacing: -0.021em;
  }
  h2 { 
    font-size: 1.375rem; 
    font-weight: 600;
    letter-spacing: -0.021em;
  }
  h3 { 
    font-size: 1.125rem; 
    font-weight: 600;
    letter-spacing: -0.021em;
  }

  /* iOS Premium Inputs */
  input, select, textarea {
    font-size: 17px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    min-height: 44px;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
  }

  /* iPhone Optimized Spacing */
  .section {
    padding: 1rem;
    gap: 1rem;
  }

  /* Premium iOS Cards */
  .card, .glass-card, .panel {
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    background: linear-gradient(135deg, 
      rgba(255, 255, 255, 0.08) 0%, 
      rgba(255, 255, 255, 0.02) 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.08),
      inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
  }

  /* Prevent text selection on UI elements */
  .btn, .icon-btn, .nav-item, .bottom-nav-item, .header-actions {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Premium iOS Scrolling */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* iOS Pull-to-Refresh Premium */
  .pull-indicator {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.2),
      0 0 0 0.5px rgba(255, 255, 255, 0.1);
  }

  .pull-indicator.visible {
    top: max(20px, env(safe-area-inset-top));
  }

  /* Swipe gesture hints */
  .swipe-hint {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    pointer-events: none;
  }

  /* iOS Premium Modals */
  .modal-content {
    width: 92%;
    max-width: 420px;
    max-height: 85vh;
    margin: auto;
    border-radius: 20px;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    background: rgba(15, 23, 42, 0.95);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.5),
      0 0 0 0.5px rgba(255, 255, 255, 0.1);
  }

  /* iOS Bottom Sheet Premium */
  .bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 24px 24px 0 0;
    padding: 1.25rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    max-height: 85vh;
    overflow-y: auto;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  }

  .bottom-sheet.open {
    transform: translateY(0);
  }

  .bottom-sheet-handle {
    width: 40px;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin: 0 auto 1.25rem;
  }

  /* iOS Premium Buttons */
  .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  }

  .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-weight: 600;
  }

  /* iPhone Status Bar Area */
  .status-bar-spacer {
    height: max(44px, env(safe-area-inset-top));
  }

  /* Premium Scrollbar for iOS */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
  }

  /* iOS Segmented Control Style */
  .segmented-control {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 2px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
  }

  .segmented-control button {
    flex: 1;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
  }

  .segmented-control button.active {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .header-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .header-actions > * {
    min-width: 0;
  }

  .card,
  .panel,
  .glass-card,
  .section-card {
    max-width: 100%;
  }
}

/* ===============================
   PERFORMANCE OPTIMIZATIONS
   =============================== */

/* GPU Acceleration for animated elements */
.sidebar,
.modal,
.bottom-sheet,
.card,
.glass-card,
.btn,
.nav-item {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Content visibility for off-screen sections */
.section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Lazy loading placeholder */
.lazy-image {
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.05) 0%, 
    rgba(255,255,255,0.1) 50%, 
    rgba(255,255,255,0.05) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Skeleton screens */
.skeleton {
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.05) 0%, 
    rgba(255,255,255,0.1) 50%, 
    rgba(255,255,255,0.05) 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 0.75em;
}

.skeleton-circle {
  border-radius: 50%;
}

@keyframes skeleton-loading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .skeleton,
  .lazy-image {
    animation: none;
  }
}

/* Page transitions */
.page-transition-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-transition-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-transition-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Smooth loading states */
.loading-skeleton {
  pointer-events: none;
}

/* Optimized focus states for accessibility */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

/* Staggered animation delays for lists */
.stagger-list > *:nth-child(1) { animation-delay: 0ms; }
.stagger-list > *:nth-child(2) { animation-delay: 50ms; }
.stagger-list > *:nth-child(3) { animation-delay: 100ms; }
.stagger-list > *:nth-child(4) { animation-delay: 150ms; }
.stagger-list > *:nth-child(5) { animation-delay: 200ms; }
.stagger-list > *:nth-child(6) { animation-delay: 250ms; }

/* Micro-interactions */
.micro-bounce {
  animation: microBounce 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes microBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Loading spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Image loading optimization */
img {
  content-visibility: auto;
}

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Virtual scrolling optimization */
.virtual-list {
  contain: strict;
  will-change: scroll-position;
}

/* Debounced hover for performance */
@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .glass-card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
  }
}

/* Print optimizations */
@media print {
  .sidebar,
  .bottom-nav,
  .header-actions,
  .pull-indicator {
    display: none !important;
  }
  
  .card,
  .glass-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

.sync-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgb(34 197 94 / 14%);
  border: 1px solid rgb(34 197 94 / 35%);
  color: #d1fae5;
  box-shadow: 0 0 0.4rem rgb(34 197 94 / 18%);
}

.sync-live-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 8px rgb(34 197 94 / 70%);
}

.sync-live-pill[data-state="offline"] {
  background: rgb(148 163 184 / 14%);
  border-color: rgb(148 163 184 / 35%);
  color: #e2e8f0;
  box-shadow: none;
}

.sync-live-pill[data-state="offline"]::before {
  background: #94a3b8;
  box-shadow: none;
}

/* ===============================
   HEADER & NOTIFICATION FIX
   =============================== */

/* Desktop: Move notifications below header */
@media (width > 900px) {
  .notification-container,
  .toast-container,
  [class*="notification"],
  [class*="toast"] {
    top: 80px !important;
    z-index: 10000 !important;
  }
  
  /* Ensure notifications are always on top */
  .notification,
  .toast,
  .notification-toast {
    z-index: 10001 !important;
    position: fixed !important;
  }
}

/* Modern Profile Section */
.profile-modern {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
}

.profile-header-modern {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.15) 0%, 
    rgba(15, 23, 42, 0.8) 100%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
}

.profile-avatar-modern {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  box-shadow: 
    0 10px 40px rgba(99, 102, 241, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.1);
  position: relative;
}

.profile-avatar-modern::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.profile-info-modern h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.profile-info-modern p {
  color: var(--text-secondary);
  font-size: 1rem;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.profile-stat-card {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.profile-stat-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
}

.profile-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.profile-stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Modern Workspace Section */
.workspace-modern {
  display: grid;
  gap: 1.5rem;
}

.workspace-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.workspace-card-modern {
  padding: 1.5rem;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.workspace-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.3);
}

.workspace-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.workspace-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
}

.workspace-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.workspace-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.workspace-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workspace-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Settings Section Modern */
.settings-section-modern {
  display: grid;
  gap: 1rem;
}

.settings-group-modern {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.settings-group-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.settings-item-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-item-modern:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-item-info h4 {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.settings-item-info p {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Toggle Switch Modern */
.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.toggle-switch.active {
  background: var(--primary);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active::after {
  transform: translateX(24px);
}

#device-link-refresh.pulse {
  animation: deviceLinkPulse 0.6s ease-out;
}

@keyframes deviceLinkPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0.75rem rgba(99, 102, 241, 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
  }
}

#device-join-cancel {
  margin-top: 0.4rem;
}

.whats-new-modal .whats-new-intro {
  margin: 0.4rem 0 1rem;
  font-size: 0.92rem;
}

@media (width <= 640px) {
  .btn,
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .ai-input-row {
    flex-direction: column;
  }

  .ai-input-row .btn {
    min-width: 100%;
  }

  .modal-content,
  .modal2 .modal-content,
  .modal3-content {
    padding: 1.1rem;
  }
}

/* Global Section Upgrades v3.1 */
.section {
  display: block;
}

.section .section-header {
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border-radius: calc(var(--radius-card) + 4px);
  background: linear-gradient(135deg, rgb(16 24 32 / 94%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 22px 50px rgb(6 12 20 / 42%);
}

.section .section-subtitle {
  max-width: 720px;
}

.section .glass-card,
.section .stat-card,
.section .stat-card-enhanced,
.section .note-card,
.section .task-item,
.section .store-card {
  border-radius: calc(var(--radius-card) + 4px);
}

.section .toolbar,
.section .filters,
.section .quick-add {
  border-radius: 14px;
}

/* Timer */
#timer .timer-shell,
#timer .focus-panel,
#timer .break-panel,
#timer .session-panel {
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 24px 56px rgb(6 12 20 / 45%);
}

#timer .timer-actions .btn,
#timer .timer-controls .btn {
  background: linear-gradient(135deg, rgb(30 166 140 / 18%), rgb(242 95 58 / 18%));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--glass-border));
}

#timer .timer-core {
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  border-radius: 22px;
  padding: 1.6rem;
  background: linear-gradient(135deg, rgb(10 18 28 / 85%), rgb(18 28 40 / 70%));
}

#timer .timer-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.25rem 0 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  background: linear-gradient(135deg, rgb(12 18 28 / 82%), rgb(17 27 39 / 72%));
}

#timer .timer-command-kicker {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 62%, white);
}

#timer .timer-command-text strong {
  font-size: 0.98rem;
  color: var(--text-primary);
}

#timer .timer-preset-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

#timer .timer-preset-btn {
  min-height: 42px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  background: linear-gradient(135deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02));
  color: var(--text-primary);
  font-weight: 600;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

#timer .timer-preset-btn:hover,
#timer .timer-preset-btn:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--glass-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, transparent), rgb(255 255 255 / 0.06));
}

#timer .timer-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 1.15rem;
  align-items: start;
}

#timer .timer-main-stage,
#timer .timer-side-stage {
  display: grid;
  gap: 1rem;
}

#timer .timer-insight-card {
  padding: 1.15rem 1.1rem;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  background: linear-gradient(145deg, rgb(10 18 28 / 84%), rgb(18 27 40 / 70%));
  box-shadow: 0 18px 40px rgb(5 10 20 / 28%);
}

#timer .timer-insight-card-primary {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 16%, transparent), transparent 38%),
    linear-gradient(145deg, rgb(10 18 28 / 88%), rgb(18 27 40 / 74%));
}

#timer .timer-insight-kicker {
  margin-bottom: 0.85rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 60%, white);
}

#timer .timer-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

#timer .timer-insight-tile {
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
  background: rgb(255 255 255 / 0.03);
}

#timer .timer-insight-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

#timer .timer-insight-tile strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--text-primary);
}

#timer .timer-insight-tile small {
  color: var(--text-tertiary);
}

#timer .timer-preference-list {
  display: grid;
  gap: 0.85rem;
}

#timer .timer-progress-panel {
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  background: linear-gradient(145deg, rgb(11 18 28 / 76%), rgb(18 28 40 / 62%));
}

#timer .timer-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

#timer .timer-progress-rail {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
}

#timer .timer-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--accent, var(--primary)) 72%, white));
  transition: width 0.3s ease;
}

#timer .timer-display {
  letter-spacing: 0.06em;
}

#timer .timer-session-panel {
  margin-top: 1.25rem;
  padding: 1.2rem 1.3rem;
  border-radius: 18px;
  background: linear-gradient(145deg, rgb(16 24 34 / 86%), rgb(18 30 44 / 70%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  display: grid;
  gap: 0.85rem;
}

#timer .timer-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#timer .timer-session-header h4 {
  margin: 0 0 0.1rem 0;
  font-size: 1rem;
}

#timer .timer-session-track {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: thin;
}

#timer .session-chip {
  min-width: 46px;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.75rem;
  text-align: center;
  background: rgb(10 18 26 / 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--glass-border));
  color: var(--text-secondary);
}

#timer .session-chip[data-state="active"] {
  background: linear-gradient(135deg, rgb(30 166 140 / 25%), rgb(12 60 48 / 45%));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--glass-border));
  color: var(--text-primary);
}

#timer .session-chip[data-state="break"] {
  background: linear-gradient(135deg, rgb(242 95 58 / 18%), rgb(120 40 22 / 45%));
  border-color: color-mix(in srgb, rgb(242 95 58) 35%, var(--glass-border));
  color: var(--text-primary);
}

#timer .session-chip[data-state="done"] {
  background: linear-gradient(135deg, rgb(86 218 178 / 35%), rgb(18 60 48 / 55%));
  border-color: color-mix(in srgb, rgb(86 218 178) 40%, var(--glass-border));
  color: #e8fff6;
}

#timer .timer-session-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

#timer .timer-session-status {
  font-weight: 600;
  color: var(--text-primary);
}

#timer .timer-session-hint {
  white-space: nowrap;
}

#timer .timer-history-card,
#timer .timer-context-card,
#timer .ritual-card,
#timer .craft-card,
#timer .timer-parallel {
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  background: linear-gradient(145deg, rgb(10 18 28 / 84%), rgb(18 28 40 / 68%));
}

@media (max-width: 720px) {
  #timer .timer-session-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1080px) {
  #timer .timer-stage-grid {
    grid-template-columns: 1fr;
  }

  #timer .timer-command-bar {
    flex-direction: column;
    align-items: stretch;
  }

  #timer .timer-preset-cluster {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  #timer .timer-insight-grid {
    grid-template-columns: 1fr;
  }

  #timer .timer-command-bar,
  #timer .timer-progress-panel,
  #timer .timer-insight-card {
    padding: 0.95rem;
  }

  #timer .timer-preset-btn {
    flex: 1 1 calc(50% - 0.65rem);
    justify-content: center;
  }
}

.battery-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--glass-border));
  background: rgba(12, 18, 28, 0.7);
  color: var(--text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
}

.battery-indicator.hidden {
  display: none;
}

.battery-icon {
  width: 26px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.battery-icon::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 3px;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
}

.battery-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, rgb(86 218 178), rgb(30 166 140));
  transition: width 0.4s ease;
}

.battery-percent {
  position: relative;
  z-index: 1;
  font-size: 0.6rem;
  font-weight: 700;
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.55);
  letter-spacing: 0.01em;
  line-height: 1;
}

.battery-indicator[data-state="charging"] .battery-fill {
  background: linear-gradient(90deg, rgb(56 189 248), rgb(59 130 246));
}

.battery-indicator[data-state="saving"] .battery-fill {
  background: linear-gradient(90deg, rgb(248 200 109), rgb(245 158 11));
}

.battery-indicator[data-state="full"] .battery-fill {
  background: linear-gradient(90deg, rgb(134 239 172), rgb(22 163 74));
}

@media (max-width: 960px) {
  .battery-status {
    display: none;
  }
}

.header-workspace-switcher {
  position: relative;
}

.header-workspace-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--glass-border));
  background: rgba(12, 18, 28, 0.7);
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.header-workspace-btn i {
  font-size: 0.7rem;
  opacity: 0.7;
}

.header-workspace-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 220px;
  padding: 0.75rem;
  border-radius: 16px;
  background: rgba(12, 18, 28, 0.95);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 45px rgb(6 12 20 / 45%);
  display: grid;
  gap: 0.6rem;
  z-index: 40;
}

.header-workspace-menu-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.85rem;
}

.header-workspace-menu-list {
  display: grid;
  gap: 0.45rem;
}

.header-workspace-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 0.78rem;
  text-align: left;
}

.header-workspace-item.active {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--glass-border));
  color: var(--text-primary);
  background: rgba(30, 166, 140, 0.12);
}

.header-workspace-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ws-color, var(--primary));
}

.header-workspace-meta {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

@media (max-width: 960px) {
  .header-workspace-btn {
    padding: 0.4rem 0.55rem;
  }
  .header-workspace-label {
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 980px) {
  .header {
    backdrop-filter: blur(18px);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--primary) 3%), color-mix(in srgb, var(--surface) 90%, transparent));
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
    box-shadow: 0 18px 40px rgba(6, 12, 20, 0.26);
  }

  .header-shell {
    width: min(100%, 1520px);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.1rem;
    padding: 0.72rem 1.25rem;
    border-radius: 0 0 24px 24px;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--primary) 4%), color-mix(in srgb, var(--surface) 88%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--glass-border));
    border-top: 0;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  }

  .header-left {
    min-width: 0;
  }

  .header-brand {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
  }

  .header-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 18%, rgb(12 18 28 / 96%)), color-mix(in srgb, var(--surface) 86%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--glass-border));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 14%, transparent);
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  .header-title {
    font-size: 1.05rem;
    line-height: 1.05;
    letter-spacing: -0.015em;
  }

  .header-subtitle {
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--text-secondary) 88%, transparent);
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .header-actions {
    justify-content: flex-end;
    gap: 0.55rem;
    padding: 0.42rem 0.5rem 0.42rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(145deg, rgb(12 18 28 / 72%), rgb(18 28 40 / 48%));
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), 0 12px 28px rgb(6 12 20 / 18%);
  }

  .header-status-pill {
    min-height: 40px;
    padding: 0.35rem 0.7rem;
    background: linear-gradient(145deg, rgb(12 18 28 / 72%), rgb(18 28 40 / 48%));
    border-color: color-mix(in srgb, var(--primary) 20%, var(--glass-border));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  }

  .header-status-pill .sync-pill,
  .header-status-pill .sync-live-pill,
  .header-status-pill #offline-ready-pill {
    font-size: 0.72rem;
  }

  .battery-indicator {
    min-height: 40px;
    padding: 0.35rem 0.7rem;
    background: linear-gradient(145deg, rgb(12 18 28 / 72%), rgb(18 28 40 / 48%));
    border-color: color-mix(in srgb, var(--primary) 18%, var(--glass-border));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  }

  .header-workspace-btn {
    min-height: 40px;
    padding: 0.5rem 0.82rem;
    background: linear-gradient(145deg, rgb(12 18 28 / 72%), rgb(18 28 40 / 48%));
    border-color: color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  }

  .header-profile-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .header-profile-tab {
    min-height: 40px;
    padding-inline: 0.95rem;
    border-radius: 999px;
    background: linear-gradient(145deg, rgb(12 18 28 / 72%), rgb(18 28 40 / 48%));
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  }

  .header .zyui-icon-btn {
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, rgb(12 18 28 / 76%), rgb(18 28 40 / 54%));
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
    border-radius: 13px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }

  .header .zyui-icon-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--glass-border));
    box-shadow: 0 14px 28px rgba(6, 12, 20, 0.22);
  }

  .header .zyui-icon-btn:focus-visible,
  .header-profile-tab:focus-visible,
  .header-workspace-btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 32%, transparent);
  }

  .mobile-menu-btn {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .header {
    backdrop-filter: blur(16px);
    background: linear-gradient(180deg, rgba(10, 16, 30, 0.92), rgba(10, 16, 30, 0.78));
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
    box-shadow: 0 16px 34px rgba(6, 10, 22, 0.35);
  }

  .header-shell {
    gap: 0.65rem;
  }

  .header-brand {
    gap: 0.55rem;
  }

  .header-actions {
    border-radius: 999px;
    background: rgba(12, 18, 28, 0.55);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--glass-border));
    padding: 0.4rem 0.55rem;
  }

  .header-btn,
  .header-profile-btn,
  .mobile-menu-btn {
    background: rgba(12, 18, 28, 0.6);
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
    border-radius: 14px;
    box-shadow: 0 10px 18px rgba(7, 12, 24, 0.22);
  }
}

/* Notes */
#notes .note-card,
#notes .note-editor,
#notes .notes-sidebar {
  background: linear-gradient(150deg, rgb(16 24 32 / 93%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 18px 42px rgb(6 12 20 / 40%);
}

#notes .note-card {
  box-sizing: border-box;
  padding: 1.1rem 1.4rem;
  padding-left: calc(1.4rem + 0.35rem);
  min-width: 0;
}

#notes .note-card[style*="--note-bg-image"] {
  background-image: linear-gradient(rgba(12, 18, 34, 0.72), rgba(12, 18, 34, 0.72)), var(--note-bg-image);
  background-size: cover;
  background-position: center;
}

#notes .note-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 0.75rem;
  align-items: start;
}

#notes .note-header .note-title {
  grid-column: 1;
  grid-row: 1;
}

#notes .note-header .note-badges {
  grid-column: 1;
  grid-row: 2;
}

#notes .note-header .note-action-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

#notes .note-title {
  margin: 0;
  line-height: 1.3;
  min-width: 0;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#notes .note-badges {
  grid-column: 1 / -1;
  margin: 0;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 100%;
}

#notes .note-content {
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-line-clamp: 2;
}

#notes .note-footer {
  margin-top: 0.55rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#notes .note-tags {
  max-width: 100%;
}

#notes .note-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#notes .notes-grid.list-view .note-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

#notes .notes-toolbar .btn,
#notes .note-actions .btn {
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
}

/* Projects */
#projects .project-card,
#projects .project-panel,
#projects .project-details {
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 42%);
}

/* Projects v3.1 upgrade */
#projects .project-hub-shell {
  display: grid;
  gap: var(--card-gap);
}

#projects .project-hero-card {
  padding: var(--card-pad-roomy);
  position: relative;
  overflow: hidden;
}

#projects .project-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 240px at 10% 0%, rgb(59 130 246 / 18%), transparent 60%),
    radial-gradient(380px 240px at 100% 0%, rgb(16 185 129 / 14%), transparent 60%);
  pointer-events: none;
  opacity: 0.8;
}

#projects .project-hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem 2rem;
  align-items: center;
  margin-bottom: 1rem;
}

#projects .project-hero-kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

#projects #project-hero-title {
  margin: 0.35rem 0 0.4rem;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.02em;
}

#projects #project-hero-subtitle {
  max-width: 560px;
  margin: 0;
}

#projects .project-hero-score {
  display: grid;
  gap: 0.4rem;
  place-items: center center;
  padding: 0.6rem 0.75rem;
  border-radius: 16px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 10%);
}

#projects .project-hero-actions {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#projects .project-hero-select,
#projects .project-hero-add,
#projects .project-hero-quick {
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.6rem;
}

#projects .project-hero-add-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

#projects .project-hero-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#projects .project-hero-quick-actions .btn {
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  background: rgb(99 102 241 / 14%);
  border: 1px solid rgb(99 102 241 / 25%);
}

  #projects .project-hub-grid {
    display: grid;
    gap: var(--card-gap);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  #projects .project-hub-grid,
  #projects .project-hub-shell {
    align-items: stretch;
  }

  #projects .project-panel {
    display: grid;
    gap: 0.85rem;
    min-height: 0;
  }

  #projects .project-panel > * {
    min-width: 0;
  }

#projects .project-strategy-panel {
  display: grid;
  gap: 0.9rem;
}

#projects .project-strategy-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#projects .project-list-block {
  display: grid;
  gap: 0.6rem;
}

#projects .project-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

#projects .project-list-add {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#projects .project-list {
  display: grid;
  gap: 0.5rem;
  max-height: 220px;
  overflow: auto;
}

#projects .project-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
}

.ai-inline-card {
  display: grid;
  gap: 0.75rem;
}

.ai-inline-card-wide {
  padding: var(--card-pad-roomy);
}

.ai-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ai-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ai-inline-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
}

@media (width <= 900px) {
  #projects .project-strategy-grid {
    grid-template-columns: 1fr;
  }

  .ai-inline-input {
    grid-template-columns: 1fr;
  }
}

#projects .project-panel {
  padding: var(--card-pad-roomy);
  border-radius: calc(var(--radius-card) + 4px);
}

#projects .project-hub-stats,
#projects .project-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}

#projects .project-hub-stat,
#projects .project-kpi-card {
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  min-height: 88px;
}

#projects .project-hub-stat strong,
#projects .project-kpi-card strong {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

#projects .project-timeline {
  margin-top: 0.6rem;
}

#projects .project-timeline-list {
  display: grid;
  gap: 0.6rem;
}

#projects .project-timeline-item {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#projects .timeline-pill {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgb(59 130 246 / 18%);
  border: 1px solid rgb(59 130 246 / 35%);
  color: #dbeafe;
}

#projects .project-linked-panel .project-hub-list {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.6rem;
}

#projects .project-hub-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
  min-width: 0;
}

#projects .project-hub-item .item-label {
  min-width: 0;
  gap: 0.6rem;
}

#projects .project-hub-item .item-label span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#projects .project-hub-item .item-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-right: 0.4rem;
}

@media (width <= 800px) {
  #projects .project-hero-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  #projects .project-hero-add-row {
    flex-direction: column;
    align-items: stretch;
  }

  #projects .project-hero-actions {
    grid-template-columns: 1fr;
  }

  #projects .project-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* Calendar */
#calendar .calendar-shell,
#calendar .calendar-panel,
#calendar .calendar-sidebar {
  background: linear-gradient(150deg, rgb(16 24 32 / 93%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 42%);
}

#calendar .calendar-day,
#calendar .calendar-event {
  border-radius: 14px;
}

/* AI */
#ai .ai-shell,
#ai .ai-panel,
#ai .ai-card {
  background: linear-gradient(150deg, rgb(16 24 32 / 93%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 22px 54px rgb(6 12 20 / 45%);
}

#ai .ai-message.user {
  background: linear-gradient(135deg, rgb(30 166 140 / 20%), rgb(30 166 140 / 8%));
  border: 1px solid rgb(30 166 140 / 35%);
}

#ai .ai-message.assistant {
  background: rgb(8 12 18 / 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
}

/* Music */
#music .music-card,
#music .music-panel,
#music .music-player {
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 42%);
}

#music .music-toolbar {
  display: grid;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(10 16 28 / 88%), rgb(14 22 38 / 80%));
  border: 1px solid rgb(148 163 184 / 14%);
}

#music .music-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

#music .music-search {
  flex: 1 1 260px;
  min-width: 220px;
}

#music .music-search input {
  background: rgb(10 16 28 / 65%);
  border-radius: 999px;
  border: 1px solid rgb(148 163 184 / 18%);
  padding-left: 2.4rem;
}

#music .music-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

#music .music-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

#music .music-quick-actions .btn {
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  background: rgb(15 23 42 / 70%);
}

#music .music-now-playing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(140deg, rgb(12 20 32 / 95%), rgb(10 16 28 / 85%));
  border: 1px solid rgb(59 130 246 / 35%);
  box-shadow: 0 18px 44px rgb(0 0 0 / 35%);
  margin: 1rem 0 1.2rem;
}

#music .now-playing-info {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

#music .now-playing-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}

#music .now-playing-title {
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#music .now-playing-artist {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

#music .now-playing-meta {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

#music .now-playing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#music .now-playing-actions .btn {
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}

#music .music-playlist-panel {
  margin-top: 1.1rem;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(140deg, rgb(12 18 32 / 88%), rgb(10 14 24 / 82%));
  border: 1px solid rgb(148 163 184 / 16%);
  display: grid;
  gap: 0.85rem;
}

#music .music-storage-bar,
#music .music-download-progress {
  display: grid;
  gap: 0.4rem;
}

#music .storage-meta,
#music .progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

#music .storage-track,
#music .progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgb(15 23 42 / 70%);
  overflow: hidden;
  border: 1px solid rgb(148 163 184 / 18%);
}

#music .storage-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgb(59 130 246), rgb(16 185 129));
}

#music .progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgb(99 102 241), rgb(236 72 153));
}

#music .music-playlist-search {
  position: relative;
}

#music .music-playlist-search i {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

#music .music-playlist-search input {
  padding-left: 2.4rem;
  border-radius: 999px;
  background: rgb(10 16 28 / 65%);
  border: 1px solid rgb(148 163 184 / 18%);
}

#music .music-playlist-list {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#music .music-playlist-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  background: rgb(9 14 24 / 70%);
  border: 1px solid rgb(148 163 184 / 14%);
  text-align: left;
  color: inherit;
}

#music .music-playlist-card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, rgb(148 163 184 / 20%));
  transform: translateY(-1px);
}

#music .playlist-cover {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(15 23 42 / 65%);
  border: 1px solid rgb(148 163 184 / 18%);
}

#music .playlist-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#music .playlist-info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

#music .playlist-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#music .playlist-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

#music .playlist-action {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgb(99 102 241 / 18%);
  border: 1px solid rgb(99 102 241 / 30%);
}

#music .playlist-download {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgb(16 185 129 / 16%);
  border: 1px solid rgb(16 185 129 / 30%);
  color: rgb(167 243 208);
}

#music .music-local-pill,
#music .music-online-pill,
#music .music-offline-pill {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgb(15 23 42 / 70%);
  border: 1px solid rgb(148 163 184 / 20%);
}

#music .music-online-pill[data-state="offline"] {
  background: rgb(248 113 113 / 18%);
  border-color: rgb(248 113 113 / 35%);
  color: rgb(252 165 165);
}

#music .music-track {
  border-radius: 20px;
  padding: 0.9rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(140deg, rgb(12 18 32 / 85%), rgb(10 14 24 / 80%));
  border: 1px solid rgb(148 163 184 / 16%);
  box-shadow: 0 18px 36px rgb(7 11 20 / 45%);
}

#music .music-track.offline {
  border-color: color-mix(in srgb, var(--primary) 28%, rgb(148 163 184 / 20%));
}

#music .track-actions .btn {
  border-radius: 12px;
  background: rgb(15 23 42 / 70%);
  border: 1px solid rgb(148 163 184 / 18%);
}

#music .track-meta .track-tag {
  background: rgb(99 102 241 / 16%);
  border: 1px solid rgb(99 102 241 / 28%);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
}

.floating-player {
  border-radius: 22px;
  backdrop-filter: blur(18px);
  background: linear-gradient(140deg, rgb(10 16 28 / 92%), rgb(18 26 40 / 88%));
  border: 1px solid rgb(148 163 184 / 20%);
  box-shadow: 0 20px 48px rgb(4 8 16 / 45%);
}

.floating-player .player-content {
  gap: 0.85rem;
}

.floating-player .player-controls button {
  border-radius: 12px;
  background: rgb(15 23 42 / 70%);
  border: 1px solid rgb(148 163 184 / 18%);
}

.mobile-music-player {
  border-radius: 24px 24px 0 0;
  background: linear-gradient(160deg, rgb(10 16 28 / 96%), rgb(18 26 40 / 88%));
  border-top: 1px solid rgb(148 163 184 / 20%);
  box-shadow: 0 -20px 40px rgb(4 8 16 / 45%);
}

.mobile-music-player .player-btn {
  border-radius: 12px;
  background: rgb(15 23 42 / 70%);
  border: 1px solid rgb(148 163 184 / 20%);
}

/* Store */
#store .store-card,
#store .store-panel,
#store .store-banner {
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 42%);
}

/* Notifications */
#notifications .notification-card,
#notifications .notification-panel,
#notifications .notification-list {
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 42%);
}

/* Analytics */
#analytics .analytics-card,
#analytics .analytics-panel,
#analytics .chart-panel {
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 22px 54px rgb(6 12 20 / 45%);
}

/* Analytics enrichment */
#analytics .analytics-insights-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--space-3);
}

#analytics .analytics-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

#analytics .analytics-charts-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

#analytics .analytics-panel-card,
#analytics .analytics-stats-card,
#analytics .analytics-options-card,
#analytics .analytics-chart-card {
  padding: var(--card-pad-roomy);
  border-radius: calc(var(--radius-card) + 4px);
  min-height: 0;
}

#analytics .analytics-metric-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 0.8rem;
}

#analytics .analytics-stat-grid,
#analytics .analytics-metric-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

#analytics .metric-tile {
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
  display: grid;
  gap: 0.2rem;
}

#analytics .analytics-heatmap {
  min-height: 180px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgb(16 24 32 / 70%), rgb(12 18 24 / 60%));
  border: 1px dashed rgb(148 163 184 / 25%);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}

#analytics .analytics-chart-card .analytics-chart {
  min-height: 180px;
}

#analytics .analytics-story-card {
  margin-top: var(--space-3);
  padding: var(--card-pad-roomy);
  border-radius: calc(var(--radius-card) + 4px);
  background: linear-gradient(150deg, rgb(16 24 32 / 95%), rgb(12 18 24 / 80%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 45%);
}

#analytics .analytics-story-body {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* Dashboard enhancements */
.continuity-card,
.proactive-card,
.micro-habit-card {
  padding: var(--card-pad-roomy);
  border-radius: calc(var(--radius-card) + 4px);
  background: linear-gradient(150deg, rgb(12 18 32 / 92%), rgb(10 14 24 / 82%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 18px 42px rgb(6 12 20 / 38%);
  display: grid;
  gap: 0.8rem;
}

.continuity-card .badge-pill,
.proactive-card .badge-pill,
.micro-habit-card .badge-pill {
  background: rgb(99 102 241 / 18%);
  border: 1px solid rgb(99 102 241 / 32%);
}

.update-highlight-card {
  padding: var(--card-pad-roomy);
  border-radius: calc(var(--radius-card) + 4px);
  background: linear-gradient(150deg, rgb(12 18 32 / 92%), rgb(10 14 24 / 82%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 18px 42px rgb(6 12 20 / 38%);
  display: grid;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.update-highlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 180px at 12% 0%, rgb(124 92 255 / 24%), transparent 70%),
    radial-gradient(320px 140px at 88% 16%, rgb(42 212 255 / 18%), transparent 65%);
  pointer-events: none;
}

.update-highlight-card > * {
  position: relative;
  z-index: 1;
}

.update-highlight-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.update-highlight-list {
  display: grid;
  gap: 0.75rem;
}

.update-highlight-item {
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgb(15 23 42 / 45%);
  border: 1px solid rgb(148 163 184 / 18%);
  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 4%);
  display: grid;
  gap: 0.35rem;
}

.update-highlight-item strong {
  font-size: 0.98rem;
  color: var(--text-primary);
}

.update-highlight-item span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.update-highlight-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.update-highlight-card.is-active {
  box-shadow: 0 0 0 2px rgb(124 92 255 / 45%), 0 30px 80px rgb(0 0 0 / 35%);
  transform: translateY(-2px);
}

/* Premium Music Library */
#music {
  position: relative;
}

#music .music-toolbar {
  background: linear-gradient(140deg, rgb(10 16 28 / 85%), rgb(12 18 32 / 72%));
  border: 1px solid rgb(148 163 184 / 16%);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  box-shadow: 0 16px 40px rgb(0 0 0 / 28%);
}

#music .music-controls .btn,
#music .music-controls .btn-secondary {
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-weight: 600;
}

#music .music-search input {
  background: rgb(12 18 32 / 70%);
  border: 1px solid rgb(148 163 184 / 18%);
  border-radius: 999px;
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 4%);
}

#music .music-search-more {
  height: 40px;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#music .music-search i {
  color: rgb(148 163 184 / 70%);
}

#music .music-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(120deg, rgb(12 18 32 / 85%), rgb(10 16 28 / 70%));
  border: 1px solid rgb(148 163 184 / 16%);
  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 4%);
  align-items: center;
}

#music .music-filters .btn {
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-weight: 600;
  background: rgb(15 23 42 / 65%);
}

#music .music-filters .btn.active,
#music .music-filters .btn:hover {
  background: linear-gradient(130deg, rgb(59 130 246 / 30%), rgb(124 92 255 / 26%));
  border-color: rgb(99 102 241 / 45%);
  color: #e2e8f0;
}

#music .music-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 1.2rem;
  align-items: start;
}

#music .music-main {
  min-width: 0;
}

#music .music-side {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 96px;
}

#music .music-queue-panel,
#music .music-playlist-panel {
  box-shadow: 0 18px 40px rgb(0 0 0 / 32%);
}

#music .music-track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(130deg, rgb(59 130 246 / 18%), rgb(124 92 255 / 12%));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#music .music-track:hover::before {
  opacity: 1;
}

@media (width <= 1080px) {
  #music .music-layout {
    grid-template-columns: 1fr;
  }

  #music .music-side {
    position: static;
  }
}

#music .music-track {
  background: linear-gradient(160deg, rgb(12 18 32 / 92%), rgb(8 12 22 / 86%));
  border: 1px solid rgb(148 163 184 / 16%);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 18px 38px rgb(0 0 0 / 28%);
  position: relative;
  overflow: hidden;
}

#music .track-mini-visualizer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  align-items: end;
  opacity: 0.7;
}

#music .track-mini-visualizer span {
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--music-accent, #7c5cff) 70%, transparent);
  opacity: 0.5;
  transform-origin: bottom;
}

#music .music-track.playing .track-mini-visualizer span {
  opacity: 0.95;
  animation: mini-wave 1.2s ease-in-out infinite;
}

#music .music-track.playing .track-mini-visualizer span:nth-child(2) {
  animation-delay: 0.1s;
}

#music .music-track.playing .track-mini-visualizer span:nth-child(3) {
  animation-delay: 0.2s;
}

#music .music-track.playing .track-mini-visualizer span:nth-child(4) {
  animation-delay: 0.3s;
}

#music .music-track.playing .track-mini-visualizer span:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes mini-wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.2); }
}

@media (width <= 720px) {
  #music .music-now-playing {
    flex-direction: column;
    align-items: flex-start;
  }
}

#music .music-track:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgb(0 0 0 / 32%);
}

#music .music-track.playing {
  border-color: color-mix(in srgb, var(--music-accent, rgb(99 102 241)) 60%, rgb(148 163 184 / 20%));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--music-accent, rgb(99 102 241)) 45%, transparent),
    0 22px 46px rgb(0 0 0 / 35%);
}

#music .track-cover {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 12%);
}

#music .track-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 30% 20%, color-mix(in srgb, var(--music-accent, #7c5cff) 70%, transparent), transparent 65%),
    linear-gradient(120deg, rgb(15 23 42 / 0%), rgb(15 23 42 / 18%), rgb(15 23 42 / 0%));
  transition: opacity 0.3s ease;
}

#music .music-track.playing .track-cover::after {
  opacity: 1;
  animation: music-wave 2.8s ease-in-out infinite;
}

#music .music-track.playing .track-cover::before {
  content: "";
  position: absolute;
  inset: auto 16% 12% 16%;
  height: 30%;
  background: linear-gradient(90deg,
    rgb(255 255 255 / 0%),
    color-mix(in srgb, var(--music-accent, #7c5cff) 60%, transparent),
    rgb(255 255 255 / 0%));
  opacity: 0.65;
  filter: blur(8px);
  animation: music-pulse 1.6s ease-in-out infinite;
}

#music.music-playing .music-toolbar {
  border-color: color-mix(in srgb, var(--music-accent, #7c5cff) 35%, rgb(148 163 184 / 16%));
  box-shadow: 0 18px 48px color-mix(in srgb, var(--music-accent, #7c5cff) 18%, transparent),
    0 16px 40px rgb(0 0 0 / 28%);
}

#music.music-playing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 260px at 12% 0%, color-mix(in srgb, var(--music-accent, #7c5cff) 25%, transparent), transparent 70%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

#music.music-playing > * {
  position: relative;
  z-index: 1;
}

body.music-playing .floating-player,
body.music-playing .mobile-music-player {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--music-accent, #7c5cff) 35%, transparent),
    0 24px 50px rgb(0 0 0 / 35%);
  animation: music-float 2.6s ease-in-out infinite;
}

/* Modernize floating player */
.floating-player {
  border-radius: 20px;
  border: 1px solid rgb(148 163 184 / 12%);
  background: linear-gradient(160deg, rgb(12 18 32 / 92%), rgb(10 16 28 / 86%));
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgb(0 0 0 / 35%);
}

.floating-player:hover,
.floating-player.expanded {
  width: 420px;
  height: 84px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgb(14 20 36 / 94%), rgb(10 16 28 / 92%));
  box-shadow: 0 28px 70px rgb(0 0 0 / 45%);
}

.floating-player .player-toggle {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, rgb(124 92 255), rgb(56 189 248));
  box-shadow: 0 12px 26px rgb(0 0 0 / 30%), inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.floating-player .player-content {
  width: calc(100% - 72px);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.floating-player .player-controls button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgb(15 23 42 / 50%);
  border: 1px solid rgb(148 163 184 / 12%);
}

.floating-player .player-controls button:hover {
  background: rgb(30 41 59 / 70%);
}

/* Modernize mobile player */
.mobile-music-player {
  border-radius: 22px;
  border: 1px solid rgb(148 163 184 / 12%);
  background: linear-gradient(160deg, rgb(10 16 28 / 96%), rgb(12 18 32 / 90%));
  box-shadow: 0 24px 48px rgb(0 0 0 / 35%);
}

.mobile-music-player.active {
  bottom: 70px;
}

.mobile-track-image {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 16%);
}

.mobile-player-controls button {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgb(15 23 42 / 60%);
  border: 1px solid rgb(148 163 184 / 12%);
}

body.music-playing .floating-player .player-cover,
body.music-playing .mobile-track-image,
body.music-playing .expanded-track-image {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--music-accent, #7c5cff) 45%, transparent),
    0 10px 24px rgb(0 0 0 / 32%);
}

.player-visualizer-wrap,
.expanded-visualizer-wrap {
  position: absolute;
  inset: 0.4rem 0.6rem 0.4rem 0.6rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(8 12 22 / 25%), rgb(8 12 22 / 5%));
  border: 1px solid rgb(148 163 184 / 6%);
  padding: 8px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  mix-blend-mode: screen;
}

.player-visualizer,
.expanded-visualizer {
  width: 100%;
  height: 100%;
  display: block;
  filter: blur(0.2px);
}

.expanded-visualizer-wrap {
  inset: 0.8rem 1rem 0.8rem 1rem;
}

.player-content {
  position: relative;
  z-index: 1;
}

.floating-player .player-controls,
.floating-player .track-info {
  position: relative;
  z-index: 1;
}

body.music-playing .player-visualizer-wrap,
body.music-playing .expanded-visualizer-wrap {
  border-color: color-mix(in srgb, var(--music-accent, #7c5cff) 35%, rgb(148 163 184 / 12%));
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--music-accent, #7c5cff) 25%, transparent);
}

@keyframes music-wave {
  0%, 100% { transform: scale(1); filter: blur(0); }
  50% { transform: scale(1.05); filter: blur(1px); }
}

@keyframes music-pulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-6px); }
}

@keyframes music-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

#music .music-queue-panel,
#music .music-playlist-panel {
  background: linear-gradient(150deg, rgb(12 18 32 / 92%), rgb(8 12 22 / 86%));
  border: 1px solid rgb(148 163 184 / 16%);
  border-radius: 18px;
  box-shadow: 0 18px 36px rgb(0 0 0 / 26%);
}

#music .music-queue-header,
#music .music-queue-list,
#music .music-history-list,
#music .music-playlist-list {
  color: var(--text-secondary);
}

#music .music-studio {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: linear-gradient(150deg, rgb(10 16 28 / 85%), rgb(12 18 32 / 72%));
  border: 1px solid rgb(148 163 184 / 16%);
  box-shadow: 0 16px 36px rgb(0 0 0 / 24%);
  display: grid;
  gap: 0.8rem;
}

#music .music-studio .studio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

#music .music-studio .studio-note {
  font-size: 0.85rem;
}

#music .eq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

#music .eq-band {
  background: rgb(15 23 42 / 45%);
  border: 1px solid rgb(148 163 184 / 14%);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  display: grid;
  gap: 0.4rem;
}

#music .eq-band input[type="range"] {
  width: 100%;
}

#music .eq-value {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.friends-share-list {
  display: grid;
  gap: 0.75rem;
}

.friends-share-item {
  background: rgb(15 23 42 / 40%);
  border: 1px solid rgb(148 163 184 / 14%);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.35rem;
}

.friends-share-title {
  font-weight: 600;
  color: var(--text-primary);
}

.friends-share-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.friends-share-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.pwa-install-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1300;
  border: 0;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(120deg, rgb(99 102 241), rgb(56 189 248));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 16px 40px rgb(0 0 0 / 35%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pwa-install-btn::before {
  content: "\\f019";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.pwa-install-modal .modal-content {
  max-width: 520px;
}

.pwa-install-card {
  position: relative;
  padding: 2rem;
  display: grid;
  gap: 1.4rem;
  border-radius: 24px;
  background: linear-gradient(160deg, rgb(12 18 32 / 96%), rgb(8 12 20 / 92%));
  border: 1px solid rgb(148 163 184 / 16%);
  box-shadow: 0 40px 120px rgb(0 0 0 / 40%);
}

.pwa-install-card .close-modal {
  position: absolute;
  top: 16px;
  right: 16px;
}

.pwa-install-hero h3 {
  margin: 0.4rem 0 0.2rem;
  font-size: 1.4rem;
}

.pwa-install-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgb(99 102 241 / 18%);
  border: 1px solid rgb(99 102 241 / 30%);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.85rem;
}

.pwa-install-benefits {
  display: grid;
  gap: 0.75rem;
}

.pwa-install-benefit {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 16px;
  background: rgb(15 23 42 / 40%);
  border: 1px solid rgb(148 163 184 / 16%);
}

.pwa-install-benefit i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgb(99 102 241 / 16%);
  color: rgb(129 140 248);
}

.pwa-install-benefit strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.pwa-install-benefit span {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.pwa-install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .pwa-install-btn {
    right: 16px;
    bottom: 92px;
  }

  .pwa-install-card {
    padding: 1.6rem;
  }
}

@media (max-width: 900px) {
  #projects .project-hub-grid {
    grid-template-columns: 1fr;
  }

  #analytics .analytics-grid,
  #analytics .analytics-charts-grid,
  #analytics .analytics-insights-grid {
    grid-template-columns: 1fr;
  }
}

/* Settings */
#settings .settings-card,
#settings .settings-panel,
#settings .settings-group {
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 42%);
}

#settings .settings-shell {
  gap: clamp(1.2rem, 2vw, 1.8rem);
  align-items: flex-start;
}

#settings .settings-nav {
  position: sticky;
  top: 1.2rem;
  align-self: flex-start;
  border-radius: 18px;
  padding: 1.2rem;
  background: linear-gradient(160deg, rgb(14 21 28 / 98%), rgb(9 14 19 / 92%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 20px 55px rgb(5 10 18 / 50%);
}

#settings .settings-nav-title {
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

#settings .settings-search {
  background: rgb(8 12 18 / 60%);
  border-radius: 12px;
  border: 1px solid rgb(255 255 255 / 8%);
  padding: 0.5rem 0.65rem;
}

#settings .settings-search .form-input {
  background: transparent;
  border: none;
  padding-left: 2rem;
}

#settings .settings-tabs {
  display: grid;
  gap: 0.45rem;
}

#settings .settings-tab {
  justify-content: flex-start;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#settings .settings-tab.active {
  background: linear-gradient(135deg, rgb(30 166 140 / 30%), rgb(242 95 58 / 22%));
  border-color: rgb(30 166 140 / 50%);
  color: #e9f7f3;
}

#settings .settings-topbar {
  border-radius: 18px;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(135deg, rgb(16 24 32 / 95%), rgb(12 18 24 / 80%));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--glass-border));
  box-shadow: 0 16px 40px rgb(6 12 20 / 35%);
}

#settings .settings-overview-card-shell {
  padding: 1.2rem;
}

#settings .settings-overview-card {
  border-radius: 16px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#settings .settings-overview-card:hover {
  transform: translateY(-2px);
  border-color: rgb(30 166 140 / 45%);
  box-shadow: 0 16px 32px rgb(6 12 20 / 35%);
}

#settings .settings-card {
  position: relative;
  overflow: hidden;
}

#settings .settings-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 3px solid rgb(30 166 140 / 35%);
  opacity: 0;
  transition: opacity 180ms ease;
}

#settings .settings-card:hover::before,
#settings .settings-card:focus-within::before {
  opacity: 1;
}

#settings .settings-card-header {
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

#settings .settings-card-header h3 {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

#settings .form-group {
  padding: 0.15rem 0;
}

#settings .form-helper,
#settings .text-tertiary {
  color: var(--text-tertiary);
}

#settings .toggle-switch {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}

#settings .toggle-switch input:checked + .toggle-slider {
  box-shadow: 0 0 0 1px rgb(30 166 140 / 50%);
}

#settings .danger-card {
  background: linear-gradient(150deg, rgb(38 16 20 / 95%), rgb(24 10 12 / 85%));
  border-color: rgb(248 113 113 / 35%);
}

/* Tasks Manager Premium Pass */
#tasks .section-header {
  position: relative;
  overflow: hidden;
}

#tasks .section-header::after {
  content: "";
  position: absolute;
  inset: -20% 15% auto -35%;
  height: 140%;
  background: radial-gradient(500px 220px at 20% 0%, rgb(30 166 140 / 35%), transparent 60%);
  opacity: 0.8;
  pointer-events: none;
}

#tasks .section-header .header-content {
  position: relative;
  z-index: 1;
}

#tasks .section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}

#tasks .section-title i {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgb(30 166 140 / 18%);
  border: 1px solid rgb(30 166 140 / 35%);
}

#tasks .stats-grid {
  gap: clamp(0.9rem, 2vw, 1.3rem);
}

#tasks .stat-card {
  border-radius: 18px;
  background: linear-gradient(145deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 18px 42px rgb(6 12 20 / 40%);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#tasks .stat-card:hover {
  transform: translateY(-3px);
  border-color: rgb(30 166 140 / 35%);
  box-shadow: 0 20px 50px rgb(6 12 20 / 45%);
}

#tasks .stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .tasks-content {
  gap: clamp(1rem, 2vw, 1.6rem);
}

#tasks .task-list-panel,
#tasks .task-details-panel {
  background: linear-gradient(150deg, rgb(16 24 32 / 94%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 22px 52px rgb(6 12 20 / 45%);
}

#tasks .toolbar {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(10 16 24 / 90%), rgb(12 18 26 / 75%));
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .smart-add-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  background: rgb(8 12 18 / 65%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .smart-add-input {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

#tasks .smart-add-input i {
  color: rgb(30 166 140 / 80%);
}

#tasks .smart-add-input .form-input {
  background: transparent;
  border: none;
  padding-left: 0;
}

#tasks .smart-add-actions {
  display: flex;
  gap: 0.5rem;
}

#tasks .search-box {
  background: rgb(8 12 18 / 65%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 14px;
  padding: 0.45rem 0.65rem;
}

#tasks .search-box input {
  background: transparent;
  border: none;
  padding-left: 2.1rem;
}

#tasks .view-controls .btn {
  border-radius: 12px;
  background: rgb(8 12 18 / 65%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .view-controls .btn.active {
  background: linear-gradient(135deg, rgb(30 166 140 / 28%), rgb(242 95 58 / 20%));
  border-color: rgb(30 166 140 / 40%);
}

#tasks .quick-add {
  border-radius: 16px;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
  padding: 0.7rem 0.8rem;
}

#tasks .quick-add .form-input {
  background: transparent;
  border: none;
}

#tasks .filters {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .context-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#tasks .context-tab {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 8%);
  background: rgb(8 12 18 / 60%);
  color: var(--text-secondary);
  font-weight: 600;
}

#tasks .context-tab.active {
  background: rgb(30 166 140 / 20%);
  border-color: rgb(30 166 140 / 45%);
  color: #e9f7f3;
}

#tasks .filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#tasks .filter-tab {
  border-radius: 12px;
  padding: 0.4rem 0.9rem;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .filter-tab.active {
  background: linear-gradient(135deg, rgb(30 166 140 / 25%), rgb(242 95 58 / 18%));
  border-color: rgb(30 166 140 / 40%);
  color: #e9f7f3;
}

#tasks .filter-actions .sort-select {
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 12px;
}

#tasks .task-list-container {
  border-radius: 18px;
  padding: 0.75rem;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .task-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .task-item {
  background: linear-gradient(150deg, rgb(16 24 32 / 90%), rgb(12 18 24 / 75%));
  border: 1px solid rgb(255 255 255 / 8%);
  box-shadow: 0 18px 36px rgb(5 10 18 / 32%);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#tasks .task-item:hover {
  transform: translateY(-3px);
  border-color: rgb(30 166 140 / 35%);
  box-shadow: 0 24px 50px rgb(6 12 20 / 42%);
}

#tasks .task-item.selected {
  border-color: rgb(30 166 140 / 60%);
  box-shadow: 0 26px 60px rgb(30 166 140 / 20%);
}

#tasks .task-item .task-title {
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

#tasks .task-item .task-meta,
#tasks .task-item .task-description {
  color: color-mix(in srgb, var(--text-tertiary) 85%, white);
}

#tasks .task-priority {
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .task-actions .btn-icon,
#tasks .task-action-btn {
  border-radius: 12px;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .task-actions .btn-icon:hover,
#tasks .task-action-btn:hover {
  border-color: rgb(30 166 140 / 45%);
}

#tasks .task-details-panel {
  position: relative;
  overflow: hidden;
}

#tasks .task-details-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 240px at 90% 0%, rgb(30 166 140 / 20%), transparent 70%);
  pointer-events: none;
}

#tasks .details-header,
#tasks .details-body {
  position: relative;
  z-index: 1;
}

@media (width >= 1200px) {
  #tasks .task-details {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: 1rem;
  }

  #tasks .task-details .details-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tasks .task-details .details-tags,
  #tasks .task-details .details-footer {
    grid-column: 1 / -1;
  }
}

#tasks .details-empty {
  padding: 1.6rem 1.2rem;
}

#tasks .details-empty .empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: rgb(30 166 140 / 16%);
  border: 1px solid rgb(30 166 140 / 35%);
}

#tasks .gesture-chip {
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .shortcuts-hint {
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#tasks .today-focus-card {
  border-radius: 20px;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, rgb(16 24 32 / 94%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--glass-border));
  box-shadow: 0 22px 50px rgb(6 12 20 / 45%);
  display: grid;
  gap: 0.9rem;
}

#tasks .today-focus-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#tasks .today-focus-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#tasks .today-focus-actions {
  display: flex;
  gap: 0.5rem;
}

#tasks .today-focus-body {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

#tasks .today-focus-main {
  display: grid;
  gap: 0.5rem;
}

#tasks .today-focus-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgb(30 166 140 / 20%);
  border: 1px solid rgb(30 166 140 / 45%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#tasks .today-focus-task {
  font-size: 1.02rem;
  font-weight: 600;
}

#tasks .today-focus-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

#tasks .today-focus-meta i {
  color: rgb(30 166 140 / 85%);
}

#tasks .today-focus-stats {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#tasks .focus-mini {
  border-radius: 14px;
  padding: 0.55rem 0.7rem;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
  display: grid;
  gap: 0.15rem;
}

#tasks .focus-mini strong {
  font-size: 1rem;
}

@media (width <= 900px) {
  #tasks .today-focus-body {
    grid-template-columns: 1fr;
  }

  #tasks .today-focus-actions {
    width: 100%;
  }

  #tasks .today-focus-actions .btn {
    flex: 1;
  }

  #tasks .today-focus-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 520px) {
  #tasks .today-focus-stats {
    grid-template-columns: 1fr;
  }
}

#tasks .task-list .task-item {
  animation: taskEnter 420ms ease both;
}

#tasks .task-list .task-item:nth-child(1) { animation-delay: 40ms; }
#tasks .task-list .task-item:nth-child(2) { animation-delay: 80ms; }
#tasks .task-list .task-item:nth-child(3) { animation-delay: 120ms; }
#tasks .task-list .task-item:nth-child(4) { animation-delay: 160ms; }
#tasks .task-list .task-item:nth-child(5) { animation-delay: 200ms; }
#tasks .task-list .task-item:nth-child(6) { animation-delay: 240ms; }
#tasks .task-list .task-item:nth-child(7) { animation-delay: 280ms; }
#tasks .task-list .task-item:nth-child(8) { animation-delay: 320ms; }

@keyframes taskEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#tasks .task-item.completed::after,
#tasks .task-item.is-complete::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(120deg, transparent, rgb(30 166 140 / 18%), transparent);
  opacity: 0.6;
  animation: taskShimmer 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes taskShimmer {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}

#tasks .task-item {
  position: relative;
}

/* Focus Tree Widget */
.focus-tree-widget {
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  width: 180px;
  padding: 0.85rem 0.9rem;
  border-radius: 18px;
  background: linear-gradient(150deg, rgb(12 18 26 / 92%), rgb(8 12 18 / 80%));
  border: 1px solid rgb(255 255 255 / 10%);
  box-shadow: 0 18px 42px rgb(4 8 16 / 40%);
  z-index: 20;
  display: grid;
  gap: 0.5rem;
  pointer-events: none;
}

.focus-tree-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.focus-tree-title {
  color: var(--text-secondary);
}

.focus-tree-level {
  color: #e2f9f1;
}

.focus-tree {
  width: 100%;
  height: 140px;
}

.focus-tree [data-level] {
  opacity: 0;
  transition: opacity 240ms ease;
}

.focus-tree-widget.level-1 [data-level="1"] { opacity: 1; }

.focus-tree-widget.level-2 [data-level="1"],
.focus-tree-widget.level-2 [data-level="2"] { opacity: 1; }

.focus-tree-widget.level-3 [data-level="1"],
.focus-tree-widget.level-3 [data-level="2"],
.focus-tree-widget.level-3 [data-level="3"] { opacity: 1; }

.focus-tree-widget.level-4 [data-level="1"],
.focus-tree-widget.level-4 [data-level="2"],
.focus-tree-widget.level-4 [data-level="3"],
.focus-tree-widget.level-4 [data-level="4"] { opacity: 1; }

.focus-tree-widget.level-5 [data-level="1"],
.focus-tree-widget.level-5 [data-level="2"],
.focus-tree-widget.level-5 [data-level="3"],
.focus-tree-widget.level-5 [data-level="4"],
.focus-tree-widget.level-5 [data-level="5"] { opacity: 1; }

.focus-tree-widget.level-6 [data-level="1"],
.focus-tree-widget.level-6 [data-level="2"],
.focus-tree-widget.level-6 [data-level="3"],
.focus-tree-widget.level-6 [data-level="4"],
.focus-tree-widget.level-6 [data-level="5"],
.focus-tree-widget.level-6 [data-level="6"] { opacity: 1; }

.focus-tree-meta,
.focus-tree-breaches {
  font-size: 0.76rem;
  color: var(--text-tertiary);
}

.focus-tree-breaches {
  color: rgb(248 113 113 / 90%);
}

@media (width <= 900px) {
  .focus-tree-widget {
    width: 160px;
  }
}

@media (width <= 640px) {
  .focus-tree-widget {
    display: none;
  }
}

/* Brain Dump Modal */
.brain-dump-modal {
  max-width: min(92vw, 720px);
}

.brain-dump-modal .form-input {
  min-height: 44px;
}

/* Profile unified UX */
#header-profile-tab {
  display: none !important;
}

#header-profile-btn {
  pointer-events: auto;
  cursor: pointer;
}

/* Profile section unified */
#profile .profile-desktop-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
}

#profile .profile-desktop-hero,
#profile .profile-desktop-form-card {
  border-radius: 20px;
  background: linear-gradient(150deg, rgb(16 24 32 / 93%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 40%);
}

#profile .profile-desktop-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "avatar meta"
    "stats stats"
    "hint hint";
  gap: 1rem 1.2rem;
  align-items: center;
}

#profile .profile-desktop-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(320px 200px at 10% 0%, rgb(99 102 241 / 20%), transparent 60%),
    radial-gradient(260px 180px at 100% 0%, rgb(16 185 129 / 16%), transparent 60%);
  opacity: 0.9;
  pointer-events: none;
}

#profile .profile-desktop-hero > * {
  position: relative;
  z-index: 1;
}

#profile .profile-desktop-avatar {
  grid-area: avatar;
  width: 104px;
  height: 104px;
  border-radius: 26px;
  border: 1px solid rgb(255 255 255 / 12%);
  background: rgb(8 12 18 / 60%);
  box-shadow: 0 18px 32px rgb(10 15 25 / 45%);
}

#profile .profile-desktop-meta {
  grid-area: meta;
  min-width: 0;
}

#profile .profile-desktop-meta h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -0.02em;
}

#profile .profile-desktop-stats {
  grid-area: stats;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#profile .profile-stat {
  border-radius: 14px;
  padding: 0.7rem 0.85rem;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
  gap: 0.35rem;
}

#profile .profile-stat strong {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

#profile .profile-desktop-hint {
  grid-area: hint;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: rgb(8 12 18 / 45%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#profile .avatar-dropzone {
  border-radius: 14px;
  background: rgb(8 12 18 / 60%);
  border: 1px dashed rgb(255 255 255 / 20%);
}

#profile .profile-desktop-form-card form {
  display: grid;
  gap: 1rem;
}

#profile .profile-desktop-form-card .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

#profile .profile-desktop-form-card .form-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

@media (width <= 900px) {
#profile .profile-desktop-grid {
  grid-template-columns: 1fr;
}

#profile .profile-desktop-stats {
  grid-template-columns: 1fr;
}
}

.profile-local-account-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
}

.profile-local-actions {
  display: grid;
  gap: 0.5rem;
}

@media (width <= 900px) {
  .profile-local-account-grid {
    grid-template-columns: 1fr;
  }

  .profile-local-actions .btn {
    width: 100%;
  }
}

/* Countdown mode professional styling */
#countdown-settings {
  border-radius: 20px;
  padding: clamp(0.9rem, 1.6vw, 1.35rem);
  background:
    linear-gradient(155deg, rgb(16 24 32 / 94%), rgb(12 18 24 / 82%)),
    radial-gradient(320px 180px at 8% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 42%);
  display: grid;
  gap: 0.9rem;
}

#countdown-settings .countdown-grid {
  display: grid;
  gap: clamp(0.7rem, 1.4vw, 1rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}

#countdown-settings .countdown-grid > .countdown-field:first-child {
  grid-column: 1 / -1;
}

#countdown-settings .countdown-field {
  border-radius: 16px;
  padding: 0.7rem 0.85rem;
  background: rgb(8 12 18 / 65%);
  border: 1px solid rgb(255 255 255 / 10%);
  box-shadow: inset 0 1px 2px rgb(12 18 32 / 30%);
  grid-column: span 4;
  display: grid;
  gap: 0.45rem;
}

#countdown-settings .countdown-field .form-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

#countdown-settings .countdown-field .form-input,
#countdown-settings .countdown-field .form-textarea,
#countdown-settings .countdown-field select {
  min-height: 42px;
  border-radius: 12px;
  background: rgb(10 16 24 / 70%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  color: var(--text-primary);
}

#countdown-settings .countdown-field-wide {
  grid-column: span 6;
}

#countdown-settings .countdown-presets,
#countdown-settings .countdown-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-column: 1 / -1;
}

#countdown-settings .countdown-preset {
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 8%);
  background: rgb(8 12 18 / 70%);
  font-weight: 600;
  letter-spacing: 0.01em;
}

#countdown-settings .countdown-list {
  margin-top: 0.8rem;
  border-radius: 18px;
  padding: 0.75rem;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 10%);
  display: grid;
  gap: 0.75rem;
}

#countdown-settings .countdown-alerts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  grid-column: 1 / -1;
}

#countdown-settings .countdown-alert {
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  background: rgb(8 12 18 / 70%);
  border: 1px solid rgb(255 255 255 / 10%);
}

#countdown-settings .countdown-alerts .toggle-pill {
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.85rem;
}

#countdown-settings .countdown-actions .btn {
  padding-inline: 1.1rem;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 24%, transparent);
}

#countdown-list .countdown-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 1.1rem;
  align-items: center;
  padding: 0.95rem 1.05rem;
  border-radius: 18px;
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--glass-border));
  box-shadow: 0 16px 34px rgb(6 12 20 / 38%);
}

#countdown-list .countdown-meta {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

#countdown-list .countdown-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

#countdown-list .countdown-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#countdown-list .countdown-badge {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgb(99 102 241 / 18%);
  border: 1px solid rgb(99 102 241 / 30%);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#countdown-list .countdown-time {
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--primary) 65%, white);
  justify-self: end;
  text-align: right;
}

#countdown-list .countdown-remove {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 12%);
  background: rgb(8 12 18 / 70%);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 140ms ease, color 140ms ease, border-color 140ms ease;
}

#countdown-list .countdown-remove:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  transform: translateY(-1px);
}

#countdown-list .countdown-progress {
  height: 6px;
  border-radius: 999px;
  background: rgb(148 163 184 / 20%);
  overflow: hidden;
  margin-top: 0.45rem;
}

#countdown-list .countdown-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(59 130 246 / 85%), rgb(34 197 94 / 85%));
  box-shadow: 0 0 12px rgb(59 130 246 / 40%);
}

@media (width <= 768px) {
  #countdown-settings {
    padding: 0.85rem;
  }

  #countdown-settings .countdown-grid {
    grid-template-columns: 1fr;
  }

  #countdown-settings .countdown-field,
  #countdown-settings .countdown-field-wide {
    min-width: 0;
    width: 100%;
    grid-column: span 1;
  }

  #countdown-settings .countdown-field {
    padding: 0.65rem 0.75rem;
  }

  #countdown-settings .countdown-presets,
  #countdown-settings .countdown-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  #countdown-settings .countdown-list,
  #countdown-settings .countdown-alerts,
  #countdown-settings .countdown-alert {
    width: 100%;
    min-width: 0;
  }

  #countdown-list .countdown-card {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 0.85rem 0.9rem;
  }

  #countdown-list .countdown-time {
    justify-self: start;
    text-align: left;
    font-size: 1.1rem;
  }

  #countdown-list .countdown-remove {
    top: 0.6rem;
    right: 0.6rem;
  }
}

@media (width >= 1100px) {
  #countdown-settings .countdown-field {
    grid-column: span 3;
  }

  #countdown-settings .countdown-field-wide {
    grid-column: span 6;
  }
}

/* Share Focus */
.profile-share-card {
  margin-top: 1.2rem;
  border-radius: 20px;
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 40%);
}

.profile-share-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.profile-share-controls {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.profile-share-preview {
  margin: 1rem 0;
}

.share-preview-card {
  border-radius: 18px;
  padding: 1.2rem;
  background: linear-gradient(135deg, rgb(30 166 140 / 20%), rgb(20 30 42 / 80%));
  border: 1px solid rgb(255 255 255 / 12%);
  display: grid;
  gap: 0.35rem;
}

.share-preview-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}

.share-preview-score {
  font-size: 2rem;
  font-weight: 700;
}

.share-preview-meta {
  color: var(--text-secondary);
}

.profile-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.share-focus-modal {
  max-width: min(92vw, 560px);
}

.share-preview-card-modal {
  min-height: 160px;
}

@media (width <= 720px) {
  .profile-share-actions .btn {
    flex: 1 1 100%;
  }
}

@media (width <= 900px) {
  #tasks .toolbar {
    padding: 0.75rem;
  }

  #tasks .smart-add-actions {
    width: 100%;
  }

  #tasks .smart-add-actions .btn {
    flex: 1;
  }

  #tasks .filter-actions,
  #tasks .view-controls {
    width: 100%;
  }

  #tasks .task-details-panel {
    margin-top: 0.5rem;
  }
}

@media (width <= 900px) {
  #settings .settings-nav {
    position: relative;
    top: auto;
  }

  #settings .settings-tabs {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }

  #settings .settings-tab {
    white-space: nowrap;
  }
}

/* Documentation */
#documentation .doc-card,
#documentation .doc-panel,
#documentation .doc-section {
  background: linear-gradient(150deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 42%);
}

@media (width <= 900px) {
  .section .section-header {
    padding: 1rem 1.1rem;
  }
}

/* Dashboard v3.1 */
#dashboard {
  position: relative;
}

#dashboard .section-header {
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
  border-radius: calc(var(--radius-card) + 6px);
  background: linear-gradient(140deg, rgb(20 32 38 / 95%), rgb(14 22 28 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--glass-border));
  box-shadow: 0 26px 60px rgb(8 14 24 / 45%);
}

#dashboard .dashboard-header-actions .btn {
  background: linear-gradient(135deg, rgb(30 166 140 / 20%), rgb(242 95 58 / 18%));
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--glass-border));
}

#dashboard .welcome-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.7fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: center;
  background: linear-gradient(140deg, rgb(18 28 36 / 95%), rgb(14 20 28 / 72%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
}

#dashboard .welcome-card h3 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}

#dashboard .welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

#dashboard .points-badge {
  background: rgb(10 16 24 / 75%);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--glass-border));
  box-shadow: inset 0 0 18px rgb(255 255 255 / 6%);
}

#dashboard .daily-advice {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(26 40 50 / 85%), rgb(18 26 34 / 70%));
  border: 1px solid color-mix(in srgb, var(--secondary) 18%, var(--glass-border));
}

#dashboard .insight-card {
  background: linear-gradient(140deg, rgb(18 28 34 / 95%), rgb(16 22 30 / 78%));
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--glass-border));
}

#dashboard .insight-pill {
  background: rgb(32 176 147 / 20%);
  border: 1px solid rgb(32 176 147 / 40%);
  color: #dff7f2;
}

#dashboard .quick-stats {
  padding: clamp(1rem, 2.2vw, 1.6rem);
  border-radius: calc(var(--radius-card) + 6px);
  background: linear-gradient(150deg, rgb(14 22 30 / 95%), rgb(12 18 24 / 70%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
}

#dashboard .stat-card-enhanced {
  background: linear-gradient(145deg, rgb(18 26 34 / 92%), rgb(12 18 24 / 75%));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--glass-border));
  box-shadow: 0 22px 50px rgb(7 12 20 / 45%);
}

#dashboard .stat-icon {
  box-shadow: 0 14px 30px rgb(30 166 140 / 30%);
}

#dashboard .progress-bar {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 8%);
}

/* Tasks v3.1 */
#tasks .section-header {
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border-radius: calc(var(--radius-card) + 4px);
  background: linear-gradient(135deg, rgb(18 28 36 / 95%), rgb(12 18 24 / 75%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 24px 56px rgb(8 14 22 / 45%);
}

#tasks .stats-grid .stat-card {
  background: linear-gradient(145deg, rgb(16 24 32 / 92%), rgb(12 18 24 / 72%));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--glass-border));
  box-shadow: 0 20px 46px rgb(6 12 20 / 40%);
}

#tasks .tasks-content {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
}

#tasks .task-list-panel,
#tasks .task-details-panel {
  background: linear-gradient(160deg, rgb(14 20 28 / 94%), rgb(12 18 24 / 82%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  border-radius: calc(var(--radius-card) + 4px);
  padding: clamp(0.9rem, 2vw, 1.3rem);
  box-shadow: 0 20px 50px rgb(6 12 20 / 45%);
}

#tasks .toolbar,
#tasks .quick-add,
#tasks .filters {
  background: rgb(10 16 24 / 70%);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  border-radius: 14px;
  padding: 0.65rem 0.8rem;
}

#tasks .search-box input,
#tasks .quick-add input,
#tasks .sort-select {
  background: rgb(8 12 18 / 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
}

#tasks .filter-tab {
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  background: rgb(8 12 18 / 45%);
  border: 1px solid transparent;
}

#tasks .filter-tab.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, white), color-mix(in srgb, var(--accent) 65%, white));
  color: #0b1217;
  border-color: transparent;
}

#tasks .task-list-header {
  padding: 0.6rem 0.7rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
}

#tasks .task-item {
  border-radius: 16px;
  padding: 0.95rem 1rem;
  background: linear-gradient(150deg, rgb(16 24 32 / 90%), rgb(12 18 24 / 75%));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  box-shadow: 0 14px 30px rgb(5 10 18 / 35%);
}

#tasks .task-item.selected {
  border-color: color-mix(in srgb, var(--primary) 60%, white);
  box-shadow: 0 18px 36px rgb(30 166 140 / 28%);
}

#tasks .task-actions .btn-icon,
#tasks .task-action-btn {
  background: rgb(8 12 18 / 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  border-radius: 12px;
}

#tasks .task-details-panel {
  position: relative;
}

#tasks .details-header {
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  padding-bottom: 0.8rem;
}

#tasks .details-meta-item {
  background: rgb(8 12 18 / 50%);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  border-radius: 12px;
  padding: 0.75rem;
}

#tasks .details-tags {
  gap: 0.5rem;
}

@media (width <= 1100px) {
  #tasks .tasks-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 900px) {
  #dashboard .section-header {
    padding: 1rem 1.1rem;
  }

  #dashboard .welcome-card {
    grid-template-columns: 1fr;
  }

  #dashboard .welcome-actions {
    justify-content: flex-start;
  }
}

@media (width <= 640px) {
  #tasks .task-list-panel,
  #tasks .task-details-panel {
    padding: 0.85rem;
  }

  #tasks .toolbar,
  #tasks .quick-add,
  #tasks .filters {
    padding: 0.6rem;
  }

  #tasks .task-item {
    padding: 0.85rem 0.9rem;
  }
}

/* Tasks upgrade UI */
.tasks-upgrade-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--space-3);
  background: linear-gradient(135deg, rgb(18 28 36 / 96%), rgb(12 18 24 / 80%));
}

.tasks-upgrade-banner .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgb(30 166 140 / 20%);
  border: 1px solid rgb(30 166 140 / 40%);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tasks-upgrade-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tasks-focus-queue {
  padding: var(--card-pad-roomy);
  border-radius: calc(var(--radius-card) + 6px);
  background: linear-gradient(150deg, rgb(16 24 32 / 96%), rgb(12 18 24 / 82%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  box-shadow: 0 20px 48px rgb(6 12 20 / 42%);
  margin-bottom: var(--space-3);
}

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

.tasks-focus-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.task-focus-card {
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgb(8 12 18 / 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
}

.task-focus-title {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.task-focus-meta {
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

.tasks-batch-shelf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  background: rgb(8 12 18 / 70%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  margin-bottom: var(--space-2);
}

.tasks-batch-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.smart-add-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  border-radius: 16px;
  background: rgb(8 12 18 / 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  margin-bottom: 0.8rem;
}

.smart-add-input {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
}

.smart-add-input .form-input {
  background: transparent;
  border: none;
  padding: 0.6rem 0.4rem;
}

.smart-add-actions {
  display: flex;
  gap: 0.5rem;
}

.context-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.context-tab {
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  background: rgb(8 12 18 / 50%);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.8rem;
}

.context-tab.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, white), color-mix(in srgb, var(--accent) 65%, white));
  color: #0b1217;
  border-color: transparent;
}

@media (width <= 900px) {
  .tasks-upgrade-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .tasks-batch-shelf {
    flex-direction: column;
    align-items: flex-start;
  }

  .smart-add-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .smart-add-actions {
    width: 100%;
  }

  .smart-add-actions .btn {
    flex: 1;
  }
}

/* Responsive mode enforcement */
body.ui-desktop .bottom-nav,
body.ui-desktop .mobile-sidebar,
body.ui-desktop .mobile-sidebar-overlay,
body.ui-desktop .mobile-menu-btn,
body.ui-desktop .sidebar-overlay {
    display: none !important;
}

body.ui-mobile #mobile-profile {
    display: block;
    padding: 1rem;
}

body.ui-mobile #profile {
    display: none;
}

body.ui-mobile.force-desktop-profile #profile,
body.ui-mobile #profile.active {
    display: block;
    padding: 1rem;
}

body.ui-desktop .sidebar,
body.ui-desktop .sidebar-toggle {
  display: block !important;
}

body.ui-desktop .app-container {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  padding-bottom: 0;
}

body.ui-mobile .sidebar,
body.ui-mobile .sidebar-toggle {
  display: none !important;
}

body.ui-mobile .app-container,
body.ui-mobile .main-content,
body.ui-mobile .section,
body.ui-mobile .section-inner,
body.ui-mobile .section-content {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

body.ui-mobile .header,
body.ui-mobile .bottom-nav {
  left: 0;
  right: 0;
  width: 100%;
}

body.ui-mobile .header-shell {
  width: 100%;
  max-width: 100%;
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
  box-sizing: border-box;
}

body.ui-mobile .header-actions {
  max-width: 100%;
  overflow-x: auto;
}

body.ui-mobile .bottom-nav {
  display: block !important;
}

body.ui-mobile .mobile-menu-btn {
  display: flex !important;
}

body.ui-mobile .mobile-sidebar,
body.ui-mobile .mobile-sidebar-overlay {
  display: none !important;
}

body.ui-mobile .mobile-sidebar.active {
  display: block !important;
}

body.ui-mobile .mobile-sidebar-overlay.active {
    display: block !important;
}

/* Mobile landscape should behave like desktop layout, even if ui-mobile is set */
body.ui-mobile.orientation-landscape {
  --sidebar-width: 220px;
}

body.ui-mobile.orientation-landscape .bottom-nav,
body.ui-mobile.orientation-landscape .mobile-sidebar,
body.ui-mobile.orientation-landscape .mobile-sidebar-overlay,
body.ui-mobile.orientation-landscape .mobile-menu-btn,
body.ui-mobile.orientation-landscape .sidebar-overlay {
  display: none !important;
}

body.ui-mobile.orientation-landscape .sidebar,
body.ui-mobile.orientation-landscape .sidebar-toggle {
  display: block !important;
}

body.ui-mobile.orientation-landscape .app-container {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  padding-bottom: 0;
}

body.ui-mobile.orientation-landscape .main-content {
  padding: clamp(0.75rem, 2vw, 1.1rem);
}

body.ui-mobile.orientation-landscape .section.active {
  padding-bottom: 1rem !important;
}

body.ui-mobile.orientation-landscape .mobile-music-player,
body.ui-mobile.orientation-landscape .mobile-music-player.active {
  bottom: calc(var(--safe-bottom) + 6px);
}

/* Global motion system */
:root {
  --anim-fast: 180ms;
  --anim-base: 320ms;
  --anim-slow: 520ms;
  --anim-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --anim-emph: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes app-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes app-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.section.active .glass-card,
.section.active .stat-card,
.section.active .stat-card-enhanced,
.section.active .note-card,
.section.active .task-item,
.section.active .calendar-card,
.section.active .store-item,
.section.active .music-track,
.section.active .profile-snapshot-card,
.section.active .profile-identity-card,
.section.active .profile-dna-card,
.section.active .profile-actions-card {
  animation: app-fade-up var(--anim-base) var(--anim-emph) both;
}

.section.active .section-header {
  animation: app-fade-in var(--anim-fast) ease both;
}

.btn,
.btn-icon,
.header-btn,
.nav-link,
.bottom-nav-link {
  transition: transform var(--anim-fast) var(--anim-ease),
    box-shadow var(--anim-fast) var(--anim-ease),
    background var(--anim-fast) var(--anim-ease),
    border-color var(--anim-fast) var(--anim-ease);
}

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

.btn:active,
.btn-icon:active,
.header-btn:active {
  transform: translateY(1px) scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  .section.active .glass-card,
  .section.active .stat-card,
  .section.active .stat-card-enhanced,
  .section.active .note-card,
  .section.active .task-item,
  .section.active .calendar-card,
  .section.active .store-item,
  .section.active .music-track,
  .section.active .profile-snapshot-card,
  .section.active .profile-identity-card,
  .section.active .profile-dna-card,
  .section.active .profile-actions-card,
  .section.active .section-header {
    animation: none !important;
  }
}

/* Onboarding polish */
.onboarding-card {
  background: linear-gradient(140deg, rgb(18 28 40 / 95%), rgb(10 16 26 / 80%));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--glass-border));
  box-shadow: 0 24px 50px rgb(6 12 24 / 45%);
}

.onboarding-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgb(30 166 140 / 18%);
  border: 1px solid rgb(30 166 140 / 40%);
  color: #e2f3ee;
}

.onboarding-highlights {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.onboarding-highlights li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
}

.onboarding-modal {
  width: min(1100px, 94vw);
  padding: 0;
  overflow: hidden;
  background: linear-gradient(140deg, rgb(11 18 28 / 98%), rgb(8 12 20 / 92%));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
}

.onboarding-header {
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid rgb(148 163 184 / 12%);
  background: linear-gradient(140deg, rgb(12 20 30 / 95%), rgb(10 16 26 / 80%));
}

.onboarding-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 0;
}

.onboarding-rail {
  padding: 1.4rem 1.2rem;
  border-right: 1px solid rgb(148 163 184 / 12%);
  background: linear-gradient(180deg, rgb(10 16 24 / 90%), rgb(8 12 18 / 96%));
  display: grid;
  gap: 1rem;
}

.onboarding-rail-title {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.onboarding-rail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.onboarding-rail-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.onboarding-rail-list li span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgb(30 166 140 / 18%);
  border: 1px solid rgb(30 166 140 / 35%);
  color: #e2f3ee;
  font-weight: 700;
  font-size: 0.75rem;
}

.onboarding-rail-tip {
  margin-top: auto;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  background: rgb(15 23 42 / 60%);
  border: 1px solid rgb(148 163 184 / 18%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.onboarding-main {
  padding: 1.5rem 1.7rem 1.8rem;
}

.onboarding-progress-track {
  background: rgb(148 163 184 / 18%);
  border-radius: 999px;
}

.onboarding-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.onboarding-carousel {
  margin-top: 1.2rem;
}

.onboarding-slide {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--anim-base) var(--anim-emph), transform var(--anim-base) var(--anim-emph);
}

.onboarding-slide.active {
  opacity: 1;
  transform: translateY(0);
}

.onboarding-hero-card,
.onboarding-mini-card {
  transition: transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);
}

.section {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms var(--anim-emph), transform 320ms var(--anim-emph);
}

.section.active {
  opacity: 1;
  transform: translateY(0);
}

.section.section-prep {
  opacity: 0;
  transform: translateY(14px);
}

.section.section-exit {
  opacity: 0;
  transform: translateY(-8px);
}

.section-transition-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--background) 68%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--anim-emph);
  z-index: 1200;
}

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

.section-transition-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--text-tertiary) 35%, transparent);
  border-top-color: var(--primary);
  box-shadow: 0 12px 24px rgb(2 6 23 / 30%);
  animation: sectionSpin 0.9s linear infinite;
}

@keyframes sectionSpin {
  to {
    transform: rotate(360deg);
  }
}

.onboarding-hero-card:hover,
.onboarding-mini-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgb(4 10 20 / 30%);
}

.onboarding-controls {
  margin-top: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

@media (width <= 900px) {
  .onboarding-layout {
    grid-template-columns: 1fr;
  }

  .onboarding-rail {
    border-right: none;
    border-bottom: 1px solid rgb(148 163 184 / 12%);
  }
}

@media (width <= 600px) {
  .onboarding-main {
    padding: 1.2rem 1.2rem 1.5rem;
  }
}

/* AI inline response */
.ai-inline-response {
  margin-top: 0.9rem;
  padding: 0.8rem 0.95rem;
  border-radius: 14px;
  background: rgb(10 16 24 / 75%);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  color: var(--text-secondary);
  display: grid;
  gap: 0.35rem;
}

.ai-inline-response-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.ai-inline-response-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary);
}

/* Theme personalities */
body.theme-ocean {
  --primary: #2dd4bf;
  --accent: #38bdf8;
  --secondary: #0ea5e9;
  --theme-bg-image: radial-gradient(900px 480px at 15% -10%, rgb(45 212 191 / 24%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(12 20 30 / 95%), rgb(10 16 26 / 80%));
  --theme-anim-layer: radial-gradient(600px 320px at 80% 20%, rgb(56 189 248 / 18%), transparent 60%);
}

body.theme-forest {
  --primary: #22c55e;
  --accent: #16a34a;
  --secondary: #84cc16;
  --theme-bg-image: radial-gradient(900px 520px at 10% -10%, rgb(34 197 94 / 28%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(12 24 18 / 92%), rgb(10 16 14 / 78%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(132 204 22 / 18%), transparent 60%);
}

body.theme-sunset {
  --primary: #f97316;
  --accent: #fb7185;
  --secondary: #f59e0b;
  --theme-bg-image: radial-gradient(820px 460px at 10% -10%, rgb(249 115 22 / 28%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(28 18 14 / 92%), rgb(16 12 10 / 80%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(251 113 133 / 18%), transparent 60%);
}

body.theme-aurora {
  --primary: #5fe3c0;
  --accent: #8b5cf6;
  --secondary: #38bdf8;
  --theme-bg-image: radial-gradient(900px 480px at 15% -10%, rgb(95 227 192 / 28%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(14 22 30 / 92%), rgb(10 16 24 / 80%));
  --theme-anim-layer: radial-gradient(540px 320px at 80% 15%, rgb(139 92 246 / 18%), transparent 60%);
}

body.theme-sapphire {
  --primary: #3bb0ff;
  --accent: #2563eb;
  --secondary: #60a5fa;
  --theme-bg-image: radial-gradient(900px 480px at 15% -10%, rgb(59 176 255 / 26%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(10 18 30 / 92%), rgb(8 12 22 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(37 99 235 / 18%), transparent 60%);
}

body.theme-citrus {
  --primary: #facc15;
  --accent: #f97316;
  --secondary: #fb923c;
  --theme-bg-image: radial-gradient(820px 460px at 15% -10%, rgb(250 204 21 / 26%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(28 22 10 / 92%), rgb(16 12 8 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(249 115 22 / 18%), transparent 60%);
}

body.theme-frost {
  --primary: #7dd3fc;
  --accent: #38bdf8;
  --secondary: #22d3ee;
  --theme-bg-image: radial-gradient(900px 480px at 15% -10%, rgb(125 211 252 / 24%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(10 16 28 / 92%), rgb(8 12 22 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(34 211 238 / 16%), transparent 60%);
}

body.theme-gold {
  --primary: #f59e0b;
  --accent: #fbbf24;
  --secondary: #f97316;
  --theme-bg-image: radial-gradient(820px 460px at 15% -10%, rgb(245 158 11 / 28%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(26 18 10 / 92%), rgb(16 12 8 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(251 191 36 / 18%), transparent 60%);
}

body.theme-coffee {
  --primary: #a16b3c;
  --accent: #d97706;
  --secondary: #78350f;
  --theme-bg-image: radial-gradient(820px 460px at 15% -10%, rgb(161 107 60 / 26%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(24 16 12 / 92%), rgb(16 12 10 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(217 119 6 / 18%), transparent 60%);
}

body.theme-rose {
  --primary: #f472b6;
  --accent: #fb7185;
  --secondary: #f43f5e;
  --theme-bg-image: radial-gradient(820px 460px at 15% -10%, rgb(244 114 182 / 26%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(26 14 20 / 92%), rgb(16 10 16 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(251 113 133 / 18%), transparent 60%);
}

body.theme-mint {
  --primary: #2ee6c8;
  --accent: #22c55e;
  --secondary: #5eead4;
  --theme-bg-image: radial-gradient(820px 460px at 15% -10%, rgb(46 230 200 / 24%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(12 22 20 / 92%), rgb(10 16 14 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(34 197 94 / 18%), transparent 60%);
}

body.theme-midnight {
  --primary: #6366f1;
  --accent: #38bdf8;
  --secondary: #22d3ee;
  --theme-bg-image: radial-gradient(900px 520px at 10% -10%, rgb(99 102 241 / 24%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(10 16 28 / 94%), rgb(8 12 20 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(56 189 248 / 18%), transparent 60%);
}

body.theme-nebula {
  --primary: #8b5cf6;
  --accent: #f472b6;
  --secondary: #38bdf8;
  --theme-bg-image: radial-gradient(900px 520px at 10% -10%, rgb(139 92 246 / 26%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(14 10 24 / 94%), rgb(10 8 18 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(244 114 182 / 18%), transparent 60%);
}

body.theme-ember {
  --primary: #fb7185;
  --accent: #f97316;
  --secondary: #f43f5e;
  --theme-bg-image: radial-gradient(820px 460px at 15% -10%, rgb(251 113 133 / 26%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(24 12 14 / 94%), rgb(16 8 10 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(249 115 22 / 18%), transparent 60%);
}

body.theme-noir {
  --primary: #0ea5e9;
  --accent: #38bdf8;
  --secondary: #22d3ee;
  --theme-bg-image: radial-gradient(900px 520px at 10% -10%, rgb(14 165 233 / 18%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(8 12 20 / 96%), rgb(6 10 16 / 86%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(56 189 248 / 16%), transparent 60%);
}

body.theme-solar {
  --primary: #fbbf24;
  --accent: #f97316;
  --secondary: #fde047;
  --theme-bg-image: radial-gradient(820px 460px at 15% -10%, rgb(251 191 36 / 26%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(24 18 10 / 92%), rgb(16 12 8 / 82%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(249 115 22 / 18%), transparent 60%);
}

body.theme-paper {
  --primary: #2563eb;
  --accent: #38bdf8;
  --secondary: #0ea5e9;
  --background: #f5f2ec;
  --surface: #ffffff;
  --surface-light: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --glass-border: rgb(15 23 42 / 12%);
  --theme-bg-image: radial-gradient(900px 520px at 10% -10%, rgb(37 99 235 / 14%), transparent 60%);
  --theme-card-overlay: linear-gradient(160deg, rgb(255 255 255 / 92%), rgb(244 244 245 / 80%));
  --theme-anim-layer: radial-gradient(520px 320px at 85% 15%, rgb(56 189 248 / 16%), transparent 60%);
}

.ai-inline-controls {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.ai-inline-toggle {
  border: 1px solid rgb(148 163 184 / 22%);
  background: rgb(12 18 26 / 65%);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 160ms ease;
}

.ai-inline-toggle input {
  display: none;
}

.ai-inline-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
  color: var(--text-primary);
  box-shadow: 0 12px 22px rgb(14 165 233 / 12%);
}

.ai-model-popover {
  margin-top: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 70%, transparent));
  box-shadow: 0 18px 40px rgb(2 6 23 / 45%);
  display: grid;
  gap: 0.6rem;
}

.ai-model-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.ai-model-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-right: 0.3rem;
}

.model-pill {
  border: 1px solid var(--border-subtle);
  background: rgb(12 18 26 / 70%);
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 160ms ease;
}

.model-pill:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border-subtle));
  color: var(--text-primary);
  transform: translateY(-1px);
}

.model-pill.active {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, transparent), color-mix(in srgb, var(--accent) 24%, transparent));
  color: var(--text-primary);
  box-shadow: 0 14px 28px rgb(2 6 23 / 35%);
}

.model-pill.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.profile-memory-card {
  display: grid;
  gap: 0.9rem;
}

.profile-memory-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.profile-memory-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.profile-memory-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.profile-memory-summary {
  font-size: 0.85rem;
}

.profile-memory-timeline {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.4rem;
}

.profile-memory-timeline-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.profile-memory-timeline-list {
  display: grid;
  gap: 0.4rem;
}

.memory-timeline-item {
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: rgb(10 16 24 / 60%);
  border: 1px solid rgb(148 163 184 / 18%);
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.memory-timeline-item span {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.memory-lock-btn {
  border: 1px solid rgb(148 163 184 / 28%);
  background: rgb(12 18 26 / 70%);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  margin-left: 0.35rem;
  cursor: pointer;
}

.memory-lock-btn.is-locked {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--primary) 25%, transparent);
}

.ai-message-confidence {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgb(148 163 184 / 24%);
  color: var(--text-tertiary);
}

.ai-thinking {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  border: 1px dashed rgb(148 163 184 / 28%);
  background: rgb(10 16 24 / 55%);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.ai-thinking-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

@media (width <= 720px) {
  .profile-memory-grid {
    grid-template-columns: 1fr;
  }

  .profile-memory-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tasks unified layout */
#tasks .tasks-content {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: start;
}

#tasks .task-list-panel,
#tasks .task-details-panel {
  background: linear-gradient(160deg, rgb(14 20 28 / 94%), rgb(12 18 24 / 82%));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  border-radius: calc(var(--radius-card) + 4px);
  padding: clamp(0.95rem, 1.8vw, 1.3rem);
  box-shadow: 0 20px 50px rgb(6 12 20 / 45%);
}

#tasks .toolbar,
#tasks .quick-add,
#tasks .filters {
  background: rgb(10 16 24 / 70%);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  border-radius: 14px;
  padding: 0.65rem 0.8rem;
}

#tasks .task-list-header {
  padding: 0.6rem 0.7rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
}

#tasks .task-item {
  border-radius: 16px;
  padding: 0.95rem 1rem;
  background: linear-gradient(150deg, rgb(16 24 32 / 90%), rgb(12 18 24 / 75%));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  box-shadow: 0 14px 30px rgb(5 10 18 / 35%);
}

#tasks .task-item.selected {
  border-color: color-mix(in srgb, var(--primary) 60%, white);
  box-shadow: 0 18px 36px rgb(30 166 140 / 28%);
}

#tasks .task-actions .btn-icon,
#tasks .task-action-btn {
  background: rgb(8 12 18 / 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  border-radius: 12px;
}

#tasks .details-header {
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  padding-bottom: 0.8rem;
}

#tasks .details-meta-item {
  background: rgb(8 12 18 / 50%);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  border-radius: 12px;
  padding: 0.75rem;
}

#tasks .details-tags {
  gap: 0.5rem;
}

@media (width <= 1100px) {
  #tasks .tasks-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 720px) {
  #tasks .task-list-panel,
  #tasks .task-details-panel {
    padding: 0.85rem;
  }

  #tasks .toolbar,
  #tasks .quick-add,
  #tasks .filters {
    padding: 0.6rem;
  }
}

/* Friends system */
.profile-friends-card {
  margin-top: var(--space-3);
  display: grid;
  gap: 1.1rem;
}

.profile-friends-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.friends-meta .badge {
  background: rgb(59 130 246 / 18%);
  border: 1px solid rgb(59 130 246 / 35%);
  color: #dbeafe;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.friends-code {
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgb(10 15 22 / 65%);
  border: 1px solid rgb(148 163 184 / 18%);
}

.friends-code-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.friends-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
}

.friends-code-value {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #f8fafc;
}

.friends-code-hint {
  margin-top: 0.35rem;
}

.friends-add {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
}

.friends-add .btn {
  align-self: end;
}

.friends-list {
  display: grid;
  gap: 0.75rem;
}

.friends-empty {
  text-align: center;
  padding: 0.6rem 0;
}

.friend-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  background: rgb(12 17 24 / 72%);
  border: 1px solid rgb(148 163 184 / 18%);
}

.friend-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(140deg, rgb(59 130 246 / 60%), rgb(56 189 248 / 50%));
  color: #0b1117;
}

.friend-meta {
  display: grid;
  gap: 0.2rem;
}

.friend-name {
  font-weight: 600;
}

.friend-code {
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

.friend-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (width <= 720px) {
  .friends-add {
    grid-template-columns: 1fr;
  }

  .friend-row {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .friend-actions {
    justify-content: flex-start;
  }
}

.friends-leaderboard-card,
.friends-challenges-card {
  display: grid;
  gap: 1rem;
}

.friends-exchange-card {
  display: grid;
  gap: 1rem;
}

.friends-exchange-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.friends-exchange-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.challenge-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.challenge-tabs .btn.active {
  background: linear-gradient(135deg, rgb(59 130 246 / 35%), rgb(34 197 94 / 25%));
  border-color: rgb(59 130 246 / 45%);
  color: #e2e8f0;
}

.leaderboard-list {
  display: grid;
  gap: 0.65rem;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  background: rgb(10 16 24 / 65%);
  border: 1px solid rgb(148 163 184 / 16%);
}

.leaderboard-rank {
  font-weight: 700;
  color: #e2e8f0;
}

.leaderboard-score {
  font-weight: 700;
  color: #38bdf8;
}

.leaderboard-meta {
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

.friends-challenge-form {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.challenge-list {
  display: grid;
  gap: 0.6rem;
}

.challenge-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: rgb(12 18 26 / 65%);
  border: 1px solid rgb(148 163 184 / 18%);
}

.challenge-title {
  font-weight: 600;
}

.challenge-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (width <= 720px) {
  .leaderboard-row {
    grid-template-columns: auto 1fr;
  }

  .challenge-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .friends-challenge-form {
    grid-template-columns: 1fr;
  }
}

/* Store upgrade */
#store .store-status-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#store .store-trials-card {
  padding: 1.2rem;
  border-radius: 20px;
  background: linear-gradient(140deg, rgb(12 18 26 / 96%), rgb(20 26 38 / 80%));
  border: 1px solid rgb(148 163 184 / 22%);
  box-shadow: 0 22px 50px rgb(6 10 18 / 45%);
}

#store .store-trials-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#store .store-trial-tier {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgb(10 16 24 / 70%);
  border: 1px solid rgb(148 163 184 / 18%);
}

#store .store-trial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

#store .store-trial-pill {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgb(59 130 246 / 20%);
  border: 1px solid rgb(59 130 246 / 40%);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#store .store-trial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#store .trial-status {
  font-size: 0.82rem;
}

#store .store-banner {
  position: relative;
  overflow: hidden;
  padding: 1.2rem 1.4rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(12 18 26 / 96%), rgb(24 30 42 / 82%));
}

#store .store-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(380px 220px at 20% 0%, rgb(34 197 94 / 20%), transparent 60%),
              radial-gradient(360px 240px at 90% 10%, rgb(59 130 246 / 18%), transparent 62%);
  pointer-events: none;
}

#store .store-items-card {
  padding: 1.2rem;
  border-radius: 18px;
}

#store .store-items-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

#store .store-item {
  position: relative;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(145deg, rgb(10 15 22 / 96%), rgb(12 18 26 / 78%));
  border: 1px solid rgb(148 163 184 / 18%);
  box-shadow: 0 18px 36px rgb(5 10 18 / 45%);
  display: grid;
  gap: 0.6rem;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  min-height: 132px;
}

#store .store-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgb(59 130 246 / 12%), rgb(34 197 94 / 8%));
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

#store .store-item:hover {
  transform: translateY(-4px);
  border-color: rgb(59 130 246 / 40%);
  box-shadow: 0 24px 48px rgb(5 10 18 / 55%);
}

#store .store-item:hover::after {
  opacity: 1;
}

#store .store-item-title {
  font-weight: 700;
  font-size: 1rem;
}

#store .store-item-meta {
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

#store .store-item.deal {
  border-color: rgb(34 197 94 / 45%);
  box-shadow: 0 22px 44px rgb(16 185 129 / 22%);
}

#store .store-item-meta .price-old {
  text-decoration: line-through;
  opacity: 0.6;
  margin-right: 0.35rem;
}

#store .store-item-meta .price-new {
  font-weight: 700;
  color: #22c55e;
  margin-right: 0.35rem;
}

#store .store-daily-deals {
  padding: 0.8rem 1rem;
  border-radius: 16px;
  background: rgb(12 18 26 / 70%);
  border: 1px solid rgb(34 197 94 / 30%);
  margin-bottom: 0.85rem;
}

#store .deal-title {
  font-weight: 700;
  margin-bottom: 0.45rem;
}

#store .deal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#store .deal-chip {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgb(34 197 94 / 18%);
  border: 1px solid rgb(34 197 94 / 35%);
  font-size: 0.75rem;
}

.store-referral-progress {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.4rem;
}

.store-referral-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

.store-referral-bar {
  height: 8px;
  border-radius: 999px;
  background: rgb(148 163 184 / 20%);
  overflow: hidden;
}

.store-referral-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgb(59 130 246 / 70%), rgb(34 197 94 / 70%));
  transition: width 200ms ease;
}

.referral-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.referral-chip {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgb(15 23 42 / 70%);
  border: 1px solid rgb(148 163 184 / 20%);
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

.referral-chip.done {
  color: #dbeafe;
  border-color: rgb(59 130 246 / 45%);
}

.referral-chip.claimed {
  color: #dcfce7;
  border-color: rgb(34 197 94 / 50%);
}

.store-referral-qr {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.store-referral-qr .qr-preview {
  width: 170px;
  height: 170px;
  border-radius: 16px;
  background: rgb(8 12 18 / 65%);
  border: 1px solid rgb(148 163 184 / 25%);
  display: grid;
  place-items: center;
}

.store-referral-qr canvas {
  width: 140px;
  height: 140px;
}

.store-referral-qr .qr-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#store .store-weekly-drops {
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: rgb(14 20 28 / 70%);
  border: 1px solid rgb(59 130 246 / 35%);
  margin-bottom: 0.85rem;
}

#store .weekly-title {
  font-weight: 700;
  margin-bottom: 0.45rem;
}

#store .weekly-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#store .weekly-chip {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgb(59 130 246 / 18%);
  border: 1px solid rgb(59 130 246 / 35%);
  font-size: 0.75rem;
}

#store .store-item.seasonal-drop::before {
  content: "Weekly Drop";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgb(59 130 246 / 20%);
  border: 1px solid rgb(59 130 246 / 45%);
  color: #dbeafe;
}

#store .store-item.seasonal-drop[data-drop-expiry]::after {
  content: attr(data-drop-expiry);
  position: absolute;
  top: 36px;
  right: 10px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgb(15 23 42 / 70%);
  border: 1px solid rgb(59 130 246 / 35%);
  color: #e2e8f0;
}

#store .store-item.seasonal-drop .drop-stock {
  font-size: 0.75rem;
  color: #f8fafc;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgb(15 23 42 / 60%);
  border: 1px solid rgb(148 163 184 / 24%);
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

#store .store-item.seasonal-drop.sold-out {
  opacity: 0.55;
  filter: grayscale(0.2);
}

#store .store-item.seasonal-drop.sold-out::before {
  content: "Sold Out";
  background: rgb(248 113 113 / 25%);
  border-color: rgb(248 113 113 / 50%);
  color: #fecaca;
}

#store .store-item[data-category="theme"] {
  border-color: rgb(56 189 248 / 25%);
}

#store .store-item[data-category="badge"] {
  border-color: rgb(251 191 36 / 25%);
}

#store .store-item[data-category="boost"] {
  border-color: rgb(244 63 94 / 28%);
}

#store .store-item[data-category="membership"] {
  border-color: rgb(16 185 129 / 28%);
}

#store .store-filter-btn {
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgb(148 163 184 / 24%);
  background: rgb(10 14 20 / 55%);
  color: var(--text-secondary);
  font-weight: 600;
  transition: all 160ms ease;
}

#store .store-filter-btn.active,
#store .store-filter-btn:hover {
  border-color: rgb(59 130 246 / 50%);
  background: linear-gradient(135deg, rgb(59 130 246 / 25%), rgb(34 197 94 / 20%));
  color: #e2e8f0;
}

#store .store-card-empty {
  display: none;
}

#store .store-items-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#store .store-item {
  min-height: 172px;
}

#store .store-item-title {
  line-height: 1.25;
}

#store .store-item-meta {
  min-height: 2.6em;
  line-height: 1.4;
}

#store .store-premium-card {
  position: relative;
  overflow: hidden;
}

#store .store-premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background: radial-gradient(260px 180px at 80% 0%, rgb(56 189 248 / 40%), transparent 65%);
  pointer-events: none;
}

#store .store-premium-card.vip-tier::before {
  background: radial-gradient(260px 180px at 80% 0%, rgb(245 158 11 / 45%), transparent 65%);
}

/* Dashboard next-level layout */
#dashboard .dashboard-top-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

#dashboard .dashboard-focus-card {
  display: grid;
  gap: 1rem;
}

#dashboard .focus-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#dashboard .focus-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

#dashboard .focus-priorities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

#dashboard .focus-priorities-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

#dashboard .focus-priority-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
  color: var(--text-secondary);
}

#dashboard .priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(30 166 140 / 90%);
}

#dashboard .dashboard-actions-row {
  display: grid;
  gap: 0.8rem;
}

#dashboard .dashboard-actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

#dashboard .focus-runway {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

#dashboard .runway-block {
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  background: rgb(8 12 18 / 60%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#dashboard .runway-focus {
  background: rgb(30 166 140 / 18%);
  border-color: rgb(30 166 140 / 35%);
}

#dashboard .runway-break {
  background: rgb(59 130 246 / 16%);
  border-color: rgb(59 130 246 / 30%);
}

#dashboard .runway-meeting {
  background: rgb(245 158 11 / 16%);
  border-color: rgb(245 158 11 / 30%);
}

#dashboard .momentum-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#dashboard .momentum-streak .streak-badge {
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 16px;
  padding: 0.7rem 0.9rem;
}

#dashboard .momentum-streak .streak-meta {
  margin-top: 0.6rem;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

#dashboard .momentum-week {
  display: grid;
  gap: 0.5rem;
}

#dashboard .performance-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#dashboard .performance-metric {
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
  display: grid;
  gap: 0.55rem;
}

#dashboard .metric-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

#dashboard .metric-value {
  font-size: 1.35rem;
  font-weight: 700;
}

#dashboard .metric-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--text-tertiary);
  font-size: 0.8rem;
}

#dashboard .performance-score .score-display {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

#dashboard .performance-score .score-breakdown {
  flex: 1;
}

#dashboard .pinned-goals-card .pinned-goals-list {
  display: grid;
  gap: 0.6rem;
}

#dashboard .pinned-goal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: rgb(8 12 18 / 55%);
  border: 1px solid rgb(255 255 255 / 8%);
}

#dashboard .pinned-goal-title {
  font-weight: 600;
}

#dashboard .pinned-goal-meta {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

#dashboard .pinned-goal-progress {
  font-weight: 700;
  color: rgb(34 197 94 / 90%);
}

@media (width >= 1100px) {
  #dashboard .dashboard-top-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  }

  #dashboard .dashboard-focus-card,
  #dashboard .dashboard-actions-row,
  #dashboard .performance-card {
    grid-column: 1 / -1;
  }
}

@media (width <= 720px) {
  #dashboard .focus-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  #dashboard .performance-score .score-display {
    flex-direction: column;
    align-items: flex-start;
  }
}

.profile-workspaces-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.profile-workspaces-card {
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--glass-border));
  background: linear-gradient(155deg, rgb(12 19 29 / 94%), rgb(10 16 24 / 78%));
  box-shadow: 0 18px 42px rgb(3 8 16 / 32%);
}

.profile-workspace-summary {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.profile-workspace-summary .badge-pill {
  min-height: 32px;
  padding: 0.4rem 0.72rem;
  font-size: 0.78rem;
}

.profile-workspace-create {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(120px, 0.48fr) auto auto minmax(170px, auto);
  gap: 0.85rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(140deg, rgb(14 22 32 / 78%), rgb(10 16 24 / 58%));
}

.profile-workspace-create .form-group {
  margin: 0;
}

.profile-workspace-create .form-label {
  font-size: 0.77rem;
  margin-bottom: 0.38rem;
}

.profile-workspace-create .form-input {
  min-height: 46px;
  padding: 0.62rem 0.72rem;
  font-size: 0.95rem;
}

.profile-workspace-create input[type="color"].form-input {
  inline-size: 100%;
  min-width: 100%;
  padding: 0.3rem;
}

.profile-workspace-switch-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.profile-workspace-switch-row .text-tertiary {
  font-size: 0.82rem;
  line-height: 1.2;
}

.profile-workspace-create .btn {
  min-height: 46px;
  padding: 0.68rem 1rem;
  font-size: 0.9rem;
}

.profile-workspace-list {
  display: grid;
  gap: 0.82rem;
  margin-top: 1rem;
}

.profile-workspace-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 92px auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.92rem 1rem;
  border-radius: 18px;
  background: linear-gradient(140deg, rgb(10 18 28 / 76%), rgb(8 14 22 / 62%));
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.profile-workspace-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--glass-border));
  box-shadow: 0 10px 28px rgb(4 9 16 / 30%);
}

.profile-workspace-row.active {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--glass-border));
  box-shadow: 0 10px 26px rgb(6 12 20 / 30%);
}

.profile-workspace-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ws-color, var(--primary));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.profile-workspace-info {
  display: grid;
  gap: 0.2rem;
}

.profile-workspace-name {
  min-height: 44px;
  font-size: 0.95rem;
}

.profile-workspace-color {
  min-height: 44px;
  inline-size: 100%;
  min-width: 100%;
  padding: 0.2rem;
}

.profile-workspace-meta {
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

.profile-workspace-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile-workspace-actions .btn {
  min-width: 88px;
  min-height: 40px;
  font-size: 0.86rem;
}

@media (max-width: 980px) {
  .profile-workspaces-card .card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .profile-workspace-summary {
    justify-content: flex-start;
  }
  .profile-workspace-create {
    grid-template-columns: 1fr 1fr;
  }
  .profile-workspace-switch-row,
  .profile-workspace-create .btn {
    grid-column: 1 / -1;
  }
  .profile-workspace-switch-row {
    justify-self: start;
  }
  .profile-workspace-create .btn {
    justify-self: start;
    min-width: 190px;
  }
}

@media (max-width: 720px) {
  .profile-workspace-create {
    grid-template-columns: 1fr;
    padding: 0.82rem;
    gap: 0.75rem;
  }
  .profile-workspace-row {
    grid-template-columns: auto 1fr;
    padding: 0.82rem 0.88rem;
    border-radius: 16px;
  }
  .profile-workspace-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    width: 100%;
  }
  .profile-workspace-row .profile-workspace-color {
    justify-self: start;
    width: 120px;
  }
  .profile-workspace-actions .btn {
    flex: 1 1 0;
  }
  .profile-workspace-switch-row {
    width: 100%;
    justify-content: flex-start;
    min-height: 48px;
  }
  #mobile-profile-workspaces-card {
    padding: 1rem;
    border-radius: 20px;
  }
  #mobile-profile-workspaces-card .card-header h3 {
    font-size: 1.02rem;
  }
  #mobile-profile-workspaces-card .card-header p {
    font-size: 0.85rem;
  }
  #mobile-profile-workspaces-card .profile-workspace-summary .badge-pill {
    min-height: 34px;
    font-size: 0.76rem;
  }
  #mobile-profile-workspaces-card .profile-workspace-create .form-input {
    min-height: 48px;
    font-size: 0.98rem;
  }
  #mobile-profile-workspaces-card .profile-workspace-row {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  #mobile-profile-workspaces-card .profile-workspace-chip {
    width: 12px;
    height: 12px;
  }
  #mobile-profile-workspaces-card .profile-workspace-color {
    width: 100%;
  }
  #mobile-profile-workspaces-card .profile-workspace-actions .btn {
    min-height: 42px;
  }
  .settings-workspaces-card .profile-workspace-create .form-input {
    min-height: 48px;
  }
}

.settings-workspaces-card {
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  background: linear-gradient(150deg, rgb(12 18 28 / 92%), rgb(10 16 24 / 72%));
}

.settings-workspaces-card .profile-workspace-create {
  border-radius: 18px;
  background: linear-gradient(140deg, rgb(12 18 28 / 66%), rgb(10 16 24 / 54%));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-workspaces-card .profile-workspace-row {
  background: rgba(12, 18, 28, 0.65);
}

.integrations-card .settings-card-header {
  align-items: center;
}

.integrations-grid {
  display: grid;
  gap: 0.9rem;
}

.integration-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgba(12, 18, 28, 0.6);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
}

.integration-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.integration-actions {
  display: grid;
  gap: 0.4rem;
  justify-items: end;
}

.integration-actions .badge-pill {
  font-size: 0.7rem;
}

@media (max-width: 720px) {
  .integration-card {
    grid-template-columns: 1fr;
  }
  .integration-actions {
    justify-items: start;
  }
}

/* ===============================
   Global Accent Harmonizer
   =============================== */
:root {
  --app-accent-soft: var(--primary-soft, color-mix(in srgb, var(--primary) 18%, transparent));
  --app-accent-strong: var(--primary-strong, color-mix(in srgb, var(--primary) 36%, transparent));
  --app-focus-ring: var(--focus-ring, color-mix(in srgb, var(--primary) 45%, transparent));
}

.badge-pill-accent,
.tab-btn.active,
.store-filter-btn.active,
.bottom-nav-link.active {
  background: var(--app-accent-soft);
  border-color: var(--app-accent-strong);
}

.glass-card,
.settings-card,
.modal-content,
.card {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--glass-border));
}

.form-input:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  box-shadow: 0 0 0 3px var(--app-focus-ring);
}

/* ===============================
   Modern Surface Pass
   =============================== */
.toolbar,
.filters,
.quick-add,
.search-box,
.modal-content,
.modal2 .modal-content {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface) 95%, var(--primary) 5%),
      color-mix(in srgb, var(--surface) 86%, transparent)
    );
  box-shadow: 0 18px 40px rgb(5 10 20 / 28%);
}

.toolbar,
.filters,
.quick-add {
  border-radius: 18px;
}

.search-box {
  border-radius: 16px;
  overflow: clip;
}

.search-box input,
.quick-add input,
.quick-add .form-input {
  font-size: 0.95rem;
}

.modal-content,
.modal2 .modal-content {
  border-radius: 24px;
  backdrop-filter: blur(22px) saturate(140%);
}

.modal-header,
.modal-body {
  position: relative;
  z-index: 1;
}

.form-group {
  gap: 0.45rem;
}

.form-label,
.form-group label {
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

.form-input,
.form-textarea,
.form-select,
select,
textarea {
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.form-input::placeholder,
.form-textarea::placeholder,
textarea::placeholder,
input::placeholder {
  color: color-mix(in srgb, var(--text-tertiary) 88%, transparent);
}

.empty-state,
.empty-card,
.empty-placeholder {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface) 92%, var(--primary) 8%),
      color-mix(in srgb, var(--surface) 86%, transparent)
    );
  border: 1px dashed color-mix(in srgb, var(--primary) 24%, var(--glass-border));
  box-shadow: 0 12px 28px rgb(6 12 20 / 18%);
}

.loading-status-pill {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--glass-border));
}

.loading-progress {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 14%, transparent);
}

.section .card-header {
  margin-bottom: 1rem;
}

.section .card-header p {
  max-width: 54ch;
}

/* ===============================
   Premium Section Polish
   =============================== */
.section .section-header {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--surface) 94%, var(--primary) 6%),
    color-mix(in srgb, var(--surface) 86%, transparent)
  );
}

.section .section-title {
  letter-spacing: 0.01em;
}

.section .section-subtitle {
  color: var(--text-secondary);
}

#dashboard .glass-card,
#tasks .glass-card,
#notes .glass-card,
#timer .glass-card,
#settings .glass-card {
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--glass-border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--primary) 6%), color-mix(in srgb, var(--surface) 86%, transparent)),
    var(--glass-bg);
  box-shadow: 0 16px 38px rgb(4 10 20 / 28%);
}

#dashboard .glass-card:hover,
#tasks .glass-card:hover,
#notes .glass-card:hover,
#timer .glass-card:hover,
#settings .glass-card:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--glass-border));
  box-shadow: 0 22px 48px rgb(4 10 20 / 34%);
}

#dashboard .card-header h3,
#tasks .card-header h3,
#notes .card-header h3,
#timer .card-header h3,
#settings .card-header h3 {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem);
}

#tasks .task-item,
#notes .note-card {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--glass-border));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--surface) 93%, var(--primary) 7%),
    color-mix(in srgb, var(--surface) 86%, transparent)
  );
}

#tasks .task-item:hover,
#notes .note-card:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--glass-border));
}

#timer .timer-display {
  display: inline-block;
  border: none;
  padding: 0;
  background: linear-gradient(90deg, var(--text-primary), color-mix(in srgb, var(--primary) 72%, white));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text-primary);
  box-shadow: none;
  text-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 18%, transparent);
}

#settings .settings-card-header {
  align-items: center;
  gap: 0.75rem;
}

#settings .settings-card {
  border-radius: 18px;
}

.settings-spotlight-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.settings-spotlight-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--glass-border));
  background: linear-gradient(145deg, rgb(12 18 28 / 78%), rgb(18 28 40 / 62%));
  color: var(--text-primary);
  font-weight: 600;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.settings-spotlight-chip:hover,
.settings-spotlight-chip:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--glass-border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, rgb(12 18 28 / 84%)), rgb(18 28 40 / 70%));
}

#settings-search-meta {
  display: block;
  margin-top: 0.65rem;
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .settings-spotlight-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section .section-header {
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
  }
  #dashboard .glass-card,
  #tasks .glass-card,
  #notes .glass-card,
  #timer .glass-card,
  #settings .glass-card {
    border-radius: 16px;
    box-shadow: 0 12px 28px rgb(4 10 20 / 24%);
  }
  #dashboard .card-header h3,
  #tasks .card-header h3,
  #notes .card-header h3,
  #timer .card-header h3,
  #settings .card-header h3 {
    font-size: 1rem;
  }
}

/* ===============================
   Mobile Max Pass
   =============================== */
@media (max-width: 720px) {
  body.ui-mobile {
    --mobile-shell-pad: 0.9rem;
    --mobile-card-radius: 18px;
  }

  body.ui-mobile .header {
    padding-top: env(safe-area-inset-top, 0px);
    backdrop-filter: blur(18px) saturate(145%);
  }

  body.ui-mobile .header-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    gap: 0.3rem;
    padding:
      calc(0.62rem + env(safe-area-inset-top, 0px))
      max(var(--mobile-shell-pad), env(safe-area-inset-right, 0px))
      0.72rem
      max(var(--mobile-shell-pad), env(safe-area-inset-left, 0px));
    border-radius: 0 0 24px 24px;
    border-left: 0;
    border-right: 0;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--primary) 3%), color-mix(in srgb, var(--surface) 90%, transparent));
    box-shadow: 0 16px 34px rgb(3 8 20 / 22%);
  }

  body.ui-mobile .header-left,
  body.ui-mobile .header-brand,
  body.ui-mobile .header-text {
    min-width: 0;
  }

  body.ui-mobile .header-brand {
    gap: 0.6rem;
  }

  body.ui-mobile .header-left {
    display: none;
  }

  body.ui-mobile .header-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  body.ui-mobile .header-title {
    font-size: 0.96rem;
    line-height: 1.1;
  }

  body.ui-mobile .header-subtitle {
    display: none;
  }

  body.ui-mobile .header-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0.28rem;
    border-radius: 18px;
    margin: 0 auto;
    background: linear-gradient(145deg, rgb(12 18 28 / 60%), rgb(18 28 40 / 34%));
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), 0 12px 24px rgb(3 8 20 / 18%);
  }

  body.ui-mobile .header-actions > * {
    min-width: 0;
    flex: 0 0 auto;
  }

  body.ui-mobile #header-status-pill {
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 12px;
  }

  body.ui-mobile #battery-indicator {
    min-height: 38px;
    min-width: 54px;
    justify-content: center;
    padding: 0.32rem 0.42rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
  }

  body.ui-mobile #header-workspace-switcher {
    display: none;
  }

  body.ui-mobile .header-workspace-btn,
  body.ui-mobile .header-profile-btn,
  body.ui-mobile #notification-btn,
  body.ui-mobile #mobile-menu-btn,
  body.ui-mobile .mobile-menu-btn {
    min-height: 38px;
    justify-content: center;
    border-radius: 12px;
  }

  body.ui-mobile .header-profile-group {
    display: flex;
    align-items: center;
    gap: 0;
  }

  body.ui-mobile .header-profile-tab {
    display: none;
  }

  body.ui-mobile .header-profile-btn {
    width: 38px;
    padding-inline: 0;
  }

  body.ui-mobile .header-workspace-menu {
    left: 0;
    right: 0;
    width: auto;
  }

  body.ui-mobile .header-workspace-btn {
    max-width: 88px;
    padding: 0.42rem 0.62rem;
    gap: 0.3rem;
    font-size: 0.72rem;
  }

  body.ui-mobile .header-workspace-label {
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.ui-mobile #header-status-pill .sync-pill,
  body.ui-mobile #header-status-pill .sync-live-pill,
  body.ui-mobile #header-status-pill #offline-ready-pill {
    display: none;
  }

  body.ui-mobile #header-status-pill .net-indicator {
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgb(12 18 28 / 80%), rgb(18 28 40 / 62%));
  }

  body.ui-mobile #header-status-pill .net-dot {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
  }

  body.ui-mobile #sync-btn,
  body.ui-mobile #friends-btn {
    display: none;
  }

  body.ui-mobile #notification-btn,
  body.ui-mobile #mobile-menu-btn,
  body.ui-mobile .header-profile-btn {
    width: 38px;
    padding-inline: 0;
  }

  body.ui-mobile .battery-status {
    display: none;
  }

  body.ui-mobile .header-actions .header-btn,
  body.ui-mobile .header-actions .mobile-menu-btn {
    background: linear-gradient(145deg, rgb(12 18 28 / 80%), rgb(18 28 40 / 62%));
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--glass-border));
    box-shadow: 0 10px 22px rgb(4 10 20 / 20%);
  }

  body.ui-mobile .main-content {
    padding:
      calc(0.9rem + env(safe-area-inset-top, 0px))
      var(--mobile-shell-pad)
      calc(var(--bottom-nav-height) + var(--safe-bottom) + 1rem)
      var(--mobile-shell-pad);
  }

  body.ui-mobile .main-content > .section {
    max-width: 100%;
  }

  body.ui-mobile .section {
    padding: 0 !important;
  }

  body.ui-mobile .section.active {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 1rem) !important;
  }

  body.ui-mobile .section-header {
    margin-bottom: 0.9rem;
    padding: 0.9rem;
    border-radius: 18px;
  }

  body.ui-mobile .section-title {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
    line-height: 1.05;
  }

  body.ui-mobile .section-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  body.ui-mobile .glass-card,
  body.ui-mobile .stat-card,
  body.ui-mobile .stat-card-enhanced,
  body.ui-mobile .note-card,
  body.ui-mobile .task-item,
  body.ui-mobile .store-card,
  body.ui-mobile .calendar-card,
  body.ui-mobile .profile-snapshot-card,
  body.ui-mobile .profile-identity-card,
  body.ui-mobile .profile-dna-card,
  body.ui-mobile .profile-actions-card {
    border-radius: var(--mobile-card-radius);
    padding: 1rem;
    box-shadow: 0 14px 34px rgb(4 10 20 / 22%);
  }

  body.ui-mobile .card-grid,
  body.ui-mobile .stats-grid,
  body.ui-mobile .actions-grid {
    grid-template-columns: 1fr !important;
    gap: 0.9rem;
  }

  body.ui-mobile .card-header {
    gap: 0.65rem;
    margin-bottom: 0.9rem;
  }

  body.ui-mobile .card-header h3 {
    font-size: 1rem;
    line-height: 1.2;
  }

  body.ui-mobile .toolbar,
  body.ui-mobile .filters,
  body.ui-mobile .quick-add,
  body.ui-mobile .search-box {
    border-radius: 16px;
  }

  body.ui-mobile .toolbar,
  body.ui-mobile .filters,
  body.ui-mobile .quick-add {
    padding: 0.75rem;
  }

  body.ui-mobile .form-input,
  body.ui-mobile .form-textarea,
  body.ui-mobile .form-select,
  body.ui-mobile select,
  body.ui-mobile textarea {
    min-height: 48px;
    font-size: 0.98rem;
    border-radius: 14px;
  }

  body.ui-mobile .btn,
  body.ui-mobile .btn-primary,
  body.ui-mobile .btn-secondary {
    min-height: 46px;
    border-radius: 14px;
  }

  body.ui-mobile .btn-sm,
  body.ui-mobile .btn-small {
    min-height: 42px;
  }

  body.ui-mobile .bottom-nav {
    padding:
      0.44rem
      max(0.7rem, env(safe-area-inset-right))
      calc(0.38rem + var(--safe-bottom))
      max(0.7rem, env(safe-area-inset-left));
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface) 98%, var(--primary) 2%),
        color-mix(in srgb, var(--surface) 91%, transparent)
      );
    border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--glass-border));
    box-shadow: 0 -16px 34px rgb(2 6 16 / 30%);
  }

  body.ui-mobile .bottom-nav-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.34rem;
    overflow: visible;
    padding: 0;
    width: 100%;
  }

  body.ui-mobile .bottom-nav-item {
    min-width: 0;
  }

  body.ui-mobile .bottom-nav-link {
    min-height: 56px;
    padding: 0.44rem 0.22rem;
    border-radius: 17px;
    gap: 0.2rem;
    justify-content: center;
    background: linear-gradient(160deg, rgb(12 18 28 / 54%), rgb(18 28 40 / 36%));
    border: 1px solid transparent;
  }

  body.ui-mobile .bottom-nav-link i {
    font-size: 1.02rem;
  }

  body.ui-mobile .bottom-nav-text {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.05;
  }

  body.ui-mobile .bottom-nav-link.active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--glass-border));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 16%, transparent);
  }

  body.ui-mobile .bottom-nav-link.bottom-nav-link-primary {
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 24%, rgb(12 18 28 / 92%)), color-mix(in srgb, var(--accent, var(--primary)) 20%, rgb(22 30 44 / 88%)));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--glass-border));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 18%, transparent);
  }

  body.ui-mobile .bottom-nav-link.bottom-nav-link-primary i,
  body.ui-mobile .bottom-nav-link.bottom-nav-link-primary .bottom-nav-text {
    color: var(--text-primary);
  }

  body.ui-mobile #timer .timer-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    justify-content: stretch;
    align-items: stretch;
    border-radius: 18px;
    padding: 0.6rem;
  }

  body.ui-mobile #timer .timer-controls .timer-btn {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    padding: 0.7rem 0.55rem;
    font-size: 0.9rem;
    line-height: 1.1;
  }

  body.ui-mobile #dashboard .dashboard-header-actions,
  body.ui-mobile #tasks .toolbar,
  body.ui-mobile #tasks .quick-add,
  body.ui-mobile #tasks .filters,
  body.ui-mobile #music .music-toolbar,
  body.ui-mobile #settings .settings-card-header {
    gap: 0.7rem;
  }

  body.ui-mobile #tasks .toolbar,
  body.ui-mobile #music .music-toolbar,
  body.ui-mobile #settings .settings-card-header {
    flex-wrap: wrap;
  }

  body.ui-mobile .modal-content,
  body.ui-mobile .modal2 .modal-content {
    width: min(94vw, 640px);
    max-height: 88vh;
    margin: max(2vh, env(safe-area-inset-top)) auto;
    border-radius: 22px;
  }

  body.ui-mobile .modal-body {
    max-height: calc(88vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (width <= 360px) {
  body.ui-mobile .bottom-nav-text {
    display: none;
  }

  body.ui-mobile .bottom-nav-link {
    min-height: 52px;
    padding: 0.4rem 0.18rem;
  }

  body.ui-mobile #timer .timer-controls {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   UI Stability Pass
   =============================== */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.app-container,
.main-content,
.section,
.section-content,
.section-inner {
  min-width: 0;
}

.main-content {
  width: 100%;
}

body.ui-desktop .main-content {
  padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
}

body.ui-desktop .section.active {
  width: min(100%, 1440px);
  margin-inline: auto;
}

body.ui-desktop .section-header,
body.ui-desktop .glass-card,
body.ui-desktop .zyui-card {
  min-width: 0;
}

body.ui-desktop #music .music-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
}

body.ui-desktop #music .music-toolbar,
body.ui-desktop #tasks .toolbar,
body.ui-desktop #dashboard .dashboard-header-actions {
  min-width: 0;
}

body.ui-desktop #music .music-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

body.ui-mobile .section-header,
body.ui-mobile .glass-card,
body.ui-mobile .zyui-card,
body.ui-mobile .toolbar,
body.ui-mobile .music-toolbar,
body.ui-mobile .quick-add,
body.ui-mobile .filters {
  max-width: 100%;
  min-width: 0;
}

body.ui-mobile #music .music-layout,
body.ui-mobile #music .music-main,
body.ui-mobile #music .music-sidebar,
body.ui-mobile #music .music-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

body.ui-mobile #music .music-toolbar {
  padding: 0.85rem;
}

body.ui-mobile #music .music-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  width: 100%;
}

body.ui-mobile #music .music-controls .btn,
body.ui-mobile #music .music-search,
body.ui-mobile #music .music-search input {
  width: 100%;
  min-width: 0;
}

body.ui-mobile #music .music-track {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem;
}

body.ui-mobile #music .music-track .track-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

body.ui-mobile #music .track-title,
body.ui-mobile #music .track-artist,
body.ui-mobile .track-title,
body.ui-mobile .track-artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.music-playing .floating-player,
body.music-playing .mobile-music-player {
  animation: none;
  transform: none;
}

body.music-playing .mobile-music-player.active {
  transform: translateY(0);
}

.floating-player {
  contain: layout paint;
  will-change: width, height, box-shadow;
}

.floating-player:hover,
.floating-player.expanded {
  transform: none;
}

.floating-player .player-content,
.mobile-music-player .mobile-player-content,
.mobile-player-expanded {
  min-width: 0;
}

.mobile-music-player {
  left: max(0.75rem, env(safe-area-inset-left));
  right: max(0.75rem, env(safe-area-inset-right));
  width: auto;
  max-width: 640px;
  margin-inline: auto;
  transform: translateY(calc(100% + 12px));
  will-change: transform;
}

.mobile-music-player.active {
  bottom: calc(var(--bottom-nav-height, 64px) + var(--safe-bottom, 0px) + 0.55rem);
}

.mobile-player-content {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.mobile-track-details,
.expanded-track-info,
.floating-player .track-info {
  min-width: 0;
}

.mobile-control-btn,
.mobile-extra-btn,
.floating-player .player-controls button {
  flex: 0 0 auto;
}

.mobile-player-expanded.active {
  max-height: min(72vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (width <= 480px) {
  .mobile-player-content {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mobile-player-controls,
  .mobile-extra-controls {
    grid-column: 2;
  }

  .mobile-track-image {
    width: 40px;
    height: 40px;
  }
}

/* ===============================
   Whole App Responsive UX Pass
   =============================== */
.section,
.glass-card,
.zyui-card,
.modal-content,
.modal2 .modal-content,
.modal3-content {
  overflow-wrap: anywhere;
}

.section :is(.toolbar, .filters, .quick-add, .settings-card-header, .dashboard-header-actions, .calendar-controls, .notes-folder-actions, .task-actions, .card-header) {
  min-width: 0;
}

.section :is(.toolbar, .filters, .quick-add, .dashboard-header-actions, .calendar-controls, .notes-folder-actions) > * {
  min-width: 0;
}

.section :is(.form-input, .form-select, .form-textarea, select, textarea, input) {
  max-width: 100%;
}

.section :is(.table-wrap, .admin-table-wrap, .analytics-table-wrap, .settings-table-wrap) {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.ui-desktop .section :is(.card-grid, .stats-grid, .actions-grid, .analytics-grid, .analytics-charts-grid, .store-grid) {
  align-items: stretch;
}

body.ui-desktop .section :is(.glass-card, .stat-card, .stat-card-enhanced, .store-card, .note-card) {
  min-height: 0;
}

body.ui-mobile .section :is(.toolbar, .filters, .quick-add, .dashboard-header-actions, .calendar-controls, .notes-folder-actions, .settings-card-header) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
}

body.ui-mobile .section :is(.toolbar, .filters, .quick-add, .dashboard-header-actions, .calendar-controls, .notes-folder-actions, .settings-card-header) .btn {
  width: 100%;
  justify-content: center;
}

body.ui-mobile #calendar .calendar-card,
body.ui-mobile #calendar .calendar-events-panel,
body.ui-mobile #calendar .calendar-agenda,
body.ui-mobile #notes .notes-panel,
body.ui-mobile #tasks .task-list-panel,
body.ui-mobile #tasks .task-details-panel,
body.ui-mobile #analytics .analytics-chart-card,
body.ui-mobile #settings .settings-card {
  width: 100%;
  min-width: 0;
}

body.ui-mobile #calendar .calendar-grid,
body.ui-mobile #calendar .calendar-week,
body.ui-mobile #calendar .calendar-day-header-row {
  min-width: 0;
}

body.ui-mobile #calendar .calendar-day,
body.ui-mobile #calendar .calendar-day-header {
  min-width: 0;
  padding-inline: 0.25rem;
}

body.ui-mobile #calendar .calendar-event-card,
body.ui-mobile #notifications .notification-card,
body.ui-mobile #tasks .task-item,
body.ui-mobile #notes .note-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

body.ui-mobile #tasks .task-actions,
body.ui-mobile #notes .note-actions,
body.ui-mobile #notifications .notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  width: 100%;
}

body.ui-mobile #tasks .task-actions .btn,
body.ui-mobile #notes .note-actions .btn,
body.ui-mobile #notifications .notification-actions .btn {
  flex: 1 1 120px;
}

body.ui-mobile :is(.modal-overlay, .modal, .modal2, .modal3) {
  align-items: flex-start;
  padding:
    max(0.75rem, env(safe-area-inset-top, 0px))
    max(0.75rem, env(safe-area-inset-right, 0px))
    max(0.75rem, env(safe-area-inset-bottom, 0px))
    max(0.75rem, env(safe-area-inset-left, 0px));
}

body.ui-mobile :is(.modal-content, .modal2 .modal-content, .modal3-content, .notes-modal, .goal-modal, .review-modal, .whats-new-modal) {
  width: min(100%, 680px);
  max-width: 100%;
  max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

body.ui-mobile :is(.modal-body, .modal-content .modal-body, .modal3-content .modal-body, .notes-modal-body) {
  max-height: calc(100dvh - 11rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.ui-mobile :is(.modal-footer, .modal-actions, .form-actions, .settings-actions) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

body.ui-mobile :is(.modal-footer, .modal-actions, .form-actions, .settings-actions) .btn {
  width: 100%;
  justify-content: center;
}

@media (width <= 420px) {
  body.ui-mobile {
    --mobile-shell-pad: 0.72rem;
  }

  body.ui-mobile .section-header {
    padding: 0.78rem;
  }

  body.ui-mobile .glass-card,
  body.ui-mobile .zyui-card,
  body.ui-mobile .stat-card,
  body.ui-mobile .stat-card-enhanced {
    padding: 0.85rem;
  }

  body.ui-mobile .bottom-nav-link {
    min-height: 50px;
  }

  body.ui-mobile .mobile-music-player.active {
    bottom: calc(var(--bottom-nav-height, 58px) + var(--safe-bottom, 0px) + 0.35rem);
  }
}

/* end import: public/css/zy/overrides.css */
/* begin import: public/css/zy/perf.css */
/* Performance + motion safety */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lighter repaint cost on heavy containers */
.glass-card,
.stat-card,
.stat-card-enhanced,
.note-card,
.task-item,
.store-card,
.section .section-header {
  contain: layout paint;
}

/* Avoid layout thrash on media */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Reduce offscreen rendering */
.section:not(.active) {
  content-visibility: auto;
  contain-intrinsic-size: 900px 1200px;
}

/* end import: public/css/zy/perf.css */

/* end import: public/css/zy/system.css */