:root{font-family:Aptos,Segoe UI,Arial,sans-serif;color:#17212c;background:#f1f4f4;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #17212c;--muted: #66737f;--line: #dfe5e5;--paper: #ffffff;--surface: #f7f9f9;--green: #087d53;--green-dark: #07543c;--green-soft: #e8f4ef;--navy: #102f56;--shadow: 0 18px 54px rgba(18, 40, 51, .12)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#f1f4f4;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.68}img,svg{display:block;max-width:100%}:focus-visible{outline:3px solid rgba(8,125,83,.28);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{min-height:100vh}.topbar{min-height:76px;padding:14px clamp(18px,3vw,42px);display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;gap:24px;background:#fff;border-bottom:1px solid #dfe5e5;position:sticky;top:0;z-index:40}.topbar__brand,.topbar__status,.button,.eyebrow,.view-toggle,.preview-meta span,.section-heading,.subpanel__title,.switch-row,.design-note{display:flex;align-items:center}.topbar__brand{gap:12px;min-width:0}.brand-mark{width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:var(--green);border-radius:14px;box-shadow:0 9px 20px #087d5338}.topbar__brand strong,.topbar__brand small{display:block}.topbar__brand strong{font-size:17px;letter-spacing:-.02em}.topbar__brand small{margin-top:2px;color:var(--muted);font-size:12px}.topbar__status{justify-content:center;gap:7px;padding:8px 13px;color:var(--green-dark);background:var(--green-soft);border:1px solid #cae5d9;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}.topbar>.button{justify-self:end}.workspace{width:min(1560px,100%);min-height:calc(100vh - 76px);margin:0 auto;display:grid;grid-template-columns:minmax(360px,440px) minmax(560px,1fr)}.editor{min-width:0;background:#fff;border-right:1px solid var(--line)}.editor__intro{padding:30px 30px 24px}.eyebrow{gap:6px;color:var(--green);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.editor__intro h1,.preview-toolbar h2{margin:8px 0 0;letter-spacing:-.04em}.editor__intro h1{font-size:clamp(28px,3vw,38px);line-height:1.08}.editor__intro p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.65}.editor-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:0 18px 14px;border-bottom:1px solid var(--line)}.editor-tab{min-width:0;padding:10px 5px;display:grid;justify-items:center;gap:6px;color:#71808b;background:transparent;border:0;border-radius:10px;font-size:10px;font-weight:700}.editor-tab:hover{background:#f4f7f6;color:var(--ink)}.editor-tab.is-active{color:var(--green-dark);background:var(--green-soft)}.editor-panel{padding:26px 30px 40px}.form-section{display:grid;gap:18px;animation:panel-enter .18s ease-out}@keyframes panel-enter{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.section-heading{align-items:flex-start;gap:11px;margin-bottom:2px}.section-heading>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;color:var(--green);background:var(--green-soft);border-radius:10px}.section-heading h2,.section-heading p{margin:0}.section-heading h2{font-size:16px}.section-heading p{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.5}.field{min-width:0;display:grid;gap:7px}.field__label{color:#3c4953;font-size:12px;font-weight:700}.field__hint{color:#89939b;font-size:10px}.field input:not([type=color]):not([type=checkbox]):not([type=range]),.field textarea,.field select{width:100%;min-height:43px;padding:10px 12px;color:var(--ink);background:#fff;border:1px solid #d7dfdf;border-radius:10px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.field textarea{resize:vertical;line-height:1.45}.field input:hover,.field textarea:hover,.field select:hover{border-color:#b8c7c3}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green);box-shadow:0 0 0 3px #087d531a}.field input[type=range]{width:100%;accent-color:var(--green)}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.upload-field{padding:13px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px}.upload-field__preview{width:72px;height:82px;object-fit:cover;background:#fff;border:1px solid #d8dfdf;border-radius:10px}.upload-field__preview--logo{height:72px;object-fit:contain;padding:6px}.upload-field__copy{min-width:0}.upload-field__copy strong,.upload-field__copy span{display:block}.upload-field__copy strong{font-size:13px}.upload-field__copy span{margin:3px 0 9px;color:var(--muted);font-size:10px}.subpanel{padding:15px;display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.subpanel__title{gap:7px;color:var(--navy);font-size:13px;font-weight:800}.switch-row{justify-content:space-between;gap:12px;color:#3f4d57;font-size:12px;font-weight:700}.switch-row input{position:absolute;opacity:0;pointer-events:none}.switch{width:40px;height:23px;padding:3px;flex:0 0 auto;background:#c9d1d1;border-radius:999px;transition:background .15s ease}.switch span{width:17px;height:17px;display:block;background:#fff;border-radius:50%;box-shadow:0 2px 5px #11222a33;transition:transform .15s ease}.switch-row input:checked+.switch{background:var(--green)}.switch-row input:checked+.switch span{transform:translate(17px)}.color-list{display:grid;gap:15px}.color-input{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px}.color-input input[type=color]{width:48px;height:43px;padding:4px;background:#fff;border:1px solid #d7dfdf;border-radius:10px}.design-note{align-items:flex-start;gap:10px;padding:14px;color:var(--green-dark);background:var(--green-soft);border:1px solid #cae5d9;border-radius:14px}.design-note svg{flex:0 0 auto}.design-note p{margin:0;font-size:12px;line-height:1.6}.preview-pane{min-width:0;padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;background:#f1f4f4}.preview-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}.preview-toolbar h2{font-size:24px}.view-toggle{padding:4px;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 7px 20px #1228330f}.view-toggle button{padding:8px 11px;display:flex;align-items:center;gap:6px;color:var(--muted);background:transparent;border:0;border-radius:8px;font-size:11px;font-weight:750}.view-toggle button.is-active{color:#fff;background:var(--navy)}.preview-canvas{min-height:650px;flex:1;display:grid;place-items:center;position:relative;overflow:hidden;background:#e8ecec;border:1px solid #d8dfdf;border-radius:24px;box-shadow:inset 0 1px #fffc}.preview-canvas--card{background-image:url(/assets/lanyard-scene-real-v4.png);background-size:cover;background-position:center}.preview-canvas--card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#eef3f2e0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.visible-card,.visible-scene{position:relative;z-index:1}.visible-card,.export-card,.reality-scene__card{container-type:inline-size}.visible-card{width:min(410px,calc(100% - 36px));filter:drop-shadow(0 28px 30px rgba(10,30,39,.22))}.visible-scene{width:min(1000px,calc(100% - 28px))}.preview-meta{padding:15px 4px 2px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;color:var(--muted)}.preview-meta span{gap:6px;font-size:11px}.action-bar{margin-top:18px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.button{min-height:42px;justify-content:center;gap:8px;padding:10px 15px;border:1px solid transparent;border-radius:10px;font-size:12px;font-weight:800;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.button:hover:not(:disabled){transform:translateY(-1px)}.button--primary{color:#fff;background:var(--green);border-color:var(--green);box-shadow:0 10px 22px #087d5333}.button--primary:hover:not(:disabled){background:var(--green-dark)}.button--secondary{color:#fff;background:var(--navy);border-color:var(--navy);box-shadow:0 10px 22px #102f562e}.button--ghost{color:#42515b;background:#fff;border-color:#d9e0e0}.button--soft{color:var(--green-dark);background:var(--green-soft);border-color:#cae5d9}.button--small{min-height:32px;width:fit-content;padding:6px 9px;font-size:10px}.badge-card{--brand-primary: #008e57;--brand-secondary: #0d3768;--validity-color: #b51f29;width:100%;aspect-ratio:54 / 85.6;container-type:inline-size;position:relative;overflow:hidden;isolation:isolate;color:#0a141e;background:#fff;border-radius:4.1cqw;box-shadow:0 2cqw 8cqw #0e263033;font-family:Arial,Segoe UI,sans-serif}.badge-card__background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-3;width:100%;height:100%;object-fit:cover}.badge-card:after{content:"";position:absolute;inset:auto 0 0;z-index:-1;height:2.7%;background:var(--brand-secondary);border-right:14cqw solid var(--brand-primary)}.badge-card__watermark{position:absolute;z-index:-2;top:34%;right:-7%;width:46%;opacity:.075;filter:grayscale(1)}.badge-card__header{position:absolute;inset:4.8% 6% auto;display:flex;align-items:flex-start;justify-content:space-between;gap:4cqw}.badge-card__logo{width:25%;max-height:15cqw;object-fit:contain;object-position:left top}.badge-card__slogan{width:39%;padding-top:1.8cqw;color:var(--brand-secondary);font-size:4.45cqw;font-weight:900;line-height:.92;text-align:right;text-transform:uppercase;letter-spacing:-.06em}.badge-card__identity{position:absolute;inset:28.5% 6.4% auto;height:31.5%;display:grid;grid-template-columns:42% 1fr;gap:4cqw}.badge-card__portrait-frame{height:100%;padding:.9cqw;background:#fff;box-shadow:0 0 0 .65cqw #ffffffe6,0 1.1cqw 2.4cqw #0b232a29}.badge-card__portrait{width:100%;height:100%;object-fit:cover}.badge-card__facts{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1.5cqw}.badge-fact{min-width:0}.badge-fact span,.badge-fact strong{display:block;text-transform:uppercase}.badge-fact span{margin-bottom:.25cqw;color:#111820;font-size:2.65cqw;font-weight:900;line-height:1}.badge-fact strong{overflow:hidden;font-size:4cqw;font-weight:950;line-height:.98;letter-spacing:-.045em}.badge-fact--name strong{font-size:4.5cqw;white-space:nowrap;text-overflow:ellipsis}.badge-fact--title strong{max-height:8.1cqw;font-size:3.75cqw}.badge-card__organization{position:absolute;top:62.3%;left:5.8%;right:5.8%;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:1.4cqw;color:#101820;text-align:center}.badge-card__organization svg{color:var(--brand-primary);font-size:4.2cqw}.badge-card__organization strong{font-size:3.55cqw;font-weight:900;line-height:1.02}.badge-card__organization small{grid-column:2;margin-top:.8cqw;color:#3f4c54;font-size:1.95cqw;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.badge-card__dates{position:absolute;top:71.4%;left:7.2%;right:7.2%;display:grid;grid-template-columns:44% 1fr;gap:5cqw}.badge-card__dates span,.badge-card__dates strong{display:block;text-transform:uppercase}.badge-card__dates span{font-size:2.6cqw;font-weight:900}.badge-card__dates strong{margin-top:.3cqw;font-size:4cqw;font-weight:950;line-height:1;letter-spacing:-.04em}.badge-card__validity span,.badge-card__validity strong{color:var(--validity-color)}.badge-card__verification{position:absolute;top:79.3%;left:7.2%;right:6.4%;height:17%;display:grid;grid-template-columns:28% 1fr;gap:4.5cqw}.badge-card__qr{padding:1cqw;align-self:start;background:#fff;box-shadow:0 0 0 .1cqw #0a141e0f}.badge-card__qr img{width:100%;aspect-ratio:1}.badge-card__qr span{display:block;margin-top:.45cqw;font-size:1.15cqw;font-weight:900;text-align:center;text-transform:uppercase;white-space:nowrap}.badge-card__right-code{min-width:0;display:grid;align-content:start;gap:2.1cqw}.badge-card__barcode{min-height:8.6cqw;padding:1.2cqw 1.4cqw .7cqw;background:#fff}.badge-card__barcode svg{width:100%;height:7.8cqw}.badge-card__signature{display:grid;justify-items:center}.badge-card__signature em{width:86%;overflow:hidden;padding-bottom:.3cqw;border-bottom:.22cqw solid #27343d;font-family:Segoe Script,Bradley Hand,cursive;font-size:4.5cqw;line-height:1.1;text-align:center;white-space:nowrap;text-overflow:ellipsis}.badge-card__signature span{margin-top:.5cqw;display:flex;align-items:center;gap:.7cqw;font-size:1.8cqw;font-weight:900;text-transform:uppercase}.badge-card__signature svg{color:var(--brand-primary)}.reality-scene{width:100%;aspect-ratio:4 / 3;position:relative;overflow:hidden;isolation:isolate;background:#e9eceb;border-radius:18px;box-shadow:var(--shadow)}.reality-scene__background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.reality-scene__badge{position:absolute;z-index:2;top:24.4%;left:35.5%;width:29%;aspect-ratio:54 / 85.6;transform:perspective(1400px) rotateX(.35deg) rotateY(-.75deg) rotate(.45deg);transform-origin:50% 0;filter:drop-shadow(0 1vw .85vw rgba(5,12,18,.32))}.reality-scene__card{position:absolute;z-index:1;top:21.8%;left:13%;width:74%;filter:saturate(.93) contrast(.98) brightness(.99)}.reality-scene__card .badge-card{border-radius:1.8cqw;box-shadow:none}.reality-scene__sleeve{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.export-stage{position:fixed;left:-100000px;top:0;pointer-events:none}.export-card{width:540px}.export-scene{width:1200px}.render-card-page{width:566px;margin:0;background:#fff}.render-card-page .badge-card{border-radius:0;box-shadow:none}@media(max-width:1160px){.workspace{grid-template-columns:minmax(340px,400px) minmax(460px,1fr)}.preview-pane{padding:28px}.preview-canvas{min-height:590px}.visible-card{width:min(370px,calc(100% - 32px))}}@media(max-width:880px){.topbar{grid-template-columns:1fr auto}.topbar__status{display:none}.workspace{display:block}.editor{border-right:0;border-bottom:1px solid var(--line)}.preview-canvas{min-height:660px}}@media(max-width:560px){.topbar{min-height:66px;padding:10px 14px;gap:10px}.topbar__brand small,.topbar>.button svg{display:none}.topbar>.button{padding-inline:10px}.editor__intro,.editor-panel{padding-left:18px;padding-right:18px}.editor__intro{padding-top:24px}.field-grid{grid-template-columns:1fr}.preview-pane{padding:22px 14px 28px}.preview-toolbar{align-items:stretch;flex-direction:column}.view-toggle{align-self:flex-start}.preview-canvas{min-height:560px;border-radius:18px}.visible-card{width:min(330px,calc(100% - 24px))}.visible-scene{width:calc(100% - 16px)}.action-bar .button{width:100%}}@media print{@page{size:54mm 85.6mm;margin:0}body{background:#fff}.app-shell>:not(.export-stage){display:none!important}.export-stage{position:static;left:auto;top:auto}.export-card{width:54mm}.export-card .badge-card{box-shadow:none;border-radius:0}.export-scene{display:none}}