/* tools.css — styling for /workout, /crypt, /generator-pw, /eval-ai,
   /json-formatter, /regex-tester, /markdown-previewer, /hash-generator,
   /token-counter.
   TEMPORARY: hand-maintained file, not yet part of the concatenated
   css/src/ build pipeline described in AGENTS.md. Migrate when that
   pipeline exists. */


/* ── bm-wide-post-card ───────────────────────────────────────── */
/* Full-width editorial card for tool pages. Same visual DNA as
   .bm-post-card but spans the container without a col-lg-* gutter. */

.bm-wide-post-card {
  background:      var(--aero-glass-bg);
  border:          1px solid var(--aero-glass-border);
  border-radius:   var(--border-radius-lg);
  padding:         var(--space-8) var(--space-10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:      border-color 0.2s, box-shadow 0.2s;
  color:           var(--text-secondary);
  font-size:       var(--font-size-md);
  line-height:     var(--line-height-relaxed);
}

.bm-wide-post-card:hover {
  border-color: rgba(74, 222, 128, 0.40);
  box-shadow:   var(--aero-glow-sm);
}

.bm-wide-post-card h2 {
  font-family:  var(--font-family-heading);
  font-size:    var(--font-size-2xl);
  font-weight:  var(--font-weight-bold);
  color:        var(--text-primary);
  margin:       0 0 var(--space-5);
  line-height:  var(--line-height-tight);
}

.bm-wide-post-card h3 {
  font-family:  var(--font-family-heading);
  font-size:    var(--font-size-xl);
  font-weight:  var(--font-weight-semibold);
  color:        var(--text-primary);
  margin:       var(--space-6) 0 var(--space-3);
  line-height:  var(--line-height-tight);
}

.bm-wide-post-card p {
  margin: 0 0 var(--space-4);
}

.bm-wide-post-card p:last-child {
  margin-bottom: 0;
}

.bm-wide-post-card code {
  background:    rgba(74, 222, 128, 0.10);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-sm);
  font-family:   var(--font-family-mono);
  font-size:     0.875em;
  padding:       0.1em 0.35em;
  color:         var(--color-accent-300);
}

@media (max-width: 768px) {
  .bm-wide-post-card {
    padding: var(--space-6) var(--space-5);
  }
}


/* ── Shared tool utilities ───────────────────────────────────── */

.tool-section {
  max-width: 860px;
  margin: 0 auto;
}

.tool-textarea {
  width: 100%;
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  color:         var(--text-primary);
  font-family:   var(--font-family-mono);
  font-size:     var(--font-size-sm);
  line-height:   var(--line-height-relaxed);
  padding:       var(--space-4);
  resize:        vertical;
  transition:    border-color var(--duration-normal) var(--ease-in-out),
                 box-shadow   var(--duration-normal) var(--ease-in-out);
}

.tool-textarea:focus {
  outline:      none;
  border-color: var(--border-focus);
  box-shadow:   var(--state-focus-ring);
}

.tool-textarea::placeholder {
  color: var(--text-disabled);
}

.tool-output {
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  color:         var(--text-secondary);
  font-family:   var(--font-family-mono);
  font-size:     var(--font-size-sm);
  line-height:   var(--line-height-relaxed);
  padding:       var(--space-4);
  white-space:   pre-wrap;
  word-break:    break-all;
  min-height:    4rem;
}

.tool-input {
  width:         100%;
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  color:         var(--text-primary);
  font-family:   var(--font-family-body);
  font-size:     var(--font-size-md);
  padding:       var(--space-2-5) var(--space-3);
  transition:    border-color var(--duration-normal) var(--ease-in-out),
                 box-shadow   var(--duration-normal) var(--ease-in-out);
}

.tool-input:focus {
  outline:      none;
  border-color: var(--border-focus);
  box-shadow:   var(--state-focus-ring);
}

.tool-label {
  display:       block;
  font-family:   var(--font-family-display);
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:         var(--text-muted);
  margin-bottom: var(--space-1-5);
}

.tool-card {
  background:    var(--aero-glass-bg);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-lg);
  padding:       var(--space-6);
  box-shadow:    var(--aero-glow-sm);
}

.tool-btn-copy {
  font-family:   var(--font-family-display);
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:    transparent;
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  color:         var(--text-muted);
  padding:       var(--space-1) var(--space-3);
  cursor:        pointer;
  transition:    var(--transition-color), border-color var(--duration-fast) var(--ease-in-out);
}

