/* ===================================================================
   SPZN Mobile App Styles
   =================================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Exo+2:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

/* --- CSS Variables --- */
:root {
    --app-primary: #CD2027;
    --app-primary-hover: #A0191E;
    --app-primary-light: #fef2f2;
    --app-accent: #0C103B;
    --app-accent-hover: #1a1f5e;
    --app-text: #2B2A29;
    --app-text-light: #3D3C3B;
    --app-text-muted: #6b7280;
    --app-bg: #f5f5f5;
    --app-white: #FCFCFB;
    --app-border: #e5e7eb;
    --app-border-light: #f3f4f6;
    --app-shadow: 0 2px 8px rgba(0,0,0,0.06);
    --app-shadow-md: 0 4px 16px rgba(0,0,0,0.1);
    --app-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --app-radius: 15px;
    --app-header-height: 64px;
    --app-nav-height: 64px;
    --app-max-width: 448px;
    --app-font: 'Montserrat', 'Exo 2', 'Roboto', sans-serif;
}

/* --- Reset & Base --- */
.app-wrapper,
.app-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.app-wrapper {
    font-family: var(--app-font);
    color: var(--app-text);
    background: var(--app-bg);
    min-height: 100vh;
    max-width: var(--app-max-width);
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

.app-wrapper a {
    text-decoration: none;
}

.app-wrapper a:not([class]) {
    color: inherit;
}

.app-wrapper ul {
    list-style: none;
}

.app-wrapper img {
    max-width: 100%;
    height: auto;
}

/* Hide scrollbar utility */
.app-hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.app-hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ===================================================================
   WELCOME SCREEN
   =================================================================== */
.app-welcome {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    position: relative;
    overflow: hidden;
}

.app-welcome__accent {
    width: 100%;
    height: 6px;
    background: var(--app-primary);
}

.app-welcome__logo {
    margin-top: 40px;
    height: 134px !important;
    width: auto;
    object-fit: contain;
}

.app-welcome__tagline {
    text-align: center;
    margin-top: 24px;
    padding: 0 24px;
}

.app-welcome__tagline h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--app-text);
    margin-bottom: 8px;
}

.app-welcome__tagline p {
    font-size: 14px;
    color: var(--app-text-muted);
}

.app-welcome__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 24px;
    width: 100%;
}

.app-welcome__slider {
    width: 100%;
    padding: 0 16px;
    margin-top: auto;
    margin-bottom: 32px;
}

.app-welcome__slide {
    height: 192px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    display: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.app-welcome__slide.active {
    display: block;
    animation: appFadeIn 0.5s ease;
}

.app-welcome__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-welcome__slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(43,42,41,0.8), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.app-welcome__slide-title {
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}

.app-welcome__slide-subtitle {
    color: rgba(255,255,255,0.75);
    font-size: 12px;
}

.app-welcome__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.app-welcome__dot {
    width: 7px;
    height: 6px;
    border-radius: 3px;
    background: #D9D9D9;
    transition: all 0.3s ease;
    cursor: pointer;
}

.app-welcome__dot.active {
    width: 22px;
    background: var(--app-accent);
}

/* Welcome Buttons */
.app-welcome__btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--app-primary);
    color: white;
    padding: 16px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    font-family: var(--app-font);
    box-shadow: 0 4px 16px rgba(205,32,39,0.3);
    position: relative;
    overflow: hidden;
    transition: background 0.2s;
}

.app-welcome__btn-primary:hover {
    background: #b01b21;
}

.app-welcome__btn-primary:active {
    transform: scale(0.98);
}

.app-welcome__btn-primary-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 55%, transparent 60%);
    animation: appWelcomeShimmer 2s infinite 3s ease-in-out;
    transform: translateX(-100%);
    pointer-events: none;
}

@keyframes appWelcomeShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.app-welcome__btn-left {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.app-welcome__btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-welcome__btn-icon--white {
    background: rgba(255,255,255,0.2);
    color: white;
}

.app-welcome__btn-icon--navy {
    background: rgba(12,16,59,0.1);
    color: var(--app-accent);
}

.app-welcome__btn-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.app-welcome__btn-title {
    font-size: 16px;
    font-weight: 700;
}

.app-welcome__btn-subtitle {
    font-size: 12px;
    color: rgba(255,200,200,0.9);
    margin-top: 2px;
}

.app-welcome__btn-secondary {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    color: var(--app-text);
    padding: 16px;
    border-radius: 9999px;
    border: 2px solid var(--app-border-light);
    cursor: pointer;
    font-family: var(--app-font);
    transition: all 0.2s;
}

.app-welcome__btn-secondary:hover {
    border-color: rgba(12,16,59,0.4);
    background: rgba(12,16,59,0.05);
}

.app-welcome__btn-secondary:active {
    transform: scale(0.98);
}

.app-welcome__footer {
    font-size: 10px;
    color: #d1d5db;
    text-align: center;
    padding-bottom: 8px;
    margin-top: auto;
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--app-font);
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    padding: 12px 24px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
}

.app-btn:active {
    transform: scale(0.98);
}

.app-btn--primary {
    background: var(--app-primary);
    color: white;
    box-shadow: 0 4px 16px rgba(205,32,39,0.3);
}

.app-btn--primary:hover {
    background: var(--app-primary-hover);
    box-shadow: 0 6px 16px rgba(205,32,39,0.35);
}

.app-btn--secondary {
    background: white;
    color: var(--app-text);
    border: 2px solid var(--app-border-light);
}

.app-btn--secondary:hover {
    border-color: rgba(12,16,59,0.4);
    background: rgba(12,16,59,0.05);
}

.app-btn--ghost {
    background: transparent;
    color: #9ca3af;
    font-weight: 500;
    font-size: 14px;
    padding: 6px 16px;
}

.app-btn--ghost:hover {
    color: var(--app-text);
}

.app-btn--sm {
    padding: 8px 16px;
    font-size: 12px;
}

.app-btn--icon {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}

.app-btn--outline-red {
    background: transparent;
    color: var(--app-primary);
    border: 1px solid var(--app-primary);
}

.app-btn--outline-red:hover {
    background: var(--app-primary-light);
}

/* ===================================================================
   HEADER
   =================================================================== */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--app-white);
}

.app-header__accent {
    height: 6px;
    background: var(--app-primary);
}

