:root {
    /* Brand Colors */
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --primary-glow: rgba(99, 102, 241, 0.3);
    --editor-focus-bg: rgba(99, 102, 241, 0.06);
    
    /* Backgrounds */
    --bg-dark: #0f172a;
    --bg-card: rgba(30, 30, 46, 0.9);
    --bg-card-hover: rgba(255, 255, 255, 0.04);
    
    /* Glassmorphism System */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-heavy: rgba(255, 255, 255, 0.08);
    --glass-border: var(--color-border);
    --glass-border-light: rgba(255, 255, 255, 0.05);
    
    /* Text Palette */
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
    --text-muted: rgba(255, 255, 255, 0.4);
    
    /* Status Colors */
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;

    /* ExpertHub 2.0 Design Tokens (The Foundation) */
    --eh-radius-pill: 50px;
    --eh-radius-card: 32px;
    --eh-radius-input: 16px;
    --eh-shadow-premium: 0 10px 30px rgba(99, 102, 241, 0.25);
    --eh-shadow-elevated: 0 15px 40px rgba(0, 0, 0, 0.5);
    --eh-glass-gradient: linear-gradient(145deg, rgba(30, 30, 45, 0.9), rgba(20, 20, 30, 0.95));
    --eh-input-bg: rgba(0, 0, 0, 0.3);

    /* 2026-07-31 移除:原本這裡有一組 "Component Architecture Tokens"
       (--radius-sm/md/lg/xl/full 與 --space-xs/sm/md/lg/xl),用的是**與 tokens.css
       完全相同的變數名**,而 style.css 載入順序在 tokens.css 之後 ——
       等於把設計系統的圓角與間距整組蓋掉(--space-xs 4px vs 8、--radius-lg 20px vs 12)。

       後果是同一個共用元件在不同頁長得不一樣:載入 style.css 的 15 頁拿到舊值,
       只載 tokens.css 的頁面(PERSONA 後台、Pipeline)拿到規範值。Ken 回報
       「不同頁的 Logo 長得不一樣」,字體之外的另一半原因就是這個 ——
       品牌兩段文字之間的 gap 取 --space-xs,一頁 4px、另一頁 8px。

       直接刪除而非改值的依據:實測 style.css 內部**零處**引用這些變數
       (`var(--radius-*)` / `var(--space-*)` 各 0 次),它們的唯一作用就是遮蔽
       設計系統。刪掉後全站統一由 tokens.css 供值。 */

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Elevation Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.4);
}

/* Theme Overrides for Modal Content */
.opp-todo-theme {
    --primary-color: #10b981 !important;
    --primary-glow: rgba(16, 185, 129, 0.3) !important;
    --editor-focus-bg: rgba(16, 185, 129, 0.06) !important;
}
.visit-theme {
    --primary-color: #6366f1 !important;
    --primary-glow: rgba(99, 102, 241, 0.3) !important;
    --editor-focus-bg: rgba(99, 102, 241, 0.06) !important;
}

/* ==========================================================================
   ExpertHub DESIGN SYSTEM 2.0 - CORE COMPONENTS
   These classes are the building blocks for the future unified UI.
   ========================================================================== */

/* 2.0 Capsule Button */
.eh-btn-pill {
    padding: 12px 28px;
    border-radius: var(--eh-radius-pill);
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--eh-shadow-premium);
    height: 48px;
}

.eh-btn-primary {
    background: var(--primary-color);
    color: white;
}
.eh-btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.4);
}

.eh-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid var(--color-border);
}
.eh-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 2.0 Glass Input */
.eh-input {
    width: 100%;
    padding: 14px 20px;
    background: var(--eh-input-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--eh-radius-input);
    color: white;
    outline: none;
    font-size: 1rem;
    transition: all var(--transition-fast);
}
.eh-input:focus {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.05);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* 2.0 Premium Card */
.eh-card {
    background: var(--eh-glass-gradient);
    border-radius: var(--eh-radius-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--eh-shadow-elevated);
    padding: 2.5rem;
    backdrop-filter: blur(12px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background: var(--bg-dark);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* Background Blobs */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.blob {
    position: absolute;
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    filter: blur(80px);
    opacity: 0.15;
    border-radius: 50%;
    animation: move 20s infinite alternate;
}

.blob1 { top: -100px; right: -100px; background: #6366f1; }
.blob2 { bottom: -100px; left: -100px; background: #ec4899; animation-delay: -5s; }

@keyframes move {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(100px, 100px) scale(1.1); }
}

.container {
    width: 100%;
    max-width: 1400px;
    z-index: 1;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.logo h1 {
    font-size: 1.8rem;
    font-weight: 700;
}

.logo span {
    color: var(--primary-color);
}

.user-profile {
    background: var(--glass-bg);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--glass-border);
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--success);
}

.main-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    align-items: start;
}

.sidebar {
    background: var(--glass-bg);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    min-height: 600px;
    position: sticky;
    top: 20px;
}

.content-area {
    min-width: 0;
}

@media (max-width: 1100px) {
    .main-layout { 
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    .sidebar {
        width: 100%;
        position: static;
    }
}

.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3);
    /* Basic Layering */
    transform: translateZ(0);
}

h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Form Styles */
.input-group {
    margin-bottom: 1.25rem;
}

label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    color: white;
    outline: none;
    transition: all 0.3s;
}

input:focus {
    border-color: var(--primary-color);
}

textarea {
    background-clip: padding-box !important;
}

textarea::-webkit-resizer, textarea::-webkit-scrollbar-corner {
    background: transparent !important;
    background-color: transparent !important;
}

.btn-primary {
    width: 100%;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

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

/* Visit Record Card System (Centralized) */
.visit-section-container {
    background: var(--bg-card);
    border: 1px solid var(--glass-border-light);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.topics-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
}

.topic-row {
    display: flex;
    align-items: stretch;
    background: var(--glass-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border-light);
    transition: all 0.3s;
}

.topic-row:hover {
    border-color: var(--primary-glow);
    background: var(--bg-card-hover);
}

.topic-label-container {
    width: 140px;
    display: flex;
    align-items: center;
    padding: 15px;
    background: var(--glass-bg);
    border-right: 1px solid var(--glass-border-light);
}

.topic-label-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 700;
    outline: none;
    text-align: center;
}

/* Quill Editor Capsule Integration */
.topic-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ql-toolbar.ql-snow {
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    border-bottom: 1px solid var(--glass-border-light) !important;
    padding: 8px 12px !important;
}

/* Brighten Quill Icons for Dark Mode */
.ql-snow .ql-stroke {
    stroke: var(--text-dim) !important;
    transition: stroke 0.2s;
}
.ql-snow .ql-fill {
    fill: var(--text-dim) !important;
    transition: fill 0.2s;
}
.ql-snow .ql-picker {
    color: var(--text-dim) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--primary-color) !important;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--primary-color) !important;
}

