/* ========== APP SHELL ========== */
.app{display:flex;min-height:100dvh;}
.sidebar{display:none;}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 18px;}
.brand-mark{width:40px;height:40px;border-radius:13px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:18px;box-shadow:0 8px 20px -8px var(--accent);}
.brand-text b{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px;}
.brand-text span{display:block;font-size:11px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;font-weight:600;}
.side-nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto;}
.side-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;
  color:var(--muted);font-weight:600;font-size:14.5px;transition:all var(--t);width:100%;text-align:left;}
.side-item:hover{background:var(--surface-2);color:var(--text);}
.side-item.active{background:var(--accent-soft);color:var(--accent);}
.side-item.active .icon{stroke-width:2.2;}
.side-foot{padding-top:12px;border-top:1px solid var(--border-soft);}
.main{flex:1;min-width:0;display:flex;flex-direction:column;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 14px);}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  height:var(--top-h);padding:0 16px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-soft);}
.topbar-title{font-size:17px;font-weight:800;letter-spacing:-.3px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar-sub{font-size:11.5px;color:var(--muted);font-weight:500;}
.icon-btn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  color:var(--muted);transition:all var(--t);flex:none;}
.icon-btn:hover{background:var(--surface-2);color:var(--text);}
.icon-btn:active{transform:scale(.92);}
.content{padding:16px;max-width:1180px;width:100%;margin:0 auto;flex:1;}
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:stretch;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);font-size:9.5px;font-weight:700;letter-spacing:.1px;transition:color var(--t);
  position:relative;padding-top:5px;min-width:0;}
.nav-item .icon{width:19px;height:19px;transition:transform var(--t);}
.nav-item.active{color:var(--accent);}
.nav-item.active .icon{transform:translateY(-1px) scale(1.1);}
.nav-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:3px;border-radius:0 0 4px 4px;background:var(--accent);}
.nav-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}

/* ========== CARDS ========== */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--shadow-sm);}
.card + .card{margin-top:14px;}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 12px;}
.section-title:first-child{margin-top:0;}
.section-title h3{font-size:15.5px;font-weight:800;letter-spacing:-.2px;}
.section-title .hint{font-size:12px;color:var(--muted);font-weight:600;}

/* ========== BUTTONS ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;
  border-radius:12px;font-weight:700;font-size:14px;background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);transition:all var(--t);white-space:nowrap;min-height:44px;}
.btn:hover{background:var(--surface-3);}
.btn:active{transform:scale(.97);}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  border-color:transparent;box-shadow:0 8px 22px -10px var(--accent);}
.btn.primary:hover{filter:brightness(1.08);}
.btn.ghost{background:transparent;border-color:var(--border);}
.btn.ghost:hover{background:var(--surface-2);}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent);}
.btn.danger:hover{background:color-mix(in srgb,var(--bad) 12%,transparent);}
.btn.sm{padding:8px 13px;font-size:13px;min-height:38px;border-radius:10px;}
.btn.block{width:100%;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn:disabled:active{transform:none;}

/* ========== INPUTS ========== */
.input,.select,.textarea{width:100%;padding:12px 14px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--border);font-size:16px;transition:border-color var(--t),box-shadow var(--t);min-height:46px;}
.textarea{font-size:15px;line-height:1.6;resize:vertical;font-family:inherit;}
.input::placeholder,.textarea::placeholder{color:var(--muted);}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238b97b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px;letter-spacing:.2px;}
.row{display:flex;gap:10px;flex-wrap:wrap;}
.row > *{flex:1;min-width:0;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--muted);border:1px solid var(--border-soft);letter-spacing:.2px;}
.pill.accent{background:var(--accent-soft);color:var(--accent);border-color:transparent;}
.pill.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);border-color:transparent;}
.pill.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn);border-color:transparent;}
.pill.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad);border-color:transparent;}
.empty{text-align:center;padding:38px 18px;color:var(--muted);}
.empty .icon{width:42px;height:42px;margin:0 auto 12px;opacity:.4;}
.empty p{font-size:14px;font-weight:600;}
.empty small{display:block;margin-top:5px;font-size:12.5px;opacity:.8;}

/* ========== VIEWS ========== */
.view{display:none;}
.view.active{display:block;animation:viewIn .32s cubic-bezier(.4,0,.2,1);}
@keyframes viewIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
.view-head{margin-bottom:16px;}
.view-head h2{font-size:24px;font-weight:800;letter-spacing:-.6px;}
.view-head p{font-size:13.5px;color:var(--muted);margin-top:4px;}

/* ========== PROGRESS / GOAL BARS ========== */
.goal-bar{height:9px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:10px;}
.goal-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .55s cubic-bezier(.4,0,.2,1);}
.progress-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;
  font-size:12.5px;font-weight:700;color:var(--muted);}

/* ========== FILTERS / CHIPS ========== */
.filters{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;margin:14px 0 12px;scrollbar-width:none;-ms-overflow-style:none;}
.filters::-webkit-scrollbar{display:none;}
.chip{padding:8px 15px;border-radius:99px;font-size:12.5px;font-weight:700;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border-soft);
  white-space:nowrap;transition:all var(--t);}
