/* ---------- app shell ---------- */
  /* 注意：原本 position:relative 是為了給 .sidebar-toggle 當 absolute 定位錨點，但改成 position:fixed
     之後已不再需要（見 .sidebar-toggle 註解）。不過移除它對 flex 版面沒有影響，暫時保留。 */
  .app-shell{ display:flex; align-items:stretch; min-height:100vh; position:relative; }
  .sidebar{
    flex:none; width:240px; position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto; overflow-x:hidden;
    /* 2026-09-14 品牌質感優化：側欄本身另外疊一層微幅直向漸層（比 --chrome-bg 兩端各淺深一階），
       材質深度只留給這種夠高的大面積色塊用——同一招套在 26px 的收合鈕或 toast 上，小面積裡的
       對角色差反而顯髒，那些地方維持吃 --chrome-bg 的純色。 */
    /* 2026-09-15 主控台全盤重設計第一批：寬度 264→240（重設計側欄 240，導覽字級也收到 13px），漸層兩端改吃
       token（--sidebar-top／--sidebar-bottom），深色模式整組再壓一階；角度從 184deg 改回正直向。 */
    background:linear-gradient(180deg, var(--sidebar-top) 0%, var(--sidebar-bottom) 100%);
    color:var(--chrome-ink); border-right:1px solid var(--chrome-line);
    display:flex; flex-direction:column;
    transition:width .18s ease;
    /* 側欄自己的捲軸：深色底上預設的白色粗捲軸很突兀，改成細的、軌道透明、平常幾乎看不見、
       滑上去才變亮。scrollbar-gutter 固定留位，內容一變長不會整欄左右跳。 */
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; scrollbar-gutter:stable;
  }
  .sidebar:hover{ scrollbar-color:rgba(255,255,255,.28) transparent; }
  .sidebar::-webkit-scrollbar{ width:6px; }
  .sidebar::-webkit-scrollbar-track{ background:transparent; }
  .sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }
  .sidebar:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); }
  /* 2026-09-14 /design 品牌質感優化：原本是「圖示徽章＋文字」左右並排的橫向排法，換成橫式 Logo
     圖片＋下面一行產品名之後，內容形狀變成「圖＋說明字」上下疊，改 column 排版；收合狀態另外
     覆寫成置中 column（見下面 .app-shell.sidebar-collapsed 那條規則），彼此不衝突。 */
  .sidebar-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:20px 20px 12px; }
  /* 2026-09-14 企業四色與品牌識別全站更換規格 TASK-04：橫式純白反白 Logo，寬度撐滿側欄可用寬度、
     高度跟著比例走，避免拉伸變形。2026-09-14 /design 品牌質感優化：28px 使用者嫌太小、認不出品牌，
     改 46px（只設 height，width:auto 讓瀏覽器按圖檔原始比例算寬度，圖裡的圓形標誌不會被拉變形）。 */
  /* 2026-09-15 重設計：46→38px，側欄變窄後 46 會頂到邊；明寫寬高＋object-fit 是 /design 畫布上踩到的教訓——
     只給 height、width:auto 在某些容器會被拉寬變形。128:38 ≈ 圖檔 734:218 的比例。 */
  .sidebar-logo{ display:block; width:128px; height:38px; object-fit:contain; object-position:left center; }
  /* 品牌區底下的「PowerVellance Console」產品名，跟 Logo 之間用一條極淡的分隔線隔開——
     Logo 圖檔本身已經是達耀科技的公司品牌，這行文字負責標出「這是哪個產品」，兩件事分開講。
     只用在桌面側欄；窄螢幕頂欄（.chrome-top）版面本來就矮，多一行文字會把本來就緊的高度撐爆，
     維持只放 Logo。 */
  .sidebar-product-name{
    /* 2026-09-15 重設計：拿掉分隔線、字級 14→12、顏色降一階——重設計畫布上這行本來沒畫（品牌區只剩 Logo＋
       檢視範圍塊），但「產品名要獨立顯示」是 2026-09-14 使用者明確拍板過的，保留但降到說明字的份量。 */
    margin-top:6px;
    font-size:var(--fs-sm); font-weight:500; letter-spacing:.02em; color:var(--chrome-ink-soft);
  }
  /* 浮在側欄右邊界正中央的圓形收合鈕：故意脫離 .sidebar-brand，改成 position:fixed 定位，
     使 top:50% 相對於瀏覽器視窗（而非內容高度不定的 .app-shell）。根本問題是不同頁面的內容
     高度差異大（監測指標頁圖表多內容長，空頁面內容短）——absolute 相對 .app-shell 的「實際」高度
     算 top:50%，導致按鈕在不同頁面看起來上下跳動；fixed 相對視窗計算，垂直位置才會穩定。
     因為 .sidebar 自己開了 overflow-x:hidden（給收合動畫跟捲軸用），跨在邊界上的鈕一半會被裁掉，
     所以不能放在 .sidebar 裡面，只能用絕對或固定定位。
     left 定在側欄寬度上、transform 往左位移自身寬度的一半，鈕的正中心才會剛好落在邊界線上。 */
  .sidebar-toggle{
    position:fixed; top:50%; left:240px; z-index:5; transform:translate(-50%, -50%);
    width:26px; height:26px; flex:none; border-radius:50%; border:1px solid var(--chrome-line);
    background:var(--chrome-bg); color:var(--chrome-ink-soft); box-shadow:var(--shadow-card);
    cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
    /* 2026-09-15 走查 hover-states-inconsistent:hover 不再放大,transition 拿掉 transform,
       只留 left(收合動畫用)/border-color/color 三個真的會變的屬性。 */
    transition:left .18s ease, border-color .12s ease, color .12s ease;
  }
  /* 2026-09-15 走查 hover-states-inconsistent:原本 border-color:var(--accent) 淺色模式是 #004B64 深藍,
     疊在深底 --chrome-bg 上幾乎看不見;改用全站唯一「活著/選中/焦點」訊號色 --accent-2(7710C亮青),
     深淺兩色下都跟底色有足夠對比,同時拿掉 scale(1.15) 放大——設計稿沒有這層互動語言。 */
  .sidebar-toggle:hover{ border-color:var(--accent-2); color:var(--chrome-ink); }
  .sidebar-toggle svg{ transition:transform .18s ease; }
  .nav-label{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---------- 側欄收合成圖示欄（狀態記在 localStorage，重新整理不會彈回來） ---------- */
  .app-shell.sidebar-collapsed .sidebar{ width:64px; }
  .app-shell.sidebar-collapsed .sidebar-toggle{ left:64px; }
  .app-shell.sidebar-collapsed .sidebar-toggle svg{ transform:rotate(180deg); }
  /* 2026-09-05：收合規則全部限定在 .sidebar 底下——窄螢幕的 header.chrome 也重用了 .sidebar-brand／.theme-toggle，
     不限定的話，寬螢幕收合過再縮到手機寬度時，頂欄的品牌字跟外觀切換會一起被藏掉、而且沒有地方展開回來。 */
  .app-shell.sidebar-collapsed .sidebar .sidebar-brand{ flex-direction:column; align-items:center; gap:12px; padding:16px 0 12px; }
  /* 橫式 Logo（3.37:1 長寬比）沒有對應的收合用方型標記可用，收合時先整顆藏起來——
     這是規格沒明講、agent 判斷先不硬擠小圖示；之後若補了 icon-only 版本圖檔再改成顯示那顆。 */
  .app-shell.sidebar-collapsed .sidebar .sidebar-logo,
  .app-shell.sidebar-collapsed .sidebar .sidebar-product-name,
  .app-shell.sidebar-collapsed .sidebar .sidebar-tenant,
  .app-shell.sidebar-collapsed .sidebar .sidebar-section-label,
  .app-shell.sidebar-collapsed .sidebar .nav-label,
  .app-shell.sidebar-collapsed .sidebar .nav-item .soon,
  .app-shell.sidebar-collapsed .sidebar .nav-item .nav-badge,
  .app-shell.sidebar-collapsed .sidebar .sidebar-user > div,
  .app-shell.sidebar-collapsed .sidebar .sidebar-logout{ display:none; }
  .app-shell.sidebar-collapsed .sidebar .sidebar-nav{ padding:12px 8px; gap:4px; }
  .app-shell.sidebar-collapsed .sidebar .nav-item{ justify-content:center; padding:10px 0; border-radius:var(--r-sm); }
  /* 收合時只剩圖示：目前頁面不再靠左邊框畫一條線（那條線收合後貼著已經很窄的圖示欄，反而不明顯），
     改成把膠囊底色收成置中的圓形徽章套在圖示外面，跟展開時同一顆 .is-current 是同一組樣式 */
  /* border-radius 要在這裡重寫成 --r-pill：上面那條收合規則把所有圖示按鈕的圓角壓成 --r-sm，
     這裡選擇器比它多一個 class、specificity 比較高，但沒有寫 border-radius 的話還是會被上面那條贏走，
     32x32 正方形＋pill 圓角才會是圓形徽章，不是只是圓角小一點的方塊 */
  .app-shell.sidebar-collapsed .sidebar .nav-item.is-current{ width:32px; height:32px; margin:0 auto; padding:0; border-radius:var(--r-pill); box-shadow:none; }
  .app-shell.sidebar-collapsed .sidebar .sidebar-foot{ padding:12px 0 16px; align-items:center; }
  .app-shell.sidebar-collapsed .sidebar .sidebar-user{ justify-content:center; }
  /* 2026-09-15 走查：.brand-mark（品牌縮寫方塊）與 .brand-name 兩條連同設定頁那張「品牌」面板一起移除。
     2026-09-14 品牌識別那輪改用固定 Logo 圖檔之後，全站已經沒有任何節點掛這兩個 class。
     側欄現在的產品名那行是 .sidebar-product-name，不是這裡的 .brand-name。 */

  /* 2026-09-15 重設計：租戶篩選從「標籤＋整寬下拉」改成一顆「檢視範圍」切換塊（Vercel／Linear 的 workspace
     switcher 排法）——圓角 8 的淡底方塊，裡面上排小字眉「檢視範圍」、下排粗體客戶名，下拉本身透明無框
     疊在方塊裡（HTML 不動，還是同一顆 <select>）。不再用 border-bottom 分隔，靠上下留白。 */
  /* 2026-09-15 走查 scope-block-avatar：加 flex 排版讓字首方塊（.scope-avatar，index.html 端負責插入）
     跟文字區（.scope-text）左右並排，padding 8px 12px→10px 12px 對齊設計稿 Main.dc.html:23。 */
  .sidebar-tenant{
    margin:0 12px 4px; padding:10px 12px; border-radius:8px;
    background:rgba(255,255,255,.06); border:1px solid var(--chrome-line);
    display:flex; align-items:center; gap:10px;
  }
  .sidebar-tenant:hover{ background:rgba(255,255,255,.09); }
  /* 字首方塊：26×26 實心 --accent-2 圓角方塊，字色用 --accent-2-ink（深墨色，在亮青底上維持可讀對比）。
     選擇器限定在 #tenantBox 底下——窄螢幕 #tenantBoxSm 是另一種結構，不吃這顆樣式（見 identity.mjs 那半邊）。
     注意：--accent-2-ink 這顆 token 目前不在我負責的 30-shell.css 範圍內（屬 10-tokens.css，紅線禁止我動），
     若整合時發現 tokens 檔還沒加這顆變數，字色會退回瀏覽器預設黑，需請 tokens 負責人補上。 */
  #tenantBox .scope-avatar{
    width:26px; height:26px; flex:none; border-radius:var(--r-md);
    background:var(--accent-2); color:var(--accent-2-ink); font-weight:700; font-size:var(--fs-sm);
    display:flex; align-items:center; justify-content:center;
  }
  #tenantBox .scope-text{ flex:1; min-width:0; }
  .field-label{ display:flex; align-items:center; font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--chrome-ink-soft); margin-bottom:1px; }
  .tenant-select{
    width:100%; appearance:none; cursor:pointer;
    /* 讓瀏覽器原生下拉清單也跟著轉深色（Chrome／Edge／Firefox 都認 color-scheme），
       不然不管上面收合狀態多好看，一點開還是一片刺眼的純白系統清單，看起來最廉價的其實是這塊 */
    color-scheme:dark;
    background:transparent; border:0; border-radius:0;
    color:var(--chrome-ink); padding:0 22px 0 0; font-size:var(--fs-md); font-weight:600;
    /* 箭頭用實際的 SVG 線條圖示，不是兩個 CSS 漸層三角形拼出來的（邊緣有鋸齒感）；
       --chrome-ink 永遠不跟主題切換（見 chrome 相關 token 說明），所以顏色可以直接寫死進 SVG */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F4F5F4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position:calc(100% - 4px) center;
    background-repeat:no-repeat;
    transition:background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
  }
  .tenant-select:hover{ background-color:transparent; }
  /* 2026-09-15 走查 focus-ring-3-colors：全站 focus 訊號色只准一種，改吃 --focus（token 層已指向 --accent-2），
     不要在這裡各自寫死顏色，避免跟其他頁面的焦點框不一致。 */
  .tenant-select:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; box-shadow:none; }
  /* 清單本身也給深色底、跟 color-scheme 那行搭在一起用：部分瀏覽器要兩者都有才會真的套用 */
  .tenant-select option{ color:var(--chrome-ink); background:var(--chrome-bg-2); }

  /* 2026-09-15 走查 nav-icon-size-and-padding：導覽區內距 10px 12px → 14px 12px，對齊設計稿 Main.dc.html:28。 */
  .sidebar-nav{ flex:1; padding:14px 12px; display:flex; flex-direction:column; gap:2px; }
  /* 使用者確認過的決定：分類標籤要看起來像小標題，但還是要比項目本身（--fs-lg）小一階，
     所以是「字級調大＋加粗」，不是單純放大字級 */
  .sidebar-section-label{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--chrome-ink-soft); padding:14px 10px 6px; }
  .nav-item{
    display:flex; align-items:center; gap:10px; width:100%;
    /* 2026-09-15 重設計：膠囊改 6px 圓角方塊、字級 14→13，跟內容區 13px 的密度對齊。 */
    padding:8px 10px; border:none; border-radius:var(--r-md);
    background:none; cursor:pointer; text-align:left; font-size:var(--fs-md); color:var(--chrome-ink-soft);
  }
  /* 2026-09-15 走查 nav-icon-size-and-padding：圖示固定 16×16（CSS 寬高蓋過 HTML 上寫死的 18×18 屬性，
     不用改 index.html）；拿掉 opacity:.85 降透明——設計稿沒有這層，未選中/選中的區別已經靠
     --chrome-ink-soft 跟 .is-current 的 --accent-2 字色做出來了。 */
  .nav-item svg{ width:16px; height:16px; flex:none; }
  .nav-item:hover{ background:rgba(255,255,255,.06); color:var(--chrome-ink); }
  /* 目前頁面改成 .is-current class 決定視覺（整顆膠囊底色，不再是左邊框），
     aria-current 屬性照舊由 JS 設：畫面吃 class、輔助科技吃屬性，兩個都留著才不會少一半人看得出「現在在哪頁」 */
  /* 2026-09-14 /design 品牌質感優化：原本（企業四色規格 TASK-04）選中項目是漸層底色＋7710 C 亮青
     外發光 inset 邊條，使用者反饋「不要太 AI」——那組漸層＋霓虹光邊正是典型套路。改成單一色調
     的淡底＋圖示變色，安靜但看得清楚，不需要邊條或發光也分得出「現在在哪頁」。 */
  /* 2026-09-15 重設計：選中改成「白 8% 淡底＋左緣 2px 亮青邊條（inset box-shadow，不佔版面）＋圖示變亮青」。
     邊條回來了但不是 2026-09-14 拿掉的那種發光邊——那次的問題是漸層＋外發光，這裡是實心 2px。 */
  .nav-item.is-current{
    color:var(--chrome-ink); font-weight:600;
    background:rgba(255,255,255,.08); box-shadow:inset 2px 0 0 var(--accent-2);
  }
  .nav-item.is-current svg{ opacity:1; color:var(--accent-2); }
  .nav-item .soon{
    margin-left:auto; font-size:var(--fs-2xs); letter-spacing:.04em; color:var(--chrome-ink-soft);
    border:1px solid var(--chrome-line); border-radius:var(--r-pill); padding:2px 8px;
  }
  /* 2026-09-15 走查：導覽項右端的計數徽章（設計稿 Main.dc.html 的 .nav-badge，「遠端連線」那顆）。
     吃 144 C——現在有人連著裝置是「需要知道一下」的事，不是錯誤也不是成功，正好是 --warm 的職掌。 */
  .nav-badge{
    margin-left:auto; font-size:var(--fs-xs); font-weight:500; line-height:1.6;
    padding:1px 6px; border-radius:var(--r-pill);
    background:var(--warm-bg); color:var(--warm); flex:none;
  }

  .sidebar-foot{ border-top:1px solid var(--chrome-line); padding:12px; display:flex; flex-direction:column; gap:10px; }
  /* .conn-pill／.conn-dot／.sidebar-status（連線狀態燈）2026-09-12 隨設定頁「平台連線」面板一起移除。 */
  .sidebar-user{ display:flex; align-items:center; gap:8px; }
  /* 2026-09-15 走查 sidebar-foot-typography：設計稿 Main.dc.html:36 頭像沒有邊框、字級 12px(--fs-sm)，
     這裡拿掉多餘的 border 並把字級從 --fs-xs(11px) 調大一階。 */
  .user-chip{
    width:28px; height:28px; border-radius:50%; flex:none; background:rgba(255,255,255,.12); color:var(--chrome-ink);
    display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:600;
  }
  .sidebar-user-name{ display:block; font-size:var(--fs-md); font-weight:600; }
  /* 取代原本落落長的角色說明句：完整說明滑鼠停留才看得到（title），畫面上只留短標籤。
     2026-09 拿掉原本的膠囊底色／邊框：跟正上方顯示名稱（純文字、無底色）疊在一起時，
     一個素面一個像獨立按鈕，兩行視覺語言不一致、看起來像排版沒對齊。改成跟名稱同一種
     「純文字、字級與顏色分層」的呈現，角色只是名稱下面淡一階的說明字，不是另一個可互動元件。 */
  /* 2026-09-15 走查 sidebar-foot-typography：設計稿 Main.dc.html:144 角色行是 11px(--fs-xs)、一般字重、
     無字距——原本 10px/600/letter-spacing 是自己加的強調，跟名稱行的視覺層級拉得太近。 */
  .sidebar-user-role{
    display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:400;
    color:var(--chrome-ink-soft);
  }
  /* 側欄底部的登出鈕：「深色 chrome 上的淡色膠囊」語言（跟 2026-09-12 移除的 .conn-pill 同款），不是 .btn-ghost
     （那個是給一般頁面淺色表面用的，直接搬到永遠深色的 chrome 上對比會不對）。 */
  .sidebar-logout{
    width:100%; text-align:center; background:rgba(255,255,255,.06); border:1px solid var(--chrome-line);
    border-radius:var(--r-pill); padding:6px 10px; cursor:pointer; color:var(--chrome-ink-soft); font-size:var(--fs-sm);
  }
  .sidebar-logout:hover{ background:rgba(255,255,255,.12); color:var(--chrome-ink); }
  /* 2026-09-15 走查 seg-control-two-shapes：從「gap 隔開的膠囊」改成「1px 分隔線＋首尾圓角」的單一外殼形狀，
     跟 85-metrics.css 的 .seg-range 同一套語言；本來就沒有 box-shadow，這裡不用額外拿掉。 */
  .theme-toggle{ display:flex; gap:0; padding:0; background:rgba(255,255,255,.06); border:1px solid var(--chrome-line); border-radius:var(--r-sm); }
  .theme-toggle button{
    flex:1; border:none; border-right:1px solid var(--chrome-line); background:none; cursor:pointer;
    border-radius:0; color:var(--chrome-ink-soft); font-size:var(--fs-sm); padding:4px;
  }
  .theme-toggle button:last-child{ border-right:0; }
  .theme-toggle button:first-child{ border-radius:var(--r-sm) 0 0 var(--r-sm); }
  .theme-toggle button:last-child{ border-radius:0 var(--r-sm) var(--r-sm) 0; }
  .theme-toggle button[aria-checked="true"]{ background:rgba(255,255,255,.14); color:var(--chrome-ink); font-weight:600; }

  /* 設定頁在一般頁面內容區（會隨淺／深色主題切換），不是側欄那個永遠深色的 chrome——
     .theme-toggle 這個從側欄搬過來的元件在這裡改用一般頁面的 token（.conn-pill 已於 2026-09-12 移除），
     不能沿用 chrome-* 那組固定色，不然淺色模式下會整組看起來像破圖。 */
  /* 2026-09-15 走查 seg-control-two-shapes：套 .seg-range 同一套「32px 外框＋子元素各自圓角」形狀，
     外框改用一般表面 token（--surface／--line-strong），拿掉 box-shadow——設定頁的分段按鈕不吃陰影。
     border-right 顏色也要覆寫成 --line（一般頁面分隔線），不能沿用底下 .theme-toggle 給深色 chrome 用的
     --chrome-line，不然淺色模式下分隔線幾乎看不見。 */
  #view-settings .theme-toggle{ display:inline-flex; height:32px; padding:0; gap:0; background:var(--surface); border-color:var(--line-strong); border-radius:var(--r-md); }
  #view-settings .theme-toggle button{ color:var(--ink-faint); border-right:1px solid var(--line); border-radius:0; }
  #view-settings .theme-toggle button:last-child{ border-right:0; }
  #view-settings .theme-toggle button:first-child{ border-radius:var(--r-md) 0 0 var(--r-md); }
  #view-settings .theme-toggle button:last-child{ border-radius:0 var(--r-md) var(--r-md) 0; }
  #view-settings .theme-toggle button[aria-checked="true"]{ background:var(--surface-3); color:var(--ink); }
  #view-settings .field-label{ color:var(--ink-faint); }

  .main{ flex:1; min-width:0; }

  /* ---------- 窄螢幕頂欄（含全部導覽，不是只有 logo） ---------- */
  .chrome{ display:none; background:var(--chrome-bg); color:var(--chrome-ink); border-bottom:1px solid var(--chrome-line); }
  .chrome-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px 8px; }
  .chrome-right{ display:flex; align-items:center; gap:8px; min-width:0; }
  .chrome-tenant{ display:flex; gap:8px; align-items:center; padding:0 16px 12px; }
  .chrome-tenant .tenant-select{ flex:1; min-width:0; }
  .chrome-tenant .theme-toggle{ flex:none; }
  .chrome-tenant .theme-toggle button{ padding:4px 8px; }
  .chrome-nav{ display:flex; gap:8px; padding:0 16px 12px; overflow-x:auto; }
  .chrome-nav .nav-pill{
    flex:none; border:1px solid var(--chrome-line); background:rgba(255,255,255,.06); color:var(--chrome-ink-soft);
    border-radius:var(--r-pill); padding:8px 12px; font-size:var(--fs-md); cursor:pointer;
  }
  .chrome-nav .nav-pill[aria-current="page"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
  @media (max-width:899px){
    .sidebar{ display:none; }
    .sidebar-toggle{ display:none; }
    .chrome{ display:block; }
    /* 七顆 pill 一定超過一個手機寬度，橫捲之外再給一個「右邊還有」的訊號：右緣淡出 */
    .chrome-nav{
      -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
              mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
  }