/* PromoPilot Rank Tracker — design system (ported from the approved mockup).
   Self-contained: the sub-service renders its own app shell, independent of the
   marketing style.css, so the look matches "PromoPilot Cabinet & Tools.html". */

:root {
  --bg: #0f1420;
  --bg-2: #111827;
  --surface: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.10);
  --panel: rgba(17,24,39,.55);
  --panel-strong: rgba(22,30,46,.82);
  --text: #f3f4f6;
  --text-dim: #cbd5e1;
  --muted: #94a3b8;
  --primary: #60a5fa;
  --primary-2: #3b82f6;
  --accent: #22d3ee;
  --success: #34d399;
  --warning: #f59e0b;
  --danger: #f87171;
  --pink: #ec4899;
  --purple: #a78bfa;
  --border: rgba(148,163,184,.18);
  --border-strong: rgba(148,163,184,.32);
  --radius: 16px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html, body {
  background: #0a0e17;
  color: var(--text);
  font-family: 'Inter','Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* App shell */
.pp-app {
  display: flex;
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(800px 500px at -10% 100%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, #0f1420 0%, #0b1018 100%);
}
.pp-app::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px; opacity: .6;
}
.pp-main { flex: 1; position: relative; z-index: 1; min-width: 0; }
.pp-page { padding: 28px 32px 60px; }

/* Card / panel */
.pp-card {
  background: linear-gradient(160deg, rgba(22,28,42,.85), rgba(15,20,32,.85));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px -24px rgba(0,0,0,.6);
}
.pp-card-soft { background: rgba(17,24,39,.55); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* Buttons */
.pp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: all .15s; line-height: 1; white-space: nowrap; font-family: inherit; }
.pp-btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #0b1220; border-color: rgba(59,130,246,.6); box-shadow: 0 8px 22px -10px rgba(59,130,246,.6); }
.pp-btn-primary:hover { transform: translateY(-1px); }
.pp-btn-ghost { background: rgba(255,255,255,.04); color: var(--text-dim); border-color: var(--border); }
.pp-btn-ghost:hover { background: rgba(255,255,255,.07); border-color: var(--border-strong); color: var(--text); }
.pp-btn-outline { background: transparent; color: var(--primary); border-color: rgba(96,165,250,.4); }
.pp-btn-outline:hover { background: rgba(59,130,246,.1); border-color: var(--primary); }
.pp-btn-cta { background: linear-gradient(135deg, #22d3ee, #3b82f6); color: #04111d; border-color: transparent; box-shadow: 0 10px 26px -10px rgba(34,211,238,.7); }
.pp-btn-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(34,211,238,.85); }

/* Chips / badges */
.pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; }
.pp-chip-new { background: linear-gradient(135deg, #10b981, #059669); color: #04111d; }
.pp-chip-pro { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #1a1106; }
.pp-chip-beta { background: rgba(167,139,250,.15); color: #c4b5fd; border: 1px solid rgba(167,139,250,.3); }
.pp-chip-soft { background: rgba(96,165,250,.12); color: var(--primary); border: 1px solid rgba(96,165,250,.25); }

/* Sidebar */
.pp-sidebar { width: 248px; flex: 0 0 248px; padding: 18px 14px; border-right: 1px solid var(--border); background: rgba(13,19,32,.6); position: relative; z-index: 1; }
.pp-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.pp-sidebar-logo .mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--purple), var(--pink)); display: grid; place-items: center; color: #04111d; font-weight: 800; }
.pp-sidebar-logo .word { font-weight: 800; letter-spacing: -.02em; font-size: 16px; }
.pp-sidebar-logo .word small { display: block; color: var(--muted); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }
.pp-side-section { margin-top: 14px; }
.pp-side-section-title { color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; padding: 0 8px 8px; }
.pp-side-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--text-dim); font-size: 13px; cursor: pointer; }
.pp-side-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
.pp-side-item.active { background: linear-gradient(90deg, rgba(167,139,250,.18), rgba(34,211,238,.06)); color: var(--text); position: relative; }
.pp-side-item.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--purple), var(--accent)); }
.pp-side-item .bi { font-size: 15px; opacity: .9; }
.pp-side-item .pp-badge { margin-left: auto; font-size: 10px; font-weight: 700; background: rgba(96,165,250,.2); color: var(--primary); padding: 2px 7px; border-radius: 6px; }

/* Projects accordion submenu */
.pp-side-toggle { width: 100%; background: none; border: 0; font: inherit; text-align: left; }
.pp-acc-caret { margin-left: auto; font-size: 10px; color: var(--muted); transition: transform .2s; }
.pp-side-group.open .pp-acc-caret { transform: rotate(180deg); }
.pp-side-sub { display: none; margin: 2px 0 4px 12px; padding-left: 10px; border-left: 1px solid var(--border); flex-direction: column; gap: 1px; }
.pp-side-group.open .pp-side-sub { display: flex; }
.pp-side-subitem { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--text-dim); font-size: 12.5px; text-decoration: none; white-space: nowrap; overflow: hidden; }
.pp-side-subitem:hover { background: rgba(255,255,255,.04); color: var(--text); }
.pp-side-subitem.active { background: rgba(167,139,250,.16); color: var(--text); }
.pp-side-subitem .lbl { overflow: hidden; text-overflow: ellipsis; }
.pp-side-subitem .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); flex: 0 0 auto; opacity: .7; }
.pp-side-subitem.add { color: var(--purple); font-weight: 600; }
.pp-side-subitem.add .bi { font-size: 12px; }

/* Topbar */
.pp-topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--border); background: rgba(11,16,26,.7); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }

