/* styles.css —— 全站基础 + 看板首页
 * 依赖：vendor/apple-ui.css（先 <link> 引入它，本文件才能拿到 var(--ios-*)）
 */

* { box-sizing: border-box; }

/* ============================================================================
 * iOS Safari / iOS Chrome 基础加固
 * ---------------------------------------------------------------------------
 * - text-size-adjust: 防止 iOS Safari 在竖屏文字过小时自动放大字号（会破坏 iOS 布局）
 * - tap-highlight: 触摸时不显示灰蓝矩形高亮（iOS 默认行为很老气）
 * - overscroll-behavior: 禁掉 pull-to-refresh + 边缘橡皮筋反弹，让 body 感觉像原生 app
 * - font-smoothing: iOS 上 SF Pro 字体子像素抗锯齿更清晰
 * - -webkit-touch-callout: 禁用长按弹出复制菜单（对交互 UI 元素）
 * - text-rendering: geometricPrecision → 稍微牺牲速度换 iOS Retina 字形精度
 * ============================================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  height: -webkit-fill-available; /* Safari <14 兼容 */
  height: 100dvh;
}

body {
  margin: 0;
  background: var(--ios-bg);   /* iOS systemGroupedBackground = #F2F2F7 */
  color: var(--ios-label);
  /* min-height 三层兜底：
     100vh    → 老浏览器
     -webkit-fill-available → iOS Safari 9-14 特有的正确视口
     100dvh   → iOS 15.4+ / 现代 Chrome：动态跟随地址栏，不再撑破 */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

/* ────────── Navigation Bar（看板首页 header） ────────── */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  min-height: 52px;
  background: var(--ios-bg-nav);
  backdrop-filter: var(--ios-glass);
  -webkit-backdrop-filter: var(--ios-glass);
  border-bottom: 0.5px solid var(--ios-sep-nt);
  position: sticky; top: 0; z-index: 40;
}
h1 { margin: 0; font-size: 22px; letter-spacing: -0.022em; font-weight: 700; }
.sub { color: var(--ios-label2); margin-top: 4px; font-size: 13px; }

/* ────────── stat 卡片（大数字 + 副标） ────────── */
#statbar { display: flex; gap: 12px; flex-wrap: wrap; }
.stat {
  background: var(--ios-bg-elev);
  border-radius: var(--ios-r-l);
  padding: 12px 16px; min-width: 116px;
  box-shadow: var(--ios-shadow-1);
}
.stat b {
  display: block; font-size: 22px; line-height: 1.15;
  font-weight: 600; letter-spacing: -0.022em; color: var(--ios-label);
}
/* 数字前的小图标：柔和灰蓝，不刺眼 */
.stat b i { color: var(--ios-label3); margin-right: 6px; font-size: 16px; }
.stat span { color: var(--ios-label2); font-size: 12px; letter-spacing: -0.005em; }

main { padding: 20px 20px 40px; }

/* ────────── 表格 = iOS Grouped List 风 ────────── */
.panel {
  background: var(--ios-bg-elev);
  border-radius: var(--ios-r-xl);
  overflow: hidden;
  box-shadow: var(--ios-shadow-1);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td {
  padding: 12px 16px; text-align: left;
  white-space: nowrap;
  border-bottom: 0.5px solid var(--ios-sep-nt);
}
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ios-label2); background: transparent; font-weight: 600;
  padding: 10px 16px 8px;
  border-bottom: 0.5px solid var(--ios-sep-nt);
}
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s var(--ios-ease); }
tbody tr:hover td { background: var(--ios-fill4); }

