/**
 * SoftdotStudio Hub – Base Styles
 * Design tokens, app shell, components, responsive layout.
 */

/* ── Design Tokens ──────────────────────────────────────────────── */
:root {
    /* Colors – Dark theme (primary) */
    --bg:        #0d1117;
    --bg-alt:    #161b22;
    --card:      #1c2128;
    --border:    #30363d;
    --text:      #c9d1d9;
    --text-bright: #f0f6fc;
    --muted:     #8b949e;
    --accent:    #00e5ff;
    --accent-hover: #33eaff;
    --success:   #3fb950;
    --warning:   #d29922;
    --danger:    #f85149;

    /* Derived backgrounds */
    --bg-secondary: #151b23;
    --bg-tertiary:  #1c2128;

    /* Accent RGB for rgba() usage */
    --accent-rgb: 0, 229, 255;

    /* Subtle / alpha variants */
    --accent-subtle:  rgba(0, 229, 255, 0.12);
    --success-subtle: rgba(63, 185, 80, 0.12);
    --warning-subtle: rgba(210, 153, 34, 0.12);
    --danger-subtle:  rgba(248, 81, 73, 0.12);

    /* Spacing */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;

    /* Border Radius */
    --r1: 4px;
    --r2: 6px;
    --r3: 8px;
    --r4: 12px;

    /* Shadows */
    --shadow1: 0 1px 3px rgba(0,0,0,0.12);
    --shadow2: 0 4px 12px rgba(0,0,0,0.15);
    --shadow3: 0 8px 24px rgba(0,0,0,0.2);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 120ms;
    --t: 200ms;
    --t-slow: 320ms;

    /* Typography */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-brand: 'Space Mono', monospace;
    --fs1: 0.75rem;
    --fs2: 0.875rem;
    --fs3: 1rem;
    --fs4: 1.25rem;
    --fs5: 1.5rem;
    --fs6: 2rem;
    --fs7: 2.5rem;

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --topbar-height: 56px;
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--t) var(--ease);
}
a:hover {
    color: var(--accent-hover);
}

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

/* ── Utility ────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.p-0 { padding: 0 !important; }

/* ── Language Toggle ───────────────────────────────────────────── */
.lang-toggle {
    position: fixed;
    top: var(--s3);
    right: var(--s3);
    z-index: 1000;
}
.lang-toggle--auth {
    z-index: 1001;
}
.lang-toggle--inline {
    position: static;
}
.lang-toggle__form {
    display: flex;
    gap: 2px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: 2px;
    backdrop-filter: blur(8px);
}
.lang-toggle__btn {
    padding: 0.3rem 0.65rem;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs1);
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all var(--t) var(--ease);
}
.lang-toggle__btn:hover {
    color: var(--text-bright);
    background: rgba(0, 229, 255, 0.1);
}
.lang-toggle__active {
    padding: 0.3rem 0.65rem;
    border-radius: var(--r2);
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: var(--fs1);
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── App Shell ──────────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    transition: grid-template-columns var(--t-slow) var(--ease);
}

.app-shell[data-sidebar-collapsed="true"] {
    grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

.main-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

.main-content {
    flex: 1;
    padding: var(--s5);
    max-width: 1400px;
    width: 100%;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    max-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg-alt);
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: width var(--t-slow) var(--ease);
    z-index: 100;
}

.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    padding: 0 var(--s4);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: var(--text-bright);
    font-weight: 700;
    font-size: var(--fs3);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__logo-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--accent);
}

.sidebar__logo-text {
    font-family: var(--font-brand);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.sidebar__logo-text-primary {
    color: #ffffff;
}

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

.app-shell[data-sidebar-collapsed="true"] .sidebar__logo-text {
    opacity: 0;
    width: 0;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__header {
    padding: 0 var(--s1);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__logo {
    gap: 0;
}

.sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    flex-shrink: 0;
}

.sidebar__toggle:hover {
    color: var(--text-bright);
    background: var(--accent-subtle);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__toggle svg {
    transform: rotate(180deg);
}

.sidebar__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s2) var(--s2);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar__section-label {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--s3) var(--s2) var(--s1);
    white-space: nowrap;
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__section-label {
    opacity: 0;
}

.sidebar__divider {
    height: 1px;
    background: var(--border);
    margin: var(--s2) var(--s2);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-radius: var(--r2);
    color: var(--text);
    font-size: var(--fs2);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--t) var(--ease);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.sidebar__link--active {
    background: var(--accent-subtle);
    color: var(--accent);
}

.sidebar__link--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.sidebar__link-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar__link-label {
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__link-label {
    opacity: 0;
    width: 0;
}

.sidebar__link-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__link-badge {
    display: none;
}

.sidebar__footer {
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--border);
    font-size: var(--fs1);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__footer {
    text-align: center;
    padding: var(--s3) var(--s1);
}

.sidebar__bug-btn {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s2) var(--s2);
    margin-bottom: var(--s2);
    border: 1px solid transparent;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs1);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__bug-btn:hover {
    color: var(--warning);
    border-color: var(--warning);
    background: rgba(237, 137, 54, 0.08);
}

.sidebar__bug-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar__bug-btn-label {
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__bug-btn {
    justify-content: center;
    padding: var(--s2);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__bug-btn-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar__feature-btn {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s2) var(--s2);
    margin-bottom: var(--s2);
    border: 1px solid transparent;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs1);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__feature-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(66, 153, 225, 0.08);
}

.sidebar__feature-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar__feature-btn-label {
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__feature-btn {
    justify-content: center;
    padding: var(--s2);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__feature-btn-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* ── Sidebar CTA Buttons (Push + Install) ── */

.sidebar__cta-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 var(--s2);
    margin: var(--s2) 0;
}

.sidebar__cta-btn {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s2) var(--s3);
    border: 1px dashed var(--accent);
    border-radius: var(--r2);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.06);
    color: var(--accent);
    font-size: var(--fs1);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__cta-btn:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    border-style: solid;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}

.sidebar__cta-btn:active {
    transform: translateY(0);
}

.sidebar__cta-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar__cta-btn-label {
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__cta-btn {
    justify-content: center;
    padding: var(--s2);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__cta-btn-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__cta-group:empty,
.sidebar__cta-group:empty {
    display: none;
}

/* Disabled CTA state (manual install / unsupported) */
.sidebar__cta-btn--disabled {
    opacity: 0.4;
    border-color: var(--c-text-muted, #6e7681);
    background: transparent;
    color: var(--c-text-muted, #6e7681);
    cursor: pointer;
}

.sidebar__cta-btn--disabled:hover {
    opacity: 0.65;
    background: rgba(255, 255, 255, 0.04);
    border-style: dashed;
    transform: none;
    box-shadow: none;
}

.sidebar__cta-btn--disabled:active {
    transform: none;
}

/* Address CTA — orange accent */
.sidebar__cta-btn--address {
    border-color: var(--warning, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    color: var(--warning, #f59e0b);
}
.sidebar__cta-btn--address:hover {
    background: rgba(245, 158, 11, 0.18);
    border-style: solid;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

/* ── Platform Guide Modal ──────────────────────────────────────── */
.platform-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s4);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.platform-guide-overlay--visible {
    opacity: 1;
}

.platform-guide {
    max-width: 380px;
    width: 100%;
    background: var(--c-bg-secondary, #161b22);
    border: 1px solid var(--c-border, #30363d);
    border-radius: var(--r3, 12px);
    padding: var(--s5, 1.5rem);
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s ease;
}

.platform-guide-overlay--visible .platform-guide {
    transform: translateY(0) scale(1);
}

.platform-guide__header {
    display: flex;
    align-items: center;
    gap: var(--s2, 0.5rem);
    margin-bottom: var(--s4, 1rem);
}

.platform-guide__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--accent, #6366f1);
}

.platform-guide__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text, #e6edf3);
}

.platform-guide__body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--c-text-secondary, #b1bac4);
}

.platform-guide__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: guide-step;
}

.platform-guide__steps li {
    counter-increment: guide-step;
    padding: var(--s2, 0.5rem) 0;
    padding-left: 2.2rem;
    position: relative;
    line-height: 1.5;
}

.platform-guide__steps li::before {
    content: counter(guide-step);
    position: absolute;
    left: 0;
    top: calc(var(--s2, 0.5rem) + 1px);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.platform-guide__note {
    margin-top: var(--s3, 0.75rem);
    padding: var(--s3, 0.75rem);
    background: var(--c-bg-tertiary, #1c2128);
    border-radius: var(--r2, 8px);
    font-size: 0.88rem;
    color: var(--c-text-muted, #6e7681);
    line-height: 1.5;
}

.platform-guide__actions {
    margin-top: var(--s4, 1rem);
    display: flex;
    gap: var(--s2, 0.5rem);
}

.platform-guide__btn {
    flex: 1;
    padding: var(--s2, 0.5rem) var(--s3, 0.75rem);
    border: 1px solid var(--c-border, #30363d);
    border-radius: var(--r2, 8px);
    background: var(--c-bg-tertiary, #1c2128);
    color: var(--c-text, #e6edf3);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t, 0.15s) ease;
    text-align: center;
}

.platform-guide__btn:hover {
    background: var(--c-bg-hover, #262c36);
    border-color: var(--c-text-muted, #6e7681);
}

.platform-guide__btn--primary {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
    color: #fff;
}

.platform-guide__btn--primary:hover {
    filter: brightness(1.1);
    border-color: var(--accent, #6366f1);
}

.feature-request__context {
    margin-top: var(--s4);
    padding: var(--s3);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r2);
}

.sidebar__version {
    display: block;
}

.bug-report__hint {
    font-size: var(--fs1);
    color: var(--muted);
    margin-top: var(--s1);
}

.bug-report__context {
    margin-top: var(--s4);
    padding: var(--s3);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r2);
}

.bug-report__context-title {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--s2);
}

.bug-report__context-items {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.bug-report__context-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs1);
    color: var(--text-secondary);
}

.bug-report__context-item svg {
    flex-shrink: 0;
    color: var(--muted);
}

.bug-report__screenshot-preview {
    position: relative;
    margin-top: var(--s2);
    max-width: 280px;
    border-radius: var(--r2);
    overflow: hidden;
    border: 1px solid var(--border);
}

.bug-report__screenshot-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r2);
}

.bug-report__screenshot-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t) var(--ease);
}

.bug-report__screenshot-remove:hover {
    background: rgba(220, 50, 50, 0.8);
}

.bug-report-screenshot__img {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--r2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: opacity var(--t) var(--ease);
}

.bug-report-screenshot__img:hover {
    opacity: 0.85;
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 var(--s5);
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 90;
    gap: var(--s4);
}

.topbar__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all var(--t) var(--ease);
}

.topbar__hamburger:hover {
    background: var(--accent-subtle);
    color: var(--text-bright);
}

.topbar__breadcrumb {
    flex: 1;
    min-width: 0;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-left: auto;
}

.topbar__lang {
    /* Alias for inline lang toggle in topbar */
}

.topbar__lang .lang-toggle {
    position: static;
}

.topbar__user {
    position: relative;
}

.topbar__user-btn {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    font-family: var(--font);
    font-size: var(--fs2);
}

.topbar__user-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.topbar__user-name {
    font-weight: 500;
    white-space: nowrap;
}

.topbar__user-chevron {
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform var(--t) var(--ease);
}

.topbar__dropdown {
    position: absolute;
    top: calc(100% + var(--s2));
    right: 0;
    min-width: 240px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    box-shadow: var(--shadow3);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all var(--t) var(--ease);
    z-index: 200;
    padding: var(--s2);
}

.topbar__dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.topbar__user-btn .topbar__user-chevron {
    transition: transform var(--t) var(--ease);
}

.topbar__dropdown.is-open ~ .topbar__user-btn .topbar__user-chevron,
.topbar__user:has(.is-open) .topbar__user-chevron {
    transform: rotate(180deg);
}

.topbar__dropdown-header {
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s1);
}

.topbar__dropdown-email {
    font-size: var(--fs1);
    color: var(--muted);
    word-break: break-all;
}

.topbar__dropdown-role {
    margin-top: var(--s1);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.topbar__dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: var(--s1) 0;
}

.topbar__dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s2) var(--s3);
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs2);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    text-align: left;
}

.topbar__dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.topbar__dropdown-item--danger {
    color: var(--danger);
}

.topbar__dropdown-item--danger:hover {
    background: var(--danger-subtle);
    color: var(--danger);
}

/* ── Notification Bell ──────────────────────────────────────────── */
.topbar__notifications {
    position: relative;
}

.notif-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    position: relative;
}

.notif-bell:hover {
    background: var(--accent-subtle);
    color: var(--text-bright);
}

.notif-bell__icon {
    width: 20px;
    height: 20px;
}

.notif-bell__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    animation: notifBadgePop 0.3s var(--ease);
}

@keyframes notifBadgePop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Notification dropdown panel */
.notif-panel {
    position: absolute;
    top: calc(100% + var(--s2));
    right: 0;
    width: 380px;
    max-height: 480px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    box-shadow: var(--shadow3);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all var(--t) var(--ease);
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.notif-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.notif-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.notif-panel__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
}

.notif-panel__actions {
    display: flex;
    gap: var(--s2);
}

.notif-panel__btn {
    border: none;
    background: transparent;
    color: var(--accent);
    font-family: var(--font);
    font-size: var(--fs1);
    cursor: pointer;
    padding: var(--s1) var(--s2);
    border-radius: var(--r1);
    transition: all var(--t) var(--ease);
}

.notif-panel__btn:hover {
    background: var(--accent-subtle);
}

.notif-panel__tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.notif-panel__tab {
    flex: 1;
    padding: var(--s2) var(--s3);
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: var(--fs2);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    border-bottom: 2px solid transparent;
}

.notif-panel__tab:hover {
    color: var(--text);
}

.notif-panel__tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.notif-panel__list {
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: contain;
}

.notif-panel__empty {
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--muted);
    font-size: var(--fs2);
}

/* Individual notification item */
.notif-item {
    display: flex;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t) var(--ease);
    text-decoration: none;
    color: inherit;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.notif-item--unread {
    background: var(--accent-subtle);
}

.notif-item--unread:hover {
    background: rgba(0, 229, 255, 0.18);
}

.notif-item__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    color: var(--accent);
}

.notif-item__icon--ticket {
    background: var(--warning-subtle);
    color: var(--warning);
}

.notif-item__icon--chat {
    background: var(--success-subtle);
    color: var(--success);
}

.notif-item__icon--release {
    background: var(--accent-subtle);
    color: var(--accent);
}

.notif-item__icon--invoice {
    background: var(--danger-subtle);
    color: var(--danger);
}

.notif-item__icon svg {
    width: 16px;
    height: 16px;
}

.notif-item__content {
    flex: 1;
    min-width: 0;
}

.notif-item__title {
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--text-bright);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item__body {
    font-size: var(--fs1);
    color: var(--muted);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item__time {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    white-space: nowrap;
}

.notif-item__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 6px;
}

.notif-panel__footer {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--border);
    text-align: center;
    flex-shrink: 0;
}

.notif-panel__footer a {
    font-size: var(--fs2);
    color: var(--accent);
    text-decoration: none;
}

.notif-panel__footer a:hover {
    text-decoration: underline;
}

/* ── Settings Profile Card ────────────────────────────────────── */
.settings-profile-card {
    display: flex;
    align-items: center;
    gap: var(--s4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: var(--s4);
    margin-bottom: var(--s5);
    max-width: 800px;
}

.settings-profile-card__info {
    flex: 1;
    min-width: 0;
}

.settings-profile-card__name {
    font-weight: 600;
    font-size: var(--fs4);
    color: var(--text-primary);
    line-height: 1.3;
}

.settings-profile-card__email {
    font-size: var(--fs2);
    color: var(--muted);
    margin-top: 2px;
}

.settings-profile-card__role {
    margin-top: var(--s1);
}

.settings-profile-card__link {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .settings-profile-card {
        flex-wrap: wrap;
    }

    .settings-profile-card__link {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ── Notification Settings Page ────────────────────────────────── */
.notif-settings {
    max-width: 800px;
}

/* Global channel master toggles */
.notif-settings__global {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: var(--s4);
    margin-bottom: var(--s5);
}

.notif-settings__global-title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s1);
}

.notif-settings__global-desc {
    font-size: var(--fs1);
    color: var(--muted);
    margin-bottom: var(--s4);
}

.notif-settings__global-toggles {
    display: flex;
    gap: var(--s5);
    flex-wrap: wrap;
}

.notif-settings__global-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.notif-settings__global-label {
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--text);
    user-select: none;
}

.notif-settings__push-status {
    font-size: var(--fs0);
    font-weight: 500;
    padding: 0.15em 0.5em;
    border-radius: var(--r1);
    white-space: nowrap;
}
.notif-settings__push-status:empty { display: none; }
.notif-settings__push-status--ok {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}
.notif-settings__push-status--warn {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.notif-settings__table td.channel-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.notif-settings__group {
    margin-bottom: var(--s5);
}

.notif-settings__group-title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s3);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--border);
}

.notif-settings__table {
    width: 100%;
    border-collapse: collapse;
}

.notif-settings__table th {
    text-align: center;
    padding: var(--s2) var(--s3);
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.notif-settings__table th:first-child {
    text-align: left;
}

.notif-settings__table td {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--border);
}

.notif-settings__table td:first-child {
    font-size: var(--fs2);
    color: var(--text);
}

.notif-settings__table td:not(:first-child) {
    text-align: center;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

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

.toggle-switch__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border);
    border-radius: 10px;
    transition: all var(--t) var(--ease);
}

.toggle-switch__slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: var(--text);
    border-radius: 50%;
    transition: all var(--t) var(--ease);
}

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

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

.toggle-switch input:disabled + .toggle-switch__slider {
    opacity: 0.4;
    cursor: not-allowed;
}

.toggle-switch__slider--saved {
    animation: toggle-saved-flash .5s ease;
}
@keyframes toggle-saved-flash {
    0%   { box-shadow: 0 0 0 0 rgba(var(--success-rgb, 46,204,113), .5); }
    50%  { box-shadow: 0 0 0 6px rgba(var(--success-rgb, 46,204,113), 0); }
    100% { box-shadow: none; }
}

.toggle-switch--coming-soon {
    opacity: 0.35;
    pointer-events: none;
}

/* Notification full page */
.notif-page {
    max-width: 800px;
}

.notif-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s4);
}

.notif-page__list {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
}

.notif-page .notif-item {
    padding: var(--s4);
}

