*{box-sizing:border-box;margin:0;padding:0;}
    body{
      font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
      min-height:100vh;display:flex;
      background:#fff;
      overflow:auto;
    }
    .wrap{
      display:flex;width:100%;min-height:100vh;
      justify-content:center;align-items:center;
    }

    /* Panel side */
    .panel{
      width:100%;max-width:520px;
      background:#fff;
      display:flex;flex-direction:column;justify-content:center;align-items:center;
      padding:60px 40px;
    }

    /* Hero side hidden */
    .hero{ display:none; }
    .logo{font-size:46px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px;}
    .logo .ct{color:#6b3a2a;}.logo .rest{color:#1f2937;}
    .tagline{font-size:12px;color:#6b7280;margin-bottom:6px;text-align:center;}
    .role-badge{
      font-size:10px;font-weight:700;
      background:#f9f0ee;color:#6b3a2a;
      border:1px solid #c8a090;
      padding:4px 12px;border-radius:9999px;margin-bottom:24px;
      letter-spacing:.02em;white-space:nowrap;
    }

    .error{
      width:100%;background:#fef2f2;border:1px solid #fca5a5;
      color:#b91c1c;font-size:13px;padding:10px 14px;border-radius:10px;
      margin-bottom:14px;line-height:1.5;
    }
    .form{width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px;}
    .ig{
      display:flex;align-items:center;
      background:#f9fafb;
      border:1px solid #e5e7eb;border-radius:9999px;
      padding:13px 16px;gap:8px;
      transition:border-color .2s,background .2s,box-shadow .2s;
    }
    .ig:focus-within{
      border-color:#6b3a2a;
      background:#fff;
      box-shadow:0 0 0 3px rgba(107,58,42,.12);
    }
    .ig svg{width:16px;height:30px;color:#9ca3af;flex-shrink:0;}
    .ig input{
      flex:1;border:none;outline:none;font-size:13px;
      color:#374151;background:transparent;
    }
    .ig input::placeholder{color:#9ca3af;}
    .btn-login{
      width:100%;padding:16px;
      background:#6b3a2a;color:#fff;
      border:none;border-radius:9999px;
      font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.01em;
      transition:background .18s,box-shadow .18s,transform .12s;
    }
    .btn-login:hover{
      background:#7c4433;
      box-shadow:0 4px 14px rgba(107,58,42,.3);
      transform:translateY(-1px);
    }
    .request-link{
      display:block;width:auto;padding:14px 28px;
      background:#f8fafc;color:#374151;
      border:1px solid #e2e8f0;
      border-radius:9999px;font-size:12px;font-weight:600;text-align:center;
      text-decoration:none;margin-top:10px;
      transition:background .18s,border-color .18s;
    }
    .request-link:hover{background:#f1f5f9;border-color:#cbd5e1;}
    .forgot-link{font-size:12px;color:#6b7280;text-align:right;text-decoration:none;font-weight:600;margin-top:-6px;}
    .forgot-link:hover{color:#374151;text-decoration:underline;}
    .admin-link{margin-top:16px;font-size:12px;color:#9ca3af;text-align:center;}
    .admin-link a{color:#374151;font-weight:600;text-decoration:none;}
    .admin-link a:hover{color:#111827;text-decoration:underline;}

    /* Refined login presentation */
    body{
      color:#211815;
      background:
        radial-gradient(circle at 12% 8%, rgba(181,125,91,.18), transparent 28%),
        radial-gradient(circle at 88% 92%, rgba(107,58,42,.13), transparent 30%),
        #f6f3f0;
    }
    .wrap{padding:32px 20px;}
    .panel{
      position:relative;
      overflow:hidden;
      max-width:560px;
      padding:46px 54px 40px;
      border:1px solid #e9dfd8;
      border-radius:28px;
      box-shadow:0 22px 60px rgba(66,40,27,.12), 0 3px 12px rgba(66,40,27,.05);
    }
    .panel::before{
      content:"";
      position:absolute;
      top:0;left:0;right:0;height:6px;
      background:linear-gradient(90deg,#6b3a2a,#b77a58,#6b3a2a);
    }
    .panel > img{
      width:108px !important;
      height:108px !important;
      margin-bottom:20px !important;
      filter:drop-shadow(0 8px 18px rgba(107,58,42,.16)) !important;
    }
    .logo{
      max-width:430px;
      color:#211815;
      font-size:clamp(27px,3.6vw,36px);
      line-height:1.05;
      letter-spacing:-1.15px;
      text-align:center;
      margin-bottom:18px;
      position:relative;
    }
    .logo::after{
      content:"";
      display:block;
      width:54px;
      height:4px;
      margin:16px auto 0;
      border-radius:999px;
      background:linear-gradient(90deg,#6b3a2a,#c28a68);
    }
    .logo-primary,.logo-secondary{display:block;}
    .logo-primary{color:#211815;}
    .logo-secondary{
      margin-top:3px;
      color:#8b5039;
    }
    .role-badge{
      background:#f7eee9;
      color:#6b3a2a;
      border-color:#d9b9a8;
      padding:6px 14px;
      margin-bottom:12px;
    }
    .tagline{font-size:13px;color:#766b66;margin-bottom:24px;}
    .form{max-width:440px;gap:13px;}
    .ig{
      min-height:54px;
      padding:0 16px;
      background:#fbfaf9;
      border:1px solid #e3dcd7;
      border-radius:14px;
      gap:10px;
    }
    .ig:focus-within{
      border-color:#9b6148;
      box-shadow:0 0 0 4px rgba(155,97,72,.13);
    }
    .ig svg{width:17px;height:22px;color:#a58d82;}
    .ig input{font-size:14px;color:#211815;}
    .ig input::placeholder{color:#a49a95;}
    .forgot-link{color:#8a6a5b;margin-top:-2px;}
    .forgot-link:hover{color:#6b3a2a;}
    .btn-login{
      min-height:54px;
      padding:15px 18px;
      background:#6b3a2a;
      border-radius:14px;
      font-size:14px;
      box-shadow:0 8px 18px rgba(107,58,42,.18);
    }
    .btn-login:hover{
      background:#7c4433;
      box-shadow:0 10px 22px rgba(107,58,42,.24);
    }
    .request-link{
      padding:12px 22px;
      color:#6b3a2a;
      background:#fff;
      border-color:#dfd0c7;
      border-radius:12px;
      margin-top:18px;
    }
    .request-link:hover{background:#fbf5f1;border-color:#c8a090;}
    .admin-link{margin-top:18px;color:#9a8d86;}
    .admin-link a{color:#6b3a2a;}

    @media(max-width:560px){
      .wrap{padding:18px 12px;}
      .panel{padding:38px 22px 30px;border-radius:22px;}
      .panel > img{width:88px !important;height:88px !important;}
      .logo{font-size:30px;}
    }
    @media(max-width:420px){
      .panel{padding:34px 16px 26px;}
      .logo{font-size:27px;letter-spacing:-.7px;}
    }