/* Product switcher */
.pp-product-switcher { display: inline-flex; align-items: center; background: rgba(17,24,39,.7); border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 2px; }
.pp-product-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .15s; white-space: nowrap; }
.pp-product-tab:hover { color: var(--text); }
.pp-product-tab.active { color: var(--text); background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(34,211,238,.18)); box-shadow: inset 0 0 0 1px rgba(96,165,250,.4); }

/* Balance pill */
.pp-balance-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 11px; background: rgba(17,24,39,.7); border: 1px solid var(--border); }
.pp-balance-pill .icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.pp-balance-pill .vlabel { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; line-height: 1; }
.pp-balance-pill .vvalue { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1; margin-top: 3px; }
.pp-balance-pill .plus { width: 24px; height: 24px; border-radius: 7px; background: rgba(59,130,246,.18); color: var(--primary); display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(59,130,246,.3); font-size: 12px; margin-left: 4px; }

/* Inputs */
.pp-input { width: 100%; background: rgba(11,16,26,.6); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 12px 9px 36px; font: inherit; font-size: 13px; outline: none; }
.pp-input:focus { border-color: rgba(96,165,250,.5); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.pp-input-wrap { position: relative; }
.pp-input-wrap .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.pp-textarea { width: 100%; background: rgba(11,16,26,.6); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13px; outline: none; resize: vertical; }
.pp-textarea:focus { border-color: rgba(96,165,250,.5); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.pp-select { background: rgba(11,16,26,.6); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px; outline: none; }

/* Table */
.pp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; background: rgba(255,255,255,.02); }
.pp-table td { padding: 14px; border-bottom: 1px solid rgba(148,163,184,.1); vertical-align: middle; }
.pp-table tbody tr:hover { background: rgba(96,165,250,.04); }
.pp-table tbody tr:last-child td { border-bottom: 0; }

/* Misc */
.pp-muted { color: var(--muted); }
.pp-dim { color: var(--text-dim); }
.pp-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.pp-divider { height: 1px; background: var(--border); margin: 18px 0; }

/* Empty state */
.pp-empty { text-align: center; padding: 56px 24px; }
.pp-empty .ico { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 16px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(236,72,153,.10)); color: var(--purple); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Hamburger (mobile nav toggle) + drawer backdrop — hidden on desktop */
.pp-hamburger { display: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(17,24,39,.7); border: 1px solid var(--border); color: var(--text); place-items: center; cursor: pointer; font-size: 18px; flex: 0 0 auto; }
.pp-nav-backdrop { display: none; }

/* Responsive: sidebar becomes a slide-over drawer; wide tables scroll */
@media (max-width: 900px) {
  .pp-page { padding: 16px 12px 64px; }
  .pp-topbar { padding: 10px 12px; gap: 8px; }
  .pp-hamburger { display: inline-grid; }
  .pp-topbar .pp-search { display: none; }
  .pp-product-switcher { display: none; }                 /* product switch lives in the drawer footer instead */
  .pp-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 84vw; z-index: 70; transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto; background: #0c1322; }
  .pp-app.nav-open .pp-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.6); }
  .pp-nav-backdrop { position: fixed; inset: 0; background: rgba(2,6,15,.55); z-index: 65; }
  .pp-app.nav-open .pp-nav-backdrop { display: block; }
  .pp-card { overflow-x: auto !important; }   /* override inline overflow:hidden so tables scroll */
  .pp-table { min-width: 540px; }
  /* Compact balance pills — keep the value, drop the label text to save width */
  .pp-balance-pill { gap: 6px; padding: 5px 8px 5px 5px; }
  .pp-balance-pill .vlabel { display: none; }
  .pp-balance-pill .plus { margin-left: 2px; }
  /* Responsive dashboard grids (classes added on the dashboard) */
  .rank-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .rank-token-grid { grid-template-columns: 1fr !important; }
}

/* Phone: radical simplifications for one-hand use */
@media (max-width: 640px) {
  .pp-page { padding: 12px 10px 72px; }
  .pp-topbar { gap: 6px; }
  /* The money pill is one tap away in the drawer; keep only the tokens pill up top */
  .pp-topbar .pp-balance-pill.pp-pill-money { display: none; }
  .pp-topbar .pp-user-meta { display: none; }             /* avatar only */
  .pp-card { padding: 14px 14px !important; }
  /* Keyword table: drop secondary columns so the essentials fit without much scrolling.
     Cols: 1 check · 2 Ключ · 3 Группа · 4 Позиция · 5 Частотность · 6 Цель/найдено · 7 Проверено · 8 Действия */
  .pp-table.kw-table { min-width: 0; }
  .pp-table.kw-table th:nth-child(3), .pp-table.kw-table td:nth-child(3),
  .pp-table.kw-table th:nth-child(6), .pp-table.kw-table td:nth-child(6),
  .pp-table.kw-table th:nth-child(7), .pp-table.kw-table td:nth-child(7) { display: none; }
  .pp-table.kw-table th, .pp-table.kw-table td { padding: 9px 7px; }
  .pp-table.kw-table .kw-check span { display: none; }    /* «Проверить» → icon only */
  .pp-table.kw-table .kw-check { padding: 6px 8px !important; }
  /* Projects management table: keep Проект, ключи, ТОП-10, действия — hide the rest */
  .pp-table.proj-table th:nth-child(3), .pp-table.proj-table td:nth-child(3),
  .pp-table.proj-table th:nth-child(5), .pp-table.proj-table td:nth-child(5),
  .pp-table.proj-table th:nth-child(6), .pp-table.proj-table td:nth-child(6) { display: none; }
  /* Bigger tap targets for chips & buttons */
  .pp-chip { padding: 6px 11px; }
  .pp-btn { min-height: 38px; }
}