.tool-btn-copy:hover {
  color:         var(--color-accent-300);
  border-color:  var(--color-accent-300);
}

.tool-btn-copy.copied {
  color:         var(--color-success);
  border-color:  var(--color-success);
}

.tool-error {
  background:    var(--color-danger-light);
  border:        1px solid var(--color-danger);
  border-radius: var(--border-radius-md);
  color:         var(--color-danger-dark);
  font-family:   var(--font-family-mono);
  font-size:     var(--font-size-sm);
  padding:       var(--space-3) var(--space-4);
  margin-top:    var(--space-3);
}

.tool-notice {
  background:    rgba(74, 222, 128, 0.06);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  color:         var(--text-muted);
  font-size:     var(--font-size-sm);
  line-height:   var(--line-height-relaxed);
  padding:       var(--space-3) var(--space-4);
}

.tool-stats-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-4);
  align-items: center;
}

.tool-stat {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  background:    var(--aero-glass-bg);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-lg);
  padding:       var(--space-3) var(--space-5);
  min-width:     90px;
}

.tool-stat__label {
  font-family:    var(--font-family-display);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  var(--space-1);
}

.tool-stat__value {
  font-family:  var(--font-family-display);
  font-size:    var(--font-size-2xl);
  font-weight:  var(--font-weight-bold);
  color:        var(--color-accent-300);
  text-shadow:  var(--aero-glow-sm);
  line-height:  1;
}

.tool-key-display {
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  color:         var(--color-accent-300);
  font-family:   var(--font-family-mono);
  font-size:     var(--font-size-sm);
  padding:       var(--space-2) var(--space-4);
  word-break:    break-all;
  letter-spacing: 0.04em;
}

.tool-hash-row {
  display:       grid;
  grid-template-columns: 80px 1fr auto;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.tool-hash-row:last-child {
  border-bottom: none;
}

.tool-hash-label {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-bold);
  color:          var(--text-muted);
  text-transform: uppercase;
}

.tool-hash-value {
  font-family:  var(--font-family-mono);
  font-size:    var(--font-size-sm);
  color:        var(--text-secondary);
  word-break:   break-all;
}

.tool-tab-bar {
  display:     flex;
  gap:         var(--space-2);
  margin-bottom: var(--space-4);
}

.tool-tab {
  background:    transparent;
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  color:         var(--text-muted);
  font-family:   var(--font-family-display);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  padding:       var(--space-1-5) var(--space-4);
  cursor:        pointer;
  transition:    var(--transition-color), border-color var(--duration-fast) var(--ease-in-out);
}

.tool-tab:hover {
  color:        var(--text-primary);
  border-color: var(--border-focus);
}

.tool-tab.active {
  background:   rgba(74, 222, 128, 0.12);
  border-color: var(--color-accent-300);
  color:        var(--color-accent-300);
  box-shadow:   var(--aero-glow-sm);
}

.tool-score-bar-wrap {
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-pill);
  height:        10px;
  overflow:      hidden;
  margin:        var(--space-2) 0;
}

.tool-score-bar {
  height:        100%;
  border-radius: var(--border-radius-pill);
  background:    linear-gradient(90deg, var(--color-brand-400), var(--color-accent-300));
  box-shadow:    var(--aero-glow-sm);
  transition:    width var(--duration-slow) var(--ease-out);
}

.tool-score-number {
  font-family:  var(--font-family-display);
  font-size:    var(--font-size-4xl);
  font-weight:  var(--font-weight-bold);
  color:        var(--color-accent-300);
  text-shadow:  var(--aero-glow-md);
  line-height:  1;
}

.tool-privacy-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  background:    rgba(74, 222, 128, 0.08);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-pill);
  color:         var(--color-accent-300);
  font-family:   var(--font-family-display);
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:       var(--space-1) var(--space-3);
}

.tool-split {
  display:              grid;
  grid-template-columns: 1fr 1fr;
  gap:                  var(--space-4);
}

@media (max-width: 768px) {
  .tool-split {
    grid-template-columns: 1fr;
  }

  .tool-hash-row {
    grid-template-columns: 60px 1fr;
  }

  .tool-hash-row .tool-btn-copy {
    grid-column: 1 / -1;
  }
}

/* ── Tool-page checkbox overrides ───────────────────────────── */
/* Replaces the default browser/Bootstrap checkbox on tool pages
   with a 3D bevelled dark box and a vivid green tick mark.      */

