/*main.css提供站点全局样式，位于根目录*/

/*本程序的设计原则决定了CSS的设计原则，页面由页头（品牌卡片+令牌卡片+nav卡片）+ 内容（N个卡片）+ 页脚构成（跑马灯卡片+sitefooter卡片），其中页头、页脚全站统一，而卡片则是具备特定功能的独立区域，一方面所有卡片遵循基本的设计语言，一方面每个卡片具备独特的功能和形式*/
/*CSS包括main.css和不同卡片的自己的卡片级的CSS，main.css提供全局基础样式*/
/*全局基础样式：几乎所有页面都会使用的样式*/
/*例如：:root, *, body， header, footer, a，ul*/
/*全局常见组件样式：卡片、表格、导航链接，模态窗，菜单按钮，图片，*/

/* ===== 全局基础样式 ===== */
:root {
  --primary-bg:#FFF;/*#ffedde;#f4f6f8*/
  --color-gray: #666; /*文字缺省情况下使用某种深灰色*/
  --color-blue: #06c; /*蓝色文字，一般用于卡片的标题*/
  --major-div-bg: #f6f3ec;/*#f6f3ec;/*#e8f4f8;/*卡片缺省时的底色，*/
  --lovely-deeper-bg: #ffece4;/*可爱的黄色*/
  --lovely-div-bg: #fff9f5; /*可爱的淡黄色*/
  --lovely-green: #dce8e0; /*可爱的柔和绿色*/
  --small-div-bg: #fff2f2;
  --headerfooterbutton-bg: #eee;/*#e7e3d9;/*克制的色彩选择：页头、页脚、按钮使用灰色底*/
  --border-radius-big: 20px; /*大圆角*/
  --border-radius-normal: 16px; /*大圆角*/
  --border-radius-small: 12px;/*克制的设计：矩形四角略有弧度*/  
  --bar-height: 400px;
  --font-heavy: 36px;
  --font-big: 18px;
  --font-normal: 14px;
  --font-small: 12px;
  --gap-big: 16px; /*大间隔*/
  --gap-normal: 10px;  /*普通间隔*/
  --gap-small: 6px;/*小间隔*/
  --body-bg: #eee;
  --card-bg: #f6f3ec;
  --text-main: #666;
  --text-sub: #888;
  --brand-blue: #06c;
  --yellow-light: #ffece4;
  --yellow-lighter: #fff9f5;
  --pink-light: #fff2f2;
  --border-light: #eee;
  --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* 卡片底色循环 */
.tone-1 { background: #f6f3ec; }
.tone-2 { background: #f0ecff; }  /* 淡紫 */
.tone-3 { background: #fff7d5; }  /* 淡黄 */
.tone-4 { background: #e9fbf3; }  /* 淡绿 */






* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  max-width: 768px;
  margin: 10px auto;
  background: var(--primary-bg); 
  font-size: var(--font-normal);
  font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-family: "Microsoft YaHei", "Helvetica Neue",Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: var(--color-gray);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
}

a {color: inherit; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease;}
ul {padding-left: var(--gap-big);   /* 整个列表向右移，圆点也跟着移 */}

/* 卡片容器*/
.card { /*全站所有卡片都具有相同底色，都有一个10px的内距，和上下元素各有10PX的间隔，如果上面也是卡片，则一共20P间隔*/
    background: var(--major-div-bg);
    padding: var(--gap-normal);
    margin: var(--gap-normal) 0;
}

/* 卡片标题 */
.card__title {
    font-size: var(--font-big);
    color: var(--color-blue);
    padding: 0;
    width: 100%;
}

/* 卡片描述 */
.card__desc {
    font-size: var(--font-small);
    margin: var(--gap-normal) 0;
    padding: var(--gap-normal);
    background: var(--lovely-div-bg);
    /*border-radius: var(--border-radius-small);*/
    overflow-wrap: break-word;/*长句子可以换行*/
}

.card__content {
    padding: var(--gap-normal);
    margin: var(--gap-normal) 0;
    background-color: var(--primary-bg);
    border-radius: var(--border-radius-small);
}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-small);
  background: white;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
table th,
table td {
  word-break: break-word;
  padding: 4px;
  text-align: center;
  border: 1px solid #ddd; 

}

table th {
  background-color: #eee /* 表头灰色 */
}

table tr:hover {
    background-color: #a8f0e630; /* 浅蓝色背景，表示可交互 */
}


/* ============================================
   通用按钮组（btn-group是托盘 / btn指单个按钮）
   所有“横向排列的按钮状元素”的基础
   ============================================ */

/* ----- 托盘容器 ----- */

/*Flex托盘，有底色，按钮太多就换行，按钮宽度由按钮上的字串长度决定，按钮彼此有间距，换行产生行距，托盘有内距，直角矩形 */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-small);            /* 行间距、列间距都是6px,行间距由换行产生 */
    background: var(--lovely-div-bg);  /* 淡淡的底色，表示“这是一组” */
    padding: var(--gap-normal);
    border-radius: 0; /*托盘默认就是直角矩形，这样内部的按钮是圆角，托盘为直角*/
}

/*托盘的修饰类：调整其中一项属性，实现不同效果 */
.btn-group--space-between { justify-content: space-between; }  /* 托盘里的东西间距自动调整 */
.btn-group--stretch .btn { flex: 1; }                        /* 托盘里的按钮等宽拉伸 */
.btn-group--nowrap {flex-wrap: nowrap; overflow: hidden;}    /* 走马灯这种场景不需要换行（所以会有溢出），溢出时要隐藏 */
.btn-group--transparent {padding: 10px 0 ;background: transparent;}  /* 有些场景，在视觉上不需要一个托盘，我们使用这个透明修饰类， */

/*grid托盘，同一行里的按钮数量固定的，正常4列，窄屏2列。且间距统一。*/
.btn-group-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4列等宽 */
    gap: var(--gap-normal);  /* 间距统一 */
}


