.card.compact-card,
.card.compact-card * {
  box-sizing: border-box;
}

.card.compact-card {
  max-width: 760px;
  margin: 2rem auto;
  padding: 1.5rem;
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  color: var(--text);
}

/* header */
.tool-header h1 {
  font-size: 2rem;
  font-weight: 800;
  margin: .4rem 0 0.5rem;
  text-align: center;
  color: var(--text);
}

.tool-header p {
  font-size: 1rem;
  text-align: center;
  color: var(--soft);
}

.calculation-mode-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .75rem;
  margin-bottom: 1rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.mode-label {
  font-size: .92rem;
  color: var(--soft);
  font-weight: 600;
  margin-right: .25rem;
}
.calculation-mode-switch button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  font-size: .9rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.calculation-mode-switch button.small-btn { padding: .3rem .6rem; font-size:.88rem; }
.calculation-mode-switch button[data-mode="binary"] {
  border-color: var(--primary);
  color: var(--primary);
  background: linear-gradient(0deg, rgba(37,99,235,0.02), transparent);
}
.calculation-mode-switch button[data-mode="decimal"] {
  border-color: var(--tertiary);
  color: var(--tertiary);
  background: linear-gradient(0deg, rgba(34,197,94,0.02), transparent);
}
.calculation-mode-switch button:focus { outline: none; box-shadow: 0 0 0 4px var(--ring); }

.separator {
  border: none;
  border-top: 1px solid rgba(12,18,30,0.06);
  margin: 1.25rem 0;
  opacity: 0.14;
}

.summary-bar {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: var(--muted);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.summary-stat {
  display: flex;
  flex-direction: column;
  min-width: 120px;
}
.summary-stat .stat-label {
  font-size: .78rem;
  color: var(--soft);
  font-weight: 600;
}
.summary-stat .stat-value {
  font-size: 1.15rem;
  margin-top: .25rem;
  color: var(--text);
  font-weight: 700;
}
.summary-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.summary-actions .btn {
  padding: .35rem .7rem;
  font-size: .9rem;
  border-radius: calc(var(--radius) - 2px);
}
.summary-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }

.card.compact-card .btn.tertiary {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--soft);
}
.card.compact-card .btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.interaction-area { margin-top: .5rem; }

/* Drop area */
.drop-area {
  border: 2px dashed rgba(37,99,235,0.12);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1rem;
  background: var(--input-bg);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: box-shadow .18s ease, background .12s ease, border-color .12s ease;
  position: relative;
  margin-bottom: 1rem;
}
.drop-area .drop-content { display:flex; flex-direction: column; align-items:center; gap:.35rem; }
.drop-area .icon-upload { font-size:1.6rem; color: var(--primary); }
.drop-area strong { display:block; font-weight:700; color: var(--text); }
.drop-area .small { color: var(--soft); font-size:.9rem; margin-top:.25rem; }

/* Dragover/Focus state */
.drop-area.dragover,
.drop-area:focus,
.drop-area:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(37,99,235,0.08);
  background: var(--muted);
  outline: none;
}

/* Controls wrapper used in many places */
.controls {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Hide native file input (expected) */
input[type="file"] { display: none !important; }

.list-container {
  background: var(--card);
  border-radius: var(--radius);
  padding: .75rem;
  border: 1px solid var(--border);
  box-shadow: 0 1px 6px rgba(12,18,30,0.03);
}

/* Manual add form */
.manual-add-form {
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
}
.manual-add-form h3 { margin: 0 0 .5rem 0; font-size: 1rem; color: var(--text); }
.manual-add-form .controls { gap: .5rem; }
.manual-add-form input[type="text"],
.manual-add-form input[type="number"],
.manual-add-form select {
  height: 38px;
  padding: .45rem .6rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: .95rem;
}
.manual-add-form input[type="text"] { flex: 2; min-width: 120px; }
.manual-add-form input[type="number"] { flex: 1; min-width: 80px; }
.manual-add-form select { flex: .9; min-width: 70px; }
.manual-add-form button {
  flex: .6;
  min-width: 84px;
  padding: .4rem .6rem;
  border-radius: calc(var(--radius) - 2px);
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}
.manual-add-form button:hover { filter: brightness(.96); }

.file-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
  margin: 0;
}
.file-list-placeholder {
  margin: .5rem 0;
  color: var(--soft);
  font-size: .95rem;
}

