.container{max-width:1400px;margin:0 auto;padding:20px}.main-layout{display:grid;grid-template-columns:350px 1fr;gap:20px;margin-top:20px}@media (max-width: 992px){.main-layout{grid-template-columns:1fr}}.control-panel{background:#f8f9fa;border-radius:8px;padding:15px;height:fit-content;max-height:calc(100vh - 150px);overflow-y:auto}.settings-section{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #dee2e6}.settings-section:last-of-type{border-bottom:none;margin-bottom:15px}.settings-section h2{font-size:1rem;margin-bottom:10px;color:#495057}.form-group{margin-bottom:12px}.form-group label{display:block;margin-bottom:5px;font-weight:500;color:#212529}.form-group input[type=text],.form-group input[type=file],.form-group select{width:100%;padding:8px 12px;border:1px solid #ced4da;border-radius:4px;font-size:14px}.form-group input[type=range]{width:calc(100% - 60px);vertical-align:middle}.form-group span{display:inline-block;width:50px;text-align:right;font-weight:600;color:#007bff}.form-group small{display:block;margin-top:5px;color:#6c757d;font-size:.875rem}.form-group input[type=checkbox]{margin-right:8px}.action-buttons{display:flex;gap:10px;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover:not(:disabled){background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover:not(:disabled){background:#545b62}button:disabled{opacity:.5;cursor:not-allowed}.preview-container{min-width:0;display:grid;grid-template-rows:1fr 1fr;gap:15px;height:calc(100vh - 200px)}@media (max-width: 768px){.preview-container{grid-template-rows:1fr 1fr}}.preview-panel{min-width:0;background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:10px;min-height:300px;display:flex;flex-direction:column}.preview-panel h3{margin-top:0;margin-bottom:10px;font-size:.95rem;color:#495057}#canvas2d{width:100%;flex:1;border:1px solid #ced4da;background:#fff}#canvas3d{width:100%;flex:1;border:1px solid #ced4da;background:#f0f0f0}.dimensions-info{margin-top:10px;padding:10px;background:#f8f9fa;border-radius:4px;font-size:.9rem;color:#495057}.status-message{padding:10px;margin-bottom:20px;border-radius:4px;display:none}.status-message.info{background:#cfe2ff;border:1px solid #b6d4fe;color:#084298;display:block}.status-message.success{background:#d1e7dd;border:1px solid #badbcc;color:#0f5132;display:block}.status-message.error{background:#f8d7da;border:1px solid #f5c2c7;color:#842029;display:block}.status-message.warning{background:#fff3cd;border:1px solid #ffecb5;color:#664d03;display:block}.instructions{background:#f8f9fa;border-radius:8px;padding:20px;margin-top:30px}.instructions h2{margin-top:0;color:#212529}.instructions h3{margin-top:20px;color:#495057}.instructions ol,.instructions ul{line-height:1.8;color:#495057}.instructions ol{list-style:decimal}.instructions ul{list-style:disc}.strap-settings{display:none}.strap-settings.active{display:block!important}.loading{position:relative}.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #007bff;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.3}.name-tag-tool .roster-section :is(textarea,select){width:100%;padding:10px;border:1px solid #ced4da;border-radius:6px;font:inherit;box-sizing:border-box}.name-tag-tool .roster-section label{display:block;margin:10px 0 5px}.name-tag-tool .roster-section small,.name-tag-tool .color-settings small{display:block;margin-top:8px;color:#59636d}.name-tag-tool .roster-section .action-buttons{margin-top:12px}.name-tag-tool input[type=file]{max-width:100%}.name-tag-tool .color-settings label{display:inline-flex;align-items:center;gap:8px;margin-right:18px}.name-tag-tool input[type=color]{width:52px;height:38px}.name-tag-tool .instructions :is(ol,ul){padding-left:1.5em}.name-tag-tool .preview-container{height:720px;grid-template-rows:280px 420px;position:sticky;top:80px}.name-tag-tool .preview-panel{min-height:0}.name-tag-tool #canvas2d{min-height:0;height:180px}.name-tag-tool #canvas3d{min-height:0;height:320px}@media (max-width:992px){.name-tag-tool .main-layout{display:flex;flex-direction:column}.name-tag-tool .preview-container{order:-1;position:static;width:100%;height:480px;grid-template-rows:190px 275px}.name-tag-tool #canvas2d{height:100px}.name-tag-tool #canvas3d{height:185px}.name-tag-tool .control-panel{width:100%;box-sizing:border-box}}.name-tag-tool .mobile-preview-switch{display:none}@media (max-width:992px){.name-tag-tool .preview-container{position:sticky;top:64px;z-index:2;flex-shrink:0;height:auto;display:block;background:#fff;border-radius:8px;box-shadow:0 3px 12px #0002;scroll-margin-top:64px}.name-tag-tool .mobile-preview-switch{display:flex;gap:6px;padding:6px 10px 0}.name-tag-tool .mobile-preview-switch button{min-height:44px;padding:6px 20px;border:1px solid #ced4da;border-radius:6px;background:#fff;color:#374151;font:inherit}.name-tag-tool .mobile-preview-switch button[aria-pressed=true]{background:#e0f3f0;border-color:#2a9d8f;color:#174b43}.name-tag-tool .preview-panel{height:172px;border:0;padding-top:4px}.name-tag-tool .preview-panel h3,.name-tag-tool .preview-container[data-view="2d"] #preview3d,.name-tag-tool .preview-container[data-view="3d"] #preview2d{display:none}.name-tag-tool #canvas2d,.name-tag-tool #canvas3d{height:110px;flex:1}.name-tag-tool .dimensions-info{margin-top:4px;padding:4px;font-size:.75rem}.name-tag-tool .control-panel :is(input,select,textarea,button){scroll-margin-top:300px}}@media (max-width:992px) and (max-height:500px){.name-tag-tool .preview-panel{height:112px}.name-tag-tool #canvas2d,.name-tag-tool #canvas3d{height:60px}.name-tag-tool .control-panel :is(input,select,textarea,button){scroll-margin-top:235px}}.name-tag-tool .choice-group{border:0;padding:0;margin:0;min-width:0}.name-tag-tool .choice-group legend{float:left;width:5.5em;padding:8px 0 0;margin:0;font-size:.85rem;font-weight:500;overflow-wrap:anywhere}.name-tag-tool .choice-options{display:flex;flex-wrap:nowrap;gap:0;margin-left:calc(4.675rem + 7px)}.name-tag-tool .choice-options label{flex:1 1 0;margin:0;position:relative;min-width:0}.name-tag-tool .choice-options input{position:absolute;opacity:0;width:1px;height:1px}.name-tag-tool .choice-options span{display:flex;align-items:center;justify-content:center;min-height:36px;width:auto;padding:4px 3px;box-sizing:border-box;border:1px solid #bfc9cd;border-radius:0;height:100%;font-size:.8rem;background:#fff;color:#374151;font-weight:500;cursor:pointer}.name-tag-tool .choice-options input:checked+span{background:#e0f3f0;border-color:#2a9d8f;color:#174b43;box-shadow:inset 0 0 0 1px #2a9d8f}.name-tag-tool .choice-options input:focus-visible+span{outline:3px solid #2765aa;outline-offset:2px}.name-tag-tool .choice-options input:disabled+span{opacity:.5;cursor:wait}.name-tag-tool .range-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}.name-tag-tool .range-heading label{margin:0;min-width:0}.name-tag-tool .range-heading output{flex-shrink:0;min-width:3ch;text-align:right;font-weight:600;color:#007bff;font-variant-numeric:tabular-nums}.name-tag-tool .form-group .range-heading+input[type=range]{display:block;width:100%;margin:0;min-height:32px}.name-tag-tool .save-hint{font-size:.8rem;color:#59636d;margin:8px 0 0}.name-tag-tool .setting-row{display:grid;grid-template-columns:5.5em minmax(25px,1fr) 74px;align-items:center;gap:7px}.name-tag-tool .setting-row label{font-size:.85rem;margin:0}.name-tag-tool .setting-row input[type=range]{width:100%;margin:0;min-height:36px}.name-tag-tool .setting-number{display:flex;align-items:center;gap:3px}.name-tag-tool .setting-number input{width:53px;min-width:0;height:28px;min-height:28px;box-sizing:border-box;padding:1px 3px;border:1px solid #bfc9cd;border-radius:5px;font-size:.85rem;color:#175f96}.name-tag-tool .setting-number span{width:auto;font-size:.7rem;color:#59636d;font-weight:400}.name-tag-tool .ring-editor{padding:10px;border:1px solid #ced4da;border-radius:8px;margin-top:14px}.name-tag-tool .ring-editor h3{font-size:.95rem;margin:0}.name-tag-tool .ring-editor .form-group{margin:0}.name-tag-tool .ring-editor small{font-size:.8rem;color:#59636d}.name-tag-tool .ring-editor svg,.name-tag-tool .connection-diagram svg{width:100%;display:block;max-height:145px}.name-tag-tool svg text{font-size:13px;fill:currentColor}.name-tag-tool .choice-options svg{width:18px;height:18px;flex-shrink:0}.name-tag-tool .choice-options span{gap:3px;flex-direction:row;text-align:center;line-height:1.35}.name-tag-tool .dimension-active,.name-tag-tool #ringDiagram[data-active=holeInner] #holeMeasure,.name-tag-tool #ringDiagram[data-active=rimWidth] #rimMeasure{stroke-width:5px}@media (max-width:360px){.name-tag-tool .setting-row{grid-template-columns:4.8em minmax(20px,1fr) 69px;gap:4px}.name-tag-tool .setting-number input{width:48px}}.name-tag-tool .ring-editor .setting-row{grid-template-columns:2em minmax(25px,1fr) 74px}@media (max-width:360px){.name-tag-tool .ring-editor .setting-row{grid-template-columns:2em minmax(25px,1fr) 69px}}.name-tag-tool .choice-options label+label{margin-left:-1px}.name-tag-tool .choice-options label:first-child span{border-radius:7px 0 0 7px}.name-tag-tool .choice-options label:last-child span{border-radius:0 7px 7px 0}.name-tag-tool .choice-options label:has(input:checked),.name-tag-tool .choice-options label:focus-within{z-index:1}@media (max-width:360px){.name-tag-tool .choice-group legend{width:4.8em}.name-tag-tool .choice-options{margin-left:calc(4.08rem + 4px)}}.name-tag-tool .compact-field{display:grid;grid-template-columns:4.675rem minmax(0,1fr);align-items:center;gap:7px}.name-tag-tool .compact-field label{margin:0;font-size:.85rem}.name-tag-tool .compact-field :is(input,select){width:100%;min-width:0;font-size:16px;padding:8px}.name-tag-tool .compact-field small{grid-column:1 / -1;margin:0}.name-tag-tool .roster-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}.name-tag-tool .roster-heading h2{margin:0}.name-tag-tool #nameCount{font-size:.75rem;color:#6c757d;white-space:nowrap}.name-tag-tool #fontSelect{font-size:.8rem;padding-inline:4px}.name-tag-tool #status:empty{display:none}.name-tag-tool .preview-reference{position:absolute;top:0;right:12px;display:flex;align-items:center;gap:5px;font-size:.75rem;min-height:36px;color:#59636d;cursor:pointer;white-space:nowrap}.name-tag-tool .preview-reference input{width:18px;height:18px}@media (min-width:993px){.name-tag-tool #preview2d{grid-area:1 / 1}.name-tag-tool #preview3d{grid-area:2 / 1}.name-tag-tool #preview3d h3{padding-right:100px}.name-tag-tool .preview-reference{position:relative;grid-area:2 / 1;align-self:start;justify-self:end;z-index:1}}@media (max-width:992px){.name-tag-tool .preview-reference{top:6px;right:10px;min-height:44px}.name-tag-tool .mobile-preview-switch{padding-right:100px}.name-tag-tool .mobile-preview-switch button{padding-inline:12px}}.name-tag-tool .form-group{margin-bottom:8px}.name-tag-tool .settings-section{margin-bottom:16px;padding-bottom:10px}@media (max-width:360px){.name-tag-tool .choice-options span:has(svg){flex-direction:column;gap:0;padding-block:2px}}.name-tag-tool .form-group.compact-field :is(input,select){height:32px;min-height:32px;padding-block:3px}.name-tag-tool .color-settings{display:flex;align-items:center;gap:12px}.name-tag-tool .color-settings h2{margin:0 auto 0 0}.name-tag-tool .color-settings label{margin:0;gap:5px;font-size:.85rem;white-space:nowrap}.name-tag-tool .color-settings input[type=color]{width:40px;height:28px;padding:2px}.name-tag-tool .connection-diagram svg{max-width:220px;height:82px;margin:4px auto 6px}.name-tag-tool .ring-editor svg{max-width:240px;height:104px;margin:0 auto}.name-tag-tool .ring-editor{margin-top:10px;padding:8px}.name-tag-tool .preview-name-switch{position:absolute;top:3px;right:12px;display:flex;align-items:center;gap:6px;font-size:.75rem}.name-tag-tool .preview-name-switch select{width:180px;max-width:100%;min-width:0;height:28px;box-sizing:border-box;padding:2px 6px;border:1px solid #bfc9cd;border-radius:4px;background:#fff;font-size:.85rem}@media (min-width:993px){.name-tag-tool #preview2d h3{padding-right:235px}}@media (max-width:992px){.name-tag-tool .preview-name-switch{position:static;padding:4px 10px 0}.name-tag-tool .preview-name-switch select{flex:1;width:0}.name-tag-tool .control-panel :is(input,select,textarea,button){scroll-margin-top:332px}}.name-tag-tool .save-toolbar{display:flex;align-items:stretch;gap:8px;padding:8px;border:1px solid #d5dedf;border-radius:8px;background:#fff;z-index:3}.name-tag-tool .save-toolbar>*{flex:1;min-width:0}.name-tag-tool .save-toolbar :is(summary,button){font:inherit;font-size:.85rem;min-height:40px;padding:8px;border:1px solid #bfc9cd;border-radius:5px;cursor:pointer;background:#fff;color:#233f43}.name-tag-tool .print-downloads{position:relative}.name-tag-tool .print-downloads summary{display:flex;justify-content:center;align-items:center;gap:8px;list-style:none;background:#2a9d8f;color:#fff;border-color:#2a9d8f;box-sizing:border-box;height:100%}.name-tag-tool .print-downloads summary::-webkit-details-marker{display:none}.name-tag-tool .print-download-options{position:absolute;bottom:calc(100% + 8px);left:0;min-width:220px;max-width:calc(100vw - 32px);padding:5px;border:1px solid #bfc9cd;border-radius:7px;background:#fff;box-shadow:0 4px 16px #0002;display:grid;gap:4px}.name-tag-tool .print-download-options button{text-align:left;width:100%}.name-tag-tool .print-download-options button:disabled{opacity:.45;cursor:default}.name-tag-tool .save-toolbar :is(summary,button):focus-visible{outline:2px solid #175f96;outline-offset:2px}@media (min-width:993px){.name-tag-tool .preview-container{height:calc(100dvh - 160px);max-height:760px;grid-template-rows:minmax(140px,.8fr) minmax(180px,1.2fr) auto}.name-tag-tool .save-toolbar{grid-area:3 / 1}.name-tag-tool #canvas2d,.name-tag-tool #canvas3d{flex:1;height:0;min-height:0}}@media (max-width:992px){.name-tag-tool{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.name-tag-tool .save-toolbar{position:fixed;bottom:0;left:0;right:0;border-radius:0;padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));box-shadow:0 -2px 10px #0001}}@media (max-width:992px){body:has(.name-tag-tool) .temoto-dl-notice{bottom:calc(76px + env(safe-area-inset-bottom))}body:has(#printDownloads[open]) .temoto-dl-notice{visibility:hidden}}.name-tag-tool .print-download-options small{display:block;margin-top:2px;font-size:.75rem;color:#59636d}@media screen and (max-width: 600px){.control-panel{padding:14px}.settings-section{margin-bottom:12px;padding-bottom:14px}.settings-section:last-of-type{margin-bottom:12px}.form-group input[type=text],.form-group input[type=file],.form-group select{min-height:var(--tap-min);box-sizing:border-box;font-size:var(--fs-input)}.btn-primary,.btn-secondary{padding:10px;min-height:var(--tap-min);box-sizing:border-box}.name-tag-tool .ring-editor{margin-top:12px}.name-tag-tool .settings-section{margin-bottom:12px}}.name-tag-tool[data-astro-cid-kh2nuruf] .form-group[data-astro-cid-kh2nuruf] :is(input[type=text],input[type=file],select)[data-astro-cid-kh2nuruf]{box-sizing:border-box;max-width:100%}@media (max-width: 992px){.name-tag-tool[data-astro-cid-kh2nuruf] .control-panel[data-astro-cid-kh2nuruf]{max-height:none;overflow:visible;min-width:0}}