/* ============================================================
   串口终端 · 移动端原型
   设计稿来源：Ardot 画布「串口调试助手 · 移动端」
   画布基准尺寸 390 × 844 (iOS 逻辑像素)
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 表面层级：越靠上的层级颜色越亮 */
  --bg:            #121212;   /* 页面底 */
  --surface:       #181818;   /* 卡片 */
  --surface-mid:   #1f1f1f;   /* 交互面 / 分段控件底 */
  --surface-hi:    #252525;   /* 内嵌标签 / 分隔区 */
  --surface-hi-2:  #2a2a2a;   /* 小按钮 */
  --track:         #3a3a3a;   /* 开关轨道（关） */
  --knob:          #8a8a8a;   /* 开关滑块（关） */

  /* 文字 */
  --text:          #ffffff;
  --text-2:        #cbcbcb;
  --text-3:        #b3b3b3;
  --text-4:        #7c7c7c;

  /* 强调色：仅用于连接态 / 主操作 / 发送 */
  --accent:        #1ed760;
  --on-accent:     #0b1f10;

  /* 语义色：收发方向与系统提示 */
  --rx:            #539df5;
  --sys:           #ffa42b;
  --warn:          #ffa42b;

  /* 圆角 */
  --r-card:        14px;
  --r-input:       12px;
  --r-pill:        9999px;
  --r-seg:         18px;
  --r-tag:         4px;
  --r-tab:         32px;
  --r-tabbar:      36px;

  /* 间距 */
  --gutter:        16px;   /* 页面左右留白 */
  --gap:           12px;   /* 内容区主间距 */

  --font-cn: "Noto Sans SC", -apple-system, "PingFang SC", sans-serif;
  --font-num: "Inter", ui-monospace, SFMono-Regular, monospace;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #0a0a0a;
  font-family: var(--font-cn);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 32px;
}

/* ---------- 手机外框 ---------- */
.device {
  width: 390px;
  height: 844px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 40px;
  overflow: hidden;
  box-shadow:
    0 0 0 10px #1c1c1c,
    0 0 0 12px #2e2e2e,
    0 30px 70px rgba(0, 0, 0, 0.65);
}

/* ---------- 状态栏：62px，OS 控制区域 ---------- */
.statusbar {
  height: 62px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 28px;
  background: var(--bg);
}
.statusbar__time {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.statusbar__icons { width: 74px; height: 14px; }

/* ---------- 导航栏：54px ---------- */
.navbar {
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bg);
}
.navbar__group { display: flex; flex-direction: column; gap: 1px; }
.navbar__left   { display: flex; align-items: center; gap: 8px; }

.navbar__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.navbar__sub {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-3);
}
.navbar__sub--cn { font-family: var(--font-cn); }

/* 圆形图标按钮 */
.iconbtn {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-mid);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}
.iconbtn:hover { background: var(--surface-hi); }
.iconbtn--sm { width: 34px; height: 34px; }
.iconbtn svg { display: block; }

/* 药丸按钮（导航栏右侧） */
.pillbtn {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: var(--surface-mid);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text);
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pillbtn:hover { background: var(--surface-hi); }
.pillbtn--accent {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.pillbtn--accent:hover { background: #29e26c; }

/* ---------- 内容区 ---------- */
.body {
  position: relative;   /* 下拉浮层的定位上下文 */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 4px var(--gutter) 12px;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 12px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}
.card__headleft { display: flex; align-items: center; gap: 6px; }
.card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.card__meta {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-4);
}

.ghostbtn {
  height: 26px;
  padding: 0 10px;
  background: var(--surface-hi-2);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text-3);
  font-family: var(--font-cn);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ghostbtn:hover { background: #333; color: var(--text-2); }
.ghostbtn:disabled { opacity: .45; cursor: not-allowed; }

/* 设备卡右上角操作组：添加 + 刷新 */
.card__actions { display: flex; align-items: center; gap: 6px; }
.card__actions .ghostbtn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
}
.card__note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-4);
  margin-top: -2px;
}

