.logo { font-family: Unbounded, system-ui, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.04em; }
.chip { display: inline-flex; align-items: center; gap: .375rem; padding: .2rem .6rem; border-radius: 999px; font-size: 12px; font-weight: 600; }
.chip-muted { background: #F1ECE3; color: #736B7E; }
.chip-busy { background: #FFF3CF; color: #9A6B00; }
.chip-todo { background: #FFE3EE; color: #E23474; }
.chip-ok { background: #DDF5EA; color: #1FA971; }
.chip-bad { background: #FDE8E8; color: #E5484D; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 14px; font-weight: 600; padding: .7rem 1.1rem; transition: transform .08s ease, background .15s ease, opacity .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: #16131D; color: #fff; }
.btn-primary:hover { background: #2B2636; }
.btn-pink { background: #FF4F8B; color: #fff; }
.btn-pink:hover { background: #E23474; }
.btn-ghost { background: #fff; border: 1px solid #ECE4D6; }
.btn-ghost:hover { background: #FBF6EE; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.card { background: #fff; border: 1px solid #ECE4D6; border-radius: 22px; box-shadow: 0 1px 0 rgba(22,19,29,.04), 0 8px 24px -12px rgba(22,19,29,.12); }
.field { width: 100%; border: 1px solid #ECE4D6; border-radius: 12px; padding: .65rem .8rem; background: #fff; outline: none; }
.field:focus { border-color: #FF4F8B; box-shadow: 0 0 0 3px #FFE3EE; }
.spinner { width: 18px; height: 18px; border-radius: 999px; border: 2.5px solid #FFE3EE; border-top-color: #FF4F8B; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dropzone { border: 2px dashed #E2D7C5; border-radius: 22px; transition: background .15s, border-color .15s; }
.dropzone.over { background: #FFE3EE; border-color: #FF4F8B; }
.box { position: absolute; border: 3px solid; border-radius: 10px; cursor: move; }
.box .tag { position: absolute; top: -28px; left: -3px; font-size: 12px; font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.box .handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 6px; background: #fff; border: 3px solid; cursor: nwse-resize; }
.box-cam { border-color: #FF4F8B; background: rgba(255,79,139,.10); }
.box-cam .tag { background: #FF4F8B; } .box-cam .handle { border-color: #FF4F8B; }
.box-slide { border-color: #FFC83D; background: rgba(255,200,61,.12); }
.box-slide .tag { background: #E0A400; } .box-slide .handle { border-color: #FFC83D; }
.toggle { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: #E6DFD2; position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle:checked { background: #FF4F8B; }
.toggle:checked::after { transform: translateX(18px); }
.toggle:disabled { opacity: .45; cursor: not-allowed; }
.moment input[type=checkbox].pick { width: 22px; height: 22px; accent-color: #FF4F8B; }
.moment.on { border-color: #FF4F8B; box-shadow: 0 0 0 3px #FFE3EE; }