/* ==========================================
   Efast Workbench - 鐜颁唬鍖栧叏閾捐矾楂樹繚鐪熷晢鍔℃牱寮忚〃
   鏂囦欢璺緞: D:\Storage\Accio\Roles\Testing.2\style.css
   ========================================== */

:root {
    --bg-main: #efeae2;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --text-main: #303030;
    --text-muted: #667781;
    --text-sidebar: #667781;
    --border-color: #475569;
    --accent-green: #25D366;
    --accent-teal: #128C7E;
    --accent-dark: #075E54;
    --accent-blue: #3b82f6;
    --accent-red: #ef4444;
    --accent-orange: #f97316;
    --white: #ffffff;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    
    color: var(--text-main);
    line-height: 1.5;
    overflow: hidden;
}

/* 甯冨眬澶栨 */
.container { display: flex; flex-direction: column; height: 100vh; width: 100vw; }

/* ==========================================
   1. 渚ц竟鏍忥細姘歌繙鏁炲紑楂樺唴鑱氭灦鏋?
   ========================================== */
.sidebar {
    width: 130px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.brand {
    height: 70px;
    padding: 0 20px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent-green);
    background: rgba(37,211,102,0.08);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.content-top-bar {
    padding: 0 24px;
    height: 70px;
    
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--bg-sidebar);
}
.content-top-bar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 1px;
}

.nav-menu {
    list-style: none;
    padding: 15px 0;
    flex: 1;
    overflow-y: auto;
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.nav-item.active a, .nav-item a:hover {
    color: var(--accent-blue);
    background-color: rgba(59, 130, 246, 0.08); border-left: 4px solid var(--accent-blue); padding-left: 20px; /* 琛ュ伩 border 瀹藉害 */
}

.nav-group {
    margin-top: 20px;
}

.group-title {
    padding: 6px 24px;
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 1.5px;
}

.sub-nav {
    list-style: none;
}

/* 渚ц竟鏍忓簳閮ㄤ釜浜哄悕鐗?*/
.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    
}

.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
}

.user-card i {
    font-size: 1.4rem;
    color: var(--accent-blue);
}

.user-meta {
    display: flex;
    flex-direction: column;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.user-name {
    font-size: 0.875rem;
    font-weight: bold;
}

.btn-logout {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-logout:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

/* ==========================================
   2. 涓诲伐浣滃尯鍩?
   ========================================== */
.body-row { display: flex; flex: 1; overflow: hidden; }
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-main); }



.page-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notification-badge {
    background-color: var(--accent-red);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-info {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-info i {
    font-size: 1.1rem;
    color: var(--text-main);
}

/* ==========================================
   3. 瑙嗗浘瀹瑰櫒涓庡姩鐢?
   ========================================== */
.view-section {
    display: none;
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.view-section.active {
    display: block;
    animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ==========================================
   4. 浠〃鐩橀椤电綉鏍?
   ========================================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    }

.dashboard-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    }

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

.card-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header .badge {
    background-color: var(--accent-blue);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}


/* --- 绁ㄦ嵁 Tab 鏍?--- */
.invoice-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 0;
}
.invoice-tabs button {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 0.925rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.invoice-tabs button:hover {
    color: #1e293b;
    background: #f8fafc;
}
.invoice-tabs button.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: #eff6ff;
}
/* 鍚屾鏁版嵁鎸夐挳 */
.sync-actions-row {
    display: flex;
    gap: 12px;
}

.btn-sync {
    background-color: var(--accent-blue);
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.btn-sync:hover {
    background-color: #2563eb;
}

.btn-sync:disabled {
    background-color: #475569;
    cursor: not-allowed;
}

/* 榛戝鎺у埗鍙扮洅 */
.console-box {
    background-color: #f8fafc; border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.8rem;
    color: #059669; /* matrix green - darker for light bg */
    height: 90px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.4;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.console-line {
    margin-bottom: 2px;
}

.console-line.success {
    color: #10b981;
}

.console-line.error {
    color: var(--accent-red);
}

/* 淇′繚寰呭姙鍒楄〃涓庡崱鐗?*/
.todo-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

/* 闃块噷璇㈢洏鍒楄〃 */
.inquiry-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
}

.inquiry-item {
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.inquiry-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.825rem;
}

.buyer-name {
    font-weight: bold;
}

.inquiry-text {
    font-size: 0.925rem;
    color: #334155;
    font-style: italic;
    background-color: rgba(255,255,255,0.4);
    padding: 8px;
    border-radius: 4px;
    line-height: 1.4;
}

.btn-small {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-small.btn-ai {
    background-color: var(--accent-teal);
    color: var(--white);
}

.btn-small.btn-ai:hover {
    background-color: #0f766e;
}

/* ==========================================
   5. 閫氱敤鍗＄墖鍙婅〃鍗曟牱寮?(鍙敜銆佺エ鎹?
   ========================================== */
.view-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}

label {
    font-size: 0.925rem;
    font-weight: bold;
    color: var(--text-muted);
}

input, select, textarea {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--text-main);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* 鑷缓璁㈠崟琛ㄥ崟锛氳鐩栧叏灞€娣辫壊杈撳叆妗嗘牱寮?*/
#view-self-order input,
#view-self-order select,
#view-self-order textarea {
    color: #1e293b;
    background-color: #fff;
}
#view-self-order input:focus,
#view-self-order select:focus,
#view-self-order textarea:focus {
    border-color: #3b82f6;
    background-color: #fff;
}

