/* App components. Shared primitives live in design-system.css. */
/* Navigation and page layout */
.sidebar { width:220px; position:fixed; inset:0 auto 0 0; padding:10px 16px 16px; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; z-index:30; visibility:visible; transform:translateX(0); transition:transform 160ms ease,visibility 0s; }
.sidebar-brand-row { padding-left:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:24px; }
.brand { display:flex; align-items:center; gap:8px; margin:0; min-height:44px; }
.brand img { width:88px; height:auto; object-fit:contain; }
.brand-section { flex-shrink:0; font-size:12px; color:var(--muted); margin:0 8px 32px; }
.nav-label { flex-shrink:0; color:var(--muted); font-size:12px; font-weight:650; margin:16px 8px 8px; }
.sidebar nav { display:flex; flex-direction:column; gap:4px; min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; }
.nav-button { border:0; background:transparent; color:var(--ink); padding:12px; display:flex; gap:8px; align-items:center; text-align:left; border-radius:10px; font-size:14px; min-height:44px; }
.nav-button:hover,.recent-chat:hover { background:var(--paper); }
.nav-button.active { background:var(--selected); color:var(--primary); font-weight:700; }
.nav-icon { width:20px; height:20px; display:grid; place-items:center; flex-shrink:0; }
.nav-icon svg { width:20px; height:20px; }
.support-nav-button { position:relative; border:1px solid var(--line); margin:8px 0; }
.support-nav-copy { flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.support-nav-copy b { display:block; font-size:14px; font-weight:600; margin:0; white-space:nowrap; }
.support-brand-logo { display:block; width:88px; max-width:100%; height:auto; object-fit:contain; }
.support-card-heading .support-brand-logo { width:88px; flex-shrink:0; }
.support-nav-copy small { display:block; font-size:12px; color:var(--muted); margin-top:4px; padding-right:28px; }
.support-nav-button .count { position:static; margin-left:0; padding:4px; }
.support-nav-button:hover { background:var(--selected); }
.chat-support-button { width:44px; height:44px; padding:10px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.chat-support-button:hover:not(:disabled) { color:var(--primary); background:var(--selected); }
.count { margin-left:auto; }
.count { font-size:12px; background:var(--selected); border-radius:8px; padding:4px 8px; }
.tools-nav>summary,.recent-nav>summary { color:var(--muted); padding:12px 8px; font-size:14px; min-height:44px; cursor:pointer; }
.tools-nav .nav-button { width:100%; }
.recent-chat { display:block; width:100%; min-height:44px; border:0; background:transparent; text-align:left; padding:12px; font-size:14px; border-radius:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Account navigation stays separate from institution and team settings. */
.sidebar-bottom { flex-shrink:0; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.account { width:100%; min-height:60px; border:0; background:transparent; border-radius:10px; padding:8px; display:flex; gap:8px; align-items:center; text-align:left; }
.account:hover,.account[aria-expanded=true] { background:var(--selected); }
.account-copy { min-width:0; flex:1; }
.account b,.account small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account b { font-size:14px; font-weight:650; }.account small { font-size:12px; color:var(--muted); margin-top:4px; }
.account-chevron { width:16px; height:16px; }
.account[aria-expanded=true] .account-chevron { transform:rotate(180deg); }
.account-menu { inset:auto; margin:0; width:208px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; padding:8px; border:1px solid var(--control-border); border-radius:14px; background:var(--surface); color:var(--ink); }
.account-menu button { width:100%; min-height:44px; border:0; background:transparent; display:flex; align-items:center; gap:12px; padding:10px 12px; text-align:left; border-radius:10px; }
.account-menu button:hover { background:var(--selected); }
.avatar { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:50%; background:var(--selected); color:var(--primary); }
main { margin-left:220px; min-width:0; transition:margin-left 160ms ease; }
.sidebar-collapsed .sidebar { visibility:hidden; transform:translateX(-100%); transition:transform 160ms ease,visibility 0s linear 160ms; }
.sidebar-collapsed main { margin-left:0; }
.topbar { position:sticky; top:0; z-index:20; min-height:64px; padding:8px 32px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); font-size:14px; background:var(--paper); }
.topbar-leading,.topbar-actions { display:flex; align-items:center; gap:12px; }
.navigation-trail { flex-direction:row; min-width:0; gap:8px; }
.navigation-back,.navigation-home { min-height:44px; border:0; background:transparent; padding:8px; border-radius:10px; white-space:nowrap; }
.navigation-home { color:var(--primary); }
.navigation-back:hover,.navigation-home:hover { background:var(--selected); }
#navigation-current { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#navigation-divider { color:var(--muted); }
.section-actions { display:flex; justify-content:flex-start; margin-bottom:24px; }
.profile-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.profile-tabs button { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.profile-tabs button[aria-selected=true] { background:var(--selected); color:var(--primary); border-color:var(--primary); }
#profile-form section>label { margin-top:16px; }
#profile-form section>label:first-child { margin-top:0; }
.pilot-note { margin:12px 24px; font-size:14px; color:var(--muted); }
.pilot-note summary { min-height:44px; padding:12px 0; cursor:pointer; }
.pilot-note p { line-height:1.7; padding-bottom:12px; }
.crumb { color:var(--muted); }.divider { margin:0 8px; color:var(--muted); }
.local-tag { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; white-space:nowrap; }.local-tag i { width:6px; height:6px; border-radius:50%; background:var(--success); }
.settings-gear,.menu-toggle { display:grid; place-items:center; padding:10px; flex-shrink:0; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface); font-size:20px; }
.settings-gear svg,.menu-toggle svg { width:22px; height:22px; }
.settings-gear[aria-expanded="true"] { color:var(--primary); background:var(--selected); border-color:var(--primary); }
.menu-toggle { position:fixed; left:16px; top:10px; z-index:31; }
.sidebar-collapsed .topbar { padding-left:72px; }
.menu-backdrop { display:none; }
.page { max-width:1440px; margin:0 auto; padding:32px; }
.page-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; }.page-intro p { font-size:14px; color:var(--muted); margin-top:12px; line-height:1.7; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; min-width:0; }
/* The panes only change visibility. Forms and the preview iframe stay mounted. */
.settings-mode .page-intro,.workspace-mode .page-intro,.workspace-mode .page-footer,.workspace-mode .site-strip,.workspace-mode .target-strip,.workspace-mode .memory-note,.workspace-mode .help-note { display:none; }
.workspace-mode .page { padding:16px 32px; max-width:none; }
.workspace-grid { display:block; max-width:800px; margin:0 auto; }
.task-column { min-width:0; position:sticky; top:16px; }
.chat-card { display:flex; flex-direction:column; height:var(--chat-height,calc(100dvh - 96px)); min-height:0; border:0; background:transparent; }
.chat-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 16px; flex-shrink:0; }
.chat-header h2 { font-size:18px; }.chat-header .section-kicker { display:none; }
.chat-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }.chat-controls .small-badge { font-size:12px; }
.chat-welcome { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:safe center; text-align:center; padding:32px 16px; }
.chat-welcome h1 { font-size:32px; font-weight:650; letter-spacing:-1px; line-height:1.25; }
.chat-welcome p { font-size:16px; color:var(--muted); margin-top:16px; max-width:480px; line-height:1.7; }
.welcome-symbol { width:56px; height:56px; display:grid; place-items:center; color:var(--primary); background:var(--selected); border-radius:14px; margin-bottom:24px; }
.welcome-symbol svg { width:32px; height:32px; }
.chat-messages { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px 4px 24px; display:flex; flex-direction:column; gap:24px; }
.chat-messages:empty { display:none; }
.message { max-width:100%; font-size:16px; line-height:1.75; overflow-wrap:anywhere; }
.message.user { align-self:flex-end; max-width:88%; }.message.assistant { align-self:flex-start; width:100%; }
.message-label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; margin:0 4px 8px; }.message-label>span { color:var(--ink); font-weight:700; }.message time { font-size:12px; }
.message.user .message-label { justify-content:flex-end; }
.message-text { white-space:pre-wrap; padding:0 4px; color:var(--ink); }
.message.user .message-text { background:var(--selected); color:var(--ink); border-radius:14px; padding:16px; }
.message.error .message-text { color:var(--error); border-left:3px solid var(--error); padding:12px 16px; background:var(--surface); }
.message.activity .message-text { border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:16px; font-size:14px; }
.message-action { display:block; min-height:44px; font-size:14px; border:1px solid var(--control-border); border-radius:10px; color:var(--primary); background:var(--surface); padding:12px 16px; margin-top:16px; }
/* Message composer and in-place source reader */
.chat-composer { flex-shrink:0; margin-top:auto; border:1px solid var(--control-border); background:var(--surface); border-radius:18px; padding:12px; max-height:65%; overflow:auto; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.chat-composer:focus-within { border-color:var(--control-border); outline:none; }
.chat-composer.keyboard-text-focus { border-color:var(--primary); outline:2px solid var(--primary); outline-offset:2px; }
.chat-input-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#chat-text { border:0; box-shadow:none; background:transparent; min-height:48px; max-height:160px; resize:none; padding:8px; font-size:16px; margin:0 0 8px; }#chat-text:focus { outline:none; }
.composer-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.composer-icon { width:44px; height:44px; padding:10px; display:grid; place-items:center; flex-shrink:0; background:transparent; border:0; }
.composer-icon svg { width:22px; height:22px; }
.composer-icon:hover:not(:disabled) { background:var(--selected); }
.composer-send { background:var(--primary); color:var(--on-primary); }.composer-send:hover:not(:disabled) { background:var(--primary-hover); }
.composer-bottom .hint,#composer-feedback:not(.sr-only) { font-size:12px; color:var(--muted); }
.composer-attachments { display:flex; flex-wrap:wrap; gap:8px; }
.source-card { display:flex; align-items:center; max-width:100%; width:280px; border:1px solid var(--line); background:var(--paper); border-radius:14px; margin-bottom:8px; }
.source-open { display:flex; align-items:center; gap:12px; text-align:left; min-width:0; border:0; background:transparent; padding:8px 12px; flex:1; }
.source-open>span:last-child { min-width:0; overflow-wrap:anywhere; }.source-open b { display:block; font-size:14px; font-weight:650; }.source-open small { display:block; color:var(--muted); font-size:12px; }
.source-file-icon { display:grid; place-items:center; flex-shrink:0; width:36px; height:40px; border:1px solid var(--line); border-radius:8px; color:var(--primary); background:var(--surface); font-size:12px; font-weight:700; }
.attachment-remove { display:grid; place-items:center; flex-shrink:0; background:transparent; border:0; width:44px; height:44px; padding:8px; font-size:20px; color:var(--muted); }
.message-source { margin-top:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); font-size:14px; max-width:100%; }
.composer-add-menu { inset:auto; margin:0; padding:8px; width:248px; max-width:calc(100vw - 24px); background:var(--surface); color:var(--ink); border:1px solid var(--control-border); border-radius:14px; }
.composer-add-menu button { display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; text-align:left; padding:12px; font-size:14px; }.composer-add-menu button:hover { background:var(--selected); }
.source-reader { width:min(640px,calc(100vw - 32px)); max-height:75dvh; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink); overflow:auto; }
.source-reader::backdrop { background:rgba(32,35,43,.24); }
.source-reader-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }.source-reader h2 { font-size:18px; overflow-wrap:anywhere; }.source-reader-header p { font-size:12px; color:var(--muted); margin-top:4px; }
.source-reader-text { font:14px/1.8 Manrope,system-ui,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; max-height:42dvh; overflow:auto; padding:0 4px; margin:0; }
.source-reader textarea { font-size:16px; max-height:42dvh; }.source-reader-footer { display:flex; justify-content:flex-end; margin-top:16px; }
@media(max-width:620px) { .source-reader { width:calc(100vw - 24px); padding:16px; }.source-card { width:100%; } }
.preview-card { display:none; }.has-preview .preview-card { display:block; }
.workspace-mode.has-preview .workspace-grid { display:block; max-width:none; }
.has-preview .pane-switch { display:flex; }
.has-preview[data-active-pane=preview] .pane-switch { display:none; }
.has-preview[data-active-pane=chat] .workspace-grid { max-width:800px; }
.has-preview[data-active-pane=chat] .preview-card,.has-preview[data-active-pane=preview] .task-column { display:none; }
.pane-switch { position:sticky; top:8px; z-index:20; display:none; gap:4px; padding:4px; border:1px solid var(--line); background:var(--surface); border-radius:14px; width:max-content; margin:0 auto 16px; }.pane-switch button { background:transparent; border:0; border-radius:10px; padding:8px 24px; color:var(--muted); }.pane-switch button[aria-pressed=true] { background:var(--selected); color:var(--primary); font-weight:700; }
#version-badge,#save-state,#approval-detail,#publication-detail,.publication-area>small { font-size:14px; line-height:1.7; }
@media(max-width:1119px) {
 .task-column { position:static; }
 .workspace-mode.has-preview .workspace-grid { display:block; }
 .has-preview .pane-switch { display:flex; }
 .has-preview[data-active-pane=chat] .preview-card,.has-preview[data-active-pane=preview] .task-column { display:none; }
 .has-preview .chat-card { height:var(--chat-height,calc(100dvh - 96px)); }
}
@media(max-width:899px) {
 main { margin-left:0; }.topbar { padding:8px 16px 8px 72px; }.page,.workspace-mode .page { padding:16px; }
 .sidebar { visibility:hidden; transform:translateX(-100%); width:min(300px,calc(100vw - 48px)); transition:transform 160ms ease,visibility 0s linear 160ms; }
 .menu-open .sidebar { visibility:visible; transform:translateX(0); transition:transform 160ms ease,visibility 0s; }.menu-open .menu-backdrop { display:block; position:fixed; inset:0; z-index:29; background:rgba(32,35,43,.24); border:0; }
 .chat-card { height:var(--chat-height,calc(100dvh - 96px)); }
}
@media(max-width:620px) {
 .topbar { gap:8px; padding:8px 12px 8px 72px; }.topbar-leading { gap:8px; }.topbar .crumb,.topbar .divider { display:none; }.topbar-actions { gap:8px; }.local-tag { font-size:12px; }
 .page,.workspace-mode .page { padding:12px; }.page-intro { flex-wrap:wrap; gap:16px; margin-bottom:24px; }.page-intro h1 { font-size:24px; }
 .chat-header { gap:8px; padding-bottom:8px; }.chat-header h2 { font-size:18px; }.chat-controls { gap:4px; }.chat-controls .small-badge { display:none; }
 .chat-welcome { padding:16px 0; }.chat-welcome h1 { font-size:24px; }.chat-welcome p { font-size:16px; }.welcome-symbol { margin-bottom:16px; }
 .chat-composer { padding:12px; }
 .chat-card { height:var(--chat-height,calc(100dvh - 96px)); min-height:0; }.has-preview .chat-card { height:var(--chat-height,calc(100dvh - 96px)); }
 .message.user { max-width:94%; }.chat-messages { padding:12px 0 16px; }
 .topbar .local-tag { display:none; }
 .navigation-trail { display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 4px; flex:1; }
 .navigation-back { grid-column:1; grid-row:1 / 3; padding:10px; }
 .navigation-back span,#navigation-divider { display:none; }
 .navigation-home { grid-column:2; grid-row:1; min-height:22px; padding:0; text-align:left; font-size:12px; overflow:hidden; text-overflow:ellipsis; }
 #navigation-current { grid-column:2; grid-row:2; font-size:14px; }
 .workspace-mode #navigation-current { grid-column:1 / 3; grid-row:1; }
 .work-card .draft-item { display:block; }
 .work-card .work-continue { justify-content:flex-end; margin-top:12px; }
}

