*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#f3ece2;font-family:ui-rounded,-apple-system,"Segoe UI",system-ui,sans-serif;color:#4a3b30;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
canvas{display:block;touch-action:none}
#cv{position:fixed;inset:0;width:100%;height:100%}
button{font:inherit;color:inherit;border:0;cursor:pointer}
#top{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 8px) 6px calc(env(safe-area-inset-left) + 8px);background:rgba(250,245,238,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 8px rgba(80,50,30,.08);z-index:5}
.brand{font-weight:700;font-size:17px;letter-spacing:.3px;color:#8a5a3c}.brand b{color:#d9774a}
.sp{flex:1}
.ib{width:38px;height:38px;border-radius:12px;background:#fff;font-size:19px;box-shadow:0 1px 3px rgba(80,50,30,.15)}
.ib:disabled{opacity:.35}
.chip{padding:8px 12px;border-radius:12px;background:#fff;font-size:14px;font-weight:600;box-shadow:0 1px 3px rgba(80,50,30,.15);white-space:nowrap}
.pill{padding:9px 14px;border-radius:14px;background:#d9774a;color:#fff;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 2px 6px rgba(217,119,74,.35)}
#tools{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 8px);display:flex;gap:4px;padding:5px;background:rgba(255,251,246,.95);border-radius:20px;box-shadow:0 4px 18px rgba(80,50,30,.18);z-index:5}
#tools button{display:flex;flex-direction:column;align-items:center;min-width:54px;padding:5px 4px;border-radius:15px;background:none;font-size:11px;font-weight:600;color:#7a6455}
#tools i{font-style:normal;font-size:20px;line-height:24px}
#tools button.on{background:#f6dcc9;color:#a24f25}
#drawer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 76px);width:min(720px,calc(100% - 16px));background:rgba(255,251,246,.96);border-radius:18px;box-shadow:0 4px 18px rgba(80,50,30,.16);padding:8px;z-index:4;max-height:38vh;overflow:auto}
#drawer:empty{display:none}
.row{display:flex;gap:6px;overflow-x:auto;padding:2px;scrollbar-width:none}.row::-webkit-scrollbar{display:none}
.row+.row{margin-top:6px}
.tag{flex:none;padding:7px 11px;border-radius:11px;background:#f1e7dc;font-size:13px;font-weight:600;white-space:nowrap}
.tag.on{background:#d9774a;color:#fff}
.it{flex:none;width:66px;padding:4px 2px;border-radius:12px;background:#f7efe6;font-size:10.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px}
.it canvas{width:44px;height:44px}.it.on{background:#f6c9ad;outline:2px solid #d9774a}
.sw{flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}.sw.on{box-shadow:0 0 0 3px #d9774a}
.hint{font-size:12.5px;color:#8b7565;padding:2px 4px 4px}
.act{flex:none;padding:8px 12px;border-radius:11px;background:#fff;font-weight:700;font-size:13px;box-shadow:0 1px 3px rgba(80,50,30,.15)}.act.del{color:#c0442a}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 62px);transform:translate(-50%,-10px);background:#4a3b30;color:#fff;padding:9px 16px;border-radius:14px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:9;max-width:90%;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#modal{position:fixed;inset:0;background:rgba(60,40,25,.35);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.hide{display:none!important}
.card{background:#fffaf4;border-radius:22px;padding:18px;width:min(420px,100%);max-height:86vh;overflow:auto;box-shadow:0 10px 40px rgba(60,40,25,.3)}
.card h2{margin:0 0 10px;font-size:20px;color:#8a5a3c}.card h3{margin:14px 0 6px;font-size:14px;color:#a07a60;text-transform:uppercase;letter-spacing:.6px}
.mb{display:block;width:100%;text-align:left;padding:11px 13px;margin:6px 0;border-radius:13px;background:#f3e9de;font-weight:600;font-size:15px}
.slot{display:flex;gap:6px;align-items:center;margin:6px 0}.slot span{flex:1;font-size:14px}
.goal{display:flex;gap:10px;padding:9px 10px;border-radius:12px;background:#f3e9de;margin:6px 0;font-size:14px}.goal b{display:block}.goal small{color:#8b7565}.goal.done{background:#e1efd6}
#iso{position:fixed;inset:0;z-index:10;background:linear-gradient(#cfe6f2,#f4ead9)}
#icv{width:100%;height:100%}
.isobar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 12px);display:flex;gap:6px;background:rgba(255,251,246,.9);padding:6px;border-radius:18px;box-shadow:0 4px 18px rgba(80,50,30,.18)}
@media (max-width:420px){#tools button{min-width:48px}.brand{display:none}}
@media (max-height:500px){#tools{left:auto;right:calc(env(safe-area-inset-right) + 8px);transform:none;flex-direction:column;bottom:auto;top:calc(env(safe-area-inset-top) + 58px)}#tools button{min-width:52px;padding:3px}#tools i{font-size:17px;line-height:20px}
 #drawer{bottom:calc(env(safe-area-inset-bottom) + 6px);left:calc(env(safe-area-inset-left) + 8px);transform:none;width:min(560px,calc(100% - 100px));max-height:42vh}}
@media (max-height:500px){.it{width:54px;font-size:9.5px}.it canvas{width:32px;height:32px}.tag{padding:5px 9px;font-size:12px}#drawer{padding:5px;max-height:36vh}.hint{font-size:11px;padding:1px 4px}}