:root{
      --black:#0b0b0b;
      --yellow:#d4a017;
      --white:#ffffff;
      --muted:#777;
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      font-family: system-ui, Arial;
      background: linear-gradient(180deg,#ffffff,#f7f7f7);
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:100vh;
    }

    .main{
      width:60%;
      max-width:1000px;
      padding:20px;
    }

    .brand{
          text-align: center;
        /* height: 27px; */
        /* display: flex; */
        align-items: center;
        /* gap: 12px; */
        margin-bottom: 20px;
    }

    .logo{
      width: 250px;
        height: 60px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .divider{
      border: 1px solid #e2e2e2;
      margin-top: 10px;
    }

    .card{
      background:#fff;
      border-radius:16px;
      padding:25px;
      box-shadow:0 10px 30px rgba(0,0,0,0.08);
      animation: slideUp .4s ease;
    }

    h2{margin-top:0}
    p{color:var(--muted)}

    .btn{
      padding:12px 18px;
      border-radius:8px;
      border:none;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition:.25s;
    }

    .btn-primary{background:var(--yellow)}
    .btn-dark{background:var(--black);color:#fff}

    .btn:hover{transform:scale(1.05)}

    .form-group{margin-bottom:15px}
    label{font-weight:600}

    input,select,textarea{
      width:100%;
      padding:10px;
      border-radius:8px;
      border:1px solid #ddd;
    }

    .row{display:flex;gap:15px}
    .row .form-group{flex:1}

    .link{margin-top:15px;display:inline-block;color:var(--yellow);cursor:pointer}
    .back{margin: 0px 0px 15px 720px;display:inline-block;color:var(--yellow);cursor:pointer}

    .ensure{
        font-style: italic;
        font-size: 13px;
        margin-top: 35px;
    }

    .section{display:none}

    .status-success{
        background:#e6f4ea;
        color:#1e7e34;
    }

    .status-error{
        background:#fdecea;
        color:#b02a37;
    }

    #statusMessage {
        transition: opacity 0.5s ease;
    }

    .status{
      padding:6px 12px;
      border-radius:20px;
      font-size:12px;
    }
    .open{background:#ffeeba}
    .pending{background:#bee5eb}
    .resolved{background:#c3e6cb}

    .success-modal{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.5);
      display:none;
      align-items:center;
      justify-content:center;
    }

    .success-card{
      background:#fff;
      padding:30px;
      border-radius:12px;
      text-align:center;
      animation: pop .3s ease;
    }

    footer{
      text-align:center;
      margin-top:20px;
      font-size:13px;
      color:#999;
    }

    @keyframes pop{
      from{transform:scale(0.8);opacity:0}
      to{transform:scale(1);opacity:1}
    }

    @keyframes slideUp{
      from{opacity:0; transform:translateY(10px)}
      to{opacity:1; transform:translateY(0)}
    }

    @media(max-width:1000px){
      .back{margin: 0px 0px 15px 570px;display:inline-block;color:var(--yellow);cursor:pointer}
    }

    @media(max-width:700px){
        .row{flex-direction:column}
        
        .back{
            margin: 0px 0px 15px 200px;
            display:inline-block;
            color:var(--yellow);
            cursor:pointer
        }
        
        .main{
            width:100%;
            max-width:1000px;
            padding:20px;
        }
    }