/* ===== Investice DK — design system ===== */
:root {
  --bg: #0b1020;
  --bg-2: #0e1428;
  --surface: rgba(255,255,255,0.035);
  --surface-2: rgba(255,255,255,0.06);
  --surface-hi: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.09);
  --border-hi: rgba(255,255,255,0.16);
  --text: #eaf0ff;
  --text-dim: #9aa7c7;
  --text-faint: #6b789c;
  --accent: #4fd1a1;      /* finance green */
  --accent-2: #38bdf8;    /* electric blue */
  --accent-warm: #f7b955; /* amber for dates */
  --danger: #f87171;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px -12px rgba(0,0,0,0.55);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="light"] {
  --bg: #f3f5fb;
  --bg-2: #eef1fa;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-hi: #ffffff;
  --border: rgba(20,30,60,0.10);
  --border-hi: rgba(20,30,60,0.18);
  --text: #101830;
  --text-dim: #4a5678;
  --text-faint: #8390b0;
  --accent: #0f9d6f;
  --accent-2: #0ea5e9;
  --accent-warm: #d98613;
  --shadow: 0 18px 50px -18px rgba(30,45,90,0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 85% -10%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(900px 560px at 5% 0%, rgba(79,209,161,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.app { max-width: 1160px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 32px) 40px; }

/* ===== Top bar ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand__mark {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: #04120c;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 24px -6px rgba(79,209,161,0.5);
}
.brand__text h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.brand__text h1 span {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand__text p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-faint); }

.topbar__right { display: flex; align-items: center; gap: 12px; }
.filters {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.filter {
  border: 0; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; font-weight: 550; padding: 8px 15px;
  border-radius: 999px; cursor: pointer; transition: .18s;
}
.filter:hover { color: var(--text); }
.filter.is-active { background: var(--surface-hi); color: var(--text); box-shadow: 0 1px 0 var(--border-hi) inset; }

.theme-toggle {
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  display: grid; place-items: center; transition: .18s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-hi); }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

/* ===== Grid ===== */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.empty { text-align: center; color: var(--text-faint); padding: 40px; }

/* ===== Card ===== */
.card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 16px;
  color: inherit; font: inherit; width: 100%;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, box-shadow .2s;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--card-accent, var(--accent)), transparent 70%);
  opacity: .9;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-hi); background: var(--surface-2); box-shadow: var(--shadow); }
