:root{
  --bg:#0b0f17; --card:#111827ee; --muted:#9aa4b2; --text:#e5e7eb;
  --accent:#6ee7b7; --accent-2:#60a5fa; --danger:#f43f5e; --warn:#f59e0b; --ok:#22c55e;
  --ring:0 0 0 3px rgb(110 231 183 /.30); --radius:16px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text); background:var(--bg);
  background-image:
    radial-gradient(80rem 60rem at 120% -20%, rgba(56,189,248,.25) 0%, rgba(2,6,23,0) 60%),
    radial-gradient(70rem 50rem at -20% 20%, rgba(37,99,235,.25) 0%, rgba(2,6,23,0) 60%),
    radial-gradient(50rem 50rem at 110% 90%, rgba(59,130,246,.18) 0%, rgba(2,6,23,0) 60%),
    linear-gradient(180deg, #050b15 0%, #081423 40%, #0b0f17 100%);
}
body::before,body::after{
  content:""; position:fixed; z-index:-1; pointer-events:none; filter:blur(60px); mix-blend-mode:screen;
  width:70vmax; height:70vmax;
}
body::before{ right:-15vmax; top:-20vmax; opacity:.55;
  background:radial-gradient(closest-side at 65% 35%, rgba(56,189,248,.35), transparent 60%),
             radial-gradient(closest-side at 35% 65%, rgba(99,102,241,.28), transparent 60%);
  animation:floaty 18s ease-in-out infinite;
}
body::after{ left:-20vmax; bottom:-25vmax; opacity:.45;
  background:radial-gradient(closest-side at 65% 35%, rgba(59,130,246,.28), transparent 60%),
             radial-gradient(closest-side at 35% 65%, rgba(37,99,235,.22), transparent 60%);
  animation:floaty 22s ease-in-out infinite;
}
@keyframes floaty{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8px,12px) scale(1.03)}100%{transform:translate(0,0) scale(1)}}

/* layout wrapper */
.wrap{max-width:900px;margin:40px auto;padding:0 16px}

/* header */
.header{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.logo{
  width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(145deg,#111827,#0b1220);
  box-shadow:0 10px 25px rgb(0 0 0 /.35), inset 0 1px 0 rgb(255 255 255 /.05);
}
.title{ font-size:clamp(20px,2.2vw,28px); font-weight:700; letter-spacing:.2px; }
.subtitle{ color:var(--muted); font-size:14px; margin-top:2px; }
.flash{ animation:flashPulse 1.5s infinite }
@keyframes flashPulse{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.4)}100%{transform:scale(1);filter:brightness(1)}}

