function Tweaks() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accentColor": "#1E7BFF",
    "accentPreset": "Zion Blue",
    "grainOpacity": 0.035,
    "displayStyle": "mixed",
    "showTicker": true
  }/*EDITMODE-END*/;

  const [tweaks, setTweaks] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accentColor);
    // derive accent-ink and soft
    document.documentElement.style.setProperty('--accent-ink', tweaks.accentColor);
    document.documentElement.style.setProperty('--accent-soft', tweaks.accentColor + '1F');
    document.documentElement.style.setProperty('--accent-line', tweaks.accentColor + '48');
    document.body.style.setProperty('--grain-op', tweaks.grainOpacity);
    const styleEl = document.getElementById('grain-style') || (() => {
      const s = document.createElement('style'); s.id = 'grain-style'; document.head.appendChild(s); return s;
    })();
    styleEl.textContent = `body::before { opacity: ${tweaks.grainOpacity} !important; }`;

    const ticker = document.querySelector('.ticker');
    if (ticker) ticker.style.display = tweaks.showTicker ? 'flex' : 'none';
  }, [tweaks]);

  const presets = [
    { n: 'Zion Blue', c: '#1E7BFF' },
    { n: 'Electric', c: '#4D97FF' },
    { n: 'Violet', c: '#7C6BFF' },
    { n: 'Emerald', c: '#0FB981' },
    { n: 'Sunset', c: '#F5833B' },
    { n: 'Mono', c: '#F4F4F5' },
  ];

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Accent">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
          {presets.map(p => (
            <button
              key={p.n}
              onClick={() => setTweaks({ accentColor: p.c, accentPreset: p.n })}
              style={{
                padding: '10px 8px',
                borderRadius: 8,
                border: tweaks.accentPreset === p.n ? `1px solid ${p.c}` : '1px solid #2A2A30',
                background: tweaks.accentPreset === p.n ? `${p.c}22` : '#111113',
                color: '#F4F4F5',
                fontSize: 11,
                fontFamily: 'Geist Mono, monospace',
                letterSpacing: '0.04em',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                cursor: 'pointer',
              }}
            >
              <span style={{ width: 16, height: 16, borderRadius: '50%', background: p.c, boxShadow: `0 0 10px ${p.c}80` }}></span>
              {p.n}
            </button>
          ))}
        </div>
        <window.TweakColor label="Custom" value={tweaks.accentColor} onChange={(v) => setTweaks({ accentColor: v, accentPreset: 'Custom' })} />
      </window.TweakSection>

      <window.TweakSection title="Textura">
        <window.TweakSlider
          label="Grain"
          value={tweaks.grainOpacity}
          min={0}
          max={0.12}
          step={0.005}
          onChange={(v) => setTweaks({ grainOpacity: v })}
        />
        <window.TweakToggle
          label="Ticker de dados"
          value={tweaks.showTicker}
          onChange={(v) => setTweaks({ showTicker: v })}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}
window.Tweaks = Tweaks;