/* ============================================================
   登录 / 注册（login.php）—— 手写 CSS2，只服务这一页
   inc/header.php 按页面名自动挂这一份（assets/css/p-login.css）。

   原版：src/components/auth/login-view.tsx（Tailwind v4 + shadcn）
   参照版 DOM：/tmp/ref_login.html（Next.js 在 3010 跑着，取的是实时渲染）
   ★ 本页的卡片/品牌栏骨架和参照版是同一套类名序列，数值直接从编译产物里查
     （矽岛音乐项目-latest/.next/static/css/3a69b6a727df9455.css），不凭记忆：
       --radius 被项目改成了 12px ⇒ rounded-md 10 / rounded-lg 12 / rounded-xl 16
       --radius-2xl 16 / --radius-3xl 24 / max-w-5xl 1024
     ★ 参照版 preflight 里有 `svg{display:block;vertical-align:middle}`，
       所以**每个图标都要自己写 display:block**（style.css 里没有这条全局规则）。
       不写的话图标会退回行内，行盒被撑高、含有图标的块整体高 5~6px。

   ★ 本页的手艺（CSS2 里没有 flex/grid，见 scripts/_PORTING_GUIDE.md 第 2 节）：
     · 等宽两栏 + 两栏**等高**（原版 grid lg:grid-cols-2 items-stretch）→
       display:table + table-layout:fixed，两格天然等高。这里不能用 float：
       品牌栏比卡片高约 96px，浮动的话卡片会各高各的，少一截背景和边框。
     · 2×2 特性网格 → 每行一张表（表格的 border-spacing 首尾也留一份，
       两行做进同一张表还得再抵行首行尾，反而绕）
     · 一行里的控件（Tab 条 / 卡片头 / 输入框里的图标）→ 表格单元格或行内块
   ============================================================ */

/* ---- 内容容器：原版 max-w-5xl mx-auto pb-6 ----
   .page-info 已经给了 1280 上限和左右 48 的内边距，这里再收一道 1024。 */
.lgi-wrap { max-width: 1024px; margin: 0 auto; padding-bottom: 24px; }

/* ---- 两栏骨架：原版 grid lg:grid-cols-2 gap-8 items-stretch ----
   只做桌面这一档（本站按 1280 排，探针也跑在 1377 宽）。
   表格的 border-spacing 连最左/最右也各留一份 32，所以宽度补 64、整体左移 32：
   两格的内容宽才是 (1024−32)/2 = 496，左右沿都落在容器边上。
   ★ border-spacing 是继承属性 —— 这张表**里面**每一张表都得自己写死。 */
.lgi-grid {
  display: table; table-layout: fixed;
  width: 100%; width: calc(100% + 64px);
  border-collapse: separate; border-spacing: 32px 0;
  margin-left: -32px;
}
.lgi-grid > * { display: table-cell; width: 50%; vertical-align: top; }

/* ============================================================
   一、左栏：品牌介绍
   hidden lg:flex flex-col justify-between rounded-3xl
   bg-gradient-to-br from-[#5B8FA8] to-[#3A6B8A] p-10 text-white relative overflow-hidden
   ============================================================ */
/* ★ justify-between 在这边是空转：这一栏本来就比右边卡片高（约 548 vs 452），
     内容从顶部自然排到底，两端对齐没有可分配的空隙。若哪天右卡片反超，
     这里会变成「底部留白」，而不是「特性卡贴底」—— 已知的小偏离，不值得
     为它把整栏改成绝对定位。
   ★ position:relative 是给下面两颗装饰圆当包含块的（原版就有）。
     父级是 table-cell —— 「单元格不做包含块」那个毛病是 IE6/7 的，IE8 起就修了，
     Trident 11 认。这是本文件里唯一没在 IE 里实测过的一条：万一真不认，
     两颗圆会以视口为包含块跑到屏幕右上/左下（那是唯一的表现）。 */
