/* The Tool Bakery - Word Frequency Calculator (Modern Theme) */

:root{
  --bg:#0b1220;              /* app background */
  --card:#0f172a;            /* panel */
  --ink:#e5e7eb;             /* text */
  --muted:#94a3b8;           /* slate-400 */
  --line:#1f2937;            /* divider */
  --accent:#22c55e;          /* green */
  --accent-ink:#07130b;
  --btn:#1f2937;             /* dark button */
  --btn-ink:#e5e7eb;
  --btn-hover:#111827;
  --focus: rgba(34,197,94,.35);
}

.ttb-wf-container{
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px;
  color: var(--ink);
}

.ttb-title{
  font-size: 28px;
  line-height: 1.2;
  margin: 6px 0 18px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #000;
}

.ttb-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
}

.ttb-subtitle{
  font-size: 18px;
  font-weight: 700;
  margin: 2px 0 10px;
  color: var(--ink);
}

.ttb-label{
  display:block;
  font-weight:600;
  margin-bottom:8px;
  color: var(--muted);
}

.ttb-input-area{
  width:100%;
  min-height: 220px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
  color: var(--ink);
  background: #0b1220;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.2);
}
.ttb-input-area:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus), inset 0 2px 10px rgba(0,0,0,.2);
}

.ttb-actions{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px;
}
.ttb-inline{
  display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:14px;
}
.inline-num{ width:80px; padding:8px 10px; border-radius:10px; }

.ttb-spacer{ flex:1; }
.ttb-btn{
  background: var(--btn);
  color: var(--btn-ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.ttb-btn:hover{ background: var(--btn-hover); border-color:#0b0f18; }
.ttb-btn:active{ transform: translateY(1px); }
.ttb-btn-dark{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: #1a8c49;
}
.ttb-btn-dark:hover{ background:#16a34a; border-color:#15803d; }

.ttb-overflow{ overflow:auto; border:1px solid var(--line); border-radius:10px; margin-top:12px; }

.ttb-table{
  width:100%;
  border-collapse: collapse;
  min-width: 520px;
  background:#0b1220;
}
.ttb-table th, .ttb-table td{
  border-bottom:1px solid var(--line);
  padding:10px 8px;
  text-align:left;
  font-size:14px;
  color: var(--ink);
}
.ttb-table thead th{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  background:#0c1426;
}
.ttb-col-num{ width:56px; text-align:center; }
.ttb-col-count{ width:100px; font-variant-numeric: tabular-nums; text-align:right; }
.ttb-col-word code{ color:#e5e7eb; background:transparent; }

.ttb-empty{ text-align:center; color:var(--muted); padding:20px; }

.ttb-mini{
  font-size:12px; color:var(--muted);
}