/* Responsive */
@media (max-width: 767px) {
    .notif-panel {
        position: fixed;
        top: var(--topbar-height);
        left: 1rem;
        right: 1rem;
        width: auto;
        max-height: 60vh;
    }

    .notif-settings {
        overflow-x: auto;
    }

    .notif-settings__table th,
    .notif-settings__table td {
        padding: var(--s1) var(--s2);
    }

    .notif-settings__table td:first-child {
        font-size: var(--fs1);
    }

    .notif-settings__global-toggles {
        gap: var(--s3);
    }

    .notif-settings__global {
        padding: var(--s3);
    }
}

/* ── Mobile Sidebar Overlay ─────────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t) var(--ease);
}

.sidebar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: var(--s5);
    transition: all var(--t) var(--ease);
}

a.card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card--hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.08);
    border-color: var(--accent);
}

.card--elevated {
    box-shadow: var(--shadow2);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s4);
}

.card__header--wrap {
    flex-wrap: wrap;
    gap: var(--s2);
}

@media (max-width: 640px) {
    .card__header--wrap .card__title {
        width: 100%;
    }
}

.card__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
}

.card__subtitle {
    font-size: var(--fs2);
    color: var(--muted);
    margin-top: var(--s1);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    border: 1px solid transparent;
    border-radius: var(--r2);
    font-family: var(--font);
    font-size: var(--fs2);
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    text-decoration: none;
}

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

.btn--primary {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    border: 1px solid var(--accent);
    font-weight: 600;
}
.btn--primary:hover {
    background: rgba(var(--accent-rgb), 0.22);
    border-color: var(--accent-hover);
    color: var(--accent-hover);
}

.btn--secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
    border-color: var(--muted);
}

.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: transparent;
}
.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.btn--danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn--danger:hover {
    background: #f97583;
    border-color: #f97583;
    color: #fff;
}

.btn--success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn--success:hover {
    background: #56d364;
    border-color: #56d364;
    color: #fff;
}

.btn--sm {
    padding: var(--s1) var(--s3);
    font-size: var(--fs1);
}

.btn--lg {
    padding: var(--s3) var(--s5);
    font-size: var(--fs3);
}

/* ── Form Elements ──────────────────────────────────────────────── */
.form-group {
    margin-bottom: var(--s4);
}

.form-label {
    display: block;
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--text-bright);
    margin-bottom: var(--s1);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--s2) var(--s3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs3);
    transition: all var(--t) var(--ease);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-input::placeholder {
    color: var(--muted);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.form-textarea::placeholder {
    color: var(--muted);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s3) center;
    padding-right: var(--s6);
}

.form-check {
    display: flex;
    align-items: center;
    gap: var(--s2);
    cursor: pointer;
}

.form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: var(--fs1);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

.badge--accent {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--success {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--warning {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--danger {
    background: var(--danger-subtle);
    color: var(--danger);
}

.badge--muted {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

/* ── Page Header ───────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-bottom: var(--s5);
}

.page-header__left {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
}

.page-header__right {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

/* ── Tables ─────────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs2);
}

.table th {
    text-align: left;
    padding: var(--s3) var(--s4);
    background: var(--bg-alt);
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}

.table td {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.table tr:last-child td {
    border-bottom: none;
}

.table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs2);
}

.data-table th {
    text-align: left;
    padding: var(--s3) var(--s4);
    background: var(--bg-alt);
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs1);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* ── Avatar ─────────────────────────────────────────────────────── */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--avatar-bg, var(--accent-subtle));
    color: var(--avatar-color, var(--accent));
    font-weight: 600;
    flex-shrink: 0;
    user-select: none;
}

.avatar--sm {
    width: 28px;
    height: 28px;
    font-size: var(--fs1);
}

.avatar--md {
    width: 36px;
    height: 36px;
    font-size: var(--fs2);
}

.avatar--lg {
    width: 48px;
    height: 48px;
    font-size: var(--fs4);
}

.avatar--xl {
    width: 64px;
    height: 64px;
    font-size: var(--fs5);
}

/* ── Grid ───────────────────────────────────────────────────────── */
.grid {
    display: grid;
    gap: var(--s4);
}

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

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

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

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

/* ── Text Utilities ─────────────────────────────────────────────── */
.text-bright { color: var(--text-bright); }
.text-muted  { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-sm     { font-size: var(--fs2); }
.text-lg     { font-size: var(--fs4); }
.text-xl     { font-size: var(--fs5); }

.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ── Spacing Utilities ──────────────────────────────────────────── */
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mb-1 { margin-bottom: var(--s1); }
.mb-2 { margin-bottom: var(--s2); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }

/* ── Flex Utilities ─────────────────────────────────────────────── */
.flex            { display: flex; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.flex-wrap { flex-wrap: wrap; }

/* ── Display Utilities ──────────────────────────────────────────── */
.hide-mobile  { }
.hide-desktop { display: none; }

/* ── Notifications ──────────────────────────────────────────────── */
.notification {
    padding: var(--s3) var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--r2);
    font-size: var(--fs2);
    color: var(--text);
    opacity: 0;
    transform: translateX(20px);
    transition: all var(--t) var(--ease);
    max-width: 400px;
    box-shadow: var(--shadow2);
}

.notification--visible {
    opacity: 1;
    transform: translateX(0);
}

.notification--success {
    border-left-color: var(--success);
}

.notification--error {
    border-left-color: var(--danger);
}

.notification--info {
    border-left-color: var(--accent);
}

.notification--warning {
    border-left-color: var(--warning);
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.animate-in {
    animation: fadeInUp var(--t-slow) var(--ease) both;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.30s; }

/* ── Flash Messages ───────────────────────────────────────────── */
.flash {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    border-radius: var(--r2);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: var(--s4);
    border-left: 4px solid;
    animation: flashSlideIn 0.4s var(--ease) both;
}

.flash--success {
    background: rgba(52, 211, 153, 0.1);
    color: var(--green, #34d399);
    border-left-color: var(--green, #34d399);
}

.flash--error {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red, #f87171);
    border-left-color: var(--red, #f87171);
}

.flash--warning {
    background: rgba(251, 191, 36, 0.1);
    color: var(--yellow, #fbbf24);
    border-left-color: var(--yellow, #fbbf24);
}

.flash--info {
    background: rgba(96, 165, 250, 0.1);
    color: var(--blue, #60a5fa);
    border-left-color: var(--blue, #60a5fa);
}

@keyframes flashSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* ── Dashboard Specific ─────────────────────────────────────────── */
.dashboard-welcome {
    background: linear-gradient(135deg, var(--card) 0%, rgba(0, 229, 255, 0.06) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    padding: var(--s6);
}

.dashboard-welcome__inner {
    display: flex;
    align-items: center;
    gap: var(--s5);
}

.dashboard-welcome__text h1 {
    font-size: var(--fs5);
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: var(--s1);
}

.dashboard-welcome__text p {
    color: var(--muted);
    font-size: var(--fs2);
}

.dashboard-stat {
    text-align: center;
}

.dashboard-stat__value {
    font-size: var(--fs6);
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.2;
}

.dashboard-stat__label {
    font-size: var(--fs2);
    color: var(--muted);
    margin-top: var(--s1);
}

.dashboard-stat__icon {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--s3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r3);
    color: var(--accent);
    background: var(--accent-subtle);
}

.dashboard-activity {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-activity__empty {
    text-align: center;
    color: var(--muted);
    padding: var(--s6);
}

.dashboard-activity__empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--s3);
    color: var(--muted);
    opacity: 0.5;
}

/* ── Dashboard KPI Row (M14) ───────────────────────────────────── */
.dashboard-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
}

.dashboard-kpi {
    display: flex;
    flex-direction: column;
}

.dashboard-kpi .card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s3);
}

.dashboard-kpi__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

/* Money Goal */
.kpi-money__content {
    display: flex;
    align-items: center;
    gap: var(--s5);
}

.kpi-money__ring {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.kpi-money__ring .progress-ring {
    width: 100%;
    height: 100%;
}

.kpi-money__ring .progress-ring__fill {
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs4);
    font-weight: 700;
    color: var(--text-bright);
}

.kpi-money__details {
    flex: 1;
    min-width: 0;
}

.kpi-money__label {
    font-size: var(--fs1);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--s1);
}

.kpi-money__value {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.kpi-money__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

/* Deadline List */
.deadline-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.deadline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-radius: var(--r2);
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast) var(--ease);
}

.deadline-item:hover {
    background: var(--bg-alt);
}

.deadline-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.deadline-item__title {
    font-size: var(--fs2);
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deadline-item__project {
    font-size: var(--fs1);
}

/* Queue List */
.queue-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-radius: var(--r2);
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast) var(--ease);
}

.queue-item:hover {
    background: var(--bg-alt);
}

.queue-item__info {
    flex: 1;
    min-width: 0;
}

.queue-item__title {
    font-size: var(--fs2);
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.queue-item__meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs1);
    margin-top: 2px;
}

.queue-item__progress {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
    width: 100px;
}

.queue-item__percent {
    font-size: var(--fs1);
    color: var(--muted);
    width: 32px;
    text-align: right;
}

.progress-bar--sm {
    height: 4px;
    flex: 1;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.6s var(--ease);
}

/* Resume Grid */
.resume-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s3);
}

.resume-card {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s4);
    border-radius: var(--r3);
    border: 1px solid var(--border);
    background: var(--bg-alt);
    text-decoration: none;
    color: inherit;
    transition: all var(--t) var(--ease);
}

.resume-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.08);
    border-color: var(--accent);
}

.resume-card__title {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resume-card__meta {
    font-size: var(--fs1);
}

.resume-card__action {
    margin-top: auto;
    align-self: flex-start;
}

/* Widget Grid */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
}

.widget-frame-container {
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
    background: var(--bg-alt);
}

.widget-frame__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.widget-frame__name {
    font-size: var(--fs1);
    color: var(--muted);
    font-weight: 500;
}

.widget-frame {
    width: 100%;
    border: none;
    display: block;
    background: transparent;
}

.widget-feedback {
    display: flex;
    gap: var(--s1);
}

.widget-feedback__btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r2);
    padding: 2px 6px;
    cursor: pointer;
    color: var(--muted);
    transition: all var(--t-fast) var(--ease);
    line-height: 1;
}

.widget-feedback__btn:hover {
    color: var(--text-bright);
    border-color: var(--border);
    background: var(--bg-alt);
}

.widget-feedback__btn.is-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* ── Dynamic Cards (M15) ─────────────────────────────────────── */

.card-slot {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.card-slot--top {
    margin-top: var(--s4);
}

.card-slot--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s3);
    margin-top: var(--s4);
}

.card-slot--sidebar {
    margin-top: var(--s3);
}

.card-slot--inbox-top {
    margin-bottom: var(--s3);
}

.card-slot--project-header {
    margin-bottom: var(--s3);
}

.card-frame-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
    transition: opacity var(--t) var(--ease), border-color var(--t) var(--ease);
}

.card-frame-container:hover {
    border-color: var(--accent-subtle);
}

.card--seen {
    opacity: 0.75;
}

.card--seen:hover {
    opacity: 1;
}

.card-frame__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}

.card-frame__name {
    font-size: var(--fs1);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.card-frame {
    width: 100%;
    border: none;
    min-height: 80px;
    display: block;
    transition: height var(--t) var(--ease);
}

.card-feedback {
    display: flex;
    gap: var(--s1);
}

.card-feedback__btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r2);
    padding: 2px 6px;
    cursor: pointer;
    color: var(--muted);
    transition: all var(--t-fast) var(--ease);
    line-height: 1;
}

.card-feedback__btn:hover {
    color: var(--text-bright);
    border-color: var(--border);
    background: var(--bg-alt);
}

.card-feedback__btn.is-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* Stats Divider */
.dashboard-stat__divider {
    color: var(--muted);
    font-weight: 400;
    margin: 0 2px;
}

.text-xs {
    font-size: var(--fs1);
}

/* Form Row */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s2);
    margin-top: var(--s4);
}

/* Badge Small */
.badge--sm {
    font-size: 0.65rem;
    padding: 1px 6px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-shell[data-sidebar-collapsed="true"] {
        grid-template-columns: 1fr;
    }

    /* Reset collapsed state for mobile drawer — labels must be visible */
    .app-shell[data-sidebar-collapsed="true"] .sidebar__logo-text,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__link-label,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__bug-btn-label,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__feature-btn-label,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__cta-btn-label {
        opacity: 1;
        width: auto;
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__section-label {
        opacity: 1;
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__link-badge {
        display: flex;
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__bug-btn,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__feature-btn,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__cta-btn {
        justify-content: flex-start;
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__footer {
        text-align: left;
        padding: var(--s3) var(--s4);
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__header {
        padding: 0 var(--s4);
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__logo {
        gap: var(--s2);
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform var(--t-slow) var(--ease);
        z-index: 110;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar__footer {
        padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    }

    .sidebar-overlay {
        display: block;
    }

    .topbar__hamburger {
        display: flex;
    }

    .main-content {
        padding: var(--s4);
    }

    /* Shell lock: prevent Android viewport wobble.
       Body = fixed shell at stable height, scroll only inside main-content */
    body.app-shell {
        height: 100vh;
        height: 100svh;
        min-height: 0;
        overflow: hidden;
    }

    .app-shell .main-wrap {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        contain: layout style;
    }

    .app-shell .main-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hide-mobile {
        display: none;
    }

    .hide-desktop {
        display: initial;
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .topbar__user-name {
        display: none;
    }

    .topbar {
        padding: 0 var(--s3);
    }

    .dashboard-welcome {
        padding: var(--s4);
    }

    .dashboard-welcome__inner {
        flex-direction: column;
        text-align: center;
    }

    .dashboard-kpi-row {
        grid-template-columns: 1fr;
    }

    .kpi-money__content {
        flex-direction: column;
        text-align: center;
    }

    .kpi-money__meta {
        justify-content: center;
    }

    .widget-grid {
        grid-template-columns: 1fr;
    }

    .widget-frame-container {
        grid-column: span 1 !important;
    }

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

    .resume-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 220px;
    }

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

    .dashboard-kpi-row {
        grid-template-columns: 1fr;
    }

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

    .card-slot--grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Prevent grid reflow flickering on tablet */
    .app-shell {
        transition: none;
    }

    .sidebar {
        transition: none;
    }

    /* Fix Android bottom bar: lock layout to visible viewport,
       scroll only inside main-content instead of the whole page */
    body.app-shell {
        height: 100vh;
        height: 100svh;
        min-height: 0;
        overflow: hidden;
    }

    .app-shell .main-wrap {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        contain: layout style;
    }

    .main-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   M05 – Clients Module
   ══════════════════════════════════════════════════════════════════════ */

/* ── Clients Toolbar ───────────────────────────────────────────────── */
.clients-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin: var(--s4) 0;
    flex-wrap: wrap;
}

.clients-toolbar__search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}

.clients-toolbar__search-icon {
    position: absolute;
    left: var(--s3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.clients-toolbar__search-input {
    padding-left: var(--s6) !important;
}

.clients-toolbar__filters {
    display: flex;
    gap: 2px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: 2px;
}

.clients-toolbar__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s3);
    border-radius: var(--r2);
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
}

.clients-toolbar__filter:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.05);
}

.clients-toolbar__filter--active {
    color: var(--text-bright);
    background: var(--accent-subtle);
}

/* ── Sort Toggle (shared) ──────────────────────────────────────────── */
.sort-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: 2px;
}

.sort-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s2);
    border-radius: var(--r2);
    font-size: var(--fs1);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    cursor: pointer;
}

.sort-toggle__btn:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.05);
}

.sort-toggle__btn--active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.sort-toggle__btn--active:hover {
    color: var(--accent);
}

.sort-toggle__btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.sort-toggle__btn--active svg {
    opacity: 1;
}

@media (max-width: 640px) {
    .sort-toggle {
        order: 3;
        width: 100%;
    }
}

/* ── Client List ───────────────────────────────────────────────────── */
.client-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.client-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3) var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    text-decoration: none;
    color: var(--text);
    transition: all var(--t) var(--ease);
    cursor: pointer;
}

.client-item:hover {
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.04);
    transform: translateX(4px);
}

.client-item__info {
    flex: 1;
    min-width: 0;
}

.client-item__name {
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-item__email {
    font-size: var(--fs2);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-item__badges {
    display: flex;
    gap: var(--s2);
    flex-shrink: 0;
}

.client-item__chevron {
    color: var(--muted);
    flex-shrink: 0;
    transition: transform var(--t) var(--ease);
}

.client-item:hover .client-item__chevron {
    transform: translateX(2px);
    color: var(--accent);
}

/* ── Client Header ─────────────────────────────────────────────────── */
.client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
}

.client-header__identity {
    display: flex;
    align-items: center;
    gap: var(--s4);
    flex: 1;
    min-width: 0;
}

.client-header__name {
    flex: 1;
    min-width: 0;
}

.client-header__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

/* ── Client Detail Grid ────────────────────────────────────────────── */
.client-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s4);
    align-items: start;
}

.client-detail__main {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.client-detail__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

/* ── Section Cards ─────────────────────────────────────────────────── */
.client-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: var(--s4);
}

.client-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s3);
}

.client-section__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
}

.client-section__action {
    flex-shrink: 0;
}

/* ── Contact Items ─────────────────────────────────────────────────── */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3);
    border-radius: var(--r2);
    transition: background var(--t) var(--ease);
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.contact-item--primary {
    background: var(--accent-subtle);
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--s3) - 3px);
}

.contact-item__info {
    flex: 1;
    min-width: 0;
}

.contact-item__name {
    font-weight: 500;
    color: var(--text-bright);
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.contact-item__detail {
    font-size: var(--fs2);
    color: var(--muted);
}

.contact-item__badge {
    flex-shrink: 0;
}

.contact-item__actions {
    display: flex;
    gap: var(--s1);
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

.contact-item:hover .contact-item__actions {
    opacity: 1;
}

/* ── Invite Items ──────────────────────────────────────────────────── */
.invite-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3);
    border-radius: var(--r2);
    transition: background var(--t) var(--ease);
}

.invite-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.invite-item--pending {
    border-left: 3px solid var(--warning);
    padding-left: calc(var(--s3) - 3px);
}

.invite-item--used {
    opacity: 0.6;
}

.invite-item--expired {
    opacity: 0.4;
}

.invite-item__info {
    flex: 1;
    min-width: 0;
}

.invite-item__email {
    font-weight: 500;
    color: var(--text-bright);
}

.invite-item__meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s1);
}

.invite-item__actions {
    display: flex;
    gap: var(--s2);
    flex-shrink: 0;
}

.invite-link {
    font-family: var(--font-mono);
    font-size: var(--fs1);
    color: var(--muted);
    word-break: break-all;
    padding: var(--s2);
    background: var(--bg);
    border-radius: var(--r2);
    border: 1px solid var(--border);
}

