/* Variables - Ocean Depths Theme (matching FitnessTimer) */
:root {
    --ocean-deep-dark: #001f3f;
    --ocean-deep-mid: #003d5c;
    --ocean-deep-light: #006494;
    --ocean-accent: #008ec4;
    --ocean-bright: #00bcd4;
    --ocean-cyan: #b3e5fc;
    --ocean-glow: rgba(0, 188, 212, 0.5);

    --color-text: #b3e5fc;
    --color-text-glow: 0 0 1.5cqh rgba(0, 188, 212, 0.5);

    --main-bg: linear-gradient(-30deg, var(--ocean-deep-mid), var(--ocean-deep-light));

    --button-bg: linear-gradient(135deg, #006494 0%, #0088cc 100%);
    --button-bg-hover: linear-gradient(135deg, #0088cc 0%, #00bcd4 100%);
    --button-border: 0.2cqh solid #00bcd4;
    --button-shadow: 0 0.4cqh 2cqh rgba(0, 188, 212, 0.5), inset 0 0.1cqh 0 rgba(255, 255, 255, 0.2);
    --button-shadow-hover: 0 0.6cqh 2.4cqh rgba(0, 188, 212, 0.6);

    --input-bg: rgba(0, 61, 92, 0.6);
    --input-border: 0.2cqh solid #008ec4;
    --input-shadow: inset 0 0 1.5cqh rgba(0, 142, 196, 0.3);
    --input-shadow-focus: 0 0 2cqh rgba(0, 188, 212, 0.5), inset 0 0 1.5cqh rgba(0, 142, 196, 0.3);

    --phase-1-color: #b3e5fc;
    --phase-1-bg: rgba(0, 188, 212, 0.1);
    --phase-2-color: #003d5c;
    --phase-2-bg: rgba(179, 229, 252, 0.82);

    --text-translateY: -0.05em;

    --gap: 2dvh;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    overflow: hidden;
}

/* ======================== */
/* # App Container (Grid)   */
/* ======================== */
.app-container {
    width: 100dvw;
    height: 100dvh;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 8dvh 1fr 14dvh 4dvh;
    row-gap: var(--gap);
    padding: var(--gap);

    background: var(--main-bg);
}

/* ========== */
/* # Header   */
/* ========== */
.app-header {
    container-type: size;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.app-header > span {
    transform: translateY(var(--text-translateY));
    white-space: nowrap;
    font-size: min(55cqh, 4.5cqw);
    font-weight: 600;
    color: var(--color-text);
    text-shadow: var(--color-text-glow);
}

.btn-settings {
    container-type: size;
    position: absolute;
    right: 2dvw;
    width: min(6dvh, 10dvw);
    height: min(6dvh, 10dvw);
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-settings svg {
    width: 70%;
    height: 70%;
    color: var(--color-text);
}

.btn-settings:hover svg {
    color: var(--ocean-bright);
}

.btn-settings.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ============== */
/* # Timer Area   */
/* ============== */
.app-timer-area {
    container-type: size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.timer-phase-label {
    font-size: 6cqh;
    font-weight: 600;
    color: var(--color-text);
    text-shadow: var(--color-text-glow);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.timer-phase-label:empty {
    display: none;
}

.timer-display {
    container-type: size;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1dvh;
    transition: background 0.3s ease;
}

.timer-display span {
    font-size: min(55cqh, 30cqw);
    font-weight: 700;
    color: var(--color-text);
    text-shadow: 0 0 3cqh rgba(0, 188, 212, 0.5);
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Phase visual feedback */
.app-timer-area.phase-1 .timer-display {
    background: var(--phase-1-bg);
}

.app-timer-area.phase-1 .timer-display span {
    color: var(--color-text);
    text-shadow: 0 0 3cqh rgba(0, 188, 212, 0.5);
}

.app-timer-area.phase-2 .timer-display {
    background: var(--phase-2-bg);
}

.app-timer-area.phase-2 .timer-display span {
    color: var(--phase-2-color);
    text-shadow: none;
}

/* Finished state */
.app-timer-area.finished .timer-display span {
    color: rgba(179, 229, 252, 0.5);
}

/* ============ */
/* # Controls   */
/* ============ */
.app-controls {
    container-type: size;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    width: 100%;
    height: 100%;
}

.btn-control {
    container-type: size;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--button-bg);
    border: var(--button-border);
    border-radius: 1dvh;
    box-shadow: var(--button-shadow);
    color: white;
}

.btn-control span {
    font-size: 40cqh;
    font-weight: 600;
    white-space: nowrap;
}

.btn-control:hover {
    background: var(--button-bg-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-0.2cqh);
}

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

/* Single button spans full width */
.controls-grid.single-button {
    grid-template-columns: 1fr;
}

/* ========== */
/* # Footer   */
/* ========== */
.app-footer {
    container-type: size;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.app-footer > span {
    transform: translateY(var(--text-translateY));
    white-space: nowrap;
    font-size: min(45cqh, 3.5cqw);
    color: var(--color-text);
    text-shadow: var(--color-text-glow);
}

/* ======================== */
/* # Settings Panel          */
/* ======================== */
.settings-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.settings-backdrop.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-panel {
    background: linear-gradient(-30deg, var(--ocean-deep-dark), var(--ocean-deep-mid));
    border: 0.3dvh solid var(--ocean-accent);
    border-radius: 2dvh;
    width: 85dvw;
    max-width: 50dvh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2dvh 3dvh;
    border-bottom: 0.2dvh solid var(--ocean-accent);
}

.settings-header h2 {
    font-size: 3.5dvh;
    font-weight: 600;
    color: var(--color-text);
    text-shadow: 0 0 1dvh rgba(0, 188, 212, 0.5);
}

.btn-close {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5dvh;
    height: 5dvh;
}

.btn-close span {
    font-size: 3dvh;
    color: var(--color-text);
    transition: color 0.2s;
}

.btn-close:hover span {
    color: var(--ocean-bright);
}

.settings-body {
    padding: 2dvh 3dvh;
    display: flex;
    flex-direction: column;
    gap: 2.5dvh;
}

/* Setting Row */
.setting-row {
    display: flex;
    flex-direction: column;
    gap: 1dvh;
}

.setting-label {
    font-size: 2.2dvh;
    font-weight: 600;
    color: var(--color-text);
    text-shadow: 0 0 0.8dvh rgba(0, 188, 212, 0.3);
}

/* Toggle Group */
.toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1dvh;
    height: 5dvh;
}

.toggle-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--ocean-deep-mid);
    border: 0.2dvh solid var(--ocean-accent);
    border-radius: 1dvh;
    color: rgba(179, 229, 252, 0.5);
}

.toggle-btn span {
    font-size: 2.2dvh;
    font-weight: 600;
    white-space: nowrap;
}

.toggle-btn.active {
    background: var(--button-bg);
    border-color: var(--ocean-bright);
    color: white;
    box-shadow: 0 0 1.5dvh rgba(0, 188, 212, 0.4);
}

.toggle-btn:hover:not(.active) {
    background: rgba(0, 100, 148, 0.5);
    color: var(--color-text);
}

/* Timer Inputs Row (side-by-side Timer 1 & Timer 2) */
.timer-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1dvh;
}

.timer-input-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1dvh;
    padding: 1dvh;
}

/* Timer 2 settings: inverted style to match phase-2 appearance */
.timer-input-column.phase-2-style {
    background: rgba(179, 229, 252, 0.15);
    border-radius: 1dvh;
    padding: 1dvh;
}

.timer-input-column.phase-2-style .setting-label {
    color: var(--ocean-cyan);
    text-shadow: none;
}

.timer-input-column.phase-2-style .time-input {
    background: rgba(179, 229, 252, 0.25);
    color: var(--ocean-deep-dark);
    border-color: rgba(179, 229, 252, 0.5);
    box-shadow: none;
}

.timer-input-column.phase-2-style .time-separator {
    color: var(--ocean-cyan);
}

/* Time Input Group */
.time-input-group {
    display: flex;
    align-items: center;
    gap: 1dvh;
}

.time-input {
    width: 8dvh;
    height: 5dvh;
    text-align: center;
    background: var(--input-bg);
    border: 0.2dvh solid var(--ocean-accent);
    border-radius: 1dvh;
    font-size: 2.5dvh;
    font-weight: 600;
    color: var(--color-text);
    box-shadow: inset 0 0 1dvh rgba(0, 142, 196, 0.3);
    transition: all 0.2s;
    -moz-appearance: textfield;
}

.time-input::-webkit-outer-spin-button,
.time-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.time-input:focus {
    outline: none;
    border-color: var(--ocean-bright);
    box-shadow: 0 0 1.5dvh rgba(0, 188, 212, 0.5), inset 0 0 1dvh rgba(0, 142, 196, 0.3);
}

.time-separator {
    font-size: 3dvh;
    font-weight: 700;
    color: var(--color-text);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(2dvh); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}