.app-header__bar {
    height: var(--app-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid rgba(243,244,246,0.8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}

.app-header__left,
.app-header__right {
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.app-header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 44px !important;
    width: auto;
    z-index: 1;
}

.app-header__btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--app-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0;
}

.app-header__btn:hover {
    color: var(--app-primary);
    background: #fef2f2;
}

.app-header__btn--active {
    background: var(--app-primary);
    color: white;
    box-shadow: 0 4px 6px rgba(254,202,202,0.5);
}

.app-header__btn--active:hover {
    background: var(--app-primary);
    color: white;
}

/* Chat icon swap: show message-circle by default, X when active */
.app-header__chat-close {
    display: none;
}

.app-header__btn--active .app-header__chat-icon {
    display: none;
}

.app-header__btn--active .app-header__chat-close {
    display: block;
}

.app-header__btn svg,
.app-header__btn i {
    width: 22px;
    height: 22px;
}

.app-header__hamburger {
    color: var(--app-accent);
}

.app-header__hamburger:hover {
    color: var(--app-accent-hover);
    background: rgba(12,16,59,0.1);
}

.app-header__gif {
    position: absolute;
    left: 20px;
    bottom: 0;
    height: 75% !important;
    width: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

/* Search Overlay */
/* Search Overlay — slides in from right like Figma */
.app-search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    margin: 0;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.28, 0.84, 0.42, 1);
    z-index: 10;
    box-sizing: border-box;
}

.app-search-overlay.active {
    transform: translateX(0);
}

.app-search-overlay__field {
    position: relative;
    flex: 1;
}

.app-search-overlay__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    display: flex;
}

.app-search-overlay__input {
    width: 100%;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 0 16px 0 40px;
    font-family: var(--app-font);
    font-size: 14px;
    outline: none;
    background: var(--app-bg);
    color: var(--app-text);
    transition: all 0.2s;
}

.app-search-overlay__input::placeholder {
    color: #9ca3af;
}

.app-search-overlay__input:focus {
    border-color: rgba(205,32,39,0.3);
    box-shadow: 0 0 0 2px rgba(205,32,39,0.15);
}

.app-search-overlay__close {
    padding: 8px;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s;
}

.app-search-overlay__close:hover {
    color: #1f2937;
}

/* Back Button */
.app-header__back {
    display: none;
}

.app-wrapper.has-detail .app-header__back {
    display: flex;
}

.app-wrapper.has-detail .app-header__chat {
    display: none;
}

/* ===================================================================
   BOTTOM NAVIGATION
   =================================================================== */
.app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--app-max-width);
    background: white;
    z-index: 40;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    border-top: 1px solid var(--app-border-light);
}

.app-bottom-nav__indicator {
    position: absolute;
    top: 0;
    height: 3px;
    width: 32px;
    background: var(--app-accent);
    border-radius: 0 0 3px 3px;
    transition: left 0.35s cubic-bezier(0.28, 0.84, 0.42, 1);
}

.app-bottom-nav__items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: var(--app-nav-height);
    padding: 0;
}

.app-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    height: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    font-family: var(--app-font);
    padding: 4px 0;
    position: relative;
}

.app-bottom-nav__item svg,
.app-bottom-nav__item i {
    width: 22px;
    height: 22px;
    stroke-width: 1.8px;
    color: rgba(43,42,41,0.4);
    transition: all 0.2s ease;
}

.app-bottom-nav__item span {
    font-size: 10px;
    color: rgba(43,42,41,0.4);
    transition: all 0.2s ease;
    font-weight: 500;
}

.app-bottom-nav__item:hover svg,
.app-bottom-nav__item:hover i {
    color: rgba(43,42,41,0.7);
}

.app-bottom-nav__item:hover span {
    color: rgba(43,42,41,0.7);
}

.app-bottom-nav__item.active {
    /* No background on the whole item — highlight is on icon wrapper only */
}

.app-bottom-nav__icon-wrap {
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-bottom-nav__item.active .app-bottom-nav__icon-wrap {
    background: #fef2f2;
}

.app-bottom-nav__item.active svg,
.app-bottom-nav__item.active i {
    color: var(--app-primary);
    stroke-width: 2.5px;
    animation: appNavIconPop 0.3s ease;
}

.app-bottom-nav__item.active span {
    color: var(--app-primary);
    font-weight: 700;
}

/* ===================================================================
   DRAWER
   =================================================================== */
.app-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 55;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.app-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.app-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 75%;
    max-width: 384px;
    height: 100vh;
    background: var(--app-white);
    z-index: 60;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

.app-drawer.active {
    transform: translateX(0);
}

.app-drawer__accent {
    height: 6px;
    background: var(--app-accent);
}

.app-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}

.app-drawer__logo {
    height: 36px;
}

.app-drawer__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #9ca3af;
    transition: all 0.2s;
}

.app-drawer__close:hover {
    color: var(--app-primary);
    background: #fef2f2;
}

.app-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px;
}

/* User Card in Drawer */
.app-drawer__user-card {
    background: linear-gradient(135deg, var(--app-primary), #a0191e);
    border-radius: var(--app-radius);
    padding: 16px;
    color: white;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.app-drawer__user-card::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
}

.app-drawer__user-welcome {
    font-size: 12px;
    color: rgba(255,200,200,0.8);
    font-weight: 500;
}

.app-drawer__user-name {
    font-size: 18px;
    font-weight: 700;
    margin-top: 2px;
}

.app-drawer__user-id {
    font-size: 12px;
    color: rgba(255,180,180,0.8);
    margin-top: 4px;
}

.app-drawer__section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.app-drawer__section-line {
    flex: 1;
    height: 1px;
    background: rgba(12,16,59,0.3);
}

.app-drawer__section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--app-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Drawer Menu Items */
.app-drawer__menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app-drawer__menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--app-font);
}

.app-drawer__menu-item:hover {
    background: rgba(12,16,59,0.08);
}

.app-drawer__menu-item:hover .app-drawer__menu-icon {
    background: rgba(205,32,39,0.1);
    color: var(--app-primary);
}

.app-drawer__menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.app-drawer__menu-icon svg {
    width: 18px;
    height: 18px;
}

.app-drawer__menu-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--app-text);
}

.app-drawer__menu-chevron {
    color: #d1d5db;
    width: 16px;
    height: 16px;
}

