/* ═══════════════════════════════════════════════════════════════════════
   FAHASA - Cấp phát License
   Hệ thiết kế: nền sáng ấm, đỏ FAHASA làm điểm nhấn duy nhất, xanh cho
   hành động xác nhận, hổ phách cho việc cần rà soát. Be Vietnam Pro được
   chọn vì nó dựng riêng cho dấu tiếng Việt; JetBrains Mono cho key và mã
   tài sản vì glyph 0/O, 1/l/I, 8/B phân biệt rõ, đây là chỗ đọc sai một
   ký tự là hỏng cả lượt cài.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ground:#FFFFFF;      --surface:#FBF8F6;    --surface-2:#F3EDE9;  --surface-3:#EAE1DB;
  --line:#E7DFDA;        --line-2:#D4C8C1;
  --ink:#1B1512;         --ink-2:#5E534E;      --ink-3:#736761;
  --brand:#C81E23;       --brand-ink:#A3181C;  --brand-soft:#FBEBEA;
  --go:#0B6E4F;          --go-ink:#0B6E4F;     --go-soft:#E3F2EB;
  --warn:#95590A;        --warn-ink:#95590A;   --warn-soft:#FAF0DE;
  --stop:#A81C1C;        --stop-ink:#A81C1C;   --stop-soft:#FAE8E7;
  --shadow:0 1px 2px rgba(27,21,18,.06), 0 8px 24px -14px rgba(27,21,18,.20);
  --shadow-lg:0 2px 6px rgba(27,21,18,.07), 0 32px 64px -28px rgba(27,21,18,.32);
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sans:'Be Vietnam Pro', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#17110F;    --surface:#201916;    --surface-2:#2A221E;  --surface-3:#362B26;
    --line:#372C28;      --line-2:#4C3E38;
    --ink:#F6EFEB;       --ink-2:#BFB1AA;      --ink-3:#9A8C84;
    --brand:#FF6A62;     --brand-ink:#FF8B84;  --brand-soft:#3B1C1A;
    --go:#4FC48F;        --go-ink:#63D2A0;     --go-soft:#123328;
    --warn:#E3A445;      --warn-ink:#EDB35C;   --warn-soft:#34260F;
    --stop:#FF7C70;      --stop-ink:#FF938A;   --stop-soft:#3A1A17;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 32px 64px -28px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#17110F;      --surface:#201916;    --surface-2:#2A221E;  --surface-3:#362B26;
  --line:#372C28;        --line-2:#4C3E38;
  --ink:#F6EFEB;         --ink-2:#BFB1AA;      --ink-3:#9A8C84;
  --brand:#FF6A62;       --brand-ink:#FF8B84;  --brand-soft:#3B1C1A;
  --go:#4FC48F;          --go-ink:#63D2A0;     --go-soft:#123328;
  --warn:#E3A445;        --warn-ink:#EDB35C;   --warn-soft:#34260F;
  --stop:#FF7C70;        --stop-ink:#FF938A;   --stop-soft:#3A1A17;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface-2); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.012em; text-wrap:balance}
p,ul,ol{margin:0}
a{color:var(--brand-ink)}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:5px}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

/* ── khung máy ───────────────────────────────────────────────────────── */
.stage{
  min-height:100vh; display:flex; justify-content:center; padding:24px 16px 40px;
  background:radial-gradient(900px 480px at 50% -10%, var(--brand-soft), transparent 70%), var(--surface-2);
}
.device{
  position:relative; width:100%; max-width:430px; background:var(--ground);
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  overflow:hidden; display:flex; flex-direction:column; min-height:760px;
}
.device--wide{max-width:1180px}
@media (max-width:719px){
  .stage{padding:0}
  .device, .device--wide{max-width:none; min-height:100vh; border:0; border-radius:0; box-shadow:none}
}

