/* ============================================================
   IJerrt 视觉统一层 (harmony.css)
   目标：把 drive / notes / roll / mark 的界面语言对齐 vmusic 基准
   基准规格（来自 vmusic.style.css）：
     · 顶栏图标按钮 40×40 / radius 12px
     · 主卡片 radius 22px，内边距 18–24px
     · 按钮 radius 14px，文字 14–15px
     · 输入框 radius 12–14px，高度 44px+
     · 主题弹层 radius 14px，色块 30px
     · 卡间间距 16px，区块内边距 16–24px
   本文件追加在各站 style.css 之后，用低特异度覆盖，不改动原逻辑。
   ============================================================ */

/* ---------- 1. 顶栏：统一图标按钮规格 ---------- */
.topbar .icon-btn,
.topbar #sideToggle,
.top-actions .icon-btn{
  width:40px;height:40px;border-radius:12px;
}
.top-actions{gap:8px;}
.topbar .icon-btn .i,
.topbar .icon-btn svg{width:18px;height:18px;}

/* 顶栏品牌图标统一 38px / radius 11px（与 vmusic 一致） */
.topbar .brand-icon{width:38px;height:38px;border-radius:11px;}

/* ---------- 2. 卡片/面板：统一大圆角 ---------- */
.glass-panel,.imp-panel,.card,.main-head,.storage-card{
  border-radius:var(--radius-xl);          /* 22px */
}
.storage-card{border-radius:var(--radius-lg);}  /* 侧栏小卡 16px */

/* ---------- 3. 按钮：统一圆角与触感 ---------- */
.btn{border-radius:14px;min-height:40px;}
.btn-sm{border-radius:11px;min-height:34px;}
.btn:active{transform:scale(.975);}

/* ---------- 4. 输入框：统一高度与圆角 ---------- */
.input,.input-glass{height:44px;border-radius:12px;font-size:14px;}
textarea.input,textarea.input-glass{height:auto;min-height:96px;padding:12px 14px;}

/* ---------- 5. 分段控件与标签 ---------- */
.seg{border-radius:13px;padding:4px;}
.seg button{border-radius:10px;min-height:34px;}

/* ---------- 6. 主题外观弹层：统一规格 ---------- */
.theme-pop{border-radius:14px;padding:14px;min-width:216px;box-shadow:var(--shadow-heavy);}
.tp-title{font-size:11px;letter-spacing:.04em;font-weight:600;color:var(--text3);padding:4px 4px;margin-top:6px;}
.tp-seg{border-radius:11px;padding:3px;gap:3px;margin-bottom:8px;}
.tp-seg button{border-radius:8px;padding:7px 10px;font-size:12.5px;}
.tp-swatches{gap:8px;padding:4px;}
.tp-swatches button{width:30px;height:30px;border-radius:50%;}

/* ---------- 7. 侧栏导航：统一圆角与间距 ---------- */
.sidebar-btn{border-radius:12px;padding:10px 12px;min-height:42px;}
.sidebar-label{font-size:11px;letter-spacing:.04em;font-weight:600;color:var(--text3);}
.sidebar-section{margin-bottom:14px;}

/* ---------- 8. 空状态：统一图标容器 ---------- */
.empty-icon,.empty-state .empty-ico{border-radius:20px;}

/* ---------- 9. 弹窗：统一圆角与内边距 ---------- */
.modal{border-radius:var(--radius-xl);}
.modal-close{border-radius:11px;}

/* ---------- 10. 移动端：统一安全区与触控目标 ---------- */
@media (max-width:1080px){
  .topbar .icon-btn,.topbar #sideToggle,.top-actions .icon-btn{
    width:40px;height:40px;border-radius:12px;      /* 触控目标不小于 40px */
  }
  .top-actions{gap:8px;}
}
@media (max-width:480px){
  .topbar{padding:10px 12px;gap:10px;}
  .top-actions{gap:7px;}
  .topbar .icon-btn,.topbar #sideToggle,.top-actions .icon-btn{
    width:40px;height:40px;
  }
  .btn{min-height:42px;}
  .input,.input-glass{height:46px;}                 /* 移动端输入框稍高，好点按 */
}
@media (max-width:360px){
  .topbar{padding:8px 10px;gap:8px;}
  .top-actions{gap:5px;}
  .brand-name{font-size:14.5px;}
  .brand-sub{font-size:10.5px;}
}

/* ---------- 11. 兼容：滚动条统一 ---------- */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{border-radius:6px;background:var(--tint-c);}
*::-webkit-scrollbar-track{background:transparent;}

/* ---------- 12. 降级动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .btn:active{transform:none;}
}