/* ════════════════════════════════════════════════════════════════════════════
   OpenCADs — HỆ THỐNG THIẾT KẾ macOS 2026 "Liquid Glass"  (CEO 2026-07-12)
   Nguồn-sự-thật DUY NHẤT cho mọi bề mặt: web marketing · web app · desktop shell.
   Không màn nào tự chế token — mọi thứ tham chiếu về đây.

   Nguyên tắc (Apple HIG 2026):
   1. VẬT LIỆU, không phải màu phẳng — bề mặt là kính nhiều lớp, hút màu nền phía sau
      (backdrop blur + saturate), có specular highlight ở mép trên và bóng đổ mềm.
   2. BÁN KÍNH ĐỒNG TÂM — con nằm trong cha thì r_con = r_cha − padding. Không bo tùy tiện.
   3. THANG CHỮ SF — cỡ/độ đậm/letter-spacing đi theo cặp, không chọn rời rạc.
   4. MÀU NGỮ NGHĨA — label/secondary/tertiary; accent CHỈ dùng cho hành động.
   5. CHUYỂN ĐỘNG LÒ XO — mọi transition dùng --ease-spring; tôn trọng reduced-motion.
   6. TIẾT CHẾ — kính dùng cho *chrome* (rail/toolbar/sheet), nội dung nền đục để đọc rõ.

   ── NGOẠI LỆ ĐƯỢC PHÉP (đừng token-hoá, sẽ làm hỏng ý nghĩa) ───────────────
   a. MÀU CỜ quốc gia.
   b. TRẠNG THÁI ngữ nghĩa: success / warn / danger (dùng token --mc-success|warn|danger).
   c. MÀU SERIES biểu đồ (mỗi đường 1 màu để phân biệt).
   d. ICON/GRADIENT NHẬN DIỆN CỦA TỪNG TOOL trong Chợ — đây là TÀI SẢN THƯƠNG HIỆU
      CỦA DEV (như icon app trên App Store), KHÔNG phải màu hệ thống. Gộp chúng về
      accent = chợ đơn sắc, mất nhận diện. Giữ nguyên.
   ════════════════════════════════════════════════════════════════════════════ */