.appbar{
  display:flex; align-items:center; gap:11px; padding:13px 16px;
  border-bottom:1px solid var(--line); background:var(--ground); flex:none;
}
.appbar__back{
  border:1px solid var(--line); background:var(--surface); border-radius:11px; color:inherit;
  width:44px; height:44px; display:grid; place-items:center; font-size:21px; line-height:1;
  text-decoration:none; flex:none;
}
.appbar__title{flex:1; min-width:0; font-size:15px; font-weight:600}
.appbar__title small{
  display:block; font-weight:400; font-size:12px; color:var(--ink-3);
  font-family:var(--mono); letter-spacing:.03em;
}
.appbar__who{font-size:11px; color:var(--ink-3); text-align:right; line-height:1.35; white-space:nowrap}
.appbar__who b{display:block; color:var(--ink-2); font-weight:600; font-size:12px}
/* Trước đây đây là chữ xám 11px không gạch chân, nằm ngay dưới tên người
   dùng, nên nhìn như nhãn chứ không ai nhận ra bấm được. */
.appbar__who a{
  display:inline-block; margin-top:3px; padding:3px 10px;
  border:1px solid var(--line-2); border-radius:999px;
  background:var(--surface); color:var(--ink-2);
  font-size:11px; font-weight:600; text-decoration:none;
}
.appbar__who a:hover,
.appbar__who a:focus-visible{
  background:var(--surface-2); border-color:var(--ink-3); color:var(--ink);
}

.viewport{flex:1; overflow:auto; -webkit-overflow-scrolling:touch}
.screen{display:flex; flex-direction:column; gap:16px; padding:18px 16px 30px; min-height:100%}
.screen--task{padding-bottom:0}
.screen--wide{padding:22px; gap:18px}

/* ── chữ ─────────────────────────────────────────────────────────────── */
.eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.h-lg{font-size:24px; line-height:1.2; font-weight:700; letter-spacing:-.022em}
.h-md{font-size:17px; line-height:1.3}
.muted{color:var(--ink-2); font-size:13.5px}
.tiny{color:var(--ink-3); font-size:12px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono); letter-spacing:.04em}
.push{flex:1}

/* ── thẻ, form, nút ──────────────────────────────────────────────────── */
.card{
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px; display:flex; flex-direction:column; gap:13px;
}
.card--flat{background:var(--surface); border-color:transparent; gap:5px}
.card--pad0{padding:0; overflow:hidden}

.field{display:flex; flex-direction:column; gap:6px}
.field > label{font-size:13px; font-weight:600; color:var(--ink-2)}
.field > label span{color:var(--brand-ink); font-weight:700}
.input, .select{
  width:100%; min-height:50px; padding:12px 14px; background:var(--surface);
  border:1.5px solid var(--line-2); border-radius:var(--r); appearance:none; color:var(--ink);
}
.input::placeholder{color:var(--ink-3)}
.input:focus, .select:focus{outline:none; border-color:var(--ink); background:var(--ground)}
.input.is-ok{border-color:var(--go)}
.input.is-bad, .input.is-bad:focus{border-color:var(--stop)}
.input--mono{font-family:var(--mono); letter-spacing:.06em}
.select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px, calc(100% - 13px) 22px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:38px;
}
.hint{font-size:12px; color:var(--ink-3)}
.hint--ok{color:var(--go-ink); font-weight:600}
.hint--bad{color:var(--stop-ink); font-weight:600}

.inputrow{display:flex; gap:9px}
.inputrow .input{flex:1; min-width:0}
.scanbtn{
  flex:none; width:50px; min-height:50px; border-radius:var(--r); background:var(--surface);
  border:1.5px solid var(--line-2); color:var(--ink-2); display:grid; place-items:center;
}
.scanbtn:hover{border-color:var(--brand); color:var(--brand-ink)}
.scanbtn svg{width:23px; height:23px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:52px; padding:14px 18px; border-radius:var(--r); border:1.5px solid transparent;
  font-weight:600; font-size:15px; text-decoration:none; text-align:center;
  transition:transform .1s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.42; cursor:not-allowed}
