html, body { margin: 0; padding: 0; width: 100%; height: 100%; min-height: 100%; }
body { background: #f2eee4; color: #29414b; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; }
* { box-sizing: border-box; }
a { color: #a84524; text-decoration: none; }
a:hover { color: #c85b2c; text-decoration: none; }
button, input { font-family: Arial, Helvetica, sans-serif; }
.shell { width: 92%; max-width: 1180px; margin: 0 auto; }

/* Classic sticky-footer wrapper for legacy Chromium / Coowon. */
.account-page { min-height: 100%; margin-bottom: -128px; }
.account-page:after { content: ''; display: block; height: 128px; }

.site-header { min-height: 76px; border-bottom: 3px solid #e0a44d; background: #0b2c3d; background-image: linear-gradient(#143f53, #082536); box-shadow: 0 4px 14px rgba(0,0,0,.30); position: relative; z-index: 10; }
.header-inner { min-height: 76px; overflow: hidden; }
.brand { float: left; height: 76px; color: #fff4d6; overflow: hidden; }
.brand img { float: left; width: 68px; height: 68px; margin-top: 3px; }
.brand span { float: left; padding-top: 15px; }
.brand strong { display: block; color: #fff4d6; font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 21px; text-shadow: 0 1px 2px #000; }
.brand small { display: block; margin-top: 3px; color: #e5a547; font-size: 9px; letter-spacing: 2px; }
.nav { float: right; padding-top: 19px; white-space: nowrap; }
.nav a, .link-button { display: inline-block; margin-left: 5px; padding: 9px 12px; border: 1px solid #3f6678; border-radius: 4px; background: #10384b; color: #eff6f3; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.nav form { display: inline-block; margin: 0; }
.link-button { cursor: pointer; }
.nav .nav-register { border-color: #e0a44d; background: #b94a24; color: #fff4d8; }
.nav a:hover, .link-button:hover { border-color: #e0a44d; background: #1a596e; color: #fff7e7; }
.nav .nav-register:hover { background: #c85b2c; }

.account-hero { position: relative; height: 285px; overflow: hidden; border-bottom: 1px solid #b8c8c8; background: #9ddaea url('../images/theme/sunny-wave.jpg') center top no-repeat; background-size: cover; }
.account-hero:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #0b2c3d; opacity: .16; }
.account-hero-inner { position: relative; z-index: 1; height: 285px; }
.account-hero-logo { position: absolute; left: 35px; bottom: -4px; width: 285px; height: auto; }
.account-hero-copy { position: absolute; left: 335px; bottom: 62px; width: 510px; padding: 18px 22px; border-left: 4px solid #e0a44d; background: #fffaf0; background: rgba(255,250,240,.91); box-shadow: 0 8px 22px rgba(9,44,61,.18); }
.account-hero-copy p { margin: 0 0 5px; color: #a84524; font-size: 9px; font-weight: bold; letter-spacing: 1.7px; }
.account-hero-copy strong { display: block; color: #123f52; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; line-height: 1.15; }
.account-hero-copy span { display: block; margin-top: 7px; color: #60757a; font-size: 11px; }
.main-content { position: relative; margin-top: -42px; padding-bottom: 60px; }

.notice { margin: 0 0 14px; padding: 12px 15px; border: 1px solid; border-radius: 5px; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.notice.success { border-color: #5d8a69; background: #edf6ed; color: #2d6441; }
.notice.error { border-color: #aa6651; background: #f9e9e2; color: #843b2c; }
.notice ul { margin: 6px 0 0 18px; padding: 0; }
.eyebrow { margin: 0 0 5px; color: #a84524; font-size: 9px; font-weight: bold; letter-spacing: 1.7px; text-transform: uppercase; }
.muted { color: #6f8083; }

.card { position: relative; padding: 22px 24px; border: 1px solid #d4cdbd; border-top: 4px solid #e0a44d; border-radius: 7px; background: #fffaf0; box-shadow: 0 7px 20px rgba(20,61,74,.10); }
.card h1, .card h2 { margin-top: 0; color: #123f52; font-family: Georgia, 'Times New Roman', serif; }
.card h2 { padding-bottom: 10px; border-bottom: 1px solid #ddd5c5; font-size: 20px; }

/* Auth: same navy / teal / gold / warm-ivory system as the public site. */
.auth-layout { overflow: hidden; max-width: 960px; margin: 0 auto 34px; border: 1px solid #cfc6b4; border-radius: 9px; background: #fffaf0; box-shadow: 0 10px 28px rgba(20,61,74,.16); }
.auth-story { float: left; position: relative; width: 45%; min-height: 500px; padding: 70px 40px 35px; border-right: 1px solid #315b6c; background: #0b2c3d url('../images/theme/crew-wave.jpg') 45% top no-repeat; background-size: auto 500px; color: #eff6f3; }
.auth-story:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #0b2c3d; opacity: .84; }
.auth-story > * { position: relative; }
.auth-story .eyebrow { color: #e5a547; }
.auth-story h2 { margin: 0; color: #fff1c9; font-family: Georgia, 'Times New Roman', serif; font-size: 30px; line-height: 1.12; }
.auth-story p { max-width: 330px; color: #bfd0d1; }
.auth-story-links { margin-top: 22px; }
.auth-story-links a { display: inline-block; margin: 0 7px 7px 0; padding: 9px 12px; border: 1px solid #e0a44d; border-radius: 4px; background: #b94a24; color: #fff4d8; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.auth-story-links a:hover { background: #c85b2c; color: #fff; }
.auth-card { float: right; width: 55%; min-height: 500px; margin: 0; padding: 45px 42px 35px; border: 0; border-radius: 0; background: #fffaf0; box-shadow: none; }
.auth-card h1 { margin-bottom: 5px; font-size: 29px; }
.auth-layout-compact .auth-story, .auth-layout-compact .auth-card { min-height: 385px; }

.field { margin: 12px 0; }
.field label { display: block; color: #4d646b; font-size: 11px; font-weight: bold; }
.field input { display: block; width: 100%; height: 43px; margin-top: 5px; padding: 8px 10px; border: 1px solid #9aadb0; border-radius: 4px; background: #fffdf8; color: #293f48; outline: none; }
.field input:focus { border-color: #d0953f; box-shadow: 0 0 0 2px rgba(224,164,77,.18); }
.button { display: inline-block; min-height: 40px; padding: 10px 17px; border: 1px solid #8f351f; border-radius: 4px; background: #b94a24; color: #fff4d8; cursor: pointer; font-weight: bold; text-transform: uppercase; }
.button:hover { background: #c85b2c; }
.button.full { width: 100%; }
.form-message { min-height: 18px; margin: 8px 0; color: #8a402b; font-size: 11px; }
.form-message.error-text { color: #923621; font-weight: bold; }
.form-message.success-text { color: #326a47; font-weight: bold; }
.auth-links { overflow: hidden; margin-top: 15px; padding-top: 12px; border-top: 1px solid #ddd5c5; }
.auth-links a:first-child { float: left; }
.auth-links a:last-child { float: right; }

/* Account dashboard */
.account-summary-banner { min-height: 120px; margin-bottom: 15px; overflow: hidden; border: 1px solid #315b6c; border-top: 4px solid #e0a44d; border-radius: 8px; background: #0b2c3d; color: #dbe7e7; box-shadow: 0 8px 22px rgba(20,57,72,.18); }
.account-summary-main { float: left; width: 70%; padding: 23px 28px 18px; }
.account-summary-main .eyebrow { color: #e5a547; }
.account-summary-main h1 { margin: 2px 0 5px; color: #fff1c9; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; }
.account-summary-main p { margin: 4px 0 0; color: #bdd0d1; }
.account-pow-box { float: right; width: 26%; min-height: 116px; padding: 19px 24px; border-left: 1px solid #315b6c; background: #123f52; text-align: right; }
.account-pow-box span { display: block; color: #d5e1e1; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.account-pow-box strong { display: block; margin-top: 2px; color: #f0c56a; font-family: Georgia, 'Times New Roman', serif; font-size: 31px; }
.account-pow-box small { color: #e5a547; font-size: 9px; font-weight: bold; }
.account-overview { margin-bottom: 15px; overflow: hidden; }
.section-title-row { overflow: hidden; }
.info-list { margin: 0; }
.info-list > div { overflow: hidden; padding: 10px 0; border-bottom: 1px dashed #d8d1c3; }
.info-list dt { float: left; width: 42%; color: #667a7e; font-weight: bold; }
.info-list dd { margin-left: 44%; color: #2b444c; text-align: right; }
.info-list-wide > div { float: left; width: 48%; margin-right: 2%; }
.info-list-wide:after, .account-overview:after, .security-grid:after { content: ''; display: block; clear: both; }
.security-grid { clear: both; overflow: hidden; margin: 0 -1%; padding-top: 1px; }
.security-card { float: left; width: 31.333%; min-height: 500px; margin: 0 1% 15px; padding: 20px 20px 18px; }
.security-card h2 { font-size: 19px; }
.password-card, .email-card, .pin-card { border-top-color: #e0a44d; }
.security-card .eyebrow { color: #a84524; }
.history-card { clear: both; margin-top: 2px; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid #c9c1b2; border-radius: 5px; }
table { width: 100%; border-collapse: collapse; background: #fffdf8; }
th, td { padding: 9px 8px; border-bottom: 1px solid #ddd6c9; text-align: left; white-space: nowrap; }
th { background: #123f52; color: #f5f8f4; font-size: 10px; text-transform: uppercase; }
tr:nth-child(even) td { background: #f6f1e7; }
.pager { overflow: hidden; padding-top: 12px; text-align: center; }
.pager a { display: inline-block; padding: 5px 9px; border: 1px solid #c8bfaf; border-radius: 4px; background: #fffaf0; }
.pager span { display: inline-block; margin: 0 12px; color: #6f8083; }

.account-footer { position: relative; min-height: 128px; padding: 22px 0 20px; border-top: 3px solid #e0a44d; background: #d4b56f url('../images/theme/sand-footer.png') center top repeat-x; color: #4f3925; overflow: hidden; }
.account-footer:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #0b2c3d; opacity: .08; }
.account-footer-inner { position: relative; z-index: 1; min-height: 80px; overflow: hidden; }
.account-footer-inner img { float: left; width: 78px; height: 78px; margin-right: 10px; }
.account-footer-inner div { float: left; padding-top: 17px; }
.account-footer-inner strong, .account-footer-inner span { display: block; }
.account-footer-inner strong { color: #543321; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; }
.account-footer-inner span { margin-top: 3px; font-size: 10px; }
.account-footer-inner > a { float: right; margin-top: 22px; padding: 8px 12px; border: 1px solid #9f7438; border-radius: 4px; background: #f5d994; color: #513521; font-size: 10px; font-weight: bold; text-transform: uppercase; }

@media (max-width: 900px) {
    .account-hero-copy { left: 290px; width: 500px; }
    .account-hero-logo { left: 5px; width: 260px; }
    .auth-story { width: 40%; padding-left: 25px; padding-right: 25px; }
    .auth-card { width: 60%; padding-left: 30px; padding-right: 30px; }
    .security-grid { margin: 0; }
    .security-card { float: none; width: auto; min-height: 0; margin: 0 0 14px; }
}

@media (max-width: 700px) {
    .header-inner { text-align: center; }
    .brand { float: none; display: inline-block; }
    .nav { float: none; padding: 0 0 11px; text-align: center; white-space: normal; }
    .nav a, .link-button { margin: 0 2px 5px; }
    .account-hero { height: 235px; }
    .account-hero-inner { height: 235px; }
    .account-hero-logo { left: 50%; bottom: 42px; width: 190px; margin-left: -95px; }
    .account-hero-copy { left: 4%; bottom: 10px; width: 92%; padding: 8px 12px; text-align: center; }
    .account-hero-copy p, .account-hero-copy span { display: none; }
    .account-hero-copy strong { font-size: 17px; }
    .main-content { margin-top: -18px; }
    .auth-story, .auth-card { float: none; width: auto; min-height: 0; }
    .auth-story { padding: 28px 24px; border-right: 0; border-bottom: 3px solid #e0a44d; background-size: cover; }
    .auth-card { padding: 26px 23px 28px; }
    .account-summary-main, .account-pow-box { float: none; width: auto; }
    .account-pow-box { min-height: 0; border-left: 0; border-top: 1px solid #315b6c; text-align: left; }
    .info-list-wide > div { float: none; width: auto; margin-right: 0; }
    .account-footer-inner { text-align: center; }
    .account-footer-inner img, .account-footer-inner div, .account-footer-inner > a { float: none; display: inline-block; vertical-align: middle; }
    .account-footer-inner div { max-width: 60%; padding-top: 0; text-align: left; }
    .account-footer-inner > a { display: block; width: 120px; margin: 12px auto 0; }
}

@media (max-width: 480px) {
    .brand span { display: none; }
    .account-hero-copy strong { font-size: 15px; }
    .auth-story h2 { font-size: 25px; }
    .auth-card h1 { font-size: 25px; }
    .account-summary-main { padding-left: 18px; padding-right: 18px; }
    .account-summary-main h1 { font-size: 23px; }
    .card { padding: 18px 16px; }
    .info-list dt, .info-list dd { float: none; width: auto; margin: 0; text-align: left; }
    .info-list dd { margin-top: 2px; }
}

/* M4-v11 — keep hero artwork and content deck separated; richer pirate-game atmosphere. */
body.account-ocean {
    background: #eee8dc;
    background-image: linear-gradient(#f6f1e8, #e8dfd0);
}
.account-hero {
    height: 320px;
    border-bottom: 3px solid #e0a44d;
    background-position: center 23%;
    box-shadow: inset 0 -16px 30px rgba(8,37,54,.10);
}
.account-hero:before {
    background: #0b2c3d;
    background-image: linear-gradient(to bottom, rgba(8,37,54,.08), rgba(8,37,54,.03) 56%, rgba(8,37,54,.25));
    opacity: 1;
}
.account-hero-inner { height: 320px; }
.account-hero-logo { left: 24px; bottom: 18px; width: 270px; }
.account-hero-copy {
    left: 330px;
    bottom: 72px;
    width: 535px;
    border-top: 1px solid rgba(224,164,77,.55);
    border-bottom: 1px solid rgba(168,69,36,.20);
    background: #fff8e9;
    background: rgba(255,248,233,.91);
    box-shadow: 0 11px 28px rgba(8,37,54,.22);
}
.main-content { margin-top: 26px; padding-bottom: 64px; }
.auth-layout, .card {
    background: #fffaf0;
    background-image: linear-gradient(#fffdf8, #fff8e9);
}
.auth-story {
    background-position: 46% top;
    box-shadow: inset -18px 0 28px rgba(0,0,0,.10);
}
.auth-story:before {
    background: #0b2c3d;
    background-image: linear-gradient(to bottom, rgba(8,37,54,.82), rgba(8,37,54,.92));
    opacity: 1;
}
.account-summary-banner { background: #0b2c3d; background-image: linear-gradient(#12485c, #092f42); }
.account-pow-box { background: #123f52; background-image: linear-gradient(#174f64, #10394c); }
.security-card { box-shadow: 0 8px 21px rgba(20,61,74,.11); }
.account-footer:before { opacity: .13; }

@media (max-width: 900px) {
    .account-hero-logo { left: 5px; bottom: 18px; width: 245px; }
    .account-hero-copy { left: 265px; bottom: 72px; width: 510px; }
}

@media (max-width: 700px) {
    .account-hero { height: 285px; }
    .account-hero-inner { height: 285px; }
    .account-hero-logo { left: 50%; bottom: 74px; width: 180px; margin-left: -90px; }
    .account-hero-copy { left: 4%; bottom: 12px; width: 92%; padding: 9px 12px; }
    .main-content { margin-top: 18px; }
}

@media (max-width: 480px) {
    .account-hero-logo { width: 165px; margin-left: -82px; }
}

@media (max-width: 900px) and (min-width: 701px) {
    .account-hero-logo { left: 1%; width: 28%; max-width: 245px; }
    .account-hero-copy { left: 35%; width: 62%; }
}


/* M4-v12 — visible pirate scenery and equal-height auth artwork without Grid/Flex. */
body.account-ocean {
    background: #e9e1d4 url('../images/theme/sunny-wave.jpg') center 250px no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.account-hero:before {
    background: rgba(8,37,54,.08);
    background-image: linear-gradient(to bottom, rgba(8,37,54,.08), rgba(8,37,54,.03) 56%, rgba(8,37,54,.27));
    opacity: 1;
}
.auth-layout { position: relative; }
.auth-story {
    float: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 45%;
    min-height: 0;
    background-position: 46% center;
    background-size: cover;
}
.auth-story:before {
    background: rgba(8,37,54,.78);
    background-image: linear-gradient(to bottom, rgba(8,37,54,.74), rgba(8,37,54,.88));
    opacity: 1;
}
.auth-card {
    float: none;
    width: 55%;
    margin-left: 45%;
}
.auth-layout:after { content: ''; display: block; clear: both; }
.main-content {
    background: transparent;
}
@media (max-width: 900px) and (min-width: 701px) {
    .auth-story { width: 40%; }
    .auth-card { width: 60%; margin-left: 40%; }
}
@media (max-width: 700px) {
    body.account-ocean { background-position: center 210px; }
    .auth-story { position: relative; left: auto; top: auto; bottom: auto; width: auto; min-height: 0; }
    .auth-card { width: auto; margin-left: 0; }
}

/* M4-v13 — page-specific One Piece backgrounds and account stability */
body.page-login {
    background-color: #17506a;
    background-image:
        radial-gradient(circle at 12% 34%, rgba(255,225,154,.28) 0, rgba(255,225,154,0) 18%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.20) 0, rgba(255,255,255,0) 14%),
        radial-gradient(circle at 82% 76%, rgba(7,43,60,.18) 0, rgba(7,43,60,0) 20%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 34%),
        linear-gradient(to bottom, #0f4560 0, #1b7398 45%, #34a9d3 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* M4-v14 — original nautical backgrounds for player-facing account pages. */
body.page-login {
    background-color: #173f54;
    background-image: url('../images/theme/v14/auth-login-voyage.jpg');
    background-position: center 285px;
    background-repeat: no-repeat;
    background-size: cover;
}
body.page-register {
    background-color: #1b5f76;
    background-image:
        radial-gradient(circle at 15% 28%, rgba(255,240,202,.24) 0, rgba(255,240,202,0) 17%),
        radial-gradient(circle at 84% 70%, rgba(224,164,77,.18) 0, rgba(224,164,77,0) 20%),
        radial-gradient(circle at 76% 18%, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 12%),
        linear-gradient(140deg, rgba(8,37,54,.12), rgba(8,37,54,0) 42%),
        linear-gradient(to bottom, #164e63 0, #2790b3 50%, #6dd6ea 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body.page-forgot {
    background-color: #204f62;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.18) 0, rgba(255,255,255,0) 15%),
        radial-gradient(circle at 80% 72%, rgba(224,164,77,.16) 0, rgba(224,164,77,0) 18%),
        linear-gradient(135deg, rgba(8,37,54,.14), rgba(8,37,54,0) 40%),
        linear-gradient(to bottom, #173f53 0, #2c7b97 46%, #8fdceb 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body.page-account {
    background-color: #eadfc9;
    background-image:
        radial-gradient(circle at 12% 26%, rgba(255,255,255,.30) 0, rgba(255,255,255,0) 18%),
        radial-gradient(circle at 88% 22%, rgba(195,174,127,.18) 0, rgba(195,174,127,0) 22%),
        radial-gradient(circle at 22% 88%, rgba(142,174,179,.12) 0, rgba(142,174,179,0) 20%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 35%),
        linear-gradient(to bottom, #f4ecdd 0, #e8dcc3 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Keep the top visual language familiar while the lower scenery is unique per flow. */
.page-login .account-hero,
.page-register .account-hero,
.page-forgot .account-hero {
    border-bottom-color: #e0a44d;
}

/* Account hero is artwork-first: do not cover crew faces with the large brand card. */
.page-account .account-hero {
    height: 300px;
    background-position: center 12%;
}
.page-account .account-hero-inner { height: 300px; }
.page-account .account-hero:before { opacity: .08; }
.page-account .account-hero-logo,
.page-account .account-hero-copy { display: none; }
.page-account .main-content { margin-top: -34px; }
.page-account .account-page {
    background: transparent;
}
.page-account .main-content:before {
    background: rgba(249,244,233,.78);
}

/* Keep auth cards readable without hiding the new scenic backgrounds. */
.page-login .auth-layout,
.page-register .auth-layout,
.page-forgot .auth-layout {
    background: rgba(255,250,240,.96);
}
.page-login .auth-story { background-image: none; background-color: rgba(7,43,60,.94); }
.page-register .auth-story { background-image: none; background-color: rgba(9,54,67,.93); }
.page-forgot .auth-story { background-image: none; background-color: rgba(11,45,61,.94); }
.page-login .auth-story:before,
.page-register .auth-story:before,
.page-forgot .auth-story:before { display: none; }

@media (max-width: 900px) {
    body.page-login,
    body.page-register,
    body.page-forgot { background-position: center 250px; }
    .page-account .account-hero,
    .page-account .account-hero-inner { height: 250px; }
    .page-account .main-content { margin-top: -22px; }
}


/* M4-v17 final polish — clean CSS-driven account backdrop with no side rails. */
body.page-account {
    background-color: #eadfc9;
    background-image:
        radial-gradient(circle at 12% 26%, rgba(255,255,255,.30) 0, rgba(255,255,255,0) 18%),
        radial-gradient(circle at 88% 22%, rgba(195,174,127,.18) 0, rgba(195,174,127,0) 22%),
        radial-gradient(circle at 22% 88%, rgba(142,174,179,.12) 0, rgba(142,174,179,0) 20%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 35%),
        linear-gradient(to bottom, #f4ecdd 0, #e8dcc3 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.page-account .account-page { background: transparent; }




/* M4-v17 final polish — custom lower-page backgrounds, no auth ghost frame, clearer Account hero crew. */
body.page-login {
    background-color: #17506a;
    background-image:
        radial-gradient(circle at 12% 34%, rgba(255,225,154,.28) 0, rgba(255,225,154,0) 18%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.20) 0, rgba(255,255,255,0) 14%),
        radial-gradient(circle at 82% 76%, rgba(7,43,60,.18) 0, rgba(7,43,60,0) 20%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 34%),
        linear-gradient(to bottom, #0f4560 0, #1b7398 45%, #34a9d3 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body.page-register {
    background-color: #1b5f76;
    background-image:
        radial-gradient(circle at 15% 28%, rgba(255,240,202,.24) 0, rgba(255,240,202,0) 17%),
        radial-gradient(circle at 84% 70%, rgba(224,164,77,.18) 0, rgba(224,164,77,0) 20%),
        radial-gradient(circle at 76% 18%, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 12%),
        linear-gradient(140deg, rgba(8,37,54,.12), rgba(8,37,54,0) 42%),
        linear-gradient(to bottom, #164e63 0, #2790b3 50%, #6dd6ea 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body.page-forgot {
    background-color: #204f62;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.18) 0, rgba(255,255,255,0) 15%),
        radial-gradient(circle at 80% 72%, rgba(224,164,77,.16) 0, rgba(224,164,77,0) 18%),
        linear-gradient(135deg, rgba(8,37,54,.14), rgba(8,37,54,0) 40%),
        linear-gradient(to bottom, #173f53 0, #2c7b97 46%, #8fdceb 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body.page-account {
    background-color: #eadfc9;
    background-image:
        radial-gradient(circle at 12% 26%, rgba(255,255,255,.30) 0, rgba(255,255,255,0) 18%),
        radial-gradient(circle at 88% 22%, rgba(195,174,127,.18) 0, rgba(195,174,127,0) 22%),
        radial-gradient(circle at 22% 88%, rgba(142,174,179,.12) 0, rgba(142,174,179,0) 20%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 35%),
        linear-gradient(to bottom, #f4ecdd 0, #e8dcc3 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.page-account .account-page { background: transparent; }

.page-login .main-content,
.page-register .main-content,
.page-forgot .main-content {
    background: transparent;
}

.page-login .auth-layout,
.page-register .auth-layout,
.page-forgot .auth-layout {
    background: rgba(255,250,240,.97);
}

.page-account .account-hero {
    height: 360px;
    background-image: url('../images/theme/crew-wave.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #9ddaea;
}
.page-account .account-hero-inner {
    height: 360px;
}
.page-account .account-hero:before {
    display: block;
    background: rgba(8,37,54,.035);
    opacity: 1;
}
.page-account .account-hero:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 76px;
    background: linear-gradient(to bottom, rgba(234,223,201,0), rgba(234,223,201,.72) 62%, rgba(234,223,201,.96));
}
.page-account .main-content {
    margin-top: -26px;
}

@media (max-width: 900px) {
    body.page-login,
    body.page-register,
    body.page-forgot { background-position: center top; }
    .page-account .account-hero,
    .page-account .account-hero-inner {
        height: 285px;
    }
    .page-account .account-hero {
        background-size: 100% auto;
        background-position: center top;
    }
    .page-account .main-content {
        margin-top: -18px;
    }
}
@media (max-width: 620px) {
    .page-account .account-hero,
    .page-account .account-hero-inner {
        height: 230px;
    }
    .page-account .account-hero {
        background-size: 100% auto;
        background-position: center top;
    }
    .page-account .main-content {
        margin-top: 0;
    }
}


/* M5-v3 — final Account continuity, clearer crew hero, and shop shell. */
body.page-account {
    background-color: #efe4d1;
    background-image:
        radial-gradient(circle at 10% 24%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 20%),
        radial-gradient(circle at 88% 72%, rgba(198,173,119,.10) 0, rgba(198,173,119,0) 24%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.page-account .account-page {
    background: transparent;
}
.page-account .main-content:before {
    display: none;
}
.page-account .account-hero,
.page-account .account-hero-inner {
    height: 440px;
}
.page-account .account-hero {
    background-image: url('../images/theme/crew-wave.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #9ddaea;
}
.page-account .account-hero:before {
    background: rgba(8,37,54,.015);
    opacity: 1;
}
.page-account .account-hero:after {
    height: 54px;
    background: linear-gradient(to bottom, rgba(239,228,209,0), rgba(239,228,209,.42) 68%, rgba(239,228,209,.78));
}
.page-account .main-content {
    margin-top: -24px;
}

body.page-shop {
    background: #efe4d1;
}
.page-shop .main-content { margin-top: -24px; }
.shop-banner { margin-bottom: 15px; }
.shop-banner h1 { margin: 0 0 7px; color: #123f52; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; }
.shop-banner p:last-child { margin-bottom: 0; color: #667a7e; }
.shop-grid { overflow: hidden; margin: 0 -1%; }
.shop-grid:after { content: ''; display: block; clear: both; }
.shop-card { float: left; width: 48%; min-height: 210px; margin: 0 1% 15px; }
.shop-card p { color: #667a7e; }
.shop-status { display: inline-block; margin-top: 14px; padding: 7px 10px; border: 1px solid #c8b995; border-radius: 4px; background: #f3ead6; color: #795b33; font-size: 10px; font-weight: bold; text-transform: uppercase; }

@media (max-width: 900px) {
    .page-account .account-hero,
    .page-account .account-hero-inner { height: 330px; }
    .page-account .account-hero { background-size: cover; background-position: center top; }
    .shop-card { float: none; width: auto; margin-left: 1%; margin-right: 1%; min-height: 0; }
}
@media (max-width: 620px) {
    .page-account .account-hero,
    .page-account .account-hero-inner { height: 255px; }
    .page-account .account-hero { background-size: cover; background-position: center top; }
    .page-account .main-content { margin-top: 0; }
}

/* M6-v1 — final Account hero reveal + functional POW -> Gold shop. */
.page-account .account-hero,
.page-account .account-hero-inner {
    height: 520px;
}
.page-account .account-hero {
    background-position: center top;
    background-size: 100% auto;
}
.page-account .account-hero:after {
    height: 42px;
    background: linear-gradient(to bottom, rgba(239,228,209,0), rgba(239,228,209,.28) 72%, rgba(239,228,209,.62));
}
.page-account .main-content { margin-top: -18px; }

body.page-shop {
    background-color: #efe4d1;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 18%),
        radial-gradient(circle at 88% 72%, rgba(198,173,119,.12) 0, rgba(198,173,119,0) 24%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.page-shop .main-content { margin-top: -24px; padding-bottom: 58px; }
.shop-banner { min-height: 118px; margin-bottom: 15px; overflow: hidden; }
.shop-banner-copy { float: left; width: 70%; }
.shop-banner h1 { margin: 0 0 7px; color: #123f52; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; }
.shop-banner p:last-child { margin-bottom: 0; color: #667a7e; }
.shop-pow-balance { float: right; width: 25%; min-height: 72px; padding: 9px 14px; border-left: 1px solid #ddd5c5; text-align: right; }
.shop-pow-balance span, .shop-pow-balance small { display: block; color: #718083; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.shop-pow-balance strong { display: block; color: #c88d2c; font-family: Georgia, 'Times New Roman', serif; font-size: 30px; line-height: 1.15; }
.shop-grid { overflow: hidden; margin: 0 -1%; }
.shop-grid:after, .shop-banner:after { content: ''; display: block; clear: both; }
.shop-card { float: left; width: 48%; min-height: 390px; margin: 0 1% 15px; }
.shop-card p { color: #667a7e; }
.shop-card .field select { display: block; width: 100%; height: 43px; margin-top: 5px; padding: 8px 10px; border: 1px solid #9aadb0; border-radius: 4px; background: #fffdf8; color: #293f48; }
.shop-card .button[disabled] { cursor: default; opacity: .55; }
.shop-status { display: inline-block; margin-top: 14px; padding: 7px 10px; border: 1px solid #c8b995; border-radius: 4px; background: #f3ead6; color: #795b33; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.shop-warning { margin: 12px 0; padding: 10px 12px; border: 1px solid #c98765; border-radius: 4px; background: #fbebe0; color: #8c432b; font-size: 11px; }
.shop-note { margin: 15px 0; padding: 10px 12px; border-left: 3px solid #e0a44d; background: #f8f0df; color: #667a7e; font-size: 11px; }
.shop-history-card { clear: both; margin-bottom: 15px; }
.shop-history-card h2 { margin-bottom: 15px; }

@media (max-width: 900px) {
    .page-account .account-hero,
    .page-account .account-hero-inner { height: 390px; }
    .page-account .account-hero { background-size: 100% auto; background-position: center top; }
    .shop-banner-copy, .shop-pow-balance { float: none; width: auto; }
    .shop-pow-balance { margin-top: 15px; padding-left: 0; border-left: 0; border-top: 1px solid #ddd5c5; text-align: left; }
    .shop-card { float: none; width: auto; min-height: 0; margin-left: 1%; margin-right: 1%; }
}
@media (max-width: 620px) {
    .page-account .account-hero,
    .page-account .account-hero-inner { height: 300px; }
    .page-account .account-hero { background-size: cover; background-position: center top; }
    .page-account .main-content { margin-top: 0; }
}

/* M7-v1 — consolidated shop, manual card top-up, player-only guidance. */
.page-shop .shop-card { min-height: 0; }
.page-shop .shop-card-full { float: none; width: 98%; }
.page-shop .shop-guidance { margin: 15px 0; padding: 11px 13px; border-left: 3px solid #e0a44d; background: #f8f0df; color: #4f6268; font-size: 11px; line-height: 1.55; }
.page-shop .shop-guidance strong { color: #a84524; }
.page-shop .shop-guidance span { margin-left: 4px; }
.page-shop .shop-guidance-list ul { margin: 8px 0 0 17px; padding: 0; }
.page-shop .shop-guidance-list li { margin: 0 0 6px; }
.page-shop .shop-rate-preview { min-height: 18px; margin: 8px 0 0; color: #9b6b24; font-size: 11px; font-weight: bold; }
.page-shop .shop-history-grid { clear: both; }
.page-shop .shop-history-grid:after { content: ''; display: block; clear: both; }
.page-shop .shop-history-card { margin-bottom: 15px; }
.page-shop .shop-history-card h2 { margin-bottom: 15px; }
.page-shop input[type="text"], .page-shop select { box-sizing: border-box; }
.page-shop [data-single-submit][data-submitting="1"] .button { opacity: .65; cursor: default; }

@media (max-width: 900px) {
    .page-shop .shop-card-full { width: auto; margin-left: 1%; margin-right: 1%; }
}

/* M8-v2 — shared Grand Line server picker reused by Home / Account / Shop. */
.server-dialog { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: #000; background: rgba(0,0,0,.82); }
.server-dialog-panel { width: 90%; max-width: 930px; margin: 28px auto; overflow: hidden; border: 1px solid #e0a44d; border-radius: 8px; background: #fffaf0; color: #29414b; box-shadow: 0 18px 55px rgba(0,0,0,.53); }
.dialog-head { min-height: 105px; overflow: hidden; padding: 20px 23px 16px; border-bottom: 4px solid #e0a44d; background: #0b2c3d; }
.dialog-head-copy { float: left; width: 82%; }
.dialog-head .section-kicker { margin: 0 0 6px; color: #e5a547; font-size: 10px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
.dialog-head h2 { margin: 0; color: #fff1c9; font-family: Georgia, 'Times New Roman', serif; font-size: 29px; }
.dialog-head p { margin: 5px 0 0; color: #bdcece; font-size: 11px; }
.dialog-close { float: right; width: 42px; height: 42px; margin-top: 6px; border: 1px solid #e0a44d; border-radius: 21px; background: #b94a24; color: #fff4d8; cursor: pointer; font-size: 24px; line-height: 33px; }
.dialog-close:hover { background: #c85b2c; }
.modal-server-search { padding: 15px 19px 12px; border-bottom: 1px solid #d8cfbf; background: #f7f1e4; }
.modal-server-search label { display: block; margin-bottom: 6px; color: #526a6e; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.modal-search-input { overflow: hidden; }
.modal-search-input input { float: left; width: 79%; height: 42px; padding: 9px 11px; border: 1px solid #9aadb0; border-radius: 4px 0 0 4px; background: #fffdf8; color: #293f48; outline: none; box-sizing: border-box; }
.modal-search-input span { float: left; width: 21%; height: 42px; padding: 11px 9px; border: 1px solid #315b6c; border-left: 0; border-radius: 0 4px 4px 0; background: #123f52; color: #e4eeee; font-size: 10px; text-align: center; box-sizing: border-box; }
.modal-search-input span b { color: #f0c56a; }
.dialog-server-list { max-height: 560px; overflow-y: auto; padding: 12px 14px 5px; background: #f2eee4; }
.dialog-server-row { display: block; position: relative; width: 100%; min-height: 67px; margin: 0 0 7px; padding: 10px 162px 9px 86px; border: 1px solid #d2cab9; border-left: 4px solid #879c9d; border-radius: 4px; background: #fffdf8; color: #2d444c; cursor: pointer; font-family: inherit; font-size: inherit; text-align: left; text-decoration: none; box-sizing: border-box; }
.dialog-server-row:hover { border-left-color: #e0a44d; background: #fff9ec; text-decoration: none; }
.dialog-server-row.selected-server { border-color: #d7b06b; border-left-color: #e0a44d; background: #f9edd1; }
.dialog-server-number { position: absolute; left: 14px; top: 17px; width: 60px; color: #a84524; font-family: Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: bold; }
.dialog-server-main { display: block; }
.dialog-server-main strong, .dialog-server-main small { display: block; }
.dialog-server-main strong { color: #123f52; font-size: 15px; }
.dialog-server-main small { margin-top: 4px; color: #718083; font-size: 10px; }
.status-badge { display: inline-block; padding: 5px 9px; border-radius: 11px; font-size: 9px; font-style: normal; font-weight: bold; text-transform: uppercase; }
.status-badge.open { background: #e3f1e6; color: #2f6846; }
.status-badge.closed { background: #f4e3dc; color: #864534; }
.dialog-server-row .status-badge { position: absolute; right: 17px; top: 14px; }
.dialog-selected-mark { display: none; position: absolute; right: 16px; bottom: 9px; color: #a84524; font-size: 8px; font-weight: bold; text-transform: uppercase; }
.dialog-server-row.selected-server .dialog-selected-mark { display: block; }
.search-empty { margin: 14px 18px; padding: 12px; border: 1px dashed #b96943; background: #faedd8; color: #843f2b; text-align: center; }
.dialog-empty { margin: 25px; padding: 20px; border: 1px dashed #b8b1a5; background: #fffdf8; text-align: center; }
.dialog-foot { min-height: 54px; overflow: hidden; padding: 11px 17px; border-top: 1px solid #d8cfbf; background: #f7f1e4; }
.dialog-foot span { float: left; width: 76%; padding-top: 7px; color: #6f8083; font-size: 10px; }
.dialog-foot-close { float: right; min-width: 110px; height: 32px; border: 1px solid #8f351f; border-radius: 4px; background: #b94a24; color: #fff4d8; cursor: pointer; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.dialog-foot-close:hover { background: #c85b2c; }
.modal-open { overflow: hidden; }

.page-account .account-server-selector { clear: both; position: relative; min-height: 82px; margin-top: 14px; padding: 13px 170px 11px 15px; border: 1px solid #d3c8b4; border-left: 4px solid #e0a44d; border-radius: 5px; background: #f8f1e2; }
.page-account .account-server-selector-copy span, .page-account .account-server-selector-copy strong, .page-account .account-server-selector-copy small { display: block; }
.page-account .account-server-selector-copy span { color: #7b6a4d; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.page-account .account-server-selector-copy strong { margin-top: 3px; color: #123f52; font-size: 15px; }
.page-account .account-server-selector-copy small { margin-top: 3px; color: #677b80; font-size: 10px; }
.page-account .account-server-button { position: absolute; right: 14px; top: 15px; min-width: 140px; }
.page-account .account-server-button[disabled] { cursor: default; opacity: .55; }
.page-account .account-server-selector p { margin: 8px 0 0; color: #7b6a4d; font-size: 9px; }

.page-shop .shop-server-field > label { display: block; margin-bottom: 5px; }
.page-shop .shop-selected-server { position: relative; min-height: 69px; padding: 12px 142px 10px 13px; border: 1px solid #9aadb0; border-left: 4px solid #e0a44d; border-radius: 4px; background: #fffaf0; }
.page-shop .shop-selected-server-copy strong, .page-shop .shop-selected-server-copy small { display: block; }
.page-shop .shop-selected-server-copy strong { color: #123f52; font-size: 14px; }
.page-shop .shop-selected-server-copy small { margin-top: 5px; color: #687b80; font-size: 10px; }
.page-shop .shop-choose-server { position: absolute; right: 10px; top: 15px; min-width: 120px; height: 36px; border: 1px solid #8f351f; border-radius: 4px; background: #b94a24; color: #fff4d8; cursor: pointer; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.page-shop .shop-choose-server:hover { background: #c85b2c; }
.page-shop .shop-choose-server[disabled] { cursor: default; opacity: .55; }

.page-shop .shop-history-tabs { margin: -20px -20px 18px; overflow: hidden; border-bottom: 1px solid #d0c6b4; background: #f2eadb; }
.page-shop .shop-history-tab { float: left; min-width: 205px; padding: 14px 18px 12px; border: 0; border-right: 1px solid #d0c6b4; border-bottom: 3px solid transparent; background: #f2eadb; color: #526a6e; cursor: pointer; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.page-shop .shop-history-tab:hover { background: #fff6e5; color: #a84524; }
.page-shop .shop-history-tab.active { border-bottom-color: #e0a44d; background: #fffaf0; color: #123f52; }
.page-shop .shop-history-panel { min-height: 70px; }

@media (max-width: 620px) {
    .server-dialog-panel { width: 95%; margin: 12px auto; }
    .dialog-head { padding-left: 15px; padding-right: 15px; }
    .dialog-head h2 { font-size: 24px; }
    .modal-search-input input, .modal-search-input span { float: none; width: 100%; border: 1px solid #9aadb0; border-radius: 4px; }
    .modal-search-input span { margin-top: 5px; border-color: #315b6c; }
    .dialog-server-list { max-height: 500px; padding-left: 7px; padding-right: 7px; }
    .dialog-server-row { padding-left: 68px; padding-right: 10px; padding-bottom: 38px; }
    .dialog-server-number { left: 10px; width: 50px; }
    .dialog-server-row .status-badge { top: auto; right: auto; left: 68px; bottom: 10px; }
    .dialog-selected-mark { right: 9px; bottom: 13px; }
    .dialog-foot span, .dialog-foot-close { float: none; width: 100%; }
    .dialog-foot-close { margin-top: 7px; }
    .page-account .account-server-selector { padding-right: 15px; }
    .page-account .account-server-button { position: static; width: 100%; margin-top: 11px; }
    .page-shop .shop-selected-server { padding-right: 13px; }
    .page-shop .shop-choose-server { position: static; width: 100%; margin-top: 10px; }
    .page-shop .shop-history-tab { float: none; width: 100%; min-width: 0; border-right: 0; border-bottom: 1px solid #d0c6b4; }
    .page-shop .shop-history-tab.active { border-bottom: 3px solid #e0a44d; }
}


/* M8-v2.2 — compact server action bars for Account/Shop and refreshed background. */
body.account-ocean {
    background-color: #e8dfcf;
    background-image:
        radial-gradient(circle at 16% 14%, rgba(255,246,205,.52), transparent 24%),
        radial-gradient(circle at 84% 10%, rgba(89,170,211,.18), transparent 22%),
        linear-gradient(to bottom, #f7f2e9 0, #ede4d4 42%, #dbc99b 42%, #d5bf8c 100%);
    background-attachment: fixed;
}
.page-login .account-hero,
.page-register .account-hero,
.page-forgot-password .account-hero,
.page-reset-password .account-hero {
    background-image:
        linear-gradient(to right, rgba(8,37,54,.34), rgba(8,37,54,.10)),
        url('../images/theme/sunny-wave.jpg');
    background-position: center 28%, center top;
    background-size: cover, cover;
}
.page-login .auth-story,
.page-register .auth-story,
.page-forgot-password .auth-story,
.page-reset-password .auth-story {
    background-image:
        linear-gradient(to bottom, rgba(8,37,54,.84), rgba(8,37,54,.92)),
        radial-gradient(circle at 24% 18%, rgba(224,164,77,.18), transparent 24%),
        url('../images/theme/crew-wave.jpg');
    background-position: left top, left top, 52% center;
    background-size: auto, auto, cover;
}
.server-action-strip { margin-top: 10px; padding: 12px 14px; border: 1px solid #d3c8b4; border-left: 4px solid #e0a44d; border-radius: 5px; background: #f8f1e2; }
.server-action-label { margin: 0 0 8px; color: #7b6a4d; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.server-action-tools { overflow: hidden; }
.server-action-search { float: left; width: 36%; height: 38px; padding: 8px 10px; border: 1px solid #9aadb0; border-radius: 4px; background: #fffdf8; color: #293f48; }
.server-action-search-button, .server-action-choose-button, .server-action-launch-button { float: left; min-width: 118px; margin-left: 8px; text-align: center; }
.server-action-launch-button { text-decoration: none; }
.server-action-selected { clear: both; padding-top: 9px; }
.server-action-selected strong, .server-action-selected span { display: block; }
.server-action-selected strong { color: #123f52; font-size: 14px; }
.server-action-selected span { margin-top: 3px; color: #677b80; font-size: 10px; }
.server-action-hint { margin: 6px 0 0; color: #7b6a4d; font-size: 9px; }
.page-account .account-server-selector { display: none; }
.page-shop .shop-selected-server { display: none; }
.page-shop .shop-server-field > label { display: block; margin-bottom: 5px; }
@media (max-width: 900px) {
    .server-action-search { width: 34%; }
    .server-action-search-button, .server-action-choose-button, .server-action-launch-button { min-width: 104px; }
}
@media (max-width: 620px) {
    .server-action-search, .server-action-search-button, .server-action-choose-button, .server-action-launch-button { float: none; width: 100%; margin: 0 0 8px; }
    .server-action-selected { padding-top: 2px; }
}

/* M8-v2.3 — header Play Game, unified crew hero, auth Grand Line backdrop, searchable Gold destination. */
.nav .nav-play-game {
    border-color: #e0a44d;
    background: #b94a24;
    color: #fff4d8;
    box-shadow: inset 0 0 0 1px rgba(255,235,178,.12);
}
.nav .nav-play-game:hover { background: #c85b2c; color: #fff; }

/* Account + Shop share the same crew artwork. Crop lower than v2.2 so Sanji/Nami stay visible. */
.page-account .account-hero,
.page-shop .account-hero {
    height: 470px;
    background-color: #8fd8e9;
    background-image: url('../images/theme/crew-wave.jpg');
    background-repeat: no-repeat;
    background-position: center 28%;
    background-size: cover;
}
.page-account .account-hero-inner,
.page-shop .account-hero-inner { height: 470px; }
.page-account .account-hero-logo,
.page-account .account-hero-copy,
.page-shop .account-hero-logo,
.page-shop .account-hero-copy { display: none; }
.page-account .account-hero:before,
.page-shop .account-hero:before { background: rgba(8,37,54,.025); opacity: 1; }
.page-account .account-hero:after,
.page-shop .account-hero:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58px;
    background: linear-gradient(to bottom, rgba(239,228,209,0), rgba(239,228,209,.45) 68%, rgba(239,228,209,.82));
}
.page-account .main-content,
.page-shop .main-content { margin-top: -22px; }

/* Self-contained nautical background asset for Login/Register/Recovery. */
body.page-login,
body.page-register,
body.page-forgot,
body.page-reset-password {
    background-color: #082c3e;
    background-image: url('../images/theme/m8-auth-grandline.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.page-login .account-hero,
.page-register .account-hero,
.page-forgot .account-hero,
.page-reset-password .account-hero {
    background-color: #0b4560;
    background-image: linear-gradient(to bottom, rgba(5,34,49,.02), rgba(5,34,49,.18)), url('../images/theme/m8-auth-grandline.jpg');
    background-position: center 18%, center 18%;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
}
.page-login .auth-layout,
.page-register .auth-layout,
.page-forgot .auth-layout,
.page-reset-password .auth-layout {
    border-color: rgba(224,164,77,.72);
    box-shadow: 0 18px 48px rgba(3,28,43,.38);
}
.page-login .auth-story,
.page-register .auth-story,
.page-forgot .auth-story,
.page-reset-password .auth-story {
    background-color: #0b3447;
    background-image: linear-gradient(to bottom, rgba(16,72,91,.96), rgba(6,37,52,.98));
}
.page-login .auth-story:before,
.page-register .auth-story:before,
.page-forgot .auth-story:before,
.page-reset-password .auth-story:before { display: none; }

/* Gold destination keeps the familiar select, with a fast ID/name finder above it. */
.page-shop .gold-server-fast-find {
    margin: 6px 0 9px;
    padding: 9px 10px 7px;
    border: 1px solid #d3c08e;
    border-left: 4px solid #e0a44d;
    border-radius: 5px;
    background: #f8efdc;
}
.page-shop .gold-server-fast-label {
    display: block;
    margin: 0 0 6px;
    color: #76552f;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.page-shop .gold-server-fast-tools { overflow: hidden; }
.page-shop .gold-server-fast-tools input {
    float: left;
    width: 72%;
    height: 40px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #9aadb0;
    border-radius: 4px 0 0 4px;
    background: #fffdf8;
    color: #293f48;
    outline: none;
}
.page-shop .gold-server-fast-tools input:focus {
    border-color: #d0953f;
    box-shadow: inset 0 0 0 1px rgba(224,164,77,.18);
}
.page-shop .gold-server-fast-button {
    float: left;
    width: 28%;
    min-height: 40px;
    margin: 0;
    padding: 9px 8px;
    border-radius: 0 4px 4px 0;
    font-size: 10px;
}
.page-shop .gold-server-fast-result {
    min-height: 17px;
    margin: 5px 0 0;
    font-size: 10px;
    font-weight: bold;
}
.page-shop .gold-server-fast-result.success { color: #2f6846; }
.page-shop .gold-server-fast-result.error { color: #923621; }
.page-shop .shop-server-field > select {
    margin-top: 0;
    border-color: #78929a;
    background: #fffdf8;
}

@media (max-width: 900px) {
    .page-account .account-hero,
    .page-shop .account-hero,
    .page-account .account-hero-inner,
    .page-shop .account-hero-inner { height: 350px; }
    .page-account .account-hero,
    .page-shop .account-hero { background-position: center 26%; }
}
@media (max-width: 620px) {
    .page-account .account-hero,
    .page-shop .account-hero,
    .page-account .account-hero-inner,
    .page-shop .account-hero-inner { height: 270px; }
    .page-account .account-hero,
    .page-shop .account-hero { background-position: center 24%; }
    .page-account .main-content,
    .page-shop .main-content { margin-top: 0; }
    .page-shop .gold-server-fast-tools input,
    .page-shop .gold-server-fast-button {
        float: none;
        width: 100%;
        border-radius: 4px;
    }
    .page-shop .gold-server-fast-button { margin-top: 6px; }
}

/* M8-v2.4 — UI polish: custom unified backgrounds, cleaner controls, compact shop server finder. */
body.account-ocean {
    background-color: #efe4d1;
    background-image:
        radial-gradient(circle at 12% 16%, rgba(255,247,220,.75) 0, rgba(255,247,220,0) 18%),
        radial-gradient(circle at 88% 12%, rgba(105,182,210,.16) 0, rgba(105,182,210,0) 16%),
        linear-gradient(to bottom, #f6efe3 0, #efe4d1 38%, #e0cfab 100%);
    background-attachment: fixed;
}

body.page-login,
body.page-register,
body.page-forgot,
body.page-reset-password {
    background-color: #0b3950;
    background-image:
        radial-gradient(circle at 16% 18%, rgba(255,227,149,.25) 0, rgba(255,227,149,0) 16%),
        radial-gradient(circle at 84% 16%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 13%),
        radial-gradient(circle at 75% 78%, rgba(6,29,42,.28) 0, rgba(6,29,42,0) 20%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 25%),
        linear-gradient(to bottom, #0d4e68 0, #1783a7 46%, #4dc0dc 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.page-login .account-hero,
.page-register .account-hero,
.page-forgot .account-hero,
.page-reset-password .account-hero {
    height: 245px;
    border-bottom: 3px solid #e0a44d;
    background-color: #0d4560;
    background-image:
        radial-gradient(circle at 15% 28%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 18%),
        radial-gradient(circle at 82% 20%, rgba(255,219,132,.16) 0, rgba(255,219,132,0) 18%),
        linear-gradient(to bottom, rgba(8,37,54,.18), rgba(8,37,54,.48)),
        linear-gradient(to right, #1fa3cb 0, #1783a7 35%, #0d4e68 100%);
}
.page-login .account-hero-inner,
.page-register .account-hero-inner,
.page-forgot .account-hero-inner,
.page-reset-password .account-hero-inner { height: 245px; }
.page-login .auth-layout,
.page-register .auth-layout,
.page-forgot .auth-layout,
.page-reset-password .auth-layout {
    border: 1px solid rgba(224,164,77,.65);
    background: rgba(255,250,240,.95);
    box-shadow: 0 18px 44px rgba(6,31,45,.30);
}
.page-login .auth-story,
.page-register .auth-story,
.page-forgot .auth-story,
.page-reset-password .auth-story {
    background-color: #10384b;
    background-image:
        radial-gradient(circle at 18% 18%, rgba(224,164,77,.18) 0, rgba(224,164,77,0) 20%),
        linear-gradient(to bottom, rgba(20,84,106,.96), rgba(9,43,58,.98));
    box-shadow: inset -16px 0 30px rgba(0,0,0,.10);
}
.page-login .auth-story:before,
.page-register .auth-story:before,
.page-forgot .auth-story:before,
.page-reset-password .auth-story:before { display: none; }

.page-account .account-hero,
.page-shop .account-hero {
    height: 260px;
    border-bottom: 3px solid #e0a44d;
    background-color: #0f4862;
    background-image:
        radial-gradient(circle at 14% 26%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 18%),
        radial-gradient(circle at 84% 18%, rgba(255,218,129,.15) 0, rgba(255,218,129,0) 16%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 34%),
        linear-gradient(to bottom, #1fa8cc 0, #1590b1 44%, #0f4862 100%);
    background-repeat: no-repeat;
}
.page-account .account-hero-inner,
.page-shop .account-hero-inner { height: 260px; }
.page-account .account-hero:before,
.page-shop .account-hero:before {
    background:
        linear-gradient(to bottom, rgba(8,37,54,.04), rgba(8,37,54,.18) 55%, rgba(8,37,54,.34)),
        repeating-linear-gradient(to right, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 90px);
    opacity: 1;
}
.page-account .account-hero:after,
.page-shop .account-hero:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 66px;
    background: linear-gradient(to bottom, rgba(239,228,209,0), rgba(239,228,209,.52) 72%, rgba(239,228,209,.92));
}
.page-account .main-content,
.page-shop .main-content { margin-top: -14px; }
.page-account .account-hero-logo,
.page-account .account-hero-copy,
.page-shop .account-hero-logo,
.page-shop .account-hero-copy { display: none; }

.card {
    border-color: #d8cdb8;
    border-top-color: #e0a44d;
    background: linear-gradient(#fffdf8, #fff8ee);
    box-shadow: 0 10px 24px rgba(20,61,74,.10);
}
.account-summary-banner {
    background: linear-gradient(135deg, #16485b 0, #0b2f42 100%);
    box-shadow: 0 10px 26px rgba(20,57,72,.18);
}
.account-pow-box { background: linear-gradient(180deg, #19546a 0, #0f3a4e 100%); }
.shop-banner {
    min-height: 126px;
    background: linear-gradient(#fffdf8, #fff7ea);
}
.shop-banner-copy { width: 68%; }
.shop-pow-balance { width: 27%; }

.field label { color: #496269; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; }
.field input,
.field select,
.page-shop .shop-card .field select {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 6px;
    padding: 10px 13px;
    border: 1px solid #9cb0b5;
    border-radius: 8px;
    background: #fffdfa;
    color: #233c45;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(8,37,54,.04);
}
.field input:focus,
.field select:focus,
.page-shop .shop-card .field select:focus,
.page-shop .gold-server-fast-tools input:focus {
    border-color: #d0953f;
    box-shadow: 0 0 0 3px rgba(224,164,77,.14);
}
.button {
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 8px;
    background: linear-gradient(#c95a2b, #b44622);
    box-shadow: 0 3px 0 #8e341a;
}
.button:hover { background: linear-gradient(#d56633, #bf4f25); }
.button.full { width: 100%; }

.page-shop .shop-server-field > label { margin-bottom: 8px; }
.page-shop .gold-server-fast-find {
    margin: 4px 0 10px;
    padding: 14px;
    border: 1px solid #d6c39a;
    border-left: 4px solid #e0a44d;
    border-radius: 8px;
    background: linear-gradient(#fcf4e5, #f8edd9);
}
.page-shop .gold-server-fast-label {
    margin: 0 0 8px;
    color: #78562f;
    font-size: 10px;
    letter-spacing: 1px;
}
.page-shop .gold-server-fast-tools { overflow: hidden; }
.page-shop .gold-server-fast-tools input {
    float: left;
    width: 70%;
    height: 44px;
    margin: 0;
    padding: 10px 13px;
    border: 1px solid #9cb0b5;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #fffdfa;
}
.page-shop .gold-server-fast-button {
    float: left;
    width: 30%;
    min-height: 44px;
    margin: 0;
    border-radius: 0 8px 8px 0;
    font-size: 10px;
}
.page-shop .gold-server-fast-result {
    min-height: 18px;
    margin: 8px 0 0;
    font-size: 10px;
    font-weight: bold;
}
.page-shop .gold-server-fast-find select {
    margin-top: 10px;
    border-color: #7d98a0;
    background: #fffdfa;
}
.page-shop .shop-guidance {
    border-left-width: 4px;
    border-radius: 0 8px 8px 0;
    background: #f8f0df;
}
.page-shop .shop-history-tabs {
    background: #f4ecdd;
}
.page-shop .shop-history-tab.active {
    background: #fffaf0;
}

@media (max-width: 900px) {
    .page-account .account-hero,
    .page-shop .account-hero,
    .page-account .account-hero-inner,
    .page-shop .account-hero-inner { height: 220px; }
    .page-login .account-hero,
    .page-register .account-hero,
    .page-forgot .account-hero,
    .page-reset-password .account-hero,
    .page-login .account-hero-inner,
    .page-register .account-hero-inner,
    .page-forgot .account-hero-inner,
    .page-reset-password .account-hero-inner { height: 210px; }
}
@media (max-width: 620px) {
    .page-account .account-hero,
    .page-shop .account-hero,
    .page-account .account-hero-inner,
    .page-shop .account-hero-inner,
    .page-login .account-hero,
    .page-register .account-hero,
    .page-forgot .account-hero,
    .page-reset-password .account-hero,
    .page-login .account-hero-inner,
    .page-register .account-hero-inner,
    .page-forgot .account-hero-inner,
    .page-reset-password .account-hero-inner { height: 180px; }
    .page-account .main-content,
    .page-shop .main-content { margin-top: 0; }
    .page-shop .gold-server-fast-tools input,
    .page-shop .gold-server-fast-button {
        float: none;
        width: 100%;
        border-radius: 8px;
    }
    .page-shop .gold-server-fast-button { margin-top: 8px; }
    .shop-banner-copy,
    .shop-pow-balance { float: none; width: auto; }
}

/* M8-v2.5 — guest Play Game + Home-style crew background across Auth / Account / Shop. */
body.account-ocean {
    background-color: #f3ead9;
    background-image:
        radial-gradient(circle at 12% 14%, rgba(255,250,228,.58) 0, rgba(255,250,228,0) 18%),
        linear-gradient(to bottom, #f8f2e7 0, #f1e6d3 54%, #dfc99a 100%);
    background-attachment: fixed;
}

/* Reuse the same crew-wave art direction as Home instead of the v2.4 blue gradient panels. */
.page-login .account-hero,
.page-register .account-hero,
.page-forgot .account-hero,
.page-reset-password .account-hero,
.page-account .account-hero,
.page-shop .account-hero {
    height: 430px;
    border-bottom: 3px solid #e0a44d;
    background-color: #8fd6ea;
    background-image:
        linear-gradient(to bottom, rgba(7,37,54,.08), rgba(7,37,54,.02) 46%, rgba(7,37,54,.20)),
        url('../images/theme/crew-wave.jpg');
    background-position: center top, center 26%;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
}
.page-login .account-hero-inner,
.page-register .account-hero-inner,
.page-forgot .account-hero-inner,
.page-reset-password .account-hero-inner,
.page-account .account-hero-inner,
.page-shop .account-hero-inner { height: 430px; }

.page-login .account-hero:before,
.page-register .account-hero:before,
.page-forgot .account-hero:before,
.page-reset-password .account-hero:before,
.page-account .account-hero:before,
.page-shop .account-hero:before {
    background: linear-gradient(to bottom, rgba(8,37,54,.02), rgba(8,37,54,.03) 56%, rgba(8,37,54,.24));
    opacity: 1;
}
.page-login .account-hero:after,
.page-register .account-hero:after,
.page-forgot .account-hero:after,
.page-reset-password .account-hero:after,
.page-account .account-hero:after,
.page-shop .account-hero:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 92px;
    background: linear-gradient(to bottom, rgba(248,242,231,0), rgba(248,242,231,.34) 58%, rgba(248,242,231,.88));
}

/* Home already contains the brand in the artwork; avoid stacking the old oversized Auth hero logo/copy on top. */
.page-login .account-hero-logo,
.page-login .account-hero-copy,
.page-register .account-hero-logo,
.page-register .account-hero-copy,
.page-forgot .account-hero-logo,
.page-forgot .account-hero-copy,
.page-reset-password .account-hero-logo,
.page-reset-password .account-hero-copy,
.page-account .account-hero-logo,
.page-account .account-hero-copy,
.page-shop .account-hero-logo,
.page-shop .account-hero-copy { display: none; }

.page-login .main-content,
.page-register .main-content,
.page-forgot .main-content,
.page-reset-password .main-content {
    margin-top: -176px;
    padding-bottom: 72px;
    background: transparent;
}
.page-account .main-content,
.page-shop .main-content {
    margin-top: -96px;
    padding-bottom: 72px;
}

.page-login .auth-layout,
.page-register .auth-layout,
.page-forgot .auth-layout,
.page-reset-password .auth-layout {
    border-color: rgba(224,164,77,.78);
    background: rgba(255,250,240,.97);
    box-shadow: 0 22px 54px rgba(7,37,54,.30);
}
.page-login .auth-story,
.page-register .auth-story,
.page-forgot .auth-story,
.page-reset-password .auth-story {
    background-color: #0b2c3d;
    background-image: linear-gradient(145deg, rgba(19,73,92,.98), rgba(7,35,50,.99));
}

@media (max-width: 900px) {
    .page-login .account-hero,
    .page-register .account-hero,
    .page-forgot .account-hero,
    .page-reset-password .account-hero,
    .page-account .account-hero,
    .page-shop .account-hero,
    .page-login .account-hero-inner,
    .page-register .account-hero-inner,
    .page-forgot .account-hero-inner,
    .page-reset-password .account-hero-inner,
    .page-account .account-hero-inner,
    .page-shop .account-hero-inner { height: 350px; }
    .page-login .account-hero,
    .page-register .account-hero,
    .page-forgot .account-hero,
    .page-reset-password .account-hero,
    .page-account .account-hero,
    .page-shop .account-hero { background-position: center top, center 24%; }
    .page-login .main-content,
    .page-register .main-content,
    .page-forgot .main-content,
    .page-reset-password .main-content { margin-top: -120px; }
    .page-account .main-content,
    .page-shop .main-content { margin-top: -70px; }
}
@media (max-width: 620px) {
    .page-login .account-hero,
    .page-register .account-hero,
    .page-forgot .account-hero,
    .page-reset-password .account-hero,
    .page-account .account-hero,
    .page-shop .account-hero,
    .page-login .account-hero-inner,
    .page-register .account-hero-inner,
    .page-forgot .account-hero-inner,
    .page-reset-password .account-hero-inner,
    .page-account .account-hero-inner,
    .page-shop .account-hero-inner { height: 260px; }
    .page-login .account-hero,
    .page-register .account-hero,
    .page-forgot .account-hero,
    .page-reset-password .account-hero,
    .page-account .account-hero,
    .page-shop .account-hero { background-position: center top, 54% 22%; }
    .page-login .main-content,
    .page-register .main-content,
    .page-forgot .main-content,
    .page-reset-password .main-content,
    .page-account .main-content,
    .page-shop .main-content { margin-top: 0; padding-bottom: 48px; }
}


/* M9 Admin foundation and Giftcode management UI. */
body.admin-ocean {
    margin: 0;
    min-height: 100%;
    background-color: #efe3cc;
    background-image:
        linear-gradient(to bottom, rgba(255,253,246,.96), rgba(239,227,204,.98)),
        url('../images/theme/parchment-card.png');
    background-repeat: repeat, repeat;
    color: #173b4a;
}
.admin-page { min-height: 100vh; }
.admin-header .nav-admin,
.nav .nav-admin,
.account-nav .admin-link {
    border-color: #d79537;
    background: #8d3d24;
    color: #fff9e9;
}
.admin-main { padding-top: 34px; padding-bottom: 70px; }
.admin-title-card,
.admin-filter-card,
.admin-table-card,
.admin-summary-card {
    box-sizing: border-box;
    border: 1px solid #d9c8aa;
    border-top: 4px solid #e0a44d;
    border-radius: 8px;
    background: #fffaf0;
    box-shadow: 0 10px 24px rgba(36,56,58,.12);
}
.admin-title-card { position: relative; padding: 22px 24px; margin-bottom: 16px; }
.admin-title-card h1 { margin: 4px 0 8px; color: #0d3c4d; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; }
.admin-title-card p { margin: 0; color: #55707a; }
.admin-summary-row { overflow: hidden; }
.admin-summary-card { width: 320px; padding: 22px; }
.admin-summary-card span { display: block; color: #5f777f; font-size: 12px; text-transform: uppercase; font-weight: bold; }
.admin-summary-card strong { display: block; margin: 8px 0 14px; color: #c98525; font-size: 34px; }
.admin-filter-card { padding: 18px; margin-bottom: 16px; }
.admin-filter-grid { overflow: hidden; margin-left: -10px; margin-right: -10px; }
.admin-filter-grid .field { float: left; box-sizing: border-box; width: 33.333%; padding: 0 10px 10px; }
.admin-filter-grid .field input { margin-top: 4px; }
.admin-filter-actions { clear: both; padding: 2px 0 0; }
.admin-filter-actions .button { margin-right: 8px; text-decoration: none; display: inline-block; }
.admin-filter-actions .button.secondary { background: #e9dfce; border-color: #b9a98f; color: #244b58; }
.admin-table-card { padding: 18px; }
.admin-table-head { overflow: hidden; padding: 0 0 12px; }
.admin-table-head strong { float: left; color: #0d3c4d; }
.admin-table-head span { float: right; color: #6b7e84; font-size: 11px; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { padding: 10px 9px; background: #0f4658; color: #fff; font-size: 10px; text-transform: uppercase; text-align: left; }
.admin-table td { padding: 9px; border-bottom: 1px solid #ded4c3; background: #fffdf8; font-size: 12px; }
.admin-table tr:nth-child(even) td { background: #f6f0e5; }
.admin-empty { padding: 20px 4px; }
.admin-pager { margin-top: 16px; }
@media (max-width: 900px) {
    .admin-filter-grid .field { width: 50%; }
    .admin-table-head span { float: none; display: block; clear: both; padding-top: 6px; }
}
@media (max-width: 620px) {
    .admin-filter-grid .field { float: none; width: 100%; }
    .admin-summary-card { width: 100%; }
}

/* M9 — explicit base/bonus/total Gold guidance. */
.page-shop .shop-bonus-exclusion {
    display: block;
    margin-top: 6px;
    color: #9b421f;
    font-weight: bold;
}

/* M9-v2 — complete Giftcode Admin: issue workflow + human-readable audit. */
.admin-issue-card {
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid #d9c8aa;
    border-top: 4px solid #c45728;
    border-radius: 8px;
    background: #fffaf0;
    box-shadow: 0 10px 24px rgba(36,56,58,.12);
}
.admin-section-head { margin-bottom: 16px; }
.admin-section-head h2 { margin: 0 0 6px; color: #0d3c4d; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; }
.admin-section-head p { margin: 0; color: #61777d; font-size: 12px; line-height: 1.55; }
.admin-section-head.compact { padding-bottom: 12px; border-bottom: 1px solid #ddd1bd; }
.admin-section-head.compact h2 { font-size: 18px; }
.admin-issue-grid { overflow: hidden; margin: 0 -7px; }
.admin-issue-grid .field { float: left; box-sizing: border-box; width: 23.333%; padding: 0 7px 12px; }
.admin-issue-grid .admin-issue-identity { width: 30%; }
.admin-issue-grid label,
.admin-filter-grid label { display: block; margin-bottom: 5px; color: #375964; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .03em; }
.admin-issue-grid input,
.admin-issue-grid select,
.admin-filter-grid input,
.admin-filter-grid select {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    padding: 8px 10px;
    border: 1px solid #9fb0b1;
    border-radius: 5px;
    background: #fffdf8;
    color: #1d414f;
    font: inherit;
    outline: none;
}
.admin-issue-grid input:focus,
.admin-issue-grid select:focus,
.admin-filter-grid input:focus,
.admin-filter-grid select:focus {
    border-color: #d79537;
    box-shadow: 0 0 0 2px rgba(224,164,77,.18);
}
.admin-issue-foot { clear: both; overflow: hidden; padding-top: 5px; border-top: 1px solid #e0d6c5; }
.admin-issue-foot p { float: left; width: 70%; margin: 9px 0 0; color: #765b35; font-size: 11px; line-height: 1.5; }
.admin-primary-action { float: right; min-width: 175px; margin-top: 4px; background: #c45728; border-color: #963819; color: #fff; }
.admin-primary-action:hover { background: #d36533; }
.admin-filter-card .admin-filter-grid .field input,
.admin-filter-card .admin-filter-grid .field select { margin-top: 0; }
.admin-table-card .giftcode-admin-table td { vertical-align: top; }
.admin-code-number { color: #819094; font-size: 10px; }
.admin-table-card .pager a { text-decoration: none; }

@media (max-width: 1050px) {
    .admin-issue-grid .field,
    .admin-issue-grid .admin-issue-identity { width: 50%; }
    .admin-issue-foot p { width: 62%; }
}
@media (max-width: 700px) {
    .admin-issue-grid .field,
    .admin-issue-grid .admin-issue-identity { float: none; width: 100%; }
    .admin-issue-foot p,
    .admin-primary-action { float: none; width: 100%; }
    .admin-primary-action { margin-top: 12px; }
}

/* M10-v1 — Admin Card Top-up management. */
.admin-summary-grid { display: block; overflow: hidden; margin: 0 -8px; }
.admin-summary-grid .admin-summary-card { float: left; width: calc(50% - 16px); margin: 0 8px 16px; }
.admin-summary-note { min-height: 34px; margin: -4px 0 12px; color: #6c7d80; font-size: 11px; line-height: 1.45; }
.admin-card-stats { overflow: hidden; margin: 0 -6px 16px; }
.admin-card-stat { float: left; box-sizing: border-box; width: calc(25% - 12px); margin: 0 6px; padding: 14px 16px; border: 1px solid #d9c8aa; border-top: 4px solid #e0a44d; border-radius: 8px; background: #fffaf0; box-shadow: 0 8px 18px rgba(36,56,58,.10); }
.admin-card-stat span { display: block; color: #667b80; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }
.admin-card-stat strong { display: block; margin-top: 5px; color: #123f50; font-size: 26px; }
.admin-card-stat.success { border-top-color: #4f9c66; }
.admin-card-stat.warning { border-top-color: #d19a35; }
.admin-card-stat.danger { border-top-color: #b54b32; }
.admin-card-table-section { margin-top: 16px; }
.admin-pin-warning { margin: 0 0 14px; padding: 10px 12px; border-left: 4px solid #d19a35; background: #fff4d9; color: #725525; font-size: 11px; }
.admin-card-table td { vertical-align: top; }
.admin-card-credentials span { display: block; margin-bottom: 6px; }
.admin-card-credentials small { display: block; margin-bottom: 2px; color: #6a7b80; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.admin-card-credentials code { display: inline-block; max-width: 190px; padding: 3px 6px; border: 1px solid #ddd1bd; border-radius: 4px; background: #f8f0e3; color: #173b4a; font-family: Consolas, 'Courier New', monospace; font-size: 11px; overflow-wrap: anywhere; }
.admin-expected-pow { display: block; color: #26704d; font-weight: bold; }
.admin-card-table td > small { display: block; margin-top: 3px; color: #7b8788; font-size: 9px; }
.status-chip { display: inline-block; padding: 4px 7px; border: 1px solid #aab8bb; border-radius: 999px; background: #edf3f4; color: #35545d; font-size: 9px; font-weight: bold; text-transform: uppercase; white-space: nowrap; }
.status-chip.pending { border-color: #8eacc0; background: #e7f1f7; color: #315e76; }
.status-chip.success { border-color: #91bfa0; background: #e7f4ea; color: #2f7043; }
.status-chip.warning { border-color: #d9bd78; background: #fff4d7; color: #815f1e; }
.status-chip.danger { border-color: #d7a196; background: #fbe8e4; color: #8d3f31; }
.admin-card-actions form { margin: 0 0 7px; }
.admin-card-action { width: 112px; min-height: 34px; padding: 7px 9px; border-radius: 5px; font-size: 9px; box-shadow: none; }
.admin-card-action.approve { background: #3f8b5b; border-color: #2e6d45; }
.admin-card-action.approve:hover { background: #4c9b68; }
.admin-card-action.wrong { background: #c78b2e; border-color: #9e6b20; }
.admin-card-action.wrong:hover { background: #d59a3d; }
.admin-card-action.cancel { background: #a94832; border-color: #803424; }
.admin-card-action.cancel:hover { background: #bb543b; }
.admin-card-action:disabled { cursor: not-allowed; opacity: .45; }

@media (max-width: 900px) {
    .admin-summary-grid .admin-summary-card { float: none; width: auto; }
    .admin-card-stat { width: calc(50% - 12px); margin-bottom: 12px; }
}
@media (max-width: 620px) {
    .admin-card-stat { float: none; width: auto; }
    .admin-card-action { width: 100%; }
}

/* M10-v2 — actual card revenue + shared amount action input. */
.admin-revenue-section { display: block; overflow: hidden; margin: 0 -7px 16px; }
.admin-revenue-card { float: left; box-sizing: border-box; width: calc(50% - 14px); margin: 0 7px; padding: 16px; border: 1px solid #d9c8aa; border-radius: 8px; background: #fffaf0; box-shadow: 0 8px 18px rgba(36,56,58,.10); }
.admin-revenue-head { overflow: hidden; padding-bottom: 10px; border-bottom: 1px solid #e3d7c3; }
.admin-revenue-head span { float: left; color: #0d3c4d; font-size: 11px; font-weight: bold; letter-spacing: .04em; }
.admin-revenue-head small { float: right; color: #728187; font-size: 10px; }
.admin-revenue-total { padding: 12px 0 9px; }
.admin-revenue-total small { display: block; color: #6b7e84; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.admin-revenue-total strong { display: block; margin-top: 3px; color: #26704d; font-size: 22px; }
.admin-revenue-breakdown div { overflow: hidden; padding: 5px 0; border-top: 1px dashed #dfd2bc; font-size: 11px; }
.admin-revenue-breakdown span { float: left; color: #526d76; }
.admin-revenue-breakdown strong { float: right; color: #163e4c; }
.admin-revenue-empty { min-height: 30px; margin: 4px 0 0; font-size: 10px; }
.admin-card-action-form label { display: block; margin-bottom: 4px; color: #5d7278; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.admin-card-action-form input { box-sizing: border-box; width: 112px; margin: 0 0 8px; padding: 7px 8px; border: 1px solid #c8b99e; border-radius: 5px; background: #fffdf8; color: #173b4a; font-size: 11px; }
.admin-card-action-form .admin-card-action { display: block; margin-bottom: 7px; }
@media (max-width: 900px) {
    .admin-revenue-card { float: none; width: auto; margin-bottom: 12px; }
}
@media (max-width: 620px) {
    .admin-card-action-form input { width: 100%; }
}