/* Theme brand colors (Upinion) */
:root {
    --brand-primary: #ff7a00; /* Upinion orange */
    --brand-primary-dark: #e65c00;
}
/* Reset i podstawowe style */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: #fafafa;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    color: var(--survey-text, #1d1d1f);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Padding dla footera tylko w ankiecie (nie w panelu admina) */
body:not(:has(.container)) {
    padding-bottom: 100px;
}

@media (max-width: 768px) {
    body:not(:has(.container)) {
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }
}

.container {
    max-width: 600px;
    margin: 60px auto;
    background: #fefefe;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}

/* Ankieta bez sidebara */
.survey-container {
    padding-left: 0 !important;
    padding-bottom: 100px;
    max-width: 600px;
    margin: 0 auto;
}

/* Notification Styles */
.notification-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    width: 90%;
}

.notification {
    background: #fefefe;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e5e7;
    overflow: hidden;
    animation: notification-slide-in 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.notification-error {
    border-left: 4px solid #ff3b30;
}

.notification-success {
    border-left: 4px solid #34c759;
}

.notification-info {
    border-left: 4px solid var(--brand-primary);
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    gap: 12px;
    text-align: center;
}

.notification-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.notification-message {
    font-size: 1em;
    font-weight: 500;
    color: #1d1d1f;
    line-height: 1.4;
}


.notification-fade-out {
    animation: notification-fade-out 0.3s ease forwards;
}

@keyframes notification-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes notification-fade-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Modular Survey Styles */
.progress-container {
    margin: 12px 0;
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e5e7;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: #1d1d1f;
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 25%;
}

.progress-text {
    font-size: 0.9em;
    color: #86868b;
    font-weight: 500;
}

.form-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.form-step.active {
    display: block;
}

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

.step-header {
    text-align: center;
    margin-bottom: 18px;
}

.step-header h2 {
    font-size: 1.4em;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 3px;
}

.step-header p {
    color: #86868b;
    font-size: 0.9em;
    margin-bottom: 0;
}

.step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
    gap: 16px;
}

.btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.btn-primary {
    background: #ff7a00;
    color: #ffffff;
}

.btn-primary:hover {
    background: #e65c00;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 122, 0, 0.3);
}

.btn-secondary {
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #d2d2d7;
}

.btn-secondary:hover {
    background: #e5e5e7;
    transform: translateY(-2px);
}

.btn-success {
    background: #34c759;
    color: #ffffff;
}

.btn-success:hover {
    background: #30a14e;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3);
}

.review-section {
    background: #f8f9fa;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.review-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e7;
}

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

.review-item strong {
    color: #1d1d1f;
    font-weight: 600;
}

.review-item span {
    color: #86868b;
    text-align: right;
}

.header {
    background: #fefefe;
    color: #1d1d1f;
    padding: 8px 60px 15px;
    text-align: center;
    border-bottom: 1px solid #e5e5e7;
}

