.griddy-decoder {
  --gd-bg:#0f172a;
  --gd-panel:#111827;
  --gd-ink:#e5e7eb;
  --gd-muted:#9ca3af;
  --gd-accent:#38bdf8;
  --gd-line:#f8fafc;
  --gd-border:#334155;
  --gd-good:#86efac;
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(140deg,#0b1020,#101827 55%,#16223a);
  color:var(--gd-ink);
  border:1px solid var(--gd-border);
  border-radius:16px;
  overflow:hidden;
  margin:16px 0;
}
.griddy-decoder *,
.griddy-decoder *::before,
.griddy-decoder *::after{box-sizing:border-box}
.griddy-decoder .gd-header{padding:24px 18px 12px;max-width:1200px;margin:auto}
.griddy-decoder .gd-header h2{margin:0 0 8px;font-size:clamp(26px,3vw,42px);letter-spacing:.2px;color:#f8fafc;line-height:1.15}
.griddy-decoder .gd-header p{line-height:1.5;color:var(--gd-muted);margin:0}
.griddy-decoder .gd-main{max-width:1200px;margin:auto;padding:0 18px 40px;display:grid;grid-template-columns:1fr;gap:16px}
.griddy-decoder .gd-section{background:rgba(17,24,39,.92);border:1px solid var(--gd-border);border-radius:16px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.24)}
.griddy-decoder h3{font-size:20px;margin:0 0 12px;color:#f8fafc}
.griddy-decoder h4{font-size:16px;margin:18px 0 8px;color:#f8fafc}
.griddy-decoder label{display:block;margin:8px 0 6px;color:#f8fafc}
.griddy-decoder textarea,
.griddy-decoder input,
.griddy-decoder select,
.griddy-decoder button{font:inherit}
.griddy-decoder textarea,
.griddy-decoder input,
.griddy-decoder select{width:100%;background:#0b1220;color:var(--gd-ink);border:1px solid var(--gd-border);border-radius:10px;padding:10px;outline:none}
.griddy-decoder textarea{min-height:98px;resize:vertical}
.griddy-decoder textarea:focus,
.griddy-decoder input:focus,
.griddy-decoder select:focus{border-color:var(--gd-accent);box-shadow:0 0 0 2px rgba(56,189,248,.16)}
.griddy-decoder button{background:#1f2937;color:var(--gd-ink);border:1px solid var(--gd-border);border-radius:10px;padding:10px 12px;cursor:pointer}
.griddy-decoder button:hover{border-color:var(--gd-accent);background:#273548}
.griddy-decoder button.gd-primary{background:#0ea5e9;border-color:#38bdf8;color:#06111d;font-weight:700}
.griddy-decoder button.gd-danger{border-color:#7f1d1d;color:#fecaca;background:#3f1118}
.griddy-decoder .gd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.griddy-decoder .gd-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.griddy-decoder .gd-small{font-size:13px;color:var(--gd-muted)}
.griddy-decoder .gd-out{white-space:pre-wrap;background:#07101d;border:1px solid var(--gd-border);border-radius:10px;padding:12px;min-height:48px;color:#e2e8f0;overflow:auto}
.griddy-decoder .gd-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.griddy-decoder .gd-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:320px}
.griddy-decoder .gd-pickbtn{padding:12px 8px;text-align:center}
.griddy-decoder .gd-pickbtn.selected{background:#0ea5e9;color:#06111d;border-color:#7dd3fc;font-weight:700}
.griddy-decoder .gd-tokens{display:flex;gap:8px;flex-wrap:wrap;min-height:42px;border:1px dashed var(--gd-border);border-radius:10px;padding:8px;background:#08111f}
.griddy-decoder .gd-token{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:8px;background:#1e293b;border:1px solid #475569;color:#f8fafc}
.griddy-decoder .gd-token.gd-space{background:#27272a;color:#d4d4d8}
.griddy-decoder .gd-symbol-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.griddy-decoder .gd-card{background:#0b1220;border:1px solid var(--gd-border);border-radius:10px;padding:7px;text-align:center;color:var(--gd-line)}
.griddy-decoder .gd-letter{font-weight:800;font-size:18px;color:#f8fafc;margin-bottom:2px}
.griddy-decoder svg{display:block;margin:auto;max-width:100%;color:var(--gd-line)}
.griddy-decoder .gd-svgbox{height:54px;display:flex;align-items:center;justify-content:center}
.griddy-decoder .gd-variant-table{width:100%;border-collapse:collapse;margin-top:8px}
.griddy-decoder .gd-variant-table th,
.griddy-decoder .gd-variant-table td{border-bottom:1px solid #243044;padding:8px;text-align:left;vertical-align:top}
.griddy-decoder .gd-variant-table th{color:#cbd5e1;font-size:13px}
.griddy-decoder .gd-coord{color:var(--gd-good);font-weight:700}
.griddy-decoder .gd-warn{color:#fde68a}
.griddy-decoder .gd-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.griddy-decoder details{border:1px solid var(--gd-border);border-radius:12px;padding:10px;background:#0b1220}
.griddy-decoder summary{cursor:pointer;color:#e2e8f0;font-weight:700}
@media (max-width:850px){
  .griddy-decoder .gd-grid,
  .griddy-decoder .gd-split{grid-template-columns:1fr}
  .griddy-decoder .gd-picker{max-width:100%}
}