#commission-panel{--cm-ink:#eaf3fb;--cm-muted:#b9cddd;--cm-line:#789ec04a;color:var(--cm-ink);max-width:850px;margin:auto;font-size:15px;line-height:1.5}#commission-panel *{box-sizing:border-box}#commission-panel button{font:inherit;min-height:46px;cursor:pointer;white-space:normal;overflow-wrap:anywhere}#commission-panel button:focus-visible{outline:3px solid #aee8fa;outline-offset:3px}#commission-panel button:disabled{opacity:.55;cursor:wait}#commission-panel h2,#commission-panel h3{color:#fff4d9;line-height:1.15}#commission-panel h3{font-size:24px;margin:10px 0}#commission-panel p{color:var(--cm-muted);font-size:15px;line-height:1.6}.commission-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.commission-top>span,.commission-overline{font-size:11px;font-weight:800;letter-spacing:1.25px;color:#b9e4f4}.commission-back{background:none;border:0;color:#d9ebf6;padding:8px 0}.commission-hero{position:relative;min-height:285px;border:1px solid #b1d5e861;border-radius:24px;overflow:hidden;background:linear-gradient(0deg,#101e39 0%,#10243b66 60%,#132a4530),var(--commission-scene) center 45%/cover;box-shadow:inset 0 1px #fff5,0 12px 25px #0004}.commission-hero-copy{position:relative;z-index:1;padding:24px;max-width:440px;text-shadow:0 2px 12px #071725}.commission-hero h2{font-size:clamp(29px,5vw,43px);margin:12px 0 7px}.commission-hero-copy p{margin:0!important;color:#eef6f9!important}.commission-cast{display:flex;justify-content:flex-end;gap:7px;padding:0 22px 15px}.commission-cast>div{text-align:center;min-width:70px;display:grid;justify-items:center;gap:5px}.commission-cast b{font-size:13px;color:#fff0ce;text-shadow:0 2px 3px #000}.commission-portrait{display:block;width:66px;height:66px;border-radius:50%;border:2px solid #b6cfd9;background-color:#17334d;background-image:url('assets/contacts-portraits.png');background-size:300% auto;background-repeat:no-repeat;box-shadow:0 4px 12px #0008,inset 0 0 0 2px #20364e}.commission-portrait.p0{background-position:0 5%}.commission-portrait.p1{background-position:50% 5%}.commission-portrait.p2{background-position:100% 5%}.commission-plan-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.commission-plan-tabs button{border:1px solid #90b7dc69;border-bottom:4px solid #0c1a30;background:linear-gradient(#304d73,#1d3156);border-radius:14px;color:#dfedfa;font-weight:800;padding:13px;box-shadow:inset 0 1px #ffffff29;transition:transform .13s,filter .13s}.commission-plan-tabs button[aria-pressed=true]{background:linear-gradient(#3d7492,#25475f);border-color:#c1e7ea;color:#fff5d3}.commission-plan-tabs button:active,.commission-primary:active{transform:translateY(2px);filter:brightness(.92)}.commission-preview,.commission-active,.commission-result{padding:24px;margin-top:18px;border:1px solid var(--cm-line);background:linear-gradient(145deg,#263656,#121f38);border-radius:21px;box-shadow:inset 0 1px #ffffff1a,0 7px 18px #0002}.commission-roadmap{padding:0;list-style:none;display:grid;gap:0;margin:22px 0}.commission-roadmap li{display:flex;gap:14px;position:relative;padding:0 0 22px;min-width:0}.commission-roadmap li:last-child{padding-bottom:0}.commission-roadmap li:not(:last-child):before{content:'';position:absolute;width:2px;left:17px;top:35px;bottom:0;background:#7c9ab74d}.commission-roadmap li>span{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:11px;border:1px solid #94b8c55c;background:#142641;color:#d7e4ef;font-weight:800;box-shadow:inset 0 1px #fff2}.commission-roadmap li.done>span{background:#255d58;color:#c3f4d4}.commission-roadmap li.current>span{background:#a57837;color:#fff7dc;box-shadow:0 0 0 4px #e7c16b18}.commission-roadmap b{font-size:16px;color:#ecf1f6}.commission-roadmap p{margin:4px 0 0;font-size:14px!important}.commission-pay-note,.commission-lock{padding:14px 16px;border-radius:13px;background:#0d192d80;border:1px solid #83a3c034;color:#bfd2df;font-size:14px}.commission-lock{margin-top:16px}.commission-lock ul{padding-left:20px}.commission-primary{display:block;width:100%;margin-top:18px;padding:15px;border-radius:14px;border:1px solid #f2dea0;border-bottom:5px solid #836131;background:linear-gradient(#e5c177,#c4974f);color:#232b35;font-weight:900!important;box-shadow:inset 0 2px #fff8,0 5px 14px #0003;transition:transform .13s}.commission-secondary{margin-top:16px;width:100%;padding:12px;background:#182a44;border:1px solid #718eae61;border-radius:13px;color:#cadbe9}.commission-progress{display:flex;justify-content:space-between;align-items:center;color:#bdddea;font-size:12px;letter-spacing:1px}.commission-progress b{font-size:22px;color:#ecd39a}.commission-next{padding-top:18px;border-top:1px solid #7c9ab74d}.commission-question{border:0;padding:0;margin:18px 0 0;min-width:0}.commission-question legend{color:#f3eddb;font-size:17px;font-weight:700;margin-bottom:14px}.commission-question button{display:block;width:100%;text-align:left;border-radius:12px;margin:9px 0;padding:13px;background:linear-gradient(#345374,#243853);border:1px solid #84abc158;color:#eaf5ff}.commission-confirm{padding:22px;margin:20px 0;border:2px solid #d7af6a;border-radius:18px;background:#23314c}.commission-error{padding:14px;background:#542d35;border:1px solid #bf7c81;border-radius:12px;color:#ffe6e4!important}.commission-footer{font-size:12px;color:#abc0d3;line-height:1.7;padding:18px 2px}.commission-keepsake{display:flex;gap:13px;align-items:center;padding:17px;border:1px solid #c6aa7259;border-radius:16px;background:linear-gradient(125deg,#35415b,#1a2a45);color:#fff0c7}.commission-keepsake>span{font-size:34px;color:#e3c17a}.commission-keepsake small{display:block;font-size:10px;letter-spacing:1px;color:#bad5e2}.commission-keepsake b{display:block;margin:4px 0}.commission-keepsake p{font-size:12px!important;margin:0}.commission-entry{display:flex;align-items:center;gap:14px;width:100%;padding:17px;margin:15px 0;border-radius:16px;border:1px solid #96bfda60;border-bottom:4px solid #0b182d;background:linear-gradient(130deg,#314d70,#1b2c49);color:#e9f3fc;text-align:left;min-height:64px}.commission-entry>span:first-child{font-size:28px;color:#e7c780}.commission-entry>span:nth-child(2){flex:1}.commission-entry b,.commission-entry small{display:block}.commission-entry small{color:#b7d1e3;font-size:12px;margin-top:4px}@media(max-width:480px){.commission-top{font-size:12px}.commission-top>span{font-size:9px}.commission-hero{min-height:265px;border-radius:18px}.commission-hero-copy{padding:20px 17px 10px}.commission-cast{justify-content:center;padding:12px 10px 16px}.commission-preview,.commission-active,.commission-result{padding:18px 14px}.commission-plan-tabs{gap:8px}.commission-plan-tabs button{padding:12px 8px;font-size:14px!important}.commission-roadmap li{gap:10px}.commission-roadmap p{font-size:13px!important}.commission-confirm{padding:16px}.commission-confirm .commission-plan-tabs{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){#commission-panel *, .commission-entry{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Do not inherit the game's absolute, horizontal HUD header / site footer layout. */
#commission-panel .commission-hero{display:block;position:relative;inset:auto;height:auto;width:100%;padding:0;z-index:auto;align-items:normal;justify-content:normal;flex:none}
#commission-panel .commission-hero-copy{width:100%;min-width:0;max-width:440px;flex:none}
#commission-panel .commission-footer{display:block;position:static;width:auto;height:auto;margin:0;border:0;background:none;text-align:left}
#commission-panel .commission-top{padding-right:38px;min-height:44px}
@media(max-width:480px){#commission-panel .commission-top{align-items:flex-start;padding-right:34px;gap:8px}#commission-panel .commission-top>span{max-width:105px;text-align:right;padding-top:12px;overflow-wrap:normal}}
@media(max-width:360px){#commission-panel .commission-top{display:grid;grid-template-columns:1fr;gap:0;padding-right:36px}#commission-panel .commission-back{justify-self:start;white-space:nowrap;min-height:44px}#commission-panel .commission-top>span{font-size:9px;letter-spacing:.7px}#commission-panel .commission-cast{justify-content:center;gap:5px;padding:0 8px 15px}#commission-panel .commission-cast>div{min-width:0;flex:1}#commission-panel .commission-portrait{width:54px;height:54px}#commission-panel .commission-cast b{font-size:12px}}