/* =============================================
   Design Tokens
   ============================================= */
:root {
    --primary:        #6C63FF;
    --primary-dark:   #5B4FE0;
    --primary-dim:    rgba(108, 99, 255, 0.08);
    --bg:             #F8F9FC;
    --surface:        #FFFFFF;
    --border:         #E5E7EB;
    --text:           #111827;
    --text-secondary: #6B7280;
    --text-muted:     #9CA3AF;
    --success:        #10B981;
    --shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.07);
    --shadow-focus:   0 20px 60px rgba(91, 79, 224, 0.38);
    --radius-card:    12px;
    --radius-btn:     8px;
    --radius-pill:    999px;
    --header-h:       64px;
    --focus-grad:     linear-gradient(160deg, #7C6FFF 0%, #5B4FE0 100%);
}

html.dark-mode, body.dark-mode {
    --bg:             #0A0F1E;
    --surface:        #111827;
    --border:         #1E293B;
    --text:           #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted:     #475569;
    --primary:        #818CF8;
    --primary-dark:   #6366F1;
    --primary-dim:    rgba(129, 140, 248, 0.1);
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.5);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.5);
    --shadow-focus:   0 20px 60px rgba(79,70,229,0.5);
}

/* =============================================
   Reset
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background 0.3s, color 0.2s;
}
button { cursor: pointer; font-family: inherit; }
button:active:not(:disabled) { transform: scale(0.98); }
ul { list-style: none; }
textarea { font-family: inherit; }

/* =============================================
   Header
   ============================================= */
.header {
    height: var(--header-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    z-index: 10;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
.logo-text {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.5px;
    color: var(--primary);
}

.header-date {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.header-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}

.icon-btn {
    width: 36px; height: 36px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border);
    background: transparent;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: border-color 0.15s, background 0.15s;
}
.icon-btn:hover { border-color: var(--primary); background: var(--primary-dim); }

#user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--radius-pill);
    background: var(--primary-dim);
    border: 1px solid var(--border);
}
#user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
#user-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
}

/* =============================================
   App Grid
   ============================================= */
.app-grid {
    display: grid;
    grid-template-columns: 300px 1fr 380px;
    gap: 16px;
    padding: 16px 20px;
    height: calc(100vh - var(--header-h));
    overflow: hidden;
}

.panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    position: relative;
}

/* =============================================
   Task Panel
   ============================================= */
.task-panel {
    background: var(--surface);
    padding: 16px 14px;
    gap: 12px;
}

.panel-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-count {
    background: var(--primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    letter-spacing: 0;
}

.task-form {
    position: relative;
    display: flex;
}
.task-form input {
    width: 100%;
    padding: 10px 44px 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-btn);
    font-size: 0.875rem;
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: border-color 0.15s;
}
.task-form input:focus { border-color: var(--primary); }
.task-form input::placeholder { color: var(--text-muted); }

.task-add-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 6px;
    border: none;
    background: var(--primary);
    color: white;
    font-size: 1.25rem;
    font-weight: 400;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.task-add-btn:hover { opacity: 0.85; }
.task-add-btn:active { transform: translateY(-50%) scale(0.95) !important; }

.task-scroll {
    flex: 1;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
}

.task-list { display: flex; flex-direction: column; gap: 2px; }

.task-empty {
    padding: 24px 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.7;
}
.task-empty-icon {
    font-size: 1.7rem;
    display: block;
    margin-bottom: 8px;
    opacity: 0.45;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 6px;
    border-radius: 8px;
    transition: background 0.1s;
    cursor: default;
    position: relative;
}
.task-item:hover { background: var(--bg); }
.task-item.active-task { background: var(--primary-dim); }

.task-check {
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 6px;
    border: 2px solid var(--border);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    color: white;
    font-size: 0.7rem;
}
.task-check:hover { border-color: var(--primary); }
.task-check.checked { background: var(--success); border-color: var(--success); }

.task-title {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}
.task-title.done { text-decoration: line-through; color: var(--text-muted); }

