/* SureCart & Custom Styles */

/* --- SureCart Collapsible Row --- */
sc-toggle.sc-collapsible-row {
    --sc-toggle-header-padding: var(--sc-toggle-padding) 0;
    --sc-toggle-content-padding: 0;
    --sc-toggle-background-color: transparent;
    width: 100%;
    border-top: solid var(--sc-input-border-width) var(--sc-input-border-color);
}

.wp-block-surecart-collapsible-row {
    margin-bottom: 0 !important;
}

sc-toggle.sc-collapsible-row::part(body) {
    border-top: 0;
}

/* --- Order Bump --- */
.order-bump {
    border: 3px dashed #228B22 !important;
    border-radius: 10px !important;
    background-color: #e6fae6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px !important;
    transition: all 0.3s ease;
}

.order-bump .bump-header {
    font-size: 1.5em;
    font-weight: bold;
    color: #364958;
    margin-bottom: 10px;
}

.order-bump .bump-label {
    font-size: 1.25em;
    color: #008000;
    font-weight: 700;
    display: block;
    padding-left: 10px;
}

.order-bump .product-details {
    padding: 15px;
    border-top: 1px solid #c8e0c8;
    margin-top: 15px;
}

/* --- Internal Styles from Landing Page --- */
#waslup-landing-dark-ar {
    font-family: 'Cairo', sans-serif;
    scroll-behavior: smooth;
    background-color: transparent;
    color: #e2e8f0;
    width: 100%;
    overflow-x: hidden;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

#waslup-landing-dark-ar .waslup-logo {
    height: 70px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    /* filter: brightness(0) invert(1); */
    opacity: 1;
}

#waslup-landing-dark-ar header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.text-gradient {
    background: linear-gradient(120deg, #2dd4bf, #14b8a6 40%, #e17055 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.phone-3d {
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
    transition: transform 0.5s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.phone-3d:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02);
}

#waslup-landing-dark-ar input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 10px 0;
}

#waslup-landing-dark-ar input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: #14b8a6;
    cursor: pointer;
    margin-top: -12px;
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.6);
    border: 3px solid #0f172a;
}

#waslup-landing-dark-ar input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #334155;
    border-radius: 5px;
}

#waslup-landing-dark-ar input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #334155;
    border-radius: 5px;
}

#waslup-landing-dark-ar input[type=range]::-moz-range-thumb {
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: #14b8a6;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.6);
    border: 3px solid #0f172a;
}

#waslup-landing-dark-ar input[type=range]::-ms-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

#waslup-landing-dark-ar input[type=range]::-ms-fill-lower,
#waslup-landing-dark-ar input[type=range]::-ms-fill-upper {
    background: #334155;
    border-radius: 5px;
}

#waslup-landing-dark-ar input[type=range]::-ms-thumb {
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: #14b8a6;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.6);
    border: 3px solid #0f172a;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: #a0a0a0;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* --- FIXED FORM INPUT STYLES --- */
.form-input {
    width: 100%;
    background-color: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    color: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
    background-color: #0f172a;
}

/* --- ULTIMATE DROPDOWN FIX --- */
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #ffffff !important;
    background-color: #1e293b !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 1rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-right: 1rem !important;
    padding-left: 3rem !important;
    line-height: 2 !important;
    min-height: 60px;
    display: flex;
    align-items: center;
}

select.form-input option {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 15px;
    font-weight: 600;
    line-height: 2;
}

select.form-input option[disabled] {
    color: #666666 !important;
    background-color: #e2e8f0 !important;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 600;
}

.loader {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #14b8a6;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- Modern Moroccan Zellige Theme --- */

:root {
    --morocco-deep-blue: #0b132b;
    --morocco-midnight: #020617;
    --morocco-teal: #14b8a6;
    --morocco-teal-glow: #2dd4bf;
    --morocco-terracotta: #e17055;
    --morocco-off-white: #f8fafc;
    --morocco-ink: #0a1020;
    --morocco-frost: rgba(248, 250, 252, 0.08);
}

/* Moroccan Zellige Pattern Background */
.bg-moroccan-modern {
    background-color: var(--morocco-midnight) !important;
    background-image:
        radial-gradient(900px 520px at 12% 8%, rgba(20, 184, 166, 0.08) 0%, transparent 60%),
        radial-gradient(620px 520px at 88% 18%, rgba(225, 112, 85, 0.06) 0%, transparent 55%),
        linear-gradient(165deg, #0b1329 0%, #0a1222 35%, #060c1a 70%, #050814 100%);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    isolation: isolate;
}

.bg-moroccan-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('./assets/zellige-pattern.png');
    background-size: 420px 420px;
    background-position: center;
    opacity: 0.12;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

.bg-moroccan-modern::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 19, 43, 0.65) 0%, rgba(5, 8, 20, 0.2) 40%, rgba(2, 6, 23, 0.7) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Color utilities */
.text-brand-teal {
    color: var(--morocco-teal-glow) !important;
}

.bg-brand-teal {
    background-color: var(--morocco-teal) !important;
}

.border-brand-teal {
    border-color: var(--morocco-teal) !important;
}

.text-brand-terracotta {
    color: var(--morocco-terracotta) !important;
}

.bg-brand-terracotta {
    background-color: var(--morocco-terracotta) !important;
}

.border-brand-terracotta {
    border-color: var(--morocco-terracotta) !important;
}

/* Geometric card with Moroccan influence */
.card-moroccan {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(20, 184, 166, 0.1);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-moroccan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--morocco-teal), var(--morocco-terracotta), var(--morocco-teal));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-moroccan:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 184, 166, 0.3);
    box-shadow: 0 20px 40px -10px rgba(20, 184, 166, 0.15);
}

.card-moroccan:hover::before {
    opacity: 1;
}

/* Section Dividers with Subtle Geometry */
.section-divider {
    position: relative;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.2), transparent);
    margin: 2rem 0;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-image: conic-gradient(from 45deg, rgba(20, 184, 166, 0.35), rgba(225, 112, 85, 0.2), rgba(20, 184, 166, 0.35));
    -webkit-mask-image: url('./assets/zellige-pattern.png');
    -webkit-mask-size: 80px 80px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('./assets/zellige-pattern.png');
    mask-size: 80px 80px;
    mask-position: center;
    mask-repeat: no-repeat;
    opacity: 0.35;
    border-radius: 50%;
}

/* Decorative Geometric Accents */
.geometric-accent {
    position: relative;
}

.geometric-accent::after {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background-image: linear-gradient(135deg, rgba(20, 184, 166, 0.6), rgba(225, 112, 85, 0.4));
    clip-path: polygon(50% 0%, 63% 25%, 100% 35%, 72% 57%, 78% 100%, 50% 78%, 22% 100%, 28% 57%, 0% 35%, 37% 25%);
    opacity: 0.5;
}

/* Hero Geometric Overlay Enhancement */
.hero-geometric-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 18% 78%, rgba(20, 184, 166, 0.08) 0%, transparent 55%),
        radial-gradient(circle at 82% 18%, rgba(225, 112, 85, 0.08) 0%, transparent 55%),
        conic-gradient(from 135deg at 70% 40%, rgba(20, 184, 166, 0.08) 0deg, transparent 60deg, rgba(20, 184, 166, 0.04) 120deg, transparent 220deg, rgba(225, 112, 85, 0.06) 300deg, transparent 360deg);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.9), transparent 70%);
    mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.9), transparent 70%);
    pointer-events: none;
}

/* Subtle Pattern Masks */
.pattern-mask {
    -webkit-mask-image: url('./assets/zellige-pattern.png');
    -webkit-mask-size: 200px 200px;
    -webkit-mask-repeat: repeat;
    mask-image: url('./assets/zellige-pattern.png');
    mask-size: 200px 200px;
    mask-repeat: repeat;
}

.zellige-overlay-soft {
    background-image:
        radial-gradient(circle at 30% 20%, rgba(20, 184, 166, 0.1) 0%, transparent 60%),
        url('./assets/zellige-pattern.png');
    background-size: 600px 600px, 360px 360px;
    background-position: center;
    opacity: 0.14;
    mix-blend-mode: screen;
    pointer-events: none;
}

.zellige-overlay-subtle {
    background-image:
        radial-gradient(circle at 70% 30%, rgba(225, 112, 85, 0.08) 0%, transparent 60%),
        url('./assets/zellige-pattern.png');
    background-size: 500px 500px, 280px 280px;
    background-position: center;
    opacity: 0.16;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

#waslup-landing-dark-ar .glass-dark,
#waslup-landing-dark-ar .bg-slate-800\/50,
#waslup-landing-dark-ar .bg-slate-900\/80 {
    position: relative;
    overflow: hidden;
}

#waslup-landing-dark-ar .glass-dark::after,
#waslup-landing-dark-ar .bg-slate-800\/50::after,
#waslup-landing-dark-ar .bg-slate-900\/80::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('./assets/zellige-pattern.png');
    background-size: 280px 280px;
    background-position: center;
    opacity: 0.05;
    mix-blend-mode: screen;
    pointer-events: none;
}

