:root {
  color-scheme: light;
  --ink: #25231f;
  --ink-soft: #514c44;
  --muted: #7b756d;
  --parchment: #eee9df;
  --parchment-light: #f7f3ea;
  --parchment-deep: #dfd7ca;
  --line: rgba(67, 55, 43, 0.18);
  --line-strong: rgba(67, 55, 43, 0.34);
  --crimson: #9f251c;
  --crimson-bright: #c73b29;
  --gold: #b98b31;
  --green: #4a7f37;
  --blue: #2e7191;
  --purple: #7b4b91;
  --dark: #111412;
  --dark-soft: #1b1f1c;
  --cream-shadow: 0 18px 45px rgba(52, 43, 33, 0.16);
  --dark-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --official-art-1: none;
  --official-art-2: none;
  --official-art-3: none;
  --official-art-4: none;
  --official-art-5: none;
  --official-art-6: none;
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: #181a18;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: #181a18;
}

button, input, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  background: var(--parchment);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  border-right: 1px solid rgba(38, 32, 26, 0.22);
  background:
    linear-gradient(rgba(248, 244, 236, 0.94), rgba(239, 234, 225, 0.97)),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(88, 69, 48, 0.025) 6px 7px);
  box-shadow: 6px 0 22px rgba(22, 19, 16, 0.12);
}

.brand-block {
  position: relative;
  min-height: 164px;
  display: grid;
  place-items: center;
  padding: 26px 20px 22px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.brand-brush {
  position: absolute;
  width: 122px;
  height: 90px;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  opacity: 0.92;
  background:
    radial-gradient(ellipse at 52% 52%, transparent 0 22%, #8e211b 23% 28%, transparent 29% 100%),
    conic-gradient(from 210deg at 47% 53%, transparent 0 8%, #b23224 9% 20%, transparent 21% 35%, #7f1916 36% 43%, transparent 44% 100%);
  filter: saturate(0.9);
  mask-image: radial-gradient(ellipse, #000 0 62%, transparent 76%);
}

.brand-block::before,
.brand-block::after {
  content: "";
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(128, 34, 26, 0.78), transparent);
}

.brand-block::before { width: 150px; top: 105px; }
.brand-block::after { width: 110px; top: 136px; }

.brand-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.brand-title {
  margin-top: 50px;
  font-family: var(--serif);
  font-size: 1.48rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.brand-title b {
  color: var(--crimson);
  font-size: 1.9rem;
  font-style: italic;
}

.brand-subtitle {
  margin-top: 7px;
  font-family: var(--serif);
  font-size: 0.79rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.sidebar-close { display: none; }

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  width: 100%;
  height: 47px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 25px;
  color: #393631;
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid rgba(87, 73, 58, 0.055);
  background: transparent;
  text-align: left;
  transition: 150ms ease;
}

.nav-item .icon { width: 19px; height: 19px; }
.nav-item span { font-size: 0.82rem; font-weight: 560; }

.nav-item:hover {
  color: var(--crimson);
  padding-left: 29px;
  background: rgba(146, 39, 29, 0.045);
}

.nav-item.active {
  color: #8b211b;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.44)),
    var(--parchment-light);
  box-shadow: inset 0 1px rgba(255,255,255,.9), inset 0 -1px rgba(90,69,50,.08);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(#bc3428, #7d1815);
  box-shadow: 3px 0 12px rgba(151, 35, 27, 0.28);
}

.sidebar-spacer-art {
  position: relative;
  min-height: 150px;
  flex: 1;
  margin-top: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(238,233,223,1) 0%, rgba(238,233,223,.34) 35%, rgba(20,22,20,.92) 100%),
    var(--official-art-2) center 50% / cover no-repeat;
  filter: saturate(0.65) contrast(0.93);
}

.sidebar-spacer-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 70px;
  background: linear-gradient(transparent, #161916);
}

.sidebar-account {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  padding: 17px 17px 12px;
  color: #eeeae1;
  background: #151815;
  border-top: 1px solid rgba(255,255,255,.09);
}

.sidebar-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #dac18c;
  border: 1px solid rgba(218, 193, 140, 0.48);
  border-radius: 50%;
  background: radial-gradient(circle, #343b35, #131613);
}

.sidebar-avatar img { width: 31px; height: 31px; object-fit: contain; }
.sidebar-avatar .icon { width: 24px; height: 24px; }

.sidebar-account-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidebar-account-copy strong,
.sidebar-account-copy span,
.sidebar-account-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-copy strong { font-size: 0.76rem; }
.sidebar-account-copy span { margin-top: 3px; color: #bdbaae; font-size: 0.66rem; }
.sidebar-account-copy small { margin-top: 3px; color: #858980; font-size: 0.62rem; }

.sidebar-logout {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 7px 0 0 53px;
  padding: 0;
  color: #d85a4d;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px 13px;
  color: #73796f;
  background: #151815;
  font-size: 0.55rem;
}

.workspace {
  position: relative;
  min-width: 0;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.55), transparent 30rem),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(86,69,47,.018) 8px 9px),
    var(--parchment);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(22px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  background: rgba(243, 238, 228, 0.94);
  backdrop-filter: blur(15px);
}

.topbar-dashboard {
  position: absolute;
  right: 0;
  left: 0;
  color: #f5f2ea;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(8, 12, 13, 0.72), rgba(8, 12, 13, 0));
  backdrop-filter: none;
}

.topbar-dashboard-spacer { flex: 1; }

.page-heading { min-width: 0; }
.page-heading span {
  color: var(--crimson);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.15em;
}
.page-heading h1 {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 720;
  white-space: nowrap;
}

.connection-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6dbc53;
  box-shadow: 0 0 10px rgba(109, 188, 83, 0.7);
}

.updated-copy {
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.25);
  font-size: 0.66rem;
  white-space: nowrap;
}

.topbar:not(.topbar-dashboard) .updated-copy { border-color: var(--line); color: var(--muted); }

.refresh-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.refresh-icon:hover { background: rgba(255,255,255,.1); }
.refresh-icon:disabled { opacity: .5; cursor: wait; }
.refresh-icon .icon { width: 17px; height: 17px; }

.icon-button {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.35);
}

.mobile-menu { display: none; }

.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 15px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  transition: 160ms ease;
}
.button:disabled { opacity: .55; cursor: wait; }
.button .icon { width: 17px; height: 17px; }