.task-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.1s;
    flex-shrink: 0;
}
.task-item:hover .task-actions { opacity: 1; }

.task-focus-btn, .task-del-btn, .task-break-btn {
    width: 26px; height: 26px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.1s, color 0.1s;
}
.task-focus-btn:hover { background: var(--primary); color: white; }
.task-del-btn:hover   { background: #FEE2E2; color: #EF4444; }
.task-break-btn:hover { background: #FEF3C7; color: #D97706; }
.task-focus-btn.on    { background: var(--primary); color: white; opacity: 1; }

.done-section { margin-top: 10px; }
.done-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: background 0.1s;
}
.done-toggle:hover { background: var(--bg); }
.done-count-badge {
    background: var(--border);
    color: var(--text-muted);
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    letter-spacing: 0;
}
.done-list { margin-top: 4px; }
.done-list .task-title { opacity: 0.5; }

/* =============================================
   Focus Panel (Timer)
   ============================================= */
.focus-panel {
    background: var(--focus-grad);
    align-items: center;
    justify-content: center;
    padding: 22px 28px;
    gap: 14px;
    color: white;
    transition: box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-focus);
}

.focus-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 10%, rgba(255,255,255,0.07) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 90%, rgba(0,0,0,0.07) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.focus-panel > * { position: relative; z-index: 1; }

.focus-panel.mode-short,
.focus-panel.mode-break {
    --focus-grad: linear-gradient(160deg, #059669 0%, #0891B2 100%);
    --shadow-focus: 0 20px 60px rgba(5,150,105,0.38);
}
.focus-panel.mode-long {
    --focus-grad: linear-gradient(160deg, #1D4ED8 0%, #6D28D9 100%);
    --shadow-focus: 0 20px 60px rgba(29,78,216,0.38);
}
.focus-panel.wasted {
    --focus-grad: linear-gradient(160deg, #7C2D2D 0%, #4A1818 100%);
    --shadow-focus: 0 20px 60px rgba(124,45,45,0.4);
}

@keyframes focusPulse {
    0%, 100% { box-shadow: 0 20px 60px rgba(91,79,224,0.38); }
    50%       { box-shadow: 0 20px 80px rgba(91,79,224,0.65), 0 0 60px rgba(108,99,255,0.18); }
}
@keyframes focusPulseGreen {
    0%, 100% { box-shadow: 0 20px 60px rgba(5,150,105,0.38); }
    50%       { box-shadow: 0 20px 80px rgba(5,150,105,0.65), 0 0 60px rgba(5,150,105,0.18); }
}
.focus-panel.timer-running                         { animation: focusPulse      4s ease-in-out infinite; }
.focus-panel.mode-short.timer-running,
.focus-panel.mode-break.timer-running              { animation: focusPulseGreen 4s ease-in-out infinite; }
.focus-panel.wasted.timer-running                  { animation: none; }

.focus-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}
.focus-icon-btn {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.focus-icon-btn:hover { background: rgba(255,255,255,0.22); }

.mode-tabs {
    display: flex;
    background: rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    flex: 1;
}
.mode-tab {
    flex: 1;
    padding: 6px 10px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.65);
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.15s;
}
.mode-tab:hover { color: white; }
.mode-tab.active { background: rgba(255,255,255,0.24); color: white; }

/* Two-button Focus / Break toggle */
.mode-toggle {
    display: flex;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 4px;
    gap: 3px;
}
.mode-tog {
    flex: 1;
    padding: 7px 22px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.15s;
}
.mode-tog:hover { color: white; }
.mode-tog.active { background: rgba(255,255,255,0.22); color: white; }
.mode-tog.active[data-mode="wasted"] { background: rgba(239,68,68,0.22); color: #FCA5A5; }
.mode-tog.running::after {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    margin-left: 5px;
    vertical-align: middle;
    animation: tabPulse 1.5s ease-in-out infinite;
}
.mode-tog.running[data-mode="wasted"]::after { background: #FCA5A5; }
@keyframes tabPulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1.0; }
}

/* Three icon control buttons */
.timer-icon-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.t-icon-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.16);
    color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s, opacity 0.15s;
    flex-shrink: 0;
}
.t-icon-btn:hover:not(.t-icon-dim) { background: rgba(255,255,255,0.26); transform: scale(1.06); }
.t-icon-btn:active:not(.t-icon-dim) { transform: scale(0.95) !important; }
.t-icon-btn.t-icon-dim {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

/* Count-up display (wasted state) */
.ring-time.count-up { color: #FCA5A5; }

/* Timer Ring */
.ring-wrap {
    position: relative;
    width: 210px;
    height: 210px;
}
.ring-svg { width: 100%; height: 100%; }
.ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.14);
    stroke-width: 5;
}
.ring-fill {
    fill: none;
    stroke: white;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 603;
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
    transition: stroke-dashoffset 1s linear, filter 0.5s;
}
.timer-running .ring-fill {
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.45));
}
.ring-inner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.ring-time {
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    cursor: default;
    color: white;
    letter-spacing: -2px;
    line-height: 1;
}
.ring-time.ring-time-long { font-size: 2.2rem; letter-spacing: -1px; }