.lang-fr .text-right {
    text-align: left !important;
}

.lang-fr .text-left {
    text-align: left;
}

.lang-fr .chat-bubble {
    text-align: left;
}

.phone-row {
    align-items: end;
    direction: ltr;
}

.country-field .form-input {
    min-width: 160px;
}

.country-field {
    position: relative;
    z-index: 2;
}

.phone-field {
    position: relative;
    z-index: 1;
    direction: rtl;
}

.country-field {
    direction: rtl;
}

.phone-field .form-input {
    direction: ltr;
    text-align: left;
}

.phone-group .form-label {
    display: block;
    margin-bottom: 0.5rem;
    text-align: right;
}

.lang-fr .phone-group .form-label {
    text-align: left;
}

.phone-row .form-label {
    text-align: right;
}

.phone-field .form-label {
    margin-bottom: 0.35rem;
}

.lang-fr .phone-row .form-label {
    text-align: left;
}

.lang-fr .country-field,
.lang-fr .phone-field {
    direction: ltr;
}

.how-step {
    padding-top: 4.5rem;
}

.how-step-number {
    top: 1.2rem !important;
    right: 1.2rem;
    z-index: 1;
}

.how-step h3 {
    padding-right: 3rem;
}

/* --- Auth Pages --- */
html,
body {
    height: 100%;
}

.auth-page {
    font-family: 'Cairo', sans-serif;
    min-height: 100vh;
    margin: 0;
    display: block;
    background: radial-gradient(circle at top, rgba(20, 184, 166, 0.2), transparent 55%),
        linear-gradient(135deg, #0b1220, #111827 50%, #1f2937);
    color: #f8fafc;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 32px 0 48px;
    direction: rtl;
    text-align: right;
}

.lang-fr.auth-page {
    direction: ltr;
    text-align: left;
}

.auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('./assets/zellige-pattern.png') center/480px repeat;
    opacity: 0.08;
    pointer-events: none;
}

.auth-shell {
    width: min(1100px, 92vw);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    position: relative;
    z-index: 1;
    padding: 48px 0;
    margin: 0 auto;
}

.auth-panel {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(14, 116, 144, 0.6));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 28px;
    padding: 42px;
    box-shadow: 0 30px 70px rgba(2, 6, 23, 0.35);
}

.auth-panel--accent {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(217, 119, 6, 0.45));
}

.auth-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-logo {
    width: 140px;
    height: auto;
}

.auth-kicker {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.7);
}

.auth-title {
    font-size: clamp(1.9rem, 2.4vw, 2.6rem);
    margin: 0;
}

.auth-subtitle {
    color: rgba(226, 232, 240, 0.75);
    line-height: 1.7;
    margin: 0;
}

.auth-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.auth-feature {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 18px;
    padding: 16px;
}

.auth-feature-label {
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}

.auth-feature-text {
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.8);
}

.auth-card {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 28px;
    padding: 36px;
    box-shadow: 0 25px 60px rgba(2, 6, 23, 0.4);
    animation: auth-fade-in 0.8s ease-out both;
}

.auth-card-header h2 {
    margin: 8px 0 10px;
    font-size: 1.8rem;
}

.auth-lang-switch {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.lang-fr .auth-lang-switch {
    justify-content: flex-start;
}

.lang-btn {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: transparent;
    color: #e2e8f0;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    letter-spacing: 0.08em;
}

.lang-btn.is-active {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.7);
    color: #7dd3fc;
}

.auth-card-header p {
    margin: 0;
    color: rgba(226, 232, 240, 0.75);
}

.auth-eyebrow {
    font-size: 0.8rem;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.auth-alert {
    margin: 18px 0 0;
    border-radius: 14px;
    padding: 12px 16px;
    display: none;
    font-size: 0.95rem;
}

.auth-alert.is-visible {
    display: block;
}

.auth-alert--success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #bbf7d0;
}

.auth-alert--error {
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: #fecaca;
}

.auth-form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.85);
}

.auth-field input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.7);
    color: #f8fafc;
    padding: 12px 14px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lang-fr .auth-field input {
    text-align: left;
}

.auth-field input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.auth-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-phone-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-phone-row select {
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.7);
    color: #f8fafc;
    padding: 12px 12px;
    font-size: 0.95rem;
    outline: none;
    min-width: 96px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(226, 232, 240, 0.7) 50%),
        linear-gradient(135deg, rgba(226, 232, 240, 0.7) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.auth-phone-row select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.auth-phone-row input {
    flex: 1;
}

/* --- Dashboard --- */
.waslup-dashboard {
    font-family: 'Cairo', sans-serif;
    margin: 0;
    background: radial-gradient(circle at top, rgba(20, 184, 166, 0.16), transparent 45%),
        linear-gradient(135deg, #0b1220 10%, #0f172a 55%, #111827);
    color: #e2e8f0;
    min-height: 100vh;
}

.dashboard-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.dashboard-sidebar {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.95));
    border-left: 1px solid rgba(148, 163, 184, 0.15);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.dashboard-brand img {
    width: 46px;
    height: 46px;
}

.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-nav a {
    color: #cbd5f5;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(30, 41, 59, 0.35);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s ease, color 0.2s ease;
}

.dashboard-nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: rgba(226, 232, 240, 0.9);
}

.dashboard-nav-icon svg {
    width: 18px;
    height: 18px;
}

.dashboard-nav a:hover {
    background: rgba(20, 184, 166, 0.15);
    color: #ffffff;
}

.dashboard-nav .is-active {
    background: rgba(20, 184, 166, 0.25);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(20, 184, 166, 0.15);
}

.dashboard-nav .is-active .dashboard-nav-icon {
    background: rgba(20, 184, 166, 0.25);
    border-color: rgba(20, 184, 166, 0.45);
    color: #99f6e4;
}

.dashboard-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.7);
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.user-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(20, 184, 166, 0.2);
    font-weight: 700;
}

.user-name {
    margin: 0;
    font-weight: 700;
}

.user-email {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.6);
}

.dashboard-main {
    padding: 32px 40px 48px;
    min-width: 0;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    position: relative;
}

.dashboard-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.6), transparent);
}

.dashboard-header h1 {
    margin: 6px 0 0;
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.dashboard-kicker {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

.nav-toggle {
    display: none !important;
}

.dashboard-actions-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.dashboard-actions-row .ghost-btn,
.dashboard-actions-row .primary-btn,
.dashboard-actions-row .dashboard-lang {
    height: 44px;
    display: inline-flex;
    align-items: center;
}

.dashboard-signout.icon-only {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dashboard-signout.icon-only svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.dashboard-actions-row .ghost-btn,
.dashboard-actions-row .primary-btn {
    padding: 0 18px;
    white-space: nowrap;
}

.dashboard-actions-row .dashboard-signout.icon-only {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    overflow: hidden;
}

.dashboard-actions-row .dashboard-signout.icon-only svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.dashboard-actions-row .dashboard-lang {
    padding: 0 12px;
}

.dashboard-actions-row .dashboard-lang .lang-select {
    font-size: 0.85rem;
}

.dashboard-section {
    display: none;
    min-width: 0;
}

.dashboard-section.is-active {
    display: block;
}

.dashboard-section[data-section="plans"] {
    direction: ltr;
}

.dashboard-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    background: rgba(15, 23, 42, 0.65);
}

.dashboard-lang .lang-icon {
    width: 18px;
    height: 18px;
    color: rgba(226, 232, 240, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-lang .lang-icon svg {
    width: 18px;
    height: 18px;
}

.dashboard-lang .lang-select {
    appearance: none;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0 16px 0 0;
    min-width: 56px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23e2e8f0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 14px;
}

.dashboard-lang .lang-select:focus {
    outline: none;
}

.dashboard-lang .lang-select option {
    color: #0f172a;
}

.plans-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    margin-bottom: 36px;
}

.plans-hero-head h2 {
    margin: 12px 0 6px;
    font-size: clamp(1.8rem, 2.4vw, 2.6rem);
    font-weight: 800;
    color: #f8fafc;
}

.plans-hero-head p {
    margin: 0;
    max-width: 720px;
    color: rgba(226, 232, 240, 0.68);
    font-size: 1rem;
}

.plans-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.16);
    border: 1px solid rgba(20, 184, 166, 0.45);
    color: #99f6e4;
    font-weight: 700;
    font-size: 0.85rem;
}

.plans-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.plans-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.plans-toggle-savings {
    font-size: 12px;
    font-weight: 600;
    color: #4dd8d8;
    background: rgba(77, 216, 216, 0.12);
    border: 1px solid rgba(77, 216, 216, 0.3);
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.plans-toggle-savings.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.plans-toggle-btn {
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.7);
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plans-toggle-btn.is-active {
    background: rgba(20, 184, 166, 0.25);
    color: #f8fafc;
    box-shadow: 0 6px 14px rgba(20, 184, 166, 0.2);
}

.plans-toggle-chip {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: #22d3ee;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.7rem;
}

.plans-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 28px;
}

.plan-card {
    position: relative;
    padding: 22px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.4);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.plan-card.is-featured {
    border-color: rgba(34, 211, 238, 0.7);
    box-shadow: 0 18px 40px rgba(34, 211, 238, 0.25);
    transform: translateY(-8px);
}

.plan-card-tag {
    position: absolute;
    top: 14px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: rgba(34, 211, 238, 0.18);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.6);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.plan-card-tag.is-trial {
    background: rgba(94, 234, 212, 0.16);
    color: #5eead4;
    border-color: rgba(94, 234, 212, 0.55);
}

.plan-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.plan-card h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    color: #f8fafc;
}

