/* =========================================================
   LEWU TECH — EMAIL MARKETING PORTAL
   Premium Navy / Champagne Gold / Warm White
   ========================================================= */

:root {
    --navy: #10233F;
    --navy-deep: #0A192E;
    --navy-mid: #1B3557;
    --navy-soft: #EAF0F7;

    --gold: #E8B83F;
    --gold-light: #FFF5D9;
    --gold-hover: #D7A62B;

    --bg: #F6F7FA;
    --surface: #FFFFFF;
    --surface-soft: #FBFCFE;

    --text: #202B3C;
    --muted: #7C8798;
    --border: #E5E9F0;

    --success: #167653;
    --success-bg: #E9F6EF;
    --danger: #B93845;
    --danger-bg: #FFF0F1;

    --shadow-sm: 0 2px 8px rgba(16, 35, 63, .035);
    --shadow-md: 0 8px 28px rgba(16, 35, 63, .055);
    --shadow-lg: 0 18px 50px rgba(16, 35, 63, .10);

    --radius: 14px;
    --radius-sm: 9px;
}

/* RESET */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

::selection {
    background: #F8E5A8;
    color: var(--navy-deep);
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: 238px;
    padding: 29px 18px 20px;
    overflow-y: auto;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(232, 184, 63, .09),
            transparent 34%
        ),
        var(--navy-deep);

    color: #FFFFFF;
}

.brand {
    margin: 0 0 37px;
    padding: 0 10px;
    color: #FFFFFF;
    font-size: 25px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -1px;
}

.brand span {
    display: block;
    margin-top: 7px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar nav a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 45px;
    padding: 11px 13px;

    border: 1px solid transparent;
    border-radius: 10px;

    color: #C7D1DF;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.sidebar nav a:hover,
.sidebar nav a:focus-visible {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .065);
    color: #FFFFFF;
}

/* Dấu nhấn vàng tinh tế khi rê chuột */

.sidebar nav a:hover::before {
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: -1px;
    width: 3px;
    border-radius: 3px;
    background: var(--gold);
    content: "";
}

.side-note {
    margin-top: auto;
    padding: 18px 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #AEBBCD;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.side-note strong {
    color: #FFFFFF;
    font-size: 13px;
}

.side-note small {
    color: #AEBBCD;
}

.side-note a {
    display: inline-block;
    margin-top: 7px;
    color: var(--gold);
    font-weight: 600;
    text-decoration: none;
}

.side-note a:hover {
    color: #FFE6A0;
    text-decoration: underline;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main {
    min-height: 100vh;
    margin-left: 238px;
    padding: 32px 36px 25px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 27px;
}

header small {
    color: #8B95A5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

h1,
h2,
h3 {
    color: var(--navy);
    line-height: 1.3;
}

h1 {
    margin: 7px 0 0;
    font-size: clamp(27px, 2.5vw, 34px);
    font-weight: 800;
    letter-spacing: -1px;
}

h2 {
    font-size: clamp(27px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -1.2px;
}

h3 {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.2px;
}

p {
    margin-top: 0;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    padding: 7px 13px;

    border: 1px solid #F0DDA5;
    border-radius: 999px;
    background: var(--gold-light);
    color: var(--navy);

    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

/* =========================================================
   HERO — DASHBOARD
   ========================================================= */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    min-height: 205px;
    margin-bottom: 22px;
    padding: 32px 35px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 17px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(232, 184, 63, .14),
            transparent 28%
        ),
        linear-gradient(115deg, var(--navy-deep), var(--navy-mid));

    box-shadow: var(--shadow-md);
    color: #FFFFFF;
}

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

.hero .eyebrow {
    color: var(--gold);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2px;
}

.hero h2 {
    margin: 12px 0 10px;
    color: #FFFFFF;
}

.hero h2 em {
    color: var(--gold);
    font-style: normal;
}

.hero p {
    max-width: 550px;
    margin-bottom: 0;
    color: #C6D2E2;
    font-size: 13px;
}

/* =========================================================
   PANELS / CARDS
   ========================================================= */

.panel,
.stat {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.panel {
    margin-bottom: 22px;
    padding: 24px;
}

.grid-two {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, .8fr);
    gap: 22px;
    margin-bottom: 22px;
}

.grid-two > * {
    min-width: 0;
}

.grid-two .panel {
    margin-bottom: 0;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.panel-head h3 {
    margin-bottom: 0;
}

.panel-head a {
    color: var(--navy);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.panel-head a:hover {
    color: #987019;
}

/* =========================================================
   STATISTICS
   ========================================================= */

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 22px;
}

.stat {
    position: relative;
    padding: 23px 22px;
    overflow: hidden;
    transition:
        box-shadow .2s ease,
        transform .2s ease;
}

.stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Vạch vàng nhỏ, thay vì tô vàng cả thẻ */

.stat::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--gold);
    content: "";
}

.stat span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 550;
}

