/* Account shell only. Editor and Links retain their existing component styles. */
#studio.account-shell { --account-sidebar: 300px; --account-surface: #fffaf3; --account-tint: #f3e9dc; --account-muted: #75614f; --account-line: #e5d8c9; --account-accent: #985728; }
#studio.account-shell .sidebar { width: var(--account-sidebar) !important; padding: 30px 14px 18px !important; border-radius: 0 40px 0 0 !important; background: #3b291f !important; box-shadow: none !important; }
#studio.account-shell .sidebar .brand { flex-shrink: 0; min-height: 45px; padding: 0 13px 0 !important; margin: 0 0 28px !important; }
#studio.account-shell .sidebar .nova-logo { width: 34px; height: 34px; }
#studio.account-shell .sidebar .nova-brand-name { font-size: 23px; }
#studio.account-shell .sidebar-search { width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid #ffffff0d; border-radius: 25px; background: #ffffff07; color: #baa99d; display: flex; align-items: center; gap: 11px; text-align: left; font-size: 13px; font-weight: 550; }
#studio.account-shell .sidebar-search > .account-icon { width: 18px; height: 18px; }
#studio.account-shell .sidebar-search span { flex: 1; }
#studio.account-shell .sidebar-search kbd { padding: 3px 5px; border: 1px solid #ffffff12; border-radius: 5px; color: #a89588; font-family: inherit; font-size: 10px; }
#studio.account-shell .account-nav-divider { margin: 21px 4px 19px; height: 1px; flex-shrink: 0; background: #ffffff0c; }
.account-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; }
#studio.account-shell .account-nav-group { flex-shrink: 0; margin-bottom: 5px; }
#studio.account-shell .account-nav-toggle { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 45px; padding: 10px 15px; border: 0; border-radius: 25px; color: #efe3d8; background: transparent; font-size: 15px; font-weight: 650; text-align: left; }
#studio.account-shell .account-nav-toggle > span { flex: 1; }
#studio.account-shell .account-nav-toggle > .account-icon:last-child { width: 18px; height: 18px; flex-basis: 18px; transition: transform .16s ease; }
#studio.account-shell .account-nav-toggle[aria-expanded=false] > .account-icon:last-child { transform: rotate(-90deg); }
#studio.account-shell .account-nav-toggle.active { background: #8b583730; color: #ffe6cd; }
#studio.account-shell .account-subnav { display: grid; gap: 3px; margin: 8px 9px 8px 50px; }
#studio.account-shell .account-subnav > button { display: block; min-height: 33px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: #bba99b; font-size: 13px; font-weight: 500; text-align: left; }
#studio.account-shell .account-subnav > button.active { color: #ffe1c3; background: #ffffff06; font-weight: 650; }
#studio.account-shell .account-subnav > button:hover { color: #fff3e7; background: #ffffff08; }
#studio.account-shell .sidebar nav.account-main-nav { display: grid; flex-shrink: 0; gap: 4px !important; }
#studio.account-shell .sidebar nav.account-main-nav button { gap: 13px !important; min-height: 45px !important; padding: 10px 15px !important; border-radius: 25px !important; color: #e9dbcf !important; font-size: 15px; font-weight: 600 !important; }
#studio.account-shell .sidebar nav.account-main-nav button.active { background: #8b583730 !important; color: #ffe6cd !important; box-shadow: none !important; }
#studio.account-shell .sidebar nav.account-main-nav button.active::after { content: none; }
#studio.account-shell .sidebar .upgrade { display: none !important; }
#studio.account-shell .sidebar-tools { flex-shrink: 0; margin-top: auto; padding: 28px 7px 0; gap: 17px; }
#studio.account-shell .sidebar-tools .account-help { display: grid; padding: 20px; border: 0; border-radius: 28px; background: #ffffff05; }
#studio.account-shell .account-help b { display: block; margin-bottom: 7px; color: #c7b7ab; font-size: 13px; line-height: 1.45; font-weight: 550; }
#studio.account-shell .account-help a, #studio.account-shell .account-help button { display: flex; align-items: center; gap: 9px; justify-content: flex-start; min-height: 39px; width: 100%; padding: 8px 12px; border-radius: 15px; border: 1px solid #c18a5555; background: #b27b4520; color: #f2d9bf; font-size: 13px; font-weight: 650; }
#studio.account-shell .account-help a .account-icon, #studio.account-shell .account-help button .account-icon { width: 18px; height: 18px; flex-basis: 18px; }
#studio.account-shell .account-help-label { margin: 15px 0 7px; color: #c7b7ab; font-size: 13px; font-weight: 550; }
#studio.account-shell #sidebarShare { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 41px; padding: 8px 9px; border: 1px solid #c18a5555; border-radius: 24px; background: #b27b4520; color: #f3d9c0; font-size: 12px; font-weight: 650; }
#studio.account-shell .sidebar .user { flex-shrink: 0; width: calc(100% - 14px); margin: 16px 7px 0 !important; min-height: 73px !important; padding: 12px !important; border: 0 !important; border-radius: 40px !important; background: #ffffff05 !important; gap: 12px; text-align: left; }
#studio.account-shell .sidebar .user > span { display: grid; place-items: center; width: 45px; height: 45px; flex-basis: 45px; border-radius: 50%; background: #ffffff10 !important; color: #ae9a8b !important; overflow: hidden; }
#studio.account-shell .sidebar .user > span .account-icon { width: 27px; height: 27px; }
#studio.account-shell .sidebar .user > span img { width: 100%; height: 100%; object-fit: cover; }
#studio.account-shell .sidebar .user b { color: #f5e9de; font-size: 15px; font-weight: 650; }
#studio.account-shell .sidebar .user small { color: #ad9a8c !important; font-size: 11px; }
#studio.account-shell .sidebar .user i { font-size: 17px; letter-spacing: 1px; color: #9c8778; }
#studio.account-shell .workspace { margin-left: var(--account-sidebar) !important; }

