:root {--primary-bg-color: #18171c;--primary-color: #e6007e;--secondary-bg-color: #23272a;--accent-color: #eabd23;--accent-color2: #f82249;--primary-font-color: #fff;--secondary-font-color: #dedede;--border-color: #991b1b;--max-page-width: 800px;--tabbar-height: 64px;--overlay-dark-80: rgba(6, 12, 34, 0.8);--overlay-dim-70: rgba(13, 20, 41, 0.7);--gradient-primary-accent: linear-gradient(90deg, var(--primary-color), var(--accent-color2));--gradient-radial-dual: radial-gradient(circle at 15% 15%, rgba(255,255,255,.12), transparent 55%), radial-gradient(circle at 85% 75%, rgba(255,255,255,.09), transparent 60%);--tile-shadow-sm: 0 2px 6px rgba(0,0,0,.35);/* Chat theming (derived from site palette) */
    --chat-bg: #0f1013; /* darker to contrast bubbles */
    --chat-header-bg: var(--primary-color);--chat-bubble-mine: var(--primary-color);--chat-bubble-their: #004cff;}

main {max-width: 1000px;margin: auto;}

/* Utility */
.with-tabbar-offset {padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 32px);}

.visually-hidden {position: absolute !important;height: 1px;width: 1px;overflow: hidden;clip: rect(1px,1px,1px,1px);white-space: nowrap;}

.relative {position: relative;}

.dot-indicator {width: 10px;height: 10px;background: var(--accent-color2);border-radius: 50%;position: absolute;top: 4px;right: 10px;box-shadow: 0 0 0 2px rgba(0,0,0,.4);}

/* Bottom Tab Bar (native app) */
.app-tabbar {position: fixed;bottom: 0;left: 0;right: 0;height: var(--tabbar-height);background: rgba(30,30,35,.95);backdrop-filter: blur(14px);display: flex;justify-content: center;border-top: 1px solid #303036;padding-bottom: env(safe-area-inset-bottom);z-index: 1000;}

    .app-tabbar .tabbar-list {list-style: none;display: flex;padding: 0;margin: 0;width: 100%;max-width: 820px;justify-content: space-around;}

    .app-tabbar .tab-item {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 4px;padding: 6px 4px 4px;min-width: 64px;min-height: 48px;color: var(--secondary-font-color);font-size: .75rem;font-weight: 500;text-decoration: none;position: relative;}

        .app-tabbar .tab-item.active, .app-tabbar .tab-item:hover, .app-tabbar .tab-item:focus {color: var(--primary-color);}

        .app-tabbar .tab-item span[aria-hidden="true"] {font-size: 1.35rem;line-height: 1;}

    .app-tabbar .tab-label {font-size: .70rem;letter-spacing: .5px;text-transform: uppercase;}

@media (pointer:coarse) {body {padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));}}

.topbar-kas nav[role='navigation'] .icon-btn {display: inline-flex;flex-direction: column;align-items: center;gap: 2px;}

.topbar-kas .dot-indicator {width: 10px;height: 10px;background: var(--accent-color2);border-radius: 50%;top: -2px;right: -4px;}

.tab-item:focus-visible, .icon-btn:focus-visible {outline: 2px solid var(--accent-color);outline-offset: 2px;border-radius: 8px;}

body {background: var(--primary-bg-color);color: var(--primary-font-color);font-family: 'Montserrat', Arial, sans-serif;}

/* Loading indicator */
.loading-inline {display: inline-flex;align-items: center;gap: .55rem;}

.loading-text {color: var(--secondary-font-color);font-size: .9rem;}

.loading-spinner {width: var(--li-size, 28px);height: var(--li-size, 28px);border-radius: 50%;border: calc(var(--li-size, 28px) / 8) solid rgba(255,255,255,.18);border-top-color: var(--primary-color);animation: li-spin 1s linear infinite;}

@keyframes li-spin {to {transform: rotate(360deg);}}

.loading-dots {display: inline-flex;align-items: center;gap: .3rem;}

    .loading-dots .dot {width: calc(var(--li-size, 24px) / 4);height: calc(var(--li-size, 24px) / 4);background: var(--primary-color);border-radius: 50%;animation: li-bounce 1.2s infinite ease-in-out;opacity: .9;}

        .loading-dots .dot:nth-child(2) {animation-delay: .15s;}

        .loading-dots .dot:nth-child(3) {animation-delay: .3s;}

@keyframes li-bounce {0%, 80%, 100% {transform: scale(0);}

    40% {transform: scale(1.0);}}

.loading-overlay {position: fixed;inset: 0;background: rgba(0,0,0,.45);backdrop-filter: blur(2px);z-index: 1650; /* above app modals, below confirm (1700) */
    display: flex;align-items: center;justify-content: center;}

