@charset "utf-8";
/* ============================================================
   laytips.css · 状态提示弹窗（dashboard/view/tips.html）
   取色依据 docs/brand_h5_colors.html（H5 标准色板 v2.9）
   棕金国风：宣纸天光底 + 白卡片 + 鎏金/苔绿/暖红状态图标
   作用域：仅 .tipsPanel / .lyt-crumb，不污染其它页面
   ============================================================ */

:root{
  --brown:#8b5a2b;
  --brown-deep:#6E4420;
  --brown-soft:#A06B35;
  --gold:#C4913F;
  --gold-deep:#A87A2E;
  --gold-bright:#F0CF8E;
  --gold-light:#DFB46E;
  --gold-bg:#F8EFDA;
  --paper:#FAF4E6;
  --card:#FFFFFF;
  --line:#EEE3CA;
  --text:#3D2C22;
  --text-sub:#87704F;
  --moss:#5F7449;
  --moss-bg:#F0F4EB;
  --moss-line:#DCE4D0;
  --gray:#9E9E9E;
  --req:#C0562E;
  --shadow-card:0 3px 12px rgba(150,110,50,.07);
  --shadow-pop:0 10px 34px rgba(150,110,50,.14);
}

*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,body{margin:0;padding:0}

body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  background:linear-gradient(180deg,#F8EFDA 0%,#FAF4E6 42%,#F3E9D2 100%);
  min-height:100vh;
}

/* ========== 顶部面包屑（origin=course 时） ========== */
.lyt-crumb{padding:14px 16px 0}
.lyt-crumb .layui-breadcrumb a,
.lyt-crumb .layui-breadcrumb cite{font-size:13px}
.lyt-crumb .layui-breadcrumb a{color:var(--text-sub)}
.lyt-crumb .layui-breadcrumb a:hover{color:var(--gold-deep)}
.lyt-crumb .layui-breadcrumb cite{color:var(--brown-deep);font-style:normal}

/* ========== 提示主体：整页居中 ========== */
.tipsPanel{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  min-height:100vh;
  padding:28px 18px;
}

/* 有面包屑时上移，避免整屏过低 */
.lyt-crumb + .tipsPanel{min-height:calc(100vh - 46px);padding-top:8px}

/* ========== 白卡片 ========== */
.tp-card{
  position:relative;
  width:100%;
  max-width:380px;
  background:var(--card);
  border-radius:20px;
  padding:42px 28px 32px;
  text-align:center;
  border:1px solid var(--line);
  -webkit-box-shadow:var(--shadow-pop);
  box-shadow:var(--shadow-pop);
  overflow:hidden;
}

/* 卡片顶部鎏金细条点缀 */
.tp-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
}

/* ========== 圆形状态图标 ========== */
.tp-icon{
  width:92px;
  height:92px;
  margin:0 auto 22px;
  border-radius:50%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-shadow:inset 0 2px 6px rgba(255,255,255,.7);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.7);
}

.tp-icon .layui-icon{font-size:46px;line-height:1}

/* 默认 / 微笑：鎏金 */
.tp-icon.tp-smile{
  background:radial-gradient(circle at 50% 38%,#FBEFCF,#F2E2BC);
  border:1.5px solid var(--gold-light);
}
.tp-icon.tp-smile .layui-icon{color:var(--gold-deep)}

/* 成功：苔绿 */
.tp-icon.tp-success{
  background:radial-gradient(circle at 50% 38%,#EFF5E6,#DCE4D0);
  border:1.5px solid var(--moss-line);
}
.tp-icon.tp-success .layui-icon{color:var(--moss)}

/* 失败/哭泣：暖红 */
.tp-icon.tp-cry{
  background:radial-gradient(circle at 50% 38%,#FBEDE8,#F4D9CF);
  border:1.5px solid #ECCBBE;
}
.tp-icon.tp-cry .layui-icon{color:#B4553C}

/* ========== 文案 ========== */
.tp-name{
  margin:0 0 28px;
  font-size:17px;
  font-weight:700;
  color:var(--brown-deep);
  line-height:1.7;
  word-break:break-all;
}

/* ========== 返回按钮（浅金次操作） ========== */
.tp-back{
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  gap:6px;
  min-width:172px;
  height:44px;
  padding:0 28px;
  border-radius:22px;
  border:1.5px solid var(--gold);
  background:linear-gradient(135deg,#FBF3DF,#F2E4C0);
  color:var(--brown);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  -webkit-transition:all .18s;
  transition:all .18s;
}

.tp-back .layui-icon{font-size:16px}

.tp-back:hover{
  border-color:var(--gold-deep);
  color:var(--gold-deep);
}

.tp-back:active{
  background:#F2E4C0;
  -webkit-transform:translateY(1px);
  transform:translateY(1px);
}

/* ========== 响应式 ========== */
@media(max-width:480px){
  .tipsPanel{padding:22px 16px}
  .tp-card{padding:36px 22px 28px;border-radius:18px}
  .tp-icon{width:82px;height:82px;margin-bottom:20px}
  .tp-icon .layui-icon{font-size:42px}
  .tp-name{font-size:16px;margin-bottom:24px}
}

/* ========== 打印 ========== */
@media print{
  body{background:#fff}
  .tp-back{display:none}
  .tp-card{box-shadow:none;border-color:#ccc}
}