:root{
        --bg1:#2b1055;
        --bg2:#1b3b73;
        --bg3:#0f766e;
        --card: rgba(255,255,255,0.08);
        --card2: rgba(255,255,255,0.12);
        --text: rgba(255,255,255,0.92);
        --muted: rgba(255,255,255,0.70);
        --stroke: rgba(255,255,255,0.18);
        --shadow: 0 18px 60px rgba(0,0,0,0.35);
      }

      *{ box-sizing:border-box; }
      body{
        margin:0;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
        color: var(--text);
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 28px;
        background:
          radial-gradient(1200px 700px at 10% 10%, rgba(168,85,247,0.35), transparent 60%),
          radial-gradient(900px 600px at 90% 30%, rgba(34,197,94,0.28), transparent 55%),
          linear-gradient(135deg, var(--bg1), var(--bg2) 45%, var(--bg3));
      }

      body.test-site{
        background: #7f7f7f;
      }

      .wrap{ width: min(520px, 100%); }

      .brand{
        display:flex;
        align-items:center;
        gap:12px;
        margin-bottom: 14px;
      }

      .appicon{
        width:44px;
        height:44px;
        border-radius:14px;
        background: linear-gradient(135deg, rgba(168,85,247,0.95), rgba(34,197,94,0.85));
        box-shadow: 0 12px 30px rgba(0,0,0,0.35);
        display:flex;
        align-items:center;
        justify-content:center;
        border: 1px solid rgba(255,255,255,0.22);
        overflow:hidden;
        flex: 0 0 auto;
      }

      .logo{
        width: 70%;
        height: 70%;
        object-fit: contain;
        display:block;
        filter: drop-shadow(0 2px 10px rgba(0,0,0,0.25));
      }

      h1{
        font-size: 22px;
        margin:0;
        line-height:1.2;
        letter-spacing: 0.2px;
      }

      .subtitle{
        margin: 2px 0 0 0;
        color: var(--muted);
        font-size: 13px;
      }

      .card{
        background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.06));
        border: 1px solid var(--stroke);
        border-radius: 22px;
        box-shadow: var(--shadow);
        padding: 18px;
        overflow:hidden;
        backdrop-filter: blur(10px);
      }

      .row{
        display:grid;
        gap: 10px;
        margin-top: 10px;
      }

      .quick-guide{
        margin-bottom: 14px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 16px;
        background: rgba(255,255,255,0.05);
        overflow: hidden;
      }
      .quick-guide summary{
        list-style: none;
        cursor: pointer;
        padding: 12px 14px;
        font-weight: 600;
        font-size: 14px;
        color: var(--muted);
      }
      .quick-guide summary::-webkit-details-marker{
        display:none;
      }
      .quick-guide summary::after{
        content: "+";
        float: right;
        color: var(--muted);
      }
      .quick-guide summary:hover{
        color: var(--text);
      }
      .quick-guide[open] summary::after{
        content: "−";
      }
      .quick-guide-body{
        padding: 0 14px 14px 14px;
        color: var(--muted);
      }
      .quick-guide-body p{
        margin: 0 0 12px 0;
      }
      .quick-guide-body ol{
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 8px;
      }
      .quick-guide-body li{
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text);
      }
      .quick-guide-body li span{
        width: 24px;
        height: 24px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 900;
        background: rgba(34,197,94,0.18);
        border: 1px solid rgba(34,197,94,0.35);
        color: #c9ffd9;
      }

      .btn{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 16px;
        text-decoration:none;
        color: var(--text);
        border: 1px solid rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.08);
        transition: transform .08s ease, background .12s ease, border-color .12s ease;
        user-select:none;
        font-weight: 600;
      }
      .btn:hover{
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.28);
        transform: translateY(-1px);
      }
      .btn:active{ transform: translateY(0px); }
      .btn svg{ width:18px; height:18px; }

      .btn-google{
        background: linear-gradient(135deg, rgba(168,85,247,0.28), rgba(255,255,255,0.07));
      }
      .btn-ms{
        background: linear-gradient(135deg, rgba(34,197,94,0.24), rgba(255,255,255,0.07));
      }
      .btn-fb{
        background: linear-gradient(135deg, rgba(24,119,242,0.45), rgba(255,255,255,0.07));
      }

      .divider{
        display:flex; align-items:center; gap:10px;
        margin: 14px 0;
        color: rgba(255,255,255,0.55);
        font-size: 12px;
      }
      .divider:before, .divider:after{
        content:"";
        height:1px;
        flex:1;
        background: rgba(255,255,255,0.16);
      }

      .downloads{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      @media (max-width: 420px){
        .downloads{ grid-template-columns: 1fr; }
      }

      .btn-dl{
        background: rgba(0,0,0,0.18);
      }

      .foot{
        margin-top: 12px;
        color: var(--muted);
        font-size: 12px;
        opacity: 0.9;
      }
      code{
        background: rgba(0,0,0,0.20);
        border: 1px solid rgba(255,255,255,0.12);
        padding: 2px 6px;
        border-radius: 10px;
        color: rgba(255,255,255,0.9);
        overflow-wrap:anywhere;
      }