:root{
      --bg: #f6f8fb;
      --card: #ffffff;
      --text: #172033;
      --muted: #6b7280;
      --border: #e5e7eb;
      --primary: #1d4ed8;
      --primary-hover: #1e40af;
      --success: #0f766e;
      --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      --radius: 18px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Inter, Arial, Helvetica, sans-serif;
      background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
      color:var(--text);
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    .wrapper{
      max-width: 1180px;
      margin: 0 auto;
      padding: 32px 20px 60px;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:24px;
    }

    .back-link{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-weight:600;
      transition:0.2s ease;
    }

    .back-link:hover{
      color:var(--text);
    }

    .badge{
      display:inline-flex;
      align-items:center;
      padding:8px 14px;
      border-radius:999px;
      background:#e8f0ff;
      color:var(--primary);
      font-size:14px;
      font-weight:700;
    }

    .hero{
      background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
      color:#fff;
      border-radius: 28px;
      padding: 34px;
      box-shadow: var(--shadow);
      margin-bottom: 28px;
      position:relative;
      overflow:hidden;
    }

    .hero::after{
      content:"";
      position:absolute;
      right:-60px;
      top:-60px;
      width:220px;
      height:220px;
      border-radius:50%;
      background: rgba(255,255,255,0.08);
    }

    .hero h1{
      margin:0 0 10px;
      font-size: clamp(30px, 4vw, 44px);
      line-height:1.1;
    }

    .hero p{
      margin:0;
      max-width:760px;
      color:rgba(255,255,255,0.88);
      font-size:17px;
      line-height:1.6;
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:22px;
    }

    .main-col{
      grid-column: span 8;
    }

    .side-col{
      grid-column: span 4;
    }

    .panel{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:24px;
    }

    .panel h2{
      margin:0 0 18px;
      font-size:24px;
    }

    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
    }

    .panel-head p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:18px;
    }

    .access-card{
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:22px;
      border:1px solid var(--border);
      border-radius:20px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .access-card:hover{
      transform:translateY(-3px);
      box-shadow: 0 16px 35px rgba(15,23,42,.10);
      border-color:#cdd8eb;
    }

    .icon{
      width:54px;
      height:54px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:24px;
      background:#eef4ff;
    }

    .access-card h3{
      margin:0;
      font-size:20px;
    }

    .access-card p{
      margin:0;
      color:var(--muted);
      line-height:1.55;
      min-height:48px;
    }

    .card-footer{
      margin-top:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .chip{
      display:inline-flex;
      padding:6px 10px;
      border-radius:999px;
      background:#f3f4f6;
      color:#374151;
      font-size:12px;
      font-weight:700;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:0 16px;
      border:none;
      border-radius:14px;
      background:var(--primary);
      color:#fff;
      font-weight:700;
      transition:0.2s ease;
    }

    .btn:hover{
      background:var(--primary-hover);
    }

    .btn-light{
      background:#fff;
      color:var(--text);
      border:1px solid var(--border);
    }

    .btn-light:hover{
      background:#f8fafc;
    }

    .side-stack{
      display:grid;
      gap:22px;
    }

    .mini-list{
      display:grid;
      gap:12px;
    }

    .mini-item{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:14px 0;
      border-top:1px solid var(--border);
    }

    .mini-item:first-child{
      border-top:none;
      padding-top:0;
    }

    .mini-bullet{
      width:34px;
      height:34px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#f3f6fb;
      flex:0 0 auto;
      font-size:16px;
    }

    .mini-item strong{
      display:block;
      margin-bottom:4px;
      font-size:15px;
    }

    .mini-item span{
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }

    .support-box{
      background: linear-gradient(135deg, #ecfeff 0%, #f0fdf4 100%);
      border:1px solid #ccfbf1;
    }

    .support-mail{
      display:inline-block;
      margin:10px 0 16px;
      font-weight:800;
      color:var(--success);
      font-size:18px;
      word-break:break-word;
    }

    .footer-note{
      margin-top:28px;
      text-align:center;
      color:var(--muted);
      font-size:14px;
    }

    @media (max-width: 980px){
      .main-col,
      .side-col{
        grid-column: span 12;
      }
    }

    @media (max-width: 720px){
      .cards{
        grid-template-columns:1fr;
      }

      .hero{
        padding:26px;
      }

      .panel{
        padding:20px;
      }

      .topbar{
        flex-direction:column;
        align-items:flex-start;
      }
    }