.loading-card {background: #1f2125;border: 1px solid #303236;border-radius: 12px;padding: .9rem 1.1rem;box-shadow: 0 6px 18px -6px rgba(0,0,0,.7);display: inline-flex;align-items: center;gap: .7rem;}

/* Chat UI (scoped to matches chat only to avoid affecting other pages) */
.matches-layout .chat-panel .chat-header {background: var(--chat-header-bg);color: #fff;border-bottom: none;padding: .6rem .8rem;display: flex;align-items: center;gap: .75rem;}

    .matches-layout .chat-panel .chat-header .chat-avatar {width: 36px;height: 36px;border-radius: 14px;object-fit: cover;border: 2px solid rgba(255,255,255,.6);}

.matches-layout .chat-panel .chat-header-meta {display: flex;flex-direction: column;line-height: 1.05;gap: 0.2rem;}

.matches-layout .chat-panel .chat-header-actions {margin-left: auto;display: flex;gap: .35rem;}

.matches-layout .chat-panel .chat-icon-btn {background: #3d3e3e;border: 1px solid var(--primary-bg-color);color: #fff;width: 36px;height: 36px;display: inline-flex;align-items: center;justify-content: center;border-radius: 10px;}

.chat-name {font-weight: 600;font-size: .95rem;letter-spacing: .4px;}

.chat-sub {opacity: .65;font-size: .63rem;letter-spacing: .5px;}

.matches-layout .chat-panel .chat-icon-btn:hover {background: rgba(255,255,255,.28);}

.matches-layout .chat-panel .chat-icon-btn.danger {background: #3a1010;border-color: #6d2626;}

.matches-layout .chat-panel .chat-messages {padding: .75rem;overflow: auto;flex: 1 1 auto;min-height: 0;}

.matches-layout .chat-panel .chat-msg {display: flex;flex-direction: column;}

    .matches-layout .chat-panel .chat-msg.mine {align-items: flex-end;}

    .matches-layout .chat-panel .chat-msg.their {align-items: flex-start;}

.matches-layout .chat-panel .bubble {padding: .6rem .85rem;border-radius: 18px;position: relative;word-wrap: break-word;line-break: anywhere;}

.matches-layout .chat-panel .chat-msg.mine .bubble {background: var(--chat-bubble-mine);color: #fff;border-top-right-radius: 8px;}

.matches-layout .chat-panel .chat-msg.their .bubble {background: var(--chat-bubble-their);color: #fff;border-top-left-radius: 8px;}

.matches-layout .chat-panel .time {font-size: .7rem;opacity: .7;}

.matches-layout .chat-panel .chat-img {max-width: 260px;max-height: 260px;border-radius: 12px;display: block;cursor: pointer;}

.matches-layout .chat-panel .composer-row {display: flex;}

.matches-layout .chat-panel .chat-input {flex: 1;min-height: 42px;max-height: 160px;padding: 5px;background: #fff;border: 1px solid #dfe1e7;color: #222;resize: vertical;}

.matches-layout .chat-panel .chat-send {background: var(--primary-color);border: none;color: #fff;border-radius: 0px;min-width: 54px;min-height: 42px;display: inline-flex;align-items: center;justify-content: center;padding: 0 .9rem;}

/* Use a scoped override for the chat image modal to avoid changing the feed modal */
.matches-layout .chat-panel .image-modal {background: rgba(0,0,0,0.9);display: flex;flex-direction: column;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 1600;}

.matches-layout .chat-panel .modal-image {max-width: 96vw;max-height: 92vh;border-radius: 8px;box-shadow: 0 2px 8px #0001;}


/* Existing styles remain below (unchanged) */

a {color: var(--accent-color2);text-decoration: none;transition: 0.5s;}

    a:hover, a:active, a:focus {color: #f8234a;outline: none;text-decoration: none;}

p {padding: 0;margin: 0 0 30px 0;}

h1 {font-weight: 700;}

legend {margin: 20px 0;color: var(--accent-color);display: block;width: 100%;padding: 0;font-size: 21px;line-height: inherit;border-bottom: 1px solid #e5e5e5;}

.table {color: var(--primary-font-color);}

.form-title {color: var(--accent-color);text-align: center;margin-top: 2rem;font-size: 2.2rem;font-weight: 700;}

.form-container {display: flex;flex-wrap: wrap;justify-content: center;gap: 2rem;max-width: 900px;margin: 0 auto;}

.form-card {background: var(--secondary-bg-color);border-radius: 12px;padding: 2rem 2.5rem;box-shadow: 0 2px 16px rgba(0,0,0,0.18);min-width: 340px;flex: 1 1 340px;}

.form-heading {color: var(--primary-color);font-size: 1.3rem;font-weight: 600;text-align: left;}

.form-group {margin-bottom: 1.2rem;}

.form-label {color: var(--secondary-font-color);font-weight: 500;margin-bottom: 0.3rem;display: block;}

.form-input, .form-select, input[type="text"], input[type="password"] {width: 100%;background: var(--primary-bg-color);color: var(--primary-font-color);border: 1px solid var(--accent-color2);border-radius: 6px;padding: 0.6rem 0.8rem;font-size: 1rem;margin-bottom: 0.2rem;}

    .form-input:focus, .form-select:focus, input[type="text"]:focus, input[type="password"]:focus {outline: 2px solid var(--primary-color);border-color: var(--primary-color);background: var(--secondary-bg-color);}

.form-btn {width: 100%;background: var(--primary-color);color: #fff;border: none;border-radius: 10px;padding: 0.7rem 0;font-size: 1.1rem;font-weight: bold;margin-top: 1.2rem;transition: background 0.2s, color 0.2s;}

    .form-btn:hover {background: #fff;color: var(--primary-color);border: 1px solid var(--primary-color);}

.form-side {min-width: 260px;flex: 1 1 260px;background: var(--primary-bg-color);border-radius: 12px;padding: 2rem 1.5rem;color: var(--secondary-font-color);}

.validation-message {color: var(--accent-color2);font-size: 0.98em;margin-top: 0.1rem;}

button, .button, input[type="submit"], input[type="button"] {color: #fff;background: var(--primary-color);border-radius: 10px;transition: background 0.1s, color 0.1s;padding: 0.5rem 1rem;font-weight: bold;font-size: 1rem;border: 1px solid var(--accent-color2);}

    button:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover {background: #fff;color: var(--accent-color2);}

.textbox-counter {font-size: 0.95em;color: #888;text-align: right;margin: 0.5em;}

.attentionText {color: #4b8100;}

.highlight {color: var(--primary-color);font-weight: bold;text-shadow: var(--font-shadow);}

.blur {filter: blur(30px);}

.toggle-switch {display: inline-flex;align-items: center;cursor: pointer;user-select: none;margin-bottom: 10px;}

    .toggle-switch input[type="checkbox"] {display: none;}

    .toggle-switch .slider {width: 40px;height: 22px;background-color: #ccc;border-radius: 34px;position: relative;transition: background-color 0.2s;margin-right: 10px;}

        .toggle-switch .slider:before {content: "";position: absolute;height: 18px;width: 18px;left: 2px;bottom: 2px;background-color: white;border-radius: 50%;transition: transform 0.2s;}

    .toggle-switch input:checked + .slider {background-color: #4caf50;}

        .toggle-switch input:checked + .slider:before {transform: translateX(18px);}

    .toggle-switch .toggle-label {font-size: 1rem;margin-left: 4px;}

.topbar-kas {display: flex;align-items: center;background: rgba(6, 12, 34, 0.98);padding: 0.5rem;border-bottom: 2px solid var(--primary-color);}

.profile-avatar-link {display: flex;align-items: center;margin-left: auto;}

.topbar-kas .menu-btn {background: none;border: none;color: #fff;font-size: 1.7rem;margin-right: 0.7rem;}

.topbar-kas .nav-icons {display: flex;gap: 1.1rem;margin-left: 0.5rem;}

    .topbar-kas .nav-icons .icon-btn {background: none;border: none;color: #fff;font-size: 1.4rem;position: relative;}

        .topbar-kas .nav-icons .icon-btn .badge {position: absolute;top: -6px;right: -8px;background: #fff;color: #991b1b;border-radius: 50%;font-size: 0.7rem;padding: 0 5px;font-weight: bold;}

.topbar-kas .profile-avatar {width: 38px;height: 38px;border-radius: 50%;object-fit: cover;margin-left: auto;border: 2px solid #fff;}

.valid.modified:not([type=checkbox]) {outline: 1px solid #26b050;}

.invalid {outline: 1px solid #e50000;}

.validation-message {color: #e50000;}

.blazor-error-boundary {background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA9NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMuMjYzNiA2My41OTQ0IDI4LjAyNTIgNDMuNjc5NiAyOC4wMDUyIDQ0LjA1NTggNDcuMTI0NSA2Ni4wMTgzIDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;padding: 1rem 1rem 1rem 3.7rem;color: white;}

.darker-border-checkbox.form-check-input {border-color: #929292;}

.width-textarea {width: 400px !important;height: 150px !important;}

.online_icon::after {content: '';margin: 0 0 0 5px;text-decoration: none;}

/* --- Enhanced Date Picker Icon Styling --- */
input[type="date"].form-input,input[type="date"] {position: relative;}

    /* WebKit (Chromium / Safari) */
    input[type="date"]::-webkit-calendar-picker-indicator {background: var(--primary-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E") no-repeat center;color: #fff;border-radius: 6px;width: 2rem;height: 2rem;cursor: pointer;opacity: 1;padding: 2px;}

/* Firefox */
@-moz-document url-prefix() {input[type="date"] {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e6007e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right .5rem center;background-size: 20px 20px;}

        input[type="date"]::-moz-focus-inner {border: 0;}}

input[type="date"]:focus-visible::-webkit-calendar-picker-indicator {outline: 2px solid var(--accent-color);outline-offset: 2px;}

/* Fallback icon overlay for environments that hide picker indicator */
.date-picker-wrapper {position: relative;}

    .date-picker-wrapper .calendar-icon-overlay {position: absolute;top: 50%;right: .55rem;transform: translateY(-50%);width: 1.25rem;height: 1.25rem;pointer-events: none;background: var(--primary-color);mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;border-radius: 4px;}

/* --- QuipNew wizard page --- */
.wizard-body {margin-top: 1rem;}

.wizard-steps {display: flex;gap: 6px;margin-bottom: 12px;}

.wiz-step {flex: 1;text-align: center;padding: 6px 4px;font-size: .7rem;background: #2a2d32;border-radius: 6px;opacity: .55;user-select: none;}

    .wiz-step.active {background: var(--primary-color);color: #fff;opacity: 1;font-weight: 600;}

    .wiz-step.done {background: #3b4148;color: #fff;opacity: .85;}

.wizard-content {background: #1f2125;border: 1px solid #303236;border-radius: 14px;padding: 1rem 1.1rem;box-shadow: 0 4px 14px rgba(0,0,0,.35);}

.media-grid {display: grid;gap: 10px;grid-template-columns: repeat(auto-fill,minmax(120px,1fr));margin-top: 12px;}

.media-thumb {position: relative;border: 1px solid #333;border-radius: 8px;overflow: hidden;background: #101113;}

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

.thumb-actions {position: absolute;bottom: 1px;left: 4px;right: 4px;display: flex;gap: 4px;justify-content: space-between;}

    .thumb-actions button {background: rgba(0,0,0,.55);color: #fff;border: 0;padding: 2px 4px;font-size: .85rem;border-radius: 4px;display: flex;align-items: center;justify-content: center;gap: 2px;backdrop-filter: blur(3px);transition: background .15s, transform .15s;}

        .thumb-actions button:hover:not(:disabled) {background: rgba(0,0,0,.75);transform: translateY(-2px);}

        .thumb-actions button:disabled {opacity: .35;cursor: not-allowed;}

.flag-row {display: flex;align-items: center;gap: 10px;margin-bottom: 8px;background: #1f2125;padding: .5rem .6rem;border: 1px solid #303236;border-radius: 10px;}

    .flag-row img {width: 80px;height: 60px;object-fit: cover;border-radius: 6px;border: 1px solid #333;}

.wizard-nav {margin-top: 18px;display: flex;gap: 10px;}

.text-btn {background: none;border: none;color: var(--accent-color2);font-size: .85rem;}

    .text-btn:hover {text-decoration: underline;}

.page-title {font-size: 1.4rem;margin: 0 0 10px;}

.helper-text {font-size: .75rem;opacity: .7;margin-top: 6px;}

.flag-controls {display: flex;flex-wrap: wrap;gap: 12px;}

.flag-toggle {display: inline-flex;align-items: center;gap: 6px;background: rgba(0,0,0,.6);border: 1px solid #444;color: var(--secondary-font-color);padding: 6px 10px;font-size: .65rem;border-radius: 22px;cursor: pointer;line-height: 1;font-weight: 500;transition: background .18s,border-color .18s,color .18s,transform .18s;}

    .flag-toggle:hover {background: rgba(0,0,0,.85);color: var(--primary-color);border-color: var(--primary-color);}

    .flag-toggle.on {background: var(--primary-color);color: #fff;border-color: var(--primary-color);}

        .flag-toggle.on:hover {background: var(--primary-color);color: #fff;}

    .flag-toggle span[aria-hidden='true'] {font-size: .9rem;line-height: 1;}

.flag-help {background: #1f2125;border: 1px solid #303236;border-radius: 10px;padding: .65rem .75rem;margin: .35rem 0 .85rem;font-size: .75rem;line-height: .9rem;color: var(--secondary-font-color);}

    .flag-help ul {margin: .45rem 0 0 .95rem;padding: 0;list-style: disc;}

    .flag-help li {margin: 2px 0;}

    .flag-help strong {color: var(--primary-color);}

.privacy-section {margin-top: 1rem;display: flex;flex-direction: column;gap: .55rem;}

    .privacy-section > .flag-toggle {align-self: flex-start;}

.privacy-help {font-size: .8rem;line-height: .9rem;color: var(--secondary-font-color);opacity: .85;}

    .privacy-help em {color: var(--accent-color2);font-style: normal;font-weight: 600;}

/* Home heading (retained) */
h2 {font-weight: bold;color: var(--primary-font-color);letter-spacing: 1px;}

/* Hero */
#hero {width: 100%;height: 100vh;background: url(./content/img/hero-bg.webp) top center;background-size: cover;overflow: hidden;position: relative;}

@media (min-width: 1024px) {#hero {background-attachment: fixed;}}

#hero:before {content: "";background: var(--overlay-dark-80);position: absolute;bottom: 0;top: 0;left: 0;right: 0;}

#hero .hero-container {position: absolute;bottom: 0;left: 0;top: 90px;right: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center;padding: 0 15px;}

@media (max-width: 991px) {#hero .hero-container {top: 70px;}}

#hero p {margin-bottom: 2em;line-height: 1.5;}

#hero .about-btn {font-weight: bold;letter-spacing: 1px;padding: 18px 48px;border-radius: 16px;transition: 0.5s;line-height: 1;color: #fff;-webkit-animation-delay: .8s;animation-delay: .8s;border: 2px solid var(--accent-color2);background: var(--primary-color);}

    #hero .about-btn:hover {color: var(--accent-color2);background: #fff;}

/* About */
#about {background: url("./content/img/about-bg.webp");background-size: cover;overflow: hidden;position: relative;color: #fff;padding: 60px 0 40px;}

@media (min-width: 1024px) {#about {background-attachment: fixed;}}

#about:before {content: "";background: var(--overlay-dim-70);position: absolute;inset: 0;z-index: 0;pointer-events: none;}

#about > * {position: relative;z-index: 1;}

#about h2 {font-size: 36px;margin-bottom: 10px;}

#about p {margin-bottom: 20px;}

/* Venue */
#venue {background: url("./content/img/background_pattern.webp") repeat;background-size: cover;position: relative;padding: 60px 0;}

.venue-flex {display: flex;align-items: center;justify-content: center;max-width: 1400px;margin: 0 auto;flex-wrap: wrap;}

.venue-content {flex: 1 1 500px;}

.venue-title {font-size: 1.5rem;font-weight: bold;margin-bottom: 10px;letter-spacing: 2px;}

.venue-desc {margin-bottom: 20px;color: #e0e0e0;}

    .venue-desc li {margin-bottom: 10px;}

.venue-image {flex: 1 1 500px;display: flex;justify-content: center;align-items: center;}

    .venue-image img {max-width: 500px;width: 100%;border-radius: 24px;box-shadow: 0 4px 32px #000a;object-fit: cover;}

@media (max-width: 900px) {.venue-title {text-align: center;}

    .venue-flex {flex-direction: column;}

    .venue-content, .venue-image {padding: 20px 0;}}

/* Contact */
#contact {background: url("./content/img/buy-bg.webp");background-size: cover;padding: 60px 0;position: relative;overflow: hidden;text-align: center;transition: .3s;cursor: pointer;color: #fff;}

    #contact:before {content: "";background: var(--overlay-dark-80);position: absolute;inset: 0;z-index: 0;pointer-events: none;}

    #contact > * {position: relative;z-index: 1;}

    #contact h2 {color: #fff;font-weight: bold;}

/* Sections Header */
.section-header {margin-bottom: 60px;position: relative;padding-bottom: 20px;}

    .section-header::before {content: '';position: absolute;width: 60px;height: 5px;background: var(--accent-color2);bottom: 0;left: calc(50% - 25px);}

    .section-header h2 {font-size: 36px;text-transform: uppercase;text-align: center;font-weight: 700;margin-bottom: 10px;}

    .section-header p {text-align: center;margin: 0;font-size: 18px;font-weight: 500;color: #9195a2;}

.section-with-bg {background-color: #f6f7fd;}

/* Footer */
#footer {background: #101522;padding: 0 0 25px;color: #eee;font-size: 14px;}

    #footer .footer-top {background: #040919;padding: 60px 0 30px;}

        #footer .footer-top .footer-info {margin-bottom: 30px;}

            #footer .footer-top .footer-info h3 {font-size: 26px;margin: 0 0 20px;line-height: 1;font-family: "Raleway", sans-serif;font-weight: 700;color: #fff;}

            #footer .footer-top .footer-info img {height: 40px;margin-bottom: 10px;}

            #footer .footer-top .footer-info p {font-size: 14px;line-height: 24px;margin-bottom: 0;font-family: "Raleway", sans-serif;color: #fff;}

        #footer .footer-top .social-links a {display: inline-flex;align-items: center;justify-content: center;background: #222636;color: #eee;line-height: 1;margin-right: 4px;border-radius: 50%;width: 36px;height: 36px;transition: 0.3s;}

            #footer .footer-top .social-links a i {line-height: 0;font-size: 16px;}

            #footer .footer-top .social-links a:hover {background: var(--accent-color2);color: #fff;}

        #footer .footer-top h4 {font-size: 14px;font-weight: bold;color: #fff;text-transform: uppercase;padding-bottom: 12px;border-bottom: 2px solid var(--accent-color2);}

        #footer .footer-top .footer-links {margin-bottom: 30px;}

            #footer .footer-top .footer-links ul {list-style: none;margin: 0;padding: 0;}

                #footer .footer-top .footer-links ul i {padding-right: 5px;color: var(--accent-color2);font-size: 18px;}

                #footer .footer-top .footer-links ul li {border-bottom: 1px solid #262c44;padding: 10px 0;}

                    #footer .footer-top .footer-links ul li:first-child {padding-top: 0;}

                #footer .footer-top .footer-links ul a {color: #eee;}

                    #footer .footer-top .footer-links ul a:hover {color: var(--accent-color2);}

        #footer .footer-top .footer-contact p {line-height: 26px;}

        #footer .footer-top .footer-newsletter {margin-bottom: 30px;}

            #footer .footer-top .footer-newsletter input[type="email"] {border: 0;padding: 6px 8px;width: 65%;}

            #footer .footer-top .footer-newsletter input[type="submit"] {background: var(--accent-color2);border: 0;width: 35%;padding: 6px 0;color: #fff;cursor: pointer;transition: 0.3s;}

                #footer .footer-top .footer-newsletter input[type="submit"]:hover {background: #e0072f;}

    #footer .copyright {text-align: center;padding-top: 30px;}

    #footer .credits {text-align: center;font-size: 13px;color: #ddd;}

.logo {font-size: 36px;margin: 0;font-family: "Raleway", sans-serif;font-weight: 700;letter-spacing: 3px;text-transform: uppercase;color: var(--accent-color);}

    .logo span {color: var(--primary-color);}

/* Feed */
.feed-wall {background: var(--secondary-bg-color);color: #e0e0e0;border-radius: 6px;box-shadow: var(--tile-shadow-sm);padding: 1rem;}

.feed-wall-header {text-align: center;margin-block: 10px;}

.feed-new-post-toggle {margin: 0.25rem 0 0.75rem 0;display: flex;justify-content: flex-end;}

.new-post-toggle-btn {background: var(--primary-color);color: #fff;font-weight: 600;border: 1px solid var(--accent-color2);border-radius: 6px;padding: 0.45rem 0.9rem;font-size: .95rem;cursor: pointer;box-shadow: 0 2px 4px rgba(0,0,0,.25);transition: background .18s, color .18s;}

    .new-post-toggle-btn:hover {background: #fff;color: var(--primary-color);}

.feed-new-post-container {margin: 0 0 1.25rem 0;padding: 0.85rem 0.85rem 0.95rem 0.85rem;background: var(--primary-bg-color);border: 1px solid #2c2c31;border-radius: 8px;}

/* Right-aligned action cluster in feed cards */
.post-actions-right {margin-left: auto;display: inline-flex;gap: .6rem;}

.feed-wall-filter {padding: 0 1rem 1rem 1rem;display: flex;align-items: center;margin-top: .25rem;}

.feed-wall-sort {margin: 0 0 1rem 0;display: flex;gap: 0.5em;}

.image-modal {background: rgba(0,0,0,0.8);display: flex;flex-direction: column;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;}
/* settings page */
.settings-container {max-width: var(--max-page-width);margin: 0 auto;padding: clamp(0.75rem, 2vw, 1.5rem);}

.settings-title {margin: 0 0 0.25rem 0;font-size: clamp(1.8rem, 2.8vw, 2.3rem);font-weight: 700;letter-spacing: .5px;background: var(--gradient-primary-accent);-webkit-background-clip: text;color: transparent;}

.settings-intro {margin: 0 0 1.2rem 0;color: var(--secondary-font-color);font-size: .95rem;}

.settings-nav {display: flex;flex-direction: column;gap: .65rem;margin-bottom: 50px;}

.settings-link {--item-bg: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0));position: relative;display: grid;grid-template-columns: 2.8rem 1fr auto;grid-template-rows: auto auto;grid-template-areas: "icon text chevron" "icon desc chevron";gap: .15rem .2rem;padding: .95rem 1.05rem .95rem .95rem;border: 1px solid rgba(255,255,255,0.06);border-radius: 14px;background: var(--secondary-bg-color);background-image: var(--item-bg);text-decoration: none;color: var(--primary-font-color);box-shadow: 0 3px 8px -4px rgba(0,0,0,.55);transition: border-color .22s, background-color .22s, transform .18s, box-shadow .25s;overflow: hidden;}

    .settings-link::before,.settings-link::after {content: "";position: absolute;inset: 0;pointer-events: none;border-radius: inherit;}

    .settings-link::after {background: var(--gradient-radial-dual);opacity: .35;transition: opacity .35s;}

    .settings-link:hover::after {opacity: .55;}

    .settings-link:hover,.settings-link:focus-visible {border-color: var(--primary-color);transform: translateY(-2px);box-shadow: 0 6px 18px -6px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);}

    .settings-link:active {transform: translateY(0);box-shadow: 0 2px 10px -4px rgba(0,0,0,.7);}

    .settings-link.active {border-color: var(--accent-color2);box-shadow: 0 0 0 1px var(--accent-color2), 0 4px 14px -6px rgba(248,34,73,.6);}

.settings-icon {grid-area: icon;align-self: center;width: 2.15rem;height: 2.15rem;display: inline-flex;align-items: center;justify-content: center;background: radial-gradient(circle at 30% 30%, var(--primary-color), var(--accent-color2));color: #fff;font-size: 1.15rem;border-radius: 11px;box-shadow: 0 2px 8px -2px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);}

.settings-text {grid-area: text;font-weight: 600;letter-spacing: .25px;font-size: 1rem;line-height: 1.15;}

.settings-desc {grid-area: desc;font-size: .72rem;text-transform: uppercase;letter-spacing: .9px;font-weight: 500;color: var(--secondary-font-color);opacity: .85;}

.settings-chevron {grid-area: chevron;align-self: center;font-size: 1.15rem;color: var(--secondary-font-color);opacity: .55;transition: transform .25s, opacity .25s;margin-left: .75rem;}

.settings-link:hover .settings-chevron,.settings-link:focus-visible .settings-chevron {transform: translateX(4px);opacity: .9;color: var(--accent-color2);}

.settings-link.active .settings-chevron {color: var(--accent-color2);opacity: 1;}

.settings-link:focus-visible {outline: 3px solid var(--primary-color);outline-offset: 2px;}

@media (min-width: 680px) {.settings-container {padding-top: 1.2rem;}

    .settings-nav {gap: .8rem;}

    .settings-link {padding: 1.05rem 1.25rem 1.05rem 1.05rem;grid-template-columns: 3rem 1fr auto;}

    .settings-icon {width: 2.4rem;height: 2.4rem;font-size: 1.25rem;}

    .settings-text {font-size: 1.05rem;}

    .settings-desc {font-size: .68rem;}}

@media (hover: none) and (pointer: coarse) {.settings-link {transition: background-color .25s, border-color .25s;}

        .settings-link:hover {transform: none;}}

/* profile social */
.profile-header {position: relative;display: flex;flex-direction: column;}

.cover-photo {width: 100%;height: 200px;background-size: cover;background-position: center;background-color: #2b2b2f;}

.header-main {padding: 0 1.25rem 0.75rem 1.25rem;display: flex;flex-direction: column;}

.avatar-actions-row {display: flex;justify-content: space-between;align-items: flex-end;margin-top: -64px;}

.avatar-wrapper {width: 130px;height: 130px;border: 4px solid var(--primary-bg-color);border-radius: 50%;overflow: hidden;background: #111;box-shadow: 0 4px 12px #0008;}

    .avatar-wrapper img {width: 100%;height: 100%;object-fit: cover;display: block;}

.profile-actions {display: flex;gap: .75rem;align-items: center;}

    .profile-actions .icon-btn {background: rgba(255, 255, 255, 0.08);border: 1px solid rgba(255, 255, 255, 0.15);color: #fff;width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 1.2rem;cursor: pointer;transition: background .15s, border-color .15s;}

        .profile-actions .icon-btn:hover {background: rgba(255, 255, 255, 0.18);}

.follow-btn {padding: .65rem 1.25rem;border-radius: 999px;font-weight: 600;border: none;background: #fff;color: #000;cursor: pointer;transition: background .15s, color .15s;}

    .follow-btn:hover {background: var(--primary-color);color: #fff;}

.identity-block {margin-top: .75rem;display: flex;flex-direction: column;gap: .35rem;}

.display-name {font-size: 1.6rem;font-weight: 700;margin: 0;display: flex;align-items: center;gap: .4rem;}

.username {color: var(--secondary-font-color);}

.profile-heading {line-height: 1.35;}

.join-date {display: flex;align-items: center;gap: .4rem;font-size: .95rem;color: var(--secondary-font-color);}

    .join-date .bi {font-size: .9rem;}

.stats-row {display: flex;gap: 1.5rem;margin-top: .9rem;flex-wrap: wrap;}

    .stats-row span strong {font-weight: 600;font-size: .95rem;margin-right: .25rem;}

.profile-tabs {margin-top: 1.2rem;display: flex;gap: 1.8rem;position: relative;overflow-x: auto;}

    .profile-tabs::-webkit-scrollbar {display: none;}

    .profile-tabs .tab {background: none;border: none;color: var(--secondary-font-color);font-weight: 600;padding: .75rem .25rem .9rem;cursor: pointer;position: relative;font-size: .9rem;letter-spacing: .3px;}

        .profile-tabs .tab.active {color: #fff;}

            .profile-tabs .tab.active::after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 3px;border-radius: 2px;background: var(--primary-color);}

        .profile-tabs .tab:focus-visible {outline: 2px solid var(--accent-color);outline-offset: 2px;border-radius: 4px;}

.profile-body {padding: 0 1.25rem 1.5rem 1.25rem;display: flex;flex-direction: column;gap: 1.5rem;}

.feed-stats-bar {color: #e0e0e0;border-top: 2px solid var(--primary-bg-color);border-left: 2px solid var(--primary-bg-color);border-right: 2px solid var(--primary-bg-color);display: flex;flex-wrap: wrap;justify-content: center;gap: 1rem;margin: .5rem 0 .5rem 0;padding: 0.7rem 0;border-radius: 8px;box-shadow: 0 1px 4px #0001;font-size: 1rem;}

.feed-stat {font-weight: 500;display: flex;flex-direction: column;align-items: center;min-width: 60px;}

    .feed-stat strong {font-weight: 600;font-size: 1em;}

.more-menu {list-style: none;margin: 0;padding: .4rem 0;position: absolute;top: 54px;right: 0;background: #1f1f23;border: 1px solid #2e2e33;border-radius: 10px;min-width: 190px;box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .6);z-index: 40;}

    .more-menu .menu-item {width: 100%;background: none;border: none;text-align: left;padding: .55rem 1rem;font-size: .9rem;color: #e7e7ea;display: flex;gap: .45rem;align-items: center;cursor: pointer;}

        .more-menu .menu-item:hover,.more-menu .menu-item:focus {background: #2b2b30;outline: none;}

        .more-menu .menu-item.danger {color: #ff7a7a;}

            .more-menu .menu-item.danger:hover {background: #3a1010;}

.action-wrapper {position: relative;}

.online-dot {display: inline-block;width: 12px;height: 12px;margin-left: .45rem;background: #1ecb4f;border-radius: 50%;box-shadow: 0 0 0 2px #111, 0 0 4px 2px rgba(30, 203, 79, .4);position: relative;top: 1px;}

    .online-dot::after {content: "";position: absolute;inset: 0;border-radius: 50%;animation: pulseOnline 1.8s ease-in-out infinite;box-shadow: 0 0 0 0 rgba(30, 203, 79, .55);}

@keyframes pulseOnline {0% {box-shadow: 0 0 0 0 rgba(30, 203, 79, .55);}

    70% {box-shadow: 0 0 0 8px rgba(30, 203, 79, 0);}

    100% {box-shadow: 0 0 0 0 rgba(30, 203, 79, 0);}}

/* Report Modal */
.report-overlay {position: fixed;inset: 0;background: rgba(0,0,0,.65);z-index: 1400;display: flex;justify-content: center;align-items: flex-start;padding-top: 8vh;backdrop-filter: blur(2px);}

.report-modal {background: #1d1f23;width: 100%;max-width: 500px;border-radius: 16px;box-shadow: 0 6px 28px -6px rgba(0,0,0,.7);display: flex;flex-direction: column;overflow: hidden;border: 1px solid #2e3238;animation: scaleIn .18s ease;max-height: min(80vh, 640px);}

@keyframes scaleIn {from {transform: translateY(18px) scale(.96);opacity: 0;}

    to {transform: translateY(0) scale(1);opacity: 1;}}

.report-header {display: flex;justify-content: space-between;align-items: center;padding: 1rem 1.25rem .75rem;border-bottom: 1px solid #2b2f35;}

    .report-header h2 {margin: 0;font-size: 1.1rem;font-weight: 600;}

.close-btn {background: none;border: none;color: #bbb;font-size: 1.4rem;line-height: 1;cursor: pointer;padding: .25rem .5rem;border-radius: 6px;}

    .close-btn:hover {color: #fff;background: #2b2f35;}

.report-body {padding: 1rem 1.25rem .25rem;display: flex;flex-direction: column;gap: .6rem;overflow-y: auto;-webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
    flex: 1 1 auto; /* fill remaining space between header/footer */
    min-height: 0; /* allow flex child to shrink in Safari/iOS */}

.report-label {font-size: .85rem;font-weight: 600;letter-spacing: .5px;text-transform: uppercase;color: #ddd;}

.report-text {width: 100%;background: #121317;color: #fafafa;border: 1px solid #363b42;resize: vertical;min-height: 120px;padding: .75rem .85rem;border-radius: 10px;font-size: .95rem;line-height: 1.35;box-shadow: 0 0 0 1px transparent;transition: border-color .15s, background .15s;}

    .report-text:focus {outline: none;border-color: var(--primary-color);background: #181b21;}

.report-counter {font-size: .7rem;text-align: right;letter-spacing: .5px;color: #888;margin-top: -.3rem;}

.report-error {background: #3a1212;border: 1px solid #702626;color: #ff9d9d;padding: .55rem .75rem;font-size: .8rem;border-radius: 8px;}

.report-success {background: #123a1e;border: 1px solid #1f6d38;color: #9bffbd;padding: .55rem .75rem;font-size: .8rem;border-radius: 8px;}

.report-footer {display: flex;justify-content: flex-end;gap: .75rem;padding: 0 1.25rem 1.15rem;}

.primary-btn, .secondary-btn {font-weight: 600;font-size: .85rem;letter-spacing: .5px;padding: .65rem 1.1rem;border-radius: 999px;cursor: pointer;border: 1px solid transparent;display: inline-flex;align-items: center;gap: .4rem;}

.primary-btn {background: var(--primary-color,#e6007e);color: #fff;border-color: var(--primary-color,#e6007e);}

    .primary-btn:hover:not([disabled]) {filter: brightness(1.1);}

    .primary-btn:disabled {opacity: .5;cursor: default;}

.secondary-btn {background: #2a2e34;color: #ddd;border-color: #3a4048;}

    .secondary-btn:hover:not([disabled]) {background: #32373e;}

    .secondary-btn:disabled {opacity: .5;cursor: default;}

@media (max-width:640px) {.report-modal {margin: 0 1rem;max-height: 85vh;}}

/* Responsive */
@media (max-width: 640px) {.cover-photo {height: 160px;}

    .avatar-wrapper {width: 110px;height: 110px;margin-left: 4px;}

    .follow-btn {padding: .55rem 1rem;}

    .profile-tabs {gap: 1.2rem;}}

/* QuipList */
.quip-tiles {display: grid;gap: 14px;align-items: stretch;}

    .quip-tiles.compact {grid-template-columns: repeat(auto-fill,minmax(160px,1fr));}

    .quip-tiles.wide {grid-template-columns: repeat(auto-fill,minmax(280px,1fr));}

.quip-tile {position: relative;aspect-ratio: 16/9;background: #24262b;border-radius: 14px;overflow: hidden;cursor: pointer;border: 1px solid #2e3036;box-shadow: var(--tile-shadow-sm);transition: transform .18s ease, box-shadow .18s ease, border-color .18s;display: flex;justify-content: center;align-items: center;}

    .quip-tile:hover, .quip-tile:focus-visible {transform: translateY(-3px);box-shadow: 0 6px 18px rgba(0,0,0,.5);border-color: var(--primary-color);outline: none;}

    .quip-tile img {width: 100%;height: 100%;object-fit: cover;display: block;}

    .quip-tile.blur img {filter: blur(18px) saturate(.6) brightness(.65);transform: scale(1.05);}

    .quip-tile.pholder {background: repeating-linear-gradient(135deg,#272a2f,#272a2f 12px,#202327 12px,#202327 24px);}

    .quip-tile .ph-icon {font-size: 2.4rem;}

.quip-add-tile {border: 1px dashed #3a3d44;background: #1f2024;color: var(--primary-color);font-size: 2.4rem;}

    .quip-add-tile:hover {background: #26272c;border-color: var(--primary-color);}

.quip-overlay {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0,0,0,.72) 5%, rgba(0,0,0,.05) 70%);display: flex;flex-direction: column;justify-content: flex-end;padding: 8px 10px 10px;gap: 4px;pointer-events: none;}

.quip-meta {font-size: .60rem;letter-spacing: .5px;display: flex;justify-content: space-between;opacity: .85;text-transform: uppercase;}

.quip-text {font-size: .75rem;line-height: 1.05rem;font-weight: 500;word-break: break-word;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

.quip-tile.wide .quip-text {-webkit-line-clamp: 3;}

.quip-lock {position: absolute;top: 6px;left: 6px;font-size: .85rem;background: rgba(0,0,0,.55);padding: 3px 6px;border-radius: 6px;line-height: 1;}
/* Empty state */
.quip-empty {grid-column: 1 / -1;padding: 1.2rem;text-align: center;background: #1d1e22;border-radius: 10px;border: 1px solid #2c2f34;font-size: .9rem;color: var(--secondary-font-color);}

.quip-tiles.images-only .quip-overlay {display: none !important;}

.quip-tiles.images-only .quip-tile {aspect-ratio: 16/9;}

.quip-tiles.images-only.compact {grid-template-columns: repeat(auto-fill,minmax(220px,1fr));}

/* profileMatch */
.profile-wall {background: var(--secondary-bg-color);box-shadow: 0 2px 6px #0001;margin: 0 auto 1rem auto;max-width: var(--max-page-width);padding-bottom: calc(90px + var(--tabbar-height, 64px));position: relative;}


.match-action-bar {position: fixed;left: 0;right: 0;bottom: calc(var(--tabbar-height, 64px) + env(safe-area-inset-bottom));display: flex;justify-content: center;gap: 2rem;background: var(--secondary-bg-color, #fff);padding: 1rem 0;z-index: 100; /* will be overridden for native */
    box-shadow: 0 -2px 8px #0002;border-top: 1px solid rgba(255,255,255,0.08);}

/* On coarse pointer (mobile / native) lift the bar above the bottom tab bar */
@media (pointer: coarse) {.match-action-bar {z-index: 1200; /* above tab bar (1000) */}

    .profile-wall {padding-bottom: calc(90px + var(--tabbar-height, 64px));}}

.match-btn,.pass-btn {min-width: 120px;padding: 0.75rem 2rem;font-size: 1.2rem;border-radius: 24px;border: none;cursor: pointer;font-weight: 600;transition: background 0.2s;}

.match-btn {background: #4caf50;color: #fff;}

.pass-btn {background: #f44336;color: #fff;}

/* profile edit */
.slider-grid {display: grid;gap: 1.1rem clamp(.9rem,2vw,1.4rem);grid-template-columns: repeat(auto-fit,minmax(220px,1fr));}

.slider-group {display: flex;flex-direction: column;gap: .35rem;}

.slider-row {display: flex;align-items: center;gap: .65rem;}

    .slider-row input[type=range] {flex: 1;height: 6px;-webkit-appearance: none;background: linear-gradient(90deg,var(--accent-color2),var(--primary-color));border-radius: 4px;outline: none;}

        .slider-row input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;width: 18px;height: 18px;border-radius: 50%;background: #fff;border: 2px solid var(--primary-color);cursor: pointer;transition: transform .15s;}

            .slider-row input[type=range]::-webkit-slider-thumb:hover {transform: scale(1.08);}

            .slider-row input[type=range]::-webkit-slider-thumb:active {transform: scale(.95);}

        .slider-row input[type=range]::-moz-range-track {background: linear-gradient(90deg,var(--accent-color2),var(--primary-color));height: 6px;border-radius: 4px;}

        .slider-row input[type=range]::-moz-range-thumb {width: 18px;height: 18px;border-radius: 50%;background: #fff;border: 2px solid var(--primary-color);cursor: pointer;}

.slider-group label {font-size: .68rem;letter-spacing: 1px;font-weight: 600;opacity: .8;text-transform: uppercase;}

.val {font-size: .75rem;font-weight: 700;width: 32px;text-align: center;}

.status-msg {margin-top: .6rem;font-size: .75rem;font-weight: 600;color: var(--accent-color);}

@media (max-width: 640px) {.slider-grid {grid-template-columns: 1fr;}}

/* Matches Page */
.matches-layout {display: grid;grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));gap: 2rem;align-items: start;height: 100%;}

    /* Expand chat to take full container when open */
    .matches-layout.chat-open {grid-template-columns: 1fr; /* collapse to single column */}

        .matches-layout.chat-open .matches-panel {display: none; /* hide matches list to give full width to chat */}

        .matches-layout.chat-open .chat-panel {width: 100%;min-height: auto; /* override default min-height */}

.matches-panel {position: relative;display: flex;flex-direction: column;gap: 1rem;}

.matches-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: .35rem;}

.matches-count {font-size: .75rem;letter-spacing: 1px;font-weight: 600;opacity: .7;text-transform: uppercase;}

.refresh-btn {background: linear-gradient(135deg, var(--primary-color), var(--accent-color2));border: none;border-radius: 10px;padding: .45rem .9rem;font-size: .7rem;font-weight: 600;cursor: pointer;color: #fff;display: inline-flex;align-items: center;gap: .35rem;box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6);}

    .refresh-btn:hover {filter: brightness(1.1);}

.selected {background-color: rgba(230, 0, 126, 0.1);}

/* Selected Chat Pane */
.chat-panel {grid-column: 1 / -1; /* span full width in grid */
    display: flex;flex-direction: column;height: calc(100vh - var(--tabbar-height));min-height: 520px;position: relative;background: var(--secondary-bg-color);}

    .chat-panel.empty {display: none;}

.chat-header {padding: 1rem 1.25rem;border-bottom: 1px solid #303236;display: flex;justify-content: space-between;align-items: center;gap: 1rem;}

.chat-title {font-size: 1.1rem;font-weight: 600;color: #fff;}

.chat-actions {display: flex;gap: .5rem;}

.icon-button {background: none;border: none;color: #fff;cursor: pointer;transition: color 0.2s;position: relative;}

    .icon-button:hover {color: var(--primary-color);}

    /* New styles for active state */
    .icon-button.active {color: var(--primary-color);}

        .icon-button.active::after {content: '';position: absolute;width: 100%;height: 2px;bottom: -4px;left: 0;background: var(--accent-color2);border-radius: 2px;}

/* Message bubbles */
.message-bubble {max-width: 80%;padding: 10px 15px;border-radius: 18px;position: relative;margin: 8px 0;display: inline-block;word-wrap: break-word;line-break: anywhere;}

    .message-bubble::after {content: "";position: absolute;width: 8px;height: 8px;bottom: 100%;left: 18px;margin-left: -4px;border-width: 4px;border-style: solid;border-color: transparent transparent #1f2125 transparent;z-index: -1;}

    .message-bubble.sent {background: #007bff;color: #fff;align-self: flex-end;}

    .message-bubble.received {background: #f1f1f1;color: #000;align-self: flex-start;}

.message-input {display: flex;align-items: center;background: #fff;border-radius: 24px;padding: 10px 15px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);margin-top: 10px;}

    .message-input input {border: none;outline: none;flex: 1;font-size: 16px;padding: 0 10px;border-radius: 24px;}

    .message-input button {background: var(--primary-color);color: #fff;border: none;border-radius: 50%;width: 36px;height: 36px;cursor: pointer;transition: background 0.3s;}

        .message-input button:hover {background: #d90070;}

.typing-indicator {display: flex;align-items: center;justify-content: center;height: 50px;margin-top: -10px;margin-bottom: 10px;}

.dot {width: 8px;height: 8px;margin: 0 2px;border-radius: 50%;background: #007bff;animation: typing-dot 1.5s infinite;}

@keyframes typing-dot {0%, 80%, 100% {transform: translateY(0);}

    40% {transform: translateY(-8px);}}

/* Responsive adjustments */
@media (max-width: 900px) {.matches-layout {grid-template-columns: 1fr;}
    /* Reddit-like feed cards (FeedList) — re-applied without removing existing styles */
    .feed-list {display: flex;flex-direction: column;gap: .9rem;}

    .chat-panel {min-height: 400px;}}

.feed-compose-row {display: flex;justify-content: flex-end;margin-bottom: .25rem;}

.compose-btn {width: 100%;padding: .45rem .8rem;}

@media (max-width: 520px) {.matches-layout {gap: 1.25rem;}

    .post-card {border-bottom: 2px solid #303236;margin:5px 0px 5px 0px;}

        .post-card.blur img {filter: blur(14px) saturate(.7) brightness(.7);}

    .refresh-btn {padding: .4rem .75rem;}}
/* header */
.post-header {display: flex;align-items: center;gap: .6rem;}

.post-avatar {width: 38px;height: 38px;border-radius: 50%;object-fit: cover;border: 2px solid rgba(255,255,255,.15);}

.post-meta {display: flex;flex-direction: column;line-height: 1.05;gap: 2px;}

.post-user {font-weight: 600;font-size: .9rem;}

.post-time {font-size: .72rem;opacity: .7;}

.post-header-actions {margin-left: auto;display: flex;align-items: center;gap: .4rem;}

.follow-chip {background: var(--primary-color);color: #fff;border: none;border-radius: 999px;padding: .35rem .7rem;font-weight: 600;font-size: .8rem;}

    .follow-chip:hover {filter: brightness(1.08);}

.post-header-actions .icon-btn {background: none;border: none;color: #ddd;font-size: 1.2rem;}

    .post-header-actions .icon-btn:hover {color: #fff;}

/* matchList */
/* Matches - maintainable styles
   - Scoped custom properties on the root container (no global :root pollution)
   - Grouped sections and consistent formatting
   - Reused gradients, shadows, radii via variables
   - Removed duplicate declarations
   - Fixed keyframes token (from @@keyframes to @keyframes)
*/
/* body */
.post-title {margin: .1rem 0 0;font-size: 1.15rem;font-weight: 700;}

.post-text {margin: .1rem 0 .25rem;font-size: .95rem;color: var(--secondary-font-color);}

.post-media {border-radius: 14px;overflow: hidden;background: #111;border: 1px solid #2c2f34;}

    .post-media img {width: 100%;height: auto;display: block;}

/* ------------------------------------------------------------------
   Scoped design tokens (local to component)
   ------------------------------------------------------------------ */
.matches-list-root {/* layout */
    --grid-gap: 1rem;--grid-min: 210px;--grid-min-swipe: 140px;/* card */
    --card-bg: var(--secondary-bg-color);--card-border-color: rgba(255,255,255,.06);--card-radius: 16px;--card-padding: .55rem .55rem .7rem;--card-shadow: 0 4px 14px -7px rgba(0,0,0,.55);--card-shadow-hover: 0 8px 24px -6px rgba(0,0,0,.75);/* overlays */
    --image-overlay: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.1) 55%);--confirm-overlay-bg: rgba(0,0,0,.75);/* badges */
    --age-badge-bg: rgba(0,0,0,.55);--age-badge-backdrop: blur(4px);/* buttons */
    --btn-bg: rgba(255,255,255,.1);--btn-bg-hover: rgba(255,255,255,.18);--btn-border: rgba(255,255,255,.18);--btn-radius: 9px;/* impact bar */
    --impact-track: rgba(255,255,255,.15);--impact-gradient: linear-gradient(90deg, var(--accent-color2), var(--primary-color));/* confirm box */
    --confirm-bg: #fff;--confirm-radius: 10px;--confirm-shadow: 0 6px 16px rgba(0,0,0,.45);}
/* footer actions */
.post-actions {display: flex;align-items: center;gap: .6rem;padding-top: .35rem;}

.vote-group {display: inline-flex;align-items: center;gap: .35rem;padding: .25rem .5rem;border: 1px solid #2e3036;border-radius: 999px;background: #23262b;}

.vote-btn {background: none;border: none;color: #ddd;width: 28px;height: 28px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;}

    .vote-btn.up:hover {color: #32d296;background: rgba(50,210,150,.06);}

    .vote-btn.down:hover {color: #ff7a7a;background: rgba(255,120,120,.08);}

.vote-count {min-width: 28px;text-align: center;font-weight: 600;font-size: .9rem;}

/* ------------------------------------------------------------------
   Layout containers
   ------------------------------------------------------------------ */
.matches-list-root {display: flex;flex-direction: column;gap: .6rem;}

.matches-toolbar {display: flex;align-items: center;justify-content: space-between;gap: .75rem;}

.toolbar-label {font-size: .8rem;letter-spacing: 1px;text-transform: uppercase;opacity: .7;font-weight: 600;}

.toolbar-btn {background: linear-gradient(135deg, var(--primary-color), var(--accent-color2));border: none;border-radius: var(--btn-radius);padding: .45rem .85rem;font-size: .65rem;font-weight: 600;color: #fff;cursor: pointer;box-shadow: 0 3px 10px -5px rgba(0,0,0,.55);}

    .toolbar-btn:disabled {opacity: .5;cursor: default;}

.matches-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));gap: var(--grid-gap);margin-top: 1rem;}

/* ------------------------------------------------------------------
   Card
   ------------------------------------------------------------------ */
.match-card {position: relative;background: var(--card-bg);border: 1px solid var(--card-border-color);border-radius: var(--card-radius);padding: var(--card-padding);display: flex;flex-direction: column;gap: .55rem;box-shadow: var(--card-shadow);cursor: pointer;transition: transform .18s, box-shadow .22s;}

    .match-card:hover {transform: translateY(-4px);box-shadow: var(--card-shadow-hover);}

/* media aspect image */
.ratio-box {position: relative;width: 100%;aspect-ratio: 3/4;overflow: hidden;border-radius: 12px;}

.match-avatar {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}

.overlay-fade {position: absolute;inset: 0;background: var(--image-overlay);}

.action-btn {display: inline-flex;align-items: center;gap: .35rem;padding: .3rem .6rem;border-radius: 999px;background: #23262b;border: 1px solid #2e3036;color: #ddd;}

    .action-btn .bi {font-size: 1rem;}

    .action-btn:hover {background: #2a2e34;color: #fff;}

/* badges and quick actions */
.badge-age {position: absolute;top: .4rem;left: .45rem;background: var(--age-badge-bg);backdrop-filter: var(--age-badge-backdrop);padding: .25rem .45rem;border-radius: 8px;font-size: .55rem;font-weight: 600;letter-spacing: .5px;}

.remove-x {position: absolute;top: .35rem;right: .4rem;width: 26px;height: 26px;border: none;border-radius: 50%;background: rgba(255,255,255,.15);color: #fff;font-size: 1rem;line-height: 1;cursor: pointer;display: flex;align-items: center;justify-content: center;}

    .remove-x:hover {background: rgba(255,255,255,.28);}

/* meta */
.match-meta {display: flex;flex-direction: column;gap: .2rem;font-size: .72rem;}

.match-name {font-weight: 600;font-size: .85rem;letter-spacing: .4px;}

.match-sub {opacity: .7;font-size: .63rem;}

/* impact */
.impact-row {display: flex;align-items: center;gap: .45rem;margin-top: .1rem;}

.impact-label {font-size: .55rem;letter-spacing: .6px;opacity: .6;text-transform: uppercase;font-weight: 600;}

.impact-bar {flex: 1;height: 6px;background: var(--impact-track);border-radius: 4px;overflow: hidden;position: relative;}

    .impact-bar span {display: block;height: 100%;background: var(--impact-gradient);box-shadow: 0 0 0 1px rgba(0,0,0,.25);}

/* actions */
.match-actions-inline {display: flex;gap: .4rem;margin-top: .3rem;}

.btn-icon {flex: 1;background: var(--btn-bg);border: 1px solid var(--btn-border);border-radius: var(--btn-radius);padding: .35rem .4rem;color: #fff;display: flex;align-items: center;justify-content: center;font-size: .8rem;cursor: pointer;transition: background .25s, border-color .25s;}

    .btn-icon:hover {background: var(--btn-bg-hover);}

    .btn-icon.chat {border-color: var(--primary-color);}

    .btn-icon.remove {border-color: #772727;}

/* states */
.match-loading,.match-empty {padding: 1rem;text-align: center;opacity: .75;font-size: .8rem;@media (max-width:540px) {.post-title {font-size: 1.05rem;}

        .post-avatar {width: 34px;height: 34px;}}
    /* swipe mode (small screens) */
    @media (max-width: 600px) {.matches-grid.swipe-mode {grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-swipe), 1fr));gap: .85rem;}

        .match-card {padding: .5rem;}}}
/* ------------------------------------------------------------------
Confirmation overlay
------------------------------------------------------------------ */
.confirm-overlay {position: fixed; /* was absolute */
    inset: 0; /* cover viewport */
    background: var(--confirm-overlay-bg, rgba(0,0,0,.75)); /* fallback if token not in scope */
    display: flex;align-items: center;justify-content: center;z-index: 1700; /* above image-modal (1000), report (1400), chat image (1600) */}

.confirm-box {background: var(--confirm-bg, #fff);padding: 14px 18px;border-radius: var(--confirm-radius, 10px);width: 92%;max-width: 320px; /* a bit wider helps readability */
    text-align: center;box-shadow: var(--confirm-shadow, 0 6px 16px rgba(0,0,0,.45));animation: scaleIn .18s ease-out;}

.confirm-title {font-weight: 600;color: black;}

.confirm-desc {font-size: .85rem;margin-bottom: 10px;color: #444;}

.confirm-actions button {margin: 0 6px;}

@keyframes scaleIn {from {transform: scale(.85);opacity: 0;}

    to {transform: scale(1);opacity: 1;}}

/* ChoozIM brand tweaks */
.hero-choozim .brand-splash {width: min(320px,60vw);height: auto;margin: 0 auto 6px;display: block;filter: drop-shadow(0 6px 22px rgba(0,0,0,.35));}

.hero-choozim .hero-tagline {font-weight: 700;letter-spacing: .3px;margin: .35rem 0 1rem;background: var(--gradient-primary-accent);-webkit-background-clip: text;color: transparent}

.hero-choozim .hero-cta {display: flex;gap: .65rem;justify-content: center;flex-wrap: wrap}

.store-row {margin-top: .5rem;text-align: center}

.coming-badge {display: inline-block;background: #2a2e34;border: 1px solid #3a4048;color: #ddd;padding: .35rem .6rem;border-radius: 999px;font-size: .75rem;letter-spacing: .4px}