/* ── 基础 ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:        #1e2229;
  --bg-panel:  #262b34;
  --bg-hover:  #2f3540;
  --bg-active: #384050;
  --border:    #3a4150;
  --text:      #d8dde5;
  --text-dim:  #8b94a3;
  --accent:    #4a9eff;
  --danger:    #e05c5c;
  --ok:        #4caf7d;
  --topbar-h:  48px;
  --status-h:  30px;
  --sidebar-w: 190px;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

button, input, select { font: inherit; color: inherit; }

/* ── 顶栏 ───────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.brand { font-weight: 600; letter-spacing: .3px; white-space: nowrap; }
.brand span { color: var(--accent); }

.search-box {
  flex: 1;
  max-width: 420px;
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
}
.search-box input:focus { border-color: var(--accent); }
.search-box::before {
  content: "🔍";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: .6;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.user-chip { color: var(--text-dim); white-space: nowrap; }
.user-chip b { color: var(--text); font-weight: 600; }

/* ── 主体三栏 ───────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: calc(100vh - var(--topbar-h) - var(--status-h));
}

.sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px 0;
}

.cat-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text-dim);
  border-left: 3px solid transparent;
  user-select: none;
}
.cat-item:hover { background: var(--bg-hover); color: var(--text); }
.cat-item.active {
  background: var(--bg-active);
  color: var(--text);
  border-left-color: var(--accent);
}
.cat-item .count { font-size: 12px; opacity: .7; }

.main { display: flex; flex-direction: column; overflow: hidden; }

/* ── 工具栏 ─────────────────────────────────────────── */
.toolbar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  min-height: 45px;
}

.btn {
  padding: 5px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

/* ── 文件表 ─────────────────────────────────────────── */
.table-wrap { flex: 1; overflow: auto; }

table.files { width: 100%; border-collapse: collapse; }

table.files th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-panel);
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
table.files th:hover { color: var(--text); }
table.files th.sorted::after { content: " ▲"; font-size: 10px; }
table.files th.sorted.desc::after { content: " ▼"; }
table.files th.no-sort { cursor: default; }

table.files td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(58, 65, 80, .5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.files tbody tr:hover { background: var(--bg-hover); }
table.files tbody tr.selected { background: var(--bg-active); }
table.files tbody tr.disabled .name { color: var(--text-dim); text-decoration: line-through; }

.col-check { width: 34px; }
.col-size  { width: 100px; text-align: right; }
.col-time  { width: 150px; }
.col-state { width: 76px; }
.col-act   { width: 92px; }

.name { display: flex; align-items: center; gap: 8px; }
.name .icon { flex: 0 0 auto; }

.badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.state-on  { color: var(--ok); }
.state-off { color: var(--text-dim); }

.empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-dim);
}

/* 空状态提示在 #file-table **外面**（见 index.html 注释）—— 窄屏下 #file-table 整体
   display:none，提示放在里面的话窄屏空库时看不到。
   代价是桌面端它成了 .table-wrap 的兄弟：.table-wrap 是 flex:1，表格为空时它照样占满
   剩余高度，会把提示挤出 .main（overflow:hidden）之外、整条看不见。
   表格为空（tbody 没有任何子节点）时让 .table-wrap 缩到内容高度（只剩表头那一行），
   提示就仍紧跟在表头下面 —— 与移动节点之前的观感一致。
   注：:has() 的浏览器支持见下面媒体查询里的说明（Chrome 105+/Safari 15.4+）；
   不支持时退化为「提示被推到内容区底部」，仍然看得到，不会消失。 */
