/* =============================================================================
 * Portfolio Suite V2 — styles (dark terminal theme, self-contained)
 * ===========================================================================*/
.psv2-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #0d1117;
  color: #c9d1d9;
  font-family: "Inter", "Sora", system-ui, -apple-system, sans-serif;
  pointer-events: auto;
}
.psv2-root * { box-sizing: border-box; }
.psv2-root .hidden { display: none !important; }
.psv2-panel.hidden { display: none !important; }

/* Header */
.psv2-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; background: #161b22; border-bottom: 1px solid #30363d;
}
.psv2-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12px; letter-spacing: 0.05em; color: #f0f6fc; }
.psv2-logo { font-size: 16px; }
.psv2-version { font-size: 9px; background: #1f6feb; color: #fff; border-radius: 3px; padding: 1px 4px; font-weight: 700; }
.psv2-portsel { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-left: 1px solid #30363d; border-right: 1px solid #30363d; }
.psv2-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.psv2-chip { font-size: 10px; font-weight: 600; color: #8b949e; background: #0d1117; border: 1px solid #30363d; border-radius: 3px; padding: 2px 7px; }
.psv2-chip.ok { color: #3fb950; border-color: #238636; }
.psv2-chip.warn { color: #d29922; border-color: #9e6a03; }
.psv2-chip.err { color: #f85149; border-color: #da3633; }

/* Nav */
.psv2-nav { display: flex; gap: 2px; overflow-x: auto; background: #161b22; border-bottom: 1px solid #30363d; padding: 0 8px; }
.psv2-tab {
  flex: 0 0 auto; border: none; border-bottom: 2px solid transparent; background: transparent;
  color: #8b949e; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0 12px; height: 38px; line-height: 38px; cursor: pointer; white-space: nowrap;
}
.psv2-tab:hover { color: #c9d1d9; }
.psv2-tab.active { color: #58a6ff; border-bottom-color: #3a96ff; }

/* Status bar */
.psv2-statusbar { padding: 5px 12px; font-size: 11px; color: #8b949e; background: #0d1117; border-bottom: 1px solid #21262d; min-height: 26px; }
.psv2-statusbar [data-tone="up"] { color: #3fb950; }
.psv2-statusbar [data-tone="warn"] { color: #d29922; }

/* Content */
.psv2-content { flex: 1; overflow: auto; padding: 14px; min-height: 0; }
.psv2-panel { display: flex; flex-direction: column; gap: 12px; max-width: 1500px; margin: 0 auto; width: 100%; }

/* Panel head */
.psv2-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.psv2-panel-head h2 { margin: 0; font-size: 15px; color: #f0f6fc; }
.psv2-panel-head p { margin: 2px 0 0; font-size: 12px; color: #8b949e; }
.psv2-panel-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Buttons / inputs */
.psv2-btn {
  background: #21262d; border: 1px solid #30363d; color: #c9d1d9; border-radius: 5px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.psv2-btn:hover:not(:disabled) { background: #30363d; border-color: #8b949e; }
.psv2-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.psv2-btn.primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.psv2-btn.primary:hover { background: #388bfd; }
.psv2-btn.danger { border-color: #da3633; color: #f85149; }
.psv2-btn.danger:hover { background: rgba(248,81,73,0.12); }
.psv2-icon { background: transparent; border: 1px solid #30363d; color: #8b949e; border-radius: 4px; cursor: pointer; padding: 2px 7px; font-size: 12px; margin-left: 2px; }
.psv2-icon:hover { color: #c9d1d9; border-color: #8b949e; }
.psv2-input { background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; border-radius: 5px; padding: 6px 8px; font-size: 12px; outline: none; }
.psv2-input:focus { border-color: #1f6feb; }
.psv2-mini { width: 72px; }
.psv2-vs { color: #8b949e; font-size: 11px; font-weight: 700; }

/* Cards */
.psv2-card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 14px; }
.psv2-card h3 { margin: 0 0 10px; font-size: 13px; color: #f0f6fc; }
.psv2-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

/* KPI */
.psv2-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.psv2-kpi { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.psv2-kpi span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #8b949e; }
.psv2-kpi strong { font-size: 20px; color: #f0f6fc; font-weight: 700; }
.psv2-kpi small { font-size: 10px; color: #6e7681; }

/* Metric rows */
.psv2-metric { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #21262d; font-size: 12px; }
.psv2-metric span { color: #8b949e; }
.psv2-metric strong { color: #f0f6fc; }

/* Bars */
.psv2-bar { margin-bottom: 10px; }
.psv2-bar-top { display: flex; justify-content: space-between; font-size: 12px; color: #c9d1d9; margin-bottom: 3px; }
.psv2-bar-track { height: 7px; background: #21262d; border-radius: 4px; overflow: hidden; }
.psv2-bar-track span { display: block; height: 100%; background: linear-gradient(90deg, #1f6feb, #58a6ff); border-radius: 4px; }
.psv2-bar-foot { font-size: 10px; color: #6e7681; margin-top: 2px; }

/* Compact lists */
.psv2-compact { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #21262d; font-size: 12px; }
.psv2-compact span:first-child { color: #c9d1d9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psv2-compact span:last-child { color: #8b949e; white-space: nowrap; }
.psv2-mini-label { font-size: 10px; text-transform: uppercase; color: #6e7681; margin: 8px 0 4px; letter-spacing: 0.05em; }
.psv2-impact { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 5px; margin-bottom: 4px; font-size: 12px; background: #0d1117; border-left: 3px solid #30363d; }
.psv2-impact.pos { border-left-color: #3fb950; }
.psv2-impact.neg { border-left-color: #f85149; }

/* Tables */
.psv2-tablewrap { overflow-x: auto; padding: 0; }
.psv2-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.psv2-table th { position: sticky; top: 0; background: #161b22; color: #8b949e; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; padding: 8px 10px; text-align: left; border-bottom: 1px solid #30363d; }
.psv2-table td { padding: 7px 10px; border-bottom: 1px solid #21262d; color: #c9d1d9; }
.psv2-table tr:hover td { background: #1c2128; }
.psv2-table .r, .psv2-table th.r { text-align: right; }
.pos { color: #3fb950 !important; }
.neg { color: #f85149 !important; }

/* Forms */
.psv2-hform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.psv2-hform-grid label, .psv2-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #8b949e; }
.psv2-hform-grid input, .psv2-hform-grid select, .psv2-field input, .psv2-field select {
  background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; border-radius: 5px; padding: 6px 8px; font-size: 12px; outline: none;
}
.psv2-hform-grid input:focus, .psv2-hform-grid select:focus { border-color: #1f6feb; }
.psv2-hform-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.psv2-inline { display: flex; gap: 6px; align-items: center; }

/* Empty / note / error */
.psv2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 48px 16px; color: #8b949e; }
.psv2-empty-icon { font-size: 40px; }
.psv2-empty h3 { margin: 0; color: #c9d1d9; }
.psv2-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.psv2-note { padding: 8px 12px; border-radius: 6px; background: rgba(210,153,34,0.08); border: 1px solid rgba(210,153,34,0.25); color: #e3b341; font-size: 12px; }
.psv2-error { border-color: #da3633; }
.psv2-error h3 { color: #f85149; }
.psv2-muted { color: #6e7681; font-size: 12px; }
.psv2-warn { font-size: 12px; padding: 6px 8px; border-radius: 5px; margin-bottom: 4px; background: #0d1117; border-left: 3px solid #30363d; }
.psv2-warn.warn { border-left-color: #d29922; color: #e3b341; }
.psv2-warn.info { border-left-color: #1f6feb; color: #79c0ff; }

/* Templates */
.psv2-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.psv2-template { display: flex; flex-direction: column; gap: 3px; text-align: left; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 12px; cursor: pointer; color: #c9d1d9; }
.psv2-template:hover { border-color: #1f6feb; background: #1c2128; }
.psv2-template strong { font-size: 13px; color: #f0f6fc; }
.psv2-template span { font-size: 11px; color: #6e7681; }

/* Library */
.psv2-libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.psv2-libcard { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.psv2-libcard.active { border-left: 3px solid #3a96ff; }
.psv2-libcard h3 { margin: 0; font-size: 13px; color: #f0f6fc; }
.psv2-libcard-meta { font-size: 11px; color: #8b949e; margin-top: 2px; }
.psv2-libcard-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.psv2-badge { font-size: 9px; text-transform: uppercase; background: rgba(58,150,255,0.15); color: #58a6ff; border: 1px solid rgba(58,150,255,0.3); border-radius: 3px; padding: 1px 5px; }

/* Chips (scenario) */
.psv2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.psv2-chips .psv2-chip { display: inline-flex; align-items: center; gap: 4px; color: #c9d1d9; }
.psv2-chip-x { background: transparent; border: none; color: #8b949e; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.psv2-chip-x:hover { color: #f85149; }

@media (max-width: 720px) {
  .psv2-grid2, .psv2-libgrid, .psv2-template-grid { grid-template-columns: 1fr; }
  .psv2-status { width: 100%; margin-left: 0; }
}