/* ═══════════════════════════════════════════
 BENNY'S MOTORWORKS — PREMIUM DARK red
 Based on UNREAL RP Design System
 ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
 --red-primary:#c40000;
 --red-light:#ff3333;
 --red-dark:#8b0000;
 --red-glow:rgba(196, 0, 0, 0.25);

 --bg-black:#050505;
 --bg-deep:#080808;
 --bg-card:#0c0c0c;
 --bg-hover:#121212;

 --border-dim:#1a1a1a;
 --border-light:#252525;

 --text-main:#ffffff;
 --text-dim:#a0a0a0;
 --text-muted:#606060;

 --alert-red:#ff4444;
 --alert-red-bg:#331111;
 --alert-red-border:#552222;
 --green:#44ff88;

 --transition-fast:0.2s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-main:0.3s cubic-bezier(0.4, 0, 0.2, 1);
 --shadow-premium:0 10px 40px rgba(0, 0, 0, 0.8);
}

@keyframes fadeIn {
 from {
 opacity:0;
 transform:translateY(10px);
 }

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

@keyframes logoPulse {

 0%,
 100% {
 filter:drop-shadow(0 0 5px var(--red-glow));
 }

 50% {
 filter:drop-shadow(0 0 15px var(--red-primary));
 }
}

@keyframes pulseRed {

 0%,
 100% {
 box-shadow:0 0 0 0 var(--red-glow);
 }

 50% {
 box-shadow:0 0 0 12px rgba(196, 0, 0, 0);
 }
}

* {
 box-sizing:border-box;
 margin:0;
 padding:0;
 -webkit-font-smoothing:antialiased;
}

body {
 background-color:var(--bg-black);
 color:var(--text-main);
 font-family:'Outfit', sans-serif;
 line-height:1.5;
 overflow-x:hidden;
 min-height:100vh;
}

/* ══════════════════════════════════════════
 AUTH SCREEN
 ══════════════════════════════════════════ */