/* ---------- 端口下拉 ---------- */
.port {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  background: var(--surface-mid);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  cursor: pointer;
  transition: border-color .15s;
}
.port:hover { border-color: #333; }
.port.is-open { border-color: var(--accent); }

.port__left { display: flex; align-items: center; gap: 8px; min-width: 0; }

.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--text-4);
}
.dot--live { background: var(--accent); }

.port__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.port__chip {
  flex: none;
  height: 18px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  background: var(--surface-hi-2);
  border-radius: var(--r-tag);
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
}

/* ---------- 下拉选择浮层（设置页 / 主界面端口共用） ---------- */
.picker {
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: 30;
  max-height: 216px;
  overflow-y: auto;
  background: var(--surface-mid);
  border: 1px solid #333;
  border-radius: var(--r-input);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  padding: 5px;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
.picker[hidden] { display: none; }
.picker::-webkit-scrollbar { width: 4px; }
.picker::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

.picker__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-cn);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.picker__item:hover { background: var(--surface-hi); }
.picker__item.is-active {
  background: rgba(30, 215, 96, .12);
  color: var(--accent);
  font-weight: 600;
}
.picker__label {
  flex: 1;
  font-family: var(--font-num);
  white-space: nowrap;
}
.picker__item.is-active .picker__label { font-weight: 700; }
.picker__sub {
  flex: none;
  padding: 2px 6px;
  background: var(--surface-hi-2);
  border-radius: 4px;
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
}
.picker__check { flex: none; display: flex; }
.picker__empty {
  padding: 16px 10px;
  color: var(--text-4);
  font-size: 12px;
  text-align: center;
}

