:root {
    --blue: #4da2ef;
    --blue-dark: #2390ea;
    --sidebar-blue: linear-gradient(180deg, #56a7ef 0%, #2b92e8 100%);
    --page-bg: #eef3f8;
    --panel-bg: #ffffff;
    --panel-soft: #f6f8fb;
    --line: #e6ebf2;
    --text: #273241;
    --text-soft: #7c8798;
    --danger: #ff6b62;
    --success: #39b37c;
    --radius: 12px;
    --shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
    --font-display: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-display);
    color: var(--text);
}

body.login-page {
    background: linear-gradient(135deg, #70b7f6 0%, #1d92ec 100%);
}

body.admin-page {
    background: var(--page-bg);
}

[hidden] {
    display: none !important;
}

button,
input,
select {
    font: inherit;
}

.page-shell {
    min-height: 100vh;
}

.container {
    width: 100%;
}

.simple-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.simple-login-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 12px;
    padding: 28px 22px 22px;
    box-shadow: 0 18px 40px rgba(28, 110, 189, 0.22);
    text-align: center;
}

.login-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.login-logo {
    width: 52px;
    height: 52px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(47, 145, 233, 0.24));
}

.login-title {
    margin: 0 0 18px;
    font-size: 28px;
    font-weight: 700;
    color: #2d3540;
}

.form-grid {
    display: grid;
    gap: 12px;
}

.field {
    display: grid;
}

.field input {
    width: 100%;
    height: 40px;
    border: 1px solid #dfe5ee;
    border-radius: 4px;
    padding: 0 12px;
    background: #fff;
    color: var(--text);
    outline: none;
}

.field input:focus,
.toolbar-input:focus {
    border-color: #66aef3;
    box-shadow: 0 0 0 3px rgba(77, 162, 239, 0.12);
}

.btn-row {
    display: flex;
}

.btn {
    height: 38px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(90deg, #69b2f5, #218fe8);
}

.btn-secondary {
    color: #536172;
    background: #fff;
    border: 1px solid #d8e0ea;
}

.login-status {
    min-height: 20px;
    font-size: 12px;
    color: #8d98a8;
    text-align: center;
}

.login-status.success {
    color: var(--success);
}

.login-status.error {
    color: #ef5c57;
}

.admin-page .page-shell {
    min-height: 100vh;
}

.admin-layout {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar-panel {
    background: var(--sidebar-blue);
    color: #fff;
    padding: 18px 0 22px;
}

.sidebar-top {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 6px 14px 18px;
}

.sidebar-logo {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
}

.sidebar-brand {
    font-size: 15px;
    font-weight: 600;
}

.menu-nav {
    display: grid;
    gap: 10px;
    padding: 0 10px;
}

.menu-group {
    display: grid;
    gap: 8px;
}

.menu-group-title {
    display: none;
}

.menu-button {
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.96);
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}

.menu-button:hover,
.menu-button.active {
    background: #ffffff;
    color: #2563aa;
    font-weight: 600;
}

.content-panel {
    min-width: 0;
    background: #edf2f7;
    padding: 0;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 14px;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.page-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #39424e;
}

.page-desc {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-soft);
}

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

.header-username {
    font-size: 13px;
    color: #7e8897;
    white-space: nowrap;
}

.header-username strong {
    color: #4a5665;
    font-weight: 600;
}

.content-header .btn-primary {
    height: 34px;
    padding: 0 14px;
    background: #ff7a67;
}

.status-box {
    margin: 0 18px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    background: #edf5ff;
    color: #6480a2;
    border: 1px solid #d8e6f8;
}

.status-box.success {
    background: #edf8f2;
    border-color: #d9efdf;
    color: #50896b;
}

.status-box.error {
    background: #fff2f0;
    border-color: #ffd9d3;
    color: #cf6359;
}

.section-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

.admin-main-card {
    margin: 0 18px;
    display: grid;
    gap: 14px;
}

.toolbar-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.finance-order-action-tip {
    width: 100%;
    margin-top: 2px;
    color: #8b5e00;
    font-size: 12px;
    line-height: 1.5;
}

.toolbar-input {
    min-width: 180px;
    height: 36px;
    border: 1px solid #d9e2ec;
    border-radius: 6px;
    background: #fff;
    padding: 0 12px;
    color: var(--text);
    outline: none;
}

.finance-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 0.88fr) minmax(0, 0.88fr) minmax(360px, 1.36fr);
    gap: 12px;
}

.finance-summary-card {
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid #dfe8f5;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.finance-summary-action-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.finance-summary-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
}

.finance-summary-actions .btn {
    min-width: 0;
    flex: 0 0 auto;
}

.finance-summary-actions .finance-order-action-tip {
    flex-basis: 100%;
    width: 100%;
    margin-top: 0;
}

.finance-summary-label {
    font-size: 13px;
    color: #66768a;
}

.finance-summary-value {
    margin-top: 10px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: #235db6;
}

.finance-summary-foot {
    margin-top: 8px;
    font-size: 12px;
    color: #7b8798;
}

.module-tips {
    padding: 10px 12px;
    border-radius: 8px;
    background: #f5f8fb;
    color: #7c8798;
    font-size: 13px;
    line-height: 1.6;
}

.table-wrap {
    overflow: auto;
    border: 1px solid #edf1f5;
    border-radius: 10px;
    background: #fff;
}

.designer-panel[hidden] {
    display: none !important;
}

.designer-panel {
    display: grid;
}

.designer-tabbar-layout {
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    max-height: calc(100vh - 180px);
}

.designer-tabbar-preview-card,
.designer-tabbar-settings-card {
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #fff;
    padding: 18px;
    box-sizing: border-box;
}

.designer-tabbar-settings-card {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}

.designer-tabbar-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.designer-tabbar-phone-shell {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 8px 0 0;
}

.designer-tabbar-phone-device {
    width: 286px;
    height: 566px;
    border: 2px solid #d7dce5;
    border-radius: 36px;
    background: #f5f7fb;
    overflow: hidden;
    box-shadow: inset 0 0 0 6px #fff;
    position: relative;
    display: grid;
    grid-template-rows: 26px 46px 1fr auto auto;
}

.designer-tabbar-phone-status {
    background: #202226;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    font-size: 10px;
    letter-spacing: 0.3px;
}

.designer-tabbar-phone-title {
    background: #202226;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

.designer-tabbar-phone-content {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c2c8d1;
    font-size: 18px;
    background: #f7f8fb;
}

.designer-tabbar-phone-tip {
    padding: 10px 14px 8px;
    text-align: center;
    color: #e36e6a;
    font-size: 12px;
    line-height: 1.5;
}

.designer-tabbar-phone-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #e9edf3;
    min-height: 72px;
}

.designer-tabbar-phone-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    color: #b2bcc8;
    font-size: 12px;
}

.designer-tabbar-phone-item {
    border: 0;
    background: transparent;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    padding: 8px 4px;
    cursor: pointer;
}

.designer-tabbar-phone-item span {
    font-size: 12px;
    line-height: 1;
}

.designer-tabbar-icon {
    width: 24px;
    height: 24px;
    border: 1.5px solid currentColor;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    background: transparent;
    box-sizing: border-box;
}

.designer-tabbar-icon.is-fill {
    background: currentColor;
    color: #fff !important;
}

.designer-tabbar-form {
    display: grid;
    gap: 14px;
}

.designer-tabbar-count-row,
.designer-tabbar-sync-row,
.designer-tabbar-item-head,
.designer-tabbar-color-row,
.designer-tabbar-link-row,
.designer-tabbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.designer-tabbar-count-row {
    align-items: flex-start;
    padding: 4px 0 2px;
}

.designer-tabbar-count-label,
.designer-tabbar-sync-label,
.designer-tabbar-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #2f3c4d;
}

.designer-tabbar-count-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.designer-tabbar-item-editor {
    border: 1px solid #e9eef5;
    border-radius: 12px;
    background: #fbfdff;
    padding: 14px;
    display: grid;
    gap: 10px;
    cursor: pointer;
}

.designer-tabbar-item-editor:hover {
    border-color: #d6e2f0;
}

.designer-tabbar-item-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.designer-tabbar-item-grid.is-reference {
    grid-template-columns: 1fr;
}