/* sekce + panel */
.section{margin:28px 0}
.section>h2{margin:0 0 12px;font-size:18px;font-weight:700;letter-spacing:.3px;color:#cfe1ff;text-shadow:0 0 10px rgba(96,165,250,.3)}
.panel{
  backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(20,30,48,.92), rgba(15,23,42,.75));
  border:1px solid rgba(96,165,250,.35); border-radius:var(--radius); padding:18px;
  box-shadow:0 0 25px rgba(96,165,250,.4), 0 0 50px rgba(37,99,235,.15);
  animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse{
  0%{box-shadow:0 0 25px rgba(96,165,250,.4),0 0 50px rgba(37,99,235,.15)}
  50%{box-shadow:0 0 35px rgba(96,165,250,.6),0 0 70px rgba(37,99,235,.25)}
  100%{box-shadow:0 0 25px rgba(96,165,250,.4),0 0 50px rgba(37,99,235,.15)}
}

/* form grid */
.grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.col-3{grid-column:span 2}
@media(max-width:960px){.grid{grid-template-columns:1fr}.col-3{grid-column:span 1}}

label{display:block;font-size:12px;color:var(--muted);margin:2px 0 8px}
.field{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 12px;box-shadow:inset 0 1px 0 rgb(255 255 255 /.05)}
.field input,.field select{width:100%;background:transparent;border:0;outline:none;color:var(--text);font-size:14px;padding:8px 2px}
.hint{font-size:12px;color:var(--muted);margin-top:6px}

/* buttons */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;justify-content:center}
.btn{--bg:#1f2937;--fg:var(--text);display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,var(--bg),#0b1220);color:var(--fg);font-weight:600;letter-spacing:.2px;cursor:pointer;transition:transform .06s,box-shadow .2s,border-color .2s;box-shadow:0 6px 14px rgb(0 0 0 /.35), inset 0 1px 0 rgb(255 255 255 /.06)}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.primary{--bg:#065f46;border-color:rgb(110 231 183 /.35)}
.btn.secondary{--bg:#0b3a7e;border-color:rgb(96 165 250 /.35)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.12)}
.btn.warn{--bg:#7c2d12;border-color:rgb(245 158 11 /.45)}
.btn.danger{--bg:#7f1d1d;border-color:rgb(244 63 94 /.45)}

/* lock */
.lock{display:flex;align-items:center;gap:10px;font-size:14px;margin:18px 0 8px;color:var(--muted)}
.lock strong{color:var(--text)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;margin:16px 0}
.stat{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px;box-shadow:inset 0 1px 0 rgb(255 255 255 /.05)}
.stat .label{font-size:12px;color:var(--muted)}
.stat .value{font-size:20px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
@media(max-width:960px){.stats{grid-template-columns:repeat(2,1fr)}}

/* table */
.card{margin-top:8px;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 30px rgb(0 0 0 /.35)}
.table-wrap{overflow:auto;max-height:calc(100vh - 260px)}
table{width:100%;border-collapse:collapse;min-width:860px}
thead th{position:sticky;top:0;backdrop-filter:blur(10px);background:linear-gradient(180deg, rgba(17,24,39,.98), rgba(17,24,39,.85));color:#cbd5e1;text-align:left;font-size:12px;letter-spacing:.3px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
tbody td{padding:12px 16px;border-bottom:1px dashed rgba(255,255,255,.06);font-size:14px}
tbody tr:hover{background:rgba(255,255,255,.03)}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08)}
.pill.ok{color:#0f5132;background:linear-gradient(180deg,#86efac,#34d399);border-color:#86efac}
.pill.near{color:#78350f;background:linear-gradient(180deg,#fde68a,#f59e0b);border-color:#fbbf24}
.pill.no{color:#7f1d1d;background:linear-gradient(180deg,#fca5a5,#f87171);border-color:#fca5a5}

/* pomocné zarovnání + barvy pro zisk/ztrátu */
.right{ text-align:right } .center{ text-align:center }
.pos{ color:#86efac } .neg{ color:#fca5a5 }

/* Velký skleněný shell kolem celé horní sekce (jako na 2. obrázku) */
.shell{
  padding:18px;
  border-radius:24px;
  background: linear-gradient(180deg, rgba(17,24,39,.78), rgba(11,18,32,.72));
  border:1px solid rgba(96,165,250,.30);
  box-shadow:
    0 0 0 1px rgba(96,165,250,.20) inset,
    0 30px 80px rgba(0,0,0,.50),
    0 0 45px rgba(37,99,235,.25),
    0 0 90px rgba(37,99,235,.15);
}

/* trochu větší vnitřní „glow“ na inputs pro futuristický efekt */
.field{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.35);
}

/* tlačítka – lehký neonový obrys při hoveru */
.btn:hover{
  box-shadow:
    0 6px 14px rgba(0,0,0,.35),
    0 0 22px rgba(96,165,250,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Souhrn – ať se přilepí vizuálně k panelu */
.stats{ margin-top:16px }

/* Top-right switch */
.ns-top-switch{
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 9999;
  display: flex;
  gap: 10px;
  backdrop-filter: blur(6px);
}
.ns-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 122px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  background: #0b0f17cc;
  color: #e7eef7;
  text-decoration: none;
  border: 1px solid #22314a;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.ns-tab:hover{ border-color:#33507e; }
.ns-tab.active{
  outline: 2px solid #1d8cff55;
  box-shadow: 0 0 18px #1d8cff33 inset;
}
@media (max-width:700px){
  .ns-tab{ min-width: 98px; height: 34px; padding: 0 10px; font-size: 14px; }
}

/* Zarovnání přepínače vpravo nahoře */
.ns-top-switch{
  position: fixed; top: 18px; right: 18px;
  display: flex; gap: 10px; z-index: 50;
}

/* Základ tlačítka pro obě záložky (Kalkulačka + Tor44) */
.ns-top-switch .ns-tab{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; border-radius:12px;
  font:600 14px/1.1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#e8f0ff; background:#141a22;
  border:1px solid rgba(74,125,255,.25);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.3), 0 0 0 1px rgba(10,20,40,.35);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration:none !important;           /* bez podtržení */
}
.ns-top-switch .ns-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(74,125,255,.45);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.3),
              0 0 18px rgba(40,120,255,.35),
              0 0 0 1px rgba(40,120,255,.45);
}
.ns-top-switch .ns-tab.active{
  border-color:rgba(74,125,255,.55);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.4),
              0 0 24px rgba(40,120,255,.45),
              0 0 0 1px rgba(40,120,255,.6);
}

/* Tor44 – jemná modrá pulsace (neon glow) */
.tor44-btn{
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.3),
              0 0 10px rgba(0,140,255,.35),
              0 0 0 1px rgba(0,140,255,.45);
  animation: tor44Pulse 2.4s ease-in-out infinite;
}
.tor44-btn:hover{
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.3),
              0 0 18px rgba(0,160,255,.65),
              0 0 0 1px rgba(0,160,255,.65);
}
@keyframes tor44Pulse{
  0%   { box-shadow: inset 0 0 0 1px rgba(15,23,42,.3), 0 0 8px rgba(0,140,255,.30), 0 0 0 1px rgba(0,140,255,.45); }
  50%  { box-shadow: inset 0 0 0 1px rgba(15,23,42,.3), 0 0 16px rgba(0,140,255,.60), 0 0 0 1px rgba(0,140,255,.55); }
  100% { box-shadow: inset 0 0 0 1px rgba(15,23,42,.3), 0 0 8px rgba(0,140,255,.30), 0 0 0 1px rgba(0,140,255,.45); }
}

/* U Tor44 tlačítka – posun textu mírně doprava */
.ns-top-switch .tor44-btn {
  justify-content: flex-start;
  padding-left: 12px;
  gap: 10px; /* zvětšená mezera mezi ikonou a textem */
}

/* Základ tlačítka (Kalkulačka + Tor44) */
.ns-top-switch .tor44-btn{
  justify-content: flex-start; /* doleva */
  padding-left: 10px;          /* blíž k levému okraji */
  gap: 12px;                    /* mezera mezi ikonou a textem */
}

/* Hover */
.ns-top-switch .ns-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(74,125,255,0.45);
  box-shadow:
    inset 0 0 0 1px rgba(15,23,42,0.3),
    0 0 18px rgba(40,120,255,0.35),
    0 0 0 1px rgba(40,120,255,0.45);
}

/* Aktivní záložka (Kalkulačka) */
.ns-top-switch .ns-tab.active{
  border-color: rgba(74,125,255,0.55);
  box-shadow:
    inset 0 0 0 1px rgba(15,23,42,0.4),
    0 0 24px rgba(40,120,255,0.45),
    0 0 0 1px rgba(40,120,255,0.6);
}

.tor44-icon {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  display: block;
}

/* Glow animace pro Tor44 */
.tor44-btn {
  animation: tor44Pulse 2.4s ease-in-out infinite;
}

@keyframes tor44Pulse {
  0%   { box-shadow: 0 0 8px rgba(0,140,255,.30); }
  50%  { box-shadow: 0 0 16px rgba(0,140,255,.60); }
  100% { box-shadow: 0 0 8px rgba(0,140,255,.30); }
}

/* ===== Challenge – denní journal ===== */

.ch-panel {
  margin-bottom: 1.5rem;
}

.ch-stats {
  margin-top: 0.75rem;
  gap: 0.75rem;
}

.ch-stats .stat {
  background: radial-gradient(circle at top left, rgba(56,189,248,0.18), rgba(15,23,42,0.9));
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,0.25);
}

.ch-stats .stat .label {
  font-size: 0.8rem;
  opacity: 0.75;
}

.ch-stats .stat .value {
  font-size: 1.1rem;
  font-weight: 600;
}

/* formulář */

.ch-grid {
  row-gap: 1rem;
}

.ch-form .field input,
.ch-form .field textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(30,64,175,0.7);
  background: rgba(15,23,42,0.95);
  color: #e5edff;
  padding: 8px 10px;
  font-size: 0.9rem;
}