.btn-action {
    background-color: var(--accent-blue);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.btn-action:hover {
    background-color: #2563eb;
}

/* ==========================================
   6. 褰㈠紡鍙戠エ楂樹繚鐪?A4 鎷熺湡棰勮鍖?
   ========================================== */
.invoice-grid {
    display: grid;
    grid-template-columns: 1fr 1.20fr;
    gap: 24px;
    height: 100%;
}

.a4-container {
    padding: 0;
    overflow: auto;
     display: flex; justify-content: center; align-items: flex-start; height: calc(100vh - 120px);
}

.a4-sheet {
    width: 100%;
    min-width: 595px; /* A4 缁忓吀姣旂巼 */
    background-color: var(--white);
    color: #1e293b;
    padding: 30px;
    font-size: 0.8rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    line-height: 1.4;
}

.a4-header {
    border-bottom: 2px solid #1e3a8a;
    padding-bottom: 12px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.logo-area h3 {
    font-size: 1rem;
    color: #1e3a8a;
    font-weight: 800;
}

.logo-area .subtitle {
    font-size: 0.65rem;
    color: #475569;
}

.title-area h2 {
    font-size: 1.35rem;
    color: #1e3a8a;
    font-weight: 800;
    letter-spacing: 1px;
}

.a4-meta-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.meta-col p {
    margin-bottom: 4px;
}

.text-right {
    text-align: right;
}

.a4-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.a4-table th, .a4-table td {
    border: 1px solid #cbd5e1;
    padding: 8px 12px;
    text-align: left;
}

.a4-table th {
    background-color: #f1f5f9;
    color: #1e3a8a;
    font-weight: bold;
}

.a4-table tr.highlight-row td {
    background-color: #eff6ff;
    border-top: 2px solid #1e3a8a;
    font-size: 0.925rem;
}

.payment-terms-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 14px;
    border-radius: 4px;
}

.payment-terms-box h4 {
    color: #1e3a8a;
    font-size: 0.775rem;
    margin-bottom: 8px;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 4px;
}

.split-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
}

.split-col {
    flex: 1;
}

.money-text {
    font-size: 1rem;
    font-weight: 800;
    color: #16a34a;
}

.small-hint {
    font-size: 0.65rem;
    color: #64748b;
}

/* ==========================================
    涔板鏄熺骇寰界珷 (Buyer Level Badge L1~L4)
   ========================================== */