.designer-tabbar-inline-editor-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 5em;
    align-items: start;
}

.designer-tabbar-color-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.designer-tabbar-field,
.designer-tabbar-color-field {
    display: grid;
    gap: 8px;
}

.designer-tabbar-field > span,
.designer-tabbar-color-field > span,
.designer-tabbar-link-text,
.designer-tabbar-radio {
    font-size: 13px;
    color: #5d6c7d;
}

.designer-tabbar-field-full {
    grid-column: 1 / -1;
}

.designer-tabbar-inline-field {
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.designer-tabbar-inline-field > span {
    white-space: nowrap;
}

.designer-tabbar-name-field .toolbar-input {
    width: 7em;
    max-width: 7em;
}

.designer-tabbar-link-field {
    grid-template-columns: 60px minmax(0, 1fr);
}

.designer-tabbar-link-row {
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.designer-tabbar-select {
    width: 140px;
    flex: 0 0 140px;
}

.designer-tabbar-link-text {
    white-space: nowrap;
    color: #7c8b9b;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.designer-tabbar-color-row .toolbar-input {
    width: 160px;
    flex: 0 0 160px;
}

.designer-tabbar-color-picker {
    width: 42px;
    min-width: 42px;
    height: 38px;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    cursor: pointer;
}

.designer-tabbar-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.designer-tabbar-icon-row {
    gap: 10px;
}

.designer-tabbar-icon-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 2em;
    justify-content: start;
}

.designer-tabbar-icon-field {
    display: grid;
    gap: 8px;
}

.designer-tabbar-icon-control {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.designer-tabbar-icon-preview-box {
    width: 48px;
    height: 48px;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.designer-tabbar-icon-image {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    flex: 0 0 24px;
}

.designer-tabbar-icon-image img,
.designer-tabbar-icon-preview-box img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
    border-radius: 0;
    display: block;
}

.designer-tabbar-icon-actions {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.designer-tabbar-icon-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.designer-tabbar-item-head .btn:disabled,
.designer-tabbar-item-head .btn:disabled:hover {
    cursor: pointer;
    transform: none;
    opacity: 0.72;
}

.designer-tabbar-actions {
    justify-content: flex-start;
    padding-top: 4px;
}

.designer-list-grid {
    --designer-page-card-width: 380px;
    --designer-page-preview-width: 350px;
    --designer-page-preview-height: 588px;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--designer-page-card-width));
    gap: 12px;
    justify-content: start;
    align-items: start;
}

.designer-page-card {
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    background: #fff;
    width: var(--designer-page-card-width);
    padding: 8px 8px 10px;
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.designer-page-card-head,
.designer-page-card-actions,
.designer-editor-header,
.designer-preview-toolbar,
.designer-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.designer-page-card-title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: #243140;
}

.designer-page-card-meta,
.designer-panel-sub,
.designer-setting-label,
.designer-library-desc,
.designer-selected-component {
    font-size: 11px;
    color: #8b95a5;
}

.designer-home-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eaf5ff;
    color: #2788df;
    font-size: 12px;
}

.designer-page-card-phone {
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.designer-card-phone-shell {
    width: var(--designer-page-preview-width);
    max-width: var(--designer-page-preview-width);
    height: var(--designer-page-preview-height);
    min-height: var(--designer-page-preview-height);
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr);
    border-radius: 36px;
    background: #f6f6f6;
    border: 2px solid #d7dce5;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 6px #ffffff;
}

.designer-card-phone-shell .designer-preview-block {
    cursor: default;
}

.designer-page-card-head {
    align-items: flex-start;
    gap: 8px;
}

.designer-page-card-head > div:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.designer-page-card-actions {
    justify-content: flex-start;
    padding-top: 2px;
}

.designer-card-top,
.designer-phone-topbar {
    height: 52px;
    background: #ff4b47;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    font-size: 12px;
}

.designer-phone-topbar {
    justify-content: space-between;
}

.designer-card-search,
.designer-phone-search {
    margin: 8px 8px 0;
    height: 34px;
    border-radius: 999px;
    background: #f3f3f3;
    color: #b2bac5;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 12px;
}

.designer-preview-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.designer-preview-search-box {
    margin: 0;
    flex: 1;
    padding: 0 12px;
    gap: 8px;
}

.designer-preview-search-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e2e2e2;
    color: #9a9a9a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex: 0 0 18px;
}

.designer-preview-search-input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #666666;
    font-size: 12px;
}

.designer-preview-search-input::placeholder {
    color: #b1b1b1;
}

