:root{--green:#2e7d32;--orange:#ef6c00;--gray:#616161;--red:#c62828;--bg:#fff;--line:#e0e0e0;--soft:#f5f5f5}*{box-sizing:border-box}body{background:var(--bg);margin:0}.page{flex-direction:column;gap:16px;max-width:480px;min-height:100dvh;margin:0 auto;padding:24px 20px 48px;display:flex}h1{margin:8px 0;font-size:26px;line-height:1.3}h2{margin:4px 0;font-size:22px}p{margin:0}.muted{color:var(--gray)}.small{font-size:15px}.big-btn{color:#fff;background:var(--green);cursor:pointer;border:0;border-radius:16px;width:100%;min-height:72px;padding:16px;font-size:24px;font-weight:700;display:block}.big-btn.secondary{color:#1d1d1f;border:2px solid var(--line);background:#fff;min-height:64px;font-size:20px;font-weight:600}.big-btn.orange{background:var(--orange)}.big-btn.gray{background:var(--gray)}.big-btn:disabled{opacity:.5;cursor:default}.text-btn{color:var(--gray);cursor:pointer;background:0 0;border:0;padding:12px;font-size:17px;text-decoration:underline}.badge{color:#fff;border-radius:999px;align-self:flex-start;padding:8px 16px;font-size:20px;font-weight:700}.badge[data-state=off]{background:#616161}.badge[data-state=working]{background:var(--green)}.badge[data-state=break]{background:var(--orange)}.badge[data-state=done]{background:var(--gray)}.banner{border:2px solid var(--orange);background:#fff3e0;border-radius:12px;flex-direction:column;gap:8px;padding:14px;font-size:17px;display:flex}.panel{border-radius:12px;flex-direction:column;gap:12px;padding:16px;font-size:18px;display:flex}.panel.error{border:2px solid var(--red);background:#ffebee}.panel.info{background:var(--soft);border:2px solid var(--line)}.timeline{flex-direction:column;gap:6px;margin:0;padding:0;font-size:18px;list-style:none;display:flex}.list{flex-direction:column;gap:10px;display:flex}.divider{border:0;border-top:2px solid var(--line);width:100%;margin:16px 0}.confirm{z-index:10;color:#fff;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;font-size:30px;font-weight:800;display:flex;position:fixed;inset:0}.confirm[data-tone=in]{background:var(--green)}.confirm[data-tone=break]{background:var(--orange)}.confirm[data-tone=out],.confirm[data-tone=neutral]{background:var(--gray)}.confirm .check{font-size:72px}.confirm .sub{font-size:20px;font-weight:500}.pinpad{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.pinpad button{border:2px solid var(--line);background:#fff;border-radius:14px;min-height:68px;font-size:28px;font-weight:700}.pin-dots{letter-spacing:4px;justify-content:center;gap:16px;min-height:44px;font-size:32px;display:flex}label.field{flex-direction:column;gap:6px;font-size:17px;display:flex}input.input,select.input{border:2px solid var(--line);border-radius:12px;width:100%;padding:14px;font-size:20px}.hint{color:var(--green);font-size:14px}.check-row{align-items:flex-start;gap:12px;font-size:17px;display:flex}.check-row input{flex:none;width:28px;height:28px}.steps{color:var(--gray);font-size:16px}.preview{border:2px solid var(--line);border-radius:12px;width:100%}.month-nav{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.month-nav button{border:2px solid var(--line);background:#fff;border-radius:10px;min-height:48px;padding:0 14px;font-size:17px}.record-row{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:4px;padding:10px 0;font-size:18px;display:flex}.address{word-break:break-all;font-size:22px;font-weight:700}ol.guide{flex-direction:column;gap:6px;padding-left:22px;font-size:18px;display:flex}
