:root{--blue:#2369d8;--blue-hover:#1c5ebf;--blue-soft:#edf4ff;--ink:#172033;--muted:#6c778c;--line:#e5e9f0;--surface:#fff;--canvas:#f5f7fb;--red:#a23b3b;--red-soft:#fff0f0;--red-border:#f0c7c7;--green:#198754;--green-soft:#eafaf1;--yellow:#a95c0a;--yellow-soft:#fff3df;--radius-md:10px;--radius-lg:16px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--canvas);color:var(--ink);-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}button{cursor:pointer;font-family:inherit}a{color:var(--blue);text-decoration:none}.app-shell{flex-direction:column;min-height:100dvh;display:flex}.app-content{padding:var(--sp-4) var(--sp-4) calc(72px + var(--sp-4));flex:1;width:100%;max-width:480px;margin:0 auto}.app-header{padding:var(--sp-4);text-align:center}.app-header h1{color:var(--ink);margin:0;font-size:1.1rem}.tab-bar{background:var(--surface);border-top:1px solid var(--line);padding:var(--sp-2) 0 max(var(--sp-2), env(safe-area-inset-bottom));z-index:10;display:flex;position:fixed;bottom:0;left:0;right:0}.tab-bar a,.tab-bar button{color:var(--muted);padding:var(--sp-2) 0;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;font-size:.7rem;display:flex}.tab-bar a.active{color:var(--blue)}.tab-bar svg{width:22px;height:22px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-4);margin-bottom:var(--sp-4)}.login-page{min-height:100dvh;padding:var(--sp-4);justify-content:center;align-items:center;display:flex}.login-card{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:380px;padding:var(--sp-6);box-shadow:0 8px 24px #111f341f}.login-card .logo{background:var(--blue);color:#fff;width:48px;height:48px;margin:0 auto var(--sp-4);border-radius:12px;justify-content:center;align-items:center;font-size:1.4rem;font-weight:700;display:flex}.login-card h1{text-align:center;margin:0 0 var(--sp-2);font-size:1.2rem}.login-card p.subtitle{text-align:center;color:var(--muted);margin:0 0 var(--sp-6);font-size:.9rem}label{color:var(--muted);margin-bottom:var(--sp-3);font-size:.85rem;display:block}label span.field-hint{color:var(--muted);margin-top:2px;font-size:.75rem;font-weight:400;display:block}input,select,textarea{border:1px solid var(--line);border-radius:var(--radius-md);background:#fbfcfe;width:100%;margin-top:4px;padding:10px 12px;font-family:inherit;font-size:1rem;display:block}input:focus{outline:2px solid var(--blue);outline-offset:1px}button.primary{border-radius:var(--radius-md);background:var(--blue);color:#fff;border:none;width:100%;padding:12px;font-size:1rem;font-weight:600}button.primary:disabled{opacity:.6;cursor:default}button.primary:not(:disabled):hover{background:var(--blue-hover)}button.secondary{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);width:100%;color:var(--ink);margin-top:var(--sp-2);padding:12px;font-size:.95rem;font-weight:500}.error-box{background:var(--red-soft);border:1px solid var(--red-border);color:var(--red);border-radius:var(--radius-md);padding:var(--sp-3);margin-bottom:var(--sp-4);font-size:.85rem}.success-box{background:var(--green-soft);border:1px solid var(--green);color:var(--green);border-radius:var(--radius-md);padding:var(--sp-3);margin-bottom:var(--sp-4);font-size:.9rem}.warn-box{background:var(--yellow-soft);border:1px solid var(--yellow);color:var(--yellow);border-radius:var(--radius-md);padding:var(--sp-3);margin-bottom:var(--sp-4);font-size:.85rem}.punch-button{aspect-ratio:1;width:100%;max-width:260px;margin:var(--sp-6) auto;background:var(--blue);color:#fff;text-align:center;padding:var(--sp-4);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:flex}.punch-button:disabled{opacity:.6}.list-item{padding:var(--sp-3) 0;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;display:flex}.list-item:last-child{border-bottom:none}.list-item .title{font-size:.95rem;font-weight:600}.list-item .subtitle{color:var(--muted);font-size:.8rem}.badge{background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:600}.link-button{color:var(--blue);border:none;border:1px solid var(--line);border-radius:var(--radius-md);background:0 0;padding:6px 12px;font-size:.9rem;font-weight:600}.center-message{text-align:center;color:var(--muted);padding:var(--sp-6) 0}