.designer-preview-search-button {
    min-width: 56px;
    height: 34px;
    border: none;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.designer-card-body,
.designer-phone-content {
    display: grid;
    gap: 8px;
    padding: 8px 8px 14px;
    box-sizing: border-box;
    align-content: start;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-y: hidden;
    overflow-x: hidden;
    background: inherit;
}

.designer-phone-content.is-scrollable {
    overflow-y: auto;
}

.designer-phone-content--contact {
    gap: 6px;
    padding-bottom: 10px;
    grid-template-rows: auto auto minmax(180px, 1fr);
}

.designer-phone-empty-state {
    min-height: calc(100% - 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 2px;
}

.designer-phone-empty-card {
    width: 100%;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f7f9fc 100%);
    border: 1px solid #e7edf5;
    box-shadow: 0 10px 24px rgba(31, 69, 120, 0.06);
    padding: 14px 12px 12px;
    display: grid;
    gap: 12px;
}

.designer-phone-empty-hero {
    height: 88px;
    border-radius: 14px;
    background: linear-gradient(135deg, #edf2f8 0%, #dde7f3 100%);
}

.designer-phone-empty-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.designer-phone-empty-grid span {
    display: block;
    height: 58px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f1f5fa 0%, #e5edf7 100%);
}

.designer-phone-empty-copy {
    display: grid;
    gap: 5px;
    text-align: center;
}

.designer-phone-empty-copy strong {
    color: #2b3645;
    font-size: 14px;
    line-height: 1.4;
}

.designer-phone-empty-copy span {
    color: #7f8b9d;
    font-size: 11px;
    line-height: 1.6;
}

.designer-phone-empty-cta {
    border-radius: 12px;
    background: #eef5ff;
    color: #5d7aa4;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
    padding: 8px 10px;
}

.designer-contact-hero {
    border-radius: 12px;
    background: linear-gradient(135deg, #111111 0%, #3d3d3d 100%);
    padding: 12px 12px 10px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.designer-contact-hero-desc {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
}

.designer-contact-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.designer-contact-summary-item {
    border-radius: 10px;
    background: #ffffff;
    padding: 9px 10px;
    font-size: 10px;
    color: #666666;
    line-height: 1.45;
    display: grid;
    gap: 3px;
}

.designer-contact-summary-item.is-full {
    grid-column: 1 / -1;
}

.designer-contact-summary-item strong {
    color: #111111;
    font-size: 10px;
}

.designer-contact-summary-item span {
    display: block;
    word-break: break-word;
}

.designer-contact-detail-panel {
    border-radius: 12px;
    background: #ffffff;
    padding: 12px;
    display: grid;
    grid-template-rows: auto auto auto auto 1fr auto;
    gap: 8px;
    min-height: 0;
}

.designer-contact-detail-title {
    font-size: 12px;
    font-weight: 600;
    color: #111111;
}

.designer-contact-detail-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    font-size: 10px;
    color: #666666;
    line-height: 1.5;
}

.designer-contact-detail-row.is-block {
    grid-template-columns: 1fr;
}

.designer-contact-detail-row span {
    color: #8b95a5;
}

.designer-contact-detail-row strong {
    color: #222222;
    font-weight: 500;
    word-break: break-word;
}

.designer-contact-detail-note {
    align-self: end;
    border-radius: 10px;
    background: #f6f7fb;
    color: #6b7481;
    font-size: 10px;
    line-height: 1.5;
    padding: 10px;
}

.designer-card-image-block,
.designer-card-product-block,
.designer-card-text-block {
    border-radius: 10px;
}

.designer-card-image-block {
    height: 78px;
    background: linear-gradient(135deg, #dfe6ef, #cfd8e5);
}

.designer-card-product-block {
    height: 64px;
    background: linear-gradient(135deg, #6e9dfd, #65d6f7);
}

.designer-card-text-block {
    height: 24px;
    background: #eceff4;
}

.designer-card-empty {
    height: 120px;
    border-radius: 10px;
    border: 1px dashed #d2dae5;
    color: #9aa5b5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.designer-editor-backdrop {
    position: fixed;
    inset: 0;
    padding: 0;
    background: rgba(38, 49, 63, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}

.designer-editor-card {
    position: relative;
    width: 1200px;
    max-width: 1200px;
    height: 900px;
    max-height: 900px;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 20px;
    border-radius: 0;
    margin: 0 auto;
    overflow: hidden;
    background: #efefef;
    box-shadow: 0 10px 26px rgba(31, 45, 61, 0.12);
}

.designer-editor-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: 250px 480px 320px;
    gap: 0;
    justify-content: center;
    overflow: hidden;
}

.designer-components-panel,
.designer-preview-panel,
.designer-settings-panel {
    min-height: 0;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 0;
}

.designer-component-library,
.designer-settings-scroll {
    overflow: auto;
    min-height: 0;
}

.designer-components-panel,
.designer-settings-panel {
    display: grid;
    grid-template-rows: auto auto 1fr;
}

.designer-editor-header {
    min-height: 44px;
    padding: 0 12px 0 8px;
    border-bottom: 1px solid #e5e5e5;
    background: #f8f8f8;
}

.designer-editor-header .panel-title {
    margin: 0;
    font-size: 14px;
    color: #444;
    font-weight: 600;
}

.designer-editor-header .panel-desc {
    display: none;
}

.designer-editor-actions {
    gap: 8px;
}

.designer-editor-actions .btn {
    height: 28px;
    border-radius: 3px;
    padding: 0 12px;
    font-size: 12px;
}

.designer-editor-actions .btn-secondary {
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #666;
}

.designer-editor-actions .btn-primary {
    background: #2d8cf0;
}

.designer-editor-actions .modal-close {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background: #f1f1f1;
    font-size: 18px;
}

.designer-panel-head {
    padding: 14px 14px 10px;
    border-bottom: 1px solid #ededed;
}

.designer-panel-head strong {
    display: block;
    font-size: 13px;
    color: #333;
}

.designer-panel-sub {
    margin-top: 4px;
    color: #999;
}

.designer-component-search {
    margin: 10px 12px 0;
    min-width: 0;
    height: 30px;
    border-radius: 2px;
    background: #fafafa;
}

.designer-component-library {
    margin-top: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-content: start;
}

.designer-library-item {
    border: 1px solid #e8edf3;
    border-radius: 2px;
    background: #fff;
    padding: 12px 12px;
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px 12px;
    align-items: center;
    cursor: pointer;
    min-height: 64px;
    text-align: left;
}

.designer-library-item:hover {
    border-color: #6ba9ff;
    box-shadow: none;
}

.designer-library-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #edf4ff;
    color: #4f8fe9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.designer-library-name {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    text-align: left;
}

.designer-library-desc {
    line-height: 1.4;
    text-align: left;
    font-size: 11px;
    color: #a0a7b1;
    grid-column: 2;
}

.designer-preview-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    min-width: 0;
    background: #efefef;
    border-left: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;
}

.designer-phone-shell {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow: auto;
    padding: 16px;
    box-sizing: border-box;
}

.designer-preview-toolbar {
    width: 100%;
    min-height: 42px;
    padding: 0 18px;
    border-bottom: 1px solid #e7e7e7;
    background: #efefef;
}

.designer-device-label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.designer-selected-component {
    color: #9aa0a9;
}

.designer-preview-block {
    position: relative;
    border: 1px dashed transparent;
    border-radius: 2px;
    padding: 3px;
    cursor: move;
    min-width: 0;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.designer-preview-block.dragging {
    opacity: 0.72;
}

.designer-preview-block.drag-over {
    border-color: #5ca2ff;
    background: #f2f8ff;
    box-shadow: 0 0 0 2px rgba(92, 162, 255, 0.14);
}

.designer-preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    min-width: 44px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.72);
    color: #fff;
    font-size: 11px;
    line-height: 24px;
    padding: 0 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s ease, background 0.18s ease;
}

.designer-preview-block:hover .designer-preview-remove {
    opacity: 1;
}

.designer-preview-remove:hover {
    background: rgba(209, 67, 67, 0.92);
}

.designer-card-list-editor {
    display: grid;
    gap: 10px;
}

.designer-card-item-editor {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    background: #fafcff;
    cursor: move;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.designer-card-item-editor.dragging {
    opacity: 0.72;
}

.designer-card-item-editor.drag-over {
    border-color: #5ca2ff;
    background: #f2f8ff;
    box-shadow: 0 0 0 2px rgba(92, 162, 255, 0.14);
}

.designer-card-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.designer-card-item-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.designer-card-item-title {
    font-size: 12px;
    font-weight: 600;
    color: #425466;
}

.designer-card-item-drag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #edf4ff;
    color: #3f77cc;
    font-size: 12px;
    white-space: nowrap;
}

.designer-card-item-sort {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.designer-card-item-sort.is-compact {
    flex-wrap: nowrap;
}

.designer-card-item-sort.is-compact .btn-xs {
    min-height: 24px;
    padding: 0 8px;
    font-size: 11px;
}

.designer-card-item-sort .btn:disabled,
.designer-card-item-sort .btn:disabled:hover {
    cursor: pointer;
}

.btn-xs {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

.readonly-field {
    display: flex;
    align-items: center;
    min-height: 36px;
    background: #f6f8fb;
    color: #425466;
}

.designer-preview-block.active {
    border-color: #5ca2ff;
    background: rgba(92, 162, 255, 0.08);
}

.designer-phone-preview {
    width: min(100%, 360px);
    max-width: 360px;
    height: 782px;
    min-height: 782px;
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr);
    overflow: hidden;
    border: 2px solid #d7dce5;
    border-radius: 36px;
    box-shadow: inset 0 0 0 6px #ffffff;
    background: #f6f6f6;
    flex: 0 0 auto;
}

.designer-phone-preview--contact {
    width: min(100%, 360px);
    max-width: 360px;
}

.designer-preview-image {
    background: linear-gradient(135deg, #e6edf4, #d2dae5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #7f8b98;
    font-size: 12px;
}

.designer-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.designer-image-upload {
    display: grid;
    gap: 10px;
}

.designer-image-upload-preview {
    height: 120px;
    border-radius: 8px;
    border: 1px dashed #d9e2ef;
    background: #f8fbff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #97a3b6;
    font-size: 12px;
}

.designer-image-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.designer-image-upload-actions {
    display: grid;
    gap: 8px;
}

.designer-image-upload-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.designer-upload-input {
    display: none;
}

.designer-image-upload-status {
    font-size: 12px;
    color: #7d8998;
}

.designer-image-upload-status.success {
    color: #2d8a53;
}

.designer-image-upload-status.error {
    color: #d14343;
}

.designer-preview-products {
    display: grid;
    gap: 6px;
}

.designer-preview-products-scroll {
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 6px) / 2);
    overflow-x: auto;
}

.designer-preview-products.layout-single {
    grid-template-columns: 1fr;
}

.designer-preview-products.layout-double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.designer-preview-products.layout-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.designer-preview-products.layout-waterfall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.designer-preview-product-card {
    border-radius: 2px;
    background: #fff;
    padding: 4px;
    box-shadow: none;
    display: grid;
    gap: 4px;
}

.designer-preview-product-image {
    width: 100%;
    height: 150px;
    border-radius: 2px;
    background: linear-gradient(135deg, #6d92ff, #60d7f7);
    overflow: hidden;
}

.designer-product-layout.no-sidebar .designer-preview-product-image {
    height: 230px;
}

.designer-preview-product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.designer-preview-product-name {
    font-size: 12px;
    color: #39424e;
    line-height: 1.5;
}

.designer-preview-product-meta {
    font-size: 11px;
    color: #8a95a5;
    line-height: 1.4;
}

.designer-preview-product-price {
    font-size: 13px;
    color: #ff655f;
    font-weight: 700;
}

.designer-product-layout {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    min-height: 220px;
}

.designer-product-layout.no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}

.designer-product-sidebar {
    border-radius: 12px;
    background: #f1f1f1;
    padding: 8px 0;
    display: grid;
    align-content: start;
    gap: 2px;
}

.designer-product-category {
    padding: 8px 4px;
    color: #666;
    font-size: 11px;
    text-align: center;
    line-height: 1.35;
}

.designer-product-category.is-active {
    background: #fff;
    color: #111;
    border-left: 3px solid #111;
    padding-left: 1px;
}

.designer-product-main {
    min-width: 0;
}

.designer-product-empty {
    min-height: 160px;
    border: 1px dashed #d6dde8;
    border-radius: 12px;
    background: #fff;
    color: #97a3b6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
}

.designer-preview-text {
    border-radius: 10px;
    background: #fff;
    padding: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.designer-settings-scroll {
    display: grid;
    gap: 16px;
    padding: 12px;
    background: #fff;
}

.designer-settings-section {
    border-radius: 0;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #efefef;
    padding: 0 0 14px;
}

.designer-settings-title {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

.designer-settings-form {
    display: grid;
    gap: 10px;
}

.designer-setting-item {
    display: grid;
    gap: 5px;
}

.designer-setting-item .toolbar-input {
    min-width: 0;
    height: 30px;
    border-radius: 2px;
    background: #fafafa;
}

.designer-setting-item select.toolbar-input,
.designer-setting-item textarea.toolbar-input {
    background: #fff;
}

.designer-check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #495667;
}

.designer-textarea {
    min-height: 96px;
    padding: 10px 12px;
    resize: vertical;
}

.designer-remove-btn {
    width: 100%;
}

.designer-inline-grid {
    display: grid;
    gap: 8px;
}

.designer-inline-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.designer-inline-grid-caption {
    margin-top: 6px;
}

.designer-inline-grid-caption span {
    font-size: 12px;
    color: #8b95a5;
    line-height: 1.4;
}

.designer-inline-stack-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.designer-inline-stack-field .toolbar-input {
    min-width: 0;
}

.designer-component-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.designer-component-action-row .btn {
    width: 100%;
    height: 36px;
}

.designer-remove-btn.is-inline,
.designer-component-save-btn.is-inline {
    width: 100%;
}

.designer-link-picker-field {
    display: grid;
    gap: 8px;
}

.designer-link-picker-value {
    min-height: 38px;
    justify-content: flex-start;
    text-align: left;
}

.designer-link-modal-card {
    width: min(560px, calc(100vw - 48px));
}

.designer-link-modal-body {
    display: grid;
    gap: 16px;
    padding: 0 20px 20px;
}

.designer-link-modal-list {
    display: grid;
    gap: 10px;
    max-height: min(420px, calc(100vh - 220px));
    overflow: auto;
}

.designer-link-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
    color: #243140;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.designer-link-option:hover {
    border-color: #8dbaf1;
    background: #f7fbff;
}

.designer-link-option.is-active {
    border-color: #5a9cf1;
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px rgba(90, 156, 241, 0.08);
}

.designer-link-option strong {
    font-size: 14px;
}

.designer-link-option span {
    font-size: 12px;
    color: #7b8796;
}

.designer-component-save-btn {
    width: 100%;
    height: 36px;
}

.data-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
    vertical-align: top;
    font-size: 13px;
}

.data-table th {
    background: #f8fafc;
    color: #4d5b6a;
    font-weight: 600;
}

.data-table td {
    color: #5f6c7c;
}

.table-image-preview {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-image-trigger {
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    cursor: zoom-in;
}

.table-image-thumb {
    width: 42px;
    height: 42px;
    border: 1px solid #dce6f2;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    background: #f6f8fb;
    cursor: zoom-in;
}

.table-image-zoom {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    width: 220px;
    height: 220px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 38px rgba(28, 57, 96, 0.18);
    border: 1px solid #dce6f2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.table-image-preview:hover .table-image-zoom {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.table-image-large {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: contain;
    display: block;
    background: #fff;
}

.image-preview-modal-card {
    width: min(1080px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    padding: 20px;
}

.sales-preview-modal-card {
    width: min(1180px, calc(100vw - 48px));
    max-height: calc(100vh - 32px);
    padding: 20px;
}

.finance-payment-modal-card {
    width: min(1100px, calc(100vw - 48px));
    max-height: calc(100vh - 32px);
    padding: 20px;
}

.customer-statement-modal-card {
    width: min(920px, calc(100vw - 48px));
    max-height: calc(100vh - 32px);
    padding: 20px;
}

.finance-batch-export-modal-card {
    width: min(520px, calc(100vw - 48px));
    max-height: calc(100vh - 32px);
    padding: 20px;
}

.image-preview-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    max-height: calc(100vh - 150px);
    overflow: auto;
    border-radius: 12px;
    background: #f6f8fb;
}

.sales-preview-body {
    max-height: calc(100vh - 150px);
    overflow: auto;
    border-radius: 12px;
    background: #f6f8fb;
    padding: 20px;
}

.finance-payment-modal-body {
    display: grid;
    gap: 16px;
    max-height: calc(100vh - 160px);
    overflow: auto;
    padding: 2px;
}

.customer-statement-modal-body {
    display: grid;
    gap: 16px;
    max-height: calc(100vh - 160px);
    overflow: auto;
    padding: 2px;
}

.finance-batch-export-body {
    display: grid;
    gap: 16px;
}

.finance-batch-export-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.finance-batch-export-field {
    display: grid;
    gap: 8px;
    color: #526071;
    font-size: 13px;
    font-weight: 600;
}

.finance-payment-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.finance-payment-summary-card {
    border: 1px solid #dbe5f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f6f9fc);
    padding: 16px 18px;
    box-shadow: 0 10px 24px rgba(48, 84, 124, 0.08);
}

.finance-payment-summary-label {
    font-size: 13px;
    color: #7b8794;
    margin-bottom: 8px;
}

.finance-payment-summary-value {
    font-size: 26px;
    font-weight: 700;
    color: #24364b;
    line-height: 1.2;
}

.finance-payment-summary-note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #7b8794;
}

.finance-payment-receive-panel {
    display: grid;
    gap: 14px;
    border: 1px solid #d9e4ef;
    border-radius: 14px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(48, 84, 124, 0.06);
}

.finance-payment-receive-panel[hidden] {
    display: none !important;
}

.finance-payment-receive-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.finance-payment-receive-title {
    font-size: 15px;
    font-weight: 700;
    color: #24364b;
}

.finance-payment-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
}