.main:has(#file-rows:empty) .table-wrap { flex: 0 0 auto; }

/* ── 状态栏 ─────────────────────────────────────────── */
.statusbar {
  height: var(--status-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}

.progress {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 8px;
}
.progress.visible { display: flex; }
.progress-bar {
  width: 180px;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .15s;
}

/* ── 提示条 ─────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  z-index: 100;
  display: none;
}
.toast.visible { display: block; }
.toast.error { border-left-color: var(--danger); }

/* ── 登录页 ─────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.login-card {
  width: 340px;
  padding: 32px 28px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}
.login-card h1 {
  margin: 0 0 4px;
  font-size: 20px;
  letter-spacing: .3px;
}
.login-card h1 span { color: var(--accent); }
.login-card .subtitle {
  margin: 0 0 24px;
  color: var(--text-dim);
  font-size: 13px;
}
.login-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.login-card input {
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-card button {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.login-card button:disabled { opacity: .6; cursor: progress; }
.login-error {
  min-height: 20px;
  margin-bottom: 8px;
  color: var(--danger);
  font-size: 13px;
}

/* 桌面端默认隐藏分类标签（手机区块之外要有这条，否则宽屏上会露出来）。
   这条与手机区块里的 .cat-chips{display:flex} 同优先级，靠源顺序决胜，
   所以必须写在 @media 之前、让手机区块里的那条覆盖它。
   对称的坑：挪到 @media 之后，手机端也会是 display:none，标签整条不可见。 */
.cat-chips { display: none; }

/* 桌面端默认隐藏卡片容器（手机区块之外要有这条，否则宽屏上会露出来）。
   与上面的 .cat-chips 同理：同优先级下靠源顺序决胜，
   所以必须写在 @media 之前，让手机区块里的 .file-cards{display:flex} 覆盖它。
   对称的坑：挪到 @media 之后，手机端也会是 display:none，卡片整条不可见。 */
.file-cards { display: none; }

/* 桌面端默认隐藏移动端排序控件（窄屏上由工具栏里的下拉 + 方向按钮替代列头点击）。
   同 .cat-chips / .file-cards：同优先级下靠源顺序决胜，必须写在 @media 之前，
   让手机区块里的 .mobile-sort{display:inline-flex} 覆盖它。
   对称的坑：挪到 @media 之后，手机端也会是 display:none，排序控件整组消失。 */
.mobile-sort { display: none; }

/* 桌面端默认隐藏使用者卡片容器。理由同 .cat-chips / .file-cards：
   同优先级下靠源顺序决胜，必须写在 @media 之前，让手机区块里的
   .user-cards{display:flex} 覆盖它。放后面手机上会整页看不到使用者卡片。 */
.user-cards { display: none; }

/* ══ 底部弹出面板（窄屏的管理员操作菜单）════════════════════════ */
/* 面板节点在桌面端始终 hidden，所以不需要包在媒体查询里，用 hidden 属性控制显隐。 */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 90;
}
.sheet-backdrop[hidden] { display: none; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .4);
}
.sheet[hidden] { display: none; }

