/* ============================================================
   Modern Register Page — 复刻网易163注册页（左侧注册方式 + 右侧表单）
   依赖 login.modern.css 的 CSS 变量与 lg- 顶部/底部
   ============================================================ */

/* 主体：左广告 + 右注册卡片 */
.rg-stage{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;
  gap:34px;padding:20px 40px 30px;}

/* 左侧广告（竖版 3/4） */
.rg-stage .lg-promo{flex:0 1 380px;min-width:320px;margin:0;}
.rg-stage .lg-promo-viewport,.rg-stage .lg-promo-slide{aspect-ratio:3/4;}
.rg-stage .lg-promo-textslide{padding:36px 30px 22px;}
.rg-stage .lg-promo-title{font-size:28px;}
.rg-stage .lg-promo-scene img{transform:translateX(40px);}
.rg-stage .lg-promo-arrows{position:fixed;left:18px;right:auto;top:50%;
  transform:translateY(-50%);z-index:60;}

.rg-card{
  display:flex;flex:0 0 820px;max-width:100%;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(31,45,80,.16);animation:rgCardIn .5s ease;}
@keyframes rgCardIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* ---------- 左侧：注册方式列表 ---------- */
.rg-side{flex:0 0 300px;background:#f5f6f8;padding:26px 20px;display:flex;flex-direction:column;gap:10px;}
.rg-sidehead{font-size:13px;color:#9aa0ac;padding:4px 10px 12px;letter-spacing:1px;}
.rg-option{position:relative;display:flex;align-items:center;gap:13px;padding:16px 15px;border-radius:12px;
  cursor:pointer;border:1px solid transparent;transition:background .25s,box-shadow .25s,border-color .25s;}
.rg-option:hover{background:#eef0f4;}
.rg-option.on{background:#fff;border-color:#eceef3;box-shadow:0 8px 20px rgba(31,45,80,.09);}
.rg-opt-ic{flex:0 0 40px;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:#e9ebf0;color:#9aa0ac;transition:background .3s,color .3s;}
.rg-opt-ic svg{width:22px;height:22px;display:block;}
.rg-option.on .rg-opt-ic{background:var(--theme-soft);color:var(--theme);}
.rg-opt-tx{min-width:0;flex:1;}
.rg-opt-title{font-size:16px;font-weight:700;color:#5a606c;transition:color .3s;}
.rg-option.on .rg-opt-title{color:var(--theme);}
.rg-opt-sub{font-size:12px;color:#a0a6b0;margin-top:4px;line-height:1.4;}
.rg-opt-check{position:absolute;right:13px;top:13px;width:20px;height:20px;border-radius:6px;
  background:var(--theme);color:#fff;display:none;align-items:center;justify-content:center;}
.rg-opt-check svg{width:13px;height:13px;display:block;}
.rg-option.on .rg-opt-check{display:flex;}

/* ---------- 右侧：表单区 ---------- */
.rg-form{flex:1;min-width:0;padding:40px 46px 36px;}
.rg-panel{display:none;}
.rg-panel.on{display:block;animation:rgPanelIn .38s ease;}
@keyframes rgPanelIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}
.rg-ptitle{font-size:26px;font-weight:800;color:#1d2433;letter-spacing:.5px;}
.rg-psub{font-size:14px;color:#98a0ad;margin:9px 0 26px;line-height:1.5;}

/* 字段（163 简洁竖排 label） */
.rg-field{margin-bottom:18px;}
.rg-flabel{display:block;font-size:13px;color:#6a707c;margin-bottom:7px;}
.rg-flabel .req{color:var(--theme);margin-right:3px;}
.rg-input{position:relative;}
.rg-input input,.rg-input textarea{
  width:100%;border:1px solid #e2e2e2;border-radius:9px;padding:0 14px;height:46px;
  font-size:15px;color:#333;background:#fafafa;outline:none;font-family:inherit;
  transition:border-color .25s,background .25s,box-shadow .25s;}
.rg-input textarea{height:auto;min-height:84px;padding:12px 14px;resize:vertical;line-height:1.6;}
.rg-input input::placeholder,.rg-input textarea::placeholder{color:#bdc2cb;}
.rg-input input:focus,.rg-input textarea:focus{
  border-color:var(--theme);background:#fff;box-shadow:0 0 0 3px var(--theme-soft);}
/* 后缀（如 @ 域名 / 眼睛） */
.rg-input.has-suffix input{padding-right:120px;}
.rg-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;
  align-items:center;color:#9aa0ac;font-size:14px;background:transparent;border:0;}
.rg-suffix .rg-eye{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#aab0bb;border-radius:50%;}
.rg-suffix .rg-eye svg{width:20px;height:20px;}
.rg-suffix .rg-eye:hover{color:var(--theme);background:var(--theme-soft);}
.rg-field-err{display:none;font-size:12px;color:#e1251b;margin-top:6px;}
.rg-field.invalid .rg-field-err{display:block;}
.rg-field.invalid input,.rg-field.invalid textarea{border-color:#ef6a64;background:#fff7f6;}

/* 五级地区 */
.rg-region .fr-wrap{display:flex;flex-wrap:wrap;gap:8px;}
.rg-region .fr-sel{height:38px!important;line-height:38px!important;border-radius:8px!important;
  font-size:13px!important;max-width:100%!important;flex:1 1 30%;min-width:120px;padding:0 6px!important;}

/* 协议 */
.rg-agree{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#7a808c;margin:6px 2px 18px;line-height:1.5;}
.rg-agree input{margin-top:2px;accent-color:var(--theme);}
.rg-agree a{color:var(--theme);cursor:pointer;}
.rg-protocol{display:none;height:150px;overflow-y:auto;border:1px solid #e8eaf0;border-radius:9px;
  padding:14px 16px;font-size:12.5px;color:#6a707c;line-height:1.7;background:#fafbfc;margin:-8px 0 18px;}
.rg-protocol.show{display:block;}

/* 提交按钮 */
.rg-btn{display:block;width:100%;height:50px;line-height:50px;text-align:center;color:#fff;font-size:17px;
  letter-spacing:3px;border-radius:10px;cursor:pointer;border:0;font-family:inherit;
  background:linear-gradient(90deg,var(--theme),var(--theme2));
  box-shadow:0 10px 22px var(--theme-soft);transition:filter .25s,box-shadow .25s;}
.rg-btn:hover{filter:brightness(1.05);}
.rg-btn:active{transform:translateY(1px);}
.rg-btn.is-disabled{opacity:.6;cursor:not-allowed;filter:grayscale(.2);}

/* 面板底部切换/提示 */
.rg-footnote{text-align:center;font-size:13px;color:#8a909c;margin-top:18px;}
.rg-footnote a{color:var(--theme);font-weight:bold;cursor:pointer;}
.rg-footnote a:hover{text-decoration:underline;}

/* 申请提交结果（同页提示） */
.rg-result{display:none;text-align:center;padding:30px 10px;}
.rg-result.show{display:block;animation:rgPanelIn .4s ease;}
.rg-result-ic{width:74px;height:74px;border-radius:50%;background:var(--theme-soft);color:var(--theme);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.rg-result-ic svg{width:40px;height:40px;}
.rg-result-title{font-size:22px;font-weight:800;color:#1d2433;margin-bottom:10px;}
.rg-result-sub{font-size:14px;color:#8a909c;line-height:1.7;margin-bottom:22px;}
.rg-result-link{display:block;margin-top:14px;font-size:14px;color:#316ac5;text-decoration:none;}
.rg-result-link:hover{text-decoration:underline;}

/* 响应式 */
@media (max-width:1180px){
  .rg-stage .lg-promo{display:none;}
  .rg-card{flex:0 1 900px;}
}
@media (max-width:860px){
  .rg-card{flex:1 1 auto;flex-direction:column;}
  .rg-side{flex:none;width:100%;flex-direction:row;flex-wrap:wrap;}
  .rg-sidehead{width:100%;}
  .rg-option{flex:1 1 45%;}
  .rg-form{padding:30px 24px;}
}

/* ===== 企业用户注册：提示 / 上传 / 验证码 ===== */
.rg-tip{font-size:12px;color:#e1251b;margin-top:6px;line-height:1.4;}
.rg-uploadrow{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.rg-upload{position:relative;width:118px;height:118px;flex:0 0 118px;border:1.5px dashed #d6d9e0;
  border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;background:#fafbfc;color:#9aa0ac;transition:border-color .2s,background .2s,color .2s;}
.rg-upload:hover{border-color:var(--theme);background:var(--theme-soft);color:var(--theme);}
.rg-upload-plus{font-size:38px;font-weight:300;line-height:1;}
.rg-upload-tx{font-size:13px;}
.rg-licprev{position:relative;width:118px;height:118px;flex:0 0 118px;border:1px solid #e2e2e2;
  border-radius:12px;overflow:hidden;display:none;align-items:center;justify-content:center;background:#f5f6f8;}
.rg-licprev img{width:100%;height:100%;object-fit:cover;display:block;}
.rg-licdel{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:22px;text-align:center;cursor:pointer;}
.rg-licprev.is-pdf::before{content:"PDF";font-size:16px;font-weight:800;color:#e1251b;letter-spacing:1px;}
.rg-licsample-fig{position:relative;flex:0 0 118px;width:118px;height:118px;padding:0;border:1px solid #e2e2e2;
  border-radius:12px;overflow:hidden;cursor:zoom-in;background:#f2f3f6;
  box-shadow:0 6px 16px rgba(31,45,80,.10);transition:box-shadow .25s,transform .25s;}
.rg-licsample-fig:hover{box-shadow:0 10px 22px rgba(31,45,80,.18);transform:translateY(-1px);}
.rg-licsample-fig img{width:100%;height:100%;object-fit:contain;padding:6px;display:block;}
.rg-licsample-tag{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);height:22px;line-height:22px;
  padding:0 12px;border-radius:11px;font-size:12px;color:#fff;background:rgba(20,24,33,.72);white-space:nowrap;}
.rg-captcharow{display:flex;gap:12px;align-items:center;}
.rg-captcha-input{flex:1;}
.rg-captcha-img{flex:0 0 118px;width:118px;height:44px;border:1px solid #e2e2e2;border-radius:9px;
  cursor:pointer;background:#f7fafc;object-fit:cover;}

/* ===== 企业注册：选填项折叠面板 ===== */
.rg-collapse{margin-bottom:18px;border:1px solid #e9ebf0;border-radius:10px;background:#fafbfc;overflow:hidden;}
.rg-collapse.open{border-color:var(--theme);background:#fff;box-shadow:0 0 0 3px var(--theme-soft);}
.rg-collapse-hd{display:flex;align-items:center;height:48px;padding:0 16px;cursor:pointer;user-select:none;
  font-size:15px;color:#8a909c;transition:color .2s;}
.rg-collapse-hd:hover{color:var(--theme);}
.rg-collapse-tx{font-weight:600;}
.rg-collapse-arrow{margin-left:auto;width:18px;height:18px;flex:0 0 18px;transition:transform .25s;}
.rg-collapse.open .rg-collapse-arrow{transform:rotate(180deg);}
.rg-collapse-bd{display:none;padding:6px 16px 16px;}
.rg-collapse.open .rg-collapse-bd{display:block;}
.rg-collapse-bd .rg-field:last-child{margin-bottom:0;}

/* ===== 营业执照示例大图 ===== */
.rg-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(20,24,33,.62);padding:30px;cursor:zoom-out;}
.rg-lightbox.show{display:flex;}
.rg-lightbox-card{position:relative;cursor:default;background:#fff;border-radius:12px;padding:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);}
.rg-lightbox-card img{display:block;width:min(520px,86vw);height:auto;border-radius:6px;}
.rg-lightbox-close{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border:0;border-radius:50%;
  background:#fff;color:#333;font-size:18px;line-height:34px;text-align:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3);}
.rg-lightbox-close:hover{color:var(--theme);}