.ql-container.ql-snow {
    border: none !important;
    background: transparent !important;
}

.ql-editor {
    color: var(--text-main);
    padding: 12px 15px !important;
}

.topic-content-quill .ql-editor,
.topic-content-quill-todo .ql-editor {
    min-height: 110px;
}

/* Improve Placeholder Visibility */
.ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.3) !important;
    font-style: normal !important;
}

.ql-editor:focus {
    background: var(--primary-glow);
}

.topic-content-quill .ql-editor:focus,
.topic-content-quill-todo .ql-editor:focus {
    background: var(--editor-focus-bg) !important;
}

/* Rich Text Content Global Rendering */
.rich-text-content {
    line-height: 1.6;
    color: var(--text-main);
}
.rich-text-content p { margin-top: 0; margin-bottom: 10px; font-size: inherit; line-height: inherit; }
.rich-text-content p:last-child { margin-bottom: 0; }
.rich-text-content p:has(> br:only-child) { margin-top: 0; margin-bottom: 2px; }
.rich-text-content ul, .rich-text-content ol { padding-left: 1.5rem; margin: 10px 0; }
.rich-text-content strong { color: var(--primary-color); font-weight: 700; }

.btn-nav-home, .btn-nav-glass {
    box-sizing: border-box;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 0 24px;
    border-radius: 12px;
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    white-space: nowrap;
}

.btn-nav-home:hover, .btn-nav-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}


/* Table Styles */
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.search-bar input {
    width: 250px;
    padding: 0.6rem 1rem;
}

.table-container {
    overflow-x: auto;
}

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

th {
    text-align: left;
    color: var(--text-dim);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

td {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.05rem;
}

.tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-color);
    font-size: 1.05rem;
    font-weight: 600;
    margin-right: 6px;
    margin-bottom: 6px;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 1.2rem 2.5rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    text-align: center;
    border: 1px solid var(--color-border);
}

.toast.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }

/* Deletion Styles */
.btn-delete { background: none; border: 1px solid var(--danger); color: var(--danger); padding: 8px 16px; border-radius: 10px; cursor: pointer; transition: 0.3s; font-size: 1.05rem; font-weight: 600; }
.btn-delete:hover { background: var(--danger); color: white; }

.form-nav-item { position: relative; padding-right: 40px; }
.form-delete-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: none; border: none; color: var(--text-dim); cursor: pointer; display: none; }
.form-nav-item:hover .form-delete-btn { display: block; }
.form-delete-btn:hover { color: var(--danger); }

/* Modal override */
.modal-content { max-width: 600px; width: 90%; }

/* Global Pill Button (Absolute UI Rule) */
.btn-add-pill {
    background: var(--primary-color);
    border: none;
    color: white;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-add-pill:hover {
    background: var(--primary-hover);
    transform: scale(1.02);
}

/* ==========================================================================
   [DASHBOARD] ?€銵冽 雿???隞?(Migrated from index.html)
   ========================================================================== */
.sidebar { 
    background: var(--glass-bg); 
    padding: 2.5rem 2rem; 
    border-radius: 16px; 
    border: 1px solid var(--glass-border); 
    height: 100%;
    min-height: 750px;
    display: flex;
    flex-direction: column;
}
.form-nav-item { padding: 12px; margin-bottom: 8px; border-radius: 8px; cursor: pointer; transition: 0.3s; color: var(--text-dim); }
.form-nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
.form-nav-item.active { background: var(--primary-color); color: white; }
.action-bar { display: flex; gap: 15px; margin-bottom: 2rem; }
.main-layout { 
    display: grid; 
    grid-template-columns: 250px 1fr; 
    gap: 2rem; 
    align-items: stretch;
}
.content-area {
    height: 100%;
}
.list-section {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 750px;
}
.empty-state { padding: 4rem; text-align: center; color: var(--text-dim); }
.table-container { 
    overflow-x: auto; 
    overflow-y: auto; 
    width: 100%; 
    border-radius: 12px; 
    flex: 1; /* Architect's Fix: Stretch to fill the bottom space */
    min-height: 400px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.table-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}
table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 800px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95rem; }
th { 
    color: var(--text-dim); 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.05rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #141b2d; /* Solid dark color to prevent overlap visibility */
    box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.col-action { text-align: center !important; }

/* Premium Custom Checkbox Styles */
.record-checkbox { 
    appearance: none; -webkit-appearance: none; width: 18px; height: 18px; 
    cursor: pointer; border: 2px solid rgba(99, 102, 241, 0.4); border-radius: 4px; 
    background: rgba(255, 255, 255, 0.05); display: inline-flex; align-items: center; 
    justify-content: center; position: relative; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    vertical-align: middle; accent-color: var(--primary-color);
}
.record-checkbox:checked { background: var(--primary-color); border-color: var(--primary-color); box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
.record-checkbox:checked::after { content: "✔"; color: white; font-size: 12px; font-weight: bold; }
.record-checkbox:hover { border-color: var(--primary-color); transform: scale(1.1); }
.record-checkbox:active { transform: scale(0.9); }

tr.selected { background: rgba(99, 102, 241, 0.15) !important; }
.btn-delete:hover { background: #ff4d4d; transform: scale(1.05); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); }
.btn-delete:active { transform: scale(0.95); }

.logout-btn { background: none; border: 1px solid var(--danger); color: var(--danger); padding: 5px 15px; border-radius: 8px; cursor: pointer; font-size: 0.8rem; width: 100%; text-align: left; }
.logout-btn:hover { background: var(--danger); color: white; }

/* Dropdown styles */
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; right: -20px; top: calc(100% + 2px); background-color: rgba(20, 20, 30, 0.96); min-width: 200px; box-shadow: 0px 15px 35px rgba(0,0,0,0.6); z-index: 1001; border-radius: 16px; border: 1px solid var(--glass-border); padding: 12px; backdrop-filter: blur(15px); }
.dropdown-content::before { content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px; background: transparent; }
.dropdown.active .dropdown-content { display: block; }
.dropdown-item { padding: 10px; color: white; text-decoration: none; display: block; border-radius: 8px; transition: 0.2s; cursor: pointer; font-size: 0.9rem; }
.dropdown-item:hover { background: rgba(255,255,255,0.1); }

tr.clickable { cursor: pointer; transition: 0.2s; }
tr.clickable:hover { background: rgba(255,255,255,0.05); }


/* ==========================================================================
   [DETAIL] 閰喟敦鞈? 閬?雿? (Migrated from record_detail.html)
   ========================================================================== */
.detail-layout, #mainContent, #unifiedSectionsContainer { 
    display: flex; 
    flex-direction: column; 
    gap: 80px; 
}
section:empty { display: none !important; }

/* SAFE SCOPING: Only affect sections inside detail layout */
.detail-layout section, #mainContent section { margin-bottom: 0 !important; padding: 0 !important; }
.detail-layout section:has(.horizontal-gallery), #mainContent section:has(.horizontal-gallery) {

}

