/* 序列号：CSS叶-11~19（本文件住九个叶子，号按文件里先后的排）
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 常用件
   大白话：全站通用的"小件长相"叶子家族：三种按钮、输入框、点选小标签、白卡片、提示气泡、
           面板里的说明小字。都是最小单位 —— 不组合谁、就靠 CSS 变量和基础选择器立身，
           谁都能直接挂类名用。原先的"顶栏"是从这儿分出去的枝干（CSS枝-36，去 商城枝干\顶栏.css 找）。
           2026-09-24 从系0大杂烩 样式.css 里把这些叶子请回叶子层，并按死规矩重新编号。
           号码段死规矩（两系统合库后立）：商城 CSS 叶子占 CSS叶-01~19、枝干占 CSS枝-36~79；
           角色：叶子
           合成 CSS 占 原-20~31、分-20~35（成熟老系统，一个号都不许动）—— 两边互不越段。 */

/* 序列号：CSS叶-11 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,11)
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 天蓝实心按钮
   大白话：全站最常用的主按钮。干什么：通栏宽、天蓝底白字、14px 内边距、8px 圆角，按下去稍微变暗。
           什么时候用：一页上最想让人点的那个动作（确认、开张、发出去）用它，一页别超过一个主按钮。 */
.天蓝按钮 {
  display: block; width: 100%; padding: 14px;
  background: var(--天蓝, #00A4EF); color: #fff;
  border: none; border-radius: 8px;
  font-size: 17px; text-align: center; cursor: pointer;
}
.天蓝按钮:active { opacity: .88; }

/* 序列号：CSS叶-12 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,12)
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 浅蓝按钮
   大白话：次要按钮。干什么：通栏宽、浅蓝底 #d8efff 深蓝字，样子比主按钮淡一档。
           什么时候用：页面上排第二位的动作（保存、再看看）用它，跟天蓝主按钮岔开层次。 */
.浅蓝按钮 {
  display: block; width: 100%; padding: 14px;
  background: var(--天蓝浅, #d8efff); color: var(--深蓝, #1565C0);
  border: none; border-radius: 8px;
  font-size: 17px; text-align: center; cursor: pointer;
}

/* 序列号：CSS叶-13 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,13)
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 白底描边按钮
   大白话：再次一级的按钮（白底描边按钮）：白底、天蓝字、
           天蓝描边。干什么：跟实心蓝的主钮拉开档次。
           什么时候用：注册、取消这种「不想太抢眼、
           但又得像个按钮」的地方用它。
           效果：一屏里主次分明，重要的钮跳出来、
           次要的钮不抢戏。 */
.白底按钮 {
  display: block; width: 100%; padding: 14px;
  background: #fff; color: var(--天蓝, #00A4EF);
  border: 1px solid var(--天蓝, #00A4EF); border-radius: 8px;
  font-size: 17px; text-align: center; cursor: pointer;
}

/* 序列号：CSS叶-14 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,14)
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 通用输入框
   大白话：表单里打字的输入框。干什么：通栏宽、灰底 #f9f9f9、浅灰边、圆角 6px。
           什么时候用：任何要用户往里打字的地方（店名、电话、账号密码）都用它，别自己另写输入框样式。 */
.输入框 {
  width: 100%; padding: 13px;
  border: 1px solid #ddd; border-radius: 6px;
  font-size: 16px; background: #f9f9f9;
  font-family: inherit;
}

/* 序列号：CSS叶-15 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,15)
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 选择小标签
   大白话：一排能点的小圆格（选地区、选分类用的）。干什么：浅蓝底深蓝字、胶囊圆角；被选中的那个（.on）变天蓝底白字。
           什么时候用：要给一堆选项铺成一排点选小格时用它；配 小格.js（JS枝-02，小格.造）用正好。 */
.小标签 {
  display: inline-block; padding: 8px 14px; margin: 4px;
  background: #e8f7ff; color: var(--深蓝, #1565C0);
  border: 1px solid #b3d9f2; border-radius: 16px;
  font-size: 14px; cursor: pointer;
}
.小标签.on { background: var(--天蓝, #00A4EF); color: #fff; border-color: var(--天蓝, #00A4EF); }

/* 序列号：CSS叶-16 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,16)
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 白卡片
   大白话：商品卡、留言卡那种标准白卡片。干什么：白底、8px 圆角、内边距 14px、上下留白、淡阴影——一眼一块内容。
           什么时候用：要铺一条/一块独立内容（一件货、一条留言、一家店）时用它。 */
.白卡片 {
  background: #fff; border-radius: 8px;
  padding: 14px; margin: 10px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* 序列号：CSS叶-17 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,17)
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 提示气泡
   大白话：屏幕底下弹一句黑底白字小话（"已经发给店主了"那种）。干什么：固定趴在底下中间、
           圆胶囊、平时透明看不见、挂上 .show 就淡入。什么时候用：提示叶子（基础工具.js 的 提示）画它，
           业务别自己造提示框。 */
#toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%);
  background: #333; color: #fff; padding: 10px 18px; border-radius: 20px;
  /* 2026-10-14 老板报的"提示看不见"：动态浮层（选地区那张纸等）的层号是从 9600 往上发的，
     这句提示原来才 99，被压在纸底下。提到 100000（比 AI 浮层 99999 还高）—— 提示就该在最上头。 */
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 100000;
}
#toast.show { opacity: 1; }
/* 2026-10-14 老板要的"醒目一点、红字、大两号"：给拦人的那句提示用（挂 .重）。白底红字、字号 14→18、加粗。 */
#toast.重 { background: #fff; color: #C62828; font-size: 18px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(198,40,40,.35); }

/* 序列号：CSS叶-18 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,18)
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 面板小标题
   大白话：面板里那种灰小标题（"川渝 · 选市"）。干什么：13px 灰字、底下留一点缝。
           什么时候用：一张面板里要分小块、给小块起头时用它。 */
.面板小标题 { font-size: 13px; color: #666; margin-bottom: 6px; }

/* 序列号：CSS叶-19 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,19)
   地址：树库/CSS树库/商城/系0/枝干/叶子/常用件.css → 面板说明
   大白话：面板里那几行说明话。干什么：14px 深灰、行距 1.8，上下留白。
           什么时候用：要跟人解释"这张纸是干嘛的"时用它，别用正文大字。 */

/* 2026-10-21 老板定的通规：按钮上的数字（几条/几封/几件）别拼进字里，改成右上角一颗小白角标。
   谁的按钮要带数字，就给那个元素加 class="数角标"、再挂 data-数="N"；字永远一行、按钮不会被顶大。 */
.数角标 { position: relative; }
.数角标[data-数]::after {
  content: attr(data-数);
  position: absolute; top: 2px; right: 4px;
  min-width: 16px; padding: 0 4px; border-radius: 8px;
  background: #fff; color: #C62828; font-size: 11px; line-height: 16px; font-weight: 700; text-align: center;
}
.面板说明 { font-size: 14px; color: #555; line-height: 1.8; margin: 6px 0 10px; }