/* 可点击的设置行 */
.row--tap { cursor: pointer; transition: background .15s; }
.row--tap:hover { background: var(--surface-mid); }
.row--tap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- 参数摘要标签 ---------- */
.chips { display: flex; align-items: center; gap: 6px; }
.chip {
  height: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  background: var(--surface-hi);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.chip--num { font-family: var(--font-num); }

/* ---------- 主操作按钮 ---------- */
.cta {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .15s;
}
.cta:hover { background: #29e26c; }
.cta:disabled {
  background: var(--surface-hi);
  color: var(--text-4);
  cursor: not-allowed;
}
.cta--close {
  background: #2b1b1e;
  color: #f3727f;
}
.cta--close:hover { background: #3a2327; }

/* ---------- 分段切换（ASCII / HEX） ---------- */
.segment {
  height: 44px;
  flex: none;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-mid);
  border-radius: 22px;
}
.segment--lg { height: 38px; border-radius: 19px; }

.segment__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-seg);
  color: var(--text-3);
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.segment--lg .segment__btn { border-radius: 15px; font-size: 12px; letter-spacing: .5px; }
.segment__btn.is-active {
  background: var(--text);
  color: var(--bg);
}
.segment--sm .segment__btn { border-radius: 6px; font-size: 13px; letter-spacing: 0; }

/* ---------- 迷你分段：用于显示格式切换 ---------- */
.miniseg {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: #0d0d0d;
  border-radius: 9px;
}
.miniseg__btn {
  height: 22px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.miniseg__btn:hover { color: var(--text-2); }
.miniseg__btn.is-active {
  background: var(--surface-hi);
  color: var(--text);
}
.miniseg--lg .miniseg__btn { height: 26px; padding: 0 12px; font-size: 11px; }

/* 日志标题栏右组：显示格式 + 清空 */
.card__headright { display: flex; align-items: center; gap: 8px; }
.miniseg__cap { font-size: 12px; font-weight: 500; color: var(--text-3); flex: none; }

/* 日志页顶部：筛选 + 显示格式 */
.logbar { display: flex; gap: 8px; align-items: center; flex: none; }
.logbar > .segment { flex: 1; }

/* 发送格式行 */
.sendfmt {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sendfmt__label { font-size: 12px; font-weight: 500; color: var(--text-3); flex: none; }
.sendfmt > .segment { flex: 1; max-width: 180px; }

/* ---------- 日志区 ---------- */
.logbox {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
}
.logbox__head {
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 12px;
  background: var(--surface-mid);
}
.logbox__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.logbox__list::-webkit-scrollbar { width: 4px; }
.logbox__list::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.logline { display: flex; flex-direction: column; gap: 3px; }
.logline__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-4);
}
.logline__meta--tx { color: var(--accent); }
.logline__meta--rx { color: var(--rx); }
.logline__meta--sys { color: var(--sys); }

.logline__data {
  font-family: var(--font-num);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-all;
  white-space: pre-wrap;
}
.logline__data--cn { font-family: var(--font-cn); color: var(--text-3); }

/* 方向徽标（日志页） */
.tag {
  height: 16px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  border-radius: var(--r-tag);
  font-family: var(--font-num);
  font-size: 9px;
  font-weight: 700;
}
.tag--tx { background: var(--accent); color: var(--on-accent); }
.tag--rx { background: var(--rx);     color: var(--on-accent); }
.tag--sys{ background: var(--sys);    color: #3a2400; }

.tag--len {
  background: var(--surface-hi);
  color: var(--text-4);
  font-weight: 600;
}

/* 日志条目（日志页卡片式） */
.entry { display: flex; flex-direction: column; gap: 5px; }
.entry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.entry__left { display: flex; align-items: center; gap: 6px; }

/* ---------- 统计条 ---------- */
.stats { display: flex; gap: 8px; }
.stat {
  flex: 1;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--surface);
  border-radius: var(--r-input);
}
.stat__num {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.stat__label { font-size: 10px; color: var(--text-4); }

/* ---------- 开关组 ---------- */
.switches { display: flex; gap: 8px; align-items: center; flex: none; }
.switchrow {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 12px;
  background: var(--surface);
  border-radius: 20px;
}
.switchrow__label { font-size: 12px; font-weight: 500; color: var(--text-3); }

.toggle {
  width: 40px;
  height: 24px;
  flex: none;
  padding: 3px;
  display: flex;
  background: var(--track);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background .18s;
}
.toggle__knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--knob);
  transition: transform .18s, background .18s;
}
.toggle.is-on { background: var(--accent); }
.toggle.is-on .toggle__knob {
  transform: translateX(16px);
  background: var(--on-accent);
}

/* ---------- 发送输入 ---------- */
.compose {
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 5px 0 14px;
  background: var(--surface-mid);
  border-radius: 23px;
}
.compose__field { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.compose__input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 500;
}
.compose__input::placeholder { color: var(--text-4); }
.compose__hint { font-size: 10px; color: var(--text-4); }

.sendbtn {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}
.sendbtn:hover { background: #29e26c; }
.sendbtn:disabled { background: var(--surface-hi); cursor: not-allowed; }
.sendbtn:disabled svg { opacity: .35; }

/* ---------- 设置页：分组 + 设置行 ---------- */
.group {
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
}
.group__title {
  padding: 12px 14px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text-4);
}
.group__body { padding: 0; }

.row {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
}
.row + .row { border-top: 1px solid var(--surface-hi); }
.row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row__label { font-size: 14px; font-weight: 500; color: var(--text); }
.row__hint { font-size: 10px; color: var(--text-4); }
.row__value {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.row__num {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.row__val-cn { font-size: 14px; font-weight: 700; color: var(--accent); }
.row__chev { display: block; flex: none; }

/* 行内小分段控件 */
.segmini {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-mid);
  border-radius: 8px;
}
.segmini__btn {
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-3);
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.segmini__btn.is-active {
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
}
.segmini__btn:disabled { color: #555; cursor: not-allowed; }

/* 配置预览卡 */
.preview { gap: 8px; }
.preview__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text-4);
}
.preview__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.preview__note { font-size: 11px; color: var(--text-4); }

