/* Astra PTS — account area: our components inside the original panel look (codebase.css + custom.css).
   The site palette tokens are remapped to the panel's glass/blue scheme, so every cabinet widget follows it. */

:root {
  --bg: #0f1117;
  --bg-2: rgba(10, 12, 18, .55);
  --surface: rgba(18, 22, 33, .4);
  --surface-2: rgba(30, 35, 45, .7);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --gold: #3b82f6;
  --gold-hi: #b0c7ff;
  --gold-lo: #1e40af;
  --ivory: #ffffff;
  --text: rgba(255, 255, 255, .95);
  --muted: rgba(255, 255, 255, .7);
  --ok: #46c37b;
  --warn: #f3b760;
  --err: #ef4444;
  --display: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius: 6px;
}

#page-footer { opacity: 1; }
.cab-lang { height: 30px; width: auto; min-width: 80px; }
.cab-bal { gap: .6rem; }
.cab-bal__ico { width: 20px; height: 20px; }
#sidebar .dropdown { position: relative; }
#sidebar .dropdown-menu { width: 100%; }
.dropdown-menu form { margin: 0; }
.dropdown-menu button.dropdown-item { background: none !important; border: 0 !important; width: 100%; text-align: left; transform: none !important; box-shadow: none !important; }
.nav-main .badge { margin-left: 6px; }
.cab-flash { max-width: 1200px; margin: 16px auto 0; padding: 0 30px; }
.cab-flash .alert { margin: 0; cursor: pointer; }
.alert-success { background: rgba(70, 195, 123, .25) !important; border-color: rgba(70, 195, 123, .45) !important; }
.alert-danger { background: rgba(239, 68, 68, .25) !important; border-color: rgba(239, 68, 68, .45) !important; }
.alert-warning { background: rgba(245, 158, 11, .22) !important; border-color: rgba(245, 158, 11, .45) !important; }
.cab-notice { gap: 12px; }