.finance-payment-field {
    display: grid;
    gap: 6px;
}

.finance-payment-field.full {
    grid-column: 1 / -1;
}

.finance-payment-field span {
    font-size: 12px;
    color: #6d7885;
}

.finance-payment-account-choice-wrap {
    display: grid;
    gap: 10px;
}

.finance-payment-account-options {
    display: grid;
    gap: 10px;
}

.finance-payment-account-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d9e4ef;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    color: #354454;
}

.finance-payment-account-option input {
    margin-top: 3px;
}

.finance-payment-empty-inline {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f6f8fb;
    color: #7b8794;
    font-size: 13px;
}

.finance-payment-account-meta {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f6f8fb;
    border: 1px dashed #d8e1ea;
    font-size: 12px;
    color: #516171;
    line-height: 1.6;
    white-space: pre-line;
}

.finance-payment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.finance-payment-list-card {
    border: 1px solid #d9e4ef;
    border-radius: 14px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(48, 84, 124, 0.06);
}

.finance-payment-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.finance-payment-list-title {
    font-size: 15px;
    font-weight: 700;
    color: #24364b;
}

.finance-payment-list-sub {
    font-size: 12px;
    color: #7b8794;
}

.finance-payment-table-wrap {
    overflow: auto;
}

.finance-payment-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.finance-payment-table th,
.finance-payment-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e9eff5;
    text-align: left;
    font-size: 13px;
    color: #354454;
    vertical-align: top;
}

.finance-payment-table th {
    font-size: 12px;
    color: #7b8794;
    font-weight: 600;
    background: #f8fbfe;
}

.customer-statement-table {
    min-width: 620px;
}

