:root {
  --bg: #0f0f14;
  --panel: #13131f;
  --panel-2: #1a1a28;
  --line: #2a2a40;
  --text: #e8e8f0;
  --muted: #9ca3b0;
  --purple: #7c3aed;
  --green: #10b981;
  --yellow: #f59e0b;
  --radius: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body {
  font-family: "Outfit", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.pdv-fullscreen { height: 100vh; overflow: hidden; }
.pdv-topbar {
  height: 44px; background: var(--panel-2); border-bottom: .5px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px; gap: 10px;
}
.pdv-logo { font-weight: 700; }
.pdv-badge {
  background: rgba(124,58,237,.2); border: .5px solid var(--purple); color: #d7c4ff;
  border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700;
}
.pdv-toggle { display: inline-flex; gap: 6px; }
.pdv-pill {
  border: .5px solid var(--line); background: #171726; color: var(--text);
  border-radius: 999px; padding: 4px 10px; font-size: 11px; cursor: pointer; transition: .15s;
}
.pdv-pill.active, .pdv-pill:hover { border-color: var(--purple); background: #24183e; }

.pdv-grid { height: calc(100vh - 44px); display: grid; grid-template-columns: 220px 1fr 240px; }
.pdv-col { min-width: 0; min-height: 0; border-right: .5px solid var(--line); }
.pdv-col:last-child { border-right: 0; }
.pdv-left, .pdv-right { background: var(--panel); }
.pdv-center { background: var(--bg); }

.pdv-card {
  background: #171726; border: .5px solid var(--line); border-radius: var(--radius); padding: 8px;
}
.pdv-title { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700; margin: 0 0 6px; }

.pdv-scroll-y { overflow-y: auto; overflow-x: hidden; min-height: 0; }
.pdv-btn {
  border: .5px solid var(--line); background: #1f1f2f; color: var(--text); border-radius: 8px;
  padding: 9px 10px; font-weight: 700; cursor: pointer; transition: .15s;
}
.pdv-btn:hover { filter: brightness(1.1); }
.pdv-btn-purple { background: var(--purple); border-color: var(--purple); color: #fff; }
.pdv-btn-green { background: var(--green); border-color: var(--green); color: #062f24; }
.pdv-btn-outline { background: transparent; border-color: #5b6179; color: #d7dcf0; }

.pdv-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; align-items: center; justify-content: center; z-index: 1000;
}
.pdv-modal.open { display: flex; }
.pdv-modal-card { width: min(420px, 92vw); background: #171726; border: .5px solid var(--line); border-radius: 10px; padding: 14px; }

.pdv-simple-page { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.pdv-simple-main { flex: 1; min-height: 0; overflow: auto; padding: 12px; }