/* Complements the shared Mightora design tokens. Shared UI owns brand colours. */
:root {
  --fb-primary: var(--primary);
  --fb-accent: var(--accent);
  --brand-purple: var(--primary);
  --brand-accent: var(--accent);
  --brand-accent-h: var(--accent-hover);
  --surface: var(--bg-card);
  --surface2: var(--bg-hover);
  --btn-bg: var(--accent-hover);
  --btn-hover: var(--success);
  --textarea-bg: var(--bg-card);
  --textarea-text: var(--text);
  --quick-nav-h: 52px;
}
[data-theme="dark"] { --btn-bg: var(--accent); --btn-hover: var(--accent-hover); }
[data-theme="dark"] :where(main) .btn-compare,
[data-theme="dark"] :where(main) .radio-btn.active,
[data-theme="dark"] :where(main) .radio-btn:hover { color: #111827; }
/* Ensure the shared component's icon remains visible without an icon font. */
mightora-header .mobile-menu-btn .fa-bars::before { content: "☰"; font-style: normal; }
body { font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column; }
main { flex: 1;
      padding: 2rem 1.5rem;
      max-width: 1400px;
      margin: 0 auto;
      width: 100%; }
:where(main) h1 { font-size: 1.75rem;
      font-weight: 700;
      margin-bottom: 0.25rem; }
:where(main) .subtitle { color: var(--text-muted);
      font-size: 0.95rem;
      margin-bottom: 2rem; }
:where(main) .controls { display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: flex-end;
      margin-bottom: 1.25rem; }
:where(main) .control-group { display: flex;
      flex-direction: column;
      gap: 0.3rem; }
:where(main) label { font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em; }
:where(main) select { background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.9rem;
      padding: 0.5rem 0.75rem;
      cursor: pointer;
      outline: none;
      transition: border-color 0.15s; }
:where(main) select:focus { border-color: var(--brand-accent); }
:where(main) .radio-group { display: flex;
      gap: 0.5rem; }
:where(main) .radio-btn { background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.85rem;
      padding: 0.45rem 0.8rem;
      transition: all 0.15s;
      user-select: none; }
:where(main) .radio-btn.active,
:where(main) .radio-btn:hover { background: var(--brand-accent);
      border-color: var(--brand-accent);
      color: #fff; }
:where(main) .btn-compare { background: var(--btn-bg);
      border: none;
      border-radius: 8px;
      color: #fff;
      cursor: pointer;
      font-size: 0.95rem;
      font-weight: 600;
      padding: 0.6rem 1.5rem;
      transition: background 0.15s, transform 0.1s;
      white-space: nowrap; }
:where(main) .btn-compare:hover { background: var(--btn-hover); }
:where(main) .btn-compare:active { transform: scale(0.98); }
:where(main) .btn-clear { background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 500;
      padding: 0.6rem 1rem;
      transition: all 0.15s; }
:where(main) .btn-clear:hover { border-color: var(--text-muted); color: var(--text); }
:where(main) .editors { display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.25rem; }
@media (max-width: 768px){:where(main) .editors { grid-template-columns: 1fr; }}
:where(main) .editor-pane { display: flex;
      flex-direction: column;
      gap: 0.4rem; }
:where(main) .editor-pane label { font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-muted); }
:where(main) textarea { background: var(--textarea-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--textarea-text);
      font-family: var(--font-mono);
      font-size: 0.85rem;
      line-height: 1.6;
      padding: 0.75rem 1rem;
      resize: vertical;
      width: 100%;
      min-height: 280px;
      outline: none;
      tab-size: 2;
      transition: border-color 0.15s; }
:where(main) textarea:focus { border-color: var(--brand-accent); }
:where(main) .diff-section { margin-top: 0.5rem; }
:where(main) .diff-header { display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.75rem; }
:where(main) .diff-title { font-size: 1rem;
      font-weight: 600; }
:where(main) .diff-stats { font-size: 0.82rem;
      color: var(--text-muted); }
:where(main) .stat-add { color: #4ade80; }
:where(main) .stat-del { color: #f87171; }
:where(main) #diff-output { border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border); }
[data-theme="dark"] :where(main) .d2h-wrapper { background: var(--surface);
      color: var(--text); }
[data-theme="dark"] :where(main) .d2h-file-header,
[data-theme="dark"] :where(main) .d2h-code-header { background: #1e1e2e;
      border-color: var(--border);
      color: var(--text); }
[data-theme="dark"] :where(main) .d2h-code-line,
[data-theme="dark"] :where(main) .d2h-code-side-line { background: var(--surface); }
[data-theme="dark"] :where(main) td.d2h-code-linenumber { background: #1a1a2e;
      border-color: var(--border);
      color: var(--text-muted); }
[data-theme="dark"] :where(main) .d2h-del { background: rgba(239, 68, 68, 0.15); }
[data-theme="dark"] :where(main) .d2h-del td.d2h-code-linenumber { background: rgba(239, 68, 68, 0.2); }
[data-theme="dark"] :where(main) .d2h-ins { background: rgba(34, 197, 94, 0.12); }
[data-theme="dark"] :where(main) .d2h-ins td.d2h-code-linenumber { background: rgba(34, 197, 94, 0.2); }
[data-theme="dark"] :where(main) .d2h-change { background: rgba(251, 191, 36, 0.12); }
[data-theme="dark"] :where(main) .d2h-change td.d2h-code-linenumber { background: rgba(251, 191, 36, 0.2); }
[data-theme="dark"] :where(main) del { background: rgba(239, 68, 68, 0.3); }
[data-theme="dark"] :where(main) ins { background: rgba(34, 197, 94, 0.25); }
[data-theme="dark"] :where(main) .d2h-file-list { background: var(--surface2); border-color: var(--border); }
[data-theme="dark"] :where(main) .d2h-file-list li { border-color: var(--border); }
:where(main) .placeholder { background: var(--surface);
      border: 2px dashed var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 0.9rem;
      padding: 3rem;
      text-align: center; }
:where(main) .placeholder svg { margin-bottom: 0.75rem;
      opacity: 0.4; }
:where(main) .no-diff { background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 0.9rem;
      padding: 1.5rem;
      text-align: center; }
:where(main) .no-diff .check { color: #4ade80; font-size: 1.5rem; }
body { background:var(--bg) }
main { max-width:1500px;padding:48px 28px }
:where(main) h1 { font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.05;letter-spacing:-.045em;margin:18px 0 }
:where(main) h1 span { color:var(--accent) }
[data-theme=light] :where(main) h1 span { color:var(--accent) }
:where(main) .eyebrow { font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--text-muted) }
:where(main) .subtitle { max-width:640px;line-height:1.7 }
:where(main) section { scroll-margin-top:calc(var(--header-h) + var(--quick-nav-h) + 20px);margin:30px 0 65px }
:where(main) h2 { font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.03em;margin:12px 0 }
:where(main) h3 { margin:12px 0 }
:where(main) p,
:where(main) li { line-height:1.7 }
:where(main) a { color:var(--accent) }
[data-theme=light] :where(main) a { color:var(--accent) }
:where(main) button,
:where(main) .button { border:1px solid var(--border);border-radius:7px;background:var(--surface2);color:var(--text);padding:10px 14px;font:inherit;font-size:14px;cursor:pointer;text-decoration:none }
:where(main) button:hover,
:where(main) .button:hover { border-color:var(--accent) }
:where(main) .toolbar { display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 }
:where(main) .toolbar label { text-transform:none;letter-spacing:0;display:flex;gap:7px;align-items:center }
:where(main) input[type=text] { background:var(--surface);color:var(--text);padding:11px;border:1px solid var(--border);border-radius:6px;width:min(600px,100%) }
:where(main) input[type=file] { font-size:12px;margin:8px 0;max-width:100% }
nav.quick-jump-nav { display:flex;align-items:center;position:sticky;top:var(--header-h);z-index:90;background:var(--bg-card);border-bottom:1px solid var(--border);height:auto;min-height:52px;gap:20px;flex-wrap:wrap;justify-content:flex-start;padding:12px 25px }
nav.quick-jump-nav a { display:inline-flex;align-items:center;min-height:32px;padding:4px 8px;border-radius:var(--radius-sm);font-size:13px;color:var(--text);white-space:nowrap;text-decoration:none }
nav.quick-jump-nav a:hover { color:var(--accent-hover);background:var(--bg-hover) }
:where(main) .theme-btn { margin-left:auto }
:where(main) .project-pane { background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;min-width:0 }
:where(main) .project-pane textarea { min-height:200px;margin-top:12px }
:where(main) .project-pane select { max-width:100% }
:where(main) .frame-wrap { overflow:auto;margin-top:16px;background:#fff;border-radius:6px }
:where(main) iframe { display:block;width:100%;height:380px;border:0;background:white }
:where(main) pre.console { height:140px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--textarea-bg);padding:12px;font:12px/1.7 monospace }
:where(main) .note { font-size:13px;color:var(--text-muted);margin:12px 0 }
:where(main) .faq { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px }
:where(main) .faq article { padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px }
:where(main) ol { padding-left:25px }
:where(main) #diff-output { overflow:auto }
.skip { position:absolute;left:-9999px }
.skip:focus { left:12px;top:12px;z-index:1000;background:var(--surface);padding:12px }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:3px solid var(--fb-accent);outline-offset:2px }
@media(max-width:768px){main { padding:30px 16px }
:where(main) .faq { grid-template-columns:1fr }
:where(main) .controls { gap:12px }
:where(main) .project-pane { padding:12px }
nav.quick-jump-nav { gap:14px }}
@media(prefers-reduced-motion:reduce){* { scroll-behavior:auto!important;transition:none!important }}
:where(main) .btn-compare { background: var(--btn-bg); color: #fff; }
:where(main) .btn-compare:hover { background: var(--btn-hover); }
:where(main) .radio-btn.active, :where(main) .radio-btn:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
[data-theme="dark"] :where(main) .btn-compare, [data-theme="dark"] :where(main) .radio-btn.active, [data-theme="dark"] :where(main) .radio-btn:hover { color: #111827; }
[data-theme="light"] :where(main) .stat-add { color: #047857; }
[data-theme="light"] :where(main) .stat-del { color: #b91c1c; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--fb-accent); outline-offset: 2px; }