/* FontChuDep homepage — Phase 4 design. Phạm vi: body.fcd-front và các lớp .fcd-*. */
body.fcd-front{
  --bg:#FFF9FA;--surface:#fff;--ink:#24151C;--muted:#70525E;--line:#F6D5E0;--line-strong:#E8A4BC;
  --accent:#FF2D75;--accent-hover:#D91B60;--accent-soft:#FFF1F5;
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
body.fcd-front *,body.fcd-front *::before,body.fcd-front *::after{box-sizing:border-box}
.fcd-site{display:flex;flex-direction:column;min-height:100vh}
.fcd-wrap{width:100%;max-width:72rem;margin:0 auto;padding:0 1rem}
.fcd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fcd-skip{position:absolute;left:-999px;top:0;z-index:20;padding:.625rem 1rem;color:#fff;background:var(--accent);border-radius:0 0 10px 0;text-decoration:none;font-weight:600}
.fcd-skip:focus{left:0}

/* header / wordmark */
.fcd-header{background:rgba(255,249,250,.92);border-bottom:1px solid var(--line)}
.fcd-header-in{display:flex;align-items:center;min-height:56px}
.fcd-brand{display:inline-flex;align-items:center;gap:.625rem;min-height:44px;color:var(--ink);text-decoration:none;font-size:1.125rem;font-weight:800;letter-spacing:-.02em}
.fcd-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;font-size:.9375rem;font-weight:700;letter-spacing:-.04em}
.fcd-word-hi{color:var(--accent)}
.fcd-brand:focus-visible,.fcd-chip:focus-visible,.fcd-btn:focus-visible,.fcd-clear:focus-visible,.fcd-bad summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* hero */
.fcd-tool{flex:1 0 auto;min-height:100vh;padding:1.25rem 0 3rem}
.fcd-h1{margin:0 0 .25rem;font-size:clamp(1.625rem,4.5vw,2.25rem);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.fcd-lead{margin:0 0 1rem;max-width:42rem;color:var(--muted);font-size:1rem;line-height:1.5}

/* input */
.fcd-field{position:relative}
.fcd-input{display:block;width:100%;min-height:4.5rem;padding:.8125rem 3.25rem .8125rem 1rem;font:inherit;font-size:1.0625rem;line-height:1.5;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:14px;resize:vertical;transition:border-color .15s,box-shadow .15s}
.fcd-input::placeholder{color:#8F6F7C}
.fcd-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(217,27,96,.18)}
.fcd-clear{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:44px;height:44px;padding:0;color:var(--muted);background:transparent;border:0;border-radius:10px;cursor:pointer}
.fcd-clear:hover{color:var(--accent);background:var(--accent-soft)}
.fcd-clear[hidden]{display:none}
.fcd-limit{margin:.375rem 0 0;font-size:.8125rem;color:#9b1c1c}

/* filters */
.fcd-filters{display:flex;gap:.5rem;margin:.75rem -1rem 0;padding:0 1rem .25rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:1rem;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.75rem),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.75rem),transparent)}
.fcd-filters::-webkit-scrollbar{display:none}
.fcd-filters[hidden]{display:none}
.fcd-chip{flex:0 0 auto;min-height:44px;padding:0 1rem;font:inherit;font-size:.9375rem;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;scroll-snap-align:start;transition:background .15s,border-color .15s,color .15s}
.fcd-chip:hover{border-color:var(--accent);color:var(--accent)}
.fcd-chip[aria-pressed="true"]{color:#fff;background:var(--accent);border-color:var(--accent)}
@media (min-width:48rem){
  .fcd-filters{flex-wrap:wrap;margin:.75rem 0 0;padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
}

.fcd-status{margin:.625rem 0 .75rem;font-size:.875rem;line-height:1.45;color:var(--muted)}

/* results */
.fcd-list{display:grid;grid-template-columns:minmax(0,1fr);gap:.625rem;margin:0;padding:0;list-style:none}
@media (min-width:48rem){.fcd-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
.fcd-card{content-visibility:auto;contain-intrinsic-size:auto 5rem;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head btn" "out btn" "ctrl ctrl" "note note";column-gap:.75rem;row-gap:.125rem;align-items:center;min-width:0;padding:.625rem .625rem .75rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:border-color .15s,box-shadow .15s}
.fcd-card:hover{border-color:#F3B5C8;box-shadow:0 2px 10px rgba(217,27,96,.08)}
.fcd-card[hidden]{display:none}
.fcd-card-head{grid-area:head;display:flex;align-items:center;gap:.5rem;min-width:0}
.fcd-name{font-size:.8125rem;font-weight:600;color:var(--muted)}
.fcd-out{grid-area:out;min-width:0;max-height:8.5rem;margin:0;overflow:auto;font-family:inherit;font-size:1.3125rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.fcd-note{grid-area:note;margin:.25rem 0 0;font-size:.8125rem;line-height:1.4;color:var(--muted)}
.fcd-note[hidden]{display:none}

/* mobile: nút nằm cùng hàng với tên kiểu, output chiếm trọn bề ngang (ít bị ngắt dòng) */
@media (max-width:47.99rem){
  .fcd-card{grid-template-areas:"head btn" "out out" "ctrl ctrl" "note note";row-gap:0;padding:.375rem .625rem .75rem 1rem}
  .fcd-out{margin-top:.125rem}
}

/* badge: chỉ hiện khi là ngoại lệ; mức chủ đạo được giải thích một lần ở dòng trạng thái */
.fcd-badge{display:inline-block;padding:.0625rem .5rem;font-size:.6875rem;font-weight:700;line-height:1.5;white-space:nowrap;border-radius:999px;border:1px solid transparent}
.fcd-badge[data-level="safe"]{color:#14532d;background:#e7f7ec;border-color:#a7e3b9}
.fcd-badge[data-level="partial"]{color:#7a4b00;background:#fff3d1;border-color:#f2d17a}
.fcd-badge[data-level="unsupported"]{color:#7f1d1d;background:#fde8e8;border-color:#f5b5b5}
.fcd-badge[data-quiet]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* nút sao chép gọn */
.fcd-card .fcd-btn{grid-area:btn;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;min-width:44px;max-width:11rem;padding:0 .875rem;font:inherit;font-size:.9375rem;font-weight:600;line-height:1.2;color:var(--accent);background:var(--surface);border:1.5px solid var(--accent);border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.fcd-card .fcd-btn::before{content:"";flex:0 0 1rem;width:1rem;height:1rem;background:currentColor;-webkit-mask:var(--fcd-ico-copy) center/contain no-repeat;mask:var(--fcd-ico-copy) center/contain no-repeat}
.fcd-card .fcd-btn:hover{background:var(--accent-soft)}
.fcd-card .fcd-btn.is-copied{color:#fff;background:var(--accent);border-color:var(--accent)}
.fcd-card .fcd-btn.is-copied::before{-webkit-mask-image:var(--fcd-ico-check);mask-image:var(--fcd-ico-check)}
.fcd-card .fcd-btn.is-failed{color:#9b1c1c;background:#fff;border-color:#9b1c1c;white-space:normal;text-align:center;font-size:.8125rem}
.fcd-card .fcd-btn.is-failed::before{display:none}
body.fcd-front{
  --fcd-ico-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5 15V6.5A2.5 2.5 0 0 1 7.5 4H16'/%3E%3C/svg%3E");
  --fcd-ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* nhóm không phù hợp */
.fcd-bad{margin-top:1rem}
.fcd-bad[hidden]{display:none}
.fcd-bad summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 1rem;font-size:.9375rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer;list-style:none}
.fcd-bad summary::-webkit-details-marker{display:none}
.fcd-bad summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.fcd-bad[open] summary::after{transform:rotate(-135deg)}
.fcd-bad .fcd-list{margin-top:.625rem}

/* footer */
.fcd-footer{flex-shrink:0;padding:1.25rem 0;font-size:.8125rem;color:var(--muted);border-top:1px solid var(--line)}
.fcd-footer-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem}

@media (prefers-reduced-motion:reduce){body.fcd-front *{transition:none!important}}

/* Phase 5B: nhóm con của bộ lọc "Trang trí" + ô chọn mẫu viền */
.fcd-group{grid-column:1/-1;margin:.5rem 0 -.125rem;list-style:none}
.fcd-group:first-child{margin-top:0}
.fcd-group[hidden]{display:none}
.fcd-group-title{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.fcd-ctrl{grid-area:ctrl;margin-top:.375rem}

/* ===== Phase 5C: tìm kiếm, yêu thích, bộ chọn viền, nhóm không phù hợp ===== */
body.fcd-front{
  --fcd-ico-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  --fcd-ico-heart-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
.fcd-search{position:relative;margin:.75rem 0 0}
.fcd-search-ico{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.fcd-search-input{display:block;width:100%;min-height:44px;padding:0 3rem 0 2.5rem;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:12px;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.fcd-search-input::placeholder{color:#8F6F7C}
.fcd-search-input::-webkit-search-cancel-button,.fcd-search-input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.fcd-search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(217,27,96,.18)}
.fcd-search .fcd-clear{top:0;right:0}
@media (min-width:48rem){.fcd-search{max-width:26rem}}

.fcd-fav{flex:0 0 auto;margin-left:auto;display:grid;place-items:center;width:32px;height:32px;padding:0;color:#8F6F7C;background:transparent;border:0;border-radius:8px;cursor:pointer;transition:color .15s,background .15s}
.fcd-fav::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--fcd-ico-heart) center/contain no-repeat;mask:var(--fcd-ico-heart) center/contain no-repeat}
.fcd-fav:hover{color:var(--accent);background:var(--accent-soft)}
.fcd-fav[aria-pressed="true"]{color:var(--accent)}
.fcd-fav[aria-pressed="true"]::before{-webkit-mask-image:var(--fcd-ico-heart-fill);mask-image:var(--fcd-ico-heart-fill)}
.fcd-fav:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.fcd-fav{width:44px;height:44px}.fcd-fav::before{width:20px;height:20px}}

/* bộ chọn mẫu viền */
.fcd-deco{background:#FFF9FA;border:1px solid var(--line);border-radius:12px}
.fcd-deco-sum{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .75rem;font-size:.9375rem;list-style:none;cursor:pointer;border-radius:12px}
.fcd-deco-sum::-webkit-details-marker{display:none}
.fcd-deco-sum:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fcd-deco-cur{font-weight:700}
.fcd-deco-count{margin-left:auto;font-size:.8125rem;color:var(--muted)}
.fcd-deco-sum::after{content:"";flex:0 0 auto;width:.5rem;height:.5rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.fcd-deco[open] .fcd-deco-sum::after{transform:rotate(-135deg)}
.fcd-deco-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem;min-width:0;max-height:15rem;margin:0;padding:.5rem;overflow:auto;border:0;border-top:1px solid var(--line)}
.fcd-deco-opt{position:relative;display:block;min-width:0;cursor:pointer}
.fcd-deco-radio{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fcd-deco-body{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:44px;padding:.375rem .625rem;background:var(--surface);border:1.5px solid var(--line);border-radius:10px}
.fcd-deco-name{font-size:.75rem;font-weight:700;color:var(--muted)}
.fcd-deco-prev{font-size:.9375rem;line-height:1.35;overflow-wrap:anywhere}
.fcd-deco-radio:checked+.fcd-deco-body{background:var(--accent-soft);border-color:var(--accent)}
.fcd-deco-radio:focus-visible+.fcd-deco-body{outline:3px solid var(--accent);outline-offset:2px}

/* kiểu không phù hợp: phân biệt rõ với kiểu dùng được */
.fcd-bad summary{justify-content:flex-start;gap:.5rem;color:#7f1d1d}
.fcd-bad summary::before{content:"!";display:grid;place-items:center;flex:0 0 auto;width:1.25rem;height:1.25rem;font-size:.8125rem;font-weight:800;color:#7f1d1d;background:#fde8e8;border-radius:50%}
.fcd-bad summary::after{margin-left:auto}
.fcd-card.is-bad{background:#FFF4F7;border-style:dashed;border-color:#E9B8C6}
.fcd-card.is-bad .fcd-out{color:var(--muted)}

.fcd-head-text{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0 .5rem;min-width:0}
.fcd-head-text .fcd-name{white-space:nowrap}

/* ===== Phase 6B: danh mục (thanh bên desktop / chip cuộn ngang mobile), hiện thêm, ghi chú danh mục ===== */
.fcd-layout{display:block;margin-top:.25rem}
.fcd-col{min-width:0}
.fcd-side-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fcd-chip{display:inline-flex;align-items:center;gap:.4rem}
.fcd-chip[hidden]{display:none}
.fcd-chip-count{font-size:.75rem;font-weight:700;opacity:.65}
.fcd-chip-count:empty{display:none}
.fcd-side{position:sticky;top:0;z-index:5;margin:0 -1rem;padding:.25rem 0 .125rem;background:var(--bg)}
.fcd-side .fcd-filters{margin:.25rem 0 0}
.fcd-catnote{margin:-.25rem 0 .75rem;padding:.5rem .75rem;font-size:.8125rem;line-height:1.45;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:10px}
.fcd-catnote[hidden]{display:none}
.fcd-more-wrap{display:flex;justify-content:center;margin-top:1rem}
.fcd-more{min-height:44px;padding:0 1.5rem;font:inherit;font-size:.9375rem;font-weight:600;color:var(--accent);background:var(--surface);border:1.5px solid var(--accent);border-radius:999px;cursor:pointer;transition:background .15s}
.fcd-more:hover{background:var(--accent-soft)}
.fcd-more:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fcd-more[hidden]{display:none}
@media (min-width:56rem){
  .fcd-layout{display:grid;grid-template-columns:13.5rem minmax(0,1fr);gap:0 1.5rem;align-items:start;margin-top:.5rem}
  .fcd-side{position:sticky;top:1rem;z-index:auto;margin:0;padding:0;max-height:calc(100vh - 2rem);overflow-y:auto;background:transparent;scrollbar-width:thin}
  .fcd-side-title{position:static;width:auto;height:auto;margin:0 0 .375rem .5rem;overflow:visible;clip:auto;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .fcd-side .fcd-filters{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .fcd-side .fcd-chip{width:100%;min-height:40px;justify-content:space-between;padding:0 .75rem;font-size:.9375rem;font-weight:600;text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;scroll-snap-align:none}
  .fcd-side .fcd-chip:hover{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
  .fcd-side .fcd-chip[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft);border-color:#F3B5C8}
  .fcd-side .fcd-chip-count{opacity:.8;font-variant-numeric:tabular-nums}
  .fcd-col .fcd-status{margin-top:0}
}
@media (min-width:48rem) and (max-width:55.99rem){.fcd-side .fcd-filters{flex-wrap:nowrap;overflow-x:auto;margin:.25rem -1rem 0;padding:0 1rem .25rem}}

/* ===== Phase 6D: thẻ nhiều mẫu, nhãn loại, rút gọn dòng, bảng danh mục mobile ===== */
.fcd-card{grid-template-areas:"head btn" "out btn" "more more" "ctrl ctrl" "note note"}
@media (max-width:47.99rem){.fcd-card{grid-template-areas:"head btn" "out out" "more more" "ctrl ctrl" "note note"}}
.fcd-kind{font-size:.6875rem;font-weight:600;line-height:1.5;letter-spacing:.02em;color:#8F6F7C;white-space:nowrap}
.fcd-out--dense{font-size:1.0625rem;line-height:1.4}
.fcd-card[data-clamp] .fcd-out{max-height:4.35em;overflow:hidden}
.fcd-card[data-clamp] .fcd-out--dense{max-height:4.2em}
.fcd-card:not([data-clamp]) .fcd-out{max-height:16rem}
.fcd-expand{grid-area:more;justify-self:start;min-height:32px;margin:.125rem 0 0 -.25rem;padding:0 .5rem;font:inherit;font-size:.8125rem;font-weight:600;color:var(--accent);background:transparent;border:0;border-radius:8px;cursor:pointer}
.fcd-expand:hover{background:var(--accent-soft)}
.fcd-expand:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fcd-expand[hidden]{display:none}
@media (pointer:coarse){.fcd-expand{min-height:44px}}
.fcd-ctrl{display:grid;gap:.5rem}
.fcd-base{display:flex;align-items:center;gap:.625rem;min-height:44px}
.fcd-base-l{flex:0 0 auto;font-size:.8125rem;font-weight:600;color:var(--muted)}
.fcd-base-sel{flex:1 1 auto;min-width:0;min-height:44px;padding:0 .625rem;font:inherit;font-size:.9375rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:10px}
.fcd-base-sel:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fcd-deco-list{max-height:min(22rem,55vh)}
.fcd-deco-opt[hidden]{display:none}
.fcd-deco-radio:disabled+.fcd-deco-body{opacity:.45}
.fcd-deco-warn{font-size:.6875rem;font-weight:700;color:#9b1c1c}
.fcd-navgroup{display:contents}
.fcd-navgroup-title,.fcd-cat-toggle{display:none}
@media (max-width:55.99rem){
  .fcd-side{margin:0 -1rem;padding:.25rem 1rem}
  .fcd-cat-toggle{display:flex;align-items:center;gap:.5rem;width:100%;min-height:48px;padding:0 .875rem;font:inherit;font-size:.9375rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:12px;cursor:pointer;text-align:left}
  .fcd-cat-toggle-l{flex:0 0 auto;font-weight:700}
  .fcd-cat-cur{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent);font-weight:600}
  .fcd-cat-caret{flex:0 0 auto;width:.5rem;height:.5rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
  .fcd-side.is-open .fcd-cat-caret{transform:rotate(-135deg)}
  .fcd-cat-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .fcd-side .fcd-filters{display:none;position:absolute;left:1rem;right:1rem;top:calc(100% - .125rem);z-index:30;max-height:calc(100vh - 7rem);max-height:calc(100dvh - 7rem);margin:0;padding:.5rem .75rem .75rem;overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:none;mask-image:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 12px 32px rgba(36,21,28,.18)}
  .fcd-side.is-open .fcd-filters{display:block}
  .fcd-navgroup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem}
  .fcd-navgroup+.fcd-navgroup{margin-top:.5rem}
  .fcd-navgroup-title{display:block;grid-column:1/-1;margin:.25rem 0 0;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .fcd-side .fcd-chip{display:flex;justify-content:space-between;width:100%;min-height:44px;padding:0 .75rem;font-size:.875rem;border-radius:10px;text-align:left}
  .fcd-side .fcd-chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fcd-col{scroll-margin-top:4.5rem}
  #fcd-status{scroll-margin-top:4.5rem}
}
@media (min-width:56rem){.fcd-side .fcd-chip{min-height:36px}.fcd-side .fcd-chip-label{white-space:nowrap}}
.fcd-list{align-items:start}
@media (max-width:55.99rem){.fcd-side .fcd-chip-label{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}}