/* ── CSS VARS FOR WORLD MAP (theme-aware) ── */
:root {
    --wm-ocean: #C8DCF0;
    --wm-land: #D4C9A8;
    --wm-land-stroke: #B8AA88;
    --wm-night: #1A1F3A;
    --wm-grid: #8899BB;
    --wm-label: #556688;
    --wm-pin-border: #FFFFFF;
    --wm-tooltip-bg: #FFFFFF;
    --wm-tooltip-border: #E4E4EE;
    --wm-tooltip-text1: #0D0D1A;
    --wm-tooltip-text2: #3D3D5C;
}

[data-theme="dark"] {
    --wm-ocean: #0D1B2A;
    --wm-land: #2A3040;
    --wm-land-stroke: #3A4055;
    --wm-night: #050812;
    --wm-grid: #2A3550;
    --wm-label: #446688;
    --wm-pin-border: #12121E;
    --wm-tooltip-bg: #1A1A2E;
    --wm-tooltip-border: #222240;
    --wm-tooltip-text1: #F0F0FA;
    --wm-tooltip-text2: #AEAECE;
}

/* ── CHIPS / BADGES ──────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: var(--r-full);
    background: var(--c-surface-2);
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
    white-space: nowrap;
}

.chip--green {
    background: var(--c-success-bg);
    color: var(--c-success);
    border-color: rgba(5, 150, 105, .2);
}

.chip--blue {
    background: var(--c-info-bg);
    color: var(--c-info);
    border-color: rgba(37, 99, 235, .2);
}

.chip--yellow {
    background: var(--c-warning-bg);
    color: var(--c-warning);
    border-color: rgba(217, 119, 6, .2);
}

.chip--red {
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border-color: rgba(220, 38, 38, .2);
}

/* Pain chips */
.chip--pain-0 {
    background: var(--c-success-bg);
    color: var(--c-success);
    border-color: rgba(5, 150, 105, .2);
}

.chip--pain-low {
    background: #F0FDF4;
    color: #166534;
    border-color: rgba(22, 101, 52, .2);
}

.chip--pain-mid {
    background: var(--c-warning-bg);
    color: var(--c-warning);
    border-color: rgba(217, 119, 6, .2);
}

.chip--pain-high {
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border-color: rgba(220, 38, 38, .2);
}

.chip--pain-block {
    background: #1A0808;
    color: #FF6B6B;
    border-color: rgba(255, 107, 107, .2);
}

[data-theme="light"] .chip--pain-block {
    background: var(--c-danger-bg);
    color: var(--c-danger);
}

/* ── AVATAR ──────────────────────────────── */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    font-weight: 700;
    font-family: var(--font);
    flex-shrink: 0;
    user-select: none;
    letter-spacing: -0.02em;
}

.avatar--sm {
    width: 28px;
    height: 28px;
    font-size: 10px;
    border-radius: 6px;
}

.avatar--md {
    width: 40px;
    height: 40px;
    font-size: 14px;
    border-radius: 10px;
}

.avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 18px;
    border-radius: 12px;
}

