/* Shared studio identity. Photo overlays and score semantics keep their own colors. */
:root {
  --studio-radius: 14px;
  --studio-grid: color-mix(in srgb, var(--ui-accent) 6%, transparent);
}
body :is(button, a, input, select, textarea) { accent-color: var(--ui-accent); }
body :is(h1, h2, h3) { text-wrap: balance; }

/* A quiet sidebar, a distinct active marker and a clear workspace boundary. */
body.dashboard-application .ds-sidebar {
  background: var(--ui-surface-subtle);
  border-right-color: var(--ui-border);
}
body.dashboard-application .ds-brand { border-bottom: 1px solid var(--ui-border); margin-bottom: 18px; }
body.dashboard-application .ds-brand > a { letter-spacing: -.8px; font-weight: 600; }
body.dashboard-application .ds-account { border-radius: var(--studio-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
body.dashboard-application .ds-new-analysis { background: var(--ui-action); color: var(--ui-on-action); border-radius: 8px; }
body.dashboard-application .ds-new-analysis:hover { background: var(--ui-action-hover); }
body.dashboard-application .ds-header { background: var(--ui-header); backdrop-filter: blur(18px); }
body.dashboard-application .ds-history-item { position: relative; border-radius: 8px; }
body.dashboard-application .ds-history-item:is(.is-current, [aria-current="page"]) { background: var(--ui-accent-soft); box-shadow: inset 3px 0 var(--ui-accent); }
body.dashboard-application .ds-main-nav > a[aria-current="page"] { color: var(--ui-accent); }
body.dashboard-application .ds-analysis-nav { border-radius: 9px; }
body.dashboard-application .ds-explore a:hover { color: var(--ui-accent); background: var(--ui-accent-soft); border-radius: 8px; }
body.dashboard-application .dash-card { border-radius: var(--studio-radius); border-color: var(--ui-border); box-shadow: var(--ui-shadow); }
body.dashboard-application .dash-card h2 { font-size: 21px; font-weight: 600; letter-spacing: -.6px; }
body.dashboard-application .dash-page-heading h1 { letter-spacing: -1px; font-weight: 600; }
body.dashboard-application .dash-pillar {
  border-radius: var(--studio-radius); border-top: 3px solid var(--pillar-color, var(--ui-accent));
  background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
body.dashboard-application .dash-pillar:hover { transform: translateY(-3px); border-color: var(--ui-accent); }
body.dashboard-application .dash-pillar strong { letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
body.dashboard-application .dash-pillar > svg { opacity: .2; }
body.dashboard-application .dash-progress { border-radius: 10px; border-left: 3px solid var(--ui-accent); }
body.dashboard-application :is(.dash-editor-photo, .dash-overview-photos, .dash-viewbar) { border-radius: 12px; }
body.dashboard-application .dash-editor-photo { background: var(--ui-photo); }
body.dashboard-application .dash-overall-number > strong { color: var(--ui-text); }
body.dashboard-application .dash-studio-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 28px; }
body.dashboard-application .dash-studio-heading h1 { margin: 0; font-size: clamp(23px, 2.2vw, 32px); line-height: 1.2; font-weight: 500; letter-spacing: -1.1px; }
body.dashboard-application .dash-studio-heading > a { color: var(--ui-accent); font-size: 11px; white-space: nowrap; padding-bottom: 3px; border-bottom: 1px solid var(--ui-border-strong); }
body.dashboard-application .dash-pillars { counter-reset: pillar; gap: 0; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); margin-bottom: 28px; overflow: hidden; }
body.dashboard-application .dash-pillars .dash-pillar { counter-increment: pillar; border: 0; border-right: 1px solid var(--ui-border); border-radius: 0; background: transparent; box-shadow: none; height: 178px; padding: 42px 22px 20px; }
body.dashboard-application .dash-pillars .dash-pillar:last-child { border-right: 0; }
body.dashboard-application .dash-pillars .dash-pillar::before { content: '0' counter(pillar); position: absolute; top: 17px; left: 22px; font-size: 9px; letter-spacing: 1px; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
body.dashboard-application .dash-pillars .dash-pillar:hover { transform: none; background: var(--ui-accent-soft); }
body.dashboard-application .dash-pillars .dash-pillar > span:first-child { font-size: 13px; }
body.dashboard-application .dash-pillars .dash-pillar strong { margin-top: 10px; font-size: 32px; }
body.dashboard-application .dash-pillars .dash-pillar-cta { bottom: 16px; font-size: 10px; }
body.dashboard-application .dash-progress-art > span { display: grid; place-items: center; font-size: 18px; color: var(--ui-muted); background: var(--ui-surface); border-radius: 8px; }
body.dashboard-application .dash-progress-art > span.is-done { color: var(--ui-accent); border-color: var(--ui-accent); background: var(--ui-accent-soft); }
body.dashboard-application .dash-progress-art b { font-weight: 400; letter-spacing: -1px; }

/* The earlier editors and the library use the same surfaces and interactions. */
body.harmony-app { --ink: var(--ui-text); --muted: var(--ui-muted); --line: var(--ui-border); --paper: var(--ui-canvas); --accent: var(--ui-accent); --teal: var(--ui-accent); --green: var(--ui-accent); background: var(--ui-canvas); color: var(--ui-text); }
body.harmony-app .app-sidebar { background: var(--ui-surface-subtle); border-color: var(--ui-border); }
body.harmony-app > :is(header, footer) { background: var(--ui-surface); color: var(--ui-secondary); border-color: var(--ui-border); }
body.harmony-app :is(.card, .detail-card, .sim-card, .guide-card, .point-editor, .reference-card, .canvas-card, .auth-card, .upload-box, .empty, .summary, .ratio-page-card, .ratio-detail, .ratio-preview, .persistence-panel) {
  background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--studio-radius); color: var(--ui-text); box-shadow: var(--ui-shadow);
}
body.harmony-app .shell-link { border-radius: 8px; color: var(--ui-secondary) !important; }
body.harmony-app .shell-link:is(:hover, .is-active) { background: var(--ui-accent-soft); color: var(--ui-accent) !important; }
body.harmony-app .shell-link.is-active { box-shadow: inset 3px 0 var(--ui-accent); }
body.harmony-app :is(.sidebar-new, .button.primary) { background: var(--ui-action); color: var(--ui-on-action) !important; border-radius: 8px; }
body.harmony-app :is(.sidebar-study, .local-profile, .point-instruction, .guide-note, .canvas-toolbar, .canvas-footer, .zoom-toolbar) { background: var(--ui-surface-subtle); color: var(--ui-secondary); border-color: var(--ui-border); }
body.harmony-app :is(input, select, textarea) { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
body.harmony-app .ratio:is(:hover, .selected), body.harmony-app .point-option.selected { background: var(--ui-accent-soft); border-color: var(--ui-accent); }
body.harmony-app .photo-viewport, body.harmony-app .canvas-card canvas { background: var(--ui-photo); }

/* Editorial landing: numbered structure, precise corners and the shared blue accent. */
body:has(.landing-header) .landing-header { border-radius: 12px; }
body:has(.landing-header) .hero-actions > a:first-child { border-radius: 9px; }
body:has(.landing-header) :is(.product-window, .perspective-card, .privacy-panel) { border-radius: 16px; border-color: var(--ui-border); }
body:has(.landing-header) :is(.product-header, .ratios-panel, .view-tabs, .preview-ratio) { background: var(--ui-surface); }
body:has(.landing-header) .portrait-panel { background: var(--ui-photo); }
body:has(.landing-header) .preview-ratio[aria-pressed="true"] { background: var(--ui-accent-soft); }
body:has(.landing-header) .steps-grid article { border-top: 1px solid var(--ui-border-strong); padding-top: 22px; }
body:has(.landing-header) .step-title > span { border-radius: 5px; background: var(--ui-accent-soft); color: var(--ui-accent); border-color: transparent; }
body:has(.landing-header) :is(.eyebrow, .section-footnote) { color: var(--ui-accent); }

body .landmark-review .review-heading h1 { font-family: GeistSans, Arial, sans-serif; font-weight: 600; letter-spacing: -1px; }
body .landmark-review :is(.review-photo-card, .review-point-panel) { border-radius: var(--studio-radius); box-shadow: var(--ui-shadow); }
body .landmark-review .review-regions button { border-radius: 8px; }
body .landmark-review .review-regions button[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); border-color: var(--ui-accent); }
body .landmark-review :is(.scan-primary, .scan-secondary) { border-radius: 9px; }

@media (prefers-reduced-motion: reduce) {
  body.dashboard-application .dash-pillar:hover { transform: none; }
}
@media (max-width: 640px) {
  body.dashboard-application .dash-studio-heading { align-items: flex-start; margin-bottom: 22px; }
  body.dashboard-application .dash-studio-heading h1 { max-width: 240px; font-size: 25px; }
  body.dashboard-application .dash-studio-heading > a { font-size: 10px; margin-top: 4px; }
  body.dashboard-application .dash-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.dashboard-application .dash-pillars .dash-pillar { height: 162px; padding: 38px 16px 18px; }
  body.dashboard-application .dash-pillars .dash-pillar:nth-child(2) { border-right: 0; }
  body.dashboard-application .dash-pillars .dash-pillar:nth-child(-n+2) { border-bottom: 1px solid var(--ui-border); }
  body.dashboard-application .dash-pillars .dash-pillar::before { left: 16px; top: 14px; }
}