/* ============================================================
   01. TOKENS
   ============================================================ */
:root {
  /* Theme colors (dark-neutral) */
  --color-bg: #020617; /* outer background */
  --color-bg-debug: #d2d2d24d; /* background raw debug */
  --color-bg-elevated: #020617; /* alternative outer */
  --color-bg-transparent: #ffffff06; /* background trong suốt giống nền card */
  --color-text: #e5e7eb; /* main text */
  --color-muted: #888d96; /* secondary text */
  --color-border: #94a3b829; /* borders */
  --color-shadow-soft: #00000073; /* shadow color */

  /* User Color */
  --color-white: #ffffff;
  --color-white-light: #ffffffd9;
  --color-red: #ff0000e6;
  --color-red-dark: #c80000e6;
  --color-red-light: #ff4d4de6;
  --color-green: #00ff00e6;
  --color-green-light: #00b400e6;
  --color-green-dark: #009600e6;
  --color-blue: #0000ffe6;
  --color-blue-light: #6969ffe6;
  --color-blue-dark: #0000b4e6;
  --color-yelow: #ffff00e6;
  --color-yellow-neon: #f5ff00e6;
  --color-yelow-dark: #d2d200e6;
  --color-orange: #ff9100e6;
  --color-orange-dark: #ff7200e6;
  --color-amber: #d97706e6;
  --color-grey: #9ca3afe6;
  --color-grey-dark: #828c9ce6;
  --color-accent: #32aadce6;

  /* Alert Color */
  --color-alert-error: #fecaca80;
  --color-alert-error-border: #f8717199;
  --color-alert-success: #bbf7d080;
  --color-alert-success-border: #4ade8099;

  /* Card color */
  --color-card-background: #ffffff06;
  --color-card-highlight: #273137e6;
  --color-card-border: #94a3b829;

  /* Menu color */
  --color-menu: #32aadcd9; /* menu */
  --color-menu-hover: #ff8800f2; /* menu hover */

  /* Button color */
  --btn-color-border: #38bdf880;
  --btn-color-danger-background: #7f1d1de6;
  --btn-color-danger-border: #7f1d1de6;
  --btn-color-danger-hover: #b91c1ce6;
  --btn-color-toggle-on: #52d62ce6;
  --btn-color-toggle-off: #f2342ae6;

  /* Modal color */
  --color-modal-overlay: #020617d1;
  --color-modal-background: var(--color-bg);

  /* Font & scale */
  --font:
    system-ui, Arial, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --size-08: 8px;
  --size-09: 9px;
  --size-10: 10px;
  --size-11: 11px;
  --size-12: 12px;
  --size-13: 13px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-17: 17px;
  --size-18: 18px;
  --size-19: 19px;
  --size-20: 20px;
  --size-21: 21px;
  --size-22: 22px;
  --size-24: 24px;
  --size-26: 26px;
  --size-28: 28px;
  --size-30: 30px;
  --size-32: 32px;

  --size-title-site: var(--size-22);
  --size-title-section: var(--size-20);
  --size-title-card: var(--size-16);
  --size-values-lg: var(--size-30);

  /* Font style */
  --font-size: var(--size-13);
  /* Cỡ chữ của control nhập liệu (input / select / textarea / custom dropdown).
     Tách thành token riêng thay vì dùng trực tiếp --font-size để media query
     thiết bị cảm ứng chỉ cần nâng GIÁ TRỊ token lên --size-16: iOS Safari tự
     phóng to trang khi focus control có font-size < 16px. Nếu ghi đè bằng
     selector `input { font-size }` trong media query thì sẽ thua các rule cấp
     class như `.field input` (media query không cộng specificity). */
  --input-font-size: var(--font-size);
  --font-weight2: 200;
  --font-weight3: 300;
  --font-weight4: 400;
  --font-weight5: 500;
  --font-weight6: 600;
  --font-weight7: 700;
  --font-weight8: 800;

  /* Line style */
  --line-height-05: 0.5;
  --line-height-10: 1;
  --line-height-12: 1.2;
  --line-height-15: 1.5;
  --line-height-20: 2;
  --line-color-solid: var(--border-width) solid #94a3b838;

  /* Spacing & shape */
  --space-00: 0px;
  --space-05: 3px;
  --space-10: 6px;
  --space-15: 9px;
  --space-20: 12px;
  --space-25: 15px;
  --space-30: 18px;
  --space-35: 21px;
  --space-40: 24px;
  --space-45: 27px;
  --space-50: 30px;
  --space-55: 33px;
  --space-top-bottom: 6px;
  --space-left-right: 3px;
  --space-separation: var(--space-15);

  --border-radius: 5px;
  --border-width: 1px;
  --shadow-soft: 0 10px 30px var(--color-shadow-soft);

  /* Controls standard height and width */
  --std-height: 30px;
  --std-min-height: 30px;
  --std-width: 60px;
  --std-min-width: 60px;
}

/* ============================================================
   02. LAYOUT & BASE STYLES
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-size: var(--font-size);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-height-15);
  overflow: hidden;
}

body.sidebar-open {
  overflow: hidden;
}

/* Khóa cuộn trang khi lightbox ảnh minh hoạ đang mở (class do topology-shell.js thêm). */
body.lightbox-open {
  overflow: hidden;
}

.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.sidebar-overlay {
  display: none;
}

/* Sidebar */
.sidebar {
  width: 260px;
  background-color: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: var(--space-20);
  z-index: 100;
  /* Giữ đúng 260px trong .app-container (flex row); thiếu khai báo này sidebar
     bị main-content bóp hẹp khi nội dung chính rộng. */
  flex-shrink: 0;
}

/* Nav chứa các mục menu trong sidebar. Trước đây chưa có rule nào cho class này
   (markup dùng .sidebar-nav nhưng base.css không định nghĩa) nên menu dài không
   cuộn được và đẩy tràn khỏi sidebar. flex: 1 1 auto + min-height: 0 để nav chiếm
   hết chiều cao còn lại và tự cuộn khi danh sách topology con dài. */
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--size-title-site);
  font-weight: var(--font-weight7);
  color: var(--color-red-light);
  margin-bottom: var(--space-40);
}

.nav-section {
  font-size: var(--size-10);
  font-weight: var(--font-weight7);
  color: var(--color-muted);
  letter-spacing: 1px;
  margin: var(--space-20) 0 var(--space-10) 0;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  padding: var(--space-10) var(--space-15);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
  margin-bottom: 2px;
}

.nav-item i {
  width: 18px;
  text-align: center;
  color: var(--color-muted);
}

.nav-item:hover {
  background-color: var(--color-bg-transparent);
  color: var(--color-menu-hover);
}

.nav-item.disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

.nav-item.active {
  background-color: var(--color-bg-transparent);
  color: var(--color-menu);
  font-weight: var(--font-weight6);
}

.nav-item.active i {
  color: var(--color-menu);
}

/* Ô lọc topology trong sidebar.
   Chưa có class tương đương sẵn có nên buộc phải tạo mới; tái sử dụng token
   --color-bg-transparent, --color-border, --border-radius, --space-*, --size-*. */
.nav-filter {
  position: relative;
  margin: var(--space-10) 0;
}

.nav-filter i {
  position: absolute;
  left: var(--space-15);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  font-size: var(--size-11);
  pointer-events: none;
}