/* Individual file row */
.file-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .65rem;
  border-radius: calc(var(--radius) - 2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.01));
  border: 1px solid rgba(12,18,30,0.02);
  transition: background .12s ease, transform .08s ease, opacity .12s;
}

/* Left: name + optional icon */
.file-item .file-name-controls {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.file-item .file-name-controls .name {
  font-size: .95rem;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Middle: size */
.file-item .size {
  font-size: .9rem;
  font-weight: 700;
  color: var(--primary);
  margin-left: .5rem;
  white-space: nowrap;
}

/* Actions (remove/exclude) */
.file-item .file-actions {
  display: flex;
  gap: .45rem;
  align-items: center;
}
.file-item .btn {
  padding: .35rem .55rem;
  font-size: .88rem;
  border-radius: 6px;
}
.file-item .btn.secondary {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.file-item .btn.ghost {
  background: transparent;
  border: none;
  color: var(--soft);
}

/* Excluded state */
.file-item.excluded {
  opacity: .5;
  background: transparent;
  text-decoration: line-through;
}

.conversion-utility {
  margin-top: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1rem;
  box-shadow: 0 4px 14px rgba(12,18,30,0.04);
}
.conversion-utility h2 {
  margin: 0 0 .6rem 0;
  font-size: 1rem;
  color: var(--text);
  font-weight: 700;
}
.conversion-utility .controls {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
}
.conversion-utility input[type="text"],
.conversion-utility select {
  height: 40px;
  padding: .45rem .65rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: .95rem;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.conversion-utility input[type="text"] { flex: 3; min-width: 140px; }
.conversion-utility select { flex: 1; min-width: 84px; }
.conversion-utility input[type="text"]:focus,
.conversion-utility select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 5px var(--ring);
}

/* conversion output box */
.conversion-output {
  flex-basis: 100%;
  margin-top: .6rem;
  padding: .6rem .85rem;
  background: var(--muted);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: .97rem;
}

/* If no conversion result yet */
.conversion-output.empty { color: var(--soft); font-weight: 500; }

.small { font-size: .88rem; color: var(--soft); }
.mt-1 { margin-top: .35rem; }
.mt-2 { margin-top: .6rem; }
.mb-2 { margin-bottom: .6rem; }
.mb-3 { margin-bottom: .9rem; }
.mt-3 { margin-top: .9rem; }

/* Button compact helpers (scoped) */
.card.compact-card .btn.small-btn { padding: .32rem .6rem; font-size: .88rem; border-radius: 6px; }
.card.compact-card .btn.primary { background: var(--primary); color: #fff; border: none; }
.card.compact-card .btn.primary:hover { filter: brightness(.96); }

@media (max-width: 880px) {
  .summary-bar { gap: .6rem; padding: .75rem; }
  .summary-stat { min-width: 100px; }
  .calculation-mode-switch { justify-content: flex-start; margin-bottom: .75rem; }
}

@media (max-width: 650px) {
  .card.compact-card { padding: 1rem; }
  .summary-bar { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .manual-add-form .controls,
  .conversion-utility .controls,
  .controls {
    flex-direction: column;
    gap: .45rem;
  }
  .manual-add-form input,
  .manual-add-form select,
  .manual-add-form button,
  .conversion-utility input,
  .conversion-utility select {
    width: 100%;
    min-width: auto;
  }
  .file-list { max-height: 220px; }
}

.card.compact-card :focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

/* Smooth scrolling for file list overflow */
.file-list { scrollbar-width: thin; scrollbar-color: rgba(12,18,30,0.12) transparent; }
.file-list::-webkit-scrollbar { width: 8px; height: 8px; }
.file-list::-webkit-scrollbar-thumb { background: rgba(12,18,30,0.08); border-radius: 8px; }