.tool-card .form-check,
.tool-card fieldset .form-check {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  padding:     0;
  cursor:      pointer;
}

.tool-card .form-check-input[type="checkbox"] {
  appearance:    none;
  -webkit-appearance: none;
  width:         1.25rem;
  height:        1.25rem;
  flex-shrink:   0;
  margin:        0;
  cursor:        pointer;
  border-radius: var(--border-radius-sm);

  /* 3D bevel — dark inset base, highlights on top/left */
  background:    #0a1a10;
  border:        1px solid #1a3a22;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.70),
    inset 0 1px 0   rgba(0, 0, 0, 0.50),
    0 1px 0         rgba(74, 222, 128, 0.15);

  transition:
    background  var(--duration-fast) var(--ease-in-out),
    box-shadow  var(--duration-fast) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out);

  position: relative;
}

.tool-card .form-check-input[type="checkbox"]:hover {
  border-color: var(--color-accent-400);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.60),
    0 0 0 2px rgba(74, 222, 128, 0.15);
}

.tool-card .form-check-input[type="checkbox"]:focus {
  outline:      none;
  border-color: var(--border-focus);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.60),
    0 0 0 3px rgba(74, 222, 128, 0.30);
}

.tool-card .form-check-input[type="checkbox"]:checked {
  background:  #0d2b16;
  border-color: var(--color-accent-400);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.40),
    0 0 6px rgba(74, 222, 128, 0.35),
    0 1px 0  rgba(74, 222, 128, 0.20);
}

/* Green tick mark via SVG background-image */
.tool-card .form-check-input[type="checkbox"]:checked::after {
  content:  '';
  position: absolute;
  inset:    0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234ade80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8l4 4 7-7'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     80%;
  filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.7));
}

.tool-card .form-check-label {
  font-size:  var(--font-size-sm);
  color:      var(--text-secondary);
  cursor:     pointer;
  user-select: none;
  line-height: 1.4;
}

/* Center the checkbox group horizontally inside the card */
.tool-checkboxes {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--space-3) var(--space-6);
  justify-content: center;
  padding:         var(--space-2) 0;
}

/* ── /workout ────────────────────────────────────────────────── */

.wt-viewport {
  position:      relative;
  width:         640px;
  max-width:     100%;
  aspect-ratio:  4/3;
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-lg);
  overflow:      hidden;
  box-shadow:    var(--aero-glow-sm);
}

#wt-video,
#wt-canvas {
  position:  absolute;
  inset:     0;
  width:     100%;
  height:    100%;
  transform: scaleX(-1);
}

#wt-canvas { z-index: 1; }

.wt-cue {
  position:       absolute;
  bottom:         var(--space-3);
  left:           50%;
  transform:      translateX(-50%);
  z-index:        2;
  font-family:    var(--font-family-display);
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-neutral-0);
  background:     rgba(0,0,0,0.65);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--border-radius-pill);
  white-space:    nowrap;
  pointer-events: none;
}

.wt-stat-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  background:     var(--aero-glass-bg);
  border:         1px solid var(--aero-glass-border);
  border-radius:  var(--border-radius-lg);
  padding:        var(--space-4) var(--space-6);
  min-width:      110px;
  backdrop-filter: blur(8px);
}

.wt-stat-card__label {
  font-family:    var(--font-family-display);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-bold);
  letter-spacing: 0.15em;
  color:          var(--text-muted);
  margin-bottom:  var(--space-1);
}

.wt-stat-card__value {
  font-family:  var(--font-family-display);
  font-size:    var(--font-size-2xl);
  font-weight:  var(--font-weight-bold);
  color:        var(--text-primary);
  line-height:  1;
}

.wt-accent    { color: var(--color-accent-300); text-shadow: var(--aero-glow-sm); }
.wt-rep-count { font-size: var(--font-size-4xl); color: var(--color-accent-300); text-shadow: var(--aero-glow-md); }