.app-drawer__footer {
    padding: 24px;
    border-top: 1px solid var(--app-border-light);
    background: rgba(249,250,251,0.5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===================================================================
   MAIN CONTENT AREA
   =================================================================== */
.app-main {
    flex: 1;
    padding: 16px 16px 96px;
}

.app-page {
    display: none;
    animation: appFadeIn 0.25s ease;
}

.app-page.active {
    display: block;
}

/* ===================================================================
   CARDS
   =================================================================== */
.app-card {
    background: white;
    border-radius: var(--app-radius);
    padding: 16px;
    border: 1px solid rgba(229,229,229,0.6);
    box-shadow: var(--app-shadow);
    transition: all 0.25s ease;
}

.app-card:hover {
    box-shadow: var(--app-shadow-md);
}

.app-card--clickable {
    cursor: pointer;
}

.app-card--clickable:hover {
    transform: translateY(-3px);
}

.app-card--clickable:active {
    transform: scale(0.98);
}

/* ===================================================================
   HOME PAGE
   =================================================================== */

/* Banner Carousel */
.app-carousel {
    position: relative;
    margin-bottom: 8px;
}

.app-carousel__track {
    overflow: hidden;
    border-radius: var(--app-radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.app-carousel__slides {
    display: flex;
    transition: transform 0.5s ease;
}

.app-carousel__slide {
    min-width: 100%;
    height: 176px;
    position: relative;
    overflow: hidden;
}

.app-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.app-carousel__slide:hover img {
    transform: scale(1.05);
}

.app-carousel__slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(43,42,41,0.85), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.app-carousel__slide-title {
    color: white;
    font-size: 16px;
    font-weight: 700;
}

.app-carousel__slide-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    margin-bottom: 10px;
}

.app-carousel__slide-actions {
    display: flex;
    gap: 8px;
}

.app-carousel__btn--outline {
    font-size: 11px;
    font-weight: 500;
    color: white;
    border: 1px solid rgba(255,255,255,0.8);
    padding: 6px 12px;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    font-family: var(--app-font);
    text-decoration: none;
}

.app-carousel__btn--solid {
    font-size: 11px;
    font-weight: 500;
    color: var(--app-text);
    background: white;
    padding: 6px 12px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    font-family: var(--app-font);
    text-decoration: none;
}

.app-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 14px 0 4px;
}

.app-carousel__dot {
    width: 8px;
    height: 6px;
    border-radius: 3px;
    background: #D9D9D9;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.app-carousel__dot.active {
    width: 24px;
    background: var(--app-accent);
}

/* Greeting */
.app-greeting {
    margin: 24px 0 24px;
    padding: 0 4px;
}

.app-greeting__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--app-text);
}

.app-greeting__subtitle {
    font-size: 14px;
    color: var(--app-text-muted);
    margin-top: 6px;
}

/* Member Card */
.app-member-card {
    background: linear-gradient(135deg, #CD2027, #8a151a);
    border-radius: var(--app-radius);
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(205,32,39,0.3);
}

.app-member-card::before {
    content: '';
    position: absolute;
    top: -64px;
    right: -64px;
    width: 128px;
    height: 128px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    filter: blur(32px);
    pointer-events: none;
}

.app-member-card::after {
    content: '';
    position: absolute;
    bottom: -64px;
    left: -64px;
    width: 128px;
    height: 128px;
    background: rgba(0,0,0,0.08);
    border-radius: 50%;
    filter: blur(32px);
    pointer-events: none;
}

.app-member-card__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(211,173,92,0.15) 30%,
        rgba(211,173,92,0.25) 50%,
        rgba(211,173,92,0.15) 70%,
        transparent 100%
    );
    animation: appShimmer 2.5s infinite 4s;
    transform: translateX(-100%);
}

.app-member-card__label {
    font-size: 12px;
    color: rgba(255,200,200,0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.app-member-card__name {
    font-size: 20px;
    font-weight: 700;
}

.app-member-card__id {
    font-size: 14px;
    color: rgba(255,180,180,0.8);
    margin-top: 4px;
    font-family: monospace;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.app-member-card__expiry {
    font-size: 12px;
    color: rgba(255,180,180,0.8);
}

.app-member-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.app-member-card__toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: background 0.2s;
}

.app-member-card__toggle:hover {
    background: rgba(255,255,255,0.25);
}

/* Collapsed Mini Card */
.app-member-card-mini {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid rgba(254,202,202,0.6);
    padding: 14px;
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    margin-bottom: 24px;
    cursor: pointer;
    font-family: var(--app-font);
    transition: all 0.2s;
    animation: appFadeIn 0.3s ease;
}

.app-member-card-mini:active {
    transform: scale(0.99);
}

.app-member-card-mini__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-member-card-mini__icon {
    background: linear-gradient(135deg, #CD2027, #8a151a);
    color: white;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(205,32,39,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-member-card-mini__text {
    text-align: left;
}

.app-member-card-mini__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text);
}

.app-member-card-mini__hint {
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
}

.app-member-card-mini__chevron {
    background: #f9fafb;
    padding: 8px;
    border-radius: 50%;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.app-member-card-mini:hover .app-member-card-mini__chevron {
    color: var(--app-primary);
}

.app-member-card__blurred {
    filter: blur(4px);
    user-select: none;
}

/* Guest CTA */
.app-guest-cta {
    border: 1px solid rgba(254,202,202,0.6);
    border-radius: var(--app-radius);
    padding: 24px;
    background: white;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--app-shadow);
}

.app-guest-cta::after {
    content: '';
    position: absolute;
    top: -32px;
    right: -32px;
    width: 96px;
    height: 96px;
    background: #fef2f2;
    border-radius: 50%;
    opacity: 0.6;
}

.app-guest-cta__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.app-guest-cta__text {
    font-size: 14px;
    color: var(--app-text-muted);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

/* Section Divider (reusable) */
.app-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px;
}

.app-section-divider__line {
    height: 1px;
    background: rgba(12,16,59,0.3);
}

.app-section-divider__text {
    white-space: nowrap;
}

/* Quick Access Grid */
.app-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.app-quick-card {
    background: white;
    border-radius: var(--app-radius);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 128px;
    box-shadow: var(--app-shadow);
    border: 1px solid rgba(229,229,229,0.6);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

.app-quick-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--app-shadow-md);
}

.app-quick-card:active {
    transform: scale(0.97);
}

.app-quick-card:hover .app-quick-card__icon {
    animation: appQuickIconWiggle 0.5s ease;
}

@keyframes appQuickIconWiggle {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(8deg); }
    60% { transform: rotate(-4deg); }
    80% { transform: rotate(0deg); }
}

.app-quick-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.app-quick-card__icon--red {
    background: var(--app-primary);
    color: white;
}

.app-quick-card__icon--navy {
    background: var(--app-accent);
    color: white;
}

.app-quick-card__icon svg {
    width: 24px;
    height: 24px;
}

.app-quick-card__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--app-text);
}

/* Locked card (guest) */
.app-quick-card--locked {
    opacity: 0.7;
    filter: grayscale(0.5);
    pointer-events: none;
    position: relative;
}

.app-quick-card--locked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--app-radius);
    background: rgba(255,255,255,0.5);
}

.app-quick-card__lock {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    color: var(--app-text-muted);
}

/* ===================================================================
   NEWS PAGE
   =================================================================== */
.app-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.app-page-header__title {
    font-size: 20px;
    font-weight: 700;
}

.app-page-header__back {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--app-font);
    font-size: 14px;
    color: var(--app-text);
}

/* Filter Pills */
.app-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.app-filter-pill {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: white;
    color: var(--app-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--app-font);
    white-space: nowrap;
}

.app-filter-pill:hover {
    border-color: #d1d5db;
}

.app-filter-pill.active {
    background: var(--app-primary);
    color: white;
    border-color: var(--app-primary);
    box-shadow: 0 2px 8px rgba(205,32,39,0.2);
}

.app-filter-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0,0,0,0.08);
    margin-left: 4px;
}

.app-filter-pill.active .app-filter-pill__count {
    background: rgba(255,255,255,0.25);
}

/* News Cards */
.app-news-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-news-card {
    border-radius: var(--app-radius);
    overflow: hidden;
    background: white;
    box-shadow: var(--app-shadow);
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid rgba(229,229,229,0.6);
}