.timer-edit-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.55);
    color: white;
    font-size: 2.8rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    width: 130px;
    text-align: center;
    outline: none;
    letter-spacing: -2px;
    -moz-appearance: textfield;
}
.timer-edit-input::-webkit-inner-spin-button,
.timer-edit-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.ring-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
}

.active-task-row {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 7px 13px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    max-width: 340px;
    width: 100%;
}
.active-task-row svg { flex-shrink: 0; opacity: 0.65; }
#active-task-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Timer Controls */
.timer-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }

.timer-start-btn {
    height: 52px;
    padding: 0 40px;
    border-radius: var(--radius-pill);
    border: none;
    background: white;
    color: #5B4FE0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    min-width: 140px;
    transition: all 0.15s;
}
.timer-start-btn:hover { background: rgba(255,255,255,0.9); }
.timer-start-btn:active { transform: scale(0.97) !important; }
.timer-start-btn.running {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 2px solid rgba(255,255,255,0.42);
}
.timer-start-btn.running:hover { background: rgba(255,255,255,0.22); }

.task-est-edit {
    width: 52px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 5px;
    border: 1.5px solid var(--primary);
    border-radius: 5px;
    text-align: center;
    background: var(--surface);
    color: var(--text);
    outline: none;
    flex-shrink: 0;
}

.task-title-edit {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
    border: 2px solid #6C63FF;
    border-radius: 4px;
    padding: 0 4px;
    outline: none;
    line-height: 1.4;
    font-family: inherit;
}

.task-title:not(.done) { cursor: text; }

.record-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.record-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.82);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.15s;
    cursor: pointer;
}
.record-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.5);
    color: white;
}

.focus-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 10px 22px;
    border: 1px solid rgba(255,255,255,0.1);
}
.focus-stat { text-align: center; }
.focus-stat-val {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    line-height: 1;
}
.focus-stat-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-top: 3px;
    display: block;
}
.focus-stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.16);
}

/* =============================================
   Today's Time Tracking Panel (task sidebar)
   ============================================= */