.ch-form .field textarea {
  min-height: 70px;
  resize: vertical;
}

.ch-form label {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}

.ch-slider-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.ch-slider-field input[type="range"] {
  width: 100%;
}

.ch-emotions-label {
  font-size: 0.8rem;
  opacity: 0.8;
}

.ch-rules-field {
  display: flex;
  align-items: center;
  height: 100%;
}

.ch-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.ch-checkbox input[type="checkbox"] {
  accent-color: #22c55e;
}

.ch-form-actions {
  margin-top: 1.3rem;
  display: flex;
  justify-content: flex-end;
}

/* seznam dnů */

.ch-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.ch-item {
  border-radius: 14px;
  padding: 10px 12px;
  background: radial-gradient(circle at top left, rgba(56,189,248,0.18), rgba(15,23,42,0.98));
  border: 1px solid rgba(37,99,235,0.6);
  box-shadow: 0 14px 30px rgba(15,23,42,0.65);
  font-size: 0.85rem;
}

.ch-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.ch-item-date {
  font-weight: 600;
}

.ch-item-account {
  opacity: 0.8;
  font-size: 0.8rem;
}

.ch-item-pl {
  font-weight: 700;
}

.ch-item-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  opacity: 0.9;
}

.ch-item-notes {
  margin-top: 6px;
  font-size: 0.8rem;
  opacity: 0.85;
}

.ch-item-delete {
  margin-top: 6px;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid rgba(248,113,113,0.7);
  background: transparent;
  color: #fecaca;
}

.is-green {
  color: #4ade80;
}

.is-red {
  color: #fb7185;
}

/* mobile tweak */
@media (max-width: 640px) {
  .ch-item {
    padding: 10px;
  }
}

/* ===== Challenge – mobile optimalizace ===== */

.ch-panel {
  margin-bottom: 18px;
}

.ch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ch-grid .col-3,
.ch-grid .col-6 {
  flex: 0 0 calc(50% - 6px);
  max-width: calc(50% - 6px);
}

/* stats – aby byly hezky do mřížky i na mobilu */
.ch-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ch-stats .stat {
  flex: 1 1 140px;
}

/* Form tlačítko přes celou šířku */
.ch-form-actions .btn {
  width: 100%;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .shell {
    padding: 0 12px;
  }

  .ch-grid .col-3,
  .ch-grid .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .ch-stats .stat {
    flex: 1 1 48%;
  }

  .ch-panel h2,
  .ch-panel h3 {
    font-size: 1.05rem;
  }

  .ns-top-switch {
    gap: 6px;
  }

  .ns-top-switch .ns-tab {
    padding-inline: 10px;
  }
}