h1:focus{outline:none}

/* Desktop demo: geniş ekranlarda WPF ana sayfa oranlarını koru. */
.desktop-demo-content{max-width:none;width:100%}
.desktop-home-heading{grid-row:1}
.desktop-notice{grid-row:2}
.desktop-hub-panel{grid-row:3;padding:16px 18px}
.desktop-kpi-strip{grid-row:4;align-self:end}
.desktop-kpi-strip article{height:94px;padding:12px 16px}
.desktop-hub-grid{gap:12px 22px}
.desktop-hub-group{padding:4px 0}
.desktop-hub-group>div{gap:10px}

/* İlk dört grup yukarıda, ikinci dört grup aşağıda kalır.
   Ortadaki esnek satır gelecekte eklenecek işlem butonları için ayrılmıştır. */
.desktop-hub-grid{height:100%;grid-template-rows:auto minmax(70px,1fr) auto}
.desktop-hub-group:nth-child(1){grid-column:1;grid-row:1}
.desktop-hub-group:nth-child(2){grid-column:2;grid-row:1}
.desktop-hub-group:nth-child(3){grid-column:3;grid-row:1}
.desktop-hub-group:nth-child(4){grid-column:4;grid-row:1}
.desktop-hub-group:nth-child(5){grid-column:1;grid-row:3}
.desktop-hub-group:nth-child(6){grid-column:2;grid-row:3}
.desktop-hub-group:nth-child(7){grid-column:3;grid-row:3}
.desktop-hub-group:nth-child(8){grid-column:4;grid-row:3}

@media(max-width:760px){
    .desktop-hub-panel{padding:10px}
    .desktop-kpi-strip article{height:auto;min-height:78px}
    .desktop-hub-grid{grid-template-rows:auto 36px auto}
}

.desktop-user-area form{display:contents}