.today-track {
    border-top: 1px solid var(--border);
    padding: 11px 14px 12px;
    flex-shrink: 0;
}
.today-track-hdr {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.today-track-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    min-height: 0;
}
.ttr-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.ttr-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ttr-label { flex: 1; font-weight: 500; }
.ttr-val   { font-weight: 700; color: var(--text); font-size: 0.75rem; }
.today-track-bar {
    height: 5px;
    border-radius: 4px;
    background: var(--border);
    display: flex;
    overflow: hidden;
    margin-bottom: 7px;
}
.ttb-seg { height: 100%; transition: flex 0.4s ease; min-width: 0; }
.ttb-focus  { background: #6C63FF; }
.ttb-break  { background: #10B981; }
.ttb-wasted { background: #EF4444; }
.today-track-total {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.sound-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
.sound-btn {
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.09);
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
    text-decoration: none;
    color: inherit;
}
.sound-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.sound-btn.active {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 14px rgba(255,255,255,0.2);
}
.sound-gated {
    position: relative;
    opacity: 0.6;
}
.sound-gated::after {
    content: '✦';
    position: absolute;
    top: -5px; right: -5px;
    font-size: 0.5rem;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    width: 13px; height: 13px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

/* =============================================
   Chat Panel
   ============================================= */
.chat-panel {
    background: var(--surface);
    gap: 0;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.chat-avatar {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(108,99,255,0.3);
}
.chat-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}
.chat-status {
    font-size: 0.72rem;
    color: var(--success);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
.chat-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}
.chat-status.thinking { color: var(--primary); }
.chat-status.thinking::before {
    background: var(--primary);
    animation: statusPulse 1s ease-in-out infinite;
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

/* Sign-in prompt (in chat panel) */
.signin-prompt {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
    padding: 24px;
}
.signin-icon { font-size: 2.5rem; margin-bottom: 12px; }
.signin-prompt p { font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); }
.signin-prompt strong { color: var(--text); }
.signin-sub { font-size: 0.78rem; margin-top: 6px; opacity: 0.7; }
.signin-prompt-actions {
    margin-top: 16px;
}
.signin-cta-primary {
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}
.signin-cta-primary:hover { opacity: 0.88; }

/* Bubbles */
.ai-bubble, .user-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.65;
    max-width: 92%;
    word-break: break-word;
}
.ai-bubble {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px 16px 16px 4px;
    align-self: flex-start;
    color: var(--text);
}
.user-bubble {
    background: var(--primary);
    color: white;
    border-radius: 16px 16px 4px 16px;
    align-self: flex-end;
}
.bubble-sender {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    opacity: 0.5;
    display: block;
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ai-bubble, .user-bubble { animation: fadeSlideIn 0.2s ease; }

.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px 16px 16px 4px;
    align-self: flex-start;
    width: fit-content;
}
.typing-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-5px); }
}

.suggestions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
    padding: 8px 14px 10px;
}
.sug-btn {
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--primary);
    font-size: 0.77rem;
    font-weight: 600;
    transition: all 0.15s;
}
.sug-btn:hover { border-color: var(--primary); background: var(--primary-dim); }

/* Chat Input — pill-shaped */
.chat-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    margin: 12px;
    padding: 8px 8px 8px 16px;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.chat-input-wrap:focus-within { border-color: var(--primary); }
.chat-input-wrap textarea {
    flex: 1;
    border: none;
    background: none;
    color: var(--text);
    font-size: 0.875rem;
    outline: none;
    resize: none;
    max-height: 100px;
    line-height: 1.5;
    padding: 0;
}
.chat-input-wrap textarea::placeholder { color: var(--text-muted); }
.chat-input-wrap textarea:disabled { opacity: 0.5; }
#send-btn {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.15s;
}
#send-btn:hover:not(:disabled) { opacity: 0.85; }
#send-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* =============================================
   Scrollbars
   ============================================= */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* =============================================
   Dump FAB
   ============================================= */
.dump-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 1.3rem;
    box-shadow: 0 4px 20px rgba(108,99,255,0.45);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    z-index: 100;
}
.dump-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(108,99,255,0.6); }

/* =============================================
   Logout button
   ============================================= */
.logout-btn {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.1s, color 0.1s;
    padding: 0;
    margin-left: -2px;
    flex-shrink: 0;
}
.logout-btn:hover { background: #FEE2E2; color: #EF4444; }

.manage-sub-btn {
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    padding: 3px 8px; border-radius: 20px;
    border: 1.5px solid #6C63FF; color: #6C63FF;
    background: #EEF0FF; cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.manage-sub-btn:hover { background: #6C63FF; color: #fff; }

/* =============================================
   Task estimate badge
   ============================================= */
.task-est {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: default;
}

/* =============================================
   Modals
   ============================================= */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
}
.modal-overlay.open { display: block; }

.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -46%);
    z-index: 201;
    display: none;
    width: 100%;
    max-width: 420px;
    padding: 0 16px;
}
.modal.open {
    display: block;
    animation: modalIn 0.2s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -46%); }
}

