/*
  Crevyro professional UI layer
  Visual-only overrides. No application behavior, selectors used by JavaScript,
  routes, API calls, authentication, billing, or automation logic are changed.
*/

:root{
  --ui-bg:#f5f7fb;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8f9fc;
  --ui-surface-tint:#f3f0ff;
  --ui-text:#101828;
  --ui-text-strong:#0b1220;
  --ui-muted:#667085;
  --ui-muted-strong:#475467;
  --ui-line:#e4e7ec;
  --ui-line-strong:#d0d5dd;
  --ui-primary:#6c4cff;
  --ui-primary-dark:#5335df;
  --ui-primary-soft:#f0ecff;
  --ui-success:#087a55;
  --ui-success-soft:#e9f9f1;
  --ui-warning:#9a5b13;
  --ui-warning-soft:#fff4df;
  --ui-danger:#b4233b;
  --ui-danger-soft:#fff0f2;
  --ui-shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --ui-shadow-sm:0 8px 24px rgba(16,24,40,.06);
  --ui-shadow-md:0 18px 50px rgba(16,24,40,.08);
  --ui-radius-sm:12px;
  --ui-radius-md:18px;
  --ui-radius-lg:24px;
  --ui-radius-xl:30px;
}

html{background:var(--ui-bg)}
body{
  color:var(--ui-text);
  background:var(--ui-bg);
  font-family:"Rooftop",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:450;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4,.brand-lockup strong,.price strong,.subscription-price strong,.stat-card strong{
  font-family:"Rooftop",system-ui,sans-serif;
  color:var(--ui-text-strong);
  letter-spacing:-.04em;
}
p,.muted{color:var(--ui-muted)}
small{line-height:1.45}
.eyebrow{
  color:#6d5bd0;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.13em;
}

/* Accessible controls */
.button,.mini-button,.icon-button,.text-button,.nav-item,.quick-template,.profile-copy-button{
  transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.button{
  min-height:46px;
  border-radius:13px;
  padding-inline:18px;
  font-weight:750;
  letter-spacing:-.015em;
}
.button.primary{
  background:linear-gradient(180deg,#765bff 0%,var(--ui-primary) 100%);
  box-shadow:0 8px 20px rgba(108,76,255,.22),inset 0 1px 0 rgba(255,255,255,.25);
}
.button.primary:hover{background:linear-gradient(180deg,#6848f7 0%,var(--ui-primary-dark) 100%);box-shadow:0 12px 26px rgba(108,76,255,.28)}
.button.secondary{color:#344054;background:#f2f4f7;border:1px solid #eaecf0}
.button.secondary:hover{color:#1d2939;background:#e9edf3;border-color:#dfe3e8}
.button.danger-outline{color:var(--ui-danger);border-color:#f0b8c3;background:#fff}
.button.danger-outline:hover{background:var(--ui-danger-soft);border-color:#e89baa}
.icon-button{border-color:var(--ui-line);border-radius:12px;color:#344054;box-shadow:var(--ui-shadow-xs)}
.text-button{color:#5b3ee4;font-weight:750}
:focus-visible{outline:3px solid rgba(108,76,255,.24)!important;outline-offset:2px}

/* Marketing site: stronger typography and cleaner product hierarchy */
.marketing-site{background:#fff;color:var(--ui-text)}
.marketing-header{
  border:1px solid rgba(208,213,221,.8);
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 34px rgba(16,24,40,.07);
}
.marketing-brand .brand-copy small{color:#667085;font-weight:650}
.hero-copy h1{
  max-width:830px;
  color:#0a0f1b;
  font-size:clamp(3.4rem,6.5vw,6.8rem);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.07em;
}
.hero-copy>p{max-width:700px;color:#475467;font-size:1.08rem;line-height:1.7}
.hero-badge{border-color:#dfd7ff;color:#5039bf;background:#f5f2ff;font-weight:750}
.hero-trust span{color:#475467;font-weight:650}
.hero-product{filter:saturate(.95)}
.product-window{border-color:#dfe3ea;box-shadow:0 32px 90px rgba(16,24,40,.16)}
.product-heading strong{color:#101828}
.creator-proof>div,.about-grid article,.marketing-card,.workflow-list article{
  border-color:#e4e7ec;
  box-shadow:0 12px 34px rgba(16,24,40,.055);
}
.creator-proof strong,.about-grid h3,.marketing-card h3,.workflow-list h3{color:#101828}
.creator-proof small,.about-grid p,.marketing-card p,.workflow-list p{color:#667085}
.marketing-card.featured,.marketing-card:nth-child(5){color:#fff}
.marketing-card.featured h3,.marketing-card:nth-child(5) h3{color:#fff}
.marketing-card.featured p,.marketing-card:nth-child(5) p{color:rgba(255,255,255,.78)}
.section-heading h2,.pricing-copy h2,.marketing-cta h2{color:#0b1220;font-weight:800}
.pricing-section{border:1px solid #e7e0ff;background:linear-gradient(135deg,#f4f1ff 0%,#fff7fb 58%,#f7fbff 100%)}
.pricing-card{background:#101828;box-shadow:0 32px 80px rgba(16,24,40,.22)}
.pricing-card .price strong{color:#fff}
.pricing-card .price span,.pricing-card>p,.pricing-card li{color:rgba(255,255,255,.82)}
.marketing-footer p,.marketing-footer a{color:#667085}

/* Dashboard shell */
#app-view{
  --sidebar:278px;
  min-height:100vh;
  color:var(--ui-text);
  background:
    radial-gradient(circle at 92% 0%,rgba(108,76,255,.055),transparent 28rem),
    var(--ui-bg);
}
#app-view .sidebar{
  inset:14px auto 14px 14px;
  width:264px;
  height:calc(100dvh - 28px);
  padding:18px 12px 12px;
  border:1px solid rgba(208,213,221,.9);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 20px 55px rgba(16,24,40,.08);
  backdrop-filter:blur(20px);
}
#app-view .sidebar-head{padding:4px 10px 16px;border-bottom:1px solid #eef0f3}
#app-view .brand-lockup{gap:10px}
#app-view .brand-lockup strong{font-size:1.05rem;font-weight:800;color:#101828}
#app-view .brand-copy small{color:#667085;font-size:.55rem;font-weight:700;letter-spacing:.13em}
#app-view .nav-list{
  gap:3px;
  padding:11px 2px 18px;
  scrollbar-width:thin;
  scrollbar-color:#b9c0cb #f1f3f6;
}
#app-view .nav-list::-webkit-scrollbar{width:7px}
#app-view .nav-list::-webkit-scrollbar-track{border-radius:999px;background:#f1f3f6}
#app-view .nav-list::-webkit-scrollbar-thumb{border:2px solid #f1f3f6;border-radius:999px;background:#aeb6c2}
#app-view .nav-section-label{
  padding:15px 11px 6px;
  color:#667085;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.13em;
}
#app-view .nav-item{
  min-height:43px;
  gap:11px;
  border-radius:12px;
  padding:0 11px;
  color:#344054;
  font-size:.84rem;
  font-weight:680;
}
#app-view .nav-item:hover{color:#101828;background:#f2f4f7}
#app-view .nav-item.active{
  color:#fff;
  background:linear-gradient(180deg,#241d35 0%,#14111c 100%);
  box-shadow:0 8px 18px rgba(16,24,40,.16),inset 0 1px 0 rgba(255,255,255,.12);
}
#app-view .nav-item.active .nav-icon{color:#c9bbff}
#app-view .nav-icon{color:#6956c9;font-weight:800}
#app-view .nav-badge{background:#6c4cff;font-weight:800}
#app-view .subscription-nav{border-top-color:#eaecf0}
#app-view .sidebar-foot{padding-top:10px;border-top-color:#eaecf0;background:#fff}
#app-view .ig-mini-card{border-color:#e4e7ec;border-radius:14px;background:#f9fafb}
#app-view .ig-mini-card strong{color:#101828;font-weight:750}
#app-view .ig-mini-card small{color:#667085;font-weight:600}
#app-view .sidebar-foot .nav-item.danger{color:#a5273c;background:#fff5f6}

#app-view .workspace{margin-left:292px}
#app-view .topbar{
  min-height:86px;
  padding:15px 34px 13px;
  border-bottom:1px solid rgba(228,231,236,.82);
  background:rgba(245,247,251,.88);
  backdrop-filter:blur(18px);
}
#app-view .topbar h1{color:#101828;font-size:1.48rem;font-weight:800;letter-spacing:-.045em}
#app-view .topbar .eyebrow{color:#667085;font-size:.64rem}
#app-view .plan-status-button{border-color:#ddd6fe;color:#5237d1;background:#f1edff;font-weight:750}
#app-view .user-chip{border-color:#e4e7ec;box-shadow:0 7px 20px rgba(16,24,40,.05)}
#app-view .user-chip strong{color:#101828;font-weight:750}
#app-view .user-chip small{color:#667085}
#app-view .page-container{max-width:1500px;margin:0 auto;padding:26px 34px 64px}
#app-view .page{color:var(--ui-text)}
#app-view .page-actions{align-items:center;margin-bottom:20px}
#app-view .page-actions h2{margin-bottom:6px;color:#101828;font-size:2rem;font-weight:800;letter-spacing:-.055em}
#app-view .page-actions p{max-width:720px;color:#667085;font-size:.92rem;line-height:1.55}
#app-view .panel{
  border:1px solid #e4e7ec;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 34px rgba(16,24,40,.045);
}
#app-view .panel-head{padding:20px 22px;border-bottom-color:#eaecf0}
#app-view .panel-head h2,#app-view .panel-head h3{color:#101828;font-weight:750;letter-spacing:-.035em}
#app-view .panel-head .muted{color:#667085}

/* Overview */
#app-view .welcome-banner{
  min-height:248px;
  align-items:center;
  padding:38px;
  border:1px solid rgba(108,76,255,.12);
  border-radius:28px;
  color:#101828;
  background:
    radial-gradient(circle at 83% 18%,rgba(255,255,255,.75),transparent 17%),
    linear-gradient(115deg,#dfffb1 0%,#f0ecff 47%,#ffddea 100%);
  box-shadow:0 20px 48px rgba(78,62,112,.1);
}
#app-view .welcome-banner h2{color:#0b1220;font-size:clamp(2.1rem,4vw,3.7rem);font-weight:800;line-height:1;letter-spacing:-.065em}
#app-view .welcome-banner p{max-width:600px;color:#475467;font-size:.94rem}
#app-view .banner-label{color:#5b3fd5;font-weight:800}
#app-view .stat-grid{gap:14px}
#app-view .stat-card{
  min-height:132px;
  align-items:flex-start;
  gap:16px;
  padding:20px;
  border-color:#e4e7ec;
  border-radius:20px;
  background:#fff;
  box-shadow:0 9px 27px rgba(16,24,40,.045);
}
#app-view .stat-card:nth-child(2){background:#fff8ef}
#app-view .stat-card:nth-child(3){background:#f5f2ff}
#app-view .stat-card:nth-child(4){background:#f1fae7}
#app-view .stat-icon{width:44px;height:44px;border-radius:13px;color:#5b3fd5;background:#ece8ff}
#app-view .stat-card small{color:#667085;font-size:.76rem;font-weight:650}
#app-view .stat-card strong{margin-top:7px;color:#101828;font-size:2rem;font-weight:800}
#app-view .overview-grid{gap:16px}
#app-view .quick-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px}
#app-view .quick-template{
  min-height:112px;
  align-items:flex-start;
  border-color:#e4e7ec;
  border-radius:16px;
  padding:16px;
  background:#fff;
}
#app-view .quick-template:hover{border-color:#b9abff;background:#f8f6ff;box-shadow:0 9px 24px rgba(108,76,255,.08);transform:translateY(-1px)}
#app-view .quick-template>span{width:42px;height:42px;flex:0 0 auto;border-radius:13px;background:#eeebff}
#app-view .quick-template strong{color:#101828;font-size:.86rem;font-weight:750}
#app-view .quick-template small{color:#667085;font-size:.73rem;line-height:1.5}

/* Filters and data controls */
#app-view .filter-row{
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:10px;
  border:1px solid #e4e7ec;
  border-radius:16px;
  background:#fff;
  box-shadow:var(--ui-shadow-xs);
}
#app-view .search-field{
  min-height:48px;
  border-color:#e4e7ec;
  border-radius:12px;
  color:#667085;
  background:#f9fafb;
}
#app-view .search-field input{color:#101828;font-weight:550}
#app-view .search-field input::placeholder{color:#98a2b3;opacity:1}
#app-view .filter-row select{
  height:48px;
  border-color:#e4e7ec;
  border-radius:12px;
  color:#344054;
  background:#fff;
  font-weight:650;
}
#app-view .field>span{color:#344054;font-weight:700}
#app-view .field>span small,#app-view .field small{color:#667085}
#app-view .field input,#app-view .field select,#app-view .field textarea,#app-view .reply-box textarea{
  border-color:#dfe3e8;
  color:#101828;
  background:#fff;
}
#app-view input::placeholder,#app-view textarea::placeholder{color:#98a2b3;opacity:1}

/* Automations: consistent structure and visual priority */
#page-automations .automation-list{gap:12px}
#page-automations .automation-card{
  position:relative;
  grid-template-columns:54px minmax(0,1fr) auto;
  gap:16px;
  min-height:132px;
  padding:18px;
  border:1px solid #e4e7ec;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 26px rgba(16,24,40,.045);
}
#page-automations .automation-card::before{
  content:"";
  position:absolute;
  inset:14px auto 14px 0;
  width:3px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(#8a71ff,#6c4cff);
}
#page-automations .automation-card:hover{border-color:#cfc6ff;box-shadow:0 14px 34px rgba(45,35,84,.08);transform:translateY(-1px)}
#page-automations .automation-symbol{
  width:52px;height:52px;
  border:1px solid #e1dbff;
  border-radius:16px;
  color:#5b3fd5;
  background:linear-gradient(145deg,#f6f3ff,#e9e3ff);
  font-size:1.2rem;
}
#page-automations .automation-main h3{margin:1px 0 6px;color:#101828;font-size:1rem;font-weight:780}
#page-automations .automation-main p{max-width:760px;color:#667085;font-size:.79rem;line-height:1.5}
#page-automations .automation-meta{gap:6px;margin-top:11px}
#page-automations .meta-pill,#page-automations .status-pill{
  min-height:27px;
  padding-inline:9px;
  border:1px solid #eaecf0;
  color:#475467;
  background:#f8f9fb;
  font-size:.66rem;
  font-weight:700;
}
#page-automations .status-pill.live{border-color:#bdebd8;color:#087a55;background:#eafaf2}
#page-automations .status-pill.paused{border-color:#f3d3a1;color:#915612;background:#fff6e7}
#page-automations .automation-actions{align-self:center;display:grid;grid-template-columns:repeat(3,auto);gap:7px}
#page-automations .mini-button{
  min-height:38px;
  border-color:#dfe3e8;
  border-radius:11px;
  padding-inline:12px;
  color:#344054;
  background:#fff;
  font-size:.7rem;
  font-weight:750;
}
#page-automations .mini-button:hover{border-color:#b8aaff;color:#5135d2;background:#f8f6ff}
#page-automations .mini-button.primary-lite{border-color:#ddd5ff;color:#5639d8;background:#f0ecff}
#page-automations .empty-state{
  min-height:360px;
  border:1px dashed #d7dbe2;
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#fafbfc);
}
#page-automations .empty-state h3{color:#101828;font-size:1.08rem;font-weight:750}
#page-automations .empty-state p{color:#667085;font-size:.83rem}

/* Inbox and activity */
#app-view .inbox-shell{border-radius:22px;background:#fff;box-shadow:0 14px 40px rgba(16,24,40,.06)}
#app-view .conversation-pane{border-right-color:#e4e7ec}
#app-view .conversation-head{border-bottom-color:#eaecf0}
#app-view .conversation-head h2{color:#101828;font-weight:800}
#app-view .conversation-head p{color:#667085}
#app-view .conversation-item{border-bottom-color:#eef0f3}
#app-view .conversation-item:hover{background:#f8f9fb}
#app-view .conversation-item.active{background:#f0ecff}
#app-view .conversation-copy strong{color:#101828;font-weight:700}
#app-view .conversation-copy span,#app-view .conversation-time{color:#667085}
#app-view .chat-pane{background:#f8f9fc}
#app-view .chat-head{border-bottom-color:#e4e7ec}
#app-view .message-bubble{color:#344054;box-shadow:0 3px 12px rgba(16,24,40,.06)}
#app-view .message-row.outbound .message-bubble{background:#6243e6}
#app-view .activity-table{scrollbar-width:thin;scrollbar-color:#aeb6c2 #f1f3f6}
#app-view .activity-table::-webkit-scrollbar{height:9px;width:9px}
#app-view .activity-table::-webkit-scrollbar-track{background:#f1f3f6}
#app-view .activity-table::-webkit-scrollbar-thumb{border:2px solid #f1f3f6;border-radius:999px;background:#aeb6c2}
#app-view .log-row,#app-view .notification-row,#app-view .billing-row,#app-view .usage-row,#app-view .incident-row,#app-view .dead-letter-row,#app-view .activity-item{border-color:#eaecf0}
#app-view .log-row.header{color:#475467;background:#f8f9fb;font-weight:800}
#app-view .log-message,#app-view .notification-row p,#app-view .billing-row p,#app-view .usage-row p{color:#344054}
#app-view .log-time,#app-view .notification-row small,#app-view .billing-row small,#app-view .usage-row small{color:#667085}

/* Profile, setup and account */
#app-view .profile-layout{gap:16px}
#app-view .profile-identity-card{border:1px solid #ddd6fe;background:linear-gradient(135deg,#fff 0%,#f7f5ff 100%)}
#app-view .profile-avatar{box-shadow:0 12px 30px rgba(108,76,255,.2)}
#app-view .profile-identity-copy h2{color:#101828;font-weight:800}
#app-view .profile-detail-grid{gap:10px}
#app-view .profile-detail{
  min-height:82px;
  padding:14px;
  border-color:#e4e7ec;
  border-radius:14px;
  background:#f9fafb;
}
#app-view .profile-detail>span{color:#667085;font-size:.63rem;font-weight:800}
#app-view .profile-detail strong{color:#1d2939;font-size:.77rem;font-weight:680}
#app-view .profile-copy-button{border-color:#d0d5dd;color:#475467;background:#fff}
#app-view .profile-help-text{color:#667085}
#app-view .setup-disconnected h3{color:#101828;font-weight:750}
#app-view .setup-disconnected p,#app-view .checklist p{color:#667085}
#app-view .checklist strong{color:#1d2939;font-weight:720}
#app-view .danger-zone{border-color:#f2c2cb;background:linear-gradient(180deg,#fff,#fff7f8)}

/* Subscription: high-contrast, light premium card */
#page-subscription .subscription-layout{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:18px}
#page-subscription .subscription-summary-card{
  position:relative;
  overflow:hidden;
  padding:0 28px 28px;
  border:1px solid #d9d1ff;
  border-radius:26px;
  color:#101828;
  background:
    radial-gradient(circle at 100% 0%,rgba(108,76,255,.17),transparent 280px),
    linear-gradient(145deg,#ffffff 0%,#f8f6ff 58%,#f3efff 100%);
  box-shadow:0 20px 55px rgba(73,55,142,.11);
}
#page-subscription .subscription-summary-card::after{
  content:"";
  position:absolute;
  right:-90px;
  top:-115px;
  width:270px;
  height:270px;
  border:38px solid rgba(108,76,255,.075);
  border-radius:50%;
  pointer-events:none;
}
#page-subscription .subscription-summary-card>.panel-head{
  position:relative;
  z-index:1;
  margin:0 -28px;
  padding:24px 28px 19px;
  border-bottom:1px solid rgba(108,76,255,.13);
  background:rgba(255,255,255,.54);
}
#page-subscription .subscription-summary-card .panel-head h2{color:#101828;font-size:1.28rem;font-weight:800}
#page-subscription .subscription-summary-card .eyebrow{color:#5c43cc}
#page-subscription .subscription-price{
  position:relative;
  z-index:1;
  align-items:baseline;
  gap:12px;
  margin:30px 0 10px;
}
#page-subscription .subscription-price strong{
  color:#101828!important;
  font-size:clamp(3.6rem,7vw,5.2rem);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.075em;
  text-shadow:none;
}
#page-subscription .subscription-price span{padding-bottom:0;color:#475467!important;font-size:.94rem;font-weight:650}
#page-subscription #billing-description{position:relative;z-index:1;color:#475467!important;font-size:.93rem;line-height:1.6}
#page-subscription .subscription-coupon-box{
  position:relative;
  z-index:1;
  border-color:#ddd6fe;
  border-radius:17px;
  background:rgba(255,255,255,.82);
  box-shadow:0 7px 22px rgba(45,35,84,.055);
}
#page-subscription .coupon-entry-head strong{color:#1d2939;font-weight:750}
#page-subscription .coupon-entry-row input{border-color:#d0d5dd;color:#101828;background:#fff}
#page-subscription .coupon-preview{border-color:#ddd6fe;background:#f8f6ff}
#page-subscription .billing-benefits{
  position:relative;
  z-index:1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  margin:24px 0;
  padding:18px;
  border:1px solid rgba(208,213,221,.85);
  border-radius:17px;
  background:rgba(255,255,255,.74);
}
#page-subscription .billing-benefits li{min-height:38px;padding-left:27px;color:#344054!important;font-size:.81rem;font-weight:600;line-height:1.45}
#page-subscription .billing-benefits li::before{
  top:1px;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#087a55;
  background:#dff7ec;
  font-size:.67rem;
}
#page-subscription .billing-actions{position:relative;z-index:1;justify-content:flex-start;padding:0;margin-top:4px}
#page-subscription .billing-period{position:relative;z-index:1;color:#667085!important}
#page-subscription .billing-security-card{padding:0;border-radius:22px}
#page-subscription .billing-security-card .checklist{padding:8px 22px 20px}
#page-subscription .table-panel{border-radius:22px}

/* Usage: numbers and labels remain readable */
#page-usage .stat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
#page-usage .stat-card{min-width:0}
#page-usage .stat-card small{color:#475467;font-weight:700}
#page-usage .stat-card strong{color:#101828;font-variant-numeric:tabular-nums}
#page-usage .usage-limit-meter{height:8px;background:#e9edf3}

/* Dialogs and builder */
#app-view .dialog-card{border:1px solid #e4e7ec;box-shadow:0 30px 90px rgba(16,24,40,.22)}
#app-view .dialog-head,#app-view .dialog-foot{border-color:#e4e7ec;background:#fff}
#app-view .dialog-head h2{color:#101828;font-weight:800}
#app-view .builder-body{background:#f8f9fb}
#app-view .builder-section,#app-view .toggle-card,#app-view .radio-card,#app-view .trigger-option{border-color:#e4e7ec;background:#fff}
#app-view .toggle-card strong,#app-view .radio-card strong,#app-view .trigger-option strong{color:#1d2939}
#app-view .toggle-card small,#app-view .radio-card small,#app-view .trigger-option small{color:#667085}
#app-view .flow-preview{border-left-color:#e4e7ec;background:#f3f5f8}
#app-view .preview-device{border-color:#d0d5dd;box-shadow:0 18px 45px rgba(16,24,40,.1)}
#app-view .instagram-media-library{background:#f8f9fb}
#app-view .media-library-head,#app-view .media-library-foot{border-color:#e4e7ec;background:#fff}
#app-view .instagram-media-card{border-color:#e4e7ec;background:#fff;box-shadow:0 6px 18px rgba(16,24,40,.045)}
#app-view .instagram-media-card.selected{border-color:#7f68ed;box-shadow:0 0 0 3px rgba(108,76,255,.12)}
#app-view .instagram-media-copy strong{color:#1d2939}
#app-view .instagram-media-copy small{color:#667085}

/* High contrast status/secondary text throughout */
#app-view .status-pill{font-weight:750}
#app-view .status-pill.neutral{color:#475467;background:#f2f4f7}
#app-view .status-pill.success,#app-view .status-pill.live{color:#087a55;background:#e8f8f0}
#app-view .status-pill.paused{color:#8a5110;background:#fff3df}
#app-view .empty-state h3{color:#101828;font-weight:750}
#app-view .empty-state p{color:#667085}
#app-view .empty-icon{color:#5b3fd5;background:#eeeaff}

/* Responsive dashboard */
@media(max-width:1200px){
  #page-usage .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #page-subscription .subscription-layout{grid-template-columns:1fr}
}

@media(max-width:900px){
  #app-view{--sidebar:0px}
  #app-view .sidebar{
    inset:0 auto 0 0;
    width:min(326px,89vw);
    height:100dvh;
    padding:17px 12px max(12px,env(safe-area-inset-bottom));
    border-width:0 1px 0 0;
    border-radius:0 22px 22px 0;
    box-shadow:24px 0 70px rgba(16,24,40,.2);
  }
  #app-view .workspace{margin-left:0}
  #app-view .topbar{min-height:76px;padding:11px 16px}
  #app-view .page-container{padding:18px 16px 48px}
  #app-view .page-actions{align-items:flex-start}
  #app-view .page-actions h2{font-size:1.72rem}
  #app-view .quick-template-grid{grid-template-columns:1fr}
  #page-usage .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:720px){
  #app-view .topbar-title h1{font-size:1.28rem}
  #app-view .mobile-website-button{border-color:#d0d5dd;color:#344054;box-shadow:var(--ui-shadow-xs)}
  #app-view .page-actions{gap:15px;margin-bottom:16px}
  #app-view .page-actions>div:first-child{width:100%}
  #app-view .page-actions p{font-size:.84rem}
  #app-view .page-actions .button-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0}
  #app-view .panel{border-radius:19px}
  #app-view .panel-head{padding:18px}
  #app-view .welcome-banner{min-height:290px;padding:26px}
  #app-view .welcome-banner h2{font-size:2.35rem}
  #app-view .stat-grid{grid-template-columns:1fr}
  #app-view .stat-card{min-height:104px;align-items:center}
  #app-view .filter-row{align-items:stretch;flex-direction:column;padding:9px}
  #app-view .filter-row .search-field,#app-view .filter-row select{max-width:none;width:100%}

  #page-automations .automation-card{
    grid-template-columns:48px minmax(0,1fr);
    gap:13px;
    min-height:0;
    padding:16px 14px 14px 17px;
  }
  #page-automations .automation-symbol{width:46px;height:46px;border-radius:14px}
  #page-automations .automation-main h3{font-size:.96rem}
  #page-automations .automation-main p{font-size:.76rem}
  #page-automations .automation-actions{
    grid-column:1/-1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    padding-top:11px;
    border-top:1px solid #eaecf0;
  }
  #page-automations .mini-button{width:100%;padding-inline:7px}
  #page-automations .empty-state{min-height:300px}

  #page-subscription .subscription-summary-card{padding:0 20px 22px}
  #page-subscription .subscription-summary-card>.panel-head{margin:0 -20px;padding:21px 20px 17px}
  #page-subscription .subscription-price{display:grid;gap:5px;margin-top:25px}
  #page-subscription .subscription-price strong{font-size:3.75rem}
  #page-subscription .subscription-price span{font-size:.86rem}
  #page-subscription .billing-benefits{grid-template-columns:1fr;padding:15px}
  #page-subscription .billing-actions{display:grid;grid-template-columns:1fr;padding:0}
  #page-subscription .billing-actions .button{width:100%}
}

