/* ==================================================
   TABLE OF CONTENTS
    1.  Variables & Tokens — Light Mode
    3.  Base Reset & Typography
    4.  Layout & Containers
    8.  Buttons & Actions
    9.  Forms & Inputs
   10.  Flash Messages, Alerts & Badges
   11.  Tables
   12.  Pills & Tags
   13.  Animations
   14.  Landing Page
        Avatar
        Status Bar & Online
        Gallery
        Site Footer
        Misc (manage-tag-pill, fieldset, late overrides)
    15. Floating Dock
   ================================================== */

/* ==================================================
   1. VARIABLES & TOKENS — LIGHT MODE
   ================================================== */
:root {
    --h-red: 350; --s-red: 68%;
    --h-gold: 41; --s-gold: 62%;
    --h-surface: 220; --s-surface: 15%;
    --container: 1120px; --container-admin: 1280px; --container-wide: 1400px;
    --gutter: 1rem; --gutter-lg: 1.5rem;
    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-pill: 999px;

  --bg: hsl(220, 20%, 96%);
  --bg: #fcfbfb;
  --text: hsl(0, 0%, 18%);
  --text: #272625;
  --surface: #ffffff;
  --border: hsla(0, 0%, 0%, 0.10);

  --input-bg: var(--surface);
  --input-border: rgba(0, 0, 0, 0.18);
  --input-text: var(--text);
  --focus: #c9962a;

  --primary: #4B2C5E;
  --primary-hover: hsl(var(--h-red), var(--s-red), 25%);
  --accent: hsl(var(--h-gold), var(--s-gold), 47%);
  
  --secondary: #FFF;

  --btn-bg: hsl(275, 36%, 27%);
  --btn-hover-bg: hsl(277, 37%, 19%);
  --btn-text: #F9F8F3;
  --btn-focus-ring: hsla(var(--h-gold), var(--s-gold), 47%, 0.4);
  --btn-disabled-bg: hsl(220, 15%, 85%);
  --btn-disabled-text: #999;
  --btn-active-scale: 0.98;
  --btn-loading-bg: #4a2020;
  --btn-loading-text: #ddd;
  --btn-spinner: #c9962a;
  
  --notice-box-bg: rgba(255, 255, 234, 0.4);
  --notice-box-border: rgba(242, 242, 217,0.7);
  --notice-box-text: #585853;
  
    

--error-h: 350;
--error: hsl(var(--error-h), 45%, 45%);
--error-bg: hsl(var(--error-h), 40%, 96%);
--success-h: 152;
--success: hsl(var(--success-h), 35%, 35%);
--success-bg: hsl(var(--success-h), 30%, 95%);

--text-muted: #aaaeb7;
  
  --dock-safe-zone: 165px;

  --flash-error-bg: #fdecea;
  --flash-error-text: #7a1c1c;

  --nav-bg: #1e1a26;
  --nav-text: #f0ece4;
  --nav-hover-bg: hsla(var(--h-gold), var(--s-gold), 47%, 0.18);
  --nav-hover-text: #f5dfaa;
  --nav-focus-ring: rgba(201, 150, 42, 0.35);

  --admin-subnav-bg: #6e1520;
  --admin-subnav-border: rgba(255,255,255,0.14);
  --admin-subnav-hover: rgba(255,255,255,0.14);
  --admin-subnav-current: rgba(255,255,255,0.24);

  --table-head-bg: hsl(var(--h-red), var(--s-red), 32%);
  --table-head-text: #fff;

--pill-bg:              #f0edf3;
--pill-text:            #7a6a85;
--pill-border:          #ddd6e4;
--pill-hover-bg:        #e4dfe9;
--pill-hover-border:    #c8bdd4;
--pill-active-bg:       #4B2C5E;
--pill-active-text:     #ffffff;
--pill-active-hover-bg: #3a2049;

  --profile-card-radius: var(--radius-md);
  --profile-section-gap: 2rem;
  --profile-pill-bg: rgba(0,0,0,0.06);
  --profile-pill-text: #444;
  --profile-accent: hsl(var(--h-red), var(--s-red), 32%);
  --profile-gold: #ffa600;
  --interest-bg: rgba(139,26,26,0.08);
  --interest-text: #6b1414;
  --interest-border: rgba(139,26,26,0.22);
  --interest-active-bg: hsl(var(--h-red), var(--s-red), 32%);
  --interest-active-text: #fff;
  
  /* Glass Effect Variables */
    --glass-background: rgba(255, 255, 255, 0.7);
    --glass-blur: 10px;
    --glass-border: rgba(255, 255, 255, 0.4);
    
    /* Branding Glow Variables */
    --brand-glow-color: rgba(255, 64, 129, 0.15); /* The pink tint */
    --brand-glow-hover: rgba(255, 64, 129, 0.3);  /* Stronger for hover */
    --brand-border-hover: rgba(255, 64, 129, 0.5);
 
}


/* ==================================================
   3. BASE RESET & TYPOGRAPHY
   ================================================== */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; }
