.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:13px;font-weight:600;font-size:13.5px;
  border:1px solid var(--glass-border);background:var(--glass-bg);
  transition:all var(--trans);user-select:none;white-space:nowrap;
}
.btn:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-strong);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:15px;height:15px}
.btn-accent{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;color:#fff;box-shadow:var(--shadow-accent);
}
.btn-accent:hover{filter:brightness(1.1);box-shadow:0 14px 40px var(--accent-glow)}
.btn-danger{color:var(--danger);border-color:var(--danger-soft);background:var(--danger-soft)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--glass-bg)}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:10px}
.btn-block{width:100%}
.btn:disabled{opacity:.45;pointer-events:none}

.icon-btn{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--glass-border);background:var(--glass-bg);
  transition:all var(--trans);position:relative;flex:none;
}
.icon-btn:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-strong);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.small{width:30px;height:30px;border-radius:9px}
.icon-btn.small svg{width:14px;height:14px}

.input,.select,textarea.input{
  width:100%;padding:11px 14px;border-radius:13px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  transition:border-color var(--trans),box-shadow var(--trans),background var(--trans);
  font-size:14px;color:var(--text-primary);
}
.input::placeholder,textarea.input::placeholder{color:var(--text-muted)}
.input:focus,.select:focus,textarea.input:focus{
  outline:none;border-color:var(--accent);background:var(--glass-bg-hover);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b9cc0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer}