@keyframes wt-rep-flash {
  0%   { transform: scale(1.4); color: #fff; text-shadow: var(--aero-glow-lg); }
  100% { transform: scale(1);   color: var(--color-accent-300); text-shadow: var(--aero-glow-md); }
}

.wt-rep-flash { animation: wt-rep-flash 0.35s var(--ease-spring) forwards; }

.wt-ex-btn.active {
  background:   linear-gradient(180deg, var(--color-brand-400) 0%, var(--color-brand-600) 100%);
  border-color: var(--color-brand-700);
  color:        var(--color-neutral-0);
  box-shadow:   var(--bevel-shadow-raised), var(--aero-glow-sm);
}

.wt-tips {
  color:        var(--text-secondary);
  font-size:    var(--font-size-sm);
  line-height:  1.7;
  padding-left: var(--space-5);
  margin:       0;
}

.wt-tips li { margin-bottom: var(--space-2); }

/* State colour driven by data attribute to avoid inline style= */
#wt-state[data-state="down"] { color: #fb923c; }
#wt-state[data-state="up"]   { color: #4ade80; }

@media (max-width: 680px) {
  .wt-viewport  { width: 100%; }
  .wt-stat-card { min-width: 80px; padding: var(--space-3) var(--space-4); }
  .wt-rep-count { font-size: var(--font-size-3xl); }
}


/* ── /crypt ──────────────────────────────────────────────────── */

.crypt-key-masked {
  letter-spacing: 0.2em;
  color:          var(--text-disabled);
}

.crypt-key-reveal {
  background:    transparent;
  border:        none;
  color:         var(--text-muted);
  cursor:        pointer;
  font-size:     var(--font-size-sm);
  padding:       0 var(--space-2);
  transition:    color var(--duration-fast) var(--ease-in-out);
}

.crypt-key-reveal:hover { color: var(--color-accent-300); }


/* ── /generator-pw ───────────────────────────────────────────── */

.pw-output {
  font-family:   var(--font-family-mono);
  font-size:     var(--font-size-xl);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-accent-300);
  text-shadow:   var(--aero-glow-sm);
  letter-spacing: 0.04em;
  word-break:    break-all;
  padding:       var(--space-4);
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  min-height:    3.5rem;
  display:       flex;
  align-items:   center;
}

.pw-strength {
  display:     flex;
  gap:         var(--space-1);
  align-items: center;
  margin-top:  var(--space-2);
}

.pw-strength__bar {
  flex:          1;
  height:        4px;
  border-radius: var(--border-radius-pill);
  background:    var(--surface-sunken);
  transition:    background var(--duration-normal) var(--ease-in-out);
}

.pw-strength__bar.on-weak   { background: var(--color-danger); }
.pw-strength__bar.on-medium { background: var(--color-warning); }
.pw-strength__bar.on-strong { background: var(--color-success); }

.pw-length-display {
  font-family:  var(--font-family-display);
  font-size:    var(--font-size-2xl);
  font-weight:  var(--font-weight-bold);
  color:        var(--color-accent-300);
  text-shadow:  var(--aero-glow-sm);
  min-width:    2.5rem;
  text-align:   center;
}


/* ── /eval-ai ────────────────────────────────────────────────── */

.eval-signal-list {
  list-style:  none;
  padding:     0;
  margin:      0;
}

.eval-signal-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size:     var(--font-size-sm);
  color:         var(--text-secondary);
}

.eval-signal-item:last-child { border-bottom: none; }

.eval-signal-dot {
  width:         8px;
  height:        8px;
  border-radius: var(--border-radius-circle);
  flex-shrink:   0;
}

.eval-signal-dot.hit  { background: var(--color-accent-300); box-shadow: var(--aero-glow-sm); }
.eval-signal-dot.miss { background: var(--surface-sunken); border: 1px solid var(--border-default); }

.eval-disclaimer {
  font-size:   var(--font-size-sm);
  color:       var(--text-muted);
  font-style:  italic;
  line-height: var(--line-height-relaxed);
}


/* ── /json-formatter ─────────────────────────────────────────── */

.json-output {
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  color:         var(--text-secondary);
  font-family:   var(--font-family-mono);
  font-size:     var(--font-size-sm);
  line-height:   var(--line-height-relaxed);
  padding:       var(--space-4);
  white-space:   pre;
  overflow-x:    auto;
  min-height:    8rem;
  max-height:    32rem;
  overflow-y:    auto;
}


/* ── /regex-tester ───────────────────────────────────────────── */

.regex-highlight-wrap {
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  font-family:   var(--font-family-mono);
  font-size:     var(--font-size-sm);
  line-height:   var(--line-height-relaxed);
  padding:       var(--space-4);
  white-space:   pre-wrap;
  word-break:    break-word;
  min-height:    6rem;
  color:         var(--text-secondary);
}