.app-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.app-news-card:active {
    transform: scale(0.98);
}

.app-news-card__image {
    height: 160px;
    position: relative;
    overflow: hidden;
}

.app-news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.app-news-card:hover .app-news-card__image img {
    transform: scale(1.06);
}

.app-news-card__image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

.app-news-card__category {
    position: absolute;
    bottom: 12px;
    left: 16px;
}

.app-news-card__category-label {
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-news-card__category-line {
    height: 2.5px;
    width: 48px;
    margin-top: 4px;
    border-radius: 2px;
}

.app-news-card__body {
    padding: 16px;
}

.app-news-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-news-card__date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.app-news-card__date svg {
    width: 14px;
    height: 14px;
}

/* News Detail */
.app-news-detail {
    background: white;
    margin: -16px -16px 0;
}

.app-news-detail__hero {
    height: 288px;
    position: relative;
    overflow: hidden;
}

.app-news-detail__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-news-detail__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.app-news-detail__category-wrap {
    position: absolute;
    bottom: 48px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 5;
}

.app-news-detail__category {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    background: var(--app-primary);
    box-shadow: 0 2px 8px rgba(205,32,39,0.3);
}

.app-news-detail__content {
    background: white;
    border-radius: 24px 24px 0 0;
    margin-top: -24px;
    position: relative;
    z-index: 10;
    padding: 24px 20px;
}

.app-news-detail__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--app-border-light);
}

.app-news-detail__meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* Share Button & Sheet */
.app-news-detail__share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f9fafb;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.app-news-detail__share-btn:hover {
    color: var(--app-primary);
    background: #fef2f2;
}

.app-news-detail__share-sheet {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 20px;
    background: #f9fafb;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border-light);
    animation: appFadeIn 0.2s ease;
}

.app-news-detail__share-sheet.active {
    display: flex;
}

.app-news-detail__share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    width: 64px;
    transition: transform 0.15s;
}

.app-news-detail__share-option:hover {
    transform: scale(1.08);
}

.app-news-detail__share-option:active {
    transform: scale(0.95);
}

.app-news-detail__share-option span {
    font-size: 10px;
    font-weight: 600;
    color: var(--app-text-muted);
}

.app-news-detail__share-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-news-detail__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--app-text);
    margin-bottom: 24px;
}

.app-news-detail__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--app-text-light);
}

.app-news-detail__body p {
    margin-bottom: 16px;
}

.app-news-detail__body img {
    border-radius: 10px;
    margin: 16px 0;
}

/* ===================================================================
   TRAINING PAGE
   =================================================================== */

/* Lock Overlay (guest) */
.app-lock-overlay {
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
}

.app-lock-overlay__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--app-primary-light);
    color: var(--app-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.app-lock-overlay__icon svg {
    width: 28px;
    height: 28px;
}

.app-lock-overlay__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.app-lock-overlay__text {
    font-size: 14px;
    color: var(--app-text-muted);
    margin-bottom: 24px;
    max-width: 300px;
    line-height: 1.5;
}

.app-lock-overlay__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 240px;
}

/* Filter Toggle */
.app-toggle {
    display: flex;
    background: var(--app-bg);
    border-radius: 50px;
    padding: 4px;
    margin-bottom: 16px;
}

.app-toggle__option {
    flex: 1;
    padding: 10px 12px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    color: var(--app-text-muted);
    font-family: var(--app-font);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.app-toggle__option.active {
    background: var(--app-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(205,32,39,0.3);
}

/* Training Cards */
.app-training-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-training-card {
    background: white;
    border-radius: var(--app-radius);
    padding: 16px;
    box-shadow: var(--app-shadow);
    border: 1px solid rgba(229,229,229,0.6);
    transition: all 0.25s ease;
    cursor: pointer;
}

.app-training-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--app-shadow-md);
}

.app-training-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.app-training-card__badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(205,32,39,0.1);
    color: var(--app-primary);
}

.app-training-card__vagas {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
}

.app-training-card__vagas--open {
    background: #dcfce7;
    color: #16a34a;
}

.app-training-card__vagas--full {
    background: #f3f4f6;
    color: #9ca3af;
}

.app-training-card__title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
    color: var(--app-text);
}

.app-training-card__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--app-text-muted);
    margin-bottom: 12px;
}

.app-training-card__meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.app-training-card__meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-training-card__progress {
    height: 6px;
    background: var(--app-border-light);
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}

.app-training-card__progress-bar {
    height: 100%;
    background: #34d399;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.app-training-card__progress-bar--full {
    background: #d1d5db;
}

/* Card action button (lighter ghost style) */
.app-training-card__action-btn {
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--app-primary);
    background: var(--app-bg);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    font-family: var(--app-font);
    transition: background 0.2s;
}

.app-training-card__action-btn:hover {
    background: #fef2f2;
}

.app-training-card__action-btn--full {
    color: #9ca3af;
    background: var(--app-border-light);
}

.app-training-card__action-btn--full:hover {
    background: #e5e7eb;
}

/* Training Detail */
.app-training-detail {
    margin: -16px;
}

.app-training-detail__card {
    background: white;
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    overflow: hidden;
    margin: 16px;
}

.app-training-detail__image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--app-border-light);
}

.app-training-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-training-detail__info {
    padding: 24px;
}

.app-training-detail__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.3;
    margin-bottom: 16px;
}

.app-training-detail__price {
    font-size: 28px;
    font-weight: 700;
    color: var(--app-primary);
}

.app-training-detail__status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 8px;
}

.app-training-detail__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.app-training-detail__status--open {
    color: #059669;
}

.app-training-detail__status--open .app-training-detail__status-dot {
    background: #059669;
}

.app-training-detail__status--full {
    color: #dc2626;
}

.app-training-detail__status--full .app-training-detail__status-dot {
    background: #dc2626;
}

/* Tab Bar */
.app-training-detail__tabs {
    display: flex;
    gap: 24px;
    padding: 0 24px;
    border-bottom: 1px solid var(--app-border-light);
    overflow-x: auto;
}

.app-training-detail__tab {
    padding: 16px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text-muted);
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: var(--app-font);
    white-space: nowrap;
    transition: all 0.2s;
}

.app-training-detail__tab:hover {
    color: var(--app-text);
}

.app-training-detail__tab.active {
    color: var(--app-primary);
    border-bottom-color: var(--app-primary);
}

/* Tab Panels */
.app-training-detail__tab-panels {
    padding: 24px;
    min-height: 200px;
}

.app-training-detail__panel {
    display: none;
    animation: appFadeIn 0.2s ease;
}

.app-training-detail__panel.active {
    display: block;
}

/* ===================================================================
   AGENDA / CALENDAR
   =================================================================== */

/* Tab Switcher */
.app-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--app-border-light);
    border-radius: 9999px;
    padding: 4px;
    margin-bottom: 16px;
}

.app-tab {
    flex: 1;
    padding: 10px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    color: var(--app-text-muted);
    font-family: var(--app-font);
    white-space: nowrap;
}