/* Fraunces = SERIF DISPLAY cho tiêu đề (đủ subset vietnamese) — chữ ký editorial
   kiểu Anthropic/Claude; thân chữ vẫn Manrope/system sans. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..700&display=swap');

:root{
  /* ── MÀU NGỮ NGHĨA (light) ─────────────────────────────────────────────────
     Trung tính ẤM (giấy) — KHÔNG phải xám xanh mặc định của macOS. Lý do:
     (1) CEO đã duyệt bảng Base44 warm-paper; (2) kỹ sư đọc bản vẽ trên nền sáng
     ấm đỡ mỏi mắt hơn nền xanh-lạnh; (3) trung tính lệch nhẹ về phía accent cam
     ⇒ cả trang "được chọn", không phải xám mặc định. Cấu trúc/vật liệu/chuyển
     động vẫn 100% macOS 2026. */
  /* Nâng cấp "Claude-grade" 2026-07-13: trung tính KEM ẤM đậm chất giấy hơn
     (kiểu Anthropic) — mực ấm, kem ấm; sans giữ Manrope, tiêu đề = SERIF display. */
  --mc-label:#201D18;                    /* mực ấm (chữ chính) */
  --mc-label-2:#6E6A62;                  /* phụ */
  --mc-label-3:#98948B;                  /* mờ/placeholder */
  --mc-separator:rgba(32,28,20,.10);     /* hairline ấm */
  --mc-separator-strong:rgba(32,28,20,.17);

  --mc-canvas:#FAF9F5;                   /* nền cửa sổ (kem giấy) */
  --mc-canvas-2:#F1EFE8;                 /* nền vùng nội dung lõm (yến mạch) */
  --mc-surface:#FFFFFF;                  /* thẻ đục */
  --mc-fill:rgba(32,28,20,.05);          /* nền control nhẹ */
  --mc-fill-2:rgba(32,28,20,.09);        /* hover */
  --mc-ink-surface:#211E19;              /* bề mặt TỐI (terminal/CTA band) */
  --mc-on-ink:#EDEAE2;                   /* chữ kem trên nền tối */

  /* ── BRAND (cam) — CHỈ cho LOGO (CEO 2026-07-13) ──────────────────────────
     Cam nay CHỈ sống ở logo/nhãn thương hiệu. Mọi thứ khác = đen/trắng/xám. */
  --mc-brand:#FF6B2C;
  --mc-brand-hi:#FF8A4C;
  --mc-brand-press:#E0561C;
  --mc-brand-soft:rgba(255,107,44,.10);

  /* ── ACCENT = HÀNH ĐỘNG (CAM SAN HÔ — CEO 2026-07-13 tối: "cho phép màu sắc")
     Concept riêng "BẢN VẼ & BÚT ĐÁNH DẤU": cam = bút redline kỹ sư đánh trên bản
     vẽ (cũng chính là brand) → nút chính/link/tab đang chọn. NAV rail vẫn ĐƠN SẮC
     (glyph đen) — sang trọng; MÀU dành cho nội dung + hành động. */
  --mc-accent:#FF6B2C;
  --mc-accent-hi:#FF8A4C;
  --mc-accent-press:#E0561C;
  --mc-accent-soft:rgba(255,107,44,.10);
  --mc-accent-line:rgba(255,107,44,.26);
  --mc-on-accent:#FFFFFF;
  --mc-ring:0 0 0 3.5px rgba(255,107,44,.20);

  /* ── THANG MÀU EDITORIAL (kiểu App Store — CHỈ cho tile danh mục/bộ sưu tập/
     minh hoạ, KHÔNG cho nút). Bảng riêng OpenCADs: cam redline · cobalt mực bản
     vẽ · teal · tím · hồng đất · lục kỹ thuật. */
  --mc-hue-1:#FF6B2C; --mc-hue-1-soft:rgba(255,107,44,.11);
  --mc-hue-2:#2B54D4; --mc-hue-2-soft:rgba(43,84,212,.10);    /* cobalt bản vẽ */
  --mc-hue-3:#0FA3A3; --mc-hue-3-soft:rgba(15,163,163,.11);   /* teal */
  --mc-hue-4:#7A5BFF; --mc-hue-4-soft:rgba(122,91,255,.10);
  --mc-hue-5:#E8517E; --mc-hue-5-soft:rgba(232,81,126,.10);
  --mc-hue-6:#2E9E63; --mc-hue-6-soft:rgba(46,158,99,.11);

  /* ── ÁNH MÀU MÔI TRƯỜNG (aurora) — "kính trong nhưng có màu sắc": wash rất
     nhạt dưới nền; chrome kính blur lên trên tự nhiễm màu. Dùng làm
     background-image cho body/main. */
  --mc-aurora:
    radial-gradient(900px 480px at 8% -6%, rgba(255,107,44,.07), transparent 60%),
    radial-gradient(1100px 560px at 96% 4%, rgba(43,84,212,.06), transparent 62%),
    radial-gradient(900px 620px at 55% 110%, rgba(15,163,163,.05), transparent 62%);

  /* ── TRẠNG THÁI (ngữ nghĩa — KHÔNG token-flip theo theme/brand) ────────── */
  --mc-green:#28C840; --mc-amber:#FEBC2E; --mc-red:#FF5F57;   /* traffic lights */
  --mc-success:#1B8B2E; --mc-warn:#B45309; --mc-danger:#E11D48;  /* trạng thái nội dung */
  --mc-success-soft:rgba(27,139,46,.10); --mc-warn-soft:rgba(180,83,9,.10); --mc-danger-soft:rgba(225,29,72,.10);
  --mc-success-line:rgba(27,139,46,.24); --mc-warn-line:rgba(180,83,9,.24); --mc-danger-line:rgba(225,29,72,.24);

  /* ── VẬT LIỆU (Liquid Glass) ──────────────────────────────────────────── */
  --mc-mat-ultrathin:rgba(255,255,255,.55);
  --mc-mat-thin:rgba(255,255,255,.68);
  --mc-mat-regular:rgba(255,255,255,.78);
  --mc-mat-thick:rgba(255,255,255,.90);
  --mc-blur:saturate(180%) blur(28px);
  --mc-blur-sm:saturate(160%) blur(14px);
  --mc-scrim:rgba(17,15,10,.42);                 /* nền mờ sau modal/sheet */
  --mc-mat-line:rgba(255,255,255,.62);           /* mép kính */
  --mc-specular:inset 0 1px 0 rgba(255,255,255,.75);  /* highlight mép trên */
  --mc-inner-line:inset 0 0 0 .5px rgba(60,60,67,.10);

  /* ── ĐỘ CAO (bóng mềm, nhiều lớp) ─────────────────────────────────────── */
  --mc-e1:0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --mc-e2:0 4px 10px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --mc-e3:0 12px 28px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.05);
  --mc-e4:0 28px 64px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.07);

  /* ── BÁN KÍNH ĐỒNG TÂM ────────────────────────────────────────────────── */
  --mc-r-window:26px; --mc-r-sheet:20px; --mc-r-card:16px;
  --mc-r-control:10px; --mc-r-chip:8px; --mc-r-pill:999px;

  /* ── LƯỚI 8pt ─────────────────────────────────────────────────────────── */
  --mc-s1:4px; --mc-s2:8px; --mc-s3:12px; --mc-s4:16px;
  --mc-s5:24px; --mc-s6:32px; --mc-s7:48px; --mc-s8:64px;
  --mc-s9:80px; --mc-s10:96px;           /* nhịp section trang marketing */

  /* ── CHỮ (thang SF) ───────────────────────────────────────────────────── */
  --mc-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Manrope","Inter",system-ui,sans-serif;
  --mc-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* SERIF DISPLAY — CHỈ cho tiêu đề (H1/H2/tên màn). Chữ ký editorial của hệ. */
  --mc-font-display:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  /* cỡ chữ dạng biến — dùng khi KHÔNG gắn được class .mc-* (vd style inline trong JSX).
     Cùng thang với class ở dưới; đừng chọn cỡ ngoài danh sách này. */
  --mc-fs-largetitle:34px; --mc-fs-title1:28px; --mc-fs-title2:22px; --mc-fs-title3:20px;
  --mc-fs-headline:17px;   --mc-fs-body:15px;   --mc-fs-callout:14px;
  --mc-fs-footnote:12.5px; --mc-fs-caption:11px; --mc-fs-caption2:9.5px;
  /* DISPLAY — CHỈ cho hero trang marketing (macOS không có, web cần). Co giãn theo
     viewport nên không "vỡ" trên màn nhỏ. Trong APP tuyệt đối KHÔNG dùng. */
  --mc-fs-display:clamp(32px,4.6vw,46px);
  --mc-fs-display-lg:clamp(36px,5vw,58px);

  /* ── CHUYỂN ĐỘNG ──────────────────────────────────────────────────────── */
  --mc-ease-spring:cubic-bezier(.32,.72,0,1);   /* lò xo Apple */
  --mc-ease-out:cubic-bezier(.16,1,.3,1);
  --mc-t-fast:.18s; --mc-t:.28s; --mc-t-slow:.42s;
}

