/* ===== EWPV Public Timer — Thème Clair ===== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    --ep-bg:        #F4F6FA;
    --ep-surface:   #FFFFFF;
    --ep-surface2:  #F0F2F7;
    --ep-border:    #DDE1EB;
    --ep-primary:   #E8390E;
    --ep-blue:      #2563EB;
    --ep-green:     #059669;
    --ep-yellow:    #D97706;
    --ep-purple:    #7C3AED;
    --ep-red-soft:  #FEE2E2;
    --ep-red-txt:   #991B1B;
    --ep-text:      #1E2330;
    --ep-muted:     #6B7280;
    --ep-radius:    14px;
    --ep-font:      'Barlow Condensed', sans-serif;
    --ep-body:      'DM Sans', sans-serif;
    --ep-shadow:    0 2px 12px rgba(0,0,0,.07);
    --ep-shadow-lg: 0 8px 32px rgba(0,0,0,.10);
}

.ewpv-app {
    background: var(--ep-bg);
    border-radius: 20px;
    overflow: hidden;
    font-family: var(--ep-body);
    color: var(--ep-text);
    max-width: 760px;
    margin: 0 auto;
    box-shadow: var(--ep-shadow-lg);
    border: 1px solid var(--ep-border);
}

/* Tabs */
.ewpv-tabs { display:flex; background:var(--ep-surface); border-bottom:2px solid var(--ep-border); }
.ewpv-tab {
    flex:1; padding:14px 8px; background:none; border:none; cursor:pointer;
    font-family:var(--ep-font); font-size:15px; font-weight:700;
    color:var(--ep-muted); text-transform:uppercase; letter-spacing:1px;
    transition:all .2s; position:relative;
}
.ewpv-tab.active { color:var(--ep-primary); }
.ewpv-tab.active::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0;
    height:2px; background:var(--ep-primary);
}
.ewpv-tab:hover:not(.active) { color:var(--ep-text); background:var(--ep-surface2); }

/* Panel */
.ewpv-panel { padding:20px; }

/* Inputs */
.ewpv-panel-header { margin-bottom:16px; }
.ewpv-field-inline { display:flex; gap:10px; flex-wrap:wrap; }
.ewpv-pub-input {
    flex:1; min-width:180px;
    background:var(--ep-surface); border:1.5px solid var(--ep-border);
    border-radius:8px; padding:10px 14px; color:var(--ep-text);
    font-family:var(--ep-body); font-size:14px; transition:border-color .2s;
    box-shadow:var(--ep-shadow);
}
.ewpv-pub-input:focus { outline:none; border-color:var(--ep-primary); box-shadow:0 0 0 3px rgba(232,57,14,.12); }
.ewpv-pub-input::placeholder { color:var(--ep-muted); }

