*{box-sizing:border-box}body{margin:0;background:#f5f5f4;color:#222;font:16px Arial,sans-serif;display:grid;min-height:100vh;place-items:center}main{background:white;border:1px solid #ddd;border-radius:12px;padding:32px;width:min(380px,calc(100vw - 80px))}h1{font-size:26px;font-weight:500}p{color:#666;line-height:1.5}label{display:grid;gap:10px;margin:24px 0 14px}input{font:inherit;min-width:0;padding:13px;border:1px solid #aaa;border-radius:6px;letter-spacing:3px}button{padding:13px 20px;background:#bc252c;color:white;border:0;border-radius:6px;font:inherit;width:100%;cursor:pointer}.error{color:#a02020}.brand{font-size:12px;letter-spacing:2px}a{color:inherit}.pin-field{margin:18px 0 12px}.pin-field>span{display:block;font-size:13px;color:#666;margin-bottom:8px}.pin-display{display:flex;align-items:center;justify-content:center;gap:22px;background:#f5f5f4;border:1px solid #ccc;min-height:52px;color:#222;padding:12px}.pin-display.is-active{border:2px solid #bc252c}.pin-dot{width:12px;height:12px;border:1px solid #888;border-radius:50%;background:transparent}.pin-dot.filled{background:#222;border-color:#222}.pin-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0}.pin-key{background:#f4f4f4;border:1px solid #ddd;color:#222;min-height:58px;padding:8px;font-size:24px;touch-action:manipulation}.pin-key:active{background:#dedede}.pin-action{font-size:14px}.pin-submit:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #bc252c;outline-offset:3px}main{margin:20px 0}button{-webkit-tap-highlight-color:transparent}p.error:empty{display:none}@media(max-width:400px){main{padding:24px;width:calc(100vw - 32px)}.pin-key{min-height:54px}}html[data-theme="dark"] main{background:#252527;border-color:#4c4c50}html[data-theme="dark"] p,html[data-theme="dark"] .pin-field>span{color:#b5b5ba}html[data-theme="dark"] .error{color:#ff7377}html[data-theme="dark"] .pin-display,html[data-theme="dark"] .pin-key{background:#303033;color:#f0f0f1;border-color:#55555a}html[data-theme="dark"] .pin-display.is-active{border-color:#ff7377}html[data-theme="dark"] .pin-dot.filled{background:#f0f0f1;border-color:#f0f0f1}html[data-theme="dark"] .pin-key:active{background:#48484e}