/* Custom Blazor Inline Modals */
.norix-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 27, 45, 0.5);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    z-index: 9999;
}
.norix-modal {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    width: 90%;
    max-width: 460px;
    box-shadow: 0 24px 70px rgba(15, 27, 45, 0.18);
    border: 1px solid var(--account-line);
    animation: norix-fade-in 0.2s ease-out;
}
@keyframes norix-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.norix-modal h3 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 700;
    color: var(--account-text);
}
.norix-modal p {
    color: var(--account-muted);
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 24px;
}
.norix-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.norix-modal-actions button, .norix-modal-actions a {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.norix-modal-actions .btn-cancel {
    border: 1px solid #dce2e7;
    background: #fff;
    color: #4a5568;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.norix-modal-actions .btn-cancel:hover {
    background: #f7f9fa;
    border-color: #ccd4db;
}
.norix-modal-actions .btn-danger {
    border: 0;
    background: #b93434;
    color: #fff;
}
.norix-modal-actions .btn-danger:hover {
    background: #a12b2b;
}
.norix-modal-actions .btn-primary {
    border: 0;
    background: #ff6b35;
    color: #fff;
}
.norix-modal-actions .btn-primary:hover {
    background: #ef5c28;
}
/* Inline form style inside list */
.team-list form {
    margin: 0;
    display: inline;
}
.team-list select {
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid #edf0f2;
    background: #f5f7f8;
    color: var(--account-text);
    cursor: pointer;
}
/* Filter Controls for Security History */
.security-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
    background: #fff;
    padding: 16px;
    border: 1px solid var(--account-line);
    border-radius: 12px;
}
.security-filters .filter-input {
    flex: 1;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #dce2e7;
    border-radius: 8px;
    font-size: 11px;
    color: var(--account-text);
}
.security-filters .filter-select {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #dce2e7;
    border-radius: 8px;
    font-size: 11px;
    background: #fff;
    color: var(--account-text);
    cursor: pointer;
}
.security-filters button {
    min-height: 40px;
    padding: 0 16px;
    font-size: 11px;
}
.security-table>div {
    display: grid;
    grid-template-columns: 1fr 1.8fr 1.2fr 0.8fr 1.2fr;
    align-items: center;
    padding: 14px 10px;
    border-bottom: 1px solid #edf0f2;
    font-size: 10px;
}
.security-table .head {
    color: var(--account-muted);
    font-size: 8px;
    font-weight: 700;
}
.security-table em {
    font-style: normal;
}
.security-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 8px;
    font-weight: 800;
}
.security-badge.success {
    background: #e7f8ef;
    color: #12815a;
}
.security-badge.danger {
    background: #ffe8e8;
    color: #b93434;
}
.security-badge.neutral {
    background: #f1f3f6;
    color: #596679;
}
.security-badge.warning {
    background: #fff5d9;
    color: #9a6a00;
}
.btn-status-toggle {
    font-size: 8px;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.btn-status-toggle.active {
    background: #ffe8e8;
    color: #b93434;
    border-color: #f5c2c2;
}
.btn-status-toggle.active:hover {
    background: #ffd6d6;
}
.btn-status-toggle.inactive {
    background: #e7f8ef;
    color: #12815a;
    border-color: #cceede;
}
.btn-status-toggle.inactive:hover {
    background: #dbf3e5;
}
.team-member-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Business Selection Page Styles */
.business-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.business-item-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #edf0f2;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}
.business-item-btn:hover {
    border-color: #ff6b35;
    background: #fffbf9;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.05);
}
.business-item-btn.current {
    border-color: #ff6b35;
    background: #fffbf9;
}
.business-initials {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #ff6b35;
    color: #fff;
    display: grid;
    place-items: center;
    font: 700 12px Manrope;
    flex-shrink: 0;
}
.business-item-btn.current .business-initials {
    background: #10b981;
}
.business-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.business-info strong {
    font-size: 13px;
    color: var(--account-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.business-info small {
    font-size: 10px;
    color: var(--account-muted);
}
.current-label {
    font-size: 9px;
    font-weight: 800;
    color: #10b981;
    background: #e7f8ef;
    padding: 4px 8px;
    border-radius: 99px;
}
.select-arrow {
    font-size: 16px;
    color: var(--account-muted);
    transition: transform 0.2s ease;
}
.business-item-btn:hover .select-arrow {
    color: #ff6b35;
    transform: translateX(3px);
}

/* Sidebar Store Switcher Dropdown */
.account-store-card.switcher {
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
}
.account-store-card.switcher:hover {
    background: rgba(255,255,255,0.1);
}
.store-switcher-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--account-sidebar);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-radius: 11px;
    margin-top: 4px;
    z-index: 100;
    overflow: hidden;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.store-switcher-item {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9dacbf;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.store-switcher-item:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.store-switcher-item span {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    display: grid;
    place-items: center;
    font: 700 9px Manrope;
    color: #fff;
    flex-shrink: 0;
}
.store-switcher-item div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.store-switcher-item strong {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.store-switcher-item small {
    font-size: 8px;
    color: #8695aa;
}
.store-switcher-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 4px 0;
}
.store-switcher-all {
    display: block;
    text-align: center;
    padding: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #ff6b35;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.store-switcher-all:hover {
    background: rgba(255,107,53,0.1);
    color: #ff7a4a;
}

/* Demo Layout Store Switcher */
.demo-store-switcher-container {
    position: relative;
    display: inline-block;
}
.demo-store-switcher-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.demo-store-switcher-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: #ff6b35;
}
.demo-store-switcher-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #1e3a5f;
    border: 1px solid #0f2647;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    border-radius: 8px;
    margin-top: 6px;
    width: 200px;
    z-index: 100;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.demo-switcher-item {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 8px 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    color: #d5deea;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.demo-switcher-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.demo-switcher-item strong {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.demo-switcher-item small {
    font-size: 8px;
    color: #9dacbf;
}
.demo-switcher-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 4px 0;
}
.demo-switcher-all {
    display: block;
    text-align: center;
    padding: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #ff6b35;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.demo-switcher-all:hover {
    background: rgba(255,107,53,0.1);
}

/* Email Outbox Queue Table Styles */
.outbox-table-container {
    overflow: auto;
    border: 1px solid var(--account-line);
    border-radius: 12px;
    background: #fff;
}
.outbox-table {
    min-width: 750px;
    display: flex;
    flex-direction: column;
}
.outbox-table .head {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr 2fr 1fr 1fr 1fr;
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--account-line);
    font-size: 9px;
    font-weight: 700;
    color: var(--account-muted);
}
.outbox-row-wrapper {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #edf0f2;
    transition: background 0.15s ease;
}
.outbox-row-wrapper:hover {
    background: #fcfdfe;
}
.outbox-row-wrapper:last-child {
    border-bottom: 0;
}
.outbox-main-row {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr 2fr 1fr 1fr 1fr;
    align-items: center;
    padding: 14px 20px;
    font-size: 11px;
    color: var(--account-text);
}
.outbox-main-row strong {
    font-size: 11px;
    color: var(--account-text);
}
.outbox-main-row span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.outbox-error-row {
    margin: -4px 20px 14px;
    padding: 10px 14px;
    background: #fff5f5;
    border: 1px dashed #f5c2c2;
    border-radius: 8px;
    font-size: 10px;
    color: #b93434;
    line-height: 1.5;
}
.outbox-error-row strong {
    color: #9c2929;
}
.outbox-error-row code {
    font-family: monospace;
    font-size: 10px;
    background: transparent;
    padding: 0;
    color: inherit;
    word-break: break-all;
}