/* ────────── Badge（状态徽章）—— iOS chip 风 ────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--ios-r-pill);
  font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
  background: var(--ios-fill3); color: var(--ios-label2);
}
.badge.online  { background: rgba(52,199,89,.14); color: #248A3D; }
.badge.offline { background: var(--ios-fill3); color: var(--ios-label2); }
.badge.danger  { background: rgba(255,59,48,.12); color: #C41E15; }
.badge.screen-on  { background: rgba(10,132,255,.14); color: #0071E3; }
.badge.screen-off { background: var(--ios-fill3); color: var(--ios-label2); }
.badge.unknown    { background: rgba(255,204,0,.18); color: #9A6700; }

/* ────────── App 名字 —— *XXX 格式，*黑 + XXX 红大字 ────────── */
.app-cell { min-width: 96px; }
.app-name {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-size: 16px;                  /* 比其他 cell (14px) 明显大一号 */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-family: inherit;
}
.app-name-star { color: #000; font-weight: 800; }
.app-name-text {
  color: #FF3B30;                   /* iOS system red */
  font-weight: 700;
}
.app-name-empty { color: var(--ios-label3); font-size: 14px; font-weight: 400; }

/* ────────── 品牌卡片标签 —— per-brand 颜色 pill ────────── */
.brand-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--ios-r-pill);
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  background: var(--ios-label3);    /* 兜底灰 */
  white-space: nowrap;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,.24);
}
/* 各品牌官方色 —— 深底白字，不刺眼 */
.brand-badge.brand-oppo      { background: #10AC50; }
.brand-badge.brand-vivo      { background: #415FFF; }
.brand-badge.brand-xiaomi    { background: #FF6900; }
.brand-badge.brand-huawei    { background: #C7000B; }
.brand-badge.brand-honor     { background: #00A0E9; }
.brand-badge.brand-samsung   { background: #1428A0; }
.brand-badge.brand-oneplus   { background: #EB0028; }
.brand-badge.brand-realme    { background: #FFC800; color: #333; text-shadow: none; }
.brand-badge.brand-meizu     { background: #0064FF; }
.brand-badge.brand-nubia     { background: #C8102E; }
.brand-badge.brand-zte       { background: #0071CE; }
.brand-badge.brand-lenovo    { background: #E2231A; }
.brand-badge.brand-motorola  { background: #5C92FA; }
.brand-badge.brand-asus      { background: #00539B; }
.brand-badge.brand-sony      { background: #000000; }
.brand-badge.brand-lg        { background: #A50034; }
.brand-badge.brand-nokia     { background: #124191; }
.brand-badge.brand-google    { background: #4285F4; }
.brand-badge.brand-nothing   { background: #202020; }
.brand-badge.brand-blackview { background: #FF7A00; }
.brand-badge.brand-tecno     { background: #0066B2; }
.brand-badge.brand-infinix   { background: #4A00E0; }
.brand-badge.brand-unknown   { background: var(--ios-label3); }
.dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* ────────── 端口/字段 chip ────────── */
.port {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
  background: rgba(0,122,255,.12); color: var(--ios-blue);
  padding: 3px 8px; border-radius: 6px; font-weight: 600; font-size: 12px;
}

/* ────────── 电池图标 —— iOS 系统电池感 ────────── */
.bat { display: inline-flex; align-items: center; gap: 8px; min-width: 96px; }
.battery {
  position: relative; width: 34px; height: 15px;
  border: 1.5px solid var(--ios-label3); border-radius: 4px;
  padding: 2px; display: inline-flex; align-items: center; flex: none;
}
.battery::after {
  content: ""; position: absolute; right: -4px; top: 50%;
  transform: translateY(-50%); width: 2.5px; height: 6px;
  background: var(--ios-label3); border-radius: 0 2px 2px 0;
}
.battery-level {
  height: 100%; border-radius: 1px;
  background: var(--ios-green);
  transition: width .3s var(--ios-ease), background .3s var(--ios-ease);
}
.battery.low { border-color: var(--ios-red); }
.battery.low .battery-level { background: var(--ios-red); }
.battery.low::after { background: var(--ios-red); }
.battery.charging { border-color: var(--ios-green); }
.battery.charging .battery-level { background: var(--ios-green); }
.bolt {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -52%); font-size: 10px; line-height: 1;
  color: #fff; filter: drop-shadow(0 0 1px rgba(0,0,0,0.4));
}
.bat-pct { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ios-label); }

/* ────────── 其它工具样式 ────────── */
.empty {
  padding: 60px 20px; text-align: center;
  color: var(--ios-label2); font-size: 14px;
}
.live { display: inline-flex; align-items: center; gap: 8px; }
/* 淡化 pulse 光晕：小一点、动画柔一点，不要"呼吸灯" */
.pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ios-green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .9; }
  50%  { transform: scale(1.3); opacity: .35; }
  100% { transform: scale(1);   opacity: .9; }
}

/* ────────── 设备 ID（点击复制 + hover 预览） ────────── */
.devid {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  transition: background .15s var(--ios-ease);
}
.devid:hover { background: rgba(0,122,255,.08); }
.devid .copy-ic { font-size: 12px; color: var(--ios-blue); opacity: .6; }
.devid:hover .copy-ic { opacity: 1; }
.devid .devid-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(28, 28, 30, .92);
  backdrop-filter: var(--ios-glass-lite);
  color: #fff; font-size: 12px;
  padding: 6px 10px; border-radius: var(--ios-r-s);
  white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s var(--ios-ease), transform .15s var(--ios-ease);
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
}
.devid .devid-pop::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(28,28,30,.92);
}
.devid:hover .devid-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ────────── Top Toast —— 顶部下拉胶囊（Dynamic Island 感） ────────── */
#top-toast {
  position: fixed; left: 50%; top: 12px;
  transform: translateX(-50%) translateY(-140%);   /* 起始藏在屏幕上方 */
  z-index: 1200;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--ios-r-pill);
  background: rgba(255,255,255,.78);
  color: var(--ios-label);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.008em;
  max-width: min(520px, calc(100vw - 32px));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; opacity: 0;
  box-shadow:
    0 20px 40px -8px rgba(0,0,0,.18),
    0 8px 16px -4px rgba(0,0,0,.08),
    0 0 0 0.5px var(--ios-stroke),
    inset 0 0.5px 0 var(--ios-hl-top);
  backdrop-filter: var(--ios-glass);
  -webkit-backdrop-filter: var(--ios-glass);
  transition:
    opacity .28s var(--ios-ease),
    transform .42s var(--ios-spring);
}
#top-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#top-toast .tt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ios-blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,.14);
  flex-shrink: 0;
}
#top-toast.ok  .tt-dot { background: var(--ios-green); box-shadow: 0 0 0 3px rgba(52,199,89,.16); }
#top-toast.err .tt-dot { background: var(--ios-red);   box-shadow: 0 0 0 3px rgba(255,59,48,.14); }

/* ────────── Toast —— iOS Dynamic Island 感 ────────── */
#toast {
  position: fixed; left: 50%; bottom: 36px;
  transform: translateX(-50%) translateY(24px) scale(0.94);
  background: rgba(255,255,255,.72);
  color: var(--ios-label);
  padding: 12px 22px;
  border-radius: var(--ios-r-pill);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.008em;
  opacity: 0; pointer-events: none; z-index: 1100;
  transition:
    opacity .32s var(--ios-ease),
    transform .38s var(--ios-spring);
  box-shadow:
    0 20px 40px -8px rgba(0,0,0,.18),
    0 8px 16px -4px rgba(0,0,0,.08),
    0 0 0 0.5px var(--ios-stroke),
    inset 0 0.5px 0 var(--ios-hl-top);
  backdrop-filter: var(--ios-glass);
  -webkit-backdrop-filter: var(--ios-glass);
  max-width: min(420px, calc(100vw - 32px));
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ────────── 新设备高亮闪一下 ────────── */
/* 新设备行淡蓝闪一下（不再强烈高光） */
tr.dev-new td { animation: devNewFlash 1.6s ease-out; }
@keyframes devNewFlash {
  0%   { background: rgba(0,122,255,.10); }
  70%  { background: rgba(0,122,255,.03); }
  100% { background: transparent; }
}

/* ────────── 表格右侧 ⋮ 按钮 + 弹出菜单 ────────── */
.th-actions { width: 1%; text-align: center; }
td.row-actions {
  width: 1%; padding: 8px 12px; text-align: center;
}
.row-tool-btn {
  appearance: none; background: transparent; border: 0;
  color: var(--ios-label2); font-size: 15px;
  width: 30px; height: 30px; border-radius: 999px;
  cursor: pointer;
  transition:
    background .15s var(--ios-ease),
    color .15s var(--ios-ease),
    transform .12s var(--ios-ease);
  display: inline-flex; align-items: center; justify-content: center;
}
.row-tool-btn:hover, .row-tool-btn[aria-expanded="true"] {
  background: var(--ios-fill2); color: var(--ios-blue);
}
.row-tool-btn:active { transform: scale(0.9); }

/* Popup Menu —— iOS Context Menu 风（vibrancy） */
.row-toolbar-popup {
  position: fixed; z-index: 100; min-width: 240px;
  background: rgba(255,255,255,.78);
  backdrop-filter: var(--ios-glass);
  -webkit-backdrop-filter: var(--ios-glass);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--ios-shadow-3);
  animation: popIn .2s var(--ios-spring);
  transform-origin: top center;
}
.row-toolbar-popup[hidden] { display: none; }
@keyframes popIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.row-toolbar-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 0.5px solid var(--ios-sep-nt);
  margin-bottom: 4px;
}
.row-toolbar-devtitle {
  font-size: 13px; font-weight: 600; color: var(--ios-label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -0.008em;
}
.row-toolbar-devid {
  font: 11px ui-monospace, SFMono-Regular, monospace; color: var(--ios-label2);
  background: var(--ios-fill3);
  padding: 3px 8px; border-radius: 6px;
}
.row-toolbar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 8px;
  text-decoration: none; color: var(--ios-label);
  font-size: 15px; font-weight: 400;
  transition: background .12s var(--ios-ease);
}
.row-toolbar-item:hover { background: rgba(0,122,255,.1); color: var(--ios-blue); }
.row-toolbar-item:active { background: rgba(0,122,255,.16); }
.row-toolbar-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(0,122,255,.14); color: var(--ios-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: transform .12s var(--ios-ease);
}
.row-toolbar-item:hover .row-toolbar-icon { transform: scale(1.05); }
.row-toolbar-label { flex: 1; font-weight: 500; letter-spacing: -0.008em; }
.row-toolbar-arrow {
  color: var(--ios-label3); font-size: 15px;
  transition: transform .15s var(--ios-ease), color .15s var(--ios-ease);
}
.row-toolbar-item:hover .row-toolbar-arrow { color: var(--ios-blue); transform: translateX(2px); }

/* ============================================================================
 * 移动端适配 —— iPad / iPhone
 * 断点：<= 900px（iPad 竖屏 + 手机）· <= 640px（手机） · <= 380px（小屏手机）
 * ============================================================================ */

/* ──────────────────────────────────────────────────────────────
 * MacBook / 中等宽屏专用（约 901–1680 CSS px）
 * 目标：本机 2560×1600 Retina（逻辑宽约 1440–1680）
 * 不隐藏任何列：面板横向滚动看全量；Windows 大屏（≥1681）不变
 * ────────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1680px) {
  main { padding: 14px 14px 28px; }
  table { font-size: 12.5px; }
  th, td { padding: 8px 10px; }
  th { font-size: 10px; padding: 8px 10px 6px; letter-spacing: 0.04em; }

  .badge { padding: 3px 8px; font-size: 11px; gap: 4px; }
  .app-name { font-size: 14px; }
  .app-cell { min-width: 72px; }
  .brand-badge { font-size: 11px; padding: 3px 8px; }
  .bat { min-width: 78px; gap: 6px; }
  .bat-pct { font-size: 12px; }

  .perm-cell { max-width: 160px; gap: 3px; }
  .perm-chip {
    font-size: 9px;
    padding: 1px 5px;
    line-height: 1.25;
  }

  /* 横向滑动看全列（不隐藏） */
  .panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-image:
      linear-gradient(to right, var(--ios-bg-elev), var(--ios-bg-elev)),
      linear-gradient(to right, var(--ios-bg-elev), var(--ios-bg-elev)),
      linear-gradient(to right, rgba(0,0,0,.08), transparent 40%),
      linear-gradient(to left,  rgba(0,0,0,.08), transparent 40%);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  table { width: max-content; min-width: 100%; }
}

/* iPad 竖屏 + 大屏手机 */
@media (max-width: 900px) {
  header {
    padding: 10px 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: max(10px, env(safe-area-inset-top));
  }
  main { padding: 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Panel 内表格保留横向滚动 —— 加视觉滚动提示阴影 */
  .panel {
    background-image:
      linear-gradient(to right, var(--ios-bg-elev), var(--ios-bg-elev)),
      linear-gradient(to right, var(--ios-bg-elev), var(--ios-bg-elev)),
      linear-gradient(to right, rgba(0,0,0,.08), transparent 40%),
      linear-gradient(to left,  rgba(0,0,0,.08), transparent 40%);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* 手机竖屏 */
@media (max-width: 640px) {
  h1 { font-size: 20px; }
  header { gap: 10px; min-height: 48px; padding: 8px 12px; }
  main { padding: 12px 12px 32px; }
  #statbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    width: 100%;
  }
  .stat { min-width: 0; padding: 10px 14px; }
  .stat b { font-size: 18px; }
  .stat span { font-size: 11px; }

  /* Toast 位置：
     - iOS Chrome 地址栏出现时会占屏幕底部 ~90px，遮住 fixed 元素
     - iOS Safari 用 visualViewport 定位 fixed，一般 OK；但 Chrome 用 layout viewport
     - 保守做法：抬高到 80px（避开 iOS Chrome 地址栏典型高度）+ 叠加 home indicator */
  #toast {
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 60px));
    left: 50%; transform: translateX(-50%) translateY(24px) scale(0.94);
    max-width: min(360px, calc(100vw - 24px));
    font-size: 13.5px; padding: 11px 20px;
  }

  /* Popup 菜单靠边贴齐 + 缩窄 */
  .row-toolbar-popup { min-width: 200px; max-width: calc(100vw - 24px); }
  .row-toolbar-item { padding: 10px 12px; font-size: 15px; min-height: 44px; }
  .row-toolbar-icon { width: 30px; height: 30px; font-size: 14px; }

  /* devid pop tooltip 手机上离屏底就不叠 —— 直接不再显示（点击即复制） */
  .devid .devid-pop { display: none; }

  /* 表格更紧凑 */
  th, td { padding: 10px 12px; font-size: 13px; }
  th { font-size: 10px; padding: 8px 12px 6px; }
  /* App 名在手机上少收一点：仍显眼但节省一格宽 */
  .app-name { font-size: 14.5px; }
  .brand-badge { font-size: 11px; padding: 3px 8px; }
  /* 手机上隐藏低优先级列：
       3 无障碍 · 6 型号 · 9 IP · 10 国 · 11 省 · 12 市 · 14 心跳
     保留：1 状态 · 2 屏幕 · 4 权限 · 5 App · 7 品牌 · 8 电量 · 13 设备ID · 15 操作 */
  table th:nth-child(3),  table td:nth-child(3),
  table th:nth-child(6),  table td:nth-child(6),
  table th:nth-child(9),  table td:nth-child(9),
  table th:nth-child(10), table td:nth-child(10),
  table th:nth-child(11), table td:nth-child(11),
  table th:nth-child(12), table td:nth-child(12),
  table th:nth-child(14), table td:nth-child(14) {
    display: none;
  }
  /* 空态占位 colspan 现在是 15 */
  .empty-row td { text-align: center; }
}

/* 极小屏（iPhone SE 竖屏） */
@media (max-width: 380px) {
  #statbar { grid-template-columns: 1fr; }
  h1 { font-size: 18px; }
  th, td { padding: 8px 10px; font-size: 12px; }
}

/* 权限芯片（首页列 + OPS） */
.perm-cell { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.perm-chip {
  display: inline-block;
  font-size: 10px;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.perm-chip.perm-on {
  color: #0b7a3b;
  background: rgba(52, 199, 89, 0.16);
  border-color: rgba(52, 199, 89, 0.35);
}
.perm-chip.perm-off {
  color: #8e8e93;
  background: rgba(142, 142, 147, 0.12);
  border-color: rgba(142, 142, 147, 0.25);
}
.perm-chip.perm-done {
  color: #0055d4;
  background: rgba(0, 122, 255, 0.14);
  border-color: rgba(0, 122, 255, 0.3);
  font-weight: 600;
}
.ops-devfield-wide b { display: block; margin-top: 4px; }