.av-0 {
    background: linear-gradient(135deg, #5B4FE9, #8B7FFF);
    color: #fff;
}

.av-1 {
    background: linear-gradient(135deg, #E84393, #FF88BB);
    color: #fff;
}

.av-2 {
    background: linear-gradient(135deg, #059669, #34D399);
    color: #fff;
}

.av-3 {
    background: linear-gradient(135deg, #D97706, #FCD34D);
    color: #fff;
}

.av-4 {
    background: linear-gradient(135deg, #7C3AED, #A78BFA);
    color: #fff;
}

.av-5 {
    background: linear-gradient(135deg, #EA580C, #FB923C);
    color: #fff;
}

.av-6 {
    background: linear-gradient(135deg, #2563EB, #60A5FA);
    color: #fff;
}

.av-7 {
    background: linear-gradient(135deg, #DC2626, #F87171);
    color: #fff;
}

/* ── FORMS ───────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

@media (max-width: 480px) {
    .field-row {
        grid-template-columns: 1fr;
    }
}

.field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.field-required {
    color: var(--c-danger);
}

.field-optional {
    font-size: 10px;
    font-weight: 400;
    color: var(--c-text-3);
    text-transform: none;
    letter-spacing: 0;
}

.field-input,
.field-select {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--c-text-1);
    background: var(--c-surface-2);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    outline: none;
    transition:
        border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);
    line-height: 1.5;
}

.field-input:focus,
.field-select:focus {
    border-color: var(--c-accent);
    background: var(--c-surface);
    box-shadow: 0 0 0 3px rgba(91, 79, 233, .12);
}

.field-input::placeholder {
    color: var(--c-text-3);
}

.field-input.is-invalid {
    border-color: var(--c-danger);
}

.field-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.field-error {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--c-danger);
    padding: 5px 10px;
    background: var(--c-danger-bg);
    border: 1px solid rgba(220, 38, 38, .2);
    border-radius: var(--r-sm);
}

.field-error svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    stroke: var(--c-danger);
    fill: none;
    stroke-width: 2;
}

/* ── SEARCHABLE TIMEZONE SELECT ──────────── */
.tz-select-wrap {
    position: relative;
}

.tz-input {
    width: 100%;
    padding: 9px 36px 9px 12px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--c-text-1);
    background: var(--c-surface-2);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    outline: none;
    cursor: pointer;
    transition:
        border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
    line-height: 1.5;
}

.tz-input:focus {
    border-color: var(--c-accent);
    background: var(--c-surface);
    box-shadow: 0 0 0 3px rgba(91, 79, 233, .12);
    cursor: text;
}

.tz-input::placeholder {
    color: var(--c-text-3);
}

.tz-input.is-invalid {
    border-color: var(--c-danger);
}

.tz-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: var(--c-text-3);
    fill: none;
    stroke-width: 2;
    pointer-events: none;
    transition: transform var(--t-base) var(--ease);
}

.tz-select-wrap.is-open .tz-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.tz-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--c-surface);
    border: 1.5px solid var(--c-accent);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    max-height: 240px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    overscroll-behavior: contain;
}

.tz-dropdown.is-open {
    display: flex;
    animation: dropdownIn 0.18s var(--ease-out) both;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tz-option {
    padding: 9px 14px;
    font-size: 13px;
    color: var(--c-text-1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
    transition: background var(--t-fast);
    line-height: 1.4;
}

.tz-option:last-child {
    border-bottom: none;
}

.tz-option:hover,
.tz-option.is-focused {
    background: var(--c-surface-2);
    color: var(--c-accent);
}

.tz-option.is-selected {
    background: var(--c-info-bg);
    color: var(--c-accent);
    font-weight: 600;
}

.tz-option-offset {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--c-text-3);
    flex-shrink: 0;
}

.tz-no-results {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--c-text-3);
}

/* ── FIELD SELECT ── */
.field-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237878A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 32px;
    cursor: pointer;
}

/* ── AVATAR PREVIEW ──────────────────────── */
.avatar-preview-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}

.avatar-preview {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, #5B4FE9, #8B7FFF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    transition: background var(--t-base);
}

.avatar-preview-hint {
    font-size: 12px;
    color: var(--c-text-3);
}

/* ── ALERTS ── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid;
    font-size: 13px;
    line-height: 1.65;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.alert>svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alert-body {
    flex: 1;
    min-width: 0;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.alert-title {
    font-weight: 700;
    font-size: 13px;
    display: block;
    color: inherit;
    line-height: 1.4;
}

.alert-text {
    font-size: 12px;
    display: block;
    opacity: 0.88;
    line-height: 1.6;
    color: inherit;
}

.alert--success {
    background: #ECFDF5;
    border-color: rgba(5, 150, 105, 0.35);
    color: #065F46;
}

[data-theme="dark"] .alert--success {
    background: rgba(5, 150, 105, 0.12);
    border-color: rgba(5, 150, 105, 0.3);
    color: #34D399;
}

.alert--warning {
    background: #FFFBEB;
    border-color: rgba(217, 119, 6, 0.35);
    color: #92400E;
}

[data-theme="dark"] .alert--warning {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.3);
    color: #FCD34D;
}

.alert--danger {
    background: #FEF2F2;
    border-color: rgba(220, 38, 38, 0.35);
    color: #991B1B;
}

[data-theme="dark"] .alert--danger {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
    color: #FCA5A5;
}

.alert--info {
    background: #EFF6FF;
    border-color: rgba(37, 99, 235, 0.35);
    color: #1E3A8A;
}

[data-theme="dark"] .alert--info {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.3);
    color: #93C5FD;
}

/* ════════════════════════════════════════
   WORLD MAP TOOLTIP
════════════════════════════════════════ */

/* The SVG tooltip group  */
.wm-tooltip-group {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    isolation: isolate;
}

.wm-tooltip-group.is-active {
    opacity: 1;
}

/* HTML tooltip card (replaces SVG foreignObject approach) */
.wm-html-tooltip {
    position: absolute;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.97);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
    z-index: 100;
    min-width: 160px;
    max-width: 220px;
    top: 0;
    left: 0;
}

.wm-html-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wm-html-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--c-surface);
}

