:root{
  --bg: #0f1724;
  --card: #1e293b;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --accent-hover: #0ea5e9;
  --success: #4ade80;
  --danger: #ef4444;
  --radius: 12px;
  --shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

*{box-sizing: border-box}
html,body{height:100%}

/* --- ALAP BEÁLLÍTÁSOK (MINDEN NÉZETRE ÉRVÉNYES) --- */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: #f1f5f9;
  
  /* FLEXBOX: Vízszintesen középre, Függőlegesen FENTRE */
  display: flex;
  justify-content: center; /* Vízszintesen KÖZÉP */
  align-items: flex-start; /* Függőlegesen FENT (Top) */
  
  /* Távolság a tetejétől - itt állíthatod, mennyire legyen fent */
  padding-top: 80px;      
  padding-bottom: 40px;
  padding-left: 100px;
  padding-right: 20px;
  
  overflow-y: auto; 
}

/* KONTÉNER (.app) */
.app {
  width: 100%;
  max-width: 950px; /* Alapból széles */
  margin: 0 auto;
  transition: max-width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- LOGIN MÓD --- */
/* Itt CSAK a szélességet húzzuk össze, a pozíció marad fent! */
body.login-mode .app {
  max-width: 800px; /* Keskeny kártya */
}

/* Login módban elrejtjük a jobb oldali panelt */
body.login-mode .panel-right {
  display: none;
}

/* RÁCSRENDSZER */
.grid {
  display: grid;
  grid-template-columns: 1fr 380px; 
  gap: 24px;
}

/* Kisebb képernyőn egy oszlop */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  body.login-mode .app { max-width: 100%; }
}

/* KÁRTYÁK */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:24px;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:var(--shadow);
  margin-bottom: 20px;
}

/* INPUTOK */
input {
  width:100%;
  padding:12px 16px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.1);
  background: rgba(15, 23, 42, 0.6);
  color: #fff;
  outline:none;
  margin-bottom: 12px;
  font-size:15px;
  transition: border-color 0.2s;
}
input:focus{ border-color: var(--accent); }

/* GOMBOK */
.btn{
  display:inline-flex;
  justify-content: center;
  align-items: center;
  padding:12px 20px;
  border-radius:8px;
  border: none;
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  transition: all 0.2s ease;
  width: 100%; /* Login gomb legyen széles */
}
.btn:active{ transform: scale(0.98); }

.btn-primary{ background: var(--accent); color: #0f1724; }
.btn-primary:hover{ background: var(--accent-hover); }

.btn-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--danger);
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    width: auto; /* Kilépés gomb ne legyen teljes széles */
}
.btn-danger:hover { background-color: var(--danger); color: white; }

.btn-ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.1);
}
.btn-ghost:hover{ color: #fff; border-color: #fff; }

/* REGISZTRÁCIÓ VÁLTÓ LINK (ÚJ!) */
.auth-switch {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}
.auth-switch:hover { color: var(--accent); }

/* LAYOUT ELEMEK */
.balance {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px 0;
  text-align: center;
  background: rgba(255,255,255,0.03);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

/* TRANZAKCIÓK LISTÁJA */
.history-section h4 {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
#myTransactionsList {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
}
#myTransactionsList table { width: 100%; border-collapse: collapse; }
#myTransactionsList tr { border-bottom: 1px solid rgba(255,255,255,0.05); }
#myTransactionsList td { padding: 12px 8px; vertical-align: middle; }
#myTransactionsList small { display: block; color: #475569; font-size: 11px; margin-top: 2px; }

/* ADMIN TÁBLÁZAT */
#transactions table { width: 100%; font-size: 13px; color: var(--muted); }
#transactions td, #transactions th { padding: 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* SCROLLBAR */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }