/* =============================================
   KRIDTECH — ADMIN LOGIN
   Albert Sans headings · Inter body · JetBrains Mono
   ============================================= */

   @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

   /* ── Variables ──────────────────────────────── */
   :root {
     --bg:            #070707;
     --bg-card:       #111111;
     --bg-input:      #0d0d0d;
     --left-bg:       #0c0c0c;
   
     --accent-pink:   #df2fc4;
     --accent-purple: #702ae0;
     --accent-cyan:   #ba84fb;
     --accent-red:    #ef4444;
   
     --grad:          linear-gradient(135deg, #f472b6 0%, #a855f7 100%);
     --grad-text:     linear-gradient(135deg, #f472b6, #ba84fb);
   
     --text-primary:  #f5f0f0;
     --text-secondary:#a1a1aa;
     --text-muted:    #52525b;
   
     --border:        rgba(112, 42, 224, 0.25);
     --border-subtle: rgba(112, 42, 224, 0.12);
     --border-input:  rgba(186, 132, 251, 0.2);
   
     --font-head: 'Albert Sans', system-ui, sans-serif;
     --font-body: 'Inter', system-ui, sans-serif;
     --font-mono: 'JetBrains Mono', monospace;
   
     --ease:   cubic-bezier(0.4, 0, 0.2, 1);
     --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   
     --radius-sm: 6px;
     --radius-md: 10px;
     --radius-lg: 14px;
   }
   
   /* ── Reset ──────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html, body { height: 100%; }
   
   body {
     font-family: var(--font-body);
     background: var(--bg);
     color: var(--text-primary);
     overflow: hidden;
   }
   
   /* ── Canvas ─────────────────────────────────── */
   #grid-canvas {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
     opacity: 0.35;
   }
   
   /* ── Layout ─────────────────────────────────── */
   .layout {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1fr 1fr;
     height: 100vh;
   }
   
   @media (max-width: 820px) {
     .layout { grid-template-columns: 1fr; }
     .left-panel { display: none; }
     body { overflow: auto; }
   }
   
   /* ══════════════════════════════════════════════
      LEFT PANEL
      ══════════════════════════════════════════════ */
   .left-panel {
     background: var(--left-bg);
     border-right: 1px solid var(--border-subtle);
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: stretch;
   
     /* subtle radial glow from top-right */
     &::before {
       content: '';
       position: absolute;
       top: -120px;
       right: -120px;
       width: 520px;
       height: 520px;
       background: radial-gradient(circle, rgba(112,42,224,0.18) 0%, transparent 65%);
       pointer-events: none;
     }
   
     /* bottom-left accent */
     &::after {
       content: '';
       position: absolute;
       bottom: -80px;
       left: -80px;
       width: 360px;
       height: 360px;
       background: radial-gradient(circle, rgba(223,47,196,0.1) 0%, transparent 65%);
       pointer-events: none;
     }
   }
   
   .lp-inner {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 40px 48px;
     width: 100%;
     animation: fadeSlideLeft 0.7s var(--ease) both;
   }
   
   .lp-logo {
     opacity: 0.9;
   }
   
   .lp-center {
     display: flex;
     flex-direction: column;
     gap: 36px;
     align-items: flex-start;
   }
   
   /* Shield icon */
   .shield-wrap {
     position: relative;
     width: 88px;
     height: 88px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .shield-ring {
     position: absolute;
     border-radius: 50%;
     border: 1px solid;
     animation: pulseRing 3s var(--ease) infinite;
   }
   
   .ring-1 {
     width: 88px; height: 88px;
     border-color: rgba(112, 42, 224, 0.5);
     animation-delay: 0s;
   }
   .ring-2 {
     width: 112px; height: 112px;
     border-color: rgba(112, 42, 224, 0.28);
     animation-delay: 0.4s;
   }
   .ring-3 {
     width: 140px; height: 140px;
     border-color: rgba(112, 42, 224, 0.12);
     animation-delay: 0.8s;
   }
   
   @keyframes pulseRing {
     0%, 100% { transform: scale(1); opacity: 1; }
     50%       { transform: scale(1.06); opacity: 0.7; }
   }
   
   .shield-icon {
     width: 64px;
     height: 64px;
     border-radius: 16px;
     background: linear-gradient(135deg, rgba(112,42,224,0.25), rgba(186,132,251,0.15));
     border: 1px solid rgba(186,132,251,0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.7rem;
     color: var(--accent-cyan);
     box-shadow: 0 0 32px rgba(112,42,224,0.3);
   }
   
   .lp-headline {
     font-family: var(--font-head);
     font-size: clamp(2.4rem, 4vw, 3.4rem);
     font-weight: 900;
     line-height: 1.0;
     letter-spacing: -0.03em;
     background: var(--grad-text);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   .lp-sub {
     font-size: 0.88rem;
     color: var(--text-muted);
     font-family: var(--font-mono);
     letter-spacing: 0.02em;
     line-height: 1.6;
     max-width: 280px;
   }
   
   .lp-footer {
     display: flex;
     align-items: center;
   }
   
   .restricted-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-family: var(--font-mono);
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: #ef4444;
     background: rgba(239, 68, 68, 0.08);
     border: 1px solid rgba(239, 68, 68, 0.25);
     padding: 6px 14px;
     border-radius: 99px;
   }
   
   .restricted-badge i {
     font-size: 0.68rem;
   }
   
   /* ══════════════════════════════════════════════
      RIGHT PANEL
      ══════════════════════════════════════════════ */
   .right-panel {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 40px 32px;
     overflow-y: auto;
     background: var(--bg);
   }
   
   .form-wrap {
     width: 100%;
     max-width: 400px;
     animation: fadeSlideRight 0.7s var(--ease) 0.1s both;
   }
   
   /* ── Form header ── */
   .form-header {
     margin-bottom: 36px;
   }
   
   .admin-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--font-mono);
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--accent-cyan);
     margin-bottom: 16px;
   }
   
   .eyebrow-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--accent-cyan);
     box-shadow: 0 0 8px var(--accent-cyan);
     animation: blink 2s ease-in-out infinite;
   }
   
   @keyframes blink {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.3; }
   }
   
   .form-header h2 {
     font-family: var(--font-head);
     font-size: 2.4rem;
     font-weight: 800;
     letter-spacing: -0.03em;
     color: var(--text-primary);
     line-height: 1.1;
     margin-bottom: 10px;
   }
   
   .form-sub {
     font-size: 0.88rem;
     color: var(--text-secondary);
     line-height: 1.6;
   }
   
   /* ── Form fields ── */
   .login-form {
     display: flex;
     flex-direction: column;
     gap: 22px;
   }
   
   .field-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   .field-group label {
     display: flex;
     align-items: center;
     gap: 7px;
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--text-secondary);
     letter-spacing: 0.04em;
     text-transform: uppercase;
   }
   
   .field-group label i {
     color: var(--accent-cyan);
     font-size: 0.75rem;
     width: 14px;
   }
   
   .input-shell {
     position: relative;
   }
   
   .input-shell input {
     width: 100%;
     background: var(--bg-input);
     border: 1px solid var(--border-input);
     border-radius: var(--radius-md);
     color: var(--text-primary);
     font-family: var(--font-mono);
     font-size: 0.9rem;
     padding: 13px 16px;
     outline: none;
     transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
     -webkit-appearance: none;
   }
   
   .input-shell input::placeholder {
     color: var(--text-muted);
     font-family: var(--font-mono);
   }
   
   .input-shell input:focus {
     border-color: var(--accent-cyan);
     background: rgba(186, 132, 251, 0.04);
     box-shadow: 0 0 0 3px rgba(186, 132, 251, 0.12), 0 4px 16px rgba(0,0,0,0.4);
   }
   
   /* password input padding for toggle btn */
   #admin-password {
     padding-right: 48px;
   }
   
   /* animated bottom border line */
   .input-border {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     height: 2px;
     width: 0;
     background: var(--grad);
     border-radius: 0 0 var(--radius-md) var(--radius-md);
     transition: width 0.3s var(--spring);
     pointer-events: none;
   }
   
   .input-shell input:focus ~ .input-border {
     width: 100%;
   }
   
   /* error state */
   .field-group.has-error .input-shell input {
     border-color: rgba(239, 68, 68, 0.6);
     box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
   }
   
   .field-group.has-error .input-border {
     background: #ef4444;
   }
   
   .field-error {
     font-size: 0.78rem;
     color: #ef4444;
     font-family: var(--font-mono);
     min-height: 14px;
     opacity: 0;
     transform: translateY(-4px);
     transition: opacity 0.2s, transform 0.2s;
   }
   
   .field-group.has-error .field-error {
     opacity: 1;
     transform: translateY(0);
   }
   
   /* password toggle */
   .pw-toggle {
     position: absolute;
     right: 14px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: var(--text-muted);
     cursor: pointer;
     font-size: 0.85rem;
     padding: 4px;
     transition: color 0.2s;
     line-height: 1;
   }
   
   .pw-toggle:hover { color: var(--accent-cyan); }
   
   /* ── Global form error ── */
   .form-error {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(239, 68, 68, 0.08);
     border: 1px solid rgba(239, 68, 68, 0.28);
     border-radius: var(--radius-md);
     padding: 12px 14px;
     font-size: 0.85rem;
     color: #fca5a5;
     font-family: var(--font-mono);
     animation: shakeX 0.4s var(--ease);
   }
   
   .form-error i {
     color: #ef4444;
     flex-shrink: 0;
     font-size: 0.9rem;
   }
   
   .form-error.hidden { display: none; }
   
   @keyframes shakeX {
     0%, 100% { transform: translateX(0); }
     20%       { transform: translateX(-6px); }
     40%       { transform: translateX(6px); }
     60%       { transform: translateX(-4px); }
     80%       { transform: translateX(4px); }
   }
   
   /* ── Submit button ── */
   .btn-submit {
     width: 100%;
     padding: 14px 24px;
     border: none;
     border-radius: var(--radius-md);
     background: var(--grad);
     color: #fff;
     font-family: var(--font-body);
     font-size: 0.95rem;
     font-weight: 600;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: transform 0.15s var(--spring), box-shadow 0.2s var(--ease), opacity 0.2s;
     box-shadow: 0 4px 20px rgba(223, 47, 196, 0.35);
     letter-spacing: 0.01em;
     margin-top: 4px;
   }
   
   .btn-submit::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
     pointer-events: none;
   }
   
   .btn-submit:hover:not(:disabled) {
     transform: translateY(-2px);
     box-shadow: 0 8px 28px rgba(223, 47, 196, 0.5);
   }
   
   .btn-submit:active:not(:disabled) {
     transform: translateY(0px);
   }
   
   .btn-submit:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     transform: none;
   }
   
   .btn-label, .btn-loader {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
   }
   
   .btn-loader.hidden, .btn-label.hidden { display: none; }
   
   /* ── Form note ── */
   .form-note {
     display: flex;
     align-items: center;
     gap: 7px;
     font-size: 0.76rem;
     color: var(--text-muted);
     font-family: var(--font-mono);
     margin-top: 20px;
     text-align: center;
     justify-content: center;
   }
   
   .form-note i {
     font-size: 0.7rem;
   }
   
   /* ── Animations ── */
   @keyframes fadeSlideLeft {
     from { opacity: 0; transform: translateX(-24px); }
     to   { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes fadeSlideRight {
     from { opacity: 0; transform: translateX(24px); }
     to   { opacity: 1; transform: translateX(0); }
   }