.transmog-app{position:relative;z-index:3;--tm-accent:#72e6c4;--tm-gold:#dcc489;max-width:1840px;width:calc(100% - 48px);margin:20px auto 40px;color:#e7eade}
.transmog-view-switch,.transmog-viewer-controls{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;padding:12px 16px;background:#07100c70}.transmog-view-switch [aria-pressed=true]{background:#294d38;border-color:#83dbb6;color:#e5fce7}.transmog-model #transmog-canvas{width:100%;height:470px;touch-action:none;position:relative;z-index:1}.transmog-model #transmog-canvas canvas{display:block;max-width:100%;touch-action:none}.transmog-model-status{margin:0;padding:9px 16px;text-align:center;font-size:11px;line-height:1.5;color:#afe0c6;background:#08140b70}.transmog-viewer-controls label{font-size:11px;color:#bbc8b2;display:flex;gap:6px;align-items:center}.transmog-model:has(#transmog-canvas:not([hidden])) .transmog-render-caption{display:none}.transmog-customization{margin:12px 20px;padding:12px;border:1px solid #779b6e50;border-radius:9px;background:#0c1912}.transmog-customization summary{cursor:pointer;color:#dbc38e;font:600 18px 'Cormorant Garamond',serif}.transmog-customization p{font-size:11px;color:#aebca7;line-height:1.6}#transmog-customization-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}#transmog-customization-options label{display:grid;gap:5px;font-size:10px;color:#c6d6c0}#transmog-customization-options select{max-width:100%;min-width:0;padding:7px;background:#07100a;border:1px solid #6a825f;color:#d5ddc9;border-radius:6px}.transmog-model-warnings{color:#e8c994!important} .transmog-model-building{opacity:.5;pointer-events:none}
#transmog-recent{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}#transmog-recent .recent-character{display:flex;gap:8px;align-items:center;background:#10241b;border:1px solid #576b4f;border-radius:10px;padding:6px 10px;color:#dacdaa;text-align:left;font-size:11px}#transmog-recent .recent-character small{display:block;color:#a2b499;margin-top:3px;font-size:9px}
.transmog-heading{display:flex;justify-content:space-between;align-items:center;margin:0 4px 24px;gap:20px}.transmog-heading img{width:clamp(230px,25vw,380px);height:auto;display:block;max-height:105px;object-fit:contain;object-position:left}.transmog-heading h1{font:500 18px 'Cormorant Garamond',serif;color:#d0c4a8;margin:8px 0 0}.transmog-badge,.transmog-pill{padding:7px 12px;border:1px solid #618f7977;border-radius:30px;background:#11291ed9;color:#9dddc3;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.transmog-app .character-import{margin-bottom:20px;padding:18px 22px;background:#0b1513e8;border-color:#385145}.transmog-app .character-import h2{font-size:22px}.transmog-app .character-import-form{grid-template-columns:90px minmax(160px,1fr) minmax(160px,1fr) auto}.transmog-app .import-status{margin:0;font-size:12px}.transmog-app .recent-characters:empty{display:none}
.transmog-layout{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:18px;align-items:start}.transmog-panel{border:1px solid #53604b80;border-radius:14px;background:linear-gradient(150deg,#101a16ed,#070c0bf5);box-shadow:0 16px 40px #0005;overflow:hidden}.transmog-panel-header{padding:18px 22px;border-bottom:1px solid #72857330;display:flex;align-items:center;justify-content:space-between;gap:12px}.transmog-panel-header h2{font:600 24px 'Cormorant Garamond',serif;margin:0;color:#f0dfb2}.transmog-panel-header p{font-size:11px;color:#aebbad;margin:4px 0 0}.transmog-panel-header .eyebrow{color:#95c6b1;letter-spacing:.16em;font-size:9px}.transmog-toolbar{display:flex;gap:8px;flex-wrap:wrap}.transmog-app button,.transmog-app .transmog-link{cursor:pointer;font-family:Inter,sans-serif}.transmog-tool,.transmog-app .transmog-link{padding:9px 13px;border:1px solid #526750;border-radius:6px;background:#15201a;color:#e5dbba;font-size:11px;text-decoration:none}.transmog-tool:hover,.transmog-tool:focus-visible{border-color:#86d5b2;background:#23362b}.transmog-tool[aria-pressed=true]{color:#a8ffe0;border-color:#80cbaa;background:#214135}.transmog-tool:disabled{opacity:.45;cursor:default}
.transmog-stage{position:relative;display:grid;grid-template-columns:65px minmax(0,1fr) 65px;gap:10px;min-height:510px;padding:20px 22px 12px;background:radial-gradient(ellipse at 50% 50%,#1b32274a,transparent 68%),linear-gradient(180deg,transparent,#0004);isolation:isolate}.transmog-stage:before{content:'';position:absolute;inset:8% 20% 12%;border:1px solid #8ca78013;border-radius:50%;box-shadow:0 0 85px #56b19810;z-index:-1}.transmog-stage:after{content:'';position:absolute;bottom:7%;left:25%;right:25%;height:28px;border:1px solid #7da7863d;border-radius:50%;box-shadow:0 0 30px #62d7a42c,inset 0 0 30px #62d7a417;z-index:-1}.transmog-model{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.transmog-model img{width:100%;height:440px;object-fit:contain;transform:scale(1.8) translateY(-10%);filter:drop-shadow(0 12px 25px #0008);transition:opacity .2s}.transmog-model iframe{width:100%;height:500px;border:0;position:absolute;inset:0}.transmog-model .empty-preview{text-align:center;max-width:300px;color:#c6b98f;line-height:1.8}.transmog-render-caption{position:absolute;bottom:0;color:#9ba899;font-size:10px;letter-spacing:.06em;text-align:center;max-width:100%}.transmog-slot-list{display:flex;flex-direction:column;justify-content:center;gap:13px;z-index:1}.transmog-slot{padding:0;border:1px solid #a8936166;background:linear-gradient(130deg,#222d21,#090e0b);width:56px;height:56px;border-radius:8px;position:relative;display:grid;place-items:center;color:#cbbb90;box-shadow:0 3px 9px #0006}.transmog-slot img{width:48px;height:48px;object-fit:cover;border-radius:5px}.transmog-slot span{font:600 10px Inter,sans-serif;text-align:center}.transmog-slot.selected{border-color:#9ce3bc;box-shadow:0 0 0 2px #77d0ab3d,0 0 22px #68ddb238}.transmog-slot.modified:after{content:'';position:absolute;right:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:#8afbc8;border:2px solid #14281e}.transmog-stage-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-top:1px solid #72857330;flex-wrap:wrap}.transmog-stage-actions p{font-size:11px;color:#a6b5a8;margin:0;max-width:420px;line-height:1.6}
.transmog-library-controls{padding:16px 18px 12px;display:grid;gap:10px}.transmog-library-controls input,.transmog-library-controls select,.transmog-save-dialog input{width:100%;box-sizing:border-box;border:1px solid #5a69505c;border-radius:6px;background:#070e0c;color:#d5ddcf;padding:11px 12px;font:12px Inter,sans-serif}.transmog-filters{display:flex;gap:7px}.transmog-count{font-size:10px;color:#aab39f}.transmog-items{height:350px;overflow:auto;padding:0 15px 15px;display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:start;scrollbar-color:#596747 #0c1510;scrollbar-width:thin}.transmog-item{padding:11px 8px;min-height:108px;display:flex;flex-direction:column;gap:8px;align-items:center;border:1px solid #605d494f;background:linear-gradient(145deg,#202922b8,#101612);border-radius:9px;color:#d4d7c7;text-align:center;position:relative}.transmog-item img{width:42px;height:42px;border:1px solid #86795690;border-radius:6px;object-fit:cover}.transmog-item strong{font-size:10px;font-weight:600;line-height:1.4}.transmog-item small{color:#b3b5a0;font-size:9px}.transmog-item:hover,.transmog-item:focus-visible{border-color:#b59bed;box-shadow:0 0 0 2px #9b70db60,0 0 22px #9555ec45;background:#2e2639}.transmog-item.selected{border-color:#8fdcba;background:#213c30}.transmog-library-note{padding:12px 18px;border-top:1px solid #72857330;color:#98a796;font-size:10px;line-height:1.7;margin:0}.transmog-inspector{padding:15px 18px;border-top:1px solid #72857330;background:#0b1712}.transmog-inspector p{font-size:11px;line-height:1.5;color:#b3bfae}.transmog-inspector strong{color:#e4d6b1;font:600 19px 'Cormorant Garamond',serif}.transmog-inspector a{color:#91daba;font-size:11px}.transmog-saved{margin-top:18px;padding:20px 22px}.transmog-saved-header{display:flex;justify-content:space-between;align-items:center;gap:15px}.transmog-saved h2{font:600 24px 'Cormorant Garamond',serif;color:#e3d0a0;margin:0}.transmog-saved p{color:#aab5a2;font-size:11px}.transmog-saved-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.transmog-saved-card{background:#17231b;border:1px solid #65795870;border-radius:8px;color:#dcd4b7;min-width:180px;padding:13px;font-size:12px;text-align:left}.transmog-saved-card:hover{border-color:#9de4c0}.transmog-saved-card small{display:block;color:#a4b59e;margin-top:6px;font-size:10px}.transmog-notice{margin:16px 6px 0;font-size:11px;line-height:1.8;color:#b4bcaa}.transmog-save-dialog{width:min(360px,calc(100vw - 50px));padding:24px;background:#0c1812;color:#ddd3b4;border:1px solid #8b9d75;border-radius:12px}.transmog-save-dialog::backdrop{background:#0009}.transmog-save-dialog h2{font:600 28px 'Cormorant Garamond',serif}.transmog-save-dialog form{display:grid;gap:15px}.transmog-save-dialog .transmog-toolbar{justify-content:end}.transmog-character-details{color:#a6b5a5;font-size:11px}.transmog-character-details strong{font:700 26px 'Cormorant Garamond',serif;display:block}.transmog-app [hidden]{display:none!important}.transmog-empty{grid-column:1/-1;padding:25px;text-align:center;color:#aab5a2;font-size:12px;line-height:1.7}.transmog-3d-status{position:absolute;inset:20px;display:grid;place-content:center;text-align:center;background:#101a17e8;color:#d5c6a4;border-radius:12px;line-height:1.7;font-size:13px}
@media(min-width:2200px){.transmog-app{max-width:2200px}.transmog-layout{grid-template-columns:minmax(0,1fr) 510px}.transmog-stage{min-height:510px}.transmog-model img,.transmog-model iframe{height:440px}.transmog-items{height:350px;grid-template-columns:repeat(3,1fr)}.transmog-item strong{font-size:11px}}
@media(max-width:1000px){.transmog-app{width:calc(100% - 28px)}.transmog-layout{grid-template-columns:minmax(0,1fr) 320px}.transmog-stage{padding:14px 12px;grid-template-columns:52px minmax(0,1fr) 52px;gap:3px;min-height:510px}.transmog-slot{width:48px;height:48px}.transmog-slot img{width:42px;height:42px}.transmog-model img,.transmog-model iframe{height:460px}.transmog-app .character-import-form{grid-template-columns:70px 1fr 1fr auto}}
@media(max-width:740px){.transmog-heading{margin-bottom:18px}.transmog-heading img{width:230px}.transmog-badge{font-size:8px;padding:7px}.transmog-layout{grid-template-columns:minmax(0,1fr)}.transmog-app .character-import{padding:15px}.transmog-app .character-import-form{grid-template-columns:80px 1fr}.transmog-app .character-import-form button{align-self:end}.transmog-panel-header{padding:16px}.transmog-stage{min-height:490px}.transmog-model img,.transmog-model iframe{height:440px}.transmog-items{height:340px;grid-template-columns:repeat(3,minmax(0,1fr))}.transmog-item strong{font-size:10px}.transmog-stage-actions{padding:14px 16px}.transmog-panel-header .transmog-toolbar{gap:5px}.transmog-tool{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.transmog-model img{transition:none}}
@media(max-width:740px){.transmog-app .character-import-form label:nth-of-type(3),.transmog-app .character-import-form .import-button{grid-column:1/-1}.transmog-model img{object-fit:cover;transform:scale(1.6) translateY(-10%)}}

/* Wardrobe stage and bounded catalog browser. */
.transmog-model #transmog-canvas{height:clamp(560px,66vh,780px)}.transmog-stage{min-height:600px}.transmog-slot-list{gap:12px}.transmog-layout{grid-template-columns:minmax(0,1fr) minmax(340px,440px)}.transmog-items{height:420px}.transmog-viewer-controls select{color:#d4e3d3;background:#102017;border:1px solid #49654e;border-radius:5px;padding:7px}.transmog-stage[data-background=void]{background:radial-gradient(ellipse at 50% 65%,#4b296450,transparent 65%),#030508}.transmog-stage[data-background=dusk]{background:radial-gradient(ellipse at 50% 55%,#986a3940,transparent 70%),linear-gradient(#172634,#110e0a)}.transmog-slot.is-hidden img{filter:grayscale(1);opacity:.35}.transmog-pagination{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:10px 18px;border-top:1px solid #72857330;font-size:10px;color:#b9cbb4}.transmog-hover{position:fixed;z-index:10000;max-width:320px;width:calc(100vw - 40px);box-sizing:border-box;background:linear-gradient(135deg,#17291ff7,#090d10fa);border:1px solid #bfab77;border-radius:10px;box-shadow:0 12px 40px #000c,0 0 28px #b292db35;padding:18px;color:#c6d5c0;pointer-events:none;font:12px/1.6 Inter,sans-serif}.transmog-hover strong{display:block;font:700 23px 'Cormorant Garamond',serif;color:#efd69b}.transmog-hover small{display:block;margin-top:7px;color:#aeb9a4}.transmog-hover[hidden]{display:none}.transmog-favorite{position:absolute;top:3px;right:5px;font-size:17px;cursor:pointer;color:#b3a888;border:0;background:transparent;padding:3px}.transmog-favorite[aria-pressed=true]{color:#f6d16d}.transmog-item-wrap{position:relative;min-width:0}.transmog-item-wrap>.transmog-item{width:100%;height:100%;box-sizing:border-box;padding-top:17px}.transmog-item-wrap .transmog-favorite:hover{color:#fff1bc}.transmog-coverage-warning{color:#e8c994}.transmog-expanded-dialog{margin:auto;width:calc(100vw - 32px);max-width:1800px;max-height:calc(100vh - 28px);padding:0;border:1px solid #c0a87a;border-radius:15px;background:#07110d;overflow:auto}.transmog-expanded-dialog::backdrop{background:#020608e8}.transmog-expanded-dialog .transmog-panel{border:0}.transmog-expanded-dialog .transmog-model #transmog-canvas{height:calc(100vh - 300px);min-height:460px}.transmog-expanded-dialog .transmog-stage{min-height:0}.transmog-expanded-dialog .transmog-stage-actions{position:sticky;bottom:0;background:#0d1b14}.transmog-save-dialog button{cursor:pointer}.transmog-item:focus-visible,.transmog-favorite:focus-visible{outline:2px solid #d7b9ff;outline-offset:3px}
@media(min-width:2200px){.transmog-layout{grid-template-columns:minmax(0,1fr) 550px}.transmog-items{height:480px}}
@media(max-width:1000px){.transmog-layout{grid-template-columns:minmax(0,1fr) 320px}.transmog-model #transmog-canvas{height:560px}}
@media(max-width:740px){.transmog-layout{grid-template-columns:minmax(0,1fr)}.transmog-stage{grid-template-columns:48px minmax(0,1fr) 48px;gap:2px;min-height:560px}.transmog-model #transmog-canvas{height:540px}.transmog-slot{width:43px;height:43px}.transmog-slot img{width:38px;height:38px}.transmog-slot-list{gap:14px}.transmog-heading{flex-wrap:wrap}.transmog-expanded-dialog{width:calc(100vw - 14px)}.transmog-expanded-dialog .transmog-model #transmog-canvas{min-height:540px}.transmog-items{grid-template-columns:repeat(3,minmax(0,1fr))}}

.transmog-model #transmog-canvas canvas{width:100%;height:100%}.transmog-stage:after{display:none}

.transmog-internal{display:flex;align-items:center;gap:8px;color:#a3b49c;font-size:10px}.transmog-internal input{width:auto;padding:0}

/* Match the site's authored construction artwork without obscuring the preview. */
.transmog-construction{grid-column:1/-1;display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding:18px 24px;margin-bottom:22px;border:1px solid #b0954866;border-radius:14px;background:linear-gradient(120deg,#171b0eeb,#111522ed);box-shadow:inset 0 0 32px #d0a5420c;}
.transmog-construction img{width:clamp(190px,27vw,360px);height:auto;max-width:100%;object-fit:contain;}
.transmog-construction strong{font:600 clamp(20px,2vw,28px) 'Cormorant Garamond',serif;color:#e9d8a4;}
.transmog-construction p{max-width:70ch;margin:8px 0 0;color:#bec8c2;line-height:1.6;}
.transmog-app button:disabled,.transmog-app input:disabled,.transmog-app select:disabled{cursor:default;opacity:.6;}
@media(max-width:700px){.transmog-construction{flex-direction:column;text-align:center;padding:18px;}.transmog-construction img{width:min(300px,100%);}}