/* Incremental upgrade: retain the original palette, header, panels and frame styles. */
[hidden]{display:none!important}.maker-layout{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);align-items:start}.controls{min-width:0;width:100%;max-width:none;max-height:82vh}.preview-area{min-width:0;width:100%;position:sticky;top:88px}.preview-shell{position:relative;width:100%;min-width:0;margin:0 auto;overflow:visible}#capture-target{flex:none;position:absolute;left:50%;top:0;transform-origin:top center;margin:0!important;touch-action:none;cursor:grab}#capture-target:active{cursor:grabbing}.upgrade-preview-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;width:100%;padding:0 0 12px;color:var(--accent-cyan);font-size:12px}.upgrade-preview-bar>span:first-child{margin-right:auto}.upgrade-preview-bar button{border:1px solid #345878;color:#e0e6ed;background:#101e36;border-radius:4px;padding:7px 10px;cursor:pointer}.upgrade-preview-bar button:disabled{opacity:.4;cursor:default}.upgrade-note{color:var(--text-dim);font-size:11px;line-height:1.7;margin:9px 0}.upgrade-announcement{color:var(--accent-cyan);text-align:center;margin:0 0 15px}.upgrade-details{border:1px solid rgba(125,249,255,.22);border-radius:6px;padding:13px;margin:18px 0;background:rgba(0,0,0,.18)}.upgrade-details summary{cursor:pointer;color:var(--gold);font-size:13px}.upgrade-details summary small{display:block;color:var(--text-dim);font-size:10px;margin-top:3px}.upgrade-details label{margin-top:15px;font-size:12px;letter-spacing:.4px}.upgrade-row{display:flex;gap:8px;align-items:center}.upgrade-row>*{flex:1;min-width:0}.upgrade-row select{font-size:12px}.upgrade-export{border-top:1px solid rgba(125,249,255,.2);padding-top:20px}.upgrade-export .download-btn{cursor:pointer}.upgrade-export .cta-btn{font-size:15px}.upgrade-details input[type=url]{width:100%;padding:10px;background:rgba(0,0,0,.5);border:1px solid rgba(125,249,255,.3);color:white;border-radius:4px}.upgrade-details input[type=color]{width:100%;height:32px;padding:3px;background:#111c30;border:1px solid #345878}.saved-row{display:flex;gap:6px}.saved-row button:first-child{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-row button{background:#101e36;border:1px solid #345878;color:#e0e6ed;padding:8px;margin-top:8px;border-radius:4px;cursor:pointer}.preview-download{width:auto;min-width:210px;font-size:13px;padding:10px 20px;margin-top:8px}.sub-info{height:auto;min-height:32px;flex-wrap:wrap;gap:5px 9px}.server-display,.fc-display{font-size:1.1em;height:auto;overflow-wrap:anywhere}.text-group{min-width:0;max-width:65%}.char-name,.guild-name{overflow-wrap:anywhere}.marriage-display{overflow-wrap:anywhere;font-size:13px}.job-icons-container{max-width:32%;flex-shrink:0}.guild-main-info{max-width:55%}.guild-contact-box{max-width:35%;overflow-wrap:anywhere}.guild-services{max-width:55%}.guild-service-tag{white-space:normal}.playstyle-tag{padding:4px 9px}.tags-container{max-width:60%}#capture-target.portrait-mode .text-group{max-width:100%}#capture-target.portrait-mode .guild-contact-box{max-width:none;bottom:32px}#capture-target.portrait-mode .guild-main-info{bottom:100px}#capture-target.portrait-mode .guild-services{max-width:none}.job-fallback{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:rgba(0,0,0,.5);border-radius:4px;color:var(--gold);font-size:10px}.main-job-icon{outline:2px solid var(--gold);outline-offset:1px}#card-extra-info{font-size:13px;color:#e0e6ed;white-space:pre-line;overflow-wrap:anywhere;line-height:1.6;max-height:108px;overflow:hidden}#card-extra-info:empty{display:none}#card-qr{position:absolute;right:22px;top:22px;width:70px;height:70px;z-index:4;background:white;padding:0}#capture-target.has-qr .tags-container{right:108px;max-width:48%}#capture-target.has-qr .guild-services{right:108px;max-width:48%}#capture-target.has-qr.portrait-mode .tags-container{max-width:68%}#capture-target.has-qr.portrait-mode .guild-services{right:105px}.second-image-container{display:none;position:absolute;overflow:hidden;background:#07101e}#second-card-img{position:absolute;transform-origin:center}#second-placeholder{position:absolute;inset:40% 0;text-align:center;font-size:12px;color:#a0b3c6}#duo-names{position:absolute;z-index:4;bottom:104px;left:25px;right:25px;display:flex;gap:30px;justify-content:space-around;color:white;font-size:23px;font-weight:bold;text-shadow:2px 2px 5px black}#duo-names span{width:46%;text-align:center;overflow-wrap:anywhere}.guild-mode #duo-names{display:none!important}
/* Opt-in templates: default 'classic' leaves the original card untouched. */
#capture-target:not(.guild-mode)[data-layout=photo] .tags-container,#capture-target:not(.guild-mode)[data-layout=photo] .job-icons-container,#capture-target:not(.guild-mode)[data-layout=photo] .deco-line{display:none}#capture-target:not(.guild-mode)[data-layout=photo] .text-group{max-width:100%}#capture-target:not(.guild-mode)[data-layout=identity] .image-container{width:43%;height:calc(100% - 70px);left:22px;top:35px}#capture-target:not(.guild-mode)[data-layout=identity] .card-content{left:49%;right:25px;top:70px;bottom:25px;flex-direction:column;align-items:flex-start;justify-content:space-between}#capture-target:not(.guild-mode)[data-layout=identity] .text-group{max-width:100%}#capture-target:not(.guild-mode)[data-layout=identity] .job-icons-container{max-width:100%}#capture-target:not(.guild-mode)[data-layout=identity] .tags-container{top:24px;right:24px;max-width:45%}#capture-target:not(.guild-mode)[data-layout=identity] .deco-line{display:none}#capture-target:not(.guild-mode)[data-layout=social] .card-content,#capture-target:not(.guild-mode)[data-layout=raid] .card-content{padding:16px;background:rgba(4,13,29,.86);border-left:2px solid var(--gold);border-radius:4px;bottom:22px;gap:15px}#capture-target:not(.guild-mode)[data-layout=raid] .card-content{left:50%;top:75px;flex-direction:column;align-items:flex-start;justify-content:space-between}#capture-target:not(.guild-mode)[data-layout=raid] .text-group{max-width:100%}#capture-target:not(.guild-mode)[data-layout=raid] .job-icons-container{max-width:100%}#capture-target:not(.guild-mode)[data-layout=raid] .tags-container{left:25px;right:auto;max-width:42%}#capture-target:not(.guild-mode)[data-layout=duo] .image-container{left:0;top:0;width:49.5%;height:68%}#capture-target:not(.guild-mode)[data-layout=duo] .second-image-container{display:block;left:50.5%;top:0;width:49.5%;height:68%}#capture-target:not(.guild-mode)[data-layout=duo] .card-content{bottom:20px;justify-content:center;text-align:center}#capture-target:not(.guild-mode)[data-layout=duo] .text-group{max-width:100%;width:100%}#capture-target:not(.guild-mode)[data-layout=duo] .char-name,#capture-target:not(.guild-mode)[data-layout=duo] .sub-info,#capture-target:not(.guild-mode)[data-layout=duo] .marriage-display,#capture-target:not(.guild-mode)[data-layout=duo] .job-icons-container,#capture-target:not(.guild-mode)[data-layout=duo] .tags-container,#capture-target:not(.guild-mode)[data-layout=duo] .deco-line{display:none}#capture-target:not(.guild-mode)[data-layout=duo] #duo-names{bottom:auto;top:70%}#capture-target:not(.guild-mode)[data-layout=duo] #card-extra-info{max-height:40px}
#capture-target.portrait-mode:not(.guild-mode)[data-layout=identity] .image-container{width:calc(100% - 44px);height:45%;top:30px}#capture-target.portrait-mode:not(.guild-mode)[data-layout=identity] .card-content{left:30px;top:52%;right:30px;bottom:35px;align-items:center;text-align:center}#capture-target.portrait-mode:not(.guild-mode)[data-layout=identity] .tags-container{top:24px;max-width:65%}#capture-target.portrait-mode:not(.guild-mode)[data-layout=raid] .card-content{top:auto;left:25px;align-items:center;bottom:36px}#capture-target.portrait-mode:not(.guild-mode)[data-layout=raid] .tags-container{max-width:70%}#capture-target.portrait-mode:not(.guild-mode)[data-layout=duo] .image-container,#capture-target.portrait-mode:not(.guild-mode)[data-layout=duo] .second-image-container{height:65%}#capture-target.portrait-mode:not(.guild-mode)[data-layout=duo] #duo-names{top:68%}#capture-target.portrait-mode:not(.guild-mode)[data-layout=duo] .card-content{bottom:45px}#capture-target.portrait-mode:not(.guild-mode)[data-layout=duo] #card-extra-info{max-height:80px}#upgrade-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#0c1830;color:var(--accent-cyan);border:1px solid var(--accent-cyan);border-radius:8px;padding:14px 20px;max-width:90vw;z-index:10001;box-shadow:0 0 20px #000;font-size:13px}#image-result{background:#0c1428;color:white;border:1px solid var(--accent-cyan);padding:20px;border-radius:8px;max-width:95vw;max-height:95vh;margin:auto}#image-result::backdrop{background:#000b}#image-result img{display:block;max-width:100%;max-height:75vh;margin:15px auto}#image-result p{font-size:12px}.upgrade-preview-bar button:focus-visible,button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:1100px){.maker-layout{grid-template-columns:350px minmax(0,1fr);gap:20px}.controls{padding:23px}.grid-options{padding:10px;gap:6px}.checkbox-label{font-size:12px}}
@media(max-width:900px){.maker-layout{display:flex;flex-direction:column-reverse;gap:22px}.controls{max-width:600px;max-height:none}.preview-area{position:static;max-width:700px}.preview-shell{width:100%}.preview-download{display:none}.container{padding:16px}.upgrade-preview-bar{justify-content:center}.upgrade-preview-bar>span:first-child{margin-right:auto}}
@media(max-width:600px){h1{font-size:1.7rem}.container{margin-top:74px;padding:12px}.controls{padding:19px}.nav-link{font-size:15px;padding:5px 18px}.mode-tab{font-size:12px;padding:10px 5px}.upgrade-preview-bar{font-size:10px;gap:6px}.upgrade-preview-bar button{font-size:11px;padding:7px}.gallery-section{margin-top:32px}.upgrade-note{font-size:10px}.upgrade-row{flex-wrap:wrap}.card-mode-tabs{gap:5px}.grid-options{grid-template-columns:repeat(3,minmax(0,1fr))}.checkbox-label{font-size:11px}.cta-btn,.download-btn{font-size:15px}.controls input[type=file]{max-width:100%;font-size:12px}}
@media(prefers-reduced-motion:reduce){.particle,.parallax>use{animation:none!important}*{transition:none!important}}