.plan-card p {
    margin: 0;
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.9rem;
}

.plan-price {
    text-align: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.plan-price-savings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #67e8f9;
    background: rgba(34, 211, 238, 0.18);
    border: 1px solid rgba(34, 211, 238, 0.6);
    padding: 4px 12px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    min-height: 22px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.plan-price-savings.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.plan-price-main {
    font-size: 1.8rem;
    font-weight: 800;
    color: #f8fafc;
}

.plan-price-cycle {
    color: rgba(148, 163, 184, 0.8);
    font-size: 0.9rem;
}

.plan-cta {
    border: none;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 700;
    background: rgba(30, 41, 59, 0.7);
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-cta:hover {
    background: rgba(20, 184, 166, 0.25);
    color: #f8fafc;
}

.plan-cta.is-primary {
    background: linear-gradient(135deg, #2dd4bf, #22d3ee);
    color: #0f172a;
    box-shadow: 0 10px 18px rgba(34, 211, 238, 0.35);
}

.plan-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.9rem;
}

.plan-features li::before {
    content: '✓';
    margin-inline-end: 8px;
    color: #5eead4;
    font-weight: 700;
}

.plans-meta {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.plans-meta-card {
    padding: 18px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.plans-meta-card h4 {
    margin: 0 0 8px;
    color: #f8fafc;
    font-size: 1rem;
}

.plans-meta-card p {
    margin: 0;
    color: rgba(148, 163, 184, 0.8);
    font-size: 0.9rem;
}

.subscription-card {
    margin: 20px 0 28px;
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.7));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45);
}

.subscription-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.subscription-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.subscription-card h3 {
    margin: 10px 0 6px;
    font-size: 1.4rem;
    color: #f8fafc;
}

.billing-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    margin: 0 0 18px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fee2e2;
}

.billing-banner strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: #fecaca;
}

.billing-banner span {
    font-size: 0.85rem;
    color: rgba(254, 226, 226, 0.85);
}

.is-locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.lock-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    margin: 10px 0 18px;
    border-radius: 16px;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.4);
    color: #e0f2fe;
}

.lock-banner strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: #bae6fd;
}

.lock-banner span {
    font-size: 0.85rem;
    color: rgba(224, 242, 254, 0.85);
}

@media (max-width: 720px) {
    .lock-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 720px) {
    .billing-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

.subscription-status {
    color: rgba(226, 232, 240, 0.75);
    margin: 0;
    font-size: 0.95rem;
}

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

.subscription-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.subscription-meta-item {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.subscription-meta-item span {
    display: block;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.8);
    margin-bottom: 6px;
}

.subscription-meta-item strong {
    font-size: 1rem;
    color: #e2e8f0;
}

.subscription-usage {
    margin-top: 18px;
}

.subscription-usage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.8);
}

.subscription-usage-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
    margin-top: 10px;
}

.subscription-usage-bar span {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, #2dd4bf, #22d3ee);
    border-radius: inherit;
    transition: width 0.35s ease;
}

@media (max-width: 720px) {
    .subscription-actions {
        width: 100%;
    }
    .subscription-actions .primary-btn,
    .subscription-actions .ghost-btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .dashboard-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }
    .dashboard-actions .primary-btn,
    .dashboard-actions .ghost-btn {
        width: 100%;
        justify-content: center;
    }
    .dashboard-actions-row {
        width: 100%;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: nowrap;
    }
    .dashboard-actions-row .ghost-btn {
        width: auto;
        justify-content: center;
    }
    .dashboard-actions-row .nav-toggle {
        display: inline-flex !important;
        flex: 0 0 52px;
        height: 52px;
        font-size: 1.25rem;
    }
    .dashboard-actions-row .dashboard-signout {
        flex: 1 1 auto;
    }
    .dashboard-actions-row .dashboard-lang {
        flex: 0 0 auto;
        padding: 6px 8px;
    }
    .dashboard-actions-row .dashboard-lang .lang-select {
        min-width: 44px;
    }
    .subscription-meta {
        grid-template-columns: 1fr;
    }
    .subscription-usage-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .subscription-usage {
        margin-top: 14px;
    }
    .plans-grid {
        grid-template-columns: 1fr;
    }
    .plans-toggle {
        width: 100%;
        justify-content: flex-start;
    }
    .plans-toggle-btn {
        flex: 1;
        text-align: center;
    }
}

.chats-actions {
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.chats-new {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(56, 189, 248, 0.2));
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #e0f2fe;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
    transition: all 0.3s ease;
}

.chats-new:hover {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(56, 189, 248, 0.3));
    border-color: rgba(56, 189, 248, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);
}

.chats-profile-select {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8));
    color: #e2e8f0;
    font-weight: 600;
    transition: all 0.3s ease;
}

.chats-profile-select:hover {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}

.chats-search input {
    padding: 9px 12px;
    padding-inline-start: 36px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: linear-gradient(135deg, rgba(8, 12, 20, 0.9), rgba(15, 23, 42, 0.8));
    color: #e2e8f0;
    width: 100%;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.chats-search input:focus {
    outline: none;
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
    background: rgba(8, 12, 20, 0.95);
}

.chats-shell {
    display: grid;
    grid-template-columns: minmax(280px, 32%) minmax(0, 68%);
    gap: 16px;
    min-width: 0;
    min-height: 60vh;
    background: linear-gradient(135deg, rgba(10, 12, 14, 0.95), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.chats-shell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
                rgba(20, 184, 166, 0.4),
                rgba(56, 189, 248, 0.4),
                rgba(225, 112, 85, 0.3));
}

.chats-sidebar {
    background: linear-gradient(180deg,
                rgba(24, 26, 28, 0.98) 0%,
                rgba(18, 20, 22, 0.98) 50%,
                rgba(15, 17, 19, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 62vh;
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 8px 24px rgba(0, 0, 0, 0.3);
}

.chats-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.9);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.chats-list-count {
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(56, 189, 248, 0.2));
    border: 1px solid rgba(56, 189, 248, 0.35);
    font-size: 0.65rem;
    font-weight: 700;
    color: #7dd3fc;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15);
}

.chats-list {
    display: grid;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.chats-list::-webkit-scrollbar {
    width: 6px;
}

.chats-list::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 10px;
}

.chats-list::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3);
    border-radius: 10px;
}

.chats-list::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.5);
}

.chats-item {
    border: 1px solid rgba(148, 163, 184, 0.1);
    background: linear-gradient(135deg, rgba(20, 22, 24, 0.9), rgba(30, 32, 34, 0.85));
    border-radius: 12px;
    padding: 12px 12px 14px;
    text-align: start;
    color: #e2e8f0;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 11px;
    align-items: start;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-height: 72px;
}

.chats-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.5), rgba(56, 189, 248, 0.5));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chats-item:hover {
    border-color: rgba(56, 189, 248, 0.3);
    background: linear-gradient(135deg, rgba(30, 32, 34, 0.95), rgba(40, 42, 44, 0.9));
    transform: translateX(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chats-item:hover::before {
    opacity: 1;
}

.chats-item-unread {
    position: static;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    margin-left: auto;
}

.chats-item-unread.placeholder {
    visibility: hidden;
}

.chats-item.is-active {
    border-color: rgba(20, 184, 166, 0.5);
    background: linear-gradient(135deg,
                rgba(16, 92, 65, 0.6) 0%,
                rgba(20, 184, 166, 0.2) 100%);
    transform: translateX(-3px);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chats-item.is-active::before {
    opacity: 1;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.8), rgba(45, 212, 191, 0.8));
}

.chats-item-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(56, 189, 248, 0.25));
    border: 2px solid rgba(56, 189, 248, 0.35);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #e2e8f0;
    font-size: 0.8rem;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15),
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.chats-item:hover .chats-item-avatar {
    transform: scale(1.05);
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.25);
}

.chats-item-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.chats-item-body {
    display: grid;
    gap: 7px;
    min-width: 0;
    align-content: start;
    padding-bottom: 2px;
}

.chats-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.chats-item-row--meta {
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    justify-content: flex-start;
    min-height: 18px;
}

.chats-item-timewrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 42px;
}

.chats-item-title {
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    color: rgba(226, 232, 240, 0.95);
    line-height: 1.3;
}

.chats-item-time {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.75);
    white-space: nowrap;
}

.chats-item-meta {
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.9);
    font-weight: 500;
    line-height: 1.4;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    flex: 1 1 0;
    min-width: 0;
    display: block;
}

.chats-item.is-active .chats-item-meta,
.chats-item:hover .chats-item-meta {
    color: rgba(226, 232, 240, 0.95);
}