html,body { margin: 0; padding: 0; width: 100%; overflow-x: visible; }
body { background-color: var(--bg); color: var(--text); font-family: 'Inter',system-ui,-apple-system,sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; }
img { max-width: 100%; height: auto; display: block; }
h1 { text-align: left; margin: 0 0 2rem 0; text-wrap: balance; }
h1,h2,h3,h4 { line-height: 1.5; font-weight: 700; color: var(--text); }


a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent); }
p { margin-block: 0.2rem; line-height: 1; }

h1, h2, h3, .search-title {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px; /* Adds a bit of luxury spacing */
}

.h1{font-size: 1.0rem;}

.sub-heading {
    font-size: 0.9rem;
    margin-top: 0px;
    color: var(--text-muted);
}

/* ==================================================
   4. LAYOUT & CONTAINERS
   ================================================== */
.page { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; overflow-x: hidden; }
.page.page--admin { max-width: var(--container-admin); }
@media (min-width: 900px) { .page { padding-inline: var(--gutter-lg); } }
.main { padding-block: 2rem; padding-top: 1rem}
.full-bleed { width: 100%; margin: 0; padding: 0; }
.card { max-width: 100%; margin-inline: auto; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 6px -1px rgba(0,0,0,0.078); box-sizing: border-box; margin-bottom: 12px; }
@media (max-width: 700px) { .card { margin-bottom: 1rem; } }
.page--admin .card { max-width: 100% !important; width: 100%; }
.card h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.page-actions { max-width: 420px; margin: 1rem auto; text-align: center; }
.text-right { text-align: right; }
.muted { color: #666; }

/* ==================================================
   8. BUTTONS & ACTIONS
   ================================================== */
button:not(.sidebar__link):not(.sidebar__group-trigger):not(.sidebar__pin):not(.nav-mobile-menu__trigger):not(.nav-hamburger):not(.chat-msg__del):not(.msg-photo__btn):not(.explore-card__dismiss):not(.group-member-result):not(.chat-group-search-result):not(.chat-compose__send):not(.dash-status-widget__btn):not(.inbox-row__delete):not(.dash-status-widget__icon-btn),
.btn,
input[type="submit"],
input[type="button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  font-family: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-text);
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; user-select: none; position: relative;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1); touch-action: manipulation;
}
button:not(.sidebar__link):not(.sidebar__group-trigger):not(.sidebar__pin):not(.nav-mobile-menu__trigger):not(.nav-hamburger):hover,
.btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: var(--btn-hover-bg); transform: translateY(-1px);
}

button,.btn,input[type="submit"],input[type="button"] { width: 100%;
font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none; }
@media (min-width: 600px) { button,.btn,input[type="submit"],input[type="button"] { width: auto; } }



button:active,.btn:active,input[type="submit"]:active,input[type="button"]:active { transform: scale(var(--btn-active-scale,0.98)); }
button:focus-visible,.btn:focus-visible,input[type="submit"]:focus-visible,input[type="button"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-focus-ring); }
button:disabled,.btn:disabled,input[type="submit"]:disabled,input[type="button"]:disabled { background: var(--btn-disabled-bg) !important; color: var(--btn-disabled-text) !important; cursor: not-allowed; transform: none; opacity: 0.6; border-color: transparent; }

/* Primary */
.btn--primary {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0.8rem 2rem; 
    background: var(--primary); 
    color: var(--btn-text); 
    text-decoration: none; 
    border-radius: var(--radius); 
    font-size: 1rem; 
    font-weight: 700; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
    width: auto;
}


.btn--primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

/* Ghost — bordered, transparent */
.btn--ghost { background: transparent; color: var(--btn-bg); border: 1.5px solid var(--btn-bg); }
.btn--ghost:hover { background: rgba(139,26,26,0.07); color: var(--btn-bg); transform: none; }