.modal-box {
    background: var(--surface);
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0,0,0,0.2);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-header h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}
.modal-close {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: var(--text); }
.modal-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: -8px;
}
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.modal-cta {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
.modal-cta:hover { opacity: 0.88; }

/* Settings rows */
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-row label { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.setting-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-muted);
}
.setting-input-row input {
    width: 60px;
    padding: 6px 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    outline: none;
    font-family: 'JetBrains Mono', monospace;
}
.setting-input-row input:focus { border-color: var(--primary); }

/* Energy modal */
.energy-box { text-align: center; gap: 20px; }
.energy-header { display: flex; flex-direction: column; gap: 4px; }
.energy-title { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.energy-sub { font-size: 0.88rem; color: var(--text-muted); }
.energy-options { display: flex; gap: 10px; }
.energy-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 16px 8px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.energy-btn:hover { border-color: var(--primary); background: var(--primary-dim); transform: translateY(-2px); }
.energy-emoji { font-size: 1.8rem; }
.energy-label { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.energy-btn small { font-size: 0.72rem; color: var(--text-muted); }

/* Brain dump */
.dump-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}
.dump-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    gap: 8px;
}
.dump-item-text { flex: 1; line-height: 1.4; }
.dump-item-time { font-size: 0.7rem; flex-shrink: 0; opacity: 0.6; }
.dump-empty { font-size: 0.82rem; color: var(--text-muted); text-align: center; padding: 8px; }
.modal-body textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    resize: none;
    outline: none;
    line-height: 1.5;
}
.modal-body textarea:focus { border-color: var(--primary); }

/* Upgrade Modal */
.upgrade-box {
    text-align: center;
    gap: 14px;
    padding: 28px 24px;
}
.upgrade-icon-wrap {
    font-size: 2.6rem;
    line-height: 1;
    margin: 4px 0 2px;
}
.upgrade-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.upgrade-pro-btn {
    background: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 100%);
    border-radius: 12px;
    padding: 13px !important;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 20px rgba(108,99,255,0.35);
    transition: opacity 0.15s, transform 0.1s;
}
.upgrade-pro-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.modal-secondary-btn {
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.modal-secondary-btn:hover { border-color: var(--primary); background: var(--primary-dim); }

/* Auth Modal */
.auth-box {
    text-align: center;
    padding: 32px 24px 24px;
    gap: 12px;
    align-items: center;
}
.auth-lock { font-size: 2.2rem; line-height: 1; margin-bottom: 2px; }
.auth-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.3px;
}
.auth-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 4px;
}
.auth-google-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.auth-google-btn:hover { border-color: var(--primary); background: var(--primary-dim); }
.auth-learn-more {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
    display: inline-block;
    margin-top: 4px;
}
.auth-learn-more:hover { color: var(--primary); }

/* =============================================
   Calendar Modal
   ============================================= */
.cal-modal { max-width: 820px; }

.cal-box {
    padding: 20px;
    gap: 16px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cal-nav { display: flex; align-items: center; gap: 10px; }

.cal-month-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    min-width: 168px;
    text-align: center;
}

.cal-nav-btn {
    width: 32px; height: 32px;
    border-radius: var(--radius-btn);
    border: 1.5px solid var(--border);
    background: var(--bg);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.cal-nav-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); }

.cal-toolbar-right { display: flex; gap: 8px; align-items: center; }

.cal-today-btn {
    padding: 5px 14px;
    border-radius: var(--radius-btn);
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.15s;
}
.cal-today-btn:hover { border-color: var(--primary); color: var(--primary); }

.cal-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.cal-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 2px;
    flex-shrink: 0;
}
.cal-weekdays span {
    text-align: center;
    font-size: 0.63rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 0;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    overflow-y: auto;
    align-content: start;
}