.chats-list .chats-item .chats-item-meta {
    color: #e2e8f0;
    font-weight: 600;
}

.chats-list .chats-item.is-active .chats-item-meta,
.chats-list .chats-item:hover .chats-item-meta {
    color: #f1f5f9;
}

.chats-thread {
    background: linear-gradient(135deg,
                rgba(24, 26, 28, 0.98) 0%,
                rgba(18, 20, 22, 0.98) 50%,
                rgba(15, 17, 19, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 12px;
    min-width: 0;
    max-height: 62vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 8px 24px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.chats-thread::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
                rgba(20, 184, 166, 0.4),
                rgba(56, 189, 248, 0.4));
}

.chats-thread-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    padding-bottom: 10px;
    padding-top: 2px;
}

.chats-thread-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.chats-thread-user h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.95);
    letter-spacing: -0.01em;
}

.chats-thread-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(56, 189, 248, 0.3));
    border: 2px solid rgba(56, 189, 248, 0.45);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2),
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.chats-thread-avatar.has-avatar {
    background-size: cover;
    background-position: center;
    color: transparent;
}

.chats-thread-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chats-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    color: #e2e8f0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chats-icon-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    transition: transform 0.3s ease;
}

.chats-icon-btn:hover {
    border-color: rgba(56, 189, 248, 0.5);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(20, 184, 166, 0.2));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chats-icon-btn:hover svg {
    transform: scale(1.1);
}

.chats-icon-btn:active {
    transform: translateY(0);
}

.chats-labels {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    grid-column: 1 / -1;
    margin-top: 8px;
}

.chats-label-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chats-label-chip {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(56, 189, 248, 0.15));
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #7dd3fc;
    box-shadow: 0 2px 6px rgba(56, 189, 248, 0.15);
    transition: all 0.3s ease;
}

.chats-label-chip:hover {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(56, 189, 248, 0.25));
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(56, 189, 248, 0.25);
}

.chats-label-remove {
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.7);
    cursor: pointer;
}

.chats-label-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chats-label-actions select {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
}

.chats-messages {
    display: grid;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-right: 18px;
    min-height: 280px;
    align-content: start;
    scrollbar-gutter: stable;
    direction: ltr;
    justify-items: start;
    background:
        radial-gradient(circle at 30% 20%, rgba(20, 184, 166, 0.02), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(56, 189, 248, 0.02), transparent 50%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 40px),
        linear-gradient(180deg, #0f1214 0%, #121416 100%);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.chats-messages::-webkit-scrollbar {
    width: 8px;
}

.chats-messages::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 10px;
    margin: 8px 0;
}

.chats-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.3), rgba(20, 184, 166, 0.3));
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.chats-messages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.5), rgba(20, 184, 166, 0.5));
    background-clip: padding-box;
}

.chats-empty {
    color: rgba(148, 163, 184, 0.7);
    text-align: center;
    padding: 40px 20px;
    font-size: 0.9rem;
    grid-column: 1 / -1;
}

.chats-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 8px;
    row-gap: 4px;
    background: linear-gradient(135deg, rgba(28, 30, 32, 0.98), rgba(32, 34, 36, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.1);
    justify-self: start;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 1px 2px rgba(0, 0, 0, 0.2);
    width: auto;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.5;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chats-bubble:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
                0 2px 4px rgba(0, 0, 0, 0.25);
}

