:root{
  --bg:#000;
  --card:#121a2a;
  --ink:#3fff04;
  --muted:#3ff04;
  --brand:#3b82f6;
  --shadow:0 10px 25px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial;
  background: radial-gradient(1200px 600px at 10% -10%, #16233d 0%, #000 45%), var(--bg);
  color:var(--ink);
}

.container{
  max-width: 380px;
  margin: 0vh auto;
  background: linear-gradient(180deg, rgba(223,223,1,.10), rgba(223,223,1,.10));
  border-radius: 24px;
  box-shadow: var(--shadow);
}

h1{margin: 0 0 8px 0; font-size: 28px; letter-spacing:.5px}
.tip{margin:0 0 18px 0; color:var(--muted)}

.input-row{
  display:flex; gap:0px;
  margin: 14px 0 8px 0;
}
.input-row input{
  flex:1; padding: 14px 16px; border-radius: 0px; border:1px solid rgba(255,255,255,.1);
  background:#0f172a; color:var(--ink); outline:none; font-size:16px;
}
.input-row input::placeholder{color:#64748b}
.btn{
  padding: 12px 18px; border-radius: 0px; border: none; cursor:pointer;
  background: #ff1818; color:white; font-weight:600; letter-spacing:.2px;
}
.btn:hover{background: #15e213;}

.hint{color:#8ca0b4}
.hint code{
  padding:2px 6px; border-radius:6px; background:#0f172a; border:1px solid rgba(255,255,255,.06);
}

.modal{
  position: fixed; inset:0;
  display:none; place-items:center;
  background: rgba(2,6,23,.46);
  backdrop-filter: blur(4px);
  z-index: 50;
}
.modal.open{ display:grid }
.modal-box{
  width:min(380px, 22vw);
  background: var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: var(--shadow);
  text-align:center;
  position: relative;
}
.modal-image{
  width: 120px; height:120px; object-fit: contain; margin: 8px auto 12px;
}
.modal-title{ margin: 8px 0 6px; font-size:22px }
.modal-desc{ margin: 0 0 12px; color: var(--muted) }
.modal-close{
  position:absolute; right:10px; top:8px;
  width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.1);
  background: #0f172a; color: #cbd5e1; cursor:pointer; font-size:20px; line-height: 1;
}
.btn-primary{ display:inline-block; min-width:120px }
 :root{
    --bg:#333332;        
    --panel:#333332;     
    --radius:0px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}

  body{
    margin:0;
    min-height:100vh;
    background:var(--bg);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    display:flex;
    justify-content:center;    
    align-items:stretch;       
  }

  .phone{
    width:390px;              
    height:100vh;             
    max-height:100vh;
    background:var(--panel);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:auto;           
    position:relative;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .topbar{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px 8px;
    background:#1a1f28;
    border-bottom:1px solid #0f141c;
    position:sticky; top:0; z-index:0;  
  }

 .brand-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 一行4列 */
    gap: 8px;               /* 图片之间的间距 */
    padding: 12px;
  }
  .brand-grid .cell{
    height: 40px;           /* 每个logo的高度，可按需改 */
  }
  .brand-grid img{
    width: 100%;
    height: 100%;
    object-fit: contain;    /* 不变形，等比缩放 */
    display: block;
  }



.container .intro-headline{
  margin: 10px 12px 12px;
  text-align: center;
}

.container .intro-headline__title{
  margin: 0;
  text-transform: uppercase;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .06em;
  font-size: clamp(22px, 6.2vw, 34px);

  background: linear-gradient(180deg, #ffd36e 0%, #f0a500 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}

.container .intro-headline__sub{
  margin: 8px 0 0;
  font-size: clamp(14px, 3.6vw, 18px);
  font-weight: 700;
  color: #f1f5f9; 
  letter-spacing: .02em;
}

@supports not (-webkit-background-clip: text) {
  .container .intro-headline__title{
    -webkit-text-fill-color: initial;
    color:#f0a500;
    background:none;
    text-shadow:none;
  }
}
 .lines-card{
    margin:12px 0; padding:14px; border-radius:16px;
    background:#0f1420; border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
  }
  .lines-title{display:flex;align-items:center;gap:8px;
    font-weight:800;color:#ffd88a;margin:0 0 10px 0;}
  .lines-list{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
  .line-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    gap:12px;padding:10px 12px;border-radius:12px;background:#121a2a;border:1px solid rgba(255,255,255,.06);}
  .line-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
    background:#ff5b56;color:#fff;font-weight:700;}
  .line-domain{color:#e6eef9;font-weight:700;word-break:break-all;}
  .line-btn{padding:8px 12px;border:0;border-radius:10px;cursor:pointer;background:#ff3a2f;color:#fff;font-weight:700;}
  .line-btn:active{transform:translateY(1px);}
.why-box{
  position: relative;
  margin:16px 12px 12px;
  padding:14px 16px;
  border-radius:16px;
  background:#0e141f;                           /* 深色卡片底 */
  border:1px solid rgba(255,255,255,.10);       /* 细描边 */
  box-shadow:0 8px 24px rgba(0,0,0,.28);        /* 阴影 */
}

.why-box::before{
  content:"";
  position:absolute;
  left:10px; top:10px; bottom:10px;
  width:3px; border-radius:3px;
  background:linear-gradient(180deg,#fdd835,#ffb300);
}

.why-box h2{
  margin:0 0 8px;
  font-size:18px; line-height:1.35; font-weight:800;
  color:#ffd88a;                               
  letter-spacing:.2px;
}
.why-box p{
  margin:0;
  font-size:14px; line-height:1.65;
  color:#cbd5e1;                                
}

.why--gold{
  border:1px solid transparent;
  background:
    linear-gradient(#0e141f,#0e141f) padding-box,       
    linear-gradient(90deg,#fdd835,#ffb300) border-box; 
}

.why--green{
  border:1px solid transparent;
  background:
    linear-gradient(#0e141f,#0e141f) padding-box,
    linear-gradient(90deg,#34d399,#059669) border-box;
}
.why--green h2{ color:#34d399; }

  .topbar{
    display:flex;align-items:center;justify-content:center;
    min-height:64px;padding:10px 0;background:#1a1f28;border-bottom:1px solid #0f141c;
    position:sticky;top:0;z-index:1000;
  }
  .brand-logo{height:50px;width:auto;display:block;object-fit:contain;}
  
   .fab-stack{
    position: fixed; right: 14px; bottom: 18px;
    display: grid; gap: 12px;
    z-index: 9999;
  }
  .fab{
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: #111; color: #fff; cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    border: 2px solid rgba(255,255,255,.15);
    transition: transform .15s ease;
  }
  .fab:hover { transform: translateY(-2px); }

  .fab img,
  .fab svg{ width: 100%; height: 100%; display:block; object-fit:contain; }

  .fab.fab--cover img,
  .fab.fab--cover svg{ width: 100%; height: 100%; } /* 你也可调到 40px */

  @media (max-width: 420px){
    .fab{ width: 50px; height: 50px; }
    .fab img, .fab svg{ width: 100%; height: 100%; }
    .fab.fab--cover img, .fab.fab--cover svg{ width: 100%; height: 100%; }
  }