.finance-payment-empty {
    padding: 28px 16px;
    text-align: center;
    color: #8a95a3;
    font-size: 13px;
}

.sales-preview-sheet {
    width: min(980px, 100%);
    margin: 0 auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(34, 56, 94, 0.08);
    padding: 24px 20px 18px;
}

.sales-preview-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: #111827;
}

.sales-preview-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    color: #111827;
    font-size: 14px;
    line-height: 1.5;
}

.sales-preview-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

.sales-preview-table th,
.sales-preview-table td {
    border: 1px solid #626b78;
    padding: 6px 4px;
    text-align: center;
    font-size: 13px;
    color: #111827;
    word-break: break-all;
}

.sales-preview-table th {
    background: #fff;
    font-weight: 500;
}

.sales-preview-main-table td,
.sales-preview-main-table th {
    height: 30px;
}

.sales-preview-left {
    text-align: left !important;
    padding-left: 10px !important;
}

.sales-preview-strong {
    font-weight: 700;
    white-space: pre-line;
}

.sales-preview-note {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: #111827;
}

.sales-preview-signs {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 0 4px;
    font-size: 14px;
    color: #111827;
}

.sales-preview-signs span {
    min-width: 120px;
}

.image-preview-full {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    object-fit: contain;
    display: block;
    border-radius: 10px;
    background: #fff;
}

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

.table-action-muted {
    color: #9aa6b5;
    font-size: 13px;
    line-height: 30px;
}

.table-action-btn {
    height: 30px;
    padding: 0 10px;
    border: 1px solid #cfe0f4;
    border-radius: 6px;
    background: #eef6ff;
    color: #3a7fc7;
    cursor: pointer;
}

.table-action-btn.alt {
    border-color: #ffe0db;
    background: #fff3f1;
    color: #e16b5c;
}

.empty-cell {
    padding: 24px 16px;
    text-align: center;
    color: #7c8798;
}

.panel-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: #344150;
}

.panel-desc {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--text-soft);
    line-height: 1.7;
}

.json-panel {
    margin: 0;
    min-height: 220px;
    padding: 14px;
    border-radius: 8px;
    background: #f8fafc;
    color: #516071;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.7;
    font-size: 12px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(27, 39, 55, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 60;
}

.modal-backdrop[hidden] {
    display: none !important;
}

.modal-card {
    width: min(1120px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 22px 48px rgba(19, 45, 84, 0.24);
    padding: 20px;
}

.modal-backdrop.inbound-editor-modal .modal-card {
    width: min(1080px, calc(100vw - 48px));
    min-height: min(840px, calc(100vh - 48px));
    max-height: calc(100vh - 24px);
}

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

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #f2f5f9;
    color: #5c6a79;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.modal-form {
    display: grid;
    gap: 14px;
}

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

.form-fields[data-module="product"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.form-fields[data-module="product"] .product-col-4 {
    grid-column: span 4;
}

.form-fields[data-module="product"] .product-col-2 {
    grid-column: span 2;
}

.form-fields[data-module="product"] .product-col-8 {
    grid-column: span 8;
}

.form-fields[data-module="product"] .product-col-full {
    grid-column: 1 / -1;
}

.form-fields[data-module="inbound"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-fields[data-module="inbound"] .inbound-col-1 {
    grid-column: span 1;
}

.form-fields[data-module="outbound"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-fields[data-module="company-info"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.form-fields[data-module="company-info"] .company-info-full,
.form-fields[data-module="company-info"] .company-info-section {
    grid-column: 1 / -1;
}

.form-fields[data-module="company-info"] .company-info-half {
    grid-column: span 3;
}

.form-section-title {
    margin-top: 6px;
    padding: 10px 14px;
    border-left: 4px solid #4e7cff;
    border-radius: 8px;
    background: #f5f8ff;
    color: #355d9b;
    font-size: 14px;
    font-weight: 700;
}

.company-account-list {
    display: grid;
    gap: 12px;
}

.company-account-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.company-account-head .form-section-title {
    flex: 1;
    margin-top: 0;
}

.company-account-items {
    display: grid;
    gap: 12px;
}

.company-account-item {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.company-account-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.form-fields[data-module="outbound"] .outbound-company-field,
.form-fields[data-module="outbound"] .outbound-title-field,
.form-fields[data-module="outbound"] .outbound-items-field {
    grid-column: 1 / -1;
}

.form-fields[data-module="outbound"] .outbound-col-1 {
    grid-column: span 1;
}

.form-fields[data-module="outbound"] .outbound-col-2 {
    grid-column: span 2;
}

.form-fields[data-module="customer"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-fields[data-module="customer"] .customer-col-full {
    grid-column: 1 / -1;
}

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

.modal-field-full {
    grid-column: 1 / -1;
}

.modal-label {
    font-size: 13px;
    color: #536172;
}

.field-note {
    margin-top: -2px;
    font-size: 12px;
    color: #8d98a8;
}

.outbound-company-field {
    padding: 16px 18px;
    border: 1px solid #dfe8f4;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.outbound-company-field .modal-label {
    font-size: 14px;
    font-weight: 600;
    color: #4872a5;
}

.outbound-company-field .modal-input {
    min-height: 46px;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 22px;
    font-weight: 700;
    color: #214b7b;
}

.outbound-items-field {
    padding-top: 6px;
}

.outbound-title-field {
    padding: 4px 2px 2px;
}

.outbound-document-title {
    padding: 16px 18px;
    border: 1px solid #dfe8f4;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: #214b7b;
    letter-spacing: 1px;
}

.customer-search-box {
    position: relative;
}

.toolbar-customer-search {
    min-width: 220px;
}

.toolbar-input.toolbar-input-date-compact {
    width: 150px;
    min-width: 150px;
}

.toolbar-input.toolbar-input-type-compact {
    width: 110px;
    min-width: 110px;
}

.toolbar-input.toolbar-input-model-compact {
    width: 100px;
    min-width: 100px;
}

.customer-search-input {
    padding-right: 42px;
}

.customer-search-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 6px;
    background: #eef5ff;
    color: #5e7ea8;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
}

.customer-search-toggle:hover {
    background: #e2efff;
    color: #2f6eb6;
}

.customer-search-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 12;
    display: grid;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #d9e4f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(23, 56, 102, 0.12);
}

.customer-search-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #344457;
    cursor: pointer;
    text-align: left;
}

.customer-search-option:hover {
    background: #f3f8ff;
}

.customer-search-name {
    font-size: 13px;
    font-weight: 600;
}

.customer-search-meta,
.customer-search-empty {
    font-size: 12px;
    color: #7d8c9b;
}

.customer-search-empty {
    padding: 10px 12px;
}

.modal-input {
    width: 100%;
    min-height: 38px;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    background: #fff;
    padding: 0 12px;
    outline: none;
    color: var(--text);
}

.modal-input[readonly] {
    background: #f7f9fc;
    color: #5d6b7a;
}

.modal-textarea {
    min-height: 108px;
    padding: 10px 12px;
    resize: vertical;
}

.image-upload-box {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.image-upload-preview {
    width: 160px;
    height: 160px;
    border: 1px dashed #d7e1ed;
    border-radius: 10px;
    background: #f7fafe;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-upload-placeholder {
    padding: 0 16px;
    text-align: center;
    font-size: 12px;
    color: #8b98a8;
    line-height: 1.6;
}

.image-upload-tools {
    display: grid;
    gap: 10px;
    align-content: start;
}

.image-upload-input {
    padding: 8px 10px;
    height: auto;
}

.image-upload-status {
    min-height: 20px;
    font-size: 12px;
    color: #8f9cad;
}

.image-upload-status.success {
    color: var(--success);
}

.image-upload-status.error {
    color: var(--danger);
}

.rich-editor-box {
    display: grid;
    gap: 12px;
}

.rich-editor-toolbar {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #d8e0ea;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #fbfcfe 0%, #f1f4f8 100%);
}

.rich-editor-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rich-tool-btn {
    min-width: 34px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #ccd6e3;
    border-radius: 6px;
    background: #fff;
    color: #425063;
    cursor: pointer;
}

.rich-tool-btn:hover,
.rich-tool-btn.active {
    border-color: #8db8e8;
    background: #edf6ff;
    color: #2378c9;
}

.rich-tool-btn-accent {
    color: #1f6db8;
    font-weight: 600;
}

.rich-tool-select {
    width: auto;
    min-width: 110px;
    height: 32px;
}

.rich-tool-color {
    width: 44px;
    height: 32px;
    padding: 3px;
    border: 1px solid #ccd6e3;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.rich-editor-file {
    display: none;
}

.rich-editor-frame {
    border: 1px solid #d8e0ea;
    border-radius: 0 0 10px 10px;
    background: #fff;
    overflow: hidden;
}

.rich-editor-source {
    min-height: 360px;
    border: 0;
    border-radius: 0;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.7;
}

.rich-editor-status {
    min-height: 20px;
    font-size: 12px;
    color: #8f9cad;
}

.rich-editor-status.success {
    color: var(--success);
}

.rich-editor-status.error {
    color: var(--danger);
}

.rich-editor-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rich-editor-gallery-empty {
    padding: 12px 14px;
    border: 1px dashed #d7e1ed;
    border-radius: 10px;
    background: #f7fafe;
    font-size: 12px;
    color: #8b98a8;
}

.rich-editor-gallery-item {
    width: 110px;
    display: grid;
    gap: 8px;
}

.rich-editor-gallery-item img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #dce6f2;
    background: #fff;
    display: block;
}

.rich-editor-remove-btn {
    height: 30px;
    border: 1px solid #ffe0db;
    border-radius: 8px;
    background: #fff3f1;
    color: #e16b5c;
    cursor: pointer;
}

.rich-editor-surface {
    min-height: 360px;
    padding: 16px 18px;
    border: 0;
    border-radius: 0;
    background: #fff;
    outline: none;
    line-height: 1.7;
    color: var(--text);
}

.rich-editor-surface:focus {
    border-color: #66aef3;
    box-shadow: 0 0 0 3px rgba(77, 162, 239, 0.12);
}

.rich-editor-surface img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
    border-radius: 10px;
}

.form-status {
    min-height: 18px;
    font-size: 12px;
    color: #8a95a3;
}

.form-status.success {
    color: var(--success);
}

.form-status.error {
    color: #d7655a;
}

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

#preview-sales-button {
    margin-right: auto;
}

.modal-actions-header {
    justify-content: flex-end;
}

.product-editor-modal .modal-actions {
    display: none;
}

.product-editor-modal .modal-actions-header {
    display: flex;
}

.feature-tree {
    display: grid;
    gap: 12px;
    padding: 4px 0;
}

.feature-group {
    border: 1px solid #e3ebf4;
    border-radius: 10px;
    background: #f8fbfe;
    overflow: hidden;
}

.feature-group-head {
    padding: 10px 14px;
    background: #f2f7fc;
    border-bottom: 1px solid #e3ebf4;
}

.feature-group-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #445364;
}

.feature-children {
    display: grid;
    gap: 0;
}

.feature-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #edf2f7;
    font-size: 13px;
    color: #536172;
}