.sheet-handle {
  width: 34px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 2px;
  background: var(--border);
}
.sheet-title {
  padding: 0 4px 10px;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-action {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-bottom: 8px;
  padding: 0 14px;
  text-align: left;
  font-size: 15px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.sheet-action:active { background: var(--bg-hover); }
.sheet-action.danger { color: var(--danger); border-color: rgba(224, 92, 92, .4); }
.sheet-action.cancel { text-align: center; color: var(--text-dim); }

/* ══ 移动端适配 ══════════════════════════════════════════════════
   断点 768px 在 public/js/app.js 里也出现一次（MOBILE_QUERY 常量），
   因为媒体查询无法读取 JS 常量、JS 也无法读取媒体查询。
   改这里要同时改那里 —— 症状是「布局切了卡片但 JS 还在渲染表格」。
   决策依据见 docs/superpowers/specs/2026-09-12-mobile-responsive-design.md §2
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --topbar-h: 52px;
    --status-h: 34px;
  }

  /* 布局改为单列：侧栏让位给顶部的分类标签 */
  .layout {
    grid-template-columns: 1fr;
    /* 100dvh 在移动浏览器上才不会被地址栏遮挡。上一行是不支持 dvh 时的回退。 */
    height: calc(100vh - var(--topbar-h) - var(--status-h));
    height: calc(100dvh - var(--topbar-h) - var(--status-h));
  }

  /* 只有首页（带分类标签那一页）需要显式给两行定尺寸。
     只写列的话两行都是隐式 auto 行，而 .layout 的高度是固定的，align-content 默认
     normal（约等于 stretch）会把剩余高度**平分**给这两行 —— 空库时分类标签被撑到
     327px 高（行高 344px），卡片区只剩一半。
     第一行 auto（标签按内容高，≈50px），第二行 minmax(0, 1fr) 吃掉剩余高度。
     用 minmax(0, 1fr) 而不是 1fr：1fr 的最小值是 auto，内容超高时会把行撑破，
     .main 内部的滚动就失效了；min 设为 0 才能真正让 .main 自己滚。
     —— 之所以要 :has(.cat-chips) 限定而不是直接写在 .layout 上：
     users.html 的 .layout 只有 .main 一个网格项，显式写出两条轨道后它落进第一行 auto，
     而第二行的 1fr 会把剩余高度全吃掉（fr 轨道先于 align-content 分配空间），
     .main 就只剩下内容高度 —— 实测 390px 下从 758px 塌到 241px，使用者卡片区被压扁。
     首页才有 .cat-chips，所以用 :has() 限定，users.html 保持「单条 auto 行被 stretch」
     的原行为。:has() 的支持度说明见本文件移动端区块末尾的搜索框那条。 */
  .layout:has(.cat-chips) {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sidebar { display: none; }

  /* ── 分类横滑标签 ── */
  .cat-chips {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    /* 触摸屏上滑动即可，滚动条是干扰 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cat-chips::-webkit-scrollbar { display: none; }

  .cat-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 17px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
  }
  .cat-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .cat-chip .count { font-size: 12px; opacity: .75; }

  /* ── 文件卡片（窄屏替代表格）── */
  /* 表格整体让位。必须隐藏 .table-wrap 本身而不是 table.files ——
     验收脚本查的正是 .table-wrap 的 display。
     只认 #file-table（index.html 那张表）：users.html 用的是同一个 .table-wrap 类，
     而它的 .user-cards 要到 Task 6 才有，这里若写成 .table-wrap 会把使用者管理页
     在手机上整页变空。 */
  #file-table { display: none; }

  /* 使用者管理页的表格整体让位。同理只认 #user-table（users.html 那张表），
     不能写成 .table-wrap —— 那会把主界面在手机上的表格一起隐藏，
     而主界面靠的是 .file-cards，两边都得各留各的。 */
  #user-table { display: none; }

  .file-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    /* 卡片列表自己滚。.main 是 overflow:hidden 的 flex 列，不这样写
       超出视口的卡片会被裁掉且滚不动。与 .table-wrap 的 flex:1;overflow:auto 对称。 */
    flex: 1;
    overflow-y: auto;
  }

  .file-card {
    padding: 11px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .file-card.selected { background: var(--bg-active); border-color: var(--accent); }
  .file-card.disabled { opacity: .55; }
  .file-card.disabled .card-name { text-decoration: line-through; }

  .card-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    /* 长文件名截断。手机上没法悬停看全名，这是有意的取舍（见设计文档 §11.4） */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card-name .name-text { overflow: hidden; text-overflow: ellipsis; }

  .card-meta {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-dim);
  }

  .card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
  }
  /* 触控目标 ≥44px（Apple HIG 的最小可点尺寸） */
  .card-actions .btn {
    min-height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }
  .card-actions .card-menu {
    margin-left: auto;
    min-width: 44px;
    padding: 0 12px;
    font-size: 18px;
    line-height: 1;
  }

  /* ── 排序控件（窄屏替代列头点击） ── */
  .mobile-sort {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  #mobile-sort { padding: 0 8px; }
  #mobile-sort-dir { min-width: 44px; justify-content: center; font-size: 16px; }

  /* ── 使用者卡片 ── */
  .user-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    /* 卡片列表自己滚。与 .file-cards 同理：.main 是 overflow:hidden 的 flex 列，
       不这样写超出视口的卡片会被裁掉且滚不动。 */
    flex: 1;
    overflow-y: auto;
  }

  .user-card {
    padding: 11px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .user-card.selected { background: var(--bg-active); border-color: var(--accent); }
  .user-card.disabled { opacity: .55; }
  .user-card.disabled .user-card-name { text-decoration: line-through; }

  .user-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-dim);
  }

  .user-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }
  .user-card-actions .btn {
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }

  /* ── 登录页 ── */
  .login-card {
    width: min(340px, calc(100vw - 32px));
    padding: 26px 22px;
  }
  .login-card input {
    min-height: 46px;   /* ≥44px，避免 iOS 上聚焦时自动放大页面 */
    font-size: 16px;    /* 低于 16px 时 iOS Safari 会缩放整页 */
  }
  .login-card button {
    min-height: 48px;
    font-size: 15px;
  }
  .login-page {
    height: 100vh;
    height: 100dvh;
    padding: 16px;
  }

  /* ── 触控与移动浏览器的全局修正（只作用于窄屏）──
     这条**有意**放在媒体查询内而不是全局：全局写会让桌面端的按钮、下拉、
     输入框字号也从 14px 变成至少 16px，与改动前的观感不同 ——
     而它要解决的问题（iOS 上聚焦 <16px 的表单控件会缩放整页、安卓上
     双击缩放）只存在于窄屏触屏场景。桌面端没有必要承担这个副作用。
     见 docs/superpowers/plans/2026-09-12-mobile-responsive.md Task 7 Step 2。
     注：`.card-actions .btn` / `.user-card-actions .btn` / `#mobile-sort-dir`
     的特异性都高于这里的 `button`，它们的 14px/16px 仍然生效。 */
  input, select, textarea, button { font-size: max(16px, 1em); }

  /* ── 顶栏角色徽章 ── */
  .user-chip .role-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
  }

  /* ── 搜索框折成图标，点开变整行 ── */
  .topbar { gap: 8px; padding: 0 12px; }

  /* ── 顶栏一行放得下 ──
     390px 下品牌(116) + 搜索(40) + 右侧(登出/使用者管理/用户名+徽章) 的固有宽度
     合计约 420px，超出视口 30px，页面能左右晃动。
     处理：品牌允许收缩并省略号截断（它是唯一可牺牲的装饰元素），
     右侧按钮不折行 —— 否则 flex 会把它们压到 min-content（一个汉字宽），
     「使用者管理」竖着折成 5 行、按钮高 117px 捅出 52px 高的顶栏。
     多出来的缺口全部由 .brand 吸收。 */
  .brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-right { gap: 8px; }
  .topbar-right .btn { white-space: nowrap; }

  .search-box {
    flex: 0 0 auto;
    max-width: none;
    width: 40px;
  }
  .search-box input {
    width: 40px;
    padding: 6px 8px;
    color: transparent;
    cursor: pointer;
  }
  .search-box input::placeholder { color: transparent; }
  .search-box.expanded {
    flex: 1 1 auto;
    width: auto;
  }
  .search-box.expanded input {
    width: 100%;
    padding: 6px 10px 6px 30px;
    color: inherit;
    cursor: text;
  }
  .search-box.expanded input::placeholder { color: inherit; }

  /* 搜索展开时让 brand 和右侧按钮让位，把整行让给输入框。
     65px 的输入框没法用 —— 这是 §3.4 要求的「整行展开」。
     :has() 用于选中 .search-box 之前的兄弟（.brand），普通兄弟选择器做不到。
     支持度：Chrome 105+ / Safari 15.4+，2026 年可接受。 */
  .topbar:has(.search-box.expanded) .brand { display: none; }
  .topbar:has(.search-box.expanded) .topbar-right { display: none; }
  .search-box.expanded { flex: 1 1 auto; width: auto; }
}