.section-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 24px !important; margin-top: 0 !important; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 15px; color: white; border-left: 5px solid var(--primary-color); padding: 5px 0 5px 20px; width: 100%; }
.section-title span { white-space: nowrap; }

/* --- Unified Card System (Performance Optimized) --- */
.info-card { 
    padding: 2rem; 
    border: 1px solid var(--color-border); 
    position: relative; 
    border-radius: 32px; 
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    /* Force GPU Acceleration & Isolation */
    backface-visibility: hidden; 
    transform: translateZ(0); 
    will-change: transform;
    contain: content;
}
.card-with-actions { padding-top: 4.5rem !important; }
.info-card:hover, .persona-card:hover { 
    border-color: rgba(99, 102, 241, 0.6); 
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 1));
}
/* 有排版設計的外層卡片 hover 不套用 CSS 規則，由 formRenderer 的 onmouseover 控制 */
.info-card:has(.form-renderer-canvas):hover {
    border-color: transparent !important;
    background: transparent !important;
}
.field-grid { display: flex; flex-direction: column; gap: 24px; width: 100%; padding-bottom: 30px !important; }
.info-card-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: stretch; }
.field-item { display: flex; flex-direction: column; gap: 0.5rem; padding: 12px; border-bottom: 1px solid var(--color-border); transition: 0.3s; height: 100%; box-sizing: border-box; }
.field-item label { font-size: 1.05rem; color: var(--primary-color); display: block; margin-bottom: 4px; letter-spacing: 0.5px; font-weight: 700; }
.field-value { font-weight: 600; font-size: 1.05rem; color: white; line-height: 1.5; word-break: break-all; white-space: pre-wrap; }

/* 1. Gallery Normal (Business Cards) */
.horizontal-gallery .info-card:not(.card-wide) { flex: 0 0 calc(50% - 20px); max-height: 700px; overflow-y: auto; }
.horizontal-gallery .info-card:not(.card-wide) .info-card-fields { grid-template-columns: 1fr; gap: 0.1rem; }
.horizontal-gallery .info-card:not(.card-wide) .field-item { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 20px; }
.horizontal-gallery .info-card:not(.card-wide) .field-item label { color: var(--primary-color); font-weight: 700; margin-bottom: 0; text-transform: uppercase; }

/* 2. Gallery Wide (Visit Records & Persona) */
.card-wide { flex: 0 0 100% !important; max-height: 700px; overflow-y: auto; }
.card-wide .info-card-fields { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem; }

.btn-mini { padding: 0 16px; font-size: 0.85rem; width: 95px; min-width: 95px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.btn-delete-icon { width: 42px !important; min-width: 42px !important; background: var(--danger) !important; color: white; border: none; cursor: pointer; border-radius: 10px; height: 38px; display: flex; align-items: center; justify-content: center; }
.btn-download-icon { width: 42px !important; min-width: 42px !important; background: var(--primary-color) !important; color: white; border: none; cursor: pointer; border-radius: 10px; height: 38px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: 0.3s; }
.btn-download-icon:hover { background: var(--primary-hover) !important; transform: scale(1.1); }
.sub-actions { position: absolute; top: 1.8rem; right: 2rem; display: flex; gap: 10px; align-items: center; z-index: 10; }
.record-header { display: flex; justify-content: flex-start; gap: 15px; align-items: center; border-bottom: 1px solid rgba(99, 102, 241, 0.3); padding-bottom: 15px; margin-bottom: 25px; }
.date-badge { background: rgba(99,102,241,0.1); color: var(--primary-color); border: 1px solid var(--primary-color); padding: 5px 18px; border-radius: 20px; font-size: 0.9rem; font-weight: 700; }
.btn-add-pill { width: auto; min-width: 160px; height: 42px; background: var(--primary-color); border: none; color: white; border-radius: 20px; font-weight: 700; cursor: pointer; transition: 0.3s; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); padding: 0 20px; }
.btn-add-pill:hover { background: var(--primary-hover); transform: scale(1.01); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); }
/* ==========================================================================
   GLOBAL MODAL SYSTEM (Premium Glassmorphism)
   ========================================================================== */
.modal, .modal-overlay { 
    display: none; 
    position: fixed; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.85); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000; 
    justify-content: center; 
    align-items: center; 
    padding: 20px;
    box-sizing: border-box;
    animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.modal-content-glass {
    background: rgba(17, 24, 39, 0.95);
    border: 1px solid rgba(99, 102, 241, 0.4);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    border-radius: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.modal-body { 
    flex: 1;
    overflow-y: auto; 
    margin: 1.5rem 0; 
    padding-right: 12px; 
}

/* Custom Scrollbar for Modal Body */
/* 彈窗內的捲軸維持 6px(區域窄),顏色沿用全域的中性灰 —— 原本是實色主色拉把,
   在小面積上比內容還搶眼(2.3 視覺靜默) */
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-lg); }
.grid-cell-input { 
    width: 100%; 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid var(--color-border-strong); 
    color: white; 
    border-radius: 8px; 
    padding: 12px; 
    outline: none; 
    transition: all 0.3s;
}
.grid-cell-input:focus {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.07);
}
.grid-cell-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}
select.grid-cell-input { height: 45px; }

/* Fix persona select dropdown visibility in dark mode */
select option {
    background-color: #1a1a1a;
    color: white;
}
select optgroup {
    background-color: #1a1a1a;
    color: #c084fc;
    font-weight: bold;
    font-style: normal;
}
select.grid-cell-input option {
    background-color: var(--bg-dark);
    color: white;
}
textarea.grid-cell-input { min-height: 60px; }

/* Persona Specific Styles (Performance Optimized) */
.persona-card { 
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(88, 28, 135, 0.2)); 
    border: 1px solid var(--color-border); 
    border-radius: 20px; 
    padding: 20px; 
    position: relative !important;
    backface-visibility: hidden; 
    transform: translateZ(0); 
    will-change: transform;
    contain: content;
}

