/* Shared finish for the existing screens; media and access rules stay untouched. */
body {
  --ui-bg: #F5F7FA;
  --ui-surface: #FFFFFF;
  --ui-soft: #EEF3F7;
  --ui-text: #172533;
  --ui-muted: #607182;
  --ui-line: #DCE4ED;
  --ui-accent: #0869DC;
  --ui-green: #137C61;
  --ui-rose: #B83355;
  --ui-highlight: #FFFFFFCC;
  --ui-grid: #0869DC0C;
}
body[data-theme="dark"] {
  --ui-bg: #0D1722;
  --ui-surface: #101C29;
  --ui-soft: #152331;
  --ui-text: #ECF2F7;
  --ui-muted: #99AEBF;
  --ui-line: #293B4A;
  --ui-accent: #71CFFF;
  --ui-green: #68D9B0;
  --ui-rose: #F28BA5;
  --ui-highlight: #D4EEFF0F;
  --ui-grid: #71CFFF14;
}
body[data-theme] .workspace { background: var(--ui-bg); }
body[data-theme] .topbar {
  background: var(--ui-bg);
  border-bottom: 1px solid var(--ui-line);
  box-shadow: none;
}
.app-shell .topbar h2 { color: var(--ui-text); font-size: 22px; font-weight: 650; }
.app-shell .user-name { color: var(--ui-text); font-weight: 550; }
.app-shell .sidebar { background: #101F30; border-color: #293B4A; }
.app-shell .nav-item { border-radius: 7px; font-size: 14px; font-weight: 550; }
.app-shell .nav-item.active { background: #172F43; border-color: #37607A; box-shadow: inset 2px 0 #71CFFF; }
.app-shell .sidebar-panel { background: none; border: 0; border-top: 1px solid #293B4A; border-radius: 0; }
.app-shell .sidebar-panel strong { font-size: 16px; font-weight: 550; }
body[data-theme] .profile-button {
  width: 38px; height: 38px; border-radius: 8px;
  background: linear-gradient(145deg,#269AFF,#0869DC);
  box-shadow: inset 0 1px var(--ui-highlight); border: 1px solid #71CFFF66;
}
.profile-button span { font-weight: 650; }
body[data-theme] .profile-dropdown,
body[data-theme] .account-email-dialog,
body[data-theme] .creative-viewer-panel {
  background: var(--ui-surface); color: var(--ui-text);
  border: 1px solid var(--ui-line); border-radius: 8px;
  box-shadow: 0 16px 48px #00000024, inset 0 1px var(--ui-highlight);
}
body[data-theme] .profile-logout { color: var(--ui-text); font-size: 13px; font-weight: 500; border-radius: 5px; }
body[data-theme] .profile-logout:hover { background: var(--ui-soft); color: var(--ui-accent); }
body[data-theme] .account-email-dialog p,
body[data-theme] .account-email-dialog small { color: var(--ui-muted); }
body[data-theme] .account-email-dialog input { background: var(--ui-soft); color: var(--ui-text); border-color: var(--ui-line); border-radius: 6px; }

.app-shell :is(.dashboard-section,.dashboard-platform-card,.library-toolbar) {
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.app-shell .dashboard-section { padding: 0; }
.app-shell .section-heading h4 { font-size: 18px; color: var(--ui-text); }
.app-shell .card-kicker { color: var(--ui-muted); font-size: 10px; font-weight: 600; }
.app-shell .signal-row {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 7px;
  box-shadow: inset 0 1px var(--ui-highlight); transition: border-color .18s;
}
.app-shell .signal-row:hover { transform: none; border-color: var(--ui-accent); }
.app-shell .signal-row strong { color: var(--ui-text); font-weight: 600; }
.app-shell :is(.signal-row small,.platform-row span) { color: var(--ui-muted); }
.app-shell .library-toolbar { padding: 0 0 22px; margin-top: 22px; border-bottom: 1px solid var(--ui-line); align-items: end; }
.app-shell .library-toolbar label { font-size: 11px; font-weight: 550; color: var(--ui-muted); }
.app-shell :is(.library-toolbar,.hotmart-price-grid,.admin-page) :is(input:not([type="color"]):not([type="range"]),select,textarea) {
  background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-line);
  border-radius: 6px; font-weight: 450; font-size: 13px; box-shadow: inset 0 1px var(--ui-highlight);
}
.app-shell :is(.library-toolbar,.hotmart-price-grid,.admin-page) :is(input,select,textarea):focus { border-color: var(--ui-accent); }
.app-shell :is(.library-usage,.library-usage.is-near,.library-usage.is-limit) {
  background: transparent; border: 0; border-bottom: 1px solid var(--ui-line);
  padding: 0 0 20px; border-radius: 0; box-shadow: none; color: var(--ui-text);
}
.app-shell .library-usage span { color: var(--ui-muted); font-size: 11px; font-weight: 500; }
.app-shell .library-usage strong { font-size: 19px; font-weight: 600; }
.app-shell .library-usage.is-limit strong { color: var(--ui-rose); }
.app-shell .saved-ad {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 8px;
  box-shadow: inset 0 1px var(--ui-highlight); overflow: hidden;
}
.app-shell .saved-ad:hover { transform: none; border-color: var(--ui-accent); }
.app-shell .saved-ad :is(.dossier-block,.creative-block,.sales-page-block) {
  background: transparent; border: 0; border-top: 1px solid var(--ui-line);
  border-radius: 0; box-shadow: none;
}
.app-shell .saved-ad :is(h4,strong) { color: var(--ui-text); }
.app-shell .saved-ad p { color: var(--ui-muted); font-weight: 450; }
.app-shell :is(.primary-button,.secondary-button,.ghost-button) { font-size: 12px; border-radius: 6px; letter-spacing: 0; }
.app-shell .secondary-button { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-line); }
.app-shell .primary-button:not(:disabled) { background: linear-gradient(135deg,#269AFF,#0878FF 65%); box-shadow: inset 0 1px #FFFFFF3D; }

.app-shell .hotmart-price-grid { gap: 24px; }
.app-shell .settings-card { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-line); border-radius: 8px; box-shadow: inset 0 1px var(--ui-highlight); }
.app-shell .hotmart-tool-card { background: transparent; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.surface-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 20px; }
.surface-heading > span { background: var(--ui-soft); color: var(--ui-accent); border: 1px solid var(--ui-line); border-radius: 4px; font: 10px monospace; padding: 5px; }
.surface-heading h4 { margin: 0; color: var(--ui-text); font-size: 14px; font-weight: 600; }
.app-shell .hotmart-design-card { padding: 22px 0 0; background: none; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; }
.app-shell .hotmart-section-title h4 { font-size: 15px; color: var(--ui-text); }
.app-shell :is(.hotmart-field,.hotmart-range) > span { font-size: 12px; font-weight: 550; color: var(--ui-muted); }
.app-shell .hotmart-field input[type="color"] { height: 40px; padding: 4px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 6px; }
.app-shell .hotmart-segmented { background: var(--ui-soft); border-color: var(--ui-line); border-radius: 6px; }
.app-shell .hotmart-segmented button { color: var(--ui-muted); background: none; border-radius: 4px; box-shadow: none; font-size: 12px; }
.app-shell .hotmart-segmented button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-line); }
.app-shell .hotmart-preview-stage { background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: 6px; }
.app-shell .hotmart-preview-stage:has(.hotmart-placeholder:not([hidden])) {
  background-image: linear-gradient(var(--ui-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ui-grid) 1px,transparent 1px);
  background-size: 48px 48px;
}
.app-shell .hotmart-placeholder strong { font-size: 20px; color: var(--ui-text); }
.app-shell .hotmart-placeholder span { color: var(--ui-muted); font-size: 12px; }
.app-shell .hotmart-code-card { position: relative; border-top-color: var(--ui-green); }
.app-shell .hotmart-code-area { background: var(--ui-bg); font-size: 12px; line-height: 1.7; }
.app-shell :is(.hotmart-message,.hotmart-quote-strip) { color: var(--ui-muted); font-size: 11px; }
.app-shell .hotmart-message.is-error { color: var(--ui-rose); }

.app-shell .plans-intro { text-align: left; justify-items: start; max-width: 720px; margin: 0 0 28px; }
.app-shell .plans-intro h3 { color: var(--ui-text); font-size: 26px; font-weight: 650; }
.app-shell .plans-intro p { color: var(--ui-muted); font-size: 14px; font-weight: 450; line-height: 1.65; }
.app-shell .plan-account-note { padding: 0; background: none; border: 0; border-radius: 0; overflow-wrap: anywhere; font-size: 12px; }
.app-shell .landing-plan-card {
  --plan-tone: var(--ui-accent); background: linear-gradient(135deg,color-mix(in srgb,var(--plan-tone) 5%,transparent),transparent 65%),var(--ui-surface);
  border-color: var(--ui-line); border-radius: 8px; box-shadow: inset 0 1px var(--ui-highlight);
}
.app-shell .landing-plan-card:nth-child(2) { --plan-tone: #B4A1F8; }
.app-shell .landing-plan-card:nth-child(3) { --plan-tone: var(--ui-green); }
.app-shell .landing-plan-card.featured { border-color: color-mix(in srgb,var(--plan-tone) 50%,var(--ui-line)); box-shadow: inset 0 2px var(--plan-tone); }
.app-shell .landing-plan-card.current { border-color: var(--plan-tone); }
.app-shell .landing-plan-card > span { color: var(--ui-text); }
.app-shell .landing-plan-card > em { color: var(--ui-muted); }
.app-shell .landing-plan-card.current > em { color: var(--plan-tone); }
.app-shell .landing-plan-card h3 { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.app-shell .landing-plan-card :is(p,li,.plan-anchor,.plan-objection) { color: var(--ui-muted); }
.app-shell .landing-plan-card .plan-anchor { border-color: var(--ui-line); }
.app-shell .landing-plan-card .plan-choice-button { width: 100%; border-radius: 6px; }

body[data-theme] .app-shell .admin-summary-card {
  --metric-tone: var(--ui-accent); background: linear-gradient(130deg,color-mix(in srgb,var(--metric-tone) 6%,transparent),transparent),var(--ui-surface);
  border: 1px solid var(--ui-line); border-top: 2px solid var(--metric-tone); border-radius: 7px; box-shadow: inset 0 1px var(--ui-highlight);
}
body[data-theme] .app-shell .admin-summary-card:is(.profit,.revenue,.retention) { --metric-tone: var(--ui-green); }
body[data-theme] .app-shell .admin-summary-card:is(.cost,.loss,.churn) { --metric-tone: var(--ui-rose); }
body[data-theme] .app-shell .admin-summary-card strong { color: var(--ui-text); font-size: 25px; font-weight: 600; }
body[data-theme] .app-shell .admin-summary-card :is(span,small) { color: var(--ui-muted); font-weight: 450; }
.app-shell .admin-section-title h4 { font-size: 19px; color: var(--ui-text); }
.app-shell .admin-card p { color: var(--ui-muted); font-size: 13px; font-weight: 450; }
.app-shell :is(.admin-ledger,.admin-metric-board) { background: none; border: 0; box-shadow: none; }
body[data-theme] .app-shell :is(.dashboard-section,.dashboard-platform-card,.library-toolbar,.hotmart-tool-card,.hotmart-design-card) {
  background: transparent; border-radius: 0; box-shadow: none;
}
body[data-theme] .app-shell .landing-plan-card .plan-anchor { background: transparent; }
body[data-theme] .app-shell .hotmart-segmented button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-line); }
.app-shell .plans-usage-note { color: var(--ui-muted); font-size: 12px; line-height: 1.7; margin: 20px 0 0; }
.library-empty { display: grid; justify-items: center; align-content: center; min-height: 300px; padding: 24px 0; }
.library-empty img { object-fit: contain; }
.library-empty h4 { color: var(--ui-text); font-size: 18px; font-weight: 600; margin: 12px 0 18px; text-align: center; }
.library-manual-entry { border-top: 1px solid var(--ui-line); margin-top: 24px; padding-top: 20px; }
.library-manual-entry summary { width: fit-content; cursor: pointer; font-size: 13px; color: var(--ui-muted); }
body[data-theme] .app-shell .library-manual-entry form { background: transparent; border: 0; border-radius: 0; padding: 20px 0; box-shadow: none; }
.app-shell .library-manual-entry label { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
body[data-theme] .app-shell .library-manual-entry :is(input,select) { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-line); border-radius: 6px; font-size: 13px; font-weight: 450; }
#authScreen .auth-panel { border-color: var(--ui-line); box-shadow: inset 0 1px var(--ui-highlight); }
#authScreen .auth-form h2 { font-weight: 650; }
#authScreen .auth-form > p { font-weight: 450; }
#authScreen .auth-form input { border-radius: 6px; box-shadow: none; }
@media (max-width: 760px) {
  .app-shell .topbar h2 { font-size: 20px; }
  .app-shell .plans-intro h3 { font-size: 23px; }
  .app-shell .hotmart-price-grid { gap: 20px; }
  .app-shell .library-toolbar { row-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell :is(.signal-row,.saved-ad,.profile-button) { transition: none; transform: none; }
}