:root{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",sans-serif;color:#243f35;background:#f3f6f2;font-synthesis:none}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{max-width:480px;margin:auto;padding:24px 22px max(24px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;gap:10px;margin-bottom:27px}header b{font-size:16px;letter-spacing:.03em}.brand-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#285d46;color:white;font-size:23px;font-weight:700}.brand-sub{display:block;font-size:9px;letter-spacing:.18em;margin-top:4px;color:#728177}.version{margin-left:auto;background:#e5ece3;color:#527151;font-size:12px;padding:6px 9px;border-radius:6px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;color:#568568}h1{font-size:25px;line-height:1.4;letter-spacing:-.04em;margin:8px 0 18px}p{line-height:1.65;margin:0}.identity-card,.panel{border:1px solid #dbe4d9;border-radius:16px;background:white;padding:18px}.identity-card{background:linear-gradient(120deg,#e7eee3,#f9fbf6)}.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}h2{font-size:14px;margin:0;font-weight:600}.badge{font-size:11px;border:1px solid #c9d7c9;color:#48674c;border-radius:20px;padding:3px 9px}.badge.ok{color:#1a613d;background:#d3e8d9;border-color:#bcdcc8}.identity-name{font-size:28px;font-weight:600;margin:10px 0 3px;overflow-wrap:anywhere}.sub{color:#657461;font-size:12px}.center{text-align:center}.network-banner{display:flex;align-items:center;gap:8px;background:#f3e9d5;color:#805f22;border-radius:10px;padding:12px;margin:12px 0;font-size:13px;font-weight:500}.network-banner.ok{background:#e1eee0;color:#326139}.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}.panel{margin-top:18px}label{display:block;font-size:13px;margin:16px 0 6px}input{width:100%;min-height:48px;border:1px solid #bdcdbb;border-radius:8px;padding:12px;font-family:inherit;font-size:18px;text-transform:uppercase;letter-spacing:.08em;color:#243f35;background:#fafcf8}button{width:100%;border:0;background:#286047;color:white;font-family:inherit;font-size:16px;font-weight:600;padding:16px;border-radius:12px;cursor:pointer;min-height:52px;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #97b798;outline-offset:3px}#bind-button{margin-top:12px}.punch-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 10px}.punch-actions button{min-height:94px;font-size:18px}.punch-actions span{display:block;font-size:21px;margin-bottom:6px}.secondary{background:#e3ebe0;color:#285139;border:1px solid #b5c8b1}.quiet{background:transparent;border:1px solid #cbd8c7;color:#46613f;font-size:13px;padding:11px;min-height:44px}#status{font-size:13px;color:#416f4a;text-align:center;min-height:42px;margin:13px 0 8px}#status.error{color:#963b2e}.empty{font-size:13px;text-align:center;padding:25px 0 13px;color:#758272}ol{list-style:none;padding:0;margin:9px 0 0}li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid #eef1ea}.record-action{display:grid;place-items:center;width:42px;height:42px;background:#edf3e8;border-radius:10px;font-size:13px;font-weight:600;flex-shrink:0}.record-time{font-size:15px;font-variant-numeric:tabular-nums;display:block}.record-meta{font-size:11px;color:#72816c;display:block;margin-top:4px}.connection{margin-top:21px;color:#758271;font-size:12px}.connection summary{cursor:pointer;padding:8px 0}dl{margin:0}dl>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0}dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}aside{margin-top:18px;padding:13px;background:#eaf0e7;border-radius:10px;color:#65745e;font-size:12px;line-height:1.7}footer{display:flex;justify-content:space-between;color:#87947e;font-size:10px;margin-top:20px}@media(max-width:350px){main{padding:18px 14px}h1{font-size:22px}.punch-actions button{font-size:16px}}