.buyer-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.buyer-level-badge.level-l1 {
    background: linear-gradient(135deg, #a8a29e, #78716c);
    color: #ffffff;
}
.buyer-level-badge.level-l2 {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #ffffff;
}
.buyer-level-badge.level-l3 {
    background: linear-gradient(135deg, #fff, #25D366);
    color: #1e293b;
}
.buyer-level-badge.level-l4 {
    background: linear-gradient(135deg, #818cf8, #4f46e5);
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
}

/* 鏃烘椇鍞よ捣鎸夐挳鎮仠鏁堟灉 */
.btn-wangwang:hover {
    background: #e55d00 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(255, 102, 0, 0.3);
    transition: all 0.15s ease;
}

/* ==========================================
   7. 鐢ㄦ埛绠＄悊闈㈡澘鏍峰紡
   ========================================== */
.user-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.user-table th, .user-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.925rem;
}

.user-table th {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.role-badge.boss { background: rgba(124, 58, 237, 0.2); color: #a78bfa; }
.role-badge.manager { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.role-badge.salesperson { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.role-badge.supervisor { background: rgba(37, 211, 102, 0.2); color: #fff; }

.btn-delete-user {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: var(--accent-red);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-user:hover {
    background: var(--accent-red);
    color: #fff;
}

.btn-add-user {
    margin-top: 0;
    padding: 8px 16px;
    font-size: 0.8rem;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    max-height: 90vh; overflow-y: auto; max-width: 95vw;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.btn-close-modal {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.btn-close-modal:hover { color: var(--accent-red); }

.boss-only { display: none; }
.boss-only.visible { display: list-item; }

/* ==========================================
   8. 浜у搧涓績鏍峰紡 - 鍗＄墖4琛屽竷灞€
   ========================================== */
.product-toolbar { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 16px; gap: 10px; }

.search-box { position: relative; flex: 1; max-width: 400px; }

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.925rem;
}

.search-box input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.875rem;
    outline: none;
}

.search-box input:focus { border-color: var(--accent-blue); }

#product-card-list { display: flex; flex-direction: column; gap: 16px; }

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.product-card-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
}
.product-card-row:last-child { border-bottom: none; }

.product-card-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: #f1f5f9;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.product-card-img[src] {
    opacity: 1;
}
.product-card-img-placeholder {
    width: 64px; height: 64px;
    border-radius: 6px; border: 1px dashed var(--border-color); background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.65rem; flex-shrink: 0;
}

.product-card-model {
    font-weight: 800; font-size: 0.9rem; color: var(--accent-blue);
    min-width: 70px;
}
.product-card-category {
    font-size: 0.65rem; font-weight: 600; color: #a78bfa; background: rgba(167,139,250,0.12);
    border: 1px solid rgba(167,139,250,0.3); border-radius: 4px; padding: 1px 6px;
    white-space: nowrap;
}
.product-card-name {
    font-weight: 600; font-size: 0.925rem; flex: 1;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.price-col {
    min-width: 90px; text-align: center;
    background: rgba(59, 130, 246, 0.08); border-radius: 6px; padding: 4px 8px;
}
.price-col .tier-qty { font-size: 0.65rem; color: var(--text-muted); }
.price-col .tier-price { font-size: 0.925rem; font-weight: 800; color: #34d399; }
.price-col.empty { background: transparent; color: var(--text-muted); font-size: 0.7rem; }

.product-card-desc { flex: 1; font-size: 0.8rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.product-card-field {
    font-size: 0.78rem; display: flex; align-items: center; gap: 4px;
}
.product-card-field .field-label { color: var(--text-muted); font-size: 0.68rem; }
.product-card-field .field-value { color: var(--text-main); font-weight: 500; }

.product-card-actions { margin-left: auto; display: flex; gap: 6px; }

.modal-wide { width: 95%; max-width: 1100px; }

.btn-product-delete {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-red);
    padding: 4px 8px; border-radius: 4px;
    font-size: 0.72rem; cursor: pointer; transition: all 0.2s;
}
.btn-product-delete:hover { background: var(--accent-red); color: #fff; }

.btn-product-edit {
    background: transparent;
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-blue);
    padding: 4px 8px; border-radius: 4px;
    font-size: 0.72rem; cursor: pointer; transition: all 0.2s;
}
.btn-product-edit:hover { background: var(--accent-blue); color: #fff; }

/* ==========================================
   9. 渚ц竟鏍忓彲鎶樺彔鏁版嵁娈?
   ========================================== */
.nav-section {
    border-bottom: 1px solid rgba(51, 65, 85, 0.4);
}
.section-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; cursor: pointer; font-size: 0.78rem; font-weight: 600;
    color: var(--text-muted); transition: all 0.2s;
}
.section-toggle:hover { color: var(--white); background: rgba(59,130,246,0.08); }
.section-toggle i { width: 18px; }
.s-arrow { font-size: 0.65rem; }

.section-content {
    padding: 8px 14px 12px; background: rgba(0,0,0,0.15);
}
.section-content .btn-sm { padding: 5px 10px; font-size: 0.7rem; margin-bottom: 6px; }
.s-field { margin-bottom: 6px; }
.s-field input, .s-field textarea, .s-field select {
    width: 100%; padding: 5px 8px; border: 1px solid var(--border-color); border-radius: 4px;
    background: #ffffff; color: var(--text-main); font-size: 0.72rem; font-family: inherit;
}
.s-field input:focus, .s-field textarea:focus, .s-field select:focus { outline: none; border-color: var(--accent-blue); }
.s-field textarea { resize: vertical; min-height: 40px; }
.s-row { display: flex; gap: 6px; }
.s-row .s-field { flex: 1; }
.s-tabs { display: flex; gap: 2px; margin-bottom: 8px; }
.s-tab {
    flex: 1; padding: 4px; text-align: center; font-size: 0.65rem; cursor: pointer;
    background: #f1f5f9; border-radius: 3px; color: var(--text-muted);
}
.s-tab.active { background: var(--accent-blue); color: #fff; }
.s-data-list { max-height: 100px; overflow-y: auto; margin-top: 6px; }
.s-data-item {
    padding: 3px 6px; font-size: 0.68rem; border-radius: 3px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--text-muted);
}
.s-data-item:hover { background: rgba(59,130,246,0.1); color: var(--text-main); }
.s-del { color: #ef4444; cursor: pointer; display: inline; font-size: 0.8rem; }


/* Old invoice styles kept for item rows */
@media (max-width: 900px) { #invoice-datamanager-content { grid-template-columns: 1fr; } }

/* ==========================================
   10. 瀹㈡埛CRM鏍峰紡
   ========================================== */
.crm-filters {
    display: flex; gap: 12px; margin-bottom: 16px; align-items: center;
}
.crm-filters .search-box {
    flex: 1; position: relative;
}
.crm-filters .search-box i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted);
}
.crm-filters .search-box input {
    width: 100%; padding: 10px 12px 10px 36px;
    background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px;
    color: var(--text-main); font-size: 0.925rem;
}
.crm-filters .search-box input:focus { outline: none; border-color: var(--accent-blue); }
.crm-filters select {
    padding: 10px 12px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); font-size: 0.925rem; min-width: 140px;
}

.data-table {
    width: 100%; border-collapse: collapse;
}
.data-table th, .data-table td {
    padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color);
    font-size: 0.925rem;
}
.data-table th {
    background: rgba(59, 130, 246, 0.1); font-weight: 600; color: var(--text-muted);
    position: sticky; top: 0;
}
.data-table tr:hover { background: rgba(59, 130, 246, 0.05); }

.table-responsive {
    overflow-x: auto; max-height: calc(100vh - 300px);
}

.star-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 0.72rem; font-weight: 700;
}
.star-L0 { background: rgba(148, 163, 184, 0.1); color: #64748b; }
.star-L1 { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
.star-L2 { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.star-L3 { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.star-L4 { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
.star-L5 { background: rgba(239, 68, 68, 0.2); color: #f87171; }

.btn-sm {
    padding: 6px 10px; font-size: 0.72rem; border-radius: 4px;
    cursor: pointer; border: none; transition: all 0.2s;
}
.btn-edit { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
.btn-edit:hover { background: var(--accent-blue); color: #fff; }
.btn-delete { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
.btn-delete:hover { background: var(--accent-red); color: #fff; }

.custom-field-row {
    margin-bottom: 8px; padding: 8px; background: rgba(0,0,0,0.1); border-radius: 6px;
}

/* 鍝嶅簲寮?*/
@media (max-width: 768px) {
    .crm-filters { flex-direction: column; }
    .crm-filters select { width: 100%; }
    .data-table { font-size: 0.78rem; }
    .data-table th, .data-table td { padding: 8px 10px; }
}

/* ==========================================
   11. 缁勭粐鏋舵瀯鏍峰紡
   ========================================== */
.org-container {
    display: flex; gap: 16px; min-height: 500px;
}
.org-sidebar {
    width: 300px; background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border-color);
    overflow-y: auto; max-height: 600px;
}
.org-detail {
    flex: 1; background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border-color);
    padding: 20px;
}

.org-tree {
    padding: 12px;
}
.org-node {
    margin-bottom: 4px;
}
.org-node-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-radius: 6px; cursor: pointer;
    transition: all 0.2s;
}
.org-node-header:hover {
    background: rgba(59, 130, 246, 0.1);
}
.org-node.selected > .org-node-header {
    background: rgba(59, 130, 246, 0.2); border-left: 3px solid var(--accent-green);
}
.org-node-info {
    display: flex; align-items: center; gap: 8px;
}
.org-node-info i {
    color: var(--accent-blue); font-size: 0.925rem;
}
.org-node-name {
    font-weight: 600; font-size: 0.925rem;
}
.org-node-count {
    font-size: 0.72rem; color: var(--text-muted); background: rgba(0,0,0,0.2);
    padding: 2px 6px; border-radius: 10px;
}
.org-node-actions {
    display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s;
}
.org-node-header:hover .org-node-actions {
    opacity: 1;
}
.org-children {
    margin-left: 24px; border-left: 1px dashed var(--border-color); padding-left: 8px;
}

.dept-detail-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color);
}
.dept-detail-header h3 {
    font-size: 1.2rem; color: var(--text-main);
}
.dept-detail-info {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px;
}
.info-item {
    display: flex; align-items: center; gap: 12px;
}
.info-label {
    color: var(--text-muted); font-size: 0.925rem; min-width: 80px;
}
.info-value {
    color: var(--text-main); font-weight: 500;
}
.dept-members h4 {
    font-size: 0.95rem; margin-bottom: 12px; color: var(--text-muted);
}
.member-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; background: rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 6px;
}
.member-info {
    display: flex; align-items: center; gap: 8px;
}
.member-info i {
    color: var(--accent-blue);
}
.member-role {
    font-size: 0.72rem; color: var(--text-muted);
}

@media (max-width: 768px) {
    .org-container { flex-direction: column; }
    .org-sidebar { width: 100%; }
}

/* ==========================================
   12. 绯荤粺璁剧疆鏍峰紡
   ========================================== */
.settings-container {
    display: flex; flex-direction: column; gap: 20px;
}
.settings-section {
    background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border-color);
    overflow: hidden;
}
.settings-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; background: rgba(59, 130, 246, 0.1); border-bottom: 1px solid var(--border-color);
}
.settings-header h3 {
    font-size: 1rem; color: var(--text-main); display: flex; align-items: center; gap: 10px;
}
.settings-header h3 i {
    color: var(--accent-blue);
}
.settings-content {
    padding: 20px;
}
.settings-content .form-row {
    display: flex; gap: 16px; margin-bottom: 16px;
}
.settings-content .form-group {
    flex: 1;
}
.settings-content label {
    display: block; margin-bottom: 6px; font-size: 0.925rem; color: var(--text-muted);
}
.settings-content input, .settings-content textarea {
    width: 100%; padding: 10px 12px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); font-size: 0.925rem;
}
.settings-content input:focus, .settings-content textarea:focus {
    outline: none; border-color: var(--accent-blue);
}
.settings-content textarea {
    resize: vertical; min-height: 60px;
}
.data-list-container {
    margin-top: 16px; border-top: 1px solid var(--border-color); padding-top: 16px;
}

@media (max-width: 768px) {
    .settings-content .form-row { flex-direction: column; }
}

.terms-tabs {
    display: flex; gap: 4px; margin-bottom: 16px;
}
.terms-tabs .s-tab {
    flex: 1; padding: 8px 12px; text-align: center; font-size: 0.925rem; cursor: pointer;
    background: rgba(0,0,0,0.2); border-radius: 6px; color: var(--text-muted);
    transition: all 0.2s;
}
.terms-tabs .s-tab:hover {
    background: rgba(59, 130, 246, 0.1); color: var(--text-main);
}
.terms-tabs .s-tab.active {
    background: var(--accent-blue); color: #fff;
}
.terms-content {
    margin-top: 12px;
}

/* 鏀舵鐮佸浘鐗囬瑙?*/
.payment-img-container {
    display: flex; flex-direction: column; align-items: flex-start;
}
.payment-img-preview {
    width: 200px; height: 200px; border: 2px dashed var(--border-color); border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.1); overflow: hidden;
}
.payment-img-preview img {
    width: 100%; height: 100%; object-fit: contain;
}

/* 鑰冩牳姹囩巼鍗＄墖 */
.rate-main-setting {
    display: flex; gap: 16px; flex-wrap: wrap;
}
.rate-card {
    background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px; padding: 16px; min-width: 250px;
}
.rate-card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.rate-currency {
    font-weight: 700; font-size: 1.1rem; color: var(--accent-blue);
}
.rate-label {
    font-size: 0.8rem; color: var(--text-muted);
}
.rate-card-body {
    display: flex; align-items: center; gap: 12px;
}
.rate-input {
    width: 120px; padding: 10px 12px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); font-size: 1.2rem; font-weight: 700;
    text-align: center;
}
.rate-input:focus {
    outline: none; border-color: var(--accent-blue);
}
.rate-unit {
    font-size: 0.925rem; color: var(--text-muted);
}

/* ==========================================
   绫荤洰閫夋嫨鍣ㄦ牱寮?
   ========================================== */
.category-filter {
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.875rem;
    outline: none;
    cursor: pointer;
    min-width: 160px;
    max-width: 200px;
    appearance: auto;
    -webkit-appearance: auto;
}
.category-filter:focus {
    border-color: var(--accent-blue);
}
.category-filter option {
    background: var(--bg-card);
    color: var(--text-main);
}

/* 浜у搧琛ㄥ崟涓殑鍝佺被涓嬫媺 */
#pf-category {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.925rem;
    outline: none;
    cursor: pointer;
}
#pf-category:focus {
    border-color: var(--accent-blue);
}

/* ==========================================
   椤舵爮鑰冩牳姹囩巼鏄剧ず
   ========================================== */

/* Top bar right group: AI badge + exchange rate */
.topbar-right-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.topbar-ai-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #fff;
    flex-shrink: 0;
    cursor: default;
}
.topbar-ai-status i { font-size: 0.95rem; }
.topbar-ai-status span { font-weight: 500; }
.topbar-ai-status.success {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
.topbar-ai-status.success i { color: #fff; }
.topbar-ai-status.fail {
    background: #6b7280;
    color: #e5e7eb;
}
.topbar-ai-status.fail i { color: #9ca3af; }
/* AI status text pill - matches rate-value height */
.topbar-ai-status #ai-status-text {
    font-size: 1rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}
.topbar-ai-status.success #ai-status-text {
    background: rgba(255,255,255,0.3);
}
.topbar-ai-status.fail #ai-status-text {
    background: rgba(255,255,255,0.15);
}

.topbar-rate {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-green);
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.8rem;
}
.topbar-rate i {
    color: #fff;
    font-size: 0.75rem;
}
.topbar-rate-text {
    color: rgba(255,255,255,0.85);
    font-size: 0.7rem;
}
.topbar-rate-value {
    color: #1a5c2a;
    font-weight: 700;
    font-size: 0.925rem;
}

