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

:root {
  --pbi-bg:       #0d1117;
  --pbi-surface:  #161b22;
  --pbi-surface2: #1f2937;
  --pbi-border:   #30363d;
  --pbi-accent:   #2563eb;
  --pbi-accent-h: #1d4ed8;
  --pbi-text:     #e6edf3;
  --pbi-muted:    #7d8590;
  --pbi-radius:   10px;
  --pbi-font:     'DM Sans', system-ui, sans-serif;
}

.pbi-wrap {
  font-family: var(--pbi-font);
  background: var(--pbi-bg);
  color: var(--pbi-text);
  border-radius: var(--pbi-radius);
  overflow: hidden;
  min-height: 60vh;
}

/* ---- Header ---- */
.pbi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--pbi-surface);
  border-bottom: 1px solid var(--pbi-border);
}

.pbi-greeting {
  font-size: .88rem;
  color: var(--pbi-muted);
}

.pbi-greeting strong {
  color: var(--pbi-text);
  font-weight: 600;
}

.pbi-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--pbi-muted);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}

.pbi-logout:hover {
  background: var(--pbi-surface2);
  color: var(--pbi-text);
}

/* ---- Tabs ---- */
.pbi-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  background: var(--pbi-surface);
  border-bottom: 1px solid var(--pbi-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.pbi-tabs::-webkit-scrollbar { display: none; }

.pbi-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--pbi-muted);
  font-family: var(--pbi-font);
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}

.pbi-tab:hover {
  background: var(--pbi-surface2);
  color: var(--pbi-text);
}

.pbi-tab--active {
  background: rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.3);
  color: #93c5fd;
}

/* ---- Embed area ---- */
.pbi-embed-area {
  background: var(--pbi-bg);
  position: relative;
}

.pbi-frame-wrap {
  display: none;
}

.pbi-frame-wrap--active {
  display: block;
}

.pbi-frame-wrap iframe {
  width: 100%;
  min-height: 560px;
  border: none;
  display: block;
}

/* ---- Login / empty card ---- */
.pbi-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.pbi-card {
  background: var(--pbi-surface);
  border: 1px solid var(--pbi-border);
  border-radius: 14px;
  padding: 44px 52px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}

.pbi-card-icon { margin-bottom: 20px; }

.pbi-card h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--pbi-text);
}

.pbi-card p {
  font-size: .87rem;
  color: var(--pbi-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}

.pbi-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--pbi-text);
}

.pbi-btn {
  display: inline-block;
  padding: 11px 30px;
  background: var(--pbi-accent);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: background .15s, transform .1s;
}

.pbi-btn:hover {
  background: var(--pbi-accent-h);
  color: #fff;
  transform: translateY(-1px);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .pbi-card { padding: 32px 22px; }
  .pbi-header { padding: 12px 14px; }
  .pbi-frame-wrap iframe { min-height: 420px; }
}