@font-face { font-family: "HARU-BIRU-2"; src: url("/static/fonts/HARU-BIRU-2.ttf.woff") format("woff"), url("/static/fonts/HARU-BIRU-2.ttf.svg#HARU-BIRU-2") format("svg"); font-display: swap; }
.card { background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.25rem; border-radius: .75rem; font-family: "Roboto Slab", serif; font-weight: 500; transition: transform .05s, background .15s; }
.btn:active { transform: scale(.97); } .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: #f42121; color: #fff; } .btn-primary:hover:not([disabled]) { background: #d41b1b; }
.btn-secondary { background: #fff4d9; color: #f42121; border: 1px solid #ffc02a; } .btn-secondary:hover { background: #ffe9b3; }
.btn-danger { background: #fff; color: #f42121; border: 2px solid #f42121; } .btn-danger:hover { background: #fff0f0; }
.input { width: 100%; min-height: 44px; padding: .5rem .75rem; border-radius: .75rem; border: 1px solid #ffc02a; background: #fff; }
.input:focus { outline: 3px solid #6c3f9240; border-color: #6c3f92; }
.label-text { display: block; font-family: "Roboto Slab", serif; font-weight: 500; margin-bottom: .35rem; }
.choice { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 .9rem; border-radius: .75rem; border: 2px solid #ffc02a66; background: #fff; cursor: pointer; }
.choice:has(input:checked) { border-color: #6c3f92; background: #6c3f920d; } .choice input { width: 1.1rem; height: 1.1rem; }
.swatch { width: 1.1rem; height: 1.1rem; border-radius: 999px; display: inline-block; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: 0 .75rem; border-radius: 999px; font-size: .8rem; font-weight: 500; text-transform: capitalize; border: 1px solid transparent; }
.pill .dot { width: .55rem; height: .55rem; border-radius: 999px; background: currentColor; }
.pill-off { background: #e5e7eb; color: #374151; } .pill-starting { background: #ffc02a40; color: #92400e; } .pill-ready { background: #dcfce7; color: #166534; } .pill-stopping { background: #ffc02a40; color: #92400e; }
.pill-starting .dot, .pill-stopping .dot { animation: blink 1s infinite; } @keyframes blink { 50% { opacity: .2; } }
.checker { background-color: #fff; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.tile { display: block; background: #fff; border-radius: .9rem; padding: .5rem; transition: box-shadow .15s; } .tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.cand { position: relative; border-radius: .9rem; padding: .5rem; background: #fff; border: 3px solid transparent; }
.cand.picked { border-color: #6c3f92; } .cand.refused { opacity: .55; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; color: #1a1a1a99; } .tab.active { color: #f42121; } .tab-ico { font-size: 1.2rem; }