.topbar-rate {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--accent-green);
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #fff;
    flex-shrink: 0;
}
.topbar-rate i {
    color: #fff;
    font-size: 0.95rem;
}
.topbar-rate-label {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}
.topbar-rate-value {
    color: #1a5c2a;
    font-weight: 700;
    font-size: 1rem;
    background: rgba(255,255,255,0.3);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ==========================================
   绫荤洰鍐呭祵缂栬緫鏍峰紡
   ========================================== */
.cat-inline-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.925rem;
    outline: none;
}
.cat-inline-input:focus {
    border-color: var(--accent-blue);
}
.cat-save-btn {
    background: #22c55e !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
}
.cat-del-btn {
    background: #ef4444 !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
}
.category-add-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}
.category-add-row input {
    flex: 1;
    padding: 8px 12px;
    background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); font-size: 0.925rem; outline: none;
}
.category-add-row input:focus {
    border-color: var(--accent-blue);
}

/* ==========================================
   浜у搧鍗＄墖浠锋牸鍗曚綅涓庢眹鐜囨樉绀?
   ========================================== */
.price-unit {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 400;
}
.product-card-rate {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 120px;
}
.rate-label {
    font-size: 0.72rem;
    color: #22c55e;
    font-weight: 600;
}
.rate-note {
    font-size: 0.6rem;
    color: var(--text-muted);
}
/* 浜у搧鍗＄墖鏄犲皠閾炬帴鏁板瓧 */
.product-links-group {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}
.product-link-num {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 1px 5px;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.15s;
}
.product-link-num:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}