.auth-overlay {
 position:fixed;
 inset:0;
 z-index:200;
 background:radial-gradient(circle at center, #151515, #000);
 display:flex;
 align-items:center;
 justify-content:center;
}

.auth-card {
 background:var(--bg-card);
 padding:50px;
 border-radius:12px;
 border:1px solid var(--border-light);
 border-top:5px solid var(--red-primary);
 width:100%;
 max-width:420px;
 box-shadow:var(--shadow-premium);
 text-align:center;
 animation:fadeIn 0.6s ease-out;
}

.auth-logo {
 font-size:48px;
 margin-bottom:16px;
 animation:logoPulse 4s infinite ease-in-out;
}

.auth-title {
 font-size:2rem;
 font-weight:950;
 letter-spacing:-0.5px;
 background:linear-gradient(to right, #fff, var(--red-primary));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}

.auth-subtitle {
 font-size:0.65rem;
 text-transform:uppercase;
 letter-spacing:4px;
 color:var(--text-muted);
 font-weight:800;
 margin-bottom:32px;
}

.auth-tabs {
 display:flex;
 gap:4px;
 margin-bottom:28px;
 background:var(--bg-deep);
 border-radius:4px;
 border:1px solid var(--border-dim);
 padding:4px;
}

.auth-tab {
 flex:1;
 padding:10px;
 border:none;
 background:transparent;
 color:var(--text-muted);
 font-family:'Outfit', sans-serif;
 font-size:0.7rem;
 font-weight:800;
 letter-spacing:1.5px;
 text-transform:uppercase;
 cursor:pointer;
 border-radius:4px;
 transition:var(--transition-fast);
}

.auth-tab.active {
 background:rgba(196, 0, 0, 0.12);
 color:var(--red-primary);
 border:1px solid rgba(196, 0, 0, 0.2);
}

.auth-form {
 text-align:left;
}

.input-group {
 margin-bottom:20px;
}

.input-label {
 display:block;
 font-size:0.7rem;
 font-weight:900;
 text-transform:uppercase;
 letter-spacing:1.5px;
 color:var(--red-primary);
 margin-bottom:10px;
}

.form-input {
 width:100%;
 padding:14px 18px;
 background:var(--bg-black);
 border:1px solid var(--border-light);
 color:#fff;
 border-radius:4px;
 font-family:'Outfit', sans-serif;
 font-size:0.95rem;
 transition:var(--transition-fast);
 outline:none;
}

.form-input::placeholder {
 color:var(--text-muted);
}

.form-input:focus {
 border-color:var(--red-primary);
 box-shadow:0 0 15px var(--red-glow);
}

.btn-primary {
 width:100%;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:14px 28px;
 border-radius:4px;
 font-weight:900;
 font-size:0.75rem;
 text-transform:uppercase;
 letter-spacing:1.5px;
 cursor:pointer;
 border:1px solid transparent;
 transition:var(--transition-main);
 background:var(--red-primary);
 color:#000;
 margin-top:8px;
}

.btn-primary:hover {
 background:var(--red-light);
 transform:translateY(-2px);
 box-shadow:0 5px 20px var(--red-glow);
}

.auth-error {
 font-size:0.8rem;
 color:var(--red);
 margin-top:14px;
 text-align:center;
 min-height:20px;
 font-weight:700;
}

/* ══════════════════════════════════════════
 HEADER
 ══════════════════════════════════════════ */
.header {
 position:fixed;
 top:0;
 left:0;
 right:0;
 z-index:100;
 background:var(--bg-black);
 border-bottom:1px solid var(--border-dim);
}

.header-glow {
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:1px;
 background:linear-gradient(90deg, transparent, var(--red-primary), transparent);
 opacity:0.4;
}

.header-content {
 max-width:1000px;
 margin:0 auto;
 padding:18px 24px;
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.logo-container {
 display:flex;
 align-items:center;
 gap:14px;
}

.logo-icon {
 width:42px;
 height:42px;
 border-radius:4px;
 background:var(--red-primary);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:18px;
 box-shadow:0 0 15px var(--red-glow);
}

.logo-text h1 {
 font-size:1.4rem;
 font-weight:950;
 letter-spacing:-0.5px;
 background:linear-gradient(to right, #fff, var(--red-primary));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}

.logo-text .subtitle {
 font-size:0.55rem;
 text-transform:uppercase;
 letter-spacing:4px;
 color:var(--text-muted);
 font-weight:800;
}

.header-right {
 display:flex;
 align-items:center;
 gap:12px;
}

.user-badge {
 font-size:0.75rem;
 font-weight:800;
 letter-spacing:1px;
 color:var(--red-primary);
 padding:6px 14px;
 background:rgba(196, 0, 0, 0.08);
 border:1px solid rgba(196, 0, 0, 0.2);
 border-radius:4px;
 text-transform:uppercase;
}

.btn-logout {
 display:inline-flex;
 align-items:center;
 padding:8px 16px;
 background:var(--red-bg);
 color:#ff5c5c;
 border:1px solid var(--red-border);
 border-radius:4px;
 font-family:'Outfit', sans-serif;
 font-size:0.7rem;
 font-weight:900;
 letter-spacing:1px;
 text-transform:uppercase;
 cursor:pointer;
 transition:var(--transition-fast);
}

.btn-logout:hover {
 background:#551111;
 border-color:#aa1111;
}

/* ══════════════════════════════════════════
 MAIN CONTENT
 ══════════════════════════════════════════ */
.main-content {
 max-width:1000px;
 margin:0 auto;
 padding:110px 24px 60px;
 animation:fadeIn 0.6s ease-out;
}

.welcome-bar {
 display:flex;
 align-items:center;
 justify-content:space-between;
 margin-bottom:40px;
 padding-bottom:30px;
 border-bottom:1px solid var(--border-dim);
}

.welcome-left {
 display:flex;
 flex-direction:column;
 gap:5px;
}

.rank-badge {
 display:inline-block;
 padding:4px 12px;
 background:var(--red-primary);
 color:white;
 border-radius:4px;
 font-size:0.7rem;
 font-weight:800;
 text-transform:uppercase;
 letter-spacing:1px;
 width:fit-content;
 box-shadow:0 0 10px var(--red-glow);
}

.welcome-text {
 font-size:1.6rem;
 font-weight:800;
 text-transform:uppercase;
 letter-spacing:-0.5px;
}

.welcome-text span {
 background:linear-gradient(to right, #fff, var(--red-primary));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}

.btn-admin-link {
 display:inline-flex;
 align-items:center;
 gap:6px;
 font-family:'Outfit', sans-serif;
 font-size:0.7rem;
 font-weight:900;
 letter-spacing:1.5px;
 color:var(--red-primary);
 text-decoration:none;
 text-transform:uppercase;
 padding:10px 20px;
 border:1px solid rgba(196, 0, 0, 0.2);
 border-radius:4px;
 transition:var(--transition-fast);
}

.btn-admin-link:hover {
 background:rgba(196, 0, 0, 0.08);
 border-color:var(--red-primary);
 transform:translateY(-2px);
 box-shadow:0 5px 20px var(--red-glow);
}

.section-label {
 font-size:0.65rem;
 text-transform:uppercase;
 letter-spacing:2px;
 color:var(--red-primary);
 font-weight:900;
 margin-bottom:18px;
 opacity:0.7;
}


.actions-section {
 margin-bottom:45px;
}

.action-cards {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:20px;
}

.action-card {
 background:var(--bg-card);
 border:1px solid var(--border-dim);
 border-radius:6px;
 padding:32px 28px;
 text-align:center;
 transition:var(--transition-main);
 position:relative;
 overflow:hidden;
}

.repair-action {
 cursor:pointer;
 border:1px solid var(--border-dim);
}

.repair-action:hover {
 border-color:var(--red-primary);
 transform:translateY(-5px);
 box-shadow:var(--shadow-premium);
}

.repair-action:active {
 transform:translateY(-2px);
}

.custom-action {
 border:1px solid var(--border-dim);
}

.custom-action:hover {
 border-color:var(--border-light);
}

.action-icon {
 font-size:44px;
 margin-bottom:14px;
 animation:logoPulse 4s infinite ease-in-out;
}

.action-name {
 font-size:1.1rem;
 font-weight:950;
 letter-spacing:0.5px;
 text-transform:uppercase;
 display:block;
}

.action-price {
 font-size:2rem;
 font-weight:950;
 color:var(--red-primary);
 display:block;
 margin-top:6px;
 text-shadow:0 0 20px var(--red-glow);
}

.action-price-sub {
 font-size:0.75rem;
 color:var(--text-muted);
 letter-spacing:1.5px;
 font-weight:700;
 text-transform:uppercase;
 display:block;
 margin-top:6px;
}

.action-hint {
 font-size:0.65rem;
 letter-spacing:1.5px;
 color:var(--text-muted);
 font-weight:800;
 text-transform:uppercase;
 margin-top:14px;
 opacity:0;
 transition:var(--transition-fast);
}

.repair-action:hover .action-hint {
 opacity:1;
 color:var(--red-primary);
}


.custom-input-row {
 display:flex;
 align-items:center;
 gap:8px;
 margin-top:18px;
 justify-content:center;
}

.custom-price-field {
 width:110px;
 padding:12px 14px;
 background:var(--bg-black);
 border:1px solid var(--border-light);
 border-radius:4px;
 color:var(--red-primary);
 font-family:'Outfit', sans-serif;
 font-size:1.2rem;
 font-weight:900;
 text-align:center;
 outline:none;
 transition:var(--transition-fast);
 appearance:textfield;
 -moz-appearance:textfield;
}

.custom-price-field::-webkit-outer-spin-button,
.custom-price-field::-webkit-inner-spin-button {
 -webkit-appearance:none;
}

.custom-price-field:focus {
 border-color:var(--red-primary);
 box-shadow:0 0 15px var(--red-glow);
}

.input-dollar {
 font-size:1.2rem;
 color:var(--red-dark);
 font-weight:900;
}

.btn-add-custom {
 padding:12px 18px;
 background:var(--red-primary);
 border:none;
 border-radius:4px;
 color:#000;
 font-family:'Outfit', sans-serif;
 font-size:0.7rem;
 font-weight:900;
 letter-spacing:1.5px;
 text-transform:uppercase;
 cursor:pointer;
 transition:var(--transition-main);
}

.btn-add-custom:hover {
 background:var(--red-light);
 transform:translateY(-2px);
 box-shadow:0 5px 20px var(--red-glow);
}


.totals-section {
 margin-bottom:45px;
}

.totals-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
 gap:16px;
}

.total-card {
 background:var(--bg-card);
 border:1px solid var(--border-dim);
 border-radius:6px;
 padding:26px 18px;
 text-align:center;
 transition:var(--transition-main);
}

.total-card:hover {
 border-color:var(--border-light);
 transform:translateY(-3px);
}

.total-icon {
 font-size:26px;
 display:block;
 margin-bottom:8px;
}

.total-value {
 font-size:1.6rem;
 font-weight:950;
 color:var(--text-main);
 display:block;
}

.total-label {
 font-size:0.65rem;
 letter-spacing:1.5px;
 color:var(--text-muted);
 font-weight:800;
 text-transform:uppercase;
 margin-top:4px;
 display:block;
}

.total-main {
 border-color:var(--red-glow);
 border-top:3px solid var(--red-primary);
}

.total-main .total-value {
 color:var(--red-primary);
 text-shadow:0 0 15px var(--red-glow);
}

.total-salary-card {
 border:2px solid var(--red-primary);
 background:linear-gradient(135deg, var(--bg-card), #1a0505);
 box-shadow:0 10px 30px rgba(196, 0, 0, 0.2);
 transform:scale(1.02);
}

.total-salary-card .total-value {
 color:#fff;
 font-size:2.2rem;
 text-shadow:0 0 20px var(--red-glow);
 margin-top:4px;
}

.total-salary-card .total-label {
 color:var(--red-light);
 font-weight:900;
 letter-spacing:2px;
}


.history-section {
 margin-bottom:40px;
}

.history-list {
 display:flex;
 flex-direction:column;
 gap:6px;
 max-height:400px;
 overflow-y:auto;
}

.history-list::-webkit-scrollbar {
 width:8px;
}

.history-list::-webkit-scrollbar-track {
 background:var(--bg-black);
}

.history-list::-webkit-scrollbar-thumb {
 background:var(--border-light);
 border-radius:10px;
}

.history-list::-webkit-scrollbar-thumb:hover {
 background:var(--red-primary);
}

.history-item {
 display:flex;
 align-items:center;
 gap:14px;
 padding:14px 18px;
 background:var(--bg-card);
 border:1px solid var(--border-dim);
 border-radius:4px;
 transition:var(--transition-fast);
}

.history-item:hover {
 border-color:var(--border-light);
 background:var(--bg-hover);
}

.history-icon {
 font-size:18px;
 flex-shrink:0;
}

.history-info {
 flex:1;
 min-width:0;
}

.history-type {
 font-weight:800;
 font-size:0.9rem;
 text-transform:uppercase;
 letter-spacing:0.5px;
}

.history-date {
 font-size:0.75rem;
 color:var(--text-muted);
}

.history-amount {
 font-size:1.1rem;
 font-weight:950;
 color:var(--red-primary);
 flex-shrink:0;
}

.history-amount.custom-amount {
 color:var(--red-light);
}

.history-delete {
 width:28px;
 height:28px;
 border-radius:4px;
 border:1px solid var(--red-border);
 background:transparent;
 color:var(--text-muted);
 font-size:12px;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:var(--transition-fast);
 flex-shrink:0;
}

.history-delete:hover {
 border-color:var(--red);
 color:var(--red);
 background:var(--red-bg);
}

.empty-state {
 text-align:center;
 padding:40px;
 color:var(--text-muted);
 font-size:0.85rem;
 font-weight:600;
}


.toast-container {
 position:fixed;
 bottom:24px;
 right:24px;
 z-index:500;
 display:flex;
 flex-direction:column;
 gap:8px;
}

.toast {
 padding:14px 20px;
 border-radius:4px;
 font-family:'Outfit', sans-serif;
 font-size:0.85rem;
 font-weight:700;
 display:flex;
 align-items:center;
 gap:10px;
 animation:fadeIn 0.3s ease, toastOut 0.3s ease 2.5s forwards;
 box-shadow:var(--shadow-premium);
 min-width:260px;
}

.toast.success {
 background:rgba(196, 0, 0, 0.1);
 border:1px solid rgba(196, 0, 0, 0.25);
 color:var(--red-primary);
}

.toast.error {
 background:var(--red-bg);
 border:1px solid var(--red-border);
 color:var(--red);
}

@keyframes toastOut {
 from {
 opacity:1;
 }

 to {
 opacity:0;
 }
}


@media (max-width:640px) {
 .header-content {
 flex-direction:column;
 gap:10px;
 }

 .action-cards {
 grid-template-columns:1fr;
 }

 .totals-grid {
 grid-template-columns:1fr;
 }

 .welcome-bar {
 flex-direction:column;
 gap:14px;
 text-align:center;
 }

 .auth-card {
 margin:0 16px;
 padding:36px 24px;
 }

 .main-content {
 padding:130px 16px 40px;
 }
}


.pulse-animation {
 animation:pulsered 0.5s ease;
}


.bg-particles {
 position:fixed;
 inset:0;
 z-index:0;
 pointer-events:none;
}

.particle {
 position:absolute;
 width:2px;
 height:2px;
 border-radius:50%;
 opacity:0;
 animation:particle-float linear infinite;
}

@keyframes particle-float {
 0% {
 opacity:0;
 transform:translateY(100vh) scale(0);
 }

 10% {
 opacity:0.3;
 }

 90% {
 opacity:0.3;
 }

 100% {
 opacity:0;
 transform:translateY(-10vh) scale(1);
 }
}

.dashboard {
 position:relative;
 z-index:1;
}