/* HUPI AI v21 compact visual system */
:root{
  --nav:#0b0e16;
  --bg:#f4f5f8;
  --line:#e4e6ed;
  --purple:#6548ef;
  --purple2:#8972ff;
}

/* Faceted HUPI diamond mark */
.hupi-mark{
  position:relative;
  display:grid!important;
  place-items:center;
  flex:0 0 auto;
  width:38px!important;
  height:38px!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,#8d78ff 0 45%,#6044e9 46% 100%)!important;
  box-shadow:0 9px 22px #5841df35,inset 0 1px 0 #ffffff52;
  overflow:hidden;
}
.hupi-mark:before,.hupi-mark:after,.hupi-mark i,.hupi-mark b{
  content:"";
  position:absolute;
  display:block;
  transform:rotate(45deg);
}
.hupi-mark:before{
  width:17px;height:17px;
  border:3px solid #fff;
  border-radius:4px;
  box-shadow:0 0 0 1px #ffffff1f;
}
.hupi-mark:after{
  width:7px;height:7px;
  border-radius:2px;
  background:#fff;
}
.hupi-mark i{
  width:20px;height:8px;
  left:-9px;top:3px;
  background:#b8aaff55;
}
.hupi-mark b{
  width:16px;height:7px;
  right:-7px;bottom:2px;
  background:#3e2fb244;
}

/* Compact application shell */
aside{
  width:220px;
  padding:19px 14px 16px;
  box-shadow:8px 0 28px #0a0d1410;
}
.app{margin-left:220px}
.logo{padding:0 9px 20px;gap:10px}
.logo div{font-size:13px;letter-spacing:.025em}
.logo small{font-size:9px;margin-top:3px}
nav{gap:3px}
nav a{
  min-height:42px;
  gap:11px;
  padding:10px 12px;
  border-radius:9px;
  font-size:12px;
}
nav a b{font-size:15px}
.user{padding-top:14px}

.app>header{
  height:72px;
  padding:0 28px;
}
.app>header h1{font-size:18px;margin-top:3px}
.app>header small{font-size:8px}
.icon-btn{width:34px;height:34px;border-radius:9px}
.avatar{width:34px;height:34px}

.content{
  width:100%;
  max-width:1280px;
  padding:22px 28px 42px;
}
.section-title{align-items:flex-end}
.section-title h2{font-size:23px;letter-spacing:-.02em}
.section-title p{font-size:12px;margin:7px 0 0}

/* Compact cards and forms */
.card{
  border-radius:13px;
  padding:18px;
  box-shadow:0 8px 24px #20243a08;
}
.card h3{font-size:14px}
.card p{font-size:11px}
.settings-grid{
  max-width:1080px;
  gap:14px;
  margin-top:16px;
}
.connection-card{padding:19px}
.connection-title{
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:11px;
}
.connection-title>span{
  width:38px;height:38px;
  border-radius:10px;
}
.connection-title h3{font-size:14px}
.connection-title p{font-size:10px;line-height:1.4}
.connection-title b{font-size:8px;padding:5px 8px}
.settings-form{
  gap:11px;
  margin-top:15px;
  padding-top:14px;
}
label{gap:6px;font-size:11px}
input,select,textarea{
  border-radius:9px;
  padding:10px 11px;
  font-size:12px;
}
.primary{
  border-radius:9px;
  padding:11px 16px;
  font-size:11px;
  box-shadow:0 7px 18px #7057ff24;
}
.youtube-summary{
  gap:9px;
  margin-top:13px;
  padding:10px 11px;
  font-size:9px;
}
.youtube-connect{
  margin-top:11px;
  padding:10px 13px;
  font-size:10px;
}
.connection-card.dim{min-height:98px}

/* Global page density */
.hero,.optimizer-hero,.research-hero,.keyword-hero{
  border-radius:16px;
  padding:23px 25px;
}
.hero h2,.optimizer-hero h2,.research-hero h2,.keyword-hero h2{
  font-size:25px;
}
.stats{gap:12px;margin:15px 0}
.stats article{border-radius:12px;padding:15px}
.stats strong{font-size:21px}
.two-col,.content-layout,.analytics-layout,.optimizer-grid,.wallet-grid{
  gap:14px;
}
.brand-list>div,.recommend>div{padding:11px 0}
.keyword-search,.research-search,.explorer-results,.outlier-card,.keyword-card,
.benchmark-card,.seo-review,.optimizer-score,.trend-intelligence{
  margin-top:14px;
}
.keyword-overview,.research-summary{gap:9px;margin-top:14px}
.keyword-overview article,.research-summary article{padding:13px}
.explorer-row,.keyword-row,.benchmark-row,.trend-row{padding:10px 0}

