/* ==========================================================
   THEME V3 – COSMIC GOLD (CLEAN)
   Block 1/3 – Base + Layout + Typography + Controls + Header
   ========================================================== */

:root{
  --bg0:#05060a;
  --bg1:#0b0f16;

  --gold:#f3c86a;
  --gold2:#d7a84a;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);

  --line:rgba(243,200,106,.20);
  --line2:rgba(255,255,255,.10);

  --radius:18px;
  --shadow: 0 22px 60px rgba(0,0,0,.55);

  --glass: rgba(10,10,14,.16);
  --glass-strong: rgba(10,12,18,.45);
}

/* base */
html, body{ min-height: 100%; }
body{
  margin:0;
  position: relative;
  overflow-x: hidden;
  background: var(--bg0) !important;
  color: var(--text);
}

/* page wrapper */
.page{
  max-width: 1400px;
  margin: 0 auto;
  background: transparent !important;
}

/* links (no purple visited) */
a, a:visited{ color: rgba(243,200,106,.95); }
a:hover{ color:#ffd98e; text-decoration:none; }

/* ==========================================================
   HEADER
   ========================================================== */

.site-header{
  background: rgba(0,0,0,.30) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
}
.header-inner{ padding: 14px 16px; }
.site-header a{ color: rgba(243,200,106,.95); }
.site-header a:hover{ color:#ffd98e; }

/* HEADER LOGO – icon + text (your markup: .logo .logo-mark .logo-text) */
.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

/* kill any old pseudo-elements / old strong inside logo (fix "2x") */
.logo::before,
.logo::after{
  content:none !important;
  display:none !important;
}
.logo strong{ display:none !important; }

.logo-mark{
  height:34px;
  width:auto;
  display:block;
  filter:
    drop-shadow(0 6px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 8px rgba(243,200,106,.25));
  transition: transform .12s ease;
}

.logo-text{
  font-size:18px;
  font-weight:800;
  letter-spacing:.4px;
  color:rgba(255,255,255,.92);
}

.logo:hover .logo-mark{ transform: translateY(-1px) scale(1.03); }
.logo:hover .logo-text{ color:#ffd98e; }

/* mobile – icon only */
@media (max-width:520px){
  .logo-text{ display:none; }
  .logo-mark{ height:38px; }
}

/* ==========================================================
   MAIN LAYOUT + TYPO
   ========================================================== */

.layout{
  gap: 24px;
  padding: 22px 16px;
}

h1,h2,h3{ color: rgba(255,255,255,.92) !important; }
.sidebar h3{
  color: rgba(255,255,255,.80) !important;
  letter-spacing: .12em;
}

.muted, .star-muted, small, .star-meta{ color: var(--muted) !important; }
.content p, .sidebar p{ color: rgba(255,255,255,.78) !important; }

/* universal panels (glass) */
.content, .sidebar,
.star-card, .comment-item, .feed-item,
.card, .panel,
.notif-menu, .notif-item,
.dm-message,
.thread-item{
  background: var(--glass) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(10px);
  color: var(--text) !important;
}

.content, .sidebar{ padding: 14px; }

/* buttons – single source */
.btn, button, input[type="submit"], .star-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius: 14px;
  border: 1px solid rgba(243,200,106,.28);
  background: rgba(243,200,106,.12);
  color: rgba(255,255,255,.92);

  padding: 10px 12px;
  cursor: pointer;
  text-decoration:none;

  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.btn:hover, button:hover, input[type="submit"]:hover, .star-btn:hover{
  background: rgba(243,200,106,.18);
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.btn:active, button:active, input[type="submit"]:active, .star-btn:active{
  transform: translateY(0px);
}
.btn.primary, .star-btn.primary{
  background: rgba(243,200,106,.22);
  border-color: rgba(243,200,106,.40);
  color: rgba(255,255,255,.92);
}

.secondary{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}

/* inputs */
input[type="text"], input[type="email"], input[type="password"], select, textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.92) !important;
  padding: 10px 12px;
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.45); }

/* pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;

  border: 1px solid rgba(243,200,106,.20) !important;
  background: rgba(0,0,0,.22) !important;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.86) !important;
}

/* stars tiles */
.stars-grid{ gap: 18px; }
.star-tile .star-photo{
  border-radius: 16px;
  border: 1px solid rgba(243,200,106,.20);
  background: rgba(0,0,0,.25);
}
.star-tile:hover .star-photo{
  box-shadow: 0 22px 55px rgba(0,0,0,.60);
}

/* footer */
footer{
  background: rgba(0,0,0,.35) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
footer a{ color: rgba(243,200,106,.95) !important; }
footer a:hover{ color:#ffd98e !important; }

/* scrollbar */
*{
  scrollbar-color: rgba(243,200,106,.35) rgba(0,0,0,.22);
  scrollbar-width: thin;
}
/* ==========================================================
   Block 2/3 – Backdrop + Whites + Autofill + Feed + Auth + Notifs
   ========================================================== */

/* cosmic backdrop */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image: url("/assets/img/bg/cosmic-gold.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: .85;
  filter: saturate(1.20) contrast(1.1) brightness(.9);
  transform: scale(1.05);
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events:none;

  background:
    radial-gradient(1200px 800px at 35% 18%, rgba(243,200,106,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 22%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1800px 1200px at 50% 95%, rgba(0,0,0,.92), transparent 70%),
    linear-gradient(180deg, rgba(8,10,18,.75), rgba(5,6,10,.95));
}

.page, .site-header, main.layout, footer{
  position: relative;
  z-index: 1;
}

/* ==========================================================
   KILL WHITE BOXES (generic) – safe
   ========================================================== */

.card,
.panel,
.box,
.item,
.row,
.list-item,
.feed-row,
.star-row,
.my-star-item,
.notification,
.notification-item,
.comment,
.comment-box,
.comment-form,
.thread,
.thread-item,
.notif-menu,
.notif-item,
.dm-message{
  background: var(--glass) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  color: var(--text) !important;
  backdrop-filter: blur(12px);
}

/* textareas / composers */
textarea,
.comment-form textarea,
.dm-input textarea,
.feed textarea{
  background: rgba(0,0,0,.45) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* inline white backgrounds – only if they are white-ish */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:white"],
[style*="background: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:white"],
[style*="background-color: white"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background:#f6f6f6"],
[style*="background: #f6f6f6"],
[style*="background-color:#f6f6f6"],
[style*="background-color: #f6f6f6"]{
  background: rgba(0,0,0,.42) !important;
  background-color: rgba(0,0,0,.42) !important;
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}

/* inline “dark text” that stays unreadable (your screenshot shows #333/#666) */
[style*="color:#333"],
[style*="color: #333"],
[style*="color:#555"],
[style*="color: #555"],
[style*="color:#666"],
[style*="color: #666"]{
  color: rgba(255,255,255,.78) !important;
}

/* ==========================================================
   FIX: HOME FEED comment bars + inputs (where it was white)
   ========================================================== */

main.layout .feed-item input,
main.layout .feed-item textarea,
main.layout .feed-item .comment-preview,
main.layout .feed-item .comment-snippet,
main.layout .feed-item .comment,
main.layout .feed-item .comment-box,
main.layout .feed-item .comment-form{
  background: rgba(0,0,0,.42) !important;
  background-color: rgba(0,0,0,.42) !important;
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}

/* contenteditable fallback */
main.layout [contenteditable="true"]{
  background: rgba(0,0,0,.42) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}

/* ==========================================================
   FIX: BROWSER AUTOFILL (Chrome/Edge/Chromium + Firefox)
   ========================================================== */

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  caret-color: rgba(255,255,255,.92) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.42) inset !important;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.42) inset !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.45) inset !important;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.45) inset !important;
}

input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill{
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.42) inset !important;
  -moz-text-fill-color: rgba(255,255,255,.92) !important;
  caret-color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}