/* ── Account Items ─────────────────────────────────────────────────── */
.account-item {
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
}

.account-item:last-child {
    border-bottom: none;
}

.account-item__name {
    font-weight: 500;
    color: var(--text-bright);
}

.account-item__email {
    font-size: var(--fs2);
    color: var(--muted);
}

/* ── Empty States ──────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--s6) var(--s4);
}

.empty-state--compact {
    padding: var(--s4) var(--s3);
}

.empty-state__icon {
    margin: 0 auto var(--s4);
    color: var(--muted);
    opacity: 0.5;
}

.empty-state__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.empty-state__message {
    font-size: var(--fs2);
    color: var(--muted);
    margin-bottom: var(--s4);
}

.empty-state__action {
    margin-top: var(--s3);
}

/* ── Modal ─────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t) var(--ease);
}

.modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    box-shadow: var(--shadow3);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(8px);
    transition: transform var(--t-slow) var(--ease);
}

.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-overlay.is-open .modal {
    transform: scale(1) translateY(0);
}

.modal--sm {
    max-width: 480px;
}

.modal--lg {
    max-width: 720px;
}

.modal--xxl {
    max-width: 1400px;
    width: 95vw;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .modal--xxl {
        width: 98vw;
        max-width: 98vw;
    }

    .modal__body {
        overflow-y: scroll;
    }
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--border);
}

.modal__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
}

.modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs5);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    line-height: 1;
}

.modal__close:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.modal__body {
    padding: var(--s5);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.modal__body::-webkit-scrollbar { width: 6px; }
.modal__body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.modal__body::-webkit-scrollbar-track { background: transparent; }

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-top: 1px solid var(--border);
}

/* ── Invite Landing ────────────────────────────────────────────────── */
.invite-landing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--s4);
}

.invite-landing__card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    padding: var(--s6);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow3);
}

.invite-landing__logo {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s5);
}

.invite-landing__title {
    font-size: var(--fs4);
    font-weight: 700;
    color: var(--text-bright);
}

/* ── Address Details Toggle ────────────────────────────────────────── */
.client-address-details summary {
    list-style: none;
}

.client-address-details summary::-webkit-details-marker {
    display: none;
}

.client-address-details[open] summary svg {
    transform: rotate(90deg);
}

.client-address-details summary svg {
    transition: transform var(--t) var(--ease);
}

/* ── M05 Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .client-detail {
        grid-template-columns: 1fr;
    }

    .client-header {
        flex-direction: column;
        align-items: stretch;
    }

    .client-header__actions {
        padding-top: var(--s3);
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 767px) {
    .client-item {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .client-item__badges {
        order: 3;
        width: 100%;
        margin-left: calc(36px + var(--s4));
    }

    .clients-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .clients-toolbar__search {
        max-width: none;
    }

    .clients-toolbar__filters {
        justify-content: center;
    }

    .contact-item {
        flex-wrap: wrap;
    }

    .contact-item__actions {
        opacity: 1;
    }

    .invite-item {
        flex-wrap: wrap;
    }

    .invite-item__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .client-section {
        padding: var(--s3);
    }
}

@media (max-width: 480px) {
    .client-item__badges {
        margin-left: 0;
    }

    .client-header__actions {
        flex-direction: column;
    }

    .client-header__actions .btn,
    .client-header__actions form {
        width: 100%;
    }

    .client-header__actions form .btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   M06 – Workspace Projects & Explorer
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Projects Toolbar ─────────────────────────────────────────────────── */
.projects-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-bottom: var(--s4);
    flex-wrap: wrap;
}

.projects-toolbar__search {
    position: relative;
    flex: 0 1 320px;
    min-width: 200px;
}

.projects-toolbar__search-icon {
    position: absolute;
    left: var(--s3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.projects-toolbar__search-input {
    padding-left: 2.25rem;
}

.projects-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--s1);
    flex-wrap: wrap;
}

.projects-toolbar__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s3);
    border-radius: var(--r3);
    font-size: var(--fs2);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    text-decoration: none;
    white-space: nowrap;
}

.projects-toolbar__filter:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.04);
}

.projects-toolbar__filter--active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.projects-toolbar__filter--active:hover {
    color: var(--accent);
}

/* ── Project List ─────────────────────────────────────────────────────── */
.project-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.project-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    transition: background var(--t) var(--ease);
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--r4);
}

.project-item:hover {
    background: var(--bg-alt);
    color: var(--text);
}

.project-item__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r3);
    background: var(--accent-subtle);
    color: var(--accent);
    flex-shrink: 0;
}

.project-item__info {
    flex: 1;
    min-width: 0;
}

.project-item__name {
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item__path {
    font-size: var(--fs1);
    color: var(--muted);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item__badges {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.project-item__tasks {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.project-item__task-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--fs1);
    font-weight: 500;
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--accent);
    white-space: nowrap;
    line-height: 1.4;
}

.project-item__task-count--mine {
    background: var(--warning-subtle, rgba(234, 179, 8, 0.12));
    color: var(--warning, #eab308);
}

.project-item__client {
    font-size: var(--fs2);
    color: var(--muted);
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item__chevron {
    color: var(--muted);
    flex-shrink: 0;
    transition: transform var(--t) var(--ease);
}

.project-item:hover .project-item__chevron {
    transform: translateX(2px);
    color: var(--text-bright);
}

/* ── Project Detail Header ────────────────────────────────────────────── */
.project-detail-header {
    display: flex;
    align-items: center;
    gap: var(--s4);
}

.project-detail-header__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.project-detail-header__info {
    flex: 1;
    min-width: 0;
}

.project-detail-header__title {
    font-size: var(--fs5);
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
}

.project-detail-header__badges {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

.project-detail-header__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

/* ── Project Detail ───────────────────────────────────────────────────── */
.project-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s4);
    align-items: start;
}

.project-detail__main {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.project-detail__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

/* ── Project Tabs ─────────────────────────────────────────────────────── */
.project-tabs {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1);
    background: var(--bg-alt);
    border-radius: var(--r3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.project-tabs::-webkit-scrollbar {
    display: none;
}

.project-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-radius: var(--r2);
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--t) var(--ease);
    cursor: pointer;
    border: none;
    background: none;
}

.project-tab:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.04);
}

.project-tab--active {
    color: var(--text-bright);
    background: var(--card);
    box-shadow: var(--shadow1);
}

.project-tab-content {
    display: none;
}

.project-tab-content--active {
    display: block;
}

/* ── Tab Placeholder (Coming Soon) ────────────────────────────────────── */
.tab-placeholder {
    text-align: center;
    padding: var(--s6) var(--s4);
}

.tab-placeholder__icon {
    margin: 0 auto var(--s4);
    color: var(--muted);
    opacity: 0.4;
}

.tab-placeholder__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.tab-placeholder__message {
    font-size: var(--fs2);
    color: var(--muted);
}

/* ── Group Explorer ───────────────────────────────────────────────────── */
.group-explorer {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.group-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    overflow: hidden;
}

.group-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) var(--s5);
    cursor: pointer;
    user-select: none;
    transition: background var(--t) var(--ease);
}

.group-section__header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.group-section__left {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-width: 0;
}

.group-section__chevron {
    color: var(--muted);
    transition: transform var(--t) var(--ease);
    flex-shrink: 0;
}

.group-section--open .group-section__chevron {
    transform: rotate(90deg);
}

.group-section__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
}

.group-section__path {
    font-size: var(--fs1);
    color: var(--muted);
    font-family: var(--font-mono);
}

.group-section__badge {
    flex-shrink: 0;
}

.group-section__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.group-section__body {
    border-top: 1px solid var(--border);
    display: none;
}

.group-section--open .group-section__body {
    display: block;
}

/* ── Folder Items ─────────────────────────────────────────────────────── */
.folder-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s5);
    transition: background var(--t) var(--ease);
    border-bottom: 1px solid var(--border);
}

.folder-item:last-child {
    border-bottom: none;
}

.folder-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.folder-item--registered {
    border-left: 3px solid var(--success);
}

.folder-item--unregistered {
    border-left: 3px solid transparent;
}

.folder-item__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    flex-shrink: 0;
}

.folder-item--registered .folder-item__icon {
    color: var(--success);
}

.folder-item__info {
    flex: 1;
    min-width: 0;
}

.folder-item__name {
    font-weight: 500;
    color: var(--text-bright);
    font-size: var(--fs2);
}

.folder-item__meta {
    font-size: var(--fs1);
    color: var(--muted);
    font-family: var(--font-mono);
}

.folder-item__badges {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.folder-item__actions {
    display: flex;
    gap: var(--s2);
    flex-shrink: 0;
}

/* ── Status Badges (Project-specific) ─────────────────────────────────── */
.badge--active {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--paused {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--completed {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--archived {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

.badge--registered {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--unregistered {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

.badge--paid {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--unpaid {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--hub {
    background: var(--accent-subtle);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* ── Payment Toggle ───────────────────────────────────────────────────── */
.payment-toggle {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
}

.payment-toggle__switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    cursor: pointer;
    transition: background var(--t) var(--ease);
    border: none;
    padding: 0;
}

.payment-toggle__switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--text);
    border-radius: 50%;
    transition: transform var(--t) var(--ease);
}

.payment-toggle__switch--on {
    background: var(--success);
}

.payment-toggle__switch--on::after {
    transform: translateX(18px);
    background: #fff;
}

.payment-toggle__label {
    font-size: var(--fs2);
    color: var(--text);
}

/* ── Phase Details Card ──────────────────────────────────────────────── */
.phase-details-card {
    margin-bottom: var(--s4);
}

.phase-details-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s3);
    flex-wrap: wrap;
}

.phase-details-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.phase-details-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
}

.phase-details-card__row:last-child {
    border-bottom: none;
}

.phase-details-card__label {
    font-size: var(--fs2);
    color: var(--muted);
    white-space: nowrap;
}

.phase-details-card__actions {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}

.phase-details-card .payment-toggle {
    padding: 0;
}

/* ── Project Notes Auto-save ──────────────────────────────────────────── */
.project-notes-status {
    font-size: var(--fs1);
    color: var(--muted);
    min-height: 1em;
}

/* ── Project Tag Chips ────────────────────────────────────────────────── */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 2px var(--s2);
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--r2);
    font-size: var(--fs1);
    font-weight: 500;
}

/* ── M06 Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .project-detail-header {
        flex-wrap: wrap;
        gap: var(--s3);
    }

    .project-detail-header__icon {
        width: 36px;
        height: 36px;
    }

    .project-detail-header__icon svg {
        width: 18px;
        height: 18px;
    }

    .project-detail-header__info {
        flex: 1;
        min-width: calc(100% - 36px - var(--s3));
    }

    .project-detail-header__title {
        font-size: var(--fs4);
    }

    .project-detail-header__actions {
        width: 100%;
        padding-top: var(--s2);
        border-top: 1px solid var(--border);
    }

    .project-detail {
        grid-template-columns: 1fr;
    }

    .project-item {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .project-item__badges {
        order: 3;
        width: 100%;
        margin-left: calc(36px + var(--s4));
    }

    .project-item__tasks {
        order: 4;
        width: 100%;
        margin-left: calc(36px + var(--s4));
    }

    .project-item__client {
        max-width: none;
    }

    .projects-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .projects-toolbar__search {
        max-width: none;
        flex: 1 1 auto;
    }

    .projects-toolbar__filters {
        justify-content: center;
    }

    .project-tabs {
        margin: 0 calc(-1 * var(--s4));
        padding: var(--s1) var(--s4);
        border-radius: 0;
    }

    .folder-item {
        flex-wrap: wrap;
    }

    .folder-item__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .group-section__header {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .group-section__path {
        width: 100%;
        order: 3;
    }

    .project-tab-content .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .project-item__badges {
        margin-left: 0;
    }

    .folder-item__badges {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   M07 – ClientHub Projects & Wizard
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Wizard ──────────────────────────────────────────────────────────── */
.wizard {
    max-width: 800px;
}

.wizard__progress {
    margin-bottom: var(--s5);
}

.wizard__progress-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--s4);
}

.wizard__progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width var(--t-slow) var(--ease);
}

.wizard__progress-steps {
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
}

.wizard__step-indicator {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s3);
    border-radius: var(--r3);
    font-size: var(--fs2);
    color: var(--muted);
    transition: all var(--t) var(--ease);
    cursor: default;
    white-space: nowrap;
}

.wizard__step-indicator--active {
    color: var(--accent);
    background: var(--accent-subtle);
    font-weight: 600;
}

.wizard__step-indicator--completed {
    color: var(--success);
}

.wizard__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    font-size: var(--fs1);
    font-weight: 600;
    flex-shrink: 0;
    transition: all var(--t) var(--ease);
}

.wizard__step-indicator--active .wizard__step-number {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.wizard__step-indicator--completed .wizard__step-number {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.wizard__step-label {
    font-size: var(--fs2);
}

.wizard__body {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    min-height: 300px;
}

.wizard__panel {
    display: none;
    padding: var(--s5);
}

.wizard__panel--active {
    display: block;
    animation: fadeInUp var(--t-slow) var(--ease) both;
}

.wizard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) var(--s5);
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
    border-radius: 0 0 var(--r4) var(--r4);
}

.wizard__auto-save {
    font-size: var(--fs1);
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.wizard__auto-save--saved {
    color: var(--success);
}

/* ── AI Assistant Panel ──────────────────────────────────────────────── */
.wizard__ai {
    margin: var(--s4) 0;
    padding: 0 var(--s5);
    position: relative;
}

.wizard__ai-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: var(--r4);
    color: var(--accent);
    font-size: var(--fs2);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t) var(--ease);
}

.wizard__ai-toggle:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(139, 92, 246, 0.25));
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

.wizard__ai-toggle.is-active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(139, 92, 246, 0.25));
    border-color: var(--accent);
}

.wizard__ai-toggle-count {
    font-size: var(--fs1);
    background: var(--accent-subtle);
    padding: 1px 6px;
    border-radius: 10px;
    color: var(--accent);
}

.wizard__ai-toggle-count:empty {
    display: none;
}

.wizard__ai-panel {
    display: none;
    margin-top: var(--s3);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
    animation: slideDown var(--t) var(--ease);
}

.wizard__ai-panel.is-open {
    display: flex;
    flex-direction: column;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard__ai-messages {
    flex: 1;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.wizard__ai-msg {
    max-width: 85%;
    padding: var(--s3) var(--s4);
    border-radius: var(--r3);
    font-size: var(--fs2);
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.wizard__ai-msg--assistant {
    align-self: flex-start;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text);
}

.wizard__ai-msg--streaming::after {
    content: '▊';
    display: inline;
    animation: wizardCursorBlink 0.6s step-end infinite;
    color: var(--accent, #58a6ff);
    font-weight: bold;
}

@keyframes wizardCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.wizard__ai-msg--user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.08));
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--text-bright);
}

.wizard__ai-msg--error {
    align-self: center;
    background: var(--danger-subtle);
    border: 1px solid rgba(248, 81, 73, 0.3);
    color: var(--danger);
    font-size: var(--fs1);
    text-align: center;
}

/* Suggestion chips */
.wizard__ai-suggestions {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-top: var(--s3);
}

.wizard__ai-chip {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--r2);
    font-size: var(--fs1);
    line-height: 1.4;
    transition: opacity var(--t) var(--ease), background var(--t) var(--ease);
}

.wizard__ai-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}

.wizard__ai-chip-icon--add { background: var(--success, #3fb950); }
.wizard__ai-chip-icon--remove { background: var(--danger, #f85149); }
.wizard__ai-chip-icon--replace { background: var(--accent); }

.wizard__ai-chip-label {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.wizard__ai-chip-value {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
}

.wizard__ai-chip-old {
    color: var(--danger, #f85149);
    text-decoration: line-through;
}

.wizard__ai-chip-new {
    color: var(--success, #3fb950);
}

.wizard__ai-chip-arrow {
    color: var(--text-muted);
    margin: 0 0.15em;
}

.wizard__ai-chip-accept {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--r2);
    background: transparent;
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.wizard__ai-chip-accept:hover {
    background: var(--accent);
    color: var(--bg);
}

.wizard__ai-chip--accepted {
    opacity: 0.55;
    background: color-mix(in srgb, var(--success, #3fb950) 10%, transparent);
    border-color: color-mix(in srgb, var(--success, #3fb950) 25%, transparent);
    pointer-events: none;
}

.wizard__ai-chip--accepted .wizard__ai-chip-accept {
    background: var(--success, #3fb950);
    border-color: var(--success, #3fb950);
    color: #fff;
}

.wizard__ai-unavailable {
    padding: var(--s4);
    text-align: center;
}

.wizard__ai-input {
    display: flex;
    align-items: flex-end;
    gap: var(--s2);
    padding: var(--s3);
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
}

.wizard__ai-textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    background: var(--bg);
    color: var(--text);
    padding: var(--s2) var(--s3);
    font-family: var(--font);
    font-size: var(--fs2);
    line-height: 1.4;
    max-height: 100px;
    overflow-y: auto;
    transition: border-color var(--t) var(--ease);
}

.wizard__ai-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.wizard__ai-send {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r2);
    background: var(--accent);
    color: var(--bg);
    cursor: pointer;
    transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease);
}

.wizard__ai-send:hover {
    background: var(--accent-hover);
}

.wizard__ai-send:active {
    transform: scale(0.93);
}

.wizard__ai-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wizard__ai-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding: var(--s2) var(--s3);
    margin: var(--s2) var(--s3);
    background: color-mix(in srgb, var(--info, var(--primary)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--info, var(--primary)) 20%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.wizard__ai-disclaimer svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--info, var(--primary));
    opacity: 0.7;
}

.wizard__attach-doc {
    margin-top: var(--s4);
    padding: var(--s3) var(--s4);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius: var(--radius);
}

.wizard__attach-doc-label {
    display: flex;
    align-items: center;
    gap: var(--s3);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
}

.wizard__attach-doc-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Brief document upload (manual briefs) */
.wizard__brief-upload {
    margin-top: var(--s4);
}

.wizard__brief-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    padding: var(--s5) var(--s4);
    border: 2px dashed color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}

.wizard__brief-upload-dropzone:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.wizard__brief-upload-dropzone--active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.wizard__brief-upload-dropzone svg {
    color: var(--muted);
    opacity: 0.6;
}

.wizard__brief-upload-dropzone span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.wizard__brief-upload-dropzone small {
    font-size: 0.75rem;
    color: var(--muted);
}

.wizard__brief-upload-file {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius: var(--radius);
}

.wizard__brief-upload-file-icon {
    flex-shrink: 0;
    color: var(--primary);
    opacity: 0.7;
}

.wizard__brief-upload-file-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard__brief-upload-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 1.125rem;
    cursor: pointer;
    border-radius: var(--r1);
    transition: color 0.15s, background 0.15s;
}

.wizard__brief-upload-remove:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Typing dots animation */
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--s3) var(--s4);
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    animation: typingBounce 1.2s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Chat AI reply button */
.chat-input__ai-reply {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s2) var(--s3);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--r2);
    color: var(--accent);
    font-size: var(--fs1);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
}

.chat-input__ai-reply:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(139, 92, 246, 0.22));
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.12);
}

.chat-input__ai-reply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-input__ai-reply.is-loading span {
    display: none;
}

.chat-input__ai-reply.is-loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* AI draft fill feedback */
.chat-input--ai-filled {
    animation: aiFillPulse 0.6s ease;
}
@keyframes aiFillPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 99, 102, 241), 0.4); }
    50%  { box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 99, 102, 241), 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 99, 102, 241), 0); }
}

