@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/noto-serif-regular.ttf) format('truetype')}@font-face{font-family:'Noto Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/noto-serif-semibold.ttf) format('truetype')}
@charset "UTF-8";
:root{color-scheme:light;--bg:#eef1f6;--bg-dark:#0c121b;--panel:#ffffff;--panel-alt:#f8fafd;--line:#d6e0eb;--line-dark:#293544;--gold:#b88933;--gold-bright:#d9b56c;--gold-light:#f4d9a0;--muted:#5c6f84;--text:#1b2838;--text-light:#e4eaf1;--cyan:#1d7fa6;--cyan-light:#7dcae1;--serif:'Noto Serif',Georgia,'Times New Roman',serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:radial-gradient(ellipse at 50% 520px,#dce4ef 0%,transparent 55%),linear-gradient(180deg,#111a26 0%,#162231 580px,#eaeff5 680px,#eef2f7 100%);color:var(--text);font:14px/1.65 'Segoe UI',Arial,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button,.button{border:1px solid #2b3d52;background:#1a293a;padding:11px 18px;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;color:#edf2f7;font-weight:600;border-radius:4px;display:inline-flex;gap:14px;align-items:center;justify-content:center}button:hover,.button:hover{background:#24384f;border-color:#4b6582}button:active,.button:active{transform:translateY(1px)}.gold,form>button{background:linear-gradient(105deg,#b88933,#deb968);color:#1b170e;border-color:#cfa550;box-shadow:0 2px 10px rgba(184,137,51,.22)}.gold:hover,form>button:hover{background:linear-gradient(105deg,#caa047,#edd089);border-color:#dab360;box-shadow:0 4px 18px rgba(184,137,51,.35)}.ghost{background:#11192388;border-color:#d9b56c55;color:#f0f4f8}.skip-link{position:fixed;top:-80px;left:20px;background:var(--gold-bright);color:#111;padding:12px;z-index:100}.skip-link:focus{top:10px}
.site-header{height:84px;background:#0b111af2;border-bottom:1px solid #e3be6a33;position:sticky;top:0;z-index:50;backdrop-filter:blur(16px)}.header-inner{max-width:1400px;margin:auto;padding:0 40px;height:100%;display:flex;gap:26px;align-items:center}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-monogram{font:bold 38px/.9 var(--serif);color:var(--gold-light);letter-spacing:-3px;text-shadow:0 2px 12px rgba(212,173,97,.35)}.brand-caption{font-size:13px;font-weight:800;line-height:1.25;letter-spacing:2.2px;width:auto;white-space:nowrap;color:var(--gold-light)}.brand-caption b{display:block;color:var(--gold-bright);font-size:9.5px;letter-spacing:2.4px;font-weight:700;margin-top:2px}#nav{display:flex;align-items:stretch;height:100%;flex:1;justify-content:center;gap:2px}#nav button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:0 12px;font-size:12px;white-space:nowrap;color:#b2c0ce;gap:7px}#nav button .icon{width:15px;height:15px}#nav button:hover,#nav button.active{color:var(--gold-light);border-bottom-color:var(--gold-bright);background:linear-gradient(0deg,#d7b36918,transparent)}.header-account{font-size:12px;background:#162230;border-color:#d9b56c66;color:var(--gold-light);white-space:nowrap;padding:9px 14px;gap:10px}.menu-toggle{display:none}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hero{height:560px;position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid #d9b56c40;color:#f4f1e9;background:#09101b}.hero-art{position:absolute;inset:0;z-index:-3;background:#09101b url(/assets/hero-knight-v2.png) right top/auto 100% no-repeat;animation:hero-enter 1.4s ease-out both}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#09101b 0%,#09101bf5 38%,#09101b99 54%,#09101b18 72%),linear-gradient(0deg,#0d1520 0%,transparent 22%,#080e1720 92%)}.hero-inner{max-width:1320px;margin:auto;padding:56px 40px;position:relative}.eyebrow{font-size:10px;letter-spacing:3.5px;color:var(--gold-light);display:flex;align-items:center;gap:12px;font-weight:600}.eyebrow>span{width:30px;height:1px;background:var(--gold-bright)}h1{font:normal clamp(46px,5.2vw,72px)/1.08 var(--serif);letter-spacing:-1.5px;margin:18px 0 18px;color:#f4f1e9;text-shadow:0 3px 30px #0008}h1 em{font-style:normal;background:linear-gradient(100deg,#ffe8b3,#d4a24c);color:var(--gold-light);background-clip:text;-webkit-text-fill-color:transparent}.hero-subline{display:block;font-size:clamp(30px,3.4vw,48px);color:#f4f1e9;letter-spacing:-1px;margin-top:6px;font-weight:400}.hero-description{color:#c2cdd9;max-width:460px;font-size:14px;line-height:1.85;margin:0}.hero-actions{display:flex;gap:12px;margin-top:26px}.hero-actions button{font-size:12px;padding:13px 21px}.hero-meta{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap}.hero-meta>span{font-size:9px;letter-spacing:1.5px;color:#93a4b7;padding-right:24px;border-right:1px solid #9fafbd38}.hero-meta>span:last-child{border:0}.hero-meta b{display:block;color:#eef2f6;font-size:13px;letter-spacing:1px;margin-top:5px;font-weight:600}.hero-scroll{position:absolute;bottom:23px;right:45px;font-size:8px;letter-spacing:3px;display:flex;align-items:center;gap:12px;color:#d6e0ea}.hero-scroll>span{width:28px;height:1px;background:var(--gold-bright)}.embers{position:absolute;inset:0;z-index:-1;pointer-events:none}.embers i{position:absolute;width:3px;height:3px;background:#e5b65d;border-radius:50%;box-shadow:0 0 8px #f8b049;bottom:0;left:36%;animation:ember 9s infinite linear}.embers i:nth-child(2){left:48%;animation-delay:-3s;animation-duration:12s}.embers i:nth-child(3){left:74%;animation-delay:-7s}.embers i:nth-child(4){left:88%;animation-delay:-2s;animation-duration:15s}.embers i:nth-child(5){left:28%;animation-delay:-6s;animation-duration:13s}.embers i:nth-child(6){left:58%;animation-delay:-4s}.embers i:nth-child(7){left:65%;animation-delay:-8s;animation-duration:14s}.embers i:nth-child(8){left:95%;animation-delay:-1s}
.announcement{background:linear-gradient(90deg,#121c29,#192738,#121c29);border-top:1px solid #d9b56c22;border-bottom:2px solid #c9a252;box-shadow:0 6px 20px rgba(10,18,28,.12)}.announcement>div{max-width:1240px;padding:13px 24px;display:flex;align-items:center;gap:15px;margin:auto;font-size:12px;color:#d2dce6}.announcement strong{font-size:10px;letter-spacing:1.5px;color:#f0d290}.announcement button{margin-left:auto;background:none;border:0;padding:0;font-size:12px;color:var(--gold-light);white-space:nowrap}.live-dot{width:6px;height:6px;background:var(--gold-bright);box-shadow:0 0 9px #d9b56c;border-radius:50%;flex-shrink:0}
main{max-width:1240px;margin:34px auto 72px;display:grid;grid-template-columns:276px minmax(0,1fr);gap:28px;padding:0 24px;outline:none;scroll-margin-top:106px}aside{align-self:start;display:grid;gap:18px;position:sticky;top:104px}
.account-panel,.server-panel{background:var(--panel);border:1px solid #cad5e2;border-radius:6px;overflow:hidden;box-shadow:0 8px 24px rgba(15,26,40,.07)}.panel-heading{padding:17px 21px 14px;background:linear-gradient(135deg,#131e2c,#1d2e42);border-bottom:2px solid #c89f4d}.panel-heading .section-kicker{color:var(--gold-light)}.section-kicker{font-size:9px;letter-spacing:2px;color:#996d1c;font-weight:700;text-transform:uppercase}h2{font:600 25px/1.3 var(--serif);color:#142234;margin:4px 0 18px}aside h2{font-family:'Segoe UI',Arial,sans-serif;font-size:16px;font-weight:600;margin:4px 0 0;color:#f5f2eb}
#identity{padding:20px;color:var(--text)}#identity label{font-size:11px;font-weight:600;color:#33475b}#identity input{font-size:13px;margin-bottom:14px;padding:10px 12px;background:#f8fafd;border-color:#bcc9d8;color:#142234}#identity form>button{width:100%;font-size:13px;padding:11px}.register-link{font-size:11px;color:#52657a;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 0 0}.register-link button{border:0;background:none;color:#9e6f16;padding:0;font-size:11px;font-weight:700}.account-avatar{height:42px;width:42px;border:1px solid #cfa550;color:#8f6310;background:#fdf6e7;border-radius:4px;display:flex;align-items:center;justify-content:center;font:600 20px var(--serif)}.account-name{display:flex;align-items:center;gap:12px}.account-name strong{display:block;font-size:15px;color:#142234}.account-name small{color:#566b82;font-size:11px}.wallet{margin:18px 0 15px;padding:14px 16px;background:#f7f9fc;border:1px solid #dde5ef;border-radius:5px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#4a5e73;font-weight:600}.wallet strong{color:#9a6b13;font-size:19px}.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.account-actions button{font-size:11px;padding:9px 8px;gap:6px}.account-actions .logout{grid-column:1/-1;background:#f1f5f9;border-color:#cbd5e1;color:#475569}.account-actions .logout:hover{background:#e2e8f0;color:#1e293b}
.server-panel dl{padding:4px 21px;margin:8px 0}.server-panel dl>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e5ecf3;font-size:12px}.server-panel dl>div:last-child{border:0}.server-panel dt{color:#586c82}.server-panel dd{margin:0;color:#162638;font-weight:600}.note{color:#586c82;background:#f6f8fb;border-top:1px solid #e5ecf3;font-size:11px;line-height:1.7;margin:0;padding:12px 21px}.support-shortcut{justify-content:flex-start;text-align:left;background:linear-gradient(135deg,#162333,#1e3044);border-color:#c89f4d66;padding:16px 18px;gap:13px;font-size:11px;font-weight:400;color:#c5d2df;box-shadow:0 6px 18px rgba(15,26,40,.08)}.support-shortcut b{display:block;color:var(--gold-light);font-size:12px;margin-top:3px}.support-symbol{width:32px;height:32px;display:grid;place-items:center;border:1px solid #d9b56c88;border-radius:50%;font:600 18px var(--serif);color:var(--gold-light);background:#d9b56c18}
.workspace-content{min-width:0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid #d6e0eb}.section-head h2{margin:3px 0 0}.section-head button{background:none;border:0;color:#996d1c;font-size:12px;font-weight:700;padding:0}.section-head button:hover{color:#75500c}
.news-layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:18px}.featured-story{padding:26px;min-height:268px;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:#152331;border:1px solid #c89f4d66;border-radius:6px;box-shadow:0 8px 24px rgba(15,26,40,.12)}.featured-story:before{content:'';position:absolute;inset:0;z-index:-2;background:url(/assets/hero-knight-v2.png) 63% 30%/cover;opacity:.55;transition:transform .7s}.featured-story:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0f1722 6%,#11192499 58%,#11192415)}.featured-story:hover:before{transform:scale(1.045)}.story-tag{align-self:flex-start;border:1px solid #d9b56c80;color:#f3d89c;background:#111a23cc;font-size:9px;letter-spacing:1.5px;padding:4px 9px;border-radius:3px;margin-bottom:auto;font-weight:600}.featured-story h3{font:600 25px/1.3 var(--serif);margin:25px 0 8px;max-width:340px;color:#f7f4ed}.featured-story p{font-size:12px;color:#cad5e2;margin:0;max-width:400px}.featured-story button{align-self:flex-start;background:none;border:0;color:var(--gold-light);padding:14px 0 0;font-size:11px;font-weight:700}
.rank-panel{background:var(--panel);border:1px solid #cad5e2;border-top:3px solid #c89f4d;border-radius:6px;padding:20px;box-shadow:0 6px 20px rgba(15,26,40,.06)}.rank-panel h3{font-size:14px;margin:0 0 14px;font-weight:700;display:flex;align-items:center;gap:9px;color:#162536}.rank-panel h3 .icon{color:#b5852b;width:18px}.rank-mini{list-style:none;padding:0;margin:0}.rank-mini li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #e6edf5;font-size:12px}.rank-mini li:last-child{border:0}.rank-mini .position{font:600 16px var(--serif);color:#6c7f93}.rank-mini li:first-child .position{color:#b58326}.rank-mini .points{color:#1d6f93;font-size:11px;font-weight:600;background:#eef6fa;padding:2px 7px;border-radius:3px}.rank-mini strong{font-size:12px;font-weight:600;color:#1b2a3b}.rank-empty{font-size:12px;color:var(--muted)}
.news-list{margin-top:18px;display:grid;gap:1px;background:#d8e2ec;border:1px solid #cad5e2;border-radius:6px;overflow:hidden;box-shadow:0 4px 16px rgba(15,26,40,.05)}.news-row{padding:15px 20px;background:var(--panel);display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:start;transition:background .15s}.news-row:hover{background:#f8fafd}.news-category{font-size:9px;font-weight:700;letter-spacing:1px;color:#16698e;border:1px solid #b6dce9;background:#edf7fb;padding:3px 8px;border-radius:3px;margin-top:1px}.news-row h3{margin:0;font-size:13px;font-weight:600;color:#182738}.news-row p{font-size:12px;color:#495d73;line-height:1.8;margin:8px 0 0}.news-row time{font-size:11px;color:#687c91;padding-top:2px}.news-row details summary{cursor:pointer;list-style:none}.news-row details summary::-webkit-details-marker{display:none}.news-row details summary:hover h3{color:#9e6f16}
.quick-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 32px}.quick-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#172536,#1e3147);border:1px solid #c89f4d66;border-radius:6px;padding:20px 18px;justify-content:flex-start;gap:13px;text-align:left;box-shadow:0 6px 18px rgba(15,26,40,.08);transition:transform .25s,border-color .25s,box-shadow .25s}.quick-card:after{content:'';position:absolute;width:70px;height:120%;background:linear-gradient(90deg,transparent,#d9b56c18,transparent);transform:skewX(-25deg);left:-100px;top:0;transition:left .6s}.quick-card:hover:after{left:120%}.quick-card:hover{transform:translateY(-3px);border-color:#d9b56c;box-shadow:0 10px 26px rgba(15,26,40,.16)}.quick-card>.icon{color:var(--gold-light);width:28px;height:28px}.quick-card strong{font-size:13px;font-weight:600;display:block;color:#f4f1ea}.quick-card small{font-size:10px;color:#9fb0c2;font-weight:400;display:block;margin-top:2px}.quick-card .arrow{margin-left:auto;color:var(--gold-light);font-size:14px}
.class-section{margin-top:26px}.class-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.class-tabs button{font-size:11px;padding:9px 13px;background:var(--panel);border-color:#c6d2df;color:#41556b;font-weight:600;gap:6px}.class-tabs button:hover{background:#f3f7fb;color:#162536;border-color:#9fb2c7}.class-tabs button.active{color:#1b160c;border-color:#b88933;background:linear-gradient(105deg,#d6ad58,#f0d28c);box-shadow:0 3px 10px rgba(184,137,51,.22)}.class-detail{background:radial-gradient(ellipse at right,#25425233,transparent 65%),linear-gradient(135deg,#14202e,#1b2c3f);border:1px solid #c89f4d66;border-radius:6px;display:flex;gap:22px;padding:28px;align-items:center;min-height:180px;box-shadow:0 8px 24px rgba(15,26,40,.1)}.class-sigil{width:96px;height:96px;flex-shrink:0;border:1px solid #d9b56c77;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 8px #d9b56c0c,0 0 30px #7dcae118;background:#101a26;color:var(--gold-light)}.class-sigil .icon{width:44px;height:44px;stroke-width:1.2}.class-detail h3{font:600 27px var(--serif);color:var(--gold-light);margin:2px 0 8px}.class-detail p{font-size:13px;color:#c3d0de;margin:0;max-width:480px}.class-role{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--cyan-light);text-transform:uppercase}.class-detail button{margin-top:16px;font-size:11px;padding:9px 15px;background:#1e3246;border-color:#d9b56c66;color:#f3ebd9}
article,.panel{background:var(--panel);border:1px solid #cad5e2;border-radius:6px;padding:24px;margin-bottom:18px;box-shadow:0 6px 20px rgba(15,26,40,.05)}article h3{font-size:16px;color:#152536;font-weight:700;margin:0 0 12px}article p{font-size:13px;color:#465a70;white-space:pre-wrap}#content>h2:not(:first-child){margin-top:30px}#content>p{color:#495d73;font-size:13px}form{max-width:480px}form>button{font-size:12px;min-width:130px;margin-top:4px}label{display:block;font-size:12px;font-weight:600;color:#2c3e50;margin-bottom:5px}input,select,textarea{display:block;width:100%;padding:10px 12px;border:1px solid #bcc9d8;border-radius:4px;background:#f9fbfd;color:#162536;margin:6px 0 16px;transition:border-color .2s,box-shadow .2s,background .2s}input:hover,select:hover,textarea:hover{border-color:#8fa3b8;background:#fff}input:focus,select:focus,textarea:focus{outline:none;border-color:#b88933;background:#fff;box-shadow:0 0 0 3px rgba(184,137,51,.16)}input[type=checkbox]{display:inline;width:auto;margin-right:8px}textarea{min-height:120px;resize:vertical}input[type=number]{appearance:textfield}input::placeholder{color:#7c8ea3}
.scroll{overflow:auto;border:1px solid #cad5e2;border-radius:6px;margin-bottom:20px;background:var(--panel);box-shadow:0 4px 16px rgba(15,26,40,.05)}table{border-collapse:collapse;width:100%;background:var(--panel);font-size:13px;white-space:nowrap}th,td{text-align:left;padding:13px 16px;border-bottom:1px solid #e4ecf4;color:#1e2f42}th{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#f3ebd9;background:linear-gradient(180deg,#162435,#1b2b3e);font-weight:600;border-bottom:2px solid #c89f4d}tbody tr{transition:background .15s}tbody tr:nth-child(even){background:#f8fafd}tbody tr:hover{background:#eef4fb}tbody tr:last-child td{border-bottom:0}.ranking-table tbody tr:nth-child(-n+3) td:first-child{color:#a87619;font:700 17px var(--serif)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.grid article{margin:0;transition:border-color .2s,transform .2s,box-shadow .2s}.grid article:hover{border-color:#b88933;transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,26,40,.1)}.grid article form{margin-top:14px}.medal{width:26px;height:26px;object-fit:contain;vertical-align:middle}.shop-toolbar{display:grid;grid-template-columns:1fr 190px;gap:12px;margin-bottom:20px}.shop-toolbar input,.shop-toolbar select{margin:0;background:var(--panel)}.shop-card{display:flex;flex-direction:column;padding:20px}.shop-icon{height:68px;margin:0 0 12px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--gold-light);background:linear-gradient(135deg,#152231,#1e3146);border:1px solid #c89f4d55}.shop-icon .icon{width:36px;height:36px;stroke-width:1.2}.shop-card h3{font-size:14px;margin:0 0 5px;color:#162536}.shop-price{color:#a37216!important;font-weight:700;font-size:17px!important;margin:0!important}.shop-price small{font-size:11px;color:#5a6e82;font-weight:500}.shop-category{font-size:9px;font-weight:700;letter-spacing:1.4px;color:#1d6f93;margin-bottom:8px;text-transform:uppercase}.shop-card label{font-size:11px}.shop-card input,.shop-card select{font-size:12px;padding:8px 10px;margin-bottom:10px}.shop-card form>button{width:100%;font-size:12px;padding:10px}.shop-empty{padding:35px;color:#5a6e82;background:var(--panel);border:1px dashed #bcc9d8;border-radius:6px}.rank-filter{max-width:240px}.tag{color:#9a6b13;font-weight:600}.qr{max-width:280px;width:100%;display:block;margin:20px auto;background:#fff;border:10px solid white;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.1)}#notice{margin-bottom:18px;white-space:pre-wrap;font-size:13px;font-weight:500}#notice:empty{display:none}#notice:not(:empty){padding:14px 18px;background:#fff8e6;border:1px solid #dfb867;border-left:4px solid #b88933;color:#5c4209;border-radius:5px}.stats{display:flex;gap:14px;flex-wrap:wrap}.stats article{flex:1;min-width:130px}.stats strong{font-size:24px;display:block;color:#a37216}.loading-grid{display:grid;gap:16px}.skeleton{height:110px;border-radius:6px;background:linear-gradient(90deg,#e2e8f0 20%,#f1f5f9 45%,#e2e8f0 70%);background-size:200% 100%;animation:shimmer 1.3s infinite linear}.loading-grid .skeleton:first-child{height:35px;width:40%}.reveal{animation:content-in .4s ease-out both}.empty-state{text-align:center;padding:48px 25px;background:var(--panel);border:1px solid #cad5e2;border-radius:6px;box-shadow:0 6px 20px rgba(15,26,40,.05)}.empty-state>.icon{width:46px;height:46px;color:#b88933;margin-bottom:10px}.empty-state h3{font-size:18px;color:#152536;margin:0 0 10px}.empty-state p{font-size:13px;color:#52667a;margin:0 auto 20px;max-width:340px}.empty-state button{font-size:12px}
footer{background:#0b111a;border-top:2px solid #c89f4d;padding:30px 24px 0;color:#cbd5e1}.footer-inner{max-width:1192px;margin:auto;display:flex;align-items:center;gap:28px;padding-bottom:25px}.footer-brand{font:bold 31px var(--serif);letter-spacing:-1.5px;color:#e2c383;display:flex;gap:10px;align-items:center}.footer-brand b{color:var(--gold-light);letter-spacing:0;font-weight:700}.footer-brand span{font:9px 'Segoe UI',Arial,sans-serif;letter-spacing:2px;color:#9aa8b8}.footer-inner p{font-size:12px;color:#8fa1b5;margin-right:auto}.footer-inner button,.footer-inner a{font-size:11px;color:#b4c2d0;background:none;border:0;padding:0}.footer-inner button:hover,.footer-inner a:hover{color:var(--gold-light)}.footer-bottom{max-width:1192px;margin:auto;border-top:1px solid #1f2b37;padding:19px 0;color:#6c8096;font-size:10px;display:flex;justify-content:space-between}.back-top{position:fixed;right:24px;bottom:24px;width:40px;height:40px;padding:0;background:#162332;border-color:#c89f4d;color:var(--gold-light);z-index:30;box-shadow:0 4px 14px rgba(0,0,0,.25)}.back-top[hidden]{display:none}
@keyframes ember{0%{transform:translate(0,0);opacity:0}15%{opacity:.7}80%{opacity:.4}100%{transform:translate(-80px,-440px);opacity:0}}@keyframes hero-enter{from{transform:scale(1.035);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes content-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media(min-width:1550px){.hero-art{background-position:50% 39%}.hero{height:600px}.hero-inner{padding-top:72px}}
@media(max-width:1170px){.header-inner{padding:0 24px;gap:20px}#nav button{padding:0 8px;font-size:11px}#nav button .icon{display:none}.header-account{padding:8px 10px}.news-layout{grid-template-columns:1fr 235px}.quick-card{padding:17px 14px;gap:9px}.quick-card>.icon{width:22px}.quick-card strong{font-size:12px}.quick-card small{font-size:9px}.hero{height:520px}.hero-inner{padding-top:48px}.hero h1{font-size:62px}.hero-meta{margin-top:28px}.hero-art{background-position:58% 40%}}
@media(max-width:950px){.header-account{display:none}.header-inner{gap:18px}.hero{height:500px}.hero-inner{padding:46px 30px}.hero h1{font-size:56px}.hero-description{max-width:340px;font-size:13px}.hero-shade{background:linear-gradient(90deg,#09101be6,#0a101980 48%,#0a101915 80%),linear-gradient(0deg,#0c1118,transparent 35%)}main{grid-template-columns:245px minmax(0,1fr);gap:20px;padding:0 20px}.news-layout{grid-template-columns:1fr}.rank-panel{display:none}.quick-links{grid-template-columns:1fr;gap:10px}.quick-card{padding:15px 18px}.quick-card strong{font-size:12px}.quick-card small{font-size:10px}.announcement strong{display:none}.class-detail{padding:22px;gap:18px}.class-sigil{width:72px;height:72px}.class-sigil .icon{width:35px}.news-row time{display:none}.news-row{grid-template-columns:auto 1fr}.footer-inner{gap:20px}}
@media(max-width:700px){html{scroll-padding-top:80px}.site-header{height:68px}.header-inner{padding:0 20px;justify-content:space-between;gap:15px}.brand-monogram{font-size:33px}.brand-caption{font-size:11px}.brand-caption b{font-size:8.5px}.menu-toggle{display:flex;flex-direction:column;gap:5px;padding:9px;background:none;border-color:#39454f;margin-left:auto}.menu-toggle span{width:19px;height:1px;background:#e2ca98}#nav{display:none;position:absolute;top:68px;left:0;right:0;height:auto;flex-direction:column;background:#0d1621fa;border-bottom:1px solid #ad8b48;padding:10px 18px 17px;box-shadow:0 20px 35px #0007}#nav.open{display:flex}#nav button{justify-content:flex-start;font-size:13px;padding:12px 15px;border-left:2px solid transparent;border-bottom:0}#nav button .icon{display:block;width:17px;height:17px;margin-right:8px}#nav button.active{border-left-color:var(--gold-bright)}.header-account{display:flex;padding:7px 10px;font-size:10px}.hero{height:500px}.hero-art{background-position:right top}.hero-shade{background:linear-gradient(90deg,#09101bd9,#0a1019a0 50%,#0a101935),linear-gradient(0deg,#0c1118 0%,transparent 55%)}.hero-inner{padding:44px 24px}.eyebrow{font-size:8px;letter-spacing:2.6px}.hero h1{font-size:44px;letter-spacing:-1.2px;margin-top:18px}.hero-description{font-size:12px;max-width:280px;line-height:1.85;color:#bac4d0}.hero-actions{gap:9px;margin-top:24px}.hero-actions button{font-size:11px;padding:11px 14px;gap:10px}.hero-meta{gap:18px;margin-top:30px}.hero-meta>span{font-size:8px;letter-spacing:1px;padding-right:15px}.hero-meta b{font-size:11px}.hero-scroll{display:none}.announcement>div{padding:12px 20px;gap:10px;font-size:11px}.announcement>div>span:not(.live-dot){max-width:220px}.announcement button{font-size:10px}.announcement button span{display:none}main{display:flex;flex-direction:column;padding:0 18px;margin:25px auto 45px;gap:22px}aside{position:static;display:grid;grid-template-columns:1fr;gap:16px}.support-shortcut{display:none}.account-panel,.server-panel{min-width:0}.section-head h2{font-size:22px}.news-layout{grid-template-columns:1fr}.featured-story{min-height:240px;padding:22px}.featured-story h3{font-size:23px}.news-list{margin-top:14px}.news-row{padding:14px;gap:10px}.quick-links{grid-template-columns:1fr;margin-top:20px;gap:10px}.class-detail{padding:22px 18px;gap:18px}.class-detail h3{font-size:24px}.class-sigil{width:65px;height:65px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid article{padding:16px}.shop-toolbar{grid-template-columns:1fr}article{padding:20px}th,td{padding:11px 12px;font-size:12px}.footer-inner{flex-wrap:wrap;gap:18px}.footer-brand{font-size:28px}.footer-inner p{width:100%;order:3;margin:0}.footer-bottom{font-size:9px}.footer-bottom span{display:none}.back-top{right:15px;bottom:15px}}
@media(max-width:370px){.hero h1{font-size:44px}.hero-actions{flex-wrap:wrap}.hero-meta{gap:12px}.hero-meta>span{padding-right:10px}.header-account{display:none}.grid{grid-template-columns:1fr}.announcement button{display:none}.class-sigil{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.embers{display:none}}

main{grid-template-columns:300px minmax(0,1fr)}
.account-title-wrap{min-width:0;flex:1}
.account-id-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.role-pill{font-size:9px;font-weight:700;letter-spacing:.8px;padding:2px 6px;border-radius:3px;background:#eef2f7;color:#475569;border:1px solid #cbd5e1}
.role-pill.role-admin{background:#fef3c7;color:#92400e;border-color:#f59e0b}
.role-pill.role-vip{background:#e0f2fe;color:#075985;border-color:#38bdf8}
.status-online{color:#15803d;font-weight:600}
.status-offline{color:#64748b}
.text-gold{color:#9a6b13!important}
.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 12px}
.wallet-cell{background:#f8fafd;border:1px solid #dde6f0;border-radius:5px;padding:8px 10px}
.wallet-cell small{display:block;font-size:10px;color:#5a6e82;font-weight:600}
.wallet-cell strong{display:block;font-size:14px;color:#162536;margin-top:2px}
.wallet-cell.wallet-wide{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
.wallet-cell.wallet-wide strong{margin-top:0;font-size:13px;color:#1d6f93}
.sidebar-subbox{background:#f8fafd;border:1px solid #dde6f0;border-radius:5px;padding:10px 12px;margin-bottom:12px}
.subbox-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.link-mini{background:none!important;border:0!important;padding:0!important;color:#9a6b13!important;font-size:10px!important;font-weight:700!important}
.jewel-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.jewel-mini-grid>div{background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:5px 6px;text-align:center}
.jewel-mini-grid span{display:block;font-size:9px;color:#64748b;font-weight:600}
.jewel-mini-grid strong{display:block;font-size:12px;color:#162536}
.main-char-brief{background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:7px 9px;font-size:11px;line-height:1.45}
.main-char-brief strong{display:block;font-size:13px;color:#162536}
.main-char-brief span{display:block;color:#334155}
.main-char-brief small{display:block;color:#64748b;font-size:10px;margin-top:2px}
.account-actions{display:flex;flex-direction:column;gap:8px}
.account-action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.admin-cta{background:linear-gradient(135deg,#142234,#1f344d)!important;border-color:#c89f4d!important;color:#f4d9a0!important;font-weight:700!important}
.admin-cta:hover{background:linear-gradient(135deg,#1c2f47,#294362)!important}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi-card{background:var(--panel);border:1px solid #cad5e2;border-top:3px solid #c89f4d;border-radius:6px;padding:16px 18px;box-shadow:0 4px 14px rgba(15,26,40,.05)}
.kpi-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#5a6e82}
.kpi-value{display:block;font:700 24px/1.25 var(--serif);color:#152536;margin:6px 0 4px}
.kpi-value small{font-size:12px;font-family:'Segoe UI',Arial,sans-serif;font-weight:600;color:#5a6e82}
.kpi-card>small{display:block;font-size:11px;color:#64748b}
.account-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.info-dl{margin:0;display:grid;gap:8px}
.info-dl>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #e8eef5;font-size:12.5px}
.info-dl>div:last-child{border-bottom:0;padding-bottom:0}
.info-dl dt{color:#586c82;font-weight:500}
.info-dl dd{margin:0;color:#152536;font-weight:600;text-align:right}
.section-inline-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.section-inline-head h3{margin:0 0 4px}
.section-inline-head p{margin:0}
.jewel-bank-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.jewel-card{background:linear-gradient(180deg,#ffffff,#f6f9fc);border:1px solid #cdd8e5;border-radius:6px;padding:12px 10px;text-align:center}
.jewel-card span{display:block;font-size:11px;font-weight:700;color:#33475b}
.jewel-card strong{display:block;font:700 22px/1.25 var(--serif);color:#9a6b13;margin:5px 0 2px}
.jewel-card small{display:block;font-size:10px;color:#687c91}
.badge-ok,.badge-warn,.badge-danger,.badge-neutral{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:700}
.badge-ok{background:#dcfce7;color:#166534;border:1px solid #86efac}
.badge-warn{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
.badge-danger{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.badge-neutral{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1}
.table-actions{display:flex;gap:6px;align-items:center}
.table-actions form{margin:0}
.table-actions button,.btn-mini{padding:5px 10px!important;font-size:11px!important;min-width:0!important;margin:0!important}
.admin-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.admin-grid-2 article{margin:0}
.admin-grid-2 form{max-width:100%}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.admin-search-bar{display:flex;gap:8px;align-items:center}
.admin-search-bar input{margin:0;min-width:240px;background:#fff}
.subcard{background:#f8fafd;border:1px solid #d6e0eb;border-radius:5px;padding:14px 16px;margin-bottom:12px}
.subcard h4{margin:0 0 8px;font-size:14px;color:#152536}
.news-admin-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #e5ecf3;font-size:12px}
.news-admin-item form{margin:0}
.checkbox-row{display:flex;align-items:center;gap:8px;margin:10px 0 14px;font-weight:600}
@media(max-width:1050px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.jewel-bank-cards{grid-template-columns:repeat(3,1fr)}.admin-grid-2,.account-info-grid{grid-template-columns:1fr}}
@media(max-width:700px){.kpi-grid{grid-template-columns:1fr}.jewel-bank-cards{grid-template-columns:repeat(2,1fr)}.form-row-2{grid-template-columns:1fr}.admin-search-bar{width:100%}.admin-search-bar input{min-width:0;flex:1}}

.class-detail{display:block!important;padding:28px!important}
.class-hero-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.95fr);gap:24px;align-items:start}
.class-title-bar{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.class-title-bar .class-sigil{width:64px;height:64px}
.class-title-bar .class-sigil .icon{width:30px;height:30px}
.class-title-bar h3{margin:3px 0 0;font-size:24px}
.class-lore-text p{max-width:none!important;color:#d2dde8!important;font-size:13.5px!important;line-height:1.78!important;margin:0 0 12px!important}
.class-banner-wrap{border:1px solid #d9b56c66;border-radius:6px;overflow:hidden;background:#0b121b;box-shadow:0 10px 28px rgba(0,0,0,.38)}
.class-banner-wrap img{display:block;width:100%;height:auto;object-fit:cover}
.class-meta-section{margin-top:22px;padding-top:18px;border-top:1px solid #2b3e55}
.class-meta-section h4{margin:0 0 12px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-light)}
.cstat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cstat-cell{background:#0f1926;border:1px solid #293c52;border-radius:5px;padding:9px 10px;text-align:center}
.cstat-cell span{display:block;font-size:10.5px;color:#95a8bc;line-height:1.35}
.cstat-cell strong{display:block;font:700 16px/1.3 var(--serif);color:var(--gold-light);margin-top:4px}
.class-meta-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
.class-acc{background:#0f1926;border:1px solid #2b3e55;border-radius:6px;overflow:hidden}
.class-acc summary{cursor:pointer;padding:12px 16px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold-light);background:#132030;list-style:none;display:flex;justify-content:space-between;align-items:center}
.class-acc summary::-webkit-details-marker{display:none}
.class-acc summary:after{content:'▾';color:var(--gold-bright);font-size:14px}
.class-acc:not([open]) summary:after{content:'▸'}
.class-acc-body{padding:14px 16px}
.cformula-table{width:100%;border-collapse:collapse;background:#0f1926!important;white-space:normal}
.cformula-table th{background:#18283b!important;color:var(--gold-light)!important;font-size:10px;padding:10px 12px;border-bottom:1px solid #c89f4d66}
.cformula-table tbody tr:nth-child(odd){background:#0f1926!important}
.cformula-table tbody tr:nth-child(even){background:#162436!important}
.cformula-table tbody tr:hover{background:#1e3148!important}
.cformula-table td{background:transparent!important;color:#e2ecf5!important;font-size:12.5px;padding:10px 12px;border-bottom:1px solid #223346;vertical-align:top}
.cformula-table td strong{color:var(--gold-light)!important}
body .hero{height:580px!important;background:#09101b}
body .hero-art{background:#09101b!important;overflow:hidden}
body .hero-shade{background:linear-gradient(90deg,#09101b 0%,#09101bf5 38%,#09101b99 54%,#09101b18 72%),linear-gradient(0deg,#0d1520 0%,transparent 22%,#080e1720 92%)!important}
.featured-story:before{background:#101925 url(/assets/hero-knight-v2.png) right top/contain no-repeat!important;opacity:.68!important}
.cskill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:420px;overflow:auto}
.cskill-card{display:flex;gap:12px;align-items:flex-start;background:#142233;border:1px solid #26394f;border-radius:5px;padding:10px 12px}
.cskill-icons{display:flex;gap:4px;flex-shrink:0}
.cskill-icons img{width:28px;height:38px;object-fit:cover;border:1px solid #c89f4d66;border-radius:3px;background:#090f16}
.cskill-body{min-width:0}
.cskill-body strong{display:block;font-size:12.5px;color:var(--gold-light);margin-bottom:3px}
.cskill-body p{font-size:11.5px!important;line-height:1.55!important;color:#bdcad8!important;margin:0!important;max-width:none!important}
@media(max-width:950px){.class-hero-row{grid-template-columns:1fr}.cstat-grid{grid-template-columns:repeat(3,1fr)}.cskill-grid{grid-template-columns:1fr}}
@media(max-width:600px){.cstat-grid{grid-template-columns:repeat(2,1fr)}}


/* Unified Sidebar & Interactive Crafting Menu Styles */
.account-panel,.craft-sidebar-panel,.server-panel{background:var(--panel);border:1px solid #cad5e2;border-radius:8px;overflow:hidden;box-shadow:0 10px 28px rgba(15,26,40,.08);transition:border-color .25s ease,box-shadow .25s ease}
.account-panel:hover,.craft-sidebar-panel:hover,.server-panel:hover{border-color:#c89f4d88;box-shadow:0 14px 32px rgba(15,26,40,.13)}
.panel-heading{position:relative;overflow:hidden;padding:16px 20px 14px;background:linear-gradient(135deg,#111b28 0%,#1b2c40 60%,#233750 100%);border-bottom:2px solid #c89f4d}
.panel-heading::after{content:'';position:absolute;top:0;left:-120%;width:65%;height:100%;background:linear-gradient(90deg,transparent,rgba(244,217,160,.14),transparent);transform:skewX(-25deg);transition:left .65s ease;pointer-events:none}
.account-panel:hover .panel-heading::after,.craft-sidebar-panel:hover .panel-heading::after,.server-panel:hover .panel-heading::after{left:140%}
.craft-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none}
.craft-heading-text h2{margin:3px 0 0;font-family:'Segoe UI',Arial,sans-serif;font-size:16px;font-weight:700;color:#f5f2eb;letter-spacing:.2px}
.craft-heading-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.craft-count-pill{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(217,181,108,.16);border:1px solid rgba(217,181,108,.45);color:var(--gold-light)}
.craft-chevron{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(217,181,108,.35);color:var(--gold-light);transition:transform .3s cubic-bezier(.4,0,.2,1),background .2s ease}
.craft-chevron svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.craft-sidebar-panel.is-collapsed .craft-chevron{transform:rotate(-90deg);background:rgba(217,181,108,.2)}
.craft-sidebar-body{max-height:920px;opacity:1;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .28s ease,padding .28s ease;background:linear-gradient(180deg,#ffffff 0%,#f5f8fc 100%);padding:12px}
.craft-sidebar-panel.is-collapsed .craft-sidebar-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;pointer-events:none}
.craft-search-box{margin-bottom:10px;position:relative}
.craft-search-box input{margin:0!important;padding:8px 11px!important;font-size:12px!important;border-radius:6px!important;background:#f8fafd!important;border:1px solid #cfdbe8!important;color:#162536!important}
.craft-search-box input:focus{background:#fff!important;border-color:#b88933!important;box-shadow:0 0 0 3px rgba(184,137,51,.14)!important}
.craft-sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.craft-sidebar-list li{animation:craft-item-in .32s ease both;animation-delay:calc(var(--item-idx,0) * 22ms)}
@keyframes craft-item-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.craft-nav-btn{position:relative;overflow:hidden;width:100%;justify-content:flex-start!important;text-align:left!important;padding:8px 10px!important;border-radius:7px!important;background:#ffffff!important;border:1px solid #dde6f0!important;color:#1b2a3b!important;display:flex!important;align-items:center!important;gap:10px!important;box-shadow:0 2px 5px rgba(15,26,40,.03)!important;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease,background .2s ease,box-shadow .2s ease!important}
.craft-nav-btn::before{content:'';position:absolute;inset:0;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(217,181,108,.22),transparent 70%);opacity:0;transition:opacity .2s ease;pointer-events:none}
.craft-nav-btn::after{content:'';position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#f4d9a0,#b88933);transform:scaleY(0);transition:transform .22s ease}
.craft-nav-icon{width:32px;height:32px;border-radius:6px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(135deg,#152232,#203349);border:1px solid rgba(200,159,77,.45);color:var(--gold-light);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}
.craft-svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.craft-nav-text{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.craft-nav-text strong{font-size:12.5px;font-weight:700;color:#152536;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease}
.craft-nav-text small{font-size:10px;font-weight:500;color:#64788d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;transition:color .18s ease}
.craft-nav-badge{font-size:9px;font-weight:800;letter-spacing:.6px;padding:3px 6px;border-radius:4px;background:#eef3f9;border:1px solid #d5e0ec;color:#475b70;flex-shrink:0;transition:all .2s ease}
.craft-nav-btn:hover{transform:translateX(4px)!important;border-color:#c89f4d!important;background:#fdfaf2!important;box-shadow:0 6px 16px rgba(184,137,51,.15)!important}
.craft-nav-btn:hover::before{opacity:1}
.craft-nav-btn:hover::after{transform:scaleY(.7)}
.craft-nav-btn:hover .craft-nav-icon{transform:scale(1.06) rotate(-3deg);border-color:#e5c172;box-shadow:0 0 12px rgba(217,181,108,.35)}
.craft-nav-btn:hover .craft-nav-text strong{color:#8f600c}
.craft-nav-btn:hover .craft-nav-badge{background:#fef3c7;border-color:#e5b95c;color:#8f600c}
.craft-nav-btn:focus-visible{outline:none!important;border-color:#b88933!important;box-shadow:0 0 0 3px rgba(184,137,51,.22)!important}
.craft-nav-btn.active{background:linear-gradient(135deg,#132030 0%,#1d3148 100%)!important;border-color:#c89f4d!important;box-shadow:0 8px 20px rgba(15,26,40,.24),inset 0 1px 0 rgba(244,217,160,.18)!important;transform:translateX(4px)!important}
.craft-nav-btn.active::before{opacity:1}
.craft-nav-btn.active::after{transform:scaleY(1);top:10%;bottom:10%;width:4px}
.craft-nav-btn.active .craft-nav-icon{background:linear-gradient(135deg,#b88933,#e2bf73);border-color:#f4d9a0;color:#161209;box-shadow:0 0 14px rgba(217,181,108,.45)}
.craft-nav-btn.active .craft-nav-text strong{color:#f4d9a0}
.craft-nav-btn.active .craft-nav-text small{color:#b6c6d6}
.craft-nav-btn.active .craft-nav-badge{background:rgba(217,181,108,.18);border-color:#d9b56c;color:#f4d9a0}

/* Top Nav & Quick Card Synchronized Spotlight */
#nav button{position:relative;overflow:hidden}
#nav button::after{content:'';position:absolute;inset:0;background:radial-gradient(70px circle at var(--mx,50%) var(--my,50%),rgba(244,217,160,.18),transparent 70%);opacity:0;transition:opacity .2s;pointer-events:none}
#nav button:hover::after{opacity:1}

/* Crafting & Event Guide Content Area (High-Contrast Parchment & Royal Navy V17) */
.craft-section{margin-top:0;display:grid;gap:14px}
.craft-content-card{background:linear-gradient(180deg,#fdfbf6 0%,#f5efe2 100%)!important;border:1px solid #c89f4d!important;border-top:3px solid #b88933!important;border-radius:10px;padding:24px 26px;overflow-x:auto;box-shadow:0 12px 30px rgba(15,24,36,.12)!important;color:#142234!important}
.craft-article-head{border-bottom:2px solid #d5c4a1;padding-bottom:16px;margin-bottom:20px}
.craft-article-head .section-kicker{color:#8f5806!important;font-size:10.5px!important;font-weight:800!important}
.craft-article-title-row{display:flex;align-items:center;gap:14px}
.craft-hero-icon{width:48px;height:48px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(135deg,#142234,#213650);border:1px solid #c89f4d;color:#ffd88a;box-shadow:0 6px 16px rgba(15,24,36,.18)}
.craft-hero-icon .craft-svg{width:24px;height:24px}
.craft-article-head h3{margin:4px 0 0;color:#122031!important;font-size:1.34rem!important;font-weight:800!important;letter-spacing:.01em}
.craft-article-body,.event-article-body{color:#162536!important;line-height:1.78;font-size:.96rem}
.craft-article-body p,.event-article-body p,.craft-article-body div,.event-article-body div,.craft-article-body center,.event-article-body center{color:#162536!important;max-width:none!important;margin:8px 0}
.craft-article-body ul,.craft-article-body ol,.event-article-body ul,.event-article-body ol{margin:8px 0 14px;padding-left:22px;color:#162536!important}
.craft-article-body li,.event-article-body li{margin:5px 0;color:#162536!important}
.craft-article-body span,.event-article-body span,.craft-article-body font,.event-article-body font{color:#162536}
.craft-article-body b,.craft-article-body strong,.event-article-body b,.event-article-body strong{color:#0d1826;font-weight:700}
.craft-article-body i,.craft-article-body em,.event-article-body i,.event-article-body em{color:#334155!important;font-weight:600}
.craft-article-body a,.event-article-body a{color:#8f4f05!important;font-weight:700;text-decoration:underline}
.craft-article-body a:hover,.event-article-body a:hover{color:#6b3a02!important}
.craft-article-body h3.craft-subtitle,.craft-article-body h2,.craft-article-body h4,.event-article-body h2,.event-article-body h3,.event-article-body h4{color:#ffd88a!important;font-size:1.04rem!important;font-weight:700!important;margin:22px 0 12px!important;padding:10px 16px!important;background:linear-gradient(90deg,#132030 0%,#1d3148 75%,#243b55 100%)!important;border:1px solid #c89f4d!important;border-left:4px solid #f0c36d!important;border-radius:6px!important;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 4px 12px rgba(15,24,36,.12)!important}
.craft-article-body table,.event-article-body table{width:100%!important;max-width:100%!important;border-collapse:collapse!important;margin:14px 0 20px!important;background:#ffffff!important;border:1px solid #c5b084!important;font-size:.9rem!important;white-space:normal!important;table-layout:auto;box-shadow:0 4px 14px rgba(15,24,36,.06)!important}
.craft-article-body th,.craft-article-body td,.event-article-body th,.event-article-body td{border:1px solid #dfd2b8!important;padding:10px 12px!important;color:#162536!important;white-space:normal!important;vertical-align:middle!important;line-height:1.58}
.craft-article-body thead th,.craft-article-body tr:first-child th,.craft-article-body td.craft-th-cell,.event-article-body thead th,.event-article-body tr:first-child th{background:linear-gradient(180deg,#162436 0%,#101b29 100%)!important;color:#ffd88a!important;border-color:#2d435e!important;font-weight:700!important;text-transform:none!important;font-size:.88rem!important}
.craft-article-body thead th *,.craft-article-body tr:first-child th *,.craft-article-body td.craft-th-cell *,.event-article-body thead th *,.event-article-body tr:first-child th *{color:#ffd88a!important;background:transparent!important;border:0!important;padding:0!important}
.craft-article-body tbody tr:nth-child(odd),.event-article-body tbody tr:nth-child(odd){background:#ffffff!important}
.craft-article-body tbody tr:nth-child(even),.event-article-body tbody tr:nth-child(even){background:#f8f3e8!important}
.craft-article-body tbody tr:hover,.event-article-body tbody tr:hover{background:#efe6d2!important}
.craft-article-body td:not(.craft-th-cell),.event-article-body td:not(.craft-th-cell){background:transparent!important;color:#162536!important}
.craft-article-body td:not(.craft-th-cell) *,.event-article-body td:not(.craft-th-cell) *{color:#162536!important}
.craft-article-body th img,.craft-article-body td img,.event-article-body th img,.event-article-body td img{vertical-align:middle;max-width:100%;height:auto;border-radius:4px}
.craft-article-body td:not(.craft-th-cell) p,.event-article-body td:not(.craft-th-cell) p{margin:4px 0!important;text-align:center;font-weight:700;color:#142234!important}
.craft-banner-img{display:block;margin:12px auto;max-width:100%;height:auto;border-radius:8px;border:1px solid #c89f4d;box-shadow:0 8px 22px rgba(15,24,36,.18)}
.craft-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;padding-top:18px;border-top:2px solid #d5c4a1}
.craft-pager-btn{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;padding:12px 16px!important;border-radius:8px!important;background:linear-gradient(135deg,#132030 0%,#1d3148 100%)!important;border:1px solid #c89f4d!important;color:#f1f5f9!important;text-align:left!important;transition:all .2s ease!important;box-shadow:0 6px 16px rgba(15,24,36,.14)!important}
.craft-pager-btn.next{align-items:flex-end!important;text-align:right!important}
.craft-pager-btn small{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#cbd5e1!important;font-weight:600}
.craft-pager-btn strong{font-size:13px;color:#ffd88a!important}
.craft-pager-btn:hover{background:linear-gradient(135deg,#1b2d43 0%,#27415f 100%)!important;border-color:#f0c36d!important;transform:translateY(-2px)!important;box-shadow:0 8px 20px rgba(15,24,36,.24)!important}
@media(max-width:640px){.craft-pager{grid-template-columns:1fr}}

/* Events Hub & Live Schedule Styles */
.text-ctc-red{color:#dc2626!important}
.craft-nav-btn.active .text-ctc-red{color:#fca5a5!important}
.event-ctc-highlight{border-color:rgba(220,38,38,.32)!important}
.server-clock-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;background:#132030;border:1px solid #c89f4d;color:#e2edf8;font-size:.82rem;box-shadow:0 4px 12px rgba(15,26,40,.16)}
.server-clock-pill strong{color:#ffd88a;font-family:monospace;font-size:.9rem;letter-spacing:.04em}
.events-hub-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.event-hub-tab{padding:9px 15px!important;border-radius:8px!important;background:#fff!important;border:1px solid #d5cab6!important;color:#1b2636!important;font-weight:700!important;font-size:.84rem!important;transition:all .18s ease!important}
.event-hub-tab:hover{border-color:#b88933!important;background:#fdf8ee!important;color:#8f600c!important;transform:translateY(-1px)}
.event-hub-tab.active{background:linear-gradient(135deg,#132030 0%,#1d3148 100%)!important;border-color:#c89f4d!important;color:#f4d9a0!important;box-shadow:0 6px 16px rgba(15,26,40,.22)!important}
.event-hub-tab.event-tab-ctc{border-color:rgba(220,38,38,.38)!important;color:#b91c1c!important}
.event-hub-tab.event-tab-ctc.active{color:#fecaca!important;border-color:#ef4444!important}
.event-quick-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding:10px 12px;background:#f8f4ec;border:1px solid #dfd5c3;border-radius:8px}
.event-pill{padding:5px 10px!important;border-radius:6px!important;background:#fff!important;border:1px solid #dcd2c0!important;color:#2b3b4e!important;font-size:.76rem!important;font-weight:600!important;transition:all .15s ease!important}
.event-pill:hover{border-color:#b88933!important;color:#8f600c!important;background:#fefaf0!important}
.event-pill.active{background:#162436!important;border-color:#c89f4d!important;color:#ffd88a!important}
.event-idx{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#162436;color:#f4d9a0;font-weight:700;font-size:.75rem}
.event-row-name{color:#152232;font-size:.9rem;display:block}
.event-row-meta{font-size:.76rem;color:#526377;margin-top:2px}
.event-slots-wrap{display:flex;flex-wrap:wrap;gap:4px;max-width:340px}
.event-slot-chip{display:inline-block;padding:2px 6px;border-radius:4px;background:#eef2f6;border:1px solid #cfd8e3;color:#334155;font-family:monospace;font-size:.75rem;font-weight:600}
.event-slot-chip.next{background:#162436;border-color:#c89f4d;color:#ffd88a;box-shadow:0 0 8px rgba(200,159,77,.35)}
.event-countdown-pill{display:inline-block;padding:4px 10px;border-radius:99px;background:#eef2f6;border:1px solid #cbd5e1;color:#1e293b;font-weight:700;font-size:.78rem;white-space:nowrap}
.event-countdown-pill.is-soon{background:#fef3c7;border-color:#f59e0b;color:#92400e}
.event-countdown-pill.is-live{background:#fee2e2;border-color:#ef4444;color:#b91c1c;animation:pulseLive 1.4s infinite}
@keyframes pulseLive{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.35)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}
.event-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.event-summary-card{display:flex;flex-direction:column;justify-content:space-between;background:#fff!important;border:1px solid #dfd5c3!important;border-radius:10px;overflow:hidden;padding:0!important}
.event-card-thumb{height:156px;background:radial-gradient(circle at 50% 45%,#172638 0%,#0b121b 100%);overflow:hidden;border-bottom:1px solid rgba(212,166,74,.28);display:grid;place-items:center;padding:6px}
.event-card-thumb img{width:100%;height:100%;object-fit:contain;border-radius:6px;transition:transform .3s ease}
.event-summary-card:hover .event-card-thumb img{transform:scale(1.04)}
.event-card-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.event-card-body h3{margin:0;font-size:1rem;color:#152232}
.event-card-meta{font-size:.78rem!important;color:#475569!important;margin:0!important;line-height:1.45}
.event-card-desc{font-size:.82rem!important;color:#334155!important;margin:4px 0 8px!important;line-height:1.5;flex:1}
.event-info-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:14px;padding:12px 16px;background:linear-gradient(135deg,#132030 0%,#1c2f46 100%)!important;border:1px solid #c89f4d!important;border-radius:8px;font-size:.85rem;color:#f1f5f9!important;box-shadow:0 4px 14px rgba(15,24,36,.14)}
.event-info-strip span{color:#cbd5e1!important;display:block;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.event-info-strip strong{color:#ffd88a!important;font-weight:700}
.event-article-body img{max-width:100%;height:auto;border-radius:8px;border:1px solid #c89f4d;margin:8px auto;display:inline-block;box-shadow:0 6px 18px rgba(15,24,36,.15)}
.craft-article-body [style*="#7c4303"],.craft-article-body [style*="#ffd280"]{color:#7c4303!important;font-weight:800!important;background:rgba(184,137,51,.15);padding:3px 9px;border-radius:4px;border-left:3px solid #b88933;display:inline-block;margin:4px 0}
.craft-article-body [style*="blue"],.craft-article-body [style*="#035388"],.event-article-body [style*="blue"],.event-article-body [style*="#035388"],.event-article-body [style*="#0000cd"],.event-article-body [style*="#0000ff"]{color:#035388!important;font-weight:700!important}
.craft-article-body [style*="red"],.craft-article-body [style*="#b91c1c"],.craft-article-body [style*="#ff6b6b"],.event-article-body [style*="red"],.event-article-body [style*="#b91c1c"],.event-article-body [style*="#ff0000"],.event-article-body [style*="#FF0000"]{color:#b91c1c!important;font-weight:700!important}

/* Sidebar Drop-Menu Headings High-Contrast Enforcement */
.panel-heading .section-kicker,.craft-heading-text .section-kicker{color:#ffd88a!important;font-size:9.5px!important;line-height:1.35!important;letter-spacing:1.2px!important;display:block}
.panel-heading h2,aside .panel-heading h2,.craft-heading-text h2{color:#ffffff!important;font-size:16.5px!important;font-weight:700!important;margin:3px 0 2px!important;text-shadow:0 1px 4px rgba(0,0,0,.65)!important}
.drop-hint-label{color:#f3d89c!important;font-size:11px!important;font-weight:600!important;margin-top:3px!important}
.craft-sidebar-panel:not(.is-collapsed) .drop-hint-label{color:#86efac!important}

/* === MU ONLINE 6.9 ORNAMENTAL & AUTH PAGES V15 === */
:root {
 --panel: #fcf9f2;
 --panel-alt: #f4efe4;
 --line: #d5c7ad;
}
body {
 background:
  radial-gradient(ellipse at 50% 480px, rgba(217,181,108,.18) 0%, transparent 60%),
  linear-gradient(180deg, #0d1520 0%, #142030 560px, #e8e0d2 680px, #efe9de 100%) !important;
}
main {
 grid-template-columns: 312px minmax(0, 1fr) !important;
 align-items: start;
}
aside {
 position: static !important;
 align-self: start;
}

/* Header Auth Group */
.header-auth-group {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}
.header-account {
 font-size: 12px;
 padding: 8px 13px;
 border-radius: 5px;
 gap: 6px;
}
.header-account.active {
 border-color: var(--gold-bright);
 box-shadow: 0 0 12px rgba(217,181,108,.32);
}

/* Fix Sidebar Collapsible Drop Menus (22 Events & 12 Crafting) */
.craft-sidebar-body {
 max-height: 2600px !important;
 opacity: 1;
 overflow: visible !important;
 transition: max-height .42s cubic-bezier(.4,0,.2,1), opacity .28s ease, padding .28s ease;
 background: linear-gradient(180deg, #fcf9f2 0%, #f3ece0 100%) !important;
 padding: 12px;
}
.craft-sidebar-panel.is-collapsed .craft-sidebar-body {
 max-height: 0 !important;
 opacity: 0 !important;
 overflow: hidden !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
 pointer-events: none;
}
.drop-hint-label {
 display: block;
 font-size: 10.5px;
 color: #d5c29a;
 margin-top: 3px;
 font-weight: 500;
}
.craft-sidebar-panel:not(.is-collapsed) .drop-hint-label {
 color: #86efac;
}
.mu-sidebar-select {
 margin: 0 0 8px 0 !important;
 padding: 8px 10px !important;
 font-size: 12px !important;
 font-weight: 600;
 border-radius: 6px !important;
 background: linear-gradient(180deg, #162436, #101b29) !important;
 border: 1px solid #c89f4d !important;
 color: #f4d9a0 !important;
 cursor: pointer;
}
.mu-sidebar-select option {
 background: #121e2d;
 color: #f4d9a0;
}

/* Ornamental MU Frames & Dividers */
.mu-ornate-panel,
article,
.rank-panel,
.kpi-card {
 background: linear-gradient(180deg, #fdfbf6 0%, #f5efe2 100%) !important;
 border: 1px solid #cbb78e !important;
 box-shadow: inset 0 0 0 1px rgba(255,252,245,.85), 0 10px 26px rgba(15,24,36,.09) !important;
 position: relative;
}
.kpi-card {
 border-top: 3px solid #b88933 !important;
}
article h3 {
 display: flex;
 align-items: center;
 gap: 8px;
 color: #1b2838;
}
article h3::before {
 content: '';
 width: 16px;
 height: 16px;
 flex-shrink: 0;
 background: url(/assets/mu-theme/images_content_icon_h4.png) center/contain no-repeat;
}
.craft-content-card h3::before,
.featured-story h3::before,
.news-row h3::before,
.mu-showcase-caption h3::before,
.mu-auth-hero-overlay h3::before,
.mu-auth-card-head h3::before {
 display: none !important;
}
.mu-kicker-star {
 width: 12px;
 height: 12px;
 vertical-align: -1px;
 margin-right: 3px;
}
.section-head {
 border-bottom: 2px solid #cbb78e !important;
 position: relative;
 padding-bottom: 12px !important;
}
.section-head::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: -2px;
 width: 140px;
 height: 2px;
 background: linear-gradient(90deg, #b88933, #f0d28c, transparent);
}
.mu-ornamental-divider {
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 26px 0 22px;
 position: relative;
 text-align: center;
}
.mu-ornamental-divider::before,
.mu-ornamental-divider::after {
 content: '';
 flex: 1;
 height: 1px;
 background: linear-gradient(90deg, transparent, #b88933, transparent);
}
.mu-ornamental-divider span {
 padding: 5px 18px;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 2.2px;
 color: #f4d9a0;
 background: linear-gradient(135deg, #132030, #1d3147);
 border: 1px solid #c89f4d;
 border-radius: 999px;
 box-shadow: 0 4px 14px rgba(15,24,36,.15);
}
.panel-heading-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
}
.mu-crest-badge,
.mu-online-pill {
 font-size: 9px;
 font-weight: 800;
 letter-spacing: .8px;
 padding: 2px 7px;
 border-radius: 99px;
 background: rgba(217,181,108,.18);
 border: 1px solid rgba(217,181,108,.5);
 color: var(--gold-light);
}
.mu-online-pill {
 color: #86efac;
 border-color: rgba(134,239,172,.45);
 background: rgba(22,101,52,.35);
}

/* Server Panel Artwork & Animated Jewels */
.mu-server-art-strip {
 position: relative;
 border-bottom: 1px solid #cbb78e;
 background: radial-gradient(circle at 50% 25%, #1a2c42 0%, #0b131e 100%);
}
.mu-server-poster-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 7px;
 padding: 10px 10px 8px;
}
.mu-server-poster-card {
 margin: 0;
 aspect-ratio: 248 / 362;
 border-radius: 6px;
 overflow: hidden;
 border: 1px solid rgba(217,181,108,.55);
 background: #091018;
 box-shadow: 0 5px 14px rgba(0,0,0,.45);
 cursor: pointer;
 transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.mu-server-poster-card:hover {
 transform: translateY(-2px);
 border-color: #f4d9a0;
 box-shadow: 0 8px 18px rgba(0,0,0,.6), 0 0 12px rgba(217,181,108,.32);
}
.mu-server-poster-card img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
}
.mu-jewel-float-bar {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 5px;
 padding: 8px 10px;
 background: linear-gradient(90deg, #101b29, #192a3e, #101b29);
 border-top: 1px solid rgba(200,159,77,.42);
}
.mu-jewel-float-bar span {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 font-size: 10.5px;
 font-weight: 700;
 color: #f4d9a0;
 background: rgba(255,255,255,.06);
 border: 1px solid rgba(217,181,108,.32);
 border-radius: 5px;
 padding: 4px 5px;
}
.mu-jewel-pill-ic {
 width: 22px;
 height: 22px;
 border-radius: 4px;
 background: radial-gradient(circle, #1d3148 0%, #0b131e 100%);
 border: 1px solid rgba(217,181,108,.4);
 display: inline-grid;
 place-items: center;
 flex-shrink: 0;
}
.mu-jewel-float-bar img {
 width: 16px;
 height: 16px;
 object-fit: contain;
 display: block;
}
.mini-jewel-ic {
 width: 16px;
 height: 16px;
 object-fit: contain;
 vertical-align: middle;
}
.jewel-card-ic {
 width: 30px;
 height: 30px;
 object-fit: contain;
 display: block;
 margin: 0 auto 6px;
 filter: drop-shadow(0 2px 6px rgba(184,137,51,.35));
}

/* Home Page 6-Slide MU Feature Banner Showcase & Jewel Ribbon */
.mu-home-banner-section {
 margin-bottom: 10px;
 border-radius: 10px;
 overflow: hidden;
 border: 1px solid #c89f4d;
 background: #0f1926;
 box-shadow: 0 14px 34px rgba(12,20,31,.22);
}
.mu-showcase-stage {
 position: relative;
 min-height: 246px;
 background: radial-gradient(ellipse at 72% 50%, #1a2d44 0%, #0b131e 72%);
 overflow: hidden;
}
.mu-showcase-slide {
 display: none;
 position: relative;
 min-height: 246px;
 align-items: center;
 justify-content: space-between;
}
.mu-showcase-slide.active {
 display: flex;
 animation: content-in .35s ease both;
}
.mu-showcase-bg-art {
 position: absolute;
 top: 0;
 right: 150px;
 bottom: 0;
 width: 58%;
 height: 100%;
 object-fit: contain;
 object-position: center right;
 opacity: .36;
 pointer-events: none;
 filter: saturate(1.12) contrast(1.04);
}
.mu-showcase-caption {
 position: relative;
 z-index: 2;
 padding: 26px 20px 26px 30px;
 flex: 1 1 auto;
 min-width: 0;
 background: linear-gradient(90deg, rgba(9,15,24,.96) 0%, rgba(9,15,24,.84) 64%, rgba(9,15,24,.15) 100%);
 min-height: 246px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 gap: 8px;
}
.mu-showcase-caption h3 {
 margin: 2px 0;
 font: 700 24px/1.25 var(--serif);
 color: #ffd88a !important;
 text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.mu-showcase-caption p {
 margin: 0 0 6px !important;
 color: #dbe6f2 !important;
 font-size: 13px !important;
 max-width: 470px;
}
.mu-showcase-visual {
 position: relative;
 z-index: 2;
 flex-shrink: 0;
 padding: 14px 26px 38px 12px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.mu-showcase-poster-frame {
 width: 134px;
 aspect-ratio: 248 / 362;
 border-radius: 8px;
 overflow: hidden;
 border: 1.5px solid #e2bf73;
 background: #091019;
 box-shadow: 0 10px 26px rgba(0,0,0,.68), 0 0 18px rgba(217,181,108,.28);
 transition: transform .25s ease, border-color .25s ease;
}
.mu-showcase-poster-frame:hover {
 transform: scale(1.03);
 border-color: #fff3d1;
}
.mu-showcase-poster {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
}
.mu-showcase-controls {
 position: absolute;
 right: 18px;
 bottom: 10px;
 z-index: 3;
 display: flex;
 gap: 6px;
}
.mu-showcase-dot {
 padding: 4px 8px !important;
 font-size: 10px !important;
 font-weight: 800 !important;
 border-radius: 4px !important;
 background: rgba(12,20,31,.82) !important;
 border: 1px solid rgba(217,181,108,.4) !important;
 color: #cbd5e1 !important;
}
.mu-showcase-dot.active {
 background: linear-gradient(135deg, #b88933, #e2bf73) !important;
 color: #161209 !important;
 border-color: #fff3d1 !important;
}
.mu-jewel-ribbon {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 background: linear-gradient(180deg, #152334, #0f1a28);
 border-top: 1px solid rgba(200,159,77,.45);
}
.mu-jewel-ribbon-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 11px 12px;
 border-right: 1px solid rgba(200,159,77,.2);
 cursor: pointer;
 transition: background .2s ease;
}
.mu-jewel-ribbon-item:last-child {
 border-right: 0;
}
.mu-jewel-ribbon-item:hover {
 background: rgba(217,181,108,.12);
}
.mu-jewel-ic-box {
 width: 38px;
 height: 38px;
 border-radius: 8px;
 background: radial-gradient(circle at 50% 35%, #213752 0%, #0b131e 100%);
 border: 1px solid rgba(217,181,108,.55);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.35);
 display: grid;
 place-items: center;
 flex-shrink: 0;
}
.mu-jewel-ic-box img {
 width: 24px;
 height: 24px;
 object-fit: contain;
 display: block;
 filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.mu-jewel-ic-box.is-chaos img {
 width: 26px;
 height: 26px;
 transform: scale(1.15);
}
.mu-jewel-ribbon-item strong {
 display: block;
 font-size: 11.5px;
 color: #f4d9a0;
 line-height: 1.25;
}
.mu-jewel-ribbon-item small {
 display: block;
 font-size: 10px;
 color: #9fb2c7;
 margin-top: 2px;
}
@media (max-width: 980px) {
 .mu-jewel-ribbon {
  grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 600px) {
 .mu-jewel-ribbon {
  grid-template-columns: 1fr;
 }
}

/* Sidebar Logged-Out Warrior Gate Widget */
#identity {
 padding: 16px !important;
}
.mu-sidebar-auth-box {
 display: flex;
 flex-direction: column;
 gap: 12px;
}
.mu-sidebar-auth-banner {
 position: relative;
 border-radius: 7px;
 overflow: hidden;
 border: 1px solid #c89f4d;
 background: #101a28;
 height: 68px;
}
.mu-sidebar-auth-banner img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: .55;
}
.mu-sidebar-auth-overlay {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 12px;
 background: linear-gradient(90deg, rgba(12,20,30,.92), rgba(18,30,45,.75));
}
.mu-auth-crest {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: linear-gradient(135deg, #b88933, #e6c478);
 color: #161108;
 font-size: 16px;
 font-weight: 800;
 flex-shrink: 0;
 box-shadow: 0 0 12px rgba(217,181,108,.45);
}
.mu-sidebar-auth-overlay strong {
 display: block;
 font-size: 11.5px;
 letter-spacing: .6px;
 color: #f4d9a0;
}
.mu-sidebar-auth-overlay small {
 display: block;
 font-size: 10.5px;
 color: #cbd5e1;
}
.mu-sidebar-login-form {
 max-width: 100% !important;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.mu-input-label {
 font-size: 11.5px !important;
 font-weight: 700 !important;
 color: #1e2f42 !important;
 margin: 0 !important;
}
.mu-input-wrap {
 position: relative;
 display: flex;
 align-items: center;
 margin-top: 5px;
}
.mu-input-icon {
 position: absolute;
 left: 11px;
 font-size: 13px;
 pointer-events: none;
 opacity: .8;
}
.mu-input-wrap input {
 margin: 0 !important;
 padding: 10px 36px 10px 34px !important;
 font-size: 13px !important;
 border-radius: 6px !important;
 border: 1px solid #bfae8e !important;
 background: #ffffff !important;
 color: #142234 !important;
 width: 100%;
}
.mu-input-wrap input:focus {
 border-color: #b88933 !important;
 box-shadow: 0 0 0 3px rgba(184,137,51,.2) !important;
}
.mu-pw-eye {
 position: absolute;
 right: 6px;
 width: 28px;
 height: 28px;
 padding: 0 !important;
 min-width: 0 !important;
 border: 0 !important;
 background: transparent !important;
 color: #52657a !important;
 font-size: 14px !important;
 border-radius: 4px !important;
}
.mu-pw-eye:hover {
 background: rgba(184,137,51,.12) !important;
 color: #8f600c !important;
}
.mu-btn-full {
 width: 100%;
 justify-content: center;
 padding: 11px 14px !important;
 font-size: 12.5px !important;
}
.mu-sidebar-auth-split {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 9.5px;
 font-weight: 800;
 letter-spacing: 1px;
 color: #786646;
 text-transform: uppercase;
}
.mu-sidebar-auth-split::before,
.mu-sidebar-auth-split::after {
 content: '';
 flex: 1;
 height: 1px;
 background: #d5c5a8;
}
.mu-sidebar-auth-links {
 display: flex;
 flex-direction: column;
 gap: 7px;
}
.mu-btn-outline-gold {
 width: 100%;
 padding: 9px 12px !important;
 font-size: 11.5px !important;
 font-weight: 700 !important;
 background: linear-gradient(135deg, #152334, #1e3248) !important;
 border: 1px solid #c89f4d !important;
 color: #f4d9a0 !important;
}
.mu-btn-outline-gold:hover {
 background: linear-gradient(135deg, #1d3046, #28425e) !important;
 border-color: #e5c172 !important;
}
.mu-btn-ghost-dark {
 width: 100%;
 padding: 8px 12px !important;
 font-size: 11px !important;
 background: #efe7d6 !important;
 border: 1px solid #cbb78e !important;
 color: #2b3b4e !important;
}
.mu-btn-ghost-dark:hover {
 background: #e5d9c1 !important;
 border-color: #b88933 !important;
}

/* Dedicated Login (#login) & Registration (#register) Pages */
.mu-auth-page {
 display: flex;
 flex-direction: column;
 gap: 18px;
}
.mu-auth-hero-banner {
 position: relative;
 border-radius: 10px;
 overflow: hidden;
 border: 1px solid #c89f4d;
 min-height: 196px;
 background: radial-gradient(ellipse at 75% 50%, #1a2d44 0%, #0b131e 72%);
 display: flex;
 align-items: center;
 box-shadow: 0 12px 30px rgba(12,20,31,.22);
}
.mu-auth-hero-banner > img {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: auto;
 width: 62%;
 height: 100%;
 object-fit: contain;
 object-position: right center;
 opacity: .78;
 pointer-events: none;
}
.mu-auth-hero-overlay {
 position: relative;
 z-index: 2;
 padding: 26px 32px;
 background: linear-gradient(90deg, rgba(10,17,26,.96) 0%, rgba(10,17,26,.82) 58%, rgba(10,17,26,.12) 100%);
 width: 100%;
}
.mu-auth-hero-badge {
 display: inline-block;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 1.6px;
 padding: 4px 10px;
 border-radius: 4px;
 background: rgba(217,181,108,.18);
 border: 1px solid #d9b56c;
 color: #f4d9a0;
 margin-bottom: 8px;
}
.mu-auth-hero-overlay h3 {
 margin: 0 0 6px;
 font: 700 26px/1.25 var(--serif);
 color: #f7f2e7;
}
.mu-auth-hero-overlay p {
 margin: 0;
 color: #cbd6e2;
 font-size: 13px;
 max-width: 620px;
}
.mu-auth-layout {
 display: grid;
 grid-template-columns: minmax(0, 1.35fr) minmax(290px, .9fr);
 gap: 20px;
 align-items: start;
}
.mu-auth-card {
 margin: 0 !important;
 padding: 26px 28px !important;
 border-radius: 10px !important;
 border-top: 3px solid #b88933 !important;
}
.mu-auth-card-head {
 display: flex;
 align-items: center;
 gap: 14px;
 padding-bottom: 16px;
 margin-bottom: 18px;
 border-bottom: 1px solid #d8c8a8;
}
.mu-auth-sigil {
 width: 48px;
 height: 48px;
 border-radius: 10px;
 display: grid;
 place-items: center;
 background: linear-gradient(135deg, #142234, #20354e);
 border: 1px solid #c89f4d;
 color: #f4d9a0;
 font-size: 22px;
 flex-shrink: 0;
 box-shadow: 0 6px 16px rgba(15,24,36,.16);
}
.mu-auth-card-head h3 {
 margin: 3px 0 0 !important;
 font: 700 21px/1.25 var(--serif);
 color: #162536;
}
.mu-pro-form {
 max-width: 100% !important;
 display: flex;
 flex-direction: column;
 gap: 14px;
}
.mu-form-section-title {
 display: flex;
 align-items: center;
 gap: 9px;
 font-size: 12px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .8px;
 color: #7c5410;
 padding: 7px 12px;
 background: rgba(184,137,51,.12);
 border-left: 3px solid #b88933;
 border-radius: 0 5px 5px 0;
 margin-top: 4px;
}
.mu-form-section-title span {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 display: inline-grid;
 place-items: center;
 background: #162436;
 color: #f4d9a0;
 font-size: 10px;
}
.mu-field-group label {
 margin-bottom: 3px;
 color: #182738;
 font-size: 12.5px;
 font-weight: 700;
}
.mu-field-hint {
 display: block;
 font-size: 11px;
 color: #5c6f84;
 margin-top: 5px;
 line-height: 1.4;
}
.mu-security-strip {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 padding: 10px 12px;
 background: #efe7d6;
 border: 1px solid #d5c5a8;
 border-radius: 6px;
 font-size: 11px;
 font-weight: 700;
 color: #3b4d61;
}
.mu-security-strip span {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding-right: 10px;
 border-right: 1px solid #cbb78e;
}
.mu-security-strip span:last-child {
 border-right: 0;
 padding-right: 0;
}
.mu-submit-xl {
 width: 100%;
 padding: 13px 20px !important;
 font-size: 13.5px !important;
 font-weight: 800 !important;
 letter-spacing: .6px;
 border-radius: 6px !important;
 margin-top: 4px !important;
}
.mu-auth-switch-bar {
 margin-top: 20px;
 padding-top: 16px;
 border-top: 1px dashed #cbb78e;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 font-size: 12.5px;
 color: #475b70;
 font-weight: 600;
}
.mu-switch-btn {
 background: linear-gradient(135deg, #152334, #1f334a) !important;
 border: 1px solid #c89f4d !important;
 color: #f4d9a0 !important;
 padding: 9px 15px !important;
 font-size: 12px !important;
}
.mu-switch-btn:hover {
 background: linear-gradient(135deg, #1d3148, #2a4462) !important;
}
.mu-auth-side-card {
 position: static !important;
 background: linear-gradient(165deg, #132030 0%, #0d1622 100%) !important;
 border: 1px solid #c89f4d !important;
 border-radius: 10px;
 overflow: hidden;
 color: #e2ecf5;
 box-shadow: 0 14px 32px rgba(12,20,31,.22);
}
.mu-side-art-wrap {
 position: relative;
 height: 168px;
 overflow: hidden;
 border-bottom: 1px solid rgba(200,159,77,.45);
 background: radial-gradient(circle at 30% 50%, #1a2d44 0%, #091019 100%);
 display: flex;
 align-items: center;
 justify-content: flex-end;
 padding: 10px 16px;
}
.mu-side-art-bg {
 position: absolute;
 inset: 0;
 width: 78%;
 height: 100%;
 object-fit: contain;
 object-position: left center;
 opacity: .62;
 pointer-events: none;
}
.mu-side-art-poster {
 position: relative;
 z-index: 2;
 height: 146px;
 width: auto;
 aspect-ratio: 248 / 362;
 object-fit: contain;
 border-radius: 6px;
 border: 1px solid #e2bf73;
 background: #091019;
 box-shadow: 0 6px 18px rgba(0,0,0,.65);
}
.mu-side-tag {
 position: absolute;
 left: 12px;
 bottom: 10px;
 z-index: 3;
 font-size: 9.5px;
 font-weight: 800;
 letter-spacing: 1.2px;
 padding: 3px 8px;
 border-radius: 4px;
 background: rgba(11,18,28,.9);
 border: 1px solid #d9b56c;
 color: #f4d9a0;
}
.mu-side-body {
 padding: 18px 20px;
}
.mu-side-body h4 {
 margin: 0 0 12px;
 font-size: 14px;
 color: #ffd88a;
 letter-spacing: .3px;
}
.mu-starter-wings-showcase {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 6px;
 margin-bottom: 14px;
}
.mu-starter-wings-showcase img {
 width: 100%;
 aspect-ratio: 125 / 100;
 height: auto;
 object-fit: contain;
 padding: 3px;
 border-radius: 5px;
 border: 1px solid rgba(217,181,108,.45);
 background: #091019;
}
.mu-perk-list {
 list-style: none;
 margin: 0 0 16px;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.mu-perk-list li {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 9px 10px;
 border-radius: 6px;
 background: rgba(255,255,255,.04);
 border: 1px solid rgba(217,181,108,.2);
}
.mu-perk-ic {
 width: 32px;
 height: 32px;
 border-radius: 7px;
 background: radial-gradient(circle, #1d3148 0%, #0b131e 100%);
 border: 1px solid rgba(217,181,108,.45);
 display: grid;
 place-items: center;
 flex-shrink: 0;
 margin-top: 1px;
}
.mu-perk-list li img {
 width: 20px;
 height: 20px;
 object-fit: contain;
 flex-shrink: 0;
 display: block;
}
.mu-perk-list strong {
 display: block;
 font-size: 12px;
 color: #f4d9a0;
}
.mu-perk-list small {
 display: block;
 font-size: 11px;
 color: #b8c7d6;
 line-height: 1.45;
 margin-top: 2px;
}
.mu-side-cta-box {
 padding: 12px 14px;
 border-radius: 7px;
 background: rgba(217,181,108,.1);
 border: 1px solid rgba(217,181,108,.35);
 text-align: center;
}
.mu-side-cta-box p {
 margin: 0 0 9px !important;
 font-size: 11.5px !important;
 color: #f4d9a0 !important;
 font-weight: 600;
}
.empty-gate-actions {
 display: flex;
 justify-content: center;
 gap: 10px;
 flex-wrap: wrap;
}
.mu-footer-divider {
 height: 18px;
 background: url(/assets/mu-theme/images_line-footer.png) center/contain no-repeat;
 opacity: .85;
 margin-bottom: 14px;
}
@media (max-width: 980px) {
 .mu-auth-layout {
  grid-template-columns: 1fr;
 }
}


/* === V16: SUBPAGE HIGH-CONTRAST HEADERS & RICH INTERACTIVE IN-GAME MARKET === */
body:not([data-view=home]) {
 background:
  radial-gradient(ellipse at 50% 230px, rgba(217,181,108,.2) 0%, transparent 55%),
  linear-gradient(180deg, #0d1520 0%, #142030 245px, #ece4d6 305px, #f2ece1 100%) !important;
}
.section-head {
 background: linear-gradient(180deg, #fdfbf6 0%, #f3ece0 100%) !important;
 border: 1px solid #cbb78e !important;
 border-left: 4px solid #b88933 !important;
 border-radius: 8px !important;
 padding: 14px 20px !important;
 margin-bottom: 16px !important;
 box-shadow: 0 6px 18px rgba(15,24,36,.08) !important;
}
.section-head::after {
 display: none !important;
}
.section-head .section-kicker {
 color: #8f600c !important;
 font-size: 10px !important;
 font-weight: 800 !important;
}
.section-head h2 {
 color: #142234 !important;
 margin: 2px 0 0 !important;
 text-shadow: none !important;
}
#content > p {
 background: linear-gradient(180deg, #fdfbf6 0%, #f5efe2 100%);
 border: 1px solid #d5c5a8;
 border-left: 3px solid #c89f4d;
 border-radius: 7px;
 padding: 12px 16px;
 color: #1e2f42 !important;
 font-size: 13px !important;
 font-weight: 500;
 margin: 0 0 16px !important;
 box-shadow: 0 4px 12px rgba(15,24,36,.05);
}
#content > h2 {
 color: #142234 !important;
 background: linear-gradient(90deg, rgba(253,251,246,.95), rgba(243,236,224,.85));
 padding: 10px 16px;
 border-left: 4px solid #b88933;
 border-radius: 6px;
 border: 1px solid #cbb78e;
}

/* Rich In-Game Market (#market) Styles */
.mu-market-hero-panel {
 border-top: 3px solid #b88933 !important;
 margin-bottom: 16px !important;
}
.mu-market-toolbar-card {
 background: linear-gradient(180deg, #fdfbf6 0%, #f4ede0 100%);
 border: 1px solid #cbb78e;
 border-radius: 9px;
 padding: 16px 18px;
 margin-bottom: 18px;
 box-shadow: 0 6px 18px rgba(15,24,36,.07);
}
.mu-market-filters-row {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr;
 gap: 10px;
}
.mu-market-filters-row input,
.mu-market-filters-row select {
 margin: 0 !important;
 background: #ffffff !important;
 border: 1px solid #bfae8e !important;
 color: #142234 !important;
 font-weight: 600;
}
.mu-market-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px;
}
.mu-market-card {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 gap: 12px;
 padding: 18px 20px !important;
 margin: 0 !important;
 border-radius: 10px !important;
 background: linear-gradient(165deg, #132030 0%, #0d1622 100%) !important;
 border: 1px solid rgba(200,159,77,.55) !important;
 color: #e2ecf5 !important;
 box-shadow: 0 12px 28px rgba(10,16,26,.22) !important;
 transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mu-market-card:hover {
 transform: translateY(-3px);
 border-color: #f0d28c !important;
 box-shadow: 0 16px 34px rgba(10,16,26,.32) !important;
}
.mu-market-card.mu-item-quality-excellent {
 border-top: 3px solid #22c55e !important;
}
.mu-market-card.mu-item-quality-ancient {
 border-top: 3px solid #38bdf8 !important;
}
.mu-market-card.mu-item-quality-jewel,
.mu-market-card.mu-item-quality-wing {
 border-top: 3px solid #f59e0b !important;
}
.mu-market-card-top {
 display: flex;
 align-items: flex-start;
 gap: 14px;
}
.mu-market-icon-box {
 position: relative;
 width: 58px;
 height: 58px;
 border-radius: 10px;
 background: radial-gradient(circle at 50% 50%, #1e324a 0%, #0b121c 100%);
 border: 1px solid rgba(217,181,108,.6);
 display: grid;
 place-items: center;
 flex-shrink: 0;
 box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
.mu-market-icon-box.mu-item-quality-excellent {
 border-color: #4ade80;
 box-shadow: 0 0 14px rgba(74,222,128,.22);
}
.mu-market-icon-box.mu-item-quality-ancient {
 border-color: #38bdf8;
 box-shadow: 0 0 14px rgba(56,189,248,.25);
}
.mu-market-item-img {
 width: 38px;
 height: 38px;
 object-fit: contain;
 filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.mu-market-item-glyph {
 font-size: 26px;
}
.mu-market-lvl-pill {
 position: absolute;
 right: -5px;
 bottom: -5px;
 background: linear-gradient(135deg, #b88933, #f0d28c);
 color: #161108;
 font-size: 10px;
 font-weight: 800;
 padding: 1px 6px;
 border-radius: 99px;
 border: 1px solid #fff3d1;
}
.mu-market-title-col {
 flex: 1;
 min-width: 0;
}
.mu-market-meta-row {
 display: flex;
 align-items: center;
 gap: 7px;
 flex-wrap: wrap;
 margin-bottom: 4px;
}
.mu-market-id {
 font-family: monospace;
 font-size: 11px;
 font-weight: 700;
 color: #ffd88a;
 background: rgba(217,181,108,.16);
 border: 1px solid rgba(217,181,108,.4);
 padding: 1px 6px;
 border-radius: 4px;
}
.mu-market-cat {
 font-size: 10.5px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .6px;
 color: #93c5fd;
}
.mu-market-item-title {
 margin: 0 0 4px !important;
 font: 700 16.5px/1.3 var(--serif) !important;
 color: #f8fafc !important;
}
.mu-market-item-title::before {
 display: none !important;
}
.mu-market-item-title.mu-item-quality-excellent {
 color: #4ade80 !important;
}
.mu-market-item-title.mu-item-quality-ancient {
 color: #38bdf8 !important;
}
.mu-market-item-title.mu-item-quality-jewel,
.mu-market-item-title.mu-item-quality-wing {
 color: #ffd88a !important;
}
.mu-tbl-item-name.mu-item-quality-excellent {
 color: #15803d !important;
}
.mu-tbl-item-name.mu-item-quality-ancient {
 color: #0369a1 !important;
}
.mu-tbl-item-name.mu-item-quality-jewel,
.mu-tbl-item-name.mu-item-quality-wing {
 color: #9a6b13 !important;
}
.mu-market-stat-line {
 font-size: 11.5px;
 color: #cbd5e1;
}
.mu-market-badges-wrap {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}
.mu-market-badge {
 font-size: 11px;
 font-weight: 700;
 padding: 3px 8px;
 border-radius: 5px;
}
.m-badge-std {
 background: rgba(255,255,255,.08);
 border: 1px solid rgba(203,213,225,.28);
 color: #e2e8f0;
}
.m-badge-luck {
 background: rgba(56,189,248,.15);
 border: 1px solid rgba(56,189,248,.45);
 color: #7dd3fc;
}
.m-badge-exl {
 background: rgba(34,197,94,.16);
 border: 1px solid rgba(74,222,128,.5);
 color: #86efac;
}
.m-badge-anc {
 background: rgba(14,165,233,.22);
 border: 1px solid #38bdf8;
 color: #bae6fd;
}
.mu-market-exl-list {
 list-style: none;
 margin: 0;
 padding: 8px 11px;
 background: rgba(9,15,24,.68);
 border: 1px solid rgba(74,222,128,.28);
 border-radius: 6px;
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 4px 10px;
 font-size: 11px;
 color: #86efac;
}
.mu-market-info-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 padding: 8px 10px;
 background: rgba(255,255,255,.04);
 border: 1px solid rgba(217,181,108,.18);
 border-radius: 6px;
 font-size: 11.5px;
 color: #cbd5e1;
}
.mu-market-info-grid strong {
 color: #f8fafc;
}
.mu-market-price-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
 padding-top: 10px;
 border-top: 1px solid rgba(217,181,108,.25);
 margin-top: auto;
}
.mu-market-price-label {
 display: block;
 font-size: 9.5px;
 font-weight: 800;
 letter-spacing: 1px;
 color: #9fb2c7;
}
.mu-market-price-val {
 display: flex;
 align-items: center;
 gap: 6px;
 margin-top: 2px;
}
.mu-price-jewel-ic {
 width: 22px;
 height: 22px;
 object-fit: contain;
}
.mu-market-price-val strong {
 font: 700 20px/1 var(--serif);
 color: #ffd88a;
}
.mu-market-price-val span {
 font-size: 12px;
 font-weight: 700;
 color: #f4d9a0;
}
.mu-market-actions {
 display: flex;
 align-items: center;
 gap: 7px;
}
.mu-market-actions form {
 margin: 0 !important;
}
.mu-market-buy-btn {
 padding: 9px 14px !important;
 font-size: 12px !important;
 font-weight: 800 !important;
 min-width: 0 !important;
 margin: 0 !important;
}
.mu-market-cancel-btn {
 padding: 9px 11px !important;
 font-size: 11.5px !important;
 min-width: 0 !important;
 margin: 0 !important;
 background: rgba(239,68,68,.18) !important;
 border: 1px solid rgba(248,113,113,.5) !important;
 color: #fecaca !important;
}
.mu-market-cancel-btn:hover {
 background: rgba(239,68,68,.32) !important;
}
.mu-tbl-price {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 color: #9a6b13;
}
@media (max-width: 960px) {
 .mu-market-grid,
 .mu-market-filters-row,
 .mu-market-exl-list,
 .mu-market-info-grid {
  grid-template-columns: 1fr;
 }
}


/* === V17: FINAL HIGH-CONTRAST ENFORCEMENT FOR ALL EVENTS, CRAFTING GUIDES & DROP MENUS === */
.panel-heading .section-kicker,
.craft-heading-text .section-kicker {
 color: #ffd88a !important;
 font-size: 9.5px !important;
 line-height: 1.35 !important;
 letter-spacing: 1.1px !important;
 display: block;
}
.panel-heading h2,
aside .panel-heading h2,
.craft-heading-text h2 {
 color: #ffffff !important;
 font-size: 16.5px !important;
 font-weight: 700 !important;
 margin: 3px 0 2px !important;
 text-shadow: 0 1px 4px rgba(0,0,0,.65) !important;
}
.drop-hint-label {
 color: #f3d89c !important;
 font-size: 11px !important;
 font-weight: 600 !important;
 margin-top: 3px !important;
}
.craft-sidebar-panel:not(.is-collapsed) .drop-hint-label {
 color: #86efac !important;
}
article.craft-content-card {
 background: linear-gradient(180deg, #fdfbf6 0%, #f5efe2 100%) !important;
 border: 1px solid #c89f4d !important;
 border-top: 3px solid #b88933 !important;
 color: #162536 !important;
}
article.craft-content-card .craft-article-head h3 {
 color: #122031 !important;
 font-weight: 800 !important;
}
article.craft-content-card .craft-article-body,
article.craft-content-card .event-article-body,
article.craft-content-card .craft-article-body p,
article.craft-content-card .event-article-body p,
article.craft-content-card .craft-article-body div:not(.event-info-strip),
article.craft-content-card .event-article-body div:not(.event-info-strip),
article.craft-content-card .craft-article-body ul,
article.craft-content-card .craft-article-body ol,
article.craft-content-card .craft-article-body li,
article.craft-content-card .event-article-body ul,
article.craft-content-card .event-article-body ol,
article.craft-content-card .event-article-body li,
article.craft-content-card .craft-article-body span,
article.craft-content-card .event-article-body span,
article.craft-content-card .craft-article-body center,
article.craft-content-card .event-article-body center {
 color: #162536 !important;
}
article.craft-content-card .craft-article-body b,
article.craft-content-card .craft-article-body strong,
article.craft-content-card .event-article-body b,
article.craft-content-card .event-article-body strong {
 color: #0d1826 !important;
 font-weight: 700 !important;
}
article.craft-content-card .craft-article-body i,
article.craft-content-card .craft-article-body em,
article.craft-content-card .event-article-body i,
article.craft-content-card .event-article-body em {
 color: #334155 !important;
 font-weight: 600 !important;
}
article.craft-content-card .craft-article-body h3.craft-subtitle,
article.craft-content-card .craft-article-body h2,
article.craft-content-card .craft-article-body h4,
article.craft-content-card .event-article-body h2,
article.craft-content-card .event-article-body h3,
article.craft-content-card .event-article-body h4 {
 background: linear-gradient(90deg, #132030 0%, #1d3148 75%, #243b55 100%) !important;
 color: #ffd88a !important;
 border: 1px solid #c89f4d !important;
 border-left: 4px solid #f0c36d !important;
 border-radius: 6px !important;
 padding: 10px 16px !important;
}
article.craft-content-card .craft-article-body thead th,
article.craft-content-card .craft-article-body tr:first-child th,
article.craft-content-card .craft-article-body td.craft-th-cell,
article.craft-content-card .event-article-body thead th,
article.craft-content-card .event-article-body tr:first-child th,
article.craft-content-card .craft-article-body thead th *,
article.craft-content-card .craft-article-body tr:first-child th *,
article.craft-content-card .craft-article-body td.craft-th-cell *,
article.craft-content-card .event-article-body thead th *,
article.craft-content-card .event-article-body tr:first-child th * {
 color: #ffd88a !important;
}
article.craft-content-card .craft-article-body [style*="#7c4303"],
article.craft-content-card .craft-article-body [style*="#ffd280"] {
 color: #7c4303 !important;
 font-weight: 800 !important;
 background: rgba(184,137,51,.15) !important;
 padding: 3px 9px !important;
 border-radius: 4px !important;
 border-left: 3px solid #b88933 !important;
 display: inline-block;
 margin: 4px 0;
}
article.craft-content-card .craft-article-body [style*="blue"],
article.craft-content-card .craft-article-body [style*="#035388"],
article.craft-content-card .event-article-body [style*="blue"],
article.craft-content-card .event-article-body [style*="#035388"] {
 color: #035388 !important;
 font-weight: 700 !important;
}
article.craft-content-card .craft-article-body [style*="red"],
article.craft-content-card .craft-article-body [style*="#b91c1c"],
article.craft-content-card .craft-article-body [style*="#ff6b6b"],
article.craft-content-card .event-article-body [style*="red"],
article.craft-content-card .event-article-body [style*="#b91c1c"],
article.craft-content-card .event-article-body [style*="#ff0000"],
article.craft-content-card .event-article-body [style*="#FF0000"] {
 color: #b91c1c !important;
 font-weight: 700 !important;
}

/* === V18: MARKET ITEM IMAGES, ALL 7 LINES & IN-GAME HOVER TOOLTIP === */
.mu-market-card {
 overflow: visible !important;
 position: relative;
}
.mu-market-icon-box {
 width: 74px !important;
 height: 74px !important;
 border-radius: 12px !important;
 cursor: pointer;
 position: relative;
 transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mu-market-icon-box:hover {
 transform: translateY(-2px) scale(1.04);
 border-color: #ffd88a !important;
 box-shadow: 0 0 20px rgba(240,195,109,.45) !important;
 z-index: 60;
}
.mu-market-item-img {
 width: 58px !important;
 height: 58px !important;
 object-fit: contain !important;
 filter: drop-shadow(0 3px 8px rgba(0,0,0,.75));
}
.mu-market-hover-hint {
 position: absolute;
 left: 50%;
 bottom: -8px;
 transform: translateX(-50%);
 background: rgba(11,18,28,.94);
 border: 1px solid rgba(217,181,108,.6);
 color: #ffd88a;
 font-size: 9px;
 font-weight: 700;
 padding: 1px 6px;
 border-radius: 99px;
 white-space: nowrap;
 pointer-events: none;
}
.mu-market-lines-box {
 background: rgba(7,12,20,.78);
 border: 1px solid rgba(96,165,250,.32);
 border-radius: 8px;
 padding: 9px 12px;
}
.mu-market-lines-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 6px;
 padding-bottom: 5px;
 border-bottom: 1px dashed rgba(148,163,184,.22);
 font-size: 11px;
 font-weight: 800;
 color: #ffd88a;
}
.mu-market-lines-head small {
 font-weight: 600;
 color: #93c5fd;
 font-size: 10.5px;
}
.mu-market-exl-list {
 list-style: none;
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: 0 !important;
 display: grid;
 grid-template-columns: 1fr !important;
 gap: 4px !important;
 font-size: 12px !important;
 color: #7dd3fc !important;
 font-weight: 600;
}
.mu-market-exl-list li {
 line-height: 1.4;
}

/* Authentic MU Online In-Game Item Hover Tooltip */
.mu-ingame-tooltip {
 position: absolute;
 left: 0;
 top: calc(100% + 12px);
 width: 320px;
 padding: 14px 16px;
 background: rgba(6, 10, 18, 0.96);
 border: 2px solid #c99b42;
 outline: 1px solid rgba(255, 224, 150, 0.35);
 border-radius: 8px;
 box-shadow: 0 18px 42px rgba(0, 0, 0, 0.88), inset 0 0 22px rgba(201, 155, 66, 0.12);
 text-align: center;
 pointer-events: none;
 opacity: 0;
 visibility: hidden;
 transform: translateY(6px);
 transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
 z-index: 999;
}
.mu-market-icon-box:hover .mu-ingame-tooltip,
.mu-market-icon-box:focus .mu-ingame-tooltip {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.mu-tt-title {
 font: 800 15px/1.35 var(--sans);
 color: #ffd88a;
 margin-bottom: 3px;
 text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.mu-tt-title.mu-item-quality-excellent {
 color: #4ade80;
}
.mu-tt-title.mu-item-quality-ancient {
 color: #38bdf8;
}
.mu-tt-cat {
 font-size: 11px;
 color: #94a3b8;
 margin-bottom: 9px;
}
.mu-tt-section {
 padding: 7px 0;
 border-top: 1px solid rgba(217,181,108,.22);
 font-size: 12px;
 line-height: 1.48;
}
.mu-tt-base-line {
 color: #f8fafc;
 font-weight: 600;
}
.mu-tt-req-line {
 color: #fca5a5;
 font-weight: 600;
}
.mu-tt-opt-line {
 color: #7dd3fc;
 font-weight: 700;
}
.mu-tt-footer {
 margin-top: 7px;
 padding-top: 7px;
 border-top: 1px solid rgba(217,181,108,.28);
 font-size: 11px;
 color: #e2e8f0;
}
.mu-tt-footer strong {
 color: #ffd88a;
}

/* === V23: ADMIN COMMAND CENTER, MULTI-LAYER VAULT GATE & WEBSHOP VISUAL BUILDER === */
.admin-vault-gate {
 max-width: 820px;
 margin: 16px auto;
}
.admin-vault-card {
 border: 2px solid #c89f4d !important;
 box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.admin-vault-badge-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 margin-bottom: 12px;
}
.admin-security-layers {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px;
 margin: 14px 0 18px;
}
.sec-layer-item {
 background: rgba(15, 25, 38, 0.06);
 border: 1px solid rgba(184, 137, 51, 0.45);
 border-left: 4px solid #b88933;
 border-radius: 6px;
 padding: 10px 12px;
}
.sec-layer-item strong {
 display: block;
 color: #122031;
 font-size: 13px;
 margin-bottom: 4px;
}
.sec-layer-item span {
 display: block;
 font-size: 12px;
 color: #334155;
 line-height: 1.45;
}
.admin-unlock-form {
 background: rgba(15, 25, 38, 0.04);
 border: 1px dashed rgba(184, 137, 51, 0.65);
 border-radius: 8px;
 padding: 16px;
}
.admin-command-bar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
 background: linear-gradient(90deg, #101c2b 0%, #192b40 100%);
 border: 1px solid #c89f4d;
 border-radius: 8px;
 padding: 11px 16px;
 color: #f8fafc;
}
.admin-vault-status {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
}
.admin-vault-status small {
 color: #cbd5e1;
 font-size: 12.5px;
}
.admin-vault-status strong {
 color: #ffd88a;
}
.admin-vault-status code {
 background: rgba(255,255,255,.1);
 color: #7dd3fc;
 padding: 2px 6px;
 border-radius: 4px;
}
.admin-command-actions {
 display: flex;
 align-items: center;
 gap: 8px;
}
.admin-nav-tabs {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 8px;
 margin-top: 16px;
 background: linear-gradient(180deg, #111c2b 0%, #0b131e 100%);
 padding: 10px;
 border-radius: 8px;
 border: 1px solid #c89f4d;
}
.admin-nav-tab {
 background: rgba(255,255,255,.05) !important;
 color: #e2e8f0 !important;
 border: 1px solid rgba(217,181,108,.3) !important;
 padding: 11px 12px !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 border-radius: 6px !important;
 text-align: left !important;
 transition: all .16s ease !important;
 margin: 0 !important;
}
.admin-nav-tab:hover {
 background: rgba(217,181,108,.18) !important;
 color: #ffd88a !important;
 border-color: #d9b56c !important;
}
.admin-nav-tab.active {
 background: linear-gradient(180deg, #e5b962 0%, #b88428 100%) !important;
 color: #0f1722 !important;
 border-color: #ffe29a !important;
 box-shadow: 0 4px 14px rgba(217,181,108,.35) !important;
}
.admin-health-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 12px;
 margin-top: 12px;
}
.admin-health-card {
 background: #fffdf8;
 border: 1px solid rgba(184,137,51,.45);
 border-left: 4px solid #16a34a;
 border-radius: 7px;
 padding: 12px 14px;
}
.admin-health-card.is-offline {
 border-left-color: #dc2626;
 background: #fff5f5;
}
.health-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 8px;
 margin-bottom: 5px;
}
.health-meta {
 font-size: 12px;
 color: #475569;
}
.admin-shop-builder-grid {
 display: grid;
 grid-template-columns: 1.35fr 0.85fr;
 gap: 18px;
 align-items: start;
 margin-top: 12px;
}
.admin-shop-preview-col {
 position: sticky;
 top: 84px;
 background: linear-gradient(180deg, #142234 0%, #0d1724 100%);
 border: 1px solid #c89f4d;
 border-radius: 8px;
 padding: 14px;
 color: #f8fafc;
}
.admin-shop-preview-col h4 {
 color: #ffd88a !important;
 margin: 0 0 4px !important;
}
.admin-shop-preview-col p small {
 color: #cbd5e1 !important;
}
.admin-exl-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 6px 12px;
 background: rgba(15,25,38,.05);
 border: 1px solid rgba(184,137,51,.35);
 border-radius: 6px;
 padding: 10px 12px;
 margin-top: 8px;
}
.admin-check-strip {
 display: flex;
 flex-direction: column;
 gap: 4px;
 justify-content: center;
}
.is-disabled-card {
 opacity: 0.68;
 filter: grayscale(0.25);
}
@media (max-width: 960px) {
 .admin-security-layers,
 .admin-nav-tabs,
 .admin-health-grid,
 .admin-shop-builder-grid,
 .admin-exl-grid {
  grid-template-columns: 1fr;
 }
}

/* ==========================================================================
   OPTIMIZED COMPACT WEBSHOP & ADMIN CATALOG (PAGINATED 3-COL GRID + TABLE)
   ========================================================================== */
.shop-top-control-row {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 background: linear-gradient(180deg, rgba(16, 26, 40, 0.96) 0%, rgba(11, 18, 28, 0.98) 100%);
 border: 1px solid rgba(201, 155, 66, 0.55);
 border-radius: 8px;
 padding: 10px 14px;
 margin: 10px 0 12px;
 color: #f8fafc;
}
.shop-char-picker-bar {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 font-size: 13px;
 color: #fde68a;
}
.shop-char-select {
 min-width: 220px;
 padding: 6px 10px !important;
 background: #0f172a !important;
 color: #fff !important;
 border: 1px solid #d4a449 !important;
 border-radius: 6px !important;
 font-weight: 700;
}
.shop-view-toggle-group {
 display: flex;
 align-items: center;
 gap: 6px;
}

/* Compact 3-Column Webshop Grid */
.mu-shop-compact-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 gap: 12px !important;
 align-items: stretch;
}
.mu-shop-compact-card {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 gap: 10px;
 padding: 12px !important;
 border-radius: 9px !important;
 position: relative;
 overflow: visible !important;
 transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mu-shop-compact-card:hover {
 z-index: 35;
 transform: translateY(-2px);
 border-color: #f5c265 !important;
}
.mu-shop-compact-top {
 display: grid;
 grid-template-columns: 64px minmax(0, 1fr);
 gap: 10px;
 align-items: center;
}
.mu-icon-box-md {
 width: 64px !important;
 height: 64px !important;
 min-height: 64px !important;
 padding: 4px !important;
 border-radius: 8px !important;
}
.mu-icon-box-md .mu-market-icon {
 max-width: 52px !important;
 max-height: 52px !important;
}
.mu-icon-box-md .mu-market-hover-hint {
 font-size: 8px !important;
 padding: 0 5px !important;
 bottom: 2px !important;
}
.mu-icon-box-sm {
 width: 44px !important;
 height: 44px !important;
 min-height: 44px !important;
 padding: 3px !important;
 border-radius: 6px !important;
 display: inline-flex !important;
}
.mu-icon-box-sm .mu-market-icon {
 max-width: 36px !important;
 max-height: 36px !important;
}
.mu-icon-box-sm .mu-market-lvl-badge {
 top: 2px !important;
 right: 2px !important;
 font-size: 9px !important;
 padding: 0 4px !important;
}
/* Keep tooltip inside screen when hovering 3rd column card */
.mu-shop-compact-grid > .mu-shop-compact-card:nth-child(3n) .mu-ingame-tooltip {
 left: auto;
 right: 0;
}

.mu-shop-compact-info {
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 4px;
}
.mu-shop-compact-cat {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
 font-size: 11px;
 color: #94a3b8;
}
.mu-shop-compact-title {
 margin: 0 !important;
 font-size: 14px !important;
 font-weight: 800 !important;
 line-height: 1.28 !important;
 color: #fef3c7 !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.mu-shop-compact-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 margin-top: 2px;
}
.mu-shop-compact-badges .mu-opt-badge {
 font-size: 10px !important;
 padding: 1px 6px !important;
}

.mu-shop-compact-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding-top: 8px;
 border-top: 1px dashed rgba(201, 155, 66, 0.28);
}
.mu-shop-compact-price {
 display: flex;
 align-items: baseline;
 gap: 4px;
}
.mu-shop-compact-price strong {
 font-size: 16px;
 font-weight: 900;
 color: #fbbf24;
}
.mu-shop-compact-price small {
 font-size: 10.5px;
 font-weight: 700;
 color: #93c5fd;
}
.shop-inline-buy-form {
 display: flex !important;
 align-items: center;
 gap: 5px;
 margin: 0 !important;
}
.shop-qty-mini {
 width: 46px !important;
 padding: 4px 5px !important;
 text-align: center;
 font-size: 12px !important;
 font-weight: 700;
 border-radius: 5px !important;
}
.admin-inline-price-form {
 display: inline-flex !important;
 align-items: center;
 gap: 4px;
 margin: 0 !important;
}
.admin-inline-price-form input[name="price"] {
 width: 78px !important;
 padding: 4px 6px !important;
 font-size: 12px !important;
 font-weight: 700;
}

/* High-Density Table Mode */
.mu-shop-table-wrap {
 display: block !important;
}
.admin-shop-compact-table td {
 vertical-align: middle !important;
 padding: 7px 10px !important;
}
.admin-shop-compact-table tr:hover {
 background: rgba(201, 155, 66, 0.08);
}

/* Pagination Bar */
.mu-shop-pagination {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 14px;
 padding: 10px 14px;
 background: linear-gradient(180deg, rgba(16, 26, 40, 0.94) 0%, rgba(10, 16, 26, 0.96) 100%);
 border: 1px solid rgba(201, 155, 66, 0.5);
 border-radius: 8px;
 color: #e2e8f0;
 font-size: 13px;
}
.mu-page-info strong {
 color: #ffd88a;
}
.mu-page-btns {
 display: flex;
 align-items: center;
 gap: 5px;
 flex-wrap: wrap;
}
.mu-page-btn {
 min-width: 34px;
 height: 32px;
 padding: 0 10px;
 border-radius: 6px;
 border: 1px solid rgba(201, 155, 66, 0.45);
 background: rgba(15, 23, 42, 0.9);
 color: #f8fafc;
 font-size: 12.5px;
 font-weight: 700;
 cursor: pointer;
 transition: all .15s ease;
}
.mu-page-btn:hover:not(:disabled) {
 border-color: #ffd88a;
 background: rgba(201, 155, 66, 0.25);
 color: #ffd88a;
}
.mu-page-btn.active {
 background: linear-gradient(180deg, #e0b254 0%, #b37e22 100%);
 border-color: #fde68a;
 color: #111827;
 box-shadow: 0 0 10px rgba(224, 178, 84, 0.45);
}
.mu-page-btn:disabled {
 opacity: 0.4;
 cursor: not-allowed;
}
.mu-page-dots {
 color: #94a3b8;
 padding: 0 4px;
 font-weight: 700;
}

@media (max-width: 1100px) {
 .mu-shop-compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }
}
@media (max-width: 680px) {
 .mu-shop-compact-grid {
  grid-template-columns: 1fr !important;
 }
 .mu-shop-pagination {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
 }
 .mu-page-btns {
  justify-content: center;
 }
}

/* === V25: 19 MILITARY RANKS (QUAN HAM VIET V2) & 6 DEPOSIT TITLES (F8) === */
.mu-rank-badge-cell {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 4px 10px 4px 6px;
 background: linear-gradient(135deg, rgba(16, 26, 40, 0.94) 0%, rgba(28, 43, 64, 0.94) 100%);
 border: 1px solid rgba(201, 155, 66, 0.55);
 border-radius: 8px;
 color: #f8fafc !important;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
 vertical-align: middle;
}
.mu-rank-badge-cell.is-compact {
 padding: 3px 8px 3px 5px;
 gap: 6px;
}
.mu-rank-badge-cell.rank-tier-general {
 border-color: #f59e0b;
 background: linear-gradient(135deg, #271705 0%, #452708 100%);
}
.mu-rank-badge-cell.rank-tier-supreme {
 border-color: #facc15;
 background: linear-gradient(135deg, #3b0d0d 0%, #5c1818 55%, #422505 100%);
 box-shadow: 0 0 14px rgba(250, 204, 21, 0.45);
}
.mu-rank-ic {
 width: 34px;
 height: 34px;
 object-fit: contain;
 flex-shrink: 0;
 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.mu-rank-badge-cell.is-compact .mu-rank-ic {
 width: 28px;
 height: 28px;
}
.mu-rank-txt {
 display: flex;
 flex-direction: column;
 line-height: 1.25;
 text-align: left;
}
.mu-rank-top-row {
 display: flex;
 align-items: center;
 gap: 6px;
}
.mu-rank-txt strong {
 color: #ffd88a !important;
 font-size: 12.5px;
 font-weight: 800;
}
.mu-rank-stars {
 color: #fde047 !important;
 font-size: 10.5px;
 font-weight: 700;
 background: rgba(250, 204, 21, 0.16);
 padding: 1px 5px;
 border-radius: 4px;
}
.mu-rank-bonus {
 color: #93c5fd !important;
 font-size: 10.5px;
 font-weight: 600;
}
.mu-title-badge-cell {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 4px 10px;
 background: linear-gradient(135deg, #172336 0%, #0f172a 100%);
 border: 1px solid rgba(96, 165, 250, 0.48);
 border-radius: 8px;
 color: #f8fafc !important;
}
.mu-title-badge-cell.is-compact {
 padding: 3px 8px;
 gap: 6px;
}
.mu-title-ic {
 height: 26px;
 max-width: 96px;
 object-fit: contain;
 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
}
.mu-title-badge-cell strong {
 color: #7dd3fc !important;
 font-size: 12px;
 font-weight: 800;
}
.mu-deposit-titles-showcase {
 display: grid;
 grid-template-columns: 1fr;
 gap: 10px;
 max-height: 480px;
 overflow-y: auto;
 padding-right: 4px;
}
.mu-deposit-title-card {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 12px;
 background: linear-gradient(135deg, #101927 0%, #19283d 100%);
 border: 1px solid rgba(201, 155, 66, 0.45);
 border-radius: 10px;
 color: #f8fafc;
}
.mu-dt-img-wrap {
 width: 130px;
 height: 48px;
 background: rgba(6, 10, 18, 0.85);
 border: 1px solid rgba(201, 155, 66, 0.4);
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 flex-shrink: 0;
 padding: 4px;
}
.mu-dt-img-wrap img {
 max-width: 118px;
 max-height: 40px;
 object-fit: contain;
}
.mu-dt-tier {
 position: absolute;
 top: -6px;
 left: 6px;
 background: #c89f4d;
 color: #0f172a;
 font-size: 9.5px;
 font-weight: 800;
 padding: 1px 6px;
 border-radius: 99px;
}
.mu-dt-info {
 flex: 1;
 min-width: 0;
}
.mu-dt-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 5px;
}
.mu-dt-head strong {
 color: #ffd88a !important;
 font-size: 13.5px;
}
.mu-dt-stats {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 12px;
 font-size: 11.5px;
 color: #cbd5e1 !important;
}
.mu-dt-stats b {
 color: #38bdf8 !important;
}

/* Admin Ranks & Titles Manager */
.admin-titles-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 14px;
}
.admin-title-edit-card {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.admin-title-preview-box {
 height: 68px;
 background: radial-gradient(circle at center, #1e293b 0%, #090e17 100%);
 border: 1px solid #c89f4d;
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 6px;
}
.admin-title-preview-box img {
 max-width: 190px;
 max-height: 54px;
 object-fit: contain;
 filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.85));
}
.admin-ranks-table td {
 vertical-align: middle !important;
 padding: 6px 8px !important;
}
.admin-inline-inp {
 width: 100%;
 padding: 6px 8px !important;
 font-size: 12.5px !important;
 margin: 0 !important;
}
@media (max-width: 1100px) {
 .admin-titles-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}
@media (max-width: 720px) {
 .admin-titles-grid {
  grid-template-columns: 1fr;
 }
}

/* === V30: COMMERCIAL MOMO & VIETQR TOPUP CENTER (CLEAN & SPACIOUS) === */
.mu-promo-event-banner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 14px 18px;
 margin-bottom: 16px;
 border-radius: 12px;
 background: linear-gradient(135deg, #2d1226 0%, #1c1326 50%, #141e30 100%) !important;
 border: 1px solid rgba(244, 114, 182, 0.55) !important;
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
 color: #f8fafc !important;
 flex-wrap: wrap;
}
.mu-promo-event-left {
 display: flex;
 flex-direction: column;
 gap: 4px;
}
.mu-promo-event-left strong {
 color: #fde047 !important;
 font-size: 15px;
 font-weight: 800;
}
.mu-promo-event-left span {
 color: #cbd5e1 !important;
 font-size: 12.5px;
}
.mu-promo-event-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
}

.mu-topup-hero-strip {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 14px;
 margin-bottom: 18px;
}
.mu-topup-stat-card {
 position: relative;
 overflow: hidden;
 padding: 14px 18px;
 border-radius: 12px;
 background: linear-gradient(145deg, #101928 0%, #0b121e 100%) !important;
 border: 1px solid rgba(201, 155, 66, 0.45) !important;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
 color: #f8fafc !important;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 gap: 6px;
}
.mu-topup-stat-card.is-vip-highlight {
 background: linear-gradient(145deg, #221808 0%, #111927 100%) !important;
 border-color: rgba(245, 158, 11, 0.6) !important;
}
.mu-topup-stat-label {
 font-size: 11px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.07em;
 color: #94a3b8 !important;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
}
.mu-topup-stat-value {
 font-size: 21px;
 font-weight: 900;
 color: #ffd88a !important;
 line-height: 1.2;
}
.mu-topup-stat-sub {
 font-size: 12px;
 color: #cbd5e1 !important;
}

.mu-topup-panel {
 background: linear-gradient(165deg, #0f1726 0%, #0a101b 100%) !important;
 border: 1px solid rgba(201, 155, 66, 0.5) !important;
 border-radius: 14px !important;
 padding: 22px !important;
 color: #f1f5f9 !important;
 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
 margin-bottom: 18px;
}
.mu-topup-panel-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding-bottom: 14px;
 margin-bottom: 18px;
 border-bottom: 1px solid rgba(201, 155, 66, 0.22);
 flex-wrap: wrap;
}
.mu-topup-panel-head h3 {
 color: #ffd88a !important;
 font-size: 18px !important;
 margin: 2px 0 4px !important;
}
.mu-topup-panel-head p {
 color: #cbd5e1 !important;
 font-size: 13px !important;
 margin: 0 !important;
}
.mu-momo-brand-pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 12px;
 border-radius: 99px;
 background: linear-gradient(135deg, #d82d8b 0%, #a50064 100%);
 color: #ffffff !important;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.05em;
 text-transform: uppercase;
}

.mu-topup-main-split {
 display: grid;
 grid-template-columns: 1fr 270px;
 gap: 24px;
 align-items: center;
}
.mu-pkg-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 10px;
 margin-bottom: 14px;
}
.mu-pkg-card {
 position: relative;
 padding: 12px 10px;
 border-radius: 10px;
 background: rgba(20, 30, 48, 0.92) !important;
 border: 1px solid rgba(148, 163, 184, 0.26) !important;
 color: #f8fafc !important;
 text-align: center;
 cursor: pointer;
 transition: all 0.16s ease;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
}
.mu-pkg-card:hover {
 border-color: #f59e0b !important;
 transform: translateY(-1px);
}
.mu-pkg-card.active {
 background: linear-gradient(155deg, rgba(66, 38, 10, 0.95) 0%, rgba(28, 19, 11, 0.98) 100%) !important;
 border: 1.5px solid #fbbf24 !important;
 box-shadow: 0 0 16px rgba(251, 191, 36, 0.3);
}
.mu-pkg-bonus {
 position: absolute;
 top: -8px;
 right: 8px;
 background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
 color: #ffffff !important;
 font-size: 10px;
 font-weight: 800;
 padding: 1px 7px;
 border-radius: 99px;
}
.mu-pkg-vnd {
 font-size: 14px;
 font-weight: 800;
 color: #f8fafc !important;
}
.mu-pkg-vp {
 font-size: 13px;
 font-weight: 800;
 color: #fbbf24 !important;
}
.mu-pkg-tag {
 font-size: 11px;
 color: #cbd5e1 !important;
 font-weight: 600;
}

.mu-custom-amt-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin: 12px 0;
 padding: 10px 14px;
 border-radius: 10px;
 background: rgba(9, 14, 24, 0.88);
 border: 1px solid rgba(201, 155, 66, 0.35);
}
.mu-custom-amt-bar label {
 margin: 0 !important;
 font-size: 12.5px !important;
 color: #e2e8f0 !important;
 font-weight: 600;
 white-space: nowrap;
}
.mu-custom-amt-bar input {
 max-width: 190px;
 margin: 0 !important;
 padding: 7px 12px !important;
 background: #090e18 !important;
 border: 1px solid rgba(251, 191, 36, 0.55) !important;
 border-radius: 8px !important;
 color: #fde047 !important;
 font-size: 15px !important;
 font-weight: 800 !important;
 text-align: right;
}

.mu-topup-summary-box,
.mu-qr-kv-list {
 display: grid;
 gap: 8px;
 margin: 12px 0;
}
.mu-topup-summary-row,
.mu-qr-kv-item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 14px;
 border-radius: 9px;
 background: rgba(9, 14, 24, 0.88);
 border: 1px solid rgba(148, 163, 184, 0.24);
}
.mu-topup-summary-row.is-memo,
.mu-qr-kv-item.is-memo {
 background: rgba(83, 20, 59, 0.38);
 border-color: rgba(244, 114, 182, 0.55);
}
.mu-topup-summary-label,
.mu-qr-kv-label {
 font-size: 12.5px;
 color: #cbd5e1 !important;
 white-space: nowrap;
}
.mu-topup-summary-val,
.mu-qr-kv-val {
 font-size: 14.5px;
 font-weight: 800;
 color: #f8fafc !important;
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 justify-content: flex-end;
}
.mu-topup-summary-row.is-memo .mu-topup-summary-val strong,
.mu-qr-kv-item.is-memo .mu-qr-kv-val strong {
 color: #fde047 !important;
 font-size: 15.5px;
 letter-spacing: 0.04em;
}
.mu-copy-mini-btn {
 padding: 4px 10px !important;
 font-size: 11.5px !important;
 font-weight: 700 !important;
 border-radius: 6px !important;
 background: rgba(201, 155, 66, 0.22) !important;
 border: 1px solid rgba(201, 155, 66, 0.55) !important;
 color: #ffd88a !important;
 cursor: pointer;
 white-space: nowrap;
}
.mu-copy-mini-btn:hover {
 background: rgba(201, 155, 66, 0.4) !important;
}

.mu-qr-showcase-box {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 10px;
 padding: 16px;
 border-radius: 14px;
 background: linear-gradient(160deg, rgba(24, 34, 54, 0.95) 0%, rgba(12, 18, 30, 0.98) 100%);
 border: 1px solid rgba(236, 72, 153, 0.45);
 text-align: center;
}
.mu-qr-showcase-title {
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.06em;
 color: #fbcfe8 !important;
}
.mu-qr-frame {
 background: #ffffff;
 padding: 10px;
 border-radius: 12px;
 border: 3px solid #ec4899;
 box-shadow: 0 8px 24px rgba(216, 45, 139, 0.28);
 width: 100%;
 max-width: 224px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
}
.mu-qr-frame img {
 width: 100%;
 height: auto;
 aspect-ratio: 1 / 1;
 object-fit: contain;
 display: block;
 border-radius: 6px;
}
.mu-qr-scan-badge {
 display: inline-block;
 padding: 4px 12px;
 border-radius: 99px;
 background: linear-gradient(90deg, #a50064 0%, #d82d8b 100%);
 color: #ffffff !important;
 font-size: 11px;
 font-weight: 800;
}
.mu-qr-steps-mini {
 font-size: 11.5px;
 color: #cbd5e1 !important;
 line-height: 1.5;
 text-align: left;
 margin: 0;
 padding-left: 16px;
}

.mu-momo-confirm-btn {
 width: 100%;
 padding: 13px 18px !important;
 border-radius: 10px !important;
 background: linear-gradient(135deg, #e11d48 0%, #be185d 50%, #d97706 100%) !important;
 border: 1px solid #fbcfe8 !important;
 color: #ffffff !important;
 font-size: 14.5px !important;
 font-weight: 900 !important;
 cursor: pointer;
 box-shadow: 0 8px 20px rgba(225, 29, 72, 0.35);
 transition: all 0.2s ease;
}
.mu-momo-confirm-btn:hover:not(:disabled) {
 transform: translateY(-1px);
 filter: brightness(1.08);
}

/* Harmonious & Symmetrical Exchange Panel */
.mu-exchange-panel .mu-topup-panel-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 18px;
 flex-wrap: nowrap;
}
.mu-exchange-panel .mu-topup-panel-head > div:first-child {
 flex: 1;
 min-width: 0;
}
.mu-exchange-balance-strip {
 display: inline-flex;
 align-items: center;
 gap: 14px;
 padding: 10px 18px;
 background: linear-gradient(135deg, rgba(9, 14, 24, 0.96), rgba(17, 26, 42, 0.94));
 border: 1px solid rgba(201, 155, 66, 0.45);
 border-radius: 12px;
 width: fit-content;
 flex-shrink: 0;
 margin-left: auto;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28);
}
.mu-exchange-bal-item {
 display: flex;
 flex-direction: column;
 gap: 2px;
 line-height: 1.25;
 white-space: nowrap;
}
.mu-exchange-bal-item span {
 font-size: 10.5px;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 color: #94a3b8 !important;
 font-weight: 700;
}
.mu-exchange-bal-item strong {
 font-size: 14.5px;
 font-weight: 800;
}
.mu-exchange-bal-sep {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: rgba(201, 155, 66, 0.16);
 border: 1px solid rgba(201, 155, 66, 0.4);
 color: #fbbf24 !important;
 font-size: 13px;
 font-weight: 800;
 flex-shrink: 0;
}

.mu-exchange-horiz-body {
 display: flex;
 flex-direction: column;
 gap: 14px;
 padding: 16px;
 border-radius: 14px;
 background: linear-gradient(180deg, rgba(9, 14, 24, 0.82) 0%, rgba(13, 21, 35, 0.92) 100%);
 border: 1px solid rgba(201, 155, 66, 0.3);
 width: 100%;
}
.mu-exchange-preset-bar {
 display: flex;
 flex-direction: column;
 gap: 10px;
 width: 100%;
}
.mu-exchange-preset-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
 font-size: 12.5px;
 color: #cbd5e1 !important;
 font-weight: 700;
}
.mu-exchange-rate-tag {
 font-size: 12px;
 color: #94a3b8 !important;
 padding: 3px 10px;
 border-radius: 99px;
 background: rgba(15, 23, 42, 0.85);
 border: 1px solid rgba(56, 189, 248, 0.32);
}
.mu-exchange-rate-tag strong {
 color: #38bdf8 !important;
}
.mu-exchange-presets {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(185px, 1.35fr);
 gap: 10px;
 margin: 0;
 width: 100%;
}
.mu-exchange-pill {
 height: 40px !important;
 padding: 0 12px !important;
 border-radius: 9px !important;
 background: rgba(23, 34, 52, 0.92) !important;
 border: 1px solid rgba(148, 163, 184, 0.32) !important;
 color: #e2e8f0 !important;
 font-size: 12.5px !important;
 font-weight: 800 !important;
 cursor: pointer;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 5px !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 transition: all 0.16s ease !important;
}
.mu-exchange-pill:hover {
 border-color: #fbbf24 !important;
 color: #ffd88a !important;
 background: rgba(201, 155, 66, 0.2) !important;
 transform: translateY(-1px);
}
.mu-exchange-pill.active {
 background: linear-gradient(135deg, rgba(82, 48, 12, 0.95) 0%, rgba(40, 25, 9, 0.98) 100%) !important;
 border: 1.5px solid #fbbf24 !important;
 color: #fde047 !important;
 box-shadow: 0 0 14px rgba(251, 191, 36, 0.25);
}
.mu-exchange-pill.is-max {
 border-color: rgba(244, 114, 182, 0.48) !important;
 color: #fbcfe8 !important;
}

.mu-exchange-horiz-form {
 display: grid !important;
 grid-template-columns: minmax(210px, 1.15fr) 36px minmax(195px, 1fr) auto !important;
 align-items: stretch !important;
 gap: 14px !important;
 width: 100% !important;
 max-width: none !important;
 margin: 0 !important;
 padding: 14px !important;
 border-radius: 12px;
 background: rgba(6, 10, 18, 0.88);
 border: 1px solid rgba(201, 155, 66, 0.36);
}
.mu-exchange-field-box {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 6px;
 padding: 10px 14px;
 border-radius: 10px;
 background: rgba(15, 23, 42, 0.92);
 border: 1px solid rgba(251, 191, 36, 0.42);
 min-width: 0;
}
.mu-exchange-field-box.is-preview {
 border-color: rgba(56, 189, 248, 0.45);
 background: linear-gradient(135deg, rgba(12, 26, 46, 0.94), rgba(9, 18, 34, 0.96));
}
.mu-exchange-field-label {
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: #94a3b8 !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.mu-exchange-input-wrap,
.mu-exchange-preview-wrap {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 height: 38px;
}
.mu-exchange-input-wrap input {
 flex: 1;
 width: 100% !important;
 min-width: 110px;
 height: 38px !important;
 margin: 0 !important;
 padding: 0 12px !important;
 background: #090e18 !important;
 border: 1px solid rgba(251, 191, 36, 0.5) !important;
 border-radius: 7px !important;
 color: #fde047 !important;
 font-size: 16px !important;
 font-weight: 900 !important;
}
.mu-exchange-preview-wrap strong {
 font-size: 18px;
 font-weight: 900;
 color: #38bdf8 !important;
 letter-spacing: 0.02em;
 white-space: nowrap;
}
.mu-exchange-unit {
 font-size: 11.5px;
 font-weight: 800;
 padding: 4px 10px;
 border-radius: 6px;
 background: rgba(251, 191, 36, 0.16);
 border: 1px solid rgba(251, 191, 36, 0.4);
 color: #ffd88a !important;
 flex-shrink: 0;
 white-space: nowrap;
}
.mu-exchange-unit.is-wcoin {
 background: rgba(56, 189, 248, 0.16);
 border-color: rgba(56, 189, 248, 0.45);
 color: #7dd3fc !important;
}
.mu-exchange-arrow-badge {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 align-self: center;
 display: grid;
 place-items: center;
 background: linear-gradient(135deg, rgba(201, 155, 66, 0.25), rgba(56, 189, 248, 0.22));
 border: 1px solid rgba(201, 155, 66, 0.5);
 color: #fde047 !important;
 font-size: 15px;
 font-weight: 900;
 flex-shrink: 0;
}
.mu-exchange-submit-btn {
 height: auto !important;
 min-height: 64px !important;
 padding: 0 24px !important;
 margin: 0 !important;
 white-space: nowrap;
 font-size: 14px !important;
 font-weight: 900 !important;
 border-radius: 10px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 8px !important;
 box-shadow: 0 8px 20px rgba(217, 119, 6, 0.28);
}

.mu-order-status-pill {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 4px 10px;
 border-radius: 99px;
 font-size: 11.5px;
 font-weight: 800;
}
.mu-order-status-pill.is-paid {
 background: #064e3b !important;
 border: 1px solid #10b981 !important;
 color: #6ee7b7 !important;
}
.mu-order-status-pill.is-pending {
 background: #451a03 !important;
 border: 1px solid #f59e0b !important;
 color: #fde68a !important;
}

@media (max-width: 980px) {
 .mu-topup-hero-strip,
 .mu-topup-main-split {
  grid-template-columns: 1fr;
 }
 .mu-exchange-panel .mu-topup-panel-head {
  flex-wrap: wrap;
 }
 .mu-exchange-balance-strip {
  margin-left: 0;
 }
 .mu-exchange-presets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 .mu-exchange-horiz-form {
  grid-template-columns: 1fr !important;
 }
 .mu-exchange-arrow-badge {
  display: none;
 }
 .mu-exchange-submit-btn {
  min-height: 46px !important;
 }
}
@media (max-width: 600px) {
 .mu-pkg-grid,
 .mu-exchange-presets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

/* ==========================================================================
   HERO BANNER SLIDER (4 THEMED MU SEASON 6.9 SLIDES)
   ========================================================================== */
.hero-art {
 position: absolute;
 inset: 0;
 z-index: -3;
 background: #09101b !important;
 overflow: hidden;
}

.hero-slide {
 position: absolute;
 inset: 0;
 background-color: #09101b;
 background-position: right top;
 background-size: auto 100%;
 background-repeat: no-repeat;
 opacity: 0;
 transform: scale(1.045);
 transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 6.5s ease-out;
 will-change: opacity, transform;
}

.hero-slide-0 {
 background-image: url('/assets/hero-knight-v2.png');
}
.hero-slide-1 {
 background-image: url('/assets/hero-slide-2.jpg');
}
.hero-slide-2 {
 background-image: url('/assets/hero-slide-3.jpg');
}
.hero-slide-3 {
 background-image: url('/assets/hero-slide-4.jpg');
}

.hero-slide.is-active {
 opacity: 1;
 transform: scale(1);
 z-index: 1;
}

@media (min-width: 1550px) {
 .hero-slide {
  background-position: 62% top;
  background-size: cover;
 }
}

.eyebrow b {
 font-weight: 700;
 color: var(--gold-light);
 transition: opacity 0.32s ease;
}

#hero-slide-subline,
#hero-slide-desc {
 transition: opacity 0.32s ease, transform 0.32s ease;
}

.hero-text-switching #hero-slide-eyebrow,
.hero-text-switching #hero-slide-subline,
.hero-text-switching #hero-slide-desc {
 opacity: 0.15;
 transform: translateY(4px);
}

.hero-slider-controls {
 position: absolute;
 bottom: 18px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 6;
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 6px 10px;
 border-radius: 12px;
 background: rgba(9, 16, 27, 0.78);
 border: 1px solid rgba(217, 181, 108, 0.32);
 backdrop-filter: blur(12px);
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.hero-slider-arrow {
 width: 32px;
 height: 32px;
 padding: 0 !important;
 border-radius: 8px !important;
 border: 1px solid rgba(217, 181, 108, 0.35) !important;
 background: rgba(20, 32, 48, 0.85) !important;
 color: #f4d9a0 !important;
 font-size: 18px !important;
 line-height: 1 !important;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all 0.2s ease;
}

.hero-slider-arrow:hover {
 background: linear-gradient(135deg, #b88933, #deb968) !important;
 color: #111827 !important;
 border-color: #f4d9a0 !important;
}

.hero-slider-dots {
 display: flex;
 align-items: center;
 gap: 6px;
}

.hero-slider-dot {
 position: relative;
 overflow: hidden;
 display: inline-flex;
 align-items: center;
 gap: 7px;
 padding: 6px 12px !important;
 border-radius: 8px !important;
 border: 1px solid rgba(148, 163, 184, 0.18) !important;
 background: rgba(15, 24, 38, 0.72) !important;
 color: #94a3b8 !important;
 font-size: 11.5px !important;
 font-weight: 600 !important;
 cursor: pointer;
 transition: all 0.25s ease;
}

.hero-slider-dot:hover {
 border-color: rgba(217, 181, 108, 0.45) !important;
 color: #e2e8f0 !important;
 background: rgba(24, 38, 58, 0.88) !important;
}

.hero-slider-dot .dot-num {
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.6px;
 color: #d9b56c;
 opacity: 0.75;
}

.hero-slider-dot .dot-label {
 white-space: nowrap;
}

.hero-slider-dot .dot-bar {
 position: absolute;
 left: 0;
 bottom: 0;
 height: 2px;
 width: 0%;
 background: linear-gradient(90deg, #f59e0b, #fde047);
 transition: width 0.2s linear;
}

.hero-slider-dot.is-active {
 border-color: rgba(217, 181, 108, 0.75) !important;
 background: linear-gradient(135deg, rgba(32, 48, 72, 0.95), rgba(20, 31, 48, 0.95)) !important;
 color: #fef3c7 !important;
 box-shadow: 0 0 14px rgba(217, 181, 108, 0.2);
}

.hero-slider-dot.is-active .dot-num {
 color: #fde047;
 opacity: 1;
}

.hero-slider-dot.is-active .dot-bar {
 width: 100%;
 animation: hero-dot-progress 6s linear forwards;
}

.hero:hover .hero-slider-dot.is-active .dot-bar {
 animation-play-state: paused;
}

@keyframes hero-dot-progress {
 from { width: 0%; }
 to { width: 100%; }
}

@media (max-width: 900px) {
 .hero-slider-dot .dot-label {
  display: none;
 }
 .hero-slider-dot {
  padding: 6px 10px !important;
 }
}

@media (max-width: 600px) {
 .hero-slider-controls {
  bottom: 12px;
  padding: 4px 8px;
 }
}

/* ==========================================================================
   NEWS LIST CARDS & RICH ARTICLE READER MODAL
   ========================================================================== */
.news-row.news-row-clickable {
 cursor: pointer;
 align-items: center;
 transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.news-row.news-row-clickable:hover {
 background: #f3f7fc !important;
}

.news-row.news-row-clickable:hover h3 {
 color: #9a6b13 !important;
}

.news-row-main {
 min-width: 0;
}

.news-row-main h3 {
 font-size: 14px !important;
 font-weight: 700 !important;
 color: #162536;
 margin: 0 0 4px !important;
 transition: color 0.18s ease;
}

.news-row-excerpt {
 margin: 0 !important;
 font-size: 12.5px !important;
 color: #52667a !important;
 line-height: 1.55 !important;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 white-space: normal !important;
}

.news-row-meta {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 6px;
 flex-shrink: 0;
}

.news-read-btn {
 display: inline-flex;
 align-items: center;
 padding: 4px 10px;
 border-radius: 5px;
 font-size: 11px;
 font-weight: 700;
 color: #9a6b13;
 background: #fdf6e7;
 border: 1px solid #e5c687;
 transition: all 0.2s ease;
}

.news-row.news-row-clickable:hover .news-read-btn {
 background: linear-gradient(135deg, #b88933, #deb968);
 color: #16130b;
 border-color: #b88933;
}

.featured-story[data-open-news] {
 cursor: pointer;
}

/* News Reader Modal */
.mu-news-modal-backdrop {
 position: fixed;
 inset: 0;
 z-index: 9999;
 background: rgba(6, 10, 18, 0.84);
 backdrop-filter: blur(10px);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px 16px;
 opacity: 0;
 transition: opacity 0.22s ease;
}

.mu-news-modal-backdrop[hidden] {
 display: none !important;
}

.mu-news-modal-backdrop.is-open {
 opacity: 1;
}

.mu-news-modal-dialog {
 width: 100%;
 max-width: 820px;
 max-height: 88vh;
 display: flex;
 flex-direction: column;
 background: linear-gradient(180deg, #161d2b 0%, #101622 100%);
 border: 1px solid rgba(217, 181, 108, 0.48);
 border-radius: 14px;
 box-shadow: 0 28px 80px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
 overflow: hidden;
 transform: translateY(12px) scale(0.985);
 transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.mu-news-modal-backdrop.is-open .mu-news-modal-dialog {
 transform: translateY(0) scale(1);
}

.mu-news-modal-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 14px 24px;
 background: linear-gradient(90deg, #0d131f, #172336);
 border-bottom: 1px solid rgba(217, 181, 108, 0.28);
}

.mu-news-modal-meta {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
}

.mu-news-modal-badge {
 display: inline-flex;
 align-items: center;
 padding: 4px 10px;
 border-radius: 5px;
 font-size: 10.5px;
 font-weight: 800;
 letter-spacing: 1px;
 color: #fde68a;
 background: rgba(184, 137, 51, 0.22);
 border: 1px solid rgba(217, 181, 108, 0.48);
}

.mu-news-modal-date {
 font-size: 12px;
 color: #94a3b8;
}

.mu-news-modal-close {
 width: 34px;
 height: 34px;
 padding: 0 !important;
 border-radius: 8px !important;
 background: rgba(30, 41, 59, 0.8) !important;
 border: 1px solid rgba(148, 163, 184, 0.3) !important;
 color: #e2e8f0 !important;
 font-size: 15px !important;
 cursor: pointer;
}

.mu-news-modal-close:hover {
 background: #991b1b !important;
 border-color: #f87171 !important;
 color: #fff !important;
}

.mu-news-modal-body {
 padding: 28px 34px;
 overflow-y: auto;
 color: #e5e7eb;
}

.mu-news-modal-title {
 font: 700 clamp(22px, 2.6vw, 29px)/1.32 'Segoe UI', Arial, sans-serif !important;
 color: #f8fafc !important;
 margin: 0 0 14px !important;
 letter-spacing: -0.3px;
}

.mu-news-modal-divider {
 display: flex;
 align-items: center;
 gap: 12px;
 margin: 0 0 22px;
 color: #d9b56c;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 2px;
}

.mu-news-modal-divider::before,
.mu-news-modal-divider::after {
 content: '';
 flex: 1;
 height: 1px;
 background: linear-gradient(90deg, rgba(217, 181, 108, 0.45), transparent);
}

.mu-news-modal-divider::before {
 background: linear-gradient(90deg, transparent, rgba(217, 181, 108, 0.45));
}

.mu-news-article-content {
 font-size: 15.5px;
 line-height: 1.78;
 color: #d1d5db;
}

.mu-news-article-content p {
 margin: 0 0 16px !important;
 color: #d1d5db !important;
 font-size: 15.5px !important;
 line-height: 1.78 !important;
 white-space: normal !important;
}

.mu-news-article-content strong {
 color: #ffffff;
 font-weight: 700;
}

.mu-news-article-content em {
 color: #fde68a;
}

.mu-news-article-content .mu-article-heading {
 font-family: 'Segoe UI', Arial, sans-serif !important;
 font-size: 20px !important;
 font-weight: 700 !important;
 color: #f8fafc !important;
 margin: 26px 0 12px !important;
 padding-bottom: 6px;
 border-bottom: 1px solid rgba(217, 181, 108, 0.22);
}

.mu-news-article-content .mu-article-list {
 margin: 0 0 18px 20px;
 padding: 0;
 color: #e2e8f0;
}

.mu-news-article-content .mu-article-list li {
 margin-bottom: 8px;
 line-height: 1.7;
}

.mu-news-article-content .mu-article-bullet {
 margin: 0 0 8px 8px;
 color: #e2e8f0;
}

.mu-news-article-content .mu-article-quote {
 margin: 16px 0;
 padding: 12px 16px;
 border-left: 3px solid #d9b56c;
 background: rgba(217, 181, 108, 0.08);
 border-radius: 0 8px 8px 0;
 color: #fef3c7;
 font-style: italic;
}

.mu-news-modal-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 13px 24px;
 background: #0c121d;
 border-top: 1px solid rgba(148, 163, 184, 0.16);
 font-size: 12px;
 color: #94a3b8;
}

/* Admin News Toolbar */
.mu-news-editor-toolbar {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
 padding: 8px 10px;
 margin: 4px 0 8px;
 border-radius: 6px;
 background: #f1f5f9;
 border: 1px solid #cbd5e1;
}

.mu-news-editor-toolbar .toolbar-hint {
 font-size: 11px;
 font-weight: 700;
 color: #475569;
 margin-right: 4px;
}

@media (max-width: 650px) {
 .mu-news-modal-body {
  padding: 20px 18px;
 }
 .mu-news-modal-footer span {
  display: none;
 }
}






/* === Captcha & Anti-Brute-Force Alert UI === */
.mu-captcha-field {
  margin-top: 10px;
  margin-bottom: 12px;
}
.mu-captcha-compact .mu-captcha-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #3d2b14;
  margin-bottom: 5px;
}
.mu-captcha-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.mu-captcha-inp-wrap {
  flex: 1;
  min-width: 0;
}
.mu-captcha-inp-wrap input[name="captcha"] {
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 800;
}
.mu-captcha-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mu-captcha-badge img[data-captcha-img] {
  height: 42px;
  width: 132px;
  border-radius: 6px;
  border: 1px solid rgba(180, 132, 42, 0.65);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  display: block;
  background: #121826;
}
.mu-captcha-compact .mu-captcha-badge img[data-captcha-img] {
  width: 112px;
  height: 38px;
}
.mu-captcha-reload {
  height: 42px;
  padding: 0 11px !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #232f46 0%, #151d2e 100%) !important;
  color: #f5d27b !important;
  border: 1px solid rgba(200, 155, 60, 0.55) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  white-space: nowrap;
}
.mu-captcha-compact .mu-captcha-reload {
  height: 38px;
  padding: 0 9px !important;
}
.mu-captcha-reload:hover {
  filter: brightness(1.15);
}
.mu-form-inline-alert {
  margin: 10px 0 12px;
  padding: 11px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(168, 28, 28, 0.14), rgba(120, 16, 16, 0.08));
  border: 1.5px solid rgba(196, 43, 43, 0.65);
  color: #8f1414;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: 0 3px 10px rgba(160, 20, 20, 0.1);
}
/* === Full-Width News Spotlight Slider === */
.mu-news-spotlight {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #0d1522;
  border: 1.5px solid rgba(208, 165, 76, 0.55);
  box-shadow: 0 16px 38px rgba(10, 18, 30, 0.24), 0 0 0 1px rgba(255, 224, 140, 0.12) inset;
  margin-bottom: 16px;
}
.mu-news-slides-viewport {
  position: relative;
  min-height: 315px;
  width: 100%;
}
.mu-news-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.48s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 36px 28px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mu-news-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  min-height: 315px;
}
.mu-news-slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: right 22%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.72;
  transform: scale(1.01);
  transition: transform 5.5s ease-out;
}
.mu-news-slide.is-active .mu-news-slide-bg {
  transform: scale(1.065);
}
.mu-news-slide-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 16, 27, 0.96) 0%, rgba(12, 20, 33, 0.88) 52%, rgba(12, 20, 33, 0.28) 100%),
    linear-gradient(0deg, rgba(9, 14, 24, 0.94) 0%, rgba(9, 14, 24, 0.2) 60%, transparent 100%);
}
.mu-news-slide-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mu-news-slide-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mu-news-slide-top .story-tag {
  margin-bottom: 0;
  font-size: 10.5px;
  padding: 5px 11px;
  letter-spacing: 1.4px;
  background: rgba(18, 27, 42, 0.88);
  border: 1px solid rgba(226, 183, 92, 0.65);
  color: #ffe299;
}
.mu-news-slide-date {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(15, 23, 38, 0.72);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.mu-news-slide-content h3 {
  font: 700 30px/1.26 var(--serif) !important;
  color: #fff8e7 !important;
  margin: 4px 0 2px !important;
  max-width: 680px !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  transition: color 0.2s ease;
}
.mu-news-slide-content h3:hover {
  color: #ffd97d !important;
}
.mu-news-slide-content p {
  font-size: 14px !important;
  line-height: 1.68 !important;
  color: #dbe4f0 !important;
  margin: 0 !important;
  max-width: 650px !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}
.mu-news-slide-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.mu-news-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #f3cb78 0%, #c89435 100%) !important;
  color: #171208 !important;
  border: 1px solid #ffe4a3 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease;
}
.mu-news-cta-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.mu-news-nav-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mu-news-arrow {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 7px !important;
  background: rgba(17, 26, 42, 0.85) !important;
  border: 1px solid rgba(216, 174, 88, 0.5) !important;
  color: #f8dfa1 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mu-news-arrow:hover {
  background: rgba(212, 166, 74, 0.25) !important;
  border-color: #ffd97d !important;
}
.mu-news-slider-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: linear-gradient(180deg, #0b121e 0%, #080d16 100%);
  border-top: 1px solid rgba(208, 165, 76, 0.32);
}
.mu-news-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 0 !important;
  color: #94a3b8 !important;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease;
}
.mu-news-tab:last-child {
  border-right: 0 !important;
}
.mu-news-tab:hover {
  background: rgba(212, 166, 74, 0.08) !important;
  color: #e2e8f0 !important;
}
.mu-news-tab.is-active {
  background: linear-gradient(90deg, rgba(212, 166, 74, 0.18), rgba(212, 166, 74, 0.05)) !important;
  color: #fff4d2 !important;
}
.mu-news-tab-num {
  font-size: 11px;
  font-weight: 900;
  color: #e6ba63;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(212, 166, 74, 0.16);
  border: 1px solid rgba(212, 166, 74, 0.38);
  flex-shrink: 0;
}
.mu-news-tab-title {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.mu-news-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: transparent;
}
.mu-news-tab.is-active .mu-news-tab-bar {
  background: linear-gradient(90deg, #f5d07a, #d19732);
}
.news-row.is-active-slide {
  border-left: 3.5px solid #d49c35 !important;
  background: linear-gradient(90deg, rgba(212, 156, 53, 0.09), rgba(255, 255, 255, 0.92)) !important;
}
@media (max-width: 700px) {
  .mu-news-slide, .mu-news-slide.is-active {
    min-height: 270px;
    padding: 22px 20px !important;
  }
  .mu-news-slide-content h3 {
    font-size: 22px !important;
  }
  .mu-news-slider-tabs {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   V43: HIGH-CONTRAST DARK ROYAL NAVY & GOLD COMPACT WEBSHOP TABLE (16/PAGE)
   Fixes broken table form layout and glaring white-on-white badge/text colors
   ========================================================================== */
.mu-shop-table-container {
  position: relative;
  width: 100%;
  margin: 12px 0;
  border-radius: 10px;
  border: 1.5px solid rgba(201, 155, 66, 0.6);
  background: #0d1624;
  box-shadow: 0 14px 32px rgba(6, 10, 18, 0.36);
  overflow: visible;
}

.admin-shop-compact-table.mu-shop-dark-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #0d1624 !important;
  color: #f1f5f9 !important;
  white-space: normal !important;
  border-radius: 9px;
}

.admin-shop-compact-table.mu-shop-dark-table thead th {
  background: linear-gradient(180deg, #18273d 0%, #101b2b 100%) !important;
  color: #ffd88a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 12px 14px !important;
  border-bottom: 2px solid #c89f4d !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.admin-shop-compact-table.mu-shop-dark-table thead th:first-child {
  border-top-left-radius: 9px;
}

.admin-shop-compact-table.mu-shop-dark-table thead th:last-child {
  border-top-right-radius: 9px;
}

.admin-shop-compact-table.mu-shop-dark-table th.col-shop-icon,
.admin-shop-compact-table.mu-shop-dark-table td.col-shop-icon {
  width: 74px !important;
  text-align: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.admin-shop-compact-table.mu-shop-dark-table th.col-shop-name,
.admin-shop-compact-table.mu-shop-dark-table td.col-shop-name {
  width: 25% !important;
}

.admin-shop-compact-table.mu-shop-dark-table th.col-shop-cat,
.admin-shop-compact-table.mu-shop-dark-table td.col-shop-cat {
  width: 17% !important;
}

.admin-shop-compact-table.mu-shop-dark-table th.col-shop-opts,
.admin-shop-compact-table.mu-shop-dark-table td.col-shop-opts {
  width: auto !important;
}

.admin-shop-compact-table.mu-shop-dark-table th.col-shop-price,
.admin-shop-compact-table.mu-shop-dark-table td.col-shop-price {
  width: 132px !important;
  text-align: right !important;
}

.admin-shop-compact-table.mu-shop-dark-table th.col-shop-action,
.admin-shop-compact-table.mu-shop-dark-table td.col-shop-action {
  width: 136px !important;
  text-align: center !important;
}

.admin-shop-compact-table.mu-shop-dark-table tbody tr.mu-shop-table-row:nth-child(odd) {
  background: #0f1928 !important;
}

.admin-shop-compact-table.mu-shop-dark-table tbody tr.mu-shop-table-row:nth-child(even) {
  background: #132033 !important;
}

.admin-shop-compact-table.mu-shop-dark-table tbody tr.mu-shop-table-row:hover {
  background: #1b2d46 !important;
}

.admin-shop-compact-table.mu-shop-dark-table tbody td {
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: #e2e8f0 !important;
  vertical-align: middle !important;
  white-space: normal !important;
  background: transparent !important;
}

.admin-shop-compact-table.mu-shop-dark-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.admin-shop-compact-table.mu-shop-dark-table .mu-icon-box-sm {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 auto !important;
  background: radial-gradient(circle at 50% 50%, #223854 0%, #0b121c 100%) !important;
  border: 1.5px solid rgba(217, 181, 108, 0.65) !important;
  border-radius: 8px !important;
  display: inline-grid !important;
  place-items: center !important;
}

.admin-shop-compact-table.mu-shop-dark-table .mu-icon-box-sm.mu-item-quality-excellent {
  border-color: #4ade80 !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.25) !important;
}

.admin-shop-compact-table.mu-shop-dark-table .mu-icon-box-sm.mu-item-quality-ancient {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.28) !important;
}

.admin-shop-compact-table.mu-shop-dark-table .mu-icon-box-sm .mu-market-item-img {
  width: 36px !important;
  height: 36px !important;
}

/* Position tooltip to the right of the icon inside the compact table so it never clips */
.admin-shop-compact-table.mu-shop-dark-table .mu-market-icon-box .mu-ingame-tooltip {
  left: calc(100% + 14px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 9999 !important;
}

.mu-shop-row-title {
  display: block;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #f8fafc !important;
  margin-bottom: 3px;
}

.mu-shop-row-title.mu-item-quality-excellent {
  color: #4ade80 !important;
  text-shadow: 0 1px 6px rgba(34, 197, 94, 0.22);
}

.mu-shop-row-title.mu-item-quality-ancient {
  color: #38bdf8 !important;
  text-shadow: 0 1px 6px rgba(56, 189, 248, 0.25);
}

.mu-shop-row-title.mu-item-quality-wing,
.mu-shop-row-title.mu-item-quality-jewel {
  color: #ffd88a !important;
  text-shadow: 0 1px 6px rgba(251, 191, 36, 0.22);
}

.mu-shop-row-sub {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 600;
  line-height: 1.35;
}

.mu-shop-row-sub strong {
  color: #e2e8f0 !important;
}

.mu-shop-row-sub code {
  color: #7dd3fc !important;
  background: rgba(9, 14, 24, 0.8);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.mu-shop-cat-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fde68a !important;
  background: rgba(201, 155, 66, 0.18) !important;
  border: 1px solid rgba(217, 181, 108, 0.48) !important;
  margin-bottom: 4px;
}

.admin-shop-compact-table.mu-shop-dark-table .mu-market-badges-wrap {
  gap: 5px !important;
  margin: 0 0 5px 0 !important;
}

.admin-shop-compact-table.mu-shop-dark-table .m-badge-std {
  background: rgba(30, 41, 59, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.5) !important;
  color: #f1f5f9 !important;
}

.admin-shop-compact-table.mu-shop-dark-table .m-badge-luck {
  background: rgba(14, 116, 144, 0.38) !important;
  border: 1px solid #38bdf8 !important;
  color: #bae6fd !important;
}

.admin-shop-compact-table.mu-shop-dark-table .m-badge-exl {
  background: rgba(20, 83, 45, 0.5) !important;
  border: 1px solid #4ade80 !important;
  color: #bbf7d0 !important;
}

.admin-shop-compact-table.mu-shop-dark-table .m-badge-anc {
  background: rgba(3, 105, 161, 0.5) !important;
  border: 1px solid #38bdf8 !important;
  color: #e0f2fe !important;
}

.mu-shop-row-hint {
  font-size: 11.5px !important;
  color: #cbd5e1 !important;
  line-height: 1.35;
}

.mu-shop-row-hint strong {
  color: #ffd88a !important;
}

.mu-shop-row-price {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}

.mu-shop-row-price strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
}

.mu-shop-row-price span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fde68a !important;
}

.admin-shop-compact-table.mu-shop-dark-table .shop-inline-buy-form {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mu-shop-row-buy-btn {
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .mu-shop-table-container {
    overflow-x: auto;
  }
  .admin-shop-compact-table.mu-shop-dark-table {
    min-width: 780px;
  }
}