:root {
  --bg: #0c1018;
  --surface: #121724;
  --card: #161d2c;
  --border: #293246;
  --edge: #394661;
  --text: #f4f6fc;
  --muted: #aebad1;
  --accent: #ff776e;
  --accent-light: #ff9f93;
  --mint: #8de8c2;
  --mint-dark: #203930;
  --blue: #a3b7fb;
  --app-width: 1500px;
  accent-color: var(--accent);
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline-color: var(--accent-light); }
:where(input, textarea, select):is(:focus, :focus-visible) { border-color: var(--accent-light); caret-color: var(--accent-light); }
::selection { background: var(--accent-light); color: #291315; }
.app-shell {
  background: radial-gradient(ellipse at 72% -12%, #22283c, transparent 48%), var(--bg);
}
.topbar {
  min-height: 68px;
  border-block-end: 1px solid #272f42;
}
.topbar::after { content: none; }
.brand { gap: 11px; }
.brand-mark {
  border: 1px solid #82454e;
  border-radius: 13px;
  background: linear-gradient(150deg, #642d38, #351e2c);
  color: #ffc4b8;
  box-shadow: 0 3px 10px #09081250, inset 0 1px #ffccbf20;
}
.brand-mark svg { width: 23px; height: 23px; }
.brand-text strong { font-weight: 790; }
.brand-text strong .brand-tv { color: var(--accent-light); font-size: inherit; letter-spacing: inherit; }
.brand-text small { color: #abb4ca; font-weight: 660; }
.top-actions .icon-btn {
  --control-top: #242d40;
  --control-bottom: #171e2e;
  --control-edge: #3a465e;
  --control-hover: #916269;
  color: #e0e6f5;
}

.rail { border-radius: 0; background: #111624; border-block-start: 1px solid #293246; }
.rail-label { display: none; }
.nav-button { color: #b4bdd1; border-radius: 12px; font-weight: 600; }
.nav-button:is(.is-active,[aria-current="page"]) {
  background: #38242f;
  color: #ffc1b8;
  box-shadow: inset 0 0 0 1px #65404a;
}
.nav-button span { overflow-wrap: anywhere; }
.workspace-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--mint);
}
.workspace-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.workspace-status.is-demo { color: #ffd199; }
.rail-foot p { margin-block-start: 3px; font-size: .64rem; letter-spacing: .09em; }
.eyebrow { color: var(--accent-light); }
.content > .page-heading { margin-block: 2px; }
.content > .page-heading h1 { font-size: clamp(1.65rem, 4vw, 2.5rem); line-height: 1.15; }
.content > .page-heading .subtle { font-size: .88rem; }
.card, .quick-card, .option-row { background: var(--card); border-color: var(--border); border-radius: 16px; }
.quick-card svg, .option-row > svg:first-child { color: var(--accent-light); }
.quick-card > svg:first-child { border-color: #694047; background: #3a242e; }
.device-icon { background: #302839; border-color: #4c3b52; color: #f6b9b6; }
.btn, .icon-btn {
  --control-top: #263047;
  --control-bottom: #192134;
  --control-edge: #3e4a64;
  --control-hover: #687796;
  border-radius: 12px;
}
.btn.secondary > svg { color: #b7c6ee; }
.btn.primary {
  --control-top: #ff9d8c;
  --control-bottom: #ff7469;
  --control-edge: #ff9d90;
  --control-hover: #ffd2c8;
  --control-depth: #ff675a33;
  color: #261318;
  font-weight: 760;
}
.btn.primary:is(:disabled,[aria-disabled="true"]) { background: #4a3540; border-color: #654851; color: #e7c7c8; }
.page-actions { background: linear-gradient(180deg, transparent, var(--bg) 35%); }
.steps { padding: 0; margin: 2px 0; list-style: none; }
.step { min-height: 42px; border: 1px solid var(--border); }
.step:is(.current,[aria-current="step"]) { color: #ffe3df; background: #432b35; border-color: #8a565d; }
.step.done { color: var(--mint); }
.account-profile { padding: clamp(16px, 2vw, 22px); }
.account-profile > .device-icon { width: 49px; height: 49px; }
.account-profile-text .subtle { margin-block-start: 3px; }
.dialog { border-radius: 20px; border-color: #3b455e; background: #111725; }
.dialog::backdrop { background: #070913bd; }
.dialog-head { padding-block-end: 8px; border-block-end: 1px solid #2a354a; }
.dialog-head .icon-btn { min-height: 44px; }
.dialog-body { padding-inline: 2px; }
.scanner-frame::after { border-color: var(--accent-light); }
.notice.error { background: #382529; border-color: #694248; color: #ffd0c5; }

.credit-card {
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(16px, 2.7vw, 30px);
  border: 1px solid #554254;
  border-radius: 21px;
  background: radial-gradient(ellipse at 94% 30%, #3d334d 0%, transparent 65%), linear-gradient(112deg,#272235,#191d31);
  box-shadow: inset 0 1px #ffffff0c, 0 11px 24px #06091038;
}
.credit-card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 23px;
  width: 55px;
  height: 2px;
  border-radius: 0 0 6px 6px;
  background: #ff9e8f;
}
.credit-card__content { position: relative; display: grid; justify-items: start; gap: 7px; min-width: 0; }
.credit-card h2 { display: flex; align-items: center; gap: 9px; color: #ffe0dc; font-size: .92rem; font-weight: 670; letter-spacing: normal; }
.credit-card h2 svg { width: 19px; height: 19px; color: #ffa598; }
.credit-card__value { max-width: 100%; color: #fff8f7; font-size: clamp(2.7rem, 7vw, 4.3rem); line-height: .99; letter-spacing: -.065em; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.credit-card p { color: #d5cada; font-size: .83rem; }
.credit-card .btn { margin-block-start: 6px; min-height: 44px; }
.credit-art { position: absolute; z-index: -1; inset-block: 0; inset-inline-end: 0; width: min(58%, 510px); height: 100%; }
.credit-card--compact .credit-card__value { font-size: clamp(2.25rem, 5.6vw, 3.35rem); }
.credit-card--compact .credit-art { inset-inline-end: 12px; opacity: .76; }

.dashboard-section { display: grid; min-width: 0; gap: 9px; }
.dashboard-section h2 { color: #eef0fa; font-size: clamp(1rem, 2.45vw, 1.24rem); }
.dashboard-metrics, .dashboard-tools { display: grid; min-width: 0; gap: 8px; }
.dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-metric {
  --metric-tint: #3c2632;
  --metric-color: #ffb0a6;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: clamp(9px, 1.5vw, 17px);
  border: 1px solid #303a51;
  border-radius: 14px;
  background: #171e2e;
}
.dashboard-metric[data-tone="blue"] { --metric-tint: #293450; --metric-color: #b4c7ff; }
.dashboard-metric[data-tone="mint"] { --metric-tint: #243b3b; --metric-color: #a5eed1; }
.dashboard-metric__icon, .dashboard-tool__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--metric-tint,#352734);
  color: var(--metric-color,#ffb0a6);
}
.dashboard-metric__icon svg, .dashboard-tool__icon svg { width: 18px; height: 18px; }
.dashboard-metric p { color: #b9c5dc; font-size: clamp(.69rem, 2.5vw, .86rem); line-height: 1.34; overflow-wrap: anywhere; }
.dashboard-metric strong { display: block; margin-block-start: 3px; color: #f9f8fd; font-size: clamp(1.24rem, 4.3vw, 2rem); line-height: 1; font-weight: 725; font-variant-numeric: tabular-nums; text-align: start; overflow-wrap: anywhere; }
.dashboard-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-tool {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 68px;
  padding: 10px;
  border: 1px solid #344159;
  border-radius: 15px;
  background: #182032;
  text-align: start;
  color: #f5f5fb;
  cursor: pointer;
}
.dashboard-tool:nth-child(2) .dashboard-tool__icon { --metric-tint: #293451; --metric-color: #bfccfb; }
.dashboard-tool__copy { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.dashboard-tool strong, .dashboard-tool small { display: block; }
.dashboard-tool strong { font-size: .91rem; line-height: 1.24; }
.dashboard-tool small { margin-block-start: 3px; color: #abb9d2; font-size: .72rem; line-height: 1.32; }
.dashboard-tool__arrow { display: none; color: #c2c9dd; }
.dashboard-tool__arrow svg { width: 16px; height: 16px; }
[dir="rtl"] .dashboard-tool__arrow svg { transform: scaleX(-1); }

@media (hover: hover) and (pointer: fine) {
  .btn.primary:not(:disabled,[aria-disabled="true"]):hover { --control-top: #ffb4a3; --control-bottom: #ff8a7c; }
  :is(button.quick-card,a.quick-card,button.option-row,a.option-row):not(:disabled,[aria-disabled="true"]):hover { border-color: #766174; background: #20283b; }
  .dashboard-tool:not(:disabled):hover { border-color: #8b6676; background: #222c43; }
}
@media (max-width: 559px) {
  .credit-art { width: 66%; inset-inline-end: -34px; opacity: .45; }
  .credit-card--compact .credit-art { inset-inline-end: -27px; opacity: .43; }
  .dashboard-tool { align-items: flex-start; }
  .dashboard-tool__icon { width: 29px; height: 29px; }
  .dashboard-tool__icon svg { width: 16px; height: 16px; }
}
@media (max-width: 355px) {
  .dashboard-tools { grid-template-columns: 1fr; }
  .dashboard-tool { min-height: 58px; align-items: center; }
}
@media (min-width: 560px) {
  .dashboard-metrics, .dashboard-tools { gap: 12px; }
  .dashboard-metric { flex-direction: row; align-items: center; gap: 13px; min-height: 90px; }
  .dashboard-metric__icon, .dashboard-tool__icon { width: 40px; height: 40px; }
  .dashboard-tool { padding: 14px 16px; }
  .dashboard-tool__arrow { display: block; }
}
@media (min-width: 800px) {
  .topbar { min-height: 74px; }
  .workspace { gap: clamp(18px, 2.65vw, 38px); }
  .rail { border: 1px solid #292f42; border-radius: 17px; flex-basis: clamp(158px,17vw,215px); }
  .rail-label { display: block; padding: 8px 9px 5px; color: #98a5be; font-size: .69rem; font-weight: 690; }
  .credit-card { min-height: 201px; }
  .credit-card--compact { min-height: 142px; }
  .dashboard-section { gap: 11px; }
}