/* ===== Glass Dashboard Styles (stable + clean mobile) ===== */

/* 1) Theme variables */
:root{
  --bg-light:#e3eaf4; --bg-dark:#121212;
  --text-light:#111;  --text-dark:#eee;
  --accent:#5c6ac4;
  --card-bg-light:rgba(255,255,255,.6);
  --card-bg-dark:rgba(40,40,40,.6);
  --input-bg-light:rgba(255,255,255,.9);
  --input-bg-dark:rgba(60,60,60,.8);

  --pad:1.5rem;
  --radius-sm:.75rem; --radius:1.5rem; --radius-xl:2rem;
}

[data-theme="light"]{--bg:var(--bg-light);--text:var(--text-light);--card-bg:var(--card-bg-light);--input-bg:var(--input-bg-light)}
[data-theme="dark"] {--bg:var(--bg-dark); --text:var(--text-dark); --card-bg:var(--card-bg-dark); --input-bg:var(--input-bg-dark)}

/* 2) Reset & base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100vw;height:100vh;overflow:auto;
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  position:relative;
}
body{display:flex;justify-content:center;align-items:flex-start;padding:1rem}

/* 3) Layout */
.dashboard-container{
  display:flex;gap:1rem;align-items:stretch;
  width:100%;max-width:1600px;
}

/* 4) Left panel */
aside.inputs-panel{
  flex:1 1 0;min-width:280px;
  background:var(--card-bg);backdrop-filter:blur(20px) saturate(180%);
  border-radius:var(--radius);padding:var(--pad);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}

.inputs-panel .tabs{display:flex;gap:.5rem;margin-bottom:1rem}
.inputs-panel .tab{
  flex:1 1 auto;padding:.75rem;background:transparent;color:var(--text);
  border:none;border-radius:999px;cursor:pointer;transition:background .2s
}
.inputs-panel .tab.active{background:var(--accent);color:#fff}
.inputs-panel .panel{display:flex;flex-direction:column;gap:1rem}

.field-group label{font-size:.95rem;margin-bottom:.25rem;display:block}
.field-group input{
  width:100%;padding:.6rem .75rem;border:none;border-radius:var(--radius-sm);
  background:var(--input-bg);color:var(--text);font-size:1rem
}
.field-group.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.divider{height:1px;background:rgba(255,255,255,.2);margin:1rem 0}

/* 5) Right panel (results) */
section.results-panel{
  flex:2 1 0;min-width:320px;
  background:var(--card-bg);backdrop-filter:blur(20px) saturate(180%);
  border-radius:var(--radius);padding:var(--pad);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  display:flex;flex-direction:column;
  /* ВАЖНО: без внутреннего скролла */
  overflow:visible;
}

.results-panel>h2{font-size:1.5rem;margin-bottom:1rem}
.results-panel>h3{font-size:1rem;margin-bottom:1rem}

/* 6) Results grid */
.results-columns{
  /* на десктопе — две колонки, без внутренних скроллов */
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.results-column{display:flex;flex-direction:column;gap:1rem}

.results-group{
  background:var(--card-bg);backdrop-filter:blur(20px) saturate(180%);
  border-radius:1rem;padding:1rem;box-shadow:0 8px 24px rgba(0,0,0,.1)
}
.results-group h3{font-size:1.1rem;color:var(--accent);margin-bottom:.75rem}

.results-list{list-style:none}
.results-list li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.1)
}
.results-list li:last-child{border-bottom:none}
.label{font-size:.95rem;color:var(--text)}
.odds{
  font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  min-width:7ch;text-align:right
}

/* WIN block */
#wins-group{margin-bottom:1rem}

/* 7) Generic cards & misc */
.card{
  background:var(--card-bg);backdrop-filter:blur(25px) saturate(180%);
  border-radius:var(--radius-xl);padding:2.5rem;
  box-shadow:0 12px 36px rgba(0,0,0,.15);text-align:center
}
input:not(.code-input){
  width:100%;padding:.75rem;margin-bottom:1rem;border:none;border-radius:1rem;
  background:var(--input-bg);font-size:1rem;color:var(--text)
}

/* 8) Code inputs (login) */
.code-fieldset{
  display:inline-grid !important;grid-template-columns:repeat(6,3.5rem);
  gap:.5rem;margin:0;padding:0;border:none;outline:none
}
.code-input{
  width:100%;aspect-ratio:1;border:none;border-radius:1rem;background:var(--input-bg);
  font-size:1.5rem;text-align:center;color:var(--text);box-shadow:0 4px 12px rgba(0,0,0,.2)
}

/* 9) Buttons */
button,.btn{
  padding:.75rem 2rem;background:var(--accent);color:#fff;border:none;border-radius:1.5rem;
  cursor:pointer;transition:background .2s,transform .15s
}
button:hover,.btn:hover{background:#4e54c8;transform:translateY(-2px)}

/* 10) Theme toggle */
.toggle-theme{
  position:fixed;top:.75rem;left:.75rem;width:2.75rem;height:2.75rem;
  background:var(--card-bg);backdrop-filter:blur(15px);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--text);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:100
}

/* 11) Footer */
footer{text-align:center;margin-top:1.5rem;font-size:.8rem;color:rgba(255,255,255,.75)}

/* 12) Login helpers */
body.login{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;padding:1rem}
.card form .btn{align-self:center !important;margin-top:0}
.code-entry-form{display:flex;flex-direction:column;align-items:center;gap:1rem}
.code-entry-form .code-fieldset{display:inline-grid;grid-template-columns:repeat(6,3.5rem);gap:.5rem;justify-content:center}
.code-entry-form .btn{margin-top:0;align-self:center}

/* 13) Logout button */
.logout-btn{
  position:absolute;top:1rem;right:1rem;background:var(--accent);color:#fff;
  text-decoration:none;padding:.5rem 1rem;border-radius:.75rem;font-size:.9rem;transition:background .2s
}
.logout-btn:hover{background:#4e54c8}

/* ====== Responsive ====== */

/* Tablet and below: панели одна под другой */
@media (max-width:1024px){
  .dashboard-container{flex-direction:column}
  aside.inputs-panel,section.results-panel{width:100%;min-width:0}
}

/* Phones: одна колонка результатов на всю ширину, без внутреннего скролла */
@media (max-width:640px){
  :root{--pad:1.1rem;--radius:1rem;--radius-xl:1.25rem}

  .results-columns{grid-template-columns:1fr;gap:.75rem}
  .results-group{padding:.9rem}
  .results-list li{padding:.5rem 0}
  .label{font-size:.95rem}.odds{font-size:1.06rem}

  /* мягче эффекты для скорости */
  aside.inputs-panel,section.results-panel,.results-group{
    backdrop-filter:blur(8px) saturate(160%);box-shadow:0 6px 18px rgba(0,0,0,.12)
  }

  /* чтобы переключатель темы не закрывал вкладки — перенесём вниз */
  .toggle-theme{top:auto;bottom:1rem;left:1rem}
  /* инпуты «в две колонки» -> в одну на очень узких экранах */
  .field-group.two-cols{grid-template-columns:1fr}
}