/* The design tools use the existing TL Menu palette and the same preview paint code as Admin. */
.nametag-studio{padding-block:100px 110px;scroll-margin-top:-1px;--ns-ground:var(--page-stage,#172737);--ns-panel:var(--page-panel,#25394a);--ns-line:#476071;--ns-ink:var(--page-ink,#e0e9ef);--ns-sub:var(--page-muted,#b1c3d0);--ns-accent:var(--page-accent,#a5e3d2)}
.ns-heading{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:36px}.ns-heading h2{font-size:clamp(36px,4.4vw,56px);letter-spacing:-.04em}.ns-heading p{font-size:15px;color:var(--ns-sub);max-width:420px;line-height:1.8}
.ns-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:30px;align-items:start}.ns-preview{position:sticky;top:110px;min-width:0}.ns-preview-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:14px;font-weight:600}.ns-local{font-size:12px;font-weight:400;color:var(--ns-sub)}.ns-renderer{min-width:0}
.ns-note{font-size:13px;line-height:1.7;color:var(--ns-sub);margin-top:22px;max-width:390px}.ns-backdrops{display:flex;align-items:center;gap:8px;margin-top:18px}.ns-backdrop{border:1px solid var(--ns-line);border-radius:999px;padding:7px 13px;min-height:36px;font-size:12px;color:var(--ns-sub);background:transparent;transition:background .18s,color .18s}.ns-backdrop[aria-pressed=true]{background:var(--ns-panel);border-color:var(--ns-accent);color:var(--ns-ink)}
.ns-editor{min-width:0;background:var(--ns-ground);border-radius:22px;padding:24px}.ns-tabs{display:flex;gap:18px;border-bottom:1px solid #ffffff1a;overflow-x:auto;padding:0 2px;scrollbar-width:thin}.ns-tabs button{background:transparent;white-space:nowrap;min-height:44px;padding:0 0 13px;border-bottom:2px solid transparent;border-radius:0;font:600 13px Manrope,system-ui;color:var(--ns-sub);transition:color .18s}.ns-tabs button[aria-selected=true]{border-bottom-color:var(--ns-accent);color:var(--ns-ink)}
.ns-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;padding-block:26px;min-height:200px}.ns-field{display:flex;flex-direction:column;gap:10px;min-width:0}.ns-wide{grid-column:1/-1}.ns-field-label{font-size:13px;color:var(--ns-sub);line-height:1.5}.ns-input,.ns-select,.ns-color{width:100%;min-width:0;height:44px;padding:10px 12px;font:14px Manrope,system-ui;color:var(--ns-ink);background:var(--ns-panel);border:1px solid var(--ns-line);border-radius:12px;box-sizing:border-box}.ns-input:focus{outline:none;border-color:var(--ns-accent)}.ns-input[aria-invalid=true]{border-color:#ea8d9a}.ns-select,.ns-color{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;transition:border-color .18s,background .18s}.ns-select[aria-expanded=true],.ns-color[aria-expanded=true]{border-color:var(--ns-accent)}.ns-select>span:first-child{display:flex;align-items:center;gap:8px;min-width:0}.ns-chevron{display:flex;flex:none}.ns-color-sample{width:24px;height:24px;border:1px solid #ffffff40;border-radius:8px;flex:none}.ns-color>span:last-child{font-size:12px;font-variant-numeric:tabular-nums;color:var(--ns-sub)}
.ns-editor-footer{border-top:1px solid #ffffff1a;padding-top:20px}.ns-actions{display:flex;gap:10px;flex-wrap:wrap}.ns-primary,.ns-secondary{min-height:42px;padding:10px 17px;border-radius:12px;font:600 13px Manrope,system-ui;transition:background .18s,border-color .18s,color .18s}.ns-primary{background:var(--ns-accent,#a5e3d2);color:#15332b;border:1px solid transparent}.ns-primary:hover{background:#c2f2e4}.ns-secondary{background:transparent;color:var(--ns-ink,#e0e9ef);border:1px solid var(--ns-line,#476071)}.ns-secondary:hover{background:#ffffff0b;border-color:#86a4b5}.ns-text{min-height:36px;padding:8px 0;background:none;color:var(--ns-sub,#b1c3d0);font:12px Manrope,system-ui;text-align:left}.ns-text:hover{color:var(--ns-ink,#e0e9ef)}.ns-text:disabled{opacity:.4;cursor:default}.ns-save-status{font-size:12px;color:var(--ns-sub);line-height:1.6;min-height:20px;margin-top:12px}
.ns-switch{width:44px;height:26px;padding:3px;border-radius:999px;border:1px solid var(--ns-line);background:var(--ns-panel);align-self:flex-start;display:flex;align-items:center;transition:background .18s}.ns-switch span{width:18px;height:18px;border-radius:50%;background:var(--ns-sub);transition:transform .18s,background .18s}.ns-switch[aria-checked=true]{background:var(--ns-accent)}.ns-switch[aria-checked=true] span{transform:translateX(17px);background:#18352f}
.ns-range{display:flex;align-items:center;gap:12px;height:44px}.ns-range output{font-size:12px;color:var(--ns-sub);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}.ns-range input,.ns-hue{width:100%;min-width:0;height:6px;appearance:none;-webkit-appearance:none;border-radius:999px;background:#537080;outline:none;cursor:pointer}.ns-range input::-webkit-slider-thumb,.ns-hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#d7e9ef;border:2px solid var(--ns-ground,#172737);box-shadow:0 0 0 1px #a8c4d1}.ns-range input::-moz-range-thumb,.ns-hue::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#d7e9ef;border:2px solid #172737}.ns-range input:focus-visible{outline:2px solid var(--ns-accent);outline-offset:8px}
.ns-image-control{display:grid;gap:12px;min-width:0}.ns-image-line{display:flex;gap:10px;min-width:0;align-items:center}.ns-image-thumb{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none}.ns-image-thumb[hidden]{display:none}.ns-image-line .ns-input{flex:1;min-width:0}.ns-image-line .ns-secondary{padding:10px 12px;flex:none}.ns-drop{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;background:#ffffff05;border:1px solid var(--ns-line);border-radius:14px;transition:background .18s,border-color .18s}.ns-drop small{font-size:11px;color:var(--ns-sub);flex:1;min-width:100px;line-height:1.6}.ns-drop.over{background:#a5e3d214;border-color:var(--ns-accent)}
.ns-pop{position:fixed;z-index:100100;border:1px solid #506879;border-radius:14px;padding:7px;background:#223747;color:#e0e9ef;box-shadow:0 15px 50px #0005;font:14px Manrope,system-ui;max-height:min(340px,calc(100dvh - 24px));overflow:auto;scrollbar-width:thin;scrollbar-color:#6c899a transparent;box-sizing:border-box}.ns-pop[hidden]{display:none}.ns-pop::-webkit-scrollbar{width:6px}.ns-pop::-webkit-scrollbar-thumb{background:#6c899a;border-radius:999px}.ns-pop::-webkit-scrollbar-button{display:none;width:0;height:0}.ns-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:left;min-height:44px}.ns-option span:first-child{display:flex;align-items:center;gap:10px}.ns-option:hover,.ns-option:focus-visible{background:#ffffff0c;outline:none}.ns-option[aria-selected=true]{background:#354e63}.ns-option-check{visibility:hidden}.ns-option[aria-selected=true] .ns-option-check{visibility:visible}.ns-option img,.ns-select img{width:18px;height:18px;object-fit:contain}
.ns-color-pop{padding:16px;max-width:310px}.ns-color-plane{position:relative;width:100%;height:154px;border-radius:12px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--hue),100%,50%));touch-action:none;cursor:crosshair}.ns-color-thumb{position:absolute;width:16px;height:16px;border:2px solid white;box-shadow:0 1px 4px #0008;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.ns-hue{height:10px;margin:24px 0;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.ns-color-pop .ns-input{background:#172737}.ns-palette{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:14px}.ns-palette button{width:24px;height:24px;min-width:0;border-radius:50%;border:1px solid #ffffff50}
.ns-confirm{max-width:420px;width:calc(100vw - 32px);border:1px solid #506879;border-radius:20px;background:#223747;color:#e0e9ef;padding:26px;font:14px Manrope,system-ui;box-shadow:0 20px 80px #0005}.ns-confirm::backdrop{background:#071019b3}.ns-confirm h3{font-size:22px;letter-spacing:-.5px}.ns-confirm p{font-size:14px;margin:14px 0 22px;color:#b1c3d0;line-height:1.7}.ns-confirm-actions{display:flex;justify-content:flex-end;gap:10px}.ns-load{padding:24px;border:1px solid var(--ns-line);border-radius:18px;color:var(--ns-sub);font-size:14px}.ns-load[hidden]{display:none}.ns-load p{margin-bottom:14px}
@media(max-width:1050px){.ns-layout{gap:22px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.ns-editor{padding:20px}.ns-fields{grid-template-columns:1fr}.ns-tabs{gap:14px}.ns-tabs button{font-size:12px}.ns-local{display:none}}
@media(max-width:760px){.nametag-studio{padding-block:65px 75px}.ns-heading{grid-template-columns:1fr;gap:18px;margin-bottom:25px}.ns-heading h2{font-size:40px}.ns-heading p{font-size:14px}.ns-layout{grid-template-columns:1fr;gap:26px}.ns-preview{position:static}.ns-note{max-width:none;font-size:12px}.ns-editor{padding:18px;border-radius:18px}.ns-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.ns-preview-header{font-size:13px}.ns-local{display:block;font-size:11px}}
@media(max-width:420px){.ns-fields{grid-template-columns:1fr}.ns-image-line{flex-wrap:wrap}.ns-image-line .ns-input{flex-basis:calc(100% - 55px)}.ns-image-line .ns-secondary{width:100%}.ns-pop{font-size:13px}.ns-heading h2{font-size:36px}.ns-tabs{gap:16px}.ns-palette{gap:6px}}
@media(prefers-reduced-motion:reduce){.nametag-studio *,.ns-pop *{transition:none!important}}
.ns-layer-tools{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}.ns-layer-tools p{flex-basis:100%;font-size:12px;line-height:1.7;color:var(--ns-sub);margin-bottom:4px}.ns-layer-tools .ns-secondary{font-size:12px;min-height:36px;padding:8px 10px}.ns-tabs{position:sticky;top:88px;z-index:2;background:var(--ns-ground)}
.ns-invite{display:inline-flex;margin-top:20px;color:var(--page-accent);font-size:14px;border-bottom:1px solid currentColor;padding-bottom:4px}.ns-invite:hover{color:var(--page-ink)}
/* Keep the mobile editor in normal document flow; tabs must not cover its preview. */
@media(max-width:860px){.ns-preview,.ns-tabs{position:static;top:auto;z-index:auto}.ns-layout{grid-template-columns:1fr}.ns-tabs{scrollbar-width:none}.ns-tabs::-webkit-scrollbar{display:none}.ns-editor{overflow:visible;min-width:0}}


/* Chromium needs scrollbar-width:auto for the WebKit track and button rules to apply. */
.nametag-studio *,.ns-pop{scrollbar-color:#6c899a transparent;scrollbar-width:thin}
@supports selector(::-webkit-scrollbar){
 .nametag-studio *,.ns-pop{scrollbar-width:auto;scrollbar-color:auto}
 .nametag-studio *::-webkit-scrollbar,.ns-pop::-webkit-scrollbar{width:6px;height:6px;background:transparent}
 .nametag-studio *::-webkit-scrollbar-thumb,.ns-pop::-webkit-scrollbar-thumb{background:#6c899a;border-radius:999px;border:0}
 .nametag-studio *::-webkit-scrollbar-track,.ns-pop::-webkit-scrollbar-track{background:transparent;border:0}
 .nametag-studio *::-webkit-scrollbar-button,.ns-pop::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important;background:transparent}
 .nametag-studio *::-webkit-scrollbar-corner,.ns-pop::-webkit-scrollbar-corner{background:transparent}
}
@media(max-width:860px){.ns-tabs{scrollbar-width:none!important}.ns-tabs::-webkit-scrollbar{display:none!important}}


.ns-confirm[open]{animation:ns-dialog-in .18s ease-out both}.ns-confirm[open]::backdrop{animation:ns-backdrop-in .18s ease-out both}.ns-confirm.ns-closing[open]{animation:ns-dialog-out .18s ease-in both}.ns-confirm.ns-closing[open]::backdrop{animation:ns-backdrop-out .18s ease-in both}
@keyframes ns-dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes ns-dialog-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}@keyframes ns-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes ns-backdrop-out{from{opacity:1}to{opacity:0}}
.ns-studio-offer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--ns-line);margin-top:20px;padding-top:20px}.ns-studio-offer p{margin:0;font-size:13px;color:var(--ns-sub)}.ns-studio-offer a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(prefers-reduced-motion:reduce){.ns-confirm[open],.ns-confirm[open]::backdrop{animation:none!important}}


.ns-confirm{scrollbar-width:thin;scrollbar-color:#86aaac transparent}.ns-confirm::-webkit-scrollbar{width:7px}.ns-confirm::-webkit-scrollbar-thumb{background:#86aaac;border-radius:12px}.ns-confirm::-webkit-scrollbar-button{display:none;width:0;height:0}
/* -- by Larsiopuw */