/* Desktop home page grid overrides for training progress layout */
.desktop-home-page {
    display: grid;
    grid-template-columns: 1fr 350px !important;
    grid-template-rows: auto auto 1fr auto !important;
    gap: 0 20px !important;
}
.desktop-home-heading { grid-column: 1 / -1; grid-row: 1; }
.desktop-notice { grid-column: 1 / -1; grid-row: 2; }
.desktop-hub-panel { grid-column: 1; grid-row: 3; }
.training-progress-panel { grid-column: 2; grid-row: 3; }
.desktop-kpi-strip { grid-column: 1 / -1; grid-row: 4; }

@media(max-width: 1100px) {
    .desktop-home-page {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto auto !important;
        gap: 15px 0 !important;
    }
    .desktop-hub-panel { grid-column: 1; grid-row: 3; }
    .training-progress-panel { grid-column: 1; grid-row: 4; margin-top: 10px; }
    .desktop-kpi-strip { grid-column: 1; grid-row: 5; }
}

/* Training Progress Panel Card */
.training-progress-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 480px;
    box-sizing: border-box;
}

.training-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.training-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #a78be8, #9070e2);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.training-header-icon .ui-icon {
    width: 18px;
    height: 18px;
}

.training-panel-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.training-panel-header p {
    font-size: 10px;
    color: #64748b;
    margin: 1px 0 0;
    line-height: 1.3;
}

/* Progress Bar styling */
.training-progress-bar-container {
    margin-bottom: 16px;
}

.training-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #475569;
    margin-bottom: 6px;
}

.training-progress-text strong {
    font-weight: 700;
    color: #1e1b4b;
}

.training-progress-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.training-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ff6b35, #ffa85c);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checklist Items */
.training-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    max-height: 340px;
}

.training-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 4px;
    border: 1px solid transparent;
}

.training-checklist li:hover {
    background: #f8fafc;
}

.training-checklist li.completed {
    background: #f0fdf4;
    border-color: #dcfce7;
}

.training-checklist .checkbox {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #94a3b8;
    margin-top: 1px;
    flex-shrink: 0;
}

.training-checklist li.completed .checkbox {
    color: #16a34a;
}

.training-checklist h4 {
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.training-checklist li.completed h4 {
    color: #166534;
    text-decoration: line-through;
    opacity: 0.8;
}

.training-checklist p {
    font-size: 9px;
    color: #64748b;
    margin: 1px 0 0;
    line-height: 1.3;
}

.training-checklist li.completed p {
    color: #15803d;
    opacity: 0.7;
}

/* Completed celebration banner */
.training-completed-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
    animation: bounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.training-completed-banner .ui-icon {
    width: 20px;
    height: 20px;
}

.training-completed-banner h4 {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}

.training-completed-banner p {
    font-size: 9px;
    margin: 1px 0 0;
    opacity: 0.9;
}

@keyframes bounceIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Loading layout indicators */
.demo-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    width: 100%;
}

.demo-loading-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid #e2e8f0;
    border-top-color: #ff6b35;
    border-radius: 50%;
    animation: demo-spin 1s linear infinite;
    margin-bottom: 12px;
}

.demo-loading-container p {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

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

/* SUPPORT & NOTIFICATIONS STYLE OVERRIDES (PHASE 7) */

/* 1. Support Page Styles */
.support-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--account-line);
    padding-bottom: 8px;
}
.support-tabs button {
    background: transparent;
    border: 0;
    padding: 8px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--account-muted);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}
.support-tabs button:hover {
    color: var(--account-text);
}
.support-tabs button.active {
    color: #ff6b35;
}
.support-tabs button.active::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 0;
    right: 0;
    height: 2px;
    background: #ff6b35;
    border-radius: 2px;
}

.support-loading, .notifications-loading {
    padding: 40px;
    text-align: center;
    color: var(--account-muted);
    font-size: 13px;
    font-weight: 500;
}

.support-empty, .notifications-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--account-line);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.support-empty svg, .notifications-empty-card .empty-icon {
    font-size: 32px;
    color: #a0aec0;
    margin-bottom: 18px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: #f7fafc;
    border-radius: 50%;
}
.support-empty h3, .notifications-empty-card h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--account-text);
    margin: 0 0 8px;
}
.support-empty p, .notifications-empty-card p {
    font-size: 12px;
    color: var(--account-muted);
    max-width: 380px;
    margin: 0;
    line-height: 1.6;
}