/* ── Tag Input ───────────────────────────────────────────────────────── */
.tag-input {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: var(--s2);
    padding-right: calc(var(--s2) + 36px);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
    cursor: text;
}

.tag-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.tag-input__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    list-style: none;
}

.tag-input__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 2px var(--s2);
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--r2);
    font-size: var(--fs1);
    font-weight: 500;
    animation: fadeInUp var(--t-fast) var(--ease) both;
}

.tag-input__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: all var(--t) var(--ease);
}

.tag-input__chip-remove:hover {
    background: var(--danger-subtle);
    color: var(--danger);
}

.tag-input__field {
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs2);
    outline: none;
    min-width: 80px;
    flex: 1;
    padding: var(--s1);
}

.tag-input__field::placeholder {
    color: var(--muted);
    font-size: var(--fs1);
}

.tag-input__add-btn {
    position: absolute;
    right: var(--s2);
    top: var(--s2);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    background: var(--bg-secondary);
    color: var(--accent);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t) var(--ease);
    line-height: 1;
}

.tag-input__add-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ── ClientHub Project List ──────────────────────────────────────────── */
.clienthub-projects {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}

.clienthub-projects__section-title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s3);
}

.clienthub-project-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    text-decoration: none;
    color: var(--text);
    transition: all var(--t) var(--ease);
    position: relative;
    cursor: pointer;
}

.clienthub-project-item:hover {
    border-color: var(--accent);
    transform: translateX(4px);
}

.clienthub-project-item__status-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: var(--r3) 0 0 var(--r3);
}

.clienthub-project-item__status-bar--draft       { background: var(--muted); }
.clienthub-project-item__status-bar--submitted    { background: var(--accent); }
.clienthub-project-item__status-bar--triage       { background: var(--warning); }
.clienthub-project-item__status-bar--accepted     { background: var(--success); }
.clienthub-project-item__status-bar--rejected     { background: var(--danger); }
.clienthub-project-item__status-bar--in_progress  { background: var(--accent); }
.clienthub-project-item__status-bar--waiting      { background: var(--warning); }
.clienthub-project-item__status-bar--done         { background: var(--success); }
.clienthub-project-item__status-bar--archived     { background: var(--muted); }

.clienthub-project-item__info {
    flex: 1;
    min-width: 0;
    padding-left: var(--s2);
}

.clienthub-project-item__title {
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clienthub-project-item__meta {
    font-size: var(--fs2);
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-top: var(--s1);
}

.clienthub-project-item__progress {
    width: 80px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.clienthub-project-item__progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width var(--t-slow) var(--ease);
}

.clienthub-project-item__actions {
    display: flex;
    gap: var(--s2);
    flex-shrink: 0;
}

/* ── Active Project View ─────────────────────────────────────────────── */
.project-status-card {
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding: var(--s5);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
}

.progress-ring {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.progress-ring__svg {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
}

.progress-ring__circle-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 6;
}

.progress-ring__circle {
    fill: none;
    stroke: var(--accent);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--t-slow) var(--ease);
}

.progress-ring__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs4);
    font-weight: 700;
    color: var(--text-bright);
}

.project-update-card {
    padding: var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.project-update-card__label {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--s2);
}

.project-update-card__text {
    color: var(--text);
    font-size: var(--fs2);
    line-height: 1.6;
}

/* ── Brief Rendered Sections ─────────────────────────────────────────── */
.brief-rendered {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.brief-section {
    padding: var(--s3);
    background: var(--bg-alt);
    border-radius: var(--r3);
}

.brief-section__heading {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.brief-section__content {
    font-size: var(--fs2);
    color: var(--text);
    line-height: 1.6;
}

.brief-section__row {
    padding: var(--s1) 0;
    font-size: var(--fs2);
}

.brief-section__label {
    color: var(--muted);
    font-weight: 500;
}

.brief-section__value {
    color: var(--text);
}

/* ── Brief Document Card ─────────────────────────────────────────────── */
.brief-document {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s;
}
.brief-document:hover { border-color: var(--primary); }
.brief-document__icon { flex-shrink: 0; color: var(--muted); }
.brief-document__info { flex: 1; min-width: 0; }
.brief-document__name {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brief-document__size { font-size: 0.75rem; color: var(--muted); }
.brief-document__download { flex-shrink: 0; white-space: nowrap; }
.brief-document__attach-badge { margin-top: var(--s2); }

/* ── Triage Inbox ────────────────────────────────────────────────────── */
.triage-inbox {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.triage-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    text-decoration: none;
    color: var(--text);
    transition: all var(--t) var(--ease);
    cursor: pointer;
}

.triage-item:hover {
    border-color: var(--accent);
    transform: translateX(4px);
}

.triage-item__info {
    flex: 1;
    min-width: 0;
}

.triage-item__title {
    font-weight: 600;
    color: var(--text-bright);
}

.triage-item__client {
    font-size: var(--fs2);
    color: var(--muted);
}

.triage-item__date {
    font-size: var(--fs1);
    color: var(--muted);
}

.triage-item__badge {
    flex-shrink: 0;
}

/* ── Triage Detail ───────────────────────────────────────────────────── */
.triage-page {
    overflow: clip;
}

.triage-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s4);
    align-items: start;
    min-width: 0;
}

.triage-detail__brief {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    min-width: 0;
    overflow: hidden;
}

.triage-detail__actions {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.triage-detail__client-card {
    padding: var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.triage-detail__client-card h4 {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.triage-detail__client-info {
    font-size: var(--fs2);
    color: var(--muted);
    line-height: 1.6;
}

/* ── Status Badges (M07 extensions) ──────────────────────────────────── */
.badge--draft {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

.badge--submitted {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--triage {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--accepted {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--rejected {
    background: var(--danger-subtle);
    color: var(--danger);
}

.badge--in_progress {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--waiting {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--done {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--inquiry {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

/* ── Triage Brief Edit & Diff ────────────────────────────────────────── */
.triage-edit-form {
    padding: var(--s4);
}

.triage-edit-form .form-group {
    margin-bottom: var(--s3);
}

.triage-tabs {
    display: flex;
    gap: var(--s1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s4);
}

.triage-tab {
    padding: var(--s2) var(--s4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: var(--fs2);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.triage-tab:hover {
    color: var(--text-bright);
}

.triage-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.triage-tab-content {
    display: none;
}

.triage-tab-content--active {
    display: block;
}

/* Triage Tab Indicator */
.triage-tab__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.triage-tab__indicator--running {
    background: var(--warning);
    animation: pulse 1.5s infinite;
}

.triage-tab__indicator--ready {
    background: var(--success);
}

.triage-tab__indicator--failed {
    background: var(--danger);
}

/* Triage Kalkulation Tab */
.triage-kalkulation__summary {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: var(--s3);
}

.triage-kalkulation__total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.triage-kalkulation__list {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.triage-kalkulation__milestone {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.triage-kalkulation__milestone-header {
    padding: var(--s3);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.triage-kalkulation__milestone-header strong {
    font-weight: 600;
    color: var(--bright);
}

.triage-kalkulation__milestone-time {
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.triage-kalkulation__milestone-desc {
    padding: var(--s2) var(--s3);
    color: var(--muted);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
}

.triage-kalkulation__tasks {
    display: flex;
    flex-direction: column;
}

.triage-kalkulation__task {
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border-light, var(--border));
    transition: background-color 0.15s ease;
}

.triage-kalkulation__task:last-child {
    border-bottom: none;
}

.triage-kalkulation__task:hover {
    background: var(--surface);
}

.triage-kalkulation__task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s2);
}

.triage-kalkulation__task-title {
    font-weight: 500;
    color: var(--text);
}

.triage-kalkulation__task-time {
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 0.15s ease;
}

.triage-kalkulation__task-time:hover {
    background: var(--surface);
}

.triage-kalkulation__task-desc {
    margin-top: var(--s1);
    color: var(--muted);
    font-size: 0.85rem;
}

/* Kalkulation Empty/Error States */
.triage-kalkulation__empty {
    text-align: center;
    padding: var(--s6);
    color: var(--muted);
}

.triage-kalkulation__empty svg {
    margin-bottom: var(--s3);
    opacity: 0.3;
}

.triage-kalkulation__error {
    padding: var(--s3);
    background: var(--danger-bg, rgba(239,68,68,0.1));
    border-radius: var(--radius);
    color: var(--danger);
}

/* Brief Diff */
.brief-diff {
    padding: var(--s3);
}

.brief-diff__field {
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
}

.brief-diff__field:last-child {
    border-bottom: none;
}

.brief-diff__label {
    display: block;
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    margin-bottom: var(--s1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.brief-diff__value {
    color: var(--text);
    font-size: var(--fs2);
}

.brief-diff__old {
    color: var(--danger);
    text-decoration: line-through;
    opacity: 0.8;
    font-size: var(--fs2);
}

.brief-diff__new {
    color: var(--success);
    font-size: var(--fs2);
}

.brief-diff--changed .brief-diff__old {
    display: block;
    margin-bottom: var(--s1);
}

.brief-diff--changed .brief-diff__new {
    display: block;
}

.brief-diff--added {
    border-left: 3px solid var(--success);
    padding-left: var(--s3);
}

.brief-diff--removed {
    border-left: 3px solid var(--danger);
    padding-left: var(--s3);
}

.brief-diff .tag-chip.brief-diff__old {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    text-decoration: line-through;
}

.brief-diff .tag-chip.brief-diff__new {
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
    text-decoration: none;
}

/* Inquiry / Info Banners */
.inquiry-banner {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid #a855f7;
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
}

.inquiry-banner__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: #a855f7;
    margin-bottom: var(--s2);
}

.inquiry-note {
    background: rgba(168, 85, 247, 0.06);
    border-radius: var(--r2);
    padding: var(--s3);
    margin-bottom: var(--s3);
    color: var(--text);
    font-style: italic;
}

.inquiry-banner__actions {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s3);
    flex-wrap: wrap;
}

.info-changes-banner {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--success);
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
}

.info-changes-banner__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--success);
    margin-bottom: var(--s2);
}

.changes-toggle {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: var(--fs2);
    padding: var(--s1) 0;
    text-decoration: underline;
}

.changes-toggle:hover {
    opacity: 0.8;
}

.changes-detail {
    display: none;
    margin-top: var(--s3);
}

.changes-detail.is-open {
    display: block;
}

.triage-inquiry-info {
    padding: var(--s3);
    background: rgba(168, 85, 247, 0.06);
    border-radius: var(--r2);
    margin-bottom: var(--s3);
    color: #a855f7;
    font-size: var(--fs2);
    text-align: center;
}

.triage-proposed-info {
    padding: var(--s3);
    background: rgba(234, 179, 8, 0.08);
    border-radius: var(--r2);
    color: #eab308;
    font-size: var(--fs2);
    text-align: center;
}

.triage-client-updated-info {
    padding: var(--s3);
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--r2);
    color: #3b82f6;
    font-size: var(--fs2);
    text-align: center;
}

/* ── M07 Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .triage-detail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .wizard__progress-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--s2);
    }

    .wizard__progress-steps::-webkit-scrollbar {
        display: none;
    }

    .wizard__step-label {
        display: none;
    }

    .wizard__step-indicator--active .wizard__step-label {
        display: inline;
    }

    .wizard__footer {
        flex-wrap: wrap;
        gap: var(--s3);
    }

    .triage-item {
        flex-wrap: wrap;
        gap: var(--s2);
        padding: var(--s3);
    }

    .triage-item:hover {
        transform: none;
    }

    .triage-item__info {
        flex: 1 1 100%;
        order: 1;
    }

    .triage-item__title {
        word-break: break-word;
    }

    .triage-item__date {
        order: 2;
        flex: 1 1 auto;
    }

    .triage-item__badge {
        order: 3;
        display: flex;
        flex-wrap: wrap;
        gap: var(--s1);
        justify-content: flex-end;
    }

    .clienthub-project-item {
        flex-wrap: wrap;
    }

    .clienthub-project-item__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .project-status-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   M08 – Tasks, Milestones & Scope-Baseline
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tasks Header ──────────────────────────────────────────────────── */
.tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s4);
    flex-wrap: wrap;
}
.tasks-header__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .tasks-header > h2 {
        width: 100%;
    }
}

/* ── Scope Baseline Bar ──────────────────────────────────────────────── */
.scope-bar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.scope-bar__info {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.scope-bar__label {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
}

.scope-bar__stats {
    font-size: var(--fs1);
    color: var(--muted);
}

.scope-bar__progress {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
}

.scope-bar__progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width var(--t-slow) var(--ease);
}

.scope-bar__percent {
    font-size: var(--fs2);
    font-weight: 700;
    color: var(--accent);
    min-width: 3ch;
    text-align: right;
}

.scope-bar__actions {
    display: flex;
    gap: var(--s1);
    flex-shrink: 0;
}

.scope-bar__time-summary {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--text-sm);
    color: var(--muted);
    padding: var(--s1) 0;
    flex-wrap: wrap;
}

.scope-bar__time-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.scope-bar__time-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.scope-bar__time-separator {
    color: var(--border);
}

.scope-bar__time-item--over {
    color: var(--danger, #ef4444);
    font-weight: 600;
}

.scope-bar__time-item--over .scope-bar__time-label {
    color: var(--danger, #ef4444);
}

/* ── Change Request Badge ────────────────────────────────────────────── */
.change-request-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--r2);
    background: var(--warning-subtle);
    color: var(--warning);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ── Task Filters ────────────────────────────────────────────────────── */
.task-filter {
    padding: var(--s1) var(--s3);
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: var(--fs2);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.task-filter:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.04);
}

.task-filter--active {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* ── Milestone Sections (Accordion) ──────────────────────────────────── */
.tasks-container {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.milestone-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
}

.milestone-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) var(--s4);
    cursor: pointer;
    user-select: none;
    transition: background var(--t) var(--ease);
}

.milestone-section__header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.milestone-section__left {
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-width: 0;
}

.milestone-section__right {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-shrink: 0;
}

.milestone-section__chevron {
    color: var(--muted);
    transition: transform var(--t) var(--ease);
    flex-shrink: 0;
}

.milestone-section--open .milestone-section__chevron {
    transform: rotate(90deg);
}

.milestone-section__title {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.milestone-section__deadline {
    font-size: var(--fs1);
    color: var(--muted);
    white-space: nowrap;
}

.milestone-section__time-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
}

.milestone-section__actions {
    display: flex;
    gap: var(--s1);
}

.milestone-section__body {
    border-top: 1px solid var(--border);
    display: none;
}

.milestone-section--open .milestone-section__body {
    display: block;
}

/* ── Task Cards ──────────────────────────────────────────────────────── */
.task-card {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    transition: background var(--t) var(--ease);
    border-bottom: 1px solid var(--border);
}

.task-card:last-child {
    border-bottom: none;
}

.task-card:hover {
    background: rgba(255, 255, 255, 0.02);
}

.task-card--in-progress {
    border-left: 3px solid var(--clr-warning, #f59e0b);
}

.task-card--in-progress .task-card__checkbox {
    border-color: var(--clr-warning, #f59e0b);
}

.task-card--in-progress .task-card__checkbox::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-warning, #f59e0b);
    animation: task-pulse 1.8s ease-in-out infinite;
}

@keyframes task-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1); }
}

.task-card--done {
    opacity: 0.6;
}

.task-card--empty {
    padding: var(--s3) var(--s4);
    justify-content: center;
}

.task-card__checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
    padding: 0;
    color: #fff;
}

.task-card__checkbox:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.task-card__checkbox--checked {
    background: var(--success);
    border-color: var(--success);
}

.task-card__checkbox--checked:hover {
    background: var(--success);
    border-color: var(--success);
    opacity: 0.8;
}

.task-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-card__title {
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-card--done .task-card__title {
    text-decoration: line-through;
    color: var(--muted);
}

.task-card__meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.task-card__priority {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: var(--r1);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.task-card__priority--low {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

.task-card__priority--medium {
    background: var(--accent-subtle);
    color: var(--accent);
}

.task-card__priority--high {
    background: var(--warning-subtle);
    color: var(--warning);
}

.task-card__priority--critical {
    background: var(--danger-subtle);
    color: var(--danger);
}

.task-card__assignee {
    flex-shrink: 0;
}

.task-card__actions {
    display: flex;
    gap: var(--s1);
    flex-shrink: 0;
}

/* ── Task Timer ──────────────────────────────────────────────────────── */
.task-card__timer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--t) var(--ease), background var(--t) var(--ease);
    flex-shrink: 0;
}

.task-card__timer-btn:hover {
    color: var(--primary);
    background: var(--bg-hover);
}

.task-card__timer-btn--running {
    color: var(--warning, #f59e0b);
    animation: timer-pulse 2s ease-in-out infinite;
}

.task-card__timer-btn--running:hover {
    color: var(--danger, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.task-card__tracked-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    color: var(--muted);
}

.task-card__tracked-time svg {
    flex-shrink: 0;
}

.task-card__tracked-time--running {
    color: var(--warning, #f59e0b);
    font-weight: 600;
}

/* ── Drag & Drop (Tasks + Milestones) ────────────────────────────────── */
.task-card__drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--muted);
    opacity: 0;
    cursor: grab;
    flex-shrink: 0;
    transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
    touch-action: none;
}

.task-card:hover .task-card__drag-handle {
    opacity: 0.5;
}

.task-card__drag-handle:hover {
    opacity: 1 !important;
    color: var(--accent);
}

.task-card__drag-handle:active {
    cursor: grabbing;
}

.milestone-section__drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--muted);
    opacity: 0;
    cursor: grab;
    flex-shrink: 0;
    transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
    touch-action: none;
}

.milestone-section__header:hover .milestone-section__drag-handle {
    opacity: 0.5;
}

.milestone-section__drag-handle:hover {
    opacity: 1 !important;
    color: var(--accent);
}

.milestone-section__drag-handle:active {
    cursor: grabbing;
}

/* Ghost = placeholder left behind */
.task-card.sortable-ghost {
    background: var(--accent-subtle);
    border: 1px dashed var(--accent);
    border-radius: var(--r2);
    opacity: 0.4;
}

.task-card.sortable-ghost * {
    visibility: hidden;
}

/* Chosen = the dragged element */
.task-card.sortable-chosen {
    background: var(--card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-radius: var(--r2);
    z-index: 100;
}

/* Fallback = cloned element during drag (forceFallback) */
.task-card.sortable-fallback {
    background: var(--card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-radius: var(--r2);
    transform: rotate(1.5deg);
    opacity: 0.95;
}

/* Dim non-dragged cards during drag */
.tasks-container--dragging .task-card:not(.sortable-chosen):not(.sortable-ghost) {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

/* Milestone ghost */
.milestone-section.sortable-ghost {
    background: var(--accent-subtle);
    border: 2px dashed var(--accent);
    opacity: 0.4;
}

.milestone-section.sortable-ghost * {
    visibility: hidden;
}

/* Milestone chosen */
.milestone-section.sortable-chosen {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

/* Milestone fallback */
.milestone-section.sortable-fallback {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transform: rotate(0.5deg);
    opacity: 0.95;
}

/* Empty milestone body min-height as drop zone */
.milestone-section__body {
    min-height: 40px;
}

/* Hide empty-state placeholder when dragging into it */
.milestone-section__body .task-card--empty {
    transition: opacity 0.15s ease;
}

.milestone-section__body.sortable-over .task-card--empty {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

/* Hide drag handles when filter is active */
.tasks-container--filtered .task-card__drag-handle,
.tasks-container--filtered .milestone-section__drag-handle {
    display: none;
}

/* ── M08 Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .scope-bar {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .scope-bar__progress {
        order: 3;
        flex: 0 0 100%;
    }

    .milestone-section__header {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .milestone-section__left {
        flex: 1 1 100%;
    }

    .milestone-section__right {
        flex-shrink: 1;
        flex-wrap: wrap;
        margin-left: auto;
    }

    .task-card__meta {
        flex-wrap: wrap;
    }

    .task-card__drag-handle,
    .milestone-section__drag-handle {
        opacity: 0.5;
    }
}

/* ── M08 Tablet Responsive ──────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .scope-bar {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .scope-bar__progress {
        order: 3;
        flex: 0 0 100%;
    }

    .scope-bar__actions {
        margin-left: auto;
    }

    .milestone-section__header {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .milestone-section__right {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .task-card__meta {
        flex-wrap: wrap;
    }

    .tasks-container {
        contain: layout;
    }

    /* Disable infinite animations that cause reflow cascades on tablet */
    .task-card__timer-btn--running {
        animation: none;
        opacity: 1;
    }

    .task-card--in-progress .task-card__checkbox::after {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }

    /* Isolate each task card to prevent cross-card reflows */
    .task-card {
        contain: layout style;
    }
}

/* ── Task Preview Modal ─────────────────────────────────────────────── */

.task-card__content[data-task-preview] {
    cursor: pointer;
    border-radius: var(--radius);
    transition: background-color 0.15s ease;
}

.task-card__content[data-task-preview]:hover {
    background-color: rgba(var(--clr-accent-rgb, 99, 102, 241), 0.06);
}

.task-card--done .task-card__content[data-task-preview]:hover {
    background-color: rgba(var(--clr-success-rgb, 34, 197, 94), 0.06);
}

.task-preview__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s4);
}

.task-preview__section {
    margin-bottom: var(--s4);
}

.task-preview__section:last-child {
    margin-bottom: 0;
}

.task-preview__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--s1);
}

.task-preview__text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--text-sm);
    color: var(--clr-text);
    line-height: 1.6;
}

.task-preview__text--empty {
    font-style: italic;
    color: var(--clr-text-muted);
    opacity: 0.7;
}

.task-preview__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s3);
}