/* Buttons */
.ewpv-pub-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 18px; border-radius:8px; border:none; cursor:pointer;
    font-family:var(--ep-font); font-size:15px; font-weight:700;
    letter-spacing:.5px; text-transform:uppercase; transition:all .2s;
}
.ewpv-pub-btn:hover { transform:translateY(-1px); filter:brightness(.93); }
.ewpv-accent { background:var(--ep-primary); color:#fff; box-shadow:0 2px 8px rgba(232,57,14,.25); }
.ewpv-green  { background:var(--ep-green); color:#fff; box-shadow:0 2px 8px rgba(5,150,105,.2); }
.ewpv-ghost  { background:var(--ep-surface); border:1.5px solid var(--ep-border); color:var(--ep-text); }
.ewpv-danger { background:var(--ep-red-soft); color:var(--ep-red-txt); border:1px solid #FECACA; }
.ewpv-sm     { padding:6px 12px; font-size:13px; }

/* Serie */
.fp-serie { background:var(--ep-surface); border:1.5px solid var(--ep-border); border-radius:var(--ep-radius); margin-bottom:14px; overflow:hidden; box-shadow:var(--ep-shadow); }
.fp-serie-head { background:var(--ep-text); padding:12px 16px; display:flex; align-items:center; gap:10px; }
.fp-serie-label { font-family:var(--ep-font); font-size:16px; font-weight:800; color:var(--ep-primary); text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.fp-serie-head input[type="text"] { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:6px; color:#fff; padding:6px 10px; font-family:var(--ep-body); font-size:13px; flex:1; min-width:0; }
.fp-serie-head input::placeholder { color:rgba(255,255,255,.4); }
.fp-serie-body { padding:14px 16px; }

.fp-inter-rest-row {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background:#EDE9FE; border-radius:8px; padding:8px 12px;
    font-size:13px; font-weight:600; color:var(--ep-purple);
    margin-bottom:12px; border:1px solid #DDD6FE;
}
.fp-inter-rest-row input[type="number"] { width:70px; }

/* Sequence */
.fp-seq { background:var(--ep-surface2); border:1.5px solid var(--ep-border); border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.fp-seq-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.fp-seq-title { font-family:var(--ep-font); font-size:13px; font-weight:700; color:var(--ep-muted); text-transform:uppercase; letter-spacing:.5px; }
.fp-seq-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:8px; align-items:end; }
@media(max-width:560px){ .fp-seq-grid { grid-template-columns:1fr 1fr; } }

.fp-field { display:flex; flex-direction:column; gap:3px; }
.fp-field label { font-size:10px; font-weight:700; color:var(--ep-muted); text-transform:uppercase; letter-spacing:.5px; }
.fp-field input { background:var(--ep-surface); border:1.5px solid var(--ep-border); border-radius:6px; color:var(--ep-text); padding:7px 8px; font-family:var(--ep-body); font-size:13px; width:100%; transition:border-color .2s; }
.fp-field input:focus { outline:none; border-color:var(--ep-primary); box-shadow:0 0 0 3px rgba(232,57,14,.1); }
.fp-seq-actions { display:flex; gap:4px; }
.fp-add-seq-row { margin-top:8px; }

.fp-toolbar { display:flex; align-items:center; gap:8px; margin-top:16px; padding-top:14px; border-top:1.5px solid var(--ep-border); flex-wrap:wrap; }
.fp-save-msg { margin-top:10px; padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; }
.fp-save-ok  { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
.fp-save-err { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }

/* Timer screen */
.ewpv-timer-screen {
    display:flex; flex-direction:column; align-items:center;
    padding:10px 20px 30px; min-height:420px;
    background:var(--ep-surface); border-radius:12px; margin:4px;
    box-shadow:var(--ep-shadow);
}

.ewpv-phase-label {
    font-family:var(--ep-font); font-size:22px; font-weight:900;
    text-transform:uppercase; letter-spacing:3px;
    color:var(--ep-primary); margin-bottom:16px; min-height:30px; transition:color .4s;
}
.ewpv-phase-work   { color:var(--ep-green)  !important; }
.ewpv-phase-prep   { color:var(--ep-yellow) !important; }
.ewpv-phase-rest   { color:var(--ep-blue)   !important; }
.ewpv-phase-srrest { color:var(--ep-purple) !important; }
.ewpv-phase-done   { color:var(--ep-green)  !important; }

.ewpv-clock-wrap { position:relative; width:220px; height:220px; margin-bottom:20px; }
.ewpv-ring-svg { width:100%; height:100%; transform:rotate(-90deg); }
.ewpv-ring-bg { fill:none; stroke:var(--ep-border); stroke-width:8; }
.ewpv-ring-fg { fill:none; stroke:var(--ep-primary); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .9s linear, stroke .4s; }
.ewpv-ring-work   { stroke:var(--ep-green)  !important; }
.ewpv-ring-prep   { stroke:var(--ep-yellow) !important; }
.ewpv-ring-rest   { stroke:var(--ep-blue)   !important; }
.ewpv-ring-srrest { stroke:var(--ep-purple) !important; }

.ewpv-clock-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ewpv-clock-time { font-family:var(--ep-font); font-size:62px; font-weight:900; color:var(--ep-text); line-height:1; letter-spacing:-2px; }
.ewpv-clock-sub { font-size:13px; color:var(--ep-muted); font-weight:500; margin-top:2px; }

.ewpv-timer-info { display:flex; gap:0; align-items:stretch; background:var(--ep-surface2); border:1.5px solid var(--ep-border); border-radius:12px; overflow:hidden; margin-bottom:12px; width:100%; max-width:400px; }
.ewpv-tinfo-item { flex:1; display:flex; flex-direction:column; align-items:center; padding:10px 8px; }
.ewpv-tinfo-item span { font-family:var(--ep-font); font-size:22px; font-weight:800; color:var(--ep-text); }
.ewpv-tinfo-item em { font-size:10px; font-weight:600; color:var(--ep-muted); text-transform:uppercase; letter-spacing:.5px; font-style:normal; }
.ewpv-tinfo-sep { width:1px; background:var(--ep-border); margin:8px 0; }

.ewpv-timer-name { font-family:var(--ep-font); font-size:20px; font-weight:700; color:var(--ep-text); letter-spacing:.5px; text-align:center; margin-bottom:16px; min-height:28px; }

.ewpv-timer-controls { display:flex; gap:14px; align-items:center; }
.ewpv-ctrl-btn { width:52px; height:52px; border-radius:50%; background:var(--ep-surface2); border:2px solid var(--ep-border); color:var(--ep-text); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.ewpv-ctrl-btn:hover { border-color:var(--ep-primary); color:var(--ep-primary); background:#FFF5F3; }
.ewpv-ctrl-main { width:68px; height:68px; background:var(--ep-primary); border-color:var(--ep-primary); color:#fff; font-size:24px; box-shadow:0 4px 16px rgba(232,57,14,.35); }
.ewpv-ctrl-main:hover { background:#c7310c; border-color:#c7310c; color:#fff; filter:none; }

/* Programs tab */
.fp-section-title { font-family:var(--ep-font); font-size:16px; font-weight:700; color:var(--ep-muted); text-transform:uppercase; letter-spacing:1px; margin:0 0 12px; border-bottom:1.5px solid var(--ep-border); padding-bottom:8px; }
.fp-prog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:10px; margin-bottom:20px; }
.fp-prog-card { background:var(--ep-surface); border:1.5px solid var(--ep-border); border-radius:10px; padding:14px; transition:border-color .2s, box-shadow .2s; box-shadow:var(--ep-shadow); }
.fp-prog-card:hover { border-color:var(--ep-primary); box-shadow:0 4px 16px rgba(232,57,14,.12); }
.fp-prog-name { font-family:var(--ep-font); font-size:17px; font-weight:800; color:var(--ep-text); margin-bottom:4px; }
.fp-prog-desc { font-size:12px; color:var(--ep-muted); margin-bottom:12px; min-height:18px; }
.fp-prog-actions { display:flex; gap:6px; }
.fp-login-notice { background:#FFF7ED; border:1px solid #FED7AA; border-radius:10px; padding:14px 18px; font-size:14px; color:#92400E; margin-top:8px; }
.fp-login-notice a { color:var(--ep-primary); font-weight:600; }