/* The public studio palette and materials continue into the working views. */
.studio-site.king-page {
  --king-primary: var(--studio-button); --king-ease: var(--studio-ease);
  --king-sidebar-width: 268px; --king-header-height: 100px;
  --king-panel-padding: 28px;
  font-family: Arial, Helvetica, sans-serif; background: var(--paper);
}
.studio-site.king-workbench { padding-top: var(--king-header-height); background: var(--paper); }
.studio-site.king-workbench .king-header {
  inset: 18px 26px auto calc(var(--king-sidebar-width) + 12px); height: 62px;
  min-height: 62px; border: 0; border-radius: 18px; background: var(--studio-glass);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.studio-site .king-header-inner { padding: 10px 20px; }
.studio-site .king-header-label { font-weight: 400; }
.studio-site .king-admin-avatar { border: 0; background: var(--paper); border-radius: 11px; }
.studio-site.king-workbench .king-sidebar {
  inset: 18px auto 18px 18px; width: calc(var(--king-sidebar-width) - 36px);
  border: 0; border-radius: 22px; padding: 28px 16px 22px; background: var(--studio-glass);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.studio-site .king-sidebar > .king-brand { margin: 0 9px 30px; font-size: 1.4rem; }
.studio-site .king-product { padding: 15px 12px; border: 0; border-radius: 15px; background: var(--paper); margin-bottom: 22px; }
.studio-site .king-product strong { font-size: .9375rem; font-weight: 600; }
.studio-site .king-product small { font-size: .6875rem; margin-top: 3px; }
.studio-site .king-nav-label { font-weight: 400; text-transform: none; letter-spacing: 0; margin-bottom: 10px; }
.studio-site.king-workbench .king-nav-button { border-radius: 12px; font-weight: 400; padding: 12px; transition: background-color 250ms ease,color 250ms ease,translate 300ms var(--studio-ease); }
.studio-site.king-workbench .king-nav-button[aria-pressed="true"] { background: var(--studio-button); color: var(--studio-button-text); font-weight: 400; }
.studio-site.king-workbench .king-nav-button[aria-pressed="true"]::before { display: none; }
.studio-site.king-workbench .king-main { padding: 28px var(--king-gutter) 48px; }
.studio-site.king-workbench .king-title { margin-bottom: 34px; align-items: flex-start; }
.studio-site.king-workbench .king-title h1 { margin-block: 12px; font-weight: 400; font-size: clamp(2.25rem,3.5vw,3.5rem); line-height: 1.04; letter-spacing: -.055em; }
.studio-site :is(.king-eyebrow,.king-section-eyebrow) { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .75rem; }
.studio-site .king-view-description { font-size: .9375rem; }
.studio-site .king-workspace-label { border: 0; padding: 8px 12px; background: var(--studio-panel); border-radius: 10px; margin-top: 24px; }
.studio-site .king-workspace-label > .brand-wordmark { width: auto; height: auto; background: none; border-radius: 0; }
.studio-site.king-page :is(.king-panel,.king-guide,.king-account-dialog,.king-account-confirm) { border-radius: 24px; border-color: var(--line); background: var(--studio-panel); box-shadow: none; }
.studio-site.king-page .king-panel { border: 0; }
.studio-site.king-page .king-panel h2 { font-weight: 400; font-size: 1.1875rem; letter-spacing: -.035em; }
.studio-site.king-page .king-field label { font-weight: 400; }
.studio-site.king-page :is(input[type="email"],input[type="password"],input[type="text"],input[type="search"],input[type="url"],input[type="number"],input[type="datetime-local"],select,textarea) { border-radius: 12px; background: var(--paper); }
.studio-site.king-page :is(.king-button,.king-secondary,.king-menu-toggle,.king-logout,.session-expiry-button) { border-radius: 12px; font-weight: 400; min-height: 42px; transition: background-color 250ms ease,border-color 250ms ease,transform 300ms var(--studio-ease); }
.studio-site.king-page .king-button, .studio-site.king-page .session-expiry-button { color: var(--studio-button-text); background: var(--studio-button); border-color: var(--studio-button); }
.studio-site.king-page .king-button:hover:not(:disabled) { background: color-mix(in srgb,var(--studio-button) 88%,#888); box-shadow: none; }
.studio-site.king-page .king-secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.studio-site.king-page .king-button.danger { background: #b33445; color: #fff; border-color: #b33445; }
.studio-site.king-page .king-button.danger:hover:not(:disabled) { background: #972c3b; }
.studio-site.king-workbench .king-overview-card { background: var(--studio-panel); border: 0; border-radius: 22px; padding: 24px; }
.studio-site.king-workbench .king-overview-card > strong { font-weight: 400; font-size: 2.75rem; }
.studio-site .stats-metric { border: 0; background: var(--studio-panel); border-radius: 22px; padding: 26px; }
.studio-site .stats-metric strong { font-weight: 400; font-size: clamp(2.5rem,4vw,3.5rem); }
.studio-site .stats-metric:first-child { background: var(--studio-green); color: var(--studio-green-ink); }
.studio-site .stats-metric:first-child :is(span,small) { color: var(--studio-green-secondary); }
.studio-site .stats-range,.studio-site .king-account-tabs { border: 0; background: var(--paper); border-radius: 12px; }
.studio-site .stats-range button[aria-pressed="true"] { background: var(--studio-button); color: var(--studio-button-text); box-shadow: none; }
.studio-site .king-account-tabs button { border-radius: 9px; }
.studio-site .king-account-tabs button[aria-selected="true"] { background: var(--studio-button); color: var(--studio-button-text); }
.studio-site .king-offer-card { background: var(--paper); border-radius: 20px; }
.studio-site .king-offer-card .king-offer-amount { font-weight: 400; font-size: 3.25rem; }
.studio-site .king-offer-language-tab { font-weight: 400; }
.studio-site .king-directory-filters { border-color: var(--line); }
.studio-site .king-account-avatar { border: 0; border-radius: 16px; background: var(--paper); color: var(--ink); }
.studio-site .king-next-step { border: 0; background: var(--studio-panel); border-radius: 20px; }
.studio-site.king-workbench .king-footer { width: calc(100% - var(--king-gutter) * 2); padding-block: 22px; font-size: .75rem; }
.studio-site .king-view:not([hidden]) { animation: studio-workspace-in 350ms var(--studio-ease) both; }

/* Admin sign-in uses the same two floating surfaces as the public header. */
.studio-site.king-login-page { background: linear-gradient(150deg,var(--studio-hero),var(--paper) 64%); }
.studio-site.king-login-page .king-header { padding: 22px 36px; border: 0; background: transparent; }
.studio-site.king-login-page .king-header > .king-brand,
.studio-site .king-login-header-tools { min-height: 62px; padding: 10px 18px; border-radius: 18px; background: var(--studio-glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.studio-site .king-login-header-tools { gap: 14px; }
.studio-site.king-login-page .king-login-main { width: min(1120px,calc(100% - 72px)); gap: 70px; padding-block: 62px 88px; }
.studio-site .king-login-intro h2 { font-size: clamp(2.5rem,4.8vw,4.5rem); font-weight: 400; line-height: 1.04; letter-spacing: -.06em; }
.studio-site .king-login-features strong { font-weight: 400; font-size: 1rem; }
.studio-site.king-login-page .king-login-card { background: var(--studio-panel); border: 0; border-radius: 28px; padding: 36px; box-shadow: none; }
.studio-site .king-login-icon { border-radius: 15px; background: var(--paper); color: var(--ink); }
.studio-site .king-login-card h1 { font-size: 2.5rem; font-weight: 400; letter-spacing: -.05em; }

/* Personal account: calm surfaces, a large title, and clear working controls. */
.studio-site.account-page { background: linear-gradient(165deg,var(--studio-hero),var(--paper) 600px); }
.studio-site.account-page .account-main { max-width: 1040px; padding: 140px 28px 64px; }
.studio-site.account-page [data-premium-account].account-panel { padding: 42px; border: 0; border-radius: 28px; background: var(--studio-panel); box-shadow: none; }
.studio-site .account-panel::before,.studio-site .account-mark::before { display: none; }
.studio-site .account-heading { text-align: left; margin-bottom: 31px; }
.studio-site .account-mark { width: 72px; height: 72px; margin: 0 0 20px; border-radius: 23px; border: 1px solid var(--studio-silver-edge); background: linear-gradient(145deg,var(--studio-silver-top),var(--studio-silver-bottom)); box-shadow: inset 0 2px 2px #ffffff70,0 5px 15px #10283a0a; }
.studio-site [data-premium-account] .account-eyebrow { font-size: .9375rem; font-weight: 400; letter-spacing: 0; margin-bottom: 12px; }
.studio-site .account-heading h1 { font-size: clamp(2.75rem,5vw,4.25rem); font-weight: 400; letter-spacing: -.065em; }
.studio-site [data-premium-account] .account-membership { border: 0; border-radius: 10px; background: var(--paper); font-weight: 400; }
.studio-site [data-premium-account] .account-membership[data-premium="true"] { background: var(--studio-green); color: var(--studio-green-ink); }
.studio-site [data-premium-account] .account-login { max-width: 560px; margin: 0; }
.studio-site .account-login p { text-align: left; font-size: .9375rem; }
.studio-site .account-login label { font-weight: 400; }
.studio-site [data-premium-account] .account-login input { border-radius: 12px; background: var(--paper); border-color: var(--line); }
.studio-site .account-details > .account-detail { border: 0; border-radius: 20px; background: var(--paper); padding: 23px; box-shadow: none; }
.studio-site .account-details > .account-detail-membership { background: var(--studio-green); color: var(--studio-green-ink); }
.studio-site .account-detail-membership :is(dt,[data-account-value]) { color: var(--studio-green-secondary); }
.studio-site .account-details .account-detail-membership .account-product { color: var(--studio-green-ink); }
.studio-site .account-details dd { font-weight: 400; }
.studio-site .account-details .account-product { font-size: 1.3125rem; }
.studio-site .account-actions { gap: 12px; margin-top: 24px; }
.studio-site .account-actions :is(.account-secondary-button,.account-text-button) { border-radius: 12px; min-height: 48px; font-weight: 400; }
.studio-site .account-actions .account-secondary-button { background: var(--paper); }
.studio-site .account-reminders { border: 0; border-radius: 20px; background: var(--paper); }
.studio-site .account-reminders h2 { font-weight: 400; font-size: 1.125rem; }
.studio-site .account-support { margin-top: 24px; font-size: .875rem; }
.studio-site .account-feedback { font-size: .9375rem; text-align: left; }

/* The return screen keeps the same live wordmark, palette and typography. */
.studio-site.payment-return-page { background: linear-gradient(155deg,var(--studio-hero),var(--paper) 70%); }
.studio-site .payment-card { border: 0; border-radius: 28px; padding: 40px; background: var(--studio-panel); color: var(--ink); box-shadow: none; }
.studio-site .payment-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 28px; font-size: 1.5rem; color: var(--ink); }
.studio-site .payment-card .payment-brand { color: var(--ink); }
.studio-site .payment-brand-icon { width: 30px; height: 38px; }
.studio-site .payment-symbol { background: var(--paper); color: var(--ink); border-radius: 18px; }
.studio-site .payment-label { color: var(--muted); font-weight: 400; letter-spacing: .04em; }
.studio-site .payment-card h1 { font-size: 2.25rem; font-weight: 400; letter-spacing: -.055em; }
.studio-site .payment-card p { color: var(--secondary); }
.studio-site .payment-next { border: 0; border-radius: 18px; background: var(--paper); }
.studio-site .payment-next strong { font-weight: 400; color: var(--ink); }
.studio-site .payment-next span { color: var(--muted); }
.studio-site .session-expiry-button { border-radius: 12px; background: var(--studio-button); color: var(--studio-button-text); font-weight: 400; }

@keyframes studio-workspace-in { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@media(hover:hover) and (pointer:fine) {
  .studio-site.king-workbench .king-nav-button:hover:not([aria-pressed="true"]) { background: var(--paper); translate: 2px 0; }
  .studio-site .account-details > .account-detail:hover { transform: translateY(-2px); box-shadow: 0 6px 14px #00000005; }
}
@media(max-width:1100px) {
  .studio-site.king-page { --king-gutter: 26px; }
  .studio-site .king-header-inner { gap: 14px; padding-inline: 16px; }
  .studio-site.king-login-page .king-login-main { gap: 38px; }
}
@media(max-width:900px) {
  .studio-site.king-workbench { padding-left: 0; }
  .studio-site.king-workbench .king-header { inset: 14px 18px auto; }
  .studio-site.king-workbench .king-sidebar { inset: 88px 18px auto; width: auto; max-height: calc(100dvh - 106px); overflow-y: auto; padding: 22px; }
  .studio-site.king-workbench .king-main { padding-block: 22px 40px; }
  .studio-site.king-workbench .king-title h1 { font-size: 2.75rem; }
  .studio-site .king-product { display: none; }
  .studio-site .king-admin-identity #admin-email { max-width: 180px; }
  .studio-site.king-login-page .king-header { padding-inline: 24px; }
  .studio-site.king-login-page .king-login-main { width: calc(100% - 48px); }
}
@media(max-width:600px) {
  .studio-site.king-page { --king-gutter: 18px; --king-panel-padding: 22px; }
  .studio-site.king-workbench .king-header { inset-inline: 12px; border-radius: 15px; }
  .studio-site .king-header-inner { padding-inline: 12px; gap: 8px; }
  .studio-site .king-admin-identity small,.studio-site .king-admin-avatar { display: none; }
  .studio-site .king-admin-identity #admin-email { max-width: 108px; font-size: .6875rem; }
  .studio-site.king-workbench .king-logout { margin-left: 0; padding-inline: 8px; font-size: .6875rem; }
  .studio-site .king-menu-toggle { padding-inline: 9px; }
  .studio-site #portal-breadcrumb { max-width: 115px; overflow: hidden; text-overflow: ellipsis; font-size: .75rem; }
  .studio-site.king-workbench .king-sidebar { inset-inline: 12px; max-height: calc(100dvh - 102px); border-radius: 20px; }
  .studio-site.king-workbench .king-title h1 { font-size: 2.5rem; }
  .studio-site .stats-metric { padding: 20px; border-radius: 18px; }
  .studio-site .stats-metric strong { font-size: 2.5rem; }
  .studio-site.king-page :is(.king-panel,.king-guide) { border-radius: 20px; }
  .studio-site.king-login-page .king-header { padding: 14px 16px; gap: 8px; }
  .studio-site.king-login-page .king-header > .king-brand { padding-inline: 12px; font-size: 1.125rem; }
  .studio-site .king-login-header-tools { padding-inline: 10px; gap: 8px; min-height: 54px; }
  .studio-site.king-login-page .king-login-main { width: calc(100% - 36px); grid-template-columns: 1fr; gap: 30px; padding-block: 22px 48px; }
  .studio-site .king-login-intro h2 { font-size: 2.75rem; }
  .studio-site .king-login-features { padding-block: 20px; gap: 18px; }
  .studio-site.king-login-page .king-login-card { padding: 26px; border-radius: 24px; }
  .studio-site.account-page .account-main { padding: 115px 18px 42px; }
  .studio-site.account-page [data-premium-account].account-panel { padding: 28px 23px; border-radius: 24px; }
  .studio-site .account-heading h1 { font-size: 3rem; }
  .studio-site .account-details > .account-detail { padding: 18px; }
  .studio-site .account-actions { gap: 10px; }
  .studio-site .payment-card { padding: 30px 24px; border-radius: 24px; }
}
@media(prefers-reduced-motion:reduce) {
  .studio-site .king-view:not([hidden]) { animation: none; translate: none; }
  .studio-site.king-workbench .king-nav-button,.studio-site .account-details > .account-detail { transition: none; transform: none; translate: none; }
}
@media(forced-colors:active) {
  .studio-site.king-page :is(.king-panel,.stats-metric,.king-overview-card) { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .studio-site .stats-metric:first-child :is(span,small) { color: CanvasText; }
  .studio-site .account-details > .account-detail-membership { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .studio-site .account-detail-membership :is(dt,[data-account-value]),.studio-site .account-details .account-detail-membership .account-product { color: CanvasText; }
}

/* One click switches the same palette on the portal and its sign-in page. */
.studio-site .king-appearance > span {font-size:.75rem;color:var(--muted)}
.studio-site .king-appearance .theme-picker {margin-left:auto;flex:0 0 38px;width:38px;height:38px}
.studio-site.king-page .theme-toggle {width:38px;height:38px;border:0;border-radius:12px;background:var(--paper)}
.studio-site .king-login-header-tools .theme-picker {flex:0 0 38px;width:38px;height:38px}
@media(prefers-reduced-motion:reduce){.theme-picker.is-changing .theme-toggle svg {animation:none}}