@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root {
    /* App Colors */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --card-bg: rgba(8,12,8,.55);
    --border-dim-color: #004d0f;
    --focus-primary: #00ff41;
    --focus-secondary: #00cc33;
    --focus-dim: #008f11;
    --focus-shadow: rgba(0, 255, 65, .2);
    --focus-glow: 0 0 10px rgba(0, 255, 65, .5);
    --short-break-primary: #00ffff;
    --short-break-secondary: #00cccc;
    --short-break-dim: #008b8b;
    --short-break-shadow: rgba(0, 255, 255, .2);
    --short-break-glow: 0 0 10px rgba(0, 255, 255, .5);
    --long-break-primary: #ff6b35;
    --long-break-secondary: #ff8c66;
    --long-break-dim: #cc562a;
    --long-break-shadow: rgba(255, 107, 53, .2);
    --long-break-glow: 0 0 10px rgba(255, 107, 53, .5);
    --accent-red: #ff0040;
    --high-prio-color: #ffff00;
    
    /* Dynamic Theme Variables */
    --text-primary: var(--focus-primary);
    --text-secondary: var(--focus-secondary);
    --text-dim: var(--focus-dim);
    --border-color: var(--focus-primary);
    --shadow: var(--focus-shadow);
    --terminal-glow: var(--focus-glow);

    /* Circuit Background Settings */
    --circuit-bg-color: #0a0f0a;
    --grid: rgba(0,255,120,0.06);
    --trace: #18ff6d;
    --glow: #18ff6d;
    --node: #b9ffd9;
    --speed: 10s;
    --density: 1;
}

/* ----- THEME SWITCHING ----- */
body.focus-session { --text-primary: var(--focus-primary); --text-secondary: var(--focus-secondary); --text-dim: var(--focus-dim); --border-color: var(--focus-primary); --shadow: var(--focus-shadow); --terminal-glow: var(--focus-glow); }
body.short-break-session { --text-primary: var(--short-break-primary); --text-secondary: var(--short-break-secondary); --text-dim: var(--short-break-dim); --border-color: var(--short-break-primary); --shadow: var(--short-break-shadow); --terminal-glow: var(--short-break-glow); }
body.long-break-session { --text-primary: var(--long-break-primary); --text-secondary: var(--long-break-secondary); --text-dim: var(--long-break-dim); --border-color: var(--long-break-primary); --shadow: var(--long-break-shadow); --terminal-glow: var(--long-break-glow); }