.chats-bubble p {
    margin: 0;
    flex: 1 1 auto;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.chats-bubble.is-incoming {
    background: linear-gradient(135deg,
                rgba(36, 38, 40, 0.98) 0%,
                rgba(40, 42, 44, 0.95) 100%);
    border-color: rgba(148, 163, 184, 0.15);
    color: rgba(238, 242, 246, 0.95);
    justify-self: start;
    margin-inline-start: 0;
    margin-inline-end: auto;
    border-radius: 16px 16px 16px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 1px 2px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chats-bubble.is-incoming:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
                0 2px 4px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.chats-bubble.is-outgoing {
    justify-self: end;
    background: linear-gradient(135deg,
                rgba(16, 92, 65, 0.95) 0%,
                rgba(20, 184, 166, 0.85) 100%);
    border-color: rgba(45, 212, 191, 0.3);
    color: #f0fdf4;
    border-radius: 16px 16px 4px 16px;
    margin-inline-start: auto;
    margin-inline-end: 0;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3),
                0 1px 2px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chats-bubble.is-outgoing:hover {
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4),
                0 2px 4px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.chats-bubble-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.chats-bubble-time {
    font-size: 0.6rem;
    color: rgba(226, 232, 240, 0.6);
    text-align: right;
    justify-self: end;
    align-self: flex-end;
    white-space: nowrap;
    margin-left: 0;
}

.chats-bubble-status {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: rgba(226, 232, 240, 0.5);
    line-height: 1;
}

.chats-bubble-check {
    display: inline-flex;
    align-items: center;
}

.chats-bubble-check svg {
    width: 14px;
    height: 10px;
}

.chats-bubble-check.is-offset {
    margin-left: -6px;
}

.chats-bubble-status.is-sent {
    color: rgba(226, 232, 240, 0.45);
}

.chats-bubble-status.is-delivered {
    color: rgba(226, 232, 240, 0.75);
}

.chats-bubble.is-outgoing .chats-bubble-status {
    color: rgba(231, 247, 241, 0.6);
}

.chats-bubble.is-outgoing .chats-bubble-status.is-delivered {
    color: rgba(231, 247, 241, 0.9);
}

.chats-bubble-status svg {
    stroke: currentColor;
    opacity: 0.95;
}

.chats-bubble img,
.chats-bubble video {
    max-width: 100%;
    border-radius: 10px;
}

.chats-composer {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    align-items: center;
    background: linear-gradient(135deg, rgba(24, 26, 28, 0.98), rgba(30, 32, 34, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 22px;
    padding: 10px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.chats-composer:focus-within {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.15),
                0 0 0 3px rgba(56, 189, 248, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.chats-composer textarea {
    width: 100%;
    resize: none;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    background: linear-gradient(135deg, rgba(16, 18, 20, 0.98), rgba(20, 22, 24, 0.95));
    color: #e7e9ec;
    padding: 10px 12px;
    min-height: 42px;
    font-size: 0.9rem;
    line-height: 1.5;
    font-family: inherit;
    transition: all 0.3s ease;
}

.chats-composer textarea:focus {
    outline: none;
    border-color: rgba(56, 189, 248, 0.3);
    background: rgba(16, 18, 20, 0.98);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1);
}

.chats-composer textarea::placeholder {
    color: rgba(148, 163, 184, 0.5);
}

.chats-composer-btn {
    background: linear-gradient(135deg, rgba(32, 34, 36, 0.98), rgba(40, 42, 44, 0.95));
    transition: all 0.3s ease;
}

.chats-composer-btn:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(20, 184, 166, 0.2));
    border-color: rgba(56, 189, 248, 0.4);
}

.emoji-picker {
    position: absolute;
    bottom: calc(100% + 10px);
    inset-inline-start: 12px;
    width: 260px;
    max-width: 70vw;
    background: rgba(15, 17, 20, 0.98);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
    display: none;
    z-index: 5;
}

.emoji-picker.is-open {
    display: block;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    max-height: 180px;
    overflow: auto;
    padding-right: 2px;
}

.emoji-picker-btn {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.emoji-picker-btn:hover {
    background: rgba(56, 189, 248, 0.18);
    transform: translateY(-1px);
}

.chats-search {
    position: relative;
}

.chats-search-icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, 0.8);
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
}

.chats-search-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

@media (max-width: 1100px) {
    .chats-shell {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 12px;
        min-height: 70vh;
    }

    .chats-sidebar {
        max-height: 32vh;
    }

    .chats-thread {
        min-height: 50vh;
        max-height: 60vh;
    }

    .chats-item {
        padding: 10px;
        grid-template-columns: 36px 1fr;
    }

    .chats-item-avatar {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 768px) {
    .chats-shell {
        border-radius: 16px;
        padding: 10px;
        gap: 12px;
    }

    .chats-sidebar,
    .chats-thread {
        border-radius: 14px;
        padding: 10px;
    }

    .chats-thread-avatar {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    .chats-bubble {
        max-width: 85%;
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .chats-composer {
        padding: 8px 10px;
        gap: 8px;
    }

    .chats-composer textarea {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .chats-icon-btn {
        width: 34px;
        height: 34px;
    }

    .chats-labels {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .chats-shell {
        min-height: 65vh;
    }

    .chats-sidebar {
        max-height: 28vh;
        padding: 10px;
    }

    .chats-thread {
        padding: 10px;
    }

    .chats-item {
        padding: 8px;
        gap: 8px;
        border-radius: 10px;
    }

    .chats-item-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.7rem;
    }

    .chats-thread-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    .chats-messages {
        padding: 12px;
        gap: 8px;
    }

    .chats-bubble {
        padding: 8px 11px;
        font-size: 0.82rem;
    }

    .chats-composer {
        grid-template-columns: 1fr auto;
        padding: 8px;
    }

    .chats-composer-btn:first-child {
        display: none;
    }
}

.primary-btn,
.ghost-btn {
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.primary-btn {
    background: linear-gradient(120deg, #14b8a6, #38bdf8);
    color: #0f172a;
}

.ghost-btn {
    background: rgba(30, 41, 59, 0.5);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.2);
        text-decoration: none;

}

.ghost-btn.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.75;
    pointer-events: none;
}

.ghost-btn.btn-loading .loader {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.primary-btn.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
    pointer-events: none;
}

.primary-btn.btn-loading .loader {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.metric-card {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 18px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.25);
}

.metric-card p {
    margin: 0 0 10px;
    color: rgba(226, 232, 240, 0.6);
}

.metric-card h3 {
    margin: 0;
    font-size: 1.6rem;
}

.metric-up,
.metric-down {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 700;
}

.metric-up {
    color: #34d399;
}

.metric-down {
    color: #f87171;
}

.dashboard-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.overview-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(56, 189, 248, 0.15));
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #7dd3fc;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.kpi-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.6), rgba(56, 189, 248, 0.6));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kpi-card:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 184, 166, 0.4);
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.5),
                0 0 0 1px rgba(20, 184, 166, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.kpi-card:hover::before {
    opacity: 1;
}

.kpi-card > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kpi-card h3 {
    font-size: 2rem;
    font-weight: 800;
    margin: 4px 0;
    background: linear-gradient(135deg, #ffffff, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.kpi-card p {
    margin: 0;
    color: rgba(226, 232, 240, 0.75);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.kpi-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(45, 212, 191, 0.15));
    border: 1px solid rgba(45, 212, 191, 0.35);
    color: #5eead4;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kpi-card:hover .kpi-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(45, 212, 191, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.kpi-icon svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.kpi-delta {
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.kpi-delta--up {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.kpi-delta--down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.kpi-delta--neutral {
    color: rgba(148, 163, 184, 0.85);
    background: rgba(148, 163, 184, 0.08);
}

.dashboard-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
}

.chart-card {
    position: relative;
    padding: 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
                rgba(56, 189, 248, 0.4),
                rgba(225, 112, 85, 0.4));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chart-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.5),
                0 0 0 1px rgba(56, 189, 248, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.chart-card:hover::before {
    opacity: 1;
}

.chart-card h3 {
    margin: 0 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
}

.chart-subtitle {
    margin: 0 0 20px;
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.8rem;
    font-weight: 500;
}

.chart-grid {
    display: grid;
    gap: 16px;
}

.chart-plot {
    position: relative;
    height: 200px;
    border-radius: 16px;
    background: linear-gradient(180deg,
                rgba(20, 184, 166, 0.05) 0%,
                rgba(15, 23, 42, 0.4) 50%,
                rgba(15, 23, 42, 0.6) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(2, 6, 23, 0.3);
}

.chart-plot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 39px,
        rgba(148, 163, 184, 0.05) 39px,
        rgba(148, 163, 184, 0.05) 40px
    );
    pointer-events: none;
}

.chart-grid .chart-line {
    width: calc(100% - 32px);
    height: 4px;
    margin: 0 16px;
    background: linear-gradient(90deg,
                rgba(20, 184, 166, 0.8),
                rgba(56, 189, 248, 0.8),
                rgba(34, 211, 238, 0.3));
    border-radius: 999px;
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.4);
    position: relative;
    z-index: 1;
}

.chart-grid .chart-points {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.chart-grid .chart-path {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.chart-grid .chart-path polyline {
    fill: none;
    stroke: rgba(56, 189, 248, 0.9);
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 14px rgba(20, 184, 166, 0.45));
}

.chart-grid .chart-points span {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #14b8a6, #22d3ee);
    box-shadow: 0 0 16px rgba(20, 184, 166, 0.6),
                0 0 4px rgba(255, 255, 255, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(15, 23, 42, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chart-grid .chart-points span::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) scale(0.96);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(56, 189, 248, 0.25);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.chart-grid .chart-points span:hover {
    transform: scale(1.3);
    box-shadow: 0 0 24px rgba(20, 184, 166, 0.8),
                0 0 8px rgba(255, 255, 255, 0.6),
                inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.chart-grid .chart-points span:hover::after,
.chart-grid .chart-points span:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.chart-grid .chart-axis {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[dir="rtl"] .chart-grid .chart-points,
[dir="rtl"] .chart-grid .chart-axis {
    flex-direction: row-reverse;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.card {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 22px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.25);
}

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

.card-header span {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.5);
}

.chart-surface {
    position: relative;
    height: 200px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6));
    border: 1px dashed rgba(148, 163, 184, 0.2);
    padding: 24px;
}

.chart-line {
    position: absolute;
    inset: 40% 24px auto 24px;
    height: 2px;
    background: linear-gradient(90deg, #14b8a6, #38bdf8);
}

.chart-points {
    display: flex;
    justify-content: space-between;
    position: absolute;
    inset: 36% 24px auto 24px;
}

.chart-points span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.chart-axis {
    position: absolute;
    bottom: 16px;
    right: 24px;
    left: 24px;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.5);
}

.channel-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.channel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(30, 41, 59, 0.5);
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.channel-item p {
    margin: 0 0 6px;
    font-weight: 600;
}

.channel-item span {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.6);
}

.alert-list {
    margin: 0;
    padding-right: 18px;
    line-height: 1.8;
    color: rgba(226, 232, 240, 0.8);
}

.ai-suggestions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.ai-suggestions:first-of-type {
    border-top: none;
}

.ai-suggestions span {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.6);
}

.dashboard-profiles .card-header {
    align-items: flex-start;
}

.profiles-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.profiles-page-header h2 {
    margin: 0 0 6px;
}

.profiles-page-header p {
    margin: 0;
    color: rgba(226, 232, 240, 0.65);
}

.profiles-panel {
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(15, 23, 42, 0.6);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.25);
}

.products-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.products-page-header h2 {
    margin: 0 0 6px;
}

.products-page-header p {
    margin: 0;
    color: rgba(226, 232, 240, 0.65);
}

.products-toolbar {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.products-search input {
    min-width: 260px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
}

.products-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.products-filter select {
    min-width: 180px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
}

.products-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    align-items: start;
}

.restaurant-settings {
    margin-bottom: 18px;
    background: rgba(2, 6, 23, 0.4);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 20px;
    padding: 18px;
    box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.06);
}

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

.restaurant-settings-header h3 {
    margin: 0 0 6px;
}

.restaurant-settings-header p {
    margin: 0;
    color: rgba(226, 232, 240, 0.6);
}

.restaurant-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.restaurant-settings-card {
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.restaurant-settings-card span {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.6);
}

.restaurant-settings-card strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
    word-break: break-word;
}

.product-card {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.88));
    padding: 18px;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.product-card.is-selected {
    border-color: rgba(45, 212, 191, 0.6);
    box-shadow: 0 0 22px rgba(45, 212, 191, 0.18);
}

.restaurant-settings-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.7);
    margin-bottom: 4px;
}
.product-card-title {
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-desc {
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.65);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-media {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.product-media-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.65);
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.product-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-media-thumb .media-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(226, 232, 240, 0.7);
}

.product-media-thumb .media-name {
    display: block;
    max-width: 68px;
    font-size: 0.58rem;
    color: rgba(226, 232, 240, 0.7);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.products-media-urls {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.products-dropzone {
    border: 1px dashed rgba(148, 163, 184, 0.5);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    color: rgba(226, 232, 240, 0.75);
    background: rgba(2, 6, 23, 0.35);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.products-dropzone.is-dragover {
    border-color: rgba(45, 212, 191, 0.8);
    background: rgba(15, 118, 110, 0.2);
}

.products-dropzone.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

.products-dropzone .dropzone-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.products-dropzone.is-loading .dropzone-label::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(226, 232, 240, 0.6);
    border-top-color: #14b8a6;
    animation: spin 1s linear infinite;
}

.product-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

.product-card-actions .ghost-btn {
    padding: 8px 12px;
    font-size: 0.76rem;
}

.product-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.65);
}

.product-card-meta div {
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(56, 189, 248, 0.14);
    border-radius: 999px;
    padding: 6px 10px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.product-card-meta strong {
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.78rem;
}

.product-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(226, 232, 240, 0.7);
}

.add-product-card {
    display: grid;
    place-items: center;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
    border: 1px dashed rgba(148, 163, 184, 0.4);
}

.add-product-card span:first-child {
    font-size: 28px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.2);
}

.products-modal {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(45, 212, 191, 0.18), transparent 55%),
        rgba(2, 6, 23, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    padding: 18px;
    overflow-y: auto;
    backdrop-filter: blur(14px);
}

.products-modal-card {
    width: min(960px, 100%);
    background:
        linear-gradient(150deg, rgba(15, 23, 42, 0.75), rgba(2, 6, 23, 0.7)),
        rgba(15, 23, 42, 0.6);
    border-radius: 28px;
    padding: 26px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow:
        0 40px 80px rgba(2, 6, 23, 0.55),
        0 0 0 1px rgba(45, 212, 191, 0.18),
        0 0 30px rgba(45, 212, 191, 0.12);
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    backdrop-filter: blur(18px);
}

