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

 :root {
     --gas-orange: #FF6B00;
     --gas-amber: #FFB800;
     --gas-dark: #0A0C0F;
     --gas-panel: #0F1318;
     --gas-card: #141A22;
     --gas-border: #1E2A36;
     --gas-muted: #3A4A5A;
     --gas-text: #C8D8E8;
     --gas-sub: #6A7F92;
     --gas-white: #EEF4FA;
     --gas-danger: #FF3B3B;
     --gas-green: #00E096;
 }

 html,
 body {
     height: 100%;
 }

 body {
     font-family: 'Rajdhani', sans-serif;
     background: var(--gas-dark);
     color: var(--gas-text);
     overflow: hidden;
 }

 /* ── BACKGROUND GRID ── */
 .bg-grid {
     position: fixed;
     inset: 0;
     z-index: 0;
     background-image:
         linear-gradient(rgba(255, 107, 0, 0.04) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 107, 0, 0.04) 1px, transparent 1px);
     background-size: 48px 48px;
     animation: gridShift 20s linear infinite;
 }

 @keyframes gridShift {
     0% {
         background-position: 0 0;
     }

     100% {
         background-position: 48px 48px;
     }
 }

 /* scanline overlay */
 .bg-scanlines {
     position: fixed;
     inset: 0;
     z-index: 1;
     pointer-events: none;
     background: repeating-linear-gradient(0deg,
             transparent,
             transparent 2px,
             rgba(0, 0, 0, 0.12) 2px,
             rgba(0, 0, 0, 0.12) 4px);
 }

 /* ── LAYOUT ── */
 .login-page {
     position: relative;
     z-index: 2;
     display: flex;
     height: 100vh;
 }

 /* ── LEFT PANEL ── */
 .left-panel {
     flex: 1.1;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border-right: 1px solid var(--gas-border);
 }

 /* giant blurred orbs */
 .orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
     opacity: 0.18;
     pointer-events: none;
 }

 .orb-1 {
     width: 420px;
     height: 420px;
     background: var(--gas-orange);
     top: -80px;
     left: -100px;
 }

 .orb-2 {
     width: 320px;
     height: 320px;
     background: var(--gas-amber);
     bottom: -60px;
     right: -60px;
 }

 /* diagonal accent stripe */
 .left-stripe {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 2px;
     height: 100%;
     background: linear-gradient(to bottom, transparent 0%, var(--gas-orange) 50%, transparent 100%);
     opacity: 0.6;
 }

 .left-content {
     position: relative;
     z-index: 2;
     padding: 60px 56px;
     display: flex;
     flex-direction: column;
     gap: 40px;
     width: 100%;
     max-width: 580px;
 }

 /* brand */
 .brand-mark {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .flame-icon {
     width: 52px;
     height: 52px;
     background: linear-gradient(135deg, var(--gas-orange), var(--gas-amber));
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     box-shadow: 0 0 24px rgba(255, 107, 0, 0.4);
     animation: flamePulse 3s ease-in-out infinite;
 }

 @keyframes flamePulse {

     0%,
     100% {
         box-shadow: 0 0 24px rgba(255, 107, 0, 0.4);
     }

     50% {
         box-shadow: 0 0 40px rgba(255, 107, 0, 0.7);
     }
 }

 .brand-name {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 28px;
     letter-spacing: 3px;
     color: var(--gas-white);
     line-height: 1;
 }

 .brand-tagline {
     font-size: 11px;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--gas-orange);
     font-weight: 600;
     margin-top: 3px;
 }

 /* hero text */
 .hero-text h1 {
     font-family: 'Bebas Neue', sans-serif;
     font-size: clamp(64px, 8vw, 96px);
     line-height: 0.92;
     letter-spacing: 2px;
     color: var(--gas-white);
 }

 .hero-text h1 em {
     font-style: normal;
     -webkit-text-stroke: 2px var(--gas-orange);
     color: transparent;
 }

 .hero-text p {
     margin-top: 20px;
     font-size: 15px;
     line-height: 1.6;
     color: var(--gas-sub);
     max-width: 340px;
     font-weight: 500;
 }

 /* tank gauge */
 .gauge-block {
     background: var(--gas-panel);
     border: 1px solid var(--gas-border);
     border-radius: 10px;
     padding: 18px 22px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .gauge-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .gauge-label {
     font-size: 11px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--gas-sub);
     font-weight: 600;
 }

 .gauge-pct {
     font-family: 'Share Tech Mono', monospace;
     font-size: 13px;
     color: var(--gas-green);
 }

 .gauge-track {
     height: 6px;
     background: var(--gas-border);
     border-radius: 3px;
     overflow: hidden;
 }

 .gauge-fill {
     height: 100%;
     border-radius: 3px;
     background: linear-gradient(90deg, var(--gas-orange), var(--gas-amber));
     animation: fillIn 1.6s cubic-bezier(.4, 0, .2, 1) forwards;
     width: 0;
 }

 .gauge-fill.t1 {
     animation-delay: 0.3s;
     --target: 72%;
 }

 .gauge-fill.t2 {
     animation-delay: 0.6s;
     --target: 55%;
 }

 .gauge-fill.t3 {
     animation-delay: 0.9s;
     --target: 88%;
 }

 @keyframes fillIn {
     to {
         width: var(--target);
     }
 }

 .gauge-tanks {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .gauge-row {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 /* stats */
 .stats-row {
     display: flex;
     gap: 0;
     border: 1px solid var(--gas-border);
     border-radius: 10px;
     overflow: hidden;
 }

 .stat-item {
     flex: 1;
     text-align: center;
     padding: 16px 8px;
 }

 .stat-item:not(:last-child) {
     border-right: 1px solid var(--gas-border);
 }

 .stat-val {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 22px;
     color: var(--gas-orange);
     letter-spacing: 1px;
 }

 .stat-key {
     font-size: 10px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--gas-sub);
     margin-top: 2px;
 }

 /* ── RIGHT PANEL ── */
 .right-panel {
     width: 460px;
     min-width: 380px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 56px 52px;
     background: var(--gas-panel);
     position: relative;
     overflow: hidden;
 }

 /* corner accent */
 .right-panel::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 120px;
     height: 120px;
     background: conic-gradient(from 180deg at 100% 0%, var(--gas-orange) 0%, transparent 25%);
     opacity: 0.12;
 }

 .right-panel::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 80px;
     height: 80px;
     background: conic-gradient(from 0deg at 0% 100%, var(--gas-amber) 0%, transparent 25%);
     opacity: 0.10;
 }

 /* logo */
 .logo-wrap {
     margin-bottom: 32px;
 }

 .logo-wrap img {
     height: 52px;
     width: auto;
     object-fit: contain;
 }

 /* header */
 .login-header {
     margin-bottom: 36px;
 }

 .access-label {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 10px;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--gas-orange);
     font-weight: 700;
     margin-bottom: 10px;
 }

 .access-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--gas-green);
     box-shadow: 0 0 8px var(--gas-green);
     animation: blink 1.4s ease-in-out infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: 0.2
     }
 }

 .login-header h2 {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 42px;
     letter-spacing: 2px;
     color: var(--gas-white);
     line-height: 1;
 }

 .login-header p {
     margin-top: 8px;
     font-size: 14px;
     color: var(--gas-sub);
     font-weight: 500;
 }

 /* divider */
 .divider {
     height: 1px;
     background: linear-gradient(90deg, var(--gas-orange), transparent);
     margin-bottom: 28px;
     opacity: 0.4;
 }

 /* fields */
 .field-group {
     margin-bottom: 20px;
 }

 .field-group label {
     display: block;
     font-size: 10px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--gas-sub);
     font-weight: 700;
     margin-bottom: 8px;
 }

 .field-wrap {
     position: relative;
 }

 .field-icon {
     position: absolute;
     left: 14px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 16px;
     line-height: 1;
     z-index: 1;
     pointer-events: none;
 }

 .field-wrap input {
     width: 100%;
     background: var(--gas-card);
     border: 1px solid var(--gas-border);
     border-radius: 8px;
     padding: 13px 14px 13px 44px;
     font-family: 'Rajdhani', sans-serif;
     font-size: 15px;
     font-weight: 500;
     color: var(--gas-white);
     outline: none;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 .field-wrap input::placeholder {
     color: var(--gas-muted);
 }

 .field-wrap input:focus {
     border-color: var(--gas-orange);
     box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
 }

 .field-wrap input.is-invalid {
     border-color: var(--gas-danger);
     box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.12);
 }

 .invalid-feedback {
     display: block;
     margin-top: 6px;
     font-size: 12px;
     color: var(--gas-danger);
     font-weight: 600;
     letter-spacing: 0.5px;
 }

 /* submit */
 .btn-signin {
     width: 100%;
     margin-top: 8px;
     padding: 15px;
     background: linear-gradient(135deg, var(--gas-orange) 0%, #FF9500 100%);
     border: none;
     border-radius: 8px;
     font-family: 'Bebas Neue', sans-serif;
     font-size: 20px;
     letter-spacing: 3px;
     color: #fff;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: transform 0.15s, box-shadow 0.15s;
     box-shadow: 0 4px 20px rgba(255, 107, 0, 0.35);
 }

 .btn-signin::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
     opacity: 0;
     transition: opacity 0.2s;
 }

 .btn-signin:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 32px rgba(255, 107, 0, 0.5);
 }

 .btn-signin:hover::after {
     opacity: 1;
 }

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

 /* system status bar */
 .status-bar {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-top: 28px;
     padding: 12px 16px;
     background: var(--gas-card);
     border: 1px solid var(--gas-border);
     border-radius: 8px;
 }

 .status-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--gas-green);
     box-shadow: 0 0 10px var(--gas-green);
     flex-shrink: 0;
     animation: blink 2s ease-in-out infinite;
 }

 .status-text {
     font-family: 'Share Tech Mono', monospace;
     font-size: 11px;
     color: var(--gas-sub);
     letter-spacing: 1px;
 }

 .status-text span {
     color: var(--gas-green);
 }

 /* footer */
 .login-footer {
     margin-top: 24px;
     font-size: 11px;
     color: var(--gas-muted);
     letter-spacing: 1px;
     text-align: center;
 }

 .login-footer strong {
     color: var(--gas-sub);
     font-weight: 600;
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 900px) {
     .left-panel {
         display: none;
     }

     .right-panel {
         width: 100%;
         min-width: unset;
     }
 }