/* The overview keeps the genuine analytics below the compact account cards. */
#studio.account-shell #page-overview { max-width: none !important; width: 100%; padding: 44px !important; }
#studio.account-shell .account-page-heading { margin-bottom: 25px; }
#studio.account-shell .account-page-heading h1 { margin: 0 0 7px; color: #392d24; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; font-weight: 700; }
#studio.account-shell .account-page-heading p { margin: 0; color: var(--account-muted); font-size: 13px; line-height: 1.45; }
#studio.account-shell .account-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
#studio.account-shell .account-summary-card { min-width: 0; min-height: 144px; display: flex; flex-direction: column; padding: 21px 23px 18px; border: 1px solid #e7d6c2; border-radius: 18px; background: #f3e9dc; }
#studio.account-shell .account-summary-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#studio.account-shell .account-summary-card > div span { color: #75614f; font-size: 13px; font-weight: 550; }
#studio.account-shell .account-summary-card > div .account-icon { color: #b18a66; width: 21px; height: 21px; }
#studio.account-shell .account-summary-card > b { display: block; min-width: 0; margin: 18px 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #a56636; font-size: 27px; font-weight: 650; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
#studio.account-shell .account-summary-card > small { color: #75614f; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
#studio.account-shell .account-section-heading { margin: 31px 0 16px; color: #44342a; font-size: 18px; font-weight: 650; letter-spacing: -.025em; }
#studio.account-shell .account-overview-grid { display: grid; grid-template-columns: minmax(0,2.15fr) minmax(275px,1fr); gap: 20px; align-items: start; }
#studio.account-shell .account-surface { min-width: 0; border: 1px solid #e8dfd3; border-radius: 18px; background: #fffaf4; }
#studio.account-shell .account-completion { padding: 24px; }
#studio.account-shell .account-card-heading { display: flex; gap: 15px; justify-content: space-between; align-items: center; }
#studio.account-shell .account-card-heading h3, #studio.account-shell .account-manage h3 { margin: 0; color: #44362c; font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
#studio.account-shell .account-card-heading > b { font-size: 14px; color: #985728; font-weight: 650; }
#studio.account-shell #accountCompletionCaption { margin: 8px 0 22px; color: #75614f; font-size: 13px; line-height: 1.5; }
#studio.account-shell .account-progress { height: 7px; border-radius: 8px; background: #eee4d8; overflow: hidden; }
#studio.account-shell .account-progress > span { display: block; height: 100%; border-radius: inherit; background: #c58b55; transition: width .28s ease; }
#studio.account-shell .account-completion-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 13px 14px; border: 1px solid #e8d9c4; border-radius: 11px; background: #f8f0e4; color: #75614f; }
#studio.account-shell .account-completion-note .account-icon { width: 17px; height: 17px; flex-basis: 17px; margin-top: 1px; }
#studio.account-shell .account-completion-note p { margin: 0; font-size: 13px; line-height: 1.6; }
#studio.account-shell .account-completion-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 21px; }
#studio.account-shell .account-completion-actions button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid #e4d9cb; border-radius: 12px; background: #f4ede4; color: #75614f; font-size: 14px; font-weight: 550; }
#studio.account-shell .account-completion-actions button > .account-icon { width: 16px; height: 16px; flex-basis: 16px; }
#studio.account-shell .account-completion-actions button.complete { color: #985728; border-color: #ddc9b3; background: #f3e8d9; }
#studio.account-shell .account-completion-actions button i .account-icon { width: 14px; height: 14px; flex-basis: 14px; }
#studio.account-shell .account-manage-stack { display: grid; gap: 15px; }
#studio.account-shell .account-manage { display: grid; gap: 8px; padding: 19px; }
#studio.account-shell .account-manage h3 { margin-bottom: 6px; }
#studio.account-shell .account-manage > button { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 9px 11px; border: 1px solid #e6dbce; border-radius: 10px; background: #f6efe7; color: #75614f; text-align: left; }
#studio.account-shell .account-manage > button > span { flex: 1; font-size: 14px; line-height: 1.4; font-weight: 550; }
#studio.account-shell .account-manage > button .account-icon { width: 16px; height: 16px; flex-basis: 16px; }
#studio.account-shell .account-manage > button .account-icon:last-child { width: 13px; height: 13px; flex-basis: 13px; opacity: .7; }
#studio.account-shell .account-connected { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
#studio.account-shell .account-connected > .account-icon { width: 24px; height: 24px; flex-basis: 24px; color: #a57d59; }
#studio.account-shell .account-connected > div { min-width: 0; flex: 1; display: grid; gap: 3px; }
#studio.account-shell .account-connected b { font-size: 14px; color: #735940; }
#studio.account-shell .account-connected span { color: #75614f; font-size: 13px; overflow-wrap: anywhere; }
#studio.account-shell .account-connected > small { color: #75614f; background: #eee7d9; border-radius: 5px; padding: 4px 6px; font-size: 11px; }
#studio.account-shell #overviewAnalytics { margin-top: 32px; }
#studio.account-shell #overviewAnalytics .overview-analytics-head > div > span, #studio.account-shell #overviewAnalytics .overview-analytics-head p { display: none; }
#studio.account-shell #overviewAnalytics .overview-analytics-head h2 { margin: 0; color: #44342a; font-size: 18px; font-weight: 650; }
#studio.account-shell #overviewAnalytics .analytics-actions { gap: 8px; }
#studio.account-shell #overviewAnalytics .analytics-actions > :is(select,button) { min-height: 36px; padding: 7px 11px; font-size: 13px; border-radius: 10px !important; }
#studio.account-shell #overviewAnalytics > .metric-grid { gap: 14px; margin-block: 19px; }
#studio.account-shell #overviewAnalytics > .metric-grid article { padding: 16px 18px; border-radius: 16px !important; box-shadow: none !important; }
#studio.account-shell #overviewAnalytics > .metric-grid article b { font-size: 26px; }
#studio.account-shell #overviewAnalytics > .metric-grid article > span { font-size: 13px; }
#studio.account-shell #overviewAnalytics .chart-card, #studio.account-shell #overviewAnalytics .top-links { padding: 20px; border-radius: 18px !important; box-shadow: none !important; }
#studio.account-shell #overviewAnalytics .real-chart { min-height: 160px; }
#studio.account-shell #overviewAnalytics .account-line-chart { display: block; height: auto; overflow: visible; padding-top: 24px; }
#studio.account-shell #overviewAnalytics .account-chart-plot { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: stretch; gap: 8px; min-width: 0; width: 100%; height: 180px; }
#studio.account-shell .account-chart-yaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 6px 0; color: #75614f; font-size: 11px; font-variant-numeric: tabular-nums; }
#studio.account-shell .account-chart-plot > svg { display: block; width: 100%; height: 180px; overflow: visible; }
#studio.account-shell .account-chart-grid { fill: none; stroke: #eadfd2; stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
#studio.account-shell .account-chart-line { fill: none; stroke: #b07748; stroke-width: 2; vector-effect: non-scaling-stroke; }
#studio.account-shell .account-chart-point { fill: #b07748; stroke: #fff9f1; stroke-width: 1; vector-effect: non-scaling-stroke; }
#studio.account-shell #overviewAnalytics .account-chart-dates { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: auto; height: auto; min-height: 20px; gap: 7px; margin: 7px 0 0 42px; color: #75614f; font-size: 11px; }
#studio.account-shell .account-chart-data { margin: 17px 0 0 42px; color: #75614f; font-size: 13px; }
#studio.account-shell .account-chart-data summary { width: fit-content; padding: 5px 0; }
#studio.account-shell .account-chart-data table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12px; }
#studio.account-shell .account-chart-data th, #studio.account-shell .account-chart-data td { padding: 8px 6px; border-bottom: 1px solid #eee2d5; text-align: right; }
#studio.account-shell .account-chart-data :is(th,td):first-child { text-align: left; }