/* Content, tools, dialogs and settings */
p {
  margin: 0;
}
nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 1.8px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 9px;
}
.site-strip {
  padding: 15px 19px;
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--selected);
  border-radius: 10px;
  margin-bottom: 23px;
}
.site-icon {
  width: 35px;
  height: 35px;
  background: var(--selected);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--muted);
}
.site-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-info b {
  font-size: 14px;
  font-weight: 650;
}
.site-info span {
  font-size: 14px;
  color: var(--muted);
}
.badge {
  color: var(--muted);
  background: var(--selected);
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: 4px;
}
.ai-state {
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
  padding-left: 10px;
}
.ai-state.ready {
  color: var(--success);
}
.composer, .editor {
  padding: 24px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 25px;
}
.section-kicker {
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 650;
  color: var(--muted);
  display: block;
  margin-bottom: 9px;
}
.small-badge {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 5px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.suggestions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 24px;
}
.suggestions button {
  font-size: 14px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--control-border);
  border-radius: 10px;
  padding: 5px 9px;
}
.suggestions button:hover {
  background: var(--selected);
}
.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
.label-row label {
  margin: 0;
}
.text-button:hover {
  text-decoration: underline;
}
.required {
  color: var(--muted);
  font-size: 14px;
}
.hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.composer .hint {
  margin-bottom: 16px;
}
.help-note {
  display: flex;
  gap: 13px;
  margin: 23px 7px;
}
.help-note>span {
  color: var(--muted);
  font-size: 18px;
}
.help-note b {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.help-note p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 5px;
}
/* Preview browser and its optional operations drawer. */
.preview-card { position:relative; }
.preview-header { padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface); border-bottom:1px solid var(--line); }
.preview-title { min-width:0; margin-right:auto; }.preview-title h2 { font-size:18px; line-height:1.3; }
.device-toggle { display:flex; flex-shrink:0; gap:2px; padding:2px; border-radius:10px; background:var(--paper); }
.device-toggle button { display:flex; align-items:center; justify-content:center; gap:8px; min-width:44px; height:44px; padding:8px 12px; border:0; background:transparent; border-radius:10px; color:var(--muted); font-size:14px; }
.device-toggle button svg { width:20px; height:20px; }
.device-toggle .selected { background:var(--selected); color:var(--primary); }
.preview-actions { display:flex; flex-shrink:0; gap:2px; }
.preview-control { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--ink); font-size:24px; text-decoration:none; flex-shrink:0; padding:0; }
.preview-control:hover,.preview-control[aria-expanded=true] { background:var(--selected); color:var(--primary); }
.preview-control[hidden] { display:none; }
.preview-tools { position:absolute; z-index:6; top:64px; right:8px; width:400px; max-width:calc(100% - 16px); max-height:calc(var(--visible-height,100dvh) - 180px); overflow:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--control-border); border-radius:14px; }
.preview-tools[hidden] { display:none; }
.preview-tools-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; gap:12px; }.preview-tools-header h3 { font-size:18px; }
@media(max-width:620px) { .preview-header { padding:6px 8px; gap:4px; }.preview-title h2 { font-size:16px; }.device-toggle button { padding:8px; }.device-label { display:none; }.preview-tools { top:60px; }.workspace-mode .page { padding:12px 8px; } }
@media(max-width:360px) { .preview-header { padding:6px 4px; gap:2px; }.preview-title { flex-shrink:0; }.device-toggle { padding:0; gap:0; }.preview-actions { gap:0; } }
#preview-address {
  min-width:0;
  flex:1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#open-preview {
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  margin-left: auto;
  font-size: 14px;
}
.empty-preview {
  margin: 0 18px;
  min-height: 402px;
  background: var(--selected);
  border: 1px solid var(--line);
  border-top: 0;
  text-align: center;
  padding: 60px 15px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.paper-mark {
  width: 65px;
  height: 78px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  transform: rotate(-7deg);
  padding: 23px 14px;
  box-shadow: none;
  margin-bottom: 28px;
}
.paper-mark span {
  display: block;
  height: 2px;
  background: var(--selected);
  margin-bottom: 8px;
}
.paper-mark span:last-child {
  width: 65%;
}
.empty-preview h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.7px;
  color: var(--muted);
}
.empty-preview p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 14px;
}
.empty-foot {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: auto;
  padding-top: 34px;
}
.frame-wrap { position:relative; margin:0; width:100%; height:var(--preview-stage-height,560px); min-height:200px; overflow:hidden; background:var(--paper); }
.frame-wrap.mobile { max-width:390px; margin:0 auto; }
#preview-content { background:var(--paper); }
#preview-frame { position:absolute; top:0; left:0; width:var(--preview-width,100%); height:var(--preview-height,560px); display:block; border:0; background:var(--surface); transform:scale(var(--preview-scale,1)); transform-origin:top left; }
.approval-area {
  padding: 19px 23px 23px;
}
.approval-text {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.approval-dot {
  background: var(--selected);
  width: 6px;
  height: 6px;
  border-radius: 10px;
  margin-top: 5px;
  flex-shrink: 0;
}
.approval-text b {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.approval-text p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
}
#export-link {
  margin-top: 10px;
  font-size: 14px;
  justify-content: center;
}
.page-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 12px;
  padding-top: 36px;
  letter-spacing: .2px;
}
.notice {
  border: 1px solid var(--line);
  background: var(--selected);
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.notice.error {
  background: var(--surface);
  border-color: var(--line);
  color: var(--error);
}
.editor-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
}
.task-message {
  background: var(--selected);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 21px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.revision-form {
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 20px;
}
.revision-row {
  display: flex;
  gap: 8px;
}
.revision-row input {
  min-width: 0;
}
.revision-row button {
  flex-shrink: 0;
}
.list-card {
  max-width: 850px;
  padding: 26px;
}
.draft-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  padding: 18px;
  border-radius: 10px;
  margin-bottom: 0;
  width: 100%;
  background: var(--surface);
  text-align: left;
}
.draft-item:hover {
  background: var(--selected);
}
.draft-item b {
  display: block;
  font-size: 14px;
  line-height: 1.5;
}
.draft-item small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}
.draft-item .work-continue { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--primary); flex-shrink:0; }
.work-card { border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; }
.work-card-copy { min-width:0; overflow-wrap:anywhere; }
.work-version-details { padding:0 18px 12px; font-size:14px; color:var(--muted); }
.work-version-details summary { min-height:44px; display:list-item; cursor:pointer; padding-top:12px; }
.work-version-details p { padding:8px 0; line-height:1.7; }
.list-empty {
  padding: 45px 10px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}
