/* ============================================================
   KOKO Studio · 登录页改版层（附加式：只改样式与新增块，不动登录逻辑）
   ① 左边大图变整屏背景；右侧表单居中成**毛玻璃卡**
   ② 登录/注册 改成分段 tab；输入框/按钮套站内质感
   ③ 新增：合规勾选（视觉）、用户协议/隐私政策 弹层、忘记密码、商务合作
   摘掉方式：删 index.html 里引用本文件那一行。
   ============================================================ */

/* ---------- 布局：整屏背景 + 居中玻璃卡 ---------- */
#loginView.login-screen{display:block !important;position:relative !important;overflow:hidden !important}

#loginView .login-aside{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  opacity:.55;
}
#loginView .login-aside::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(8,9,9,.15),rgba(8,9,9,.72) 62%,#080909 100%);
  pointer-events:none;
}

#loginView .login-panel{
  position:absolute !important;left:50% !important;top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(520px,calc(100% - 32px)) !important;
  height:auto !important;max-height:calc(100vh - 44px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:46px clamp(22px,3vw,40px) 20px !important;   /* 顶部留够给「返回首页」，底部收一点免得被视口切 */
  background:rgba(13,15,14,.42) !important;
  -webkit-backdrop-filter:blur(28px) saturate(135%);
  backdrop-filter:blur(28px) saturate(135%);
  border:1px solid rgba(244,246,243,.16) !important;
  border-radius:22px !important;
  box-shadow:0 40px 120px rgba(0,0,0,.62),0 0 110px rgba(201,255,93,.07),inset 0 1px 0 rgba(255,255,255,.07) !important;
  z-index:3;
}
#loginView .login-panel .back-link{
  position:absolute;left:clamp(22px,3vw,38px);top:18px;
  font-size:12px;color:rgba(244,246,243,.45) !important;
  border:0;background:none;padding:0;cursor:pointer;
}
#loginView .login-panel .back-link:hover{color:#c9ff5d !important}

/* ---------- 标题区 ---------- */
#loginView .login-panel h1,
#loginView .login-panel h2{
  font-size:clamp(24px,2.6vw,30px) !important;font-weight:800 !important;
  letter-spacing:-.01em;text-align:center;margin:14px 0 0 !important;
}
#loginView .login-panel p{margin:6px 0 0;font-size:13px;color:rgba(244,246,243,.55) !important;text-align:center}

/* ---------- 登录/注册 → 分段 tab ---------- */
#loginView .login-panel #showLogin,
#loginView .login-panel #showRegister{
  flex:1 1 0 !important;width:auto !important;min-width:0 !important;
  padding:11px 0 !important;border-radius:10px !important;
  font-size:14px !important;color:rgba(244,246,243,.55) !important;
  background:transparent !important;border:1px solid transparent !important;
  box-shadow:none !important;transition:all .16s;cursor:pointer;font-weight:500;
}
#loginView .login-panel #showLogin.active,
#loginView .login-panel #showRegister.active{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05)) !important;
  color:#f4f6f3 !important;font-weight:600;
}

/* ---------- 字段 ---------- */
#loginView .login-panel label{font-size:12.5px !important;color:rgba(244,246,243,.72) !important}
/* ⚠️ 必须用 :not([type=checkbox])：线上 #loginName / #registerCode 根本没有 type 属性，
   写 input[type=text] 一条都匹配不到 —— 这就是上一版输入框样式没生效的真因 */
#loginView .login-panel input:not([type=checkbox]):not([type=radio]):not([type=file]){
  width:100% !important;padding:14px 16px !important;border-radius:12px !important;
  font-size:14px !important;color:#f4f6f3 !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(244,246,243,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
  outline:none !important;transition:border-color .16s,box-shadow .2s;
}
#loginView .login-panel input::placeholder{color:rgba(244,246,243,.34) !important}
#loginView .login-panel input:focus{
  border-color:rgba(201,255,93,.55) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 16px rgba(201,255,93,.2) !important;
}
#loginView .login-panel .code-button{
  border-radius:10px !important;font-size:12.5px !important;color:#c9ff5d !important;
  background:rgba(201,255,93,.10) !important;border:1px solid rgba(201,255,93,.4) !important;
}
#loginView .login-panel .code-button:hover{background:rgba(201,255,93,.18) !important}

