*{
          margin:0;
          padding:0;
          box-sizing:border-box;
        }

        body{
          font-family:'Pixelify Sans', sans-serif;
          background:linear-gradient(to bottom,#87CEEB,#7bc96f);
          height:100vh;
          width:100vw;
          overflow:hidden;
          display:flex;
          align-items:center;
          justify-content:center;
        }

        /* WINDOW */
        .window{
          width:420px;
          height:300px;
          background:#f5e6c8;
          border:5px solid #5c3b1e;
          border-radius:16px;
          box-shadow:6px 6px 0 #3b2512;

          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;

          position:relative;
          overflow:hidden;
        }

        /* TITLE */
        h1{
          font-size:22px;
          color:#5c3415;
          margin-bottom:12px;
          letter-spacing:1px;
        }

        /* ================= LOGIN ================= */

        #loginView{
          width:100%;
          display:flex;
          align-items:center;
          justify-content:center;
        }

        .login-box{
          display:flex;
          flex-direction:column;
          align-items:center;
          gap:12px;
          width:100%;
        }

        label{
          font-size:13px;
          font-weight:600;
          color:#5c3415;
          letter-spacing:0.5px;
        }

        input{
          width:70%;
          padding:12px;
          border:3px solid #5c3b1e;
          border-radius:10px;
          font-size:15px;
          font-weight:500;
          background:#fff8e6;
          color:#3b2512;
          outline:none;
        }

        button{
          width:70%;
          padding:12px;
          background:#6dbe45;
          border:4px solid #3d7a2a;
          border-radius:12px;
          color:white;
          font-size:15px;
          font-weight:600;
          cursor:pointer;
          box-shadow:4px 4px 0 #3b2512;
          transition:0.15s ease;
        }

        button:hover{
          transform:translateY(-2px);
        }

        button:active{
          transform:translateY(1px);
          box-shadow:2px 2px 0 #3b2512;
        }

        input, button, label{
          font-family:'Inter', sans-serif;
        }

        /* ================= LOADING (optionnel affichage futur) ================= */

        #loadingView{
          display:none;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          gap:12px;
          text-align:center;
        }

        .loader{
          width:34px;
          height:34px;
          border:5px solid #5c3b1e;
          border-top:5px solid #6dbe45;
          border-radius:50%;
          animation:spin 1s linear infinite;
        }

        @keyframes spin{
          0%{transform:rotate(0);}
          100%{transform:rotate(360deg);}
        }

        .progress-bar{
          width:70%;
          height:12px;
          border:3px solid #5c3b1e;
          border-radius:10px;
          background:#fff5df;
          overflow:hidden;
        }

        .progress{
          height:100%;
          width:0%;
          background:#6dbe45;
        }

        /* CLOUDS */
        .cloud{
          position:absolute;
          top:25px;
          left:30px;
          font-size:40px;
          opacity:0.5;
        }

        .cloud2{
          position:absolute;
          top:50px;
          right:40px;
          font-size:50px;
          opacity:0.4;
        }