/* ── Reset & Variables ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:        #0f1117;
  --bg-card:   #181b24;
  --bg-card2:  #1e2230;
  --border:    #2a2e3a;
  --text:      #e4e6ed;
  --text-dim:  #8b8fa3;
  --accent:    #6c63ff;
  --accent-g:  linear-gradient(135deg,#6c63ff,#a78bfa);
  --orange:    #f59e0b;
  --orange-g:  linear-gradient(135deg,#f59e0b,#fb923c);
  --green:     #22c55e;
  --red:       #ef4444;
  --blue:      #3b82f6;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 4px 24px rgba(0,0,0,.35);
  --font:      'Inter', system-ui, sans-serif;
  --mono:      'JetBrains Mono', 'Fira Code', monospace;
  --header-h:  56px;
}

html{font-size:15px;scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── Header ─────────────────────────────────────────────────────── */
#app-header{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;gap:12px;
  padding:0 20px;
  background:rgba(15,17,23,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
#app-title{
  font-size:1.15rem;font-weight:700;
  background:var(--accent-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.header-btn{
  display:flex;align-items:center;gap:4px;
  background:none;border:1px solid var(--border);
  color:var(--text);border-radius:var(--radius-sm);
  padding:6px 12px;cursor:pointer;font-size:.85rem;
  transition:background .2s,border-color .2s;
}
.header-btn:hover{background:var(--bg-card);border-color:var(--accent)}
.header-spacer{flex:1}

/* ── Main Layout ────────────────────────────────────────────────── */
#app-main{
  max-width:1280px;margin:0 auto;
  padding:20px;
  display:flex;flex-direction:column;gap:16px;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--shadow);
}
.card-title{
  display:flex;align-items:center;gap:8px;
  font-size:.95rem;font-weight:600;
  margin-bottom:14px;color:var(--text);
}
.card-title svg{color:var(--accent);flex-shrink:0}

/* ── Input Panel ────────────────────────────────────────────────── */
.input-mode-tabs{
  display:flex;gap:4px;
  background:var(--bg);border-radius:var(--radius-sm);
  padding:3px;margin-bottom:12px;
}
.tab{
  flex:1;padding:8px 0;border:none;border-radius:6px;
  background:transparent;color:var(--text-dim);
  cursor:pointer;font-size:.85rem;font-weight:500;
  transition:background .2s,color .2s;
}
.tab.active{background:var(--accent);color:#fff}

#input-text,#input-color{
  width:100%;padding:12px 14px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);font-family:var(--mono);font-size:.9rem;
  resize:vertical;transition:border-color .2s;
}
#input-text:focus,#input-color:focus{border-color:var(--accent);outline:none}

#color-preview{
  display:flex;gap:3px;flex-wrap:wrap;margin-top:8px;
}
.color-chip{
  width:28px;height:28px;border-radius:6px;
  border:2px solid var(--border);
  transition:transform .15s;
}
.color-chip:hover{transform:scale(1.15)}

.input-presets{
  display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;margin-top:10px;
}
.preset-label{font-size:.8rem;color:var(--text-dim)}
.preset-btn{
  padding:5px 10px;border:1px solid var(--border);
  border-radius:6px;background:var(--bg);
  color:var(--text-dim);font-size:.78rem;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.preset-btn:hover{border-color:var(--accent);color:var(--text)}

/* ── Controls ───────────────────────────────────────────────────── */
.controls-row{
  display:flex;gap:8px;flex-wrap:wrap;
}
.ctrl-btn{
  display:flex;align-items:center;gap:6px;
  padding:10px 18px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg-card2);
  color:var(--text);font-size:.85rem;font-weight:500;
  cursor:pointer;transition:all .2s;
  touch-action:manipulation;
}
.ctrl-btn:disabled{opacity:.35;cursor:not-allowed}
.ctrl-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ctrl-btn.primary:hover:not(:disabled){filter:brightness(1.15)}
.ctrl-btn.danger{border-color:var(--red);color:var(--red)}
.ctrl-btn.danger:hover:not(:disabled){background:rgba(239,68,68,.12)}
.ctrl-btn:hover:not(:disabled):not(.primary):not(.danger){background:var(--bg);border-color:var(--accent)}

.speed-control{margin-top:14px}
.speed-control label{font-size:.82rem;color:var(--text-dim);display:block;margin-bottom:6px}
#speed-slider{
  width:100%;accent-color:var(--accent);
  -webkit-appearance:none;height:6px;
  background:var(--bg);border-radius:3px;
  outline:none;cursor:pointer;
}
#speed-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;
  background:var(--accent);border-radius:50%;
  border:2px solid var(--bg-card);
  box-shadow:0 0 8px rgba(108,99,255,.5);
}
.speed-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-dim);margin-top:2px}

/* ── Dashboard ──────────────────────────────────────────────────── */
#dashboard{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.dash-col{display:flex;flex-direction:column;gap:16px}
.full-height{flex:1;min-height:300px;display:flex;flex-direction:column}

/* ── Logic Panel ────────────────────────────────────────────────── */
.step-badge{
  display:inline-block;
  padding:4px 12px;border-radius:20px;
  background:var(--accent);color:#fff;
  font-size:.78rem;font-weight:600;
  margin-bottom:12px;
}
.logic-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.logic-item{
  background:var(--bg);border-radius:var(--radius-sm);
  padding:12px 14px;display:flex;flex-direction:column;gap:4px;
}
.logic-item.full-width{grid-column:1/-1}
.logic-label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}
.logic-value{font-size:1.1rem;font-weight:600}
.logic-value.mono{font-family:var(--mono)}
.test-result{font-weight:700}
.test-result.yes{color:var(--green)}
.test-result.no{color:var(--orange)}