/* ---------- 提交键 ---------- */
#loginView .login-panel .login-submit{
  width:100% !important;padding:15px !important;border-radius:12px !important;
  font-size:15px !important;font-weight:700 !important;color:#0a0b0a !important;
  background:linear-gradient(180deg,#dbff86,#c9ff5d 52%,#b6ee4a) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 22px -10px rgba(201,255,93,.75) !important;
  transition:box-shadow .2s,transform .1s,filter .2s;cursor:pointer;
}
#loginView .login-panel .login-submit:hover{
  filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(201,255,93,.55),0 12px 30px -12px rgba(201,255,93,.85) !important;
}
#loginView .login-panel .login-submit:active{transform:translateY(1px)}
#loginView .login-panel .login-submit:disabled{
  background:rgba(244,246,243,.14) !important;color:rgba(244,246,243,.42) !important;
  border-color:transparent !important;box-shadow:none !important;cursor:not-allowed;
}

/* ---------- 新增块：合规 / 链接行 / 商务合作（由 JS 插入）---------- */
.koko-lg-extra{margin-top:16px}
.koko-lg-links{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12.5px}
.koko-lg-links button{color:rgba(244,246,243,.55);font-size:12.5px;cursor:pointer}
.koko-lg-links button:hover{color:#c9ff5d}
.koko-lg-agree{
  margin-top:0;padding:13px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(244,246,243,.12);
}
.koko-lg-agree h4{margin:0 0 10px;font-size:12.5px;font-weight:600;color:rgba(244,246,243,.88)}
.koko-lg-agree label{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.65;
  color:rgba(244,246,243,.62);margin-bottom:9px;cursor:pointer}
.koko-lg-agree label:last-child{margin-bottom:0}
/* 勾选框必须用高权重压过站点的 #loginView input{width:100%}，否则会变成大白方块 */
#loginView .koko-lg-agree input[type=checkbox]{
  flex:0 0 auto !important;width:15px !important;height:15px !important;min-width:15px !important;
  padding:0 !important;margin:2px 0 0 !important;border-radius:4px !important;
  accent-color:#c9ff5d;cursor:pointer;appearance:auto !important;
}
#loginView .koko-lg-agree label{display:flex !important;align-items:flex-start;gap:9px}
#loginView .koko-lg-agree label > span{flex:1 1 auto;min-width:0}
.koko-lg-agree a{color:#ff7a6b;text-decoration:none;cursor:pointer}
.koko-lg-agree a:hover{text-decoration:underline}
.koko-lg-foot{margin-top:10px;text-align:center;font-size:11.5px;color:rgba(244,246,243,.38);line-height:1.7}
.koko-lg-foot a{color:#c9ff5d;cursor:pointer;text-decoration:none}
.koko-lg-foot a:hover{text-decoration:underline}

/* ---------- 文档弹层（用户协议/隐私政策/忘记密码/商务合作）---------- */
.koko-lg-sheet{
  position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:24px 16px;
}
.koko-lg-sheet[data-open]{display:grid}
.koko-lg-mask{position:fixed;inset:0;background:rgba(4,5,5,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.koko-lg-card{
  position:relative;width:min(600px,100%);max-height:calc(100vh - 48px);overflow:auto;
  padding:30px clamp(20px,3vw,32px) 22px;border-radius:20px;
  background:rgba(13,15,14,.92);border:1px solid rgba(244,246,243,.16);
  box-shadow:0 40px 120px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07);
}
.koko-lg-card.dark-glass{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:rgba(13,15,14,.72)}
.koko-lg-card h3{margin:0 0 4px;font-size:22px;font-weight:800;text-align:center}
.koko-lg-card .sub{margin:6px 0 0;font-size:12.5px;color:rgba(244,246,243,.5);text-align:center}
.koko-lg-body{margin-top:16px;max-height:46vh;overflow-y:auto;font-size:13px;line-height:1.9;color:rgba(244,246,243,.72)}
.koko-lg-body h5{margin:16px 0 5px;font-size:13.5px;color:#f4f6f3;font-weight:700}
.koko-lg-body h5:first-child{margin-top:0}
.koko-lg-body p{margin:0 0 9px}
.koko-lg-body ul{margin:0 0 9px;padding-left:18px}
.koko-lg-body li{margin:3px 0}
.koko-lg-warn{margin-top:14px;padding:10px 12px;border-radius:10px;font-size:11.5px;line-height:1.7;
  color:#ffca7a;background:rgba(255,202,122,.10);border:1px solid rgba(255,202,122,.28)}
.koko-lg-close{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;color:rgba(244,246,243,.55);
  border:1px solid rgba(244,246,243,.14);background:rgba(255,255,255,.04);cursor:pointer}
.koko-lg-close:hover{color:#f4f6f3;border-color:rgba(244,246,243,.3)}
.koko-lg-field{margin-top:14px;display:grid;gap:6px}
.koko-lg-field label{font-size:12.5px;color:rgba(244,246,243,.72)}
.koko-lg-field input{width:100%;padding:12px 14px;border-radius:11px;font-size:13.5px;color:#f4f6f3;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(244,246,243,.16);outline:none}
.koko-lg-field input:focus{border-color:rgba(201,255,93,.55)}
.koko-lg-row{display:flex;gap:8px}
.koko-lg-row input{flex:1}
.koko-lg-row button{flex:0 0 auto;padding:12px 14px;border-radius:11px;font-size:12.5px;color:#c9ff5d;
  background:rgba(201,255,93,.10);border:1px solid rgba(201,255,93,.4);cursor:pointer;white-space:nowrap}
.koko-lg-row button:hover{background:rgba(201,255,93,.18)}
.koko-lg-row button:disabled{opacity:.5;cursor:not-allowed}
.koko-lg-submit{width:100%;margin-top:14px;padding:14px;border-radius:12px;font-size:14.5px;font-weight:700;
  color:#0a0b0a;background:linear-gradient(180deg,#dbff86,#c9ff5d 52%,#b6ee4a);
  border:1px solid rgba(255,255,255,.35);cursor:pointer}
.koko-lg-msg{margin:10px 0 0;font-size:12px;line-height:1.7;text-align:center;color:rgba(244,246,243,.6)}
.koko-lg-copy{display:flex;align-items:center;gap:10px;margin-top:12px;padding:13px 14px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(244,246,243,.12);font-size:13.5px}
.koko-lg-copy b{flex:1;font-weight:600}
.koko-lg-copy button{font-size:12px;color:#c9ff5d;padding:6px 10px;border-radius:8px;cursor:pointer}
.koko-lg-copy button:hover{background:rgba(201,255,93,.10)}

@media (max-width:760px){
  #loginView .login-panel{width:calc(100% - 20px) !important;max-height:calc(100vh - 24px);
    padding:26px 18px 18px !important;border-radius:18px !important}
  #loginView .login-aside{opacity:.3}
}


/* ============================================================
   1:1 补齐（v2）
   ============================================================ */

/* 左半边文案排版（配合 JS 换文案） */
#loginView .login-aside-copy{max-width:640px}
#loginView .login-aside-copy h1,
#loginView .login-aside-copy .koko-lg-h1{
  font-size:clamp(40px,5.4vw,80px) !important;line-height:1.06 !important;
  font-weight:900 !important;letter-spacing:-.02em;margin:.16em 0 .12em !important;
  text-shadow:0 18px 60px rgba(0,0,0,.5);
}
#loginView .login-aside-copy .koko-lg-h1 em{font-style:normal;color:#c9ff5d}
#loginView .login-aside-copy p{font-size:clamp(13px,1.05vw,16px) !important;
  line-height:1.8 !important;color:rgba(244,246,243,.6) !important;max-width:34em}

/* 字段图标盒 */
.koko-lg-box{position:relative;display:flex;align-items:center;width:100%}
.koko-lg-box .koko-lg-ico{
  position:absolute;left:14px;width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:rgba(244,246,243,.42);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
/* 权重必须 ≥ 通用输入框那条(1,4,1)，否则左内边距还是 16px、图标会压住文字 */
#loginView .login-panel .koko-lg-box input:not([type=checkbox]):not([type=radio]):not([type=file]){padding-left:42px !important;padding-right:16px !important}

/* 或 + 先逛逛 */
.koko-lg-or{display:flex;align-items:center;gap:14px;margin-top:12px;
  color:rgba(244,246,243,.34);font-size:12.5px}
.koko-lg-or::before,.koko-lg-or::after{content:"";flex:1;height:1px;background:rgba(244,246,243,.14)}
.koko-lg-wander{
  width:100%;margin-top:14px;padding:14px;border-radius:12px;font-size:14px;font-weight:600;
  color:#f4f6f3;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  border:1px solid rgba(244,246,243,.18);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 3px rgba(0,0,0,.35);
  transition:border-color .16s,box-shadow .2s,color .16s;
}
.koko-lg-wander:hover{border-color:rgba(201,255,93,.5);color:#c9ff5d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 18px rgba(201,255,93,.22)}

/* 还没有账号？创建账号 */
.koko-lg-signup{margin:12px 0 0;text-align:center;font-size:13px;color:rgba(244,246,243,.55)}
.koko-lg-signup button{color:#c9ff5d;font-weight:600;cursor:pointer;font-size:13px}
.koko-lg-signup button:hover{text-decoration:underline}

/* 底部卖点条（登录页左上大图那一侧） */
.koko-lg-beats{
  position:absolute;left:0;right:0;bottom:34px;z-index:2;pointer-events:none;
  display:flex;justify-content:center;gap:clamp(20px,5vw,84px);flex-wrap:wrap;
  padding:0 clamp(20px,4vw,54px);
  font-size:12.5px;letter-spacing:.16em;color:rgba(244,246,243,.42);
}
.koko-lg-beats span{white-space:nowrap}
.koko-lg-beats i{font-style:normal;color:#c9ff5d;margin-right:8px}
@media (max-width:760px){ .koko-lg-beats{gap:10px 18px;font-size:11px;bottom:16px} }


/* ---------- 表单节奏对齐预览（预览 = .pane gap:18px + .field gap:8px）---------- */
/* ⚠️ 千万别用 display:grid 覆盖表单 —— #registerForm 是靠 .hidden(display:none) 藏起来的，
   !important 会把它顶出来，结果登录/注册两张表单同时显示、卡片内容翻倍、提交键被挤出可视区（实测翻过车）。
   改用「相邻兄弟加外边距」拿节奏，不碰 display。 */
#loginView .login-panel form > * + *{margin-top:13px !important}
#loginView .login-panel form > .koko-lg-extra{margin-top:14px !important}
#loginView .login-panel label{
  display:grid !important;gap:8px !important;margin:0 !important;
  font-size:13px !important;color:rgba(244,246,243,.78) !important;
}
#loginView .login-panel .code-field{display:grid !important;gap:8px !important;position:relative}
#loginView .login-panel .code-field .code-button{position:absolute;right:8px;bottom:7px;padding:9px 13px !important}


/* tab 容器：卡片是 flex 容器且设了 align-items → 会被收缩到内容宽，必须显式铺满 */
#loginView .login-panel .koko-lg-tabs{
  display:flex !important;align-items:stretch !important;
  width:100% !important;align-self:stretch !important;flex:0 0 auto !important;
  margin-top:16px !important;padding:5px !important;gap:6px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(244,246,243,.12) !important;
  border-radius:14px !important;
}
#loginView .login-panel .koko-lg-tabs > button{flex:1 1 0 !important;width:auto !important;min-width:0 !important}


/* ---------- 让卡片一屏放得下（原来内容比卡片高 37px 会出滚动条）---------- */
#loginView .login-panel .koko-lg-agree{padding:11px 13px !important}
#loginView .login-panel .koko-lg-agree h4{margin-bottom:8px !important;font-size:12px !important}
#loginView .login-panel .koko-lg-agree label{margin-bottom:7px !important;line-height:1.55 !important}
#loginView .login-panel .koko-lg-foot{line-height:1.5 !important;margin-top:8px !important}
#loginView .login-panel form > * + *{margin-top:11px !important}
#loginView .login-panel .login-submit{padding:13px !important}
#loginView .login-panel .koko-lg-signup{margin-top:8px !important}
#loginView .login-panel .koko-lg-wander{padding:12px !important;margin-top:11px !important}
#loginView .login-panel #showLogin,#loginView .login-panel #showRegister{padding:9px 0 !important}


/* ---------- 「返回首页」移出卡片：固定到页面左上角（不再压标题，也给卡片腾高度）---------- */
#loginView .login-panel .back-link{
  position:fixed !important;left:28px !important;top:24px !important;
  font-size:12.5px !important;color:rgba(244,246,243,.5) !important;
  padding:7px 13px !important;border-radius:99px !important;
  background:rgba(255,255,255,.05) !important;border:1px solid rgba(244,246,243,.12) !important;
  z-index:10 !important;transition:color .16s,border-color .16s;
}
#loginView .login-panel .back-link:hover{color:#c9ff5d !important;border-color:rgba(201,255,93,.45) !important}

/* 卡片再放宽一点高度，尽量一屏放下 */
#loginView .login-panel{max-height:calc(100vh - 22px) !important;padding-top:30px !important}




/* 返回首页：留在卡片内左上角（卡片有 transform，往外挪会触发站点重渲染，踩过） */
#loginView .login-panel .back-link{
  position:absolute !important;left:clamp(22px,3vw,38px) !important;top:20px !important;
  font-size:12px !important;color:rgba(244,246,243,.45) !important;
  border:0 !important;background:none !important;padding:0 !important;
}
#loginView .login-panel .back-link:hover{color:#c9ff5d !important}
#loginView .login-panel{padding-top:46px !important}   /* 给返回首页留位，别压到 eyebrow */


/* ============================================================
   新结构（HTML 已写死在 index.html 里）需要的样式
   ============================================================ */
#loginView .login-panel .koko-box{position:relative;display:block;width:100%}
#loginView .login-panel .koko-box .koko-ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:none;stroke:rgba(244,246,243,.42);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
#loginView .login-panel .koko-box input{padding-left:42px !important}
/* 验证码那格：输入框右边留给按钮 */
#loginView .login-panel .code-field .koko-box input{padding-right:118px !important}
#loginView .login-panel .code-field .koko-box .code-button{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  padding:9px 13px !important;border-radius:10px !important;font-size:12.5px !important;
  color:#c9ff5d !important;background:rgba(201,255,93,.10) !important;
  border:1px solid rgba(201,255,93,.4) !important;white-space:nowrap;
}
#loginView .login-panel .code-field .koko-box .code-button:hover{background:rgba(201,255,93,.18) !important}
#loginView .login-panel .code-field{margin:0 !important;padding:0 !important}
/* 表单直接是 grid，节奏由 gap 控制 */
#loginView .login-panel form:not(.hidden){display:grid !important;gap:13px !important;align-content:start}
#loginView .login-panel form.hidden{display:none !important}   /* ← 别把 .hidden 顶掉，踩过两次 */
#loginView .login-panel form > *{margin:0 !important}
#loginView .login-panel .koko-lg-links{margin:0 !important}
#loginView .login-panel .koko-lg-agree{margin:0 !important}
#loginView .login-panel .koko-lg-foot{margin:0 !important}
#loginView .login-panel .koko-lg-signup{margin:0 !important}
#loginView .login-panel .koko-lg-or{margin:0 !important}
#loginView .login-panel .koko-lg-wander{margin:0 !important}