#capture-target.portrait-mode .watermark{bottom:8px;font-size:9px;line-height:1.2;z-index:5;right:15px;letter-spacing:.5px}

/* v4: shared orientation, ornamental frame art and stable slider layout */
.orientation-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.orientation-options .orientation-btn{font-size:12px;padding:10px 4px}
#frame-art{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;object-fit:fill}
.style-options .new-frame{height:55px;background-color:#0b1527;background-position:center;background-size:100% 100%;border:none;color:#e6eaff;padding:6px 2px;font-size:10px}.new-frame span{position:relative;text-shadow:0 1px 4px #000;background:#07101ebb}.new-frame.active::after{top:15%;font-size:10px}
#draft-status{height:22px;min-height:22px;overflow:hidden;margin:9px 0;white-space:nowrap}input[type=range]{touch-action:pan-y}
 .opt-style-11{background-image:url("frames/frame-11.svg")} #capture-target.style-11{border:0;border-radius:8px}
 .opt-style-12{background-image:url("frames/frame-12.svg")} #capture-target.style-12{border:0;border-radius:8px}
 .opt-style-13{background-image:url("frames/frame-13.svg")} #capture-target.style-13{border:0;border-radius:8px}
 .opt-style-14{background-image:url("frames/frame-14.svg")} #capture-target.style-14{border:0;border-radius:8px}
 .opt-style-15{background-image:url("frames/frame-15.svg")} #capture-target.style-15{border:0;border-radius:8px}
 .opt-style-16{background-image:url("frames/frame-16.svg")} #capture-target.style-16{border:0;border-radius:8px}

#capture-target.ornate-frame:not(.portrait-mode):is([data-layout=classic],[data-layout=photo],[data-layout=social]) .card-content{left:42px;right:42px;bottom:36px}
#capture-target.ornate-frame:not(.portrait-mode) .guild-main-info{left:42px;bottom:36px}
#capture-target.ornate-frame:not(.portrait-mode) .guild-contact-box{right:42px;bottom:36px}
#capture-target.ornate-frame:not(.portrait-mode) .watermark{left:48px;top:36px;font-size:11px}
#capture-target.ornate-frame #card-qr{right:40px;top:40px}
#capture-target.ornate-frame.has-qr .tags-container,#capture-target.ornate-frame.has-qr .guild-services{right:126px}

/* v5 — native drag prevention and a persistent mobile editing preview */
#capture-target,#capture-target *{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
#capture-target img{pointer-events:none;-webkit-user-drag:none}
#capture-target.is-dragging,#capture-target.is-dragging *{cursor:grabbing!important}
#mobile-preview-size{display:none}
@media(max-width:900px){
 body{overflow-x:clip}
 .container{overflow:visible}
 .maker-layout{overflow:visible;isolation:isolate;gap:14px}
 .preview-area{position:sticky;top:var(--mobile-nav-height,60px);z-index:100;width:100%;max-width:700px;background:rgba(5,10,22,.98);border:1px solid rgba(125,249,255,.28);border-radius:8px;padding:9px 9px 5px;box-shadow:0 12px 25px rgba(0,0,0,.55);align-self:center}
 .upgrade-preview-bar{padding:0 0 7px;gap:5px;flex-wrap:nowrap}
 .upgrade-preview-bar button{white-space:nowrap;font-size:10px;padding:6px}
 .upgrade-preview-bar>span:first-child{font-size:10px;margin-right:auto;white-space:nowrap}
 #output-size{display:none}
 #mobile-preview-size{display:block}
 .preview-area>p:not([id]){display:none}
 #draft-status{height:17px;min-height:17px;font-size:9px;line-height:17px;margin:4px 0 0}
 #layout-warning{font-size:9px;line-height:1.4;margin:3px 0 0}
 #layout-warning:empty{display:none}
 .controls{overflow:visible;max-height:none}
 .controls input,.controls select,.controls summary,.controls button{scroll-margin-top:calc(var(--mobile-preview-height,250px) + var(--mobile-nav-height,60px) + 14px)}
}

/* v7: one icon language, calmer badges and three optional finishes. */
#capture-target .tag-row,#capture-target.portrait-mode .tag-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:100%}
#capture-target.portrait-mode .tag-row{justify-content:flex-start}
#capture-target .guild-services{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
#capture-target.portrait-mode .guild-services{justify-content:flex-start}
#capture-target:not(.portrait-mode) .tags-container,#capture-target:not(.portrait-mode) .guild-services{top:65px}
#capture-target .playstyle-tag,#capture-target .guild-service-tag{
 --badge-accent:#b5cddd;--badge-wash:rgba(163,190,212,.13);
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 width:auto;max-width:100%;min-height:29px;padding:5px 11px 5px 8px;
 border:1px solid rgba(211,229,245,.22);border-radius:999px;
 background:linear-gradient(115deg,var(--badge-wash),rgba(9,20,35,.62));
 color:#edf4f8;font-family:'Noto Sans TC',sans-serif;font-size:12px;font-weight:400;
 line-height:1.4;letter-spacing:.65px;white-space:normal;overflow-wrap:anywhere;
 text-shadow:0 1px 3px rgba(0,0,0,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
 backdrop-filter:none;
}
#capture-target .playstyle-tag.high-end{--badge-accent:#e2acb8;--badge-wash:rgba(184,105,130,.23)}
#capture-target .playstyle-tag.casual{--badge-accent:#a8dfdc;--badge-wash:rgba(88,158,165,.23)}
#capture-target .playstyle-tag.gold,#capture-target .guild-service-tag{--badge-accent:#dfc990;--badge-wash:rgba(173,145,83,.24)}
.badge-icon{display:block;width:16px;height:16px;flex:none;object-fit:contain}
.badge-label{min-width:0;overflow-wrap:anywhere}
#capture-target .badge-icon{width:17px;height:17px;padding:2px;box-sizing:content-box;border-radius:50%;background:var(--badge-wash)}
#capture-target[data-badge-style=gilded] .playstyle-tag,#capture-target[data-badge-style=gilded] .guild-service-tag{
 border-radius:3px;border:1px solid rgba(215,189,129,.58);padding:6px 11px;
 color:#f5e7c8;background:linear-gradient(115deg,rgba(67,56,34,.78),rgba(14,23,36,.82));
 box-shadow:inset 0 0 0 2px rgba(10,17,29,.55),inset 0 0 0 3px rgba(215,189,129,.10);
}
#capture-target[data-badge-style=gilded] .badge-icon{border-radius:0;background:transparent;padding:0;width:16px;height:16px}
#capture-target[data-badge-style=minimal] .playstyle-tag,#capture-target[data-badge-style=minimal] .guild-service-tag{
 border:0;border-radius:0;min-height:24px;padding:2px 8px 2px 0;
 background:transparent;box-shadow:none;text-shadow:0 1px 3px #000,0 0 7px #000;
}
#capture-target[data-badge-style=minimal] .badge-icon{background:rgba(8,17,31,.4);padding:3px;width:15px;height:15px;border-radius:50%}
#tag-checkboxes,#guild-service-checkboxes{display:flex;flex-wrap:wrap;gap:9px;padding:0;border:0;background:none}
#tag-checkboxes .checkbox-label,#guild-service-checkboxes .checkbox-label{
 position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;
 margin:0;padding:8px 11px;border:1px solid rgba(149,181,204,.18);border-radius:9px;
 background:rgba(19,34,52,.42);color:#a8bbca;font-size:12px;line-height:1.5;
 font-family:'Noto Sans TC',sans-serif;letter-spacing:.5px;cursor:pointer;
 transition:background .15s,border-color .15s,color .15s;
}
#tag-checkboxes input,#guild-service-checkboxes input,.badge-style-choice input{
 position:absolute;width:1px;height:1px;margin:0;opacity:0;clip-path:inset(50%);overflow:hidden;
}
.choice-content{display:flex;align-items:center;gap:8px;min-width:0}
.choice-content .badge-icon{opacity:.65}
.choice-mark{width:13px;text-align:center;opacity:.5}
.choice-mark::after{content:'+';font-size:16px;line-height:1}
#tag-checkboxes .checkbox-label:has(input:checked),#guild-service-checkboxes .checkbox-label:has(input:checked){
 color:#e6f2f6;border-color:rgba(150,200,214,.5);background:linear-gradient(125deg,rgba(48,84,105,.44),rgba(19,34,52,.6));
}
.checkbox-label:has(input:checked) .choice-mark{opacity:1;color:#b9dfdf}
.checkbox-label:has(input:checked) .choice-mark::after{content:'✓';font-size:12px}
.checkbox-label:has(input:checked) .badge-icon{opacity:1}
#tag-checkboxes .checkbox-label:has(input[data-type=high-end]:checked){border-color:rgba(201,147,166,.48);background:rgba(86,51,70,.38)}
#tag-checkboxes .checkbox-label:has(input[data-type=gold]:checked),#guild-service-checkboxes .checkbox-label:has(input:checked){border-color:rgba(205,183,128,.48);background:rgba(77,65,39,.35)}
#tag-checkboxes .checkbox-label:has(input:focus-visible),#guild-service-checkboxes .checkbox-label:has(input:focus-visible),.badge-style-choice:has(input:focus-visible){outline:2px solid #addde4;outline-offset:3px}
.badge-style-picker{margin:0 0 22px;padding:0;border:0;min-width:0}
.badge-style-picker legend{color:var(--accent-cyan);font-size:13px;margin-bottom:12px;letter-spacing:.5px}
.badge-style-picker legend small{font-size:10px;color:#91a2b5;margin-left:6px}
.badge-style-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.badge-style-choice{position:relative;margin:0;cursor:pointer;min-width:0;letter-spacing:.3px;font-family:'Noto Sans TC',sans-serif}
.badge-style-choice>span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 3px;border:1px solid #283b52;background:#0b1525;border-radius:8px;min-height:106px;transition:border-color .15s,background .15s}
.badge-style-choice b{font-size:12px;font-weight:500;color:#d6e1ec}
.badge-style-choice small{font-size:10px;color:#90a5b7}
.badge-style-choice:has(input:checked)>span{border-color:#a0cfd9;background:linear-gradient(150deg,#1b3547,#0c182a);box-shadow:inset 0 0 0 1px rgba(150,211,222,.12)}
.badge-swatch{font-size:10px;line-height:1.4;font-style:normal;color:#dbe9f1;padding:3px 7px;margin-top:2px;white-space:nowrap}
.badge-swatch.crystal{border:1px solid #596d81;border-radius:999px;background:#233849}
.badge-swatch.gilded{border:1px solid #9c8c64;border-radius:2px;color:#e8d6ad;background:#302b25}
.badge-swatch.minimal{border-bottom:1px solid #597184}
@media(hover:hover){#tag-checkboxes .checkbox-label:hover,#guild-service-checkboxes .checkbox-label:hover{color:#ecf5f9;border-color:#7099ad}.badge-style-choice:hover>span{border-color:#7099ad}}

/* v8: quieter crystal light and a focused editor. */
body{isolation:isolate}
.bg-layer{background:radial-gradient(ellipse at 15% 8%,#102333 0%,transparent 42%),linear-gradient(165deg,#050b15,#0b1629 75%,#091421);z-index:-10}
.aurora-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-8}
.aurora{position:absolute;border-radius:50%;opacity:.6;animation:aurora-drift 26s ease-in-out infinite alternate;pointer-events:none;will-change:transform}
.aurora-cyan{left:-22%;top:-27%;width:105vw;height:80vh;background:radial-gradient(ellipse,transparent 38%,rgba(81,193,191,.16) 48%,rgba(67,146,171,.08) 59%,transparent 70%);transform:rotate(-24deg)}
.aurora-blue{right:-34%;top:0;width:100vw;height:100vh;background:radial-gradient(ellipse,transparent 38%,rgba(81,113,172,.15) 48%,rgba(64,98,162,.04) 62%,transparent 72%);animation-duration:33s;animation-delay:-12s}
.aurora-gold{right:-6%;top:3%;width:52vw;height:54vh;background:radial-gradient(ellipse,rgba(203,181,118,.065),transparent 67%);animation-duration:30s;animation-delay:-8s}
@keyframes aurora-drift{from{transform:translate3d(-2%,-3%,0) rotate(-22deg) scale(.97)}to{transform:translate3d(6%,8%,0) rotate(-8deg) scale(1.05)}}
.particle{width:2px!important;height:2px!important;bottom:0;opacity:.12;animation:crystal-drift 26s ease-in-out infinite;box-shadow:0 0 8px #a0d6e1}
.particle:nth-child(1){left:7%;animation-duration:24s;animation-delay:-9s}
.particle:nth-child(2){left:23%;animation-duration:32s;animation-delay:-18s}
.particle:nth-child(3){left:73%;animation-duration:29s;animation-delay:-2s}
.particle:nth-child(4){left:92%;animation-duration:34s;animation-delay:-20s}
.particle:nth-child(5){left:59%;animation-duration:36s;animation-delay:-13s}
@keyframes crystal-drift{0%{transform:translate3d(0,5vh,0);opacity:0}25%,70%{opacity:.35}100%{transform:translate3d(35px,-100vh,0);opacity:0}}
.waves-container{height:15vh;opacity:.5}
.parallax>use:nth-child(1){fill:rgba(125,224,235,.06);animation-duration:32s}
.parallax>use:nth-child(2){fill:rgba(95,141,195,.10);animation-duration:43s}
.parallax>use:nth-child(n+3){display:none}
body[data-motion=reduced] .aurora,body[data-motion=reduced] .particle,body[data-motion=reduced] .parallax>use{animation:none!important;will-change:auto}
body[data-motion=reduced] .particle{opacity:.12;bottom:40%}
.motion-paused .aurora,.motion-paused .particle,.motion-paused .parallax>use{animation-play-state:paused}
#motion-toggle{position:absolute;right:22px;border:1px solid #355064;border-radius:999px;background:#101d2b;color:#b6d2de;font:11px 'Noto Sans TC',sans-serif;padding:7px 13px;cursor:pointer}
#motion-toggle:disabled{opacity:.65;cursor:default}
.container{margin-top:66px;padding-top:14px}
.container>header{padding:0 0 2px}
h1{font-size:2rem;margin:0 0 3px;text-shadow:0 0 14px rgba(125,249,255,.34)}
.container>header>p{font-size:11px;color:#a2bac9;letter-spacing:2px;text-align:center}
.maker-layout{margin-top:20px;gap:26px;grid-template-columns:minmax(340px,420px) minmax(0,1fr)}
.controls{padding:0;max-height:calc(100dvh - 170px);scrollbar-gutter:stable;background:rgba(10,20,37,.94);border-color:rgba(130,193,204,.24)}
.editor-header{position:sticky;top:0;z-index:15;padding:15px 16px 0;background:#0c182b;border-bottom:1px solid #263c50;border-radius:8px 8px 0 0}
.card-mode-tabs{padding:3px;margin-bottom:13px;gap:4px;border-color:rgba(153,190,205,.17)}
.mode-tab{font-size:12px;padding:7px 8px;letter-spacing:.6px}
.mode-tab.active{background:linear-gradient(115deg,#c8e8e7,#7ab8c7);box-shadow:none}
.editor-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.editor-tabs button{border:0;border-bottom:2px solid transparent;color:#8fa8bb;background:none;padding:5px 1px 11px;font:12px 'Noto Sans TC',sans-serif;white-space:nowrap;cursor:pointer}
.editor-tabs button span{display:block;font-size:9px;letter-spacing:1px;opacity:.75;margin-bottom:3px}
.editor-tabs button[aria-selected=true]{border-color:#d6c08b;color:#f1e7c8;background:linear-gradient(0deg,rgba(223,193,118,.065),transparent)}
.editor-panel{padding:22px 21px 25px;min-height:450px}
.editor-panel h2{font-size:17px;letter-spacing:1px;border-color:rgba(138,193,207,.22);padding-bottom:10px;margin-bottom:18px;color:#d7c28e}
.editor-panel label{font-size:12px;letter-spacing:.5px;color:#b1d7df}
.editor-panel .form-group{margin-bottom:19px}
.editor-panel .upgrade-details{border-color:#2d4256;background:rgba(4,11,22,.25);padding:12px;margin:17px 0}
.editor-panel .upgrade-details summary{font-size:12px}
.editor-panel .upgrade-details[open] summary{margin-bottom:15px}
.editor-panel .upgrade-details .form-group:last-child{margin-bottom:0}
.editor-panel .upgrade-details small{font-size:10px}
#tag-checkboxes .checkbox-label,#guild-service-checkboxes .checkbox-label{letter-spacing:.15px;gap:8px;font-size:12px;padding:8px 10px}
#editor-export .upgrade-export{border:0;padding-top:0}
#editor-export .share-section p{font-size:11px!important}
#editor-export .share-buttons{flex-wrap:wrap}
#editor-export .share-btn{font-size:12px;min-width:80px}
.layout-thumbnails{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.layout-thumb{overflow:hidden;padding:0;border:1px solid #30465b;border-radius:7px;background:#0b1728;color:#e1ebf3;text-align:left;cursor:pointer}
.layout-thumb img{display:block;width:100%;aspect-ratio:700/394;object-fit:cover;background:linear-gradient(140deg,#213e52,#1b273f)}
.layout-thumb>span{display:block;padding:8px 9px;font-size:12px;letter-spacing:.6px}
.layout-thumb small{display:block;font-size:9px;line-height:1.5;color:#a2b9c9;margin-top:3px;letter-spacing:0}
.layout-thumb[aria-pressed=true]{border-color:#d6bf85;box-shadow:0 0 0 1px rgba(214,191,133,.25)}
.layout-thumb:disabled{opacity:.4;cursor:default}
.style-pairings{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 21px;align-items:center}
.style-pairings>span{width:100%;font-size:11px;color:#9aafc0;margin-bottom:1px}
.style-pairings button{font:10px 'Noto Sans TC',sans-serif;color:#e1cfa7;background:#222333;border:1px solid #61583f;border-radius:999px;padding:7px 9px;cursor:pointer}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important}
.photo-dropzone{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;border:1px dashed #54788c;border-radius:9px;padding:22px 12px;background:linear-gradient(135deg,rgba(44,83,100,.27),rgba(18,28,46,.8));color:#dcecf3;font:12px 'Noto Sans TC',sans-serif;text-align:center;cursor:pointer}
.photo-dropzone img{width:27px;height:27px;opacity:.8}
.photo-dropzone strong{font-weight:500;letter-spacing:1px}
.photo-dropzone span{font-size:10px;line-height:1.7;color:#a9c1cf}
.photo-dropzone small{font-size:9px;color:#7e9aaa}
.photo-dropzone.drag-over{border-color:#b7e8e7;background:#1a3d4d}
.form-group:has(#img-upload:focus-visible) .photo-dropzone{outline:2px solid #b7e8e7;outline-offset:3px}
.photo-snap{margin:12px 0!important;color:#b3d0dd!important}
.preview-empty{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:9px;max-width:85%;width:350px;padding:22px 15px;background:rgba(13,30,46,.88);color:#e3f3f5;border:1px dashed #5b8d9f;border-radius:12px;cursor:pointer;font-family:'Noto Sans TC',sans-serif;box-shadow:0 10px 35px #0004}
.preview-empty img{width:34px;height:34px;opacity:.8}
.preview-empty strong{font-size:15px;font-weight:500;letter-spacing:1px}
.preview-empty span{font-size:10px;color:#9ebecf}
.preview-empty b{font-size:11px;font-weight:400;color:#d8c395;margin-top:5px}
#capture-target:focus-visible{outline:2px solid #abd7e0;outline-offset:4px}
#alignment-guides{position:absolute;z-index:12;pointer-events:none}
#alignment-guides i{display:none;position:absolute;background:#bcf3ed;box-shadow:0 0 4px #0d333f}
#alignment-guides .guide-x{width:1px;top:0;bottom:0;left:50%}
#alignment-guides .guide-y{height:1px;left:0;right:0;top:50%}
#alignment-guides.show-x .guide-x,#alignment-guides.show-y .guide-y{display:block}
@media(max-width:1100px) and (min-width:901px){.maker-layout{grid-template-columns:350px minmax(0,1fr);gap:18px}.editor-panel{padding:19px 16px}.editor-tabs button{font-size:11px}}
@media(max-width:900px){
 .container{margin-top:62px;padding-top:13px}.maker-layout{gap:14px;margin-top:16px}
 .controls{max-height:none;overflow:visible;scrollbar-gutter:auto;scroll-margin-top:calc(var(--mobile-preview-height,250px) + var(--mobile-nav-height,60px) + 12px)}
 .editor-header{top:calc(var(--mobile-preview-height,250px) + var(--mobile-nav-height,60px) + 5px);padding:12px 12px 0;z-index:90}
 .editor-panel{padding:20px;min-height:380px}
 .preview-empty{padding:10px;gap:3px;width:260px;top:48%}.preview-empty img{width:22px;height:22px}.preview-empty strong{font-size:12px}.preview-empty span{font-size:9px}.preview-empty b{margin-top:1px;font-size:10px}
 .particle:nth-child(n+4){display:none}.aurora-cyan{width:155vw;left:-45%}.aurora-blue{width:140vw;right:-70%}.waves-container{height:12vh;opacity:.35}
 .aurora{will-change:auto}
}
@media(max-width:600px){
 .main-navigation{justify-content:flex-start;padding:12px 8px}.nav-link{font-size:12px;padding:5px 12px}#motion-toggle{right:12px;font-size:10px;padding:6px 10px}
 h1{font-size:1.45rem}.container>header>p{font-size:9px;letter-spacing:1.3px}
 .editor-tabs button{font-size:11px}.editor-panel{padding:18px 15px}
 .preview-empty span{display:none}.preview-empty{max-width:80%;width:240px}
}
@media(prefers-reduced-motion:reduce){.aurora,.particle,.parallax>use{animation:none!important;will-change:auto}}
#capture-target[data-empty=true]{background:radial-gradient(ellipse at 12% 12%,#254456,transparent 68%),linear-gradient(135deg,#0d1d30,#192239)}
@media(min-width:901px){.editor-panel input,.editor-panel select,.editor-panel summary,.editor-panel button{scroll-margin-top:calc(var(--editor-header-height,118px) + 12px)}}
@media(max-width:900px){.editor-panel input,.editor-panel select,.editor-panel summary,.editor-panel button{scroll-margin-top:calc(var(--mobile-preview-height,250px) + var(--mobile-nav-height,60px) + var(--editor-header-height,118px) + 14px)}}

/* v9 — restore compact frame controls and reserve scaled ornamental margins. */
.style-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.style-options .style-option{min-width:0}
.style-options .new-frame{font-size:9px}
.style-options .new-frame span{font-size:9px;letter-spacing:0}
#capture-target.ornate-frame .tags-container,#capture-target.ornate-frame .guild-services{top:var(--frame-safe-top);right:var(--frame-safe-x)}
#capture-target.ornate-frame.portrait-mode .tags-container,#capture-target.ornate-frame.portrait-mode .guild-services{left:var(--frame-safe-x);right:var(--frame-safe-x);max-width:none}
#capture-target.ornate-frame:not(.guild-mode)[data-layout=raid] .tags-container{left:var(--frame-safe-x);right:auto;max-width:38%}
#capture-target.ornate-frame.portrait-mode:not(.guild-mode)[data-layout=raid] .tags-container{left:var(--frame-safe-x);right:var(--frame-safe-x);max-width:none}
#capture-target.ornate-frame:not(.guild-mode)[data-layout=identity] .tags-container{left:auto;right:var(--frame-safe-x);top:var(--frame-safe-top);max-width:40%}
#capture-target.ornate-frame.portrait-mode:not(.guild-mode)[data-layout=identity] .tags-container{left:var(--frame-safe-x);right:var(--frame-safe-x);max-width:none}
#capture-target.ornate-frame #card-qr{right:var(--frame-safe-x);top:var(--frame-safe-top)}
#capture-target.ornate-frame.has-qr .tags-container,#capture-target.ornate-frame.has-qr .guild-services{right:var(--frame-qr-inset)}
#capture-target.ornate-frame.has-qr:not(.guild-mode)[data-layout=raid] .tags-container{right:auto}
#capture-target.ornate-frame.has-qr.portrait-mode:not(.guild-mode)[data-layout=raid] .tags-container{right:var(--frame-qr-inset)}
/* Keep the identity column below the badge rows, including a visible QR code. */
#capture-target.ornate-frame:not(.portrait-mode):not(.guild-mode)[data-layout=identity] .tags-container{width:40%}
#capture-target.ornate-frame:not(.portrait-mode):not(.guild-mode)[data-layout=identity] #tags-display{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
#capture-target.ornate-frame:not(.portrait-mode):not(.guild-mode)[data-layout=identity] .playstyle-tag{font-size:11px;letter-spacing:0;min-height:27px;padding:4px 5px;gap:4px}
#capture-target.ornate-frame:not(.portrait-mode):not(.guild-mode)[data-layout=identity] .badge-icon{width:14px;height:14px;padding:1px}
#capture-target.ornate-frame:not(.portrait-mode):not(.guild-mode)[data-layout=identity] .card-content{top:var(--identity-content-top,110px)}
#capture-target.ornate-frame.has-qr:not(.guild-mode)[data-layout=identity] .tags-container,
#capture-target.ornate-frame.has-qr.portrait-mode:not(.guild-mode)[data-layout=identity] .tags-container{right:var(--frame-qr-inset)}
.font-sample-wrap{margin-top:12px;padding:13px;border:1px solid #304758;border-radius:7px;background:#0b1628}
#font-sample{display:block;font-size:25px;line-height:1.6;color:#eef4fa;overflow-wrap:anywhere}
#font-status{display:block;color:#a5c4d4;font:10px 'Noto Sans TC',sans-serif;min-height:0}
#font-status:empty{display:none}
/* More visible movement and light while keeping the editor panels readable. */
.aurora{opacity:.95;animation-duration:18s}
.aurora-cyan{left:-28%;top:-20%;width:120vw;height:100vh;background:radial-gradient(ellipse,transparent 34%,rgba(71,231,219,.30) 44%,rgba(53,173,213,.19) 52%,transparent 65%)}
.aurora-blue{right:-32%;top:-7%;width:125vw;height:120vh;background:radial-gradient(ellipse,transparent 33%,rgba(94,118,230,.29) 46%,rgba(72,118,214,.10) 58%,transparent 70%);animation-duration:23s;animation-delay:-11s}
.aurora-gold{right:-12%;top:2%;width:64vw;height:70vh;background:radial-gradient(ellipse,rgba(225,187,101,.15),transparent 66%);animation-duration:21s}
@keyframes aurora-drift{from{transform:translate3d(-7%,-9%,0) rotate(-29deg) scale(.96)}to{transform:translate3d(10%,13%,0) rotate(-7deg) scale(1.12)}}
.particle{width:3px!important;height:3px!important;box-shadow:0 0 9px #91f1ed}
@keyframes crystal-drift{0%{transform:translate3d(0,5vh,0);opacity:0}22%,68%{opacity:.7}100%{transform:translate3d(65px,-100vh,0);opacity:0}}
.waves-container{height:23vh;opacity:.85}
.parallax>use:nth-child(1){fill:rgba(125,224,235,.14);animation-duration:22s}
.parallax>use:nth-child(2){fill:rgba(86,133,221,.20);animation-duration:31s}
@media(max-width:900px){.aurora-cyan{width:170vw;left:-65%;height:90vh}.aurora-blue{width:160vw;right:-70%}.aurora-gold{width:90vw;right:-20%}.waves-container{height:18vh;opacity:.7}}

/* Match the card badge icons without relying on an emoji font. */
.server-display::before{content:"";display:block;flex:none;width:14px;height:14px;margin-right:6px;background:url("badges/map.svg") center/contain no-repeat;opacity:.85}