.logic-action{
  grid-column:1/-1;margin-top:4px;
  padding:10px 14px;border-radius:var(--radius-sm);
  background:rgba(108,99,255,.1);border-left:3px solid var(--accent);
  font-size:.85rem;color:var(--text);
  animation:fadeSlide .3s ease;
}

/* Input highlight bar */
#input-highlight-bar{
  margin-top:14px;
}
#input-chars{
  display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;
}
.input-char{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:32px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:6px;font-family:var(--mono);font-size:.82rem;
  color:var(--text-dim);transition:all .25s;
}
.input-char.processed{
  background:rgba(108,99,255,.15);border-color:var(--accent);color:var(--text);
}
.input-char.current-w{
  background:rgba(59,130,246,.2);border-color:var(--blue);color:#fff;
  box-shadow:0 0 8px rgba(59,130,246,.3);
}
.input-char.current-k{
  background:rgba(245,158,11,.2);border-color:var(--orange);color:#fff;
  box-shadow:0 0 8px rgba(245,158,11,.3);
}

/* ── Output Codes ───────────────────────────────────────────────── */
.output-codes{
  display:flex;flex-wrap:wrap;gap:6px;
  min-height:40px;
}
.placeholder-text{color:var(--text-dim);font-size:.82rem;font-style:italic}
.code-chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:8px;
  background:var(--accent-g);color:#fff;
  font-family:var(--mono);font-size:.85rem;font-weight:600;
  animation:popIn .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 2px 10px rgba(108,99,255,.3);
}

/* ── Stats ───────────────────────────────────────────────────────── */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;
  margin-bottom:12px;
}
.stat-item{
  background:var(--bg);border-radius:var(--radius-sm);
  padding:12px;text-align:center;
}
.stat-item.highlight{
  background:linear-gradient(135deg,rgba(108,99,255,.12),rgba(167,139,250,.08));
  border:1px solid rgba(108,99,255,.25);
}
.stat-value{
  display:block;font-size:1.25rem;font-weight:700;
  font-family:var(--mono);color:var(--text);
}
.stat-label{font-size:.72rem;color:var(--text-dim);margin-top:2px;display:block}

#ratio-bar-wrapper{
  display:flex;align-items:center;gap:10px;
}
#ratio-bar{
  flex:1;height:8px;border-radius:4px;
  background:var(--bg);overflow:hidden;
}
#ratio-bar-fill{
  height:100%;border-radius:4px;
  background:var(--accent-g);
  width:0;transition:width .5s ease;
}
#ratio-bar-label{
  font-size:.8rem;font-weight:600;font-family:var(--mono);
  color:var(--text-dim);min-width:42px;text-align:right;
}

/* ── Dictionary Grid ────────────────────────────────────────────── */
.dict-count-badge{
  margin-left:auto;padding:2px 10px;border-radius:12px;
  background:var(--bg);font-size:.75rem;font-weight:600;
  color:var(--text-dim);
}
.dict-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  gap:6px;flex:1;overflow-y:auto;
  max-height:520px;padding-right:4px;
  align-content:start;
}
.dict-card{
  display:flex;flex-direction:column;align-items:center;
  padding:8px 4px;border-radius:var(--radius-sm);
  background:var(--bg);border:1px solid var(--border);
  transition:all .3s ease;
  animation:cardIn .3s ease;
}
.dict-card .dict-idx{
  font-size:.68rem;font-weight:600;color:var(--text-dim);
  margin-bottom:2px;
}
.dict-card .dict-val{
  font-family:var(--mono);font-size:.82rem;font-weight:600;
  color:var(--text);word-break:break-all;text-align:center;
}
.dict-card.initial{border-color:rgba(108,99,255,.3)}
.dict-card.new-entry{
  border-color:var(--orange);
  box-shadow:0 0 14px rgba(245,158,11,.35);
  animation:pulseGlow .6s ease;
}
.dict-card.highlight{
  border-color:var(--green);
  box-shadow:0 0 10px rgba(34,197,94,.3);
}

/* Color dict cards */
.dict-card .color-swatch{
  width:22px;height:22px;border-radius:4px;
  margin-bottom:3px;border:1px solid rgba(255,255,255,.15);
}

/* ── Warning Banner ─────────────────────────────────────────────── */
.warning-banner{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;margin-bottom:10px;
  border-radius:var(--radius-sm);
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  color:var(--orange);font-size:.82rem;font-weight:500;
  animation:fadeSlide .4s ease;
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes popIn{
  0%{transform:scale(0);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes cardIn{
  0%{transform:translateY(8px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes pulseGlow{
  0%{box-shadow:0 0 0 rgba(245,158,11,0)}
  50%{box-shadow:0 0 20px rgba(245,158,11,.5)}
  100%{box-shadow:0 0 14px rgba(245,158,11,.35)}
}
@keyframes fadeSlide{
  0%{opacity:0;transform:translateY(6px)}
  100%{opacity:1;transform:translateY(0)}
}

.hidden{display:none!important}

/* ── Responsive: Tablet (≤ 900px) ───────────────────────────────── */
@media(max-width:900px){
  #dashboard{grid-template-columns:1fr 1fr}
  .dict-grid{max-height:400px}
}

/* ── Responsive: Phone (≤ 640px) ────────────────────────────────── */
@media(max-width:640px){
  html{font-size:14px}
  #app-header{padding:0 12px}
  #app-title{font-size:1rem}
  #app-main{padding:12px}
  #dashboard{grid-template-columns:1fr}
  .controls-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ctrl-btn{justify-content:center;padding:12px 10px}
  .logic-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .dict-grid{
    grid-template-columns:repeat(auto-fill,minmax(65px,1fr));
    max-height:350px;
  }
  .input-char{width:24px;height:28px;font-size:.75rem}
}