@supports (height: 100dvh) {
    .products-modal-card {
        max-height: 85dvh;
    }
}

.products-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.18);
}

.products-stepper {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.stepper-pill {
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.6);
    color: rgba(226, 232, 240, 0.8);
    cursor: pointer;
}

.stepper-pill.is-active {
    background: rgba(56, 189, 248, 0.2);
    color: #e2e8f0;
}

.products-modal-header h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
}

.products-modal-header p {
    margin: 0;
    color: rgba(226, 232, 240, 0.6);
}

.products-modal-type {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.45);
    font-size: 0.78rem;
    text-transform: capitalize;
    color: #e2e8f0;
}

.products-form {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

.products-form-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 26px;
}

.products-step {
    display: none;
}

.products-step.is-active {
    display: grid;
}

.products-form-main label {
    display: block;
    margin: 14px 0 6px;
    color: rgba(226, 232, 240, 0.7);
}

.products-form-main label:first-of-type {
    margin-top: 0;
}

.products-form-main input,
.products-form-main textarea,
.products-panel select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: rgba(2, 6, 23, 0.45);
    color: #e2e8f0;
    box-shadow:
        inset 0 0 0 1px rgba(30, 41, 59, 0.6),
        0 0 0 1px rgba(45, 212, 191, 0.08);
    box-sizing: border-box;
}

.products-type-fields input[type="file"] {
    width: 100%;
    padding: 10px;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.7);
    color: rgba(226, 232, 240, 0.7);
}

.products-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    justify-content: flex-start;
}

.products-checkbox input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.products-checkbox span {
    line-height: 1;
    display: inline-block;
}

.products-delivery {
    margin-top: 10px;
}

.products-modal-message {
    margin-left: auto;
    font-size: 0.85rem;
    color: #34d399;
}

.products-modal-message.is-error {
    color: #f87171;
}

.products-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.products-field-grid > div {
    min-width: 0;
}

.products-panel {
    background: rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 0;
    box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.06);
}

.products-settings {
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 24px;
    padding: 20px;
    margin: 18px 0;
    box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.08);
    display: grid;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.products-settings::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(225, 112, 85, 0.35));
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.products-settings > * {
    position: relative;
    z-index: 1;
}

.products-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.products-settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.products-settings-type {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(225, 112, 85, 0.35);
    text-transform: capitalize;
}

.products-settings-header p {
    margin-top: 6px;
    color: rgba(148, 163, 184, 0.9);
}

.products-settings label {
    display: block;
    margin-bottom: 8px;
    color: rgba(226, 232, 240, 0.9);
    font-weight: 500;
}

.products-settings input,
.products-settings textarea,
.products-settings select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: rgba(2, 6, 23, 0.45);
    color: #e2e8f0;
    box-shadow:
        inset 0 0 0 1px rgba(30, 41, 59, 0.6),
        0 0 0 1px rgba(45, 212, 191, 0.08);
    box-sizing: border-box;
}

.products-settings textarea {
    min-height: 90px;
    resize: vertical;
}

.products-hours-grid {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: rgba(2, 6, 23, 0.35);
}

.products-hours-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.9rem;
}

.products-hours-row input[type="time"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: rgba(2, 6, 23, 0.45);
    color: #e2e8f0;
    box-sizing: border-box;
}

.business-settings-group {
    display: none;
}

.business-settings-group.is-active {
    display: block;
}

.products-settings-message {
    font-size: 0.85rem;
    color: #34d399;
}

.products-settings-message.is-error {
    color: #f87171;
}

.orders-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin: 18px 0 24px;
}

.orders-metrics .metric-card {
    position: relative;
    overflow: hidden;
}

.orders-metrics .metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.08);
}

.orders-metrics .metric-icon svg {
    width: 22px;
    height: 22px;
}

.orders-metrics .metric-icon--total {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.22), rgba(18, 140, 126, 0.12));
    border-color: rgba(37, 211, 102, 0.35);
    color: #86efac;
}

.orders-metrics .metric-icon--pending {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(14, 116, 144, 0.18));
    border-color: rgba(45, 212, 191, 0.35);
    color: #67e8f9;
}

.orders-metrics .metric-icon--shipped {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(59, 130, 246, 0.14));
    border-color: rgba(56, 189, 248, 0.35);
    color: #bae6fd;
}

.orders-metrics .metric-icon--delivered {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(16, 185, 129, 0.16));
    border-color: rgba(34, 197, 94, 0.35);
    color: #bbf7d0;
}
.orders-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(320px, 2fr) auto auto;
    gap: 18px;
    align-items: end;
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(2, 6, 23, 0.65));
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.35);
}

.orders-search label,
.orders-filter label {
    display: block;
    margin-bottom: 8px;
    color: rgba(226, 232, 240, 0.75);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.orders-search input,
.orders-filter select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.orders-search input:focus,
.orders-filter select:focus {
    outline: none;
    border-color: rgba(45, 212, 191, 0.7);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
    transform: translateY(-1px);
}

.orders-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
}

.orders-summary {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.65);
    text-align: end;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.45);
    white-space: nowrap;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: end;
}

.orders-export {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    align-self: end;
}

.orders-export .ghost-btn {
    white-space: nowrap;
    height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.orders-export-btn {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.55);
}

.orders-export-btn--csv {
    border-color: rgba(34, 197, 94, 0.4);
    color: #bbf7d0;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(15, 23, 42, 0.55));
}

.orders-export-btn--xlsx {
    border-color: rgba(45, 212, 191, 0.45);
    color: #99f6e4;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(15, 23, 42, 0.55));
}

.orders-export-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orders-export-icon svg {
    width: 18px;
    height: 18px;
}

.orders-list {
    display: grid;
    gap: 16px;
}

.orders-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.7);
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.3);
    max-width: 100%;
    width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
    color: #e2e8f0;
}

.orders-table.is-restaurant {
    width: max-content;
    min-width: 1400px;
}

.orders-table thead th {
    text-align: start;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 16px;
    color: rgba(148, 163, 184, 0.9);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(2, 6, 23, 0.6);
    position: sticky;
    top: 0;
    z-index: 1;
}

.orders-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    vertical-align: top;
    font-size: 0.9rem;
}

.orders-table tbody tr:hover {
    background: rgba(30, 41, 59, 0.4);
}

.orders-cell-title {
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 4px;
}

.orders-cell-meta {
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.78rem;
    line-height: 1.4;
}

.orders-field-stack {
    display: grid;
    gap: 8px;
}

.orders-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: rgba(2, 6, 23, 0.6);
    color: #e2e8f0;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.orders-input--compact {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.orders-status-select {
    width: 100%;
    appearance: none;
}

.orders-link {
    color: #7dd3fc;
    text-decoration: none;
}

.orders-link:hover {
    color: #38bdf8;
    text-decoration: underline;
}

.orders-empty-row td {
    text-align: center;
    color: rgba(148, 163, 184, 0.85);
    padding: 28px 16px;
}

.customers-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

.customers-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    flex: 1 1 420px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(9, 12, 18, 0.75);
}

.customers-search input {
    height: 32px;
    border: none;
    background: transparent;
    color: #e2e8f0;
    padding: 0;
    width: 100%;
    outline: none;
}

.customers-search-icon {
    width: 18px;
    height: 18px;
    color: rgba(148, 163, 184, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.customers-search-icon svg {
    width: 18px;
    height: 18px;
}

.customers-filter-btn {
    height: 42px;
    padding: 0 18px;
}

.customers-summary {
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.85rem;
    white-space: nowrap;
}

.customers-filters-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    margin-bottom: 16px;
}

.customers-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(226, 232, 240, 0.85);
}

.customers-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.customers-metrics .metric-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
}

.customers-metrics .metric-card h3 {
    margin-top: 4px;
}

.customers-metrics .metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.customers-metrics .metric-icon svg {
    width: 22px;
    height: 22px;
}

.customers-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.7);
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.3);
    max-width: 100%;
    width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

.customers-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
    color: #e2e8f0;
}

.customers-table thead th {
    text-align: start;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 16px;
    color: rgba(148, 163, 184, 0.9);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(2, 6, 23, 0.6);
    position: sticky;
    top: 0;
    z-index: 1;
}

.customers-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    vertical-align: top;
    font-size: 0.9rem;
}

.customers-table tbody tr:hover {
    background: rgba(30, 41, 59, 0.4);
}

.customers-cell-title {
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 4px;
}

.customers-cell-meta {
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.78rem;
    line-height: 1.4;
}

.customers-empty-row td {
    text-align: center;
    color: rgba(148, 163, 184, 0.85);
    padding: 28px 16px;
}