/* ══════════════════════════════════════════════════════════════════════════
   THANG CHỮ — dùng class, không đặt cỡ rời rạc
   ══════════════════════════════════════════════════════════════════════════ */
/* Tiêu đề lớn = SERIF display (Fraunces) — tracking nhẹ hơn sans, weight 600
   (serif đậm quá thành nặng nề; 600 mới ra chất editorial Anthropic). */
.mc-display{font:600 var(--mc-fs-display)/1.12 var(--mc-font-display);letter-spacing:-.015em;color:var(--mc-label);text-wrap:balance;}
.mc-display-lg{font:600 var(--mc-fs-display-lg)/1.08 var(--mc-font-display);letter-spacing:-.02em;color:var(--mc-label);text-wrap:balance;}
.mc-largetitle{font:600 34px/1.15 var(--mc-font-display);letter-spacing:-.012em;color:var(--mc-label);}
.mc-title1{font:600 28px/1.2 var(--mc-font-display);letter-spacing:-.01em;color:var(--mc-label);}
.mc-title2{font:600 22px/1.28 var(--mc-font-display);letter-spacing:-.008em;color:var(--mc-label);}
.mc-title3{font:700 20px/1.3 var(--mc-font);letter-spacing:-.012em;color:var(--mc-label);}
.mc-headline{font:600 17px/1.4 var(--mc-font);letter-spacing:-.008em;color:var(--mc-label);}
.mc-body{font:400 15px/1.55 var(--mc-font);letter-spacing:-.004em;color:var(--mc-label);}
.mc-callout{font:400 14px/1.5 var(--mc-font);color:var(--mc-label-2);}
.mc-footnote{font:500 12.5px/1.45 var(--mc-font);color:var(--mc-label-2);}
.mc-caption{font:600 11px/1.35 var(--mc-font);letter-spacing:.04em;color:var(--mc-label-3);text-transform:uppercase;}
.mc-dim{color:var(--mc-label-2);}
.mc-mono{font-family:var(--mc-mono);}
/* eyebrow nhãn mục — MONO viết hoa (chữ ký nhỏ kiểu Anthropic) */
.mc-eyebrow{font:600 11px/1.4 var(--mc-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mc-label-3);}