.btn--brand{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn--go{background:var(--go); color:#fff; border-color:var(--go)}
.btn--ghost{background:var(--surface); border-color:var(--line-2); color:var(--ink)}
.btn--quiet{background:none; border-color:transparent; color:var(--ink-2); min-height:44px; font-weight:500}
.btn--stop{background:none; border-color:var(--line-2); color:var(--stop-ink)}
.btn--sm{min-height:44px; padding:9px 14px; font-size:13.5px; width:auto}
.btn-row{display:flex; gap:12px}
/* Nút có hai dòng chữ (chọn vai trò ở màn hình đăng nhập dev) cần cao hơn. */
.btn--tall{min-height:64px; padding:12px 16px}
.btn-row > *{flex:1}
:root[data-theme="dark"] .btn--brand, :root[data-theme="dark"] .btn--go{color:#17110F}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn--brand,
  :root:not([data-theme="light"]) .btn--go{color:#17110F}
}

/* ── chip ────────────────────────────────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:99px;
  font-size:11.5px; font-weight:600; background:var(--surface-2); color:var(--ink-2);
  white-space:nowrap;
}
.chip i{width:6px; height:6px; border-radius:99px; background:currentColor; flex:none}
.chip--go{background:var(--go-soft); color:var(--go-ink)}
.chip--warn{background:var(--warn-soft); color:var(--warn-ink)}
.chip--stop{background:var(--stop-soft); color:var(--stop-ink)}
.chip--brand{background:var(--brand-soft); color:var(--brand-ink)}

.notice{
  display:flex; gap:10px; padding:12px 14px; border-radius:var(--r);
  background:var(--surface-2); color:var(--ink-2); font-size:13px; line-height:1.5;
}
.notice--warn{background:var(--warn-soft); color:var(--warn-ink)}
.notice--stop{background:var(--stop-soft); color:var(--stop-ink)}
.notice--go{background:var(--go-soft); color:var(--go-ink)}
.notice__ico{flex:none; font-size:15px; line-height:1.3}

/* ── thẻ sản phẩm ────────────────────────────────────────────────────── */
.prod{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left; min-height:78px;
  background:var(--ground); border:1.5px solid var(--line-2); border-radius:var(--r-lg);
  padding:15px; color:inherit;
}
.prod:hover{border-color:var(--ink-3)}
.prod[data-state="done"]{border-color:var(--go); background:var(--go-soft)}
.prod[data-state="empty"]{opacity:.55; cursor:not-allowed}
.prod__mark{
  width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:var(--surface-2); font-size:19px;
}
.prod[data-state="done"] .prod__mark{background:var(--ground)}
.prod__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.prod__name{font-weight:600}
.prod__meta{font-size:12.5px; color:var(--ink-2)}
.prod__go{font-size:20px; color:var(--ink-3); flex:none}
.prod[data-state="done"] .prod__go{color:var(--go)}

/* ── màn hình key ────────────────────────────────────────────────────── */
.keyhead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.keyhead h2{margin-top:4px}
.keyhead .chip{flex:none; margin-top:2px; font-variant-numeric:tabular-nums}
.keybox{
  position:relative; overflow:hidden; background:var(--ground);
  border:2px solid var(--ink); border-radius:var(--r-lg); padding:20px 14px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.keybox::before{content:''; position:absolute; inset:0 0 auto; height:5px; background:var(--brand)}
/* Mỗi nhóm 5 ký tự là một span riêng và để flex tự xuống dòng. Ghép nhóm
   bằng khoảng trắng cứng sẽ tràn khung trên màn hình hẹp. */
.keybox__val{
  font-family:var(--mono); font-weight:700; font-size:clamp(19px,6.2vw,26px);
  letter-spacing:.05em; line-height:1.35; user-select:all; max-width:100%;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.3em .9em;
}
.keybox__val span{white-space:nowrap}
.keybox.is-hidden .keybox__val{filter:blur(9px); user-select:none}
.keybox__cover{
  position:absolute; inset:0; display:none; place-items:center;
  background:color-mix(in srgb, var(--ground) 72%, transparent);
}
.keybox.is-hidden .keybox__cover{display:grid}
.linkbtn{
  align-self:center; background:none; border:0; padding:10px 14px; min-height:44px;
  border-radius:9px; font-size:13px; font-weight:600; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:7px;
}
.linkbtn:hover{background:var(--surface-2); color:var(--ink)}

.actions{
  position:sticky; bottom:0; margin-top:auto; margin-left:-16px; margin-right:-16px;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--ground);
  display:flex; flex-direction:column; gap:14px;
}

/* Vuốt để xác nhận: một thao tác có chủ đích, không đổi nhãn giữa chừng,
   và không kích hoạt được bằng một cú chạm nhầm. */
.slide{
  position:relative; height:64px; border-radius:15px; overflow:hidden; user-select:none;
  background:var(--surface-2); border:1.5px solid var(--line-2); touch-action:none;
}
/* Nền đặc, không phải tint: --go-soft trên --surface-2 chỉ khác hue chứ
   luminance bằng hệt nhau (1.0:1), tức là phản hồi vuốt vô hình khi in
   grayscale và với phần lớn dạng mù màu. Đây là feedback duy nhất trên màn
   hình dễ sai thao tác nhất. --go đặc cho 5.39:1 ở nền sáng, 7.15:1 ở nền tối. */
.slide__fill{position:absolute; inset:0 auto 0 0; width:0; background:var(--go); transition:width .2s ease}
.slide__label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:0 12px 0 56px; font-size:clamp(12.5px,3.6vw,14.5px); font-weight:600;
  color:var(--ink-2); pointer-events:none; white-space:nowrap;
  transition:opacity .15s ease;
}
.slide__hint{margin-left:8px; color:var(--ink-3); letter-spacing:.1em; animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{opacity:.35; transform:translateX(0)} 50%{opacity:1; transform:translateX(4px)}}
.slide__thumb{
  position:absolute; top:5px; left:5px; width:54px; height:52px; border-radius:12px;
  background:var(--go); color:#fff; display:grid; place-items:center; font-size:22px;
  line-height:1; cursor:grab; touch-action:none; transition:transform .2s ease;
  /* Vòng sáng tách nút kéo khỏi phần đã vuốt, vì cả hai cùng màu --go. */
  box-shadow:0 0 0 2px var(--surface-2), 0 1px 3px rgba(0,0,0,.28);
}
.slide.is-dragging .slide__thumb,
.slide.is-dragging .slide__fill,
.slide.is-dragging .slide__label{transition:none}
.slide.is-dragging .slide__thumb{cursor:grabbing}
.slide.is-done{background:var(--go); border-color:var(--go)}
.slide.is-done .slide__label{color:#fff; padding-left:0}
.slide.is-done .slide__hint{display:none}
.slide.is-done .slide__thumb{opacity:0}
:root[data-theme="dark"] .slide__thumb, :root[data-theme="dark"] .slide.is-done .slide__label{color:#17110F}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .slide__thumb,
  :root:not([data-theme="light"]) .slide.is-done .slide__label{color:#17110F}
}
@media (prefers-reduced-motion: reduce){.slide__hint{animation:none; opacity:.7}}

/* ── quét mã vạch ────────────────────────────────────────────────────── */
.scan{position:absolute; inset:0; z-index:40; background:#0B0908; color:#fff; display:flex; flex-direction:column}
.scan video{flex:1; width:100%; min-height:0; object-fit:cover; background:#0B0908}
.scan__fallback{position:absolute; inset:0 0 auto; height:100%; display:grid; place-items:center; color:#7C716B}
.scan.is-live .scan__fallback{display:none}
.scan__fallback svg{width:74px; height:74px}
.scan__frame{display:none}
.scan.is-live .scan__frame{
  display:block; position:absolute; left:8%; right:8%; top:32%; height:130px;
  border:2px solid rgba(255,255,255,.9); border-radius:12px; box-shadow:0 0 0 9999px rgba(0,0,0,.45);
}
.scan__laser{position:absolute; left:0; right:0; top:50%; height:2px; background:var(--brand); animation:sweep 1.9s ease-in-out infinite}
@keyframes sweep{0%,100%{top:12%} 50%{top:88%}}
@media (prefers-reduced-motion: reduce){.scan__laser{animation:none; top:50%}}
.scan__bar{padding:16px 16px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:11px; background:#0B0908; flex:none}
.scan__msg{font-size:13.5px; text-align:center; color:#D9CFC9; min-height:20px; line-height:1.45}
.scan__bar .btn--ghost{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#fff}
.scan__bar .btn--quiet{color:#B9ADA7}

/* ── danh sách ───────────────────────────────────────────────────────── */
.list{display:flex; flex-direction:column; gap:9px}
.row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; color:inherit;
  padding:13px 14px; background:var(--ground); border:1px solid var(--line);
  border-radius:var(--r); text-decoration:none;
}
.row--link:hover{border-color:var(--ink-3)}
.row__main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.row__title{font-weight:600; font-size:14px; font-family:var(--mono); letter-spacing:.04em}
.row__sub{font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row__aside{flex:none; display:flex; flex-direction:column; gap:4px; align-items:flex-end; text-align:right}
.empty{text-align:center; padding:32px 20px; color:var(--ink-3); font-size:13.5px; border:1px dashed var(--line-2); border-radius:var(--r-lg)}

/* ── ô số liệu ───────────────────────────────────────────────────────── */
.grid{display:grid; gap:12px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--tiles{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.tile{background:var(--ground); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px; display:flex; flex-direction:column; gap:5px}
.tile__label{font-size:11.5px; font-weight:600; color:var(--ink-3)}
.tile__hero{font-size:32px; font-weight:700; line-height:1.05; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.tile__hero small{font-size:15px; font-weight:500; color:var(--ink-3); letter-spacing:0}
.tile__foot{font-size:12px; color:var(--ink-2)}
.meter{height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.meter__fill{height:100%; background:var(--brand); border-radius:99px}
.meter__fill--go{background:var(--go)}
.meter__fill--warn{background:var(--warn)}

/* ── biểu đồ ─────────────────────────────────────────────────────────── */
.chart{display:flex; flex-direction:column; gap:9px}
.chart__plot{
  position:relative; display:flex; align-items:flex-end; gap:3px; height:132px; padding-top:20px;
  background-image:repeating-linear-gradient(to top, transparent 0 32px, var(--line) 32px 33px);
  background-position:bottom;
}
.bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; position:relative}
.bar__fill{background:var(--brand); border-radius:4px 4px 0 0; transition:opacity .12s ease}
.bar:hover .bar__fill{opacity:.7}
.bar--today .bar__fill{background:var(--ink)}
.bar__tip{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:5;
  background:var(--ink); color:var(--ground); font-size:11px; padding:4px 8px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; font-variant-numeric:tabular-nums;
}
.bar:hover .bar__tip{opacity:1}
.chart__axis{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3)}

/* ── bảng ────────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ground)}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:560px}
th,td{padding:11px 13px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:700; background:var(--surface); position:sticky; top:0}
tbody tr:last-child td{border-bottom:0}
td.n, th.n{text-align:right}
td.n{font-variant-numeric:tabular-nums}
td.mono{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em}

.sec{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.sec h3{font-size:14px}
.sec a{font-size:12.5px; font-weight:600; text-decoration:none}

/* ── thanh điều hướng dưới ───────────────────────────────────────────── */
.tabbar{display:flex; border-top:1px solid var(--line); background:var(--ground); padding:6px 6px calc(10px + env(safe-area-inset-bottom)); flex:none}
.tabbar a{
  flex:1; padding:8px 4px; border-radius:10px; text-decoration:none; min-height:52px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; font-weight:600; color:var(--ink-3);
}
.tabbar a em{font-style:normal; font-size:18px; line-height:1}
.tabbar a[aria-current="page"]{color:var(--brand-ink); background:var(--brand-soft)}

/* ── dải cảnh báo môi trường dev ─────────────────────────────────────── */
.devbar{
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding:7px 14px; background:#191311; color:#F2ECE8; font-size:12.5px;
}
.devbar b{background:var(--brand); color:#fff; font-family:var(--mono); font-size:10px;
  font-weight:700; letter-spacing:.12em; padding:3px 7px; border-radius:4px}
/* Đẩy nút X ra sát mép phải mà vẫn giữ phần chữ căn giữa: lề trái auto ăn hết
   khoảng trống, còn lề phải âm bù lại đúng bề rộng nút. */
.devbar__x{
  margin-left:auto; margin-right:-6px; flex:none;
  width:26px; height:26px; display:grid; place-items:center;
  border:0; border-radius:7px; background:transparent;
  color:#F2ECE8; opacity:.6; font-size:19px; line-height:1;
}
.devbar__x:hover, .devbar__x:focus-visible{opacity:1; background:rgba(255,255,255,.14)}