:root{--timer-max-width:1180px}.timer-page{width:min(var(--timer-max-width), 95vw);margin:calc(var(--app-header-offset,120px)) auto 96px;flex-direction:column;gap:32px;display:flex}.timer-hero{border-radius:var(--brand-radius);border:1px solid var(--brand-border);background:var(--brand-surface);box-shadow:var(--brand-shadow);justify-content:space-between;align-items:center;gap:24px;padding:32px;display:flex}.hero-eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--brand-subtle-text);margin:0 0 8px;font-size:.8rem}.timer-hero h1{color:var(--brand-heading);margin:0 0 12px;font-size:clamp(2rem,3vw,2.8rem)}.timer-hero p{color:var(--brand-text);margin:0}.hero-actions .btn-link{background:var(--brand-accent);color:#fff}.timer-grid{grid-template-columns:minmax(280px,360px) minmax(0,1fr);align-items:start;gap:24px;display:grid}.quick-card,.cadence-card,.seo-card{border-radius:var(--brand-radius);border:1px solid var(--brand-border);background:var(--brand-surface,#ffffffe0);box-shadow:var(--brand-shadow);flex-direction:column;gap:16px;padding:24px;display:flex}.card-header h2{color:var(--brand-heading);margin:0}.card-header p{color:var(--brand-subtle-text);margin:6px 0 0}.quick-display{text-align:center;border:1px solid var(--brand-border,#00000014);background:var(--brand-surface,#ffffffe6);color:var(--brand-heading);border-radius:18px;padding:16px;font-size:clamp(2.5rem,6vw,3.6rem);font-weight:700;box-shadow:inset 0 0 0 1px #fff6}.quick-inputs{justify-content:center;gap:16px;display:flex}.quick-inputs label{color:var(--brand-heading);flex-direction:column;gap:6px;font-weight:600;display:flex}.quick-inputs input{border:1px solid var(--brand-border);text-align:center;border-radius:12px;width:120px;padding:10px;font-size:1rem}.quick-controls{justify-content:center;gap:12px;padding:10px;display:flex}.quick-controls button,.editor-toolbar button,.editor-footer button,.runner-controls button,.panel-actions button{border:1px solid var(--brand-border);background:var(--brand-accent);color:#fff;cursor:pointer;border-radius:14px;padding:12px 18px;font-weight:700;transition:transform .15s,box-shadow .15s}.quick-controls button.ghost,.editor-toolbar .ghost,.editor-footer .ghost,.runner-controls .ghost,.panel-actions .ghost{color:var(--brand-accent);box-shadow:none;background:0 0;border-style:dashed}.quick-controls button:disabled,.runner-controls button:disabled,.editor-toolbar button:disabled{opacity:.6;cursor:not-allowed}.quick-controls button:hover:not(:disabled),.editor-toolbar button:hover:not(:disabled),.editor-footer button:hover:not(:disabled),.runner-controls button:hover:not(:disabled),.panel-actions button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 24px #0000001f}.quick-status{text-align:center;color:var(--brand-subtle-text);min-height:1.2em}.cadence-card{gap:24px;position:relative;overflow:hidden}.cadence-card__header{justify-content:space-between;align-items:center;gap:16px;display:flex}.cadence-layout{grid-template-columns:minmax(230px,280px) minmax(0,1fr);grid-template-areas:"presets runner";align-items:start;gap:20px;display:grid}#editorDialog{border-radius:var(--brand-radius);box-shadow:var(--brand-shadow);background:0 0;border:none;width:1000px;max-width:90vw;padding:0}#editorDialog::backdrop{backdrop-filter:blur(4px);background:#00000080}.editor-close-btn{z-index:1;text-align:center;width:40px;height:40px;color:var(--brand-subtle-text);cursor:pointer;background:0 0;border:none;border-radius:50%;font-size:1.8rem;line-height:40px;position:absolute;top:0;right:5px}.preset-panel{border:1px solid var(--brand-border);background:var(--brand-surface,#fffffff2);border-radius:18px;flex-direction:column;grid-area:presets;gap:16px;padding:18px;display:flex}.panel-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.panel-header h3{color:var(--brand-heading);margin:0}.panel-actions{gap:8px;display:flex}.preset-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.preset-item{background:var(--brand-surface,#fffffff2);color:var(--brand-accent,#fff);cursor:pointer;border:1px solid #00000014;border-radius:16px;padding:14px 16px;transition:border-color .15s,box-shadow .15s,transform .15s}.preset-item__header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;display:flex}.preset-title{color:var(--brand-heading);font-size:1.05rem;font-weight:700}.preset-actions{gap:8px;margin-top:12px;display:flex}.preset-edit,.preset-remove{border:1px dashed var(--brand-border);color:var(--brand-subtle-text);cursor:pointer;background:#ffffffbf;border-radius:12px;padding:6px 12px;font-size:.85rem;font-weight:600;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}.preset-edit:hover,.preset-edit:focus-visible{color:var(--brand-accent);background:#3498db1f;border-color:#3498db80;outline:none;box-shadow:0 8px 18px #3498db24}.preset-remove:hover,.preset-remove:focus-visible{color:#c0392b;background:#c0392b1f;border-color:#c0392b80;outline:none;box-shadow:0 8px 18px #c0392b24}.preset-item p{color:var(--brand-subtle-text);margin:6px 0 0;font-size:.92rem}.preset-item:hover{border-color:#3498db66;transform:translateY(-1px);box-shadow:0 10px 24px #00000014}.preset-item[data-selected=true]{border-color:#3498dba6;box-shadow:0 16px 32px #3498db2e}.editor-panel{border:1px solid var(--brand-border);background:#fffffff2;border-radius:18px;flex-direction:column;grid-area:editor;gap:16px;padding:20px;display:flex}.editor-header{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.editor-header label{color:var(--brand-heading);flex-direction:column;gap:6px;font-weight:600;display:flex}.editor-header input{border:1px solid var(--brand-border);border-radius:12px;padding:10px;font-size:1rem}.editor-toolbar{justify-content:space-between;align-items:center;gap:12px;display:flex}.editor-actions{gap:8px;display:flex}.stage-list{gap:14px;max-height:380px;padding-right:6px;display:grid;overflow-y:auto}.stage-row{background:#fffffff5;border:1px solid #00000014;border-radius:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:18px 20px;transition:border-color .2s,box-shadow .2s;display:grid;box-shadow:inset 0 0 0 1px #ffffff73}.stage-row:hover{border-color:#3498db66;box-shadow:0 14px 28px #0000001f}.stage-row:focus-within{border-color:#3498db99;box-shadow:0 18px 34px #3498db29}.stage-field{color:var(--brand-heading);flex-direction:column;gap:8px;display:flex}.stage-field--title{grid-column:1/-1}.stage-field--controls{align-self:stretch}.field-label{text-transform:uppercase;letter-spacing:.08em;color:var(--brand-subtle-text);font-size:.85rem;font-weight:700}.stage-row input[type=text],.stage-row input[type=number],.stage-row select{border:1px solid var(--brand-border);background:#fffffff2;border-radius:12px;padding:12px;font-size:1rem;box-shadow:inset 0 1px 2px #0000000a}.stage-row input[type=text]::placeholder{color:#00000059}.stage-row input[type=color]{border:1px solid var(--brand-border);background:0 0;border-radius:14px;width:100%;min-height:46px;padding:4px}.stage-field--color input[type=color]{box-shadow:inset 0 0 0 1px #0000000f}.stage-row select{cursor:pointer}.duration-group{color:var(--brand-heading);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;gap:10px;font-weight:600;display:grid}.duration-unit{color:var(--brand-subtle-text);font-size:.88rem}.duration-group input[type=number]{text-align:center;width:100%;min-height:46px}.row-controls{gap:8px;display:flex}.row-controls button{border:1px solid var(--brand-border);cursor:pointer;background:#fffffff2;border-radius:12px;width:44px;height:44px;font-size:1rem;font-weight:700;transition:background .15s,color .15s,box-shadow .15s}.row-controls button:hover,.row-controls button:focus-visible{background:var(--brand-accent);color:#fff;outline:none;box-shadow:0 10px 20px #3498db40}.stage-field--controls{flex-direction:column;justify-content:space-between;display:flex}.editor-footer{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.editor-footer #sharePresetBtn[data-shared=true]:after{content:"Copied!";color:var(--brand-heading);margin-left:10px;font-weight:600}.runner-panel{border:1px solid var(--brand-border);background:var(--brand-surface);border-radius:18px;flex-direction:column;grid-area:runner;gap:16px;padding:20px;display:flex}#newPresetDialog{border-radius:var(--brand-radius);box-shadow:var(--brand-shadow);background:var(--brand-surface);border:none;width:480px;max-width:90vw;padding:28px}#newPresetDialog::backdrop{backdrop-filter:blur(4px);background:#00000080}.new-preset-form{flex-direction:column;gap:20px;display:flex}.new-preset-form h2{color:var(--brand-heading);margin:0 0 8px}.new-preset-form label{color:var(--brand-heading);flex-direction:column;gap:8px;font-weight:600;display:flex}.new-preset-form input{border:1px solid var(--brand-border);border-radius:12px;padding:12px;font-size:1rem}.dialog-actions{justify-content:flex-end;gap:12px;margin-top:12px;display:flex}.dialog-actions button{border:1px solid var(--brand-border);background:var(--brand-accent);color:#fff;cursor:pointer;border-radius:14px;padding:12px 20px;font-weight:700}.dialog-actions button.ghost{color:var(--brand-accent);background:0 0;border-style:dashed}.runner-panel h3{color:var(--brand-heading);margin:0}.runner-display{text-align:center;background:#0000000a;border:1px solid #0000001a;border-radius:18px;padding:20px}.runner-display span{color:var(--brand-heading);font-size:clamp(2rem,5vw,3rem);font-weight:700}.runner-status{color:var(--brand-subtle-text);margin:0;font-size:.95rem}.runner-controls{flex-wrap:wrap;gap:8px;display:flex}.stage-timeline{gap:8px;margin:0;padding:0;list-style:none;display:grid}.stage-timeline li{background:#fffffff0;border:1px solid #00000014;border-radius:16px;justify-content:space-between;align-items:center;min-height:60px;padding:14px 16px;display:flex;position:relative;overflow:hidden}.stage-timeline li:before{content:"";opacity:.24;background:var(--stage-color,#3498db);pointer-events:none;border-radius:16px;position:absolute;inset:0}.stage-timeline li:after{content:"";border-left:6px solid var(--stage-color,#3498db);opacity:.7;pointer-events:none;border-radius:16px;position:absolute;inset:0}.timeline-label{color:var(--brand-heading);font-size:1.05rem;font-weight:700;position:relative}.timeline-duration{color:#000000b3;font-size:.98rem;font-weight:700;position:relative}.stage-timeline li[data-state=active]{border-color:var(--stage-color,#3498db);box-shadow:0 18px 36px #00000029}.stage-timeline li[data-state=complete]{opacity:.65}.stage-timeline li[data-state=paused]:before{opacity:.32;background:repeating-linear-gradient(135deg, var(--stage-color,#3498db), var(--stage-color,#3498db) 12px, #ffffffe6 12px, #ffffffe6 24px)}.timeline-empty{text-align:center;color:var(--brand-subtle-text);border:1px dashed var(--brand-border);background:#ffffffd9;border-radius:14px;padding:20px}.seo-card{line-height:1.6}.seo-card h2{color:var(--brand-heading);margin:0 0 12px}.seo-card ul{color:var(--brand-text);margin:12px 0 0;padding-left:20px}@media (width<=1100px){.timer-grid{grid-template-columns:1fr}.cadence-layout{grid-template-columns:1fr;grid-template-areas:"presets""editor""runner"}.preset-panel,.editor-panel,.runner-panel{max-height:none}.stage-list{max-height:none;padding-right:0}}@media (width<=900px){.cadence-card{padding:20px}.cadence-layout{gap:16px}.preset-panel,.editor-panel,.runner-panel{padding:16px}.panel-header{flex-direction:column;align-items:stretch}.panel-actions{width:100%}.panel-actions button{flex:auto;min-width:0}.preset-item{padding:16px}.preset-item__header{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:10px}.preset-remove{text-align:center;width:100%}.stage-row{grid-template-columns:1fr}.row-controls{justify-content:flex-start;width:100%}}@media (width<=720px){.timer-hero{flex-direction:column;align-items:flex-start}.quick-inputs{flex-direction:column;align-items:stretch}.quick-inputs input{width:100%}.editor-toolbar{flex-direction:column;align-items:flex-start}.editor-footer{justify-content:stretch}.stage-row{grid-template-columns:1fr}.stage-field--controls{flex-direction:column;gap:8px}.row-controls{justify-content:flex-start;width:100%}}@media (width<=600px){.duration-group{grid-template-rows:repeat(2,auto);grid-template-columns:minmax(0,1fr) auto;row-gap:8px}.duration-group input:first-child{grid-area:1/1}.duration-group .duration-unit:nth-child(2){grid-area:1/2;justify-self:end}.duration-group input:nth-child(3){grid-area:2/1}.duration-group .duration-unit:nth-child(4){grid-area:2/2;justify-self:end}.stage-timeline li{flex-direction:column;align-items:flex-start;gap:6px}.timeline-duration{font-size:1rem}}