.task-preview__meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.task-preview__meta-value {
    font-size: var(--text-sm);
    color: var(--clr-text);
    font-weight: 500;
}

.task-preview__meta-value--empty {
    color: var(--clr-text-muted);
    font-style: italic;
    font-weight: 400;
}

.task-preview__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

.task-preview__actions-left {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.task-preview__actions-right {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-left: auto;
}

.btn--status-progress,
.btn--status-done {
    position: relative;
    transition: all 0.2s ease;
}

.btn--status-progress.is-active {
    background-color: var(--clr-warning, #f59e0b);
    color: #fff;
    border-color: var(--clr-warning, #f59e0b);
    pointer-events: none;
}

.btn--status-done.is-active {
    background-color: var(--clr-success, #22c55e);
    color: #fff;
    border-color: var(--clr-success, #22c55e);
    pointer-events: none;
}

.btn--timer {
    transition: all 0.2s ease;
}

.btn--timer-running {
    background-color: var(--warning, #f59e0b);
    color: #fff;
    border-color: var(--warning, #f59e0b);
}

.btn--timer-running:hover {
    background-color: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
}

.btn--copy-task {
    transition: all 0.2s ease;
}

.btn--copy-task.is-copied {
    background-color: var(--clr-success, #22c55e);
    color: #fff;
    border-color: var(--clr-success, #22c55e);
}

@media (max-width: 640px) {
    .task-preview__meta {
        grid-template-columns: 1fr;
        gap: var(--s2);
    }

    .task-preview__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .task-preview__actions-left,
    .task-preview__actions-right {
        margin-left: 0;
        justify-content: stretch;
    }

    .task-preview__actions-left .btn,
    .task-preview__actions-right .btn {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   M09 – Tickets
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ticket Toolbar ──────────────────────────────────────────────────── */
.ticket-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s3);
    flex-wrap: wrap;
}

/* ── Ticket Filters ──────────────────────────────────────────────────── */
.ticket-filters {
    display: flex;
    gap: var(--s1);
    flex-wrap: wrap;
}

.ticket-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 0.375rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ticket-filter:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.ticket-filter--active {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: var(--accent);
    color: var(--accent);
}

.ticket-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ── Filter Bar (global page) ────────────────────────────────────────── */
.ticket-filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.ticket-filters-secondary {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}

.ticket-filters-secondary .form-select,
.ticket-filters-secondary .form-input {
    min-width: 140px;
}

/* ── Ticket Cards ────────────────────────────────────────────────────── */
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.ticket-card {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
    cursor: pointer;
}

.ticket-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ticket-card__type {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
}

.ticket-card__type--bug {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ticket-card__type--feature {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.ticket-card__type--question {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.ticket-card__content {
    flex: 1;
    min-width: 0;
}

.ticket-card__title {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-card__meta {
    display: flex;
    gap: var(--s2);
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

.ticket-card__badges {
    display: flex;
    gap: var(--s1);
    align-items: center;
    flex-shrink: 0;
}

.ticket-card__checkbox {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ticket-card__checkbox:hover {
    border-color: var(--accent);
}

.ticket-card__checkbox--checked {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-primary);
}

/* ── Ticket Priority Badges ──────────────────────────────────────────── */
.ticket-card__priority {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ticket-card__priority--low {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.ticket-card__priority--medium {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.ticket-card__priority--high {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.ticket-card__priority--urgent {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ── Ticket Status Badges ────────────────────────────────────────────── */
.badge--open {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.badge--in_progress {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.badge--resolved {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.badge--closed {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* ── Ticket Detail Modal ─────────────────────────────────────────────── */
.modal--xl {
    max-width: 960px;
    width: 95vw;
}

.ticket-detail {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--s4);
}

.ticket-detail__main {
    min-width: 0;
}

.ticket-detail__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    border-left: 1px solid var(--border);
    padding-left: var(--s4);
}

.ticket-detail__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: var(--s2);
    border-top: 1px solid var(--border);
}

.ticket-detail__actions {
    padding-top: var(--s2);
    border-top: 1px solid var(--border);
}

/* ── Comment Thread ──────────────────────────────────────────────────── */
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.comment-item {
    padding: var(--s2) var(--s3);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
}

.comment-item--internal {
    border-left: 3px solid var(--accent);
    background: rgba(var(--accent-rgb, 99,102,241), 0.05);
}

.comment-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s1);
}

.comment-item__author {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.comment-item__badge {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    background: var(--accent);
    color: var(--bg-primary);
    border-radius: 4px;
    margin-left: var(--s1);
}

.comment-item__time {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.comment-item__body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.comment-item__delete {
    position: absolute;
    top: var(--s1);
    right: var(--s1);
    opacity: 0;
    transition: opacity 0.15s ease;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
}

.comment-item:hover .comment-item__delete {
    opacity: 1;
}

.comment-item__delete:hover {
    color: #ef4444;
}

.comment-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s1);
}

/* ── File Drop Zone ──────────────────────────────────────────────────── */
.file-drop-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: var(--s3);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-drop-zone:hover,
.file-drop-zone.is-dragover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 99,102,241), 0.05);
}

.file-drop-zone__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-zone__label {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* ── File Preview ────────────────────────────────────────────────────── */
.file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin-top: var(--s1);
}

.file-preview__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.file-preview__item-remove {
    cursor: pointer;
    color: var(--text-muted);
    border: none;
    background: none;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1;
}

.file-preview__item-remove:hover {
    color: #ef4444;
}

/* ── Attachment List ─────────────────────────────────────────────────── */
.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}

.attachment-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    color: var(--accent);
}

.attachment-item__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.attachment-item__size {
    color: var(--text-muted);
    font-size: 0.6875rem;
}

/* ── Bulk Action Bar ─────────────────────────────────────────────────── */
.bulk-bar {
    display: none;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--bg-secondary);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    margin-top: var(--s2);
}

.bulk-bar.is-active {
    display: flex;
}

.bulk-bar__count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

.bulk-bar__actions {
    display: flex;
    gap: var(--s1);
    flex-wrap: wrap;
}

/* ── ClientHub Ticket Detail ─────────────────────────────────────────── */
.ch-ticket-detail__status {
    margin-bottom: var(--s2);
}

.ch-ticket-detail__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    padding: var(--s2);
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

/* ── M09 Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ticket-detail {
        grid-template-columns: 1fr;
    }

    .ticket-detail__sidebar {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: var(--s3);
    }

    .ticket-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ticket-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ticket-filter-bar {
        gap: var(--s1);
    }

    .ticket-filters-secondary {
        flex-direction: column;
    }

    .ticket-filters-secondary .form-select,
    .ticket-filters-secondary .form-input {
        min-width: 100%;
    }

    .ticket-card {
        flex-wrap: wrap;
    }

    .ticket-card__badges {
        flex-basis: 100%;
        margin-top: var(--s1);
    }

    .comment-item__delete {
        opacity: 1;
    }

    .bulk-bar {
        flex-wrap: wrap;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   M10 – Chat
   ══════════════════════════════════════════════════════════════════════ */

.chat-container {
    display: flex;
    flex-direction: column;
    height: 600px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-primary);
    overflow: hidden;
}

/* Chat Banners */
.chat-banner {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    font-size: 0.82rem;
    line-height: 1.3;
    border-bottom: 1px solid var(--border);
}
.chat-banner svg { flex-shrink: 0; }
.chat-banner--customer {
    background: rgba(var(--warning-rgb, 234, 179, 8), 0.08);
    color: var(--warning);
}
.chat-banner--internal {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.08);
    color: var(--accent);
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.chat-header__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Messages area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--s2);
    color: var(--text-muted);
    text-align: center;
}

.chat-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Message bubble */
.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    animation: chatFadeIn 0.25s ease-out;
}

@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.chat-message--own {
    align-self: flex-end;
}

.chat-message--other {
    align-self: flex-start;
}

.chat-message__author {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
    padding: 0 var(--s1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.chat-message__author .team-role-badge,
.chat-message__author .badge {
    font-size: 0.6rem;
    padding: 1px 6px;
}

.chat-message__bubble {
    padding: var(--s2) var(--s3);
    border-radius: 16px;
    line-height: 1.5;
    font-size: 0.9rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
}

.chat-message--own .chat-message__bubble {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid var(--accent);
    color: var(--text);
    border-bottom-right-radius: 4px;
}

.chat-message--other .chat-message__bubble {
    background: var(--bg-tertiary);
    color: var(--text);
    border-top-left-radius: 4px;
}

.chat-message--other .chat-message__bubble::before {
    content: '';
    position: absolute;
    top: 0;
    left: -6px;
    border-width: 6px 6px 0 0;
    border-style: solid;
    border-color: var(--bg-tertiary) transparent transparent transparent;
}

.chat-message--agent .chat-message__bubble {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border: 1px solid var(--border);
    border-top-left-radius: 4px;
}

/* Internal chat: subtle green tint for own messages to distinguish from customer chat */
.chat-message--internal.chat-message--own .chat-message__bubble {
    background: rgba(22, 163, 106, 0.08);
    border-color: var(--success, #16a34a);
    color: var(--text);
}

.chat-message__meta {
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
    padding: 0 var(--s1);
}

.chat-message--own .chat-message__meta {
    justify-content: flex-end;
}

.chat-message__edited {
    font-style: italic;
    opacity: 0.7;
}

/* Message actions (edit button) */
.chat-message__actions {
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
}

.chat-message:hover .chat-message__actions {
    display: flex;
}

.chat-message__action-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chat-message__action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Attachments within message */
.chat-message__attachments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--s1);
}

.chat-attachment {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.15s;
}

.chat-message--own .chat-attachment {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

.chat-message--own .chat-attachment:hover {
    background: rgba(255,255,255,0.25);
}

.chat-message--other .chat-attachment,
.chat-message--agent .chat-attachment {
    background: rgba(0,0,0,0.05);
    color: var(--text-secondary);
}

.chat-message--other .chat-attachment:hover,
.chat-message--agent .chat-attachment:hover {
    background: rgba(0,0,0,0.1);
}

.chat-attachment__icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.chat-attachment__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.chat-attachment__size {
    flex-shrink: 0;
    opacity: 0.6;
    font-size: 0.7rem;
}

/* Chat image preview in message */
.chat-attachment--image {
    display: block;
    max-width: 280px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 4px;
}

.chat-attachment--image img {
    width: 100%;
    display: block;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.chat-attachment--image img:hover {
    opacity: 0.9;
}

/* Input area */
.chat-input {
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

.chat-input__drop-zone {
    padding: var(--s2) var(--s3);
    transition: background 0.2s;
}

.chat-input__drop-zone.is-dragover {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.08);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}

.chat-input__row {
    display: flex;
    align-items: flex-end;
    gap: var(--s1);
}

.chat-input__field {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    background: var(--bg-primary);
    color: var(--text-primary);
    max-height: 120px;
    overflow-y: auto;
    transition: border-color 0.2s;
}

.chat-input__field:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-input__field::placeholder {
    color: var(--text-muted);
}

.chat-input__attach,
.chat-input__send {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.chat-input__attach {
    background: transparent;
    color: var(--text-muted);
}

.chat-input__attach:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.chat-input__send {
    background: var(--accent);
    color: #fff;
}

.chat-input__send:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.chat-input__send:active {
    transform: scale(0.95);
}

/* File preview in input area */
.chat-input__file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
}

.chat-input__file-preview:not(:empty) {
    margin-bottom: var(--s2);
}

.chat-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 16px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    animation: chatFadeIn 0.2s ease-out;
}

.chat-file-chip__remove {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    transition: all 0.15s;
}

.chat-file-chip__remove:hover {
    background: rgba(0,0,0,0.1);
    color: var(--text-primary);
}

/* Edit inline form */
.chat-edit-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-edit-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: none;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.chat-edit-form__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.chat-edit-form__btn {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-primary);
    color: var(--text-secondary);
}

.chat-edit-form__btn:hover {
    background: var(--bg-tertiary);
}

.chat-edit-form__btn--save {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.chat-edit-form__btn--save:hover {
    filter: brightness(1.1);
}

/* Date separator */
.chat-date-separator {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: var(--s1) 0;
}

.chat-date-separator::before,
.chat-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.chat-date-separator__label {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── M10 Chat Responsive ──────────────────────────────────────────── */

@media (max-width: 1023px) {
    .chat-container {
        height: 500px;
    }

    .chat-message {
        max-width: 85%;
    }
}

@media (max-width: 767px) {
    .chat-container {
        height: 450px;
        border-radius: var(--radius, 8px);
    }

    .chat-message {
        max-width: 90%;
    }

    .chat-message__bubble {
        padding: var(--s1) var(--s2);
        font-size: 0.85rem;
    }

    .chat-input__field {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .chat-attachment__name {
        max-width: 140px;
    }

    .chat-attachment--image {
        max-width: 200px;
    }
}

/* ── M11: Releases & Downloads ────────────────────────────────────── */

.release-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s3);
    padding: var(--s2) 0;
}

.release-header__title {
    font-size: var(--fs3, 1.15rem);
    font-weight: 600;
    margin: 0;
}

.release-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.release-list__loading {
    display: flex;
    justify-content: center;
    padding: var(--s4);
}

.release-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    background: var(--bg-primary);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.release-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.release-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius, 8px);
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-muted);
}

.release-card__body {
    flex: 1;
    min-width: 0;
}

.release-card__top {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.release-card__version {
    font-weight: 600;
    font-size: var(--fs2, 1rem);
}

.release-card__type {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.release-card__type--trial {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.release-card__type--full {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.release-card__meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.release-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.release-card__changelog {
    margin-top: var(--s1);
    font-size: 0.9rem;
    color: var(--text-secondary, #555);
    line-height: 1.5;
    white-space: pre-line;
    max-height: 80px;
    overflow: hidden;
    position: relative;
}

.release-card__changelog::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(transparent, var(--bg-primary));
    pointer-events: none;
}

.release-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    flex-shrink: 0;
}

.release-card__actions .btn {
    white-space: nowrap;
}

/* Release Empty State */
.release-empty {
    text-align: center;
    padding: var(--s6, 3rem) var(--s3);
    color: var(--text-muted);
}

.release-empty svg {
    margin-bottom: var(--s2);
}

.release-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* Drop Zone */
.release-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s4);
    border: 2px dashed var(--border);
    border-radius: var(--radius, 8px);
    background: var(--bg-secondary, #fafafa);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
    min-height: 120px;
}

.release-drop-zone:hover,
.release-drop-zone.is-dragover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.04);
}

.release-drop-zone__text {
    margin: var(--s1) 0 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.release-drop-zone__hint {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.release-drop-zone__file {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s2);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    font-size: 0.9rem;
    margin-top: var(--s2);
}

.release-drop-zone__file .remove-file {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
}

.release-drop-zone__file .remove-file:hover {
    color: var(--danger, #ef4444);
}

/* Tab Switch in Modal */
.release-tab-switch {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    overflow: hidden;
}

.release-tab-switch__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--s1) var(--s2);
    border: none;
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.release-tab-switch__btn:hover {
    background: var(--bg-primary);
}

.release-tab-switch__btn--active {
    background: var(--accent);
    color: #fff;
}

.release-tab-switch__btn--active:hover {
    background: var(--accent);
    color: #fff;
}

/* Source Row */
.release-source-row {
    display: flex;
    gap: var(--s2);
    align-items: flex-start;
}

.release-source-row .form-select {
    flex: 1;
}

/* Folder Status */
.release-folder-status__checking {
    padding: var(--s3);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.release-folder-status__items {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.release-folder-status__item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-radius: var(--radius, 6px);
    font-size: 0.9rem;
    transition: background 0.2s;
}

.release-folder-status__item.is-ok {
    background: rgba(34, 197, 94, 0.08);
    color: var(--color-success, #22c55e);
}

.release-folder-status__item.is-missing {
    background: rgba(239, 68, 68, 0.08);
    color: var(--color-danger, #ef4444);
}

.release-folder-status__name {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
}

.release-folder-status__label {
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0.8;
}

.release-folder-status__warning {
    margin-top: var(--s2);
    padding: var(--s2) var(--s3);
    border-radius: var(--radius, 6px);
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    font-size: 0.85rem;
}

/* Payment Hint */
.release-payment-hint {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s2) var(--s3);
    border-radius: var(--radius, 6px);
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    font-size: 0.9rem;
    margin-top: var(--s2);
}

/* Locked Release Card */
.release-card--locked {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.release-card--locked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius, 8px);
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.02) 10px,
        rgba(0, 0, 0, 0.02) 20px
    );
    pointer-events: none;
}

/* Responsive */
@media (max-width: 767px) {
    .release-card {
        flex-direction: column;
    }

    .release-card__actions {
        flex-direction: row;
        width: 100%;
    }

    .release-card__actions .btn {
        flex: 1;
    }

    .release-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s2);
    }

    .release-source-row {
        flex-direction: column;
    }

    .release-tab-switch {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   M16 – INVOICES
   ═══════════════════════════════════════════════════════════════════ */

/* Invoice Summary Cards */
.invoice-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.summary-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--s4);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.summary-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
}

.summary-card__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--s1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-card--warning .summary-card__value { color: var(--warning); }
.summary-card--danger .summary-card__value { color: var(--danger); }
.summary-card--muted .summary-card__value { color: var(--text-muted); }

/* Invoice Filters */
.invoice-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.filter-tabs {
    display: flex;
    gap: var(--s1);
    flex-wrap: wrap;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s3);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
    background: transparent;
    border: 1px solid transparent;
}

.filter-tab:hover {
    background: var(--surface-3);
    color: var(--text-bright);
}

.filter-tab--active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

.filter-tab__count {
    font-size: 0.6875rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0 var(--s1);
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}

.filter-tab--active .filter-tab__count {
    background: rgba(255, 255, 255, 0.25);
}

/* Invoice Status Badges */
/* ── Invoice year separator ────────────────────────────────── */
.year-separator td {
    padding: var(--s3) var(--s4);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-muted);
    letter-spacing: 0.05em;
    background: transparent;
}
.year-separator:hover td {
    background: transparent;
}

.invoice-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.invoice-status-badge--draft {
    background: var(--surface-3);
    color: var(--text-muted);
}

.invoice-status-badge--sent {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.invoice-status-badge--paid {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.invoice-status-badge--overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.invoice-status-badge--cancelled {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

.invoice-status-badge--credited {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Invoice Form */
.invoice-form__grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--s4);
    align-items: start;
}

.invoice-form__main { min-width: 0; }
.invoice-form__sidebar { position: sticky; top: var(--s4); }

/* Invoice Items Table */
.invoice-items-table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-items-table th {
    padding: var(--s2) var(--s3);
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.invoice-items-table td {
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.invoice-items-table tbody tr:last-child td {
    border-bottom: none;
}

.invoice-items-table tfoot td {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--border);
}

.invoice-items-table--readonly td { font-size: 0.875rem; }

.invoice-total-row td {
    border-top: 2px solid var(--border);
    font-size: 1rem;
}

.invoice-items-actions {
    padding: var(--s3);
    border-top: 1px solid var(--border-subtle);
}

/* Invoice Totals */
.invoice-totals {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.invoice-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.invoice-totals__row--total {
    padding-top: var(--s2);
    border-top: 2px solid var(--border);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-bright);
}

.invoice-totals__row--info {
    justify-content: flex-end;
}

/* Invoice Totals Card */
.invoice-totals-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
}

/* Invoice Preview */
.invoice-preview {
    position: relative;
    background: white;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
}

.invoice-preview__iframe {
    width: 100%;
    height: 800px;
    border: none;
    background: white;
}

/* Invoice Detail Grid */
.invoice-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--s4);
    align-items: start;
}

.invoice-detail__main { min-width: 0; }
.invoice-detail__sidebar { position: sticky; top: var(--s4); }

/* Invoice Info Grid */
.invoice-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s3);
}

.invoice-info-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.invoice-info-value {
    font-size: 0.9375rem;
    color: var(--text-bright);
}

/* Invoice Timeline */
.invoice-timeline {
    position: relative;
    padding-left: var(--s4);
}

.invoice-timeline h5 {
    margin-bottom: var(--s2);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.invoice-timeline__item {
    position: relative;
    padding-bottom: var(--s3);
    padding-left: var(--s3);
}

.invoice-timeline__item::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 8px;
    bottom: -8px;
    width: 1px;
    background: var(--border);
}

.invoice-timeline__item:last-child::before { display: none; }

.invoice-timeline__dot {
    position: absolute;
    left: -20px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--warning);
    border: 2px solid var(--surface-1);
}

