:root {
      --ink:#0f172a;
      --muted:#475569;
      --bg1:#f8fafc;
      --bg2:#eef6fb;
      --line:#e2e8f0;
      --accent:#0b6ea8;
      --radius:14px;
      --shadow:0 6px 20px rgba(15,23,42,.08);
    }

    body {
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      background:linear-gradient(160deg,var(--bg1),var(--bg2));
      color:var(--ink);
      line-height:1.6;
      display:flex;
      flex-direction:column;
      min-height:100vh;
    }

    header.bar {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      padding:14px 22px;
      background:#fff;
      border-bottom:1px solid var(--line);
      flex-wrap:wrap;
    }

    header .brand {
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      color:inherit;
    }

    .brand img {
      width:48px;
      height:48px;
      border-radius:10px;
      border:1px solid var(--line);
      object-fit:contain;
      background:#fff;
    }

    .brand-title { font-size:20px; font-weight:700; }
    .brand-sub { font-size:13px; color:var(--muted); }

    nav.quick {
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }
    nav.quick a {
      text-decoration:none;
      color:var(--accent);
      font-weight:600;
      padding:6px 10px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#fff;
    }

    main.main {
      flex:1;
      display:flex;
      justify-content:center;
      padding:24px;
    }

    .card {
      max-width:960px;
      width:100%;
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:20px 24px;
    }

    .sites {
      display:grid;
      gap:12px;
      grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
      margin-top:16px;
    }

    .site {
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      color:var(--accent);
      background:#fdfdfd;
      border:1px solid var(--line);
      padding:10px 12px;
      border-radius:var(--radius);
      font-weight:500;
      transition:all .2s ease;
    }

    .site:hover {
      background:#f0f9ff;
      border-color:#bae6fd;
    }

    .site img {
      width:28px;
      height:28px;
      object-fit:contain;
      border-radius:6px;
      background:#fff;
      border:1px solid var(--line);
    }

    footer {
      border-top:1px solid var(--line);
      background:#fff;
      padding:16px 22px;
      font-size:14px;
      color:var(--muted);
    }
    .foot-wrap {
      max-width:960px;
      margin:0 auto;
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:10px;
    }
    .foot-links {
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .foot-links a {
      color:var(--accent);
      text-decoration:none;
      font-weight:600;
    }
  body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
a
{
   color: #C8D7EB;
   text-decoration: underline;
}
a:hover
{
   color: #376BAD;
   text-decoration: underline;
}