.nav-filter input {
  width: 100%;
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  padding: var(--space-10) var(--space-15) var(--space-10) var(--space-40);
  outline: none;
  font-size: var(--size-12);
}

/* Ẩn nav-item không khớp từ khóa lọc (class do sidebar.js thêm vào).
   Dùng !important để chắc chắn thắng mọi biến thể .nav-item (vốn display: flex). */
.nav-item.nav-filtered {
  display: none !important;
}

/* Nhóm con topology trong sidebar (topology nằm dưới nhóm Non-Isolated / Isolated).
   Tạo mới vì chưa có class tương đương: thụt lề để thể hiện quan hệ cha - con,
   tái sử dụng token --space-40 (thụt lề) và --space-05 (khoảng cách dọc). */
.nav-subgroup {
  margin-bottom: var(--space-05);
}

.nav-item.nav-item--sub {
  padding-left: var(--space-40);
  font-size: var(--size-12);
}

/* Ẩn cả nhóm con khi lọc từ khóa không còn topology nào khớp (class do sidebar.js thêm vào). */
.nav-subgroup.nav-filtered {
  display: none !important;
}

/* Ẩn section topology không khớp nhóm đang chọn trên Dashboard
   (class do sidebar.js thêm vào khi lọc theo Topo group). */
.topology-section.topology-filtered {
  display: none !important;
}

/* Ẩn card topology không khớp từ khóa tìm kiếm trên topbar
   (class do sidebar.js thêm vào). */
.calc-card.card-filtered {
  display: none !important;
}

/* Main Content */
.main-content {
  flex: 1;
  /* BẮT BUỘC: flex item mặc định min-width:auto nên grid con (minmax 280px)
     đẩy main rộng hơn viewport -> tràn ngang, vỡ topbar/card. min-width: 0 cho
     phép main co lại và nội dung wrap đúng trong khung. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: radial-gradient(circle at top right, #1e293b, var(--color-bg));
}

/* Topbar */
.topbar {
  height: 64px;
  min-height: 64px;
  padding: 0 var(--space-30);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
  background: #02061780;
  position: sticky;
  top: 0;
  z-index: 90;
}

.search-bar {
  position: relative;
  width: 400px;
}

.search-bar i {
  position: absolute;
  left: var(--space-15);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
}

.search-bar input {
  width: 100%;
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  padding: var(--space-10) var(--space-15) var(--space-10) 40px;
  border-radius: 20px;
  color: var(--color-text);
  outline: none;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: var(--space-15);
}

.user-info {
  text-align: right;
}

.user-name {
  display: block;
  font-weight: var(--font-weight6);
  font-size: var(--size-14);
}

.user-role {
  font-size: var(--size-10);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.user-role.demo {
  background: rgba(50, 170, 220, 0.15);
  color: var(--color-accent);
}

.user-role.premium {
  background: var(--color-amber);
  color: var(--color-bg);
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight7);
}

/* Dashboard Content */
.content-wrapper {
  padding: var(--space-30);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-20);
  margin-bottom: var(--space-40);
}

.stat-card {
  background: var(--color-card-background);
  border: 1px solid var(--color-card-border);
  padding: var(--space-25);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
}

.stat-label {
  color: var(--color-muted);
  font-size: var(--size-12);
  margin-bottom: var(--space-10);
  display: block;
}

.stat-value {
  font-size: var(--size-values-lg);
  font-weight: var(--font-weight7);
}

/* Card Grid */
.section-title {
  font-size: var(--size-title-section);
  margin-bottom: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.section-title small {
  font-size: var(--size-12);
  color: var(--color-muted);
  font-weight: var(--font-weight4);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-25);
  margin-bottom: var(--space-50);
}

.calc-card {
  background: var(--color-card-background);
  border: 1px solid var(--color-card-border);
  padding: var(--space-15) var(--space-25);
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.calc-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-5px);
  background: #ffffff0a;
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-20);
}

.card-icon {
  font-size: var(--size-24);
  color: var(--color-accent);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-05);
  font-size: var(--size-09);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: var(--font-weight7);
  line-height: 1.2;
}

.badge .lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 9px;
}

.badge .lock-text {
  display: inline-block;
}

.badge.unlocked {
  background: var(--color-alert-success);
  color: #4ade80;
}
.badge.locked {
  background: var(--color-alert-error);
  color: #f87171;
}

.calc-card h3 {
  font-size: var(--size-title-card);
  margin-bottom: var(--space-10);
}

.calc-card p {
  color: var(--color-muted);
  font-size: var(--size-12);
  margin-bottom: var(--space-25);
  min-height: 36px;
}

/* font-family: var(--font) — .btn-action dùng cho cả <a> lẫn <button>; <button> không
   kế thừa font của trang nên phải khai báo để nút không bị lệch typography. */
.btn-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: var(--space-10);
  background: var(--color-bg-transparent);
  border: 1px solid var(--btn-color-border);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--border-radius);
  font-family: var(--font);
  font-weight: var(--font-weight6);
  transition: 0.2s;
}

.btn-action:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.calc-card.locked {
  opacity: 0.7;
}

.btn-action.disabled {
  cursor: not-allowed;
  border-color: var(--color-border);
  color: var(--color-muted);
}

.btn-logout {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--size-18);
  transition: 0.2s;
}

.btn-logout:hover {
  color: var(--color-red);
}

.mobile-menu-toggle {
  display: none;
}

.hidden {
  display: none !important;
}

/* Card nội dung cấp khối của một trang (trước đây tên là .calculator-demo — tên cũ
   không còn đúng vì khối này dùng chung cho Tools, Libraries, Saved Designs và các
   sub-page công cụ, không chỉ trang calculator).
   Tái sử dụng token --space-*, --color-card-*, --border-radius, --shadow-soft. */
.content-card {
  margin-top: var(--space-40);
  background: var(--color-card-background);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius);
  padding: var(--space-25);
  box-shadow: var(--shadow-soft);
}

/* Phần tiêu đề của .content-card (kicker + tiêu đề, có thể kèm nút hành động bên phải). */
.content-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-20);
  margin-bottom: var(--space-25);
}

/* Một nhóm công cụ trên trang Tools (Filtering / Startup & Protection /
   Magnetic Selecting / Auxiliary). 4 nhóm nằm chung trong MỘT .content-card và
   xếp thành lưới bằng .card-grid; mỗi nhóm vẫn giữ hình thức card riêng
   (nền + viền + bo góc) để phân biệt rõ từng nhóm.
   - height: 100% + flex column: 4 card trong cùng một hàng lưới luôn cao bằng nhau.
   - .tool-group-description dùng flex: 1 1 auto để phần mô tả giãn hết khoảng trống,
     nhờ đó các nút .btn-action luôn thẳng hàng và dán đáy card.
   Tái sử dụng token --color-card-*, --border-radius, --space-*; không khai báo
   màu/kích thước mới. */
.tool-group {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-card-background);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius);
  padding: var(--space-15) var(--space-25);
  transition: all 0.3s ease;
}

.tool-group:hover {
  border-color: var(--color-accent);
  background: #ffffff0a;
}