.invoice-timeline__content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s2);
    align-items: center;
    font-size: 0.8125rem;
}

.invoice-timeline__content strong {
    color: var(--text-bright);
}

/* Related Documents */
.related-doc {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.875rem;
}

/* Settings Grid */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--s4);
}

/* Invoice Responsive */
@media (max-width: 1024px) {
    .invoice-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .invoice-form__grid,
    .invoice-detail-grid {
        grid-template-columns: 1fr;
    }

    .invoice-form__sidebar,
    .invoice-detail__sidebar {
        position: static;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .invoice-summary {
        grid-template-columns: 1fr 1fr;
    }

    .invoice-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .invoice-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Detail-view: horizontal scroll for read-only table */
    .invoice-detail__main .card__body.p-0 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .invoice-detail__main .invoice-items-table {
        min-width: 600px;
    }

    /* Form-view: stacked card layout for editable items */
    .invoice-form__main .invoice-items-table,
    .invoice-form__main .invoice-items-table thead,
    .invoice-form__main .invoice-items-table tbody,
    .invoice-form__main .invoice-items-table tr,
    .invoice-form__main .invoice-items-table td {
        display: block;
    }
    .invoice-form__main .invoice-items-table thead {
        display: none;
    }
    .invoice-form__main .invoice-items-table .invoice-item-row {
        position: relative;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r2);
        padding: var(--s4) var(--s3);
        margin-bottom: var(--s3);
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--s1) 0;
        border: none;
        gap: var(--s3);
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td::before {
        content: attr(data-label);
        flex: 0 0 35%;
        font-weight: 600;
        font-size: var(--fs1);
        color: var(--muted);
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td:last-child {
        position: absolute;
        top: var(--s2);
        right: var(--s2);
        padding: 0;
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td:last-child::before {
        display: none;
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td:first-child {
        padding-bottom: var(--s2);
        border-bottom: 1px solid var(--border);
        margin-bottom: var(--s1);
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td .form-input,
    .invoice-form__main .invoice-items-table .invoice-item-row td .form-select {
        flex: 1;
        min-width: 0;
    }

    .invoice-detail__main .card__body {
        padding: var(--s3);
    }

    .page-header__left {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .page-header__right {
        flex-wrap: wrap;
        gap: var(--s2);
    }
}

@media (max-width: 480px) {
    .invoice-info-grid {
        grid-template-columns: 1fr;
    }

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

/* ═══════════════════════════════════════════════════════════════════
   M17 – Bookkeeping (EÜR)
   ═══════════════════════════════════════════════════════════════════ */

.bookkeeping-page {
    max-width: 1400px;
}

/* Year selector */
.bookkeeping-year-selector {
    display: inline-flex;
    margin-left: var(--s4);
}
.bookkeeping-year-selector .form-select {
    min-width: 100px;
}

/* Summary cards row */
.bookkeeping-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s4);
    margin-bottom: var(--s5);
}

/* Tabs */
.bookkeeping-tabs {
    display: flex;
    gap: var(--s1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s5);
}

.bookkeeping-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs2);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
    margin-bottom: -1px;
}

.bookkeeping-tab:hover {
    color: var(--text-bright);
}

.bookkeeping-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.bookkeeping-tab__count {
    background: var(--bg-alt);
    color: var(--muted);
    padding: 1px 8px;
    border-radius: var(--r3);
    font-size: var(--fs1);
}

.bookkeeping-tab--active .bookkeeping-tab__count {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* Table */
.bookkeeping-table {
    font-size: var(--fs2);
}

.bookkeeping-table th {
    white-space: nowrap;
}

.bookkeeping-entry {
    transition: background var(--t) var(--ease), opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.bookkeeping-entry:hover {
    background: var(--bg-alt);
}

/* Month total separator rows */
.bookkeeping-month-total {
    background: var(--bg-alt);
    border-top: 2px solid var(--border);
}

.bookkeeping-month-total td {
    padding: var(--s2) var(--s3);
    color: var(--text-bright);
}

/* Pending entries (AI scan) */
.entry-pending {
    background: var(--warning-subtle);
    border-left: 3px solid var(--warning);
}

.entry-pending__banner {
    padding: var(--s3) var(--s4) !important;
}

.entry-pending__content {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
}

.entry-pending__actions {
    margin-left: auto;
    display: flex;
    gap: var(--s2);
}

/* Inline editing */
.inline-edit {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--r1);
    transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    min-width: 20px;
    display: inline-block;
}

.inline-edit:hover {
    background: var(--accent-subtle);
}

.inline-edit--active {
    background: transparent;
}

.inline-edit__input {
    min-width: 60px;
    max-width: 100%;
    animation: inlineEditFadeIn var(--t-fast) var(--ease);
}

.inline-edit__input:focus {
    box-shadow: 0 0 0 2px var(--accent);
}

@keyframes inlineEditFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Invoice link icon */
.bookkeeping-invoice-link {
    display: inline-flex;
    margin-left: var(--s1);
    opacity: 0.5;
    transition: opacity var(--t) var(--ease);
}

.bookkeeping-invoice-link:hover {
    opacity: 1;
}

/* Actions column */
.bookkeeping-actions {
    display: flex;
    gap: var(--s1);
    justify-content: flex-end;
}

/* Add entry row */
.bookkeeping-add-row {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
    animation: slideDown var(--t-slow) var(--ease);
}

.bookkeeping-add-row--hidden {
    display: none;
}

.bookkeeping-add-row__fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.bookkeeping-add-row__actions {
    display: flex;
    gap: var(--s2);
    justify-content: flex-end;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

/* Upload zone */
.bookkeeping-upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--r4);
    padding: var(--s6);
    text-align: center;
    cursor: pointer;
    margin-bottom: var(--s4);
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
    position: relative;
}

.bookkeeping-upload-zone:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.bookkeeping-upload-zone--dragover {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: scale(1.01);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}

.bookkeeping-upload-zone__text {
    color: var(--text);
    font-size: var(--fs3);
    margin-top: var(--s3);
}

.bookkeeping-upload-zone__hint {
    color: var(--muted);
    font-size: var(--fs1);
    margin-top: var(--s1);
}

.bookkeeping-upload-zone__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
}

.bookkeeping-upload-zone__loading--hidden {
    display: none;
}

/* Scan Modal (slide-in from right) */
.bookkeeping-scan-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease);
}

.bookkeeping-scan-modal--open {
    pointer-events: auto;
    opacity: 1;
}

.bookkeeping-scan-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.bookkeeping-scan-modal__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 90vw);
    background: var(--card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease);
    box-shadow: var(--shadow3);
}

.bookkeeping-scan-modal--open .bookkeeping-scan-modal__panel {
    transform: translateX(0);
}

.bookkeeping-scan-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4);
    border-bottom: 1px solid var(--border);
}

.bookkeeping-scan-modal__header h3 {
    font-size: var(--fs4);
    color: var(--text-bright);
}

.bookkeeping-scan-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s4);
}

.bookkeeping-scan-modal__preview {
    margin-bottom: var(--s4);
}

.bookkeeping-scan-modal__preview-content {
    max-height: 200px;
    overflow: hidden;
    border-radius: var(--r3);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

.bookkeeping-scan-modal__preview-img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}

.bookkeeping-scan-modal__preview-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    padding: var(--s4);
    color: var(--muted);
}

.bookkeeping-scan-modal__hint {
    font-size: var(--fs2);
    margin-bottom: var(--s4);
}

.bookkeeping-scan-modal__fields {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.bookkeeping-scan-modal__fields .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}

.bookkeeping-scan-modal__positions {
    margin-top: var(--s4);
}

.bookkeeping-scan-modal__positions h4 {
    font-size: var(--fs2);
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.bookkeeping-scan-modal__actions {
    display: flex;
    gap: var(--s3);
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--border);
}

/* Overview sections */
.bookkeeping-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
}

.bookkeeping-section__title {
    font-size: var(--fs3);
    color: var(--text-bright);
    margin-bottom: var(--s4);
}

.bookkeeping-section__subtitle {
    font-size: var(--fs2);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--s3);
}

.bookkeeping-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

/* Monthly bar chart */
.bookkeeping-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--s2);
    height: 200px;
    padding: var(--s2) 0;
}

.bookkeeping-chart__month {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.bookkeeping-chart__bars {
    flex: 1;
    display: flex;
    gap: 2px;
    align-items: flex-end;
    width: 100%;
}

.bookkeeping-chart__bar {
    flex: 1;
    min-height: 2px;
    border-radius: var(--r1) var(--r1) 0 0;
    transition: height var(--t-slow) var(--ease);
}

.bookkeeping-chart__bar--income {
    background: var(--success);
    opacity: 0.8;
}

.bookkeeping-chart__bar--expense {
    background: var(--danger);
    opacity: 0.8;
}

.bookkeeping-chart__label {
    font-size: var(--fs1);
    color: var(--muted);
    margin-top: var(--s1);
    white-space: nowrap;
}

.bookkeeping-chart__legend {
    display: flex;
    gap: var(--s4);
    justify-content: center;
    margin-top: var(--s3);
}

.bookkeeping-chart__legend-item {
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: var(--fs2);
    color: var(--muted);
}

.bookkeeping-chart__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.bookkeeping-chart__legend-dot--income { background: var(--success); }
.bookkeeping-chart__legend-dot--expense { background: var(--danger); }

/* Category bars */
.bookkeeping-category-bars {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.bookkeeping-category-bar__header {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs2);
    margin-bottom: var(--s1);
}

.bookkeeping-category-bar__track {
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
}

.bookkeeping-category-bar__fill {
    height: 100%;
    border-radius: 3px;
    transition: width var(--t-slow) var(--ease);
}

.bookkeeping-category-bar__fill--income { background: var(--success); }
.bookkeeping-category-bar__fill--expense { background: var(--danger); }

.bookkeeping-category-total {
    display: flex;
    justify-content: space-between;
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--border);
    font-size: var(--fs2);
}

/* Category management list */
.bookkeeping-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bookkeeping-category-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs2);
}

.bookkeeping-category-add {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s3);
}

.bookkeeping-category-add .form-input {
    flex: 1;
}

/* Export buttons */
.bookkeeping-export-buttons {
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
}

/* Utility classes */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }

/* Stagger animations for table rows */
.bookkeeping-table tbody tr {
    animation: fadeInRow var(--t) var(--ease) both;
}

