/* ==================== CORE: ROOT, GLOBALS & SCROLLING ==================== */
 :root {
     --app-dark: #101328;
     --app-dark-soft: #171b36;
     --app-dark-raised: #232739;
     --app-primary: #5578ff;
     --app-secondary: #7b5cff;
     --app-primary-soft: rgba(85, 120, 255, 0.15);
     --app-card: rgba(255, 255, 255, 0.08);
     --app-panel: rgba(255, 255, 255, 0.075);
     --app-border: rgba(255, 255, 255, 0.14);
     --app-surface: rgba(247, 248, 255, 0.94);
     --app-surface-soft: rgba(241, 243, 255, 0.89);
     --app-surface-muted: rgba(255, 255, 255, 0.72);
     --app-text: #101328;
     --app-text-muted: #6f7890;
     --app-text-faint: #949db1;
     --app-radius-sm: 14px;
     --app-radius-md: 18px;
     --app-radius-lg: 24px;
     --app-radius-xl: 28px;
     --app-shadow-card: 0 16px 42px rgba(4, 7, 25, 0.18);
     --app-shadow-dark: 0 25px 80px rgba(0, 0, 0, 0.35);
     --mobile-nav-height: 160px;
}
 @media (max-width: 991.98px) {
     :root {
         --tagin-footer-height: 86px;
         --tagin-header-height: 72px;
    }
     .tagin-profile-page{
         margin: -1rem;
         width: calc(100% + 2rem);
    }
}
 @media (max-width: 767.98px) {
     :root {
         --tagin-header-height: 72px;
    }
}
 @media (max-width: 575.98px) {
     :root {
         --tagin-header-height: 66px;
    }
}
 @media (max-width: 991.98px) {
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .main-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .nav-header.tagin-header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000;
    }
    .main-content {
        position: absolute;
        top: var(--tagin-header-height);
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
     .middle-sidebar-bottom, .middle-sidebar-left {
         min-height: 100%;
    }
     html:has(body.registration-page), body.registration-page {
         height: auto;
         min-height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior-y: auto;
         -webkit-overflow-scrolling: touch;
    }
     body.registration-page .mobile-panel {
         height: auto;
         min-height: 100dvh;
         overflow: visible;
    }
     .main-content::after {
         content: "";
         display: block;
         height: 80px;
         flex-shrink: 0;
    }
    .tagin-pull-refresh {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        border-radius: 999px;
        background: rgba(247, 248, 255, 0.96);
        color: #56617b;
        font-size: 11px;
        font-weight: 850;
        box-shadow: 0 10px 25px rgba(16, 19, 40, 0.18);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -55px);
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .tagin-pull-refresh.is-visible {
        opacity: 1;
    }

    .tagin-pull-refresh.is-ready {
        color: #5578ff;
    }

    .tagin-pull-refresh.is-refreshing i {
        animation: taginPullRefreshSpin 0.8s linear infinite;
    }

    @keyframes taginPullRefreshSpin {
        to {
            transform: rotate(360deg);
        }
    }
}
@media (min-width: 991.98px) {
    .tagin-pull-refresh {
        display: none;
    }
}
 * {
     scrollbar-width: thin;
     scrollbar-color: rgba(255,255,255,.22) transparent;
}
 ::-webkit-scrollbar {
     width: 6px;
}
 ::-webkit-scrollbar-track {
     background: transparent;
}
 ::-webkit-scrollbar-thumb {
     background: rgba(255,255,255,.16);
     border-radius: 999px;
     border: 1px solid transparent;
     background-clip: padding-box;
}
 ::-webkit-scrollbar-thumb:hover {
     background: rgba(255,255,255,.32);
     background-clip: padding-box;
}
 ::-webkit-scrollbar-thumb:active {
     background: rgba(255,255,255,.45);
     background-clip: padding-box;
}
 ::-webkit-scrollbar-corner {
     background: transparent;
}
 @media (max-width: 991.98px) {
     .main-content {
         scrollbar-width: none;
         -ms-overflow-style: none;
    }
     .main-content::-webkit-scrollbar {
         display: none;
         width: 0;
         height: 0;
    }
}
.tagin-global-toast {
    position: fixed;
    top: calc(var(--tagin-header-height, 72px) + 12px);
    left: 50%;
    z-index: 99999;
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 13px;
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 14px 30px rgba(16, 19, 40, .22);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -12px);
    transition: opacity .2s ease, transform .2s ease;
}

.tagin-global-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.tagin-global-toast.is-error {
    background: linear-gradient(135deg, #bd294d, #d4385d);
}

.tagin-global-toast.is-success {
    background: linear-gradient(135deg, #238e62, #32b47d);
}

@media (max-width: 575.98px) {
    .tagin-global-toast {
        top: calc(var(--tagin-header-height, 66px) + 12px);
        max-width: calc(100vw - 56px);
        padding: 13px 18px;
        font-size: .76rem;
    }
}
.main-wrapper {
    overflow: visible;
}
 .tagin-scroll-hint {
     display: flex;
     align-items: center;
     gap: 7px;
     margin-top: 17px;
     padding: 0;
     border: 0;
     background: transparent;
     color: rgba(255, 255, 255, 0.72);
     font-family: inherit;
     font-size: 0.76rem;
     font-weight: 700;
     line-height: inherit;
     text-align: left;
     appearance: none;
     cursor: pointer;
     position: relative;
     z-index: 5;
     pointer-events: auto;
}
 .tagin-scroll-hint i {
     font-size: 11px;
     animation: taginEventBounce 1.8s ease-in-out infinite;
}
 .bg-app-body {
     background: radial-gradient(circle at 14% 0%, rgba(85, 120, 255, 0.24), transparent 34%), radial-gradient(circle at 100% 28%, rgba(123, 92, 255, 0.14), transparent 30%), linear-gradient(180deg, #171b36 0, #232a4f 300px, #dce5f7 760px) !important;
}
 body {
     min-height: 100vh;
     background: radial-gradient(circle at top left, rgba(85,120,255,0.35), transparent 35%), radial-gradient(circle at bottom right, rgba(255,255,255,0.08), transparent 30%), var(--app-dark);
     color: #fff;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
 .scroll-bar {
     overflow-y: auto;
     scrollbar-width: none;
}
 .scroll-bar::-webkit-scrollbar {
     display: none;
}
 @media (max-width: 767.98px) {
    body {
         background: radial-gradient(circle at top, rgba(85,120,255,0.32), transparent 35%), var(--app-dark);
    }
}
 @media (max-width: 575px) {
     .bg-app-body {
         background: radial-gradient(circle at 20% 0%, rgba(85, 120, 255, 0.24), transparent 31%), radial-gradient(circle at 100% 24%, rgba(123, 92, 255, 0.13), transparent 28%), linear-gradient(180deg, #171b36 0, #252d53 390px, #dce5f7 820px) !important;
    }
}
body.tagin-keyboard-open .main-content {
    height: auto !important;
}

/* ==================== SHARED COMPONENT: STANDARD PAGE HERO ==================== */
 .tagin-page-hero {
     position: relative;
     display: grid;
     grid-template-columns: 62px minmax(0, 1fr) auto;
     align-items: center;
     gap: 18px;
     width: 100%;
     min-width: 0;
     margin-bottom: 1rem;
     padding: 28px 30px;
     overflow: hidden;
     border: 1px solid rgba(255,255,255,.12);
     border-radius: 26px;
     box-shadow: 0 22px 55px rgba(24,27,65,.22);
     box-sizing: border-box;
}
 .tagin-page-hero > * {
     position: relative;
     z-index: 1;
     min-width: 0;
}
 .tagin-events-hero {
     background: radial-gradient(circle at 92% 115%, rgba(255,255,255,.10) 0 95px, transparent 96px), radial-gradient(circle at 90% 115%, transparent 0 135px, rgba(255,255,255,.05) 136px 175px, transparent 176px), linear-gradient(135deg, rgba(35,39,84,.98), rgba(78,70,148,.96), rgba(47,53,104,.98));
}
 .tagin-all-notifications-hero {
     background: radial-gradient(circle at 88% -20%, rgba(255,255,255,.08) 0 125px, transparent 126px), radial-gradient(circle at 70% 140%, rgba(130,116,255,.18) 0 110px, transparent 111px), linear-gradient(135deg, rgba(35,39,84,.98), rgba(78,70,148,.96), rgba(47,53,104,.98));
}
 .tagin-page-hero-icon {
     display: grid;
     width: 62px;
     height: 62px;
     place-items: center;
     color: #fff;
     font-size: 24px;
     background: rgba(255,255,255,.12);
     border: 1px solid rgba(255,255,255,.16);
     border-radius: 20px;
     box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px rgba(0,0,0,.16);
}
 .tagin-page-hero-content {
     width: 100%;
     min-width: 0;
}
 .tagin-page-hero-label {
     display: block;
     margin-bottom: 8px;
     color: #b4baff;
     font-size: 12px;
     font-weight: 900;
     line-height: 1.2;
     letter-spacing: .12em;
     text-transform: uppercase;
}
 .tagin-page-hero-title {
     margin: 0 0 8px;
     color: #fff;
     font-size: clamp(32px, 3vw, 44px);
     font-weight: 850;
     line-height: 1.06;
     letter-spacing: -.04em;
}
 .tagin-page-hero-description {
     max-width: 650px;
     margin: 0;
     color: rgba(255,255,255,.74);
     font-size: 15px;
     line-height: 1.65;
}
 .tagin-page-hero-action {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     min-width: 0;
}
 .tagin-page-hero-action button {
     position: static;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     width: auto;
     max-width: 100%;
     min-height: 46px;
     margin: 0;
     padding: 0 18px;
     color: #fff;
     font: inherit;
     font-size: 12px;
     font-weight: 800;
     line-height: 1;
     white-space: nowrap;
     background: rgba(255,255,255,.12);
     border: 1px solid rgba(255,255,255,.20);
     border-radius: 14px;
     box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
     appearance: none;
     cursor: pointer;
     transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
 .tagin-page-hero-action button:hover {
     color: #fff;
     background: rgba(255,255,255,.20);
     border-color: rgba(255,255,255,.32);
     transform: translateY(-1px);
}
 .tagin-page-hero-action button:disabled {
     opacity: .55;
     cursor: default;
     transform: none;
}
 @media (max-width: 767.98px) {
     .tagin-page-hero {
         grid-template-columns: 50px minmax(0, 1fr);
         grid-template-areas: "icon content" "action action";
         align-items: start;
         gap: 14px;
         padding: 20px 18px;
         border-radius: 22px;
    }
     .tagin-page-hero-icon {
         grid-area: icon;
         width: 50px;
         height: 50px;
         font-size: 20px;
         border-radius: 16px;
    }
     .tagin-page-hero-content {
         grid-area: content;
    }
     .tagin-page-hero-label {
         margin-bottom: 7px;
         font-size: 11px;
    }
     .tagin-page-hero-title {
         margin-bottom: 7px;
         font-size: 22px;
    }
     .tagin-page-hero-description {
         max-width: none;
         font-size: 12px;
         line-height: 1.5;
    }
     .tagin-page-hero-action {
         grid-area: action;
         width: 100%;
         justify-content: stretch;
    }
     .tagin-page-hero-action button {
         width: 100%;
         min-width: 0;
         min-height: 44px;
         white-space: normal;
         text-align: center;
    }
}

/* ==================== PAGE: LANDING ==================== */
 .landing-shell {
     min-height: 100vh;
}
 .logo-main {
     max-width: 300px;
     width: 100%;
     height: auto;
}
 .logo-mobile {
     max-width: 300px;
     width: 100%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
}
 .glass-card {
     background: var(--app-card);
     border: 1px solid var(--app-border);
     backdrop-filter: blur(18px);
     border-radius: 28px;
}
 .feature-pill {
     background: var(--app-primary-soft);
     border: 1px solid rgba(85,120,255,0.25);
     border-radius: 999px;
     padding: 8px 14px;
     font-size: 13px;
     color: rgba(255,255,255,0.82);
     display: inline-flex;
     align-items: center;
     gap: 7px;
}
 .headline {
     font-size: clamp(2.5rem, 5vw, 5rem);
     line-height: 0.95;
     letter-spacing: -0.06em;
     font-weight: 900;
}
 .subtext {
     color: rgba(255,255,255,0.68);
     font-size: 1.05rem;
     max-width: 520px;
}
 .logo-main, .logo-mobile {
     display: block;
     width: 100%;
     max-width: 300px;
     height: auto;
}
 @media (max-width: 767.98px) {
     .mobile-panel {
         min-height: 100vh;
         padding: 28px 18px;
    }
     .glass-card {
         border-radius: 24px;
    }
}
 @media (min-width: 576px) and (max-width: 991.98px) {
     .mobile-panel {
         padding-top: 1.5rem;
    }
}

/* ==================== PAGE: LOGIN ==================== */
 .login-card {
     max-width: 430px;
     width: 100%;
}
 .login-message {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 24px;
     padding: 14px 18px;
     border-radius: 14px;
     background: rgba(85, 120, 255, 0.12);
     border: 1px solid rgba(85, 120, 255, 0.30);
     color: #DDE8FF;
     font-size: .95rem;
     line-height: 1.4;
}
 .login-message i {
     flex-shrink: 0;
     font-size: 1.1rem;
     color: #6E8CFF;
}

/* ==================== PAGE: REGISTRATION ==================== */
.registration-page input {
    color: #dcdcdc;
    transition: color 0.15s ease;
}
.registration-page input:hover {
    color: #f0f0f0;
}
.registration-page input:focus {
    color: #ffffff;
}
.registration-page textarea {
    color: #dcdcdc;
    transition: color 0.15s ease;
}
.registration-page textarea:hover {
    color: #f0f0f0;
}
.registration-page textarea:focus {
    color: #ffffff;
}
.registration-page .custom-date-trigger {
    color: #dcdcdc;
    transition: color 0.15s ease;
}
.registration-page .custom-date-trigger:hover {
    color: #f0f0f0;
}
.registration-page .custom-date-trigger:focus {
    color: #ffffff;
}
 .registration-field-error {
     display: none;
     margin-top: 7px;
     padding-left: 2px;
     color: #ffb8c1;
     font-size: 12px;
     font-weight: 700;
     line-height: 1.4;
}
 .registration-field-error.is-visible {
     display: block;
}
 .register-card .form-control.is-invalid {
     border-color: rgba(255, 103, 122, 0.78) !important;
     background-image: none !important;
     box-shadow: 0 0 0 4px rgba(255, 82, 103, 0.10) !important;
}
 .register-card .form-control.is-invalid:focus {
     border-color: #ff677a !important;
     box-shadow: 0 0 0 4px rgba(255, 82, 103, 0.16) !important;
}
 .gender-group {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
}
 .gender-pill {
     background: rgba(255,255,255,0.08);
     color: rgba(255,255,255,0.85);
     border: 1px solid rgba(255,255,255,0.12);
     border-radius: 999px;
     padding: 10px 16px;
}
 .btn-check:checked + .gender-pill {
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     border-color: transparent;
     color: #fff;
}
 .register-card {
     margin: 0 auto;
}
 .password-toggle {
     position: absolute;
     top: 50%;
     right: 16px;
     transform: translateY(-50%);
     border: 0;
     background: transparent;
     color: rgba(255,255,255,0.5);
     padding: 0;
}
 .password-toggle:hover {
     color: rgba(255,255,255,0.9);
}
 .interest-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
}
 .interest-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border-radius: 999px;
     padding: 11px 15px;
     background: rgba(255,255,255,0.08);
     border: 1px solid rgba(255,255,255,0.12);
     color: rgba(255,255,255,0.85);
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
}
 .btn-check:checked + .interest-pill {
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     border-color: transparent;
     color: #fff;
}
 .photo-count {
     border-radius: 999px;
     padding: 6px 12px;
     background: rgba(255,255,255,0.08);
     color: rgba(255,255,255,0.85);
     font-size: 12px;
     font-weight: 800;
}
 .photo-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px;
}
 .photo-slot {
     position: relative;
     aspect-ratio: 1 / 1;
     border-radius: 22px;
     overflow: hidden;
     background: rgba(255,255,255,0.07);
     border: 1px solid rgba(255,255,255,0.12);
}
 .photo-add {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 6px;
     cursor: pointer;
     color: rgba(255,255,255,0.75);
     font-weight: 800;
}
 .photo-add i {
     font-size: 28px;
}
 .photo-empty {
     opacity: 0.55;
}
 .photo-preview img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .photo-remove {
     position: absolute;
     top: 8px;
     right: 8px;
     width: 26px;
     height: 26px;
     border: 0;
     border-radius: 50%;
     background: rgba(0,0,0,0.55);
     color: #fff;
}
 .photo-warning {
     border-radius: 16px;
     padding: 10px 12px;
     background: rgba(255, 193, 7, 0.12);
     border: 1px solid rgba(255, 193, 7, 0.25);
     color: rgba(255,255,255,0.85);
     font-size: 13px;
}
 .registration-steps {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     position: relative;
     gap: 0.5rem;
}
 .registration-step {
     flex: 1;
     min-width: 0;
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
     padding: 0;
     border: 0;
     background: transparent;
     color: rgba(255, 255, 255, 0.45);
     text-align: center;
     text-decoration: none;
}
 .registration-step:not(:last-child)::after {
     content: "";
     position: absolute;
     top: 18px;
     left: calc(50% + 22px);
     width: calc(100% - 44px);
     height: 2px;
     background: rgba(255,255,255,.15);
     z-index: 0;
}
 .registration-step.completed:not(:last-child)::after {
     background: var(--bs-success);
}
 .registration-step-number {
     position: relative;
     z-index: 2;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid rgba(255, 255, 255, 0.18);
     border-radius: 50%;
     background: #101328;
     font-size: 0.85rem;
     font-weight: 600;
     transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
 button.registration-step {
     cursor: pointer;
}
 .registration-step-label {
     overflow: hidden;
     max-width: 100%;
     font-size: 0.75rem;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 button.registration-step:hover {
     color: rgba(255, 255, 255, 0.85);
}
 button.registration-step:hover .registration-step-number {
     border-color: var(--bs-primary);
}
 .registration-step.active {
     color: #ffffff;
}
 .registration-step.active .registration-step-number {
     border-color: var(--bs-primary);
     background: var(--bs-primary);
     color: #ffffff;
}
 .registration-step.completed {
     color: rgba(255, 255, 255, 0.75);
}
 .registration-step.completed .registration-step-number {
     border-color: var(--bs-success);
     background: var(--bs-success);
     color: #ffffff;
}
 .registration-step.locked {
     cursor: not-allowed;
     opacity: 0.45;
}
 .mobile-registration-slot {
     width: 100%;
     max-width: 900px;
     margin: 0 auto;
}
 .interest-categories {
     margin-bottom: 1.5rem;
     display: flex;
     gap: 1.5rem;
     overflow-x: auto;
     overflow-y: hidden;
     padding-bottom: 0.75rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.15);
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
     cursor: grab;
     user-select: none;
}
 .interest-categories::-webkit-scrollbar {
     display: none;
}
 .interest-category-panel {
     display: none;
}
 .interest-category-panel.active {
     display: block;
}
 .interest-categories.is-dragging {
     cursor: grabbing;
}
 .custom-date-trigger {
     display: flex;
     align-items: center;
     gap: 12px;
     cursor: pointer;
}
 .custom-date-trigger span {
     flex: 1;
}
 .custom-date-trigger i {
     opacity: .75;
}
 .custom-date-overlay {
     position: fixed;
     inset: 0;
     z-index: 2000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
}
 .custom-date-overlay[hidden] {
     display: none;
}
 .custom-date-dialog {
     width: min(100%, 520px);
     padding: 26px;
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 22px;
     background: #171a35;
     box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}
 .custom-date-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 20px;
}
 .custom-date-eyebrow {
     margin-bottom: 4px;
     color: rgba(255, 255, 255, .55);
     font-size: .78rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
}
 .custom-date-title {
     margin: 0;
     color: #fff;
     font-size: 1.45rem;
     font-weight: 700;
}
 .custom-date-close {
     display: grid;
     width: 42px;
     height: 42px;
     flex: 0 0 42px;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 50%;
     color: #fff;
     background: rgba(255, 255, 255, .06);
}
 .custom-date-selected {
     margin: 24px 0 20px;
     padding: 18px;
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 16px;
     color: #fff;
     background: rgba(255, 255, 255, .055);
     font-size: 1.15rem;
     font-weight: 700;
     text-align: center;
}
 .custom-date-fields {
     display: grid;
     grid-template-columns: 1.35fr .8fr 1fr;
     gap: 12px;
}
 .custom-date-field label {
     display: block;
     margin-bottom: 8px;
     color: rgba(255, 255, 255, .6);
     font-size: .78rem;
     font-weight: 700;
}
 .custom-date-field .form-select {
     min-height: 52px;
     padding: 0 44px 0 16px;
     border: 1px solid rgba(255, 255, 255, .14);
     border-radius: 14px;
     color: #ffffff;
     background-color: rgba(255, 255, 255, .055);
     font-size: .95rem;
     font-weight: 600;
     box-shadow: none;
     cursor: pointer;
     appearance: none;
     -webkit-appearance: none;
     background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .7) 50%), linear-gradient(135deg, rgba(255, 255, 255, .7) 50%, transparent 50%);
     background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
     background-size: 5px 5px, 5px 5px;
     background-repeat: no-repeat;
     transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
 .custom-date-error {
     min-height: 24px;
     padding-top: 10px;
     color: #ff9eaa;
     font-size: .875rem;
}
 .custom-date-actions {
     display: grid;
     grid-template-columns: 1fr 1.4fr;
     gap: 12px;
     margin-top: 10px;
}
 body.custom-date-open {
     overflow: hidden;
}
 .custom-date-field .form-select:hover {
     border-color: rgba(255, 255, 255, .25);
     background-color: rgba(255, 255, 255, .075);
}
 .custom-date-field .form-select:focus {
     border-color: #6574ff;
     background-color: rgba(255, 255, 255, .08);
     box-shadow: 0 0 0 3px rgba(101, 116, 255, .18);
     outline: 0;
}
 .custom-date-field .form-select:disabled {
     opacity: .5;
     cursor: not-allowed;
}
 .custom-date-field .form-select option {
     color: #ffffff;
     background: #202440;
     font-weight: 500;
}
 .registration-error-box {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 18px;
     background: rgba(220, 53, 69, .12);
     border: 1px solid rgba(220, 53, 69, .25);
     border-radius: 999px;
     color: #ffb6c1;
     font-size: .95rem;
     text-align: center;
     animation: fadeInError .25s ease;
}
 .field-error {
     display: none;
     margin-top: 7px;
     padding-left: 2px;
     color: #ffb8c1;
     font-size: 12px;
     font-weight: 700;
     line-height: 1.4;
}
 .field-error.is-visible {
     display: block;
}
 .form-errors {
     display: none;
     margin-top: 18px;
     color: #ffb8c1;
     font-size: 14px;
     font-weight: 700;
     line-height: 1.5;
}
 .form-errors.is-visible {
     display: block;
}
 .form-field:has(.field-error.is-visible) .form-control, .form-field:has(.field-error.is-visible) .form-select {
     border-color: #dc5369;
     box-shadow: 0 0 0 4px rgba(220, 83, 105, 0.18);
}
 .form-field:has(.field-error.is-visible) .form-control:focus, .form-field:has(.field-error.is-visible) .form-select:focus {
     border-color: #dc5369;
     box-shadow: 0 0 0 4px rgba(220, 83, 105, 0.22);
}
 @media (max-width: 767.98px) {
     .custom-date-dialog {
         width: calc(100vw - 32px);
         max-width: 420px;
    }
}
 @media (max-width: 575px) {
     .photo-grid {
         grid-template-columns: repeat(2, 1fr);
    }
     .photo-slot {
         border-radius: 18px;
    }
}
 @media (max-width: 575.98px) {
     .registration-step-label {
         font-size: 0.65rem;
    }
     .registration-step-number {
         width: 32px;
         height: 32px;
    }
     .registration-steps::before {
         top: 16px;
    }
}
 @media (min-width: 576px) and (max-width: 991.98px) {
     .mobile-registration-slot {
         padding-left: 2rem !important;
         padding-right: 2rem !important;
    }
}
 @media (max-width: 420px) {
     .custom-date-fields {
         grid-template-columns: 1.2fr .75fr 1fr;
         gap: 10px;
    }
     .custom-date-field .form-select {
         min-height: 50px;
         padding-left: 13px;
         padding-right: 36px;
         font-size: .9rem;
    }
}

/* ==================== LAYOUT: HEADER & NOTIFICATIONS ==================== */
 .tagin-header {
     height: 72px;
     background: linear-gradient(135deg, rgba(85,120,255,0.12), transparent 35%), rgba(16,19,40,0.92);
     border-bottom: 1px solid rgba(255,255,255,0.08) !important;
     backdrop-filter: blur(18px);
     box-shadow: 0 10px 35px rgba(0,0,0,0.22);
     padding: 0 22px;
}
 .tagin-nav-top {
     height: 72px;
     display: flex;
     align-items: center;
     width: 100%;
}
 .tagin-brand img {
     height: 46px;
     display: block;
     filter: drop-shadow(0 0 18px rgba(85,120,255,0.22));
}
 .tagin-location {
     margin-left: 18px;
     height: 38px;
     padding: 0 14px;
     border-radius: 999px;
     background: rgba(85,120,255,0.13);
     border: 1px solid rgba(85,120,255,0.25);
     color: rgba(255,255,255,0.9);
     align-items: center;
     gap: 8px;
     font-weight: 700;
     font-size: 14px;
}
 .tagin-location i {
     color: #fff;
     font-size: 14px;
}
 .tagin-actions {
     margin-left: auto;
     display: flex;
     align-items: center;
     gap: 12px;
     flex: 0 0 auto;
}
 .tagin-icon-btn {
     width: 44px;
     height: 44px;
     border-radius: 16px;
     background: rgba(255,255,255,0.075);
     border: 1px solid rgba(255,255,255,0.12);
     color: #fff;
     display: grid;
     place-items: center;
     position: relative;
     transition: 0.18s ease;
}
 .tagin-icon-btn i {
     font-size: 18px;
     color: #fff !important;
     line-height: 1;
}
 .tagin-icon-btn:hover {
     transform: translateY(-2px);
     background: rgba(85,120,255,0.18);
     border-color: rgba(85,120,255,0.38);
     color: #fff;
}
 .tagin-icon-btn, .tagin-profile, .tagin-menu {
     width: 44px !important;
     height: 44px !important;
     min-width: 44px !important;
     max-width: 44px !important;
     padding: 0 !important;
     border-radius: 16px;
     background: rgba(255,255,255,0.075);
     border: 1px solid rgba(255,255,255,0.12);
     color: #fff;
     display: flex !important;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     transition: 0.18s ease;
}
 .tagin-dot {
     position: absolute;
     top: 8px;
     right: 9px;
     width: 8px;
     height: 8px;
     background: #ffb020;
     border-radius: 50%;
     box-shadow: 0 0 0 3px rgba(255,176,32,0.15);
}
 .tagin-profile {
     background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
     padding: 2px !important;
}
 .tagin-profile img {
     width: 40px !important;
     height: 40px !important;
     min-width: 40px !important;
     max-width: 40px !important;
     border-radius: 14px;
     object-fit: cover;
     display: block;
     margin: 0 !important;
}
 .tagin-profile:hover {
     transform: translateY(-2px);
}
 .tagin-dropdown {
     margin-top: 13px !important;
     width: 576px;
     background: rgba(36,39,57,0.96);
     border: 1px solid rgba(255,255,255,0.12) !important;
     border-top: 0 !important;
     border-radius: 0 0 24px 24px !important;
     backdrop-filter: blur(18px);
     box-shadow: 0 25px 80px rgba(0,0,0,0.38) !important;
}
 .tagin-notification-unread::after {
     content: "";
     position: absolute;
     top: 17px;
     right: 4px;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--app-primary);
}
 .tagin-notification-avatar {
     width: 42px;
     height: 42px;
     flex: 0 0 42px !important;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 14px;
     background: rgba(255,255,255,.08);
     color: #fff;
}
 .tagin-notification-empty {
     padding: 25px 10px;
     color: rgba(255,255,255,.5);
     text-align: center;
}
 .tagin-notification {
     position: relative;
     display: flex;
     align-items: flex-start;
     gap: 14px;
}
 .tagin-notification:hover {
     background: rgba(255,255,255,.035);
     transform: translateY(-1px);
     box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
 .tagin-notification > div {
     flex: 1;
     min-width: 0;
}
 .tagin-notification h5 {
     display: flex;
     align-items: center;
     margin: 0 0 3px;
     gap: 8px;
}
 .tagin-notification h5 span {
     margin-left: auto;
     flex-shrink: 0;
     white-space: nowrap;
}
 .tagin-notification img {
     width: 42px;
     height: 42px;
     border-radius: 14px;
     object-fit: cover;
}
 .tagin-notification-title {
     display: flex;
     align-items: center;
     gap: 10px;
}
 .tagin-notification-title h5 {
     margin: 0;
}
 .tagin-notification-title span {
     margin-left: auto;
     flex-shrink: 0;
     color: rgba(255, 255, 255, 0.45);
     font-size: 11px;
     font-weight: 700;
}
 .tagin-notification h5 {
     color: #fff;
     font-size: 13px;
     font-weight: 800;
     margin: 0 0 3px;
}
 .tagin-notification h5 span {
     float: right;
     color: rgba(255,255,255,0.45);
     font-size: 11px;
     font-weight: 700;
     margin-left: 12px;
}
 .tagin-notification p {
     color: rgba(255,255,255,0.55);
     font-size: 12px;
     margin: 0;
}
 .tagin-menu {
     width: 44px;
     height: 44px;
     border-radius: 16px;
     background: rgba(255,255,255,0.075);
     border: 1px solid rgba(255,255,255,0.12);
}
 .tagin-notification-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 18px;
}
 .tagin-notification-header h4 {
     margin: 0;
     color: #fff;
     font-size: 16px;
     font-weight: 800;
}
 .tagin-notification-close {
     display: none;
     width: 42px;
     height: 42px;
     flex: 0 0 42px;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: 1px solid rgba(255,255,255,0.12);
     border-radius: 14px;
     background: rgba(255,255,255,0.07);
     color: #fff;
}
 .tagin-dropdown.show {
     display: flex;
     flex-direction: column;
     max-height: min(75vh, 650px);
     overflow: hidden;
}
 #notificationList {
     flex: 1;
     min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
     overscroll-behavior-y: contain;
     scrollbar-gutter: stable;
     -webkit-overflow-scrolling: touch;
}
 .tagin-notification-footer {
     display: flex;
     gap: 12px;
     margin-top: 12px;
     padding-top: 12px;
     border-top: 1px solid rgba(255,255,255,.08);
}
 .tagin-notification-footer .btn {
     flex: 1;
     height: 36px;
     border-radius: 14px;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     transition: .2s;
     font-size: 12px;
}
 #notificationViewAll {
     background: rgba(255,255,255,.06);
     border: 1px solid rgba(255,255,255,.10);
     color: #fff;
}
 #notificationViewAll:hover {
     background: rgba(255,255,255,.10);
     transform: translateY(-1px);
}
 #notificationReadAll {
     background: linear-gradient(135deg, var(--app-primary), color-mix(in srgb, var(--app-primary) 75%, white));
     border: 0;
     color: #fff;
}
 #notificationReadAll:hover {
     filter: brightness(1.08);
     transform: translateY(-1px);
}
 .tagin-notification-footer i {
     font-size: 15px;
}
 @media (min-width: 576px) {
     .tagin-notification {
         margin-bottom: 5px;
    }
}
 @media (max-width: 575px) {
     .tagin-header {
         height: 66px;
         padding: 0 14px;
    }
     .tagin-nav-top {
         height: 66px;
    }
     .tagin-brand img {
         height: 40px;
    }
     .tagin-actions {
         gap: 8px;
    }
     .tagin-dropdown {
         position: fixed !important;
         inset: 0 !important;
         width: 100vw !important;
         min-width: 100vw !important;
         max-width: none !important;
         height: 100dvh !important;
         max-height: 100dvh !important;
         margin: 0 !important;
         padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)) !important;
         border: 0 !important;
         border-radius: 0 !important;
         overflow-x: hidden;
         overflow-y: auto;
         background: #171b36;
         transform: none !important;
         z-index: 999999 !important;
         overscroll-behavior-y: contain;
         -webkit-overflow-scrolling: touch;
    }
     .tagin-dropdown {
         overflow: hidden;
    }
     .tagin-dropdown.show {
         display: flex !important;
         flex-direction: column;
         max-height: 100dvh;
    }
     #notificationList {
         max-height: none;
    }
     .tagin-notification-header {
         position: sticky;
         top: calc(-18px - env(safe-area-inset-top));
         z-index: 2;
         margin: calc(-18px - env(safe-area-inset-top)) -18px 10px;
         padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
         border-bottom: 1px solid rgba(255,255,255,0.09);
         background: rgba(23,27,54,0.96);
         backdrop-filter: blur(18px);
    }
     .tagin-notification-header h4 {
         font-size: 18px;
    }
     .tagin-notification-close {
         display: flex;
    }
     .tagin-notification {
         width: 100%;
         padding: 14px 4px;
         border-bottom: 1px solid rgba(255,255,255,0.07);
         border-radius: 0;
    }
     .tagin-notification img {
         width: 50px;
         height: 50px;
         flex: 0 0 50px;
         border-radius: 16px;
    }
     .tagin-notification > div {
         min-width: 0;
         flex: 1;
    }
     .tagin-notification h5 {
         font-size: 14px;
    }
     .tagin-notification p {
         overflow: hidden;
         font-size: 13px;
         text-overflow: ellipsis;
         white-space: nowrap;
    }
     .tagin-notification-unread::after {
         top: 32px;
         background: var(--app-primary);
    }
}
 @media (min-width: 992px) {
     .nav-header .tagin-menu.d-lg-none, .nav-header .nav-menu.d-lg-none {
         display: none !important;
    }
}

/* ==================== LAYOUT: LEFT NAVIGATION ==================== */
 .tagin-left-nav {
     background: transparent !important;
     padding: 14px;
}
 .tagin-left-content {
     display: flex;
     flex-direction: column;
     gap: 10px;
}
 .tagin-nav-section {
     padding: 18px 14px 12px !important;
     background: rgba(247, 248, 255, 0.80) !important;
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: var(--app-radius-lg) !important;
     box-shadow: var(--app-shadow-card);
     -webkit-backdrop-filter: blur(18px);
     backdrop-filter: blur(18px);
}
 .tagin-nav-caption {
     padding: 0 10px 10px;
     color: #9aa7bb;
     font-size: 12px;
     font-weight: 900;
     letter-spacing: 0.02em;
}
 .tagin-nav-list {
     list-style: none;
     padding-left: 0;
}
 .tagin-nav-link {
     height: 48px !important;
     padding: 0 12px !important;
     border-radius: 18px;
     display: flex !important;
     align-items: center;
     gap: 13px;
     color: rgba(16,19,40,0.62) !important;
     font-weight: 850;
     transition: 0.18s ease;
     position: relative;
}
 .tagin-nav-link:hover, .tagin-nav-link.active {
     background: linear-gradient(135deg, rgba(85,120,255,0.14), rgba(123,92,255,0.10));
     color: #101328 !important;
}
 .tagin-nav-icon {
     width: 38px;
     height: 38px;
     min-width: 38px;
     border-radius: 15px;
     color: #fff !important;
     display: inline-flex !important;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     transition: 0.18s ease;
}
 .tagin-nav-link:hover .tagin-nav-icon, .tagin-nav-link.active .tagin-nav-icon {
     transform: translateY(-1px);
}
 .tagin-count {
     margin-left: auto;
     background: linear-gradient(135deg, #ffb020, #ff7a1a);
     color: #fff;
     min-width: 36px;
     height: 28px;
     padding: 0 9px;
     border-radius: 12px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 900;
     box-shadow: 0 8px 18px rgba(255,122,26,0.25);
}
 .tagin-nav-footer {
     padding: 12px 8px 18px;
     text-align: center;
     color: rgba(16,19,40,0.35);
     font-size: 12px;
     font-weight: 700;
}
 .tagin-nav-list li .tagin-nav-icon {
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.30), transparent 45%), radial-gradient(circle at 80% 90%, rgba(255,255,255,.08), transparent 50%), linear-gradient( 145deg, #7a72ff 0%, #6764ff 30%, #5958f4 65%, #4b53d9 100% );
     border: 1px solid rgba(255,255,255,.18);
}
 .tagin-nav-list li:nth-child(2n) .tagin-nav-icon {
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.30), transparent 45%), radial-gradient(circle at 75% 90%, rgba(255,255,255,.08), transparent 55%), linear-gradient( 145deg, #7d86ff 0%, #6b77f4 22%, #7569e7 55%, #8b5fe0 100% ) !important;
     border: 1px solid rgba(255,255,255,.18);
}
 .tagin-nav-list li:nth-child(3n) .tagin-nav-icon {
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.32), transparent 45%), radial-gradient(circle at 80% 90%, rgba(255,255,255,.08), transparent 55%), linear-gradient( 145deg, #5d9bff 0%, #4f87f2 22%, #4778e8 58%, #5a63db 100% ) !important;
     border: 1px solid rgba(255,255,255,.18);
}
 .tagin-nav-list li:nth-child(4n) .tagin-nav-icon {
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.32), transparent 45%), radial-gradient(circle at 78% 90%, rgba(255,255,255,.10), transparent 55%), linear-gradient( 145deg, #56c6ff 0%, #46acef 28%, #4b87eb 62%, #5c68df 100% ) !important;
     border: 1px solid rgba(255,255,255,.18);
}
 .tagin-nav-list li:nth-child(5n) .tagin-nav-icon {
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.30), transparent 45%), radial-gradient(circle at 80% 90%, rgba(255,255,255,.08), transparent 55%), linear-gradient( 145deg, #8476ff 0%, #6e66fa 26%, #5759ef 60%, #4448d8 100% ) !important;
     border: 1px solid rgba(255,255,255,.18);
}
 .tagin-nav-list li:nth-child(6n) .tagin-nav-icon {
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.32), transparent 45%), radial-gradient(circle at 80% 90%, rgba(255,255,255,.08), transparent 55%), linear-gradient( 145deg, #6ea2ff 0%, #5d87ff 22%, #4f71f1 55%, #5360dc 100% ) !important;
     border: 1px solid rgba(255,255,255,.18);
}
 @media (min-width: 992px) {
     .tagin-left-nav {
         top: 72px !important;
         height: calc(100vh - 72px) !important;
         padding-top: 14px !important;
         overflow-y: auto;
    }
     .tagin-left-content {
         padding-bottom: 20px;
         gap: 0;
         width: 100%;
         height: fit-content !important;
         min-height: 0 !important;
         flex: 0 0 auto;
         align-self: flex-start;
         overflow: hidden;
         background: linear-gradient( 145deg, rgba(255, 255, 255, 0.94), rgba(237, 240, 255, 0.90) );
         border: 1px solid rgba(255, 255, 255, 0.62);
         border-radius: 24px;
         box-shadow: 0 16px 42px rgba(16, 19, 40, 0.14), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
         backdrop-filter: blur(18px);
         -webkit-backdrop-filter: blur(18px);
         margin-top: .25rem;
    }
     .tagin-nav-section{
         border-color: rgba(255, 255, 255, 0.14);
         background: linear-gradient( 145deg, rgba(255, 255, 255, 0.94), rgba(237, 240, 255, 0.90) ) !important;
         border: 1px solid rgba(255, 255, 255, 0.62) !important;
         box-shadow: 0 16px 42px rgba(16, 19, 40, 0.14), 0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
         backdrop-filter: blur(18px);
         -webkit-backdrop-filter: blur(18px);
    }
     .tagin-nav-caption{
         color: rgba(255, 255, 255, 0.46);
    }
     .tagin-nav-link{
         color: rgba(255, 255, 255, 0.84) !important;
    }
     .tagin-nav-link:hover, .tagin-nav-link.active{
         background: rgba(85, 120, 255, 0.16);
         color: #fff !important;
    }
     .tagin-left-nav{
         background: transparent !important;
    }
     .tagin-nav-caption {
         color: #8994aa !important;
    }
     .tagin-nav-link {
         color: #69748a !important;
    }
     .tagin-nav-link:hover, .tagin-nav-link.active {
         background: linear-gradient( 135deg, rgba(85, 120, 255, 0.16), rgba(123, 92, 255, 0.11) ) !important;
         color: #101328 !important;
    }
     .tagin-nav-link.active {
         box-shadow: 0 8px 20px rgba(85, 120, 255, 0.12), 0 0 0 1px rgba(85, 120, 255, 0.08) inset;
    }
     .tagin-nav-footer {
         color: rgba(16, 19, 40, 0.38) !important;
    }
     .tagin-nav-section {
         flex: 0 0 auto;
         background: transparent !important;
         border: 0 !important;
         border-radius: 0 !important;
         box-shadow: none !important;
    }
     .tagin-nav-section + .tagin-nav-section {
         border-top: 1px solid rgba(16, 19, 40, 0.07) !important;
    }
     .tagin-left-nav .nav-content, .tagin-left-nav .tagin-left-content {
         height: auto !important;
         min-height: 0 !important;
    }
}
 @media (max-width: 991.98px) {
     .tagin-nav-footer {
         color: rgba(255, 255, 255, 0.75);
    }
     .navigation.tagin-left-nav.nav-active {
         -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
         background-color: rgba(16, 19, 40, 0.55) !important;
    }
     .navigation.tagin-left-nav.nav-active .nav-content {
         background-color: transparent !important;
    }
     .navigation.tagin-left-nav.nav-active .tagin-nav-section {
         background: rgba(255,255,255,0.72) !important;
         -webkit-backdrop-filter: blur(18px);
         backdrop-filter: blur(18px);
    }
     .navigation.tagin-left-nav.nav-active .container {
         max-width: 100% !important;
         width: 100% !important;
         padding-left: 0 !important;
         padding-right: 0 !important;
         margin: 0 !important;
    }
     .navigation.tagin-left-nav.nav-active .tagin-left-content {
         width: 100%;
         padding: 16px 12px 24px;
         box-sizing: border-box;
    }
     .tagin-nav-link {
         color: #5d667d !important;
         font-weight: 800;
    }
     .tagin-nav-caption {
         color: #5d667d !important;
    }
     .tagin-nav-link.active {
         color: #fff !important;
    }
}

/* ==================== PAGE GROUP: HOME FEED & CAROUSELS ==================== */
 .category-card {
     padding: 4px 0 8px;
}
 .category-card .owl-stage {
     display: flex;
}
 .category-card .owl-item {
     display: flex;
     height: auto;
}
 .tagin-plan-pill {
     position: absolute;
     top: 12px;
     right: 12px;
     z-index: 2;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     color: #fff;
     border-radius: 999px;
     padding: 6px 10px;
     font-size: 10px;
     font-weight: 900;
     box-shadow: 0 8px 18px rgba(85,120,255,0.28);
}
 .tagin-slot-row {
     display: flex;
     justify-content: center;
     gap: 7px;
     margin: 12px 0 14px;
}
 .tagin-slot {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border: 2px solid #fff;
     box-shadow: 0 8px 18px rgba(85,120,255,0.18);
}
 .tagin-slot img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .tagin-slot.empty {
     background: rgba(85,120,255,0.12);
     color: #5578ff;
     border: 2px dashed rgba(85,120,255,0.45);
}
 .tagin-slot.empty:hover {
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     color: #fff;
}
 .tagin-plan-time {
     color: #464d57;
     font-size: 11px;
     font-weight: 800;
     margin: 6px 0 0;
}
 .tagin-plan-time i {
     color: #5578ff;
     margin-right: 5px;
}
 .tagin-story-card {
     width: 205px;
     height: 340px;
     display: flex;
     flex-direction: column;
     border-radius: 24px;
     overflow: hidden;
     background: rgba(255,255,255,0.82);
     border: 1px solid rgba(255,255,255,0.9);
     box-shadow: 0 18px 45px rgba(85,120,255,0.12);
     backdrop-filter: blur(18px);
     transition: 0.18s ease;
}
 .tagin-story-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 24px 60px rgba(85,120,255,0.18);
}
 .tagin-story-cover {
     height: 105px;
     background-size: cover;
     background-position: center;
     position: relative;
}
 .tagin-story-cover::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient( to bottom, rgba(16,19,40,0.02), rgba(16,19,40,0.18) );
}
 .tagin-story-body {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0 18px 18px;
}
 .tagin-story-avatar {
     width: 76px;
     height: 76px;
     margin: -38px auto 10px;
     position: relative;
     z-index: 3;
     border-radius: 50%;
     padding: 4px;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
}
 .tagin-story-avatar img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid #fff;
}
 .tagin-story-body h4 {
     font-size: 15px;
     font-weight: 900;
     color: #101328;
     margin: 0 0 4px;
}
 .tagin-story-body p {
     font-size: 11px;
     font-weight: 700;
     color: #9aa7bb;
     margin: 0 0 12px;
}
 .tagin-story-btn {
     height: 34px;
     padding: 0 16px;
     border-radius: 12px;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     color: #fff !important;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 900;
     margin-top: auto;
}
 .tagin-story-avatar.create {
     width: 76px;
     height: 76px;
     margin: -38px auto 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     transition: transform 0.18s ease;
}
 .tagin-story-avatar.create i {
     font-size: 34px;
     color: #fff;
     line-height: 1;
}
 .tagin-story-card-create {
     background: linear-gradient( 145deg, rgba(85, 120, 255, 0.13), rgba(123, 92, 255, 0.09) ), rgba(245, 246, 255, 0.92);
     border: 1px dashed rgba(85, 120, 255, 0.44);
}
 .tagin-story-card-create:hover .tagin-story-avatar.create {
     transform: scale(1.05);
}
 .tagin-story-card, .tagin-swipe-card, .tagin-events-card{
     background: linear-gradient( 145deg, rgba(255, 255, 255, 0.95), rgba(237, 240, 255, 0.89) );
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: var(--app-radius-lg);
     box-shadow: var(--app-shadow-card);
     -webkit-backdrop-filter: blur(18px);
     backdrop-filter: blur(18px);
}

/* ==================== COMPONENTS: REQUESTS & EVENT PREVIEWS ==================== */
 .tagin-swipe-card {
     background: rgba(255,255,255,0.82);
     border: 1px solid rgba(255,255,255,0.9);
     border-radius: 24px;
     box-shadow: 0 18px 45px rgba(85,120,255,0.10);
     backdrop-filter: blur(18px);
     overflow: hidden;
}
 .tagin-swipe-header {
     padding: 20px 22px;
     border-bottom: 1px solid rgba(16,19,40,0.08);
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 .tagin-swipe-header h4 {
     color: #101328;
     font-size: 15px;
     font-weight: 900;
     margin: 0;
}
 .tagin-swipe-header p {
     color: #8d9ab0;
     font-size: 12px;
     font-weight: 700;
     margin: 4px 0 0;
}
 .tagin-swipe-header a {
     color: var(--app-primary);
     font-size: 12px;
     font-weight: 900;
}
 .tagin-swipe-request {
     padding: 16px 18px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
}
 .tagin-swipe-request + .tagin-swipe-request {
     border-top: 1px solid rgba(16,19,40,0.06);
}
 .tagin-swipe-user {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 0;
}
 .tagin-swipe-user img {
     width: 48px;
     height: 48px;
     min-width: 48px;
     border-radius: 17px;
     object-fit: cover;
     border: 3px solid #fff;
     box-shadow: 0 8px 20px rgba(85,120,255,0.16);
}
 .tagin-swipe-user h5 {
     color: #101328;
     font-size: 14px;
     font-weight: 900;
     margin: 0 0 4px;
}
 .tagin-swipe-user p {
     color: #8d9ab0;
     font-size: 11px;
     font-weight: 700;
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 .tagin-swipe-user p i {
     color: var(--app-primary);
     margin-right: 3px;
}
 .tagin-swipe-actions {
     display: flex;
     align-items: center;
     gap: 8px;
     flex: 0 0 auto;
}
 .tagin-swipe-actions a {
     width: 38px;
     height: 38px;
     border-radius: 14px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: 0.18s ease;
}
 .tagin-swipe-no {
     background: rgba(16,19,40,0.06);
     color: #464d57 !important;
}
 .tagin-swipe-yes {
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     color: #fff !important;
     box-shadow: 0 10px 22px rgba(85,120,255,0.22);
}
 .tagin-swipe-actions a:hover {
     transform: translateY(-2px);
}
 .tagin-events-card {
     background: rgba(255,255,255,0.82);
     border: 1px solid rgba(255,255,255,0.9);
     border-radius: 24px;
     box-shadow: 0 18px 45px rgba(85,120,255,0.10);
     backdrop-filter: blur(18px);
     overflow: hidden;
}
 .tagin-events-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 22px;
     border-bottom: 1px solid rgba(16,19,40,0.08);
}
 .tagin-events-header h4 {
     margin: 0;
     font-size: 15px;
     font-weight: 900;
     color: #101328;
}
 .tagin-events-header p {
     margin: 4px 0 0;
     font-size: 12px;
     font-weight: 700;
     color: #8d9ab0;
}
 .tagin-events-header a {
     color: var(--app-primary);
     font-size: 12px;
     font-weight: 900;
}
 .tagin-event-item {
     display: flex;
     gap: 16px;
     padding: 18px 22px;
}
 .tagin-event-item + .tagin-event-item {
     border-top: 1px solid rgba(16,19,40,0.06);
}
.tagin-event-cancel-link {
     color: #d94a5a !important;
     border-color: rgba(217, 74, 90, 0.22) !important;
     background: rgba(217, 74, 90, 0.07) !important;
}
 .tagin-event-cancel-link:hover {
     color: #bd3344 !important;
     border-color: rgba(217, 74, 90, 0.38) !important;
     background: rgba(217, 74, 90, 0.13) !important;
}
 .tagin-event-date {
     width: 64px;
     min-width: 64px;
     height: 72px;
     border-radius: 20px;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     color: #fff;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 25px rgba(85,120,255,0.25);
}
 .tagin-event-date.purple {
     background: linear-gradient(135deg, #7b5cff, #9d5cff);
}
 .tagin-event-date.orange {
     background: linear-gradient(135deg, #ff9f43, #ff6b6b);
}
 .tagin-event-date span {
     font-size: 10px;
     font-weight: 800;
     letter-spacing: 1px;
}
 .tagin-event-date strong {
     font-size: 24px;
     line-height: 1;
}
 .tagin-event-content {
     flex: 1;
     min-width: 0;
}
 .tagin-event-top {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
}
 .tagin-event-top h5 {
     margin: 0;
     color: #101328;
     font-size: 14px;
     font-weight: 900;
}
 .tagin-event-content p {
     margin: 0 0 6px;
     color: #8d9ab0;
     font-size: 12px;
     font-weight: 700;
}
 .tagin-event-content i {
     width: 16px;
     color: var(--app-primary);
}
 .tagin-event-people {
     display: flex;
     align-items: center;
     margin-top: 12px;
}
 .tagin-event-people img, .tagin-event-people span {
     object-fit: cover;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     margin-left: -8px;
     border: 2px solid #fff;
}
 .tagin-event-people img:first-child, .tagin-event-people span:first-child {
     margin-left: 0;
}
 .tagin-event-people span {
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--app-primary);
     color: #fff;
     font-size: 10px;
     font-weight: 800;
}
 @media (max-width: 575px) {
     .tagin-swipe-header {
         padding: 18px;
    }
     .tagin-swipe-request {
         padding: 14px 16px;
    }
     .tagin-swipe-user img {
         width: 44px;
         height: 44px;
         border-radius: 15px;
    }
     .tagin-event-item {
         padding: 16px;
    }
     .tagin-event-date {
         width: 58px;
         min-width: 58px;
         height: 66px;
    }
     .tagin-event-top {
         flex-wrap: wrap;
    }
}

/* ==================== COMPONENT: PWA INSTALL CARD ==================== */
.tagin-install-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    background: rgba(7, 10, 26, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tagin-install-overlay.is-visible {
    display: flex;
}
.tagin-install-sheet {
    position: relative;
    width: min(100%, 460px);
    max-height: calc(100svh - 36px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background: linear-gradient(155deg, #202550 0%, #151936 48%, #101328 100%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
    color: #fff;
    animation: taginInstallSheetIn 0.32s ease both;
}
.tagin-install-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}
.tagin-install-close:active {
    transform: scale(0.94);
}
.tagin-install-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 48px;
    margin-bottom: 28px;
}
.tagin-install-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 8px;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.tagin-install-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 11px;
}
.tagin-install-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.tagin-install-brand-text span {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.tagin-install-brand-text small {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.tagin-install-content {
    text-align: left;
}
.tagin-install-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 11px;
    border: 1px solid rgba(145, 132, 255, 0.28);
    border-radius: 999px;
    background: rgba(111, 93, 255, 0.13);
    color: #cbc5ff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.tagin-install-content h2 {
    max-width: 320px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(1.85rem, 8vw, 2.45rem);
    font-weight: 850;
    line-height: 1.02;
    letter-spacing: -0.045em;
}
.tagin-install-content > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.98rem;
    line-height: 1.55;
}
.tagin-install-benefits {
    display: grid;
    gap: 12px;
    margin-top: 25px;
}
.tagin-install-benefit {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.055);
}
.tagin-install-benefit > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(120, 105, 255, 0.3), rgba(75, 197, 255, 0.16));
    color: #d4d0ff;
    font-size: 1rem;
}

/* ==================== COMPONENT: PWA PUSH NOTIFICATIONS ==================== */
.tagin-install-benefit div {
    min-width: 0;
}
.tagin-install-benefit strong,
.tagin-install-benefit small {
    display: block;
}
.tagin-install-benefit strong {
    color: #fff;
    font-size: 0.91rem;
    font-weight: 750;
}
.tagin-install-benefit small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.78rem;
    line-height: 1.35;
}
.tagin-install-actions {
    display: grid;
    gap: 10px;
    margin-top: 26px;
}
.tagin-install-primary,
.tagin-install-secondary {
    width: 100%;
    min-height: 52px;
    border-radius: 16px;
    font-weight: 750;
    cursor: pointer;
}
.tagin-install-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    background: linear-gradient(135deg, #7467ff 0%, #9a66ff 100%);
    box-shadow: 0 13px 30px rgba(111, 93, 255, 0.34);
    color: #fff;
}
.tagin-install-primary:active {
    transform: translateY(1px) scale(0.99);
}
.tagin-install-secondary {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
}
body.tagin-install-open {
    overflow: hidden;
}
@keyframes taginInstallSheetIn {
    from {
        opacity: 0;
        transform: translateY(34px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@media (min-width: 768px) {
    .tagin-install-overlay,
    .tagin-install-overlay.is-visible {
        display: none !important;
    }
}
@media (max-width: 380px) {
    .tagin-install-overlay {
        padding: 10px;
    }
    .tagin-install-sheet {
        padding: 20px;
        border-radius: 23px;
    }
    .tagin-install-content h2 {
        font-size: 1.8rem;
    }
    .tagin-install-brand {
        margin-bottom: 22px;
    }
}
.tagin-push-overlay {
    position: fixed;
    inset: 0;
    z-index: 100010;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    background: rgba(7, 10, 26, 0.76);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.tagin-push-overlay.is-visible {
    display: flex;
}
.tagin-push-sheet {
    position: relative;
    width: min(100%, 440px);
    max-height: calc(100svh - 36px);
    overflow-y: auto;
    padding: 28px 24px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background: linear-gradient(155deg, #202550 0%, #151936 52%, #101328 100%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    animation: taginPushSheetIn 0.32s ease both;
}
.tagin-push-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}
.tagin-push-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 4px auto 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(116, 103, 255, 0.4), rgba(91, 193, 255, 0.22));
    box-shadow: 0 18px 42px rgba(84, 76, 219, 0.3);
    color: #fff;
    font-size: 1.8rem;
}
.tagin-push-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #bbb4ff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tagin-push-sheet h2 {
    max-width: 350px;
    margin: 0 auto 12px;
    color: #fff;
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.04em;
}
.tagin-push-sheet > p {
    max-width: 350px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.96rem;
    line-height: 1.55;
}
.tagin-push-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 24px 0;
}
.tagin-push-benefits div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 86px;
    padding: 12px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
}
.tagin-push-benefits i {
    color: #c5c0ff;
    font-size: 1rem;
}
.tagin-push-benefits span {
    color: rgba(255, 255, 255, 0.77);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
}
.tagin-push-primary,
.tagin-push-secondary {
    width: 100%;
    min-height: 52px;
    border-radius: 16px;
    font-weight: 750;
    cursor: pointer;
}
.tagin-push-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    background: linear-gradient(135deg, #7467ff 0%, #9a66ff 100%);
    box-shadow: 0 13px 30px rgba(111, 93, 255, 0.34);
    color: #fff;
}
.tagin-push-secondary {
    margin-top: 8px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
}
body.tagin-push-open {
    overflow: hidden;
}
@keyframes taginPushSheetIn {
    from {
        opacity: 0;
        transform: translateY(32px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@media (min-width: 768px) {
    .tagin-push-overlay,
    .tagin-push-overlay.is-visible {
        display: none !important;
    }
}

 

 

 

 

 

 @media (min-width: 992px) {

     

}

 

 

 

 

 @media (max-width: 575px) {

     

}

/* ==================== LAYOUT: MOBILE FOOTER ==================== */
 .tagin-footer-link {
     width: 58px;
     height: 54px;
     border-radius: 20px;
     color: rgba(255,255,255,0.58) !important;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
     font-size: 11px;
     font-weight: 900;
     transition: 0.18s ease;
}
 .tagin-footer-link i {
     font-size: 18px;
}
 .tagin-footer-link span {
     line-height: 1;
}
 .tagin-footer-link.active, .tagin-footer-link:hover {
     background: rgba(85,120,255,0.16);
     color: #fff !important;
}
 .tagin-footer-create {
     width: 58px;
     height: 58px;
     margin-top: -34px;
     border-radius: 22px;
     background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
     color: #fff !important;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 16px 36px rgba(85,120,255,0.38);
     border: 4px solid rgba(36,39,57,0.94);
     border-color: rgba(36, 39, 57, 0.94);
}
 .tagin-footer-create i {
     font-size: 22px;
}
 @media (max-width: 380px) {
     .tagin-footer-link {
         width: 50px;
    }
}

/* ==================== GLOBAL: RESPONSIVE UTILITIES ==================== */
 .form-control {
     background: rgba(255,255,255,0.08);
     border: 1px solid rgba(255,255,255,0.15);
     border-radius: 14px;
     padding: 13px 15px;
}
 .form-control:focus {
     background: rgba(255,255,255,0.12);
     border-color: var(--app-primary);
     box-shadow: 0 0 0 0.25rem rgba(85,120,255,0.18);
}
 .form-control::placeholder {
     color: rgba(255,255,255,0.45);
}
 .btn-app-primary {
     background: linear-gradient(135deg, var(--app-primary), #7b5cff);
     color: #fff;
     border: none;
     border-radius: 14px;
     padding: 13px;
     font-weight: 700;
}
 .btn-app-primary:hover {
     color: #fff;
     opacity: 0.92;
}
.btn-app-secondary {
    background: rgba(255, 255, 255, 0.85);
    color: var(--app-primary);
    border: 1px solid rgba(123, 92, 255, 0.18);
    border-radius: 14px;
    padding: 13px;
    font-weight: 700;
}
.btn-app-secondary:hover {
    background: #fff;
    color: var(--app-primary);
    border-color: rgba(123, 92, 255, 0.35);
    box-shadow: 0 8px 22px rgba(123, 92, 255, 0.12);
    transform: translateY(-1px);
}
 .btn-app-outline {
     border: 1px solid rgba(255,255,255,0.22);
     color: #fff;
     border-radius: 14px;
     padding: 13px;
     font-weight: 700;
}
 .btn-app-outline:hover {
     background: rgba(255,255,255,0.08);
     color: #fff;
}

 

 .tagin-mobile-footer {
     position: fixed;
     left: 14px;
     right: 14px;
     bottom: 14px;
     height: 74px;
     z-index: 999;
     background: rgba(36,39,57,0.92);
     border: 1px solid rgba(255,255,255,0.14);
     border-radius: 28px;
     backdrop-filter: blur(18px);
     box-shadow: 0 18px 50px rgba(16,19,40,0.35);
     display: flex;
     align-items: center;
     justify-content: space-around;
     padding: 8px 10px;
     transition: opacity .18s ease, transform .18s ease;
}
.tagin-mobile-footer.tagin-keyboard-open {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
}
 .tagin-message {
     display: flex;
     margin-bottom: 12px;
}
 .tagin-message.self {
     justify-content: flex-end;
}
 .tagin-message-content {
     max-width: 78%;
     padding: 12px 15px;
     border-radius: 18px 18px 18px 6px;
     background: rgba(16,19,40,0.06);
     color: #101328;
     font-size: 13px;
     font-weight: 700;
     line-height: 1.6;
}
 .tagin-message.self .tagin-message-content {
     background: linear-gradient(135deg, rgba(85,120,255,0.16), rgba(123,92,255,0.14));
     color: #243066;
     border-radius: 18px 18px 6px 18px;
}
 .tagin-date-break {
     color: #9aa7bb;
     font-size: 11px;
     font-weight: 800;
     margin: 6px 0 12px;
}
 .tagin-typing {
     float: right;
     background: rgba(16,19,40,0.05);
     padding: 12px 18px;
     border-radius: 18px;
}
 .form-control[readonly] {
     background-color: #35384b;
     color: #ffffff;
     border-color: #5b5f77;
     cursor: default;
     opacity: 1;
}
 .form-control[readonly]:focus {
     background-color: #35384b;
     color: #ffffff;
     border-color: #6b70ff;
     box-shadow: none;
}
 @media (min-width: 992px) {
     .tagin-mobile-footer {
         display: none !important;
    }
}
 @media (max-width: 380px) {
     .tagin-mobile-footer {
         left: 8px;
         right: 8px;
         bottom: 8px;
    }
}

/* ==================== GLOBAL: ANIMATIONS ==================== */
 @keyframes taginBounce {
     0%, 80%, 100% {
         transform: translateY(0);
         opacity: 0.5;
    }
     40% {
         transform: translateY(-8px);
         opacity: 1;
    }
}
 @keyframes fadeInError {
     from {
         opacity: 0;
         transform: translateY(-6px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}

/* ==================== PAGE: 404 ==================== */
 .tagin-404-card {
     position: relative;
     min-height: 580px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 60px 30px;
     background: linear-gradient(145deg, #ffffff 0%, #f4f6ff 55%, #eef1ff 100%);
     border-radius: 24px;
     box-shadow: 0 8px 30px rgba(16, 19, 40, 0.08);
}
 .tagin-404-content {
     position: relative;
     z-index: 2;
     max-width: 620px;
     margin: auto;
     text-align: center;
}
 .tagin-404-icon {
     width: 82px;
     height: 82px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 18px;
     color: #ffffff;
     font-size: 32px;
     background: linear-gradient(135deg, #4e4694, #7d65d8);
     border-radius: 24px;
     box-shadow: 0 12px 30px rgba(78, 70, 148, 0.3);
     transform: rotate(-4deg);
}
 .tagin-404-icon i {
     transform: rotate(4deg);
}
 .tagin-404-number {
     margin-bottom: 4px;
     color: #4e4694;
     font-size: clamp(78px, 12vw, 140px);
     font-weight: 900;
     line-height: 0.9;
     letter-spacing: -8px;
     opacity: 0.12;
}
 .tagin-404-content h1 {
     margin: -30px 0 14px;
     color: #101328;
     font-size: clamp(28px, 4vw, 42px);
     font-weight: 800;
     letter-spacing: -1px;
}
 .tagin-404-content > p {
     max-width: 520px;
     margin: 0 auto 30px;
     color: #777b91;
     font-size: 16px;
     line-height: 1.7;
}
 .tagin-404-actions {
     display: flex;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
}
 .tagin-404-primary, .tagin-404-secondary {
     min-height: 48px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     padding: 0 22px;
     border-radius: 12px;
     font-size: 14px;
     font-weight: 700;
     text-decoration: none;
     transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
 .tagin-404-primary {
     color: #ffffff;
     background: linear-gradient(135deg, #4e4694, #6f5bc3);
     border: 0;
     box-shadow: 0 8px 20px rgba(78, 70, 148, 0.25);
}
 .tagin-404-primary:hover {
     color: #ffffff;
     transform: translateY(-2px);
     box-shadow: 0 12px 25px rgba(78, 70, 148, 0.32);
}
 .tagin-404-secondary {
     color: #4e4694;
     background: #ffffff;
     border: 1px solid #dfe2ef;
     cursor: pointer;
}
 .tagin-404-secondary:hover {
     background: #f5f6fb;
     transform: translateY(-2px);
}
 .tagin-404-decoration {
     position: absolute;
     border-radius: 50%;
     filter: blur(1px);
}
 .tagin-404-decoration-one {
     width: 270px;
     height: 270px;
     top: -120px;
     right: -80px;
     background: rgba(125, 101, 216, 0.1);
}
 .tagin-404-decoration-two {
     width: 220px;
     height: 220px;
     bottom: -100px;
     left: -80px;
     background: rgba(78, 70, 148, 0.08);
}
 @media (max-width: 991.98px) {
     .tagin-404-card {
         min-height: 480px;
         padding: 45px 20px;
    }
     .tagin-404-number {
         letter-spacing: -4px;
    }
     .tagin-404-content h1 {
         margin-top: -20px;
    }
}
 @media (max-width: 575.98px) {
     .tagin-404-card {
         min-height: 430px;
         padding: 35px 18px;
         border-radius: 14px;
    }
     .tagin-404-icon {
         width: 68px;
         height: 68px;
         font-size: 27px;
         border-radius: 20px;
    }
     .tagin-404-content h1 {
         font-size: 27px;
    }
     .tagin-404-content > p {
         font-size: 14px;
    }
     .tagin-404-primary, .tagin-404-secondary {
         width: 100%;
    }
}
 @media (max-width: 991.98px) {
     .row {
         --bs-gutter-x: 0 !important;
    }
}

/* ==================== PAGE: ERROR ==================== */
 .tagin-error-card {
     min-width: 100%;
     padding: 3.5rem;
     background: linear-gradient(145deg, #ffffff 0%, #f4f6ff 55%, #eef1ff 100%);
     border: 1px solid rgba(255,255,255,.45);
     border-radius: 24px;
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     box-shadow: 0 20px 60px rgba(16,19,40,.18), inset 0 1px 0 rgba(255,255,255,.65);
     position: relative;
     overflow: hidden;
}
 .system-error-icon {
     width: 76px;
     height: 76px;
     margin-left: auto;
     margin-right: auto;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 193, 7, 0.12);
     border: 1px solid rgba(255, 193, 7, 0.25);
     color: #ffc107;
     font-size: 30px;
}

/* ==================== PAGE: PROFILE ==================== */
 .tagin-profile-page {
     width: 100%;
     min-width: 0;
}
 .tagin-profile-layout {
     display: grid;
     grid-template-columns: minmax(340px, 0.88fr) minmax(500px, 1.12fr);
     align-items: start;
     gap: 24px;
}
 .tagin-profile-interest-editor {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}
 .tagin-profile-interest-category {
     padding: 1rem;
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 1rem;
     background: rgba(255, 255, 255, .025);
}
 .tagin-profile-interest-category-heading {
     display: flex;
     align-items: center;
     gap: .8rem;
     margin-bottom: 1rem;
}
 .tagin-profile-interest-category-icon {
     display: flex;
     flex: 0 0 42px;
     width: 42px;
     height: 42px;
     align-items: center;
     justify-content: center;
     border-radius: 13px;
     background: linear-gradient(135deg, #5c7cff, #7b4dff);
     color: #fff;
}
 .tagin-profile-interest-category-heading span {
     display: block;
     margin-bottom: .1rem;
     color: rgba(255, 255, 255, .48);
     font-size: .67rem;
     font-weight: 800;
     letter-spacing: .04rem;
     text-transform: uppercase;
}
 .tagin-profile-interest-category-heading h3 {
     margin: 0;
     color: #fff;
     font-size: .95rem;
     font-weight: 800;
}
 .tagin-profile-interest-hidden[hidden] {
     display: none;
}
 .tagin-profile-interest-toggle {
     appearance: none;
     font: inherit;
     cursor: pointer;
     border: 1px dashed rgba(98, 92, 255, .45);
     background: rgba(98, 92, 255, .08);
     color: #5558d9;
     transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
 .tagin-profile-interest-toggle:hover {
     background: rgba(98, 92, 255, .14);
     border-color: rgba(98, 92, 255, .7);
     transform: translateY(-1px);
}
 .tagin-profile-interest-toggle span {
     background: rgba(98, 92, 255, .14);
     color: #625cff;
}
 .tagin-profile-interest-toggle[aria-expanded="true"] span i {
     transform: rotate(45deg);
}
 .tagin-profile-interest-toggle span i {
     transition: transform .2s ease;
}
 .tagin-profile-interest-category-options {
     display: flex;
     flex-wrap: wrap;
     gap: .65rem;
}
 .tagin-profile-interest-category-options .tagin-profile-interest-edit {
     margin: 0;
     cursor: pointer;
}
 .tagin-profile-interest-category-options .tagin-profile-interest-edit input {
     position: absolute;
     width: 1px;
     height: 1px;
     opacity: 0;
     pointer-events: none;
}
 .tagin-profile-media {
     position: sticky;
     top: 18px;
     min-width: 0;
}
 .tagin-profile-gallery {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: min(760px, calc(100vh - 120px));
     min-height: 580px;
     border: 1px solid rgba(255, 255, 255, 0.38);
     border-radius: 30px;
     background: #101328;
     box-shadow: 0 24px 60px rgba(16, 19, 40, 0.24);
}
 .tagin-profile-gallery-track {
     display: flex;
     width: 100%;
     height: 100%;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     scrollbar-width: none;
}
 .tagin-profile-gallery-track::-webkit-scrollbar {
     display: none;
}
 .tagin-profile-photo {
     position: relative;
     flex: 0 0 100%;
     width: 100%;
     height: 100%;
     overflow: hidden;
     scroll-snap-align: start;
     scroll-snap-stop: always;
     background: #101328;
}
 .tagin-profile-photo img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     object-position: center 25%;
}
 .tagin-profile-photo-shade {
     position: absolute;
     inset: 0;
     pointer-events: none;
     background: linear-gradient(to bottom, transparent 52%, rgba(10, 12, 31, 0.16) 67%, rgba(10, 12, 31, 0.88) 100%);
}
 .tagin-profile-photo-content {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: flex-end;
     padding: 34px;
     pointer-events: none;
}
 .tagin-profile-mobile-identity {
     width: 100%;
     color: #ffffff;
}
 .tagin-profile-name-line {
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
     gap: 10px;
}
 .tagin-profile-name-line h1 {
     margin: 0;
     color: inherit;
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 850;
     line-height: 1.05;
}
 .tagin-profile-name-line > span {
     color: inherit;
     font-size: 1.55rem;
     font-weight: 600;
     opacity: 0.8;
}
 .tagin-profile-location {
     display: flex;
     align-items: center;
     gap: 8px;
     color: inherit;
     opacity: 0.82;
}
 .tagin-profile-gallery-progress {
     position: absolute;
     z-index: 5;
     top: 15px;
     left: 18px;
     right: 18px;
     display: flex;
     gap: 5px;
}
 .tagin-profile-gallery-progress button {
     flex: 1;
     height: 4px;
     padding: 0;
     border: 0;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.4);
     transition: background 160ms ease, transform 160ms ease;
}
 .tagin-profile-gallery-progress button.is-active {
     background: #ffffff;
     transform: scaleY(1.25);
}
 .tagin-gallery-arrow {
     position: absolute;
     z-index: 6;
     top: 50%;
     width: 44px;
     height: 44px;
     border: 1px solid rgba(255, 255, 255, 0.34);
     border-radius: 50%;
     background: rgba(16, 19, 40, 0.52);
     color: #ffffff;
     display: grid;
     place-items: center;
     transform: translateY(-50%);
     cursor: pointer;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
}
 .tagin-gallery-arrow-left {
     left: 16px;
}
 .tagin-gallery-arrow-right {
     right: 16px;
}
 .tagin-profile-content {
     min-width: 0;
}
 .tagin-profile-desktop-header, .tagin-profile-card {
     position: relative;
     overflow: hidden;
     background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(231, 236, 251, 0.88));
     border: 1px solid rgba(255, 255, 255, 0.72);
     box-shadow: 0 16px 42px rgba(16, 19, 40, 0.1);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
}
 .tagin-profile-desktop-header::before, .tagin-profile-card::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     background: linear-gradient(125deg, rgba(255, 255, 255, 0.3), transparent 34%);
}
 .tagin-profile-desktop-header > *, .tagin-profile-card > * {
     position: relative;
     z-index: 1;
}
 .tagin-profile-desktop-header {
     display: flex;
     align-items: center;
     gap: 18px;
     padding: 24px;
     border-radius: 26px;
}
 .tagin-profile-desktop-avatar {
     flex: 0 0 auto;
     width: 86px;
     height: 86px;
     overflow: hidden;
     border: 4px solid rgba(255, 255, 255, 0.92);
     border-radius: 50%;
     background: #ffffff;
     box-shadow: 0 10px 24px rgba(16, 19, 40, 0.16);
}
 .tagin-profile-desktop-avatar img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
}
 .tagin-profile-desktop-heading {
     flex: 1;
     min-width: 0;
     color: #101328;
}
 .tagin-profile-desktop-heading .tagin-profile-name-line h1 {
     font-size: clamp(1.65rem, 3vw, 2.35rem);
}
 .tagin-profile-desktop-heading .tagin-profile-name-line > span {
     color: #656981;
}
 .tagin-profile-desktop-heading .tagin-profile-location {
     color: #6f738b;
}
 .tagin-profile-status {
     color: #6f738b;
     font-size: 0.78rem;
     font-weight: 700;
}
 .tagin-profile-status i {
     font-size: .55rem;
}
 .tagin-profile-mobile-actions {
     display: none;
}
 .tagin-profile-mobile-actions.is-profile {
     grid-template-columns: repeat(3, auto);
     justify-content: center;
}
 .tagin-profile-mobile-actions.is-swiper {
     grid-template-columns: 1fr auto auto auto 1fr;
}
 .tagin-profile-card {
     margin-top: 1rem;
     padding: 26px;
     border-radius: 26px;
}
 .tagin-profile-card-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
     margin-bottom: 22px;
}
 .tagin-profile-eyebrow {
     display: block;
     margin-bottom: 4px;
     color: #7165d1;
     font-size: 0.72rem;
     font-weight: 850;
     letter-spacing: 0.12em;
     text-transform: uppercase;
}
 .tagin-profile-card-heading h2 {
     margin: 0;
     color: #101328;
     font-size: 1.34rem;
     font-weight: 850;
}
 .tagin-profile-edit-link {
     border: 0;
     background: transparent;
     color: #6256bd;
     display: flex;
     align-items: center;
     gap: 7px;
     font-size: 0.84rem;
     font-weight: 800;
     cursor: pointer;
}
 .tagin-profile-bio {
     margin: 0;
     color: #5d6178;
     font-size: 0.96rem;
     line-height: 1.75;
}
 .tagin-profile-interest-list {
     display: flex;
     flex-wrap: wrap;
     gap: 11px;
}
 .tagin-profile-interest {
     display: flex;
     align-items: center;
     gap: 9px;
     padding: 9px 15px 9px 9px;
     border: 1px solid rgba(78, 70, 148, 0.13);
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.82);
     color: #252943;
     font-size: 0.86rem;
     box-shadow: 0 7px 18px rgba(16, 19, 40, 0.05);
}
 .tagin-profile-interest > span {
     width: 33px;
     height: 33px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: linear-gradient(135deg, #5577ff, #795cff);
     color: #ffffff;
}
 .tagin-profile-interest strong {
     font-weight: 750;
}
 .tagin-profile-looking-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px;
}
 .tagin-profile-looking-item {
     display: flex;
     align-items: center;
     gap: 14px;
     min-width: 0;
     padding: 17px;
     border: 1px solid rgba(78, 70, 148, 0.12);
     border-radius: 18px;
     background: rgba(255, 255, 255, 0.78);
     box-shadow: 0 8px 20px rgba(16, 19, 40, 0.05);
}
 .tagin-profile-looking-icon {
     flex: 0 0 auto;
     width: 46px;
     height: 46px;
     display: grid;
     place-items: center;
     border-radius: 15px;
     background: linear-gradient(135deg, rgba(85, 119, 255, 0.18), rgba(121, 92, 255, 0.2));
     color: #594fc1;
     font-size: 1.05rem;
}
 .tagin-profile-looking-item strong, .tagin-profile-looking-item span {
     display: block;
}
 .tagin-profile-looking-item strong {
     color: #101328;
     font-size: 0.92rem;
}
 .tagin-profile-looking-item span {
     margin-top: 3px;
     color: #80849a;
     font-size: 0.75rem;
     line-height: 1.35;
}
 .tagin-profile-detail-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px;
}
 .tagin-profile-detail {
     display: flex;
     align-items: center;
     gap: 13px;
     min-width: 0;
     padding: 16px;
     border: 1px solid rgba(78, 70, 148, 0.1);
     border-radius: 17px;
     background: rgba(255, 255, 255, 0.78);
}
 .tagin-profile-detail-icon {
     flex: 0 0 auto;
     width: 42px;
     height: 42px;
     display: grid;
     place-items: center;
     border-radius: 13px;
     background: rgba(78, 70, 148, 0.1);
     color: #574cad;
}
 .tagin-profile-detail > div:last-child {
     min-width: 0;
}
 .tagin-profile-detail span, .tagin-profile-detail strong {
     display: block;
}
 .tagin-profile-detail span {
     margin-bottom: 3px;
     color: #7c8097;
     font-size: 0.74rem;
     font-weight: 700;
}
 .tagin-profile-detail strong {
     color: #101328;
     font-size: 0.91rem;
     white-space: normal;
     overflow: visible;
     text-overflow: clip;
     line-height: 1.35;
}
 .tagin-profile-empty {
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 18px;
     border: 1px dashed rgba(78, 70, 148, 0.24);
     border-radius: 18px;
     background: rgba(255, 255, 255, 0.46);
}
 .tagin-profile-empty > i {
     flex: 0 0 auto;
     width: 46px;
     height: 46px;
     display: grid;
     place-items: center;
     border-radius: 15px;
     background: rgba(78, 70, 148, 0.1);
     color: #574cad;
}
 .tagin-profile-empty strong, .tagin-profile-empty span {
     display: block;
}
 .tagin-profile-empty strong {
     color: #101328;
}
 .tagin-profile-empty span {
     margin-top: 3px;
     color: #7c8097;
     font-size: 0.8rem;
}
 .profile-unavailable {
     max-width: 620px;
     margin: 60px auto;
     padding: 45px;
     text-align: center;
     background: rgba(255, 255, 255, 0.9);
}
 .profile-unavailable > i {
     color: #6256bd;
     font-size: 3rem;
}
 .profile-unavailable h1 {
     margin: 20px 0 8px;
     color: #101328;
}
 .profile-unavailable p {
     color: #777b94;
}
 .tagin-profile-desktop-actions {
     position: absolute;
     left: 50%;
     bottom: -40px;
     transform: translateX(-50%);
     z-index: 20;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 22px;
     width: max-content;
}
 .tagin-profile-desktop-actions .tagin-profile-round-action {
     display: grid;
     place-items: center;
     flex: 0 0 auto;
     width: 58px;
     height: 58px;
     padding: 0;
     border: 5px solid #e3ebfb;
     border-radius: 50%;
     background: #ffffff;
     font-size: 1.25rem;
     box-shadow: 0 12px 30px rgba(16, 19, 40, 0.18);
     cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 .tagin-profile-desktop-actions .tagin-profile-round-action:hover {
     transform: translateY(-3px);
     box-shadow: 0 16px 34px rgba(16, 19, 40, 0.24);
}
 .tagin-profile-desktop-actions .tagin-profile-round-large {
     width: 70px;
     height: 70px;
     font-size: 1.4rem;
}
 .tagin-profile-desktop-actions .tagin-profile-round-rewind {
     color: #f3a629;
}
 .tagin-profile-desktop-actions .tagin-profile-round-pass {
     color: #ff4f67;
}
 .tagin-profile-desktop-actions .tagin-profile-round-superlike {
     color: #5c6dff;
}
 .tagin-profile-desktop-actions .tagin-profile-round-like {
     color: #36c98f;
}
 .tagin-profile-desktop-actions .tagin-profile-round-message {
     background: linear-gradient(135deg, #5577ff, #795cff);
     color: #ffffff;
}
 .tagin-profile-mobile-actions.is-profile {
     grid-template-columns: repeat(4, auto);
     justify-content: center;
     column-gap: 28px;
}
 .tagin-profile-mobile-actions.is-profile .tagin-profile-round-pass, .tagin-profile-mobile-actions.is-profile .tagin-profile-round-superlike, .tagin-profile-mobile-actions.is-profile .tagin-profile-round-like, .tagin-profile-mobile-actions.is-profile .tagin-profile-round-message {
     justify-self: center;
     transform: none;
}
 .tagin-profile-detail-content {
     flex: 1;
}
 .tagin-profile-detail-title {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: .5rem;
     margin-bottom: .2rem;
}
 .tagin-profile-status {
     margin-top: .35rem;
}
 .tagin-profile-status span {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     font-size: .75rem;
     font-weight: 700;
}
 .tagin-profile-status.is-online i {
     color: #2FBD88;
}
 .tagin-profile-status.is-offline i {
     color: #DC3545;
}
 .tagin-profile-status.is-online i {
     font-size: .55rem;
}
 .tagin-profile-status.is-offline i {
     font-size: .7rem;
}
 .tagin-profile-badge-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     width: 100%;
}
 .tagin-profile-match {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     margin-top: 10px;
     margin-bottom: 8px;
     border-radius: 999px;
     border: 1px solid rgba(255,255,255,.22);
     backdrop-filter: blur(10px);
     font-size: .88rem;
     font-weight: 700;
     color: #fff;
     box-shadow: 0 8px 20px rgba(0,0,0,.18);
     transition: .25s ease;
}
 .tagin-profile-match i {
     font-size: .95rem;
}
 .tagin-profile-incoming-interest {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     margin-top: 10px;
     margin-bottom: 8px;
     padding: 8px 14px;
     border: 1px solid rgba(255,255,255,.22);
     border-radius: 999px;
     color: #fff;
     font-size: .88rem;
     font-weight: 700;
     white-space: nowrap;
     backdrop-filter: blur(10px);
     box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
 .tagin-profile-incoming-interest.wants-to-meet {
     background: rgba(38, 190, 138, .72);
}
 .tagin-profile-incoming-interest.sparked-you {
     background: linear-gradient(135deg, rgba(85,120,255,.88), rgba(123,92,255,.92));
}
 .tagin-profile-incoming-interest i {
     font-size: .95rem;
}
 .tagin-profile-match.oil-water {
     background: rgba(100,100,100,.28);
}
 .tagin-profile-match.polar-opposites {
     background: rgba(52,120,246,.28);
}
 .tagin-profile-match.a-stretch {
     background: rgba(35,181,107,.28);
}
 .tagin-profile-match.common-ground {
     background: rgba(91,201,79,.28);
}
 .tagin-profile-match.getting-warmer {
     background: rgba(255,149,0,.28);
}
 .tagin-profile-match.potential {
     background: rgba(255,194,25,.28);
}
 .tagin-profile-match.strong-match {
     background: rgba(236,72,153,.28);
}
 .tagin-profile-match.great-match {
     background: rgba(124,58,237,.30);
}
 .tagin-profile-match.exceptional-match {
     background: rgba(255,208,0,.30);
}
 .tagin-profile-match.soul-sync {
     background: linear-gradient(135deg,#6D5EF5,#A855F7,#EC4899);
}
 .tagin-profile-match.perfect-match {
     background: linear-gradient(135deg,#FFD54F,#FF66B3,#8B5CF6,#FFD54F);
     background-size: 250% 250%;
     animation: perfectMatchGradient 4s linear infinite;
}
 .tagin-profile-media.perfect-match .tagin-profile-gallery {
     position: relative;
     border: 4px solid transparent;
     background: linear-gradient(#101328,#101328) padding-box, linear-gradient(135deg,#FFD54F,#FF5CB8,#8B5CF6,#FFD54F) border-box;
     background-size: 100% 100%, 300% 300%;
     animation: perfectMatchBorder 8s linear infinite;
}
 .tagin-profile-media.perfect-match .tagin-profile-gallery-progress button.is-active {
     background: linear-gradient(90deg, #FFD54F, #FF5CB8, #8B5CF6);
}
 @keyframes perfectMatchBorder {
     0% {
         background-position: 0% 50%, 0% 50%;
    }
     100% {
         background-position: 0% 50%, 300% 50%;
    }
}
 @keyframes perfectMatchGradient {
     0% {
         background-position: 0% 50%;
    }
     100% {
         background-position: 200% 50%;
    }
}
 @media (min-width: 992px) {
     .tagin-profile-layout {
         display: grid;
         grid-template-columns: minmax(340px, 0.88fr) minmax(500px, 1.12fr);
         align-items: stretch;
         gap: 24px;
         height: calc(100dvh - 104px);
         min-height: 0;
         overflow: hidden;
    }
     .tagin-profile-media {
         position: relative;
         top: auto;
         min-width: 0;
         min-height: 0;
         height: calc(100% - 60px);
         overflow: visible;
    }
     .tagin-profile-gallery {
         position: relative;
         width: 100%;
         height: 100%;
         min-height: 0;
         overflow: hidden;
         border: 1px solid rgba(255,255,255,.38);
         border-radius: 30px;
         background: #101328;
         box-shadow: 0 24px 60px rgba(16,19,40,.24);
    }
     .tagin-profile-content {
         min-width: 0;
         min-height: 0;
         height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
         padding-right: 6px;
         overscroll-behavior: contain;
         isolation: isolate;
         transform: translateZ(0);
         backface-visibility: hidden;
         scrollbar-width: none;
    }
     .tagin-profile-content::-webkit-scrollbar {
         display: none;
    }
     .tagin-profile-content .glass-card {
         transform: translateZ(0);
         backface-visibility: hidden;
    }
     .tagin-profile-desktop-actions {
         position: absolute;
         bottom: -40px;
         left: 50%;
         transform: translateX(-50%);
         z-index: 100;
    }
}
 @media (max-width: 1199px) {
     .tagin-profile-layout {
         grid-template-columns: minmax(310px, 0.82fr) minmax(420px, 1.18fr);
         gap: 18px;
    }
     .tagin-profile-gallery {
         height: min(680px, calc(100vh - 110px));
         min-height: 520px;
    }
     .tagin-profile-desktop-header {
         align-items: flex-start;
         flex-wrap: wrap;
    }
}
 @media (max-width: 991.98px) {
    .tagin-profile-photo:not([data-profile-slide="0"]) .tagin-people-action-row {
        display: none;
    }
     .tagin-profile-layout {
         display: block;
    }
     .tagin-profile-media {
         position: relative;
         top: auto;
    }
     .tagin-profile-gallery {
         width: 100%;
         height: calc(100dvh - var(--tagin-header-height));
         min-height: 0;
         border: 0;
         border-radius: 0;
         box-shadow: none;
    }
     .tagin-profile-photo-content {
         padding: 28px 22px 38px;
         padding-bottom: calc(var(--mobile-nav-height) + 24px);
    }
     .tagin-profile-own .tagin-profile-photo-content {
         padding-bottom: calc(var(--mobile-nav-height) - 24px);
    }
     .tagin-profile-photo-shade {
         background: linear-gradient(to bottom, rgba(10, 12, 31, 0.04) 35%, rgba(10, 12, 31, 0.2) 61%, rgba(10, 12, 31, 0.94) 100%);
    }
     .tagin-gallery-arrow {
         display: none;
    }
     .tagin-profile-content {
         position: relative;
         z-index: 3;
         padding: 0 5px 5px;
         background: linear-gradient(to bottom, #dfe8fb, #e8eefc);
    }
     .tagin-profile-desktop-header {
         display: none;
    }
     .tagin-profile-mobile-actions {
         display: grid;
         grid-template-columns: 1fr auto auto auto 1fr;
         align-items: center;
         column-gap: 18px;
         min-height: 80px;
         width: 100%;
         padding: 0 18px;
         box-sizing: border-box;
         transform: translateY(calc(-1 * var(--mobile-nav-height) * 1.15));
         margin-bottom: calc(-1 * var(--mobile-nav-height) * 0.5);
         pointer-events: none;
    }
     .tagin-profile-mobile-actions button {
         pointer-events: auto;
    }
     .tagin-profile-round-action {
         width: 50px;
         height: 50px;
         border: 5px solid #e3ebfb;
         border-radius: 50%;
         display: grid;
         place-items: center;
         font-size: 1.4rem;
         box-shadow: 0 12px 30px rgba(16, 19, 40, 0.24);
    }
     .tagin-profile-round-large {
         width: 60px;
         height: 60px;
         font-size: 1.35rem;
    }
     .tagin-profile-round-rewind {
         justify-self: start;
         transform: translateY(14px);
         background: #ffffff;
         color: #f3a629;
    }
     .tagin-event-round-rewind {
         justify-self: start;
         background: #ffffff;
         color: #f3a629;
    }
     .tagin-profile-round-pass {
         justify-self: center;
         background: #ffffff;
         color: #ff4f67;
    }
     .tagin-profile-round-superlike {
         justify-self: center;
         background: #ffffff;
         color: #5c6dff;
    }
     .tagin-profile-round-like {
         justify-self: center;
         background: #ffffff;
         color: #36c98f;
    }
     .tagin-profile-round-message {
         justify-self: end;
         transform: translateY(14px);
         background: linear-gradient(135deg, #5577ff, #795cff);
         color: #ffffff;
    }
     .tagin-profile-mobile-actions > .btn {
         max-width: 460px;
         min-height: 54px;
         box-shadow: 0 12px 28px rgba(78, 70, 148, 0.2);
    }
     .tagin-profile-card {
         margin-top: 14px;
         padding: 21px;
         border-radius: 23px;
    }
     .tagin-profile-desktop-actions {
         display: none;
    }
     .tagin-profile-round-action {
         cursor: pointer;
         touch-action: manipulation;
         -webkit-tap-highlight-color: transparent;
         transition: scale 100ms ease, filter 100ms ease, box-shadow 100ms ease;
    }
     .tagin-profile-round-action i {
         transition: scale 100ms ease;
    }
     .tagin-profile-round-action:active {
         scale: 0.9;
         filter: brightness(0.92);
         box-shadow: 0 6px 16px rgba(16, 19, 40, 0.2);
    }
     .tagin-profile-round-action:active i {
         scale: 0.88;
    }
}
 @media (max-width: 575px) {
     .tagin-profile-page {
         margin-left: 0;
         margin-right: 0;
         width: 100%;
    }
     .tagin-profile-gallery {
         width: 100%;
         padding-top: 0;
         min-height: 560px;
         border: 0;
         border-radius: 0;
         box-shadow: none;
    }
     .tagin-profile-gallery-progress {
         top: 12px;
         left: 10px;
         right: 10px;
         gap: 4px;
    }
     .tagin-profile-photo-content {
         padding: 24px 18px 34px;
         padding-bottom: calc(var(--mobile-nav-height) + 15px);
    }
     .tagin-profile-own .tagin-profile-photo-content {
         padding-bottom: calc(var(--mobile-nav-height) - 15px);
    }
     .tagin-profile-content {
         padding-left: 10px;
         padding-right: 10px;
    }
     .tagin-profile-card {
         padding: 19px;
    }
     .tagin-profile-looking-grid, .tagin-profile-detail-grid {
         grid-template-columns: 1fr;
    }
     .tagin-profile-card-heading {
         align-items: flex-start;
    }
}
 @media (max-width: 991.98px) {
     #appContent:has(.tagin-profile-page) {
         width: 100% !important;
         max-width: none !important;
         margin: 0 !important;
         padding: 0 !important;
    }
     .middle-sidebar-left:has(.tagin-profile-page), .middle-sidebar-bottom:has(.tagin-profile-page), .main-content:has(.tagin-profile-page) {
         margin-top: 0 !important;
         padding-top: 0 !important;
         padding-left: 0 !important;
         padding-right: 0 !important;
    }
     .middle-sidebar-left:has(.tagin-profile-page) {
         width: 100% !important;
         max-width: none !important;
    }
     .tagin-profile-page {
         width: 100% !important;
         max-width: none !important;
         margin: 0 !important;
         padding: 0 !important;
    }
     .tagin-profile-layout, .tagin-profile-media, .tagin-profile-gallery {
         width: 100% !important;
         max-width: none !important;
         margin: 0 !important;
    }
}
 .tagin-profile-desktop-meta {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 20px;
     width: 100%;
}
 .tagin-profile-action-row {
     display: flex;
     gap: 10px;
     align-items: center;
}
 .tagin-profile-report-button, .tagin-profile-block-button {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     border: 1px solid rgba(0, 0, 0, .08);
     border-radius: 999px;
     color: #fff;
     font-size: .85rem;
     font-weight: 600;
     line-height: 1;
     cursor: pointer;
     transition: background-color .18s ease, transform .18s ease;
}
 .tagin-profile-report-button {
     background: #2d304a;
}
 .tagin-profile-report-button:hover {
     background: #23263d;
}
 .tagin-profile-block-button {
     background: #7b2434;
}
 .tagin-profile-block-button:hover {
     background: #651d2b;
}
 .tagin-profile-report-button:active, .tagin-profile-block-button:active {
     transform: scale(.96);
}
 .tagin-profile-block-button.is-blocked {
     background: #3f4565;
}
 .tagin-profile-block-button.is-loading {
     opacity: .65;
     cursor: wait;
}
 .tagin-profile-meta-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     width: 100%;
}
 .tagin-profile-romance-indicator {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 4px 10px;
     border-radius: 999px;
     border: 1px solid rgba(255,255,255,.18);
     background: rgba(16,19,40,.35);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     color: rgba(255,255,255,.92);
     font-size: .72rem;
     font-weight: 700;
     white-space: nowrap;
     line-height: 1;
}
 .tagin-profile-romance-indicator i {
     color: #ff8fa3;
     font-size: .78rem;
}
 @media (max-width: 420px) {
     .tagin-profile-badge-row {
         gap: 7px;
    }
     .tagin-profile-match, .tagin-profile-incoming-interest {
         padding: 7px 10px;
         font-size: .76rem;
    }
}

/* ==================== PAGE: SWIPE — MOBILE ==================== */
 .tagin-swipe-choice-page {
     padding: 46px 18px;
}
 .tagin-swipe-choice-heading {
     max-width: 520px;
     margin: 0 auto 28px;
     color: #101328;
     text-align: center;
}
 .tagin-swipe-choice-heading > span {
     display: inline-block;
     margin-bottom: 8px;
     color: #8d7cff;
     font-size: .78rem;
     font-weight: 900;
     letter-spacing: .12em;
     text-transform: uppercase;
     text-shadow: 0 0 18px rgba(123,92,255,.45);
}
 .tagin-swipe-choice-heading h1 {
     margin: 8px 0 12px;
     color: #f4f7ff;
     font-size: clamp(2.35rem, 10vw, 3.35rem);
     font-weight: 950;
     line-height: .94;
     letter-spacing: -.045em;
     text-shadow: 0 8px 28px rgba(0,0,0,.28);
}
 .tagin-swipe-choice-heading h1 span {
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
}
 .tagin-swipe-choice-heading p {
     margin: 0 auto;
     text-align: center;
     color: rgba(255,255,255,.68);
     font-size: 1rem;
     font-weight: 500;
     line-height: 1.45;
     text-shadow: 0 2px 12px rgba(0,0,0,.18);
}
 .tagin-swipe-choice-grid {
     display: grid;
     gap: 18px;
     width: 100%;
     max-width: 560px;
     margin: 0 auto;
}
 .tagin-swipe-choice-card {
     position: relative;
     display: grid;
     grid-template-columns: 64px minmax(0, 1fr) auto;
     align-items: center;
     gap: 18px;
     width: 100%;
     min-height: 225px;
     padding: 22px 20px;
     border: 1px solid rgba(255,255,255,.78);
     border-radius: 26px;
     background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(232,237,251,.93));
     color: #101328;
     text-align: left;
     box-shadow: 0 18px 42px rgba(16,19,40,.12);
     cursor: pointer;
     touch-action: manipulation;
     transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
     -webkit-tap-highlight-color: transparent;
}
 .tagin-swipe-choice-card:hover {
     border-color: rgba(106,99,223,.24);
     box-shadow: 0 22px 48px rgba(16,19,40,.15);
     transform: translateY(-2px);
}
 .tagin-swipe-choice-card:active {
     transform: scale(.97);
     box-shadow: 0 10px 24px rgba(16,19,40,.14);
}
 .tagin-swipe-choice-icon {
     display: grid;
     width: 64px;
     height: 64px;
     place-items: center;
     border-radius: 21px;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     color: #ffffff;
     font-size: 1.65rem;
     box-shadow: 0 12px 26px rgba(85,120,255,.28);
}
 .tagin-swipe-choice-card[data-page="planSwipe"] .tagin-swipe-choice-icon {
     background: linear-gradient(135deg, #42c6b7, #4d8df7);
     box-shadow: 0 12px 26px rgba(66,198,183,.24);
}
 .tagin-swipe-choice-content {
     min-width: 0;
}
 .tagin-swipe-choice-content > span {
     color: #7b5cff;
     font-size: .72rem;
     font-weight: 900;
     letter-spacing: .09em;
     text-transform: uppercase;
}
 .tagin-swipe-choice-content h2 {
     margin: 4px 0 7px;
     color: #0F1730;
     font-size: 1.3rem;
     font-weight: 900;
     line-height: 1.1;
}
 .tagin-swipe-choice-content p {
     margin: 0;
     color: #46506D;
     font-size: .86rem;
     line-height: 1.45;
     font-weight: 600;
}
 .tagin-swipe-choice-arrow {
     color: #8b94aa;
     font-size: 1.15rem;
     transition: transform .15s ease, color .15s ease;
}
 .tagin-swipe-choice-card:hover .tagin-swipe-choice-arrow {
     color: #6f63df;
     transform: translateX(3px);
}
 @media (max-width: 420px) {
     .tagin-swipe-choice-page {
         padding-left: 14px;
         padding-right: 14px;
    }
     .tagin-swipe-choice-card {
         grid-template-columns: 56px minmax(0, 1fr) auto;
         gap: 14px;
         min-height: 150px;
         padding: 20px 16px;
    }
     .tagin-swipe-choice-icon {
         width: 56px;
         height: 56px;
         border-radius: 18px;
         font-size: 1.45rem;
    }
     .tagin-swipe-choice-content h2 {
         font-size: 1.16rem;
    }
     .tagin-swipe-choice-content p {
         font-size: .8rem;
         font-weight: 600;
    }
}
 @media (min-width: 768px) {
     .tagin-swipe-choice-page {
         padding-top: 60px;
    }
     .tagin-swipe-choice-grid {
         display: grid;
         grid-template-columns: repeat(2, minmax(360px, 1fr));
         gap: 28px;
         max-width: 1100px;
         margin: 0 auto;
    }
     .tagin-swipe-choice-card {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         align-items: flex-start;
         min-height: 430px;
         padding: 36px;
         background-size: cover !important;
         background-position: center !important;
         overflow: hidden;
    }
     .tagin-swipe-choice-icon {
         width: 78px;
         height: 78px;
         margin-bottom: 22px;
    }
     .tagin-swipe-choice-content {
         width: 100%;
         font-weight: 600;
    }
     .tagin-swipe-choice-content h2 {
         font-size: 2rem;
         margin-bottom: 10px;
    }
     .tagin-swipe-choice-content p {
         max-width: 320px;
    }
     .tagin-swipe-choice-arrow {
         position: absolute;
         right: 28px;
         bottom: 28px;
         font-size: 1.6rem;
    }
}
 .tagin-profile-page .tagin-edit-only {
     display: none;
}
 .tagin-profile-page.is-editing .tagin-view-only {
     display: none !important;
}
 .tagin-profile-page.is-editing .tagin-edit-only {
     display: block;
}
 .tagin-profile-page.is-editing .tagin-profile-interest-editor {
     display: flex;
}
 .tagin-profile-page.is-editing .tagin-profile-looking-editor {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px;
}
 .tagin-profile-edit-link {
     display: inline-flex;
     align-items: center;
     gap: 7px;
}
 .tagin-profile-edit-link.is-save {
     color: #fff;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     border-color: transparent;
}
 .tagin-profile-edit-link:disabled {
     opacity: .55;
     cursor: wait;
}
 .tagin-profile-edit-control {
     width: 100%;
     min-height: 54px;
     margin-bottom: 42px !important;
     padding-left: 10px !important;
     border: 1px solid rgba(85,120,255,.22);
     border-radius: 16px;
     background: rgba(255,255,255,.92);
     color: var(--app-text);
     font-size: .95rem;
     font-weight: 600;
     transition: .2s ease;
     box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
 .tagin-profile-edit-control::placeholder {
     color: var(--app-text-faint);
}
 .tagin-profile-edit-control:focus {
     border-color: var(--app-primary);
     box-shadow: 0 0 0 4px rgba(85,120,255,.18);
     outline: 0;
}
 select.tagin-profile-edit-control {
     appearance: none;
     -webkit-appearance: none;
     cursor: pointer;
     padding-right: 42px;
     background-image: linear-gradient(45deg, transparent 50%, var(--app-text-muted) 50%), linear-gradient(135deg, var(--app-text-muted) 50%, transparent 50%);
     background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px);
     background-size: 5px 5px;
     background-repeat: no-repeat;
}
 select.tagin-profile-edit-control option {
     background: #ffffff;
     color: var(--app-text);
}
 .tagin-profile-edit-control option {
     color: #fff;
     background: #202440;
}
 .tagin-profile-readonly {
     opacity: .78;
}
 .tagin-locked-badge {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 3px 8px;
     border-radius: 999px;
     color: rgba(255, 255, 255, .58);
     background: rgba(255, 255, 255, .07);
     font-size: 10px;
     font-weight: 800;
}
 .tagin-profile-bio-editor {
     position: relative;
}
 .tagin-profile-bio-input {
     width: 100%;
     min-height: 190px;
     padding: 16px 16px;
     border: 1px solid rgba(16, 19, 40, .12);
     border-radius: 18px;
     color: #101328;
     background: rgba(255, 255, 255, .6);
     font-size: 1rem;
     font-weight: 500;
     line-height: 1.65;
     resize: vertical;
     outline: 0;
     box-shadow: inset 0 1px 2px rgba(16, 19, 40, .04);
}
 .tagin-profile-bio-input::placeholder {
     color: rgba(16, 19, 40, .42);
}
 .tagin-profile-bio-input:focus {
     border-color: #6574ff;
     background: rgba(255, 255, 255, .82);
     box-shadow: 0 0 0 4px rgba(101, 116, 255, .12);
}
 .tagin-profile-bio-meta {
     position: absolute;
     right: 14px;
     bottom: 10px;
     left: 14px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding-top: 10px;
     pointer-events: none;
}
 .tagin-profile-bio-requirement, .tagin-profile-bio-counter {
     color: rgba(16, 19, 40, .52);
     font-size: .75rem;
     font-weight: 700;
}
 .tagin-profile-bio-requirement.is-invalid {
     color: #c64055;
}
 .tagin-profile-bio-requirement.is-valid {
     color: #318b5b;
}
 .tagin-profile-edit-link {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 7px 11px;
     border: 1px solid rgba(85, 120, 255, .18);
     border-radius: 10px;
     color: #6574ff;
     background: rgba(85, 120, 255, .08);
     font-size: .82rem;
     font-weight: 800;
}
 .tagin-profile-edit-link:hover {
     color: #5364ed;
     background: rgba(85, 120, 255, .14);
}
 .tagin-profile-edit-link:disabled {
     opacity: .55;
     cursor: wait;
}
 .tagin-profile-interest-edit {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     user-select: none;
     opacity: .55;
     transition: .18s;
}
 .tagin-profile-interest-edit input {
     position: absolute;
     opacity: 0;
     pointer-events: none;
}
 .tagin-profile-interest-edit:hover {
     opacity: .85;
     transform: translateY(-1px);
}
 .tagin-profile-interest-edit.is-selected {
     opacity: 1;
     border-color: rgba(101, 116, 255, .42);
     background: rgba(255, 255, 255, .94);
     box-shadow: 0 8px 20px rgba(16, 19, 40, .08);
}
 .tagin-profile-interest-edit:not(.is-selected) {
     border-color: rgba(16, 19, 40, .08);
     background: rgba(255, 255, 255, .45);
}
 .tagin-profile-interest-edit:not(.is-selected) span {
     background: rgba(101, 116, 255, .35);
}
 .tagin-profile-interest-edit:not(.is-selected) strong {
     color: rgba(16, 19, 40, .62);
}
 .tagin-profile-interest-editor {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
}
 .tagin-profile-interest-editor .tagin-profile-interest {
     flex: 0 0 auto;
}
 .tagin-profile-looking-editor {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px;
}
 .tagin-profile-looking-editor .tagin-profile-looking-item {
     width: 100%;
     min-width: 0;
     max-width: none;
     margin: 0;
}
 .tagin-profile-looking-edit {
     position: relative;
     cursor: pointer;
     user-select: none;
     opacity: .68;
     transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
 .tagin-profile-looking-edit input {
     position: absolute;
     opacity: 0;
     pointer-events: none;
}
 .tagin-profile-looking-edit:hover {
     opacity: .9;
     transform: translateY(-1px);
}
 .tagin-profile-looking-edit.is-selected {
     opacity: 1;
     border-color: rgba(101, 116, 255, .42);
     background: rgba(255, 255, 255, .96);
     box-shadow: 0 8px 20px rgba(16, 19, 40, .08);
}
 .tagin-profile-looking-edit:not(.is-selected) {
     border-color: rgba(16, 19, 40, .08);
     background: rgba(255, 255, 255, .5);
}
 .tagin-profile-looking-edit:not(.is-selected) .tagin-profile-looking-icon {
     opacity: .45;
}
 .tagin-profile-looking-edit:not(.is-selected) strong {
     color: rgba(16, 19, 40, .6);
}
 .tagin-profile-looking-edit:not(.is-selected) span {
     color: rgba(16, 19, 40, .4);
}
 @media (max-width: 575.98px) {
     .tagin-profile-page.is-editing .tagin-profile-looking-editor {
         grid-template-columns: 1fr;
    }
     .tagin-profile-looking-editor {
         grid-template-columns: 1fr;
    }
}
 .tagin-profile-photo-editor {
     width: 100%;
     padding: 22px;
     border: 1px solid rgba(255, 255, 255, .55);
     border-radius: 24px;
     background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(237, 240, 255, .92));
     box-shadow: var(--app-shadow-card);
}
 .tagin-profile-photo-editor-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
     margin-bottom: 18px;
}
 .tagin-profile-photo-editor-header h2 {
     margin: 2px 0 0;
     color: #101328;
     font-size: 1.25rem;
     font-weight: 850;
}
 .tagin-profile-photo-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     margin-bottom: 0 !important;
}
 .tagin-profile-photo-grid .photo-slot {
     min-height: 0;
     aspect-ratio: 4 / 5;
}
 .tagin-profile-photo-grid .photo-add {
     border: 2px dashed rgba(85, 120, 255, .36);
     background: rgba(85, 120, 255, .08);
     color: #5578ff;
}
 .tagin-profile-primary-photo {
     position: absolute;
     right: 8px;
     bottom: 8px;
     z-index: 2;
     padding: 5px 9px;
     border-radius: 999px;
     background: rgba(16, 19, 40, .78);
     color: #fff;
     font-size: .68rem;
     font-weight: 800;
}
 @media (min-width: 576px) {
     .tagin-profile-photo-grid {
         grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
 @media (min-width: 992px) {
     .tagin-profile-photo-grid {
         grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==================== PAGE GROUP: SWIPE ==================== */
 .tagin-people-action-row {
     position: absolute;
     top: 32px;
     left: 18px;
     z-index: 100;
     display: flex;
     align-items: center;
     gap: 8px;
     pointer-events: none;
}
 .tagin-people-action-row > * {
     pointer-events: auto;
}
 .tagin-people-filter-button, .tagin-people-report-button, .tagin-people-block-button {
     position: static;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 16px;
     border: 1px solid rgba(255, 255, 255, .35);
     border-radius: 999px;
     background: rgba(16, 19, 40, .82);
     color: #fff;
     font-size: .9rem;
     font-weight: 600;
     line-height: 1;
     cursor: pointer;
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
     transition: background-color .18s ease, transform .18s ease;
}
 .tagin-people-filter-button {
     position: absolute;
     top: 32px;
     right: 18px;
     z-index: 100;
}
 .tagin-people-block-button {
     background: rgba(123, 36, 52, .92);
}
 .tagin-people-block-button.is-blocked {
     background: rgba(63, 69, 101, .92);
}
 .tagin-people-filter-button:hover, .tagin-people-report-button:hover {
     background: rgba(16, 19, 40, .95);
     color: #fff;
}
 .tagin-people-block-button:hover {
     background: rgba(145, 42, 61, .98);
     color: #fff;
}
 .tagin-people-block-button.is-blocked:hover {
     background: rgba(74, 81, 118, .98);
}
 .tagin-people-filter-button:active, .tagin-people-report-button:active, .tagin-people-block-button:active {
     transform: scale(.96);
}
 @media (max-width: 991.98px) {
     .tagin-people-page {
         position: relative;
         min-height: 100%;
    }
     .tagin-people-report-button {
         left: 16px;
    }
     .tagin-people-filter-button {
         right: 16px;
    }
}
 @media (min-width: 992px) {
     .tagin-people-page {
         position: relative;
         min-height: 100%;
         padding-top: 0;
    }
     .tagin-people-report-button {
         display: none;
    }
     .tagin-people-block-button {
         display: none;
    }
     .tagin-people-filter-button {
         left: 16px;
         right: auto;
    }
}
 .tagin-people-profile-container {
     width: 100%;
     min-height: 100%;
}
 .tagin-people-filter-overlay {
     position: fixed;
     inset: 0;
     z-index: 20000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     background: rgba(8, 10, 28, .66);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
}
 .tagin-people-filter-overlay[hidden] {
     display: none;
}
 .tagin-people-filter-panel {
     width: min(100%, 460px);
     max-height: calc( 100svh - var(--tagin-header-height) - var(--tagin-footer-height) - 24px);
     overflow-y: auto;
     border: 1px solid rgba(255, 255, 255, .55);
     border-radius: 26px;
     background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(237, 241, 255, .97));
     box-shadow: 0 30px 80px rgba(7, 10, 35, .4);
}
 .tagin-people-filter-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     padding: 24px 24px 20px;
     border-bottom: 1px solid rgba(16, 19, 40, .08);
}
 .tagin-people-filter-header span {
     display: block;
     margin-bottom: 3px;
     color: #6964e8;
     font-size: .72rem;
     font-weight: 800;
     letter-spacing: .08em;
     text-transform: uppercase;
}
 .tagin-people-filter-header h2 {
     margin: 0;
     color: #101328;
     font-size: 1.45rem;
     font-weight: 800;
}
 .tagin-people-filter-close {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     flex: 0 0 40px;
     border: 0;
     border-radius: 50%;
     background: rgba(16, 19, 40, .08);
     color: #101328;
     font-size: 1.1rem;
     cursor: pointer;
     transition: background-color .18s ease, transform .18s ease;
}
 .tagin-people-filter-close:hover {
     background: rgba(16, 19, 40, .14);
}
 .tagin-people-filter-close:active {
     transform: scale(.94);
}
 .tagin-people-filter-form {
     padding: 24px;
}
 .tagin-people-filter-section {
     margin-bottom: 10px;
}
 .tagin-people-filter-label, .tagin-people-filter-label-row label {
     display: block;
     color: #101328;
     font-size: .92rem;
     font-weight: 750;
}
 .tagin-people-filter-label-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 14px;
}
 .tagin-people-filter-label-row label {
     margin: 0;
}
 .tagin-people-filter-label-row strong {
     color: #625df5;
     font-size: .95rem;
}
 .tagin-people-filter-section input[type="range"] {
     width: 100%;
     accent-color: #625df5;
     cursor: pointer;
}
 .tagin-people-filter-range-labels {
     display: flex;
     justify-content: space-between;
     margin-top: 7px;
     color: rgba(16, 19, 40, .52);
     font-size: .75rem;
     font-weight: 600;
}
 .tagin-people-filter-control {
     width: 100%;
     min-height: 48px;
     padding: 11px 14px;
     border: 1px solid rgba(16, 19, 40, .14);
     border-radius: 14px;
     outline: 0;
     background: rgba(255, 255, 255, .82);
     color: #101328;
     font-size: .95rem;
     transition: border-color .18s ease, box-shadow .18s ease;
}
 .tagin-people-filter-control:focus {
     border-color: #625df5;
     box-shadow: 0 0 0 4px rgba(98, 93, 245, .12);
}
 .tagin-people-age-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px;
}
 .tagin-people-age-grid label {
     display: block;
     margin-bottom: 7px;
     color: rgba(16, 19, 40, .62);
     font-size: .78rem;
     font-weight: 700;
}
 .tagin-people-filter-error {
     min-height: 18px;
     margin-top: 8px;
     color: #d93953;
     font-size: .8rem;
     font-weight: 650;
}
 .tagin-people-filter-actions {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 12px;
     padding-top: 4px;
}
 .tagin-people-filter-reset, .tagin-people-filter-apply {
     min-height: 48px;
     padding: 11px 18px;
     border-radius: 14px;
     font-size: .92rem;
     font-weight: 750;
     cursor: pointer;
     transition: transform .18s ease, background-color .18s ease;
}
 .tagin-people-filter-reset {
     border: 1px solid rgba(16, 19, 40, .12);
     background: rgba(16, 19, 40, .06);
     color: #101328;
}
 .tagin-people-filter-apply {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     border: 0;
     background: linear-gradient(135deg, #625df5, #7654ed);
     color: #fff;
     box-shadow: 0 10px 24px rgba(98, 93, 245, .28);
}
 .tagin-people-filter-reset:hover {
     background: rgba(16, 19, 40, .1);
}
 .tagin-people-filter-apply:hover {
     transform: translateY(-1px);
}
 .tagin-people-filter-reset:active, .tagin-people-filter-apply:active {
     transform: scale(.97);
}
 body.tagin-people-filter-open {
     overflow: hidden;
}
 .tagin-profile-round-action:disabled {
     cursor: not-allowed;
}
 .tagin-profile-round-action:disabled:not(.is-selected) {
     filter: grayscale(1);
}
 .tagin-profile-round-like.is-selected {
     background: linear-gradient(135deg, #ff4778, #ff174f);
     border-color: rgba(255, 71, 120, .65);
     color: #fff;
     opacity: 1;
     box-shadow: 0 12px 28px rgba(255, 23, 79, .3);
}
 .tagin-profile-round-superlike.is-selected {
     background: linear-gradient(135deg, #35a7ff, #5578ff);
     border-color: rgba(53, 167, 255, .65);
     color: #fff;
     opacity: 1;
     box-shadow: 0 12px 28px rgba(53, 167, 255, .3);
}
 .tagin-profile-round-pass.is-selected {
     background: linear-gradient(135deg, #5e6475, #343848);
     border-color: rgba(255, 255, 255, .22);
     color: #fff;
     opacity: 1;
     box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}
 .tagin-profile-round-action.is-loading {
     pointer-events: none;
     opacity: .65;
}
 @media (max-width: 575.98px) {
     .tagin-people-filter-overlay {
         align-items: flex-start;
         justify-content: center;
         padding-top: calc(var(--tagin-header-height) + 12px);
         padding-bottom: 12px;
         overflow-y: auto;
    }
     .tagin-people-filter-panel {
         width: 100%;
         max-height: calc( 100svh - var(--tagin-header-height) - var(--tagin-footer-height) - 24px);
         border-right: 0;
         border-bottom: 0;
         border-left: 0;
         border-radius: 26px;
         margin: auto 0;
    }
     .tagin-people-filter-header {
         padding: 21px 20px 18px;
    }
     .tagin-people-filter-form {
         padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    }
}
 .tagin-people-empty {
     width: min(calc(100% - 32px), 560px);
     margin: 80px auto;
     padding: 42px 28px;
     color: #101328;
     background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(237, 240, 255, .92));
     text-align: center;
}
 .tagin-people-empty-icon {
     display: grid;
     width: 72px;
     height: 72px;
     margin: 0 auto 20px;
     place-items: center;
     border-radius: 24px;
     background: linear-gradient(135deg, rgba(85, 120, 255, .16), rgba(123, 92, 255, .13));
     color: #625df5;
     font-size: 1.8rem;
}
 .tagin-people-empty h2 {
     margin: 0 0 10px;
     font-size: 1.5rem;
     font-weight: 850;
}
 .tagin-people-empty p {
     margin: 0 auto 24px;
     max-width: 380px;
     color: #6f7890;
     line-height: 1.55;
}
 .tagin-people-empty-filter {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     min-height: 46px;
     padding: 0 20px;
     border: 0;
     border-radius: 14px;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     color: #fff;
     font-weight: 750;
}

/* ==================== PAGE: ALL NOTIFICATIONS ==================== */
 .tagin-all-notifications-page {
     width: 100%;
     margin: 0 auto;
}
 .tagin-all-notifications-panel {
     overflow: hidden;
     background: rgba(255,255,255,0.78);
     border: 1px solid rgba(61,66,128,0.1);
     border-radius: 26px;
     box-shadow: 0 18px 55px rgba(35,39,84,0.1);
     backdrop-filter: blur(14px);
}
 .tagin-all-notifications-panel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
     padding: 22px 24px;
     border-bottom: 1px solid rgba(44,49,101,0.08);
}
 .tagin-all-notifications-panel-header h2 {
     margin: 0 0 3px;
     color: #202443;
     font-size: 17px;
     font-weight: 850;
}
 .tagin-all-notifications-panel-header p {
     margin: 0;
     color: #858aa4;
     font-size: 12px;
     font-weight: 600;
}
 .tagin-all-notifications-status {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 7px 11px;
     color: #5b5f7c;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: 0.4px;
     text-transform: uppercase;
     background: rgba(79,70,148,0.07);
     border-radius: 999px;
}
 .tagin-all-notifications-status-dot {
     width: 7px;
     height: 7px;
     background: #6bd49f;
     border-radius: 50%;
     box-shadow: 0 0 0 4px rgba(107,212,159,0.14);
}
 .tagin-all-notifications-list {
     display: flex;
     flex-direction: column;
}
 .tagin-all-notification {
     position: relative;
     display: flex;
     align-items: center;
     gap: 15px;
     min-height: 94px;
     padding: 18px 22px;
     margin: 0;
     cursor: pointer;
     background: transparent;
     border-bottom: 1px solid rgba(44,49,101,0.07);
     transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
 .tagin-all-notification:last-child {
     border-bottom: 0;
}
 .tagin-all-notification:hover {
     z-index: 2;
     background: rgba(78,70,148,0.055);
     box-shadow: inset 4px 0 0 rgba(78,70,148,0.45);
     transform: none;
}
 .tagin-all-notification.tagin-notification-unread {
     background: linear-gradient(90deg, rgba(78,70,148,0.105), rgba(78,70,148,0.025));
}
 .tagin-all-notification.tagin-notification-unread::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 8px;
     width: 7px;
     height: 7px;
     background: #665bd1;
     border-radius: 50%;
     box-shadow: 0 0 0 4px rgba(102,91,209,0.12);
     transform: translateY(-50%);
}
 .tagin-all-notification-avatar-wrap {
     position: relative;
     width: 52px;
     height: 52px;
     min-width: 52px;
}
 .tagin-all-notification-avatar {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 52px !important;
     height: 52px !important;
     object-fit: cover;
     color: #fff;
     font-size: 18px;
     background: linear-gradient(135deg, #4e4694, #303568);
     border: 3px solid #fff;
     border-radius: 17px !important;
     box-shadow: 0 7px 18px rgba(41,45,91,0.18);
}
 .tagin-all-notification-system-avatar {
     border: 0;
}
 .tagin-all-notification-type-icon {
     position: absolute;
     right: -4px;
     bottom: -4px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 22px;
     height: 22px;
     color: #fff;
     font-size: 9px;
     background: linear-gradient(135deg, #665bd1, #4e4694);
     border: 3px solid #fff;
     border-radius: 8px;
}
 .tagin-all-notification-content {
     flex: 1;
     min-width: 0;
}
 .tagin-all-notification-title-row {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 4px;
}
 .tagin-all-notification-title-row h3 {
     flex: 1;
     min-width: 0;
     margin: 0;
     overflow: hidden;
     color: #252943;
     font-size: 14px;
     font-weight: 850;
     line-height: 1.25;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .tagin-all-notification-title-row time {
     flex-shrink: 0;
     color: #9a9eb2;
     font-size: 10px;
     font-weight: 750;
     white-space: nowrap;
}
 .tagin-all-notification-content p {
     display: -webkit-box;
     margin: 0;
     overflow: hidden;
     color: #71768f;
     font-size: 12px;
     font-weight: 550;
     line-height: 1.55;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
}
 .tagin-all-notification-arrow {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     min-width: 30px;
     height: 30px;
     color: #a5a8ba;
     font-size: 10px;
     background: rgba(65,69,117,0.055);
     border-radius: 10px;
     transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
 .tagin-all-notification:hover .tagin-all-notification-arrow {
     color: #fff;
     background: #4e4694;
     transform: translateX(2px);
}
 .tagin-all-notifications-loading {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 11px;
     padding: 25px;
     color: #858aa4;
     font-size: 12px;
     font-weight: 700;
}
 .tagin-all-notifications-spinner {
     width: 20px;
     height: 20px;
     border: 2px solid rgba(78,70,148,0.16);
     border-top-color: #4e4694;
     border-radius: 50%;
     animation: taginNotificationSpin 0.75s linear infinite;
}
 @keyframes taginNotificationSpin {
     to {
         transform: rotate(360deg);
    }
}
 .tagin-all-notifications-empty {
     padding: 70px 25px;
     text-align: center;
}
 .tagin-all-notifications-empty-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 68px;
     height: 68px;
     margin: 0 auto 18px;
     color: #6259bc;
     font-size: 25px;
     background: rgba(78,70,148,0.09);
     border-radius: 22px;
}
 .tagin-all-notifications-empty h3 {
     margin: 0 0 6px;
     color: #252943;
     font-size: 16px;
     font-weight: 850;
}
 .tagin-all-notifications-empty p {
     margin: 0;
     color: #858aa4;
     font-size: 12px;
}
 .tagin-all-notifications-end {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 14px;
     padding: 24px;
}
 .tagin-all-notifications-end span {
     width: 55px;
     height: 1px;
     background: rgba(58,62,112,0.12);
}
 .tagin-all-notifications-end p {
     margin: 0;
     color: #989caf;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: 0.7px;
     text-transform: uppercase;
}
 .tagin-all-notification > .tagin-all-notification-avatar-wrap {
     flex: 0 0 52px;
     width: 52px;
     min-width: 52px;
}
 .tagin-all-notification > .tagin-all-notification-content {
     flex: 1 1 auto;
     width: auto;
     min-width: 0;
}
 .tagin-all-notification > .tagin-all-notification-arrow {
     flex: 0 0 30px;
     width: 30px;
     min-width: 30px;
}
 .tagin-all-notification .tagin-all-notification-type-icon {
     right: -4px;
     bottom: -4px;
}
 .tagin-all-notification.tagin-notification-unread::after {
     display: none;
}
 @media (max-width: 767px) {
     .tagin-all-notifications-panel {
         border-radius: 22px;
    }
     .tagin-all-notifications-panel-header {
         padding: 18px;
    }
     .tagin-all-notifications-status {
         display: none;
    }
     .tagin-all-notification {
         display: flex;
         align-items: center;
         gap: 16px;
         padding: 18px 22px;
    }
     .tagin-all-notification-avatar-wrap {
         width: 46px;
         height: 46px;
         min-width: 46px;
    }
     .tagin-all-notification-avatar {
         width: 46px !important;
         height: 46px !important;
         border-radius: 15px !important;
    }
     .tagin-all-notification-type-icon {
         width: 20px;
         height: 20px;
    }
     .tagin-all-notification-title-row {
         align-items: flex-start;
         gap: 8px;
    }
     .tagin-all-notification-title-row h3 {
         font-size: 13px;
    }
     .tagin-all-notification-content p {
         font-size: 11px;
         -webkit-line-clamp: 2;
    }
     .tagin-all-notification-arrow {
         display: none;
    }
     .tagin-all-notification > .tagin-all-notification-avatar-wrap {
         flex-basis: 46px;
         width: 46px;
         min-width: 46px;
    }
}

/* ==================== PAGE GROUP: EVENTS ==================== */
 .tagin-event-profile-page .tagin-event-title-line h1 {
     max-width: 760px;
}
 .tagin-event-profile-page .tagin-profile-desktop-heading {
     min-width: 0;
}
 .tagin-event-profile-media .tagin-profile-photo img {
     object-position: center;
}
 .tagin-event-mobile-category, .tagin-event-desktop-category {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     width: max-content;
     margin-bottom: 10px;
     padding: 7px 11px;
     border: 1px solid rgba(255,255,255,.16);
     border-radius: 999px;
     color: rgba(255,255,255,.86);
     background: rgba(10,13,30,.34);
     backdrop-filter: blur(12px);
     font-size: .75rem;
     font-weight: 800;
}
 .tagin-event-desktop-category {
     margin-bottom: 7px;
     color: var(--app-primary);
     background: rgba(85,120,255,.1);
     border-color: rgba(85,120,255,.18);
}
 .tagin-event-mobile-meta {
     display: flex;
     flex-direction: column;
     gap: 7px;
     margin: 12px 0;
}
 .tagin-event-mobile-meta > div {
     display: flex;
     align-items: center;
     gap: 8px;
     color: rgba(255,255,255,.84);
     font-size: .86rem;
     font-weight: 700;
}
 .tagin-event-mobile-meta i {
     width: 14px;
     color: rgba(255,255,255,.64);
     text-align: center;
}
 .tagin-event-desktop-avatar img {
     object-fit: cover;
}
 .tagin-event-desktop-actions .tagin-profile-round-superlike.is-selected, .tagin-event-mobile-actions .tagin-profile-round-superlike.is-selected {
     color: #fff;
     background: linear-gradient(135deg,#5578ff,#7b5cff);
     border-color: transparent;
}
 .tagin-event-profile-page .tagin-profile-round-like.is-selected {
     color: #fff;
     background: linear-gradient(135deg,#22b77a,#38d49a);
     border-color: transparent;
}
.tagin-event-capacity {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid rgba(82,99,180,.16);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(91,112,255,.14), rgba(133,92,255,.08) 55%, rgba(255,255,255,.42));
    box-shadow: 0 10px 24px rgba(35,45,95,.10), inset 0 1px 0 rgba(255,255,255,.65);
}
.tagin-event-capacity-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.tagin-event-capacity-heading > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tagin-event-capacity-heading strong {
    color: #171b34;
    font-size: 1rem;
    font-weight: 800;
}
.tagin-event-capacity-heading span {
    color: #6c7392;
    font-size: .8rem;
    font-weight: 700;
}
.tagin-event-capacity-heading > span {
    padding: 7px 13px;
    border: 1px solid rgba(85,120,255,.28);
    border-radius: 999px;
    background: rgba(85,120,255,.10);
    color: #5368d9;
    white-space: nowrap;
}
.tagin-event-capacity-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(63,72,125,.12);
    box-shadow: inset 0 1px 3px rgba(28,34,68,.16);
}
.tagin-event-capacity-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5578ff, #874cff);
    box-shadow: 0 2px 8px rgba(98,85,255,.30);
    transition: width .3s ease;
}
 .tagin-event-profile-page .tagin-profile-detail-content small {
     display: block;
     margin-top: 4px;
     color: rgba(255,255,255,.46);
     font-size: .74rem;
     line-height: 1.4;
}
.tagin-event-map-preview {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(88,102,180,.14);
    border-radius: 18px;
    color: #171b34;
    background: linear-gradient(135deg, rgba(85,120,255,.11), rgba(123,92,255,.055) 52%, rgba(255,255,255,.38));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(35,45,95,.07);
    text-align: left;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tagin-event-map-preview:hover {
    transform: translateY(-1px);
    border-color: rgba(85,120,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 12px 26px rgba(35,45,95,.11);
}
.tagin-event-map-preview > i {
    color: #7280c7;
    font-size: .9rem;
}
.tagin-event-map-preview > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}
.tagin-event-map-preview strong {
    overflow: hidden;
    color: #171b34;
    font-size: .92rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tagin-event-map-preview small {
    overflow: hidden;
    color: #737b98;
    font-size: .76rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tagin-event-map-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(85,120,255,.12);
    border-radius: 14px;
    color: #6259c7;
    background: rgba(85,120,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.tagin-event-map-preview.is-locked {
    cursor: default;
    opacity: 1;
}
.tagin-event-map-preview.is-locked:hover {
    transform: none;
    border-color: rgba(88,102,180,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(35,45,95,.07);
}
.tagin-event-map-preview.is-locked > i {
    color: #7b829e;
}
.tagin-event-attendee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 18px;
    margin-top: 18px;
}
.tagin-event-attendee,
.tagin-event-open-spots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    transition: transform .18s ease;
}
.tagin-event-attendee:hover,
.tagin-event-open-spots:hover {
    transform: translateY(-3px);
}
.tagin-event-attendee img,
.tagin-event-open-spots > div {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    transition: all .18s ease;
}
.tagin-event-attendee img {
    border: 3px solid #fff;
    box-shadow: 0 10px 22px rgba(35,45,95,.16);
}
.tagin-event-attendee:hover img {
    border-color: #8ea2ff;
    box-shadow: 0 14px 28px rgba(85,120,255,.22);
}
.tagin-event-attendee strong,
.tagin-event-open-spots strong {
    max-width: 74px;
    overflow: hidden;
    color: #303654;
    font-size: .77rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tagin-event-open-spots > div {
    display: grid;
    place-items: center;
    border: 2px dashed rgba(85,120,255,.22);
    background: linear-gradient(135deg, rgba(85,120,255,.08), rgba(123,92,255,.05));
    color: #6d7eff;
    font-size: 1.4rem;
    font-weight: 300;
}
.tagin-event-open-spots:hover > div {
    border-color: rgba(85,120,255,.4);
    background: linear-gradient(135deg, rgba(85,120,255,.14), rgba(123,92,255,.08));
}
.tagin-event-open-spots strong {
    color: #7b829e;
}
.tagin-event-host {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tagin-event-host-profile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(88,102,180,.12);
    border-radius: 18px;
    color: #171b34;
    background: rgba(255,255,255,.52);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px rgba(35,45,95,.06);
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tagin-event-host-profile:hover {
    transform: translateY(-1px);
    border-color: rgba(85,120,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 12px 26px rgba(35,45,95,.10);
}
.tagin-event-host-profile img {
    width: 64px;
    height: 64px;
    border: 3px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 7px 18px rgba(35,45,95,.16);
}
.tagin-event-host-profile > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}
.tagin-event-host-profile strong {
    overflow: hidden;
    color: #171b34;
    font-size: 1rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tagin-event-host-profile small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #7a819d;
    font-size: .76rem;
    font-weight: 600;
}
.tagin-event-host-profile small i {
    color: #6a63d6;
}
.tagin-event-host-profile > i {
    color: #8a91ad;
    font-size: .9rem;
}
.tagin-event-host > p {
    margin: 0;
    color: #626a87;
    font-size: .9rem;
    line-height: 1.65;
}
 .tagin-event-message-host {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     width: max-content;
     min-width: 180px;
}
.tagin-event-membership-card .tagin-event-membership-button {
    display: flex;
    width: 100%;
    min-height: 54px;
    margin-top: 18px;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(88,102,180,.14);
    border-radius: 16px;
    color: #565e91;
    background: rgba(255,255,255,.48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px rgba(35,45,95,.06);
    font-size: .9rem;
    font-weight: 800;
    transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tagin-event-membership-card .tagin-event-membership-button:hover {
    transform: translateY(-1px);
    border-color: rgba(85,120,255,.26);
    color: #4f5fc8;
    background: rgba(85,120,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 12px 26px rgba(35,45,95,.10);
}
.tagin-event-membership-card .tagin-event-membership-button i {
    font-size: .95rem;
}
 .tagin-event-unlocked-card {
     border-color: rgba(56, 212, 154, .26);
}
 .tagin-event-host-summary {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 12px;
}
 .tagin-event-management-group {
     margin-top: 26px;
     padding-top: 24px;
     border-top: 1px solid rgba(255,255,255,.1);
}
 .tagin-event-status-pill {
     display: inline-grid;
     min-width: 32px;
     height: 32px;
     padding: 0 10px;
     place-items: center;
     border-radius: 999px;
     color: #b9c5ff;
     background: rgba(85,120,255,.12);
     font-size: .78rem;
     font-weight: 900;
}
.tagin-event-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(88,102,180,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.58);
    box-shadow: 0 8px 20px rgba(35,45,95,.06), inset 0 1px 0 rgba(255,255,255,.75);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tagin-event-member-row:hover {
    transform: translateY(-1px);
    border-color: rgba(85,120,255,.22);
    box-shadow: 0 12px 26px rgba(35,45,95,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
.tagin-event-member-row:last-child {
    margin-bottom: 0;
}
.tagin-event-member-identity {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 13px;
    padding: 0;
    border: 0;
    color: #171b34;
    background: transparent;
    text-align: left;
}
.tagin-event-member-identity img {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 5px 14px rgba(35,45,95,.14);
}
.tagin-event-member-identity > span:not(.tagin-event-waitlist-position) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}
.tagin-event-member-identity strong {
    overflow: hidden;
    color: #171b34;
    font-size: .92rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tagin-event-member-identity small {
    color: #7a819d;
    font-size: .74rem;
    font-weight: 600;
}
.tagin-event-member-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}
.tagin-event-member-actions .btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 13px;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}
.tagin-event-member-actions .btn-app-primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #5578ff, #7b5cff);
    box-shadow: 0 7px 16px rgba(85,92,255,.24);
}
.tagin-event-member-actions .btn-app-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(85,92,255,.30);
}
.tagin-event-member-actions .btn-app-secondary {
    border: 1px solid rgba(88,102,180,.14);
    color: #5f6788;
    background: rgba(255,255,255,.54);
}
.tagin-event-member-actions .btn-app-secondary:hover {
    border-color: rgba(85,120,255,.24);
    color: #4f5fc8;
    background: rgba(85,120,255,.08);
}
.tagin-event-waitlist-position {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid rgba(85,120,255,.18);
    border-radius: 50%;
    color: #5e69d6;
    background: linear-gradient(135deg, rgba(85,120,255,.14), rgba(123,92,255,.10));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    font-size: .76rem;
    font-weight: 900;
}
@media (max-width: 575.98px) {
    .tagin-event-member-row {
        align-items: stretch;
        flex-direction: column;
    }
    .tagin-event-member-actions {
        width: 100%;
    }
    .tagin-event-member-actions .btn {
        flex: 1;
    }
}
 @media (max-width: 767.98px) {
     .tagin-event-host-summary {
         grid-template-columns: 1fr;
    }
     .tagin-event-member-row {
         align-items: stretch;
         flex-direction: column;
    }
     .tagin-event-member-actions {
         width: 100%;
    }
     .tagin-event-member-actions .btn {
         flex: 1;
         justify-content: center;
    }
}
 @media (max-width: 420px) {
     .tagin-event-member-actions {
         flex-direction: column;
    }
     .tagin-event-member-actions .btn {
         width: 100%;
    }
}
 @media (max-width: 1199.98px) {
     .tagin-event-attendee-grid {
         grid-template-columns: repeat(5,minmax(0,1fr));
    }
}
 @media (max-width: 991.98px) {
     .tagin-event-profile-page .tagin-event-title-line h1 {
         max-width: 620px;
         font-size: clamp(2rem,8vw,3.4rem);
         line-height: 1;
    }
     .tagin-event-profile-page .tagin-profile-mobile-actions {
         pointer-events: none;
    }
     .tagin-event-profile-page .tagin-profile-mobile-actions button {
         pointer-events: auto;
    }
}
 @media (max-width: 575.98px) {
     .tagin-event-profile-page .tagin-profile-photo-content {
         padding-right: 18px;
         padding-left: 18px;
    }
     .tagin-event-profile-page .tagin-event-title-line h1 {
         font-size: 2.15rem;
    }
     .tagin-event-mobile-meta > div {
         font-size: .8rem;
    }
     .tagin-event-attendee-grid {
         grid-template-columns: repeat(4,minmax(0,1fr));
    }
     .tagin-event-capacity-heading {
         gap: 10px;
    }
     .tagin-event-message-host {
         width: 100%;
    }
}

/* ==================== EVENT LIST ==================== */
 .tagin-events-page {
     --events-primary: var(--app-primary, #6667f5);
     --events-secondary: var(--app-secondary, #7658dc);
     --events-blue: #3988f5;
     --events-dark: #11152e;
     --events-muted: #747c9b;
     --events-bg: #e8edff;
     --events-card: rgba(255,255,255,.88);
     --events-border: rgba(82,91,166,.12);
     --events-shadow: 0 14px 32px rgba(45,52,112,.10);
     width: 100%;
     min-width: 0;
     min-height: 100%;
     color: var(--events-dark);
     overflow-x: hidden;
}

/* ==================== HERO ==================== */

/* ==================== SEARCH, FILTERS AND SORTING ==================== */
 .tagin-events-toolbar {
     display: grid;
     grid-template-columns: minmax(260px, 1fr) auto auto;
     gap: 12px;
     width: 100%;
     margin-bottom: 14px;
}
 .tagin-event-search {
     display: flex;
     align-items: center;
     min-width: 0;
     min-height: 54px;
     padding: 0 17px;
     border: 1px solid var(--events-border);
     border-radius: 18px;
     background: rgba(255,255,255,.87);
     box-shadow: 0 9px 24px rgba(49,57,119,.08);
}
 .tagin-event-search > i {
     flex: 0 0 auto;
     color: #7f87a8;
     font-size: 15px;
}
 .tagin-event-search input {
     width: 100%;
     min-width: 0;
     padding: 0 13px;
     border: 0;
     outline: 0;
     background: transparent;
     color: var(--events-dark);
     font-size: 14px;
     font-weight: 650;
}
 .tagin-event-search input::placeholder {
     color: #979eb7;
}
 .tagin-event-search button {
     display: none;
     width: 30px;
     height: 30px;
     flex: 0 0 auto;
     border: 0;
     border-radius: 9px;
     background: rgba(100,105,170,.08);
     color: #8c93ac;
}
 .tagin-event-search.has-value button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
}
 .tagin-toolbar-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     min-height: 54px;
     padding: 0 18px;
     border: 1px solid var(--events-border);
     border-radius: 18px;
     background: rgba(255,255,255,.87);
     color: #3e4565;
     font-size: 13px;
     font-weight: 850;
     white-space: nowrap;
     box-shadow: 0 9px 24px rgba(49,57,119,.08);
     transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
 .tagin-toolbar-btn:hover {
     border-color: rgba(102,103,245,.28);
     background: #fff;
     transform: translateY(-1px);
}
 .tagin-filter-count {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.28), transparent 45%), linear-gradient(135deg, var(--events-primary), var(--events-secondary));
     color: #fff;
     font-size: 10px;
     font-weight: 900;
     box-shadow: 0 5px 11px rgba(102,103,245,.25);
}
 .tagin-toolbar-chevron {
     color: #8f96af;
     font-size: 9px;
}

/* ==================== CATEGORY CHIPS ==================== */
 .tagin-event-categories {
     display: grid;
     grid-template-columns: minmax(190px, 1fr) auto auto;
     align-items: center;
     width: 100%;
     min-width: 0;
     margin-bottom: 14px;
}
 .tagin-event-type-select {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     width: 100%;
     min-width: 0;
     min-height: 42px;
     padding: 0 14px;
     overflow: hidden;
     border: 1px solid var(--events-border);
     border-radius: 999px;
     background: rgba(255,255,255,.82);
     color: #59617e;
     box-shadow: 0 7px 17px rgba(49,57,119,.06);
}
 .tagin-event-type-select > i {
     position: relative;
     z-index: 2;
     flex: 0 0 auto;
     color: var(--events-primary);
     font-size: 12px;
     pointer-events: none;
}
 .tagin-event-type-select::after {
     content: "";
     position: absolute;
     right: 16px;
     top: 50%;
     width: 7px;
     height: 7px;
     border-right: 2px solid #7a829e;
     border-bottom: 2px solid #7a829e;
     transform: translateY(-70%) rotate(45deg);
     pointer-events: none;
}
 .tagin-event-type-select select {
     position: relative;
     z-index: 1;
     width: 100%;
     min-width: 0;
     height: 40px;
     padding: 0 30px 0 10px;
     border: 0;
     outline: 0;
     appearance: none;
     -webkit-appearance: none;
     background: transparent;
     color: #3e4565;
     font: inherit;
     font-size: 12px;
     font-weight: 850;
     cursor: pointer;
}
 .tagin-event-type-select select:focus {
     outline: 0;
}
 .tagin-event-type-select:focus-within {
     border-color: rgba(102,103,245,.42);
     box-shadow: 0 0 0 4px rgba(102,103,245,.10), 0 7px 17px rgba(49,57,119,.06);
}
 .tagin-event-type-select select:disabled {
     cursor: not-allowed;
     opacity: .55;
}
 .tagin-event-type-select:has(select:disabled) {
     background: rgba(255,255,255,.56);
     box-shadow: none;
}
 .tagin-event-type-select select option {
     color: #232944;
     background: #fff;
     font-weight: 700;
}
 .tagin-category-chip {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     min-height: 42px;
     padding: 0 15px;
     flex: 0 0 auto;
     border: 1px solid var(--events-border);
     border-radius: 999px;
     background: rgba(255,255,255,.78);
     color: #656c89;
     font-size: 12px;
     font-weight: 850;
     white-space: nowrap;
     box-shadow: 0 7px 17px rgba(49,57,119,.06);
     transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
 .tagin-category-chip i {
     color: var(--events-primary);
}
 .tagin-category-chip:hover, .tagin-category-chip.active {
     border-color: transparent;
     background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.28), transparent 43%), linear-gradient(135deg, #7470ff 0%, #5d61ec 55%, #5455d8 100%);
     color: #fff;
     box-shadow: 0 10px 22px rgba(87,91,225,.25);
     transform: translateY(-1px);
}
 .tagin-category-chip:hover i, .tagin-category-chip.active i {
     color: #fff;
}

/* ==================== RESULTS PANEL ==================== */
 .tagin-events-content {
     width: 100%;
     min-width: 0;
     border: 0;
     border-radius: 0;
     background: transparent;
     box-shadow: none;
     backdrop-filter: none;
}

/* ==================== EVENT LIST ==================== */
 .tagin-events-list {
     display: flex;
     width: 100%;
     min-width: 0;
     flex-direction: column;
     gap: 15px;
}
 .tagin-event-card {
     display: grid;
     grid-template-columns: 255px minmax(0, 1fr);
     width: 100%;
     min-width: 0;
     min-height: 238px;
     overflow: hidden;
     border: 1px solid rgba(255,255,255,.18);
     border-radius: 24px;
     background: rgba(255,255,255,.94);
     box-shadow: 0 14px 30px rgba(25,31,82,.12), inset 0 1px 0 rgba(255,255,255,.65);
     transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
 .tagin-event-card:hover {
     border-color: rgba(102,103,245,.22);
     transform: translateY(-2px);
     box-shadow: 0 19px 39px rgba(45,52,112,.14);
}

/* ==================== NO EVENTS ==================== */
.tagin-no-events {
    display: flex;
    width: 100%;
    min-height: 360px;
    align-items: center;
    justify-content: center;
    padding: 45px 20px;
}
.tagin-no-events.d-none {
    display: none !important;
}
.tagin-no-events-card {
    width: min(100%, 440px);
    padding: 38px 32px;
    border: 1px solid rgba(85, 120, 255, 0.14);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 18px 45px rgba(35, 43, 91, 0.10);
    text-align: center;
    backdrop-filter: blur(14px);
}
.tagin-no-events-card .tagin-no-events-icon {
    display: grid;
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    place-items: center;
    border-radius: 22px;
    color: #5578ff;
    background: linear-gradient(135deg, rgba(85, 120, 255, 0.16), rgba(123, 92, 255, 0.10));
    font-size: 26px;
}
.tagin-no-events-card h3 {
    margin: 0 0 9px;
    color: #101328;
    font-size: 23px;
    font-weight: 850;
}
.tagin-no-events-card p {
    max-width: 340px;
    margin: 0 auto 24px;
    color: #747d97;
    font-size: 14px;
    line-height: 1.55;
}
.tagin-no-events-card .tagin-event-primary-btn {
    display: inline-flex;
    width: auto;
    min-width: 160px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
}
@media (max-width: 575.98px) {
    .tagin-no-events {
        min-height: 300px;
        padding: 30px 12px;
    }
    .tagin-no-events-card {
        padding: 30px 20px;
        border-radius: 22px;
    }
    .tagin-no-events-card .tagin-event-primary-btn {
        width: 100%;
    }
}

/* ==================== EVENT IMAGE ==================== */
 .tagin-event-image-wrapper {
     width: 100%;
     min-width: 0;
     min-height: 238px;
     position: relative;
     overflow: hidden;
     background: #cdd4ec;
}
 .tagin-event-image {
     display: block;
     width: 100%;
     height: 100%;
     position: absolute;
     inset: 0;
     object-fit: cover;
     transition: transform .45s ease;
}
 .tagin-event-card:hover .tagin-event-image {
     transform: scale(1.04);
}
 .tagin-event-image-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(14,18,45,.03) 20%, rgba(14,18,45,.40) 100%);
}
 .tagin-save-event-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     position: absolute;
     top: 13px;
     right: 13px;
     border: 1px solid rgba(255,255,255,.30);
     border-radius: 13px;
     background: rgba(27,31,72,.69);
     color: #fff;
     backdrop-filter: blur(10px);
     box-shadow: 0 7px 17px rgba(0,0,0,.15);
}
 .tagin-save-event-btn.saved {
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.28), transparent 45%), linear-gradient(135deg, var(--events-primary), var(--events-secondary));
}
 .tagin-save-event-btn.saved i::before {
     content: "";
}
 .tagin-event-date-card {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 59px;
     height: 64px;
     position: absolute;
     left: 14px;
     bottom: 14px;
     flex-direction: column;
     border: 1px solid rgba(255,255,255,.45);
     border-radius: 17px;
     background: rgba(255,255,255,.92);
     color: var(--events-dark);
     box-shadow: 0 9px 23px rgba(0,0,0,.17);
     backdrop-filter: blur(10px);
}
 .tagin-event-date-card span {
     color: var(--events-primary);
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .09em;
}
 .tagin-event-date-card strong {
     font-size: 23px;
     font-weight: 900;
     line-height: 1;
}

/* ==================== EVENT CONTENT ==================== */
 .tagin-event-card-content {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 165px;
     width: 100%;
     min-width: 0;
}
 .tagin-event-card-main {
     width: 100%;
     min-width: 0;
     padding: 21px 23px;
}
 .tagin-event-category-row {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 8px;
}
 .tagin-event-category, .tagin-event-distance {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: var(--events-primary);
     font-size: 11px;
     font-weight: 850;
}
 .tagin-event-distance {
     color: #8a91aa;
}
 .tagin-event-card h3 {
     margin: 0 0 10px;
     color: var(--events-dark);
     font-size: 21px;
     font-weight: 850;
     line-height: 1.18;
     letter-spacing: -.025em;
}
 .tagin-event-meta {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 9px 16px;
     margin-bottom: 12px;
}
 .tagin-event-meta span {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #747c99;
     font-size: 12px;
     font-weight: 650;
}
 .tagin-event-meta i {
     color: var(--events-primary);
}
 .tagin-event-description {
     display: -webkit-box;
     margin: 0 0 15px;
     overflow: hidden;
     color: #68708d;
     font-size: 13px;
     line-height: 1.55;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
}
 .tagin-event-host-row {
     display: flex;
     align-items: center;
     width: 100%;
     min-width: 0;
}
 .tagin-event-host-row > img {
     width: 38px;
     height: 38px;
     margin-right: 9px;
     flex: 0 0 auto;
     border: 3px solid #fff;
     border-radius: 50%;
     object-fit: cover;
     box-shadow: 0 4px 11px rgba(29,35,82,.14);
}
 .tagin-event-host-row > div:nth-child(2) {
     display: flex;
     min-width: 0;
     flex-direction: column;
}
 .tagin-event-host-row small {
     color: #9aa0b6;
     font-size: 10px;
     font-weight: 700;
}
 .tagin-event-host-row strong {
     overflow: hidden;
     font-size: 12px;
     font-weight: 850;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .tagin-attendee-stack {
     display: flex;
     align-items: center;
     margin-left: auto;
     padding-left: 15px;
     flex: 0 0 auto;
}
 .tagin-attendee-stack img, .tagin-attendee-stack span {
     width: 30px;
     height: 30px;
     margin-left: -8px;
     border: 3px solid #fff;
     border-radius: 50%;
}
 .tagin-attendee-stack img {
     object-fit: cover;
}
 .tagin-attendee-stack span {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.25), transparent 45%), linear-gradient(135deg, var(--events-primary), var(--events-blue));
     color: #fff;
     font-size: 9px;
     font-weight: 900;
}

/* ==================== EVENT ACTIONS ==================== */
 .tagin-event-card-actions {
     display: flex;
     align-items: stretch;
     justify-content: center;
     gap: 10px;
     padding: 18px;
     flex-direction: column;
     border-left: 1px solid rgba(82,91,166,.10);
     background: rgba(244,246,255,.70);
}
 .tagin-event-price {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
}
 .tagin-event-price small {
     color: #999fb5;
     font-size: 10px;
     font-weight: 700;
}
 .tagin-event-price strong {
     color: var(--events-dark);
     font-size: 20px;
     font-weight: 900;
}
 .tagin-event-spots {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     color: #69718e;
     font-size: 11px;
     font-weight: 850;
}
 .tagin-event-spots.low-spots {
     color: #df626c;
}
 .tagin-event-primary-btn, .tagin-event-secondary-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     width: 100%;
     min-height: 43px;
     padding: 0 12px;
     border-radius: 13px;
     font-size: 12px;
     font-weight: 850;
}
 .tagin-event-primary-btn {
     border: 0;
     background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.27), transparent 43%), linear-gradient(135deg, var(--events-primary), var(--events-secondary));
     color: #fff;
     box-shadow: 0 9px 20px rgba(88,95,255,.25);
}
 .tagin-event-primary-btn:hover {
     color: #fff;
     transform: translateY(-1px);
     box-shadow: 0 12px 25px rgba(88,95,255,.34);
}
 .tagin-event-secondary-btn {
     border: 1px solid rgba(92,98,177,.16);
     background: #fff;
     color: #555d7d;
}
 .tagin-event-secondary-btn:hover {
     border-color: rgba(102,103,245,.28);
     color: var(--events-primary);
}

/* ==================== MOBILE-ONLY EVENT CONTENT ==================== */
 .tagin-event-mobile-details, .tagin-event-mobile-footer {
     display: none;
}

/* ==================== DESKTOP GRID VIEW ==================== */
 .tagin-events-list.tagin-grid-view {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ==================== EMPTY STATE ==================== */
 .tagin-no-events {
     padding: 72px 20px;
     text-align: center;
}
 .tagin-no-events-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 76px;
     height: 76px;
     margin-bottom: 15px;
     border-radius: 24px;
     background: linear-gradient(135deg, rgba(102,103,245,.14), rgba(57,136,245,.13));
     color: var(--events-primary);
     font-size: 29px;
}
 .tagin-no-events h3 {
     margin: 0 0 7px;
     font-weight: 850;
}
 .tagin-no-events p {
     margin: 0 0 18px;
     color: var(--events-muted);
}

/* ==================== TABLET ==================== */
 @media (max-width: 1199.98px) and (min-width: 768px) {
     .tagin-event-card {
         grid-template-columns: 220px minmax(0, 1fr);
    }
     .tagin-event-card-content {
         grid-template-columns: minmax(0, 1fr) 145px;
    }
     .tagin-event-card-main {
         padding: 19px;
    }
     .tagin-events-list.tagin-grid-view {
         grid-template-columns: 1fr;
    }
}

/* ==================== MOBILE APP MODE ==================== */
 @media (max-width: 767.98px) {
     .tagin-events-page, .tagin-events-page.tagin-mobile-mode {
         width: 100%;
         min-width: 0;
         overflow-x: hidden;
    }
     .tagin-events-toolbar {
         display: grid;
         grid-template-columns: minmax(0, 1fr) auto minmax(108px, auto);
         width: 100%;
         min-width: 0;
         margin: 0 0 14px;
         gap: 9px;
         overflow: visible;
    }
     .tagin-event-search {
         width: 100%;
         min-width: 0;
         min-height: 51px;
         padding: 0 13px;
         border-radius: 17px;
    }
     .tagin-event-search input {
         min-width: 0;
         padding-right: 6px;
         font-size: 12px;
    }
     .tagin-toolbar-btn {
         width: auto;
         min-width: 0;
         min-height: 51px;
         padding: 0 13px;
         border-radius: 17px;
         font-size: 12px;
    }
     .tagin-events-toolbar > [data-event-filter-toggle] {
         white-space: nowrap;
    }
     .tagin-event-sort-wrap {
         min-width: 0;
    }
     .tagin-sort-btn {
         display: flex;
         width: 100%;
         max-width: 100%;
         overflow: hidden;
    }
     .tagin-sort-btn [data-event-sort-label] {
         min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
    }
     .tagin-event-categories {
         display: grid;
         grid-template-columns: minmax(0, 1fr) auto auto;
         width: 100%;
         min-width: 0;
         margin: 0 0 14px;
         overflow: visible;
    }
     .tagin-event-type-select {
         width: 100%;
         min-width: 0;
         min-height: 44px;
         padding-right: 12px;
         padding-left: 13px;
         border-radius: 16px;
    }
     .tagin-event-type-select::after {
         right: 14px;
    }
     .tagin-event-type-select select {
         height: 42px;
         padding-right: 26px;
         padding-left: 9px;
         font-size: 11px;
    }
     .tagin-category-chip {
         min-width: 0;
         min-height: 44px;
         padding: 0 13px;
         border-radius: 16px;
         font-size: 11px;
    }
     .tagin-events-content {
         width: 100%;
         min-width: 0;
         border-radius: 24px;
    }
     .tagin-events-list, .tagin-events-list.tagin-grid-view {
         display: flex;
         width: 100%;
         min-width: 0;
         flex-direction: column;
         gap: 15px;
    }
     .tagin-event-card{
         display: grid;
         grid-template-columns: 122px minmax(0, 1fr);
         width: 100%;
         min-width: 0;
         min-height: 320px;
         overflow: hidden;
         border-radius: 22px;
    }
     .tagin-event-image-wrapper{
         width: 122px;
         height: 100%;
         min-height: 320px;
         flex: none;
    }
     .tagin-event-card-content{
         display: block;
         width: 100%;
         min-width: 0;
    }
     .tagin-event-card-main{
         display: flex;
         width: 100%;
         min-width: 0;
         height: 100%;
         padding: 14px;
         flex-direction: column;
    }
     .tagin-event-category-row {
         align-items: flex-start;
         justify-content: space-between;
         gap: 8px;
         margin-bottom: 8px;
    }
     .tagin-event-category, .tagin-event-distance {
         min-width: 0;
         font-size: 9px;
    }
     .tagin-event-category {
         flex: 1 1 auto;
    }
     .tagin-event-distance {
         flex: 0 0 auto;
         white-space: nowrap;
    }
     .tagin-event-card h3 {
         margin-bottom: 9px;
         font-size: 18px;
         line-height: 1.18;
         overflow-wrap: anywhere;
    }
     .tagin-event-meta {
         display: flex;
         align-items: flex-start;
         gap: 6px;
         margin-bottom: 10px;
         flex-direction: column;
    }
     .tagin-event-meta span {
         width: 100%;
         min-width: 0;
         font-size: 11px;
    }
     .tagin-event-description {
         margin-bottom: 12px;
         font-size: 12px;
         line-height: 1.45;
         -webkit-line-clamp: 2;
    }
     .tagin-event-desktop-host, .tagin-event-desktop-actions {
         display: none !important;
    }
     .tagin-event-mobile-details {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         margin-bottom: 12px;
         padding: 10px 0;
         border-top: 1px solid rgba(82,91,166,.10);
         border-bottom: 1px solid rgba(82,91,166,.10);
    }
     .tagin-event-mobile-details .tagin-event-price {
         align-items: flex-start;
         justify-content: center;
         margin: 0;
         text-align: left;
    }
     .tagin-event-mobile-details .tagin-event-price small {
         font-size: 8px;
    }
     .tagin-event-mobile-details .tagin-event-price strong {
         font-size: 17px;
         line-height: 1;
    }
     .tagin-event-mobile-details .tagin-event-spots {
         justify-content: flex-end;
         margin: 0;
         font-size: 10px;
         white-space: nowrap;
    }
     .tagin-event-mobile-footer {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         margin-top: auto;
    }
     .tagin-event-mobile-footer .tagin-event-host-row {
         min-width: 0;
         flex: 1 1 auto;
    }
     .tagin-event-mobile-footer .tagin-event-host-row > img {
         width: 32px;
         height: 32px;
         margin-right: 8px;
         flex: 0 0 32px;
    }
     .tagin-event-mobile-footer .tagin-event-host-row small {
         font-size: 8px;
    }
     .tagin-event-mobile-footer .tagin-event-host-row strong {
         font-size: 10px;
    }
     .tagin-event-mobile-footer .tagin-attendee-stack {
         display: none;
    }
     .tagin-event-mobile-footer .tagin-event-secondary-btn {
         width: auto;
         min-width: 88px;
         min-height: 38px;
         padding: 0 10px;
         flex: 0 0 auto;
         border-radius: 11px;
         font-size: 9px;
         white-space: nowrap;
    }
}

/* ==================== SMALL MOBILE ==================== */
 @media (max-width: 430px) {
     .tagin-events-toolbar {
         grid-template-columns: minmax(0, 1fr) 88px 112px;
         width: 100%;
         margin-right: 0;
         margin-left: 0;
         padding-right: 0;
         padding-left: 0;
         gap: 7px;
    }
     .tagin-event-search {
         width: 100%;
         min-width: 0;
         padding: 0 11px;
    }
     .tagin-event-search input {
         padding: 0 7px;
         font-size: 11px;
    }
     .tagin-toolbar-btn {
         padding: 0 9px;
         gap: 6px;
         font-size: 11px;
    }
     .tagin-toolbar-chevron {
         display: none;
    }
     .tagin-event-categories {
         grid-template-columns: minmax(0, 1fr) 94px 112px;
         width: 100%;
         margin-right: 0;
         margin-left: 0;
         padding-right: 0;
         padding-left: 0;
         gap: 7px;
    }
     .tagin-event-type-select {
         padding-left: 11px;
    }
     .tagin-event-type-select > i {
         font-size: 11px;
    }
     .tagin-event-type-select select {
         padding-left: 7px;
         font-size: 10px;
    }
     .tagin-category-chip {
         padding: 0 9px;
         gap: 6px;
         font-size: 10px;
    }
     .tagin-events-content {
         padding: 13px;
         border-radius: 22px;
    }
     .tagin-event-image-wrapper{
         height: 190px;
         min-height: 190px;
         flex-basis: 190px;
    }
     .tagin-event-card-main {
         padding: 16px;
    }
     .tagin-event-card-actions{
         padding: 13px 16px 16px;
    }
     .tagin-attendee-stack img:nth-child(2), .tagin-attendee-stack img:nth-child(3) {
         display: none;
    }
}

/* ==================== VERY SMALL MOBILE ==================== */
 @media (max-width: 360px) {
     .tagin-event-image-wrapper{
         height: 175px;
         min-height: 175px;
         flex-basis: 175px;
    }
     .tagin-event-card h3 {
         font-size: 18px;
    }
}

/* ==================== PAGE: CREATE EVENT ==================== */
.tagin-create-event-page {
    width: 100%;
    min-width: 0;
}
.tagin-create-event-hero {
    background:
        radial-gradient(circle at 92% 115%, rgba(255,255,255,.11) 0 95px, transparent 96px),
        radial-gradient(circle at 88% -40%, rgba(94,204,255,.16) 0 145px, transparent 146px),
        linear-gradient(135deg, rgba(35,39,84,.98), rgba(70,84,170,.97), rgba(75,59,139,.98));
}
.tagin-create-event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 22px;
}
.tagin-create-event-main {
    display: grid;
    gap: 22px;
    min-width: 0;
}
.tagin-create-event-section,
.tagin-event-summary-card,
.tagin-event-publish-card {
    border: 1px solid rgba(68,75,143,.11);
    background: rgba(255,255,255,.84);
    box-shadow: 0 16px 42px rgba(42,49,107,.09);
    backdrop-filter: blur(16px);
}
.tagin-create-event-section {
    padding: 26px;
    border-radius: 25px;
}
.tagin-create-event-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 23px;
}
.tagin-create-event-section-icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: #fff;
    font-size: 17px;
    box-shadow: 0 11px 24px rgba(85,120,255,.23);
}
.tagin-create-event-section-header h2 {
    margin: 0 0 3px;
    color: #171b36;
    font-size: 18px;
    font-weight: 900;
}
.tagin-create-event-section-header p {
    margin: 0;
    color: #818aa1;
    font-size: 12px;
    font-weight: 600;
}
.tagin-form-label {
    display: block;
    margin-bottom: 8px;
    color: #353b59;
    font-size: 12px;
    font-weight: 850;
}
.tagin-form-control {
    min-height: 50px;
    border: 1px solid rgba(74,82,147,.14);
    border-radius: 15px;
    background-color: rgba(246,248,255,.92);
    color: #171b36;
    font-size: 14px;
    font-weight: 650;
    box-shadow: none;
}
.tagin-form-control::placeholder {
    color: #9ba3b7;
    font-weight: 500;
}
.tagin-form-control:focus {
    border-color: rgba(85,120,255,.65);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(85,120,255,.11);
}
textarea.tagin-form-control {
    padding-top: 15px;
    resize: vertical;
    min-height: 10rem;
}
.tagin-event-description {
    min-height: 50px;
}
.tagin-field-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 7px;
    color: #9aa2b5;
    font-size: 11px;
    font-weight: 700;
}
.tagin-field-error {
    display: none;
    margin-top: 7px;
    color: #dc5369;
    font-size: 11px;
    font-weight: 750;
}
.tagin-field-error.is-visible {
    display: block;
}
.tagin-form-control.is-invalid {
    border-color: #dc5369 !important;
    background-image: none !important;
    box-shadow: 0 0 0 4px rgba(220,83,105,.10) !important;
}
.tagin-event-cover-upload {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 270px;
    place-items: center;
    overflow: hidden;
    border: 2px dashed rgba(85,120,255,.24);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(123,92,255,.09), transparent 35%),
        rgba(245,247,255,.88);
    cursor: pointer;
    transition: .2s ease;
}
.tagin-event-cover-upload:hover {
    border-color: rgba(85,120,255,.5);
    background-color: #fff;
}
.tagin-event-cover-upload img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tagin-event-cover-placeholder {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 7px;
    padding: 24px;
    color: #171b36;
    text-align: center;
}
.tagin-event-cover-placeholder > span {
    color: #8a93aa;
    font-size: 12px;
    font-weight: 600;
}
.tagin-event-cover-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 5px;
    place-items: center;
    border-radius: 19px;
    background: rgba(85,120,255,.12);
    color: var(--app-primary);
    font-size: 22px;
}
.tagin-event-cover-button {
    margin-top: 8px;
    padding: 9px 15px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: #fff !important;
    font-weight: 800 !important;
}
.tagin-event-cover-remove {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 13px;
    background: rgba(16,19,40,.72);
    color: #fff;
    backdrop-filter: blur(10px);
}
.tagin-event-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.tagin-event-choice {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 122px;
    padding: 18px;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(74,82,147,.13);
    border-radius: 18px;
    background: rgba(246,248,255,.84);
    color: #7e879e;
    cursor: pointer;
    transition: .2s ease;
}
.tagin-event-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tagin-event-choice i {
    margin-bottom: 4px;
    color: #7884a1;
    font-size: 20px;
}
.tagin-event-choice strong {
    color: #2e3452;
    font-size: 14px;
    font-weight: 850;
}
.tagin-event-choice span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}
.tagin-event-choice:hover,
.tagin-event-choice.active {
    border-color: rgba(85,120,255,.48);
    background: linear-gradient(135deg, rgba(85,120,255,.10), rgba(123,92,255,.08));
    box-shadow: 0 10px 22px rgba(85,120,255,.08);
}
.tagin-event-choice.active i {
    color: var(--app-primary);
}
.tagin-event-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
    padding: 16px 18px;
    border: 1px solid rgba(74,82,147,.11);
    border-radius: 17px;
    background: rgba(246,248,255,.76);
}
.tagin-event-toggle-row div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.tagin-event-toggle-row strong {
    color: #303653;
    font-size: 13px;
    font-weight: 850;
}
.tagin-event-toggle-row div > span {
    color: #8992a8;
    font-size: 11px;
    font-weight: 600;
}
.tagin-switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex: 0 0 48px;
    cursor: pointer;
}
.tagin-switch input {
    position: absolute;
    opacity: 0;
}
.tagin-switch > span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #c8cedc;
    transition: .2s ease;
}
.tagin-switch > span::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(30,34,62,.2);
    transition: .2s ease;
}
.tagin-switch input:checked + span {
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
}
.tagin-switch input:checked + span::after {
    transform: translateX(20px);
}
.tagin-input-addon {
    border-color: rgba(74,82,147,.14);
    background: #edf0fa;
    color: #68728d;
    font-size: 12px;
    font-weight: 850;
}
.tagin-create-event-sidebar {
    position: sticky;
    top: 94px;
    display: grid;
    gap: 18px;
}
.tagin-event-summary-card,
.tagin-event-publish-card {
    padding: 20px;
    border-radius: 23px;
}
.tagin-event-summary-label {
    display: block;
    margin-bottom: 12px;
    color: #929bb0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tagin-event-summary-cover {
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    place-items: center;
    overflow: hidden;
    border-radius: 17px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 35%),
        linear-gradient(135deg, #5578ff, #7658dc);
    color: #fff;
    font-size: 34px;
}
.tagin-event-summary-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tagin-event-summary-card h3 {
    margin: 17px 0 15px;
    color: #171b36;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.tagin-event-summary-details {
    display: grid;
    gap: 11px;
}
.tagin-event-summary-details > div {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: start;
    color: #737d96;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}
.tagin-event-summary-details i {
    color: var(--app-primary);
    font-size: 13px;
}
.tagin-event-publish-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 17px;
}
.tagin-event-publish-heading > i {
    color: var(--app-primary);
    font-size: 20px;
}
.tagin-event-publish-heading div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tagin-event-publish-heading strong {
    color: #252b49;
    font-size: 14px;
    font-weight: 900;
}
.tagin-event-publish-heading span {
    color: #8b94aa;
    font-size: 11px;
    font-weight: 600;
}
.tagin-event-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border-radius: 14px;
    background: rgba(85,120,255,.07);
    color: #69738d;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.45;
    cursor: pointer;
}
.tagin-event-confirmation input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--app-primary);
}
.tagin-event-publish-btn,
.tagin-event-draft-btn {
    display: flex;
    width: 100%;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 13px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 850;
    transition: .2s ease;
}
.tagin-event-publish-btn {
    border: 0;
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: #fff;
    box-shadow: 0 12px 24px rgba(85,120,255,.22);
}
.tagin-event-draft-btn {
    border: 1px solid rgba(74,82,147,.13);
    background: rgba(246,248,255,.9);
    color: #626d89;
}
.tagin-event-publish-btn:hover,
.tagin-event-draft-btn:hover {
    transform: translateY(-1px);
}
@media (max-width: 1199.98px) {
    .tagin-create-event-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
    }
}
@media (max-width: 991.98px) {
    .tagin-create-event-layout {
        grid-template-columns: 1fr;
    }
    .tagin-create-event-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .tagin-create-event-section {
        padding: 20px 17px;
        border-radius: 21px;
    }
    .tagin-create-event-section-header {
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .tagin-create-event-section-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 15px;
    }
    .tagin-event-choice-grid,
    .tagin-create-event-sidebar {
        grid-template-columns: 1fr;
    }
    .tagin-event-choice {
        min-height: 108px;
    }
    .tagin-event-cover-upload {
        min-height: 220px;
    }
    .tagin-event-toggle-row {
        align-items: flex-start;
    }
    .tagin-create-event-hero .tagin-page-hero-action {
        width: 100%;
    }
}

/* ==================== EVENTS: AJAX & INFINITE SCROLL ==================== */
.tagin-event-sort-wrap { position: relative; }
.tagin-event-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 190px; padding: 8px; border: 1px solid rgba(82,91,166,.16); border-radius: 17px; background: rgba(250,251,255,.98); box-shadow: 0 20px 50px rgba(21,28,73,.22); }
.tagin-event-menu button { display: flex; width: 100%; min-height: 40px; align-items: center; padding: 0 12px; border: 0; border-radius: 11px; color: #59627d; background: transparent; font: inherit; font-size: 12px; font-weight: 800; text-align: left; }
.tagin-event-menu button:hover, .tagin-event-menu button.active { color: #445be0; background: rgba(85,120,255,.11); }
.tagin-event-filter-panel { margin: -2px 0 16px; padding: 18px; border: 1px solid rgba(82,91,166,.12); border-radius: 20px; background: rgba(247,248,255,.94); box-shadow: 0 18px 45px rgba(25,32,81,.13); }
.tagin-event-filter-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.tagin-event-filter-grid label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #727b96; font-size: 11px; font-weight: 900; }
.tagin-event-filter-grid select { width: 100%; min-height: 44px; padding: 0 38px 0 13px; border: 1px solid rgba(82,91,166,.13); border-radius: 13px; color: #252b4f; background: rgba(255,255,255,.88); font: inherit; font-size: 12px; font-weight: 750; }
.tagin-event-filter-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.tagin-event-loading { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 70px; color: #737d9a; font-size: 13px; font-weight: 800; }
.tagin-event-load-error { padding: 20px; color: #69728d; text-align: center; }
.tagin-event-load-error p { margin: 0 0 12px; }
[data-event-scroll-sentinel] { width: 100%; height: 2px; }
.tagin-save-event-btn:disabled { opacity: .65; cursor: wait; }
.tagin-event-card { content-visibility: auto; contain-intrinsic-size: 210px; }
@media (max-width: 991.98px) {
    .tagin-event-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575.98px) {
    .tagin-event-sort-wrap { flex: 0 0 auto; }
    .tagin-event-menu { position: fixed; top: auto; right: 14px; bottom: calc(var(--tagin-footer-height, 86px) + 14px); left: 14px; width: auto; }
    .tagin-event-filter-panel { padding: 14px; border-radius: 18px; }
    .tagin-event-filter-grid { grid-template-columns: 1fr; }
    .tagin-event-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ==================== EVENTS: CUSTOM CHOICE MENUS ==================== */
.tagin-event-choice-wrap {
    position: relative;
    min-width: 0;
}
.tagin-event-type-select {
    width: min(290px, 100%);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.tagin-event-choice-button,
.tagin-event-filter-choice {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border: 1px solid rgba(82, 91, 166, .14);
    border-radius: 16px;
    color: #303858;
    background: rgba(250, 251, 255, .94);
    box-shadow: 0 10px 24px rgba(25, 32, 78, .08);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    appearance: none;
}
.tagin-event-choice-button > span,
.tagin-event-filter-choice > span {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tagin-event-choice-button > i:first-child {
    color: #506cff;
}
.tagin-event-choice-button > i:last-child,
.tagin-event-filter-choice > i:last-child {
    flex: 0 0 auto;
    color: #8790aa;
    font-size: 10px;
    transition: transform .18s ease;
}
.tagin-event-choice-button[aria-expanded="true"] > i:last-child,
.tagin-event-filter-choice[aria-expanded="true"] > i:last-child {
    transform: rotate(180deg);
}
.tagin-event-choice-button:hover,
.tagin-event-filter-choice:hover,
.tagin-event-choice-button:focus-visible,
.tagin-event-filter-choice:focus-visible {
    border-color: rgba(85, 120, 255, .42);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(85, 120, 255, .10), 0 12px 28px rgba(25, 32, 78, .10);
    outline: 0;
}
.tagin-event-choice-button:disabled {
    opacity: .52;
    cursor: not-allowed;
    box-shadow: none;
}
.tagin-event-choice-menu {
    right: auto;
    left: 0;
    width: max(100%, 235px);
    max-height: min(360px, 55vh);
    overflow-y: auto;
}
.tagin-event-choice-menu button {
    gap: 11px;
}
.tagin-event-choice-menu button i {
    width: 18px;
    flex: 0 0 18px;
    color: #6678f3;
    text-align: center;
}
.tagin-event-choice-menu button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tagin-event-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tagin-event-filter-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    color: #727b96;
    font-size: 11px;
    font-weight: 900;
}
.tagin-event-filter-choice {
    min-height: 44px;
    border-radius: 13px;
    box-shadow: none;
}
@media (max-width: 767.98px) {
    .tagin-event-choice-menu {
        position: fixed;
        top: auto;
        right: 14px;
        bottom: calc(var(--tagin-footer-height, 86px) + 14px);
        left: 14px;
        z-index: 1100;
        width: auto;
        max-height: min(420px, calc(100dvh - var(--tagin-footer-height, 86px) - 110px));
        padding: 10px;
        border-radius: 22px;
        box-shadow: 0 24px 70px rgba(12, 17, 49, .36);
    }
    .tagin-event-choice-menu button {
        min-height: 48px;
        padding: 0 14px;
        border-radius: 14px;
        font-size: 13px;
    }
    .tagin-event-type-select {
        width: 100%;
    }
    .tagin-event-choice-button {
        min-height: 44px;
        padding: 0 12px;
        border-radius: 15px;
        font-size: 11px;
    }
    .tagin-event-filter-grid {
        grid-template-columns: 1fr;
    }
    .tagin-event-filter-choice {
        min-height: 48px;
        padding: 0 14px;
        border-radius: 15px;
        font-size: 12px;
    }
}

/* ==================== EVENTS: CUSTOM MENU COMPATIBILITY ==================== */
.tagin-event-categories .tagin-event-type-select {
    overflow: visible;
}
.tagin-event-categories .tagin-event-type-select::after {
    display: none;
    content: none;
}
[data-event-category-toggle] .tagin-toolbar-chevron{
    display: inline-block;
    transform: rotate(0deg);
}
[data-event-category-toggle][aria-expanded="true"] .tagin-toolbar-chevron {
    transform: rotate(180deg);
}
.tagin-event-categories {
    position: relative;
    z-index: 30;
    overflow: visible;
}
.tagin-event-categories .tagin-event-choice-wrap {
    overflow: visible;
}
.tagin-event-categories .tagin-event-choice-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: auto;
    bottom: auto;
    left: 0;
    z-index: 1200;
    min-width: 250px;
    max-width: min(360px, calc(100vw - 30px));
}
.tagin-event-type-select > .tagin-event-choice-button > i {
    position: static;
    z-index: auto;
    pointer-events: none;
}
.tagin-event-type-select > .tagin-event-choice-button > i:last-child {
    margin-left: auto;
}
@media (max-width: 767.98px) {
    .tagin-event-categories .tagin-event-choice-menu {
        position: fixed;
        top: auto;
        right: 14px;
        bottom: calc(var(--tagin-footer-height, 86px) + 14px);
        left: 14px;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* ==================== EVENTS: DISTANCE FILTER ==================== */
.tagin-event-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tagin-event-distance-filter {
    grid-column: 1 / -1;
    padding: 14px 16px 12px;
    border: 1px solid rgba(82, 91, 166, .12);
    border-radius: 16px;
    background: rgba(250, 251, 255, .78);
}
.tagin-event-distance-filter-heading,
.tagin-event-distance-filter-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tagin-event-distance-filter-heading {
    margin-bottom: 12px;
}
.tagin-event-distance-filter-heading > span {
    color: #727b96;
    font-size: 11px;
    font-weight: 900;
}
.tagin-event-distance-filter-heading strong {
    color: #4f60d9;
    font-size: 12px;
    font-weight: 900;
}
.tagin-event-distance-filter input[type="range"] {
    width: 100%;
    height: 6px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #5578ff, #7b5cff);
    accent-color: #5e72ff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.tagin-event-distance-filter input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5578ff, #7b5cff);
}
.tagin-event-distance-filter input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #5d70f7;
    box-shadow: 0 4px 13px rgba(52, 65, 158, .32);
    appearance: none;
    -webkit-appearance: none;
}
.tagin-event-distance-filter input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5578ff, #7b5cff);
}
.tagin-event-distance-filter input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #5d70f7;
    box-shadow: 0 4px 13px rgba(52, 65, 158, .32);
}
.tagin-event-distance-filter-scale {
    margin-top: 9px;
    color: #9aa2b8;
    font-size: 9px;
    font-weight: 800;
}

/* ==================== EVENTS: MEMBERSHIP BADGES ==================== */
.tagin-event-category-status {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tagin-event-membership-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .015em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.tagin-event-membership-badge.tagged-in {
    color: #177149;
    border-color: rgba(40, 174, 111, .22);
    background: rgba(53, 205, 132, .15);
}
.tagin-event-membership-badge.awaiting-approval {
    color: #93600b;
    border-color: rgba(230, 161, 39, .28);
    background: rgba(255, 190, 68, .18);
}
.tagin-event-membership-badge i {
    font-size: 10px;
}
@media (max-width: 767.98px) {
    .tagin-event-filter-grid {
        grid-template-columns: 1fr;
    }
    .tagin-event-distance-filter {
        grid-column: auto;
        padding: 13px 14px 11px;
    }
    .tagin-event-category-status {
        gap: 6px;
    }
    .tagin-event-membership-badge {
        min-height: 22px;
        padding: 0 7px;
        font-size: 8px;
    }
}
@media (max-width: 430px) {
    .tagin-event-category-row {
        gap: 6px;
    }
    .tagin-event-category-status {
        align-items: flex-start;
        flex-direction: column;
    }
}
body.tagin-report-modal-open {
     overflow: hidden;
}
 .tagin-report-modal {
     position: fixed;
     z-index: 11000;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 22px;
     background: rgba(12, 15, 37, 0);
     backdrop-filter: blur(0);
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity 180ms ease, background 180ms ease, backdrop-filter 180ms ease, visibility 180ms ease;
}
 .tagin-report-modal.is-open {
     background: rgba(12, 15, 37, 0.68);
     backdrop-filter: blur(10px);
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
}
 .tagin-report-modal-panel {
     position: relative;
     overflow: hidden;
     width: min(100%, 620px);
     max-height: min(820px, calc(100svh - 44px));
     overflow-y: auto;
     border: 1px solid rgba(100, 106, 176, 0.17);
     border-radius: 27px;
     background: linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(244, 247, 255, 0.98));
     color: #202442;
     box-shadow: 0 34px 90px rgba(8, 11, 32, 0.36);
     transform: translateY(18px) scale(0.975);
     transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
 .tagin-report-modal.is-open .tagin-report-modal-panel {
     transform: translateY(0) scale(1);
}
 .tagin-report-modal-accent {
     height: 5px;
     background: linear-gradient(90deg, #5f63df, #8d5adf 48%, #d64f93);
}
 .tagin-report-modal-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 18px;
     padding: 27px 29px 22px;
     border-bottom: 1px solid rgba(55, 61, 111, 0.08);
}
 .tagin-report-modal-heading {
     display: flex;
     align-items: flex-start;
     gap: 16px;
}
 .tagin-report-modal-icon {
     display: grid;
     flex: 0 0 52px;
     width: 52px;
     height: 52px;
     place-items: center;
     border: 1px solid rgba(198, 59, 111, 0.16);
     border-radius: 17px;
     background: linear-gradient(145deg, rgba(214, 79, 147, 0.13), rgba(109, 93, 224, 0.1));
     color: #bd3f78;
     font-size: 20px;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
 .tagin-report-modal-eyebrow {
     display: block;
     margin-bottom: 5px;
     color: #777d9d;
     font-size: 10px;
     font-weight: 900;
     letter-spacing: 0.15em;
     text-transform: uppercase;
}
 .tagin-report-modal-heading h2 {
     margin: 0;
     color: #191d3b;
     font-size: 23px;
     font-weight: 850;
     letter-spacing: -0.035em;
     line-height: 1.15;
}
 .tagin-report-modal-heading p {
     max-width: 440px;
     margin: 7px 0 0;
     color: #737895;
     font-size: 13px;
     line-height: 1.55;
}
 .tagin-report-modal-close {
     display: grid;
     flex: 0 0 38px;
     width: 38px;
     height: 38px;
     padding: 0;
     place-items: center;
     border: 1px solid rgba(62, 68, 119, 0.09);
     border-radius: 12px;
     background: rgba(50, 55, 104, 0.055);
     color: #6f7595;
     cursor: pointer;
     transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
 .tagin-report-modal-close:hover {
     transform: rotate(4deg);
     background: rgba(190, 56, 104, 0.1);
     color: #b53a68;
}
 .tagin-report-form {
     padding: 24px 29px 29px;
}
 .tagin-report-notice {
     display: flex;
     align-items: flex-start;
     gap: 13px;
     margin-bottom: 21px;
     padding: 14px 15px;
     border: 1px solid rgba(91, 96, 190, 0.11);
     border-radius: 15px;
     background: linear-gradient(135deg, rgba(91, 96, 190, 0.07), rgba(131, 93, 209, 0.045));
}
 .tagin-report-notice > i {
     margin-top: 2px;
     color: #6267d6;
     font-size: 17px;
}
 .tagin-report-notice div {
     display: flex;
     flex-direction: column;
     gap: 2px;
}
 .tagin-report-notice strong {
     color: #31365d;
     font-size: 13px;
     font-weight: 800;
}
 .tagin-report-notice span {
     color: #7a809e;
     font-size: 12px;
     line-height: 1.45;
}
 .tagin-report-field {
     display: flex;
     margin-top: 18px;
     flex-direction: column;
     gap: 8px;
}
 .tagin-report-field > label, .tagin-report-label-row label {
     color: #313654;
     font-size: 12px;
     font-weight: 850;
}
 .tagin-report-label-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
}
 .tagin-report-label-row > span {
     color: #9297ad;
     font-size: 10px;
     font-weight: 700;
}
 .tagin-report-select-wrap {
     position: relative;
}
 .tagin-report-select-wrap select {
     width: 100%;
     height: 50px;
     padding: 0 45px 0 14px;
     border: 1px solid #d9ddef;
     border-radius: 13px;
     outline: none;
     background: rgba(255, 255, 255, 0.88);
     color: #282d4f;
     font-size: 13px;
     font-weight: 650;
     appearance: none;
     transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
 .tagin-report-select-wrap > i {
     position: absolute;
     top: 50%;
     right: 16px;
     color: #8d92ad;
     font-size: 11px;
     pointer-events: none;
     transform: translateY(-50%);
}
 .tagin-report-field textarea {
     width: 100%;
     min-height: 132px;
     padding: 14px 15px;
     border: 1px solid #d9ddef;
     border-radius: 13px;
     outline: none;
     background: rgba(255, 255, 255, 0.88);
     color: #282d4f;
     font-family: inherit;
     font-size: 13px;
     line-height: 1.55;
     resize: vertical;
     transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
 .tagin-report-select-wrap select:focus, .tagin-report-field textarea:focus {
     border-color: rgba(94, 99, 218, 0.65);
     background: #fff;
     box-shadow: 0 0 0 4px rgba(94, 99, 218, 0.1);
}
 .tagin-report-field textarea::placeholder {
     color: #a2a6bb;
}
 .tagin-report-field small {
     color: #9297ac;
     font-size: 10px;
     line-height: 1.4;
}
 .tagin-report-error {
     margin-top: 16px;
     padding: 11px 13px;
     border: 1px solid rgba(194, 55, 86, 0.18);
     border-radius: 11px;
     background: rgba(194, 55, 86, 0.075);
     color: #a62e4c;
     font-size: 12px;
     font-weight: 700;
}
 .tagin-report-modal-actions {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 10px;
     margin-top: 24px;
     padding-top: 20px;
     border-top: 1px solid rgba(55, 61, 111, 0.08);
}
 .tagin-report-cancel-button, .tagin-report-submit-button, .tagin-report-success-button {
     height: 45px;
     padding: 0 18px;
     border: 0;
     border-radius: 12px;
     font-size: 12px;
     font-weight: 850;
     cursor: pointer;
     transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
 .tagin-report-cancel-button {
     border: 1px solid rgba(55, 61, 111, 0.1);
     background: rgba(55, 61, 111, 0.055);
     color: #686e8d;
}
 .tagin-report-submit-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     min-width: 150px;
     background: linear-gradient(135deg, #6964de, #9b58d5 58%, #c44887);
     color: #fff;
     box-shadow: 0 12px 25px rgba(111, 80, 199, 0.22);
}
 .tagin-report-submit-button:hover, .tagin-report-success-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 30px rgba(111, 80, 199, 0.28);
}
 .tagin-report-cancel-button:hover {
     transform: translateY(-1px);
     background: rgba(55, 61, 111, 0.085);
}
 .tagin-report-form.is-submitting .tagin-report-submit-button {
     opacity: 0.68;
     cursor: wait;
}
 .tagin-report-form.is-submitting .tagin-report-submit-button i {
     animation: taginReportSubmitPulse 800ms ease-in-out infinite alternate;
}
 .tagin-report-success {
     padding: 18px 5px 5px;
     text-align: center;
}
 .tagin-report-success-icon {
     display: grid;
     width: 70px;
     height: 70px;
     margin: 0 auto 18px;
     place-items: center;
     border: 1px solid rgba(42, 170, 112, 0.18);
     border-radius: 23px;
     background: linear-gradient(145deg, rgba(42, 170, 112, 0.13), rgba(82, 205, 155, 0.08));
     color: #269a68;
     font-size: 26px;
     box-shadow: 0 13px 30px rgba(42, 170, 112, 0.12);
}
 .tagin-report-success h3 {
     margin: 0;
     color: #1e2341;
     font-size: 23px;
     font-weight: 850;
     letter-spacing: -0.03em;
}
 .tagin-report-success p {
     max-width: 400px;
     margin: 10px auto 22px;
     color: #777d99;
     font-size: 13px;
     line-height: 1.55;
}
 .tagin-report-success-button {
     min-width: 120px;
     background: linear-gradient(135deg, #6663d9, #8b5bd8);
     color: #fff;
     box-shadow: 0 12px 25px rgba(98, 88, 210, 0.2);
}
 [data-profile-report].is-reported {
     opacity: 0.7;
}
 @keyframes taginReportSubmitPulse {
     from {
         transform: translateX(0);
    }
     to {
         transform: translateX(4px);
    }
}
 @media (max-width: 650px) {
     .tagin-report-modal {
         align-items: flex-end;
         padding: 0;
    }
     .tagin-report-modal-panel {
         height: 100%;
         width: 100%;
         min-height: 100%;
         border-radius: 0 0 0 0;
         transform: translateY(100%);
    }
     .tagin-report-modal.is-open .tagin-report-modal-panel {
         transform: translateY(0);
    }
     .tagin-report-modal-header {
         padding: 23px 19px 18px;
    }
     .tagin-report-modal-heading {
         gap: 12px;
    }
     .tagin-report-modal-icon {
         flex-basis: 45px;
         width: 45px;
         height: 45px;
         border-radius: 15px;
         font-size: 17px;
    }
     .tagin-report-modal-heading h2 {
         font-size: 20px;
    }
     .tagin-report-modal-heading p {
         font-size: 12px;
    }
     .tagin-report-form {
         padding: 20px 19px calc(22px + env(safe-area-inset-bottom));
    }
     .tagin-report-modal-actions {
         display: grid;
         grid-template-columns: 1fr 1.35fr;
    }
     .tagin-report-cancel-button, .tagin-report-submit-button {
         width: 100%;
         padding: 0 12px;
    }
}
 .tagin-report-block-option {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-top: 20px;
     padding: 14px 15px;
     border: 1px solid rgba(72, 78, 135, 0.1);
     border-radius: 15px;
     background: rgba(73, 79, 137, 0.045);
     cursor: pointer;
     transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
 .tagin-report-block-option:hover {
     border-color: rgba(104, 96, 218, 0.22);
     background: rgba(104, 96, 218, 0.065);
     transform: translateY(-1px);
}
 .tagin-report-block-option input {
     position: absolute;
     width: 1px;
     height: 1px;
     opacity: 0;
     pointer-events: none;
}
 .tagin-report-block-control {
     display: grid;
     flex: 0 0 22px;
     width: 22px;
     height: 22px;
     margin-top: 1px;
     place-items: center;
     border: 1px solid #cfd4e8;
     border-radius: 7px;
     background: #fff;
     color: transparent;
     font-size: 10px;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
     transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
 .tagin-report-block-option input:checked + .tagin-report-block-control {
     border-color: #6b63db;
     background: linear-gradient(135deg, #6964de, #9658d3);
     color: #fff;
     box-shadow: 0 7px 16px rgba(105, 100, 222, 0.24);
}
 .tagin-report-block-option input:focus-visible + .tagin-report-block-control {
     outline: 3px solid rgba(105, 100, 222, 0.16);
     outline-offset: 2px;
}
 .tagin-report-block-copy {
     display: flex;
     min-width: 0;
     flex-direction: column;
     gap: 3px;
}
 .tagin-report-block-copy strong {
     color: #313654;
     font-size: 12px;
     font-weight: 850;
}
 .tagin-report-block-copy small {
     color: #858aa3;
     font-size: 10px;
     line-height: 1.45;
}
 body.tagin-block-modal-open {
     overflow: hidden;
}
 .tagin-block-modal {
     position: fixed;
     z-index: 11010;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 22px;
     background: rgba(12, 15, 37, 0);
     backdrop-filter: blur(0);
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity 180ms ease, background 180ms ease, backdrop-filter 180ms ease, visibility 180ms ease;
}
 .tagin-block-modal.is-open {
     background: rgba(12, 15, 37, 0.68);
     backdrop-filter: blur(10px);
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
}
 .tagin-block-modal-panel {
     position: relative;
     overflow: hidden;
     width: min(100%, 570px);
     max-height: min(760px, calc(100svh - 44px));
     overflow-y: auto;
     border: 1px solid rgba(118, 78, 118, 0.18);
     border-radius: 27px;
     background: linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(250, 245, 250, 0.98));
     color: #202442;
     box-shadow: 0 34px 90px rgba(8, 11, 32, 0.36);
     transform: translateY(18px) scale(0.975);
     transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
 .tagin-block-modal.is-open .tagin-block-modal-panel {
     transform: translateY(0) scale(1);
}
 .tagin-block-modal-accent {
     height: 5px;
     background: linear-gradient(90deg, #692f4d, #a23f69 52%, #d65d8e);
}
 .tagin-block-modal.is-unblock-mode .tagin-block-modal-accent {
     background: linear-gradient(90deg, #4f58c9, #6f63dd 52%, #8f64d9);
}
 .tagin-block-form {
     margin: 0;
}
 .tagin-block-modal-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 18px;
     padding: 28px 29px 22px;
     border-bottom: 1px solid rgba(55, 61, 111, 0.08);
}
 .tagin-block-modal-heading {
     display: flex;
     align-items: flex-start;
     gap: 16px;
}
 .tagin-block-modal-icon {
     display: grid;
     flex: 0 0 54px;
     width: 54px;
     height: 54px;
     place-items: center;
     border: 1px solid rgba(174, 55, 100, 0.17);
     border-radius: 18px;
     background: linear-gradient(145deg, rgba(190, 57, 104, 0.14), rgba(114, 58, 119, 0.08));
     color: #b33769;
     font-size: 21px;
}
 .tagin-block-modal.is-unblock-mode .tagin-block-modal-icon {
     border-color: rgba(92, 92, 205, 0.17);
     background: linear-gradient(145deg, rgba(92, 92, 205, 0.13), rgba(132, 92, 211, 0.08));
     color: #5f61cb;
}
 .tagin-block-modal-eyebrow {
     display: block;
     margin-bottom: 5px;
     color: #81778f;
     font-size: 10px;
     font-weight: 900;
     letter-spacing: 0.15em;
     text-transform: uppercase;
}
 .tagin-block-modal-heading h2 {
     margin: 0;
     color: #271a2a;
     font-size: 24px;
     font-weight: 850;
     letter-spacing: -0.035em;
     line-height: 1.15;
}
 .tagin-block-modal-heading p {
     max-width: 390px;
     margin: 8px 0 0;
     color: #7f7487;
     font-size: 13px;
     line-height: 1.55;
}
 .tagin-block-modal-close {
     display: grid;
     flex: 0 0 38px;
     width: 38px;
     height: 38px;
     padding: 0;
     place-items: center;
     border: 1px solid rgba(62, 68, 119, 0.09);
     border-radius: 12px;
     background: rgba(50, 55, 104, 0.055);
     color: #77748b;
     cursor: pointer;
     transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
 .tagin-block-modal-close:hover {
     transform: rotate(4deg);
     background: rgba(190, 56, 104, 0.1);
     color: #b53a68;
}
 .tagin-block-modal-body {
     padding: 23px 29px 29px;
}
 .tagin-block-impact-list {
     display: grid;
     gap: 10px;
}
 .tagin-block-impact-list > div {
     display: flex;
     align-items: center;
     gap: 12px;
     min-height: 48px;
     padding: 11px 13px;
     border: 1px solid rgba(91, 65, 93, 0.08);
     border-radius: 14px;
     background: rgba(103, 58, 85, 0.045);
}
 .tagin-block-impact-list i {
     display: grid;
     flex: 0 0 30px;
     width: 30px;
     height: 30px;
     place-items: center;
     border-radius: 10px;
     background: rgba(177, 55, 101, 0.1);
     color: #af3c67;
     font-size: 12px;
}
 .tagin-block-impact-list span {
     color: #4f4656;
     font-size: 12px;
     font-weight: 680;
     line-height: 1.45;
}
 .tagin-block-modal.is-unblock-mode .tagin-block-impact-list > div {
     background: rgba(91, 91, 190, 0.045);
}
 .tagin-block-modal.is-unblock-mode .tagin-block-impact-list i {
     background: rgba(91, 91, 190, 0.1);
     color: #6062ca;
}
 .tagin-block-modal-note {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     margin-top: 15px;
     padding: 12px 13px;
     border: 1px solid rgba(74, 80, 140, 0.09);
     border-radius: 13px;
     background: rgba(74, 80, 140, 0.045);
     color: #777c98;
     font-size: 11px;
     line-height: 1.5;
}
 .tagin-block-modal-note i {
     margin-top: 2px;
     color: #696fd0;
}
 .tagin-block-error {
     margin-top: 16px;
     padding: 11px 13px;
     border: 1px solid rgba(194, 55, 86, 0.18);
     border-radius: 11px;
     background: rgba(194, 55, 86, 0.075);
     color: #a62e4c;
     font-size: 12px;
     font-weight: 700;
}
 .tagin-block-modal-actions {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 10px;
     margin-top: 22px;
     padding-top: 20px;
     border-top: 1px solid rgba(55, 61, 111, 0.08);
}
 .tagin-block-cancel-button, .tagin-block-confirm-button, .tagin-block-success-button {
     height: 45px;
     padding: 0 18px;
     border: 0;
     border-radius: 12px;
     font-size: 12px;
     font-weight: 850;
     cursor: pointer;
     transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
 .tagin-block-cancel-button {
     border: 1px solid rgba(55, 61, 111, 0.1);
     background: rgba(55, 61, 111, 0.055);
     color: #686e8d;
}
 .tagin-block-confirm-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     min-width: 145px;
     background: linear-gradient(135deg, #7d2d50, #ad3e6d 60%, #ca5583);
     color: #fff;
     box-shadow: 0 12px 25px rgba(154, 50, 96, 0.24);
}
 .tagin-block-modal.is-unblock-mode .tagin-block-confirm-button {
     background: linear-gradient(135deg, #555bc8, #7464db 60%, #9367d7);
     box-shadow: 0 12px 25px rgba(90, 87, 202, 0.23);
}
 .tagin-block-confirm-button:hover, .tagin-block-success-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 30px rgba(137, 61, 133, 0.28);
}
 .tagin-block-cancel-button:hover {
     transform: translateY(-1px);
     background: rgba(55, 61, 111, 0.085);
}
 .tagin-block-form.is-submitting .tagin-block-confirm-button {
     opacity: 0.68;
     cursor: wait;
}
 .tagin-block-form.is-submitting .tagin-block-confirm-button i {
     animation: taginBlockPulse 800ms ease-in-out infinite alternate;
}
 .tagin-block-success {
     padding: 42px 30px 34px;
     text-align: center;
}
 .tagin-block-success-icon {
     display: grid;
     width: 72px;
     height: 72px;
     margin: 0 auto 18px;
     place-items: center;
     border: 1px solid rgba(177, 55, 101, 0.18);
     border-radius: 24px;
     background: linear-gradient(145deg, rgba(190, 57, 104, 0.13), rgba(132, 65, 130, 0.08));
     color: #b23b69;
     font-size: 27px;
     box-shadow: 0 13px 30px rgba(177, 55, 101, 0.12);
}
 .tagin-block-modal.is-unblock-mode .tagin-block-success-icon {
     border-color: rgba(91, 91, 190, 0.18);
     background: linear-gradient(145deg, rgba(91, 91, 190, 0.13), rgba(132, 92, 211, 0.08));
     color: #6062ca;
}
 .tagin-block-success h3 {
     margin: 0;
     color: #261d31;
     font-size: 24px;
     font-weight: 850;
     letter-spacing: -0.03em;
}
 .tagin-block-success p {
     max-width: 390px;
     margin: 10px auto 22px;
     color: #7c7487;
     font-size: 13px;
     line-height: 1.55;
}
 .tagin-block-success-button {
     min-width: 120px;
     background: linear-gradient(135deg, #6561d5, #8d5dd5);
     color: #fff;
     box-shadow: 0 12px 25px rgba(98, 88, 210, 0.2);
}
 @keyframes taginBlockPulse {
     from {
         transform: scale(1);
    }
     to {
         transform: scale(1.12);
    }
}
 @media (max-width: 650px) {
     .tagin-block-modal {
         align-items: flex-end;
         padding: 0;
    }
     .tagin-block-modal-panel {
         width: 100%;
         max-height: calc(100svh - 18px);
         border-radius: 25px 25px 0 0;
         transform: translateY(100%);
    }
     .tagin-block-modal.is-open .tagin-block-modal-panel {
         transform: translateY(0);
    }
     .tagin-block-modal-header {
         padding: 23px 19px 18px;
    }
     .tagin-block-modal-heading {
         gap: 12px;
    }
     .tagin-block-modal-icon {
         flex-basis: 45px;
         width: 45px;
         height: 45px;
         border-radius: 15px;
         font-size: 17px;
    }
     .tagin-block-modal-heading h2 {
         font-size: 20px;
    }
     .tagin-block-modal-heading p {
         font-size: 12px;
    }
     .tagin-block-modal-body {
         padding: 20px 19px calc(22px + env(safe-area-inset-bottom));
    }
     .tagin-block-modal-actions {
         display: grid;
         grid-template-columns: 1fr 1.35fr;
    }
     .tagin-block-cancel-button, .tagin-block-confirm-button {
         width: 100%;
         padding: 0 12px;
    }
}

/* ==================== PAGE: SPARK REVEAL ==================== */
body.tagin-spark-open {
    overflow: hidden;
}
.tagin-spark-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    background: rgba(7, 8, 24, 0);
    backdrop-filter: blur(0);
    opacity: 0;
    transition: opacity .35s ease, background .35s ease, backdrop-filter .35s ease;
}
.tagin-spark-overlay.is-visible {
    background: rgba(7, 8, 24, .84);
    backdrop-filter: blur(15px);
    opacity: 1;
}
.tagin-spark-overlay.is-closing {
    opacity: 0;
}
.tagin-spark-ambient {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 47%, rgba(255, 198, 72, .30), transparent 18%),
        radial-gradient(circle at 34% 28%, rgba(255, 99, 196, .22), transparent 23%),
        radial-gradient(circle at 72% 70%, rgba(85, 120, 255, .28), transparent 25%);
    animation: taginSparkAmbient 4s ease-in-out infinite alternate;
}
.tagin-spark-dialog {
    position: relative;
    z-index: 3;
    width: min(100%, 470px);
    padding: 74px 38px 34px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 50% -15%, rgba(255, 210, 85, .25), transparent 40%),
        linear-gradient(145deg, rgba(39, 42, 84, .98), rgba(20, 23, 52, .99));
    border: 1px solid rgba(255, 224, 133, .38);
    border-radius: 32px;
    box-shadow:
        0 35px 100px rgba(0, 0, 0, .62),
        0 0 80px rgba(255, 190, 65, .18),
        inset 0 1px 0 rgba(255, 255, 255, .16);
    opacity: 0;
    transform: scale(.72) translateY(36px);
    transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .55s cubic-bezier(.17, .89, .32, 1.35);
}
.tagin-spark-overlay.is-visible .tagin-spark-dialog {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.tagin-spark-dialog::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 197, 71, .11);
    filter: blur(1px);
    transform: translateX(-50%);
}
.tagin-spark-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    cursor: pointer;
    transition: .18s ease;
}
.tagin-spark-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .15);
    transform: rotate(8deg);
}
.tagin-spark-emblem {
    position: absolute;
    top: -48px;
    left: 50%;
    display: grid;
    width: 102px;
    height: 102px;
    place-items: center;
    color: #171424;
    font-size: 40px;
    background: linear-gradient(145deg, #fff4a8, #ffb528 65%, #ff8a24);
    border: 7px solid #25294e;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 223, 119, .6),
        0 0 45px rgba(255, 185, 42, .75);
}
.tagin-spark-emblem i {
    animation: taginSparkBolt 1.8s ease-in-out infinite;
}
.tagin-spark-emblem-ring {
    position: absolute;
    inset: -15px;
    border: 2px solid rgba(255, 211, 91, .45);
    border-radius: 50%;
    animation: taginSparkRing 1.8s ease-out infinite;
}
.tagin-spark-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #ffd56f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.tagin-spark-dialog h2 {
    margin: 0 0 24px;
    color: #fff;
    font-size: clamp(29px, 6vw, 40px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.04em;
}
.tagin-spark-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}
.tagin-spark-photo-wrap {
    position: relative;
    width: 108px;
    height: 108px;
    padding: 4px;
    background: linear-gradient(135deg, #ffd96a, #ff7db8, #718dff);
    border-radius: 32px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .4);
}
.tagin-spark-photo-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #202440;
    border: 4px solid #202440;
    border-radius: 29px;
}
.tagin-spark-photo-wrap span {
    position: absolute;
    right: -9px;
    bottom: -8px;
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    color: #181425;
    background: linear-gradient(145deg, #fff5a9, #ffb62d);
    border: 4px solid #202440;
    border-radius: 50%;
}
.tagin-spark-person strong {
    color: #fff;
    font-size: 18px;
    font-weight: 850;
}
.tagin-spark-message {
    max-width: 350px;
    margin: 13px auto 27px;
    color: rgba(255, 255, 255, .67);
    font-size: 14px;
    line-height: 1.6;
}
.tagin-spark-actions {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 12px;
}
.tagin-spark-actions button {
    min-height: 49px;
    padding: 0 18px;
    border-radius: 15px;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.tagin-spark-actions button:hover {
    transform: translateY(-2px);
}
.tagin-spark-secondary {
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
}
.tagin-spark-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #1b1727;
    background: linear-gradient(135deg, #fff19c, #ffbd35);
    border: 1px solid rgba(255, 255, 255, .36);
    box-shadow: 0 12px 30px rgba(255, 180, 38, .22);
}
.tagin-spark-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.tagin-spark-particle {
    --spark-x: 0px;
    --spark-y: 0px;
    --spark-size: 6px;
    --spark-delay: 0s;
    --spark-rotation: 0deg;
    position: absolute;
    width: var(--spark-size);
    height: calc(var(--spark-size) * 2.4);
    background: linear-gradient(180deg, #fff5ad, #ffb832);
    border-radius: 999px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
}
.tagin-spark-overlay.is-visible .tagin-spark-particle {
    animation: taginSparkParticle 1.35s cubic-bezier(.12, .7, .2, 1) var(--spark-delay) forwards;
}
.tagin-spark-particle:nth-child(3n) {
    background: linear-gradient(180deg, #ffb1df, #ff56a7);
}
.tagin-spark-particle:nth-child(4n) {
    background: linear-gradient(180deg, #b9c8ff, #657bff);
}
@keyframes taginSparkParticle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.1) rotate(0);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1) rotate(var(--spark-rotation));
    }
}
@keyframes taginSparkAmbient {
    from {
        transform: scale(1) rotate(-2deg);
    }
    to {
        transform: scale(1.08) rotate(2deg);
    }
}
@keyframes taginSparkBolt {
    0%, 100% {
        transform: scale(1) rotate(-4deg);
    }
    50% {
        transform: scale(1.12) rotate(4deg);
    }
}
@keyframes taginSparkRing {
    0% {
        opacity: .8;
        transform: scale(.72);
    }
    100% {
        opacity: 0;
        transform: scale(1.32);
    }
}
@media (max-width: 575.98px) {
    .tagin-spark-overlay {
        padding: 17px;
    }
    .tagin-spark-dialog {
        padding: 68px 21px 23px;
        border-radius: 27px;
    }
    .tagin-spark-dialog h2 {
        margin-bottom: 21px;
    }
    .tagin-spark-photo-wrap {
        width: 94px;
        height: 94px;
        border-radius: 27px;
    }
    .tagin-spark-photo-wrap img {
        border-radius: 24px;
    }
    .tagin-spark-actions {
        grid-template-columns: 1fr;
    }
    .tagin-spark-primary {
        grid-row: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tagin-spark-overlay,
    .tagin-spark-dialog,
    .tagin-spark-particle,
    .tagin-spark-emblem i,
    .tagin-spark-emblem-ring,
    .tagin-spark-ambient {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ==================== PAGE GROUP: CITY FEED ==================== */
 .tagin-cityfeed-layout {
     --cityfeed-ink: #11152d;
     --cityfeed-muted: #768198;
     --cityfeed-line: rgba(17, 21, 45, 0.09);
     --cityfeed-surface: rgba(250, 251, 255, 0.94);
     --cityfeed-primary: var(--app-primary, #5578ff);
     --cityfeed-secondary: var(--app-secondary, #7b5cff);
}
 .tagin-cityfeed-layout button, .tagin-cityfeed-layout select, .tagin-cityfeed-layout textarea {
     font: inherit;
}
 .tagin-cityfeed-toolbar {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 28px;
     overflow: hidden;
     padding: 24px 26px;
     border: 1px solid rgba(255,255,255,.92);
     border-radius: 26px;
     background: radial-gradient(circle at 88% 15%, rgba(123,92,255,.14), transparent 28%), radial-gradient(circle at 2% 100%, rgba(85,120,255,.12), transparent 34%), rgba(250,251,255,.9);
     box-shadow: 0 18px 48px rgba(30,39,95,.13);
     backdrop-filter: blur(20px);
}
 .tagin-cityfeed-toolbar::after {
     content: "";
     position: absolute;
     right: -30px;
     bottom: -58px;
     width: 180px;
     height: 180px;
     border: 24px solid rgba(85,120,255,.05);
     border-radius: 50%;
     pointer-events: none;
}
 .tagin-cityfeed-toolbar-copy{
     position: relative;
     z-index: 1;
}
 .tagin-cityfeed-kicker {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     margin-bottom: 7px;
     color: var(--cityfeed-primary);
     font-size: 11px;
     font-weight: 900;
     letter-spacing: .1em;
     text-transform: uppercase;
}
 .tagin-cityfeed-toolbar h1 {
     margin: 0 0 6px;
     color: var(--cityfeed-ink);
     font-size: clamp(25px, 3vw, 36px);
     font-weight: 900;
     line-height: 1;
     letter-spacing: -.045em;
}
 .tagin-cityfeed-toolbar p {
     max-width: 680px;
     margin: 0;
     color: var(--cityfeed-muted);
     font-size: 13px;
     font-weight: 600;
     line-height: 1.55;
}
 .tagin-cityfeed-tab {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     min-height: 42px;
     padding: 0 16px;
     border: 0;
     border-radius: 14px;
     background: transparent;
     color: #7b8498;
     font-size: 12px;
     font-weight: 850;
     transition: .18s ease;
}
 .tagin-cityfeed-tab:hover {
     color: var(--cityfeed-primary);
     background: rgba(85,120,255,.07);
}
 .tagin-cityfeed-tab.is-active {
     color: #fff;
     background: linear-gradient(135deg, var(--cityfeed-primary), var(--cityfeed-secondary));
     box-shadow: 0 10px 22px rgba(85,120,255,.24);
}
 .tagin-shout-composer {
     padding: 22px;
     border: 1px solid rgba(255,255,255,.92);
     border-radius: 26px;
     background: rgba(249,250,255,.93);
     box-shadow: 0 20px 54px rgba(30,39,95,.13);
     backdrop-filter: blur(22px);
}
 .tagin-shout-composer-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
     margin-bottom: 17px;
}
 .tagin-shout-composer-eyebrow {
     display: block;
     margin-bottom: 3px;
     color: var(--cityfeed-primary);
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .1em;
     text-transform: uppercase;
}
 .tagin-shout-composer-heading h2 {
     margin: 0;
     color: var(--cityfeed-ink);
     font-size: 18px;
     font-weight: 900;
     letter-spacing: -.025em;
}
 .tagin-shout-visibility {
     display: inline-flex;
     cursor: pointer;
     align-items: center;
     gap: 7px;
     padding: 8px 11px;
     border: 1px solid rgba(85,120,255,.12);
     border-radius: 999px;
     background: rgba(85,120,255,.06);
     color: #727d94;
     font-size: 10px !important;
     font-weight: 850;
     transition: .18s ease;
}
 .tagin-shout-visibility:hover {
     border-color: rgba(85,120,255,.28);
     color: var(--cityfeed-primary);
     background: rgba(85,120,255,.1);
}
 .tagin-shout-visibility > i:last-child {
     font-size: 8px;
     opacity: .65;
}
 .tagin-shout-visibility.is-private {
     color: #7b5cff;
     background: rgba(123,92,255,.09);
     border-color: rgba(123,92,255,.2);
}
 .tagin-shout-type-grid {
     display: grid;
     grid-template-columns: repeat(3,minmax(0,1fr));
     gap: 9px;
     margin-bottom: 14px;
}
 .tagin-shout-type {
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: 0;
     padding: 11px;
     border: 1px solid rgba(17,21,45,.08);
     border-radius: 16px;
     background: rgba(255,255,255,.62);
     color: #626d83;
     text-align: left;
     transition: .18s ease;
}
 .tagin-shout-type:hover {
     border-color: rgba(85,120,255,.22);
     background: rgba(85,120,255,.05);
     transform: translateY(-1px);
}
 .tagin-shout-type.is-active {
     border-color: rgba(85,120,255,.26);
     background: linear-gradient(135deg, rgba(85,120,255,.12), rgba(123,92,255,.08));
     box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
 .tagin-shout-type-icon {
     display: grid;
     width: 38px;
     height: 38px;
     flex: 0 0 38px;
     place-items: center;
     border-radius: 12px;
     background: rgba(85,120,255,.09);
     color: var(--cityfeed-primary);
}
 .tagin-shout-type strong, .tagin-shout-type small {
     display: block;
}
 .tagin-shout-type strong {
     overflow: hidden;
     color: var(--cityfeed-ink);
     font-size: 12px;
     font-weight: 900;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .tagin-shout-type small {
     margin-top: 2px;
     overflow: hidden;
     color: #8a94a8;
     font-size: 9px;
     font-weight: 700;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .tagin-shout-composer-box {
     display: flex;
     align-items: flex-start;
     gap: 12px;
}
 .tagin-shout-composer-box > img {
     width: 46px;
     height: 46px;
     flex: 0 0 46px;
     border: 3px solid #fff;
     border-radius: 15px;
     object-fit: cover;
     box-shadow: 0 8px 20px rgba(85,120,255,.16);
}
 .tagin-shout-composer-field {
     position: relative;
     flex: 1;
     min-width: 0;
     overflow: hidden;
     border: 1px solid rgba(17,21,45,.1);
     border-radius: 18px;
     background: rgba(16,19,40,.035);
     transition: .18s ease;
}
 .tagin-shout-composer-field:focus-within {
     border-color: rgba(85,120,255,.42);
     background: #fff;
     box-shadow: 0 0 0 4px rgba(85,120,255,.1);
}
 .tagin-shout-composer-mode {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     margin: 10px 12px 0;
     padding: 6px 9px;
     border-radius: 999px;
     background: rgba(85,120,255,.08);
     color: var(--cityfeed-primary);
     font-size: 9px;
     font-weight: 900;
     letter-spacing: .04em;
     text-transform: uppercase;
}
 .tagin-shout-composer-field textarea {
     display: block;
     width: 100%;
     min-height: 90px;
     padding: 10px 14px 28px;
     resize: vertical;
     border: 0;
     outline: 0;
     background: transparent;
     color: #30384a;
     font-size: 13px;
     font-weight: 600;
     line-height: 1.55;
}
 .tagin-shout-composer-field textarea::placeholder {
     color: #9aa3b5;
}
 .tagin-shout-character-count {
     position: absolute;
     right: 12px;
     bottom: 8px;
     color: #a2aabc;
     font-size: 9px;
     font-weight: 800;
}
 .tagin-shout-composer-footer {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 14px;
}
 .tagin-shout-composer-tools {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 7px;
}
 .tagin-shout-tool {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     min-height: 38px;
     padding: 0 12px;
     border: 1px solid rgba(17,21,45,.08);
     border-radius: 12px;
     background: rgba(255,255,255,.55);
     color: #657086;
     font-size: 10px;
     font-weight: 850;
     transition: .18s ease;
}
 .tagin-shout-tool:hover {
     color: var(--cityfeed-primary);
     border-color: rgba(85,120,255,.2);
     background: rgba(85,120,255,.07);
}
 .tagin-shout-submit {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     min-height: 42px;
     margin-left: auto;
     padding: 0 17px;
     border: 0;
     border-radius: 14px;
     background: linear-gradient(135deg, var(--cityfeed-primary), var(--cityfeed-secondary));
     color: #fff;
     font-size: 11px;
     font-weight: 900;
     box-shadow: 0 11px 24px rgba(85,120,255,.25);
     transition: .18s ease;
}
 .tagin-shout-submit:hover {
     transform: translateY(-2px);
     box-shadow: 0 15px 30px rgba(85,120,255,.32);
}
 .tagin-shout-card {
     position: relative;
     overflow: visible;
     padding: 21px;
     border: 1px solid rgba(255,255,255,.92);
     border-radius: 25px !important;
     background: rgba(250,251,255,.94);
     box-shadow: 0 18px 48px rgba(30,39,95,.12);
     backdrop-filter: blur(20px);
}
.tagin-comments-overlay.is-visible .tagin-comments-modal {
    border-radius: 0 !important;
}
 .tagin-shout-card::before {
     content: "";
     position: absolute;
     top: 18px;
     bottom: 18px;
     left: 0;
     width: 3px;
     border-radius: 0 999px 999px 0;
     background: transparent;
}
 .tagin-shout-card-recommendation::before {
     background: linear-gradient(#ffb547,#ff8a4c);
}
 .tagin-shout-card-interested::before {
     background: linear-gradient(var(--cityfeed-primary),var(--cityfeed-secondary));
}
 .tagin-shout-card-hosting::before {
    background: linear-gradient(#ff5f6d, #c81d4a);
}
 .tagin-shout-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 15px;
     margin-bottom: 15px;
}
 .tagin-shout-author {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 0;
}
 .tagin-shout-author > img {
     width: 47px;
     height: 47px;
     flex: 0 0 47px;
     border: 3px solid #fff;
     border-radius: 15px;
     object-fit: cover;
     box-shadow: 0 8px 20px rgba(85,120,255,.16);
}
 .tagin-shout-author > div {
     min-width: 0;
}
 .tagin-shout-name-line {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 7px;
     min-width: 0;
}
 .tagin-shout-name-line h3 {
     margin: 0;
     color: var(--cityfeed-ink);
     font-size: 14px;
     font-weight: 900;
}
 .tagin-shout-author p {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0;
     margin: 4px 0 0;
     color: #8993a8;
     font-size: 10px;
     font-weight: 750;
}
 .tagin-shout-author p span + span::before {
     content: "·";
     margin: 0 7px;
     color: #bcc3d1;
}
 .tagin-shout-relevance, .tagin-shout-badge {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 5px 8px;
     border-radius: 999px;
     font-size: 8px;
     font-weight: 900;
     letter-spacing: .035em;
     text-transform: uppercase;
}
 .tagin-shout-relevance {
     background: rgba(85,120,255,.07);
     color: var(--cityfeed-primary);
}
 .tagin-shout-badge-recommendation {
     background: rgba(255,166,55,.13);
     color: #d87812;
}
 .tagin-shout-badge-interested {
     background: rgba(85,120,255,.11);
     color: var(--cityfeed-primary);
}
 .tagin-shout-badge-interested {
     background: rgba(85,120,255,.11);
     color: var(--cityfeed-primary);
}
.tagin-shout-badge-hosting {
    background: rgba(230, 57, 70, .12);
    color: #c81d4a;
}
 .tagin-shout-more {
     display: grid;
     width: 37px;
     height: 37px;
     flex: 0 0 37px;
     place-items: center;
     padding: 0;
     border: 0;
     border-radius: 13px;
     background: rgba(17,21,45,.045);
     color: #7e879a;
     transition: .18s ease;
}
 .tagin-shout-more:hover {
     color: var(--cityfeed-primary);
     background: rgba(85,120,255,.09);
}
 .tagin-shout-menu {
     min-width: 215px;
     padding: 9px !important;
     border: 1px solid rgba(255,255,255,.12) !important;
     border-radius: 17px !important;
     background: rgba(31,35,58,.97);
     box-shadow: 0 22px 54px rgba(0,0,0,.28);
}
 .tagin-shout-menu a {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px;
     border-radius: 11px;
     color: #fff !important;
     font-size: 11px;
     font-weight: 800;
}
 .tagin-shout-menu a:hover {
     background: rgba(255,255,255,.08);
}
 .tagin-shout-body p {
     margin: 0 0 16px;
     color: #3f4859;
     font-size: 13px;
     font-weight: 560;
     line-height: 1.68;
}
 .tagin-shout-gallery {
     display: grid;
     gap: 7px;
     margin-bottom: 16px;
     overflow: hidden;
     border-radius: 19px;
}
 .tagin-shout-gallery-1 {
     grid-template-columns: minmax(0,1fr);
     grid-template-rows: minmax(220px,360px);
}
 .tagin-shout-gallery-2 {
     grid-template-columns: repeat(2,minmax(0,1fr));
     grid-template-rows: 280px;
}
 .tagin-shout-gallery-3 {
     grid-template-columns: repeat(2,minmax(0,1fr));
     grid-template-rows: repeat(2,170px);
}
 .tagin-shout-gallery-3 a:first-child {
     grid-row: 1 / 3;
}
 .tagin-shout-gallery-4, .tagin-shout-gallery-four {
     grid-template-columns: repeat(2,minmax(0,1fr));
     grid-template-rows: repeat(2,190px);
}
 .tagin-shout-gallery a {
     display: block;
     min-width: 0;
     overflow: hidden;
     background: #d9deea;
}
 .tagin-shout-gallery img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     transition: transform .25s ease;
}
 .tagin-shout-gallery a:hover img {
     transform: scale(1.035);
}
 .tagin-shout-recommendation-callout, .tagin-shout-plan-strip {
     display: flex;
     align-items: center;
     gap: 11px;
     margin-bottom: 15px;
     padding: 12px;
     border-radius: 16px;
}
 .tagin-shout-recommendation-callout {
     border: 1px solid rgba(255,166,55,.18);
     background: linear-gradient(135deg,rgba(255,183,69,.11),rgba(255,138,76,.06));
}
 .tagin-shout-recommendation-callout > span {
     display: grid;
     width: 38px;
     height: 38px;
     flex: 0 0 38px;
     place-items: center;
     border-radius: 12px;
     background: rgba(255,166,55,.15);
     color: #e28118;
}
 .tagin-shout-recommendation-callout > div {
     flex: 1;
     min-width: 0;
}
 .tagin-shout-recommendation-callout strong, .tagin-shout-recommendation-callout small {
     display: block;
}
 .tagin-shout-recommendation-callout strong {
     color: #3d4350;
     font-size: 11px;
     font-weight: 900;
}
 .tagin-shout-recommendation-callout small {
     margin-top: 2px;
     overflow: hidden;
     color: #8b91a0;
     font-size: 9px;
     font-weight: 700;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .tagin-shout-recommendation-callout button {
     flex: 0 0 auto;
     min-height: 36px;
     padding: 0 12px;
     border: 0;
     border-radius: 11px;
     background: #fff;
     color: #d87812;
     font-size: 9px;
     font-weight: 900;
     box-shadow: 0 7px 18px rgba(223,130,25,.1);
}
 .tagin-shout-plan-strip {
     justify-content: space-between;
     border: 1px solid rgba(85,120,255,.15);
     background: linear-gradient(135deg,rgba(85,120,255,.1),rgba(123,92,255,.055));
}
 .tagin-shout-plan-time {
     display: flex;
     align-items: center;
     gap: 9px;
     color: var(--cityfeed-primary);
}
 .tagin-shout-plan-time > i {
     display: grid;
     width: 36px;
     height: 36px;
     place-items: center;
     border-radius: 11px;
     background: rgba(85,120,255,.1);
}
 .tagin-shout-plan-time strong, .tagin-shout-plan-time small {
     display: block;
}
 .tagin-shout-plan-time strong {
     color: #30384a;
     font-size: 10px;
     font-weight: 900;
}
 .tagin-shout-plan-time small {
     margin-top: 2px;
     color: #858fa4;
     font-size: 9px;
     font-weight: 700;
}
 .tagin-shout-plan-people {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #6e7890;
     font-size: 9px;
     font-weight: 850;
}
 .tagin-shout-plan-people > div {
     display: flex;
}
 .tagin-shout-plan-people img {
     width: 27px;
     height: 27px;
     margin-left: -7px;
     border: 2px solid #fff;
     border-radius: 50%;
     object-fit: cover;
}
 .tagin-shout-plan-people img:first-child {
     margin-left: 0;
}
 .tagin-shout-comments {
     margin-top: 5px;
     padding: 13px;
     border: 1px solid rgba(17,21,45,.065);
     border-radius: 17px;
     background: rgba(17,21,45,.025);
}
 .tagin-shout-comments-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 11px;
}
 .tagin-shout-comments-heading > span {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #697387;
     font-size: 9px;
     font-weight: 900;
     letter-spacing: .04em;
     text-transform: uppercase;
}
 .tagin-shout-comments-heading i {
     color: #ffad33;
}
 .tagin-shout-comments-heading small {
     color: #a0a8b8;
     font-size: 8px;
     font-weight: 750;
}
 .tagin-shout-comment {
     display: flex;
     align-items: flex-start;
     gap: 9px;
}
 .tagin-shout-comment + .tagin-shout-comment {
     margin-top: 10px;
}
 .tagin-shout-comment > img {
     width: 31px;
     height: 31px;
     flex: 0 0 31px;
     border: 2px solid #fff;
     border-radius: 11px;
     object-fit: cover;
     box-shadow: 0 5px 12px rgba(37,46,92,.1);
}
 .tagin-shout-comment-main {
     flex: 1;
     min-width: 0;
}
 .tagin-shout-comment-bubble {
     padding: 9px 11px;
     border-radius: 5px 13px 13px 13px;
     background: rgba(255,255,255,.76);
     box-shadow: inset 0 0 0 1px rgba(17,21,45,.055);
}
 .tagin-shout-comment-name {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 3px;
}
 .tagin-shout-comment-name strong {
     color: #30384a;
     font-size: 10px;
     font-weight: 900;
}
 .tagin-shout-comment-name span {
     color: #a0a8b7;
     font-size: 8px;
     font-weight: 750;
     white-space: nowrap;
}
 .tagin-shout-comment-bubble p {
     margin: 0;
     color: #626c80;
     font-size: 10px;
     font-weight: 620;
     line-height: 1.48;
}
 .tagin-shout-comment-meta {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 4px 4px 0;
}
 .tagin-shout-comment-meta button {
     padding: 0;
     border: 0;
     background: transparent;
     color: #8b94a6;
     font-size: 8px;
     font-weight: 850;
}
 .tagin-shout-comment-meta button:hover {
     color: var(--cityfeed-primary);
}
 .tagin-shout-comments-extra {
     margin-top: 10px;
}
 .tagin-shout-comments-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     width: 100%;
     min-height: 35px;
     margin-top: 10px;
     border: 0;
     border-radius: 11px;
     background: rgba(85,120,255,.065);
     color: var(--cityfeed-primary);
     font-size: 9px;
     font-weight: 900;
     transition: .18s ease;
}
 .tagin-shout-comments-toggle:hover {
     background: rgba(85,120,255,.11);
}
 .tagin-shout-comments-toggle i {
     font-size: 8px;
     transition: transform .18s ease;
}
 .tagin-shout-comments.is-expanded .tagin-shout-comments-toggle i {
     transform: rotate(180deg);
}
 .tagin-shout-footer {
     margin-top: 14px;
     padding-top: 13px;
     border-top: 1px solid var(--cityfeed-line);
}
 .tagin-shout-stats {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 8px;
     color: #939bad;
     font-size: 9px;
     font-weight: 700;
}
 .tagin-shout-stats strong {
     color: #596276;
     font-weight: 900;
}
 .tagin-shout-actions {
     display: flex;
     align-items: center;
     gap: 6px;
}
 .tagin-shout-action {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     min-height: 37px;
     padding: 0 12px;
     border: 0;
     border-radius: 12px;
     background: transparent;
     color: #697387;
     font-size: 10px;
     font-weight: 900;
     transition: .18s ease;
}
 .tagin-shout-action:hover {
     color: var(--cityfeed-primary);
     background: rgba(85,120,255,.075);
}
 .tagin-shout-action.is-reacted {
     color: #e83f68;
     background: rgba(232,63,104,.07);
}
 .tagin-shout-tag-in {
     margin-left: auto;
     color: #fff;
     background: linear-gradient(135deg,var(--cityfeed-primary),var(--cityfeed-secondary));
     box-shadow: 0 8px 18px rgba(85,120,255,.2);
}
 .tagin-shout-tag-in:hover {
     color: #fff;
     background: linear-gradient(135deg,#6584ff,#896cff);
     transform: translateY(-1px);
}
 .tagin-cityfeed-loader {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 13px;
     padding: 20px;
     border: 1px solid rgba(255,255,255,.86);
     border-radius: 22px;
     background: rgba(249,250,255,.82);
     color: #717c91;
     box-shadow: 0 14px 36px rgba(30,39,95,.09);
     backdrop-filter: blur(18px);
}
 .tagin-cityfeed-loader-pulse {
     display: flex;
     gap: 5px;
}
 .tagin-cityfeed-loader-pulse span {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: linear-gradient(135deg,var(--cityfeed-primary),var(--cityfeed-secondary));
     animation: taginCityFeedLoader 1.2s ease-in-out infinite;
}
 .tagin-cityfeed-loader-pulse span:nth-child(2) {
     animation-delay: .15s;
}
 .tagin-cityfeed-loader-pulse span:nth-child(3) {
     animation-delay: .3s;
}
 .tagin-cityfeed-loader strong, .tagin-cityfeed-loader small {
     display: block;
}
 .tagin-cityfeed-loader strong {
     color: #3f485b;
     font-size: 11px;
     font-weight: 900;
}
 .tagin-cityfeed-loader small {
     margin-top: 2px;
     font-size: 9px;
     font-weight: 700;
}
 @keyframes taginCityFeedLivePulse {
     0%,100% {
         opacity: 1;
         transform: scale(1);
    }
     50% {
         opacity: .55;
         transform: scale(.85);
    }
}
 @keyframes taginCityFeedLoader {
     0%,80%,100% {
         transform: translateY(0);
         opacity: .45;
    }
     40% {
         transform: translateY(-5px);
         opacity: 1;
    }
}
 @media (max-width: 1199.98px) {
     .tagin-shout-type small {
         display: none;
    }
     .tagin-shout-gallery-four {
         grid-template-rows: repeat(2,150px);
    }
}
 @media (max-width: 991.98px) {
     .tagin-cityfeed-layout > .col-lg-8 {
         width: 100%;
    }
     .tagin-cityfeed-toolbar {
         padding: 20px;
    }
     .tagin-cityfeed-toolbar p {
         max-width: 520px;
    }
    .tagin-shout-card {
        border-radius: 0px;
    }
}
 @media (max-width: 767.98px) {
     .tagin-cityfeed-toolbar {
         align-items: stretch;
         flex-direction: column;
         gap: 16px;
         padding: 18px;
         border-radius: 22px;
    }
     .tagin-cityfeed-tab {
         flex: 1 0 auto;
         min-width: 96px;
         padding: 0 12px;
    }
     .tagin-shout-composer {
         padding: 17px;
         border-radius: 22px;
    }
     .tagin-shout-type-grid {
         grid-template-columns: 1fr;
    }
     .tagin-shout-type {
         padding: 10px;
    }
     .tagin-shout-type small {
         display: block;
    }
     .tagin-shout-composer-box > img {
         width: 42px;
         height: 42px;
         flex-basis: 42px;
         border-radius: 14px;
    }
     .tagin-shout-composer-footer {
         align-items: stretch;
         flex-direction: column;
    }
     .tagin-shout-composer-tools {
         display: flex;
    }
     .tagin-shout-tool {
         justify-content: center;
         min-width: 0;
         padding: 0 7px;
    }
     .tagin-shout-tool span {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
    }
     .tagin-shout-submit {
         width: 100%;
         margin-left: 0;
    }
     .tagin-shout-card {
         padding: 17px;
    }
     .tagin-shout-gallery-four {
         grid-template-rows: repeat(2,32vw);
    }
     .tagin-shout-recommendation-callout {
         align-items: flex-start;
         flex-wrap: wrap;
    }
     .tagin-shout-recommendation-callout button {
         width: 100%;
    }
     .tagin-shout-plan-strip {
         align-items: flex-start;
         flex-direction: column;
    }
}
 @media (max-width: 575.98px) {
     .tagin-shout-name-line {
         align-items: flex-start;
         flex-direction: column;
         gap: 5px;
    }
     .tagin-cityfeed-toolbar {
         margin-right: -1px;
         margin-left: -1px;
    }
     .tagin-cityfeed-toolbar h1 {
         font-size: 25px;
    }
     .tagin-cityfeed-toolbar p {
         font-size: 11px;
    }
     .tagin-shout-composer-heading {
         align-items: flex-start;
    }
     .tagin-shout-visibility {
         padding: 7px 9px;
         font-size: 8px;
    }
     .tagin-shout-composer-box {
         gap: 9px;
    }
     .tagin-shout-composer-box > img {
         width: 38px;
         height: 38px;
         flex-basis: 38px;
    }
     .tagin-shout-composer-field textarea {
         min-height: 82px;
         font-size: 12px;
    }
     .tagin-shout-tool {
         font-size: 0;
    }
     .tagin-shout-tool i {
         font-size: 14px;
    }
     .tagin-shout-card {
         padding: 16px;
    }
     .tagin-shout-author > img {
         width: 65px;
         height: 65px;
         flex-basis: 65px;
         border-radius: 14px;
    }
     .tagin-shout-author p {
         font-size: 9px;
    }
     .tagin-shout-body p {
         font-size: 12px;
         line-height: 1.65;
    }
     .tagin-shout-actions {
         justify-content: flex-start;
    }
     .tagin-shout-action {
         flex: 1;
         padding: 0 7px;
    }
     .tagin-shout-tag-in {
         margin-left: 0;
    }
     .tagin-shout-action span {
         font-size: 9px;
    }
     .tagin-shout-gallery-four {
         gap: 5px;
         border-radius: 15px;
    }
}
 @media (max-width: 575.98px) {
     .tagin-shout-comments {
         padding: 11px;
    }
     .tagin-shout-comments-heading small {
         display: none;
    }
     .tagin-shout-comment > img {
         width: 29px;
         height: 29px;
         flex-basis: 29px;
         border-radius: 10px;
    }
     .tagin-shout-comment-bubble p {
         font-size: 9.5px;
    }
}
 .tagin-shout-card {
     display:flex;
     flex-direction:column;
}
 .tagin-shout-footer {
     order:20;
}
 .tagin-shout-comments {
     order:30;
     margin-top:12px;
}
.tagin-shout-recommendation-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}
 .tagin-shout-recommendation-callout .tagin-shout-recommendation-view,.tagin-shout-recommendation-callout .tagin-shout-recommendation-add {
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:6px;
     min-height:36px;
     padding:0 11px;
     border:0;
     border-radius:11px;
     font-size:9px;
     font-weight:900;
}
 .tagin-shout-recommendation-view {
     background:rgba(255,255,255,.58);
     color:#7c8494;
}
 .tagin-shout-recommendation-add {
     background:#fff;
     color:#d87812;
     box-shadow:0 7px 18px rgba(223,130,25,.1);
}
 .tagin-recommendation-overlay {
     position:fixed;
     inset:0;
     z-index:100050;
     display:none;
     align-items:center;
     justify-content:center;
     padding:20px;
     background:rgba(10,13,31,.68);
     backdrop-filter:blur(10px);
}
 .tagin-recommendation-overlay.is-visible {
     display:flex;
}
 .tagin-recommendation-modal {
     display:flex;
     width:min(100%,680px);
     max-height:calc(100svh - 40px);
     padding:0;
     flex-direction:column;
     overflow:hidden;
     border:1px solid rgba(255,255,255,.9);
     border-radius:26px;
     background:linear-gradient(165deg,rgba(255,255,255,.98),rgba(245,247,255,.97));
     box-shadow:0 30px 90px rgba(10,13,31,.34);
}
 .tagin-recommendation-modal-header {
     position:sticky;
     top:0;
     z-index:5;
     display:flex;
     align-items:flex-start;
     justify-content:space-between;
     gap:18px;
     padding:24px 24px 18px;
     border-bottom:1px solid rgba(17,21,45,.07);
     background:rgba(249,250,255,.96);
     backdrop-filter:blur(18px);
     -webkit-backdrop-filter:blur(18px);
}
 .tagin-recommendation-modal-eyebrow {
     display:inline-flex;
     align-items:center;
     gap:7px;
     margin-bottom:7px;
     color:#d87812;
     font-size:10px;
     font-weight:900;
     text-transform:uppercase;
}
 .tagin-recommendation-modal-header h2 {
     margin:0 0 7px;
     color:#242b3c;
     font-size:22px;
     font-weight:900;
}
 .tagin-recommendation-modal-header p {
     margin:0;
     color:#818a9d;
     font-size:11px;
}
 .tagin-recommendation-modal-body {
     min-height:0;
     padding:18px 24px 24px;
     overflow-y:auto;
     overscroll-behavior:contain;
     -webkit-overflow-scrolling:touch;
}
 .tagin-recommendation-modal-close {
     display:grid;
     width:40px;
     height:40px;
     flex:0 0 40px;
     place-items:center;
     border:0;
     border-radius:13px;
     background:rgba(17,21,45,.055);
     color:#70798b;
}
 .tagin-recommendation-form {
     margin-bottom:19px;
     padding:15px;
     border:1px solid rgba(255,166,55,.18);
     border-radius:17px;
     background:linear-gradient(135deg,rgba(255,183,69,.1),rgba(255,138,76,.045));
}
 .tagin-recommendation-form>label {
     display:block;
     margin-bottom:8px;
     color:#4c5465;
     font-size:10px;
     font-weight:900;
}
 .tagin-recommendation-form-row {
     display:flex;
     gap:9px;
}
 .tagin-recommendation-input-wrap {
     position:relative;
     flex:1;
}
 .tagin-recommendation-input-wrap i {
     position:absolute;
     top:50%;
     left:13px;
     color:#d87812;
     transform:translateY(-50%);
}
 .tagin-recommendation-input-wrap input,.tagin-recommendation-form textarea {
     width:100%;
     border:1px solid rgba(17,21,45,.1);
     background:rgba(255,255,255,.84);
     color:#30384a;
     outline:0;
}
 .tagin-recommendation-input-wrap input {
     height:42px;
     padding:0 13px 0 36px;
     border-radius:12px;
     font-size:11px;
}
 .tagin-recommendation-form textarea {
     min-height:64px;
     margin-top:9px;
     padding:11px 12px;
     border-radius:12px;
     resize:vertical;
     font-size:10px;
}
 .tagin-recommendation-form-row>button {
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:7px;
     min-width:118px;
     border:0;
     border-radius:12px;
     background:linear-gradient(135deg,#ffad39,#f18438);
     color:#fff;
     font-size:10px;
     font-weight:900;
}
 .tagin-recommendation-form-message:not([hidden]) {
     display:flex;
     align-items:center;
     gap:7px;
     margin-top:9px;
     color:#27845f;
     font-size:10px;
     font-weight:850;
}
 .tagin-recommendation-list-heading {
     display:flex;
     justify-content:space-between;
     margin-bottom:9px;
     color:#4d5669;
     font-size:10px;
     font-weight:900;
     text-transform:uppercase;
}
 .tagin-recommendation-list {
     display:grid;
     gap:8px;
}
 .tagin-recommendation-item {
     display:grid;
     grid-template-columns:30px minmax(0,1fr) auto;
     align-items:center;
     gap:11px;
     padding:12px;
     border:1px solid rgba(17,21,45,.065);
     border-radius:14px;
     background:rgba(255,255,255,.72);
}
 .tagin-recommendation-rank {
     display:grid;
     width:30px;
     height:30px;
     place-items:center;
     border-radius:10px;
     background:rgba(255,166,55,.12);
     color:#d87812;
     font-size:10px;
     font-weight:900;
}
 .tagin-recommendation-item strong {
     color:#30384a;
     font-size:11px;
     font-weight:900;
}
 .tagin-recommendation-item p {
     margin:3px 0 5px;
     color:#747e91;
     font-size:9px;
     line-height:1.45;
}
 .tagin-recommendation-item div>span {
     color:#99a1b1;
     font-size:8px;
}
 .tagin-recommendation-item>button {
     display:inline-flex;
     align-items:center;
     gap:5px;
     min-height:32px;
     padding:0 9px;
     border:0;
     border-radius:10px;
     background:rgba(85,120,255,.065);
     color:#67738d;
     font-size:9px;
     font-weight:850;
}
 .tagin-recommendation-item>button.is-reacted {
     color:#e83f68;
     background:rgba(232,63,104,.07);
}
 .tagin-recommendation-empty {
     display:grid;
     min-height:180px;
     place-items:center;
     align-content:center;
     gap:8px;
     color:#8992a8;
     text-align:center;
}
 .tagin-recommendation-empty[hidden] {
     display:none;
}
 .tagin-recommendation-empty i {
     font-size:22px;
}
 .tagin-recommendation-empty strong {
     color:#596277;
     font-size:13px;
}
 .tagin-recommendation-empty span {
     font-size:10px;
}
 .tagin-recommendation-loading {
     display:flex;
     min-height:110px;
     align-items:center;
     justify-content:center;
     gap:6px;
}
 .tagin-recommendation-loading[hidden] {
     display:none;
}
 .tagin-recommendation-loading span {
     width:7px;
     height:7px;
     border-radius:50%;
     background:#d87812;
     animation:taginRecommendationPulse .8s ease-in-out infinite alternate;
}
 .tagin-recommendation-loading span:nth-child(2) {
     animation-delay:.14s;
}
 .tagin-recommendation-loading span:nth-child(3) {
     animation-delay:.28s;
}
 @keyframes taginRecommendationPulse {
     to {
         opacity:.3;
         transform:translateY(-4px);
     }
}
 body.tagin-recommendation-open {
     overflow:hidden;
}
 @media(max-width:767.98px){
    .tagin-shout-recommendation-view,.tagin-shout-recommendation-add{
        flex:1
    }
    .tagin-recommendation-overlay{
        align-items:flex-end;
        padding:10px
    }
    .tagin-recommendation-modal{
        max-height:calc(100svh - 20px);
        border-radius:24px 24px 18px 18px
    }
    .tagin-recommendation-modal-header{
        padding:19px 19px 15px
    }
    .tagin-recommendation-modal-body{
        padding:15px 19px 19px
    }
    .tagin-shout-recommendation-callout {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }
    .tagin-shout-recommendation-callout > span {
        flex: 0 0 auto;
    }
    .tagin-shout-recommendation-callout > div:first-of-type {
        flex: 1;
        min-width: 0;
    }
    .tagin-shout-recommendation-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    .tagin-shout-recommendation-actions button {
        width: 100%;
        justify-content: center;
    }
}
 @media(max-width:480px){
    .tagin-recommendation-form-row{
        flex-direction:column
    }
    .tagin-recommendation-form-row>button{
        min-height:42px
    }
    .tagin-recommendation-item{
        grid-template-columns:28px minmax(0,1fr)
    }
    .tagin-recommendation-item>button{
        grid-column:2;
        justify-self:start
    }
}

/* ==================== CITY FEED: COMPOSER & SORTING ==================== */
 .tagin-cityfeed-toolbar-copy, .tagin-cityfeed-control-group {
     position: relative;
     z-index: 1;
}
 .tagin-cityfeed-control-group {
     display: grid;
     grid-template-columns: repeat(2,minmax(170px,1fr));
     flex: 0 0 auto;
     gap: 10px;
     min-width: 370px;
}
 .tagin-cityfeed-control-wrap {
     min-width: 0;
}
 .tagin-cityfeed-control-label {
     display: block;
     margin-bottom: 7px;
     color: #8a94aa;
     font-size: 9px;
     font-weight: 900;
     letter-spacing: .08em;
     text-transform: uppercase;
}
 .tagin-cityfeed-dropdown {
     position: relative;
}
 .tagin-cityfeed-dropdown-trigger {
     display: grid;
     grid-template-columns: 18px minmax(0,1fr) 12px;
     align-items: center;
     gap: 8px;
     width: 100%;
     min-height: 44px;
     padding: 0 13px;
     border: 1px solid rgba(85,120,255,.16);
     border-radius: 14px;
     background: rgba(85,120,255,.07);
     color: var(--cityfeed-primary);
     text-align: left;
     transition: .18s ease;
}
 .tagin-cityfeed-dropdown-trigger:hover, .tagin-cityfeed-dropdown.is-open .tagin-cityfeed-dropdown-trigger {
     border-color: rgba(85,120,255,.34);
     background: rgba(85,120,255,.11);
     box-shadow: 0 8px 20px rgba(85,120,255,.1);
}
 .tagin-cityfeed-dropdown-trigger span {
     overflow: hidden;
     color: var(--cityfeed-ink);
     font-size: 11px;
     font-weight: 850;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .tagin-cityfeed-dropdown-trigger > i:last-child {
     color: #8e98ad;
     font-size: 9px;
     transition: transform .18s ease;
}
 .tagin-cityfeed-dropdown.is-open .tagin-cityfeed-dropdown-trigger > i:last-child {
     transform: rotate(180deg);
}
 .tagin-cityfeed-dropdown-menu {
     position: absolute;
     z-index: 110;
     top: calc(100% + 8px);
     right: 0;
     width: min(275px,calc(100vw - 40px));
     padding: 8px;
     border: 1px solid rgba(255,255,255,.14);
     border-radius: 17px;
     background: rgba(27,31,55,.98);
     box-shadow: 0 22px 54px rgba(0,0,0,.28);
     backdrop-filter: blur(20px);
}
 .tagin-cityfeed-dropdown-menu button {
     display: grid;
     grid-template-columns: 1fr auto;
     width: 100%;
     padding: 10px 11px;
     border: 0;
     border-radius: 11px;
     background: transparent;
     color: #fff;
     text-align: left;
     transition: .16s ease;
}
 .tagin-cityfeed-dropdown-menu button:hover, .tagin-cityfeed-dropdown-menu button.is-selected {
     background: rgba(255,255,255,.09);
}
 .tagin-cityfeed-dropdown-menu button.is-selected::after {
     content: "✓";
     align-self: center;
     color: #9daaff;
     font-weight: 900;
}
 .tagin-cityfeed-dropdown-menu span {
     font-size: 10px;
     font-weight: 900;
}
 .tagin-cityfeed-dropdown-menu small {
     grid-column: 1;
     margin-top: 2px;
     color: rgba(255,255,255,.52);
     font-size: 8px;
     font-weight: 700;
}
 .tagin-shout-composer {
     padding: 0;
     overflow: hidden;
     transition: box-shadow .22s ease, border-color .22s ease;
}
 .tagin-shout-composer.is-expanded {
     padding: 20px;
}
 .tagin-shout-composer-compact {
     display: flex;
     align-items: center;
     gap: 11px;
     width: 100%;
     min-height: 70px;
     padding: 10px 14px;
     border: 0;
     background: transparent;
     text-align: left;
     cursor: pointer;
     transition: background .18s ease;
}
 .tagin-shout-composer-compact:hover {
     background: rgba(85,120,255,.035);
}
 .tagin-shout-composer-compact > img {
     width: 42px;
     height: 42px;
     flex: 0 0 42px;
     border: 3px solid #fff;
     border-radius: 14px;
     object-fit: cover;
     box-shadow: 0 7px 17px rgba(85,120,255,.15);
}
 .tagin-shout-composer-compact-copy {
     display: flex;
     min-width: 0;
     flex: 1;
     flex-direction: column;
     gap: 3px;
}
 .tagin-shout-composer-compact-copy strong {
     color: #3b4355;
     font-size: 12px;
     font-weight: 850;
}
 .tagin-shout-composer-compact-copy small {
     overflow: hidden;
     color: #939caf;
     font-size: 9px;
     font-weight: 700;
     text-overflow: ellipsis;
     white-space: nowrap;
}
.tagin-shout-composer-compact-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 14px;
    background: linear-gradient(135deg, #5578ff, #7b5cff);
    box-shadow: 0 10px 24px rgba(85, 120, 255, .28);
    color: #fff;
    white-space: nowrap;
    transition: width .24s cubic-bezier(.34, 1.56, .64, 1), gap .2s ease, padding .2s ease, transform .18s ease, box-shadow .18s ease;
}
.tagin-shout-composer-compact-action > i {
    flex: 0 0 auto;
    font-size: 14px;
    transition: transform .22s ease;
}
.tagin-shout-composer-compact-action > span {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    transform: translateX(6px);
    transition: max-width .2s ease, opacity .16s ease, transform .2s ease;
}
.tagin-shout-composer-compact:focus-visible .tagin-shout-composer-compact-action {
    width: 96px;
    gap: 7px;
    padding: 0 14px;
}
.tagin-shout-composer-compact:focus-visible .tagin-shout-composer-compact-action > span {
    max-width: 48px;
    opacity: 1;
    transform: translateX(0);
}
@media (hover: hover) and (pointer: fine) {
    .tagin-shout-composer-compact:hover .tagin-shout-composer-compact-action {
        width: 96px;
        gap: 7px;
        padding: 0 14px;
        box-shadow: 0 13px 30px rgba(85, 120, 255, .38);
        transform: translateY(-1px);
    }
    .tagin-shout-composer-compact:hover .tagin-shout-composer-compact-action > i {
        transform: rotate(90deg);
    }
    .tagin-shout-composer-compact:hover .tagin-shout-composer-compact-action > span {
        max-width: 48px;
        opacity: 1;
        transform: translateX(0);
    }
}
 .tagin-shout-composer-expanded[hidden] {
     display: none;
}
 .tagin-shout-composer-expanded {
     animation: taginComposerExpand .24s ease both;
}
 .tagin-shout-composer.is-expanded .tagin-shout-composer-compact {
     display: none;
}
 .tagin-shout-composer-heading-actions {
     display: flex;
     align-items: center;
     gap: 8px;
}
 .tagin-shout-composer-collapse {
     display: grid;
     width: 36px;
     height: 36px;
     flex: 0 0 36px;
     place-items: center;
     padding: 0;
     border: 0;
     border-radius: 12px;
     background: rgba(17,21,45,.055);
     color: #7d8799;
     transition: .18s ease;
}
 .tagin-shout-composer-collapse:hover {
     background: rgba(17,21,45,.09);
     color: #3e4657;
}
 .tagin-cityfeed-audience-wrap {
     grid-column: 1 / -1;
     min-width: 0;
}
 .tagin-cityfeed-audience-tabs {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 8px;
     width: 100%;
     padding: 6px;
     border: 1px solid rgba(85, 120, 255, 0.16);
     border-radius: 14px;
     background: rgba(85, 120, 255, 0.07);
}
 .tagin-cityfeed-audience-tabs .tagin-cityfeed-tab {
     width: 100%;
     min-width: 0;
     justify-content: center;
}
 @keyframes taginComposerExpand {
     from {
         opacity: 0;
         transform: translateY(-8px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 @media (max-width: 1199.98px) {
     .tagin-cityfeed-control-group {
         min-width: 330px;
    }
}
 @media (max-width: 767.98px) {
     .tagin-cityfeed-control-group {
         grid-template-columns: 1fr 1fr;
         width: 100%;
         min-width: 0;
    }
     .tagin-cityfeed-dropdown-menu {
         right: auto;
         left: 0;
         width: min(275px,calc(100vw - 52px));
    }
     .tagin-shout-composer.is-expanded {
         padding: 16px;
    }
     .tagin-shout-composer-compact {
         min-height: 64px;
         padding: 9px 12px;
    }
     .tagin-shout-composer-heading-actions {
         align-items: flex-end;
         flex-direction: column-reverse;
    }
}
 @media (max-width: 480px) {
     .tagin-cityfeed-control-group {
         gap: 7px;
    }
     .tagin-cityfeed-control-label {
         font-size: 7px;
    }
     .tagin-cityfeed-dropdown-trigger {
         min-height: 40px;
         padding: 0 9px;
    }
     .tagin-cityfeed-dropdown-trigger span {
         font-size: 9px;
    }
     .tagin-cityfeed-dropdown-trigger > i:first-child {
         font-size: 10px;
    }
     .tagin-shout-composer-compact-copy small {
         display: none;
    }
     .tagin-shout-composer-compact-copy strong {
         font-size: 11px;
    }
     .tagin-shout-composer-compact > img {
         width: 38px;
         height: 38px;
         flex-basis: 38px;
    }
}
 .tagin-cityfeed-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:42px 20px;
    border-radius:22px;
    background:rgba(255,255,255,.92);
    color:#6f7890;
    text-align:center
}
.tagin-cityfeed-empty i{
    font-size:26px;
    color:#7b5cff
}
.tagin-cityfeed-empty strong{
    color:#171b36;
    font-size:15px
}
.tagin-shout-photo-count{
    font-size:11px;
    font-weight:800;
    color:#7b5cff
}
.tagin-comment-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    gap:8px;
    margin-top:12px
}
.tagin-comment-form textarea{
    width:100%;
    min-height:44px;
    max-height:140px;
    padding:11px 13px;
    border:1px solid rgba(85,120,255,.16);
    border-radius:14px;
    background:#fff;
    color:#171b36;
    resize:vertical
}
.tagin-comment-form button{
    display:grid;
    place-items:center;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#5578ff,#7b5cff);
    color:#fff
}
.tagin-shout-menu button{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 14px;
    border:0;
    background:transparent;
    color:inherit;
    text-align:left
}
.tagin-shout-menu button:hover{
    background:rgba(85,120,255,.08)
}
.tagin-shout-action.is-reacted,.tagin-shout-comment-meta button.is-reacted{
    color:#ec5d86
}
.tagin-cityfeed-loader[hidden],.tagin-cityfeed-empty[hidden]{
    display:none!important
}
 @media (max-width: 575.98px) {
     .tagin-shout-gallery-1 {
         grid-template-rows: minmax(200px,300px);
    }
     .tagin-shout-gallery-2 {
         grid-template-rows: 210px;
    }
     .tagin-shout-gallery-3 {
         grid-template-rows: repeat(2,135px);
    }
     .tagin-shout-gallery-4, .tagin-shout-gallery-four {
         grid-template-rows: repeat(2,145px);
    }
}
 body.tagin-comments-open {
     overflow: hidden;
}
 .tagin-comments-overlay {
     position: fixed;
     inset: 0;
     z-index: 10050;
     display: grid;
     place-items: center;
     padding: 24px;
     background: rgba(6,8,24,.72);
     backdrop-filter: blur(12px);
     opacity: 0;
     transition: opacity .22s ease;
}
 .tagin-comments-overlay.is-visible {
     opacity: 1;
}
 .tagin-comments-modal {
     position: relative;
     display: grid;
     grid-template-columns: minmax(280px,1fr) minmax(520px,2fr);
     width: min(1380px,96vw);
     height: min(860px,92dvh);
     overflow: hidden;
     border: 1px solid rgba(255,255,255,.18);
     border-radius: 28px;
     background: #f5f7ff;
     box-shadow: 0 35px 100px rgba(0,0,0,.45);
}
 .tagin-comments-modal-close {
     position: absolute;
     top: 26px;
     right: 26px;
     z-index: 5;
     display: grid;
     width: 42px;
     height: 42px;
     place-items: center;
     border: 0;
     border-radius: 50%;
     color: #fff;
     background: rgba(16,19,40,.82);
}
 .tagin-comments-content {
     min-width: 0;
     overflow-y: auto;
     padding: 24px;
     border-right: 1px solid rgba(16,19,40,.1);
     background: linear-gradient(180deg,#e6ebff,#dce5f7);
}
 .tagin-comments-content .tagin-shout-card {
     margin: 0 !important;
}
 .tagin-comments-panel {
     display: grid;
     grid-template-rows: auto minmax(0,1fr) auto;
     min-width: 0;
     min-height: 0;
     color: var(--app-text);
     background: #f8f9ff;
}
 .tagin-comments-panel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 92px;
     padding: 22px 72px 18px 28px;
     border-bottom: 1px solid rgba(16,19,40,.09);
     background: #fff;
}
 .tagin-comments-panel-header span {
     display:block;
     margin-bottom:4px;
     color:#69728d;
     font-size:11px;
     font-weight:900;
     letter-spacing:.12em;
     text-transform:uppercase;
}
 .tagin-comments-panel-header h2 {
     margin:0;
     color:#101328;
     font-size:24px;
     font-weight:900;
}
 .tagin-comments-panel-header>strong {
     display:grid;
     min-width:40px;
     height:40px;
     place-items:center;
     border-radius:13px;
     color:#fff;
     background:linear-gradient(135deg,var(--app-primary),var(--app-secondary));
}
 .tagin-comments-scroll {
     min-height:0;
     overflow-y:auto;
     padding:24px 28px 32px;
     overscroll-behavior:contain;
}
 .tagin-comments-list {
     display:grid;
     gap:20px;
}
 .tagin-comment-modal-item {
     display:grid;
     grid-template-columns:44px minmax(0,1fr);
     gap:12px;
     align-items:start;
}
 .tagin-comment-modal-item.is-reply {
     grid-template-columns:36px minmax(0,1fr);
     margin-top:12px;
}
 .tagin-comment-modal-avatar {
     width:44px;
     height:44px;
     object-fit:cover;
     border-radius:50%;
}
 .tagin-comment-modal-item.is-reply .tagin-comment-modal-avatar {
     width:36px;
     height:36px;
}
 .tagin-comment-modal-bubble {
     padding:13px 15px;
     border:1px solid rgba(16,19,40,.08);
     border-radius:5px 18px 18px 18px;
     background:#fff;
}
 .tagin-comment-modal-name {
     display:flex;
     justify-content:space-between;
     gap:12px;
     margin-bottom:5px;
}
 .tagin-comment-modal-name strong {
     color:#171b36;
     font-size:14px;
     font-weight:900;
}
 .tagin-comment-modal-name span {
     color:#8b93a8;
     font-size:11px;
     font-weight:700;
     white-space:nowrap;
}
 .tagin-comment-modal-bubble p {
     margin:0;
     color:#303852;
     font-size:14px;
     line-height:1.5;
     overflow-wrap:anywhere;
}
 .tagin-comment-modal-actions {
     display:flex;
     gap:13px;
     padding:7px 4px 0;
}
 .tagin-comment-modal-actions button {
     display:inline-flex;
     align-items:center;
     gap:5px;
     padding:0;
     border:0;
     color:#7a839b;
     font-size:12px;
     font-weight:800;
     background:transparent;
}
 .tagin-comment-modal-actions button:hover,.tagin-comment-modal-actions button.is-reacted {
     color:#e3486f;
}
 .tagin-comment-replies {
     position:relative;
     display:grid;
     margin-left:56px;
     padding-left:18px;
}
 .tagin-comment-replies::before {
     content:"";
     position:absolute;
     top:4px;
     bottom:8px;
     left:0;
     width:2px;
     background:rgba(85,120,255,.25);
}
 .tagin-comments-empty {
     display:grid;
     min-height:300px;
     place-items:center;
     align-content:center;
     gap:7px;
     color:#7d869e;
     text-align:center;
}
 .tagin-comments-loading {
     display:flex;
     justify-content:center;
     gap:6px;
     padding:24px;
}
 .tagin-comments-loading span {
     width:8px;
     height:8px;
     border-radius:50%;
     background:#6d78a0;
     animation:taginCommentPulse 1s ease-in-out infinite;
}
 .tagin-comments-loading span:nth-child(2){
    animation-delay:.12s
}
.tagin-comments-loading span:nth-child(3){
    animation-delay:.24s
}
 @keyframes taginCommentPulse{
    0%,100%{
        opacity:.3;
        transform:translateY(0)
    }
    50%{
        opacity:1;
        transform:translateY(-4px)
    }
}
 .tagin-comments-sentinel {
     height:1px;
}
 .tagin-comments-composer {
     padding:15px 20px 18px;
     border-top:1px solid rgba(16,19,40,.09);
     background:#fff;
}
 .tagin-comments-replying {
     display:flex;
     justify-content:space-between;
     margin-bottom:9px;
     padding:8px 11px;
     border-radius:10px;
     color:#5d6681;
     font-size:12px;
     background:#eef1ff;
}
 .tagin-comments-replying button {
     border:0;
     background:transparent;
}
 .tagin-comments-composer-row {
     display:grid;
     grid-template-columns:minmax(0,1fr) 46px;
     align-items:center;
     gap:10px;
}
 .tagin-comments-composer textarea {
     width:100%;
     height:48px;
     min-height:48px;
     max-height:140px;
     resize:none;
     padding:13px 15px;
     overflow-y:auto;
     border:1px solid #d7dcef;
     border-radius:16px;
     color:#171b36;
     background:#f8f9ff;
     transition:height .18s ease, min-height .18s ease;
}
 .tagin-comments-composer textarea.is-expanded {
     height:104px;
     min-height:104px;
}
 .tagin-comments-composer-row>button {
     display:grid;
     align-self:center;
     width:46px;
     height:46px;
     place-items:center;
     border:0;
     border-radius:15px;
     color:#fff;
     background:linear-gradient(135deg,var(--app-primary),var(--app-secondary));
}
@media (max-width: 991.98px) {
    .tagin-comments-overlay {
        padding: 0;
    }
    .tagin-comments-modal {
        display: flex;
        width: 100vw;
        height: 100dvh;
        flex-direction: column;
        border: 0;
        border-radius: 0;
    }
    .tagin-comments-content {
        max-height: 33.333dvh;
        padding: 0;
        flex: 0 0 auto;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(16, 19, 40, .1);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .tagin-comments-content .tagin-shout-card {
        height: auto;
        min-height: 100%;
    }
    .tagin-comments-overlay.is-visible .tagin-shout-card {
        border-radius: 0 !important;
    }
    .tagin-comments-panel {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }
    .tagin-comments-panel-header {
        min-height: 74px;
        padding: 14px 20px 12px 18px;
        flex: 0 0 auto;
    }
    .tagin-comments-scroll {
        min-height: 0;
        padding: 18px 16px 26px;
        flex: 1 1 auto;
        overflow-y: auto;
    }
    .tagin-comments-composer {
        flex: 0 0 auto;
    }
}
.tagin-shout-mobile-header {
    display: none;
}
@media (max-width: 767.98px) {
    body.tagin-shout-modal-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }
    body.tagin-shout-modal-open .tagin-mobile-footer {
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
    }
    .tagin-shout-composer:not(.is-collapsed) {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: block;
        width: 100%;
        height: 100dvh;
        margin: 0 !important;
        padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
        overflow: hidden;
        background: #f7f8ff;
        animation: taginComposerScreenOpen .15s ease-out;
        border-radius: 0px !important;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-compact {
        display: none !important;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-expanded {
        position: relative;
        display: flex !important;
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        border: 0;
        border-radius: 0;
        background: #f7f8ff;
        box-shadow: none;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-expanded::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    .tagin-shout-mobile-header {
        position: sticky;
        top: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: minmax(74px, 1fr) auto minmax(74px, 1fr);
        align-items: center;
        gap: 10px;
        min-height: 58px;
        margin: 0 -1px 10px;
        padding: 6px 5px 10px;
        border-bottom: 1px solid rgba(82, 91, 166, .12);
        background: rgba(247, 248, 255, .96);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .tagin-shout-mobile-header > strong {
        color: #101328;
        font-size: 16px;
        font-weight: 900;
        white-space: nowrap;
        text-align: center;
    }
    .tagin-shout-mobile-cancel,
    .tagin-shout-mobile-submit {
        display: inline-flex;
        min-height: 40px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 12px;
        border-radius: 12px;
        font: inherit;
        font-size: 13px;
        font-weight: 850;
        cursor: pointer;
    }
    .tagin-shout-mobile-cancel {
        justify-self: start;
        color: #59637e;
        background: transparent;
        border: 0;
    }
    .tagin-shout-mobile-cancel i {
        font-size: 14px;
    }
    .tagin-shout-mobile-submit {
        justify-self: end;
        color: #fff;
        background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
        border: 0;
        box-shadow: 0 8px 20px rgba(85, 120, 255, .22);
        transition: opacity .15s ease, transform .15s ease;
    }
    .tagin-shout-mobile-submit:disabled {
        opacity: .38;
        cursor: default;
        box-shadow: none;
    }
    .tagin-shout-mobile-submit:not(:disabled):active {
        transform: scale(.97);
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-heading {
        position: static;
        display: block;
        padding: 0 6px 12px;
        background: transparent;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-heading > div:first-child,
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-collapse {
        display: none !important;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-heading-actions {
        display: block;
        width: 100%;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-visibility {
        display: flex;
        width: 100%;
        min-height: 48px;
        justify-content: flex-start;
        margin: 0;
        padding: 0 14px;
        border-radius: 15px;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-visibility span {
        flex: 1;
        text-align: left;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-type-grid {
        margin: 0 6px 12px;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-box {
        min-height: 220px;
        margin: 0 6px 12px;
        flex: 1 0 auto;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-field textarea {
        min-height: 170px;
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-composer-footer {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin-top: auto;
        padding: 10px 6px max(4px, env(safe-area-inset-bottom));
        background: rgba(247, 248, 255, .97);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .tagin-shout-composer:not(.is-collapsed) .tagin-shout-submit {
        display: none !important;
    }
    @keyframes taginComposerScreenOpen {
        from {
            opacity: 0;
            transform: scale(.985);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}
 .tagin-comments-modal{
    transform:translateY(12px) scale(.975);
    opacity:.96;
    transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease
}
.tagin-comments-overlay.is-visible .tagin-comments-modal{
    transform:translateY(0) scale(1);
    opacity:1
}
.tagin-comments-panel-header{
    position:relative;
    z-index:3;
    gap:20px;
    box-shadow:0 8px 22px rgba(16,19,40,.035)
}
.tagin-comments-heading{
    min-width:0
}
.tagin-comments-header-actions{
    display:flex;
    align-items:center;
    gap:12px
}
.tagin-comments-sort{
    display:inline-flex;
    align-items:center;
    padding:4px;
    border:1px solid rgba(16,19,40,.09);
    border-radius:13px;
    background:#f3f5fc
}
.tagin-comments-sort button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:32px;
    padding:7px 11px;
    border:0;
    border-radius:9px;
    color:#7a839b;
    font-size:12px;
    font-weight:850;
    background:transparent;
    transition:color .18s ease,background .18s ease,box-shadow .18s ease
}
.tagin-comments-sort button:hover{
    color:#4f5b79
}
.tagin-comments-sort button.is-active{
    color:#fff;
    background:linear-gradient(135deg,var(--app-primary),var(--app-secondary));
    box-shadow:0 6px 15px rgba(85,120,255,.24)
}
.tagin-comments-sort button.is-active,
.tagin-comments-sort button.is-active span,
.tagin-comments-sort button.is-active i {
    color: #fff !important;
}
.tagin-comments-sort button i{
    font-size:11px
}
.tagin-comments-content{
    display:flex;
    align-items:flex-start
}
.tagin-comments-content>.tagin-shout-card{
    width:100%;
    align-self:flex-start
}
.tagin-comments-replying{
    align-items:center;
    border:1px solid rgba(85,120,255,.11);
    box-shadow:inset 3px 0 0 rgba(85,120,255,.58)
}
.tagin-comments-replying strong{
    color:#3f4f84
}
.tagin-comment-replies::before{
    border-radius:99px;
    background:linear-gradient(180deg,rgba(85,120,255,.5),rgba(123,92,255,.14))
}
.tagin-comment-modal-item{
    animation:taginCommentEnter .22s ease both
}
.tagin-comments-header-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tagin-comments-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 42px;
    border-radius: 999px;
    background: #f3f5ff;
    border: 1px solid rgba(86, 94, 255, .12);
    color: #4b5568;
    font-size: .9rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.tagin-comments-count i {
    color: #6366f1;
    font-size: .9rem;
}
.tagin-comments-count span {
    color: inherit;
}
@keyframes taginCommentEnter{
    from{
        opacity:0;
        transform:translateY(5px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
 @media(max-width:991.98px){
    .tagin-comments-panel-header{
        gap:10px
    }
    .tagin-comments-header-actions{
        gap:8px
    }
    .tagin-comments-sort{
        padding:3px
    }
    .tagin-comments-sort button{
        min-height:30px;
        padding:6px 9px
    }
    .tagin-comments-sort button i{
        display:none
    }
    .tagin-comments-panel-header>div:first-child span{
        margin-bottom:2px
    }
    .tagin-comments-panel-header h2{
        font-size:21px
    }
    .tagin-comments-panel-header>strong,.tagin-comments-header-actions>strong{
        min-width:36px;
        height:36px
    }
    .tagin-comments-composer textarea{
        font-size:16px
    }
}
 @media(max-width:575.98px){
    .tagin-comments-sort button{
        padding:6px 8px
    }
    .tagin-comments-sort button span{
        font-size:11px
    }
    .tagin-comments-header-actions{
        gap:6px
    }
}

/* ==================== CITY FEED: CONTENT MANAGEMENT ==================== */
body.tagin-manage-open { overflow: hidden; }
.tagin-manage-overlay[hidden], .tagin-manage-warning[hidden], .tagin-manage-field[hidden] { display: none !important; }
.tagin-manage-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(8, 11, 28, .66);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity .18s ease;
}
.tagin-manage-overlay.is-visible { opacity: 1; }
.tagin-manage-modal {
    width: min(560px, 100%);
    overflow: hidden;
    color: #101328;
    background: #f8f9ff;
    border: 1px solid rgba(85, 120, 255, .20);
    border-radius: 24px;
    box-shadow: 0 28px 90px rgba(4, 7, 25, .42);
    transform: translateY(14px) scale(.985);
    transition: transform .18s ease;
}
.tagin-manage-overlay.is-visible .tagin-manage-modal { transform: translateY(0) scale(1); }
.tagin-manage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 20px;
    background: linear-gradient(135deg, rgba(85, 120, 255, .12), rgba(123, 92, 255, .08));
    border-bottom: 1px solid rgba(16, 19, 40, .08);
}
.tagin-manage-header > div { min-width: 0; }
.tagin-manage-header span { display: block; margin-bottom: 5px; color: #617cff; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.tagin-manage-header h2 { margin: 0; color: #101328; font-size: 25px; font-weight: 900; letter-spacing: -.035em; }
.tagin-manage-header p { margin: 7px 0 0; color: #717b94; font-size: 13px; line-height: 1.5; }
.tagin-manage-header button {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #fff;
    background: #363b50;
    border: 0;
    border-radius: 50%;
}
.tagin-manage-body { display: grid; gap: 18px; padding: 24px; }
.tagin-manage-field { display: grid; gap: 8px; margin: 0; }
.tagin-manage-field > span { color: #20253b; font-size: 12px; font-weight: 850; }
.tagin-manage-field input,
.tagin-manage-field textarea {
    width: 100%;
    padding: 14px 15px;
    color: #20253b;
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
    background: #fff;
    border: 1px solid rgba(85, 120, 255, .22);
    border-radius: 15px;
    outline: 0;
    box-shadow: inset 0 1px 2px rgba(16, 19, 40, .04);
}
.tagin-manage-field input:focus,
.tagin-manage-field textarea:focus { border-color: #617cff; box-shadow: 0 0 0 4px rgba(85, 120, 255, .11); }
.tagin-manage-field small { justify-self: end; color: #9098ad; font-size: 11px; font-weight: 750; }
.tagin-manage-photos { display: grid; gap: 12px; }
.tagin-manage-photos[hidden], .tagin-manage-photo-add[hidden] { display: none !important; }
.tagin-manage-photos-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.tagin-manage-photos-heading > div { display: grid; gap: 3px; }
.tagin-manage-photos-heading strong { color: #20253b; font-size: 12px; font-weight: 850; }
.tagin-manage-photos-heading span { color: #8992a9; font-size: 11px; line-height: 1.4; }
.tagin-manage-photos-heading small { color: #747f9a; font-size: 11px; font-weight: 850; }
.tagin-manage-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tagin-manage-photo-item { position: relative; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #e8ebf6; border: 1px solid rgba(16, 19, 40, .09); border-radius: 14px; box-shadow: 0 8px 18px rgba(16, 19, 40, .08); }
.tagin-manage-photo-item img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tagin-manage-photo-item button { position: absolute; right: 6px; bottom: 6px; display: inline-flex; min-height: 28px; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; color: #fff; font: inherit; font-size: 10px; font-weight: 850; background: rgba(28, 31, 50, .88); border: 0; border-radius: 9px; box-shadow: 0 5px 14px rgba(0, 0, 0, .22); backdrop-filter: blur(8px); cursor: pointer; }
.tagin-manage-photo-item button:hover { background: #e64f62; }
.tagin-manage-photo-new { position: absolute; top: 6px; left: 6px; padding: 4px 7px; color: #fff !important; font-size: 9px !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(135deg, #5578ff, #7b5cff); border-radius: 7px; box-shadow: 0 5px 12px rgba(85, 120, 255, .24); }
.tagin-manage-photo-add { display: inline-flex; width: max-content; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; color: #5578ff; font: inherit; font-size: 12px; font-weight: 850; background: rgba(85, 120, 255, .08); border: 1px dashed rgba(85, 120, 255, .36); border-radius: 12px; cursor: pointer; }
.tagin-manage-photo-add:hover { background: rgba(85, 120, 255, .13); border-style: solid; }
.tagin-manage-warning {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
    color: #8e2834;
    background: rgba(255, 93, 112, .09);
    border: 1px solid rgba(255, 93, 112, .22);
    border-radius: 16px;
}
.tagin-manage-warning i { margin-top: 2px; color: #e64f62; }
.tagin-manage-warning div { display: grid; gap: 4px; }
.tagin-manage-warning strong { font-size: 13px; }
.tagin-manage-warning span { color: #9a5861; font-size: 12px; line-height: 1.45; }
.tagin-manage-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: 1px solid rgba(16, 19, 40, .07);
}
.tagin-manage-footer button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    border-radius: 13px;
    cursor: pointer;
}
.tagin-manage-cancel { color: #505a73; background: #fff; border: 1px solid rgba(16, 19, 40, .12); }
.tagin-manage-submit { color: #fff; background: linear-gradient(135deg, #5578ff, #7b5cff); border: 0; box-shadow: 0 10px 24px rgba(85, 120, 255, .25); }
.tagin-manage-submit.is-danger { background: linear-gradient(135deg, #f05b6c, #d94458); box-shadow: 0 10px 24px rgba(217, 68, 88, .22); }
.tagin-manage-submit:disabled { opacity: .55; cursor: wait; }
.tagin-shout-menu button.is-danger,
.tagin-comment-modal-actions button.is-danger,
.tagin-recommendation-manage button.is-danger { color: #df4e61; }
.tagin-comment-modal-actions button[data-edit-comment],
.tagin-comment-modal-actions button[data-delete-comment] { gap: 5px; }
.tagin-recommendation-copy { min-width: 0; }
.tagin-recommendation-actions { display: flex; align-items: center; gap: 7px; }
.tagin-recommendation-manage { display: flex; align-items: center; gap: 5px; }
.tagin-recommendation-manage button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #758099;
    background: rgba(85, 120, 255, .07);
    border: 1px solid rgba(85, 120, 255, .12);
    border-radius: 10px;
}
@media (max-width: 575.98px) {
    .tagin-manage-overlay { align-items: end; padding: 0; }
    .tagin-manage-modal { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; }
    .tagin-manage-header { padding: 20px 18px 17px; }
    .tagin-manage-body { padding: 20px 18px; }
    .tagin-manage-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tagin-manage-footer { padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); }
    .tagin-manage-footer button { flex: 1; }
}

/* ==================== CITY FEED: MODERATED CONTENT ==================== */
.tagin-shout-card.is-moderated,
.tagin-comment-modal-item.is-moderated .tagin-comment-modal-bubble,
.tagin-recommendation-item.is-moderated {
    border-color: rgba(239, 83, 102, .24);
    background: linear-gradient(135deg, rgba(255, 246, 248, .98), rgba(247, 248, 255, .98));
}
.tagin-moderated-notice {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 4px 0 12px;
    padding: 16px;
    color: #7f3340;
    background: rgba(239, 83, 102, .08);
    border: 1px solid rgba(239, 83, 102, .18);
    border-radius: 15px;
}
.tagin-moderated-notice i {
    margin-top: 2px;
    color: #e45065;
}
.tagin-moderated-notice div {
    display: grid;
    gap: 3px;
}
.tagin-moderated-notice strong {
    font-size: 13px;
    font-weight: 900;
}
.tagin-moderated-notice span {
    color: #91616a;
    font-size: 12px;
    line-height: 1.45;
}
.tagin-comment-modal-item.is-moderated .tagin-comment-modal-bubble p,
.tagin-recommendation-item.is-moderated .tagin-recommendation-copy p {
    color: #8d626a;
    font-style: italic;
}
.tagin-moderated-report-row {
    display: flex;
    justify-content: flex-end;
    padding: 0 18px 16px;
}
.tagin-moderated-report-row button,
.tagin-report-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #778198;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.tagin-moderated-report-row button:hover,
.tagin-report-inline:hover {
    color: #e04e62;
}

/* ==================== CITY FEED: MODERATION CONTROLS ==================== */
.tagin-recommendation-like {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 46px;
    height: 34px;
    padding: 0 11px;
    color: #7b849c;
    background: rgba(85, 120, 255, .07);
    border: 1px solid rgba(85, 120, 255, .14);
    border-radius: 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.tagin-recommendation-like:hover {
    color: #ed4e69;
    background: rgba(237, 78, 105, .08);
    border-color: rgba(237, 78, 105, .2);
    transform: translateY(-1px);
}
.tagin-recommendation-like.is-reacted {
    color: #fff;
    background: linear-gradient(135deg, #ef5870, #df405c);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(223, 64, 92, .2);
}
.tagin-recommendation-like:disabled {
    opacity: .6;
    cursor: wait;
    transform: none;
}
.tagin-moderated-inline {
    display: grid;
    gap: 10px;
    color: #8d626a;
    font-style: italic;
}
.tagin-moderated-original {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding: 12px 14px;
    color: #4c556d;
    font-style: normal;
    background: rgba(255, 255, 255, .68);
    border: 1px dashed rgba(127, 51, 64, .22);
    border-radius: 12px;
}
.tagin-moderated-original > span {
    color: #a05764;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.tagin-moderated-original > strong {
    color: #20253b;
    font-size: 13px;
}
.tagin-moderated-original p {
    margin: 0 !important;
    color: #525c73 !important;
    font-style: normal !important;
    line-height: 1.5;
}
.tagin-restore-inline,
.tagin-moderated-action-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    color: #4e62d8;
    background: rgba(85, 120, 255, .09);
    border: 1px solid rgba(85, 120, 255, .17);
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}
.tagin-restore-inline:hover,
.tagin-moderated-action-row button:hover {
    color: #fff;
    background: linear-gradient(135deg, #5578ff, #7b5cff);
    border-color: transparent;
}
.tagin-moderated-action-row {
    display: flex;
    justify-content: flex-end;
    padding: 0 18px 16px;
}
.tagin-manage-submit.is-restore {
    color: #fff;
    background: linear-gradient(135deg, #5578ff, #7b5cff);
    border: 0;
    box-shadow: 0 10px 24px rgba(85, 120, 255, .25);
}

/* ==================== CITY FEED: PERMALINKS & SHARING ==================== */
.tagin-comment-modal-item.is-deep-linked,.tagin-recommendation-item.is-deep-linked{position:relative;z-index:1;border-radius:16px;box-shadow:0 0 0 2px rgba(85,120,255,.52),0 14px 34px rgba(85,120,255,.18);animation:taginDeepLinkPulse 1.55s ease}
.tagin-comment-modal-item.is-deep-linked::before,.tagin-recommendation-item.is-deep-linked::before{content:"Shared item";position:absolute;top:-10px;right:14px;z-index:2;padding:4px 9px;color:#fff;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(135deg,#5578ff,#7b5cff);border-radius:999px;box-shadow:0 7px 16px rgba(85,120,255,.22)}
@keyframes taginDeepLinkPulse{0%,100%{background-color:transparent}32%{background-color:rgba(85,120,255,.12)}}
.tagin-share-inline{display:inline-flex;align-items:center;gap:6px;color:#778198;font:inherit;font-size:12px;font-weight:800;background:transparent;border:0;cursor:pointer}.tagin-share-inline:hover{color:#5578ff}

/* ==================== CITY FEED: SHOUT MENU ==================== */
.tagin-cityfeed-stream {
    position: relative;
}
.tagin-shout-card.is-menu-open,
.tagin-shout-card:has(.tagin-shout-menu.show) {
    z-index: 500;
}
.tagin-shout-card.is-menu-open .dropdown,
.tagin-shout-card:has(.tagin-shout-menu.show) .dropdown {
    position: relative;
    z-index: 501;
}
.tagin-shout-menu {
    z-index: 9999 !important;
    min-width: 184px !important;
    max-width: 205px;
    padding: 7px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 15px !important;
    background: linear-gradient(155deg, rgba(31, 35, 61, .99), rgba(22, 26, 48, .99)) !important;
    box-shadow: 0 20px 48px rgba(5, 8, 28, .34), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(22px);
}
.tagin-shout-menu button {
    display: flex;
    width: 100%;
    min-height: 35px;
    align-items: center;
    gap: 9px;
    margin: 1px 0;
    padding: 0 10px;
    color: #c8cee0;
    font: inherit;
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}
.tagin-shout-menu button i {
    display: grid;
    width: 15px;
    flex: 0 0 15px;
    place-items: center;
    color: #8893b4;
    font-size: 11px;
    transition: color .15s ease;
}
.tagin-shout-menu button:hover,
.tagin-shout-menu button:focus-visible {
    color: #fff;
    background: rgba(105, 116, 255, .14);
    outline: 0;
    transform: translateX(2px);
}
.tagin-shout-menu button:hover i,
.tagin-shout-menu button:focus-visible i {
    color: #8ea0ff;
}
.tagin-shout-menu button.is-danger {
    color: #ff7184;
}
.tagin-shout-menu button.is-danger i {
    color: #ff6077;
}
.tagin-shout-menu button.is-danger:hover,
.tagin-shout-menu button.is-danger:focus-visible {
    color: #fff;
    background: rgba(239, 75, 98, .18);
}
.tagin-shout-menu button.is-danger:hover i,
.tagin-shout-menu button.is-danger:focus-visible i {
    color: #ff7184;
}
.tagin-shout-menu button:disabled {
    opacity: .45;
    cursor: default;
    transform: none;
}
@media (max-width: 575.98px) {
    .tagin-shout-menu {
        min-width: 176px !important;
    }
    .tagin-shout-menu button {
        min-height: 34px;
        padding: 0 9px;
        font-size: 10px;
    }
}
.tagin-swipe-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:38px 24px;
    text-align:center;
    color:#7c84a2;
}
.tagin-swipe-empty i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    border-radius:50%;
    font-size:1.45rem;
    color:#6d63ff;
    background:linear-gradient(180deg,#f6f8ff 0%,#eef2ff 100%);
    border:1px solid rgba(109,99,255,.15);
    box-shadow:0 12px 28px rgba(109,99,255,.08);
}
.tagin-swipe-empty strong{
    font-size:1rem;
    font-weight:700;
    color:#222844;
    line-height:1.2;
}
.tagin-swipe-empty span{
    max-width:260px;
    font-size:.9rem;
    line-height:1.5;
    color:#7c84a2;
}

/* ==================== PAGE: MEET ==================== */
.tagin-meet-page {
    --meet-ink: #11152d;
    --meet-muted: #758097;
    --meet-line: rgba(17, 21, 45, .09);
    --meet-primary: var(--app-primary, #5578ff);
    --meet-secondary: var(--app-secondary, #7b5cff);
    width: 100%;
    color: var(--meet-ink);
}
.tagin-meet-page button,
.tagin-meet-page a {
    -webkit-tap-highlight-color: transparent;
}
.tagin-meet-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 180px;
    margin-bottom: 16px;
    padding: 30px 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 28px;
    background: radial-gradient(circle at 90% 10%, rgba(123, 92, 255, .19), transparent 28%), radial-gradient(circle at 10% 110%, rgba(85, 120, 255, .15), transparent 36%), rgba(250, 251, 255, .94);
    box-shadow: 0 20px 54px rgba(30, 39, 95, .14);
    backdrop-filter: blur(22px);
}
.tagin-meet-hero::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -92px;
    width: 260px;
    height: 260px;
    border: 34px solid rgba(85, 120, 255, .055);
    border-radius: 50%;
}
.tagin-meet-hero-copy,
.tagin-meet-hero-visual {
    position: relative;
    z-index: 1;
}
.tagin-meet-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--meet-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.tagin-meet-hero h1 {
    margin: 0 0 9px;
    color: var(--meet-ink);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.055em;
}
.tagin-meet-hero p {
    max-width: 680px;
    margin: 0;
    color: var(--meet-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
}
.tagin-meet-hero-visual {
    display: flex;
    align-items: center;
    min-width: 260px;
}
.tagin-meet-hero-wave,
.tagin-meet-hero-handshake {
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    color: #fff;
    font-size: 28px;
    border: 7px solid rgba(255, 255, 255, .72);
    border-radius: 26px;
    box-shadow: 0 18px 38px rgba(42, 51, 119, .2);
}
.tagin-meet-hero-wave {
    background: linear-gradient(135deg, #ffb84f, #ff7f62);
    transform: rotate(-7deg);
}
.tagin-meet-hero-handshake {
    background: linear-gradient(135deg, var(--meet-primary), var(--meet-secondary));
    transform: rotate(7deg);
}
.tagin-meet-hero-line {
    width: 75px;
    height: 3px;
    background: linear-gradient(90deg, #ff9d57, var(--meet-primary));
    box-shadow: 0 0 0 6px rgba(85, 120, 255, .06);
}
.tagin-meet-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}
.tagin-meet-tab {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 78px;
    padding: 12px 14px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 22px;
    background: rgba(250, 251, 255, .9);
    box-shadow: 0 13px 34px rgba(30, 39, 95, .09);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tagin-meet-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(85, 120, 255, .24);
    box-shadow: 0 18px 40px rgba(30, 39, 95, .13);
}
.tagin-meet-tab.is-active {
    border-color: rgba(85, 120, 255, .3);
    background: linear-gradient(135deg, rgba(85, 120, 255, .13), rgba(123, 92, 255, .08)), #fff;
    box-shadow: 0 17px 42px rgba(65, 74, 157, .16);
}
.tagin-meet-tab-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: var(--meet-primary);
    font-size: 18px;
    background: rgba(85, 120, 255, .1);
    border-radius: 16px;
}
.tagin-meet-tab.is-active .tagin-meet-tab-icon {
    color: #fff;
    background: linear-gradient(135deg, var(--meet-primary), var(--meet-secondary));
    box-shadow: 0 9px 20px rgba(85, 120, 255, .25);
}
.tagin-meet-tab-copy {
    min-width: 0;
}
.tagin-meet-tab-copy strong,
.tagin-meet-tab-copy small {
    display: block;
}
.tagin-meet-tab-copy strong {
    margin-bottom: 3px;
    color: var(--meet-ink);
    font-size: 14px;
    font-weight: 900;
}
.tagin-meet-tab-copy small {
    overflow: hidden;
    color: var(--meet-muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
}
.tagin-meet-tab-count {
    display: grid;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    place-items: center;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    background: #ff3b4f;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(255, 59, 79, .26);
}
.tagin-meet-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 20px;
    background: rgba(250, 251, 255, .82);
    box-shadow: 0 10px 30px rgba(30, 39, 95, .08);
}
.tagin-meet-summary > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.tagin-meet-summary-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--meet-primary);
    background: rgba(85, 120, 255, .1);
    border-radius: 14px;
}
.tagin-meet-summary strong,
.tagin-meet-summary p {
    display: block;
}
.tagin-meet-summary strong {
    margin-bottom: 2px;
    color: var(--meet-ink);
    font-size: 13px;
    font-weight: 900;
}
.tagin-meet-summary p {
    margin: 0;
    color: var(--meet-muted);
    font-size: 11px;
    font-weight: 650;
}
.tagin-meet-discover-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--meet-primary);
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
}
.tagin-meet-content {
    position: relative;
    min-height: 280px;
}
.tagin-meet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.tagin-meet-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 260px;
    color: var(--meet-muted);
}
.tagin-meet-loading-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--meet-primary), var(--meet-secondary));
    border-radius: 17px;
    animation: taginMeetPulse 1.15s ease-in-out infinite alternate;
}
.tagin-meet-loading strong,
.tagin-meet-loading small {
    display: block;
}
.tagin-meet-loading strong {
    color: var(--meet-ink);
    font-size: 13px;
    font-weight: 900;
}
.tagin-meet-loading small {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 650;
}
.tagin-meet-card {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 24px;
    background: rgba(250, 251, 255, .94);
    box-shadow: 0 15px 40px rgba(30, 39, 95, .11);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tagin-meet-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 21px 50px rgba(30, 39, 95, .16);
}
.tagin-meet-card-photo {
    position: relative;
    display: block;
    min-height: 210px;
    overflow: hidden;
    background: #e4e8f5;
}
.tagin-meet-card-photo img {
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
}
.tagin-meet-card-signal {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    font-size: 14px;
    background: linear-gradient(135deg, #ffb84f, #ff7f62);
    border: 4px solid #fff;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(31, 38, 93, .22);
}
.tagin-meet-card-signal.is-spark {
    background: linear-gradient(135deg, #ffb84f, #ff667a);
}
.tagin-meet-card-signal.is-connected {
    background: linear-gradient(135deg, var(--meet-primary), var(--meet-secondary));
}
.tagin-meet-card-signal.is-blocked {
    color: #687188;
    background: #e9ecf4;
}
.tagin-meet-card-body {
    display: flex;
    min-width: 0;
    padding: 18px;
    flex-direction: column;
}
.tagin-meet-card-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--meet-primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.tagin-meet-card-heading h2 {
    margin: 0 0 5px;
    color: var(--meet-ink);
    font-size: 19px;
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -.03em;
}
.tagin-meet-card-heading h2 a {
    color: inherit;
    text-decoration: none;
}
.tagin-meet-card-heading p {
    margin: 0;
    color: var(--meet-muted);
    font-size: 10px;
    font-weight: 700;
}
.tagin-meet-card-heading p i {
    margin-right: 4px;
    color: var(--meet-primary);
}
.tagin-meet-activity {
    margin-left: 5px;
}
.tagin-meet-card-bio {
    display: -webkit-box;
    margin: 13px 0 16px;
    overflow: hidden;
    color: #525d75;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.52;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.tagin-meet-card-bio.is-muted {
    color: var(--meet-muted);
}
.tagin-meet-connected-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: auto 0 12px;
    padding: 8px 10px;
    color: var(--meet-primary);
    font-size: 9px;
    font-weight: 800;
    background: rgba(85, 120, 255, .08);
    border-radius: 11px;
}
.tagin-meet-connected-note.is-blocked {
    color: #6b7386;
    background: rgba(101, 111, 135, .09);
}
.tagin-meet-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.tagin-meet-card-actions button,
.tagin-meet-card-actions a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1 1 0;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}
.tagin-meet-pass-button,
.tagin-meet-profile-button {
    color: #667086;
    border: 1px solid rgba(17, 21, 45, .1);
    background: #fff;
}
.tagin-meet-wave-button,
.tagin-meet-message-button,
.tagin-meet-unblock-button {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--meet-primary), var(--meet-secondary));
    box-shadow: 0 8px 18px rgba(85, 120, 255, .22);
}
.tagin-meet-unblock-button {
    flex: 0 0 auto !important;
    min-width: 120px;
    margin-left: auto;
}
.tagin-meet-card-actions .is-loading i,
.tagin-meet-primary-button.is-loading i {
    animation: taginMeetSpin .8s linear infinite;
}
.tagin-meet-empty {
    display: flex;
    min-height: 310px;
    padding: 38px 24px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border: 1px dashed rgba(85, 120, 255, .25);
    border-radius: 25px;
    background: rgba(250, 251, 255, .72);
}
.tagin-meet-empty > span {
    display: grid;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    place-items: center;
    color: var(--meet-primary);
    font-size: 27px;
    background: rgba(85, 120, 255, .1);
    border-radius: 24px;
}
.tagin-meet-empty h2 {
    margin: 0 0 8px;
    color: var(--meet-ink);
    font-size: 21px;
    font-weight: 950;
    letter-spacing: -.035em;
}
.tagin-meet-empty p {
    max-width: 430px;
    margin: 0 0 18px;
    color: var(--meet-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.6;
}
.tagin-meet-unblock-modal {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: none;
    padding: 18px;
    align-items: center;
    justify-content: center;
    background: rgba(8, 11, 29, .72);
    backdrop-filter: blur(11px);
}
.tagin-meet-unblock-modal.is-open {
    display: flex;
}
.tagin-meet-unblock-panel {
    position: relative;
    width: min(560px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 27px;
    background: #f8f9ff;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .34);
    animation: taginMeetModalIn .22s ease-out;
}
.tagin-meet-unblock-accent {
    height: 6px;
    background: linear-gradient(90deg, var(--meet-primary), var(--meet-secondary), #ff8c69);
}
.tagin-meet-unblock-panel header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 36px;
    align-items: start;
    gap: 14px;
    padding: 24px 24px 18px;
}
.tagin-meet-unblock-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(135deg, var(--meet-primary), var(--meet-secondary));
    border-radius: 18px;
}
.tagin-meet-unblock-panel header h2 {
    margin: 0 0 6px;
    color: var(--meet-ink);
    font-size: 23px;
    font-weight: 950;
    letter-spacing: -.04em;
}
.tagin-meet-unblock-panel header p {
    margin: 0;
    color: var(--meet-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.55;
}
.tagin-meet-unblock-panel header > button {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    color: #6e778b;
    border: 0;
    border-radius: 12px;
    background: rgba(17, 21, 45, .06);
    cursor: pointer;
}
.tagin-meet-unblock-body {
    padding: 0 24px 22px;
}
.tagin-meet-unblock-impact {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 9px;
    padding: 12px 13px;
    color: #4f5970;
    font-size: 11px;
    font-weight: 700;
    background: #fff;
    border: 1px solid rgba(17, 21, 45, .07);
    border-radius: 14px;
}
.tagin-meet-unblock-impact i {
    width: 20px;
    color: var(--meet-primary);
    text-align: center;
}
.tagin-meet-unblock-note {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 13px;
    color: #616b82;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
    background: rgba(85, 120, 255, .08);
    border-radius: 14px;
}
.tagin-meet-error {
    margin-top: 12px;
    padding: 10px 12px;
    color: #a2283c;
    font-size: 10px;
    font-weight: 750;
    background: rgba(255, 59, 79, .1);
    border-radius: 11px;
}
.tagin-meet-unblock-panel footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 16px 24px 22px;
    border-top: 1px solid rgba(17, 21, 45, .07);
}
.tagin-meet-secondary-button,
.tagin-meet-primary-button {
    display: inline-flex;
    min-height: 42px;
    padding: 0 17px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}
.tagin-meet-secondary-button {
    color: #626c82;
    border: 1px solid rgba(17, 21, 45, .1);
    background: #fff;
}
.tagin-meet-primary-button {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--meet-primary), var(--meet-secondary));
    box-shadow: 0 9px 20px rgba(85, 120, 255, .24);
}
body.tagin-meet-modal-open {
    overflow: hidden;
}
@keyframes taginMeetPulse {
    from { transform: scale(.94); opacity: .7; }
    to { transform: scale(1.04); opacity: 1; }
}
@keyframes taginMeetSpin {
    to { transform: rotate(360deg); }
}
@keyframes taginMeetModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1199.98px) {
    .tagin-meet-card {
        grid-template-columns: 126px minmax(0, 1fr);
    }
    .tagin-meet-card-photo,
    .tagin-meet-card-photo img {
        min-height: 200px;
    }
}
@media (max-width: 991.98px) {
    .tagin-meet-page {
        padding-bottom: calc(var(--tagin-footer-height, 86px) + 18px);
    }
    .tagin-meet-hero {
        min-height: 156px;
        padding: 25px;
    }
    .tagin-meet-hero-visual {
        min-width: 210px;
    }
    .tagin-meet-hero-wave,
    .tagin-meet-hero-handshake {
        width: 64px;
        height: 64px;
        font-size: 23px;
        border-radius: 21px;
    }
    .tagin-meet-hero-line {
        width: 55px;
    }
    .tagin-meet-grid {
        grid-template-columns: 1fr;
    }
    .tagin-meet-card {
        grid-template-columns: 155px minmax(0, 1fr);
    }
}
@media (max-width: 767.98px) {
    .tagin-meet-hero {
        min-height: 0;
        padding: 22px 20px;
        border-radius: 23px;
    }
    .tagin-meet-hero-visual {
        display: none;
    }
    .tagin-meet-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }
    .tagin-meet-tab {
        display: flex;
        min-height: 66px;
        padding: 9px 7px;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        text-align: center;
        border-radius: 18px;
    }
    .tagin-meet-tab-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
        border-radius: 12px;
    }
    .tagin-meet-tab-copy strong {
        margin: 0;
        font-size: 10px;
    }
    .tagin-meet-tab-copy small {
        display: none;
    }
    .tagin-meet-tab-count {
        position: absolute;
        top: 5px;
        right: 7px;
        min-width: 19px;
        height: 19px;
        padding: 0 4px;
        font-size: 8px;
    }
    .tagin-meet-summary {
        padding: 13px 14px;
    }
    .tagin-meet-summary-icon {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
    }
    .tagin-meet-summary p {
        display: none;
    }
    .tagin-meet-discover-link span {
        display: none;
    }
    .tagin-meet-card {
        grid-template-columns: 118px minmax(0, 1fr);
        border-radius: 21px;
    }
    .tagin-meet-card-photo,
    .tagin-meet-card-photo img {
        min-height: 190px;
    }
    .tagin-meet-card-body {
        padding: 14px;
    }
    .tagin-meet-card-heading h2 {
        font-size: 17px;
    }
    .tagin-meet-card-bio {
        margin: 10px 0 12px;
        font-size: 10px;
        -webkit-line-clamp: 2;
    }
    .tagin-meet-card-actions {
        gap: 6px;
    }
    .tagin-meet-card-actions button,
    .tagin-meet-card-actions a {
        min-height: 36px;
        padding: 0 9px;
        font-size: 9px;
    }
}
@media (max-width: 480px) {
    .tagin-meet-page {
        margin: -4px;
        width: calc(100% + 8px);
    }
    .tagin-meet-hero {
        margin-bottom: 10px;
        padding: 19px 17px;
        border-radius: 20px;
    }
    .tagin-meet-hero h1 {
        font-size: 32px;
    }
    .tagin-meet-hero p {
        font-size: 11px;
        line-height: 1.55;
    }
    .tagin-meet-tabs {
        margin-bottom: 10px;
    }
    .tagin-meet-summary {
        margin-bottom: 10px;
        border-radius: 17px;
    }
    .tagin-meet-card {
        grid-template-columns: 104px minmax(0, 1fr);
    }
    .tagin-meet-card-photo,
    .tagin-meet-card-photo img {
        min-height: 178px;
    }
    .tagin-meet-card-body {
        padding: 12px;
    }
    .tagin-meet-card-kicker {
        font-size: 7px;
    }
    .tagin-meet-card-heading h2 {
        font-size: 15px;
    }
    .tagin-meet-card-heading p {
        font-size: 8px;
    }
    .tagin-meet-card-bio {
        font-size: 9px;
    }
    .tagin-meet-connected-note {
        padding: 7px 8px;
        font-size: 8px;
    }
    .tagin-meet-card-actions button,
    .tagin-meet-card-actions a {
        min-height: 33px;
        padding: 0 7px;
        font-size: 8px;
    }
    .tagin-meet-card-actions span {
        white-space: nowrap;
    }
    .tagin-meet-unblock-modal {
        padding: 10px;
        align-items: flex-end;
    }
    .tagin-meet-unblock-panel {
        border-radius: 24px 24px 18px 18px;
    }
    .tagin-meet-unblock-panel header {
        grid-template-columns: 46px minmax(0, 1fr) 32px;
        padding: 20px 17px 15px;
    }
    .tagin-meet-unblock-icon {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }
    .tagin-meet-unblock-panel header h2 {
        font-size: 20px;
    }
    .tagin-meet-unblock-body {
        padding: 0 17px 17px;
    }
    .tagin-meet-unblock-panel footer {
        padding: 14px 17px 18px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tagin-meet-card,
    .tagin-meet-tab,
    .tagin-meet-loading-mark,
    .tagin-meet-unblock-panel {
        animation: none !important;
        transition: none !important;
    }
}

/* ==================== CITY FEED: HIDDEN & SAVED STATES ==================== */
.tagin-shout-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.tagin-shout-saved-badge {
    display: inline-flex;
    min-height: 28px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--app-primary, #5578ff);
    font-size: 9px;
    font-weight: 850;
    background: rgba(85, 120, 255, .1);
    border: 1px solid rgba(85, 120, 255, .14);
    border-radius: 999px;
}
.tagin-shout-saved-badge i {
    font-size: 9px;
}
.tagin-shout-card-hidden {
    min-height: 142px;
}
.tagin-shout-card-hidden .tagin-shout-header {
    padding-bottom: 10px;
}
.tagin-shout-hidden-copy {
    padding: 0px;
    font-size: 13px;
    font-weight: 750;
}
@media (max-width: 767.98px) {
    .tagin-shout-saved-badge {
        min-height: 25px;
        padding: 0 8px;
        font-size: 8px;
    }
    .tagin-shout-card-hidden {
        min-height: 126px;
    }
    .tagin-shout-hidden-copy {
        padding: 0 17px 20px;
        font-size: 12px;
    }
}

/* ==================== CITY FEED: EVENT POSTS ==================== */
.tagin-event-feed-confirmation {
    margin-top: 10px;
}
.tagin-event-feed-confirmation strong {
    color: var(--app-dark, #101328);
}
.tagin-shout-event-card {
    display: grid;
    grid-template-columns: minmax(210px, 34%) minmax(0, 1fr);
    overflow: hidden;
    color: inherit;
    border: 1px solid rgba(85, 120, 255, .12);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(85, 120, 255, .045), rgba(123, 92, 255, .07)), #fff;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(31, 39, 95, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tagin-shout-event-card:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(31, 39, 95, .14);
}
.tagin-shout-event-cover {
    position: relative;
    min-height: 240px;
    overflow: hidden;
    background: #dfe5f4;
}
.tagin-shout-event-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 15, 39, .02), rgba(11, 15, 39, .42));
}
.tagin-shout-event-cover img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}
.tagin-shout-event-category,
.tagin-shout-event-date {
    position: absolute;
    z-index: 1;
}
.tagin-shout-event-category {
    top: 14px;
    left: 14px;
    display: inline-flex;
    min-height: 30px;
    padding: 0 11px;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 9px;
    font-weight: 850;
    background: rgba(17, 21, 45, .78);
    border-radius: 999px;
    backdrop-filter: blur(10px);
}
.tagin-shout-event-date {
    right: 14px;
    bottom: 14px;
    display: grid;
    width: 58px;
    height: 62px;
    place-items: center;
    color: var(--app-primary, #5578ff);
    line-height: 1;
    background: rgba(255, 255, 255, .95);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(12, 17, 48, .2);
}
.tagin-shout-event-date strong {
    align-self: end;
    font-size: 9px;
    letter-spacing: .08em;
}
.tagin-shout-event-date span {
    align-self: start;
    font-size: 23px;
    font-weight: 950;
}
.tagin-shout-event-content {
    display: flex;
    min-width: 0;
    padding: 20px;
    flex-direction: column;
}
.tagin-shout-event-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.tagin-shout-event-title-row > div > span {
    display: block;
    margin-bottom: 5px;
    color: var(--app-primary, #5578ff);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.tagin-shout-event-title-row h4 {
    margin: 0;
    color: var(--app-dark, #101328);
    font-size: clamp(20px, 2.4vw, 29px);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -.035em;
}
.tagin-shout-event-title-row > i {
    margin-top: 8px;
    color: var(--app-primary, #5578ff);
}
.tagin-shout-event-meta {
    display: flex;
    margin: 12px 0;
    flex-wrap: wrap;
    gap: 8px 15px;
    color: #69758c;
    font-size: 10px;
    font-weight: 700;
}
.tagin-shout-event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tagin-shout-event-meta i {
    color: var(--app-primary, #5578ff);
}
.tagin-shout-event-content > p {
    display: -webkit-box;
    margin: 0 0 16px;
    overflow: hidden;
    color: #515d74;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.tagin-shout-event-footer {
    display: flex;
    margin-top: auto;
    padding-top: 14px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    border-top: 1px solid rgba(17, 21, 45, .08);
}
.tagin-shout-event-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #677289;
    font-size: 9px;
    font-weight: 750;
}
.tagin-shout-event-footer span i {
    color: var(--app-primary, #5578ff);
}
.tagin-shout-event-footer strong {
    margin-left: auto;
    color: var(--app-primary, #5578ff);
    font-size: 10px;
    font-weight: 900;
}
.tagin-shout-event-unavailable {
    display: flex;
    min-height: 110px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #717b91;
    font-size: 11px;
    font-weight: 750;
    background: rgba(17, 21, 45, .04);
    border-radius: 16px;
}
@media (max-width: 767.98px) {
    .tagin-shout-event-card {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }
    .tagin-shout-event-cover,
    .tagin-shout-event-cover img {
        min-height: 205px;
        max-height: 225px;
    }
    .tagin-shout-event-content {
        padding: 16px;
    }
    .tagin-shout-event-title-row h4 {
        font-size: 21px;
    }
    .tagin-shout-event-footer strong {
        width: 100%;
        margin: 2px 0 0;
        padding: 10px 12px;
        text-align: center;
        color: #fff;
        background: linear-gradient(135deg, var(--app-primary, #5578ff), var(--app-secondary, #7b5cff));
        border-radius: 11px;
    }
}
.tagin-plan-widget-link {
    color: inherit;
    text-decoration: none;
    transition: background .18s ease;
}
.tagin-plan-widget-link:hover {
    color: inherit;
    background: rgba(85, 120, 255, .045);
}
.tagin-plan-widget-link:focus-visible {
    outline: 2px solid var(--app-primary, #5578ff);
    outline-offset: -2px;
}
.tagin-plans-empty {
    display: flex;
    min-height: 220px;
    padding: 28px 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #8d9ab0;
}
.tagin-plans-empty > i {
    display: grid;
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    place-items: center;
    color: var(--app-primary, #5578ff);
    font-size: 19px;
    background: rgba(85, 120, 255, .1);
    border-radius: 17px;
}
.tagin-plans-empty strong {
    margin-bottom: 4px;
    color: #101328;
    font-size: 13px;
    font-weight: 900;
}
.tagin-plans-empty span {
    margin-bottom: 13px;
    font-size: 11px;
    font-weight: 700;
}
.tagin-plans-empty a {
    color: var(--app-primary, #5578ff);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}
.tagin-plan-hosting-pill {
    display: inline-flex;
    min-height: 22px;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #e63946;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(230, 57, 70, .11);
    border: 1px solid rgba(230, 57, 70, .16);
    border-radius: 999px;
    margin-bottom: 4px;
}
.tagin-plan-hosting-pill i {
    color: #e63946;
}
.tagin-plan-widget-link .tagin-event-top {
    display: block;
}

/* ==================== PAGE: SAVED ITEMS ==================== */
.tagin-saved-page {
    width: 100%;
    padding-bottom: 24px;
}
.tagin-saved-hero {
    position: relative;
    min-height: 170px;
    margin-bottom: 15px;
    padding: 30px 34px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    color: #11152d;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 28px;
    background: radial-gradient(circle at 88% 20%, rgba(123, 92, 255, .18), transparent 28%), radial-gradient(circle at 10% 110%, rgba(85, 120, 255, .14), transparent 35%), rgba(250, 251, 255, .94);
    box-shadow: 0 20px 54px rgba(30, 39, 95, .14);
}
.tagin-saved-eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    align-items: center;
    gap: 7px;
    color: var(--app-primary, #5578ff);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.tagin-saved-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(38px, 5vw, 54px);
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.055em;
}
.tagin-saved-hero p {
    margin: 0;
    color: #758097;
    font-size: 14px;
    font-weight: 650;
}
.tagin-saved-hero-visual {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tagin-saved-hero-visual span {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    color: #fff;
    font-size: 25px;
    border: 6px solid rgba(255, 255, 255, .7);
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(42, 51, 119, .2);
}
.tagin-saved-hero-visual span:first-child {
    background: linear-gradient(135deg, #5578ff, #7b5cff);
    transform: rotate(-7deg);
}
.tagin-saved-hero-visual span:last-child {
    background: linear-gradient(135deg, #ff6b6b, #e63946);
    transform: rotate(7deg);
}
.tagin-saved-controller {
    display: flex;
    margin-bottom: 15px;
    padding: 13px 15px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 22px;
    background: rgba(250, 251, 255, .92);
    box-shadow: 0 13px 34px rgba(30, 39, 95, .1);
}
.tagin-saved-controller-copy {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.tagin-saved-controller-icon {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    place-items: center;
    color: var(--app-primary, #5578ff);
    background: rgba(85, 120, 255, .1);
    border-radius: 14px;
}
.tagin-saved-controller-copy strong,
.tagin-saved-controller-copy small {
    display: block;
}
.tagin-saved-controller-copy strong {
    margin-bottom: 2px;
    color: #11152d;
    font-size: 13px;
    font-weight: 900;
}
.tagin-saved-controller-copy small {
    color: #7b869c;
    font-size: 10px;
    font-weight: 650;
}
.tagin-saved-tabs {
    display: flex;
    padding: 4px;
    gap: 4px;
    flex: 0 0 auto;
    background: rgba(85, 120, 255, .07);
    border: 1px solid rgba(85, 120, 255, .1);
    border-radius: 15px;
}
.tagin-saved-tab {
    display: inline-flex;
    min-height: 36px;
    padding: 0 13px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #778196;
    font-size: 10px;
    font-weight: 850;
    border: 0;
    border-radius: 11px;
    background: transparent;
    cursor: pointer;
}
.tagin-saved-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary, #5578ff), #7b5cff);
    box-shadow: 0 8px 17px rgba(85, 120, 255, .22);
}
.tagin-saved-stream {
    width: 100%;
}
.tagin-saved-item {
    position: relative;
    margin-bottom: 15px;
    transition: opacity .2s ease, transform .2s ease;
}
.tagin-saved-item.is-removing {
    opacity: .42;
    transform: scale(.985);
    pointer-events: none;
}
.tagin-saved-item-label {
    display: flex;
    margin: 0 4px 7px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #7b869c;
    font-size: 9px;
    font-weight: 800;
}
.tagin-saved-item-label span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--app-primary, #5578ff);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.tagin-saved-item-label small {
    font-size: 9px;
    font-weight: 700;
}
.tagin-saved-item > .tagin-shout-card,
.tagin-saved-item > .tagin-event-card {
    margin-bottom: 0 !important;
}
.tagin-saved-loader {
    display: flex;
    min-height: 130px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #7b869c;
}
.tagin-saved-loader > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary, #5578ff), #7b5cff);
    border-radius: 15px;
    animation: taginSavedPulse 1s ease-in-out infinite alternate;
}
.tagin-saved-loader strong,
.tagin-saved-loader small {
    display: block;
}
.tagin-saved-loader strong {
    color: #11152d;
    font-size: 12px;
    font-weight: 900;
}
.tagin-saved-loader small {
    margin-top: 2px;
    font-size: 9px;
    font-weight: 650;
}
.tagin-saved-empty {
    display: flex;
    min-height: 390px;
    padding: 38px 24px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border: 1px dashed rgba(85, 120, 255, .25);
    border-radius: 26px;
    background: rgba(250, 251, 255, .72);
}
.tagin-saved-empty > span {
    display: grid;
    width: 74px;
    height: 74px;
    margin-bottom: 16px;
    place-items: center;
    color: var(--app-primary, #5578ff);
    font-size: 27px;
    background: rgba(85, 120, 255, .1);
    border-radius: 24px;
}
.tagin-saved-empty h2 {
    margin: 0 0 8px;
    color: #11152d;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.035em;
}
.tagin-saved-empty p {
    max-width: 430px;
    margin: 0 0 18px;
    color: #758097;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.6;
}
.tagin-saved-empty > div {
    display: flex;
    gap: 8px;
}
.tagin-saved-secondary {
    color: #667086;
    border: 1px solid rgba(17, 21, 45, .1);
    background: #fff;
}
.tagin-saved-sentinel {
    height: 1px;
}
@keyframes taginSavedPulse {
    from { opacity: .65; transform: scale(.94); }
    to { opacity: 1; transform: scale(1.04); }
}
@media (max-width: 767.98px) {
    .tagin-saved-page {
        padding-bottom: calc(var(--tagin-footer-height, 86px) + 16px);
    }
    .tagin-saved-controller {
        display: block;
        padding: 12px;
        border-radius: 19px;
    }
    .tagin-saved-controller-copy {
        display: none;
    }
    .tagin-saved-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .tagin-saved-tab {
        min-width: 0;
        padding: 0 8px;
        font-size: 9px;
    }
    .tagin-saved-item-label {
        margin-right: 3px;
        margin-left: 3px;
    }
    .tagin-saved-empty {
        min-height: 320px;
        border-radius: 22px;
    }
    .tagin-saved-empty > div {
        width: 100%;
        flex-direction: column;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tagin-saved-item,
    .tagin-saved-loader > span {
        transition: none !important;
        animation: none !important;
    }
}
.tagin-saved-page {
    --events-primary: var(--app-primary, #6667f5);
    --events-secondary: var(--app-secondary, #7658dc);
    --events-blue: #3988f5;
    --events-dark: #11152e;
    --events-muted: #747c9b;
    --events-bg: #e8edff;
    --events-card: rgba(255, 255, 255, .88);
    --events-border: rgba(82, 91, 166, .12);
    --events-shadow: 0 14px 32px rgba(45, 52, 112, .10);
    width: 100%;
    color: var(--events-dark);
}
.tagin-event-host-link {
    color: inherit;
    text-decoration: none;
}
.tagin-event-host-link:hover {
    color: var(--events-primary);
}
.tagin-event-host-row > .tagin-event-host-link:first-child {
    width: 38px;
    height: 38px;
    margin-right: 9px;
    flex: 0 0 38px;
}
.tagin-event-host-row > .tagin-event-host-link:first-child img {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 11px rgba(29, 35, 82, .14);
}

/* ==================== CITY FEED: PLANNED & SPONTANEOUS SHOUTS ==================== */
.tagin-shout-plan,
.tagin-manage-plan {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 15px;
    color: #20253b;
    background: linear-gradient(135deg, rgba(85, 120, 255, .08), rgba(123, 92, 255, .055));
    border: 1px solid rgba(85, 120, 255, .14);
    border-radius: 17px;
}
.tagin-shout-plan[hidden],
.tagin-manage-plan[hidden] { display: none !important; }
.tagin-shout-plan-heading,
.tagin-manage-plan-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}
.tagin-shout-plan-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--cityfeed-primary, #5578ff), #7b5cff);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(85, 120, 255, .22);
}
.tagin-shout-plan-heading > div,
.tagin-manage-plan-heading > div { display: grid; gap: 2px; }
.tagin-shout-plan-heading strong,
.tagin-manage-plan-heading strong { font-size: 12px; font-weight: 900; }
.tagin-shout-plan-heading small,
.tagin-manage-plan-heading span { color: #7d879d; font-size: 10px; line-height: 1.4; }
.tagin-shout-plan-spontaneous,
.tagin-manage-plan-spontaneous {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(16, 19, 40, .08);
    border-radius: 13px;
}
.tagin-shout-plan-spontaneous input,
.tagin-manage-plan-spontaneous input { position: absolute; opacity: 0; pointer-events: none; }
.tagin-shout-plan-check,
.tagin-manage-plan-check {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    place-items: center;
    color: transparent;
    font-size: 10px;
    background: #fff;
    border: 2px solid rgba(85, 120, 255, .28);
    border-radius: 8px;
    transition: .16s ease;
}
.tagin-shout-plan-spontaneous input:checked + .tagin-shout-plan-check,
.tagin-manage-plan-spontaneous input:checked + .tagin-manage-plan-check {
    color: #fff;
    background: linear-gradient(135deg, var(--cityfeed-primary, #5578ff), #7b5cff);
    border-color: transparent;
}
.tagin-shout-plan-spontaneous > span:last-child,
.tagin-manage-plan-spontaneous > span:last-child { display: grid; gap: 2px; }
.tagin-shout-plan-spontaneous strong,
.tagin-manage-plan-spontaneous strong { font-size: 11px; font-weight: 900; }
.tagin-shout-plan-spontaneous small,
.tagin-manage-plan-spontaneous small { color: #8992a8; font-size: 9px; }
.tagin-shout-plan-datetime {
    display: grid;
    gap: 7px;
    margin: 0;
}
.tagin-shout-plan-datetime > span { font-size: 10px; font-weight: 850; }
.tagin-shout-plan-datetime input,
.tagin-manage-plan input[type="datetime-local"] {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    color: #20253b;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 1px solid rgba(85, 120, 255, .22);
    border-radius: 12px;
    outline: 0;
}
.tagin-shout-plan-datetime input:focus,
.tagin-manage-plan input[type="datetime-local"]:focus {
    border-color: #617cff;
    box-shadow: 0 0 0 4px rgba(85, 120, 255, .11);
}
.tagin-shout-plan-datetime.is-disabled,
.tagin-manage-field.is-disabled { opacity: .48; }
@media (max-width: 767.98px) {
    .tagin-shout-plan { margin-right: 2px; margin-left: 2px; padding: 13px; }
}

/* ==================== EVENTS: SCOPE DROPDOWN ==================== */
.tagin-event-scope-wrap {
    position: relative;
    z-index: 120;
}
.tagin-event-scope-trigger {
    min-width: 205px;
}
.tagin-event-scope-wrap.is-open .tagin-event-scope-trigger {
    border-color: rgba(85, 120, 255, 0.38);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(16, 19, 40, 0.16);
}
.tagin-event-scope-wrap.is-open .tagin-event-scope-trigger .tagin-toolbar-chevron {
    transform: rotate(180deg);
}
.tagin-event-scope-menu {
    overflow: hidden;
    min-width: 250px;
    max-height: min(420px, calc(100dvh - 24px));
    padding: 8px;
    border: 1px solid rgba(85, 120, 255, 0.18);
    border-radius: 16px;
    background: rgba(247, 248, 255, 0.99);
    box-shadow: 0 22px 55px rgba(16, 19, 40, 0.24);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow-y: auto;
}
.tagin-event-scope-menu[hidden] {
    display: none !important;
}
.tagin-event-scope-menu [data-event-scope-option] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #56617b;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.tagin-event-scope-menu [data-event-scope-option] > i {
    color: #657dff;
    text-align: center;
}
.tagin-event-scope-menu [data-event-scope-option]::after {
    content: "";
    justify-self: end;
}
.tagin-event-scope-menu [data-event-scope-option]:hover {
    color: #344153;
    background: rgba(85, 120, 255, 0.09);
}
.tagin-event-scope-menu [data-event-scope-option].active {
    color: #365ce8;
    background: rgba(85, 120, 255, 0.13);
}
@media (max-width: 575.98px) {
    .tagin-event-scope-wrap {
        width: 100%;
    }
    .tagin-event-scope-trigger {
        width: 100%;
        min-width: 0;
    }
    .tagin-event-scope-menu {
        min-width: 0;
    }
}
.tagin-bug-report-page {
    --bug-primary: #5578ff;
    --bug-ink: #11162f;
    --bug-muted: #7a869f;
    width: 100%;
    margin: 0 auto;
}
.tagin-bug-report-hero,
.tagin-bug-report-card,
.tagin-bug-report-success {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    background: rgba(248, 249, 255, 0.94);
    box-shadow: 0 20px 55px rgba(20, 27, 66, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.tagin-bug-report-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 28px;
    background:
        radial-gradient(circle at 92% 20%, rgba(122, 104, 255, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(247, 249, 255, 0.98), rgba(232, 236, 255, 0.96));
}
.tagin-bug-report-hero-icon {
    display: grid;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #5578ff, #7657ff);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 14px 30px rgba(85, 120, 255, 0.28);
}
.tagin-bug-report-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--bug-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tagin-bug-report-hero h1 {
    margin: 0 0 5px;
    color: var(--bug-ink);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    letter-spacing: -0.04em;
}
.tagin-bug-report-hero p,
.tagin-bug-report-note p,
.tagin-bug-report-success p {
    margin: 0;
    color: var(--bug-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.6;
}
.tagin-bug-report-card {
    padding: 28px;
}
.tagin-bug-report-field + .tagin-bug-report-field {
    margin-top: 7px;
}
.tagin-bug-report-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--bug-ink);
    font-size: 13px;
    font-weight: 900;
}
.tagin-bug-report-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.tagin-bug-report-label-row > span {
    color: #919bb0;
    font-size: 11px;
    font-weight: 800;
}
.tagin-bug-report-field input[type="text"],
.tagin-bug-report-field textarea {
    display: block;
    width: 100%;
    border: 1px solid rgba(85, 120, 255, 0.16);
    border-radius: 16px;
    outline: 0;
    background: rgba(239, 242, 255, 0.72);
    color: #28334b;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.tagin-bug-report-field input[type="text"] {
    min-height: 52px;
    padding: 0 16px;
}
.tagin-bug-report-field textarea {
    min-height: 190px;
    padding: 15px 16px;
    resize: vertical;
}
.tagin-bug-report-field input:focus,
.tagin-bug-report-field textarea:focus {
    border-color: rgba(85, 120, 255, 0.55);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(85, 120, 255, 0.09);
}
.tagin-bug-report-field input.is-invalid,
.tagin-bug-report-field textarea.is-invalid {
    border-color: rgba(255, 76, 105, 0.66);
    box-shadow: 0 0 0 4px rgba(255, 76, 105, 0.08);
}
.tagin-bug-report-error {
    display: block;
    min-height: 17px;
    margin-top: 6px;
    color: #e84863;
    font-size: 11px;
    font-weight: 800;
}
.tagin-bug-upload-trigger {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px dashed rgba(85, 120, 255, 0.38);
    border-radius: 18px;
    background: rgba(85, 120, 255, 0.055);
    color: var(--bug-ink);
    text-align: left;
    cursor: pointer;
    transition: 0.18s ease;
}
.tagin-bug-upload-trigger:hover {
    border-color: rgba(85, 120, 255, 0.68);
    background: rgba(85, 120, 255, 0.09);
}
.tagin-bug-upload-trigger.is-full {
    opacity: 0.55;
    cursor: default;
}
.tagin-bug-upload-trigger > span:nth-child(2) {
    display: grid;
    flex: 1;
    gap: 3px;
}
.tagin-bug-upload-trigger strong {
    font-size: 13px;
    font-weight: 900;
}
.tagin-bug-upload-trigger small {
    color: var(--bug-muted);
    font-size: 11px;
    font-weight: 700;
}
.tagin-bug-upload-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(85, 120, 255, 0.17), rgba(118, 87, 255, 0.15));
    color: var(--bug-primary);
    font-size: 17px;
}
.tagin-bug-upload-trigger > i {
    color: var(--bug-primary);
}
.tagin-bug-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.tagin-bug-preview {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    border-radius: 17px;
    background: #e9edfa;
}
.tagin-bug-preview img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.tagin-bug-preview button {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 23, 47, 0.78);
    color: #fff;
    cursor: pointer;
}
.tagin-bug-preview > span {
    display: block;
    overflow: hidden;
    padding: 9px 11px;
    color: #56617b;
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tagin-bug-report-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 22px;
    padding: 15px;
    border: 1px solid rgba(85, 120, 255, 0.14);
    border-radius: 16px;
    background: rgba(85, 120, 255, 0.055);
}
.tagin-bug-report-note > i {
    margin-top: 3px;
    color: var(--bug-primary);
}
.tagin-bug-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}
.tagin-bug-submit {
    min-width: 170px;
}
.tagin-bug-submit span {
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tagin-bug-submit span:not([hidden]) {
    display: flex;
}
.tagin-bug-report-success {
    padding: 54px 28px;
    text-align: center;
}
.tagin-bug-report-success-icon {
    display: grid;
    width: 74px;
    height: 74px;
    margin: 0 auto 17px;
    place-items: center;
    border-radius: 24px;
    background: rgba(39, 194, 129, 0.14);
    color: #20ae74;
    font-size: 31px;
}
.tagin-bug-report-success h2 {
    margin: 0 0 8px;
    color: var(--bug-ink);
    font-size: 27px;
    font-weight: 900;
}
.tagin-bug-report-success .btn {
    margin-top: 22px;
}
@media (max-width: 767.98px) {
    .tagin-bug-report-hero {
        align-items: flex-start;
        padding: 21px;
    }
    .tagin-bug-report-hero-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        border-radius: 17px;
    }
    .tagin-bug-report-card {
        padding: 20px;
    }
    .tagin-bug-preview-grid {
        grid-template-columns: 1fr;
    }
    .tagin-bug-report-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .tagin-bug-report-actions .btn {
        width: 100%;
    }
}

/* ==================== CREATE EVENT: CUSTOM DATE & TIME PICKER ==================== */

.tagin-event-date-time-trigger {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 64px;
    padding: 9px 14px 9px 10px;
    border: 1px solid rgba(74,82,147,.14);
    border-radius: 15px;
    background: rgba(246,248,255,.92);
    color: #171b36;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tagin-event-date-time-trigger:hover {
    border-color: rgba(85,120,255,.42);
    background: #fff;
}

.tagin-event-date-time-trigger:focus-visible {
    border-color: rgba(85,120,255,.65);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(85,120,255,.11);
}

.tagin-event-date-time-trigger.is-invalid {
    border-color: #dc5369;
    box-shadow: 0 0 0 4px rgba(220,83,105,.10);
}

.tagin-event-date-time-trigger-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: rgba(85,120,255,.10);
    color: var(--app-primary);
    font-size: 15px;
}

.tagin-event-date-time-trigger.has-value .tagin-event-date-time-trigger-icon {
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: #fff;
}

.tagin-event-date-time-trigger-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.tagin-event-date-time-trigger-copy small {
    color: #949db1;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tagin-event-date-time-trigger-copy strong {
    overflow: hidden;
    color: #303653;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tagin-event-date-time-trigger > i {
    color: #9aa2b5;
    font-size: 10px;
}

.tagin-event-date-time-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    padding: 20px;
    place-items: center;
    opacity: 0;
    transition: opacity .18s ease;
}

.tagin-event-date-time-overlay[hidden] {
    display: none;
}

.tagin-event-date-time-overlay.is-open {
    opacity: 1;
}

.tagin-event-date-time-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,13,32,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tagin-event-date-time-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: min(780px, calc(100dvh - 40px));
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 28px;
    background:
        radial-gradient(circle at 95% -5%, rgba(123,92,255,.12), transparent 34%),
        rgba(248,249,255,.985);
    box-shadow: 0 32px 90px rgba(8,12,40,.38);
    transform: translateY(16px) scale(.98);
    transition: transform .18s ease;
    overscroll-behavior: contain;
}

.tagin-event-date-time-overlay.is-open .tagin-event-date-time-dialog {
    transform: translateY(0) scale(1);
}

.tagin-event-date-time-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 24px 18px;
    border-bottom: 1px solid rgba(74,82,147,.09);
}

.tagin-event-date-time-header span {
    display: block;
    margin-bottom: 4px;
    color: #6973d9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.tagin-event-date-time-header h2 {
    margin: 0;
    color: #171b36;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.035em;
}

.tagin-event-date-time-close,
.tagin-event-calendar-toolbar button {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid rgba(74,82,147,.12);
    border-radius: 13px;
    background: rgba(238,241,252,.9);
    color: #59627c;
    cursor: pointer;
}

.tagin-event-date-time-close:hover,
.tagin-event-calendar-toolbar button:hover:not(:disabled) {
    border-color: rgba(85,120,255,.35);
    background: rgba(85,120,255,.10);
    color: var(--app-primary);
}

.tagin-event-calendar-toolbar button:disabled {
    opacity: .32;
    cursor: default;
}

.tagin-event-date-panel,
.tagin-event-time-panel {
    padding: 20px 24px 12px;
}

.tagin-event-calendar-toolbar {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 40px;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}

.tagin-event-calendar-toolbar strong {
    color: #252a49;
    font-size: 15px;
    font-weight: 900;
    text-align: center;
}

.tagin-event-calendar-weekdays,
.tagin-event-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 6px;
}

.tagin-event-calendar-weekdays {
    margin-bottom: 7px;
}

.tagin-event-calendar-weekdays span {
    color: #949db1;
    font-size: 8px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.tagin-event-calendar-grid button,
.tagin-event-calendar-spacer {
    aspect-ratio: 1 / 1;
}

.tagin-event-calendar-grid button {
    display: grid;
    min-width: 0;
    place-items: center;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #3f4762;
    font-family: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.tagin-event-calendar-grid button:hover:not(:disabled) {
    background: rgba(85,120,255,.09);
    color: var(--app-primary);
    transform: translateY(-1px);
}

.tagin-event-calendar-grid button.is-today {
    box-shadow: inset 0 0 0 1px rgba(85,120,255,.34);
    color: var(--app-primary);
}

.tagin-event-calendar-grid button.active {
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: #fff;
    box-shadow: 0 8px 18px rgba(85,120,255,.22);
}

.tagin-event-calendar-grid button:disabled {
    color: #c3c8d5;
    cursor: default;
}

.tagin-event-time-preview {
    display: flex;
    align-items: baseline;
    justify-content: center;
    min-height: 94px;
    margin-bottom: 18px;
    padding: 17px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 30%),
        linear-gradient(135deg, #303862, #5f57b5);
    color: #fff;
    box-shadow: 0 16px 30px rgba(57,56,126,.19);
}

.tagin-event-time-preview > span {
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
}

.tagin-event-time-preview .tagin-event-time-preview-colon {
    margin: 0 6px;
    opacity: .7;
}

.tagin-event-time-preview small {
    margin-left: 10px;
    color: rgba(255,255,255,.74);
    font-size: 14px;
    font-weight: 900;
}

.tagin-event-time-columns {
    display: grid;
    grid-template-columns: 1fr 1fr .75fr;
    gap: 10px;
}

.tagin-event-time-column > span {
    display: block;
    margin-bottom: 7px;
    color: #9199ad;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.tagin-event-time-options {
    display: grid;
    max-height: 210px;
    padding: 6px;
    gap: 5px;
    overflow-y: auto;
    border: 1px solid rgba(74,82,147,.10);
    border-radius: 15px;
    background: rgba(239,242,252,.72);
    scrollbar-width: thin;
}

.tagin-event-time-options button {
    min-height: 37px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #59627a;
    font-family: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.tagin-event-time-options button:hover {
    background: rgba(85,120,255,.08);
    color: var(--app-primary);
}

.tagin-event-time-options button.active {
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: #fff;
    box-shadow: 0 6px 14px rgba(85,120,255,.18);
}

.tagin-event-time-period-column .tagin-event-time-options {
    overflow: visible;
}

.tagin-event-date-time-selection {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
    margin: 8px 24px 0;
    padding: 11px;
    border: 1px solid rgba(74,82,147,.09);
    border-radius: 15px;
    background: rgba(239,242,252,.72);
}

.tagin-event-date-time-selection > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: #626c85;
    font-size: 9px;
    font-weight: 800;
}

.tagin-event-date-time-selection i {
    color: var(--app-primary);
}

.tagin-event-date-time-selection span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tagin-event-date-time-actions {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 10px;
    padding: 18px 24px 24px;
}

.tagin-event-date-time-actions button {
    min-height: 46px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.tagin-event-date-time-cancel {
    border: 1px solid rgba(74,82,147,.13);
    background: rgba(239,242,252,.82);
    color: #626c85;
}

.tagin-event-date-time-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: #fff;
    box-shadow: 0 10px 22px rgba(85,120,255,.22);
}

body.tagin-event-date-time-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .tagin-event-date-time-overlay {
        align-items: end;
        padding: 0;
    }

    .tagin-event-date-time-dialog {
        width: 100%;
        max-height: calc(100dvh - var(--tagin-header-height, 66px));
        border-width: 1px 0 0;
        border-radius: 26px 26px 0 0;
        transform: translateY(100%);
    }

    .tagin-event-date-time-overlay.is-open .tagin-event-date-time-dialog {
        transform: translateY(0);
    }

    .tagin-event-date-time-header {
        padding: 20px 18px 15px;
    }

    .tagin-event-date-time-header h2 {
        font-size: 21px;
    }

    .tagin-event-date-panel,
    .tagin-event-time-panel {
        padding: 17px 18px 10px;
    }

    .tagin-event-calendar-weekdays,
    .tagin-event-calendar-grid {
        gap: 4px;
    }

    .tagin-event-calendar-grid button {
        border-radius: 11px;
        font-size: 10px;
    }

    .tagin-event-time-columns {
        grid-template-columns: 1fr 1fr .72fr;
        gap: 7px;
    }

    .tagin-event-time-options {
        max-height: 185px;
        padding: 5px;
    }

    .tagin-event-date-time-selection {
        margin: 7px 18px 0;
    }

    .tagin-event-date-time-actions {
        position: sticky;
        bottom: 0;
        padding: 15px 18px calc(15px + env(safe-area-inset-bottom));
        background: rgba(248,249,255,.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
}

/* ==================== PAGE: SETTINGS ==================== */
 .tagin-settings-page {
     width: 100%;
     margin: 0 auto;
     color: var(--app-text, #101328);
}
 .tagin-settings-hero {
     position: relative;
     display: grid;
     grid-template-columns: minmax(0, 1fr) 210px;
     align-items: center;
     min-height: 205px;
     margin-bottom: 22px;
     padding: 30px 34px;
     overflow: hidden;
     border: 1px solid rgba(255,255,255,.16);
     border-radius: 28px;
     background: radial-gradient(circle at 86% 22%, rgba(255,255,255,.14) 0 68px, transparent 69px), radial-gradient(circle at 92% 90%, rgba(127,95,255,.34) 0 115px, transparent 116px), linear-gradient(135deg, rgba(31,36,83,.98), rgba(74,68,143,.97), rgba(47,55,111,.98));
     box-shadow: 0 22px 55px rgba(20,24,60,.24);
}
 .tagin-settings-hero::after {
     content: "";
     position: absolute;
     right: -42px;
     bottom: -88px;
     width: 260px;
     height: 260px;
     border: 1px solid rgba(255,255,255,.1);
     border-radius: 50%;
     box-shadow: 0 0 0 36px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025);
}
 .tagin-settings-hero-copy {
     position: relative;
     z-index: 2;
     max-width: 680px;
}
 .tagin-settings-hero-kicker {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     margin-bottom: 13px;
     color: #c4c8ff;
     font-size: 11px;
     font-weight: 900;
     letter-spacing: .12em;
     text-transform: uppercase;
}
 .tagin-settings-hero h1 {
     margin: 0 0 10px;
     color: #fff;
     font-size: clamp(31px, 4vw, 48px);
     font-weight: 900;
     line-height: 1.02;
     letter-spacing: -.045em;
}
 .tagin-settings-hero p {
     max-width: 620px;
     margin: 0;
     color: rgba(255,255,255,.72);
     font-size: 14px;
     line-height: 1.65;
}
 .tagin-settings-hero-orbit {
     position: relative;
     z-index: 2;
     width: 180px;
     height: 150px;
     justify-self: end;
}
 .tagin-settings-orbit-icon {
     position: absolute;
     display: grid;
     place-items: center;
     color: #fff;
     border: 1px solid rgba(255,255,255,.19);
     background: rgba(255,255,255,.13);
     box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(11,14,40,.22);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
}
 .tagin-settings-orbit-icon-primary {
     top: 22px;
     right: 43px;
     width: 72px;
     height: 72px;
     border-radius: 24px;
     font-size: 25px;
     transform: rotate(7deg);
}
 .tagin-settings-orbit-icon-secondary {
     right: 1px;
     bottom: 2px;
     width: 50px;
     height: 50px;
     border-radius: 17px;
     font-size: 17px;
     transform: rotate(10deg);
}
 .tagin-settings-orbit-icon-tertiary {
     bottom: 0;
     left: 13px;
     width: 57px;
     height: 57px;
     border-radius: 19px;
     font-size: 19px;
     transform: rotate(-8deg);
}
 .tagin-settings-grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 18px;
     align-items: start;
}
 .tagin-settings-panel {
     overflow: hidden;
     border: 1px solid rgba(255,255,255,.75);
     border-radius: 24px;
     background: linear-gradient(180deg, rgba(250,251,255,.96), rgba(240,243,252,.94));
     box-shadow: 0 16px 38px rgba(25,34,78,.12);
}
 .tagin-settings-panel-wide {
     grid-column: 1 / -1;
}
 .tagin-settings-panel-heading {
     display: flex;
     align-items: center;
     gap: 13px;
     padding: 20px 21px 17px;
     border-bottom: 1px solid rgba(85,96,139,.11);
}
 .tagin-settings-panel-icon {
     display: grid;
     place-items: center;
     flex: 0 0 44px;
     width: 44px;
     height: 44px;
     color: #fff;
     font-size: 16px;
     border-radius: 15px;
     background: linear-gradient(135deg, var(--app-primary, #5578ff), var(--app-secondary, #7b5cff));
     box-shadow: 0 9px 20px rgba(86,93,255,.25);
}
 .tagin-settings-panel-label {
     display: block;
     margin-bottom: 2px;
     color: #6d63ff;
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .11em;
     text-transform: uppercase;
}
 .tagin-settings-panel-heading h2 {
     margin: 0;
     color: #11152f;
     font-size: 18px;
     font-weight: 900;
     line-height: 1.2;
}
 .tagin-settings-panel-heading p {
     margin: 4px 0 0;
     color: #798198;
     font-size: 12px;
     line-height: 1.45;
}
 .tagin-settings-feature-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin: 15px;
     padding: 16px;
     border: 1px solid rgba(91,96,185,.12);
     border-radius: 18px;
     background: linear-gradient(135deg, rgba(85,120,255,.11), rgba(123,92,255,.08));
}
 .tagin-settings-feature-main {
     display: flex;
     align-items: center;
     gap: 13px;
     min-width: 0;
}
 .tagin-settings-feature-main > div {
     min-width: 0;
}
 .tagin-settings-feature-main strong {
     display: block;
     color: #171b38;
     font-size: 14px;
     font-weight: 900;
}
 .tagin-settings-feature-main small {
     display: block;
     margin-top: 3px;
     color: #747d96;
     font-size: 11px;
     line-height: 1.4;
}
 .tagin-settings-feature-icon {
     display: grid;
     place-items: center;
     flex: 0 0 42px;
     width: 42px;
     height: 42px;
     color: #fff;
     border-radius: 14px;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     box-shadow: 0 8px 18px rgba(86,92,255,.22);
}
 .tagin-settings-push-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     min-width: 103px;
     height: 40px;
     padding: 0 15px;
     border: 0;
     border-radius: 13px;
     background: linear-gradient(135deg, #5578ff, #7b5cff);
     color: #fff;
     font-family: inherit;
     font-size: 11px;
     font-weight: 900;
     cursor: pointer;
     box-shadow: 0 8px 18px rgba(86,92,255,.2);
     transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
 .tagin-settings-push-button:hover {
     transform: translateY(-1px);
     box-shadow: 0 11px 23px rgba(86,92,255,.27);
}
 .tagin-settings-push-button.is-enabled {
     background: rgba(40,184,104,.14);
     color: #18824a;
     box-shadow: none;
}
 .tagin-settings-push-button:disabled {
     opacity: .55;
     cursor: default;
     transform: none;
}
 .tagin-settings-rows {
     transition: opacity .18s ease;
}
 .tagin-settings-rows.is-disabled {
     opacity: .48;
}
 .tagin-settings-row {
     display: grid;
     grid-template-columns: 40px minmax(0, 1fr) auto;
     align-items: center;
     gap: 12px;
     min-height: 68px;
     margin: 0;
     padding: 12px 17px;
     border-bottom: 1px solid rgba(82,94,137,.1);
     cursor: pointer;
}
 .tagin-settings-row:last-child {
     border-bottom: 0;
}
 .tagin-settings-row:hover {
     background: rgba(85,120,255,.035);
}
 .tagin-settings-row-icon {
     display: grid;
     place-items: center;
     width: 36px;
     height: 36px;
     color: #fff;
     border-radius: 12px;
     font-size: 13px;
     box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
 .tagin-settings-row-icon-pink {
     background: linear-gradient(135deg, #ff6c91, #e84f7a);
}
 .tagin-settings-row-icon-yellow {
     background: linear-gradient(135deg, #ffba55, #ff8d40);
}
 .tagin-settings-row-icon-purple {
     background: linear-gradient(135deg, #7a71ff, #9b5df2);
}
 .tagin-settings-row-icon-blue {
     background: linear-gradient(135deg, #4d89ff, #5f68f7);
}
 .tagin-settings-row-icon-green {
     background: linear-gradient(135deg, #35c98a, #22a867);
}
 .tagin-settings-row-copy {
     min-width: 0;
}
 .tagin-settings-row-copy strong {
     display: block;
     color: #171b38;
     font-size: 13px;
     font-weight: 850;
}
 .tagin-settings-row-copy small {
     display: block;
     margin-top: 3px;
     color: #7a8299;
     font-size: 10.5px;
     line-height: 1.42;
}
 .tagin-settings-switch {
     position: relative;
     display: inline-flex;
     width: 46px;
     height: 27px;
}
 .tagin-settings-switch input {
     position: absolute;
     width: 1px;
     height: 1px;
     opacity: 0;
}
 .tagin-settings-switch > span {
     position: absolute;
     inset: 0;
     border-radius: 999px;
     background: #c9cedd;
     cursor: pointer;
     transition: background .18s ease, opacity .18s ease;
}
 .tagin-settings-switch > span::before {
     content: "";
     position: absolute;
     top: 4px;
     left: 4px;
     width: 19px;
     height: 19px;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 2px 7px rgba(20,25,55,.2);
     transition: transform .18s ease;
}
 .tagin-settings-switch input:checked + span {
     background: linear-gradient(135deg, #5578ff, #7b5cff);
}
 .tagin-settings-switch input:checked + span::before {
     transform: translateX(19px);
}
 .tagin-settings-switch input:focus-visible + span {
     outline: 3px solid rgba(85,120,255,.24);
     outline-offset: 2px;
}
 .tagin-settings-switch input:disabled + span {
     opacity: .56;
     cursor: default;
}
 .tagin-settings-link-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     padding: 15px;
}
 .tagin-settings-link {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     min-height: 52px;
     padding: 0 14px;
     border: 1px solid rgba(83,94,137,.11);
     border-radius: 15px;
     background: rgba(255,255,255,.66);
     color: #1c213d;
     font-family: inherit;
     text-align: left;
     cursor: pointer;
     transition: transform .17s ease, background .17s ease, border-color .17s ease;
}
 .tagin-settings-link:hover {
     background: #fff;
     border-color: rgba(85,120,255,.25);
     transform: translateY(-1px);
}
 .tagin-settings-link > span {
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: 0;
}
 .tagin-settings-link > span > i {
     display: grid;
     place-items: center;
     flex: 0 0 30px;
     width: 30px;
     height: 30px;
     color: #665eff;
     border-radius: 10px;
     background: rgba(101,94,255,.1);
}
 .tagin-settings-link strong {
     font-size: 11px;
     font-weight: 850;
}
 .tagin-settings-link > i {
     color: #9aa1b4;
     font-size: 9px;
}
 .tagin-settings-link-danger {
     color: #bf3650;
}
 .tagin-settings-link-danger > span > i {
     color: #c93f58;
     background: rgba(201,63,88,.1);
}
 .tagin-settings-footer-note {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     margin-top: 20px;
     color: rgba(255,255,255,.72);
     font-size: 10.5px;
     font-weight: 700;
     text-align: center;
}
 .tagin-settings-message {
     position: fixed;
     top: calc(var(--tagin-header-height, 72px) + 12px);
     left: 50%;
     z-index: 5000;
     min-width: 210px;
     max-width: calc(100vw - 30px);
     padding: 11px 15px;
     border: 1px solid rgba(255,255,255,.14);
     border-radius: 13px;
     background: rgba(20,24,52,.96);
     color: #fff;
     text-align: center;
     font-size: 11px;
     font-weight: 850;
     opacity: 0;
     pointer-events: none;
     transform: translate(-50%, -12px);
     box-shadow: 0 14px 34px rgba(0,0,0,.28);
     transition: opacity .18s ease, transform .18s ease;
}
 .tagin-settings-message.is-visible {
     opacity: 1;
     transform: translate(-50%, 0);
}
 .tagin-settings-message.is-error {
     background: rgba(183,43,70,.97);
}
 @media (max-width: 991.98px) {
     .tagin-settings-grid {
         grid-template-columns: 1fr;
    }
     .tagin-settings-panel-wide {
         grid-column: auto;
    }
     .tagin-settings-hero {
         grid-template-columns: minmax(0, 1fr) 145px;
         min-height: 180px;
         padding: 24px 25px;
    }
     .tagin-settings-hero-orbit {
         width: 130px;
         height: 125px;
    }
     .tagin-settings-orbit-icon-primary {
         right: 24px;
         width: 62px;
         height: 62px;
    }
}
 @media (max-width: 575.98px) {
     .tagin-settings-page {
         padding: 10px 7px calc(var(--tagin-footer-height, 86px) + 24px);
    }
     .tagin-settings-hero {
         display: block;
         min-height: 0;
         margin-bottom: 14px;
         padding: 22px 19px;
         border-radius: 23px;
    }
     .tagin-settings-hero h1 {
         font-size: 27px;
    }
     .tagin-settings-hero p {
         font-size: 12px;
         line-height: 1.55;
    }
     .tagin-settings-hero-orbit {
         display: none;
    }
     .tagin-settings-grid {
         gap: 13px;
    }
     .tagin-settings-panel {
         border-radius: 21px;
    }
     .tagin-settings-panel-heading {
         padding: 17px 15px 14px;
    }
     .tagin-settings-panel-heading p {
         font-size: 10.5px;
    }
     .tagin-settings-feature-row {
         align-items: flex-start;
         margin: 11px;
         padding: 13px;
    }
     .tagin-settings-feature-main {
         align-items: flex-start;
    }
     .tagin-settings-feature-icon {
         flex-basis: 37px;
         width: 37px;
         height: 37px;
    }
     .tagin-settings-push-button {
         min-width: 82px;
         height: 36px;
         padding: 0 11px;
    }
     .tagin-settings-row {
         grid-template-columns: 36px minmax(0, 1fr) auto;
         gap: 9px;
         min-height: 66px;
         padding: 11px 13px;
    }
     .tagin-settings-row-icon {
         width: 34px;
         height: 34px;
    }
     .tagin-settings-row-copy strong {
         font-size: 12px;
    }
     .tagin-settings-row-copy small {
         font-size: 9.5px;
    }
     .tagin-settings-switch {
         width: 43px;
         height: 25px;
    }
     .tagin-settings-switch > span::before {
         top: 3px;
         left: 3px;
         width: 19px;
         height: 19px;
    }
     .tagin-settings-switch input:checked + span::before {
         transform: translateX(18px);
    }
     .tagin-settings-link-grid {
         grid-template-columns: 1fr;
         padding: 11px;
    }
     .tagin-settings-footer-note {
         padding: 0 12px;
         color: rgba(255,255,255,.68);
    }
}
 
/* ==================== MEET: PREMIUM SPARK CARD ==================== */
.tagin-meet-wave-card.is-spark {
    position: relative;
    grid-template-columns: 148px minmax(0, 1fr);
    overflow: visible;
    isolation: isolate;
    border: 1px solid rgba(255, 137, 99, .52);
    background:
        radial-gradient(circle at 88% -20%, rgba(255, 184, 79, .25), transparent 35%),
        radial-gradient(circle at 12% 115%, rgba(255, 101, 126, .18), transparent 40%),
        linear-gradient(135deg, rgba(255, 252, 248, .99), rgba(255, 242, 247, .98));
    box-shadow: 0 18px 46px rgba(255, 105, 116, .20), 0 0 0 3px rgba(255, 151, 91, .07);
    animation: taginMeetSparkArrival .62s cubic-bezier(.2, .8, .2, 1) both, taginMeetSparkGlow 3.2s ease-in-out .65s infinite;
}
.tagin-meet-wave-card.is-spark::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -2;
    border-radius: 26px;
    background: linear-gradient(115deg, #ffbd53, #ff6e7e, #8d63ff, #ffbd53);
    background-size: 280% 280%;
    opacity: .82;
    animation: taginMeetSparkBorder 5s linear infinite;
}
.tagin-meet-wave-card.is-spark::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 252, 248, .99), rgba(255, 242, 247, .98));
}
.tagin-meet-wave-card.is-spark:hover {
    transform: translateY(-4px) scale(1.006);
    box-shadow: 0 26px 64px rgba(255, 105, 116, .27), 0 0 0 5px rgba(255, 151, 91, .08);
}
.tagin-meet-spark-banner {
    position: absolute;
    top: 2px !important;
    left: 2px !important;
    right: 2px !important;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 7px 12px;
    color: #fff;
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background: linear-gradient(100deg, #ff9d4f, #ff5f7d 54%, #8a61ff);
    box-shadow: 0 10px 24px rgba(219, 71, 109, .28);
}
.tagin-meet-spark-banner span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tagin-meet-spark-banner small {
    overflow: hidden;
    font-size: 9px;
    font-weight: 750;
    opacity: .88;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tagin-meet-wave-card.is-spark .tagin-meet-card-photo {
    margin-left: 2px !important; 
    margin-top: 2px !important; 
    margin-bottom: 2px !important; 
    margin: 0;
    min-height: 210px;
    border: 0;
    border-radius: 21px 0 0 21px;
    box-shadow: none;
}
.tagin-meet-wave-card.is-spark .tagin-meet-card-photo img {
    min-height: 210px;
}
.tagin-meet-spark-photo-label {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    color: #fff;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: rgba(24, 20, 49, .64);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
    backdrop-filter: blur(8px);
}
.tagin-meet-wave-card.is-spark .tagin-meet-card-signal.is-spark {
    width: 48px;
    height: 48px;
    right: 9px;
    bottom: 9px;
    font-size: 17px;
    border-width: 4px;
    border-radius: 17px;
    background: linear-gradient(135deg, #ffbd53, #ff5f7d 62%, #8a61ff);
    box-shadow: 0 9px 22px rgba(255, 91, 117, .38);
    animation: taginMeetSparkSignal 2.25s ease-in-out infinite;
}
.tagin-meet-wave-card.is-spark .tagin-meet-card-body {
    padding-top: 18px;
}
.tagin-meet-wave-card.is-spark .tagin-meet-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ef586e;
    font-size: 9px;
}
.tagin-meet-wave-card.is-spark .tagin-meet-card-kicker i {
    animation: taginMeetSparkTwinkle 1.6s ease-in-out infinite;
}
.tagin-meet-wave-card.is-spark .tagin-meet-card-heading h2 {
    font-size: 21px;
}
.tagin-meet-spark-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: auto 0 12px;
    padding: 10px 11px;
    color: #8e3c58;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.42;
    border: 1px solid rgba(255, 111, 126, .16);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 184, 79, .13), rgba(255, 95, 125, .09));
}
.tagin-meet-spark-note i {
    margin-top: 2px;
    color: #ff7a59;
}
.tagin-meet-wave-button.is-spark-reply {
    position: relative;
    overflow: hidden;
    background: linear-gradient(105deg, #ff9d4f, #ff5f7d 52%, #7f5cff);
    box-shadow: 0 10px 22px rgba(234, 78, 119, .3);
}
.tagin-meet-wave-button.is-spark-reply::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -42%;
    width: 32%;
    height: 300%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
    transform: rotate(22deg);
    animation: taginMeetSparkShine 3.2s ease-in-out infinite;
}
.tagin-meet-spark-effects {
    position: absolute;
    inset: -12px;
    z-index: 7;
    overflow: hidden;
    border-radius: 32px;
    pointer-events: none;
}
.tagin-meet-spark-effects i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffb84f;
    box-shadow: 0 0 10px rgba(255, 139, 87, .85);
    animation: taginMeetSparkParticle 3.5s ease-in-out infinite;
}
.tagin-meet-spark-effects i:nth-child(1) { top: 18%; left: 3%; animation-delay: -.3s; }
.tagin-meet-spark-effects i:nth-child(2) { top: 72%; left: 2%; animation-delay: -1.5s; }
.tagin-meet-spark-effects i:nth-child(3) { top: 14%; right: 4%; animation-delay: -.9s; }
.tagin-meet-spark-effects i:nth-child(4) { top: 58%; right: 2%; animation-delay: -2.1s; }
.tagin-meet-spark-effects i:nth-child(5) { bottom: 4%; left: 38%; animation-delay: -1.1s; }
.tagin-meet-spark-effects i:nth-child(6) { top: 3%; left: 58%; animation-delay: -2.7s; }
@keyframes taginMeetSparkArrival {
    from { opacity: 0; transform: translateY(18px) scale(.965); filter: saturate(.7); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}
@keyframes taginMeetSparkGlow {
    0%, 100% { box-shadow: 0 18px 46px rgba(255, 105, 116, .18), 0 0 0 3px rgba(255, 151, 91, .06); }
    50% { box-shadow: 0 22px 58px rgba(255, 105, 116, .28), 0 0 0 6px rgba(255, 151, 91, .10); }
}
@keyframes taginMeetSparkBorder {
    to { background-position: 280% 50%; }
}
@keyframes taginMeetSparkSignal {
    0%, 100% { transform: scale(1) rotate(-4deg); }
    50% { transform: scale(1.1) rotate(4deg); }
}
@keyframes taginMeetSparkTwinkle {
    0%, 100% { opacity: .55; transform: scale(.85) rotate(0); }
    50% { opacity: 1; transform: scale(1.18) rotate(20deg); }
}
@keyframes taginMeetSparkShine {
    0%, 58% { left: -42%; opacity: 0; }
    68% { opacity: .85; }
    82%, 100% { left: 118%; opacity: 0; }
}
@keyframes taginMeetSparkParticle {
    0%, 100% { opacity: 0; transform: translateY(8px) scale(.4); }
    35% { opacity: 1; transform: translateY(0) scale(1); }
    68% { opacity: .35; transform: translateY(-9px) scale(.7); }
}
@media (max-width: 1199.98px) {
    .tagin-meet-wave-card.is-spark { grid-template-columns: 138px minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .tagin-meet-wave-card.is-spark { grid-template-columns: 122px minmax(0, 1fr); }
    .tagin-meet-spark-banner { left: 10px; right: 10px; }
    .tagin-meet-spark-banner small { display: none; }
    .tagin-meet-wave-card.is-spark .tagin-meet-card-photo { min-height: 198px; border-top-left-radius: 21px; border-bottom-left-radius: 21px;}
    .tagin-meet-wave-card.is-spark .tagin-meet-card-photo img { min-height: 198px; }
    .tagin-meet-wave-card.is-spark .tagin-meet-card-body { padding-top: 14px; }
    .tagin-meet-wave-card.is-spark .tagin-meet-card-heading h2 { font-size: 18px; }
    .tagin-meet-spark-note { font-size: 8px; padding: 8px 9px; }
}
@media (max-width: 480px) {
    .tagin-meet-wave-card.is-spark { grid-template-columns: 108px minmax(0, 1fr); }
    .tagin-meet-wave-card.is-spark .tagin-meet-card-photo { min-height: 184px; border-radius: 17px 0 0 17px; }
    .tagin-meet-wave-card.is-spark .tagin-meet-card-photo img { min-height: 184px; }
    .tagin-meet-spark-banner { min-height: 30px; padding: 6px 9px; }
    .tagin-meet-spark-banner span { font-size: 8px; }
    .tagin-meet-spark-note { display: none; }
    .tagin-meet-wave-card.is-spark .tagin-meet-card-signal.is-spark { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .tagin-meet-wave-card.is-spark,
    .tagin-meet-wave-card.is-spark::before,
    .tagin-meet-wave-card.is-spark .tagin-meet-card-signal.is-spark,
    .tagin-meet-wave-card.is-spark .tagin-meet-card-kicker i,
    .tagin-meet-wave-button.is-spark-reply::after,
    .tagin-meet-spark-effects i { animation: none !important; }
}

/* ==================== GLOBAL COMPONENT: TAGIN CONFIRM ==================== */
body.tagin-confirm-open { overflow: hidden !important; }
.tagin-global-confirm { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 22px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.tagin-global-confirm.is-visible { visibility: visible; opacity: 1; pointer-events: auto; }
.tagin-global-confirm-backdrop { position: absolute; inset: 0; background: rgba(7, 10, 27, .72); backdrop-filter: blur(8px); }
.tagin-global-confirm-panel { position: relative; z-index: 1; width: min(100%, 430px); padding: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: radial-gradient(circle at 100% 0, rgba(123,92,255,.20), transparent 34%), linear-gradient(145deg, rgba(35,39,84,.99), rgba(20,24,51,.99)); color: #fff; text-align: center; box-shadow: 0 28px 90px rgba(0,0,0,.46); transform: translateY(14px) scale(.97); transition: transform .22s ease; }
.tagin-global-confirm.is-visible .tagin-global-confirm-panel { transform: translateY(0) scale(1); }
.tagin-global-confirm-panel::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, #5578ff, #7b5cff); }
.tagin-global-confirm-panel[data-confirm-style="success"]::before { background: linear-gradient(90deg, #20a96b, #51d398); }
.tagin-global-confirm-panel[data-confirm-style="warning"]::before { background: linear-gradient(90deg, #f0a72f, #ffd36a); }
.tagin-global-confirm-panel[data-confirm-style="danger"]::before { background: linear-gradient(90deg, #dc3d5f, #ff6a7f); }
.tagin-global-confirm-handle { display: none; }
.tagin-global-confirm-close { position: absolute; top: 16px; right: 16px; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.76); cursor: pointer; }
.tagin-global-confirm-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 18px; place-items: center; border: 1px solid rgba(120,132,255,.30); border-radius: 23px; background: linear-gradient(135deg, rgba(85,120,255,.24), rgba(123,92,255,.30)); color: #c8ceff; font-size: 27px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(18,24,67,.30); }
.tagin-global-confirm-icon[data-confirm-style="success"] { border-color: rgba(64,206,139,.30); background: rgba(41,177,112,.16); color: #67e3aa; }
.tagin-global-confirm-icon[data-confirm-style="warning"] { border-color: rgba(255,196,82,.32); background: rgba(224,154,43,.17); color: #ffd16f; }
.tagin-global-confirm-icon[data-confirm-style="danger"] { border-color: rgba(255,93,122,.30); background: rgba(212,52,83,.18); color: #ff8095; }
.tagin-global-confirm-eyebrow { display: block; margin-bottom: 8px; color: #aeb6ff; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.tagin-global-confirm-panel h2 { margin: 0 0 10px; color: #fff; font-size: 25px; font-weight: 900; letter-spacing: -.035em; }
.tagin-global-confirm-panel p { max-width: 350px; margin: 0 auto; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.6; }
.tagin-global-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 25px; }
.tagin-global-confirm-actions button { min-height: 48px; padding: 0 16px; border-radius: 15px; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.tagin-global-confirm-actions button:hover { transform: translateY(-1px); }
.tagin-global-confirm-secondary { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.84); }
.tagin-global-confirm-primary { border: 1px solid transparent; background: linear-gradient(135deg, #5578ff, #7b5cff); color: #fff; box-shadow: 0 12px 24px rgba(69,72,190,.25); }
.tagin-global-confirm-panel[data-confirm-style="success"] .tagin-global-confirm-primary { background: linear-gradient(135deg, #249e69, #46c98d); box-shadow: 0 12px 24px rgba(28,139,89,.24); }
.tagin-global-confirm-panel[data-confirm-style="warning"] .tagin-global-confirm-primary { background: linear-gradient(135deg, #d89025, #efb849); color: #21170a; box-shadow: 0 12px 24px rgba(182,119,28,.23); }
.tagin-global-confirm-panel[data-confirm-style="danger"] .tagin-global-confirm-primary { background: linear-gradient(135deg, #c93050, #e44b68); box-shadow: 0 12px 24px rgba(174,35,66,.28); }
.tagin-global-confirm-actions button:focus-visible, .tagin-global-confirm-close:focus-visible { outline: 3px solid rgba(150,162,255,.34); outline-offset: 3px; }
@media (max-width: 575.98px) { .tagin-global-confirm { align-items: end; padding: 0; } .tagin-global-confirm-panel { width: 100%; padding: 22px 18px calc(20px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 26px 26px 0 0; transform: translateY(100%); } .tagin-global-confirm.is-visible .tagin-global-confirm-panel { transform: translateY(0); } .tagin-global-confirm-handle { display: block; width: 44px; height: 5px; margin: -8px auto 18px; border-radius: 999px; background: rgba(255,255,255,.22); } .tagin-global-confirm-close { top: 18px; right: 18px; } .tagin-global-confirm-icon { width: 60px; height: 60px; margin-bottom: 15px; border-radius: 20px; font-size: 24px; } .tagin-global-confirm-panel h2 { font-size: 22px; } .tagin-global-confirm-panel p { font-size: 13px; } .tagin-global-confirm-actions { grid-template-columns: 1fr; margin-top: 21px; } .tagin-global-confirm-primary { grid-row: 1; } .tagin-global-confirm-secondary { grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .tagin-global-confirm, .tagin-global-confirm-panel, .tagin-global-confirm-actions button { transition: none; } }

.tagin-global-offline {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.tagin-global-offline.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.tagin-global-offline-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 14, 35, .72);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.tagin-global-offline-panel {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    padding: 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(117, 89, 230, .2), transparent 38%),
        linear-gradient(145deg, rgba(31, 36, 76, .98), rgba(18, 22, 52, .98));
    color: #fff;
    text-align: center;
    box-shadow: 0 30px 80px rgba(5, 7, 24, .5);
    transform: translateY(22px) scale(.97);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.tagin-global-offline.is-visible .tagin-global-offline-panel {
    transform: translateY(0) scale(1);
}

.tagin-global-offline-handle {
    display: none;
    width: 42px;
    height: 5px;
    margin: -17px auto 25px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
}

.tagin-global-offline-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 22px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(104, 84, 218, .28), rgba(70, 58, 173, .14));
    font-size: 30px;
    color: #c9c0ff;
    box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 15px 36px rgba(9, 11, 37, .25);
}

.tagin-global-offline-signal {
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(142, 124, 255, .26);
    border-radius: 30px;
    animation: tagin-offline-pulse 2.1s ease-out infinite;
}

.tagin-global-offline-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #a89af5;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.tagin-global-offline-panel h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 4vw, 2rem);
    font-weight: 900;
    letter-spacing: -.035em;
}

.tagin-global-offline-panel > p {
    max-width: 355px;
    margin: 14px auto 22px;
    color: rgba(234, 237, 255, .72);
    font-size: .93rem;
    line-height: 1.65;
}

.tagin-global-offline-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 38px;
    margin-bottom: 22px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .76);
    font-size: .75rem;
    font-weight: 800;
}

.tagin-global-offline-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f2ae3e;
    box-shadow: 0 0 0 5px rgba(242, 174, 62, .12);
}

.tagin-global-offline[data-connection-state="checking"] .tagin-global-offline-status-dot {
    animation: tagin-offline-status-pulse 1s ease-in-out infinite;
}

.tagin-global-offline[data-connection-state="online"] .tagin-global-offline-status-dot {
    background: #47d397;
    box-shadow: 0 0 0 5px rgba(71, 211, 151, .12);
}

.tagin-global-offline[data-connection-state="offline"] .tagin-global-offline-status-dot {
    background: #ff6685;
    box-shadow: 0 0 0 5px rgba(255, 102, 133, .12);
}

.tagin-global-offline-retry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #7564df, #5c4bc4);
    color: #fff;
    font-size: .88rem;
    font-weight: 900;
    box-shadow: 0 14px 32px rgba(75, 57, 177, .28);
    transition: transform .18s ease, filter .18s ease;
}

.tagin-global-offline-retry:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.tagin-global-offline-retry:disabled {
    cursor: wait;
    opacity: .75;
}

.tagin-global-offline-retry.is-loading i {
    animation: tagin-offline-spin .8s linear infinite;
}

.tagin-global-offline-panel > small {
    display: block;
    margin-top: 16px;
    color: rgba(220, 224, 251, .46);
    font-size: .7rem;
    line-height: 1.45;
}

body.tagin-offline-open {
    overflow: hidden !important;
}

@keyframes tagin-offline-pulse {
    0% {
        opacity: .8;
        transform: scale(.88);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@keyframes tagin-offline-status-pulse {
    50% {
        opacity: .35;
    }
}

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

@media (max-width: 575.98px) {
    .tagin-global-offline {
        align-items: flex-end;
        padding: 0;
    }

    .tagin-global-offline-panel {
        width: 100%;
        padding: 32px 24px calc(24px + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 30px 30px 0 0;
        transform: translateY(100%);
    }

    .tagin-global-offline.is-visible .tagin-global-offline-panel {
        transform: translateY(0);
    }

    .tagin-global-offline-handle {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tagin-global-offline,
    .tagin-global-offline-panel,
    .tagin-global-offline-retry,
    .tagin-global-offline-signal,
    .tagin-global-offline-status-dot {
        animation: none !important;
        transition: none !important;
    }
}