/* page titles: like the original pages — centered bold title + muted subtitle */
.cab__head { text-align: center; margin: 10px 0 24px; }
.cab__head h1 { font: 700 1.857rem/1.25 var(--ui); margin: 0 0 10px; letter-spacing: 0; }
.cab__head p, .cab__head .muted { color: rgba(255, 255, 255, .85); font-size: 1.07rem; margin: 0 auto; max-width: 760px; }
.cab__head--row { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cab-title { margin-bottom: 20px; }
.content h1, .content h2, .content h3 { font-family: var(--ui); letter-spacing: 0; }
.content h2 { font-size: 1.43rem; font-weight: 600; }
.content h3 { font-size: 1.15rem; font-weight: 600; }
.panel h2 { font-size: 1.29rem; margin-bottom: 14px; }
.wrap { max-width: none; padding: 0; }

/* blocks */
.panel { padding: 20px 22px; margin-bottom: 20px; border-radius: 10px; }
.panel--cta, .panel--codes, .panel--won { border-color: rgba(59, 130, 246, .45) !important; }
.notice { padding: 14px 18px; margin-bottom: 18px; border-radius: 10px; background: rgba(59, 130, 246, .18); border: 1px solid rgba(59, 130, 246, .35); }
.alert--err { padding: 12px 16px; border-radius: 8px; background: rgba(239, 68, 68, .25); border: 1px solid rgba(239, 68, 68, .45); }
.alert--ok { padding: 12px 16px; border-radius: 8px; background: rgba(70, 195, 123, .25); border: 1px solid rgba(70, 195, 123, .45); }

/* buttons: ours → the panel's (custom.css paints [class*="btn-"] with !important, so do we) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: .4rem 1rem; font-weight: 600; font-size: 1rem; line-height: 1.5; clip-path: none; min-height: 0; text-transform: none; letter-spacing: 0; }
.btn.btn--gold, .btn.btn--gold:hover { background-color: rgba(59, 130, 246, .7) !important; border-color: rgba(59, 130, 246, .5) !important; color: #fff !important; }
.btn.btn--ghost { background-color: rgba(75, 85, 99, .7) !important; color: #fff !important; }
.btn--ghost::after { content: none; }
.btn.btn--sm { padding: .25rem .6rem; font-size: .93rem; }
.btn.btn--block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.linkbtn { color: #b0c7ff; }

/* tabs = nav pills */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; margin-bottom: 20px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(18, 22, 33, .4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tabs a { padding: .45rem 1rem; border-radius: 6px; color: rgba(255, 255, 255, .85) !important; font-weight: 600; border: 0; }
.tabs a:hover { background: rgba(255, 255, 255, .1); }
.tabs a[aria-current="page"] { background: rgba(59, 130, 246, .3); color: #fff !important; }
.tabs--small { padding: 6px; background: transparent; border: 0; backdrop-filter: none; }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.field > span { font-weight: 600; font-size: 1rem; }
.field input, .field select, .field textarea, .form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .form select, .form textarea {
  width: 100%; min-height: calc(1.5em + .857rem + 2px); padding: .43rem .86rem; border-radius: 6px; font: inherit; }
.field small, .field .hint { color: rgba(255, 255, 255, .7); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.form__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 1rem; }
.choice { border: 0; padding: 0; margin: 0 0 1rem; }
.choice legend { font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.choice__opt span { border-radius: 6px; }

/* tags, stats, tables */
.tag { display: inline-block; padding: .2em .6em; border-radius: 4px; font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .15); color: #fff; }
.tag--ok { background: rgba(70, 195, 123, .35); }
.tag--warn { background: rgba(245, 158, 11, .35); }
.stat { border-radius: 10px; }
.table th { color: rgba(255, 255, 255, .7); font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; }
.table td, .table th { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.muted { color: rgba(255, 255, 255, .7); }

/* shop cards */
.shop-row { margin-bottom: 10px; }
.shop-item .ribbon-box { background-color: #f3b760; }
.product--off { opacity: .55; }

/* auth */
.page-auth p.auth__alt { display: none; }
.auth-block .block-content { padding-bottom: 6px; }
.auth-block .form .btn--block { margin-bottom: 18px; }
.auth-block .block-header .block-options { margin-left: auto; }

@media (max-width: 991px) { .cab-flash { padding: 0 14px; } }
.cab-lang, select.cab-lang { height: 30px !important; min-height: 0 !important; padding: 0 .5rem !important; font-size: .857rem !important; width: auto !important; }
.field > span, .choice legend { text-transform: none; letter-spacing: 0; font-family: var(--ui); color: #fff; }
.tag { text-transform: none; letter-spacing: 0; }

/* inputs: one size everywhere (our older pages had larger ones) */
.content input:not([type=checkbox]):not([type=radio]):not([type=range]), .content select, .content textarea {
  font-size: 1rem; line-height: 1.5; min-height: 38px; height: auto; padding: .43rem .86rem; border-radius: 6px; }
.content select { padding-right: 2rem; }
/* our ".block" spacing helper meets Codebase's .block (a glass box in custom.css): give it the box padding */
.content .block:not(.shop-item):not(.auth-block):not([class*="block-"]) { padding: 16px 20px; border-radius: 10px; }
.content p.block { margin-bottom: 20px; }
.ccards { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); }
.ccard__go a { font-size: .9rem; }

/* characters grouped by game account */
.acc-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.acc-tools__find { flex: 1 1 260px; max-width: 420px; }
.acc-group { padding: 0; margin-bottom: 14px; }
.acc-group__head { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; list-style: none; user-select: none; }
.acc-group__head::-webkit-details-marker { display: none; }
.acc-group__head:hover { background: rgba(255, 255, 255, .05); border-radius: 10px; }
.acc-group__login { font-weight: 700; font-size: 1.07rem; }
.acc-group__login .fa { margin-right: 6px; opacity: .8; }
.acc-group__meta { color: rgba(255, 255, 255, .7); font-size: .93rem; }
.acc-group__on { color: #46c37b; }
.acc-group__arrow { margin-left: auto; transition: transform .2s; }
.acc-group[open] > .acc-group__head .acc-group__arrow { transform: rotate(180deg); }
.acc-group > .ccards { padding: 0 16px 16px; }
.acc-group__empty { padding: 0 20px 16px; margin: 0; }

/* character page: compact header (name and title keep the in-game colours from /css/char.css) */
.hero-char { display: none; }
.chead { display: flex; align-items: center; gap: 18px; padding: 16px 22px; margin: 6px 0 18px; border-radius: 10px;
  background: rgba(18, 22, 33, .4); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.chead__lv { flex: none; width: 58px; height: 58px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(201, 164, 92, .35), rgba(20, 22, 34, .9) 70%); border: 2px solid rgba(201, 164, 92, .7);
  box-shadow: 0 0 16px rgba(201, 164, 92, .25); }
.chead__lv small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); line-height: 1; }
.chead__lv b { font-size: 1.35rem; line-height: 1.1; }
.chead__id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chead__title { font-size: .85rem; line-height: 1.2; }
.content .chead__name, .chead__name { font: 700 1.6rem/1.15 var(--ui); margin: 0; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.chead__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: rgba(255, 255, 255, .78); font-size: .93rem; }
.chead__meta > span + span::before { content: '·'; margin-right: 14px; color: rgba(255, 255, 255, .35); }
.chead__meta .tag::before { content: none; }
.chead__status { flex: none; padding: 5px 12px; border-radius: 20px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.chead__status--up { color: #7ee2a4; background: rgba(70, 195, 123, .18); border: 1px solid rgba(70, 195, 123, .45); }
.chead__status--down { color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
@media (max-width: 600px) { .chead { flex-wrap: wrap; } .chead__status { order: -1; margin-left: auto; } }

/* 3D stage: a glass panel like the rest of the cabinet, a soft light behind the character; the podium is a 3D model */
.model--stage { border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(150, 185, 255, .16), transparent 70%),
    linear-gradient(180deg, rgba(18, 22, 33, .35) 0%, rgba(10, 13, 22, .65) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.model--stage canvas { z-index: 1; }
.model--stage:has(.model__acts:not([hidden])) canvas { bottom: 44px; height: auto; }      /* the action buttons get their own strip */
.model--stage .model__hint { z-index: 2; top: 10px; bottom: auto; color: rgba(255, 255, 255, .55); }
.model__acts { position: absolute; z-index: 2; left: 6px; right: 6px; bottom: 7px; display: flex; flex-wrap: nowrap; justify-content: safe center; gap: 4px;
  overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.model__act { flex: none; }
.model__act { padding: 3px 9px; border-radius: 14px; font-size: .78rem; font-weight: 600; color: #fff; cursor: pointer;
  background: rgba(18, 22, 33, .55); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s; }
.model__act:hover { background: rgba(59, 130, 246, .35); border-color: rgba(59, 130, 246, .6); }
.model__act.is-on { background: rgba(59, 130, 246, .45); border-color: rgba(59, 130, 246, .7); }
.model__acts.is-busy { opacity: .7; pointer-events: none; }

/* equipment: a wider stage in the middle */
.doll { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) minmax(0, 1fr); align-items: start; }
.doll__center--model { align-self: stretch; }
.doll__center--model .model { height: 100%; min-height: 520px; }
@media (max-width: 1100px) { .doll { grid-template-columns: 1fr; } .doll__center--model .model { min-height: 460px; } }
/* fitting room: the list on the left, the stage takes the rest (capped) */
.fitting { grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); }
.fitting__model { border: 0; }
.fitting__model, .fitting__model .model { height: min(78vh, 720px); max-width: 720px; width: 100%; }
@media (max-width: 900px) { .fitting { grid-template-columns: 1fr; } .fitting__model { position: static; } }

/* item extras: element, augmentation, PvP, Masterwork */
.it-x { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 4px 2px 0; font-size: .78rem; line-height: 1.3; }
.it-x__tag { padding: 1px 6px; border-radius: 4px; font-weight: 700; letter-spacing: .03em; }
.it-x__tag--pvp { background: rgba(239, 68, 68, .25); color: #ffb4b4; border: 1px solid rgba(239, 68, 68, .5); }
.it-x__tag--mw { background: rgba(201, 164, 92, .22); color: #f3d79a; border: 1px solid rgba(201, 164, 92, .55); }
.it-x__el { padding: 1px 6px; border-radius: 4px; font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.it-x__el--fire { color: #ff9f7a; border-color: rgba(255, 120, 80, .5); }
.it-x__el--water { color: #8fc7ff; border-color: rgba(90, 160, 255, .5); }
.it-x__el--wind { color: #9ff0c8; border-color: rgba(90, 220, 160, .45); }
.it-x__el--earth { color: #e0c48d; border-color: rgba(200, 160, 90, .5); }
.it-x__el--holy { color: #fff3b0; border-color: rgba(255, 235, 140, .5); }
.it-x__el--dark { color: #d1a6ff; border-color: rgba(170, 110, 255, .5); }
.it-x__aug { flex-basis: 100%; color: #b6f0d0; }
.it-x__aug b { color: #7ee2a4; font-weight: 700; }

/* checkboxes: custom.css paints all inputs (!important), so the checked look needs !important too */
.check input[type=checkbox] { background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(255, 255, 255, .35) !important; border-radius: 4px; }
.check input[type=checkbox]:hover { border-color: rgba(59, 130, 246, .8) !important; }
.check input[type=checkbox]:checked { background: #3b82f6 !important; border-color: #3b82f6 !important; }
.check input[type=checkbox]:checked::after { border-color: #fff !important; }
.check input[type=checkbox]:disabled { opacity: .4; cursor: not-allowed; }
.choice__opt--off { opacity: .45; cursor: not-allowed; }
.nochars-hint { margin: -4px 0 14px; font-size: .9rem; color: #f3d79a; }

/* sidebar groups: a little air between them */
#sidebar .nav-main-heading { padding-top: 18px; margin-top: 4px; font-size: .72rem; letter-spacing: .08em; opacity: .7; }
#sidebar .nav-main > li:first-child + li.nav-main-heading, #sidebar .nav-main > .nav-main-heading:first-child { padding-top: 6px; }

/* shop item page: the purchase column on a glass panel (it read badly over the bright castle background) */
.buy__main { padding: 22px 24px; border-radius: 10px; background: rgba(14, 17, 26, .78); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.buy__art { padding: 10px; border-radius: 10px; background: rgba(14, 17, 26, .6); border: 1px solid rgba(255, 255, 255, .08); }
.choice__opt { background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 8px; color: #fff; }
.choice__opt:hover { border-color: rgba(59, 130, 246, .7) !important; }
.choice__opt:has(input:checked) { background: rgba(59, 130, 246, .2) !important; border-color: #3b82f6 !important; }
.choice__opt input[type=radio] { accent-color: #3b82f6; width: 16px; height: 16px; flex: none; }
.choice__opt b { color: #ffd98a !important; font-size: 1.05rem; text-shadow: none; }
/* unavailable variant: dimmed, but its price and the reason stay readable */
.choice__opt--off { opacity: 1 !important; cursor: not-allowed; background: rgba(255, 255, 255, .03) !important; }
.choice__opt--off span, .choice__opt--off img { opacity: .55; }
.choice__opt--off b { color: #ffd98a !important; }
.choice__opt .tag { flex: none; }
.choice__opt .tag--warn { background: rgba(245, 158, 11, .25); color: #ffd18a; border: 1px solid rgba(245, 158, 11, .5); opacity: 1; }

.daily__where { display: block; font-size: .72rem; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.daily__note { font-size: .85rem; margin-top: 10px; }
.daily__got a { margin-left: 8px; font-weight: 600; }


.game__more { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); align-items: flex-end; }
.game__reset-lead { flex-basis: 100%; margin: 0 0 4px; font-size: .9rem; }
.newpw { margin-bottom: 18px; }
.newpw__val { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.newpw__val code { font-size: 1.25rem; padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, .35); color: #fff; letter-spacing: .04em; user-select: all; }
/* game account cards: the same glass panel as the rest */
.game { padding: 18px 22px; margin-bottom: 16px; border-radius: 10px; background: rgba(14, 17, 26, .78); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.game__pw > summary { list-style: none; display: inline-flex; margin: 6px 0 4px; }
.game__pw > summary::-webkit-details-marker { display: none; }
.game__pw[open] > summary { margin-bottom: 12px; }