/* Mô tả ngắn của nhóm công cụ, đặt dưới tiêu đề nhóm.
   flex: 1 1 auto để mô tả giãn lấp khoảng trống còn lại -> nút bên dưới luôn
   nằm sát đáy card và cao bằng nhau giữa các card cùng hàng.
   Tái sử dụng token màu/cỡ chữ sẵn có (--color-muted, --size-12). */
.tool-group-description {
  flex: 1 1 auto;
  color: var(--color-muted);
  font-size: var(--size-12);
  margin-bottom: var(--space-20);
}

/* Bố cục sub-page của một nhóm công cụ (filtering.php, auxiliary.php, ...):
   danh sách công cụ bên trái, panel công cụ đang chọn bên phải.
   Thêm mới vì chưa có class bố cục hai cột dạng "danh sách + nội dung" nào phù hợp;
   tái sử dụng token --space-*, --color-border, --border-radius, --color-bg-transparent. */
.tool-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--space-20);
  align-items: start;
}

/* Danh sách công cụ trong nhóm: mỗi mục là một nút chọn công cụ đang mở.
   Tái sử dụng token sẵn có, không khai báo màu/kích thước mới. */
.tool-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.tool-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-10) var(--space-15);
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--size-12);
  font-weight: var(--font-weight6);
  text-align: left;
  cursor: pointer;
  transition: 0.2s;
}

.tool-nav-item i {
  color: var(--color-muted);
}

.tool-nav-item:hover {
  border-color: var(--color-accent);
}

.tool-nav-item.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.tool-nav-item.active i {
  color: var(--color-bg);
}

/* Panel công cụ đang chọn: kế thừa .panel, chỉ bổ sung khoảng cách dọc giữa
   phần mô tả, form nhập và kết quả.
   min-width: 0 — panel nằm trong grid/flex; thiếu khai báo này thì nội dung dài
   (input, kết quả) đẩy panel rộng hơn cột và làm tràn ngang khung trang. */
.tool-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  min-width: 0;
}

/* Bọc nội dung bố cục mặc định của .tool-panel (title/desc + form + result).
   .tool-panel giờ chứa 2 khối con (#toolPanelDefault / #toolPanelFiltering) nên
   cần khối con này tự giữ bố cục dọc + khoảng cách như trước để không thay đổi
   giao diện các công cụ dùng bố cục mặc định. Tái sử dụng token --space-20. */
.tool-panel-default {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* Hàng nút hành động của công cụ (Tính toán / Xóa kết quả).
   Tái sử dụng .btn-action (đã có width: 100%) nên chỉ cần bố cục hàng ngang.
   margin-top: --space-15 — tách hàng nút khỏi thông báo/ô nhập phía trên. */
.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
  margin-top: var(--space-15);
}

.tool-actions .btn-action {
  width: auto;
  min-width: 160px;
}

/* Khối kết quả tính toán: kế thừa .result-list, thêm đường phân cách phía trên
   để tách khỏi phần nhập liệu.
   min-height: --std-min-height — giữ chỗ cố định cho danh sách kết quả để panel
   không bị "nhảy" chiều cao khi bấm Tính toán / Xóa kết quả. */
.tool-result {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-15);
  min-height: var(--std-min-height);
}

/* Thông báo lỗi/ghi chú của công cụ (validate input, cảnh báo miền giá trị).
   Tái sử dụng token cảnh báo sẵn có (--color-red-light, --size-11).
   margin-top: --space-10 — tách thông báo khỏi lưới ô nhập phía trên (trước đây
   thông báo dính sát .input-grid khi hiện ra). */
.tool-message {
  display: none;
  margin-top: var(--space-10);
  color: var(--color-red-light);
  font-size: var(--size-11);
}

.tool-message.is-visible {
  display: block;
}

.section-kicker {
  display: block;
  color: var(--color-muted);
  font-size: var(--size-10);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--space-10);
}

.calculator-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr;
  gap: var(--space-20);
}

.panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius);
  padding: var(--space-20);
}

.panel h3 {
  margin-bottom: var(--space-20);
  font-size: var(--size-18);
}

/* Section con nằm trong một .panel (ví dụ Recommended Parts trong .winding-panel của Flyback).
   Trước đây khối con dùng lại .panel nên bị lồng 2 viền + padding, nhìn dính liền khối cha.
   Dùng đường kẻ trên + khoảng đệm để phân cách, cùng pattern với .topology-overview-block.
   Tái sử dụng token sẵn có (--color-border, --space-20, --space-15); không hardcode giá trị mới. */
.panel-section {
  margin-top: var(--space-30);
  padding-top: var(--space-15);
  border-top: 1px solid var(--color-border);
}

.topology-overview {
  margin-bottom: var(--space-20);
}

.topology-overview-copy {
  color: var(--color-muted);
  line-height: var(--line-height-15);
  margin-bottom: var(--space-15);
}

.topology-overview-block {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-15);
}

/* Khoảng cách giữa các block nội dung trong card thiết kế Buck (.buck-design-notes).
   Card này xếp nhiều .topology-overview-block liên tiếp (nguyên lý / linh kiện phụ trợ /
   giá trị khuyến nghị), trong khi block gốc chỉ dùng lẻ trong overview nên chưa có margin.
   Tái sử dụng token sẵn có (--space-20, --color-border); không hardcode giá trị mới. */
.buck-design-notes .topology-overview-block + .topology-overview-block,
.flyback-design-notes .topology-overview-block + .topology-overview-block {
  margin-top: var(--space-20);
}

/* Card thiết kế topology nằm NGOÀI .calculator-grid (tách khỏi khối tính toán, đặt cuối trang).
   Dùng chung cho Buck và Flyback để duy trì cách đọc đồng nhất và khoảng cách rõ ràng.
   Tái sử dụng token --space-30 sẵn có; không hardcode giá trị mới. */
.buck-design-notes,
.flyback-design-notes {
  margin-top: var(--space-20);
}

.topology-overview-block h4 {
  margin-bottom: var(--space-10);
  color: var(--color-text);
  font-size: var(--size-18);
}

.topology-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  color: var(--color-muted);
  line-height: var(--line-height-15);
}

.topology-feature-list strong {
  color: var(--color-text);
}

/* Layout phần overview topology: ảnh minh hoạ nằm bên trái, nội dung bên phải trên PC.
   Cần tạo mới vì chưa có class nào đảm nhiệm bố cục hai cột cho khối overview;
   tái sử dụng token sẵn có (--space-20, --color-border, --border-radius, --color-bg-transparent). */
.topology-overview-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}

/* Khung placeholder ảnh minh hoạ topology. Cố định kích thước để bố cục không
   nhảy khi ảnh chưa được thêm vào assets/images/topologies/.
   Nền luôn là màu trắng (--color-white) để ảnh minh hoạ hiển thị rõ trên mọi nền. */
.topology-illustration {
  position: relative;
  flex: 0 0 320px;
  width: 320px;
  height: 200px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topology-illustration-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon fallback hiển thị khi ảnh minh hoạ chưa tồn tại.
   topology-shell.js thêm class .has-image vào figure khi ảnh tải thành công để ẩn icon. */
.topology-illustration-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: var(--size-32);
}

.topology-illustration.has-image .topology-illustration-placeholder {
  display: none;
}