/* Real account settings, in the same restrained form layout as the reference. */
#studio.account-shell #page-settings { width: 100%; max-width: none !important; padding: 70px 28px 80px !important; }
#studio.account-shell .account-settings-content { width: min(640px,100%); margin: 0 auto; }
#studio.account-shell .account-settings-content > h1 { margin: 0 0 54px; text-align: center; color: #49372b; font-size: 30px; font-weight: 700; letter-spacing: -.035em; }
#studio.account-shell .account-settings-section + .account-settings-section { margin-top: 56px; }
#studio.account-shell .account-settings-section > h2 { margin: 0 0 16px; color: #4e3b2c; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
#studio.account-shell .account-settings-card { display: grid; gap: 16px; padding: 18px; border: 1px solid #e8dfd3; border-radius: 18px; background: #fffaf4; }
#studio.account-shell .account-settings-card > label { display: grid; gap: 8px; font-size: 13px; color: #75614f; font-weight: 550; }
#studio.account-shell .account-readonly { display: flex; align-items: center; min-height: 44px; padding: 12px; border: 1px solid #e9dfd3; border-radius: 10px; color: #6d5643; background: #f5eee5; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
#studio.account-shell .account-settings-row { display: flex; align-items: center; gap: 20px; }
#studio.account-shell .account-settings-row > div { flex: 1; min-width: 0; }
#studio.account-shell .account-settings-row b { display: block; color: #70563f; font-size: 13px; font-weight: 600; }
#studio.account-shell .account-settings-row span { display: block; margin-top: 6px; color: #75614f; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#studio.account-shell .account-settings-row > .account-icon { color: #b59a80; }
#studio.account-shell .account-setting-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; flex-shrink: 0; border: 1px solid #ddc8b0; border-radius: 11px; color: #985728; background: #f4e9dc; font-size: 13px; line-height: 1.35; font-weight: 600; }
#studio.account-shell .account-setting-button .account-icon { width: 16px; height: 16px; flex-basis: 16px; }
#studio.account-shell .account-settings-card > .account-setting-button { justify-self: start; }
#studio.account-shell .account-setting-button:hover { background: #edddca; border-color: #cbaa87; }
#studio.account-shell .account-danger-row { border-top: 1px solid #e9dfd4; padding-top: 17px; margin-top: 1px; }
#studio.account-shell .account-setting-button.danger { color: #a25a4a; border-color: #e7c9bd; background: #fbefe7; }
#studio.account-shell .account-settings-error { margin: 0; color: #a14637; font-size: 12px; }