.app-tab.active {
    background: var(--app-primary);
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Calendar */
.app-calendar {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid var(--app-border-light);
    margin-bottom: 16px;
}

.app-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #fafafa;
}

.app-calendar__nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #9ca3af;
}

.app-calendar__nav-btn:hover {
    background: #f9fafb;
    color: #1f2937;
}

.app-calendar__month {
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
}

.app-calendar__grid {
    padding: 16px;
}

.app-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
}

.app-calendar__weekday {
    font-size: 12px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0;
}

.app-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px 0;
}

.app-calendar__day {
    width: 36px;
    height: 36px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid transparent;
}

.app-calendar__day:hover {
    background: var(--app-bg);
}

.app-calendar__day--other {
    color: #d1d5db;
}

.app-calendar__day--today {
    border-color: var(--app-primary);
    color: var(--app-primary);
    font-weight: 700;
}

.app-calendar__day--selected {
    background: var(--app-primary);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(254,202,202,0.5);
}

.app-calendar__day--selected:hover {
    background: var(--app-primary-hover);
}

.app-calendar__dots {
    display: flex;
    gap: 2px;
    position: absolute;
    bottom: 2px;
}

.app-calendar__event-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.app-calendar__event-dot--meeting { background: #3b82f6; }
.app-calendar__event-dot--training { background: #22c55e; }
.app-calendar__event-dot--action { background: #ef4444; }
.app-calendar__event-dot--holiday { background: #f59e0b; }
.app-calendar__event-dot--exam { background: #8b5cf6; }

/* Event List */
.app-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-event-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--app-shadow);
    border: 1px solid rgba(229,229,229,0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.app-event-card:hover {
    border-color: rgba(205,32,39,0.15);
    box-shadow: var(--app-shadow-md);
}

/* Figma-style 3-column layout: time | content | action */
.app-event-card__layout {
    display: flex;
    gap: 16px;
}

/* Left: time + dot, vertically centered, with right border */
.app-event-card__time-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    border-right: 1px solid var(--app-border-light);
    padding-right: 16px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.app-event-card__time {
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text);
    white-space: nowrap;
}

.app-event-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px;
}

/* Center: title + location + description */
.app-event-card__content {
    flex: 1;
    min-width: 0;
}

.app-event-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--app-text);
    margin: 0;
    line-height: 1.3;
}

.app-event-card__location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--app-text-muted);
    margin-top: 4px;
}

.app-event-card__location svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.app-event-card__description {
    font-size: 12px;
    color: var(--app-text-light);
    background: var(--app-bg);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 8px;
    line-height: 1.5;
}

/* Right: calendar icon button */
.app-event-card__cal-btn {
    align-self: flex-start;
    padding: 8px;
    color: #d1d5db;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.app-event-card__cal-btn:hover {
    color: var(--app-primary);
    background: rgba(205,32,39,0.05);
}

.app-event-card__cal-btn svg {
    width: 20px;
    height: 20px;
}

/* Empty State */
.app-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
}

.app-empty__icon {
    width: 48px;
    height: 48px;
    color: #d1d5db;
    margin-bottom: 12px;
}

.app-empty__text {
    font-size: 14px;
    color: var(--app-text-muted);
}

/* ===================================================================
   SCHOOL CALENDAR
   =================================================================== */
.app-school-term {
    background: white;
    border-radius: var(--app-radius);
    padding: 16px;
    box-shadow: var(--app-shadow);
    border: 1px solid rgba(229,229,229,0.6);
    margin-bottom: 16px;
}

.app-school-term__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--app-primary);
    margin-bottom: 8px;
}

.app-school-term__dates {
    background: var(--app-bg);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--app-text);
    margin-bottom: 12px;
}

.app-school-term__breaks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app-school-term__break {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--app-text-light);
}

.app-school-term__break-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}

/* ===================================================================
   MORE PAGE
   =================================================================== */
.app-profile-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: white;
    border-radius: var(--app-radius);
    border: 1px solid rgba(243,244,246,0.6);
    box-shadow: var(--app-shadow);
    margin-bottom: 24px;
}

.app-profile-section__avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.app-profile-section__avatar--member {
    background: var(--app-primary-light);
    color: var(--app-primary);
}

.app-profile-section__avatar--guest {
    background: var(--app-bg);
    color: var(--app-text-muted);
}

.app-profile-section__name {
    font-size: 18px;
    font-weight: 700;
}

.app-profile-section__id {
    font-size: 14px;
    color: var(--app-text-muted);
}

.app-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.app-section-label__line {
    height: 1px;
    background: rgba(12,16,59,0.3);
}

.app-section-label__line:first-child {
    width: 16px;
}

.app-section-label__line:last-child {
    flex: 1;
}

.app-section-label__text,
.app-section-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--app-accent);
}

.app-menu-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.app-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: var(--app-radius);
    border: 1px solid rgba(243,244,246,0.6);
    box-shadow: var(--app-shadow);
    cursor: pointer;
    transition: all 0.2s ease;
}

.app-menu-item:hover {
    box-shadow: var(--app-shadow-md);
}

.app-menu-item:active {
    transform: scale(0.99);
}

.app-menu-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(205,32,39,0.08);
    color: var(--app-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-menu-item__icon svg {
    width: 20px;
    height: 20px;
}

.app-menu-item__content {
    flex: 1;
}

.app-menu-item__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--app-text);
}

.app-menu-item__desc {
    font-size: 12px;
    color: var(--app-text-muted);
    margin-top: 2px;
}

.app-menu-item__chevron {
    color: #d1d5db;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Guest info box */
.app-info-box {
    border-radius: var(--app-radius);
    padding: 16px;
    margin-bottom: 16px;
}

.app-info-box--red {
    background: rgba(205,32,39,0.05);
    border: 1px solid rgba(205,32,39,0.15);
}

.app-info-box--blue {
    background: rgba(59,130,246,0.05);
    border: 1px solid rgba(59,130,246,0.15);
}

.app-info-box__text {
    font-size: 13px;
    color: var(--app-text-light);
    line-height: 1.5;
    margin-bottom: 12px;
}

/* ===================================================================
   CONTENT PAGE (Legislação, Regalias, etc.)
   =================================================================== */
.app-content-page__title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}

.app-content-page__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--app-text-light);
}

.app-content-page__body h1,
.app-content-page__body h2,
.app-content-page__body h3 {
    color: var(--app-text);
    margin: 24px 0 12px;
}

.app-content-page__body h2 { font-size: 18px; }
.app-content-page__body h3 { font-size: 16px; }

.app-content-page__body p {
    margin-bottom: 14px;
}

.app-content-page__body ul,
.app-content-page__body ol {
    padding-left: 20px;
    margin-bottom: 14px;
}

.app-content-page__body li {
    margin-bottom: 6px;
    list-style: disc;
}

.app-content-page__body img {
    border-radius: 10px;
    margin: 16px 0;
}

.app-content-page__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}