/* Cho phép tương tác zoom: khi ảnh đã tải, con trỏ đổi và ảnh phóng nhẹ khi hover.
   Tái sử dụng token sẵn có (--std-height, --border-radius, --color-*, --space-*, --size-*). */
.topology-illustration.has-image {
  cursor: zoom-in;
}

.topology-illustration.has-image .topology-illustration-image {
  transition: transform 0.2s ease;
}

.topology-illustration.has-image:hover .topology-illustration-image {
  transform: scale(1.05);
}

/* Lightbox phóng to ảnh minh hoạ topology. Tái sử dụng token nền/token màu sẵn có;
   dùng --color-modal-overlay cho lớp phủ và --color-white cho nền ảnh để rõ ràng trên mọi nền. */
.topology-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-30);
  background: var(--color-modal-overlay);
  cursor: zoom-out;
}

.topology-lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: var(--space-20);
  right: var(--space-20);
  width: var(--std-height);
  height: var(--std-height);
  min-width: var(--std-min-width);
  min-height: var(--std-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-00);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  font-size: var(--size-18);
  cursor: pointer;
}

.lightbox-close:hover {
  color: var(--color-red);
}

.topology-overview-content {
  flex: 1 1 auto;
  min-width: 0;
}

.isolated-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.isolated-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-15);
}

.isolated-section h4 {
  font-size: var(--size-14);
  color: var(--color-text);
}

.rail-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.rail-row {
  display: grid;
  /* Cột COIL thu hẹp (--std-width) để nhường chỗ cho cột hành động thứ 5;
     các cột Voltage/Amp/Watt giãn đều (1fr) và dịch về bên trái. */
  grid-template-columns: var(--std-width) 1fr 1fr 1fr var(--std-height);
  gap: var(--space-10);
  align-items: center;
}

/* Cột hành động (thứ 5) chứa nút +/- thêm/xóa đầu ra.
   Header để trống nhưng vẫn giữ cột để căn thẳng hàng với các dòng dữ liệu. */
.rail-action-col {
  display: block;
}

/* Nút thêm/xóa đầu ra nằm trong bảng rail (cột thứ 5).
   Thêm mới vì chưa có class nút vuông nhỏ nào phù hợp; tái sử dụng token
   --std-height, --border-radius, --color-border, --color-*, --space-00. */
.rail-remove,
.rail-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--std-height);
  height: var(--std-height);
  padding: var(--space-00);
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  cursor: pointer;
}

.rail-remove:hover {
  color: var(--color-red-light);
  border-color: var(--color-alert-error-border);
}

.rail-add:hover {
  color: var(--color-green-light);
  border-color: var(--color-alert-success-border);
}

.rail-row span {
  color: var(--color-muted);
  font-size: var(--size-12);
}

.rail-row input {
  width: 100%;
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  padding: var(--space-10) var(--space-15);
  outline: none;
}

.rail-header {
  color: var(--color-muted);
  font-size: var(--size-09);
  text-transform: uppercase;
}

.total-row input {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.5);
}

.isolated-result-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-05) var(--space-15);
}

.isolated-result-list div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

/* Khối thiết kế biến áp (Flyback) nằm dưới khối kết quả tổng hợp.
   Chia nhiều cột theo UI Guidelines §2: mỗi hàng là một nhóm trường liên quan.
   Thêm mới vì chưa có class nào đảm nhiệm bố cục lưới nhiều cột cho khối này;
   tái sử dụng token sẵn có (--space-*, --color-border, --border-radius). */
.transformer-design {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin-top: var(--space-20);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-20);
}

/* Mỗi hàng thiết kế biến áp: 3 cột trên desktop, thu về 1 cột trên mobile.
   Hàng lõi (core) chỉ có 2 cột nên dùng biến thể --core. */
.transformer-design-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-15);
}

.transformer-design-row--core {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Trường lock-edit: giá trị do JS tính và khóa, người dùng không sửa trực tiếp.
   Dùng nền mờ nhẹ để phân biệt với trường edit được. */
.transformer-design input[data-lock-edit] {
  background: rgba(255, 255, 255, 0.04);
  cursor: not-allowed;
}

/* Trạng thái màu cho giá trị Bactual và sai lệch Lp:
   xanh khi đạt ngưỡng an toàn, đỏ khi vượt ngưỡng.
   Tái sử dụng token màu cảnh báo sẵn có (--color-green-light, --color-red-light). */
.transformer-design input.is-ok {
  color: var(--color-green-light);
  border-color: var(--color-alert-success-border);
}

.transformer-design input.is-over {
  color: var(--color-red-light);
  border-color: var(--color-alert-error-border);
}

/* Ô select chọn lõi biến áp dùng chung style với input trong khối thiết kế. */
.transformer-design select {
  width: 100%;
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  padding: var(--space-10) var(--space-15);
  outline: none;
}

/* Khoi day quan Flyback (phase 1: hang Np so cap) nam o cot 3 tren Recommended Parts.
   Tai su dung token san co; hang 4 o desktop, thu ve 1 cot tren mobile (da them .winding-row
   vao media query chung). Them moi vi chua co class dam nhiem bo cuc day quan. */
.winding-design {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  margin-top: var(--space-20);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-15);
}

.winding-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-15);
}

/* Khoi day quan thu cap (phase 2): moi rail output gom 2 hang (Ns/Vout/Vd va
   Is_rms/Aw_req/d/n). Ngan cach giua cac rail bang duong ke tren, dung lai token
   san co (--color-border, --space-15). Them moi vi chua co class dam nhiem
   nhom nhieu rail day quan. */
.winding-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

.winding-secondary:empty {
  display: none;
}

.winding-rail-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-15);
}

/* Tieu de rail (Ns1, Ns2...) de nguoi dung doi chieu voi bang dau ra. */
.winding-rail-title {
  font-size: var(--size-13);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.winding-design input[data-lock-edit] {
  background: rgba(255, 255, 255, 0.04);
  cursor: not-allowed;
}

.winding-design input.is-ok {
  color: var(--color-green-light);
  border-color: var(--color-alert-success-border);
}

.winding-design input.is-over {
  color: var(--color-red-light);
  border-color: var(--color-alert-error-border);
}

/* Card thực thi Flyback (phase 3): Fit check + Recommended Parts nằm NGOÀI
   .calculator-grid nên chiếm toàn bộ chiều ngang trang. Desktop chia đều 2 cột
   (Fit check trái, Recommended Parts phải — Recommended luôn ở cột cuối);
   mobile thu về 1 cột, Fit check trên và Recommended Parts dưới.
   Thêm mới vì chưa có class đảm nhiệm bố cục 2 cột ngang cho card này;
   tái sử dụng token sẵn có (--space-*, --color-border). */
/* Dãn cách card thực thi xuống so với .calculator-grid phía trên (áp dụng cả
   desktop lẫn mobile). Tái sử dụng token --space-50 sẵn có; không hardcode. */
.flyback-execution-panel {
  margin-top: var(--space-20);
}

/* gap: --space-50 — tăng khoảng cách GIỮA 2 cột (Fit check | Recommended Parts)
   để hai khối không dính sát nhau trên desktop. Tái sử dụng token sẵn có. */
.flyback-execution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-50);
}

/* Hai cột con dùng .panel-section (đường kẻ trên) để tách khỏi tiêu đề card;
   cột đầu tiên bỏ đường kẻ để không tạo khoảng trống thừa dưới tiêu đề. */