/* V20.5 one-glance dashboard */
.dashboard-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 26px;
  border-radius:16px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 18%,#684fe4 0,transparent 31%),
    linear-gradient(120deg,#141624,#26214e);
  box-shadow:0 14px 38px #29224d1c;
}
.dashboard-hero-copy{min-width:0}
.dashboard-hero h2{
  margin:7px 0 6px;
  font-size:27px;
  line-height:1.15;
  letter-spacing:-.025em;
}
.dashboard-hero p{margin:0;color:#bebdd0;font-size:12px;line-height:1.55}
.dashboard-hero-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.pulse-badge{
  padding:7px 10px;
  border:1px solid #ffffff24;
  border-radius:99px;
  background:#ffffff12;
  color:#d9d7e8;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.pulse-badge.growing{color:#91f1c7;background:#1db3771a;border-color:#5bdfaa30}
.pulse-badge.attention{color:#ffd28b;background:#d28a201b;border-color:#ffc46a2e}
.dashboard-stats{margin:14px 0}
.dashboard-stats article{align-items:center;min-width:0}
.dashboard-stats article>div{min-width:0}
.dashboard-stats strong{line-height:1.1}
.dashboard-insight-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:14px;
}
.dashboard-insight-strip article{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:11px;
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.dashboard-insight-strip article>span{
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:8px;
  background:#eeeaff;
  color:var(--purple);
  font-size:9px;
  font-weight:900;
}
.dashboard-insight-strip small,.section-kicker{
  display:block;
  color:#8b8e9d;
  font-size:7px;
  font-weight:900;
  letter-spacing:.11em;
}
.dashboard-insight-strip strong{display:block;margin:4px 0;font-size:12px}
.dashboard-insight-strip p{margin:0;color:var(--muted);font-size:9px;line-height:1.4}
.dashboard-main-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:14px;
}
.next-actions-card .card-head h3,.brand-overview-card .card-head h3{margin-top:5px}
.action-stack{margin-top:13px}
.action-stack>a{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid #edf0f4;
}
.action-stack>a>b{
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:8px;
  background:#f0edff;
  color:var(--purple);
  font-size:10px;
}
.action-stack>a span{min-width:0}
.action-stack>a strong,.action-stack>a small{display:block}
.action-stack>a strong{font-size:11px}
.action-stack>a small{margin-top:4px;color:var(--muted);font-size:9px;line-height:1.4}
.action-stack>a span>em{
  display:flex;
  flex-wrap:wrap;
  gap:5px 7px;
  margin-top:7px;
  color:#5d6170;
  font-size:8px;
  font-style:normal;
}
.action-stack>a span>em u{
  color:#9699a6;
  font-size:7px;
  font-weight:900;
  letter-spacing:.07em;
  text-decoration:none;
  text-transform:uppercase;
}
.action-stack>a i{font-style:normal;color:var(--purple);font-size:9px;font-weight:800;white-space:nowrap}
.action-stack>a:hover strong{color:var(--purple)}
.action-stack>a.priority-high>b{background:#ffe9e9;color:#bd3434}
.action-stack>a.priority-opportunity>b{background:#e5f7ef;color:#087d51}
.local-engine{
  align-self:flex-start;
  padding:6px 9px;
  border-radius:99px;
  background:#e6f8f0;
  color:#087d51;
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
}
.compact-brand-list{margin-top:10px}
.compact-brand-list>div{
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:9px;
  padding:10px 0;
}
.compact-brand-list>div>span{width:32px;height:32px;border-radius:9px;font-size:11px}
.compact-brand-list em{
  max-width:95px;
  padding:5px 7px;
  border-radius:99px;
  font-size:8px;
  white-space:nowrap;
}
.compact-brand-list em.connected{background:#e7f8f0;color:#078052}
.compact-brand-list em.pending{background:#f3f3f6;color:#9295a2}

/* V20.7 subscriber conversion intelligence */
.conversion-intelligence{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
  margin:14px 0;
}
.conversion-summary .card-head h3{margin-top:5px}
.conversion-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:14px;
}
.conversion-metrics>div{
  padding:12px;
  border:1px solid #ececf2;
  border-radius:10px;
  background:#fafafe;
}
.conversion-metrics small,.conversion-metrics span{display:block}
.conversion-metrics small{color:#9295a4;font-size:7px;font-weight:900;letter-spacing:.07em}
.conversion-metrics strong{display:block;margin:5px 0 3px;font-size:20px}
.conversion-metrics span{color:var(--muted);font-size:8px}
.conversion-takeaway{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  margin-top:10px;
  padding:11px 12px;
  border-radius:10px;
  background:#eeeaff;
}
.conversion-takeaway>b{
  padding:5px 7px;
  border-radius:6px;
  background:#fff;
  color:var(--purple);
  font-size:7px;
  white-space:nowrap;
}
.conversion-takeaway p{margin:0;color:#55596a;font-size:9px;line-height:1.5}
.conversion-takeaway strong{color:#242130}
.conversion-list{margin-top:11px}
.conversion-list>div{
  display:grid;
  grid-template-columns:25px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:10px 0;
  border-top:1px solid #edf0f4;
}
.conversion-list>div>b{
  display:grid;
  place-items:center;
  width:24px;height:24px;
  border-radius:7px;
  background:#eeeaff;
  color:var(--purple);
  font-size:8px;
}
.conversion-list span{min-width:0}
.conversion-list span>strong,.conversion-list span>small{display:block}
.conversion-list span>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.conversion-list span>small{margin-top:3px;color:var(--muted);font-size:8px}
.conversion-list em{color:var(--green);font-size:13px;font-style:normal;font-weight:900;text-align:right}
.conversion-list em small{display:block;color:var(--muted);font-size:7px}

/* V20.8 subscriber retention diagnosis */
.retention-intelligence{margin:14px 0}
.retention-intelligence .card-head h3{margin-top:5px}
.retention-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:10px;
  margin-top:14px;
}
.retention-verdict,.retention-guidance{
  display:grid;
  padding:13px;
  border:1px solid #ececf2;
  border-radius:11px;
  background:#fafafe;
}
.retention-verdict{grid-template-columns:32px 1fr;gap:10px}
.retention-verdict>span{
  display:grid;place-items:center;
  width:31px;height:31px;
  border-radius:9px;
  font-size:13px;font-weight:900;
}
.retention-verdict.risk>span{background:#ffe7e7;color:#bd3434}
.retention-verdict.healthy>span{background:#e4f8ee;color:#087d51}
.retention-verdict small,.retention-guidance>small{color:#9295a4;font-size:7px;font-weight:900;letter-spacing:.08em}
.retention-verdict strong,.retention-verdict p{display:block}
.retention-verdict strong{margin-top:5px;font-size:11px}
.retention-verdict p,.retention-guidance p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.45}
.retention-guidance strong{margin-top:5px;font-size:11px}
.retention-guidance a{justify-self:start;margin-top:8px;color:var(--purple);font-size:9px;font-weight:850}
.retention-table{margin-top:13px;overflow-x:auto}
.retention-row{
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) repeat(5,.45fr);
  gap:10px;
  align-items:center;
  min-width:750px;
  padding:10px 4px;
  border-top:1px solid #edf0f4;
  font-size:9px;
}
.retention-row>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retention-head{color:#9699a6;font-size:7px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.retention-row b.positive{color:#087d51}.retention-row b.negative{color:#bd3434}
.retention-row em{
  justify-self:start;
  padding:5px 7px;
  border-radius:99px;
  font-size:7px;
  font-style:normal;
  font-weight:900;
}
.retention-row em.good{background:#e4f8ee;color:#087d51}
.retention-row em.watch{background:#fff1cf;color:#9a6500}
.retention-row em.bad{background:#ffe7e7;color:#bd3434}
.retention-note{
  margin-top:11px;
  padding:10px 11px;
  border:1px solid #f1dc8e;
  border-radius:9px;
  background:#fff8df;
  color:#705d19;
  font-size:8px;
  line-height:1.45;
}

/* V20.9 analytics UI repair — intentionally lives in the versioned UI file */
.analytics-title{
  align-items:center;
  gap:18px;
}
.analytics-title p{margin:6px 0 0}
.sync-btn{
  flex:0 0 auto;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--purple);
  font-size:10px;
  font-weight:850;
}
.analytics-stats{margin-top:16px}
.analytics-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:14px;
  margin:14px 0;
}
.trend-card,.insight-card{min-height:286px}
.bar-chart{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:215px;
  padding:23px 2px 0;
  overflow:hidden;
}
.bar-col{
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  height:100%;
  min-width:4px;
}
.bar-col i{
  display:block;
  width:100%;
  min-height:4px;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#927eff,#654cf0);
  box-shadow:0 3px 9px #7057ff1f;
}
.bar-col small{
  display:block;
  min-height:10px;
  color:#999dad;
  font-size:7px;
  text-align:center;
}
.signals{margin-top:12px}
.signals>div{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:13px 0;
  border-top:1px solid #edf0f4;
}
.signals>div>b{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:#f0edff;
  color:var(--purple);
  font-size:12px;
}
.signals p{min-width:0;margin:0}
.signals strong,.signals small{display:block}
.signals strong{font-size:10px}
.signals small{
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}
.top-videos{
  margin-top:14px;
  overflow:hidden;
}
.analytics-table{
  width:100%;
  margin-top:13px;
  overflow-x:auto;
}
.table-row{
  display:grid;
  grid-template-columns:30px minmax(320px,1fr) 82px 92px 92px 88px;
  gap:12px;
  align-items:center;
  min-width:790px;
  padding:11px 5px;
  border-top:1px solid #edf0f4;
  font-size:9px;
}
.table-row>strong{
  overflow:hidden;
  color:#242733;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.table-head{
  color:#979aa8;
  font-size:7px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.table-row:not(.table-head)>span:last-child{
  color:#087d51;
  font-weight:850;
}

.brand-switcher{
  margin:0;
}
.brand-switcher label{
  display:grid;
  gap:2px;
  min-width:178px;
}
.brand-switcher label>small{
  color:#9295a5;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
}
.brand-switcher select{
  width:100%;
  padding:8px 30px 8px 11px;
  border:1px solid #e1e4ec;
  border-radius:10px;
  background:#fff;
  color:#222533;
  font-size:11px;
  font-weight:800;
}
.brand-connection-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
  padding:22px 24px;
  border-radius:18px;
  background:linear-gradient(115deg,#17172b,#5942c7);
  color:#fff;
}
.brand-connection-context span{
  color:#a99aff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.brand-connection-context h2{
  margin:5px 0 4px;
  color:#fff;
}
.brand-connection-context p{
  max-width:720px;
  margin:0;
  color:#d9d5f5;
  font-size:11px;
}
.brand-connection-context a{
  flex:0 0 auto;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  color:#fff;
  font-size:10px;
  font-weight:850;
  text-decoration:none;
}
.brand-card>a{
  color:#654cff;
  font-size:10px;
  font-weight:850;
  text-decoration:none;
}

@media(max-width:900px){
  aside{width:74px;padding:16px 10px}
  .app{margin-left:74px}
  .logo{padding:0 8px 19px}
  .logo div{display:none}
  nav a{justify-content:center;font-size:0;padding:11px}
  nav a b{font-size:18px}
  .user>div:not(.avatar),.user>a{display:none}
  .user{grid-template-columns:1fr}
  .content{padding:18px 16px 35px}
  .app>header{padding:0 18px}
  .dashboard-hero{align-items:flex-start;flex-direction:column}
  .dashboard-hero-actions{width:100%;justify-content:space-between}
  .dashboard-insight-strip{grid-template-columns:1fr}
  .dashboard-main-grid{grid-template-columns:1fr}
  .conversion-intelligence{grid-template-columns:1fr}
  .retention-grid{grid-template-columns:1fr}
  .analytics-layout{grid-template-columns:1fr}
  .brand-switcher{display:none}
}

@media(max-width:620px){
  .app>header{height:66px}
  .app>header h1{font-size:16px}
  .content{padding:15px 11px 30px}
  .card{padding:15px}
  .settings-grid{margin-top:13px}
  .section-title h2{font-size:20px}
  .dashboard-hero{padding:20px}
  .dashboard-hero h2{font-size:23px}
  .dashboard-hero-actions{align-items:stretch;flex-direction:column}
  .dashboard-hero-actions .primary{width:100%}
  .action-stack>a{grid-template-columns:28px 1fr}
  .action-stack>a i{grid-column:2}
  .conversion-metrics{grid-template-columns:1fr}
  .conversion-takeaway{grid-template-columns:1fr}
  .analytics-title{align-items:flex-start;flex-direction:column}
  .bar-chart{gap:3px}
  .bar-col:nth-child(even) small{display:none}
  .brand-connection-context{align-items:flex-start;flex-direction:column}
}
.connection-guidance{margin:14px 0;padding:14px 16px;border:1px solid #e7e5f4;border-radius:14px;background:#f8f7ff}
.connection-guidance strong{display:block;margin-bottom:5px;color:#18152f;font-size:14px}
.connection-guidance p{margin:0;color:#69667b;font-size:12px;line-height:1.55}