/* ========================================
   Apps CSS - APP 图标网格 & DOCK 栏样式
   ins高级感 · 纯白系 · 精致图标
   所有魔法数字已替换为 variables.css 变量
   ======================================== */

/* ======== APP 图标网格区域 ======== */
.app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-icon-gap);
  flex: 1;
  min-width: 0;
  justify-items: center;
  align-content: center;
}

/* ---- 单个 APP 图标项 ---- */
.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.app-item:hover {
  transform: scale(1.06);
}

.app-item:active {
  transform: scale(0.95);
}

/* APP 图标容器 */
.app-item__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--radius-icon);
  background: var(--color-card-bg);
  box-shadow: var(--shadow-soft), var(--shadow-icon-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* 图标轻拟物高光 */
.app-item__icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    var(--color-highlight-start) 0%,
    var(--color-highlight-end) 100%
  );
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}

.app-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: var(--z-content);
}

/* SVG 占位图标尺寸 */
.app-item__icon svg {
  width: var(--icon-inner);
  height: var(--icon-inner);
  position: relative;
  z-index: var(--z-content);
}

/* APP 名称 */
.app-item__name {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-light);
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 1.2;
}


/* ======== DOCK 栏（iOS 风格整体毛玻璃底座） ======== */
.dock-bar {
  flex-shrink: 0;
  z-index: var(--z-dock);
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-dock-gap);

  padding: 14px var(--spacing-dock);
  margin: 0 var(--spacing-page) 2px;

  /* 整体毛玻璃底座 */
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-dock);
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.04),
              0 0 0 0.5px rgba(0, 0, 0, 0.02);
}

/* ---- DOCK 单个图标 ---- */
.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.dock-item:hover {
  transform: scale(1.12);
}

.dock-item:active {
  transform: scale(0.92);
}

/* DOCK 图标容器（iOS 风格：无独立方框背景） */
.dock-item__icon {
  width: var(--icon-dock-size);
  height: var(--icon-dock-size);
  border-radius: var(--radius-icon);
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* DOCK 图标无高光（去掉独立方框的拟物高光） */
.dock-item__icon::after {
  display: none;
}

.dock-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: var(--z-content);
  border-radius: var(--radius-icon);
}

/* DOCK SVG 占位图标尺寸 */
.dock-item__icon svg {
  width: var(--icon-dock-inner);
  height: var(--icon-dock-inner);
  position: relative;
  z-index: var(--z-content);
}

/* DOCK 名称 - 隐藏 */
.dock-item__name {
  display: none;
}

/* ---- 底部 Home Indicator 模拟 ---- */
.home-indicator {
  width: var(--indicator-width);
  height: var(--indicator-height);
  background: var(--color-text-light);
  border-radius: var(--radius-indicator);
  margin: 2px auto var(--spacing-xs);
  opacity: 0.4;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-content);
}