.flyback-execution-col {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Danh sách diode gợi ý theo rail nối tiếp danh sách linh kiện chính. */
.parts-list--rails {
  margin-top: var(--space-15);
}

.parts-list--rails:empty {
  display: none;
}

.input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-15);
}

/* Bố cục Input Parameters mới: các ô nhập bố trí thành 3 cột, chảy từ trái sang
   phải trong lòng panel (Điện áp đầu vào 3 ô lấp đầy 1 hàng; nhóm khác tiếp nối
   sang trái). Dùng class riêng thay vì sửa .input-grid dùng chung để không ảnh
   hưởng panel isolated/legacy. Kế thừa display/gap của .input-grid. */
.input-grid.input-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.input-grid.input-grid--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.input-grid label {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  color: var(--color-muted);
  font-size: var(--size-12);
}

.input-grid input {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  padding: var(--space-10) var(--space-15);
  outline: none;
}

/* Nhóm trường nhập liệu theo chủ đề trong panel Input Parameters.
   Thêm mới vì trước đây chưa có class nào gom nhóm + tiêu đề phụ cho các ô
   nhập liên quan (UI Guidelines: Group related input fields together visually).
   Tái sử dụng token sẵn có: --space-*, --color-border, --size-*, --font-weight*. */
.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  /* Đường kẻ phân cách giữa các block (ĐIỆN ÁP ĐẦU VÀO, ĐẦU RA & TẢI, ...)
     cần tách biệt rõ, không dính vào ô nhập phía trên: thêm margin-top cho
     khoảng trống phía trên đường kẻ và padding-top cho khoảng trống phía dưới. */
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-20);
  padding-top: var(--space-15);
}

.field-group:first-of-type {
  border-top: none;
  margin-top: var(--space-00);
  padding-top: var(--space-00);
}

.field-group-title {
  font-size: var(--size-12);
  font-weight: var(--font-weight6);
  color: var(--color-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Bọc một nhãn + ô nhập để đặt help icon ở góc phải nhãn.
   Thêm mới vì chưa có class nào hỗ trợ bố cục nhãn kèm help icon. */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--color-muted);
  font-size: var(--size-12);
  position: relative;
}

/* Nhãn field: label text bám mép trái, help icon bám mép phải, cùng một dòng.
   Dùng selector .field .field-label (specificity cao hơn) để thắng .input-grid label
   (vốn set flex-direction: column) — nếu không, label text và help icon bị xếp
   thành 2 dòng khi field nằm trong .input-grid. */
.field .field-label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

.field .field-label > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* Ô nhập trong .field: input, select và textarea dùng chung một style.
   Bổ sung select/textarea vì form modal thư viện (magnetics/components) render
   các kiểu field này nhưng trước đây chưa có style tương ứng.
   Tái sử dụng token sẵn có, không khai báo màu/kích thước mới. */
/* Ô nhập trong .field: input, select và textarea dùng chung một style.
   Bổ sung select/textarea và form modal thủ viện (magnetics/components) render
   các kiểu field này nhưng trước đây chưa có style tương ứng.
   Tái sử dụng token sẵn có, không khai báo màu/kích thước mới.
   min-height: --std-min-height — giữ chiều cao ô nhập đồng bộ với các form khác
   (input mặc định thấp hơn select/textarea khiến hàng field trong .input-grid lệch).
   box-sizing: border-box — padding ngang không cộng vào width: 100%, tránh ô nhập
   tràn khỏi cột .input-grid khi panel hẹp. */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--std-min-height);
  box-sizing: border-box;
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  padding: var(--space-10) var(--space-15);
  outline: none;
  font-family: var(--font);
  font-size: var(--input-font-size);
}

/* Textarea trong form modal: cho phép giãn dọc, giữ chiều rộng đầy đủ. */
.field textarea {
  resize: vertical;
  min-height: var(--std-min-height);
}

/* Checkbox bool trong form modal thư viện (magnetics: needs_airgap, stores_energy,
   is_isolated, is_preferred, shielded). Rule .field input ở trên set width: 100%
   và min-height: 30px khiến checkbox native bị kéo giãn to bất thường, không cân
   đối với nhãn. Ghi đè lại: kích thước nhỏ gọn, căn trái, giữ accent-color theme.
   Đặt sau rule .field input để thắng về specificity (cùng độ ưu tiên, khai báo sau). */
.field input[type="checkbox"] {
  width: var(--size-16);
  height: var(--size-16);
  min-height: var(--size-16);
  flex: 0 0 auto;
  align-self: flex-start;
  margin: var(--space-05) 0 0 0;
  padding: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Field bool (checkbox) trong form modal thư viện: label + help icon nằm sát nhau
   bên trái, checkbox nằm bên phải trên cùng một dòng. Field thường xếp dọc
   (flex-direction: column) nên cần đổi sang hàng ngang cho riêng field bool.
   Tái sử dụng token --space-* sẵn có; không khai báo màu/kích thước mới. */
.field--bool {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-15);
}

/* Nhãn trong field bool: label text + help icon dính sát nhau bên trái,
   không giãn đẩy checkbox ra xa (bỏ justify-content: space-between của .field-label). */
.field--bool .field-label {
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: var(--space-05);
}

.field--bool .field-label > span {
  flex: 0 1 auto;
}

/* Checkbox trong field bool: căn phải, không thụt lề trên như field thường. */
.field--bool input[type="checkbox"] {
  align-self: center;
  margin: var(--space-00);
}

/* Phản hồi lỗi ngay trên ô nhập (UI Guidelines: provide immediate feedback).
   Tái sử dụng token cảnh báo sẵn có thay vì khai báo màu mới. */
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: var(--color-alert-error-border);
}

.field-message {
  display: none;
  color: var(--color-red-light);
  font-size: var(--size-11);
}

.field.has-error .field-message {
  display: block;
}

/* Vùng cảnh báo tính khả thi của Buck (dropout / duty / kiến trúc công suất).
   Lý do tạo mới: base.css chưa có kiểu danh sách cảnh báo nhiều mức trong panel
   tính toán. Tái sử dụng token màu cảnh báo sẵn có (--color-alert-error,
   --color-amber, --color-accent) và token khoảng cách --space-*. */
.buck-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-top: var(--space-10);
}

.buck-warnings:empty {
  display: none;
}

.buck-warning {
  margin: 0;
  padding: var(--space-10) var(--space-15);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  font-size: var(--size-11);
  line-height: 1.5;
}

.buck-warning--danger {
  background: var(--color-alert-error);
  border-color: var(--color-alert-error-border);
  color: var(--color-red-light);
}

.buck-warning--warning {
  border-color: var(--color-amber);
  color: var(--color-amber);
}

