/* Vanity page refinements: brighter player pages, a readable rulebook, dark admin dashboard. */

/* Player profile: clear daylight surfaces against the site's teal identity. */
body[data-page="profile"] {
  --clr-bg: #eaf1f3;
  --clr-bg2: #f3f7f8;
  --clr-surface: #ffffff;
  --clr-surface2: #f5f9fa;
  --clr-white: #18313a;
  --clr-navy: #18313a;
  --clr-grey: #58717a;
  --clr-grey2: #7c9299;
  --clr-border: #d9e5e8;
  --clr-green: #02667b;
  --clr-teal: #02667b;
  background: #eaf1f3 !important;
  color: #18313a !important;
  color-scheme: light;
}

body[data-page="profile"] .account-page {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: calc(var(--nav-height, 76px) + 42px) clamp(18px, 5vw, 70px) 84px;
}

body[data-page="profile"] .profile-hero,
body[data-page="profile"] .pstat,
body[data-page="profile"] .psection {
  background: #fff !important;
  border-color: #dbe7e9 !important;
  box-shadow: 0 12px 34px rgba(26, 62, 72, .055);
}

body[data-page="profile"] .profile-hero { border-radius: 18px; }
body[data-page="profile"] .profile-hero__banner {
  height: 176px;
  background:
    radial-gradient(circle at 75% 40%, rgba(70, 184, 197, .18), transparent 22%),
    linear-gradient(118deg, #d7edf0 0%, #eef5f6 48%, #d6e9ed 100%);
  border-bottom-color: #dbe7e9;
}
body[data-page="profile"] .profile-hero__banner::after {
  background-image: radial-gradient(rgba(2, 102, 123, .13) .8px, transparent .8px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent, #000 72%);
}
body[data-page="profile"] .profile-hero__body { padding-inline: clamp(20px, 4vw, 48px); }
body[data-page="profile"] .profile-hero__avatar { border-color: #fff; background: #e9f1f3; box-shadow: 0 4px 20px rgba(22, 67, 78, .18); }
body[data-page="profile"] .profile-hero__avatar-placeholder { border-color: #fff; background: linear-gradient(145deg, #d5eaed, #a8d4da); color: #075a6d; }
body[data-page="profile"] .profile-hero__name { color: #17313a; letter-spacing: -.035em; }
body[data-page="profile"] .profile-hero__discord { color: #58717a; }
body[data-page="profile"] .profile-hero__role { background: #edf7f8; }

body[data-page="profile"] .profile-stats { gap: 14px; }
body[data-page="profile"] .pstat { border-radius: 13px; padding: 22px; }
body[data-page="profile"] .pstat:hover { background: #fff; box-shadow: 0 17px 35px rgba(23, 67, 78, .1); }
body[data-page="profile"] .pstat__num { color: #18313a; }
body[data-page="profile"] .pstat__label { color: #6f858c; }
body[data-page="profile"] .psection { border-radius: 14px; padding: clamp(20px, 3vw, 30px); }
body[data-page="profile"] .psection__title { color: #18313a; border-bottom-color: #e6edef; }
body[data-page="profile"] .char-card { background: #f7fafb; border-color: #e1eaec; }
body[data-page="profile"] .char-card.active-char { background: #eef8f9; border-color: #85cbd3; }
body[data-page="profile"] .char-card__slot { color: #607c84; }
body[data-page="profile"] .char-card__name { color: #18313a; }
body[data-page="profile"] .char-card__job { color: #02667b; }
body[data-page="profile"] .char-stat { border-bottom-color: #e8eef0; }
body[data-page="profile"] .char-stat__label { color: #667f87; }
body[data-page="profile"] .char-stat__value { color: #213a42; }
body[data-page="profile"] .char-card__empty { color: #6d858c; border-color: #b9cdd1; }
body[data-page="profile"] .char-card__empty:hover { background: #eff8f9; }
body[data-page="profile"] .character-sync-banner { color: #33555e; background: #edf7f8; border-color: #c7e4e7; }
body[data-page="profile"] .app-item { background: #fff; border-color: #e1eaec; }
body[data-page="profile"] .app-item:hover { background: #f6fafb; border-color: #badde1; }
body[data-page="profile"] .app-item__type { color: #18313a; }
body[data-page="profile"] .app-item__meta,
body[data-page="profile"] .activity-time,
body[data-page="profile"] .info-row__label { color: #6d838a; }
body[data-page="profile"] .activity-item { border-bottom-color: #e8eef0; }
body[data-page="profile"] .activity-content,
body[data-page="profile"] .info-row__value { color: #29434b; }
body[data-page="profile"] .info-row { border-bottom-color: #e8eef0; }
body[data-page="profile"] .view-btn { background: #f6fafb; color: #42636d; border-color: #dbe7e9; }
body[data-page="profile"] .view-btn:hover { color: #02667b; border-color: #70bdc7; background: #eef8f9; }
body[data-page="profile"] .modal { background: #fff; color: #18313a; border-color: #dbe7e9; box-shadow: 0 22px 70px rgba(20, 55, 65, .22); }
body[data-page="profile"] .modal__title { color: #18313a; border-bottom-color: #e6edef; }
body[data-page="profile"] .input-field { color: #18313a; background: #f5f9fa; border-color: #dbe7e9; }
body[data-page="profile"] .input-label { color: #58717a; }

/* Rules: a light, quiet handbook with navigation separate from the reading column. */
body[data-page="rules"] {
  --clr-bg: #f0f5f6;
  --clr-bg2: #ffffff;
  --clr-surface: #ffffff;
  --clr-surface2: #f4f8f9;
  --clr-white: #17323a;
  --clr-navy: #17323a;
  --clr-grey: #5d747c;
  --clr-border: #dce7e9;
  --clr-green: #02667b;
  --clr-teal: #02667b;
  background: #f0f5f6 !important;
  color: #17323a !important;
  color-scheme: light;
}

body[data-page="rules"] .cine-hero {
  min-height: auto !important;
  padding: calc(var(--nav-height, 76px) + 70px) max(24px, calc((100vw - 1180px) / 2)) 55px !important;
  background: #e7f0f2;
  border-bottom: 1px solid #d9e5e8;
}
body[data-page="rules"] .cine-hero__media,
body[data-page="rules"] .cine-hero__scrim,
body[data-page="rules"] .cine-hero__grain { display: none !important; }
body[data-page="rules"] .cine-hero__inner { max-width: 900px !important; }
body[data-page="rules"] .cine-eyebrow { color: #02667b !important; font-size: .9rem; }
body[data-page="rules"] .cine-title { color: #17323a !important; font-size: clamp(3.2rem, 8vw, 6rem) !important; }
body[data-page="rules"] .cine-title span { color: #038da1 !important; }
body[data-page="rules"] .cine-sub { max-width: 650px !important; color: #526d75 !important; font-size: 1.08rem !important; }
body[data-page="rules"] .rules-hero__meta { color: #637b82; font-family: var(--font-body); font-size: .82rem; letter-spacing: 0; }
body[data-page="rules"] .rules-hero__meta span { color: #02667b !important; font-weight: 650; }

body[data-page="rules"] .rules-statsbar {
  justify-content: flex-start;
  gap: clamp(22px, 5vw, 64px);
  padding: 22px max(24px, calc((100vw - 1180px) / 2));
  background: #fff !important;
  border-color: #dce7e9 !important;
}
body[data-page="rules"] .rstat { display: flex; align-items: baseline; gap: 9px; text-align: left; }
body[data-page="rules"] .rstat__val { color: #02667b !important; font-size: 1.55rem; }
body[data-page="rules"] .rstat__lbl { color: #647b82; font-family: var(--font-body); font-size: .78rem; letter-spacing: 0; text-transform: none; }
body[data-page="rules"] .rstat-sep { height: 27px; background: #dce7e9; }

body[data-page="rules"] .rules-body {
  max-width: 1180px;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(30px, 5vw, 68px);
  padding: 46px 24px 100px;
}
body[data-page="rules"] .rules-sidebar {
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body[data-page="rules"] .rules-sidebar__label { color: #607980; padding-bottom: 10px; border-bottom: 1px solid #d9e5e8; }
body[data-page="rules"] .rcbtn {
  padding: 10px 11px;
  border-color: transparent;
  border-radius: 9px !important;
  background: transparent !important;
}
body[data-page="rules"] .rcbtn:hover,
body[data-page="rules"] .rcbtn.active { background: #fff !important; border-color: #d9e7e9 !important; box-shadow: 0 5px 18px rgba(31, 68, 78, .06); }
body[data-page="rules"] .rcbtn__name { color: #29464e !important; }
body[data-page="rules"] .rcbtn.active .rcbtn__name,
body[data-page="rules"] .rcbtn:hover .rcbtn__name { color: #02667b !important; }
body[data-page="rules"] .rcbtn__count { color: #698088; }
body[data-page="rules"] .rcbtn__icon { background: #e6f2f4 !important; }
body[data-page="rules"] .rcbtn__icon svg { color: #02667b !important; }
body[data-page="rules"] .rcbtn__badge { background: #eef7f8 !important; color: #02667b !important; border-color: #d1e8eb !important; }

body[data-page="rules"] .rules-callout {
  margin-bottom: 28px;
  padding: 19px 22px;
  border: 0;
  border-left: 3px solid #038da1;
  border-radius: 0 9px 9px 0;
  background: #e4f1f3 !important;
  color: #315760 !important;
  line-height: 1.75;
}
body[data-page="rules"] .rules-info {
  padding: 26px;
  margin-bottom: 30px;
  border: 1px solid #dce7e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 68, 78, .045);
}
body[data-page="rules"] .rules-info__eyebrow { color: #02667b; font-family: var(--font-body); font-size: .78rem; letter-spacing: 0; text-transform: none; }
body[data-page="rules"] .rules-info h2 { color: #17323a; }
body[data-page="rules"] .rules-info__grid { gap: 14px; }
body[data-page="rules"] .rules-info__item { border: 0; border-left: 1px solid #cadfe3; border-radius: 0; padding: 2px 18px; background: transparent; }
body[data-page="rules"] .rules-info__item h3 { color: #17323a; }
body[data-page="rules"] .rules-info__item p { color: #526d75; line-height: 1.7; }

body[data-page="rules"] .rules-section {
  padding: 26px 0 30px !important;
  margin-bottom: 0;
  border: 0 !important;
  border-top: 1px solid #cadadd !important;
  border-radius: 0 !important;
  background: transparent !important;
  scroll-margin-top: 100px;
}
body[data-page="rules"] .rules-sec-head { align-items: center; padding-bottom: 18px; margin-bottom: 10px; border-bottom: 1px solid #dce7e9; }
body[data-page="rules"] .rules-sec-icon { width: 42px; height: 42px; border-radius: 9px; background: #e3f1f3 !important; }
body[data-page="rules"] .rules-sec-icon svg { color: #02667b !important; }
body[data-page="rules"] .rules-sec-title { color: #17323a !important; font-size: 1.45rem; }
body[data-page="rules"] .rules-sec-desc { color: #6b8188 !important; }
body[data-page="rules"] .rules-sec-badge { color: #02667b !important; background: #e9f4f5 !important; border-color: #d5e9eb; }
body[data-page="rules"] .rules-list { gap: 0; }
body[data-page="rules"] .rule-item {
  gap: 17px;
  padding: 17px 13px;
  border: 0 !important;
  border-bottom: 1px solid #e1eaec !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body[data-page="rules"] .rule-item:hover { background: #e8f3f4 !important; }
body[data-page="rules"] .rule-num {
  min-width: 38px;
  height: 25px;
  border-color: #c5e1e5 !important;
  border-radius: 6px;
  background: #e7f3f5 !important;
  color: #02667b !important;
}
body[data-page="rules"] .rule-item__text { color: #26434b !important; line-height: 1.75; }
body[data-page="rules"] .rule-item__text span { color: #58717a; }
body[data-page="rules"] .rules-footnote { background: #e5f1f3 !important; border-color: #cce3e6 !important; color: #315760 !important; }
body[data-page="rules"] .rules-footnote svg { color: #02667b !important; }
body[data-page="rules"] .rules-footnote a { color: #02667b; }
body[data-page="rules"] .rules-empty { color: #607980; font-family: var(--font-body); letter-spacing: 0; }
body[data-page="rules"] #backToTop { box-shadow: 0 8px 20px rgba(3, 141, 161, .22); }

/* Dark dashboard only: the rest of the admin area keeps its current theme. */
body.admin-page[data-page="admin-dashboard"] {
  --rx-bg: #08151d;
  --rx-bg2: #0b1c25;
  --rx-surface: #10232d;
  --rx-surface2: #152c37;
  --rx-elev: #132832;
  --rx-border: #263e48;
  --rx-border2: #36545f;
  --rx-tx: #ecf5f6;
  --rx-tx2: #b5c8cd;
  --rx-muted: #8ba3aa;
  --rx-acc: #53c6d1;
  --rx-acc2: #038da1;
  --rx-accsoft: rgba(3, 141, 161, .15);
  --rx-blue: #69c9d5;
  --rx-green: #46d198;
  --rx-yellow: #e9bb5d;
  --rx-red: #ff7883;
  --clr-bg: #08151d;
  --clr-bg2: #0b1c25;
  --clr-surface: #10232d;
  --clr-surface2: #152c37;
  --clr-white: #ecf5f6;
  --clr-navy: #ecf5f6;
  --clr-grey: #b5c8cd;
  --clr-grey2: #8ba3aa;
  --clr-border: #263e48;
  --clr-green: #53c6d1;
  --clr-green2: #53c6d1;
  color-scheme: dark;
  background: var(--rx-bg) !important;
  color: var(--rx-tx) !important;
}
body.admin-page[data-page="admin-dashboard"] .admin-main { background: var(--rx-bg) !important; }
body.admin-page[data-page="admin-dashboard"] .admin-topbar {
  background: rgba(8, 21, 29, .94) !important;
  border-color: var(--rx-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
body.admin-page[data-page="admin-dashboard"] .admin-page-title,
body.admin-page[data-page="admin-dashboard"] h1,
body.admin-page[data-page="admin-dashboard"] h2,
body.admin-page[data-page="admin-dashboard"] .rx-card__h h3 { color: var(--rx-tx) !important; }
body.admin-page[data-page="admin-dashboard"] .admin-sidebar,
body.admin-page[data-page="admin-dashboard"] #adminSidebarMount { background: #0b1b24 !important; border-color: var(--rx-border) !important; }
body.admin-page[data-page="admin-dashboard"] .admin-sb-home,
body.admin-page[data-page="admin-dashboard"] .admin-sidebar__usercard { background: #10232d !important; border-color: var(--rx-border) !important; color: var(--rx-tx) !important; }
body.admin-page[data-page="admin-dashboard"] .sidebar-uc__avatar { background: #1a3540 !important; border-color: var(--rx-border2) !important; color: var(--rx-tx) !important; }
body.admin-page[data-page="admin-dashboard"] .sidebar-uc__name { color: var(--rx-tx) !important; }
body.admin-page[data-page="admin-dashboard"] .admin-nav a,
body.admin-page[data-page="admin-dashboard"] .admin-nav li > a { color: var(--rx-tx2) !important; }
body.admin-page[data-page="admin-dashboard"] .admin-nav a:hover { background: #152d37 !important; color: #fff !important; }
body.admin-page[data-page="admin-dashboard"] .admin-nav a.active { background: rgba(3, 141, 161, .17) !important; color: #7cdae2 !important; }
body.admin-page[data-page="admin-dashboard"] .admin-nav a.active::before { background: #53c6d1 !important; }
body.admin-page[data-page="admin-dashboard"] .rx-card,
body.admin-page[data-page="admin-dashboard"] .dstat,
body.admin-page[data-page="admin-dashboard"] .dash-hero {
  background-color: var(--rx-surface) !important;
  border-color: var(--rx-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
body.admin-page[data-page="admin-dashboard"] .dash-hero {
  background-image: linear-gradient(110deg, rgba(3, 141, 161, .16), transparent 68%) !important;
}
body.admin-page[data-page="admin-dashboard"] .dash-hero p,
body.admin-page[data-page="admin-dashboard"] .dstat__lbl,
body.admin-page[data-page="admin-dashboard"] .dstat__tr,
body.admin-page[data-page="admin-dashboard"] .srv__meta,
body.admin-page[data-page="admin-dashboard"] .srv__row span:first-child { color: var(--rx-muted) !important; }
body.admin-page[data-page="admin-dashboard"] .dstat__val,
body.admin-page[data-page="admin-dashboard"] .srv__big b,
body.admin-page[data-page="admin-dashboard"] .srv__row span:last-child { color: var(--rx-tx) !important; }
body.admin-page[data-page="admin-dashboard"] .qa a { background: var(--rx-surface2) !important; border-color: var(--rx-border) !important; color: var(--rx-tx) !important; }
body.admin-page[data-page="admin-dashboard"] .qa a:hover { background: #1a3641 !important; border-color: #3b7580 !important; }
body.admin-page[data-page="admin-dashboard"] .srv__track { background: #1a3540 !important; }
body.admin-page[data-page="admin-dashboard"] .srv__rows { border-color: var(--rx-border) !important; }

/* Page-level hover details. The logo is deliberately excluded from every motion rule. */
body[data-redesign="public"] .nav__links a:not(.nav__logo) { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
body[data-redesign="public"] .nav__links a:hover { transform: translateY(-1px); }
body[data-redesign="public"] .nav__links a::after { transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
body[data-redesign="public"] .nav__links a:hover::after,
body[data-redesign="public"] .nav__links a.active::after { transform: scaleX(1); }
body[data-page="profile"] .profile-hero__avatar { transition: box-shadow .22s ease, transform .22s ease; }
body[data-page="profile"] .profile-hero__avatar-container:hover .profile-hero__avatar { transform: scale(1.035); box-shadow: 0 7px 24px rgba(2, 102, 123, .2); }
body[data-page="profile"] .pstat,
body[data-page="profile"] .char-card,
body[data-page="profile"] .app-item,
body[data-page="profile"] .view-btn { transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
body[data-page="profile"] .char-card:hover,
body[data-page="profile"] .app-item:hover { transform: translateY(-2px); }
body[data-page="profile"] .view-btn:active { transform: scale(.97); }
body[data-page="rules"] .rcbtn,
body[data-page="rules"] .rule-item,
body[data-page="rules"] #backToTop { transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
body[data-page="rules"] .rcbtn:hover { transform: translateX(3px); }
body[data-page="rules"] .rule-item:hover { transform: translateX(3px); }
body[data-page="team"] .role-pill { transition: transform .18s ease, color .18s ease, background-color .18s ease, border-color .18s ease; }
body[data-page="team"] .role-pill:hover { transform: translateY(-2px); }
body[data-page="team"] .member-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
body[data-page="team"] .member-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(4, 28, 36, .2); }
body.admin-page[data-page="admin-dashboard"] .dstat,
body.admin-page[data-page="admin-dashboard"] .qa a,
body.admin-page[data-page="admin-dashboard"] .rx-btn { transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
body.admin-page[data-page="admin-dashboard"] .dstat:hover,
body.admin-page[data-page="admin-dashboard"] .qa a:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 0, 0, .2); }
body.admin-page[data-page="admin-dashboard"] .rx-btn:active { transform: translateY(1px) scale(.98); }

@media (max-width: 900px) {
  body[data-page="profile"] .account-page { padding: calc(var(--nav-height, 76px) + 26px) 18px 58px; }
  body[data-page="profile"] .profile-hero__banner { height: 145px; }
  body[data-page="rules"] .rules-statsbar { justify-content: center; padding-inline: 20px; }
  body[data-page="rules"] .rules-body { grid-template-columns: 1fr; gap: 22px; padding-top: 30px; }
  body[data-page="rules"] .rules-sidebar { display: block; position: relative; top: auto; }
  body[data-page="rules"] #sidebarCats { display: flex; gap: 8px; overflow-x: auto; padding: 6px 1px 12px; }
  body[data-page="rules"] .rcbtn { width: auto; flex: 0 0 auto; }
  body[data-page="rules"] .rcbtn > div:nth-child(2) { min-width: 110px; }
}

@media (max-width: 620px) {
  body[data-page="profile"] .profile-hero__body { gap: 16px; padding-bottom: 22px; }
  body[data-page="profile"] .profile-hero__avatar,
  body[data-page="profile"] .profile-hero__avatar-placeholder { width: 78px; height: 78px; }
  body[data-page="profile"] .profile-hero__name { font-size: 1.35rem; }
  body[data-page="profile"] .profile-stats { gap: 10px; }
  body[data-page="profile"] .pstat { padding: 16px; }
  body[data-page="profile"] .psection { padding: 19px; }
  body[data-page="rules"] .rules-hero__meta { align-items: flex-start; line-height: 1.6; }
  body[data-page="rules"] .rules-statsbar { gap: 16px; }
  body[data-page="rules"] .rstat { flex-direction: column; gap: 2px; }
  body[data-page="rules"] .rstat-sep { display: none; }
  body[data-page="rules"] .rules-sec-head { align-items: flex-start; }
  body[data-page="rules"] .rules-sec-icon { display: none; }
  body[data-page="rules"] .rules-section { padding-top: 21px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] *, body[data-page] *::before, body[data-page] *::after,
  body.admin-page[data-page="admin-dashboard"] *, body.admin-page[data-page="admin-dashboard"] *::before,
  body.admin-page[data-page="admin-dashboard"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Dark Vanity palette and more intentional page structures. */
body[data-page="profile"] {
  --clr-bg: #08151d;
  --clr-bg2: #0b1c25;
  --clr-surface: #10232d;
  --clr-surface2: #152c37;
  --clr-white: #ecf5f6;
  --clr-navy: #ecf5f6;
  --clr-grey: #b5c8cd;
  --clr-grey2: #8ba3aa;
  --clr-border: #263e48;
  --clr-green: #53c6d1;
  --clr-teal: #53c6d1;
  color-scheme: dark;
  background: #08151d !important;
  color: #ecf5f6 !important;
}
body[data-page="profile"] .account-page {
  width: min(1280px, 100%);
  padding: calc(var(--nav-height, 76px) + 36px) clamp(18px, 4vw, 56px) 80px;
}
body[data-page="profile"] .profile-hero,
body[data-page="profile"] .pstat,
body[data-page="profile"] .psection {
  background: #0d1d26 !important;
  border: 1px solid #263e48 !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .18);
}
body[data-page="profile"] .profile-hero { border-radius: 20px; }
body[data-page="profile"] .profile-hero__banner {
  height: 190px;
  background:
    radial-gradient(ellipse at 78% 25%, rgba(83, 198, 209, .2), transparent 30%),
    linear-gradient(115deg, #0b202b 0%, #102b36 50%, #0b1b25 100%);
  border-bottom: 1px solid rgba(83, 198, 209, .18);
}
body[data-page="profile"] .profile-hero__banner::after {
  background-image: linear-gradient(135deg, transparent 53%, rgba(3, 141, 161, .12) 53.2%, transparent 53.7%),
    radial-gradient(rgba(123, 217, 226, .2) .8px, transparent .8px);
  background-size: auto, 20px 20px;
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
body[data-page="profile"] .profile-hero__body { padding-inline: clamp(20px, 4vw, 42px); }
body[data-page="profile"] .profile-hero__avatar { border-color: #0d1d26; background: #10232d; }
body[data-page="profile"] .profile-hero__avatar-placeholder { border-color: #0d1d26; background: linear-gradient(145deg, #15505b, #0b2832); color: #8be0e8; }
body[data-page="profile"] .profile-hero__name,
body[data-page="profile"] .pstat__num,
body[data-page="profile"] .psection__title,
body[data-page="profile"] .char-card__name,
body[data-page="profile"] .char-stat__value,
body[data-page="profile"] .app-item__type,
body[data-page="profile"] .activity-content,
body[data-page="profile"] .info-row__value { color: #ecf5f6 !important; }
body[data-page="profile"] .profile-hero__discord,
body[data-page="profile"] .pstat__label,
body[data-page="profile"] .char-card__slot,
body[data-page="profile"] .char-stat__label,
body[data-page="profile"] .app-item__meta,
body[data-page="profile"] .activity-time,
body[data-page="profile"] .info-row__label { color: #8ba3aa !important; }
body[data-page="profile"] .profile-hero__role,
body[data-page="profile"] .character-sync-banner { background: rgba(3, 141, 161, .13) !important; border-color: rgba(83, 198, 209, .26) !important; color: #a8e6eb !important; }
body[data-page="profile"] .profile-stats { gap: 13px; margin-bottom: 24px; }
body[data-page="profile"] .pstat { border-radius: 14px; padding: 21px; }
body[data-page="profile"] .pstat:hover { background: #122630 !important; border-color: rgba(83, 198, 209, .4) !important; box-shadow: 0 18px 34px rgba(0, 0, 0, .22); }
body[data-page="profile"] .profile-cols { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 18px; }
body[data-page="profile"] .psection { border-radius: 15px; padding: clamp(20px, 2.5vw, 28px); }
body[data-page="profile"] .psection__title { border-bottom-color: rgba(204, 232, 237, .12); }
body[data-page="profile"] .char-card,
body[data-page="profile"] .app-item { background: #10232d !important; border-color: #263e48 !important; }
body[data-page="profile"] .char-card.active-char { background: rgba(3, 141, 161, .09) !important; border-color: rgba(83, 198, 209, .42) !important; }
body[data-page="profile"] .char-card__job { color: #72d4de !important; }
body[data-page="profile"] .char-stat,
body[data-page="profile"] .activity-item,
body[data-page="profile"] .info-row { border-color: rgba(204, 232, 237, .1) !important; }
body[data-page="profile"] .char-card__empty { color: #9db5bb !important; border-color: #36545f !important; }
body[data-page="profile"] .char-card__empty:hover,
body[data-page="profile"] .app-item:hover { background: #152c37 !important; border-color: #3f7881 !important; }
body[data-page="profile"] .view-btn { background: #10232d !important; color: #bdd3d7 !important; border-color: #36545f !important; }
body[data-page="profile"] .view-btn:hover { color: #8be0e8 !important; border-color: #53c6d1 !important; background: #15313b !important; }
body[data-page="profile"] .modal { background: #0d1d26 !important; color: #ecf5f6 !important; border-color: #36545f !important; }
body[data-page="profile"] .modal__title { color: #ecf5f6 !important; border-color: #263e48 !important; }
body[data-page="profile"] .input-field { color: #ecf5f6 !important; background: #10232d !important; border-color: #36545f !important; }
body[data-page="profile"] .input-label { color: #b5c8cd !important; }

body[data-page="rules"] {
  --clr-bg: #08151d;
  --clr-bg2: #0b1c25;
  --clr-surface: #10232d;
  --clr-surface2: #152c37;
  --clr-white: #ecf5f6;
  --clr-navy: #ecf5f6;
  --clr-grey: #a4bbc1;
  --clr-border: #263e48;
  --clr-green: #53c6d1;
  --clr-teal: #53c6d1;
  color-scheme: dark;
  background: #08151d !important;
  color: #ecf5f6 !important;
}
body[data-page="rules"] .cine-hero {
  min-height: 365px !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: calc(var(--nav-height, 76px) + 82px) max(24px, calc((100vw - 1180px) / 2)) 48px !important;
  text-align: left !important;
  background: #08151d;
  border-bottom: 1px solid #263e48;
}
body[data-page="rules"] .cine-hero__media { display: block !important; opacity: .34 !important; filter: saturate(.65) brightness(.72); }
body[data-page="rules"] .cine-hero__scrim { display: block !important; background: linear-gradient(90deg, rgba(5, 15, 21, .94), rgba(5, 15, 21, .48)), linear-gradient(0deg, #08151d 0%, transparent 68%) !important; }
body[data-page="rules"] .cine-hero__grain { display: block !important; opacity: .06; }
body[data-page="rules"] .cine-hero__inner { width: 100% !important; max-width: 1180px !important; text-align: left !important; margin-inline: auto !important; }
body[data-page="rules"] .cine-eyebrow { color: #72d4de !important; }
body[data-page="rules"] .cine-title { color: #f3f8f9 !important; font-size: clamp(3.2rem, 7.5vw, 6rem) !important; }
body[data-page="rules"] .cine-title span { color: #7bd9e2 !important; }
body[data-page="rules"] .cine-sub { margin: 18px 0 0 !important; color: #c2d0d4 !important; font-size: 1.02rem !important; }
body[data-page="rules"] .rules-hero__meta { color: #9bb1b7 !important; font-size: .82rem; letter-spacing: 0; }
body[data-page="rules"] .rules-hero__meta span { color: #7bd9e2 !important; }
body[data-page="rules"] .rules-statsbar { justify-content: flex-start; gap: clamp(20px, 4vw, 48px); padding: 17px max(24px, calc((100vw - 1180px) / 2)); background: #0b1c25 !important; border-color: #263e48 !important; }
body[data-page="rules"] .rstat__val { color: #76d4de !important; }
body[data-page="rules"] .rstat__lbl { color: #8ba3aa !important; }
body[data-page="rules"] .rstat-sep { background: #263e48 !important; }
body[data-page="rules"] .rules-body { display: flex !important; flex-direction: column; gap: 26px; max-width: 1180px; padding: 34px 24px 92px; }
body[data-page="rules"] .rules-sidebar { position: sticky; top: 70px; z-index: 12; display: block !important; width: 100%; padding: 12px 14px; border: 1px solid #263e48; border-radius: 14px; background: rgba(11, 28, 37, .96); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); backdrop-filter: blur(14px); }
body[data-page="rules"] .rules-sidebar__label { color: #8ba3aa !important; padding: 0 4px 9px; border-color: #263e48 !important; letter-spacing: .03em; text-transform: none; }
body[data-page="rules"] #sidebarCats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px 3px; scrollbar-width: thin; }
body[data-page="rules"] .rcbtn { flex: 0 0 auto; width: auto; min-width: 168px; padding: 9px 11px; border: 1px solid #263e48 !important; border-radius: 10px !important; background: #10232d !important; }
body[data-page="rules"] .rcbtn:hover,
body[data-page="rules"] .rcbtn.active { background: #15313b !important; border-color: rgba(83, 198, 209, .48) !important; box-shadow: inset 0 0 0 1px rgba(83, 198, 209, .08); }
body[data-page="rules"] .rcbtn__name { color: #d6e4e8 !important; }
body[data-page="rules"] .rcbtn.active .rcbtn__name,
body[data-page="rules"] .rcbtn:hover .rcbtn__name { color: #8be0e8 !important; }
body[data-page="rules"] .rcbtn__count { color: #8ba3aa !important; }
body[data-page="rules"] .rcbtn__icon { background: rgba(3, 141, 161, .16) !important; }
body[data-page="rules"] .rcbtn__icon svg { color: #7bd9e2 !important; }
body[data-page="rules"] .rcbtn__badge { background: rgba(3, 141, 161, .13) !important; color: #a8e6eb !important; border-color: #36545f !important; }
body[data-page="rules"] .rules-content { width: min(100%, 960px); margin-inline: auto; }
body[data-page="rules"] .rules-callout { margin-bottom: 22px; padding: 17px 20px; border: 1px solid rgba(83, 198, 209, .22); border-left: 3px solid #53c6d1; border-radius: 11px; background: rgba(3, 141, 161, .09) !important; color: #c4d8dc !important; }
body[data-page="rules"] .rules-info { margin-bottom: 22px; padding: 23px; border: 1px solid #263e48; border-radius: 15px; background: #0d1d26; box-shadow: 0 14px 34px rgba(0, 0, 0, .16); }
body[data-page="rules"] .rules-info__eyebrow { color: #72d4de !important; }
body[data-page="rules"] .rules-info h2,
body[data-page="rules"] .rules-info__item h3 { color: #ecf5f6 !important; }
body[data-page="rules"] .rules-info__item { border-color: #36545f !important; }
body[data-page="rules"] .rules-info__item p { color: #b5c8cd !important; }
body[data-page="rules"] .rules-section { margin: 0 0 16px; padding: 23px !important; border: 1px solid #263e48 !important; border-radius: 15px !important; background: #0d1d26 !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .14); scroll-margin-top: 150px; }
body[data-page="rules"] .rules-sec-head { padding-bottom: 16px; border-color: #263e48 !important; }
body[data-page="rules"] .rules-sec-icon { background: rgba(3, 141, 161, .16) !important; }
body[data-page="rules"] .rules-sec-icon svg { color: #7bd9e2 !important; }
body[data-page="rules"] .rules-sec-title { color: #ecf5f6 !important; }
body[data-page="rules"] .rules-sec-desc { color: #8ba3aa !important; }
body[data-page="rules"] .rules-sec-badge { color: #a8e6eb !important; background: rgba(3, 141, 161, .13) !important; border-color: #36545f !important; }
body[data-page="rules"] .rules-list { gap: 7px; }
body[data-page="rules"] .rule-item { padding: 14px 15px; border: 1px solid rgba(204, 232, 237, .08) !important; border-radius: 10px !important; background: rgba(255, 255, 255, .018) !important; }
body[data-page="rules"] .rule-item:hover { background: rgba(3, 141, 161, .1) !important; border-color: rgba(83, 198, 209, .22) !important; }
body[data-page="rules"] .rule-num { color: #8be0e8 !important; background: rgba(3, 141, 161, .14) !important; border-color: rgba(83, 198, 209, .22) !important; }
body[data-page="rules"] .rule-item__text { color: #e0ebed !important; }
body[data-page="rules"] .rule-item__text span { color: #a9bdc3 !important; }
body[data-page="rules"] .rules-footnote { background: rgba(3, 141, 161, .09) !important; border-color: rgba(83, 198, 209, .22) !important; color: #bfd3d7 !important; }
body[data-page="rules"] .rules-footnote svg,
body[data-page="rules"] .rules-footnote a { color: #7bd9e2 !important; }
body[data-page="rules"] .rules-empty { color: #9bb1b7 !important; }
body[data-page="rules"] .skel { background: linear-gradient(90deg, #10232d 25%, #18323c 50%, #10232d 75%) !important; }
body[data-page="rules"] #backToTop { background: #02667b; color: #fff; }

@media (max-width: 900px) {
  body[data-page="rules"] .rules-body { padding: 22px 18px 70px; }
  body[data-page="rules"] .rules-sidebar { top: 8px; }
  body[data-page="rules"] .rules-hero { min-height: 320px !important; padding-top: 112px !important; }
}
@media (max-width: 620px) {
  body[data-page="profile"] .profile-cols { grid-template-columns: 1fr; }
  body[data-page="rules"] .rules-statsbar { justify-content: center; gap: 16px; }
  body[data-page="rules"] .rules-section { padding: 17px !important; }
  body[data-page="rules"] .rules-sec-icon { display: flex; }
}