@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

body{
  font-family:'Inter', sans-serif;
    background: radial-gradient(circle at top,#1e293b,#020617);
      color:#e2e8f0;
        padding:40px;
        }

        /* center layout */
        .box{
          max-width:820px;
            margin:20px auto;
              background:rgba(30,41,59,0.75);
                backdrop-filter:blur(12px);
                  padding:25px;
                    border-radius:18px;
                      border:1px solid rgba(255,255,255,0.05);
                        box-shadow:0 25px 60px rgba(0,0,0,0.45);
                        }

                        /* headings */
                        h2{
                          font-weight:600;
                            margin-bottom:15px;
                              color:#7dd3fc;
                              }

                              h3{
                                font-weight:500;
                                  color:#38bdf8;
                                  }

                                  /* inputs */
                                  input, textarea, select{
                                    width:100%;
                                      padding:12px;
                                        margin-top:8px;
                                          border-radius:10px;
                                            border:1px solid rgba(255,255,255,0.05);
                                              background:#020617;
                                                color:white;
                                                  font-family:'Inter', sans-serif;
                                                  }

                                                  input:focus, textarea:focus{
                                                    outline:none;
                                                      border:1px solid #38bdf8;
                                                      }

                                                      /* buttons */
                                                      button{
                                                        background:linear-gradient(90deg,#38bdf8,#22d3ee);
                                                          border:none;
                                                            padding:12px;
                                                              margin-top:14px;
                                                                border-radius:10px;
                                                                  font-weight:600;
                                                                    cursor:pointer;
                                                                      color:#020617;
                                                                      }

                                                                      button:hover{
                                                                        transform:scale(1.03);
                                                                        }

                                                                        /* preview */
                                                                        .preview{
                                                                          background:#020617;
                                                                            padding:18px;
                                                                              border-radius:12px;
                                                                                white-space:pre-wrap;
                                                                                  line-height:1.7;
                                                                                    border:1px solid rgba(255,255,255,0.05);
                                                                                    }

                                                                                    /* attendance row */
                                                                                    .att{
                                                                                      display:flex;
                                                                                        gap:10px;
                                                                                        }

                                                                                        .att button{
                                                                                          flex:1;
                                                                                          }