/* ===================================================================
   MODOO HUB — Instrument theme (Hybrid A+: Glass Signal + Precision Instrument)
   Shared token/component sheet. Linked from individual tool pages via:
   <link rel="stylesheet" href="theme-instrument.css">
   Design rationale: design-mockups/DESIGN_DIRECTION.md
   =================================================================== */

:root{
  --bg:#080B14;
  --text:#EDF0FA; --text-muted:rgba(237,240,250,0.62); --text-dim:rgba(237,240,250,0.42);
  --glass:rgba(255,255,255,0.055); --glass-border:rgba(255,255,255,0.11); --glass-hi:rgba(255,255,255,0.09);
  --violet:#8B7CFA; --cyan:#3FD8C8;
  --good:#4FCB9A; --warn:#E8C155; --danger:#F2725E; --info:#4FA6E8; --mid:#E89355;
  --tooltip-bg:rgba(18,20,32,0.9); --tooltip-fg:rgba(237,240,250,0.85); --tooltip-border:rgba(255,255,255,0.14);
  --sans: -apple-system, "Segoe UI", "Pretendard", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg); color:var(--text); font-family:var(--sans); min-height:100vh; position:relative; overflow-x:hidden; -webkit-font-smoothing:antialiased;}

/* ---- ambient mesh (injected by theme-instrument.js) ---- */
.mesh{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.30;}
.blob.a{width:520px; height:520px; background:var(--violet); top:-160px; left:-120px; animation:drift1 24s ease-in-out infinite alternate;}
.blob.b{width:460px; height:460px; background:var(--cyan); bottom:-180px; right:-100px; animation:drift2 28s ease-in-out infinite alternate;}
@keyframes drift1{ from{transform:translate(0,0);} to{transform:translate(60px,40px);} }
@keyframes drift2{ from{transform:translate(0,0);} to{transform:translate(-50px,-30px);} }
@media (prefers-reduced-motion:reduce){ .blob{animation:none;} }

/* ---- header ---- */
header{position:relative; z-index:1; border-bottom:1px solid var(--glass-border); padding:16px 24px; display:flex; align-items:center; gap:12px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:var(--glass);}
.dot{width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--cyan));}
.header-label, .wordmark{font-weight:700; font-size:13px; letter-spacing:-.01em; background:linear-gradient(135deg,var(--violet),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-family:var(--sans);}
.back-link{font-size:13px; color:var(--text-muted); text-decoration:none;}
.back-link:hover{color:var(--cyan);}
.lang-toggle{margin-left:auto; font-size:12px; color:var(--text-muted); cursor:pointer; padding:5px 12px; border:1px solid var(--glass-border); border-radius:8px; font-family:var(--mono); transition:all .15s; background:transparent;}
.lang-toggle:hover{border-color:var(--cyan); color:var(--text);}

/* ---- main / hero ---- */
main{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:40px 24px 80px;}
.eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; background:linear-gradient(135deg,var(--violet),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:10px; font-weight:700;}
h1{font-size:clamp(24px,4.5vw,34px); font-weight:700; letter-spacing:-0.02em; margin:0 0 10px; text-wrap:balance;}
h1 span{background:linear-gradient(135deg,var(--violet),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.subtitle{color:var(--text-muted); font-size:14px; line-height:1.7; margin-bottom:36px; max-width:60ch;}

/* ---- layout grid: inputs left, sticky readout right ---- */
.grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:16px; align-items:start;}
@media (max-width:820px){ .grid{grid-template-columns:1fr;} .readout{position:static !important;} }
.panel{display:flex; flex-direction:column; gap:14px;}

/* ---- glass input cards ---- */
.card{background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:16px; padding:18px 20px; box-shadow:0 1px 0 var(--glass-hi) inset; transition:border-color .2s;}
.card:focus-within{border-color:rgba(139,124,250,0.55);}
.field-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px; display:flex; justify-content:space-between; font-family:var(--mono);}
.formula{color:var(--text-dim); font-family:var(--mono); font-size:10px;}
.input-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.input-wrap{display:flex; align-items:baseline; gap:6px;}
input[type=number]{flex:1; background:transparent; border:none; outline:none; font-size:26px; font-weight:600; color:var(--text); font-family:var(--mono); width:100%; min-width:0; font-variant-numeric:tabular-nums;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;}
input[type=number]:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px;}
.unit{color:var(--text-dim); font-size:13px; font-family:var(--mono);}