.header h1 {
    font-size: 1.7em;
    margin-bottom: 4px;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.header p {
    font-size: 0.9em;
    color: #86868b;
    font-weight: 400;
    letter-spacing: -0.2px;
    margin-bottom: 0;
}

/* Komunikaty */
.success-message,
.error-message {
    padding: 24px 60px;
    margin: 0;
    font-weight: 400;
    text-align: center;
    font-size: 1.1em;
}

.success-message {
    background: #fefefe;
    color: #1d1d1f;
    border-bottom: 1px solid #e5e5e7;
}

.error-message {
    background: #fefefe;
    color: #1d1d1f;
    border-bottom: 1px solid #e5e5e7;
}

/* Formularz */
form {
    padding: 25px 60px;
    background: #fefefe;
}

.form-section {
    margin-bottom: 80px;
    padding-bottom: 60px;
    border-bottom: 1px solid #e5e5e7;
}

.form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section h2 {
    color: #1d1d1f;
    margin-bottom: 16px;
    font-size: 2em;
    font-weight: 700;
    letter-spacing: -1px;
}

.section-description {
    color: #86868b;
    font-size: 1.1em;
    margin-bottom: 40px;
    font-weight: 400;
    line-height: 1.6;
}

/* Pola formularza */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    color: #1d1d1f;
    font-size: 0.95em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    font-size: 1em;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #f5f5f7;
    color: #1d1d1f;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #86868b;
    background: #ffffff;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Placeholder styles */
.form-group input::placeholder,
.form-group select::placeholder,
.form-group textarea::placeholder {
    color: #86868b;
    opacity: 1;
}

/* Specific styles for phone input */
.form-group input[type="tel"] {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    font-size: 1.1em;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #f5f5f7;
    color: #1d1d1f;
    -webkit-appearance: none;
    appearance: none;
}

.form-group input[type="tel"]:focus {
    outline: none;
    border-color: #86868b;
    background: #ffffff;
}

.form-group input[type="tel"]::placeholder {
    color: #86868b;
    opacity: 1;
}

/* System gwiazdek */
.rating-group {
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
}

.rating-group label {
    display: block;
    font-weight: 400;
    margin-bottom: 12px;
    color: #1d1d1f;
    font-size: 0.95em;
}

.stars {
    display: flex;
    gap: 12px;
    font-size: 3.5em;
    cursor: pointer;
    justify-content: center;
}

.star {
    color: #e5e5e7;
    transition: color 0.2s ease;
    user-select: none;
}

.star:hover {
    color: #d2d2d7;
}

.star.active,
.star.selected {
    color: #1d1d1f;
}

/* Radio buttons */
.radio-group {
    display: flex;
    gap: 24px;
    margin-top: 12px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 0;
    background: transparent;
    transition: opacity 0.2s ease;
    font-size: 1.05em;
}

.radio-label:hover {
    opacity: 0.6;
}

.radio-label input[type="radio"] {
    cursor: pointer;
    width: 22px;
    height: 22px;
    accent-color: #1d1d1f;
}

.radio-label input[type="radio"]:checked + span {
    font-weight: 400;
    color: #1d1d1f;
}

/* Przycisk submit */
.submit-btn {
    width: 100%;
    padding: 20px;
    background: var(--survey-primary, #1d1d1f);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: 400;
    cursor: pointer;
    transition: opacity 0.2s ease;
    letter-spacing: -0.2px;
}

.submit-btn:hover {
    background: var(--survey-primary-hover, #363639);
    opacity: 1;
}

.submit-btn:active {
    opacity: 0.7;
}

/* Responsywność */
@media (max-width: 768px) {
    body:not(:has(.sidebar)) .container {
        max-width: 100%;
        margin: 0 24px;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    
    body:has(.sidebar) .container {
        max-width: none !important;
        margin: 0 !important;
        width: 100% !important;
        padding-left: var(--sidebar-collapsed-w) !important;
        padding-right: 0 !important;
    }
    
    .survey-container {
        margin: 0 24px;
        max-width: 100%;
        border-radius: 0;
    }
    
    /* Mobile modular survey */
    .step-actions {
        flex-direction: column;
        gap: 12px;
        margin-top: 15px;
        margin-bottom: 10px;
    }
    
    .step-header {
        margin-bottom: 15px;
    }
    
    .step-header h2 {
        font-size: 1.3em;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .progress-container {
        margin: 10px 0;
    }
    
    /* Mobile notifications */
    .notification-container {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        max-width: none;
    }
    
    .notification-content {
        padding: 14px 16px;
    }
    
    .notification-message {
        font-size: 0.95em;
    }
    
    .btn {
        width: 100%;
        min-width: auto;
    }
    
    .step-header h2 {
        font-size: 1.5em;
    }
    
    .progress-container {
        margin: 20px 0;
    }
    
    .review-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .review-item span {
        text-align: left;
    }
    
    .header {
        padding: 8px 24px 12px;
        border-bottom: 1px solid #e5e5e7;
    }
    
    .header h1 {
        font-size: 1.3em;
        letter-spacing: -0.8px;
        margin-bottom: 4px;
    }
    
    .header p {
        font-size: 0.85em;
        line-height: 1.4;
        margin-bottom: 0;
    }
    
    form {
        padding: 18px 24px;
    }
    
    .form-section {
        margin-bottom: 50px;
        padding-bottom: 40px;
    }
    
    .form-section h2 {
        font-size: 1.5em;
        letter-spacing: -0.6px;
        margin-bottom: 12px;
    }
    
    .section-description {
        font-size: 0.95em;
        margin-bottom: 28px;
        line-height: 1.5;
    }
    
    .form-group {
        margin-bottom: 28px;
    }
    
    .form-group label {
        font-size: 0.95em;
        margin-bottom: 10px;
    }
    
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group select,
    .form-group textarea {
        padding: 14px 16px;
        font-size: 1em;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 10px;
    }
    
    .form-group textarea {
        min-height: 100px;
    }
    
    /* Mobile styles for phone input */
    .form-group input[type="tel"] {
        padding: 14px 16px;
        font-size: 1em;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 10px;
    }
    
    .rating-group {
        margin-bottom: 16px;
    }
    
    .rating-group label {
        font-size: 0.9em;
        margin-bottom: 10px;
    }
    
    .stars {
        font-size: 3em;
        gap: 10px;
        justify-content: center;
    }
    
    .radio-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .radio-label {
        font-size: 0.95em;
        padding: 4px 0;
    }
    
    .radio-label input[type="radio"] {
        width: 20px;
        height: 20px;
    }
    
    .consent-section {
        margin: 25px 0;
        padding: 15px 0;
    }
    
    .consent-item {
        margin-bottom: 16px;
        gap: 10px;
    }
    
    .consent-item input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }
    
    .consent-item label {
        font-size: 0.9em;
    }
    
    .submit-btn {
        padding: 18px;
        font-size: 1em;
        border-radius: 10px;
    }
    
    .success-message,
    .error-message {
        padding: 18px 24px;
        font-size: 0.95em;
    }
}

/* Bardzo małe telefony */
@media (max-width: 480px) {
    .container {
        margin: 0 20px;
        max-width: 100%;
    }
    
    .survey-container {
        margin: 0 20px;
        max-width: 100%;
    }
    
    .survey-wrapper {
        padding: 0 20px;
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }
    
    body:not(:has(.container)) {
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }
    
    .survey-message {
        margin: 12px;
        margin-top: 72px;
        padding: 12px 16px;
    }
    
    .survey-footer-content {
        padding: 0 12px;
    }
    
    .header {
        padding: 5px 20px 10px;
    }
    
    .header h1 {
        font-size: 1.2em;
        margin-bottom: 3px;
    }
    
    .header p {
        font-size: 0.8em;
        margin-bottom: 0;
    }
    
    form {
        padding: 12px 20px;
    }
    
    .form-section {
        margin-bottom: 40px;
        padding-bottom: 32px;
    }
    
    .form-section h2 {
        font-size: 1.3em;
    }
    
    .step-header {
        margin-bottom: 12px;
    }
    
    .step-header h2 {
        font-size: 1.2em;
    }
    
    .form-group {
        margin-bottom: 14px;
    }
    
    .progress-container {
        margin: 8px 0;
    }
    
    .stars {
        font-size: 2.5em;
        gap: 8px;
        justify-content: center;
    }
    
    .rating-group {
        margin-bottom: 12px;
    }
    
    .step-actions {
        margin-top: 12px;
        margin-bottom: 8px;
    }
    
    .consent-section {
        margin: 20px 0;
        padding: 12px 0;
    }
    
    .consent-item {
        margin-bottom: 14px;
        gap: 8px;
    }
    
    .consent-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        margin-top: 3px;
    }
    
    .consent-item input[type="checkbox"]:checked::after {
        font-size: 14px;
    }
    
    .consent-item label {
        font-size: 0.85em;
        line-height: 1.4;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    
    .star {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .radio-label {
        min-height: 44px;
        padding: 8px 0;
    }
    
    .submit-btn {
        padding: 16px;
        font-size: 0.95em;
        min-height: 48px;
    }
}

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

.export-stat-card { 
    background: transparent; 
    padding: 24px; 
        border-radius: 0;
    display: flex; 
    align-items: center; 
    gap: 16px; 
    border: none;
    transition: all 0.2s ease;
}

.export-stat-card:hover {
    background: transparent;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

/* Przywróć kafle tylko na stronie eksportu */
body.export-page .export-stat-card { 
    background: #f5f5f7; 
    border-radius: 12px; 
    border: 1px solid #e5e5e7;
}

body.export-page .export-stat-card:hover {
    background: #ffffff;
    border-color: #d2d2d7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.export-stat-icon.fas,
.export-stat-icon { font-size: 2em; }
.export-stat-content { flex: 1; }
.export-stat-label { font-size: 0.85em; color: #86868b; margin-bottom: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.export-stat-value { font-size: 1.8em; font-weight: 700; color: #1d1d1f; letter-spacing: -0.5px; }

.export-options { 
    margin: 32px 0; 
}

.export-options h2 { 
    margin: 0 0 24px 0; 
    color: #1d1d1f; 
    font-size: 1.5em; 
    font-weight: 700;
    letter-spacing: -0.5px;
    padding-bottom: 16px;
    padding-left: 40px;
    border-bottom: 2px solid #f5f5f7;
}

.export-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 24px; 
}

.export-card { 
    background: transparent; 
    border: none; 
    border-radius: 0; 
    padding: 24px; 
    transition: all 0.2s ease; 
    display: flex;
    flex-direction: column;
}

.export-card:hover { 
    border-color: transparent; 
    box-shadow: none; 
    transform: none;
}

/* Przywróć kafle tylko na stronie eksportu */
body.export-page .export-card { 
    background: #ffffff; 
    border: 1px solid #e5e5e7; 
    border-radius: 12px; 
}

body.export-page .export-card:hover { 
    border-color: #d2d2d7; 
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); 
    transform: translateY(-2px);
}

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

.export-card-icon.fas,
.export-card-icon { 
    font-size: 1.5em; 
}

.export-card h3 { 
    margin: 0; 
    color: #1d1d1f; 
    font-size: 1.2em; 
    font-weight: 600;
}

.export-card-content { 
    flex: 1;
}

.export-card-content p { 
    color: #86868b; 
    margin-bottom: 16px; 
    line-height: 1.5; 
    font-size: 0.95em;
}

.export-features { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 20px 0; 
}

.export-features li { 
    padding: 6px 0; 
    color: #1d1d1f; 
    font-size: 0.9em; 
}

.export-card-actions { 
    margin-top: auto; 
    padding-top: 16px;
}

.export-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    padding: 12px 20px; 
    background: #1d1d1f; 
    color: #ffffff; 
    text-decoration: none; 
    border-radius: 8px; 
    font-weight: 600; 
    transition: all 0.2s ease; 
    border: none; 
    cursor: pointer; 
    width: 100%;
    justify-content: center;
}

.export-btn:hover { 
    background: #424245; 
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 29, 31, 0.2);
}

.export-btn:disabled {
    background: #d2d2d7;
    color: #8e8e93;
    cursor: not-allowed;
    transform: none;
}

.export-btn:disabled:hover {
    background: #d2d2d7;
    transform: none;
}
.export-btn.primary { background: var(--brand-primary); }
.export-btn.primary:hover { 
    background: #0056b3; 
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
.export-btn-icon.fas,
.export-btn-icon { font-size: 1.1em; }

/* Export Stats Bar */
.export-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 24px 32px;
    background: transparent;
}

/* Export Section */
.export-section {
    padding: 0 32px 32px 32px;
}

.export-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.export-section-header h2 {
    margin: 0 0 8px 0;
    font-size: 1.25em;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}

.export-section-subtitle {
    margin: 0;
    font-size: 0.875em;
    color: #6e6e73;
}

/* Export Grid Minimal */
.export-grid-minimal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

/* Export Card Minimal */
.export-card-minimal {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.export-card-minimal:hover {
    border-color: #e5e5e7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

.export-card-minimal-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.export-card-minimal-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.export-card-minimal-icon i {
    font-size: 1.5em;
    color: #1d1d1f;
}

.export-card-minimal-title-section {
    flex: 1;
    min-width: 0;
}

.export-card-minimal-title-section h3 {
    margin: 0 0 6px 0;
    font-size: 1em;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-card-minimal-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #f5f5f7;
    color: #6e6e73;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 500;
    margin-left: 8px;
}

.export-card-minimal-desc {
    margin: 0 0 16px 0;
    font-size: 0.875em;
    color: #6e6e73;
    line-height: 1.5;
}

.export-card-minimal-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.export-card-minimal-stats span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125em;
    color: #6e6e73;
}

.export-card-minimal-stats i {
    font-size: 0.875em;
}

.export-card-minimal-btn {
    margin-top: auto;
    padding: 12px 20px;
    background: #ff7a00;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.export-card-minimal-btn:hover {
    background: #e65c00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

.export-card-minimal-btn i {
    font-size: 0.9em;
}

/* Custom Export Modal */
.custom-export-modal { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center; 
    justify-content: center; 
    padding: 20px;
}

.modal-content-minimal {
    background: #ffffff; 
    border-radius: 16px; 
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto; 
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.modal-header-minimal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #f5f5f7;
}

.modal-title-minimal {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
}

.modal-title-minimal i {
    color: #6e6e73;
}

.modal-close-minimal {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f7;
    border-radius: 8px;
    color: #1d1d1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-minimal:hover {
    background: #e5e5e7;
}

.modal-body-minimal {
    padding: 24px;
}

.export-form-section {
    margin-bottom: 24px;
}

.export-form-section:last-of-type {
    margin-bottom: 0;
}

.export-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875em;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.export-form-label i {
    color: #6e6e73;
    font-size: 0.875em;
}

.export-form-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    background: #ffffff;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-form-select:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.export-checkboxes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.export-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875em;
    color: #1d1d1f;
}

.export-checkbox-label:hover {
    border-color: #e5e5e7;
    background: #ffffff;
}

.export-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1d1d1f;
}

.export-checkbox-label input[type="checkbox"]:checked + span {
    font-weight: 500;
}

.export-checkbox-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.export-checkbox-action-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #e5e5e7;
    border-radius: 6px;
    font-size: 0.8125em;
    color: #6e6e73;
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-checkbox-action-btn:hover {
    border-color: #1d1d1f;
    color: #1d1d1f;
    background: #fafafa;
}

.export-date-range {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.export-date-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.export-date-input-group label {
    font-size: 0.8125em;
    color: #6e6e73;
    font-weight: 500;
}

.export-date-input {
    padding: 10px 14px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    background: #ffffff;
    color: #1d1d1f;
    transition: all 0.2s ease;
}

.export-date-input:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.export-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f5f5f7;
}

.export-form-submit-btn {
    flex: 1;
    padding: 12px 20px;
    background: #ff7a00;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.export-form-submit-btn:hover {
    background: #e65c00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

.export-form-cancel-btn {
    padding: 12px 20px;
    background: #ffffff;
    color: #6e6e73;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-form-cancel-btn:hover {
    border-color: #1d1d1f;
    color: #1d1d1f;
    background: #fafafa;
}

.export-info-box {
    margin-top: 20px;
    padding: 16px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.8125em;
    color: #856404;
}

.export-info-box i {
    color: #856404;
    font-size: 1.1em;
    margin-top: 2px;
    flex-shrink: 0;
}

.export-info-box strong {
    display: block;
    margin-bottom: 4px;
}

/* Old modal styles removed - using modal-content-minimal instead */
.modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 24px; 
    border-bottom: 1px solid #e5e5e7; 
    background: #f9f9f9;
    border-radius: 16px 16px 0 0;
}

.modal-header h3 { 
    margin: 0; 
    color: #1d1d1f; 
    font-size: 1.3em;
    font-weight: 700;
}

.modal-close { 
    background: none; 
    border: none; 
    font-size: 1.8em; 
    cursor: pointer; 
    color: #86868b; 
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}

.modal-body { 
    padding: 24px; 
}

.form-group { 
    margin-bottom: 20px; 
}

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

.form-group select, 
.form-group input[type="date"] { 
    width: 100%; 
    padding: 12px 16px; 
    border: 1px solid #d2d2d7; 
    border-radius: 8px; 
    font-size: 0.95em; 
    background: #ffffff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-group select:focus,
.form-group input[type="date"]:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.checkbox-group { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 10px; 
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e5e5e7;
}

.checkbox-group label { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-weight: 400; 
    cursor: pointer; 
    font-size: 0.9em;
    padding: 4px 0;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand-primary);
}

.date-range { 
    display: flex; 
    gap: 12px; 
}

.date-range input { 
    flex: 1; 
}

.form-actions { 
    display: flex; 
    gap: 12px; 
    margin-top: 24px; 
    justify-content: flex-end;
}

/* Quick Actions */
/* Dashboard grid - dwukolumnowy layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0 32px;
    margin-bottom: 24px;
}

.dashboard-grid .dashboard-widget {
    margin: 0;
}

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

/* Mini chart section */
.mini-chart-section {
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mini-chart-container {
    height: 100px;
    margin-bottom: 16px;
}

.mini-chart-stats {
    display: flex;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f7;
}

.mini-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mini-stat-label {
    font-size: 0.75em;
    color: #6e6e73;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mini-stat-value {
    font-size: 1.5em;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
}

/* Recent opinions section */
.recent-opinions-section {
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Jeśli recent-opinions-section jest w dashboard-widget, zachowaj białe tło ale usuń duplikację */
.dashboard-widget.recent-opinions-section {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 24px;
}

.recent-opinions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recent-opinion-item {
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f5f5f7;
    transition: all 0.2s ease;
}

.recent-opinion-item:hover {
    border-color: #e5e5e7;
    background: #ffffff;
}

.recent-opinion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.recent-opinion-name {
    font-weight: 600;
    font-size: 0.9375em;
    color: #1d1d1f;
}

.recent-opinion-rating {
    font-size: 0.875em;
    color: #ff9500;
    letter-spacing: 2px;
}

.recent-opinion-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125em;
    color: #6e6e73;
}

.recent-opinion-email {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-opinion-date {
    margin-left: 12px;
    flex-shrink: 0;
}

/* Ratings distribution */
.ratings-distribution {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rating-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rating-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating-stars-inline {
    font-size: 0.875em;
    color: #ff9500;
    letter-spacing: 2px;
}

.rating-count {
    font-weight: 600;
    font-size: 0.875em;
    color: #1d1d1f;
}

.rating-row-bar {
    height: 8px;
    background: #f5f5f7;
    border-radius: 4px;
    overflow: hidden;
}

.rating-row-fill {
    height: 100%;
    background: #1d1d1f;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.rating-percentage {
    font-size: 0.75em;
    color: #6e6e73;
    text-align: right;
}

/* Top sources list */
.top-sources-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.source-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.source-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.source-name {
    font-weight: 500;
    font-size: 0.875em;
    color: #1d1d1f;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-count {
    font-weight: 600;
    font-size: 0.875em;
    color: #1d1d1f;
    margin-left: 12px;
}

.source-row-bar {
    height: 8px;
    background: #f5f5f7;
    border-radius: 4px;
    overflow: hidden;
}

.source-row-fill {
    height: 100%;
    background: #6e6e73;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.source-percentage {
    font-size: 0.75em;
    color: #6e6e73;
    text-align: right;
}

/* Age stats minimal */
.age-stats-minimal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.age-item-minimal {
    padding: 16px;
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 8px;
}

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

.age-label-minimal {
    font-weight: 600;
    font-size: 0.875em;
    color: #1d1d1f;
}

.age-count-minimal {
    font-size: 0.8125em;
    color: #6e6e73;
}

.age-bar-minimal {
    height: 6px;
    background: #f5f5f7;
    border-radius: 3px;
    overflow: hidden;
}

.age-fill-minimal {
    height: 100%;
    background: #1d1d1f;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Quick actions minimal */
.quick-actions-minimal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 10px;
    text-decoration: none;
    color: #1d1d1f;
    transition: all 0.2s ease;
}

.quick-action-card:hover {
    border-color: #e5e5e7;
    background: #fafafa;
    transform: translateY(-2px);
}

.quick-action-card i {
    font-size: 1.5em;
    color: #6e6e73;
}

.quick-action-card span {
    font-weight: 500;
    font-size: 0.875em;
    color: #1d1d1f;
}

/* No data small */
.no-data-small {
    text-align: center;
    padding: 32px 20px;
    color: #6e6e73;
    font-size: 0.875em;
}

/* Active nav item - styles moved to sidebar section */

/* Collapsible Sidebar */
/* Modern Apple-style Sidebar */
:root {
    --sidebar-w: 240px;
    --sidebar-collapsed-w: 64px;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e5e7;
    --sidebar-text: #1d1d1f;
    --sidebar-text-secondary: #6e6e73;
    --sidebar-hover: #f5f5f7;
    --sidebar-active: #1d1d1f;
    --sidebar-shadow: none;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-w);
    background: #ffffff;
    border-right: 1px solid #e5e5e7;
    box-shadow: none;
    transition: width 0.25s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar.collapsed { 
    width: var(--sidebar-collapsed-w);
    overflow: hidden;
}

.sidebar.collapsed .sidebar-top {
    justify-content: center;
    padding: 0 16px;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    box-sizing: border-box;
}

.sidebar.collapsed .sidebar-logo {
    margin: 0 auto;
}

.sidebar.collapsed .sidebar-nav {
    padding: 12px 6px;
}

.sidebar.collapsed .sidebar-footer {
    padding: 10px 6px;
}

.sidebar-top { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 12px; 
    padding: 0 20px; 
    background: #ffffff;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-top: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 64px;
    flex-shrink: 0;
}

.sidebar-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Logo dla rozwiniętego sidebara */
.sidebar-logo .sidebar-logo-expanded {
    display: block !important;
    width: 100%;
    height: auto;
    max-height: 64px;
}

.sidebar-logo .sidebar-logo-collapsed {
    display: none !important;
}

/* Logo dla zwiniętego sidebara */
.sidebar.collapsed .sidebar-logo {
    width: 36px;
    height: 36px;
}

.sidebar.collapsed .sidebar-logo .sidebar-logo-expanded {
    display: none !important;
}

.sidebar.collapsed .sidebar-logo .sidebar-logo-collapsed {
    display: block !important;
    width: 100%;
    height: auto;
    max-height: 36px;
}

.sidebar-toggle { 
    background: transparent; 
    color: #86868b; 
    border: none; 
    border-radius: 8px; 
    padding: 8px; 
    cursor: pointer; 
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.sidebar-toggle:hover { 
    background: #f5f5f7;
    color: #1d1d1f;
}

.brand { 
    font-weight: 600; 
    font-size: 1.125em;
    letter-spacing: -0.3px; 
    color: #1d1d1f;
    transition: opacity 0.3s ease;
}

.sidebar-nav { 
    padding: 12px 10px; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    flex: 1;
    overflow-y: auto;
}

.nav-item { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 12px 16px; 
    color: #6e6e73; 
    text-decoration: none; 
    border-radius: 0; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 0.875em;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    border-left: 4px solid transparent;
    margin: 2px 0;
}

.nav-item:hover { 
    background: transparent;
    color: #1d1d1f;
}

.nav-item.active {
    background: rgba(255, 122, 0, 0.08);
    color: #ff7a00;
    font-weight: 600;
    border-left-color: #ff7a00;
}

.nav-item.active:hover {
    background: rgba(255, 122, 0, 0.12);
    color: #ff7a00;
}

.nav-ico { 
    width: 18px; 
    text-align: center; 
    font-size: 16px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-ico.fas,
.nav-ico.far {
    line-height: 1;
}

.nav-item.active .nav-ico {
    color: #ff7a00;
}

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

.sidebar.collapsed .nav-label, 
.sidebar.collapsed .brand { 
    display: none;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 12px 10px;
    margin: 2px 0;
    border-left: 4px solid transparent;
}

.sidebar.collapsed .nav-item:hover {
    background: transparent;
    color: #1d1d1f;
}

.sidebar.collapsed .nav-item.active {
    background: rgba(255, 122, 0, 0.08);
    color: #ff7a00;
    border-left-color: #ff7a00;
}

.sidebar.collapsed .nav-item.active:hover {
    background: rgba(255, 122, 0, 0.12);
    color: #ff7a00;
}

.sidebar.collapsed .nav-ico {
    font-size: 16px;
    margin: 0;
    width: auto;
}

.sidebar-footer { 
    margin-top: auto; 
    padding: 12px; 
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-footer .sidebar-toggle {
    width: 100%;
    margin-bottom: 0;
}

.sidebar-footer .nav-item {
    color: #86868b;
    font-weight: 500;
    border-left-color: transparent;
}

.sidebar-footer .nav-item:hover {
    background: transparent;
    color: #1d1d1f;
}

.sidebar.collapsed .sidebar-footer {
    padding: 16px 8px;
    align-items: center;
}

.sidebar.collapsed .sidebar-footer .sidebar-toggle {
    width: 44px;
    height: 44px;
}

/* Container with sidebar */
body:has(.sidebar) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body:has(.sidebar) {
    background: #f5f5f7;
}

body:has(.sidebar) .container {
    max-width: none !important;
    margin: 0;
    margin-left: var(--sidebar-w);
    background: #f5f5f7;
    padding: 0 !important;
    transition: margin-left 0.25s ease;
    min-height: 100vh;
    width: calc(100% - var(--sidebar-w)) !important;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Padding dla treści wewnątrz kontenera */
/* Padding dla treści wewnątrz kontenera (dodatkowo do istniejących paddingów) */
body:has(.sidebar) .container > .dashboard-section:not(.dashboard-widget) {
    padding-left: 32px;
    padding-right: 32px;
}

body:has(.sidebar) .container.sidebar-collapsed { 
    margin-left: var(--sidebar-collapsed-w);
    width: calc(100% - var(--sidebar-collapsed-w)) !important;
    max-width: none !important;
}

/* Header styles - ukryty TYLKO w panelu admina (gdy jest sidebar), nie w ankiecie */
body:has(.sidebar) .header {
    display: none;
}

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

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 32px;
    margin: 0;
    background: transparent;
}

.stat-card {
    background: #ffffff;
    padding: 24px;
    text-align: center;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
    border-color: #e5e5e7;
    background: #fafafa;
}

.stat-card h3 {
    color: #6e6e73;
    font-size: 0.8125em;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.stat-card .stat-value {
    font-size: 2.5em;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 4px;
    letter-spacing: -1.5px;
    line-height: 1;
}

.stars-display {
    color: #1d1d1f;
    font-size: 1.2em;
    opacity: 0.6;
}

/* Hero stats - minimalistyczny design */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 32px;
    background: transparent;
    margin: 0;
}

.hero-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e5e5e7;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.hero-card:hover {
    border-color: #e5e5e7;
    background: #fafafa;
}

.hero-card-label {
    font-size: 0.8125em;
    color: #6e6e73;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-card-value {
    font-size: 2.5em;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -1.5px;
    margin-bottom: 4px;
    line-height: 1;
}

.hero-card-subtitle {
    font-size: 0.8125em;
    color: #6e6e73;
    font-weight: 400;
}

.hero-card.featured {
    background: #ff7a00;
    border-color: #ff7a00;
}

.hero-card.featured .hero-card-label,
.hero-card.featured .hero-card-value,
.hero-card.featured .hero-card-subtitle {
    color: #ffffff;
}

.hero-card.featured .hero-card-label,
.hero-card.featured .hero-card-subtitle {
    opacity: 0.9;
}

/* Contact Stats Cards - Enhanced Styles */
.contacts-stats-section {
    margin-bottom: 32px;
    padding: 40px 40px 0 40px;
    background: transparent;
    border: none;
}

.contacts-stats {
    gap: 24px;
    background: transparent !important;
    margin: 0;
}

.contacts-stats-section .contacts-stats {
    background: transparent !important;
}

.contacts-stats-section .stats-grid {
    background: transparent !important;
    gap: 24px !important;
}

.contact-stat-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #d2d2d7;
    transition: background 0.3s ease;
}

.contact-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #d2d2d7;
}

.contact-stat-card:hover::before {
    background: #86868b;
}

.contact-stat-icon {
    font-size: 2.2em;
    margin-bottom: 12px;
    display: block;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.contact-stat-card:hover .contact-stat-icon {
    opacity: 1;
    transform: scale(1.05);
}

.contact-stat-total {
    background: #ffffff;
    color: #1d1d1f;
    border-color: #e5e5e7;
}

.contact-stat-total::before {
    background: #86868b;
}

.contact-stat-total:hover::before {
    background: #1d1d1f;
}

.contact-stat-total .hero-card-label,
.contact-stat-total .hero-card-value,
.contact-stat-total .hero-card-subtitle {
    color: #1d1d1f;
}

.contact-stat-total .hero-card-label,
.contact-stat-total .hero-card-subtitle {
    color: #86868b;
}

.contact-stat-phone {
    background: #ffffff;
    color: #1d1d1f;
    border-color: #e5e5e7;
}

.contact-stat-phone::before {
    background: #86868b;
}

.contact-stat-phone:hover::before {
    background: #1d1d1f;
}

.contact-stat-phone .hero-card-label,
.contact-stat-phone .hero-card-value,
.contact-stat-phone .hero-card-subtitle {
    color: #1d1d1f;
}

.contact-stat-phone .hero-card-label,
.contact-stat-phone .hero-card-subtitle {
    color: #86868b;
}

.contact-stat-email {
    background: #ffffff;
    color: #1d1d1f;
    border-color: #e5e5e7;
}

.contact-stat-email::before {
    background: #86868b;
}

.contact-stat-email:hover::before {
    background: #1d1d1f;
}

.contact-stat-email .hero-card-label,
.contact-stat-email .hero-card-value,
.contact-stat-email .hero-card-subtitle {
    color: #1d1d1f;
}

.contact-stat-email .hero-card-label,
.contact-stat-email .hero-card-subtitle {
    color: #86868b;
}

.contact-stat-rating {
    background: #ffffff;
    color: #1d1d1f;
    border-color: #e5e5e7;
}

.contact-stat-rating::before {
    background: #86868b;
}

.contact-stat-rating:hover::before {
    background: #1d1d1f;
}

.contact-stat-rating .hero-card-label {
    color: #86868b;
    font-weight: 600;
}

.contact-stat-rating .hero-card-value {
    color: #1d1d1f;
}

.contact-stat-rating .hero-card-subtitle {
    color: #86868b;
    font-weight: 500;
}

/* Section divider */
.section-divider {
    height: 1px;
    background: #f5f5f7;
    margin: 32px 32px;
    border: none;
}

/* Dashboard section - minimalistyczny */
.dashboard-section {
    padding: 24px 32px;
    background: transparent;
    border-radius: 0;
    margin-bottom: 24px;
    border: none;
}

.dashboard-section:last-child {
    margin-bottom: 0;
}

/* Dashboard section jako widget - ma białe tło */
.dashboard-section.dashboard-widget {
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

.dashboard-section h3 {
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-section:not(.dashboard-widget) h3 {
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f7;
}

.dashboard-section h3 i {
    font-size: 0.9em;
    color: #6e6e73;
}

/* Dashboard Widgets - Drag & Drop */
.dashboard-widget {
    position: relative;
    transition: all 0.2s ease;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin: 0;
}

.dashboard-widget:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #d2d2d7;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f7;
}

.widget-header h3 {
    margin: 0;
    padding: 0;
    border: none;
}

.widget-handle {
    cursor: move;
    cursor: grab;
    color: #86868b;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.widget-handle:active {
    cursor: grabbing;
}

.widget-handle:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}

.widget-handle i {
    font-size: 0.875em;
}

/* Drag & Drop States */
.widget-ghost {
    opacity: 0.4;
    background: #f5f5f7;
    border: 2px dashed #86868b;
}

.widget-chosen {
    opacity: 0.8;
}

.widget-dragging {
    opacity: 0.5;
    transform: rotate(2deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Widget Configuration Modal */
.widget-config-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.widget-modal-content {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 1000px;
    height: 85vh;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.widget-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #f5f5f7;
}

.widget-modal-header h3 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 12px;
}

.widget-modal-header h3 i {
    color: #6e6e73;
}

/* Przycisk zamknięcia w nagłówku (mały) */
.widget-modal-header .widget-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f7;
    border-radius: 8px;
    color: #1d1d1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    min-width: auto;
}

.widget-modal-header .widget-modal-close:hover {
    background: #e5e5e7;
}

/* Przycisk zamknięcia w stopce (normalny rozmiar) */
.widget-modal-footer .widget-modal-close {
    width: auto;
    height: auto;
    padding: 12px 24px;
    min-width: auto;
}

.widget-modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 500px;
}

.widget-modal-tabs {
    display: flex;
    border-bottom: 1px solid #f5f5f7;
    padding: 0 24px;
}

.widget-tab-btn {
    padding: 16px 24px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #6e6e73;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    bottom: -1px;
}

.widget-tab-btn:hover {
    color: #1d1d1f;
    background: #fafafa;
}

.widget-tab-btn.active {
    color: #1d1d1f;
    border-bottom-color: #1d1d1f;
}

.widget-tab-content {
    display: none;
    padding: 24px;
    min-height: 500px;
}

.widget-tab-content.active {
    display: block;
}

.widget-modal-hint {
    margin: 0 0 20px 0;
    font-size: 0.875em;
    color: #6e6e73;
    line-height: 1.5;
}

.widget-config-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.widget-config-item:hover {
    background: #ffffff;
    border-color: #e5e5e7;
}

.widget-config-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375em;
    color: #1d1d1f;
    font-weight: 500;
}

.widget-config-info i {
    color: #6e6e73;
    font-size: 1.1em;
}

/* Toggle Switch */
.widget-toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.widget-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.widget-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e5e7;
    transition: 0.3s;
    border-radius: 26px;
}

.widget-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.widget-toggle-switch input:checked + .widget-toggle-slider {
    background-color: #1d1d1f;
}

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

.widget-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #f5f5f7;
    background: #fafafa;
}

.widget-btn-primary,
.widget-btn-secondary {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    justify-content: center;
    flex-shrink: 0;
}

.widget-btn-primary {
    background: #1d1d1f;
    color: #ffffff;
}

.widget-btn-primary:hover {
    background: #363639;
    transform: translateY(-1px);
}

.widget-btn-secondary {
    background: #ffffff;
    color: #6e6e73;
    border: 1px solid #e5e5e7;
}

.widget-btn-secondary:hover {
    border-color: #1d1d1f;
    color: #1d1d1f;
    background: #fafafa;
}

/* Widget Available List */
.widget-available-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-category-title {
    font-size: 0.8125em;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 8px 0;
    padding-top: 16px;
    border-top: 1px solid #f5f5f7;
}

.widget-category-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.widget-available-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.widget-available-item:hover {
    background: #ffffff;
    border-color: #e5e5e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.widget-add-btn {
    padding: 8px 16px;
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.875em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.widget-add-btn:hover {
    background: #363639;
    transform: translateY(-1px);
}

.widget-remove-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: #f5f5f7;
    color: #ff3b30;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-remove-btn:hover {
    background: #ffe5e5;
    color: #ff3b30;
}

.widget-no-available {
    text-align: center;
    padding: 40px 20px;
    color: #86868b;
    font-size: 0.9375em;
}

/* Widget Styles - SMS Stats */
.widget-sms-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.widget-sms-item {
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f5f5f7;
}

.widget-sms-label {
    font-size: 0.8125em;
    color: #6e6e73;
    margin-bottom: 8px;
    font-weight: 500;
}

.widget-sms-value {
    font-size: 1.5em;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.widget-sms-cost {
    font-size: 0.875em;
    color: #34c759;
    font-weight: 600;
}

.widget-sms-sub {
    font-size: 0.8125em;
    color: #6e6e73;
    margin-top: 4px;
}

/* Widget Styles - Contacts Stats */
.widget-contacts-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.widget-contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f5f5f7;
}

.widget-contact-item i {
    font-size: 1.5em;
    color: #6e6e73;
    width: 32px;
    text-align: center;
}

.widget-contact-info {
    flex: 1;
}

.widget-contact-label {
    font-size: 0.8125em;
    color: #6e6e73;
    margin-bottom: 4px;
}

.widget-contact-value {
    font-size: 1.5em;
    font-weight: 700;
    color: #1d1d1f;
}

/* Widget Styles - Google Review Stats */
.widget-google-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.widget-google-item {
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f5f5f7;
    text-align: center;
}

.widget-google-label {
    font-size: 0.8125em;
    color: #6e6e73;
    margin-bottom: 8px;
}

.widget-google-value {
    font-size: 1.5em;
    font-weight: 700;
    color: #1d1d1f;
}

/* Widget Styles - Hourly Activity */
.widget-hourly-activity {
    padding: 16px 0;
}

.hourly-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 200px;
    padding: 0 8px;
}

.hourly-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 8px;
}

.hourly-bar {
    width: 100%;
    background: linear-gradient(to top, #ff7a00, #ff9500);
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hourly-bar:hover {
    background: #363639;
    opacity: 0.9;
}

.hourly-bar-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    font-size: 0.75em;
    color: #1d1d1f;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.hourly-bar-item:hover .hourly-bar-value {
    opacity: 1;
}

.hourly-bar-label {
    font-size: 0.75em;
    color: #6e6e73;
    font-weight: 500;
}

/* Widget Styles - Ratings Summary */
.widget-ratings-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.widget-rating-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #f5f5f7;
}

.widget-rating-item.positive i {
    color: #34c759;
    font-size: 2em;
}

.widget-rating-item.negative i {
    color: #ff3b30;
    font-size: 2em;
}

.widget-rating-info {
    flex: 1;
}

.widget-rating-label {
    font-size: 0.8125em;
    color: #6e6e73;
    margin-bottom: 4px;
}

.widget-rating-value {
    font-size: 1.75em;
    font-weight: 700;
    color: #1d1d1f;
}

/* Top bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    background: #ffffff;
    height: 64px;
    min-height: 64px;
    box-sizing: border-box;
    border-radius: 0;
    margin: 0;
    width: 100%;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-bar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #e5e5e7;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
}

.top-bar-toggle:hover {
    background: #f5f5f7;
}

.top-bar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 480px;
    margin: 0 24px;
}

.top-bar-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    height: 40px;
    padding: 0 16px;
    background: #f5f5f7;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    gap: 12px;
    transition: all 0.2s ease;
}

.top-bar-search:focus-within {
    background: #ffffff;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.1);
}

.top-bar-search i {
    color: #86868b;
    font-size: 14px;
}

.top-bar-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #1d1d1f;
    outline: none;
}

.top-bar-search input::placeholder {
    color: #86868b;
}

.top-bar-search-shortcut {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 6px;
    font-size: 12px;
    color: #86868b;
    font-weight: 500;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #1d1d1f;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

.page-title i {
    font-size: 0.9em;
    color: #6e6e73;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-title-text {
    font-weight: 600;
    letter-spacing: -0.3px;
}


.admin-actions {
    display: flex;
    gap: 12px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    color: #86868b;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.settings-btn i {
    font-size: 1em;
}

/* Language Switcher */
.language-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #e5e5e7;
    font-size: 0.875em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.language-btn:hover {
    background: #ebebed;
    border-color: #d5d5d7;
}

.language-btn .flag-icon {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.language-btn .flag-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.language-btn .lang-name {
    color: #1d1d1f;
}

.language-btn .lang-chevron {
    color: #86868b;
    font-size: 0.75em;
    margin-left: 2px;
}

.settings-btn:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}

.settings-btn.active {
    background: #f5f5f7;
    color: #1d1d1f;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.user-profile:hover {
    background: #f5f5f7;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-primary, #ff7a00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.9375em;
    flex-shrink: 0;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.user-name {
    font-weight: 500;
    font-size: 0.875em;
    color: #1d1d1f;
    line-height: 1.3;
}

.user-role {
    font-size: 0.75em;
    color: #6e6e73;
    line-height: 1.3;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--brand-primary, #ff7a00);
    padding: 6px;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 100;
}

.user-profile:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #1d1d1f;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875em;
    transition: background 0.2s ease;
    width: 100%;
    margin-bottom: 2px;
}

.user-dropdown .dropdown-item:hover {
    background: rgba(255, 122, 0, 0.1);
    color: var(--brand-primary, #ff7a00);
}

.user-dropdown .dropdown-item i {
    font-size: 0.875em;
    width: 16px;
    text-align: center;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #1d1d1f;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875em;
    transition: background 0.2s ease;
    width: 100%;
}

.logout-btn:hover {
    background: rgba(255, 122, 0, 0.1);
    color: var(--brand-primary, #ff7a00);
}

.logout-btn i {
    font-size: 0.875em;
    width: 16px;
    text-align: center;
}

/* Buttons - old logout button styles removed (now using .logout-btn from user dropdown) */

.change-password-btn {
    display: inline-block;
    padding: 10px 18px;
    background: #f5f5f7;
    color: #1d1d1f;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 400;
    transition: all 0.2s ease;
    font-size: 0.9em;
    border: 1px solid #d2d2d7;
}

.change-password-btn:hover {
    background: #e8e8ed;
}

/* Messages */
.success-message {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 16px 24px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #c8e6c9;
    font-weight: 500;
}

.error-message {
    background: #ffebee;
    color: #c62828;
    padding: 16px 24px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #ffcdd2;
    font-weight: 500;
}

/* No data */
.no-data {
    text-align: center;
    padding: 80px 40px;
    color: #86868b;
}

/* Back link */
.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #86868b;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.95em;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: #1d1d1f;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Opinions section */
/* Opinions Stats Bar */
.opinions-stats-bar,
.contacts-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 24px 32px;
    background: transparent;
}

.stat-item {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-label {
    font-size: 0.8125em;
    color: #6e6e73;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 2em;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -1px;
}

.stat-subtitle {
    font-size: 0.75em;
    color: #6e6e73;
    margin-top: 4px;
}

.stat-subtitle {
    font-size: 0.75em;
    color: #6e6e73;
    margin-top: 4px;
}

/* Filters Section Minimal */
.filters-section-minimal {
    padding: 24px 32px;
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    margin: 0 32px 24px 32px;
}

.filters-form-minimal {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filters-row {
    display: grid;
    grid-template-columns: 2fr repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.filter-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-icon {
    position: absolute;
    left: 12px;
    color: #6e6e73;
    font-size: 0.875em;
    z-index: 1;
}

.filter-input-search {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    background: #ffffff;
    transition: all 0.2s ease;
}

.filter-input-search:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.filter-select {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    background: #ffffff;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e6e73' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.filter-select:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.filters-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.filter-btn-minimal {
    padding: 12px 20px;
    background: #ff7a00;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-btn-minimal:hover {
    background: #e65c00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

.clear-btn-minimal {
    padding: 12px 20px;
    background: #ffffff;
    color: #6e6e73;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.clear-btn-minimal:hover {
    border-color: #1d1d1f;
    color: #1d1d1f;
    background: #fafafa;
}

.export-btn-minimal {
    padding: 12px 20px;
    background: #ffffff;
    color: #6e6e73;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-btn-minimal:hover {
    border-color: #1d1d1f;
    color: #1d1d1f;
    background: #fafafa;
}

/* Contacts Section */
.contacts-section {
    background: transparent;
    padding: 0 32px 32px 32px;
    border-radius: 0;
    margin-bottom: 32px;
    border: none;
}

.contacts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.contacts-section h2 {
    color: #1d1d1f;
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.contacts-count-badge {
    padding: 6px 14px;
    background: #f5f5f7;
    color: #6e6e73;
    border-radius: 12px;
    font-size: 0.8125em;
    font-weight: 600;
}

/* Contacts List */
.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-list-item {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: all 0.2s ease;
}

.contact-list-item:hover {
    border-color: #e5e5e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.contact-list-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1d1d1f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125em;
    flex-shrink: 0;
}

.contact-list-main {
    flex: 1;
    min-width: 0;
}

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

.contact-list-name-section {
    flex: 1;
    min-width: 0;
}

.contact-list-name {
    font-weight: 600;
    font-size: 1em;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.contact-list-age {
    font-size: 0.8125em;
    color: #6e6e73;
}

.contact-list-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.contact-list-stars {
    font-size: 0.9375em;
    color: #ff9500;
    letter-spacing: 1px;
}

.contact-list-rating-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8125em;
}

.contact-list-rating-badge.rating-5 {
    background: #34c759;
    color: #ffffff;
}

.contact-list-rating-badge.rating-4 {
    background: #5ac8fa;
    color: #ffffff;
}

.contact-list-rating-badge.rating-3 {
    background: #ff9500;
    color: #ffffff;
}

.contact-list-rating-badge.rating-2,
.contact-list-rating-badge.rating-1 {
    background: #ff3b30;
    color: #ffffff;
}

.contact-list-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-list-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875em;
}

.contact-list-detail i {
    color: #6e6e73;
    font-size: 0.875em;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.contact-list-link {
    flex: 1;
    color: #1d1d1f;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.contact-list-link:hover {
    color: #1d1d1f;
    text-decoration: underline;
}

.contact-copy-btn-small {
    padding: 4px 6px;
    background: transparent;
    border: 1px solid #e5e5e7;
    border-radius: 6px;
    color: #6e6e73;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.contact-copy-btn-small:hover {
    background: #f5f5f7;
    border-color: #d2d2d7;
    color: #1d1d1f;
}

.contact-copy-btn-small i {
    font-size: 0.7em;
}

.contact-list-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.contact-list-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125em;
    color: #6e6e73;
}

.contact-list-meta-item i {
    font-size: 0.75em;
    color: #86868b;
}

/* Custom Questions Grid */
.custom-questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    padding: 0 32px 32px 32px;
}

/* Custom Question Card */
.custom-question-card {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
}

.custom-question-card:hover {
    border-color: #e5e5e7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.custom-question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.custom-question-title-section {
    flex: 1;
    min-width: 0;
}

.custom-question-title {
    font-weight: 600;
    font-size: 1em;
    color: #1d1d1f;
    margin-bottom: 8px;
    line-height: 1.4;
}

.custom-question-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.custom-question-type {
    font-size: 0.8125em;
    color: #6e6e73;
    padding: 4px 10px;
    background: #f5f5f7;
    border-radius: 6px;
    font-weight: 500;
}

.custom-question-count {
    font-size: 0.8125em;
    color: #6e6e73;
    font-weight: 500;
}

.custom-question-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-question-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: #6e6e73;
    text-align: center;
    gap: 12px;
}

.custom-question-empty i {
    font-size: 2em;
    opacity: 0.5;
}

.custom-question-empty span {
    font-size: 0.875em;
}

.custom-question-text-stats {
    font-size: 0.875em;
    color: #6e6e73;
    font-weight: 500;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f7;
}

/* Text Answers List */
.text-answers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.text-answer-item {
    padding: 16px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 8px;
    border-left: 3px solid #1d1d1f;
    transition: all 0.2s ease;
}

.text-answer-item:hover {
    border-color: #e5e5e7;
    background: #ffffff;
}

.text-answer-content {
    color: #1d1d1f;
    line-height: 1.6;
    margin-bottom: 8px;
    font-size: 0.9375em;
}

.text-answer-date {
    color: #6e6e73;
    font-size: 0.8125em;
}

.text-answers-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f7;
    flex-wrap: wrap;
}

/* Custom Question Chart Wrapper */
.custom-question-chart-wrapper {
    position: relative;
    height: 300px;
    margin-bottom: 20px;
}

/* Custom Question Answers List */
.custom-question-answers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f7;
}

.custom-answer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.custom-answer-item:hover {
    border-color: #e5e5e7;
    background: #ffffff;
}

.custom-answer-label {
    flex: 1;
    font-size: 0.875em;
    color: #1d1d1f;
    font-weight: 500;
}

.custom-answer-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.custom-answer-count {
    font-weight: 600;
    font-size: 0.875em;
    color: #1d1d1f;
    min-width: 40px;
    text-align: right;
}

.custom-answer-percentage {
    font-size: 0.8125em;
    color: #6e6e73;
    min-width: 50px;
    text-align: right;
}

/* Discount Stats Bar */
.discount-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 24px 32px;
    background: transparent;
}

/* Discount Message */
.discount-message {
    max-width: 800px;
    margin: 0 auto 24px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375em;
    font-weight: 500;
}

.discount-message-success {
    background: #f0fdf4;
    border: 1px solid #34c759;
    color: #155724;
}

.discount-message-error {
    background: #fef2f2;
    border: 1px solid #ff3b30;
    color: #991b1b;
}

.discount-message i {
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Discount Verify Section */
.discount-verify-section {
    padding: 0 32px 24px 32px;
}

.discount-verify-card {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    padding: 24px;
    max-width: 600px;
    margin: 0 auto;
}

.discount-verify-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.discount-verify-header i {
    font-size: 1.25em;
    color: #6e6e73;
}

.discount-verify-header h2 {
    margin: 0;
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
}

.discount-verify-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.discount-verify-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.discount-verify-input-group i {
    position: absolute;
    left: 16px;
    color: #6e6e73;
    font-size: 1em;
    z-index: 1;
}

.discount-verify-input {
    width: 100%;
    padding: 14px 18px 14px 48px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: inherit;
}

.discount-verify-input:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.discount-verify-btn {
    padding: 14px 24px;
    background: #ff7a00;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.discount-verify-btn:hover {
    background: #e65c00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

/* Discount Result Section */
.discount-result-section {
    padding: 0 32px 24px 32px;
}

.discount-result-card {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    padding: 24px;
    max-width: 700px;
    margin: 0 auto;
}

.discount-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f7;
    flex-wrap: wrap;
    gap: 16px;
}

.discount-result-code {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 4px;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.discount-result-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.discount-result-type {
    font-size: 0.8125em;
    color: #6e6e73;
    padding: 4px 10px;
    background: #f5f5f7;
    border-radius: 6px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.discount-result-type.type-google {
    background: #f5f5f7;
    color: #1d1d1f;
}

.discount-result-type.type-loyalty {
    background: #f5f5f7;
    color: #1d1d1f;
}

.discount-result-stamps {
    font-size: 0.8125em;
    color: #86868b;
    padding: 4px 10px;
    background: #f5f5f7;
    border-radius: 6px;
    font-weight: 500;
}

.discount-result-percent {
    font-size: 0.875em;
    color: #34c759;
    font-weight: 600;
}

.discount-result-status-badge {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.discount-result-status-badge.status-available {
    background: #d4edda;
    color: #155724;
}

.discount-result-status-badge.status-used {
    background: #f8d7da;
    color: #721c24;
}

.discount-result-status-badge.status-expired {
    background: #fff3cd;
    color: #856404;
}

.discount-result-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.discount-result-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f7;
}

.discount-result-detail-item:last-child {
    border-bottom: none;
}

.discount-detail-label {
    font-size: 0.875em;
    color: #6e6e73;
    font-weight: 500;
}

.discount-detail-value {
    font-size: 0.9375em;
    color: #1d1d1f;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.discount-detail-value i {
    color: #86868b;
    font-size: 0.875em;
}

.discount-expired {
    color: #ff3b30 !important;
}

.discount-expired-label {
    font-size: 0.85em;
    color: #ff3b30;
    margin-left: 8px;
}

.discount-expired-text {
    color: #ff3b30;
}

.discount-used-count {
    font-weight: 600;
    color: #1d1d1f;
}

.discount-result-actions {
    padding-top: 20px;
    border-top: 1px solid #f5f5f7;
}

.discount-result-form {
    margin: 0;
}

.discount-mark-used-btn {
    padding: 12px 24px;
    background: #ff3b30;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.discount-mark-used-btn:hover {
    background: #d70015;
    transform: translateY(-1px);
}

/* Discount Codes Section */
.discount-codes-section {
    padding: 0 32px 32px 32px;
}

.discount-codes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.discount-codes-header h2 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}

.discount-codes-count-badge {
    padding: 6px 14px;
    background: #f5f5f7;
    color: #6e6e73;
    border-radius: 12px;
    font-size: 0.8125em;
    font-weight: 600;
}

/* Discount Codes List */
.discount-codes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discount-code-item {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: all 0.2s ease;
}

.discount-code-item:hover {
    border-color: #e5e5e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.discount-code-main {
    flex: 1;
    min-width: 0;
}

.discount-code-header-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.discount-code-code {
    font-size: 1.25em;
    font-weight: 700;
    letter-spacing: 2px;
    color: #1d1d1f;
}

.discount-code-status-badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8125em;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.discount-code-status-badge.status-available {
    background: #d4edda;
    color: #155724;
}

.discount-code-status-badge.status-used {
    background: #f8d7da;
    color: #721c24;
}

.discount-code-status-badge.status-expired {
    background: #fff3cd;
    color: #856404;
}

.discount-code-details-item {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.discount-code-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125em;
    color: #6e6e73;
}

.discount-code-detail i {
    font-size: 0.875em;
    color: #86868b;
}

.discount-code-action {
    display: flex;
    align-items: flex-start;
}

.discount-code-mark-btn {
    padding: 8px 12px;
    background: #ff3b30;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.875em;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

    .discount-code-mark-btn:hover {
        background: #d70015;
        transform: translateY(-1px);
    }
    
    .customize-section {
        padding: 0;
    }
    
    .customize-question-grid {
        grid-template-columns: 1fr;
    }
    
    .customize-edit-field-group {
        grid-template-columns: 1fr;
    }

/* Customize Page Styles */
.customize-message {
    margin: 24px 32px 20px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375em;
    font-weight: 500;
}

@media (max-width: 768px) {
    .customize-message {
        margin: 16px 16px 16px;
    }
}

.customize-message-success {
    background: #f0fdf4;
    border: 1px solid #34c759;
    color: #155724;
}

.customize-message-error {
    background: #fef2f2;
    border: 1px solid #ff3b30;
    color: #991b1b;
}

.customize-message i {
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Stats Bar */
.customize-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    margin: 0 0 24px 0;
    background: #e5e5e7;
}

.customize-stats-bar .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 16px;
    background: #ffffff;
}

.customize-stats-bar .stat-label {
    font-size: 0.8125em;
    color: #6e6e73;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.customize-stats-bar .stat-value {
    font-size: 1.5em;
    font-weight: 700;
    color: #1d1d1f;
}

@media (max-width: 768px) {
    .customize-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .customize-stats-bar .stat-item {
        padding: 16px 12px;
    }
    
    .customize-stats-bar .stat-value {
        font-size: 1.25em;
    }
}

.customize-action-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0 32px;
    margin-top: 24px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .customize-action-bar {
        padding: 0 16px;
        margin-bottom: 20px;
    }
}

/* Tab System */
.customize-tabs {
    display: flex;
    gap: 0;
    margin: 24px 32px 0;
    padding-left: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e5e5e7;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.customize-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    color: #6e6e73;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.customize-tab:hover {
    color: #1d1d1f;
}

.customize-tab.active {
    color: #ff7a00;
    border-bottom-color: #ff7a00;
}

.customize-tab i {
    font-size: 0.9em;
    display: none;
}

.customize-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e5e5e7;
    color: #6e6e73;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.customize-tab.active .customize-tab-badge {
    background: rgba(255, 122, 0, 0.15);
    color: #ff7a00;
}

.customize-tab-content {
    display: none;
    padding-top: 24px;
    padding-bottom: 32px;
}

.customize-tab-content.active {
    display: block;
    animation: tabFadeIn 0.2s ease;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Upewnij się, że zakładki nie są zasłaniane przez sidebar */
body:has(.sidebar) .customize-tabs {
    margin-left: 32px;
    margin-right: 32px;
}

body:has(.sidebar) .customize-action-bar {
    padding-left: 32px;
    padding-right: 32px;
}

@media (max-width: 768px) {
    .customize-tabs {
        margin: 0 16px 0;
    }
    
    body:has(.sidebar) .customize-tabs {
        margin-left: 16px;
        margin-right: 16px;
    }
    
    .customize-tab {
        padding: 10px 16px;
        font-size: 0.875em;
    }
    
    .customize-tab-content {
        padding: 0 16px 24px;
    }
}

@media (max-width: 480px) {
    .customize-tabs {
        flex-wrap: wrap;
    }
    
    .customize-tab {
        padding: 10px 14px;
        font-size: 0.8125em;
    }
}

.customize-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #ff7a00;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    background: #ff7a00;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875em;
    font-weight: 500;
    font-family: inherit;
}

.customize-save-btn:hover {
    background: #e65c00;
    border-color: #e65c00;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

.customize-save-btn:active {
    transform: translateY(1px);
}

.customize-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.customize-save-btn i {
    font-size: 0.9em;
}

.customize-section {
    padding: 0 32px;
    margin-bottom: 28px;
}

.customize-section:last-child {
    margin-bottom: 0;
}

.customize-section-header {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .customize-section {
        padding: 0 16px;
    }
}

.customize-section-header h2 {
    margin: 0 0 6px 0;
    font-size: 1.25em;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 10px;
}

.customize-section-header h2 i {
    color: #6e6e73;
    font-size: 0.9em;
}

.customize-section-header h2 {
    margin: 0 0 6px 0;
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}

.customize-section-subtitle {
    margin: 0;
    font-size: 0.875em;
    color: #86868b;
    line-height: 1.4;
}

.customize-card {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 16px;
    padding: 28px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.customize-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-color: #d1d1d6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Survey Mode Selector */
.survey-mode-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.survey-mode-option {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 2px solid #e5e5e7;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafafa;
}

.survey-mode-option:hover {
    border-color: #86868b;
    background: #f5f5f7;
}

.survey-mode-option.active {
    border-color: #1d1d1f;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.survey-mode-option input[type="radio"] {
    display: none;
}

.survey-mode-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.survey-mode-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e5e7;
    border-radius: 10px;
    font-size: 1.25em;
    color: #6e6e73;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.survey-mode-option.active .survey-mode-icon {
    background: #1d1d1f;
    color: #ffffff;
}

.survey-mode-info h4 {
    margin: 0 0 6px 0;
    font-size: 1em;
    font-weight: 600;
    color: #1d1d1f;
}

.survey-mode-info p {
    margin: 0;
    font-size: 0.875em;
    color: #6e6e73;
    line-height: 1.4;
}

.survey-mode-preview {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #f5f5f7;
    border-radius: 8px;
}

.survey-mode-option.active .survey-mode-preview {
    background: #f0f0f2;
}

.mini-step {
    width: 32px;
    height: 8px;
    background: #d1d1d6;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.mini-step.active {
    background: #1d1d1f;
}

.mini-section {
    flex: 1;
    height: 24px;
    background: #d1d1d6;
    border-radius: 4px;
}

.survey-mode-option.active .mini-section {
    background: #1d1d1f;
}

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

/* Logo Management */
.customize-logo-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: transparent;
    border-radius: 12px;
    margin-bottom: 24px;
}

.customize-logo-image {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
}

.customize-logo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: #fafafa;
    border-radius: 12px;
    margin-bottom: 24px;
    color: #86868b;
}

.customize-logo-empty i {
    font-size: 3em;
    margin-bottom: 12px;
    opacity: 0.5;
}

.customize-logo-empty p {
    margin: 0;
    font-size: 0.9375em;
}

.customize-logo-upload-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customize-logo-upload-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customize-logo-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #1d1d1f;
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.customize-logo-file-label:hover {
    background: #363639;
}

.customize-logo-file-input {
    display: none;
}

.customize-logo-file-name {
    font-size: 0.875em;
    color: #6e6e73;
    flex: 1;
}

.customize-logo-hint {
    font-size: 0.8125em;
    color: #86868b;
}

.customize-logo-upload-btn {
    padding: 12px 20px;
    background: #ff7a00;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.customize-logo-upload-btn:hover {
    background: #e65c00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

.customize-logo-delete-form {
    margin: 0;
}

.customize-logo-delete-btn {
    padding: 8px 16px;
    background: #ff3b30;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.875em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.customize-logo-delete-btn:hover {
    background: #d70015;
    transform: translateY(-1px);
}

/* Edit Elements */
.customize-edit-item {
    margin-bottom: 24px;
}

.customize-edit-item:last-child {
    margin-bottom: 0;
}

.customize-edit-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875em;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.customize-edit-label i {
    color: #6e6e73;
    font-size: 0.875em;
}

.customize-editable-element {
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    outline: none;
    min-height: 48px;
}

.customize-editable-element:hover {
    border-color: #e5e5e7;
    background: #fafafa;
}

.customize-editable-element:focus {
    border-color: #1d1d1f;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.customize-editable-element h1 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 700;
    color: #1d1d1f;
}

.customize-editable-element p {
    margin: 0;
    font-size: 1em;
    line-height: 1.5;
    color: #1d1d1f;
}

/* Steps Section */
.customize-steps-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.customize-step-card {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.customize-step-card:hover {
    border-color: #e5e5e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.customize-step-card.active {
    border-color: #1d1d1f;
}

.customize-step-header {
    padding: 20px 24px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.customize-step-header:hover {
    background: #fafafa;
}

.customize-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1d1d1f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1em;
    flex-shrink: 0;
}

.customize-step-card.active .customize-step-number {
    background: var(--brand-primary, #ff7a00);
}

.customize-step-title {
    flex: 1;
}

.customize-step-title h4 {
    margin: 0 0 4px 0;
    font-size: 1em;
    font-weight: 600;
    color: #1d1d1f;
}

.customize-step-title p {
    margin: 0;
    font-size: 0.8125em;
    color: #6e6e73;
}

.customize-step-toggle {
    color: #86868b;
    transition: transform 0.2s ease;
}

.customize-step-card.active .customize-step-toggle {
    transform: rotate(180deg);
}

.customize-step-fields {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.customize-step-card.active .customize-step-fields {
    max-height: 2000px;
    padding: 24px;
    border-top: 1px solid #f5f5f7;
}

.customize-edit-field-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.customize-edit-field {
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
}

.customize-edit-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875em;
    font-weight: 500;
    color: #1d1d1f;
}

.customize-edit-field-label i {
    color: #6e6e73;
    margin-right: 8px;
}

/* Custom Questions Form */
.customize-question-form {
    padding-bottom: 24px;
    border-bottom: 1px solid #f5f5f7;
    margin-bottom: 24px;
}

.customize-q-title {
    margin: 0 0 20px 0;
    font-size: 1em;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.customize-q-title i {
    color: var(--brand-primary, #ff7a00);
}

.customize-question-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.customize-q-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.customize-q-label {
    font-size: 0.875em;
    font-weight: 500;
    color: #1d1d1f;
}

.customize-q-input,
.customize-q-select {
    padding: 12px 16px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    background: #ffffff;
    color: #1d1d1f;
    transition: all 0.2s ease;
}

.customize-q-input:focus,
.customize-q-select:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.customize-q-options-row {
    margin-bottom: 16px;
}

.customize-q-hint {
    font-size: 0.8125em;
    color: #86868b;
    margin-top: 6px;
    display: block;
}

.customize-q-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.customize-q-required {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.customize-q-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #e5e5e7;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.customize-q-switch::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.2s ease;
}

.customize-q-required input:checked + .customize-q-switch {
    background: #34c759;
}

.customize-q-required input:checked + .customize-q-switch::after {
    left: 22px;
}

.customize-q-required input {
    display: none;
}

.customize-q-required-label {
    font-size: 0.875em;
    color: #1d1d1f;
    font-weight: 500;
}

.customize-q-submit {
    padding: 12px 20px;
    background: #ff7a00;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.customize-q-submit:hover {
    background: #e65c00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

/* Questions List */
.customize-questions-list {
    padding-top: 24px;
}

.customize-questions-list-title {
    margin: 0 0 20px 0;
    font-size: 1em;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.customize-questions-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: #86868b;
}

.customize-questions-empty i {
    font-size: 3em;
    margin-bottom: 12px;
    opacity: 0.5;
}

.customize-questions-empty p {
    margin: 0;
    font-size: 0.9375em;
}

.customize-questions-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customize-question-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.customize-question-item:hover {
    border-color: #e5e5e7;
    background: #ffffff;
}

.customize-question-content {
    flex: 1;
    min-width: 0;
}

.customize-question-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.customize-question-text {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.9375em;
}

.customize-question-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.customize-question-badge-required {
    background: #fff3cd;
    color: #856404;
}

.customize-question-badge-type {
    background: #f5f5f7;
    color: #6e6e73;
}

.customize-question-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.customize-question-options {
    font-size: 0.8125em;
    color: #6e6e73;
}

.customize-question-delete {
    margin: 0;
}

.customize-question-delete-btn {
    padding: 8px 12px;
    background: #ff3b30;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.875em;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customize-question-delete-btn:hover {
    background: #d70015;
    transform: translateY(-1px);
}

/* Contact Card Minimal */
.contact-card-minimal {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.contact-card-minimal:hover {
    border-color: #e5e5e7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

.contact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.contact-card-info {
    flex: 1;
    min-width: 0;
}

.contact-card-name {
    font-weight: 600;
    font-size: 0.9375em;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.contact-card-age {
    font-size: 0.8125em;
    color: #6e6e73;
}

.contact-card-rating-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.875em;
    flex-shrink: 0;
}

.contact-card-rating-badge.rating-5 {
    background: #34c759;
    color: #ffffff;
}

.contact-card-rating-badge.rating-4 {
    background: #5ac8fa;
    color: #ffffff;
}

.contact-card-rating-badge.rating-3 {
    background: #ff9500;
    color: #ffffff;
}

.contact-card-rating-badge.rating-2,
.contact-card-rating-badge.rating-1 {
    background: #ff3b30;
    color: #ffffff;
}

.contact-card-stars {
    font-size: 1em;
    color: #ff9500;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.contact-card-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f7;
}

.contact-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875em;
    color: #1d1d1f;
}

.contact-detail-row i {
    color: #6e6e73;
    font-size: 0.875em;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.contact-detail-link {
    flex: 1;
    color: #1d1d1f;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.contact-detail-link:hover {
    color: #1d1d1f;
    text-decoration: underline;
}

.contact-detail-row span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-copy-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid #e5e5e7;
    border-radius: 6px;
    color: #6e6e73;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.contact-copy-btn:hover {
    background: #f5f5f7;
    border-color: #d2d2d7;
    color: #1d1d1f;
}

.contact-copy-btn i {
    font-size: 0.75em;
}

.opinions-section {
    background: transparent;
    padding: 0 32px 32px 32px;
    border-radius: 0;
    margin-bottom: 32px;
    border: none;
}

.opinions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.opinions-section h2 {
    color: #1d1d1f;
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.opinions-count-badge {
    padding: 6px 14px;
    background: #f5f5f7;
    color: #6e6e73;
    border-radius: 12px;
    font-size: 0.8125em;
    font-weight: 600;
}

/* Opinions Grid */
.opinions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}

/* Opinion Card Minimal */
.opinion-card-minimal {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.opinion-card-minimal:hover {
    border-color: #e5e5e7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

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

.opinion-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.opinion-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1d1d1f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125em;
    flex-shrink: 0;
}

.opinion-card-info {
    flex: 1;
    min-width: 0;
}

.opinion-card-name {
    font-weight: 600;
    font-size: 0.9375em;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.opinion-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125em;
    color: #6e6e73;
    flex-wrap: wrap;
}

.opinion-card-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opinion-card-separator {
    color: #d2d2d7;
}

.opinion-card-date {
    white-space: nowrap;
}

.opinion-card-rating-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.875em;
    flex-shrink: 0;
}

.opinion-card-rating-badge.rating-5 {
    background: #34c759;
    color: #ffffff;
}

.opinion-card-rating-badge.rating-4 {
    background: #5ac8fa;
    color: #ffffff;
}

.opinion-card-rating-badge.rating-3 {
    background: #ff9500;
    color: #ffffff;
}

.opinion-card-rating-badge.rating-2,
.opinion-card-rating-badge.rating-1 {
    background: #ff3b30;
    color: #ffffff;
}

.opinion-card-stars {
    font-size: 1.125em;
    color: #ff9500;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.opinion-card-feedback {
    margin-bottom: 12px;
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
    border-left: 3px solid #1d1d1f;
}

.opinion-card-feedback-text {
    font-size: 0.875em;
    color: #1d1d1f;
    line-height: 1.6;
}

.opinion-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid #f5f5f7;
}

.opinion-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1;
}

.opinion-detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125em;
    color: #6e6e73;
}

.opinion-detail-item i {
    color: #86868b;
    font-size: 0.875em;
}

.opinion-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.opinion-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-success {
    background: #d4edda;
    color: #155724;
}

.badge-neutral {
    background: #f5f5f7;
    color: #6e6e73;
}

.opinion-badge i {
    font-size: 0.875em;
}

.opinion-card {
    border: none;
    border-left: 4px solid #e5e5e7;
    border-radius: 0;
    padding: 28px 32px;
    margin-bottom: 24px;
    transition: all 0.2s ease;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.opinion-card:hover {
    border-left-color: var(--brand-primary, #ff7a00);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateX(4px);
}

.opinion-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 2px solid #f5f5f7;
    flex-wrap: wrap;
    gap: 16px;
}

.opinion-author {
    font-weight: 700;
    font-size: 1.2em;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.opinion-author::before {
    content: '👤';
    font-size: 0.9em;
}

.opinion-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opinion-info > div {
    color: #86868b;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.opinion-info > div i {
    color: var(--brand-primary, #ff7a00);
    width: 16px;
    text-align: center;
}

.opinion-date {
    color: #86868b;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
    border-radius: 8px;
    border: 1px solid #e5e5e7;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ratings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.rating-item {
    background: #f5f5f7;
    padding: 16px;
    border-radius: 10px;
}

.rating-label {
    font-size: 0.85em;
    color: #86868b;
    margin-bottom: 8px;
    font-weight: 400;
}

.rating-stars {
    color: #1d1d1f;
    font-size: 1.1em;
}

.comment-section {
    background: #f5f5f7;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.comment-label {
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
    font-size: 0.95em;
}

.recommendation {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    margin-right: 12px;
}

.recommendation.tak {
    background: #34c759;
    color: #ffffff;
}

.recommendation.nie {
    background: #f5f5f7;
    color: #86868b;
    border: 1px solid #d2d2d7;
}

.google-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    margin-left: 0;
}

.google-review-badge.clicked {
    background: linear-gradient(135deg, #34c759 0%, #28a745 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

.google-review-badge.not-clicked {
    background: #f5f5f7;
    color: #86868b;
    border: 1px solid #d2d2d7;
}

.opinion-phone,
.opinion-age,
.opinion-source {
    font-size: 0.9em;
    color: #86868b;
    margin: 0;
}

/* Feedback Section */
.feedback-section {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    border-radius: 12px;
    border-left: 4px solid var(--brand-primary, #ff7a00);
    border-right: 1px solid #ffe5cc;
    border-top: 1px solid #ffe5cc;
    border-bottom: 1px solid #ffe5cc;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.1);
}

.feedback-label {
    margin-bottom: 12px;
    color: #1d1d1f;
    font-weight: 600;
    font-size: 0.95em;
}

.feedback-text {
    color: #1d1d1f;
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 0.95em;
}

.feedback-date {
    color: #86868b;
    font-size: 0.85em;
    font-style: italic;
}

/* Age Statistics */
.age-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.age-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #f5f5f7;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.age-item:hover {
    background: #e5e5e7;
}

.age-label {
    min-width: 80px;
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.95em;
}

.age-bar {
    flex: 1;
    height: 8px;
    background: #d2d2d7;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.age-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary), #ffb86b);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.age-count {
    min-width: 80px;
    text-align: right;
    font-size: 0.9em;
    color: #86868b;
    font-weight: 500;
}

/* Source Statistics */
.source-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.source-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #f5f5f7;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.source-item:hover {
    background: #e5e5e7;
}

.source-label {
    min-width: 120px;
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.95em;
}

.source-bar {
    flex: 1;
    height: 8px;
    background: #d2d2d7;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.source-fill {
    height: 100%;
    background: linear-gradient(90deg, #34c759, #30d158);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.source-count {
    min-width: 80px;
    text-align: right;
    font-size: 0.9em;
    color: #86868b;
    font-weight: 500;
}

/* Rating Display */
.rating-display {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
    border-radius: 10px;
    border: 1px solid #e5e5e7;
}

.rating-display .rating-label {
    font-weight: 500;
    color: #86868b;
    font-size: 0.9em;
    min-width: 120px;
    text-transform: none;
    letter-spacing: 0;
}

.rating-display .rating-stars {
    font-size: 1.4em;
    color: #ff9500;
    letter-spacing: 2px;
    font-weight: 600;
}

/* Main Rating Card */
.main-rating {
    text-align: center;
    grid-column: 1 / -1;
    max-width: 400px;
    margin: 0 auto;
}

.main-rating .stat-value.large {
    font-size: 3.5em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 16px 0;
}

.main-rating .stars-display.large {
    font-size: 2.5em;
    color: #ff9500;
    margin: 16px 0;
}

.rating-description {
    font-size: 0.9em;
    color: #86868b;
    margin-top: 8px;
}

/* Options Page Styles */
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 0;
}

.option-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 24px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.option-card:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.option-header {
    margin-bottom: 16px;
}

.option-header h4 {
    font-size: 1.15em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.option-header p {
    font-size: 0.9em;
    color: #86868b;
    margin: 0;
    line-height: 1.5;
}

.option-stats {
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid #f5f5f7;
    border-bottom: 1px solid #f5f5f7;
}

.option-count {
    display: inline-block;
    background: #f5f5f7;
    color: #1d1d1f;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 500;
}

.option-form {
    margin-top: auto;
    padding-top: 16px;
}

.option-btn {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: block;
    text-decoration: none;
}

.option-btn.danger {
    background: #ff3b30;
    color: #ffffff;
}

.option-btn.danger:hover {
    background: #d70015;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

.option-btn.warning {
    background: #ff9500;
    color: #ffffff;
}

.option-btn.warning:hover {
    background: #e6850e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.option-btn.primary {
    background: var(--brand-primary);
    color: #ffffff;
}

.option-btn.primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 0;
}

.info-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    border: 1px solid #e5e5e7;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.info-card:hover {
    border-color: #d2d2d7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-card h4 {
    font-size: 0.75em;
    font-weight: 600;
    color: #86868b;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.info-card p {
    font-size: 1.15em;
    color: #1d1d1f;
    margin: 0;
    font-weight: 600;
}

.status-ok {
    color: #34c759 !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.status-ok i {
    font-size: 1.1em;
}

.opinion-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.opinion-checkbox {
    margin-right: 12px;
}

.opinion-checkbox-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.opinion-info {
    flex: 1;
}

.delete-opinion-btn {
    background: #ff3b30;
    color: #ffffff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-opinion-btn:hover {
    background: #d70015;
}

/* Management section */
.management-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid #d2d2d7;
}

.filters-section {
    background: transparent;
    border-radius: 0;
    padding: 0 40px 32px;
    margin-bottom: 32px;
    border: none;
}

.filters-form {
    display: flex;
    gap: 16px;
    align-items: end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group input,
.filter-group select {
    padding: 12px 16px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 0.95em;
    background: #ffffff;
    transition: all 0.2s ease;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.filter-actions {
    display: flex;
    gap: 12px;
    align-items: end;
}

.filter-btn {
    background: var(--brand-primary);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.clear-btn {
    background: #86868b;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.clear-btn:hover {
    background: #6c6c70;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(134, 134, 139, 0.3);
}

/* Bulk actions */
.bulk-actions {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #d2d2d7;
}

.bulk-actions-group {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.bulk-actions-group:last-child {
    margin-bottom: 0;
}

.select-all-btn,
.select-none-btn {
    background: #34c759;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.select-none-btn {
    background: #86868b;
}

.select-all-btn:hover {
    background: #28a745;
}

.select-none-btn:hover {
    background: #6c6c70;
}

.bulk-action-select {
    padding: 8px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 0.85em;
    background: #ffffff;
    min-width: 200px;
}

.bulk-execute-btn {
    background: #ff3b30;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bulk-execute-btn:hover {
    background: #d70015;
}

/* Pagination */
.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 24px 0;
    background: transparent;
    border-radius: 0;
    border: none;
    border-top: 1px solid #f5f5f7;
}

.pagination-info {
    font-size: 0.8125em;
    color: #6e6e73;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pagination-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: #ffffff;
    color: #1d1d1f;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.875em;
    font-weight: 500;
    border: 1px solid #f5f5f7;
    transition: all 0.2s ease;
    min-width: 40px;
}

.pagination-btn:hover {
    background: #ff7a00;
    color: #ffffff;
    border-color: #ff7a00;
}

.pagination-btn.active {
    background: #ff7a00;
    color: #ffffff;
    border-color: #ff7a00;
    font-weight: 600;
}

.pagination-btn.active:hover {
    background: #e65c00;
    border-color: #e65c00;
}

/* Charts Stats Bar */
.charts-stats-bar,
.custom-questions-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 24px 32px;
    background: transparent;
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    padding: 0 32px 32px 32px;
}

/* Chart Card */
.chart-card {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.chart-card:hover {
    border-color: #e5e5e7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.chart-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1em;
    color: #1d1d1f;
}

.chart-card-title i {
    color: #6e6e73;
    font-size: 0.9em;
}

.chart-card-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-range-select {
    padding: 8px 12px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.875em;
    background: #ffffff;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-range-select:focus {
    outline: none;
    border-color: #1d1d1f;
}

.chart-export-btn {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    color: #6e6e73;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-export-btn:hover {
    background: #f5f5f7;
    border-color: #d2d2d7;
    color: #1d1d1f;
}

.chart-card-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
    flex-wrap: wrap;
}

.chart-stat-mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chart-stat-mini-label {
    font-size: 0.75em;
    color: #6e6e73;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chart-stat-mini-value {
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
}

.chart-card-content {
    position: relative;
    height: 300px;
}

/* Responsive charts */
@media (max-width: 768px) {
    .charts-grid,
    .custom-questions-grid {
        grid-template-columns: 1fr;
        padding: 0 16px 24px 16px;
    gap: 16px;
}

    .custom-questions-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    padding: 16px;
        gap: 12px;
    }
    
    .export-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 12px;
    }
    
    .export-section {
        padding: 0 16px 24px 16px;
    }
    
    .export-grid-minimal {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .export-card-minimal {
        padding: 20px;
}

    .modal-content-minimal {
        max-width: 100%;
        margin: 20px;
    }
    
    .export-checkboxes-grid {
        grid-template-columns: 1fr;
    }
    
    .export-date-range {
        grid-template-columns: 1fr;
    }
    
    .export-form-actions {
        flex-direction: column;
    }
    
    .export-form-submit-btn,
    .export-form-cancel-btn {
        width: 100%;
    }
    
    .discount-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 12px;
    }
    
    .discount-verify-section,
    .discount-result-section,
    .discount-codes-section {
        padding: 0 16px 24px 16px;
}

    .discount-verify-card,
    .discount-result-card {
        padding: 20px;
    }
    
    .discount-result-code {
        font-size: 1.5em;
        letter-spacing: 2px;
    }
    
    .discount-result-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .discount-code-item {
        flex-direction: column;
        gap: 12px;
    }
    
    .discount-code-header-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .chart-card {
        padding: 20px;
    }
    
    .chart-card-content {
        height: 250px;
    }
    
    .charts-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 12px;
    }
}

/* Responsive styles */
@media (max-width: 1024px) {
    .sidebar { 
        width: var(--sidebar-collapsed-w); 
        background: #ffffff;
    }
    body:has(.sidebar) .container { 
        margin-left: var(--sidebar-collapsed-w);
        width: calc(100% - var(--sidebar-collapsed-w)) !important;
        max-width: none !important;
    }
    
    body:has(.sidebar) .container > *:not(.top-bar) {
        padding-left: 24px;
        padding-right: 24px;
    }
    .sidebar.collapsed { width: var(--sidebar-collapsed-w); }
    
    /* Mobile sidebar improvements */
    .sidebar-top {
        padding: 16px 8px;
        justify-content: center;
    }
    
    .sidebar-toggle {
        width: 36px;
        height: 36px;
        padding: 8px;
        font-size: 16px;
    }
    
    .sidebar-nav {
        padding: 12px 4px;
        gap: 4px;
    }
    
    .nav-item {
        padding: 12px 10px;
        font-size: 0.875em;
        justify-content: center;
        border-left: 4px solid transparent;
    }
    
    .nav-item.active {
        border-left-color: #ff7a00;
    }
    
    .nav-ico {
        width: 18px;
        font-size: 16px;
        margin: 0;
    }
    
    .sidebar-footer {
        padding: 10px 6px;
    }
    
    .sidebar-footer .nav-item {
        justify-content: center;
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .top-bar {
        padding: 0 24px;
        height: 60px;
        min-height: 60px;
    }
    
    .page-title {
        font-size: 1.35em;
        gap: 10px;
    }
    
    .page-title i {
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .top-bar {
        padding: 0 20px;
        height: 56px;
        min-height: 56px;
    }
    
    .page-title {
        font-size: 1.2em;
        gap: 8px;
    }
    
    .page-title i {
        font-size: 0.8em;
    }
    
    body:has(.sidebar) .container {
        margin-left: var(--sidebar-collapsed-w);
        width: calc(100% - var(--sidebar-collapsed-w)) !important;
    }
    
    body:has(.sidebar) .container > *:not(.top-bar) {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .user-info {
        gap: 8px;
    }
    
    .settings-btn {
        width: 32px;
        height: 32px;
    }
    
    .user-profile {
        padding: 2px 6px;
        gap: 8px;
    }
    
    .user-avatar {
        width: 28px;
        height: 28px;
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 12px;
    }
    
    .hero-card {
        padding: 20px;
    }
    
    .hero-card-value {
        font-size: 2em;
    }
    
    .dashboard-grid {
        padding: 0 16px;
        gap: 16px;
    }
    
    .dashboard-section {
        padding: 20px 16px;
    }
    
    .section-divider {
        margin: 24px 16px;
    }
    
    .quick-actions-minimal {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mini-chart-container {
        height: 70px;
    }
    
    .admin-actions {
        width: 100%;
    }
    
    .change-password-btn,
    .logout-btn {
        flex: 1;
        text-align: center;
    }
    
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 24px;
    }
    
    .hero-card {
        padding: 20px;
    }
    
    .hero-card-value {
        font-size: 2.25em;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
        padding: 0 24px;
    }
    
    .mini-chart-container {
        height: 80px;
    }
    
    .quick-actions-minimal {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .age-stats-minimal {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .contacts-stats {
        gap: 16px;
    }
    
    .contact-stat-card {
        padding: 24px;
    }
    
    .contact-stat-icon {
        font-size: 2em;
        margin-bottom: 8px;
    }
    
    .contact-stat-card .hero-card-value {
        font-size: 2.5em;
    }
    
    .opinions-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 12px;
    }
    
    .stat-item {
        padding: 16px;
    }
    
    .stat-value {
        font-size: 1.75em;
    }
    
    .filters-section-minimal {
        padding: 20px 16px;
        margin: 0 16px 20px 16px;
    }
    
    .filters-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .filters-actions {
        flex-direction: column;
    }
    
    .filter-btn-minimal,
    .clear-btn-minimal {
        width: 100%;
        justify-content: center;
    }
    
    .opinions-section {
        padding: 0 16px 24px 16px;
        margin-bottom: 24px;
    }
    
    .opinions-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .opinions-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .opinion-card-minimal {
        padding: 16px;
    }
    
    .opinion-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .opinion-card-details {
        width: 100%;
    }
    
    .opinions-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-item {
        padding: 14px;
    }
    
    .stat-value {
        font-size: 1.5em;
    }
    
    .filters-row {
        grid-template-columns: 1fr;
    }
    
    .opinions-grid {
        grid-template-columns: 1fr;
    }
    
    .contacts-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 12px;
    }
    
    .contacts-section {
        padding: 0 16px 24px 16px;
    }
    
    .contact-list-item {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
    }
    
    .contact-list-avatar {
        width: 40px;
        height: 40px;
        font-size: 1em;
    }
    
    .contact-list-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .contact-list-rating {
        align-self: flex-start;
    }
    
    .rating-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    
    .rating-display .rating-label {
        min-width: auto;
    }
    
    .ratings-grid {
        grid-template-columns: 1fr;
    }
    
    .google-review-badge {
        display: block;
        margin-top: 12px;
        margin-left: 0;
    }
    
    .filters-section {
        padding: 20px;
        margin-bottom: 24px;
    }
    
    .filters-form {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .filter-group {
        min-width: 100%;
    }
    
    .filter-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .filter-btn,
    .clear-btn {
        width: 100%;
        justify-content: center;
    }
    
    .pagination {
        padding: 20px;
        margin-top: 24px;
    }
    
    .pagination-links {
        gap: 6px;
    }
    
    .pagination-btn {
        padding: 8px 12px;
        font-size: 0.85em;
        min-width: 36px;
    }
    
    .bulk-actions-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .opinion-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .export-stats {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 24px;
    }
    
    .export-stat-card {
        padding: 20px;
    }
    
    .export-options {
        margin: 24px 0;
    }
    
    .export-options h2 {
        font-size: 1.3em;
        margin-bottom: 20px;
    }
    
    .export-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .export-card {
        padding: 20px;
    }
    
    .modal-content {
        max-width: 95%;
        width: 95%;
    }
    
    .checkbox-group {
        grid-template-columns: 1fr;
    }
    
    .date-range {
        flex-direction: column;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .export-btn {
        width: 100%;
    }
    
    .chart-section {
        padding: 32px 24px;
    }
    
    .chart-container {
        padding: 24px;
    }
    
    .chart-wrapper {
        height: 250px;
    }
}

/* ===== ZARZĄDZANIE KONTAMI ADMINISTRATORÓW ===== */

.admin-form-section {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid #e5e5e7;
}

.admin-form-section h4 {
    margin: 0 0 20px 0;
    color: #1d1d1f;
    font-size: 1.15em;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e7;
}

.admin-form .form-row {
    display: flex;
    gap: 16px;
    align-items: end;
    flex-wrap: wrap;
}

.admin-form .form-group {
    flex: 1;
    min-width: 200px;
}

.admin-form .form-group:last-child {
    flex: 0 0 auto;
    display: flex;
    align-items: end;
}

.admin-form label {
    display: block;
    margin-bottom: 8px;
    color: #1d1d1f;
    font-weight: 500;
    font-size: 0.9em;
}

.admin-form input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.2s ease;
    background: #ffffff;
}

.admin-form input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.admin-list-section {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e5e7;
    margin-top: 24px;
}

.admin-list-section h4 {
    margin: 0 0 20px 0;
    color: #1d1d1f;
    font-size: 1.15em;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e7;
}

.admin-table {
    overflow-x: auto;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e5e7;
}

.admin-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.admin-table th {
    background: #f5f5f7;
    color: #1d1d1f;
    font-weight: 600;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid #e5e5e7;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table td {
    padding: 16px;
    border-bottom: 1px solid #f5f5f7;
    vertical-align: middle;
    background: #ffffff;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: #f9f9f9;
}

.current-user {
    color: var(--brand-primary);
    font-size: 0.8em;
    margin-left: 8px;
}

.actions {
    white-space: nowrap;
}

.action-btn {
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    margin-right: 8px;
    transition: background-color 0.2s ease;
}

.change-password-btn:hover {
    background: #e3f2fd;
}

.delete-btn:hover {
    background: #ffebee;
}

.no-actions {
    color: #86868b;
    font-style: italic;
}

/* ===== MODAL ZMIANY HASŁA ===== */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 0;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #f5f5f7;
    margin-bottom: 24px;
}

.modal-header h3 {
    margin: 0;
    color: #1d1d1f;
    font-size: 1.2em;
    font-weight: 600;
}

.close {
    color: #86868b;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close:hover {
    color: #1d1d1f;
}

.modal-form {
    padding: 0 24px 24px 24px;
}

.modal-form .form-group {
    margin-bottom: 20px;
}

.modal-form label {
    display: block;
    margin-bottom: 8px;
    color: #1d1d1f;
    font-weight: 500;
    font-size: 0.9em;
}

.modal-form input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.modal-form input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.btn-primary, .btn-secondary {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: #ff7a00;
    color: #ffffff;
}

.btn-primary:hover {
    background: #e65c00;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 122, 0, 0.3);
}

.btn-secondary {
    background: #f5f5f7;
    color: #1d1d1f;
}

.btn-secondary:hover {
    background: #e5e5e7;
}

/* Responsywność dla zarządzania kontami */
@media (max-width: 768px) {
    .dashboard-section {
        padding: 24px 20px;
        margin-bottom: 24px;
    }
    
    .widget-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .widget-handle {
        order: -1;
        margin-left: auto;
    }
    
    .widget-config-modal {
        padding: 10px;
    }
    
    .widget-modal-content {
        max-width: 95%;
        height: 90vh;
        max-height: 90vh;
    }
    
    .widget-tab-content {
        min-height: 300px;
    }
    
    .widget-modal-header,
    .widget-modal-body,
    .widget-modal-footer {
        padding: 20px;
    }
    
    .widget-config-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .widget-modal-footer {
        flex-direction: column;
    }
    
    .widget-btn-primary,
    .widget-btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .dashboard-section:not(.dashboard-widget) h3 {
        font-size: 1.3em;
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    
    .widget-header h3 {
        font-size: 1.1em;
    }
    
    .options-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .option-card {
        padding: 20px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .admin-form-section,
    .admin-list-section {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .admin-form .form-row {
        flex-direction: column;
        gap: 16px;
    }
    
    .admin-form .form-group {
        min-width: 100%;
    }
    
    .admin-form .form-group:last-child {
        flex: 1;
    }
    
    .admin-table {
        font-size: 0.8em;
        border-radius: 8px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 12px 10px;
    }
    
    .section-divider {
        margin: 32px 0;
    }
    
    .modal-content {
        margin: 10% auto;
        width: 95%;
    }
    
    .modal-header {
        padding: 20px 20px 0 20px;
    }
    
    .modal-form {
        padding: 0 20px 20px 20px;
    }
}

/* Options Page Styles */
.options-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
}

.options-stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.options-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    flex-shrink: 0;
}

.options-stat-info {
    flex: 1;
    min-width: 0;
}

.options-stat-value {
    font-size: 1.5em;
    font-weight: 600;
    color: #1d1d1f;
    display: block;
    line-height: 1.2;
}

.options-stat-label {
    font-size: 0.875em;
    color: #6e6e73;
    display: block;
    margin-top: 4px;
}

.options-message {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.3s ease;
}

.options-message-success {
    background: #f0fdf4;
    border: 1px solid #22c55e;
    color: #15803d;
}

.options-message-error {
    background: #fef2f2;
    border: 1px solid #ef4444;
    color: #991b1b;
}

.options-message i {
    font-size: 1.25em;
    flex-shrink: 0;
}

.section-header-minimal {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.section-header-minimal h2 {
    font-size: 1.375em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-header-minimal h2 i {
    color: #6e6e73;
    font-size: 1em;
}

.section-subtitle-minimal {
    font-size: 0.9375em;
    color: #6e6e73;
    margin: 0;
}

.options-grid-minimal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.option-card-minimal {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.2s ease;
}

.option-card-minimal:hover {
    border-color: #d2d2d7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.option-card-minimal-link {
    flex-direction: row;
    align-items: center;
}

.option-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    flex-shrink: 0;
}

.option-card-content {
    flex: 1;
    min-width: 0;
}

.option-card-title {
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}

.option-card-desc {
    font-size: 0.9375em;
    color: #6e6e73;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.option-card-stats {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.option-card-stat-value {
    font-size: 1.75em;
    font-weight: 600;
    color: #1d1d1f;
}

.option-card-stat-label {
    font-size: 0.875em;
    color: #6e6e73;
}

.option-card-form {
    margin: 0;
}

.option-card-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.option-card-btn-primary {
    background: #1d1d1f;
    color: #ffffff;
}

.option-card-btn-primary:hover {
    background: #363639;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 29, 31, 0.2);
}

.option-card-btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.option-card-btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.option-card-btn-warning {
    background: #f59e0b;
    color: #ffffff;
}

.option-card-btn-warning:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Admin Form Card */
.admin-form-card {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.admin-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f7;
}

.admin-form-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f0f9ff;
    color: #0ea5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    flex-shrink: 0;
}

.admin-form-header h3 {
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 4px 0;
}

.admin-form-header p {
    font-size: 0.9375em;
    color: #6e6e73;
    margin: 0;
}

.admin-form-minimal {
    margin: 0;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
}

.admin-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-form-field:last-child {
    display: flex;
    justify-content: flex-end;
}

.admin-form-field label {
    font-size: 0.875em;
    font-weight: 500;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-form-field label i {
    color: #6e6e73;
    font-size: 0.875em;
}

.admin-form-field input {
    padding: 12px 16px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    font-family: inherit;
    background: #ffffff;
    color: #1d1d1f;
    transition: all 0.2s ease;
}

.admin-form-field input:hover {
    border-color: #d2d2d7;
}

.admin-form-field input:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.admin-form-submit-btn {
    padding: 12px 24px;
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.admin-form-submit-btn:hover {
    background: #363639;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 29, 31, 0.2);
}

/* Admin List Card */
.admin-list-card {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
}

.admin-list-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.admin-list-header h3 {
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-list-header h3 i {
    color: #6e6e73;
}

.admin-list-minimal {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-list-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f5f5f7;
    color: #6e6e73;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    flex-shrink: 0;
}

.admin-list-info {
    flex: 1;
    min-width: 0;
}

.admin-list-name {
    font-size: 1em;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-list-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
}

.admin-list-badge-current {
    background: #f0f9ff;
    color: #0ea5e9;
}

.admin-list-badge-admin {
    background: #fef3c7;
    color: #d97706;
}

.admin-list-badge-employee {
    background: #e0e7ff;
    color: #4f46e5;
}

.admin-list-avatar.avatar-employee {
    background: #e0e7ff;
    color: #4f46e5;
}

.admin-action-btn-role {
    background: #e0e7ff;
    color: #4f46e5;
}

.admin-action-btn-role:hover {
    background: #c7d2fe;
}

/* Payments - Month navigation */
.month-nav-btn:hover {
    background: #f5f5f7 !important;
    border-color: #d1d1d1 !important;
}

.payments-month-nav a[style*="background: #1d1d1f"]:hover {
    background: #363639 !important;
}

.payments-summary-table tbody tr:hover {
    background: #f5f5f7 !important;
}

.payments-summary-table tbody tr {
    cursor: pointer;
}

.payments-summary-table a:hover {
    background: #e5e5e7 !important;
}

.admin-form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    color: #1d1d1f;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-form-select:hover {
    border-color: #d1d1d1;
}

.admin-form-select:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.1);
}

.role-info {
    margin-top: 16px;
    padding: 12px 16px;
    background: #f5f5f7;
    border-radius: 8px;
    font-size: 0.875em;
    color: #6e6e73;
}

.role-info p {
    margin: 4px 0;
}

.role-info p:first-child {
    margin-top: 0;
}

.role-info p:last-child {
    margin-bottom: 0;
}

.admin-list-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-list-meta-item {
    font-size: 0.875em;
    color: #6e6e73;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-list-meta-item i {
    font-size: 0.875em;
    width: 14px;
}

.admin-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.admin-list-item:hover {
    border-color: #e5e5e7;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.admin-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    min-width: fit-content;
}

.admin-action-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: #f5f5f7;
    color: #6e6e73;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375em;
    flex-shrink: 0;
    padding: 0;
}

.admin-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-action-btn-change:hover {
    background: #e0f2fe;
    color: #0ea5e9;
}

.admin-action-btn-delete:hover {
    background: #fee2e2;
    color: #ef4444;
}

.admin-action-btn:active {
    transform: translateY(0);
}

.admin-list-actions form {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.admin-list-actions form button {
    margin: 0;
    padding: 0;
}

.admin-list-no-actions {
    font-size: 0.875em;
    color: #86868b;
    font-style: italic;
}

/* Info Grid Minimal */
.info-grid-minimal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.info-card-minimal {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.info-card-minimal:hover {
    border-color: #d2d2d7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.info-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f5f5f7;
    color: #6e6e73;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    flex-shrink: 0;
}

.info-card-content {
    flex: 1;
    min-width: 0;
}

.info-card-label {
    font-size: 0.8125em;
    color: #6e6e73;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-card-value {
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
}

/* Modal Minimal */
.modal-minimal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content-minimal {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header-minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #f5f5f7;
}

.modal-title-minimal {
    font-size: 1.25em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-title-minimal i {
    color: #6e6e73;
}

.modal-close-minimal {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f7;
    color: #6e6e73;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
}

.modal-close-minimal:hover {
    background: #e5e5e7;
    color: #1d1d1f;
}

.modal-form-minimal {
    padding: 24px;
}

.modal-form-field {
    margin-bottom: 20px;
}

.modal-form-field:last-of-type {
    margin-bottom: 0;
}

.modal-form-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875em;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.modal-form-field label i {
    color: #6e6e73;
    font-size: 0.875em;
}

.modal-form-field input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    font-family: inherit;
    background: #ffffff;
    color: #1d1d1f;
    transition: all 0.2s ease;
}

.modal-form-field input:hover {
    border-color: #d2d2d7;
}

.modal-form-field input:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.modal-actions-minimal {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f5f5f7;
}

.modal-btn-primary,
.modal-btn-secondary {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

.modal-btn-primary {
    background: #1d1d1f;
    color: #ffffff;
}

.modal-btn-primary:hover {
    background: #363639;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 29, 31, 0.2);
}

.modal-btn-secondary {
    background: #f5f5f7;
    color: #6e6e73;
}

.modal-btn-secondary:hover {
    background: #e5e5e7;
    color: #1d1d1f;
}

/* Responsive Options */
@media (max-width: 768px) {
    .options-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px;
    }
    
    .options-grid-minimal {
        grid-template-columns: 1fr;
    }
    
    .admin-form-grid {
        grid-template-columns: 1fr;
    }
    
    .info-grid-minimal {
        grid-template-columns: 1fr;
    }
    
    .admin-list-item {
        flex-wrap: wrap;
    }
    
    .admin-list-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .options-stats-bar {
        grid-template-columns: 1fr;
    }
    
    .option-card-minimal-link {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Customize Toast Notifications */
.customize-toast {
    position: fixed;
    top: 80px;
    right: 32px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 500px;
    z-index: 10000;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.customize-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.customize-toast-success {
    border-left: 4px solid #34c759;
}

.customize-toast-error {
    border-left: 4px solid #ff3b30;
}

.customize-toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125em;
}

.customize-toast-success .customize-toast-icon {
    background: #f0fdf4;
    color: #22c55e;
}

.customize-toast-error .customize-toast-icon {
    background: #fef2f2;
    color: #ef4444;
}

.customize-toast-message {
    flex: 1;
    font-size: 0.9375em;
    color: #1d1d1f;
    line-height: 1.4;
}

.customize-toast-close {
    background: none;
    border: none;
    color: #6e6e73;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875em;
    flex-shrink: 0;
}

.customize-toast-close:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}

.customize-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.customize-save-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .customize-toast {
        right: 16px;
        left: 16px;
        min-width: auto;
        max-width: none;
        transform: translateY(-100px);
    }
    
    .customize-toast.show {
        transform: translateY(0);
    }
}

/* Footer Styles */
.survey-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    text-align: center;
    border-top: 1px solid #e5e5e7;
    background: #ffffff;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.survey-footer .footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    width: auto;
}

/* Footer w panelu admina - ukryty (footer jest teraz w kontenerze) */
body:has(.sidebar) .survey-footer {
    display: none !important;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.upinion-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.upinion-logo img,
.upinion-logo img.logo-transparent {
    height: 32px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    background: transparent;
}

.footer-text {
    color: #86868b;
    font-size: 0.875em;
    white-space: nowrap;
    display: inline;
}

.footer-link {
    color: #86868b;
    font-size: 0.875em;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.footer-link:hover {
    color: var(--brand-primary, #ff7a00);
}

.footer-text:hover {
    color: #1d1d1f;
}

.upinion-brand {
    background: linear-gradient(135deg, #ff3b30 0%, #ff9500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

@media (max-width: 768px) {
    .survey-footer {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        bottom: 0;
        position: fixed;
    }
    
    .survey-footer-minimal {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        bottom: 0;
        position: fixed;
    }
}

/* Survey Minimal Styles */
.survey-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px 24px 100px 24px;
    min-height: 100vh;
}

.survey-header-minimal {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f5f5f7;
}

.survey-logo-minimal {
    margin-bottom: 20px;
}

.survey-logo-image {
    max-height: 120px;
    max-width: 400px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.survey-title-minimal {
    font-size: 2em;
    font-weight: 700;
    color: var(--survey-text, #1d1d1f);
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.survey-description-minimal {
    font-size: 1em;
    color: var(--survey-text, #6e6e73);
    margin: 0;
    line-height: 1.5;
}

.survey-message {
    max-width: 600px;
    margin: 0 auto 24px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375em;
    font-weight: 500;
}

.survey-message-success {
    background: #f0fdf4;
    border: 1px solid #34c759;
    color: #155724;
}

.survey-message-error {
    background: #fef2f2;
    border: 1px solid #ff3b30;
    color: #991b1b;
}

.survey-message i {
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Progress Bar Minimal */
.survey-progress-minimal {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.survey-progress-bar {
    width: 100%;
    height: 4px;
    background: #f5f5f7;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.survey-progress-fill {
    height: 100%;
    background: var(--survey-progress, #1d1d1f);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 25%;
}

.survey-progress-text {
    font-size: 0.8125em;
    color: #6e6e73;
    font-weight: 500;
}

/* Survey Form */
.survey-form-minimal {
    width: 100%;
}

.survey-step {
    display: none;
    animation: surveyFadeIn 0.3s ease;
}

.survey-step.active {
    display: block;
}

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

.survey-step-header {
    margin-bottom: 32px;
    text-align: center;
}

.survey-step-title {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--survey-text, #1d1d1f);
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
}

.survey-step-description {
    font-size: 0.9375em;
    color: #6e6e73;
    margin: 0;
}

.survey-fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.survey-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.survey-label {
    font-size: 0.9375em;
    font-weight: 500;
    color: var(--survey-text, #1d1d1f);
    display: flex;
    align-items: center;
    gap: 4px;
}

.survey-required {
    color: #ff3b30;
    font-weight: 600;
}

.survey-input,
.survey-select,
.survey-textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    font-size: 1em;
    font-family: inherit;
    background: #ffffff;
    color: var(--survey-text, #1d1d1f);
    transition: all 0.2s ease;
}

.survey-input:focus,
.survey-select:focus,
.survey-textarea:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.survey-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Rating Stars */
.survey-rating-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 20px;
}

.survey-stars {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.survey-star {
    font-size: 2.5em;
    color: #d2d2d7;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.survey-star:hover {
    transform: scale(1.1);
}

.survey-star.active,
.survey-star.selected {
    color: var(--survey-rating, #ff9500);
}

.survey-star i {
    transition: all 0.2s ease;
}

/* Checkbox & Radio */
.survey-checkbox-group,
.survey-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.survey-checkbox-item,
.survey-radio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.survey-checkbox-item:hover,
.survey-radio-item:hover {
    background: #ffffff;
    border-color: #e5e5e7;
}

.survey-checkbox-item input[type="checkbox"],
.survey-radio-item input[type="radio"] {
    display: none;
}

.survey-checkbox-custom,
.survey-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #d2d2d7;
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.survey-radio-custom {
    border-radius: 50%;
}

.survey-checkbox-item input[type="checkbox"]:checked + .survey-checkbox-custom,
.survey-radio-item input[type="radio"]:checked + .survey-radio-custom {
    background: #1d1d1f;
    border-color: #1d1d1f;
}

.survey-checkbox-item input[type="checkbox"]:checked + .survey-checkbox-custom::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.875em;
    font-weight: 600;
}

.survey-radio-item input[type="radio"]:checked + .survey-radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
}

.survey-checkbox-label,
.survey-radio-label {
    flex: 1;
    font-size: 0.9375em;
    color: #1d1d1f;
    font-weight: 400;
}

/* Consent Section */
.survey-consent-section {
    margin: 32px 0;
    padding: 24px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #f5f5f7;
}

.survey-consent-item {
    margin-bottom: 20px;
}

.survey-consent-item:last-child {
    margin-bottom: 0;
}

.survey-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.survey-consent-checkbox {
    display: none;
}

.survey-consent-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #d2d2d7;
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}

.survey-consent-checkbox:checked + .survey-consent-custom {
    background: #1d1d1f;
    border-color: #1d1d1f;
}

.survey-consent-checkbox:checked + .survey-consent-custom::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.875em;
    font-weight: 600;
}

.survey-consent-text {
    flex: 1;
    font-size: 0.875em;
    color: #1d1d1f;
    line-height: 1.5;
}

.survey-consent-links {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.survey-consent-link {
    font-size: 0.8125em;
    color: #1d1d1f;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.survey-consent-link:hover {
    color: #ff7a00;
}

.survey-consent-separator {
    color: #d2d2d7;
    font-size: 0.8125em;
}

/* Step Actions */
.survey-step-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #f5f5f7;
}

.survey-btn {
    padding: 14px 28px;
    border: none;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

.survey-btn-primary {
    background: var(--survey-primary, #1d1d1f);
    color: #ffffff;
}

.survey-btn-primary:hover {
    background: var(--survey-primary-hover, #363639);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 29, 31, 0.2);
}

.survey-btn-secondary {
    background: #ffffff;
    color: #6e6e73;
    border: 1px solid #e5e5e7;
}

.survey-btn-secondary:hover {
    background: #fafafa;
    border-color: #1d1d1f;
    color: #1d1d1f;
}

.survey-btn-success {
    background: #34c759;
    color: #ffffff;
}

.survey-btn-success:hover {
    background: #30b451;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

/* Footer Minimal */
.survey-footer-minimal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: #ffffff;
    border-top: 1px solid #f5f5f7;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.survey-footer-content {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
}

.survey-footer-logo {
    height: 32px;
    width: auto;
    display: block;
}

.survey-footer-text {
    color: #86868b;
    font-size: 0.875em;
}

.survey-footer-link {
    color: #ff7a00;
    font-size: 0.875em;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.survey-footer-link:hover {
    color: #e65c00;
}

/* Responsive */
@media (max-width: 768px) {
    .survey-wrapper {
        max-width: 100%;
        padding: 0 24px;
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
        margin: 0;
        min-height: calc(100vh - 120px);
    }
    
    .survey-message {
        max-width: 100%;
        margin: 16px;
        margin-top: 72px;
    }
    
    .survey-footer-content {
        max-width: 100%;
        padding: 0 16px;
    }
    
    .survey-footer-minimal {
        min-height: 60px;
    }
    
    .survey-title-minimal {
        font-size: 1.5em;
    }
    
    .survey-step-title {
        font-size: 1.25em;
    }
    
    .survey-star {
        font-size: 2em;
    }
    
    .survey-step-actions {
        flex-direction: column;
    }
    
    .survey-btn {
        width: 100%;
    }
    
    .survey-consent-links {
        flex-direction: column;
        gap: 8px;
    }
    
    .survey-consent-separator {
        display: none;
    }
}

/* Login Page Styles */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #fafafa;
    padding: 20px;
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
}

.login-container-minimal {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    animation: loginFadeIn 0.4s ease;
}

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

.login-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f5f5f7;
}

.login-logo {
    margin-bottom: 20px;
}

.login-logo img {
    max-width: 120px;
    height: auto;
}

.login-title {
    font-size: 1.5em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
}

.login-subtitle {
    font-size: 0.9375em;
    color: #6e6e73;
    margin: 0;
}

.login-message {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375em;
    animation: loginMessageSlide 0.3s ease;
}

@keyframes loginMessageSlide {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.login-message i {
    font-size: 1.1em;
    flex-shrink: 0;
    margin-top: 2px;
}

.login-message-error {
    background: #fef2f2;
    border: 1px solid #ff3b30;
    color: #991b1b;
}

.login-message-success {
    background: #f0fdf4;
    border: 1px solid #34c759;
    color: #155724;
}

.login-message-warning {
    background: #fffbf0;
    border: 1px solid #ff9500;
    color: #8b6914;
}

.login-message div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-message strong {
    font-weight: 600;
    display: block;
}

.login-attempts-info {
    font-size: 0.875em;
    color: #991b1b;
    font-weight: 500;
    margin-top: 4px;
}

.login-form-minimal {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875em;
    font-weight: 500;
    color: #1d1d1f;
}

.login-label i {
    color: #6e6e73;
    font-size: 0.875em;
}

.login-input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    font-size: 1em;
    font-family: inherit;
    background: #ffffff;
    color: #1d1d1f;
    transition: all 0.2s ease;
}

.login-input:hover {
    border-color: #d2d2d7;
}

.login-input:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.05);
}

.login-input::placeholder {
    color: #86868b;
}

.login-password-wrapper {
    position: relative;
}

.login-input-password {
    padding-right: 48px;
}

.login-password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6e6e73;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-size: 1em;
}

.login-password-toggle:hover {
    color: #1d1d1f;
}

.login-attempts-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fffbf0;
    border: 1px solid #ff9500;
    border-radius: 8px;
    font-size: 0.875em;
    color: #8b6914;
}

.login-attempts-warning i {
    color: #ff9500;
}

.login-submit-btn {
    width: 100%;
    padding: 14px 24px;
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    margin-top: 8px;
}

.login-submit-btn:hover {
    background: #363639;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 29, 31, 0.2);
}

.login-submit-btn:active {
    transform: translateY(0);
}

.login-submit-btn i {
    font-size: 0.9em;
}

.login-footer {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f5f5f7;
    text-align: center;
}

.login-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6e6e73;
    text-decoration: none;
    font-size: 0.875em;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 8px 12px;
    border-radius: 8px;
}

.login-back-link:hover {
    color: #1d1d1f;
    background: #fafafa;
}

.login-back-link i {
    font-size: 0.875em;
    transition: transform 0.2s ease;
}

.login-back-link:hover i {
    transform: translateX(-2px);
}

/* Responsive Login */
@media (max-width: 768px) {
    .login-container-minimal {
        padding: 32px 24px;
    }
    
    .login-title {
        font-size: 1.25em;
    }
    
    .login-logo img {
        max-width: 100px;
    }
}

@media (max-width: 480px) {
    .login-page {
        padding: 16px;
    }
    
    .login-container-minimal {
        padding: 28px 20px;
    }
    
    .login-logo img {
        max-width: 80px;
    }
    
    /* Padding dla footera tylko w ankiecie na mobile */
    body:not(:has(.container)) {
        padding-bottom: 70px;
    }
    
    .footer-content {
        gap: 10px;
    }
    
    .upinion-logo img {
        height: 28px;
        width: auto;
    }
    
    .footer-text {
        font-size: 0.8em;
    }
}

/* Logo Management Section */
.logo-management-section {
    background: transparent;
    padding: 32px 40px;
    border-radius: 0;
    margin-bottom: 32px;
    box-shadow: none;
}

.logo-management-section h3 {
    font-size: 1.5em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 24px 0;
    letter-spacing: -0.5px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f5f5f7;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-current {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 2px solid #f5f5f7;
}

.logo-preview {
    background: transparent;
    border: none;
    border-left: 4px solid #e5e5e7;
    border-radius: 0;
    padding: 24px 32px;
    text-align: center;
    transition: all 0.3s ease;
}

.logo-preview:hover {
    border-left-color: var(--brand-primary, #ff7a00);
    background: #f9f9f9;
    transform: translateX(4px);
}

.logo-label {
    display: block;
    font-size: 0.9em;
    font-weight: 600;
    color: #86868b;
    margin-bottom: 20px;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.logo-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    padding: 24px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.logo-preview-image {
    max-height: 120px;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
}

.logo-empty {
    text-align: center;
    padding: 60px 40px;
    background: transparent;
    border-radius: 0;
    border: 2px dashed #e5e5e7;
    margin-bottom: 32px;
    border-left: 4px solid #e5e5e7;
}

.logo-empty i {
    font-size: 3em;
    color: #d2d2d7;
    margin-bottom: 12px;
    display: block;
}

.logo-empty p {
    color: #86868b;
    font-size: 0.95em;
    margin: 0;
}

.logo-actions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 24px;
    border-top: 2px solid #f5f5f7;
}

.logo-upload-form {
    margin-bottom: 0;
}

.logo-upload-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.logo-file-input-wrapper {
    flex: 1;
}

.logo-file-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
    border: 2px solid #e5e5e7;
    border-left: 4px solid #e5e5e7;
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    color: #1d1d1f;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    width: 100%;
    justify-content: center;
}

.logo-file-label:hover {
    background: #ffffff;
    border-left-color: var(--brand-primary, #ff7a00);
    border-color: var(--brand-primary, #ff7a00);
    color: var(--brand-primary, #ff7a00);
    transform: translateX(4px);
}

.logo-file-label i {
    font-size: 1.2em;
}

.logo-file-input {
    display: none;
}

.file-info {
    margin-bottom: 8px;
}

.file-name {
    display: block;
    color: #86868b;
    font-size: 0.875em;
    font-style: italic;
    text-align: center;
}

.file-hint {
    display: block;
    color: #86868b;
    font-size: 0.8em;
    margin-top: 8px;
    text-align: center;
    line-height: 1.5;
}

.logo-buttons-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 200px;
}

.logo-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    width: 100%;
    min-width: 180px;
}

.logo-upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
}

.logo-upload-btn:active {
    transform: translateY(0);
}

.logo-upload-btn i {
    font-size: 1.1em;
}

.logo-delete-form {
    margin-top: 0;
    display: inline-block;
}

.logo-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    color: #86868b;
    border: 2px solid #e5e5e7;
    border-left: 4px solid #e5e5e7;
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.3s ease;
    box-shadow: none;
    width: 100%;
    min-width: 180px;
}

.logo-delete-btn:hover {
    background: #ff3b30;
    color: #ffffff;
    border-left-color: #ff3b30;
    border-color: #ff3b30;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

.logo-delete-btn:active {
    transform: translateY(0);
}

.logo-delete-btn i {
    font-size: 1.1em;
}

@media (max-width: 768px) {
    .logo-management-section {
        padding: 24px 20px;
    }
    
    .logo-upload-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .logo-upload-btn {
        width: 100%;
        justify-content: center;
    }
    
    .logo-delete-btn {
        width: auto;
    }
    
    .logo-actions {
        gap: 10px;
    }
    
    .logo-preview-image {
        max-height: 80px;
    }
}

/* Edit Section Styles */
.edit-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0;
}

.edit-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 2px solid #f5f5f7;
}

.edit-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.edit-label {
    font-size: 0.9em;
    font-weight: 600;
    color: #86868b;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-item h1.editable-element {
        font-size: 2em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    padding: 16px 20px;
    border: 2px solid transparent;
    border-left: 4px solid transparent;
    border-radius: 0;
    transition: all 0.2s ease;
    min-height: 60px;
    background: transparent;
}

.edit-item h1.editable-element:hover {
    border-left-color: var(--brand-primary, #ff7a00);
    background: #f9f9f9;
    transform: translateX(4px);
}

.edit-item h1.editable-element:focus {
    border-left-color: var(--brand-primary, #ff7a00);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.1);
    outline: none;
}

.edit-item p.editable-element {
    font-size: 1.1em;
    color: #86868b;
    margin: 0;
    padding: 16px 20px;
    border: 2px solid transparent;
    border-left: 4px solid transparent;
    border-radius: 0;
    background: transparent;
    line-height: 1.6;
}

.edit-item p.editable-element:hover {
    border-left-color: var(--brand-primary, #ff7a00);
    background: #f9f9f9;
    transform: translateX(4px);
}

.edit-item p.editable-element:focus {
    border-left-color: var(--brand-primary, #ff7a00);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.1);
    outline: none;
    color: #1d1d1f;
}

.edit-item p.editable-element {
    transition: all 0.2s ease;
    min-height: 50px;
}

.steps-edit-section {
    display: flex;
        flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.step-edit-card {
    background: transparent;
    border: none;
    border-left: 4px solid #e5e5e7;
    border-radius: 0;
    padding: 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.step-edit-card.active {
    border-left-color: var(--brand-primary, #ff7a00);
}

.step-edit-card:hover {
    border-left-color: var(--brand-primary, #ff7a00);
}

.step-edit-header {
    margin-bottom: 0;
    padding: 20px 24px;
    border-bottom: 2px solid #f5f5f7;
    cursor: pointer;
    user-select: none;
    background: #ffffff;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step-edit-header:hover {
    background: #f9f9f9;
}

.step-edit-header::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #86868b;
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.step-edit-card.active .step-edit-header::after {
    transform: rotate(180deg);
    color: var(--brand-primary, #ff7a00);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: #ffffff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.2em;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    transition: all 0.3s ease;
}

.step-edit-card:hover .step-number {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.4);
}

.step-edit-header > div:first-child {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-edit-header h4 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #1d1d1f;
    flex: 1;
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
    pointer-events: none;
}

.step-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 24px;
}

.step-edit-card.active .step-edit-fields {
    max-height: 5000px;
    padding: 24px;
}

.edit-field-group {
    background: #fafafa;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.edit-field-group:hover {
    background: #f5f5f7;
    border-color: #e5e5e7;
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-field-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.edit-field-label i {
    color: var(--brand-primary);
    font-size: 0.9em;
}

.edit-field .editable-element {
    padding: 10px 14px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #f5f5f7;
    color: #1d1d1f;
    font-size: 0.95em;
    transition: all 0.2s ease;
    min-height: 24px;
    display: inline-block;
}

.buttons-edit-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.buttons-edit-section .edit-item {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.buttons-edit-section .edit-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #d2d2d7;
}

.buttons-edit-section .editable-element {
    padding: 10px 14px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #f5f5f7;
    color: #1d1d1f;
    font-size: 0.95em;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 24px;
    display: inline-block;
}

/* Editable element hover effects */
.editable-element:hover {
    border-color: var(--brand-primary) !important;
    background-color: #f0f8ff !important;
}

.editable-element:focus {
    outline: none;
    border-color: var(--brand-primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Non-editable values (labels) */
.non-editable-value {
    padding: 10px 14px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #f5f5f7;
    color: #1d1d1f;
    font-size: 0.95em;
    min-height: 24px;
    display: inline-block;
    cursor: default;
}

/* Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    cursor: pointer;
}

/* Minimal custom question form - zintegrowany wrapper */
.custom-questions-wrapper {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 16px;
    overflow: hidden;
}

.custom-question-form {
    padding: 12px;
    border-bottom: 1px solid #e5e5e7;
}

.custom-questions-list {
    padding: 12px;
}

.custom-q-title {
    margin: 0 0 16px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #1d1d1f;
}

.custom-question-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.custom-q-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #1d1d1f;
}

.custom-q-input,
.custom-q-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    background: #fff;
    color: #1d1d1f;
}

.custom-q-input:focus,
.custom-q-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.12);
}

.custom-q-options-row {
    margin-bottom: 12px;
}

.custom-q-hint {
    color: #86868b;
    display: block;
    margin-top: 4px;
}

.custom-q-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.custom-q-submit {
    padding: 8px 16px;
    border-radius: 8px;
}

/* Required switch inside form */
.custom-q-required {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.custom-q-required input {
    position: absolute;
    opacity: 0;
}

.custom-q-switch {
    width: 44px;
    height: 24px;
    background: #d2d2d7;
    border-radius: 999px;
    position: relative;
    transition: .2s ease;
}

.custom-q-switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: .2s ease;
}

.custom-q-required input:checked + .custom-q-switch {
    background: var(--brand-primary);
}

.custom-q-required input:checked + .custom-q-switch::after {
    transform: translateX(20px);
}

.custom-q-required-label { color: #1d1d1f; }

/* Lista pytań - stylowanie */
.custom-questions-list-title {
    margin: 0 0 24px 0;
    font-size: 1.2em;
    font-weight: 700;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f5f5f7;
}

.questions-empty {
    padding: 60px 40px;
    text-align: center;
    background: transparent;
    border-radius: 0;
    border: 2px dashed #e5e5e7;
    color: #86868b;
}

.questions-empty p {
    color: #86868b;
    margin: 0;
    font-size: 0.95em;
}

.questions-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.question-item {
    background: transparent;
    border: none;
    border-left: 4px solid #e5e5e7;
    border-radius: 0;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.2s ease;
    position: relative;
}

.question-item:hover {
    border-left-color: var(--brand-primary, #ff7a00);
    background: #ffffff;
    transform: translateX(4px);
}

.question-item-content {
    flex: 1;
    min-width: 0;
}

.question-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.question-item-text {
    color: #1d1d1f;
    font-size: 1em;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.question-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.question-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    gap: 4px;
}

.question-badge-required {
    background: linear-gradient(135deg, #ff3b30 0%, #d70015 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.3);
}

.question-badge-type {
    background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
    color: #1d1d1f;
    border: 1px solid #e5e5e7;
}

.question-item-options {
    color: #86868b;
    font-size: 0.85em;
    padding: 4px 8px;
    background: #f5f5f7;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.question-item-delete { justify-self: end; }

.question-delete-btn {
    background: transparent;
    color: #86868b;
    border: 1px solid #e5e5e7;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.question-delete-btn:hover {
    background: #ff3b30;
    color: #ffffff;
    border-color: #ff3b30;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

.question-delete-btn:hover {
    background: #ff2d20;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

@media (max-width: 768px) {
    .custom-question-grid { grid-template-columns: 1fr; }
    
    .question-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .question-item-delete {
        margin-left: 0;
        align-self: flex-end;
    }
    
    .question-item-header {
        flex-wrap: wrap;
    }
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d2d2d7;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--brand-primary);
}

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

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

@media (max-width: 768px) {
    .steps-edit-section {
        grid-template-columns: 1fr;
    }
    
    .buttons-edit-section {
        grid-template-columns: 1fr;
    }
    
    .edit-item h1.editable-element {
        font-size: 1.6em;
    }
    
    .step-edit-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Required star marker */
.req-star {
    color: #ff3b30;
    font-weight: 700;
}

/* Consent checkboxes */
.consent-section {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #e5e5e7;
}

.consent-item {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.consent-item:last-child {
    margin-bottom: 0;
}

.consent-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border: 2px solid #d1d1d6;
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.consent-item input[type="checkbox"]:checked {
    background-color: #d32f2f;
    border-color: #d32f2f;
}

.consent-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.consent-item input[type="checkbox"]:hover {
    border-color: #d32f2f;
}

.consent-item input[type="checkbox"]:focus {
    outline: 2px solid rgba(211, 47, 47, 0.3);
    outline-offset: 2px;
}

.consent-item label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    flex: 1;
    line-height: 1.5;
    color: #1d1d1f;
    font-size: 0.95em;
}

.consent-text {
    flex: 1;
}

.consent-asterisk {
    color: #86868b;
    font-size: 0.9em;
    flex-shrink: 0;
    margin-left: 4px;
}

.consent-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f7;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.consent-link {
    color: #8b4513;
    text-decoration: underline;
    font-size: 0.9em;
    transition: color 0.2s ease;
    cursor: pointer;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.consent-link:hover {
    color: #654321;
    text-decoration: underline;
}

.consent-separator {
    color: #8b4513;
    font-size: 0.9em;
    margin: 0 4px;
}

/* ============================================
   Notifications System Styles
   ============================================ */

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff3b30;
    color: #ffffff;
    font-size: 0.7em;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.3);
    border: 2px solid #ffffff;
    z-index: 10;
}

.notifications-btn {
    position: relative;
}

.notifications-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.notifications-modal-content {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.notifications-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid #f5f5f7;
}

.notifications-modal-header h3 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 12px;
}

.notifications-modal-header h3 i {
    color: #6e6e73;
}

.notifications-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f7;
    border-radius: 8px;
    color: #6e6e73;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.875em;
}

.notifications-modal-close:hover {
    background: #e5e5e7;
    color: #1d1d1f;
}

.notifications-modal-body {
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
    min-height: 300px;
    max-height: calc(85vh - 140px);
    background: #ffffff;
}

.notifications-loading,
.notifications-empty {
    padding: 60px 24px;
    text-align: center;
    color: #6e6e73;
    font-size: 0.9375em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.notifications-loading i,
.notifications-empty i {
    font-size: 2.5em;
    color: #d2d2d7;
}

.notification-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #f5f5f7;
    transition: background-color 0.2s ease;
    position: relative;
}

.notification-item:hover {
    background-color: #fafafa;
}

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

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
}

.notification-icon i {
    color: #ff9500;
    font-size: 1em;
}

.notification-icon i.rating-low {
    color: #ff3b30;
}


.notification-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notification-message {
    font-weight: 500;
    color: #1d1d1f;
    font-size: 0.9375em;
    line-height: 1.4;
    margin: 0;
}

.notification-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125em;
    color: #86868b;
}

.notification-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notification-link {
    color: var(--brand-primary, #ff7a00);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8125em;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.notification-link:hover {
    color: var(--brand-primary-dark, #e65c00);
    text-decoration: underline;
}

.notification-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #d2d2d7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    opacity: 0;
    margin-top: 2px;
}

.notification-item:hover .notification-close {
    opacity: 1;
}

.notification-close:hover {
    background: #f5f5f7;
    color: #ff3b30;
}

.notifications-modal-footer {
    padding: 20px 28px;
    border-top: 1px solid #f5f5f7;
    display: flex;
    justify-content: center;
}

.notifications-mark-all-read {
    padding: 10px 20px;
    background: #f5f5f7;
    color: #1d1d1f;
    border: none;
    border-radius: 8px;
    font-size: 0.875em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notifications-mark-all-read:hover {
    background: #e5e5e7;
}

@media (max-width: 768px) {
    .notifications-modal-content {
        max-width: 100%;
        max-height: 90vh;
    }
    
    .notification-item {
        padding: 14px 16px;
    }
    
    .notification-icon {
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   Loyalty Program Styles
   ============================================ */

.loyalty-add-form,
.loyalty-search-form {
    max-width: 500px;
}

.loyalty-customers-list,
.loyalty-rewards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loyalty-customer-item {
    padding: 20px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.loyalty-customer-item:hover {
    background: #ffffff;
    border-color: #e5e5e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.loyalty-customer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.loyalty-customer-phone {
    font-weight: 600;
    font-size: 1em;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.loyalty-customer-phone i {
    color: #6e6e73;
    font-size: 0.9em;
}

.loyalty-stamps-badge {
    padding: 6px 16px;
    background: #1d1d1f;
    color: #ffffff;
    border-radius: 20px;
    font-size: 0.875em;
    font-weight: 600;
}

.loyalty-progress-bar {
    height: 8px;
    background: #f5f5f7;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.loyalty-progress-fill {
    height: 100%;
    background: #1d1d1f;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.loyalty-reward-item {
    padding: 20px;
    background: #fafafa;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.loyalty-reward-item:hover {
    background: #ffffff;
    border-color: #e5e5e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.loyalty-reward-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.loyalty-reward-code {
    font-weight: 700;
    font-size: 1.125em;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.loyalty-reward-code i {
    color: #1d1d1f;
}

.loyalty-reward-phone {
    font-size: 0.875em;
    color: #6e6e73;
    display: flex;
    align-items: center;
    gap: 6px;
}

.loyalty-reward-status {
    display: flex;
    align-items: center;
}

.loyalty-status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8125em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.loyalty-status-badge.used {
    background: #e5e5e7;
    color: #6e6e73;
}

.loyalty-status-badge.available {
    background: #34c759;
    color: #ffffff;
}

.loyalty-reward-meta {
    display: flex;
    gap: 20px;
    font-size: 0.8125em;
    color: #6e6e73;
}

.loyalty-reward-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.loyalty-reward-meta i {
    font-size: 0.9em;
}

/* ============================================
   Advanced Statistics Page Styles
   ============================================ */

.advanced-stats-section {
    margin-bottom: 48px;
    padding: 32px 32px 0 32px;
}

.advanced-stats-header {
    margin-bottom: 24px;
}

.advanced-stats-header h2 {
    font-size: 1.5em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.advanced-stats-header h2 i {
    font-size: 0.9em;
    color: #6e6e73;
}

.advanced-stats-subtitle {
    font-size: 0.9375em;
    color: #6e6e73;
    margin: 0;
}

/* Comparison Cards */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.comparison-card {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
}

.comparison-card:hover {
    border-color: #e5e5e7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Loyalty Summary Bar */
.loyalty-summary-bar {
    display: flex;
    justify-content: center;
    gap: 48px;
    padding: 24px 32px;
    margin-bottom: 32px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
}

.loyalty-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #1d1d1f;
}

.loyalty-summary-item i {
    font-size: 1.25em;
    color: #86868b;
}

.loyalty-summary-value {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: -1px;
    color: #1d1d1f;
}

.loyalty-summary-label {
    font-size: 0.8125em;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stats Tab Content */
.stats-tab-content {
    display: none;
}

.stats-tab-content.active {
    display: block;
    animation: tabFadeIn 0.2s ease;
}

/* Loyalty Trend Content */
.loyalty-trend-content {
    display: none;
}

.loyalty-trend-content.active {
    display: block;
    animation: tabFadeIn 0.2s ease;
}

.loyalty-trend-content .trend-chart-card {
    margin-bottom: 24px;
}

/* Loyalty Charts Grid */
.loyalty-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .loyalty-summary-bar {
        flex-wrap: wrap;
        gap: 24px;
        padding: 20px;
    }
    
    .loyalty-summary-item {
        flex: 1;
        min-width: 120px;
    }
    
    .loyalty-summary-value {
        font-size: 1.5em;
    }
    
    .loyalty-charts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .loyalty-summary-bar {
        flex-direction: column;
        gap: 16px;
    }
    
    .loyalty-summary-item {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }
    
    .loyalty-summary-item i {
        order: 0;
    }
    
    .loyalty-summary-label {
        order: 1;
        flex: 1;
        margin-left: 12px;
    }
    
    .loyalty-summary-value {
        order: 2;
        font-size: 1.25em;
    }
}

.comparison-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.comparison-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    color: #1d1d1f;
    flex-shrink: 0;
}

.comparison-card-title {
    flex: 1;
}

.comparison-card-title h3 {
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 4px 0;
}

.comparison-period {
    font-size: 0.8125em;
    color: #6e6e73;
}

.comparison-values {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comparison-current,
.comparison-previous {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comparison-label {
    font-size: 0.875em;
    color: #6e6e73;
}

.comparison-value {
    font-size: 1.5em;
    font-weight: 600;
    color: #1d1d1f;
}

.comparison-change {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.125em;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    align-self: flex-start;
}

.comparison-change.positive {
    background: #f0fdf4;
    color: #22c55e;
}

.comparison-change.negative {
    background: #fef2f2;
    color: #ef4444;
}

.comparison-change i {
    font-size: 0.9em;
}

.comparison-chart-card {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.comparison-chart-card h3 {
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.comparison-chart-card h3 i {
    color: #6e6e73;
    font-size: 0.9em;
}

.comparison-chart-card canvas {
    max-height: 300px;
}

/* Heatmap Styles */
.heatmap-card {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.heatmap-container {
    min-width: 800px;
}

.heatmap-header {
    display: grid;
    grid-template-columns: 120px repeat(24, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.heatmap-time-label {
    font-size: 0.8125em;
    color: #6e6e73;
    font-weight: 600;
    text-align: center;
}

.heatmap-hour {
    font-size: 0.75em;
    color: #86868b;
    text-align: center;
    padding: 4px;
}

.heatmap-row {
    display: grid;
    grid-template-columns: 120px repeat(24, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.heatmap-day-label {
    font-size: 0.875em;
    color: #1d1d1f;
    font-weight: 500;
    padding: 8px;
    display: flex;
    align-items: center;
}

.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.heatmap-cell:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f5f5f7;
}

.heatmap-legend-label {
    font-size: 0.8125em;
    color: #6e6e73;
}

.heatmap-legend-gradient {
    flex: 1;
    height: 20px;
    background: linear-gradient(to right, rgba(255, 122, 0, 0.1), rgba(255, 122, 0, 1));
    border-radius: 4px;
    max-width: 300px;
}

.heatmap-legend-max {
    font-size: 0.8125em;
    color: #86868b;
    font-weight: 500;
}

/* Trends Tabs */
.trends-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 0 32px;
    border-bottom: 1px solid #f5f5f7;
}

.trend-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.9375em;
    font-weight: 500;
    color: #6e6e73;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
}

.trend-tab:hover {
    color: #1d1d1f;
}

.trend-tab.active {
    color: #ff7a00;
    border-bottom-color: #ff7a00;
}

.trend-tab i {
    font-size: 0.9em;
}

.trend-content {
    display: none;
}

.trend-content.active {
    display: block;
}

.trend-chart-card {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.trend-chart-card h3 {
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.trend-chart-card h3 i {
    color: #6e6e73;
    font-size: 0.9em;
}

.trend-chart-card canvas {
    max-height: 400px;
}

/* Responsive */
@media (max-width: 1024px) {
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .heatmap-container {
        min-width: 600px;
    }
}

@media (max-width: 768px) {
    .advanced-stats-section {
        padding: 0 16px;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .heatmap-card {
        padding: 16px;
    }
    
    .heatmap-container {
        min-width: 400px;
    }
    
    .trends-tabs {
        padding: 0 16px;
        flex-wrap: wrap;
    }
    
    .trend-tab {
        padding: 10px 16px;
        font-size: 0.875em;
    }
    
    .trend-chart-card {
        padding: 20px;
    }
}

/* ============================================
   QR Generator Page Styles
   ============================================ */

.qr-generator-section {
    padding: 32px;
}

.qr-generator-card {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.qr-generator-header {
    padding: 32px 40px;
    border-bottom: 1px solid #f5f5f7;
}

.qr-generator-header h2 {
    margin: 0 0 12px 0;
    font-size: 1.5em;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 12px;
}

.qr-generator-header h2 i {
    color: var(--brand-primary, #ff7a00);
    font-size: 0.9em;
}

.qr-generator-description {
    margin: 0;
    font-size: 0.9375em;
    color: #6e6e73;
    line-height: 1.5;
}

.qr-generator-content {
    padding: 32px 40px;
}

.qr-url-section {
    margin-bottom: 32px;
}

.qr-url-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375em;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.qr-url-label i {
    color: var(--brand-primary, #ff7a00);
}

.qr-url-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.qr-url-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    font-size: 0.9375em;
    color: #1d1d1f;
    background: #f9f9f9;
    font-family: 'Courier New', monospace;
}

.qr-url-input:focus {
    outline: none;
    border-color: var(--brand-primary, #ff7a00);
    background: #ffffff;
}

.qr-copy-btn {
    padding: 12px 16px;
    background: #f5f5f7;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
}

.qr-copy-btn:hover {
    background: var(--brand-primary, #ff7a00);
    color: #ffffff;
    border-color: var(--brand-primary, #ff7a00);
}

.qr-preview-section {
    margin-bottom: 32px;
}

.qr-preview-card {
    background: #f9f9f9;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}

.qr-preview-card h3 {
    margin: 0 0 24px 0;
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.qr-preview-card h3 i {
    color: var(--brand-primary, #ff7a00);
}

.qr-code-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.qr-code-container {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.qr-code-container canvas,
.qr-code-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

.qr-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.qr-download-btn,
.qr-print-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.9375em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qr-download-btn {
    background: var(--brand-primary, #ff7a00);
    color: #ffffff;
}

.qr-download-btn:hover {
    background: var(--brand-primary-dark, #e65c00);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

.qr-print-btn {
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #e5e5e7;
}

.qr-print-btn:hover {
    background: #e5e5e7;
    transform: translateY(-2px);
}

.qr-info-section {
    margin-top: 32px;
}

.qr-info-card {
    background: #f9f9f9;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 24px;
}

.qr-info-card h3 {
    margin: 0 0 16px 0;
    font-size: 1.125em;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qr-info-card h3 i {
    color: var(--brand-primary, #ff7a00);
}

.qr-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qr-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375em;
    color: #1d1d1f;
    line-height: 1.5;
}

.qr-info-list li i {
    color: var(--brand-primary, #ff7a00);
    margin-top: 2px;
    flex-shrink: 0;
}

.qr-info-list li strong {
    color: #1d1d1f;
    font-weight: 600;
}

@media (max-width: 768px) {
    .qr-generator-section {
        padding: 16px;
    }
    
    .qr-generator-header,
    .qr-generator-content {
        padding: 24px;
    }
    
    .qr-preview-card {
        padding: 24px;
    }
    
    .qr-code-container {
        padding: 16px;
    }
    
    .qr-actions {
        flex-direction: column;
    }
    
    .qr-download-btn,
    .qr-print-btn {
        width: 100%;
        justify-content: center;
    }
}