/* Turbo SRT - Tema Turquesa & Pink */
:root {
  --turq-50:#ecfeff;--turq-100:#cffafe;--turq-200:#a5f3fc;--turq-300:#67e8f9;--turq-400:#22d3ee;--turq-500:#06b6d4;--turq-600:#0891b2;--turq-700:#0e7490;--turq-800:#155e75;--turq-900:#164e63;
  --pink-50:#fdf2f8;--pink-100:#fce7f3;--pink-200:#fbcfe8;--pink-300:#f9a8d4;--pink-400:#f472b6;--pink-500:#ec4899;--pink-600:#db2777;--pink-700:#be185d;--pink-800:#9d174d;--pink-900:#831843;
  --bg:#0f1115;--bg-alt:#181b22;--bg-soft:#1f2530;--border:#2b3341;--text:#f5f7fa;--muted:#90a2b5;--accent:var(--turq-500);--accent-alt:var(--pink-500);
  --radius-xs:4px;--radius-sm:6px;--radius:12px;--radius-lg:20px;--radius-pill:999px;--shadow:0 4px 14px -2px rgba(15,183,210,.25),0 2px 4px -1px rgba(0,0,0,.35);
  --grad-main:linear-gradient(135deg,var(--turq-500),var(--pink-500));
  --code-bg:#0c0f13;
  --focus-ring:0 0 0 3px rgba(6,182,212,.4),0 0 0 1px var(--accent);
  scroll-behavior:smooth;
}
.light {
  --bg:#f8fafc;--bg-alt:#ffffff;--bg-soft:#f1f5f9;--border:#d8e1ea;--text:#1b2430;--muted:#66778a;--code-bg:#0f1115;--shadow:0 4px 14px -2px rgba(236,72,153,.25),0 2px 4px -1px rgba(0,0,0,.08);
}
* {box-sizing:border-box}
html,body {margin:0;padding:0;font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:15px;line-height:1.4;background:radial-gradient(circle at 30% 20%,rgba(6,182,212,.15),transparent 60%),radial-gradient(circle at 80% 70%,rgba(236,72,153,.18),transparent 65%),var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;}
body {display:flex;flex-direction:column;}
.noise-layer {position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 200 200'%3E%3Crect fill='%23000' width='200' height='200'/%3E%3Cg fill='none' stroke='%23888' stroke-width='.5'%3E%3Cpath d='M0 0L200 200ZM200 0L0 200Z' opacity='.05'/%3E%3C/g%3E%3C/svg%3E");mix-blend-mode:overlay;animation:grain 7s steps(10) infinite;}
@keyframes grain {0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,2%)}20%{transform:translate(2%,-1%)}30%{transform:translate(1%,2%)}40%{transform:translate(-2%,1%)}50%{transform:translate(2%,2%)}60%{transform:translate(-1%,-2%)}70%{transform:translate(2%,1%)}80%{transform:translate(-2%,2%)}90%{transform:translate(1%,-1%)}}
::-webkit-scrollbar {width:10px;height:10px}
::-webkit-scrollbar-track {background:var(--bg-alt)}
::-webkit-scrollbar-thumb {background:linear-gradient(var(--turq-600),var(--pink-600));border-radius:6px}
::-webkit-scrollbar-thumb:hover {background:linear-gradient(var(--turq-500),var(--pink-500))}
.site-header {display:flex;justify-content:space-between;align-items:center;padding:14px clamp(1rem,3vw,48px) 10px;position:sticky;top:0;backdrop-filter:blur(14px) saturate(150%);background:linear-gradient(to right,rgba(15,17,21,.72),rgba(24,27,34,.72));border-bottom:1px solid var(--border);z-index:40}
.brand {display:flex;align-items:center;gap:14px}
.brand .logo {display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--grad-main);border-radius:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.brand .logo:before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 60%);mix-blend-mode:overlay}
.brand-text h1 {font-size:clamp(1.3rem,2.2vw,2.2rem);font-weight:800;margin:0;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-1px}
.tagline {margin:2px 0 0;font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:.5px}
.header-actions {display:flex;align-items:center;gap:10px}
.header-actions .gh {text-decoration:none;font-weight:600;font-size:.84rem;padding:8px 16px;border-radius:var(--radius-pill);background:var(--bg-soft);color:var(--text);border:1px solid var(--border);transition:.25s;}
.header-actions .gh:hover {background:var(--grad-main);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
button,select,input,textarea {font-family:inherit;font-size:inherit}
button {cursor:pointer}
.ghost {background:var(--bg-soft);border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;transition:.28s}
.ghost:hover {background:var(--grad-main);color:#fff;border-color:transparent;box-shadow:0 6px 20px -4px rgba(6,182,212,.4)}
.ghost:focus-visible {outline:none;box-shadow:var(--focus-ring)}
.layout {display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;max-width:1500px;padding:32px clamp(1rem,3vw,56px) 80px;margin:0 auto;flex:1;width:100%}
.panel {background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:24px;padding:22px 22px 30px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;box-shadow:0 4px 18px -4px rgba(0,0,0,.6),0 2px 4px -1px rgba(0,0,0,.4)}
.panel:before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 0,rgba(236,72,153,.25),transparent 60%),radial-gradient(circle at 10% 100%,rgba(6,182,212,.22),transparent 60%);pointer-events:none;mix-blend-mode:overlay}
.panel h2 {margin:0;font-size:1.05rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px}
.panel-head {display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
.panel-head .mini-actions {display:flex;gap:8px;flex-wrap:wrap}
textarea {width:100%;min-height:220px;resize:vertical;padding:16px 18px;background:var(--bg-soft);border:1px solid var(--border);border-radius:18px;color:var(--text);font:500 0.92rem/1.5 'JetBrains Mono',monospace;letter-spacing:.3px;outline:none;transition:.25s;}
textarea:focus {border-color:var(--accent-alt);box-shadow:0 0 0 1px var(--accent-alt),0 0 0 4px rgba(236,72,153,.3)}
.metrics {font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;color:var(--muted);background:var(--bg-soft);padding:6px 12px;border-radius:14px;display:inline-flex;align-self:flex-start;border:1px solid var(--border)}
.options {background:var(--bg-soft);border:1px solid var(--border);border-radius:18px;padding:10px 14px}
.options summary {cursor:pointer;list-style:none;font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:8px}
.options summary::-webkit-details-marker {display:none}
.options .hint {font-size:.65rem;text-transform:uppercase;font-weight:700;color:var(--pink-400);letter-spacing:1px}
.grid-options {margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.grid-options label {display:flex;flex-direction:column;gap:6px;font-size:.7rem;text-transform:uppercase;font-weight:700;letter-spacing:.8px;color:var(--muted)}
.grid-options label.music-opt {background:rgba(236,72,153,.06);border:1px dashed var(--pink-400);padding:6px 10px;border-radius:10px}
.grid-options label.music-opt input, .grid-options label.music-opt select {background:rgba(255,255,255,.04)}
.grid-options label.music-opt input[type=text] {letter-spacing:.5px}
.grid-options input,.grid-options select {background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);font-size:.8rem;font-weight:600;outline:none;transition:.25s}
.grid-options input:focus,.grid-options select:focus {border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.hide {display:none !important}
.primary-actions {display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.action {flex:1;min-width:160px;background:var(--grad-main);color:#fff;font-weight:700;letter-spacing:.5px;padding:16px 20px;border:none;border-radius:18px;box-shadow:0 10px 28px -6px rgba(6,182,212,.45),0 4px 8px -2px rgba(236,72,153,.4);position:relative;overflow:hidden;transition:.4s;text-transform:uppercase;font-size:.7rem;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.action.alt {background:linear-gradient(135deg,var(--pink-600),var(--turq-600));}
.action:disabled {opacity:.45;filter:saturate(.3);cursor:not-allowed}
.action:not(:disabled):hover {transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(236,72,153,.55),0 6px 14px -4px rgba(6,182,212,.55)}
.action:focus-visible {outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 5px var(--accent-alt)}
.pulse {animation:pulse 2.8s infinite}
@keyframes pulse {0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.mini,.file-label {background:var(--bg-soft);border:1px solid var(--border);color:var(--text);padding:8px 14px;font-size:.65rem;font-weight:700;letter-spacing:.8px;border-radius:14px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;transition:.25s;position:relative}
.mini.warn {color:var(--pink-300)}
.mini:hover,.file-label:hover {background:var(--grad-main);color:#fff;border-color:transparent}
.mini:focus-visible {outline:none;box-shadow:var(--focus-ring)}
.file-label {cursor:pointer}
.code-wrapper {background:var(--code-bg);border:1px solid #222831;border-radius:18px;padding:14px 0 14px 0;position:relative;display:flex;flex-direction:column;height:340px}
.code {margin:0;flex:1;overflow:auto;padding:4px 22px 28px;font:500 0.78rem/1.4 'JetBrains Mono',monospace;letter-spacing:.3px;white-space:pre;tab-size:2;color:#d2ecf3}
.status-bar {font:600 .65rem 'JetBrains Mono',monospace;background:linear-gradient(90deg,var(--turq-600),var(--pink-600));-webkit-background-clip:text;background-clip:text;color:transparent;padding:8px 4px 0;text-transform:uppercase;letter-spacing:2px;display:flex;justify-content:space-between;gap:12px}
.preview-tabela {display:grid;gap:4px;max-height:180px;overflow:auto;padding:6px 2px 4px 2px;border:1px solid var(--border);border-radius:16px;background:var(--bg-soft);font:500 0.65rem/1.1 'JetBrains Mono',monospace}
.preview-tabela .linha {display:grid;grid-template-columns:42px 140px 1fr;gap:8px;align-items:center;padding:6px 10px;border-radius:12px;background:linear-gradient(145deg,#1b232d,#161d25);border:1px solid #252e39;min-width:0}
.preview-tabela .linha:hover {background:linear-gradient(145deg,#21303a,#19232d)}
.preview-tabela .linha span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-tabela .linha .n {font-weight:700;color:var(--pink-300)}
.preview-tabela .linha .t {font-weight:600;color:var(--turq-300)}
.preview-tabela .linha .c {font-weight:500;color:#cdd9e5}
.donate {align-self:start;max-width:420px}
.pix-box {display:flex;gap:10px;align-items:center;background:var(--bg-soft);padding:10px 14px;border-radius:14px;border:1px solid var(--border);font:600 .8rem/1 'JetBrains Mono',monospace}
.pix-box code {background:var(--bg);padding:6px 10px;border-radius:10px}
.qr {display:none}
.how {margin:10px 0 0 14px;padding:0;font-size:.7rem;line-height:1.3;display:grid;gap:4px}
.how li {margin:0}
.thanks {display:block;margin-top:4px;color:var(--muted);font-size:.65rem;text-align:center}
.timeline-wrapper {margin:14px 0 12px;position:relative;background:var(--bg-soft);border:1px solid var(--border);border-radius:18px;padding:14px 16px 26px}
.timeline {display:flex;gap:6px;align-items:flex-end;height:92px;width:100%;position:relative;padding:6px 4px 14px 4px}
.timeline .seg {flex:0 0 auto;background:var(--grad-main);border-radius:6px;position:relative;cursor:pointer;transition:.25s;box-shadow:0 3px 10px -2px rgba(0,0,0,.55);min-width:7px}
.timeline .seg:hover {filter:brightness(1.3)}
.timeline .seg:after {content:attr(data-i);position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font:600 9px/1 'JetBrains Mono',monospace;color:var(--muted);pointer-events:none;white-space:nowrap}
.timeline .seg.active {outline:2px solid var(--pink-400);outline-offset:3px;filter:brightness(1.45)}
.timeline-total {margin-top:2px;font:600 .55rem/1 'JetBrains Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.drop-zone {border:2px dashed var(--turq-500);padding:14px 18px;border-radius:18px;text-align:center;font-size:.7rem;font-weight:600;letter-spacing:.8px;color:var(--turq-300);background:rgba(6,182,212,.08);transition:.3s;margin-top:4px}
.drop-zone.dragover {background:rgba(236,72,153,.15);border-color:var(--pink-400);color:var(--pink-300)}
.site-footer {text-align:center;padding:36px 20px 60px;font-size:.7rem;font-weight:600;color:var(--muted);letter-spacing:.6px}
.site-footer a {color:var(--pink-400);text-decoration:none}
.site-footer a:hover {text-decoration:underline}
@media (max-width:840px){.layout{padding-top:12px;padding-bottom:90px}.panel{padding:18px 18px 28px;border-radius:22px}.code-wrapper{height:300px}.preview-tabela{max-height:150px}.brand .logo{width:52px;height:52px}.action{padding:14px 18px}}
@media (max-width:560px){.site-header{padding:12px clamp(.4rem,4vw,1rem)}.layout{gap:22px;padding:22px clamp(.6rem,4vw,1.1rem) 70px}.panel{gap:16px}.primary-actions{flex-direction:column}.action{width:100%}.panel-head{flex-direction:column;align-items:flex-start}.grid-options{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.tagline{display:none}}