.select option{background:var(--bg-elevated);color:var(--text-primary)}
[data-theme="light"] .select option{background:#ffffff;color:#1a2233}
label.field{display:block;margin-bottom:14px}
label.field>span{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:7px;letter-spacing:.02em}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
  font-size:11.5px;font-weight:600;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-secondary);
}
.chip svg{width:12px;height:12px}
.chip.accent{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.chip.success{color:var(--success);background:var(--success-soft);border-color:transparent}
.chip.warning{color:var(--warning);background:var(--warning-soft);border-color:transparent}
.chip.danger{color:var(--danger);background:var(--danger-soft);border-color:transparent}
.chip.violet{color:var(--accent-2);background:var(--accent-soft);border-color:transparent}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3.5px 9px;border-radius:8px;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}
.badge.p-todo{color:var(--text-secondary);background:var(--glass-bg)}
.badge.p-progress{color:var(--accent-3);background:var(--accent-soft)}
.badge.p-done{color:var(--success);background:var(--success-soft)}
.badge.pr-low{color:var(--text-secondary);background:var(--glass-bg)}
.badge.pr-medium{color:var(--warning);background:var(--warning-soft)}
.badge.pr-high{color:var(--danger);background:var(--danger-soft)}
.badge.pr-urgent{color:#fff;background:linear-gradient(135deg,#f43f5e,#fb7185);box-shadow:0 4px 14px var(--danger-glow)}

.priority-dot{width:8px;height:8px;border-radius:99px;flex:none}
.pr-low .priority-dot{background:var(--text-muted)}
.pr-medium .priority-dot{background:var(--warning)}
.pr-high .priority-dot{background:var(--danger)}
.pr-urgent .priority-dot{background:#f43f5e;box-shadow:0 0 8px var(--danger-glow)}

.progress{
  height:8px;border-radius:99px;background:var(--glass-bg);overflow:hidden;position:relative;
}
.progress-bar{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .7s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.progress-bar::after{
  content:'';position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  background-size:200% 100%;animation:shimmer 2.4s linear infinite;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

.switch{position:relative;width:44px;height:25px;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer}
.switch .track{
  position:absolute;inset:0;border-radius:99px;background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);transition:all var(--trans);
}
.switch .track::after{
  content:'';position:absolute;top:2.5px;left:3px;width:18px;height:18px;border-radius:99px;
  background:#fff;box-shadow:var(--shadow-s);transition:transform var(--trans);
}
.switch input:checked~.track{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}
.switch input:checked~.track::after{transform:translateX(18px)}

.seg{display:inline-flex;padding:4px;border-radius:14px;background:var(--glass-bg);border:1px solid var(--glass-border);gap:2px}
.seg button{
  padding:7px 15px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--text-secondary);
  transition:all var(--trans);white-space:nowrap;
}
.seg button:hover{color:var(--text-primary)}
.seg button.on{background:var(--glass-bg-hover);color:var(--text-primary);box-shadow:var(--shadow-s)}
.seg button.on.accent-seg{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:var(--shadow-accent)}

.kbd{
  font-family:var(--font-sans);font-size:10.5px;font-weight:700;color:var(--text-secondary);
  background:var(--glass-bg);border:1px solid var(--glass-border);border-bottom-width:2px;
  border-radius:6px;padding:1.5px 6px;
}

.avatar-btn{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow-accent);
  font-size:13px;font-weight:800;letter-spacing:.04em;transition:transform var(--trans);
}
.avatar-btn:hover{transform:translateY(-1px) scale(1.04)}

.kpi{
  --kpi-accent:var(--accent);--kpi-glow:var(--accent-glow);--kpi-soft:var(--accent-soft);
  padding:20px 20px 18px;border-radius:var(--radius-l);position:relative;overflow:hidden;
  transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans);
}
.kpi::before{
  content:'';position:absolute;top:-34px;right:-34px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,var(--kpi-soft),transparent 70%);opacity:.9;transition:transform var(--trans);
}
.kpi:hover{transform:translateY(-5px);box-shadow:var(--shadow-l),0 14px 40px var(--kpi-glow);border-color:var(--glass-border-strong)}
.kpi:hover::before{transform:scale(1.5)}
.kpi .kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kpi .kpi-label{font-size:12px;font-weight:650;color:var(--text-secondary);letter-spacing:.03em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.kpi .kpi-ic{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--kpi-accent);
  background:var(--kpi-soft);border:1px solid var(--kpi-soft);
}
.kpi .kpi-ic svg{width:16px;height:16px}
.kpi .kpi-value{font-size:31px;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .kpi-value .kpi-unit{font-size:15px;font-weight:700;color:var(--text-secondary)}
.kpi .kpi-sub{margin-top:6px;font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.kpi .kpi-sub .trend-up{color:var(--success)}
.kpi .kpi-sub .trend-down{color:var(--danger)}

.kpi.blue{--kpi-accent:#4f7cff;--kpi-glow:rgba(79,124,255,.3);--kpi-soft:rgba(79,124,255,.13)}
.kpi.violet{--kpi-accent:#a78bfa;--kpi-glow:rgba(167,139,250,.3);--kpi-soft:rgba(167,139,250,.13)}
.kpi.cyan{--kpi-accent:#22d3ee;--kpi-glow:rgba(34,211,238,.3);--kpi-soft:rgba(34,211,238,.13)}
.kpi.green{--kpi-accent:#34d399;--kpi-glow:rgba(52,211,153,.3);--kpi-soft:rgba(52,211,153,.13)}
.kpi.orange{--kpi-accent:#fb923c;--kpi-glow:rgba(251,146,60,.3);--kpi-soft:rgba(251,146,60,.13)}
.kpi.pink{--kpi-accent:#f472b6;--kpi-glow:rgba(244,114,182,.28);--kpi-soft:rgba(244,114,182,.12)}

.modal-overlay{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;
  background:rgba(3,6,12,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fadeIn .18s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;
  width:100%;max-width:520px;max-height:calc(100dvh - 36px);overflow-y:auto;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  border:1px solid var(--glass-border-strong);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);
  box-shadow:var(--shadow-l),0 0 80px rgba(79,124,255,.08);
  animation:modalIn .3s cubic-bezier(.22,1,.36,1) both;padding:0;
}
.modal.wide{max-width:680px}
.modal.narrow{max-width:420px}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.965)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px}
.modal-head h3{font-size:17px;font-weight:750}
.modal-body{padding:4px 22px 22px}
.modal-body.wide-body{padding:4px 22px 4px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px 22px}
.modal-close{position:absolute;top:16px;right:16px;z-index:2}

.toast-root{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:min(420px,calc(100vw - 32px))}
.toast{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border-radius:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.06));
  border:1px solid var(--glass-border-strong);box-shadow:var(--shadow-l);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:toastIn .3s cubic-bezier(.22,1,.36,1) both;pointer-events:auto;
}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .25s ease both}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.96)}}
.toast-ic{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center}
.toast-ic svg{width:15px;height:15px}
.toast.t-success .toast-ic{background:var(--success-soft);color:var(--success)}
.toast.t-error .toast-ic{background:var(--danger-soft);color:var(--danger)}
.toast.t-info .toast-ic{background:var(--accent-soft);color:var(--accent)}
.toast.t-warn .toast-ic{background:var(--warning-soft);color:var(--warning)}
.toast-body{flex:1;font-size:13.5px;font-weight:550}
.toast-body b{font-weight:750}
.toast-close{color:var(--text-muted);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.toast-close:hover{background:var(--glass-bg-hover);color:var(--text-primary)}
.toast-close svg{width:13px;height:13px}

.fab{
  position:fixed;right:26px;bottom:26px;z-index:150;width:56px;height:56px;border-radius:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow-accent),0 16px 44px rgba(0,0,0,.4);
  transition:transform var(--trans),box-shadow var(--trans);
}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab svg{width:24px;height:24px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fab.open svg{transform:rotate(45deg)}
.fab-menu{
  position:fixed;right:20px;bottom:94px;z-index:149;display:flex;flex-direction:column;gap:8px;min-width:200px;
  padding:10px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  border:1px solid var(--glass-border-strong);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:var(--shadow-l);animation:fabIn .25s cubic-bezier(.22,1,.36,1) both;
}
.fab-menu[hidden]{display:none}
@keyframes fabIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.fab-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;font-size:13.5px;font-weight:600;transition:background var(--trans)}
.fab-item:hover{background:var(--glass-bg-hover)}
.fab-item-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.fab-item-ic svg{width:15px;height:15px}
.fab-item-ic.c-blue{background:rgba(79,124,255,.14);color:#6d92ff}
.fab-item-ic.c-violet{background:rgba(167,139,250,.14);color:#b39bff}
.fab-item-ic.c-cyan{background:rgba(34,211,238,.12);color:#4fd7ee}
.fab-item-ic.c-orange{background:rgba(251,146,60,.13);color:#fca14e}

.empty-state{margin:26px auto;max-width:640px}

.msg-ok,.msg-err{
  display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:12px;font-size:13px;font-weight:550;
}
.msg-ok{background:var(--success-soft);color:var(--success);border:1px solid var(--success-soft)}
.msg-err{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger-soft)}
.msg-ok svg,.msg-err svg{width:15px;height:15px;flex:none}

.range-wrap{display:flex;align-items:center;gap:12px}
.range-wrap input[type=range]{flex:1;accent-color:var(--accent);height:4px;cursor:pointer}

.heat-scale{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.heat-scale .hs-cell{width:13px;height:13px;border-radius:4px}


.block-item{
  display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:15px;
  background:var(--glass-bg);border:1px solid var(--glass-border);transition:all var(--trans);
}
.block-item:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-strong);transform:translateX(3px)}
.block-item .bi-main{flex:1;min-width:0}
.block-item .bi-title{font-weight:650;font-size:14px;line-height:1.35}
.block-item .bi-time{font-size:12px;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.block-item .bi-right{display:flex;align-items:center;gap:8px;flex:none}

.check-btn{
  width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--glass-border-strong);background:var(--glass-bg);transition:all .28s cubic-bezier(.34,1.56,.64,1);color:transparent;
}
.check-btn svg{width:14px;height:14px}
.check-btn:hover{border-color:var(--accent)}
.block-item.done .check-btn,.check-btn.on{
  background:linear-gradient(135deg,var(--success),#10b981);border-color:transparent;color:#fff;
  box-shadow:0 4px 14px var(--success-glow);transform:scale(1.06);
}
.block-item.done .bi-title{text-decoration:line-through;color:var(--text-muted)}
.block-item.done{opacity:.72}

.sheet-overlay{
  position:fixed;inset:0;z-index:180;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(3,6,12,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:fadeIn .18s ease both;
}
.sheet{
  width:100%;max-width:560px;max-height:80dvh;overflow-y:auto;border-radius:24px 24px 0 0;padding:12px 20px 26px;
  background:linear-gradient(180deg,rgba(24,31,50,.97),rgba(14,20,36,.97));
  border:1px solid var(--glass-border-strong);border-bottom:none;
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  box-shadow:var(--shadow-l);animation:sheetIn .32s cubic-bezier(.22,1,.36,1) both;
}
[data-theme="light"] .sheet{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,246,251,.98))}
@keyframes sheetIn{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.sheet-grab{width:44px;height:5px;border-radius:99px;background:var(--glass-border-strong);margin:4px auto 14px}
.sheet-close{position:absolute;top:14px;right:16px}
.sheet-title{font-size:17px;font-weight:750;margin-bottom:14px}