/* Afterhrs unified visual system — inspired by OnlyFans' clean product UI. */
:root{
  --of-blue:#00aff0;
  --of-blue-hover:#009ed8;
  --of-blue-dark:#0089bd;
  --of-blue-soft:#e8f8fe;
  --of-blue-line:#bceafa;
  --of-bg:#f6f7f8;
  --of-surface:#fff;
  --of-text:#242529;
  --of-muted:#60666c;
  --of-subtle:#8a9299;
  --of-border:#e2e5e8;
  --of-danger:#d9364f;
  --of-success:#128a60;
  --of-warning:#a96800;
  --bg:var(--of-bg);
  --card:var(--of-surface);
  --ink:var(--of-text);
  --muted:var(--of-muted);
  --line:var(--of-border);
  --acid:var(--of-blue);
  --purple:var(--of-blue);
  --purple-dark:var(--of-blue-hover);
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html,body,button,input,select,textarea{font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
body{font-size:16px;line-height:1.45}
h1,h2,h3,h4,h5,h6{font-family:inherit!important;font-weight:700!important;letter-spacing:-.015em!important}
button,input,select,textarea{font-size:15px}

/* Light theme foundations */
:root[data-theme="light"] body{background:var(--of-bg)!important;color:var(--of-text)!important}
:root[data-theme="light"] main,:root[data-theme="light"] .auth-screen{color:var(--of-text)}
:root[data-theme="light"] h1,:root[data-theme="light"] h2,:root[data-theme="light"] h3,:root[data-theme="light"] h4,
:root[data-theme="light"] strong,:root[data-theme="light"] b{color:var(--of-text)}
:root[data-theme="light"] p,:root[data-theme="light"] small,:root[data-theme="light"] .muted{color:var(--of-muted)!important}
:root[data-theme="light"] .eyebrow,:root[data-theme="light"] .nav-section-label{color:var(--of-subtle)!important;font-weight:700!important}

/* Shared surfaces across every view */
:root[data-theme="light"] .panel,:root[data-theme="light"] .trend-card,:root[data-theme="light"] .idea-card,
:root[data-theme="light"] .post-slot,:root[data-theme="light"] .auth-card,:root[data-theme="light"] .creator-application-card,
:root[data-theme="light"] .application-card,:root[data-theme="light"] .support-request-card,
:root[data-theme="light"] .agency-kpi,:root[data-theme="light"] .agency-chart-panel,
:root[data-theme="light"] .agency-leaderboard-panel,:root[data-theme="light"] .agency-social-card,
:root[data-theme="light"] .social-platform-card,:root[data-theme="light"] .recent-social-panel,
:root[data-theme="light"] .growth-ring-card,:root[data-theme="light"] .growth-video,
:root[data-theme="light"] .weekly-completion-panel,:root[data-theme="light"] .attention-panel,
:root[data-theme="light"] .daily-post-row,:root[data-theme="light"] .creator-directory-row{
  background:var(--of-surface)!important;
  border-color:var(--of-border)!important;
  color:var(--of-text)!important;
  box-shadow:0 2px 8px rgba(36,37,41,.055)!important;
}

/* Buttons, tabs, filters, and selection feedback */
:root[data-theme="light"] .primary,:root[data-theme="light"] .application-submit,
:root[data-theme="light"] button[data-action="generate"]{
  background:var(--of-blue)!important;border-color:var(--of-blue)!important;color:#fff!important;
  box-shadow:none!important;font-weight:700!important;
}
:root[data-theme="light"] .primary:hover,:root[data-theme="light"] .application-submit:hover,
:root[data-theme="light"] button[data-action="generate"]:hover{background:var(--of-blue-hover)!important;border-color:var(--of-blue-hover)!important}
:root[data-theme="light"] .primary:focus-visible,:root[data-theme="light"] .secondary:focus-visible,
:root[data-theme="light"] button:focus-visible{outline:0!important;box-shadow:0 0 0 4px rgba(0,175,240,.2)!important}
:root[data-theme="light"] .secondary,:root[data-theme="light"] .light-btn,:root[data-theme="light"] .filter,
:root[data-theme="light"] .copy-btn,:root[data-theme="light"] .icon-btn{
  background:#fff!important;border:1px solid #d7dadd!important;color:var(--of-text)!important;box-shadow:none!important;
}
:root[data-theme="light"] .secondary:hover,:root[data-theme="light"] .filter:hover{background:#f0f2f3!important;border-color:#c7ccd0!important}
:root[data-theme="light"] .filter.active,:root[data-theme="light"] [aria-selected="true"],
:root[data-theme="light"] .growth-periods button.active,:root[data-theme="light"] .application-filters button.active{
  background:var(--of-blue)!important;border-color:var(--of-blue)!important;color:#fff!important;
  box-shadow:0 0 0 3px rgba(0,175,240,.17)!important;
}

/* Form controls */
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{
  min-height:46px;background:#fff!important;border:1px solid #cfd4d8!important;color:var(--of-text)!important;border-radius:8px!important;
}
:root[data-theme="light"] textarea{line-height:1.55}
:root[data-theme="light"] input::placeholder,:root[data-theme="light"] textarea::placeholder{color:#747c83!important;opacity:1}
:root[data-theme="light"] input:focus,:root[data-theme="light"] select:focus,:root[data-theme="light"] textarea:focus{
  border-color:var(--of-blue)!important;outline:0!important;box-shadow:0 0 0 3px rgba(0,175,240,.17)!important;
}
:root[data-theme="light"] label{color:var(--of-text)!important;font-size:13px!important;font-weight:600!important}

/* Navigation and header */
:root[data-theme="light"] .sidebar{background:#fff!important;border-right:1px solid var(--of-border)!important;color:var(--of-text)!important;box-shadow:none!important}
:root[data-theme="light"] .brand,:root[data-theme="light"] .brand b{color:var(--of-text)!important}
:root[data-theme="light"] .brand-mark{
  background-color:#000!important;
  background-image:url('/brand-logo-192.png')!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  color:transparent!important;
  box-shadow:0 0 0 1px rgba(0,175,240,.2)!important;
  font-size:0!important;
}
:root[data-theme="light"] .nav-item{color:#4f555b!important;font-weight:500!important}
:root[data-theme="light"] .nav-item span{color:var(--of-blue)!important}
:root[data-theme="light"] .nav-item:hover{background:#f1f3f4!important;color:var(--of-text)!important}
:root[data-theme="light"] .nav-item.active{background:var(--of-blue-soft)!important;color:var(--of-blue-dark)!important;box-shadow:inset 3px 0 var(--of-blue)!important;font-weight:700!important}
:root[data-theme="light"] header{background:var(--of-bg)!important;border-color:var(--of-border)!important}
:root[data-theme="light"] .theme-toggle,:root[data-theme="light"] .mobile-menu{background:#fff!important;border:1px solid #d7dadd!important;color:var(--of-text)!important}

/* Dashboard and analytics */
:root[data-theme="light"] .agency-kpi strong,:root[data-theme="light"] .upload-metric div>strong,
:root[data-theme="light"] .daily-upload-summary strong{color:var(--of-text)!important}
:root[data-theme="light"] .agency-kpi span,:root[data-theme="light"] .upload-metric div>span,
:root[data-theme="light"] .upload-metric div>small,:root[data-theme="light"] .activity-row>span,
:root[data-theme="light"] .weekly-performance-status{color:var(--of-muted)!important}
:root[data-theme="light"] .upload-metric .metric-icon{background:var(--of-blue-soft)!important;color:var(--of-blue)!important}
:root[data-theme="light"] .bar-well{border-color:var(--of-border)!important;background:repeating-linear-gradient(to top,transparent 0,transparent 62px,#edf0f2 63px)!important}
:root[data-theme="light"] .bar-well i,:root[data-theme="light"] .daily-post-progress i em,
:root[data-theme="light"] .growth-history i{background:var(--of-blue)!important;box-shadow:none!important}
:root[data-theme="light"] .growth-periods,:root[data-theme="light"] .growth-history,
:root[data-theme="light"] .tracking-week-nav{background:#f4f6f7!important;border-color:var(--of-border)!important}
:root[data-theme="light"] .growth-ring{background:conic-gradient(var(--of-blue) var(--ring),#e6eaed 0)!important}
:root[data-theme="light"] .growth-ring:before{background:#fff!important}
:root[data-theme="light"] .growth-video strong{color:var(--of-blue-dark)!important}

/* Schedules */
:root[data-theme="light"] #schedule-view .week-strip{background:#f0f2f3!important;border-color:var(--of-border)!important}
:root[data-theme="light"] #schedule-view .day-square{background:#fff!important;border-color:#d8dde0!important;color:var(--of-text)!important}
:root[data-theme="light"] #schedule-view .day-square:hover{border-color:#91d9f4!important;background:#f7fcfe!important}
:root[data-theme="light"] #schedule-view .day-square.active,
:root[data-theme="light"] #schedule-view .day-square.today.active{background:var(--of-blue-soft)!important;border-color:var(--of-blue)!important;box-shadow:0 0 0 3px rgba(0,175,240,.17)!important}
:root[data-theme="light"] #schedule-view .day-square.active *{color:var(--of-blue-dark)!important}
:root[data-theme="light"] #schedule-view .post-slot:hover{border-color:#a9dff3!important;box-shadow:0 5px 16px rgba(36,37,41,.08)!important}
:root[data-theme="light"] .schedule-guide{background:var(--of-blue-soft)!important;border-color:var(--of-blue-line)!important}
:root[data-theme="light"] .schedule-guide-date{border-color:var(--of-blue-line)!important}
:root[data-theme="light"] .schedule-guide-date span{color:var(--of-blue-dark)!important}

/* Applications, strategy, support, and account cards */
:root[data-theme="light"] .application-hero,:root[data-theme="light"] .tenant-strategy-hero,
:root[data-theme="light"] .sidebar-promo-card,:root[data-theme="light"] .agency-schedule-tools{
  background:var(--of-blue-soft)!important;border-color:var(--of-blue-line)!important;color:var(--of-text)!important;
}
:root[data-theme="light"] .application-hero p,:root[data-theme="light"] .application-hero h1,
:root[data-theme="light"] .application-hero .eyebrow{color:var(--of-text)!important}
:root[data-theme="light"] .application-perks span{background:#fff!important;border:1px solid var(--of-blue-line)!important;color:var(--of-blue-dark)!important}
:root[data-theme="light"] .application-contact>*{background:#f2f4f5!important;border:1px solid var(--of-border)!important;color:var(--of-text)!important}
:root[data-theme="light"] .application-earnings span{background:var(--of-blue-soft)!important;border-color:var(--of-blue-line)!important}
:root[data-theme="light"] .application-earnings b,:root[data-theme="light"] .application-answer>b,
:root[data-theme="light"] .application-card-head a{color:var(--of-blue-dark)!important}
:root[data-theme="light"] .support-type-grid label span{background:#fff!important;border-color:#d7dadd!important;color:var(--of-text)!important;box-shadow:none!important}
:root[data-theme="light"] .support-type-grid input:checked+span{background:var(--of-blue-soft)!important;border-color:var(--of-blue)!important;box-shadow:0 0 0 3px rgba(0,175,240,.17)!important}
:root[data-theme="light"] .support-type-grid input:checked+span b{color:var(--of-blue-dark)!important}

/* Status colors stay semantic, never decorative purple. */
:root[data-theme="light"] .good,:root[data-theme="light"] .completed,:root[data-theme="light"] .application-success{color:var(--of-success)!important}
:root[data-theme="light"] .warn,:root[data-theme="light"] .pending{color:var(--of-warning)!important}
:root[data-theme="light"] .danger,:root[data-theme="light"] .missed,:root[data-theme="light"] .invite-error{color:var(--of-danger)!important}

/* Dark mode uses the same blue brand accent and type system. */
:root[data-theme="dark"]{--purple:var(--of-blue);--purple-dark:var(--of-blue-hover);--acid:var(--of-blue)}
:root[data-theme="dark"] body{background:#101114!important;color:#f5f5f6!important}
:root[data-theme="dark"] .primary,:root[data-theme="dark"] .filter.active,
:root[data-theme="dark"] .growth-periods button.active{background:var(--of-blue)!important;border-color:var(--of-blue)!important;color:#fff!important;box-shadow:none!important}
:root[data-theme="dark"] input:focus,:root[data-theme="dark"] select:focus,:root[data-theme="dark"] textarea:focus{border-color:var(--of-blue)!important;box-shadow:0 0 0 3px rgba(0,175,240,.2)!important}
:root[data-theme="dark"] .nav-item.active{border-color:transparent!important;background:rgba(0,175,240,.13)!important;color:#62d2fb!important;box-shadow:inset 3px 0 var(--of-blue)!important}
:root[data-theme="dark"] #schedule-view .day-square.active,
:root[data-theme="dark"] .support-type-grid input:checked+span{border-color:var(--of-blue)!important;background:rgba(0,175,240,.12)!important;box-shadow:0 0 0 3px rgba(0,175,240,.16)!important}

@media(max-width:700px){
  body{font-size:16px}
  h1{font-size:26px!important}h2{font-size:23px!important}h3{font-size:19px!important}
  .view.active .section-heading h3{font-size:22px!important;line-height:1.2}
  #schedule-view>.weekly-plan-heading h3{font-size:26px!important;line-height:1.15}
  :root[data-theme="light"] body:not(.creator-mode) header{background:#fff!important;border-color:var(--of-border)!important;box-shadow:0 2px 8px rgba(36,37,41,.06)!important}
  :root[data-theme="light"] body:not(.creator-mode) header h1{color:var(--of-text)!important}
  :root[data-theme="light"] body:not(.creator-mode) header .eyebrow,
  :root[data-theme="light"] body:not(.creator-mode) header .header-date{color:var(--of-muted)!important}
  .primary,.secondary,input,select{min-height:46px}
}
/* Original platform-style marks: familiar silhouettes without bundled third-party logo artwork. */
.social-platform-logo{overflow:hidden;background:#fff!important;border:1px solid #d8dce2!important;color:#111!important;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.social-platform-logo svg{width:24px;height:24px;display:block;fill:currentColor;stroke:none}
.social-platform-logo.instagram{color:#d62976!important;background:linear-gradient(145deg,#fff 20%,#fff4f8 100%)!important}
.social-platform-logo.instagram svg{fill:none;stroke:currentColor;stroke-width:1.9}
.social-platform-logo.instagram .icon-dot{fill:currentColor;stroke:none}
.social-platform-logo.tiktok{color:#111!important}
.social-platform-logo.tiktok svg{filter:drop-shadow(-1.3px 0 #24e7e0) drop-shadow(1.3px 0 #ff3b67)}
.social-platform-logo.x{color:#fff!important;background:#111!important;border-color:#111!important}
.social-platform-logo.x svg{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}

/* Creator to-do: compact, calm and scannable without changing agency-managed tasks. */
body.creator-mode #todo-view.active{max-width:720px;margin-inline:auto}
body.creator-mode #todo-view .creator-reminder{margin:0;padding:24px;border:1px solid var(--of-border)!important;border-radius:18px;background:#fff!important;box-shadow:0 6px 20px rgba(36,37,41,.06)!important}
body.creator-mode #todo-view .creator-reminder>.eyebrow{display:block;margin:0 0 5px;color:var(--of-blue-dark)!important;font-size:12px!important;font-weight:800;letter-spacing:.09em;text-align:left!important}
body.creator-mode #todo-view .creator-reminder>h3{margin:0 0 18px;color:var(--of-text)!important;font-size:24px!important;line-height:1.25;letter-spacing:-.02em;text-align:left!important}
body.creator-mode #creator-additional-todos{display:grid;gap:10px}
body.creator-mode #todo-view .creator-reminder-item{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:12px;min-height:0;padding:14px;border:1px solid #e3e6e9!important;border-radius:12px;background:#f7f8f9}
body.creator-mode #todo-view .creator-reminder-item .todo-checkbox{position:relative;width:28px;height:28px;display:grid;place-items:center;border:2px solid var(--of-blue)!important;border-radius:50%;background:#fff;color:transparent}
body.creator-mode #todo-view .creator-reminder-item .todo-checkbox:after{content:none}
body.creator-mode #todo-view .todo-text-button{min-height:0;padding:0;color:var(--of-text)!important;font:600 16px/1.4 Roboto,Arial,sans-serif;text-align:left}

@media(max-width:700px){
 body.creator-mode #todo-view.active{padding-top:20px!important}
 body.creator-mode #todo-view .creator-reminder{padding:20px 16px;border-radius:16px}
 body.creator-mode #todo-view .creator-reminder>h3{margin-bottom:15px;font-size:22px!important}
 body.creator-mode #todo-view .creator-reminder-item{grid-template-columns:26px minmax(0,1fr);gap:11px;padding:13px 12px}
 body.creator-mode #todo-view .creator-reminder-item .todo-checkbox{width:26px;height:26px;flex-basis:26px}
 body.creator-mode #todo-view .todo-text-button{font-size:16px;line-height:1.35}
}

:root[data-theme="dark"] body.creator-mode #todo-view .creator-reminder{background:#18191c!important;border-color:#303238!important}
:root[data-theme="dark"] body.creator-mode #todo-view .creator-reminder-item{background:#222429;border-color:#34373d!important}
:root[data-theme="dark"] body.creator-mode #todo-view .todo-text-button,
:root[data-theme="dark"] body.creator-mode #todo-view .creator-reminder>h3{color:#f5f5f6!important}
:root[data-theme="dark"] body.creator-mode #todo-view .creator-reminder-item .todo-checkbox{background:#18191c}

/* Two supported growth platforms: balanced on desktop and stacked on mobile. */
.social-platform-grid,.tenant-growth-tip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.social-platform-grid,.tenant-growth-tip-grid{grid-template-columns:1fr}}

/* Authenticated portal final overrides: loaded last so legacy theme rules
   cannot push owner/agency controls off canvas or turn creator cards white. */
.agency-clients-menu:not([open])>.agency-clients-popover{display:none!important}
body.creator-mode,
:root[data-theme="light"] body.creator-mode,
:root[data-theme="dark"] body.creator-mode,
body.creator-mode .shell,
body.creator-mode .shell main,
body.creator-mode header,
body.creator-mode .view{background:#030405!important;color:#f5f7fb!important}
body.creator-mode .panel,
body.creator-mode .post-slot,
body.creator-mode .creator-workflow,
body.creator-mode .creator-reminder,
body.creator-mode #todo-view .creator-reminder{background:linear-gradient(145deg,#0b0e13,#06080b)!important;border-color:#1b2531!important;color:#f5f7fb!important}
body.creator-mode #todo-view .creator-reminder-item{background:#0b0e13!important;border-color:#1b2531!important}
body.creator-mode #todo-view .todo-text-button,
body.creator-mode #todo-view .creator-reminder>h3{color:#f5f7fb!important}
body.creator-mode p,body.creator-mode small,body.creator-mode .creator-workflow li span{color:#b8c1ce!important}
body.creator-mode .eyebrow,body.creator-mode .week-date-range,body.creator-mode .creator-direction b{color:#75a8f2!important}
:root[data-theme="light"] body.creator-mode .eyebrow,
:root[data-theme="dark"] body.creator-mode .eyebrow{color:#75a8f2!important}
@media(max-width:950px){
 body.creator-mode .shell,body.agency-mode .shell{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}
 body.creator-mode .shell main,body.agency-mode .shell main{box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding-left:16px!important;padding-right:16px!important;overflow-x:clip!important}
 body.agency-mode header,body.agency-mode .view{box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important}
}
@media(max-width:620px){
 body.owner-mode header{position:sticky!important;left:auto!important;display:flex!important;width:100%!important;min-height:66px!important;height:auto!important;margin:0 0 18px!important;padding:10px 12px!important;background:rgba(2,3,5,.94)!important;border-color:#171b22!important}
 body.owner-mode header>.owner-header-actions{position:static!important;left:auto!important;width:100%!important;max-width:none!important;min-width:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto!important;gap:6px!important;margin:0!important;transform:none!important;text-align:left!important}
 body.owner-mode .owner-header-actions>.secondary,body.owner-mode .agency-clients-menu,body.owner-mode .agency-clients-menu>summary{box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important}
 body.owner-mode .owner-header-actions>.secondary,body.owner-mode .agency-clients-menu>summary{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
 body.owner-mode #owner-logout-button{width:auto!important;min-width:64px!important}
 body.owner-mode main{box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding-left:14px!important;padding-right:14px!important;overflow-x:clip!important}
 body.owner-mode .owner-home-hero,body.owner-mode .owner-command-center,body.owner-mode .completed-plan-archive{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin-inline:auto!important}
}