/* --- Horizontal Gallery System --- */
.horizontal-gallery { 
    display: flex; 
    align-items: flex-start; 
    overflow-x: auto; 
    overflow-y: hidden; 
    gap: 32px; 
    padding: 20px 0 30px 0 !important; 
    scroll-snap-type: x mandatory; 

    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
.horizontal-gallery::-webkit-scrollbar { display: none; }
.gallery-full-width { padding-left: 0 !important; padding-right: 0 !important; }
.horizontal-gallery .info-card, .horizontal-gallery .persona-card { flex-shrink: 0; scroll-snap-align: start; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative !important; }
.horizontal-gallery .info-card:last-child, .horizontal-gallery .persona-card:last-child { margin-right: calc(50% + 20px); }
.horizontal-gallery .card-wide { flex: 0 0 100% !important; scroll-snap-align: start; max-height: 700px; display: flex; flex-direction: column; overflow-y: auto; }
.field-grid .info-card, .field-grid .persona-card { width: 100%; }

/* Release overflow restrictions when editing to let dropdown bleed out beautifully */
.horizontal-gallery.editing-active .card-wide,
.card-wide.editing-active {
    overflow: visible !important;
    max-height: none !important;
    contain: none !important;
}
.horizontal-gallery.editing-active .info-card,
.info-card.editing-active {
    overflow: visible !important;
    max-height: none !important;
    contain: none !important;
}

/* --- Internal Scrollbar Beauty ---
   2026-07-31 移除:這條全域捲軸樣式只存在於 style.css,所以只載 tokens.css 的頁面
   (PERSONA 後台、Pipeline)拿到的是作業系統原生捲軸 —— 同一個側欄在不同頁長相不同
   (Ken 回報)。且拉把色 rgba(99,102,241,.3) 是舊 Indigo 主題殘留、軌道
   rgba(0,0,0,.2) 是深色底假設。已改為 tokens.css 的中性灰版本,全站一致。 */

/* Mobile Adjustments */
@media (max-width: 600px) { .persona-card, .info-card { flex: 0 0 85vw !important; } }
.persona-meta { font-size: 1.05rem; color: var(--text-dim); margin-bottom: 15px; display: flex; gap: 15px; }
.ai-result-box { background: rgba(0,0,0,0.2); padding: 20px; border-radius: 12px; color: rgba(255,255,255,0.9); font-size: 1.05rem; line-height: 1.7; white-space: pre-wrap; border-left: 3px solid var(--primary-color); }
.ref-tag { background: rgba(255,255,255,0.1); padding: 2px 10px; border-radius: 4px; font-size: 1.05rem; margin-right: 5px; }

/* Persona UI Enhancements */
.source-card { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-radius: 16px; cursor: pointer; border: 1px solid var(--color-border); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); user-select: none; }
.source-card .icon { font-size: 1.2rem; filter: saturate(0.5); transition: 0.3s; }
.source-card .label { font-size: 1.05rem; font-weight: 600; color: var(--text-dim); transition: 0.3s; }
.source-card:hover { transform: scale(1.02); background: rgba(255,255,255,0.08); border-color: rgba(99, 102, 241, 0.2); }
.source-card.active { border-color: var(--primary-color); background: rgba(99, 102, 241, 0.1); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2); }
.source-card.active .icon { filter: saturate(1); transform: scale(1.1); }
.source-card.active .label { color: white; }

.checklist-container { background: rgba(255,255,255,0.02); padding: 12px; border-radius: 12px; max-height: 180px; overflow-y: auto; border: 1px solid var(--color-border); }
.checklist-item { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-radius: 10px; cursor: pointer; transition: 0.2s; margin-bottom: 5px; border: 1px solid transparent; }
.checklist-item:hover { background: rgba(255,255,255,0.08); border-color: var(--color-border); }
.checklist-item.selected { background: rgba(99, 102, 241, 0.15); border-color: var(--primary-color); }
.checklist-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary-color); cursor: pointer; }

/* Unified Data Box for Long Text (for Visit Records) */
.data-content-box { background: rgba(0,0,0,0.2); padding: 15px; border-radius: 12px; font-size: 0.95rem; line-height: 1.6; border-left: 3px solid var(--primary-color); white-space: pre-wrap; margin-top: 5px; max-height: 400px; overflow-y: auto; color: rgba(255,255,255,0.9); }
/* 原拉把色 rgba(255,255,255,.2) 是深色主題殘留 —— 白色 20% 在亮底上等於看不見,
   使用者不會知道這個區塊可以捲動 */
.data-content-box::-webkit-scrollbar { width: 6px; }
.data-content-box::-webkit-scrollbar-track { background: var(--color-bg-hover); border-radius: var(--radius-lg); }
.data-content-box::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-lg); }


/* ==========================================================================
   [AUTH] Authentication View Styles
   ========================================================================== */
.auth-container { display: flex; justify-content: center; align-items: center; min-height: 90vh; }
.auth-box { width: 450px; padding: 3rem; }
.toggle-link { text-align: center; margin-top: 1.5rem; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; }
.toggle-link b { color: var(--primary-color); }
.helper-text { font-size: 0.75rem; color: var(--text-dim); margin-top: 6px; line-height: 1.4; display: block; }
.password-wrapper { position: relative; }
.eye-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: 0.6; transition: 0.2s; user-select: none; font-size: 1.2rem; }
.eye-icon:hover { opacity: 1; }

