/* 米宝五育成长数据平台 × 何氏眼科 —— 页面样式（可直接复制/修改） */
:root{
    --txt:#22405f; --sub:#7d97b6; --blue:#2e6fb8; --blue2:#4f9be0;
    --green:#2f9e5f; --yellow:#f5c542; --red:#ff7a7a; --line:#e2edf8;
    --shadow:0 10px 30px rgba(46,111,184,.08);
    --c-blue:#3a8fd8; --c-green:#52b788; --c-yellow:#f5a623; --c-red:#e05656; --c-purple:#7c6bd4;
  }
  *{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei","PingFang SC",sans-serif}
  html,body{width:100%;height:100%;overflow:hidden;background:#e9f2fb}
  #stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;background:#f4f9ff}
  .layer{position:absolute;inset:0;overflow:hidden;display:none}
  .layer.on{display:flex}
  /* ================= 第一层 ================= */
  #layer1{background:linear-gradient(165deg,#f6fbff 0%,#e9f3fc 55%,#e2eefa 100%);flex-direction:column}
  .ring{position:absolute;border-radius:50%;border:1.5px solid rgba(79,155,224,.13);pointer-events:none}
  .r1{width:560px;height:560px;right:-180px;top:-200px}
  .r2{width:380px;height:380px;right:-60px;top:-120px}
  .r3{width:460px;height:460px;left:-220px;bottom:-240px}
  header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 130px;position:relative;z-index:2}
  .logo-area{display:flex;align-items:center;gap:13px}
  .logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(140deg,#4f9be0,#6cc0f5);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:800;box-shadow:0 6px 16px rgba(79,155,224,.32)}
  .logo-area .nm{font-size:22px;font-weight:800;letter-spacing:2px;color:#1f5288}
  .logo-area .sm{font-size:11px;color:#8aa6c4;letter-spacing:1.5px;margin-top:2px}
  .user{display:flex;align-items:center;gap:12px}
  .role-switch{display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;box-shadow:var(--shadow)}
  .role-switch button{border:0;background:transparent;font-size:12px;color:#6b87a8;padding:5px 12px;border-radius:8px;cursor:pointer;font-family:inherit}
  .role-switch button.on{background:linear-gradient(135deg,#4f9be0,#6cc0f5);color:#fff;font-weight:700}
  .avatar{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px 13px 4px 4px;box-shadow:var(--shadow)}
  .avatar .pic{width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,#9fd0f6,#5aa8e6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
  .avatar .who{font-size:12.5px;font-weight:700;color:#2a68b0}
  .avatar .org{font-size:10px;color:#9db6d2}
  .menu{position:relative;width:860px;margin:6px auto 0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:13px;z-index:2}
  .mi{position:relative;display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:0 22px;height:74px;box-shadow:var(--shadow);cursor:pointer;transition:.2s;overflow:hidden}
  .mi:hover{transform:translateX(6px);box-shadow:0 12px 28px rgba(46,111,184,.14);border-color:#bcdcf5}
  .mi .num{width:32px;height:32px;border-radius:10px;background:linear-gradient(140deg,#eef6ff,#dcecfb);border:1px solid #cfe4f7;
    color:#2e6fb8;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .mi .tt{font-size:19px;font-weight:800;color:#1f5288;letter-spacing:1.5px}
  .mi .tag{font-size:11px;color:#8aa6c4;background:#f2f8fe;border:1px solid #e1eefa;padding:2.5px 10px;border-radius:9px}
  .mi .lk{margin-left:auto;font-size:11.5px;color:#b0782a;background:#fdf6e0;border:1px solid #f3dfae;padding:4px 11px;border-radius:9px;flex-shrink:0}
  .mi .lk.free{color:#2f9e5f;background:#e9f8f0;border-color:#c4e9d4}
  .mi .ar{font-size:15px;color:#a9c8e4;flex-shrink:0}
  .mi.open2{background:linear-gradient(120deg,#f4fbff,#fff)}
  .mi.open2::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3.5px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#4f9be0,#6cc0f5)}
  .subwrap{display:none;flex-direction:column;gap:9px;margin:-4px 0 -2px 44px}
  .subwrap.show{display:flex}
  .si{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.9);border:1px dashed #c9e0f4;border-radius:11px;
    padding:0 18px;height:52px;cursor:pointer;transition:.2s}
  .si:hover{border-style:solid;transform:translateX(4px)}
  .si .no{font-size:12px;font-weight:800;color:#9db6d2}
  .si .t{font-size:15.5px;font-weight:700;color:#2a68b0}
  .si .d{font-size:11px;color:#9db6d2;margin-left:6px}
  .si .lk{margin-left:auto;font-size:11px;color:#b0782a;background:#fdf6e0;border:1px solid #f3dfae;padding:3px 10px;border-radius:8px}
  .si .lk.free{color:#fff;background:linear-gradient(135deg,#3fbf8f,#2fae8b);border:none;font-weight:700}
  .si.vision{border:1.5px solid #bfe6d4;background:linear-gradient(120deg,#f2fbf7,#fdfffe)}
  .foot{height:52px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:11px;color:#9db6d2;position:relative;z-index:2}
  .foot b{color:#7fa3c9}
  #toast{position:absolute;left:50%;bottom:56px;transform:translateX(-50%) translateY(16px);opacity:0;transition:.25s;z-index:999;
    background:rgba(34,64,95,.92);color:#fff;font-size:13.5px;padding:11px 24px;border-radius:11px;pointer-events:none}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* ================= 二层A：五育画像（校/院/系） ================= */
  #layer5y{background:#eef5fc}
  .side{width:200px;background:linear-gradient(180deg,#e8f3fd,#e1eefb);border-right:1px solid #d5e6f6;display:flex;flex-direction:column;flex-shrink:0}
  .side .slogo{height:56px;display:flex;align-items:center;gap:9px;padding:0 16px;border-bottom:1px solid #d5e6f6}
  .side .slogo .ic{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#4f9be0,#6cc0f5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
  .side .slogo .nm{font-size:15px;font-weight:800;color:#1f5288}
  .side nav{flex:1;padding:8px 0;overflow:hidden}
  .side nav .it{display:flex;align-items:center;gap:9px;padding:9px 18px;font-size:13px;color:#4a6f96;cursor:pointer;border-left:3px solid transparent}
  .side nav .it:hover{background:rgba(79,155,224,.08)}
  .side nav .it.on{background:#fff;color:#2e6fb8;font-weight:800;border-left-color:#4f9be0;box-shadow:0 3px 8px rgba(46,111,184,.08)}
  .side nav .it .ic{font-size:14px;width:18px;text-align:center}
  .side nav .grp{display:flex;align-items:center;justify-content:space-between;padding:9px 18px;font-size:13px;color:#4a6f96;cursor:default}
  .side nav .grp .ic{font-size:14px;width:18px;text-align:center}
  .side nav .grp .cv{font-size:10px;color:#9db6d2}
  .sback{margin:10px 12px 12px;padding:9px 0;text-align:center;font-size:13px;font-weight:700;color:#2e6fb8;background:#fff;
    border:1px solid var(--line);border-radius:10px;cursor:pointer;box-shadow:var(--shadow)}
  .sback:hover{transform:translateY(-1px)}
  .l5main{flex:1;display:flex;flex-direction:column;min-width:0;padding:14px 20px 12px;overflow:hidden}
  .banner{position:relative;border-radius:14px;padding:12px 26px;background:linear-gradient(100deg,#3a7fc9,#5ea7e8);color:#fff;
    display:flex;align-items:center;justify-content:space-between;box-shadow:0 8px 20px rgba(58,127,201,.3)}
  .banner h2{font-size:21px;font-weight:800;letter-spacing:1px}
  .banner .bd{font-size:12px;opacity:.9;margin-top:3px}
  .banner .rt{display:flex;align-items:center;gap:14px;font-size:12px}
  .banner .rt .live{display:flex;align-items:center;gap:6px}
  .banner .rt .live i{width:8px;height:8px;border-radius:50%;background:#7bffc4;box-shadow:0 0 8px #7bffc4;animation:blink 1.6s infinite}
  @keyframes blink{50%{opacity:.4}}
  .banner .rt .backb{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);border-radius:9px;padding:6px 14px;cursor:pointer;font-weight:700}
  .banner .rt .backb:hover{background:rgba(255,255,255,.32)}
  .view{display:none;flex:1;min-height:0;flex-direction:column;gap:10px;padding-top:10px}
  .view.on{display:flex}
  .kpi6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
  .kpi6 .k{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 14px;box-shadow:var(--shadow)}
  .kpi6 .k .v{font-size:22px;font-weight:800;font-family:"DIN Alternate",Arial,sans-serif;line-height:1.15}
  .kpi6 .k .v small{font-size:11px;font-weight:400;color:#8aa6c4}
  .kpi6 .k .l{font-size:11px;color:#8aa6c4;margin-top:1px}
  .kblue{color:#2e6fb8}.kgreen{color:#2f9e5f}.kyellow{color:#e09015}.kred{color:#e05656}.kcyan{color:#1d87b8}.kpurple{color:#6f5bd0}
  .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:0}
  .g2a{display:grid;grid-template-columns:2fr 1fr;gap:10px;min-height:0}
  .g2b{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0}
  .pc{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px 6px;display:flex;flex-direction:column;min-height:0}
  .pc h4{font-size:14px;font-weight:800;color:#2a68b0;display:flex;align-items:center;gap:6px;padding-bottom:5px;border-bottom:1px solid #eef5fb}
  .pc h4 .s{margin-left:auto;font-size:10.5px;color:#9db6d2;font-weight:400}
  .pc .ch{flex:1;min-height:0}
  .kpi6.k3{grid-template-columns:repeat(3,1fr)}
  .fin .finbox{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center;padding:2px 2px 6px}
  .fchips{display:flex;gap:8px;flex-wrap:wrap}
  .fchips span{font-size:12px;font-weight:700;color:#2e6fb8;background:#e8f3ff;border:1px solid #c6e2f8;border-radius:9px;padding:5px 12px}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fi{background:#f4faff;border:1px solid #e2eefa;border-radius:10px;padding:6px 12px}
  .fi em{display:block;font-style:normal;font-size:11px;color:#8aa6c4}
  .fi b{font-size:16px;color:#2a68b0;font-weight:800}
  .rankrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:#4a6f96}
  .rankrow em{font-style:normal;font-weight:700;color:#2a68b0}
  .rankrow span{font-weight:700;border-radius:9px;padding:5px 14px;font-size:13px}
  .rankrow span.g{background:#e6f7ee;color:#2e9e63;border:1px solid #bfe9d2}
  .rankrow span.o{background:#fdf1e2;color:#c07815;border:1px solid #f3dcbc}
  .aicell{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:6px 2px 4px}
  .ai{background:#f4faff;border:1px solid #e2eefa;border-left:3px solid #4f9be0;border-radius:10px;padding:8px 12px;font-size:12px;color:#4a6f96;line-height:1.55;display:flex;align-items:center}
  .ai b{color:#2a68b0}
  table{width:100%;border-collapse:collapse;font-size:11.5px}
  thead th{color:#2a68b0;font-weight:700;text-align:left;padding:3px 8px;border-bottom:1px solid var(--line);font-size:11px}
  tbody td{padding:3.5px 8px;color:#4a6f96;border-bottom:1px dashed #e4eef8}
  .chip{display:inline-block;font-size:10px;padding:1.5px 8px;border-radius:8px;margin-right:4px}
  .chip.y{background:#fdf6e0;color:#c08a1a;border:1px solid #f3dfae}
  .chip.b{background:#e8f3ff;color:#2e6fb8;border:1px solid #c6e2f8}
  .chip.r{background:#ffe3e3;color:#d64545;font-weight:800}
  .chip.o{background:#ffefd0;color:#c07815;font-weight:800}
  .chip.g{background:#e2f5ea;color:#2f9e5f;font-weight:800}
  tr.rowR{background:#fdeaea}tr.rowO{background:#fff4dd}tr.rowY{background:#fdf6e0}tr.rowG{background:#e9f8f0}
  /* ================= 二层B：眼健康 ================= */
  #layerEye{background:linear-gradient(180deg,#f2f9ff 0%,#e6f2fd 45%,#dbecfa 100%);flex-direction:column}
  .h2{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;position:relative}
  .h2::after{content:"";position:absolute;bottom:0;left:40px;right:40px;height:1px;background:linear-gradient(90deg,transparent,#bcdcf5,transparent)}
  .h2 .back{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 16px;
    font-size:13px;font-weight:700;color:#2e6fb8;cursor:pointer;box-shadow:var(--shadow)}
  .h2 .back:hover{transform:translateX(-2px)}
  .h2 .tt{text-align:center}
  .h2 .tt h1{font-size:30px;font-weight:800;letter-spacing:3px;
    background:linear-gradient(180deg,#2a68b0,#57abeb);-webkit-background-clip:text;background-clip:text;color:transparent}
  .h2 .tt .p{font-size:12.5px;color:#8aa6c4;margin-top:3px}
  .h2 .brandbox{display:flex;align-items:center;gap:8px;font-size:15.5px;color:#2e6fb8;font-weight:700}
  .h2 .brandbox .eye{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3a8fd8,#6cc0f5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
  .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:12px 40px 0}
  .kpi{position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 16px;box-shadow:var(--shadow);overflow:hidden}
  .kpi::after{content:"";position:absolute;left:0;top:0;width:100%;height:2.5px;background:linear-gradient(90deg,var(--blue2),transparent)}
  .kpi .v{font-size:24px;font-weight:800;font-family:"DIN Alternate",Arial,sans-serif;color:#1f5288;line-height:1.15}
  .kpi .v small{font-size:12px;color:#8aa6c4;font-weight:400}
  .kpi .l{font-size:11.5px;color:#8aa6c4;margin-top:1px}
  .tickerbar{margin:12px 40px 0;background:linear-gradient(90deg,#eaf6f0,#fff,#fdf6e0);border:1px solid #dbeee2;border-radius:11px;
    height:40px;display:flex;align-items:center;overflow:hidden;position:relative}
  .tickerbar .cap{flex-shrink:0;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:#2f9e5f;
    background:#e2f5ea;border-right:1px solid #d4e9dc;height:100%;padding:0 16px;z-index:2}
  .tkv{flex:1;overflow:hidden;position:relative;height:100%}
  .tkv ul{list-style:none;display:flex;align-items:center;height:100%;position:absolute;white-space:nowrap;animation:rollh 26s linear infinite}
  .tkv li{font-size:12.5px;color:#5f7fa5;padding:0 26px;display:inline-flex;align-items:center;gap:7px}
  .tkv b{color:#1f5288}
  .tkv .st{color:#2f9e5f}.tkv .st.w{color:#c08a1a}
  @keyframes rollh{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  .main{flex:1;display:grid;grid-template-columns:440px 1fr 440px;gap:12px;padding:12px 40px 0;min-height:0}
  .col{display:flex;flex-direction:column;gap:12px;min-height:0}
  .card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
    padding:9px 14px 7px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .card::before{content:"";position:absolute;left:0;top:12px;width:3.5px;height:15px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#4f9be0,#2e6fb8)}
  .card h3{font-size:15px;font-weight:800;color:#2a68b0;display:flex;align-items:center;gap:6px;padding:0 0 6px 7px;border-bottom:1px solid #eef5fb}
  .card h3 .h-sub{margin-left:auto;font-size:11px;color:#9db6d2;font-weight:400}
  .chart{flex:1;min-height:0}
  .map-legend{display:flex;align-items:center;gap:12px;font-size:11px;color:#6b87a8;padding:3px 4px 1px;flex-shrink:0}
  .map-legend .lg{display:inline-flex;align-items:center;gap:4px}
  .map-legend .lg i{width:10px;height:10px;border-radius:50%;display:inline-block;border:1.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.18)}
  .map-legend .sep{color:#c3d6ea}
  .map-legend .sz{display:inline-flex;align-items:center}
  .map-legend .sz i{border-radius:50%;background:#9dc2e2;display:inline-block;margin-right:4px}
  .ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
  .ov{position:relative;border-radius:11px;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;border:1px solid}
  .ov .l{font-size:12px;font-weight:600}
  .ov .v{font-size:22px;font-weight:800;font-family:"DIN Alternate",Arial,sans-serif;line-height:1.15;margin:1px 0}
  .ov .v small{font-size:11px;font-weight:400}
  .ov .d{font-size:10.5px;opacity:.8}
  .ov .em{position:absolute;right:9px;top:7px;font-size:17px;opacity:.85}
  .ov.b1{background:linear-gradient(135deg,#e9f4ff,#f6fbff);border-color:#cfe6f9}.ov.b1 .l,.ov.b1 .v{color:#2e6fb8}
  .ov.b2{background:linear-gradient(135deg,#e5f7fd,#f3fcff);border-color:#c6e7f4}.ov.b2 .l,.ov.b2 .v{color:#1d87b0}
  .ov.b3{background:linear-gradient(135deg,#eaf5ff,#f7fbff);border-color:#d3e6f6}.ov.b3 .l,.ov.b3 .v{color:#3a7fc1}
  .ov.b4{background:linear-gradient(135deg,#ffeded,#fff8f8);border-color:#ffd5d5}.ov.b4 .l,.ov.b4 .v{color:#dd5252}
  .chain{display:flex;align-items:center;justify-content:space-between;flex:1;padding:2px 0}
  .node{text-align:center;flex:1}
  .node .bx{margin:0 auto;width:60px;height:50px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:linear-gradient(160deg,#f3f9ff,#e2f0fd);border:1.5px solid #bcdcf5;color:#2e6fb8;white-space:nowrap}
  .node .bx .lv{font-size:9.5px;color:#8aa6c4}
  .node .bx .nm{font-size:11px;font-weight:700}
  .node .bx.hl{background:linear-gradient(160deg,#4f9be0,#6cc0f5);border-color:#4f9be0;color:#fff}
  .node .bx.hl .lv{color:rgba(255,255,255,.85)}
  .arrow{color:#9dc2e2;font-size:13px}
  .idx{display:flex;gap:9px;padding:6px 2px;align-items:flex-start}
  .idx .num{width:26px;height:26px;border-radius:50%;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .idx.i1 .num{background:linear-gradient(135deg,#4f9be0,#6cc0f5)}
  .idx.i2 .num{background:linear-gradient(135deg,#3fbfa0,#5fd6b7)}
  .idx .tt{font-size:13px;font-weight:700;color:#2a68b0}
  .idx .tags{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 3px}
  .tag{font-size:10.5px;padding:2px 8px;border-radius:10px;font-weight:600}
  .tag.g{background:#e2f7ea;color:#2f9e5f;border:1px solid #b9e8cb}
  .tag.y{background:#fdf6e0;color:#c08a1a;border:1px solid #f3dfae}
  .tag.r{background:#ffeaea;color:#e05656;border:1px solid #ffd0d0}
  .tag.b{background:#e8f3ff;color:#2e6fb8;border:1px solid #c6e2f8}
  .idx .ds{font-size:10.5px;color:#8aa6c4;line-height:1.5}
  .idx+.idx{border-top:1px dashed #e4eef8}
  .loop{display:flex;align-items:center;justify-content:space-around;flex:1}
  .loop .st{text-align:center}
  .loop .ic{width:38px;height:38px;border-radius:11px;background:linear-gradient(160deg,#f1f8ff,#e0effc);border:1.5px solid #c9e4f7;display:flex;align-items:center;justify-content:center;font-size:17px;margin:0 auto}
  .loop .t{font-size:10.5px;color:#4a6f96;margin-top:4px;font-weight:600}
  .loop .ar{font-size:14px;color:#9dc2e2}
  .f2{height:34px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:10.5px;color:#9db6d2}
  .f2 b{color:#7fa3c9}
  /* ---------- 登录页 ---------- */
  #layerLogin{background:linear-gradient(160deg,#eaf4ff 0%,#dcecfb 45%,#d3e7f9 100%);display:none;align-items:center;justify-content:center}
  #layerLogin.on{display:flex}
  .loginbox{width:430px;background:rgba(255,255,255,.94);border:1px solid #cfe4f7;border-radius:22px;box-shadow:0 22px 60px rgba(58,110,170,.18);padding:40px 44px 38px;text-align:center}
  .loginbox.shake{animation:shk .4s}
  @keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
  .llogo{width:64px;height:64px;border-radius:18px;background:linear-gradient(150deg,#3a7fc9,#5ea7e8);color:#fff;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 8px 20px rgba(58,127,201,.35)}
  .loginbox h1{font-size:22px;font-weight:800;color:#22405f;letter-spacing:1px}
  .loginbox .sub{font-size:12px;color:#8aa6c4;margin:6px 0 24px}
  .lg-field{position:relative;margin-bottom:14px;text-align:left}
  .lg-field .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:15px;color:#7fa3c9}
  .lg-field input{width:100%;box-sizing:border-box;height:46px;border:1.5px solid #cfe4f7;border-radius:12px;background:#f7fbff;padding:0 44px 0 40px;font-size:14.5px;color:#22405f;font-weight:600;outline:none;transition:border .2s,box-shadow .2s;letter-spacing:.5px}
  .lg-field input:focus{border-color:#4f9be0;box-shadow:0 0 0 3px rgba(79,155,224,.16);background:#fff}
  .lg-field input::placeholder{color:#a9c1d9;font-weight:400;letter-spacing:0}
  .lg-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;font-size:15px;color:#7fa3c9;padding:4px}
  .lg-eye:hover{color:#2e6fb8}
  .lgbtn{width:100%;height:48px;border:none;border-radius:12px;background:linear-gradient(100deg,#3a7fc9,#5ea7e8);color:#fff;font-size:16px;font-weight:800;letter-spacing:6px;cursor:pointer;margin-top:6px;box-shadow:0 8px 18px rgba(58,127,201,.32);transition:filter .2s,transform .1s}
  .lgbtn:hover{filter:brightness(1.06)}
  .lgbtn:active{transform:scale(.985)}
  .lgerr{height:20px;font-size:12px;color:#e05656;font-weight:700;margin-top:10px;visibility:hidden}
  .lgerr.show{visibility:visible}
  .lgfoot{border-top:1px dashed #e4eef8;margin-top:16px;padding-top:12px;font-size:10.5px;color:#9db6d2;line-height:1.7}
  .lgfoot b{color:#7fa3c9}
  .lgrow{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 12px;font-size:11.5px;color:#7fa3c9}
  .lgrow label{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
  .lgrow a{color:#2e6fb8;text-decoration:none;cursor:pointer}