.feature-children .feature-check:last-child {
    border-bottom: 0;
}

.feature-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #3a90ec;
}

.feature-check.disabled {
    color: #9aa6b5;
    background: #fbfcfd;
}

.feature-check.disabled input {
    cursor: not-allowed;
}

.feature-note {
    font-size: 12px;
    color: #90a0b1;
}

.position-list {
    display: grid;
    gap: 10px;
}

.position-list-items {
    display: grid;
    gap: 10px;
}

.position-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e3ebf4;
    border-radius: 10px;
    background: #f8fbfe;
}

.position-item-grid {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 10px;
}

.item-list {
    display: grid;
    gap: 10px;
}

.item-list-items {
    display: grid;
    gap: 10px;
}

.item-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e3ebf4;
    border-radius: 10px;
    background: #f8fbfe;
}

.item-row-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.item-row-grid-inbound {
    grid-template-columns: 1.2fr 1.2fr 0.8fr 0.8fr 0.8fr 1fr 1.2fr;
}

.form-fields[data-module="return"] .item-row-grid-inbound {
    grid-template-columns: 1.1fr 1.1fr 0.75fr 0.75fr 0.75fr 0.66fr 0.46fr 0.6fr;
}

.item-row-grid-outbound {
    grid-template-columns: 1fr 1fr 0.9fr 0.8fr 0.7fr 0.8fr 0.8fr 1fr 1fr;
}

.item-row-grid-transfer {
    grid-template-columns: 1.1fr 1.1fr 0.7fr 0.7fr 1fr 1fr 1fr 1fr 1fr;
}

.item-row > .table-action-btn {
    align-self: flex-end;
}

.item-cell {
    display: grid;
    gap: 6px;
    font-size: 12px;
    color: #536172;
}

.item-cell-static .item-static-value {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #d7e1ed;
    border-radius: 10px;
    background: #f8fbfe;
    color: #1f2d3d;
}

.form-fields[data-module="outbound"] .item-list {
    gap: 14px;
}

.form-fields[data-module="outbound"] .item-row {
    padding: 14px;
    border-color: #d9e5f2;
    background: #fbfdff;
}

.permission-modal-card {
    width: min(1180px, 100%);
}

.permission-dialog-body {
    display: grid;
    gap: 18px;
}

.permission-section {
    display: grid;
    gap: 14px;
    border: 1px solid #e4ebf3;
    border-radius: 12px;
    background: #fbfdff;
    padding: 16px;
}

.permission-content {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.permission-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.permission-section-head strong {
    font-size: 14px;
    color: #405163;
}

.permission-account-head {
    align-items: flex-start;
}

.permission-tools {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.permission-account-list {
    display: grid;
    gap: 10px;
}

.permission-account-strip {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    max-height: 260px;
    overflow: auto;
}

.permission-account-item {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dfe8f2;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.permission-account-item:hover {
    transform: translateY(-1px);
    border-color: #bcd5f1;
    box-shadow: 0 8px 18px rgba(63, 106, 163, 0.08);
}

.permission-account-item.active {
    border-color: #53a2ef;
    box-shadow: 0 10px 22px rgba(83, 162, 239, 0.14);
}

.permission-account-main {
    display: grid;
    gap: 4px;
}

.permission-account-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.permission-account-name {
    font-size: 14px;
    font-weight: 700;
    color: #3f5062;
}

.permission-account-meta {
    font-size: 12px;
    color: #90a0b1;
}

.permission-account-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.permission-count-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef6ff;
    color: #4888cd;
    font-size: 12px;
}

.permission-tree-section {
    align-content: start;
}

.permission-tree-matrix {
    border: 1px solid #e6edf4;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
}

.permission-matrix {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
}

.permission-matrix-group {
    display: grid;
    align-content: start;
    gap: 10px;
}

.permission-matrix-title {
    font-size: 14px;
    font-weight: 700;
    color: #425163;
}

.permission-matrix-items {
    display: grid;
    gap: 8px;
}

.permission-matrix-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #536172;
}

.permission-matrix-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #3a90ec;
}

.permission-matrix-check.disabled {
    color: #9aa6b5;
}

.permission-account-modal-card {
    width: min(720px, 100%);
}

@media (max-width: 1100px) {
    .form-fields {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 860px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .sidebar-panel {
        padding-bottom: 12px;
    }

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

    .content-header,
    .toolbar-row,
    .toolbar-group {
        flex-direction: column;
        align-items: stretch;
    }

    .status-box,
    .admin-main-card {
        margin-left: 12px;
        margin-right: 12px;
    }
}

@media (max-width: 640px) {
    .simple-login-card {
        max-width: 92vw;
        padding: 24px 18px 18px;
    }

    .login-title {
        font-size: 24px;
    }

    .toolbar-input,
    .btn-block {
        width: 100%;
    }

    .menu-nav {
        grid-template-columns: 1fr;
    }
}

/* Dashboard admin redesign */
body.admin-page {
    background: #edf1f5;
}

.dashboard-shell {
    min-height: 100vh;
    padding: 10px;
}

.admin-page .admin-layout {
    grid-template-columns: 228px minmax(0, 1fr);
    min-height: calc(100vh - 20px);
    height: calc(100vh - 20px);
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    overflow: hidden;
    background: #eef2f7;
}

.admin-page .sidebar-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: linear-gradient(180deg, #f8fafc 0%, #f3f6fa 100%);
    border-right: 1px solid #dde5ef;
    color: #556273;
    padding: 0;
    overflow: hidden;
}

.admin-page .sidebar-top {
    padding: 14px 14px 10px;
    border-bottom: 1px solid #e6edf5;
}

.sidebar-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-page .sidebar-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(55, 132, 230, 0.2));
}

