.clock-shell{color:#0f172a}.clock-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.clock-kicker{margin:0;font-size:.72rem;letter-spacing:.24em;font-weight:700;color:#64748b}.clock-title{margin:.35rem 0 0;font-size:1.6rem}.clock-status{margin-bottom:1rem;font-weight:700;padding:.95rem 1rem;border-radius:1rem;background:linear-gradient(135deg,#bfdbfee6,#e0e7ffcc);border:1px solid rgba(148,163,184,.28);transition:background-color .18s ease,border-color .18s ease,color .18s ease}.clock-status.success{background:linear-gradient(135deg,#fde68af2,#fef9c3e6);border-color:#d9770657;color:#92400e}.clock-status.wrong{background:linear-gradient(135deg,#fecdd3f2,#fee2e2e6);border-color:#e11d4842;color:#9f1239}.clock-settings{display:grid;grid-template-columns:minmax(0,14rem);gap:.75rem;margin-bottom:1rem}.clock-field{display:grid;gap:.35rem}.clock-field label{font-size:.86rem;font-weight:700;color:#475569}.clock-field select,.clock-btn{border:1px solid rgba(51,65,85,.22);border-radius:1rem;background:#ffffffeb;color:#0f172a;font-weight:700;padding:.8rem 1rem}.clock-btn{cursor:pointer;transition:transform .15s ease,background-color .15s ease}.clock-btn:hover{transform:translateY(-1px);background:#fff}.clock-btn-primary{background:#0f172a;color:#fff;border-color:#0f172a}.clock-btn-primary:hover{background:#1e293b}.clock-btn:disabled{opacity:.56;cursor:default;transform:none}.clock-btn:disabled:hover{background:#ffffffeb}.clock-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.clock-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.clock-chip{display:grid;gap:.2rem;border:1px solid rgba(148,163,184,.35);border-radius:1rem;background:#ffffffd9;padding:.8rem .9rem}.clock-chip-label{font-size:.76rem;font-weight:700;color:#64748b;letter-spacing:.08em}.clock-chip strong{font-size:1rem}.clock-stage{border:1px solid rgba(51,65,85,.18);border-radius:1.35rem;padding:1rem;background:linear-gradient(180deg,#fff9ec,#fff3d6);box-shadow:inset 0 1px #ffffffb8;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.clock-stage.success{background:linear-gradient(180deg,#fef3c7f5,#fef9c3eb);border-color:#d977064d;box-shadow:0 0 0 3px #fbbf242e,inset 0 1px #ffffffc2}.clock-stage.wrong{background:linear-gradient(180deg,#fff1f2f5,#fee2e2e6);border-color:#e11d4838;box-shadow:0 0 0 3px #fb71851f,inset 0 1px #ffffffc2}.clock-stage-inner{display:grid;gap:1rem;justify-items:center}.clock-board{width:min(100%,24rem);touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.clock-face{fill:#ffffffeb;stroke:#94a3b866;stroke-width:3}.clock-tick-major{stroke:#334155;stroke-width:4;stroke-linecap:round}.clock-tick-minor{stroke:#64748b8c;stroke-width:2.6;stroke-linecap:round}.clock-number{font-size:16px;font-weight:800;fill:#334155;text-anchor:middle;dominant-baseline:middle}.clock-hand{stroke-linecap:round;cursor:grab;transition:filter .12s ease}.clock-hand.active,.clock-handle.active{filter:drop-shadow(0 0 10px rgba(251,191,36,.55))}.clock-hand-minute{stroke:#2563eb;stroke-width:7}.clock-hand-hour{stroke:#d97706;stroke-width:10}.clock-handle{fill:#2563eb2e;stroke:#2563eb47;stroke-width:2;cursor:grab}.clock-handle-hour{fill:#d977062e;stroke:#d9770647}.clock-center{fill:#0f172a}.clock-helper{display:grid;gap:.25rem;justify-items:center;text-align:center}.clock-helper strong{font-size:1rem}.clock-helper span{color:#475569;font-size:.92rem}.clock-helper.success strong{color:#d97706}.clock-stage.success .clock-board{animation:clockCelebrate .38s ease-out}@keyframes clockCelebrate{0%{transform:scale(.96)}55%{transform:scale(1.03)}to{transform:scale(1)}}@media (max-width: 768px){.clock-top{gap:.75rem;margin-bottom:.55rem}.clock-kicker{font-size:.64rem}.clock-title{margin-top:.25rem;font-size:1.28rem;line-height:1.2}.clock-status{margin-bottom:.65rem;padding:.72rem .85rem;font-size:.94rem;line-height:1.45}.clock-settings{grid-template-columns:1fr;gap:.55rem;margin-bottom:.7rem}.clock-field select,.clock-btn{padding:.72rem .9rem}.clock-actions{gap:.55rem;margin-bottom:.7rem}.clock-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-bottom:.7rem}.clock-chip{padding:.55rem .6rem;border-radius:.85rem}.clock-chip-label{font-size:.67rem}.clock-chip strong{font-size:.87rem;line-height:1.3}.clock-stage{padding:.72rem}.clock-stage-inner{gap:.7rem}.clock-board{width:min(100%,17rem)}.clock-number{font-size:13px}.clock-helper strong{font-size:.94rem}.clock-helper span{font-size:.83rem}}@media (prefers-reduced-motion: reduce){.clock-btn,.clock-board,.clock-hand,.clock-handle{transition:none;animation:none!important}}.dark .clock-shell{color:#e2e8f0}.dark .clock-kicker{color:#94a3b8}.dark .clock-status{background:linear-gradient(135deg,#1e293bf0,#334155d6);border-color:#94a3b838}.dark .clock-status.success{background:linear-gradient(135deg,#78350fd1,#713f12eb);border-color:#fbbf2447;color:#fef08a}.dark .clock-status.wrong{background:linear-gradient(135deg,#7f1d1dd1,#881337eb);border-color:#fb71853d;color:#fecdd3}.dark .clock-field label,.dark .clock-helper span{color:#cbd5e1}.dark .clock-field select,.dark .clock-btn,.dark .clock-chip{background:#0f172aeb;border-color:#94a3b838;color:#e2e8f0}.dark .clock-stage{background:linear-gradient(180deg,#1e293bf5,#0f172af5);border-color:#94a3b833}.dark .clock-stage.success{background:linear-gradient(180deg,#78350f59,#713f1275);border-color:#fbbf2442;box-shadow:0 0 0 3px #fbbf241f,inset 0 1px #ffffff0f}.dark .clock-stage.wrong{background:linear-gradient(180deg,#7f1d1d57,#8813376b);border-color:#fb718538;box-shadow:0 0 0 3px #fb71851a,inset 0 1px #ffffff0f}.dark .clock-face{fill:#0f172ad1;stroke:#94a3b847}.dark .clock-tick-major{stroke:#e2e8f0}.dark .clock-tick-minor{stroke:#cbd5e185}.dark .clock-number{fill:#e2e8f0}.dark .clock-center{fill:#f8fafc}