* { box-sizing: border-box; margin: 0; padding: 0; }
  ::selection { background: #fff; color: #000; }
  body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #070708; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 12px 14px 14px; }
  .bgorbs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .bgorbs i { position: absolute; border-radius: 50%; filter: blur(60px); }
  .o1 { width: 1300px; height: 1300px; background: #ffffff; opacity: .10; top: 50%; left: 50%; margin: -650px 0 0 -650px; filter: blur(90px); animation: drift1 26s ease-in-out infinite alternate; }
  .o2 { width: 300px; height: 300px; background: #a1a1aa; opacity: .15; top: 30%; right: -80px; animation: drift2 32s ease-in-out infinite alternate; }
  .o3 { width: 380px; height: 380px; background: #e4e4e7; opacity: .17; top: 46%; left: 6%; animation: drift1 38s ease-in-out infinite alternate-reverse; }
  .o4 { width: 170px; height: 170px; background: #ffffff; opacity: .15; bottom: 15%; right: 6%; animation: drift2 24s ease-in-out infinite alternate-reverse; }
  @keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(56px, 42px) scale(1.14); } }
  @keyframes drift2 { from { transform: translate(0, 0) scale(1.08); } to { transform: translate(-48px, 56px) scale(.94); } }
  @media (prefers-reduced-motion: reduce) { .bgorbs i { animation: none; } }
  .o2,.o3,.o4 { display: none; }
  .badge { position: relative; z-index: 1; background: rgba(255,255,255,.07); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,.20); color: rgba(255,255,255,.85); font-size: 12px; font-weight: 600; letter-spacing: 2px; padding: 7px 16px; border-radius: 999px; box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28); }
  .icon { position: relative; z-index: 1; margin-top: 10px; width: 50px; height: 50px; border-radius: 17px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 36px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -10px 18px rgba(255,255,255,.05); }
  h1 { position: relative; z-index: 1; margin-top: 8px; font-size: 26px; font-weight: 800; color: #ffffff; }
  .card { position: relative; z-index: 1; margin-top: 12px; flex: 1 0 auto; display: flex; flex-direction: column; background: rgba(255,255,255,.065); -webkit-backdrop-filter: blur(44px) saturate(170%); backdrop-filter: blur(44px) saturate(170%); border: 1px solid rgba(255,255,255,.22); width: 100%; max-width: 430px; border-radius: 30px; padding: 18px 18px 14px; box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.08); }
      .card>* { position: relative; z-index: 1; }
  label { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.88); margin: 10px 0 6px; }
  label:first-child { margin-top: 0; }
  input { width: 100%; font-size: 17px; padding: 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; outline: none; color: #ffffff; background: rgba(255,255,255,.032); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -10px 16px rgba(255,255,255,.04), inset 0 3px 10px rgba(0,0,0,.20); }
  input::placeholder { color: rgba(255,255,255,.34); }
  input:focus { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.085); box-shadow: 0 0 0 4px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.28); }
  .pwdwrap { position: relative; }
  .pwdwrap input { padding-right: 88px; }
  .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; background: transparent; cursor: pointer; color: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; }
  .fieldwrap { position: relative; }
  .fieldwrap input { padding-right: 48px; }
  .clearbtn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; background: transparent; cursor: pointer; display: none; align-items: center; justify-content: center; }
  .clearbtn-show { display: flex; }
  .clearbtn-pwd { right: 46px; }
  .loginstat { margin-top: 8px; font-size: 13px; min-height: 18px; color: rgba(255,255,255,.52); }
  .loginstat.err { color: #ffffff; font-weight: 600; }
  .loginstat.ok { color: rgba(255,255,255,.75); }
  .addrbar { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
  .regionbar { margin-top: 8px; display: flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255,255,255,.68); }
  .regionbar svg { flex: none; color: rgba(255,255,255,.5); }
  .pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 9px 8px 9px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
  .pill span { flex: 1; min-width: 0; font-size: 15px; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .icobtn { flex: none; width: 34px; height: 34px; border: none; background: transparent; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,.72); }
  .icobtn:active { background: rgba(255,255,255,.14); }
  .refreshbtn { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22); }
  .spin svg { animation: rot 0.8s linear infinite; }
  @keyframes rot { to { transform: rotate(360deg); } }
  .inboxhead { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; }
  .inboxtitle { font-size: 19px; font-weight: 800; color: #ffffff; }
  .count { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.38); margin-left: 4px; }
  .live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.55); }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; display: inline-block; box-shadow: 0 0 10px rgba(48,209,88,.9); }
  .empty { padding: 14px 0 10px; display: flex; flex-direction: column; align-items: center; }
  .empty svg { width: 42px; height: 42px; }
  .emptytitle { margin-top: 10px; font-size: 16px; font-weight: 600; color: #ffffff; }
  .emptysub { margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.48); display: flex; align-items: center; gap: 6px; text-align: center; }
  .mail { margin-top: 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 14px 16px; background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(30px) saturate(165%); backdrop-filter: blur(30px) saturate(165%); box-shadow: 0 14px 32px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.42); cursor: pointer; }
  .mail:active { background: rgba(255,255,255,.10); }
  .mailtop { display: flex; align-items: center; gap: 8px; }
  .bluedot { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; flex: none; box-shadow: 0 0 8px rgba(255,255,255,.8); }
  .from { font-size: 17px; font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtime { margin-left: auto; flex: none; font-size: 13px; color: rgba(255,255,255,.38); }
  .chev { flex: none; color: rgba(255,255,255,.38); transition: transform .2s; display: flex; }
  .mail.open .chev { transform: rotate(180deg); }
  .mailrow { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
  .subject { flex: 1; min-width: 0; font-size: 15px; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .codebox { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.9); border-radius: 10px; padding: 5px 9px; cursor: pointer; color: #000000; background: rgba(255,255,255,.94); box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 #ffffff; }
  .codebox:active { background: #ffffff; }
  .codebox b { font-size: 16px; letter-spacing: 1.5px; font-weight: 800; }
  .detail { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; cursor: default; }
  .drow { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; margin-bottom: 4px; }
  .drow span { flex: none; width: 44px; color: rgba(255,255,255,.38); }
  .drow p { flex: 1; min-width: 0; color: rgba(255,255,255,.84); word-break: break-word; }
  .dbody { margin-top: 8px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.85); white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; }
  .foot { position: relative; z-index: 1; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.34); text-align: center; }
  #list { flex: 1; display: flex; flex-direction: column; }
  .empty { flex: 1; justify-content: center; }
  #langbtn { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 30; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.09); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); }
  #langmenu { position: fixed; top: calc(54px + env(safe-area-inset-top)); right: 14px; z-index: 31; min-width: 136px; background: rgba(255,255,255,.10); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); border: 1px solid rgba(255,255,255,.20); border-radius: 16px; padding: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); }
  .langopt { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 9px 12px; border: none; background: transparent; color: #ffffff; font-size: 14px; font-family: inherit; border-radius: 11px; cursor: pointer; }
  .langopt:active { background: rgba(255,255,255,.13); }
  .langcheck { font-size: 13px; visibility: hidden; }
  #langbtn:active { background: rgba(255,255,255,.2); }
  #toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 14px 34px rgba(0,0,0,.5); color: #000000; font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 9; }

  @media (min-width: 900px) {
    body { padding: 26px 24px 22px; }
    .badge { font-size: 12.5px; padding: 8px 18px; }
    .icon { margin-top: 14px; width: 60px; height: 60px; border-radius: 19px; }
    h1 { margin-top: 12px; font-size: 34px; }
    .card { margin-top: 18px; max-width: 860px; padding: 26px 30px 20px; border-radius: 34px; }
    label { font-size: 14px; }
    input { padding: 14px; }
    .inboxtitle { font-size: 21px; }
    .mail { padding: 16px 20px; }
    .subject { font-size: 15.5px; }
    .emptytitle { font-size: 17px; }
    .emptysub { font-size: 14px; }
    .foot { font-size: 12px; }
    #langbtn { width: 40px; height: 40px; top: calc(16px + env(safe-area-inset-top)); right: 20px; }
    #langmenu { top: calc(62px + env(safe-area-inset-top)); right: 20px; }
  }

  .svcstate { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: rgba(235,235,245,.55); position: relative; z-index: 1; }
  .svcdot { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; flex: none; }
  .svcdot.ok { background: #30d158; box-shadow: 0 0 8px rgba(48,209,88,.9); }
  .svcdot.bad { background: #ff453a; box-shadow: 0 0 8px rgba(255,69,58,.9); }
  @media (min-width: 900px) { .svcstate { font-size: 12.5px; } }

button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.loginstat.err { color: #ffb4ab; }
.foot { max-width: 860px; line-height: 1.7; color: rgba(255,255,255,.55); }
.support { width: 100%; margin-top: 14px; padding: 14px 0 2px; border: 0; border-top: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(255,255,255,.62); font: inherit; font-size: 13px; line-height: 1.8; text-align: center; cursor: pointer; }
.support strong { color: #fff; margin: 0 4px; }
.support:hover { color: #fff; }