.card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ticker-badge {
  font-weight: 750; font-size: 15px; letter-spacing: .02em;
  padding: 7px 10px; border-radius: 10px; color: #fff; white-space: nowrap;
  background: var(--card-accent, var(--accent));
}
.card__name { margin: 12px 0 2px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.card__tagline { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; min-height: 34px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 5px 9px; border-radius: 999px; color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--border);
}
.chip.dc { color: var(--accent-2); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* mini MW row on datacenter cards */
.card__mw { display: flex; gap: 8px; margin-top: 14px; }
.mw-mini {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 10px;
}
.mw-mini .k { font-size: 10.5px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mw-mini .v { font-size: 17px; font-weight: 700; margin-top: 2px; }
.mw-mini .v small { font-size: 11px; font-weight: 600; color: var(--text-faint); }

.card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
.next-date { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.next-date b { color: var(--accent-warm); font-weight: 650; }
.card__open { font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 4px; }

/* ===== Detail sheet ===== */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(4,8,20,0.55); backdrop-filter: blur(3px); animation: fade .2s ease; }
.sheet__panel {
  position: relative; width: min(620px, 100%); height: 100%; overflow-y: auto;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-left: 1px solid var(--border-hi); box-shadow: var(--shadow);
  animation: slide .28s cubic-bezier(.2,.85,.25,1);
  padding: 0 0 40px;
}
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }

.sheet__head {
  position: sticky; top: 0; z-index: 2; padding: 20px clamp(18px,4vw,28px) 18px;
  background: linear-gradient(180deg, var(--bg-2) 70%, transparent);
  border-bottom: 1px solid var(--border);
}
.sheet__head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet__ticker { display: flex; align-items: center; gap: 12px; }
.sheet__ticker .ticker-badge { font-size: 18px; padding: 9px 12px; }
.sheet__ticker h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sheet__ticker .ex { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.sheet__close {
  width: 38px; height: 38px; flex: none; border-radius: 11px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  display: grid; place-items: center; font-size: 20px; line-height: 1; transition: .15s;
}
.sheet__close:hover { color: var(--text); border-color: var(--border-hi); }
.sheet__tagline { margin: 12px 0 0; font-size: 13.5px; color: var(--text-dim); }

.sheet__body { padding: 4px clamp(18px,4vw,28px) 0; }
.block { margin-top: 26px; }
.block__title {
  display: flex; align-items: center; gap: 9px; margin: 0 0 13px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint);
}
.block__title svg { color: var(--accent); }

.prose { font-size: 14.5px; line-height: 1.62; color: var(--text); }
.prose p { margin: 0 0 10px; }
.focus-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.focus-list li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.focus-list li::before { content: ""; margin-top: 8px; width: 6px; height: 6px; flex: none; border-radius: 2px; background: var(--accent); }

/* MW stat tiles */
.mw-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.mw-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; }
.mw-tile .k { font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.mw-tile .k .sw { width: 9px; height: 9px; border-radius: 3px; }
.mw-tile .v { font-size: 24px; font-weight: 750; margin-top: 6px; letter-spacing: -0.02em; }
.mw-tile .v small { font-size: 12px; color: var(--text-faint); font-weight: 600; }

.mw-bar { margin-top: 14px; }
.mw-bar__track { height: 13px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; display: flex; }
.mw-bar__seg { height: 100%; transition: width .5s; }
.mw-bar__legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 10px; }
.mw-bar__legend span { font-size: 11.5px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.mw-bar__legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.mw-note { font-size: 12px; color: var(--text-faint); margin-top: 12px; line-height: 1.5; }

/* sites */
.sites { margin-top: 14px; display: grid; gap: 8px; }
.site { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; }
.site__name { font-size: 13.5px; font-weight: 600; }
.site__meta { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.site__mw { font-size: 15px; font-weight: 700; white-space: nowrap; }
.site__mw small { font-size: 11px; color: var(--text-faint); font-weight: 600; }

/* rich sites (buildout timeline) */
.site--rich { align-items: stretch; }
.site--rich .site__main { flex: 1; }
.site__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site__mw { text-align: right; }
.site-status { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.site-status.live { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.site-status.soon { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 16%, transparent); }
.site-status.build { color: var(--accent-warm); background: color-mix(in srgb, var(--accent-warm) 16%, transparent); }
.site-status.plan { color: var(--text-faint); background: color-mix(in srgb, var(--text-faint) 15%, transparent); }
.site-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.site-chip { font-size: 11px; color: var(--text-dim); background: var(--surface-2, var(--surface));
  border: 1px solid var(--border); border-radius: 7px; padding: 3px 8px; line-height: 1.3; }
.site-chip b { color: var(--text); font-weight: 650; }

/* analyst targets */
.analyst-head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-bottom: 12px; }
.analyst-head .k { font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.analyst-head .v { font-size: 15px; font-weight: 700; margin-left: 6px; }
.analyst-head .v.pos { color: var(--accent); }
.analysts { display: grid; gap: 8px; }
.analyst { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; }
.analyst__firm { font-size: 13.5px; font-weight: 600; }
.analyst__date { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.analyst__right { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.analyst__target { font-size: 15px; font-weight: 700; }
.rating { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; border-radius: 6px; }
.rating.pos { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rating.neu { color: var(--accent-warm); background: color-mix(in srgb, var(--accent-warm) 14%, transparent); }
.rating.neg { color: #f97066; background: color-mix(in srgb, #f97066 15%, transparent); }

/* dates timeline */
.timeline { display: grid; gap: 10px; }
.tl {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px;
}
.tl.is-next { border-color: color-mix(in srgb, var(--accent-warm) 55%, var(--border)); background: color-mix(in srgb, var(--accent-warm) 8%, var(--surface)); }
.tl__date { text-align: center; min-width: 48px; }
.tl__date .d { font-size: 18px; font-weight: 750; line-height: 1; }
.tl__date .m { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.tl__date .y { font-size: 10px; color: var(--text-faint); }
.tl__body { flex: 1; }
.tl__label { font-size: 14px; font-weight: 600; }
.tl__sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; }
.tl__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; border-radius: 6px; margin-top: 7px; display: inline-block; }
.tl__tag.earnings { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.tl__tag.monthly { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tl__tag.milestone { color: var(--accent-warm); background: color-mix(in srgb, var(--accent-warm) 14%, transparent); }
.badge-next { font-size: 9.5px; font-weight: 800; color: var(--accent-warm); letter-spacing: .08em; margin-left: 8px; }

/* news */
.news { display: grid; gap: 11px; }
.newsitem { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 15px; }
.newsitem__date { font-size: 11px; color: var(--text-faint); font-weight: 600; letter-spacing: .03em; }
.newsitem__title { font-size: 14.5px; font-weight: 650; margin: 5px 0 6px; line-height: 1.35; }
.newsitem__text { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.newsitem__why { font-size: 12.5px; margin-top: 8px; padding: 8px 11px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); border-left: 2px solid var(--accent); color: var(--text); line-height: 1.5; }
.newsitem__why b { color: var(--accent); }

/* brain — názory sledovaných lidí.
   Záměrně vypadá JINAK než novinky: citační pruh vlevo, tlumené pozadí,
   šeříková barva místo zelené. Na první pohled musí být jasné,
   že tohle není ověřený fakt. */
.voices__warn {
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
  padding: 9px 12px; border-radius: 9px; margin-bottom: 13px;
  background: color-mix(in srgb, #a78bfa 10%, transparent);
  border-left: 2px solid #a78bfa;
}
.voices__warn b { color: #a78bfa; }
.voices__empty {
  font-size: 13px; color: var(--text-dim); line-height: 1.55;
  background: var(--surface); border: 1px dashed var(--border-hi);
  border-radius: var(--radius-sm); padding: 14px 15px;
}
.voices { display: grid; gap: 11px; }
.voice {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, #a78bfa 65%, var(--border));
  border-radius: var(--radius-sm); padding: 13px 15px;
}
.voice__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.voice__who { font-size: 13px; font-weight: 700; color: #a78bfa; }
.voice__src { font-size: 11px; color: var(--text-faint); }
.voice__date { font-size: 11px; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.voice__kind {
  display: inline-block; margin: 7px 0 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 6px;
  color: var(--text-dim); background: var(--surface-2);
}
.voice__kind.pozice   { color: var(--accent);      background: color-mix(in srgb, var(--accent) 14%, transparent); }
.voice__kind.riziko   { color: #f97066;            background: color-mix(in srgb, #f97066 15%, transparent); }
.voice__kind.predikce { color: var(--accent-warm); background: color-mix(in srgb, var(--accent-warm) 14%, transparent); }
.voice__kind.cislo    { color: var(--accent-2);    background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.voice__claim { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.voice__quote {
  margin: 9px 0 0; padding: 8px 12px; border-radius: 9px;
  background: var(--surface-2); border: 0;
  font-size: 12.5px; font-style: italic; color: var(--text-faint); line-height: 1.5;
}

.updated-note { margin-top: 26px; font-size: 11.5px; color: var(--text-faint); text-align: center; }

.footer { margin-top: 34px; text-align: center; font-size: 11.5px; color: var(--text-faint); }

@media (max-width: 560px) {
  .mw-grid { grid-template-columns: repeat(2,1fr); }
  .topbar__right { width: 100%; justify-content: space-between; }
}