/* select option background */
select option{
  background: #0b0f16 !important;
  color: rgba(255,255,255,.92) !important;
}

/* file input */
input[type="file"]{
  background: rgba(0,0,0,.30) !important;
  color: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
}
input[type="file"]::file-selector-button{
  border-radius: 12px !important;
  border: 1px solid rgba(243,200,106,.28) !important;
  background: rgba(243,200,106,.12) !important;
  color: rgba(255,255,255,.92) !important;
  padding: 8px 10px !important;
  cursor:pointer !important;
}

/* ==========================================================
   NOTIFS
   ========================================================== */

.notif-btn{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.notif-badge{
  background: rgba(243,200,106,.12) !important;
  border-color: rgba(243,200,106,.25) !important;
  color: rgba(255,255,255,.92) !important;
}
.notif-item{
  box-shadow:none !important;
  border-radius: 0 !important;
}
.notif-item.unread{ background: rgba(255,255,255,.05) !important; }
.notif-menu-head{
  background: rgba(0,0,0,.22) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* ==========================================================
   AUTH – login/register
   ========================================================== */

.auth-layout{
  min-height: calc(100vh - 80px);
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 42px 16px;
}

.auth-layout .content{
  max-width: 520px;
  width: 100%;
  padding: 26px 26px 18px;
  border-radius: 26px !important;

  background: rgba(8,10,18,.52) !important;
  border: 1px solid rgba(243,200,106,.22) !important;
  box-shadow:
    0 40px 140px rgba(0,0,0,.78),
    inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: auto !important;
}

.auth-layout h1,
.auth-layout h2{
  text-align:center;
  margin: 0 0 14px 0;
  font-size: 28px;
  letter-spacing: .2px;
}

.auth-layout form{ display:grid; gap: 12px; }

.auth-layout input[type="email"],
.auth-layout input[type="password"],
.auth-layout input[type="text"]{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  height: 42px;
}

.auth-layout button,
.auth-layout input[type="submit"]{
  height: 44px;
  border-radius: 14px;
  background: rgba(243,200,106,.20) !important;
  border: 1px solid rgba(243,200,106,.38) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

.auth-layout button:hover,
.auth-layout input[type="submit"]:hover{
  background: rgba(243,200,106,.28) !important;
}

/* legal text layout */
.auth-layout label,
.auth-layout .legal,
.auth-layout .terms,
.auth-layout .gdpr,
.auth-layout .cookies,
.auth-layout p{
  display:block !important;
  line-height: 1.45 !important;
  margin: 6px 0 !important;
  text-align: center;
}
.auth-layout a{
  display:inline !important;
  white-space: normal !important;
}
.auth-layout label{
  display:flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.auth-layout br{ display:none; }

/* auth mobile */
@media (max-width: 999px){
  .auth-layout{
    align-items: flex-start !important;
    padding: 14px 12px 26px !important;
    min-height: auto !important;
  }
  .auth-layout .content{ margin: 0 auto !important; }
}

/* My Stars cards */
.ms-card{
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.ms-card--alt{
  background: rgba(10,12,20,.22);
  border-color: rgba(243,200,106,.14);
}
.ms-meta{ margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.78); }
.ms-sub{ margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.66); }
.ms-badge{
  display:inline-flex;
  align-items:center;
  margin-left: 10px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243,200,106,.22);
  background: rgba(243,200,106,.10);
  color: rgba(255,255,255,.90);
}
/* ==================================================
   Block 3/3 – STAR.PHP (NO COVER) – FINAL
   ================================================== */

/* star page wrapper */
.star-page{ max-width:1120px; margin:0 auto; padding:18px 14px 40px; }

/* hide LEFT sidebar only on star page (Firefox supports :has) */
.page:has(.star-page) .sidebar{ display:none !important; }
.page:has(.star-page) .layout{ grid-template-columns: 1fr !important; }

/* HERO – start immediately (no cover) */
.star-hero{
  padding: 18px;
  border-radius: 22px;
  background: var(--glass-strong) !important;
  border: 1px solid rgba(243,200,106,.22) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.60);
}

/* ensure no cover remnants */
.star-hero::before{ display:none !important; }
.star-hero .cover{ display:none !important; }

.star-hero .hero-inner{
  margin:0 !important;
  padding:0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  display:flex;
  gap:16px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.star-hero .avatar img{
  width:160px;
  height:160px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(243,200,106,.25);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

.star-hero h1{
  font-size: 38px;
  margin:0;
  line-height: 1.05;
  letter-spacing: .2px;
}

.star-hero .subtitle{
  margin: 10px 0 12px;
  color: rgba(255,255,255,.72);
  max-width: 72ch;
}

/* meta pills container (your markup uses .meta) */
.star-hero .meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 14px;
}

/* actions */
.star-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 6px;
}

/* GRID */
.star-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
  margin-top:16px;
}