.buck-warning--info {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Vùng gợi ý linh kiện động cho Buck (cuộn cảm đúc / MOSFET / diode).
   Lý do tạo mới: base.css chưa có kiểu danh sách linh kiện gợi ý theo nhóm.
   Tái sử dụng token màu/khoảng cách sẵn có. */
.buck-parts {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

.buck-parts:empty {
  display: none;
}

.buck-part-group h4 {
  margin: 0 0 var(--space-10);
  color: var(--color-muted);
  font-size: var(--size-11);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.buck-part-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.buck-part-list li {
  padding: var(--space-10) var(--space-15);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: var(--size-11);
  line-height: 1.5;
}

.buck-part-list li strong {
  color: var(--color-text);
}

.buck-part-empty {
  color: var(--color-muted);
  font-style: italic;
}

/* Help icon + tooltip giải thích tham số phức tạp (UI Guidelines).
   Dùng icon Font Awesome sẵn có của dự án; không thêm thư viện mới.
   Tái sử dụng token: --color-muted, --color-accent, --color-modal-background,
   --color-border, --border-radius, --space-*, --size-*, --shadow-soft. */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-16);
  height: var(--size-16);
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--size-12);
  cursor: help;
  padding: var(--space-00);
}

.help-icon:hover,
.help-icon:focus-visible {
  color: var(--color-accent);
  outline: none;
}

.help-tooltip {
  position: absolute;
  z-index: 120;
  top: var(--space-35);
  right: var(--space-00);
  width: max-content;
  max-width: 200px;
  padding: var(--space-10) var(--space-15);
  background: var(--color-modal-background);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  color: var(--color-text);
  font-size: var(--size-11);
  font-style: italic;
  /* font-weight: var(--font-weight3); */
  line-height: var(--line-height-15);
  text-transform: none;
  letter-spacing: normal;
  display: none;
}

.help-tooltip.is-visible {
  display: block;
}

.btn-action.full {
  margin-top: var(--space-20);
}

.btn-action.secondary {
  width: auto;
  min-width: 160px;
  background: transparent;
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.result-list div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-05);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--size-12);
}

.result-list strong {
  color: var(--color-text);
  font-size: var(--size-16);
}

/* Giá trị kết quả tính toán (khối Calculated Results): class chung gắn vào mọi
   phần tử hiển thị giá trị kết quả (thẻ <strong> trong .result-list và <input>
   readonly trong .transformer-design) để dễ chỉnh style tập trung một chỗ.
   font-variant-numeric: tabular-nums — các chữ số cùng độ rộng để giá trị thẳng
   hàng theo cột, dễ so sánh bằng mắt. */
.result-value {
  font-variant-numeric: tabular-nums;
}

/* Giá trị kết quả dạng <strong> trong danh sách kết quả (.result-list):
   giữ nguyên dạng text đậm (không viền/nền) nhưng căn phải và dùng cỡ chữ
   đồng nhất với .result-list strong để giá trị thẳng hàng, dễ đọc.
   Không thêm viền/nền để tránh cảm giác "ô" rời rạc. */
.result-list .result-value {
  color: var(--color-text);
  font-size: var(--size-14);
  font-weight: var(--font-weight5);
  white-space: nowrap;
}

.parts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

.parts-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--size-12);
}

.parts-list strong {
  color: var(--color-text);
}

.tool-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-20);
  margin-bottom: var(--space-25);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-20);
  margin-bottom: var(--space-25);
}

.page-header h1 {
  font-size: var(--size-28);
  margin-bottom: var(--space-05);
}

.page-subtitle {
  color: var(--color-muted);
  font-size: var(--size-12);
}

.tool-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  flex-wrap: wrap;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-20);
  margin-bottom: var(--space-25);
}

.access-banner {
  background: rgba(144, 245, 11, 0.08);
  border: 1px solid rgba(116, 245, 11, 0.5);
  border-radius: var(--border-radius);
  padding: var(--space-20);
  margin-bottom: var(--space-25);
  color: var(--color-text);
}

.access-banner strong {
  display: block;
  margin-bottom: var(--space-10);
  color: var(--color-orange);
}

.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.data-table th,
.data-table td {
  padding: var(--space-15) var(--space-10);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  color: var(--color-muted);
  font-size: var(--size-10);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.data-table td {
  color: var(--color-text);
  font-size: var(--size-13);
}

/* Thanh tab chọn nhóm magnetics (A/B/C/D) trên trang quản lý magnetics.
   Chưa có class tab nào sẵn có nên buộc phải tạo mới; tái sử dụng token
   --color-border, --color-bg-transparent, --color-accent, --border-radius,
   --space-*, --size-*, --font-weight*. */
.magnetics-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-bottom: var(--space-20);
}

/* font-family: var(--font) — nút là thẻ <button> nên mặc định trình duyệt dùng font hệ
   thống riêng, không kế thừa font của trang; khai báo để nút tab đồng bộ typography. */
.magnetics-tab {
  padding: var(--space-10) var(--space-20);
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--size-12);
  font-weight: var(--font-weight6);
  cursor: pointer;
}

.magnetics-tab:hover {
  border-color: var(--color-accent);
}

.magnetics-tab.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* Thanh công cụ phía trên bảng dữ liệu magnetics: chọn bảng + nút thêm mới.
   Chưa có class tương đương sẵn có nên tạo mới; tái sử dụng token
   --space-*, --color-border, --border-radius, --color-bg-transparent, --size-*. */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-15);
  margin-bottom: var(--space-20);
}

.table-toolbar select {
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  padding: var(--space-10) var(--space-15);
  outline: none;
  min-width: 220px;
}

/* Dropdown custom trong thanh công cụ bảng dữ liệu: trên PC chỉ rộng theo nội dung
   (không giãn full như trên mobile). Wrapper .custom-select mặc định width: 100%
   nên cần ghi đè để không chiếm trọn chiều rộng thanh công cụ khi nút "Thêm mới"
   bị ẩn (user thường). Tái sử dụng token --std-width sẵn có. */
.table-toolbar .custom-select {
  width: auto;
  min-width: var(--std-width);
}

.user-inline {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.user-mini-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(50, 170, 220, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight7);
  color: var(--color-white);
}

.user-inline strong {
  display: block;
  color: var(--color-text);
}

.user-inline small {
  display: block;
  color: var(--color-muted);
  font-size: var(--size-10);
}

.table-actions {
  display: flex;
  gap: var(--space-10);
}

.table-action {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--border-radius);
  padding: 6px 10px;
  cursor: pointer;
}

.table-action.danger {
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.permission-box {
  margin-top: var(--space-20);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-20);
}

.permission-box strong {
  display: block;
  margin-bottom: var(--space-15);
  color: var(--color-text);
}

.topology-permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10);
}

.permission-item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-size: var(--size-12);
}

.permission-item input {
  accent-color: var(--color-accent);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: var(--size-10);
  font-weight: var(--font-weight7);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.status-pill.active {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}

.status-pill.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.status-pill.disabled {
  background: rgba(148, 163, 184, 0.12);
  color: var(--color-muted);
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-15);
  padding: var(--space-15) 0;
  border-bottom: 1px solid var(--color-border);
}

.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.toggle-label strong {
  color: var(--color-text);
  font-size: var(--size-14);
}

.toggle-label span {
  color: var(--color-muted);
  font-size: var(--size-11);
}

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 999px;
  transition: 0.2s ease;
}

.slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: var(--color-white);
  border-radius: 50%;
  transition: 0.2s ease;
}

.switch input:checked + .slider {
  background: var(--color-accent);
}

.switch input:checked + .slider::before {
  transform: translateX(22px);
}

.calculator-grid-page {
  grid-template-columns: 1.1fr 1fr 1.1fr;
  margin-top: 0;
}