.stat strong {
    display: block;
    margin: 13px 0 5px;
    color: var(--navy);
    font-size: 31px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.8px;
    overflow-wrap: anywhere;
}

.stat small {
    color: var(--muted);
    font-size: 11px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 10px 17px;

    border: 1px solid var(--gold);
    border-radius: 9px;

    background: var(--gold);
    color: var(--navy-deep);

    font-size: 12px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.btn:hover,
button.btn:hover {
    border-color: var(--gold-hover);
    background: var(--gold-hover);
    box-shadow: 0 5px 14px rgba(215, 166, 43, .20);
    transform: translateY(-1px);
}

.btn:active,
button.btn:active {
    transform: translateY(0);
}

.btn.small {
    min-height: 33px;
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 11px;
}

/* =========================================================
   FORMS
   ========================================================= */

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

label {
    margin-top: 5px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
}

input,
textarea,
select {
    width: 100%;
    min-width: 0;
    padding: 11px 13px;

    border: 1px solid #DCE2EA;
    border-radius: 9px;

    background: #FFFFFF;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

input:hover,
textarea:hover,
select:hover {
    border-color: #BEC9D8;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--navy-mid);
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 53, 87, .09);
}

input::placeholder,
textarea::placeholder {
    color: #A0A9B7;
}

textarea {
    resize: vertical;
}

.form .btn {
    align-self: flex-start;
    margin-top: 7px;
}

.muted {
    color: var(--muted);
    font-size: 12px;
}

/* =========================================================
   TABLES
   ========================================================= */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

thead {
    background: #F3F5F8;
}

th {
    padding: 13px 12px;
    color: #667388;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .55px;
    white-space: nowrap;
}

th:first-child {
    border-radius: 7px 0 0 7px;
}

th:last-child {
    border-radius: 0 7px 7px 0;
}

td {
    padding: 14px 12px;
    border-bottom: 1px solid #EDF0F4;
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr {
    transition: background .15s ease;
}

tbody tr:hover {
    background: #FAFBFD;
}

td b {
    color: var(--navy);
    font-weight: 750;
}

td form {
    margin: 0;
}

td .form {
    gap: 7px;
}

td input,
td select {
    min-width: 110px;
    padding: 8px 9px;
    font-size: 12px;
}

.empty {
    padding: 30px 12px;
    color: var(--muted);
    text-align: center;
}

/* =========================================================
   STATUS LABELS
   ========================================================= */

.status {
    display: inline-flex;
    align-items: center;

    padding: 5px 10px;
    border: 1px solid #E3E8EF;
    border-radius: 999px;

    background: #F3F5F8;
    color: #58677D;

    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.status:empty {
    display: none;
}

/* =========================================================
   FLASH MESSAGES / WARNING
   ========================================================= */

.flash {
    margin-bottom: 18px;
    padding: 12px 15px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #FFFFFF;
    color: var(--text);
    font-size: 13px;
}

.flash.success {
    border-color: #C5E7D4;
    background: var(--success-bg);
    color: var(--success);
}

.flash.error {
    border-color: #F1C9CE;
    background: var(--danger-bg);
    color: var(--danger);
}

.warning {
    margin-top: 19px;
    padding: 15px 16px;

    border: 1px solid #F1E0B0;
    border-left: 4px solid var(--gold);
    border-radius: 9px;

    background: #FFFAED;
    color: #695523;
    font-size: 12px;
}

.safety ul {
    padding-left: 20px;
}

.safety li {
    margin-bottom: 9px;
    color: #526075;
}

.safety li::marker {
    color: #C99A25;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    margin-top: 30px;
    padding: 17px 0 4px;
    border-top: 1px solid var(--border);
    color: #929BAB;
    font-size: 11px;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% 20%,
            #FFFFFF 0,
            #F6F7FA 65%
        );
}

.login-brand {
    display: none;
}

.login-page .sidebar {
    display: none;
}

.login-page .main {
    min-height: 100vh;
    margin-left: 0;
    padding: 38px 36px 28px;
}

.login-page header {
    max-width: 1100px;
    margin: 0 auto 30px;
}

.login-page header h1 {
    margin-top: 8px;
}

.login-page .main > .panel,
.login-page .main > .form,
.login-page .main > section {
    width: min(100%, 480px);
    margin: 0 auto;
}

.login-page .main > footer {
    max-width: 1100px;
    margin: 38px auto 0;
}

.login-page .panel {
    padding: 27px;
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
}

.login-page input {
    min-height: 43px;
}

.login-page .btn {
    min-height: 43px;
}

/* =========================================================
   FOCUS / ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(232, 184, 63, .55);
    outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .main {
        padding-right: 25px;
        padding-left: 25px;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .sidebar {
        position: relative;
        width: 100%;
        min-height: auto;
        padding: 20px 17px;
    }

    .brand {
        margin-bottom: 19px;
        font-size: 23px;
    }

    .sidebar nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }

    .sidebar nav a {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .side-note {
        margin-top: 18px;
        padding-top: 13px;
    }

    .main {
        margin-left: 0;
        padding: 24px 16px;
    }

    header {
        align-items: flex-start;
        margin-bottom: 22px;
    }

    h1 {
        font-size: 27px;
    }

    .hero {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        padding: 25px;
    }

    .hero h2 {
        font-size: 29px;
    }

    .stats {
        gap: 12px;
    }

    .stat {
        padding: 19px 17px;
    }

    .stat strong {
        font-size: 27px;
    }

    .panel {
        padding: 18px;
    }

    .panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .login-brand {
        display: block;
        padding: 22px 20px 10px;
        background: var(--navy-deep);
    }

    .login-brand .brand {
        margin: 0;
        color: #FFFFFF;
    }

    .login-page .main {
        padding: 25px 17px;
    }

    .login-page header {
        margin-bottom: 24px;
    }

    .login-page .main > footer {
        margin-top: 28px;
    }
}

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

    header {
        flex-direction: column;
    }

    .pill {
        align-self: flex-start;
    }

    .hero {
        padding: 22px;
    }

    .hero h2 {
        font-size: 26px;
    }

    .login-page .panel {
        padding: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================
   LEWU TECH — DASHBOARD REFINEMENT
   ========================================= */

:root {
    --navy: #122642;
    --navy-deep: #0B192D;
    --navy-mid: #203B5D;
    --gold: #DDB44D;
    --gold-hover: #CDA33A;
    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --text: #263347;
    --muted: #7B8798;
    --border: #E7EAF0;
}

/* Vùng nội dung */
.main {
    padding: 34px 38px 28px;
    background: var(--bg);
}

header {
    margin-bottom: 28px;
}

header small {
    color: #8A95A5;
    font-size: 10px;
    letter-spacing: 2.2px;
}

header h1 {
    margin-top: 7px;
    font-size: 31px;
    letter-spacing: -0.8px;
}

/* Sidebar gọn, rõ ràng */
.sidebar {
    width: 238px;
    padding: 30px 17px 22px;
    background: var(--navy-deep);
}

.main {
    margin-left: 238px;
}

.brand {
    padding-left: 10px;
    margin-bottom: 42px;
    font-size: 25px;
}
.sidebar nav {
    gap: 7px;
}
.sidebar nav a {
    min-height: 44px;
    padding: 11px 13px;
    border-radius: 8px;
    color: #C8D2DF;
    font-size: 13px;
}
.sidebar nav a:hover {
    background: rgba(255, 255, 255, .075);
    color: #FFFFFF;
}
.side-note {
    padding: 20px 10px 3px;
    line-height: 1.8;
    color: #AAB7C9;
    font-size: 12px;
}
.side-note strong {
    display: inline-block;
    margin-bottom: 2px;
    color: #FFFFFF;
    font-size: 13px;
}
.side-note a {
    margin-top: 5px;
    color: #E8C56C;
}
.hero {
    min-height: 218px;
    padding: 35px 36px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    background:
        radial-gradient(
            ellipse at 95% 0%,
            rgba(221, 180, 77, .13),
            transparent 35%
        ),
        linear-gradient(115deg, #0B192D, #193452);
    box-shadow: 0 12px 28px rgba(11, 25, 45, .08);
}
.hero .eyebrow {
    color: #E8C56C;
    letter-spacing: 2px;
}
.hero h2 {
    margin-top: 13px;
    margin-bottom: 12px;
    font-size: clamp(28px, 2.5vw, 37px);
    line-height: 1.24;
}
.hero h2 em {
    color: #E8C56C;
}
.hero p {
    color: #D0D9E5;
    font-size: 13px;
    line-height: 1.8;
}
.btn,
button.btn {
    min-height: 42px;
    padding: 11px 18px;
    border: 1px solid var(--gold);
    border-radius: 8px;
    background: var(--gold);
    color: #15253B;
    font-size: 12px;
    font-weight: 750;
    box-shadow: none;
}
.btn:hover,
button.btn:hover {
    border-color: var(--gold-hover);
    background: var(--gold-hover);
    box-shadow: 0 5px 14px rgba(205, 163, 58, .16);
}
.stats {
    gap: 16px;
    margin-bottom: 23px;
}
.stat {
    padding: 23px 22px;
    border: 1px solid #E7EAF0;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(18, 38, 66, .025);
}
.stat::before {
    width: 3px;
    background: #DDB44D;
}
.stat span {
    color: #78869A;
    font-size: 12px;
}
.stat strong {
    margin-top: 12px;
    color: #122642;
    font-size: 32px;
    font-weight: 800;
}
.panel {
    padding: 24px;
    border: 1px solid #E7EAF0;
    border-radius: 13px;
    box-shadow: 0 3px 12px rgba(18, 38, 66, .025);
}
.panel-head {
    margin-bottom: 20px;
}
.panel-head h3,
.panel h3 {
    color: #172C49;
    font-size: 16px;
}
thead {
    background: #F2F4F7;
}
th {
    padding: 13px 12px;
    color: #6D7A8E;
    font-size: 10px;
    letter-spacing: .6px;
}
td {
    padding: 15px 12px;
    border-bottom: 1px solid #EDF0F4;
}
tbody tr:hover {background: #FAFBFC;}
.empty {
    padding: 32px 12px;
    color: #8490A1;
}
.status {
    border-color: #E3E8EF;
    background: #F3F5F8;
    color: #58677D;
}
footer {
    margin-top: 28px;
    padding-top: 18px;
    border-top-color: #E6E9EF;
    color: #8A95A5;
    font-size: 11px;
}

@media (max-width: 1200px) {
    .main {
        padding-right: 25px;
        padding-left: 25px;
    }
}
@media (max-width: 760px) {
    .sidebar {width: 100%; padding: 20px 17px;}
    .main {margin-left: 0; padding: 24px 16px;}
    .hero {padding: 25px;}
}
.consent-yes,
.status-eligible {
    border-color: #C8E8D5;
    background: #EDF8F1;
    color: #176B50;
}
.consent-no,
.status-blocked {
    border-color: #E5E8EE;
    background: #F2F4F7;
    color: #697588;
}
.link-btn {
    padding: 5px 0;
    border: none;
    background: transparent;
    color: #9A6D13;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}
.link-btn:hover {
    color: #684707;
    text-decoration: underline;
}
.check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 8px 0;
    color: #455268;
    font-weight: 500;
}
.check input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-top: 4px;
    accent-color: #DDB44D;
}
.contacts-layout {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.contacts-forms {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 22px;
    margin-bottom: 0;
}
.contacts-forms .panel {
    padding: 25px;
    border-radius: 15px;
}
.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px;
}
.section-heading h3,
.contact-list-heading h3 {
    margin: 5px 0 6px;
    color: #122642;
    font-size: 17px;
}
.section-heading p,
.contact-list-heading p {margin-bottom: 0;}
.section-eyebrow {
    color: #AD852B;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}
.contact-form {gap: 15px;}
.contact-form .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-form .field label {margin: 0;}
.contact-form .field input {min-height: 43px; padding: 10px 12px;}
.required {color: #B78620;}
.consent-control {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 3px 0 0;
    padding: 13px;
    border: 1px solid #E8EAF0;
    border-radius: 10px;
    background: #FAFBFD;
    cursor: pointer;
}
.consent-control input[type="checkbox"] {
    flex: 0 0 17px;
    width: 17px;
    min-width: 17px;
    height: 17px;
    margin: 3px 0 0;
    padding: 0;
    accent-color: #DDB44D;
    cursor: pointer;
}
.consent-control span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.consent-control strong {
    color: #243650;
    font-size: 12px;
    font-weight: 700;
}
.consent-control small {
    color: #7B8798;
    font-size: 11px;
    font-weight: 400;
}
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}
.import-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    height: 44px;
    border: 1px solid #F0DDA5;
    border-radius: 12px;
    background: #FFF7E2;
    color: #8A681A;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .5px;
}
.csv-info {
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid #E7EAF0;
    border-radius: 10px;
    background: #F8F9FB;
}
.csv-info strong {color: #243650; font-size: 12px;}
.csv-info p {
    margin: 8px 0 0;
    color: #68768A;
    font-size: 12px;
    line-height: 1.8;
}
.csv-info code {
    padding: 2px 5px;
    border-radius: 4px;
    background: #E9EDF3;
    color: #263C5A;
    font-size: 11px;
}
.import-form {gap: 10px;}
.import-form input[type="file"] {padding: 9px; background: #FFFFFF; font-size: 12px;}
.import-form .btn {align-self: flex-start;}
.import-note {margin: 17px 0 0; line-height: 1.7;}
.contact-list-panel {padding: 25px; overflow: hidden;}
.contact-list-heading {align-items: center; margin-bottom: 20px;}
.contact-count {
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid #E8D7A5;
    border-radius: 999px;
    background: #FFF8E7;
    color: #80621D;
    font-size: 11px;
    font-weight: 750;
}
.table-wrap {width: 100%; overflow-x: auto;}
.contacts-table {min-width: 850px;}
.contacts-table th {padding: 13px 12px; background: #F4F6F9;}
.contacts-table td {padding: 15px 12px;}
.contact-identity {min-width: 190px;}
.contact-identity strong,
.contact-identity span {display: block;}
.contact-identity strong {color: #1B304C; font-size: 12px; overflow-wrap: anywhere;}
.contact-identity span {margin-top: 4px; color: #8993A2; font-size: 11px;}
.contact-actions {display: flex; align-items: center; gap: 12px;}
.contact-actions form {margin: 0;}
.contact-actions button {white-space: nowrap;}
.delete-btn {
    padding: 5px 9px;
    border: 1px solid #F0D4D7;
    border-radius: 7px;
    background: #FFF4F4;
    color: #B93845;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.delete-btn:hover {border-color: #E5B5BA; background: #FFE7E8;}
.contacts-table .empty {padding: 38px 15px; text-align: center;}
.contacts-table .empty strong {color: #243650; font-size: 13px;}
.contacts-table .empty p {margin: 5px 0 0; color: #8792A2; font-size: 12px;}
/* Responsive */
@media (max-width: 1000px) {
    .contacts-forms {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .contacts-forms .panel,
    .contact-list-panel {
        padding: 19px;
    }
    .contact-list-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .consent-control {
        padding: 12px;
    }
}

/* Customer management refresh */
.contacts-page,.contact-form-page{display:flex;flex-direction:column;gap:18px}
.contacts-toolbar,.contact-form-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.contacts-toolbar h2,.contact-form-toolbar h2{margin:5px 0 6px;color:#122642;font-size:25px}
.contacts-toolbar p,.contact-form-toolbar p{margin:0}
.contacts-toolbar-actions{display:flex;gap:10px;flex-wrap:wrap}
.contact-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.contact-stat{background:#fff;border:1px solid #e8edf3;border-radius:13px;padding:16px 18px;box-shadow:0 4px 14px rgba(15,35,60,.035)}
.contact-stat span{display:block;color:#78869a;font-size:11px;font-weight:650}
.contact-stat strong{display:block;color:#142b48;font-size:25px;margin-top:7px}
.contact-list-panel{padding:22px 24px;border:1px solid #e8edf3;border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(15,35,60,.04)}
.contact-list-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px}
.contact-list-heading h3{margin:0 0 5px;font-size:17px;color:#142b48}
.contact-list-heading p{margin:0;max-width:720px}
.contact-filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:14px;margin-bottom:16px;border:1px solid #e9edf2;border-radius:11px;background:#f8fafc}
.contact-filters>div{display:flex;flex-direction:column;gap:6px;min-width:175px}
.contact-filters .contact-search{flex:1;min-width:240px}
.contact-filters label,.page-size label{font-size:11px;font-weight:700;color:#53647a}
.contact-filters input,.contact-filters select,.page-size select{min-height:39px;border:1px solid #dce3ec;border-radius:8px;background:#fff;padding:8px 10px;color:#243650;font:inherit;font-size:12px}
.contact-filters .btn{min-height:39px;display:inline-flex;align-items:center;justify-content:center}
.contact-identity strong{font-size:12px}.contact-identity span{font-size:11px}
.contact-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:15px}
.page-size,.pagination-links{display:flex;align-items:center;gap:8px;color:#64748b;font-size:11px}
.page-size select{min-height:32px;padding:5px 8px}
.pagination-summary{color:#7b8798;font-size:11px}
.pagination-links a,.pagination-links span{padding:7px 10px;border:1px solid #e2e8f0;border-radius:7px;background:#fff;color:#30445f;text-decoration:none;font-size:11px}
.pagination-links .disabled{color:#aab3bf;background:#f7f8fa}
.contact-form-card{max-width:850px;padding:24px;border:1px solid #e8edf3;border-radius:15px;background:#fff}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-form-card .contact-form{gap:18px}
@media(max-width:900px){.contact-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.contact-stats{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.contact-list-panel{padding:16px}.contact-pagination{align-items:flex-start;flex-direction:column}.contact-list-heading{align-items:flex-start;flex-direction:column}}


/* Add-customer modal */
.contact-modal{width:min(680px,calc(100vw - 28px));max-width:680px;max-height:calc(100vh - 32px);padding:24px;border:1px solid #e4eaf1;border-radius:16px;background:#fff;color:#142b48;box-shadow:0 24px 80px rgba(7,22,42,.28);}
.contact-modal::backdrop{background:rgba(7,20,38,.58);backdrop-filter:blur(2px);}
.contact-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;}
.contact-modal-header h3{margin:5px 0 6px;font-size:21px;color:#142b48;}
.contact-modal-header p{margin:0;color:#718096;font-size:12px;}
.modal-close{width:34px;height:34px;flex:0 0 34px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;color:#52647a;font-size:23px;line-height:1;cursor:pointer;}
.contact-modal .contact-form{display:flex;flex-direction:column;gap:18px;}
.contact-modal .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.contact-modal .field{display:flex;flex-direction:column;gap:7px;}
.contact-modal .field label{font-size:12px;font-weight:650;color:#34465e;}
.contact-modal .field input{width:100%;min-height:42px;padding:10px 12px;border:1px solid #dce3ec;border-radius:8px;background:#fff;color:#243650;font:inherit;font-size:13px;box-sizing:border-box;}
.contact-modal .field input:focus{outline:2px solid rgba(37,99,235,.15);border-color:#7195c7;}
.contact-modal .form-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:4px;}
@media(max-width:560px){.contact-modal{padding:18px;}.contact-modal .form-grid{grid-template-columns:1fr;gap:12px;}.contact-modal-header h3{font-size:19px;}}