/* ===========================
   FONTS
=========================== */
@font-face{
  font-family:'ibm_logoregular';
  src:url('/static/fonts/ibm-logo-webfont.woff2') format('woff2'),
      url('/static/fonts/ibm-logo-webfont.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}
@font-face{
  font-family:'classic_console_neueregular';
  src:url('/static/fonts/clacon2-webfont.woff2') format('woff2'),
      url('/static/fonts/clacon2-webfont.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}

/* ===========================
   SCROLLBAR
=========================== */
*{ --sb-track-color:#000; --sb-thumb-color:#7a7a7a; --sb-size:9px; box-sizing:border-box; }
*::-webkit-scrollbar{ width:var(--sb-size) }
*::-webkit-scrollbar-track{ background:var(--sb-track-color); }
*::-webkit-scrollbar-thumb{ background:var(--sb-thumb-color); }
@supports not selector(::-webkit-scrollbar){
  *{ scrollbar-color:var(--sb-thumb-color) var(--sb-track-color); }
}

/* ===========================
   THEME (minimal colors)
=========================== */
:root{
  --bg:#000;
  --line:#3a3a3a;
  --text:#dcdcdc;
  --accent:#dcdcdc;
  --white:#fff;

  /* only three semantic colors */
  --ok:#33ff99;     /* success verdict */
  --err:#ff5252;    /* failed verdict */
  --skip:#ffd54f;   /* tweet skipped */

  --shadow:rgba(0,0,0,.35);
}

/* ===========================
   BASE
=========================== */
html,body{ height:100%; }
html{ background:var(--bg); }
body{
  margin:0; color:var(--accent);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-family:'classic_console_neueregular', monospace;
  font-size:14px;
  line-height:1.35;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 2px, transparent 3px, transparent 4px);
  mix-blend-mode:soft-light;
}
body::after{ content:""; position:fixed; inset:0; pointer-events:none; box-shadow:inset 0 0 80px rgba(0,0,0,.75); }

/* ===========================
   TOPBAR
=========================== */
.topbar{
  position:fixed; bottom:0; left:0; right:0; height:40px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; z-index:50; background:var(--white); color:var(--bg);
}
.topbar a{ color:var(--bg); text-decoration:none; border-bottom:1px dotted transparent; }
.topbar a:hover{color: var(--bg); text-decoration: underline;}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-text{ letter-spacing:.06em; color:var(--bg); font-weight:700; font-size:14px; }
.social{ display:flex; align-items:center; gap:12px; }

/* ===========================
   LAYOUT
=========================== */
.wrap{
  position:relative; padding:10px 10px 80px 10px; min-height:60vh;
  display:grid; grid-template-columns:2fr 1fr; gap:15px;
}
@media (max-width:960px){ .wrap{ grid-template-columns:1fr; } }

.panel{
  background:#000; border:5px solid var(--white); border-radius:0;
  padding:25px 15px 15px 15px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), inset 0 10px 28px rgba(0,0,0,.35);
  position:relative; height: 60vh;}
.panel-title{
  margin:0 0 0px 0; font-size:16px; color:var(--text); letter-spacing:.08em;
  position:absolute; top:-18px; left:10px; background:var(--bg); padding:3px 10px;
}

/* ===========================
   STATS
=========================== */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:10px; }
.stat{
  background:var(--bg); border:5px solid var(--white); padding:10px; border-radius:0;
  box-shadow:inset 0 0 18px rgba(0,0,0,.25); position: relative;}
.stat .label{ color:var(--white);background-color: var(--bg); font-size:16px; letter-spacing:.08em; padding:3px 10px; position: absolute;top: -14px;}
.stat .value{ color:var(--accent); font-size:22px; font-weight:800; text-shadow:0 0 4px rgba(119,255,154,.35); padding: 5px 10px 0px;}
@media (max-width:960px){ .stats{ grid-template-columns:1fr; } }

/* ===========================
   LOGO
=========================== */
.logo-box{flex-direction:column; margin-bottom:60px;  display:flex; justify-content:center; align-items:center; }
.logo{margin-bottom:0; font-family:'ibm_logoregular', monospace; font-size:100px; color:var(--text); }

/* ===========================
   TERMINAL
=========================== */
.terminal{
  height:100%;
  min-height:320px; overflow-y:auto; background:#000;
  padding:0px;
}

/* --- jeden tweet = jedna session --- */
.session{
  padding:12px 0 16px;
  border-top:1px dashed var(--line);
}
.session:first-child{ border-top:none; }

.session-header{
  display:grid; grid-template-columns:1fr auto; gap:8px;
  align-items:start; margin-bottom:6px;
}
.session-head-right{ display:flex; align-items:flex-start; gap:8px; }

.tweet-thumb{
  width:56px; height:56px; object-fit:cover;
  border:1px dashed var(--line); background:#000;
}
.tweet-thumb.hidden{ display:none; }

.session-body{}

/* --- řádek uvnitř session --- */
.log-row{
  position:relative; white-space:pre-wrap; padding:2px 0;
  color:var(--text);
}

/* kurzor jen na posledním řádku */
.log-row.with-cursor::after{
  content:' '; display:inline-block; width:.55ch; height:1.05em; vertical-align:-0.2em;
  background:currentColor; animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.1} }

/* ===========================
   SEMANTICS (strict minimal)
=========================== */
.result-ok{ color:var(--ok)!important; font-weight:700; }
.result-bad, .err{ color:var(--err)!important; font-weight:700; }
.skip, .warn{ color:var(--skip)!important; font-weight:700; }
.ok{ color:var(--text)!important; }

/* progres v základní barvě */
.progress-line{ color:var(--text); letter-spacing:.04em; font-variant-ligatures:none; }

/* jemná záře posledního řádku */
.log-row:last-child{ text-shadow:0 0 6px rgba(220,220,220,.18); }

/* ===========================
   OLD-SCHOOL BANNERS
   (pro logové oddělovače ve stylu:
   "# ======================")
=========================== */
.banner{
  color:var(--text);
  display:block;
  margin:6px 0 4px;
  white-space:pre;
  letter-spacing:.02em;
  opacity:.95;
}
.banner .hash{ color:#9aa0a6; }
.banner .line{ color:#7c7c7c; }
.banner .title{ color:#cfcfcf; font-weight:700; }

/* ===========================
   INLINE RESULT (kompaktní jeden řádek)
   příklad struktury:
   <div class="log-row result-line">
     <span class="badge ok">OK</span>
     <span class="kv">Score 6/10</span>
     <span class="kv">RoyalKitsch</span>
     <span class="kv">RKCH</span>
     <span class="kv dim">When British ...</span>
   </div>
=========================== */
.result-line{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.badge{
  display:inline-block; padding:1px 6px; border:1px solid currentColor;
  text-transform:uppercase; font-weight:700; letter-spacing:.06em;
}
.badge.ok{ color:var(--ok); }
.badge.fail{ color:var(--err); }
.badge.skip{ color:var(--skip); }

.kv{ display:inline-block; }
.kv::before{ content:"·"; margin:0 8px; color:#777; }
.kv:first-child::before{ content:""; margin:0; }
.dim{ opacity:.8; }

.tweet-text{ color:var(--text); opacity:.9; }

/* ===========================
   TOKENS LIST
=========================== */
.tokens{ display:flex; flex-direction:column-reverse; gap:10px; overflow-y: auto;height: 100%;}
.token{
  padding:0px; border-radius:0;
  color:var(--text); font-size:13px; line-height:1.35;
  background:#000;margin-bottom: 20px;
}
.token .title{ color:var(--accent); font-weight:800; text-shadow:0 0 4px rgba(119,255,154,.25); }
.status{ font-size:12px; opacity:.85; margin-left:6px; }
.token-row{ display:grid; grid-template-columns:56px 1fr; gap:10px; align-items:start; }
.token-thumb img{ width:56px; height:56px; object-fit:cover; border:1px dashed var(--line); background:#000; }
.token-body .sub{ color:var(--text); opacity:.8; font-size:12px; margin:2px 0 6px; }

/* ===========================
   LINKS
=========================== */
a{ color:var(--accent); text-decoration:none; border-bottom:1px dotted rgba(220,220,220,.65); }
a:hover{ color:#ffffff; border-bottom-color:#ffffff; }

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width:960px){
  .terminal{ height:50vh; }
}