.rrcd { --bg:#fff; --fg:#1f2937; --muted:#6b7280; --primary:#0d6efd; --accent:#e7f1ff; }
.rrcd[data-theme="dark"] { --bg:#0b1020; --fg:#e5e7eb; --muted:#9ca3af; --primary:#60a5fa; --accent:#111827; }
.rrcd { font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color:var(--fg); }
.rrcd-card { background:var(--bg); border:1px solid #e5e7eb; border-radius:12px; padding:18px; box-shadow:0 4px 16px rgba(0,0,0,.05); }
.rrcd-header h3 { margin:0 0 4px; }
.rrcd-sub { color:var(--muted); font-size:13px; margin-bottom:12px; }

.rrcd-inputs label{ display:block; font-weight:600; margin:10px 0 6px; }
#rrcd-hex { width:100%; min-height:110px; border:1px solid #e5e7eb; border-radius:8px; padding:10px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
#rrcd-file { width:100%; }

.rrcd-row { display:flex; gap:12px; margin:10px 0; }
.rrcd-col { flex:1; }
.rrcd-col select{ width:100%; padding:8px; border:1px solid #e5e7eb; border-radius:8px; }

#rrcd-decode, #rrcd-clear { padding:10px 14px; border-radius:8px; border:0; cursor:pointer; margin-right:8px; }
#rrcd-decode { background:var(--primary); color:#fff; }
#rrcd-clear { background:#f3f4f6; color:#111827; }
.rrcd-or { text-align:center; position:relative; margin:10px 0; color:var(--muted); }
.rrcd-or span{ background:var(--bg); padding:0 8px; position:relative; z-index:2; }
.rrcd-or:before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#e5e7eb; z-index:1; }

#rrcd-status { margin:10px 0; color:var(--muted); }

.rrcd-results { margin-top:12px; }
.rrcd-tabs { display:flex; gap:8px; border-bottom:1px solid #e5e7eb; }
.rrcd-tabs button { background:transparent; border:0; padding:8px 12px; cursor:pointer; color:var(--muted); }
.rrcd-tabs button.active { color:var(--primary); border-bottom:2px solid var(--primary); }

.rrcd-panel { display:none; }
.rrcd-panel.active { display:block; }
#rrcd-json { background:#0a0f1a; color:#e5e7eb; border-radius:8px; padding:12px; overflow:auto; }

.rrcd-tree { font-family:ui-monospace, Menlo, Consolas, monospace; }
.rrcd-tree ul { list-style:none; padding-left:1rem; }
.rrcd-tree .k{ color:#2563eb; } .rrcd-tree .v{ color:#047857; } .rrcd-tree .type { color:#6b7280; font-style:italic; }