*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--primary:#181d26;--primary-active:#0d1218;--on-primary:#fff;--canvas:#fff;--surface-soft:#f8fafc;--surface-strong:#e0e2e6;--surface-dark:#181d26;--hairline:#ddd;--ink:#181d26;--body:#333840;--muted:#41454d;--border-strong:#9297a0;--coral:#aa2d00;--forest:#0a2e0e;--cream:#f5e9d4;--peach:#fcab79;--mint:#a8d8c4;--yellow:#f4d35e;--mustard:#d9a441;--link:#1b61c9;--info-border:#458fff;--success:#006400;--danger:#c0392b;--radius-xs:2px;--radius-sm:6px;--radius-md:10px;--radius-lg:12px;--radius-full:9999px;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--space-section:96px}html,body{background:var(--canvas);height:100%;color:var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5}#root{background:var(--canvas);flex-direction:column;min-height:100%;display:flex}.app{width:100%;max-width:480px;padding:var(--space-xl) var(--space-md) var(--space-xxl);gap:var(--space-lg);flex-direction:column;margin:0 auto;display:flex}.header{border-bottom:1px solid var(--hairline);min-height:64px;padding-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.header-title{align-items:center;gap:var(--space-xs);display:flex}.header-title h1{color:var(--ink);letter-spacing:-.4px;font-size:18px;font-weight:700}.header-title .icon-wrap{background:var(--primary);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--on-primary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.overview-panel{gap:var(--space-lg);flex-direction:column;display:flex}.breakdown-section{gap:var(--space-xs);flex-direction:column;display:flex}.breakdown-toggle{background:var(--surface-soft);border-radius:var(--radius-md);width:100%;padding:var(--space-sm) var(--space-md);color:var(--body);cursor:pointer;border:none;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;transition:background .15s;display:flex}.breakdown-toggle:hover{background:var(--surface-strong)}.breakdown-list{gap:var(--space-xs);flex-direction:column;display:flex}.breakdown-card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);gap:var(--space-xs);flex-direction:column;display:flex}.breakdown-track-name{color:var(--ink);font-size:13px;font-weight:700}.breakdown-stats{gap:var(--space-xs);grid-template-columns:repeat(4,1fr);display:grid}.breakdown-stat{flex-direction:column;gap:2px;display:flex}.breakdown-stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-size:10px;font-weight:600}.breakdown-stat-value{color:var(--ink);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.breakdown-stat-value.green{color:var(--success)}.breakdown-stat-value.yellow{color:var(--mustard)}.track-overview-item{color:var(--ink)}.track-overview-icon{color:var(--muted);flex-shrink:0}.track-dropdown-divider{background:var(--hairline);height:1px;margin:var(--space-xxs) 0}.track-item--locked{opacity:.45;cursor:not-allowed}.track-switcher{position:relative}.track-switcher-btn{align-items:center;gap:var(--space-xxs);cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0;display:flex}.track-switcher-btn--locked{cursor:default}.track-switcher-label{letter-spacing:-.4px;font-size:18px;font-weight:700}.track-chevron{color:var(--muted);margin-top:1px;transition:transform .15s}.track-chevron.open{transform:rotate(180deg)}.track-switcher-lock{color:var(--coral);margin-top:1px;font-size:8px}.track-dropdown{top:calc(100% + var(--space-xs));background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-md);z-index:100;min-width:220px;position:absolute;left:0;overflow:hidden;box-shadow:0 4px 24px #0000001a}.track-item{align-items:center;gap:var(--space-xs);padding:9px var(--space-sm);cursor:pointer;text-align:left;width:100%;color:var(--body);background:0 0;border:none;font-size:14px;transition:background .1s;display:flex}.track-item:hover{background:var(--surface-soft)}.track-item.active{color:var(--ink);font-weight:600}.track-item-check{width:16px;color:var(--primary);flex-shrink:0;align-items:center;display:flex}.track-item-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.track-rename-input{background:var(--surface-soft);border:1px solid var(--primary);border-radius:var(--radius-xs);min-width:0;color:var(--ink);padding:1px var(--space-xxs);outline:none;flex:1;font-family:inherit;font-size:14px;font-weight:600}.track-item-actions{flex-shrink:0;gap:2px;display:flex}.btn-track-icon{color:var(--muted);cursor:pointer;border-radius:var(--radius-xs);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .12s,background .12s;display:flex}.btn-track-icon:hover{color:var(--body);background:var(--surface-strong)}.btn-track-icon.danger:hover{color:var(--danger);background:#c0392b14}.track-add{border-top:1px solid var(--hairline);color:var(--muted);gap:var(--space-xxs);font-size:13px;font-weight:500}.track-add:hover{color:var(--ink)}.header-actions{align-items:center;gap:var(--space-xxs);display:flex}.btn-icon-header{border:1px solid var(--hairline);color:var(--muted);border-radius:var(--radius-lg);cursor:pointer;background:0 0;justify-content:center;align-items:center;width:32px;height:32px;transition:color .15s,border-color .15s,background .15s;display:flex}.btn-icon-header:hover{color:var(--ink);border-color:var(--border-strong);background:var(--surface-soft)}.export-dialog{max-width:400px}.export-dialog-content{padding:var(--space-xl);gap:var(--space-lg);flex-direction:column;display:flex}.export-dialog-header{align-items:center;gap:var(--space-xs);color:var(--ink);display:flex}.export-dialog-header h2{margin:0;font-size:17px;font-weight:700}.export-section{gap:var(--space-xs);flex-direction:column;display:flex}.export-section-label{color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-size:11px;font-weight:600}.export-track-list{flex-direction:column;gap:2px;display:flex}.export-option{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);cursor:pointer;transition:background .1s;display:flex}.export-option:hover{background:var(--surface-soft)}.export-checkbox{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}.export-option-name{color:var(--body);font-size:14px}.export-format-list{gap:var(--space-xs);grid-template-columns:1fr 1fr;display:grid}.export-format-card{padding:var(--space-sm);border:1px solid var(--hairline);border-radius:var(--radius-md);cursor:pointer;flex-direction:column;gap:2px;transition:border-color .15s,background .15s;display:flex}.export-format-card:hover{background:var(--surface-soft)}.export-format-card.selected{border-color:var(--primary);background:var(--surface-soft)}.export-radio{display:none}.export-format-name{color:var(--ink);font-size:14px;font-weight:700}.export-format-desc{color:var(--muted);font-size:11px}.btn-confirm-export{border-radius:var(--radius-lg);background:var(--primary);color:var(--on-primary);cursor:pointer;border:none;flex:1;padding:10px;font-size:14px;font-weight:600;transition:opacity .15s}.btn-confirm-export:hover{opacity:.85}.btn-confirm-export:disabled{opacity:.4;cursor:not-allowed}.btn-clear{align-items:center;gap:var(--space-xxs);border:1px solid var(--hairline);color:var(--muted);border-radius:var(--radius-lg);padding:var(--space-xxs) var(--space-sm);cursor:pointer;background:0 0;font-size:13px;font-weight:500;transition:background .15s,color .15s,border-color .15s;display:flex}.btn-clear:hover{border-color:var(--danger);color:var(--danger);background:#c0392b0f}.stats-grid{gap:var(--space-xs);grid-template-columns:1fr 1fr;display:grid}.stat-card{background:var(--surface-soft);border-radius:var(--radius-md);padding:var(--space-sm);gap:var(--space-xxs);flex-direction:column;display:flex}.stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-size:10px;font-weight:600}.stat-value{color:var(--ink);letter-spacing:-.3px;font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}.stat-value.green{color:var(--success)}.stat-value.yellow{color:var(--mustard)}.btn-track-wrap{border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-md);align-items:center;gap:var(--space-md);background:var(--coral);flex-direction:column;transition:background .35s;display:flex}.btn-track-wrap.tracking{background:var(--surface-dark)}.elapsed-display{color:#fffffff2;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;align-items:center;min-height:48px;font-size:40px;font-weight:800;display:flex}.btn-track{border-radius:var(--radius-full);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-xxs);letter-spacing:.2px;background:var(--canvas);width:140px;height:140px;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;flex-direction:column;font-size:16px;font-weight:700;transition:transform .12s,box-shadow .12s;display:flex;box-shadow:0 4px 20px #0000002e}.btn-track:hover{transform:scale(1.04);box-shadow:0 8px 32px #00000038}.btn-track:active{transform:scale(.97)!important}.btn-track.active{animation:1.8s ease-in-out infinite btn-pulse}@keyframes btn-pulse{0%,to{box-shadow:0 4px 20px #0000002e,0 0 #ffffff8c}50%{box-shadow:0 4px 20px #0000002e,0 0 0 18px #fff0}}.btn-track-hint{color:#ffffffb3;font-size:13px;font-weight:500}.guidance-card{background:var(--cream);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);align-items:flex-start;gap:var(--space-sm);display:flex}.guidance-icon{color:var(--mustard);flex-shrink:0;margin-top:1px}.guidance-text{color:var(--forest);font-size:13px;line-height:1.55}.guidance-text strong{color:var(--forest);font-weight:700}.btn-add-manual{border:1px solid var(--hairline);color:var(--muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;transition:color .15s,border-color .15s,background .15s;display:flex}.btn-add-manual:hover{color:var(--ink);border-color:var(--primary);background:var(--surface-soft)}.add-contraction-dialog{max-width:380px}.add-contraction-content{padding:var(--space-xl);gap:var(--space-lg);flex-direction:column;display:flex}.add-contraction-content h2{color:var(--ink);margin:0;font-size:17px;font-weight:700}.add-field{gap:var(--space-xs);flex-direction:column;display:flex}.add-field-label{color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-size:11px;font-weight:600}.add-field-optional{text-transform:none;letter-spacing:0;color:var(--muted);font-size:11px;font-weight:400}.add-datetime-input{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-sm);color:var(--ink);padding:var(--space-xs) var(--space-sm);width:100%;font-family:inherit;font-size:14px;transition:border-color .15s}.add-datetime-input:focus{border-color:var(--primary);outline:none}.add-field-error{color:var(--danger);font-size:12px}.history-section{gap:var(--space-sm);flex-direction:column;display:flex}.history-header{align-items:center;gap:var(--space-xs);display:flex}.history-title{color:var(--muted);text-transform:uppercase;letter-spacing:.8px;flex:1;font-size:11px;font-weight:600}.history-count{background:var(--surface-strong);color:var(--body);border-radius:var(--radius-full);padding:2px 8px;font-size:11px;font-weight:700}.history-empty{background:var(--surface-soft);border:1px dashed var(--surface-strong);border-radius:var(--radius-md);padding:var(--space-xl) var(--space-md);text-align:center;color:var(--muted);align-items:center;gap:var(--space-xs);flex-direction:column;font-size:14px;display:flex}.history-list{gap:var(--space-xs);flex-direction:column;display:flex}.contraction-card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);align-items:center;gap:var(--space-sm);transition:border-color .15s;display:flex}.contraction-card.in-progress{border-color:var(--coral);background:#aa2d000a}.contraction-card.editing{border-color:var(--primary);background:var(--surface-soft)}.contraction-index{border-radius:var(--radius-full);background:var(--surface-strong);width:26px;height:26px;color:var(--muted);flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.contraction-index.latest{background:var(--primary);color:var(--on-primary)}.contraction-info{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.contraction-time{color:var(--ink);font-size:13px;font-weight:600}.contraction-meta{gap:var(--space-sm);flex-wrap:wrap;display:flex}.meta-item{color:var(--body);align-items:center;gap:3px;font-size:12px;display:flex}.meta-item svg{opacity:.6;flex-shrink:0}.meta-item.duration{color:var(--success)}.meta-item.interval{color:var(--mustard)}.meta-item.in-progress-label{color:var(--coral)}.card-actions{flex-shrink:0;gap:2px;display:flex}.btn-icon{color:var(--muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:color .15s,background .15s;display:flex}.btn-icon:hover{color:var(--body);background:var(--surface-soft)}.btn-icon.danger:hover{color:var(--danger);background:#c0392b14}.duration-editor{align-items:center;gap:5px;margin-top:3px;display:flex}.btn-nudge{border-radius:var(--radius-sm);border:1px solid var(--hairline);background:var(--surface-soft);width:26px;height:26px;color:var(--body);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:flex}.btn-nudge:hover{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}.duration-input{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-sm);width:56px;color:var(--ink);text-align:center;-moz-appearance:textfield;padding:3px 6px;font-size:14px;font-weight:600}.duration-input::-webkit-outer-spin-button{-webkit-appearance:none}.duration-input::-webkit-inner-spin-button{-webkit-appearance:none}.duration-input:focus{border-color:var(--primary);outline:none}.duration-input-unit{color:var(--muted);font-size:13px;font-weight:500}.edit-actions{flex-shrink:0;gap:4px;display:flex}.btn-edit-action{border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;width:28px;height:28px;transition:opacity .15s;display:flex}.btn-edit-action.save{background:var(--primary);color:var(--on-primary)}.btn-edit-action.cancel{background:var(--surface-strong);color:var(--body)}.btn-edit-action:hover{opacity:.8}.confirm-dialog{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);width:calc(100% - 32px);max-width:360px;color:var(--ink);margin:0;padding:0;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 32px #0000001f}.confirm-dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000073}.confirm-dialog-content{padding:var(--space-xl);align-items:center;gap:var(--space-sm);text-align:center;flex-direction:column;display:flex}.confirm-icon{border-radius:var(--radius-full);width:44px;height:44px;color:var(--danger);background:#c0392b1a;justify-content:center;align-items:center;display:flex}.confirm-dialog h2{color:var(--ink);margin:0;font-size:17px;font-weight:700}.confirm-dialog p{color:var(--body);margin:0;font-size:13px;line-height:1.5}.confirm-actions{gap:var(--space-xs);width:100%;margin-top:var(--space-xxs);display:flex}.btn-cancel{border-radius:var(--radius-lg);border:1px solid var(--hairline);background:var(--canvas);color:var(--body);cursor:pointer;flex:1;padding:10px;font-size:14px;font-weight:600;transition:background .15s,color .15s}.btn-cancel:hover{background:var(--surface-soft);color:var(--ink)}.btn-confirm-delete{border-radius:var(--radius-lg);background:var(--danger);color:#fff;cursor:pointer;border:none;flex:1;padding:10px;font-size:14px;font-weight:600;transition:opacity .15s}.btn-confirm-delete:hover{opacity:.88}.pain-rating{margin-top:var(--space-xxs);gap:4px;display:flex}.pain-dot{border-radius:var(--radius-full);border:2px solid var(--hairline);background:var(--surface-soft);width:24px;height:24px;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;font-size:10px;font-weight:700;transition:border-color .12s,background .12s,color .12s,transform .1s;display:flex}.pain-dot:hover{border-color:var(--dot-color,var(--primary));color:var(--dot-color,var(--primary));transform:scale(1.15)}.pain-dot.selected{background:var(--dot-color,var(--primary));border-color:var(--dot-color,var(--primary));color:#fff;transform:scale(1.1)}.btn-show-more{width:100%;padding:var(--space-sm);background:var(--canvas);border:1px dashed var(--surface-strong);border-radius:var(--radius-md);color:var(--muted);cursor:pointer;font-size:13px;font-weight:500;transition:background .15s,color .15s,border-color .15s}.btn-show-more:hover{background:var(--surface-soft);color:var(--body);border-color:var(--border-strong)}.charts-section{gap:var(--space-sm);flex-direction:column;display:flex}.chart-block{background:var(--surface-soft);border-radius:var(--radius-md);padding:var(--space-md) var(--space-xs) var(--space-sm)}.chart-title{color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:var(--space-sm);padding-left:var(--space-xs);font-size:11px;font-weight:600}.chart-tooltip{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);font-size:12px;line-height:1.6;box-shadow:0 2px 8px #00000014}.chart-tooltip-label{color:var(--muted);margin-bottom:2px;font-weight:600}