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

        :root {
          --red: #38bdf8;
          --red-hover: #0ea5e9;
          --red-light: #fef2f2;
          --text: #1c1c1e;
          --text-2: #6b7280;
          --text-3: #9ca3af;
          --border: #e5e7eb;
          --bg: #d6d8d4;
          --card: #f0f1ef;
          --input-bg: #ffffff;
          --white: #ffffff;
        }

        [data-theme="dark"] {
          --bg: #1a1c1e;
          --card: #242628;
          --text: #f0f0f0;
          --text-2: #9ca3af;
          --text-3: #6b7280;
          --border: #333537;
          --input-bg: #1a1c1e;
          --white: #242628;
          --red-light: rgba(200, 16, 46, .12);
        }

        body {
          font-family: 'DM Sans', sans-serif;
          background: #000;
          color: var(--text);
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 16px;
          transition: background .3s, color .3s;

          background-image: url("../image/OIP.webp");
          background-size: cover;
          background-position: center;

          background-repeat: no-repeat;
          background-attachment: fixed;

        }

        /* ── CARD ── */
        .login-card {
          background: var(--card);
          border-radius: 24px;
          box-shadow: 0 2px 0 rgba(255, 255, 255, .6) inset,
            0 20px 60px rgba(0, 0, 0, .14),
            0 4px 16px rgba(0, 0, 0, .08);
          width: 100%;
          max-width: 400px;
          padding: 40px 36px 32px;
          animation: fadeUp .45s cubic-bezier(.22, .68, 0, 1.2);
          z-index: 1;
        }

        [data-theme="dark"] .login-card {
          box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset,
            0 20px 60px rgba(0, 0, 0, .5);
        }

        @keyframes fadeUp {
          from {
            opacity: 0;
            transform: translateY(24px) scale(.98);
          }

          to {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }

        /* ── LOGO AREA ── */
        .logo-wrap {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 24px;
        }

        .logo-circle {
          width: 68px;
          height: 68px;
          border-radius: 50%;
          background: var(--white);
          border: 1px solid var(--border);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 14px;
          box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
          overflow: hidden;
        }

        .logo-circle img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
        }

        .logo-circle-icon {
          font-size: 28px;
          color: var(--red);
        }

        .logo-name {
          font-size: 13px;
          font-weight: 700;
          color: var(--text);
          letter-spacing: .3px;
          margin-bottom: 7px;
          text-align: center;
        }

        .logo-sub {
          font-size: 11px;
          font-weight: 500;
          color: var(--text-3);
          letter-spacing: 1.5px;
          text-transform: uppercase;
        }

        /* ── DIVIDER ── */
        .divider-label {
          display: flex;
          align-items: center;
          gap: 10px;
          margin: 0 0 22px;
        }

        .divider-label::before,
        .divider-label::after {
          content: '';
          flex: 1;
          height: 1px;
          background: var(--border);
        }

        .divider-label span {
          font-size: 10px;
          font-weight: 600;
          color: var(--text-3);
          letter-spacing: 1.2px;
          text-transform: uppercase;
          white-space: nowrap;
        }

        /* ── ERROR ── */
        .login-error {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 14px;
          background: var(--red-light);
          border: 1px solid rgba(200, 16, 46, .2);
          border-radius: 10px;
          font-size: 12.5px;
          color: #991b1b;
          margin-bottom: 16px;
          font-weight: 600;
        }

        [data-theme="dark"] .login-error {
          color: #fca5a5;
        }

        /* ── FIELDS ── */
        .field {
          margin-bottom: 12px;
        }

        .field label {
          display: block;
          font-size: 12px;
          font-weight: 600;
          color: var(--text-2);
          margin-bottom: 6px;
        }

        .field-wrap {
          position: relative;
        }

        .field-wrap i.fi {
          position: absolute;
          left: 13px;
          top: 50%;
          transform: translateY(-50%);
          color: var(--text-3);
          font-size: 12px;
          pointer-events: none;
        }

        .field-wrap input {
          width: 100%;
          padding: 10px 14px 10px 36px;
          border: 1.5px solid var(--border);
          border-radius: 10px;
          font-size: 13px;
          font-family: 'DM Sans', sans-serif;
          background: var(--input-bg);
          color: var(--text);
          outline: none;
          transition: border-color .15s, box-shadow .15s;
        }

        .field-wrap input:focus {
          border-color: var(--red);
          box-shadow: 0 8px 24px rgba(0, 27, 107, 0.4);
        }

        [dark-theme="dark"] .field-wrap input {
          background: var(--bg);
        }

        .field-wrap input::placeholder {
          color: var(--text-3);
          font-size: 12.5px;
        }

        .toggle-pwd {
          position: absolute;
          right: 11px;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          color: var(--text-3);
          font-size: 12px;
          background: none;
          border: none;
          padding: 4px;
          display: flex;
          align-items: center;
        }

        .toggle-pwd:hover {
          color: var(--text-2);
        }

        /* ── REMEMBER / FORGOT ── */
        .row-extras {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 14px 0 18px;
        }

        .remember-wrap {
          display: flex;
          align-items: center;
          gap: 7px;
          cursor: pointer;
        }

        .remember-wrap input[type="checkbox"] {
          width: 15px;
          height: 15px;
          accent-color: var(--red);
          cursor: pointer;
        }

        .remember-wrap span {
          font-size: 12.5px;
          color: var(--text-2);
          font-weight: 500;
        }

        .forgot-link {
          font-size: 12.5px;
          font-weight: 600;
          color: var(--text);
          text-decoration: none;
        }

        .forgot-link:hover {
          text-decoration: underline;
        }

        /* ── SUBMIT ── */
        .login-btn {
          width: 100%;
          padding: 12px;
          background: var(--red);
          color: #fff;
          border: none;
          border-radius: 10px;
          font-size: 13.5px;
          font-weight: 700;
          font-family: 'DM Sans', sans-serif;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          letter-spacing: .3px;
          transition: background .15s, transform .15s, box-shadow .15s;
          box-shadow: 0 8px 24px rgba(56, 189, 248, 0.25);
        }

        .login-btn:hover {
          background: var(--red-hover);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 27, 107, 0.3);
        }

        .login-btn:active {
          transform: translateY(0);
        }

        .login-btn:disabled {
          opacity: .65;
          cursor: not-allowed;
          transform: none;
          box-shadow: none;
        }

        /* ── OR DIVIDER ── */
        .or-divider {
          display: flex;
          align-items: center;
          gap: 10px;
          margin: 18px 0;
        }

        .or-divider::before,
        .or-divider::after {
          content: '';
          flex: 1;
          height: 1px;
          background: var(--border);
        }

        .or-divider span {
          font-size: 11px;
          font-weight: 600;
          color: var(--text-3);
          letter-spacing: .5px;
        }

        /* ── GOOGLE BTN ── */
        .google-btn {
          width: 100%;
          padding: 11px;
          background: var(--input-bg);
          color: var(--text);
          border: 1.5px solid var(--border);
          border-radius: 10px;
          font-size: 13px;
          font-weight: 600;
          font-family: 'DM Sans', sans-serif;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          transition: background .15s, border-color .15s, transform .15s;
        }

        .google-btn:hover {
          background: var(--white);
          border-color: #9ca3af;
          transform: translateY(-1px);
        }

        .google-btn:active {
          transform: translateY(0);
        }

        .google-icon {
          width: 17px;
          height: 17px;
          flex-shrink: 0;
        }

        /* ── FOOTER ── */
        .login-footer {
          text-align: center;
          margin-top: 20px;
          font-size: 12px;
          color: var(--text-3);
        }

        .login-footer a {
          color: var(--red);
          font-weight: 600;
          text-decoration: none;
        }

        .login-footer a:hover {
          text-decoration: underline;
        }

        /* ── DARK TOGGLE ── */
        .dark-btn {
          position: fixed;
          top: 16px;
          right: 16px;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: var(--card);
          border: 1px solid var(--border);
          color: var(--text-2);
          font-size: 14px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all .15s;
          box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
          z-index: 2;
        }

        body::before {
          content: '';
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.35);
          z-index: 0;
        }

        body::after {
          content: '';
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.45);
          z-index: -1;
        }

        .dark-btn:hover {
          border-color: var(--red);
          color: var(--red);
        }