:root {
    --bg-dark: #0f172a;
    --bg-glass: rgba(30, 41, 59, 0.7);
    --border-glass: rgba(148, 163, 184, 0.1);
    --accent-primary: #06b6d4;
    /* Cyan */
    --accent-secondary: #8b5cf6;
    /* Violet */
    --action-start: #22c55e;
    --action-stop: #ef4444;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --font-ui: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

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

body {
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(at 0% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--text-main);
    font-family: var(--font-ui);
    min-height: 100vh;
    min-height: 100vh;
    padding: 20px;
    overscroll-behavior-y: contain;
    /* Prevent pull-to-refresh on mobile */
}

/* Glassmorphism */
.glass-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.app-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
}

h1 {
    font-weight: 800;
    font-size: 1.5rem;
}

.accent-text {
    color: var(--accent-primary);
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

.global-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.offset-control-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 260px;
}

.offset-control-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.stepper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 2px;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-main);
    width: 40px;
    /* Increased from 32 */
    height: 40px;
    /* Increased from 32 */
    cursor: pointer;
    font-size: 1.4rem;
    /* Increased from 1.1 */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

input[type="number"],
input[type="text"] {
    background: transparent;
    border: none;
    color: var(--text-main);
    width: 60px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    /* Increased from 0.9 */
    appearance: textfield;
}

#global-offset {
    width: 60px;
    /* Reverted to smaller width as seen in previous stable versions if needed, or keep 120px? User didn't complain. Let's keep 120px but maybe it was too wide? Actually, let's keep it consistent. */
    width: 80px;
}

.speed-control-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.speed-control-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

#playback-speed {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    width: 80px;
    padding: 5px 10px;
    cursor: pointer;
    appearance: none;
    /* Remove default arrow if we want custom, but default is fine for now on glass */
    text-align: center;
    outline: none;
}

#playback-speed option {
    background: var(--bg-dark);
    color: var(--text-main);
}

/* Remove spinners (legacy support just in case) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Main Grid */
.main-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    height: calc(100vh - 120px);
}

.left-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-col {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

/* Timer Section */
.timer-section {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

/* Flex container for Timer + Controls side-by-side */
/* Flex container for Timer + Controls side-by-side */
.timer-area {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.timer-display {
    font-family: var(--font-mono);
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: -2px;
    color: var(--text-main);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    /* Indicates editable */
    order: 2;
    /* Desktop: Timer in middle */
}

.timer-display:hover {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.timer-decimal {
    font-size: 0.65em;
    /* 2/3 size approx */
    opacity: 0.8;
    /* Slightly dimmed for visual hierarchy */
}

/* 
   No specific wrapper for controls anymore. 
   Buttons are direct children of .timer-area 
*/

#btn-timer-reset {
    order: 1;
    /* Desktop: Reset on Left */
}

#btn-timer-start {
    order: 3;
    /* Desktop: Start on Right */
}

.action-btn-img {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    transition: transform 0.1s;
}

.action-btn-img:hover {
    transform: scale(1.1);
}

.action-btn-img:active {
    transform: scale(0.95);
}

.action-btn-img img {
    /* 1/4 size request. Buttons small. */
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Hero Button */
.mega-btn-hero {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    color: white;
    width: 100%;
    max-width: 500px;
    padding: 30px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 2.2rem;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
    transition: all 0.1s;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mega-btn-hero:hover {
    box-shadow: 0 0 50px rgba(6, 182, 212, 0.5);
    transform: translateY(-2px);
}

.mega-btn-hero:active {
    transform: translateY(1px);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

.sync-note {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 10px;
}

/* List */
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.secondary-btn {
    width: 100%;
    margin-top: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.timestamp-list-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 5px;
}

.timestamp-list-container::-webkit-scrollbar {
    width: 6px;
}

.timestamp-list-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}



.ts-time {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-primary);
    min-width: 60px;
}

/* Increased specificity to override global input[type="text"] */
input.ts-desc {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 1rem;
    font-family: var(--font-ui);
    padding: 5px;
    /* Override global input styles */
    width: 100%;
    text-align: left;
    min-width: 0;
    /* Allow flex shrinking if needed */
}

input.ts-desc:focus {
    outline: none;
    border-bottom: 1px solid var(--accent-secondary);
}

.ts-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-offset-input {
    width: 45px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.btn-delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

.btn-delete:hover {
    color: var(--action-stop);
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 0;
    font-style: italic;
}

@media (max-width: 900px) {
    .main-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .right-col {
        max-height: 500px;
    }
}

@media (max-width: 600px) {

    /* Container & Layout */
    body {
        padding: 10px;
    }

    .app-container {
        gap: 10px;
    }

    /* Header */
    header {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    h1 {
        font-size: 1.2rem;
    }

    /* Timer Section */
    .timer-section {
        padding: 20px 10px;
    }

    .timer-area {
        /* Mobile: Grid layout with Timer on top, Buttons below */
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "timer timer"
            "reset start";
        gap: 15px;
        width: 100%;
        justify-content: center;
        justify-items: center;
    }

    .timer-display {
        font-size: 3.5rem;
        grid-area: timer;
        order: unset;
        /* Reset order for grid areas */
    }

    #btn-timer-reset {
        grid-area: reset;
        order: unset;
        justify-self: center;
        /* Center in column */
    }

    #btn-timer-start {
        grid-area: start;
        order: unset;
        justify-self: center;
        /* Center in column */
    }

    /* Hero Button */
    .mega-btn-hero {
        font-size: 1.5rem;
        padding: 20px;
    }
}

/* New Specifics for Long Press & Large Fonts */

/* Consolidated Timestamp Item Styles */
.timestamp-item {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 0;
    /* Reset padding to handle internal structure */
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    /* For progress bar */
    position: relative;
    transition: background 0.2s;

    /* Crucial for mobile layout to prevent squashing */
    flex-shrink: 0;
    align-items: stretch;
}

.timestamp-item:hover {
    background: rgba(0, 0, 0, 0.4);
}

.ts-delete-overlay {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: background 0.2s, color 0.2s;
    user-select: none;
    /* Make it look like a button */
    margin: 4px;
    border-radius: 8px;
    overflow: hidden;
    /* Ensure progress bar corners are clipped */
}

.ts-delete-overlay:hover {
    background: rgba(239, 68, 68, 0.1);
    /* Slight red tint */
    color: var(--action-stop);
}

.ts-delete-overlay.pressing {
    color: white;
}

.delete-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--action-stop);
    opacity: 0.8;
    z-index: -1;
    transition: width 0s;
}

.ts-delete-overlay.pressing .delete-progress {
    width: 100%;
    transition: width 2s linear;
    /* Matches JS timer */
}


.ts-delete-overlay span {
    position: relative;
    z-index: 1;
    pointer-events: none;
}


.ts-content-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 15px 5px 15px;
}

.ts-actions-row {
    display: flex;
    justify-content: flex-end;
    /* Right align offset controls */
    padding: 5px 15px 15px 15px;
}

.local-offset-control {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 8px;
}

.offset-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-right: 5px;
}

/* Larger Inputs/Buttons */
.icon-btn-large {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-main);
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}

.icon-btn-large:hover {
    background: rgba(255, 255, 255, 0.2);
}

.icon-btn-large:active {
    transform: scale(0.95);
}

.ts-offset-input-large {
    background: transparent;
    border: none;
    color: var(--text-main);
    width: 50px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    /* Larger font */
    font-weight: 600;
}


/* Adjust existing query for mobile if needed, though flex-col approach is now default */
@media (max-width: 600px) {
    .ts-content-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ts-actions-row {
        justify-content: center;
    }
}