.chip.active{background:var(--accent);color:#fff;border-color:transparent;}

/* ========== TASK ITEMS ========== */
.task-form{display:flex;flex-direction:column;gap:10px;}
.task-form-row{display:flex;gap:8px;flex-wrap:wrap;}
.task-form-row .select,.task-form-row .input{flex:1;min-width:110px;min-height:44px;padding:10px 13px;font-size:14px;}
.task-item{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--r);margin-bottom:9px;transition:all var(--t);animation:viewIn .25s;}
.task-item:hover{border-color:var(--border);}
.task-item.done{opacity:.55;}
.task-item.done .task-text{text-decoration:line-through;}
.checkbox{width:24px;height:24px;border-radius:8px;border:2px solid var(--border);flex:none;
  display:grid;place-items:center;transition:all var(--t);margin-top:1px;background:var(--surface-2);}
.checkbox:hover{border-color:var(--accent);}
.checkbox.on{background:var(--accent);border-color:var(--accent);}
.checkbox .icon{width:14px;height:14px;color:#fff;opacity:0;transition:opacity var(--t);}
.checkbox.on .icon{opacity:1;}
.task-body{flex:1;min-width:0;}
.task-text{font-size:14.5px;font-weight:600;line-height:1.4;word-break:break-word;}
.task-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.task-del{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);
  flex:none;transition:all var(--t);}
.task-del:hover{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);}
.task-del .icon{width:17px;height:17px;}

/* ========== OVERLAY / MODAL ========== */
.overlay{position:fixed;inset:0;z-index:100;background:var(--overlay);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;
  justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));}
.overlay.open{display:flex;animation:viewIn .2s;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  width:100%;max-width:520px;max-height:92dvh;overflow-y:auto;box-shadow:var(--shadow);padding:20px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.modal-head h3{font-size:18px;font-weight:800;letter-spacing:-.4px;}

/* ========== TOASTS ========== */
.toasts{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 16px);z-index:200;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;
  width:min(420px,calc(100vw - 32px));}
.toast{background:var(--surface);border:1px solid var(--border);color:var(--text);
  padding:12px 18px;border-radius:14px;font-size:13.5px;font-weight:700;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:10px;animation:toastIn .3s cubic-bezier(.4,0,.2,1);max-width:100%;}
.toast.out{animation:toastOut .25s forwards;}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}
.toast.ok .dot{background:var(--ok);}
.toast.bad .dot{background:var(--bad);}
.toast.warn .dot{background:var(--warn);}
@keyframes toastIn{from{opacity:0;transform:translateY(18px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(12px) scale(.95);}}

/* ========== TABLE ========== */
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{text-align:left;padding:8px 10px;font-weight:700;color:var(--muted);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);}
.data-table td{padding:9px 10px;border-bottom:1px solid var(--border-soft);font-weight:600;}
.data-table tr:last-child td{border-bottom:none;}
.data-table .mono{font-family:var(--mono);font-size:12.5px;}

/* ========== RESULT BOX ========== */
.result-box{padding:14px 16px;border-radius:var(--r);background:var(--accent-soft);
  border:1px dashed color-mix(in srgb,var(--accent) 40%,transparent);margin-top:12px;}
.result-box .rlabel{font-size:10.5px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.result-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 15%,transparent);gap:10px;}
.result-row:last-child{border-bottom:none;}
.result-row b{font-size:15px;font-weight:800;font-family:var(--mono);color:var(--accent);word-break:break-all;}
.result-row span{font-size:12.5px;color:var(--muted);font-weight:600;}

/* ========== SWITCHES ========== */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border-soft);}
.set-row:last-child{border-bottom:none;}
.set-row-txt b{display:block;font-size:14px;font-weight:700;}
.set-row-txt span{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;}
.switch{width:50px;height:29px;border-radius:99px;background:var(--surface-3);position:relative;
  flex:none;transition:background var(--t);border:1px solid var(--border);}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:23px;height:23px;border-radius:50%;
  background:var(--muted);transition:all var(--t);}
.switch.on{background:var(--accent);border-color:var(--accent);}
.switch.on::after{left:23px;background:#fff;}
.swatches{display:flex;gap:9px;flex-wrap:wrap;}
.swatch{width:36px;height:36px;border-radius:12px;border:2px solid transparent;transition:all var(--t);position:relative;}
.swatch:active{transform:scale(.9);}
.swatch.on{border-color:var(--text);transform:scale(1.06);}
.swatch.on::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:15px;font-weight:900;}
.num-input{width:82px;padding:9px 11px;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--border);text-align:center;font-weight:700;font-size:15px;min-height:42px;}
.num-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

/* ========== RANGE SLIDER ========== */
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:var(--surface-3);outline:none;margin:12px 0;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--surface);
  box-shadow:0 2px 8px -2px var(--accent);}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);
  cursor:pointer;border:3px solid var(--surface);}

/* ========== BACK BUTTON ========== */
.back-btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  color:var(--muted);margin-bottom:14px;padding:8px 12px 8px 8px;border-radius:10px;transition:all var(--t);}
.back-btn:hover{background:var(--surface-2);color:var(--text);}