.wm-html-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--c-border);
    margin-top: 1px;
}

.wm-tooltip-city {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-text-1);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.wm-tooltip-city-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wm-tooltip-members {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wm-tooltip-member {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--c-text-2);
    line-height: 1.3;
}

.wm-tooltip-member-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--c-accent);
    font-weight: 600;
    margin-left: auto;
    flex-shrink: 0;
}

/* Map base image — theme aware */
.wm-base-image {
    /* Light mode: natural colors */
    filter: saturate(0.9) brightness(1.0);
    transition: filter var(--t-slow);
}

[data-theme="dark"] .wm-base-image {
    /* Dark mode: desaturate and darken slightly */
    filter: saturate(0.6) brightness(0.55) hue-rotate(180deg) invert(1) hue-rotate(180deg);
}

/* ════════════════════════════════════════
   POST-SCHEDULE ACTION PANEL
════════════════════════════════════════ */
.post-schedule-panel {
    background: var(--c-success-bg);
    border: 1.5px solid rgba(5, 150, 105, 0.3);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    animation: flashSuccess 0.6s ease forwards;
}

[data-theme="dark"] .post-schedule-panel {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.25);
}

.psp-icon {
    width: 44px;
    height: 44px;
    background: var(--c-success);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.psp-icon svg {
    width: 22px;
    height: 22px;
    stroke: white;
    fill: none;
    stroke-width: 2.5;
}

.psp-body {
    flex: 1;
    min-width: 0;
}

.psp-title {
    font-size: 14px;
    font-weight: 700;
    color: #065F46;
    margin-bottom: 3px;
}

[data-theme="dark"] .psp-title {
    color: #34D399;
}

.psp-desc {
    font-size: 12px;
    color: var(--c-text-2);
    line-height: 1.5;
}

.psp-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════
   SCHEDULED SUGGESTION ITEM STATE
════════════════════════════════════════ */
.suggestion-item.is-scheduled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    border-color: rgba(5, 150, 105, 0.3);
    background: linear-gradient(135deg,
            rgba(5, 150, 105, 0.04) 0%,
            var(--c-surface) 100%);
}

.si-scheduled-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--c-success-bg);
    border: 1px solid rgba(5, 150, 105, 0.25);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: var(--c-success);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-theme="dark"] .si-scheduled-badge {
    background: rgba(5, 150, 105, 0.15);
    color: #34D399;
}

.si-scheduled-badge svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

/* ── TOGGLE SWITCH ───────────────────────── */
.toggle-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.toggle-wrap input {
    display: none;
}

.toggle-track {
    width: 40px;
    height: 22px;
    background: var(--c-surface-3);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-full);
    position: relative;
    transition: all var(--t-base) var(--ease);
    flex-shrink: 0;
}

.toggle-track::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c-text-3);
    top: 3px;
    left: 3px;
    transition: all var(--t-base) var(--ease-bounce);
}

.toggle-wrap input:checked+.toggle-track {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

.toggle-wrap input:checked+.toggle-track::after {
    transform: translateX(18px);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-2);
}