@media(max-width:470px){
  #app-view .topbar{padding-inline:11px}
  #app-view .page-container{padding:14px 11px 40px}
  #app-view .page-actions h2{font-size:1.55rem}
  #app-view .page-actions .button-row{grid-template-columns:1fr}
  #app-view .welcome-banner{padding:22px;border-radius:22px}
  #app-view .welcome-banner h2{font-size:2.05rem}
  #app-view .stat-card{padding:17px}
  #app-view .quick-template-grid{padding:12px}
  #page-usage .stat-grid{grid-template-columns:1fr}
  #page-automations .automation-actions{grid-template-columns:1fr 1fr 1fr;gap:6px}
  #page-automations .mini-button{min-height:37px;font-size:.65rem}
  #page-subscription .subscription-price strong{font-size:3.25rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Monthly automated-message quota and top-up UI */
.message-quota-card{display:grid;gap:18px;overflow:hidden}
.message-quota-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.message-quota-summary>div{display:grid;gap:3px;padding:16px;border:1px solid var(--border,rgba(148,163,184,.22));border-radius:16px;background:rgba(255,255,255,.03)}
.message-quota-summary strong{font-size:clamp(1.35rem,3vw,2rem);letter-spacing:-.04em}
.message-quota-summary span{font-size:.82rem;color:var(--muted,#94a3b8)}
.message-quota-track{height:12px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden}
.message-quota-track>span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,currentColor,rgba(124,92,255,.82));transition:width .35s ease}
.message-quota-card[data-level="warning"] .message-quota-track>span{background:linear-gradient(90deg,#f59e0b,#fb923c)}
.message-quota-card[data-level="exhausted"] .message-quota-track>span{background:linear-gradient(90deg,#ef4444,#fb7185)}
.message-quota-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.message-quota-foot p{margin:0}
@media(max-width:640px){.message-quota-summary{grid-template-columns:1fr}.message-quota-foot .button{width:100%}}