/* Record Navigation Styles */
.records-wrapper {
    position: relative;
    width: 100%;
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.nav-arrow:hover {
    background: var(--primary-color);
    border-color: white;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow.prev { left: -20px; }
.nav-arrow.next { right: -20px; }

.nav-jump-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
    padding: 10px;

    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.jump-dot {
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.jump-dot:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: var(--primary-color);
}

.jump-dot.active {
    background: var(--primary-color);
    color: white;
    border-color: white;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

.jump-dot.pinned-dot {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.05);
}

.jump-dot.pinned-dot:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.pin-btn {
    transition: transform 0.2s, opacity 0.2s;
    user-select: none;
}

.pin-btn:hover {
    transform: scale(1.25);
    opacity: 1 !important;
}

@media (max-width: 1200px) {
    .nav-arrow { display: none; } /* Hide arrows on mobile/small screens */
}



/* ==========================================================================
   [ICONS] Global Icon System (SVG Data URIs)
   ========================================================================== */
.crm-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
}

/* Folder Icon */
.icon-folder {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* Store Icon */
.icon-store {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18L19.5 4h-15z'/%3E%3Cpath d='M5 9v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9'/%3E%3Cpath d='M9 22v-6a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18L19.5 4h-15z'/%3E%3Cpath d='M5 9v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9'/%3E%3Cpath d='M9 22v-6a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6'/%3E%3C/svg%3E");
}

/* Shopping Cart Icon */
.icon-shopping-cart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

/* Map Pin Icon */
.icon-map-pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Briefcase Icon */
.icon-briefcase {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

/* Database Icon */
.icon-database {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3Cpath d='M3 12c0 1.66 4 3 9 3s9-1.34 9-3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3Cpath d='M3 12c0 1.66 4 3 9 3s9-1.34 9-3'/%3E%3C/svg%3E");
}

/* Shopping Bag Icon */
.icon-shopping-bag {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

/* Trending Up Icon */
.icon-trending-up {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}

/* Message Circle Icon */
.icon-message-circle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

/* File Icon */
.icon-file {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 17h6'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 17h6'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E");
}

/* Download Icon */
.icon-download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpolyline points='7 11 12 16 17 11'/%3E%3Cline x1='12' y1='4' x2='12' y2='16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpolyline points='7 11 12 16 17 11'/%3E%3Cline x1='12' y1='4' x2='12' y2='16'/%3E%3C/svg%3E");
}

/* Trash Icon */
.icon-trash {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l16 0'/%3E%3Cpath d='M10 11l0 6'/%3E%3Cpath d='M14 11l0 6'/%3E%3Cpath d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12'/%3E%3Cpath d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l16 0'/%3E%3Cpath d='M10 11l0 6'/%3E%3Cpath d='M14 11l0 6'/%3E%3Cpath d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12'/%3E%3Cpath d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E");
}

/* Edit Icon */
.icon-edit {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4'/%3E%3Cline x1='13.5' y1='6.5' x2='17.5' y2='10.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4'/%3E%3Cline x1='13.5' y1='6.5' x2='17.5' y2='10.5'/%3E%3C/svg%3E");
}

/* Key Icon (Simple Bold White) */
.icon-key {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l8-8M16 5l3 3M13 8l3 3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l8-8M16 5l3 3M13 8l3 3'/%3E%3C/svg%3E");
    /* 2026-07-31 移除 `background: white !important`(深色主題殘留)。
       這是遮罩式圖示 —— `.crm-icon` 用 `background-color: currentColor` 把遮罩「上色」,
       所以 background 就是圖示本身的顏色。寫死白色等於在白底選單上畫白色圖示,
       整個看不見(Ken 回報「帳號安全與密碼的小圖示不見了」)。
       而且帶 !important,legacy-bridge 那條 `.crm-icon { color: currentColor !important }`
       只管 color、壓不到 background,所以全站只有這一顆圖示壞掉。 */
}

/* Plus Icon */
.icon-plus {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l0 14'/%3E%3Cpath d='M5 12l14 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l0 14'/%3E%3Cpath d='M5 12l14 0'/%3E%3C/svg%3E");
}

/* Arrow Icons */
.icon-chevron-left {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.icon-chevron-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Search Icon */
.icon-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* Users Icon */
.icon-users {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* Brain Icon */
.icon-brain {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h2z'/%3E%3Cpath d='M14.5 2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h2z'/%3E%3Cpath d='M21 14a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V10a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h2z'/%3E%3Cpath d='M14.5 2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h2z'/%3E%3Cpath d='M21 14a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V10a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v4z'/%3E%3C/svg%3E");
}

/* Activity Icon */
.icon-activity {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
}

/* Settings Icon */
.icon-settings {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Shield Icon */
.icon-shield {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

/* Logout Icon */
.icon-logout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* Icon Size & Color Enhancements */
.crm-icon.icon-lg {
    width: 28px;
    height: 28px;
}
.crm-icon.icon-xs {
    width: 14px;
    height: 14px;
}

/* 釘選圖示(快速切換點用)。
   2026-07-31:原本用 📌 emoji。emoji 的顏色是字型內建的,CSS `color` 幾乎無效 ——
   所以「已釘選(琥珀)/未釘選(淡灰)」兩種狀態看起來一模一樣,而且在亮色主題上
   都是淡粉色、很不明顯(Ken 回報「大頭釘好像不太明顯」)。
   改用遮罩式圖示後顏色由 currentColor 決定,可套 Token;
   並且**未釘選=線框、已釘選=實心**,不只靠顏色區分(5.4.2 多重線索)。 */
.icon-pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}
.icon-pin-fill {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}
/* 2026-07-31 移除一批 `.icon-*{ color: white }`(深色主題殘留)。
   遮罩式圖示的顏色來自 `background-color: currentColor`,而 currentColor 取自 color ——
   所以這些宣告等於「白色圖示」,在亮色介面上全都會消失。
   它們目前是被 legacy-bridge 的 `.crm-icon { color: currentColor !important }` 壓著才沒出事,
   屬於「靠另一條規則救命」的死碼:一旦那條保險被動到,九顆圖示會同時不見。
   直接刪除,讓圖示單純繼承所在容器的文字顏色。 */

/* Polish the loading state */
.empty-state {
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.8;
}


/* ==========================================================================
   [ADMIN] 蝯曹?蝟餌絞閮剖? UI 璅? (Unified Admin UI)
   ========================================================================== */
.admin-container {
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 0 1.5rem 4rem 1.5rem;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--glass-border);
}

.admin-logo h1 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
}

.admin-logo span {
    color: var(--primary-color);
    margin-left: 8px;
    opacity: 0.9;
}

.admin-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur, 16px));
    border: 1px solid var(--glass-border);
    border-radius: 28px; /* Standard large radius from UI Guidelines */
    padding: 2.5rem;
    margin-bottom: 2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(255, 255, 255, 0.07);
}

.admin-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-section-title::before {
    content: '';
    width: 5px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 3px;
}

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

/* Ensure administrative pages use a full-width block layout to align with header */
.admin-main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* Animations & Effects */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.fade-in { animation: fadeIn 0.4s ease-out; }
.slide-up { animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); }


/* ==========================================================================
   [DASHBOARD] ?唳??啣銝剖? - ???€?? (Stat Banner)
   ========================================================================== */
.stat-banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.stat-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--primary-color);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px var(--primary-glow);
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dim);
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    margin: 8px 0;
}