input[type=text],input[type=password],input[type=email],input[type=search],input[type=url]{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:8px;
  padding:10px 12px; color:var(--text); font-family:var(--mono); font-size:13px; outline:none; margin-bottom:8px;
}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus{border-color:var(--cyan);}

input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{
  color-scheme:dark; flex:1; background:transparent; border:none; outline:none; font-size:18px; font-weight:600;
  color:var(--text); font-family:var(--mono); width:100%; min-width:0;
}
input[type=date]:focus-visible,input[type=time]:focus-visible,input[type=datetime-local]:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px;}
select{background:var(--surface2,rgba(255,255,255,0.03)); color:var(--text); border:1px solid var(--glass-border); border-radius:8px; padding:8px 10px; font-family:var(--sans); font-size:14px; outline:none;}
select:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
textarea{background:transparent; border:none; outline:none; color:var(--text); font-family:var(--sans); width:100%; resize:vertical;}

.rbtn-row{display:flex; gap:8px; flex-wrap:wrap;}
.rbtn{flex:1; padding:9px 8px; border:1px solid var(--glass-border); border-radius:10px; text-align:center; font-size:12.5px; cursor:pointer; color:var(--text-muted); background:rgba(255,255,255,0.02); transition:all .2s; white-space:nowrap; font-family:var(--mono);}
.rbtn:hover{border-color:rgba(255,255,255,0.22);}
.rbtn.on{border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--violet),var(--cyan)); box-shadow:0 4px 16px rgba(139,124,250,0.35);}
.rbtn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

/* ---- readout panel ---- */
.readout{position:sticky; top:20px; background:var(--glass); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid var(--glass-border); border-radius:20px; padding:28px; box-shadow:0 1px 0 var(--glass-hi) inset, 0 20px 60px rgba(0,0,0,0.25);}
.readout-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.readout-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); display:flex; align-items:center;}
.pill{padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center;}

.bmi-display{text-align:center; padding:10px 0 4px;}
.bmi-num{font-family:var(--mono); font-size:60px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 0 30px currentColor;}

.gauge{margin:22px 0 6px;}
.gauge-track{height:5px; border-radius:3px; background:rgba(255,255,255,0.08); position:relative;}
.gauge-zone{position:absolute; top:0; bottom:0; border-radius:3px;}
.gauge-marker{position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(255,255,255,0.15),0 4px 14px rgba(0,0,0,0.4); transition:left .6s cubic-bezier(.16,1,.3,1);}
.gauge-ticks{display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; color:var(--text-dim); margin-top:10px;}

.delta-line{font-size:13px; color:var(--text-muted); margin:18px 0; padding:12px 14px; background:rgba(255,255,255,0.04); border-radius:12px; border:1px solid var(--glass-border);}
.delta-line b{color:var(--text); font-family:var(--mono);}

.divider{height:1px; background:var(--glass-border); margin:14px 0;}
.row{display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--glass-border);}
.row:last-child{border-bottom:none;}
.lk{color:var(--text-muted); display:flex; align-items:center;}
.lv{font-family:var(--mono); color:var(--text); font-variant-numeric:tabular-nums;}
.lv.good{color:var(--good);}

.cal-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
.cal-card{background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:14px; padding:14px; text-align:center;}
.cal-card.highlight{background:rgba(139,124,250,0.1); border-color:rgba(139,124,250,0.35);}
.cal-label{font-size:11px; color:var(--text-dim); margin-bottom:6px; font-family:var(--mono);}
.cal-val{font-family:var(--mono); font-size:19px; font-weight:700; color:var(--cyan);}
.cal-val span{font-size:11px; color:var(--text-dim); font-weight:400;}