/* ── MODALS ──────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: none;
    transition:
        background var(--t-base) var(--ease),
        backdrop-filter var(--t-base) var(--ease);
}

.modal-overlay.is-open {
    background: rgba(0, 0, 0, .52);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: all;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 910;
    width: calc(100% - 32px);
    max-width: 480px;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 28px)) scale(0.95);
    pointer-events: none;
    transition:
        opacity var(--t-base) var(--ease-out),
        transform var(--t-base) var(--ease-out);
}

.modal.is-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

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

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

.modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text-1);
    letter-spacing: -0.02em;
}

.modal-subtitle {
    font-size: 12px;
    color: var(--c-text-3);
    margin-top: 3px;
}

.modal-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text-3);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--t-fast) var(--ease);
}

.modal-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

.modal-close:hover {
    background: var(--c-danger-bg);
    border-color: rgba(220, 38, 38, .3);
    color: var(--c-danger);
}

.modal-body {
    padding: var(--sp-6);
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.modal-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-shrink: 0;
    background: var(--c-surface-2);
}

/* ── TOASTS ──────────────────────────────── */
#toastPortal {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--sp-2);
    max-width: 360px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    pointer-events: all;
    position: relative;
    overflow: hidden;
    animation: toastIn 0.35s var(--ease-bounce) forwards;
}

.toast.is-leaving {
    animation: toastOut 0.25s var(--ease) forwards;
}

.toast--success {
    border-left: 3px solid var(--c-success);
}

.toast--warning {
    border-left: 3px solid var(--c-warning);
}

.toast--danger {
    border-left: 3px solid var(--c-danger);
}

.toast--info {
    border-left: 3px solid var(--c-info);
}

.toast::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--brand-grad);
    animation: toastProgress var(--toast-dur, 5s) linear forwards;
}

.toast-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toast--success .toast-icon {
    background: var(--c-success-bg);
    color: var(--c-success);
}

.toast--warning .toast-icon {
    background: var(--c-warning-bg);
    color: var(--c-warning);
}

.toast--danger .toast-icon {
    background: var(--c-danger-bg);
    color: var(--c-danger);
}

.toast--info .toast-icon {
    background: var(--c-info-bg);
    color: var(--c-info);
}

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

.toast-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-1);
    line-height: 1.3;
}

.toast-msg {
    font-size: 12px;
    color: var(--c-text-2);
    margin-top: 1px;
}

.toast-dismiss {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-3);
    border-radius: var(--r-sm);
    transition: all var(--t-fast);
    flex-shrink: 0;
}

.toast-dismiss svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
}

.toast-dismiss:hover {
    background: var(--c-surface-2);
    color: var(--c-text-1);
}

/* ── TEAM CARDS ──────────────────────────── */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--sp-4);
}

.team-card {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--t-base) var(--ease),
        box-shadow var(--t-base) var(--ease),
        transform var(--t-base) var(--ease-bounce);
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: var(--brand-grad);
    opacity: 0;
    transition: opacity var(--t-base);
}

.team-card:hover {
    border-color: rgba(91, 79, 233, .35);
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(91, 79, 233, .05);
    transform: translateY(-3px);
}

.team-card:hover::before {
    opacity: 1;
}

.team-card.is-active {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-sm), 0 0 0 3px rgba(91, 79, 233, .08);
}

.team-card.is-active::before {
    opacity: 1;
}

.tc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.tc-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,
            rgba(91, 79, 233, .12), rgba(232, 67, 147, .12));
    border: 1px solid rgba(91, 79, 233, .15);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tc-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--c-accent);
    fill: none;
    stroke-width: 2;
}

.tc-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text-1);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.tc-chips {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: 5px;
}

.tc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-3);
}

.tc-date {
    font-size: 11px;
    color: var(--c-text-3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tc-date svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ── MEMBER CARDS ────────────────────────── */
.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-4);
}

.member-card {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    position: relative;
    transition:
        border-color var(--t-base) var(--ease),
        box-shadow var(--t-base) var(--ease),
        transform var(--t-base) var(--ease-bounce);
}