.stat-footer {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stat-isv { border-left: 4px solid var(--primary-color); }
.stat-smb { border-left: 4px solid #a855f7; }
.stat-todo { border-left: 4px solid var(--warning); }
.stat-reserved { border-left: 4px solid #64748b; }

/* ==========================================================================
   [HEADER] ?€?銝?(Stat Pills) - ?游?撘??函皜?   ========================================================================== */
.stat-pill {
    height: 48px;
    padding: 0 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
}

.stat-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.pill-icon { font-size: 1rem; }

.pill-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pill-value {
    font-size: 1rem;
    font-weight: 800;
    color: white;
    padding-left: 4px;
    border-left: 1px solid var(--color-border);
}

/* Color Accents */
.stat-isv { border-color: rgba(99, 102, 241, 0.4); }
.stat-isv .pill-value { color: var(--primary-color); }

.stat-smb { border-color: rgba(168, 85, 247, 0.4); }
.stat-smb .pill-value { color: #a855f7; }

.stat-todo { border-color: rgba(245, 158, 11, 0.4); }
.stat-todo .pill-value { color: var(--warning); }

.stat-reserved { border-color: rgba(100, 116, 139, 0.4); }
.stat-reserved .pill-value { color: #94a3b8; }

/* ==========================================================================
   [HEADER] 蝯曹??絞閮???(Stat Buttons v2)
   ========================================================================== */
.stat-isv-v2:hover { border-color: var(--primary-color) !important; background: rgba(99, 102, 241, 0.1) !important; }
.stat-smb-v2:hover { border-color: #a855f7 !important; background: rgba(168, 85, 247, 0.1) !important; }
.stat-todo-v2:hover { border-color: var(--warning) !important; background: rgba(245, 158, 11, 0.1) !important; }
.stat-res-v2:hover { border-color: #94a3b8 !important; background: rgba(148, 163, 184, 0.1) !important; }

/* [UI Consistency] Unified Hover Effects for Action Buttons */
#navDashboardHeader:hover, #userMenuRoot:hover { 
    border-color: var(--primary-color) !important; 
    background: rgba(99, 102, 241, 0.1) !important; 
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

/* [FIX] Layout Stability - Prevent Jitter on Scrollbar Toggle */
html { scrollbar-gutter: stable; }

/* ==========================================================================
   ADMIN SETTINGS MODULE - Unified Styles
   ========================================================================== */
.admin-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.user-card { 
    display: grid; 
    grid-template-columns: 200px 1fr auto; 
    align-items: center; 
    padding: 1.5rem 2rem; 
    margin-bottom: 1.25rem; 
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
}
.user-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    background: rgba(255,255,255,0.05);
}
.permission-pill { 
    display: inline-flex; 
    align-items: center;
    gap: 6px;
    padding: 6px 12px; 
    border-radius: 20px; 
    font-size: 0.75rem; 
    margin-right: 8px; 
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border); 
    color: var(--text-dim);
    transition: 0.2s;
    font-weight: 500;
}
.permission-pill:hover { background: rgba(255,255,255,0.08); border-color: white; }
.permission-pill.active { background: var(--primary-color); color: white; border-color: var(--primary-color); box-shadow: 0 0 15px rgba(99, 102, 241, 0.3); }
.admin-badge { 
    background: linear-gradient(135deg, #f59e0b, #ef4444); 
    color: white; 
    padding: 2px 10px; 
    border-radius: 100px; 
    font-size: 0.65rem; 
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}
.action-group {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    min-width: 220px;
}
.btn-ghost {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}
.btn-ghost:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
}
.btn-ghost-danger {
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.2);
}
.btn-ghost-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
}


/* ==========================================================================
   ADMIN PERMISSIONS MODULE - Unified Styles
   ========================================================================== */
.permission-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    margin-top: 2rem;
    align-items: stretch;
}
.admin-card-flex {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.role-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.role-card {
    padding: 1.2rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    cursor: pointer;
    transition: 0.3s;
}
.role-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.role-card.active { border-color: var(--primary-color); background: rgba(99, 102, 241, 0.1); }

.matrix-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.matrix-table th, .matrix-table td { padding: 15px; border-bottom: 1px solid var(--glass-border); text-align: center; }
.matrix-table th, .matrix-table th label, .matrix-table th span { font-size: 1.05rem; font-weight: 700; color: white; white-space: nowrap; }
.matrix-table th:first-child, .matrix-table td:first-child { text-align: left; width: 300px; }

.perm-section-title { margin-top: 2.5rem; margin-bottom: 1rem; color: var(--primary-color); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.perm-section-title::before { content: ''; width: 4px; height: 18px; background: var(--primary-color); border-radius: 2px; }

.btn-save-fixed {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: auto;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
    z-index: 100;
}

.empty-state-placeholder {
    padding: 5rem;
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
}

/* ==========================================================================
   AUDIT LOGS MODULE - Unified Styles
   ========================================================================== */
.log-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.log-table th { text-align: left; padding: 15px; color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.log-table td { padding: 15px; background: rgba(255,255,255,0.03); border-top: 1px solid var(--color-border); }
.log-table tr td:first-child { border-radius: 12px 0 0 12px; border-left: 1px solid var(--color-border); }
.log-table tr td:last-child { border-radius: 0 12px 12px 0; border-right: 1px solid var(--color-border); }

.action-pill { padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.action-delete { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.action-ai { background: rgba(99, 102, 241, 0.2); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }
.action-login { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.action-update { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.action-other { background: rgba(255, 255, 255, 0.1); color: #ccc; }


/* ==========================================================================
   AUTHENTICATION MODULE - Unified Styles
   ========================================================================== */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 100px);
}
.auth-box {
    width: 100%;
    max-width: 420px;
    padding: 3rem;
    animation: authFadeIn 0.5s ease-out;
}
.auth-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -1px;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 2.5rem;
    color: white;
    white-space: nowrap;
}
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.eye-icon {
    position: absolute;
    right: 15px;
    cursor: pointer;
    color: var(--text-dim);
    transition: 0.2s;
    display: flex;
    align-items: center;
}
.eye-icon:hover { color: white; }
.helper-text {
    display: block;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 5px;
}
.toggle-link {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: 0.2s;
}
.toggle-link b { color: var(--primary-color); }
.toggle-link:hover { color: white; }
@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   RECORD DETAIL MODULE - Unified Styles
   ========================================================================== */
.persona-tag {
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 700;
    margin: 0 4px;
    display: inline-block;
    font-size: 0.9rem;
}
.tag-blue { background: rgba(99, 102, 241, 0.2); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }
.tag-red { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

.ai-result-box {
    line-height: 1.8;
    white-space: pre-wrap;
    color: rgba(255,255,255,0.9);
}

/* AI Scanning Mask Styles */
.scan-mask {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); 
    z-index: 9999; backdrop-filter: blur(15px); flex-direction: column; align-items: center; justify-content: center;
}
.scan-container { position: relative; width: 300px; height: 200px; border: 2px solid var(--primary-color); border-radius: 20px; overflow: hidden; box-shadow: 0 0 30px rgba(99, 102, 241, 0.4); }
.scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--primary-color); box-shadow: 0 0 15px var(--primary-color); animation: scanMove 2.5s infinite ease-in-out; }
@keyframes scanMove { 0% { top: 0; opacity: 0.5; } 50% { top: 100%; opacity: 1; } 100% { top: 0; opacity: 0.5; } }
.scan-text { margin-top: 30px; font-size: 1.2rem; font-weight: 700; color: white; letter-spacing: 1px; }
.scan-sub-text { margin-top: 10px; font-size: 0.9rem; color: var(--text-dim); }

/* Centralized Icon Library */
.crm-icon {
    display: inline-block; width: 20px; height: 20px; background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center;
    mask-position: center; -webkit-mask-size: contain; mask-size: contain; vertical-align: middle;
}
.icon-lg { width: 28px; height: 28px; }
.icon-file { color: white; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 17h6'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 17h6'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E"); }

.icon-download { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpolyline points='7 11 12 16 17 11'/%3E%3Cline x1='12' y1='4' x2='12' y2='16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpolyline points='7 11 12 16 17 11'/%3E%3Cline x1='12' y1='4' x2='12' y2='16'/%3E%3C/svg%3E"); }
.icon-trash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l16 0'/%3E%3Cpath d='M10 11l0 6'/%3E%3Cpath d='M14 11l0 6'/%3E%3Cpath d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12'/%3E%3Cpath d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l16 0'/%3E%3Cpath d='M10 11l0 6'/%3E%3Cpath d='M14 11l0 6'/%3E%3Cpath d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12'/%3E%3Cpath d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E"); }
.icon-edit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4'/%3E%3Cline x1='13.5' y1='6.5' x2='17.5' y2='10.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4'/%3E%3Cline x1='13.5' y1='6.5' x2='17.5' y2='10.5'/%3E%3C/svg%3E"); }
.icon-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l0 14'/%3E%3Cpath d='M5 12l14 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l0 14'/%3E%3Cpath d='M5 12l14 0'/%3E%3C/svg%3E"); }
.icon-chevron-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
.icon-chevron-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }

/* ==========================================================================
   PERSONA TEMPLATES MODULE - Unified Styles
   ========================================================================== */
.builder-container { max-width: 1100px; margin: 2.5rem auto; }
.template-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 24px; 
    border-bottom: 1px solid var(--glass-border); 
    background: rgba(255,255,255,0.02); 
    margin-bottom: 8px; 
    border-radius: 12px; 
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.template-item:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.3);
}
.file-info-badge {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}


}

/* ==========================================================================
   DATA I/O MODULE - Unified Styles
   ========================================================================== */
.import-container { max-width: 1100px; margin: 3rem auto; }
.drop-zone { border: 2px dashed var(--glass-border); padding: 3rem; border-radius: 16px; text-align: center; cursor: pointer; transition: 0.3s; background: rgba(255,255,255,0.02); }
.drop-zone:hover { border-color: var(--primary-color); background: rgba(255,255,255,0.05); }

.loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; flex-direction: column; }

/* Premium Mapping Table Style */
.mapping-grid-container { 
    width: 100%; 
    overflow-x: auto; 
    margin-top: 1.5rem;
    background: rgba(0,0,0,0.3); 
    border-radius: 12px; 
    border: 1px solid var(--glass-border);
    max-height: 60vh;
}

/* Unified Premium Blue Scrollbar */
/* 匯入對應表的橫向捲軸:原為舊 Indigo 拉把 + 深色軌道,改為與全域一致的中性灰 */
.mapping-grid-container::-webkit-scrollbar { height: 12px; width: 12px; }
.mapping-grid-container::-webkit-scrollbar-track { background: var(--color-bg-hover); border-radius: var(--radius-lg); }
.mapping-grid-container::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-lg);
    border: 3px solid transparent;
    background-clip: padding-box;
}
.mapping-grid-container::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); background-clip: padding-box; }