@media (max-width: 600px) { /*窄屏2列*/
    .btn-group-grid {
        grid-template-columns: repeat(2, 1fr);  /* 变成2列 */
    }
}



/* ----- 托盘里的按钮[无论怎样的托盘，按钮的基本样式都一致。托盘有布局的差评，按钮却没啥大的差异] ----- */

/*基础按钮 ----- 子项 ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--gap-normal) var(--gap-small);
    padding: 6px 12px;
    
    background: var(--headerfooterbutton-bg);
    border: none;
    border-radius: var(--border-radius-small);
    font-size: var(--font-small);
    color: var(--color-gray);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
    gap: 4px;
    font-family: inherit;
    
}

/* 悬停效果 */
.btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(176, 109, 0, 0.2);
}

/* 激活/选中状态 */
.btn.active {
    background: var(--lovely-green);
}

/* ----- 按钮修饰：尺寸 ----- */
.btn--sm {
    font-size: 0.7rem;
    padding: 4px 12px;
}

.btn--lg {
    font-size: 1rem;
    padding: 10px 24px;
}

/* ----- 按钮修饰：颜色 ----- */
.btn--primary {
    background: #1a73e8;
    color: #fff;
}
.btn--primary:hover {
    background: #1557b0;
}

.btn--danger {
    background: #e74c3c;
    color: #fff;
}
.btn--danger:hover {
    background: #c0392b;
}

.btn--success {
    background: #00b894;
    color: #fff;
}
.btn--success:hover {
    background: #009c7a;
}

.btn--add {
    background: var(--lovely-green);
    color: #3d4f47;
}
.btn--add:hover {
    background: #c8d6cd;
}

.btn--delete {
    background: #eedcdc;
    color: #4d3a3a;
}
.btn--delete:hover {
    background: #e2c8c8;
}

.btn--update {
    background: #dce3ea;
    color: #38454f;
}
.btn--update:hover {
    background: #c8d1da;
}

.btn--query {
    background: #f0e4d6;
    color: #4d4033;
}
.btn--query:hover {
    background: #e4d4c2;
}