/* Profile ghost */
.btn--profile-ghost { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn--profile-ghost:hover { background: rgba(139,26,26,0.07); }

/* Accent */
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { filter: brightness(1.1); }

/* Secondary */
.btn--secondary-style { background: hsla(var(--h-red),var(--s-red),32%,0.1); color: var(--primary); }
.btn--secondary-style:hover { background: hsla(var(--h-red),var(--s-red),32%,0.18); }

/* Danger */
.btn--danger { background: rgba(190,30,30,0.85); color: #fff; border-color: transparent; }
.btn--danger:hover { background: rgba(190,30,30,1); }

/* Approve */
.btn--approve { background: rgba(25,135,84,0.9); color: #fff; width: 100%; }
.btn--approve:hover { background: rgba(25,135,84,1); }

/* Reject */
.btn--reject-toggle { background: rgba(190,30,30,0.1); color: #8B1A1A; border: 1.5px solid rgba(190,30,30,0.3); width: 100%; }
.btn--reject-toggle:hover { background: rgba(190,30,30,0.18); }
.btn--reject-confirm { background: #8B1A1A; color: #fff; }
.btn--reject-confirm:hover { background: #a02020; }

/* Success/Warning */
.btn--success { background: #22c55e; color: #fff; border-color: #22c55e; }
.btn--success:hover { background: #16a34a; border-color: #16a34a; }
.btn--warning { background: #d97706; color: #fff; border-color: #d97706; }
.btn--warning:hover { background: #b45309; border-color: #b45309; }

/* Active state */
.btn--active { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn--active:hover { opacity: 0.9; }

/* Size modifiers */
.btn--sm { min-height: 36px; padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.btn--lg { min-height: 52px; padding: 1rem 2rem; font-size: 1.05rem; }
.btn--xs { padding: 0.2em 0.55em; font-size: 0.72rem; border-radius: var(--radius-sm); }

/* Loading */
button[aria-busy="true"],.btn--loading { background: var(--btn-loading-bg) !important; color: var(--btn-loading-text) !important; pointer-events: none; cursor: wait; }
button[aria-busy="true"]::after,.btn--loading::after { content: ""; width: 1.1rem; height: 1.1rem; border: 2px solid transparent; border-top-color: var(--btn-spinner); border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 4px; }

/* Icon button */
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: transparent; color: var(--text); }
.btn-icon:hover { background: hsla(var(--h-surface),var(--s-surface),50%,0.15); }
.btn-icon--danger { color: red; }

/* Landing secondary button */
.btn-secondary { display: inline-block; padding: 0.8rem 2rem; background: transparent; color: var(--text); text-decoration: none; border-radius: var(--radius); font-size: 1rem; font-weight: 600; border: 2px solid var(--input-border); transition: border-color 0.15s ease, background 0.15s ease; }
.btn-secondary:hover { border-color: var(--focus); background: rgba(0,0,0,0.03); }

/* Members pill toggles */
.members-pill-toggle { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); border: 1px solid var(--border,rgba(0,0,0,0.15)); background: transparent; color: var(--text,inherit); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; white-space: nowrap; width: auto; margin: 0; }
.members-pill-toggle:hover { border-color: var(--btn-bg,#8b1a1a); color: var(--btn-bg,#8b1a1a); background: rgba(139,26,26,0.08); transform: none; }
.members-pill-toggle--active { background: var(--btn-bg,#8b1a1a); border-color: var(--btn-bg,#8b1a1a); color: var(--btn-text,#fff); }
.members-pill-toggle--active:hover { opacity: 0.82; background: var(--btn-bg,#8b1a1a); color: var(--btn-text,#fff); }


/* ==================================================
   9. FORMS & INPUTS
   ================================================== */
form { display: block; width: 100%; margin: 0; padding: 0; }
.photo-detail-love-form { width: auto; display: inline-flex; }
:where(.card form,.login-form-wrap form,.profile-edit-form,.settings-section__body form,.msg-settings form,.profile-edit-page form) { display: grid; gap: 1.25rem; max-width: 420px; margin-inline: auto; padding-block: 1rem; }
.page--admin :where(.card form,form) { max-width: 100% !important; width: 100% !important; }
.table td form,.table th form,.chat-compose__form,.chat-action-form,.quick-form,.inbox-delete-form,.unblock-inline { display: inline; gap: 0; padding: 0; margin: 0; max-width: none; width: auto; }
.form-group,.form-field { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.label { font-weight: 600; font-size: 0.9rem; color: var(--text); cursor: pointer; }

input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],input[type="search"],input[type="date"],textarea,select {
  width: 100%; display: block; box-sizing: border-box;
  padding: 0.85rem 1rem; min-height: 48px;
  background-color: var(--input-bg); color: var(--input-text);
  border: 1px solid var(--input-border); border-radius: var(--radius);
  font-size: 1rem; font-family: inherit; line-height: 1.5;
  transition: border-color 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), background-color 0.2s ease;
  appearance: none; -webkit-appearance: none;
}
textarea { min-height: 120px; resize: vertical; padding-top: 1rem; }
input:focus,textarea:focus,select:focus { outline: none; border-color: var(--focus); background-color: var(--surface); box-shadow: 0 0 0 3px var(--btn-focus-ring); }
::placeholder { color: var(--text); opacity: 0.5; }
.has-error input,.has-error textarea,.has-error select,.input--error { border-color: var(--error) !important; background-color: var(--error-bg) !important; }
.field-error-msg,.error-text { color: var(--error); font-size: 0.85rem; font-weight: 700; margin-top: 0.25rem; }
.checkbox-group,.control-group { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.5rem; cursor: pointer; min-height: 44px; }
input[type="checkbox"],input[type="radio"] { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; padding-right: 2.5rem; }
input:disabled,textarea:disabled,select:disabled { background-color: var(--btn-disabled-bg); color: var(--btn-disabled-text); cursor: not-allowed; opacity: 0.7; }
.page--edit-profile form,.page--edit-profile .card { max-width: 100%; width: 100%; margin-inline: 0; }
.input--short { max-width: 180px; }
.field-hint { display: block; font-size: 0.82rem; color: var(--profile-pill-text,#888); margin-top: 0.2rem; }
.field-hint-inline { font-size: 0.88rem; font-weight: 400; opacity: 0.7; }
.field-hint--warning { color: var(--error,#c0392b); font-weight: 600; }
.field-required { color: var(--error); margin-left: 0.1rem; }
.required-mark { display: inline-block; color: var(--error,#b01c1c); font-size: 0.85em; margin-left: 0.1em; }
.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.form-hint--guidelines { margin-bottom: 1rem; }
label[for="location"],label[for="postcode"],label[for="gender"],label[for="bio"],label[for="relationship_status"],label[for="looking_for"],label[for="sexuality"],label[for="height_cm"],label[for="ethnicity"],label[for="body_type"],label[for="smoker"],label[for="drinker"],label[for="tattoos"] { display: flex; flex-direction: row; align-items: center; gap: 0.2em; margin-bottom: 0.5em; }

/* ==================================================
   10. FLASH MESSAGES, ALERTS & BADGES
   ================================================== */
.error,.error-message,.field-error-msg { color: var(--error); font-size: 0.85rem; font-weight: 600; }
.success,.success-message { color: var(--success); margin-bottom: 1rem; }
.form-errors { max-width: 420px; margin-inline: auto; padding: 1.25rem; margin-bottom: 1.5rem; background: var(--error-bg); border: 1px solid hsla(var(--error-h),73%,40%,0.2); color: var(--error); border-radius: var(--radius); }
.form-errors p { margin: 0; font-weight: 700; }
.form-errors ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.flash { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: var(--radius); box-sizing: border-box; border: 1px solid transparent; }
.flash-success { background-color: var(--success-bg); color: var(--success); border-color: hsla(var(--success-h),61%,26%,0.15); }
.flash-error { background-color: var(--error-bg); color: var(--error); border-color: hsla(var(--error-h),73%,40%,0.15); }
.badge { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; }
.alert { padding: 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; }
.alert-warning { background: hsl(45,100%,96%); border-color: hsl(45,100%,85%); color: hsl(45,100%,20%); }
.unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-text); font-size: 0.72rem; font-weight: 700; }


/* ==================================================
   11. TABLES
   ================================================== */
.table-container { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; table-layout: fixed; min-width: 0; text-align: left; border-collapse: collapse; background-color: transparent; border: 0; }
.table td form,.table th form { display: inline; padding: 0; margin: 0; max-width: none; }
.table th,.table td { padding-block: 0.6rem; padding-inline: 0.75rem; border-bottom: 1px solid var(--input-border); vertical-align: middle; text-align: left; overflow: hidden; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.table td:nth-child(3) .pill { max-width: 100%; }
.table td pre { display: block; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: auto; }
.table tbody tr:last-child td { border-bottom: 0; }
.table thead th { background: var(--table-head-bg); color: var(--table-head-text); font-weight: 700; border-bottom: 0; }
.table tbody tr:nth-child(even) { background: rgba(0,0,0,0.03); }

.table.table--audit { table-layout: fixed; }
.table.table--audit th:nth-child(1),.table.table--audit td:nth-child(1) { width: 200px; }
.table.table--audit th:nth-child(2),.table.table--audit td:nth-child(2) { width: 170px; }
.table.table--audit th:nth-child(3),.table.table--audit td:nth-child(3) { width: 290px; }
.table.table--audit th:nth-child(5),.table.table--audit td:nth-child(5) { width: 140px; }
.table.table--audit th:nth-child(4),.table.table--audit td:nth-child(4) { width: auto; }
.table.table--audit td pre { display: block; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: auto; }

.table-mini { width: 100%; border-collapse: collapse; margin-top: 0.5rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm); overflow: hidden; }
.table-mini th,.table-mini td { padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--input-border); font-size: 0.9rem; }
.table-mini thead th { background: rgba(0,0,0,0.06); font-weight: 800; }
.table-mini tbody tr:nth-child(odd) { background: rgba(0,0,0,0.02); }
.table-mini tbody tr:nth-child(even) { background: rgba(0,0,0,0.05); }

.admin-interests-table { width: 100%; min-width: 0; table-layout: fixed; }
.admin-interests-table th:nth-child(2),.admin-interests-table td:nth-child(2) { width: 90px; text-align: center; }
.admin-interests-table th:nth-child(3),.admin-interests-table td:nth-child(3) { width: 220px; }
.admin-interests-table th:nth-child(1),.admin-interests-table td:nth-child(1) { width: auto; }
.admin-interests-table td:nth-child(1) { overflow-wrap: anywhere; word-break: break-word; }
.admin-interests-table th,.admin-interests-table td { padding-block: 0.65rem; padding-inline: 0.75rem; vertical-align: middle; }
.admin-interests-table td.col-actions .btn--sm { min-height: 38px; padding: 0.5rem 0.9rem; line-height: 1; }
.admin-interests-table .interest-row__rename-form { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.admin-interests-table .interest-row__rename-input { flex: 1 1 240px; min-width: 180px; min-height: 40px; padding: 0.55rem 0.75rem; }
.admin-interests-table .interest-row__rename-form .btn--sm { min-height: 38px; padding: 0.5rem 0.9rem; }
.admin-interests-table .interest-row__rename-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px hsla(var(--h-gold),var(--s-gold),47%,0.25); }

/* ==================================================
   12. PILLS & TAGS
   ================================================== */
.pill { display: inline-flex; font-size: 0.8rem; font-weight: 600; justify-content: center; line-height: 1; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; }
.pill.blocked { background: var(--pill-red-bg); color: var(--pill-red-text); }
.pill.clear { background: var(--pill-green-bg); color: var(--pill-green-text); }
.pill--free { background: rgba(224,224,224,0.92); color: #555; }
.pill--sub { background: rgb(99,171,226); color: #fff; }
.pill--vip { background-color: hsla(var(--h-gold),var(--s-gold),47%,0.1); color: var(--accent); border-color: hsla(var(--h-gold),var(--s-gold),47%,0.2); transition: all 0.2s ease; cursor: default; }
.pill--gallery { background: rgba(99,102,241,.12); color: #4338ca; }
.pill--interest { background: rgba(16,185,129,.12); color: #065f46; }
.pill--escalated { background: #fff3cd; color: #856404; border: 1px solid #ffc107; padding: 0.2em 0.6em; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.pill--warning { background: #fff3cd; color: #856404; border: 1px solid #ffc107; padding: 0.2em 0.6em; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; }
.meta-pill { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--profile-pill-bg); color: var(--profile-pill-text); border-radius: var(--radius-pill); padding: 0.3rem 0.75rem; font-size: 0.9rem; font-weight: 500; }
.meta-pill__icon { font-style: normal; font-size: 1em; line-height: 1; }
.meta-pill--free { background: rgba(224,224,224,0.92); color: #555; }
.meta-pill--sub { background: rgba(99,171,226,1); color: #fff; }
.meta-pill--vip { background: black; color: #fff; }
.meta-pill--sm { font-size: 0.78rem; padding: 0.2rem 0.5rem; }

.members-filter-pills-group { margin-top: 1rem; }
.members-filter-pills-group .members-filter-label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted,#888); }
.members-filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.members-filter-cap-notice { margin-top: 0.35rem; font-size: 0.78rem; color: var(--muted,#888); }
.members-filter-cap-notice a { color: var(--btn-bg,#8b1a1a); font-weight: 600; text-decoration: none; }
.members-filter-cap-notice a:hover { text-decoration: underline; }
.members-quickfilter { border-color: hsl(350,35%,45%); color: hsl(350,35%,65%); }

/* ==================================================
   13. ANIMATIONS
   ================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(46,158,91,0.6); } 50% { box-shadow: 0 0 0 6px rgba(46,158,91,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); } }
@keyframes admin-pending-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.75; } }
@keyframes verified-pulse { 0%,100% { box-shadow: 0 0 4px 1px rgba(201,168,76,0.4); } 50% { box-shadow: 0 0 10px 4px rgba(201,168,76,0.8); } }


/* ==================================================
   AVATAR
   ================================================== */
.avatar-initial { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: hsl(350,55%,45%); color: var(--btn-text); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; line-height: 1; }
.avatar-initial--lg { width: 52px; height: 52px; font-size: 1.3rem; }
.avatar-initial--group { font-size: 1.35rem; }

/* ==================================================
   STATUS BAR & ONLINE
   ================================================== */
.status-bar__bell { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; color: #fff; }
.status-bar__bell:hover { color: #fff; }
.status-bar__bell-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; font-size: 0.7rem; font-weight: 700; line-height: 1; border-radius: var(--radius-pill); background: #c3423f; color: #fff; }
.status-bar__bell-badge--inline { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: #e53e3e; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; vertical-align: middle; margin-left: 0.25rem; }
.last-seen { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted,#888); margin: 0.25rem 0 0.5rem; }
.last-seen--online { color: #2e9e5b; font-weight: 600; }
.online-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2e9e5b; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(46,158,91,0.3); animation: pulse-dot 1.5s ease-in-out infinite; }

/* ==================================================
   14. LANDING PAGE
   ================================================== */
.landing { max-width: 860px; margin: 0 auto; padding: 0 0 3rem; }
.hero { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: clamp(0.2rem,8vw,0.5rem); text-align: center; align-items: center; }
.hero h1 { line-height: 1.2; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.2fr 1fr; text-align: left; } }
.hero__content h1 { text-align: inherit; color: var(--primary); }
.hero__content p { font-size: clamp(1.1rem,2vw,1.25rem); color: var(--text); max-width: 540px; margin-inline: auto; opacity: 0.9; }
@media (min-width: 900px) { .hero__content p { margin-inline: 0; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; text-align: left; justify-content: center; }
@media (min-width: 900px) { .hero__actions { justify-content: flex-start; } }
.hero__image img { border-radius: var(--radius); box-shadow: 0 20px 40px hsla(0,0%,0%,0.1); animation: slideUp 0.8s cubic-bezier(0.16,1,0.3,1); }
.landing-divider { border: none; border-top: 1px solid var(--border); margin: 0 1rem; }
.how-it-works { padding: 2.5rem 1rem; text-align: center; }
.how-it-works h2 { font-size: 1.5rem; margin: 0 0 2rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1.5rem; text-align: left; }
.step { background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius-md); padding: 1.25rem 1.25rem 1.5rem; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--btn-bg); color: #fff; font-weight: 800; font-size: 1rem; margin-bottom: 0.75rem; }
.step h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.step p { margin: 0; font-size: 0.95rem; color: #666; line-height: 1.5; }
.privacy { margin: 0 1rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius-md); display: flex; gap: 1.25rem; align-items: flex-start; }
.privacy-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.privacy-text h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.privacy-text p { margin: 0; font-size: 0.95rem; color: #666; line-height: 1.5; }
.tiers { padding: 1rem 1rem 1rem; text-align: center; }
.tiers h2 { font-size: 1.5rem; margin: 0 0 1rem 0; padding: 0; }
.tiers__subtitle { font-size: 0.95rem; color: #666; margin: 0 0 2rem; }
.tier-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.25rem; text-align: left; }
.tier-card { border-radius: var(--radius-md); padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; position: relative; border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.tier-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.tier-card--free { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.10); }
.tier-card--sub { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.25); }
.tier-card--vip { background: rgba(161,98,7,.07); border-color: rgba(161,98,7,.30); }
.tier-card__badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 800; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); align-self: flex-start; }
.tier-card--free .tier-card__badge { background: rgba(0,0,0,.08); color: #444; }
.tier-card--sub .tier-card__badge { background: rgba(37,99,235,.14); color: #1d4ed8; }
.tier-card--vip .tier-card__badge { background: rgb(205,102,0); color: #573000; }
.tier-card__name { font-size: 1.3rem; font-weight: 800; margin: 0; line-height: 1.2; }
.tier-card--free .tier-card__name { color: #333; }
.tier-card--sub .tier-card__name { color: #1d4ed8; }
.tier-card--vip .tier-card__name { color: #613400; }
.tier-card__price { font-size: 0.9rem; opacity: 0.6; margin: -0.5rem 0 0; }
.tier-card__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.tier-card__features li { font-size: 0.92rem; display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.4; }
.tier-card__features li .feat-icon { flex-shrink: 0; font-size: 0.85rem; margin-top: 0.05rem; }
.feat-icon--yes { color: #16a34a; } .feat-icon--no { color: #9ca3af; } .feat-icon--star { color: #d97706; }
.tier-card__cta { display: inline-block; text-align: center; padding: 0.7rem 1.25rem; border-radius: var(--radius); font-size: 0.95rem; font-weight: 700; text-decoration: none; transition: opacity 0.15s ease, transform 0.15s ease; margin-top: auto; }
.tier-card__cta:hover { opacity: 0.88; transform: translateY(-1px); }
.tier-card--sub .tier-card__cta { background: #1d4ed8; color: #fff; }
.tier-card--vip .tier-card__cta { background: linear-gradient(135deg,#d97706,#92400e); color: #fff; }
.tier-card__popular { position: absolute; top: -0.65rem; right: 1rem; background: linear-gradient(135deg,#d97706,#92400e); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); letter-spacing: 0.04em; text-transform: uppercase; }

/* Site footer */
.site-footer {
    position: relative;
    margin: 0;
    padding-top: 20px; 
    text-align: center;
    color: #ffffff;
    background: #000 url("../img/footer-silk.jpg") no-repeat center bottom;
    background-size: cover;
    box-shadow: inset 0 80px 60px -20px rgba(0,0,0,1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer h2 {
    font-family: 'Playfair Display', serif;
    letter-spacing: 4px;
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 8px;
}

.site-footer .footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    margin: 20px 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.site-footer .tagline{
  margin-bottom: 10px; 
}

.site-footer .disclaimer {
    margin-top: 20px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.8;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}



.manage-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.manage-tag-pill:hover {
    border-color: var(--btn-bg);
    color: var(--btn-bg);
}

.manage-tag-pill--active {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: #fff;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.settings-card--collapsed .settings-card__body { display: none; }
.settings-card__body { padding: 1.25rem; }

/* ==================================================
   15. FLOATING DOCK
   ================================================== */
    /* FINAL FLOATING NAV DOCK */
    .mobile-nav-dock {
        position: fixed !important;
        bottom: 25px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        max-width: 420px !important;
        height: 70px !important;
        z-index: 9999 !important;
background: rgba(255, 255, 255, 0.17);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    @media (min-width: 769px) {
        .mobile-nav-dock {
            display: none !important;
        }
    }

    .dock-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .dock-item i {
        font-size: 24px !important;
        color: #222 !important;
        margin-bottom: 2px !important;
        display: inline-block !important;
    }

    .dock-item span {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #444 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .dock-item .ph-plus-circle {
        font-size: 38px !important;
        color: #ff4081 !important;
        margin-bottom: 0 !important;
        animation: upload-pulse 3s infinite ease-in-out !important;
    }

    .dock-item.active i,
    .dock-item.active span {
        color: #ff4081 !important;
        opacity: 1 !important;
    }

    .dock-item.active::after {
        content: '';
        width: 4px;
        height: 4px;
        background: #ff4081;
        border-radius: 50%;
        margin-top: 2px;
    }

    @media (max-width: 991px) {
        .nav-pill-item {
            position: relative;
        }

        .nav-pill-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff2d78;
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 10px;
            border: 2px solid rgba(15, 15, 15, 0.8);
            min-width: 18px;
            text-align: center;
            line-height: 1;
        }
    }

    @keyframes upload-pulse {
        0% {
            transform: scale(1);
            filter: drop-shadow(0 0 0px rgba(255, 64, 129, 0));
        }
        50% {
            transform: scale(1.15);
            filter: drop-shadow(0 0 12px rgba(255, 64, 129, 0.7));
        }
        100% {
            transform: scale(1);
            filter: drop-shadow(0 0 0px rgba(255, 64, 129, 0));
        }
    }

    footer {
        padding-bottom: 190px !important;
    }

    .pulse-button {
        display: inline-block !important;
        animation: upload-pulse 2s infinite ease-in-out !important;
        transform-origin: center !important;
        will-change: transform;
    }

.hero-title { margin: 0 !important; font-size: 2.6rem; }
/* ==================================================
   SETTINGS HERO (shared across settings, feed, members, profile, admin)
   ================================================== */
.settings-hero { position: relative; display: flex; align-items: center; gap: 1rem; margin-bottom: 4px; padding-bottom: 0}
.settings-hero__icon { font-size: 2.5rem; line-height: 1; flex-shrink: 0; }
.settings-hero__text { flex: 1; min-width: 0; }



.settings-hero__sub { margin: 0; opacity: 0.6; font-size: 0.9rem; }
.settings-hero__actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

@media (max-width: 768px) {
    .settings-hero { gap: 0.75rem; flex-wrap: wrap; }
    .settings-hero__icon { font-size: 2rem; }
    .hero-title { font-size: 1.3rem; }
    .settings-hero__actions { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
    .settings-hero__actions::-webkit-scrollbar { display: none; }
}
.settings-card--collapsed .settings-card__body { display: none; }
.settings-card__body { padding: 1.25rem; }
.settings-card__header { display: none; }


.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 6px -1px rgba(0,0,0,0.07); margin-bottom: 1rem; overflow: hidden; }
.settings-card__header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: linear-gradient(135deg, #4B2C5E 0%, #2d1432 100%); border-bottom: 1px solid rgba(201,150,42,0.10); color: #fff; }
.settings-card__header--toggle { cursor: pointer; user-select: none; }
.settings-card__header--toggle:hover { opacity: 0.9; }
.settings-card__toggle-hint { margin-left: auto; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.03em; color: var(--btn-text); opacity: 0.8; }
.settings-card__header-icon { font-size: 1.75rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.settings-card__title { margin: 0 0 0.15rem; font-size: 1rem; color: var(--btn-text); }
.settings-card__subtitle { margin: 0; font-size: 0.8rem; color: var(--btn-text); opacity: 0.8; }
.settings-card__header h2 { color: inherit !important; }

/* ==================================================
   CLEANED LATE OVERRIDES
   ================================================== */

.compose-input-wrap { position: relative; }

.status-bar { color: #fff; font-size: 0.9rem; }
.status-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.85rem; }
.status-bar__left, .status-bar__right { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.status-bar__right { margin-left: auto; justify-content: flex-end; flex-shrink: 0; }
.status-bar__item { white-space: nowrap; }
.status-bar__active { color: #5ee28d; font-weight: 600; }
.status-bar__divider { opacity: 0.4; }
.status-bar__bell { display: inline-flex; align-items: center; gap: 0.35rem; color: #fff; text-decoration: none; white-space: nowrap; }
.status-bar__bell:hover { color: #fff; opacity: 0.9; }
.status-bar__bell-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: #c3423f; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; }

@media (max-width: 700px) {
    .status-bar__inner { padding: 0.4rem 0.65rem; }
    .status-bar__left { gap: 0.5rem; min-width: 0; overflow: hidden; }
    .status-bar__item:first-child { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
    .status-bar__right { gap: 0.6rem; }
}

.ph-funnel { position: relative; top: -1px; }

.photo-detail-love-form { margin: 0; padding: 0; max-width: none; width: auto; display: inline-flex; }

.photo-detail-love-overlay {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    background: rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(4px) !important;
    border-radius: var(--radius-pill) !important;
    padding: 0.4rem 0.75rem !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    border: none !important;
    cursor: pointer !important;
    width: auto !important;
    text-decoration: none !important;
    z-index: 3 !important;
}

.photo-detail-love-overlay--loved { color: #e74c3c !important; }

.photo-detail-love-form {
    position: absolute !important;
    bottom: 8px !important;
    right: 12px !important;
    width: auto !important;
    z-index: 3 !important;
}

.photo-detail-actions { display: flex; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); gap: 1rem; }
.photo-detail-actions__btn { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 1.4rem; color: var(--text); opacity: 0.65; text-decoration: none; }


.site-header {
    background: transparent !important;
    position: sticky !important;
    top: 0;
    z-index: 999;
}


.status-bar__active {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-bar__active::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #4CAF50;
    border-radius: 50%;
    opacity: 0.8;
}

.settings-hero__header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.settings-hero .btn.btn--sm.btn--ghost {
    background: #2d1432 !important; 
    color: #ffffff !important;
    border: none !important; 
    border-radius: 100px !important; 
    padding: 8px 18px !important; 
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 12px rgba(45, 20, 50, 0.2) !important;
    text-transform: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.settings-hero .btn.btn--sm.btn--ghost:hover {
    background: #3d1b44 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(45, 20, 50, 0.25) !important;
    filter: brightness(1.1);
}

.settings-hero .btn.btn--sm.btn--ghost i, 
.settings-hero .btn.btn--sm.btn--ghost span {
    font-size: 1rem !important;
    line-height: 1 !important;
}

.settings-hero__sub {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* ==================================================
   PILLS — unified across interests, filters, tags
   ================================================== */
.interest-checkbox-label,
.interest-tag,
.interest-display-tag,
.explore-filter-pill,
.members-pill-toggle,
.filter-pill,
.tag-toggle,
.gallery-tag-pill,
.exclusion-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid;
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    background: var(--pill-bg);
    color: var(--pill-text);
    border-color: var(--pill-border);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-height: 36px;
}
.interest-checkbox-input,
.interest-tag__input,
.tag-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.interest-checkbox-label:hover,
.interest-tag:hover,
.interest-display-tag:hover,
.explore-filter-pill:hover,
.members-pill-toggle:hover,
.filter-pill:hover,
.tag-toggle:hover,
.gallery-tag-pill:hover,
.exclusion-pill:hover {
    background: var(--pill-hover-bg);
    border-color: var(--pill-hover-border);
    color: var(--pill-text);
}
.interest-checkbox-label--checked,
.interest-checkbox-label:has(input:checked),
.interest-tag--active,
.interest-tag:has(input:checked),
.explore-filter-pill--active,
.members-pill-toggle--active,
.filter-pill.active,
.tag-toggle--selected,
.tag-toggle:has(input:checked),
.exclusion-pill--excluded {
    background: var(--pill-active-bg);
    color: var(--pill-active-text);
    border-color: var(--pill-active-bg);
}
.interest-checkbox-label--checked:hover,
.interest-checkbox-label:has(input:checked):hover,
.interest-tag--active:hover,
.interest-tag:has(input:checked):hover,
.explore-filter-pill--active:hover,
.members-pill-toggle--active:hover,
.filter-pill.active:hover,
.tag-toggle--selected:hover,
.tag-toggle:has(input:checked):hover,
.exclusion-pill--excluded:hover {
    background: var(--pill-active-hover-bg);
    border-color: var(--pill-active-hover-bg);
}
.interests-checkbox-grid,
.tag-toggle-grid,
.interests-grid,
.explore-filter-pills,
.profile-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.interest-checkbox-label > input[type="checkbox"] {
    display: none !important;
}
.explore-filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-color-scheme: dark) {
  body {
/* This ensures the gradient covers the full page height */
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(180deg, #1e1c20 0%, #121212 100%);
  background-attachment: fixed;
  color: #eeeeee; /* Light text for readability */
  }
}

/* Modern Glass Notice Box */
.notice-box {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px; 
    padding: 14px 14px;
    margin-bottom: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center; /* Vertically centers the icon and text block */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.notice-box i {
    font-size: 1.2rem;
    margin-right: 6px;
    color: #ff4081 !important; 
    display: flex; /* Ensures the icon font itself is centered */
    align-items: center;
}

.notice-box p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: #636875;
    line-height: 1.2;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allows text to wrap naturally on mobile */
}

.notice-box a {
    color: #4a2d4d; 
    font-weight: 700;
    text-decoration: none;
    position: relative;
    padding: 0 4px; /* Adds 4px of horizontal breathing room */
    margin: 0 1px;  /* Adds extra separation from surrounding words */
    border-bottom: 1.5px solid rgba(74, 45, 77, 0.2); 
    transition: all 0.2s ease;
    display: inline-block;
    vertical-align: middle; /* Keeps it perfectly aligned with the baseline */
}

.notice-box a:hover {
    color: #ff4081;
    border-bottom-color: rgba(255, 64, 129, 0.5);
}