.button-primary {
  color: #fff9ef;
  border-color: #8c2019;
  background: linear-gradient(#b43428, #8e2019);
  box-shadow: 0 9px 22px rgba(125, 31, 24, 0.2);
}
.button-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }

.button-quiet,
.button-ghost {
  color: #49423a;
  border-color: var(--line-strong);
  background: rgba(255,255,255,.52);
}
.topbar-dashboard .button-ghost { color: #fff; border-color: rgba(255,255,255,.32); background: rgba(0,0,0,.18); }
.button-quiet:hover:not(:disabled), .button-ghost:hover:not(:disabled) { color: var(--crimson); border-color: rgba(159,37,28,.45); }
.button-danger { color: #92261f; border-color: rgba(159,37,28,.3); background: rgba(159,37,28,.06); }
.button-large { min-height: 48px; padding: 0 19px; }

.toast {
  position: fixed;
  z-index: 90;
  right: 24px;
  top: 88px;
  max-width: min(440px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  color: #eeeae1;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  background: #20231f;
  box-shadow: var(--dark-shadow);
  font-size: 0.78rem;
}
.toast.error { border-color: rgba(216, 91, 77, 0.45); }
.toast.error > .icon { color: #e16759; }
.toast.success { border-color: rgba(90, 162, 72, 0.45); }
.toast.success > .icon { color: #76b862; }
.toast-close { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; color: #aaa; cursor: pointer; border: 0; background: transparent; }
.toast-close .icon { width: 15px; height: 15px; }

.main-content {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 42px);
}
.dashboard-content { width: 100%; padding: 0 0 36px; }

.dashboard-hero {
  position: relative;
  min-height: 318px;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #f4f1e9;
  background: #182125;
}

.hero-art {
  position: absolute;
  inset: 0;
  background: var(--official-art-1) center 46% / cover no-repeat;
  filter: saturate(.72) contrast(.98) brightness(.72);
  transform: scale(1.012);
}

.hero-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 24, 31, .94) 0%, rgba(17, 29, 36, .66) 34%, rgba(15, 24, 29, .15) 62%, rgba(10, 15, 16, .56) 100%),
    linear-gradient(0deg, rgba(10, 14, 14, .7), transparent 46%);
}

.hero-account-overview {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: 82px clamp(32px, 5vw, 76px) 42px;
}

.hero-welcome { font-size: .76rem; color: #e9e4da; }
.hero-account-overview h2 {
  margin: 5px 0 14px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 500;
  letter-spacing: -.035em;
  text-shadow: 0 3px 15px rgba(0,0,0,.32);
}
.hero-rule { width: min(520px, 75vw); height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.55), transparent); }
.overview-label { display: block; margin-top: 12px; font-size: .78rem; }

.account-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 38px;
  margin-top: 21px;
}
.account-fact { min-width: 175px; display: flex; align-items: center; gap: 11px; }
.account-fact > .icon { width: 27px; height: 27px; color: #c8ad72; }
.account-fact div { display: flex; flex-direction: column; gap: 3px; }
.account-fact span { color: #c8c5bd; font-size: .66rem; }
.account-fact strong { max-width: 260px; font-size: .78rem; font-weight: 600; }

.hero-wallet {
  position: absolute;
  z-index: 4;
  top: 58px;
  right: clamp(20px, 3vw, 44px);
  width: min(300px, 28vw);
  padding: 14px 17px 13px;
  color: #eeeae1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(22,25,23,.95), rgba(11,14,13,.88));
  box-shadow: var(--dark-shadow);
  backdrop-filter: blur(8px);
}

.hero-wallet header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.09); }
.hero-wallet header span { font-family: var(--serif); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.hero-wallet header .icon { width: 14px; height: 14px; transform: rotate(90deg); }
.hero-wallet-list { display: grid; gap: 7px; padding: 10px 0; }
.hero-wallet-row { display: grid; grid-template-columns: 22px minmax(72px, auto) 1fr; align-items: center; gap: 8px; }
.hero-wallet-row .currency-icon { width: 20px; height: 20px; display: grid; place-items: center; }
.hero-wallet-row .currency-icon img { width: 19px; height: 19px; object-fit: contain; }
.hero-wallet-row strong { font-family: var(--serif); font-size: .89rem; font-weight: 500; white-space: nowrap; }
.hero-wallet-row > span { overflow: hidden; color: #9fa39c; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.wallet-empty { padding: 10px 0; color: #999; font-size: .7rem; }
.hero-wallet-link { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 9px 0 0; color: #e1a161; cursor: pointer; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: transparent; font-size: .62rem; }
.hero-wallet-link .icon { width: 13px; height: 13px; }

.coin { display: inline-block; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; vertical-align: 1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.coin.gold { background: #d8a620; }
.coin.silver { background: #c7cbd0; }
.coin.copper { background: #b86b39; }

.issues-panel {
  margin: 14px clamp(24px, 3vw, 42px) 0;
  border: 1px solid rgba(159,37,28,.22);
  background: rgba(159,37,28,.045);
}
.issues-panel summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; color: #7f2821; cursor: pointer; list-style: none; font-size: .72rem; font-weight: 750; }
.issues-panel summary::-webkit-details-marker { display: none; }
.issues-panel summary .icon:first-child { color: var(--crimson); }
.issues-panel summary .icon:last-child { transition: transform 160ms ease; }
.issues-panel[open] summary .icon:last-child { transform: rotate(90deg); }
.issues-list { display: grid; gap: 8px; padding: 0 15px 15px 43px; }
.issues-list div { display: flex; flex-direction: column; gap: 3px; }
.issues-list strong { font-size: .71rem; }
.issues-list span { color: var(--muted); font-size: .67rem; }

.activity-card-grid {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin: -1px clamp(24px, 3vw, 42px) 0;
  padding-top: 0;
}

.activity-card,
.paper-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(82,67,50,.18);
  background:
    radial-gradient(circle at 25% 0, rgba(255,255,255,.7), transparent 15rem),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(82,62,42,.018) 8px 9px),
    var(--parchment-light);
  box-shadow: var(--cream-shadow);
}

.activity-card { min-height: 226px; display: flex; flex-direction: column; padding: 15px 17px 0; }
.activity-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px rgba(255,255,255,.75); }
.activity-card header { display: flex; justify-content: space-between; align-items: center; }
.activity-card header h3 { margin: 0; font-family: var(--serif); font-size: .9rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.activity-card header > span { width: 17px; height: 17px; display: grid; place-items: center; color: #787169; border: 1px solid #91897e; border-radius: 50%; font-size: .58rem; }
.activity-card-body { flex: 1; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 15px; padding: 12px 2px 10px; }
.activity-card > button { width: calc(100% + 34px); min-height: 39px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-left: -17px; padding: 0 16px; color: var(--crimson); cursor: pointer; border: 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.26); font-size: .62rem; }
.activity-card > button:hover { background: rgba(159,37,28,.05); }
.activity-card > button .icon { width: 13px; height: 13px; }

.activity-medallion {
  --progress: 0;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--tone) calc(var(--progress) * 1%), rgba(87,78,66,.16) 0);
  box-shadow: 0 5px 18px rgba(42,35,27,.16);
}
.activity-medallion::before { content: ""; position: absolute; width: 72px; height: 72px; border: 1px solid rgba(80,68,54,.25); border-radius: 50%; background: var(--parchment-light); box-shadow: inset 0 0 0 6px rgba(255,255,255,.55); }
.activity-medallion .icon { position: relative; z-index: 1; width: 38px; height: 38px; stroke-width: 1.2; }
.activity-medallion.blue { --tone: #357f9f; color: #2f6d88; }
.activity-medallion.green { --tone: #6c8c38; color: #5d7d2d; }
.activity-medallion.red { --tone: #9c372b; color: #8d2b23; }

.activity-values { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; }
.activity-values span, .activity-values small { color: #686158; font-size: .61rem; }
.activity-values strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.activity-values b { font-family: var(--serif); font-size: .92rem; font-weight: 500; }
.activity-values small { grid-column: 2; }
.activity-values .secondary-label { grid-column: 1; margin-top: 8px; }
.activity-values.single { display: flex; flex-direction: column; align-items: flex-start; }
.activity-values.single strong { margin: 5px 0 3px; font-size: 1.3rem; }
.success-text { color: var(--green); }

.activity-art {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  color: #6b5632;
  border: 1px solid rgba(88,72,48,.2);
  background: linear-gradient(145deg, #ded3bb, #faf6eb);
  box-shadow: 0 7px 18px rgba(44,34,24,.13);
}
.activity-art::before, .activity-art::after { content: ""; position: absolute; background: rgba(96,70,39,.17); }
.activity-art::before { width: 70px; height: 1px; transform: rotate(-18deg); }
.activity-art::after { width: 1px; height: 68px; transform: rotate(18deg); }
.activity-art .icon { width: 42px; height: 42px; }
.activity-art span { position: absolute; right: 7px; bottom: 5px; min-width: 24px; height: 24px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--green); font-size: .65rem; font-weight: 800; }

.dashboard-panel-grid {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(360px,.95fr);
  gap: 14px;
  margin: 14px clamp(24px, 3vw, 42px) 0;
}

.paper-panel { padding: 0; }
.paper-panel-header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.paper-panel-header h3 { margin: 0; font-family: var(--serif); font-size: .86rem; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.paper-panel-header button { display: flex; align-items: center; gap: 6px; padding: 0; color: var(--crimson); cursor: pointer; border: 0; background: transparent; font-size: .61rem; }
.paper-panel-header button .icon { width: 13px; height: 13px; }
.paper-panel-header > span { color: var(--muted); font-size: .63rem; }

.portrait-character-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; padding: 12px; }
.portrait-character-card { position: relative; min-height: 220px; overflow: hidden; color: #fff; border: 1px solid rgba(47,39,31,.28); background: #292a25; box-shadow: 0 8px 16px rgba(41,34,26,.16); }
.character-art-layer { position: absolute; inset: 0; background-image: var(--character-art, var(--official-art-3)); background-position: center 32%; background-size: cover; background-repeat: no-repeat; filter: saturate(.68) contrast(1.04) brightness(.64); transform: scale(1.03); }
.profession-watermark { position: absolute; width: 115px; height: 115px; display: grid; place-items: center; top: 30px; left: 50%; transform: translateX(-50%); opacity: .78; filter: drop-shadow(0 8px 15px rgba(0,0,0,.35)); }
.profession-watermark img { width: 102px; height: 102px; object-fit: contain; }
.profession-watermark span { font-family: var(--serif); font-size: 3rem; color: var(--profession-color); }
.character-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(7,8,7,.18) 38%, rgba(5,6,5,.96) 100%); }
.character-profession-tab { position: absolute; z-index: 3; top: 0; left: 9px; width: 28px; min-height: 37px; display: grid; place-items: center; padding: 5px 3px 8px; background: color-mix(in srgb, var(--profession-color) 65%, #161616); clip-path: polygon(0 0,100% 0,100% 78%,50% 100%,0 78%); }
.character-profession-tab img { width: 20px; height: 20px; object-fit: contain; filter: brightness(2.4) saturate(0); }
.character-profession-tab span { font-size: .55rem; font-weight: 900; }
.portrait-character-copy { position: absolute; z-index: 3; right: 9px; bottom: 10px; left: 9px; display: flex; flex-direction: column; }
.portrait-character-copy strong { overflow: hidden; font-family: var(--serif); font-size: .86rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.portrait-character-copy > span { margin-top: 4px; color: #cbc9c1; font-size: .57rem; }
.portrait-character-copy > small { margin-top: 2px; color: #f1eee5; font-size: .57rem; }
.portrait-character-copy div { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; padding-top: 7px; color: #c9ab70; border-top: 1px solid rgba(255,255,255,.12); font-size: .53rem; }
.portrait-character-copy b { font-weight: 700; }
.portrait-character-copy em { color: #aaa; font-style: normal; }

.account-progress-panel { min-height: 286px; }
.progress-feature { display: flex; align-items: center; gap: 14px; padding: 18px 18px 13px; }
.achievement-star { width: 66px; height: 66px; display: grid; place-items: center; color: #8c5d08; border-radius: 50%; background: radial-gradient(circle, #f3d887 0 32%, #b37c15 34% 43%, #f1d987 45% 52%, transparent 53%); filter: drop-shadow(0 5px 7px rgba(65,47,20,.18)); }
.achievement-star .icon { width: 28px; height: 28px; }
.progress-feature strong { display: block; font-family: var(--serif); font-size: 1.65rem; font-weight: 500; }
.progress-feature span { color: var(--muted); font-size: .6rem; }
.progress-rank { margin: 0 18px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.progress-rank span { color: var(--muted); font-size: .57rem; }
.progress-rank strong { display: block; margin-top: 3px; color: var(--purple); font-family: var(--serif); font-size: .9rem; font-weight: 500; }
.progress-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 14px 18px; }
.progress-stat > div:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.progress-stat span { color: #5f5950; font-size: .58rem; }
.progress-stat strong { font-family: var(--serif); font-size: .78rem; }
.progress-track { height: 5px; overflow: hidden; margin-top: 5px; border-radius: 999px; background: rgba(72,61,47,.13); }
.progress-track i { display: block; height: 100%; border-radius: inherit; }
.progress-track i.gold { background: linear-gradient(90deg, #a3751e, #e1bc59); }
.progress-track i.green { background: linear-gradient(90deg, #496f2b, #91b962); }
.progress-track i.blue { background: linear-gradient(90deg, #346889, #70a8c5); }
.progress-track i.purple { background: linear-gradient(90deg, #69427b, #a66cbb); }
.access-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 17px; }
.access-strip span { padding: 4px 7px; color: #61594e; border: 1px solid var(--line); background: rgba(255,255,255,.42); font-size: .52rem; text-transform: uppercase; }

.tyria-links-panel { margin: 14px clamp(24px, 3vw, 42px) 0; }
.tyria-link-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 12px; }
.tyria-link-grid a { min-height: 80px; display: grid; grid-template-columns: 116px minmax(0,1fr) auto; align-items: center; gap: 12px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.35); transition: 150ms ease; }
.tyria-link-grid a:hover { transform: translateY(-2px); border-color: rgba(159,37,28,.32); box-shadow: 0 10px 18px rgba(50,40,28,.1); }
.resource-art { align-self: stretch; min-height: 78px; background-position: center; background-size: cover; filter: saturate(.78); }
.resource-news { background-image: linear-gradient(90deg, transparent, rgba(247,243,234,.18)), var(--official-art-4); }
.resource-wiki { background-image: linear-gradient(90deg, transparent, rgba(247,243,234,.18)), var(--official-art-5); }
.resource-account { background-image: linear-gradient(90deg, transparent, rgba(247,243,234,.18)), var(--official-art-6); }
.tyria-link-grid strong { display: block; font-family: var(--serif); font-size: .83rem; font-weight: 500; }
.tyria-link-grid small { display: block; margin-top: 4px; color: var(--muted); font-size: .58rem; }
.tyria-link-grid > a > .icon { width: 15px; height: 15px; margin-right: 14px; color: var(--crimson); }

.onboarding-panel {
  position: relative;
  min-height: calc(100vh - 72px - 84px);
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr);
  align-items: center;
  gap: 44px;
  overflow: hidden;
  padding: clamp(38px,7vw,88px);
  color: #f4f1e8;
  background: #172126;
  box-shadow: var(--dark-shadow);
}
.onboarding-art { position: absolute; inset: 0; background: var(--official-art-2) center / cover no-repeat; filter: brightness(.54) saturate(.76); }
.onboarding-panel::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,19,23,.92), rgba(11,19,23,.56) 56%, rgba(8,12,13,.35)); }
.onboarding-copy, .onboarding-paper { position: relative; z-index: 2; }
.overline { color: var(--crimson-bright); font-size: .62rem; font-weight: 850; letter-spacing: .15em; }
.onboarding-copy h2, .page-intro h2, .locked-panel h2, .coming-page h2 { margin: 12px 0 16px; font-family: var(--serif); font-size: clamp(2.55rem,5vw,5rem); font-weight: 500; line-height: .95; letter-spacing: -.04em; }
.onboarding-copy p { max-width: 660px; margin: 0; color: #d0cdc4; line-height: 1.7; }
.onboarding-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.onboarding-panel .button-ghost { color: #f5f0e6; border-color: rgba(255,255,255,.32); background: rgba(0,0,0,.22); }
.onboarding-paper { padding: 23px; color: var(--ink); border: 1px solid rgba(255,255,255,.26); background: var(--parchment-light); box-shadow: var(--cream-shadow); }
.onboarding-paper > span { display:block; padding-bottom: 13px; border-bottom:1px solid var(--line); font-family:var(--serif); font-size:.9rem; text-transform:uppercase; }
.feature-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; padding:15px 0; border-bottom:1px solid var(--line); }
.feature-item:last-child { border-bottom:0; }
.feature-item > .icon { color:var(--crimson); }
.feature-item div { display:flex; flex-direction:column; gap:4px; }
.feature-item strong { font-size:.72rem; }
.feature-item span { color:var(--muted); font-size:.62rem; line-height:1.45; }

.skeleton-stack { display:grid; gap:14px; }
.skeleton { position:relative; overflow:hidden; background:#d9d2c6; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:shimmer 1.35s infinite; }
.skeleton-hero { min-height:318px; }
.skeleton-activity { min-height:226px; }
.skeleton-panel { min-height:280px; }
.skeleton-panel.tall { min-height:330px; }
@keyframes shimmer { to { transform:translateX(100%); } }

.page-intro {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  overflow: hidden;
  padding: clamp(30px,5vw,62px);
  color: #f5f1e8;
  background: #182225;
  box-shadow: var(--dark-shadow);
}
.page-intro::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(13,21,25,.94),rgba(13,21,25,.35)), var(--official-art-3) center 43% / cover no-repeat; filter:saturate(.72); }
.page-intro > * { position:relative; z-index:1; }
.page-intro h2 { max-width:760px; margin-bottom:10px; }
.page-intro p { max-width:690px; margin:0; color:#cfccc4; line-height:1.65; }
.page-count { min-width:130px; display:flex; flex-direction:column; align-items:center; padding:20px; border:1px solid rgba(255,255,255,.24); background:rgba(10,13,13,.46); }
.page-count strong { font-family:var(--serif); font-size:2.4rem; font-weight:500; }
.page-count span { color:#c8c4bb; font-size:.63rem; text-transform:uppercase; letter-spacing:.12em; }

.full-character-list { display:grid; gap:12px; margin-top:14px; }
.full-character-card { position:relative; min-height:142px; display:grid; grid-template-columns:74px minmax(190px,.8fr) minmax(340px,1.5fr) minmax(240px,1fr) auto; align-items:center; gap:18px; overflow:hidden; padding:18px 20px; border:1px solid var(--line); background:var(--parchment-light); box-shadow:var(--cream-shadow); }
.full-character-card::before { content:""; position:absolute; top:0; bottom:0; left:0; width:6px; background:var(--profession-color); }
.full-character-art { position:absolute; top:0; right:0; bottom:0; width:34%; opacity:.22; background-image:var(--character-art, var(--official-art-3)); background-position:center 32%; background-size:cover; background-repeat:no-repeat; mask-image:linear-gradient(90deg,transparent,#000); }
.full-character-card > *:not(.full-character-art) { position:relative; z-index:1; }
.full-profession-badge { width:58px; height:58px; display:grid; place-items:center; color:var(--profession-color); border:1px solid color-mix(in srgb,var(--profession-color) 50%,#645f57); border-radius:50%; background:rgba(255,255,255,.5); font-weight:850; }
.full-profession-badge img { width:42px; height:42px; object-fit:contain; }
.full-character-name span { color:var(--profession-color); font-size:.58rem; font-weight:800; text-transform:uppercase; }
.full-character-name h3 { margin:5px 0 0; font-family:var(--serif); font-size:1.22rem; font-weight:500; }
.full-character-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.full-character-stats div { display:flex; flex-direction:column; gap:4px; }
.full-character-stats span { color:var(--muted); font-size:.55rem; text-transform:uppercase; }
.full-character-stats strong { font-family:var(--serif); font-size:.79rem; font-weight:500; }
.full-character-crafting { display:flex; flex-wrap:wrap; gap:6px; }
.full-character-crafting span { padding:5px 7px; color:#665f56; border:1px solid var(--line); background:rgba(255,255,255,.4); font-size:.54rem; }
.full-character-crafting span.active { color:#416c35; border-color:rgba(74,127,55,.32); background:rgba(74,127,55,.07); }
.coming-badge { justify-self:end; padding:7px 9px; color:var(--crimson); border:1px solid rgba(159,37,28,.25); background:rgba(159,37,28,.05); font-size:.56rem; font-weight:800; text-transform:uppercase; }

.panel-empty { min-height:170px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--muted); }
.panel-empty .icon { width:30px; height:30px; color:#999083; }
.panel-empty span { font-size:.68rem; }

.locked-panel {
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:50px;
  border:1px solid var(--line);
  background:var(--parchment-light);
  box-shadow:var(--cream-shadow);
}
.locked-panel > div { width:76px; height:76px; display:grid; place-items:center; color:var(--crimson); border:1px solid rgba(159,37,28,.25); border-radius:50%; background:rgba(159,37,28,.05); }
.locked-panel > div .icon { width:34px; height:34px; }
.locked-panel h2 { margin-bottom:12px; font-size:clamp(2.4rem,5vw,4.6rem); }
.locked-panel p { max-width:560px; margin:0 0 22px; color:var(--muted); }

.coming-page { position:relative; min-height:650px; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.65fr); align-items:center; overflow:hidden; color:#f5f1e8; background:#172024; box-shadow:var(--dark-shadow); }
.coming-page-art { position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,19,23,.95),rgba(11,19,23,.55),rgba(11,19,23,.2)),var(--official-art-5) center / cover no-repeat; filter:saturate(.74); }
.coming-page-copy { position:relative; z-index:1; max-width:820px; padding:clamp(40px,7vw,90px); }
.coming-symbol { width:70px; height:70px; display:grid; place-items:center; margin-bottom:24px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.26); }
.coming-symbol .icon { width:31px; height:31px; color:#d4b06c; }
.coming-page h2 { margin-bottom:14px; }
.coming-page p { max-width:660px; color:#cecbc3; line-height:1.7; }
.coming-feature-grid { display:grid; gap:8px; margin-top:26px; }
.coming-feature-grid div { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:center; padding:12px 14px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.23); }
.coming-feature-grid span { color:#cf6e59; font-family:var(--serif); }
.coming-feature-grid strong { font-size:.7rem; }

.settings-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,.75fr); gap:14px; }
.panel-header { min-height:64px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:0 18px; border-bottom:1px solid var(--line); }
.panel-title-icon { width:36px; height:36px; display:grid; place-items:center; color:var(--crimson); border:1px solid rgba(159,37,28,.2); background:rgba(159,37,28,.05); }
.panel-title-icon .icon { width:18px; height:18px; }
.panel-header h3 { margin:0; font-family:var(--serif); font-size:.9rem; font-weight:600; }
.panel-header span { color:var(--muted); font-size:.59rem; }
.panel-link { display:flex; align-items:center; gap:5px; padding:0; color:var(--crimson); cursor:pointer; border:0; background:transparent; font-size:.6rem; }
.panel-link .icon { width:13px; height:13px; }
.settings-body { padding:20px; }
.security-note { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:15px; border:1px solid rgba(74,127,55,.22); background:rgba(74,127,55,.055); }
.security-note > .icon { color:var(--green); }
.security-note div { display:flex; flex-direction:column; gap:4px; }
.security-note strong { font-size:.73rem; }
.security-note span { color:var(--muted); font-size:.63rem; line-height:1.5; }
.connected-key-card { margin-top:16px; padding:18px; border:1px solid var(--line); background:rgba(255,255,255,.34); }
.connected-key-status { display:flex; align-items:center; gap:8px; color:var(--green); }
.connected-key-status span { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(74,127,55,.45); }
.key-details { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.key-details div { display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid var(--line); background:rgba(255,255,255,.4); }
.key-details span { color:var(--muted); font-size:.55rem; text-transform:uppercase; }
.key-details strong { overflow:hidden; font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.settings-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.api-form { display:grid; gap:13px; margin-top:17px; }
.api-form > label:first-child { font-size:.68rem; font-weight:760; }
.api-input-wrap { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding:0 13px; border:1px solid var(--line-strong); background:#fffdfa; }
.api-input-wrap .icon { color:var(--crimson); }
.api-input-wrap input { min-width:0; height:48px; border:0; outline:0; background:transparent; }
.remember-option { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; cursor:pointer; }
.remember-option input { margin-top:3px; accent-color:var(--crimson); }
.remember-option span { display:flex; flex-direction:column; gap:3px; }
.remember-option strong { font-size:.67rem; }
.remember-option small { color:var(--muted); font-size:.59rem; }
.settings-side { display:grid; align-content:start; gap:14px; }
.permission-guide-list { display:grid; }
.permission-guide-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); }
.permission-guide-row > span { color:#958c80; }
.permission-guide-row.granted > span { color:var(--green); }
.permission-guide-row div { display:flex; flex-direction:column; gap:3px; }
.permission-guide-row strong { font-size:.68rem; text-transform:capitalize; }
.permission-guide-row small { color:var(--muted); font-size:.58rem; }
.create-key-panel { padding:20px; }
.create-key-panel > .icon { width:28px; height:28px; color:var(--crimson); }
.create-key-panel > span { display:block; margin-top:13px; color:var(--muted); font-size:.6rem; text-transform:uppercase; }
.create-key-panel > strong { display:block; margin-top:5px; font-family:var(--serif); font-size:1rem; }
.create-key-panel p { color:var(--muted); font-size:.63rem; line-height:1.55; }

.mobile-scrim { display:none; }

@media (max-width: 1280px) {
  .activity-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-panel-grid { grid-template-columns:1fr; }
  .portrait-character-grid { grid-template-columns:repeat(5,minmax(130px,1fr)); overflow-x:auto; }
  .portrait-character-card { min-width:145px; }
  .hero-wallet { width:285px; }
  .account-fact.access-fact { display:none; }
  .full-character-card { grid-template-columns:70px minmax(170px,.8fr) minmax(300px,1.2fr); }
  .full-character-crafting { grid-column:2 / 4; }
  .character-upload-actions { grid-column:3; grid-row:2; }
  .coming-badge { grid-column:4; grid-row:1 / 3; }
  .tyria-link-grid { grid-template-columns:1fr; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; width:min(290px,86vw); transform:translateX(-105%); transition:transform 180ms ease; }
  .sidebar-open .sidebar { transform:translateX(0); }
  .mobile-scrim { position:fixed; z-index:35; inset:0; display:block; visibility:hidden; opacity:0; background:rgba(0,0,0,.55); transition:180ms ease; }
  .sidebar-open .mobile-scrim { visibility:visible; opacity:1; }
  .sidebar-close { position:absolute; top:12px; right:12px; display:grid; }
  .mobile-menu { display:grid; }
  .topbar-dashboard .mobile-menu { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(0,0,0,.22); }
  .hero-account-overview { padding-left:28px; padding-right:340px; }
  .settings-layout { grid-template-columns:1fr; }
  .onboarding-panel { grid-template-columns:1fr; }
  .onboarding-paper { max-width:570px; }
  .full-character-card { grid-template-columns:62px minmax(0,1fr); }
  .full-character-stats, .full-character-crafting { grid-column:2; }
  .character-upload-actions { grid-column:2; grid-row:auto; justify-self:start; }
  .coming-badge { grid-column:2; grid-row:auto; justify-self:start; }
}

@media (max-width: 760px) {
  .topbar { height:62px; padding:0 15px; }
  .connection-pill { font-size:.59rem; }
  .updated-copy { display:none; }
  .main-content { padding:15px; }
  .dashboard-content { padding:0 0 20px; }
  .dashboard-hero { min-height:515px; }
  .hero-art { background-position:56% center; }
  .hero-wash { background:linear-gradient(180deg,rgba(10,16,20,.5),rgba(10,16,20,.9) 60%,rgba(8,11,11,.97)); }
  .hero-account-overview { align-self:end; padding:80px 20px 214px; }
  .hero-account-overview h2 { font-size:2rem; }
  .account-facts { gap:14px; }
  .hero-wallet { top:auto; right:15px; bottom:16px; left:15px; width:auto; }
  .hero-wallet-list { grid-template-columns:1fr 1fr; }
  .hero-wallet-row { grid-template-columns:22px minmax(60px,auto); }
  .hero-wallet-row > span { display:none; }
  .activity-card-grid { grid-template-columns:1fr; margin:12px 15px 0; }
  .issues-panel { margin:12px 15px 0; }
  .dashboard-panel-grid { margin:12px 15px 0; }
  .tyria-links-panel { margin:12px 15px 0; }
  .portrait-character-grid { grid-template-columns:repeat(5,155px); }
  .progress-stat-grid { grid-template-columns:1fr; }
  .tyria-link-grid a { grid-template-columns:90px minmax(0,1fr) auto; }
  .onboarding-panel { min-height:calc(100vh - 62px - 30px); padding:38px 22px; }
  .onboarding-copy h2 { font-size:2.7rem; }
  .page-intro { min-height:420px; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:28px 22px; }
  .page-intro h2 { font-size:2.8rem; }
  .page-count { min-width:100px; align-self:flex-end; }
  .full-character-stats { grid-template-columns:1fr 1fr; }
  .key-details { grid-template-columns:1fr; }
  .coming-page { min-height:calc(100vh - 92px); grid-template-columns:1fr; }
  .coming-page-copy { padding:38px 24px; }
  .coming-page h2 { font-size:2.8rem; }
}

@media (max-width: 480px) {
  .topbar-actions .button span { display:none; }
  .connection-pill { max-width:115px; overflow:hidden; text-overflow:ellipsis; }
  .account-fact { min-width:145px; }
  .hero-wallet-list { grid-template-columns:1fr; }
  .dashboard-hero { min-height:590px; }
  .hero-account-overview { padding-bottom:275px; }
  .activity-card-body { grid-template-columns:84px 1fr; }
  .activity-medallion, .activity-art { width:80px; height:80px; }
  .activity-medallion::before { width:62px; height:62px; }
  .activity-medallion .icon { width:31px; height:31px; }
  .portrait-character-grid { grid-template-columns:repeat(5,145px); }
  .full-character-card { padding:15px; gap:12px; }
  .full-character-stats { grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* V0.3 Companion accounts and cloud sync */
.auth-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
  overflow: hidden;
  color: #f7f2e9;
  background: #0f1517;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 16, 19, .42) 0%, rgba(9, 16, 19, .72) 50%, rgba(9, 13, 14, .96) 100%),
    linear-gradient(180deg, rgba(6, 11, 14, .08), rgba(6, 9, 10, .72)),
    var(--official-art-1) 47% center / cover no-repeat;
  filter: saturate(.82) contrast(1.04);
  transform: scale(1.01);
}

.auth-brand-panel,
.auth-card-wrap {
  position: relative;
  z-index: 1;
}

.auth-brand-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(34px, 5vw, 78px);
}

.auth-brand-mark {
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 4px 22px rgba(0,0,0,.65);
}
.auth-brand-mark span,
.auth-loading-mark span {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.2vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.auth-brand-mark b,
.auth-loading-mark b { color: #d2412e; font-size: 1.25em; font-style: italic; }
.auth-brand-mark small,
.auth-loading-mark small {
  margin-top: 7px;
  font-family: var(--serif);
  font-size: .7rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.auth-brand-copy { max-width: 720px; margin: auto 0 35px; }
.auth-brand-copy .overline { color: #d89375; }
.auth-brand-copy h1 {
  margin: 13px 0 18px;
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 6.2rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.045em;
  text-shadow: 0 10px 35px rgba(0,0,0,.52);
}
.auth-brand-copy p { max-width: 650px; margin: 0; color: #d6d6cf; font-size: .9rem; line-height: 1.75; }

.auth-sync-points {
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.auth-sync-points .feature-item {
  min-height: 112px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10, 14, 15, .45);
  backdrop-filter: blur(8px);
}
.auth-sync-points .feature-item > .icon { color: #d4ad68; }
.auth-sync-points .feature-item strong { color: #f4efe5; }
.auth-sync-points .feature-item span { color: #bdbfb9; }

.auth-card-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: clamp(24px, 5vw, 72px);
  background: linear-gradient(90deg, rgba(11,15,16,.05), rgba(11,15,16,.56));
}

.auth-card {
  width: min(100%, 490px);
  color: var(--ink);
  border: 1px solid rgba(73,57,42,.28);
  background:
    radial-gradient(circle at 35% 0, rgba(255,255,255,.84), transparent 18rem),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(82,62,42,.022) 8px 9px),
    var(--parchment-light);
  box-shadow: 0 30px 85px rgba(0,0,0,.5);
}
.auth-card::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, #771914, #c34731 48%, #7f1915);
}
.auth-card-heading { padding: 28px 30px 8px; }
.auth-card-heading > span { color: var(--crimson); font-size: .6rem; font-weight: 850; letter-spacing: .16em; }
.auth-card-heading h2 { margin: 6px 0 7px; font-family: var(--serif); font-size: 2.15rem; font-weight: 500; }
.auth-card-heading p { margin: 0; color: var(--muted); font-size: .68rem; }

.auth-error {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 9px;
  align-items: center;
  margin: 12px 30px 0;
  padding: 11px 12px;
  color: #80251e;
  border: 1px solid rgba(159,37,28,.25);
  background: rgba(159,37,28,.06);
  font-size: .66rem;
}
.auth-error .icon { color: var(--crimson); }
.auth-form { display: grid; gap: 9px; padding: 22px 30px 24px; }
.auth-form > label:not(.remember-option) { margin-top: 5px; font-size: .65rem; font-weight: 760; }
.auth-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  background: #fffdfa;
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}
.auth-input-wrap .icon { width: 17px; height: 17px; color: var(--crimson); }
.auth-input-wrap input { min-width: 0; height: 47px; border: 0; outline: 0; background: transparent; font-size: .75rem; }
.auth-input-wrap:focus-within { border-color: rgba(159,37,28,.62); box-shadow: 0 0 0 3px rgba(159,37,28,.08); }
.auth-remember { margin: 6px 0 3px; }
.auth-submit { width: 100%; margin-top: 7px; }
.auth-switch {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 15px 22px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.24);
  font-size: .64rem;
}
.auth-switch span { color: var(--muted); }
.auth-switch button { padding: 0; color: var(--crimson); cursor: pointer; border: 0; background: transparent; font-weight: 800; }
.auth-footnote { max-width: 470px; margin: 0; color: #aaaDA7; text-align: center; font-size: .58rem; line-height: 1.55; }

.auth-loading-shell { grid-template-columns: 1fr; place-items: center; align-content: center; gap: 18px; text-align: center; }
.auth-loading-mark { display: flex; flex-direction: column; align-items: center; }
.auth-loading-line { width: min(260px, 70vw); height: 2px; overflow: hidden; background: rgba(255,255,255,.14); }
.auth-loading-line::after { content: ""; display: block; width: 42%; height: 100%; background: #c33c2c; animation: auth-loading 1.25s ease-in-out infinite alternate; }
.auth-loading-shell p { margin: 0; color: #aeb1ac; font-family: var(--serif); font-size: .78rem; }
@keyframes auth-loading { from { transform: translateX(-110%); } to { transform: translateX(245%); } }

.settings-stack { display: grid; align-content: start; gap: 14px; }
.settings-layout-cloud { grid-template-columns: minmax(0,1.45fr) minmax(315px,.72fr); }
.cloud-account-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.36);
}
.cloud-account-avatar { width: 52px; height: 52px; display: grid; place-items: center; color: #d7bf8a; border-radius: 50%; background: radial-gradient(circle, #414a42, #171b18); }
.cloud-account-avatar .icon { width: 25px; height: 25px; }
.cloud-account-identity { min-width: 0; }
.cloud-account-identity span, .cloud-account-identity small { color: var(--muted); font-size: .58rem; }
.cloud-account-identity h3 { margin: 3px 0; overflow: hidden; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cloud-sync-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; color: var(--green); border: 1px solid rgba(74,127,55,.24); background: rgba(74,127,55,.06); font-size: .62rem; font-weight: 780; }
.cloud-sync-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(74,127,55,.5); }
.cloud-account-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.cloud-account-facts > div { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.25); }
.cloud-account-facts > div > .icon { color: var(--crimson); }
.cloud-account-facts span { display: flex; flex-direction: column; gap: 3px; }
.cloud-account-facts strong { font-size: .65rem; }
.cloud-account-facts small { color: var(--muted); font-size: .56rem; line-height: 1.4; }
.account-actions { justify-content: flex-end; }
.api-cloud-explainer { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid rgba(46,113,145,.2); background: rgba(46,113,145,.05); }
.api-cloud-explainer > .icon { color: var(--blue); }
.api-cloud-explainer span { display: flex; flex-direction: column; gap: 3px; }
.api-cloud-explainer strong { font-size: .66rem; }
.api-cloud-explainer small { color: var(--muted); font-size: .58rem; line-height: 1.45; }
.settings-layout-cloud .key-details { grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 1100px) {
  .auth-shell { grid-template-columns: minmax(0,1fr) minmax(380px,.88fr); }
  .auth-sync-points { grid-template-columns: 1fr; max-width: 460px; }
  .auth-sync-points .feature-item { min-height: 0; }
  .cloud-account-facts { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .auth-shell { display: block; overflow: auto; }
  .auth-backdrop { position: fixed; background-position: 56% center; }
  .auth-brand-panel { min-height: 48vh; padding: 28px 22px 46px; }
  .auth-brand-copy { margin: 75px 0 0; }
  .auth-brand-copy h1 { font-size: clamp(3rem, 13vw, 5rem); }
  .auth-sync-points { display: none; }
  .auth-card-wrap { min-height: 52vh; padding: 0 16px 34px; background: linear-gradient(180deg, rgba(11,15,16,0), rgba(11,15,16,.92) 70px); }
  .auth-card { margin-top: -22px; }
  .settings-layout-cloud { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .auth-brand-panel { min-height: 43vh; }
  .auth-brand-copy { margin-top: 55px; }
  .auth-brand-copy p { font-size: .75rem; }
  .auth-card-heading { padding: 23px 21px 7px; }
  .auth-error { margin-right: 21px; margin-left: 21px; }
  .auth-form { padding: 18px 21px 21px; }
  .cloud-account-card { grid-template-columns: auto minmax(0,1fr); }
  .cloud-sync-badge { grid-column: 1 / -1; justify-self: start; }
  .settings-layout-cloud .key-details { grid-template-columns: 1fr; }
}


/* V0.3.4 official API artwork and cloud portraits */
html:not(.official-art-ready) .hero-art,
html:not(.official-art-ready) .onboarding-art,
html:not(.official-art-ready) .auth-backdrop,
html:not(.official-art-ready) .page-intro::before,
html:not(.official-art-ready) .coming-page-art,
html:not(.official-art-ready) .sidebar-spacer-art {
  background-image: linear-gradient(135deg, #10191c, #243337 56%, #6a2922);
}

.portrait-character-card.custom-portrait .character-art-layer { filter: saturate(.94) contrast(1.02) brightness(.82); background-position:center 24%; }
.portrait-character-card.official-portrait .character-art-layer { opacity:.9; }
.portrait-card-actions { position:absolute; z-index:5; top:7px; right:7px; display:flex; gap:5px; opacity:0; transform:translateY(-4px); transition:150ms ease; }
.portrait-character-card:hover .portrait-card-actions, .portrait-card-actions:focus-within { opacity:1; transform:none; }
.portrait-card-actions button { width:30px; height:30px; display:grid; place-items:center; padding:0; color:#f7f1e6; cursor:pointer; border:1px solid rgba(255,255,255,.24); border-radius:3px; background:rgba(9,12,12,.78); backdrop-filter:blur(5px); }
.portrait-card-actions button:hover { background:rgba(151,38,29,.9); }
.portrait-card-actions button:disabled { cursor:wait; opacity:.62; }
.portrait-card-actions .icon { width:14px; height:14px; }
.portrait-source-label { position:absolute; z-index:4; top:8px; left:43px; padding:3px 6px; color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.48); font-size:.46rem; letter-spacing:.05em; text-transform:uppercase; }
.full-character-name small { display:block; margin-top:5px; color:var(--muted); font-size:.54rem; }
.character-upload-actions { position:relative; z-index:2; justify-self:end; display:flex; align-items:center; gap:7px; }
.character-upload-actions .button { min-width:145px; justify-content:center; }
.portrait-delete { color:var(--crimson); border:1px solid rgba(159,37,28,.24); background:rgba(159,37,28,.05); }
.full-character-card.custom-portrait .full-character-art { opacity:.34; background-position:center 24%; }

@media (hover: none) {
  .portrait-card-actions { opacity:1; transform:none; }
}