/* ==========================================================================
   LOCKDATAV · lock_common.css
   青绿政务公共样式（山东省中医药特色疗法挖掘整理项目申报系统）
   — 与 lock_login.css 视觉统一：主色 #36B0AD / 深青 #2A7A88 / 底 #F2F7FA
   — 覆盖 layui 表单组件为青绿风格，供注册/登录等通行证页面复用
   ========================================================================== */

/* ============ 1. 变量 ============ */
:root{
  --primary:#36B0AD;         /* 主品牌青绿 */
  --primary-deep:#2A7A88;    /* 深青 */
  --primary-dark:#1F5F6B;    /* 最深青 */
  --primary-soft:#5CC1BE;    /* 浅青 */
  --primary-bright:#7FD0CD;  /* 亮青 */
  --primary-bg:#E8F2FC;      /* 输入框基底 */
  --page-bg:#F2F7FA;         /* 页面底色 */
  --line:#E0E2E3;            /* 输入框描边 */
  --panel-line:#E8EAEB;      /* 面板描边 */
  --title:#2A7A88;           /* 标题蓝青 */
  --text:#333333;
  --text-sub:#5A6B72;
  --text-faint:#8AA0A6;
  --error:#D9534F;           /* 错误/必填红 */
  --shadow:0 30px 80px rgba(42,122,136,.18), 0 6px 20px rgba(80,130,140,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

/* ============ 2. 基础重置与页面 ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{ height:100% }
html,body{ min-height:100% }
body{
  font-family:var(--font);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  background-color:var(--page-bg);
  background-image:
    linear-gradient(160deg, rgba(244,249,251,.45) 0%, rgba(236,245,247,.34) 40%, rgba(228,240,244,.44) 100%),
    url("../images/loginbg.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:40px 26px 50px;
  overflow-x:hidden;
  overflow-y:auto;
}
a{ text-decoration:none; color:var(--primary) }
a:hover{ color:var(--primary-deep) }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
/* 底部水墨山形装饰 */
.deco{ position:fixed; inset:auto 0 0 0; height:140px; z-index:0; opacity:.5; pointer-events:none }

/* ============ 3. 通行证大卡片（左表单 + 右品牌） ============ */
.card{
  position:relative; z-index:1;
  width:1000px; max-width:94vw;
  display:flex;
  background:#fff;
  border:1px solid var(--panel-line);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
/* ---- 左栏：表单区 ---- */
.card-form{ flex:0 0 57%; padding:30px 42px 28px; min-width:0 }
.card-top .cn{ font-size:24px; font-weight:700; color:var(--title); letter-spacing:4px }
.card-top .en{ font-size:11px; color:var(--text-faint); letter-spacing:2px; margin-top:6px }
.card-top .note{ font-size:12.5px; color:var(--text-sub); margin-top:12px; line-height:1.7 }
.card-top .note b{ color:var(--primary-deep); font-weight:700 }

/* 分区标题 */
.sec-title{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--primary-deep); margin:22px 0 14px }
.sec-title::before{ content:""; width:4px; height:16px; border-radius:3px; background:linear-gradient(180deg,var(--primary),var(--primary-deep)) }
.sec-title:first-child{ margin-top:18px }

/* ---- 右栏：品牌展示区 ---- */
.card-aside{
  flex:1 1 auto;
  position:relative;
  color:#fff;
  padding:52px 46px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(127,208,205,.26) 0%, rgba(42,122,136,0) 46%),
    linear-gradient(200deg, #2A96A6 0%, #2A7A88 58%, #1F5F6B 100%);
}
.card-aside .logo{ width:84px; height:84px; border-radius:50%; background:#fff; display:flex; margin:0 auto; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.18); overflow:hidden }
.card-aside .logo img{ width:100%; height:100%; object-fit:contain; display:block; border:0 }
.card-aside .sys-name{ margin-top:30px }
.card-aside .sys-name .line1{ font-size:27px; font-weight:800; letter-spacing:1px; line-height:1.55 }
.card-aside .sys-name .line2{ margin-top:12px; font-size:18px; font-weight:600; letter-spacing:3px; opacity:.96 }
.card-aside .divider{ width:46px; height:3px; border-radius:3px; background:rgba(255,255,255,.85); margin-top:22px }
.aside-feats{ list-style:none; margin-top:30px; display:grid; gap:14px }
.aside-feats li{ display:flex; align-items:center; gap:12px; font-size:14.5px; letter-spacing:1px; opacity:.97; padding:3px 0 }
.aside-feats li svg{ width:20px; height:20px; flex-shrink:0 }
.card-aside svg{ overflow:hidden }
.aside-ft{ margin-top:36px; font-size:13px; letter-spacing:4px; opacity:.92; font-weight:600 }
.aside-deco{ position:absolute; inset:auto 0 0 0; opacity:.5; pointer-events:none }

/* ============ 4. layui 表单 → 青绿覆盖 ============ */
/* 回归 layui 原生布局（label float:left + input-inline），不强制 flex，避免两字段行宽度不足导致 input 换行错位 */
.card .layui-form-item{ margin-bottom:12px; position:relative }
.card .layui-form-label{
  width:88px; height:42px; line-height:42px; padding:0 10px 0 0;
  font-size:14px; color:var(--text-sub); text-align:right;
  white-space:nowrap; box-sizing:border-box; background:none; border:0; float:left;
}
.card .layui-input-inline{ float:left; margin-right:10px }
.card .layui-input-inline input.layui-input{ width:332px }
.card .layui-input-inline .sms-input{ width:206px; margin-right:8px }
.card #row_sms{ float:none; margin-left:88px; display:flex; align-items:center; gap:8px; box-sizing:border-box }
.card #row_sms .sms-input{ width:auto; flex:1 1 0; margin-right:0 }
.card #row_sms .sms-btn{ flex:0 0 auto; padding:0 12px; white-space:nowrap }
.card .layui-word-aux{ color:var(--text-faint); font-size:12px }
.card .x-red{ color:var(--error); font-style:normal; font-weight:700 }
.card .req{ color:var(--error); font-weight:700; margin-left:2px }
.card .layui-font-red{ color:var(--error) }
/* 独立说明行（手机号/验证码/密码的补充提示，label 缩进对齐） */
/* 不设固定高度：长提示折行时自然撑开，避免被下方 float 的输入控件上移遮挡 */
.card .layui-form-mid-block{
  display:block; margin:0 0 14px 98px; line-height:1.7; clear:both; color:var(--text-faint); font-size:12px;
}
.card .layui-form-mid-block a{ color:var(--primary); text-decoration:underline }

/* 输入框 */
.card .layui-input{
  height:42px; line-height:42px; padding:0 14px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--primary-bg); color:var(--text);
  font-size:14px; font-family:inherit; transition:border-color .25s, box-shadow .25s;
}
.card .layui-input:focus, .card .layui-input:hover{ border-color:var(--primary) }
.card .layui-input::-webkit-input-placeholder{ color:var(--text-faint) }
.card .layui-input:disabled, .card .layui-input[disabled]{
  background:#f0f3f5; color:var(--text-faint); cursor:not-allowed; opacity:.85;
}

/* 省市区三级联动（layui select，xcity 渲染为 .layui-form-select） */
/* 注：HTML 容器是 id="x-city"，选择器须锁定 id，勿再用不匹配的 .city-row */
.card #x-city{ display:flex; align-items:center; gap:8px; width:auto; float:none; margin-left:88px; padding-left:10px; box-sizing:border-box }
.card #x-city .layui-form-select{ flex:1 1 0; min-width:0; height:42px }
.card .layui-form-select .layui-select-title{
  height:42px; line-height:42px; padding:0 30px 0 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--primary-bg); color:var(--text); font-size:14px;
  transition:border-color .25s; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.card .layui-form-select .layui-select-title:hover{ border-color:var(--primary) }
.card .layui-form-select .layui-select-title .layui-input{ border:0; box-shadow:none; background:transparent }
.card .layui-form-select .layui-edge{ right:12px; border-width:6px; border-top-color:var(--text-faint) }
.card .layui-form-select dl{
  border:1px solid var(--panel-line); border-radius:10px; box-shadow:0 10px 28px rgba(42,122,136,.14);
  margin-top:6px; max-height:220px; overflow-y:auto; background:#fff; padding:4px; z-index:21; min-width:150px;
}
.card .layui-form-select dl dd{ height:34px; line-height:34px; padding:0 12px; font-size:13px; color:var(--text); border-radius:7px }
.card .layui-form-select dl dd[lay-value=""]{ display:none }
.card .layui-form-select dl dd:hover,
.card .layui-form-select dl dd.layui-this{ background:var(--primary-bg); color:var(--primary-deep); font-weight:600 }
.card .layui-form-select dl dt{ color:var(--text-faint); font-size:12px; padding:4px 12px }

/* 短信获取按钮 */
.card .sms-btn.layui-btn{
  height:42px; line-height:42px; padding:0 16px; border:1px solid var(--primary); border-radius:10px;
  background:#fff; color:var(--primary); font-size:13px; font-weight:600; cursor:pointer;
  transition:all .25s; font-family:inherit;
}
.card .sms-btn.layui-btn:hover:not(:disabled){ background:var(--primary); color:#fff }
.card .sms-btn.layui-btn:disabled{ border-color:#c7d2d5; color:var(--text-faint); background:#f0f3f5; cursor:not-allowed }

/* ============ 5. 提交按钮与底部 ============ */
.card .reg-btn.layui-btn{
  width:100%; height:46px; line-height:46px; margin-top:10px;
  border:none; border-radius:12px; font-size:16px; font-weight:700; letter-spacing:8px; text-indent:8px;
  color:#fff; background:linear-gradient(135deg,var(--primary-soft) 0%,var(--primary) 52%,var(--primary-deep) 100%);
  background-size:200% 100%; cursor:pointer;
  box-shadow:0 10px 26px rgba(54,176,173,.32);
  transition:transform .25s, box-shadow .25s, background-position .4s; font-family:inherit;
}
.card .reg-btn.layui-btn:hover{ background-position:100% 0; transform:translateY(-2px); box-shadow:0 14px 32px rgba(54,176,173,.40) }
.card .reg-btn.layui-btn:disabled{ opacity:.72; cursor:not-allowed; transform:none }
.card .tip{ font-size:12px; color:var(--text-faint); text-align:center; margin-top:14px; line-height:1.7 }
.card .tip a{ color:var(--primary); text-decoration:none }
.card .tip a:hover{ color:var(--primary-deep); text-decoration:underline }
.card .prov-note{ font-size:12px; color:var(--text-sub); line-height:1.7; margin-top:6px }
.card .prov-note .x-red{ color:var(--error) }

/* ============ 6. 版权 / Toast ============ */
.footer{ text-align:center; font-size:12px; color:#7d9199; letter-spacing:.5px; margin-top:24px; position:relative; z-index:1 }
.toast{ position:fixed; left:50%; top:8%; transform:translateX(-50%); background:rgba(31,95,107,.94); color:#fff; font-size:14px; padding:12px 22px; border-radius:10px; z-index:99; opacity:0; pointer-events:none; transition:opacity .3s; box-shadow:0 10px 30px rgba(0,0,0,.18) }
.toast.show{ opacity:1 }
/* 兼容 layer 消息 */
.layui-layer{ border-radius:10px; font-family:var(--font) }

@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important } }

/* ============ 7. 响应式 ============ */
@media (max-width:900px){
  body{ padding-top:20px }
  .card{ flex-direction:column; width:540px; max-width:94vw }
  .card-form{ flex:none; width:100%; padding:28px 24px 26px; order:2 }
  .card-aside{ order:1; padding:32px 30px 28px; align-items:center; text-align:center; justify-content:flex-start }
  .card-aside .sys-name{ margin-top:22px }
  .card-aside .divider{ margin-left:auto; margin-right:auto }
  .aside-feats{ justify-content:center }
  .aside-feats li{ justify-content:center; text-align:left }
  .aside-ft{ margin-top:26px }
  .card .layui-form-label{ width:72px; padding-right:6px }
  .card #x-city{ margin-left:72px }
  .card #row_sms{ margin-left:72px }
  .card .layui-input-inline input.layui-input{ width:300px }
  .card .layui-form-mid-block{ margin-left:78px }
}
@media (max-width:560px){
  .card .layui-form-label{ width:64px; padding-right:6px }
  .card #x-city{ margin-left:66px }
  .card #row_sms{ margin-left:66px }
  .card .layui-input-inline input.layui-input{ width:100%; max-width:310px }
  .card .layui-input-inline .sms-input{ width:100%; max-width:170px }
  .card .layui-form-mid-block{ margin-left:70px }
}
@media print{
  body{ background:#fff }
  .footer,.deco,.card-aside{ display:none }
}