/* ---- explicit "compute" CTA (pages that don't auto-calc on input) ---- */
.calc-btn{width:100%; background:linear-gradient(135deg,var(--violet),var(--cyan)); color:#0B0E13; border:none; border-radius:12px; padding:14px; font-size:15px; font-weight:700; cursor:pointer; margin-top:6px; font-family:var(--sans); box-shadow:0 4px 20px rgba(139,124,250,0.3); transition:opacity .15s;}
.calc-btn:hover{opacity:.9;}
.calc-btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

/* ---- progressive-disclosure info badge (button + JS toggle, see theme-instrument.js) ---- */
.info{position:relative; display:inline-flex; margin-left:6px;}
.info-badge{width:22px; height:22px; margin:-4px; border-radius:50%; border:1px solid var(--glass-border); color:var(--text-dim); font-size:9.5px; font-family:var(--mono); display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(255,255,255,0.02); transition:border-color .15s,color .15s; padding:0;}
.info-badge:hover, .info-badge[aria-expanded="true"]{border-color:var(--cyan); color:var(--text);}
.info-badge:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
.tooltip{position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px); width:216px; background:var(--tooltip-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--tooltip-border); border-radius:10px; padding:11px 13px; font-size:11.5px; line-height:1.65; color:var(--tooltip-fg); text-align:left; opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease; pointer-events:none; z-index:8; box-shadow:0 14px 34px rgba(0,0,0,0.35); font-family:var(--sans);}
.tooltip::after{content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:0; height:0; border:6px solid transparent; border-top-color:var(--tooltip-bg);}
.info.open .tooltip, .info:hover .tooltip{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.info.right .tooltip{left:auto; right:-6px; transform:translateY(4px);}
.info.right.open .tooltip, .info.right:hover .tooltip{transform:translateY(0);}
.info.right .tooltip::after{left:auto; right:12px; transform:none;}

/* ---- SEO / FAQ (contrast-fixed per 2026-07 audit: text-muted not text-dim) ---- */
.seo{margin-top:40px; padding-top:28px; border-top:1px solid var(--glass-border);}
.seo h2{font-size:15px; font-weight:700; margin-bottom:8px; color:var(--text);}
.seo p{font-size:13px; color:var(--text-muted); line-height:1.8; margin-bottom:14px;}
.seo strong{color:var(--text);}
.seo-sub{font-size:14px; font-weight:700; margin:16px 0 8px; color:var(--text);}
details.faq-item{border:1px solid var(--glass-border); border-radius:10px; margin-bottom:8px; background:var(--glass);}
details.faq-item summary{padding:12px 16px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-muted); list-style:none;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item[open] summary{border-bottom:1px solid var(--glass-border); color:var(--text);}
details.faq-item p{padding:12px 16px; font-size:13px; color:var(--text-muted); line-height:1.8;}
.seo-ul{padding-left:18px; margin-bottom:14px;}
.seo-ul li{font-size:13px; color:var(--text-muted); line-height:1.9; margin-bottom:4px;}

footer{position:relative; z-index:1; text-align:center; font-size:12px; color:var(--text-dim); margin-top:32px;}

/* ---- small utility button (copy / secondary actions) ---- */
.copy-btn{padding:6px 14px; border:1px solid var(--glass-border); border-radius:8px; font-size:11.5px; cursor:pointer; background:rgba(255,255,255,0.02); color:var(--text-dim); font-family:var(--mono); transition:all .15s;}
.copy-btn:hover{border-color:var(--cyan); color:var(--text);}
.copy-btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

/* ---- radio/checkbox option row (data & converter tools) ---- */
.opts{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px;}
.opt-label{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-muted); cursor:pointer; font-family:var(--sans);}
.opt-label input[type=radio],.opt-label input[type=checkbox]{accent-color:var(--cyan);}

/* ---- dense character/token grid (ascii/unicode tables) ---- */
.grid-box{display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:5px; max-height:220px; overflow-y:auto; margin-top:10px; padding-right:2px;}
.char-cell{background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:6px; padding:5px 3px; text-align:center; font-family:var(--mono);}
.char-cell .ch{font-size:13px; color:var(--text);}
.char-cell .num{font-size:9px; color:var(--text-dim); margin-top:2px;}

/* ===================================================================
   Extended primitives — dual-editor / toolbar / drop-zone / result-panel
   Added for non-gauge tools (encoders, hashers, image utilities) that
   don't fit the BMI-style readout. Reuses the same tokens/materials.
   =================================================================== */

/* ---- generic panel (single-card tools) ---- */
.box{background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:16px; padding:18px 20px; margin-bottom:16px; box-shadow:0 1px 0 var(--glass-hi) inset;}
.label,.section-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px; font-family:var(--mono);}