.orders-modal {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(circle at 85% 0%, rgba(45, 212, 191, 0.16), transparent 55%),
        rgba(2, 6, 23, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1003;
    padding: 20px;
    backdrop-filter: blur(14px);
}

.orders-modal-card {
    width: min(720px, 100%);
    background:
        linear-gradient(150deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.72)),
        rgba(15, 23, 42, 0.6);
    border-radius: 26px;
    padding: 26px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow:
        0 36px 70px rgba(2, 6, 23, 0.55),
        0 0 0 1px rgba(45, 212, 191, 0.18),
        0 0 26px rgba(45, 212, 191, 0.12);
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}

.orders-modal-close {
    position: absolute;
    top: 18px;
    left: 18px;
    border: none;
    background: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
}

.orders-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    margin-bottom: 18px;
}

.orders-modal-meta {
    margin: 6px 0 0;
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.85rem;
}

.orders-modal-badge {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    background: rgba(56, 189, 248, 0.12);
    color: #e2e8f0;
    font-size: 0.75rem;
    max-width: 220px;
    text-align: center;
}

.orders-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.orders-modal-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.orders-modal-section h4 {
    margin: 0 0 12px;
    font-size: 1rem;
    color: #e2e8f0;
}

.orders-modal-span-2 {
    grid-column: span 2;
}

.orders-modal-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.7);
}

.orders-modal-error {
    margin: 16px 0 0;
    color: #fca5a5;
    font-size: 0.85rem;
}

.orders-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 720px) {
    .orders-modal-grid {
        grid-template-columns: 1fr;
    }

    .orders-modal-span-2 {
        grid-column: span 1;
    }
}

.order-card {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    padding: 18px;
    display: grid;
    gap: 12px;
    box-shadow: 0 18px 30px rgba(2, 6, 23, 0.35);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.order-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.order-title {
    font-weight: 700;
    color: #e2e8f0;
}

.order-meta {
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.85rem;
}

.order-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(56, 189, 248, 0.3);
    background: rgba(56, 189, 248, 0.08);
    text-transform: capitalize;
}

.order-badge.status-pending,
.order-badge.status-confirmed,
.order-badge.status-packed {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.15);
    color: #fde68a;
}

.order-badge.status-shipped {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
}

.order-badge.status-delivered {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

.order-badge.status-cancelled,
.order-badge.status-refunded,
.order-badge.status-failed {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca;
}

.order-payment {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.12);
    color: rgba(226, 232, 240, 0.9);
    text-transform: capitalize;
}

.order-payment.status-paid {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

.order-payment.status-unpaid {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.15);
    color: #fde68a;
}

.order-payment.status-refunded {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca;
}

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

.order-grid label {
    display: block;
    margin-bottom: 6px;
    color: rgba(226, 232, 240, 0.75);
    font-size: 0.85rem;
}

.order-grid input,
.order-grid select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: rgba(2, 6, 23, 0.45);
    color: #e2e8f0;
    box-sizing: border-box;
}

.order-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.order-items {
    border-top: 1px solid rgba(56, 189, 248, 0.18);
    padding-top: 12px;
    color: rgba(226, 232, 240, 0.8);
    font-size: 0.9rem;
    display: grid;
    gap: 6px;
}

@media (max-width: 900px) {
    .orders-toolbar {
        grid-template-columns: 1fr;
    }

    .orders-summary {
        text-align: start;
    }
}

.products-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.products-panel + .products-panel {
    margin-top: 4px;
}

.products-variant-list {
    display: grid;
    gap: 12px;
}

.products-variant-row {
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 16px;
    padding: 12px;
    background: rgba(15, 23, 42, 0.35);
    display: grid;
    gap: 12px;
}

.products-variant-actions {
    display: flex;
    justify-content: flex-end;
}

.products-variant-discount {
    align-items: end;
}

.products-hint {
    margin-top: 10px;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.9);
}

.products-image-drop {
    width: 100%;
    height: 120px;
    border-radius: 14px;
    border: 1px dashed rgba(56, 189, 248, 0.35);
    display: grid;
    place-items: center;
    font-size: 24px;
    color: rgba(226, 232, 240, 0.6);
    box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.06);
}

.products-type-fields {
    display: none;
}

.products-type-fields.is-active {
    display: block;
}

.products-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(56, 189, 248, 0.18);
}

.dashboard-profiles .card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.profiles-empty {
    border-radius: 18px;
    border: 1px dashed rgba(56, 189, 248, 0.35);
    padding: 28px;
    text-align: center;
    background: rgba(15, 23, 42, 0.6);
}

.profiles-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(56, 189, 248, 0.2);
    font-size: 24px;
}

.profiles-empty-title {
    margin: 0 0 8px;
    font-weight: 700;
}

.profiles-empty-body {
    margin: 0 0 18px;
    color: rgba(226, 232, 240, 0.7);
}

.profiles-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.profile-row p {
    margin: 0 0 6px;
    font-weight: 700;
}

.profile-row span {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.6);
}

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

.status-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(148, 163, 184, 0.2);
    color: rgba(226, 232, 240, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-pill.is-connected {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
}

.status-pill.is-connecting {
    background: rgba(250, 204, 21, 0.2);
    color: #facc15;
}

.status-pill.is-disconnected {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.profiles-modal {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(45, 212, 191, 0.16), transparent 55%),
        rgba(2, 6, 23, 0.88);
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: 20px;
    backdrop-filter: blur(14px);
}

.profiles-modal-card {
    position: relative;
    width: min(520px, 100%);
    background:
        linear-gradient(150deg, rgba(15, 23, 42, 0.75), rgba(2, 6, 23, 0.7)),
        rgba(15, 23, 42, 0.6);
    border-radius: 28px;
    padding: 26px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow:
        0 36px 70px rgba(2, 6, 23, 0.55),
        0 0 0 1px rgba(45, 212, 191, 0.18),
        0 0 26px rgba(45, 212, 191, 0.12);
    backdrop-filter: blur(18px);
}

.profiles-modal-close {
    position: absolute;
    top: 18px;
    left: 18px;
    border: none;
    background: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
}

.profiles-modal-hint {
    margin: 8px 0 16px;
    color: rgba(226, 232, 240, 0.7);
}

.profiles-modal-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.7);
}

.profiles-modal-input {
    width: 100%;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 12px 14px;
    color: #e2e8f0;
    font-size: 0.95rem;
}

.profiles-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.profiles-qr {
    margin-top: 18px;
    text-align: center;
}

.profiles-qr-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: rgba(226, 232, 240, 0.8);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.profiles-qr img {
    width: 220px;
    height: 220px;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
}

.profiles-error {
    margin-top: 12px;
    color: #f87171;
    font-size: 0.85rem;
}

.hidden {
    display: none;
}

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

    .dashboard-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: auto;
        width: min(280px, 85vw);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 1001;
        border-left: none;
        border-bottom: none;
        box-shadow: -20px 0 40px rgba(2, 6, 23, 0.45);
    }

    [dir="ltr"] .dashboard-sidebar {
        left: 0;
        right: auto;
        transform: translateX(-100%);
        box-shadow: 20px 0 40px rgba(2, 6, 23, 0.45);
    }

    .dashboard-sidebar.is-open {
        transform: translateX(0);
    }

    .dashboard-nav {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .dashboard-user {
        margin-top: 0;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-overlay {
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.6);
        z-index: 900;
    }
}

@media (max-width: 720px) {
    .dashboard-main {
        padding: 24px;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-actions .primary-btn,
    .dashboard-actions .ghost-btn:not(.nav-toggle):not(.dashboard-signout) {
        display: none;
    }

    .products-form {
        grid-template-columns: 1fr;
    }

    .products-form-side {
        padding-top: 0;
    }
}

@media (max-width: 600px) {
    .dashboard-sidebar {
        padding: 20px 16px;
        gap: 20px;
    }

    .dashboard-brand span {
        font-size: 0.95rem;
    }

    .dashboard-main {
        padding: 20px 16px 32px;
    }

    .dashboard-metrics,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .chart-axis {
        font-size: 0.65rem;
    }

    .dashboard-user {
        width: 100%;
        justify-content: flex-start;
    }
}

.password-toggle {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.85rem;
}

.password-toggle:hover {
    border-color: #38bdf8;
    color: #38bdf8;
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.8);
}

.auth-terms {
    margin-top: 6px;
}

.auth-checkbox input {
    accent-color: #38bdf8;
    width: 16px;
    height: 16px;
}

.auth-link {
    color: #38bdf8;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-button {
    margin-top: 6px;
    background: linear-gradient(120deg, #38bdf8, #0ea5e9);
    border: none;
    color: #0f172a;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(14, 165, 233, 0.3);
}

.auth-footer {
    margin-top: 20px;
    text-align: center;
    color: rgba(226, 232, 240, 0.7);
}

@keyframes auth-fade-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-panel {
        order: 2;
    }

    .auth-card {
        order: 1;
    }
}