/* Priority & Status pills */
.support-priority {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}
.support-priority.low { background: #e2e8f0; color: #4a5568; }
.support-priority.normal { background: #ebf8ff; color: #2b6cb0; }
.support-priority.high { background: #fff5f5; color: #c53030; }
.support-priority.urgent { background: #fff5f5; color: #9b2c2c; font-weight: 800; animation: pulse 2s infinite; }

.support-status-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 700;
}
.support-status-pill.open { background: #e6fffa; color: #234e52; }
.support-status-pill.waitingforcustomer { background: #fffaf0; color: #dd6b20; }
.support-status-pill.inprogress { background: #ebf8ff; color: #2b6cb0; }
.support-status-pill.resolved { background: #f0fdf4; color: #166534; }
.support-status-pill.closed { background: #edf2f7; color: #4a5568; }

/* Modal and inputs for Support */
.support-error {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 11px;
    margin-bottom: 16px;
}
.support-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.support-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--account-text);
}
.support-input, .support-select, .support-textarea {
    border: 1px solid #dce2e7;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    font-family: inherit;
    color: var(--account-text);
    background: #fff;
    transition: border-color 0.15s ease;
}
.support-input:focus, .support-select:focus, .support-textarea:focus {
    outline: 0;
    border-color: #ff6b35;
}
.support-textarea {
    min-height: 120px;
    resize: vertical;
}
.support-file-input {
    font-size: 11px;
    color: var(--account-muted);
}
.file-success {
    font-size: 11px;
    color: #10b981;
    font-weight: 600;
    margin-top: 4px;
}

/* 2. Support Detail Page Styles */
.support-detail-heading {
    margin-bottom: 24px;
}
.support-back-btn {
    font-size: 12px;
    font-weight: 600;
    color: var(--account-muted);
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-block;
    margin-bottom: 8px;
}
.support-back-btn:hover {
    color: var(--account-text);
}
.support-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.support-title-row small {
    font-family: monospace;
    font-size: 11px;
    color: var(--account-muted);
}
.support-title-row h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--account-text);
    margin: 2px 0 0;
}
.support-status-group {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* Feed layout */
.support-messages-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.support-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.support-message-bubble {
    max-width: 85%;
    padding: 16px 20px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--account-line);
}
.support-message-bubble.user-reply {
    align-self: flex-start;
    background: #fff;
    border-bottom-left-radius: 4px;
}
.support-message-bubble.staff-reply {
    align-self: flex-end;
    background: #fcf8f6;
    border-bottom-right-radius: 4px;
    border-color: #ffdcd0;
}
.support-message-bubble header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.support-message-bubble header strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--account-text);
}
.support-message-bubble.staff-reply header strong {
    color: #e0531c;
}
.support-message-bubble header time {
    font-size: 10px;
    color: var(--account-muted);
}
.support-message-bubble .message-body {
    font-size: 12.5px;
    line-height: 1.6;
    color: #2d3748;
    white-space: pre-wrap;
}
.support-message-bubble .message-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f7fafc;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    margin-top: 4px;
    border: 1px solid #edf2f7;
}
.support-message-bubble.staff-reply .message-attachment {
    background: #fff;
}
.support-message-bubble .message-attachment a {
    color: #ff6b35;
    text-decoration: none;
    font-weight: 600;
}
.support-message-bubble .message-attachment a:hover {
    text-decoration: underline;
}

/* Reply form in detail */
.support-reply-form {
    background: #fff;
    border: 1px solid var(--account-line);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.support-reply-form h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--account-text);
    margin: 0 0 16px;
}
.support-form-row {
    display: flex;
    gap: 16px;
}
.support-file-label {
    cursor: pointer;
    font-size: 11px;
    color: var(--account-muted);
}
.support-file-label input[type="file"] {
    display: block;
    margin-top: 4px;
}
.file-success-reply {
    font-size: 11px;
    color: #10b981;
    font-weight: 600;
}

/* Simulator styles */
.support-simulator-options {
    background: #fffaf0;
    border: 1px dashed #fbd38d;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.simulator-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
}
.simulator-toggle input {
    accent-color: #dd6b20;
    width: 15px;
    height: 15px;
}
.simulator-toggle strong {
    color: #c05621;
}
.simulator-status {
    font-size: 11px;
    font-weight: 600;
    color: #7b341e;
    display: flex;
    align-items: center;
    gap: 8px;
}
.simulator-status select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #fbd38d;
    background: #fff;
    font-size: 11px;
    cursor: pointer;
}

.support-reply-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* 3. Notification Page & Badge Styles */
.notification-badge-menu {
    background: #ff6b35;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 99px;
    margin-left: auto;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--account-line);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}