/* ══════════════════════════════════════════════════════════════════════════
   TERMINAL — khối lệnh TỐI (chữ ký Claude Code): mực ấm + chữ kem + mono
   ══════════════════════════════════════════════════════════════════════════ */
.mc-terminal{background:var(--mc-ink-surface);border-radius:var(--mc-r-card);color:var(--mc-on-ink);
  font:500 13px/1.7 var(--mc-mono);padding:var(--mc-s4) var(--mc-s5);overflow-x:auto;}
.mc-terminal .tk-prompt{color:var(--mc-brand);}          /* $ — syntax màu brand (code, không phải chrome) */
.mc-terminal .tk-dim{color:rgba(237,234,226,.45);}
.mc-terminal .tk-str{color:#B8C89A;}                      /* chuỗi — series syntax */

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE — trạng thái trống CÓ HỒN: tile icon ấm + tiêu đề serif + CTA
   ══════════════════════════════════════════════════════════════════════════ */
.mc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--mc-s7) var(--mc-s5);}
.mc-empty .ic{width:64px;height:64px;border-radius:var(--mc-r-card);background:var(--mc-canvas-2);
  display:flex;align-items:center;justify-content:center;color:var(--mc-label-2);margin-bottom:var(--mc-s4);}
.mc-empty .tt{font:600 var(--mc-fs-title3)/1.3 var(--mc-font-display);color:var(--mc-label);}
.mc-empty .sub{font:400 var(--mc-fs-callout)/1.6 var(--mc-font);color:var(--mc-label-2);margin-top:var(--mc-s2);max-width:44ch;}
.mc-empty .cta{margin-top:var(--mc-s5);}

/* ══════════════════════════════════════════════════════════════════════════
   VẬT LIỆU — .mc-glass (chrome) · .mc-card (nội dung, đục để đọc rõ)
   ══════════════════════════════════════════════════════════════════════════ */
.mc-glass{
  background:var(--mc-mat-regular);
  -webkit-backdrop-filter:var(--mc-blur); backdrop-filter:var(--mc-blur);
  border:.5px solid var(--mc-mat-line);
  box-shadow:var(--mc-specular), var(--mc-e2);
}
.mc-glass-thin{
  background:var(--mc-mat-thin);
  -webkit-backdrop-filter:var(--mc-blur-sm); backdrop-filter:var(--mc-blur-sm);
  border:.5px solid var(--mc-mat-line);
  box-shadow:var(--mc-specular);
}
.mc-card{
  background:var(--mc-surface);
  border:.5px solid var(--mc-separator);
  border-radius:var(--mc-r-card);
  box-shadow:var(--mc-e1);
  transition:box-shadow var(--mc-t) var(--mc-ease-spring), transform var(--mc-t) var(--mc-ease-spring);
}
.mc-card:hover{box-shadow:var(--mc-e3);transform:translateY(-2px);}
.mc-sheet{
  background:var(--mc-mat-thick);
  -webkit-backdrop-filter:var(--mc-blur); backdrop-filter:var(--mc-blur);
  border:.5px solid var(--mc-mat-line);
  border-radius:var(--mc-r-sheet);
  box-shadow:var(--mc-specular), var(--mc-e4);
}
.mc-hairline{height:.5px;background:var(--mc-separator);border:0;}

/* ══════════════════════════════════════════════════════════════════════════
   ĐIỀU KHIỂN — nút, chip, segmented, ô nhập
   ══════════════════════════════════════════════════════════════════════════ */
