/* === JW Sync Design Tokens v2 === */
:root {
  --color-bg:               #060d19;
  --color-surface:          #0b1628;
  --color-surface-hover:    #0f1e37;
  --color-surface-elevated: #132240;
  --color-border:           rgba(255,255,255,.07);
  --color-border-strong:    rgba(255,255,255,.13);
  --color-border-orange:    rgba(234,88,12,.25);
  --color-text-primary:     #e8f0ff;
  --color-text-secondary:   rgba(232,240,255,.55);
  --color-text-muted:       rgba(232,240,255,.50);
  --color-orange:           #ea580c;
  --color-orange-light:     #fb923c;
  --color-green:            #22c55e;
  --color-blue:             #3b82f6;
  --text-xs:11px; --text-sm:12px; --text-base:13px; --text-md:14px;
  --text-lg:16px; --text-xl:18px; --text-2xl:22px; --text-3xl:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:9999px;
  --t-fast:150ms ease; --t-normal:200ms ease;
}
html { font-family: 'Inter', system-ui, sans-serif; font-size: var(--text-base); }
body { background: var(--color-bg); color: var(--color-text-primary);
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* =============================================================================
   JW Sync Beta — styles.css  (Navy Blue Theme)
   ============================================================================= */

/* ── Global overflow lock ──────────────────────────────────────────────────── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ── Section 1: App styles ───────────────────────────────────────────────── */

        /* ── Scrollbars ── */
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #0d2550; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #163870; }

        /* ── Animations ── */
        @keyframes fadeIn    { from { opacity: 0; }                            to { opacity: 1; } }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideUp   { from { opacity: 0; transform: translateY(8px);  } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideUpIn { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
        .anim-fade       { animation: fadeIn    0.2s ease both; }
        .anim-slide-down { animation: slideDown 0.25s ease both; }
        .anim-slide-up   { animation: slideUp   0.3s ease both; }
        .anim-slide-up-in { animation: slideUpIn 0.3s cubic-bezier(0.16,1,0.3,1) both; }

        /* ── Sticky navbar ── */
        #jw-navbar {
            position: sticky; top: 0; z-index: 40;
            background: rgba(6,13,25,.97);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--color-border-strong);
            box-shadow: 0 1px 0 var(--color-border);
        }
        .nav-btn {
            display: inline-flex; align-items: center; gap: var(--sp-1);
            font-size: 11px; font-weight: 600; height: 28px;
            padding: 4px 10px; border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,.07);
            background: transparent; color: var(--color-text-muted);
            cursor: pointer; white-space: nowrap; text-decoration: none;
            transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
        }
        .nav-btn:hover { color: var(--color-text-secondary); border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.04); }
        .nav-btn.active { color: var(--color-orange-light); border-color: var(--color-border-orange); background: rgba(234,88,12,.08); }
        .nav-btn.has-errors { color: #f87171; border-color: rgba(248,113,113,.35); }
        
.nav-btn-browse {
            color: #fff !important;
            background: rgba(234,88,12,.18) !important;
            border-color: rgba(234,88,12,.7) !important;
            box-shadow: 0 0 7px rgba(234,88,12,.45), inset 0 0 6px rgba(234,88,12,.08);
            animation: browse-pulse 2.4s ease-in-out infinite;
        }
        .nav-btn-browse:hover {
            background: rgba(234,88,12,.32) !important;
            border-color: #ea580c !important;
            box-shadow: 0 0 14px rgba(234,88,12,.7), inset 0 0 8px rgba(234,88,12,.15);
            animation: none;
        }
        @keyframes browse-pulse {
            0%,100% { box-shadow: 0 0 5px rgba(234,88,12,.35), inset 0 0 5px rgba(234,88,12,.06); border-color: rgba(234,88,12,.55) !important; }
            50%      { box-shadow: 0 0 12px rgba(234,88,12,.7), inset 0 0 8px rgba(234,88,12,.12); border-color: rgba(234,88,12,.9) !important; }
        }
        .nav-btn-community {
            border-color: var(--color-border-strong);
            color: var(--color-text-secondary); background: transparent; box-shadow: none;
        }
        .nav-btn-community:hover {
            background: var(--color-surface-hover);
            border-color: rgba(255,255,255,.2); color: var(--color-text-primary); box-shadow: none;
        }
        .nav-select {
            background: transparent; border: 1px solid var(--color-border-strong);
            color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 600;
            padding: 6px 8px; border-radius: var(--radius-sm); outline: none; cursor: pointer;
            height: 32px; max-width: 140px;
            transition: color var(--t-fast), border-color var(--t-fast);
        }
        .nav-select:hover { color: var(--color-text-primary); border-color: rgba(255,255,255,.2); }

        /* ── Modal close button ── */
        .modal-close {
            width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
            border-radius: 8px; border: 1px solid #0d2550; background: #071a38;
            color: #5898c8; transition: all 0.15s; flex-shrink: 0; font-size: 18px; line-height: 1; cursor: pointer;
        }
        .modal-close:hover { background: #ef4444; border-color: #ef4444; color: white; }

        /* ── Help / Changelog modal tabs ── */
        .help-tab {
            padding: 7px 14px; font-size: 12px; font-weight: 700;
            border-radius: 8px; transition: all 0.15s; color: #3282bc; cursor: pointer;
        }
        .help-tab.active { background: #0d2548; color: #d0e8f8; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
        .help-tab:hover:not(.active) { color: #62a6d8; }

        /* ── Log panel ── */
        #log-panel {
            position: fixed; bottom: 0; left: 0; right: 0; z-index: 35;
            background: #020a16; border-top: 1px solid #0b2e58;
            box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
            display: flex; flex-direction: column;
            max-height: 38vh; min-height: 180px;
        }
        #log-panel.anim-slide-up-in { animation: slideUpIn 0.3s cubic-bezier(0.16,1,0.3,1) both; }

        /* ── Privacy badge pill ── */
        .privacy-pill {
            display: flex; align-items: center; gap: var(--sp-1);
            font-size: var(--text-xs); font-weight: 600; color: var(--color-green);
            background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.18);
            padding: 4px 10px; border-radius: var(--radius-pill);
        }
        .privacy-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-green); animation: pulse 2.5s infinite; }
        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

        /* ── Feature card hover ── */
        .feature-card { transition: border-color 0.2s, box-shadow 0.2s; }
        .feature-card:hover { box-shadow: 0 0 0 1px rgba(234,88,12,0.2); }

        /* ── Section label ── */
        .section-label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #1d619a; }

        /* ── Body padding for log panel ── */
        body { padding-bottom: 0; }

        /* ── Mobile sticky merge/download bar ── */
        @media (max-width: 1023px) {
            #mob-bar {
                position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
                background: rgba(2,8,20,0.98); border-top: 1px solid #0b2e58;
                padding: 10px 16px; display: flex; align-items: center; gap: 10px;
                box-shadow: 0 -4px 20px rgba(0,0,0,0.7);
                transform: translateY(0); transition: transform 0.25s ease;
            }
            #mob-bar.mob-hidden { transform: translateY(100%); }
            .mob-label { flex: 1; min-width: 0; }
            .mob-label-title { font-size: 13px; font-weight: 700; color: #d0e8f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .mob-label-sub { font-size: 11px; color: #1d619a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .mob-btn { padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 800; border: none; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
            .mob-btn-merge { background: #ea580c; color: white; }
            .mob-btn-merge:hover { background: #fb923c; }
            .mob-btn-merge:disabled { background: #0b2e58; color: #1d619a; cursor: not-allowed; }
            .mob-btn-download { background: #16a34a; color: white; text-decoration: none; display: inline-flex; align-items: center; }
            .mob-btn-download:hover { background: #15803d; }
            body.mob-bar-on { padding-bottom: 68px; }
        }
        @media (min-width: 1024px) { #mob-bar { display: none !important; } }

        /* ── Light mode ── */
        body.light {
          --color-bg:               #f0f4f8;
          --color-surface:          #ffffff;
          --color-surface-hover:    #f1f5f9;
          --color-surface-elevated: #ffffff;
          --color-border:           rgba(0,0,0,.08);
          --color-border-strong:    rgba(0,0,0,.13);
          --color-border-orange:    rgba(234,88,12,.3);
          --color-text-primary:     #1e293b;
          --color-text-secondary:   rgba(15,23,42,.65);
          --color-text-muted:       rgba(15,23,42,.65);
          background: #f0f4f8;
          color: #1e293b;
        }
        body.light #jw-navbar { background: rgba(240,244,248,0.96); border-bottom-color: rgba(0,0,0,.1); }
        body.light .nav-btn { background: #fff; border-color: #cbd5e1; color: #1e293b; }
        body.light .nav-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }
        body.light .nav-btn.active { background: rgba(234,88,12,0.1); color: #134678; border-color: rgba(234,88,12,0.4); }
        body.light .nav-select { background: #fff; border-color: #cbd5e1; color: #1e293b; }
        body.light .modal-close { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
        body.light #site-nav { background: rgba(240,244,248,.96); border-bottom-color: rgba(0,0,0,.09); }
        body.light .site-nav-logo { color: #ea580c; }
        body.light .site-nav-link { color: #475569; }
.nav-lang-select {
  margin-left: 12px;
  background: rgba(71,85,105,.25);
  border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  margin-left: 4px;
}
.nav-lang-select:hover { background: rgba(71,85,105,.4); }
.nav-lang-select option { background: #0c1322; color: #e7eaf3; }
body.light .nav-lang-select { background: rgba(11,46,88,.08); border-color: rgba(11,46,88,.15); color: #475569; }
        body.light .site-nav-link:hover { color: #1e293b; }
        body.light .site-nav-link.active { color: #1e293b; background: rgba(0,0,0,.06); }
        body.light #log-panel { background: #f8fafc; border-top-color: #e2e8f0; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
        body.light #mob-bar { background: rgba(240,244,248,.97); border-top-color: rgba(0,0,0,.09); }
        body.light .mob-btn-merge:disabled { background: #e2e8f0; color: #94a3b8; }
        body.light .stat-bar-track { background: #e2e8f0; }
        body.light .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; }
        body.light .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        body.light .help-tab:hover:not(.active) { color: #1d4ed8; }

        /* ── Drag-drop highlight ── */
        .drop-active { border-color: #fb923c !important; background: rgba(251,146,60,0.07) !important; box-shadow: 0 0 0 3px rgba(251,146,60,0.15); }

        /* ── Merge preview diff badge ── */
        .diff-add { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); color: #4ade80; padding: 1px 7px; border-radius: 12px; font-size: 11px; font-weight: 700; }
        .diff-skip { background: rgba(161,161,170,0.1); border: 1px solid rgba(161,161,170,0.2); color: #71717a; padding: 1px 7px; border-radius: 12px; font-size: 11px; font-weight: 700; }

        /* ── QR code modal ── */
        #qr-canvas { image-rendering: pixelated; }

        /* ── Undo banner ── */
        .undo-banner { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 45; background: var(--color-surface-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: var(--sp-2) var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); box-shadow: 0 8px 24px rgba(0,0,0,.45); white-space: nowrap; animation: slideUp .25s ease both; font-size: var(--text-sm); }

        /* ── Side-by-side comparison ── */
        .compare-col { flex: 1; min-width: 0; overflow-y: auto; }
        .compare-note-match { border-left: 3px solid #4ade80; }
        .compare-note-diff { border-left: 3px solid #fb923c; }
        .compare-note-only { border-left: 3px solid #60a5fa; }

        /* ── Stats bars ── */
        .stat-bar-track { background: #0b2e58; border-radius: 4px; height: 6px; overflow: hidden; }
        .stat-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }

        /* ── Theme toggle ── */
        .theme-toggle { width: 38px; height: 22px; border-radius: 11px; background: #0d2550; border: 1px solid #163870; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
        .theme-toggle.light-on { background: #3282bc; border-color: #3282bc; }
        .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #5898c8; transition: transform 0.2s, background 0.2s; }
        .theme-toggle.light-on .theme-toggle-knob { transform: translateX(16px); background: #fff; }

        /* ── Simple Mode ── */
        .simple-step {
            background: var(--color-surface); border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-lg); padding: var(--sp-6); text-align: center;
            transition: border-color var(--t-normal), background var(--t-normal);
            overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box;
        }
        .simple-step.active { border-color: var(--color-border-orange); background: rgba(234,88,12,.04); }
        .simple-step.done { border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.03); }
        .simple-step-num {
            width: 40px; height: 40px; border-radius: var(--radius-pill);
            font-size: var(--text-lg); font-weight: 800;
            display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-4);
            border: 2px solid currentColor;
        }
        .simple-drop-zone {
            border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md);
            padding: var(--sp-6) var(--sp-5); cursor: pointer;
            transition: all var(--t-normal); text-align: center; margin-top: var(--sp-4);
            display: block; width: 100%; max-width: 100%; box-sizing: border-box; background: transparent;
        }
        .simple-drop-zone:hover, .simple-drop-zone.active { border-color: var(--color-orange); background: rgba(234,88,12,.04); border-style: dashed; }
        .simple-drop-zone.done { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.04); border-style: solid; border-width: 1px; }
        .simple-drop-zone > div, .simple-drop-zone > span { word-break: break-word; overflow-wrap: anywhere; max-width: 100%; }
        .simple-merge-btn {
            width: 100%; padding: 16px var(--sp-6); border-radius: var(--radius-md);
            font-size: var(--text-xl); font-weight: 800; letter-spacing: .01em;
            background: linear-gradient(135deg, #ea580c, #c94408); color: white;
            border: none; cursor: pointer;
            box-shadow: 0 4px 16px rgba(234,88,12,.25);
            transition: opacity var(--t-fast), box-shadow var(--t-fast);
        }
        .simple-merge-btn:hover { opacity: .92; box-shadow: 0 6px 20px rgba(234,88,12,.35); }
        .simple-merge-btn:disabled { background: var(--color-surface); color: var(--color-text-muted); box-shadow: none; cursor: not-allowed; opacity: 1; }
        .simple-download-btn {
            width: 100%; padding: 16px var(--sp-6); border-radius: var(--radius-md);
            font-size: var(--text-xl); font-weight: 800;
            background: #16a34a; color: white; border: none; cursor: pointer;
            box-shadow: 0 4px 16px rgba(22,163,74,.2);
            text-decoration: none; display: block; text-align: center;
            transition: background var(--t-fast), box-shadow var(--t-fast);
        }
        .simple-download-btn:hover { background: #15803d; box-shadow: 0 6px 20px rgba(22,163,74,.28); }
        .simple-arrow { font-size: 22px; text-align: center; color: var(--color-border-strong); line-height: 1; margin: var(--sp-1) 0; }
        .simple-mode-toggle {
            display: flex; align-items: center; gap: 10px;
            background: var(--color-surface); border: 1px solid var(--color-border-orange);
            border-radius: var(--radius-md); padding: 12px 20px;
            color: var(--color-orange-light); font-size: var(--text-md); font-weight: 700;
            cursor: pointer; box-shadow: none; transition: all var(--t-fast); width: 100%;
        }
        .simple-mode-toggle:hover { background: rgba(234,88,12,.06); }
        .simple-mode-toggle.exit { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text-secondary); }
        .simple-mode-toggle.exit:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }

        /* ── Loading Screen ── */
        #jws-loading {
            position: fixed; inset: 0; background: var(--color-bg);
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
            z-index: 99999; transition: opacity 0.4s ease;
        }
        #jws-loading.hide { opacity: 0; pointer-events: none; }
        #jws-loading .ls-spinner {
            width: 48px; height: 48px; border: none;
            border-radius: var(--radius-md);
            background: rgba(234,88,12,.1); border: 1px solid rgba(234,88,12,.25);
            display: flex; align-items: center; justify-content: center;
            animation: ls-pulse 2s ease-in-out infinite;
        }
        @keyframes ls-pulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(234,88,12,.3); opacity: 1; }
            50%      { box-shadow: 0 0 0 8px rgba(234,88,12,0); opacity: .8; }
        }
        @keyframes ls-spin { to { transform: rotate(360deg); } }
        #jws-loading h2 { font-size: var(--text-xl); font-weight: 700; color: var(--color-text-primary); margin: 0; letter-spacing: -.3px; }
        #jws-loading p  { font-size: var(--text-base); color: var(--color-text-muted); margin: 0; }
        #jws-loading .ls-dots { display: flex; gap: var(--sp-1); }
        #jws-loading .ls-dots span {
            width: 4px; height: 4px; border-radius: var(--radius-pill);
            background: rgba(234,88,12,.5); animation: ls-fade 1.4s infinite;
        }
        #jws-loading .ls-dots span:nth-child(2) { animation-delay: .2s; }
        #jws-loading .ls-dots span:nth-child(3) { animation-delay: .4s; }
        @keyframes ls-fade {
            0%,60%,100% { opacity: .2; transform: scale(.85); }
            30%          { opacity: 1;  transform: scale(1); }
        }

        /* ── Beta environment banner ── */
        #beta-banner {
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:#0a1626; border-bottom:1px solid var(--color-border-orange);
  color:var(--color-text-secondary); text-align:center;
  font-size:var(--text-xs); font-weight:600; letter-spacing:.06em;
  padding:5px 16px; display:flex; align-items:center;
  justify-content:center; gap:var(--sp-2); box-shadow:none;
}
#beta-banner .beta-pill {
  background:rgba(234,88,12,.12); border:1px solid var(--color-border-orange);
  border-radius:var(--radius-pill); padding:2px 10px;
  font-size:var(--text-xs); color:var(--color-orange-light);
}
#beta-banner a { color:var(--color-orange-light); text-decoration:none; font-weight:600; }
#beta-banner a:hover { color:#fff; text-decoration:underline; }
        body { padding-top: 32px !important; }

/* ── Section 2: Forum styles ─────────────────────────────────────────────── */

:root {
    --bg:      #020a16;
    --bg2:     #061428;
    --bg3:     #0a1e3a;
    --border:  #0d2550;
    --border2: #163870;
    --text:    #d0e8f8;
    --muted:   #3a7abf;
    --accent:  #ea580c;
    --accent2: #fb923c;
    --green:   #22c55e;
    --blue:    #60a5fa;
    --red:     #f87171;
    --amber:   #fbbf24;
}
#forum-view * {margin:0; padding:0; box-sizing:border-box;}
body.is-forum {font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; line-height:1.6;}
#forum-view ::-webkit-scrollbar {width:5px;}
#forum-view ::-webkit-scrollbar-track {background:transparent;}
#forum-view ::-webkit-scrollbar-thumb {background:var(--border2); border-radius:99px;}
#forum-view .wrap {max-width:860px; margin:0 auto; padding:0 16px;}
#forum-view header {border-bottom:1px solid var(--border); background:rgba(2,10,22,0.96); backdrop-filter:blur(12px); position:sticky; top:0; z-index:100;}
#forum-view .header-inner {display:flex; align-items:center; justify-content:space-between; padding:13px 0;}
#forum-view .logo-area {display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
#forum-view .logo-icon {width:34px; height:34px; border-radius:8px; background:#ea580c; display:flex; align-items:center; justify-content:center; font-size:17px;}
#forum-view .logo-name {font-size:15px; font-weight:700; letter-spacing:-0.3px;}
#forum-view .logo-sub {font-size:11px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
#forum-view .back-btn {display:flex; align-items:center; gap:5px; color:var(--muted); text-decoration:none; font-size:13px; padding:6px 12px; border:1px solid var(--border); border-radius:6px; transition:all 0.15s;}
#forum-view .back-btn:hover {color:var(--text); border-color:var(--border2);}
#forum-view .hero {padding:28px 0 20px; border-bottom:1px solid var(--border);}
#forum-view .hero h1 {font-size:clamp(20px,4vw,30px); font-weight:700; letter-spacing:-0.4px; margin-bottom:5px;}
#forum-view .hero h1 span {color:var(--accent);}
#forum-view .hero p {color:var(--muted); font-size:14px;}
#forum-view .hero-actions {display:flex; gap:9px; margin-top:16px; flex-wrap:wrap;}
#forum-view .btn {display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all 0.15s; font-family:'Inter',system-ui,sans-serif;}
#forum-view .btn-primary {background:var(--accent); color:#fff;}
#forum-view .btn-primary:hover:not(:disabled) {background:var(--accent2);}
#forum-view .btn-primary:disabled {opacity:0.5; cursor:not-allowed;}
#forum-view .btn-ghost {background:transparent; color:var(--muted); border:1px solid var(--border2);}
#forum-view .btn-ghost:hover {color:var(--text); background:var(--bg3);}
#forum-view .btn-danger {background:rgba(248,113,113,0.1); color:var(--red); border:1px solid rgba(248,113,113,0.25);}
#forum-view .btn-danger:hover {background:rgba(248,113,113,0.2);}
#forum-view .badge {display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:700;}
#forum-view .badge-green {background:rgba(34,197,94,0.1); color:var(--green); border:1px solid rgba(34,197,94,0.2);}
#forum-view .badge-blue {background:rgba(96,165,250,0.1); color:var(--blue); border:1px solid rgba(96,165,250,0.2);}
#forum-view .badge-amber {background:rgba(251,191,36,0.1); color:var(--amber); border:1px solid rgba(251,191,36,0.2);}
#forum-view .badge-red {background:rgba(248,113,113,0.1); color:var(--red); border:1px solid rgba(248,113,113,0.2);}
#forum-view .post-card {border:1px solid var(--border); border-radius:10px; padding:16px; transition:border-color 0.15s; background:var(--bg2);}
#forum-view .post-card:hover {border-color:var(--border2);}
#forum-view .post-card.pinned {border-color:rgba(234,88,12,0.3); background:rgba(234,88,12,0.04);}
#forum-view .post-card.featured {border-color:rgba(251,191,36,0.3); background:rgba(251,191,36,0.03);}
#forum-view .post-title {font-size:15px; font-weight:600; color:var(--text); line-height:1.4; margin-bottom:6px;}
#forum-view .post-title a {color:inherit; text-decoration:none;}
#forum-view .post-title a:hover {color:var(--accent2);}
#forum-view .post-meta {font-size:12px; color:var(--muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
#forum-view .post-body {font-size:14px; line-height:1.7; color:#a4ccec;}
#forum-view .post-body p {margin-bottom:12px;}
#forum-view .post-body p:last-child {margin-bottom:0;}
#forum-view .post-body pre {background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:12px; overflow-x:auto; font-size:13px;}
#forum-view .reply-card {border-left:3px solid var(--border2); padding:12px 16px; background:var(--bg2); border-radius:0 8px 8px 0; margin-bottom:8px;}
#forum-view .reply-card.op-reply {border-left-color:var(--accent);}
#forum-view .textarea {width:100%; background:var(--bg2); border:1px solid var(--border2); border-radius:8px; color:var(--text); padding:12px; font-size:14px; font-family:'Inter',system-ui,sans-serif; resize:vertical; min-height:100px; outline:none; transition:border-color 0.15s;}
#forum-view .textarea:focus {border-color:var(--accent);}
#forum-view .input {background:var(--bg2); border:1px solid var(--border2); border-radius:8px; color:var(--text); padding:8px 12px; font-size:14px; outline:none; transition:border-color 0.15s; width:100%;}
#forum-view .input:focus {border-color:var(--accent);}
#forum-view .pagination {display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
#forum-view .page-btn {padding:5px 10px; border-radius:6px; font-size:13px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:all 0.15s;}
#forum-view .page-btn:hover, #forum-view .page-btn.active {background:var(--accent); border-color:var(--accent); color:#fff;}
#forum-view .vote-btn {display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:all 0.15s;}
#forum-view .vote-btn:hover {border-color:var(--accent); color:var(--accent);}
#forum-view .vote-btn.voted {background:rgba(234,88,12,0.1); border-color:var(--accent); color:var(--accent);}
#forum-view .empty-state {text-align:center; padding:48px 16px; color:var(--muted);}
#forum-view .empty-state svg {opacity:0.3; margin:0 auto 16px;}
#forum-view .divider {border:none; border-top:1px solid var(--border); margin:20px 0;}
#forum-view .tag {display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; background:var(--bg3); color:var(--muted); border:1px solid var(--border);}
#forum-view .modal-overlay {position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:200; display:flex; align-items:center; justify-content:center; padding:16px;}
#forum-view .modal-box {background:var(--bg2); border:1px solid var(--border2); border-radius:12px; padding:24px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto;}
#forum-view .modal-title {font-size:18px; font-weight:700; margin-bottom:16px;}
#forum-view .char-count {font-size:11px; color:var(--muted); text-align:right; margin-top:4px;}
#forum-view .spinner {width:20px; height:20px; border:2px solid rgba(234,88,12,0.2); border-top-color:var(--accent); border-radius:50%; animation:ls-spin 0.8s linear infinite; display:inline-block;}
#forum-view .toast {position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--bg3); border:1px solid var(--border2); border-radius:24px; padding:10px 20px; font-size:13px; z-index:300; animation:slideUp 0.3s ease both; white-space:nowrap;}
#forum-view .avatar {width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0;}

/* ── Section 3: Design theme ─────────────────────────────────────────────── */

html { font-family: 'Inter', system-ui, sans-serif; }
body { font-family: 'Inter', system-ui, sans-serif; background: #020a16; color: #d0e8f8; }

/* ═══════════════════════════════════════════════════
   FILE ATTACHMENT SLEEK DESIGN
   ═══════════════════════════════════════════════════ */

/* pa card — sleek left-accent strip */
div[class*="bg-stone-800/80"][class*="rounded-xl"] {
    border-left: 3px solid rgba(234,88,12,0.7) !important;
    border-top: 1px solid rgba(13,37,80,0.6) !important;
    border-right: 1px solid rgba(13,37,80,0.6) !important;
    border-bottom: 1px solid rgba(13,37,80,0.6) !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 0.65rem 0.85rem !important;
    box-shadow: none !important;
}

/* Header row */
div[class*="bg-stone-800/80"] > div[class*="justify-between"] {
    flex-wrap: wrap !important;
    gap: 5px 8px !important;
    padding-right: 1.75rem !important;
    margin-bottom: 0.4rem !important;
}

/* h3 filename: flex item that can shrink, text truncates */
div[class*="bg-stone-800/80"] > div[class*="justify-between"] h3 {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

/* Icon inside h3 */
div[class*="bg-stone-800/80"] > div[class*="justify-between"] h3 > svg,
div[class*="bg-stone-800/80"] > div[class*="justify-between"] h3 > i {
    flex-shrink: 0 !important;
}

/* Peek/Stats buttons: horizontal */
div[class*="bg-stone-800/80"] > div[class*="justify-between"] > div[class*="shrink-0"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: flex-start !important;
}

div[class*="bg-stone-800/80"] > div[class*="justify-between"] > div[class*="shrink-0"] > button {
    font-size: 0.7rem !important;
    padding: 2px 7px !important;
    white-space: nowrap !important;
}

/* Stats grid */
div[class*="bg-stone-800/80"] > div[class*="grid-cols-2"] {
    gap: 3px 10px !important;
    font-size: 0.72rem !important;
}

/* Drop zone */
label[class*="border-dashed"],
.simple-drop-zone {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

label[class*="border-dashed"] p {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* Confirmation row */
div[class*="bg-orange-900/20"] {
    flex-wrap: wrap !important;
    overflow: hidden !important;
}

div[class*="bg-orange-900/20"] span[class*="truncate"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Secondary file list */
div[class*="rounded-lg"] div[class*="overflow-hidden"] span[class*="truncate"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

/* All truncate elements */
[class~="truncate"] { min-width: 0 !important; }

/* Pink peek button */
.fn-peek-btn {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--color-surface-hover); border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm); color: var(--color-text-secondary);
    cursor: pointer; font-size: var(--text-xs); font-weight: 600; padding: 2px 8px;
    margin-left: var(--sp-1); vertical-align: middle; flex-shrink: 0;
    white-space: nowrap; letter-spacing: .02em;
    transition: background var(--t-fast), color var(--t-fast);
}
.fn-peek-btn:hover { background: rgba(255,255,255,.1); color: var(--color-text-primary); }

/* === User Engagement Improvements === */

/* Revamped Simple Mode teaser: feature mini-cards */
/* Simple Mode teaser collapse */

/* Post-merge discover panel */
.discover-panel{margin-top:var(--sp-5);padding:var(--sp-4);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md)}
.discover-title{font-size:11px;font-weight:700;color:rgba(208,232,248,.45);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.discover-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
@media(max-width:480px){.discover-grid{grid-template-columns:1fr}}
.discover-card{background:var(--color-surface-hover);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:3px;transition:border-color var(--t-fast)}
.discover-card:hover{border-color:var(--color-border-orange)}
.discover-card-name{font-size:var(--text-sm);font-weight:700;color:var(--color-text-primary)}
.discover-card-desc{font-size:var(--text-xs);color:#cbd5e1;line-height:1.6}
.discover-community{font-size:12px;color:rgba(208,232,248,.4);text-align:center;margin-top:4px}
.discover-community-link{color:#fb923c;text-decoration:none;transition:color .15s}
.discover-community-link:hover{color:#ea580c;text-decoration:underline}

/* Changelog unread dot */
.nav-unread-dot{position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--color-orange);border-radius:50%;border:1.5px solid var(--color-bg);animation:pulse 2s infinite;pointer-events:none}

/* Feature discovery dots on section headings */
.feat-new-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-orange);animation:pulse 2s infinite;margin-left:var(--sp-1);vertical-align:middle;flex-shrink:0}

/* Merge stats in post-merge discover panel */
.discover-stats{font-size:var(--text-sm);font-weight:700;color:var(--color-green);text-align:center;margin-bottom:var(--sp-2);padding:var(--sp-1) var(--sp-3);background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.15);border-radius:var(--radius-sm)}

/* Feature section tip boxes — quiet inline text, no box */
.feat-tip{padding:var(--sp-1) 0;margin-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.06);min-width:0;overflow-wrap:break-word}
@media(max-width:640px){
  .feat-tip{flex:0 0 100%!important;width:100%!important;max-width:100%!important;box-sizing:border-box;overflow:hidden;padding-top:var(--sp-2);margin-top:var(--sp-2)}
  .feat-tip-list li{white-space:normal!important;overflow-wrap:break-word!important;word-break:break-word!important;max-width:100%!important}
  div:has(>.feat-tip){flex-wrap:wrap!important}
}
.feat-tip-label{font-size:10px;font-weight:700;color:rgba(232,240,255,.55);text-transform:uppercase;letter-spacing:.09em;margin-bottom:var(--sp-1)}
.feat-tip-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}
.feat-tip-list li{font-size:var(--text-xs);color:#cbd5e1;padding-left:10px;position:relative;line-height:1.6;overflow-wrap:break-word;word-break:break-word}
.feat-tip-list li::before{content:"–";position:absolute;left:0;color:rgba(232,240,255,.45)}


/* === JW Sync Redesign v2 — Appended rules === */

/* Body base */
body { background: var(--color-bg); color: var(--color-text-primary); }

/* Modal system */
div[class*="fixed"][class*="inset-0"][class*="bg-black"][class*="z-50"] {
  background: rgba(3,7,14,.82)!important;
  backdrop-filter: blur(12px)!important; -webkit-backdrop-filter: blur(12px)!important;
}
div[class*="bg-stone-900"][class*="rounded-2xl"][class*="shadow-2xl"] {
  background: var(--color-surface-elevated)!important;
  border-color: var(--color-border-strong)!important;
  box-shadow: 0 24px 64px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04)!important;
  border-radius: var(--radius-lg)!important;
}
.modal-close {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); border:1px solid var(--color-border-strong);
  background:transparent; color:var(--color-text-muted); cursor:pointer;
  font-size:16px; line-height:1; transition:all var(--t-fast); flex-shrink:0;
}
.modal-close:hover { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.4); color:#f87171; }
.help-tab { padding:6px 12px; font-size:var(--text-sm); font-weight:600; border-radius:var(--radius-sm); color:var(--color-text-muted); cursor:pointer; transition:all var(--t-fast); }
.help-tab.active { background:var(--color-surface-hover); color:var(--color-text-primary); box-shadow:none; }
.help-tab:hover:not(.active) { color:var(--color-text-secondary); }

/* Full Mode panel cards — left-accent replaces top-border strips */
div[class*="bg-stone-800"][class*="rounded-2xl"][class*="border-stone-700"] {
  box-shadow:none!important; border-color:var(--color-border-strong)!important;
  background:var(--color-surface)!important;
}
div[class*="border-t-4"][class*="border-t-blue-500"] {
  border-top:1px solid var(--color-border-strong)!important;
  border-left:3px solid var(--color-blue)!important;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0!important;
}
div[class*="border-t-4"][class*="border-t-pink-500"] {
  border-top:1px solid var(--color-border-strong)!important;
  border-left:3px solid #ec4899!important;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0!important;
}
div[class*="border-t-4"][class*="border-t-amber-500"] {
  border-top:1px solid var(--color-border-strong)!important;
  border-left:3px solid #f59e0b!important;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0!important;
}
div[class*="border-t-4"][class*="border-t-emerald-600"] {
  border-top:1px solid var(--color-border-strong)!important;
  border-left:3px solid var(--color-green)!important;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0!important;
}
div[class*="bg-blue-900/30"][class*="border-b"] {
  background:var(--color-surface-hover)!important;
  border-bottom-color:var(--color-border-strong)!important;
}
div[class*="bg-stone-800/50"][class*="border-b"][class*="border-stone-700"] {
  background:var(--color-surface-hover)!important;
  border-bottom-color:var(--color-border-strong)!important; padding:14px 16px!important;
}
div[class*="border-b"] button[class*="text-blue-400"] {
  color:var(--color-text-secondary)!important; border-color:var(--color-border-strong)!important; background:transparent!important;
}
div[class*="border-b"] button[class*="text-blue-400"]:hover {
  color:var(--color-text-primary)!important; background:var(--color-surface-hover)!important;
}
div[class*="bg-stone-800"][class*="rounded-2xl"] h2 { font-size:var(--text-md)!important; font-weight:700!important; }

/* File attachment cards */
div[class*="bg-stone-800/80"][class*="rounded-xl"] {
  border-left:3px solid rgba(234,88,12,.5)!important;
  border-top:1px solid var(--color-border-strong)!important;
  border-right:1px solid var(--color-border)!important;
  border-bottom:1px solid var(--color-border)!important;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0!important;
  padding:.6rem .75rem!important; box-shadow:none!important;
  background:var(--color-surface)!important;
}

/* Section labels */
.section-label { font-size:var(--text-xs); font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--color-text-muted); }

/* Discover panel community link */
.discover-community { font-size:var(--text-sm); color:var(--color-text-muted); text-align:center; margin-top:var(--sp-1); }
.discover-community-link { color:var(--color-orange-light); text-decoration:none; transition:color var(--t-fast); }
.discover-community-link:hover { color:var(--color-orange); text-decoration:underline; }
.discover-title { font-size:var(--text-xs); font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:var(--sp-2); }
.discover-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-bottom:var(--sp-3); }
@media(max-width:480px) { .discover-grid { grid-template-columns:1fr; } }

/* Scrollbars */
.custom-scrollbar::-webkit-scrollbar { width:4px; }
.custom-scrollbar::-webkit-scrollbar-track { background:transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:var(--color-border-strong); border-radius:var(--radius-pill); }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2); }
#log-panel { background:var(--color-bg); border-top:1px solid var(--color-border-strong); box-shadow:0 -8px 24px rgba(0,0,0,.5); }

/* Mobile bar */
@media(max-width:1023px) {
  #mob-bar { background:rgba(6,13,25,.98)!important; border-top:1px solid var(--color-border-strong)!important; box-shadow:none!important; }
  .mob-btn-merge { background:var(--color-orange)!important; border-radius:var(--radius-sm)!important; }
  .mob-btn-download { background:var(--color-green)!important; border-radius:var(--radius-sm)!important; }
}

/* Responsive small screens */
@media(max-width:639px) {
  .simple-step { padding:var(--sp-4)!important; }
  .simple-drop-zone { padding:var(--sp-4)!important; }
  .simple-merge-btn,.simple-download-btn { padding:14px var(--sp-4)!important; font-size:var(--text-lg)!important; }
  .nav-btn { font-size:var(--text-xs)!important; padding:5px 9px!important; }
}

/* Light mode — comprehensive */
body.light { background:#f4f8ff; color:#071a38; }
body.light #jw-navbar { background:rgba(244,248,255,.97)!important; border-bottom-color:rgba(11,46,88,.12)!important; box-shadow:0 1px 0 rgba(11,46,88,.06)!important; }
body.light .nav-btn { background:transparent!important; border-color:rgba(11,46,88,.2)!important; color:#134678!important; }
body.light .nav-btn:hover { background:rgba(11,46,88,.05)!important; border-color:rgba(11,46,88,.3)!important; color:#071a38!important; }
body.light .nav-btn.active { background:rgba(234,88,12,.07)!important; color:var(--color-orange)!important; border-color:rgba(234,88,12,.3)!important; }
body.light .nav-select { background:transparent!important; border-color:rgba(11,46,88,.2)!important; color:#134678!important; }
body.light .modal-close { background:transparent!important; border-color:rgba(11,46,88,.2)!important; color:#3282bc!important; }
body.light .simple-step { background:#fff!important; border-color:rgba(11,46,88,.15)!important; }
body.light .simple-step.active { background:rgba(234,88,12,.03)!important; border-color:rgba(234,88,12,.3)!important; }
body.light .simple-step.done { background:rgba(34,197,94,.03)!important; border-color:rgba(34,197,94,.3)!important; }
body.light .simple-drop-zone { border-color:rgba(11,46,88,.2)!important; }
body.light .simple-drop-zone:hover { background:rgba(234,88,12,.03)!important; border-color:var(--color-orange)!important; }
body.light .discover-card-desc { color:#475569!important; }
body.light .privacy-pill { color:#16a34a!important; background:rgba(22,163,74,.06)!important; border-color:rgba(22,163,74,.2)!important; }
body.light .privacy-dot { background:#16a34a!important; }
body.light .undo-banner { background:#fff!important; border-color:rgba(11,46,88,.2)!important; color:#071a38!important; }
body.light #mob-bar { background:rgba(244,248,255,.98)!important; border-top-color:rgba(11,46,88,.12)!important; }
body.light div[class*="bg-stone-800"][class*="rounded-2xl"] { background:#fff!important; border-color:rgba(11,46,88,.12)!important; }
body.light div[class*="bg-stone-800/50"][class*="border-b"] { background:rgba(11,46,88,.03)!important; border-bottom-color:rgba(11,46,88,.1)!important; }
body.light .discover-panel { background:rgba(11,46,88,.03)!important; border-color:rgba(11,46,88,.1)!important; }
body.light #jws-loading { background:#f4f8ff; }

/* CLS fix: pre-size root so footer starts near final position */
#root { min-height: calc(100svh - 228px); } /* 228 = 48px site-nav + 180px footer */
#landing-view { min-height: calc(100svh - 228px); }

/* ── Site navigation (persistent across all views) ── */
#site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 2px;
  padding: 0 20px;
  height: 48px;
  background: rgba(4,15,34,.92);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-nav-logo {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  text-decoration: none;
  letter-spacing: -.3px;
}
.site-nav-logo:hover { color: #ea580c; }
.site-nav-links { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; justify-content: center; min-width: 0; }
.site-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(203,213,225,.7);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
/* Shimmering nav link (Study Stats) */
@keyframes navShimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
.site-nav-shimmer {
  background-image: linear-gradient(100deg,
    rgba(203,213,225,.72) 0%, rgba(203,213,225,.72) 42%,
    #fde68a 49%, #fb923c 53%, #fde68a 57%,
    rgba(203,213,225,.72) 64%, rgba(203,213,225,.72) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: navShimmer 3.4s linear infinite;
}
.site-nav-shimmer:hover { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
body.light .site-nav-shimmer {
  background-image: linear-gradient(100deg,
    rgba(71,85,105,.85) 0%, rgba(71,85,105,.85) 42%,
    #d97706 49%, #ea580c 53%, #d97706 57%,
    rgba(71,85,105,.85) 64%, rgba(71,85,105,.85) 100%);
}
@media (prefers-reduced-motion: reduce) { .site-nav-shimmer { animation: none; } }
.site-nav-shimmer-explorer {
  background-image: linear-gradient(100deg,
    rgba(203,213,225,.72) 0%, rgba(203,213,225,.72) 42%,
    #a5f3fc 49%, #38bdf8 53%, #a5f3fc 57%,
    rgba(203,213,225,.72) 64%, rgba(203,213,225,.72) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: navShimmer 3.4s linear infinite 0.9s;
}
.site-nav-shimmer-explorer:hover { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
body.light .site-nav-shimmer-explorer {
  background-image: linear-gradient(100deg,
    rgba(71,85,105,.85) 0%, rgba(71,85,105,.85) 42%,
    #0ea5e9 49%, #0369a1 53%, #0ea5e9 57%,
    rgba(71,85,105,.85) 64%, rgba(71,85,105,.85) 100%);
}
@media (prefers-reduced-motion: reduce) { .site-nav-shimmer-explorer { animation: none; } }
.site-nav-link:hover {
  color: #f1f5f9;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.site-nav-link.active {
  color: #ea580c;
  background: rgba(234,88,12,.1);
  border-color: rgba(234,88,12,.25);
}

/* ── Landing page ── */
#landing-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px 80px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.landing-hero {
  text-align: center;
  max-width: 640px;
  margin-bottom: 10px;
}
.landing-hero h1 {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: -.5px;
}
.landing-hero p {
  font-size: 16px;
  color: rgba(148,163,184,.85);
  line-height: 1.65;
  margin: 0;
}
/* ── Unified button system (token-based base + semantic variants) ──
   Reusable across the app. Existing feature-specific button classes
   (.cta-btn*, .svc-card-btn, .simple-merge-btn) remain as aliases and
   are normalised below to share these values for a cohesive look. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.btn:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; }
.btn:disabled { cursor: not-allowed; opacity: .6; box-shadow: none; }
.btn--primary {
  background: var(--color-orange); color: #fff;
  box-shadow: 0 1px 5px rgba(234,88,12,.35);
}
.btn--primary:hover { background: #c2410c; box-shadow: 0 2px 8px rgba(234,88,12,.5); color: #fff; }
.btn--secondary {
  background: transparent; color: #f1f5f9; font-weight: 600;
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { border-color: rgba(234,88,12,.6); background: rgba(234,88,12,.08); color: #fff; }
.btn--ghost {
  background: transparent; color: rgba(203,213,225,.85); font-weight: 600;
  border: 1px dashed rgba(148,163,184,.32);
}
.btn--ghost:hover { border-color: rgba(234,88,12,.55); background: rgba(234,88,12,.06); color: #fff; }
.btn--danger {
  background: rgba(248,113,113,.1); color: var(--color-red, #f87171);
  border-color: rgba(248,113,113,.25);
}
.btn--danger:hover { background: rgba(248,113,113,.2); color: #fff; }
.btn--danger-solid { background: #dc2626; color: #fff; }
.btn--danger-solid:hover { background: #b91c1c; color: #fff; }

.cta-btn {
  display: inline-block;
  background: #ea580c;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 1px 5px rgba(234,88,12,.35);
  transition: background .15s, box-shadow .15s;
}
.cta-btn:hover {
  background: #c2410c;
  box-shadow: 0 2px 8px rgba(234,88,12,.5);
  color: #fff;
}
.cta-btn:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
}
.cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.cta-btn-secondary {
  display: inline-block;
  background: transparent;
  color: #f1f5f9;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,.35);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color .15s, background .15s, color .15s;
}
.cta-btn-secondary:hover {
  border-color: rgba(234,88,12,.6);
  background: rgba(234,88,12,.08);
  color: #fff;
}
.cta-btn-secondary:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
}
.cta-btn-ghost {
  display: inline-block;
  background: transparent;
  color: rgba(203,213,225,.85);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 8px;
  border: 1px dashed rgba(148,163,184,.32);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color .15s, color .15s, background .15s;
}
.cta-btn-ghost:hover {
  border-color: rgba(234,88,12,.55);
  color: #fff;
  background: rgba(234,88,12,.06);
}
.cta-btn-ghost:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
}
/* Shimmering "First time? How it works" CTA — draws the eye of new visitors */
#landing-howto-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fed7aa;
  border: 1px solid rgba(234,88,12,.55);
  background: rgba(234,88,12,.10);
  box-shadow: 0 0 0 0 rgba(234,88,12,.45);
  animation: howtoGlow 3.2s ease-in-out infinite;
}
#landing-howto-btn:hover {
  color: #fff;
  border-color: rgba(234,88,12,.85);
  background: rgba(234,88,12,.18);
}
#landing-howto-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: skewX(-20deg);
  z-index: -1;
  animation: howtoShimmer 3.2s ease-in-out infinite;
}
@keyframes howtoShimmer {
  0% { left: -150%; }
  55%, 100% { left: 150%; }
}
@keyframes howtoGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,88,12,.0); }
  55% { box-shadow: 0 0 16px 1px rgba(234,88,12,.45); }
}
@media (prefers-reduced-motion: reduce) {
  #landing-howto-btn { animation: none; }
  #landing-howto-btn::after { animation: none; display: none; }
}
.site-nav-wrapped {
  background: rgba(234,88,12,.13);
  color: #fb923c;
  border-color: rgba(234,88,12,.4);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 7px 14px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.site-nav-wrapped::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(234,88,12,.25) 30%,
    rgba(251,191,36,.35) 50%,
    rgba(234,88,12,.25) 70%,
    transparent 100%);
  animation: snav-shimmer 2.8s ease-in-out infinite 1.5s;
  pointer-events: none;
}
@keyframes snav-shimmer {
  0%   { left: -80%; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 185%; opacity: 0; }
}
.site-nav-wrapped:hover {
  color: #fdba74;
  border-color: rgba(234,88,12,.6);
  background: rgba(234,88,12,.2);
}
.nav-btn-wrapped {
  color: #fb923c;
  border-color: rgba(234,88,12,.38);
  background: rgba(234,88,12,.11);
  position: relative;
  overflow: hidden;
}
.nav-btn-wrapped::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(234,88,12,.28) 30%,
    rgba(251,191,36,.38) 50%,
    rgba(234,88,12,.28) 70%,
    transparent 100%);
  animation: nbtn-shimmer 2.8s ease-in-out infinite 2s;
  pointer-events: none;
}
@keyframes nbtn-shimmer {
  0%   { left: -80%; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 185%; opacity: 0; }
}
.nav-btn-wrapped:hover {
  color: #fdba74;
  border-color: rgba(234,88,12,.58);
  background: rgba(234,88,12,.17);
}
.nav-btn-demo {
  color: rgba(203,213,225,.85);
}
.nav-btn-demo:hover {
  color: #ea580c !important;
  border-color: rgba(234,88,12,.45) !important;
  background: rgba(234,88,12,.08) !important;
}
/* Loading state when a demo button has triggered lazy-load. */
.jw-demo-loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}
.jw-demo-loading::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: jw-demo-spin .6s linear infinite;
}
@keyframes jw-demo-spin { to { transform: rotate(360deg); } }

/* ── v2.8.0 merge-demo: guidance banner + toast + pulse ─────────── */
#jw-demo-banner {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 199;
  max-width: min(720px, calc(100vw - 24px));
  width: max-content;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(234,88,12,0.15), rgba(4,15,34,0.92));
  border: 1px solid rgba(234,88,12,0.45);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  color: #f1f5f9;
  font-size: 13px;
  line-height: 1.5;
  font-family: inherit;
  animation: jw-demo-banner-in .25s ease-out;
}
.jw-demo-banner-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(234,88,12,0.35);
  color: #fff;
  font-size: 11px;
  margin-top: 1px;
}
.jw-demo-banner-content { flex: 1; min-width: 0; }
.jw-demo-banner-content strong { color: #fdba74; font-weight: 700; }
.jw-demo-banner-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: rgba(241,245,249,.7);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  font-family: inherit;
  transition: color .15s;
}
.jw-demo-banner-close:hover { color: #fff; }
@keyframes jw-demo-banner-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 640px) {
  #jw-demo-banner { top: 56px; max-width: calc(100vw - 12px); padding: 10px 12px; font-size: 12.5px; }
}

.jw-demo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(420px, calc(100vw - 24px));
  background: #132240;
  color: #e8f0ff;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 12.5px;
  font-family: inherit;
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  animation: jw-demo-toast-in .25s ease-out;
}
.jw-demo-toast-error {
  background: #4c1d1d;
  border-color: rgba(248,113,113,.4);
  color: #fef2f2;
}
.jw-demo-toast-out { opacity: 0; transition: opacity .35s; }
@keyframes jw-demo-toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Pulse the "Preview Merge" button briefly after the demo loads. */
.jw-demo-pulse {
  animation: jw-demo-pulse 1.2s ease-out 2;
  position: relative;
}
@keyframes jw-demo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,88,12,0); }
  35%      { box-shadow: 0 0 0 10px rgba(234,88,12,.45); }
  70%      { box-shadow: 0 0 0 18px rgba(234,88,12,0); }
}

/* ── v2.9.0 post-merge celebration + Restore Guide ─────────────── */
body.jw-modal-open { overflow: hidden; }

#jw-celebrate-overlay,
#jw-restore-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: inherit;
  animation: jwc-fade-in .2s ease-out;
}
#jw-celebrate-overlay .jwc-backdrop,
#jw-restore-overlay   .jwrg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 15, 34, .82);
  animation: modal-backdrop-blur .5s cubic-bezier(.16, 1, .3, 1) forwards;
}
#jw-conflict-overlay .jcr-backdrop {
  animation: modal-backdrop-blur .5s cubic-bezier(.16, 1, .3, 1) forwards;
}
.jwc-card, .jwrg-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 32px 28px 28px;
  background: linear-gradient(180deg, #0c1830, #06101f);
  border: 1px solid rgba(234, 88, 12, .35);
  border-radius: 18px;
  color: #f1f5f9;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 60px rgba(234,88,12,.18);
  animation: jwc-pop-in .4s cubic-bezier(.16, 1, .3, 1);
}
.jwc-close, .jwrg-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(255,255,255,.05);
  color: rgba(241,245,249,.7);
  font-size: 22px;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.jwc-close:hover, .jwrg-close:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.jwc-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 8px 24px rgba(34,197,94,.45);
  animation: jwc-icon-pop .35s cubic-bezier(.34,1.56,.64,1);
}
.jwc-card { text-align: center; }
.jwc-title {
  margin: 0 0 8px;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: -.4px;
  color: #f1f5f9;
}
.jwc-subtitle {
  margin: 0 0 22px;
  font-size: 14px;
  color: rgba(148,163,184,.92);
  line-height: 1.55;
}
.jwc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 22px;
}
.jwc-stat {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.jwc-stat strong {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 800;
  color: #fdba74;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.jwc-stat span {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(148,163,184,.82);
  font-weight: 600;
}
.jwc-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jwc-btn {
  display: inline-block;
  width: 100%;
  padding: 13px 18px;
  border-radius: 10px;
  border: 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.jwc-btn-primary {
  background: #ea580c;
  color: #fff;
  box-shadow: 0 4px 14px rgba(234,88,12,.4);
}
.jwc-btn-primary:hover { background: #f97316; transform: translateY(-1px); }
.jwc-btn-secondary {
  background: transparent;
  color: #f1f5f9;
  border: 1px solid rgba(148,163,184,.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.jwc-btn-secondary:hover {
  border-color: rgba(234,88,12,.5);
  background: rgba(234,88,12,.07);
  color: #fff;
}
.jwc-btn-outline {
  background: transparent;
  color: #fdba74;
  border: 1px solid rgba(234,88,12,.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.jwc-btn-outline:hover {
  background: rgba(234,88,12,.10);
  color: #fff;
  border-color: #ea580c;
  transform: translateY(-1px);
}
.jwc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.jwc-download-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 9px 12px;
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: 10px;
  color: #86efac;
  font-size: 12.5px;
  font-weight: 600;
  animation: jwc-fade-in .25s ease-out;
}
.jwc-download-status[hidden] { display: none; }
.jwc-btn-highlights {
  position: relative;
  background: transparent;
  border: 1px solid rgba(234,88,12,.35);
  /* gold shimmer sweep on the label (matches the Study Stats nav link) */
  background-image: linear-gradient(100deg,
    #fb923c 0%, #fb923c 42%, #fffbeb 49%, #fde68a 53%, #fb923c 60%, #fb923c 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: navShimmer 3.4s linear infinite;
}
.jwc-btn-highlights::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(234,88,12,.12);
  z-index: -1;
  transition: background .15s;
}
.jwc-btn-highlights:hover { border-color: rgba(234,88,12,.6); }
.jwc-btn-highlights:hover::before { background: rgba(234,88,12,.2); }
@media (prefers-reduced-motion: reduce) { .jwc-btn-highlights { animation: none; } }
.jwc-donate {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.jwc-donate a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  font-size: 14px;
  color: rgba(203, 213, 225, .92);
  text-decoration: none;
  border-radius: 11px;
  background: rgba(244, 114, 182, .08);
  border: 1px solid rgba(244, 114, 182, .24);
  transition: color .15s, background .15s, border-color .15s;
}
/* Moving highlight sweep — passes over the label + icon for a clear shimmer. */
.jwc-donate a::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 70%;
  height: 200%;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  transform: skewX(-18deg);
  animation: jwc-donate-shimmer 2.8s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes jwc-donate-shimmer {
  0%   { left: -120%; }
  100% { left: 120%; }
}
.jwc-donate a > * { position: relative; z-index: 1; }
.jwc-donate a strong { color: #f1f5f9; font-weight: 700; margin-right: 2px; }
.jwc-donate a svg { width: 18px; height: 18px; flex-shrink: 0; color: #f472b6; transition: transform .2s; }
.jwc-donate a:hover {
  color: #fff;
  background: rgba(244, 114, 182, .15);
  border-color: rgba(244, 114, 182, .42);
}
.jwc-donate a:hover svg { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .jwc-donate a::before { animation: none; opacity: 0; } }
.jwc-demo-cta {
  margin-top: 22px;
  padding: 16px;
  background: rgba(124, 58, 237, .08);
  border: 1px dashed rgba(167, 139, 250, .35);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.jwc-demo-cta strong { font-size: 13px; color: #c4b5fd; }
.jwc-demo-cta span   { font-size: 12.5px; color: rgba(196,181,253,.85); }
.jwc-demo-btn {
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid rgba(167,139,250,.45);
  background: transparent;
  color: #ddd6fe;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.jwc-demo-btn:hover {
  background: rgba(167,139,250,.18);
  color: #fff;
}

/* Restore guide */
.jwrg-card { padding: 28px 26px 22px; max-width: 560px; }
.jwrg-title {
  margin: 0 0 18px;
  font-size: clamp(20px, 3.5vw, 24px);
  font-weight: 800;
  letter-spacing: -.3px;
  text-align: center;
}
.jwrg-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
}
.jwrg-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 9px 8px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 7px;
  color: rgba(203,213,225,.7);
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
}
.jwrg-tab:hover { color: #f1f5f9; background: rgba(255,255,255,.06); }
.jwrg-tab.active {
  background: rgba(234,88,12,.18);
  color: #fdba74;
  box-shadow: 0 0 0 1px rgba(234,88,12,.2);
}
.jwrg-modes {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 10px;
}
.jwrg-mode {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 7px;
  color: rgba(203,213,225,.75);
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
}
.jwrg-mode:hover { color: #f1f5f9; background: rgba(255,255,255,.06); }
.jwrg-mode.active {
  background: #ea580c;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(234,88,12,.3);
}
.jwrg-steps {
  margin: 0 0 16px;
  padding-left: 20px;
  display: grid;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(226,232,240,.92);
  padding: 16px 14px 16px 20px;
  background: rgba(71,85,105,.08);
  border-radius: 10px;
  margin: 0 0 16px;
}
.jwrg-steps li::marker { color: #fb923c; font-weight: 700; }
.jwrg-steps strong { color: #fdba74; font-weight: 700; }
.jwrg-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 13px;
  background: rgba(234, 179, 8, .06);
  border: 1px solid rgba(234, 179, 8, .25);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(250, 204, 21, .9);
  margin: 0 0 16px;
}
.jwrg-warning svg { flex-shrink: 0; margin-top: 2px; }
.jwrg-actions { text-align: right; }
.jwrg-done {
  background: #ea580c;
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
  box-shadow: 0 1px 3px rgba(234,88,12,.3);
}
.jwrg-done:hover { background: #f97316; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(234,88,12,.4); }
.jwrg-done:active { transform: translateY(0); }

@keyframes jwc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jwc-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jwc-icon-pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── Modal entrance stagger animations (v2.60.0) ── */
@keyframes modal-element-fade-slide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes modal-backdrop-blur {
  from { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); opacity: 0; }
  to   { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 1; }
}

/* ── Celebration particles + completion rings (v2.61.0) ── */
@keyframes float-particle {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  5%   { opacity: 0.6; }
  95%  { opacity: 0.1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.5); opacity: 0; }
}
@keyframes ring-fill {
  0%   { stroke-dashoffset: 283; }
  100% { stroke-dashoffset: 0; }
}
@keyframes checkmark-bounce {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.jwc-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}
.jwc-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ea580c, rgba(234,88,12,.1));
  box-shadow: 0 0 16px rgba(234,88,12,.6), inset 0 0 8px rgba(234,88,12,.8);
  animation: float-particle linear forwards;
  pointer-events: none;
}

.jwc-stat-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  opacity: 0;
}
.jwc-stat-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2.5px solid transparent;
  border-radius: 50%;
  border-top-color: #34d399;
  border-right-color: rgba(52,211,153,.3);
  --ring-progress: 0;
  opacity: calc(var(--ring-progress) * 0.8);
  transform: rotate(calc(var(--ring-progress) * 360deg));
  transition: opacity .1s linear;
}
.jwc-stat-ring.jwc-ring-animate {
  opacity: 1;
  animation: ring-fill 650ms cubic-bezier(.34,.66,.66,1) forwards;
}
.jwc-stat-check {
  position: absolute;
  opacity: 0;
  transform: scale(0) rotate(-45deg);
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  filter: drop-shadow(0 2px 4px rgba(52,211,153,.5));
}
.jwc-stat-check.jwc-check-visible {
  animation: checkmark-bounce .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.jwc-stat-zero .jwc-stat strong {
  color: #64748b;
}

/* ── Modal entrance stagger animations: elegant sequenced reveals (v2.60.0) ── */
.jwc-title, .jwrg-title, .jcr-title {
  animation: modal-element-fade-slide .4s cubic-bezier(.16, 1, .3, 1) .1s both;
}
.jwc-subtitle, .jwrg-subtitle, .jcr-subtitle {
  animation: modal-element-fade-slide .4s cubic-bezier(.16, 1, .3, 1) .15s both;
}
.jwc-stats, .jwrg-modes, .jwrg-tabs, .jcr-head {
  animation: modal-element-fade-slide .4s cubic-bezier(.16, 1, .3, 1) .2s both;
}
.jwrg-steps, .jcr-body {
  animation: modal-element-fade-slide .4s cubic-bezier(.16, 1, .3, 1) .25s both;
}
.jwc-actions, .jwrg-actions, .jcr-foot {
  animation: modal-element-fade-slide .4s cubic-bezier(.16, 1, .3, 1) .3s both;
}
.jcr-more {
  animation: modal-element-fade-slide .4s cubic-bezier(.16, 1, .3, 1) .28s both;
}

/* ── Celebration screen polish: visual dividers + staggered entrance (v2.59.0) ── */
.jwc-stats { position: relative; padding-bottom: 16px; }
.jwc-stats::after {
  content: ''; position: absolute; bottom: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(71,85,105,.25) 50%, transparent 100%);
}
.jwc-stat strong {
  display: inline-block; font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .jwc-card, .jwrg-card { padding: 24px 18px 22px; border-radius: 14px; }
  .jwc-stats { gap: 6px; }
  .jwc-stat { padding: 12px 4px; }
  .jwc-stat strong { font-size: 19px; }
  .jwc-stat span { font-size: 9.5px; }
  .jwrg-tab { font-size: 11.5px; padding: 8px 4px; }
}
.landing-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}
.landing-feat {
  background: rgba(4,15,34,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 24px 20px;
}
.landing-feat-icon {
  width: 36px;
  height: 36px;
  background: rgba(234,88,12,.12);
  border: 1px solid rgba(234,88,12,.2);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: #ea580c;
}
.landing-feat h3 { font-size: 14px; font-weight: 700; color: #f1f5f9; margin: 0 0 8px; }
.landing-feat p { font-size: 13px; color: rgba(148,163,184,.8); line-height: 1.6; margin: 0; }

/* ── SEO content: section heading, How-to steps, FAQ (on-brand, flat) ── */
.landing-section-title {
  font-size: 22px;
  font-weight: 800;
  color: #f1f5f9;
  text-align: center;
  letter-spacing: -.01em;
  margin: 56px 0 24px;
}
.landing-howto, .landing-faq {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.landing-steps {
  list-style: none;
  counter-reset: jws-step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.landing-steps li {
  counter-increment: jws-step;
  position: relative;
  padding: 16px 18px 16px 56px;
  background: rgba(4,15,34,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  font-size: 14px;
  color: rgba(203,213,225,.92);
  line-height: 1.6;
}
.landing-steps li::before {
  content: counter(jws-step);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 26px;
  height: 26px;
  background: #ea580c;
  color: #fff;
  border-radius: 7px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-steps li strong { color: #fff; }
.landing-faq-item {
  background: rgba(4,15,34,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.landing-faq-item h3 {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 8px;
}
.landing-faq-item p {
  font-size: 13.5px;
  color: rgba(148,163,184,.85);
  line-height: 1.65;
  margin: 0;
}

/* ── Legal footer ── */
.footer-tagline { font-size: 12px; color: rgba(148,163,184,.8); margin: 0 0 10px; }
.legal-details { font-size: 10px; }
.legal-details summary {
  cursor: pointer;
  color: rgba(148,163,184,.75);
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legal-details summary::-webkit-details-marker { display: none; }
.legal-details summary::before { content: '▶'; font-size: 8px; transition: transform .15s; }
.legal-details[open] summary::before { transform: rotate(90deg); }
.legal-details summary:hover { color: rgba(148,163,184,.92); }
.legal-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; text-align: justify; }

/* ── Landing responsive ── */
@media (max-width: 639px) {
  #landing-view { padding: 40px 16px 60px; }
  .landing-features { grid-template-columns: 1fr; gap: 12px; }
  .landing-hero { margin-bottom: 40px; }
}
@media (max-width: 560px) {
  #site-nav { padding: 4px 14px; height: auto; }
  .site-nav-link { padding: 6px 8px; font-size: 12px; }
  .nav-theme-btn { order: 2; flex: 0 0 auto; margin-left: auto; }
  .site-nav-links { order: 3; flex-basis: 100%; justify-content: center; padding-bottom: 6px; }
}

/* ── Light mode overrides for new components ── */
body.light #site-nav { background: rgba(244,248,255,.97); border-bottom-color: rgba(11,46,88,.12); }
body.light .site-nav-logo { color: #071a38; }
body.light .site-nav-link { color: rgba(71,85,105,.8); }
body.light .site-nav-link:hover { color: #071a38; background: rgba(11,46,88,.06); border-color: rgba(11,46,88,.15); }
body.light .site-nav-link.active { color: #ea580c; background: rgba(234,88,12,.07); border-color: rgba(234,88,12,.3); }
.nav-theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid rgba(148,163,184,.16);background:transparent;color:rgba(203,213,225,.7);cursor:pointer;transition:color .15s,background .15s,border-color .15s;flex-shrink:0;padding:0;font-size:0;}
.nav-theme-btn:hover{color:#f1f5f9;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);}
.nav-theme-btn svg{width:15px;height:15px;display:block;}
body.light .nav-theme-btn{border-color:rgba(11,46,88,.15);color:#64748b;}
body.light .nav-theme-btn:hover{color:#1e293b;background:rgba(11,46,88,.06);}
body.light .landing-feat { background: #fff; border-color: rgba(11,46,88,.1); }
body.light .landing-feat h3 { color: #071a38; }
body.light .landing-feat p { color: rgba(71,85,105,.9); }
body.light .landing-hero h1 { color: #071a38; }
body.light .landing-hero p { color: rgba(71,85,105,.85); }
body.light .footer-tagline { color: #475569; }
body.light .legal-details summary { color: #475569; }
body.light .legal-details summary:hover { color: #1e293b; }

/* ── Forum view: missing classes ─────────────────────────────────────────── */

/* Offset forum's own sticky header below the 48px site-nav */
#forum-view header { top: 48px; }

/* Keep forum dark even when body.light is also set */
body.is-forum { background: var(--bg) !important; }
/* The embedded forum view carries its own <main>, so hide the page's main
   landmark while it is showing — a document must expose exactly one. */
body.is-forum #site-main { display: none; }

/* Post list container */
#forum-view .post-list { display:flex; flex-direction:column; gap:10px; padding:16px 0 32px; }

/* Post item row */
#forum-view .post-item { display:flex; gap:14px; padding:14px 16px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:border-color .15s; }
#forum-view .post-item:hover { border-color:var(--border2); }

/* Vote column */
#forum-view .vote-col { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:28px; padding-top:2px; }
#forum-view .vote-count { font-size:13px; font-weight:700; color:var(--muted); }
#forum-view .vote-count.hi { color:var(--accent2); }

/* Post content column */
#forum-view .post-body { flex:1; min-width:0; }

/* Badge row */
#forum-view .badges { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
#forum-view .cat-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:700; }
#forum-view .cat-question { background:rgba(96,165,250,.1);  color:#60a5fa; border:1px solid rgba(96,165,250,.2); }
#forum-view .cat-bug      { background:rgba(248,113,113,.1); color:#f87171; border:1px solid rgba(248,113,113,.2); }
#forum-view .cat-feature  { background:rgba(251,191,36,.1);  color:#fbbf24; border:1px solid rgba(251,191,36,.2); }
#forum-view .cat-general  { background:rgba(148,163,184,.1); color:#94a3b8; border:1px solid rgba(148,163,184,.2); }
#forum-view .solved-badge  { display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:700; background:rgba(34,197,94,.1); color:#22c55e; border:1px solid rgba(34,197,94,.2); }
#forum-view .solution-badge { background:rgba(34,197,94,.08); color:#22c55e; border:1px solid rgba(34,197,94,.2); border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:12px; }

/* Post body text */
#forum-view .post-excerpt { font-size:13px; color:rgba(162,204,236,.6); margin:4px 0 8px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Meta row */
#forum-view .post-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#forum-view .meta-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
#forum-view .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; }
#forum-view .avatar-sm { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
#forum-view .avatar-md { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; flex-shrink:0; }

/* Empty / loading state */
#forum-view .state-box { display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 16px; color:var(--muted); font-size:14px; text-align:center; }
#forum-view .state-box .icon { font-size:32px; }

/* Compose panel — hidden until .open */
#forum-view .compose-panel { display:none; background:var(--bg2); border:1px solid var(--border2); border-radius:12px; padding:20px; margin:16px 0; }
#forum-view .compose-panel.open { display:block; }
#forum-view .compose-panel h3 { font-size:16px; font-weight:700; margin-bottom:16px; color:var(--text); }
#forum-view .form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
#forum-view .form-label { font-size:13px; font-weight:600; color:var(--muted); }
#forum-view .form-select,
#forum-view .form-input,
#forum-view .form-textarea { width:100%; background:var(--bg3); border:1px solid var(--border2); border-radius:8px; color:var(--text); padding:9px 12px; font-size:14px; font-family:'Inter',system-ui,sans-serif; outline:none; transition:border-color .15s; box-sizing:border-box; }
#forum-view .form-textarea { resize:vertical; min-height:100px; }
#forum-view .form-select:focus,
#forum-view .form-input:focus,
#forum-view .form-textarea:focus { border-color:var(--accent); }
#forum-view .form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }

/* Filter pills */
#forum-view .filter-bar { display:flex; gap:7px; flex-wrap:wrap; padding:16px 0 10px; }
#forum-view .pill { display:inline-flex; align-items:center; padding:5px 13px; border-radius:99px; font-size:12px; font-weight:600; cursor:pointer; background:transparent; border:1px solid var(--border); color:var(--muted); transition:all .15s; user-select:none; }
#forum-view .pill:hover { border-color:var(--border2); color:var(--text); }
#forum-view .pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Stats bar */
#forum-view .stats-bar { display:flex; gap:20px; padding:6px 0 14px; border-bottom:1px solid var(--border); }
#forum-view .stat { display:flex; flex-direction:column; align-items:center; font-size:11px; color:var(--muted); gap:2px; }
#forum-view .stat strong { font-size:18px; font-weight:700; color:var(--text); }

/* Thread overlay — hidden until .open */
#forum-view .overlay { display:none; position:fixed; top:48px; right:0; bottom:0; left:0; background:var(--bg); z-index:150; overflow-y:auto; }
#forum-view .overlay.open { display:block; }
#forum-view .thread-inner { max-width:700px; margin:0 auto; padding:20px 16px 48px; }
/* Back button stays pinned while scrolling a long thread */
#forum-view .thread-back { position:sticky; top:10px; z-index:20; display:inline-flex; align-items:center; gap:6px; color:var(--muted); background:rgba(2,10,22,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:7px; padding:7px 14px; font-size:13px; cursor:pointer; font-family:'Inter',system-ui,sans-serif; transition:all .15s; margin-bottom:16px; }
#forum-view .thread-back:hover { color:var(--text); border-color:var(--border2); }

/* Prev/next post links under the opened post */
#forum-view .thread-nav { display:flex; justify-content:space-between; gap:10px; margin:0 0 20px; }
#forum-view .thread-nav-btn { max-width:48%; min-width:0; }

/* On small screens the site nav wraps to two rows (taller than the 48px the
   overlay assumes), which used to bury the back button behind the nav. Make
   the thread view full-screen above the nav instead. */
@media (max-width:600px) {
  #forum-view .overlay { top:0; z-index:230; }
}

/* Thread card (opened post) */
#forum-view .thread-card { background:var(--bg2); border:1px solid var(--border2); border-radius:12px; padding:20px; margin-bottom:20px; }
#forum-view .thread-card.original { border-color:rgba(234,88,12,.25); }
#forum-view .thread-title { font-size:20px; font-weight:700; color:var(--text); line-height:1.3; margin-bottom:10px; }
#forum-view .thread-content { font-size:14px; line-height:1.75; color:#a4ccec; margin-bottom:16px; white-space:pre-wrap; }
#forum-view .thread-footer { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--border); }
#forum-view .author-chip { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text); }

/* Replies */
#forum-view .replies-section { margin-top:8px; }
#forum-view .replies-header { font-size:14px; font-weight:700; color:var(--muted); margin-bottom:12px; }
#forum-view .reply-compose { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:16px; margin-top:16px; }
#forum-view .reply-item { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:10px; }
#forum-view .reply-item.original { border-color:rgba(234,88,12,.3); background:rgba(234,88,12,.04); }
#forum-view .reply-author-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
#forum-view .reply-author { font-size:13px; font-weight:600; color:var(--text); }
#forum-view .reply-time { font-size:11px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
#forum-view .reply-body { font-size:14px; line-height:1.7; color:#a4ccec; }
#forum-view .reply-text { white-space:pre-wrap; }

/* React / upvote button inside thread */
#forum-view .react-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:13px; transition:all .15s; font-family:'Inter',system-ui,sans-serif; }
#forum-view .react-btn:hover { border-color:var(--accent); color:var(--accent); }
#forum-view .react-btn.voted { background:rgba(234,88,12,.1); border-color:var(--accent); color:var(--accent); }

/* CLS fix: suppress root/loading before JS runs for first-time visitors */
html[data-view="landing"] #root,
html[data-view="landing"] #jws-loading { display: none !important; }
html[data-view="landing"] #landing-view { display: flex !important; }
/* Once the initial data-view is stripped by enhancements.js, the
   landing class on <body> keeps the workspace splash hidden until the
   user actually requests the app (lazy-load, v2.7.0). */
body.is-landing #jws-loading { display: none !important; }

/* ── Mobile landing nav: keep the language picker fully visible ──
   The nav <select> is the last item; on narrow screens it was pushed
   off the right edge and clipped by overflow-x:hidden. Pin it and let
   the text links give way (truncate / hide). */
@media (max-width: 600px) {
  /* Two-level nav: row 1 = logo + language; row 2 = App / Community / Tools */
  #site-nav { flex-wrap: wrap; height: auto; min-height: 48px; padding: 7px 16px; row-gap: 8px; column-gap: 8px; justify-content: flex-start; }
  .site-nav-logo { order: 1; flex: 0 0 auto; }
  .nav-theme-btn { order: 2; flex: 0 0 auto; margin-left: auto; }
  .nav-lang-select { order: 2; flex: 0 0 auto; }
  .site-nav-links { order: 3; flex: 1 0 100%; margin-left: 0; gap: 8px; row-gap: 6px; justify-content: center; flex-wrap: wrap; }
  .site-nav-link { flex: 0 0 auto; min-width: 0; overflow: visible; text-overflow: clip; white-space: nowrap; padding: 7px 11px; }
}


/* ── Home service cards (v2.33.0) — four distinct, equal tools ── */
.svc-section { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.svc-section-title { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fb923c; text-align: center; margin: 0 0 18px; }
.svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.svc-card { display: flex; flex-direction: column; gap: 9px; background: rgba(4,15,34,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 20px 18px; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; text-align: left; width: 100%; font-family: inherit; color: inherit; cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none; }
.svc-secondary { justify-content: center; margin-top: 20px; }
.svc-card:hover { border-color: rgba(234,88,12,.55); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.svc-card-merge { border-color: rgba(234,88,12,.4); background: rgba(234,88,12,.06); }
.svc-card-ic { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(234,88,12,.12); border: 1px solid rgba(234,88,12,.3); color: #fb923c; }
.svc-card-title { font-size: 16px; font-weight: 800; color: #f1f5f9; margin: 2px 0 0; }
.svc-card-desc { font-size: 13.5px; line-height: 1.5; color: #94a3b8; margin: 0; flex: 1; }
.svc-card-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px; background: #ea580c; color: #fff; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; box-shadow: 0 1px 5px rgba(234,88,12,.35); transition: background .15s, box-shadow .15s; }
.svc-card-btn:hover { background: #c2410c; box-shadow: 0 2px 10px rgba(234,88,12,.5); }
body.light .svc-card { background: #fff; border-color: rgba(11,46,88,.12); }
body.light .svc-card-merge { background: rgba(234,88,12,.05); border-color: rgba(234,88,12,.3); }
body.light .svc-card-title { color: #0b2e58; }
body.light .svc-card-desc { color: #475569; }
.svc-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; position: relative; z-index: 1; }
.svc-tag { font-size: 11px; font-weight: 600; line-height: 1; color: #cbd5e1; background: rgba(71,85,105,.35); border: 1px solid rgba(148,163,184,.18); border-radius: 999px; padding: 5px 9px; }
body.light .svc-tag { color: #475569; background: rgba(71,85,105,.1); border-color: rgba(71,85,105,.2); }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .svc-grid { grid-template-columns: 1fr; gap: 12px; } .svc-section { margin-top: 8px; } }

/* Backup Doctor card: orange-red health accent + NEW badge */
.svc-doctor { --svc-a: 234,88,12; --svc-l: 251,146,60; }
.svc-card-new {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font: 800 9px/1 inherit; letter-spacing: .08em; color: #fff;
  background: #c2410c; border-radius: 5px; padding: 4px 6px;
  box-shadow: 0 1px 4px rgba(234,88,12,.5);
}


/* ── Home service tiles — per-card colored shimmer (v2.35.0) ── */
.svc-card { position: relative; overflow: hidden; }
.svc-card-merge { --svc-a: 234,88,12;  --svc-l: 251,146,60; }
.svc-explorer   { --svc-a: 14,165,233; --svc-l: 56,189,248; }
.svc-stats      { --svc-a: 16,185,129; --svc-l: 52,211,153; }
.svc-share      { --svc-a: 139,92,246; --svc-l: 167,139,250; }
.svc-card .svc-card-ic { background: rgba(var(--svc-a), .14); border-color: rgba(var(--svc-a), .38); color: rgb(var(--svc-l)); }
.svc-card:hover { border-color: rgba(var(--svc-a), .6); box-shadow: 0 8px 26px rgba(var(--svc-a), .24); }
.svc-card-ic, .svc-card-title, .svc-card-desc { position: relative; z-index: 1; }
.svc-card::after {
  content: ''; position: absolute; top: -60%; left: -60%; width: 42%; height: 220%; z-index: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(var(--svc-l), .14) 42%, rgba(var(--svc-l), .30) 50%, rgba(var(--svc-l), .14) 58%, transparent 100%);
  transform: skewX(-16deg); pointer-events: none;
}
.svc-card:hover::after { animation: svcShimmer .9s ease-out; }
.svc-explorer::after { animation-delay: 1.15s; }
.svc-stats::after    { animation-delay: 2.3s; }
.svc-share::after    { animation-delay: 3.45s; }
@keyframes svcShimmer { 0% { left: -60%; } 58%, 100% { left: 135%; } }
@media (prefers-reduced-motion: reduce) { .svc-card::after { display: none; } }

/* ── Touch targets (WCAG 2.5.5) — bump key controls to ≥44px on touch devices.
   Scoped to pointer:coarse so desktop density is unchanged. ── */
@media (pointer: coarse) {
  .nav-btn, .site-nav-link, .nav-lang-select,
  .cta-btn, .cta-btn-secondary, .cta-btn-ghost,
  .svc-card-btn, .simple-merge-btn,
  .btn, .btn--primary, .btn--secondary, .btn--ghost, .btn--danger, .btn--danger-solid,
  .nav-lang-select { min-height: 44px; }
}


/* ── Beauty pass: hero depth glow + calmer card sheen (v2.58.1) ── */
.landing-hero { position: relative; }
.landing-hero::before {
  content: ''; position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  width: 720px; max-width: 132vw; height: 360px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(234,88,12,.15), rgba(234,88,12,.045) 46%, transparent 72%);
}
.landing-hero h1, .landing-hero p { position: relative; z-index: 1; }
.landing-feat { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.landing-feat:hover { border-color: rgba(234,88,12,.4); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* ── Beauty pass II: editorial eyebrow + section accents (v2.58.2) ── */
.svc-section-title { display: flex; align-items: center; justify-content: center; gap: 14px; }
.svc-section-title::before, .svc-section-title::after { content: ''; height: 1px; width: 40px; background: linear-gradient(to right, transparent, rgba(251,146,60,.6)); }
.svc-section-title::after { background: linear-gradient(to left, transparent, rgba(251,146,60,.6)); }
.landing-section-title { position: relative; padding-bottom: 16px; }
.landing-section-title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 44px; height: 3px; border-radius: 2px; background: #ea580c; }


/* ── Unified merge tool (beta): single "Advanced options" control ── */
.jw-adv-toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;border:1px solid rgba(234,88,12,.45);background:rgba(234,88,12,.09);color:#fdba74;font-size:13px;font-weight:600;line-height:1;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}
.jw-adv-toggle::after{content:"▾";font-size:11px;opacity:.85}
.jw-adv-toggle:hover{background:rgba(234,88,12,.17);border-color:rgba(234,88,12,.65)}
.jw-adv-toggle.jw-adv-on{border-color:rgba(71,85,105,.55);background:rgba(71,85,105,.2);color:#cbd5e1}
.jw-adv-toggle.jw-adv-on::after{content:""}
.jw-adv-toggle.jw-adv-on:hover{border-color:rgba(148,163,184,.7);color:#e2e8f0}
body.light .jw-adv-toggle{border-color:rgba(234,88,12,.4);background:rgba(234,88,12,.07);color:#c2410c}
body.light .jw-adv-toggle.jw-adv-on{border-color:rgba(100,116,139,.4);background:rgba(100,116,139,.1);color:#475569}

/* ===================================================================
   Beta merge tool — refined "luxury" visual layer
   Scoped to html.jw-beta (dark mode). Aim: sleek, professional,
   Apple-like — neutral graphite surfaces, fine hairline highlights,
   large soft ambient shadows, restrained accent, tactile controls.
   =================================================================== */

/* Ambient backdrop — subtle depth behind the page */
html.jw-beta body:not(.light){
  background-color:#0a0d14;
  background-image:
    radial-gradient(1200px 720px at 50% -12%, rgba(234,88,12,.07), transparent 60%),
    radial-gradient(1000px 560px at 92% 2%, rgba(56,89,150,.06), transparent 55%);
  background-attachment:fixed;
}

/* Cards — neutral graphite slab, fine top rim-light, large soft shadow */
html.jw-beta body:not(.light) .bg-stone-800.rounded-2xl{
  background:
    radial-gradient(125% 85% at 16% 0%, rgba(96,124,184,.11), rgba(96,124,184,0) 56%),
    radial-gradient(95% 75% at 96% 102%, rgba(58,86,150,.13), rgba(58,86,150,0) 60%),
    linear-gradient(165deg, rgba(31,42,67,.88) 0%, rgba(23,32,54,.90) 50%, rgba(16,24,44,.93) 100%);
  border:1px solid rgba(150,178,232,.11);
  border-radius:20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 .5px rgba(0,0,0,.4),
    0 14px 28px -14px rgba(0,0,0,.5),
    0 34px 64px -28px rgba(0,0,0,.6),
    /* warm orange aurora bleed (matches the landing hero) */
    0 -16px 80px -30px rgba(234,88,12,.32),
    0 0 64px -16px rgba(234,88,12,.22),
    0 44px 100px -42px rgba(249,115,22,.20);
  transition:border-color .3s ease, box-shadow .3s ease;
}
html.jw-beta body:not(.light) .bg-stone-800.rounded-2xl:hover{
  border-color:rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 .5px rgba(0,0,0,.4),
    0 18px 34px -14px rgba(0,0,0,.55),
    0 40px 72px -28px rgba(0,0,0,.62),
    0 -18px 88px -28px rgba(234,88,12,.40),
    0 0 72px -14px rgba(234,88,12,.28),
    0 48px 110px -42px rgba(249,115,22,.24);
}
/* Mobile: viewport clips the sideways bleed, so bloom vertically instead */
@media (max-width:700px){
  html.jw-beta body:not(.light) .bg-stone-800.rounded-2xl{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 0 0 .5px rgba(0,0,0,.4),
      0 14px 28px -14px rgba(0,0,0,.5),
      0 -22px 72px -26px rgba(234,88,12,.42),
      0 34px 84px -30px rgba(249,115,22,.34);
  }
}
/* Header — quiet neutral hairline, accent stays in the icon/text only */
html.jw-beta body:not(.light) .bg-stone-800.rounded-2xl > div:first-child{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Inner panels — gently recessed wells, subtle (not skeuomorphic-heavy) */
html.jw-beta body:not(.light) .p-5.rounded-xl,
html.jw-beta body:not(.light) [class*="bg-orange-500/5"].rounded-xl,
html.jw-beta body:not(.light) [class*="bg-black/10"].rounded-xl{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/* Compact, embossed privacy badge (was ballooning on mobile) */
html.jw-beta .privacy-pill{
  display:inline-flex; align-items:center; gap:7px;
  width:auto; max-width:fit-content; margin-left:auto;
  padding:5px 11px; border-radius:9px;
  font-size:11px; font-weight:600; letter-spacing:.005em; line-height:1.2;
  color:#6ee7a8;
  background:linear-gradient(180deg, rgba(16,30,23,.7), rgba(9,18,14,.8));
  border:1px solid rgba(52,211,153,.16);
  border-top-color:rgba(110,231,168,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 1px 3px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.03);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
html.jw-beta .privacy-dot{
  width:6px;height:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 6px rgba(52,211,153,.7), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Solid orange buttons — refined glossy cap, soft glow, tactile press */
html.jw-beta body:not(.light) [class*="bg-orange-600"]{
  background-image:linear-gradient(180deg,#fb923c 0%,#f97316 45%,#ea580c 100%);
  border:1px solid rgba(124,45,18,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 1px rgba(124,45,18,.4),
    0 1px 2px rgba(0,0,0,.3),
    0 6px 16px -6px rgba(234,88,12,.5);
  transition:transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, filter .2s ease;
}
html.jw-beta body:not(.light) [class*="bg-orange-600"]:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 2px 3px rgba(0,0,0,.32),
    0 11px 24px -6px rgba(234,88,12,.62);
}
html.jw-beta body:not(.light) [class*="bg-orange-600"]:active:not(:disabled){
  transform:translateY(1px);
  filter:brightness(.97);
  box-shadow:inset 0 2px 5px rgba(124,45,18,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
html.jw-beta body:not(.light) [class*="bg-orange-600"]:disabled{
  background-image:none;border-color:transparent;box-shadow:none;transform:none;filter:none;
}

/* Secondary slate buttons — refined neutral cap so nothing reads flat */
html.jw-beta body:not(.light) button[class*="bg-stone-800"]{
  background-image:linear-gradient(180deg, rgba(54,69,103,.93), rgba(35,46,73,.95));
  border:1px solid rgba(150,178,232,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 1px 2px rgba(0,0,0,.3),
    0 5px 13px -6px rgba(0,0,0,.45);
  transition:transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, filter .2s ease;
}
html.jw-beta body:not(.light) button[class*="bg-stone-800"]:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 3px rgba(0,0,0,.32), 0 10px 22px -6px rgba(0,0,0,.5);
}
html.jw-beta body:not(.light) button[class*="bg-stone-800"]:active{
  transform:translateY(1px);
  filter:brightness(.96);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5);
}

/* Drop zones — elegant recessed target, gold lip lifts on hover */
html.jw-beta body:not(.light) .border-dashed{
  border-width:1.5px;
  border-color:rgba(234,88,12,.35);
  background:rgba(234,88,12,.045);
  border-radius:13px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.3);
  transition:background .2s ease, border-color .2s ease, transform .14s ease, box-shadow .2s ease;
}
html.jw-beta body:not(.light) .border-dashed:hover{
  border-color:rgba(234,88,12,.7);
  background:rgba(234,88,12,.10);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2), 0 9px 22px -12px rgba(234,88,12,.55);
}

/* Floating merge bar — sleek glass slab */
html.jw-beta body:not(.light) .fixed.bottom-4{
  background:linear-gradient(180deg, rgba(34,36,45,.9), rgba(20,22,29,.94));
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 1px 2px rgba(0,0,0,.4),
    0 22px 50px -16px rgba(0,0,0,.7),
    0 0 40px -16px rgba(234,88,12,.18);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}

/* Card titles — a hair tighter for a more refined wordmark feel */
html.jw-beta body:not(.light) .font-bold.text-lg.text-white{ letter-spacing:-.01em; }


/* ---- Detail pass: inputs, panels, stat tiles, chrome polish (beta dark) ---- */

/* Crisper text rendering across the beta app */
html.jw-beta body:not(.light){
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* On-brand text selection + focus ring */
html.jw-beta ::selection{ background:rgba(234,88,12,.32); color:#fff; }
html.jw-beta body:not(.light) :focus-visible{
  outline:2px solid rgba(234,88,12,.65);
  outline-offset:2px;
}

/* Slim, premium scrollbars */
html.jw-beta body:not(.light){ scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.35) transparent; }
html.jw-beta body:not(.light) ::-webkit-scrollbar{ width:10px; height:10px; }
html.jw-beta body:not(.light) ::-webkit-scrollbar-track{ background:transparent; }
html.jw-beta body:not(.light) ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(120,130,150,.4), rgba(80,90,110,.35));
  border-radius:999px; border:2px solid transparent; background-clip:padding-box;
}
html.jw-beta body:not(.light) ::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(234,88,12,.6), rgba(194,65,12,.5));
  background-clip:padding-box;
}

/* Unify the many flat stone-900 panels into refined hairline surfaces */
html.jw-beta body:not(.light) [class*="bg-stone-900"][class*="border-stone-700"],
html.jw-beta body:not(.light) [class*="bg-stone-900"][class*="border-stone-800"]{
  background-image:linear-gradient(180deg, rgba(255,255,255,.018), rgba(0,0,0,.14));
  border-color:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 1px 2px rgba(0,0,0,.22);
}

/* Text inputs / textareas — recessed field with an orange focus glow */
html.jw-beta body:not(.light) input[class*="bg-stone-900"],
html.jw-beta body:not(.light) textarea[class*="bg-stone-900"]{
  background-image:none;
  background-color:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
html.jw-beta body:not(.light) input[class*="bg-stone-900"]:focus,
html.jw-beta body:not(.light) textarea[class*="bg-stone-900"]:focus{
  outline:none;
  border-color:rgba(234,88,12,.6);
  background-color:rgba(0,0,0,.32);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 3px rgba(234,88,12,.18);
}
/* Input wrappers that use focus-within get the same glow */
html.jw-beta body:not(.light) [class*="focus-within:border"]:focus-within{
  border-color:rgba(234,88,12,.6) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 3px rgba(234,88,12,.16);
}

/* Stat tiles — refined raised mini-cards with embossed numerals */
html.jw-beta body:not(.light) .bg-stone-800.rounded-lg.text-center{
  background:linear-gradient(180deg, rgba(58,60,69,.7), rgba(34,36,44,.8));
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.3), 0 6px 14px -8px rgba(0,0,0,.4);
}
html.jw-beta body:not(.light) .bg-stone-800.rounded-lg.text-center [class*="text-2xl"]{
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  letter-spacing:-.02em;
}

/* Card header icon — subtle accent glow so it reads as a crafted mark */
html.jw-beta body:not(.light) .bg-stone-800.rounded-2xl > div:first-child > svg:first-child,
html.jw-beta body:not(.light) .bg-stone-800.rounded-2xl > div:first-child > i:first-child{
  filter:drop-shadow(0 1px 3px rgba(234,88,12,.45));
}

/* Section labels — refined letter-spacing for a more typographic feel */
html.jw-beta body:not(.light) .uppercase.tracking-wider{ letter-spacing:.12em; }
html.jw-beta body:not(.light) .font-bold.text-orange-400,
html.jw-beta body:not(.light) .font-bold.text-amber-400{ letter-spacing:-.005em; }

/* Top nav buttons — gentle premium hover lift */
html.jw-beta body:not(.light) .nav-btn{ transition:color .15s ease, background .15s ease, transform .12s ease; }
html.jw-beta body:not(.light) .nav-btn:hover{ transform:translateY(-1px); }


/* ---- Advanced feature bubbles: per-bubble metallic shimmer (beta dark) ---- */
@keyframes jwShimmer{ 0%{ background-position:130% 0; } 100%{ background-position:-30% 0; } }

html.jw-beta body:not(.light) .jw-adv-bubble{
  position:relative;
  background-image:linear-gradient(115deg,
     var(--m1) 0%, var(--m2) 16%, var(--m1) 30%,
     var(--mhi) 44%, var(--m2) 52%, var(--m1) 64%,
     var(--m2) 82%, var(--m1) 100%) !important;
  background-size:260% 100% !important;
  background-repeat:no-repeat;
  border:1px solid var(--medge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 .5px rgba(0,0,0,.5),
    0 14px 30px -16px rgba(0,0,0,.55),
    0 0 26px -10px var(--mglow) !important;
  animation:jwShimmer 7s linear infinite;
  transition:box-shadow .3s ease, transform .2s ease;
}
html.jw-beta body:not(.light) .jw-adv-bubble:hover{
  animation-duration:2.6s;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 .5px rgba(0,0,0,.5),
    0 18px 36px -16px rgba(0,0,0,.6),
    0 0 38px -8px var(--mglow) !important;
}
/* let the metallic sheen show through the (collapsed) header bar */
html.jw-beta body:not(.light) .jw-adv-bubble > div:first-child{ background:transparent !important; }

/* Per-bubble metallic hues */
html.jw-beta body:not(.light) .jw-shimmer-emerald{  --m1:#0a2018; --m2:#0f3528; --mhi:#1f7252; --medge:rgba(52,211,153,.45);  --mglow:rgba(16,185,129,.55); }
html.jw-beta body:not(.light) .jw-shimmer-sapphire{ --m1:#0a1c31; --m2:#102c48; --mhi:#1e5687; --medge:rgba(96,165,250,.45);  --mglow:rgba(59,130,246,.55); }
html.jw-beta body:not(.light) .jw-shimmer-amethyst{ --m1:#1c0f2e; --m2:#2b1646; --mhi:#56307f; --medge:rgba(192,132,252,.45); --mglow:rgba(168,85,247,.55); }
html.jw-beta body:not(.light) .jw-shimmer-gold{     --m1:#241c0a; --m2:#3b2f12; --mhi:#7d621f; --medge:rgba(251,191,36,.45);  --mglow:rgba(245,158,11,.55); }

@media (prefers-reduced-motion: reduce){
  html.jw-beta body:not(.light) .jw-adv-bubble{ animation:none; background-position:46% 0; }
}


/* ---- The big "Merge My Files Now!" CTA: vibrant shimmer + energy pulse ---- */
@keyframes jwBtnShimmer{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }
@keyframes jwBtnPulse{
  0%,100%{ box-shadow:0 6px 22px -6px rgba(234,88,12,.5), 0 0 0 0 rgba(245,158,11,0); }
  50%{ box-shadow:0 9px 30px -6px rgba(234,88,12,.72), 0 0 24px 2px rgba(245,158,11,.4); }
}

html.jw-beta body:not(.light) .simple-merge-btn:not(:disabled){
  background-image:linear-gradient(100deg,#c2410c 0%,#ea580c 17%,#f97316 33%,#fbbf24 50%,#f97316 67%,#ea580c 83%,#c2410c 100%) !important;
  background-size:200% 100%;
  border:1px solid rgba(124,45,18,.6);
  color:#fff;
  text-shadow:0 1px 2px rgba(124,45,18,.55);
  animation:jwBtnShimmer 3.4s linear infinite, jwBtnPulse 2.2s ease-in-out infinite;
  transition:transform .14s cubic-bezier(.2,.8,.3,1), filter .2s ease;
}
html.jw-beta body:not(.light) .simple-merge-btn:not(:disabled):hover{
  opacity:1;
  transform:translateY(-2px) scale(1.012);
  filter:brightness(1.06) saturate(1.08);
  animation-duration:1.5s, 1.3s;
}
html.jw-beta body:not(.light) .simple-merge-btn:not(:disabled):active{
  transform:translateY(1px) scale(.997);
}

/* Disabled: a calm metallic slate (no longer dead gray), gentle drift */
html.jw-beta body:not(.light) .simple-merge-btn:disabled{
  background-image:linear-gradient(100deg,#1e2632,#334155,#1e2632) !important;
  background-size:200% 100%;
  color:#94a3b8 !important;
  border:1px solid rgba(148,163,184,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 9px rgba(0,0,0,.3) !important;
  animation:jwBtnShimmer 6.5s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  html.jw-beta body:not(.light) .simple-merge-btn,
  html.jw-beta body:not(.light) .simple-merge-btn:disabled{ animation:none !important; }
}


/* ---- Post-merge "Download" CTA: emerald shimmer + pulse (beta dark) ---- */
@keyframes jwDlPulse{
  0%,100%{ box-shadow:0 6px 22px -6px rgba(16,185,129,.5), 0 0 0 0 rgba(52,211,153,0); }
  50%{ box-shadow:0 9px 30px -6px rgba(16,185,129,.72), 0 0 24px 2px rgba(52,211,153,.42); }
}
html.jw-beta body:not(.light) .simple-download-btn{
  background-image:linear-gradient(100deg,#15803d 0%,#16a34a 17%,#22c55e 33%,#86efac 50%,#22c55e 67%,#16a34a 83%,#15803d 100%) !important;
  background-size:200% 100%;
  border:1px solid rgba(6,95,70,.6);
  color:#fff;
  text-shadow:0 1px 2px rgba(6,78,59,.5);
  animation:jwBtnShimmer 3.4s linear infinite, jwDlPulse 2.2s ease-in-out infinite;
  transition:transform .14s cubic-bezier(.2,.8,.3,1), filter .2s ease;
}
html.jw-beta body:not(.light) .simple-download-btn:hover{
  transform:translateY(-2px) scale(1.012);
  filter:brightness(1.06) saturate(1.08);
  animation-duration:1.5s, 1.3s;
}
html.jw-beta body:not(.light) .simple-download-btn:active{ transform:translateY(1px) scale(.997); }
@media (prefers-reduced-motion: reduce){
  html.jw-beta body:not(.light) .simple-download-btn{ animation:none !important; }
}


/* ---- "Create My Merged Backup" CTA: same gold shimmer + pulse (beta dark) ---- */
html.jw-beta body:not(.light) button[class*="bg-orange-600"][class*="py-4"]:not(:disabled){
  background-image:linear-gradient(100deg,#c2410c 0%,#ea580c 17%,#f97316 33%,#fbbf24 50%,#f97316 67%,#ea580c 83%,#c2410c 100%) !important;
  background-size:200% 100%;
  border:1px solid rgba(124,45,18,.6) !important;
  color:#fff;
  text-shadow:0 1px 2px rgba(124,45,18,.55);
  animation:jwBtnShimmer 3.4s linear infinite, jwBtnPulse 2.2s ease-in-out infinite;
}
html.jw-beta body:not(.light) button[class*="bg-orange-600"][class*="py-4"]:not(:disabled):hover{
  filter:brightness(1.06) saturate(1.08);
  animation-duration:1.5s, 1.3s;
}
/* Disabled: calm metallic slate instead of dead gray */
html.jw-beta body:not(.light) button[class*="bg-orange-600"][class*="py-4"]:disabled{
  background-image:linear-gradient(100deg,#1e2632,#334155,#1e2632) !important;
  background-size:200% 100%;
  color:#94a3b8 !important;
  border:1px solid rgba(148,163,184,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 9px rgba(0,0,0,.3) !important;
  animation:jwBtnShimmer 6.5s linear infinite;
  opacity:1 !important;
  transform:none !important;
}
@media (prefers-reduced-motion: reduce){
  html.jw-beta body:not(.light) button[class*="bg-orange-600"][class*="py-4"]{ animation:none !important; }
}


/* ── Navbar tool row: wrap instead of clipping ─────────────────────────────
   The row is capped at max-w-5xl and scrolls horizontally, while the privacy
   pill right-aligns itself with margin-left:auto. Inside a flex row that is
   already overflowing, an auto margin does not right-align — it parks the
   pill past the visible edge, where the scroll container clips it. The badge
   was cut off mid-word at 1280px in every language (English lost "browser";
   German ran 279px over).
   Above 640px the row wraps, so every control stays readable no matter how
   long the translation is. Below that the horizontal scroll is kept: it is
   the intended affordance on a phone, where wrapping would eat the screen. */
@media (min-width: 640px) {
  .jw-nav-tools { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
}

/* ── Advanced settings disclosure ─────────────────────────────────────
   Simple Mode is gone (v3.32.0): one interface for everyone. What used to
   justify a second mode is handled here instead — the merge settings that
   almost nobody needs to touch (Smart Logic, Quick Sync, Skip Duplicates,
   Deep Clean, conflict resolution) sit behind this, so the panel opens
   showing only "what to bring over". Quiet slate, per the design rules:
   it is a utility control and must not compete with content. */
.jw-adv-disclosure{display:flex;align-items:center;gap:8px;width:100%;
  margin-top:16px;padding:9px 12px;background:rgba(71,85,105,.35);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:600;
  cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast)}
.jw-adv-disclosure:hover{border-color:var(--color-border-strong);
  color:var(--color-text-primary)}
.jw-adv-disclosure-chev{font-size:11px;opacity:.75}
body.light .jw-adv-disclosure{background:rgba(11,46,88,.06)!important;
  border-color:rgba(11,46,88,.14)!important;color:#475569!important}

/* ── Forum, light mode ───────────────────────────────────────────────────────
   The embedded forum (#forum-view) painted from its own dark variable set no
   matter which theme the reader had chosen, so switching the site to light
   left the Community tab black. The palette is a variable set, so the theme is
   mostly a redeclaration; below it are the rules that hard-code a dark value.
   body.is-forum paints from var(--bg), so the page follows. Guarded by
   tests/22_forum.js. */
body.light {
    --bg:      #f4f8ff;
    --bg2:     #ffffff;
    --bg3:     #eef3fb;
    --border:  rgba(11,46,88,.14);
    --border2: rgba(11,46,88,.30);
    --text:    #071a38;
    --muted:   #4d6a8f;
    --green:   #15803d;
    --blue:    #1d4ed8;
    --red:     #b91c1c;
    --amber:   #b45309;
}
body.light #forum-view header {background:rgba(244,248,255,.96);}
body.light #forum-view .post-body,
body.light #forum-view .thread-content,
body.light #forum-view .reply-body {color:#334155;}
body.light #forum-view .post-excerpt {color:rgba(51,65,85,.75);}
body.light #forum-view .thread-back {background:rgba(244,248,255,.92);}