* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(140deg, #0f4c4a 0%, #115e59 28%, #0f766e 52%, #155e75 72%, #164e63 100%);
    background-size: 320% 320%;
    animation: gradientShift 48s ease infinite;
    color: #333;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

@keyframes gradientShift {
    0% { background-position: 0% 40%; }
    50% { background-position: 100% 60%; }
    100% { background-position: 0% 40%; }
}

.container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

/* Sidebar Styles */
.sidebar {
    width: 300px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    backdrop-filter: blur(10px);
    color: #1e293b;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-right: 1px solid rgba(226, 232, 240, 0.8);
}

.sidebar-header {
    padding: 28px 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(255, 255, 255, 0.5);
}

.logo {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.logo-image {
    width: 40px;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.logo-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo i {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 30px;
}

.site-security-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    color: #64748b;
    background: rgba(241, 245, 249, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.9);
    cursor: default;
    outline: none;
}

.site-security-strip:focus-visible {
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.35);
}

.site-security-strip--secure {
    color: #065f46;
    background: rgba(236, 253, 245, 0.88);
    border-color: rgba(167, 243, 208, 0.75);
}

.site-security-strip--secure .site-security-icon {
    color: #059669;
}

.site-security-strip--warn {
    color: #92400e;
    background: rgba(255, 251, 235, 0.92);
    border-color: rgba(253, 230, 138, 0.85);
}

.site-security-strip--warn .site-security-icon {
    color: #d97706;
}

.site-security-icon {
    font-size: 12px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.site-security-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-balance {
    margin-top: 12px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.wallet-balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.wallet-balance-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wallet-toggle {
    background: none;
    border: none;
    color: #667eea;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.wallet-toggle:hover {
    background: rgba(102, 126, 234, 0.1);
}

.wallet-amount {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Courier New', monospace;
}

.transfer-amount-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #10b981 100%);
    background-size: 200% 200%;
    animation: transferAmountBlink 2s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.transfer-amount-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}

.transfer-amount-btn i {
    font-size: 14px;
}

.cash-out-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 30%, #1d4ed8 50%, #dc2626 70%, #fbbf24 100%);
    background-size: 200% 200%;
    animation: cashOutBlink 5s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cash-out-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.5);
}

.cash-out-btn i {
    font-size: 14px;
}

.cash-in-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(135deg, #10b981 0%, #059669 30%, #047857 50%, #065f46 70%, #34d399 100%);
    background-size: 200% 200%;
    animation: cashInBlink 5s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cash-in-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
}

.cash-in-btn i {
    font-size: 14px;
}

@keyframes cashInBlink {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Cash In Received (Admin only) - menu badge and blinking */
.cashin-received-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 11px;
    margin-left: auto;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.cashin-received-menu.cashin-received-blink {
    animation: cashin-received-blink 1.2s ease-in-out infinite;
}

@keyframes cashin-received-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { opacity: 0.9; box-shadow: 0 0 12px 4px rgba(239, 68, 68, 0.3); }
}

@keyframes cashOutBlink {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes transferAmountBlink {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.wallet-amount.hidden {
    filter: blur(8px);
    user-select: none;
}

.sidebar-nav {
    padding: 20px 0;
}

/* Search box: always visible above the menu list (above Home) for all users */
.menu-search-wrap {
    display: block;
    position: relative;
    padding: 0 16px 12px;
    margin: 0 0 8px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    min-height: 52px;
    box-sizing: border-box;
}

.menu-search-input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    font-size: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.menu-search-input::placeholder {
    color: #94a3b8;
}

.menu-search-input:focus {
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.menu-search-icon {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
}

.sidebar .menu-search-wrap .menu-search-input:focus + .menu-search-icon {
    color: #667eea;
}

.menu-search-suggestions {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: 100%;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    z-index: 1000;
}

.menu-search-suggestion-item {
    padding: 12px 14px;
    font-size: 14px;
    color: #1e293b;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.menu-search-suggestion-item:last-child {
    border-bottom: none;
}

.menu-search-suggestion-item:hover {
    background: #f0f9ff;
}

.menu-search-no-match {
    color: #64748b;
    cursor: default;
}

.menu-search-no-match:hover {
    background: transparent;
}

.menu-list {
    list-style: none;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    color: #475569;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    font-size: 15px;
    position: relative;
}

.menu-item i {
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.3);
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

.menu-item span {
    flex: 1;
}

.menu-item-aznar-draft-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.menu-item-aznar-draft-title {
    font-size: 15px;
    font-weight: inherit;
    line-height: 1.25;
}

.menu-item-aznar-draft-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.35;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.menu-item:hover {
    background-color: rgba(102, 126, 234, 0.1);
    border-left-color: #667eea;
    color: #1e293b;
    padding-left: 28px;
}

.menu-item:hover i {
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.2);
    animation: iconBlink 0.6s ease-in-out infinite;
}

@keyframes iconBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1.15);
        filter: brightness(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.25);
        filter: brightness(1.3);
    }
}

.menu-item.active {
    background-color: rgba(102, 126, 234, 0.15);
    border-left-color: #667eea;
    color: #1e293b;
    font-weight: 600;
}

.menu-item.active i {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.4);
    border-color: rgba(0, 0, 0, 0.25);
    transform: scale(1.1);
}

.menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

/* Colorful Icon Gradients for Each Menu Item - Darker, More Visible Colors */
.menu-item[data-menu="home"] i {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.menu-item[data-menu="wallet"] i {
    background: linear-gradient(135deg, #d946ef 0%, #e11d48 100%);
}

.menu-item[data-menu="cashin"] i {
    background: linear-gradient(135deg, #3b82f6 0%, #0284c7 100%);
}

.menu-item[data-menu="cashinreceived"] i {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.menu-item[data-menu="sendmoney"] i {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.menu-item[data-menu="paybills"] i {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.menu-item[data-menu="globalpayments"] i {
    background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
}

.menu-item[data-menu="socialmedia"] i {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.menu-item[data-menu="livevideo"] i {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.menu-item[data-menu="farmersvlogger"] i,
.menu-item.farmers-vlogger i {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.menu-item[data-menu="dating"] i {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.menu-item[data-menu="music"] i {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.menu-item[data-menu="youtube"] i {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.menu-item[data-menu="airlines"] i {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.menu-item[data-menu="hotels"] i {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}

.menu-item[data-menu="cars"] i {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.menu-item[data-menu="ferry"] i {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.menu-item[data-menu="delivery"] i {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.menu-item[data-menu="emergency"] i {
    background: linear-gradient(135deg, #0038a8 0%, #ce1126 100%);
}

.menu-item-emergency-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding-right: 10px;
    list-style: none;
}

.menu-item-emergency-row .menu-item {
    flex: 1;
    min-width: 0;
}

.emergency-menu-add-btn {
    flex-shrink: 0;
    align-self: center;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #0038a8 0%, #0038a8 50%, #ce1126 50%, #ce1126 100%);
}

.emergency-menu-add-btn:hover {
    filter: brightness(1.08);
    transform: scale(1.05);
}

@keyframes phFlagBlinkBtn {
    0% {
        background: linear-gradient(135deg, #0038a8 0%, #0038a8 55%, #ce1126 55%);
        box-shadow: 0 0 0 2px #fcd116, 0 2px 10px rgba(0, 56, 168, 0.5);
    }
    33% {
        background: linear-gradient(180deg, #0038a8 0%, #0038a8 33%, #ce1126 33%, #ce1126 66%, #fcd116 66%);
        box-shadow: 0 0 0 3px #fff, 0 2px 12px rgba(206, 17, 38, 0.55);
    }
    66% {
        background: linear-gradient(90deg, #0038a8 0%, #ce1126 50%, #fcd116 50%);
        box-shadow: 0 0 0 2px #0038a8, 0 2px 10px rgba(252, 209, 22, 0.45);
    }
    100% {
        background: linear-gradient(135deg, #0038a8 0%, #0038a8 55%, #ce1126 55%);
        box-shadow: 0 0 0 2px #fcd116, 0 2px 10px rgba(0, 56, 168, 0.5);
    }
}

.ph-flag-blink-btn {
    animation: phFlagBlinkBtn 2.2s ease-in-out infinite;
}

@keyframes phFlagUnreadPulse {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.92;
        filter: brightness(1.25);
    }
}

.emergency-alert-pulse.menu-item {
    animation: phFlagUnreadPulse 0.85s ease-in-out infinite;
    border-left-color: #ce1126 !important;
}

.emergency-menu-has-unread .menu-item[data-menu="emergency"] {
    background-color: rgba(206, 17, 38, 0.08);
}

.emergency-menu-add-btn.emergency-alert-pulse {
    animation: phFlagBlinkBtn 0.75s ease-in-out infinite, phFlagUnreadPulse 0.75s ease-in-out infinite;
}

.emergency-alerts-panel .emergency-preset-box {
    margin-bottom: 16px;
}

.emergency-panel-actions {
    margin-bottom: 20px;
}

.emergency-section-title {
    margin: 20px 0 12px;
    font-size: 1.05rem;
    color: #1e293b;
}

.emergency-groups-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.emergency-group-card {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.emergency-group-card--unread {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.emergency-group-card-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.emergency-unread-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 6px;
    background: linear-gradient(135deg, #0038a8, #ce1126);
    color: #fff;
    vertical-align: middle;
    animation: phFlagUnreadPulse 1s ease-in-out infinite;
}

.emergency-room-thread {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    background: #f8fafc;
    margin-bottom: 16px;
}

.emergency-msg {
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.emergency-msg-head {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.emergency-msg-body {
    white-space: pre-wrap;
    word-break: break-word;
}

.emergency-msg-img img {
    max-width: 100%;
    margin-top: 8px;
    border-radius: 8px;
}

.emergency-back-btn {
    margin-bottom: 12px;
}

.emergency-room-creator-tools {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #c7d2fe;
    background: linear-gradient(135deg, rgba(0, 56, 168, 0.06) 0%, rgba(206, 17, 38, 0.05) 100%);
}

.emergency-room-creator-title {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #1e3a5f;
}

.emergency-room-creator-desc {
    margin: 0 0 12px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.emergency-room-creator-tools .form-group {
    margin-bottom: 10px;
}

.emergency-acc {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.emergency-acc--unread {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.emergency-acc-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: none;
    background: #f8fafc;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 0.15s;
}

.emergency-acc-header:hover {
    background: #f1f5f9;
}

.emergency-acc-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 16px;
}

.emergency-acc-chevron {
    transition: transform 0.2s ease;
    color: #64748b;
    font-size: 12px;
}

.emergency-acc-expanded .emergency-acc-chevron {
    transform: rotate(90deg);
}

.emergency-acc-meta-line {
    font-size: 13px;
    color: #64748b;
}

.emergency-acc-body {
    padding: 0 16px 16px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.emergency-acc-info {
    padding: 14px 0 8px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 12px;
}

.emergency-feed-label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin: 12px 0 8px;
}

/* Live earthquake monitoring — Emergency Alerts */
.emergency-earthquake-panel {
    margin: 0 0 20px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: linear-gradient(180deg, #fff7ed 0%, #fff 42%);
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.08);
}

.emergency-earthquake-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.emergency-earthquake-head h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #9a3412;
}

.emergency-earthquake-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.emergency-eq-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: emergencyEqLivePulse 1.2s ease-in-out infinite;
}

@keyframes emergencyEqLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}

.emergency-earthquake-lead {
    margin: 0 0 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #7c2d12;
}

.emergency-earthquake-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.emergency-earthquake-updated {
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: #64748b;
}

.emergency-earthquake-list-wrap {
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff;
    max-height: 360px;
    overflow-y: auto;
}

.emergency-earthquake-list {
    padding: 8px;
}

.emergency-earthquake-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.emergency-earthquake-item {
    margin: 0;
    border-bottom: 1px solid #f1f5f9;
}

.emergency-earthquake-item:last-child {
    border-bottom: none;
}

.emergency-earthquake-item-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 8px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.emergency-earthquake-item-link:hover,
.emergency-earthquake-item-link:focus-visible {
    background: #fff7ed;
    outline: none;
}

.emergency-eq-mag {
    flex-shrink: 0;
    min-width: 44px;
    padding: 6px 8px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.1;
}

.emergency-eq-mag--major { background: #7f1d1d; color: #fff; }
.emergency-eq-mag--strong { background: #dc2626; color: #fff; }
.emergency-eq-mag--moderate { background: #ea580c; color: #fff; }
.emergency-eq-mag--light { background: #f59e0b; color: #1e293b; }
.emergency-eq-mag--minor { background: #e2e8f0; color: #334155; }
.emergency-eq-mag--unknown { background: #cbd5e1; color: #475569; }

.emergency-eq-details {
    flex: 1;
    min-width: 0;
}

.emergency-eq-place {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
    line-height: 1.35;
}

.emergency-eq-ph-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #0038a8;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    vertical-align: middle;
}

.emergency-eq-meta {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    color: #64748b;
}

.emergency-eq-ext-icon {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #94a3b8;
}

.emergency-earthquake-empty,
.emergency-earthquake-loading,
.emergency-earthquake-error {
    margin: 0;
    padding: 16px 12px;
    font-size: 0.88rem;
    color: #64748b;
    text-align: center;
}

.emergency-earthquake-links {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #fed7aa;
}

.emergency-earthquake-links-title {
    margin: 0 0 10px;
    font-size: 0.92rem;
    color: #9a3412;
}

.emergency-earthquake-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.emergency-eq-external-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    text-decoration: none;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.emergency-eq-external-link:hover,
.emergency-eq-external-link:focus-visible {
    border-color: #f97316;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.15);
    outline: none;
}

.emergency-eq-external-link i {
    margin-top: 2px;
    color: #ea580c;
    font-size: 1.1rem;
}

.emergency-eq-external-link span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emergency-eq-external-link strong {
    font-size: 0.88rem;
}

.emergency-eq-external-link small {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
}

@media (max-width: 520px) {
    .emergency-earthquake-link-grid {
        grid-template-columns: 1fr;
    }
}

.emergency-acc-creator {
    margin-top: 8px;
}

.emergency-msg-video-wrap {
    margin-top: 10px;
    max-width: 100%;
}

.emergency-msg-video {
    max-width: 100%;
    max-height: 320px;
    border-radius: 8px;
    background: #000;
}

.emergency-msg-live {
    margin-top: 10px;
    font-size: 14px;
}

.emergency-msg-live a {
    color: #0d9488;
    font-weight: 600;
}

.emergency-post-alert-btn {
    margin-top: 14px;
    width: 100%;
    max-width: 360px;
}

.emergency-post-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.emergency-post-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
}

.emergency-post-modal-box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px 22px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.emergency-post-modal-box h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    color: #1e293b;
}

.emergency-post-modal-sub {
    margin: 0 0 14px;
    font-size: 14px;
    color: #64748b;
}

.emergency-post-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

.emergency-post-modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.emergency-post-modal-box .form-group {
    margin-bottom: 12px;
}

.emergency-post-modal-box textarea,
.emergency-post-modal-box input[type="url"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
}

.emergency-post-record-block {
    margin: 14px 0;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.emergency-post-record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.emergency-post-err {
    color: #b91c1c;
    font-size: 14px;
    margin: 8px 0;
}

.menu-item[data-menu="jobhiring"] i {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.menu-item[data-menu="games"] i {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.menu-item[data-menu="gameseducational"] i {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.menu-item[data-menu="gamesonline"] i {
    background: linear-gradient(135deg, #c41e3a 0%, #1a1a2e 100%);
}

.menu-item[data-menu="accounting"] i {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.menu-item[data-menu="insurance"] i {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.menu-item[data-menu="marketplace"] i {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.menu-item[data-menu="livestores"] i {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    box-shadow: 0 3px 10px rgba(20, 184, 166, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.35);
    color: #fff;
}

.menu-item[data-menu="email"] i {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.menu-item[data-menu="advertisement"] i {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.menu-item[data-menu="tools"] i {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.menu-item[data-menu="settings"] i {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.menu-item[data-menu="support"] i {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.menu-item[data-menu="schools"] i {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
}

/* Schools dropdown menu */
.menu-item-has-dropdown {
    position: relative;
}

.menu-item-toggle {
    display: flex;
    align-items: center;
}

.menu-item-toggle .menu-item-chevron {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.25s ease;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    border: none;
    color: #64748b;
}

.menu-item-has-dropdown.open .menu-item-chevron {
    transform: rotate(180deg);
}

.menu-item[data-menu="schools"].active i,
.menu-item-has-dropdown.open .menu-item[data-menu="schools"] {
    background-color: rgba(13, 148, 136, 0.15);
    border-left-color: #0d9488;
    color: #1e293b;
}

.schools-dropdown {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: rgba(30, 41, 59, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: none;
    margin-top: 4px;
    margin-left: 24px;
    margin-right: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    max-height: 280px;
    overflow-y: auto;
}

.schools-dropdown.open {
    display: block;
}

.schools-dropdown li {
    margin: 0;
}

.schools-dropdown-item {
    display: block;
    padding: 10px 16px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
    border-radius: 4px;
    margin: 0 8px;
}

.schools-dropdown-item:hover {
    background-color: rgba(13, 148, 136, 0.2);
    color: #fff;
}

.schools-dropdown-action {
    padding: 8px 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin-top: 4px;
}

.btn-add-new-school {
    width: 100%;
    padding: 10px 16px;
    border: 2px dashed rgba(13, 148, 136, 0.6);
    border-radius: 8px;
    background: rgba(13, 148, 136, 0.15);
    color: #14b8a6;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-add-new-school:hover {
    background: rgba(13, 148, 136, 0.3);
    border-color: #14b8a6;
    color: #fff;
}

/* School welcome panel (e.g. Bulasa National High School) */
.school-welcome-panel {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 0;
}

.school-welcome-message {
    text-align: center;
    margin-bottom: 28px;
}

.school-welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.school-welcome-by {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
    font-style: italic;
}

/* Main school image - centered, larger than gallery */
.school-main-image {
    text-align: center;
    margin: 0 auto 28px;
    max-width: 920px;
}

.school-main-image img {
    width: 100%;
    max-width: 900px;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: block;
    margin: 0 auto;
}

.school-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.school-gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    background: #f1f5f9;
}

.school-gallery-delete-btn,
.school-admin-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.school-gallery-delete-btn:hover,
.school-admin-delete-btn:hover {
    background: rgba(220, 38, 38, 0.9);
}

.school-gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.school-submitted-section {
    margin-bottom: 28px;
}

.school-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 16px 0;
}

.school-upload-section {
    margin: 24px 0 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.school-submit-btn {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.school-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.45);
}

.school-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.school-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.school-upload-btn:hover {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.45);
}

.school-upload-hint {
    margin: 10px 0 0 0;
    font-size: 14px;
    color: #64748b;
}

/* Big picture box for uploaded images */
.school-user-uploads.school-big-picture-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 24px;
    min-height: 280px;
}

.school-big-picture-box .school-user-upload-item {
    background: #f1f5f9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.school-big-picture-box .school-user-upload-item img {
    width: 100%;
    height: auto;
    min-height: 280px;
    max-height: 520px;
    object-fit: contain;
    display: block;
    background: #e2e8f0;
}

.school-user-upload-item {
    position: relative;
}

.school-user-upload-item .school-upload-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.9;
    z-index: 2;
}

.school-user-upload-item .school-upload-remove:hover {
    background: #dc2626;
    opacity: 1;
}

.school-back-btn {
    margin-top: 8px;
}

/* Bulasa panel – modern gradient background */
.school-panel-gradient {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 25%, #99f6e4 50%, #5eead4 75%, #2dd4bf 100%);
    background-attachment: local;
    padding: 24px;
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 32px rgba(13, 148, 136, 0.15);
}

/* Tabs */
.school-tabs {
    display: flex;
    gap: 8px;
    margin: 20px 0 16px;
}

.school-tab-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: #0f766e;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.school-tab-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.school-tab-btn.active {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.4);
}

.school-tab-content {
    margin-bottom: 16px;
}

/* Calendar tab */
.school-tab-calendar-wrap .school-calendar-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.school-calendar-label {
    display: block;
    font-weight: 600;
    color: #134e4a;
    margin-bottom: 8px;
    font-size: 15px;
}

.school-grade-select {
    width: 100%;
    max-width: 240px;
    padding: 12px 16px;
    border: 2px solid #99f6e4;
    border-radius: 12px;
    background: #fff;
    color: #134e4a;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
    cursor: pointer;
}

.school-calendar-box {
    min-height: 320px;
}

.school-calendar-placeholder {
    color: #64748b;
    padding: 24px;
    text-align: center;
}

.school-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.school-calendar-nav {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #99f6e4 0%, #5eead4 100%);
    color: #0f766e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.school-calendar-nav:hover {
    background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 100%);
    transform: scale(1.05);
}

.school-calendar-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: #134e4a;
}

.school-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.school-calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #0f766e;
}

.school-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.school-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.school-calendar-day:hover:not(.school-calendar-day-empty) {
    background: rgba(45, 212, 191, 0.3);
    border-color: #2dd4bf;
}

.school-calendar-day-empty {
    cursor: default;
    background: transparent;
}

.school-calendar-day-num {
    font-weight: 600;
    color: #134e4a;
    font-size: 14px;
}

.school-calendar-day-has-note .school-calendar-day-dot {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0d9488;
}

/* Video tab (Bulasa) */
.school-tab-video-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.school-video-section {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.school-video-section .school-section-title {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: #134e4a;
}

.school-video-go-live-btn,
.school-video-live-controls .btn {
    margin-top: 8px;
}

.school-video-live-preview-wrap {
    margin-top: 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    border: 2px solid #99f6e4;
}

.school-video-live-preview {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
}

.school-video-live-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.6);
}

.school-video-live-badge {
    color: #ef4444;
    font-weight: 600;
    font-size: 14px;
}

.school-video-live-badge i {
    margin-right: 4px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.school-pending-videos {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.school-pending-video-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    border: 1px solid #99f6e4;
}

.school-pending-video-name {
    font-size: 14px;
    color: #134e4a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-submitted-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.school-video-item {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #99f6e4;
}

.school-video-item video {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.school-video-item-date {
    margin: 0;
    padding: 8px 12px;
    font-size: 12px;
    color: #64748b;
}

.school-video-empty {
    margin: 0;
    padding: 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

/* Scrollable feed (Facebook-style) for pictures and videos */
.school-feed-scroll {
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.school-video-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.school-video-delete-btn:hover {
    background: rgba(220, 38, 38, 0.9);
}

/* Note modals */
.school-note-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.school-note-modal-content {
    background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
    border-radius: 20px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(45, 212, 191, 0.5);
    position: relative;
}

.school-note-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.08);
    color: #134e4a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s ease;
}

.school-note-modal-close:hover {
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.school-note-readonly-msg {
    font-size: 13px;
    color: #0f766e;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 12px;
    border-radius: 10px;
    margin: 0 0 12px 0;
    border-left: 4px solid #0d9488;
}

.school-note-modal-title {
    margin: 0 0 16px 0;
    font-size: 1.2rem;
    color: #134e4a;
}

.school-note-modal-content textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #99f6e4;
    border-radius: 12px;
    font-size: 15px;
    resize: vertical;
    margin-bottom: 16px;
    background: #fff;
    color: #1e293b;
}

.school-note-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.school-note-visibility-text {
    margin: 0 0 20px 0;
    color: #0f766e;
    font-size: 15px;
}

.school-btn-selected-users {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.school-btn-selected-users:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
}

.school-selected-users-panel {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(13, 148, 136, 0.3);
}

.school-selected-users-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #134e4a;
    font-weight: 600;
}

.school-selected-users-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.school-selected-user-input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid #99f6e4;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
}

.school-selected-users-list {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
    max-height: 160px;
    overflow-y: auto;
}

.school-selected-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    color: #134e4a;
}

.school-selected-user-remove {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.school-selected-user-remove:hover {
    background: #dc2626;
    color: #fff;
}

/* Active state with matching colors - Updated to match darker gradients */
.menu-item[data-menu="home"].active {
    background-color: rgba(90, 103, 216, 0.15);
    border-left-color: #5a67d8;
}

.menu-item[data-menu="wallet"].active {
    background-color: rgba(217, 70, 239, 0.15);
    border-left-color: #d946ef;
}

.menu-item[data-menu="cashin"].active {
    background-color: rgba(59, 130, 246, 0.15);
    border-left-color: #3b82f6;
}

.menu-item[data-menu="cashinreceived"].active {
    background-color: rgba(16, 185, 129, 0.15);
    border-left-color: #10b981;
}

.menu-item[data-menu="sendmoney"].active {
    background-color: rgba(16, 185, 129, 0.15);
    border-left-color: #10b981;
}

.menu-item[data-menu="paybills"].active {
    background-color: rgba(245, 158, 11, 0.15);
    border-left-color: #f59e0b;
}

.menu-item[data-menu="globalpayments"].active {
    background-color: rgba(6, 182, 212, 0.15);
    border-left-color: #06b6d4;
}

.menu-item[data-menu="socialmedia"].active {
    background-color: rgba(139, 92, 246, 0.15);
    border-left-color: #8b5cf6;
}

.menu-item[data-menu="livevideo"].active {
    background-color: rgba(239, 68, 68, 0.15);
    border-left-color: #ef4444;
}

.menu-item[data-menu="farmersvlogger"].active,
.menu-item.farmers-vlogger.active {
    background-color: rgba(34, 197, 94, 0.15);
    border-left-color: #22c55e;
    color: #047857;
}

.menu-item[data-menu="dating"].active {
    background-color: rgba(236, 72, 153, 0.15);
    border-left-color: #ec4899;
}

.menu-item[data-menu="music"].active {
    background-color: rgba(249, 115, 22, 0.15);
    border-left-color: #f97316;
}

.menu-item[data-menu="youtube"].active {
    background-color: rgba(220, 38, 38, 0.15);
    border-left-color: #dc2626;
}

.menu-item[data-menu="airlines"].active {
    background-color: rgba(14, 165, 233, 0.15);
    border-left-color: #0ea5e9;
}

.menu-item[data-menu="hotels"].active {
    background-color: rgba(168, 85, 247, 0.15);
    border-left-color: #a855f7;
}

.menu-item[data-menu="cars"].active {
    background-color: rgba(245, 158, 11, 0.15);
    border-left-color: #f59e0b;
}

.menu-item[data-menu="ferry"].active {
    background-color: rgba(59, 130, 246, 0.15);
    border-left-color: #3b82f6;
}

.menu-item[data-menu="delivery"].active {
    background-color: rgba(249, 115, 22, 0.15);
    border-left-color: #f97316;
}

.menu-item[data-menu="emergency"].active {
    background-color: rgba(220, 38, 38, 0.15);
    border-left-color: #dc2626;
}

.menu-item[data-menu="jobhiring"].active {
    background-color: rgba(99, 102, 241, 0.15);
    border-left-color: #6366f1;
}

.menu-item[data-menu="games"].active {
    background-color: rgba(236, 72, 153, 0.15);
    border-left-color: #ec4899;
}

.menu-item[data-menu="gameseducational"].active {
    background-color: rgba(6, 182, 212, 0.15);
    border-left-color: #06b6d4;
}

.menu-item[data-menu="gamesonline"].active {
    background-color: rgba(196, 30, 58, 0.2);
    border-left-color: #c41e3a;
}

.menu-item[data-menu="accounting"].active {
    background-color: rgba(16, 185, 129, 0.15);
    border-left-color: #10b981;
}

.menu-item[data-menu="insurance"].active {
    background-color: rgba(245, 158, 11, 0.15);
    border-left-color: #f59e0b;
}

.menu-item[data-menu="marketplace"].active {
    background-color: rgba(139, 92, 246, 0.15);
    border-left-color: #8b5cf6;
}

.menu-item[data-menu="livestores"].active {
    background-color: rgba(20, 184, 166, 0.15);
    border-left-color: #14b8a6;
}

.menu-item[data-menu="livestores"].active i {
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.menu-item[data-menu="email"].active {
    background-color: rgba(59, 130, 246, 0.15);
    border-left-color: #3b82f6;
}

.menu-item[data-menu="advertisement"].active {
    background-color: rgba(245, 158, 11, 0.15);
    border-left-color: #f59e0b;
}

.menu-item[data-menu="tools"].active {
    background-color: rgba(100, 116, 139, 0.15);
    border-left-color: #64748b;
}

.menu-item[data-menu="settings"].active {
    background-color: rgba(99, 102, 241, 0.15);
    border-left-color: #6366f1;
}

.menu-item[data-menu="support"].active {
    background-color: rgba(6, 182, 212, 0.15);
    border-left-color: #06b6d4;
}

.menu-item[data-menu="schools"].active {
    background-color: rgba(13, 148, 136, 0.15);
    border-left-color: #0d9488;
}

/* Main Content Styles */
.main-content {
    margin-left: 300px;
    flex: 1;
    padding: 40px;
    min-height: 100vh;
    width: calc(100% - 300px);
    max-width: 100%;
    overflow-x: hidden;
}

.content-header {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.content-header-left {
    flex: 1;
    min-width: 0;
}

.content-header-actions {
    position: relative;
    z-index: 12;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Philippines-inspired “Make my Main Page” (flag: blue, red, yellow, white) */
.phcash-make-main-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #fff;
    cursor: pointer;
    border: 3px solid #fcd116;
    background: linear-gradient(135deg, #0038a8 0%, #0038a8 45%, #ce1126 45%, #ce1126 100%);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    max-width: 100%;
    animation: phcashMainPageBlink 1.25s ease-in-out infinite;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.phcash-make-main-page-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.phcash-make-main-page-btn:focus-visible {
    outline: 3px solid #fcd116;
    outline-offset: 2px;
}

.phcash-make-main-page-btn.phcash-make-main-page-btn--active {
    border-color: #fff;
    box-shadow: 0 0 0 2px #fcd116, 0 2px 8px rgba(206, 17, 38, 0.45);
}

.phcash-install-app-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #93c5fd;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e3a8a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.phcash-install-app-btn.phcash-install-app-btn--ready {
    border-color: #0d9488;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
    box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.35), 0 2px 8px rgba(13, 148, 136, 0.2);
}

.phcash-install-app-btn:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.phcash-install-app-btn:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.phcash-install-app-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

@keyframes phcashMainPageBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 0 12px rgba(252, 209, 22, 0.35);
    }
    50% {
        opacity: 0.92;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 20px rgba(252, 209, 22, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .phcash-make-main-page-btn {
        animation: none;
    }
}

.voice-nav-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: min(420px, 100%);
}

.voice-nav-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    line-height: 1.3;
}

.voice-nav-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-width: 0;
}

.voice-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: linear-gradient(160deg, #fef08a 0%, #facc15 45%, #eab308 100%);
    color: #422006;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.45), 0 6px 16px rgba(202, 138, 4, 0.35);
}

.voice-nav-wrap:not(.voice-nav-listening) .voice-nav-btn:not(:disabled):not(.voice-nav-btn--disabled) {
    animation: voiceNavMicBlink 1.15s ease-in-out infinite;
}

@keyframes voiceNavMicBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.5), 0 6px 16px rgba(202, 138, 4, 0.4);
    }
    50% {
        opacity: 0.92;
        transform: scale(1.08);
        box-shadow: 0 0 0 6px rgba(250, 204, 21, 0.45), 0 8px 22px rgba(234, 179, 8, 0.55);
    }
}

.voice-nav-btn:hover:not(:disabled) {
    filter: brightness(1.05);
    border-color: #fff;
}

.voice-nav-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    animation: none !important;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.voice-nav-listening .voice-nav-btn {
    animation: voiceNavPulse 1.2s ease-in-out infinite !important;
    background: rgba(239, 68, 68, 0.45) !important;
    color: #fff !important;
    border-color: rgba(252, 165, 165, 0.95) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
}

@keyframes voiceNavPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.18); }
}

@media (max-width: 767px) {
    .main-content.main-content-socialmedia {
        padding-left: 0;
        padding-right: 0;
    }

    .main-content.main-content-socialmedia .content-body {
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .main-content.main-content-socialmedia .fb-main-feed {
        padding-left: 0;
        padding-right: 0;
    }

    .voice-nav-wrap {
        position: fixed;
        top: calc(4px + env(safe-area-inset-top, 0px));
        right: calc(6px + env(safe-area-inset-right, 0px));
        z-index: 100006;
        flex-direction: row-reverse;
        align-items: center;
        gap: 6px;
        max-width: min(calc(100vw - 16px), 280px);
        margin: 0;
        padding: 5px 8px 5px 10px;
        background: rgba(15, 23, 42, 0.92);
        border-radius: 999px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(8px);
    }

    .voice-nav-wrap .voice-nav-btn {
        width: 46px;
        height: 46px;
    }

    .content-header-left {
        padding-right: 64px;
        padding-top: 2px;
    }

    .content-header-left #content-title {
        margin-top: 0;
        line-height: 1.25;
    }

    .voice-nav-status {
        font-size: 11px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.92);
    }

    /* Voice mic is fixed — don't reserve horizontal space in the header action row */
    .content-header-voice-block {
        width: 0;
        min-width: 0;
        max-width: 0;
        overflow: visible;
        padding: 0;
        margin: 0;
        gap: 0;
    }

    #authHeaderBtn {
        order: -1;
        min-height: 44px;
    }

    /* When drawer menu is open, hide header buttons so they don't cover the sidebar */
    body.mobile-sidebar-open .content-header-actions {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        z-index: 1;
    }

    body.mobile-sidebar-open .voice-nav-wrap {
        z-index: 100005;
        pointer-events: none;
        opacity: 0.35;
    }
}

@media (max-width: 640px) {
    .voice-nav-hint {
        display: none;
    }

    .content-header-actions {
        flex-direction: column;
        align-items: stretch;
        overflow-x: visible;
    }

    .content-header-actions > * {
        width: 100%;
        justify-content: center;
    }

    .content-header-actions .phcash-make-main-page-btn {
        max-width: 100%;
    }
}

/* Tools sub-panels opened from Tools or voice */
.tools-subpanel .tools-subpanel-back {
    margin-bottom: 20px;
}

.tool-qrcode-phonline {
    max-width: 420px;
    margin-bottom: 8px;
}

.tool-qr-phonline-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.tool-qr-phonline-label {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
}

.tool-qr-phonline-label a {
    color: #0369a1;
    text-decoration: none;
    word-break: break-all;
}

.tool-qr-phonline-label a:hover {
    text-decoration: underline;
}

.tool-qr-phonline-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
}

.tool-qr-phonline-img {
    display: block;
    width: 280px;
    height: 280px;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.tool-qr-phonline-download i {
    margin-right: 6px;
}

.tool-qr-phonline-hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.tool-qr-divider {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid #e2e8f0;
}

.tool-qr-custom-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: #334155;
}

.tool-calc-voice-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    max-width: 420px;
}

.tool-calc-voice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(234, 179, 8, 0.85);
    background: linear-gradient(160deg, #fef08a 0%, #facc15 45%, #eab308 100%);
    color: #422006;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.4), 0 4px 14px rgba(202, 138, 4, 0.35);
    transition: filter 0.2s, transform 0.15s;
}

.tool-calc-voice-row:not(.tool-calc-voice-listening) .tool-calc-voice-btn:not(:disabled):not(.tool-calc-voice-btn--disabled) {
    animation: toolCalcVoiceBlink 1.1s ease-in-out infinite;
}

@keyframes toolCalcVoiceBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.5), 0 4px 14px rgba(202, 138, 4, 0.4);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.07);
        box-shadow: 0 0 0 6px rgba(250, 204, 21, 0.4), 0 6px 18px rgba(234, 179, 8, 0.5);
    }
}

.tool-calc-voice-btn:hover:not(:disabled) {
    filter: brightness(1.06);
}

.tool-calc-voice-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none !important;
    background: #e2e8f0;
    color: #64748b;
    border-color: #cbd5e1;
    box-shadow: none;
}

.tool-calc-voice-listening .tool-calc-voice-btn {
    animation: toolCalcVoiceListenPulse 1.1s ease-in-out infinite !important;
    background: rgba(239, 68, 68, 0.4) !important;
    color: #fff !important;
    border-color: #fecaca !important;
}

@keyframes toolCalcVoiceListenPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.2); }
}

.tool-calc-voice-status {
    font-size: 13px;
    color: #475569;
    line-height: 1.35;
    flex: 1;
    min-width: 140px;
}

.tool-calc {
    max-width: 320px;
}

.tool-calc-expr {
    width: 100%;
    font-size: 22px;
    padding: 14px;
    margin-bottom: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    text-align: right;
    box-sizing: border-box;
}

.tool-calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.tool-calc-key {
    padding: 14px 10px;
    font-size: 18px;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    color: #1e293b;
}

.tool-calc-key:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.tool-calc-key-wide {
    grid-column: span 2;
}

.tool-conv-result {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 700;
    color: #0f766e;
}

.tool-conv-note {
    margin-top: 12px;
    font-size: 13px;
    color: #64748b;
    max-width: 400px;
}

.tools-external-ai-panel {
    max-width: 520px;
}

.tools-external-ai-intro {
    margin-top: 8px;
    margin-bottom: 20px;
}

.tools-external-ai-open {
    margin-top: 8px;
}

.user-account-display {
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 8px 16px;
    backdrop-filter: blur(10px);
}

.user-account-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.user-first-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.user-account-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-account-badge.admin {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.user-account-badge.user {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-auth-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.btn-auth-header:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}
.btn-auth-header:active {
    transform: translateY(0);
}

.content-header h2 {
    font-size: 36px;
    color: #fff;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    font-weight: 700;
}

.content-header p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.content-body {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#content-panel.content-panel-superace {
    padding: clamp(8px, 1.5vw, 20px);
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border: none;
}
@media (max-width: 767px) {
    #content-panel.content-panel-superace {
        padding: 8px 6px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    #content-panel.content-panel-superace {
        padding: 12px 10px;
    }
}

/* Wild Lines Safari — educational animal slot */
#content-panel.content-panel-eduanimalsafari {
    padding: clamp(8px, 1.5vw, 20px);
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border: none;
}
.eduanimal-safari-wrap {
    max-width: min(1320px, 100%);
    margin: 0 auto;
}
.eduanimal-container {
    padding: clamp(14px, 2vw, 22px);
    background: linear-gradient(165deg, rgba(13, 59, 46, 0.92) 0%, rgba(22, 101, 78, 0.88) 45%, rgba(45, 106, 79, 0.9) 100%);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    color: #ecfdf5;
    /* Slot sizing on container so every reel inherits (fixes tiny columns if a child rule is ignored). */
    --eduanimal-card-w: max(108px, min(360px, calc((100% - 16px) / 5)));
    --eduanimal-reel-h: min(800px, 80vh);
    --eduanimal-strip-gap: clamp(4px, 0.8vw, 8px);
    --eduanimal-card-h: max(100px, calc((var(--eduanimal-reel-h) - 3 * var(--eduanimal-strip-gap, 8px) - 10px) / 4));
}
.eduanimal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.eduanimal-title {
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.eduanimal-title i { color: #86efac; }
.eduanimal-back-btn {
    flex-shrink: 0;
}
.eduanimal-intro {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 16px 0;
    color: rgba(236, 253, 245, 0.92);
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    border-left: 4px solid #4ade80;
}
.eduanimal-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}
.eduanimal-stat {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.eduanimal-stat #eduanimalNaturePoints {
    color: #fde047;
    font-variant-numeric: tabular-nums;
}
.eduanimal-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(236, 253, 245, 0.85);
    margin-right: 8px;
}
.eduanimal-bet-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.eduanimal-bet-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.eduanimal-bet-btn {
    min-height: 44px;
    min-width: 48px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.eduanimal-bet-btn:hover,
.eduanimal-bet-btn.active {
    background: #22c55e;
    border-color: #4ade80;
    color: #052e16;
}
.eduanimal-bet-btn:active { transform: scale(0.97); }
.eduanimal-win {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(250, 204, 21, 0.15);
    border-radius: 10px;
    font-weight: 700;
    color: #fef08a;
}
.eduanimal-patterns-panel {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.eduanimal-patterns-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #fff;
}
.eduanimal-hint {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(236, 253, 245, 0.75);
}
.eduanimal-patterns-desc {
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0 0 12px 0;
    color: rgba(236, 253, 245, 0.88);
}
.eduanimal-pattern-item {
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(6, 40, 30, 0.45);
    overflow: hidden;
}
.eduanimal-pattern-item--scatter { margin-bottom: 0; }
.eduanimal-pattern-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.eduanimal-pattern-head:hover { background: rgba(255, 255, 255, 0.06); }
.eduanimal-pattern-head:focus-visible {
    outline: 2px solid #4ade80;
    outline-offset: -2px;
}
.eduanimal-pattern-chevron {
    flex-shrink: 0;
    width: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #86efac;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}
.eduanimal-pattern-item.is-expanded .eduanimal-pattern-chevron { transform: rotate(180deg); }
.eduanimal-pattern-head-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.eduanimal-pattern-row-label {
    min-width: 6.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ecfdf5;
}
.eduanimal-pattern-track {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}
.eduanimal-pattern-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(134, 239, 172, 0.55);
    box-sizing: border-box;
}
.eduanimal-pattern-scatter-desc {
    font-size: 0.78rem;
    color: rgba(236, 253, 245, 0.85);
    flex: 1;
}
.eduanimal-pattern-body {
    max-height: 0;
    opacity: 0;
    padding: 0 14px;
    overflow: hidden;
    border-top: 1px solid transparent;
    transition: max-height 0.45s ease, opacity 0.35s ease, padding 0.35s ease;
    background: rgba(0, 0, 0, 0.12);
}
.eduanimal-pattern-item.is-expanded .eduanimal-pattern-body {
    max-height: 22rem;
    opacity: 1;
    padding: 10px 14px 14px;
    border-top-color: rgba(255, 255, 255, 0.08);
}
.eduanimal-pattern-body-text {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(236, 253, 245, 0.92);
}
@keyframes eduanimalPatternHit {
    0% { background: rgba(34, 197, 94, 0.25); border-color: #4ade80; }
    50% { background: rgba(250, 204, 21, 0.2); border-color: #facc15; }
    100% { background: rgba(34, 197, 94, 0.25); border-color: #4ade80; }
}
.eduanimal-pattern-item.eduanimal-pattern--hit {
    animation: eduanimalPatternHit 0.85s ease-in-out infinite;
}
.eduanimal-reels-wrap {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.eduanimal-reels {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(6px, 1.2vw, 12px);
    flex-wrap: nowrap;
    width: 100%;
}
@media (min-width: 900px) {
    .eduanimal-container {
        --eduanimal-reel-h: min(880px, 84vh);
        --eduanimal-card-h: max(104px, calc((var(--eduanimal-reel-h) - 3 * var(--eduanimal-strip-gap, 8px) - 10px) / 4));
    }
}
@media (min-width: 1200px) {
    .eduanimal-container {
        --eduanimal-reel-h: min(940px, 88vh);
        --eduanimal-card-h: max(112px, calc((var(--eduanimal-reel-h) - 3 * var(--eduanimal-strip-gap, 8px) - 10px) / 4));
    }
}
.eduanimal-reel {
    width: var(--eduanimal-card-w, 108px);
    height: var(--eduanimal-reel-h, 520px);
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.eduanimal-reel-spinning .eduanimal-reel-strip {
    filter: brightness(1.03);
}
.eduanimal-reel-strip {
    display: flex;
    flex-direction: column;
    gap: var(--eduanimal-strip-gap, 8px);
    padding: 2px 0;
    will-change: transform;
}
.eduanimal-reel-strip > .eduanimal-card {
    flex: 0 0 var(--eduanimal-card-h);
    width: calc(100% - 4px);
    margin: 0 2px;
    height: var(--eduanimal-card-h);
    min-height: var(--eduanimal-card-h);
    max-height: var(--eduanimal-card-h);
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    position: relative;
    box-sizing: border-box;
    background: #0f172a;
}
.eduanimal-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.eduanimal-card-fallback {
    position: absolute;
    inset: 0;
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #166534, #14532d);
}
@keyframes eduanimalCardWin {
    0% { box-shadow: 0 0 0 3px #22c55e, 0 0 18px rgba(34, 197, 94, 0.55); }
    50% { box-shadow: 0 0 0 3px #facc15, 0 0 22px rgba(250, 204, 21, 0.5); }
    100% { box-shadow: 0 0 0 3px #22c55e, 0 0 18px rgba(34, 197, 94, 0.55); }
}
.eduanimal-reel-strip > .eduanimal-card.eduanimal-card--win {
    animation: eduanimalCardWin 0.85s ease-in-out infinite;
    z-index: 2;
}
.eduanimal-symbol-LION { border-color: rgba(234, 179, 8, 0.5); }
.eduanimal-symbol-ELEPHANT { border-color: rgba(148, 163, 184, 0.5); }
.eduanimal-symbol-DOLPHIN { border-color: rgba(56, 189, 248, 0.5); }
.eduanimal-symbol-FOX { border-color: rgba(249, 115, 22, 0.5); }
.eduanimal-symbol-EAGLE { border-color: rgba(185, 28, 28, 0.45); }
.eduanimal-symbol-FROG { border-color: rgba(74, 222, 128, 0.55); }
.eduanimal-symbol-TREE { border-color: rgba(22, 163, 74, 0.6); }
.eduanimal-symbol-WILD { border-color: rgba(236, 72, 153, 0.55); }
.eduanimal-spin-btn {
    min-height: 52px;
    font-size: 1.05rem;
    font-weight: 700;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
}
.eduanimal-fact-popup {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(15, 23, 42, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.eduanimal-fact-popup-inner {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #14532d;
    max-width: 520px;
    max-height: 85vh;
    overflow: auto;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.eduanimal-fact-popup-title {
    margin: 0 0 14px 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.eduanimal-fact-body { margin-bottom: 16px; }
.eduanimal-fact-block {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(20, 83, 45, 0.15);
}
.eduanimal-fact-block:last-child { border-bottom: none; }
.eduanimal-fact-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    flex-shrink: 0;
    border: 2px solid rgba(22, 101, 52, 0.25);
}
.eduanimal-fact-title {
    margin: 0 0 6px 0;
    font-size: 1rem;
    color: #14532d;
}
.eduanimal-fact-line,
.eduanimal-fact-nature {
    margin: 0 0 6px 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #166534;
}
.eduanimal-fact-close { width: 100%; min-height: 48px; }

/* Hantak (coin-toss) game panel */
#content-panel.content-panel-hantak {
    padding: clamp(8px, 1.5vw, 20px);
    background: transparent;
}
.hantak-game-wrap {
    max-width: min(700px, 98vw);
    margin: 0 auto;
}
.hantak-container {
    padding: clamp(12px, 2vw, 24px);
    border-radius: 16px;
    background: linear-gradient(165deg, #0f172a 0%, #1e293b 40%, #0f766e 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.hantak-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.hantak-title {
    margin: 0;
    font-size: clamp(18px, 3vw, 22px);
    color: #fff;
}
.hantak-title i {
    color: #fbbf24;
    margin-right: 8px;
}
.hantak-back-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.hantak-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.hantak-info {
    margin-bottom: 16px;
}
.hantak-balance {
    font-size: clamp(14px, 2vw, 16px);
    color: #fbbf24;
    font-weight: 700;
}
.hantak-label {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    margin-right: 6px;
}
.hantak-countdown-box {
    text-align: center;
    padding: 14px 20px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    border: 2px solid rgba(251, 191, 36, 0.4);
}
.hantak-countdown-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin-right: 8px;
}
.hantak-countdown-value {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 800;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
}
.hantak-next-result-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 10px;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.4);
    animation: hantakDotBlink 1s ease-in-out infinite;
}
.hantak-next-result-dot.head {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.hantak-next-result-dot.tail {
    background: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}
.hantak-next-result-dot.draw {
    background: #a855f7;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}
@keyframes hantakDotBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}
.hantak-last-round {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}
.hantak-drawing {
    text-align: center;
    padding: 16px;
    margin-bottom: 16px;
    background: rgba(251, 191, 36, 0.25);
    border: 2px solid rgba(251, 191, 36, 0.6);
    border-radius: 12px;
    color: #fbbf24;
    font-weight: 700;
    font-size: 18px;
}
.hantak-drawing.hantak-drawing-visible,
.hantak-drawing-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.hantak-on-hold {
    text-align: center;
    padding: 14px 20px;
    margin-bottom: 16px;
    background: rgba(251, 191, 36, 0.2);
    border: 2px solid rgba(251, 191, 36, 0.6);
    border-radius: 12px;
    color: #fbbf24;
    font-weight: 600;
    font-size: 15px;
}
.hantak-winner-info {
    padding: 14px 18px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.hantak-winner-info-intro {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
}
.hantak-winner-if-row {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
}
.hantak-winner-if-row:last-child {
    margin-bottom: 0;
}
.hantak-arena {
    position: relative;
    min-height: 140px;
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    border: 2px solid rgba(251, 191, 36, 0.3);
}
.hantak-tosser-wrap {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    z-index: 3;
}
.hantak-tosser-wrap.hantak-tosser-tossing {
    animation: hantakTosserToss 1.2s ease-in-out forwards;
}
@keyframes hantakTosserToss {
    0% { transform: translateY(-50%) translateX(0) scale(1); }
    20% { transform: translateY(-70%) translateX(4px) scale(1.08); }
    40% { transform: translateY(-85%) translateX(8px) scale(1.12); }
    60% { transform: translateY(-70%) translateX(6px) scale(1.05); }
    80% { transform: translateY(-55%) translateX(3px) scale(1.02); }
    100% { transform: translateY(-50%) translateX(0) scale(1); }
}
.hantak-tosser-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.hantak-tosser-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    font-size: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.hantak-tosser-placeholder .hantak-tosser-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(251, 191, 36, 0.9);
}
.hantak-coin-in-flight {
    display: none;
    position: absolute;
    left: 90px;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    pointer-events: none;
    z-index: 5;
}
.hantak-coin-in-flight.hantak-coin-animating {
    display: block !important;
    animation: hantakCoinArc 1.2s ease-in-out forwards;
}
.hantak-coin-in-flight .hantak-coin-fly-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.hantak-coin-in-flight.use-fallback .hantak-coin-fly-img {
    display: none;
}
.hantak-coin-in-flight.use-fallback .hantak-coin-fly-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
@keyframes hantakCoinArc {
    0% {
        left: 90px;
        top: 50%;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    40% {
        left: 50%;
        top: 20%;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        left: 50%;
        top: 50%;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
.hantak-arena-result-zone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    pointer-events: none;
    visibility: hidden;
}
.hantak-arena-result-zone.hantak-arena-result-visible {
    visibility: visible;
    width: auto;
    height: auto;
    margin-left: 0;
    margin-top: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hantak-arena-result-zone.hantak-arena-result-visible .hantak-result-coins {
    margin: 0;
    gap: 10px;
}
.hantak-arena-result-zone.hantak-arena-result-visible .hantak-result-coin {
    width: 52px;
    height: 52px;
}
.hantak-arena-result-zone.hantak-arena-result-visible .hantak-coin-fallback {
    font-size: 28px;
}
.hantak-coins-rotating .hantak-result-coin {
    animation: hantakCoinSpin 0.6s linear infinite;
}
.hantak-coins-rotating .hantak-result-coin-2 { animation-delay: 0.15s; }
.hantak-coins-rotating .hantak-result-coin-3 { animation-delay: 0.3s; }
@keyframes hantakCoinSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.hantak-sides {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .hantak-sides {
        grid-template-columns: 1fr;
    }
}
.hantak-side {
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.15);
}
.hantak-side-head {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
}
.hantak-side-tail {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
}
.hantak-side-draw {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.5);
}
.hantak-side-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}
.hantak-side-stat {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
}
.hantak-side-stat span {
    font-weight: 700;
    color: #fbbf24;
}
.hantak-side-stat.hantak-possible-win {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-weight: 600;
}
.hantak-possible-win-note {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    display: block;
    margin-top: 2px;
}
.hantak-bet-btn {
    margin-top: 12px;
    padding: 10px 20px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
}
.hantak-bet-head {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.hantak-bet-head:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
}
.hantak-bet-tail {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.hantak-bet-tail:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
}
.hantak-bet-draw {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.hantak-bet-draw:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
}
.hantak-amount-row {
    margin-bottom: 16px;
}
.hantak-amount-row .hantak-label {
    display: block;
    margin-bottom: 8px;
}
.hantak-amount-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hantak-amount-btn {
    min-width: 52px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.hantak-amount-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.hantak-amount-btn.active {
    background: rgba(251, 191, 36, 0.4);
    border-color: #fbbf24;
    color: #fbbf24;
}
.hantak-result-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
}
.hantak-result-inner {
    background: linear-gradient(165deg, #1e293b 0%, #0f766e 100%);
    padding: 28px 32px;
    border-radius: 16px;
    border: 2px solid rgba(251, 191, 36, 0.5);
    text-align: center;
    max-width: 360px;
}
.hantak-result-text {
    font-size: 24px;
    font-weight: 800;
    color: #fbbf24;
    margin-bottom: 12px;
}
.hantak-result-counts {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
}
.hantak-result-coins {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.hantak-result-coin {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #fbbf24 0%, #d97706 100%);
    border: 4px solid rgba(251, 191, 36, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: hantakCoinAppear 0.4s ease backwards;
}
.hantak-result-coin-1 { animation-delay: 0s; }
.hantak-result-coin-2 { animation-delay: 0.1s; }
.hantak-result-coin-3 { animation-delay: 0.2s; }
.hantak-result-coin .hantak-coin-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hantak-result-coin .hantak-coin-fallback {
    width: 100%;
    height: 100%;
}
@keyframes hantakCoinAppear {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes hantakCoinSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.hantak-result-payout {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 20px;
}
.hantak-result-payout.hantak-result-payout-win {
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.9), 0 0 24px rgba(251, 191, 36, 0.7);
    animation: hantakPayoutFlash 0.75s ease-in-out infinite alternate;
}
@keyframes hantakPayoutFlash {
    0% {
        opacity: 0.4;
        transform: scale(0.96);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}
@media (max-width: 500px) {
    .hantak-sides {
        grid-template-columns: 1fr;
    }
}

.panel-content {
    animation: fadeIn 0.3s ease;
    text-align: center;
}

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

.development-notice {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    padding: 18px 30px;
    border-radius: 40px;
    border: 2px dashed rgba(251, 191, 36, 0.8);
    background: rgba(255, 243, 205, 0.9);
    color: #92400e;
    font-weight: 600;
    letter-spacing: 0.5px;
    animation: noticeBlink 1.5s ease-in-out infinite;
    box-shadow: 0 10px 25px rgba(250, 204, 21, 0.25);
}

.development-notice i {
    font-size: 20px;
}

.development-notice--calm-loading {
    animation: none;
    font-weight: 500;
    border-style: solid;
    border-color: rgba(132, 204, 22, 0.4);
    background: linear-gradient(135deg, rgba(236, 252, 203, 0.95) 0%, rgba(217, 249, 157, 0.85) 100%);
    color: #3f6212;
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.12);
}

.development-notice--calm-loading i {
    color: #4d7c0f;
}

@keyframes noticeBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.97);
    }
}

.panel-title {
    font-size: 24px;
    color: #1e3a8a;
    margin-bottom: 20px;
    font-weight: 600;
}

.panel-description {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 30px;
    line-height: 1.8;
}

.currency-exchange-panel {
    max-width: 980px;
}

.currency-exchange-card,
.currency-exchange-admin-card {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.08);
}

.currency-exchange-grid,
.currency-exchange-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
}

.currency-exchange-panel input,
.currency-exchange-panel select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #bfdbfe;
    border-radius: 10px;
    background: #fff;
}

.currency-exchange-result {
    margin-top: 8px;
    font-size: 18px;
    color: #1e3a8a;
}

.currency-exchange-meta {
    margin-top: 6px;
    font-size: 13px;
    color: #475569;
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    margin: 5px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 153, 142, 0.6);
}

.btn-danger {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(235, 51, 73, 0.4);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(235, 51, 73, 0.6);
}

.btn-secondary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* Video Container */
.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

#videoElement {
    width: 100%;
    height: auto;
    min-height: 200px;
    display: block;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0f172a;
}

/* Live Video (Vlogger) — preview overlay: switch front / back camera */
.live-vlog-video-wrap {
    position: relative;
}

.live-vlog-flip-overlay-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease, transform 0.15s ease;
}

.live-vlog-flip-overlay-btn:hover {
    background: rgba(30, 41, 59, 0.9);
    transform: scale(1.03);
}

.live-vlog-flip-overlay-btn i {
    font-size: 22px;
}

.live-vlog-flip-overlay-label {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.95;
    max-width: 88px;
    text-align: center;
}

.live-vlog-publish-btn.live-vlog-go-live-ready:not(:disabled) {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
    animation: liveVlogGoLivePulse 2s ease-in-out infinite;
}

@keyframes liveVlogGoLivePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.2); }
}

.video-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.video-status {
    text-align: center;
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
    font-weight: 600;
}

.status-ready {
    background: #d1fae5;
    color: #065f46;
}

.status-recording {
    background: #fee2e2;
    color: #991b1b;
}

.status-stopped {
    background: #e0e7ff;
    color: #3730a3;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #1e3a8a;
    font-weight: 600;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-icon {
    font-size: 32px;
    color: #667eea;
    margin-bottom: 15px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 10px;
}

.card-description {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* Pay Bills – modern category cards with gradient */
.paybills-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.paybills-category-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 140px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.paybills-category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.paybills-category-card:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.paybills-cat-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.paybills-cat-electricity .paybills-cat-gradient {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #dc2626 100%);
}

.paybills-cat-water .paybills-cat-gradient {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
}

.paybills-cat-internet .paybills-cat-gradient {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
}

.paybills-cat-mobile .paybills-cat-gradient {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
}

.paybills-cat-schools .paybills-cat-gradient {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
}

.paybills-cat-hospitals .paybills-cat-gradient {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
}

.paybills-cat-stores .paybills-cat-gradient {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #0f766e 100%);
}

.paybills-cat-government .paybills-cat-gradient {
    background: linear-gradient(135deg, #475569 0%, #334155 50%, #1e293b 100%);
}

.paybills-cat-content {
    position: relative;
    z-index: 1;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 140px;
}

.paybills-cat-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 36px;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0.95;
}

.paybills-cat-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 4px;
}

.paybills-cat-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Pay Bills – billers list (after selecting a category) */
.paybills-billers-section {
    margin-top: 24px;
}

.paybills-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.paybills-back-btn:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: #667eea;
}

.paybills-billers-title {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.paybills-billers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.paybills-biller-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.paybills-biller-item:hover {
    border-color: #667eea;
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.paybills-biller-name {
    font-size: 15px;
    font-weight: 500;
    color: #1e293b;
}

.paybills-biller-arrow {
    font-size: 12px;
    color: #94a3b8;
}

/* Pay Bills – biller URL viewer modal (CEBECO etc. open inside site) */
.paybills-url-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.paybills-url-viewer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.paybills-url-viewer-content {
    position: relative;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.paybills-url-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}
.paybills-url-viewer-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}
.paybills-url-viewer-close {
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    font-size: 18px;
}
.paybills-url-viewer-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.paybills-url-viewer-hint {
    margin: 0;
    padding: 10px 20px;
    font-size: 13px;
    color: #64748b;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.paybills-url-viewer-toolbar {
    padding: 10px 20px;
    font-size: 14px;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.paybills-url-viewer-newtab-label {
    font-weight: 600;
    margin-right: 8px;
}
.paybills-viewer-newtab-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
}
.paybills-viewer-newtab-link:hover {
    text-decoration: underline;
}
.paybills-url-viewer-iframe {
    flex: 1;
    width: 100%;
    min-height: 400px;
    border: none;
    display: block;
}
.paybills-biller-item-with-link .paybills-biller-name {
    color: #667eea;
}
.paybills-biller-link-icon {
    font-size: 12px;
    margin-left: 6px;
    color: #667eea;
}

/* AI Chat Panel (Tools sub-panel) */
.ai-chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
}

.ai-chat-intro {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #64748b;
}

.ai-chat-open-external {
    margin-bottom: 12px;
    margin-top: 4px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-chat-open-external .btn {
    flex-shrink: 0;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    max-height: 360px;
}

.ai-chat-msg {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 90%;
    line-height: 1.5;
    word-wrap: break-word;
}

.ai-chat-msg-user {
    margin-left: auto;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.ai-chat-msg-assistant {
    margin-right: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #1e3a8a;
}

.ai-chat-typing {
    color: #64748b;
    font-style: italic;
}

.ai-chat-input-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 0 0 8px 0;
}

.ai-chat-input {
    flex: 1;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    resize: none;
    font-family: inherit;
}

.ai-chat-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ai-chat-send {
    flex-shrink: 0;
}

/* Info Box */
.info-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
}

.info-box h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

.info-box p {
    margin: 5px 0;
    opacity: 0.95;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.home-landing .home-stats .stat-card {
    background: linear-gradient(145deg, #0d9488 0%, #0f766e 45%, #115e59 100%);
    box-shadow: 0 8px 28px rgba(13, 148, 136, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.home-landing .home-stats .home-stat-card-preview {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
    aspect-ratio: 16 / 10;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
}

.home-landing .home-stats .home-stat-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stat-value {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 14px;
    opacity: 0.9;
}

/* Home — full landing layout */
.home-landing {
    text-align: left;
    max-width: 1100px;
    margin: 0 auto;
}

.home-section-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e293b;
    margin: 2rem 0 0.5rem;
    letter-spacing: -0.02em;
}

.home-feature-cards {
    margin-top: 0.5rem;
}

/* Home Hero — calm glass + grid */
.home-hero {
    text-align: center;
    padding: 2rem 1rem 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.25);
}

.home-hero--modern {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
    margin-bottom: 1.25rem;
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(240, 253, 250, 0.97) 0%, rgba(204, 251, 241, 0.92) 45%, rgba(167, 243, 208, 0.88) 100%);
    border: 1px solid rgba(13, 148, 136, 0.18);
    box-shadow: 0 20px 50px rgba(15, 118, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.home-hero-glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(ellipse 50% 45% at 80% 20%, rgba(45, 212, 191, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 10% 90%, rgba(13, 148, 136, 0.2) 0%, transparent 50%);
    pointer-events: none;
    animation: home-hero-glow-drift 28s ease-in-out infinite;
}

@keyframes home-hero-glow-drift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    50% { transform: translate(2%, -2%) scale(1.03); opacity: 0.92; }
}

.home-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 880px) {
    .home-hero-grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 2rem;
    }
}

.home-hero-copy {
    min-width: 0;
}

.home-hero-eyebrow {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0f766e;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.home-hero-eyebrow i {
    opacity: 0.85;
    font-size: 0.85rem;
}

.home-hero-headline {
    margin: 0 0 0.85rem;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.home-hero-lead {
    margin: 0 0 1.25rem;
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    color: #475569;
    line-height: 1.65;
    max-width: 38rem;
}

.home-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.35rem, 1.5vw, 0.55rem);
    margin-bottom: 1.15rem;
    width: 100%;
    max-width: 100%;
}

.home-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 1vw, 0.4rem);
    width: 100%;
    min-width: 0;
    padding: clamp(0.4rem, 1.8vw, 0.5rem) clamp(0.35rem, 1.5vw, 0.65rem);
    font-size: clamp(0.68rem, 2.4vw, 0.875rem);
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: #134e4a;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(13, 148, 136, 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.08);
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.home-pill-btn:hover {
    background: #fff;
    border-color: #0d9488;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.15);
    transform: translateY(-1px);
}

.home-pill-btn i {
    color: #0d9488;
    font-size: clamp(0.65rem, 2.2vw, 0.8rem);
    flex-shrink: 0;
}

@media (max-width: 380px) {
    .home-quick-actions {
        gap: 0.3rem;
    }

    .home-pill-btn {
        padding: 0.38rem 0.28rem;
        font-size: 0.64rem;
        gap: 0.2rem;
    }

    .home-pill-btn i {
        font-size: 0.62rem;
    }
}

@media (min-width: 768px) {
    .home-quick-actions {
        max-width: 28rem;
        gap: 0.55rem;
    }

    .home-pill-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
}

.home-pill-btn.home-pill-btn-ph-blink {
    color: #fff;
    border: 2px solid #fcd116;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.32);
    animation: phFlagBlinkBtn 2.8s ease-in-out infinite;
}

.home-pill-btn.home-pill-btn-ph-blink i {
    color: #fff;
}

.home-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.home-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #115e59 100%);
    background-size: 100% 100%;
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    animation: none;
}

.home-hero-cta:hover {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 50%, #134e4a 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(13, 148, 136, 0.4);
    animation: none;
}

.home-hero-cta-secondary {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    border: 1px solid #cbd5e1;
    background: rgba(255, 255, 255, 0.9);
    color: #334155;
}

.home-hero-cta-secondary:hover {
    background: #fff;
    border-color: #94a3b8;
    color: #0f172a;
}

/* Decorative art column */
.home-hero-art {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
}

@media (min-width: 880px) {
    .home-hero-art {
        min-height: 280px;
    }
}

.home-hero-art-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.home-hero-art-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.42;
    transform: scale(1.02);
}

.home-hero-orb {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(0.5px);
    animation: home-orb-float 22s ease-in-out infinite;
}

.home-hero-orb--a {
    width: min(72%, 240px);
    height: min(72%, 240px);
    background: radial-gradient(circle at 35% 25%, rgba(45, 212, 191, 0.65) 0%, rgba(13, 148, 136, 0.35) 45%, transparent 70%);
    opacity: 0.9;
    top: 8%;
    right: 5%;
}

.home-hero-orb--b {
    width: min(55%, 180px);
    height: min(55%, 180px);
    background: radial-gradient(circle at 60% 60%, rgba(110, 231, 183, 0.55) 0%, rgba(52, 211, 153, 0.25) 50%, transparent 68%);
    bottom: 12%;
    left: 8%;
    animation-delay: -7s;
}

.home-hero-orb--c {
    width: min(40%, 120px);
    height: min(40%, 120px);
    border: 2px solid rgba(13, 148, 136, 0.25);
    background: rgba(255, 255, 255, 0.35);
    top: 38%;
    left: 28%;
    animation-delay: -14s;
}

@keyframes home-orb-float {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(6px, -8px); }
    66% { transform: translate(-4px, 6px); }
}

.home-hero-card-float {
    position: relative;
    z-index: 2;
    padding: 1.1rem 1.35rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 40px rgba(15, 118, 110, 0.15);
    max-width: 220px;
    text-align: left;
    animation: home-float-card 18s ease-in-out infinite;
}

@keyframes home-float-card {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.home-hero-float-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0d9488;
    margin-bottom: 0.25rem;
}

.home-hero-float-value {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.home-hero-float-note {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.home-hero-tagline {
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

/* Home development notice — soft, no harsh blink */
.home-dev-notice {
    font-size: 1.1rem;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1.25rem;
    background: rgba(251, 191, 36, 0.35);
    border: 2px solid rgba(245, 158, 11, 0.7);
    border-radius: 10px;
    animation: home-dev-notice-blink 1.5s ease-in-out infinite;
    text-align: center;
}

.home-dev-notice--calm {
    font-size: 0.98rem;
    font-weight: 500;
    color: #3f6212;
    background: linear-gradient(135deg, rgba(236, 252, 203, 0.9) 0%, rgba(217, 249, 157, 0.75) 100%);
    border: 1px solid rgba(132, 204, 22, 0.45);
    border-radius: 14px;
    animation: none;
    text-align: left;
    box-shadow: 0 4px 18px rgba(74, 222, 128, 0.12);
}

.home-dev-notice--calm i {
    margin-right: 0.5rem;
    color: #4d7c0f;
}

.home-dev-notice i {
    margin-right: 0.5rem;
    color: #b45309;
}

@keyframes home-dev-notice-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5); }
    50% { opacity: 0.75; box-shadow: 0 0 12px 4px rgba(245, 158, 11, 0.35); }
}

/* Home — Install PH Online (PWA) notice for all users / devices */
.home-install-app-panel {
    margin: 1.75rem 0 2rem;
    padding: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 45%, #eff6ff 100%);
    border: 1px solid rgba(13, 148, 136, 0.28);
    box-shadow: 0 4px 20px rgba(13, 148, 136, 0.1);
    overflow: hidden;
}

.home-install-app-inner {
    padding: clamp(1.1rem, 3vw, 1.5rem);
}

.home-install-app-title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.05rem, 2.8vw, 1.25rem);
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-install-app-title i {
    color: #0d9488;
}

.home-install-app-lead {
    margin: 0 0 1.15rem;
    font-size: clamp(0.88rem, 2.2vw, 0.95rem);
    color: #475569;
    line-height: 1.6;
    max-width: 52rem;
}

.home-install-app-platforms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 2vw, 0.75rem);
    margin-bottom: 1rem;
}

.home-install-app-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: clamp(0.75rem, 2vw, 1rem);
    min-width: 0;
}

.home-install-app-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
    margin-bottom: 0.45rem;
}

.home-install-app-card-icon--android {
    background: #dcfce7;
    color: #15803d;
}

.home-install-app-card-icon--ios {
    background: #f1f5f9;
    color: #334155;
}

.home-install-app-card-icon--desktop {
    background: #e0f2fe;
    color: #0369a1;
}

.home-install-app-card-title {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
}

.home-install-app-card-desc,
.home-install-app-card-steps {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.45;
}

.home-install-app-card-steps {
    margin-bottom: 0;
    color: #334155;
}

.home-install-app-compat {
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.home-install-app-compat summary {
    cursor: pointer;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.9rem;
}

.home-install-app-compat-list {
    margin: 0.65rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.55;
}

.home-install-app-note {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    border-left: 3px solid #0d9488;
}

.home-install-app-note i {
    color: #0d9488;
    margin-right: 0.35rem;
}

.home-install-app-installed-msg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 10px;
    color: #065f46;
    font-size: 0.9rem;
    font-weight: 600;
}

.home-install-app-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.home-install-app-btn-primary--ready {
    animation: home-install-app-ready-pulse 2s ease-in-out infinite;
}

@keyframes home-install-app-ready-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.12); }
}

.home-install-app-panel--installed {
    border-color: #6ee7b7;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
}

@media (max-width: 720px) {
    .home-install-app-platforms {
        grid-template-columns: 1fr;
    }

    .home-install-app-actions {
        flex-direction: column;
    }

    .home-install-app-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Home Latest activity panel */
.home-activity-panel {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.home-activity-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-activity-list {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    margin-bottom: 1rem;
}

.home-activity-list.home-activity-empty-wrap {
    max-height: none;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-activity-actions {
    display: flex;
    justify-content: flex-end;
}

.home-activity-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.2s;
}

.home-activity-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.home-activity-item-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

.home-activity-item-body {
    flex: 1;
    min-width: 0;
}

.home-activity-item-meta {
    margin-bottom: 4px;
}

.home-activity-item-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

button.home-activity-item-name--link {
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: #0d9488;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: rgba(13, 148, 136, 0.35);
    text-underline-offset: 3px;
    max-width: 100%;
}

button.home-activity-item-name--link:hover {
    color: #0f766e;
    text-decoration-color: rgba(15, 118, 110, 0.55);
}

button.home-activity-item-name--link:focus-visible {
    outline: 2px solid #2dd4bf;
    outline-offset: 2px;
    border-radius: 4px;
}

.home-activity-item-time {
    font-size: 0.8rem;
    color: #64748b;
    margin-left: 6px;
}

.home-activity-item-content {
    margin: 0;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.45;
}

.home-activity-item-media {
    margin-top: 8px;
}

.home-activity-item-thumb {
    max-width: 120px;
    max-height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.home-activity-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #64748b;
}

.home-activity-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    opacity: 0.7;
}

.home-activity-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* Home Get Started section */
.home-get-started {
    margin: 2rem 0;
    padding-top: 1.5rem;
}

.home-get-started-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.home-step-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.home-step-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.home-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50%;
    margin-bottom: 0.75rem;
}

.home-step-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem;
}

.home-step-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.home-step-card .btn {
    width: 100%;
    justify-content: center;
}

/* Home step card preview image (below title/desc in step cards) */
.home-step-preview {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #e2e8f0;
}

.home-step-preview img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.home-step-preview--photo,
.card-preview--photo {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: #0f172a;
}

.home-step-preview--photo img,
.card-preview--photo img {
    min-height: 120px;
}

/* Home — CSS-only calm gradients (no random stock photos) */
.home-step-preview--gradient {
    min-height: 120px;
    aspect-ratio: 16 / 9;
    background-size: 200% 200%;
    animation: home-gradient-pan 24s ease infinite;
}

.home-step-preview--funds {
    background-image: linear-gradient(130deg, #5eead4 0%, #2dd4bf 30%, #14b8a6 60%, #0d9488 100%);
}

.home-step-preview--send {
    background-image: linear-gradient(125deg, #99f6e4 0%, #5eead4 35%, #2dd4bf 70%, #0f766e 100%);
}

.home-step-preview--wallet {
    background-image: linear-gradient(140deg, #a7f3d0 0%, #6ee7b7 40%, #34d399 85%, #059669 100%);
}

.home-step-preview--explore {
    background-image: linear-gradient(135deg, #d9f99d 0%, #bef264 35%, #84cc16 70%, #65a30d 100%);
}

@keyframes home-gradient-pan {
    0%, 100% { background-position: 0% 40%; }
    50% { background-position: 100% 60%; }
}

/* Home feature card preview image */
.home-blink-card.card .card-preview,
.card-preview {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #e2e8f0;
}

.home-blink-card.card .card-preview img,
.card-preview img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.card-preview--gradient {
    min-height: 120px;
    aspect-ratio: 16 / 9;
    background-size: 200% 200%;
    animation: home-gradient-pan 28s ease infinite;
}

.card-preview--walletfeat {
    background-image: linear-gradient(145deg, #ccfbf1 0%, #5eead4 45%, #0d9488 90%);
}

.card-preview--socialfeat {
    background-image: linear-gradient(145deg, #e0e7ff 0%, #a5b4fc 40%, #6366f1 85%);
}

.card-preview--livefeat {
    background-image: linear-gradient(145deg, #fecaca 0%, #fb7185 35%, #e11d48 85%);
}

/* Home cards: gentle emphasis — no rapid blinking */
.home-blink-card {
    transition: box-shadow 0.35s ease, transform 0.25s ease, border-color 0.25s ease;
}

.home-blink-card:hover,
.home-blink-card.home-card-centered {
    animation: none;
    box-shadow: 0 8px 28px rgba(13, 148, 136, 0.14);
    border-color: rgba(13, 148, 136, 0.28);
}

.home-blink-card.card:hover {
    transform: translateY(-4px);
}

.home-landing .home-blink-card.home-step-card:hover,
.home-landing .home-blink-card.home-step-card.home-card-centered {
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
}

/* Airlines – status blink beside airline name/selection */
@keyframes airline-status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.airline-status-blink {
    animation: airline-status-blink 1.5s ease-in-out infinite;
    font-weight: 600;
}

.airline-status-available {
    color: #059669;
}

.airline-status-activation {
    color: #d97706;
}

.airline-status-coming-soon {
    color: #6366f1;
}

.airline-status-line {
    min-height: 22px;
}

.airlines-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.airlines-search-input {
    width: 280px;
    max-width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    border: 2px solid #667eea;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
    animation: airlines-search-blink 2.2s ease-in-out infinite;
    box-sizing: border-box;
}

.airlines-search-input::placeholder {
    color: #94a3b8;
}

.airlines-search-input:focus {
    outline: none;
}

@keyframes airlines-search-blink {
    0%, 100% {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25), 0 0 12px rgba(102, 126, 234, 0.35);
    }
    50% {
        border-color: #764ba2;
        box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.3), 0 0 18px rgba(240, 147, 251, 0.4);
    }
}

.airlines-panel-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.airlines-list-section {
    flex-shrink: 0;
}

.airlines-list-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 8px;
}

.airlines-list-toggle:hover {
    background: #e2e8f0;
}

.airlines-list-wrapper {
    transition: opacity 0.2s;
}

.airlines-list-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    align-content: flex-start;
}

.airline-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.airline-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.airline-row.selected {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
    outline: 2px solid #1e293b;
}

.airline-row .airline-row-name,
.airline-row .airline-status-coming-soon {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.airline-row-logo-wrap {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

.airline-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.airline-logo-fallback {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
}

.airline-row-name {
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.airline-row .airline-status-coming-soon {
    font-size: 12px;
    flex-shrink: 0;
}

.airline-status-line {
    margin-top: 6px;
    font-size: 13px;
    min-height: 20px;
}

.airline-detail-container {
    flex: 1;
    min-height: 400px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.airline-detail-container.airline-detail-expanded {
    min-height: 60vh;
}

.airline-detail-container .airline-detail-iframe,
.airline-detail-container iframe {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.airline-detail-container:not(.airline-detail-expanded) .airline-detail-iframe,
.airline-detail-container:not(.airline-detail-expanded) iframe {
    height: 500px;
    min-height: 400px;
}

.airline-detail-container.airline-detail-expanded .airline-detail-iframe,
.airline-detail-container.airline-detail-expanded iframe {
    height: calc(100vh - 180px);
    min-height: 500px;
}

.airline-detail-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    margin-right: 10px;
}

/* Scrollbar Styling for Sidebar */
.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.5);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.7);
}

/* Farmers Vlogger Styles */
.farmers-panel {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    min-height: 100vh;
    padding: 20px;
    margin: -40px;
    border-radius: 0;
}

.farmers-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(16, 185, 129, 0.2);
}

.farmers-logo {
    font-size: 40px;
    color: #10b981;
}

.farmers-title {
    font-size: 28px;
    font-weight: 700;
    color: #047857;
}

.go-live-btn-top {
    margin-left: auto;
}

.farmers-live-broadcast-card {
    background: #fff;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 14px;
    padding: 18px 20px 22px;
    margin-bottom: 24px;
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.08);
}

.farmers-live-broadcast-intro {
    margin: 0 0 16px;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}

.farmers-live-camera-switch {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 4px;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 12px;
}

.farmers-live-cam-label {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #047857;
    margin-bottom: 2px;
}

.farmers-live-camera-switch .farmers-cam-btn,
.farmers-live-camera-switch .farmers-cam-flip-btn {
    flex: 1 1 auto;
    min-width: 120px;
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
    .live-vlog-flip-overlay-btn {
        min-width: 88px;
        min-height: 88px;
        padding: 14px 16px;
        right: 10px;
        bottom: 10px;
        font-size: 15px;
    }

    .live-vlog-flip-overlay-btn i {
        font-size: 28px;
    }

    .live-vlog-flip-overlay-label {
        font-size: 12px;
        max-width: 100px;
    }

    #videoElement {
        min-height: 220px;
    }
}

.farmers-replay-post-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px 24px;
    box-sizing: border-box;
}

.farmers-replay-post-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.farmers-replay-post-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 14px;
    padding: 22px 22px 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.tabs-container {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab {
    padding: 12px 24px;
    border: 2px solid #10b981;
    background: #fff;
    color: #10b981;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 14px;
}

.tab:hover {
    background: rgba(16, 185, 129, 0.1);
}

.tab.active {
    background: #10b981;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.vloggers-panel {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}

.vlogger-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
}

.vlogger-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.vlogger-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fee2e2;
    color: #dc2626;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.vlogger-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
}

.vlogger-info {
    flex: 1;
}

.vlogger-name {
    font-weight: 600;
    color: #047857;
    font-size: 16px;
    margin-bottom: 5px;
}

.vlogger-stats {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #64748b;
}

.vlogger-stats i {
    margin-right: 5px;
}

/* Facebook-like Social Media */
.social-feed {
    background: #f0f2f5;
    min-height: 100vh;
    padding: 20px;
    margin: -40px;
    border-radius: 0;
}

.social-header {
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-composer {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e4e6eb;
    border-radius: 20px;
    font-size: 15px;
    margin-bottom: 15px;
}

.post-actions {
    display: flex;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #e4e6eb;
}

.post-action-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: #f0f2f5;
    border-radius: 8px;
    color: #65676b;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.post-action-btn:hover {
    background: #e4e6eb;
}

.post-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
}

.post-content {
    margin-bottom: 15px;
    color: #1c1e21;
    line-height: 1.6;
}

.post-image {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
    max-height: 400px;
    object-fit: cover;
    max-width: 100%;
    height: auto;
}

.post-engagement {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid #e4e6eb;
    border-bottom: 1px solid #e4e6eb;
    margin-bottom: 10px;
}

.engagement-btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: none;
    color: #65676b;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.engagement-btn:hover {
    background: #f0f2f5;
}

.engagement-btn.liked {
    color: #1877f2;
}

/* BIGO-like Dating */
.dating-panel {
    background: linear-gradient(145deg, #fff1f2 0%, #fff7ed 28%, #fef3c7 62%, #fde68a 100%);
    min-height: min-content;
    padding: clamp(14px, 3vw, 22px);
    margin: -40px;
    border-radius: 0;
    text-align: left;
}

.dating-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(254, 242, 242, 0.88) 100%);
    border: 1px solid rgba(251, 113, 133, 0.25);
    box-shadow: 0 12px 36px rgba(190, 24, 93, 0.1);
}

.dating-hero-title {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 4vw, 1.65rem);
    color: #9f1239;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dating-hero-title .fa-heart {
    color: #e11d48;
}

.dating-hero-tagline {
    margin: 0;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    line-height: 1.55;
    color: #64748b;
    max-width: 520px;
}

.dating-hero-actions {
    flex-shrink: 0;
}

.dating-go-live-hero-btn {
    min-height: 48px;
    padding: 12px 22px;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35);
}

.dating-tips-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.35);
    backdrop-filter: blur(8px);
}

.dating-how-it-works {
    margin-bottom: 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.35);
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.dating-how-it-works-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: #1e293b;
}

.dating-how-it-works-toggle:hover {
    background: rgba(254, 242, 242, 0.5);
}

.dating-how-it-works-toggle-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fce7f3 0%, #fef3c7 100%);
    color: #db2777;
    font-size: 1.1rem;
}

.dating-how-it-works-toggle strong {
    flex: 1;
    font-size: 0.95rem;
}

.dating-how-it-works-chevron {
    flex-shrink: 0;
    color: #64748b;
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}

.dating-how-it-works.is-expanded .dating-how-it-works-chevron {
    transform: rotate(180deg);
}

.dating-how-it-works-body {
    padding: 0 18px 16px 70px;
    border-top: 1px solid transparent;
}

.dating-how-it-works.is-expanded .dating-how-it-works-body {
    border-top-color: rgba(148, 163, 184, 0.2);
    padding-top: 12px;
}

.dating-profiles-section {
    margin-bottom: 20px;
}

.dating-profiles-grid-shell {
    margin-bottom: 16px;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.35), rgba(236, 72, 153, 0.25));
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}

.dating-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
}

.dating-profile-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    overflow: hidden;
}

.dating-profile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(102, 126, 234, 0.22);
}

.dating-profile-card--selected {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
    box-shadow: 0 14px 36px rgba(99, 102, 241, 0.35);
}

.dating-profile-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

.dating-profile-live-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #ef4444, #f97316);
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45);
    pointer-events: none;
}

.dating-profile-live-btn .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: dating-live-pulse 1.2s ease-in-out infinite;
}

.dating-profile-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.5rem, 8vw, 3.25rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dating-profile-meta {
    padding: 10px 10px 12px;
}

.dating-profile-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    word-break: break-word;
}

.dating-profile-title {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.3;
    word-break: break-word;
}

.dating-profile-viewers {
    margin-top: 6px;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
}

.dating-chat-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    text-align: center;
    color: #64748b;
    background: rgba(255, 255, 255, 0.65);
    border: 2px dashed rgba(148, 163, 184, 0.45);
    border-radius: 14px;
}

.dating-chat-placeholder i {
    font-size: 1.75rem;
    color: #cbd5e1;
}

.dating-chat-placeholder p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.dating-chat-placeholder[hidden] {
    display: none;
}

.dating-chat-active[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .dating-how-it-works-body {
        padding-left: 18px;
    }

    .dating-profiles-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        padding: 10px;
    }
}

.dating-tips-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fce7f3 0%, #fef3c7 100%);
    color: #db2777;
    font-size: 1.1rem;
}

.dating-tips-body strong {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-size: 0.95rem;
}

.dating-tips-list {
    margin: 0;
    padding-left: 1.15rem;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.55;
}

.dating-tips-list li + li {
    margin-top: 4px;
}

.dating-live-section {
    margin-bottom: 20px;
}

.dating-live-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #fee2e2;
    color: #b91c1c;
}

.dating-streams-empty-cta {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #64748b;
}

.stream-card--dating-selected {
    border-color: #e11d48 !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25), 0 12px 32px rgba(225, 29, 72, 0.15) !important;
}

.dating-chat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
}

.dating-chat-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
}

.dating-chat-back-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.dating-chat-head .dating-chat-title {
    margin: 0;
    flex: 1 1 180px;
}

.dating-lang-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(236, 72, 153, 0.22);
}

.dating-lang-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #9f1239;
    margin: 0;
}

.dating-lang-select {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 600;
    min-width: min(100%, 160px);
}

.dating-lang-select:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}

.dating-chat-lang-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fdf2f8;
    border: 1px solid rgba(236, 72, 153, 0.18);
}

.dating-chat-lang-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #9f1239;
    margin: 0;
}

.dating-chat-lang-select {
    flex: 1 1 140px;
    max-width: 220px;
}

.dating-gifts-panel {
    margin-top: 4px;
}

.dating-discover-section {
    margin-bottom: 22px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(253, 242, 248, 0.88) 100%);
    border: 1px solid rgba(236, 72, 153, 0.22);
    box-shadow: 0 12px 36px rgba(190, 24, 93, 0.1);
}

.dating-discover-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.dating-discover-heading {
    margin: 0;
    font-size: clamp(1rem, 2.8vw, 1.15rem);
    color: #9f1239;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dating-discover-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #be185d;
    background: #fff;
    border: 1px solid rgba(244, 114, 182, 0.45);
}

.dating-discover-sub {
    margin: 0 0 14px;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

.dating-discover-grid-shell {
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.35), rgba(167, 139, 250, 0.28));
}

.dating-discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
    gap: 14px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    min-height: 140px;
}

.dating-discover-profile-box {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dating-discover-profile-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(190, 24, 93, 0.14);
}

.dating-discover-offline-note {
    grid-column: 1 / -1;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.8rem;
    line-height: 1.45;
}

.dating-discover-offline-note code {
    font-size: 0.78rem;
}

.dating-discover-empty {
    grid-column: 1 / -1;
}

.dating-my-profiles-section {
    margin-bottom: 22px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(251, 113, 133, 0.28);
    box-shadow: 0 10px 32px rgba(190, 24, 93, 0.08);
}

.dating-my-profiles-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.dating-my-profiles-tab {
    flex: 1 1 auto;
    min-height: 48px;
    min-width: min(100%, 140px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.9);
    color: #475569;
    font-size: clamp(0.85rem, 2.8vw, 0.95rem);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.dating-my-profiles-tab:hover {
    border-color: rgba(236, 72, 153, 0.55);
    color: #9f1239;
}

.dating-my-profiles-tab.is-active {
    background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
    border-color: #ec4899;
    color: #9f1239;
}

.dating-create-profile-tab.is-blink {
    animation: dating-create-profile-tab-blink 1.15s ease-in-out infinite;
}

@keyframes dating-create-profile-tab-blink {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(236, 72, 153, 0);
        transform: scale(1.03);
    }
}

.dating-profile-chat-me {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    touch-action: manipulation;
}

.dating-profile-chat-me.is-blink {
    animation: dating-chat-me-blink 1.2s ease-in-out infinite;
}

@keyframes dating-chat-me-blink {
    0%, 100% { border-color: #cbd5e1; color: #94a3b8; background: #f8fafc; }
    50% { border-color: #ec4899; color: #be185d; background: #fdf2f8; }
}

.dating-profile-chat-me:hover,
.dating-profile-chat-me:focus-visible {
    border-color: #ec4899;
    color: #be185d;
    background: #fdf2f8;
    outline: none;
}

.dating-chat-call-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.dating-view-credits-pill {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    font-size: 0.88rem;
}

.dating-view-credits-pill strong {
    color: #047857;
}

.dating-request-private-btn {
    margin-top: 8px;
    width: 100%;
}

.dating-private-requests-panel {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.dating-private-requests-panel h4 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: #9a3412;
}

.dating-private-requests-hint {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: #7c2d12;
}

.dating-private-request-item {
    padding: 10px 0;
    border-top: 1px solid #fed7aa;
}

.dating-private-gift-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.dating-admin-community-actions {
    margin-bottom: 10px;
}

.dating-video-sub-dialog {
    max-width: 420px;
    margin: 10vh auto;
    padding: 1.25rem;
    position: relative;
    z-index: 2;
}

.dating-video-sub-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #be185d;
}

.dating-video-sub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1rem 0;
}

.dating-my-profiles-tab-panel[hidden] {
    display: none;
}

.dating-my-profiles-lead {
    margin: 0 0 12px;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

.dating-created-profiles-grid-shell {
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.35), rgba(251, 191, 36, 0.3));
}

.dating-created-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    min-height: 120px;
}

.dating-created-profile-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.dating-created-profile-photo-wrap {
    aspect-ratio: 1;
    overflow: hidden;
}

.dating-created-profile-photo-wrap .dating-profile-photo,
.dating-created-profile-photo-wrap .dating-profile-photo--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.dating-created-profile-body {
    padding: 10px 10px 12px;
    text-align: center;
}

.dating-created-profile-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}

.dating-created-profile-tagline {
    margin-top: 4px;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.35;
    word-break: break-word;
}

.dating-created-profile-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 8px;
    opacity: 0.92;
}

.dating-created-profiles-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px 16px;
    color: #64748b;
}

.dating-created-profiles-empty i {
    font-size: 2rem;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.dating-created-profiles-empty p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.dating-created-profiles-empty-cta {
    margin-top: 8px !important;
    font-size: 0.82rem !important;
}

.dating-created-profile-meta {
    margin-top: 4px;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
}

.dating-created-profile-bio {
    margin-top: 6px;
    font-size: 0.68rem;
    color: #64748b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dating-created-profile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 8px;
}

.dating-created-profile-chip {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fdf2f8;
    color: #be185d;
    border: 1px solid rgba(244, 114, 182, 0.35);
}

.dating-created-profile-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    backdrop-filter: blur(4px);
}

.dating-created-profile-verified {
    color: #10b981;
    font-size: 0.75rem;
}

.dating-create-profile-shell {
    padding: 2px 0 8px;
}

.dating-create-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.85fr);
    gap: 20px;
    align-items: start;
}

.dating-create-profile-hero {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 45%, #fff 100%);
    border: 1px solid rgba(244, 114, 182, 0.28);
}

.dating-create-profile-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(219, 39, 119, 0.28);
}

.dating-create-profile-title {
    margin: 0 0 6px;
    font-size: clamp(1.05rem, 2.8vw, 1.2rem);
    color: #9f1239;
    font-weight: 800;
    line-height: 1.25;
}

.dating-create-profile-desc {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.55;
}

.dating-create-profile-progress {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.dating-create-profile-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
}

.dating-create-profile-progress-head strong {
    color: #db2777;
}

.dating-create-profile-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

.dating-create-profile-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f472b6, #ec4899, #db2777);
    transition: width 0.35s ease;
}

.dating-create-section {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.dating-create-section-title {
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dating-create-section-title i {
    color: #ec4899;
}

.dating-create-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.dating-create-field--wide {
    grid-column: 1 / -1;
}

.dating-create-section .form-group {
    margin-bottom: 12px;
}

.dating-create-section .form-group:last-child {
    margin-bottom: 0;
}

.dating-create-section label,
.dating-create-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

.dating-create-hint {
    margin: -2px 0 10px;
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.45;
}

.dating-create-char-count {
    float: right;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
}

.dating-create-section input[type="text"],
.dating-create-section input[type="number"],
.dating-create-section textarea,
.dating-create-select {
    width: 100%;
    padding: 11px 13px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: inherit;
    background: #fafafa;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dating-create-section input:focus,
.dating-create-section textarea:focus,
.dating-create-select:focus {
    outline: none;
    border-color: #ec4899;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
}

.dating-create-interest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dating-create-interest-chip {
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.dating-create-interest-chip:hover {
    border-color: #f9a8d4;
    color: #9f1239;
}

.dating-create-interest-chip.is-selected {
    border-color: #ec4899;
    background: linear-gradient(135deg, #fce7f3, #fdf2f8);
    color: #9f1239;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.18);
}

.dating-create-photo-drop {
    display: block;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.dating-create-photo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dating-create-photo-drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 140px;
    padding: 20px;
    border-radius: 16px;
    border: 2px dashed #cbd5e1;
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.dating-create-photo-drop:hover .dating-create-photo-drop-inner,
.dating-create-photo-drop.is-dragover .dating-create-photo-drop-inner,
.dating-create-photo-drop.has-photo .dating-create-photo-drop-inner {
    border-color: #ec4899;
    background: #fdf2f8;
}

.dating-create-photo-drop-inner i {
    font-size: 1.75rem;
    color: #ec4899;
}

.dating-create-photo-drop-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #334155;
}

.dating-create-photo-drop-sub {
    font-size: 0.78rem;
    color: #94a3b8;
}

.dating-required {
    color: #dc2626;
}

.dating-create-profile-preview {
    margin-top: 12px;
}

.dating-create-profile-preview img {
    width: 100%;
    max-height: 200px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid #fce7f3;
}

.dating-create-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    padding-top: 4px;
}

.dating-create-profile-actions .btn,
.dating-create-save-btn {
    min-height: 48px;
    flex: 1 1 160px;
    border-radius: 12px;
    font-weight: 700;
}

.dating-create-profile-preview-col {
    position: sticky;
    top: 12px;
}

.dating-create-live-preview {
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.dating-create-preview-label {
    margin: 0 0 12px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.dating-create-preview-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dating-create-preview-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f5f9;
}

.dating-create-preview-photo .dating-profile-photo,
.dating-create-preview-photo .dating-profile-photo--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    font-size: 3rem;
}

.dating-create-preview-body {
    padding: 14px 14px 16px;
}

.dating-create-preview-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dating-create-preview-name-row h6 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.dating-create-preview-verified {
    color: #10b981;
}

.dating-create-preview-meta {
    margin: 4px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.dating-create-preview-headline {
    margin: 10px 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #be185d;
    line-height: 1.4;
}

.dating-create-preview-bio {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dating-create-preview-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.dating-create-preview-chip {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fdf2f8;
    color: #9f1239;
}

.dating-create-preview-looking {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
}

.dating-profile-photo--img {
    display: block;
    object-fit: cover;
}

@media (max-width: 900px) {
    .dating-create-profile-layout {
        grid-template-columns: 1fr;
    }

    .dating-create-profile-preview-col {
        position: static;
        order: -1;
    }
}

@media (max-width: 560px) {
    .dating-create-fields-grid {
        grid-template-columns: 1fr;
    }

    .dating-create-field--wide {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .dating-my-profiles-section {
        padding: 12px;
    }

    .dating-my-profiles-tabs {
        flex-direction: column;
    }

    .dating-my-profiles-tab {
        width: 100%;
    }

    .dating-created-profiles-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
        gap: 10px;
        padding: 10px;
    }
}

.dating-gifts-title {
    color: #1e293b;
    margin: 0 0 10px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dating-gifts-grid .gift-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dating-gifts-grid .gift-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(102, 126, 234, 0.2);
}

@media (max-width: 640px) {
    .dating-panel {
        margin: -15px;
        padding: 12px;
    }

    .dating-hero {
        padding: 16px;
    }

    .dating-hero-actions {
        width: 100%;
    }

    .dating-go-live-hero-btn {
        width: 100%;
        justify-content: center;
    }

    .dating-live-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .live-stream-grid {
        grid-template-columns: 1fr;
    }
}

#content-panel.content-panel-dating {
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.dating-access-blocked {
    max-width: 720px;
    margin: 0 auto;
}

.dating-access-hero .dating-hero-title {
    color: #be185d;
}

.dating-access-guidelines {
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
}

.dating-access-guidelines-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dating-access-checklist {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dating-access-checklist-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.dating-access-checklist-item--ok {
    border-color: #86efac;
    background: #f0fdf4;
}

.dating-access-checklist-item--ok .fas {
    color: #16a34a;
}

.dating-access-checklist-item--pending .fas {
    color: #dc2626;
}

.dating-access-checklist-item p {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: #64748b;
}

.dating-access-dob-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    position: relative;
    z-index: 2;
}

.dating-access-dob-heading {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #9a3412;
}

.dating-access-dob-hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #7c2d12;
}

.dating-access-dob-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.dating-access-dob-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dating-access-dob-list-wrap {
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    min-height: 160px;
    transition: min-height 0.2s ease;
}

.dating-access-dob-field--collapsed .dating-access-dob-list-wrap {
    min-height: 0;
    border-color: #f9a8d4;
    background: #fdf2f8;
}

.dating-access-dob-list {
    max-height: 200px;
    min-height: 160px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    transition: max-height 0.2s ease, min-height 0.2s ease;
}

.dating-access-dob-field--collapsed .dating-access-dob-list {
    max-height: none;
    min-height: 0;
    overflow: hidden;
}

.dating-access-dob-field--collapsed .dating-access-dob-option:not(.dating-access-dob-option--selected) {
    display: none;
}

.dating-access-dob-field--collapsed .dating-access-dob-option--selected {
    border-bottom: none;
    cursor: pointer;
}

.dating-access-dob-field--collapsed .dating-access-dob-list-wrap::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: #be185d;
    pointer-events: none;
}

.dating-access-dob-field--collapsed .dating-access-dob-list-wrap {
    position: relative;
}

.dating-access-dob-field--collapsed .dating-access-dob-option--selected {
    padding-right: 36px;
}

.dating-access-dob-option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    text-align: left;
    font-size: 16px;
    line-height: 1.25;
    font-family: inherit;
    color: #0f172a;
    cursor: pointer;
    min-height: 44px;
    box-sizing: border-box;
    touch-action: manipulation;
}

.dating-access-dob-option:last-child {
    border-bottom: none;
}

.dating-access-dob-option:hover,
.dating-access-dob-option:focus-visible {
    background: #f8fafc;
    outline: none;
}

.dating-access-dob-option--selected {
    background: #fce7f3;
    color: #9d174d;
    font-weight: 700;
}

.dating-access-dob-preview {
    margin: 0;
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
    border: 1px dashed #fdba74;
    font-size: 0.95rem;
    color: #7c2d12;
    line-height: 1.4;
}

.dating-access-dob-preview strong {
    color: #9a3412;
    font-weight: 800;
}

.dating-access-dob-save {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
}

.dating-access-dob-save:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 520px) {
    .dating-access-dob-fields {
        grid-template-columns: 1fr;
    }

    .dating-access-dob-list {
        max-height: 160px;
        min-height: 140px;
    }
}

@media (min-width: 521px) and (max-width: 900px) {
    .dating-access-dob-list {
        max-height: 180px;
    }
}

.dating-access-dob-card label {
    width: auto;
    font-weight: 600;
    font-size: 0.9rem;
}

.dating-access-dob-card input[type="date"] {
    flex: 1;
    min-width: 160px;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-appearance: auto;
    appearance: auto;
}

.dating-access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.dating-access-note {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

#content-panel.content-panel-socialmedia {
    overflow-x: hidden;
}

#content-panel.content-panel-ferry {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    #content-panel.content-panel-ferry {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
        max-width: calc(100% + 30px);
        padding: 12px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    #content-panel.content-panel-ferry .panel-title,
    #content-panel.content-panel-ferry .panel-description,
    #content-panel.content-panel-ferry .airlines-search-bar,
    #content-panel.content-panel-ferry .airlines-panel-layout {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #content-panel.content-panel-ferry .airlines-search-input {
        width: 100%;
    }

    #content-panel.content-panel-ferry .airlines-list-container {
        padding: 6px;
        overflow-x: hidden;
    }

    #content-panel.content-panel-ferry .airline-row {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }

    #content-panel.content-panel-ferry .airline-row-name {
        max-width: 52vw;
    }

    #content-panel.content-panel-ferry .airline-detail-container {
        width: 100%;
        min-width: 0;
        padding: 0;
        border-radius: 0;
        border: 0;
        background: transparent;
    }

    #content-panel.content-panel-ferry .airline-detail-container .airline-detail-iframe,
    #content-panel.content-panel-ferry .airline-detail-container iframe {
        min-height: 56vh;
    }

    #content-panel.content-panel-ferry .aznar-modern-search-grid,
    #content-panel.content-panel-ferry .aznar-modern-grid {
        grid-template-columns: 1fr;
    }

    #content-panel.content-panel-ferry .aznar-all-schedule-wrap,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-hero,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-schedule-card,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-popular-block,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-hero,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-schedule-card,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-popular-block,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-card {
        border-radius: 10px;
        padding: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-schedule-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-schedule-tab {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-schedule-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-schedule-gallery {
        grid-template-columns: 1fr;
    }

    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-field input,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-field select,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-search-btn,
    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-schedule-tab {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-subscribe-row {
        flex-direction: column;
    }

    #content-panel.content-panel-ferry .aznar-all-schedule-wrap .aznar-modern-subscribe-row .btn {
        width: 100%;
    }
}

.dating-live-streams-shell {
    margin-bottom: 8px;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.35), rgba(236, 72, 153, 0.25));
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}

.dating-live-streams-grid {
    margin-bottom: 0;
    border-radius: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
}

.live-stream-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stream-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.stream-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.stream-card--dating {
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(148, 163, 184, 0.12) inset;
    backdrop-filter: blur(8px);
}

.stream-card--dating:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 40px rgba(102, 126, 234, 0.22);
    border-color: rgba(129, 140, 248, 0.55);
}

.stream-card--dating .stream-thumbnail {
    height: 200px;
    background: linear-gradient(145deg, #312e81 0%, #5b21b6 45%, #be185d 100%);
}

.stream-card--dating .stream-live-badge {
    background: linear-gradient(90deg, #ef4444, #f97316);
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45);
}

.stream-thumbnail {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.stream-live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #dc2626;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stream-info {
    padding: 15px;
}

.streamer-name {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.stream-stats {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #64748b;
}

.gifts-panel {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.gifts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.gift-item {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gift-item:hover {
    border-color: #667eea;
    transform: scale(1.1);
}

.gift-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.gift-name {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

.gift-price {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
}

.dating-live-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 12px;
}

.dating-live-heading {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.dating-live-sub {
    font-size: 0.9rem;
    color: #475569;
    margin: 0 0 16px;
    max-width: 52rem;
    line-height: 1.45;
}

.dating-streams-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    color: #64748b;
    border: 1px dashed #cbd5e1;
}

.dating-streams-empty i {
    font-size: 2rem;
    color: #94a3b8;
    margin-bottom: 0.75rem;
    display: block;
}

.stream-card--dating:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.stream-title-dating {
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.35;
}

.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: dating-live-pulse 1.2s ease-in-out infinite;
}

@keyframes dating-live-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

.dating-chat-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px 18px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dating-chat-title {
    margin: 0 0 12px;
    font-size: 1.1rem;
    color: #1e293b;
}

.dating-chat-messages {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #f8fafc;
    font-size: 0.9rem;
}

.dating-chat-line {
    margin-bottom: 8px;
    word-break: break-word;
}

.dating-chat-line:last-child {
    margin-bottom: 0;
}

.dating-chat-line--gift {
    color: #b45309;
}

.dating-chat-line--emoji {
    font-size: 1.15rem;
}

.dating-chat-compose {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.dating-chat-input {
    flex: 1 1 160px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
}

.dating-chat-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dating-chat-quick-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.dating-gifts-hint {
    font-size: 0.875rem;
    color: #64748b;
    margin: -6px 0 8px;
}

/* Farmers Vlogger — live streams, chat, gifts */
.farmers-live-gifts-section {
    margin-bottom: 24px;
}

.farmers-live-section {
    background: #fff;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.06);
}

.farmers-live-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 10px;
}

.farmers-live-heading {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #047857;
    display: flex;
    align-items: center;
    gap: 8px;
}

.farmers-live-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 12px;
    font-weight: 700;
}

.farmers-live-sub {
    font-size: 0.9rem;
    color: #475569;
    margin: 0 0 14px;
    line-height: 1.45;
}

.farmers-streams-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    color: #64748b;
    border: 1px dashed rgba(16, 185, 129, 0.45);
}

.farmers-streams-empty i {
    font-size: 2rem;
    color: #10b981;
    margin-bottom: 0.75rem;
    display: block;
}

.stream-card--farmers {
    cursor: pointer;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stream-card--farmers:hover,
.stream-card--farmers-selected {
    border-color: #10b981;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18);
}

.stream-thumbnail--farmers {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    min-height: 100px;
    position: relative;
}

.stream-title-farmers {
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 4px;
}

.farmers-chat-wrap {
    background: #fff;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.farmers-chat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.farmers-chat-back-btn {
    border: none;
    background: #ecfdf5;
    color: #047857;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.farmers-chat-title {
    margin: 0;
    flex: 1 1 180px;
    font-size: 1.05rem;
    color: #047857;
}

.farmers-chat-messages {
    max-height: 220px;
    overflow-y: auto;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

.farmers-chat-line--gift {
    color: #b45309;
}

.farmers-chat-compose {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.farmers-chat-input {
    flex: 1 1 180px;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}

.farmers-chat-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.farmers-chat-quick-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.farmers-gifts-panel {
    background: #fff;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.farmers-gifts-title {
    color: #047857;
    margin: 0 0 10px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.farmers-gifts-hint {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 12px;
    line-height: 1.45;
}

.farmers-gifts-grid .gift-item:hover {
    border-color: #10b981;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.2);
}

.gift-item--budget {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
}

.gift-item--budget:hover {
    border-color: #f59e0b;
}

.dating-go-live-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
}

.dating-go-live-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 80% at 50% 40%, rgba(30, 27, 75, 0.55) 0%, rgba(15, 23, 42, 0.82) 55%, rgba(15, 23, 42, 0.9) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dating-go-live-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, min(94vw, 480px));
    max-height: min(100dvh - 24px, 100vh - 24px);
    height: auto;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.98) 45%, rgba(241, 245, 249, 0.99) 100%);
    border-radius: clamp(18px, 4.5vw, 24px);
    box-shadow: 0 25px 80px rgba(15, 23, 42, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.65) inset, 0 0 0 1px rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.dating-go-live-scroll-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-height: inherit;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
}

.dating-go-live-body {
    flex: 0 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    padding: 0 18px 16px;
}

.dating-go-live-footer {
    flex: 0 0 auto;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding: 14px 20px max(18px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, #f1f5f9 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.06);
}

.dating-go-live-footer-hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
    text-align: center;
}

.dating-go-live-confirm-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 0 !important;
    min-height: 52px;
    font-size: clamp(1rem, 2.8vw, 1.1rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.45);
}

.dating-go-live-inline-start-wrap {
    margin-top: 16px;
    padding-bottom: 8px;
}

.dating-go-live-stop-btn {
    width: 100%;
    justify-content: center;
    margin: 0 !important;
    min-height: 48px;
    border-radius: 12px;
}

.dating-go-live-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 18px 20px 0;
}

.dating-go-live-head h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #0f172a;
}

.dating-go-live-close {
    border: none;
    background: #f1f5f9;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #475569;
}

.dating-go-live-close:hover {
    background: #e2e8f0;
}

.dating-go-live-desc {
    font-size: clamp(0.8125rem, 2.6vw, 0.9375rem);
    color: #64748b;
    margin: 0 0 14px;
    line-height: 1.5;
    text-align: center;
}

/* Centers the preview in the middle band of the sheet (between copy and controls). */
.dating-go-live-video-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 4px 0 16px;
    min-height: min(36dvh, 280px);
    flex: 0 1 auto;
}

.dating-go-live-video-wrap {
    position: relative;
    width: 100%;
    max-width: min(100%, 400px);
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    max-height: min(56dvh, 520px);
    border-radius: clamp(14px, 3.5vw, 20px);
    overflow: hidden;
    background: #0a0a12;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    isolation: isolate;
}

#datingLiveVideoPreview {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    vertical-align: middle;
    max-width: none;
    max-height: none;
    background: #000;
    transform: translateZ(0);
}

.dating-go-live-flip-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.dating-go-live-flip-overlay:hover {
    background: rgba(30, 41, 59, 0.9);
}

.dating-flip-label {
    font-size: 0.75rem;
}

.dating-go-live-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 14px;
    justify-content: center;
}

.dating-live-status {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: #b45309;
    text-align: center;
}

body.dating-go-live-modal-open {
    overflow: hidden;
}

@media (max-width: 520px) {
    .dating-go-live-modal {
        align-items: center;
        justify-content: center;
        padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .dating-go-live-dialog {
        width: min(100%, calc(100vw - 24px));
        max-width: 100%;
        max-height: min(calc(100dvh - 20px), calc(100vh - 20px));
        border-radius: clamp(18px, 5vw, 22px);
    }

    .dating-go-live-video-stage {
        min-height: min(32dvh, 240px);
        padding: 8px 0 12px;
    }

    .dating-go-live-video-wrap {
        width: 100%;
        max-width: 100%;
        max-height: min(50dvh, 440px);
    }
}

@media (min-width: 521px) and (max-height: 560px) {
    .dating-go-live-dialog {
        max-height: min(calc(100dvh - 16px), calc(100vh - 16px));
    }

    .dating-go-live-video-stage {
        min-height: min(28dvh, 200px);
        padding: 4px 0 10px;
    }

    .dating-go-live-video-wrap {
        max-height: min(42dvh, 320px);
    }
}

@media (min-width: 768px) {
    .dating-go-live-video-wrap {
        max-width: min(100%, 360px);
    }
}

/* Games Panel */
.games-panel {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    min-height: 100vh;
    padding: 20px;
    margin: -40px;
    border-radius: 0;
}

.game-category {
    margin-bottom: 40px;
}

.category-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Games - Online: Slots & Casino heading + entertainment notice */
.game-category-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.games-online-panel .category-title.category-title--inline {
    margin-bottom: 0;
}

.games-slots-entertainment-notice {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 6px 12px;
    max-width: min(100%, 22rem);
}

/* Super Ace / Hantak: inline hint next to fun balance */
.superace-wallet-hint,
.hantak-fun-hint {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    white-space: normal;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.game-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.game-card:hover {
    transform: translateY(-8px) rotateY(5deg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.game-thumbnail {
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #fff;
}

.game-info {
    padding: 15px;
    min-width: 0;
}

.game-name {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    font-size: clamp(14px, 2.5vw, 16px);
    line-height: 1.3;
}

.game-age {
    font-size: 12px;
    color: #64748b;
}

.game-score {
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    margin-top: 8px;
    padding: 4px 8px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 6px;
    display: inline-block;
}

/* Games (Free) – modal and in-game UI */
.games-free-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.games-free-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    cursor: pointer;
}
.games-free-modal-content {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.games-free-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 2px solid #e2e8f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}
.games-free-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}
.games-free-modal-close {
    padding: 8px 12px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    font-size: 18px;
}
.games-free-modal-close:hover {
    background: rgba(255,255,255,0.35);
}
.games-free-modal-body {
    padding: 24px;
    overflow-y: auto;
}
.games-free-prompt {
    font-size: 18px;
    color: #1e293b;
    margin: 0 0 20px 0;
    text-align: center;
}
.games-free-score {
    font-size: 16px;
    font-weight: 600;
    color: #667eea;
    margin-top: 16px;
    text-align: center;
}
.games-free-color-options,
.games-free-animal-options,
.games-free-shape-options,
.games-free-number-options,
.games-free-abc-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
}
.games-free-color-btn {
    width: 80px;
    height: 80px;
    border: 4px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.games-free-color-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.games-free-animal-btn,
.games-free-shape-btn {
    padding: 20px 28px;
    font-size: 42px;
    border: 3px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.games-free-animal-btn:hover,
.games-free-shape-btn:hover {
    transform: scale(1.05);
    background: #e2e8f0;
}
.games-free-number-btn,
.games-free-abc-btn {
    padding: 16px 28px;
    font-size: 22px;
    font-weight: 700;
    border: 3px solid #667eea;
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.games-free-number-btn:hover,
.games-free-abc-btn:hover {
    transform: scale(1.05);
    background: rgba(102, 126, 234, 0.25);
}
.games-free-dots {
    font-size: 28px;
    letter-spacing: 8px;
    text-align: center;
    margin: 16px 0;
    color: #1e293b;
}
.games-free-memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.games-free-memory-card {
    aspect-ratio: 1;
    border: 3px solid #e2e8f0;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.games-free-memory-card:hover {
    transform: scale(1.03);
}
.games-free-memory-card[data-hidden="1"] {
    background: #cbd5e1;
    color: #64748b;
}
.games-free-racing-track {
    height: 220px;
    background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
    border-radius: 12px;
    position: relative;
    margin-bottom: 16px;
}
.games-free-car {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 42px;
    transition: left 0.15s ease;
}
.games-free-obstacle {
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    background: #ef4444;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.games-free-puzzle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.games-free-puzzle-tile {
    aspect-ratio: 1;
    border: 3px solid #667eea;
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.15);
    color: #1e293b;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.games-free-puzzle-tile[data-empty="1"] {
    background: #e2e8f0;
    cursor: default;
    visibility: hidden;
}
.games-free-rps-options,
.games-free-card-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 16px 0;
}
.games-free-rps-btn,
.games-free-card-btn {
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border: 3px solid #667eea;
    border-radius: 12px;
    background: #fff;
    color: #667eea;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.games-free-rps-btn:hover,
.games-free-card-btn:hover {
    transform: scale(1.05);
    background: rgba(102, 126, 234, 0.15);
}
.games-free-rps-result,
.games-free-quest-desc {
    text-align: center;
    margin: 16px 0;
    color: #475569;
    font-size: 16px;
}
.games-free-quest-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}
.games-free-quest-btn {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #667eea;
    border-radius: 10px;
    background: #fff;
    color: #667eea;
    cursor: pointer;
}
.games-free-quest-btn:hover {
    background: rgba(102, 126, 234, 0.15);
}
.games-free-space-arena {
    height: 280px;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-radius: 12px;
    position: relative;
    margin-bottom: 16px;
}
.games-free-space-target {
    position: absolute;
    padding: 12px 16px;
    font-size: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s;
}
.games-free-space-target:hover {
    transform: scale(1.2);
}

/* Games - Online lobby */
.games-online-age-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.15) 0%, rgba(15, 118, 110, 0.2) 100%);
    border: 2px solid rgba(13, 148, 136, 0.5);
    border-radius: 12px;
    color: #0f766e;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
.games-online-age-notice i {
    font-size: 20px;
    flex-shrink: 0;
}
.games-online-panel .game-card-online:hover {
    box-shadow: 0 12px 32px rgba(196, 30, 58, 0.25);
}
.game-card-online.game-card-coming-soon:hover {
    transform: none;
}

/* Prediction competition (Games - Online) */
.content-panel-prediction {
    max-width: 100%;
}
.prediction-comp-root {
    max-width: min(1280px, 100%);
    margin: 0 auto;
    padding: clamp(12px, 2vw, 20px);
}
.prediction-comp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.prediction-comp-title {
    margin: 0;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: #0f172a;
}
.prediction-comp-lead {
    color: #475569;
    line-height: 1.55;
    margin: 0 0 20px 0;
    font-size: 0.95rem;
}
.prediction-comp-grid-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.prediction-comp-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.prediction-comp-card h3 {
    margin: 0 0 14px 0;
    font-size: 1.05rem;
    color: #1e293b;
}
.prediction-comp-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    margin: 10px 0 6px 0;
}
.prediction-comp-input,
.prediction-comp-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.95rem;
    box-sizing: border-box;
}
.prediction-comp-name-fields {
    margin-bottom: 14px;
}
.prediction-comp-hint {
    font-size: 0.82rem;
    color: #64748b;
    margin: 8px 0 14px 0;
    line-height: 1.45;
}
.prediction-comp-hint--tight {
    margin-top: 0;
    margin-bottom: 10px;
}
.prediction-join-share-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}
.prediction-join-share-input-row .prediction-comp-input {
    flex: 1 1 160px;
    min-width: 0;
}
.prediction-join-share-input-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.prediction-join-share-card {
    margin-bottom: 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 45%, #f8fafc 100%);
    border: 1px solid #86efac;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.08);
}
.prediction-join-share-title {
    margin: 0 0 10px 0;
    font-size: 1.05rem;
    color: #14532d;
    display: flex;
    align-items: center;
    gap: 8px;
}
.prediction-join-share-lead {
    margin: 0 0 14px 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #334155;
}
.prediction-room-code-readonly {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    font-family: ui-monospace, monospace;
    color: #0f172a;
    background: #fff !important;
}
.prediction-join-inline-join {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(34, 197, 94, 0.45);
}
.prediction-comp-you {
    margin-top: 18px;
    font-size: 0.9rem;
    color: #475569;
}
.prediction-host-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.prediction-host-bar .btn {
    flex: 0 0 auto;
}
.prediction-room-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    color: #78350f;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
}
.prediction-status {
    margin: 0 0 16px 0;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid #b45309;
    color: #334155;
    font-size: 0.92rem;
    line-height: 1.5;
}
.prediction-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    align-items: start;
}
.prediction-player-col {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    min-width: 0;
}
.prediction-col-head {
    margin-bottom: 12px;
}
.prediction-col-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}
.prediction-badge-you {
    font-size: 0.72rem;
    font-weight: 700;
    background: #0d9488;
    color: #fff;
    padding: 2px 8px;
    border-radius: 6px;
    vertical-align: middle;
}
.prediction-opponents {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 8px;
    line-height: 1.45;
}
.prediction-opponents-label {
    font-weight: 600;
    color: #475569;
}
.prediction-opp-pill {
    display: inline-block;
    margin: 4px 6px 0 0;
    padding: 3px 8px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 0.75rem;
}
.prediction-muted {
    color: #94a3b8;
}
.prediction-comp-char-select {
    width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.9rem;
}
.prediction-comp-ready {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.88rem;
    color: #334155;
    cursor: pointer;
}
.prediction-track {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
}
.prediction-track-node {
    flex: 1 1 auto;
    min-width: 4.5rem;
    text-align: center;
    padding: 8px 6px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
}
.prediction-track-node.is-here {
    border-color: #b45309;
    background: #fffbeb;
    color: #92400e;
    box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.2);
}
.prediction-track-door {
    flex: 1 1 auto;
    min-width: 3.5rem;
    padding: 10px 6px;
    border-radius: 10px;
    border: 2px solid #cbd5e1;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
}
.prediction-track-door:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.prediction-track-door.is-here:not(:disabled) {
    border-color: #d97706;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    color: #9a3412;
    animation: prediction-door-pulse 1.2s ease-in-out infinite;
}
.prediction-track-door.is-past {
    border-color: #22c55e;
    background: #ecfdf5;
    color: #166534;
}
@keyframes prediction-door-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
}
.prediction-question-slot {
    margin-top: 12px;
    min-height: 8px;
}
.prediction-q-panel {
    background: #0f172a;
    color: #f8fafc;
    border-radius: 12px;
    padding: 14px;
}
.prediction-q-overlay {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
    pointer-events: auto;
}
.prediction-q-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.prediction-q-overlay-card {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(90vh, 640px);
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.35);
}
.prediction-q-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 0 18px;
}
.prediction-q-overlay-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}
.prediction-q-overlay-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prediction-q-overlay-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.prediction-q-panel--overlay {
    margin: 0 16px 16px 16px;
    border-radius: 12px;
}
.prediction-q-overlay-card--shake {
    animation: prediction-q-shake 0.45s ease;
}
@keyframes prediction-q-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}
.prediction-q-text {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 0.92rem;
    line-height: 1.45;
}
.prediction-q-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prediction-choice-btn {
    text-align: left !important;
    justify-content: flex-start !important;
}
.prediction-standings {
    margin-top: 22px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}
.prediction-standings h3 {
    margin: 0 0 10px 0;
    color: #0f172a;
}
.prediction-standings-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #334155;
    line-height: 1.7;
}

/* Block Blast (Games - Online) */
.block-blast-root {
    max-width: min(960px, 100%);
    margin: 0 auto;
    padding: clamp(12px, 2vw, 22px);
    border-radius: 18px;
    background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 50%, #fdf2f8 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}
.block-blast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.block-blast-head-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.block-blast-title {
    margin: 0;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: #0f172a;
}
.block-blast-lead {
    margin: 0 0 12px;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
}
.block-blast-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.block-blast-stat {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.block-blast-stat span {
    font-size: 0.74rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.block-blast-stat strong {
    color: #0f172a;
    font-size: 1rem;
}
.block-blast-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.block-blast-actions .btn {
    margin: 0;
}
.block-blast-banner {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dbeafe;
    color: #334155;
    font-size: 0.88rem;
}
.block-blast-banner--over {
    border-color: #fca5a5;
    background: #fff1f2;
    color: #9f1239;
    font-weight: 700;
}
.block-blast-board-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.block-blast-board {
    width: min(100%, 520px);
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3), 0 10px 24px rgba(15, 23, 42, 0.2);
}
.block-blast-cell {
    border: none;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.2);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease;
    min-width: 0;
}
.block-blast-cell:hover {
    background: rgba(148, 163, 184, 0.35);
}
.block-blast-cell.is-filled {
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.block-blast-cell.is-flash {
    animation: blockBlastFlashPop 0.24s ease-out;
}
.block-blast-cell.is-blue { background: #3b82f6; }
.block-blast-cell.is-teal { background: #14b8a6; }
.block-blast-cell.is-amber { background: #f59e0b; }
.block-blast-cell.is-rose { background: #f43f5e; }
.block-blast-cell.is-violet { background: #8b5cf6; }
.block-blast-cell.is-indigo { background: #6366f1; }
.block-blast-cell.is-pink { background: #ec4899; }
.block-blast-cell.is-cyan { background: #06b6d4; }
.block-blast-cell.is-emerald { background: #10b981; }
.block-blast-cell.is-sky { background: #0ea5e9; }
.block-blast-cell.is-orange { background: #f97316; }
.block-blast-piece-tray {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.block-blast-piece {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.block-blast-piece:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.18);
}
.block-blast-piece.is-active {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.block-blast-mini-grid {
    display: grid;
    grid-template-columns: repeat(var(--bb-mini-cols), 18px);
    grid-template-rows: repeat(var(--bb-mini-rows), 18px);
    gap: 4px;
}
.block-blast-mini-cell {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: #e2e8f0;
}
.block-blast-mini-cell.is-on {
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.block-blast-mini-cell.is-blue { background: #3b82f6; }
.block-blast-mini-cell.is-teal { background: #14b8a6; }
.block-blast-mini-cell.is-amber { background: #f59e0b; }
.block-blast-mini-cell.is-rose { background: #f43f5e; }
.block-blast-mini-cell.is-violet { background: #8b5cf6; }
.block-blast-mini-cell.is-indigo { background: #6366f1; }
.block-blast-mini-cell.is-pink { background: #ec4899; }
.block-blast-mini-cell.is-cyan { background: #06b6d4; }
.block-blast-mini-cell.is-emerald { background: #10b981; }
.block-blast-mini-cell.is-sky { background: #0ea5e9; }
.block-blast-mini-cell.is-orange { background: #f97316; }
.block-blast-no-piece {
    grid-column: 1 / -1;
    padding: 12px;
    text-align: center;
    color: #64748b;
    font-size: 0.9rem;
}
@keyframes blockBlastFlashPop {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    45% {
        transform: scale(1.12);
        filter: brightness(1.4);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}
@media (max-width: 860px) {
    .block-blast-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .block-blast-actions {
        justify-content: stretch;
    }
    .block-blast-actions .btn {
        width: 100%;
    }
}
@media (max-width: 560px) {
    .block-blast-head-actions {
        width: 100%;
    }
    .block-blast-head-actions .btn {
        width: 100%;
    }
    .block-blast-piece-tray {
        grid-template-columns: 1fr;
    }
    .block-blast-piece {
        min-height: 74px;
    }
}

/* Super Ace slot – cards fill reel; stable row height for spin + final grid */
.superace-container {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: min(1200px, 98vw);
    margin: 0 auto;
    min-height: min(90vh, 860px);
    padding: clamp(12px, 2vw, 24px);
    border-radius: 20px;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.25);
    background: linear-gradient(165deg, #1a2744 0%, #243b55 22%, #1e3a5a 45%, #2d4a6e 65%, #1e4976 85%, #1a3658 100%);
    --superace-reel-h: min(500px, 58vh);
    --superace-strip-gap: 8px;
    --superace-card-h: max(52px, calc((var(--superace-reel-h) - 3 * var(--superace-strip-gap, 8px) - 14px) / 4));
}
.superace-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(120, 180, 220, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.superace-container > * {
    position: relative;
    z-index: 1;
}
.superace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(8px, 1.5vw, 14px);
    margin-bottom: clamp(12px, 1.8vw, 20px);
}
.superace-title {
    margin: 0;
    font-size: clamp(16px, 3.5vw, 22px);
    color: #fff;
}
.superace-title i {
    color: #c41e3a;
    margin-right: 8px;
}
.superace-back-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.superace-back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.superace-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.superace-balance,
.superace-win {
    font-weight: 700;
    color: #fbbf24;
    font-size: clamp(13px, 2.2vw, 17px);
}
.superace-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(10px, 1.4vw, 12px);
    font-weight: 600;
    margin-right: 6px;
}
.superace-bet-row {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
}
.superace-bet-options {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 1vw, 8px);
}
.superace-bet-btn {
    min-height: 44px;
    min-width: 44px;
    padding: clamp(6px, 1.2vw, 10px) clamp(10px, 1.8vw, 14px);
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.superace-bet-btn:hover,
.superace-bet-btn.active {
    background: #c41e3a;
    border-color: #c41e3a;
    color: #fff;
}

/* Super Ace: pay pattern reference (matches ways-to-win rows) */
.superace-patterns-panel {
    margin-bottom: clamp(14px, 2vw, 20px);
    padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2vw, 18px);
    background: linear-gradient(135deg, rgba(0, 56, 168, 0.12) 0%, rgba(206, 17, 38, 0.1) 50%, rgba(252, 209, 22, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
}
.superace-patterns-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.superace-patterns-title i {
    color: #fcd116;
    opacity: 0.95;
}
.superace-patterns-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.88);
    margin: 0 0 12px 0;
}
.superace-patterns-desc strong {
    color: #fff;
    font-weight: 600;
}
.superace-pattern-item {
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.35);
    transition: border-color 0.2s ease, background 0.2s ease;
    overflow: hidden;
}
.superace-pattern-item--scatter {
    margin-bottom: 0;
}
.superace-pattern-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}
.superace-pattern-head:hover {
    background: rgba(255, 255, 255, 0.06);
}
.superace-pattern-head:focus-visible {
    outline: 2px solid #fcd116;
    outline-offset: -2px;
}
.superace-pattern-chevron {
    flex-shrink: 0;
    width: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fcd116;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}
.superace-pattern-item.is-expanded .superace-pattern-chevron {
    transform: rotate(180deg);
}
.superace-pattern-head-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}
.superace-pattern-head-main--scatter {
    flex-wrap: wrap;
}
.superace-pattern-row-label {
    flex: 0 0 auto;
    min-width: 7.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
}
.superace-pattern-track {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.superace-pattern-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(252, 209, 22, 0.5);
    box-sizing: border-box;
}
.superace-pattern-scatter-desc {
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.85);
    flex: 1;
    min-width: 10rem;
    line-height: 1.35;
}
.superace-pattern-body {
    max-height: 0;
    opacity: 0;
    padding: 0 14px;
    overflow: hidden;
    border-top: 1px solid transparent;
    transition: max-height 0.45s ease, opacity 0.35s ease, padding 0.35s ease, border-color 0.2s ease;
    background: rgba(0, 0, 0, 0.12);
}
.superace-pattern-item.is-expanded .superace-pattern-body {
    max-height: 22rem;
    opacity: 1;
    padding: 10px 14px 14px;
    border-top-color: rgba(255, 255, 255, 0.08);
}
.superace-pattern-body-text {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.92);
}

/* Philippine flag palette: blue #0038A8, red #CE1126, yellow #FCD116, white */
@keyframes superacePhPatternHit {
    0% { background: rgba(0, 56, 168, 0.28); border-color: #0038a8; box-shadow: 0 0 0 1px #0038a8, 0 4px 20px rgba(0, 56, 168, 0.35); }
    25% { background: rgba(206, 17, 38, 0.26); border-color: #ce1126; box-shadow: 0 0 0 1px #ce1126, 0 4px 20px rgba(206, 17, 38, 0.35); }
    50% { background: rgba(252, 209, 22, 0.22); border-color: #fcd116; box-shadow: 0 0 0 1px #fcd116, 0 4px 22px rgba(252, 209, 22, 0.4); }
    75% { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px #fff, 0 4px 18px rgba(255, 255, 255, 0.25); }
    100% { background: rgba(0, 56, 168, 0.28); border-color: #0038a8; box-shadow: 0 0 0 1px #0038a8, 0 4px 20px rgba(0, 56, 168, 0.35); }
}
.superace-pattern-item.superace-pattern--hit {
    animation: superacePhPatternHit 0.85s ease-in-out infinite;
}
.superace-pattern-item.superace-pattern--hit .superace-pattern-dot {
    animation: superacePhDotPulse 0.85s ease-in-out infinite;
}
@keyframes superacePhDotPulse {
    0%, 100% { border-color: #0038a8; background: rgba(0, 56, 168, 0.45); }
    33% { border-color: #ce1126; background: rgba(206, 17, 38, 0.4); }
    66% { border-color: #fcd116; background: rgba(252, 209, 22, 0.45); }
}

@keyframes superacePhFlagFlash {
    0% { box-shadow: 0 0 0 3px #0038a8, 0 0 26px rgba(0, 56, 168, 0.7); filter: brightness(1.1); }
    25% { box-shadow: 0 0 0 3px #ce1126, 0 0 26px rgba(206, 17, 38, 0.7); filter: brightness(1.14); }
    50% { box-shadow: 0 0 0 3px #fcd116, 0 0 28px rgba(252, 209, 22, 0.65); filter: brightness(1.18); }
    75% { box-shadow: 0 0 0 3px #ffffff, 0 0 24px rgba(255, 255, 255, 0.5); filter: brightness(1.12); }
    100% { box-shadow: 0 0 0 3px #0038a8, 0 0 26px rgba(0, 56, 168, 0.7); filter: brightness(1.1); }
}

.superace-reels-wrap {
    margin-bottom: clamp(16px, 2.5vw, 24px);
    padding: clamp(14px, 2vw, 22px);
    background: linear-gradient(180deg, rgba(30, 58, 90, 0.4) 0%, rgba(20, 40, 65, 0.5) 100%);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.superace-reels {
    --superace-card-w: max(64px, min(240px, calc((100% - 48px) / 5)));
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
}
.superace-reel {
    width: var(--superace-card-w, 80px);
    height: var(--superace-reel-h, 380px);
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.superace-reel-spinning .superace-reel-strip {
    filter: brightness(1.03) saturate(1.04);
}
.superace-reel-strip {
    display: flex;
    flex-direction: column;
    gap: var(--superace-strip-gap, 8px);
    padding: 4px 0;
    height: 100%;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    will-change: transform;
}
.superace-reel-strip > .superace-card {
    flex: 0 0 var(--superace-card-h);
    width: calc(100% - 4px);
    margin: 0 2px;
    height: var(--superace-card-h);
    min-height: var(--superace-card-h);
    max-height: var(--superace-card-h);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    background: #1a2332;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
    position: relative;
    box-sizing: border-box;
}
.superace-reel-strip > .superace-card.superace-card--win {
    animation: superacePhFlagFlash 0.85s ease-in-out infinite;
    z-index: 2;
}
.superace-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    box-sizing: border-box;
    border-radius: 6px;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.superace-card-rank {
    font-size: 18px;
    line-height: 1.2;
    color: #1a1a2e;
}
.superace-card-suit {
    font-size: 14px;
    color: #1a1a2e;
    opacity: 0.9;
}
.superace-reel-strip > .superace-card.superace-symbol {
    font-weight: 800;
    color: #fff;
}
.superace-symbol {
    box-sizing: border-box;
}
.superace-symbol .superace-card-rank,
.superace-symbol .superace-card-suit { color: #fff; }
.superace-symbol-A { background: linear-gradient(135deg, #c41e3a 0%, #8b1538 100%); }
.superace-symbol-K { background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%); }
.superace-symbol-Q { background: linear-gradient(135deg, #7c2d8a 0%, #4a1a52 100%); }
.superace-symbol-J { background: linear-gradient(135deg, #1e5f3a 0%, #0f4427 100%); }
.superace-symbol-10 { background: linear-gradient(135deg, #5f3a1e 0%, #44270f 100%); }
.superace-symbol-9 { background: linear-gradient(135deg, #3d3d3d 0%, #252525 100%); }
.superace-symbol-SC { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.superace-symbol-W { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }
.superace-symbol-W .superace-card-rank,
.superace-symbol-W .superace-card-suit { color: #1a1a2e; }
.superace-symbol-A .superace-card-rank,
.superace-symbol-A .superace-card-suit,
.superace-symbol-K .superace-card-rank,
.superace-symbol-K .superace-card-suit,
.superace-symbol-Q .superace-card-rank,
.superace-symbol-Q .superace-card-suit,
.superace-symbol-J .superace-card-rank,
.superace-symbol-J .superace-card-suit,
.superace-symbol-10 .superace-card-rank,
.superace-symbol-10 .superace-card-suit,
.superace-symbol-9 .superace-card-rank,
.superace-symbol-9 .superace-card-suit,
.superace-symbol-SC .superace-card-rank,
.superace-symbol-SC .superace-card-suit { color: #fff; }
@media (min-width: 768px) {
    .superace-container {
        --superace-reel-h: min(560px, 62vh);
    }
}
@media (min-width: 1024px) {
    .superace-container {
        --superace-reel-h: min(620px, 66vh);
    }
}
.superace-win-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    animation: superacePopupFade 0.3s ease;
}
@keyframes superacePopupFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.superace-win-popup-inner {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid #fbbf24;
    border-radius: 16px;
    padding: 28px 36px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(251, 191, 36, 0.4);
    animation: superacePopupScale 0.35s ease;
}
@keyframes superacePopupScale {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.superace-win-popup-title {
    font-size: 22px;
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: 8px;
}
.superace-win-popup-amount {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}
.superace-win-popup-close {
    background: linear-gradient(135deg, #c41e3a 0%, #8b1538 100%);
    border: none;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}
.superace-win-popup-close:hover {
    opacity: 0.95;
}
.superace-spin-btn {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    padding: 14px 24px;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #c41e3a 0%, #8b1538 100%);
    border: none;
    color: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.superace-spin-btn:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(196, 30, 58, 0.5);
}
.superace-spin-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Educational games – players & invite */
.educational-players-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.educational-players-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.educational-players-scores-list {
    margin-bottom: 16px;
    min-height: 48px;
}

.educational-player-score-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.educational-player-score-row.educational-player-you {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    border-color: rgba(102, 126, 234, 0.3);
}

.educational-player-name {
    flex: 1;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.educational-player-score {
    font-size: 0.9rem;
    font-weight: 600;
    color: #667eea;
}

.educational-player-remove {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
}

.educational-player-remove:hover {
    color: #dc2626;
}

.educational-players-empty {
    margin: 0;
    padding: 12px 0;
    font-size: 0.9rem;
    color: #64748b;
}

.educational-invite-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.educational-invite-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}

.educational-invite-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.educational-invite-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
}

.educational-invite-input:focus {
    outline: none;
    border-color: #667eea;
}

.educational-invited-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.educational-invited-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #e0e7ff;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #3730a3;
}

.educational-invited-remove {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0 2px;
}

.educational-invited-remove:hover {
    color: #dc2626;
}

/* Educational games search */
.educational-games-search-wrap {
    position: relative;
    margin-bottom: 24px;
    max-width: 420px;
}

.educational-games-search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.educational-games-search-input::placeholder {
    color: #94a3b8;
}

.educational-games-search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.educational-games-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    pointer-events: none;
}

.educational-games-no-results {
    margin-top: 12px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: 15px;
}

.educational-games-no-results #educationalGamesSearchQuery {
    font-weight: 700;
}

@media (max-width: 480px) {
    .educational-games-search-wrap {
        max-width: 100%;
    }
    .educational-games-search-input {
        font-size: 16px;
        padding: 10px 14px 10px 40px;
    }
    .educational-games-search-icon {
        left: 12px;
        font-size: 16px;
    }
    .game-name {
        font-size: 14px;
    }
}

.game-score::before {
    content: '📊 ';
    margin-right: 4px;
}

/* Business Accounting */
.accounting-panel {
    background: #f8fafc;
}

/* Search fields: width tracks longest tab/section label; PH-colored blinking border */
.accounting-panel .accounting-search-row input.accounting-search-input {
    width: min(100%, calc(var(--accounting-search-ch, 28) * 1ch));
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
    border: 2px solid #0038a8;
    background: #fff;
    color: #1e293b;
    animation: accountingSearchPhBlink 1.35s ease-in-out infinite;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.accounting-panel .accounting-search-row input.accounting-search-input:focus {
    outline: none;
    border-color: #ce1126;
    box-shadow: 0 0 0 2px #fcd116, 0 0 14px rgba(0, 56, 168, 0.35);
}

@keyframes accountingSearchPhBlink {
    0%, 100% {
        border-color: #0038a8;
        box-shadow: 0 0 0 1px rgba(252, 209, 22, 0.55), 0 0 10px rgba(0, 56, 168, 0.3);
    }
    50% {
        border-color: #ce1126;
        box-shadow: 0 0 0 2px #fcd116, 0 0 16px rgba(206, 17, 38, 0.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accounting-panel .accounting-search-row input.accounting-search-input {
        animation: none;
        border-color: #0038a8;
        box-shadow: 0 0 0 1px #fcd116;
    }
}

/* BIR and Taxes — reference panel inside Business Accounting */
.bir-taxes-panel-wrap {
    margin-top: 20px;
    margin-bottom: 24px;
    padding: 16px 18px 20px;
    background: linear-gradient(165deg, #fffbeb 0%, #fff 45%, #f0fdf4 100%);
    border: 2px solid #fcd34d;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(180, 83, 9, 0.08);
}

.bir-taxes-panel-wrap--collapsed {
    padding-bottom: 14px;
}

.bir-taxes-panel-wrap--collapsed .bir-taxes-panel-body {
    display: none;
}

.bir-taxes-collapse-header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 0 0;
    padding: 8px 4px 10px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.bir-taxes-collapse-header:hover {
    background: rgba(255, 255, 255, 0.55);
}

.bir-taxes-collapse-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.bir-taxes-collapse-hint {
    font-size: 12px;
    font-weight: 500;
    color: #a16207;
}

.bir-taxes-chevron {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #92400e;
    font-size: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #fde68a;
    transition: transform 0.2s ease;
}

.bir-taxes-panel-wrap--collapsed .bir-taxes-chevron {
    transform: rotate(-90deg);
}

.bir-taxes-panel-body {
    padding-top: 8px;
}

.bir-taxes-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #b45309, #d97706);
    color: #fff;
    border-radius: 14px;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.35);
}

.bir-taxes-title {
    display: block;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #78350f;
    letter-spacing: -0.02em;
}

.bir-taxes-sub {
    margin: 0 0 14px 0;
    font-size: 14px;
    color: #92400e;
    line-height: 1.45;
    max-width: 52rem;
}

.bir-taxes-disclaimer {
    margin: 0 0 18px 0;
    padding: 10px 14px;
    font-size: 13px;
    color: #57534e;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    border: 1px solid #fde68a;
    line-height: 1.5;
}

.bir-taxes-disclaimer a {
    color: #b45309;
    font-weight: 600;
}

.bir-taxes-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.bir-taxes-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #78350f;
    background: #fff;
    border: 2px solid #fde68a;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.bir-taxes-tab:hover {
    border-color: #f59e0b;
    background: #fffbeb;
}

.bir-taxes-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #b45309, #ea580c);
    border-color: #c2410c;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35);
}

.bir-taxes-tab-panel {
    animation: birTaxesFade 0.2s ease;
}

.bir-taxes-search-box {
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f8fafc;
    padding: 12px;
}

.bir-taxes-search-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.bir-taxes-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.bir-taxes-search-input {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #fff;
    color: #0f172a;
    padding: 10px 12px;
    outline: none;
}

.bir-taxes-search-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.bir-taxes-search-empty {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #64748b;
}

.bir-taxes-search-results {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.bir-taxes-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
}

.bir-taxes-search-main {
    min-width: 0;
}

.bir-taxes-search-title {
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}

.bir-taxes-search-meta {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.bir-taxes-search-open {
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.bir-taxes-search-open--na {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #64748b;
}

@keyframes birTaxesFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* eServices / Other eServices — compact rows, bar fits content, Open beside title */
.bir-taxes-row-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.bir-taxes-row-item {
    margin: 0;
    max-width: 100%;
}

.bir-taxes-bar {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 12px 7px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.bir-taxes-bar:hover {
    border-color: #f59e0b;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.2);
    background: #fffbeb;
}

.bir-taxes-bar-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.bir-taxes-bar-line1 {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.bir-taxes-bar-title {
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    line-height: 1.35;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .bir-taxes-bar-title {
        white-space: normal;
    }
}

.bir-taxes-bar-badge {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 5px;
    flex-shrink: 0;
}

.bir-taxes-badge--restricted {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.bir-taxes-badge--maint {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.bir-taxes-badge--na {
    background: #e2e8f0;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.bir-taxes-bar-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
    max-width: 36rem;
}

.bir-taxes-bar-open {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #c2410c;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bir-taxes-bar--static {
    cursor: default;
    background: #f8fafc;
    border-style: dashed;
    flex-wrap: wrap;
}

.bir-taxes-bar--static:hover {
    border-color: #cbd5e1;
    box-shadow: none;
    background: #f8fafc;
}

.bir-taxes-bar-note {
    display: block;
    width: 100%;
    flex-basis: 100%;
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
    font-style: italic;
    line-height: 1.4;
}

.bir-taxes-ref-media {
    max-width: 52rem;
}

.bir-taxes-ref-video-ol {
    margin: 0 0 20px 0;
    padding-left: 1.35rem;
    color: #334155;
    font-size: 14px;
    line-height: 1.55;
}

.bir-taxes-ref-video-ol li {
    margin-bottom: 12px;
}

.bir-taxes-ref-video-ol a {
    font-weight: 600;
    color: #b45309;
    text-decoration: none;
    border-bottom: 1px solid rgba(180, 83, 9, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.bir-taxes-ref-video-ol a:hover {
    color: #c2410c;
    border-bottom-color: #c2410c;
}

.bir-taxes-ref-sub {
    margin: -6px 0 10px 0;
    font-size: 13px;
    color: #64748b;
    font-style: italic;
}

.bir-taxes-ref-doc-list {
    margin-bottom: 16px;
}

.bir-taxes-ref-note {
    margin-top: 12px;
}

.bir-taxes-ref-link-wrap {
    margin: 0 0 18px 0;
}

.bir-taxes-ref-external-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #b45309;
    text-decoration: none;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.bir-taxes-ref-external-link:hover {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #c2410c;
}

.bir-taxes-guide {
    padding: 4px 2px 8px;
    max-width: 48rem;
}

.bir-taxes-lead {
    font-size: 15px;
    color: #334155;
    line-height: 1.55;
    margin: 0 0 18px 0;
}

.bir-taxes-h4 {
    margin: 16px 0 8px 0;
    font-size: 15px;
    font-weight: 700;
    color: #92400e;
}

.bir-taxes-list,
.bir-taxes-ol {
    margin: 0 0 12px 0;
    padding-left: 1.35rem;
    color: #334155;
    font-size: 14px;
    line-height: 1.55;
}

.bir-taxes-list li,
.bir-taxes-ol li {
    margin-bottom: 6px;
}

.bir-taxes-note {
    margin: 14px 0 0 0;
    padding: 12px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    font-size: 14px;
    color: #065f46;
    line-height: 1.5;
}

.bir-taxes-steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bir-taxes-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.bir-taxes-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    border-radius: 10px;
}

.bir-taxes-step-p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #334155;
    line-height: 1.55;
}

.bir-taxes-step .bir-taxes-h4 {
    margin-top: 0;
}

/* Create business names — outer stack = one strong card; inner panel + forms */
.accounting-ph-promo-stack {
    margin-bottom: 22px;
    border-radius: 14px;
    overflow: hidden;
    border: 3px solid #1e40af;
    box-shadow:
        0 0 0 1px rgba(30, 64, 175, 0.14),
        0 10px 32px rgba(30, 64, 175, 0.2),
        0 3px 10px rgba(15, 23, 42, 0.08);
    background: #fff;
}

.accounting-ph-promo-stack .accounting-ph-promo-panel {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}

/* Create business names — emphasized panel + blue blinking bar behind the two actions */
.accounting-ph-promo-panel {
    margin-bottom: 0;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 3px solid #1e40af;
    box-shadow:
        0 0 0 1px rgba(30, 64, 175, 0.12),
        0 8px 28px rgba(30, 64, 175, 0.18),
        0 2px 8px rgba(15, 23, 42, 0.08);
}

.accounting-ph-promo-inner {
    padding: 18px 20px 16px;
}

.accounting-ph-promo-title {
    margin: 0 0 14px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.35;
}

.accounting-ph-promo-heading {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.accounting-ph-promo-title .fa-briefcase {
    color: #1d4ed8;
    font-size: 1.35rem;
}

.accounting-ph-promo-expand-hint {
    margin: 0;
    padding: 12px 14px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    color: #334155;
    text-align: center;
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    border-top: 2px dashed rgba(30, 64, 175, 0.35);
}

.accounting-ph-promo-expand-hint .fa-arrow-down {
    display: inline-block;
    margin-right: 8px;
    color: #1d4ed8;
    font-size: 14px;
}

.accounting-ph-promo-expand-hint strong {
    color: #1e3a8a;
    font-weight: 800;
}

.accounting-ph-promo-action-bar {
    padding: 14px 16px;
    border-radius: 10px;
    background: #1e3a8a;
    animation: accountingPromoBlueBarBlink 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .accounting-ph-promo-action-bar {
        animation: none;
    }
}

@keyframes accountingPromoBlueBarBlink {
    0%,
    100% {
        background: #1e3a8a;
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35);
    }
    50% {
        background: #2563eb;
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    }
}

.accounting-ph-promo-btns {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.accounting-ph-promo-action-bar .accounting-create-business-btn {
    padding: 14px 22px;
    min-height: 52px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.accounting-ph-promo-action-bar .accounting-create-business-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.accounting-ph-promo-action-bar .accounting-create-free-btn:not(:disabled) {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: #1e3a8a;
    border: 3px solid #fff;
    font-weight: 800;
}

.accounting-ph-promo-action-bar .accounting-create-free-btn:not(:disabled):hover {
    background: #fff;
    border-color: #e0e7ff;
    color: #172554;
}

.accounting-ph-promo-action-bar .accounting-create-free-btn:disabled {
    opacity: 0.72;
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #64748b;
    font-weight: 700;
    box-shadow: none;
    transform: none;
}

.accounting-ph-promo-action-bar .accounting-ph-promo-paid-btn {
    background: linear-gradient(180deg, #fefce8 0%, #fef9c3 100%);
    color: #854d0e;
    border: 3px solid #fde047;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.35);
}

.accounting-ph-promo-action-bar .accounting-ph-promo-paid-btn:hover {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #facc15;
    color: #713f12;
}

/* Business selector row */
.accounting-business-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.accounting-business-select-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accounting-business-label {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin: 0;
}

.accounting-business-select {
    padding: 10px 14px;
    font-size: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    min-width: 200px;
    background: #fff;
    color: #1e293b;
}

.accounting-create-business-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.accounting-business-create-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.accounting-create-free-business-form {
    border-color: #86efac;
    background: #f0fdf4;
}

.accounting-create-free-business-form .accounting-create-business-title {
    color: #14532d;
}

.accounting-create-free-business-form .accounting-create-business-desc {
    color: #166534;
}

.accounting-crdj-wrap {
    margin-top: 20px;
}

.accounting-crdj-main-toggle {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.accounting-crdj-main-toggle:hover {
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.45);
}

.accounting-crdj-main-subtitle {
    margin: 0;
    padding: 8px 10px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.94);
    text-align: center;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

/* Sub-book bars: two children stay on one row (parent .accounting-create-dropdown is column for main bar + subtitle). */
.accounting-crdj-sub-toggle.accounting-create-dropdown {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.accounting-crdj-main-content.accounting-create-open {
    padding: 16px 20px 20px;
    border: 1px solid #99f6e4;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #f0fdfa;
}

.accounting-crdj-lead {
    margin: 0 0 16px 0;
    padding: 12px 14px;
    background: #ccfbf1;
    border: 1px solid #5eead4;
    border-radius: 10px;
    color: #134e4a;
    font-size: 14px;
    line-height: 1.55;
}

.accounting-crdj-subs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accounting-crdj-sub-block {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
}

.accounting-crdj-sub-toggle {
    padding: 12px 16px;
    font-size: 15px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: none;
    border-radius: 0;
}

.accounting-crdj-sub-toggle:hover {
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.35);
}

.accounting-crdj-sub-content.accounting-create-open {
    padding: 14px 16px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.accounting-crdj-placeholder {
    margin: 0;
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
}

.accounting-crdj-hint {
    margin: 0 0 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.accounting-crdj-hint i {
    color: #0d9488;
    margin-right: 6px;
}

.accounting-crdj-cell--empty {
    text-align: left;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    padding: 14px 12px;
}

.accounting-crdj-sub-label {
    font-size: 15px;
}

.accounting-crdj-table-caption {
    margin: 14px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.accounting-crdj-table-caption:first-of-type {
    margin-top: 4px;
}

.accounting-crdj-table-wrap {
    overflow-x: auto;
    margin-top: 4px;
    -webkit-overflow-scrolling: touch;
}

.accounting-crdj-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 12px;
    color: #1e293b;
}

.accounting-crdj-table th,
.accounting-crdj-table td {
    border: 1px solid #cbd5e1;
    padding: 6px 8px;
    text-align: center;
    vertical-align: middle;
}

.accounting-crdj-table th {
    background: #e2e8f0;
    font-weight: 600;
    white-space: nowrap;
}

.accounting-crdj-table .accounting-crdj-th-wide {
    min-width: 10rem;
    white-space: normal;
    text-align: left;
}

.accounting-crdj-table .accounting-crdj-th-num {
    width: 2.25rem;
}

.accounting-crdj-table .accounting-crdj-th-group {
    background: #cbd5e1;
}

.accounting-crdj-table td.accounting-crdj-cell {
    background: #fff;
    min-height: 28px;
}

.accounting-crdj-table--crj .accounting-crdj-cell:nth-child(4),
.accounting-crdj-table--crj th:nth-child(4),
.accounting-crdj-table--cdj .accounting-crdj-cell:nth-child(4),
.accounting-crdj-table--cdj th:nth-child(4),
.accounting-crdj-table--gj .accounting-crdj-cell:nth-child(3),
.accounting-crdj-table--gj th:nth-child(3),
.accounting-crdj-table--gl .accounting-crdj-cell:nth-child(3),
.accounting-crdj-table--gl th:nth-child(3),
.accounting-crdj-table--ledger .accounting-crdj-cell:nth-child(3),
.accounting-crdj-table--ledger th:nth-child(3),
.accounting-crdj-table--tb .accounting-crdj-cell:nth-child(1),
.accounting-crdj-table--tb th:nth-child(1),
.accounting-crdj-table--bs .accounting-crdj-cell:nth-child(1),
.accounting-crdj-table--bs th:nth-child(1),
.accounting-crdj-table--is .accounting-crdj-cell:nth-child(1),
.accounting-crdj-table--is th:nth-child(1),
.accounting-crdj-table--re .accounting-crdj-cell:nth-child(1),
.accounting-crdj-table--re th:nth-child(1) {
    text-align: left;
}

.bir-taxes-ref-video-ol--extended {
    margin-top: 18px;
}

/* Employee payroll system — panel inside Business Accounting */
.payroll-panel-wrap {
    margin-top: 20px;
    margin-bottom: 24px;
    padding: 16px 18px 20px;
    background: linear-gradient(165deg, #eef2ff 0%, #fff 42%, #f0fdf4 100%);
    border: 2px solid #a5b4fc;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(67, 56, 202, 0.08);
}

.payroll-panel-wrap--collapsed {
    padding-bottom: 14px;
}

.payroll-panel-wrap--collapsed .payroll-panel-body {
    display: none;
}

.payroll-collapse-header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 8px 4px 10px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.payroll-collapse-header:hover {
    background: rgba(255, 255, 255, 0.55);
}

.payroll-collapse-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.payroll-collapse-hint {
    font-size: 12px;
    font-weight: 500;
    color: #4338ca;
}

.payroll-chevron {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3730a3;
    font-size: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #c7d2fe;
    transition: transform 0.2s ease;
}

.payroll-panel-wrap--collapsed .payroll-chevron {
    transform: rotate(-90deg);
}

.payroll-panel-body {
    padding-top: 8px;
}

.payroll-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    border-radius: 14px;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.payroll-title {
    display: block;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #312e81;
    letter-spacing: -0.02em;
}

.payroll-sub {
    margin: 0 0 14px 0;
    font-size: 14px;
    color: #4338ca;
    line-height: 1.45;
    max-width: 52rem;
}

.payroll-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.payroll-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #3730a3;
    background: #fff;
    border: 2px solid #c7d2fe;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.payroll-tab:hover {
    border-color: #818cf8;
    background: #eef2ff;
}

.payroll-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-color: #5b21b6;
    box-shadow: 0 4px 14px rgba(91, 33, 182, 0.3);
}

.payroll-table-scroll {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e0e7ff;
    background: #fff;
}

.payroll-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.payroll-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f5f3ff;
    color: #312e81;
    font-weight: 700;
    border-bottom: 2px solid #e0e7ff;
    white-space: nowrap;
}

.payroll-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: top;
}

.payroll-table tr:last-child td {
    border-bottom: none;
}

.payroll-row--click {
    cursor: pointer;
    transition: background 0.12s ease;
}

.payroll-row--click:hover {
    background: #f5f3ff;
}

.payroll-row--click:focus {
    outline: 2px solid #6366f1;
    outline-offset: -2px;
}

.payroll-salary {
    font-weight: 700;
    color: #047857;
    white-space: nowrap;
}

.payroll-empty {
    text-align: center;
    color: #64748b;
    padding: 20px 16px;
}

.payroll-foot-hint {
    margin: 12px 0 0 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

.payroll-tools {
    margin: 14px 0 0 0;
}

.payroll-status-pill {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #334155;
    max-width: 14rem;
    line-height: 1.35;
}

.payroll-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.payroll-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    cursor: pointer;
}

.payroll-detail-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: min(88vh, 720px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
    border: 1px solid #e2e8f0;
}

.payroll-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.payroll-detail-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

.payroll-detail-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.payroll-detail-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.payroll-detail-body {
    padding: 16px 18px 20px;
    overflow-y: auto;
}

.payroll-detail-meta {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
}

.payroll-detail-meta p {
    margin: 0 0 8px 0;
}

.payroll-detail-meta p:last-child {
    margin-bottom: 0;
}

.payroll-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.payroll-detail-table th {
    text-align: left;
    padding: 8px 10px;
    background: #eef2ff;
    color: #312e81;
    font-weight: 700;
    border-bottom: 2px solid #c7d2fe;
}

.payroll-detail-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

@media (max-width: 640px) {
    .payroll-tabs {
        flex-direction: column;
    }

    .payroll-tab {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Clear & restore — calm, friendly collapsible panel */
.accounting-clear-undo-panel {
    margin-top: 20px;
    margin-bottom: 24px;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(45, 212, 191, 0.45);
    background: linear-gradient(165deg, #f0fdfa 0%, #ecfeff 38%, #f5f3ff 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 12px 40px rgba(13, 148, 136, 0.1),
        0 4px 16px rgba(15, 23, 42, 0.06);
}

.accounting-clear-undo-dropdown.accounting-create-dropdown {
    background: linear-gradient(120deg, #5eead4 0%, #2dd4bf 45%, #14b8a6 100%);
    color: #042f2e;
    font-weight: 700;
    box-shadow: 0 6px 22px rgba(20, 184, 166, 0.28);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.accounting-clear-undo-dropdown.accounting-create-dropdown:hover {
    box-shadow: 0 8px 28px rgba(20, 184, 166, 0.38);
    filter: brightness(1.02);
}

.accounting-clear-undo-dropdown {
    margin: 0;
}

.accounting-clear-undo-panel:has(#accountingClearUndoBody.accounting-create-open) .accounting-clear-undo-dropdown.accounting-create-dropdown {
    border-radius: 16px 16px 0 0;
}

.accounting-clear-undo-toggle-label {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #042f2e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.accounting-clear-undo-toggle-label .fa-spa {
    font-size: 1.25rem;
    opacity: 0.95;
}

.accounting-clear-undo-chevron {
    color: #042f2e;
    opacity: 0.85;
}

.accounting-clear-undo-body {
    background: rgba(255, 255, 255, 0.72);
    border-top: 1px solid rgba(45, 212, 191, 0.25);
    backdrop-filter: blur(6px);
}

.accounting-clear-undo-body.accounting-create-open {
    padding: 22px 22px 20px;
    border-radius: 0 0 15px 15px;
}

.accounting-clear-undo-lead {
    margin: 0 0 20px 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #115e59;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(153, 246, 228, 0.9);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.06);
}

.accounting-clear-undo-lead .fa-feather-alt {
    margin-right: 10px;
    color: #0d9488;
    font-size: 16px;
    vertical-align: -0.1em;
}

.accounting-clear-undo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 900px) {
    .accounting-clear-undo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        align-items: stretch;
    }

    .accounting-clear-undo-col--undo {
        padding-left: 22px;
        border-left: 1px dashed rgba(45, 212, 191, 0.55);
    }
}

.accounting-clear-undo-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.accounting-clear-undo-card {
    padding: 18px 18px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

.accounting-clear-undo-card--clear {
    border-color: rgba(254, 202, 202, 0.65);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, #fffbeb 100%);
}

.accounting-clear-undo-card--restore {
    border-color: rgba(167, 243, 208, 0.85);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, #ecfdf5 100%);
}

.accounting-clear-undo-card-title {
    margin: 0 0 8px 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: #134e4a;
    letter-spacing: -0.01em;
}

.accounting-clear-undo-card-blurb {
    margin: 0 0 6px 0;
    font-size: 13px;
    line-height: 1.55;
    color: #475569;
}

.accounting-clear-undo-col .accounting-clear-label {
    width: 100%;
    margin-top: 4px;
}

.accounting-clear-undo-col .accounting-clear-tab-select {
    width: 100%;
    max-width: none;
}

.accounting-clear-undo-col .accounting-clear-entries-btn,
.accounting-clear-undo-col .accounting-undo-entries-btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    padding: 12px 16px;
    font-weight: 700;
    border-radius: 10px;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.accounting-clear-undo-col .accounting-clear-entries-btn:hover,
.accounting-clear-undo-col .accounting-undo-entries-btn:hover {
    transform: translateY(-1px);
}

.accounting-clear-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    width: 100%;
}

.accounting-clear-label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin: 0;
}

.accounting-clear-tab-select {
    min-width: 220px;
    max-width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 2px solid #ccfbf1;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.accounting-clear-tab-select:hover {
    border-color: #99f6e4;
}

.accounting-clear-tab-select:focus {
    outline: none;
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.28);
}

.accounting-clear-entries-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9a3412;
    border: 2px solid #fdba74;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
}

.accounting-clear-entries-btn:hover {
    background: linear-gradient(180deg, #fffbeb 0%, #fed7aa 100%);
    border-color: #fb923c;
    color: #7c2d12;
}

.accounting-undo-entries-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #065f46;
    border: 2px solid #6ee7b7;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
}

.accounting-undo-entries-btn:hover {
    background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #34d399;
    color: #064e3b;
}

.accounting-clear-undo-panel .accounting-undo-hint {
    margin: 20px 0 0 0;
    padding: 14px 16px;
    border-top: none;
    border-radius: 12px;
    background: rgba(224, 231, 255, 0.65);
    border: 1px solid rgba(199, 210, 254, 0.95);
}

.accounting-undo-hint {
    margin: 10px 0 0 0;
    font-size: 13px;
    color: #4338ca;
    line-height: 1.6;
    max-width: 100%;
}

.accounting-undo-hint i {
    color: #6366f1;
    margin-right: 8px;
    font-size: 15px;
    vertical-align: -0.05em;
}

.accounting-create-business-form {
    margin-bottom: 20px;
    padding: 20px;
    background: #f0f9ff;
    border: 2px solid #bae6fd;
    border-radius: 12px;
}

/* Forms toggled from “Add a business name” — inside stack, directly under promo */
.accounting-ph-promo-stack .accounting-create-business-form--under-promo {
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-top: 2px solid rgba(30, 64, 175, 0.22);
    box-shadow: none;
}

.accounting-ph-promo-stack .accounting-create-business-form--under-promo + .accounting-create-business-form--under-promo {
    border-top: 2px dashed rgba(30, 64, 175, 0.28);
}

.accounting-create-business-inner {
    max-width: 420px;
}

.accounting-create-business-title {
    font-size: 18px;
    font-weight: 700;
    color: #0c4a6e;
    margin: 0 0 8px 0;
}

.accounting-create-business-desc {
    font-size: 14px;
    color: #0369a1;
    margin: 0 0 16px 0;
}

.accounting-create-business-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.accounting-create-business-error {
    margin: 12px 0 0 0;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 14px;
}

/* Record New Transaction – dropdown bar */
.accounting-create-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
}

.accounting-create-dropdown-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.accounting-create-record-hint {
    margin: 0;
    padding: 8px 10px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.96);
    text-align: center;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    animation: accounting-create-record-hint-blink 1.6s ease-in-out infinite;
}

@keyframes accounting-create-record-hint-blink {
    0%,
    100% {
        opacity: 1;
    }
    45% {
        opacity: 0.28;
    }
    55% {
        opacity: 0.28;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accounting-create-record-hint {
        animation: none;
        opacity: 1;
    }
}

.accounting-create-dropdown:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.45);
}

.accounting-create-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accounting-create-label--with-business {
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.accounting-create-label-title-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* Business name chip (Record New Transaction + CRDJ) — outer pill + PH-flag sliding inner text */
.accounting-business-context--ph-wrap.accounting-create-business-context {
    display: inline-block;
    max-width: 100%;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.02em;
    vertical-align: middle;
    word-break: break-word;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
}

.accounting-crdj-main-title-wrap.accounting-create-label--with-business {
    align-items: center;
}

.accounting-crdj-main-title-line {
    white-space: normal;
}

.accounting-business-context--ph-flag-inner {
    display: inline-block;
    max-width: 100%;
    font-weight: 900;
    letter-spacing: 0.03em;
    background-image: linear-gradient(
        92deg,
        #0038a8 0%,
        #4da3ff 11%,
        #ffffff 22%,
        #fcd116 33%,
        #ce1126 44%,
        #ffffff 55%,
        #0038a8 66%,
        #fcd116 77%,
        #ce1126 88%,
        #0038a8 100%
    );
    background-size: 420% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: accounting-ph-flag-slide 3.8s linear infinite;
}

@keyframes accounting-ph-flag-slide {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accounting-business-context--ph-flag-inner {
        animation: none;
        background: none;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.95);
        color: rgba(255, 255, 255, 0.95);
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
    }
}

.accounting-create-label i {
    font-size: 20px;
}

.accounting-create-chevron {
    font-size: 14px;
    transition: transform 0.2s;
}

/* Expandable content – tabs and bookkeeping forms (hidden until dropdown opened) */
.accounting-create-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.accounting-create-content.accounting-create-open {
    max-height: 5000px;
}

.accounting-purchases-cdj-select {
    width: 100%;
    max-width: 520px;
    padding: 10px 12px;
    font-size: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
}

.accounting-purchases-cdj-select:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.accounting-private-notice {
    margin: 16px 0 20px 0;
    padding: 12px 16px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    color: #065f46;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.accounting-private-notice i {
    color: #059669;
}

.accounting-expired-banner {
    margin-bottom: 16px;
    padding: 14px 18px;
    background: #fef3c7;
    border: 2px solid #f59e0b;
    border-radius: 10px;
    color: #92400e;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.accounting-expired-banner i {
    color: #d97706;
    flex-shrink: 0;
    margin-top: 2px;
}

.accounting-download-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
    margin: 24px 0 8px 0;
}

.accounting-download-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 16px 0;
}

.accounting-sales-type-wrap .form-group label {
    font-weight: 600;
    color: #475569;
}

.accounting-download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Record New Transaction — organized tab groups */
.accounting-tabs.accounting-tabs-wrap.accounting-tabs-organized {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
    padding: 18px 20px 20px;
    background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 42%, #eef2ff 100%);
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 8px 28px rgba(15, 23, 42, 0.06);
}

.accounting-tabs-intro {
    margin: 0 0 16px 0;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.accounting-tabs-intro i {
    margin-right: 8px;
    color: #6366f1;
}

.accounting-tab-groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accounting-tab-group {
    padding: 14px 14px 16px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.accounting-tab-group-heading {
    display: block;
    margin: 0 0 12px 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.accounting-tab-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.accounting-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid #e2e8f0;
}

.accounting-tabs-wrap {
    flex-wrap: wrap;
}

#accountingTabPanels {
    position: relative;
}

.accounting-tab-panel {
    width: 100%;
}

.accounting-full-list-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.report-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.report-table-accountancy-entries .accountancy-entry-row:hover {
    background: #f0f9ff;
}

.accounting-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.accounting-edit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.accounting-edit-modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.accounting-edit-modal-content .form-group { margin-bottom: 16px; }
.accounting-edit-modal-content .form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: #334155; }
.accounting-edit-modal-content input, .accounting-edit-modal-content select, .accounting-edit-modal-content textarea {
    width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; box-sizing: border-box;
}
.accounting-edit-modal-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0; }

.accountancy-entry-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.accountancy-entry-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.accountancy-entry-modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.accountancy-entry-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.accountancy-entry-modal-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.accountancy-entry-modal-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #64748b;
    border-radius: 8px;
}

.accountancy-entry-modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.accountancy-entry-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.accountancy-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accountancy-detail-section {
    font-size: 14px;
    color: #475569;
    padding-bottom: 4px;
}

.accountancy-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}

.accountancy-detail-row span:first-child {
    color: #64748b;
    flex-shrink: 0;
}

.accountancy-detail-row span:last-child {
    color: #1e293b;
    text-align: right;
}

/* Balance Sheet panel */
.balance-sheet-panel {
    max-width: 720px;
}

.balance-sheet-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.balance-sheet-main-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.balance-sheet-sub-title {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin: 16px 0 10px 0;
}

.balance-sheet-sub-title:first-of-type {
    margin-top: 0;
}

.balance-sheet-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.balance-sheet-row {
    display: grid;
    grid-template-columns: 1fr 140px;
    align-items: center;
    gap: 16px;
}

.balance-sheet-row label {
    font-size: 14px;
    color: #334155;
}

.balance-sheet-contra {
    font-size: 12px;
    color: #64748b;
    font-weight: normal;
}

.balance-sheet-input {
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    text-align: right;
}

.balance-sheet-input:focus {
    border-color: #667eea;
    outline: none;
}

.balance-sheet-totals {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
    border: 2px solid #0ea5e9;
}

.balance-sheet-equation {
    font-size: 16px;
    margin: 12px 0;
}

.balance-sheet-equation .bs-total {
    font-weight: 700;
    color: #0c4a6e;
}

.balance-sheet-equation strong {
    margin: 0 8px;
    color: #0369a1;
}

.bs-equation-status {
    margin: 8px 0 0 0;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 600px) {
    .balance-sheet-row {
        grid-template-columns: 1fr;
    }
}

.accounting-tab {
    padding: 10px 16px;
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.35;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.accounting-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
    border-color: #a5b4fc;
}

.accounting-tab:hover:not(.active) {
    border-color: #c7d2fe;
    color: #334155;
    animation: accounting-tab-hover-blink 0.55s ease-in-out infinite;
}

.accounting-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 45%, #4f46e5 100%);
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.32);
}

.accounting-tab.active:hover {
    animation: none;
    filter: brightness(1.06);
}

@keyframes accounting-tab-hover-blink {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 2px 10px rgba(99, 102, 241, 0.12);
    }
    50% {
        opacity: 0.55;
        box-shadow: 0 2px 18px rgba(99, 102, 241, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accounting-tab:hover:not(.active) {
        animation: none;
        opacity: 1;
        box-shadow: 0 2px 12px rgba(99, 102, 241, 0.2);
    }
}

.accounting-form {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.report-section {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.report-table th,
.report-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.report-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #1e293b;
}

/* Marketplace */
.marketplace-panel {
    padding: 0 0 40px 0;
}

.marketplace-header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}

.marketplace-search-row {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 260px;
}

.marketplace-search-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
}

.marketplace-search-input:focus {
    outline: none;
    border-color: #667eea;
}

.marketplace-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.marketplace-cart-badge {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #667eea;
    border-radius: 10px;
    margin-left: 6px;
    line-height: 20px;
    text-align: center;
}

.marketplace-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}

.marketplace-cat-btn {
    padding: 10px 18px;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.marketplace-cat-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

.marketplace-cat-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: #fff;
}

.marketplace-category-section {
    margin-bottom: 32px;
}

.marketplace-category-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.marketplace-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.marketplace-product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid #e2e8f0;
}

.marketplace-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
    border-color: #667eea;
}

.marketplace-product-image {
    height: 140px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 36px;
    overflow: hidden;
}

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

.marketplace-product-thumb--video {
    object-fit: cover;
    pointer-events: none;
}

.marketplace-thumb-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    display: block;
}

.marketplace-thumb-expand,
.marketplace-product-media-count {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    line-height: 1;
}

.marketplace-thumb-expand {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.marketplace-product-media-count {
    bottom: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.marketplace-product-info {
    padding: 16px;
}

.marketplace-product-title {
    font-weight: 700;
    font-size: 16px;
    color: #1e293b;
    margin-bottom: 6px;
}

.marketplace-product-desc {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 10px;
    line-height: 1.4;
}

.marketplace-product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.marketplace-product-price {
    font-weight: 700;
    font-size: 18px;
    color: #059669;
}

.marketplace-product-seller {
    font-size: 12px;
    color: #94a3b8;
}

.marketplace-empty {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.marketplace-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: #cbd5e1;
}

.marketplace-detail-panel,
.marketplace-sell-panel,
.marketplace-cart-panel {
    max-width: 700px;
}

.marketplace-detail-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

@media (max-width: 600px) {
    .marketplace-detail-card {
        grid-template-columns: 1fr;
    }
}

.marketplace-detail-image {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 48px;
    overflow: hidden;
}

.marketplace-detail-image #marketplaceDetailGalleryRoot {
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.marketplace-gallery-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.marketplace-gallery-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}

.marketplace-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #334155;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.marketplace-gallery-nav:hover {
    background: #fff;
    color: #667eea;
}

.marketplace-gallery-prev {
    left: 8px;
}

.marketplace-gallery-next {
    right: 8px;
}

.marketplace-gallery-counter {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    padding: 6px 0 0;
}

.marketplace-gallery-expand {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marketplace-gallery-expand:hover {
    background: rgba(15, 23, 42, 0.75);
}

/* Full-screen marketplace media lightbox */
.marketplace-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.marketplace-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.88);
}

.marketplace-lightbox-content {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1100px);
    max-height: 92vh;
    width: 100%;
    padding-bottom: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.marketplace-lightbox-content > * {
    pointer-events: auto;
}

.marketplace-lightbox-stage {
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marketplace-lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.marketplace-lightbox-video {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    background: #000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.marketplace-lightbox-close {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 5;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.marketplace-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.marketplace-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #334155;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.marketplace-lightbox-nav:hover {
    background: #fff;
    color: #667eea;
}

.marketplace-lightbox-prev {
    left: 8px;
}

.marketplace-lightbox-next {
    right: 8px;
}

.marketplace-lightbox-counter {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 600px) {
    .marketplace-lightbox-prev {
        left: 4px;
    }

    .marketplace-lightbox-next {
        right: 4px;
    }

    .marketplace-lightbox-close {
        top: 4px;
        right: 4px;
    }
}

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

.marketplace-detail-video {
    width: 100%;
    max-height: 220px;
    border-radius: 8px;
    background: #0f172a;
    display: block;
}

.marketplace-detail-price {
    font-size: 28px;
    font-weight: 700;
    color: #059669;
    margin: 12px 0;
}

.marketplace-sell-form {
    background: #fff;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.marketplace-sell-form .form-group {
    margin-bottom: 20px;
}

.marketplace-sell-form label {
    display: block;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.marketplace-sell-form input,
.marketplace-sell-form select,
.marketplace-sell-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}

.mp-sell-media-hint {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 12px 0;
    line-height: 1.4;
    font-weight: 400;
}

.mp-sell-media-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.mp-sell-media-btn {
    flex: 0 0 auto;
}

.mp-sell-media-clear {
    font-size: 13px;
    padding: 10px 14px;
}

.mp-sell-media-preview {
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
}

.mp-sell-media-preview:empty {
    display: none;
}

.mp-sell-preview-img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    display: block;
    vertical-align: top;
}

.mp-sell-preview-video {
    width: 100%;
    max-height: 220px;
    display: block;
    background: #0f172a;
}

.mp-sell-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    padding: 12px;
}

.mp-sell-preview-cell {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.mp-sell-preview-cell .mp-sell-preview-img,
.mp-sell-preview-cell .mp-sell-preview-video {
    max-height: 100px;
    width: 100%;
    object-fit: cover;
}

.mp-sell-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
}

.mp-sell-preview-remove:hover {
    background: #dc2626;
}

/* Job Hiring (Worldwide) */
.jobhiring-panel {
    padding: 0 0 40px 0;
}

.jobhiring-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 24px;
}

.jobhiring-filter-item {
    margin-bottom: 0;
}

.jobhiring-country-select {
    min-width: 200px;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
}

.jobhiring-country-select:focus {
    outline: none;
    border-color: #667eea;
}

.jobhiring-filter-item input[type="text"] {
    min-width: 220px;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}

.jobhiring-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}

.jobhiring-list-container {
    margin-top: 8px;
}

.jobhiring-country-section {
    margin-bottom: 32px;
}

.jobhiring-country-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.jobhiring-job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.jobhiring-job-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid #e2e8f0;
}

.jobhiring-job-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
    border-color: #667eea;
}

.jobhiring-job-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.jobhiring-job-company {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 12px;
}

.jobhiring-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #64748b;
}

.jobhiring-job-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.jobhiring-job-salary {
    color: #059669;
    font-weight: 600;
}

.jobhiring-job-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

.jobhiring-empty {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.jobhiring-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: #cbd5e1;
}

.jobhiring-detail-panel,
.jobhiring-post-panel,
.jobhiring-apps-panel {
    max-width: 720px;
}

.jobhiring-detail-card {
    background: #fff;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.jobhiring-detail-company {
    font-size: 18px;
    color: #64748b;
    margin-bottom: 16px;
}

.jobhiring-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #475569;
}

.jobhiring-detail-salary {
    color: #059669;
    font-weight: 700;
}

.jobhiring-detail-desc h4 {
    margin-bottom: 10px;
    color: #1e293b;
}

.jobhiring-post-form {
    background: #fff;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.jobhiring-post-form .form-group {
    margin-bottom: 20px;
}

.jobhiring-post-form label {
    display: block;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.jobhiring-post-form input,
.jobhiring-post-form select,
.jobhiring-post-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}

.jobhiring-post-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

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

.jobhiring-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 400;
}

.jobhiring-req-star {
    color: #dc2626;
    font-weight: 700;
}

.jobhiring-detail-link,
.jobhiring-detail-phone,
.jobhiring-detail-inquiry {
    margin: 12px 0 0;
    font-size: 14px;
    color: #334155;
}

.jobhiring-detail-link a,
.jobhiring-detail-inquiry a {
    color: #2563eb;
    font-weight: 600;
}

.jobhiring-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    align-items: center;
}

.jobhiring-detail-actions .btn {
    margin: 0;
}

.jobhiring-detail-howto {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
}

.jobhiring-status-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #fef3c7;
    color: #b45309;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.jobhiring-status-active {
    display: inline-block;
    padding: 4px 10px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.jobhiring-status-expired {
    display: inline-block;
    padding: 4px 10px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Cash In Received — collapsible security block (<details> / <summary>) */
details.cashin-security-details {
    margin-top: 14px;
    border-radius: 10px;
    border: 2px solid #0ea5e9;
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
    overflow: hidden;
}
details.cashin-security-details > summary.cashin-security-details__summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 800;
    color: #0c4a6e;
    font-size: 13px;
    user-select: none;
}
details.cashin-security-details > summary.cashin-security-details__summary::-webkit-details-marker {
    display: none;
}
details.cashin-security-details > summary.cashin-security-details__summary::marker {
    content: '';
}
details.cashin-security-details .cashin-security-details__hint-closed,
details.cashin-security-details .cashin-security-details__hint-open {
    font-size: 11px;
    font-weight: 600;
    color: #0369a1;
}
details.cashin-security-details[open] .cashin-security-details__hint-closed {
    display: none;
}
details.cashin-security-details:not([open]) .cashin-security-details__hint-open {
    display: none;
}
details.cashin-security-details[open] > summary.cashin-security-details__summary {
    border-bottom: 1px solid #bae6fd;
    background: rgba(255, 255, 255, 0.45);
}
details.cashin-security-details .cashin-security-details__body {
    padding: 14px;
}

/* Admin Special Tools */
.admin-special-tools-panel {
    padding: 0 0 40px 0;
}

/* Clearer headings & intro inside this panel only */
.admin-special-tools-panel > .panel-title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 12px;
    text-shadow: none;
}

.admin-special-tools-panel > .panel-description {
    font-size: 1.0625rem;
    font-weight: 500;
    color: #475569;
    line-height: 1.65;
    max-width: 46rem;
    margin-bottom: 20px;
}

/* Admin Special Tools — tab search */
.admin-special-tools-tab-search {
    margin-bottom: 16px;
    max-width: 40rem;
}

.admin-special-tools-tab-search-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f766e;
    margin-bottom: 8px;
}

.admin-special-tools-tab-search-field {
    display: flex;
    align-items: center;
    gap: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 4px 6px 4px 14px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 24px rgba(13, 148, 136, 0.07);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-special-tools-tab-search-field:focus-within {
    border-color: #14b8a6;
    box-shadow:
        0 0 0 3px rgba(45, 212, 191, 0.35),
        0 8px 28px rgba(13, 148, 136, 0.12);
}

.admin-special-tools-tab-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.95rem;
    margin-right: 10px;
    flex-shrink: 0;
}

.admin-special-tools-tab-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: #0f172a;
    padding: 10px 8px 10px 0;
    outline: none;
}

.admin-special-tools-tab-search-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.admin-special-tools-tab-search-clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 2px 0 0;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-special-tools-tab-search-clear:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.admin-special-tools-tab-search-clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #14b8a6;
}

.admin-special-tools-tab-search-hint {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
}

.admin-special-tools-tab-search-meta {
    margin: 6px 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0d9488;
}

.admin-special-tools-tab-search-empty {
    margin: -8px 0 16px;
    padding: 18px 16px;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #475569;
    background: linear-gradient(165deg, #f8fafc 0%, #f0fdfa 100%);
    border: 1px dashed #94a3b8;
    border-radius: 12px;
}

.admin-special-tools-tab.admin-special-tools-tab--filtered-out {
    display: none !important;
}

/* Admin Special Tools — User Database (Aznar travelers) */
.admin-user-database-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #fafbfd 0%, #ffffff 48px);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    padding: 22px 22px 28px;
    margin-bottom: 24px;
}

.admin-user-db-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
    margin: 18px 0 8px;
}

.admin-user-db-search-field {
    flex: 1 1 220px;
    min-width: 0;
}

.admin-user-db-search-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}

.admin-user-db-search-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-user-db-search-inner:focus-within {
    border-color: #5eead4;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
}

.admin-user-db-search-ico {
    color: #94a3b8;
    font-size: 0.9rem;
}

.admin-user-db-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.9375rem;
    padding: 8px 4px;
    outline: none;
    color: #0f172a;
}

.admin-user-db-hint {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 14px;
    min-height: 1.2em;
}

.admin-user-db-hint--small {
    font-size: 0.75rem;
    margin-top: 8px;
}

.admin-user-db-hint--small code {
    font-size: 0.85em;
    background: #f1f5f9;
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.admin-user-db-secret-input {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.875rem;
    background: #fff;
    box-sizing: border-box;
}

.admin-user-db-secret-input:focus {
    outline: none;
    border-color: #5eead4;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

.admin-user-db-server-status {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 12px;
    line-height: 1.45;
    min-height: 1.2em;
}

.admin-user-db-server-status--ok {
    color: #0f766e;
}

.admin-user-db-server-status--warn {
    color: #b45309;
}

.admin-user-db-loading-row {
    text-align: center;
    padding: 28px 16px !important;
    color: #64748b;
    font-size: 0.9375rem;
}

.admin-user-db-loading-row .fas {
    margin-right: 10px;
    color: #14b8a6;
}

.admin-user-db-table-outer {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid #e8edf2;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.admin-user-db-main-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.admin-user-db-main-table th {
    text-align: left;
    padding: 12px 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0;
}

.admin-user-db-main-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
}

.admin-user-db-row-main {
    cursor: pointer;
    transition: background 0.15s ease;
}

.admin-user-db-row-main:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: -2px;
}

.admin-user-db-row-main:hover {
    background: #f8fafc;
}

.admin-user-db-row-main--alt td {
    background: rgba(248, 250, 252, 0.85);
}

.admin-user-db-row-main.is-expanded {
    background: #ecfdf5;
}

.admin-user-db-row-main.is-expanded:hover {
    background: #d1fae5;
}

.admin-user-db-td-name {
    font-weight: 600;
    color: #0f172a;
}

.admin-user-db-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-user-db-name-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-user-db-name-ico {
    color: #0d9488;
    opacity: 0.9;
}

.admin-user-db-trip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #0d9488 0%, #2563eb 100%);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(13, 148, 136, 0.35);
}

.admin-user-db-row-chevron {
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.admin-user-db-row-main.is-expanded .admin-user-db-row-chevron {
    transform: rotate(-180deg);
    color: #0d9488;
}

.admin-user-db-td-count {
    text-align: right;
}

.admin-user-db-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 6px 12px;
    font-weight: 800;
    font-size: 0.875rem;
    color: #0f766e;
    background: #ccfbf1;
    border-radius: 10px;
    border: 1px solid #99f6e4;
}

.admin-user-db-row-detail td {
    padding: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #fafbfc;
}

.admin-user-db-detail-card {
    padding: 16px 18px 20px;
}

.admin-user-db-detail-empty {
    margin: 0;
    padding: 14px 16px;
    font-size: 0.875rem;
    color: #64748b;
    background: #fff;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
}

.admin-user-db-detail-empty .fas {
    margin-right: 8px;
    color: #0ea5e9;
}

.admin-user-db-trip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.admin-user-db-trip-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #e2e8f0;
}

.admin-user-db-trip-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.admin-user-db-trip-table tbody tr:nth-child(even) td {
    background: #fafbfc;
}

.admin-user-db-trip-table--nested {
    margin-top: 10px;
    font-size: 0.8125rem;
}

.admin-user-db-reservation-block {
    padding: 16px 18px;
    margin-bottom: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 48px);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.admin-user-db-reservation-block:last-child {
    margin-bottom: 0;
}

.admin-user-db-reservation-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8eff4;
}

.admin-user-db-res-conf code {
    font-size: 0.95em;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
    color: #0f172a;
}

.admin-user-db-res-meta {
    font-weight: 600;
    color: #0f766e;
}

.admin-user-db-res-date {
    font-size: 0.8125rem;
    color: #64748b;
}

.admin-user-db-info-row {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #334155;
    margin: 8px 0 10px;
}

.admin-user-db-info-label {
    display: inline-block;
    min-width: 8.5rem;
    font-weight: 700;
    color: #475569;
    margin-right: 8px;
}

.admin-user-db-info-label .fas {
    margin-right: 6px;
    color: #0d9488;
    width: 1em;
}

.admin-user-db-muted {
    color: #64748b;
    font-weight: 400;
}

.admin-user-db-ticket-row .admin-user-db-ticket-link {
    margin-left: 8px;
    font-weight: 600;
    color: #0d9488;
    text-decoration: none;
}

.admin-user-db-ticket-row .admin-user-db-ticket-link:hover {
    text-decoration: underline;
}

.admin-user-db-mini-ico {
    margin-right: 6px;
    color: #0d9488;
    opacity: 0.95;
    width: 1em;
}

.admin-user-db-cell-port,
.admin-user-db-cell-vessel {
    display: inline-flex;
    align-items: center;
}

.admin-user-db-empty-row {
    text-align: center;
    color: #64748b;
    padding: 28px 16px !important;
}

/* Admin Special Tools — top-level tabs (calm, high-readability, multi-row wrap) */
.admin-special-tools-tablist {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    margin: 16px 0;
    padding: 12px 14px;
    background: linear-gradient(165deg, #f0fdfa 0%, #ecfeff 42%, #f8fafc 100%);
    border: 1px solid rgba(13, 148, 136, 0.22);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(15, 118, 110, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.admin-special-tools-tab {
    --admin-special-tools-tab-border-width: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 13px;
    min-height: 44px;
    flex: 0 1 auto;
    max-width: 100%;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: #134e4a;
    border: var(--admin-special-tools-tab-border-width) solid transparent;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    background-color: #ffffff;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(
            90deg,
            #ef4444 0%,
            #ffffff 22%,
            #2563eb 48%,
            #facc15 74%,
            #ef4444 100%
        );
    background-size: 100% 100%, 320% 100%;
    background-position: 0 0, 0% 0;
    background-repeat: no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    animation: admin-special-tools-tab-border-cycle 4.5s linear infinite;
    transition: color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.admin-special-tools-tab i {
    font-size: 14px;
    width: 1.1em;
    text-align: center;
    color: #0d9488;
    opacity: 0.95;
    flex-shrink: 0;
}

.admin-special-tools-tab:hover {
    color: #0f172a;
    background-image:
        linear-gradient(#fafffe, #fafffe),
        linear-gradient(
            90deg,
            #ef4444 0%,
            #ffffff 22%,
            #2563eb 48%,
            #facc15 74%,
            #ef4444 100%
        );
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.1);
}

.admin-special-tools-tab:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgba(45, 212, 191, 0.55),
        0 4px 16px rgba(13, 148, 136, 0.12);
}

.admin-special-tools-tab.is-active,
.admin-special-tools-tab[aria-selected="true"] {
    --admin-special-tools-tab-border-width: 2.5px;
    color: #ffffff;
    background-image:
        linear-gradient(145deg, #0f766e 0%, #0d9488 48%, #14b8a6 100%),
        linear-gradient(
            90deg,
            #ef4444 0%,
            #ffffff 18%,
            #2563eb 42%,
            #facc15 68%,
            #ef4444 100%
        );
    background-size: 100% 100%, 280% 100%;
    animation:
        admin-special-tools-tab-border-cycle 2.8s linear infinite,
        admin-special-tools-tab-border-glow 2.8s ease-in-out infinite;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35),
        0 4px 14px rgba(15, 118, 110, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.admin-special-tools-tab.is-active i,
.admin-special-tools-tab[aria-selected="true"] i {
    color: rgba(255, 255, 255, 0.95);
    opacity: 1;
}

.admin-special-tools-tab.is-active:hover,
.admin-special-tools-tab[aria-selected="true"]:hover {
    color: #ffffff;
    background-image:
        linear-gradient(145deg, #115e59 0%, #0f766e 50%, #0d9488 100%),
        linear-gradient(
            90deg,
            #ef4444 0%,
            #ffffff 18%,
            #2563eb 42%,
            #facc15 68%,
            #ef4444 100%
        );
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.4),
        0 6px 18px rgba(15, 118, 110, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.admin-special-tools-tab-panels {
    min-height: 120px;
}

.admin-special-tools-tab-panel[hidden],
.admin-special-tools-tab-panel:not(.is-active) {
    display: none !important;
}

.admin-special-tools-tab-panel.is-active {
    display: block !important;
    animation: admin-tab-fade-in 0.28s ease;
}

@keyframes admin-tab-fade-in {
    from {
        opacity: 0.72;
    }
    to {
        opacity: 1;
    }
}

@keyframes admin-special-tools-tab-border-cycle {
    to {
        background-position: 0 0, 100% 0;
    }
}

@keyframes admin-special-tools-tab-border-glow {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.35),
            0 0 10px rgba(239, 68, 68, 0.55),
            0 4px 14px rgba(15, 118, 110, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    25% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.45),
            0 0 12px rgba(255, 255, 255, 0.5),
            0 4px 14px rgba(15, 118, 110, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.35),
            0 0 12px rgba(37, 99, 235, 0.55),
            0 4px 14px rgba(15, 118, 110, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    75% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.35),
            0 0 11px rgba(250, 204, 21, 0.55),
            0 4px 14px rgba(15, 118, 110, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-special-tools-tab-panel.is-active {
        animation: none;
    }

    .admin-special-tools-tab {
        animation: none;
        transition-duration: 0.01ms;
        border: 2px solid #2563eb;
        background-image: none;
        background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    .admin-special-tools-tab:hover {
        border-color: #0d9488;
        background-color: #fafffe;
        background-image: none;
    }

    .admin-special-tools-tab.is-active,
    .admin-special-tools-tab[aria-selected="true"] {
        border-color: #0f766e;
        background-image: linear-gradient(145deg, #0f766e 0%, #0d9488 48%, #14b8a6 100%);
        box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .admin-special-tools-tab.is-active:hover,
    .admin-special-tools-tab[aria-selected="true"]:hover {
        border-color: #0d9488;
        background-image: linear-gradient(145deg, #115e59 0%, #0f766e 50%, #0d9488 100%);
    }
}

/* Admin Special Tools — tab strip container (wrap; no horizontal scroll) */
.admin-special-tools-tablist-scroll {
    margin: 0 0 4px;
    border-radius: 16px;
}

.admin-special-tools-tablist-scroll .admin-special-tools-tablist {
    margin: 0;
}

@media (max-width: 1200px) {
    .admin-special-tools-tablist {
        gap: 6px;
        padding: 10px 12px;
    }

    .admin-special-tools-tab {
        padding: 8px 11px;
        font-size: 13px;
        gap: 6px;
    }

    .admin-special-tools-tab i {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .admin-special-tools-tablist {
        gap: 6px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .admin-special-tools-tab {
        flex: 1 1 calc(50% - 6px);
        min-width: min(100%, 9.5rem);
        padding: 8px 10px;
        font-size: 12.5px;
        white-space: normal;
    }

    .admin-special-tools-tab--menu-vis .admin-special-tools-tab-label {
        white-space: normal;
    }
}

.admin-special-tools-tab-label {
    display: inline;
}

/* Aznar Shipping Corporation — nested sub-tabs (Admin Special Tools) */
.admin-asc-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.admin-asc-subnav-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
    white-space: nowrap;
}

.admin-asc-subnav-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 8px 32px 8px 10px;
    font-size: 0.84rem;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    color: #0f172a;
}

.admin-asc-subnav-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.admin-asc-sub-panel {
    display: none;
}

.admin-asc-sub-panel.is-active {
    display: block;
}

.admin-asc-sub-panel[hidden] {
    display: none !important;
}

/* Aznar ASC — section tabs with animated active border */
.admin-asc-subnav--tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border: 1px solid rgba(37, 99, 235, 0.25);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.65) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.admin-asc-section-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.admin-asc-section-tab {
    flex: 1 1 auto;
    min-width: min(100%, 9.5rem);
    padding: 9px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.25;
}

.admin-asc-section-tab:hover {
    color: #1d4ed8;
    border-color: #93c5fd;
    background: #f8fafc;
}

.admin-asc-section-tab.is-active {
    color: #1e3a8a;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
    animation: adminAscSectionTabBlink 1.6s ease-in-out infinite;
}

.admin-asc-section-tab--audit.is-active {
    border-color: #dc2626;
    color: #991b1b;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
    animation: adminAscSectionTabBlinkAudit 1.6s ease-in-out infinite;
}

@keyframes adminAscSectionTabBlink {
    0%, 100% {
        border-color: #2563eb;
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35);
    }
    50% {
        border-color: #60a5fa;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22);
    }
}

@keyframes adminAscSectionTabBlinkAudit {
    0%, 100% {
        border-color: #dc2626;
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3);
    }
    50% {
        border-color: #f87171;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18);
    }
}

@media (max-width: 640px) {
    .admin-asc-section-tab {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        font-size: 0.75rem;
        padding: 8px 8px;
    }
}

/* Aznar ASC — Audit Trail panel */
.admin-asc-audit-hero {
    border: 2px solid #6366f1;
    background: linear-gradient(180deg, #eef2ff 0%, #fff 56px);
    padding: 20px;
    border-radius: 12px;
}

.admin-asc-audit-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    margin-top: 14px;
}

.admin-asc-audit-search-field {
    flex: 1 1 280px;
    min-width: 0;
}

.admin-asc-audit-secret-field {
    flex: 0 1 220px;
    min-width: 180px;
}

.admin-asc-audit-search-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-asc-audit-search-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 2px solid #c7d2fe;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-asc-audit-search-inner:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.admin-asc-audit-search-ico {
    color: #6366f1;
    font-size: 0.9rem;
}

.admin-asc-audit-search-input,
.admin-asc-audit-secret-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 11px 0;
    font-size: 0.9rem;
    background: transparent;
    color: #0f172a;
}

.admin-asc-audit-secret-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.admin-asc-audit-secret-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.admin-asc-audit-toolbar-actions {
    padding-bottom: 2px;
}

.admin-asc-audit-status {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    color: #64748b;
}

.admin-asc-audit-status-loading {
    color: #6366f1;
}

.admin-asc-audit-layout {
    display: grid;
    grid-template-columns: minmax(240px, 34%) 1fr;
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .admin-asc-audit-layout {
        grid-template-columns: 1fr;
    }
}

.admin-asc-audit-col-title {
    margin: 0 0 10px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
}

.admin-asc-audit-results-col,
.admin-asc-audit-timeline-col {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
    min-height: 200px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.admin-asc-audit-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.admin-asc-audit-result-btn {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.admin-asc-audit-result-btn:hover {
    border-color: #a5b4fc;
    background: #eef2ff;
}

.admin-asc-audit-result-btn.is-selected {
    border-color: #6366f1;
    background: linear-gradient(180deg, #eef2ff 0%, #fff 100%);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.admin-asc-audit-result-name {
    display: block;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.875rem;
}

.admin-asc-audit-result-meta {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}

.admin-asc-audit-result-count {
    display: block;
    font-size: 0.72rem;
    color: #6366f1;
    font-weight: 600;
    margin-top: 4px;
}

.admin-asc-audit-result-errors {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.68rem;
}

.admin-asc-audit-results-empty,
.admin-asc-audit-empty,
.admin-asc-audit-pick-hint {
    margin: 0;
    padding: 14px;
    font-size: 0.875rem;
    color: #64748b;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
}

.admin-asc-audit-timeline-wrap {
    max-height: 520px;
    overflow-y: auto;
}

.admin-asc-audit-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 8px;
}

.admin-asc-audit-timeline-item {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
}

.admin-asc-audit-timeline-item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 18px;
    bottom: -14px;
    width: 2px;
    background: linear-gradient(180deg, #c7d2fe 0%, #e2e8f0 100%);
}

.admin-asc-audit-timeline-item:last-child::before {
    display: none;
}

.admin-asc-audit-timeline-dot {
    position: absolute;
    left: 0;
    top: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6366f1;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #c7d2fe;
}

.admin-asc-audit-timeline-item--error .admin-asc-audit-timeline-dot {
    background: #dc2626;
    box-shadow: 0 0 0 2px #fecaca;
}

.admin-asc-audit-timeline-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
}

.admin-asc-audit-timeline-item--error .admin-asc-audit-timeline-card {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fffbfb 0%, #fff 48px);
}

.admin-asc-audit-timeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.admin-asc-audit-timeline-head time {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}

.admin-asc-audit-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-asc-audit-badge--success { background: #d1fae5; color: #065f46; }
.admin-asc-audit-badge--error { background: #fee2e2; color: #991b1b; }
.admin-asc-audit-badge--warn { background: #fef3c7; color: #92400e; }
.admin-asc-audit-badge--info { background: #dbeafe; color: #1e40af; }
.admin-asc-audit-badge--neutral { background: #f1f5f9; color: #475569; }

.admin-asc-audit-panel-line {
    font-size: 0.8125rem;
    color: #334155;
    margin-bottom: 6px;
}

.admin-asc-audit-panel-line .fas {
    color: #6366f1;
    margin-right: 6px;
}

.admin-asc-audit-summary {
    margin: 0 0 8px;
    font-size: 0.875rem;
    color: #0f172a;
    line-height: 1.45;
}

.admin-asc-audit-conf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #475569;
}

.admin-asc-audit-conf code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.admin-asc-audit-error-box {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.admin-asc-assignee-teams-wrap {
    margin-top: 14px;
    max-width: 720px;
}

.admin-asc-assignee-teams-table .admin-asc-input {
    width: 100%;
    min-width: 0;
}

.admin-asc-assignee-team-active-cell {
    white-space: nowrap;
    width: 88px;
}

.admin-asc-assignee-team-active-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #475569;
    cursor: pointer;
    margin: 0;
}

.admin-asc-users-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 14px;
}

.admin-asc-users-table-wrap--roster {
    overflow-x: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.admin-asc-users-toolbar {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-asc-users-toolbar .btn {
    font-size: 0.8rem;
    padding: 7px 12px;
    white-space: nowrap;
}

.admin-asc-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.admin-asc-users-table--roster {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

.admin-asc-users-table--roster col.admin-asc-col-user { width: 10%; }
.admin-asc-users-table--roster col.admin-asc-col-first { width: 9%; }
.admin-asc-users-table--roster col.admin-asc-col-last { width: 9%; }
.admin-asc-users-table--roster col.admin-asc-col-email { width: 18%; }
.admin-asc-users-table--roster col.admin-asc-col-mobile { width: 24%; }
.admin-asc-users-table--roster col.admin-asc-col-logon { width: 11%; }
.admin-asc-users-table--roster col.admin-asc-col-status { width: 8%; }
.admin-asc-users-table--roster col.admin-asc-col-avail { width: 7%; }
.admin-asc-users-table--roster col.admin-asc-col-actions { width: 36px; }

.admin-asc-users-table th,
.admin-asc-users-table td {
    padding: 5px 4px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    text-align: left;
    overflow: hidden;
}

.admin-asc-users-table--roster thead th {
    background: #f8fafc;
    font-size: 0.68rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 6px 4px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.admin-asc-required-mark {
    color: #dc2626;
    font-weight: 800;
}

.admin-asc-input--required:placeholder-shown {
    border-color: #cbd5e1;
}

.admin-asc-input--required:not(:placeholder-shown):invalid,
.admin-menu-vis-user-row--error .admin-menu-vis-input {
    border-color: #f87171;
}

.admin-asc-users-table--roster .admin-asc-col-actions-h {
    width: 36px;
    padding: 6px 2px;
}

.admin-asc-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 5px 6px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    box-sizing: border-box;
}

.admin-asc-auto-label {
    font-weight: 400;
    font-size: 0.72rem;
    color: #64748b;
    text-transform: none;
}

.admin-asc-input--readonly,
.admin-menu-vis-un--aznar-auto {
    background: #f8fafc;
    color: #475569;
    cursor: default;
}

.admin-asc-input--readonly:focus,
.admin-menu-vis-un--aznar-auto:focus {
    border-color: #e2e8f0;
    box-shadow: none;
}

.admin-asc-users-table--roster .admin-asc-input--compact {
    padding: 4px 5px;
    font-size: 0.78rem;
    border-width: 1px;
    border-radius: 6px;
}

.admin-asc-mobile-cell {
    vertical-align: middle;
    overflow: visible;
}

.admin-asc-mobile-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.admin-asc-mobile-cc-group {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 0;
}

.admin-asc-mobile-flag {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    width: 1.15rem;
    text-align: center;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.admin-asc-mobile-cc {
    width: 3.35rem;
    min-width: 3.35rem;
    max-width: 3.35rem;
    flex-shrink: 0;
    padding: 4px 2px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.72rem;
    box-sizing: border-box;
    text-align: center;
}

.admin-asc-mobile-cell .admin-asc-mobile-local {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
}

.admin-asc-status-select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 4px 2px;
    font-size: 0.72rem;
}

.admin-asc-logon-cell {
    font-size: 0.68rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-asc-actions-cell {
    white-space: nowrap;
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
}

.admin-asc-settings-btn--icon {
    min-width: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.admin-asc-availability-cell {
    white-space: nowrap;
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
}

.admin-asc-availability-btn {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.25;
    border: none;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

.admin-asc-availability-btn--online {
    background: #10b981;
    color: #fff;
}

.admin-asc-availability-btn--offline {
    background: #94a3b8;
    color: #fff;
}

/* User setup roster — card layout on small screens */
@media (max-width: 720px) {
    .admin-asc-users-table-wrap--roster {
        overflow-x: visible;
        border: none;
        background: transparent;
    }

    .admin-asc-users-table--roster {
        min-width: 0;
        display: block;
    }

    .admin-asc-users-table--roster thead {
        display: none;
    }

    .admin-asc-users-table--roster tbody {
        display: block;
    }

    .admin-asc-users-table--roster tbody tr {
        display: block;
        margin-bottom: 14px;
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    .admin-asc-users-table--roster tbody tr:last-child {
        margin-bottom: 0;
    }

    .admin-asc-users-table--roster tbody td {
        display: block;
        width: 100%;
        max-width: none;
        padding: 8px 0;
        border-bottom: none;
    }

    .admin-asc-users-table--roster tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 5px;
    }

    .admin-asc-users-table--roster tbody td[data-label=""]::before {
        display: none;
    }

    .admin-asc-users-table--roster .admin-asc-mobile-cell {
        min-width: 0;
        max-width: none;
    }

    .admin-asc-users-table--roster .admin-asc-mobile-row {
        flex-wrap: nowrap;
    }

    .admin-asc-users-table--roster .admin-asc-mobile-local {
        min-width: 0;
        flex: 1 1 auto;
    }

    .admin-asc-users-table--roster .admin-asc-logon-cell {
        max-width: none;
        white-space: normal;
    }

    .admin-asc-users-table--roster .admin-asc-status-select {
        max-width: none;
    }

    .admin-asc-users-table--roster .admin-asc-actions-cell {
        padding-top: 4px;
    }
}

@media (min-width: 721px) and (max-width: 1100px) {
    .admin-asc-users-table--roster col.admin-asc-col-logon { width: 9%; }
    .admin-asc-users-table--roster col.admin-asc-col-email { width: 16%; }
    .admin-asc-users-table--roster col.admin-asc-col-mobile { width: 26%; }
}

.admin-asc-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 10041;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.admin-asc-settings-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 22px 20px 18px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
}

.admin-asc-settings-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px;
}

.admin-asc-settings-meta {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    font-size: 0.9rem;
}

.admin-asc-settings-label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 2px;
}

.admin-asc-email-draft-card {
    max-width: 640px;
    width: 100%;
}

.admin-asc-email-draft-body {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
}

.admin-asc-email-draft-warn {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fffbeb;
    color: #b45309;
    font-size: 13px;
    line-height: 1.5;
}

.admin-asc-office-card {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.95);
}

.admin-asc-office-card-title {
    margin: 0 0 12px;
    font-size: 1rem;
    color: #0f172a;
}

.admin-asc-office-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.admin-asc-office-notes-wrap {
    grid-column: 1 / -1;
}

.admin-special-tools-tab--menu-vis {
    background-image:
        linear-gradient(180deg, #faf5ff 0%, #ffffff 100%),
        linear-gradient(
            90deg,
            #ef4444 0%,
            #ffffff 22%,
            #2563eb 48%,
            #facc15 74%,
            #ef4444 100%
        );
}

.admin-special-tools-tab--menu-vis i {
    color: #7c3aed;
}

.admin-special-tools-tab--menu-vis:hover {
    background-image:
        linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%),
        linear-gradient(
            90deg,
            #ef4444 0%,
            #ffffff 22%,
            #2563eb 48%,
            #facc15 74%,
            #ef4444 100%
        );
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
}

.admin-special-tools-tab--menu-vis.is-active,
.admin-special-tools-tab--menu-vis[aria-selected="true"] {
    background-image:
        linear-gradient(145deg, #5b21b6 0%, #7c3aed 48%, #8b5cf6 100%),
        linear-gradient(
            90deg,
            #ef4444 0%,
            #ffffff 18%,
            #2563eb 42%,
            #facc15 68%,
            #ef4444 100%
        );
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35),
        0 4px 14px rgba(91, 33, 182, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .admin-special-tools-tab--menu-vis {
        border-color: rgba(124, 58, 237, 0.45);
        background-image: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
    }

    .admin-special-tools-tab--menu-vis.is-active,
    .admin-special-tools-tab--menu-vis[aria-selected="true"] {
        border-color: #5b21b6;
        background-image: linear-gradient(145deg, #5b21b6 0%, #7c3aed 48%, #8b5cf6 100%);
    }
}

/* Menu visibility — Admin Special Tools panel */
.admin-menu-vis-card-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: linear-gradient(165deg, #faf5ff 0%, #f0fdfa 28%, #ffffff 120px);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    padding: 24px 24px 28px;
}

.admin-menu-vis-card-wrap .admin-tool-title i {
    color: #7c3aed;
}

.admin-menu-vis-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #334155;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #c4b5fd;
    border-radius: 12px;
    line-height: 1.5;
}

.admin-menu-vis-summary .fas {
    color: #7c3aed;
    flex-shrink: 0;
}

.admin-menu-vis-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 20px;
    margin-bottom: 16px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.admin-menu-vis-search-label {
    display: block;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}

.admin-menu-vis-search-field {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-menu-vis-search-field:focus-within {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
    background: #fff;
}

.admin-menu-vis-search-field .fa-search {
    color: #94a3b8;
    font-size: 0.9rem;
}

.admin-menu-vis-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.9375rem;
    padding: 8px 0;
    outline: none;
    color: #0f172a;
}

.admin-menu-vis-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

.admin-menu-vis-secret-details {
    margin: 0 0 14px;
    font-size: 0.875rem;
}

.admin-menu-vis-secret-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #475569;
    padding: 8px 0;
    list-style-position: outside;
}

.admin-menu-vis-secret-hint {
    font-weight: 400;
    color: #94a3b8;
}

.admin-menu-vis-secret-wrap {
    margin-top: 10px;
}

.admin-menu-vis-secret-input {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.875rem;
}

.admin-menu-vis-status {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 12px;
    min-height: 1.2em;
}

.admin-menu-vis-status--saved {
    color: #0f766e;
    font-weight: 600;
}

.admin-menu-vis-search-empty {
    text-align: center;
    padding: 20px 16px;
    margin: 0 0 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
}

.admin-menu-vis-cards-mount {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-menu-vis-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-menu-vis-card--focused {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.admin-menu-vis-card.is-restricted {
    border-color: #c4b5fd;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08);
    background: linear-gradient(180deg, #faf5ff 0%, #ffffff 56px);
}

.admin-menu-vis-card--filtered-out {
    display: none !important;
}

.admin-menu-vis-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.admin-menu-vis-card-titles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
}

.admin-menu-vis-card-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
}

.admin-menu-vis-card-key code {
    font-size: 0.8em;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 6px;
    color: #475569;
}

.admin-menu-vis-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5b21b6;
    background: #ede9fe;
    border: 1px solid #c4b5fd;
    border-radius: 999px;
}

.admin-menu-vis-restrict-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 22rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    line-height: 1.45;
}

.admin-menu-vis-restrict-label input {
    margin-top: 3px;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #7c3aed;
    flex-shrink: 0;
}

.admin-menu-vis-users-panel {
    padding: 14px 18px 18px;
    background: #fafbfc;
}

.admin-menu-vis-users-hint {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

.admin-menu-vis-users-hint--aznar {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #99f6e4;
    background: #ecfdf5;
    color: #0f766e;
}

.admin-menu-vis-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e8edf2;
    background: #fff;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
}

.admin-menu-vis-users-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.admin-menu-vis-users-table th {
    text-align: left;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.admin-menu-vis-users-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.admin-menu-vis-input,
.admin-menu-vis-select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    background: #fff;
    color: #0f172a;
}

.admin-menu-vis-input:focus,
.admin-menu-vis-select:focus {
    outline: none;
    border-color: #a78bfa;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2);
}

.admin-menu-vis-user-actions {
    min-width: 120px;
    text-align: center;
    white-space: nowrap;
}

.admin-menu-vis-save-user-row {
    margin-right: 4px;
}

.admin-menu-vis-user-row--saved {
    background: rgba(16, 185, 129, 0.08);
}

.admin-menu-vis-user-row--error {
    background: rgba(239, 68, 68, 0.08);
}

.admin-menu-vis-user-row--error .admin-menu-vis-input,
.admin-menu-vis-user-row--error .admin-menu-vis-select {
    border-color: #f87171;
}

.admin-menu-vis-remove-user {
    min-width: 36px;
    padding: 6px 10px;
}

.admin-menu-vis-add-user {
    margin-top: 4px;
}

.admin-menu-vis-country-iso-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.admin-menu-vis-mobile-flag {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.admin-menu-vis-country-iso {
    width: 100%;
    min-width: 0;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #f8fafc;
    cursor: default;
}

.admin-menu-vis-mobile-cc-cell {
    min-width: 88px;
}

.admin-menu-vis-mobile-cc-cell .admin-menu-vis-mobile-cc {
    width: 100%;
    min-width: 0;
}

.admin-menu-vis-mobile-local-cell {
    min-width: 120px;
}

@media (max-width: 768px) {
    .admin-menu-vis-toolbar-actions {
        width: 100%;
        margin-left: 0;
    }

    .admin-menu-vis-toolbar-actions .btn {
        flex: 1 1 auto;
    }

    .admin-menu-vis-restrict-label {
        max-width: 100%;
    }
}

/* All payment setup (Admin Special Tools) */
.admin-payment-setup-wrap .admin-payment-setup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 14px;
}

.admin-payment-setup-prod-list {
    margin: 0;
    padding-left: 1.2rem;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.admin-payment-setup-prod-list li {
    margin-bottom: 6px;
}

.admin-payment-setup-category {
    margin-bottom: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.admin-payment-setup-summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    color: #0f172a;
    background: linear-gradient(90deg, #f8fafc 0%, #fff 100%);
    transition: background 0.2s ease;
}

.admin-payment-setup-summary::-webkit-details-marker {
    display: none;
}

.admin-payment-setup-summary::marker {
    display: none;
}

.admin-payment-setup-summary::before {
    content: '';
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-right: 10px;
    border-right: 2px solid #0d9488;
    border-bottom: 2px solid #0d9488;
    transform: rotate(-45deg) translateY(-2px);
    transition: transform 0.2s ease;
    vertical-align: middle;
}

.admin-payment-setup-category[open] > .admin-payment-setup-summary::before {
    transform: rotate(45deg) translateY(0);
}

.admin-payment-setup-summary:hover {
    background: linear-gradient(90deg, #f0fdfa 0%, #fff 100%);
}

.admin-payment-setup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    padding: 4px 9px;
    margin-right: 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    vertical-align: middle;
    background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%);
    color: #fff;
    letter-spacing: 0.04em;
}

.admin-payment-setup-body {
    padding: 0 18px 18px;
    border-top: 1px solid #f1f5f9;
}

.admin-payment-setup-lead {
    margin: 14px 0 10px;
    font-size: 0.975rem;
    line-height: 1.65;
    color: #475569;
}

.admin-payment-setup-flow {
    margin: 12px 0 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #334155;
}

.admin-payment-setup-flow ol {
    margin: 8px 0 0 1.1rem;
    padding: 0;
}

.admin-payment-setup-flow li {
    margin-bottom: 6px;
}

.admin-payment-setup-hint {
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: #0f766e;
}

.admin-payment-setup-bullets {
    margin: 10px 0 12px;
    padding-left: 1.2rem;
    color: #475569;
    font-size: 0.925rem;
    line-height: 1.6;
}

/* Nested accordion inside §6 Philippines (e.g. GCash merchant API runbook) */
.admin-payment-setup-nested {
    margin: 16px 0 8px;
    border-radius: 12px;
    border: 1px dashed rgba(13, 148, 136, 0.45);
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.55) 0%, #fff 100%);
    overflow: hidden;
}

.admin-payment-setup-nested > .admin-payment-setup-summary--nested::before {
    border-color: #0f766e;
}

.admin-payment-setup-summary--nested {
    padding: 12px 16px !important;
    font-size: 0.93rem !important;
    gap: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.admin-payment-setup-summary--nested i {
    color: #0d9488;
    margin-right: 6px;
    font-size: 0.95rem;
}

.admin-payment-setup-nested-body {
    padding-top: 0 !important;
    border-top: 1px solid rgba(45, 212, 191, 0.25);
}

.admin-payment-setup-cred-wrap {
    overflow-x: auto;
    margin: 8px 0 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.admin-payment-setup-cred-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: #fff;
}

.admin-payment-setup-cred-table th,
.admin-payment-setup-cred-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    color: #334155;
}

.admin-payment-setup-cred-table th {
    background: #f8fafc;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-payment-setup-cred-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-payment-setup-bullets li {
    margin-bottom: 6px;
}

.admin-payment-setup-subtitle {
    margin: 22px 0 10px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    color: #0f766e;
    line-height: 1.35;
}

.admin-payment-setup-subtitle:first-of-type {
    margin-top: 4px;
}

.admin-payment-setup-lead--footer {
    margin-top: 14px;
    font-size: 0.88rem !important;
    color: #64748b !important;
}

.admin-payment-provider-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 12px;
}

.admin-payment-provider-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.15fr) minmax(160px, 1.35fr) auto minmax(160px, 1.4fr);
    gap: 12px 14px;
    align-items: start;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.45;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}

.admin-payment-provider-row:last-child {
    border-bottom: none;
}

.admin-payment-provider-row--head {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    padding: 10px 14px;
}

.admin-payment-provider-name {
    font-weight: 700;
    color: #0f172a;
}

.admin-payment-provider-sub {
    color: #64748b;
}

.admin-payment-provider-docs {
    white-space: nowrap;
    font-weight: 600;
    color: #0d9488;
    text-decoration: none;
}

.admin-payment-provider-docs:hover {
    text-decoration: underline;
    color: #0f766e;
}

.admin-payment-provider-docs--na {
    color: #94a3b8;
    font-weight: 500;
}

.admin-payment-provider-note {
    color: #475569;
    font-size: 0.82rem;
}

.admin-payment-provider-note--muted {
    color: #94a3b8;
    font-style: italic;
}

@media (max-width: 900px) {
    .admin-payment-provider-row:not(.admin-payment-provider-row--head) {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .admin-payment-provider-row--head {
        display: none;
    }
}

/* Manual ID verification queue (Admin Special Tools) */
.admin-verification-queue-card .admin-tool-title i {
    color: #7c3aed;
}
.admin-verification-queue-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.admin-verification-queue-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid #e9d5ff;
}
.admin-verification-queue-col-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.admin-verification-ai-block {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 13px;
}
.admin-verification-ai-block--low {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.admin-verification-ai-block--medium {
    border-color: #fde68a;
    background: #fffbeb;
}
.admin-verification-ai-block--high {
    border-color: #fecaca;
    background: #fef2f2;
}
.admin-verification-ai-label {
    font-weight: 700;
    color: #475569;
}
.admin-verification-ai-risk {
    display: inline-block;
    margin-left: 6px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #0f172a;
}
.admin-verification-ai-summary {
    margin: 6px 0 0;
    line-height: 1.45;
    color: #334155;
}

/* Settings — assistive ID scan (user upload) */
.verification-ai-scan-panel {
    margin: 12px 0 4px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #c7d2fe;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
}
.verification-ai-scan-panel--low {
    border-color: #86efac;
    background: linear-gradient(135deg, #ecfdf5 0%, #f8fafc 100%);
}
.verification-ai-scan-panel--medium {
    border-color: #fcd34d;
    background: linear-gradient(135deg, #fffbeb 0%, #f8fafc 100%);
}
.verification-ai-scan-panel--high {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #fef2f2 0%, #f8fafc 100%);
}
.verification-ai-scan-head {
    font-weight: 700;
    font-size: 14px;
    color: #312e81;
    margin-bottom: 6px;
}
.verification-ai-scan-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}
.verification-ai-scan-disclaimer {
    margin: 8px 0 0;
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}

/* Manual ID upload — drag/drop & paste (Settings) */
.manual-verification-card .manual-verification-intro {
    margin: 0 0 18px;
    line-height: 1.55;
    color: #475569;
    font-size: 14px;
}

.manual-verification-card kbd {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
}

.manual-verification-card .verification-automated-row {
    margin-bottom: 18px;
}

.manual-verification-card .verification-api-msg {
    margin-top: 10px;
    font-size: 13px;
    color: #64748b;
}

.manual-verification-card .verification-paste-toolbar {
    margin-bottom: 18px;
}

.manual-verification-card .verification-paste-toolbar-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: #6366f1;
}

.manual-verification-card .verification-paste-zones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.manual-verification-card .verification-paste-zone {
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px dashed #94a3b8;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.manual-verification-card .verification-paste-zone:focus-visible {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.manual-verification-card .verification-paste-zone:hover {
    border-color: #818cf8;
}

.manual-verification-card .verification-paste-zone-title {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 4px;
}

.manual-verification-card .verification-paste-zone-hint {
    font-size: 12px;
    color: #64748b;
}

.manual-verification-card .verification-dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.manual-verification-card .verification-dropzone--drag {
    border-color: #6366f1;
    background: #eef2ff;
}

.manual-verification-card .verification-dropzone--filled {
    border-style: solid;
    border-color: #86efac;
}

.manual-verification-card .verification-dropzone-input {
    position: absolute;
    width: 0.01px;
    height: 0.01px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.manual-verification-card .verification-dropzone-inner {
    padding: 22px 16px;
    text-align: center;
}

.manual-verification-card .verification-dropzone-icon {
    font-size: 28px;
    color: #64748b;
    margin-bottom: 8px;
}

.manual-verification-card .verification-dropzone-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
}

.manual-verification-card .verification-format-hint {
    display: block;
    margin-top: 8px;
    color: #94a3b8;
}

.manual-verification-card .verification-preview-wrap {
    margin: 14px 0;
}

.manual-verification-card .verification-preview-img {
    max-width: 100%;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
}

.manual-verification-card .verification-pdf-hint {
    font-size: 13px;
    color: #64748b;
}

.manual-verification-card .verification-remove-btn {
    margin-top: 10px;
}

.manual-verification-card .verification-label-soft {
    font-weight: 400;
    color: #64748b;
}

.manual-verification-card .verification-selfie-group {
    margin-top: 16px;
}

.manual-verification-card .verification-footnote {
    margin-top: 14px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

.manual-verification-card #submitVerificationBtn {
    margin-top: 8px;
}

@media (min-width: 720px) {
    .manual-verification-card .verification-dropzone-inner {
        padding: 28px 20px;
    }
}
    .admin-verification-queue-item {
        grid-template-columns: minmax(200px, 1fr) minmax(0, 1.2fr) auto;
        align-items: center;
    }
}
.admin-verification-queue-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}
.admin-verification-queue-docs > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-verification-doc-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.admin-verification-thumb {
    max-height: 100px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    cursor: zoom-in;
    background: #fff;
}
.admin-verification-thumb:focus {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}
.admin-verification-queue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.admin-verification-status-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.admin-verification-status-pending {
    background: #fef3c7;
    color: #92400e;
}
.admin-verification-status-rejected {
    background: #fee2e2;
    color: #991b1b;
}
.admin-verification-status-approved {
    background: #d1fae5;
    color: #065f46;
}
.admin-verification-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-verification-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.82);
    cursor: pointer;
}
.admin-verification-lightbox-inner {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1200px);
    max-height: 92vh;
    padding: 12px;
    background: #0f172a;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.admin-verification-lightbox-inner img {
    display: block;
    max-width: min(90vw, 1100px);
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}
.admin-verification-lightbox-close {
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 2;
    border: none;
    background: transparent;
    color: #e2e8f0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
}
.admin-verification-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Customer Support monitoring (Admin Special Tools) */
.admin-support-monitor-card .admin-tool-title i {
    color: #0284c7;
}
.admin-support-monitor-agent-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.admin-support-monitor-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    align-items: end;
}
@media (min-width: 900px) {
    .admin-support-monitor-row {
        grid-template-columns: minmax(200px, 1.2fr) auto minmax(220px, 1fr) minmax(160px, 0.9fr) auto;
        align-items: end;
    }
}
.admin-support-monitor-row .admin-sm-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}
.admin-support-monitor-row .admin-sm-hint {
    font-weight: 400;
    color: #64748b;
    font-size: 11px;
}
.admin-sm-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #1e293b;
    margin: 0;
}
.admin-support-monitor-row .admin-sm-menus {
    width: 100%;
    max-width: 360px;
    padding: 8px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
}
.admin-support-monitor-row .admin-sm-remove {
    justify-self: start;
}

/* Reset User Balance: ensure action buttons receive clicks (above any stray overlays) */
#adminResetBalanceUserList {
    position: relative;
    z-index: 2;
}
#adminResetBalanceUserList .admin-reset-balance-action-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 3;
}

.admin-security-card .admin-tool-title i {
    color: #059669;
}
.admin-security-status {
    font-size: 15px;
    color: #1e293b;
}
.admin-security-toggle-row label {
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.admin-security-check-result {
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 8px;
}
.admin-security-check-result.ok {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.admin-security-check-result.warn {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* Admin → Ferry reservation alerts API status */
.admin-ferry-notify-banner {
    min-height: 0;
}
.admin-ferry-banner-neutral {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 14px;
}
.admin-ferry-api-current {
    margin: 8px 0 4px;
    padding: 10px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.admin-ferry-api-current-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 6px;
}
.admin-ferry-api-current-url {
    display: block;
    word-break: break-all;
    font-size: 13px;
    color: #0f172a;
    line-height: 1.45;
}
.admin-ferry-advanced > summary {
    cursor: pointer;
    font-weight: 600;
    color: #0e7490;
    font-size: 14px;
}
.admin-ferry-advanced[open] > summary {
    margin-bottom: 4px;
}
.admin-ferry-override-msg.ok {
    color: #047857;
    font-weight: 600;
}
.admin-ferry-override-msg.err {
    color: #b45309;
    font-weight: 600;
}
.admin-ferry-notify-foot-muted {
    color: #64748b;
}
.admin-ferry-api-issue {
    margin: 0 0 16px;
    padding: 18px 18px 16px;
    border-radius: 12px;
    border: 2px solid #f59e0b;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 50%);
}
.admin-ferry-api-issue-warn {
    border-color: #94a3b8;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 52%);
}
.admin-ferry-api-issue-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
    margin-bottom: 10px;
}
.admin-ferry-api-issue-warn .admin-ferry-api-issue-badge {
    color: #475569;
}
.admin-ferry-api-issue-lead {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.55;
    color: #1e293b;
}
.admin-ferry-api-issue-label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}
.admin-ferry-api-issue-url {
    margin: 8px 0 14px;
    padding: 12px;
    border-radius: 8px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.45;
    overflow-x: auto;
}
.admin-ferry-api-issue-steps {
    margin: 0 0 14px 1rem;
    padding: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
}
.admin-ferry-api-issue-steps li + li {
    margin-top: 8px;
}
.admin-ferry-api-issue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.admin-ferry-api-tech summary {
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
}

.phcash-ferry-settings-admin-note {
    margin: 0 0 14px 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #bae6fd;
    background: linear-gradient(180deg, #f0f9ff 0%, #ecfeff 100%);
    color: #0c4a6e;
    font-size: 14px;
    line-height: 1.55;
}
.phcash-ferry-settings-admin-note a {
    color: #0369a1;
    font-weight: 600;
}
.phcash-ferry-pref-label--admin-locked {
    cursor: not-allowed !important;
    opacity: 0.92;
}
.phcash-ferry-pref--admin-locked {
    cursor: not-allowed;
}
.admin-ferry-api-pre {
    margin: 8px 0 0;
    padding: 10px;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 11px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 140px;
    overflow: auto;
}

.admin-payment-history-icon-btn {
    min-width: 44px;
    padding-left: 14px;
    padding-right: 14px;
}

.admin-tool-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
    margin-top: 24px;
}

.admin-tool-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.admin-tool-title i {
    color: #667eea;
    margin-right: 8px;
}

.admin-tool-desc {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Admin Special Tools — QR Code Guide (Aznar ticketing) */
.admin-qr-guide-hero {
    border: 2px solid #0d9488;
    background: linear-gradient(180deg, #ecfdf5 0%, #fff 64px);
    margin-top: 0;
}

.admin-qr-guide-lead {
    margin-bottom: 12px;
}

.admin-qr-guide-note {
    margin-bottom: 0;
    padding: 12px 14px;
    background: #f0fdfa;
    border-radius: 10px;
    border: 1px solid #99f6e4;
    font-size: 13px;
}

.admin-qr-guide-note .fas {
    color: #0d9488;
    margin-right: 6px;
}

.admin-qr-guide-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}

.admin-qr-guide-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.admin-qr-guide-card--primary {
    border-color: #5eead4;
    background: linear-gradient(135deg, rgba(204, 251, 241, 0.35) 0%, #fff 48%);
}

.admin-qr-guide-card--benefits {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 56px);
}

.admin-qr-guide-card--tech {
    border-color: #c4b5fd;
    background: linear-gradient(180deg, #f5f3ff 0%, #fff 56px);
}

.admin-qr-guide-card--flow {
    border-color: #fcd34d;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 56px);
}

.admin-qr-guide-card--future {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.admin-qr-guide-card--summary {
    border: 2px solid #059669;
    background: linear-gradient(180deg, #ecfdf5 0%, #fff 52px);
}

.admin-qr-guide-card-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-qr-guide-card-title .fas {
    color: #0d9488;
}

.admin-qr-guide-card-desc {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.55;
}

.admin-qr-guide-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d9488 0%, #2563eb 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
}

.admin-qr-guide-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.55;
}

.admin-qr-guide-list li + li {
    margin-top: 8px;
}

.admin-qr-guide-list--numbered {
    list-style: decimal;
}

.admin-qr-guide-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.admin-qr-guide-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #334155;
}

.admin-qr-guide-ico--ok {
    color: #059669;
    flex-shrink: 0;
}

.admin-qr-guide-output-box {
    margin-top: 14px;
    padding: 14px 16px;
    background: #f0fdf4;
    border: 1px dashed #86efac;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #166534;
}

.admin-qr-guide-output-box ul {
    margin: 8px 0 0;
    padding-left: 1.2rem;
}

.admin-qr-guide-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.admin-qr-guide-benefit {
    padding: 14px;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
}

.admin-qr-guide-benefit strong {
    display: block;
    color: #1e40af;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.admin-qr-guide-benefit span {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.45;
}

.admin-qr-guide-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin: 0 4px 4px 0;
}

.admin-qr-guide-pill--green { background: #d1fae5; color: #065f46; }
.admin-qr-guide-pill--yellow { background: #fef3c7; color: #92400e; }
.admin-qr-guide-pill--red { background: #fee2e2; color: #991b1b; }

.admin-qr-guide-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.admin-qr-guide-tech-grid h5 {
    margin: 0 0 8px;
    font-size: 0.875rem;
    color: #4c1d95;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-qr-guide-code-label {
    margin: 10px 0 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.admin-qr-guide-code {
    margin: 0 0 8px;
    padding: 10px 12px;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.admin-qr-guide-hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.admin-qr-guide-flow-steps {
    margin: 0;
    padding-left: 1.35rem;
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.6;
}

.admin-qr-guide-flow-steps li + li {
    margin-top: 10px;
}

.admin-qr-guide-rec-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-qr-guide-rec-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: #065f46;
    border-bottom: 1px solid #d1fae5;
}

.admin-qr-guide-rec-list li:last-child {
    border-bottom: none;
}

.admin-qr-guide-rec-list .fa-check {
    color: #059669;
    margin-top: 3px;
}

.admin-qr-guide-next {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #6ee7b7;
    font-size: 0.875rem;
    color: #047857;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .admin-qr-guide-checklist {
        grid-template-columns: 1fr;
    }
}

/* Aznar Teller Counter — Ticket Monitoring panel */
.aznar-ticket-monitor-card {
    margin: 0 0 20px;
    border: 2px solid #0ea5e9;
    border-radius: 12px;
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 56px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.12);
}

.aznar-ticket-monitor-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border: none;
    background: linear-gradient(90deg, rgba(224, 242, 254, 0.9) 0%, rgba(255, 255, 255, 0.98) 100%);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.aznar-ticket-monitor-toggle:hover {
    background: linear-gradient(90deg, #dbeafe 0%, #fff 100%);
}

.aznar-ticket-monitor-toggle:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: -2px;
}

.aznar-ticket-monitor-toggle-label {
    font-size: 1rem;
    font-weight: 700;
    color: #0c4a6e;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.aznar-ticket-monitor-toggle-label .fas {
    color: #0284c7;
}

.aznar-ticket-monitor-chevron {
    color: #64748b;
    transition: transform 0.2s ease;
}

.aznar-ticket-monitor-toggle[aria-expanded="true"] .aznar-ticket-monitor-chevron {
    transform: rotate(-180deg);
}

.aznar-ticket-monitor-body {
    padding: 0 18px 18px;
}

.aznar-ticket-monitor-body[hidden] {
    display: none !important;
}

.aznar-ticket-monitor-lead {
    margin: 14px 0 12px;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
}

.aznar-ticket-monitor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.aznar-ticket-monitor-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.aznar-ticket-monitor-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.aznar-ticket-monitor-pill--green {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.aznar-ticket-monitor-pill--yellow {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.aznar-ticket-monitor-pill--red {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.aznar-ticket-monitor-status {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: #64748b;
}

.aznar-ticket-monitor-group {
    margin-bottom: 16px;
}

.aznar-ticket-monitor-group-head {
    padding: 10px 14px;
    margin-bottom: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    background: linear-gradient(90deg, #e0f2fe 0%, #f8fafc 100%);
    border: 1px solid #bae6fd;
    border-radius: 10px 10px 0 0;
}

.aznar-ticket-monitor-group-head .fas {
    color: #0284c7;
    margin-right: 8px;
}

.aznar-ticket-monitor-table-scroll {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #fff;
}

.aznar-ticket-monitor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.aznar-ticket-monitor-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.aznar-ticket-monitor-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.aznar-ticket-monitor-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

.aznar-ticket-monitor-row:hover {
    background: #f0f9ff;
}

.aznar-ticket-monitor-row.is-selected {
    background: #e0f2fe;
    outline: 2px solid #38bdf8;
    outline-offset: -2px;
}

.aznar-ticket-monitor-row:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: -2px;
}

.aznar-ticket-monitor-table code {
    font-size: 0.78rem;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.aznar-ticket-monitor-empty {
    margin: 0;
    padding: 20px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
}

.aznar-ticket-monitor-detail {
    margin-top: 16px;
}

.aznar-ticket-monitor-detail-card {
    position: relative;
    padding: 18px 20px;
    border: 2px solid #7dd3fc;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.1);
}

.aznar-ticket-monitor-detail-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: #f1f5f9;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

.aznar-ticket-monitor-detail-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: #0f172a;
}

.aznar-ticket-monitor-detail-meta {
    margin: 0 0 16px;
    font-size: 0.875rem;
    color: #475569;
}

.aznar-ticket-monitor-detail-grid {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 280px);
    gap: 20px;
    align-items: start;
}

@media (max-width: 768px) {
    .aznar-ticket-monitor-detail-grid {
        grid-template-columns: 1fr;
    }

    .aznar-ticket-monitor-table thead {
        display: none;
    }

    .aznar-ticket-monitor-table tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 8px;
    }

    .aznar-ticket-monitor-table td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border: none;
        padding: 6px 4px;
    }

    .aznar-ticket-monitor-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 0.72rem;
        text-transform: uppercase;
    }
}

.aznar-ticket-monitor-detail-col h5 {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: #0f172a;
}

.aznar-ticket-monitor-policy-text {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #334155;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.aznar-ticket-monitor-policy-warn {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    font-size: 0.8125rem;
}

.aznar-ticket-monitor-policy-ok {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    color: #065f46;
    font-size: 0.8125rem;
}

.aznar-ticket-monitor-qr-box {
    text-align: center;
    padding: 12px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 10px;
}

.aznar-ticket-monitor-qr-box img {
    display: block;
    margin: 0 auto;
}

.aznar-ticket-monitor-muted {
    font-size: 0.8125rem;
    color: #64748b;
}

.aznar-ticket-monitor-summary {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid #e0f2fe;
}

.aznar-ticket-monitor-summary-title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0c4a6e;
}

.aznar-ticket-monitor-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.aznar-ticket-monitor-summary-card {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.06);
}

.aznar-ticket-monitor-summary-card h5 {
    margin: 0 0 10px;
    font-size: 0.875rem;
    color: #0369a1;
}

.aznar-ticket-monitor-summary-stats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aznar-ticket-monitor-summary-stats li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
}

.aznar-ticket-monitor-summary-stats li:last-child {
    border-bottom: none;
}

.aznar-ticket-monitor-summary-stats strong {
    color: #0f172a;
    font-size: 0.95rem;
}

/* Aznar Teller counter - Draft: collapsible visibility + profile/office form */
.admin-aznar-draft-visibility-card {
    padding: 0;
    overflow: hidden;
}

.admin-aznar-draft-visibility-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 20px;
    border: none;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(240, 249, 255, 0.6) 0%, rgba(255, 255, 255, 0.95) 100%);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.2s ease;
}

@media (hover: hover) {
    .admin-aznar-draft-visibility-toggle:hover {
        background: linear-gradient(90deg, rgba(224, 242, 254, 0.85) 0%, #fff 100%);
    }
}

.admin-aznar-draft-visibility-toggle:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: -2px;
}

.admin-aznar-draft-visibility-toggle-label {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-aznar-draft-visibility-toggle-label .fas {
    color: #0ea5e9;
}

.admin-aznar-draft-visibility-chevron {
    flex-shrink: 0;
    color: #64748b;
    font-size: 14px;
    transition: transform 0.25s ease;
}

.admin-aznar-draft-visibility-toggle[aria-expanded="false"] .admin-aznar-draft-visibility-chevron {
    transform: rotate(-90deg);
}

.admin-aznar-draft-visibility-body {
    padding: 0 20px 20px;
}

.admin-aznar-draft-visibility-body[hidden] {
    display: none !important;
}

/* Aznar Draft: Sales / Expense panel visibility (Admin Special Tools) */
.admin-aznar-draft-panel-vis-card .admin-draft-panel-vis-slide {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-aznar-draft-panel-vis-card .admin-draft-panel-vis-slide input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.admin-aznar-draft-panel-vis-card .admin-draft-panel-vis-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.admin-aznar-draft-panel-vis-card .admin-draft-panel-vis-slider::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.admin-aznar-draft-panel-vis-card .admin-draft-panel-vis-slide input:focus-visible + .admin-draft-panel-vis-slider {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.admin-aznar-draft-panel-vis-card .admin-draft-panel-vis-slide input:checked + .admin-draft-panel-vis-slider {
    background: #059669;
}

.admin-aznar-draft-panel-vis-card .admin-draft-panel-vis-slide input:checked + .admin-draft-panel-vis-slider::after {
    transform: translateX(20px);
}

.admin-draft-vis-col-add {
    vertical-align: middle;
}

.admin-profile-office-setup-card .admin-tool-desc {
    margin-bottom: 16px;
}

.admin-profile-office-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px 20px;
    align-items: end;
}

.admin-profile-office-grid-full {
    grid-column: 1 / -1;
}

.admin-profile-office-grid .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

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

/* Cash In / Cash Out setup (Admin Special Tools) */
.admin-cash-rails-quicknav {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #475569;
}
.admin-cash-rails-quicknav-label {
    font-weight: 600;
    margin-right: 6px;
}
.admin-cash-rails-quicknav-link {
    color: #0d9488;
    font-weight: 600;
    text-decoration: none;
}
.admin-cash-rails-quicknav-link:hover {
    text-decoration: underline;
}
.admin-cash-rails-panel.admin-tool-card {
    scroll-margin-top: 88px;
}
.admin-cash-rails-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.admin-cash-rails-chip {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.admin-cash-rails-chip--in {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.admin-cash-rails-chip--out {
    background: #ffedd5;
    color: #9a3412;
    border: 1px solid #fdba74;
}
.admin-cash-rails-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px 28px;
    margin-bottom: 16px;
}
.admin-cash-rails-col {
    min-width: 0;
}
.admin-cash-rails-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-cash-rails-subtitle i {
    color: #0d9488;
}
.admin-cashout-setup-card .admin-cash-rails-subtitle i {
    color: #d97706;
}
.admin-cash-rails-list {
    margin: 0 0 18px 0;
    padding-left: 1.25rem;
    color: #475569;
    font-size: 14px;
    line-height: 1.55;
}
.admin-cash-rails-list li {
    margin-bottom: 8px;
}
.admin-cash-rails-list--mono code {
    font-size: 12px;
    word-break: break-all;
}
.admin-cash-rails-details {
    margin-top: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 14px;
    background: #f8fafc;
}
.admin-cash-rails-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #334155;
    padding: 10px 0;
    list-style-position: outside;
}
.admin-cash-rails-details[open] summary {
    margin-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
}

.admin-income-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-bottom-width: 1px;
    background: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 100%);
    border-radius: 12px 12px 0 0;
    padding: 6px 8px 0 8px;
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.2);
}

.admin-income-tab {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.015em;
    color: #134e4a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    margin-bottom: -1px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.admin-income-tab:hover {
    color: #0f172a;
    background: #fafffe;
    border-color: rgba(13, 148, 136, 0.35);
}

.admin-income-tab.active {
    color: #ffffff;
    background: linear-gradient(145deg, #0f766e 0%, #0d9488 55%, #14b8a6 100%);
    border-color: #0f766e;
    border-bottom-color: transparent;
    box-shadow: 0 -2px 12px rgba(15, 118, 110, 0.2);
}

.admin-income-tab-panel {
    padding-top: 4px;
}

.admin-tool-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.admin-tool-form .form-group {
    margin-bottom: 0;
}

.admin-tool-form label {
    display: block;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.admin-tool-form input {
    min-width: 220px;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}

.admin-lookup-result {
    margin-top: 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 14px;
}

/* Music World */
.free-music-section .free-music-track:hover {
    background: #f1f5f9;
}
.free-music-section .free-music-category h4 {
    display: flex;
    align-items: center;
}
.music-panel {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    min-height: 100vh;
    padding: 20px;
    margin: -40px;
    border-radius: 0;
}

.music-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.music-upload-composer {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

.music-upload-head h3 {
    margin: 0 0 4px;
    color: #1e293b;
}

.music-upload-head p {
    margin: 0 0 14px;
    color: #64748b;
    font-size: 14px;
}

.music-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.music-upload-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.music-upload-picked {
    margin-top: 8px;
    color: #475569;
    font-size: 13px;
}

.music-upload-privacy {
    margin-top: 10px;
    color: #334155;
    font-size: 13px;
}

.music-community-loading,
.music-community-empty {
    grid-column: 1 / -1;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    color: #64748b;
}

.music-community-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.music-community-card-media {
    background: #020617;
}

.music-community-card-body {
    padding: 12px;
}

.music-community-card-body h4 {
    margin: 0 0 6px;
    color: #0f172a;
}

.music-community-meta {
    margin: 0 0 8px;
    font-size: 12px;
    color: #64748b;
}

.music-community-caption {
    margin: 0 0 8px;
    font-size: 14px;
    color: #334155;
}

.music-community-time {
    margin: 0 0 10px;
    font-size: 11px;
    color: #94a3b8;
}

.music-now-playing {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.music-now-playing-visible {
    border-color: #667eea;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
}

.live-musicians-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.musician-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.musician-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.videoke-panel {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.videoke-panel:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.videoke-panel.enlarged {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
}

.videoke-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.videoke-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.song-search {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 20px;
}

.songs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.song-item {
    background: #f8fafc;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    overflow: hidden;
}

.song-item-thumb {
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: #e2e8f0;
}

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

.song-item-body {
    padding: 12px;
}

.song-item-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.song-item-meta {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.song-item:hover {
    background: #e0e7ff;
    border-color: #667eea;
}

/* YouTube Video Cards */
.youtube-video-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.youtube-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.youtube-video-card:active {
    transform: translateY(-2px);
}

.song-item.playing {
    background: #667eea;
    color: #fff;
}

/* YouTube button on song items */
.youtube-btn-song {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: #ff0000;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 10;
}

.youtube-btn-song:hover {
    background: #cc0000;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}

.youtube-btn-song:active {
    transform: scale(0.95);
}

/* Recording indicator pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.videoke-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

/* Scrollbar Styling */
.vloggers-panel::-webkit-scrollbar,
.social-feed::-webkit-scrollbar {
    width: 8px;
}

.vloggers-panel::-webkit-scrollbar-track,
.social-feed::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.vloggers-panel::-webkit-scrollbar-thumb,
.social-feed::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.3);
    border-radius: 4px;
}

.vloggers-panel::-webkit-scrollbar-thumb:hover,
.social-feed::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.5);
}

/* Facebook Layout Styles */
.facebook-layout {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 20px;
    background: #f0f2f5;
    min-height: 100vh;
    padding: 20px;
    margin: -40px;
    border-radius: 0;
}

/* Left Sidebar */
.fb-left-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.fb-search-container {
    position: relative;
    margin-bottom: 20px;
}

.fb-search-container i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #65676b;
}

.fb-search-input {
    width: 100%;
    padding: 10px 10px 10px 40px;
    border: none;
    border-radius: 20px;
    background: #f0f2f5;
    font-size: 15px;
}

.fb-user-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fb-user-section:hover {
    background: #e4e6eb;
}

.fb-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.fb-username {
    font-weight: 600;
    color: #1c1e21;
    font-size: 15px;
    min-width: 0;
    flex: 1;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.fb-menu-list {
    margin-bottom: 20px;
}

.fb-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #1c1e21;
    font-size: 15px;
}

.fb-menu-item:hover {
    background: #e4e6eb;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fb-menu-item.active {
    background: #e7f3ff;
    color: #1877f2;
    font-weight: 600;
}

.fb-menu-item i {
    width: 24px;
    text-align: center;
    font-size: 20px;
}

.fb-menu-item[data-fb="friend-requests"] {
    flex-wrap: nowrap;
}

.fb-friend-requests-badge {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 1.25rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.fb-nav-icon#fbNavFriends {
    position: relative;
}

.fb-nav-friends-badge {
    position: absolute;
    top: -2px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.fb-shortcuts {
    border-top: 1px solid #e4e6eb;
    padding-top: 15px;
}

.fb-shortcuts-title {
    font-weight: 600;
    color: #65676b;
    font-size: 13px;
    margin-bottom: 10px;
    padding: 0 10px;
}

/* Main Feed */
.fb-main-feed {
    max-width: 680px;
    margin: 0 auto;
}

.fb-top-nav {
    background: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fb-nav-icons {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.fb-nav-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #65676b;
    font-size: 24px;
}

.fb-nav-icon:hover {
    background: #f0f2f5;
    transform: scale(1.1);
    color: #1877f2;
}

.fb-nav-icon.active {
    color: #1877f2;
    border-bottom: 3px solid #1877f2;
}

/* SM — Go Live modal (Watch / Live Video) */
.fb-go-live-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fb-go-live-dialog {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 16px;
    padding: 22px 22px 24px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.fb-go-live-title {
    margin: 0 0 14px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.fb-go-live-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.fb-go-live-tab {
    flex: 1;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: transparent;
    color: #64748b;
    transition: background 0.2s, color 0.2s;
}

.fb-go-live-tab:hover {
    background: rgba(255, 255, 255, 0.7);
    color: #334155;
}

.fb-go-live-tab.active {
    background: #fff;
    color: #1877f2;
    box-shadow: 0 1px 0 #fff;
}

.fb-go-live-panel {
    margin: 0;
}

.fb-go-live-video-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    margin-bottom: 10px;
    aspect-ratio: 16 / 10;
    max-height: 52vh;
}

.fb-go-live-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fb-go-live-flip {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s, background 0.2s;
    font-size: 1rem;
}

.fb-go-live-flip:hover {
    background: #fff;
    transform: scale(1.06);
}

.fb-go-live-hint {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}

.fb-go-live-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.fb-go-live-verify-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: 10px;
}

.fb-go-live-verify-blink {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #b45309;
    line-height: 1.35;
    animation: fb-go-live-verify-blink 1.15s ease-in-out infinite;
}

@keyframes fb-go-live-verify-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.28; }
}

.fb-go-live-verify-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #d97706;
    background: #fff;
    color: #92400e;
    transition: background 0.2s, transform 0.15s;
}

.fb-go-live-verify-btn:hover {
    background: #fff7ed;
}

.fb-go-live-timer {
    font-size: 1.1rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 0.02em;
}

.fb-post-composer {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fb-composer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.fb-user-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.fb-composer-input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    background: #f0f2f5;
    font-size: 15px;
}

.fb-composer-input:focus {
    outline: none;
}

.fb-composer-input:focus ~ .fb-composer-actions ~ #fbPostBtn {
    display: block !important;
}

.fb-composer-actions {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #e4e6eb;
}

.fb-composer-btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 600;
    color: #65676b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fb-composer-btn:hover {
    background: #f0f2f5;
}

/* Stories */
.fb-stories-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

.fb-story-card {
    min-width: 110px;
    height: 200px;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.3s ease;
    scroll-snap-align: start;
}

.fb-story-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.fb-story-card.create-story {
    background: linear-gradient(180deg, #fff 0%, #f0f7ff 100%);
    border: 2px solid #1877f2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(24, 119, 242, 0.2);
    z-index: 2;
    flex-shrink: 0;
}

.fb-story-card.create-story.is-active {
    border-color: #1877f2;
    animation: smCreateStoryPulse 2.2s ease-in-out infinite;
}

.fb-story-card.create-story.is-active:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(24, 119, 242, 0.35);
}

.fb-story-card.create-story[aria-disabled="true"] {
    opacity: 0.85;
    border-color: #cbd5e1;
    animation: none;
    cursor: pointer;
}

@keyframes smCreateStoryPulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(24, 119, 242, 0.25); }
    50% { box-shadow: 0 4px 16px rgba(24, 119, 242, 0.45); }
}

.fb-story-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    margin: 10px auto 5px;
    border: 3px solid #fff;
}

.fb-story-plus {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1877f2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 10px auto 5px;
}

.fb-story-label {
    font-size: 12px;
    font-weight: 600;
    color: #1c1e21;
    text-align: center;
    padding: 0 5px;
}

/* Posts */
.fb-post-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    content-visibility: auto;
    contain-intrinsic-size: 360px;
}

.fb-post-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.fb-post-header-main {
    flex: 1;
    min-width: 0;
}

.fb-post-menu-wrap {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-start;
}

.fb-post-menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 50%;
    color: #65676b;
    font-size: 16px;
    line-height: 1;
    transition: background 0.2s;
}

.fb-post-menu-trigger:hover {
    background: #f0f2f5;
}

.fb-post-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 180px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid #e4e6eb;
    z-index: 50;
    overflow: hidden;
}

.fb-post-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: #e41e3f;
    text-align: left;
    font-family: inherit;
}

.fb-post-menu-item:hover {
    background: #fff5f5;
}

.fb-post-menu-item--neutral {
    color: #050505;
}

.fb-post-menu-item--neutral:hover {
    background: #f0f2f5;
}

.fb-post-media-panel {
    position: relative;
    margin: 10px 0;
}

.fb-post-media-panel .fb-post-media-grid {
    margin: 0;
}

.fb-post-media-panel .fb-post-media-video-hit {
    margin: 0;
}

.fb-post-media-panel .fb-post-image-placeholder {
    margin: 0;
}

.fb-post-live-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: #e41e3f;
    border-radius: 4px;
    vertical-align: middle;
    animation: fb-live-pill-pulse 1.5s ease-in-out infinite;
}

@keyframes fb-live-pill-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.fb-post-live-broadcast {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e4e6eb;
    background: #0f0f0f;
}

.fb-live-embed-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}

.fb-live-embed-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.fb-live-placeholder {
    min-height: 200px;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 40%, #e41e3f 120%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.fb-live-placeholder-inner {
    text-align: center;
    color: #fff;
}

.fb-live-badge-pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
}

.fb-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3040;
    box-shadow: 0 0 0 0 rgba(255, 48, 64, 0.6);
    animation: fb-live-dot-ring 1.2s ease-out infinite;
}

@keyframes fb-live-dot-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 48, 64, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(255, 48, 64, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 48, 64, 0); }
}

.fb-live-placeholder-text {
    margin: 12px 0 0;
    font-size: 15px;
    opacity: 0.95;
}

.fb-live-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    background: #18191a;
    justify-content: flex-start;
}

.fb-live-actions .btn {
    margin: 0;
}

.fb-post-live-ended {
    border-radius: 10px;
    border: 1px solid #e4e6eb;
    padding: 12px;
    background: #f0f2f5;
}

.fb-live-ended-label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #65676b;
}

.fb-post-media-menu-wrap {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
}

.fb-post-media-menu-wrap .fb-post-menu-trigger {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.fb-post-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.fb-post-media-cell {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
}

.fb-post-thumb {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
    vertical-align: middle;
}

.fb-post-media-hit:focus {
    outline: 2px solid #1877f2;
    outline-offset: 2px;
}

.fb-post-media-hit {
    position: relative;
}

.fb-post-media-hit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.26);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 2;
}

.fb-post-media-hit::after {
    content: '\f00e';
    font-family: 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.28);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 3;
}

.fb-post-media-video-hit::after {
    content: '\f04b';
}

@media (hover: hover) and (pointer: fine) {
    .fb-post-media-hit:hover::before,
    .fb-post-media-hit:hover::after {
        opacity: 1;
    }

    .fb-post-media-hit:hover::after {
        transform: translate(-50%, -50%) scale(1);
    }

    .fb-post-media-hit:hover .fb-post-thumb,
    .fb-post-media-hit:hover .fb-post-image-clickable,
    .fb-post-media-hit:hover .fb-post-video-preview {
        filter: brightness(0.88);
    }
}

.fb-post-image-clickable {
    cursor: zoom-in;
    transition: opacity 0.2s;
}

.fb-post-media-single-hit:hover .fb-post-image-clickable,
.fb-post-media-cell:hover .fb-post-thumb {
    opacity: 0.92;
}

.fb-post-media-video-hit {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin: 10px 0;
    background: #000;
}

.fb-post-video-shell {
    position: relative;
    width: 100%;
    min-height: 200px;
    background: #0f172a;
    border-radius: 8px;
    overflow: hidden;
}

.fb-post-video-shell .fb-post-video-preview {
    width: 100%;
    max-height: 420px;
    display: block;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.fb-post-video-shell.is-ready .fb-post-video-preview,
.fb-post-video-shell.is-loading .fb-post-video-preview {
    opacity: 1;
}

.fb-post-video-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #e2e8f0;
    font-size: 14px;
    background: rgba(15, 23, 42, 0.92);
    z-index: 2;
    transition: opacity 0.25s ease;
}

.fb-post-video-shell.is-ready .fb-post-video-loading,
.fb-post-video-shell.is-error .fb-post-video-loading {
    opacity: 0;
    pointer-events: none;
}

.fb-post-video-shell.is-error .fb-post-video-loading span {
    content: '';
}

.fb-post-video-shell.is-error .fb-post-video-loading {
    opacity: 1;
    pointer-events: auto;
}

.fb-post-video-shell.is-error .fb-post-video-loading span::after {
    content: ' — tap to open';
}

.fb-posts-loading {
    text-align: center;
    padding: 48px 20px;
    color: #64748b;
}

.fb-posts-loading i {
    font-size: 36px;
    margin-bottom: 14px;
    display: block;
    color: #1877f2;
}

.sm-story-viewer-overlay {
    background: rgba(0, 0, 0, 0.92);
}

.sm-story-viewer-dialog {
    position: relative;
    max-width: min(520px, 96vw);
    max-height: 92vh;
    margin: 0 auto;
    padding: 12px;
}

.sm-story-viewer-media {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    display: block;
    background: #000;
}

.sm-story-viewer-head {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}

.sm-story-viewer-caption {
    color: #e2e8f0;
    font-size: 14px;
    margin: 0 0 12px;
}

.sm-story-viewer-close {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.fb-post-expand-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    pointer-events: none;
}

.fb-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.fb-media-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: pointer;
}

.fb-media-lightbox-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
}

.fb-media-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 4px;
}

.fb-media-lightbox-video {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 4px;
}

.fb-media-lightbox-close {
    position: absolute;
    top: -42px;
    right: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    z-index: 2;
}

.fb-media-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.fb-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fb-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.35);
}

.fb-lightbox-prev {
    left: 8px;
}

.fb-lightbox-next {
    right: 8px;
}

.fb-lightbox-counter {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

.fb-media-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.fb-preview-cell {
    position: relative;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
}

.fb-preview-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.fb-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fb-preview-remove:hover {
    background: rgba(220, 38, 38, 0.95);
}

@media (max-width: 600px) {
    .fb-lightbox-prev { left: 4px; }
    .fb-lightbox-next { right: 4px; }
    .fb-media-lightbox-close { top: 8px; right: 8px; }
}

.fb-post-name {
    font-weight: 600;
    color: #1c1e21;
    font-size: 15px;
}

.fb-post-author-name-plain {
    font-weight: 600;
    color: #1c1e21;
    font-size: 15px;
}

.fb-post-author-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    color: #1877f2;
    cursor: pointer;
    text-align: left;
    max-width: 100%;
}

.fb-post-author-link:hover,
.fb-post-author-link:focus-visible {
    text-decoration: underline;
    outline: none;
}

.fb-post-author-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.35);
    border-radius: 4px;
}

.fb-post-time {
    font-size: 13px;
    color: #65676b;
}

.fb-post-content {
    color: #1c1e21;
    line-height: 1.5;
    margin-bottom: 12px;
    font-size: 15px;
}

.fb-post-image {
    width: 100%;
    border-radius: 8px;
    margin: 10px 0;
}

.fb-post-engagement {
    padding: 10px 0;
    border-top: 1px solid #e4e6eb;
    border-bottom: 1px solid #e4e6eb;
    margin: 10px 0;
}

.fb-engagement-count {
    font-size: 14px;
    color: #65676b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fb-post-actions {
    display: flex;
    gap: 5px;
    padding-top: 8px;
}

.fb-action-btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 600;
    color: #65676b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fb-action-btn:hover {
    background: #f0f2f5;
}

.fb-action-btn.liked {
    color: #1877f2;
}

.fb-action-btn.liked i {
    animation: likePulse 0.3s ease;
}

@keyframes likePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Ferry / boat reservation alerts: stay until admin or Aznar teller dismisses */
#phcash-ferry-alert-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    max-width: min(420px, 92vw);
    pointer-events: none;
    box-sizing: border-box;
}
.phcash-ferry-alert-toast {
    pointer-events: auto;
    color: #fff;
    padding: 14px 16px 14px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    animation: slideIn 0.3s ease;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.45;
    font-size: 14px;
}
.phcash-ferry-alert-toast .phcash-ferry-alert-head {
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
    padding-right: 28px;
}
.phcash-ferry-alert-toast .phcash-ferry-alert-body {
    word-break: break-word;
}
.phcash-ferry-alert-toast .phcash-ferry-alert-body i {
    margin-right: 6px;
}
.phcash-ferry-alert-toast-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background 0.15s ease;
}
.phcash-ferry-alert-toast-dismiss:hover {
    background: rgba(255, 255, 255, 0.35);
}
.phcash-ferry-alert-toast-foot {
    margin-top: 10px;
    font-size: 11px;
    opacity: 0.88;
    line-height: 1.35;
}

.phcash-ferry-alert-foot--ack {
    margin-top: 10px;
}

.phcash-ferry-alert-ack-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #047857;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.12s ease, background 0.12s ease;
}

.phcash-ferry-alert-ack-btn:hover {
    background: #fff;
    transform: translateY(-1px);
}

.phcash-ferry-alert-foot-ack-done {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.95;
}

.fb-recent-contact:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.fb-composer-btn:hover {
    background: #f0f2f5;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fb-search-input:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 2px #1877f2;
}

.fb-friends-search-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px;
    box-sizing: border-box;
    background: #fff;
}

.fb-friends-search-input:focus {
    outline: none;
    border-color: #1877f2;
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.25);
}

.fb-friends-results-list {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.fb-friends-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.fb-friends-user-row:last-child {
    border-bottom: none;
}

.fb-friends-user-row:hover,
.fb-friends-user-row:focus {
    outline: none;
    background: #f0f2f5;
}

.fb-friends-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1877f2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.fb-friends-user-meta {
    flex: 1;
    min-width: 0;
}

.fb-friends-user-name {
    font-weight: 600;
    color: #050505;
}

/* Standard list rows (See all, Your friends, Online): long names/emails wrap instead of overlapping the Profile button */
.fb-friends-results-list > .fb-friends-user-row .fb-friends-user-name {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.fb-friends-results-list > .fb-friends-user-row .fb-friends-user-email,
.fb-friends-results-list > .fb-friends-user-row .fb-friends-user-sub,
.fb-friends-results-list > .fb-friends-user-row .fb-friends-user-mobile {
    overflow-wrap: anywhere;
}

.fb-friends-user-email,
.fb-friends-user-mobile {
    font-size: 13px;
    color: #65676b;
    word-break: break-word;
}

/* Suggestions tab: full-width text row, buttons on next row (nothing overlaps the name/email) */
.fb-friends-user-row--suggest {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: start;
}

.fb-friends-user-row--suggest .fb-friends-user-avatar {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
}

.fb-friends-user-row--suggest .fb-friends-user-meta {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    min-width: 0;
    width: 100%;
}

.fb-friends-user-row--suggest .fb-friends-user-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.fb-friends-user-row--suggest .fb-friends-user-email {
    flex: 1 1 140px;
    min-width: 0;
    word-break: normal;
    overflow-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-friends-user-row--suggest .fb-friends-friend-count {
    flex-basis: 100%;
    margin-top: 0;
}

.fb-friends-user-row--suggest .fb-friends-user-actions {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
}

.fb-friends-user-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.fb-friends-view-profile {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
}

.fb-friends-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 4px 24px;
}

.fb-friends-loading {
    text-align: center;
    padding: 40px;
    color: #64748b;
}

.fb-friends-header-block {
    margin-bottom: 16px;
}

.fb-friends-main-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: #050505;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-friends-main-title i {
    color: #1877f2;
}

.fb-friends-you-have {
    margin: 0;
    font-size: 15px;
    color: #374151;
}

.fb-friends-you-have--muted {
    color: #64748b;
}

.fb-friends-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e4e6eb;
}

.fb-friends-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: #f0f2f5;
    color: #050505;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fb-friends-tab:hover {
    background: #e4e6eb;
}

.fb-friends-tab.active {
    background: #1877f2;
    color: #fff;
}

.fb-friends-tab-badge {
    display: inline-block;
    min-width: 22px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    background: #cbd5e1;
    color: #334155;
}

.fb-friends-tab.active .fb-friends-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.fb-friends-tab-panel {
    min-height: 120px;
}

.fb-friends-section-hint {
    font-size: 14px;
    color: #65676b;
    margin: 0 0 12px 0;
}

.fb-friends-empty {
    color: #94a3b8;
    padding: 28px 16px;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
}

.fb-friends-requests-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    overflow: hidden;
}

.fb-friends-request-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e4e6eb;
    flex-wrap: wrap;
}

.fb-friends-request-row:last-child {
    border-bottom: none;
}

.fb-friends-request-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.fb-friends-row--online {
    position: relative;
}

.fb-friends-online-dot {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e2e8f0;
}

.fb-friends-row--online .fb-friends-user-avatar {
    margin-left: 14px;
}

.fb-friends-user-sub {
    font-size: 13px;
    color: #65676b;
}

.fb-friends-friend-count {
    font-size: 12px;
    color: #1877f2;
    font-weight: 600;
    margin-top: 4px;
}

.fb-friends-seeall-search {
    position: relative;
    margin-bottom: 14px;
}

.fb-friends-seeall-search .fas.fa-search {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.fb-friends-seeall-search .fb-friends-search-input {
    padding-left: 44px;
}

/* Right Sidebar */
.fb-right-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.fb-sponsored-section {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* In-feed Sponsored on phone/tablet (right sidebar hidden below 1024px) */
.fb-sponsored-mobile-slot {
    display: none;
}

@media (max-width: 1023px) {
    .fb-sponsored-mobile-slot {
        display: block;
        margin: 0 0 16px;
    }
}

@media (min-width: 1024px) {
    .fb-sponsored-mobile-slot {
        display: none !important;
    }
}

.fb-sponsored-title {
    font-weight: 600;
    color: #65676b;
    font-size: 13px;
    margin-bottom: 15px;
}

.fb-sponsored-ad {
    margin-bottom: 15px;
    cursor: pointer;
}

.fb-ad-image {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    margin-bottom: 8px;
    max-width: 100%;
    object-fit: cover;
}

.fb-ad-title {
    font-size: 13px;
    color: #1c1e21;
    font-weight: 600;
}

/* Test Sponsor banner (Advertisement + Sponsored box) */
.test-sponsor-banner {
    position: relative;
    width: 100%;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    background: #e2e8f0;
}
.test-sponsor-banner-sm {
    height: 150px;
}
.test-sponsor-banner-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.test-sponsor-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.test-sponsor-slide.active {
    opacity: 1;
    z-index: 1;
}
.test-sponsor-slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    background: #fff;
}
.test-sponsor-slide-gradient .test-sponsor-slide-text {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.test-sponsor-ad {
    margin-bottom: 15px;
}

/* Invert picture: apply to images and video in banner */
.test-sponsor-banner-invert .test-sponsor-slide img,
.test-sponsor-banner-invert .test-sponsor-slide video,
.test-sponsor-banner-invert .test-sponsor-slide .test-sponsor-slide-video-el {
    filter: invert(1);
}

/* Video slides in Test Sponsor banner */
.test-sponsor-slide-video {
    background: #000;
}
.test-sponsor-slide-video .test-sponsor-slide-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Admin-only toolbar in Sponsored box (SM - Social Media) */
.fb-sponsored-admin-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.fb-sponsored-admin-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fb-sponsored-admin-btn:hover {
    background: #e2e8f0;
    color: #1877f2;
    border-color: #1877f2;
}
.fb-sponsored-admin-btn i {
    font-size: 14px;
}

.fb-group-chats {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fb-group-chats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 600;
    color: #1c1e21;
    font-size: 15px;
}

.fb-create-group-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #e4e6eb;
    color: #1c1e21;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.fb-create-group-btn:hover {
    background: #d1d5db;
}

.fb-group-chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: 8px;
}

.fb-group-chat-item:hover {
    background: #f0f2f5;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fb-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.fb-chat-info {
    flex: 1;
}

.fb-chat-name {
    font-weight: 600;
    color: #1c1e21;
    font-size: 14px;
    margin-bottom: 2px;
}

.fb-chat-last {
    font-size: 12px;
    color: #65676b;
}

.fb-unread-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: #1877f2;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.fb-recent-contacts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 1000;
}

.fb-recent-contact {
    position: relative;
}

.fb-contact-avatar-small {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.fb-contact-avatar-small:hover {
    transform: scale(1.1);
}

.fb-contact-avatar-small.online::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border: 2px solid #fff;
    border-radius: 50%;
}

.fb-message-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc2626;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    border: 2px solid #fff;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    z-index: 100010;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
}

.mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100008;
    background: transparent;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

body.mobile-sidebar-open .mobile-sidebar-backdrop {
    display: block;
    pointer-events: auto;
}

/* Lock page scroll while drawer is open; sidebar scrolls independently */
body.mobile-sidebar-open {
    overscroll-behavior: none;
}

body.mobile-sidebar-open .sidebar {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
}

body.mobile-sidebar-open .sidebar-nav {
    overflow: visible;
    touch-action: pan-y;
}

/* Sidebar is outside .container so it stays interactive during maintenance */
body.phcash-maintenance-active #sidebar,
body.phcash-maintenance-active .mobile-menu-toggle,
body.phcash-maintenance-active .mobile-sidebar-backdrop {
    pointer-events: auto !important;
}

.mobile-menu-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

/* Responsive Design - Mobile First Approach */

/* Mobile Devices (320px - 767px) */
@media (max-width: 767px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .container {
        position: relative;
        z-index: 1;
    }

    .sidebar {
        width: min(280px, 92vw);
        position: fixed;
        left: calc(-1 * min(280px, 92vw));
        top: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        transition: left 0.3s ease;
        z-index: 100009;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sidebar.open {
        left: 0;
    }

    .sidebar-header {
        flex-shrink: 0;
    }

    .sidebar-nav {
        overflow: visible;
        padding-top: 20px;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    }

    .sidebar .menu-list {
        padding-bottom: 12px;
    }

    .main-content {
        margin-left: 0;
        padding: calc(68px + env(safe-area-inset-top, 0px)) 15px calc(20px + env(safe-area-inset-bottom, 0px));
        width: 100%;
        max-width: 100%;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .container {
        overflow-x: hidden;
    }

    .content-header h2 {
        font-size: 24px;
    }

    .content-header p {
        font-size: 14px;
    }

    /* Upper header row: wraps on small screens; scroll only if needed */
    .content-header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    .content-header-left {
        width: 100%;
        padding-right: 72px;
    }

    .content-header-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 4px 0;
        margin: 0;
        scrollbar-width: thin;
        z-index: 12;
    }

    .content-header-actions .phcash-make-main-page-btn,
    .content-header-actions .phcash-install-app-btn,
    .content-header-actions .btn-auth-header {
        font-size: 11px;
        padding: 8px 12px;
        min-height: 40px;
    }

    .content-header-actions .phcash-make-main-page-btn {
        max-width: calc(100vw - 48px);
        white-space: normal;
        text-align: center;
    }

    .content-header-actions::-webkit-scrollbar {
        height: 4px;
    }

    .content-header-actions::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.45);
        border-radius: 4px;
    }

    .content-header-actions > * {
        flex: 0 0 auto;
    }

    .content-body {
        padding: 20px 15px;
    }

    .menu-item {
        padding: 12px 20px;
        font-size: 14px;
    }

    .menu-item i {
        width: 22px;
        height: 22px;
        font-size: 16px;
    }

    .menu-item span {
        display: inline;
    }

    .logo {
        font-size: 20px;
        gap: 8px;
    }
    
    .logo-image {
        width: 32px;
        height: 32px;
    }
    
    .logo-text {
        font-size: 18px;
    }

    .site-security-strip {
        margin-top: 12px;
        padding: 6px 8px;
        font-size: 10px;
        gap: 6px;
    }

    .site-security-text {
        white-space: normal;
    }

    .wallet-amount {
        font-size: 20px;
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .paybills-category-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .tabs-container {
        flex-direction: column;
        gap: 8px;
    }

    .tab {
        width: 100%;
        padding: 10px 16px;
        font-size: 13px;
    }

    .live-stream-grid,
    .live-musicians-grid,
    .games-grid,
    .live-users-grid,
    .live-stores-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .facebook-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "fb-main";
        padding: 0;
        margin: 0 0 -20px;
        gap: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .fb-left-sidebar,
    .fb-right-sidebar {
        display: none;
    }

    .fb-main-feed {
        grid-area: fb-main;
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        padding: 10px 10px 20px;
        box-sizing: border-box;
        order: 1;
        overflow-x: hidden;
    }

    .fb-main-feed .fb-top-nav {
        margin-bottom: 12px;
        padding: 8px 10px;
        border-radius: 0;
    }

    .fb-main-feed .fb-nav-icons {
        gap: 6px;
        justify-content: space-between;
    }

    .fb-main-feed .fb-nav-icon {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 56px;
        height: 42px;
        font-size: 20px;
    }

    .fb-main-feed .fb-post-composer {
        margin-bottom: 12px;
    }

    .fb-main-feed .fb-stories-section {
        margin-bottom: 16px;
        gap: 8px;
        padding: 0 2px 8px;
        scroll-padding-left: 2px;
    }

    .fb-main-feed .fb-stories-section::-webkit-scrollbar {
        display: none;
    }

    .fb-main-feed .fb-story-card {
        min-width: 106px;
        width: 106px;
        height: 188px;
    }

    #fbPostsContainer {
        width: 100%;
        max-width: 100%;
    }

    .fb-post-card {
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 14px;
    }

    .fb-post-header {
        gap: 8px;
    }

    .fb-user-avatar-small {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .fb-post-name {
        font-size: 14px;
    }

    .fb-post-time {
        font-size: 11px;
    }

    .fb-post-content {
        font-size: 14px;
        line-height: 1.45;
    }

    .fb-engagement-count {
        font-size: 12px;
    }

    .fb-action-btn {
        font-size: 13px;
        gap: 6px;
        padding: 8px 6px;
    }

    .fb-composer-input {
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
        width: 100%;
        margin: 5px 0;
    }

    .panel-title {
        font-size: 20px;
    }

    .panel-description {
        font-size: 14px;
    }

    /* Video container responsive */
    .video-container {
        max-width: 100%;
        margin: 15px 0;
    }

    /* Live user / store cards mobile */
    .live-user-card,
    .live-store-card {
        margin-bottom: 15px;
    }

    .live-user-thumbnail {
        height: 180px;
    }

    .live-user-actions {
        flex-direction: column;
    }

    .live-action-btn {
        width: 100%;
        margin-bottom: 8px;
    }

    /* Farmers panel mobile */
    .farmers-panel {
        padding: 15px;
        margin: 0 -15px;
    }

    /* Dating panel mobile */
    .dating-panel {
        padding: 15px;
        margin: 0 -15px;
    }

    /* Music panel mobile */
    .music-panel {
        padding: 15px;
        margin: 0 -15px;
    }

    .music-upload-grid {
        grid-template-columns: 1fr;
    }

    .music-upload-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Games panel mobile */
    .games-panel {
        padding: 15px;
        margin: 0 -15px;
    }

    /* Social feed mobile */
    .social-feed {
        padding: 15px;
        margin: 0 -15px;
    }

    /* Post cards mobile */
    .post-card {
        padding: 15px;
    }

    /* Stream cards mobile */
    .stream-card {
        margin-bottom: 15px;
    }

    /* Advertisement plans mobile */
    .advertisement-plans {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Form rows mobile */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Stats grid mobile */
    .stat-card {
        padding: 20px;
    }

    /* Info box mobile */
    .info-box {
        padding: 15px;
    }

    /* Recent contacts mobile */
    .fb-recent-contacts {
        bottom: 10px;
        right: 10px;
    }

    .fb-contact-avatar-small {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Tablet Devices (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar {
        width: 250px;
    }
    
    .logo {
        font-size: 24px;
        gap: 10px;
    }
    
    .logo-image {
        width: 36px;
        height: 36px;
    }

    .main-content {
        margin-left: 250px;
        padding: 30px;
        width: calc(100% - 250px);
        max-width: 100%;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .paybills-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .live-stream-grid,
    .live-musicians-grid,
    .live-users-grid,
    .live-stores-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .facebook-layout {
        grid-template-columns: 200px 1fr 250px;
    }

    .fb-right-sidebar {
        display: none;
    }

    .content-body {
        padding: 30px;
    }

    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .advertisement-plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop (1024px - 1919px) */
@media (min-width: 1024px) and (max-width: 1919px) {
    .sidebar {
        width: 280px;
    }
    
    .logo {
        font-size: 26px;
        gap: 10px;
    }
    
    .logo-image {
        width: 38px;
        height: 38px;
    }

    .main-content {
        margin-left: 280px;
        padding: 40px;
        width: calc(100% - 280px);
        max-width: 100%;
    }

    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .live-users-grid,
    .live-stores-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .facebook-layout {
        grid-template-columns: 250px 1fr 300px;
    }

    .content-body {
        padding: 40px;
    }
}

/* Large Desktop / TV (1920px+) */
@media (min-width: 1920px) {
    .sidebar {
        width: 320px;
    }
    
    .logo {
        font-size: 28px;
        gap: 12px;
    }
    
    .logo-image {
        width: 42px;
        height: 42px;
    }

    .main-content {
        margin-left: 320px;
        padding: 50px;
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 370px;
    }

    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .live-users-grid,
    .live-stores-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .content-body {
        padding: 50px;
    }
}

/* Landscape Mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .sidebar {
        width: min(240px, 88vw);
        left: calc(-1 * min(240px, 88vw));
    }
    
    .logo {
        font-size: 18px;
        gap: 6px;
    }
    
    .logo-image {
        width: 28px;
        height: 28px;
    }

    .main-content {
        padding: 50px 15px 20px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .sidebar {
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .sidebar-nav {
        overflow: visible;
    }

    .menu-item {
        padding: 16px 24px; /* Larger touch targets */
    }

    .btn {
        min-height: 44px; /* Minimum touch target size */
    }

    .wallet-toggle {
        padding: 8px 12px;
        min-width: 44px;
        min-height: 44px;
    }

    .live-action-btn,
    .fb-action-btn,
    .engagement-btn {
        min-height: 44px;
        padding: 12px;
    }

    .mobile-menu-toggle {
        min-width: 50px;
        min-height: 50px;
    }

    .tab {
        min-height: 44px;
    }
}

/*
 * Installed PWA / standalone: viewport is often >767px but the app should still use the
 * drawer + hamburger (otherwise the toggle stays display:none and the menu feels broken).
 */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    .mobile-menu-toggle {
        display: flex !important;
    }

    .container {
        position: relative;
        z-index: 1;
    }

    .sidebar {
        width: min(280px, 92vw);
        position: fixed !important;
        left: calc(-1 * min(280px, 92vw)) !important;
        top: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        transition: left 0.3s ease;
        z-index: 100009 !important;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sidebar.open {
        left: 0 !important;
    }

    .sidebar-nav {
        overflow: visible;
        padding-top: 20px;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    }

    .sidebar .menu-list {
        padding-bottom: 12px;
    }

    .main-content {
        margin-left: 0 !important;
        padding: calc(68px + env(safe-area-inset-top, 0px)) 15px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.mobile-sidebar-open .content-header-actions {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }

    body.mobile-sidebar-open .voice-nav-wrap {
        z-index: 100005;
        pointer-events: none;
        opacity: 0.35;
    }

    .container {
        overflow-x: hidden;
    }
}

/* Ensure all images and media are responsive */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal scroll - ensure containers don't overflow */
.container,
.main-content,
.content-body,
.panel-content {
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Support Panel Styles */
.support-panel {
    max-width: 100%;
}

/* ACS - Authorized Customer Support */
.acs-panel .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-weight: 600;
}

.acs-admin-card {
    cursor: pointer;
}

.acs-admin-card:hover {
    border-color: #5a67d8 !important;
    transform: translateY(-2px);
}

.acs-activity-log .acs-activity-table,
.acs-activity-log table {
    width: 100%;
    border-collapse: collapse;
}

.acs-activity-log thead th {
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
}

.acs-defined-recipients .acs-recipients-readonly > div:last-child {
    border-bottom: none;
}

/* Audit Trail */
.audit-trail-card {
    cursor: pointer;
}

.audit-trail-card:hover {
    border-color: #b91c1c !important;
    transform: translateY(-2px);
}

.audit-trail-panel .audit-trail-table {
    width: 100%;
    border-collapse: collapse;
}

.audit-trail-panel .audit-trail-table thead th {
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #e2e8f0;
    background: #fef2f2;
}

.audit-trail-panel .audit-trail-table td {
    word-break: break-word;
    vertical-align: top;
}

/* FAQ Panel Styles */
.faq-search-container {
    margin-bottom: 30px;
}

.faq-search-box {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.faq-search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.faq-search-input {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.faq-search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.faq-categories {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.faq-category-btn {
    padding: 10px 20px;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #475569;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.faq-category-btn:hover {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.faq-category-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: transparent;
}

.faq-results {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}

.faq-category-section {
    margin-bottom: 30px;
}

.faq-category-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.faq-category-title i {
    color: #667eea;
}

.faq-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #1e293b;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: rgba(102, 126, 234, 0.05);
}

.faq-question i {
    color: #667eea;
    transition: transform 0.3s ease;
}

.faq-answer {
    display: none;
    padding: 0 20px 18px 20px;
    color: #64748b;
    line-height: 1.8;
    border-top: 1px solid #f1f5f9;
    animation: slideDown 0.3s ease;
}

.faq-answer p {
    margin: 0;
    padding-top: 15px;
}

.faq-answer mark {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 4px;
    border-radius: 3px;
}

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

.no-results {
    text-align: center;
    padding: 40px;
    color: #64748b;
    font-size: 16px;
}

/* Chat Panel Styles */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 600px;
    max-height: 80vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.chat-header {
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-agent-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chat-agent-text {
    flex: 1;
    min-width: 0;
}

.chat-status-text {
    display: block;
    line-height: 1.4;
}

.chat-avatar-ai {
    position: relative;
}

.chat-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.chat-agent-name {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 5px;
}

.chat-status {
    font-size: 13px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: pulse 2s infinite;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-welcome {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

.chat-welcome-icon {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 15px;
}

.chat-welcome h3 {
    color: #1e293b;
    margin-bottom: 10px;
}

.chat-message {
    display: flex;
    max-width: 70%;
    animation: fadeIn 0.3s ease;
}

.chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-message.support {
    align-self: flex-start;
}

.chat-message-content {
    padding: 12px 16px;
    border-radius: 12px;
    position: relative;
}

.chat-message.user .chat-message-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-message.support .chat-message-content {
    background: #fff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}

.chat-text {
    margin-bottom: 5px;
    line-height: 1.5;
}

.chat-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 5px;
}

.chat-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 13px;
}

.chat-typing-indicator {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 13px;
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #667eea;
    animation: typingDot 1.4s infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.chat-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}

.chat-attach-btn,
.chat-send-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.chat-send-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.chat-attach-btn:hover {
    background: #e2e8f0;
}

.chat-send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 24px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.chat-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Live chat: keep send control visible on narrow screens; fluid layout */
.support-panel-live-chat .chat-container {
    width: 100%;
    max-width: 100%;
    height: min(600px, 85vh);
    min-height: 280px;
    max-height: min(600px, 85vh);
}

.chat-input-container {
    flex-wrap: nowrap;
}

.chat-attach-btn,
.chat-send-btn {
    flex-shrink: 0;
}

.chat-input {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    max-width: 100%;
}

.chat-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 768px) {
    .support-panel-live-chat .chat-container {
        height: min(70vh, 560px);
        max-height: 78vh;
        border-radius: 10px;
    }

    .chat-header {
        padding: 14px 16px;
    }

    .chat-agent-name {
        font-size: 16px;
    }

    .chat-status,
    .chat-status-text {
        font-size: 12px;
    }

    .chat-messages {
        padding: 12px 14px;
        gap: 12px;
    }

    .chat-message {
        max-width: min(92%, 22rem);
    }

    .chat-input-container {
        padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
        gap: 8px;
        align-items: stretch;
    }

    .chat-input {
        font-size: 16px;
        padding: 10px 14px;
        border-radius: 20px;
    }

    .chat-attach-btn,
    .chat-send-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        align-self: center;
    }
}

@media (max-width: 380px) {
    .chat-input-container {
        padding: 8px 6px;
        gap: 6px;
    }

    .chat-attach-btn,
    .chat-send-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }
}

@media (min-width: 1200px) {
    .support-panel-live-chat .chat-container {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Email Support Panel Styles */
.email-support-container {
    max-width: 800px;
    margin: 0 auto;
}

.email-support-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.info-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
}

.info-card i {
    font-size: 32px;
    margin-bottom: 15px;
}

.info-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.info-card p {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.6;
}

.email-support-form {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.email-support-form .form-group {
    margin-bottom: 25px;
}

.email-support-form label {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-weight: 600;
    font-size: 14px;
}

.email-support-form input,
.email-support-form select,
.email-support-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    font-family: inherit;
}

.email-support-form input:focus,
.email-support-form select:focus,
.email-support-form textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.email-support-form textarea {
    resize: vertical;
    min-height: 120px;
}

.email-support-form small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
}

.email-support-form .form-group:last-of-type {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.email-support-result {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    animation: slideDown 0.3s ease;
}

.email-support-result.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.email-support-result.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

.result-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.result-content i {
    font-size: 20px;
}

/* Admin mailbox (Email tab — phcash-admin-mailbox.php) */
.admin-mailbox-panel .admin-mailbox-key-box {
    margin-bottom: 20px;
}
.admin-mailbox-key-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}
.admin-mailbox-key-hint {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 10px;
}
.admin-mailbox-key-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.admin-mailbox-key-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}
.admin-mailbox-status {
    margin: 10px 0 0;
    font-size: 0.9rem;
}
.admin-mailbox-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.admin-mailbox-split {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.2fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 767px) {
    .admin-mailbox-split {
        grid-template-columns: 1fr;
    }
}
.admin-mailbox-list {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
}
.admin-mailbox-row {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}
.admin-mailbox-row:last-child {
    border-bottom: none;
}
.admin-mailbox-row:hover {
    background: #f8fafc;
}
.admin-mailbox-row-active {
    background: #eff6ff;
}
.admin-mailbox-row-unread {
    font-weight: 600;
}
.admin-mailbox-row-line {
    font-size: 0.9rem;
    color: #0f172a;
}
.admin-mailbox-row-sub {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}
.admin-mailbox-detail {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    min-height: 200px;
    background: #fff;
}
.admin-mailbox-detail-placeholder {
    color: #94a3b8;
    margin: 0;
}
.admin-mailbox-msg-head p {
    margin: 0 0 8px;
}
.admin-mailbox-msg-when {
    font-size: 0.85rem;
    color: #64748b;
}
.admin-mailbox-msg-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.9rem;
    margin: 12px 0;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    max-height: 280px;
    overflow-y: auto;
}
.admin-mailbox-reply {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}
.admin-mailbox-reply h4 {
    margin: 0 0 12px;
}
.admin-mailbox-compose .form-group {
    margin-bottom: 14px;
}
.admin-mailbox-empty {
    padding: 16px;
    color: #64748b;
    margin: 0;
}

/* Scrollbar for FAQ and Chat */
.faq-results::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.faq-results::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.faq-results::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.faq-results::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Authentication Modal Styles */
.auth-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100060;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.auth-modal-content {
    background: #fff;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

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

.auth-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.3s ease;
    z-index: 10;
}

.auth-close-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
    transform: rotate(90deg);
}

.auth-header {
    padding: 40px 40px 30px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.auth-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.auth-header p {
    color: #64748b;
    font-size: 16px;
}

.auth-form {
    padding: 30px 40px 40px;
}

.auth-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.auth-social-btn:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.auth-social-btn i {
    font-size: 20px;
}

.auth-social-btn.google {
    border-color: #db4437;
    color: #db4437;
}

.auth-social-btn.google:hover {
    background: rgba(219, 68, 55, 0.1);
    border-color: #db4437;
}

.auth-social-btn.yahoo {
    border-color: #6001d2;
    color: #6001d2;
}

.auth-social-btn.yahoo:hover {
    background: rgba(96, 1, 210, 0.1);
    border-color: #6001d2;
}

.auth-social-btn.facebook {
    border-color: #1877f2;
    color: #1877f2;
}

.auth-social-btn.facebook:hover {
    background: rgba(24, 119, 242, 0.1);
    border-color: #1877f2;
}

.auth-social-btn.twitter {
    border-color: #1da1f2;
    color: #1da1f2;
}

.auth-social-btn.twitter:hover {
    background: rgba(29, 161, 242, 0.1);
    border-color: #1da1f2;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 25px 0;
    color: #64748b;
    font-size: 14px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}

.auth-divider span {
    padding: 0 15px;
}

/* Verify email (Google/Yahoo OTP) — spam folder reminder */
.oauth-verify-spam-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 2px solid rgba(245, 158, 11, 0.75);
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #92400e;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
    animation: oauthVerifySpamBlink 1.4s ease-in-out infinite;
}

.oauth-verify-spam-notice i.fa-envelope-open-text {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1.25rem;
    color: #d97706;
}

.oauth-verify-spam-notice strong {
    color: #b45309;
    font-weight: 700;
}

@keyframes oauthVerifySpamBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
        border-color: rgba(245, 158, 11, 0.75);
    }
    50% {
        opacity: 0.92;
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
        border-color: rgba(217, 119, 6, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .oauth-verify-spam-notice {
        animation: none;
    }
}

/* Facebook / Twitter demo verify — route to real registration */
.oauth-create-real-account-tab-wrap {
    margin: 18px 0 6px;
    text-align: center;
}

.oauth-create-real-account-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 14px 22px;
    border: none;
    border-radius: 12px 12px 4px 4px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    background: linear-gradient(120deg, #667eea 0%, #764ba2 35%, #ec4899 65%, #f59e0b 100%);
    background-size: 220% 220%;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    animation: oauthCreateRealAccountTabBlink 1.35s ease-in-out infinite;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.oauth-create-real-account-tab:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.oauth-create-real-account-tab:active {
    transform: translateY(0);
}

@keyframes oauthCreateRealAccountTabBlink {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        opacity: 1;
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 8px 28px rgba(236, 72, 153, 0.55);
        opacity: 0.95;
    }
}

/* Create Account — blinking field borders (from demo social sign-in) */
.auth-form .register-field-blink {
    animation: registerFieldBorderBlink 1.15s ease-in-out infinite;
    border-width: 2px !important;
    border-style: solid !important;
}

@keyframes registerFieldBorderBlink {
    0%, 100% {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
    }
    33% {
        border-color: #a855f7;
        box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.35);
    }
    66% {
        border-color: #ec4899;
        box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .oauth-create-real-account-tab {
        animation: none;
        background-position: 50% 50%;
    }

    .auth-form .register-field-blink {
        animation: none;
        border-color: #667eea;
    }
}

.auth-form .form-group {
    margin-bottom: 20px;
}

.auth-form label {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-weight: 600;
    font-size: 14px;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.auth-form input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #475569;
}

.auth-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.auth-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.auth-link:hover {
    color: #764ba2;
    text-decoration: underline;
}

.auth-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.auth-switch {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 14px;
}

.auth-switch a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* Verification Badge */
.verification-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2px solid #fff;
    z-index: 10;
}

.verification-badge i {
    font-size: 10px;
}

/* Responsive Auth Modal */
@media (max-width: 767px) {
    .auth-modal-content {
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        max-height: 95vh;
    }
    
    .auth-header {
        padding: 30px 20px 20px;
    }
    
    .auth-form {
        padding: 20px;
    }
    
    .auth-header h2 {
        font-size: 24px;
    }
}

/* Settings Panel Styles */
.settings-section {
    margin-bottom: 30px;
}

.settings-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-section-title i {
    color: #667eea;
}

.settings-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-item-info {
    flex: 1;
}

.settings-item-label {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 5px;
}

.settings-item-value {
    font-size: 14px;
    color: #64748b;
}

/* Live Video (Vlogger) — Currently Live Streamers header + refresh */
.live-streamers-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.live-streamers-section-title {
    margin-bottom: 0;
}
.live-streamers-refresh-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

/* Live Users Grid Styles */
.live-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.live-user-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.live-user-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.live-user-thumbnail {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-badge-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.live-badge {
    background: #dc2626;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-badge i {
    font-size: 8px;
    animation: pulse 2s infinite;
}

.viewer-count {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-user-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.live-user-info {
    padding: 15px;
}

.live-user-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 16px;
    margin-bottom: 5px;
}

.live-user-title {
    color: #475569;
    font-size: 14px;
    margin-bottom: 5px;
}

.live-user-category {
    color: #667eea;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.live-user-actions {
    padding: 0 15px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.live-action-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.live-action-btn:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.live-action-btn.liked {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.live-action-btn.following {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #2563eb;
}

.live-action-btn i {
    font-size: 14px;
}

.action-count {
    font-size: 11px;
    font-weight: 700;
}

/* Responsive Live Users Grid - Already handled in main mobile media query */

/* Advertisement Panel Styles */
.advertisement-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.ad-plan-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ad-plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.ad-plan-card.featured {
    border-color: #667eea;
    border-width: 3px;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

.ad-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ad-plan-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f5f9;
}

.ad-plan-name {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

.ad-plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.ad-currency {
    font-size: 20px;
    color: #64748b;
    font-weight: 600;
}

.ad-amount {
    font-size: 48px;
    font-weight: 800;
    color: #667eea;
    line-height: 1;
}

.ad-period {
    font-size: 16px;
    color: #64748b;
    font-weight: 500;
}

.ad-plan-features {
    margin-bottom: 30px;
    min-height: 250px;
}

.ad-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    color: #475569;
    line-height: 1.6;
}

.ad-feature i {
    color: #10b981;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.ad-feature strong {
    color: #1e293b;
    font-weight: 700;
}

.ad-subscribe-btn {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    margin-top: auto;
}

.advertisement-info {
    margin-top: 40px;
}

.advertisement-info .info-box {
    margin-bottom: 20px;
}

.advertisement-info ol li {
    margin-bottom: 10px;
    line-height: 1.8;
}

/* Responsive Advertisement Plans */
@media (max-width: 767px) {
    .advertisement-plans {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .ad-plan-card {
        padding: 20px;
    }
    
    .ad-plan-name {
        font-size: 24px;
    }
    
    .ad-amount {
        font-size: 36px;
    }
}

/* Enhanced Social Media Animations */
.fb-post-card {
    animation: fadeInUp 0.5s ease;
}

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

.fb-story-card {
    animation: fadeInScale 0.3s ease;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal overlay animations */
.modal-overlay {
    animation: fadeIn 0.3s ease;
}

.modal-overlay > div {
    animation: slideUp 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* ============================================
   Airbnb-like Hotels Interface Styles
   ============================================ */

.airbnb-container {
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Search Bar */
.airbnb-search-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 40px;
    padding: 8px 8px 8px 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    max-width: 850px;
    transition: box-shadow 0.3s ease;
}

.airbnb-search-bar:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.search-item {
    flex: 1;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 30px;
    transition: background 0.2s ease;
}

.search-item:hover {
    background: #f7f7f7;
}

.search-item label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}

.search-item input {
    border: none;
    background: transparent;
    font-size: 14px;
    color: #717171;
    width: 100%;
    cursor: pointer;
    pointer-events: none;
}

.search-item input:focus {
    outline: none;
}

.search-item-active {
    background: #f0f9ff;
    border-radius: 30px;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
}
.search-item-active:hover {
    background: #e0f2fe;
}

.search-divider {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 8px;
}

.airbnb-search-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff385c 0%, #e61e4d 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.airbnb-search-btn:hover {
    transform: scale(1.05);
}

/* Filters Bar */
.airbnb-filters {
    margin-bottom: 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.airbnb-filters::-webkit-scrollbar {
    display: none;
}

.filter-scroll {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 30px;
    background: #fff;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    border-color: #222;
}

.filter-chip.active {
    border-color: #222;
    background: #222;
    color: #fff;
}

.filter-chip i {
    font-size: 12px;
}

/* Properties Grid */
.airbnb-main {
    position: relative;
}

.airbnb-properties {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px 24px;
    margin-bottom: 60px;
}

.airbnb-property-card {
    cursor: pointer;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.airbnb-property-card:hover {
    transform: translateY(-4px);
}

.airbnb-property-card--test {
    opacity: 0.92;
}

.hotels-listing-test-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f59e0b;
    color: #78350f;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.hotels-listing-test-notice {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 0.82rem;
    line-height: 1.45;
}

.hotels-listing-test-reserve-disabled {
    margin: 0;
    padding: 12px;
    text-align: center;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
}

.booking-note--test {
    color: #b45309;
    font-weight: 600;
}

.property-details--test .property-details-header {
    border-left: 4px solid #f59e0b;
    padding-left: 12px;
}

.property-image {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.hotel-card-photo-zoomable {
    cursor: zoom-in;
}

.airbnb-property-card:hover .property-image img {
    transform: scale(1.05);
}

.property-favorite {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.property-share {
    position: absolute;
    top: 12px;
    right: 52px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    color: #222;
}

.property-share:hover {
    background: #fff;
    transform: scale(1.1);
    color: #6366f1;
}

.property-share i {
    font-size: 15px;
}

.property-detail-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.property-detail-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 2px solid #c7d2fe;
    background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
    color: #4338ca;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
}

.property-detail-share-btn:hover {
    filter: brightness(1.03);
    border-color: #a5b4fc;
}

.hotel-listing-guest-signin {
    margin: 16px 0 20px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid #bfdbfe;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdfa 100%);
    color: #1e3a8a;
}

.hotel-listing-guest-signin p {
    margin: 0 0 12px;
    line-height: 1.5;
    font-size: 0.92rem;
}

.hotel-share-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.hotel-share-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.hotel-share-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.hotel-share-title,
.hotel-share-panel h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    color: #0f172a;
}

.hotel-share-lead {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.55;
}

.hotel-share-label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: #334155;
    margin-bottom: 8px;
}

.hotel-share-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.hotel-share-link-input {
    flex: 1;
    min-width: 180px;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #334155;
    background: #f8fafc;
}

.hotel-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

.property-favorite:hover {
    background: #fff;
    transform: scale(1.1);
}

.property-favorite i {
    color: #222;
    font-size: 16px;
}

.property-favorite .fas {
    color: #ff385c;
}

.property-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.property-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.property-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #222;
    white-space: nowrap;
}

.property-rating i {
    color: #ff385c;
    font-size: 12px;
}

.property-reviews {
    color: #717171;
    font-weight: normal;
}

.property-location {
    font-size: 15px;
    color: #717171;
    margin: 0;
}

.property-type {
    font-size: 14px;
    color: #717171;
    text-transform: capitalize;
    margin: 0;
}

.property-amenities {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.amenity-tag {
    font-size: 12px;
    color: #717171;
}

.property-footer {
    margin-top: 8px;
}

.property-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-amount {
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

.price-period {
    font-size: 14px;
    color: #717171;
}

/* Browse cards: summary below image + “See more amenities” */
.property-card-below {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}

.property-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.property-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0;
    flex: 1;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.property-rating--card {
    flex-shrink: 0;
    font-size: 13px;
}

.property-card-location {
    font-size: 14px;
    color: #717171;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.property-card-location i {
    color: #ff385c;
    margin-right: 4px;
    font-size: 12px;
}

.property-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: #525252;
}

.property-card-stat i {
    margin-right: 4px;
    color: #94a3b8;
    font-size: 12px;
}

.property-card-type {
    font-size: 13px;
    color: #717171;
    text-transform: capitalize;
    margin: 0;
}

.property-card-host {
    font-size: 13px;
    color: #525252;
    margin: 0;
}

.property-card-host i {
    margin-right: 6px;
    color: #94a3b8;
}

.property-card-overview {
    font-size: 13px;
    line-height: 1.45;
    color: #404040;
    margin: 4px 0 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.property-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
}

.property-card-price-row .price-amount {
    font-size: 18px;
    font-weight: 600;
}

.property-card-fees {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.property-card-amenities-block {
    margin-top: 6px;
}

.property-card-amenities-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.property-amenities--card {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.property-amenities--card .amenity-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 14px;
}

.property-card-no-amenities {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

.property-card-map-row {
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

.hotels-card-location-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid #0d9488;
    background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%);
    color: #0f766e;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.15);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(13, 148, 136, 0.25);
}

.hotels-card-location-map i {
    font-size: 16px;
    color: #0d9488;
    flex-shrink: 0;
}

.hotels-card-location-map-text {
    text-align: center;
}

.hotels-card-location-map:hover,
.hotels-card-location-map:focus {
    background: #fff;
    outline: none;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
}

.hotels-card-location-map:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

.hotels-card-location-map:active {
    transform: scale(0.99);
}

.property-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
    min-width: 0;
}

.property-card-actions-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.property-card-actions-edit-row {
    width: 100%;
    min-width: 0;
}

.property-card-actions-edit-row .hotels-card-edit-btn {
    width: 100%;
    min-height: 40px;
    margin: 0;
    box-sizing: border-box;
    justify-content: center;
}

/* Reserve panel hidden until user opens it from the Reserve tab */
.property-card-reserve.property-card-reserve--collapsed {
    display: none;
}

/* Compact dual tabs: equal width in the main row */
.property-card-actions-main .hotels-card-reserve-cta,
.property-card-actions-main .hotels-see-more-amenities {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 48px;
    padding: 8px 10px;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.2;
}

.hotels-card-reserve-cta-inner {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 0;
}

.hotels-card-reserve-cta-inner i {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.hotels-card-reserve-text {
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.hotels-see-more-text {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
}

.hotels-see-more-line2 {
    font-size: 10px;
    font-weight: 700;
}

.property-card-actions-main .hotels-see-more-amenities i {
    font-size: 9px;
    margin-left: 1px;
    vertical-align: 0.05em;
}

/* Philippines flag–inspired CTA (blue, red, gold accent) */
.hotels-card-reserve-cta {
    border: 2px solid #fcd116;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    background: linear-gradient(135deg, #0038a8 0%, #0038a8 42%, #ce1126 42%, #ce1126 100%);
    box-shadow: 0 4px 14px rgba(0, 56, 168, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.hotels-card-reserve-cta:hover,
.hotels-card-reserve-cta:focus {
    filter: brightness(1.06);
    outline: none;
    box-shadow: 0 6px 18px rgba(206, 17, 38, 0.45);
}

.hotels-card-reserve-cta:focus-visible {
    outline: 3px solid #fcd116;
    outline-offset: 2px;
}

.hotels-card-reserve-cta:active {
    transform: scale(0.98);
}

.property-card-actions-main .hotels-see-more-amenities {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hotels-see-more-amenities {
    align-self: flex-start;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 2px solid #ff385c;
    background: linear-gradient(180deg, #fff5f7 0%, #fff 100%);
    color: #e11d48;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.15);
    transition: background 0.2s ease, transform 0.15s ease;
    animation: hotels-see-more-blink 1.25s ease-in-out infinite;
}

.hotels-see-more-amenities i {
    font-size: 11px;
    margin-left: 4px;
    opacity: 0.85;
}

.hotels-see-more-amenities:hover,
.hotels-see-more-amenities:focus {
    background: #fff;
    outline: none;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25);
}

.hotels-see-more-amenities:focus-visible {
    outline: 2px solid #e11d48;
    outline-offset: 2px;
}

.hotels-see-more-amenities:active {
    transform: scale(0.98);
}

@keyframes hotels-see-more-blink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 2px 8px rgba(225, 29, 72, 0.2);
    }
    50% {
        opacity: 0.88;
        box-shadow: 0 4px 16px rgba(225, 29, 72, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hotels-see-more-amenities {
        animation: none;
    }

    .airbnb-property-card .property-card-reserve .property-card-reserve-btn.btn.btn-primary {
        animation: none;
    }

    .property-card-reserve--pulse {
        animation: none;
    }
}

/* Browse card: Reserve panel (dates, guests, breakdown, CTA) */
.property-card-reserve {
    margin-top: 14px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* Open panel: chrome matches PH flag Reserve styling (blue/red/gold) */
.property-card-reserve:not(.property-card-reserve--collapsed) {
    border: 2px solid #fcd116;
    background: linear-gradient(180deg, rgba(0, 56, 168, 0.06) 0%, #ffffff 36%, rgba(206, 17, 38, 0.06) 100%);
    box-shadow: 0 6px 22px rgba(0, 56, 168, 0.12), 0 2px 8px rgba(206, 17, 38, 0.08);
}

.property-card-reserve-toolbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.property-card-reserve:not(.property-card-reserve--collapsed) .property-card-reserve-toolbar {
    display: flex;
}

/* In-panel top “Reserve” strip: decorative only — same colors as card Reserve; does not blink */
.property-card-reserve-panel-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 11px 14px;
    border-radius: 10px;
    border: 2px solid #fcd116;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    background: linear-gradient(135deg, #0038a8 0%, #0038a8 42%, #ce1126 42%, #ce1126 100%);
    box-shadow: 0 4px 14px rgba(0, 56, 168, 0.35);
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
}

.property-card-reserve-panel-tab i {
    font-size: 15px;
    opacity: 0.95;
}

.property-card-reserve-close-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.property-card-reserve-close-btn:hover,
.property-card-reserve-close-btn:focus {
    background: #fff;
    border-color: #94a3b8;
    outline: none;
}

.property-card-reserve-close-btn:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.property-card-reserve-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
}

.property-card-reserve-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 12px 16px;
    box-sizing: border-box;
    font-weight: 600;
}

.property-card-reserve-pricing {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.property-card-reserve-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 12px;
}

.property-card-reserve-amount {
    font-size: 22px;
    font-weight: 700;
    color: #222;
}

.property-card-breakdown-toggle {
    border: none;
    background: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}

.property-card-breakdown-toggle:hover {
    color: #ff385c;
}

.property-card-reserve-nights {
    margin: 6px 0 2px 0;
    font-size: 14px;
    color: #717171;
}

.property-card-reserve-sumline {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.property-card-breakdown {
    margin-top: 12px;
    padding: 12px;
    background: #fafafa;
    border-radius: 10px;
    font-size: 14px;
}

.property-card-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    color: #404040;
}

.property-card-breakdown-row:last-child {
    margin-bottom: 0;
}

.property-card-breakdown-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
    font-weight: 700;
    color: #222;
}

.property-card-reserve-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-bottom: 14px;
}

.property-card-reserve-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #222;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.property-card-reserve-field input[type="date"],
.property-card-reserve-field select {
    width: 100%;
    padding: 10px 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.property-card-date-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #717171;
}

.property-card-reserve-field--guests {
    grid-column: 1 / -1;
}

.property-card-reserve-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    box-sizing: border-box;
}

/* Bottom Reserve: same PH flag look as top row + in-panel header; strong blink; opens payment modal */
.airbnb-property-card .property-card-reserve .property-card-reserve-btn.btn.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    border: 2px solid #fcd116;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    background: linear-gradient(135deg, #0038a8 0%, #0038a8 42%, #ce1126 42%, #ce1126 100%);
    box-shadow: 0 4px 16px rgba(0, 56, 168, 0.4);
    animation: hotels-reserve-submit-blink 0.9s ease-in-out infinite;
    transition: transform 0.15s ease, filter 0.15s ease;
    box-sizing: border-box;
}

.airbnb-property-card .property-card-reserve .property-card-reserve-btn.btn.btn-primary:hover,
.airbnb-property-card .property-card-reserve .property-card-reserve-btn.btn.btn-primary:focus {
    filter: brightness(1.08);
    outline: none;
}

.airbnb-property-card .property-card-reserve .property-card-reserve-btn.btn.btn-primary:focus-visible {
    outline: 3px solid #fcd116;
    outline-offset: 2px;
}

.airbnb-property-card .property-card-reserve .property-card-reserve-btn.btn.btn-primary:active {
    transform: scale(0.99);
}

.property-card-reserve-btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.property-card-reserve-btn-inner i {
    font-size: 15px;
}

@keyframes hotels-reserve-submit-blink {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(0, 56, 168, 0.42), 0 0 0 0 rgba(252, 209, 22, 0.45);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 8px 26px rgba(206, 17, 38, 0.6), 0 0 0 4px rgba(252, 209, 22, 0.65);
        filter: brightness(1.14);
    }
}

.property-card-reserve-disclaimer {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: #717171;
}

@media (max-width: 520px) {
    .property-card-actions-main {
        grid-template-columns: 1fr;
    }

    .property-card-reserve-fields {
        grid-template-columns: 1fr;
    }

    .property-card-reserve-field--guests {
        grid-column: 1;
    }
}

@media (max-width: 380px) {
    .hotels-card-reserve-cta-inner {
        flex-direction: column;
        gap: 3px;
    }

    .hotels-card-reserve-text {
        white-space: normal;
        font-size: 11px;
    }
}

/* Map View */
.airbnb-map {
    width: 100%;
    height: 600px;
    border-radius: 12px;
    overflow: hidden;
    background: #f7f7f7;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #717171;
}

.map-placeholder i {
    font-size: 64px;
    margin-bottom: 16px;
    color: #ddd;
}

.map-placeholder p {
    font-size: 18px;
    font-weight: 600;
    margin: 8px 0;
}

.map-note {
    font-size: 14px;
    font-weight: normal;
    color: #999;
}

/* View Toggle */
.airbnb-view-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 8px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.view-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #717171;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.view-btn:hover {
    background: #f7f7f7;
}

.view-btn.active {
    background: #222;
    color: #fff;
}

/* Modals */
.airbnb-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.3s ease;
}

/* Hotels property listing popup: anchor to upper area (PC + mobile) */
#airbnbPropertyModal.airbnb-modal {
    align-items: flex-start;
    justify-content: center;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* Post Property modal rendered on body – always on top, no scroll/freeze issues */
/* Hotels listing location editor (Leaflet) — above property + post modals */
.hotel-location-map-modal.airbnb-modal-portal {
    z-index: 10003;
}

/* Hotels checkout: payment method picker (above location map modal) */
.hotels-payment-modal.airbnb-modal-portal {
    z-index: 10004;
}

.hotels-payment-modal-content {
    max-width: 440px;
    width: 92%;
    max-height: min(92vh, 720px);
}

.hotels-payment-modal-body {
    padding-top: 6px;
}

.hotels-payment-modal-title {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.hotels-payment-modal-lead {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.45;
}

.hotels-payment-modal-summary {
    margin: 0 0 16px 0;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: #334155;
    white-space: pre-line;
}

.hotels-payment-modal-summary strong {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 15px;
}

.hotels-payment-modal-meta {
    font-size: 13px;
    color: #475569;
}

.hotels-payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hotels-payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.hotels-payment-option:hover,
.hotels-payment-option:focus {
    border-color: #0d9488;
    background: #f0fdfa;
    outline: none;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.12);
}

.hotels-payment-option:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

.hotels-payment-option-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ecfdf5 0%, #ccfbf1 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f766e;
    font-size: 18px;
}

.hotels-payment-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hotels-payment-option-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.hotels-payment-option-sub {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.hotels-payment-option-chevron {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 13px;
}

.hotels-payment-modal-note {
    margin: 14px 0 10px 0;
    font-size: 12px;
    color: #94a3b8;
}

.hotels-payment-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.hotels-payment-detail-modal.airbnb-modal-portal {
    z-index: 10005;
}

.hotels-payment-detail-content {
    max-width: 420px;
    width: 92%;
    max-height: min(90vh, 640px);
}

.hotels-payment-detail-body {
    padding-top: 4px;
}

.hotels-payment-detail-title {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

.hotels-payment-detail-lead {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.hotels-payment-detail-form-mount {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: min(48vh, 340px);
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 8px;
}

.hotels-payment-detail-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 6px;
}

.hotels-payment-detail-field input,
.hotels-payment-detail-field select,
.hotels-payment-detail-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
}

.hotels-payment-detail-field input:focus,
.hotels-payment-detail-field select:focus,
.hotels-payment-detail-field textarea:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.hotels-payment-detail-field textarea {
    min-height: 72px;
    resize: vertical;
}

.hotels-payment-detail-demo-note {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}

.hotels-payment-detail-demo-note i {
    margin-right: 6px;
    color: #0d9488;
}

.hotels-payment-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.hotel-location-map-modal-content {
    max-width: 640px;
    width: 94%;
    max-height: min(92vh, 900px);
    min-height: 0;
}

.hotel-location-map-modal-body {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.hotel-location-map-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.hotel-location-map-title {
    margin: 0;
    font-size: 1.15rem;
    color: #1e293b;
    flex: 1;
    line-height: 1.3;
}

.hotel-location-map-expand-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hotel-location-map-expand-btn:hover,
.hotel-location-map-expand-btn:focus {
    background: #fff;
    border-color: #0d9488;
    color: #0d9488;
    outline: none;
}

.hotel-location-map-expand-btn:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

.hotel-location-map-modal--expanded .hotel-location-map-expand-btn {
    background: #0d9488;
    border-color: #0f766e;
    color: #fff;
}

.hotel-location-map-modal--expanded .hotel-location-map-expand-btn:hover,
.hotel-location-map-modal--expanded .hotel-location-map-expand-btn:focus {
    background: #0f766e;
    color: #fff;
}

.hotel-location-map-toolbar {
    margin-bottom: 12px;
}

.hotel-location-map-search-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.hotel-location-map-search-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
}

.hotel-location-map-search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.hotel-location-map-search-input:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.hotel-location-map-search-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    white-space: nowrap;
    border-radius: 10px;
    font-size: 14px;
}

.hotel-location-map-search-btn-text {
    font-weight: 600;
}

.hotel-location-map-search-hint {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #64748b;
    min-height: 1.35em;
}

.hotel-location-map-search-results {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    max-height: min(28vh, 220px);
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.hotel-location-map-search-results[hidden] {
    display: none !important;
}

.hotel-location-map-search-results button {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    line-height: 1.35;
}

.hotel-location-map-search-results li:last-child button {
    border-bottom: none;
}

.hotel-location-map-search-results button:hover,
.hotel-location-map-search-results button:focus {
    background: #ecfdf5;
    outline: none;
}

.hotel-location-map-search-results button:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: -2px;
}

.hotel-location-map-search-results .hotel-map-result-line1 {
    display: block;
    font-weight: 600;
}

.hotel-location-map-search-results .hotel-map-result-line2 {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Full-screen map: entire viewport (mobile + desktop) */
.hotel-location-map-modal.hotel-location-map-modal--expanded {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.hotel-location-map-modal.hotel-location-map-modal--expanded .hotel-location-map-modal-content {
    max-width: none !important;
    width: 100dvw !important;
    max-height: none !important;
    height: 100dvh !important;
    height: 100vh !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
    border-radius: 0;
    flex: 1 1 auto;
}

.hotel-location-map-modal.hotel-location-map-modal--expanded .modal-close {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
}

.hotel-location-map-modal.hotel-location-map-modal--expanded .hotel-location-map-modal-body {
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    flex: 1;
    min-height: 0;
}

.hotel-location-map-modal.hotel-location-map-modal--expanded .hotel-location-map-leaflet {
    flex: 1;
    height: auto;
    min-height: 200px;
    max-height: none;
}

.hotel-location-map-hint {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.45;
}

.hotel-location-map-leaflet {
    width: 100%;
    height: min(50vh, 420px);
    min-height: 260px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    z-index: 0;
}

.hotel-location-map-coords {
    margin: 10px 0 14px 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
    word-break: break-word;
}

.hotel-location-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.airbnb-modal-portal {
    z-index: 10002;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
}

.airbnb-modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: slideUp 0.3s ease;
}

/* Wide property listing modal + scrollable listing body (only on .airbnb-modal-content, never on overlay) */
.airbnb-modal-content.property-modal {
    max-width: 1200px;
    width: 95%;
    max-height: min(95vh, 100dvh);
    min-height: 0;
    overflow: hidden;
}

.airbnb-modal-content.property-modal > .modal-close {
    flex-shrink: 0;
    align-self: flex-end;
    margin: 10px 12px 0;
    position: relative;
    z-index: 2;
}

.airbnb-modal-content.property-modal #propertyModalContent {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.property-details-category {
    margin: 0 0 8px 0;
}

.property-type-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.property-detail-section {
    margin-bottom: 28px;
}

.property-detail-facts {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 16px;
    line-height: 1.65;
    color: #333;
}

.property-detail-facts li {
    margin-bottom: 8px;
}

.property-detail-pricing-section {
    padding: 18px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #eee;
}

.property-amenities-intro {
    margin: -8px 0 16px 0;
    font-size: 14px;
    color: #717171;
    line-height: 1.45;
}

.property-no-amenities-note {
    margin: 0;
    font-size: 15px;
    color: #717171;
    font-style: italic;
}

@media (max-width: 768px) {
    #propertyModalContent .main-image {
        height: min(42vh, 320px);
        max-height: 360px;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

.modal-header h3 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.modal-close:hover {
    background: #f7f7f7;
}

.modal-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Post Property modal content – scrollable on small screens, touch-friendly */
.airbnb-modal-portal .airbnb-modal-content {
    max-height: 90vh;
    -webkit-overflow-scrolling: touch;
}

.airbnb-modal-portal .modal-body {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.modal-search-sticky {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1;
    margin-bottom: 16px;
    padding-bottom: 4px;
}
.modal-search-sticky .search-input {
    margin-bottom: 0;
}

.search-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 20px;
}

.popular-destinations h4 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin-bottom: 16px;
}

.destination-list,
.location-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.airbnb-modal .modal-body .location-list {
    max-height: none;
    overflow: visible;
}

.location-list::-webkit-scrollbar {
    width: 6px;
}

.location-list::-webkit-scrollbar-track {
    background: transparent;
}

.location-list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.location-list::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

.destination-item {
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.destination-item:hover {
    background: #f7f7f7;
}

.destination-item i {
    color: #717171;
    width: 20px;
    text-align: center;
}

/* Hotels — Philippines city picker (grouped by region) */
.location-list--ph-grouped {
    gap: 0;
}

.hotels-ph-region-group {
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    background: #fff;
}

.hotels-ph-region-group .destination-item {
    border-radius: 0;
}

.hotels-ph-region-group .destination-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.location-region-heading {
    margin: 0;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

/* Guests Selector */
.guests-selector {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.guest-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.guest-option strong {
    display: block;
    font-size: 16px;
    color: #222;
    margin-bottom: 4px;
}

.guest-option span {
    font-size: 14px;
    color: #717171;
}

.guest-counter {
    display: flex;
    align-items: center;
    gap: 16px;
}

.guest-counter button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.guest-counter button:hover {
    border-color: #222;
}

.guest-counter span {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    color: #222;
}

/* Property Details */
.property-details {
    padding: 0;
}

.property-details-header {
    padding: 24px;
    border-bottom: 1px solid #ddd;
}

.property-details-header h1 {
    font-size: 26px;
    font-weight: 600;
    color: #222;
    margin-bottom: 12px;
}

.property-details-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.property-details-rating i {
    color: #ff385c;
}

.property-location-badge {
    color: #717171;
    text-decoration: underline;
    margin-left: 8px;
}

.property-detail-location-map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px solid #0d9488;
    background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%);
    color: #0f766e;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.15);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.property-detail-location-map-btn:hover,
.property-detail-location-map-btn:focus {
    background: #fff;
    outline: none;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
}

.property-detail-location-map-btn:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

.property-detail-location-map-btn:active {
    transform: scale(0.99);
}

.property-detail-location-map-btn i {
    color: #0d9488;
    font-size: 18px;
}

.property-photos-section {
    padding: 0 24px 12px 24px;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
}

.property-photos-section-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

.property-photos-count {
    margin: 0;
    font-size: 14px;
    color: #717171;
    line-height: 1.45;
}

.property-details-images {
    margin-bottom: 24px;
}

.main-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-image--zoomable .hotel-detail-main-zoomable {
    cursor: zoom-in;
}

.thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px;
}

.thumbnails img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.thumbnails img:hover {
    opacity: 0.8;
}

.property-details-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    padding: 24px;
}

.property-host {
    margin-bottom: 24px;
}

.host-info h3 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
}

.host-info p {
    font-size: 16px;
    color: #717171;
}

.host-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 10px 0;
}

.host-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
}

.host-badge--verified {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #0369a1;
}

.host-badge--super {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #b45309;
}

.host-capacity-line {
    margin: 0 0 6px 0;
}

.property-beds-detail {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #525252;
}

.host-bio-text {
    margin: 14px 0 8px 0;
    font-size: 15px;
    line-height: 1.55;
    color: #404040;
}

.host-response-time {
    margin: 0;
    font-size: 14px;
    color: #717171;
}

.host-response-time i {
    margin-right: 6px;
    color: #a3a3a3;
}

.property-overview-block {
    margin: 8px 0 20px 0;
    padding: 18px 20px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
}

.property-overview-heading {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

.property-overview-text {
    font-size: 16px;
    line-height: 1.6;
    color: #404040;
}

.property-description {
    margin-bottom: 32px;
}

.property-block-heading {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: #222;
}

.property-description p,
.property-description-body {
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    margin: 0;
}

.booking-fee-extra {
    margin: -8px 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.booking-fee-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    color: #525252;
    margin-top: 8px;
}

.booking-fee-line:first-of-type {
    margin-top: 0;
}

.booking-fee-line span {
    font-weight: 600;
    color: #222;
}

.booking-fee-line--note {
    display: block;
    font-size: 13px;
    color: #717171;
    font-style: italic;
    margin-top: 10px;
}

.property-amenities-list h3 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin-bottom: 24px;
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: #222;
}

.amenity-item i {
    color: #222;
    width: 24px;
}

/* Booking Card */
.property-booking-card {
    position: sticky;
    top: 24px;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.booking-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 24px;
}

.booking-price .price-amount {
    font-size: 22px;
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.booking-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.booking-date-input {
    padding: 12px;
    border-right: 1px solid #ddd;
}

.booking-date-input:last-child {
    border-right: none;
}

.booking-date-input label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #222;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.booking-date-input input {
    width: 100%;
    border: none;
    font-size: 14px;
    color: #222;
}

.booking-date-input input:focus {
    outline: none;
}

.booking-guests {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
}

.booking-guests label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #222;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.booking-guests select {
    width: 100%;
    border: none;
    font-size: 14px;
    color: #222;
    background: transparent;
}

.booking-guests select:focus {
    outline: none;
}

.booking-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ff385c 0%, #e61e4d 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.booking-btn:hover {
    transform: scale(1.02);
}

.booking-note {
    text-align: center;
    font-size: 14px;
    color: #717171;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .property-details-content {
        grid-template-columns: 1fr;
    }
    
    .property-booking-card {
        position: relative;
        top: 0;
    }
    
    .airbnb-properties {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 32px 20px;
    }
}

@media (max-width: 768px) {
    .airbnb-search-bar {
        flex-direction: column;
        border-radius: 12px;
        padding: 16px;
        gap: 12px;
    }
    
    .search-item {
        width: 100%;
        padding: 12px;
    }
    
    .search-divider {
        display: none;
    }
    
    .airbnb-search-btn {
        width: 100%;
        border-radius: 8px;
        height: 48px;
    }
    
    .airbnb-properties {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .filter-scroll {
        gap: 8px;
    }
    
    .filter-chip {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .property-details-content {
        padding: 16px;
    }
    
    .main-image {
        height: 300px;
    }
    
    .thumbnails {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .amenities-grid {
        grid-template-columns: 1fr;
    }
    
    .airbnb-view-toggle {
        bottom: 20px;
        right: 20px;
    }
}

/* Hotels — browse vs post host */
.hotels-main-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.hotels-main-tab {
    flex: 1;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hotels-main-tab:hover {
    background: rgba(255, 56, 92, 0.08);
    color: #e11d48;
}

.hotels-main-tab.active {
    background: linear-gradient(135deg, #ff385c 0%, #e61e4d 100%);
    color: #fff;
    border-color: rgba(255, 56, 92, 0.35);
    box-shadow: 0 4px 14px rgba(255, 56, 92, 0.35);
}

.hotels-post-section {
    padding-bottom: 24px;
}

.hotels-post-panel {
    max-width: 680px;
    margin: 0 auto;
    padding: 28px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}

.hotels-post-title {
    margin: 0 0 8px 0;
    font-size: 1.35rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hotels-server-live-hint {
    margin: 0 0 14px 0;
    padding: 10px 14px;
    font-size: 13px;
    color: #0369a1;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 10px;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.hotels-server-live-hint i {
    margin-top: 2px;
    flex-shrink: 0;
}

.hotels-post-lead {
    margin: 0 0 22px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

.hotels-post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.hotels-post-actions .btn {
    flex: 1;
    min-width: 160px;
}

.hotels-photo-hint {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.hotels-post-extended-mount {
    margin-bottom: 8px;
}

.hotels-post-panel--template .form-group {
    margin-bottom: 14px;
}

.hotels-template-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px 0;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 8px;
    clear: both;
}

.hotels-template-section-title:first-of-type,
.hotels-template-section-title--static:first-of-type {
    margin-top: 4px;
}

.hotels-template-section-title .hotels-template-section-num,
.hotels-template-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff385c 0%, #e61e4d 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.hotels-template-help {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.hotels-photo-sample-list {
    margin: 0 0 14px 18px;
    padding: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
}

.hotels-photo-sample-list li {
    margin-bottom: 6px;
}

.hotels-form-fullrow {
    grid-column: 1 / -1;
}

.hotels-modal-post-body {
    max-height: min(78vh, 720px);
    overflow-y: auto;
    padding-right: 4px;
}

.hotels-post-form-template .hotels-post-lead--modal {
    margin: 0 0 18px 0;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

.hotels-post-subhead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 12px 0;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 8px;
}

.hotels-post-subhead:first-of-type {
    margin-top: 8px;
}

.hotels-post-subhead i {
    color: #ff385c;
}

.hotels-post-hint-inline {
    font-weight: 400;
    font-size: 13px;
    color: #64748b;
}

.hotels-post-fieldlabel {
    margin: 12px 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.hotels-field-grid {
    display: grid;
    gap: 14px 16px;
    margin-bottom: 8px;
}

.hotels-field-grid--qt {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 560px) {
    .hotels-field-grid--qt {
        grid-template-columns: repeat(3, 1fr);
    }
}

.hotels-field-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.hotels-amenity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.hotels-amenity-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fafafa;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hotels-amenity-option:hover {
    border-color: #fda4af;
    background: #fff7f7;
}

.hotels-amenity-option input {
    margin-top: 2px;
    flex-shrink: 0;
}

.hotels-policy-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 12px;
}

.hotels-policy-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
}

.hotels-policy-radios {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.hotels-policy-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
    cursor: pointer;
}

.hotels-policy-radio input {
    margin-top: 3px;
    flex-shrink: 0;
}

.airbnb-modal-portal .hotels-post-extended .form-group select,
.hotels-post-panel .hotels-post-extended .form-group select {
    width: 100%;
}

.property-listing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.property-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    background: #f1f5f9;
    color: #334155;
}

.property-meta-pill i {
    color: #64748b;
}

.property-policies-block {
    margin: 24px 0;
    padding: 18px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.property-policies-block h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #1e293b;
}

.property-policies-list {
    margin: 0;
    padding-left: 18px;
    color: #475569;
    font-size: 15px;
    line-height: 1.65;
}

.property-policies-list li {
    margin-bottom: 6px;
}

.property-house-rules {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.property-house-rules p {
    margin: 8px 0 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: #334155;
    white-space: pre-wrap;
}

.hotels-photo-preview-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    min-height: 0;
}

.hotels-upload-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.thumbnails--hotel-gallery {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}

.property-detail-thumb {
    display: block;
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
    background: #f1f5f9;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.property-detail-thumb img {
    width: 100%;
    height: 72px;
    object-fit: cover;
    display: block;
    vertical-align: middle;
}

.property-detail-thumb:hover {
    opacity: 0.92;
}

.property-detail-thumb.is-active {
    border-color: #ff385c;
    box-shadow: 0 0 0 1px rgba(255, 56, 92, 0.35);
}

/* Hotels — full-screen photo lightbox (zoom / prev-next) */
.hotel-img-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 26000;
    align-items: stretch;
    justify-content: center;
    font-family: inherit;
}

.hotel-img-lightbox-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.hotel-img-lightbox-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(1200px, 100vw);
    margin: 0 auto;
    padding: 12px 12px 20px;
    box-sizing: border-box;
    pointer-events: none;
}

.hotel-img-lightbox-panel > * {
    pointer-events: auto;
}

.hotel-img-lightbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.hotel-img-lightbox-caption {
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hotel-img-lightbox-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hotel-img-lightbox-iconbtn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s ease, transform 0.1s ease;
}

.hotel-img-lightbox-iconbtn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.hotel-img-lightbox-iconbtn:active {
    transform: scale(0.96);
}

.hotel-img-lightbox-close {
    background: rgba(239, 68, 68, 0.35);
    border-color: rgba(252, 165, 165, 0.4);
}

.hotel-img-lightbox-close:hover {
    background: rgba(239, 68, 68, 0.55);
}

.hotel-img-lightbox-stage {
    flex: 1;
    min-height: 200px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
}

.hotel-img-lightbox-img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    transition: transform 0.12s ease-out;
}

@media (max-width: 600px) {
    .hotel-img-lightbox-caption {
        width: 100%;
        text-align: center;
    }

    .hotel-img-lightbox-tools {
        justify-content: center;
    }
}

/* Post Property Button */
.post-property-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1500;
    background: linear-gradient(135deg, #ff385c 0%, #e61e4d 100%);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    animation: buttonBlink 2s ease-in-out infinite;
}

.post-property-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 56, 92, 0.6);
}

.post-property-btn i {
    font-size: 14px;
}

#hotelsBrowseSection .post-property-btn {
    position: relative;
    top: auto;
    right: auto;
    float: right;
    margin-bottom: 16px;
    z-index: 1;
    animation: none;
}

.hotels-tab-panel::after {
    content: '';
    display: table;
    clear: both;
}

@keyframes buttonBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 4px 12px rgba(255, 56, 92, 0.4);
    }
    50% {
        opacity: 0.9;
        box-shadow: 0 4px 20px rgba(255, 56, 92, 0.8);
    }
}

/* Live Stores */
.live-stores-tabs.tabs-container {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.live-store-detail-tabs.tabs-container {
    margin-top: 16px;
    margin-bottom: 16px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;
}

.live-store-order-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.live-store-order-row label {
    flex: 1;
    min-width: 120px;
    margin: 0;
    cursor: pointer;
}

.order-requested-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    animation: buttonBlink 2s ease-in-out infinite;
}

.live-stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.live-store-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.live-store-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.live-store-thumb {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: #e2e8f0;
}

.live-store-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-store-info {
    padding: 16px;
}

.live-store-name {
    font-weight: 600;
    font-size: 16px;
    color: #1e293b;
}

/* Interactive Map Section */
.interactive-map-section {
    margin-top: 60px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.map-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.map-header h3 i {
    color: #ff385c;
}

.map-controls {
    display: flex;
    gap: 8px;
}

.map-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.map-control-btn:hover {
    background: #f7f7f7;
    border-color: #222;
}

.interactive-map-container {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #e8e8e8;
    border-radius: 0 0 12px 12px;
}

.google-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}


.map-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.terrain-overlay {
    mix-blend-mode: overlay;
    opacity: 0.6;
}

.map-grid {
    mix-blend-mode: screen;
}

.road-overlay {
    mix-blend-mode: multiply;
}

.map-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.map-marker:hover {
    transform: translate(-50%, -100%) scale(1.15);
    z-index: 20;
}

.map-marker:hover .marker-pin {
    box-shadow: 0 6px 20px rgba(255, 56, 92, 0.6), 0 0 0 4px rgba(255, 56, 92, 0.2);
}

.marker-pin {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ff385c 0%, #e61e4d 100%);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 56, 92, 0.3);
    position: relative;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.marker-pin::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 56, 92, 0.3);
    animation: markerPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes markerPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.marker-price {
    position: absolute;
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #222 0%, #333 100%);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 56, 92, 0.5);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.map-marker:hover .marker-price {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.marker-tooltip {
    position: absolute;
    top: -140px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    max-width: 280px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    font-size: 14px;
    line-height: 1.6;
    backdrop-filter: blur(10px);
}

.marker-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
}

.map-marker:hover .marker-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.map-zoom-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.zoom-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.zoom-btn:hover {
    background: #f7f7f7;
    transform: scale(1.05);
}

.map-legend {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    font-size: 14px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Post Property modal – responsive and safe area on mobile */
@media (max-width: 768px) {
    .airbnb-modal-portal {
        align-items: flex-start;
        padding-top: max(env(safe-area-inset-top), 12px);
        padding-bottom: max(env(safe-area-inset-bottom), 12px);
        padding-left: max(env(safe-area-inset-left), 12px);
        padding-right: max(env(safe-area-inset-right), 12px);
        overflow-y: auto;
    }
    .airbnb-modal-portal .airbnb-modal-content {
        max-height: 85vh;
        width: 100%;
        margin: auto 0;
    }
    .airbnb-modal-portal .modal-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Responsive Map */
@media (max-width: 768px) {
    .post-property-btn {
        top: 15px;
        right: 15px;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .interactive-map-container {
        height: 400px;
    }
    
    .map-header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .map-header h3 {
        font-size: 18px;
    }
    
    .map-zoom-controls {
        top: 15px;
        right: 15px;
    }
    
    .zoom-btn {
        width: 36px;
        height: 36px;
    }
    
    .map-legend {
        bottom: 15px;
        left: 15px;
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* Dive & Convert game */
#reactRightContainer .react-right-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
#reactRightContainer .react-right-options button:hover {
    border-color: #0ea5e9 !important;
    background: #f0f9ff !important;
}
@media (max-width: 480px) {
    #reactRightContainer .react-right-options {
        grid-template-columns: 1fr;
    }
}

/* Mr. Question - Answer and Compete */
.mrquestion-card .game-thumbnail {
    background: linear-gradient(135deg, #E21B3C 0%, #D89E00 50%, #26890C 100%) !important;
}

.mrquestion-option:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.mrquestion-quiz-card:hover {
    border-color: #667eea !important;
    background: #f8fafc;
}

.mrquestion-percountries-card:hover,
.mrquestion-country-card:hover {
    border-color: #1368CE !important;
    background: #f0f9ff;
}

@media (max-width: 600px) {
    .mrquestion-options-grid {
        grid-template-columns: 1fr !important;
    }
}

#mrQuestionSearch {
    transition: border-color 0.2s;
}

#mrQuestionSearch:focus {
    outline: none;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

#mqRestrictedWrap textarea {
    font-family: inherit;
    resize: vertical;
}

#mrQuestionExpiryModal > div {
    animation: mrquestionModalIn 0.2s ease-out;
}

@keyframes mrquestionModalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* PWA install suggestion banner */
.pwa-install-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10050;
    padding: calc(12px + env(safe-area-inset-bottom, 0px)) 16px 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    pointer-events: none;
    display: flex;
    justify-content: center;
    animation: pwaBannerSlideUp 0.35s ease-out;
}

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

.pwa-install-banner-inner {
    pointer-events: auto;
    max-width: 640px;
    width: 100%;
    background: linear-gradient(145deg, #0f766e 0%, #115e59 55%, #134e4a 100%);
    color: #f0fdfa;
    border-radius: 16px;
    padding: 18px 44px 18px 20px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        'icon copy'
        'actions actions';
    gap: 12px 16px;
    align-items: start;
}

@media (min-width: 520px) {
    .pwa-install-banner-inner {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 'icon copy actions';
        align-items: center;
    }
}

.pwa-install-banner-icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pwa-install-banner-copy {
    grid-area: copy;
    min-width: 0;
}

.pwa-install-banner-title {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

.pwa-install-banner-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(240, 253, 250, 0.95);
}

.pwa-install-banner-text strong {
    color: #fff;
    font-weight: 700;
}

.pwa-install-banner-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

@media (min-width: 520px) {
    .pwa-install-banner-actions {
        flex-direction: column;
        align-items: stretch;
        min-width: 140px;
    }
}

.pwa-install-banner .btn.btn-primary {
    background: #fbbf24;
    color: #422006;
    border: none;
    font-weight: 700;
}

.pwa-install-banner .btn.btn-primary:hover {
    filter: brightness(1.05);
}

.pwa-install-banner .btn.btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #f0fdfa;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.pwa-install-banner .btn.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pwa-install-banner-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.pwa-install-banner-close:hover {
    background: rgba(0, 0, 0, 0.35);
}

.neon-tap-root {
    width: 100%;
}

.neon-tap-shell {
    width: min(1100px, 100%);
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: radial-gradient(120% 120% at 10% 10%, #1f1144 0%, #0b1228 55%, #050812 100%);
    color: #eef2ff;
    box-shadow: 0 20px 38px rgba(3, 7, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: clamp(14px, 2vw, 22px);
}

.neon-tap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.neon-tap-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    font-weight: 700;
}

.neon-tap-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.neon-tap-rules {
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(15, 23, 42, 0.65);
    border-radius: 12px;
    padding: 10px 12px;
    color: #dbeafe;
    font-size: 0.93rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

.neon-tap-stat-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
    overflow: visible;
    padding-bottom: 0;
    scrollbar-width: auto;
}

.neon-tap-stat {
    flex: 1 1 120px;
    border-radius: 11px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(2, 6, 23, 0.58);
    padding: 8px 10px;
    min-height: 66px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.neon-tap-stat span {
    font-size: 0.73rem;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.neon-tap-stat strong {
    font-size: 1.08rem;
    color: #f0f9ff;
}

.neon-tap-control {
    flex: 1 1 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(2, 6, 23, 0.58);
    padding: 8px;
}

.neon-tap-arena {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 360px;
    max-height: 72vh;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.5);
    background:
        radial-gradient(circle at 18% 30%, rgba(34, 211, 238, 0.22), transparent 28%),
        radial-gradient(circle at 82% 65%, rgba(129, 140, 248, 0.2), transparent 32%),
        linear-gradient(135deg, #030712 0%, #0f172a 45%, #1e1b4b 100%);
}

.neon-tap-arena::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.09;
}

.neon-tap-target {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    background: transparent;
    transform: scale(calc(0.72 + (var(--nt-life, 1) * 0.38)));
    touch-action: manipulation;
}

.neon-tap-target span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow:
        0 0 0 4px rgba(59, 130, 246, 0.35),
        0 0 22px rgba(34, 211, 238, 0.95),
        inset 0 0 14px rgba(56, 189, 248, 0.65);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(56, 189, 248, 0.9) 35%, rgba(59, 130, 246, 0.2) 75%, transparent 100%);
    animation: neonTapPulse 0.62s ease-in-out infinite;
}

.neon-tap-ready {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    font-size: 1rem;
    color: #dbeafe;
    background: rgba(2, 6, 23, 0.44);
}

.neon-tap-control .btn,
.neon-tap-actions .btn {
    touch-action: manipulation;
}

.neon-tap-shell button,
.neon-tap-shell input {
    pointer-events: auto;
}

.neon-tap-control {
    gap: 8px;
}

.neon-tap-btn-box {
    width: 100%;
    white-space: nowrap;
    min-height: 44px;
}

.neon-tap-btn-ph-blink {
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    color: #ffffff !important;
    background-size: 220% 100%;
    animation: neonTapPhBlink 3.2s ease-in-out infinite, neonTapPhSlide 5.2s linear infinite;
}

@keyframes neonTapPhBlink {
    0% {
        background: linear-gradient(90deg, #0038a8 0%, #0038a8 50%, #ce1126 50%, #ce1126 100%);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        opacity: 0.88;
    }
    33% {
        background: linear-gradient(90deg, #0038a8 0%, #0038a8 44%, #fcd116 44%, #fcd116 56%, #ce1126 56%, #ce1126 100%);
        box-shadow: 0 0 8px rgba(252, 209, 22, 0.22);
        opacity: 0.94;
    }
    66% {
        background: linear-gradient(90deg, #ffffff 0%, #0038a8 28%, #0038a8 62%, #ce1126 62%, #ce1126 100%);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
        opacity: 0.9;
    }
    100% {
        background: linear-gradient(90deg, #0038a8 0%, #0038a8 50%, #ce1126 50%, #ce1126 100%);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        opacity: 0.88;
    }
}

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

/* Aznar ferry schedule tabs */
.aznar-schedule-wrap {
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 14px;
    background: #f8fbff;
}

.aznar-schedule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.aznar-schedule-head h4 {
    margin: 0;
    color: #0f172a;
}

.aznar-schedule-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.aznar-schedule-tab {
    border: 2px solid #0038a8;
    background: #ffffff;
    color: #0f172a;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
    animation: aznarPhBorderBlink 3.8s linear infinite;
}

.aznar-schedule-tab.is-active {
    border-color: #0ea5e9;
    background: #e0f2fe;
    color: #0c4a6e;
}

.aznar-admin-lock-btn {
    opacity: 0.92;
    border-style: dashed;
}

.aznar-schedule-card {
    background: #ffffff;
    border: 2px solid #0038a8;
    border-radius: 10px;
    padding: 12px;
    animation: aznarPhBorderBlink 3.8s linear infinite;
}

.aznar-schedule-title {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

/* Aznar schedule card — pricing banner (Origin header + directional arrows) */
.aznar-schedule-pricing-panel {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #c7d2fe;
}

.aznar-schedule-pricing-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #cbd5e1;
}

.aznar-schedule-pricing-head-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 4px;
}

.aznar-schedule-pricing-origin-name {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: break-word;
}

.aznar-schedule-pricing-route-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    overflow-wrap: break-word;
    word-break: break-word;
}

.aznar-schedule-pricing-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(100, 116, 139, 0.45);
    display: grid;
    gap: 6px;
}

.aznar-pricing-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 12px;
    font-size: 13px;
}

.aznar-pricing-meta-k {
    font-weight: 700;
    color: #475569;
}

.aznar-pricing-meta-v {
    font-weight: 600;
    color: #0f172a;
    text-align: right;
}

.aznar-all-schedule-wrap:not(.aznar-show-vehicle-fares) .aznar-fare-line.aznar-fare-line--veh {
    display: none !important;
}

.aznar-pricing-route-arrow {
    color: #2563eb;
    font-size: 15px;
    flex-shrink: 0;
}

.aznar-pricing-route-dest {
    font-weight: 700;
    color: #0f172a;
}

.aznar-pricing-route-return {
    font-weight: 700;
    color: #0f766e;
}

.aznar-schedule-media-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.aznar-schedule-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.aznar-schedule-image-thumb {
    border: 1px solid #bfdbfe;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

.aznar-schedule-image-thumb img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
}

.aznar-schedule-image-card {
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.aznar-schedule-image-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px;
}

.aznar-schedule-image-by {
    font-size: 11px;
    color: #64748b;
}

.aznar-schedule-gallery-empty {
    margin: 0 0 10px 0;
    color: #64748b;
    font-size: 13px;
}

.aznar-schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
    table-layout: fixed;
    border: 2px solid #0038a8;
    animation: aznarPhBorderBlink 3.8s linear infinite;
}

.aznar-schedule-table th,
.aznar-schedule-table td {
    border: 2px solid #1d4ed8;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    overflow-wrap: break-word;
    word-break: break-word;
}

.aznar-schedule-table th {
    background: #e0f2fe;
    color: #0f172a;
}

.aznar-schedule-note {
    margin: 0;
    color: #475569;
    font-size: 0.9rem;
}

.aznar-time-cell-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 2px solid #1d4ed8;
    border-radius: 10px;
    padding: 8px;
    background: rgba(239, 246, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(252, 209, 22, 0.38);
}

.aznar-time-cell-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.aznar-time-cell-row--actions {
    justify-content: center;
    padding-top: 2px;
    border-top: 1px solid rgba(29, 78, 216, 0.2);
}

.aznar-fare-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 4px 2px 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(29, 78, 216, 0.15);
}

.aznar-fare-line {
    display: grid;
    grid-template-columns: minmax(72px, auto) min-content 1fr;
    align-items: center;
    gap: 6px 8px;
    width: 100%;
    min-width: 0;
}

.aznar-fare-k {
    font-size: 11px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.02em;
    text-align: left;
}

.aznar-fare-eq {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    flex-shrink: 0;
}

.aznar-fare-line .aznar-price-pill,
.aznar-fare-line .aznar-vehicle-price-pill {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .aznar-fare-line {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .aznar-fare-eq {
        display: none;
    }
    .aznar-fare-k {
        font-size: 10px;
    }
}

.aznar-time-btn {
    border: 2px solid #0038a8;
    background: #eff6ff;
    color: #0f172a;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 700;
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
    font-size: 12px;
    animation: aznarPhBorderBlink 3.8s linear infinite;
}

.aznar-time-btn:hover {
    background: #dbeafe;
}

.aznar-slot-pill {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.aznar-price-pill {
    border: 2px solid #fcd116;
    color: #ffffff;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    background: linear-gradient(135deg, #0038a8 0%, #1d4ed8 35%, #ce1126 100%);
    animation: aznarPriceRelaxFlash 1.25s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.35);
    box-shadow: 0 5px 14px rgba(2, 6, 23, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.aznar-price-pill-fast-blink {
    animation: aznarPriceRelaxFlash 0.72s ease-in-out infinite !important;
    box-shadow: 0 0 0 2px rgba(252, 209, 22, 0.55), 0 0 16px rgba(206, 17, 38, 0.35) !important;
}

.aznar-vehicle-price-pill {
    border: 2px solid #0f766e;
    color: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #115e59 100%);
    margin-top: 0;
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.35);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.35);
}

.aznar-vehicle-price-pill.aznar-price-pill-fast-blink {
    animation: aznarPriceRelaxFlash 0.72s ease-in-out infinite !important;
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.55), 0 0 14px rgba(15, 118, 110, 0.45) !important;
}

@keyframes aznarPriceRelaxFlash {
    0%, 100% {
        filter: brightness(0.96) saturate(1);
        transform: translateY(0) scale(1);
        box-shadow: 0 5px 14px rgba(2, 6, 23, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    }
    50% {
        filter: brightness(1.1) saturate(1.05);
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 0 0 2px rgba(252, 209, 22, 0.5), 0 8px 18px rgba(2, 6, 23, 0.3);
    }
}

.aznar-route-header-fast-blink {
    animation: aznarReservePhBlink 0.8s ease-in-out infinite, aznarReservePhSlide 1.8s linear infinite !important;
    border: 2px solid #fcd116 !important;
    background: linear-gradient(90deg, #0038a8 0%, #0038a8 50%, #ce1126 50%, #ce1126 100%) !important;
    background-size: 220% 100% !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(252, 209, 22, 0.45), 0 0 16px rgba(206, 17, 38, 0.32) !important;
}

.aznar-reserve-btn {
    border: 1px solid rgba(255, 255, 255, 0.75);
    color: #ffffff;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(90deg, #0038a8 0%, #0038a8 50%, #ce1126 50%, #ce1126 100%);
    background-size: 220% 100%;
    animation: aznarReservePhBlink 3.8s ease-in-out infinite, aznarReservePhSlide 6.2s linear infinite;
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.22);
}

.aznar-reserve-btn:hover {
    filter: brightness(1.06);
}

.aznar-roundtrip-btn {
    border: 1px solid rgba(252, 209, 22, 0.9);
    color: #0f172a;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #fcd116 0%, #fff2b6 55%, #ffffff 100%);
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.18);
}

.aznar-roundtrip-btn:hover:not(:disabled) {
    filter: brightness(1.04);
}

.aznar-roundtrip-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.aznar-select-trip-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 2px 8px;
    background: #f8fafc;
    font-size: 11px;
    color: #334155;
}
.aznar-select-trip-wrap input {
    margin: 0;
}
.aznar-itinerary-summary-panel {
    margin-top: 10px;
    border: 2px solid #1d4ed8;
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}
.aznar-itinerary-summary-panel h6 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #1e3a8a;
}
.aznar-itinerary-summary-panel #aznarItinerarySummaryContent {
    margin-bottom: 10px;
    font-size: 13px;
    color: #0f172a;
    line-height: 1.4;
}
.aznar-itinerary-summary-panel #aznarItineraryProceedBtn {
    width: 100%;
}

.aznar-booking-modal-card {
    background: #fff;
    border-radius: 12px;
    max-width: min(96vw, 820px);
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    padding: 26px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.aznar-payment-modal-card {
    background: #fff;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Server-signed teller QR modal (phcash-aznar-ticket.php) */
.aznar-ticket-verify-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    max-width: 400px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 22px 22px 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(0, 56, 168, 0.35);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.aznar-ticket-verify-x {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}

.aznar-ticket-verify-x:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.aznar-payment-section {
    border: 1px solid #dbeafe;
    background: #f8fbff;
    border-radius: 10px;
    padding: 10px;
}

.aznar-payment-payto-box {
    border: 1px dashed #86efac;
    background: #f0fdf4;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    color: #14532d;
}

.aznar-payment-payto-number {
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Admin → Aznar Teller Location Access table */
.admin-aznar-teller-access-table th.admin-aznar-teller-access-th {
    font-weight: 800;
    color: #0f172a;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.admin-aznar-teller-access-table td.admin-aznar-teller-access-cell {
    font-weight: 400;
    color: #334155;
}

.admin-aznar-teller-access-table tbody strong {
    font-weight: 600;
}

.admin-aznar-teller-mobile-checklist {
    margin: 12px 0 16px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
}

.admin-aznar-teller-mobile-checklist h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #b91c1c;
}

.admin-aznar-teller-mobile-checklist ul {
    margin: 8px 0 0;
    padding-left: 1.25rem;
}

.admin-aznar-teller-mobile-checklist li {
    margin-bottom: 8px;
}

.admin-aznar-teller-mobile-checklist .aznar-teller-red {
    color: #b91c1c;
    font-weight: 600;
}

.admin-aznar-teller-mobile-checklist code {
    font-size: 12px;
    background: #fee2e2;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Empty required-for-match fields (row partially filled) */
.admin-aznar-teller-access-table input.admin-aznar-teller-field-lacking {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.25);
    background-color: #fff5f5 !important;
}

.admin-aznar-teller-access-table input.admin-aznar-teller-field-email-invalid {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.3);
}

.admin-aznar-teller-roster-probe--bad {
    color: #b91c1c !important;
    font-weight: 600;
}

.admin-aznar-teller-roster-probe--ok {
    color: #15803d !important;
    font-weight: 600;
}

.admin-aznar-asc-users-probe--bad {
    color: #b91c1c !important;
    font-weight: 600;
}

.admin-aznar-asc-users-probe--ok {
    color: #15803d !important;
    font-weight: 600;
}

/* Aznar teller: non-assigned origin “display only” reminder (Ferry + Teller Counter panel). */
/* Aznar Teller counter — Draft admin dashboard (wireframe) */
.content-panel.content-panel-aznar-draft {
    background: #f8fafc;
}

.aznar-draft-dashboard {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 4px 24px;
    color: #0f172a;
    font-size: 14px;
}

.aznar-draft-topnav {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    margin-bottom: 16px;
}

.aznar-draft-topnav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}

.aznar-draft-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #0369a1;
}

.aznar-draft-brand .fa-ship {
    font-size: 1.25rem;
}

.aznar-draft-brand-sub {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    padding-left: 8px;
    border-left: 2px solid #bae6fd;
}

.aznar-draft-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #0f766e 0%, #0369a1 100%);
    color: #fff;
    border-radius: 12px;
    min-width: 180px;
}

.aznar-draft-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.aznar-draft-profile-name {
    display: block;
    font-weight: 700;
    font-size: 14px;
}

.aznar-draft-profile-role {
    font-size: 11px;
    opacity: 0.9;
}

/* Front / Mid / Back office — tabbed panel below PH Online header */
.aznar-draft-office-merged {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.aznar-draft-office-merged-lead {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
}

.aznar-draft-office-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.aznar-draft-office-tab {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    border: 1px solid transparent;
    color: #475569;
    padding: 9px 14px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.28s ease,
        color 0.22s ease,
        transform 0.18s ease;
}

.aznar-draft-office-tab .fas {
    font-size: 13px;
    opacity: 0.88;
}

/* Front Office — soft sky → sea glass */
.aznar-draft-office-tab--front {
    background: linear-gradient(
        122deg,
        rgba(224, 242, 254, 0.92) 0%,
        rgba(186, 230, 253, 0.55) 28%,
        rgba(204, 251, 241, 0.65) 58%,
        rgba(236, 254, 255, 0.95) 100%
    );
    border-color: rgba(125, 211, 252, 0.42);
    color: #334155;
    box-shadow: 0 1px 3px rgba(14, 116, 144, 0.06);
}

.aznar-draft-office-tab--front.is-active {
    background: linear-gradient(
        122deg,
        #bae6fd 0%,
        #a5f3fc 38%,
        #99f6e4 72%,
        #ccfbf1 100%
    );
    border-color: rgba(14, 165, 233, 0.45);
    color: #0c4a6e;
    box-shadow:
        0 4px 16px rgba(14, 165, 233, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Mid Office — soft lavender → periwinkle mist */
.aznar-draft-office-tab--mid {
    background: linear-gradient(
        118deg,
        rgba(237, 233, 254, 0.95) 0%,
        rgba(221, 214, 254, 0.55) 32%,
        rgba(224, 231, 255, 0.75) 62%,
        rgba(245, 243, 255, 0.98) 100%
    );
    border-color: rgba(167, 139, 250, 0.35);
    color: #334155;
    box-shadow: 0 1px 3px rgba(91, 33, 182, 0.05);
}

.aznar-draft-office-tab--mid.is-active {
    background: linear-gradient(
        118deg,
        #ddd6fe 0%,
        #e9d5ff 35%,
        #c7d2fe 68%,
        #e0e7ff 100%
    );
    border-color: rgba(139, 92, 246, 0.42);
    color: #4c1d95;
    box-shadow:
        0 4px 16px rgba(139, 92, 246, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Back Office — warm sand → blush (calm, low contrast) */
.aznar-draft-office-tab--back {
    background: linear-gradient(
        120deg,
        rgba(254, 243, 199, 0.85) 0%,
        rgba(253, 230, 138, 0.45) 30%,
        rgba(254, 215, 170, 0.55) 58%,
        rgba(255, 237, 213, 0.92) 100%
    );
    border-color: rgba(251, 191, 36, 0.38);
    color: #431407;
    box-shadow: 0 1px 3px rgba(180, 83, 9, 0.06);
}

.aznar-draft-office-tab--back.is-active {
    background: linear-gradient(
        120deg,
        #fde68a 0%,
        #fcd34d 28%,
        #fdba74 58%,
        #fecaca 100%
    );
    border-color: rgba(245, 158, 11, 0.48);
    color: #7c2d12;
    box-shadow:
        0 4px 16px rgba(245, 158, 11, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

@media (hover: hover) {
    .aznar-draft-office-tab:hover:not(.is-active) {
        transform: translateY(-1px);
        filter: brightness(1.02);
    }
}

.aznar-draft-office-tab:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.aznar-draft-office-tab-panels {
    position: relative;
}

.aznar-draft-office-merged-block {
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    transition:
        background 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.aznar-draft-office-merged-block[data-draft-office-panel="front"] {
    background: linear-gradient(
        165deg,
        rgba(240, 249, 255, 0.95) 0%,
        rgba(236, 254, 255, 0.65) 45%,
        rgba(248, 250, 252, 1) 100%
    );
    border-color: rgba(186, 230, 253, 0.65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.aznar-draft-office-merged-block[data-draft-office-panel="mid"] {
    background: linear-gradient(
        165deg,
        rgba(245, 243, 255, 0.98) 0%,
        rgba(237, 233, 254, 0.55) 42%,
        rgba(248, 250, 252, 1) 100%
    );
    border-color: rgba(196, 181, 253, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.aznar-draft-office-merged-block[data-draft-office-panel="back"] {
    background: linear-gradient(
        165deg,
        rgba(255, 251, 235, 0.98) 0%,
        rgba(254, 243, 199, 0.5) 40%,
        rgba(255, 247, 237, 1) 100%
    );
    border-color: rgba(253, 186, 116, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.aznar-draft-office-merged-block[hidden] {
    display: none !important;
}

.aznar-draft-port-strip {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    margin-bottom: 16px;
    padding: 14px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Round trip: emphasize origin ↔ destination pairing */
.aznar-draft-port-strip.aznar-draft-port-strip--round-itin {
    border-color: #7dd3fc;
    background: linear-gradient(165deg, #ecfeff 0%, #f0fdf4 38%, #ffffff 100%);
    box-shadow:
        0 0 0 1px rgba(14, 165, 233, 0.14),
        0 4px 18px rgba(14, 165, 233, 0.1);
}

.aznar-draft-port-strip--round-itin .aznar-draft-port-strip-inner > .aznar-draft-port-field > span {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    background: linear-gradient(100deg, #0369a1 0%, #0d9488 52%, #059669 100%);
    color: #f8fafc;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(3, 105, 161, 0.28);
}

.aznar-draft-port-strip--round-itin .aznar-draft-port-strip-inner > .aznar-draft-port-field select,
.aznar-draft-port-strip--round-itin .aznar-draft-port-strip-inner > .aznar-draft-port-field input[type="text"] {
    border-color: #38bdf8;
    color: #0c4a6e;
    font-weight: 600;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.aznar-draft-port-strip--round-itin .aznar-draft-port-strip-inner > .aznar-draft-port-field input[readonly] {
    background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%);
    color: #0f766e;
    border-color: #2dd4bf;
}

.aznar-draft-port-tab-row {
    margin-bottom: 12px;
}

.content-panel.content-panel-aznar-draft .aznar-draft-port-origin-tabs.aznar-schedule-tabs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
}

.content-panel.content-panel-aznar-draft .aznar-draft-port-origin-tabs .aznar-schedule-tab {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    background: #f1f5f9;
    border: 2px solid #cbd5e1;
    color: #475569;
    animation: none;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.content-panel.content-panel-aznar-draft .aznar-draft-port-origin-tabs .aznar-schedule-tab:hover:not(.is-active) {
    background: #e8eef5;
    border-color: #94a3b8;
    color: #334155;
}

.content-panel.content-panel-aznar-draft .aznar-draft-port-origin-tabs .aznar-schedule-tab.is-active {
    background: #0369a1;
    border-color: #075985;
    color: #f8fafc;
    animation: none;
    box-shadow: 0 2px 10px rgba(7, 89, 133, 0.38);
}

.content-panel.content-panel-aznar-draft .aznar-draft-port-origin-tabs .aznar-schedule-tab:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.aznar-draft-port-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 20px;
}

.aznar-draft-port-strip-row {
    width: 100%;
}

.aznar-draft-port-field--date input[type="date"] {
    width: 100%;
    max-width: 320px;
    padding: 9px 11px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    background: #fff;
    font-family: inherit;
}

.aznar-draft-port-field--date input[type="date"]:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* Cebu Pacific–style fare calendar bar */
.aznar-draft-avail-date-bar.aznar-draft-fare-calendar {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.aznar-draft-fare-calendar .aznar-draft-date-strip-wrap {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    mask-image: none;
}

.aznar-draft-fare-calendar .aznar-draft-date-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: max-content;
    min-height: 76px;
}

.aznar-draft-fare-calendar .aznar-draft-date-scroll {
    flex-shrink: 0;
    align-self: stretch;
    width: 40px;
    min-height: 76px;
    border: none;
    border-radius: 0;
    background: #ffffff;
    color: #2563eb;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s ease;
}

.aznar-draft-fare-calendar .aznar-draft-date-scroll:first-of-type {
    border-right: 1px solid #e5e7eb;
}

.aznar-draft-fare-calendar .aznar-draft-date-scroll:last-of-type {
    border-left: 1px solid #e5e7eb;
}

.aznar-draft-fare-calendar .aznar-draft-date-scroll:hover {
    background: #f3f4f6;
    color: #1d4ed8;
}

.aznar-draft-fare-date-cell {
    flex: 0 0 auto;
    min-width: 96px;
    max-width: 120px;
    padding: 10px 10px 12px;
    border: none;
    border-right: 1px solid #e5e7eb;
    border-radius: 0;
    background: #ffffff;
    cursor: pointer;
    text-align: center;
    transition: background 0.12s ease;
}

.aznar-draft-fare-date-cell:last-child {
    border-right: none;
}

.aznar-draft-fare-date-cell:hover:not(.is-active) {
    background: #f9fafb;
}

.aznar-draft-fare-date-cell.is-active {
    background: #ffd400;
    position: relative;
    z-index: 1;
}

.aznar-draft-fare-date-label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.35;
    margin: 0 0 8px;
    white-space: nowrap;
}

.aznar-draft-fare-date-cell.is-active .aznar-draft-fare-date-label {
    color: #57534e;
    font-weight: 500;
}

.aznar-draft-fare-date-price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    white-space: nowrap;
}

.aznar-draft-fare-date-cell.is-active .aznar-draft-fare-date-price {
    color: #1e3a8a;
}

.aznar-draft-fare-date-price--muted {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.aznar-draft-fare-date-cell[data-draft-date-today="1"]:not(.is-active) {
    box-shadow: inset 0 -2px 0 #2563eb;
}

.aznar-draft-avail-date-selected {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #0369a1;
}

.aznar-draft-port-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
    flex: 1 1 200px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.aznar-draft-port-field span {
    letter-spacing: 0.02em;
}

.aznar-draft-port-field select,
.aznar-draft-port-field input[type="text"] {
    width: 100%;
    max-width: 320px;
    padding: 9px 11px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    background: #fff;
}

.aznar-draft-port-field select:focus,
.aznar-draft-port-field input[type="text"]:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.aznar-draft-port-field input[readonly] {
    background: #f1f5f9;
    color: #334155;
    cursor: default;
}

.aznar-draft-itinerary-fieldset {
    margin: 14px 0 0;
    padding: 0;
    border: none;
    width: 100%;
    flex: 1 1 100%;
}

.aznar-draft-itinerary-fieldset legend {
    padding: 0;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

.aznar-draft-itinerary-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Distinct manual search control beside itinerary tabs (backup refresh) */
.aznar-draft-itinerary-toggle .aznar-draft-avail-search-btn {
    margin-left: 6px;
    padding-left: 14px;
    border-left: 2px dashed #94a3b8;
}

.aznar-draft-avail-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 18px;
    border: 2px solid #0d9488;
    border-radius: 14px;
    background: linear-gradient(145deg, #ecfdf5 0%, #a7f3d0 55%, #5eead4 100%);
    color: #115e59;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 0 0 3px rgba(13, 148, 136, 0.18),
        0 6px 18px rgba(13, 148, 136, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.aznar-draft-avail-search-btn .fa-search {
    font-size: 17px;
    color: #0f766e;
}

.aznar-draft-avail-search-btn-label {
    line-height: 1;
}

.aznar-draft-avail-search-btn:hover {
    transform: translateY(-1px);
    border-color: #0f766e;
    background: linear-gradient(145deg, #d1fae5 0%, #6ee7b7 50%, #2dd4bf 100%);
    color: #134e4a;
    box-shadow:
        0 0 0 4px rgba(13, 148, 136, 0.28),
        0 8px 22px rgba(13, 148, 136, 0.3);
}

.aznar-draft-avail-search-btn:focus-visible {
    outline: 3px solid #14b8a6;
    outline-offset: 2px;
}

.aznar-draft-avail-search-btn.is-busy {
    pointer-events: none;
    opacity: 0.88;
}

.aznar-draft-avail-search-btn.is-busy .fa-search {
    animation: aznarDraftAvailSearchSpin 0.65s linear infinite;
}

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

.aznar-draft-itinerary-hint {
    margin-top: 10px !important;
    max-width: 720px;
}

/* Cargo & Vehicle Reservation (Cargoes only itinerary) */
.aznar-draft-cargo-menu {
    margin: 16px 0 0;
    padding: 18px 18px 10px;
    border-radius: 14px;
    border: 1px solid #bae6fd;
    background: linear-gradient(165deg, #f0f9ff 0%, #ecfdf5 48%, #f8fafc 100%);
    box-shadow: 0 4px 18px rgba(14, 116, 144, 0.08);
}

.aznar-draft-cargo-menu-head {
    margin-bottom: 14px;
}

.aznar-draft-cargo-menu-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aznar-draft-cargo-menu-title i {
    font-size: 22px;
    color: #0d9488;
}

.aznar-draft-cargo-menu-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f766e;
    letter-spacing: -0.02em;
}

.aznar-draft-cargo-menu-lead {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    max-width: 820px;
}

.aznar-draft-cargo-acc {
    margin: 0 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.aznar-draft-cargo-acc-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(90deg, #f8fafc 0%, #f0fdfa 100%);
}

.aznar-draft-cargo-acc-summary::-webkit-details-marker {
    display: none;
}

.aznar-draft-cargo-acc[open] > .aznar-draft-cargo-acc-summary {
    border-bottom: 1px solid #e2e8f0;
    color: #0f766e;
}

.aznar-draft-cargo-acc-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.aznar-draft-cargo-acc-title {
    line-height: 1.3;
}

.aznar-draft-cargo-acc-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.aznar-draft-cargo-acc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: none;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: linear-gradient(120deg, #667eea 0%, #764ba2 38%, #38bdf8 72%, #14b8a6 100%);
    background-size: 240% 240%;
    box-shadow:
        0 0 0 1px rgba(102, 126, 234, 0.2),
        0 4px 16px rgba(118, 75, 162, 0.28);
    animation:
        aznarDraftCargoToggleGradient 5s ease-in-out infinite,
        aznarDraftCargoToggleGlow 2.4s ease-in-out infinite;
    pointer-events: none;
}

.aznar-draft-cargo-acc-toggle.is-expanded {
    background: linear-gradient(120deg, #0d9488 0%, #14b8a6 35%, #38bdf8 68%, #818cf8 100%);
    background-size: 240% 240%;
}

.aznar-draft-cargo-acc-toggle-ico {
    font-size: 10px;
    opacity: 0.95;
}

.aznar-draft-cargo-acc-toggle-text {
    line-height: 1.2;
}

@keyframes aznarDraftCargoToggleGradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes aznarDraftCargoToggleGlow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 0 1px rgba(102, 126, 234, 0.22),
            0 4px 14px rgba(102, 126, 234, 0.25);
    }
    50% {
        opacity: 0.94;
        transform: scale(1.03);
        box-shadow:
            0 0 0 2px rgba(56, 189, 248, 0.35),
            0 6px 22px rgba(20, 184, 166, 0.32);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aznar-draft-cargo-acc-toggle {
        animation: none;
    }
}

.aznar-draft-cargo-acc-body {
    padding: 14px 16px 16px;
}

.aznar-draft-cargo-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px 14px;
    margin-bottom: 14px;
}

.aznar-draft-cargo-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.aznar-draft-cargo-form-grid input,
.aznar-draft-cargo-form-grid select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: #0f172a;
}

.aznar-draft-cargo-form-grid input:focus,
.aznar-draft-cargo-form-grid select:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.aznar-draft-cargo-fare-field {
    grid-column: 1 / -1;
}

.aznar-draft-cargo-fare-preview {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #1d4ed8;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
}

.aznar-draft-cargo-add-btn {
    margin-bottom: 12px;
}

.aznar-draft-cargo-table {
    font-size: 12px;
}

.aznar-draft-cargo-empty {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    padding: 16px 8px !important;
}

.aznar-draft-cargo-dash-hint {
    margin: 0 0 12px;
    font-size: 12px;
    color: #64748b;
}

.aznar-draft-cargo-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 12px;
    font-size: 11px;
}

.aznar-draft-cargo-legend-i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.aznar-draft-cargo-legend-i--ok {
    background: #22c55e;
}

.aznar-draft-cargo-legend-i--limited {
    background: #eab308;
}

.aznar-draft-cargo-legend-i--full {
    background: #ef4444;
}

.aznar-draft-cargo-avail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.aznar-draft-cargo-avail-card {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.aznar-draft-cargo-avail-vessel {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.aznar-draft-cargo-avail-vessel i {
    color: #0284c7;
    margin-right: 4px;
}

.aznar-draft-cargo-avail-type {
    margin: 0 0 10px;
    font-size: 11px;
    color: #64748b;
}

.aznar-draft-cargo-avail-subhead {
    margin: 10px 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aznar-draft-cargo-cap-row {
    margin-bottom: 8px;
}

.aznar-draft-cargo-cap-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11px;
    color: #475569;
}

.aznar-draft-cargo-cap-val {
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.aznar-draft-cargo-cap-track {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.aznar-draft-cargo-cap-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
}

.aznar-draft-cargo-cap-fill--ok {
    background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
}

.aznar-draft-cargo-cap-fill--limited {
    background: linear-gradient(90deg, #fde047 0%, #eab308 100%);
}

.aznar-draft-cargo-cap-fill--full {
    background: linear-gradient(90deg, #f87171 0%, #ef4444 100%);
}

.aznar-draft-fare-round {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    text-align: right;
    line-height: 1.35;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
}

.aznar-draft-fare-round-line {
    display: block;
    white-space: nowrap;
}

.aznar-draft-fare-round-k {
    color: #64748b;
    font-weight: 600;
    margin-right: 4px;
}

.aznar-draft-avail-td-fare {
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.aznar-draft-port-hint {
    flex: 1 1 100%;
    margin: 0;
    padding-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: #64748b;
    font-weight: 400;
}

.aznar-draft-office-detail-title {
    margin: 0 0 10px;
    font-size: 15px;
    color: #0f172a;
}

.aznar-draft-office-links {
    margin: 0;
    padding-left: 1.1rem;
    color: #475569;
    line-height: 1.65;
}

.aznar-draft-office-links li {
    margin-bottom: 6px;
}

.aznar-draft-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.aznar-draft-card {
    grid-column: span 12;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .aznar-draft-card:hover {
        box-shadow: 0 8px 24px rgba(14, 165, 233, 0.12);
        transform: translateY(-2px);
    }
}

@media (min-width: 900px) {
    .aznar-draft-card--wide {
        grid-column: span 12;
    }
    .aznar-draft-card:not(.aznar-draft-card--wide):not(.aznar-draft-card--chart):not(.aznar-draft-card--expense) {
        grid-column: span 6;
    }
    .aznar-draft-card--chart {
        grid-column: span 6;
    }
    .aznar-draft-card--expense {
        grid-column: span 12;
    }
}

@media (min-width: 1100px) {
    .aznar-draft-card:not(.aznar-draft-card--wide):not(.aznar-draft-card--chart):not(.aznar-draft-card--expense) {
        grid-column: span 6;
    }
    .aznar-draft-card--chart {
        grid-column: span 6;
    }
}

.aznar-draft-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.aznar-draft-card-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
}

.aznar-draft-card-head .fas {
    color: #0ea5e9;
}

.aznar-draft-card-desc {
    margin: 0 0 12px;
    font-size: 13px;
    color: #64748b;
}

.aznar-draft-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    -webkit-overflow-scrolling: touch;
}

.content-panel.content-panel-aznar-draft .aznar-draft-avail-route-table {
    min-width: 620px;
}

.content-panel.content-panel-aznar-draft .aznar-draft-avail-route-table-wrap {
    border-radius: 0;
    border: none;
    border-top: 1px solid #e8edf2;
}

/* Availability — grouped by canonical origin port (schedule style inspired by aznarshipping.ph) */
.aznar-draft-availability-wrap {
    border: none;
    overflow-x: visible;
    min-width: 0;
}

.aznar-draft-availability-mount {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@keyframes aznar-draft-blink-soft {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.45); }
    50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(14, 165, 233, 0); }
}

.aznar-draft-round-picker {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.aznar-draft-round-picker-lead {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.55;
    color: #475569;
}

.aznar-draft-round-picker-section {
    margin: 0;
}

.aznar-draft-round-subh {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.aznar-draft-round-price-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    color: #0f172a;
    user-select: none;
}

.aznar-draft-round-price-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

@keyframes aznar-draft-tick-square-pulse {
    0%,
    100% {
        border-color: #0ea5e9;
        background: #f0f9ff;
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.45);
    }
    50% {
        border-color: #14b8a6;
        background: #ecfdf5;
        box-shadow: 0 0 0 5px rgba(14, 165, 233, 0);
    }
}

/* Square selection box beside fare (Round trip leg picker) */
.aznar-draft-tick-blink {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-height: 22px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 5px;
    border: 2px solid #0ea5e9;
    background: #f8fafc;
    animation: aznar-draft-tick-square-pulse 1.05s ease-in-out infinite;
}

.aznar-draft-round-price-label:has(input:checked) .aznar-draft-tick-blink {
    animation: none;
    border-color: #047857;
    background: linear-gradient(145deg, #0d9488, #059669);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}

.aznar-draft-round-price-label:has(input:checked) .aznar-draft-tick-blink::after {
    content: '\2713';
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.aznar-draft-round-price-amount {
    white-space: nowrap;
}

.aznar-draft-round-fare-locked {
    font-weight: 600;
    color: #94a3b8;
}

/* Round trip → pick origin port (modal reminder) */
@keyframes aznar-draft-rt-rem-fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes aznar-draft-rt-rem-border-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes aznar-draft-rt-rem-msg-glow {
    0%,
    100% {
        color: #0369a1;
        text-shadow: 0 0 0 rgba(14, 165, 233, 0);
    }
    50% {
        color: #0d9488;
        text-shadow: 0 0 12px rgba(14, 165, 233, 0.45);
    }
}

@keyframes aznar-draft-rt-rem-card-pop {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.aznar-draft-rt-rem-overlay {
    position: fixed;
    inset: 0;
    z-index: 12100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: aznar-draft-rt-rem-fadein 0.22s ease-out;
    box-sizing: border-box;
}

.aznar-draft-rt-rem-card {
    max-width: 400px;
    width: 100%;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(125deg, #0ea5e9, #22c55e, #6366f1, #0ea5e9);
    background-size: 280% 280%;
    animation: aznar-draft-rt-rem-border-flow 2.8s ease-in-out infinite;
    box-shadow:
        0 4px 6px rgba(14, 165, 233, 0.15),
        0 28px 56px rgba(15, 23, 42, 0.28);
}

.aznar-draft-rt-rem-card-inner {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 24px 22px 20px;
    text-align: center;
    animation: aznar-draft-rt-rem-card-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.aznar-draft-rt-rem-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #e0f2fe 0%, #d1fae5 100%);
    color: #0369a1;
    font-size: 1.35rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.aznar-draft-rt-rem-title {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.aznar-draft-rt-rem-msg {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
    font-weight: 500;
}

.aznar-draft-rt-rem-msg-blink {
    font-weight: 800;
    animation: aznar-draft-rt-rem-msg-glow 1.25s ease-in-out infinite;
}

.aznar-draft-rt-rem-btn {
    min-width: 140px;
    border-radius: 10px;
    font-weight: 700;
    padding: 10px 22px;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .aznar-draft-rt-rem-overlay,
    .aznar-draft-rt-rem-card,
    .aznar-draft-rt-rem-card-inner,
    .aznar-draft-rt-rem-msg-blink {
        animation: none;
    }

    .aznar-draft-rt-rem-card-inner {
        opacity: 1;
        transform: none;
    }
}

.aznar-draft-round-summary-wrap {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #cbd5e1;
}

.aznar-draft-round-summary-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 14px 16px;
    max-width: 640px;
}

.aznar-draft-round-summary-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.aznar-draft-round-summary-list {
    margin: 0 0 12px;
    padding-left: 1.15rem;
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
}

.aznar-draft-round-summary-list li {
    margin-bottom: 6px;
}

.aznar-draft-round-proceed-blink {
    animation: aznar-draft-blink-soft 1.05s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .aznar-draft-tick-blink,
    .aznar-draft-round-proceed-blink {
        animation: none;
    }
}

.aznar-draft-avail-group {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #e8edf2;
    background: #fff;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
}

/* Availability origin bars — horizontal fading gradients (matches PHCash transfer-style bars) */
.aznar-draft-avail-origin-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 9px 15px;
    min-height: 38px;
    border-radius: 0;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 1px 2px rgba(15, 23, 42, 0.06);
}

.aznar-draft-avail-origin-bar-icon {
    flex-shrink: 0;
    width: 1.35rem;
    text-align: center;
    font-size: 1.05rem;
    color: #ffffff;
    opacity: 0.98;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.aznar-draft-avail-origin-bar-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

.aznar-draft-avail-origin-bar-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.aznar-draft-avail-origin-bar-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    max-width: 100%;
    word-break: break-word;
}

@keyframes aznar-draft-origin-port-blink {
    0%,
    40% {
        opacity: 1;
    }
    50%,
    90% {
        opacity: 0.38;
    }
    100% {
        opacity: 1;
    }
}

.aznar-draft-avail-origin-bar-text--pulse {
    animation: aznar-draft-origin-port-blink 2.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .aznar-draft-avail-origin-bar-text--pulse {
        animation: none;
        opacity: 1;
    }
}

/* Purple → teal (Transfer Amount style) */
.aznar-draft-avail-origin-bar--grad1 {
    background: linear-gradient(
        90deg,
        #9333ea 0%,
        #8b5cf6 12%,
        #7c3aed 26%,
        #6d28d9 38%,
        #5b7cfa 52%,
        #22d3bb 74%,
        #14b8a6 88%,
        #0d9488 100%
    );
}

/* Royal blue → crimson (Philippine flag–inspired / Cash Out style) */
.aznar-draft-avail-origin-bar--grad2 {
    background: linear-gradient(
        90deg,
        #0038a8 0%,
        #1e40af 14%,
        #2563eb 32%,
        #4f6bcc 48%,
        #c2415c 62%,
        #dc2626 78%,
        #ce1126 92%,
        #9f1239 100%
    );
}

/* Emerald → forest green (Cash In style) */
.aznar-draft-avail-origin-bar--grad3 {
    background: linear-gradient(
        90deg,
        #4ade80 0%,
        #34d399 14%,
        #10b981 32%,
        #059669 54%,
        #047857 72%,
        #065f46 88%,
        #064e3b 100%
    );
}


.aznar-draft-avail-route-table {
    margin: 0;
    border-radius: 0;
}

.aznar-draft-avail-route-table thead th {
    background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

.aznar-draft-avail-th-meta,
.aznar-draft-avail-td-meta {
    white-space: nowrap;
    font-size: 12px;
}

.aznar-draft-avail-status-cell {
    white-space: normal;
    vertical-align: middle;
}

.aznar-draft-avail-status-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.aznar-draft-reserve-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
}

.aznar-draft-reserve-btn--disabled,
.aznar-draft-reserve-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}

.aznar-draft-fare-past {
    display: inline-block;
    min-width: 1.25em;
    color: #94a3b8;
    font-weight: 500;
    text-align: center;
}

.aznar-draft-avail-row--past td {
    color: #94a3b8;
}

.aznar-draft-avail-row--past .aznar-draft-avail-td-fare {
    color: #cbd5e1;
}

.aznar-draft-status--past {
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
}

@media (max-width: 720px) {
    .aznar-draft-avail-th-meta,
    .aznar-draft-avail-td-meta {
        font-size: 11px;
    }
}

.aznar-draft-table-wrap--short {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 12px;
}

.aznar-draft-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.aznar-draft-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0;
}

.aznar-draft-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.aznar-draft-table--compact td {
    padding: 8px 10px;
}

.aznar-draft-empty {
    color: #94a3b8;
    font-style: italic;
}

.aznar-draft-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.aznar-draft-status--ok {
    background: #dcfce7;
    color: #166534;
}

.aznar-draft-status--full {
    background: #fee2e2;
    color: #991b1b;
}

.aznar-draft-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 600;
}

.aznar-draft-form {
    display: grid;
    gap: 10px;
}

.aznar-draft-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.aznar-draft-form input[type="text"],
.aznar-draft-form input[type="number"],
.aznar-draft-form input[type="date"] {
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
}

.aznar-draft-pay-fieldset {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
}

.aznar-draft-pay-fieldset legend {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.aznar-draft-radio {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    font-weight: 500;
}

.aznar-draft-form-note {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.aznar-draft-toggle-group {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.aznar-draft-period-btn {
    flex: 1;
    padding: 8px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    color: #64748b;
    transition: all 0.15s ease;
}

.aznar-draft-period-btn.is-active {
    border-color: #059669;
    background: #ecfdf5;
    color: #047857;
}

.aznar-draft-chart {
    min-height: 130px;
    margin-bottom: 8px;
}

.aznar-draft-svg {
    width: 100%;
    height: auto;
    display: block;
}

.aznar-draft-chart-label {
    font-size: 8px;
    fill: #64748b;
    text-anchor: middle;
}

.aznar-draft-sales-meta {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
}

.aznar-draft-export-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aznar-draft-expense-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.aznar-draft-expense-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.aznar-draft-expense-filters input,
.aznar-draft-expense-filters select {
    padding: 8px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}

.aznar-draft-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.aznar-draft-mini-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}

.aznar-draft-mini-card--accent {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%);
    border-color: #a7f3d0;
}

.aznar-draft-mini-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.aznar-draft-mini-card strong {
    font-size: 1.35rem;
    color: #0f172a;
}

.aznar-draft-footer-note {
    margin-top: 20px;
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 12px;
    color: #92400e;
}

/* Aznar Teller counter — Draft: narrow screens & touch (pricing tables + fare calendar) */
@media (max-width: 900px) {
    .content-panel.content-panel-aznar-draft .aznar-draft-grid {
        gap: 12px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-card {
        min-width: 0;
        padding: 14px 12px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-card-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-card-head h3 {
        font-size: 16px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-card-head .aznar-draft-open-live {
        width: 100%;
        justify-content: center;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-topnav-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-profile {
        min-width: 0;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .content-panel.content-panel-aznar-draft .aznar-draft-dashboard {
        padding: 0 0 18px;
        font-size: 13px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-office-merged {
        padding: 12px 10px 14px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-port-strip {
        padding: 12px 10px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-itinerary-toggle .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-itinerary-toggle .aznar-draft-avail-search-btn {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: 4px;
        padding-left: 18px;
        border-left: none;
        border-top: 2px dashed #94a3b8;
        padding-top: 12px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-fare-calendar .aznar-draft-fare-date-cell {
        min-width: 72px;
        max-width: 100px;
        padding: 8px 6px 10px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-fare-calendar .aznar-draft-date-scroll {
        width: 44px;
        min-width: 44px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-fare-date-label {
        font-size: 11px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-fare-date-price {
        font-size: 12px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-fare-date-price--muted {
        font-size: 11px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-round-price-label {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-avail-route-table {
        min-width: 560px;
        font-size: 12px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-avail-route-table thead th,
    .content-panel.content-panel-aznar-draft .aznar-draft-table.aznar-draft-avail-route-table td {
        padding: 8px 10px;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-reserve-btn {
        min-height: 40px;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .content-panel.content-panel-aznar-draft .aznar-draft-port-field {
        flex: 1 1 100%;
        min-width: 0;
    }

    .content-panel.content-panel-aznar-draft .aznar-draft-port-field select,
    .content-panel.content-panel-aznar-draft .aznar-draft-port-field input[type="text"],
    .content-panel.content-panel-aznar-draft .aznar-draft-port-field--date input[type="date"] {
        max-width: none;
    }
}

@media print {
    .sidebar,
    .content-header-actions,
    .aznar-draft-office-switch,
    .aznar-draft-export-row,
    #aznarDraftExpenseQuickAdd {
        display: none !important;
    }
    .aznar-draft-card {
        break-inside: avoid;
    }
}

.phcash-aznar-teller-display-mode-strip {
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #fef3c7;
    border: 2px solid #f59e0b;
    border-radius: 8px;
    color: #92400e;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    animation: phcashAznarDisplayModeBlink 1.15s ease-in-out infinite;
}

@keyframes phcashAznarDisplayModeBlink {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35);
    }
    50% {
        opacity: 0.88;
        box-shadow: 0 0 14px 3px rgba(245, 158, 11, 0.4);
    }
}

.phcash-aznar-pending-pay-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10030;
    padding: 10px 12px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f1f5f9;
    border-top: 2px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}

.phcash-aznar-pending-pay-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.phcash-aznar-pending-pay-text {
    flex: 1 1 220px;
    font-size: 14px;
    line-height: 1.45;
}

.phcash-aznar-pending-pay-text strong {
    color: #7dd3fc;
}

.phcash-aznar-pending-pay-banner .btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

@media (max-width: 540px) {
    .phcash-aznar-pending-pay-inner {
        flex-direction: column;
        align-items: stretch;
    }
}

.aznar-booking-tab {
    border: 1px solid #dbeafe;
    background: #f8fbff;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.aznar-booking-tab-title {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aznar-booking-passengers-mount {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aznar-booking-passengers-hint {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.aznar-booking-passenger-grid {
    display: grid;
    grid-template-columns: minmax(8rem, 0.9fr) 1.15fr minmax(4rem, 0.5fr) 1.15fr minmax(11rem, 1.1fr);
    gap: 12px;
    align-items: end;
}

@media (max-width: 720px) {
    .aznar-booking-passenger-grid {
        grid-template-columns: 1fr 1fr;
    }

    .aznar-booking-passenger-field--mi {
        grid-column: span 1;
    }
}

.aznar-booking-passenger-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.aznar-booking-passenger-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.aznar-booking-passenger-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    min-height: 42px;
    box-sizing: border-box;
    background: #fff;
}

.aznar-booking-passenger-input:focus {
    outline: none;
    border-color: #0ea5e9;
}

@keyframes aznar-booking-field-blink {
    0%,
    100% {
        border-color: #dc2626;
        box-shadow: 0 0 0 1px #dc2626;
    }

    50% {
        border-color: #fca5a5;
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35);
    }
}

.aznar-booking-field-needs-input {
    animation: aznar-booking-field-blink 1s ease-in-out infinite;
}

.aznar-booking-passenger-form-actions {
    margin-top: 10px;
}

.aznar-booking-passenger-save--attention {
    animation: aznar-booking-save-pulse 0.55s ease-in-out 4;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.45);
}

@keyframes aznar-booking-save-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

.aznar-booking-passengers-saved-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.aznar-booking-passenger-saved-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 6px;
    font-size: 0.82rem;
}

.aznar-booking-passenger-saved-num {
    font-weight: 700;
    color: #0369a1;
    flex-shrink: 0;
}

.aznar-booking-passenger-saved-name {
    color: #1e293b;
    line-height: 1.35;
}

.aznar-booking-passenger-add-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
}

.aznar-booking-passenger-add-hint {
    margin: 0;
    font-size: 0.84rem;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1.4;
    max-width: 100%;
}

.aznar-booking-passenger-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #0ea5e9;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0369a1;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.aznar-booking-passenger-add-btn:hover {
    background: #bae6fd;
    transform: scale(1.05);
}

.aznar-booking-passenger-add-btn:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 2px;
}

.aznar-booking-itinerary {
    border: 1px solid #c7d2fe;
    background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
}

.aznar-booking-itinerary-title {
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 8px;
}

.aznar-booking-itinerary-line,
.aznar-booking-itinerary-summary {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    line-height: 1.35;
    color: #0f172a;
    flex-wrap: wrap;
}

.aznar-booking-itinerary-line {
    margin-bottom: 6px;
}

.aznar-booking-itinerary-summary {
    border-top: 1px dashed #94a3b8;
    padding-top: 7px;
    font-weight: 800;
}

.aznar-booking-itinerary-line span:last-child,
.aznar-booking-itinerary-summary span:last-child {
    text-align: right;
    word-break: break-word;
}

.aznar-booking-pricing-block {
    margin: 8px 0 4px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #c7d2fe;
    background: rgba(255, 255, 255, 0.75);
}

.aznar-booking-pricing-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4338ca;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.aznar-booking-pricing-row {
    display: grid;
    grid-template-columns: minmax(76px, 100px) min-content 1fr;
    gap: 6px 10px;
    align-items: start;
    font-size: 12px;
    line-height: 1.4;
    color: #0f172a;
    margin-bottom: 6px;
}

.aznar-booking-pricing-row:last-child {
    margin-bottom: 0;
}

.aznar-booking-pricing-k {
    font-weight: 800;
    color: #334155;
}

.aznar-booking-pricing-eq {
    font-weight: 700;
    color: #94a3b8;
    padding-top: 1px;
}

.aznar-booking-pricing-amt {
    font-weight: 700;
    text-align: right;
    word-break: break-word;
    min-width: 0;
}

@media (max-width: 480px) {
    .aznar-booking-pricing-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .aznar-booking-pricing-eq {
        display: none;
    }
    .aznar-booking-pricing-amt {
        text-align: left;
        padding-left: 2px;
    }
}

/* Aznar modern all-schedule layout */
.aznar-all-schedule-wrap,
.aznar-all-schedule-wrap * {
    box-sizing: border-box;
}

.aznar-all-schedule-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Keep tabs/controls contained within the Aznar panel */
.aznar-all-schedule-wrap .aznar-modern-hero,
.aznar-all-schedule-wrap .aznar-schedule-card,
.aznar-all-schedule-wrap .aznar-modern-popular-block,
.aznar-all-schedule-wrap .aznar-modern-card {
    overflow: hidden;
}

.aznar-all-schedule-wrap .aznar-modern-hero-form,
.aznar-all-schedule-wrap .aznar-modern-search-grid,
.aznar-all-schedule-wrap .aznar-modern-itinerary-row,
.aznar-all-schedule-wrap .aznar-itinerary-toggle,
.aznar-all-schedule-wrap .aznar-popular-routes-list,
.aznar-all-schedule-wrap .aznar-schedule-tabs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.aznar-all-schedule-wrap .aznar-itinerary-toggle .btn,
.aznar-all-schedule-wrap .aznar-popular-route-card,
.aznar-all-schedule-wrap .aznar-schedule-tab {
    max-width: 100%;
}

.aznar-all-schedule-wrap .aznar-schedule-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
}

.aznar-all-schedule-wrap .aznar-schedule-tab {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.aznar-all-schedule-wrap .aznar-popular-route-title,
.aznar-all-schedule-wrap .aznar-popular-route-sub {
    max-width: 100%;
}

@keyframes aznarPhBorderBlink {
    0% {
        border-color: #0038a8;
        box-shadow: 0 0 0 1px rgba(0, 56, 168, 0.25), 0 0 8px rgba(0, 56, 168, 0.22);
    }
    33% {
        border-color: #ce1126;
        box-shadow: 0 0 0 1px rgba(206, 17, 38, 0.22), 0 0 8px rgba(206, 17, 38, 0.2);
    }
    66% {
        border-color: #fcd116;
        box-shadow: 0 0 0 1px rgba(252, 209, 22, 0.28), 0 0 8px rgba(252, 209, 22, 0.24);
    }
    100% {
        border-color: #ffffff;
        box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.85), 0 0 8px rgba(148, 163, 184, 0.22);
    }
}

.aznar-all-schedule-wrap .aznar-modern-hero {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 55%, #eef2ff 100%);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
    color: #0f172a;
    border: 2px solid #0038a8;
    animation: aznarPhBorderBlink 3.8s linear infinite;
}
.aznar-all-schedule-wrap .aznar-modern-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

/* Admin action controls in hero header must stay inside panel */
.aznar-all-schedule-wrap .aznar-schedule-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}

.aznar-all-schedule-wrap .aznar-schedule-head-actions .btn,
.aznar-all-schedule-wrap #aznarScheduleEditBtn {
    margin: 0;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.25;
}
.aznar-all-schedule-wrap .aznar-modern-title-row h4 {
    margin: 0;
    font-size: 22px;
}
.aznar-all-schedule-wrap .aznar-modern-sub {
    margin: 8px 0 12px;
    color: #475569;
}
.aznar-modern-quick-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.aznar-modern-pill {
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    font-family: inherit;
    cursor: pointer;
}
.aznar-modern-pill.is-active {
    background: #dbeafe;
    color: #1e40af;
}
/* Aznar all-schedules hero: itinerary row + search controls row */
.aznar-modern-hero-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.aznar-modern-itinerary-row {
    width: 100%;
}
.aznar-modern-field--itinerary label {
    margin-bottom: 0;
}
/* Hero search row: port labels need extra min width; compact fields may stay narrower */
.aznar-modern-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
        "passenger motorcycles cars ."
        "origin destination departure search";
    gap: 10px 12px;
    align-items: end;
    width: 100%;
}

.aznar-modern-search-grid > * {
    min-width: 0;
}

.aznar-modern-search-grid .aznar-modern-field--search-passenger {
    grid-area: passenger;
}

.aznar-modern-search-grid .aznar-modern-field--search-motorcycles {
    grid-area: motorcycles;
}

.aznar-modern-search-grid .aznar-modern-field--search-cars {
    grid-area: cars;
}

.aznar-modern-search-grid .aznar-modern-field--search-origin {
    grid-area: origin;
}

.aznar-modern-search-grid .aznar-modern-field--search-destination {
    grid-area: destination;
}

.aznar-modern-search-grid .aznar-modern-field--search-date {
    grid-area: departure;
}

.aznar-modern-search-grid .aznar-modern-search-submit-cell {
    grid-area: search;
}

.aznar-modern-search-submit-cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

.aznar-modern-search-submit-cell .aznar-modern-search-btn {
    width: 100%;
}

/* Laptop-safe layout: explicit flow keeps labels/buttons readable */
@media (max-width: 1600px) {
    .aznar-modern-search-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "passenger motorcycles cars ."
            "origin destination departure search";
        align-items: end;
    }

    .aznar-modern-search-grid .aznar-modern-field--search-passenger {
        grid-area: passenger;
    }

    .aznar-modern-search-grid .aznar-modern-field--search-motorcycles {
        grid-area: motorcycles;
    }

    .aznar-modern-search-grid .aznar-modern-field--search-cars {
        grid-area: cars;
    }

    .aznar-modern-search-grid .aznar-modern-field--search-origin {
        grid-area: origin;
    }

    .aznar-modern-search-grid .aznar-modern-field--search-destination {
        grid-area: destination;
    }

    .aznar-modern-search-grid .aznar-modern-field--search-date {
        grid-area: departure;
    }

    .aznar-modern-search-grid .aznar-modern-search-submit-cell {
        grid-area: search;
        align-self: end;
    }

    .aznar-modern-search-grid .aznar-modern-field--search-date input,
    .aznar-modern-search-grid .aznar-modern-search-submit-cell .aznar-modern-search-btn {
        height: 40px;
        min-height: 40px;
    }

    .aznar-modern-search-grid .aznar-modern-search-submit-cell .aznar-modern-search-btn {
        white-space: nowrap;
    }
}

@media (max-width: 1280px) {
    .aznar-all-schedule-wrap .aznar-modern-title-row {
        align-items: stretch;
    }

    .aznar-all-schedule-wrap .aznar-schedule-head-actions {
        width: 100%;
    }
}

@media (max-width: 1320px) {
    .aznar-modern-search-grid {
        grid-template-columns: repeat(2, minmax(min(100%, clamp(13.75rem, 42vw, 17.75rem)), 1fr));
        grid-template-areas:
            "passenger motorcycles"
            "cars origin"
            "destination departure"
            "search search";
        align-items: end;
    }

    .aznar-modern-search-grid .aznar-modern-search-submit-cell {
        grid-area: search;
        align-self: end;
    }

    .aznar-modern-search-grid .aznar-modern-field--search-date input,
    .aznar-modern-search-grid .aznar-modern-search-submit-cell .aznar-modern-search-btn {
        height: 40px;
        min-height: 40px;
    }

    .aznar-modern-search-grid .aznar-modern-search-submit-cell .aznar-modern-search-btn {
        white-space: nowrap;
    }
}
.aznar-modern-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.aznar-modern-field label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.aznar-all-schedule-wrap .aznar-modern-field--search-port label {
    white-space: normal;
}
.aznar-all-schedule-wrap .aznar-cars-field-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.aznar-all-schedule-wrap .aznar-motorcycle-field-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.aznar-all-schedule-wrap .aznar-cars-field-label--hint {
    cursor: help;
}
.aznar-all-schedule-wrap .aznar-motorcycle-field-label--hint {
    cursor: help;
}
.aznar-all-schedule-wrap .aznar-hover-hint-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: #1d4ed8;
    border: 1px solid rgba(29, 78, 216, 0.45);
    background: rgba(219, 234, 254, 0.75);
}
.aznar-modern-field input,
.aznar-modern-field select {
    width: 100%;
    max-width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 2px solid #0038a8;
    padding: 0 10px;
    background: #fff;
    color: #0f172a;
    animation: aznarPhBorderBlink 3.8s linear infinite;
}

/* Hero search selects + date: animated filter/box-shadow breaks native dropdowns/pickers on Safari & some Chromium builds. */
.aznar-all-schedule-wrap .aznar-modern-field select,
.aznar-all-schedule-wrap .aznar-modern-field input[type="date"] {
    animation: none !important;
    filter: none !important;
}

.aznar-all-schedule-wrap .aznar-modern-search-grid .aznar-modern-field--search-origin,
.aznar-all-schedule-wrap .aznar-modern-search-grid .aznar-modern-field--search-destination {
    position: relative;
    z-index: 4;
}
.aznar-passenger-stepper {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    gap: 6px;
    align-items: center;
}
.aznar-passenger-stepper button {
    border: 2px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 8px;
    height: 38px;
    cursor: pointer;
    font-weight: 800;
}
.aznar-passenger-stepper input {
    text-align: center;
    font-weight: 700;
}
.aznar-itinerary-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
.aznar-itinerary-toggle .btn {
    height: auto;
    min-height: 38px;
    padding: 8px 12px;
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    animation: aznarCalmBlink 5.4s ease-in-out infinite;
}
.aznar-itinerary-toggle .btn-secondary {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    color: #0f172a !important;
}
.aznar-itinerary-toggle .btn-primary {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%) !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(29, 78, 216, 0.28) !important;
}
.aznar-itinerary-toggle .aznar-itinerary-btn-blink {
    border: 2px solid #fcd116 !important;
    background: linear-gradient(90deg, #0038a8 0%, #0038a8 50%, #ce1126 50%, #ce1126 100%) !important;
    background-size: 220% 100% !important;
    color: #ffffff !important;
    animation: aznarReservePhBlink 0.95s ease-in-out infinite, aznarReservePhSlide 1.9s linear infinite !important;
    box-shadow: 0 0 0 2px rgba(252, 209, 22, 0.35), 0 0 14px rgba(206, 17, 38, 0.28) !important;
}

@media (max-width: 1024px) {
    /* Keep itinerary "tabs" readable on tablets */
    .aznar-all-schedule-wrap .aznar-itinerary-toggle .btn {
        white-space: normal;
        word-break: break-word;
        line-height: 1.2;
    }
}
.aznar-modern-search-btn {
    width: 100%;
    max-width: 100%;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    border-radius: 10px;
    border: 2px solid #ce1126;
    animation: aznarCalmBlink 5.4s ease-in-out infinite;
}

.aznar-all-schedule-wrap .aznar-modern-field input:not([type="date"]):not([type="hidden"]),
.aznar-all-schedule-wrap .aznar-time-btn,
.aznar-all-schedule-wrap .aznar-slot-pill,
.aznar-all-schedule-wrap .aznar-price-pill,
.aznar-all-schedule-wrap .aznar-vehicle-price-pill,
.aznar-all-schedule-wrap .aznar-reserve-btn {
    animation: aznarCalmBlink 5.4s ease-in-out infinite;
}

@keyframes aznarCalmBlink {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 2px 8px rgba(15, 23, 42, 0.08);
    }
    50% {
        filter: brightness(1.04);
        box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.26), 0 4px 12px rgba(15, 23, 42, 0.12);
    }
}
.aznar-modern-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
}
.aznar-modern-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.aznar-modern-card {
    background: #f8fafc;
    border: 2px solid #0038a8;
    border-radius: 12px;
    padding: 14px;
    animation: aznarPhBorderBlink 3.8s linear infinite;
}
.aznar-modern-card h5 {
    margin: 0 0 8px 0;
    color: #0f172a;
    font-size: 15px;
}
.aznar-modern-card ul {
    margin: 0;
    padding-left: 16px;
    color: #475569;
}
.aznar-teller-only-card {
    border: 2px solid #0d9488;
    background: linear-gradient(180deg, #ecfdf5 0%, #f8fafc 100%);
    animation: aznarPhBorderBlink 2.8s linear infinite;
}
.aznar-teller-only-card h5 {
    color: #0f766e;
}
.aznar-teller-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.aznar-teller-sales-panel {
    border: 2px dashed #1d4ed8;
    border-radius: 10px;
    padding: 10px;
    background: #ffffff;
    animation: aznarPhBorderBlink 2.2s linear infinite;
}
.aznar-teller-chart-wrap {
    margin-top: 8px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fafc;
    padding: 6px;
}
.aznar-teller-chart-wrap canvas {
    width: 100%;
    display: block;
}
.aznar-admin-teller-table th,
.aznar-admin-teller-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 6px;
    vertical-align: top;
}
.aznar-admin-teller-table th {
    text-align: left;
    background: #f1f5f9;
    font-size: 12px;
    color: #334155;
}

/* Aznar schedule pricing admin: compact name/email/mobile columns + Position/Role */
.admin-aznar-auth-compact textarea {
    width: 100%;
    min-height: 0;
    resize: vertical;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.35;
    padding: 4px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
}
.admin-aznar-auth-compact label {
    font-size: 12px;
}
.admin-aznar-delegate-lines textarea {
    width: 100%;
    min-height: 0;
    resize: vertical;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.35;
    padding: 4px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
}
/* Aznar route editor — hour/min selects stay compact inside the bordered box (not full .form-group width) */
.admin-aznar-depart-times-group .aznar-admin-depart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    justify-content: flex-start;
}
.admin-aznar-depart-times-group .aznar-admin-depart-hour,
.admin-aznar-depart-times-group .aznar-admin-depart-min {
    width: auto !important;
    max-width: 5.75rem;
    min-width: 4.75rem;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 8px 10px !important;
    font-size: 15px !important;
}
.admin-aznar-depart-times-group .aznar-admin-depart-add-btn i {
    pointer-events: none;
}

.admin-aznar-role-select {
    width: 100%;
    max-width: 210px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.25;
    padding: 4px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
}
.admin-aznar-role-col label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

/* Ten single-line rows (First / Last / Mobile / Email / Role) — Aznar admin pricing */
.admin-aznar-inline-auth-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 6px;
    margin-bottom: 4px;
}
.admin-aznar-inline-auth {
    min-width: 540px;
}
.admin-aznar-inline-auth-grid {
    display: grid;
    grid-template-columns: 26px minmax(68px, 1fr) minmax(68px, 1fr) minmax(84px, 0.9fr) minmax(112px, 1.1fr) minmax(140px, 1fr);
    gap: 6px 8px;
    align-items: center;
}
.admin-aznar-inline-auth-head {
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}
.admin-aznar-inline-auth-h {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}
.admin-aznar-inline-auth-row {
    margin-bottom: 2px;
}
.admin-aznar-inline-auth-cell-num {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.admin-aznar-inline-auth-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.3;
    padding: 5px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
}
.admin-aznar-inline-auth .admin-aznar-inline-auth-role,
.admin-aznar-inline-auth .admin-aznar-role-select {
    max-width: none;
    width: 100%;
}

.aznar-modern-subscribe-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.aznar-modern-subscribe-row input {
    flex: 1;
    min-width: 0;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
}
.aznar-modern-mailbox-btn {
    width: 100%;
    margin-top: 10px;
}
.aznar-collapsible-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.aznar-collapse-toggle {
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
}
.aznar-collapse-toggle i {
    margin-right: 4px;
}
.aznar-modern-popular-block {
    margin-top: 12px;
    background: #f8fafc;
    border: 2px solid #0038a8;
    border-radius: 12px;
    padding: 12px;
    animation: aznarPhBorderBlink 3.8s linear infinite;
}
.aznar-modern-popular-block h5 {
    margin: 0 0 10px 0;
    font-size: 15px;
}
.aznar-popular-routes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}
.aznar-popular-route-card {
    border: 1px solid #dbeafe;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.aznar-popular-route-card.is-active {
    border-color: #60a5fa;
    background: #eff6ff;
}
.aznar-popular-route-title {
    font-weight: 700;
    color: #0f172a;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
}
.aznar-popular-route-sub {
    font-size: 12px;
    color: #64748b;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.25;
}
.aznar-popular-route-price {
    font-size: 13px;
    font-weight: 700;
    color: #1d4ed8;
}

/* Aznar Back Office System — Manual & Live (Ferry → Aznar tab) */
.aznar-back-office-panel {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 2px solid #1e3a5f;
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
    box-sizing: border-box;
}
.aznar-back-office-panel--live {
    border-color: #15803d;
    background: linear-gradient(180deg, #f8fafc 0%, #f0fdf4 55%, #eff6ff 100%);
}
.aznar-back-office-head h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}
.aznar-back-office-sub {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
}
.aznar-back-office-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

/* Nested sub-tabs (Manual + Live office layers) */
.aznar-bo-subregion {
    margin-top: 4px;
}
.aznar-bo-subregion-intro {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #334155;
}
.aznar-bo-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.aznar-bo-subtab {
    border: 1px solid #94a3b8;
    background: #ffffff;
    color: #475569;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.25;
}
.aznar-bo-subtab.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
}
.aznar-bo-subpanels {
    min-height: 32px;
}
.aznar-bo-guide-subtabs-overview {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}
.aznar-bo-guide-subtabs-title {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #0f172a;
}
.aznar-bo-guide-subtabs-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
}
.aznar-bo-guide-subtabs-list li {
    margin-bottom: 6px;
}
.aznar-bo-guide-lead--tight {
    margin-bottom: 8px !important;
}
.aznar-bo-manual-subcard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.aznar-bo-manual-subcard h6 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #0f172a;
}
.aznar-bo-manual-subcard-purpose {
    margin: 0 0 8px 0;
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
}
.aznar-bo-manual-subcard-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.45;
    color: #334155;
}
.aznar-bo-manual-finance-sample {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #cbd5e1;
}
.aznar-bo-live-hint {
    margin: 0 0 10px 0;
    font-size: 12px;
    line-height: 1.45;
    color: #166534;
}
.aznar-bo-empty--soft {
    border-style: solid;
    background: #f8fafc;
    color: #475569;
}
.aznar-bo-download-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.aznar-bo-tab {
    border: 2px solid #94a3b8;
    background: #ffffff;
    color: #334155;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.aznar-bo-tab.is-active {
    border-color: #1d4ed8;
    background: #dbeafe;
    color: #1e3a8a;
}
/* Live panel: gradient tabs inspired by transfer/cash-out/cash-in bars */
#aznarBackOfficeLiveMount .aznar-back-office-tabs .aznar-bo-tab {
    border-width: 0;
    color: #f8fafc;
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 14px rgba(15, 23, 42, 0.2);
    transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
    background-size: 170% 170%;
    animation: aznar-bo-live-tab-fade 8s ease-in-out infinite;
}
#aznarBackOfficeLiveMount .aznar-back-office-tabs .aznar-bo-tab:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}
#aznarBackOfficeLiveMount .aznar-back-office-tabs .aznar-bo-tab:nth-child(1) {
    background-image: linear-gradient(120deg, #6f46bb 0%, #6f5dc8 38%, #2b9ca5 100%);
}
#aznarBackOfficeLiveMount .aznar-back-office-tabs .aznar-bo-tab:nth-child(2) {
    background-image: linear-gradient(120deg, #2d57c9 0%, #2d63d8 42%, #ef4444 100%);
}
#aznarBackOfficeLiveMount .aznar-back-office-tabs .aznar-bo-tab:nth-child(3) {
    background-image: linear-gradient(120deg, #0c9a6e 0%, #0f8f69 45%, #0a7e67 100%);
}
#aznarBackOfficeLiveMount .aznar-back-office-tabs .aznar-bo-tab.is-active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.38), 0 10px 20px rgba(15, 23, 42, 0.3);
    filter: saturate(1.09) brightness(1.04);
}
#aznarBackOfficeLiveMount .aznar-bo-subtabs .aznar-bo-subtab {
    background-image: linear-gradient(125deg, #e2e8f0 0%, #f8fafc 50%, #e5edf9 100%);
    border: 1px solid #cbd5e1;
    color: #1e293b;
    animation: aznar-bo-live-subtab-fade 7s ease-in-out infinite;
    background-size: 180% 180%;
}
#aznarBackOfficeLiveMount .aznar-bo-subtabs .aznar-bo-subtab.is-active {
    color: #fff;
    border-color: transparent;
    text-shadow: 0 1px 1px rgba(2, 6, 23, 0.35);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.24);
}
#aznarBackOfficeLiveMount [data-aznar-bo-layer="front"] .aznar-bo-subtab.is-active {
    background-image: linear-gradient(120deg, #6a45ba 0%, #6e60ca 45%, #349da8 100%);
}
#aznarBackOfficeLiveMount [data-aznar-bo-layer="mid"] .aznar-bo-subtab.is-active {
    background-image: linear-gradient(120deg, #2f5fd2 0%, #2c6fdf 42%, #ef4444 100%);
}
#aznarBackOfficeLiveMount [data-aznar-bo-layer="back"] .aznar-bo-subtab.is-active {
    background-image: linear-gradient(120deg, #0d9c72 0%, #118f71 44%, #0d7f68 100%);
}
@keyframes aznar-bo-live-tab-fade {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes aznar-bo-live-subtab-fade {
    0% { background-position: 0% 50%; }
    50% { background-position: 80% 50%; }
    100% { background-position: 0% 50%; }
}
.aznar-bo-tab-panel {
    min-height: 48px;
}
.aznar-bo-empty {
    margin: 0;
    padding: 12px;
    color: #64748b;
    font-size: 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
}
.aznar-bo-guide {
    margin-bottom: 14px;
}
.aznar-bo-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.aznar-bo-guide-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
}
.aznar-bo-guide-card h6 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #0f172a;
}
.aznar-bo-guide-card p {
    margin: 0 0 6px 0;
    font-size: 12px;
    line-height: 1.45;
    color: #334155;
}
.aznar-bo-guide-card p:last-child {
    margin-bottom: 0;
}
.aznar-bo-guide-card--front {
    border-color: #93c5fd;
}
.aznar-bo-guide-card--mid {
    border-color: #fcd34d;
}
.aznar-bo-guide-card--back {
    border-color: #a7f3d0;
}
.aznar-bo-guide-table-wrap {
    margin-bottom: 10px;
}
.aznar-bo-guide-summary {
    margin: 0;
    font-size: 12px;
    color: #334155;
}
.aznar-bo-tab-intro {
    margin: 0 0 10px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #312e81;
    font-size: 12px;
    line-height: 1.4;
}
.aznar-bo-guide-lead {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #1e293b;
}
.aznar-bo-workflow-box {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    line-height: 1.45;
    color: #334155;
}
.aznar-bo-workflow-box--tab {
    margin-top: 0;
    margin-bottom: 14px;
}
.aznar-bo-workflow-box strong {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 13px;
}
.aznar-bo-ordered {
    margin: 0;
    padding-left: 18px;
}
.aznar-bo-ordered li {
    margin-bottom: 4px;
}
.aznar-bo-guide-summary--tight {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}
.aznar-bo-tab-role {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.aznar-bo-tab-role-title {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.aznar-bo-tab-role-sub {
    margin: 0 0 8px 0;
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
}
.aznar-bo-bullet-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
}
.aznar-bo-bullet-list li {
    margin-bottom: 4px;
}
.aznar-bo-sample-caption {
    margin: 16px 0 8px 0;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.aznar-bo-footnote {
    margin: 12px 0 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
}
.aznar-bo-cell-note {
    font-size: 12px;
    color: #475569;
    vertical-align: top;
}
.aznar-bo-live-guide {
    margin: 0 0 12px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #86efac;
    font-size: 12px;
    line-height: 1.45;
    color: #14532d;
}
.aznar-bo-live-tab-lead {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #0f172a;
}
.aznar-bo-manual-live-hint {
    margin: 14px 0 0 0;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #1e3a8a;
    background: #eef2ff;
    border-radius: 8px;
    border: 1px dashed #818cf8;
}
.aznar-bo-manual-live-hint i {
    margin-right: 6px;
    opacity: 0.85;
}
.aznar-bo-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #c7d2fe;
    background: #fff;
}
.aznar-bo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.aznar-bo-table th,
.aznar-bo-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e2e8f0;
}
.aznar-bo-table thead th {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
}
.aznar-bo-table tbody tr:hover {
    background: #fafbff;
}
.aznar-bo-code {
    font-size: 12px;
    color: #1e40af;
    background: #eff6ff;
    padding: 2px 6px;
    border-radius: 4px;
}
.aznar-bo-muted {
    color: #64748b;
    font-size: 12px;
}
.aznar-bo-itin {
    font-size: 13px;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 6px;
}
.aznar-bo-price-line {
    font-size: 12px;
    color: #334155;
}
.aznar-bo-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.aznar-bo-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.aznar-bo-pill--ok {
    background: #dcfce7;
    color: #166534;
}
.aznar-bo-pill--pending {
    background: #ffedd5;
    color: #9a3412;
}
.aznar-bo-ack-btn {
    border: 0;
    margin-left: 6px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(120deg, #dc2626 0%, #f97316 100%);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.25);
}
.aznar-bo-ack-btn i {
    margin-right: 4px;
}
.aznar-bo-ack-btn--blink {
    animation: aznar-bo-ack-btn-blink 1.05s ease-in-out infinite;
}
@keyframes aznar-bo-ack-btn-blink {
    0% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(1.12); transform: scale(1.02); }
    100% { filter: brightness(1); transform: scale(1); }
}
.aznar-bo-admin-pending-alert {
    margin: 0 0 12px 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #fdba74;
    background: linear-gradient(120deg, #fff7ed 0%, #ffedd5 100%);
    color: #9a3412;
    font-size: 13px;
    line-height: 1.45;
    animation: aznar-bo-admin-pending-pulse 1.65s ease-in-out infinite;
}
@keyframes aznar-bo-admin-pending-pulse {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.28); }
    70% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}
.aznar-bo-pill--muted {
    background: #e2e8f0;
    color: #475569;
}
.aznar-bo-mid-entry {
    margin-bottom: 18px;
    padding: 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #bae6fd;
}
.aznar-bo-mid-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.aznar-bo-mid-inv {
    font-weight: 800;
    color: #0c4a6e;
    font-size: 15px;
}
.aznar-bo-mid-route {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
}

/* Aznar — Auditor Insight */
.aznar-auditor-insight-panel {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 2px solid #4c1d95;
    background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 55%, #eef2ff 100%);
    box-sizing: border-box;
}
.aznar-auditor-head h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #1e1b4b;
    display: flex;
    align-items: center;
    gap: 10px;
}
.aznar-auditor-sub {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: #5b21b6;
    line-height: 1.45;
}
.aznar-teller-origin-policy-banner {
    margin: 0 0 14px 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #fdba74;
    background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
    color: #9a3412;
    font-size: 13px;
    line-height: 1.5;
}
.aznar-teller-origin-policy-banner strong {
    color: #7c2d12;
}
.aznar-teller-issuance-monitoring {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #ddd6fe;
}
.aznar-teller-issuance-monitoring-title {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 700;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 8px;
}
.aznar-teller-issuance-monitoring-desc {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #5b21b6;
    line-height: 1.45;
}
.aznar-teller-audit-admin-only {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}
.aznar-teller-audit-table-wrap {
    margin-top: 4px;
}
.aznar-teller-audit-table {
    font-size: 12px;
}
.aznar-teller-audit-table th,
.aznar-teller-audit-table td {
    vertical-align: top;
}
.aznar-aud-compare-note {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #4338ca;
    line-height: 1.5;
}
.aznar-aud-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #ddd6fe;
    border-radius: 10px;
}
.aznar-aud-markup-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #312e81;
}
.aznar-aud-markup-input {
    width: 92px;
    padding: 8px 10px;
    border: 2px solid #c4b5fd;
    border-radius: 8px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.aznar-aud-controls-hint {
    font-size: 12px;
    color: #64748b;
    flex: 1;
    min-width: 140px;
}
.aznar-aud-empty {
    margin-top: 8px !important;
}
.aznar-aud-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #a78bfa;
    background: #fff;
}
.aznar-aud-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.aznar-aud-table th,
.aznar-aud-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #ede9fe;
}
.aznar-aud-table thead th {
    background: #ede9fe;
    color: #3730a3;
    font-weight: 700;
}
.aznar-aud-foot th,
.aznar-aud-foot td {
    background: #f5f3ff;
    border-top: 2px solid #7c3aed;
    border-bottom: none;
    font-weight: 700;
    color: #1e1b4b;
}
.aznar-aud-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.aznar-aud-code {
    font-size: 12px;
    color: #5b21b6;
    background: #f3e8ff;
    padding: 2px 6px;
    border-radius: 4px;
}
.aznar-aud-status-select {
    width: 100%;
    max-width: 220px;
    padding: 6px 8px;
    border: 2px solid #ddd6fe;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}
.aznar-aud-pill-wrap {
    margin-top: 8px;
}
.aznar-aud-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.aznar-aud-pill--active {
    background: #dcfce7;
    color: #166534;
}
.aznar-aud-pill--consumed {
    background: #e2e8f0;
    color: #475569;
}
.aznar-aud-pill--refunded {
    background: #fee2e2;
    color: #991b1b;
}
.aznar-aud-remark {
    width: 100%;
    min-width: 180px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 2px solid #ddd6fe;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 52px;
}
@media (max-width: 1024px) {
    .aznar-modern-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .aznar-modern-search-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        grid-template-areas: none;
    }

    .aznar-modern-search-grid .aznar-modern-field--search-passenger,
    .aznar-modern-search-grid .aznar-modern-field--search-motorcycles,
    .aznar-modern-search-grid .aznar-modern-field--search-cars,
    .aznar-modern-search-grid .aznar-modern-field--search-origin,
    .aznar-modern-search-grid .aznar-modern-field--search-destination,
    .aznar-modern-search-grid .aznar-modern-field--search-date,
    .aznar-modern-search-grid .aznar-modern-search-submit-cell {
        grid-area: auto;
    }

    .aznar-all-schedule-wrap .aznar-modern-search-grid > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .aznar-all-schedule-wrap .aznar-modern-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .aznar-all-schedule-wrap .aznar-time-cell-wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .aznar-all-schedule-wrap .aznar-time-btn,
    .aznar-all-schedule-wrap .aznar-slot-pill,
    .aznar-all-schedule-wrap .aznar-price-pill,
    .aznar-all-schedule-wrap .aznar-vehicle-price-pill,
    .aznar-all-schedule-wrap .aznar-reserve-btn {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Touch-friendly controls (narrow viewports) */
    .aznar-all-schedule-wrap .aznar-modern-field input,
    .aznar-all-schedule-wrap .aznar-modern-field select {
        height: auto;
        min-height: 44px;
    }

    .aznar-all-schedule-wrap .aznar-modern-search-btn {
        min-height: 44px;
    }

    .aznar-all-schedule-wrap .aznar-itinerary-toggle .btn {
        min-height: 44px;
        white-space: normal;
        line-height: 1.2;
        padding: 8px 10px;
    }
}

@keyframes aznarReservePhBlink {
    0% {
        opacity: 0.9;
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    40% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(252, 209, 22, 0.25);
    }
    70% {
        opacity: 0.92;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    }
    100% {
        opacity: 0.9;
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

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

/* Force Aznar all-schedules responsive fit for all users/devices */
@media (max-width: 767px) {
    .aznar-all-schedule-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .aznar-all-schedule-wrap .aznar-modern-hero,
    .aznar-all-schedule-wrap .aznar-schedule-card,
    .aznar-all-schedule-wrap .aznar-modern-popular-block,
    .aznar-all-schedule-wrap .aznar-modern-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .aznar-all-schedule-wrap .aznar-modern-search-grid,
    .aznar-all-schedule-wrap .aznar-modern-grid,
    .aznar-all-schedule-wrap .aznar-modern-subscribe-row {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .aznar-all-schedule-wrap .aznar-modern-search-grid .aznar-modern-search-submit-cell {
        grid-column: auto;
    }

    .aznar-all-schedule-wrap .aznar-modern-search-grid > *,
    .aznar-all-schedule-wrap .aznar-modern-field,
    .aznar-all-schedule-wrap .aznar-modern-search-submit-cell,
    .aznar-all-schedule-wrap .aznar-modern-field input,
    .aznar-all-schedule-wrap .aznar-modern-field select,
    .aznar-all-schedule-wrap .aznar-modern-search-btn,
    .aznar-all-schedule-wrap .aznar-schedule-tab,
    .aznar-all-schedule-wrap .aznar-time-btn,
    .aznar-all-schedule-wrap .aznar-slot-pill,
    .aznar-all-schedule-wrap .aznar-price-pill,
    .aznar-all-schedule-wrap .aznar-reserve-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .aznar-all-schedule-wrap .aznar-schedule-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Make blinking borders visible regardless of role-specific styling */
.aznar-all-schedule-wrap .aznar-modern-hero,
.aznar-all-schedule-wrap .aznar-schedule-card,
.aznar-all-schedule-wrap .aznar-modern-card,
.aznar-all-schedule-wrap .aznar-modern-popular-block,
.aznar-all-schedule-wrap .aznar-modern-field input:not([type="date"]):not([type="hidden"]),
.aznar-all-schedule-wrap .aznar-modern-search-btn,
.aznar-all-schedule-wrap .aznar-schedule-tab,
.aznar-all-schedule-wrap .aznar-schedule-table {
    animation: aznarPhBorderBlink 3.8s linear infinite !important;
    border-width: 2px !important;
}

.aznar-all-schedule-wrap .aznar-modern-field select,
.aznar-all-schedule-wrap .aznar-modern-field input[type="date"] {
    border-width: 2px !important;
}

.neon-tap-challenge-box {
    margin: 0 0 12px 0;
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.62);
    padding: 10px;
}

.neon-tap-challenge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.neon-tap-input {
    flex: 1;
    min-width: 220px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(2, 6, 23, 0.75);
    color: #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    outline: none;
}

.neon-tap-input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.neon-tap-challenge-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.neon-tap-user-pick {
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.8);
    color: #e2e8f0;
    border-radius: 9px;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
}

.neon-tap-user-pick.is-active {
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18);
}

.neon-tap-user-pick small {
    color: #94a3b8;
}

.neon-tap-challenge-empty,
.neon-tap-challenge-selected,
.neon-tap-challenge-code {
    margin-top: 8px;
    color: #cbd5e1;
    font-size: 0.9rem;
}

.neon-tap-challenge-alert {
    margin-bottom: 10px;
    border: 1px solid rgba(250, 204, 21, 0.65);
    border-radius: 12px;
    background: rgba(113, 63, 18, 0.45);
    color: #fef3c7;
    padding: 10px 12px;
}

.neon-tap-inline-code {
    display: inline-block;
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(254, 240, 138, 0.7);
    background: rgba(120, 53, 15, 0.45);
    color: #fef08a;
}

.neon-tap-challenge-accept-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.neon-tap-challenge-alert--blink {
    animation: neonTapChallengeBlink 1s ease-in-out infinite alternate;
}

@keyframes neonTapChallengeBlink {
    from {
        box-shadow: 0 0 0 rgba(250, 204, 21, 0);
        border-color: rgba(250, 204, 21, 0.5);
    }
    to {
        box-shadow: 0 0 20px rgba(250, 204, 21, 0.35);
        border-color: rgba(250, 204, 21, 0.95);
    }
}

@keyframes neonTapPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.82;
    }
    100% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@media (max-width: 860px) {
    .neon-tap-stat,
    .neon-tap-control {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .neon-tap-stat,
    .neon-tap-control {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }
    .neon-tap-stat strong {
        font-size: 0.98rem;
    }
    .neon-tap-btn-box {
        font-size: 0.88rem;
        padding: 10px 8px;
    }
    .neon-tap-arena {
        min-height: 280px;
        aspect-ratio: 4 / 3;
    }
}

/* My Reservations — status ribbon + timestamps */
.my-res-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 8px 0 4px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}
.my-res-status-pill {
    border: none;
    cursor: default;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 8px 16px;
    border-radius: 999px;
    pointer-events: none;
    flex-shrink: 0;
}
.my-res-status-pill--active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    animation: my-res-status-active-blink 1.35s ease-in-out infinite;
}
.my-res-status-pill--consumed {
    background: linear-gradient(135deg, #facc15 0%, #eab308 85%);
    color: #422006;
    box-shadow: 0 2px 6px rgba(234, 179, 8, 0.28);
}
.my-res-datetimes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    font-size: 13px;
    color: #334155;
}
.my-res-dt-label {
    font-weight: 700;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
}
@keyframes my-res-status-active-blink {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35), 0 0 0 0 rgba(37, 99, 235, 0.35);
    }
    50% {
        opacity: 0.88;
        transform: scale(1.02);
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45), 0 0 0 10px rgba(37, 99, 235, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .my-res-status-pill--active {
        animation: none;
    }
}

.my-res-ref-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 10px;
    font-size: 14px;
    color: #334155;
}

.my-res-ref-text .my-res-ref-dash {
    color: #94a3b8;
}

.my-res-qr-toggle-btn {
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600;
}

.my-res-qr-toggle-btn .fas {
    margin-right: 6px;
}

.my-res-qr-wrap {
    margin: 12px 0 14px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
}

.my-res-qr-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

.my-res-qr-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

/* My Reservations: stacked fields on narrow screens */
@media (max-width: 600px) {
    .reservations-hub .reservations-form-row {
        grid-template-columns: 1fr !important;
    }
}

/* Aznar all-schedules: force mobile-safe fit for all users/views */
@media (max-width: 760px) {
    .aznar-all-schedule-wrap {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
        max-width: calc(100% + 30px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .aznar-all-schedule-wrap,
    .aznar-all-schedule-wrap .aznar-modern-hero,
    .aznar-all-schedule-wrap .aznar-modern-grid,
    .aznar-all-schedule-wrap .aznar-modern-main,
    .aznar-all-schedule-wrap .aznar-modern-side,
    .aznar-all-schedule-wrap .aznar-schedule-card,
    .aznar-all-schedule-wrap .aznar-modern-popular-block,
    .aznar-all-schedule-wrap .aznar-modern-card,
    .aznar-all-schedule-wrap .aznar-schedule-table,
    .aznar-all-schedule-wrap .aznar-schedule-tabs,
    .aznar-all-schedule-wrap .aznar-schedule-gallery {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .aznar-all-schedule-wrap .aznar-modern-search-grid,
    .aznar-all-schedule-wrap .aznar-modern-grid,
    .aznar-all-schedule-wrap .aznar-popular-routes-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .aznar-all-schedule-wrap .aznar-modern-search-grid .aznar-modern-search-submit-cell {
        grid-column: auto !important;
    }

    .aznar-all-schedule-wrap .aznar-modern-itinerary-row .aznar-itinerary-toggle {
        grid-template-columns: 1fr !important;
    }

    .aznar-all-schedule-wrap .aznar-modern-field,
    .aznar-all-schedule-wrap .aznar-modern-search-submit-cell,
    .aznar-all-schedule-wrap .aznar-modern-field input,
    .aznar-all-schedule-wrap .aznar-modern-field select,
    .aznar-all-schedule-wrap .aznar-modern-search-btn,
    .aznar-all-schedule-wrap .aznar-schedule-tab,
    .aznar-all-schedule-wrap .aznar-time-btn,
    .aznar-all-schedule-wrap .aznar-slot-pill,
    .aznar-all-schedule-wrap .aznar-price-pill,
    .aznar-all-schedule-wrap .aznar-reserve-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .aznar-all-schedule-wrap .aznar-time-cell-wrap {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .aznar-all-schedule-wrap .aznar-schedule-table {
        table-layout: fixed !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .aznar-all-schedule-wrap .aznar-modern-hero,
    .aznar-all-schedule-wrap .aznar-schedule-card,
    .aznar-all-schedule-wrap .aznar-modern-card,
    .aznar-all-schedule-wrap .aznar-modern-popular-block,
    .aznar-all-schedule-wrap .aznar-schedule-tab,
    .aznar-all-schedule-wrap .aznar-modern-field input,
    .aznar-all-schedule-wrap .aznar-modern-field select,
    .aznar-all-schedule-wrap .aznar-modern-search-btn,
    .aznar-all-schedule-wrap .aznar-schedule-table {
        border-width: 2px !important;
        border-style: solid !important;
        border-color: #0038a8 !important;
        animation: aznarPhBorderBlink 3.8s linear infinite !important;
    }
}

/* Aznar authorized Sales data panel — modern + soft “friendly blink” motion */
@keyframes aznarSalesPanelGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(13, 148, 136, 0.22),
            0 12px 40px rgba(15, 23, 42, 0.07),
            0 0 28px rgba(13, 148, 136, 0.08);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(13, 148, 136, 0.42),
            0 18px 52px rgba(13, 148, 136, 0.11),
            0 0 36px rgba(34, 211, 238, 0.14);
    }
}

@keyframes aznarSalesBadgeBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.88; transform: scale(1.06); }
}

@keyframes aznarSalesBadgeDot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    50% { opacity: 0.75; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

@keyframes aznarSalesTabStripPulse {
    0%, 100% { border-color: rgba(148, 163, 184, 0.45); }
    50% { border-color: rgba(13, 148, 136, 0.55); }
}

@keyframes aznarSalesTabActiveShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes aznarSalesKpiPulseSoft {
    0%, 100% { box-shadow: 0 4px 18px rgba(13, 148, 136, 0.12); }
    50% { box-shadow: 0 6px 26px rgba(13, 148, 136, 0.22); }
}

@keyframes aznarSalesChartEdge {
    0%, 100% { border-color: rgba(226, 232, 240, 1); }
    50% { border-color: rgba(13, 148, 136, 0.35); }
}

.aznar-public-sales-panel {
    margin-top: 28px;
    padding-top: 28px;
    border-top: none;
    position: relative;
}

.aznar-public-sales-inner {
    position: relative;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.92) 0%, #ecfdf5 38%, #f0fdfa 55%, #eff6ff 100%);
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 20px;
    padding: 22px 22px 26px;
    overflow: hidden;
    animation: aznarSalesPanelGlow 4.2s ease-in-out infinite;
}

.aznar-public-sales-inner-deco {
    position: absolute;
    inset: -40% -20% auto auto;
    width: 55%;
    height: 120%;
    background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.18) 0%, transparent 65%);
    pointer-events: none;
    animation: aznarSalesBadgeBlink 6s ease-in-out infinite;
}

.aznar-public-sales-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.aznar-public-sales-head h4 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.02em;
}

.aznar-public-sales-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #2dd4bf 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.35);
    animation: aznarSalesBadgeBlink 3.5s ease-in-out infinite;
}

.aznar-public-sales-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #0f766e;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(13, 148, 136, 0.35);
    box-shadow: 0 2px 12px rgba(13, 148, 136, 0.15);
    animation: aznarSalesBadgeBlink 2.8s ease-in-out infinite;
}

.aznar-public-sales-badge-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    animation: aznarSalesBadgeDot 2s ease-out infinite;
}

.aznar-public-sales-lead {
    margin: 0 0 18px 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
    max-width: 52rem;
}

/* Tab strip — compact, label-sized chips with strong focus on active */
.aznar-public-sales-tablist {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px;
    margin: 0 0 18px 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 14px rgba(15, 23, 42, 0.06);
    animation: aznarSalesTabStripPulse 4s ease-in-out infinite;
}

.aznar-sales-tab {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 6px 10px 7px;
    margin: 0;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    background: rgba(248, 250, 252, 0.95);
    color: #334155;
    border: 2px solid rgba(148, 163, 184, 0.55);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.aznar-sales-tab:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    background: #fff;
    color: #0f172a;
    border-color: rgba(13, 148, 136, 0.45);
}

.aznar-sales-tab.is-active {
    color: #fff;
    background: linear-gradient(120deg, #0d9488 0%, #14b8a6 45%, #06b6d4 100%);
    background-size: 200% 200%;
    animation: aznarSalesTabActiveShimmer 5s ease infinite alternate;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 0 0 2px rgba(13, 148, 136, 0.55),
        0 8px 22px rgba(13, 148, 136, 0.42);
}

.aznar-sales-tab.is-active .aznar-sales-tab-hint {
    color: rgba(255, 255, 255, 0.85);
}

.aznar-sales-tab-icon {
    font-size: 15px;
    opacity: 0.95;
}

.aznar-sales-tab-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.aznar-sales-tab-hint {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.9;
    color: #64748b;
    line-height: 1.15;
    white-space: nowrap;
}

.aznar-sales-tab--custom:not(.is-active) {
    border: 1px dashed rgba(13, 148, 136, 0.45);
}

.aznar-public-sales-toolbar {
    margin-bottom: 10px;
}

.aznar-public-sales-toolbar-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 14px 16px 16px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.aznar-public-sales-toolbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 12px;
}

.aznar-public-sales-toolbar-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.aznar-public-sales-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aznar-public-sales-field select,
.aznar-public-sales-field input[type="date"] {
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    min-width: 140px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aznar-public-sales-field select:focus,
.aznar-public-sales-field input[type="date"]:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.aznar-public-sales-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aznar-public-sales-apply-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.42);
}

.aznar-public-sales-range-note {
    font-size: 12px;
    color: #475569;
    margin: 0 0 14px 0;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 251, 235, 0.85);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.aznar-public-sales-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.aznar-public-sales-kpis--animated .aznar-public-sales-kpi--card {
    transition: transform 0.25s ease;
}

.aznar-public-sales-kpis--animated .aznar-public-sales-kpi--card:hover {
    transform: translateY(-3px);
}

.aznar-public-sales-kpi {
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.aznar-public-sales-kpi--pulse-soft {
    animation: aznarSalesKpiPulseSoft 3.8s ease-in-out infinite;
    border-color: rgba(13, 148, 136, 0.28);
}

.aznar-public-sales-kpi-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 8px;
    font-weight: 600;
}

.aznar-public-sales-kpi-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.aznar-public-sales-kpi-value.is-up {
    color: #059669;
}

.aznar-public-sales-kpi-value.is-down {
    color: #dc2626;
}

.aznar-public-sales-kpi-sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 6px;
    display: block;
}

.aznar-public-sales-chart-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.06) 0%, rgba(13, 148, 136, 0.1) 100%);
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.aznar-public-sales-chart-controls-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

.aznar-public-sales-chart-controls-label .fas {
    color: #0d9488;
    font-size: 13px;
}

.aznar-public-sales-chart-type-select {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
    min-width: 150px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aznar-public-sales-chart-type-select:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22);
}

.aznar-public-sales-chart-controls-hint {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.aznar-public-sales-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 14px;
}

.aznar-public-sales-chart-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 14px 16px 18px;
    border: 1px solid #e2e8f0;
    animation: aznarSalesChartEdge 5s ease-in-out infinite;
}

.aznar-public-sales-chart-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.aznar-public-sales-chart-card-head .fas {
    color: #0d9488;
    font-size: 14px;
}

.aznar-public-sales-chart-card-head h6 {
    margin: 0;
    font-size: 14px;
    color: #1e293b;
    font-weight: 700;
}

.aznar-public-sales-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.aznar-sales-legend-current .fas {
    color: #0ea5e9;
    margin-right: 4px;
}

.aznar-sales-legend-prev .fas {
    color: #94a3b8;
    margin-right: 4px;
}

.aznar-public-sales-canvas-wrap {
    position: relative;
    width: 100%;
    min-height: 180px;
}

.aznar-public-sales-canvas-wrap canvas {
    width: 100% !important;
    height: auto !important;
}

.aznar-public-sales-chart-card--dark {
    background: linear-gradient(165deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.35);
}

.aznar-public-sales-chart-card--dark .aznar-public-sales-chart-card-head .fas {
    color: #5eead4;
}

.aznar-public-sales-chart-card--dark .aznar-public-sales-chart-card-head h6 {
    color: #f1f5f9;
}

.aznar-public-sales-chart-card--dark .aznar-public-sales-chart-legend {
    color: #cbd5e1;
}

.aznar-public-sales-chart-card--dark .aznar-sales-legend-current .fas {
    color: #22d3ee;
}

.aznar-public-sales-chart-card--dark .aznar-sales-legend-prev .fas {
    color: #fbbf24;
}

.aznar-public-sales-canvas-wrap--dark {
    border-radius: 12px;
    overflow: visible;
    background: #0f172a;
    border: 1px solid rgba(51, 65, 85, 0.85);
    min-height: 180px;
}

.aznar-public-sales-canvas-wrap--dark canvas {
    border-radius: 10px;
    display: block;
}

.aznar-public-sales-chart-tooltip {
    position: fixed;
    z-index: 10050;
    pointer-events: none;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    max-width: 260px;
    line-height: 1.45;
}

.aznar-public-sales-chart-tooltip[hidden] {
    display: none !important;
}

.aznar-public-sales-chart-tooltip-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.aznar-public-sales-chart-tooltip-metric {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 2px;
}

.aznar-public-sales-chart-tooltip-value {
    font-size: 15px;
    font-weight: 800;
    color: #e0f2fe;
    letter-spacing: -0.02em;
}

.aznar-public-sales-chart-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 4px;
    font-size: 12px;
}

.aznar-public-sales-chart-tooltip-row span {
    font-weight: 600;
    color: #94a3b8;
}

.aznar-public-sales-chart-tooltip-row strong {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.aznar-public-sales-chart-tooltip-row--prev strong {
    color: #fbbf24;
}

.aznar-public-sales-chart-tooltip-row--curr strong {
    color: #22d3ee;
}

.aznar-public-sales-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.aznar-public-sales-mini-table th,
.aznar-public-sales-mini-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.aznar-public-sales-mini-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

@media (prefers-reduced-motion: reduce) {
    .aznar-public-sales-inner,
    .aznar-public-sales-inner-deco,
    .aznar-public-sales-title-icon,
    .aznar-public-sales-badge,
    .aznar-public-sales-badge-pulse,
    .aznar-public-sales-tablist,
    .aznar-sales-tab,
    .aznar-sales-tab.is-active,
    .aznar-public-sales-apply-btn,
    .aznar-public-sales-kpi--pulse-soft,
    .aznar-public-sales-chart-card,
    .aznar-public-sales-chart-card--dark {
        animation: none !important;
    }

    .aznar-sales-tab:hover {
        transform: none;
    }
}

@media (max-width: 640px) {
    .aznar-sales-tab {
        flex: 1 1 calc(50% - 6px);
        min-width: calc(50% - 6px);
    }

    .aznar-public-sales-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Voice column + admin-only Maintenance strip (below mic) */
.content-header-voice-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: min(440px, 100%);
}

.phcash-header-maintenance-strip {
    align-self: stretch;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 14px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.phcash-header-maintenance-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.phcash-maintenance-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.phcash-maintenance-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.phcash-maintenance-switch-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.85);
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.phcash-maintenance-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.phcash-maintenance-switch input:checked + .phcash-maintenance-switch-track {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.phcash-maintenance-switch input:checked + .phcash-maintenance-switch-track .phcash-maintenance-switch-thumb {
    transform: translateX(20px);
}

.phcash-maintenance-switch-cap {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
    min-width: 52px;
    text-align: left;
}

.phcash-maintenance-switch-cap .cap-on {
    display: none;
}

.phcash-maintenance-switch input:checked ~ .phcash-maintenance-switch-cap .cap-off {
    display: none;
}

.phcash-maintenance-switch input:checked ~ .phcash-maintenance-switch-cap .cap-on {
    display: inline;
}

/* Full-site maintenance overlay */
.phcash-maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
}

.phcash-maintenance-overlay-card {
    max-width: 440px;
    width: 100%;
    padding: 28px 24px;
    border-radius: 16px;
    background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
    text-align: center;
}

.phcash-maintenance-overlay-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
}

.phcash-maintenance-overlay-text {
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 8px;
    line-height: 1.55;
}

.phcash-maintenance-overlay-note {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 12px;
}

.phcash-maintenance-login-btn {
    width: 100%;
    margin-bottom: 12px;
}

.phcash-maintenance-admin-recovery {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed #cbd5e1;
    text-align: left;
}

.phcash-maintenance-admin-recovery-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}

.phcash-maintenance-admin-recovery-hint {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 10px;
}

.phcash-maintenance-secret-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.9rem;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.phcash-maintenance-off-btn {
    width: 100%;
    justify-content: center;
}

body.phcash-maintenance-active {
    overflow: hidden;
}

body.phcash-maintenance-active .container {
    pointer-events: none;
}

body.phcash-maintenance-active .content-header-actions,
body.phcash-maintenance-active #authHeaderBtn {
    pointer-events: auto;
}

/* PH Online direct payment (PayMongo default) — tabs + Hotels highlight */
.phonline-direct-payment-tabstrip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.phonline-direct-payment-tabstrip--inline {
    margin-bottom: 8px;
}

.phonline-direct-payment-tab {
    padding: 10px 16px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    color: #334155;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.phonline-direct-payment-tab:hover {
    border-color: #99f6e4;
    background: #f0fdfa;
}

.phonline-direct-payment-tab--active {
    border-color: #0d9488;
    background: linear-gradient(145deg, #ecfdf5 0%, #f0fdfa 100%);
    color: #0f766e;
}

.phonline-direct-payment-panel {
    margin-bottom: 16px;
}

.phonline-direct-payment-desc {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}

.phonline-direct-payment-strip {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(13, 148, 136, 0.35);
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.7) 0%, #fff 100%);
}

.phonline-direct-payment-strip-label {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f766e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.phonline-direct-payment-url-hint {
    margin: 8px 0 0;
    font-size: 0.8rem;
    word-break: break-all;
}

.phonline-direct-payment-url-hint a {
    color: #0d9488;
}

.cashin-phonline-url-preview-wrap {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
}

.cashin-phonline-url-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
}

.cashin-phonline-url-preview {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    color: #0f172a;
    word-break: break-all;
    user-select: all;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.cashin-phonline-url-open {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: #0d9488;
    word-break: break-all;
}

.cashin-phonline-amount--locked {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #334155;
    cursor: not-allowed;
}

.cashin-phonline-change-amount-btn {
    align-items: center;
    gap: 6px;
}

.hotels-search-results-summary {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 0.92rem;
}

.hotels-search-results-summary i {
    margin-right: 8px;
}

.hotels-search-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: #64748b;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
}

.hotels-search-empty i {
    font-size: 42px;
    margin-bottom: 12px;
    opacity: 0.45;
    display: block;
}

.hotels-search-empty p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
}

.photonline-cashin-pay-wrap {
    margin-bottom: 20px;
}

.cashin-phonline-receipt-banner {
    display: none;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #92400e;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    animation: cashin-phonline-receipt-blink 1.2s ease-in-out infinite;
}

.cashin-phonline-receipt-banner i {
    margin-right: 8px;
}

@keyframes cashin-phonline-receipt-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
    50% { opacity: 0.72; box-shadow: 0 0 12px 4px rgba(245, 158, 11, 0.35); }
}

.cashin-phonline-receipt-upload-wrap {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 2px dashed #fcd34d;
    background: #fffbeb;
}

.cashin-phonline-receipt-upload-label {
    display: block;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.cashin-phonline-receipt-upload-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cashin-phonline-receipt-file-input {
    flex: 1;
    min-width: 180px;
    font-size: 0.88rem;
}

.cashin-phonline-receipt-upload-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: #78716c;
    line-height: 1.45;
}

.cashin-received-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.cashin-edit-amount-btn {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.cashin-edit-amount-btn:hover {
    filter: brightness(1.06);
}

.cashin-edit-amount-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cashin-edit-amount-panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.cashin-edit-amount-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.cashin-edit-amount-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    color: #0f172a;
}

.cashin-edit-amount-desc {
    margin: 0 0 18px;
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.5;
}

.cashin-edit-amount-readonly,
.cashin-edit-amount-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.cashin-edit-amount-readonly {
    background: #f8fafc;
    color: #475569;
}

.cashin-edit-amount-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.cashin-edit-amount-save-btn {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
    border: none !important;
}

.hotels-payment-option--featured {
    border: 2px solid #0d9488 !important;
    background: linear-gradient(145deg, #ecfdf5 0%, #fff 100%) !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.2);
}

.hotels-payment-option--featured .hotels-payment-option-text strong {
    color: #0f766e;
}

/* Money Corner — referral list + admin rows */
.money-corner-wrap .panel-description {
    margin-bottom: 16px;
}

.money-corner-admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.money-corner-add-btn {
    min-width: 46px;
    height: 44px;
    padding: 0 14px;
    font-size: 1.1rem;
}

.money-corner-secret-inline {
    flex: 1 1 220px;
    min-width: 180px;
}

.money-corner-secret-inline label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.money-corner-secret-inline input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
}

.money-corner-loading {
    color: #64748b;
    margin: 8px 0;
}

.money-corner-public-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.money-corner-public-list li {
    margin: 0;
}

.money-corner-link {
    display: block;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(145deg, #f0fdfa 0%, #ecfdf5 100%);
    border: 1px solid rgba(13, 148, 136, 0.35);
    font-weight: 700;
    color: #0f766e;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.money-corner-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13, 148, 136, 0.2);
}

.money-corner-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.money-corner-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
        "rm comp"
        "rm url"
        "rm rem";
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    align-items: start;
}

.money-corner-remove {
    grid-area: rm;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
}

.money-corner-remove:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.money-corner-field--company {
    grid-area: comp;
}

.money-corner-field--url {
    grid-area: url;
}

.money-corner-field--remarks {
    grid-area: rem;
}

.money-corner-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 4px;
}

.money-corner-field input,
.money-corner-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: inherit;
}

.money-corner-field--remarks textarea {
    min-height: 64px;
    resize: vertical;
}

@media (max-width: 720px) {
    .money-corner-row {
        grid-template-columns: minmax(0, 1fr) 42px;
        grid-template-areas:
            "comp rm"
            "url url"
            "rem rem";
    }

    .money-corner-remove {
        margin-top: 0;
        align-self: start;
    }

    .money-corner-field--company {
        grid-area: comp;
    }

    .money-corner-field--url {
        grid-area: url;
    }

    .money-corner-field--remarks {
        grid-area: rem;
    }
}

/* --- Aznar Admin: Inventory / Schedule / Pricing (admin workspace) --- */
.content-panel-aznar-admin-inv {
    background: linear-gradient(165deg, #f0f9ff 0%, #f8fafc 38%, #eef2ff 100%);
    overflow-x: auto;
    overflow-y: visible;
}

.aznar-admin-inv {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 4px 2px 20px;
    font-family: inherit;
    color: #1e293b;
    line-height: 1.5;
    box-sizing: border-box;
    overflow-x: hidden;
}

.aznar-admin-inv-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(224, 242, 254, 0.55));
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.aznar-admin-inv-title {
    margin: 0 0 4px 0;
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: #0f172a;
}

.aznar-admin-inv-title i {
    margin-right: 8px;
    color: #0ea5e9;
}

.aznar-admin-inv-lead {
    margin: 0;
    max-width: 52ch;
    line-height: 1.55;
    font-size: 0.9rem;
    color: #64748b;
}

.aznar-admin-inv-hero-actions {
    flex-shrink: 0;
}

@keyframes aznarInvTabFadingGlow {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    }
    50% {
        filter: brightness(1.06);
        box-shadow: 0 4px 22px rgba(15, 23, 42, 0.12), 0 0 18px rgba(255, 255, 255, 0.55);
    }
}

.aznar-admin-inv-main-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 6px;
    margin-bottom: 12px;
    position: relative;
    z-index: 3;
    clear: both;
    padding-bottom: 2px;
}

.aznar-admin-inv-tab-panels {
    position: relative;
    z-index: 1;
    clear: both;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.aznar-admin-inv-main-tab {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #475569;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.84rem;
    line-height: 1.35;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s, transform 0.15s;
    animation: aznarInvTabFadingGlow 3.2s ease-in-out infinite;
}

.aznar-admin-inv-main-tab:nth-child(1) { animation-delay: 0s; }
.aznar-admin-inv-main-tab:nth-child(2) { animation-delay: 0.45s; }
.aznar-admin-inv-main-tab:nth-child(3) { animation-delay: 0.9s; }
.aznar-admin-inv-main-tab:nth-child(4) { animation-delay: 1.35s; }
.aznar-admin-inv-main-tab:nth-child(5) { animation-delay: 1.8s; }
.aznar-admin-inv-main-tab:nth-child(6) { animation-delay: 2.25s; }
.aznar-admin-inv-main-tab:nth-child(7) { animation-delay: 2.7s; }

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="offices"] {
    background: linear-gradient(135deg, rgba(255, 237, 213, 0.95) 0%, rgba(253, 186, 116, 0.65) 50%, rgba(255, 255, 255, 0.9) 100%);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="tellerlist"] {
    background: linear-gradient(135deg, rgba(224, 231, 255, 0.95) 0%, rgba(165, 180, 252, 0.65) 50%, rgba(255, 255, 255, 0.9) 100%);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="vessels"] {
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.95) 0%, rgba(186, 230, 253, 0.75) 50%, rgba(255, 255, 255, 0.9) 100%);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="inventory"] {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.7) 50%, rgba(255, 255, 255, 0.9) 100%);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="schedule"] {
    background: linear-gradient(135deg, rgba(237, 233, 254, 0.95) 0%, rgba(196, 181, 253, 0.7) 50%, rgba(255, 255, 255, 0.9) 100%);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="pricing"] {
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.95) 0%, rgba(110, 231, 183, 0.55) 50%, rgba(255, 255, 255, 0.9) 100%);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="pricingtellers"] {
    background: linear-gradient(135deg, rgba(255, 228, 230, 0.95) 0%, rgba(253, 164, 175, 0.65) 50%, rgba(255, 255, 255, 0.9) 100%);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="vehiclecargo"] {
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(251, 191, 36, 0.55) 50%, rgba(255, 251, 235, 0.95) 100%);
}

.aznar-admin-inv-main-tab:hover {
    border-color: rgba(148, 163, 184, 0.55);
    color: #0f172a;
    transform: translateY(-1px);
}

.aznar-admin-inv-main-tab.is-active {
    color: #0f172a;
    font-weight: 600;
    animation: aznarInvTabFadingGlow 2.4s ease-in-out infinite;
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="offices"].is-active {
    border-color: #fb923c;
    background: linear-gradient(135deg, #ffedd5 0%, #fdba74 45%, #fff7ed 100%);
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.28), 0 0 24px rgba(251, 146, 60, 0.2);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="tellerlist"].is-active {
    border-color: #818cf8;
    background: linear-gradient(135deg, #e0e7ff 0%, #a5b4fc 45%, #eef2ff 100%);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.28), 0 0 24px rgba(129, 140, 248, 0.2);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="vessels"].is-active {
    border-color: #38bdf8;
    background: linear-gradient(135deg, #e0f2fe 0%, #7dd3fc 45%, #f0f9ff 100%);
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.28), 0 0 24px rgba(56, 189, 248, 0.2);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="inventory"].is-active {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fef9c3 0%, #fcd34d 45%, #fffbeb 100%);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.28), 0 0 24px rgba(251, 191, 36, 0.2);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="schedule"].is-active {
    border-color: #a78bfa;
    background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 45%, #f5f3ff 100%);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.28), 0 0 24px rgba(167, 139, 250, 0.2);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="pricing"].is-active {
    border-color: #34d399;
    background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 45%, #ecfdf5 100%);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.28), 0 0 24px rgba(52, 211, 153, 0.2);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="pricingtellers"].is-active {
    border-color: #fb7185;
    background: linear-gradient(135deg, #ffe4e6 0%, #fda4af 45%, #fff1f2 100%);
    box-shadow: 0 4px 20px rgba(244, 63, 94, 0.25), 0 0 24px rgba(251, 113, 133, 0.2);
}

.aznar-admin-inv-main-tab[data-aznar-admin-inv-tab="vehiclecargo"].is-active {
    border-color: #d97706;
    background: linear-gradient(135deg, #fffbeb 0%, #fcd34d 45%, #fef3c7 100%);
    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.28), 0 0 24px rgba(251, 191, 36, 0.22);
}

.aznar-admin-inv-tab-panel {
    display: none;
}

.aznar-admin-inv-tab-panel[hidden] {
    display: none !important;
}

.aznar-admin-inv-tab-panel.is-active:not([hidden]) {
    display: block;
    margin-top: 0;
    clear: both;
}

.aznar-admin-inv-tab-panel.is-active > .aznar-admin-inv-card {
    margin-top: 0;
}

.aznar-admin-inv-tab-panel[data-aznar-admin-inv-panel="offices"].is-active .aznar-admin-inv-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 237, 213, 0.38) 100%);
}

.aznar-admin-inv-tab-panel[data-aznar-admin-inv-panel="tellerlist"].is-active .aznar-admin-inv-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(224, 231, 255, 0.4) 100%);
}

.aznar-admin-inv-tab-panel[data-aznar-admin-inv-panel="vessels"].is-active .aznar-admin-inv-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(224, 242, 254, 0.35) 100%);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.aznar-admin-inv-table--offices .aznar-admin-inv-office-name-cell {
    font-weight: 600;
    color: #0f172a;
    vertical-align: top;
    padding-top: 0.7rem;
    min-width: 11rem;
}

.aznar-admin-inv-table--offices .aznar-admin-inv-office-contact-cell {
    vertical-align: top;
    min-width: 14rem;
}

.aznar-admin-inv-table-wrap--offices {
    overflow-x: auto;
    max-width: 100%;
}

.aznar-admin-inv-table--offices {
    min-width: 42rem;
}

.aznar-admin-inv-table--offices .aznar-admin-inv-office-code {
    min-width: 7rem;
}

.aznar-admin-inv-table--offices .aznar-admin-inv-office-users-cell {
    vertical-align: top;
    padding-top: 0.55rem;
    white-space: nowrap;
}

.aznar-admin-inv-office-vis-cell,
.aznar-admin-inv-office-audit-cell {
    min-width: 108px;
    vertical-align: middle;
}

.aznar-admin-inv-office-vis-toggle {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
}

.aznar-admin-inv-office-vis-btn {
    border: none !important;
    border-radius: 0 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    min-width: 42px;
}

.aznar-admin-inv-office-vis-btn.is-active.aznar-admin-inv-office-vis-on {
    background: #22c55e !important;
    color: #fff !important;
}

.aznar-admin-inv-office-vis-btn.is-active.aznar-admin-inv-office-vis-off {
    background: #94a3b8 !important;
    color: #fff !important;
}

.aznar-admin-inv-office-row--hidden .aznar-admin-inv-office-name,
.aznar-admin-inv-office-row--hidden .aznar-admin-inv-office-name-input {
    opacity: 0.72;
}

.aznar-admin-inv-office-audit-open {
    white-space: nowrap;
}

#aznarAdminInvAddOffice {
    margin-top: 12px;
}

.aznar-admin-inv-office-audit-overlay {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.aznar-admin-inv-office-audit-overlay[hidden] {
    display: none !important;
}

.aznar-admin-inv-office-audit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.aznar-admin-inv-office-audit-dialog {
    position: relative;
    width: min(720px, 96vw);
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
    padding: 0 0 16px;
}

.aznar-admin-inv-office-audit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.aznar-admin-inv-office-audit-title {
    margin: 0;
    font-size: 1.05rem;
}

.aznar-admin-inv-office-audit-desc {
    margin: 0;
    padding: 12px 16px 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.aznar-admin-inv-office-audit-status {
    padding: 8px 16px 0;
    font-size: 13px;
    color: #64748b;
}

.aznar-admin-inv-office-audit-timeline {
    padding: 8px 16px 0;
    max-height: 52vh;
    overflow-y: auto;
}

.aznar-admin-inv-office-audit-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px 0;
}

body.aznar-admin-inv-office-audit-open {
    overflow: hidden;
}

.aznar-admin-inv-office-name-input {
    min-width: 140px;
}

.aznar-admin-inv-office-users-overlay {
    position: fixed;
    inset: 0;
    z-index: 120000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: auto;
}

.aznar-admin-inv-office-users-overlay[hidden] {
    display: none !important;
}

.aznar-admin-inv-office-users-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    cursor: pointer;
}

.aznar-admin-inv-office-users-dialog {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    width: min(52rem, 100%);
    max-height: min(90vh, 42rem);
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
    padding: 1rem 1.1rem 1.1rem;
}

.aznar-admin-inv-office-users-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.aznar-admin-inv-office-users-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
}

.aznar-admin-inv-office-users-desc {
    margin: 0 0 0.65rem;
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.5;
}

.aznar-admin-inv-office-users-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.aznar-admin-inv-table--office-users .aznar-admin-inv-office-user-role {
    min-width: 10rem;
}

body.aznar-admin-inv-office-users-open {
    overflow: hidden;
}

.aznar-admin-inv-table-wrap--tellers {
    overflow-x: auto;
    max-width: 100%;
}

.aznar-admin-inv-table--tellers {
    min-width: 52rem;
}

.aznar-admin-inv-table--tellers .aznar-admin-inv-office-name-cell {
    font-weight: 600;
    color: #0f172a;
    vertical-align: top;
    padding-top: 0.7rem;
    min-width: 11rem;
}

.aznar-admin-inv-table--tellers .aznar-admin-inv-office-contact-cell {
    vertical-align: top;
    min-width: 12rem;
}

.aznar-admin-inv-table--tellers .aznar-admin-inv-teller-code {
    min-width: 6.5rem;
}

.aznar-admin-inv-table--tellers .aznar-admin-inv-teller-fname,
.aznar-admin-inv-table--tellers .aznar-admin-inv-teller-lname {
    min-width: 7.5rem;
}

.aznar-admin-inv-table--tellers .aznar-admin-inv-teller-email {
    min-width: 11rem;
}

.aznar-admin-inv-table--tellers tbody td {
    vertical-align: top;
    padding-top: 0.55rem;
}

.aznar-admin-inv-office-contact-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.3rem;
    flex-wrap: nowrap;
}

.aznar-admin-inv-office-contact-line:last-child {
    margin-bottom: 0;
}

.aznar-admin-inv-office-contact-line .aznar-admin-inv-office-field-wrap {
    flex: 1;
    min-width: 0;
}

.aznar-admin-inv-office-contact-line .aznar-admin-inv-office-contact {
    flex: 1;
    min-width: 6rem;
}

.aznar-admin-inv-office-contact-line--primary {
    flex-wrap: nowrap;
}

.aznar-admin-inv-office-contact-line-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: auto;
}

.aznar-admin-inv-office-contacts-toggle-spacer {
    flex-shrink: 0;
    width: 4.75rem;
    min-width: 4.75rem;
    display: inline-block;
}

.aznar-admin-inv-office-contacts-extra {
    margin-top: 0.35rem;
    padding-left: 0;
    border-left: none;
}

.aznar-admin-inv-office-contacts-extra.is-collapsed {
    display: none;
}

.aznar-admin-inv-office-contacts-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    padding: 0.35rem 0.45rem;
    white-space: nowrap;
    min-width: 4.75rem;
    max-width: 4.75rem;
    justify-content: flex-start;
}

.aznar-admin-inv-office-contacts-toggle-label {
    font-weight: 700;
    font-size: 0.68rem;
    line-height: 1.1;
}

.aznar-admin-inv-office-add-contact,
.aznar-admin-inv-office-remove-contact {
    flex-shrink: 0;
    width: 2.35rem;
    min-width: 2.35rem;
    padding: 0.35rem 0.45rem;
}

.aznar-admin-inv-office-remove-contact {
    color: #b91c1c;
    border-color: rgba(248, 113, 113, 0.55);
}

.aznar-admin-inv-office-remove-contact:hover {
    background: #fef2f2;
    border-color: #f87171;
    color: #991b1b;
}

.aznar-admin-inv-office-add-contact[hidden],
.aznar-admin-inv-office-remove-contact[hidden] {
    display: none;
}

.aznar-admin-inv-office-field-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.aznar-admin-inv-office-field-wrap .aznar-admin-inv-input,
.aznar-admin-inv-office-field-wrap .aznar-admin-inv-office-contact {
    flex: 1;
    min-width: 8rem;
}

.aznar-admin-inv-office-field-save[hidden] {
    display: none;
}

.aznar-admin-inv-office-field-save.is-ready-blink {
    animation: aznar-admin-inv-sch-save-blink 1.1s ease-in-out infinite;
}

.aznar-admin-inv-office-contact-line--primary .aznar-admin-inv-office-field-wrap {
    min-width: 8rem;
}

.aznar-admin-inv-office-code-cell .aznar-admin-inv-office-field-wrap {
    min-width: 9rem;
}

.aznar-admin-inv-tab-panel[data-aznar-admin-inv-panel="inventory"].is-active .aznar-admin-inv-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(254, 243, 199, 0.35) 100%);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.aznar-admin-inv-inventory-guide,
.aznar-admin-inv-schedule-guide {
    margin: 0 0 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #334155;
    line-height: 1.58;
    max-width: 100%;
    box-sizing: border-box;
}

.aznar-admin-inv-inventory-guide {
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: rgba(255, 251, 235, 0.85);
}

.aznar-admin-inv-inventory-guide p,
.aznar-admin-inv-schedule-guide p {
    margin: 0 0 0.4rem;
    line-height: 1.58;
}

.aznar-admin-inv-inventory-guide-list,
.aznar-admin-inv-schedule-guide-list {
    margin: 0;
    padding-left: 1.05rem;
    line-height: 1.55;
}

.aznar-admin-inv-inventory-guide-list li,
.aznar-admin-inv-schedule-guide-list li {
    margin-bottom: 0.22rem;
}

.aznar-admin-inv-inventory-guide-list li:last-child,
.aznar-admin-inv-schedule-guide-list li:last-child {
    margin-bottom: 0;
}

.aznar-admin-inv-table-wrap--inventory {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.aznar-admin-inv-table--inventory {
    font-size: 0.82rem;
    line-height: 1.4;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

.aznar-admin-inv-table--inventory thead th {
    font-size: 0.78rem;
    padding: 6px 8px;
    border-bottom-color: #d97706;
}

.aznar-admin-inv-table--inventory tbody td {
    padding: 5px 7px;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-port-cell {
    min-width: 9.5rem;
    width: auto;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-o,
.aznar-admin-inv-table--inventory .aznar-admin-inv-d {
    width: auto;
    min-width: 9rem;
    max-width: 12.5rem;
    padding-right: 1.35rem;
    font-size: 0.82rem;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-dep-cell {
    width: 1%;
    white-space: nowrap;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-dep {
    width: auto;
    min-width: 6.5rem;
    max-width: 9.5rem;
    padding-right: 1.5rem;
    font-size: 0.82rem;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-seats-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-total {
    width: 3.75rem;
    min-width: 3.25rem;
    max-width: 4.5rem;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    font-size: 0.82rem;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-assigned-cell {
    width: 1%;
    white-space: nowrap;
    min-width: 12rem;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-assigned {
    width: auto;
    min-width: 11.5rem;
    max-width: 15.5rem;
    padding-right: 1.5rem;
    font-size: 0.82rem;
}

.aznar-admin-inv-inv-assigned.aznar-admin-inv-assigned--phonline {
    color: #dc2626;
    font-weight: 700;
    border-color: rgba(220, 38, 38, 0.5);
    background: rgba(254, 242, 242, 0.65);
}

.aznar-admin-inv-inv-assigned.aznar-admin-inv-assigned--tellers {
    color: #2563eb;
    font-weight: 700;
    border-color: rgba(37, 99, 235, 0.5);
    background: rgba(239, 246, 255, 0.75);
}

.aznar-admin-inv-inv-assigned option.aznar-admin-inv-assigned-opt--phonline {
    color: #dc2626;
    font-weight: 700;
}

.aznar-admin-inv-inv-assigned option.aznar-admin-inv-assigned-opt--tellers {
    color: #2563eb;
    font-weight: 700;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-vessel-cell {
    min-width: 10rem;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-ves {
    width: 100%;
    min-width: 9.5rem;
    max-width: 14rem;
    padding-right: 1.5rem;
    font-size: 0.82rem;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-vessel-type-cell {
    min-width: 11rem;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-vessel-type {
    width: 100%;
    min-width: 10.5rem;
    max-width: 15rem;
    padding-right: 1.5rem;
    font-size: 0.82rem;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-confirm-th,
.aznar-admin-inv-table--inventory .aznar-admin-inv-inv-confirm-cell {
    width: 1%;
    min-width: 3.25rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.aznar-admin-inv-table--inventory .aznar-admin-inv-tick {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    accent-color: #0ea5e9;
}

.aznar-admin-inv-pr-seats--override {
    border-color: #d97706;
    background: rgba(255, 251, 235, 0.95);
}

.aznar-admin-inv-tab-panel[data-aznar-admin-inv-panel="schedule"].is-active .aznar-admin-inv-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(237, 233, 254, 0.4) 100%);
}

.aznar-admin-inv-schedule-guide {
    border: 1px solid rgba(167, 139, 250, 0.45);
    background: rgba(245, 243, 255, 0.9);
}

.aznar-admin-inv-schedule-pending-banner {
    display: none;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.55);
    background: rgba(254, 242, 242, 0.95);
    color: #991b1b;
    font-size: 0.84rem;
    line-height: 1.55;
}

.aznar-admin-inv-schedule-pending-banner.is-visible,
.aznar-admin-inv-schedule-pending-banner:not([hidden]) {
    display: flex;
}

.aznar-admin-inv-schedule-pending-banner i {
    margin-top: 0.15rem;
    color: #dc2626;
    flex-shrink: 0;
}

@keyframes aznarAdminInvSchNeedsLiveBlink {
    0%,
    100% {
        border-color: #ef4444;
        background-color: #fef2f2;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.28);
    }
    50% {
        border-color: #b91c1c;
        background-color: #fee2e2;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5);
    }
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-needs-live:not(.aznar-admin-inv-sch-from):not(.aznar-admin-inv-sch-to) {
    animation: aznarAdminInvSchNeedsLiveBlink 1.1s ease-in-out infinite;
    border-color: #ef4444 !important;
}

.aznar-admin-inv-sch-date-cell {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.aznar-admin-inv-sch-date-wrap {
    display: inline-block;
    vertical-align: top;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    min-width: 8.75rem;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-date-wrap .aznar-admin-inv-sch-from,
.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-date-wrap .aznar-admin-inv-sch-to {
    display: block;
    width: 100%;
    min-width: 8.75rem;
    margin: 0;
    box-sizing: border-box;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-date-wrap.aznar-admin-inv-sch-needs-live {
    padding: 2px;
    border: 2px solid #ef4444;
    animation: aznarAdminInvSchNeedsLiveBlink 1.1s ease-in-out infinite;
    box-shadow: none;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-date-wrap.aznar-admin-inv-sch-needs-live .aznar-admin-inv-sch-from,
.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-date-wrap.aznar-admin-inv-sch-needs-live .aznar-admin-inv-sch-to {
    border-color: #fecaca;
    background: #fff;
    animation: none;
}

@keyframes aznarAdminInvSchActiveLiveBlink {
    0%,
    100% {
        border-color: #16a34a;
        background-color: #f0fdf4;
        box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.28);
    }
    50% {
        border-color: #15803d;
        background-color: #dcfce7;
        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.5);
    }
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-active-live:not(.aznar-admin-inv-sch-from):not(.aznar-admin-inv-sch-to) {
    animation: aznarAdminInvSchActiveLiveBlink 1.1s ease-in-out infinite;
    border-color: #16a34a !important;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-date-wrap.aznar-admin-inv-sch-active-live {
    padding: 2px;
    border: 2px solid #16a34a;
    animation: aznarAdminInvSchActiveLiveBlink 1.1s ease-in-out infinite;
    box-shadow: none;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-date-wrap.aznar-admin-inv-sch-active-live .aznar-admin-inv-sch-from,
.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-date-wrap.aznar-admin-inv-sch-active-live .aznar-admin-inv-sch-to {
    border-color: #bbf7d0;
    background: #fff;
    animation: none;
}

.aznar-admin-inv-tab-panel[data-aznar-admin-inv-panel="pricing"].is-active .aznar-admin-inv-card,
.aznar-admin-inv-tab-panel[data-aznar-admin-inv-panel="pricingtellers"].is-active .aznar-admin-inv-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(209, 250, 229, 0.3) 100%);
}

.aznar-admin-inv-tab-panel[data-aznar-admin-inv-panel="vehiclecargo"].is-active .aznar-admin-inv-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(254, 243, 199, 0.42) 100%);
}

.aznar-admin-inv-table-wrap--bracket {
    width: 100%;
    max-width: 52rem;
    margin-bottom: 0.75rem;
}

.aznar-admin-inv-table--bracket-reference {
    min-width: 0;
    width: 100%;
}

.aznar-admin-inv-table--bracket-reference tbody td {
    vertical-align: top;
    line-height: 1.5;
}

.aznar-admin-inv-table--bracket-reference tbody tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.85);
}

.aznar-admin-inv-table--bracket-reference tbody td:first-child {
    font-weight: 600;
    color: #0f172a;
    min-width: 11rem;
}

.aznar-admin-inv-table--vehiclecargo {
    min-width: 0;
    width: 100%;
}

.aznar-admin-inv-table--vehiclecargo .aznar-admin-inv-input {
    width: 100%;
    min-width: 5.5rem;
}

.aznar-admin-inv-table--vehiclecargo .aznar-admin-inv-vc-type {
    min-width: 11rem;
}

.aznar-admin-inv-table--vehiclecargo .aznar-admin-inv-vc-cc {
    min-width: 9rem;
}

.aznar-admin-inv-table--vehiclecargo .aznar-admin-inv-vc-tons {
    min-width: 10rem;
}

.aznar-admin-inv-table--vehiclecargo .aznar-admin-inv-vc-price {
    min-width: 5.5rem;
    max-width: 7rem;
}

.aznar-admin-inv-table--vehiclecargo .aznar-admin-inv-vc-actions {
    white-space: nowrap;
}

.aznar-admin-inv-table--vehiclecargo .aznar-admin-inv-vc-actions .btn {
    margin-right: 0.2rem;
}

.aznar-admin-inv-card > #aznarAdminInvAddVehicleCargo {
    margin-top: 0.45rem;
}

.aznar-admin-inv-vehiclecargo-notes {
    margin-top: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(248, 250, 252, 0.95);
    font-size: 0.84rem;
    color: #334155;
    line-height: 1.55;
}

.aznar-admin-inv-vehiclecargo-notes-title {
    margin: 0 0 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0f172a;
}

.aznar-admin-inv-vehiclecargo-notes-list {
    margin: 0;
    padding-left: 1.05rem;
}

.aznar-admin-inv-vehiclecargo-notes-list li {
    margin-bottom: 0.22rem;
}

.aznar-admin-inv-vehiclecargo-notes-list li:last-child {
    margin-bottom: 0;
}

/* Fleet capacity — column widths fit values (vessel name, status, port, type, numeric caps) */
.aznar-admin-inv-table-wrap--vessels {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.aznar-admin-inv-table--vessels {
    width: auto;
    min-width: 0;
    table-layout: auto;
}

.aznar-admin-inv-table--vessels thead th:nth-child(5),
.aznar-admin-inv-table--vessels thead th:nth-child(6),
.aznar-admin-inv-table--vessels thead th:nth-child(7) {
    text-align: center;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-vessel-name-cell {
    min-width: 9.5rem;
    width: auto;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-v-name {
    width: auto;
    min-width: 9rem;
    max-width: 14rem;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-vessel-st-cell {
    width: 1%;
    white-space: nowrap;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-vessel-st-wrap {
    min-width: 8.75rem;
    max-width: 11.5rem;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-vessel-loc-cell {
    min-width: 10.5rem;
    width: auto;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-vessel-location-select {
    width: auto;
    min-width: 10rem;
    max-width: 15.5rem;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-vessel-type-cell {
    width: 1%;
    white-space: nowrap;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-v-type {
    width: auto;
    min-width: 7.5rem;
    max-width: 10.5rem;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-vessel-num-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-v-seats,
.aznar-admin-inv-table--vessels .aznar-admin-inv-v-veh {
    width: 4.25rem;
    min-width: 3.75rem;
    max-width: 5.5rem;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-v-wt {
    width: 5rem;
    min-width: 4.5rem;
    max-width: 6.5rem;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}

.aznar-admin-inv-table--vessels .aznar-admin-inv-actions {
    width: 1%;
    white-space: nowrap;
    padding-left: 4px;
    padding-right: 4px;
}

.aznar-admin-inv-table .aznar-admin-inv-v-type {
    min-width: 9.5rem;
}

.aznar-admin-inv-select.aznar-admin-inv-port-dest--paired {
    background: #f1f5f9;
    color: #334155;
    cursor: not-allowed;
    opacity: 0.92;
}

.aznar-admin-inv-table--pricing-phonline .aznar-admin-inv-pr-origin,
.aznar-admin-inv-table--pricing-phonline .aznar-admin-inv-pr-dest,
.aznar-admin-inv-table--pricing-phonline .aznar-admin-inv-pr-category {
    min-width: 9.5rem;
}

.aznar-admin-inv-pricing-section {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.aznar-admin-inv-pricing-section:first-of-type {
    margin-top: 0.35rem;
    padding-top: 0;
    border-top: none;
}

.aznar-admin-inv-pricing-section-title {
    margin: 0 0 0.45rem;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.aznar-admin-inv-th-peso {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.aznar-admin-inv-th-peso .fa-peso-sign {
    color: #059669;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-v,
.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-origin,
.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-dest {
    min-width: 9.5rem;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-dep-cell {
    width: 1%;
    white-space: nowrap;
}

.aznar-admin-inv-sch-dep-wrap {
    position: relative;
    display: inline-block;
    vertical-align: top;
    min-width: 8.75rem;
    max-width: 11rem;
    box-sizing: border-box;
}

.aznar-admin-inv-sch-dep-status-msg {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0.65rem;
    box-sizing: border-box;
    font-size: 0.84rem;
    line-height: 1.4;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 6px;
    pointer-events: none;
    animation: aznarAdminInvSchDepStatusBlink 1.1s ease-in-out infinite;
}

.aznar-admin-inv-sch-dep-wrap--suspended .aznar-admin-inv-sch-dep-status-msg {
    color: #b91c1c;
    background: rgba(254, 242, 242, 0.95);
    border: 2px solid #ef4444;
}

.aznar-admin-inv-sch-dep-wrap--cancelled .aznar-admin-inv-sch-dep-status-msg {
    color: #dc2626;
    background: rgba(255, 241, 242, 0.95);
    border: 2px solid #dc2626;
}

.aznar-admin-inv-sch-dep-wrap--blocked .aznar-admin-inv-sch-dep {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

@keyframes aznarAdminInvSchDepStatusBlink {
    0%,
    100% {
        border-color: #ef4444;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.28);
        opacity: 1;
    }
    50% {
        border-color: #b91c1c;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.45);
        opacity: 0.88;
    }
}

.aznar-admin-inv-sch-dep-wrap--cancelled .aznar-admin-inv-sch-dep-status-msg {
    animation-name: aznarAdminInvSchDepStatusCancelledBlink;
}

@keyframes aznarAdminInvSchDepStatusCancelledBlink {
    0%,
    100% {
        border-color: #dc2626;
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.28);
        opacity: 1;
    }
    50% {
        border-color: #991b1b;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.45);
        opacity: 0.88;
    }
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-dep {
    width: auto;
    min-width: 6.75rem;
    max-width: 11rem;
    padding-right: 1.75rem;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-st-cell {
    width: 1%;
    white-space: nowrap;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-st {
    width: auto;
    min-width: 8.75rem;
    max-width: 11rem;
    font-weight: 600;
}

.aznar-admin-inv-sch-st-wrap {
    position: relative;
    display: inline-block;
    min-width: 8.75rem;
    max-width: 11rem;
    vertical-align: top;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

.aznar-admin-inv-sch-st-wrap.aznar-admin-inv-sch-st--active {
    border-color: #16a34a;
    background: #f0fdf4;
}

.aznar-admin-inv-sch-st-wrap.aznar-admin-inv-sch-st--suspended {
    border-color: #dc2626;
    background: #fef2f2;
}

.aznar-admin-inv-sch-st-wrap.aznar-admin-inv-sch-st--cancelled {
    border-color: #dc2626;
    background: #fff1f2;
}

.aznar-admin-inv-sch-st-wrap:focus-within {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.aznar-admin-inv-sch-st-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 5px 1.75rem 5px 0.65rem;
    box-sizing: border-box;
    font-size: 0.84rem;
    line-height: 1.4;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.aznar-admin-inv-sch-st-label.aznar-admin-inv-sch-st--active {
    color: #15803d;
}

.aznar-admin-inv-sch-st-label.aznar-admin-inv-sch-st--suspended {
    color: #b91c1c;
}

.aznar-admin-inv-sch-st-label.aznar-admin-inv-sch-st--cancelled {
    color: #dc2626;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-st-wrap .aznar-admin-inv-sch-st {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 5px 1.75rem 5px 0.65rem;
    font-weight: 700;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
}

.aznar-admin-inv-sch-st--active {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #15803d;
}

.aznar-admin-inv-sch-st--suspended {
    border-color: #dc2626;
    background: #fef2f2;
    color: #991b1b;
}

.aznar-admin-inv-sch-st--cancelled {
    border-color: #dc2626;
    background: #fff1f2;
    color: #dc2626;
}

.aznar-admin-inv-select.aznar-admin-inv-sch-st.aznar-admin-inv-sch-st--active:not(:focus) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.aznar-admin-inv-select.aznar-admin-inv-sch-st.aznar-admin-inv-sch-st--suspended:not(:focus) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.aznar-admin-inv-select.aznar-admin-inv-sch-st.aznar-admin-inv-sch-st--cancelled:not(:focus) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.aznar-admin-inv-sch-st-wrap:focus-within .aznar-admin-inv-sch-st-label {
    visibility: hidden;
}

.aznar-admin-inv-sch-st-wrap:focus-within .aznar-admin-inv-sch-st {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
}

.aznar-admin-inv-vessel-st-cell {
    width: 1%;
    white-space: nowrap;
}

.aznar-admin-inv-vessel-loc-cell {
    min-width: 11.5rem;
}

.aznar-admin-inv-vessel-loc-cell .aznar-admin-inv-vessel-location-select {
    min-width: 11rem;
    max-width: 16rem;
}

.aznar-admin-inv-vessel-st-wrap {
    position: relative;
    display: inline-block;
    min-width: 9.5rem;
    max-width: 12.5rem;
    vertical-align: top;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

.aznar-admin-inv-vessel-st-wrap.aznar-admin-inv-vessel-st--active {
    border-color: #16a34a;
    background: #f0fdf4;
}

.aznar-admin-inv-vessel-st-wrap.aznar-admin-inv-vessel-st--docked {
    border-color: #ca8a04;
    background: #fefce8;
}

.aznar-admin-inv-vessel-st-wrap.aznar-admin-inv-vessel-st--standby {
    border-color: #ea580c;
    background: #fff7ed;
}

.aznar-admin-inv-vessel-st-wrap.aznar-admin-inv-vessel-st--under-repair {
    border-color: #dc2626;
    background: #fef2f2;
}

.aznar-admin-inv-vessel-st-wrap:focus-within {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.aznar-admin-inv-vessel-st-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 5px 1.75rem 5px 0.65rem;
    box-sizing: border-box;
    font-size: 0.84rem;
    line-height: 1.4;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.aznar-admin-inv-vessel-st-label.aznar-admin-inv-vessel-st--active {
    color: #15803d;
}

.aznar-admin-inv-vessel-st-label.aznar-admin-inv-vessel-st--docked {
    color: #a16207;
}

.aznar-admin-inv-vessel-st-label.aznar-admin-inv-vessel-st--standby {
    color: #c2410c;
}

.aznar-admin-inv-vessel-st-label.aznar-admin-inv-vessel-st--under-repair {
    color: #b91c1c;
}

.aznar-admin-inv-vessel-status-select {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 5px 1.75rem 5px 0.65rem;
    font-weight: 700;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.aznar-admin-inv-vessel-st-wrap:focus-within .aznar-admin-inv-vessel-st-label {
    visibility: hidden;
}

.aznar-admin-inv-vessel-st-wrap:focus-within .aznar-admin-inv-vessel-status-select {
    color: #1e293b !important;
    -webkit-text-fill-color: currentColor !important;
    border: none !important;
    box-shadow: none !important;
}

.aznar-admin-inv-vessel-st-wrap .aznar-admin-inv-vessel-status-select:focus {
    outline: none;
    border: none !important;
    box-shadow: none !important;
}

.aznar-admin-inv-vessel-status-select option.aznar-admin-inv-vessel-st-opt--active {
    color: #15803d !important;
    font-weight: 700;
}

.aznar-admin-inv-vessel-status-select option.aznar-admin-inv-vessel-st-opt--docked {
    color: #a16207 !important;
    font-weight: 700;
}

.aznar-admin-inv-vessel-status-select option.aznar-admin-inv-vessel-st-opt--standby {
    color: #c2410c !important;
    font-weight: 700;
}

.aznar-admin-inv-vessel-status-select option.aznar-admin-inv-vessel-st-opt--under-repair {
    color: #b91c1c !important;
    font-weight: 700;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-notes-cell {
    min-width: 12rem;
    width: 20%;
    max-width: 28rem;
    vertical-align: top;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-notes {
    display: block;
    width: 100%;
    min-height: 2.25rem;
    max-height: 14rem;
    padding: 5px 8px;
    resize: none;
    overflow-x: hidden;
    overflow-y: hidden;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    field-sizing: content;
}

.aznar-admin-inv-table .aznar-admin-inv-ves {
    min-width: 9.5rem;
}

.aznar-admin-inv-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 12px;
    padding: 12px 14px 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    max-width: 100%;
    box-sizing: border-box;
}

.aznar-admin-inv-card-title {
    margin: 0 0 4px 0;
    font-size: 1.02rem;
    line-height: 1.35;
    color: #0f172a;
}

.aznar-admin-inv-card-desc {
    margin: 0 0 10px 0;
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.55;
}

.aznar-admin-inv-card > .btn {
    margin-top: 2px;
}

.aznar-admin-inv-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.aznar-admin-inv-subtab {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #64748b;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: color 0.2s, border-color 0.2s, transform 0.15s;
    animation: aznarInvTabFadingGlow 3.4s ease-in-out infinite;
}

.aznar-admin-inv-subtab[data-aznar-admin-inv-inv-sub="0"] {
    background: linear-gradient(135deg, rgba(254, 249, 195, 0.95) 0%, rgba(253, 224, 71, 0.55) 100%);
    animation-delay: 0.2s;
}

.aznar-admin-inv-subtab[data-aznar-admin-inv-inv-sub="1"] {
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.95) 0%, rgba(125, 211, 252, 0.5) 100%);
    animation-delay: 0.65s;
}

.aznar-admin-inv-subtab[data-aznar-admin-inv-inv-sub="2"] {
    background: linear-gradient(135deg, rgba(224, 231, 255, 0.95) 0%, rgba(165, 180, 252, 0.55) 100%);
    animation-delay: 1.1s;
}

.aznar-admin-inv-subtab:hover {
    color: #334155;
    transform: translateY(-1px);
}

.aznar-admin-inv-subtab[data-aznar-admin-inv-inv-sub="0"].is-active {
    background: linear-gradient(135deg, #fef08a 0%, #facc15 50%, #fffbeb 100%);
    border-color: #eab308;
    color: #713f12;
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.3), 0 0 18px rgba(250, 204, 21, 0.25);
}

.aznar-admin-inv-subtab[data-aznar-admin-inv-inv-sub="1"].is-active {
    background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 50%, #f0f9ff 100%);
    border-color: #0ea5e9;
    color: #0c4a6e;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3), 0 0 18px rgba(56, 189, 248, 0.25);
}

.aznar-admin-inv-subtab[data-aznar-admin-inv-inv-sub="2"].is-active {
    background: linear-gradient(135deg, #c7d2fe 0%, #818cf8 50%, #eef2ff 100%);
    border-color: #6366f1;
    color: #312e81;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3), 0 0 18px rgba(129, 140, 248, 0.25);
}

.aznar-admin-inv-inv-subpanel {
    display: none;
}

.aznar-admin-inv-inv-subpanel.is-active {
    display: block;
}

.aznar-admin-inv-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 8px;
    width: fit-content;
    max-width: 100%;
}

.aznar-admin-inv-table {
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    line-height: 1.45;
    min-width: 640px;
    background: #fff;
    table-layout: auto;
}

.aznar-admin-inv-table--wide {
    min-width: 880px;
}

.aznar-admin-inv-table thead th {
    text-align: left;
    padding: 8px 10px;
    background: linear-gradient(180deg, #1e3a5f 0%, #0f2942 100%);
    color: #f8fafc;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.35;
    border-bottom: 2px solid #38bdf8;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.35);
}

.aznar-admin-inv-table--offices thead th {
    border-bottom-color: #fb923c;
}

.aznar-admin-inv-table--tellers thead th {
    border-bottom-color: #818cf8;
}

.aznar-admin-inv-table--schedule thead th {
    border-bottom-color: #a78bfa;
}

.aznar-admin-inv-table--pricing-phonline thead th {
    border-bottom-color: #34d399;
}

.aznar-admin-inv-table--vehiclecargo thead th {
    border-bottom-color: #fbbf24;
}

.aznar-admin-inv-table--bracket-reference thead th {
    border-bottom-color: #94a3b8;
}

.aznar-admin-inv-table--office-users thead th {
    border-bottom-color: #fb923c;
}

.aznar-admin-inv-table thead th .aznar-admin-inv-th-peso {
    color: #fef08a;
}

.aznar-admin-inv-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.aznar-admin-inv-table tbody tr:hover td {
    background: #fafbfc;
}

.aznar-admin-inv-input,
.aznar-admin-inv-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.4;
    color: #1e293b;
    background: #fff;
}

.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-from,
.aznar-admin-inv-table--schedule .aznar-admin-inv-sch-to {
    width: auto;
    min-width: 8.75rem;
}

.aznar-admin-inv-input:focus,
.aznar-admin-inv-select:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Closed vessel status: label overlay carries bold + color; select keeps tinted chrome */
.aznar-admin-inv-select.aznar-admin-inv-vessel-status-select.aznar-admin-inv-vessel-st--active:not(:focus) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.aznar-admin-inv-select.aznar-admin-inv-vessel-status-select.aznar-admin-inv-vessel-st--docked:not(:focus) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.aznar-admin-inv-select.aznar-admin-inv-vessel-status-select.aznar-admin-inv-vessel-st--standby:not(:focus) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.aznar-admin-inv-select.aznar-admin-inv-vessel-status-select.aznar-admin-inv-vessel-st--under-repair:not(:focus) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.aznar-admin-inv-input:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.aznar-admin-inv-dep-cell {
    min-width: 9.5rem;
    max-width: 12rem;
}

.aznar-admin-inv-dep-cell .aznar-admin-inv-select {
    margin-bottom: 4px;
}

.aznar-admin-inv-tick-label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 0.76rem;
    line-height: 1.35;
    color: #64748b;
    cursor: pointer;
    user-select: none;
}

.aznar-admin-inv-tick-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0ea5e9;
    cursor: pointer;
}

.aznar-admin-inv-actions {
    width: 40px;
    text-align: center;
    vertical-align: middle;
}

.aznar-admin-inv-sch-actions-cell {
    width: 1%;
    white-space: nowrap;
    min-width: 8.5rem;
    overflow: visible;
}

.aznar-admin-inv-sch-actions-cell .aznar-admin-inv-save-sch {
    margin-right: 4px;
}

.aznar-admin-inv-sch-save-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.aznar-admin-inv-sch-save-hint {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.35);
    z-index: 4;
    pointer-events: none;
}

.aznar-admin-inv-sch-save-hint.is-visible {
    display: inline-flex;
    animation: aznar-admin-inv-sch-save-hint-pulse 1.35s ease-in-out infinite;
}

.aznar-admin-inv-sch-save-hint-text {
    letter-spacing: 0.01em;
}

.aznar-admin-inv-sch-save-hint-arrow {
    display: inline-flex;
    font-size: 0.85rem;
    opacity: 0.95;
}

@keyframes aznar-admin-inv-sch-save-blink {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(14, 165, 233, 0);
        transform: scale(1.06);
    }
}

@keyframes aznar-admin-inv-sch-save-hint-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.82; }
}

.aznar-admin-inv-save-sch.is-ready-blink {
    animation: aznar-admin-inv-sch-save-blink 1.1s ease-in-out infinite;
}

.aznar-admin-inv-schedule-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.aznar-admin-inv-table .btn-sm {
    padding: 4px 8px;
    font-size: 0.78rem;
}

.aznar-admin-inv-table--offices .aznar-admin-inv-office-name-cell {
    padding-top: 0.55rem;
}

.aznar-admin-inv-pricing-section .aznar-admin-inv-table-wrap {
    width: 100%;
}

@media (max-width: 768px) {
    .aznar-admin-inv {
        padding: 2px 0 16px;
    }

    .aznar-admin-inv-hero {
        padding: 12px 14px;
        margin-bottom: 10px;
    }

    .aznar-admin-inv-main-tabs {
        gap: 4px 5px;
        margin-bottom: 10px;
    }

    .aznar-admin-inv-main-tab {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .aznar-admin-inv-card {
        padding: 10px 12px 12px;
    }

    .aznar-admin-inv-table-wrap {
        width: 100%;
    }
}

/* --- ACM: Aznar Central Monitoring (command center placeholders) --- */
.content-panel-acm-central {
    background: linear-gradient(165deg, #ecfeff 0%, #f0f9ff 38%, #eef2ff 100%);
}

.acm-central-panel {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4px 2px 24px;
    color: #0f172a;
    line-height: 1.5;
}

.acm-central-hero {
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(186, 230, 253, 0.45));
    border: 1px solid rgba(14, 165, 233, 0.25);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.acm-central-title {
    margin: 0 0 6px;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.acm-central-title i {
    margin-right: 8px;
    color: #0284c7;
}

.acm-central-lead {
    margin: 0;
    max-width: 58ch;
    font-size: 0.92rem;
    color: #475569;
}

.acm-central-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0c4a6e;
    background: rgba(224, 242, 254, 0.9);
    border: 1px solid rgba(14, 165, 233, 0.35);
}

.acm-central-main-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.acm-central-main-tab {
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.85);
    color: #334155;
    padding: 8px 13px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.82rem;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.acm-central-main-tab i {
    margin-right: 5px;
    opacity: 0.85;
}

.acm-central-main-tab:hover {
    border-color: #38bdf8;
    color: #0369a1;
}

.acm-central-main-tab.is-active {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.acm-central-tab-panel {
    display: none;
}

.acm-central-tab-panel.is-active {
    display: block;
}

.acm-central-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.acm-central-kpi-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.acm-central-kpi {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.acm-central-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.acm-central-kpi--teal .acm-central-kpi-icon { background: #ccfbf1; color: #0f766e; }
.acm-central-kpi--blue .acm-central-kpi-icon { background: #dbeafe; color: #1d4ed8; }
.acm-central-kpi--indigo .acm-central-kpi-icon { background: #e0e7ff; color: #4338ca; }
.acm-central-kpi--cyan .acm-central-kpi-icon { background: #cffafe; color: #0e7490; }
.acm-central-kpi--amber .acm-central-kpi-icon { background: #fef3c7; color: #b45309; }
.acm-central-kpi--rose .acm-central-kpi-icon { background: #ffe4e6; color: #be123c; }

.acm-central-kpi-label {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
}

.acm-central-kpi-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.acm-central-kpi-sub {
    display: block;
    font-size: 0.74rem;
    color: #94a3b8;
}

.acm-central-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.acm-central-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.acm-central-dashboard-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.acm-central-dashboard-widget-head .acm-central-widget-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.acm-central-dashboard-head-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 0.78rem;
    color: #64748b;
    margin-left: auto;
}

.acm-central-dashboard-widget-mount {
    min-height: 2rem;
}

.acm-central-widget--financial .acm-central-dashboard-widget-mount,
.acm-central-widget--warehouse-alerts .acm-central-dashboard-widget-mount,
.acm-central-widget--recent-alerts .acm-central-dashboard-widget-mount {
    max-height: 200px;
    overflow: auto;
}

.acm-central-widget--financial.is-expanded,
.acm-central-widget--warehouse-alerts.is-expanded,
.acm-central-widget--recent-alerts.is-expanded {
    grid-column: 1 / -1;
}

.acm-central-widget--financial.is-expanded {
    background: linear-gradient(165deg, #f8fafc 0%, #f0f9ff 42%, #ecfdf5 100%);
    border-color: rgba(14, 165, 233, 0.28);
    color: #1e293b;
    padding: 16px 18px 20px;
    box-shadow: 0 10px 28px rgba(14, 116, 144, 0.1);
}

.acm-central-widget--financial.is-expanded .acm-central-financial-title,
.acm-central-widget--financial.is-expanded .acm-central-widget-title {
    color: #0f172a;
}

.acm-central-widget--financial.is-expanded .acm-central-fleet-expand-btn {
    color: #0369a1;
    background: linear-gradient(180deg, #fff 0%, #e0f2fe 100%);
    border-color: rgba(14, 165, 233, 0.45);
}

.acm-central-widget--financial.is-expanded .acm-central-dashboard-head-meta {
    color: #64748b;
}

.acm-central-widget--financial.is-expanded .acm-central-dashboard-head-meta strong {
    color: #0284c7;
}

.acm-central-widget--financial.is-expanded .acm-central-dashboard-widget-mount {
    max-height: none;
    overflow: visible;
}

.acm-central-financial-expanded-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.acm-central-financial-section-title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.acm-central-financial-section-title i {
    margin-right: 6px;
    color: #0284c7;
}

.acm-central-financial-section-note,
.acm-central-financial-channel-intro {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
}

.acm-central-financial-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1100px) {
    .acm-central-financial-channel-grid {
        grid-template-columns: 1fr;
    }
}

.acm-central-financial-channel-panel {
    padding: 14px 16px 16px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.acm-central-financial-channel-panel--phonline {
    border-color: rgba(14, 165, 233, 0.35);
    background: linear-gradient(180deg, #fff 0%, #f0f9ff 100%);
}

.acm-central-financial-channel-panel--teller {
    border-color: rgba(16, 185, 129, 0.32);
    background: linear-gradient(180deg, #fff 0%, #ecfdf5 100%);
}

.acm-central-financial-channel-panel--phonline .acm-central-financial-channel-title i {
    color: #0284c7;
}

.acm-central-financial-channel-panel--teller .acm-central-financial-channel-title i {
    color: #059669;
}

.acm-central-financial-channel-title {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.acm-central-financial-channel-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid #e2e8f0;
}

.acm-central-financial-channel-stat {
    font-size: 0.78rem;
    color: #64748b;
}

.acm-central-financial-channel-stat strong {
    display: block;
    margin-top: 2px;
    font-size: 0.92rem;
    color: #0f172a;
}

.acm-central-financial-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.acm-central-financial-table {
    width: 100%;
    min-width: 720px;
    font-size: 0.84rem;
}

.acm-central-financial-table--overview {
    min-width: 920px;
}

.acm-central-financial-table thead th {
    background: linear-gradient(180deg, #e0f2fe 0%, #dbeafe 100%);
    color: #0c4a6e;
    font-weight: 700;
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #bae6fd;
}

.acm-central-financial-channel-panel--teller .acm-central-financial-table thead th {
    background: linear-gradient(180deg, #d1fae5 0%, #ccfbf1 100%);
    color: #065f46;
    border-bottom-color: #a7f3d0;
}

.acm-central-financial-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.acm-central-financial-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.acm-central-financial-table tbody tr:hover td {
    background: #f0f9ff;
}

.acm-central-financial-channel-panel--teller .acm-central-financial-table tbody tr:hover td {
    background: #ecfdf5;
}

.acm-central-financial-totals-row td {
    background: #f1f5f9;
    border-top: 2px solid #cbd5e1;
    color: #0f172a;
    font-weight: 600;
}

.acm-central-financial-col-vessel {
    font-weight: 600;
    white-space: nowrap;
    color: #0f172a;
}

.acm-central-financial-vessel-icon {
    color: #0284c7;
    margin-right: 6px;
}

.acm-central-financial-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #475569;
}

.acm-central-financial-col-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #334155;
    font-weight: 500;
}

.acm-central-financial-col-money--sales {
    color: #047857;
    font-weight: 700;
}

.acm-central-financial-col-money--collected,
.acm-central-financial-col-money--ph {
    color: #0369a1;
    font-weight: 600;
}

.acm-central-financial-col-money--teller {
    color: #059669;
    font-weight: 600;
}

.acm-central-financial-col-money--recv {
    color: #b45309;
    font-weight: 600;
}

.acm-central-financial-empty {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.acm-central-widget--warehouse-alerts.is-expanded,
.acm-central-widget--recent-alerts.is-expanded {
    padding: 16px 18px 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.acm-central-widget--warehouse-alerts.is-expanded .acm-central-dashboard-widget-mount,
.acm-central-widget--recent-alerts.is-expanded .acm-central-dashboard-widget-mount {
    max-height: none;
    overflow: visible;
}

.acm-central-warehouse-table {
    width: 100%;
    font-size: 0.84rem;
}

.acm-central-warehouse-expanded-body .acm-central-table-wrap {
    overflow-x: auto;
}

.acm-central-alert-feed--expanded {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acm-central-alert-feed--expanded .acm-central-alert {
    padding: 12px 14px;
    border-radius: 10px;
}

.acm-central-alert-detail {
    margin: 4px 0 0;
    font-size: 0.82rem;
    font-weight: 400;
    color: #64748b;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .acm-central-grid-3 {
        grid-template-columns: 1fr;
    }

    .acm-central-widget--financial.is-expanded,
    .acm-central-widget--warehouse-alerts.is-expanded,
    .acm-central-widget--recent-alerts.is-expanded {
        grid-column: 1 / -1;
    }
}

.acm-central-widget {
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    margin-bottom: 12px;
}

.acm-central-widget-title {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}

.acm-central-widget-title i {
    margin-right: 6px;
    color: #0284c7;
}

.acm-central-widget-note {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: #64748b;
}

.acm-central-map-ph {
    display: none;
}

.acm-central-route-map-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.acm-central-route-map-head-text {
    flex: 1 1 10rem;
    min-width: 0;
}

.acm-central-route-map-title {
    margin: 0 0 2px;
}

.acm-central-route-map-subtitle {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
}

.acm-central-route-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.acm-central-route-map-layer-btns {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

.acm-central-route-map-search-wrap {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 520px;
    position: relative;
    z-index: 1001;
}

.acm-central-route-map-search-field {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    position: relative;
}

.acm-central-route-map-search-icon {
    position: absolute;
    left: 10px;
    color: #64748b;
    font-size: 0.78rem;
    pointer-events: none;
    z-index: 1;
}

.acm-central-route-map-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 6px 72px 6px 28px;
    border: 2px solid #0ea5e9;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #1e293b;
    background: #fff;
    animation: acm-route-map-search-border-blink 1.35s ease-in-out infinite;
}

.acm-central-route-map-search-input:focus {
    outline: none;
    background: #f0f9ff;
}

.acm-central-route-map-search-input::placeholder {
    color: #94a3b8;
}

@keyframes acm-route-map-search-border-blink {
    0%, 100% {
        border-color: #0ea5e9;
        box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.35);
    }
    50% {
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.45);
    }
}

.acm-central-route-map-search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #0284c7;
    background: #0ea5e9;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.acm-central-route-map-search-btn:hover {
    background: #0284c7;
}

.acm-central-route-map-search-status {
    margin: 2px 0 0;
    font-size: 0.68rem;
    color: #64748b;
    line-height: 1.3;
    min-height: 0.9rem;
}

.acm-central-route-map-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1002;
}

.acm-central-route-map-search-result-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 8px 12px;
    cursor: pointer;
}

.acm-central-route-map-search-result-btn:hover {
    background: #f0f9ff;
}

.acm-central-route-map-search-result-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e293b;
}

.acm-central-route-map-search-result-sub {
    font-size: 0.68rem;
    color: #64748b;
}

.acm-central-route-map-pin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.acm-central-route-map-pin-btn:hover {
    background: #f8fafc;
}

.acm-central-route-map-pin-btn.is-active {
    border-color: #7c3aed;
    background: #f5f3ff;
    color: #5b21b6;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.acm-central-route-map-pin-btn .fa-map-pin {
    color: #7c3aed;
}

.acm-central-route-map-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #16a34a;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.acm-central-route-map-save-btn:hover {
    background: #bbf7d0;
}

.acm-central-route-map-save-btn .fa-save {
    color: #15803d;
}

.acm-central-route-map-admin-btn--save {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
}

.acm-central-route-map-admin-btn--save:hover {
    background: #dcfce7;
}

.acm-central-route-map-pin-ports-btn .fa-anchor {
    color: #0284c7;
}

.acm-central-route-map-line-tools {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.acm-central-route-map-line-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.acm-central-route-map-color-btns {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.acm-central-route-map-color-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px #cbd5e1;
    cursor: pointer;
    background: transparent;
}

.acm-central-route-map-color-btn.is-active {
    box-shadow: 0 0 0 2px #0ea5e9;
}

.acm-central-route-map-color-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
}

.acm-central-route-map-weight-btns {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-end;
}

.acm-central-route-map-weight-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-width: 28px;
    height: 28px;
    padding: 2px 4px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.acm-central-route-map-weight-btn.is-active {
    border-color: #0ea5e9;
    background: #e0f2fe;
    box-shadow: 0 0 0 1px #0ea5e9;
}

.acm-central-route-map-weight-bar {
    display: block;
    width: 18px;
    min-height: 2px;
    background: #334155;
    border-radius: 2px;
}

.acm-central-route-map-weight-btn.is-active .acm-central-route-map-weight-bar {
    background: #0369a1;
}

.acm-central-route-map-weight-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1;
}

.acm-central-route-map-route-weight {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 600;
}

.acm-central-route-map-route-popup-meta {
    font-size: 0.75rem;
    color: #64748b;
}

.acm-central-route-map-route-popup-del {
    margin-top: 8px;
}

.acm-central-route-map-admin-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.acm-central-route-map-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.acm-central-route-map-admin-btn:hover {
    background: #fef2f2;
}

.acm-central-route-map-line-btn,
.acm-central-route-map-line-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.acm-central-route-map-line-btn:hover,
.acm-central-route-map-line-cancel-btn:hover {
    background: #f1f5f9;
}

.acm-central-route-map-line-btn.is-active {
    border-color: #0ea5e9;
    background: #e0f2fe;
    color: #0369a1;
}

.acm-central-route-map-line-cancel-btn {
    color: #b45309;
    border-color: #fde68a;
    background: #fffbeb;
}

.acm-central-route-map-line-cancel-btn.is-visible,
.acm-central-route-map-line-tools.is-line-active .acm-central-route-map-line-cancel-btn {
    display: inline-flex !important;
}

.acm-central-route-map-line-tools.is-line-active {
    border-color: #7dd3fc;
    background: #f0f9ff;
}

.acm-central-route-map-line-hint {
    margin: 0 0 8px;
    padding: 6px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0369a1;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 6px;
}

.acm-central-route-map-routes-title {
    margin: 12px 0 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

.acm-central-route-map-routes-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.acm-central-route-map-routes-empty {
    font-size: 0.78rem;
    color: #64748b;
    padding: 4px 0;
}

.acm-central-route-map-route-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.acm-central-route-map-route-swatch {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex-shrink: 0;
}

.acm-central-route-map-route-label {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
}

.acm-central-route-map-route-del {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 4px;
}

.acm-central-route-map-route-del:hover {
    color: #dc2626;
}

.acm-central-port-map-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    color: #0284c7;
    font-size: 1.45rem;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.45));
}

.acm-central-route-map-pin-popup-title--port {
    color: #0369a1;
}

.acm-pin-line-pending .acm-central-port-map-pin,
.acm-pin-line-pending .acm-central-custom-map-pin {
    outline: 3px solid #0ea5e9;
    outline-offset: 2px;
    border-radius: 4px;
}

.acm-central-route-map-leaflet.acm-route-map-line-mode {
    cursor: crosshair;
}

.acm-central-route-map-leaflet.acm-route-map-line-mode .leaflet-marker-icon,
.acm-central-route-map-leaflet.acm-route-map-line-mode .acm-central-port-map-pin-wrap,
.acm-central-route-map-leaflet.acm-route-map-line-mode .acm-central-custom-map-pin-wrap,
.acm-central-route-map-leaflet.acm-route-map-line-mode .acm-central-fleet-map-pin-wrap {
    cursor: crosshair !important;
}

.acm-central-route-map-leaflet.acm-route-map-line-mode .acm-pin-line-pending .acm-central-port-map-pin,
.acm-central-route-map-leaflet.acm-route-map-line-mode .acm-pin-line-pending .acm-central-custom-map-pin {
    outline: 3px solid #0ea5e9;
    outline-offset: 2px;
    border-radius: 4px;
    animation: acm-pin-pending-pulse 1.2s ease-in-out infinite;
}

@keyframes acm-pin-pending-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(14, 165, 233, 0)); }
    50% { filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.85)); }
}

.acm-central-route-map-layout {
    display: block;
}

.acm-central-route-map-main {
    min-width: 0;
}

.acm-central-route-map-layer-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.acm-central-route-map-layer-btn:hover {
    background: #f8fafc;
}

.acm-central-route-map-layer-btn.is-active {
    border-color: #0ea5e9;
    background: #e0f2fe;
    color: #0369a1;
}

.acm-central-route-map-body {
    position: relative;
}

.acm-central-route-map-leaflet {
    min-height: 220px;
    height: 220px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    z-index: 1;
    background: #e2e8f0;
}

.acm-central-route-map-empty {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 10px;
}

.acm-central-route-map-note {
    margin-top: 8px;
}

.acm-central-fleet-map-pin-wrap {
    background: transparent;
    border: none;
}

.acm-central-fleet-map-pin {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.45);
}

.acm-central-fleet-map-pin--active {
    background: #16a34a;
}

.acm-central-fleet-map-pin--docked {
    background: #ca8a04;
}

.acm-central-fleet-map-pin--standby {
    background: #2563eb;
}

.acm-central-fleet-map-pin--under-repair {
    background: #dc2626;
}

.acm-central-fleet-map-popup {
    font-size: 0.85rem;
    line-height: 1.45;
}

.acm-central-fleet-map-popup-loc {
    color: #64748b;
}

.acm-central-fleet-map-popup-st {
    font-weight: 600;
}

.acm-central-fleet-map-popup-st--active {
    color: #16a34a;
}

.acm-central-fleet-map-popup-st--docked {
    color: #ca8a04;
}

.acm-central-fleet-map-popup-st--standby {
    color: #2563eb;
}

.acm-central-fleet-map-popup-st--under-repair {
    color: #dc2626;
}

.leaflet-container.acm-central-route-map-leaflet {
    font-family: inherit;
}

.acm-central-route-map-leaflet.acm-route-map-pin-mode {
    cursor: crosshair;
}

.acm-central-custom-map-pin-wrap {
    background: transparent;
    border: none;
}

.acm-central-custom-map-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    color: #7c3aed;
    font-size: 1.65rem;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.45));
}

.acm-central-route-map-pin-popup {
    min-width: 200px;
}

.acm-central-route-map-pin-popup-title {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 0.88rem;
    color: #5b21b6;
}

.acm-central-route-map-pin-popup-title .fa-map-pin {
    margin-right: 4px;
}

.acm-central-route-map-pin-popup-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.acm-central-route-map-pin-popup-input,
.acm-central-route-map-pin-popup-notes {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    box-sizing: border-box;
}

.acm-central-route-map-pin-popup-notes {
    resize: vertical;
    min-height: 56px;
}

.acm-central-route-map-pin-popup-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.acm-central-route-map-pins-panel {
    display: none;
}

.acm-central-route-map-pins-panel.is-open,
.acm-central-route-map-pins-panel:not([hidden]) {
    display: block;
}

.acm-central-widget--map.is-expanded .acm-central-route-map-pins-panel.is-open,
.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-pins-panel.is-open {
    display: block;
}

.acm-central-route-map-pins-title {
    margin: 0 0 6px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #334155;
}

.acm-central-route-map-pins-title .fa-map-pin {
    color: #7c3aed;
    margin-right: 4px;
}

.acm-central-route-map-pins-hint {
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.acm-central-route-map-pins-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.acm-central-route-map-pin-item {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 6px;
}

.acm-central-route-map-pin-item-main {
    flex: 1;
    min-width: 0;
    text-align: left;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 8px 10px;
    cursor: pointer;
}

.acm-central-route-map-pin-item-main:hover {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.acm-central-route-map-pin-item-title {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    color: #1e293b;
}

.acm-central-route-map-pin-item-title .fa-map-pin {
    color: #7c3aed;
    margin-right: 4px;
}

.acm-central-route-map-pin-item-coords {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 2px;
}

.acm-central-route-map-pin-item-notes {
    display: block;
    font-size: 0.74rem;
    color: #475569;
    margin-top: 4px;
    line-height: 1.35;
}

.acm-central-route-map-pin-item-del {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.acm-central-route-map-pin-item-del:hover {
    background: #fef2f2;
    border-color: #f87171;
}

.acm-central-route-map-pins-empty {
    font-size: 0.8rem;
    color: #64748b;
    padding: 8px 0;
}

.acm-central-widget--map.is-expanded {
    grid-column: 1 / -1;
    padding: 16px 18px 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.acm-central-widget--map.is-expanded .acm-central-route-map-layout {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 300px);
    gap: 14px;
    align-items: stretch;
}

.acm-central-widget--map.is-expanded .acm-central-route-map-pins-panel {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.acm-central-widget--map.is-expanded .acm-central-route-map-leaflet {
    min-height: 420px;
    height: min(52vh, 520px);
}

.acm-central-widget--map.is-expanded .acm-central-route-map-subtitle {
    color: #64748b;
}

.acm-central-widget--map.is-expanded .acm-central-route-map-expand-btn {
    color: #0369a1;
}

@media (max-width: 900px) {
    .acm-central-widget--map.is-expanded .acm-central-route-map-layout {
        grid-template-columns: 1fr;
    }

    .acm-central-widget--map.is-expanded .acm-central-route-map-pins-panel {
        max-height: 220px;
    }

    .acm-central-widget--map.is-expanded .acm-central-route-map-leaflet {
        min-height: 320px;
        height: 360px;
    }
}

body.acm-route-map-fullscreen-open {
    overflow: hidden;
}

.acm-route-map-fullscreen-host {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.42);
}

.acm-route-map-fullscreen-host[hidden] {
    display: none !important;
}

.acm-route-map-fullscreen-host > .acm-central-widget--map {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: none;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22);
}

.acm-central-route-map-head-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.acm-central-route-map-earth-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.acm-central-route-map-earth-btn:hover {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

.acm-central-route-map-earth-btn .fa-globe-americas {
    color: #15803d;
}

.acm-central-route-map-earth-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0369a1;
    text-decoration: none;
}

.acm-central-route-map-earth-link:hover {
    text-decoration: underline;
}

.acm-central-route-map-pin-item-earth {
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #15803d;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.acm-central-route-map-pin-item-earth:hover {
    background: #f0fdf4;
    border-color: #86efac;
}

.acm-central-widget--map.is-map-fullscreen {
    grid-column: 1 / -1 !important;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
}

.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-head,
.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-toolbar {
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
    pointer-events: auto;
}

.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-expand-btn {
    display: none !important;
}

.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-toolbar button,
.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-head-actions button,
.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-search-wrap,
.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-search-input {
    pointer-events: auto;
}

.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr minmax(240px, 300px);
    gap: 14px;
    align-items: stretch;
}

.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-pins-panel {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    min-height: 0;
    max-height: none;
    overflow: auto;
    position: relative;
    z-index: 1000;
    pointer-events: auto;
}

.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-leaflet {
    flex: 1;
    min-height: 0;
    height: 100% !important;
}

.acm-central-widget--map.is-map-fullscreen .acm-central-route-map-fullscreen-btn {
    color: #0369a1;
}

@media (max-width: 900px) {
    .acm-route-map-fullscreen-host {
        padding: 6px;
    }

    .acm-central-widget--map.is-map-fullscreen {
        padding: 12px;
    }

    .acm-central-widget--map.is-map-fullscreen .acm-central-route-map-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .acm-central-widget--map.is-map-fullscreen .acm-central-route-map-pins-panel {
        max-height: 28vh;
    }
}

.acm-central-list-ph {
    margin: 0;
    padding: 0;
    list-style: none;
}

.acm-central-list-ph li {
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.88rem;
}

.acm-central-list-ph--compact li {
    padding: 5px 0;
    font-size: 0.82rem;
}

.acm-central-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.acm-central-widget-head .acm-central-widget-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.acm-central-fleet-snapshot-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.acm-central-fleet-snapshot-head-text {
    flex: 1 1 10rem;
    min-width: 0;
}

.acm-central-fleet-snapshot-title {
    margin: 0 0 2px;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.acm-central-fleet-snapshot-subtitle {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.3;
}

.acm-central-fleet-snapshot-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 0.76rem;
    color: #cbd5e1;
}

.acm-central-fleet-head-stat-label {
    color: #94a3b8;
    font-weight: 500;
}

.acm-central-fleet-head-divider {
    color: #475569;
    font-weight: 400;
}

.acm-central-fleet-expand-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #0369a1;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(14, 165, 233, 0.45);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.acm-central-fleet-expand-btn:hover {
    color: #0c4a6e;
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
    border-color: rgba(2, 132, 199, 0.55);
}

.acm-central-fleet-expand-btn:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 2px;
}

.acm-central-widget--fleet-snapshot .acm-central-fleet-snapshot-mount {
    min-height: 2.5rem;
    max-height: 220px;
    overflow: auto;
    transition: max-height 0.25s ease;
}

.acm-central-widget--fleet-snapshot:not(.is-expanded) .acm-central-fleet-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
}

.acm-central-widget--fleet-snapshot.is-expanded {
    grid-column: 1 / -1;
    background: linear-gradient(165deg, #0f172a 0%, #1e293b 48%, #0f172a 100%);
    border-color: #334155;
    color: #e2e8f0;
    padding: 16px 18px 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-snapshot-subtitle {
    color: #64748b;
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-snapshot-title {
    color: #f8fafc;
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-expand-btn {
    color: #e0f2fe;
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.45);
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-expand-btn:hover {
    color: #f0f9ff;
    background: rgba(56, 189, 248, 0.22);
    border-color: #38bdf8;
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-snapshot-head {
    align-items: center;
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-snapshot-head-meta {
    margin-left: auto;
    margin-right: 4px;
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-head-stat strong {
    color: #7dd3fc;
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-snapshot-mount {
    max-height: none;
    overflow: visible;
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-table-wrap {
    overflow: visible;
    border-color: #334155;
}

.acm-central-fleet-expanded-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.acm-central-fleet-snapshot-note {
    margin-top: 8px;
    margin-bottom: 0;
}

.acm-central-fleet-empty {
    margin: 0;
    padding: 10px 12px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
}

.acm-central-fleet-table-wrap {
    margin: 0 -2px;
    border: 1px solid #e8e0d4;
    border-radius: 8px;
    overflow: hidden;
}

.acm-central-fleet-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: #fff;
}

.acm-central-fleet-table thead th {
    padding: 9px 10px;
    font-weight: 600;
    font-size: 0.76rem;
    color: #5c5348;
    text-align: left;
    white-space: nowrap;
    background: #f3ebe0;
    border-bottom: 1px solid #e0d5c8;
}

.acm-central-fleet-table tbody td {
    padding: 9px 10px;
    color: #334155;
    vertical-align: middle;
    border-bottom: 1px solid #efe8de;
}

.acm-central-fleet-table tbody tr:last-child td {
    border-bottom: none;
}

.acm-central-fleet-table tbody tr:hover td {
    background: #faf8f5;
}

.acm-central-fleet-col-name {
    font-weight: 600;
    color: #1e293b;
    min-width: 7rem;
}

.acm-central-fleet-col-time,
.acm-central-fleet-col-fuel,
.acm-central-fleet-col-crew,
.acm-central-fleet-col-revenue {
    white-space: nowrap;
}

.acm-central-fleet-col-revenue {
    font-weight: 600;
    color: #0f766e;
}

.acm-central-fleet-status,
.acm-central-fleet-maint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.acm-central-fleet-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.acm-central-fleet-dot--active,
.acm-central-fleet-dot--active { background: #22c55e; }
.acm-central-fleet-dot--docked,
.acm-central-fleet-dot--docked { background: #eab308; }
.acm-central-fleet-dot--standby,
.acm-central-fleet-dot--standby { background: #f97316; }
.acm-central-fleet-dot--repair,
.acm-central-fleet-dot--repair { background: #ef4444; }

.acm-central-fleet-vessel-icon {
    margin-right: 6px;
    font-size: 0.82rem;
    color: #38bdf8;
    opacity: 0.9;
}

.acm-central-fleet-col-vessel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    min-width: 8rem;
}

.acm-central-fleet-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.acm-central-fleet-pill--active {
    color: #86efac;
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.35);
}

.acm-central-fleet-pill--docked {
    color: #fde047;
    background: rgba(234, 179, 8, 0.14);
    border-color: rgba(234, 179, 8, 0.35);
}

.acm-central-fleet-pill--standby {
    color: #fdba74;
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.35);
}

.acm-central-fleet-pill--repair {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
}

.acm-central-fleet-fuel {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 6.5rem;
}

.acm-central-fleet-fuel-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}

.acm-central-fleet-fuel-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.2s ease;
}

.acm-central-fleet-fuel-fill--high { background: linear-gradient(90deg, #22c55e, #4ade80); }
.acm-central-fleet-fuel-fill--mid { background: linear-gradient(90deg, #eab308, #facc15); }
.acm-central-fleet-fuel-fill--low { background: linear-gradient(90deg, #ef4444, #f87171); }

.acm-central-fleet-fuel-pct {
    font-size: 0.72rem;
    font-weight: 600;
    color: #cbd5e1;
    min-width: 2.2rem;
    text-align: right;
}

.acm-central-fleet-maint-icon {
    font-size: 0.85rem;
}

.acm-central-fleet-maint--ok .acm-central-fleet-maint-icon { color: #4ade80; }
.acm-central-fleet-maint--soon .acm-central-fleet-maint-icon { color: #fbbf24; }
.acm-central-fleet-maint--repair .acm-central-fleet-maint-icon { color: #f87171; }
.acm-central-fleet-maint--scheduled .acm-central-fleet-maint-icon { color: #60a5fa; }

.acm-central-fleet-maint--ok { color: #bbf7d0; }
.acm-central-fleet-maint--soon { color: #fde68a; }
.acm-central-fleet-maint--repair { color: #fecaca; }
.acm-central-fleet-maint--scheduled { color: #bfdbfe; }

.acm-central-fleet-revenue-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 5.5rem;
}

.acm-central-fleet-revenue-amt {
    font-weight: 700;
    color: #7dd3fc;
    font-size: 0.8rem;
}

.acm-central-fleet-revenue-bar-track {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}

.acm-central-fleet-revenue-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.acm-central-fleet-th-sort i {
    margin-left: 4px;
    font-size: 0.68rem;
    opacity: 0.55;
}

.acm-central-fleet-table--expanded {
    min-width: 56rem;
    background: transparent;
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-table--expanded {
    background: rgba(15, 23, 42, 0.35);
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-table--expanded thead th {
    color: #94a3b8;
    background: rgba(30, 41, 59, 0.85);
    border-bottom-color: #334155;
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-table--expanded tbody td {
    color: #e2e8f0;
    border-bottom-color: rgba(51, 65, 85, 0.65);
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-table--expanded tbody tr:hover td {
    background: rgba(51, 65, 85, 0.35);
}

.acm-central-widget--fleet-snapshot.is-expanded .acm-central-fleet-empty {
    color: #94a3b8;
    background: rgba(30, 41, 59, 0.6);
    border-color: #475569;
}

.acm-central-fleet-analytics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 720px) {
    .acm-central-fleet-analytics {
        grid-template-columns: 1fr;
    }
}

.acm-central-fleet-analytics-card {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.72);
    border: 1px solid #334155;
}

.acm-central-fleet-analytics-title {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #cbd5e1;
}

.acm-central-fleet-line-chart {
    height: 72px;
    margin-bottom: 8px;
}

.acm-central-fleet-line-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.acm-central-fleet-analytics-foot {
    margin: 0;
    font-size: 0.8rem;
    color: #e2e8f0;
}

.acm-central-fleet-analytics-foot strong {
    color: #38bdf8;
    font-weight: 700;
}

.acm-central-fleet-analytics-foot--muted {
    font-size: 0.76rem;
    color: #94a3b8;
    text-align: center;
}

.acm-central-fleet-util-layout {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-height: 88px;
}

.acm-central-fleet-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex: 1;
    height: 72px;
    padding-bottom: 2px;
}

.acm-central-fleet-util-bar {
    flex: 1;
    max-width: 18px;
    border-radius: 4px 4px 2px 2px;
    background: rgba(56, 189, 248, 0.35);
}

.acm-central-fleet-util-bar--hi {
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
}

.acm-central-fleet-gauge {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.acm-central-fleet-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.acm-central-fleet-gauge-bg {
    fill: none;
    stroke: rgba(148, 163, 184, 0.2);
    stroke-width: 7;
}

.acm-central-fleet-gauge-arc {
    fill: none;
    stroke: #38bdf8;
    stroke-width: 7;
    stroke-linecap: round;
}

.acm-central-fleet-gauge-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #f8fafc;
}

.acm-central-fleet-maint-icon--ok { color: #16a34a; }
.acm-central-fleet-maint-icon--soon { color: #d97706; }
.acm-central-fleet-maint-icon--progress { color: #2563eb; }

.acm-central-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.acm-central-dot--ok { background: #22c55e; }
.acm-central-dot--warn { background: #f59e0b; }
.acm-central-dot--idle { background: #94a3b8; }

.acm-central-stat-line {
    margin: 4px 0;
    font-size: 0.88rem;
    color: #475569;
}

.acm-central-widget--settlement {
    margin-top: 12px;
}

.acm-central-settlement-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.acm-central-settlement-subtitle {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
}

.acm-central-settlement-head-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.acm-central-settlement-date-label {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.acm-central-settlement-date {
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #1e293b;
}

.acm-central-settlement-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #0284c7;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.acm-central-settlement-refresh-btn:hover {
    background: #bae6fd;
}

.acm-central-settlement-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    align-items: flex-end;
}

.acm-central-settlement-tab-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}

.acm-central-settlement-tab-download-spacer {
    display: block;
    min-height: 32px;
}

.acm-central-settlement-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    border: 1px solid #16a34a;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.acm-central-settlement-download-btn:hover {
    background: #bbf7d0;
}

.acm-central-settlement-download-btn[hidden] {
    display: none !important;
}

.acm-central-settlement-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.acm-central-settlement-tab.is-active {
    border-color: #0284c7;
    background: #e0f2fe;
    color: #0369a1;
}

.acm-central-settlement-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.acm-central-settlement-summary-card {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.acm-central-settlement-summary-card strong {
    display: block;
    margin-top: 4px;
    font-size: 0.95rem;
    color: #0f172a;
}

.acm-central-settlement-summary-card--alert {
    border-color: #fecaca;
    background: #fff1f2;
}

.acm-central-settlement-summary-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.acm-central-settlement-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}

.acm-central-settlement-pill--ok {
    background: #dcfce7;
    color: #15803d;
}

.acm-central-settlement-pill--warn {
    background: #fef3c7;
    color: #b45309;
}

.acm-central-settlement-pill--pending {
    background: #e0f2fe;
    color: #0369a1;
}

.acm-central-settlement-pill--fail {
    background: #fee2e2;
    color: #b91c1c;
}

.acm-central-settlement-table-wrap {
    max-height: 360px;
    overflow: auto;
}

.acm-central-settlement-table th,
.acm-central-settlement-table td {
    white-space: nowrap;
}

.acm-central-settlement-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.acm-central-settlement-col-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.acm-central-settlement-col-audit {
    max-width: 220px;
    white-space: normal;
    font-size: 0.78rem;
    color: #64748b;
}

.acm-central-settlement-sub {
    color: #64748b;
}

.acm-central-settlement-txn {
    font-size: 0.72rem;
    background: #f1f5f9;
    padding: 2px 5px;
    border-radius: 4px;
}

.acm-central-settlement-overview-lead {
    margin: 0 0 8px;
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.45;
}

.acm-central-settlement-overview-stats {
    margin: 0 0 10px;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: #334155;
}

.acm-central-settlement-schema-note {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
}

.acm-central-settlement-empty {
    margin: 0;
    font-size: 0.84rem;
    color: #64748b;
}

.acm-central-settlement-note {
    margin-top: 10px;
}

.acm-central-chart-ph {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    padding: 8px 4px 0;
}

.acm-central-chart-bar {
    flex: 1;
    min-width: 12px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #38bdf8, #2563eb);
    opacity: 0.85;
}

.acm-central-table-wrap {
    overflow-x: auto;
}

.acm-central-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.acm-central-table th,
.acm-central-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.acm-central-table th {
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
}

.acm-central-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.acm-central-pill--ok { background: #dcfce7; color: #166534; }
.acm-central-pill--warn { background: #fef3c7; color: #92400e; }

.acm-central-partner-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.acm-central-partner-card {
    padding: 14px;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
    text-align: center;
    background: #f8fafc;
}

.acm-central-partner-card i {
    display: block;
    font-size: 1.4rem;
    color: #0284c7;
    margin-bottom: 6px;
}

.acm-central-partner-card span {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.acm-central-partner-card small {
    color: #64748b;
    font-size: 0.78rem;
}

.acm-central-alert-feed {
    margin: 0;
    padding: 0;
    list-style: none;
}

.acm-central-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.86rem;
}

.acm-central-alert time {
    margin-left: auto;
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
}

.acm-central-alert--high i { color: #dc2626; }
.acm-central-alert--med i { color: #d97706; }

.acm-central-guide {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fafc, #f0f9ff);
    border: 1px solid rgba(14, 165, 233, 0.28);
    border-left: 4px solid #0ea5e9;
}

.acm-central-guide-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0c4a6e;
}

.acm-central-guide-intro {
    margin: 0 0 10px;
    font-size: 0.86rem;
    color: #475569;
}

.acm-central-guide-role {
    margin: 10px 0 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.acm-central-guide-list {
    margin: 0 0 8px 1.1rem;
    padding: 0;
    font-size: 0.84rem;
    color: #475569;
}

.acm-central-guide-list li {
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .acm-central-kpi-grid,
    .acm-central-kpi-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .acm-central-grid-2,
    .acm-central-grid-3,
    .acm-central-partner-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .acm-central-kpi-grid,
    .acm-central-kpi-grid--3 {
        grid-template-columns: 1fr;
    }
    .acm-central-main-tab {
        font-size: 0.76rem;
        padding: 6px 10px;
    }
}

/* —— Aznar Service Desk —— */
.content-panel-aznar-service-desk {
    max-width: none;
}

.content-panel-aznar-service-desk .aznar-service-desk-shell {
    padding: 0 4px 24px;
}

.aznar-service-desk-head {
    margin-bottom: 16px;
}

.aznar-service-desk-title {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.aznar-service-desk-title-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.aznar-service-desk-title-icon i {
    font-size: 1.05em;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 40%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aznar-service-desk-title-text {
    background: linear-gradient(135deg, #0891b2 0%, #2563eb 45%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aznar-service-desk-lead {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
    font-size: 14px;
}

.aznar-service-desk-placeholder {
    margin-top: 8px;
}

/* —— Aznar Notifier —— */
.content-panel-aznar-notifier {
    max-width: none;
}

.aznar-notifier-shell {
    padding: 0 4px 24px;
}

.aznar-notifier-head {
    margin-bottom: 16px;
}

.aznar-notifier-title {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.aznar-notifier-title-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.aznar-notifier-title-icon i {
    font-size: 1.05em;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 35%, #ea580c 70%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aznar-notifier-title-text {
    background: linear-gradient(135deg, #2563eb 0%, #667eea 28%, #764ba2 52%, #10b981 78%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aznar-notifier-lead {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
    font-size: 14px;
}

.aznar-notifier-layout {
    display: grid;
    grid-template-columns: minmax(260px, 32%) 1fr;
    gap: 16px;
    align-items: stretch;
    min-height: calc(100vh - 220px);
}

@media (max-width: 900px) {
    .aznar-notifier-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

.aznar-notifier-roster-col,
.aznar-notifier-main-col {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.aznar-notifier-roster-col {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
}

.aznar-notifier-main-col {
    display: flex;
    flex-direction: column;
    min-height: 520px;
    max-height: calc(100vh - 200px);
}

.aznar-notifier-col-title {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.aznar-notifier-roster-list {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
}

.aznar-notifier-emp-row {
    padding: 10px 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    margin-bottom: 8px;
}

.aznar-notifier-emp-row.is-self {
    border-color: #7dd3fc;
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
}

.aznar-notifier-row-by {
    color: #64748b;
    font-weight: 400;
    font-size: 0.88em;
}

.aznar-notifier-emp-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.aznar-notifier-emp-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aznar-notifier-emp-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.aznar-notifier-emp-status--online {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.aznar-notifier-emp-status--offline {
    background: #94a3b8;
}

.aznar-notifier-emp-name {
    display: block;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.875rem;
}

.aznar-notifier-emp-user {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
}

.aznar-notifier-emp-presence-label {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 2px;
}

.aznar-notifier-emp-row.is-self .aznar-notifier-emp-presence-label {
    color: #047857;
    font-weight: 600;
}

.aznar-notifier-create-tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    gap: 5px;
    margin-top: 10px;
    width: fit-content;
    max-width: 100%;
}

.aznar-notifier-create-tab {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35em;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    height: auto;
    padding: 4px 5px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    background-size: 200% 200%;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.aznar-notifier-create-tab i {
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1;
}

.aznar-notifier-create-tab-text {
    flex: 0 0 auto;
}

.aznar-notifier-create-tab:hover {
    transform: scale(1.02);
}

.aznar-notifier-create-tab:active {
    transform: scale(0.99);
}

/* TR — Cash Out style (royal blue gradient) */
.aznar-notifier-create-tab--tr {
    background-image: linear-gradient(135deg, #3b82f6 0%, #2563eb 30%, #1d4ed8 50%, #dc2626 70%, #fbbf24 100%);
    animation: cashOutBlink 5s ease-in-out infinite;
}

.aznar-notifier-create-tab--tr:hover {
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.45);
}

/* CR — Transfer Amount style (purple / violet gradient) */
.aznar-notifier-create-tab--cr {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #10b981 100%);
    animation: transferAmountBlink 2s ease-in-out infinite;
}

.aznar-notifier-create-tab--cr:hover {
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

/* IR — orange / red gradient (same pill style) */
.aznar-notifier-create-tab--ir {
    background-image: linear-gradient(135deg, #f97316 0%, #ea580c 28%, #dc2626 55%, #b91c1c 78%, #fb923c 100%);
    animation: aznarNotifierIrTabBlink 4s ease-in-out infinite;
}

.aznar-notifier-create-tab--ir:hover {
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.45);
}

/* WO — Cash In style (emerald / forest green gradient) */
.aznar-notifier-create-tab--wo {
    background-image: linear-gradient(135deg, #10b981 0%, #059669 30%, #047857 50%, #065f46 70%, #34d399 100%);
    animation: cashInBlink 5s ease-in-out infinite;
}

.aznar-notifier-create-tab--wo:hover {
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.45);
}

@keyframes aznarNotifierIrTabBlink {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .aznar-notifier-create-tab {
        animation: none;
    }
}

.aznar-notifier-table-section {
    flex: 0 0 45%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e2e8f0;
}

.aznar-notifier-table-wrap {
    overflow: auto;
    flex: 1;
}

.aznar-notifier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.aznar-notifier-table thead th {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    text-align: left;
    padding: 6px 8px;
    font-size: 12px;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    vertical-align: middle;
}

.aznar-notifier-th-sort {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-height: 28px;
    padding: 4px 4px;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
}

.aznar-notifier-th-sort:hover {
    color: #1d4ed8;
    background: rgba(219, 234, 254, 0.55);
}

.aznar-notifier-th-sort.is-active {
    color: #1d4ed8;
}

.aznar-notifier-th-sort-label {
    flex: 1 1 auto;
    min-width: 0;
}

.aznar-notifier-sort-icon {
    flex-shrink: 0;
    font-size: 11px;
    opacity: 0.45;
}

.aznar-notifier-th-sort.is-active .aznar-notifier-sort-icon {
    opacity: 1;
}

.aznar-notifier-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}

.aznar-notifier-table-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

.aznar-notifier-table-row:hover {
    background: #f0f9ff;
}

.aznar-notifier-urgency {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.aznar-notifier-urgency--low { background: #dcfce7; color: #166534; }
.aznar-notifier-urgency--medium { background: #fef9c3; color: #854d0e; }
.aznar-notifier-urgency--high { background: #ffedd5; color: #c2410c; }
.aznar-notifier-urgency--critical { background: #fee2e2; color: #b91c1c; }

.aznar-notifier-chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.aznar-notifier-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    background: #f8fafc;
}

.aznar-notifier-chat-line {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.aznar-notifier-chat-line--system {
    background: #eff6ff;
    border-color: #bfdbfe;
    font-size: 13px;
}

.aznar-notifier-chat-meta {
    font-size: 12px;
    margin-bottom: 4px;
    color: #64748b;
}

.aznar-notifier-chat-body {
    font-size: 14px;
    color: #0f172a;
    word-break: break-word;
}

.aznar-notifier-chat-ts {
    font-weight: 400;
    font-size: 11px;
}

.aznar-notifier-chat-compose {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.aznar-notifier-chat-input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}

.aznar-notifier-empty,
.aznar-notifier-empty-cell {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    padding: 12px;
}

.aznar-notifier-chat-empty {
    color: #94a3b8;
    font-size: 13px;
    padding: 8px 0;
}

.aznar-notifier-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.aznar-notifier-modal[hidden] {
    display: none !important;
}

.aznar-notifier-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.aznar-notifier-modal-card {
    position: relative;
    width: min(560px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
    padding: 0;
}

.aznar-notifier-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.aznar-notifier-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.aznar-notifier-modal-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

.aznar-notifier-create-form {
    padding: 16px;
}

.aznar-notifier-create-form .form-group {
    margin-bottom: 12px;
}

.aznar-notifier-create-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #334155;
}

.aznar-notifier-create-form input[type="text"],
.aznar-notifier-create-form input[type="date"],
.aznar-notifier-create-form textarea,
.aznar-notifier-create-form select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}

.aznar-notifier-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .aznar-notifier-form-row {
        grid-template-columns: 1fr;
    }
}

.aznar-notifier-screenshot-preview img {
    max-width: 100%;
    max-height: 160px;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.aznar-notifier-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.aznar-notifier-detail-body {
    padding: 16px;
}

.aznar-notifier-detail-dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 12px;
    margin: 0;
    font-size: 14px;
}

.aznar-notifier-detail-dl dt {
    font-weight: 700;
    color: #64748b;
}

.aznar-notifier-detail-dl dd {
    margin: 0;
    color: #0f172a;
}

.aznar-notifier-detail-screenshot img {
    max-width: 100%;
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: block;
}

.aznar-notifier-detail-screenshot-actions {
    margin-top: 8px;
}

.aznar-notifier-remove-screenshot-btn {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.aznar-notifier-remove-screenshot-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.aznar-notifier-detail-edit-current-shot .aznar-notifier-remove-screenshot-btn {
    margin-top: 8px;
}

.aznar-notifier-detail-manage {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.aznar-notifier-detail-manage .btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.aznar-notifier-detail-manage .btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.aznar-notifier-detail-edit {
    margin-top: 14px;
    padding: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.aznar-notifier-detail-edit-title {
    margin: 0 0 12px;
    font-size: 0.9375rem;
    color: #334155;
}

.aznar-notifier-detail-edit-form .form-group {
    margin-bottom: 12px;
}

.aznar-notifier-detail-edit-form label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}

.aznar-notifier-detail-edit-form input[type="text"],
.aznar-notifier-detail-edit-form input[type="date"],
.aznar-notifier-detail-edit-form textarea,
.aznar-notifier-detail-edit-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
}

.aznar-notifier-detail-edit-current-shot {
    margin-bottom: 10px;
}

.aznar-notifier-detail-edit-current-shot img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: block;
    margin-bottom: 6px;
}

.aznar-notifier-detail-edit-shot-hint {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.aznar-notifier-pending-remove {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.aznar-notifier-pending-remove i {
    margin-right: 6px;
}

.aznar-notifier-detail-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.aznar-notifier-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.aznar-notifier-status--new { background: #dbeafe; color: #1d4ed8; }
.aznar-notifier-status--acknowledged { background: #fef9c3; color: #854d0e; }
.aznar-notifier-status--assigned { background: #e0e7ff; color: #4338ca; }
.aznar-notifier-status--recovered { background: #dcfce7; color: #166534; }
.aznar-notifier-status--other { background: #f1f5f9; color: #475569; }

.aznar-notifier-next-action {
    margin: 4px 0 16px;
    padding: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.aznar-notifier-next-action-label {
    display: block;
    font-weight: 700;
    font-size: 0.875rem;
    color: #334155;
    margin-bottom: 8px;
}

.aznar-notifier-next-action-row,
.aznar-notifier-assign-team-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.aznar-notifier-next-action-select,
.aznar-notifier-assign-team-select {
    flex: 1 1 200px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    background: #fff;
}

.aznar-notifier-assign-team-wrap {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #cbd5e1;
}

.aznar-notifier-assign-team-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}

.aznar-notifier-detail-action-status {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: #64748b;
}

.aznar-notifier-detail-dl--after-action {
    margin-top: 0;
}

.aznar-notifier-detail-card {
    max-width: 640px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 48px);
    overflow: auto;
}

.aznar-notifier-create-form .req {
    color: #dc2626;
}

/* ——— Aznar Connect (Teams-style) ——— */
.content-panel-aznar-connect .content-panel-inner,
.content-panel.content-panel-aznar-connect {
    padding: 0;
    max-width: none;
}

.aznar-connect-shell {
    --ac-grad-a: #6366f1;
    --ac-grad-b: #06b6d4;
    --ac-grad-c: #8b5cf6;
    --ac-surface: rgba(255, 255, 255, 0.92);
    --ac-border: rgba(148, 163, 184, 0.35);
    min-height: calc(100vh - 120px);
    background: linear-gradient(145deg, #eef2ff 0%, #ecfeff 38%, #f5f3ff 72%, #faf5ff 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.12);
}

.aznar-connect-topbar {
    padding: 18px 22px;
    background: linear-gradient(120deg, var(--ac-grad-a) 0%, var(--ac-grad-b) 55%, var(--ac-grad-c) 100%);
    color: #fff;
}

.aznar-connect-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.aznar-connect-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    backdrop-filter: blur(8px);
}

.aznar-connect-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.aznar-connect-tagline {
    margin: 2px 0 0;
    font-size: 0.875rem;
    opacity: 0.92;
}

.aznar-connect-setup-links {
    margin: 0 16px 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--ac-border, #e2e8f0);
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.aznar-connect-setup-links-lead {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #64748b;
}

.aznar-connect-setup-links-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aznar-connect-setup-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    background: #fff;
    color: #3730a3;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.aznar-connect-setup-link i {
    flex-shrink: 0;
    width: 1.15rem;
    text-align: center;
    color: #6366f1;
}

.aznar-connect-setup-link:hover,
.aznar-connect-setup-link:focus-visible {
    background: #eef2ff;
    border-color: #818cf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.aznar-connect-setup-links--staff-only .aznar-connect-setup-links-lead {
    margin-bottom: 0;
}

@media (min-width: 720px) {
    .aznar-connect-setup-links-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .aznar-connect-setup-link {
        flex: 1 1 calc(50% - 4px);
        min-width: 240px;
    }
}

.aznar-connect-layout {
    display: grid;
    grid-template-columns: 56px 320px 1fr;
    min-height: 560px;
    height: calc(100vh - 220px);
    max-height: 820px;
}

.aznar-connect-rail {
    background: linear-gradient(180deg, #312e81 0%, #1e1b4b 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 8px;
}

.aznar-connect-rail-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

.aznar-connect-rail-btn:hover,
.aznar-connect-rail-btn.is-active {
    background: linear-gradient(135deg, var(--ac-grad-a), var(--ac-grad-b));
    color: #fff;
}

.aznar-connect-sidebar {
    background: var(--ac-surface);
    border-right: 1px solid var(--ac-border);
    display: flex;
    flex-direction: column;
    min-width: 0;
    backdrop-filter: blur(12px);
}

.aznar-connect-search-wrap {
    position: relative;
    padding: 14px 12px 8px;
    z-index: 4;
}

.aznar-connect-suggest {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% - 4px);
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ac-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    z-index: 20;
}

.aznar-connect-suggest-label {
    margin: 0;
    padding: 8px 12px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.aznar-connect-suggest-loading,
.aznar-connect-suggest-empty {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.45;
}

.aznar-connect-suggest-loading i {
    margin-right: 6px;
}

.aznar-connect-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.aznar-connect-suggest-item:hover,
.aznar-connect-suggest-item:focus {
    background: #f1f5f9;
    outline: none;
}

.aznar-connect-avatar--sm {
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.aznar-connect-suggest-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.aznar-connect-suggest-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: #0f172a;
}

.aznar-connect-suggest-sub {
    font-size: 0.72rem;
    color: #64748b;
}

.aznar-connect-suggest-text .aznar-connect-person-mobile {
    margin-top: 0;
}

.aznar-connect-search-btn {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-58%);
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ac-grad-a, #6366f1), var(--ac-grad-b, #8b5cf6));
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 6;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.aznar-connect-search-btn:hover,
.aznar-connect-search-btn:focus-visible {
    filter: brightness(1.06);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.aznar-connect-search-btn:active {
    transform: translateY(-56%) scale(0.97);
}

.aznar-connect-search {
    width: 100%;
    padding: 12px 52px 12px 14px;
    border: 1px solid var(--ac-border);
    border-radius: 12px;
    background: #f8fafc;
    font-size: 16px;
    box-sizing: border-box;
    min-height: 44px;
    touch-action: manipulation;
}

.aznar-connect-search:focus {
    outline: none;
    border-color: var(--ac-grad-a);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.aznar-connect-mobile-search {
    padding: 0 12px 10px;
}

.aznar-connect-mobile-search-label {
    display: block;
    margin: 0 0 6px 2px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
}

.aznar-connect-mobile-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.aznar-connect-mobile-cc-group {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.aznar-connect-mobile-flag {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.aznar-connect-mobile-cc {
    width: 6.75rem;
    min-width: 6.75rem;
    max-width: 6.75rem;
    flex-shrink: 0;
    padding: 8px 4px;
    border: 1px solid var(--ac-border);
    border-radius: 10px;
    background: #f8fafc;
    font-size: 0.78rem;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif;
    box-sizing: border-box;
    cursor: pointer;
}

.aznar-connect-mobile-cc:focus {
    outline: none;
    border-color: var(--ac-grad-a);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.aznar-connect-mobile-local {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--ac-border);
    border-radius: 10px;
    background: #f8fafc;
    font-size: 16px;
    min-height: 44px;
    box-sizing: border-box;
    touch-action: manipulation;
}

.aznar-connect-mobile-local:focus {
    outline: none;
    border-color: var(--ac-grad-a);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.aznar-connect-person-mobile,
.aznar-connect-chat-mob {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 1px;
    min-width: 0;
}

.aznar-connect-person-mob-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aznar-connect-chat-mob {
    margin: 2px 0 0;
    font-size: 0.8rem;
}

.aznar-connect-group-pick-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aznar-connect-group-pick-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.aznar-connect-sidebar-actions {
    padding: 0 12px 10px;
}

.aznar-connect-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 12px;
}

.aznar-connect-person-row,
.aznar-connect-conv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.aznar-connect-person-row:hover,
.aznar-connect-conv-row:hover,
.aznar-connect-conv-row.is-active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.08));
}

.aznar-connect-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ac-grad-a), var(--ac-grad-c));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aznar-connect-avatar--conv {
    font-size: 1rem;
}

.aznar-connect-presence-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    border: 2px solid #fff;
}

.aznar-connect-presence-dot.is-online {
    background: #22c55e;
}

.aznar-connect-person-text,
.aznar-connect-conv-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aznar-connect-person-name,
.aznar-connect-conv-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aznar-connect-person-sub,
.aznar-connect-conv-preview,
.aznar-connect-person-status {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aznar-connect-conv-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.aznar-connect-conv-time {
    font-size: 0.7rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.aznar-connect-person-actions {
    display: flex;
    gap: 4px;
    color: var(--ac-grad-a);
    opacity: 0.7;
}

.aznar-connect-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px);
}

.aznar-connect-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    color: #475569;
}

.aznar-connect-welcome-art {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(6, 182, 212, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--ac-grad-a);
    margin-bottom: 16px;
}

.aznar-connect-welcome h3 {
    margin: 0 0 8px;
    color: #1e293b;
}

.aznar-connect-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.aznar-connect-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ac-border);
    background: rgba(255, 255, 255, 0.7);
}

.aznar-connect-chat-head-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aznar-connect-chat-title {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
}

.aznar-connect-chat-sub {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.aznar-connect-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aznar-connect-msg {
    max-width: 78%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aznar-connect-msg--mine {
    align-self: flex-end;
    align-items: flex-end;
}

.aznar-connect-msg--theirs,
.aznar-connect-msg--system {
    align-self: flex-start;
}

.aznar-connect-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
}

.aznar-connect-msg--mine .aznar-connect-msg-bubble {
    background: linear-gradient(135deg, var(--ac-grad-a), var(--ac-grad-b));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.aznar-connect-msg--theirs .aznar-connect-msg-bubble {
    background: #fff;
    border: 1px solid var(--ac-border);
    color: #1e293b;
    border-bottom-left-radius: 4px;
}

.aznar-connect-msg--system .aznar-connect-msg-bubble {
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    font-size: 0.8rem;
    font-style: italic;
}

.aznar-connect-msg-who,
.aznar-connect-msg-ts {
    font-size: 0.7rem;
    color: #94a3b8;
}

.aznar-connect-compose {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--ac-border);
    background: rgba(255, 255, 255, 0.85);
}

.aznar-connect-compose-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--ac-border);
    border-radius: 24px;
    font-size: 0.9rem;
    background: #fff;
}

.aznar-connect-compose-input:focus {
    outline: none;
    border-color: var(--ac-grad-a);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.aznar-connect-send-btn {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    background: linear-gradient(135deg, var(--ac-grad-a), var(--ac-grad-b));
    border: none;
}

.aznar-connect-empty {
    padding: 16px 12px;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.aznar-connect-sidebar-section-label {
    margin: 10px 8px 4px;
    padding: 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.aznar-connect-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aznar-connect-modal[hidden] {
    display: none !important;
}

.aznar-connect-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}

.aznar-connect-modal-card {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 480px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.25);
    overflow: hidden;
}

.aznar-connect-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: linear-gradient(120deg, var(--ac-grad-a), var(--ac-grad-b));
    color: #fff;
}

.aznar-connect-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.aznar-connect-modal-close {
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.aznar-connect-modal-body {
    padding: 18px;
}

.aznar-connect-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ac-border);
    border-radius: 10px;
    box-sizing: border-box;
}

.aznar-connect-group-pick-list {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 16px;
}

.aznar-connect-group-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
}

.aznar-connect-group-pick:hover {
    background: #f1f5f9;
}

.aznar-connect-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.aznar-connect-call-card {
    text-align: center;
    padding: 28px 24px 24px;
    max-width: 360px;
}

.aznar-connect-call-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ac-grad-a), var(--ac-grad-c));
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aznar-connect-call-status {
    color: #64748b;
    margin: 0 0 20px;
}

.aznar-connect-call-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.aznar-connect-call-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

.aznar-connect-call-btn--accept {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.aznar-connect-call-btn--end {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.menu-item[data-menu="aznarconnect"] i {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.menu-item[data-menu="aznarconnect"].active {
    background-color: rgba(99, 102, 241, 0.12);
    border-left-color: #6366f1;
}

@media (max-width: 900px) {
    .aznar-connect-layout {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto 1fr;
    }

    .aznar-connect-main {
        grid-column: 1 / -1;
        min-height: 360px;
    }
}

@media (max-width: 600px) {
    .aznar-connect-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 480px;
    }

    .aznar-connect-rail {
        flex-direction: row;
        justify-content: center;
        padding: 8px;
    }

    .aznar-connect-sidebar {
        max-height: none;
        min-height: 200px;
    }

    .aznar-connect-search-wrap {
        padding: 10px 10px 6px;
    }

    .aznar-connect-search-btn {
        right: 14px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .aznar-connect-search,
    .aznar-connect-mobile-local {
        font-size: 16px;
        min-height: 48px;
    }

    .aznar-connect-suggest {
        left: 10px;
        right: 10px;
        max-height: min(50vh, 320px);
    }

    .aznar-connect-person-row,
    .aznar-connect-suggest-item {
        min-height: 48px;
    }
}

/* Cash-In QR scanner (GCash / PayMaya receipt verification) */
.cashin-qr-scanner-card {
    margin: 0 0 24px;
    padding: 22px 24px;
    border-radius: 14px;
    border: 2px solid #10b981;
    background: linear-gradient(180deg, #ecfdf5 0%, #fff 72px);
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.12);
}

.cashin-qr-scanner-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cashin-qr-scanner-desc {
    margin: 0 0 16px;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.cashin-qr-amount-row {
    max-width: 320px;
    margin-bottom: 14px;
}

.cashin-qr-amount-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
}

.cashin-qr-reader {
    width: 100%;
    max-width: 360px;
    min-height: 280px;
    margin: 0 auto 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    border: 2px solid #cbd5e1;
}

.cashin-qr-reader video {
    border-radius: 10px;
}

.cashin-qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.cashin-qr-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.cashin-qr-upload-btn {
    cursor: pointer;
    margin: 0;
}

.cashin-qr-result {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
    margin-top: 8px;
}

.cashin-qr-result--success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.cashin-qr-result--error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.cashin-qr-result--info {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #0c4a6e;
}

.cashin-qr-result--warning {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.cashin-qr-limit-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #0d9488;
}

.cashin-qr-limit-note i {
    color: #0d9488;
    margin-right: 4px;
}

.cashin-qr-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.9;
}

.cashin-qr-privacy-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

    @media (max-width: 640px) {
    .cashin-qr-scanner-card {
        padding: 16px;
    }

    .cashin-qr-reader {
        max-width: 100%;
        min-height: 240px;
    }

    .cashin-qr-actions .btn {
        flex: 1 1 calc(50% - 10px);
        min-width: 140px;
    }
}

/* Admin — Cash-In QR audit log (Admin Special Tools → Cash In setup) */
.admin-cashin-qr-audit-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    margin-bottom: 14px;
}

.admin-cashin-qr-audit-filters .form-group {
    margin: 0;
    min-width: 160px;
    flex: 1 1 160px;
}

.admin-cashin-qr-audit-select,
.admin-cashin-qr-audit-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.admin-cashin-qr-audit-input--narrow {
    max-width: 120px;
}

.admin-cashin-qr-audit-actions {
    padding-bottom: 2px;
}

.admin-cashin-qr-audit-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-cashin-qr-audit-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.admin-cashin-qr-audit-stat--ok {
    background: #d1fae5;
    color: #065f46;
}

.admin-cashin-qr-audit-stat--bad {
    background: #fee2e2;
    color: #991b1b;
}

.admin-cashin-qr-audit-stat--muted {
    background: #f1f5f9;
    color: #475569;
    font-weight: 500;
}

.admin-cashin-qr-audit-status {
    margin-bottom: 10px;
    font-size: 13px;
    color: #64748b;
}

.admin-cashin-qr-audit-loading {
    color: #64748b;
}

.admin-cashin-qr-audit-ok {
    color: #065f46;
}

.admin-cashin-qr-audit-err {
    color: #b91c1c;
}

.admin-cashin-qr-audit-results {
    overflow-x: auto;
    min-height: 80px;
}

.admin-cashin-qr-audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-cashin-qr-audit-table th {
    text-align: left;
    padding: 10px;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.admin-cashin-qr-audit-table td {
    padding: 10px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}

.admin-cashin-qr-audit-email,
.admin-cashin-qr-audit-ref {
    word-break: break-all;
    max-width: 180px;
}

.admin-cashin-qr-audit-preview {
    max-width: 220px;
    word-break: break-all;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: #64748b;
}

.admin-cashin-qr-audit-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-cashin-qr-audit-pill--ok {
    background: #d1fae5;
    color: #065f46;
}

.admin-cashin-qr-audit-pill--bad {
    background: #fee2e2;
    color: #991b1b;
}

.admin-cashin-qr-audit-pill--warn {
    background: #fef3c7;
    color: #92400e;
}

.admin-cashin-qr-audit-pill--muted {
    background: #e2e8f0;
    color: #475569;
}

.admin-cashin-qr-audit-empty {
    color: #64748b;
    margin: 0;
}