/* ============================================================================
   平板 / 中屏样式（769px–1024px）—— 独立文件，按屏幕尺寸条件加载
   ----------------------------------------------------------------------------
   这段区间通常是横屏平板或紧凑笔记本：侧边栏仍常驻、编辑区仍左右 50/50，
   只做「更紧凑的间距 + 首页更多列 + 字号微调」，让中屏不至于太空也不挤。
   同样用 !important 压过组件 scoped 桌面样式，和 mobile.css 互不干扰。
   ============================================================================ */

.app-header { padding: 0 14px !important; }
.main { padding: 12px 14px !important; }

/* 首页：网格更密，中屏排 3~4 列 */
.card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 12px !important; }
.hero h1 { font-size: 24px !important; }

/* 工具页：标题/工具栏略缩，卡片圆角更现代 */
.tool-title { font-size: 18px !important; }
.tool-page { gap: 10px !important; }
.toolbar { gap: 8px !important; }
.editor-card { border-radius: 10px !important; }

/* 平板侧边栏常驻（占 ~240px），主区变窄；动作容器必须整行换行并允许收缩，
   否则右对齐的 toolbar-actions 内容宽于主区会被裁出视口（834px 实测溢出 57px）。 */
.tool-header { flex-wrap: wrap !important; }
.header-actions { flex: 1 1 100% !important; justify-content: flex-start !important; flex-wrap: wrap !important; }
.toolbar-actions { flex: 1 1 100% !important; margin-left: 0 !important; justify-content: flex-start !important; flex-wrap: wrap !important; }
.fields-wrap { flex: 1 1 100% !important; min-width: 100% !important; }

/* 编辑区：中屏保持左右分栏，但卡片头略紧凑 */
.card-header { padding: 6px 12px !important; font-size: 12.5px !important; }

/* 输入卡标题栏（主输入区 / 第二输入）同样中招：中屏侧边栏常驻 + 编辑区左右 50/50，
   标题栏只剩 ~270px，而桌面规则「按钮组禁止换行」是按宽屏定的，
   5 个控件（生成样例 / 粘贴 / 清空 / 最大化 / 记住输入）要 320px → 直接溢出卡片右边界
   （820px 实测 +71px，控件飘在卡片外面）。中屏放开：允许收缩、允许换行，
   宁可标题栏变两行，也不能把控件挤出卡片。 */
.input-header { flex-wrap: wrap !important; }
.input-header .card-header-actions { flex: 1 1 auto !important; flex-wrap: wrap !important; }

/* 下拉菜单在中屏不溢出 */
.split-menu, .send-menu, .combo-menu { max-width: calc(100vw - 32px) !important; }

/* 弹窗：中屏略放宽，KV 表格保留可读最小宽 */
.modal { max-width: 560px !important; }
.kv-row { grid-template-columns: 26px minmax(120px, 1fr) minmax(140px, 1.3fr) 26px !important; }