.app-content-page__body th,
.app-content-page__body td {
    padding: 8px 12px;
    border: 1px solid var(--app-border);
    text-align: left;
}

.app-content-page__body th {
    background: var(--app-bg);
    font-weight: 600;
}

/* ===================================================================
   CONTACTS PAGE
   =================================================================== */
.app-contacts__map {
    width: calc(100% + 32px);
    margin: -16px -16px 16px;
    height: 200px;
    background: var(--app-bg);
}

.app-contacts__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.app-contacts__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-contacts__card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    border: 1px solid rgba(229,229,229,0.6);
}

.app-contacts__card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(205,32,39,0.08);
    color: var(--app-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-contacts__card-label {
    font-size: 12px;
    color: var(--app-text-muted);
    margin-bottom: 2px;
}

.app-contacts__card-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--app-text);
}

/* ===================================================================
   SEARCH RESULTS
   =================================================================== */
.app-search__input-card {
    background: white;
    padding: 16px;
    border-radius: var(--app-radius);
    border: 1px solid rgba(243,244,246,0.6);
    box-shadow: var(--app-shadow);
    margin-bottom: 20px;
}

.app-search__input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: var(--app-bg);
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-family: var(--app-font);
    color: var(--app-text);
    outline: none;
    transition: all 0.2s;
}

.app-search__input:focus {
    border-color: rgba(205,32,39,0.3);
    box-shadow: 0 0 0 2px rgba(205,32,39,0.15);
}

.app-search__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.app-search__results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-search__result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    border: 1px solid rgba(243,244,246,0.6);
    cursor: pointer;
    transition: all 0.2s;
}

.app-search__result:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.app-search__result:hover .app-search__result-title {
    color: var(--app-primary);
}

.app-search__result:hover .app-search__result-icon {
    background: #fef2f2 !important;
}

.app-search__result-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.app-search__result-body {
    flex: 1;
    min-width: 0;
}

.app-search__result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.app-search__result-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--app-text);
    transition: color 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-search__result-date {
    font-size: 10px;
    color: #9ca3af;
    white-space: nowrap;
}

.app-search__result-desc {
    font-size: 12px;
    color: var(--app-text-muted);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-search__result-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    background: var(--app-border-light);
    color: #4b5563;
    border-radius: 4px;
    margin-top: 8px;
}

.app-search__empty {
    text-align: center;
    padding: 48px 24px;
}

.app-search__empty-icon {
    width: 64px;
    height: 64px;
    background: var(--app-border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

/* ===================================================================
   LOGIN / REGISTER PAGE
   =================================================================== */
.app-auth {
    padding: 24px 16px;
    min-height: 100vh;
    background: var(--app-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow-y: auto;
}

.app-auth__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--app-primary);
}

.app-auth__logo {
    display: block;
    height: 56px !important;
    width: auto;
    margin: 8px auto 20px;
}

.app-auth__toggle {
    display: flex;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    padding: 4px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.app-auth__toggle-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: calc(50% - 4px);
    background: var(--app-primary);
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(205,32,39,0.25);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    left: 4px;
}

.app-auth__toggle-indicator.right {
    left: calc(50%);
}

.app-auth__toggle-btn {
    flex: 1;
    padding: 10px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s;
    border: none;
    font-family: var(--app-font);
    background: transparent;
    color: var(--app-text-muted);
    position: relative;
    z-index: 1;
}

.app-auth__toggle-btn.active {
    color: white;
}

.app-auth__card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(243,244,246,0.8);
    overflow: hidden;
    margin-bottom: 20px;
}

.app-auth__card-inner {
    padding: 24px;
}

.app-auth__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--app-text);
    margin-bottom: 4px;
}

.app-auth__subtitle {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 16px;
}

.app-auth__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-auth__form[style*="display: none"] {
    display: none !important;
}

.app-auth__switch {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.app-auth__switch a,
.app-auth__switch button {
    color: var(--app-primary);
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--app-font);
    font-size: 12px;
}

.app-auth__back {
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--app-font);
    margin: 0 auto;
}

.app-auth__footer {
    font-size: 10px;
    color: #d1d5db;
    text-align: center;
    padding: 16px 0 8px;
    margin-top: auto;
}

/* Form Fields */
.app-field {
    position: relative;
}

.app-field__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    margin-left: 4px;
}

.app-field__label--required::after {
    content: '*';
    color: var(--app-primary);
    font-size: 12px;
}

.app-field__input-wrap {
    position: relative;
}

.app-field__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    width: 17px;
    height: 17px;
    pointer-events: none;
    z-index: 1;
}

.app-field__input,
.app-field__select,
.app-field__textarea {
    width: 100%;
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0 14px;
    font-family: var(--app-font);
    font-size: 14px;
    color: var(--app-text);
    background: #f9fafb;
    transition: all 0.15s;
    outline: none;
}

.app-field__input::placeholder {
    color: #9ca3af;
}

.app-field__input--with-icon {
    padding-left: 42px;
}

.app-field__input:focus {
    border-color: var(--app-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(205,32,39,0.08);
}

.app-field__select:focus,
.app-field__textarea:focus {
    border-color: var(--app-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(205,32,39,0.08);
}

.app-field__textarea {
    height: auto;
    min-height: 80px;
    padding: 10px 12px;
    resize: vertical;
}

.app-field__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.app-field__eye-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--app-text-muted);
    cursor: pointer;
    padding: 4px;
}

.app-field__error {
    font-size: 12px;
    color: var(--app-primary);
    margin-top: 4px;
}

.app-field__input.error,
.app-field__select.error {
    border-color: var(--app-primary);
    background: #fef2f2;
    box-shadow: 0 0 0 3px rgba(205,32,39,0.08);
}

.app-auth__link {
    font-size: 12px;
    color: var(--app-primary);
    text-align: right;
    cursor: pointer;
    font-weight: 500;
}

.app-auth__cta-btn {
    width: 100%;
    padding: 14px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 14px;
    background: var(--app-primary);
    color: white;
    border: none;
    cursor: pointer;
    font-family: var(--app-font);
    box-shadow: 0 4px 12px rgba(205,32,39,0.25);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.app-auth__cta-btn:hover {
    background: var(--app-primary-hover);
}

/* ===================================================================
   SINDICALIZACAO WIZARD
   =================================================================== */
.app-wizard {
    min-height: 100vh;
    background: var(--app-bg);
    display: flex;
    flex-direction: column;
}

/* Wizard Header */
.app-wizard__header {
    background: white;
    border-bottom: 1px solid rgba(243,244,246,0.8);
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.app-wizard__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-wizard__header-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--app-text-muted);
    transition: all 0.2s;
    margin-left: -8px;
}

.app-wizard__header-back:hover {
    color: var(--app-primary);
    background: #fef2f2;
}

.app-wizard__header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.2;
}

.app-wizard__header-subtitle {
    font-size: 12px;
    color: var(--app-text-muted);
}