.mapping-grid { border-collapse: separate; border-spacing: 0; table-layout: auto; width: max-content; min-width: 100%; }
.mapping-grid thead th { 
    position: sticky; top: -1px; z-index: 20; 
    background: #1e293b; text-align: left; padding: 12px 20px; 
    font-size: 0.9rem; border-bottom: 2px solid var(--glass-border); 
    min-width: 180px; white-space: nowrap; color: #fff;
}
.mapping-grid .map-selector-row td { 
    position: sticky; top: 45px; z-index: 10; 
    background: rgba(99, 102, 241, 0.95) !important; backdrop-filter: blur(5px); 
    padding: 10px 15px; border-bottom: 2px solid rgba(0,0,0,0.2);
}
.mapping-grid td { 
    padding: 12px 20px; font-size: 0.85rem; 
    border-bottom: 1px solid var(--color-border); 
    color: white; white-space: nowrap; 
}
.mapping-grid select { 
    margin-bottom: 0; 
    padding: 8px 16px 8px 12px; 
    font-size: 0.82rem; 
    background-color: rgba(0, 0, 0, 0.5); 
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    color: #ffffff !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.mapping-grid select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}
.mapping-grid select option {
    background-color: #1b1b3a;
    color: #ffffff;
}

/* Mode Toggle Styles */
.mode-selector { display: flex; background: rgba(0,0,0,0.2); padding: 5px; border-radius: 12px; margin-bottom: 2rem; border: 1px solid var(--glass-border); gap: 5px; }
.mode-btn { flex: 1; padding: 10px; border: none; background: none; color: var(--text-dim); cursor: pointer; border-radius: 8px; font-weight: 600; transition: 0.3s; font-size: 0.9rem; }
.mode-btn.active { background: var(--primary-color); color: white; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }
.mode-btn:hover:not(.active) { background: rgba(255,255,255,0.05); color: white; }

.export-section { text-align: center; padding: 3rem; border: 1px dashed var(--primary-color); border-radius: 16px; background: rgba(99, 102, 241, 0.03); }
}

/* ==========================================================================
   SETTINGS & PROFILE MODULE - Unified Styles
   ========================================================================== */
.sidebar {
    width: 280px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-right: 1px solid var(--glass-border);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    z-index: 100;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.nav-group { display: flex; flex-direction: column; gap: 0.5rem; }
.nav-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem;
    border-radius: 12px; cursor: pointer; color: var(--text-dim);
    transition: all 0.2s ease; font-weight: 500;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-item.active { background: var(--primary-color); color: #fff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
.nav-item i { font-size: 1.25rem; }

/* Settings Specific Layout */
.main-content { flex: 1; padding: 3rem; overflow-y: auto; position: relative; }
.page-header { margin-bottom: 2.5rem; }
.page-header h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 0.5rem; }
.page-header p { color: var(--text-dim); }

.settings-card {
    background: var(--glass-bg); backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); border-radius: 20px;
    padding: 2rem; margin-bottom: 2rem; width: 100%; max-width: 900px;
}
.card-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }

.settings-section { display: none; }
.settings-section.active { display: block; animation: settingsFadeIn 0.3s ease; }
@keyframes settingsFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.role-badge {
    padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.75rem; font-weight: 700;
    background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Settings Forms Overrides */
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-dim); margin-bottom: 0.5rem; }

.btn {
    padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; border: none; display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--glass-border); color: #fff; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.05); }

/* ==========================================================================
   FORM BUILDER MODULE - Unified Styles
   ========================================================================== */