@keyframes fadeInRow {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.bookkeeping-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.bookkeeping-table tbody tr:nth-child(2) { animation-delay: 30ms; }
.bookkeeping-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.bookkeeping-table tbody tr:nth-child(4) { animation-delay: 90ms; }
.bookkeeping-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.bookkeeping-table tbody tr:nth-child(6) { animation-delay: 150ms; }
.bookkeeping-table tbody tr:nth-child(7) { animation-delay: 180ms; }
.bookkeeping-table tbody tr:nth-child(8) { animation-delay: 210ms; }
.bookkeeping-table tbody tr:nth-child(9) { animation-delay: 240ms; }
.bookkeeping-table tbody tr:nth-child(10) { animation-delay: 270ms; }

/* ── Bookkeeping Responsive ─────────────────────────────────────── */

@media (max-width: 1024px) {
    .bookkeeping-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .bookkeeping-overview-grid {
        grid-template-columns: 1fr;
    }

    .bookkeeping-scan-modal__panel {
        width: min(440px, 90vw);
    }
}

@media (max-width: 768px) {
    .bookkeeping-summary {
        grid-template-columns: 1fr 1fr;
    }

    .bookkeeping-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .bookkeeping-table {
        font-size: var(--fs1);
    }

    .bookkeeping-add-row__fields {
        grid-template-columns: 1fr 1fr;
    }

    .bookkeeping-chart {
        height: 150px;
    }

    .bookkeeping-scan-modal__panel {
        width: 100vw;
    }
}

@media (max-width: 480px) {
    .bookkeeping-summary {
        grid-template-columns: 1fr;
    }

    .bookkeeping-add-row__fields {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        gap: var(--s3);
    }

    .bookkeeping-year-selector {
        margin-left: 0;
    }
}

/* ── PWA Install Banner ──────────────────────────────────────────── */

.install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--c-surface, #161b22);
    border-top: 1px solid var(--c-border, #30363d);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.install-banner--visible {
    transform: translateY(0);
}

.install-banner__text {
    flex: 1;
    font-size: var(--fs2, 0.875rem);
    color: var(--c-text, #c9d1d9);
}

.install-banner__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    background: var(--c-accent, #238636);
    color: #fff;
    font-size: var(--fs2, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.install-banner__btn:hover {
    background: #2ea043;
}

.install-banner__close {
    background: none;
    border: none;
    color: var(--c-text-muted, #8b949e);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.install-banner__close:hover {
    color: var(--c-text, #c9d1d9);
}

@media (max-width: 480px) {
    .install-banner {
        flex-wrap: wrap;
        padding: var(--s3);
    }

    .install-banner__text {
        width: 100%;
        margin-bottom: var(--s2);
    }

    .install-banner__btn {
        flex: 1;
    }
}

/* ── Push Notification Banner ───────────────────────────────────── */

.push-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--c-surface, #161b22);
    border-top: 1px solid var(--c-border, #30363d);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.push-banner--visible {
    transform: translateY(0);
}

.push-banner__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.push-banner__text {
    flex: 1;
    font-size: var(--fs2, 0.875rem);
    color: var(--c-text, #c9d1d9);
}

.push-banner__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    background: var(--c-accent, #238636);
    color: #fff;
    font-size: var(--fs2, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.push-banner__btn:hover {
    background: #2ea043;
}

.push-banner__close {
    background: none;
    border: none;
    color: var(--c-text-muted, #8b949e);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.push-banner__close:hover {
    color: var(--c-text, #c9d1d9);
}

@media (max-width: 480px) {
    .push-banner {
        flex-wrap: wrap;
        padding: var(--s3);
    }

    .push-banner__text {
        width: 100%;
        margin-bottom: var(--s2);
    }

    .push-banner__btn {
        flex: 1;
    }

    .push-banner__icon {
        display: none;
    }
}

/* ── Push Permission Box (Settings) ────────────────────────────── */

.push-permission-box {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--r2, 8px);
    border: 1px solid var(--c-border, #30363d);
    margin-bottom: var(--s5);
}

.push-permission-box__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.push-permission-box__content {
    flex: 1;
    min-width: 0;
}

.push-permission-box__title {
    display: block;
    font-size: var(--fs2, 0.875rem);
    margin-bottom: 0.125rem;
}

.push-permission-box__text {
    font-size: var(--fs1, 0.8125rem);
    color: var(--c-text-muted, #8b949e);
    margin: 0;
}

.push-permission-box__btn {
    flex-shrink: 0;
}

/* Status variants */
.push-permission-box--ok {
    border-color: var(--c-success, #238636);
    background: rgba(35, 134, 54, 0.08);
}

.push-permission-box--ok .push-permission-box__icon {
    background: var(--c-success, #238636);
    color: #fff;
}

.push-permission-box--warn {
    border-color: var(--c-warning, #d29922);
    background: rgba(210, 153, 34, 0.08);
}

.push-permission-box--warn .push-permission-box__icon {
    background: var(--c-warning, #d29922);
    color: #fff;
}

.push-permission-box--default {
    border-color: var(--c-accent, #1f6feb);
    background: rgba(31, 111, 235, 0.06);
}

.push-permission-box--default .push-permission-box__icon {
    background: rgba(31, 111, 235, 0.15);
    color: var(--c-accent, #1f6feb);
}

@media (max-width: 480px) {
    .push-permission-box {
        flex-wrap: wrap;
    }

    .push-permission-box__content {
        flex: 1 1 calc(100% - 3.5rem);
    }

    .push-permission-box__btn {
        width: 100%;
        margin-top: var(--s2);
    }
}

/* ── Test Notification Button ─── */

.notif-settings__test {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s4) 0;
    padding: var(--s3) var(--s4);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.notif-settings__test-hint {
    font-size: var(--fs1);
    color: var(--muted);
}

/* ── Global Search – Command Palette (M20) ─────────────────────── */

/* Topbar trigger button */
.topbar__search-trigger {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    background: var(--bg-alt);
    color: var(--muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
    min-width: 0;
}

.topbar__search-trigger:hover {
    border-color: var(--accent);
    color: var(--text);
    background: var(--bg);
}

.topbar__search-trigger svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.topbar__search-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__search-kbd {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--r1);
    background: var(--bg);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1.3;
}

/* Search overlay */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(20vh, 140px);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Search modal */
.search-modal {
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    box-shadow: var(--shadow3), 0 0 0 1px rgba(0,0,0,0.1);
    transform: scale(0.97) translateY(-8px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.search-overlay.is-open .search-modal {
    transform: scale(1) translateY(0);
}

/* Modal header with search input */
.search-modal__header {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
}

.search-modal__icon {
    flex-shrink: 0;
    color: var(--muted);
}

.search-modal__input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-bright);
    font-size: 1rem;
    line-height: 1.5;
    outline: none;
}

.search-modal__input::placeholder {
    color: var(--muted);
}

.search-modal__esc {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--r1);
    background: var(--bg-alt);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1.3;
}

/* Modal body */
.search-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s2) 0;
    min-height: 80px;
    max-height: calc(70vh - 110px);
}

/* Empty state */
.search-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--muted);
}

.search-modal__empty-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.search-modal__empty-hint {
    font-size: 0.8125rem;
    margin: 0;
}

/* Loading state */
.search-modal__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    padding: var(--s6) var(--s4);
    color: var(--muted);
    font-size: 0.875rem;
}

.search-modal__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: search-spin 0.6s linear infinite;
}

@keyframes search-spin {
    to { transform: rotate(360deg); }
}

.search-modal__empty[hidden],
.search-modal__loading[hidden] {
    display: none;
}

/* No results state */
.search-modal__no-results {
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
}

.search-modal__no-results p {
    margin: 0;
}

/* Results – group headers */
.search-group {
    padding: var(--s1) 0;
}

.search-group + .search-group {
    border-top: 1px solid var(--border);
    margin-top: var(--s1);
    padding-top: var(--s2);
}

.search-group__label {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s4) var(--s2);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* Result items */
.search-result {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 0;
}

.search-result:hover,
.search-result.is-active {
    background: var(--accent-subtle);
}

.search-result__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--r2);
    background: var(--bg-alt);
    color: var(--muted);
}

.search-result__body {
    flex: 1;
    min-width: 0;
}

.search-result__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result__title mark {
    background: var(--warning-subtle);
    color: var(--warning);
    border-radius: 2px;
    padding: 0 1px;
}

.search-result__subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.search-result__status {
    flex-shrink: 0;
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--r1);
    background: var(--bg-alt);
    color: var(--muted);
    text-transform: capitalize;
}

/* Footer with keyboard hints */
.search-modal__footer {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s2) var(--s4);
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
}

.search-modal__hint {
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: 0.6875rem;
    color: var(--muted);
}

.search-modal__hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--r1);
    background: var(--bg);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.625rem;
    line-height: 1;
}

/* ── Mobile responsive ─────────────────────────────────────────── */

@media (max-width: 767px) {
    .topbar__search-text,
    .topbar__search-kbd {
        display: none;
    }

    .topbar__search-trigger {
        padding: 0.375rem;
    }

    .search-overlay {
        padding-top: 0;
        align-items: stretch;
    }

    .search-modal {
        max-width: 100%;
        max-height: 100vh;
        max-height: 100svh;
        height: 100vh;
        height: 100svh;
        border-radius: 0;
        border: none;
    }

    .search-modal__body {
        max-height: calc(100vh - 55px);
        max-height: calc(100svh - 55px);
    }

    .search-modal__footer {
        display: none;
    }
}

/* ── Type Selection Page ───────────────────────────────────────── */

.type-select {
    max-width: 960px;
    margin: 0 auto;
}

.type-select__header {
    margin-bottom: var(--s5);
}

.type-select__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
}

.type-select__card-form {
    display: contents;
}

.type-select__card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    padding: var(--s5) var(--s4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    color: var(--text);
    font-family: inherit;
    font-size: inherit;
    width: 100%;
}

.type-select__card-btn:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.type-select__card-btn:active {
    transform: translateY(0);
}

.type-select__card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--primary);
    transition: background 0.25s, color 0.25s;
}

.type-select__card-btn:hover .type-select__card-icon {
    background: var(--primary);
    color: var(--text-on-primary, #fff);
}

.type-select__card-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-bright);
}

.type-select__card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .type-select__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s3);
    }

    .type-select__card-btn {
        padding: var(--s4) var(--s3);
    }
}

@media (max-width: 480px) {
    .type-select__grid {
        grid-template-columns: 1fr;
    }
}

/* ── AI Brief Card (type-select page) ──────────────────────── */

.type-select__ai-divider {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin: var(--s6) 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.type-select__ai-divider::before,
.type-select__ai-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.type-select__ai-card {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: var(--s5);
    text-align: center;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

.type-select__ai-card:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
}

.type-select__ai-card.drag-over {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
}

.type-select__ai-header {
    margin-bottom: var(--s4);
}

.type-select__ai-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
    color: var(--primary);
}

.type-select__ai-sparkle {
    animation: ai-sparkle-pulse 2s ease-in-out infinite;
}

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

.type-select__ai-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0 0 var(--s2);
}

.type-select__ai-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 500px;
    margin: 0 auto;
}

.type-select__ai-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: var(--s3);
    padding: var(--s2) var(--s3);
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.type-select__ai-disclaimer svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--warning);
}

.type-select__ai-disclaimer--privacy {
    background: color-mix(in srgb, var(--info, #3b82f6) 8%, transparent);
    border-color: color-mix(in srgb, var(--info, #3b82f6) 25%, transparent);
    margin-top: var(--s2);
}

.type-select__ai-disclaimer--privacy svg {
    color: var(--info, #3b82f6);
}

/* Dropzone */
.type-select__ai-dropzone[hidden] {
    display: none !important;
}

.type-select__ai-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    padding: var(--s5) var(--s4);
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s;
    border-radius: var(--radius);
}

.type-select__ai-dropzone:hover {
    color: var(--primary);
}

.type-select__ai-dropzone-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
}

.type-select__ai-dropzone-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Loading */
.type-select__ai-loading[hidden],
.type-select__ai-error[hidden] {
    display: none !important;
}

.type-select__ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    padding: var(--s6) var(--s4);
}

.type-select__ai-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.type-select__ai-loading-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-bright);
}

.type-select__ai-loading-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    max-width: 360px;
}

/* Error */
.type-select__ai-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    padding: var(--s5) var(--s4);
}

.type-select__ai-error-msg {
    font-size: 0.875rem;
    color: var(--danger);
    text-align: center;
    line-height: 1.5;
}

.type-select__ai-retry {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.type-select__ai-retry:hover {
    background: var(--surface-hover);
    border-color: var(--primary);
}

@media (max-width: 480px) {
    .type-select__ai-card {
        padding: var(--s4);
    }

    .type-select__ai-desc {
        font-size: 0.75rem;
    }
}

/* Type Badge (inline) */
.badge--subtle {
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* ── Design Upload (Wizard) ─────────────────────────────────────── */

.design-upload__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    text-align: center;
    color: var(--text-muted);
}

.design-upload__dropzone:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-alt));
}

.design-upload__dropzone--active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-alt));
    transform: scale(1.01);
}

.design-upload__dropzone svg {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.design-upload__dropzone:hover svg {
    opacity: 0.8;
}

.design-upload__preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.design-upload__preview:empty {
    display: none;
}

.design-upload__thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    transition: box-shadow 0.2s, transform 0.15s;
}

.design-upload__thumb:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.design-upload__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.design-upload__thumb-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
}

.design-upload__thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.design-upload__thumb:hover .design-upload__thumb-remove {
    opacity: 1;
}

.design-upload__thumb-remove:hover {
    background: var(--danger, #e53e3e);
}

.design-upload__thumb-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 6px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.2s;
}

.design-upload__thumb:hover .design-upload__thumb-name {
    opacity: 1;
}

.design-upload__thumb--uploading {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
}

.design-upload__spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: designSpin 0.7s linear infinite;
}

@keyframes designSpin {
    to { transform: rotate(360deg); }
}

/* Design References Grid (Brief Summary) */
.design-refs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.design-refs-grid__item {
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.design-refs-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.design-refs-grid__item--file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--text-muted);
}

.design-refs-grid__name {
    display: block;
    padding: 2px 4px;
    font-size: 0.625rem;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .design-upload__preview,
    .design-refs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .design-upload__preview,
    .design-refs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .design-upload__dropzone {
        padding: 1.25rem 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Bug Report Admin
   ══════════════════════════════════════════════════════════════════ */

/* Status badges */
.badge--bug-new {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--bug-seen {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--bug-resolved {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--bug-closed {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

/* Feature request status badges */
.badge--feature-new {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--feature-seen {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--feature-accepted {
    background: rgba(66, 153, 225, 0.12);
    color: var(--primary);
}

.badge--feature-done {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--feature-declined {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

/* Feature request detail page grid */
.feature-request-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s4);
}

.feature-request-detail-grid .card--accent {
    border-color: var(--primary);
    border-left: 3px solid var(--primary);
}

/* Detail page grid */
.bug-report-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

.bug-report-detail-grid .card {
    break-inside: avoid;
}

.bug-report-detail-grid .card--accent {
    grid-column: 1 / -1;
    border-color: var(--accent);
    border-left: 3px solid var(--accent);
}

/* Detail info grid */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3) var(--s5);
}

.detail-grid__item--full {
    grid-column: 1 / -1;
}

.detail-grid__label {
    display: block;
    font-size: var(--fs1);
    color: var(--muted);
    margin-bottom: var(--s1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.detail-grid__value {
    display: block;
    color: var(--text-bright);
}

/* Description box */
.bug-report-description {
    background: var(--surface0);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: var(--s3);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: var(--fs2);
    line-height: 1.6;
    color: var(--text);
}

/* Page history */
.bug-report-history {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: history-counter;
}

.bug-report-history__item {
    counter-increment: history-counter;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    padding-left: 2.5rem;
}

.bug-report-history__item:last-child {
    border-bottom: none;
}

.bug-report-history__item::before {
    content: counter(history-counter);
    position: absolute;
    left: 0;
    top: var(--s2);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs1);
    font-weight: 700;
}

.bug-report-history__title {
    font-weight: 500;
    color: var(--text-bright);
}

.bug-report-history__url {
    font-size: 0.8em;
    color: var(--muted);
    word-break: break-all;
    font-family: var(--font-mono, monospace);
}

.bug-report-history__time {
    font-size: 0.75em;
    color: var(--muted);
}

/* Quick actions */
.quick-actions {
    border-top: 1px solid var(--border);
    padding-top: var(--s4);
}

.quick-actions__buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s2);
}

.quick-actions__form {
    flex: 0 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .bug-report-detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Phase Switcher
   ═══════════════════════════════════════════════════════════════════ */

.phase-switcher {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--bg-alt);
    border-radius: var(--r3);
    margin-bottom: var(--s3);
}

.phase-switcher__label {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.phase-switcher__items {
    display: flex;
    gap: var(--s1);
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.phase-switcher > .btn {
    flex-shrink: 0;
}

.phase-switcher__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s3);
    border-radius: var(--r2);
    font-size: var(--fs2);
    color: var(--muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    cursor: pointer;
}

.phase-switcher__item:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, .04);
    border-color: var(--border);
}

.phase-switcher__item--active {
    color: var(--text-bright);
    background: var(--card);
    box-shadow: var(--shadow1);
    border-color: var(--accent);
}

.phase-switcher__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.phase-switcher__dot--planning { background: var(--warning); }
.phase-switcher__dot--active { background: var(--success); }
.phase-switcher__dot--completed { background: var(--info); }
.phase-switcher__dot--archived { background: var(--muted); }

/* Phase Management Modal */

.phase-manage-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.phase-manage-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--bg-alt);
    border-radius: var(--r2);
    border: 1px solid var(--border);
}

.phase-manage-item__info {
    flex: 1;
    min-width: 0;
}

.phase-manage-item__title {
    font-weight: 600;
    color: var(--text-bright);
}

.phase-manage-item__desc {
    font-size: var(--fs1);
    color: var(--muted);
    margin-top: 2px;
}

.phase-manage-item__actions {
    display: flex;
    gap: var(--s1);
    flex-shrink: 0;
}

.phase-manage-item--initial {
    border-color: var(--accent);
    border-style: dashed;
}

/* Extension banner in triage */

.extension-banner {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--r3);
    margin-bottom: var(--s3);
}

.extension-banner__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.extension-banner__text {
    flex: 1;
}

.extension-banner__text strong {
    color: var(--text-bright);
}

.extension-banner a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.extension-banner a:hover {
    text-decoration: underline;
}

.extension-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s;
}

.extension-link-item:last-child {
    border-bottom: none;
}

.extension-link-item:hover {
    background: rgba(var(--accent-rgb), 0.05);
}

.extension-link-item__title {
    font-weight: 500;
    color: var(--text-bright);
}

/* Extension CTA in ClientHub project overview */

.extension-cta {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.10) 0%, rgba(63, 185, 80, 0.06) 100%);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--r4);
    margin-bottom: var(--s3);
    transition: all var(--t) var(--ease);
    position: relative;
    overflow: hidden;
}

.extension-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.05) 0%, rgba(63, 185, 80, 0.03) 100%);
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

.extension-cta:hover::before {
    opacity: 1;
}

.extension-cta:hover {
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.1);
}

.extension-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r3);
    background: rgba(0, 229, 255, 0.12);
    color: var(--accent);
    flex-shrink: 0;
}

.extension-cta__body {
    flex: 1;
    min-width: 0;
}

.extension-cta__title {
    font-weight: 600;
    font-size: var(--fs3);
    color: var(--text-bright);
    margin-bottom: 2px;
}

.extension-cta__desc {
    font-size: var(--fs2);
    color: var(--muted);
    line-height: 1.4;
}

.extension-cta__action {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

@media (max-width: 600px) {
    .extension-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: var(--s3);
    }

    .extension-cta__icon {
        margin: 0 auto;
    }

    .extension-cta__action {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .phase-switcher {
        flex-wrap: nowrap;
        padding: var(--s1) var(--s2);
    }

    .phase-switcher__label {
        font-size: var(--fs1);
    }

    .phase-switcher__item {
        font-size: var(--fs1);
        padding: var(--s1) var(--s2);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Team Management
   ═══════════════════════════════════════════════════════════════════ */

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s3);
}

/* Team Card */
.team-card {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s4);
    background: var(--card);
    border-radius: var(--r3);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: all var(--t) var(--ease);
}

.team-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow2);
    transform: translateY(-2px);
}

.team-card__header {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.team-card__avatar,
.team-detail-header__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs3);
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.team-detail-header__avatar {
    width: 64px;
    height: 64px;
    font-size: var(--fs5);
}

.team-card__info {
    flex: 1;
    min-width: 0;
}

.team-card__name {
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card__email {
    font-size: var(--fs1);
    color: var(--muted);
}

.team-card__roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.team-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.team-card__tech-label {
    font-size: var(--fs0);
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    margin-right: 2px;
}

.team-card__rate {
    font-size: var(--fs2);
    color: var(--muted);
    font-weight: 500;
}

/* Role Badge */
.team-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs1);
    font-weight: 600;
    background: color-mix(in srgb, var(--role-color, var(--accent)) 15%, transparent);
    color: var(--role-color, var(--accent));
    border: 1px solid color-mix(in srgb, var(--role-color, var(--accent)) 30%, transparent);
    white-space: nowrap;
}