/* ══ 超窄屏（iPhone SE 一代 320×568、折叠屏外屏）══════════════════
   320px 实测：顶栏各项的固有宽度合计约 330px，超出视口 10px，页面能左右晃动；
   .brand 被压成 0 宽、登出按钮被裁到视口外看不见。
   做法是「收敛间距 + 让最不重要的部分可牺牲」：顶栏与右侧组的间距 8→4、
   按钮内边距各收 4px（合计省下约 40px）。
   必须放在上面的 768px 区块**之后** —— 同优先级靠源顺序决胜。 */
@media (max-width: 360px) {
  .topbar { gap: 4px; padding: 0 8px; }
  .topbar-right { gap: 4px; }
  .topbar-right .btn { padding: 5px 8px; }

  /* 允许收缩（min-width:0 覆盖 flex 项的自动最小尺寸），再省略号截断。
     它是顶栏里唯一长度不可控的元素（用户名由管理员设置），长用户名不该撑破顶栏。
     截断写在 .user-chip 上而不是内部的 <b> 上：让角色徽章（管理/使用）一起参与，
     否则徽章会被挤出去。 */
  .user-chip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ══ 触控与移动浏览器的全局修正 ═════════════════════════════════ */

/* 安卓上点卡片会闪一个蓝色高亮框，很干扰 */
* { -webkit-tap-highlight-color: transparent; }

/* 底部状态栏避开刘海屏的 home indicator。env() 在桌面浏览器上取 0，无副作用。
   （同组的 `font-size: max(16px, 1em)` 另有去处 —— 见上面媒体查询里的说明。） */
.statusbar { padding-bottom: env(safe-area-inset-bottom); }