.cal-cell {
    border-radius: 8px;
    padding: 5px 4px 4px;
    border: 1.5px solid transparent;
    background: var(--bg);
    cursor: pointer;
    transition: all 0.12s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 54px;
    position: relative;
}
.cal-cell:hover         { border-color: var(--primary); background: var(--primary-dim); }
.cal-cell.today         { border-color: var(--primary); }
.cal-cell.selected      { background: var(--primary-dim); border-color: var(--primary); }
.cal-cell.has-data      { background: rgba(108,99,255,0.06); }
.cal-cell-empty         { cursor: default !important; background: transparent !important; border-color: transparent !important; }

.cal-day-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.cal-cell.today .cal-day-num    { color: var(--primary); }
.cal-cell.selected .cal-day-num { color: var(--primary); }

.cal-minutes-badge {
    font-size: 0.57rem;
    font-weight: 700;
    color: white;
    background: var(--primary);
    border-radius: 4px;
    padding: 1px 4px;
    width: fit-content;
    line-height: 1.4;
}
.cal-tasks-badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--success);
}
.cal-note-dot {
    font-size: 0.5rem;
    color: #F59E0B;
    position: absolute;
    bottom: 3px; right: 4px;
}

.cal-right {
    border-left: 1px solid var(--border);
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
}

.cal-day-empty {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
    opacity: 0.45;
}
.cal-day-empty span { font-size: 2rem; display: block; margin-bottom: 8px; }
.cal-day-empty p    { font-size: 0.82rem; line-height: 1.5; }

.cal-selected-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
    flex-shrink: 0;
}

.cal-stats-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cal-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.cal-no-data {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.cal-note-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.cal-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 80px;
    overflow-y: auto;
}
.cal-task-item {
    font-size: 0.78rem;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.4;
}
.cal-task-item::before { content: '✅'; font-size: 0.7rem; flex-shrink: 0; margin-top: 1px; }

.cal-note-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

#cal-note-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.84rem;
    font-family: inherit;
    resize: none;
    outline: none;
    line-height: 1.55;
    flex: 1;
    min-height: 90px;
}
#cal-note-input:focus { border-color: var(--primary); }

.cal-save-note-btn {
    padding: 9px;
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
    width: 100%;
    flex-shrink: 0;
}
.cal-save-note-btn:hover { opacity: 0.85; }

/* =============================================
   Confetti Canvas
   ============================================= */
#confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    display: none;
}

/* =============================================
   Responsive — stack below 1024px
   ============================================= */
@media (max-width: 1024px) {
    body { overflow: auto; }
    .app-grid {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
        padding-bottom: 24px;
    }
    .panel { min-height: 300px; }
    .focus-panel { min-height: 480px; }
    .chat-panel  { min-height: 420px; }
}

/* =============================================
   Locked Panel — Coursera-style gate
   ============================================= */
.lp-wrap {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.lp-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: filter 0.25s ease, opacity 0.25s ease;
}
.lp-content.blurred {
    filter: blur(5px);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
.lp-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255,255,255,0.82) 36%,
        #FFFFFF 100%
    );
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    padding: 20px;
}
html.dark-mode .lp-overlay {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(17,24,39,0.88) 36%,
        #111827 100%
    );
}
.lp-overlay.visible { display: flex; }