.team-role-badge--lg {
    padding: 4px 14px;
    font-size: var(--fs2);
}

/* Skill Chip */
.team-skill-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r1);
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--surface0);
    color: var(--text);
    border: 1px solid var(--border);
}

.team-skill-chip--more {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: transparent;
}

.team-skill-chip--added {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.team-skill-chip--removed {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    text-decoration: line-through;
}

/* Team Detail Header */
.team-detail-header {
    display: flex;
    align-items: center;
    gap: var(--s4);
}

.team-detail-header__info {
    flex: 1;
    min-width: 0;
}

.team-detail-header__info h2 {
    margin: 0;
    font-size: var(--fs5);
    color: var(--text-bright);
}

.team-detail-header__email {
    font-size: var(--fs2);
    color: var(--muted);
    margin-top: 2px;
}

.team-detail-header__roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin-top: var(--s2);
}

/* Detail fields */
.detail-fields {
    display: grid;
    gap: var(--s3);
}

.detail-fields--compact {
    gap: var(--s2);
}

.detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-field__label {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-field__value {
    color: var(--text-bright);
    line-height: 1.5;
}

.detail-text {
    color: var(--text);
    line-height: 1.7;
    margin-top: var(--s1);
}

.detail-links {
    list-style: none;
    padding: 0;
    margin: var(--s1) 0 0;
}

.detail-links li {
    padding: var(--s1) 0;
}

.detail-links a {
    color: var(--accent);
    text-decoration: none;
    word-break: break-all;
}

.detail-links a:hover {
    text-decoration: underline;
}

/* Assignment List */
.assignment-list {
    display: flex;
    flex-direction: column;
}

.assignment-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s1);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s;
}

.assignment-list__item:last-child {
    border-bottom: none;
}

.assignment-list__item:hover {
    background: rgba(var(--accent-rgb), 0.05);
}

.assignment-list__name {
    font-weight: 500;
    color: var(--text-bright);
}

/* Assignment Toggle (button + slider pattern) */
.assignment-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}

.assignment-toggle__slider {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--surface0);
    border: 2px solid var(--border);
    position: relative;
    transition: all var(--t) var(--ease);
}

.assignment-toggle__slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition: all var(--t) var(--ease);
}

.assignment-toggle--on .assignment-toggle__slider {
    background: var(--accent);
    border-color: var(--accent);
}

.assignment-toggle--on .assignment-toggle__slider::after {
    left: 22px;
    background: #fff;
}

.assignment-toggle:hover .assignment-toggle__slider {
    border-color: var(--accent);
}

.assignment-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 12px;
}

/* Profile Diff */
.profile-diff-banner {
    background: linear-gradient(135deg, rgba(var(--warning-rgb, 234, 179, 8), 0.08), rgba(var(--warning-rgb, 234, 179, 8), 0.02));
    border: 1px solid rgba(var(--warning-rgb, 234, 179, 8), 0.25);
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
}

.profile-diff-banner__header {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.profile-diff-banner__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid rgba(var(--warning-rgb, 234, 179, 8), 0.15);
}

/* Info variation for acknowledgement banners */
.profile-diff-banner--info {
    background: linear-gradient(135deg, rgba(var(--info-rgb, 59, 130, 246), 0.08), rgba(var(--info-rgb, 59, 130, 246), 0.02));
    border-color: rgba(var(--info-rgb, 59, 130, 246), 0.25);
}
.profile-diff-banner--info .profile-diff-banner__actions {
    border-top-color: rgba(var(--info-rgb, 59, 130, 246), 0.15);
}

/* Client profile email change notice */
.profile-email-notice {
    display: flex;
    align-items: center;
    gap: var(--s1);
    color: var(--warning);
    margin-top: var(--s1);
    font-size: var(--fs1);
}

.profile-diff {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.profile-diff__field {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.profile-diff__label {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-diff__values {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

.profile-diff__old {
    color: var(--danger);
    text-decoration: line-through;
    opacity: 0.7;
}

.profile-diff__arrow {
    flex-shrink: 0;
    color: var(--muted);
}

.profile-diff__new {
    color: var(--success);
    font-weight: 500;
}

.profile-diff__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Permissions Grid */
.permissions-grid {
    border: 1px solid var(--border);
    border-radius: var(--r2);
    overflow: hidden;
    font-size: var(--fs2);
}

.permissions-grid__header {
    display: flex;
    background: var(--bg-alt);
    font-weight: 600;
    padding: var(--s2) var(--s3);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--fs1);
}

.permissions-grid__row {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border);
    padding: var(--s1) var(--s3);
    transition: background 0.15s;
}

.permissions-grid__row:hover {
    background: rgba(var(--accent-rgb), 0.03);
}

.permissions-grid__cell--label {
    flex: 0 0 180px;
    font-weight: 500;
    color: var(--text-bright);
}

.permissions-grid__cell--check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--s1) var(--s2);
    cursor: pointer;
    font-size: var(--fs1);
    color: var(--muted);
}

.permissions-grid__cell--check input:checked + span {
    color: var(--accent);
    font-weight: 600;
}

/* Role Card Header */
.role-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.role-card-header__info {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.role-card-header__actions {
    display: flex;
    gap: var(--s1);
}

/* Checkbox list */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.checkbox-list__item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    cursor: pointer;
}

.checkbox-list__item input[type="checkbox"] {
    accent-color: var(--accent);
}

/* Form section title */
.form-section-title {
    font-size: var(--fs3);
    color: var(--text-bright);
    margin: var(--s4) 0 var(--s2);
    padding-bottom: var(--s1);
    border-bottom: 1px solid var(--border);
}

/* Color input */
.form-input--color {
    width: 48px;
    height: 36px;
    padding: 2px;
    cursor: pointer;
    border-radius: var(--r2);
}

/* Team Tab in Project Detail */
.team-assignment-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.team-assignment-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--bg-alt);
    border-radius: var(--r2);
    border: 1px solid var(--border);
}

.team-assignment-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: var(--s2);
}

.team-assignment-item__detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.team-assignment-item__section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: var(--s1);
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.team-assignment-item__section--secondary {
    opacity: .7;
}

.team-assignment-item__label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.team-assignment-item__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding-left: var(--s4);
}

.team-assignment-item__name {
    font-weight: 600;
    color: var(--text-bright);
}

.team-assignment-item__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .permissions-grid__cell--label {
        flex: 0 0 120px;
    }

    .permissions-grid__row {
        flex-wrap: wrap;
    }
}

/* ── Permission Notice ──────────────────────────────────────────── */
.permission-notice {
    display: flex;
    align-items: center;
    gap: var(--s2);
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: var(--r2);
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s3);
    font-size: var(--fs2);
    color: var(--muted);
}
.permission-notice__icon { flex-shrink: 0; color: var(--warning); }
[data-no-permission] { opacity: 0.45; cursor: not-allowed !important; pointer-events: auto !important; }

/* ── AI Task Planner ──────────────────────────────────────────── */

.planner-intro {
    text-align: center;
    padding: var(--s4) 0;
}
.planner-intro p {
    margin-bottom: var(--s3);
    line-height: 1.6;
    color: var(--text);
}
.planner-intro__option {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--surface);
    border-radius: var(--r2);
    font-size: var(--fs2);
    color: var(--muted);
}
.planner-intro__option label {
    white-space: nowrap;
}
.planner-intro__option select {
    min-width: 120px;
}
.planner-intro__folders {
    margin-top: var(--s3);
    text-align: left;
}
.planner-intro__folders-label {
    display: block;
    font-weight: 600;
    font-size: var(--fs2);
    margin-bottom: var(--s1);
    color: var(--text);
}
.planner-intro__folders-hint {
    font-size: var(--fs1);
    color: var(--muted);
    margin-bottom: var(--s2);
    line-height: 1.4;
}
.planner-intro__folders-actions {
    display: flex;
    gap: var(--s1);
    margin-bottom: var(--s2);
}
.planner-intro__folder-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s1);
    max-height: 240px;
    overflow-y: auto;
    padding: var(--s2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r2);
}
.planner-intro__folder-item {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s2);
    border-radius: var(--r1);
    cursor: pointer;
    font-size: var(--fs2);
    transition: background-color .15s ease;
    user-select: none;
}
.planner-intro__folder-item:hover {
    background: var(--surface-hover, rgba(255,255,255,.06));
}
.planner-intro__folder-item input[type="checkbox"] {
    accent-color: var(--accent);
    flex-shrink: 0;
}
.planner-intro__folder-item svg {
    flex-shrink: 0;
    color: var(--muted);
}
.planner-intro__folder-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-progress {
    padding: var(--s4) 0;
    text-align: center;
}
.planner-progress__bar {
    height: 6px;
    background: var(--surface);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--s3);
}
.planner-progress__fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.planner-progress__info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s2);
}
.planner-progress__step {
    font-weight: 600;
    color: var(--bright);
    font-size: var(--fs3);
}
.planner-progress__label {
    color: var(--text);
    font-size: var(--fs2);
}
.planner-progress__spinner {
    margin-top: var(--s3);
}

.planner-error {
    padding: var(--s4);
    text-align: center;
    color: var(--danger);
}

.planner-logs {
    margin-top: var(--s3);
    border-top: 1px solid var(--border-subtle);
}
.planner-logs > summary {
    cursor: pointer;
    padding: var(--s2) 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    user-select: none;
}
.planner-logs > summary:hover {
    color: var(--text-secondary);
}
.planner-logs__content {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r2);
    padding: var(--s2) var(--s3);
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: pre;
    margin-bottom: var(--s2);
}

.planner-review {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.planner-review::-webkit-scrollbar { width: 6px; }
.planner-review::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.planner-review::-webkit-scrollbar-track { background: transparent; }
.planner-review__summary {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--surface);
    border-radius: var(--r2);
    margin-bottom: var(--s3);
    flex-wrap: wrap;
}
.planner-review__summary strong {
    flex: 1;
    min-width: 0;
    color: var(--bright);
    word-break: break-word;
}
.planner-review__total {
    font-size: var(--fs2);
    color: var(--accent);
    font-weight: 600;
}
.planner-review__lines {
    font-size: var(--fs2);
    color: var(--muted);
    font-family: var(--font-mono, monospace);
}

.planner-review__list {
    min-width: 0;
    max-width: 100%;
}
.planner-review__milestone {
    margin-bottom: var(--s3);
}
.planner-review__milestone-header {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r2) var(--r2) 0 0;
}
.planner-review__milestone-title {
    font-weight: 600;
    color: var(--bright);
}

.planner-review__tasks {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--r2) var(--r2);
}

.planner-review__task {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s2) var(--s3);
    padding-right: calc(var(--s3) + 28px);
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: opacity 0.3s ease, background 0.2s ease;
}
.planner-review__task:last-child { border-bottom: none; }
.planner-review__task:hover { background: var(--surface); }

.planner-review__task--readonly {
    opacity: 0.5;
    background: var(--surface);
    pointer-events: none;
    padding-right: var(--s3);
}
.planner-review__task--removed {
    opacity: 0.3;
    text-decoration: line-through;
}
.planner-review__task--removed .planner-review__task-remove {
    opacity: 1;
    pointer-events: auto;
}

.planner-review__task-main {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}
.planner-review__task-title {
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}
.planner-review__task-meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
    font-size: var(--fs2);
}
.planner-review__task-time {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.planner-review__task-assignee {
    color: var(--muted);
}
.planner-review__task-desc {
    display: block;
    width: 100%;
    margin-top: 2px;
    color: var(--muted);
}
.planner-review__task-remove {
    position: absolute;
    top: var(--s2);
    right: var(--s2);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.planner-review__task:hover .planner-review__task-remove { opacity: 1; }

/* Responsive */
@media (max-width: 1024px) {
    .planner-review__task-remove {
        opacity: 1;
    }
    .planner-review__summary {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Planner button states */
.planner-btn--running {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
    animation: plannerBtnPulse 2s ease-in-out infinite;
}
.planner-btn--running:hover {
    background: var(--warning);
    border-color: var(--warning);
}
.planner-btn--running svg {
    animation: spin 1.5s linear infinite;
}
.planner-btn--result-ready {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    animation: plannerBtnReady 1.5s ease-in-out infinite;
}
.planner-btn--result-ready:hover {
    background: var(--success);
    border-color: var(--success);
}

@keyframes plannerBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--warning-rgb, 234, 179, 8), 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(var(--warning-rgb, 234, 179, 8), 0); }
}
@keyframes plannerBtnReady {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--success-rgb, 34, 197, 94), 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(var(--success-rgb, 34, 197, 94), 0); }
}

/* Planner inline edit */
.planner-edit { cursor: pointer; border-radius: var(--r1); transition: background 0.15s; display: inline-block; padding: 1px 4px; margin: -1px -4px; }
.planner-edit:hover { background: var(--surface); }
.planner-edit--active { background: transparent; padding: 0; margin: 0; }
.planner-edit__input {
    font: inherit; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r1); padding: 2px var(--s1); width: 100%; color: var(--text);
    box-sizing: border-box;
}
.planner-edit__input:focus { border-color: var(--accent); outline: none; }
textarea.planner-edit__input { min-height: 48px; resize: vertical; }
select.planner-edit__input { cursor: pointer; }
.planner-review__task--readonly .planner-edit,
.planner-review__task--removed .planner-edit { pointer-events: none; cursor: default; }
.planner-review__task--readonly .planner-edit:hover,
.planner-review__task--removed .planner-edit:hover { background: transparent; }
.planner-review__task-details { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s1); }
.planner-review__task-details-row { display: flex; align-items: flex-start; gap: var(--s1); }
.planner-review__task-details-label { font-size: 0.75rem; color: var(--text-muted); min-width: 40px; padding-top: 2px; }
.planner-review__task-details-value { flex: 1; font-size: 0.85rem; min-width: 0; word-break: break-word; white-space: pre-wrap; }
.planner-review__milestone-details { display: flex; gap: var(--s2); margin-top: var(--s1); flex-wrap: wrap; }
.planner-review__milestone-desc { font-size: 0.85rem; color: var(--text-muted); flex: 1; min-width: 0; word-break: break-word; }
.planner-review__milestone-deadline { font-size: 0.85rem; color: var(--text-muted); }

/* ── Planner task group borders ──────────────────────────────── */
.planner-review__task--group-coding { border-left: 3px solid var(--accent); }
.planner-review__task--group-other_work { border-left: 3px solid var(--warning); }
.planner-review__task--group-organizational { border-left: 3px solid var(--muted); }

/* ── Planner group bar ──────────────────────────────────────── */
.planner-review__groups {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--surface);
    border-radius: var(--r2);
    margin-bottom: var(--s3);
    flex-wrap: wrap;
}
.planner-review__group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s1);
    font-size: var(--fs2);
}
.planner-review__group-item-row {
    display: flex;
    align-items: center;
    gap: var(--s1);
}
.planner-review__group-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.planner-review__group-label {
    font-weight: 500;
    color: var(--text);
}
.planner-review__group-count {
    color: var(--text-muted);
}
.planner-review__group-mult {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 2px;
}
.planner-review__group-mult-input {
    width: 52px;
    padding: 2px 4px;
    font: inherit;
    font-size: var(--fs2);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r1);
    color: var(--text);
    text-align: center;
}
.planner-review__group-mult-input:focus {
    border-color: var(--accent);
    outline: none;
}
.planner-review__group-time {
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.planner-review__group-item[data-group="coding"] .planner-review__group-time { color: var(--accent); }
.planner-review__group-item[data-group="other_work"] .planner-review__group-time { color: var(--warning); }
.planner-review__group-item[data-group="organizational"] .planner-review__group-time { color: var(--muted); }
@media (max-width: 1024px) {
    .planner-review__groups {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s2);
    }
    .planner-review__group-item {
        flex-direction: row;
        gap: var(--s2);
    }
    .planner-review__group-time {
        font-size: 0.95rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .planner-review__task-details-row {
        flex-direction: column;
        gap: 2px;
    }

    .planner-review__milestone-details {
        flex-direction: column;
    }

    .planner-review {
        contain: layout style;
    }
}

/* ── AI Team Assignment Loading Modal ─────────────────────────── */
.ai-assign-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
    padding: var(--s6) var(--s4);
    text-align: center;
}
.ai-assign-loading__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.ai-assign-loading__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text);
}
.ai-assign-loading__text {
    font-size: var(--fs2);
    color: var(--text-muted);
    max-width: 320px;
    line-height: 1.5;
}
.ai-assign-loading__dots::after {
    content: '';
    animation: ai-assign-dots 1.5s steps(4, end) infinite;
}
@keyframes ai-assign-dots {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* ── Task Summary Accordion (Team Detail) ───────────────────── */

.task-summary { display:flex; flex-direction:column; gap:var(--s1); }

.task-summary-project__header {
    display:flex; align-items:center; gap:var(--s2);
    width:100%; padding:var(--s2) var(--s3);
    background:var(--bg-alt); border:1px solid var(--border);
    border-radius:var(--radius, 8px); cursor:pointer;
    font:inherit; color:var(--text); text-align:left;
    transition:background .15s;
}
.task-summary-project__header:hover { background:var(--bg-hover, var(--border)); }

.task-summary-project__chevron {
    display:flex; align-items:center; transition:transform .2s;
}
.task-summary-project.is-open > .task-summary-project__header .task-summary-project__chevron {
    transform:rotate(90deg);
}

.task-summary-project__title { flex:1; font-weight:600; }

.task-summary-project__stats {
    font-size:var(--fs1, .8125rem); color:var(--muted); white-space:nowrap;
}

.task-summary-project__body {
    display:none; padding:var(--s1) 0 var(--s1) var(--s3);
}
.task-summary-project.is-open > .task-summary-project__body { display:block; }

.task-summary-phase { margin-bottom:var(--s2); }

.task-summary-phase__header {
    display:flex; align-items:center; gap:var(--s2);
    padding:var(--s1) 0;
    font-weight:500; font-size:var(--fs2, .875rem);
    border-bottom:1px solid var(--border);
}
.task-summary-phase__name { flex-shrink:0; }

.task-summary-task {
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--s1) var(--s2);
    font-size:var(--fs1, .8125rem);
    border-bottom:1px dashed var(--border);
}
.task-summary-task:last-child { border-bottom:none; }
.task-summary-task__title { flex:1; color:var(--text); }
.task-summary-task__time { color:var(--muted); white-space:nowrap; }

/* ── Responsive Branding ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar__logo-text {
        font-size: 0.7rem;
    }
}