/* ---- toolbar / action buttons ---- */
.toolbar{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; align-items:center;}
.btn{background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:8px; padding:8px 16px; font-size:13px; color:var(--text-muted); cursor:pointer; font-family:var(--sans); transition:all .15s;}
.btn:hover{border-color:var(--cyan); color:var(--text);}
.btn.primary{background:linear-gradient(135deg,var(--violet),var(--cyan)); border-color:transparent; color:#0B0E13; font-weight:700;}
.btn.primary:hover{opacity:.9; color:#0B0E13;}
.btn.danger:hover{border-color:var(--danger); color:var(--danger);}
.btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

/* ---- option / mode chip row ---- */
.options-row,.mode-row{display:flex; gap:8px; margin-bottom:16px; align-items:center; flex-wrap:wrap;}
.opt-label-inline{font-size:12px; color:var(--text-dim); margin-right:4px;}
.opt-btn,.mode-btn{background:rgba(255,255,255,0.02); border:1px solid var(--glass-border); border-radius:8px; padding:6px 14px; font-size:12px; color:var(--text-muted); cursor:pointer; font-family:var(--mono); transition:all .15s;}
.opt-btn:hover,.mode-btn:hover{border-color:var(--cyan); color:var(--text);}
.opt-btn.active,.mode-btn.on{border-color:transparent; background:rgba(63,216,200,0.14); color:var(--cyan);}

/* ---- status bar ---- */
.status{display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; font-size:13px; margin-bottom:16px; border:1px solid var(--glass-border); background:var(--glass);}
.status.ok{border-color:rgba(79,203,154,0.35); color:var(--good); background:rgba(79,203,154,0.08);}
.status.err{border-color:rgba(242,114,94,0.35); color:var(--danger); background:rgba(242,114,94,0.08);}
.status-dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0;}

/* ---- dual-pane text editor ---- */
.editor-wrap{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
@media (max-width:700px){ .editor-wrap{grid-template-columns:1fr;} }
.editor-box{display:flex; flex-direction:column; background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:16px; padding:16px;}
.editor-label{font-size:11px; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono);}
.char-count{font-family:var(--mono); font-size:11px; color:var(--text-dim);}
.copy-small{font-size:11px; color:var(--text-dim); cursor:pointer; padding:3px 8px; border:1px solid var(--glass-border); border-radius:6px; transition:all .15s;}
.copy-small:hover{color:var(--cyan); border-color:var(--cyan);}
.editor-box textarea{flex:1; min-height:280px; font-family:var(--mono); font-size:13px; line-height:1.6;}

/* ---- drop zone (file upload) ---- */
.drop-zone{border:2px dashed var(--glass-border); border-radius:16px; padding:28px 20px; text-align:center; cursor:pointer; transition:all .15s; margin-bottom:16px; background:var(--glass);}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--cyan); background:rgba(63,216,200,0.06);}
.drop-zone p{font-size:13px; color:var(--text-muted); pointer-events:none;}
.drop-zone input{display:none;}
.drop-icon{font-size:28px; margin-bottom:8px;}
.drop-hint,.drop-text{font-size:12px; color:var(--text-dim);}
.file-info{font-size:12px; color:var(--text-muted); margin-top:8px; font-family:var(--mono);}

/* ---- result / output panels (crypto, hashing, encode tools) ---- */
.result-box,.hash-box,.output-box{background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:16px; padding:18px 20px; margin-bottom:16px; word-break:break-all; font-family:var(--mono); font-size:13px; color:var(--text);}
.result-box{text-align:center; font-weight:700; letter-spacing:.04em;}
.result-box.match-ok{background:rgba(79,203,154,0.1); border-color:rgba(79,203,154,0.35); color:var(--good);}
.result-box.match-fail{background:rgba(242,114,94,0.1); border-color:rgba(242,114,94,0.35); color:var(--danger);}
.hash-parts{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:12px; color:var(--text-muted);}
.hash-parts span{color:var(--text);}
.hash-info{font-size:12px; color:var(--text-muted); line-height:1.7;}
.hash-info span{color:var(--text);}
.out-label,.output-section{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; font-family:var(--mono);}
.btn-row,.action-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.cost-row{display:flex; align-items:center; gap:10px; margin-top:10px;}
.cost-time,.cost-val{font-family:var(--mono); font-size:12px; color:var(--text-dim);}
.err-box{background:rgba(242,114,94,0.08); border:1px solid rgba(242,114,94,0.3); color:var(--danger); border-radius:10px; padding:10px 14px; font-size:12.5px; margin-top:10px;}
.loading-msg{font-size:12px; color:var(--text-dim); text-align:center; padding:10px;}
.copied-toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--tooltip-bg); backdrop-filter:blur(20px); border:1px solid var(--tooltip-border); border-radius:10px; padding:10px 18px; font-size:13px; color:var(--text); opacity:0; pointer-events:none; transition:opacity .2s; z-index:20;}
.copied-toast.show{opacity:1;}