.sidebar-brand-title {
    font-size: 14px;
    font-weight: 700;
    color: #4b5b6e;
    line-height: 1.2;
}

.sidebar-brand-sub {
    margin-top: 4px;
    font-size: 11px;
    color: #9ba8b9;
    letter-spacing: 0.04em;
}

.admin-page .menu-nav {
    flex: 1;
    display: grid;
    gap: 8px;
    padding: 14px 10px;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.admin-page .menu-group {
    gap: 6px;
}

.admin-page .menu-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 6px;
    font-size: 12px;
    font-weight: 700;
    color: #7d8b9c;
}

.admin-page .menu-group-title::before {
    display: none;
}

.menu-button {
    position: relative;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    background: transparent;
    color: #5c6979;
    font-size: 13px;
    font-weight: 600;
    line-height: 42px;
    transition: all 0.2s ease;
    text-align: left;
}

.menu-button::before {
    display: none;
}

.menu-button::after {
    display: none;
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-top: 1.5px solid #a8b4c4;
    border-right: 1.5px solid #a8b4c4;
    transform: rotate(45deg);
}

.menu-button.has-children::after {
    content: "";
    display: block;
    position: absolute;
    right: 14px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-top: 1.5px solid #a8b4c4;
    border-right: 1.5px solid #a8b4c4;
    transform: rotate(45deg);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.menu-button.has-children.expanded::after {
    margin-top: -6px;
    transform: rotate(135deg);
}

.menu-button:hover {
    background: #f1f7ff;
    color: #3d78c4;
}

.menu-button.active,
.menu-button.active-parent {
    background: linear-gradient(90deg, #5eaaf4 0%, #2f88ea 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(52, 135, 233, 0.22);
}

.menu-button.active::before,
.menu-button.active-parent::before {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.24);
}

.menu-button.active::after,
.menu-button.active-parent::after {
    border-color: rgba(255, 255, 255, 0.72);
}

.menu-submenu {
    display: none;
    margin-top: 4px;
    padding-left: 10px;
}

.menu-submenu.expanded {
    display: grid;
    gap: 4px;
}

.menu-button-child {
    min-height: 38px;
    padding-left: 20px;
    font-size: 12px;
    line-height: 38px;
    font-weight: 500;
}

.sidebar-user-card {
    margin: 10px;
    margin-top: auto;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #e2e9f2;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 18px rgba(63, 95, 138, 0.06);
    position: relative;
    flex-shrink: 0;
}

.sidebar-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60aef6 0%, #2b84e9 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-user-info {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 700;
    color: #435365;
}

.sidebar-user-role,
.sidebar-user-meta {
    font-size: 11px;
    color: #95a2b2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-page .content-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
    background: #edf1f5;
}

.top-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px 6px;
    border-bottom: 1px solid #dfe6ef;
    background: #f6f8fb;
}

.module-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: auto;
    scrollbar-width: none;
}

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

.module-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 88px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #dfe5ee;
    border-radius: 6px 6px 0 0;
    background: #fff;
    color: #8a96a5;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.module-tab.active {
    border-color: #4c9ff0;
    background: linear-gradient(180deg, #59a9f4 0%, #398fe9 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(52, 134, 229, 0.18);
}

.module-tab-label {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-tab-close {
    font-size: 12px;
    opacity: 0.8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.module-tab-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

.module-tab.active .module-tab-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

.top-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-tool-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #d8e1eb;
    border-radius: 8px;
    background: #fff;
    color: #71a7e3;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.logout-mini-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: #f26d67;
    color: #fff;
    box-shadow: none;
}

.password-mini-btn {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d8e1eb;
    border-radius: 8px;
    background: #fff;
    color: #536172;
    box-shadow: none;
}

.content-stage {
    min-height: 0;
    overflow: auto;
    padding: 8px 12px 10px;
    display: grid;
    gap: 8px;
    align-content: start;
}

.home-dashboard {
    display: grid;
    gap: 12px;
}

.page-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 0;
}

.page-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    color: #3a4a5c;
}

.page-desc {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #93a0b1;
}

.status-box {
    display: none;
    margin: 0;
    max-width: 360px;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 11px;
    background: #fff;
    border: 1px solid #e1e8f0;
    color: #8a96a5;
    box-shadow: 0 8px 20px rgba(64, 95, 137, 0.05);
}

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

.module-setting-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.summary-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
    background: #fff;
    border: 1px solid #e4ebf2;
    border-radius: 14px;
    padding: 14px 18px 14px 14px;
    box-shadow: 0 12px 24px rgba(78, 98, 128, 0.05);
    overflow: hidden;
}

.summary-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    border-radius: 14px 0 0 14px;
}

.summary-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
}

.summary-card-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    min-height: 96px;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
}

.summary-card-icon {
    display: none;
}

