/* ═══════════════════════════════════════════════════
   Interval Timer Pro — style.css v1.0
   © Seremailragno Edizioni
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=Barlow:wght@400;600&family=Share+Tech+Mono&display=swap');

#itp-app, #itp-app * { box-sizing: border-box; }
#itp-app {
    font-family: 'Barlow', sans-serif;
    max-width: 480px;
    margin: 24px auto 40px;
    background: #0a0c12;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
    border: 1px solid #1e2230;
    color: #fff;
    user-select: none;
}

/* ── Overlay / Modal ────────────────────────────── */
.itp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.itp-modal {
    background: #13151f;
    border: 1px solid #2a2e42;
    border-radius: 16px;
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,.8);
    animation: itpSlideUp .25s ease;
}
.itp-modal-sm { max-width: 320px; }
@keyframes itpSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.itp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #1e2230;
}
.itp-modal-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #e85500;
}
.itp-modal-close {
    background: none;
    border: none;
    color: #606880;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color .2s;
}
.itp-modal-close:hover { color: #fff; }
.itp-modal-body { padding: 18px 20px 20px; }

/* Settings items */
.itp-setting-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #1a1e2a;
    gap: 12px;
}
.itp-setting-group:last-of-type { border-bottom: none; }
.itp-setting-label {
    font-size: .85rem;
    color: #9098b8;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-shrink: 0;
}
.itp-setting-group select {
    background: #0d0f18;
    border: 1px solid #252840;
    border-radius: 8px;
    color: #dde1f0;
    font-family: 'Barlow', sans-serif;
    font-size: .88rem;
    padding: 7px 10px;
    outline: none;
    flex: 1;
    min-width: 0;
}
.itp-slider-row { display: flex; align-items: center; gap: 10px; flex: 1; }
.itp-slider-row input[type="range"] { flex: 1; accent-color: #e85500; }
.itp-slider-row span { font-size: .8rem; color: #e85500; min-width: 36px; text-align: right; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; }

/* Toggle switch */
.itp-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.itp-toggle input { opacity: 0; width: 0; height: 0; }
.itp-toggle-slider { position: absolute; inset: 0; background: #252840; border-radius: 26px; cursor: pointer; transition: background .2s; }
.itp-toggle-slider::before { content:''; position:absolute; height:20px; width:20px; left:3px; bottom:3px; background:#606880; border-radius:50%; transition:.2s; }
.itp-toggle input:checked + .itp-toggle-slider { background: #e85500; }
.itp-toggle input:checked + .itp-toggle-slider::before { transform: translateX(20px); background:#fff; }

/* Picker */
.itp-picker-wrap { margin-bottom: 16px; }
.itp-picker-cols {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.itp-picker-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.itp-picker-col-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4a5068;
    margin-bottom: 4px;
}
.itp-picker-col button {
    background: none;
    border: none;
    color: #606880;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 10px;
    transition: color .15s;
}
.itp-picker-col button:hover { color: #e85500; }
.itp-picker-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.4rem;
    font-weight: 700;
    color: #e85500;
    min-width: 72px;
    text-align: center;
    background: #0d0f18;
    border: 1px solid #2a2e42;
    border-radius: 10px;
    padding: 8px 4px;
    line-height: 1;
}

/* ── Top bar ────────────────────────────────────── */
.itp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #0d0f16;
    border-bottom: 1px solid #1a1e2a;
}
.itp-icon-btn {
    background: none;
    border: none;
    color: #606880;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: color .2s, background .2s;
    display: flex;
    align-items: center;
}
.itp-icon-btn:hover { color: #e85500; background: rgba(232,85,0,.1); }
.itp-topbar-center { text-align: center; }
.itp-topbar-label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #e85500;
    margin-bottom: 2px;
}
.itp-topbar-time {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.6rem;
    color: #fff;
    letter-spacing: .04em;
    line-height: 1;
}

/* ── Tabs ───────────────────────────────────────── */
.itp-tabs {
    display: flex;
    background: #080a0f;
    border-bottom: 2px solid #1a1e2a;
}
.itp-tab {
    flex: 1;
    padding: 13px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #4a5068;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, border-color .2s;
    margin-bottom: -2px;
}
.itp-tab:hover { color: #9098b8; }
.itp-tab.active { color: #e85500; border-bottom-color: #e85500; }

/* ── Phase blocks ───────────────────────────────── */
.itp-phase-block {
    position: relative;
    cursor: pointer;
    transition: filter .15s;
    overflow: hidden;
}
.itp-phase-block:active { filter: brightness(.92); }
.itp-phase-hint {
    position: absolute;
    bottom: 8px;
    right: 14px;
    font-size: .68rem;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .4;
    color: inherit;
}

/* PREPARA — large orange block */
.itp-phase-prepare {
    background: #e85500;
    padding: 22px 24px 28px;
    text-align: center;
}
.itp-phase-prepare .itp-phase-hint { color: #000; }
.itp-phase-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1;
    margin-bottom: 4px;
}
.itp-phase-prepare .itp-phase-label { color: #000; font-size: 2rem; }
.itp-phase-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    color: #000;
}
.itp-phase-time-sm { font-size: 3rem; color: #fff; }

/* Active phase pulse */
.itp-phase-prepare.itp-active { animation: itpPulseOrange .8s ease-in-out infinite alternate; }
.itp-phase-work.itp-active    { animation: itpPulseGreen .8s ease-in-out infinite alternate; }
.itp-phase-rest.itp-active    { animation: itpPulseBlue .8s ease-in-out infinite alternate; }
@keyframes itpPulseOrange { from{filter:brightness(1)} to{filter:brightness(1.12)} }
@keyframes itpPulseGreen  { from{filter:brightness(1)} to{filter:brightness(1.12)} }
@keyframes itpPulseBlue   { from{filter:brightness(1)} to{filter:brightness(1.12)} }

/* LAVORA — dark with green accent */
.itp-phase-work {
    background: #0f1a10;
    border-top: 3px solid #22aa44;
    padding: 14px 24px 20px;
    text-align: center;
}
.itp-phase-work .itp-phase-label { color: #22aa44; font-size: 1rem; letter-spacing: .12em; }
.itp-phase-work.itp-active { background: #0a1a0c; border-color: #2de055; }

/* RIPOSA — dark with blue accent */
.itp-phase-rest {
    background: #0d1220;
    border-top: 3px solid #3a7bd5;
    padding: 14px 24px 20px;
    text-align: center;
}
.itp-phase-rest .itp-phase-label { color: #3a7bd5; font-size: 1rem; letter-spacing: .12em; }
.itp-phase-rest.itp-active { background: #0a1020; border-color: #5599ff; }

/* Flash on phase change */
.itp-flash { animation: itpFlash .3s ease !important; }
@keyframes itpFlash { 0%{filter:brightness(2)} 100%{filter:brightness(1)} }

/* ── Bottom controls ────────────────────────────── */
.itp-controls {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 22px 24px 20px;
    background: #0d0f16;
    border-top: 2px solid #1a1e2a;
    gap: 16px;
}
.itp-rounds-wrap {
    cursor: pointer;
    text-align: center;
    min-width: 80px;
    padding: 8px;
    border-radius: 10px;
    transition: background .2s;
}
.itp-rounds-wrap:hover { background: rgba(232,85,0,.08); }
.itp-rounds-num {
    font-family: 'Share Tech Mono', monospace;
    font-size: 3.5rem;
    line-height: 1;
    color: #4eb8f5;
    display: block;
}
.itp-rounds-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    margin-top: 4px;
    display: block;
}

/* Play button */
.itp-play-btn {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e85500, #c04000);
    border: 4px solid rgba(232,85,0,.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 28px rgba(232,85,0,.5), 0 0 0 8px rgba(232,85,0,.08);
    transition: transform .15s, box-shadow .15s, filter .15s;
    flex-shrink: 0;
}
.itp-play-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 36px rgba(232,85,0,.65), 0 0 0 12px rgba(232,85,0,.1);
}
.itp-play-btn:active { transform: scale(.96); }

.itp-avvia-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #e85500;
    min-width: 80px;
    text-align: center;
}

/* ── Buttons ────────────────────────────────────── */
.itp-btn {
    display: inline-block;
    background: linear-gradient(135deg,#e85500,#c04000);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .15s, transform .15s;
    box-shadow: 0 4px 16px rgba(232,85,0,.3);
}
.itp-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.itp-btn-full { width: 100%; margin-top: 16px; text-align: center; }

/* ── Footer ─────────────────────────────────────── */
.itp-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid #1a1e2a;
    background: #080a0f;
    flex-wrap: wrap;
}
.itp-footer-logo { height: 28px; width: auto; opacity: .7; transition: opacity .2s; }
.itp-footer-logo:hover { opacity: 1; }
.itp-footer-text { font-size: .72rem; color: #3a4060; }
.itp-footer-text a { color: #e85500; text-decoration: none; }
.itp-footer-text a:hover { text-decoration: underline; }
.itp-disclaimer { color: #2a3048; }

/* ── Completed overlay ──────────────────────────── */
.itp-done-banner {
    background: #e85500;
    text-align: center;
    padding: 18px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #000;
    animation: itpFlash .4s ease;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 480px) {
    .itp-phase-time { font-size: 4.5rem; }
    .itp-play-btn { width: 78px; height: 78px; }
    .itp-rounds-num { font-size: 3rem; }
}