.builder-container { max-width: 1200px; margin: 2rem auto; }
.builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: flex-start; }
.label-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.label-row input { flex: 1; }
.label-row.locked-row { background: rgba(255, 255, 255, 0.02) !important; border-radius: 8px; border-left: 4px solid var(--text-dim) !important; opacity: 0.6; }
.label-row.locked-row input { background: transparent !important; color: var(--text-dim) !important; font-weight: 600; cursor: not-allowed; border-color: transparent !important; }

.remove-btn { background: var(--danger); color: white; border: none; padding: 10px; border-radius: 8px; cursor: pointer; }
.remove-btn.locked-btn { background:#333; cursor:not-allowed; opacity:0.3; pointer-events:none; }

.config-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; background: var(--glass-bg); border: 1px solid var(--glass-border); cursor: pointer; }
.config-badge.active { background: var(--primary-color); border-color: var(--primary-color); }

.checkbox-item { 
    display: flex; 
    align-items: center; 
    gap: 15px;
    padding: 14px 20px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    cursor: pointer; 
    transition: all 0.2s ease;
}
.checkbox-item:hover { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.3); }
.checkbox-item span { flex: 1; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.large-check {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.config-btn { 
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(99, 102, 241, 0.3);
    cursor: pointer; 
    border-radius: 8px; 
    padding: 6px 14px; 
    font-size: 0.85rem; 
    font-weight: 600;
    transition: 0.3s;
}
.config-btn:hover:not(:disabled) { background: var(--primary-color); color: white; transform: translateY(-1px); }
.config-btn:disabled { opacity: 0.2; cursor: not-allowed; filter: grayscale(1); }

.settings-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--text-dim);
    width: 38px; height: 38px;
    border-radius: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
    font-size: 1.1rem;
}
.settings-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); transform: scale(1.05); }
.settings-btn.has-meta { color: var(--primary-color); border-color: var(--primary-color); background: rgba(99, 102, 241, 0.1); }

/* Builder Form Elements */
.custom-select-wrapper { position: relative; width: 100%; }
.custom-select {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border);
    color: white;
    padding: 12px 40px 12px 15px;
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
.custom-select-wrapper::after {
    content: "▼"; font-size: 0.7rem; color: var(--text-dim);
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    pointer-events: none;
}

.switch-container {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--color-border); border-radius: 16px;
    margin-bottom: 20px; transition: 0.3s;
}
.switch-container:hover { background: rgba(99,102,241,0.05); border-color: rgba(99,102,241,0.2); }

.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255,255,255,0.1); transition: .4s; border-radius: 34px;
}
.slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px;
    background-color: white; transition: .4s; border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(24px); }

.form-textarea {
    width: 100%; min-height: 120px; background: rgba(255,255,255,0.03);
    color: white; border: 1px solid var(--color-border);
    border-radius: 14px; padding: 15px; font-size: 0.95rem;
    line-height: 1.6; outline: none; transition: 0.3s;
    resize: vertical;
}
.form-textarea:focus { border-color: var(--primary-color); background: rgba(99,102,241,0.05); }

.label-row:not(.locked-row):hover { 
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.5);
    margin-left: 8px;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.15);
}

/* Ultra-Responsive Header Capsules System */
.header-capsules-container {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.header-capsules-container .user-profile {
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1600px) {
    .header-capsules-container {
        gap: 8px !important;
    }
    .header-capsules-container .user-profile {
        padding: 0 0.8rem !important;
        height: 40px !important;
        font-size: 0.8rem !important;
        gap: 6px !important;
    }
    .header-capsules-container .user-profile span {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 1366px) {
    .header-capsules-container {
        gap: 6px !important;
    }
    .header-capsules-container .user-profile {
        padding: 0 0.6rem !important;
        height: 36px !important;
        font-size: 0.75rem !important;
        gap: 4px !important;
    }
    .header-capsules-container .user-profile span {
        font-size: 0.75rem !important;
    }
    .header-capsules-container .user-profile span #stat-isv-val,
    .header-capsules-container .user-profile span #stat-smb-val,
    .header-capsules-container .user-profile span #stat-todo-val,
    .header-capsules-container .user-profile span #stat-res-val {
        min-width: 15px !important;
        margin-left: 2px !important;
    }
}

@media (max-width: 1200px) {
    header {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
        margin-bottom: 1.5rem !important;
    }
    header div[style*="flex: 1;"] {
        display: none !important;
    }
    .header-capsules-container {
        width: 100% !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}

@media (max-width: 768px) {
    .header-capsules-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .header-capsules-container .user-profile {
        height: 38px !important;
        padding: 0 0.8rem !important;
        font-size: 0.8rem !important;
    }
}

/* Invert Calendar Picker Icon for dark background readability */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    transform: scale(1.3);
    padding: 2px;
}

/* Card editing state: shrink the first field input to avoid overlapping the top-right sub-actions */
@media (min-width: 601px) {
    .info-card.editing-active:not(.card-wide) .info-card-fields > .field-item:first-child {
        margin-right: 250px;
    }
}

/* Hide number input spin buttons (up/down arrows) globally */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* 全站統一 CRM 下拉選單實心三角形 */
select.smart-input,
select.teams-grid-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSdyZ2JhKDI1NSwyNTUsMjU1LDAuNSknIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J003IDEwbDUgNSA1LTV6Jy8+PC9zdmc+") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px !important;
    padding-right: 30px !important;
}

/* ─── Teams Notes Editor (contenteditable) ──────────────────────────────── */
.teams-notes-editable {
    background: rgba(10, 12, 28, 0.85) !important;
    color: #e2e8f0 !important;
    caret-color: #e2e8f0;
}
.teams-notes-editable:focus {
    background: rgba(10, 12, 28, 0.95) !important;
    outline: none;
}
.teams-notes-editable[contenteditable="false"] {
    cursor: default;
    opacity: 0.85;
}
.teams-notes-editable * {
    color: inherit !important;
}

/* ── Rich Text Editor Toolbar ─────────────────────────────────────────────── */
.teams-editor-toolbar { display:flex; gap:6px; padding:6px 10px; background:rgba(255,255,255,0.05); border:1px solid var(--color-border); border-bottom:none; border-top-left-radius:4px; border-top-right-radius:4px; align-items:center; }
.teams-tb-btn { background:rgba(255,255,255,0.07); border:1px solid var(--color-border); color:white; padding:3px 8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border-radius:4px; font-size:0.8rem; font-family:inherit; transition:all 0.15s; user-select:none; }
.teams-tb-btn:hover { background:rgba(99,102,241,0.2); border-color:rgba(99,102,241,0.35); }

/* LINE 使用者授權選單圖示(user-check,補上原本缺的定義) */
.icon-user-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpolyline points='17 11 19 13 23 9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpolyline points='17 11 19 13 23 9'/%3E%3C/svg%3E");
}