:root{
      --bg:#2C5F73;
      --card:rgba(255,255,255,.10);
      --card2:rgba(255,255,255,.14);
      --text:#ffffff;
      --muted:rgba(255,255,255,.82);
      --accent:#38C172;
      --danger:#ff5a5f;
      --shadow:0 20px 60px rgba(0,0,0,.25);
      --radius:18px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:28px;
    }

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

    .top{
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:18px;
      margin-bottom:26px;
    }

    .logo{
      width:300px;
      max-width:85%;
      height:auto;
      filter: drop-shadow(0 14px 30px rgba(0,0,0,.25));
    }

    .title{
      font-size:clamp(2rem, 3.2vw, 3rem);
      font-weight:800;
      letter-spacing:.5px;
    }

    .subtitle{
      font-size:clamp(1rem, 1.6vw, 1.15rem);
      color:var(--muted);
      line-height:1.55;
      max-width:760px;
    }

    .grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      margin-top:18px;
    }

    .card{
      background:linear-gradient(180deg,var(--card2),var(--card));
      border:1px solid rgba(255,255,255,.18);
      border-radius:var(--radius);
      padding:20px 20px 18px;
      box-shadow:var(--shadow);
      backdrop-filter: blur(8px);
    }

    .card h2{
      font-size:1.05rem;
      font-weight:800;
      margin-bottom:10px;
      display:flex;
      align-items:center;
      gap:10px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 12px;
      border-radius:999px;
      border:1.5px solid rgba(255,255,255,.22);
      font-weight:600;
      font-size:.9rem;
      color:rgba(255,255,255,.92);
      width:fit-content;
    }

    .pill .dot{
      width:9px;height:9px;border-radius:999px;background:var(--accent);
      box-shadow:0 0 0 4px rgba(56,193,114,.18);
    }

    .card p{
      color:rgba(255,255,255,.86);
      line-height:1.6;
      font-size:.98rem;
    }

    .list{
      margin-top:10px;
      display:flex;
      flex-direction:column;
      gap:8px;
      color:rgba(255,255,255,.85);
      font-size:.95rem;
    }
    .li{
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .check{
      width:18px;height:18px;border-radius:6px;
      background:rgba(56,193,114,.22);
      border:1px solid rgba(56,193,114,.55);
      display:flex;align-items:center;justify-content:center;
      flex:0 0 auto;
      margin-top:2px;
    }
    .check svg{width:12px;height:12px;fill:var(--accent)}

    .actions{
      margin-top:18px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:center;
    }

    .btn{
      border:0;
      border-radius:999px;
      padding:12px 18px;
      font-weight:800;
      cursor:pointer;
      transition:transform .12s ease, opacity .12s ease, background .12s ease;
      display:inline-flex;
      align-items:center;
      gap:10px;
      letter-spacing:.2px;
    }
    .btn:active{transform:translateY(1px)}
    .btn-primary{
      background:var(--accent);
      color:#083020;
      box-shadow:0 10px 30px rgba(56,193,114,.25);
    }
    .btn-primary:hover{opacity:.95}
    .btn-ghost{
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.20);
      color:rgba(255,255,255,.92);
    }
    .btn-ghost:hover{background:rgba(255,255,255,.14)}

    .footer{
      margin-top:18px;
      text-align:center;
      color:rgba(255,255,255,.65);
      font-size:.9rem;
    }

    /* Modal */
    .backdrop{
      position:fixed; inset:0;
      background:rgba(0,0,0,.52);
      display:none;
      align-items:center;
      justify-content:center;
      padding:22px;
      z-index:50;
    }
    .backdrop.open{display:flex}
    .modal{
      width:min(760px,100%);
      background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
      border:1px solid rgba(255,255,255,.20);
      border-radius:22px;
      box-shadow:0 30px 90px rgba(0,0,0,.40);
      backdrop-filter: blur(10px);
      overflow:hidden;
    }
    .modal-header{
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:rgba(0,0,0,.10);
      border-bottom:1px solid rgba(255,255,255,.14);
    }
    .modal-header h3{
      font-size:1.05rem;
      font-weight:900;
    }
    .close{
      background:transparent;
      border:0;
      color:rgba(255,255,255,.9);
      cursor:pointer;
      font-size:20px;
      line-height:1;
      padding:8px 10px;
      border-radius:12px;
    }
    .close:hover{background:rgba(255,255,255,.10)}

    .modal-body{
      padding:18px;
    }

    .hint{
      color:rgba(255,255,255,.80);
      line-height:1.55;
      margin-bottom:14px;
      font-size:.95rem;
    }

    form{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .field.full{grid-column:1 / -1}
    label{
      font-size:.85rem;
      color:rgba(255,255,255,.82);
      font-weight:700;
    }
    input, select, textarea{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.12);
      color:rgba(255,255,255,.92);
      padding:12px 12px;
      outline:none;
      font-size:.95rem;
    }
    textarea{min-height:92px; resize:vertical}

    input::placeholder, textarea::placeholder{color:rgba(255,255,255,.55)}
    input:focus, select:focus, textarea:focus{
      border-color:rgba(56,193,114,.70);
      box-shadow:0 0 0 4px rgba(56,193,114,.18);
    }

    .modal-actions{
      display:flex;
      gap:10px;
      justify-content:flex-end;
      margin-top:14px;
      flex-wrap:wrap;
    }

    .btn-secondary{
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.20);
      color:rgba(255,255,255,.92);
    }
    .btn-secondary:hover{background:rgba(255,255,255,.16)}

    .btn-submit{
      background:var(--accent);
      color:#083020;
    }

    .toast{
      display:none;
      margin-top:12px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(56,193,114,.45);
      background:rgba(56,193,114,.18);
      color:rgba(255,255,255,.92);
      line-height:1.45;
      font-weight:700;
    }
    .toast.show{display:block}

    @media (max-width: 840px){
      .grid{grid-template-columns:1fr}
      form{grid-template-columns:1fr}
    }