/* ==========================================================================
   潮码科技 · 课程预约 —— 基础样式（设计令牌 / 重置 / 通用组件）
   两端共用：H5 用户端 + 管理后台
   ========================================================================== */

:root{
  --primary:#FF6A00;
  --primary-lt:#FF8F3C;
  --primary-soft:#FFF2E8;
  --brand-grad:linear-gradient(135deg,#FF7A18 0%,#FF5A00 100%);

  --text-1:#1F2329;
  --text-2:#4E5969;
  --text-3:#86909C;
  --text-4:#C9CDD4;
  --line:#E5E6EB;
  --line-lt:#F0F1F4;
  --bg:#F5F6F8;
  --white:#fff;

  --admin-side:#2F4050;
  --admin-blue:#1E9FFF;
  --admin-bg:#F2F3F5;

  --green:#12A150;
  --red:#FF3B30;
  --danger:#F5222D;
  --warn:#FA8C16;
  --info:#2F6FED;
  --purple:#9254DE;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --sh-1:0 1px 3px rgba(16,24,40,.06);
  --sh-2:0 4px 14px rgba(16,24,40,.08);
  --sh-3:0 14px 34px rgba(16,24,40,.14);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;line-height:1.6;color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img{max-width:100%;display:block}
svg{display:block;flex-shrink:0}
table{border-collapse:collapse;width:100%}
[hidden]{display:none !important}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#D5D8DE;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#BFC4CC}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 通用按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 20px;border-radius:22px;font-size:14px;font-weight:600;
  transition:.18s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 5px 14px rgba(255,106,0,.28)}
.btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn-ghost{background:#F2F3F5;color:var(--text-2)}
.btn-danger{background:#FFF1F0;color:var(--danger);border:1px solid #FFCCC7}
.btn-block{display:flex;width:100%}
.btn-sm{height:30px;padding:0 14px;font-size:12px;border-radius:16px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- 标签 ---------- */
.chip{display:inline-flex;align-items:center;border-radius:5px;padding:2px 7px;
  font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap}
.chip-orange{background:#FFF1E6;color:#FF6A00}
.chip-green{background:#E8F8EF;color:var(--green)}
.chip-blue{background:#EAF2FF;color:var(--info)}
.chip-purple{background:#F3EDFF;color:#7C4DFF}
.chip-gray{background:#F2F3F5;color:var(--text-3)}
.chip-red{background:#FFF1F0;color:var(--danger)}

/* ---------- 卡片 ---------- */
.card{background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-1)}

/* ---------- 表单 ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:12.5px;color:var(--text-2);font-weight:500}
.field .req{color:var(--danger);margin-left:2px}
.input,.select,.textarea{
  width:100%;height:38px;padding:0 12px;border:1px solid #DCE0E5;border-radius:var(--r-sm);
  background:#fff;font-size:13.5px;color:var(--text-1);outline:none;transition:.16s;
}
.textarea{height:auto;min-height:86px;padding:10px 12px;resize:vertical;line-height:1.7}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,106,0,.1)}
.input::placeholder,.textarea::placeholder{color:#B7BEC7}
.input[readonly]{background:#F7F8FA;color:var(--text-3)}

/* ---------- 空状态 ---------- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 20px;gap:10px;color:var(--text-3);font-size:13px}
.empty svg{width:52px;height:52px;color:#D7DBE0}

/* ---------- 提示条 ---------- */
.toast{
  position:fixed;left:50%;bottom:80px;transform:translate(-50%,14px);
  background:rgba(20,22,26,.86);color:#fff;font-size:13px;padding:10px 22px;
  border-radius:22px;opacity:0;pointer-events:none;transition:.26s;z-index:9999;
  max-width:80vw;text-align:center;backdrop-filter:blur(6px);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 弹层 ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:900;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:.2s;
}
.overlay.show{opacity:1;pointer-events:auto}
.overlay .panel{
  background:#fff;border-radius:var(--r-lg);width:100%;max-width:520px;
  max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,.24);transform:translateY(12px);transition:.22s;
}
.overlay.show .panel{transform:none}
.overlay .panel-h{height:50px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;border-bottom:1px solid var(--line-lt);font-size:15px;font-weight:600;flex-shrink:0}
.overlay .panel-b{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.overlay .panel-f{height:60px;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:0 18px;border-top:1px solid var(--line-lt);flex-shrink:0}
.icon-close{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--text-3)}
.icon-close:hover{background:#F2F3F5;color:var(--text-1)}
.icon-close svg{width:16px;height:16px}

/* ---------- 工具类 ---------- */
.tc{text-align:center}
.tr{text-align:right}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.text-2{color:var(--text-2)}
.text-3{color:var(--text-3)}
.text-red{color:var(--red)}
.text-green{color:var(--green)}
.fw6{font-weight:600}
.fw7{font-weight:700}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.mt16{margin-top:16px}
.row{display:flex;align-items:center}
.row-between{display:flex;align-items:center;justify-content:space-between}
.gap8{gap:8px}
.gap12{gap:12px}
.flex1{flex:1;min-width:0}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}