/* ================================================================
   GroundQA — Interactive Product Tour Styles
   Fonts: DM Sans, Inter, Geist Mono (same as main site)
   Radius: 2px  |  Borders: 0.5-1px  |  Accent: #555
   ================================================================ */

/* ---------- Reset (scoped) ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body.pt-body{
  font-family:'DM Sans','Inter',system-ui,-apple-system,sans-serif;
  font-size:14px;font-weight:400;line-height:1.6;
  color:#000;background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;height:100vh;
}
::selection{background:rgba(0,0,0,0.08);color:#000;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button,input,select,textarea{font:inherit;border:none;outline:none;background:none;}

/* ---------- Back link ---------- */
.pt-topbar__back{
  font-size:12px;font-weight:500;color:#999;
  display:flex;align-items:center;gap:4px;
  transition:color 0.2s;cursor:pointer;
}
.pt-topbar__back:hover{color:#555;}

/* ---------- App Shell ---------- */
.pt-shell{
  display:flex;
  height:100vh;
}

/* ---------- Sidebar ---------- */
.pt-sidebar{
  width:220px;min-width:220px;
  background:#fff;
  border-right:1px solid rgba(0,0,0,0.08);
  display:flex;flex-direction:column;
  padding:20px 0;
  overflow-y:auto;
  transition:opacity 0.4s ease;
}
.pt-sidebar.is-dimmed{opacity:0.3;pointer-events:none;}
.pt-sidebar__logo{
  display:flex;align-items:center;gap:8px;
  padding:0 20px 20px;
}
.pt-sidebar__logo img{height:22px;}

.pt-sidebar__section{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:10px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  color:#999;
  padding:20px 20px 8px;
}
.pt-sidebar__item{
  display:flex;align-items:center;gap:10px;
  padding:8px 20px;
  font-size:13px;font-weight:400;color:#999;
  cursor:default;
  border-left:3px solid transparent;
  transition:all 0.15s ease;
}
.pt-sidebar__item.is-active{
  color:#000;font-weight:600;
  background:rgba(0,0,0,0.03);
  border-left-color:#000;
}
.pt-sidebar__item svg{width:16px;height:16px;flex-shrink:0;}
.pt-sidebar__divider{
  height:1px;background:rgba(0,0,0,0.06);
  margin:12px 20px;
}

/* ---------- Main Content Area ---------- */
.pt-main{
  flex:1;display:flex;flex-direction:column;
  overflow:hidden;
}
.pt-header{
  height:52px;min-height:52px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.08);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;
}
.pt-crumb{
  font-size:13px;color:#999;
  display:flex;align-items:center;gap:6px;
}
.pt-crumb span{color:#000;font-weight:500;}
.pt-header__right{display:flex;align-items:center;gap:12px;}
.pt-header__icon{
  width:32px;height:32px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  color:#999;cursor:default;
}
.pt-header__avatar{
  width:28px;height:28px;border-radius:50%;
  background:#e0e0e0;
}

.pt-content{
  flex:1;overflow-y:auto;
  padding:28px;
  background:#fff;
  background-image:radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size:22px 22px;
}

/* ---------- Screens (one visible at a time) ---------- */
.pt-screen{display:none;}
.pt-screen.is-active{display:block;animation:ptFadeIn 0.3s ease;}
.pt-screen--modal.is-active{animation:none;}
@keyframes ptFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- Page Title ---------- */
.pt-page-title{
  font-family:'Inter','DM Sans',sans-serif;
  font-size:clamp(1.1rem,2vw,1.4rem);font-weight:700;
  letter-spacing:-0.03em;color:#000;
  margin-bottom:4px;
}
.pt-page-subtitle{
  font-size:13px;color:#999;margin-bottom:24px;
}

/* ---------- KPI Cards ---------- */
.pt-kpi-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:12px;
}
.pt-kpi{
  padding:20px;
  background:#fafafa;
  border:0.5px solid rgba(0,0,0,0.06);
  border-radius:12px;
  text-align:left;
}
.pt-kpi--dotted{
  background-color:#fafafa;
  background-image:radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size:16px 16px;
}
.pt-kpi__header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.pt-kpi__icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.pt-kpi__icon--purple{background:rgba(168,85,247,0.1);color:#a855f7;}
.pt-kpi__icon--blue{background:rgba(37,99,235,0.1);color:#2563eb;}
.pt-kpi__icon--green{background:rgba(34,197,94,0.1);color:#22c55e;}
.pt-kpi__icon--orange{background:rgba(249,115,22,0.1);color:#f97316;}
.pt-kpi__icon--teal{background:rgba(6,182,212,0.1);color:#06b6d4;}
.pt-kpi__icon--yellow{background:rgba(234,179,8,0.1);color:#eab308;}
.pt-kpi__icon--pink{background:rgba(236,72,153,0.1);color:#ec4899;}
.pt-kpi__val{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:1.6rem;font-weight:700;
  display:inline;color:#000;
}
.pt-kpi__val-row{
  display:flex;align-items:baseline;gap:8px;
  margin-bottom:4px;
}
.pt-kpi__trend{
  font-size:14px;font-weight:600;
}
.pt-kpi__trend--up{color:#22c55e;}
.pt-kpi__trend--down{color:#dc2626;}
.pt-kpi__trend--flat{color:#999;}
.pt-kpi__sub{
  font-size:12px;color:#999;
  display:block;
}
.pt-kpi__val--green{color:#22c55e;}
.pt-kpi__val--blue{color:#2563eb;}
.pt-kpi__val--yellow{color:#d97706;}
.pt-kpi__val--red{color:#dc2626;}
.pt-kpi__label{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:10px;color:#999;
  text-transform:uppercase;letter-spacing:0.05em;
}

/* ---------- Quick Actions Row ---------- */
.pt-actions-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:16px;
}
.pt-action-card{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:#fff;
  border:0.5px solid rgba(0,0,0,0.06);
  border-radius:12px;
  cursor:default;
  transition:border-color 0.15s;
  background-image:radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size:16px 16px;
}
.pt-action-card:hover{border-color:rgba(0,0,0,0.15);}
.pt-action-card__icon{
  width:36px;height:36px;min-width:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.pt-action-card__name{
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;color:#000;
}
.pt-action-card__desc{font-size:11px;color:#999;}

/* ---------- Dashboard charts side-by-side ---------- */
.pt-dash-charts{
  display:flex;gap:16px;
}
.pt-donut{
  display:flex;align-items:center;justify-content:center;
  padding:16px 0;
}

/* ---------- Cards ---------- */
.pt-card{
  background:#fff;
  border:0.5px solid rgba(0,0,0,0.06);
  border-radius:12px;
  padding:20px;
  margin-bottom:16px;
}
.pt-card--dotted{
  background-color:#fff;
  background-image:radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size:16px 16px;
}
.pt-card__title{
  font-family:'Inter',sans-serif;
  font-size:14px;font-weight:600;
  letter-spacing:-0.01em;color:#000;
  margin-bottom:4px;
}
.pt-card__desc{font-size:12px;color:#999;margin-bottom:12px;}

/* ---------- Chart Mock ---------- */
.pt-chart{
  width:100%;height:180px;
  position:relative;
  overflow:hidden;
}
.pt-chart svg{width:100%;height:100%;}
.pt-chart__legend{
  display:flex;gap:16px;
  margin-top:8px;
}
.pt-chart__legend-item{
  display:flex;align-items:center;gap:6px;
  font-family:'Geist Mono',monospace;font-size:10px;color:#999;
}
.pt-chart__legend-dot{
  width:8px;height:8px;border-radius:50%;
}

/* ---------- Rows / Activity ---------- */
.pt-rows{display:flex;flex-direction:column;}
.pt-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.04);
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:12px;
}
.pt-row:last-child{border-bottom:none;}
.pt-row__name{flex:1;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:#000;}
.pt-row__status{font-weight:600;}
.pt-row__status--pass{color:#22c55e;}
.pt-row__status--warn{color:#d97706;}
.pt-row__status--fail{color:#dc2626;}
.pt-row__status--run{color:#2563eb;}
.pt-row__score{min-width:40px;text-align:right;font-weight:600;}
.pt-row__time{color:#999;min-width:60px;text-align:right;}

/* ---------- Pill / Badge ---------- */
.pt-pill{
  display:inline-block;
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:10px;font-weight:700;
  padding:3px 10px;
  border-radius:100px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  white-space:nowrap;
}
.pt-pill--green{background:rgba(34,197,94,0.1);color:#22c55e;}
.pt-pill--yellow{background:rgba(217,119,6,0.1);color:#d97706;}
.pt-pill--red{background:rgba(220,38,38,0.1);color:#dc2626;}
.pt-pill--blue{background:rgba(37,99,235,0.1);color:#2563eb;}
.pt-pill--purple{background:rgba(168,85,247,0.1);color:#a855f7;}
.pt-pill--gray{background:rgba(0,0,0,0.05);color:#999;}

/* ---------- Buttons (match site) ---------- */
.pt-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;
  font-size:13px;font-weight:600;
  color:#fff;background:#000;
  border:1px solid #000;
  border-radius:2px;
  cursor:pointer;
  transition:all 0.2s ease;
  white-space:nowrap;
}
.pt-btn:hover{background:#222;}
.pt-btn--outline{
  color:#000;background:transparent;
  border:0.5px solid rgba(0,0,0,0.24);
  font-weight:500;
}
.pt-btn--outline:hover{border-color:#555;color:#555;}
.pt-btn--sm{padding:6px 14px;font-size:12px;}

/* ---------- Project / Suite Cards Grid ---------- */
.pt-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:16px;
}
.pt-grid--2{grid-template-columns:repeat(2,1fr);}
.pt-grid-card{
  background:#fff;
  border:0.5px solid rgba(0,0,0,0.06);
  border-radius:2px;
  padding:20px;
  transition:border-color 0.2s;
}
.pt-grid-card:hover{border-color:rgba(0,0,0,0.15);}
.pt-grid-card__name{
  font-family:'Inter',sans-serif;
  font-size:14px;font-weight:600;
  letter-spacing:-0.01em;color:#000;
  margin-bottom:4px;
}
.pt-grid-card__url{
  font-family:'Geist Mono',monospace;
  font-size:11px;color:#999;
  margin-bottom:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pt-grid-card__meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11px;color:#999;
  margin-top:10px;
}
.pt-grid-card__dot{
  width:6px;height:6px;border-radius:50%;
  display:inline-block;
}
.pt-grid-card__dot--green{background:#22c55e;}
.pt-grid-card__dot--yellow{background:#d97706;}
.pt-grid-card__dot--red{background:#dc2626;}

/* ---------- Tabs ---------- */
.pt-tabs{display:flex;gap:0;border-bottom:1px solid rgba(0,0,0,0.08);}
.pt-tab{
  padding:10px 20px;
  font-size:13px;font-weight:500;
  color:#999;cursor:default;
  border-bottom:2px solid transparent;
  transition:all 0.15s;
  display:inline-flex;align-items:center;gap:8px;
}
.pt-tab.is-active{color:#000;border-bottom-color:#000;font-weight:600;}
.pt-tab__badge{
  font-family:'Geist Mono',monospace;
  font-size:10px;font-weight:600;
  background:rgba(37,99,235,0.1);color:#2563eb;
  padding:2px 7px;border-radius:100px;
}

/* ---------- Table ---------- */
.pt-table{width:100%;border-collapse:collapse;}
.pt-table th{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.05em;
  color:#999;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.pt-table td{
  padding:12px 12px;
  font-size:13px;
  border-bottom:1px solid rgba(0,0,0,0.04);
  vertical-align:middle;
}
.pt-table tr:last-child td{border-bottom:none;}
.pt-table__suite{font-weight:500;color:#000;}
.pt-table__sub{font-size:11px;color:#999;display:block;margin-top:2px;}

/* ---------- Progress Bar ---------- */
.pt-progress{
  height:6px;background:rgba(0,0,0,0.06);
  border-radius:3px;overflow:hidden;
  width:120px;display:inline-block;
  vertical-align:middle;
  margin-right:8px;
}
.pt-progress__fill{
  height:100%;border-radius:3px;
  transition:width 0.6s ease;
}
.pt-progress__fill--green{background:#22c55e;}
.pt-progress__fill--blue{background:#2563eb;}
.pt-progress__fill--red{background:#dc2626;}
.pt-progress__fill--striped{
  background:repeating-linear-gradient(
    -45deg,
    #2563eb,#2563eb 6px,
    #3b82f6 6px,#3b82f6 12px
  );
  animation:ptStripe 0.8s linear infinite;
}
@keyframes ptStripe{from{background-position:0 0;}to{background-position:24px 0;}}

/* ---------- Status Icons ---------- */
.pt-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;}
.pt-status__dot{
  width:8px;height:8px;border-radius:50%;
  display:inline-block;
}
.pt-status__dot--green{background:#22c55e;}
.pt-status__dot--blue{background:#2563eb;animation:ptPulse 1.5s ease-in-out infinite;}
.pt-status__dot--red{background:#dc2626;}
.pt-status__dot--yellow{background:#d97706;}
@keyframes ptPulse{0%,100%{opacity:1;}50%{opacity:0.4;}}

.pt-status__spin{
  width:14px;height:14px;
  border:2px solid rgba(37,99,235,0.2);
  border-top-color:#2563eb;
  border-radius:50%;
  animation:ptSpin 0.8s linear infinite;
  display:inline-block;
}
@keyframes ptSpin{to{transform:rotate(360deg);}}

/* ---------- Dialog Overlay ---------- */
.pt-dialog-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.2);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:60px;
  z-index:10;
}
.pt-dialog{
  background:#fff;
  border:0.5px solid rgba(0,0,0,0.1);
  border-radius:2px;
  padding:28px;
  width:420px;
  box-shadow:0 4px 24px rgba(0,0,0,0.12);
}
.pt-dialog__title{
  font-family:'Inter',sans-serif;
  font-size:16px;font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:20px;
}
.pt-dialog__field{margin-bottom:14px;}
.pt-dialog__label{
  font-size:12px;font-weight:500;color:#555;
  margin-bottom:4px;display:block;
}
.pt-dialog__label span{color:#dc2626;}
.pt-dialog__input{
  width:100%;padding:10px 14px;
  border:0.5px solid rgba(0,0,0,0.16);
  border-radius:2px;
  font-size:13px;color:#000;
  background:#fff;
}
.pt-dialog__input::placeholder{color:#bbb;}
.pt-dialog__textarea{
  width:100%;padding:10px 14px;
  border:0.5px solid rgba(0,0,0,0.16);
  border-radius:2px;
  font-size:13px;color:#000;
  background:#fff;
  resize:vertical;min-height:60px;
}
.pt-dialog__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}

/* ---------- Test Profile Selector ---------- */
.pt-profiles{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:16px 0;
}
.pt-profile{
  border:0.5px solid rgba(0,0,0,0.1);
  border-radius:2px;
  padding:14px;
  cursor:default;
  transition:border-color 0.15s;
}
.pt-profile.is-selected{
  border-color:#000;
  background:rgba(0,0,0,0.02);
}
.pt-profile__icon{font-size:18px;margin-bottom:6px;}
.pt-profile__name{
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;
  color:#000;margin-bottom:2px;
}
.pt-profile__desc{font-size:11px;color:#999;}

/* ---------- Distribution Bar ---------- */
.pt-distbar{
  display:flex;height:10px;border-radius:2px;overflow:hidden;
  margin:12px 0 8px;
}
.pt-distbar__seg{height:100%;}
.pt-distbar__seg--green{background:#22c55e;}
.pt-distbar__seg--red{background:#f87171;}
.pt-distbar__seg--yellow{background:#facc15;}
.pt-distbar__seg--purple{background:#a855f7;}

.pt-distbar-legend{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-bottom:8px;
}
.pt-distbar-legend__item{
  display:flex;align-items:center;gap:5px;
  font-family:'Geist Mono',monospace;
  font-size:10px;color:#666;
}
.pt-distbar-legend__dot{
  width:8px;height:8px;border-radius:2px;
}

/* ---------- Mock Data Source Selector ---------- */
.pt-sources{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:12px 0;
}
.pt-source{
  border:0.5px solid rgba(0,0,0,0.1);
  border-radius:2px;padding:14px;
  text-align:center;cursor:default;
}
.pt-source.is-selected{
  border-color:#2563eb;
  background:rgba(37,99,235,0.03);
}
.pt-source__icon{font-size:20px;margin-bottom:4px;}
.pt-source__name{font-size:13px;font-weight:600;color:#000;}
.pt-source__desc{font-size:11px;color:#999;}

/* ---------- Stat Cards (Web App Detail KPIs) ---------- */
.pt-stat-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:16px 18px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.pt-stat-card__header{
  display:flex;align-items:center;justify-content:space-between;
}
.pt-stat-card__label{
  font-size:12px;font-weight:500;color:#6b7280;
  text-transform:uppercase;letter-spacing:0.5px;
}
.pt-stat-card__value{
  font-size:24px;font-weight:700;color:#111827;
  font-family:'Geist Mono',monospace;
  margin-top:4px;
}
.pt-stat-card__sub{
  font-size:11px;color:#9ca3af;margin-top:2px;
}

/* ---------- Dependency Graph Mock ---------- */
.pt-graph{
  border:0.5px solid rgba(0,0,0,0.08);
  border-radius:2px;
  background:#fafafa;
  padding:0;
  overflow:hidden;
}
.pt-graph__toolbar{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:#fff;
}
.pt-graph__search{
  padding:6px 12px;
  border:0.5px solid rgba(0,0,0,0.12);
  border-radius:2px;
  font-size:12px;color:#000;
  width:200px;background:#fff;
}
.pt-graph__search::placeholder{color:#bbb;}
.pt-graph__counter{
  font-family:'Geist Mono',monospace;
  font-size:11px;color:#999;
}
.pt-graph__canvas{
  padding:32px;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Graph Nodes */
.pt-node{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.1);
  border-radius:4px;
  padding:8px 14px;
  font-family:'Geist Mono',monospace;
  font-size:11px;
  white-space:nowrap;
  position:relative;
}
.pt-node__method{
  font-size:10px;font-weight:700;
  padding:2px 6px;
  border-radius:3px;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.pt-node__method--get{background:rgba(34,197,94,0.12);color:#22c55e;border:1px solid rgba(34,197,94,0.2);}
.pt-node__method--post{background:rgba(59,130,246,0.12);color:#3b82f6;border:1px solid rgba(59,130,246,0.2);}
.pt-node__method--put{background:rgba(234,179,8,0.12);color:#eab308;border:1px solid rgba(234,179,8,0.2);}
.pt-node__method--delete{background:rgba(239,68,68,0.12);color:#ef4444;border:1px solid rgba(239,68,68,0.2);}

/* Graph Edges (SVG lines with labels) */
.pt-graph svg line{stroke-width:1.5;}
.pt-graph svg text{
  font-family:'Geist Mono',monospace;
  font-size:9px;font-weight:500;
  fill:#999;
}

.pt-graph__stats{
  display:flex;gap:16px;
  padding:10px 16px;
  border-top:1px solid rgba(0,0,0,0.06);
  background:#fff;
  font-family:'Geist Mono',monospace;
  font-size:11px;color:#999;
}

/* ---------- Modal overlay (for dialogs over list pages) ---------- */
.pt-modal-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.25);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  z-index:800;
  overflow-y:auto;
  opacity:0;
  animation:ptModalIn 0.35s ease forwards;
}
@keyframes ptModalIn{from{opacity:0;}to{opacity:1;}}
.pt-modal{
  background:#fff;
  border:0.5px solid rgba(0,0,0,0.1);
  border-radius:12px;
  padding:28px;
  width:100%;max-width:640px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
  transform:translateY(10px);
  animation:ptModalSlide 0.35s ease forwards;
}
@keyframes ptModalSlide{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.pt-screen--modal{
  position:relative;
  min-height:calc(100vh - 100px);
}
.pt-screen--modal > div:first-child{
  /* dimmed background — keep it full height to prevent layout shift */
  min-height:calc(100vh - 150px);
}

/* ---------- Report Preview ---------- */
.pt-report{
  background:#fff;
  border:0.5px solid rgba(0,0,0,0.1);
  border-radius:2px;
  max-width:680px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.pt-report__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.pt-report__title{
  font-family:'Inter',sans-serif;
  font-size:15px;font-weight:700;
  letter-spacing:-0.02em;
}
.pt-report__date{font-size:12px;color:#999;}
.pt-report__body{padding:24px;}
.pt-report__summary{
  background:#fafafa;
  border-left:3px solid #22c55e;
  border-radius:0 2px 2px 0;
  padding:16px 20px;
  margin-bottom:20px;
}
.pt-report__summary p{font-size:13px;line-height:1.7;color:#333;}
.pt-report__summary strong{font-weight:600;color:#000;}

.pt-report__finding{
  border:0.5px solid rgba(220,38,38,0.15);
  background:rgba(220,38,38,0.02);
  border-radius:2px;
  padding:14px 18px;
  margin-bottom:16px;
}
.pt-report__badges{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-top:16px;
}

/* ---------- CTA (Step 10) ---------- */
.pt-cta{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  min-height:calc(100vh - 148px);
  padding:40px 24px;
}
.pt-cta__heading{
  font-family:'Inter','DM Sans',sans-serif;
  font-size:clamp(1.6rem,3.5vw,2.2rem);
  font-weight:700;
  letter-spacing:-0.03em;
  color:#000;
  margin-bottom:12px;
}
.pt-cta__sub{
  font-size:16px;color:#666;
  line-height:1.6;
  max-width:480px;
  margin-bottom:28px;
}
.pt-cta__features{
  display:flex;gap:16px;flex-wrap:wrap;
  justify-content:center;
  margin-bottom:32px;
}
.pt-cta__feat{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.04em;
  color:#555;
  display:flex;align-items:center;gap:6px;
}
.pt-cta__feat svg{width:14px;height:14px;color:#22c55e;}

.pt-cta__form{
  display:flex;
  border:0.5px solid rgba(0,0,0,0.24);
  border-radius:2px;
  overflow:hidden;
  max-width:420px;width:100%;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.pt-cta__form:focus-within{border-color:#555;box-shadow:0 0 0 3px rgba(0,0,0,0.06);}
.pt-cta__input{
  flex:1;padding:14px 18px;
  font-size:14px;color:#000;background:#fff;
}
.pt-cta__input::placeholder{color:#999;}
.pt-cta__submit{
  padding:14px 24px;
  font-size:13px;font-weight:600;
  color:#fff;background:#000;
  cursor:pointer;white-space:nowrap;
  transition:background 0.2s;
}
.pt-cta__submit:hover{background:#222;}
.pt-cta__note{
  font-size:12px;color:#999;
  margin-top:16px;
}
.pt-cta__success{
  font-size:15px;font-weight:600;
  color:#22c55e;
  display:flex;align-items:center;gap:8px;
}

/* ---------- Email Gate ---------- */
.pt-gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,10,0.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pt-gate.is-hidden{ display:none; }
.pt-gate__card{
  background:#fff;border-radius:12px;padding:48px 40px;
  max-width:420px;width:90%;text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,0.18);
  animation:gateIn 0.4s ease both;
}
@keyframes gateIn{
  from{opacity:0;transform:translateY(20px) scale(0.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.pt-gate__logo{ display:block; margin:0 auto 24px; }
.pt-gate__title{
  font-family:'DM Sans','Inter',system-ui,sans-serif;
  font-size:22px;font-weight:700;color:#0a0a0a;
  margin-bottom:8px;letter-spacing:-0.02em;
}
.pt-gate__desc{
  font-size:14px;color:#666;margin-bottom:24px;line-height:1.5;
}
.pt-gate__form{
  display:flex;gap:8px;margin-bottom:12px;
}
.pt-gate__input{
  flex:1;padding:12px 16px;
  font-size:14px;font-family:inherit;
  border:1.5px solid #ddd;border-radius:6px;
  outline:none;transition:border-color 0.2s;
}
.pt-gate__input:focus{ border-color:#0a0a0a; }
.pt-gate__btn{
  padding:12px 24px;
  font-size:13px;font-weight:600;font-family:inherit;
  color:#fff;background:#0a0a0a;
  border:none;border-radius:6px;cursor:pointer;
  white-space:nowrap;transition:background 0.2s;
}
.pt-gate__btn:hover{ background:#222; }
.pt-gate__btn:disabled{ opacity:0.6;cursor:not-allowed; }
.pt-gate__status{
  font-size:12px;min-height:18px;margin-bottom:4px;
  display:none;
}
.pt-gate__note{
  font-size:11px;color:#aaa;letter-spacing:0.01em;
}

/* ---------- Tour Overlay (disabled) ---------- */
.pt-overlay{display:none;}

/* ---------- Tour Tooltip ---------- */
.pt-tip{
  position:fixed;z-index:1000;
  max-width:400px;
  background:rgba(255,255,255,0.25);
  backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:2px;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
  padding:24px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.25s ease-out, transform 0.25s ease-out;
  pointer-events:none;
}
.pt-tip.is-visible{
  opacity:1;transform:none;
  pointer-events:auto;
}
.pt-tip__close{
  position:absolute;top:12px;right:14px;
  font-size:18px;color:#999;
  cursor:pointer;
  line-height:1;padding:4px;
  transition:color 0.15s;
}
.pt-tip__close:hover{color:#555;}
.pt-tip__title{
  font-family:'Inter','DM Sans',sans-serif;
  font-size:15px;font-weight:600;
  color:#000;letter-spacing:-0.01em;
  margin-bottom:8px;
  padding-right:24px;
}
.pt-tip__desc{
  font-family:'DM Sans','Inter',sans-serif;
  font-size:13.5px;font-weight:400;
  color:#555;line-height:1.65;
}
.pt-tip__foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:20px;
  border-top:1px solid rgba(0,0,0,0.06);
  padding-top:16px;
}
.pt-tip__back{
  display:inline-flex;align-items:center;
  padding:8px 18px;
  font-size:12px;font-weight:500;
  color:#000;
  border:0.5px solid rgba(0,0,0,0.24);
  border-radius:2px;
  cursor:pointer;
  transition:all 0.15s;
}
.pt-tip__back:hover{border-color:#555;color:#555;}
.pt-tip__skip{
  font-size:12px;color:#999;
  cursor:pointer;
  transition:color 0.15s;
}
.pt-tip__skip:hover{color:#555;}
.pt-tip__counter{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:11px;font-weight:500;
  color:#999;
}
.pt-tip__next{
  display:inline-flex;align-items:center;gap:4px;
  padding:8px 20px;
  font-size:12px;font-weight:600;
  color:#fff;background:#000;
  border:1px solid #000;
  border-radius:2px;
  cursor:pointer;
  transition:background 0.15s;
}
.pt-tip__next:hover{background:#222;}

/* Tooltip arrow — uses ::before for border, ::after for fill */
.pt-tip__arrow{display:none;}

.pt-tip[data-pos="bottom"]::before,
.pt-tip[data-pos="bottom"]::after,
.pt-tip[data-pos="top"]::before,
.pt-tip[data-pos="top"]::after,
.pt-tip[data-pos="bottom-start"]::before,
.pt-tip[data-pos="bottom-start"]::after{
  content:'';position:absolute;width:0;height:0;pointer-events:none;
}
/* Bottom: arrow points up */
.pt-tip[data-pos="bottom"]::before{top:-9px;left:30px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid rgba(0,0,0,0.1);}
.pt-tip[data-pos="bottom"]::after{top:-8px;left:30px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid rgba(255,255,255,0.82);}
.pt-tip[data-pos="bottom-start"]::before{top:-9px;left:30px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid rgba(0,0,0,0.1);}
.pt-tip[data-pos="bottom-start"]::after{top:-8px;left:30px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid rgba(255,255,255,0.82);}
/* Top: arrow points down */
.pt-tip[data-pos="top"]::before{bottom:-9px;left:30px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid rgba(0,0,0,0.1);}
.pt-tip[data-pos="top"]::after{bottom:-8px;left:30px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid rgba(255,255,255,0.82);}
/* Fixed-br: no arrow */
.pt-tip[data-pos="fixed-br"]::before,.pt-tip[data-pos="fixed-br"]::after{display:none;}

/* ---------- Checkbox mock ---------- */
.pt-checkbox{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:#333;
  margin-bottom:6px;
}
.pt-checkbox__box{
  width:16px;height:16px;border-radius:2px;
  border:1px solid rgba(0,0,0,0.2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.pt-checkbox__box.is-checked{background:#000;border-color:#000;}
.pt-checkbox__box.is-checked::after{content:'✓';color:#fff;font-size:10px;font-weight:700;}

/* ---------- Select mock ---------- */
.pt-select{
  padding:8px 30px 8px 12px;
  border:0.5px solid rgba(0,0,0,0.16);
  border-radius:2px;
  font-size:13px;color:#000;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance:none;
  cursor:default;
}

/* ---------- Mono helper ---------- */
.pt-mono{font-family:'Geist Mono','Fragment Mono',monospace;}
.pt-muted{color:#999;}
.pt-small{font-size:11px;}
.pt-estimate{
  font-family:'Geist Mono',monospace;
  font-size:12px;color:#666;
  margin-top:8px;
  padding:8px 12px;
  background:#fafafa;
  border-radius:2px;
}
.pt-note{
  font-size:11px;color:#999;
  margin-top:6px;
  font-style:italic;
}

/* ---------- Helper layout ---------- */
.pt-flex{display:flex;}
.pt-flex--between{justify-content:space-between;}
.pt-flex--center{align-items:center;}
.pt-flex--gap8{gap:8px;}
.pt-flex--gap16{gap:16px;}
.pt-flex--wrap{flex-wrap:wrap;}
.pt-mb8{margin-bottom:8px;}
.pt-mb16{margin-bottom:16px;}
.pt-mb24{margin-bottom:24px;}
.pt-mt16{margin-top:16px;}

/* ---------- Responsive ---------- */
@media(max-width:1023px){
  .pt-sidebar{width:56px;min-width:56px;padding:12px 0;}
  .pt-sidebar__section{display:none;}
  .pt-sidebar__item span{display:none;}
  .pt-sidebar__item{padding:10px 0;justify-content:center;}
  .pt-sidebar__logo span{display:none;}
  .pt-sidebar__logo{padding:0 0 16px;justify-content:center;}
  .pt-sidebar__divider{margin:12px 8px;}
  .pt-kpi-row{grid-template-columns:repeat(2,1fr);}
  .pt-grid{grid-template-columns:repeat(2,1fr);}
}
/* ── Shared mobile/tablet layout (both orientations) ── */
@media(max-width:900px){
  .pt-sidebar{display:none;}

  /* Grids: collapse to 2 cols max */
  .pt-kpi-row{grid-template-columns:repeat(2,1fr);}
  .pt-actions-row{grid-template-columns:repeat(2,1fr);}
  .pt-grid{grid-template-columns:1fr;}
  .pt-grid--2{grid-template-columns:1fr;}
  .pt-profiles{grid-template-columns:1fr;}
  .pt-sources{grid-template-columns:1fr;}

  /* Action cards: constrain text */
  .pt-action-card{min-width:0;}
  .pt-action-card__name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pt-action-card__desc{display:none;}

  /* KPI: smaller text */
  .pt-kpi{padding:12px;}
  .pt-kpi__val{font-size:1.2rem;}
  .pt-kpi__sub{font-size:10px;}

  /* Tables: override inline overflow:hidden on card wrapper, enable horizontal scroll */
  .pt-card--dotted{overflow-x:auto !important;overflow-y:visible !important;}
  .pt-table{font-size:11px;min-width:480px;}
  .pt-table th,.pt-table td{padding:8px 6px;white-space:nowrap;}

  /* Charts */
  .pt-chart{height:120px;}

  /* Dashboard charts: stack vertically instead of side-by-side */
  .pt-dash-charts{flex-direction:column;gap:12px;}

  /* Fixed-width select: let it shrink to fit */
  .pt-select{max-width:100% !important;}

  /* Dialog: cap width to viewport, stack side-by-side fields vertically */
  .pt-dialog{width:auto;max-width:calc(100vw - 40px);padding:20px;}
  .pt-flex.pt-flex--gap16:has(.pt-dialog__field){flex-wrap:wrap;gap:10px;}

  /* Header padding */
  .pt-header{padding:0 14px;}
  .pt-content{padding:16px;}

  /* Misc */
  .pt-section-header{flex-wrap:wrap;gap:8px;}
  .pt-page-header{flex-wrap:wrap;gap:8px;}
  .pt-page-header h1{font-size:1.1rem;}
  .pt-page-header p{font-size:12px;}

  /* Header flex rows with space-between: allow wrapping so buttons don't collide with title */
  .pt-flex.pt-flex--between{flex-wrap:wrap;gap:8px;}

  /* Page titles: smaller on mobile */
  .pt-page-title{font-size:1rem;}
  .pt-page-subtitle{font-size:12px;}

}

/* ================================================================
   COMPACT BOTTOM BAR — mobile + tablet, both orientations (≤1280px)
   Desktop/laptop (>1280px) uses the full floating tooltip with
   description and step counter positioned by JS.
   ================================================================ */
@media(max-width:1280px){
  /* Position: fixed to bottom edge, full width */
  .pt-tip{
    position:fixed !important;
    bottom:0 !important;left:0 !important;right:0 !important;top:auto !important;
    max-width:100% !important;width:100%;
    box-shadow:0 -4px 32px rgba(0,0,0,0.13);
    transform:none !important;
    /* Compact bar shape */
    border-radius:0;
    padding:0 52px 0 16px;
    height:64px;
    display:flex !important;
    flex-direction:row;
    align-items:center;
    gap:10px;
    transition:height 0.2s ease,padding 0.2s ease;
  }
  .pt-tip::before{display:none;}
  .pt-tip__arrow{display:none;}
  .pt-tip__close{top:50%;right:14px;transform:translateY(-50%);}

  /* Title: bold, no wrap, stays at natural width */
  .pt-tip__title{
    flex-shrink:0;
    font-size:13px;font-weight:700;
    margin:0;white-space:nowrap;
  }
  /* Separator dot */
  .pt-tip__title::after{
    content:'·';
    margin:0 6px;
    font-weight:400;color:#bbb;
  }
  /* Description: 1 truncated line, takes remaining space */
  .pt-tip__desc{
    display:block !important;
    flex:1;min-width:0;
    font-size:12px;color:#666;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    margin:0;cursor:pointer;
  }
  /* Footer: → circle button only */
  .pt-tip__foot{flex-shrink:0;display:flex;align-items:center;border-top:none;margin:0;padding:0;}
  .pt-tip__skip,.pt-tip__back,.pt-tip__counter{display:none;}
  .pt-tip__next{
    width:36px;height:36px;border-radius:50%;
    padding:0;font-size:0;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .pt-tip__next::after{content:'→';font-size:16px;}

  /* Content bottom padding so bar doesn't overlap last element */
  .pt-content{padding-bottom:72px;}

  /* Landscape lock: not needed — portrait works at all sizes here */
  .pt-landscape-lock{display:none !important;}

  /* ── Tap/click to expand: show full title + description ── */
  .pt-tip.is-expanded{
    height:auto !important;
    padding:14px 52px 14px 16px !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    gap:4px !important;
    background:rgba(255,255,255,0.97) !important;
  }
  .pt-tip.is-expanded .pt-tip__title{
    flex:0 0 100%;
    white-space:normal !important;overflow:visible !important;
    font-size:14px;cursor:pointer;
  }
  .pt-tip.is-expanded .pt-tip__title::after{display:none !important;}
  .pt-tip.is-expanded .pt-tip__desc{
    flex:0 0 100%;
    white-space:normal !important;overflow:visible !important;
    display:block !important;
    font-size:13px !important;line-height:1.5;color:#444;cursor:pointer;
  }
  .pt-tip.is-expanded .pt-tip__foot{flex:0 0 100%;justify-content:flex-end;margin-top:8px;}
  .pt-tip.is-expanded .pt-tip__next{width:auto;height:auto;border-radius:6px;padding:8px 20px;font-size:13px !important;}
  .pt-tip.is-expanded .pt-tip__next::after{content:none;}
  .pt-tip:not(.is-expanded) .pt-tip__title{cursor:pointer;}
}

/* ── Landscape lock overlay for product tour ── */
.pt-landscape-lock{
  display:none;
  position:fixed;inset:0;z-index:9999;
  background:rgba(10,10,10,0.96);
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:14px;color:#fff;padding:32px;
}
.pt-landscape-lock svg{opacity:0.8;animation:ptRotatePulse 2.2s ease-in-out infinite;}
@keyframes ptRotatePulse{
  0%,100%{transform:rotate(0deg);opacity:0.5;}
  35%{transform:rotate(90deg);opacity:1;}
  65%{transform:rotate(90deg);opacity:1;}
}
.pt-landscape-lock strong{display:block;font-size:17px;font-weight:600;color:#fff;margin-bottom:4px;font-family:'Inter',system-ui,sans-serif;}
.pt-landscape-lock p{font-size:14px;color:rgba(255,255,255,0.65);line-height:1.6;max-width:280px;}
/* portrait landscape-lock disabled — portrait is now fully supported */

/* ================================================================
   COOKIE CONSENT BAR
   ================================================================ */
.cookie-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:9998;
  background:#0a0a0a;color:#ccc;
  padding:16px 24px;
  transform:translateY(100%);
  animation:cookieSlideUp 0.4s 1s ease both;
  border-top:1px solid rgba(255,255,255,0.08);
}
.cookie-bar.is-hidden{ display:none; }
@keyframes cookieSlideUp{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}
.cookie-bar__inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.cookie-bar__text{
  font-size:13px;line-height:1.5;flex:1;
  font-family:'DM Sans','Inter',system-ui,sans-serif;
}
.cookie-bar__link{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.cookie-bar__actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-bar__btn{
  padding:10px 22px;font-size:13px;font-weight:600;
  font-family:'DM Sans','Inter',system-ui,sans-serif;
  border-radius:4px;cursor:pointer;border:none;transition:all 0.2s;
}
.cookie-bar__btn--accept{background:#fff;color:#0a0a0a;}
.cookie-bar__btn--accept:hover{background:#e0e0e0;}
.cookie-bar__btn--reject{background:transparent;color:#999;border:1px solid rgba(255,255,255,0.15);}
.cookie-bar__btn--reject:hover{color:#fff;border-color:rgba(255,255,255,0.3);}
@media(max-width:640px){
  .cookie-bar__inner{flex-direction:column;text-align:center;gap:14px;}
  .cookie-bar__actions{width:100%;justify-content:center;}
}