.profile-card {
  max-width: 700px;
  padding: 28px;
}
.profile-intro {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 24px;
}
.profile-card form>.button {
  margin-top: 22px;
}
@media(max-width:1120px) {
.composer, .editor {
  padding: 19px;
}
}
@media(max-width:1120px) {
.card-header {
  gap: 7px;
}
}
@media(max-width:1120px) {
.small-badge {
  font-size: 12px;
  padding: 4px 5px;
}
}
@media(max-width:1120px) {
.ai-state {
  font-size: 14px;
}
}
@media(max-width:1120px) {
.badge {
  display: none;
}
}
@media(max-width:920px) {
.empty-preview {
  min-height: 330px;
  padding-top: 36px;
}
}
@media(max-width:920px) {
.empty-foot {
  padding-top: 23px;
}
}
@media(max-width:920px) {
.help-note {
  margin: 18px 5px;
}
}

@media(max-width:920px) {
.ai-state {
  max-width: 220px;
}
}

@media(max-width:920px) {
.composer, .editor {
  padding: 25px;
}
}
@media(max-width:620px) {
.eyebrow {
  font-size: 12px;
  margin-bottom: 7px;
}
}
@media(max-width:620px) {
.site-strip {
  padding: 12px;
  gap: 9px;
  margin-bottom: 17px;
}
}
@media(max-width:620px) {
.site-icon {
  width: 29px;
  height: 29px;
  font-size: 18px;
}
}
@media(max-width:620px) {
.site-info b {
  font-size: 14px;
}
}
@media(max-width:620px) {
.site-info span {
  font-size: 14px;
}
}
@media(max-width:620px) {
.ai-state {
  font-size: 14px;
  max-width: 140px;
  line-height: 1.5;
  text-align: right;
}
}
@media(max-width:620px) {
.composer, .editor {
  padding: 20px;
}
}
@media(max-width:620px) {
.card-header {
  margin-bottom: 21px;
}
}
@media(max-width:620px) {
.section-kicker {
  font-size: 12px;
}
}
@media(max-width:620px) {
.label-row {
  gap: 5px;
}
}
@media(max-width:620px) {
}
@media(max-width:620px) {
.suggestions button {
  font-size: 14px;
}
}
@media(max-width:620px) {
.hint {
  font-size: 12px;
}
}


