/*!
 * CLOCK商城系统 —— 登录页（重构版）
 * 左右分栏：左侧品牌展示 + 右侧独立登录卡片
 * 与后台主视觉统一：深邃蓝 #1B2A4A + 香槟金 #C8A45C
 */

:root {
  --ck-primary: #1b2a4a;
  --ck-primary-deep: #131f38;
  --ck-primary-soft: #2a3f63;
  --ck-gold: #c8a45c;
  --ck-gold-deep: #b8934b;
  --ck-gold-soft: #e3d0a8;
  --ck-text: #2c3542;
  --ck-text-sub: #7a869a;
  --ck-field-bg: #f4f6fa;
  --ck-border: #e6eaf0;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.ck-login-body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.ck-login { display: flex; height: 100vh; width: 100%; }

/* ==================== 左侧品牌区 ==================== */
.ck-brand {
  position: relative;
  flex: 1 1 56%;
  max-width: 56%;
  background:
    radial-gradient(760px 460px at 20% 18%, rgba(200, 164, 92, .20), transparent 62%),
    radial-gradient(620px 500px at 88% 84%, rgba(42, 63, 99, .75), transparent 60%),
    linear-gradient(150deg, #101a30 0%, var(--ck-primary) 48%, var(--ck-primary-soft) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 66px;
  overflow: hidden;
}

/* 装饰光斑 */
.ck-brand-deco { position: absolute; inset: 0; pointer-events: none; }
.ck-brand-deco span { position: absolute; border-radius: 50%; display: block; }
.ck-brand-deco span:nth-child(1) {
  width: 320px; height: 320px; right: -110px; top: -90px;
  background: radial-gradient(circle, rgba(200, 164, 92, .22), transparent 68%);
}
.ck-brand-deco span:nth-child(2) {
  width: 200px; height: 200px; left: -70px; bottom: -60px;
  background: radial-gradient(circle, rgba(255, 255, 255, .10), transparent 70%);
}
.ck-brand-deco span:nth-child(3) {
  width: 420px; height: 420px; right: -160px; bottom: -180px;
  background: radial-gradient(circle, rgba(200, 164, 92, .12), transparent 70%);
}

.ck-brand-inner { position: relative; z-index: 2; max-width: 500px; }

.ck-brand-logo {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--ck-gold) 0%, var(--ck-gold-deep) 100%);
  color: var(--ck-primary-deep);
  font-weight: 800; font-size: 28px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 32px rgba(200, 164, 92, .34);
  margin-bottom: 30px;
}

.ck-brand-title {
  margin: 0; font-size: 38px; font-weight: 700; letter-spacing: 3px; line-height: 1.24;
}
.ck-brand-title span { color: var(--ck-gold); }

.ck-brand-line {
  width: 58px; height: 3px; border-radius: 3px; margin: 22px 0;
  background: linear-gradient(90deg, var(--ck-gold), rgba(200, 164, 92, .15));
}

.ck-brand-slogan {
  margin: 0 0 38px; font-size: 16px; line-height: 2; color: rgba(255, 255, 255, .74);
  letter-spacing: 1.2px;
}

.ck-brand-feats { list-style: none; margin: 0; padding: 0; }
.ck-brand-feats li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px; color: rgba(255, 255, 255, .82);
  padding: 9px 0;
}
.ck-brand-feats li i {
  color: var(--ck-gold); font-size: 17px;
  width: 30px; height: 30px; line-height: 30px; text-align: center;
  border-radius: 9px; background: rgba(200, 164, 92, .14);
}

.ck-brand-foot {
  position: absolute; left: 66px; bottom: 34px; z-index: 2;
  font-size: 12.5px; color: rgba(255, 255, 255, .42); letter-spacing: 1px;
}

/* ==================== 右侧登录区 ==================== */
.ck-panel {
  flex: 1 1 44%;
  background: #f6f8fb;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 32px;
  overflow-y: auto;
}