/* 闅愯棌鏁板瓧杈撳叆妗嗙殑澧炲噺鎸夐挳 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-copy-whatsapp {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #64748b;
    padding: 2px 6px;
    transition: all 0.15s;
}
.btn-copy-whatsapp:hover {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}
/* ===== 客户CRM — 匹配专案追踪风格 ===== */
.crm-layout { display: flex; width: 100%; height: 100%; }
.crm-folder-panel {
    width: 280px; background: #f8fafc; border-right: 1px solid #e2e8f0;
    display: flex; flex-direction: column; overflow: hidden;
}
.crm-search-box input {
    width: 100%; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 0.8rem; outline: none; background: #fff; color: #334155;
    transition: border-color 0.2s;
}
.crm-search-box input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.crm-client-list { flex: 1; overflow-y: auto; }
.crm-client-list .folder-group { margin-bottom: 2px; }
.crm-client-list .folder-header {
    padding: 10px 15px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
    cursor: pointer; display: flex; align-items: center;
    font-size: 12px; font-weight: 700; color: #475569;
    transition: background 0.15s;
}
.crm-client-list .folder-header:hover { background: #e2e8f0; }
.crm-client-list .folder-header.active { background: #dbeafe; color: #1e40af; }

.crm-main { flex: 1; overflow-y: auto; background: #fff; min-width: 0; }
.crm-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.crm-toolbar select {
    padding: 6px 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
    color: #334155; font-size: 0.8rem; outline: none; box-sizing: border-box;
}
.crm-card-grid { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.crm-header {
    display: flex; align-items: center; gap: 6px; padding: 10px 12px;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
    font-weight: 700; color: #64748b; font-size: 0.78rem;
}
.crm-row {
    display: flex; align-items: center; gap: 6px; padding: 7px 12px;
    border-bottom: 1px solid #f1f5f9; cursor: pointer;
    transition: background 0.15s; font-size: 0.8rem; color: #334155;
}
.crm-row:last-child { border-bottom: none; }
.crm-row:hover { background: #f0fdf4; }

/* Virtual scrolling support */
#crm-client-list { max-height: calc(100vh - 200px); }
#customer-card-grid { position: relative; min-height: 100px; }
#crm-virtual-viewport { pointer-events: auto; }

/* CRM resizable column widths */
:root {
  --crm-col-star: 50px;
  --crm-col-country: 45px;
  --crm-col-contact: 80px;
  --crm-col-consignee: 70px;
  --crm-col-phone: 90px;
  --crm-col-copywa: 28px;
  --crm-col-whatsapp: 90px;
  --crm-col-email: 120px;
  --crm-col-address: 120px;
}
.crm-cell { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.crm-cell-star { width: var(--crm-col-star, 50px); text-align: center; }
.crm-cell-country { width: var(--crm-col-country, 45px); }
.crm-cell-contact { width: var(--crm-col-contact, 80px); font-weight: 600; }
.crm-cell-consignee { width: var(--crm-col-consignee, 70px); }
.crm-cell-phone { width: var(--crm-col-phone, 90px); font-size: 0.72rem; }
.crm-cell-copywa { width: var(--crm-col-copywa, 28px); text-align: center; }
.crm-cell-whatsapp { width: var(--crm-col-whatsapp, 90px); font-size: 0.72rem; }
.crm-cell-email { width: var(--crm-col-email, 120px); font-size: 0.72rem; }
.crm-cell-address { width: var(--crm-col-address, 120px); cursor: pointer; }
.crm-cell-notes { flex: 1; min-width: 60px; }


/* CRM column resize - pseudo-element handles on header cells */
#crm-resize-header .crm-cell {
  position: relative;
}
#crm-resize-header .crm-cell::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 2;
}
#crm-resize-header .crm-cell.dragging::after {
  background: rgba(13,148,136,0.3);
}
#crm-resize-header { user-select: none; }
.crm-copywa-btn {
    background: none; border: 1px solid #e2e8f0; border-radius: 4px;
    color: #94a3b8; cursor: pointer; padding: 1px 4px; font-size: 0.65rem;
    transition: all 0.15s;
}
.crm-copywa-btn:hover { background: #25D366; color: #fff; border-color: #25D366; }
.crm-empty { text-align: center; color: #94a3b8; padding: 40px; }
.crm-empty i { font-size: 2rem; margin-bottom: 12px; display: block; }

/* 星级徽章 */
.badge-star {
    display: inline-block; padding: 1px 6px; border-radius: 10px;
    font-size: 0.7rem; font-weight: 700; text-align: center; min-width: 32px;
}
.badge-star.badge-l0 { background: #f1f5f9; color: #64748b; }
.badge-star.badge-l1 { background: #e0f2fe; color: #0369a1; }
.badge-star.badge-l2 { background: #fef3c7; color: #b45309; }
.badge-star.badge-l3 { background: #dcfce7; color: #15803d; }
.badge-star.badge-l4 { background: #fae8ff; color: #a21caf; }

/* 右键菜单 */
.crm-context-menu { position: fixed; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 9999; min-width: 140px; padding: 4px 0; font-size: 0.8rem; }
.crm-context-menu div { padding: 6px 16px; cursor: pointer; color: #334155; }
.crm-context-menu div:hover { background: #f0fdf4; color: #1ead6f; }
.crm-submenu { position: absolute; left: 100%; top: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); min-width: 130px; padding: 4px 0; display: none; }
.crm-submenu-item { padding: 6px 16px; cursor: pointer; font-size: 0.8rem; color: #334155; }
.crm-submenu-item:hover { background: #f0fdf4; color: #1ead6f; }
.crm-submenu-empty { padding: 6px 16px; font-size: 0.78rem; color: #94a3b8; }

/* Loading */
.crm-loading { padding: 20px; text-align: center; color: #94a3b8; }

/* 鍦板潃姘旀场 */
.address-bubble {
    position: fixed;
    z-index: 9999;
    background: #1e293b;
    color: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    max-width: 320px;
    word-break: break-all;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    line-height: 1.4;
}
.address-bubble::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 16px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #1e293b;
}
}
.addr-text {
    display: block;
    margin-bottom: 6px;
    line-height: 1.4;
}
.addr-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.15s;
}
.addr-copy-btn:hover {
    background: #2563eb;
}
.addr-copy-btn.addr-copied {
    background: #16a34a;
}

/* ==========================================
   Project Radar Integrated Styles v1.0
   ========================================== */
.radar-layout {
    display: flex; height: calc(100vh - 120px);
    background: #fff; border-radius: 12px; overflow: hidden;
    border: 1px solid #e2e8f0; margin-top: 10px;
}
.radar-sidebar {
    width: 260px; background: #f8fafc; border-right: 1px solid #e2e8f0;
    display: flex; flex-direction: column;
}
.radar-search-box { padding: 15px; border-bottom: 1px solid #e2e8f0; }
.radar-search-box input {
    width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 13px;
}
.radar-client-list { flex: 1; overflow-y: auto; }
.radar-client-item {
    padding: 12px 20px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: 0.2s;
}
.radar-client-item:hover { background: #f1f5f9; }
.radar-client-item.active { background: #ecfdf5; border-left: 4px solid #1ead6f; }
.radar-client-item .name { font-weight: 700; font-size: 14px; color: #1e293b; margin-bottom: 4px; }
.radar-client-item .meta { font-size: 11px; color: #64748b; }

.radar-main { flex: 1; padding: 25px; overflow-y: auto; background: #fff; }
.radar-header-box { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; }
.radar-meta { font-size: 12px; color: #64748b; margin-top: 5px; }
.badge-status { padding: 2px 8px; border-radius: 6px; background: #fef3c7; color: #92400E; font-size: 10px; font-weight: 700; }

.radar-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; }
.radar-stat-card { background: #fff; border: 1px solid #e2e8f0; padding: 15px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.radar-stat-card .label { font-size: 11px; color: #64748b; margin-bottom: 5px; }
.radar-stat-card .val { font-size: 18px; font-weight: 800; color: #1e293b; }

.radar-content-layout { display: grid; grid-template-columns: 1fr 300px; gap: 25px; }
.radar-timeline { position: relative; padding-left: 20px; border-left: 2px solid #f1f5f9; margin-left: 5px; }
.radar-timeline-item { position: relative; padding-bottom: 25px; }
.radar-timeline-item::before { content: ''; position: absolute; left: -27px; top: 5px; width: 12px; height: 12px; background: #fff; border: 3px solid #1ead6f; border-radius: 50%; }
.radar-timeline-item .date { font-size: 11px; color: #94a3b8; margin-bottom: 5px; }
.radar-timeline-item .box { background: #f8fafc; padding: 12px; border-radius: 10px; border: 1px solid #e2e8f0; }
.radar-timeline-item .info { font-size: 12px; margin: 5px 0; color: #475569; }
.radar-timeline-item .price { font-weight: 700; font-size: 14px; color: #1e293b; }
.badge-tag { padding: 2px 6px; border-radius: 4px; background: #e2e8f0; font-size: 10px; color: #475569; }

.radar-sop-card { background: #ecfdf5; border: 1px solid #d1fae5; padding: 15px; border-radius: 12px; }
.sop-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 10px; color: #065f46; }
.radar-chart-container { height: 150px; margin-top: 15px; }

.btn-radar { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
.btn-wa { background: #25D366; color: #fff; }
.btn-ali { background: #ff6600; color: #fff; }
.btn-email { background: #1a56db; color: #fff; }
.btn-radar:hover { opacity: 0.9; transform: translateY(-1px); }

.radar-empty-state { text-align: center; padding: 100px 0; color: #94a3b8; }
.radar-empty-state i { color: #e2e8f0; margin-bottom: 15px; }

/* ===== 工具导航 ===== */
.tool-nav-wrapper { padding: 20px; max-width: 1200px; }
.tool-tab-bar { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid var(--border-color); }
.tool-tab-btn { padding: 10px 28px; border: none; background: none; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; }
.tool-tab-btn.active { color: var(--accent-dark); border-bottom-color: var(--accent-green); }
.tool-tab-btn:hover { color: var(--accent-dark); }
.tool-tab-content { display: none; }
.tool-tab-content.active { display: block; }
.tool-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tool-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s; }
.tool-card:hover { box-shadow: var(--shadow-md); }
.tool-card-icon { font-size: 1.5rem; margin-bottom: 4px; }
.tool-card-title { font-size: 0.85rem; font-weight: 700; color: var(--accent-dark); margin-bottom: 12px; }
.tool-card-body input[type="number"] { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.9rem; outline: none; transition: border 0.15s; box-sizing: border-box; }
.tool-card-body input[type="number"]:focus { border-color: var(--accent-green); }
.tool-fx-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.tool-fx-row select { padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.8rem; background: #fff; outline: none; cursor: pointer; }
.tool-fx-row span { font-size: 0.85rem; color: var(--text-muted); }
.tool-result { font-size: 1.1rem; font-weight: 700; color: var(--accent-dark); margin-top: 8px; min-height: 24px; }
.tool-result-words { font-size: 0.78rem; color: var(--accent-dark); margin-top: 8px; padding: 8px; background: #f0fdf4; border-radius: 6px; min-height: 20px; line-height: 1.5; word-break: break-word; }
.tool-rate { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; min-height: 16px; }
.tool-currency-label { font-size: 0.8rem; font-weight: 700; color: var(--accent-green); min-width: 36px; }
.tool-link-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 32px 20px; text-align: center; cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow-sm); }
.tool-link-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.tool-link-icon { font-size: 2.5rem; margin-bottom: 12px; }
.tool-link-name { font-size: 0.9rem; font-weight: 600; color: var(--text-main); }

/* ==========================================
   OKR 视图（左侧 OKR > 目标/对齐/复盘，内嵌飞书页面）
   ========================================== */
.view-section.okr-view-section { padding: 0; overflow: hidden; }
.view-section.okr-view-section.active { display: flex; flex-direction: column; }
.okr-frame { flex: 1; width: 100%; border: none; background: #fff; }

/* WorkBench 快捷入口按钮（顶栏） */
.topbar-workbench-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s, transform .1s;
}
.topbar-workbench-btn:hover { opacity: .88; }
.topbar-workbench-btn:active { transform: scale(.98); }