.star-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.star-page .star-card{
  background: var(--glass-strong) !important;
  border: 1px solid rgba(243,200,106,.20) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
}

.star-divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}

/* gallery */
.star-gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}

.star-thumb{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(243,200,106,.18) !important;
  background: rgba(0,0,0,.22) !important;
}

.star-thumb img{
  width:100%;
  height: 120px;
  object-fit: cover;
  display:block;
}

.star-thumb a.mthumb{ position:relative; display:block; }
.star-thumb .play{
  position:absolute;
  left:10px; bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  backdrop-filter: blur(10px);
}

/* composer */
.star-composer textarea{
  min-height: 110px;
  resize: vertical;
}

/* thread */
.thread-item{
  display:flex;
  gap:12px;
  padding: 12px;
  border-radius: 16px !important;
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

.thread-avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(243,200,106,.12);
  border: 1px solid rgba(243,200,106,.18);
  flex: 0 0 38px;
}

.thread-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.thread-time{ font-size: 12px; color: rgba(255,255,255,.60) !important; }
.thread-text{ line-height: 1.55; }

/* kill white inline buttons inside star page */
.star-page .star-btn[style*="background:#fff"],
.star-page .star-btn[style*="background: #fff"],
.star-page .star-btn[style*="background:white"],
.star-page .star-btn[style*="background: white"],
.star-page button[style*="background:#fff"],
.star-page button[style*="background: #fff"],
.star-page button[style*="background:white"],
.star-page button[style*="background: white"]{
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(243,200,106,.18) !important;
}

/* share link input */
.star-side input[type="text"][readonly]{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px;
}

/* responsive */
@media (max-width: 980px){
  .star-grid{ grid-template-columns: 1fr; }
  .star-gallery{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .star-hero .hero-inner{ align-items:flex-start; }
  .star-hero .avatar img{ width:100%; height:220px; }
  .star-hero h1{ font-size:30px; }
  .star-gallery{ grid-template-columns: repeat(2, 1fr); }
  .star-thumb img{ height: 130px; }
}