/* ---------- 空状态 ---------- */
.empty {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 28px 56px;
  background: var(--surface);
  border-radius: var(--r-card);
  text-align: center;
}
.empty__art {
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-mid);
  border-radius: 50%;
}
.empty__title { font-size: 17px; font-weight: 700; color: var(--text); }
.empty__desc {
  font-size: 13px;
  line-height: 22px;
  color: var(--text-3);
  white-space: pre-line;
}
.empty__hint {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 164, 43, .09);
  font-size: 12px;
  line-height: 1.7;
  color: #d9a45c;
  text-align: left;
}
.empty__demo {
  align-self: center;
  height: 36px;
  padding: 0 16px;
}

/* ---------- 底部标签栏 ---------- */
.tabbar {
  height: 101px;
  flex: none;
  padding: 12px var(--gutter) 21px;
  background: var(--bg);
}
.tabbar__pill {
  height: 62px;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border-radius: var(--r-tabbar);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: 0;
  border-radius: var(--r-tab);
  color: var(--text-3);
  cursor: pointer;
  transition: background .15s;
}
.tab:hover:not(.is-active) { background: var(--surface-mid); }
.tab.is-active { background: var(--accent); color: var(--on-accent); }
.tab__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .5px;
}
.tab.is-active .tab__label { font-weight: 600; }

/* ---------- 桌面侧边说明 ---------- */
.meta { max-width: 300px; color: #8a8a8a; }
.meta__title { font-size: 24px; font-weight: 700; color: #fff; }
.meta__sub { font-family: var(--font-num); font-size: 13px; margin-top: 4px; }
.meta__list {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meta__list li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.meta__list b { color: #cbcbcb; font-weight: 600; flex: none; }
.meta__note {
  margin-top: 20px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: rgba(30, 215, 96, .06);
  font-size: 12px;
  line-height: 1.6;
  color: #7f9f8a;
}

/* ---------- 小屏适配：手机全屏展示 ---------- */
@media (max-width: 900px) {
  .stage { padding: 0; gap: 0; }
  .meta { display: none; }
  .device {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .statusbar { display: none; }
  .navbar { padding-top: 8px; height: 62px; }
}

/* 触摸设备：去掉依赖 hover 的反馈，改为按压态 */
@media (pointer: coarse) {
  .iconbtn:hover,
  .pillbtn:hover,
  .ghostbtn:hover,
  .cta:hover,
  .tab:hover:not(.is-active),
  .port:hover,
  .row--tap:hover,
  .picker__item:hover,
  .segment__btn:hover {
    background: revert;
  }
  .iconbtn:hover { background: var(--surface-mid); }
  .pillbtn:hover { background: var(--surface-mid); }
  .pillbtn--accent:hover { background: var(--accent); }
  .ghostbtn:hover { background: var(--surface-hi-2); }
  .cta:hover { background: var(--accent); }
  .cta--close:hover { background: #2b1b1e; }
  .tab:hover:not(.is-active) { background: transparent; }
  .port:hover { border-color: transparent; }
  .port.is-open:hover { border-color: var(--accent); }
  .row--tap:hover { background: transparent; }
  .picker__item:hover { background: transparent; }
  .segment__btn:hover { background: transparent; }
  .segment__btn.is-active:hover { background: var(--text); }
  /* 触摸目标不小于 44px */
  .picker__item { padding: 13px 10px; }
}

/* 软键盘弹起时压缩日志区，保证输入框与发送按钮可见 */
@media (max-height: 620px) {
  .logbox { min-height: 88px; }
  .empty { padding-top: 24px; padding-bottom: 20px; }
  .empty__art { width: 76px; height: 76px; }
}