@media (max-width: 600px) {
    .auth-shell {
        width: 92vw;
        padding: 32px 0;
    }

    .auth-panel,
    .auth-card {
        padding: 28px;
        border-radius: 22px;
    }

    .auth-options {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 960px) {
    .dashboard-sidebar {
        z-index: 1100;
        pointer-events: auto;
    }

    .dashboard-overlay {
        display: none;
        z-index: 1000;
        pointer-events: none;
    }

    body.nav-open .dashboard-overlay {
        display: block;
        pointer-events: auto;
    }

    body.nav-open {
        overflow: hidden;
    }
}

/* Dashboard Overview Responsive Design */
@media (max-width: 1200px) {
    .dashboard-kpis {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }

    .dashboard-charts {
        grid-template-columns: 1fr;
    }
}

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

    .dashboard-sidebar {
        position: fixed;
        top: 0;
        right: -280px;
        bottom: 0;
        width: 260px;
        z-index: 1100;
        transition: right 0.3s ease;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }

    .dashboard-sidebar.is-open {
        right: 0;
    }

    .dashboard-overlay {
        z-index: 1000;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        padding: 8px 12px;
    }

    .dashboard-main {
        padding: 24px 20px;
    }

    .dashboard-header {
        flex-wrap: wrap;
    }

    .dashboard-kpis {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .kpi-card {
        padding: 18px;
    }

    .kpi-card h3 {
        font-size: 1.6rem;
    }

    .kpi-icon {
        width: 44px;
        height: 44px;
    }

    .kpi-icon svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 600px) {
    .dashboard-main {
        padding: 16px 12px;
    }

    .dashboard-header {
        margin-bottom: 16px;
    }

    .dashboard-header h1 {
        font-size: 1.4rem;
    }

    .dashboard-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 20px;
    }

    .kpi-card {
        padding: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .kpi-card h3 {
        font-size: 1.35rem;
    }

    .kpi-card p {
        font-size: 0.8rem;
    }

    .kpi-icon {
        width: 40px;
        height: 40px;
    }

    .dashboard-charts {
        gap: 12px;
    }

    .chart-card {
        padding: 16px;
    }

    .chart-card h3 {
        font-size: 1rem;
    }

    .chart-plot {
        height: 160px;
    }

    .chart-grid .chart-axis {
        font-size: 0.65rem;
    }

    .overview-tag {
        font-size: 0.7rem;
        padding: 6px 12px;
    }

    .dashboard-overview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }
}

@media (max-width: 600px) {
    .profiles-page-header,
    .products-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .profiles-page-header .primary-btn,
    .profiles-page-header .ghost-btn,
    .products-page-header .primary-btn,
    .products-page-header .ghost-btn {
        width: 100%;
        justify-content: center;
    }

    .dashboard-section[data-section="profiles"] .profiles-page-header .card-actions {
        width: 100%;
        display: flex;
        gap: 10px;
    }

    .dashboard-section[data-section="profiles"] .profiles-page-header .card-actions .primary-btn,
    .dashboard-section[data-section="profiles"] .profiles-page-header .card-actions .ghost-btn {
        width: 100%;
        flex: 1 1 0;
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .dashboard-section[data-section="products"] .products-page-header .card-actions {
        width: 100%;
        display: flex;
        gap: 10px;
    }

    .dashboard-section[data-section="products"] .products-page-header .card-actions .primary-btn,
    .dashboard-section[data-section="products"] .products-page-header .card-actions .ghost-btn {
        width: 100%;
        flex: 1 1 0;
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .dashboard-section[data-section="customers"] .products-page-header .card-actions {
        width: 100%;
        display: flex;
        gap: 10px;
    }

    .dashboard-section[data-section="customers"] .products-page-header .card-actions .primary-btn,
    .dashboard-section[data-section="customers"] .products-page-header .card-actions .ghost-btn {
        width: 100%;
        flex: 1 1 0;
    }

    .products-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .products-search {
        width: 100%;
    }

    .products-search input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .products-filter select {
        width: 100%;
        min-width: 0;
    }

    .products-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .products-modal-card {
        padding: 20px;
        border-radius: 20px;
    }

    .products-modal-header {
        flex-direction: column;
        gap: 10px;
    }

    .products-stepper {
        flex-wrap: wrap;
    }

    .products-settings-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .products-settings-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
    }

    .products-settings-actions .primary-btn {
        width: auto;
        padding: 10px 14px;
        font-size: 0.9rem;
        min-height: 0;
    }

    .products-hours-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .profiles-panel {
        padding: 18px;
    }

    .profile-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 10px;
    }

    .profile-row > div:first-child span {
        display: block;
        margin-top: 4px;
        line-height: 1.4;
    }

    .profile-row .status-pill {
        justify-self: flex-start;
    }

    .profile-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .profile-actions .ghost-btn {
        flex: 1 1 120px;
        justify-content: center;
    }

    .orders-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .orders-toolbar {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    .orders-filters {
        grid-template-columns: 1fr;
    }

    .orders-summary {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
        height: auto;
        padding: 8px 12px;
        align-self: stretch;
    }

    .orders-export {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .orders-table {
        min-width: 720px;
    }

    .orders-table thead th,
    .orders-table tbody td {
        padding: 12px;
    }

    .orders-modal-card {
        padding: 20px;
        border-radius: 20px;
    }

    .orders-modal-close {
        top: 12px;
        left: 12px;
    }

    .customers-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    .customers-search {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 10px 12px;
        flex: 0 0 auto;
        box-sizing: border-box;
    }

    .customers-search input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .customers-toolbar > * {
        width: 100%;
        max-width: 100%;
    }

    .customers-filter-btn {
        width: 100%;
        justify-content: center;
    }

    .customers-summary {
        width: 100%;
        text-align: left;
    }

    .customers-filters-panel {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 12px;
        gap: 10px;
    }

    .customers-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .customers-metrics .metric-card {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .customers-metrics .metric-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .customers-table {
        min-width: 640px;
    }

    .customers-table thead th,
    .customers-table tbody td {
        padding: 12px;
        font-size: 0.85rem;
    }

    .customers-cell-meta {
        font-size: 0.72rem;
    }

    .plans-hero {
        gap: 14px;
        margin-bottom: 24px;
    }

    .plan-card.is-featured {
        transform: none;
    }

    .plan-features {
        gap: 8px;
        font-size: 0.85rem;
    }

    .plans-meta {
        grid-template-columns: 1fr;
    }

    .subscription-card {
        padding: 18px;
    }

    .subscription-meta-item {
        padding: 10px 12px;
    }

    .subscription-usage-bar {
        height: 8px;
    }
}

@media (max-width: 400px) {
    .kpi-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .kpi-icon {
        order: -1;
        margin-bottom: 8px;
    }

    .dashboard-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-btn,
    .ghost-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==================== Google OAuth Styles ==================== */

/* Social Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: #94a3b8;
    font-size: 0.875rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}

.auth-divider:not(:empty)::before {
    margin-right: 0.75rem;
}

.auth-divider:not(:empty)::after {
    margin-left: 0.75rem;
}

/* RTL support for divider */
[dir="rtl"] .auth-divider:not(:empty)::before {
    margin-right: 0;
    margin-left: 0.75rem;
}

[dir="rtl"] .auth-divider:not(:empty)::after {
    margin-left: 0;
    margin-right: 0.75rem;
}

/* Google Sign In Button */
.auth-button--google {
    background: #ffffff;
    color: #3c4043;
    border: 1px solid #dadce0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
}

.auth-button--google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.auth-button--google:active {
    background: #f1f3f4;
}

.auth-button-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Integrations section */
.integrations-table-wrap {
    border-radius: 20px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: linear-gradient(145deg, rgba(9, 20, 48, 0.92), rgba(8, 17, 40, 0.88));
    overflow: hidden;
}

.integrations-table {
    width: 100%;
    border-collapse: collapse;
}

.integrations-table th {
    text-align: left;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.9);
    padding: 14px 16px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.18);
    background: rgba(2, 6, 23, 0.45);
}

.integrations-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.12);
    color: rgba(226, 232, 240, 0.9);
    vertical-align: middle;
    font-size: 0.92rem;
}

.integrations-row.is-primary {
    background: linear-gradient(120deg, rgba(20, 184, 166, 0.1), rgba(56, 189, 248, 0.05));
}

.integrations-cell-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.integrations-cell-name strong {
    color: #f8fafc;
    font-size: 0.98rem;
}

.integrations-cell-name span {
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.integrations-badge {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}

.integrations-badge.status-available {
    color: #99f6e4;
    border-color: rgba(45, 212, 191, 0.45);
    background: rgba(20, 184, 166, 0.14);
}

.integrations-badge.status-connected {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.15);
}

.integrations-badge.status-beta {
    color: #bae6fd;
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.12);
}

.integrations-badge.status-planned {
    color: rgba(226, 232, 240, 0.9);
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.45);
}

.integrations-action-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.shopify-import-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}

.shopify-import-btn:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.6);
    color: #dcfce7;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.18);
}

.shopify-import-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.shopify-import-btn svg {
    flex-shrink: 0;
}

.integrations-empty-row td {
    text-align: center;
    color: rgba(148, 163, 184, 0.9);
    padding: 20px 12px;
}

@media (max-width: 720px) {
    .integrations-table-wrap {
        overflow-x: auto;
    }

    .integrations-table {
        min-width: 760px;
    }
}