@media(max-width:620px) {
.approval-area {
  padding: 18px;
}
}
@media(max-width:620px) {
.page-footer {
  font-size: 12px;
  padding-top: 27px;
  flex-wrap: wrap;
}
}
@media(max-width:620px) {
.revision-row {
  flex-direction: column;
}
}
@media(max-width:620px) {
.profile-card, .list-card {
  padding: 21px;
}
}
@media(max-width:620px) {
.draft-item {
  padding: 15px;
}
}
@media(max-width:620px) {
#edit-body {
  min-height: 270px;
}
}
@media(max-width:620px) {
.editor-actions {
  gap: 10px;
}
}
@media(max-width:620px) {
.editor-actions .button {
  font-size: 14px;
}
}
.message-label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 1px 5px;
}
.message-text {
  white-space: pre-wrap;
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--surface);
  color: var(--ink);
}
.message-source {
  margin-top: 9px;
  border-top: 1px solid var(--selected);
  padding-top: 8px;
  font-size: 14px;
}
.message-source summary {
  cursor: pointer;
  list-style: none;
  color: var(--muted);
}
.message-source pre {
  font-family: inherit;
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 14px;
  max-height: 150px;
  overflow: auto;
}
.image-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}
.starter-prompts {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 25px auto 0;
  max-width: 280px;
}
.starter-prompts button {
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}
.starter-prompts button:hover {
  background: var(--selected);
}
.chat-typing {
  font-size: 14px;
  color: var(--muted);
  padding: 0 24px 15px;
}
.conversation-job-status {
  align-self:flex-start;
  max-width:100%;
  margin-top:-12px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--selected);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
}
.conversation-job-status .job-refresh { display:block; margin-top:4px; }
.conversation-job-status .hint { margin:4px 0 0; }
.conversation-job-status.uncertain { border-color:var(--warning); }
.conversation-job-status.job-status-error { border-color:var(--warning); }
.job-typing-indicator { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:44px; min-height:24px; }
.job-typing-dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; animation:job-typing-pulse 1.25s ease-in-out infinite; }
.job-typing-dot:nth-child(2) { animation-delay:160ms; }
.job-typing-dot:nth-child(3) { animation-delay:320ms; }
@keyframes job-typing-pulse { 0%,60%,100% { opacity:.35; transform:translateY(0); } 30% { opacity:.85; transform:translateY(-2px); } }
@media(prefers-reduced-motion:reduce) { .job-typing-dot { animation:none; opacity:.55; transform:none; } }
.preview-tabs button {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 14px;
  padding: 0 0 11px;
  border-bottom: 2px solid transparent;
}
.preview-tabs button.selected {
  color: var(--ink);
  border-bottom-color: var(--control-border);
}
.preview-tabs>span {
  font-size: 14px;
  color: var(--muted);
  margin-left: auto;
  padding-bottom: 11px;
}
.inline-editor {
  padding: 8px 23px 6px;
}
.inline-editor label {
  font-size: 12px;
}
.inline-editor textarea {
  font-size: 14px;
}
.site-field { margin: 18px 0; }
.site-field-image-preview { display: block; max-width: 220px; max-height: 120px; object-fit: contain; margin: 8px 0; border-radius: 8px; }
.code-file-diff { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-note {
  display: flex;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--selected);
  padding: 14px 16px;
  margin-top: 16px;
}
.memory-note>span {
  font-size: 18px;
  color: var(--muted);
}
.memory-note b {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.memory-note p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin: 5px 0;
}
.memory-note .text-button {
  font-size: 14px;
}
@media(max-width:1120px) {
.preview-tabs {
  gap: 12px;
}
}
@media(max-width:1120px) {
.inline-editor {
  padding: 8px 18px;
}
}
@media(max-width:920px) {
.inline-editor {
  padding: 8px 23px;
}
}
@media(max-width:620px) {
.message-text {
  padding: 11px 12px;
}
}
@media(max-width:620px) {
.inline-editor {
  padding: 6px 18px;
}
}
@media(max-width:620px) {
.inline-editor textarea {
  font-size: 16px;
}
}
@media(max-width:620px) {
.memory-note {
  padding: 13px;
}
}
@media(max-width:620px) {
.preview-tabs {
  margin: 0 17px 14px;
}
}
@media(max-width:620px) {
.preview-tabs button {
  font-size: 14px;
}
}
@media(max-width:620px) {
#source {
  min-height: 145px;
}
}
.demo-nav {
  text-decoration: none;
  color: inherit;
}
.publication-area {
  padding: 24px;
  border-top: 1px solid var(--line);
}
.publication-area h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.4px;
  margin: 12px 0 8px;
}
.publication-area p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 18px;
}
.publication-area>.button {
  margin-top: 10px;
}
.publication-area>small {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.release-history {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 20px;
}
.release-history label {
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}
.release-history select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
  font: inherit;
  font-size: 14px;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}