.app-wizard__header-badge {
    font-size: 12px;
    font-weight: 500;
    background: rgba(0,0,30,0.1);
    color: #00001E;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(0,0,30,0.2);
    white-space: nowrap;
}

/* Wizard Content */
.app-wizard__content {
    flex: 1;
    padding: 24px 16px;
    padding-bottom: 16px;
    max-width: var(--app-max-width);
    width: 100%;
    margin: 0 auto;
}

/* Progress Indicator */
.app-wizard__progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 56px;
    padding: 0 8px;
}

/* Background line */
.app-wizard__progress-bg {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 0;
}

/* Active progress line (gradient) */
.app-wizard__progress-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    background: linear-gradient(to right, #00001E, var(--app-primary));
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 1;
    transition: width 0.5s ease-in-out;
    width: 0%;
}

.app-wizard__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.app-wizard__step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 4px solid #f9fafb;
    color: #d1d5db;
    background: white;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.app-wizard__step-circle svg {
    width: 18px;
    height: 18px;
}

.app-wizard__step--active .app-wizard__step-circle {
    background: var(--app-primary);
    border-color: white;
    color: white;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(205,32,39,0.3);
}

.app-wizard__step--completed .app-wizard__step-circle {
    background: #00001E;
    border-color: white;
    color: white;
    box-shadow: 0 2px 8px rgba(211,173,92,0.3);
}

.app-wizard__step-label {
    position: absolute;
    top: 48px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: var(--app-text);
    opacity: 0;
    transition: opacity 0.3s;
}

.app-wizard__step--active .app-wizard__step-label {
    opacity: 1;
}

/* Form Card */
.app-wizard__card {
    background: white;
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    border: 1px solid rgba(243,244,246,0.6);
    overflow: hidden;
}

.app-wizard__card-inner {
    padding: 24px;
}

/* Step Title with accent bar */
.app-wizard__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.app-wizard__title-bar {
    width: 4px;
    height: 24px;
    background: #00001E;
    border-radius: 2px;
    flex-shrink: 0;
}

.app-wizard__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--app-text);
}

.app-wizard__subtitle {
    font-size: 14px;
    color: var(--app-text-muted);
    margin-bottom: 32px;
    margin-left: 12px;
}

/* Panels */
.app-wizard__panel {
    display: none;
}

.app-wizard__panel.active {
    display: block;
    animation: appFadeIn 0.3s ease;
}

/* Fields container */
.app-wizard__fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Navigation Buttons */
.app-wizard__actions {
    display: flex;
    gap: 16px;
    padding-top: 32px;
}

.app-wizard__btn-back {
    width: 33%;
    padding: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text-muted);
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    font-family: var(--app-font);
    transition: background 0.2s;
}

.app-wizard__btn-back:hover {
    background: #f9fafb;
}

.app-wizard__btn-next {
    flex: 1;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    background: var(--app-primary);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    font-family: var(--app-font);
    box-shadow: 0 4px 12px rgba(205,32,39,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.app-wizard__btn-next:hover {
    background: var(--app-primary-hover);
}

.app-wizard__btn-next:active {
    transform: scale(0.98);
}

/* Info box */
.app-wizard__info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--app-radius);
    padding: 16px;
    font-size: 14px;
    color: #1e40af;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
}

.app-wizard__info svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #3b82f6;
    margin-top: 2px;
}

/* Grouped sections */
.app-wizard__group {
    background: #f9fafb;
    padding: 16px;
    border-radius: var(--app-radius);
    border: 1px solid rgba(243,244,246,0.6);
}

.app-wizard__group--highlight {
    background: rgba(205,32,39,0.03);
    border-color: rgba(205,32,39,0.15);
}

.app-wizard__group-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.app-wizard__group--highlight .app-wizard__group-title {
    color: rgba(205,32,39,0.6);
}

/* Responsive grid: 2 cols on wider screens, 1 col on narrow */
.app-wizard__grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.app-wizard__grid-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 360px) {
    .app-wizard__grid-2,
    .app-wizard__grid-responsive {
        grid-template-columns: 1fr;
    }
}

/* Checkbox toggle (same school) */
.app-wizard__checkbox-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.app-wizard__checkbox-toggle:hover {
    color: #111827;
}

.app-wizard__checkbox-box {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid #d1d5db;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    color: transparent;
}

.app-wizard__checkbox-box.checked {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: white;
}

/* Validation method options */
.app-wizard__validation-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-radius: var(--app-radius);
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 12px;
}

.app-wizard__validation-option:first-child {
    background: #fef2f2;
    border-color: #fecaca;
}

.app-wizard__validation-option:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.app-wizard__validation-option:first-child:hover {
    background: #fee2e2;
}

.app-wizard__validation-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Video room */
.app-wizard__video-room {
    background: linear-gradient(135deg, #2B2A29, #3d3c3b);
    border-radius: var(--app-radius);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(43,42,41,0.2);
    position: relative;
}

/* Checkbox */
.app-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 12px;
}

.app-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--app-primary);
    margin-top: 2px;
}

.app-checkbox__label {
    font-size: 13px;
    color: var(--app-text-light);
    line-height: 1.4;
}

/* Validation options (Step 5) */
.app-validation-option {
    border: 2px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.app-validation-option.selected {
    border-color: var(--app-primary);
    background: var(--app-primary-light);
}

.app-validation-option__title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.app-validation-option__desc {
    font-size: 12px;
    color: var(--app-text-muted);
}

/* Time slots */
.app-time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.app-time-slot {
    padding: 8px 16px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    font-family: var(--app-font);
}

.app-time-slot.selected {
    background: var(--app-primary);
    color: white;
    border-color: var(--app-primary);
}

/* Day selector (horizontal scroll) */
.app-day-selector {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-top: 12px;
}

.app-day-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    flex-shrink: 0;
    font-family: var(--app-font);
}

.app-day-btn.selected {
    background: var(--app-primary);
    color: white;
    border-color: var(--app-primary);
}

.app-day-btn__weekday {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.app-day-btn__date {
    font-size: 16px;
    font-weight: 700;
    margin-top: 2px;
}

/* ===================================================================
   CHAT WIDGET
   =================================================================== */
.app-chat-popup {
    position: absolute;
    top: 80px;
    left: 16px;
    width: calc(100% - 32px);
    max-width: 280px;
    z-index: 55;
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    transform-origin: top left;
    transition: all 0.2s ease;
    pointer-events: none;
}

.app-chat-popup.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.app-chat-popup__arrow {
    position: absolute;
    top: -8px;
    left: 24px;
    width: 16px;
    height: 16px;
    background: var(--app-primary);
    transform: rotate(45deg);
    z-index: 1;
}

.app-chat-popup__header {
    background: var(--app-primary);
    padding: 16px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.app-chat-popup__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.app-chat-popup__subtitle {
    font-size: 10px;
    color: rgba(255,255,255,0.8);
    line-height: 1.2;
}

.app-chat-popup__body {
    background: white;
    padding: 16px;
    border-radius: 0 0 16px 16px;
    border: 1px solid var(--app-border-light);
    border-top: none;
    position: relative;
    z-index: 2;
}

.app-chat-popup__bubble {
    background: white;
    padding: 12px;
    border-radius: 16px;
    border-top-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    border: 1px solid var(--app-border-light);
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 16px;
    line-height: 1.5;
}

.app-chat-popup__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #25D366;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--app-font);
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(37,211,102,0.2);
}

.app-chat-popup__whatsapp:hover {
    background: #20bd5a;
    box-shadow: 0 6px 12px rgba(37,211,102,0.3);
}

.app-chat-popup__whatsapp:active {
    transform: scale(0.98);
}

.app-chat-popup__note {
    font-size: 10px;
    text-align: center;
    color: #9ca3af;
    margin-top: 12px;
}

/* ===================================================================
   LOADING & UTILITY
   =================================================================== */
.app-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.app-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--app-border);
    border-top-color: var(--app-primary);
    border-radius: 50%;
    animation: appSpin 0.8s linear infinite;
}

