/* MarkdownMagic.app styles */
:root {
  --bg: #0b1220;
  --bg-elev: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #60a5fa;
  --accent-2: #22d3ee;
  --border: #1f2937;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
  :root { --bg:#f8fafc; --bg-elev:#ffffff; --text:#0f172a; --muted:#475569; --border:#e2e8f0; }
}

[data-theme="light"] { --bg:#f8fafc; --bg-elev:#ffffff; --text:#0f172a; --muted:#475569; --border:#e2e8f0; }
[data-theme="dark"] { --bg:#0b1220; --bg-elev:#0f172a; --text:#e5e7eb; --muted:#9ca3af; --border:#1f2937; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Fluid type */
h1 { font-size: clamp(1.25rem, 2vw + 1rem, 2rem); margin: 0; }
h2 { font-size: clamp(1.1rem, 1.2vw + 0.9rem, 1.4rem); margin: 0; }
h3 { font-size: clamp(1rem, 0.8vw + 0.8rem, 1.2rem); margin-top: .5rem; }

.site-header, .site-footer { background: var(--bg-elev); border-bottom: 1px solid var(--border); }
.site-footer { border-bottom: 0; border-top: 1px solid var(--border); padding: 1rem; text-align: center; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: .75rem; }
.tagline { color: var(--muted); margin: 0; font-size: .9rem; }
.top-nav { display: flex; align-items: center; gap: .75rem; }
.link { color: var(--text); text-decoration: none; opacity: .85; }
.link:hover { opacity: 1; text-decoration: underline; }

.skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; padding: .5rem; background: var(--accent); color: #001018; }

.app { padding: 1rem; display: grid; gap: 1rem; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; background: var(--bg-elev); border: 1px solid var(--border); padding: .5rem; border-radius: .75rem; }
.toolbar .spacer { flex: 1; }

.panels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: .75rem; display: flex; flex-direction: column; min-height: 40vh; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }

#editor { width: 100%; flex: 1; background: transparent; border: 0; color: var(--text); padding: .75rem; font: 400 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; resize: none; outline: none; }
.preview { padding: 1rem; overflow: auto; max-height: 70vh; }
.preview h1, .preview h2, .preview h3, .preview h4 { scroll-margin-top: 5rem; }

.insights { display: grid; grid-template-rows: auto auto 1fr auto; gap: 1rem; padding: .75rem; }
.keyword-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.keyword-list li { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem .5rem; border: 1px dashed var(--border); border-radius: .5rem; cursor: pointer; }
.keyword-list li:hover { background: rgba(96,165,250,.08); }

.btn { background: linear-gradient(180deg, #1f2937, #0b1220); color: #e5e7eb; border: 1px solid var(--border); padding: .4rem .7rem; border-radius: .5rem; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.btn:hover { border-color: #334155; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.ghost { background: transparent; }

.ad-slot { display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--border); border-radius: .5rem; min-height: 48px; }
.ad-header { margin: 0 1rem; height: 60px; }
.ad-vertical { min-height: 250px; }

.drawer { position: fixed; inset: auto 0 0 0; background: var(--bg-elev); border-top: 1px solid var(--border); max-height: 70vh; transform: translateY(100%); transition: transform .35s ease; overflow: auto; }
.drawer[open], .drawer:not([hidden]) { transform: translateY(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.drawer-body { padding: 1rem; display: grid; gap: 1rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.code { background: #0a0f1a; color: #e5e7eb; border: 1px solid var(--border); padding: .75rem; border-radius: .5rem; overflow: auto; white-space: pre-wrap; word-break: break-word; min-height: 160px; max-height: 45vh; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.5; }

.status { position: fixed; right: 1rem; bottom: 1rem; background: var(--bg-elev); border: 1px solid var(--border); padding: .5rem .75rem; border-radius: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); min-width: 200px; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
.status.show { opacity: 1; transform: translateY(0); }

/* Skeleton loader */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: .5rem;
  min-height: 72px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile */
@media (max-width: 1024px) {
  .panels { grid-template-columns: 1fr; }
  .panel { min-height: 30vh; }
}

/* Focus visible */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Highlighted keyword */
mark.kw { background: rgba(34,211,238,.15); outline: 1px dashed rgba(34,211,238,.6); }

/* Humanize per-sentence diff styling */
.diff-item { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; background: var(--panel, #fff); }
.diff-item.selected { outline: 2px solid #3b82f6; outline-offset: 2px; }
.sent { margin: 6px 0; line-height: 1.6; }
.sent .label { display: inline-block; font-size: 0.85rem; color: var(--muted, #64748b); margin-right: 8px; min-width: 3rem; }
.diff-ins { background: rgba(16,185,129,0.18); text-decoration: none; border-bottom: 2px solid rgba(16,185,129,0.45); border-radius: 3px; padding: 0 2px; }
.diff-del { background: rgba(239,68,68,0.15); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.btn-inline { padding: 2px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: var(--btn-bg, #f8fafc); color: inherit; cursor: pointer; font-size: 0.9rem; }
.btn-inline:hover { background: var(--btn-bg-hover, #f1f5f9); }
.ml-auto { margin-left: auto; }

.info-text { font-size: 14px; color: var(--muted); margin: 0 0 16px; line-height: 1.4; }

.plag-list { list-style: none; padding: 0; margin: .5rem 0 0 0; display: grid; gap: .5rem; }
.plag-item { padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--bg-elev); }
.plag-meta { font-size: .85rem; color: var(--muted); margin-top: .25rem; }
.plag-snippet { margin-top: .35rem; font-size: .95rem; line-height: 1.5; }
.plag-snippet.muted { color: var(--muted); }
mark.plag-hit { background: rgba(250,204,21,0.25); outline: 1px dashed rgba(250,204,21,0.6); border-radius: 3px; padding: 0 2px; }
.plag-dups { margin-top: .35rem; }
.plag-dups > summary { cursor: pointer; color: var(--muted); }
.plag-dups ul { margin: .35rem 0 0 1rem; padding: 0; list-style: disc; color: inherit; }
.plag-summary{ margin: 4px 0 12px; font-weight: 600; }
.plag-summary .plag-meta { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); color: var(--surface); font-size: 11px; margin-left: 4px; cursor: help; }

/* Header layout improvements */
.site-header .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.only-mobile { display: none; }

/* Mobile navigation toggle */
@media (max-width: 768px) {
  .only-mobile { display: inline-flex; }
  .top-nav { display: none; position: absolute; right: 1rem; top: calc(100% + .5rem); flex-direction: column; gap: .5rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: .75rem; padding: .5rem; box-shadow: 0 10px 28px rgba(0,0,0,.25); z-index: 20; }
  .site-header { position: sticky; top: 0; z-index: 15; }
  .site-header .site-header-inner { position: relative; }
  #primaryNav[data-open="true"] { display: flex; }
}

/* Panels layout switching */
.panels[data-layout="editor"] { grid-template-columns: 1fr; }
.panels[data-layout="editor"] .center, .panels[data-layout="editor"] .right { display: none; }
.panels[data-layout="preview"] { grid-template-columns: 1fr; }
.panels[data-layout="preview"] .left, .panels[data-layout="preview"] .right { display: none; }
.panels[data-layout="split"] { grid-template-columns: 1fr 1fr; }
.panels[data-layout="split"] .right { display: none; }
/* NEW: ensure triple layout shows all three panels */
.panels[data-layout="triple"] { grid-template-columns: 1fr 1fr 1fr; }
.panels[data-layout="triple"] .left, .panels[data-layout="triple"] .center, .panels[data-layout="triple"] .right { display: flex; }

/* Modal popup for Humanize */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; background: rgba(2,6,23,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 50; opacity: 0; pointer-events: none; transform: scale(1.01); transition: opacity .25s ease, transform .25s ease; }
.modal[open] { opacity: 1; pointer-events: auto; transform: scale(1); }
.modal .modal-dialog { width: min(1200px, 96vw); max-height: 86vh; display: grid; grid-template-rows: auto 1fr; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 1rem; box-shadow: var(--shadow-2); overflow: hidden; }
.modal .drawer-head { display:flex; align-items:center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--glass-border); }
.modal .drawer-body { padding: 1rem; display: grid; gap: 1rem; overflow: auto; }

/* Reuse drawer control layout for modal */
.drawer .controls, .modal .controls { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .5rem 1rem; }
.drawer .controls > label, .modal .controls > label { white-space: normal; overflow: visible; }
.drawer #humanizeProgress, .modal #humanizeProgress { grid-column: 1 / -1; min-height: 1.25rem; }
.drawer #runHumanize, .modal #runHumanize { justify-self: end; }
@media (max-width: 640px) {
  .drawer .controls, .modal .controls { grid-template-columns: 1fr; }
  .drawer #runHumanize, .modal #runHumanize { justify-self: stretch; }
}

/* Split pane responsive */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Drawer structure (assure basic spacing if not defined) */
.drawer .drawer-head { display:flex; align-items:center; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.drawer .drawer-body { padding: .75rem; display: grid; gap: .75rem; }

/* Buttons baseline */
/* Contrast and outline adjustments */
:root { --btn-bg:#111827; --btn-fg:#e5e7eb; --border-strong:#0a0f1a; }
[data-theme="light"] { --btn-bg:#111827; --btn-fg:#e5e7eb; --border-strong:#cbd5e1; }
[data-theme="dark"] { --btn-bg:#111827; --btn-fg:#e5e7eb; --border-strong:#0a0f1a; }

/* Make button text visible and borders stronger */
.btn { color: var(--btn-fg) !important; background: var(--btn-bg); border-color: var(--border-strong) !important; }

/* Darken outlines of boards/cards */
.toolbar { border-color: var(--border-strong) !important; }
.panel { border-color: var(--border-strong) !important; }
.panel-head { border-bottom-color: var(--border-strong) !important; }
.drawer { border-top-color: var(--border-strong) !important; }
.code { border-color: var(--border-strong) !important; }
.status { border-color: var(--border-strong) !important; }
.diff-item { border-color: var(--border-strong) !important; }
.plag-item { border-color: var(--border-strong) !important; }
.keyword-list li { border-color: var(--border-strong) !important; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* --- Modern UI/UX Enhancements: Glass, Shadows, Animations, Typography --- */
/* Palette and glass tokens */
:root {
  --accent: #4f46e5;          /* indigo */
  --accent-2: #06b6d4;        /* teal/cyan */
  --accent-3: #a855f7;        /* purple */
  --glass-bg: rgba(15, 23, 42, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
  --shadow-1: 0 10px 30px rgba(2, 6, 23, 0.45);
  --shadow-2: 0 18px 50px rgba(2, 6, 23, 0.55);
}

[data-theme="light"] {
  --accent: #0ea5e9;          /* sky for light */
  --accent-2: #22c55e;        /* green accent in light */
  --accent-3: #7c3aed;        /* purple */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(15, 23, 42, 0.08);
  --shadow-1: 0 10px 30px rgba(2, 6, 23, 0.10);
  --shadow-2: 0 18px 50px rgba(2, 6, 23, 0.14);
}

/* Smooth color transitions for theme switch */
html, body, .panel, .toolbar, .drawer, .status, .ad-slot, .btn { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }

/* Glassmorphism: panels, toolbars, drawers, toasts, ads */
.panel, .toolbar, .drawer, .status, .ad-slot { 
  background: var(--glass-bg) !important; 
  border-color: var(--glass-border) !important; 
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--shadow-1);
}
.panel:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.panel { transition: transform .25s ease, box-shadow .25s ease; }

/* Toolbar: sticky top on desktop, floating bottom on mobile */
.toolbar { position: sticky; top: .75rem; z-index: 9; }
@media (max-width: 768px) {
  .toolbar { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; top: auto; border-radius: 1rem; box-shadow: 0 18px 40px rgba(2,6,23,.5); }
  body, .app { padding-bottom: 84px; }
}

/* Buttons: bold, animated, fun to click */
.btn { 
  font-weight: 600; letter-spacing: .2px; 
  padding: .6rem .9rem; border-radius: .75rem; 
  background: linear-gradient(180deg, rgba(31,41,55,.9), rgba(2,6,23,.9));
  border: 1px solid var(--border-strong);
  box-shadow: 0 6px 16px rgba(3,7,18,.25);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease, border-color .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 12px 28px rgba(3,7,18,.38), 0 0 0 3px rgba(34,211,238,.15); filter: brightness(1.05); }
.btn:active { transform: translateY(0) scale(.98); filter: brightness(.98); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 26px rgba(14,165,233,.35); }
.btn.ghost { background: rgba(255,255,255,0.06); }

/* Links and nav hover effects */
.link { transition: color .2s ease, text-shadow .2s ease; }
.link:hover { color: var(--accent-2); text-shadow: 0 0 12px rgba(34,211,238,.45); }

/* Editor/Preview: inviting and focused */
#editor { border-radius: .5rem; caret-color: var(--accent-2); transition: box-shadow .2s ease, background-color .2s ease; }
#editor:focus { box-shadow: 0 0 0 3px rgba(34,211,238,.25) inset; background: rgba(255,255,255,0.02); }
.preview { border-radius: .5rem; background: rgba(255,255,255,0.02); }

/* Insights: rich cards with subtle hover */
.insights { gap: 1rem; }
.insights .counts, .insights .readability { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.insights .counts > div, .insights .readability > div { 
  background: rgba(255,255,255,0.04); 
  border: 1px solid var(--glass-border);
  border-radius: .75rem; padding: .6rem .7rem; 
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; 
  transition: transform .15s ease, box-shadow .2s ease;
}
.insights .counts > div:hover, .insights .readability > div:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 20px rgba(2,6,23,.35); }

/* Icons for insight items via pseudo elements */
.insights .counts > div::before, .insights .readability > div::before { font-size: 1rem; opacity: .9; }
.counts > div:nth-child(1)::before { content: "📝"; }
.counts > div:nth-child(2)::before { content: "🔤"; }
.counts > div:nth-child(3)::before { content: "✒️"; }
.counts > div:nth-child(4)::before { content: "📄"; }
.readability > div:nth-child(1)::before { content: "📚"; }
.readability > div:nth-child(2)::before { content: "🎓"; }
.readability > div:nth-child(3)::before { content: "🧠"; }
.readability > div:nth-child(4)::before { content: "⏱️"; }
.readability > div:nth-child(5)::before { content: "🎤"; }

/* Ads: premium yet discreet */
.ad-slot { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-style: dashed; }
.ad-slot.ad-insights { margin-top: 1rem; min-height: 250px; }

/* Typography: bold headings with modern sans */
body { font-family: 'Inter', 'Inter var', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }
.site-title, h1, h2, h3 { font-family: 'Urbanist', 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; font-weight: 700; letter-spacing: .2px; }

/* Help tips micro-interactions */
/* Tooltip icon base */
.help-tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: var(--accent,#22d3ee); color: #001018; font-weight: 700; font-size: 11px; margin-left: .35rem; cursor: help; box-shadow: 0 4px 10px rgba(34,211,238,.35); }
.help-tip[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; background: var(--bg-elev,#0b1220); border: 1px solid var(--border,#243041); border-radius: .5rem; padding: .35rem .5rem; font-size: .85rem; white-space: nowrap; color: var(--text,#eef2ff); top: 100%; z-index: 3; }
.help-tip:hover::after { opacity: 1; transform: translate(-50%, 4px); }

/* Keyword list hover */
#keywordList li:hover { background: rgba(34,211,238,.06); border-radius: .25rem; }

.help-tip:hover { transform: translateY(-1px) scale(1.05); }
.help-tip[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; background: var(--bg-elev); border: 1px solid var(--border); border-radius: .5rem; padding: .35rem .5rem; font-size: .85rem; white-space: nowrap; color: var(--text); top: 100%; }
.help-tip:hover::after { opacity: 1; transform: translate(-50%, 4px); }

/* Keyword hover glow */
.keyword-list li:hover { box-shadow: 0 0 0 2px rgba(34,211,238,.25) inset; }

/* Extra-visible focus rings */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Expanded insights */
.all-insights { margin-top: .5rem; border-top: 1px dashed var(--border,#ccc); padding-top: .5rem; display: grid; gap: .35rem; }
.detail-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem; font-size: .9rem; }
.detail-row label { color: var(--muted,#555); }
.detail-row output { font-variant-numeric: tabular-nums; }
.insights-controls { margin: .5rem 0; }
.insights-controls .btn { font-size: .85rem; }
.all-insights[hidden] { display: none !important; }
.inline.small { font-size: .8rem; }

/* Keyword tabs */
.kw-tabs { display:inline-flex; gap:.25rem; margin-bottom:.25rem; }
.kw-tabs .btn.tiny { font-size:.75rem; padding:.2rem .4rem; }
.kw-tabs .btn[aria-selected="true"] { background: var(--accent,#444); color:#fff; }

/* Keyword list alignment */
#keywordList { list-style:none; padding-left:0; }
#keywordList li{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
#keywordList li span:first-child{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#keywordList li span:last-child{ flex:0 0 auto; color:var(--muted, #666); font-variant-numeric: tabular-nums; }

/* Config grid checkboxes alignment */
.config-inline .cfg-grid label input[type="checkbox"]{ margin-right:.35rem; vertical-align:middle; }
.config-inline { margin-top: .35rem; }
.config-inline .cfg-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .35rem .5rem; align-items: center; }
.config-inline label { display: flex; align-items: center; justify-content: space-between; gap: .35rem; font-size: .8rem; color: var(--muted,#99a3b3); }
.config-inline input[type=number] { width: 80px; padding: .2rem .35rem; background: var(--bg-elev,#0b1220); border: 1px solid var(--border,#243041); border-radius: .35rem; color: var(--text,#e5e7eb); }
.config-inline .btn.tiny { height: 28px; align-self: end; }
@media (max-width: 1200px){ .config-inline .cfg-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.panels[data-insights-hidden] .right { display: none !important; }
/* Adjust grids when insights hidden */
.panels[data-layout="triple"][data-insights-hidden] { grid-template-columns: 1fr 1fr; }
.panels[data-layout="split"][data-insights-hidden] { grid-template-columns: 1fr 1fr; }
.panels[data-layout="editor"][data-insights-hidden] { grid-template-columns: 1fr; }
.panels[data-layout="preview"][data-insights-hidden] { grid-template-columns: 1fr; }
.ad-slot.ad-main { margin: 1rem 1rem 0; min-height: 64px; }
.markdown-guide { margin: 1rem; }
.markdown-guide details { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem 1rem; background: var(--panel); }
.markdown-guide summary { cursor: pointer; font-weight: 600; }
.markdown-guide .guide-body { margin-top: .5rem; font-size: .95rem; color: var(--muted-2, var(--muted)); }
.markdown-guide code { background: color-mix(in oklab, var(--panel), var(--border) 50%); padding: .1rem .3rem; border-radius: .25rem; }
.markdown-guide pre { background: var(--panel); border: 1px solid var(--border); border-radius: .5rem; padding: .75rem 1rem; overflow: auto; }
.markdown-guide .guide-body ul { margin-left: 1.2rem; }
.markdown-guide .guide-body li { margin: .25rem 0; }

/* iOS-like high-contrast buttons (overrides) */
:root {
  --btn-primary: #0a84ff; /* iOS system blue (dark) */
  --btn-primary-hover: #2b95ff;
  --btn-primary-active: #0070e0;
  --btn-tint-bg: rgba(10,132,255,.16);
  --btn-tint-bg-hover: rgba(10,132,255,.24);
  --btn-tint-border: rgba(10,132,255,.55);
  --btn-tint-border-hover: rgba(10,132,255,.75);
}
[data-theme="light"] {
  --btn-primary: #007aff; /* iOS system blue (light) */
  --btn-primary-hover: #1a88ff;
  --btn-primary-active: #006ae6;
  --btn-tint-bg: rgba(0,122,255,.12);
  --btn-tint-bg-hover: rgba(0,122,255,.2);
  --btn-tint-border: rgba(0,122,255,.45);
  --btn-tint-border-hover: rgba(0,122,255,.65);
}

/* Base button: tinted (higher contrast on dark/light) */
.btn {
  background: var(--btn-tint-bg) !important;
  color: var(--btn-primary) !important;
  border-color: var(--btn-tint-border) !important;
  box-shadow: 0 6px 16px rgba(10,132,255,.18);
}
.btn:hover { 
  background: var(--btn-tint-bg-hover) !important; 
  border-color: var(--btn-tint-border-hover) !important; 
  filter: none !important; 
  transform: translateY(-1px) scale(1.01);
}
.btn:active { 
  background: var(--btn-tint-bg) !important; 
  transform: translateY(0) scale(.98); 
  box-shadow: 0 2px 8px rgba(10,132,255,.2); 
}

/* Filled primary button */
.btn.primary, .btn[aria-variant="primary"] {
  background: var(--btn-primary) !important;
  color: #ffffff !important;
  border-color: var(--btn-primary) !important;
  box-shadow: 0 10px 26px rgba(0,122,255,.28);
}
.btn.primary:hover, .btn[aria-variant="primary"]:hover { background: var(--btn-primary-hover) !important; }
.btn.primary:active, .btn[aria-variant="primary"]:active { background: var(--btn-primary-active) !important; }

/* Ghost (clear) button */
.btn.ghost {
  background: transparent !important;
  color: var(--btn-primary) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn.ghost:hover { background: var(--btn-tint-bg) !important; border-color: var(--btn-tint-border) !important; }

/* Inline buttons (diff actions) */
.btn-inline {
  background: var(--btn-tint-bg) !important;
  border-color: var(--btn-tint-border) !important;
  color: var(--btn-primary) !important;
}
.btn-inline:hover { background: var(--btn-tint-bg-hover) !important; }

/* Disabled state stays readable */
.btn:disabled, .btn[disabled] { opacity: .7 !important; filter: grayscale(0) !important; }

/* Strong focus ring matching iOS tint */
.btn:focus-visible { outline-color: var(--btn-primary) !important; }

/* Secondary (gray) and Destructive (red) variants */
:root {
  /* Secondary gray */
  --btn-secondary: #64748b; /* slate-500 */
  --btn-secondary-hover: #71829a;
  --btn-secondary-active: #556274;
  --btn-secondary-tint: rgba(100,116,139,.14);
  --btn-secondary-tint-hover: rgba(100,116,139,.22);
  --btn-secondary-border: rgba(100,116,139,.45);
  --btn-secondary-border-hover: rgba(100,116,139,.65);
  /* Destructive red (iOS system red) */
  --btn-danger: #ff453a; /* dark */
  --btn-danger-hover: #ff5b51;
  --btn-danger-active: #ff2f24;
  --btn-danger-tint: rgba(255,69,58,.16);
  --btn-danger-tint-hover: rgba(255,69,58,.24);
  --btn-danger-border: rgba(255,69,58,.55);
  --btn-danger-border-hover: rgba(255,69,58,.75);
}
[data-theme="light"] {
  --btn-danger: #ff3b30; /* light */
  --btn-danger-hover: #ff5349;
  --btn-danger-active: #ff2a1f;
}

/* Secondary filled */
.btn.secondary {
  background: var(--btn-secondary) !important;
  color: #fff !important;
  border-color: var(--btn-secondary) !important;
  box-shadow: 0 8px 22px rgba(2,6,23,.25);
}
.btn.secondary:hover { background: var(--btn-secondary-hover) !important; }
.btn.secondary:active { background: var(--btn-secondary-active) !important; }

/* Destructive filled */
.btn.destructive {
  background: var(--btn-danger) !important;
  color: #fff !important;
  border-color: var(--btn-danger) !important;
  box-shadow: 0 8px 22px rgba(255,69,58,.28);
}
.btn.destructive:hover { background: var(--btn-danger-hover) !important; }
.btn.destructive:active { background: var(--btn-danger-active) !important; }

/* Ghost variants for secondary and destructive */
.btn.secondary.ghost {
  background: transparent !important;
  color: var(--btn-secondary) !important;
  border-color: transparent !important;
}
.btn.secondary.ghost:hover { background: var(--btn-secondary-tint) !important; border-color: var(--btn-secondary-border) !important; }

.btn.destructive.ghost {
  background: transparent !important;
  color: var(--btn-danger) !important;
  border-color: transparent !important;
}
.btn.destructive.ghost:hover { background: var(--btn-danger-tint) !important; border-color: var(--btn-danger-border) !important; }

/* Inline destructive style support */
.btn-inline.destructive {
  background: var(--btn-danger-tint) !important;
  border-color: var(--btn-danger-border) !important;
  color: var(--btn-danger) !important;
}
.btn-inline.destructive:hover { background: var(--btn-danger-tint-hover) !important; }
.btn:disabled, .btn[disabled] { opacity: .7 !important; filter: grayscale(0) !important; }

/* Strong focus ring matching iOS tint */
.btn:focus-visible { outline-color: var(--btn-primary) !important; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ... existing code ... */