.lock-card {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(108,99,255,0.15), 0 2px 8px rgba(0,0,0,0.05);
    padding: 24px 20px 20px;
    text-align: center;
    max-width: 280px;
    width: 100%;
}
html.dark-mode .lock-card {
    background: #1E293B;
    box-shadow: 0 10px 40px rgba(108,99,255,0.22), 0 2px 8px rgba(0,0,0,0.4);
}
.lock-icon-badge {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #EEF0FF;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}
html.dark-mode .lock-icon-badge { background: rgba(108,99,255,0.18); }

.lock-heading {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 7px;
    line-height: 1.35;
    letter-spacing: -0.2px;
}
html.dark-mode .lock-heading { color: #F1F5F9; }

.lock-subtext {
    font-size: 0.78rem;
    color: #6B7280;
    max-width: 240px;
    margin: 0 auto 16px;
    line-height: 1.55;
}
html.dark-mode .lock-subtext { color: #94A3B8; }

.lock-cta {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    background: #6C63FF;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(108,99,255,0.32);
    transition: background 0.15s, transform 0.12s, box-shadow 0.12s;
}
.lock-cta:hover {
    background: #5B4FE0;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(108,99,255,0.42);
}
.lock-cta:active { transform: translateY(0) scale(0.97) !important; }

.lock-learn-more {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.7rem;
    color: #9CA3AF;
    text-decoration: none;
    transition: color 0.15s;
}
.lock-learn-more:hover { color: #6C63FF; text-decoration: underline; }

/* Demo preview content shown blurred under lock overlay */
.chat-demo {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    pointer-events: none;
}
.task-demo { pointer-events: none; padding: 2px 0; }

/* =============================================
   Session End Popup
   ============================================= */
.sep-modal { max-width: 360px; }
.sep-box {
    text-align: center;
    padding: 28px 24px 22px;
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sep-emoji {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 10px;
}
.sep-box .sep-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.25px;
    margin-bottom: 5px;
}
.sep-box .sep-sub {
    font-size: 0.83rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.sep-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-bottom: 14px;
}
.sep-choice-primary {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sep-choice-primary:hover { opacity: 0.88; }
.sep-choice-secondary {
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.sep-choice-secondary:hover { border-color: var(--primary); background: var(--primary-dim); }
.sep-countdown {
    font-size: 0.72rem;
    color: #EF4444;
    opacity: 0.75;
    min-height: 1.2em;
}
.sep-dur-input {
    display: block;
    width: 130px;
    padding: 8px 0;
    margin: 10px auto 14px;
    border: none;
    border-bottom: 2.5px solid var(--primary);
    background: transparent;
    color: var(--text);
    font-size: 2.4rem;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.sep-dur-input::-webkit-inner-spin-button,
.sep-dur-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.sep-quick-picks {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.sep-qpick {
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.sep-qpick:hover { border-color: var(--primary); background: var(--primary-dim); }
.sep-start-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-bottom: 8px;
}
.sep-start-btn:hover { opacity: 0.88; }
.sep-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px 8px;
}
.sep-cancel:hover { color: var(--text); }

/* =============================================
   Upgrade Modal v2 — two-column pricing cards
   ============================================= */
.upgrade-modal-v2 { max-width: 520px; }
.upgrade-modal-v2 .modal-box {
    padding: 24px 22px 22px;
    gap: 18px;
    max-height: 90vh;
    overflow-y: auto;
}
.upgrade-v2-header { text-align: center; }
.upgrade-v2-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.4px;
}
.upgrade-v2-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 3px;
}
.pricing-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pricing-card {
    border-radius: 14px;
    padding: 18px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1.5px solid var(--border);
    position: relative;
    background: var(--surface);
}
.pricing-card-pro {
    border: 2px solid #6C63FF;
    box-shadow: 0 0 0 3px rgba(108,99,255,0.08);
}
.pricing-card-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: #6C63FF;
    color: white;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.pricing-card-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -1px;
}
.pricing-card-period {
    font-size: 0.66rem;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.pricing-card-features {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.pf-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.pf-check { color: #10B981; font-weight: 700; flex-shrink: 0; font-size: 0.72rem; margin-top: 1px; }
.pricing-card-btn {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    display: block;
    text-decoration: none;
    box-sizing: border-box;
}
.pricing-card-btn-free {
    background: transparent;
    border: 1.5px solid #6C63FF;
    color: #6C63FF;
}
.pricing-card-btn-free:hover { background: #EEF0FF; }
.pricing-card-btn-pro {
    background: #6C63FF;
    border: none;
    color: white;
    box-shadow: 0 3px 10px rgba(108,99,255,0.32);
}
.pricing-card-btn-pro:hover {
    background: #5B4FE0;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(108,99,255,0.42);
}

/* =============================================
   Inline lock badge (on sound buttons etc.)
   ============================================= */
.lock-badge-wrap {
    position: relative;
    display: inline-flex;
}
.lock-badge-icon {
    position: absolute;
    top: -4px; right: -4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #6C63FF;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.28);
}
/* Override old ::after badge — use real badge icons instead */
.sound-gated::after { display: none !important; }

/* PRO pill badge (inline next to labels) */
.pro-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: #EEF0FF;
    color: #6C63FF;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    vertical-align: middle;
    margin-left: 6px;
}
html.dark-mode .pro-badge { background: rgba(108,99,255,0.18); color: #818CF8; }

/* Disabled setting inputs for non-Pro */
.setting-input-row input:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}
.setting-row.locked label { color: var(--text-muted); }

/* =============================================
   Toast notification
   ============================================= */
.toast {
    position: fixed;
    top: 78px; right: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 9px;
    z-index: 9999;
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s;
    max-width: 260px;
    pointer-events: none;
}
.toast.visible { transform: translateX(0); opacity: 1; }
.toast-icon { font-size: 1rem; flex-shrink: 0; }
.toast-content { display: flex; flex-direction: column; gap: 1px; }
.toast-sub { font-size: 0.73rem; color: var(--text-secondary); }
.toast.toast-warning { border-left: 3px solid #F59E0B; }

/* =============================================
   Duration Quick-Pick Pills
   ============================================= */
.dp-pills {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.dp-pill {
    height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.22);
    background: transparent;
    color: rgba(255,255,255,0.72);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.dp-pill:hover { background: rgba(255,255,255,0.12); color: white; }
.dp-pill.active {
    background: white;
    color: #5B4FE0;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* =============================================
   Session End — duration display (step B)
   ============================================= */
.sep-dur-display {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin: 8px 0 14px;
    letter-spacing: -1px;
    line-height: 1;
}
.sep-qpick.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* =============================================
   Navbar Active Session Badge
   ============================================= */
#nav-session-badge {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 9px;
    border-radius: var(--radius-pill);
    background: rgba(108,99,255,0.1);
    border: 1px solid rgba(108,99,255,0.28);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    transition: background 0.15s;
    user-select: none;
}
#nav-session-badge:hover { background: rgba(108,99,255,0.18); }
.nsb-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.nsb-running .nsb-dot { animation: statusPulse 1.5s ease-in-out infinite; }
.nsb-label { white-space: nowrap; }

/* =============================================
   Wheel Picker
   ============================================= */
.wp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,0.45);
    backdrop-filter: blur(6px);
    z-index: 300;
}
.wp-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -46%);
    z-index: 301;
    display: none;
    width: 100%;
    max-width: 360px;
    padding: 0 16px;
}
.wp-modal.open { display: block; animation: modalIn 0.2s ease; }
.wp-box {
    padding: 24px 20px 20px;
    gap: 0;
}
.wp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}
.wp-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.2px;
}
.wp-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.wp-wheels-row {
    display: flex;
    gap: 0;
    justify-content: center;
    margin-bottom: 20px;
}
.wp-wheel-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.wp-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.wp-wheel-container {
    width: 100%;
    position: relative;
}
.wp-list {
    will-change: transform;
}
.wp-item {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    transition: font-size 0.1s, opacity 0.1s;
}
.wp-sel-line {
    position: absolute;
    left: 8%; right: 8%;
    height: 1px;
    background: var(--border);
    pointer-events: none;
    z-index: 3;
}
.wp-mask {
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    z-index: 2;
}
.wp-mask-top {
    top: 0;
    background: linear-gradient(to bottom, var(--surface) 30%, transparent 100%);
}
.wp-mask-bot {
    bottom: 0;
    background: linear-gradient(to top, var(--surface) 30%, transparent 100%);
}
.wp-footer {
    display: flex;
    gap: 10px;
}
.wp-cancel-btn {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}
.wp-cancel-btn:hover { border-color: var(--primary); }
.wp-confirm-btn {
    flex: 1.6;
    padding: 11px;
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: white;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
.wp-confirm-btn:hover:not(:disabled) { opacity: 0.88; }
.wp-confirm-btn:disabled { opacity: 0.35; cursor: not-allowed; }