/* ----- BASE & BACKGROUND STYLES ----- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: all .3s ease;
    display: flex;
    position: relative;
}

/* Original scan-line background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 65, .03) 2px, rgba(0, 255, 65, .03) 4px);
    pointer-events: none;
    z-index: -1;
}

/* ----- MAIN LAYOUT & PANELS ----- */
.app-container {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 2rem auto;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

.main-content { flex: 2; display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.panel {
    background: var(--card-bg);
    border: 1px solid var(--border-dim-color);
    padding: 25px;
    box-shadow: 0 0 20px var(--shadow);
    backdrop-filter: blur(4px);
}

/* ----- SVG CIRCUIT ANIMATION (For Hyperfocus) ----- */
.circuit-bg {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: .85; filter: saturate(1.15);
    background: var(--circuit-bg-color);
}
.circuit-bg::before{
    content:""; position:fixed; inset:0;
    background:
        linear-gradient(to right, var(--grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
    opacity:.7; pointer-events:none;
}
svg defs .soft-glow{ color-interpolation-filters: sRGB; }
.trace{ stroke: var(--trace); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .85; filter: url(#glow); stroke-dasharray: 6 10; animation: flow var(--speed) linear infinite; }
.trace.thin{ stroke-width:1; opacity:.6; filter:url(#softglow); stroke-dasharray:5 12; animation-duration: calc(var(--speed) * 1.25); }
.trace.slow{ animation-duration: calc(var(--speed) * 1.6); }
.trace.fast{ animation-duration: calc(var(--speed) * .7); }
@keyframes flow{ to{ stroke-dashoffset: -1000; } }
.node{ fill: var(--node); opacity:.9; filter: url(#nodeglow); transform-origin: center; animation: pulse 2.8s ease-in-out infinite; }
.node.alt{ animation-duration: 3.6s; opacity:.75; }
@keyframes pulse{ 0%,100%{ transform: scale(0.95); opacity:.65; } 50%{ transform: scale(1.15); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .trace, .node{ animation: none !important; } }
.layer.layer-a{ opacity: calc(.55 * var(--density)); }
.layer.layer-b{ opacity: calc(.40 * var(--density)); }
.layer.layer-c{ opacity: calc(.30 * var(--density)); }


/* ----- TIMER PANEL ----- */
.timer-panel { text-align: center; min-height: 400px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.app-title { font-size: 2.5rem; font-weight: 300; margin-bottom: .5rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: .3em; text-shadow: var(--terminal-glow); }
.app-subtitle { font-size: .9rem; color: var(--text-dim); margin-bottom: 2rem; text-transform: uppercase; letter-spacing: .2em; }
.terminal-line { color: var(--text-dim); font-size: .8rem; margin-bottom: .5rem; opacity: .7; }
.terminal-line::before { content: '> '; color: var(--text-secondary); }
.session-type-container { display: flex; justify-content: center; gap: 10px; background: var(--bg-secondary); padding: 5px; margin: 0 auto 12px auto; border: 1px solid var(--border-dim-color); }
.session-btn { background: transparent; border: 1px solid transparent; color: var(--text-dim); padding: 8px 15px; cursor: pointer; transition: all 0.3s ease; font-family: inherit; text-transform: uppercase; font-size: 0.9em; }
.session-btn.active { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); box-shadow: var(--terminal-glow); }
.session-btn:not(.active):hover { color: var(--text-secondary); }
.timer-display { font-size: 5rem; font-weight: 300; margin: 20px 0; color: var(--text-primary); letter-spacing: .2em; text-shadow: var(--terminal-glow); font-variant-numeric: tabular-nums; }

.progress-ring { position: relative; width: 180px; height: 180px; margin: 20px auto; }
.progress-ring .progress-circle-svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke: var(--border-dim-color); stroke-width: 3; }
.progress-ring .progress { stroke: var(--text-primary); stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 5px var(--shadow)); }

.timer-controls-inline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.timer-controls-inline button { background: none; border: none; font-size: 2.5em; color: var(--text-primary); opacity: .7; transition: .2s; cursor: pointer; padding: 0; }
.timer-controls-inline button:hover { opacity: 1; transform: scale(1.1); text-shadow: var(--terminal-glow); }

#startupLogo {
    color: var(--text-primary);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transform: scale(1);
    display: flex;
    justify-content: center;
    align-items: center;
}
#startupLogo svg {
    width: 150px;
    height: 150px;
}
#startupLogo.hidden {
    opacity: 0;
    transform: scale(0);
}
#playBtn {
     opacity: 0;
     transform: scale(0);
     transition: opacity 0.5s ease-in 0.3s, transform 0.5s ease-in 0.3s;
}
#playBtn.visible {
    opacity: 0.7;
    transform: scale(1);
}
#playBtn i {
    animation: palpitate 2.5s ease-in-out infinite;
}

@keyframes palpitate {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px var(--shadow)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 10px var(--shadow)); }
}

.controls { display: flex; gap: 15px; justify-content: center; margin: 25px 0; flex-wrap: wrap; }
button { background: transparent; border: 1px solid var(--border-dim-color); color: var(--text-secondary); padding: 12px 24px; font-size: 1em; cursor: pointer; transition: .3s; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; text-transform: uppercase; letter-spacing: .1em; position: relative; overflow: hidden; }
button:hover { border-color: var(--text-primary); color: var(--text-primary); box-shadow: inset 0 0 10px var(--shadow); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .3; cursor: not-allowed; }

.current-task { background: var(--bg-secondary); border: 1px solid var(--border-dim-color); border-left: 3px solid var(--text-primary); padding: 15px; margin: 20px 0; position: relative; text-align: left; }
.current-task h3 { margin-bottom: 8px; font-size: 1.1em; color: var(--text-primary); }
.pomodoro-counter { display: flex; gap: 5px; flex-wrap: wrap; }
.pomo-dot { width: 12px; height: 12px; border: 1px solid var(--text-dim); background: transparent; transition: .3s; }
.pomo-dot.completed { background: var(--text-primary); box-shadow: 0 0 10px var(--shadow); }
.pomo-dot.current { background: var(--long-break-primary); border-color: var(--long-break-primary); box-shadow: 0 0 10px var(--long-break-shadow); animation: blink 1s infinite; }

.section-title { font-size: 1.5em; margin-bottom: 20px; color: var(--text-primary); text-transform: uppercase; letter-spacing: .2em; text-shadow: var(--terminal-glow); }

/* ----- FORMS & INPUTS ----- */
input[type="text"], input[type="number"], input[type="url"], select, textarea { background: var(--bg-secondary); border: 1px solid var(--border-dim-color); color: var(--text-primary); padding: 10px 12px; font-size: 1em; font-family: inherit; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text-primary); box-shadow: inset 0 0 5px var(--shadow); }
input::placeholder, textarea::placeholder { color: var(--text-dim); }
.task-form { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; margin-bottom: 20px; }
.task-form-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
#customTagInput { display: none; }
.add-task-btn { background: var(--text-primary); color: var(--bg-primary) !important; border-color: var(--text-primary); }
.slack-btn { background: #4A154B; color: white !important; border-color: #4A154B; }
.slack-btn:hover { border-color: #E01E5A; }

/* ----- TASK LIST ----- */
.task-list { max-height: 400px; overflow-y: auto; padding-right: 10px; }
.task-item { background: var(--bg-secondary); border: 1px solid var(--border-dim-color); border-left: 3px solid transparent; padding: 12px; margin-bottom: 12px; transition: .2s; cursor: grab; position: relative; display: flex; align-items: center; gap: 10px; }
.task-item:active { cursor: grabbing; }
.task-item.dragging { opacity: 0.5; }
.task-item.active { border-left-color: var(--long-break-primary); background: rgba(255, 107, 53, .05); }
.task-item.completed { border-left-color: var(--text-primary); opacity: .6; cursor: default; }
.task-item.high-priority { border-left-color: var(--high-prio-color); background: rgba(255, 255, 0, 0.05); }
.task-item:hover:not(.completed) { background: var(--shadow); border-color: var(--text-primary); }
.task-content { flex-grow: 1; display: flex; align-items: center; gap: 10px; }
.task-title-meta { flex-grow: 1; }
.task-content .task-title { color: var(--text-primary); font-weight: 500; }
.priority-chip { background: var(--high-prio-color); color: var(--bg-primary); padding: 2px 6px; font-size: 0.7em; font-weight: bold; border-radius: 4px; }
.task-meta { display: flex; gap: 10px; margin-top: 4px; font-size: .85em; color: var(--text-dim); }
.task-actions { margin-left: auto; display: flex; gap: 8px; }
.action-btn { padding: 6px 10px; }
.action-btn.priority-btn.active { color: var(--high-prio-color); text-shadow: 0 0 5px var(--high-prio-color); }
.task-section h3 { display: flex; align-items: center; gap: 8px; }
.task-count { border: 1px solid var(--border-dim-color); padding: 2px 8px; font-size: .85em; color: var(--text-secondary); }
.task-eta-summary { background: var(--bg-secondary); border: 1px solid var(--border-dim-color); padding: 10px; margin: 15px 0; font-size: 0.9em; color: var(--text-secondary); text-align: center; }

/* ----- STATS ----- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin-top: 20px; }
.stat-card { background: var(--bg-secondary); border: 1px solid var(--border-dim-color); padding: 15px; text-align: center; position: relative; overflow: hidden; }
.stat-number { font-size: 2em; font-weight: 700; display: block; margin-bottom: 5px; color: var(--text-primary); text-shadow: var(--terminal-glow); }
.stat-label { font-size: .8em; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; }
.stat-icon { font-size: 1.1em; margin-right: 5px; color: var(--text-secondary); }

/* ----- MUSIC PANEL ----- */
.music-panel { position: sticky; top: 20px; height: fit-content; max-height: calc(100vh - 40px); overflow-y: auto; flex: 1; min-width: 300px; }
.playlist-item { background: var(--bg-secondary); border: 1px solid var(--border-dim-color); padding: 15px; margin-bottom: 10px; cursor: pointer; transition: .2s; position: relative; }
.playlist-item:hover { border-color: var(--text-primary); background: var(--shadow); }
.playlist-item.active { border-color: var(--text-primary); background: var(--shadow); }
.playlist-item.active::before { content: '▶'; position: absolute; left: -20px; color: var(--text-primary); animation: blink 1s infinite; }
.playlist-title { font-weight: 700; margin-bottom: 6px; font-size: 1.05em; color: var(--text-primary); }
.playlist-description { font-size: .9em; color: var(--text-dim); line-height: 1.4; }

.signature { text-align: center; margin-top: 20px; font-size: 0.9em; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.signature a { color: var(--text-secondary); text-decoration: none; transition: 0.3s; }
.signature a:hover { color: var(--text-primary); text-shadow: var(--terminal-glow); }
.signature .logo-line { display: flex; align-items: center; gap: 8px; }
.signature .logo-line svg { height: 1.5em; color: var(--text-primary); } /* Increased size */
.social-links { display: flex; gap: 15px; font-size: 1.5em; }
.kofi-link { display: inline-flex; align-items: center; margin-top: 10px; padding: 5px 10px; border: 1px solid var(--border-dim-color); border-radius: 4px; }

/* ----- MODALS ----- */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .9); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: .3s; }
.modal.active { opacity: 1; visibility: visible; }
.modal-content { background: var(--card-bg); border: 2px solid var(--text-primary); padding: 30px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; transform: scale(.85); transition: transform .3s; box-shadow: var(--terminal-glow); }
.modal.active .modal-content { transform: scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-dim-color); }
.modal-header h3 { font-size: 1.3em; margin: 0; color: var(--text-primary); text-transform: uppercase; letter-spacing: .2em; }
.close-btn { background: none; border: 1px solid var(--border-dim-color); color: var(--text-secondary); font-size: 1.2em; cursor: pointer; padding: 5px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; transition: .2s; }
.close-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
.setting-item, .edit-task-item { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border: 1px solid var(--border-dim-color); }
.setting-item { flex-direction: row; justify-content: space-between; align-items: center; }
.setting-control { display: flex; align-items: center; gap: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ----- HYPERFOCUS MODE ----- */
.hyperfocus-overlay { display: none; position: fixed; inset: 0; z-index: 1000; flex-direction: column; justify-content: center; align-items: center; }
body.hyperfocus-mode .app-container { display: none !important; }
body.hyperfocus-mode .hyperfocus-overlay { display: flex !important; }
.hyperfocus-timer { position: relative; z-index: 1001; background: rgba(0, 0, 0, .8); border: 2px solid var(--text-primary); padding: 3rem; max-width: 80vw; text-align: center; box-shadow: var(--terminal-glow); }
.hyperfocus-display { font-size: 10vw; font-weight: 300; margin: 2rem 0; color: var(--text-primary); text-shadow: var(--terminal-glow); letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.hyperfocus-session { font-size: 2vw; color: var(--text-secondary); margin-bottom: 2rem; text-transform: uppercase; letter-spacing: .3em; }
.hyperfocus-controls { display: flex; gap: 2rem; justify-content: center; margin-top: 2rem; }
.exit-hyperfocus { position: fixed; top: 2rem; right: 2rem; z-index: 1002; }

/* ----- SUMMARY & CHARTS ----- */
.summary-preview { background: var(--bg-primary); padding: 20px; margin-bottom: 20px; border: 1px solid var(--border-dim-color); }
.summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 15px 0; text-align: center; }
.summary-stat-number { font-size: 2em; }
.chart-container { width: 100%; height: 250px; margin-top: 20px; }
.summary-tasks-list { list-style: none; padding-left: 0; }
.summary-tasks-list li { background: var(--bg-secondary); padding: 8px; margin-bottom: 5px; border-left: 2px solid var(--text-dim); }
.slack-actions { display: flex; gap: 15px; justify-content: center; margin-top: 20px; }
.webhook-input { width: 100%; margin: 15px 0 10px; }
.chart-toggle-btns { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
.chart-toggle-btns button { padding: 5px 10px; font-size: 0.8em; }
.chart-toggle-btns button.active { background: var(--text-primary); color: var(--bg-primary); }

/* ----- DESKTOP ONLY OVERLAY ----- */
.desktop-only-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    flex-direction: column;
}
.desktop-only-overlay .message-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 2rem;
    color: var(--text-primary);
    filter: drop-shadow(var(--terminal-glow));
}
.desktop-only-overlay h1 {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: .3em;
    text-shadow: var(--terminal-glow);
}
.desktop-only-overlay p {
    color: var(--text-secondary);
    margin-top: 1rem;
    font-size: 1rem;
    max-width: 400px;
}
.desktop-only-overlay .signature {
    margin-top: 3rem;
}

@keyframes blink {
    0%, 50% { opacity: 1 }
    51%, 100% { opacity: .3 }
}

@media (max-width: 1024px) {
    .app-container {
        display: none;
    }
    .desktop-only-overlay {
        display: flex;
    }
}