#studio.account-shell:not([data-shell-page=editor]):not([data-shell-page=links]) .workspace > header > div:last-child { display: none; }

@media (min-width: 901px) {
  #studio.account-shell:is([data-shell-page=overview],[data-shell-page=settings]) .workspace > header { height: 0 !important; min-height: 0; padding: 0 !important; overflow: hidden; border: 0 !important; }
}
@media (max-width: 1350px) and (min-width: 901px) {
  #studio.account-shell { --account-sidebar: 280px; }
  #studio.account-shell #page-overview { padding: 32px !important; }
  #studio.account-shell .account-summary-grid { gap: 12px; }
  #studio.account-shell .account-summary-card { padding: 18px; }
  #studio.account-shell .account-summary-card > b { font-size: 23px; }
  #studio.account-shell .account-overview-grid { grid-template-columns: minmax(0,1.8fr) minmax(260px,1fr); gap: 16px; }
  #studio.account-shell .account-completion { padding: 20px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  #studio.account-shell .account-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #studio.account-shell .account-overview-grid { grid-template-columns: 1fr; }
  #studio.account-shell .account-manage-stack { grid-template-columns: 1.5fr 1fr; align-items: start; }
}
@media (max-width: 900px) {
  #studio.account-shell .workspace { margin-left: 0 !important; }
  #studio.account-shell .sidebar { width: min(300px,calc(100vw - 44px)) !important; }
  #studio.account-shell #page-overview { padding: 28px 22px !important; }
  #studio.account-shell .account-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  #studio.account-shell .account-overview-grid { grid-template-columns: 1fr; gap: 16px; }
  #studio.account-shell .account-manage-stack { grid-template-columns: 1.6fr 1fr; align-items: start; }
  #studio.account-shell .account-summary-card { min-height: 132px; padding: 18px; }
  #studio.account-shell .account-summary-card > b { font-size: 24px; }
  #studio.account-shell .account-subnav > button { min-height: 40px; }
  #studio.account-shell .account-completion-actions button, #studio.account-shell .account-manage > button, #studio.account-shell #sidebarShare, #studio.account-shell .account-help a, #studio.account-shell .account-help button { min-height: 44px; }
  #studio.account-shell #page-settings { padding: 36px 22px 60px !important; }
  #studio.account-shell .account-settings-content > h1 { margin-bottom: 36px; font-size: 27px; }
  #studio.account-shell .account-settings-section + .account-settings-section { margin-top: 38px; }
}
@media (max-width: 560px) {
  #studio.account-shell #page-overview { padding: 25px 16px !important; }
  #studio.account-shell .account-page-heading { margin-bottom: 21px; }
  #studio.account-shell .account-summary-grid { gap: 10px; }
  #studio.account-shell .account-summary-card { min-height: 130px; padding: 16px 14px; border-radius: 15px; }
  #studio.account-shell .account-summary-card > div span { font-size: 13px; }
  #studio.account-shell .account-summary-card > div .account-icon { width: 17px; height: 17px; flex-basis: 17px; }
  #studio.account-shell .account-summary-card > b { margin: 17px 0 8px; font-size: 22px; }
  #studio.account-shell .account-summary-card > b[data-account-stat=username] { font-size: 20px; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  #studio.account-shell .account-summary-card > small { font-size: 13px; }
  #studio.account-shell .account-section-heading { margin-top: 26px; font-size: 17px; }
  #studio.account-shell .account-completion { padding: 18px; }
  #studio.account-shell .account-completion-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #studio.account-shell .account-completion-actions button { justify-content: flex-start; padding-inline: 9px; gap: 6px; font-size: 14px; }
  #studio.account-shell .account-completion-actions button i { margin-left: auto; }
  #studio.account-shell .account-manage-stack { grid-template-columns: 1fr; }
  #studio.account-shell .account-manage { padding: 18px; }
  #studio.account-shell .account-manage > button > span { font-size: 14px; }
  #studio.account-shell #overviewAnalytics .overview-analytics-head { gap: 15px; }
  #studio.account-shell #overviewAnalytics .analytics-actions > :is(select,button) { min-height: 44px; }
  #studio.account-shell #overviewAnalytics > .metric-grid article { padding: 15px; }
  #studio.account-shell .account-chart-dates .account-date-extra { display: none; }
  #studio.account-shell #page-settings { padding: 29px 16px 50px !important; }
  #studio.account-shell .account-settings-content > h1 { font-size: 25px; }
  #studio.account-shell .account-settings-section + .account-settings-section { margin-top: 34px; }
  #studio.account-shell .account-settings-section > h2 { font-size: 17px; }
  #studio.account-shell .account-settings-card { padding: 16px; }
  #studio.account-shell .account-settings-row { gap: 13px; flex-wrap: wrap; }
  #studio.account-shell .account-settings-row > div { min-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  #studio.account-shell .account-progress > span, #studio.account-shell .account-nav-toggle > .account-icon:last-child { transition: none; }
}