.mc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--mc-s2);
  font:600 14px/1 var(--mc-font);letter-spacing:-.006em;
  padding:11px 18px;border-radius:var(--mc-r-control);
  border:.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform var(--mc-t-fast) var(--mc-ease-spring),
             background var(--mc-t-fast) linear, box-shadow var(--mc-t-fast) linear;
}
.mc-btn:active{transform:scale(.97);}
/* nút chính = ĐEN đặc (Pinterest). Bỏ specular trắng → phẳng, sạch. */
.mc-btn-primary{background:var(--mc-accent);color:var(--mc-on-accent);}
.mc-btn-primary:hover{background:var(--mc-accent-press);}
/* nút phụ = XÁM đặc Pinterest (borderless), KHÔNG viền/bóng */
.mc-btn-secondary{background:var(--mc-fill);color:var(--mc-label);border-color:transparent;}
.mc-btn-secondary:hover{background:var(--mc-fill-2);}
.mc-btn-plain{background:transparent;color:var(--mc-accent);}
.mc-btn-plain:hover{background:var(--mc-accent-soft);}
.mc-btn-glass{background:var(--mc-mat-thin);-webkit-backdrop-filter:var(--mc-blur-sm);backdrop-filter:var(--mc-blur-sm);border-color:var(--mc-mat-line);color:var(--mc-label);box-shadow:var(--mc-specular),var(--mc-e1);}

/* ── ĐIỀU KHIỂN TIỆN ÍCH kiểu PINTEREST (xám, đầy đặn, KHÔNG viền) ──────────
   .mc-ctl      = nút pill xám (Visit-site, filter, "Xem tất cả"…)
   .mc-ctl-round= nút TRÒN icon-only (back · phóng to/thu nhỏ · tim · chia sẻ · …)
   .mc-search   = ô tìm kiếm pill xám
   Nền = --mc-fill (xám nhạt), hover đậm hơn --mc-fill-2, chữ/icon = --mc-label. */
.mc-ctl{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--mc-s2);
  font:700 14px/1 var(--mc-font);letter-spacing:-.006em;
  padding:12px 18px;border-radius:var(--mc-r-pill);border:0;cursor:pointer;text-decoration:none;
  background:var(--mc-fill);color:var(--mc-label);
  transition:background var(--mc-t-fast) linear,transform var(--mc-t-fast) var(--mc-ease-spring);
}
.mc-ctl:hover{background:var(--mc-fill-2);}
.mc-ctl:active{transform:scale(.96);}
.mc-ctl:focus-visible{outline:none;box-shadow:var(--mc-ring);}
.mc-ctl-round{
  width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--mc-r-pill);border:0;cursor:pointer;
  background:var(--mc-fill);color:var(--mc-label);
  transition:background var(--mc-t-fast) linear,transform var(--mc-t-fast) var(--mc-ease-spring);
}
.mc-ctl-round:hover{background:var(--mc-fill-2);}
.mc-ctl-round:active{transform:scale(.9);}
.mc-ctl-round:focus-visible{outline:none;box-shadow:var(--mc-ring);}
/* biến thể kính (đặt trên ảnh/nội dung tối — back/zoom trên preview) */
.mc-ctl-round.on-media{background:var(--mc-mat-thick);-webkit-backdrop-filter:var(--mc-blur-sm);backdrop-filter:var(--mc-blur-sm);box-shadow:var(--mc-e2);}
.mc-search{
  display:flex;align-items:center;gap:var(--mc-s2);width:100%;
  background:var(--mc-fill);border:.5px solid transparent;border-radius:var(--mc-r-pill);
  padding:11px 16px;color:var(--mc-label);
  transition:background var(--mc-t-fast) linear,border-color var(--mc-t-fast) linear,box-shadow var(--mc-t-fast) linear;
}
.mc-search:focus-within{background:var(--mc-surface);border-color:var(--mc-separator-strong);box-shadow:var(--mc-ring);}
.mc-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:400 14px/1.4 var(--mc-font);color:var(--mc-label);}
.mc-search input::placeholder{color:var(--mc-label-3);}

