*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:17px;background:#f5f5f7;color:#1d1d1f}
.app-shell{width:100%;max-width:800px;margin:0 auto;position:relative}
.header{background:white;border-bottom:1px solid #e5e5ea;padding:14px 16px 0;position:sticky;top:0;z-index:100;max-width:800px;width:100%}
.header-title{font-size:17px;font-weight:600;margin-bottom:12px}
.tabs{display:flex}
.tab{flex:1;padding:9px 2px 11px;border:none;background:none;cursor:pointer;font-size:11px;color:#8e8e93;border-bottom:2.5px solid transparent;font-weight:500}
.tab.active{color:#007aff;border-bottom-color:#007aff}
.sec{display:none;padding:10px;padding-bottom:90px}
.sec.active{display:block}

/* SECTION CARD — collapsible */
.sc{background:white;border-radius:13px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden}
.sc-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;cursor:pointer;-webkit-user-select:none}
.sc-title{font-size:17px;font-weight:600;color:#1d1d1f}
.sc-sub{font-size:12px;color:#8e8e93;margin-top:2px}
.sc-arrow{font-size:18px;color:#8e8e93;transition:transform 0.2s;flex-shrink:0;margin-left:8px}
.sc-body{padding:0 16px 14px;border-top:0.5px solid #f2f2f7}
.sc.closed .sc-body{display:none}
.sc.closed .sc-arrow{transform:rotate(-90deg)}

/* COMPLAINT BUTTONS */
.chief-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.chief-btn{padding:11px 8px;border-radius:10px;border:1px solid #e5e5ea;background:#f5f5f7;font-size:13px;text-align:center;cursor:pointer;color:#6d6d72;-webkit-user-select:none;line-height:1.3;transition:all 0.15s}
.chief-btn.active{background:#e8f0ff;border-color:#007aff;color:#0055cc;font-weight:600}
.detail-box{display:none;background:#f5f7ff;border-radius:10px;padding:12px;margin-top:8px;border:1px solid #dce6ff}
.detail-box.open{display:block}
.detail-title{font-size:12px;font-weight:600;color:#0055cc;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:10px}

/* JOINT CHECKBOXES */
.jc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px}
.jc{padding:8px 4px;border-radius:8px;border:1px solid #e5e5ea;background:white;font-size:12px;text-align:center;cursor:pointer;color:#6d6d72;-webkit-user-select:none}
.jc.on{background:#fff0d9;border-color:#ff9500;color:#7a4700;font-weight:600}

/* FORM ELEMENTS */
.row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:0.5px solid #f2f2f7}
.row:last-child{border-bottom:none}
.row-label{font-size:17px;color:#1d1d1f;flex:1;padding-right:8px;line-height:1.4}
.row-sub{font-size:12px;color:#8e8e93;display:block}
.bp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.bp-box{text-align:center;min-width:0;overflow:hidden}
.bp-lbl{font-size:11px;color:#8e8e93;margin-bottom:4px}
.bp-stepper{display:flex;align-items:center;gap:4px;width:100%}
.bp-step-btn{width:48px;height:48px;border-radius:12px;border:1.5px solid #e5e5ea;background:#f5f5f7;font-size:26px;line-height:1;color:#007aff;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-user-select:none}
.bp-step-btn:active{background:#e8f0ff;border-color:#007aff}
.num-stepper{display:flex;align-items:center;gap:4px;width:100%}
.num-step-btn{width:40px;height:40px;border-radius:10px;border:1.5px solid #e5e5ea;background:#f5f5f7;font-size:22px;line-height:1;color:#007aff;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-user-select:none}
.num-step-btn:active{background:#e8f0ff;border-color:#007aff}
.bp-inp{flex:1;min-width:0;padding:10px 2px;border:1px solid #e5e5ea;border-radius:10px;font-size:28px;font-weight:700;text-align:center;color:#1d1d1f;background:white}
.bp-inp::placeholder{color:#c7c7cc;font-weight:300}
.bp-inp::-webkit-inner-spin-button,.bp-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bp-inp{-moz-appearance:textfield}
.bp-inp.high{border-color:#ff3b30;background:#fff5f5}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.mini-box{text-align:center}
.mini-lbl{font-size:11px;color:#8e8e93;margin-bottom:4px}
.mini-inp{width:100%;padding:7px 4px;border:1px solid #e5e5ea;border-radius:10px;font-size:20px;font-weight:700;text-align:center;color:#1d1d1f;background:white}
.mini-inp::placeholder{color:#c7c7cc;font-weight:300}
.mini-inp::-webkit-inner-spin-button,.mini-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mini-inp{-moz-appearance:textfield}
.num-inp::-webkit-inner-spin-button,.num-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.num-inp{-moz-appearance:textfield}
.mini-inp.high{border-color:#ff9500;background:#fff8ee}
.mini-inp.low{border-color:#34c759;background:#f0fff4}
.num-wrap{display:flex;align-items:center;gap:5px}
.num-inp{width:65px;padding:7px 4px;border:1px solid #e5e5ea;border-radius:10px;font-size:15px;text-align:center;color:#1d1d1f;background:white}
.unit{font-size:13px;color:#8e8e93}
.sl-wrap{margin:10px 0 12px}
.sl-head{display:flex;justify-content:space-between;margin-bottom:5px;font-size:14px;color:#3a3a3c}
.sl-val{font-weight:600;color:#007aff}
input[type=range]{width:100%;accent-color:#007aff}
.flags2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.flags3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px}
.flag{padding:10px 6px;border-radius:10px;border:1px solid #e5e5ea;background:#f5f5f7;font-size:12px;text-align:center;cursor:pointer;color:#6d6d72;-webkit-user-select:none;line-height:1.3;transition:all 0.15s}
.flag.on{background:#fff3cd;border-color:#ff9500;color:#7a4700;font-weight:600}
.flag.danger.on{background:#ffe5e5;border-color:#ff3b30;color:#c00}
.flag.green.on{background:#e8f8ee;border-color:#34c759;color:#1a5e2e;font-weight:600}
textarea{width:100%;padding:10px;border:1px solid #e5e5ea;border-radius:10px;font-size:14px;color:#1d1d1f;background:white;resize:none;font-family:inherit;line-height:1.5}
.toggle-wrap{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:0.5px solid #f2f2f7}
.toggle-wrap:last-child{border-bottom:none}
.toggle-lbl{font-size:17px;color:#1d1d1f;flex:1;padding-right:8px;line-height:1.4}
.toggle{width:51px;height:31px;border-radius:16px;border:none;cursor:pointer;position:relative;background:#e5e5ea;flex-shrink:0;transition:background 0.2s}
.toggle.on{background:#34c759}
.toggle.warn.on{background:#ff9500}
.toggle.danger.on{background:#ff3b30}
.toggle.purple.on{background:#af52de}
.toggle.blue.on{background:#007aff}
.thumb{width:27px;height:27px;border-radius:14px;background:white;position:absolute;top:2px;left:2px;transition:left 0.2s;box-shadow:0 2px 4px rgba(0,0,0,0.25)}
.toggle.on .thumb{left:22px}
.time-sel{padding:7px 8px;border:1px solid #e5e5ea;border-radius:10px;font-size:14px;color:#1d1d1f;background:white;min-width:85px}
.sub-lbl{font-size:13px;color:#6d6d72;margin:10px 0 7px;font-weight:500}

/* EATING WINDOW */
.ew-bar{height:8px;border-radius:4px;background:#e5e5ea;margin:10px 0 4px;overflow:hidden;position:relative}
.ew-fill{height:100%;border-radius:4px;background:#34c759;position:absolute;transition:all 0.3s}
.ew-fill.warn{background:#ff9500}
.ew-fill.over{background:#ff3b30}
.ew-info{font-size:13px;color:#8e8e93;text-align:center}

/* SAVE */
.save-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:800px;padding:12px 16px;background:white;border-top:0.5px solid #e5e5ea;z-index:99}
.save-btn{width:100%;padding:15px;border:none;border-radius:13px;font-size:17px;font-weight:600;cursor:pointer;background:#007aff;color:white;transition:background 0.2s}
.save-btn.ok{background:#34c759}
.save-btn:active{opacity:0.85}

/* HISTORY */
.hist-item{background:white;border-radius:13px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,0.07)}
.hi-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.hi-date{font-size:15px;font-weight:600;color:#1d1d1f}
.hi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.hi-cell{background:#f5f5f7;border-radius:8px;padding:7px 6px;text-align:center}
.hi-lbl{font-size:11px;color:#8e8e93;margin-bottom:3px}
.hi-val{font-size:16px;font-weight:700;color:#1d1d1f}
.hi-row{font-size:13px;color:#3a3a3c;margin-bottom:4px;line-height:1.4}
.hi-notes{font-size:13px;color:#8e8e93;margin-top:6px;padding-top:6px;border-top:0.5px solid #f2f2f7;line-height:1.5}
.hi-del-btn{border:none;background:none;font-size:16px;font-weight:600;color:#ff3b30;cursor:pointer;padding:0;opacity:0.5;line-height:1}
.hi-del-btn:active{opacity:1}
.badge{display:inline-block;padding:2px 7px;border-radius:6px;font-size:11px;margin-left:3px}
.bd-red{background:#ffe5e5;color:#c00}
.bd-org{background:#fff0d9;color:#7a4700}
.bd-grn{background:#e8f8ee;color:#1a5e2e}
.bd-blue{background:#e8f0ff;color:#0055cc}

/* LIFEHACKS */
.lh-card{background:white;border-radius:13px;margin-bottom:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.07)}
.lh-head{padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none}
.lh-arr{font-size:18px;color:#8e8e93;transition:transform 0.2s}
.lh-body{display:none;padding:0 16px 14px}
.lh-tip{padding-top:11px;margin-top:11px;border-top:0.5px solid #f2f2f7}
.lh-tip:first-child{border-top:none}
.tip-t{font-size:14px;font-weight:600;color:#1d1d1f;margin-bottom:3px}
.tip-b{font-size:14px;color:#3a3a3c;line-height:1.6}
.hyp{display:flex;gap:7px;margin-bottom:8px;font-size:14px;color:#3a3a3c}
.hyp-a{color:#34c759;font-weight:700;flex-shrink:0}
.ai-box{background:#f5f5f7;border-radius:12px;padding:14px;margin-top:10px;white-space:pre-wrap;line-height:1.7;font-size:14px;display:none}
.hint{font-size:14px;color:#8e8e93;line-height:1.6;margin-bottom:12px}
.empty{text-align:center;color:#8e8e93;padding:40px 16px;font-size:15px;line-height:1.7}
.info-box{background:#e8f0ff;border-radius:10px;padding:12px;margin-bottom:10px;font-size:13px;color:#0055cc;line-height:1.6}
.info-box b{font-weight:600}
.watch-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.watch-stat{background:white;border-radius:10px;padding:10px;text-align:center;border:1px solid #e5e5ea}
.watch-stat-n{font-size:11px;color:#8e8e93;margin-bottom:3px}
.watch-stat-v{font-size:18px;font-weight:600;color:#1d1d1f}

/* LOGIN */
.login-overlay{position:fixed;inset:0;background:#f5f5f7;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:white;border-radius:20px;padding:32px 24px;width:100%;max-width:340px;box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.login-title{font-size:22px;font-weight:700;text-align:center;margin-bottom:8px}
.login-sub{font-size:14px;color:#8e8e93;text-align:center;margin-bottom:24px}
.login-inp{width:100%;padding:13px 16px;border:1px solid #e5e5ea;border-radius:12px;font-size:16px;color:#1d1d1f;background:white;margin-bottom:12px;box-sizing:border-box}
.login-btn{width:100%;padding:15px;border:none;border-radius:13px;font-size:17px;font-weight:600;cursor:pointer;background:#007aff;color:white;margin-top:4px}
.login-err{font-size:13px;color:#ff3b30;text-align:center;margin-top:10px;min-height:18px}