.notification-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
    border-color: #e2e8f0;
}
.notification-item.unread {
    background: #fafbff;
    border-left: 3px solid #ff6b35;
}
.notification-status-indicator {
    width: 14px;
    align-self: center;
    display: flex;
    justify-content: center;
}
.unread-dot {
    width: 7px;
    height: 7px;
    background: #ff6b35;
    border-radius: 50%;
}
.notification-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin: 0 16px 0 6px;
    flex-shrink: 0;
}
.notification-icon-wrapper.orange { background: #fff0eb; color: #ff6b35; }
.notification-icon-wrapper.blue { background: #ebf8ff; color: #2b6cb0; }
.notification-icon-wrapper.purple { background: #faf5ff; color: #805ad5; }
.notification-icon-wrapper.gray { background: #f7fafc; color: #718096; }

.notification-content {
    flex: 1;
    min-width: 0;
}
.notification-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.notification-type-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--account-muted);
}
.notification-item.unread .notification-type-label {
    color: #ff6b35;
}
.notification-time {
    font-size: 10px;
    color: var(--account-muted);
}
.notification-title {
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--account-text);
    margin: 0 0 4px;
}
.notification-body {
    font-size: 12px;
    color: var(--account-muted);
    margin: 0;
    line-height: 1.5;
}
.notification-item.unread .notification-body {
    color: #4a5568;
}

.notification-actions {
    margin-left: 16px;
    align-self: center;
}
.btn-mark-read {
    background: #f7fafc;
    border: 1px solid #edf2f7;
    color: #718096;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-mark-read:hover {
    background: #e6fffa;
    border-color: #b2f5ea;
    color: #319795;
    transform: scale(1.05);
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== Yasal / kurumsal sayfalar (Kullanım Koşulları, Gizlilik, Çerez, KVKK, Hakkımızda, İletişim) ===== */
.legal-hero{padding-bottom:40px}
.legal-section{padding-top:64px}
.legal-content{max-width:820px;margin-left:auto;margin-right:auto}
.legal-content h2{font-family:'Manrope',sans-serif;font-size:21px;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin:38px 0 12px}
.legal-content h2:first-of-type{margin-top:8px}
.legal-content p{color:#4a5568;font-size:16px;line-height:1.75;margin:0 0 16px}
.legal-content a{color:var(--orange-dark);font-weight:600}
.legal-content a:hover{text-decoration:underline}
.legal-content strong{color:var(--navy)}
.legal-updated{font-size:13px;color:var(--muted);margin-bottom:28px!important}
.legal-draft-note{background:#fff8f4;border:1px solid #ffd9c7;border-left:4px solid var(--orange);border-radius:10px;padding:16px 18px;margin-bottom:28px;font-size:14px;line-height:1.6;color:#7a4a32}
.legal-draft-note strong{color:var(--orange-dark)}
.legal-related{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.legal-related span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legal-related a{font-size:14px;font-weight:600;color:var(--navy)}
.legal-related a:hover{color:var(--orange-dark)}
@media (max-width:768px){.legal-content h2{font-size:19px}.legal-content p{font-size:15px}}

/* =====================================================================
   TIPOGRAFI ÖLÇEKLEME (25.06.2026)
   Web (public) tarafında yazılar büyütüldü; demo tarafında hafif artış.
   overrides.css en son yüklendiği için bu değerler app.css'i geçersiz kılar.
   ===================================================================== */

/* ---------- WEB (PUBLIC) TARAFI ---------- */
/* Üst menü */
.public-links .nav-link{font-size:15px}
.nav-login{font-size:15px}
.btn-norix{font-size:15px}
.btn-large{font-size:16px}

/* Hero */
.hero-copy>p{font-size:20px;max-width:560px}
.hero-badge{font-size:12px}

/* Alt sayfa başlıkları (Özellikler, Fiyatlandırma, Yasal sayfalar) */
.subpage-hero p{font-size:19px;line-height:1.7}

/* Bölüm başlıkları ve açıklamalar */
.section-heading p{font-size:19px;line-height:1.65}
.eyebrow,.demo-eyebrow{font-size:11px}

/* Değer kartları */
.value-card h3{font-size:27px}
.value-card p{font-size:17.5px;line-height:1.65}
.dark-card p{font-size:17.5px}
.card-copy a,.card-copy p{font-size:15px}
.feature-number{font-size:12px}

/* Özellikler sayfası (feature-list) */
.feature-list h2{font-size:26px}
.feature-list p{font-size:16.5px;line-height:1.7}
.feature-list li{font-size:15px}

/* Demo çağrı bölümü */
.demo-callout p{font-size:19px}
.callout-checks span{font-size:12.5px}

/* Müşteri yorumları */
.quote-grid blockquote>p{font-size:18px;line-height:1.6}
.quote-grid footer b{font-size:13px}
.quote-grid footer small{font-size:12px}

/* Fiyatlandırma kartları */
.pricing-grid article>p{font-size:15.5px}
.pricing-grid article ul li{font-size:14.5px}
.pricing-grid .price span{font-size:13px}
.pricing-note{font-size:14.5px}

/* Son CTA */
.final-cta p{font-size:18px}

/* Footer */
.footer-main>div>a{font-size:14.5px}
.footer-brand-column p{font-size:14.5px}
.footer-bottom{font-size:12.5px}

/* Giriş / kayıt (auth) sayfaları */
.auth-box>p{font-size:15px}
.auth-visual p{font-size:16px}
.auth-switch{font-size:14px}
.form-field label{font-size:14px}

/* Yasal sayfa gövdesi biraz daha büyük */
.legal-content p{font-size:17px}
.legal-content h2{font-size:22px}

/* ---------- DEMO TARAFI (hafif artış) ---------- */
.desktop-page-title{font-size:18px}
.desktop-home-heading h1{font-size:25px}
.desktop-home-heading p{font-size:13px}
.desktop-hub-group h2{font-size:14px}
.desktop-hub-tile span{font-size:13px}
.desktop-other-group .desktop-hub-tile span{font-size:11px}
.desktop-kpi-strip small{font-size:11px}
.desktop-kpi-strip strong{font-size:18px}
.desktop-kpi-strip em{font-size:10px}

/* Demo eğitim ilerleme paneli */
.training-panel-header h3{font-size:15px}
.training-panel-header p{font-size:11px}
.training-progress-text{font-size:11px}
.training-checklist h4{font-size:12px}
.training-checklist p{font-size:10px}

@media (max-width:768px){
    .hero-copy>p{font-size:17px}
    .section-heading p{font-size:16.5px}
    .subpage-hero p{font-size:16.5px}
    .value-card h3{font-size:23px}
    .desktop-home-heading h1{font-size:20px}
}

/* =====================================================================
   AUTH/GÜVENLİK SAYFALARI — public navbar kaldırıldı (AuthLayout)
   Eski padding/yükseklik değerleri artık olmayan navbar'ı hesaba katıyordu;
   navbar gidince oluşan boşluk burada düzeltiliyor.
   ===================================================================== */
.auth-shell{min-height:100vh}

/* Sağ panel: form dikeyde ortalansın, navbar için bırakılan büyük üst boşluk kalkar */
.auth-panel{padding:48px 55px}

/* Ortalanmış kart sayfaları (şifre sıfırlama, e-posta doğrulama, davet, işletme seçimi) */
.security-page{min-height:100vh;padding:64px 20px 64px;align-items:center}

@media (max-width:520px){
    .auth-panel{padding:36px 22px}
    .security-page{padding:40px 12px}
}

/* =====================================================================
   AUTH SAYFALARI — SITEYE DÖNÜŞ BAĞLANTISI
   Navbar olmadığı için logo artık ana sayfaya dönüş linki.
   ===================================================================== */
/* Koyu sol panelin üstündeki tıklanabilir Norix logosu */
.auth-brand-link{display:inline-flex;align-items:center;gap:10px;color:#fff;margin-bottom:40px;transition:opacity .15s ease}
.auth-brand-link:hover{opacity:.8}
.auth-brand-link .brand-mark,.auth-brand-link .brand-mark svg{width:36px;height:36px}
.auth-brand-link span{font-family:'Manrope',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.04em;color:#fff}

/* Mobil logo da artık link (sağ panel üstü); imleç ve hover */
.auth-mobile-logo{cursor:pointer;transition:opacity .15s ease;width:max-content}
.auth-mobile-logo:hover{opacity:.75}

/* Dar ekranda koyu paneli gizle, sağ paneldeki logo-linki göster */
@media (max-width:820px){
    .auth-page{grid-template-columns:1fr}
    .auth-visual{display:none}
    .auth-panel{padding:40px 24px}
    .auth-mobile-logo{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;color:var(--navy)}
    .auth-mobile-logo .brand-mark,.auth-mobile-logo .brand-mark svg{width:34px;height:34px}
    .auth-mobile-logo b{font:700 20px 'Manrope';letter-spacing:-.04em}
}

/* =====================================================================
   FAZ 2 — DEMO GERÇEK VERİ EKRANLARI
   İade/değişim gerçek satış seçimi, satış geçmişi fiş önizleme, rapor boş
   durumları, POS veresiye ödeme notu, gider listesi için ek stiller.
   Mevcut navy(#0f1b2d)/orange(#ff6b35)/ink token'larıyla uyumlu.
   ===================================================================== */

/* İade/değişim: fiş seçici */
.return-sale-picker{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.return-sale-picker label{font-size:12px;font-weight:700;color:#596679;text-transform:uppercase;letter-spacing:.04em}
.return-sale-picker select{padding:10px 12px;border:1px solid #d7dde5;border-radius:8px;font-size:13px;background:#fff;color:#182437}
.return-sale-picker select:focus{outline:none;border-color:#ff6b35;box-shadow:0 0 0 3px rgba(255,107,53,.12)}

/* Satış durumu rozeti — kısmi/tam iade renkleri */
.xaml-status.success{background:#e7f8ef;color:#12815a}
.xaml-status.warning{background:#fff5d9;color:#9a6a00}
.xaml-status.danger{background:#ffe8e8;color:#b93434}

/* Kaydedildi paneli — hata varyantı */
.saved-panel.error{background:#ffe8e8;color:#b93434}

/* Satış geçmişi — fiş önizleme modalı */
.receipt-preview{max-width:460px}
.receipt-lines-preview{margin:14px 0;border-top:1px dashed #d7dde5;border-bottom:1px dashed #d7dde5;padding:8px 0}
.receipt-preview-head,.receipt-preview-row{display:grid;grid-template-columns:1fr 42px 70px 82px;gap:6px;font-size:12px;padding:5px 0;align-items:center}
.receipt-preview-head{font-weight:800;color:#8695aa;font-size:10px;text-transform:uppercase;letter-spacing:.03em}
.receipt-preview-row span:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.receipt-preview-row.returned{color:#b93434;text-decoration:line-through;opacity:.75}
.receipt-preview-row.returned em{font-style:normal;text-decoration:none;font-size:10px;margin-left:4px}
.receipt-preview-total{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#0f1b2d;padding-top:6px}
.receipt-preview-total strong{font-size:18px}
.modal-note{margin-top:14px;font-size:12px;color:#8695aa;text-align:center}
.history-table .table-empty{text-align:center;color:#8695aa;padding:24px 0;font-size:13px}

/* Raporlar — boş durum metni */
.report-widget .widget-empty{color:#8695aa;font-size:12.5px;padding:12px 0}

/* Dashboard KPI trend — nötr (kıyas yok) */
.desktop-kpi-strip em.neutral{color:#8695aa}

/* POS — veresiye ödeme notu */
.payment-credit-note{margin:10px 0;padding:9px 12px;border-radius:8px;font-size:12px;background:#eef4ff;color:#2b4c86}
.payment-credit-note.warn{background:#fff5d9;color:#9a6a00}

/* POS — otomatik kampanya indirimi satırı ve notu */
.pos-totals p.discount.campaign span{display:inline-flex;align-items:center;gap:5px;color:#12815a}
.pos-totals p.discount.campaign b{color:#12815a}
.payment-campaign-note{display:flex;align-items:center;gap:6px;margin:8px 0;padding:8px 11px;border-radius:8px;font-size:12px;background:#e7f8ef;color:#12815a}
.payment-campaign-note svg{width:14px;height:14px}

/* Modül üstü bilgi notu */
.module-note{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#596679;background:#f5f7fa;border:1px solid #e6ebf1;border-radius:8px;padding:9px 12px;margin:0 0 14px}
.module-note svg{width:15px;height:15px;color:#ff6b35}

/* POS — kupon ve hediye kartı satırları */
.payment-coupon-row,.payment-gift-row{display:flex;gap:8px;align-items:center;margin:10px 0}
.payment-coupon-row input,.payment-gift-row input{flex:1;padding:9px 11px;border:1px solid #d7dde5;border-radius:8px;font-size:13px}
.payment-coupon-row input:focus,.payment-gift-row input:focus{outline:none;border-color:#ff6b35;box-shadow:0 0 0 3px rgba(255,107,53,.12)}
.payment-coupon-row button{padding:9px 14px;border:none;border-radius:8px;background:#0f1b2d;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.payment-coupon-row .coupon-clear{background:#eef1f5;color:#8695aa;padding:9px 12px}
.payment-coupon-msg{font-size:11.5px;margin:-2px 0 8px;padding:6px 10px;border-radius:6px}
.payment-coupon-msg.ok{background:#e7f8ef;color:#12815a}
.payment-coupon-msg.warn{background:#fff5d9;color:#9a6a00}
.gift-balance{font-size:12px;font-weight:700;white-space:nowrap}
.gift-balance.ok{color:#12815a}
.gift-balance.warn{color:#b93434}
.modal-inline-error{background:#ffe8e8;color:#b93434;font-size:12px;padding:8px 11px;border-radius:6px;margin-bottom:10px}

/* POS — karma (split) ödeme */
.split-toggle{width:100%;margin:6px 0 10px;padding:8px;border:1px dashed #ff6b35;border-radius:8px;background:#fff6f1;color:#d95423;font-size:12px;font-weight:700;cursor:pointer}
.split-payments{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.split-row{display:flex;align-items:center;gap:8px}
.split-row span{flex:0 0 108px;font-size:12.5px;font-weight:600;color:#182437}
.split-row input{flex:1;padding:8px 10px;border:1px solid #d7dde5;border-radius:8px;font-size:13px}
.split-row input:focus{outline:none;border-color:#ff6b35;box-shadow:0 0 0 3px rgba(255,107,53,.12)}
.split-row button{padding:8px 10px;border:none;border-radius:8px;background:#eef1f5;color:#596679;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.split-gift-code{width:100%;padding:8px 10px;border:1px solid #d7dde5;border-radius:8px;font-size:13px}
.split-remaining{text-align:right;font-size:13px;font-weight:700;padding:4px 2px;color:#9a6a00}
.split-remaining.ok{color:#12815a}
.split-breakdown{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.split-breakdown span{display:flex;flex-direction:column;background:#f5f7fa;border:1px solid #e6ebf1;border-radius:8px;padding:6px 10px;font-size:11px;color:#596679}
.split-breakdown b{color:#0f1b2d;font-size:13px}

/* Ayarlar — masaüstü-özel (pasif) butonlar ve ipuçları */
.settings-desktop-btn[disabled]{opacity:.55;cursor:not-allowed;display:inline-flex;align-items:center;gap:8px}
.desktop-badge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:#eef1f5;color:#8695aa;border-radius:99px;padding:2px 7px}
.settings-hint{display:block;margin-top:6px;font-size:11.5px;color:#8695aa}

/* Gider listesi ve alım geçmişi */
.expense-list,.purchase-history{margin-top:22px}
.expense-list .section-title,.purchase-history .section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.expense-list .section-title h2,.purchase-history .section-title h2{font-size:15px;color:#0f1b2d;margin:0}
.expense-list .section-title span,.purchase-history .section-title span{font-size:12px;color:#596679}
.expense-list .section-title b,.purchase-history .section-title b{color:#0f1b2d}
.expense-list .money,.purchase-history .money{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.purchase-history .table-empty,.purchase-lines .table-empty{text-align:center;color:#8695aa;padding:20px 0;font-size:13px}

/* CSP: inline style eleme yardımcıları (G7). style="" yerine sınıf. */
.u-dim{opacity:.85}
.u-form-mb{margin-bottom:10px}
.u-form-inline{margin:0;display:inline}
/* Dinamik bar/oran: --pct değişkeni + eksen okuyucu (inline style gerekmez). */
.u-bar-v{height:var(--pct,0%)}
.u-bar-w{width:var(--pct,0%)}
.pct-0{--pct:0%}.pct-5{--pct:5%}.pct-10{--pct:10%}.pct-15{--pct:15%}.pct-20{--pct:20%}
.pct-25{--pct:25%}.pct-30{--pct:30%}.pct-35{--pct:35%}.pct-40{--pct:40%}.pct-45{--pct:45%}
.pct-50{--pct:50%}.pct-55{--pct:55%}.pct-60{--pct:60%}.pct-65{--pct:65%}.pct-70{--pct:70%}
.pct-75{--pct:75%}.pct-80{--pct:80%}.pct-85{--pct:85%}.pct-90{--pct:90%}.pct-95{--pct:95%}
.pct-100{--pct:100%}

/* Özel Blazor yeniden-bağlanma modalı (App.razor #components-reconnect-modal).
   Framework'ün enjekte ettiği inline <style>'ı bastırır → CSP style-src-elem temiz. */
#components-reconnect-modal{display:none;position:fixed;inset:0;z-index:3000;align-items:center;justify-content:center;background:rgba(15,27,45,.55)}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected{display:flex}
.reconnect-card{background:#fff;border-radius:16px;padding:28px 32px;max-width:340px;text-align:center;box-shadow:0 24px 70px rgba(15,27,45,.35);font-family:'DM Sans',system-ui,sans-serif}
.reconnect-spinner{width:34px;height:34px;margin:0 auto 16px;border:3px solid #e6e9ee;border-top-color:#ff6b35;border-radius:50%;animation:reconnect-spin .8s linear infinite}
@keyframes reconnect-spin{to{transform:rotate(360deg)}}
.reconnect-msg{display:none;margin:0;font-size:14px;color:#0f1b2d;font-weight:600;line-height:1.5}
.components-reconnect-show .reconnect-msg-show{display:block}
.components-reconnect-failed .reconnect-msg-failed{display:block}
.components-reconnect-rejected .reconnect-msg-rejected{display:block}
.components-reconnect-failed .reconnect-spinner,
.components-reconnect-rejected .reconnect-spinner{display:none}
.reconnect-reload{display:none;margin-top:16px;padding:9px 18px;background:#ff6b35;color:#fff;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none}
.components-reconnect-failed .reconnect-reload,
.components-reconnect-rejected .reconnect-reload{display:inline-block}