.mc-chip{
  display:inline-flex;align-items:center;gap:6px;
  font:600 11.5px/1 var(--mc-font);letter-spacing:.01em;
  padding:5px 10px;border-radius:var(--mc-r-chip);
  background:var(--mc-fill);color:var(--mc-label-2);border:.5px solid transparent;
}
.mc-chip-accent{background:var(--mc-accent-soft);color:var(--mc-accent);border-color:var(--mc-accent-line);}
.mc-chip-green{background:rgba(40,200,64,.10);color:#1B8B2E;border-color:rgba(40,200,64,.25);}

/* segmented control (đúng cảm giác macOS) */
.mc-seg{display:inline-flex;padding:2px;gap:2px;border-radius:var(--mc-r-control);background:var(--mc-fill);border:.5px solid var(--mc-separator);}
.mc-seg button{
  border:0;background:transparent;cursor:pointer;
  font:600 13px/1 var(--mc-font);color:var(--mc-label-2);
  padding:7px 14px;border-radius:calc(var(--mc-r-control) - 2px);
  transition:background var(--mc-t-fast) linear,color var(--mc-t-fast) linear,box-shadow var(--mc-t-fast) linear;
}
.mc-seg button:hover{color:var(--mc-label);}
.mc-seg button[aria-selected="true"],.mc-seg button.is-on{
  background:var(--mc-surface);color:var(--mc-label);box-shadow:var(--mc-e1);
}

.mc-input{
  width:100%;font:400 14px/1.4 var(--mc-font);color:var(--mc-label);
  background:var(--mc-surface);border:.5px solid var(--mc-separator-strong);
  border-radius:var(--mc-r-control);padding:10px 13px;outline:none;
  transition:border-color var(--mc-t-fast) linear, box-shadow var(--mc-t-fast) linear;
}
.mc-input::placeholder{color:var(--mc-label-3);}
.mc-input:focus{border-color:var(--mc-accent);box-shadow:0 0 0 3.5px var(--mc-accent-soft);}

/* ══════════════════════════════════════════════════════════════════════════
   CHROME — toolbar (kính + hairline) · sidebar/rail · terminal window
   ══════════════════════════════════════════════════════════════════════════ */
.mc-toolbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:var(--mc-s3);
  padding:10px var(--mc-s5);
  background:var(--mc-mat-thin);
  -webkit-backdrop-filter:var(--mc-blur); backdrop-filter:var(--mc-blur);
  border-bottom:.5px solid var(--mc-separator);
  box-shadow:var(--mc-specular);
}
.mc-sidebar{
  background:var(--mc-mat-ultrathin);
  -webkit-backdrop-filter:var(--mc-blur); backdrop-filter:var(--mc-blur);
  border-right:.5px solid var(--mc-separator);
}
/* cửa sổ giả lập (terminal/preview) — traffic lights chuẩn */
.mc-window{border-radius:var(--mc-r-window);overflow:hidden;box-shadow:var(--mc-e4);border:.5px solid var(--mc-separator);}
.mc-window-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--mc-mat-regular);-webkit-backdrop-filter:var(--mc-blur-sm);backdrop-filter:var(--mc-blur-sm);border-bottom:.5px solid var(--mc-separator);}
.mc-tl{width:12px;height:12px;border-radius:50%;flex:none;}
.mc-tl.r{background:var(--mc-red);} .mc-tl.y{background:var(--mc-amber);} .mc-tl.g{background:var(--mc-green);}

/* ══════════════════════════════════════════════════════════════════════════
   TIỆN ÍCH
   ══════════════════════════════════════════════════════════════════════════ */
.mc-stack{display:flex;flex-direction:column;gap:var(--mc-s4);}
.mc-row{display:flex;align-items:center;gap:var(--mc-s3);}
.mc-grid{display:grid;gap:var(--mc-s4);}
.mc-grid-2{grid-template-columns:repeat(2,1fr);}
.mc-grid-3{grid-template-columns:repeat(3,1fr);}
.mc-grid-4{grid-template-columns:repeat(4,1fr);}
.mc-focus:focus-visible{outline:none;box-shadow:0 0 0 3.5px var(--mc-accent-soft);border-radius:var(--mc-r-control);}

@media(max-width:960px){
  .mc-grid-4{grid-template-columns:repeat(2,1fr);}
  .mc-grid-3,.mc-grid-2{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .mc-card,.mc-btn,.mc-seg button{transition:none;}
  .mc-card:hover{transform:none;}
}