.regex-match {
  background:    rgba(74, 222, 128, 0.22);
  border-radius: 2px;
  color:         var(--color-accent-300);
  box-shadow:    0 0 0 1px rgba(74, 222, 128, 0.35);
}

.regex-group-list {
  list-style:  none;
  padding:     0;
  margin:      var(--space-3) 0 0;
}

.regex-group-item {
  font-family:   var(--font-family-mono);
  font-size:     var(--font-size-sm);
  color:         var(--text-secondary);
  padding:       var(--space-1) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.regex-group-item:last-child { border-bottom: none; }

.regex-group-idx {
  color:       var(--text-muted);
  margin-right: var(--space-2);
}


/* ── /markdown-previewer ─────────────────────────────────────── */

.md-preview {
  background:    var(--surface-sunken);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  color:         var(--text-secondary);
  font-family:   var(--font-family-body);
  font-size:     var(--font-size-md);
  line-height:   var(--line-height-relaxed);
  padding:       var(--space-5);
  min-height:    12rem;
  overflow-y:    auto;
}

.md-preview h1,
.md-preview h2,
.md-preview h3,
.md-preview h4 {
  color:        var(--text-primary);
  font-family:  var(--font-family-heading);
  font-weight:  var(--font-weight-bold);
  margin:       var(--space-5) 0 var(--space-2);
  line-height:  var(--line-height-tight);
}

.md-preview h1 { font-size: var(--font-size-2xl); }
.md-preview h2 { font-size: var(--font-size-xl); }
.md-preview h3 { font-size: var(--font-size-lg); }
.md-preview h4 { font-size: var(--font-size-md); }

.md-preview p  { margin: 0 0 var(--space-3); }
.md-preview ul,
.md-preview ol { padding-left: var(--space-6); margin-bottom: var(--space-3); }
.md-preview li { margin-bottom: var(--space-1); }

.md-preview a {
  color:           var(--text-link);
  text-decoration: underline;
}

.md-preview code {
  background:    rgba(74, 222, 128, 0.10);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-sm);
  font-family:   var(--font-family-mono);
  font-size:     0.875em;
  padding:       0.1em 0.35em;
  color:         var(--color-accent-300);
}

.md-preview pre {
  background:    var(--surface-base);
  border:        1px solid var(--aero-glass-border);
  border-radius: var(--border-radius-md);
  overflow-x:    auto;
  padding:       var(--space-4);
  margin-bottom: var(--space-3);
}

.md-preview pre code {
  background:  transparent;
  border:      none;
  padding:     0;
  color:       var(--text-secondary);
}

.md-preview blockquote {
  border-left: 3px solid var(--color-accent-300);
  margin:      0 0 var(--space-3) 0;
  padding:     var(--space-2) var(--space-4);
  color:       var(--text-muted);
  font-style:  italic;
}

.md-preview hr {
  border:       none;
  border-top:   1px solid var(--border-subtle);
  margin:       var(--space-5) 0;
}

.md-preview strong { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.md-preview em     { font-style: italic; }


/* ── /hash-generator ─────────────────────────────────────────── */

.hash-file-drop {
  border:        2px dashed var(--aero-glass-border);
  border-radius: var(--border-radius-lg);
  padding:       var(--space-10) var(--space-6);
  text-align:    center;
  cursor:        pointer;
  transition:    border-color var(--duration-normal) var(--ease-in-out),
                 background   var(--duration-normal) var(--ease-in-out);
}

.hash-file-drop:hover,
.hash-file-drop.drag-over {
  border-color: var(--color-accent-300);
  background:   rgba(74, 222, 128, 0.05);
}

.hash-file-drop__icon {
  font-size:    var(--font-size-4xl);
  display:      block;
  margin-bottom: var(--space-3);
  opacity:      0.5;
}

.hash-file-drop__text {
  color:       var(--text-muted);
  font-size:   var(--font-size-sm);
}

.hash-file-name {
  font-family:  var(--font-family-mono);
  font-size:    var(--font-size-sm);
  color:        var(--color-accent-300);
}


/* ── /token-counter ──────────────────────────────────────────── */

.tc-live-stats {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           var(--space-3);
}

@media (max-width: 540px) {
  .tc-live-stats {
    grid-template-columns: 1fr 1fr;
  }
}

.tc-model-note {
  font-size:   var(--font-size-xs);
  color:       var(--text-muted);
  line-height: var(--line-height-relaxed);
  font-style:  italic;
}