.release-history .text-button {
  margin-top: 12px;
}
@media(max-width:620px) {
.demo-nav {
  display: none;
}
}
@media(max-width:620px) {
.publication-area {
  padding: 18px;
}
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.dashboard-lead {
  background: var(--selected);
  border: 1px solid var(--line);
  padding: 32px;
  border-radius: 10px;
  margin-bottom: 23px;
}
.dashboard-lead h2 {
  font-size: clamp(23px,3vw,32px);
  font-weight: 500;
  letter-spacing: -1px;
  margin: 14px 0;
}
.dashboard-lead p {
  color: var(--muted);
  line-height: 1.8;
  max-width: 620px;
}
.dashboard-actions {
  display: flex;
  gap: 12px;
  margin-top: 25px;
  flex-wrap: wrap;
}
.home-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 15px;
  margin-bottom: 23px;
}
.stat-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
}
.stat-card>span {
  font-size: 14px;
  color: var(--muted);
}
.stat-card b {
  font-size: 32px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -1.3px;
}
.stat-card small {
  font-size: 12px;
  color: var(--muted);
}
.stat-card:hover {
  border-color: var(--line);
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 23px;
}
.dashboard-grid .list-card {
  padding: 0;
  overflow: hidden;
}
.dashboard-grid .card-header {
  padding: 24px;
}
.dashboard-grid h2 {
  font-size: 18px;
}
.dashboard-site-link {
  padding: 20px;
}
.page-quick {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  padding: 19px 24px;
  text-align: left;
  color: var(--ink);
}
.page-quick small {
  grid-row: 2;
  font-size: 12px;
  color: var(--muted);
}
.quick-arrow,.page-quick>.app-icon {
  grid-column: 2;
  grid-row: 1 / 3;
  color: var(--muted);
  align-self: center;
}
.page-quick:hover {
  background: var(--surface);
}
.page-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
.page-card {
  padding: 27px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
.page-card .page-icon {
  font-size: 24px;
  background: var(--selected);
  border-radius: 14px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.page-card h2 {
  font-size: 18px;
}
.page-card p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.page-card>.button {
  margin-top: auto;
}
.page-card>.text-button {
  align-self: center;
}
.view-note {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 25px;
  max-width: 720px;
}
.target-strip {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 20px;
  padding: 0 3px;
  flex-wrap: wrap;
}
.target-strip>span {
  font-size: 14px;
  color: var(--ink);
  background: var(--selected);
  padding: 8px 13px;
  border-radius: 10px;
}
.target-strip p {
  font-size: 14px;
  color: var(--muted);
}
.contact-editor {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 20px 0;
  padding: 20px;
}
.contact-editor legend {
  font-size: 14px;
  padding: 0 8px;
  color: var(--muted);
}
.contact-editor label {
  margin-top: 15px;
}
.contact-editor label:first-of-type {
  margin-top: 0;
}
.request-grid {
  max-width: 850px;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 23px;
}
.request-card>summary {
  padding: 16px 24px;
  min-height: 44px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}
.request-card form {
  padding: 0 24px 25px;
}
.check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin: 18px 0 8px;
}
.check-label input {
  width: 16px;
  height: 16px;
  box-shadow: none;
  flex-shrink: 0;
}
.request-local {
  margin-top: 16px;
  line-height: 1.8;
}
.request-item {
  padding: 24px;
  border-top: 1px solid var(--line);
}
.request-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.request-heading>b {
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.request-badge {
  white-space: nowrap;
  background: var(--selected);
  padding: 6px 9px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
}
.request-badge.in_progress {
  background: var(--selected);
  color: var(--ink);
}
.request-badge.waiting {
  background: var(--selected);
  color: var(--muted);
}
.request-badge.done {
  background: var(--selected);
  color: var(--success);
}
.request-badge.cancelled {
  background: var(--selected);
  color: var(--muted);
}
.request-description {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  margin: 14px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.request-notes {
  margin: 16px 0;
  padding: 14px;
  border-left: 2px solid var(--line);
  background: var(--surface);
}
.request-notes small {
  font-size: 12px;
  color: var(--muted);
}
.request-notes p {
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 6px;
}
.request-notes>div+div {
  margin-top: 15px;
}
.team-controls {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.team-controls summary {
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.team-controls>p {
  line-height: 1.8;
  margin: 14px 0;
}
.team-controls label {
  margin-top: 15px;
}
.team-controls .button {
  margin-top: 15px;
}
.request-grid .list-card {
  padding: 0;
  overflow: hidden;
}
.request-grid .list-card>.card-header {
  padding: 24px;
}
@media(max-width:1120px) {
.page-list {
  grid-template-columns: 1fr;
}
}
@media(max-width:1120px) {
.page-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 20px;
}
}
@media(max-width:1120px) {
.page-card .page-icon {
  grid-row: 1 / 4;
}
}
@media(max-width:1120px) {
.page-card h2, .page-card p {
  grid-column: 2;
}
}
@media(max-width:1120px) {
.page-card .button, .page-card>.text-button, .page-card>small {
  grid-column: 1 / 3;
}
}
@media(max-width:1120px) {
.request-grid {
  grid-template-columns: 1fr;
}
}
@media(max-width:1120px) {
.home-stats {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media(max-width:1120px) {
.dashboard-grid {
  grid-template-columns: 1fr;
}
}
@media(max-width:620px) {
.dashboard-lead {
  padding: 23px;
}
}
@media(max-width:620px) {
.dashboard-actions {
  flex-direction: column;
}
}
@media(max-width:620px) {
.dashboard-actions>.button {
  width: 100%;
}
}
@media(max-width:620px) {
.home-stats {
  gap: 10px;
}
}
@media(max-width:620px) {
.stat-card {
  padding: 18px;
}
}
@media(max-width:620px) {
.stat-card b {
  font-size: 32px;
}
}
@media(max-width:620px) {
.work-filters {
  grid-template-columns: 1fr;
  padding: 0 18px 18px;
}
}
@media(max-width:620px) {
.page-card {
  padding: 22px;
}
}
@media(max-width:620px) {
.request-heading {
  flex-direction: column;
}
}
@media(max-width:620px) {
.request-card>summary {
  padding: 16px 20px;
}
}
@media(max-width:620px) {
.request-card form {
  padding: 0 20px 22px;
}
}
@media(max-width:620px) {
.request-item {
  padding: 20px;
}
}
@media(max-width:620px) {
.target-strip {
  gap: 10px;
}
}
@media(max-width:620px) {
.target-strip p {
  line-height: 1.7;
}
}

.message-action {
  display: block;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface);
  padding: 10px 13px;
  margin-top: 15px;
  cursor: pointer;
}
.plan-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: var(--surface);
  margin-top: 14px;
  white-space: normal;
}
.plan-card p {
  white-space: pre-line;
  font-size: 14px;
  margin: 10px 0;
}
.plan-card .button {
  font-size: 14px;
}
.schedule-editor {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.schedule-editor summary {
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
}
.schedule-editor p {
  margin: 16px 0;
}
.schedule-editor input {
  margin-bottom: 15px;
}
.schedule-editor .button {
  margin-top: 10px;
}
.cancel-plan {
  margin-left: 20px;
}
#calendar-view .view-note {
  padding: 0 24px;
  font-size: 14px;
}
#calendar-list h3 {
  font-size: 18px;
  margin-bottom: 12px;
}
#recent-chats:empty::after {
  content: 'İlk çalışmanız burada görünecek.';
  display: block;
  color: var(--muted);
  font-size: 14px;
  padding: 8px 12px;
}
@media(max-width:620px) {
.tools-nav[open] {
  width: 100%;
}
}
@media(max-width:620px) {
.tools-nav[open] .nav-button {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
  width: 100%;
  font-size: 14px;
}
}
@media(max-width:620px) {
#calendar-view .view-note {
  padding: 0;
  font-size: 14px;
}
}
@media(max-width:620px) {
.message-action {
  font-size: 14px;
}
}

.auth-panel {
  min-height: 100dvh;
  background: var(--paper);
  padding: 36px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 28px;
}
.auth-brand img {
  width: min(240px,100%);
  height: auto;
}
.auth-card {
  width: min(100%,490px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px;
}
.auth-card h1 {
  font-size: 32px;
  line-height: 1.2;
  margin: 14px 0;
  font-weight: 500;
  letter-spacing: -1px;
}
.auth-card>p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.auth-card form label {
  margin-top: 18px;
}
.auth-card form button {
  margin-top: 24px;
}
.auth-card input {
  width: 100%;
}
.auth-demo {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.auth-demo p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 14px;
}
.auth-locked>.sidebar, .auth-locked>main, .auth-locked>#menu-toggle {
  display: none;
}
#auth-notice {
  font-size: 14px;
  line-height: 1.7;
  padding: 14px;
  background: var(--selected);
  border-radius: 10px;
  margin: 18px 0;
}
#auth-notice.error {
  background: var(--selected);
  color: var(--error);
}
.settings-back { margin-bottom:16px; }
.settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 28px;
}
.settings-head h1 {
  font-size: 24px;
  margin: 12px 0;
  font-weight: 500;
}
.settings-head p {
  font-size: 14px;
  color: var(--muted);
}
.org-picker {
  min-width: 180px;
  font-size: 14px;
  color: var(--muted);
}
.org-picker select {
  margin-top: 8px;
}
.settings-tabs button {
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--muted);
  cursor: pointer;
}
.settings-tabs button.selected {
  background: var(--selected);
  color: var(--primary);
  border-color: var(--control-border);
}
.auth-tabs {
  margin: 25px 0 18px;
}
.auth-tabs button {
  flex: 1;
  padding: 11px 8px;
  font-size: 14px;
}
.settings-grid:has(>#team-invite-card[hidden]) { grid-template-columns:1fr; }
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr);
  gap: 24px;
}
.settings-card {
  padding: 27px;
  min-width: 0;
}
.settings-card h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 12px 0 16px;
}
.settings-card>p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}
.settings-card label {
  margin-top: 17px;
}
.settings-card form>.button {
  margin-top: 22px;
}
.settings-card h4 {
  font-size: 14px;
  font-weight: 500;
  margin: 26px 0 10px;
}
.settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.member-row {
  border-top: 1px solid var(--line);
  padding: 19px 0;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.member-info {
  min-width: 0;
  flex: 1;
}
.member-info b {
  font-size: 14px;
  display: block;
  overflow-wrap: anywhere;
}
.member-info small {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.member-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.member-controls select {
  width: auto;
  font-size: 14px;
  padding: 9px;
  max-width: 180px;
}
.member-controls .small {
  font-size: 12px;
  padding: 10px;
}
.member-controls .text-button {
  font-size: 14px;
}
.role-pill, .assessment-status {
  display: inline-block;
  font-size: 14px;
  padding: 8px 11px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--selected);
}
.pending-heading {
  padding-top: 15px;
}
.role-matrix {
  margin-top: 24px;
}
.role-description {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 15px;
  border-top: 1px solid var(--line);
  padding: 15px 0;
}
.role-description b {
  font-size: 14px;
}
.role-description p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}
.settings-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.assessment-note {
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 23px;
}
.assessment-note b {
  font-size: 14px;
}
.assessment-note p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 12px;
}
.assessment-site {
  font-size: 14px;
  overflow-wrap: anywhere;
  margin: 20px 0;
  color: var(--muted);
}
.capability-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid var(--line);
  padding: 20px 0;
  align-items: center;
}
.capability-row b {
  font-size: 14px;
}
.capability-status {
  font-size: 14px;
  text-align: right;
  color: var(--muted);
}
.capability-status.manageable {
  color: var(--muted);
}
.capability-status.human {
  color: var(--muted);
}
.capability-status.unsupported {
  color: var(--muted);
}
.assessment-notes {
  white-space: pre-wrap;
  line-height: 1.8;
  font-size: 14px;
  margin: 20px 0;
  overflow-wrap: anywhere;
}
.settings-card .hint {
  display: block;
  line-height: 1.8;
  margin-top: 14px;
}
.account-settings {
  max-width: 600px;
}
.personal-role {
  font-size: 14px;
  padding: 16px;
  background: var(--selected);
  line-height: 1.8;
  border-radius: 10px;
  margin: 20px 0;
}
.account-settings #logout-button {
  margin-top: 28px;
}
.audit-entry {
  border-top: 1px solid var(--line);
  padding: 23px 0;
}
.audit-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}
.audit-head b {
  font-size: 14px;
  line-height: 1.7;
}
.audit-outcome {
  font-size: 14px;
  background: var(--selected);
  padding: 6px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.audit-outcome.denied {
  background: var(--selected);
  color: var(--muted);
}
.audit-meta {
  color: var(--muted);
  font-size: 12px;
  margin: 9px 0 16px;
}
.change-details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 10px;
  padding: 14px;
}
.change-details summary {
  font-size: 14px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.change-block {
  margin-top: 18px;
}
.change-block>b {
  font-size: 14px;
}
.change-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.change-values>div {
  min-width: 0;
}
.change-values small {
  font-size: 12px;
  color: var(--muted);
}
.change-values pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 6px;
  padding: 12px;
  background: var(--surface);
  border-radius: 10px;
  max-height: 260px;
  overflow: auto;
}
.invite-description {
  font-size: 14px;
  line-height: 1.8;
  background: var(--selected);
  padding: 18px;
  border-radius: 10px;
  margin-top: 20px;
}
#invite-result {
  margin-top: 20px;
}
#invite-link {
  font-size: 14px;
}
#audit-filter {
  max-width: 320px;
  margin: 12px 0 20px;
}
.settings-card [hidden], .auth-card [hidden], .auth-panel[hidden] {
  display: none!important;
}
@media(max-width:1050px) {
.settings-grid {
  grid-template-columns: 1fr;
}
}
@media(max-width:1050px) {
.member-controls {
  width: 100%;
}
}
@media(max-width:1050px) {
.settings-head {
  flex-wrap: wrap;
}
}
@media(max-width:1050px) {
.org-picker {
  width: 100%;
}
}
@media(max-width:1050px) {
.settings-card {
  padding: 23px;
}
}
@media(max-width:620px) {
.auth-card {
  padding: 25px 21px;
}
}
@media(max-width:620px) {
.auth-panel {
  padding-top: 25px;
}
}
@media(max-width:620px) {
.settings-head h1 {
  font-size: 18px;
}
}
@media(max-width:620px) {
.settings-tabs {
  gap: 7px;
}
}
@media(max-width:620px) {
.settings-tabs button {
  font-size: 14px;
  padding: 10px 12px;
}
}
@media(max-width:620px) {
.role-description {
  grid-template-columns: 1fr;
  gap: 7px;
}
}
@media(max-width:620px) {
.settings-form-grid, .change-values {
  grid-template-columns: 1fr;
}
}
@media(max-width:620px) {
.audit-head {
  flex-direction: column;
}
}
@media(max-width:620px) {
.capability-row {
  align-items: start;
}
}
@media(max-width:620px) {
.settings-card {
  padding: 20px;
}
}
.settings-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  flex-direction: row;
  align-items: center;
}
.auth-service-note {
  font-size: 12px!important;
  background: var(--selected);
  padding: 15px;
  border-radius: 10px;
  line-height: 1.8!important;
  margin: 20px 0!important;
}
.website-summary {
  padding: 25px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 20px;
}
.website-summary h2 {
  margin: 9px 0;
}
.website-summary a {
  font-size: 14px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.website-summary p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 12px;
  max-width: 600px;
}
.website-summary>div {
  min-width: 0;
}
.insights-actions {
  min-width: 145px!important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.insights-actions label {
  font-size: 12px;
  margin: 0;
}
.insights-actions select {
  font-size: 14px;
  padding: 9px;
}
.insights-actions button {
  margin-top: 6px;
}
.report-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
}
.report-tabs button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  padding: 11px 16px;
}
.report-tabs button[aria-selected=true] {
  color: var(--ink);
  background: var(--selected);
  border-color: var(--control-border);
}
.report-tabs button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.insights-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 13px;
  margin-bottom: 20px;
}
.report-stat {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}
.report-stat-label {
  font-size: 12px;
  color: var(--muted);
}
.report-stat-value {
  font-size: 24px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.7px;
  overflow-wrap: anywhere;
}
.report-stat-note {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}
.insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.insights-card {
  padding: 25px;
  min-width: 0;
}
.insights-card h3 {
  font-size: 18px;
  font-weight: 550;
  margin: 8px 0 13px;
  color: var(--ink);
}
.insights-card>p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.report-source {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.report-source>div {
  min-width: 0;
}
.report-source b {
  display: block;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.7;
}
.report-source small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.source-status {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--muted);
  background: var(--selected);
  padding: 7px 9px;
  border-radius: 10px;
}
.report-footnote {
  font-size: 10px!important;
  color: var(--muted);
  line-height: 1.9;
  margin: 18px 0 0;
}
.report-change {
  border-bottom: 1px solid var(--line);
  padding: 17px 0;
}
.report-change b {
  font-size: 14px;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.report-change p {
  font-size: 14px;
  line-height: 1.7;
  margin: 7px 0;
  color: var(--muted);
}
.report-change small {
  font-size: 12px;
  color: var(--muted);
}
.report-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 35px 16px 25px;
  gap: 13px;
}
.report-empty>span {
  font-size: 24px;
  color: var(--muted);
}
.report-empty b {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.report-empty p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  max-width: 360px;
}
.behavior-note {
  margin-top: 20px;
}
#insights-view [hidden] {
  display: none!important;
}
@media(max-width:1050px) {
.insights-stats {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media(max-width:1050px) {
.insights-grid {
  grid-template-columns: 1fr;
}
}
@media(max-width:620px) {
.website-summary {
  padding: 20px;
  flex-direction: column;
  gap: 17px;
}
}
@media(max-width:620px) {
.insights-actions {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
}
@media(max-width:620px) {
.insights-actions select {
  width: auto;
  flex: 1;
}
}
@media(max-width:620px) {
.insights-actions button {
  width: 100%;
  text-align: left;
}
}
@media(max-width:620px) {
.report-tabs {
  gap: 6px;
}
}
@media(max-width:620px) {
.report-tabs button {
  font-size: 14px;
  padding: 10px 12px;
}
}
@media(max-width:620px) {
.report-stat {
  padding: 17px;
  gap: 11px;
}
}
@media(max-width:620px) {
.report-stat-value {
  font-size: 24px;
}
}
@media(max-width:620px) {
.insights-stats {
  gap: 10px;
}
}
@media(max-width:620px) {
.insights-card {
  padding: 20px;
}
}
@media(max-width:620px) {
.source-status {
  font-size: 14px;
}
}
@media(max-width:620px) {
.report-source {
  gap: 8px;
}
}
@media(max-width:620px) {
.website-summary p {
  font-size: 14px;
}
}
@media(max-width:620px) {
.insights-card h3 {
  font-size: 18px;
}
}
.workspace-examples {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:100%;
  max-width:680px;
  margin:32px auto 0;
}
.workspace-examples button {
  text-align:left;
  border-color:var(--line);
  padding:16px;
  background:var(--surface);
  border-radius:var(--radius-card);
}
.workspace-examples b,.workspace-examples small { display:block; font-size:14px; }
.workspace-examples b { color:var(--ink); font-weight:650; }
.workspace-examples small { color:var(--muted); margin-top:8px; }
.workspace-examples button:hover:not(:disabled) { background:var(--selected); border-color:var(--control-border); }
.report-question-card {
  margin-top: 22px;
}
.report-question-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 19px;
}
.report-question-grid button {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 16px;
  text-align: left;
  border-radius: 10px;
  color: var(--muted);
}
.report-question-grid button b {
  display: block;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.8;
}
.report-question-grid button small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}
.report-measurement-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.report-measurement-row b {
  display: block;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.report-measurement-row small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}
.chat-report {
  padding: 23px;
  line-height: 1.8;
}
.chat-report-head b {
  display: block;
  font-size: 18px;
  color: var(--ink);
  font-weight: 550;
}
.chat-report-head small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}
.chat-report-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 20px;
}
.chat-report-stats>div {
  padding: 16px;
  background: var(--selected);
  border-radius: 10px;
  min-width: 0;
}
.chat-report-stats span {
  font-size: 14px;
  color: var(--muted);
  display: block;
}
.chat-report-stats strong {
  font-size: 18px;
  font-weight: 500;
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.chat-report-stats small {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-top: 8px;
}
.chat-report-section {
  margin-top: 22px;
}
.chat-report-section h3 {
  font-size: 18px;
  font-weight: 600;
}
.chat-report-section>p, .chat-report-item p {
  font-size: 14px;
  color: var(--muted);
  white-space: pre-wrap;
}
.chat-report-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.chat-report-item b {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.chat-report-item p {
  margin-top: 4px;
}
.chat-report-notes {
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  margin-top: 22px;
}
.chat-report-notes p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin: 6px 0;
}
.chat-report-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}
.chat-report-sources span {
  font-size: 14px;
  color: var(--muted);
  background: var(--selected);
  border-radius: 10px;
  padding: 4px 7px;
}
.chat-report-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 15px;
}
@media(max-width:620px) {
.workspace-examples { grid-template-columns:1fr; gap:8px; margin-top:24px; max-width:400px; }
.workspace-examples button { padding:12px 16px; }
.workspace-examples small { margin-top:4px; }
}
@media(max-width:620px) and (max-height:740px) {
.chat-welcome { padding:8px 0; }
.welcome-symbol { flex-shrink:0; }
.workspace-examples { margin-top:16px; }
.workspace-examples small { display:none; }
}
@media(max-width:620px) {
.report-question-grid {
  grid-template-columns: 1fr;
}
}
@media(max-width:620px) {
.chat-report {
  padding: 17px;
}
}
@media(max-width:620px) {
.chat-report-head b {
  font-size: 14px;
}
}
@media(max-width:620px) {
.chat-report-stats>div {
  padding: 12px;
}
}
@media(max-width:620px) {
.chat-report-stats strong {
  font-size: 18px;
}
}
.image-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.image-dialog {
  width: min(1040px,calc(100vw - 32px));
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 25px;
  background: var(--surface);
  color: var(--ink);
}
.image-dialog::backdrop {
  background: rgba(32,35,43,.24);
}
.image-dialog-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.image-dialog-header .text-button {
  font-size: 24px;
}
.image-editor-grid {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(260px,1fr);
  gap: 26px;
}
.image-stage {
  background: var(--ink);
  border-radius: 14px;
  min-height: 230px;
  display: grid;
  place-items: center;
  padding: 10px;
  overflow: hidden;
}
.image-stage img {
  max-width: 100%;
  max-height: 55vh;
  object-fit: contain;
}
.image-editor-grid form>label {
  margin-top: 14px;
}
.image-editor-grid select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.image-crop-controls {
  margin-top: 16px;
  padding: 12px;
  background: var(--selected);
  border-radius: 10px;
}
.image-crop-controls label {
  margin: 10px 0 0;
  display: flex;
  justify-content: space-between;
}
.image-crop-controls input {
  padding: 0;
  box-shadow: none;
  accent-color: var(--primary);
}
.image-crop-controls input:disabled {
  opacity: .35;
}
.image-assistant {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.image-assistant summary {
  cursor: pointer;
  font-weight: 650;
  margin-bottom: 15px;
}
.image-assistant .button {
  margin-top: 12px;
}
.image-save-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0 10px;
}
.image-editor-grid .hint {
  line-height: 1.7;
  margin-top: 10px;
}
.image-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 16px;
}
.image-library-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.image-library-item img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: var(--ink);
  border-radius: 10px;
}
.image-library-item:hover {
  border-color: var(--line);
}
@media(max-width:650px) {
.image-dialog {
  padding: 17px;
  width: calc(100vw - 16px);
  max-height: 94vh;
}
}
@media(max-width:650px) {
.image-editor-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
}
@media(max-width:650px) {
.image-stage {
  min-height: 150px;
}
}
@media(max-width:650px) {
.image-stage img {
  max-height: 30vh;
}
}
@media(max-width:650px) {
.image-toolbar {
  padding: 12px;
}
}
@media(max-width:650px) {
.image-save-actions .button {
  width: 100%;
}
}
.pending-image-card { display:flex; gap:8px; align-items:center; max-width:100%; width:320px; padding:8px; margin-bottom:8px; border:1px solid var(--line); background:var(--paper); border-radius:14px; }
.pending-image-card img { width:48px; height:48px; flex-shrink:0; object-fit:contain; background:var(--surface); border-radius:8px; }
.pending-image-card>div { flex:1; min-width:0; }.pending-image-card b { display:block; font-size:14px; overflow-wrap:anywhere; }.pending-image-card .text-button { padding:0; font-size:12px; }
.preview-tabs {
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 0 20px 15px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.changes-content {
  padding: 24px;
  min-width: 0;
}
.changes-content label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}
.changes-content select {
  width: 100%;
  max-width: 100%;
}
#comparison-context {
  white-space: pre-line;
  margin: 16px 0;
  line-height: 1.7;
}
.comparison-field {
  margin: 22px 0;
  min-width: 0;
}
.comparison-field h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.comparison-pair {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
}
.comparison-cell {
  min-width: 0;
  border: 1px solid var(--line,var(--line));
  border-radius: 10px;
  padding: 12px;
}
.comparison-label {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
  opacity: .7;
}
.comparison-value p {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  max-height: 360px;
  overflow: auto;
}
.comparison-value img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 10px;
}
.comparison-unchanged {
  padding: 14px 0;
  font-size: 14px;
}
.comparison-empty {
  font-size: 14px;
}
.review-summary {
  padding: 18px 24px;
  border-top: 1px solid var(--line,var(--line));
  font-size: 14px;
}
.review-summary p {
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.work-summary {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line,var(--line));
  border-radius: 10px;
  line-height: 1.6;
}
.work-summary b {
  font-size: 14px;
}
.work-summary p {
  margin: 8px 0;
  font-size: 14px;
}
@media(max-width:600px) {
.comparison-pair {
  grid-template-columns: minmax(0,1fr);
}
}
@media(max-width:600px) {
.changes-content {
  padding: 18px;
}
}
@media(max-width:600px) {
.review-summary {
  padding: 16px 18px;
}
}
@media(max-width:600px) {
.preview-tabs #version-badge {
  width: 100%;
}
}
.area-selection-toolbar {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  align-items: center;
}
.area-selection-toolbar[hidden], .selected-area-context[hidden] {
  display: none;
}
.area-selection-toolbar .button {
  flex-shrink: 0;
  font-size: 14px;
}
.area-selection-toolbar p {
  margin: 0;
  line-height: 1.6;
}
.selected-area-context {
  background: var(--selected);
  border: 1px solid var(--control-border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.selected-area-context>div {
  min-width: 0;
  flex: 1;
}
.selected-area-context b {
  font-size: 14px;
  line-height: 1.6;
}
.selected-area-context p {
  font-size: 14px;
  line-height: 1.6;
  margin: 6px 0 0;
  max-height: 100px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.selected-area-context button {
  font-size: 14px;
  flex-shrink: 0;
}
@media(max-width:620px) {
.area-selection-toolbar {
  display: block;
  padding: 12px 18px;
}
}
@media(max-width:620px) {
.area-selection-toolbar p {
  margin-top: 10px;
}
}
@media(max-width:620px) {
.selected-area-context {
  flex-wrap: wrap;
}
}
@media(max-width:620px) {
.selected-area-context button {
  margin-left: auto;
}
}
.knowledge-card {
  margin-top: 24px;
  padding: 28px;
  min-width: 0;
}
.knowledge-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 30px;
}
.knowledge-grid h3, .knowledge-list-heading h3 {
  font-size: 18px;
  font-weight: 550;
}
.knowledge-grid section {
  min-width: 0;
}
.knowledge-card input, .knowledge-card textarea, .knowledge-card select {
  max-width: 100%;
}
.knowledge-document, .knowledge-fact {
  padding: 18px;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-wrap: anywhere;
}
.knowledge-document b, .knowledge-fact h4 {
  font-size: 14px;
}
.knowledge-document details, .knowledge-fact details {
  font-size: 14px;
  margin: 14px 0;
}
.knowledge-document-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 250px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.7;
}
.knowledge-fact-value {
  white-space: pre-wrap;
  line-height: 1.8;
  font-size: 14px;
}
.knowledge-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.knowledge-document .text-button {
  margin-right: 15px;
}
.knowledge-badge {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 10px;
  background: var(--selected);
  color: var(--muted);
  font-size: 12px;
}
.knowledge-badge.verified {
  background: var(--selected);
  color: var(--success);
}
.knowledge-badge.expired, .knowledge-badge.source_archived {
  background: var(--selected);
  color: var(--warning);
}
.knowledge-badge.archived {
  background: var(--selected);
  color: var(--muted);
}
.knowledge-list-heading {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  flex-wrap: wrap;
}
.knowledge-list-heading select {
  width: auto;
}
.knowledge-fact blockquote {
  margin: 10px 0;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  white-space: pre-wrap;
  line-height: 1.7;
}
@media(max-width:760px) {
.knowledge-grid {
  grid-template-columns: minmax(0,1fr);
}
}
@media(max-width:760px) {
.knowledge-card {
  padding: 18px;
}
}
@media(max-width:760px) {
.knowledge-actions {
  gap: 12px;
}
}
.work-filters {
  display: grid;
  grid-template-columns: minmax(0,1fr)170px 200px;
  gap: 12px;
  padding: 0 24px 24px;
}
@media(max-width:900px) {
.work-filters {
  grid-template-columns: 1fr;
}
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 16px;
}
.media-documents {
  display: grid;
  gap: 16px;
}
.media-item {
  border: 1px solid var(--border,var(--line));
  border-radius: 10px;
  padding: 16px;
  min-width: 0;
  display: grid;
  gap: 10px;
  overflow-wrap: anywhere;
}
.media-item img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--ink);
}
.media-item input {
  width: 100%;
  min-width: 0;
}
.media-item label {
  margin: 0;
  font-size: 14px;
}
.media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
#media-dialog h3 {
  margin: 26px 0 15px;
}
#media-upload-form {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}
#media-upload-form input {
  max-width: 100%;
}
.seo-dialog {
  max-width: 720px;
}
.search-preview {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 18px 0;
  overflow-wrap: anywhere;
}
.search-preview small {
  display: block;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 10px;
}
#search-preview-title {
  font-size: 18px;
  line-height: 1.3;
  color: var(--muted);
}
#search-preview-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  margin: 10px 0 0;
}
#seo-suggestion-tools {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
#seo-suggestion-tools button {
  margin-top: 12px;
}
.chat-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.message .message-text.support-message { background:transparent; padding:0; border:0; }
.support-chat-card {
  background:var(--surface);
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--line,var(--line));
  border-radius: 14px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.support-card-heading { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:650; color:var(--primary); }