.member-card:hover {
    border-color: rgba(91, 79, 233, .3);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mc-top {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.mc-info {
    flex: 1;
    min-width: 0;
}

.mc-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text-1);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-role {
    font-size: 11px;
    color: var(--c-text-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.mc-clock {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
}

.mc-clock-icon {
    width: 13px;
    height: 13px;
    stroke: var(--c-accent);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.mc-clock-time {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-1);
    flex: 1;
}

.mc-clock-tz {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--c-text-3);
    text-align: right;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    border-top: 1px solid var(--c-border);
    padding-top: var(--sp-3);
}

.mc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-2);
    background: var(--c-surface-2);
    border-radius: var(--r-md);
    text-align: center;
}

.mc-stat-val {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text-1);
    line-height: 1.1;
}

.mc-stat-lbl {
    font-size: 9px;
    font-weight: 600;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

/* ── WORKSPACE HEADER ────────────────────── */
.workspace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-5) var(--sp-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xs);
}

.workspace-header-left {
    flex: 1;
    min-width: 0;
}

.workspace-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--c-text-1);
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-2);
}

.workspace-badges {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.workspace-header-actions {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* ── ANALYZE CTA ─────────────────────────── */
.analyze-cta {
    background: var(--brand-grad);
    border-radius: var(--r-2xl);
    padding: var(--sp-10) var(--sp-8);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.analyze-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 24px 24px;
}

.analyze-cta>* {
    position: relative;
    z-index: 1;
}

.analyze-cta-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-4);
    background: rgba(255, 255, 255, .15);
    border-radius: var(--r-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.analyze-cta-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
    fill: none;
    stroke-width: 1.5;
}

.analyze-cta-title {
    font-size: 22px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-2);
}

.analyze-cta-desc {
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    margin-bottom: var(--sp-6);
    max-width: 420px;
    margin-inline: auto;
    line-height: 1.75;
}

/* ── SUGGESTIONS ─────────────────────────── */
.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.suggestion-item {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    transition:
        border-color var(--t-base) var(--ease),
        box-shadow var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease-bounce);
    position: relative;
    overflow: hidden;
}

.suggestion-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-grad);
    opacity: 0;
    transition: opacity var(--t-base);
}

.suggestion-item:hover {
    border-color: rgba(91, 79, 233, .35);
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);
}

.suggestion-item:hover::before {
    opacity: 1;
}

.suggestion-item.is-best {
    border-color: rgba(5, 150, 105, .4);
    background: linear-gradient(135deg,
            rgba(5, 150, 105, .04) 0%, var(--c-surface) 70%);
}

.suggestion-item.is-best::before {
    background: linear-gradient(180deg, #059669, #34D399);
    opacity: 1;
}

.suggestion-item.is-blocked {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.si-top {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}

.si-rank {
    width: 28px;
    height: 28px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-3);
    flex-shrink: 0;
}

.is-best .si-rank {
    background: var(--c-success-bg);
    border-color: rgba(5, 150, 105, .3);
    color: var(--c-success);
}

.si-time {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text-1);
    letter-spacing: -0.02em;
}

.si-chips {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    flex: 1;
}

.si-members {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-2);
}

.si-member-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 10px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast);
}

.si-member-row:hover {
    border-color: rgba(91, 79, 233, .2);
}

.si-m-info {
    flex: 1;
    min-width: 0;
}

.si-m-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.si-m-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--c-text-3);
}

/* ── PAIN CHART ──────────────────────────── */
.pain-bars {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.pb-row {
    display: grid;
    grid-template-columns: 140px 1fr 80px;
    gap: var(--sp-3);
    align-items: center;
}

.pb-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.pb-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-track {
    height: 8px;
    background: var(--c-surface-2);
    border-radius: var(--r-full);
    overflow: hidden;
    border: 1px solid var(--c-border);
}

.pb-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: var(--brand-grad);
    transform-origin: left;
}

.pb-fill.pb-low {
    background: linear-gradient(90deg, var(--c-success), #34D399);
}

.pb-fill.pb-high {
    background: linear-gradient(90deg, var(--c-warning), var(--c-danger));
}

.pb-val {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--c-text-2);
    text-align: right;
}

/* ── TIMELINE ────────────────────────────── */
.timeline {
    position: relative;
    padding-left: var(--sp-8);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: linear-gradient(to bottom, var(--c-accent), var(--brand-to));
    opacity: 0.2;
    border-radius: var(--r-full);
}

.tl-item {
    position: relative;
    padding-bottom: var(--sp-5);
}

