/* Decorative layer. All forms, navigation and account rules retain their DOM contract. */
:root{--bg:#06151c;--panel:#0b2027;--line:#29434a;--muted:#a4bac1;--text:#f2eddd;--accent:#e7bf70;--nav:#071c25}
.shell{background:radial-gradient(ellipse at 75% 0,#143b452e,transparent 65%),#06151c;grid-template-columns:218px minmax(0,1fr)}
.shell aside{padding:26px 16px 18px;background:linear-gradient(#03182080,#04171bf0 44%,#03141c60),url('./forest-night.png') 5% bottom/auto 100% no-repeat;border-right:1px solid #9b7d42;box-shadow:4px 0 25px #0006;z-index:2;isolation:isolate}
.shell aside:before{content:'';position:absolute;inset:6px;z-index:-1;pointer-events:none;border:12px solid transparent;border-image:url('./ornate-frame.svg') 28 / 18px / 0 stretch;opacity:.8}
.shell .brand{justify-content:center;flex-direction:column;text-align:center;font-size:12px;gap:10px;letter-spacing:1.8px}
.shell .brand-icon{width:68px;height:68px;border-radius:5px;border-color:#c6a25c;box-shadow:0 0 0 3px #152726,0 0 0 4px #695a36,0 8px 25px #0008}
.shell .brand small{color:#d0ad65}
.shell .brand:after{content:'';display:block;width:140px;height:90px;margin:0 0 -14px;background:url('./char_1h_n.png') center bottom/140px auto no-repeat;image-rendering:pixelated;filter:drop-shadow(0 5px 8px #0008)}
.shell .nav-label{margin:25px 16px 12px;color:#b3c4c2;font-size:8px}
.shell nav{gap:8px;scrollbar-width:thin;scrollbar-color:#8c7545 #071b22}
.shell nav button{border:1px solid transparent;border-radius:3px;padding:10px 13px;color:#c6d2d3;min-height:43px;transition:color .2s,background .2s,box-shadow .2s}
.shell nav button.active{color:#ffe3a0;border-color:#bda05b;background:linear-gradient(110deg,#a381354f,#322d1c80);box-shadow:inset 0 0 14px #dba84322,0 0 12px #e2b8591f}
.shell nav button.active:before{content:'';position:absolute;left:14px;width:3px;height:20px;background:#f0cc7d;box-shadow:0 0 9px #f0cc7d}
.shell nav button:hover{background-color:#e6bd6d14;color:#f4d590}
.shell nav svg{width:20px;height:20px;flex:none;stroke-width:1.6}
.sidebar-scene{min-height:130px;flex:1;background:url('./char_3h_n.png') left 5px bottom/115px auto no-repeat,url('./char_4h_n.png') right -4px bottom/115px auto no-repeat;image-rendering:pixelated;filter:drop-shadow(0 5px 8px #0008);pointer-events:none}
.shell .sidebar-bottom{margin-top:16px;padding:19px 13px 8px;border-top-color:#94783e;font-size:10px;color:#c4d2ce}
.shell .sidebar-bottom div{margin:8px 0 12px;color:#aab9bd}
.shell main{position:relative;isolation:isolate;padding:26px 30px 24px;max-width:1760px}
.shell main:before{content:'';position:absolute;inset:0 0 auto;height:330px;background:linear-gradient(90deg,#04151b65,transparent 60%),linear-gradient(0deg,#06151c,transparent 47%),url('./forest-night.png') center 53%/cover;z-index:-2;pointer-events:none}
.shell header{position:relative;border-bottom-color:#bba26966;min-height:85px;padding-bottom:18px;margin-bottom:18px}
.shell header h1{font-size:40px;color:#fff4dd;font-weight:600;letter-spacing:-.6px;text-shadow:0 3px 20px #000}
.shell header .eyebrow{color:#c1c9c5;letter-spacing:2.3px;text-shadow:0 2px 5px #000}
.shell .header-actions{align-self:flex-start;padding:8px;background:#06151c9c;border-radius:4px}
.shell #admin-name{color:#d0d9d8}
.hero-companion{position:absolute;right:22px;top:122px;width:155px;height:110px;object-fit:contain;image-rendering:pixelated;z-index:-1;pointer-events:none;filter:drop-shadow(0 0 18px #e88f252e)}
.shell .client-downloads{margin:0 0 16px;gap:12px;max-width:calc(100% - 160px)}
.shell .client-download{min-height:58px;min-width:214px;padding:13px 18px;border-radius:3px;background:linear-gradient(110deg,#634f268c,#0c2227ed);border-color:#b29452;box-shadow:inset 0 0 0 3px #04151b80,inset 0 0 25px #d8ac3820,0 5px 15px #0004;font-size:14px;color:#ffe2a3}
.shell .mobile-download{background:linear-gradient(110deg,#264e428f,#0c2227ed);border-color:#759384;color:#cde3ce}
.shell .client-download:hover{border-color:#ffdb8d;box-shadow:inset 0 0 0 3px #04151b80,0 0 18px #ddb86b30}
.shell .primary,dialog .primary{background:linear-gradient(#edd18e,#b99043);border-color:#f9dfa3;color:#271e0b;box-shadow:inset 0 0 0 2px #fff1bf3b,0 0 16px #e5b75126;text-shadow:0 1px #ffeabb66;border-radius:3px}
.shell .primary:hover,dialog .primary:hover{background:linear-gradient(#ffe4a3,#c8a055);box-shadow:0 0 20px #f4ca6250}
.shell .secondary,dialog .secondary{background:linear-gradient(120deg,#49402580,#0b2026);border:1px solid #947c48;box-shadow:inset 0 0 0 2px #04141b80;color:#ebd4a0;border-radius:3px}
.shell .secondary:hover,dialog .secondary:hover{background-color:#66512b;border-color:#e7bf70}
.shell .purchase-button{min-width:190px;justify-content:center}
.shell .stats{background:none;border:0;gap:12px;margin:23px 0}
.shell .stats article,.shell .panel,.shell .welcome{position:relative;border:1px solid #506663;box-shadow:inset 0 0 0 3px #05161d,inset 0 0 0 4px #29484c66,0 8px 22px #0003;background:linear-gradient(115deg,#0b2029f5,#0a1d22f2);border-radius:3px}
.shell .stats article:after,.shell .panel:after{content:'';position:absolute;inset:-3px;border:12px solid transparent;border-image:url('./ornate-frame.svg') 28 / 16px / 0 stretch;pointer-events:none;opacity:.6}
.shell .stats article{padding:19px 15px}
.shell .account-stats article{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px;align-content:center;min-height:120px;padding:17px 12px}
.shell .account-stats article>span,.shell .account-stats article>strong,.shell .account-stats article>small{grid-column:2}
.shell .account-stats .stat-icon{grid-column:1;grid-row:1/4;align-self:center;justify-self:center;width:62px;height:72px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 7px #0007)}
.shell .account-stats svg.stat-icon{width:40px;height:50px;color:#ebc171;filter:drop-shadow(0 0 9px #e4b65030)}
.shell .stats article>span{color:#b5c8cc;font-size:10px}
.shell .account-stats strong{font-family:Georgia,serif;font-size:20px;font-weight:600;letter-spacing:0;min-height:0;margin:9px 0;line-height:1.3;flex-wrap:wrap}
.shell .stats small{color:#a6bcc3;font-size:9px}
.shell .online-dot{color:#85e16b;text-shadow:0 0 9px #76e47166}
.shell .offline-dot{color:#87989f}
.shell .two-col{gap:20px;grid-template-columns:minmax(0,1.55fr) minmax(295px,1fr)}
.shell .panel{padding:26px}
.shell .panel-title h2{color:#f8edda;font-weight:600;font-size:27px}
.shell .panel-title .eyebrow{font-size:9px;letter-spacing:2.4px}
.shell #page-account>.two-col>.panel:first-child{background:linear-gradient(110deg,#0a2028fc 50%,#081c22b0),url('./forest-night.png') right bottom/auto 100%}
.shell .section-description{color:#afc1c7}
.shell .character-form{position:relative;border-bottom-color:#47606277;padding:13px 0 25px;margin-bottom:7px}
.shell .character-form label{color:#f1e8d5;font-family:Georgia,serif;font-size:14px;font-weight:600}
.shell input,.shell select,dialog input,dialog select{background:#132b2dcc;border-color:#637361;color:#eeeade;border-radius:3px;box-shadow:inset 0 2px 7px #0003;font-family:'Segoe UI',sans-serif;font-weight:400;font-size:12px}
.shell input[readonly]{background:#10242c;color:#aabec4;border-color:#344b50}
.shell .character-edit-hint{color:#a4bcc5;font-size:10px}
.shell .character-details{color:#b4c2bd;font-size:10px}
.shell .pill{border-color:#7baf6570;color:#c5e4b8;background:#6aa64c16}
.shell .pill.off{border-color:#69818a55;color:#adc1c7;background:#7d9ba60a}
.shell .trial-card{padding:0;border-color:#bf9a52;box-shadow:inset 0 0 0 3px #091b21,0 0 0 1px #4a4130,0 10px 30px #0004;overflow:visible}
.shell .trial-card:after{opacity:1;inset:-5px;border-image-width:21px}
.shell .trial-art{height:230px;border-bottom:2px solid #b18f4f;object-position:center 43%;padding:5px;border-radius:3px 3px 0 0}
.shell .trial-content{padding:22px}
.shell .trial-content h2{font-size:27px;font-weight:600;margin:8px 0 14px}
.shell .trial-card p{color:#b3c6cd;line-height:1.7}
.shell .trial-card button{margin-top:12px;min-height:44px;box-shadow:inset 0 0 0 2px #071820,0 0 12px #d6a84c13}
.shell .onboarding{margin-top:24px;background:linear-gradient(105deg,#10272ce8,#081b22f7)}
.shell .onboarding li{border-top-color:#8f774e77}
.shell .onboarding li:before{color:#e4bc73;text-shadow:0 0 12px #dcb14922}
.shell .purchase-note,.shell footer,.shell .footer-credit{color:#91a9ae}
dialog{background:linear-gradient(120deg,#122a30,#071b23);border-color:#bea064;box-shadow:inset 0 0 0 4px #06161d,0 25px 100px #000b}
dialog::backdrop{background:#020c13d9}
@media(min-width:1500px){.shell main{padding:40px 42px}.shell .account-stats article{grid-template-columns:65px minmax(0,1fr)}.shell .account-stats .stat-icon{width:76px;height:82px}.shell .trial-art{height:270px}}
@media(max-width:1190px){.shell{grid-template-columns:194px minmax(0,1fr)}.shell main{padding:28px 22px}.shell .stats{gap:10px}.shell .account-stats article{grid-template-columns:38px minmax(0,1fr);column-gap:8px;padding:16px 12px}.shell .account-stats .stat-icon{width:48px;height:62px}.shell .account-stats strong{font-size:18px}.shell .panel{padding:21px}.shell .trial-card{padding:0}.shell .two-col{grid-template-columns:minmax(0,1.4fr) minmax(270px,1fr)}.shell .client-download{min-width:195px}.hero-companion{right:5px;width:125px}}
@media(max-width:980px){.shell .two-col{grid-template-columns:1fr}.shell .trial-art{height:100%;min-height:320px;border-bottom:0;border-right:1px solid #b18f4f}.shell .account-stats article{grid-template-columns:50px minmax(0,1fr)}.shell .account-stats .stat-icon{width:62px}.shell .client-downloads{max-width:100%;padding-right:0}.hero-companion{display:none}.shell .client-download{flex:1;min-width:170px}.shell header h1{font-size:33px}}
@media(max-width:700px){.shell{display:block}.shell aside{padding:16px 18px 12px;background:linear-gradient(#041820b5,#041820f0),url('./forest-night.png') center/cover;border-right:0;border-bottom:1px solid #927643}.shell aside:before{inset:4px}.shell .brand{flex-direction:row;text-align:left;justify-content:flex-start;font-size:11px;gap:13px}.shell .brand-icon{width:46px;height:46px}.shell .brand:after,.sidebar-scene{display:none}.shell nav{margin-top:17px;gap:5px;padding-bottom:3px}.shell nav button{font-size:11px;min-height:38px;padding:7px 10px;gap:7px;flex-shrink:0}.shell nav button.active:before{display:none}.shell nav svg{width:17px;height:17px}.shell main{padding:25px 17px}.shell main:before{height:285px;background-position:center,right center}.shell header{min-height:82px;gap:8px;padding-bottom:17px;margin-bottom:21px}.shell header h1{font-size:29px}.shell header .eyebrow{font-size:7px;letter-spacing:1.4px}.shell .header-actions{padding:0;background:#06151c99}.shell .header-actions button{padding:8px;font-size:10px}.shell .client-downloads{display:grid;gap:10px;margin-bottom:19px}.shell .client-download{padding:12px;min-width:0;min-height:60px;font-size:12px;gap:8px;flex-wrap:nowrap}.shell .client-download .platform-icon{width:22px;height:22px}.shell .purchase-button{min-height:43px;font-size:12px;min-width:180px}.shell .stats{margin:20px 0;gap:10px}.shell .account-stats article{display:flex;flex-direction:column;align-items:flex-start;min-height:180px;padding:13px}.shell .account-stats .stat-icon{align-self:flex-start;width:52px;height:48px;object-position:left center;margin-bottom:6px}.shell .account-stats svg.stat-icon{width:32px;height:48px}.shell .account-stats strong{font-size:18px;margin:7px 0}.shell .account-stats article>span{font-size:9px}.shell .stats small{font-size:9px}.shell .panel{padding:21px}.shell .panel-title h2{font-size:26px}.shell .panel-title{gap:16px}.shell .character-form{padding-top:7px}.shell .trial-card{padding:0}.shell .trial-art{height:205px;min-height:0;border-right:0;border-bottom:1px solid #b18f4f}.shell .trial-content{padding:23px}.shell .trial-content h2{font-size:27px}.shell .onboarding ol{gap:20px}.shell footer{font-size:9px}}
@media(prefers-reduced-motion:no-preference){.shell nav button.active{animation:active-glow 5s ease-in-out infinite}@keyframes active-glow{50%{box-shadow:inset 0 0 18px #dba84333,0 0 14px #e2b8592b}}}