@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* sidebar (světlý) */
  --sb-bg:      #f7f7fb;
  --sb-surface: #ffffff;
  --sb-surface2:#eeeef6;
  --sb-border:  #e0e0ee;
  --sb-border2: #c4c4e0;
  --sb-text:    #1a1a2e;
  --sb-text2:   #44446a;
  --sb-text3:   #8888aa;
  --sb-accent:  #5b5bd6;

  /* globální tmavé */
  --page-bg:  #0d0e14;
  --col-bg:   #13141d;
  --card-bg:  #191b28;
  --card-bg2: #1d2032;
  --border:   #252840;
  --border2:  #2c3050;
  --text:     #c8d0f0;
  --text2:    #8b93bc;
  --text3:    #525878;
  --accent:   #6366f1;
  --accent2:  #a5b4fc;
  --green:    #4ade80;
  --green-bg: #18312a;
  --green-bd: #2a5040;
  --red:      #f87171;
  --red-bg:   #321818;
  --yellow:   #fbbf24;
  --yel-bg:   #2e2510;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;
  --r: 10px;
}

html, body {
  height: 100%; font-family: var(--sans);
  background: var(--page-bg); color: var(--text);
  font-size: 13px; line-height: 1.5;
  overflow: hidden; display: flex; flex-direction: column;
}

/* topbar */
.topbar {
  background: var(--col-bg); border-bottom: 1px solid var(--border);
  height: 48px; flex-shrink: 0;
  display: flex; align-items: center; padding: 0 16px; gap: 8px;
}
.tbar-logo {
  width: 30px; height: 30px; border-radius: 8px; background: var(--sb-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0;
}
.tbar-title { font-size: 15px; font-weight: 600; color: var(--text); }
.tbar-tabs { display: flex; margin-left: 24px; }
.ttab {
  padding: 14px 16px; font-size: 13px; color: var(--text3); cursor: pointer;
  border: none; border-bottom: 2px solid transparent;
  background: none; font-family: var(--sans); white-space: nowrap;
}
.ttab:hover { color: var(--text2); }
.ttab.active { color: var(--accent2); border-bottom-color: var(--accent); }
.ttab .badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 10px; font-weight: 600; margin-left: 6px;
}
.tbar-right { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.tbtn {
  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border2);
  background: transparent; color: var(--text2); font-size: 12px;
  font-family: var(--sans); cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.tbtn:hover { background: var(--card-bg); color: var(--text); }
.tbtn svg { width: 13px; height: 13px; }
.tbtn-icon { width: 30px; height: 30px; padding: 0; }

/* třísloupcový grid */
.layout {
  flex: 1; display: grid;
  grid-template-columns: 400px 1fr 310px;
  gap: 20px; padding: 20px;
  overflow: hidden; background: var(--page-bg);
}