.tl-dot {
    position: absolute;
    left: calc(-1 * var(--sp-8) + 9px);
    top: 12px;
    width: 14px;
    height: 14px;
    background: var(--c-accent);
    border-radius: 50%;
    border: 3px solid var(--c-bg);
}

.tl-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.tl-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.tl-num {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--c-accent);
    background: var(--c-info-bg);
    border: 1px solid rgba(37, 99, 235, .2);
    padding: 2px 8px;
    border-radius: var(--r-full);
}

.tl-meta {
    font-size: 11px;
    color: var(--c-text-3);
    font-family: var(--mono);
}

.tl-members {
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.tl-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: 12px;
    padding: 5px 10px;
    background: var(--c-surface-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
}

.tl-pain {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--c-danger);
}

.tl-total {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--c-text-3);
}

/* ── WORLD MAP ───────────────────────────── */
.wm-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.wm-canvas-wrap {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    /* this clips the SVG corners cleanly */
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    background: var(--wm-ocean);
    line-height: 0;
}

.wm-svg {
    width: 100%;
    height: auto;
    display: block;
    min-height: 200px;
}

.wm-tooltip-group {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Info bar */
.wm-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.wm-legend {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.wm-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--c-text-2);
    font-weight: 500;
}

.wm-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.wm-legend-dot--day {
    background: var(--wm-land);
    border: 1px solid var(--wm-land-stroke);
}

.wm-legend-dot--night {
    background: var(--wm-night);
    opacity: 0.8;
}

.wm-legend-dot--pin {
    background: var(--c-accent);
    border-radius: 50%;
}

.wm-utc-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--c-text-3);
    font-weight: 500;
}

.wm-utc-time svg {
    width: 12px;
    height: 12px;
    stroke: var(--c-accent);
    flex-shrink: 0;
}

.wm-utc-val {
    color: var(--c-text-1);
    font-weight: 700;
}

/* Member time chips */
.wm-member-times {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.wm-member-chip {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    transition:
        border-color var(--t-fast),
        box-shadow var(--t-fast);
}

.wm-member-chip:hover {
    border-color: rgba(91, 79, 233, .3);
    box-shadow: var(--shadow-xs);
}

.wm-chip-info {
    display: flex;
    flex-direction: column;
}

.wm-chip-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text-1);
    line-height: 1.2;
}

.wm-chip-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--c-accent);
    font-weight: 600;
}

.wm-chip-offset {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--c-text-3);
    margin-left: var(--sp-1);
    white-space: nowrap;
}

/* ── EMPTY STATES ────────────────────────── */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-16) var(--sp-6);
    text-align: center;
    gap: var(--sp-3);
}

.empty-icon {
    width: 60px;
    height: 60px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--c-text-3);
    fill: none;
    stroke-width: 1.5;
}

.empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text-2);
    letter-spacing: -0.01em;
}

.empty-desc {
    font-size: 13px;
    color: var(--c-text-3);
    max-width: 300px;
    line-height: 1.65;
}

/* ── READ-ONLY SHARE PREVIEW MODAL ──────── */
.readonly-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-warning-bg);
    border: 1px solid rgba(217, 119, 6, .25);
    border-radius: var(--r-lg);
    font-size: 13px;
    color: var(--c-warning);
    font-weight: 500;
    margin-bottom: var(--sp-4);
}

.readonly-banner svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

/* ── ICS DOWNLOAD BUTTON SECTION ─────────── */
.ics-section {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--c-success-bg);
    border: 1px solid rgba(5, 150, 105, .2);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}

.ics-section-text {
    flex: 1;
    min-width: 0;
}

.ics-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-success);
    margin-bottom: 2px;
}

.ics-section-desc {
    font-size: 11px;
    color: var(--c-text-3);
    line-height: 1.4;
}

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 640px) {
    .members-grid {
        grid-template-columns: 1fr;
    }

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

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

    .pb-row {
        grid-template-columns: 1fr;
        gap: var(--sp-1);
    }

    .wm-member-times {
        flex-direction: column;
    }

    #toastPortal {
        bottom: var(--sp-3);
        right: var(--sp-3);
        left: var(--sp-3);
        max-width: none;
    }
}