.ck-card {
  width: 100%; max-width: 400px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(19, 31, 56, .16);
  padding: 44px 40px 38px;
  animation: ckCardIn .5s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ckCardIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.ck-card-head { margin-bottom: 30px; }
.ck-card-head h2 {
  margin: 0 0 8px; font-size: 26px; font-weight: 700; color: var(--ck-primary); letter-spacing: 1px;
}
.ck-card-head p { margin: 0; font-size: 13.5px; color: var(--ck-text-sub); }

/* ---------- 输入框 ---------- */
.ck-field { position: relative; margin-bottom: 16px; }
.ck-field-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--ck-gold); font-size: 18px; pointer-events: none; z-index: 2;
}
.ck-field input {
  width: 100%; height: 50px;
  padding: 0 16px 0 46px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--ck-field-bg);
  color: var(--ck-text);
  font-size: 15px;
  outline: none;
  transition: all .22s cubic-bezier(.4, 0, .2, 1);
}
.ck-field input::placeholder { color: #a4afc0; }
.ck-field input:hover { background: #eef1f7; }
.ck-field input:focus {
  background: #fff;
  border-color: var(--ck-gold);
  box-shadow: 0 0 0 4px rgba(200, 164, 92, .15);
}
.ck-field input.ck-input-code { padding-right: 132px; }

/* 验证码图片 */
.ck-code {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 38px; width: 116px;
  border-radius: 9px; cursor: pointer;
  border: 1px solid var(--ck-border);
  object-fit: cover; background: #fff;
  transition: all .2s ease;
}
.ck-code:hover { border-color: var(--ck-gold); }

/* 密码可见切换 */
.ck-eye {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: #a4afc0; font-size: 17px; cursor: pointer; z-index: 3;
  transition: color .2s ease;
}
.ck-eye:hover { color: var(--ck-gold); }

/* 记住我 */
.ck-row { margin: 6px 0 24px; }
.ck-row .layui-form-checkbox { padding-left: 28px; }
.ck-row .layui-form-checkbox span { font-size: 13.5px; color: var(--ck-text-sub); }

/* ---------- 登录按钮 ---------- */
.ck-btn {
  width: 100%; height: 50px;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--ck-primary) 0%, var(--ck-primary-soft) 100%);
  color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 6px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(27, 42, 74, .26);
  transition: all .24s cubic-bezier(.4, 0, .2, 1);
}
.ck-btn:hover {
  background: linear-gradient(135deg, var(--ck-gold) 0%, var(--ck-gold-deep) 100%);
  color: var(--ck-primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(200, 164, 92, .36);
}
.ck-btn:active { transform: translateY(0); }

/* 注册 */
.ck-reg { margin-top: 20px; text-align: center; font-size: 13.5px; color: var(--ck-text-sub); }
.ck-reg a { color: var(--ck-gold-deep); text-decoration: none; font-weight: 600; }
.ck-reg a:hover { text-decoration: underline; }

/* 底部版权 */
.ck-foot {
  margin-top: 26px; font-size: 12px; color: #9aa4b4; text-align: center;
}
.ck-foot a { color: #9aa4b4; text-decoration: none; }
.ck-foot a:hover { color: var(--ck-gold-deep); }

/* ==================== 响应式 ==================== */
@media (max-width: 1080px) {
  .ck-brand { padding: 48px 44px; }
  .ck-brand-title { font-size: 32px; }
  .ck-panel { padding: 32px 24px; }
}
@media (max-width: 860px) {
  .ck-brand { display: none; }
  .ck-panel { flex: 1 1 100%; background: linear-gradient(180deg, var(--ck-primary) 0%, #f6f8fb 320px); }
  .ck-card { padding: 36px 28px 30px; box-shadow: 0 18px 46px rgba(19, 31, 56, .2); }
}
@media (max-width: 420px) {
  .ck-card { padding: 30px 22px 26px; border-radius: 16px; }
  .ck-card-head h2 { font-size: 23px; }
  .ck-btn { letter-spacing: 3px; }
}