*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif}body{color:#fff;background:#0f172a}.app{justify-content:center;align-items:center;min-height:100vh;display:flex}.card{background:#1e293b;border-radius:16px;width:320px;padding:32px;box-shadow:0 10px 30px #0000004d}.title{margin-bottom:8px;font-size:24px}.subtitle{color:#94a3b8;margin-bottom:24px;font-size:14px}.form{flex-direction:column;gap:12px;display:flex}.input{color:#fff;background:#334155;border:none;border-radius:8px;outline:none;padding:10px}.input::placeholder{color:#94a3b8}.button{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:8px;margin-top:8px;padding:10px;transition:all .2s}.button:hover{background:#2563eb}.result{text-align:center;margin-top:20px;font-size:16px}.shifts{text-align:left;margin-top:20px}.shifts h3{color:#e2e8f0;margin-bottom:10px;font-size:16px}.shift-options{flex-wrap:wrap;gap:10px;margin-bottom:16px;display:flex}.shift-options label{cursor:pointer;background:#334155;border-radius:8px;align-items:center;gap:6px;padding:6px 10px;font-size:14px;transition:all .2s;display:flex}.shift-options label:hover{background:#475569}.shift-options input{accent-color:#3b82f6}.shift-counts{flex-direction:column;gap:8px;display:flex}.shift-counts div{justify-content:space-between;align-items:center;font-size:14px;display:flex}.shift-counts input{color:#fff;background:#334155;border:none;border-radius:6px;width:70px;padding:6px}.shift-summary{border-top:1px solid #334155;margin-top:16px;padding-top:12px;font-size:14px}.shift-summary p{justify-content:space-between;margin-bottom:4px;display:flex}.shift-summary strong{color:#3b82f6}.result-summary{border-top:1px solid #334155;margin-top:12px;padding-top:10px;font-size:14px}.result-summary p{justify-content:space-between;margin-bottom:4px;display:flex}.result-summary strong{color:#e2e8f0}.overtime{color:#f87171;margin-left:6px;font-size:12px}