.summary-card-blue .summary-card-side {
    background: linear-gradient(135deg, #7ab8ff 0%, #498ff3 100%);
}

.summary-card-blue::after {
    background: linear-gradient(180deg, #79b9ff 0%, #478ff2 100%);
}

.summary-card-cyan .summary-card-side {
    background: linear-gradient(135deg, #7ce3f2 0%, #39c2d9 100%);
}

.summary-card-cyan::after {
    background: linear-gradient(180deg, #7ce3f2 0%, #39c2d9 100%);
}

.summary-card-amber .summary-card-side {
    background: linear-gradient(135deg, #ffd87d 0%, #f0af3b 100%);
}

.summary-card-amber::after {
    background: linear-gradient(180deg, #ffd87d 0%, #f0af3b 100%);
}

.summary-card-red .summary-card-side {
    background: linear-gradient(135deg, #ff9b95 0%, #f2625e 100%);
}

.summary-card-red::after {
    background: linear-gradient(180deg, #ff9b95 0%, #f2625e 100%);
}

.summary-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    margin-top: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: #fff;
    word-break: break-all;
    white-space: normal;
    max-width: 4em;
}

.summary-card-label {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6a7a8c;
}

.summary-card-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    padding-left: 18px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: #39495a;
    text-align: right;
}

.summary-card-foot {
    margin-top: 12px;
    min-height: 38px;
    font-size: 12px;
    line-height: 1.7;
    color: #7f8c9c;
}

.home-card-trend {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #54b479;
}

.home-shortcut-card {
    padding-top: 14px;
}

.home-shortcuts {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.home-shortcut-btn {
    display: grid;
    gap: 6px;
    min-height: 88px;
    padding: 14px 16px;
    border: 1px solid #dfe8f2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.home-shortcut-btn:hover {
    transform: translateY(-1px);
    border-color: #8ebef3;
    box-shadow: 0 12px 24px rgba(64, 121, 188, 0.08);
}

.home-shortcut-label {
    font-size: 14px;
    font-weight: 700;
    color: #425163;
}

.home-shortcut-desc {
    font-size: 12px;
    line-height: 1.6;
    color: #8c99a9;
}

.visual-grid {
    display: grid;
    gap: 14px;
}

.module-config-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
    gap: 14px;
}

.module-config-card {
    min-height: 100%;
}

.module-config-list {
    display: grid;
    gap: 14px;
}

.module-config-block {
    border: 1px solid #e6edf4;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    padding: 14px 16px;
}

.module-config-block-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #435365;
}

.module-config-items {
    display: grid;
    gap: 8px;
}

.module-config-item {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: #6d7b8a;
}

.module-config-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #62aaf3;
    box-shadow: 0 0 0 4px rgba(98, 170, 243, 0.12);
}

.module-meta-group + .module-meta-group {
    margin-top: 18px;
}

.module-meta-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #435365;
}

.module-field-tags,
.module-action-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.module-tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #dfe7f0;
    background: #f7fafe;
    color: #5f6e80;
    font-size: 12px;
    font-weight: 600;
}

.module-tag.action {
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
}

.visual-grid-top {
    grid-template-columns: minmax(0, 2.3fr) minmax(280px, 0.9fr);
}

.visual-grid-bottom {
    grid-template-columns: minmax(0, 2.3fr) minmax(300px, 0.9fr);
    align-items: start;
}

.section-card {
    padding: 16px 18px 18px;
    border: 1px solid #e3e9f1;
    border-radius: 14px;
    box-shadow: 0 14px 26px rgba(69, 93, 128, 0.05);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.card-head-chart {
    align-items: flex-end;
    flex-wrap: wrap;
}

.card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #425163;
}

.card-subtitle {
    margin: 6px 0 0;
    font-size: 12px;
    color: #9aa6b5;
    line-height: 1.6;
}

.card-more {
    font-size: 12px;
    color: #9aa6b5;
}

.chart-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
}

.chart-filter-label {
    font-size: 12px;
    color: #7f8d9f;
}

.chart-filter-select {
    min-width: 88px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d9e3ee;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #425163;
    outline: none;
}

.bar-chart {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
    min-height: 176px;
    padding: 12px 4px 0;
}

.bar-chart-item {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.bar-chart-track {
    position: relative;
    width: 22px;
    height: 118px;
    border-radius: 999px;
    background: repeating-linear-gradient(
        to top,
        #f3f6fa 0,
        #f3f6fa 8px,
        #ffffff 8px,
        #ffffff 14px
    );
    overflow: hidden;
}

.bar-chart-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #77b6fd 0%, #3c8ff0 100%);
}

.bar-chart-item.active .bar-chart-track {
    width: 28px;
    box-shadow: inset 0 0 0 3px rgba(84, 160, 247, 0.12);
}

.bar-chart-item.active .bar-chart-fill {
    background: linear-gradient(180deg, #56a7f6 0%, #1e78ea 100%);
}

.bar-chart-label {
    font-size: 12px;
    color: #97a4b4;
}

.bar-chart-value {
    font-size: 11px;
    color: #5b6a7c;
    font-weight: 700;
}

.gauge-panel,
.donut-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.gauge-ring,
.donut-chart {
    position: relative;
    width: 186px;
    height: 186px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-ring {
    background: conic-gradient(#53a6f4 0deg, #53a6f4 0deg, #edf2f7 0deg, #edf2f7 360deg);
}

.donut-chart {
    background: conic-gradient(#4f9cf1 0 45%, #59d0cf 45% 70%, #7d85f7 70% 88%, #f0b84c 88% 100%);
}

.gauge-ring::before,
.donut-chart::before {
    content: "";
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #eef3f8;
}

.gauge-ring-inner,
.donut-center {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 4px;
}

.gauge-ring-inner strong,
.donut-center strong {
    font-size: 30px;
    color: #37495c;
}

.gauge-ring-inner span,
.donut-center span {
    font-size: 12px;
    color: #9aa6b5;
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.mini-stat {
    border: 1px solid #e4ebf3;
    border-radius: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}

.mini-stat-label {
    font-size: 11px;
    color: #a2adbb;
}

.mini-stat-value {
    margin-top: 8px;
    font-size: 22px;
    font-weight: 700;
    color: #435365;
}

.mini-stat-trend {
    margin-top: 6px;
    font-size: 11px;
    color: #54b479;
}

.line-chart-panel {
    min-height: 320px;
    padding: 14px 0 18px;
    background:
        linear-gradient(#eef3f8 1px, transparent 1px) 0 0 / 100% 20%;
    border-radius: 14px;
    overflow: visible;
}

.trend-chart {
    width: 100%;
    height: 320px;
    display: block;
}

.trend-area {
    fill: rgba(88, 163, 245, 0.18);
}

.trend-line {
    fill: none;
    stroke: #4f9df2;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trend-dot-ring {
    fill: rgba(83, 166, 244, 0.18);
}

.trend-dot {
    fill: #53a6f4;
    stroke: #fff;
    stroke-width: 3;
}

.trend-value-text,
.trend-axis-label {
    fill: #8090a3;
    font-size: 12px;
    text-anchor: middle;
}

.trend-value-text {
    fill: #4d6279;
    font-weight: 700;
    font-size: 11px;
}

.trend-value-text.active {
    fill: #1e78ea;
}

.trend-guide-line {
    stroke: #e8eef5;
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.trend-guide-label {
    fill: #9aa6b5;
    font-size: 11px;
    text-anchor: end;
}

.trend-dot-ring.active {
    fill: rgba(30, 120, 234, 0.24);
}

.trend-dot.active {
    fill: #1e78ea;
}

.trend-axis-label.active {
    fill: #1e78ea;
    font-weight: 700;
}

.donut-panel {
    flex-direction: column;
    gap: 18px;
}

.customer-ranking-list {
    display: grid;
    gap: 10px;
}

.customer-ranking-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #e4ebf3;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}

.customer-ranking-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.customer-ranking-rank {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6caef6 0%, #408bf0 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.customer-ranking-meta {
    min-width: 0;
}

.customer-ranking-name {
    font-size: 14px;
    font-weight: 700;
    color: #425163;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-ranking-orders {
    margin-top: 4px;
    font-size: 12px;
    color: #97a4b4;
}

.customer-ranking-amount {
    font-size: 18px;
    font-weight: 700;
    color: #39495a;
    text-align: right;
    flex-shrink: 0;
}

.donut-legend {
    width: 100%;
    display: grid;
    gap: 10px;
}

.donut-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #6d7b8a;
}

.donut-legend-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.donut-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.admin-main-card {
    margin: 0;
    gap: 10px;
    padding: 12px;
}

.table-card-head {
    margin-bottom: 0;
}

.toolbar-input {
    min-width: 188px;
    height: 38px;
    border-radius: 10px;
    border-color: #dde5ee;
    background: #f8fafc;
}

.toolbar-input.toolbar-input-compact {
    width: 100px;
    min-width: 100px;
}

.toolbar-input:focus,
.modal-input:focus {
    border-color: #67adf4;
    box-shadow: 0 0 0 3px rgba(103, 173, 244, 0.12);
}

.btn {
    min-width: 84px;
    height: 38px;
    border-radius: 10px;
    font-weight: 600;
}

.btn-primary {
    background: linear-gradient(180deg, #5faaf4 0%, #2f88ea 100%);
}

.btn-secondary {
    background: #fff;
}

.table-wrap {
    border-radius: 14px;
    border: 1px solid #e6edf4;
}

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px 0;
    flex-wrap: wrap;
}

.table-pagination-summary {
    font-size: 12px;
    color: #7e8a99;
}

.table-pagination-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.table-page-btn {
    min-width: 38px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #d8e2ee;
    border-radius: 8px;
    background: #fff;
    color: #5a6a7d;
    cursor: pointer;
}

.table-page-btn:hover:not(:disabled) {
    border-color: #73b2f3;
    color: #2d87e7;
}

.table-page-btn.active {
    background: linear-gradient(180deg, #5faaf4 0%, #2f88ea 100%);
    border-color: #2f88ea;
    color: #fff;
}

.table-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.table-page-ellipsis {
    color: #9ba7b6;
    padding: 0 2px;
}

.data-table th {
    background: #f7f9fc;
    color: #8190a2;
    font-size: 12px;
}

.data-table td {
    color: #516173;
    font-size: 13px;
}

.table-action-btn {
    border-radius: 8px;
}

@media (max-width: 1320px) {
    .summary-grid,
    .finance-summary-grid,
    .module-setting-cards,
    .mini-stats,
    .home-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .visual-grid-top,
    .visual-grid-bottom,
    .module-config-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .dashboard-shell {
        padding: 0;
    }

    .admin-page .admin-layout {
        grid-template-columns: 1fr;
        min-height: 100vh;
        height: auto;
        border-radius: 0;
        border: 0;
    }

    .sidebar-user-card {
        margin-top: 0;
    }

    .page-overview,
    .top-tabs-bar,
    .toolbar-row,
    .toolbar-group {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-grid,
    .module-setting-cards,
    .mini-stats,
    .home-shortcuts {
        grid-template-columns: 1fr;
    }


    .permission-account-strip,
    .permission-matrix {
        grid-template-columns: 1fr;
    }
}