/* ---- slider controls (image tools) ---- */
.slider-row{display:flex; align-items:center; gap:12px; margin-top:10px;}
.slider-row input[type=range]{flex:1; accent-color:var(--cyan);}
.sval{font-family:var(--mono); font-size:13px; color:var(--cyan); min-width:44px; text-align:right;}

/* ---- image preview ---- */
.preview-wrap,.decode-wrap{display:flex; flex-direction:column; gap:12px; margin-top:14px;}
.preview-item,.decoded-preview{background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:14px; text-align:center;}
.preview-item img,.preview-item canvas,.decoded-preview img,.decoded-img,.preview-img{max-width:100%; max-height:300px; border-radius:10px; border:1px solid var(--glass-border); display:block; margin:0 auto;}
.tbtn{padding:7px 16px; border:1px solid var(--glass-border); border-radius:8px; background:transparent; color:var(--text-muted); font-family:var(--mono); font-size:12px; cursor:pointer; transition:all .15s;}
.tbtn:hover{border-color:var(--cyan); color:var(--text);}
.plbl{font-size:11px; color:var(--text-dim); margin-bottom:8px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em;}
.ico{font-size:22px;}

/* ---- batch file-conversion result rows (image/pdf converters) ---- */
.result-item{background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--glass-border); border-radius:14px; padding:12px 14px; margin-bottom:10px; display:flex; align-items:center; gap:12px;}
.ri-thumb,.thumb{width:48px; height:48px; object-fit:cover; border-radius:8px; border:1px solid var(--glass-border); flex-shrink:0;}
.ri-info{flex:1; min-width:0;}
.ri-name,.file-name{font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ri-size{font-size:11px; color:var(--text-dim); font-family:var(--mono); margin-top:3px;}
.dl-btn{padding:6px 16px; border-radius:8px; border:none; cursor:pointer; font-size:11.5px; font-weight:700; background:linear-gradient(135deg,var(--violet),var(--cyan)); color:#0B0E13; white-space:nowrap; text-decoration:none;}
.dl-btn:hover{opacity:.9;}
.item-badge{font-size:11px; font-family:var(--mono); padding:3px 10px; border-radius:6px;}
.item-badge.ok{background:rgba(79,203,154,0.12); color:var(--good);}
.item-badge.err{background:rgba(242,114,94,0.12); color:var(--danger);}
.item-badge.proc{background:rgba(63,216,200,0.1); color:var(--cyan);}
.compat-note{font-size:11.5px; color:var(--text-dim); padding:11px 14px; background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; margin-bottom:14px; line-height:1.6;}

/* ---- reference tables (ascii/lookup/data tools) ---- */
.search-box{background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:8px; padding:6px 12px; color:var(--text); font-family:var(--mono); font-size:12px; outline:none; width:170px;}
.search-box:focus{border-color:var(--cyan);}
.tbl-wrap{overflow-x:auto; border-radius:16px; border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);}
table{width:100%; border-collapse:collapse; font-size:11.5px;}
th{padding:9px 10px; text-align:left; font-size:10px; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; font-family:var(--mono); border-bottom:1px solid var(--glass-border); white-space:nowrap;}
td{padding:7px 10px; border-bottom:1px solid var(--glass-border); font-family:var(--mono); color:var(--text-muted); cursor:pointer; white-space:nowrap;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,0.04);}
.note{font-size:11px; color:var(--text-dim); margin-top:10px;}
/* ---- HTTP status badge (API/webhook testers) ---- */
.status-bar{display:flex; gap:12px; align-items:center; font-family:var(--mono); font-size:12px; margin-bottom:10px; flex-wrap:wrap;}
.status-badge{padding:4px 12px; border-radius:6px; font-weight:700;}
.status-badge.s2xx{background:rgba(79,203,154,0.15); color:var(--good);}
.status-badge.s3xx{background:rgba(79,166,232,0.15); color:var(--info);}
.status-badge.s4xx,.status-badge.s5xx{background:rgba(242,114,94,0.15); color:var(--danger);}
.cors-warn{background:rgba(232,193,85,0.08); border:1px solid rgba(232,193,85,0.3); border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--warn); margin-top:10px; line-height:1.6;}

