/* ======================================================================
   HOWU BRAND V1 — frontend brand evolution layered over Hotfix 15.
   Business logic, Supabase schema, realtime, permissions, and user profile
   customization remain untouched. App shell = HOWU; user profiles = user.
   ====================================================================== */

:root{
  --howu-yellow:#FFD600;
  --howu-yellow-bright:#FFE600;
  --howu-yellow-hover:#FFC400;
  --howu-gold:#FFC400;
  --howu-orange:#FF9D00;
  --howu-orange-deep:#FF7A00;
  --howu-gradient:linear-gradient(135deg,#FFE600 0%,#FFC400 48%,#FF9700 100%);
  --howu-soft:#FFF9D9;
  --howu-soft-hover:#FFF4B2;
  --howu-ink:#181818;

  --pc-bg:#FAFAF8!important;
  --pc-surface:#FFFFFF!important;
  --pc-surface-2:#FFFDF5!important;
  --pc-surface-3:#F4F3EE!important;
  --pc-text:#181818!important;
  --pc-text-soft:#6F6F6B!important;
  --pc-text-faint:#9B9B94!important;
  --pc-text-2:#6F6F6B!important;
  --pc-text-3:#92928C!important;
  --pc-border:#E5E5DE!important;
  --pc-border-soft:#ECECE7!important;
  --pc-border-strong:#D8D8D0!important;
  --pc-accent:#FFD600!important;
  --pc-accent-strong:#FFC400!important;
  --pc-site-accent:#FFD600!important;
  --pc-danger:#E5484D!important;
  --pc-success:#2E9B63!important;
  --pc-story-1:#FFE600!important;
  --pc-story-2:#FFC400!important;
  --pc-story-3:#FF9D00!important;
  --pc-story-4:#FF7A00!important;
  --pc-shadow:0 12px 34px rgba(31,28,18,.07)!important;
  --pc-radius:18px!important;
  color-scheme:light;
}

[data-theme="dark"]{
  --howu-soft:rgba(255,214,0,.12);
  --howu-soft-hover:rgba(255,214,0,.18);
  --pc-bg:#10100F!important;
  --pc-surface:#1D1D1A!important;
  --pc-surface-2:#171715!important;
  --pc-surface-3:#242420!important;
  --pc-text:#FFFFFF!important;
  --pc-text-soft:#A9A9A2!important;
  --pc-text-faint:#74746E!important;
  --pc-text-2:#A9A9A2!important;
  --pc-text-3:#85857E!important;
  --pc-border:rgba(255,255,255,.11)!important;
  --pc-border-soft:rgba(255,255,255,.08)!important;
  --pc-border-strong:rgba(255,255,255,.16)!important;
  --pc-accent:#FFD600!important;
  --pc-accent-strong:#FFE600!important;
  --pc-site-accent:#FFD600!important;
  --pc-shadow:0 18px 50px rgba(0,0,0,.26)!important;
  color-scheme:dark;
}

html,body,#root,.pc-app{background:var(--pc-bg)!important;color:var(--pc-text)!important}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important}
::selection{background:#FFE680;color:#181818}

/* Accessibility: yellow carries near-black text; destructive states stay red. */
.pc-app button:focus-visible,.pc-app a:focus-visible,.pc-app input:focus-visible,.pc-app textarea:focus-visible,.pc-app select:focus-visible{
  outline:2px solid var(--howu-yellow)!important;outline-offset:2px!important;
}

/* ----- Brand / wordmark ----- */
.pc-wordmark{font-weight:900!important;letter-spacing:-.06em!important;color:var(--pc-text)!important}
.pc-wordmark .pc-brand-logo{display:none!important}
.pc-wordmark>span:last-child{font-size:23px!important}
.pc-brand-logo img{border-radius:20%!important;box-shadow:none!important;background:transparent!important}
.pc-auth-preview-brand .pc-brand-logo,.pc-auth-mobile-brand .pc-brand-logo{display:inline-grid!important}
.pc-auth-preview-brand,.pc-auth-mobile-brand{font-weight:900!important;letter-spacing:-.055em!important}

/* ----- Buttons ----- */
.pc-primary-button,.pc-auth-primary,.pc-create-post-header .pc-text-button,.pc-chat-send,
.pc-settings-input-action button,.pc-platform-admin button.is-primary,.pc-replay-actions button.is-primary{
  background:var(--howu-yellow)!important;border-color:var(--howu-yellow)!important;color:#171717!important;
  box-shadow:none!important;font-weight:760!important;
}
.pc-primary-button:hover:not(:disabled),.pc-auth-primary:hover:not(:disabled),.pc-chat-send:hover:not(:disabled),
.pc-settings-input-action button:hover:not(:disabled){background:var(--howu-yellow-hover)!important;border-color:var(--howu-yellow-hover)!important;filter:none!important}
.pc-primary-button:active,.pc-auth-primary:active,.pc-chat-send:active{transform:scale(.98)!important}
.pc-secondary-button,.pc-auth-google{background:var(--pc-surface)!important;color:var(--pc-text)!important;border:1px solid var(--pc-border)!important}
.pc-text-button,.pc-load-more,.pc-context-profile>button:last-child,.pc-context-heading button,.pc-suggestion-follow{color:#B17A00!important}
[data-theme="dark"] .pc-text-button,[data-theme="dark"] .pc-load-more,[data-theme="dark"] .pc-suggestion-follow{color:var(--howu-yellow)!important}

/* ----- App shell / navigation ----- */
.pc-sidebar{background:var(--pc-surface)!important;border-right:1px solid var(--pc-border-soft)!important;box-shadow:none!important}
.pc-nav-item{border-radius:12px!important;transition:background-color .16s ease,color .16s ease,transform .16s ease!important}
.pc-nav-item:hover{background:var(--pc-surface-3)!important}
.pc-nav-item.is-active{background:var(--howu-soft)!important;color:#171717!important;font-weight:780!important}
.pc-nav-item.is-active svg{color:#A87300!important;stroke-width:2.45!important}
[data-theme="dark"] .pc-nav-item.is-active{color:#fff!important}
[data-theme="dark"] .pc-nav-item.is-active svg{color:var(--howu-yellow)!important}
.pc-nav-badge{background:var(--howu-yellow)!important;color:#171717!important;border-color:var(--pc-surface)!important}
.pc-mobile-header{background:color-mix(in srgb,var(--pc-surface) 96%,transparent)!important;border-color:var(--pc-border-soft)!important}
.pc-bottom-nav{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important;box-shadow:none!important}
.pc-bottom-nav>button{border-radius:13px!important;color:var(--pc-text-soft)!important}
.pc-bottom-nav>button.is-active{color:#A87300!important;background:var(--howu-soft)!important}
[data-theme="dark"] .pc-bottom-nav>button.is-active{color:var(--howu-yellow)!important}
.pc-bottom-nav button.is-active .pc-avatar{outline-color:var(--howu-yellow)!important}
.pc-mobile-more-menu{background:var(--pc-surface)!important;border-color:var(--pc-border)!important;border-radius:16px!important}

/* ----- Feed / social content ----- */
.pc-feed-controls{border-bottom:0!important}
.pc-segmented-control{gap:5px!important}
.pc-segmented-control button{border-radius:10px!important}
.pc-segmented-control button.is-active{background:var(--howu-soft)!important;color:var(--pc-text)!important}
.pc-feed-composer,.pc-composer-trigger{background:var(--pc-surface)!important;border:1px solid var(--pc-border-soft)!important;border-radius:18px!important}
.pc-composer-trigger{padding:10px 12px!important;margin-bottom:14px!important;min-height:62px!important}
.pc-feed-composer button:not(.pc-composer-mic){border-radius:12px!important}
.pc-post-list{gap:14px!important}
.pc-post-card,.pc-post-card.card-modern{background:var(--pc-surface)!important;color:var(--pc-text)!important;border:1px solid var(--pc-border-soft)!important;border-radius:18px!important;box-shadow:none!important;overflow:visible!important}
.pc-post-card.card-modern:hover{border-color:color-mix(in srgb,var(--pc-border) 68%,var(--howu-yellow))!important}
.pc-post-actions{border-color:var(--pc-border-soft)!important}
.pc-post-actions button:hover{background:var(--pc-surface-3)!important}
.pc-feed-sort{color:var(--pc-text-soft)!important}
.pc-feed-sort select{color:var(--pc-text-soft)!important}
.pc-feed-sort>span{background:var(--pc-border-soft)!important}
.pc-sponsored{background:var(--pc-surface)!important;border-color:var(--pc-border)!important}

/* ----- Stories: HOWU yellow → orange unread ring ----- */
.pc-story-ring{background:var(--pc-border)!important}
.pc-story-ring--unseen{background:conic-gradient(from 205deg,#FFE600,#FFC400,#FF9D00,#FF7A00,#FFE600)!important}
.pc-story-avatar{border-color:var(--pc-surface)!important}
.pc-story-add{background:var(--howu-yellow)!important;color:#171717!important;border-color:var(--pc-surface)!important}
.pc-story-progress>span>i,.pc-story-progress i{background:var(--howu-yellow)!important}

/* ----- Mood is the heart of HOWU ----- */
.pc-mood-sheet{border-radius:22px!important;border-color:var(--pc-border)!important;box-shadow:var(--pc-shadow)!important}
.pc-mood-kicker{color:#A87300!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important}
[data-theme="dark"] .pc-mood-kicker{color:var(--howu-yellow)!important}
.pc-mood-grid{gap:9px!important}
.pc-mood-grid button,.pc-create-mood-grid button{border-radius:14px!important;border-color:var(--pc-border-soft)!important;background:var(--pc-surface)!important;transition:transform .16s ease,background-color .16s ease,border-color .16s ease!important}
.pc-mood-grid button:hover,.pc-create-mood-grid button:hover{transform:translateY(-1px)!important;background:var(--howu-soft)!important}
.pc-mood-grid button.is-active,.pc-create-mood-grid button.is-active{background:var(--howu-soft)!important;border-color:var(--howu-yellow)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--howu-yellow) 20%,transparent)!important}
.pc-mood-grid button.is-active .pc-mood-emoji{transform:scale(1.08)}

/* ----- Composer / inputs ----- */
.pc-create-post{border-radius:22px!important;border-color:var(--pc-border)!important;background:var(--pc-surface)!important}
.pc-create-post-header{border-color:var(--pc-border-soft)!important}
.pc-create-post-composer textarea,.pc-auth-field>div,.pc-search-field,.pc-chat-input-wrap,
.pc-settings-v4-page input:not([type="checkbox"]):not([type="radio"]),.pc-settings-v4-page textarea,.pc-settings-v4-page select{
  background:var(--pc-surface-2)!important;border-color:var(--pc-border)!important;border-radius:14px!important;color:var(--pc-text)!important;
}
.pc-auth-field>div:focus-within,.pc-search-field:focus-within,.pc-chat-input-wrap:focus-within,
.pc-settings-v4-page input:focus,.pc-settings-v4-page textarea:focus,.pc-settings-v4-page select:focus{
  border-color:var(--howu-yellow)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--howu-yellow) 18%,transparent)!important;
}
.pc-create-post-composer textarea{background:transparent!important;border:0!important}
.pc-create-toolbar button.is-active,.pc-create-schedule{background:var(--howu-soft)!important;border-color:color-mix(in srgb,var(--howu-yellow) 42%,var(--pc-border))!important}
.pc-create-toolbar button.is-active{color:#9A6A00!important}
[data-theme="dark"] .pc-create-toolbar button.is-active{color:var(--howu-yellow)!important}
.pc-create-post-header .pc-text-button:disabled{background:transparent!important;color:var(--pc-text-faint)!important;border-color:transparent!important}

/* ----- Search ----- */
.pc-search-field{background:var(--pc-surface-3)!important}
.pc-search-field:focus-within{background:var(--pc-surface)!important}
.pc-user-row{border-color:var(--pc-border-soft)!important}

/* ----- Messages: recognizable flat HOWU yellow for own messages ----- */
.pc-messages-hub{
  --pc-wa-bg:var(--pc-bg);--pc-wa-pane:var(--pc-surface);--pc-wa-mint:var(--howu-soft);
  --pc-wa-mint-strong:var(--howu-soft-hover);--pc-wa-border:var(--pc-border-soft);
  --pc-wa-text:var(--pc-text);--pc-wa-muted:var(--pc-text-soft);--pc-wa-send:var(--howu-yellow);
  background:var(--pc-surface)!important;border-color:var(--pc-border)!important;box-shadow:none!important;border-radius:18px!important;
}
.pc-messages-hub-header{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important}
.pc-messages-hub-header h1{color:var(--pc-text)!important}
.pc-messages-hub-header p{color:var(--pc-text-soft)!important}
.pc-messages-hub-header nav{background:var(--pc-surface-2)!important;border-color:var(--pc-border)!important}
.pc-messages-hub-header nav button{color:var(--pc-text-soft)!important}
.pc-messages-hub-header nav button.is-active{background:var(--howu-soft)!important;color:var(--pc-text)!important}
.pc-messages-hub .pc-inbox{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important}
.pc-messages-hub .pc-inbox-header strong,.pc-messages-hub .pc-inbox-header h2{color:var(--pc-text)!important}
.pc-messages-hub .pc-inbox-tabs{border-color:var(--pc-border-soft)!important}
.pc-messages-hub .pc-inbox-tabs button{color:var(--pc-text-soft)!important}
.pc-messages-hub .pc-inbox-tabs button.is-active{color:var(--pc-text)!important;border-bottom-color:var(--howu-yellow)!important}
.pc-messages-hub .pc-search-field--inbox{background:var(--pc-surface-2)!important;border-color:var(--pc-border)!important}
.pc-messages-hub .pc-conversation-row,.pc-messages-hub .pc-room-row,.pc-messages-hub .pc-capsule-row,.pc-messages-hub .pc-time-capsule-row,
.pc-messages-hub .pc-room-grid>*,.pc-messages-hub .pc-capsule-card{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important}
.pc-messages-hub .pc-conversation-row:hover,.pc-messages-hub .pc-room-row:hover,.pc-messages-hub .pc-capsule-row:hover,
.pc-messages-hub .pc-room-grid>*:hover,.pc-messages-hub .pc-capsule-card:hover{background:var(--howu-soft)!important;border-color:color-mix(in srgb,var(--howu-yellow) 30%,var(--pc-border))!important}
.pc-messages-hub .pc-conversation-row strong,.pc-messages-hub .pc-room-row strong{color:var(--pc-text)!important}
.pc-messages-hub .pc-conversation-row small,.pc-messages-hub .pc-conversation-row p{color:var(--pc-text-soft)!important}
.pc-messages-hub:has(.pc-inbox):after{background:linear-gradient(135deg,var(--pc-bg),var(--pc-surface-2))!important;color:var(--pc-text-soft)!important}
.pc-chat-page{--pc-dm-bg:var(--pc-bg);--pc-dm-line:var(--pc-border-soft);--pc-dm-mint:var(--howu-soft);--pc-dm-send:var(--howu-yellow);background:var(--pc-surface)!important;border-color:var(--pc-border)!important}
.pc-chat-header{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important}
.pc-chat-scroll,.pc-chat-messages{background:var(--pc-bg)!important}
.pc-message-row.is-theirs .pc-message-bubble,.pc-chat-message:not(.is-own) .pc-chat-bubble{background:var(--pc-surface)!important;border:1px solid var(--pc-border)!important;color:var(--pc-text)!important;border-bottom-left-radius:5px!important}
.pc-message-row.is-mine .pc-message-bubble,.pc-chat-message.is-own .pc-chat-bubble{background:var(--howu-yellow)!important;border:1px solid var(--howu-yellow-hover)!important;color:#171717!important;border-bottom-right-radius:5px!important}
.pc-message-row.is-mine .pc-message-meta,.pc-chat-message.is-own .pc-message-meta{color:rgba(23,23,23,.62)!important}
.pc-message-row.is-mine .pc-message-meta .is-read,.pc-chat-message.is-own .is-read{color:#7A5600!important}
.pc-chat-composer-wrap,.pc-chat-composer{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important}
.pc-chat-input-wrap{background:var(--pc-surface-2)!important;border-color:var(--pc-border)!important}
.pc-chat-input-wrap input,.pc-chat-input-wrap textarea{color:var(--pc-text)!important;background:transparent!important}
.pc-chat-send{border-radius:12px!important}
.pc-messages-hub .pc-rooms-panel,.pc-messages-hub .pc-capsules-panel{background:var(--pc-bg)!important}
.pc-messages-hub .pc-capsule-section-label{color:var(--pc-text-soft)!important}

/* ----- Notifications ----- */
.pc-notification-center{background:var(--pc-surface)!important;border-color:var(--pc-border)!important;border-radius:18px!important}
.pc-notification-tabs button.is-active{background:var(--howu-soft)!important;color:var(--pc-text)!important}
.pc-notification-tabs button small{background:var(--howu-yellow)!important;color:#171717!important}
.pc-notification-list article{background:transparent!important;border-color:var(--pc-border-soft)!important}
.pc-notification-list article:hover{background:var(--pc-surface-2)!important}
.pc-notification-list article.is-unread{background:var(--howu-soft)!important}
.pc-notification-open>i{background:var(--howu-yellow)!important}
.pc-notification-center>header>span>svg{color:#A87300!important}
[data-theme="dark"] .pc-notification-center>header>span>svg{color:var(--howu-yellow)!important}

/* ----- Saved / collections ----- */
.pc-saved-page>.pc-collection-strip button.is-active{background:var(--howu-yellow)!important;color:#171717!important}
.pc-saved-grid article,.pc-saved-card{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important;border-radius:16px!important}
.pc-saved-card-preview{background:var(--pc-surface-2)!important}
.pc-saved-actions{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important}
.pc-saved-actions select{background:var(--pc-surface)!important;color:var(--pc-text)!important;border-color:var(--pc-border)!important}
.pc-site-credit{color:var(--pc-text-faint)!important}
.pc-site-credit a{color:#A87300!important}
[data-theme="dark"] .pc-site-credit a{color:var(--howu-yellow)!important}

/* ----- Settings ----- */
.pc-settings-v4-group{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important;border-radius:16px!important}
.pc-settings-v4-row{border-color:var(--pc-border-soft)!important}
.pc-settings-v4-row:hover{background:var(--pc-surface-2)!important}
.pc-settings-v4-icon{background:var(--pc-surface-2)!important;border-color:var(--pc-border-soft)!important}
.pc-toggle.is-on{background:var(--howu-yellow)!important}
.pc-toggle.is-on span{background:#171717!important}
.pc-choice button.is-selected .pc-choice-dot{border-color:var(--howu-yellow)!important}
.pc-choice button.is-selected .pc-choice-dot:after{background:var(--howu-yellow)!important}
.pc-customize-tabs button.is-active{border-bottom-color:var(--howu-yellow)!important}
/* Preserve profile customization colors; only the global shell uses HOWU yellow. */
.pc-profile-page{--pc-accent:var(--pc-profile-accent,var(--howu-yellow))}

/* ----- Rooms / Capsule ----- */
.pc-rooms-panel,.pc-capsules-panel{background:var(--pc-surface)!important;border-color:var(--pc-border)!important;box-shadow:none!important}
.pc-room-grid>button,.pc-capsule-card{background:var(--pc-surface)!important;border-color:var(--pc-border-soft)!important}
.pc-room-grid>button:hover,.pc-capsule-card:hover{background:var(--howu-soft)!important}
.pc-capsule-card.is-ready{background:var(--howu-soft)!important;border-color:color-mix(in srgb,var(--howu-yellow) 35%,var(--pc-border))!important}
.pc-room-orbit,.pc-capsule-seal{background:var(--howu-soft)!important;color:#A87300!important;border-color:color-mix(in srgb,var(--howu-yellow) 24%,var(--pc-border))!important}
[data-theme="dark"] .pc-room-orbit,[data-theme="dark"] .pc-capsule-seal{color:var(--howu-yellow)!important}

/* ----- Admin: professional, connected to HOWU ----- */
.pc-platform-admin{background:var(--pc-surface)!important;border-color:var(--pc-border)!important;box-shadow:none!important}
.pc-platform-admin-header{background:#181818!important;color:#fff!important;border-bottom:4px solid var(--howu-yellow)!important}
.pc-platform-admin-header small{color:var(--howu-yellow)!important}
.pc-platform-admin-header p{color:#CFCFC8!important}
.pc-platform-admin-tabs button.is-active{background:var(--howu-soft)!important;color:var(--pc-text)!important}

/* ----- Auth / launch moment ----- */
.pc-auth-page{background:var(--pc-bg)!important}
.pc-auth-preview{background:linear-gradient(145deg,#FFFBEA 0%,#FFF4B2 52%,#FFE27A 100%)!important;border-color:#F2D970!important}
.pc-auth-preview-phone{border-color:#181818!important;box-shadow:0 24px 70px rgba(94,67,0,.18)!important}
.pc-auth-preview-stories span{background:linear-gradient(135deg,#FFE600,#FFC400 50%,#FF9700)!important}
.pc-auth-preview-copy h1{color:#181818!important;font-weight:850!important}
.pc-auth-preview-copy p{color:#625B42!important}
.pc-auth-form-side{background:var(--pc-bg)!important}
.pc-auth-header h1{font-weight:820!important}
.pc-auth-field>div{border-radius:14px!important}
.pc-auth-primary,.pc-auth-google{border-radius:12px!important;height:46px!important}
[data-theme="dark"] .pc-auth-preview{background:linear-gradient(145deg,#171715,#242420)!important;border-color:rgba(255,214,0,.18)!important}
[data-theme="dark"] .pc-auth-preview-copy h1{color:#fff!important}
[data-theme="dark"] .pc-auth-preview-copy p{color:#A9A9A2!important}

/* ----- Replay / special branded moments: gradient is allowed here ----- */
.pc-replay-card:after{content:"HOWU"!important;color:#ffffff12!important}
.pc-replay-card.pc-story-bg--sunset{background:linear-gradient(155deg,#FF7A00 0%,#FFC400 52%,#FFE600 100%)!important;color:#171717!important}

/* ----- Empty/loading/skeleton polish ----- */
.pc-app-loading{background:var(--pc-bg)!important}
.pc-loader-word{font-weight:900!important;letter-spacing:-.07em!important;color:transparent!important;background:var(--howu-gradient)!important;-webkit-background-clip:text!important;background-clip:text!important}
.pc-story-placeholder>span,.pc-story-placeholder small,[class*="skeleton"]{background:linear-gradient(90deg,var(--pc-surface-3),var(--pc-surface-2),var(--pc-surface-3))!important;background-size:200% 100%!important}

/* ----- Mobile: compact, native HOWU shell; no giant floating yellow bars ----- */
@media(max-width:767px){
  .pc-mobile-header{background:var(--pc-surface)!important}
  .pc-wordmark--mobile>span:last-child{font-size:21px!important}
  .pc-bottom-nav{height:calc(60px + env(safe-area-inset-bottom))!important;padding:4px 5px env(safe-area-inset-bottom)!important}
  .pc-bottom-nav>button{height:48px!important}
  .pc-post-card,.pc-post-card.card-modern{border-left:0!important;border-right:0!important;border-radius:0!important;margin-bottom:0!important}
  .pc-feed-composer,.pc-composer-trigger{margin-inline:10px!important;border-radius:16px!important}
  .pc-messages-hub{border-left:0!important;border-right:0!important;border-radius:0!important}
}

@media(prefers-reduced-motion:reduce){
  .pc-app *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}