.support-chat-card p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.support-chat-card .request-badge {
  justify-self: start;
}
.support-chat-card .message-action {
  justify-self: start;
}
.support-chat-card > button { min-height:44px; }
.support-summary {font-size:14px;line-height:1.6;}
.support-details { min-width:0; }
.support-details summary { min-height:44px; display:list-item; padding:12px 0; cursor:pointer; font-size:14px; line-height:20px; font-weight:600; }
.support-details summary::marker {color:var(--primary);}
.support-details[open] { display:grid; gap:8px; }
.inspection-details { margin-top:8px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:14px; line-height:1.55; }
.inspection-details summary { min-height:44px; display:list-item; padding:12px 0; cursor:pointer; font-weight:650; color:var(--primary); }
.inspection-details[open] { display:grid; gap:8px; }
.inspection-details p { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.inspection-details ul { margin:4px 0 0; padding-left:22px; }
.inspection-details li { margin:4px 0; overflow-wrap:anywhere; }
.inspection-status { font-weight:650; }
.inspection-source,.inspection-copy,.inspection-scope { color:var(--muted); }
.inspection-files,.inspection-findings,.inspection-limits { min-width:0; }
.inspection-finding { margin-top:8px; padding:10px 12px; border-left:2px solid var(--primary); background:var(--paper); border-radius:0 8px 8px 0; }
.inspection-finding p { margin-top:4px; }
.inspection-details .hint { margin:4px 0 0; }
.quote-proposal > button { justify-self:start; }
.support-reply:empty {
  display: none;
}
.support-reply summary {
  min-height:44px; padding:12px 0; line-height:20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}
.support-reply form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.support-reply textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.support-note {
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.support-chat-card b {
  overflow-wrap: anywhere;
}