.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.auth-modal-content {
  width: min(90vw, 420px);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius);
  padding: var(--space-20);
  box-shadow: var(--shadow-soft);
}

/* Modal thư viện dữ liệu (magnetics/components) có nhiều trường nên cần rộng hơn
   modal đăng nhập và giới hạn chiều cao để form dài vẫn cuộn được.
   Giới hạn 520px để mỗi trường nhập (1/2 bề ngang) chỉ còn ~220px, gọn gàng;
   textarea vẫn trải full bề ngang modal. Tái sử dụng token sẵn có. */
.auth-modal-content.modal-wide {
  width: min(92vw, 520px);
  max-height: 90vh;
  overflow-y: auto;
}

/* Lưới trường trong form modal thư viện: 2 cột trên desktop, 1 cột trên mobile.
   Mỗi trường nhập chiếm 1/2 bề ngang; textarea (field--full) trải full 2 cột.
   column-gap lớn (--space-40) để phân biệt rõ 2 cột; row-gap nhỏ hơn (--space-20)
   để các dòng không dính sát nhau. Tái sử dụng token --space-* sẵn có. */
.modal-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-40);
  row-gap: var(--space-20);
}

/* Field trải full bề ngang lưới (textarea nhiều dòng): chiếm trọn 2 cột,
   luôn nằm dưới cùng form (JS render textarea sau các field nhập thường). */
.field--full {
  grid-column: 1 / -1;
}

.auth-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-20);
}

.auth-modal-header h3 {
  font-size: var(--size-20);
}

.modal-close {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--size-18);
}

/* Hàng nút hành động cuối form trong modal (Hủy + Lưu).
   Thêm mới vì chưa có class bố cục 2 nút cạnh nhau trong modal;
   tái sử dụng token --space-*, --border-radius sẵn có. */
.modal-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-15);
  margin-top: var(--space-20);
}

.modal-form-actions .btn-action {
  width: auto;
  min-width: 100px;
}

/* Ô nhập luôn chuyển sang chữ hoa (Series, Part number).
   text-transform để hiển thị hoa; JS ép giá trị thực khi gõ để dữ liệu lưu là chữ hoa. */
.field-input-uppercase {
  text-transform: uppercase;
}

/* Ô nhập dẫn xuất (ae_mm2/aw_mm2/le_mm/ap_cm4): readonly, tự tính từ kích thước.
   Nền mờ nhẹ + con trỏ not-allowed để phân biệt với trường nhập tay được.
   Tái sử dụng token màu sẵn có; không khai báo màu/kích thước mới. */
.field-input-derived {
  background: rgba(255, 255, 255, 0.04);
  cursor: not-allowed;
}

/* Ô nhập bị lock khi chọn lõi toroid (AL/Ae/Aw/Bmax/Bsat): readonly, giá trị tự
   điền từ lõi đã chọn. Nền mờ nhẹ + con trỏ not-allowed để phân biệt với trường
   nhập tay (khi chọn "Not Selected" thì unlock). Tái sử dụng token màu sẵn có. */
.field input.is-locked {
  background: rgba(255, 255, 255, 0.04);
  cursor: not-allowed;
}

/* Cấu trúc form trong modal (login & đổi mật khẩu) dùng chung một bộ style.
   Tái sử dụng token sẵn có thay vì tạo class mới; Change Password trước đây thiếu style nên hiển thị sai. */
#loginForm,
#changePasswordForm {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

#loginForm label,
#changePasswordForm label {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  color: var(--color-muted);
  font-size: var(--size-12);
}

#loginForm input,
#changePasswordForm input {
  width: 100%;
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  padding: var(--space-10) var(--space-15);
  outline: none;
}

.text-green {
  color: var(--color-green);
}

/* ============================================================
   CUSTOM DROPDOWN (thay thế <select> native)
   ============================================================ */
/* Wrapper của custom dropdown. Giữ select gốc ẩn bên trong để
   code đọc .value / change / form.reset() vẫn hoạt động bình thường.
   Tái sử dụng token sẵn có; không khai báo màu/kích thước mới. */
.custom-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Ẩn select gốc nhưng giữ trong DOM (class do custom-select.js thêm). */
.custom-select-native {
  display: none !important;
}

/* Button hiển thị giá trị đang chọn; style giống input/select hiện có. */
.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  background: var(--color-bg-transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  padding: var(--space-10) var(--space-15);
  font-family: var(--font);
  font-size: var(--input-font-size);
  cursor: pointer;
  outline: none;
  text-align: left;
}

/* Mũi tên chỉ dẫn dropdown (dùng ký tự Unicode, không cần icon font). */
.custom-select-trigger::after {
  content: "\25BE";
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: var(--size-12);
}

.custom-select-trigger:hover {
  border-color: var(--color-accent);
}

/* Panel chứa danh sách option; ẩn mặc định, hiện khi wrapper có .is-open. */
.custom-select-panel {
  position: absolute;
  top: calc(100% + var(--space-05));
  left: 0;
  right: 0;
  z-index: 130;
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  display: none;
}

.custom-select.is-open .custom-select-panel {
  display: block;
}

/* Modal Components: dropdown category của tụ hóa (16 lựa chọn) và package
   của tụ gốm (11 lựa chọn) giới hạn panel cao khoảng 6 dòng rồi cuộn,
   tránh panel quá dài che khuất form nhập liệu. MOSFET/Diode có ít lựa
   chọn (<=5) nên không bị ảnh hưởng bởi giới hạn này.
   Mỗi dòng option ~31.5px (padding 6px*2 + line-height 13px*1.5) => 6 dòng ~189px. */
#componentsModal .custom-select-panel {
  max-height: 189px;
}

/* Từng option trong panel; hover/đang chọn dùng màu accent. */
.custom-select-option {
  padding: var(--space-10) var(--space-15);
  color: var(--color-text);
  font-size: var(--input-font-size);
  cursor: pointer;
}

.custom-select-option:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ============================================================
   BỐ CỤC CÔNG CỤ DẠNG "CALCULATE BY" (lọc thông thấp L/C)
   ============================================================ */
/* Bố cục đặc biệt cho công cụ có dropdown "calculate by" (chọn cặp giá trị đã biết
   để tính giá trị còn lại). Bố cục Left-Right: cột trái chứa title + overview +
   descriptions, cột phải chứa calculate-by + input value + tool-result.
   Thêm mới vì bố cục mặc định của .tool-panel chỉ xếp dọc một cột, chưa có dạng
   "nội dung trái - nhập liệu phải". Tái sử dụng token --space-* sẵn có. */
.tool-panel-filtering {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-20);
  align-items: start;
}

/* Cột trái: title + overview + descriptions xếp dọc. */
.tool-panel-filtering-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

/* Cột phải: calculate-by + input value + tool-result xếp dọc. */
.tool-panel-filtering-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

/* Mô tả chi tiết (nguyên lý + công thức) trong cột trái.
   Nội dung là HTML tĩnh do developer viết (p/ul/li/strong/em/sub) nên cần style
   cho các thẻ con để hiển thị gọn gàng, đồng bộ theme tối. */
.tool-panel-filtering-descriptions {
  color: var(--color-muted);
  font-size: var(--size-12);
  line-height: var(--line-height-15);
}