.app-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: appSkeletonPulse 1.5s infinite;
    border-radius: 8px;
}

/* ===================================================================
   ANIMATIONS
   =================================================================== */
@keyframes appFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes appNavIconPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes appShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes appSpin {
    to { transform: rotate(360deg); }
}

@keyframes appSkeletonPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes appStaggerIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Staggered entrance for list items */
.app-stagger > *:nth-child(1) { animation: appStaggerIn 0.35s ease 0.0s both; }
.app-stagger > *:nth-child(2) { animation: appStaggerIn 0.35s ease 0.06s both; }
.app-stagger > *:nth-child(3) { animation: appStaggerIn 0.35s ease 0.12s both; }
.app-stagger > *:nth-child(4) { animation: appStaggerIn 0.35s ease 0.18s both; }
.app-stagger > *:nth-child(5) { animation: appStaggerIn 0.35s ease 0.24s both; }
.app-stagger > *:nth-child(6) { animation: appStaggerIn 0.35s ease 0.30s both; }
.app-stagger > *:nth-child(7) { animation: appStaggerIn 0.35s ease 0.36s both; }
.app-stagger > *:nth-child(8) { animation: appStaggerIn 0.35s ease 0.42s both; }
.app-stagger > *:nth-child(9) { animation: appStaggerIn 0.35s ease 0.48s both; }
.app-stagger > *:nth-child(10) { animation: appStaggerIn 0.35s ease 0.54s both; }

/* Prevent body scroll when drawer is open */
body.app-drawer-open {
    overflow: hidden;
}

/* ===================================================================
   AGENDA: Hoje pill button
   =================================================================== */
.app-btn-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    font-family: var(--app-font);
    transition: all 0.2s ease;
}

.app-btn-pill--primary {
    background: rgba(205,32,39,0.08);
    color: var(--app-primary);
}

.app-btn-pill--primary:hover {
    background: rgba(205,32,39,0.15);
}

/* ===================================================================
   AGENDA: Selected day label
   =================================================================== */
.app-agenda-day-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 8px;
}

.app-agenda-day-label__text {
    font-size: 13px;
    font-weight: 700;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.app-agenda-day-label__line {
    flex: 1;
    height: 1px;
    background: var(--app-border-light);
}

/* ===================================================================
   AGENDA: Event card category label
   =================================================================== */
.app-event-card__category {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

/* ===================================================================
   AGENDA: Event Detail Page
   =================================================================== */
.app-agenda-detail {
    padding: 24px;
    padding-bottom: 80px; /* space for sticky CTA */
    background: white;
    border-radius: 16px;
}

.app-agenda-detail__hero {
    position: relative;
    height: 220px;
    overflow: hidden;
    margin: -24px -24px 0;
}

.app-agenda-detail__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-agenda-detail__type-badge {
    display: inline-block;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 9999px;
    position: absolute;
    top: 16px;
    left: 16px;
    box-shadow: 0 2px 8px rgba(205,32,39,0.2);
}

.app-agenda-detail__type-badge--inline {
    position: static;
}

.app-agenda-detail__content {
    padding: 0;
}

/* Overlap hero image like Figma */
.app-agenda-detail__content--overlap {
    background: white;
    border-radius: 16px 16px 0 0;
    margin-top: -16px;
    position: relative;
    z-index: 1;
    padding: 24px 24px 0;
}

/* Sticky CTA bar — sits above bottom nav, constrained to app container */
.app-agenda-detail__sticky-cta {
    position: fixed;
    bottom: var(--app-nav-height);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--app-max-width);
    background: white;
    border-top: 1px solid var(--app-border-light);
    padding: 12px 24px;
    z-index: 30;
}

.app-agenda-detail__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: #2B2A29;
    color: white;
    border: none;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--app-font);
    cursor: pointer;
    transition: background 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.app-agenda-detail__cta-btn:hover {
    background: #1a1a1a;
}

.app-agenda-detail__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.3;
    margin-bottom: 4px;
}

.app-agenda-detail__subtitle {
    font-size: 14px;
    color: var(--app-text-muted);
    margin-bottom: 16px;
}

.app-agenda-detail__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.app-agenda-detail__info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.app-agenda-detail__info-icon {
    width: 40px;
    height: 40px;
    background: rgba(205,32,39,0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-primary);
    flex-shrink: 0;
}

.app-agenda-detail__info-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--app-text);
}

.app-agenda-detail__info-value {
    font-size: 14px;
    color: var(--app-text-light);
}

.app-agenda-detail__section {
    padding-top: 20px;
    border-top: 1px solid var(--app-border-light);
}

.app-agenda-detail__section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--app-text);
    margin-bottom: 12px;
}

/* ===== Bootstrap DateTimePicker - App Theme Overrides ===== */

/* Minimal dropdown support (Bootstrap base CSS not loaded) */
.bootstrap-datetimepicker-widget.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 9999;
    background-color: #fff;
    background-clip: padding-box;
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
}

/* Widget container */
.bootstrap-datetimepicker-widget {
    font-family: var(--app-font);
    border-radius: 12px !important;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 8px;
    overflow: hidden;
    max-width: calc(100vw - 32px);
}

/* Active/selected day */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--app-primary) !important;
    color: #fff !important;
    border-radius: 8px;
}

/* Today indicator */
.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--app-primary);
}

/* Hover state */
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td span:hover {
    background: rgba(205,32,39,0.08) !important;
    border-radius: 8px;
}

/* Table header (day names) */
.bootstrap-datetimepicker-widget table th {
    font-weight: 600;
    font-size: 12px;
    color: var(--app-text-muted);
}

/* Navigation arrows */
.bootstrap-datetimepicker-widget table thead tr:first-child th {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text);
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: rgba(205,32,39,0.08);
    border-radius: 8px;
}

/* Day cells */
.bootstrap-datetimepicker-widget table td {
    font-size: 14px;
    padding: 6px;
    border-radius: 8px;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: var(--app-text-muted);
    opacity: 0.5;
}