.lgi-brand {
  position: relative; overflow: hidden;
  padding: 40px;                                   /* p-10 */
  border-radius: 24px;                             /* rounded-3xl = 1.5rem */
  color: #FFFFFF;
  /* to bottom right = 135deg 方向；老浏览器没有渐变就只剩白字（同 .mu-hero-bg，
     站内所有渐变都不给 IE9 兜底色，见 style.css 开头的兼容说明） */
  background: linear-gradient(to bottom right, #5B8FA8 0%, #3A6B8A 100%);
}
/* 两颗装饰圆：
     absolute -top-12 -right-12 w-56 h-56 rounded-full bg-white/10
     absolute -bottom-20 -left-12 w-72 h-72 rounded-full bg-white/5
   ★ 绝对定位的包含块是**内边距盒**，而内边距盒的左上角就在外框左上角
     （只剥掉边框，不含 padding），所以 −48 / −80 照抄，不用再加 40。 */
.lgi-dot-a {
  position: absolute; top: -48px; right: -48px;
  width: 224px; height: 224px; border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}
.lgi-dot-b {
  position: absolute; bottom: -80px; left: -48px;
  width: 288px; height: 288px; border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
}
/* 原版两块内容各挂一个 relative —— 同层里定位元素画在普通流之上，
   不给内容加这一条，装饰圆会盖在文字上。 */
.lgi-brand-top, .lgi-brand-ft { position: relative; }

/* 品牌头：flex items-center gap-3 mb-8（只有一个子元素，flex 和 gap 都空转） */
.lgi-brand-hd { margin-bottom: 32px; }
.lgi-brand-nm { font-size: 20px; line-height: 28px; font-weight: 700; }   /* text-xl font-bold */
.lgi-brand-sub { font-size: 12px; line-height: 16px; opacity: 0.8; }     /* text-xs opacity-80 */

/* 大标题：text-3xl font-bold leading-tight mb-3
   leading-tight = 1.25 ⇒ 行高 30 × 1.25 = 37.5（写 px，不写系数） */
.lgi-brand-h2 { margin-bottom: 12px; font-size: 30px; line-height: 37.5px; font-weight: 700; }
/* 说明行：text-sm opacity-85 leading-relaxed ⇒ 14 × 1.625 = 22.75 */
.lgi-brand-p { font-size: 14px; line-height: 22.75px; opacity: 0.85; }

/* ---- 2×2 特性网格：原版 relative grid grid-cols-2 gap-4 mt-10 ----
   列间距 16 用 border-spacing（首尾各一条用负外边距抵掉，同 .ui-grid3），
   行间距 16 用第二张表的上外边距。 */
.lgi-brand-ft { margin-top: 40px; }                                   /* mt-10 */
.lgi-frow {
  display: table; table-layout: fixed;
  width: 100%; width: calc(100% + 32px);
  border-collapse: separate; border-spacing: 16px 0;
  margin-left: -16px;
}
.lgi-frow2 { margin-top: 16px; }                                      /* gap-4 的第二行 */
.lgi-frow > * { display: table-cell; width: 50%; vertical-align: top; }

/* 特性卡：bg-white/10 rounded-2xl p-4 border border-white/10
   ★ 原版还有 backdrop-blur —— IE 没有 filter:blur/backdrop-filter（也不许写），
     这里是纯半透明白底、不糊背后的圆，已知偏离（同 .mu-hero 那条注释）。 */
.lgi-feat {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;                            /* rounded-2xl = 1rem */
  background-color: rgba(255, 255, 255, 0.1);
}
/* 图标 w-5 h-5 mb-2：20×20、下距 8。display:block 是补参照版 preflight 那条
   （见文件头）。它是块级，卡片内容高 = 20 + 8 + 两行文字，和参照版一致。 */
.lgi-feat-ic { display: block; width: 20px; height: 20px; margin-bottom: 8px; }
.lgi-feat-t { font-size: 14px; line-height: 20px; font-weight: 600; }   /* text-sm font-semibold */
/* text-[11px] opacity-80 mt-0.5 leading-relaxed ⇒ 11 × 1.625 = 17.875 */
.lgi-feat-d { margin-top: 2px; font-size: 11px; line-height: 17.875px; opacity: 0.8; }

/* ============================================================
   二、右栏：登录 / 注册卡片
   bg-card border border-border rounded-3xl p-8 md:p-12
   ============================================================ */
.lgi-card {
  padding: 48px;                                  /* md:p-12（桌面档） */
  border: 1px solid #D9DFE2;                      /* border-border */
  border-radius: 24px;                            /* rounded-3xl */
  background-color: #FAFCFD;                      /* bg-card */
}

/* ---- Tab 条：flex bg-muted/60 rounded-xl p-1 mb-8 ----
   两个 50% 的格子用表格。内边距 4 落在表格盒上（原版是 flex 容器的 p-1），
   格子里那两块胶囊各占一半。
   ★ 表格在单元格里，border-spacing 会从 .lgi-grid 继承下来，必须写 0。 */
.lgi-tabs {
  display: table; table-layout: fixed;
  width: 100%; border-collapse: separate; border-spacing: 0;
  padding: 4px;                                   /* p-1 */
  margin-bottom: 32px;                            /* mb-8 */
  border-radius: 16px;                            /* rounded-xl */
  background-color: rgba(230, 236, 239, 0.6);     /* bg-muted/60 */
}
/* 胶囊的**几何**挂在元素选择器上（而不是 .lgi-tab-on/off）：app.js 的公共委托
   在切 Tab 时会把这两个 span 的 className 整个换掉（见 login.php 里的说明），
   类名被抹掉的那一瞬间也不能塌。状态色才是 .lgi-tab-on / .lgi-tab-off 的活。 */
.lgi-tabs > span {
  display: table-cell; width: 50%; vertical-align: middle; text-align: center;
  height: 36px;                                   /* py-2(8×2) + 行高 20 */
  padding: 8px 0;
  border-radius: 12px;                            /* rounded-lg */
  font-size: 14px; line-height: 20px; font-weight: 500;   /* text-sm font-medium */
  white-space: nowrap; cursor: pointer;
  -ms-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 选中：bg-background text-primary shadow-sm */
.lgi-tab-on {
  background-color: #EEF5F8;
  color: #608DA4;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
/* 未选中：text-muted-foreground hover:text-foreground */
.lgi-tab-off { color: #616B70; }
.lgi-tab-off:hover { color: #111C22; }

/* ---- 错误提示条：#auth-error ----
   hidden rounded-lg px-3 py-2 mb-5 text-sm text-left（底色/字色/边框是页面上的
   内联样式，那三条跟着 JS 走，这里只管几何）。
   ★ 不写 display：显示/隐藏由 .hidden（style.css 里带 !important）和 app.js 管，
     这里声明 display 会跟它打架。 */
.lgi-err { padding: 8px 12px; border-radius: 12px; margin-bottom: 20px;
           font-size: 14px; line-height: 20px; text-align: left; }

/* ---- 两个表单的竖向间距：原版登录 space-y-5 = 20、注册 space-y-4 = 16 ----
   ★ 选择器用 id 而不是类名，是为了躲 app.js：它切 Tab 时会把
     #form-login / #form-register 的 className 整个换成 Tailwind 那串
     （assets/js/app.js:3310-3311），类名一旦被抹掉，`.lgi-form > * + *`
     就失效、整个表单的字段间距会塌成 0。id 不会被 className 赋值碰到。
   ★ 用 > * + * 而不是给每个字段 margin-top：第一个字段不该有上边距。 */
#form-login > * + * { margin-top: 20px; }
#form-register > * + * { margin-top: 16px; }

/* 字段组：label + 控件，间距 8（space-y-2）—— 用公共件 .ui-fld（style.css 4447） */

/* 带图标的输入框：原版是 relative 的壳 + 绝对定位的图标 + pl-9 的 input */
.lgi-inwrap { position: relative; display: block; }
/* 左侧图标：absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground
   IE 没有 transform，居中用「top:50% + 负外边距（自身高度一半）」，
   位移写在 span 上（行内 svg 上的定位在 IE 里没把握，见 style.css 4173 行）。 */
.lgi-in-ico {
  position: absolute; left: 12px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  color: #616B70;                                 /* text-muted-foreground */
}
.lgi-in-ico svg { display: block; width: 16px; height: 16px; }
/* pl-9 = 36（给左边的图标让位）；密码框右边还有一颗眼睛按钮，再加 pr-9 */
.lgi-in-l { padding-left: 36px; }
.lgi-in-lr { padding-left: 36px; padding-right: 36px; }

/* 密码显示/隐藏：absolute right-3 top-1/2 -translate-y-1/2 hover:text-foreground
   它本身是 <button>，得把 UA 的边框/底色/内边距清干净（* 选择器只清了 margin/padding）。 */
.lgi-pwbtn {
  position: absolute; right: 12px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  padding: 0; border: 0; background: none;
  color: #616B70; cursor: pointer;
}
.lgi-pwbtn:hover { color: #111C22; }
.lgi-pwbtn svg { display: block; width: 16px; height: 16px; }

/* ---- 记住我 / 忘记密码？：原版 flex items-center justify-between text-xs ----
   三个孩子：16 的复选框 | 「记住我」（原版 flex-1）| 右端的「忘记密码？」。
   两头的用浮动，中间的标签跟着左浮动 —— 三件都是 16 高，顶对齐就是居中对齐
   （text-xs 在 IE 里报系数，行高写死 16，同 .lgi-foot）。
   ★ 不复刻 flex-1 的那点余量：原版中间那块会一直伸到按钮左边，
     原版点那片空白也算点标签；这里标签只有文字那么宽（那是一片没有底色/边框的
     区域，画面上看不出来，只有点击热区小一点）。要一模一样得给标签补一段宽度，
     不值得为它多一层壳。
   ★ 行高/间距和原版一致：与密码框、提交按钮各 20（#form-login > * + *）。 */
.lgi-rem { overflow: hidden; }                          /* 包住两头的浮动 */
/* 复选框：原版是 Radix 的 Checkbox —— size-4(16) rounded-[4px] border border-input
   shadow-xs，选中 data-[state=checked]:bg-primary + text-primary-foreground（白勾）。
   IE 改不动原生复选框的样子，所以：**真 input 透明铺满 16×16 压在自绘方块上**
   （定位元素画在静态元素之上，点方块点到的是那个 input 自己，不靠 JS；
   键盘 Tab 过去也还是它，焦点环见下面那条）。 */
.lgi-ck-box { float: left; position: relative; width: 16px; height: 16px; cursor: pointer; }
.lgi-ck-in {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 16px; height: 16px; margin: 0; padding: 0;
  opacity: 0; cursor: pointer;                          /* opacity 不影响点击（同 .pay-radio） */
}
.lgi-ck-mk {
  display: block; width: 16px; height: 16px;
  border: 1px solid #D9DFE2;                            /* border-input */
  border-radius: 4px;                                   /* rounded-[4px] */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);          /* shadow-xs（同 .ui-input） */
  font-size: 0;                                         /* 吃掉 svg 前后的空白 */
}
/* 勾：lucide-check size-3.5 = 14×14，颜色跟 currentColor（选中态= primary-foreground）。
   全局 box-sizing 是 border-box（style.css 53 行），16 减左右各 1 的边框正好 14，
   勾填满内容盒。没选中用 visibility 藏（不是 display：位置不动，省一次重排）。 */
.lgi-ck-mk svg { display: block; width: 14px; height: 14px; color: #FCFCFC; visibility: hidden; }
/* 选中：data-[state=checked]:bg-primary / border-primary */
.lgi-ck-in:checked + .lgi-ck-mk { background-color: #608DA4; border-color: #608DA4; }
.lgi-ck-in:checked + .lgi-ck-mk svg { visibility: visible; }
/* 键盘焦点：原版 focus-visible:border-ring focus-visible:ring-[3px]。
   ★ IE 没有 :focus-visible，所以照 .pay-radio 那条的老办法配一个 IE 专属的
     @media（Chrome 认不得这条件、整块跳过，行为跟只有上面那条时逐字节一样）。 */
.lgi-ck-in:focus-visible + .lgi-ck-mk {
  border-color: #608DA4; box-shadow: 0 0 0 3px rgba(96, 141, 164, 0.5);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .lgi-ck-in:focus + .lgi-ck-mk {
    border-color: #608DA4; box-shadow: 0 0 0 3px rgba(96, 141, 164, 0.5);
  }
}
/* 「记住我」：text-muted-foreground ml-2.5(10)。它是个 <label for="remember">，
   点文字能切换；点方块走的是压在方块上的那个 input —— 和原版一样哪儿都能点。 */
.lgi-rem-lb { float: left; margin-left: 10px; font-size: 12px; line-height: 16px; color: #616B70; cursor: pointer; }
/* 「忘记密码？」：text-primary hover:underline，原版是个 <button> 只弹 toast。
   清掉 UA 的边框/底色（* 只清了 margin/padding，同 .lgi-pwbtn 那条）。 */
.lgi-forgot {
  float: right; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 400;
  color: #608DA4; cursor: pointer;
}
.lgi-forgot:hover { background: none; color: #608DA4; text-decoration: underline; }

/* ---- 提交按钮：Button 基类 + w-full h-11 text-base ----
   h-11 = 44。行高按 .ui-btn 那套公式算：盒高 − 上下内边距 − 边框 = 44 − 16 − 0 = 28
   （内容盒正好被一行填满，文字自然居中，不去赌 button 的 UA 居中）。 */
.lgi-btn-sub {
  display: block; width: 100%; height: 44px;
  padding: 8px 16px;
  font-size: 16px; line-height: 28px;             /* text-base */
}

/* 表单脚下的换行提示：text-[11px] text-muted-foreground text-center leading-relaxed
   ⇒ 11 × 1.625 = 17.875。
   ★ 原版登录面板就这么一句**纯文字**（「还没有账号？切到「注册」创建一个」），
     注册面板里没有对应的一行 —— 所以 .lgi-link（原来给「去注册 / 去登录」两个链接用的）
     一并删了，本页没有别的链接用它。 */
.lgi-note { font-size: 11px; line-height: 17.875px; text-align: center; color: #616B70; }

/* ---- 卡片脚：mt-6 text-center text-xs text-muted-foreground ----
   ★ text-xs 在 IE 里报的是系数，这里写死 12/16（同 .ui-label-xs 那条注释）。 */
.lgi-foot { margin-top: 24px; text-align: center; font-size: 12px; line-height: 16px; color: #616B70; }
/* ml-1 inline-flex items-center text-primary hover:underline */
.lgi-foot-a { display: inline-block; margin-left: 4px; color: #608DA4; text-decoration: none; }
.lgi-foot-a:hover { color: #608DA4; text-decoration: underline; }
/* 那颗 chevron（w-3 h-3）比 16 的行盒矮，垂直居中要 2px：(16−12)/2。
   位移同样走 span（见 .lgi-in-ico 的注释）。 */
.lgi-foot-ic { display: inline-block; width: 12px; height: 12px; vertical-align: top; position: relative; top: 2px; }
.lgi-foot-ic svg { display: block; width: 12px; height: 12px; }

/* ============================================================
   三、移动端特性卡（原版 lg:hidden grid grid-cols-2 gap-3 mt-6）
   四张卡排 2×2。表格的单元格**不会换行**，所以一行一张表、两张上下摞 ——
   （两行做进同一张表也行，但那样还得把行首行尾那份 border-spacing 再抵一次，反而绕）。
   ★ 容器挂 .only-mobile（style.css:166，display:none !important）：桌面档没有它，
     和原版 lg:hidden 一致。窄档要打开是在第四节里压回来的（!important + 两个类）。
   ============================================================ */
.lgi-mcards {
  display: table; table-layout: fixed;
  width: 100%; width: calc(100% + 24px);
  border-collapse: separate; border-spacing: 12px 0;   /* gap-3 */
  margin-top: 24px;                                    /* mt-6 */
  margin-left: -12px;
}
.lgi-mcards > * { display: table-cell; width: 50%; vertical-align: top; }
/* 第二行与第一行的间距 = gap-3 的 12（同一个做法见品牌栏的 .lgi-frow2） */
.lgi-mcards + .lgi-mcards { margin-top: 12px; }
/* 卡片：bg-card border border-border rounded-2xl p-4 flex items-start gap-3
   → 内层再来一张表（图标 36 定宽 + 文字自适应），gap-3 用 padding-left 补 */
.lgi-mcard {
  padding: 16px;
  border: 1px solid #D9DFE2;
  border-radius: 16px;
  background-color: #FAFCFD;
}
.lgi-mrow { display: table; table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; }
.lgi-mrow > * { display: table-cell; vertical-align: top; }
/* 图标底：w-9 h-9 rounded-lg bg-primary/10 + 水平的居中。
   行高 = 盒高 + font-size:0 那套（同 .ym-manage-ic）：字号归零后基线落在行盒正中，
   vertical-align:middle 的图标正好对中，不用绝对定位。 */
.lgi-mico {
  width: 36px; height: 36px; border-radius: 12px;      /* rounded-lg = 12 */
  background-color: rgba(96, 141, 164, 0.1);           /* bg-primary/10 */
  text-align: center; font-size: 0; line-height: 36px;
}
.lgi-mico svg { display: inline-block; vertical-align: middle; width: 16px; height: 16px; color: #608DA4; }
.lgi-mbody { padding-left: 12px; }                     /* gap-3 */
.lgi-mt { font-size: 14px; line-height: 20px; font-weight: 600; color: #111C22; }   /* text-sm font-semibold */
/* text-[11px] text-muted-foreground mt-0.5 leading-relaxed ⇒ 11 × 1.625 */
.lgi-md { margin-top: 2px; font-size: 11px; line-height: 17.875px; color: #616B70; }

/* ============================================================
   四、窄档（<1024）：上下结构（2026-09-24 用户指定）
   ★ 断点取自编译产物，不是我猜的：原版这两条都写在同一档里 ——
       .lg\:flex   → @media (min-width:64rem){display:flex}
       .lg\:hidden → @media (min-width:64rem){display:none}
     64rem = 1024px，正是 Tailwind 的 lg。
   ★ 窄档的次序（原版就是这么排的，DOM 一个字没改，全靠 CSS）：
       登录/注册卡片 → 四张特性卡
     左栏品牌介绍在这一档**整块不出现**（原版是 hidden lg:flex，不是挪到下面去）；
     外层 grid lg:grid-cols-2 单列化，卡片自己就满宽了。
   ★ 卡片内边距 p-8 md:p-12：768 以下 32，768~1023 与桌面同为 48（所以只压 767）。
   ============================================================ */
@media (max-width: 1023px) {
  /* 两栏骨架退成单栏。表格那一套（table-layout / border-spacing / 负外边距）要一起收掉：
     留着的话只剩一个单元格时列宽仍按 50% 算，卡片会缩在左边半幅。 */
  .lgi-grid { display: block; width: auto; margin-left: 0; }
  .lgi-grid > * { display: block; width: auto; }
  .lgi-brand { display: none; }                       /* hidden lg:flex */
  /* 特性卡在这一档打开。容器挂着 .only-mobile（style.css:166 的 display:none !important），
     所以要 !important + 更高的特异性：两个类 (0,2,0) 压过一个类 (0,1,0)。
     （页头那颗汉堡走的是同一路子，它用 ID 压，公共层那条通用类动不得。） */
  .only-mobile.lgi-mcards { display: table !important; }
}
@media (max-width: 767px) {
  .lgi-card { padding: 32px; }                        /* p-8；md 以上才是 p-12 的 48 */
}