/* Randevunolsun / Studio Edition. Shared foundations, shell and entry surfaces. */
:root {
  --rd-cobalt: #006B48; --rd-purple: #063D2E; --rd-orange: #C6FF32; --rd-lime: #C6FF32;
  --rd-accent: #006B48; --rd-accent-hover: #063D2E; --rd-accent-soft: #eff8e7; --rd-accent-text: #006B48;
  --rd-dark-accent: #C6FF32; --rd-dark-soft: #263E2D; --rd-accent-ink: #fff;
}
html[data-accent=coral] { --rd-accent: #063D2E; --rd-accent-hover: #032C21; --rd-accent-soft: #edf4ec; --rd-accent-text: #063D2E; --rd-dark-accent: #a8e4b3; --rd-dark-soft: #1d3c2f; }
html[data-accent=violet] { --rd-accent: #C6FF32; --rd-accent-hover: #b5ed25; --rd-accent-soft: #f1ffd9; --rd-accent-text: #3C5F0B; --rd-dark-accent: #C6FF32; --rd-dark-soft: #2e4022; --rd-accent-ink: #063D2E; }
body:has(.app-shell,.auth-screen,.access-screen,.legal-page,.installer-shell), .app-shell {
  --bg: #f5f7f2; --surface: #fff; --surface-soft: #f5f7f2; --surface-hover: #eef2e9;
  --text: #063D2E; --muted: #5c6b61; --subtle: #5c6b61; --border: #dfe5db; --border-strong: #bfcdbf;
  --primary: var(--rd-accent); --primary-hover: var(--rd-accent-hover); --primary-soft: var(--rd-accent-soft); --primary-text: var(--rd-accent-text); --primary-ink: var(--rd-accent-ink);
  --purple: #386D20; --purple-soft: #f1f7e9; --blue: #2d62b4; --blue-soft: #eaf2ff;
  --orange: #a84a1a; --orange-soft: #fff0df; --red: #b32e4c; --red-soft: #ffedf1;
  --shadow: 0 4px 22px #063D2E05; --shadow-raised: 0 24px 70px #063D2E20;
  --radius: 16px; --brand-radius: 16px; --brand-control-radius: 11px; --sidebar-width: 232px;
  --studio-sidebar: var(--surface); --studio-sidebar-soft: var(--surface-soft); --studio-sidebar-text: var(--muted); --studio-focus: #009c69;
  --brand-ink: var(--text); --brand-muted: var(--muted); --brand-line: var(--border);
  --font: 'Segoe UI Variable Text','Segoe UI',Arial,sans-serif;
  background: var(--bg); color: var(--text); font-family: var(--font);
}
html[data-theme=dark] body:has(.app-shell,.auth-screen,.access-screen,.legal-page), html[data-theme=dark] .app-shell {
  --bg: #0c1914; --surface: #14281f; --surface-soft: #1d3528; --surface-hover: #294432;
  --text: #f4f8ee; --muted: #b4c8b6; --subtle: #adc6b5; --border: #30483b; --border-strong: #4f6a56;
  --primary: var(--rd-dark-accent); --primary-hover: #dcff87; --primary-soft: var(--rd-dark-soft); --primary-text: var(--rd-dark-accent); --primary-ink: #063D2E;
  --purple: #C6FF32; --purple-soft: #293e23; --blue: #a4c8ff; --blue-soft: #273650;
  --orange: #ffc19b; --orange-soft: #473429; --red: #ffa4b8; --red-soft: #492c3c;
  --shadow: 0 5px 25px #0000000c; --shadow-raised: 0 24px 70px #0005;
}
.app-shell, .auth-screen, .access-screen { font-size: 14px; line-height: 1.55; }
.app-shell *:not(.editor-preview *) { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.app-shell :is(h1,h2,h3), .auth-screen :is(h1,h2,h3), .access-screen :is(h1,h2,h3) { font-family: 'Segoe UI Variable Display','Segoe UI',Arial,sans-serif; font-weight: 750; letter-spacing: -.045em; }
:is(.app-shell,.auth-screen,.access-screen,.modal) :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #009c69; outline-offset: 3px; }
.app-shell .sidebar { padding: 24px 16px 18px; background: var(--surface); border-right: 1px solid var(--border); box-shadow: none; }
.app-shell .studio-sidebar-head { padding: 0 0 20px; margin: 0 0 15px; border-bottom: 1px solid var(--border); gap: 5px; }
.app-shell .sidebar .brand { padding: 0; gap: 8px; margin-bottom: 24px; }
.app-shell .studio-sidebar-head .brand { margin: 0; }
.app-shell .sidebar .brand-symbol { width: 33px; height: 33px; border-radius: 10px; }
.app-shell .sidebar .randevunolsun-brand .brand-name { font-size: 16px; letter-spacing: -.8px; font-weight: 800; color: var(--text); }
.app-shell .sidebar .randevunolsun-brand .brand-name span { color: var(--primary-text); }
.app-shell .sidebar .brand-sub { display: none; }
.app-shell .sidebar :is(.workspace-picker,.platform-workspace) { border: 0; border-radius: 12px; margin: 0 0 22px; padding: 15px 13px; background: var(--surface-soft); box-shadow: inset 3px 0 var(--rd-cobalt); }
.app-shell .sidebar .workspace-picker label, .app-shell .platform-workspace small { color: var(--muted); font-size: 10px; line-height: 1.5; letter-spacing: .04em; }
.app-shell .sidebar .workspace-picker select { font-size: 12px; font-weight: 650; background: transparent; color: var(--text); padding: 6px 0; border: 0; min-height: 30px; }
.app-shell .sidebar .workspace-picker select + select { color: var(--muted); font-weight: 500; }
.app-shell .sidebar .workspace-picker select option { background: var(--surface); color: var(--text); }
.app-shell .platform-workspace strong { font-size: 13px; color: var(--text); }
.app-shell .platform-workspace > span { background: var(--primary-soft); color: var(--primary-text); }
.app-shell .sidebar :is(.studio-nav-label,.nav-label) { font-size: 10px; font-weight: 750; color: var(--muted); letter-spacing: .14em; padding: 5px 12px 9px; }
.app-shell .sidebar .studio-nav-group + .studio-nav-group { margin-top: 21px; }
.app-shell .sidebar .nav-item { position: relative; min-height: 46px; margin: 3px 0; padding: 10px 12px; gap: 11px; border-radius: 10px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.4; transition: background .16s,color .16s,transform .16s; }
.app-shell .sidebar .nav-item svg { width: 18px; height: 18px; color: var(--muted); opacity: 1; flex-shrink: 0; }
.app-shell .sidebar .nav-item:hover { color: var(--text); background: var(--surface-soft); transform: translateX(2px); }
.app-shell .sidebar .nav-item:hover svg { color: var(--primary-text); }
.app-shell .sidebar .nav-item.active { color: var(--primary-ink); background: var(--primary); box-shadow: 0 5px 12px color-mix(in srgb,var(--primary) 15%,transparent); font-weight: 700; }
.app-shell .sidebar .nav-item.active svg { color: inherit; }
.app-shell .sidebar .nav-item.active::before { display: none; }
.app-shell .sidebar .nav-count { background: var(--primary-soft); color: var(--primary-text); border-radius: 50%; min-width: 22px; height: 22px; font-size: 10px; }
.app-shell .sidebar .nav-item.active .nav-count { background: #0002; color: inherit; }
.app-shell .sidebar .public-link-card { position: relative; background: var(--rd-lime); color: #063D2E; border: 0; border-radius: 14px; padding: 18px; margin: 22px 0 16px; }
.app-shell .sidebar .public-link-card > svg { color: #063D2E; }
.app-shell .sidebar .public-link-card :is(strong,h3) { color: #063D2E; font-size: 15px; font-weight: 750; }
.app-shell .sidebar .public-link-card p { color: #325741; font-size: 12px; }
.app-shell .sidebar .public-link-card .btn { background: #063D2E; border: 0; color: #fff; margin-top: 13px; font-size: 11px; border-radius: 9px; }
.app-shell .sidebar .profile { border-color: var(--border); padding: 16px 0 0; gap: 9px; }
.app-shell .sidebar .profile strong { color: var(--text); font-size: 12px; }
.app-shell .sidebar .profile small { color: var(--muted); font-size: 10px; }
.app-shell .sidebar .profile .avatar { background: var(--primary-soft); color: var(--primary-text); border: 0; border-radius: 50%; }
.app-shell .sidebar :is(.icon-button,.studio-rail-toggle,.studio-mobile-close) { color: var(--muted); background: transparent; }
.app-shell .sidebar :is(.icon-button,.studio-rail-toggle,.studio-mobile-close):hover { color: var(--primary-text); background: var(--primary-soft); }
.app-shell .platform-sidebar-note { background: var(--surface-soft); color: var(--text); border: 0; border-radius: 12px; padding: 16px; }
.app-shell .platform-sidebar-note strong { color: var(--text); }
.app-shell .platform-sidebar-note p { color: var(--muted); }
.app-shell .platform-sidebar-note > svg { color: var(--primary-text); }
.app-shell .studio-plan-badge { color: var(--muted); }
.app-shell .studio-plan-badge strong { background: var(--primary-soft); color: var(--primary-text); border: 0; }
.app-shell .main-shell { min-width: 0; }
.app-shell .topbar { height: 76px; padding: 0 32px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; gap: 18px; }
.app-shell .topbar-title { min-width: 0; gap: 12px; }
.app-shell .studio-breadcrumb { font-size: 11px; line-height: 1.4; color: var(--muted); }
.app-shell .studio-breadcrumb strong { color: var(--muted); font-weight: 600; }
.app-shell .studio-current-page { font-size: 15px; color: var(--text); font-weight: 750; }
.app-shell .topbar-actions { gap: 9px; }
.app-shell .topbar-actions .icon-button { border-radius: 11px; }
.app-shell .topbar-actions > .avatar { border-radius: 50%; border: 0; background: var(--primary-soft); color: var(--primary-text); }
.app-shell .studio-command-trigger { border-radius: 10px; background: var(--surface-soft); border: 1px solid var(--border); color: var(--muted); min-height: 42px; height: auto; box-shadow: none; font-size: 12px; }
.app-shell .studio-command-trigger kbd { background: var(--surface); color: var(--muted); border-color: var(--border); border-radius: 5px; }
.rd-top-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.rd-top-links a { padding: 8px 11px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 650; }
.rd-top-links a[aria-current=page], .rd-top-links a:hover { color: var(--primary-text); background: var(--primary-soft); }
.app-shell .main-content { width: 100%; max-width: 1760px; padding: 32px; margin: 0 auto; min-width: 0; }
.app-shell .app-footer { padding: 22px 32px; border-top: 1px solid var(--border); color: var(--muted); background: transparent; font-size: 11px; gap: 12px; flex-wrap: wrap; }
.app-shell .page-heading { align-items: flex-end; gap: 18px; margin-bottom: 27px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.app-shell .page-heading h1 { font-size: clamp(30px,2.9vw,42px); line-height: 1.12; font-weight: 800; letter-spacing: -.05em; margin: 7px 0 12px; }
.app-shell .page-heading .subtitle { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 700px; }
.app-shell .eyebrow { font-size: 10px; letter-spacing: .12em; line-height: 1.5; font-weight: 750; color: var(--primary-text); }
.app-shell .heading-actions { gap: 9px; flex-wrap: wrap; }
:is(.app-shell,.auth-screen,.access-screen,.modal) .btn:not(.editor-preview *) { border-radius: 10px; min-height: 44px; font-size: 13px; font-weight: 650; padding: 10px 16px; gap: 8px; line-height: 1.4; box-shadow: none; }
:is(.app-shell,.auth-screen,.access-screen,.modal) .btn.primary:not(.editor-preview *) { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 0 color-mix(in srgb,var(--primary) 65%,#063D2E); }
:is(.app-shell,.auth-screen,.access-screen,.modal) .btn.primary:not(.editor-preview *):hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); }
:is(.app-shell,.auth-screen,.access-screen,.modal) .btn.secondary:not(.editor-preview *) { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
:is(.app-shell,.auth-screen,.access-screen,.modal) .btn.ghost:not(.editor-preview *) { color: var(--primary-text); background: transparent; box-shadow: none; }
.app-shell .btn.small:not(.editor-preview *) { min-height: 36px; font-size: 11px; padding: 7px 11px; }
:is(.app-shell,.auth-screen,.access-screen,.modal) .icon-button:not(.editor-preview *) { color: var(--muted); min-width: 40px; min-height: 40px; border-radius: 10px; }
:is(.app-shell,.auth-screen,.access-screen,.modal) :is(input,select,textarea):not([type=checkbox],[type=radio],[type=color],.editor-preview *) { min-height: 44px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 9px; padding: 11px 12px; font-size: 13px; line-height: 1.45; max-width: 100%; }
:is(.app-shell,.auth-screen,.access-screen,.modal) :is(input,select,textarea):not(.editor-preview *):focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
:is(.app-shell,.auth-screen,.access-screen,.modal) input[type=checkbox], :is(.app-shell,.auth-screen,.access-screen,.modal) input[type=radio] { accent-color: var(--primary); }
:is(.app-shell,.auth-screen,.access-screen,.modal) .field label { font-size: 12px; font-weight: 650; margin-bottom: 9px; color: var(--text); }
:is(.app-shell,.auth-screen,.access-screen,.modal) .field-hint { color: var(--muted); font-size: 12px; line-height: 1.6; }
.app-shell :is(.panel,.settings-card,.stat-card,.platform-plan-card) { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.app-shell .panel-heading { padding: 22px 24px; }
.app-shell .panel-heading h2 { font-size: 20px; font-weight: 750; letter-spacing: -.035em; }
.app-shell .panel-subtitle { color: var(--muted); font-size: 12px; line-height: 1.6; }
.app-shell .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.app-shell table th { background: var(--surface-soft); color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .04em; padding-block: 15px; }
.app-shell table td { border-color: var(--border); padding-block: 17px; font-size: 12px; }
.app-shell table tbody tr:hover { background: var(--surface-soft); }
.app-shell .badge { border-radius: 6px; padding: 5px 8px; font-size: 10px; font-weight: 650; }
.app-shell .avatar { border-radius: 12px; }
.app-shell .notice { border-radius: 10px; padding: 14px 16px; font-size: 12px; }
.app-shell .empty-state { padding: 50px 24px; }
.app-shell .empty-state h3 { font-size: 21px; }
dialog.modal, .studio-command, .studio-appearance { border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--shadow-raised); background: var(--surface); color: var(--text); }
dialog.modal::backdrop, .studio-command::backdrop, .studio-appearance::backdrop { background: #063D2E80; backdrop-filter: blur(5px); }
dialog.modal { max-height: calc(100dvh - 40px); }
dialog.modal .modal-heading { padding: 22px 26px; border-bottom: 1px solid var(--border); }
dialog.modal .modal-heading h2 { font-size: 24px; letter-spacing: -.04em; }
dialog.modal .modal-body { padding: 25px 26px; }
dialog.modal :is(.modal-footer,.form-footer) { border-color: var(--border); padding-top: 20px; gap: 10px; flex-wrap: wrap; }
.studio-appearance .studio-color-swatch { background: var(--rd-cobalt); border-radius: 12px; transform: rotate(-7deg); }
.studio-appearance .studio-color-choice[data-color=coral] .studio-color-swatch { background: #063D2E; }
.studio-appearance .studio-color-choice[data-color=violet] .studio-color-swatch { background: #C6FF32; color: #063D2E; }
.studio-appearance h2 { font-weight: 800; }
.studio-appearance-head .eyebrow { color: var(--primary-text); }
.app-shell .studio-appearance-trigger { background: var(--rd-lime); color: #063D2E; border: 0; }
.app-shell .studio-mobile-nav { border-radius: 18px 18px 0 0; box-shadow: 0 -8px 35px #063D2E10; }
.studio-mobile-nav > :is(a,button)[aria-current=page] { background: var(--primary-soft); color: var(--primary-text); border-radius: 11px; }
.studio-mobile-nav > .studio-mobile-create { background: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 0 color-mix(in srgb,var(--primary) 65%,#063D2E); transform: translateY(-6px); border-radius: 13px; }
/* Entry pages become a graphic split canvas, with the form on a separate white card. */
.auth-screen { padding: 0; min-height: 100dvh; gap: 0; align-items: stretch; grid-template-columns: minmax(0,1fr) minmax(0,1fr); background: #f5f7f2; }
.auth-screen .auth-story, html[data-theme=dark] .auth-screen .auth-story { position: relative; isolation: isolate; min-height: 100dvh; overflow: hidden; border-radius: 0; padding: 44px clamp(30px,5vw,80px); color: #fff; background: #006B48; }
.auth-screen .auth-story::before { content: ''; position: absolute; z-index: -1; width: 410px; height: 410px; border: 70px solid #fff1; border-radius: 50%; top: 10%; right: -200px; transform: rotate(20deg); background: none; }
.auth-screen .auth-story::after, html[data-theme=dark] .auth-screen .auth-story::after { content: ''; position: absolute; z-index: -1; width: 250px; height: 250px; background: #C6FF32; border: 0; border-radius: 40px; box-shadow: none; bottom: -110px; right: 35px; top: auto; left: auto; transform: rotate(-20deg); }
.auth-screen .auth-story .brand-name { color: #fff; font-size: 24px; font-weight: 800; }
.auth-screen .auth-story .brand-name span { color: #C6FF32; }
.auth-screen .auth-story .brand-sub { color: #eff8e7; }
.auth-screen .auth-story .brand-symbol { background: #fff; border: 4px solid #fff; border-radius: 12px; }
.auth-screen .auth-story > .auth-story-content { max-width: 600px; padding: 75px 0 50px; }
.auth-screen .auth-story .eyebrow { display: inline-flex; border: 0; border-radius: 6px; color: #063D2E; background: #C6FF32; padding: 9px 12px; font-size: 10px; font-weight: 750; letter-spacing: .09em; transform: rotate(-2deg); }
.auth-screen .auth-story h1 { font-size: clamp(42px,4.4vw,72px); line-height: 1.04; letter-spacing: -.06em; font-weight: 800; margin: 28px 0; }
.auth-screen .auth-story h1 > span { color: #C6FF32; }
.auth-screen .auth-story p, html[data-theme=dark] .auth-screen .auth-story p { font-size: 16px; line-height: 1.75; max-width: 440px; color: #eff8e7; }
.auth-screen .auth-metrics, html[data-theme=dark] .auth-screen .auth-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #ffffff45; gap: 20px; padding-top: 24px; margin-top: 35px; }
.auth-screen .auth-metric > svg { color: #C6FF32; width: 24px; height: 24px; }
.auth-screen .auth-metric strong { color: #fff; font-size: 15px; }
.auth-screen .auth-metric span, .auth-screen .auth-story > small { color: #eff8e7; font-size: 12px; }
.auth-screen .auth-card { align-self: center; width: calc(100% - 72px); max-width: 570px; margin: 40px auto; padding: 35px 38px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 14px 40px #063D2E09; }
.auth-screen .auth-card h2 { font-size: clamp(29px,2.7vw,42px); font-weight: 800; line-height: 1.12; color: var(--text); }
.auth-screen .auth-card > p { font-size: 13px; line-height: 1.7; color: var(--muted); }
.auth-screen .auth-entry-label { color: var(--primary-text); background: var(--primary-soft); border-radius: 6px; font-size: 11px; padding: 8px 10px; width: fit-content; margin-bottom: 20px; }
.auth-screen .auth-card .field input { background: var(--surface-soft); min-height: 50px; border-color: var(--border); }
.auth-screen .auth-card .btn.primary { min-height: 50px; border-radius: 10px; }
.auth-screen .auth-footer { color: var(--muted); font-size: 11px; line-height: 1.7; }
.auth-screen .demo-note { background: var(--surface-soft); border: 1px dashed var(--border-strong); border-radius: 10px; margin-top: 22px; }
.auth-screen .demo-note p { font-size: 11px; }
.auth-screen .auth-switch { margin-top: 22px; padding-top: 18px; gap: 8px; border-color: var(--border); }
.auth-screen .signup-plans { background: var(--surface-soft); border-color: var(--border); border-radius: 12px; }
.auth-screen .signup-plan { border-radius: 9px; background: var(--surface); }
.auth-screen .signup-plan:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.auth-screen .signup-plan strong { color: var(--text); }
.auth-screen .signup-plan small { color: var(--muted); }
.access-screen { max-width: 1100px; padding: 38px 24px; }
.access-screen .settings-card { border: 1px solid var(--border); border-top: 5px solid var(--primary); border-radius: 16px; padding: 30px; background: var(--surface); }
/* Support, public legal pages and installation remain part of the same product. */
body .ro-support { --support-ink: #006B48; --support-paper: #f5f7f2; --support-muted: #5c6b61; --support-line: #dfe5db; --support-lime: #C6FF32; }
body .ro-support-launcher { background: #006B48; border-color: #006B48; border-radius: 14px; box-shadow: 0 7px 22px #006B4830; }
body .ro-support-header { background: #006B48; }
body .ro-support-header p { color: #eff8e7; }
body .ro-support-message.is-mine .ro-support-message-body { background: #006B48; }
body:has(.legal-page) { margin: 0; }
.legal-page { max-width: 1120px; padding: 40px 32px 70px; color: var(--text); }
.legal-page > h1 { font-size: clamp(36px,5vw,64px); font-weight: 800; letter-spacing: -.05em; }
.legal-page .legal-card { border-radius: 14px; padding: 30px; border-color: var(--border); box-shadow: var(--shadow); }
.legal-page .legal-document-grid { gap: 20px; }
.legal-page .legal-document-grid .legal-card { border-top: 5px solid var(--primary); }
.legal-page .legal-document-grid .legal-card:nth-child(3n+2) { border-top-color: var(--rd-orange); }
.legal-page .legal-document-grid .legal-card:nth-child(3n) { border-top-color: var(--rd-purple); }
.legal-page a:not(.btn), .legal-consents a { color: var(--primary-text); }
.legal-page .btn { border-radius: 10px; border-color: var(--primary); color: var(--primary-text); }
.legal-page .btn.primary { color: var(--primary-ink); background: var(--primary); }
body:has(.installer-shell) { margin: 0; }
.installer-shell { border-radius: 20px; box-shadow: 0 20px 80px #063D2E12; border-color: var(--border); }
.installer-shell .installer-aside { background: #006B48; color: #fff; }
.installer-aside .eyebrow, .installer-aside .brand small, .installer-aside .aside-intro p, .installer-aside .aside-note p, .installer-aside .steps small { color: #eff8e7; }
.installer-aside .aside-intro h2 { color: #fff; font-size: 45px; letter-spacing: -.05em; }
.installer-aside .brand-mark, .installer-aside .steps .is-current .step-number { background: #C6FF32; color: #063D2E; }
.installer-shell .installer-main { background: var(--surface); }
.installer-shell .main-heading h1 { color: var(--text); font-size: 36px; letter-spacing: -.04em; }
.installer-shell :is(input,select) { border-radius: 9px; min-height: 48px; border-color: var(--border-strong); }
.installer-shell .button.primary, .installer-shell .btn.primary { background: #006B48; border-color: #006B48; color: #fff; border-radius: 10px; }
@media (min-width:761px) {
  .studio-shell.is-compact { --sidebar-width: 86px; }
  .app-shell.is-compact .sidebar { padding: 24px 12px; }
  .app-shell.is-compact .studio-sidebar-head { padding-bottom: 20px; }
  .app-shell.is-compact .studio-sidebar-head .brand > .brand-symbol { display: block; width: 37px; height: 37px; }
  .app-shell.is-compact .sidebar .nav-item { font-size: 0; gap: 0; justify-content: center; padding: 12px; }
  .app-shell.is-compact .sidebar .studio-nav-group + .studio-nav-group { border-color: var(--border); }
}
@media (max-width:1280px) {
  .rd-top-links { display: none; }
  .app-shell .main-content { padding: 26px; }
  .app-shell .topbar { padding-inline: 26px; }
  .auth-screen .auth-card { width: calc(100% - 44px); padding: 30px 26px; }
}
@media (max-width:1000px) {
  .app-shell .page-heading { flex-wrap: wrap; align-items: flex-start; }
  .app-shell .page-heading .heading-actions { max-width: 100%; }
  .auth-screen { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
  .auth-screen .auth-story { padding-inline: 30px; }
  .auth-screen .auth-story h1 { font-size: 44px; }
  .auth-screen .auth-metrics { grid-template-columns: 1fr; }
}
@media (max-width:760px) {
  .app-shell .sidebar { width: min(300px,calc(100vw - 45px)); padding: 24px 18px max(20px,env(safe-area-inset-bottom)); }
  .app-shell .sidebar .workspace-picker select { min-height: 44px; font-size: 16px; }
  .app-shell .sidebar .nav-item { min-height: 48px; font-size: 13px; }
  .app-shell .topbar { height: 68px; padding: 0 16px; gap: 6px; }
  .app-shell .topbar-title { gap: 8px; flex: 1; }
  .app-shell .topbar-title > div { min-width: 0; }
  .app-shell .studio-breadcrumb { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 165px; font-size: 10px; }
  .app-shell .studio-current-page { font-size: 13px; }
  .app-shell .topbar-actions { gap: 4px; }
  .app-shell .topbar .studio-command-trigger { width: 40px; min-width: 40px; height: 44px; min-height: 44px; }
  .app-shell .topbar-actions .icon-button { width: 40px; min-width: 40px; min-height: 44px; padding: 9px; }
  .app-shell .main-content { padding: 24px 16px; }
  .app-shell .page-heading { padding-bottom: 20px; gap: 17px; margin-bottom: 22px; }
  .app-shell .page-heading h1 { font-size: 33px; margin: 9px 0 12px; }
  .app-shell .page-heading .subtitle { font-size: 13px; line-height: 1.65; }
  .app-shell .heading-actions { width: 100%; }
  .app-shell .heading-actions > .btn { flex: 1 1 auto; justify-content: center; }
  .app-shell .panel-heading { padding: 19px 18px; gap: 12px; flex-wrap: wrap; }
  .app-shell .panel-heading h2 { font-size: 19px; }
  :is(.app-shell,.auth-screen,.access-screen,.modal) :is(input,select,textarea):not([type=checkbox],[type=radio],[type=color],.editor-preview *) { font-size: 16px; min-width: 0; }
  .app-shell .btn.small:not(.editor-preview *) { min-height: 44px; font-size: 12px; }
  :is(.app-shell,.modal) .icon-button:not(.editor-preview *) { min-height: 44px; }
  .app-shell .app-footer { padding: 22px 16px; font-size: 10px; }
  dialog.modal { width: calc(100% - 20px); max-width: 680px; max-height: calc(100dvh - 24px); border-radius: 17px; }
  dialog.modal .modal-heading { padding: 18px; }
  dialog.modal .modal-heading h2 { font-size: 22px; }
  dialog.modal .modal-body { padding: 20px 18px; }
  dialog.modal .form-grid { grid-template-columns: minmax(0,1fr); }
  dialog.modal .field { min-width: 0; }
  dialog.modal :is(.form-footer,.modal-footer) > .btn { flex: 1 1 auto; justify-content: center; }
  .auth-screen { display: flex; flex-direction: column; }
  .auth-screen .auth-story, html[data-theme=dark] .auth-screen .auth-story { min-height: auto; padding: 26px 24px 30px; }
  .auth-screen .auth-story > .auth-story-content { padding: 28px 0 0; }
  .auth-screen .auth-story h1 { font-size: 42px; margin: 20px 0 16px; }
  .auth-screen .auth-story p { font-size: 13px; line-height: 1.65; margin: 0; max-width: 430px; }
  .auth-screen .auth-story::after { width: 160px; height: 160px; right: -110px; bottom: -75px; }
  .auth-screen .auth-story .brand-name { font-size: 22px; }
  .auth-screen .auth-card, .auth-screen .auth-card:has(#register-form) { max-width: 560px; width: calc(100% - 28px); padding: 26px 22px; margin: 20px auto 32px; border-radius: 17px; }
  .auth-screen .auth-card h2 { font-size: 32px; }
  .auth-screen .auth-card > p { font-size: 13px; }
  .auth-screen .auth-switch { flex-wrap: wrap; }
  .legal-page { padding: 28px 18px 50px; }
  .legal-page .legal-card { padding: 22px 18px; }
  .legal-page > h1 { font-size: 37px; }
  .installer-aside .aside-intro h2 { font-size: 35px; }
  .installer-shell :is(input,select) { font-size: 16px; }
}
@media (max-width:390px) {
  .app-shell .topbar { padding-inline: 10px; }
  .app-shell .main-content { padding-inline: 12px; }
  .app-shell .studio-breadcrumb { max-width: 115px; font-size: 9px; }
  .app-shell .studio-current-page { font-size: 12px; max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-shell .topbar .studio-command-trigger { display: none; }
  .app-shell .page-heading h1 { font-size: 30px; }
  .auth-screen .auth-story h1 { font-size: 37px; }
  .auth-screen .auth-card, .auth-screen .auth-card:has(#register-form) { width: calc(100% - 20px); padding: 24px 17px; }
}
@media (prefers-reduced-motion:reduce) {
  .app-shell *, .auth-screen *, .access-screen *, .modal *, .studio-appearance * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}