td:first-child{text-align:right; font-weight:700; color:var(--text-dim);}
td.glyph{font-size:14px; color:var(--text); font-weight:700; text-align:center;}
td.dec{color:var(--cyan);}
td.hex{color:var(--info);}
td.ctrl{font-size:9px; color:var(--violet);}

/* ---- progress / usage bar (context window, quota-style meters) ---- */
.bar-track{width:100%; height:8px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; margin-bottom:8px;}
.bar-fill{height:100%; border-radius:4px; background:var(--cyan); transition:width .3s,background .3s;}
.bar-fill.warn{background:var(--warn);}
.bar-fill.danger{background:var(--danger);}
.bar-warning{font-size:12px; padding:8px 12px; border-radius:8px; margin-top:8px; display:none;}
.bar-warning.show{display:block;}
.bar-warning.warn{background:rgba(232,193,85,0.1); border:1px solid rgba(232,193,85,0.3); color:var(--warn);}
.bar-warning.danger{background:rgba(242,114,94,0.1); border:1px solid rgba(242,114,94,0.3); color:var(--danger);}

/* ---- color swatches (picker/palette/contrast tools) ---- */
.swatch-row{display:flex; gap:6px; flex-wrap:wrap;}
.swatch{width:28px; height:28px; border-radius:6px; border:1px solid var(--glass-border); cursor:pointer; transition:transform .1s; flex-shrink:0;}
.swatch:hover{transform:scale(1.15); border-color:var(--cyan);}
.swatch.big{width:80px; height:80px; border-radius:12px;}

/* ---- format value row (color/unit converters) ---- */
.fmt-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.fmt-label{font-size:11px; color:var(--text-dim); font-family:var(--mono); width:44px; flex-shrink:0;}
.fmt-input{flex:1; background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:8px; padding:8px 10px; color:var(--text); font-family:var(--mono); font-size:13px; outline:none;}
.fmt-input:focus{border-color:var(--cyan);}

/* ---- compact editable option row (label+sub left, small number input right) ---- */
.field-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--glass-border); gap:12px;}
.field-row:last-child{border-bottom:none;}
.field-row .fk{font-size:12.5px; color:var(--text-muted);}
.field-row .fk-sub{font-size:11px; color:var(--text-dim); margin-top:2px;}
.field-row input[type=number].small-input{font-family:var(--mono); font-size:13px; background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:6px; padding:5px 10px; color:var(--text); outline:none; width:90px; text-align:right;}
.field-row input[type=number].small-input:focus{border-color:var(--cyan);}

/* ---- preset chip grid (name + mono value, e.g. cron/regex presets) ---- */
.chip-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px;}
.chip-btn{background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:10px; padding:10px 14px; cursor:pointer; text-align:left; transition:all .15s; font-family:var(--sans); display:flex; flex-direction:column; gap:3px;}
.chip-btn:hover{border-color:var(--cyan); background:rgba(63,216,200,0.06);}
.chip-name{font-size:12.5px; color:var(--text-muted);}
.chip-val{font-family:var(--mono); font-size:11px; color:var(--cyan);}

/* ---- small key/value reference grid (legend-style, 2 col) ---- */
.kv-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px;}
.kv-item{font-size:12px; padding:8px 10px; border-bottom:1px solid var(--glass-border); background:rgba(255,255,255,0.02); border-radius:8px;}
.kv-key{font-family:var(--mono); color:var(--cyan); font-size:12.5px;}
.kv-val{color:var(--text-muted); font-size:11px; margin-top:2px;}

/* ---- small pill chips inline (e.g. parsed cron field summary) ---- */
.pill-row{display:flex; gap:6px; flex-wrap:wrap;}
.pill-chip{font-family:var(--mono); font-size:11px; padding:3px 8px; border-radius:6px; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); color:var(--text-muted);}

/* ---- pass/fail/warn/info status badge (checker/validator tools) ---- */
.badge{display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-family:var(--mono); font-weight:700; margin-left:6px;}
.badge.pass{background:rgba(79,203,154,0.15); color:var(--good);}
.badge.fail{background:rgba(242,114,94,0.15); color:var(--danger);}
.badge.warn{background:rgba(232,193,85,0.15); color:var(--warn);}
.badge.info{background:rgba(79,166,232,0.15); color:var(--info);}
.pill-chip span{color:var(--text-dim); margin-right:4px;}