:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#383238;background:#f7f3f1;font-synthesis:none;--ink:#383238;--muted:#8b8183;--rose:#b47c7d;--deep:#87565f;--paper:#fff;--line:#eee5e3;--blush:#f4e8e5;--sage:#e8ede7;--shadow:0 9px 32px rgba(74,48,52,.055);-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}#app{max-width:760px;margin:0 auto;min-height:100vh;background:#faf8f7;position:relative;padding-bottom:calc(93px + env(safe-area-inset-bottom))}
.topbar{height:76px;display:flex;justify-content:space-between;align-items:center;padding:12px 26px;background:#faf8f7;position:sticky;top:0;z-index:12;border-bottom:1px solid rgba(220,205,202,.35)}.brand{display:flex;gap:11px;align-items:center}.brand-icon{background:#e8d1c9;color:#8d5861;width:37px;height:37px;display:grid;place-items:center;border-radius:12px;font-size:26px;font-family:Georgia,serif}.brand strong{display:block;font-size:23px;font-family:Georgia,serif;font-weight:500;letter-spacing:-.9px}.brand span{font-size:8px;letter-spacing:2.2px;color:#9e8280;font-weight:700}.top-action{border:1px solid #eddfdc;background:#fff;border-radius:12px;width:38px;height:38px;color:#a07979;font-size:24px}.main{padding:20px 22px 36px}.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);background:#fff;border-top:1px solid #eee2df;display:flex;justify-content:space-around;align-items:center;height:calc(69px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:13;box-shadow:0 -8px 35px rgba(99,72,77,.055)}.navbutton{border:0;background:transparent;color:#a6999a;display:flex;flex:1;align-items:center;flex-direction:column;gap:3px;padding:8px 1px;font-size:10px}.navicon{font-size:23px;line-height:25px}.navbutton.active{color:#96616a;font-weight:700}
h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,serif;font-size:32px;letter-spacing:-1.05px;font-weight:500;line-height:1.16;margin-bottom:8px}h2{font-family:Georgia,serif;font-size:24px;font-weight:500;letter-spacing:-.5px;margin:0 0 10px}h3{font-size:15px;margin-bottom:10px}.eyebrow{text-transform:uppercase;letter-spacing:2.1px;font-weight:750;font-size:10px;color:#ab7d7d;margin:0 0 9px}.subtle{color:var(--muted);line-height:1.5;font-size:13px}.tiny{font-size:11px;color:var(--muted)}.section{margin-top:24px}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.section-header h2{margin-bottom:0}.linkbtn{background:none;border:0;color:#955f68;font-size:12px;font-weight:650;padding:7px 0}.card{border:1px solid #f0e8e6;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:18px;margin-bottom:11px}.welcome{background:linear-gradient(116deg,#efe0db 0%,#f8efeb 62%,#f7f2e6 100%);padding:22px 21px 20px;border-radius:24px;position:relative;overflow:hidden;margin-bottom:18px;min-height:163px}.welcome:after{content:'✳';font-family:Georgia,serif;position:absolute;font-size:175px;opacity:.17;right:-10px;top:-43px;color:#a77675;pointer-events:none}.welcome .subtle{max-width:260px;color:#7d6e71;font-size:12px}.welcome h1{max-width:310px;position:relative;z-index:2}.welcome .eyebrow{position:relative;z-index:2}.welcome-pills{display:flex;gap:7px;flex-wrap:wrap;position:relative;z-index:2;margin-top:15px}.pill{border-radius:999px;padding:7px 10px;background:#ffffffbc;border:1px solid #f0dfda;font-size:11px;color:#835d61;display:inline-flex;gap:4px;align-items:center}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{background:#fff;border:1px solid #f0e8e6;padding:14px;border-radius:17px;min-height:86px}.metric strong{font-family:Georgia,serif;font-weight:500;font-size:28px;letter-spacing:-.5px;display:block;color:#7f585d}.metric span{display:block;font-size:11px;color:#95898a;margin-top:6px}.progress{height:7px;border-radius:5px;background:#f1e9e7;overflow:hidden;margin-top:13px}.progress>span{display:block;height:100%;background:linear-gradient(90deg,#c59595,#99676d);border-radius:5px;transition:width .2s}.tabs{display:flex;padding:4px;background:#eee6e4;border-radius:13px;gap:3px;margin:12px 0 15px}.tab{flex:1;border:0;background:none;border-radius:10px;padding:10px 6px;color:#8c7e80;font-size:13px}.tab.selected{background:#fff;color:#8e5f65;box-shadow:0 2px 5px #b8a5a42b;font-weight:700}.task{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid #f3eeed}.task:last-child{border-bottom:0}.check{width:28px;height:28px;flex:none;border-radius:10px;border:1.7px solid #d8c3c1;background:#fff;color:white;font-size:17px;display:grid;place-items:center;padding:0;margin-top:1px}.check.done{background:#a6757e;border-color:#a6757e}.task-main{flex:1;min-width:0}.task-title{font-size:13.5px;font-weight:700;line-height:1.25}.task.done .task-title{text-decoration:line-through;color:#a9a0a0}.task-meta{font-size:11px;line-height:1.5;color:#998b8c;margin-top:4px}.task-detail{color:#6f5c62;font-size:11px;margin-top:6px}.task-detail:empty{display:none}.task-actions{background:#f7eeeb;color:#8d6469;font-size:11px;border:0;border-radius:9px;padding:7px 8px;white-space:nowrap}.empty{padding:28px 15px;text-align:center;color:#918587;border:1px dashed #e4d5d0;border-radius:16px;font-size:13px;line-height:1.5}.note{background:#f6edeb;border-radius:15px;padding:13px 15px;font-size:12px;color:#755b61;line-height:1.55;border:1px solid #f0dfdc}.note.sage{background:#eff3ee;border-color:#dfe8db;color:#637463}.note.warn{background:#fff2e5;border-color:#f0dfc9;color:#8a653f}.tag{display:inline-block;font-size:10px;padding:5px 8px;border-radius:40px;background:#f4e8e5;color:#8e6268;margin:0 5px 5px 0}.button{background:#a7767c;color:#fff;border:0;border-radius:13px;font-weight:700;font-size:13px;padding:12px 16px;display:inline-flex;justify-content:center;align-items:center;gap:8px}.button.secondary{background:#f2e7e4;color:#875b62}.button.outline{background:#fff;color:#946a70;border:1px solid #e8d9d6}.button.danger{background:#a93f54}.button.full{width:100%}.button.small{font-size:12px;padding:9px 11px;border-radius:10px}.btnrow{display:flex;gap:9px;flex-wrap:wrap}.checkin-row{display:flex;flex-wrap:wrap;gap:6px}.choice{border:1px solid #eadcda;background:#fff;border-radius:100px;padding:9px 11px;font-size:11px;color:#7c6b70}.choice.selected{background:#9e7079;color:#fff;border-color:#9e7079}.field{margin:13px 0}.field label,.fieldset-title{font-size:12px;font-weight:700;display:block;margin:0 0 7px;color:#675a5d}.field input,.field select,.field textarea,.select{width:100%;background:#fff;border:1px solid #e4d9d7;border-radius:12px;min-height:43px;padding:11px 12px;color:#4b3a3c;outline-color:#af848b;appearance:auto}.field textarea{min-height:75px;resize:vertical}.field small{display:block;color:#9b8c8e;margin-top:5px;font-size:11px}.fields-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.checkboxes{display:flex;flex-wrap:wrap;gap:8px}.checkboxes label{display:flex;align-items:center;gap:5px;padding:9px 10px;background:#f8f2f0;border-radius:11px;font-size:12px}.checkboxes input{accent-color:#a7767c}.daystrip{display:flex;gap:5px;justify-content:space-between}.daybox{width:38px;height:39px;border-radius:11px;border:1px solid #e8dcda;background:#fff;font-weight:650;color:#887d7d}.daybox.active{background:#a7767c;color:white;border-color:#a7767c}
.monthheader{display:flex;justify-content:space-between;align-items:center;margin:18px 0}.monthheader h2{margin:0}.roundbtn{width:34px;height:34px;border:1px solid #e9dddd;border-radius:50%;background:#fff;color:#956b71;font-size:23px}.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.caldow{text-align:center;font-size:10px;text-transform:uppercase;color:#afa0a2;padding-bottom:9px;font-weight:700}.calday{min-height:58px;border:1px solid #eee8e6;background:#fff;border-radius:10px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;color:#554b4d}.calday.blank{background:transparent;border:0}.calday.current{outline:2px solid #b58a8a}.calday.active{background:#f1e0dc;border-color:#ceaaa9}.calday strong{font-size:12px;font-weight:650}.caldot{width:6px;height:6px;border-radius:50%;background:#caa3a0}.caldot.good{background:#6c9c85}.caldot.medium{background:#c99e60}.calday small{font-size:9px;color:#9b8183}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.photo-tile{border:0;position:relative;background:#f0e5e2;border-radius:13px;overflow:hidden;padding:0;aspect-ratio:1}.photo-tile img{width:100%;height:100%;object-fit:cover}.photo-tile span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#251c23a8);color:white;font-size:10px;padding:17px 5px 7px}.compare{width:100%;aspect-ratio:4/4.4;max-height:410px;position:relative;border-radius:17px;overflow:hidden;background:#eee4e1;margin:12px 0}.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.compare .after{clip-path:inset(0 0 0 50%)}.compare-line{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:50%;box-shadow:0 0 0 1px #70656c7d;pointer-events:none}.photo-label{position:absolute;top:12px;background:#291f26a6;color:#fff;font-size:11px;padding:7px;border-radius:8px}.photo-label.left{left:10px}.photo-label.right{right:10px}.photo-compare-range{width:100%;accent-color:#a7767c}.product{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #f2ebea}.product:last-child{border:0}.product-icon{background:#f0e1dd;border-radius:13px;width:46px;height:46px;display:grid;place-items:center;color:#aa7e81;font-size:22px}.product-info{flex:1;min-width:0}.product-info strong{display:block;font-size:13px}.product-info small{display:block;font-size:11px;color:#97898b;margin-top:4px}.product-actions{display:flex;gap:5px}.product-actions button{border:0;background:#f7eeee;color:#9f7378;border-radius:9px;padding:8px 9px}.routine-line{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f3eeed;padding:10px 0;gap:10px}.routine-line:last-child{border:0}.routine-line strong{font-size:12px}.routine-line small{display:block;color:#96878a;font-size:10px;margin-top:4px}.divider{height:1px;background:#eee5e3;margin:18px 0}.modal{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:#34262bc4;padding:14px 8px 0}.modal[hidden]{display:none!important}.modal-panel{background:#fffdfa;border-radius:22px 22px 0 0;padding:25px 20px calc(26px + env(safe-area-inset-bottom));width:min(100%,680px);max-height:91vh;overflow-y:auto;box-shadow:0 -8px 35px #24171a40}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-head h2{margin:0}.close{background:#f4e9e6;border:0;color:#956b71;border-radius:10px;font-size:22px;width:35px;height:35px}.toast{position:fixed;z-index:40;bottom:calc(92px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#4e3e42;color:#fff;border-radius:12px;font-size:12px;padding:12px 16px;max-width:calc(100vw - 32px);box-shadow:0 5px 24px #35272a55;display:none;text-align:center}.toast.show{display:block}.settings-section{margin-bottom:20px}.routine-badge{font-size:10px;padding:5px 7px;background:#f0e5e2;border-radius:7px;color:#99676d}.export-icon{font-size:22px}.tipicon{font-size:27px;display:inline-block;margin-bottom:7px}.center{text-align:center}.spaced{margin-top:16px}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.mini-list{font-size:12px;line-height:1.7;color:#76696b;padding-left:20px}.field input[type=range]{min-height:auto;padding:0}.smallprint{font-size:11px;line-height:1.6;color:#8f8586}.photo-long{width:100%;max-height:420px;object-fit:contain;border-radius:12px;background:#eee}
@media(min-width:640px){.main{padding:24px 34px 42px}.topbar{padding-left:34px;padding-right:34px}.welcome{padding:27px}.welcome h1{font-size:38px}.two-cols.cols-3{grid-template-columns:1fr 1fr 1fr}.photo-grid{grid-template-columns:repeat(4,1fr)}.modal{align-items:center;padding:20px}.modal-panel{border-radius:22px}}
@media(max-width:360px){.main{padding:15px 12px 25px}.topbar{padding:9px 13px}.brand strong{font-size:20px}.fields-2{grid-template-columns:1fr}.daybox{width:33px}}


/* LUXURY STUDIO · personal aesthetic, existing components preserved */
:root{--ink:#272923;--muted:#7e7e76;--rose:#b19869;--deep:#8e784e;--paper:#fff;--line:#e6e2d9;--blush:#efebe3;--sage:#e9ede7;--shadow:0 5px 18px rgba(30,31,26,.035);color:#272923;background:#e7e4dd}
#app{background:#f7f6f2}
.topbar{background:#272923;color:#fff;border-bottom:1px solid #34352f;height:76px}
.brand-icon{width:42px;height:42px;border-radius:9px;object-fit:cover;box-shadow:0 0 0 1px #b5a27b}
.brand strong{font-size:19px;font-weight:400;letter-spacing:1.35px;color:#fff}
.brand span{color:#d4bc90;letter-spacing:2.6px}
.top-action{background:transparent;border:1px solid #8f8163;color:#e6d5ab;border-radius:50%}
.bottomnav{border-top:1px solid #e4e0d8;box-shadow:0 -6px 16px #292a2510}
.navbutton{font-size:9px;min-width:0;color:#98978e}
.navbutton.active{color:#937b52}
.navicon{font-family:Georgia,serif;font-size:22px}
h1,h2{font-weight:400;color:#282923;letter-spacing:-.75px}
h1{font-size:34px}h2{font-size:23px}
.eyebrow{color:#997d50;letter-spacing:2.15px}
.subtle,.tiny{color:#818078}
.card,.metric{border:1px solid #e8e5df;border-radius:4px;box-shadow:none}
.welcome{background:linear-gradient(115deg,#272923,#45433b 76%,#685943);border-radius:3px;color:#fff;min-height:197px;padding:25px 23px}
.welcome h1{color:#fff;max-width:260px;font-size:39px}
.welcome .eyebrow{color:#d9c093}
.welcome .subtle{color:#e1dcd0;max-width:285px}
.welcome:after{content:'✦';right:2px;top:-28px;opacity:.23;color:#cbb48e}
.welcome .pill{background:#ffffff12;border-color:#dbd1b338;color:#f3dfb6;border-radius:3px}
.metric{border-radius:3px}.metric strong{color:#8e774f}
.progress{border-radius:0;background:#e9e6df;height:5px}.progress>span{border-radius:0;background:#b6a073}
.tabs{border-radius:3px;background:#eceae4}.tab{border-radius:2px;color:#858078}.tab.selected{color:#39392f}
.task{border-bottom-color:#eeeae3}.check{border-color:#c8bdab;border-radius:50%}.check.done{background:#a68e66;border-color:#a68e66}
.task-meta,.task-detail{color:#8b887e}.task-actions,.product-actions button{background:#f0ece4;color:#937f58;border-radius:2px}
.button{background:#292b26;border-radius:3px;color:#fff;letter-spacing:.2px}.button.secondary{background:#eeeae2;color:#7a694f}.button.outline{border-color:#cfc3ae;color:#7f6d4c}
.choice{border-radius:3px}.choice.selected{background:#a58d65;border-color:#a58d65}
.note{background:#eeeae1;color:#6e675d;border-color:#e8e1d3;border-radius:2px;border-left:3px solid #ad9770}
.note.sage{color:#57725d;background:#edf0eb;border-left-color:#92a693}
.note.warn{color:#8a653f;background:#fff4e5;border-left-color:#ca9e66}
.tag{background:#eeeae1;color:#947e55;border-radius:2px}
.field input,.field select,.field textarea,.select{border-color:#dedbd3;border-radius:3px;color:#292b27}
.field label,.fieldset-title{color:#56554e}
.calday,.daybox,.roundbtn{border-radius:3px}.calday.current{outline-color:#a48c63}.calday.active,.daybox.active{background:#e7dfcf;border-color:#c4b38c;color:#39352c}
.photo-tile,.photo-long,.compare{border-radius:3px}.product-icon{border-radius:2px;background:#eee8dc;color:#9e8353}
.modal{background:#1a1b17c9}.modal-panel{background:#f7f6f2;border-radius:7px 7px 0 0}.close{background:#e9e3d8;color:#83704d;border-radius:3px}
.toast{background:#34352c;border-radius:3px}
.makeup-banner{background:linear-gradient(120deg,#e9e2d7,#f6f3ed);border:1px solid #e4dfd5;padding:22px;position:relative;overflow:hidden;border-radius:3px;margin-top:12px;min-height:120px}
.makeup-banner h2{font-size:26px;margin:10px 0}.makeup-banner p:not(.eyebrow){font-size:12px;color:#7e796f}
.makeup-banner .makeup-symbol{position:absolute;font-family:Georgia,serif;color:#d1c2a7;font-size:105px;right:12px;top:-16px;opacity:.6}
.micro-link{display:inline-block;border:1px solid #c9b999;color:#806b48;background:#fff;padding:7px 10px;margin-top:8px;font-size:11px;border-radius:2px}
.makeup-graphic{background:radial-gradient(ellipse,#f4eade,#eae5dc);display:grid;place-items:center;padding:12px 5px;border:1px solid #e2d8c9;margin-top:15px}
.makeup-graphic svg{height:230px;max-width:100%}
.makeup-pulse{transform-origin:center;animation:makeup-flash 2s ease-in-out infinite}
@keyframes makeup-flash{0%,100%{opacity:.3}50%{opacity:.95}}
@media(min-width:640px){.modal-panel{border-radius:7px}}
@media(max-width:380px){.brand strong{font-size:17px}.brand span{font-size:7px}.navbutton{font-size:8px}.navicon{font-size:20px}.main{padding-left:14px;padding-right:14px}}