:root{
    --bg:#F4F7FE; --surface:#FFFFFF; --surface-2:#EEF3FF; --surface-3:#E1EAFF;
    --blue:#2C5CF6; --blue-deep:#1339B0; --sky:#16B8E0;
    --text:#10162B; --muted:#6B7590; --muted-2:#9AA3C0; --line:rgba(16,22,54,0.08);
    --radius:20px; --shadow:0 6px 22px rgba(23,43,133,0.08);
  }
  html[data-theme="dark"]{
    --bg:#0B0E1A; --surface:#151A2E; --surface-2:#1C2340; --surface-3:#262E52;
    --blue:#5B82FF; --blue-deep:#7FA0FF; --sky:#4FD2F0;
    --text:#F2F4FC; --muted:#9AA3C0; --muted-2:#6B7590; --line:rgba(242,244,252,0.09);
    --shadow:0 6px 22px rgba(0,0,0,0.35);
  }
  @media (prefers-color-scheme: dark){
    html:not([data-theme="light"]):not([data-theme="dark"]){
      --bg:#0B0E1A; --surface:#151A2E; --surface-2:#1C2340; --surface-3:#262E52;
      --blue:#5B82FF; --blue-deep:#7FA0FF; --sky:#4FD2F0;
      --text:#F2F4FC; --muted:#9AA3C0; --muted-2:#6B7590; --line:rgba(242,244,252,0.09);
      --shadow:0 6px 22px rgba(0,0,0,0.35);
    }
  }
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html,body{ background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; min-height:100vh; }
  body{
    width:100%; max-width:460px; margin:0 auto; padding-bottom:60px;
    background:
      radial-gradient(600px 300px at 20% -5%, rgba(44,92,246,0.08), transparent 60%),
      radial-gradient(500px 260px at 100% 0%, rgba(22,184,224,0.07), transparent 55%),
      var(--bg);
  }

  @keyframes screenIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes fieldIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

  .page-header{
    display:flex; align-items:center; gap:12px; padding:20px 20px 8px;
    animation:fieldIn 0.4s cubic-bezier(.2,.8,.2,1) both;
  }
  .icon-btn{
    width:40px; height:40px; border-radius:12px; background:var(--surface);
    border:1px solid var(--line); box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--text);
    font-size:17px; flex-shrink:0; transition:transform 0.12s ease;
  }
  .icon-btn:active{ transform:scale(0.92); }
  .page-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; }

  main{ padding:6px 20px 0; animation:screenIn 0.5s cubic-bezier(.2,.8,.2,1) both; }

  .hero{ text-align:center; padding:20px 10px 4px; animation:fieldIn 0.45s cubic-bezier(.2,.8,.2,1) 0.06s both; }
  .hero h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; letter-spacing:-0.01em; margin-bottom:6px; }
  .hero p{ color:var(--muted); font-size:12.5px; line-height:1.6; }

  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:20px; margin-top:16px;
    animation:fieldIn 0.45s cubic-bezier(.2,.8,.2,1) both;
  }
  .card h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
  .card ul{ padding-left:18px; color:var(--muted); font-size:13px; line-height:1.65; }
  .card ul li{ margin-bottom:8px; }
  .card ul li:last-child{ margin-bottom:0; }
  .card p{ color:var(--muted); font-size:13px; line-height:1.65; }
  .card p + ul, .card p + p{ margin-top:10px; }
  .card b{ color:var(--text); }

  .updated{ text-align:center; color:var(--muted-2); font-size:11.5px; margin-top:18px; }

  .btn{
    display:block; width:100%; text-align:center; padding:14px; border-radius:14px; border:none;
    font-weight:600; font-size:14.5px; font-family:'Inter',sans-serif; cursor:pointer;
    text-decoration:none; margin-top:18px; transition:transform 0.12s ease, box-shadow 0.15s ease;
  }
  .btn-primary{
    background:linear-gradient(145deg,var(--blue),var(--blue-deep)); color:#fff;
    box-shadow:0 8px 20px rgba(44,92,246,0.3);
  }
  .btn:active{ transform:scale(0.97); }

  .site-footer{ text-align:center; padding:30px 20px 4px; font-size:11.5px; color:var(--muted-2); line-height:1.7; }

  .card h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px; margin:14px 0 6px; color:var(--text); }
  .card a, .legal-links a{ color:var(--blue); text-decoration:none; font-weight:600; }
  .card table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px; }
  .card th, .card td{ text-align:left; padding:8px 6px; border-top:1px solid var(--line); color:var(--muted); vertical-align:top; line-height:1.5; }
  .card th{ color:var(--text); font-weight:600; border-top:none; }
  .legal-links{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; padding:22px 20px 0; font-size:12px; }
  .toc{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
  .toc a{ font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:20px; background:var(--surface); border:1px solid var(--line); color:var(--blue); text-decoration:none; }
  details.faq{ border-top:1px solid var(--line); padding:10px 0; }
  details.faq:first-of-type{ border-top:none; }
  details.faq summary{ cursor:pointer; font-weight:600; font-size:13.5px; color:var(--text); list-style:none; }
  details.faq summary::-webkit-details-marker{ display:none; }
  details.faq summary::after{ content:"+"; float:right; color:var(--blue); font-weight:700; }
  details.faq[open] summary::after{ content:"–"; }
  details.faq p{ margin-top:8px; }