.tool-panel-filtering-descriptions p {
  margin-bottom: var(--space-10);
}

.tool-panel-filtering-descriptions ul {
  margin: var(--space-05) 0 var(--space-10) var(--space-30);
  padding: 0;
}

.tool-panel-filtering-descriptions li {
  margin-bottom: var(--space-05);
}

.tool-panel-filtering-descriptions strong {
  color: var(--color-text);
}

/* Kết quả trong bố cục "calculate by": giảm cỡ chữ + độ đậm so với .result-list
   mặc định (16px/bold) để không quá to và béo trong cột hẹp bên phải. */
.tool-panel-filtering .result-list strong {
  font-size: var(--size-14);
  font-weight: var(--font-weight6);
}

/* Trạng thái màu cho giá trị kết quả (dùng cho tool lọc L/C đầu ra):
   - is-ok: xanh (đạt ngưỡng an toàn).
   - is-warn: vàng (vượt biên an toàn, cần lưu ý).
   - is-over: đỏ (vượt ngưỡng nguy hiểm).
   Tái sử dụng token màu cảnh báo sẵn có (--color-green-light, --color-amber,
   --color-red-light); không khai báo màu mới. */
.tool-panel-filtering .result-list strong.is-ok {
  color: var(--color-green-light);
}

.tool-panel-filtering .result-list strong.is-warn {
  color: var(--color-amber);
}

.tool-panel-filtering .result-list strong.is-over {
  color: var(--color-red-light);
}

/* Thông báo cảnh báo (warning) trong bố cục "calculate by": màu vàng thay vì đỏ
   (lỗi). Dùng chung .tool-message nhưng ghi đè màu khi có class is-warning. */
.tool-message.is-warning {
  color: var(--color-amber);
}

@media (max-width: 767px) {
  body {
    overflow: auto;
  }

  .app-container {
    display: block;
    width: 100vw;
    height: auto;
    min-height: 100vh;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(80vw, 300px);
    transform: translateX(-110%);
    transition: transform 0.25s ease;
    z-index: 110;
    box-shadow: var(--shadow-soft);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    display: block;
    background: var(--color-modal-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
  }

  body.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .main-content {
    overflow: visible;
  }

  .topbar {
    padding: 0 var(--space-15);
    height: auto;
    min-height: 56px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg-transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
  }

  .search-bar {
    width: 100%;
    margin: 0 var(--space-10);
  }

  .search-bar input {
    padding-left: 34px;
  }

  .user-info {
    display: none;
  }

  .content-wrapper {
    padding: var(--space-15);
  }

  .stats-grid,
  .card-grid,
  .calculator-grid-page {
    grid-template-columns: 1fr;
    gap: var(--space-15);
  }

  /* Trên mobile, lưới nhập liệu 3 cột của panel Input Parameters thu về 1 cột
     để mỗi ô chiếm trọn chiều rộng, dễ nhập liệu và tránh tràn. */
  .input-grid.input-grid--triple {
    grid-template-columns: 1fr;
  }

  /* Khối thiết kế biến áp cũng thu về 1 cột trên mobile để dễ đọc và nhập liệu. */
  .transformer-design-row,
  .transformer-design-row--core,
  .winding-row {
    grid-template-columns: 1fr;
  }

  /* Card thực thi Flyback (Fit check + Recommended Parts) thu về 1 cột trên mobile:
     Fit check ở trên, Recommended Parts ở dưới (đúng thứ tự DOM).
     margin-top: --space-50 — dãn cách card xuống so với .calculator-grid phía trên
     (trước đây chỉ có --space-30 nên card dính sát khối tính toán trên mobile). */
  .flyback-execution-panel {
    margin-top: var(--space-12);
  }

  .flyback-execution-grid {
    grid-template-columns: 1fr;
    gap: var(--space-50);
  }

  /* Form modal thư viện thu về 1 cột trên mobile để mỗi trường chiếm trọn chiều rộng. */
  .modal-field-grid {
    grid-template-columns: 1fr;
  }

  /* Sub-page nhóm công cụ: danh sách công cụ xếp trên, panel công cụ xếp dưới
     để mỗi phần chiếm trọn chiều rộng trên mobile. */
  .tool-workspace {
    grid-template-columns: 1fr;
  }

  /* Bố cục "calculate by": thu về 1 cột trên mobile, thứ tự title -> overview ->
     descriptions -> input value -> tool-result xếp từ trên xuống dưới. */
  .tool-panel-filtering {
    grid-template-columns: 1fr;
  }

  .tool-actions .btn-action {
    width: 100%;
  }

  .stat-card {
    padding: var(--space-5) var(--space-20);
  }

  .calc-card,
  .panel,
  .tool-group {
    padding: var(--space-15) var(--space-20);
  }

  .calc-card p {
    min-height: auto;
    margin-bottom: var(--space-20);
  }

  .card-header {
    margin-bottom: var(--space-10);
  }

  .section-title {
    font-size: var(--size-18);
  }

  /* Trên thiết bị di động, ảnh minh hoạ nằm phía trên nội dung overview
     thay vì bên trái: đổi hướng flex sang column và cho khung ảnh giãn đầy chiều rộng. */
  .topology-overview-layout {
    flex-direction: column;
  }

  .topology-illustration {
    flex: 0 0 auto;
    width: 100%;
    height: 180px;
  }

  .tool-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tool-header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .btn-action {
    padding: var(--space-10) var(--space-15);
    font-size: var(--size-12);
  }

  /* Chống auto-zoom của iOS Safari khi focus ô nhập liệu trên mobile.
     iOS tự phóng to trang khi control có font-size < 16px; đặt 16px cho mọi
     input/select/textarea để giữ nguyên tỉ lệ hiển thị mà không cần
     meta user-scalable=no (vốn gây hại khả năng truy cập).
     Tái sử dụng token sẵn có: --size-16. */
  /* Nâng token cỡ chữ control nhập liệu lên 16px — đây là cách duy nhất chắc
     chắn thắng mọi rule desktop cấp class (.field input 13px, .custom-select-
     trigger 13px...) vì media query KHÔNG cộng thêm specificity cho selector.
     Nhờ vậy mọi ô nhập của trang topology (Input Parameters, thiết kế biến áp,
     dây quấn, Fit check — kể cả ô do flyback.js render động trong .field) đều
     tính ra 16px nên iOS Safari không còn auto-zoom khi focus.
     `.nav-filter input` (sidebar) vẫn cần khai báo riêng vì rule desktop của nó
     đặt font-size cố định 12px thay vì dùng token. */
  :root {
    --input-font-size: var(--size-16);
  }

  input,
  select,
  textarea,
  .nav-filter input {
    font-size: var(--size-16);
  }
}

/* iPad và điện thoại xoay ngang có bề rộng > 767px vẫn bị iOS Safari auto-zoom
   khi focus ô nhập, vì block mobile ở trên không áp dụng. Nhắm theo khả năng con
   trỏ (pointer: coarse) thay vì bề rộng màn hình để phủ hết thiết bị cảm ứng mà
   không làm đổi giao diện desktop dùng chuột. */
@media (pointer: coarse) {
  :root {
    --input-font-size: var(--size-16);
  }

  input,
  select,
  textarea,
  .nav-filter input {
    font-size: var(--size-16);
  }
}