:root {
  --activity-bar-width: 72px;
  --sidebar-width: 270px;
  --transition: 0.4s cubic-bezier(0.2, 1, 0.2, 1);
  
  /* Cyberpunk Neon (Default) */
  --bg-dark: #020617;
  --bg-main: #0b0e14;
  --bg-pane: rgba(15, 23, 42, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --accent: #8b5cf6;
  --accent-glow: rgba(139, 92, 246, 0.4);
  --accent-secondary: #06b6d4;
  --accent-secondary: #06b6d4;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border: rgba(255, 255, 255, 0.06);
  --card-bg: rgba(255, 255, 255, 0.05);
  --shadow: 0 4px 12px rgba(0,0,0,0.1);
}

body.theme-slate {
  --bg-dark: #000000;
  --bg-main: #050505;
  --bg-pane: rgba(10, 10, 10, 0.8);
  --accent: #3b82f6; /* Blue */
  --accent-glow: rgba(59, 130, 246, 0.3);
  --text-main: #e2e8f0;
  --text-muted: #64748b;
  --border: rgba(255, 255, 255, 0.04);
  --card-bg: #0a0a0a;
}

body.theme-notion {
  --bg-dark: #ffffff;
  --bg-main: #f8fafc;
  --bg-pane: #f1f5f9;
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.05);
  --accent: #000000;
  --accent-glow: rgba(0, 0, 0, 0.1);
  --text-main: #000000;
  --text-muted: #334155;
  --border: rgba(0, 0, 0, 0.15);
  --card-bg: #ffffff;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

body.theme-nordic {
  --bg-dark: #064e3b;
  --bg-main: #022c22;
  --bg-pane: rgba(6, 78, 59, 0.8);
  --accent: #10b981; /* Emerald */
  --accent-glow: rgba(16, 185, 129, 0.3);
  --text-main: #ecfdf5;
  --text-muted: #6ee7b7;
  --border: rgba(255, 255, 255, 0.05);
  --card-bg: rgba(255, 255, 255, 0.02);
}

body.theme-sakura {
  --bg-dark: #2a111a;
  --bg-main: #1f0b13;
  --bg-pane: rgba(42, 17, 26, 0.8);
  --glass-bg: rgba(255, 182, 193, 0.04);
  --accent: #f472b6; /* Pink-400 */
  --accent-glow: rgba(244, 114, 182, 0.3);
  --text-main: #fce7f3;
  --text-muted: #fbcfe8;
  --border: rgba(244, 114, 182, 0.15);
  --card-bg: rgba(244, 114, 182, 0.03);
}

body.theme-iris {
  --bg-dark: #1e1b4b;
  --bg-main: #111029;
  --bg-pane: rgba(30, 27, 75, 0.8);
  --glass-bg: rgba(167, 139, 250, 0.04);
  --accent: #a78bfa; /* Violet-400 */
  --accent-glow: rgba(167, 139, 250, 0.3);
  --text-main: #ede9fe;
  --text-muted: #c4b5fd;
  --border: rgba(167, 139, 250, 0.15);
  --card-bg: rgba(167, 139, 250, 0.04);
}

body.theme-gold {
  --bg-dark: #372808;
  --bg-main: #201704;
  --bg-pane: rgba(55, 40, 8, 0.8);
  --glass-bg: rgba(251, 191, 36, 0.03);
  --accent: #fbbf24; /* Amber-400 */
  --accent-glow: rgba(251, 191, 36, 0.3);
  --text-main: #fffbeb;
  --text-muted: #fde68a;
  --border: rgba(251, 191, 36, 0.15);
  --card-bg: rgba(251, 191, 36, 0.03);
}

body.theme-mint {
  --bg-dark: #022c22;
  --bg-main: #011b14;
  --bg-pane: rgba(2, 44, 34, 0.8);
  --glass-bg: rgba(52, 211, 153, 0.04);
  --accent: #34d399; /* Emerald-400 vs nordic Emerald-500 */
  --accent-glow: rgba(52, 211, 153, 0.3);
  --text-main: #d1fae5;
  --text-muted: #6ee7b7;
  --border: rgba(52, 211, 153, 0.15);
  --card-bg: rgba(52, 211, 153, 0.04);
}

body.theme-sunset {
  --bg-dark: #3a160b;
  --bg-main: #220b05;
  --bg-pane: rgba(58, 22, 11, 0.8);
  --glass-bg: rgba(251, 146, 60, 0.04);
  --accent: #fb923c; /* Orange-400 */
  --accent-glow: rgba(251, 146, 60, 0.3);
  --text-main: #ffedd5;
  --text-muted: #fed7aa;
  --border: rgba(251, 146, 60, 0.15);
  --card-bg: rgba(251, 146, 60, 0.03);
}

/* Keyboard Base Styles below: */
body.theme-berry {
  --bg-dark: #fce7f3;
  --bg-main: #fdf2f8;
  --bg-pane: #ffffff;
  --card-bg: #fbcfe8;
  --cap-shadow: #f9a8d4;
  --accent: #ec4899;
  --accent-glow: rgba(236, 72, 153, 0.3);
  --text-main: #831843;
  --text-muted: #be185d;
  --border: rgba(236, 72, 153, 0.2);
  --glass-border: #ffffff;
}

body.theme-taro {
  --bg-dark: #ede9fe;
  --bg-main: #f5f3ff;
  --bg-pane: #ffffff;
  --card-bg: #ddd6fe;
  --cap-shadow: #c4b5fd;
  --accent: #8b5cf6;
  --accent-glow: rgba(139, 92, 246, 0.3);
  --text-main: #4c1d95;
  --text-muted: #6d28d9;
  --border: rgba(139, 92, 246, 0.2);
  --glass-border: #ffffff;
}

body.theme-aqua {
  --bg-dark: #e0f2fe;
  --bg-main: #f0f9ff;
  --bg-pane: #ffffff;
  --card-bg: #bae6fd;
  --cap-shadow: #7dd3fc;
  --accent: #0ea5e9;
  --accent-glow: rgba(14, 165, 233, 0.3);
  --text-main: #0c4a6e;
  --text-muted: #0369a1;
  --border: rgba(14, 165, 233, 0.2);
  --glass-border: #ffffff;
}

body.theme-peach {
  --bg-dark: #ffedd5;
  --bg-main: #fff7ed;
  --bg-pane: #ffffff;
  --card-bg: #fed7aa;
  --cap-shadow: #fdba74;
  --accent: #f97316;
  --accent-glow: rgba(249, 115, 22, 0.3);
  --text-main: #7c2d12;
  --text-muted: #c2410c;
  --border: rgba(249, 115, 22, 0.2);
  --glass-border: #ffffff;
}

body.theme-obsidian {
  --bg-dark: #1e293b;
  --bg-main: #0f172a;
  --bg-pane: #1e293b;
  --card-bg: #334155;
  --cap-shadow: #0f172a;
  --accent: #cbd5e1;
  --accent-glow: rgba(203, 213, 225, 0.3);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.05);
}

body.theme-matrix {
  --bg-dark: #09090b;
  --bg-main: #18181b;
  --bg-pane: #09090b;
  --card-bg: #27272a;
  --cap-shadow: #000000;
  --accent: #10b981;
  --accent-glow: rgba(16, 185, 129, 0.4);
  --text-main: #e4e4e7;
  --text-muted: #71717a;
  --border: rgba(16, 185, 129, 0.15);
  --glass-border: rgba(255, 255, 255, 0.03);
}
body.theme-pearl {
  --bg-dark: #f8fafc;
  --bg-main: #f1f5f9;
  --bg-pane: #ffffff;
  --card-bg: #e2e8f0;
  --cap-shadow: #cbd5e1;
  --accent: #1e3a8a;
  --accent-glow: rgba(30, 58, 138, 0.3);
  --text-main: #020617;
  --text-muted: #475569;
  --border: rgba(15, 23, 42, 0.1);
  --glass-border: rgba(255, 255, 255, 0.6);
}

body.theme-amber {
  --bg-dark: #1a110a;
  --bg-main: #0d0805;
  --bg-pane: #1a110a;
  --card-bg: #2d1d11;
  --cap-shadow: #000000;
  --accent: #d97706;
  --accent-glow: rgba(217, 119, 6, 0.3);
  --text-main: #fef3c7;
  --text-muted: #fde68a;
  --border: rgba(217, 119, 6, 0.2);
  --glass-border: rgba(255, 255, 255, 0.05);
}

body.theme-emeraldsea {
  --bg-dark: #082f49;
  --bg-main: #041f33;
  --bg-pane: #082f49;
  --card-bg: #0c4a6e;
  --cap-shadow: #021422;
  --accent: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.3);
  --text-main: #f0f9ff;
  --text-muted: #bae6fd;
  --border: rgba(56, 189, 248, 0.2);
  --glass-border: rgba(255, 255, 255, 0.05);
}

body.theme-ruby {
  --bg-dark: #3f0918;
  --bg-main: #23040c;
  --bg-pane: #3f0918;
  --card-bg: #5c0f24;
  --cap-shadow: #140206;
  --accent: #f43f5e;
  --accent-glow: rgba(244, 63, 94, 0.3);
  --text-main: #fff1f2;
  --text-muted: #fecdd3;
  --border: rgba(244, 63, 94, 0.2);
  --glass-border: rgba(255, 255, 255, 0.05);
}

body.theme-jade {
  --bg-dark: #fbfbfb;
  --bg-main: #fcfcfc;
  --bg-pane: #ffffff;
  --card-bg: #f9f9f9;
  --cap-shadow: #e5e5e5;
  --accent: #dc2626;
  --accent-glow: rgba(220, 38, 38, 0.25);
  --text-main: #1f2937;
  --text-muted: #6b7280;
  --border: rgba(220, 38, 38, 0.15);
  --glass-border: rgba(255, 255, 255, 0.8);
}

body.theme-snow {
  --bg-dark: #faf9f6;
  --bg-main: #fdfcfb;
  --bg-pane: #ffffff;
  --card-bg: #f5f4f0;
  --cap-shadow: #dfdfdf;
  --accent: #e11d48;
  --accent-glow: rgba(225, 29, 72, 0.25);
  --text-main: #1c1917;
  --text-muted: #78716c;
  --border: rgba(225, 29, 72, 0.1);
  --glass-border: rgba(255, 255, 255, 0.8);
}

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  height: 100vh;
  overflow: hidden;
  background-image: 
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
}

#app-root { display: flex; height: 100vh; width: 100vw; }

.content-stage { flex: 1; overflow-y: auto; scrollbar-width: none; }
.content-stage::-webkit-scrollbar { display: none; }
.viewport-inner { max-width: 1100px; margin: 0 auto; padding: 32px 40px; }

.sidebar-pane {
  width: var(--sidebar-width);
  background: var(--bg-pane);
  backdrop-filter: blur(40px) saturate(180%);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  color: var(--text-main);
}

.identity-header { padding: 40px 24px 20px; }
.main-identity { 
    font-family: 'Outfit', sans-serif; 
    font-size: 24px; 
    font-weight: 800; 
    color: var(--text-main); 
    margin-bottom: 8px; 
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.sub-identity { 
    font-size: 11px; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    letter-spacing: 2.5px; 
    font-weight: 500;
    opacity: 0.7;
}

.local-search-wrap { padding: 0 24px 16px; position: relative; }
#sidebar-search {
  width: 100%; background: rgba(0,0,0,0.2); border: 1px solid var(--border);
  padding: 8px 14px 8px 40px; color: white; border-radius: 12px; outline: none;
}

.item-list-container { flex: 1; overflow-y: auto; }
.date-group-header { padding: 24px 32px 12px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.note-card { padding: 12px 32px; cursor: pointer; border-left: 4px solid transparent; transition: 0.2s; }
.note-card:hover { background: rgba(255,255,255,0.03); }
.note-card.active { background: rgba(139, 92, 246, 0.1); border-left-color: var(--accent); }

.activity-bar { width: var(--activity-bar-width); background: var(--bg-dark); border-left: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 32px 0; }
.activity-btn { width: 48px; height: 48px; border: none; background: transparent; font-size: 24px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; border-radius: 16px; transition: 0.2s; }
.activity-btn:hover { color: var(--text-main); }
.activity-btn.active { background: var(--accent); color: var(--bg-dark); }

.pill-btn {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff;
    padding: 8px 20px; border-radius: 20px; font-family: 'Outfit'; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: 0.3s; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; outline: none;
}
.pill-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.pill-btn.primary { background: var(--accent); border-color: transparent; }
.pill-btn.primary:hover { box-shadow: 0 0 20px var(--accent-glow); }

/* Sidebar Context List */
.sidebar-date-group { margin-top: 16px; }
.date-header { 
    padding: 16px 16px 6px; 
    font-size: 15px; 
    font-weight: 800; 
    color: #fff; 
    font-family: 'Outfit';
    letter-spacing: 0.5px;
}
.note-item { 
    padding: 8px 12px 8px 16px; 
    border-radius: 12px; 
    margin-bottom: 2px; 
    cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* --- OXYGEN ULTRA PREMIUM UI TOKENS --- */
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.fin-ultra-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fin-hero-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(30, 41, 59, 0.4) 100%);
    position: relative;
    overflow: hidden;
}

.hero-stat-card .label {
    font-size: 14px;
}

.query-group input {
    background: transparent;
    border: none;
    color: var(--text);
    outline: none;
    font-size: 14px;
}

.query-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
}

.query-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.query-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}

/* Ledger v2 Styling */
.ledger-item-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    margin-bottom: 12px;
    transition: background 0.2s;
}

.ledger-item-v2:hover {
    background: rgba(255, 255, 255, 0.05);
}

.l-tag {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(139, 92, 246, 0.2);
    color: var(--accent);
    border-radius: 4px;
    font-weight: bold;
}

.l-val {
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.pos { color: #10b981; }
.neg { color: #ef4444; }

    border: 1px solid transparent;
}
.note-item:hover { background: rgba(255,255,255,0.03); transform: translateX(4px); }
.note-item.active { 
    background: rgba(139, 92, 246, 0.08); 
    border-color: rgba(139, 92, 246, 0.2); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.note-item .title { 
    font-weight: 400; 
    font-size: 15px; 
    color: var(--text-main); 
    margin-bottom: 2px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}
.note-item .excerpt { 
    font-size: 11px; 
    color: var(--text-muted); 
    line-height: 1.6; 
    text-indent: 2em; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

/* Editor */
.editor-wrap { display: flex; flex-direction: column; animation: fadeIn 0.4s ease-out; }
.editor-header { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 16px; 
    gap: 8px; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    background: var(--bg-pane); 
    padding: 16px 20px; 
    border-radius: 0 0 16px 16px; 
    border: 1px solid var(--border);
    border-top: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    margin-top: 0;
}
.editor-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.editor-meta-row { display: flex; gap: 24px; padding: 4px 0; }
.editor-cat-selector { display: flex; align-items: center; gap: 12px; }
.editor-cat-select.fin-form-group label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.05em; }
.cat-select { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; color: var(--text-main); font-size: 13px; outline: none; cursor: pointer; transition: 0.2s; }
.cat-select:hover { background: rgba(255,255,255,0.1); }
.cat-select option { background: var(--bg-pane); color: var(--text-main); }
.editor-title-input { background: transparent; border: none; color: var(--text-main); font-family: 'Outfit'; font-size: 32px; font-weight: 700; outline: none; flex: 1; border-bottom: 1px solid transparent; transition: 0.2s; }
.editor-title-input:focus { border-bottom-color: var(--border); }
.editor-actions { display: flex; gap: 12px; }
/* Rich Editor (Quill overrides) */
.editor-rich-surface { 
    height: auto;
    font-size: 16px; 
    line-height: 1.8;
    color: var(--text-main);
    border: none !important;
}
.ql-toolbar.ql-snow {
    border: 1px solid var(--border) !important;
    border-radius: 12px 12px 0 0;
    background: rgba(255,255,255,0.02);
    margin-bottom: 4px;
}
.ql-container.ql-snow {
    border: 1px solid var(--border) !important;
    border-radius: 0 0 12px 12px;
    background: rgba(0,0,0,0.2);
    font-family: inherit !important;
    height: auto !important; /* Allow growing */
    min-height: 150px;
}
.ql-editor {
    height: auto !important;
    min-height: 150px;
    overflow-y: hidden; /* Let main stage scroll */
}
.ql-editor.ql-blank::before { color: var(--text-muted) !important; font-style: normal; }
.ql-snow .ql-stroke { stroke: #94a3b8 !important; }
.ql-snow .ql-fill { fill: #94a3b8 !important; }
.ql-snow .ql-picker { color: #94a3b8 !important; }
.ql-snow.ql-toolbar button:hover .ql-stroke, 
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent) !important; }

/* Checklist Visibility & Interaction (Quill 2.0) */
/* Shared Spacing */
.ql-editor li[data-list], .node-body li[data-list] {
    padding-left: 0.5em !important;
    list-style-type: none !important;
}

/* 1. Native Editor Styling (Fixes colors, prevents double boxes) */
.ql-editor li[data-list]::before {
    color: #94a3b8 !important; /* Default unchecked color */
    cursor: pointer;
}
.ql-editor li[data-list="checked"]::before {
    color: #10b981 !important; /* Checked color */
}

/* 2. Static Log View Styling (Delegated natively to Quill) */

.ql-editor li[data-list="checked"], .node-body li[data-list="checked"] {
    text-decoration: line-through;
    opacity: 0.6;
    color: var(--text-muted);
}
.ql-editor li[data-list="checked"]::before, .node-body li[data-list="checked"]::before {
    text-decoration: none !important; /* Don't strike the checkbox itself */
}

/* Modal System */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-content {
    background: var(--bg-pane);
    border: 1px solid var(--border); 
    width: 600px; max-width: 90vw;
    border-radius: 24px; padding: 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.modal-header h3 { font-family: 'Outfit'; font-size: 18px; color: var(--text-main); }
.modal-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; }

.modal-rich-surface { min-height: 200px; margin-bottom: 24px; }
.ql-editor img { max-width: 100%; height: auto; border-radius: 8px; }

.modal-options {
    margin-bottom: 12px;
    padding: 10px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.modal-options label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.modal-date-input {
    background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main);
    padding: 6px 12px; border-radius: 8px; font-family: 'Outfit'; font-size: 13px;
    outline: none;
}

.modal-footer { display: flex; justify-content: flex-end; gap: 12px; }

/* Modal Editor Specifics */
.modal-content .ql-toolbar.ql-snow { border-color: var(--border) !important; background: var(--bg-main); }
.modal-content .ql-container.ql-snow { border-color: var(--border) !important; height: 350px !important; border-radius: 12px !important; }
.modal-content .ql-editor { height: 100% !important; max-height: 350px !important; overflow-y: auto !important; }

/* Logs */
.log-section { margin-top: 24px; border-top: 1px dashed var(--border); padding-top: 16px; }
.log-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
.log-title { font-family: 'Outfit'; font-size: 18px; font-weight: 700; }
.log-badge { background: var(--accent); padding: 2px 8px; border-radius: 20px; font-size: 12px; margin-left: 8px; }

.sub-entry-node { margin-bottom: 12px; }
.sub-entry-bubble { background: var(--card-bg); border: 1px solid var(--border); padding: 8px 12px; border-radius: 12px; }
.sub-entry-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.sub-entry-content { font-size: 14px; line-height: 1.6; }
.sub-entry-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; opacity: 0; transition: 0.2s; }
.sub-entry-bubble:hover .sub-entry-actions { opacity: 0.5; }
.sub-entry-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 8px; border-radius: 6px; }

.pill-btn { background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); color: #fff; padding: 4px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.pill-btn:hover { background: var(--accent); color: #fff; box-shadow: 0 0 15px var(--accent-glow); }

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 12px 24px; border-radius: 12px; font-size: 13px; font-weight: 700; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- [V12-CORE] 馃洅 FINANCE DASHBOARD --- */
.fin-view-wrap { padding: 16px; animation: fadeIn 0.4s ease-out; }
.fin-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.fin-stat-card { 
    flex: 1; 
    background: var(--card-bg); 
    padding: 16px 24px; 
    border-radius: 12px; 
    border: 1.5px solid var(--border); 
    box-shadow: var(--shadow), inset 0 0 5px rgba(0,0,0,0.02); 
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fin-stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--accent-glow);
}
.fin-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
.fin-value { font-family: 'Outfit'; font-size: 24px; font-weight: 800; color: var(--text-main); opacity: 1; }
.fin-value.positive { color: #059669; }
.fin-value.negative { color: #dc2626; }
.fin-pane { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.fin-form-pane { width: 400px; flex-shrink: 0; }
.fin-list-pane { flex: 1; min-width: 0; }

.fin-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px dashed var(--border); padding-bottom: 8px; }
.fin-h2 { font-family: 'Outfit'; font-size: 16px; font-weight: 700; color: var(--accent); margin: 0; }

.fin-group { margin-bottom: 10px; }
.fin-input, .fin-select { 
    width: 100%; background: var(--bg-pane); border: 1px solid var(--border); 
    border-radius: 8px; padding: 10px 14px; color: var(--text-main); 
    font-size: 14px; outline: none; transition: 0.2s; 
}
.fin-input:focus, .fin-select:focus { border-color: var(--accent); background: var(--card-bg); box-shadow: 0 0 0 2px var(--accent-glow); }
.fin-radio-group { display: flex; gap: 20px; }
.fin-radio-lbl { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.fin-save-btn { width: 100%; background: var(--accent); color: var(--bg-dark); border: none; padding: 14px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; box-shadow: var(--shadow); }
.fin-save-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
.fin-search { width: 200px; padding: 8px 12px; font-size: 12px; border-radius: 10px; background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main); outline:none; }

.ledger-scroll { flex: 1; overflow-y: auto; padding-right: 8px; }
.ledger-item { background: var(--bg-main); padding: 16px 20px; border-radius: 14px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; border: 1px solid transparent; transition: 0.2s; cursor: pointer; }
.ledger-item:hover { background: var(--bg-pane); border-color: var(--border); transform: scale(1.01); }
.ledger-item.is-out { border-left: 4px solid #ef4444; }
.ledger-item.is-in { border-left: 4px solid #10b981; }
.l-amt { font-family: 'Outfit'; font-size: 18px; font-weight: 700; }
.is-in .l-amt { color: #10b981; }
.is-out .l-amt { color: #ef4444; }
.l-meta { font-size: 10px; color: #64748b; margin-top: 4px; display: flex; gap: 8px; }
.l-tag { background: var(--bg-pane); padding: 1px 6px; border-radius: 4px; }

/* --- [V12-CORE] 馃搮 CALENDAR INTERFACE --- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); flex: 1; }
.cal-cell { 
    background: var(--bg-main); cursor: pointer; position: relative; display: flex; flex-direction: column; 
    align-items: center; justify-content: center; min-height: 100px; transition: 0.2s;
}
.cal-cell:hover { background: var(--bg-pane); z-index: 10; transform: scale(1.02); }
.cal-cell.is-other-month { opacity: 0.3; }
.cal-cell.is-selected { background: rgba(139, 92, 246, 0.1); border: 1.5px solid var(--accent); }

.lunar-day { font-size: 10px; color: #64748b; }
.lunar-fest { font-size: 9px; margin-top: 1px; }
.cal-lunar-row { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.total-badge-circle { min-width: 18px; height: 18px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 8px; right: 8px; box-shadow: 0 4px 10px var(--accent-glow); }

.cal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; border-bottom: 1px solid var(--border); background: var(--bg-pane); }
.sub-entry-btn { background: transparent; border: 1px solid var(--border); color: var(--text-main); padding: 6px 16px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: 0.2s; }
.sub-entry-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- Finance Module Parity Styles --- */
.ledger-item { display: flex; align-items: center; padding: 12px 16px; background: var(--bg-main); border-bottom: 1px solid var(--border); transition: 0.2s; border-radius: 8px; margin-bottom: 4px; }
.ledger-item:hover { background: var(--bg-pane); }
.l-main { flex: 1; }
.fin-stats-row { display: flex; gap: 12px; margin-bottom: 20px; }
.fin-card { 
    flex: 1; background: var(--card-bg); border: 1.5px solid var(--border); 
    border-radius: 14px; padding: 16px; box-shadow: var(--shadow);
    transition: 0.3s; position: relative; overflow: hidden;
}
.fin-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.fin-card .tit { font-size: 13px; font-weight: 800; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.fin-card .val { font-family: 'Outfit'; font-size: 24px; font-weight: 800; color: var(--text-main); line-height: 1; }
.l-amt { font-family: 'Outfit'; font-weight: 800; font-size: 15px; }
.l-bot { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.l-del { background: transparent; border: none; color: transparent; cursor: pointer; padding: 8px; transition: 0.2s; }
.ledger-item:hover .l-del { color: #ef4444; }

.fin-tool-item label { font-size: 13px; font-weight: 700; color: var(--text-main); }
.l-amt { font-family: 'Outfit'; font-weight: 800; font-size: 15px; }
.l-bot { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.l-del { background: transparent; border: none; color: transparent; cursor: pointer; padding: 8px; transition: 0.2s; }
.ledger-item:hover .l-del { color: #ef4444; }

.dim-manager-wrap { padding: 24px; animation: fadeIn 0.4s ease-out; }
.dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.dim-section h3 { font-size: 14px; margin-bottom: 16px; color: var(--accent); opacity: 0.8; }
.dim-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dim-tag { background: var(--card-bg); border: 1px solid var(--border); padding: 4px 12px; border-radius: 12px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.dim-tag span { color: #ef4444; cursor: pointer; font-weight: 800; opacity: 0.5; }
.dim-tag span:hover { opacity: 1; }
.dim-add { display: flex; gap: 8px; }
.dim-add input { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; color: var(--text-main); font-size: 12px; flex: 1; }
/* --- Finance Manager Meta Table --- */
.dim-list-detailed {
    margin-bottom: 24px;
    background: var(--bg-main);
    border-radius: 8px;
    overflow: hidden;
}
.fin-meta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fin-meta-table th {
    text-align: left;
    background: var(--card-bg);
    padding: 10px 12px;
    color: var(--accent);
    font-weight: 500;
}
.fin-meta-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}
.dim-del-btn {
    cursor: pointer;
    color: #ef4444;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.dim-del-btn:hover { opacity: 1; }

.dim-add-box {
    background: var(--card-bg);
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed var(--border);
}
.dim-row-fields {
    display: flex;
    gap: 8px;
}
.dim-row-fields input {
    flex: 1;
    min-width: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 8px 12px;
    border-radius: 6px;
    outline: none;
}
.dim-add-box input:focus {
    border-color: var(--accent);
}
.dim-add button { background: var(--accent); border: none; color: #fff; padding: 0 12px; border-radius: 8px; font-size: 12px; cursor: pointer; }

/* Premium Visual Treatments */
.fin-card { border: 1px solid rgba(255,255,255,0.05); background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%); backdrop-filter: blur(10px); }
.fin-pane { border: 1px solid rgba(255,255,255,0.03); background: rgba(0,0,0,0.2); }
.cal-cell.is-selected { background: rgba(139, 92, 246, 0.1); border: 1.5px solid var(--accent); box-shadow: inset 0 0 15px rgba(139, 92, 246, 0.2); }

/* --- Sidebar Linkage (Scout Plane Parity) --- */
.mirrored-layout { display: flex; flex-direction: row-reverse; }
.content-stage { flex: 1; transition: margin 0.3s ease-in-out; position: relative; overflow-y: auto; }
.sidebar-pane { width: var(--sidebar-width); height: 100vh; background: rgba(0,0,0,0.2); border-left: 1px solid var(--border); overflow-y: auto; }

/* Detect sidebar hidden state (if toggled via body class) */
body.sidebar-hidden .sidebar-pane { display: none; }
body.sidebar-hidden .content-stage { margin-right: 0 !important; }

/* --- Hierarchical Log Tree --- */
.log-section { margin-top: 48px; border-top: 1px dashed var(--border); padding-top: 32px; }
.log-header { cursor: pointer; margin-bottom: 24px; padding: 12px 0; display: flex; justify-content: space-between; align-items: center; }
.log-header h3 { font-size: 16px; margin: 0; font-weight: 700; color: var(--text-main); }
.log-toggle-icon { font-size: 18px; color: var(--accent); transition: transform 0.2s; }
.log-badge { background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px; }

.log-header-actions { display: flex; gap: 12px; }
.node-action-btn { 
    background: transparent; border: 1.5px solid #334155; color: #fff; 
    padding: 6px 16px; border-radius: 10px; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: 0.2s;
}
.node-action-btn.type-entry { border-color: #2563eb; color: #93c5fd; }
.node-action-btn.type-log { border-color: #dc2626; color: #fca5a5; }
.node-action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

.logs-tree-container { 
    overflow-y: visible; 
    padding-right: 8px; 
    scroll-behavior: smooth;
}
.logs-tree-container::-webkit-scrollbar { width: 4px; }
.logs-tree-container::-webkit-scrollbar-track { background: transparent; }
.logs-tree-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.05); border-radius: 2px; }
.logs-tree-container.collapsed { display: none; }

.tree-node { position: relative; margin-bottom: 16px; }
.node-main { display: flex; gap: 12px; align-items: flex-start; }

.node-ops { 
    width: 24px; display: flex; justify-content: center; padding-top: 8px; 
    position: relative; z-index: 10; /* Ensure it stays above content */
}
.node-toggle { 
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: #6366f1; font-size: 14px; cursor: pointer;
    transition: 0.2s;
    position: relative; z-index: 11;
}
.node-toggle:hover { color: var(--accent); text-shadow: 0 0 8px rgba(99, 102, 241, 0.4); }
.node-toggle.is-leaf { color: #334155; opacity: 0.5; pointer-events: none; }

.node-content-wrap { 
    flex: 1; 
    background: var(--card-bg); 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    padding: 16px;
    box-shadow: var(--shadow);
    color: var(--text-main);
}
.node-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; position: relative; }
.node-time { font-size: 11px; color: var(--text-muted); font-family: 'Outfit'; font-weight: 600; }


.node-reminder-wrap { flex: 1; display: flex; justify-content: flex-end; }
.reminder-flag { 
    font-size: 13px; font-family: 'Outfit'; font-weight: 700;
    cursor: pointer; padding-bottom: 2px;
}
.reminder-flag.empty { 
    color: var(--text-muted); 
    border-bottom: 1.5px dotted var(--text-muted);
    opacity: 0.6;
    transition: 0.2s;
}
.reminder-flag.empty:hover { 
    opacity: 1; 
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.reminder-flag.active {
    color: var(--accent);
    border-bottom: 1.5px dotted var(--accent);
}
.node-body { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--text-main); line-height: 1.8; letter-spacing: 0.02em; max-height: 380px; overflow-y: auto; overflow-x: hidden; padding-right: 8px; overscroll-behavior: contain; }
/* Force stray white inline text (often left over from dark-mode edits) to participate in the theme's dynamic text color */
.node-body *[style*="color: rgb(255, 255, 255)"],
.node-body *[style*="color: rgb(255,255,255)"],
.node-body *[style*="color: #fff"],
.node-body *[style*="color:#fff"],
.node-body *[style*="color: #ffffff"],
.node-body *[style*="color:#ffffff"],
.node-body *[style*="color: white"],
.node-body .ql-color-white {
    color: var(--text-main) !important;
}
.node-body img { max-width: 100% !important; height: auto !important; border-radius: 8px; object-fit: contain; }
.node-body::-webkit-scrollbar { width: 6px; }
.node-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

/* Sub-node Action Ribbon */
.node-actions-ribbon { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; opacity: 0; transition: 0.2s; }
.node-content-wrap:hover .node-actions-ribbon { opacity: 1; }
.node-mini-btn { 
    background: var(--glass-bg); border: 1px solid var(--border); 
    color: var(--text-muted); padding: 2px 10px; border-radius: 8px; font-size: 11px; 
    font-weight: 600; cursor: pointer; transition: 0.1s;
}
.node-mini-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.node-mini-btn.btn-blue { color: var(--accent); border-color: var(--border); }
.node-mini-btn.btn-red { color: var(--text-main); border-color: var(--border); }
.node-mini-btn.btn-danger:hover { background: #991b1b; color: #fff; border-color: #ef4444; }

/* Category Pills */
.tag-pill { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); }
.tag-pill.type-entry { background: var(--accent); color: #fff; border-color: var(--accent); }
.tag-pill.type-log { background: transparent; color: var(--accent); border-color: var(--accent); }

/* Hierarchy Lines */
.node-children { 
    margin-left: 12px; 
    padding-left: 24px; 
    border-left: 1px solid var(--border); 
    margin-top: 8px; 
}
.tree-node[data-depth="0"] > .node-main { margin-left: 0; }

.no-logs { text-align: center; padding: 40px; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 12px; }
/* --- High-Fidelity Finance Dashboard --- */
.fin-top-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 12px; 
    gap: 32px;
}

.fin-integrated-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fin-mini-picker-wrap { display: none; } 

.fin-toolbar-row { display: none; }

.fin-tool-item {
    display: flex;
    align-items: center;
    gap: 16px;
}
.fin-tool-item label {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.fin-tool-item input[type="month"] {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 5px 12px;
    color: #fff;
    font-family: 'Outfit';
    font-size: 13px;
    outline: none;
    cursor: pointer;
    width: 200px;
}
.fin-tool-item input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; }

.fin-layout-grid { 
    display: grid; 
    grid-template-columns: 320px 2fr 1fr; 
    gap: 16px; 
    align-items: start; 
}
.fin-analysis-pane { background: rgba(0,0,0,0.1); padding: 24px; border-radius: 16px; border: 1px solid var(--border); }

/* Account List */
.acc-list { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.acc-item { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.acc-name { color: var(--text-muted); }
.acc-bal { font-family: 'Outfit'; font-weight: 700; color: #fff; }
.acc-bal.neg { color: #ef4444; }



/* --- [V12-CORE] 📅 CALENDAR (OXYGEN ULTRA SPLIT LAYOUT) --- */
.cal-view-wrap { height: 100%; overflow: hidden; }
.cal-view-main-columns { display: flex; height: 100%; gap: 16px; align-items: stretch; padding: 2px; }

/* Left Pillar: Fixed Controller & Radar */
.cal-column-left { width: 800px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-right: 4px; }
.cal-dashboard-ctrls { 
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 16px;
    box-shadow: var(--shadow); flex-shrink: 0;
}
.cal-nav-bar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; padding: 0 4px; }
.cal-header-center { text-align: center; flex: 1; }
.cal-current-date { font-family: 'Outfit'; font-size: 22px; font-weight: 800; color: var(--text-main); line-height: 1.2; }
.cal-astronomical-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 600; display: flex; justify-content: center; gap: 8px; }
.meta-sep { opacity: 0.3; }
.cal-nav-btn { background: var(--glass-bg); border: 1px solid var(--border); color: var(--text-main); border-radius: 8px; padding: 6px 14px; cursor: pointer; transition: 0.2s; font-weight: 800; }
.cal-nav-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.cal-main-compact { padding: 0; }
.cal-weekday-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px; gap: 0 6px; padding-left: 21.5px; padding-right: 21.5px; box-sizing: border-box; }
.cal-weekday-header div { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.cal-grid-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-cell { 
    aspect-ratio: 1.1; min-height: 85px;
    background: var(--glass-bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px; cursor: pointer; transition: 0.1s; display: flex; flex-direction: column; justify-content: space-between;
}
.cal-cell:hover { border-color: var(--accent); background: var(--accent-glow); }
.cal-cell.is-selected { border-color: var(--accent); background: var(--accent-glow); box-shadow: inset 0 0 10px var(--accent-glow); outline: 1px solid var(--accent); }
.cal-cell.is-other-month { opacity: 0.15; }
.cal-cell.is-today { outline: 2px solid #fbbf24; background: rgba(251, 191, 36, 0.05); }

.cal-day-num { font-family: 'Outfit'; font-size: 16px; font-weight: 800; color: var(--text-main); line-height: 1; }
.cal-lunar-stack { font-size: 10px; line-height: 1.1; display: flex; flex-direction: column; gap: 2px; }
.cal-count-badge { 
    position: absolute; top: 6px; left: 6px; 
    width: 16px; height: 16px; background: #ef4444; color: #fff; 
    font-size: 10px; font-weight: 900; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); z-index: 10;
}

/* Lower Radar Area */
.affairs-radar-section { 
    flex: 1; min-height: 200px; display: flex; flex-direction: column; gap: 12px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
    box-shadow: var(--shadow);
}
.affairs-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border); padding-bottom: 10px; }
.affairs-title { font-family: 'Outfit'; font-size: 16px; font-weight: 800; color: var(--text-main); }
.radar-tag { font-size: 9px; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 10px; margin-left: 8px; }

.affairs-grid { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.affair-card { 
    background: var(--bg-pane); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
    transition: 0.2s; cursor: pointer; border-left: 3px solid var(--accent);
}
.affair-card:hover { transform: translateX(5px); background: var(--card-bg); border-left-width: 6px; }
.affair-time-tag { font-size: 10px; font-weight: 800; color: var(--accent); margin-bottom: 4px; font-family: 'Outfit'; }
.affair-content { font-size: 13px; color: var(--text-main); line-height: 1.5; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Right Column: Adaptive Detail Pane */
.cal-column-right { 
    flex: 1; min-width: 320px; background: var(--card-bg); border: 1px solid var(--border); 
    border-radius: 16px; padding: 24px; overflow-y: auto; box-shadow: var(--shadow);
    display: flex; flex-direction: column;
}

@media (max-width: 1400px) {
    .cal-column-left { width: 700px; }
}
@media (max-width: 1100px) {
    .cal-column-left { width: 600px; }
}

/* Glassmorphism Refinements */
.viewport-inner { padding: 32px; max-width: 100%; margin: 0 auto; }
.editor-wrap, .fin-view-wrap { background: rgba(255,255,255,0.01); border-radius: 16px; padding: 32px; border: 1px solid rgba(255,255,255,0.05); }

/* High-fidelity Toast */
.toast.success { border-left: 4px solid #10b981; }
.toast.error { border-left: 4px solid #ef4444; }



.fin-search.fin-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text);
    width: 100%;
    outline: none;
    transition: all 0.2s;
}

/* Force dark theme for select options to fix white-on-white bug */
.fin-input option {
    background-color: #1a1a2e !important;
    color: #ffffff !important;
}
.fin-search-input:focus { width: 300px; border-color: var(--accent); background: rgba(255,255,255,0.1); }

/* --- [V12-CORE] ⚙️ SETTINGS & DIMENSIONS --- */
.settings-wrap { padding: 12px 24px; width: 95%; max-width: 100%; margin: 0 auto; animation: fadeIn 0.4s ease-out; }
.settings-header { border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 16px; margin-bottom: 32px; }
.settings-header h1 { font-family: 'Outfit'; font-size: 28px; margin: 0 0 4px 0; color: var(--accent); }
.settings-header p { margin: 0; color: var(--text-muted); font-size: 13px; }

.settings-sect.fin-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.fin-card h3 { font-family: 'Outfit'; font-size: 18px; font-weight: 800; color: #d97706; margin-bottom: 20px; border-bottom: 1px dashed var(--border); padding-bottom: 10px; }
.fin-card.dark h3 { color: #fbbf24; }

.dim-form { display: flex; gap: 12px; margin-bottom: 20px; }
.dim-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dim-item { 
    background: rgba(255,255,255,0.03); 
    padding: 8px 12px; 
    border-radius: 10px; 
    border: 1px solid rgba(255,255,255,0.05);
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    font-size: 13px;
    transition: 0.2s;
}
.dim-item:hover { border-color: var(--accent); background: rgba(255,255,255,0.06); }
.dim-del { background: none; border: none; color: #ef4444; font-size: 16px; cursor: pointer; padding: 0 4px; opacity: 0.6; transition: 0.2s; }
.dim-del:hover { opacity: 1; transform: scale(1.2); }

.pref-label {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
    padding: 12px 20px; border-radius: 12px; font-size: 14px; color: #fff;
    cursor: pointer; transition: 0.3s;
}
.pref-label:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.pref-label input { accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer; }

/* --- [V12-CORE] 🎨 THEME SELECTOR --- */
.theme-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px; padding: 16px; cursor: pointer; transition: 0.3s;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.theme-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.theme-card.active { border-color: var(--accent); background: rgba(139, 92, 246, 0.05); box-shadow: 0 0 20px rgba(139, 92, 246, 0.1); }

.theme-preview { width: 100%; height: 60px; border-radius: 8px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.theme-card span { font-size: 13px; font-weight: 700; color: #fff; }

@media (max-width: 768px) {
    .editor-title-row { flex-direction: column; gap: 16px; }
    .editor-title-input { font-size: 24px; }
}

/* --- [V12-CORE] 🌐 ADMIN DASHBOARD --- */
.admin-view-wrap { padding: 32px; max-width: 1200px; margin: 0 auto; animation: fadeIn 0.5s ease-out; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 20px; }
.admin-header h1 { font-family: 'Outfit'; font-size: 28px; color: #0ea5e9; margin: 0; }

.admin-top-cards { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-bottom: 32px; }
.admin-card { background: rgba(15, 23, 42, 0.4); border: 1px solid var(--border); border-radius: 16px; padding: 24px; backdrop-filter: blur(10px); }
.admin-card .card-head { margin-bottom: 16px; }
.admin-card .card-head h3 { margin: 0 0 8px 0; font-size: 18px; color: #f1f5f9; }
.admin-card .card-head p { margin: 0; font-size: 13px; color: var(--text-muted); }

.toggle-status-box { display: flex; align-items: center; background: rgba(0,0,0,0.2); padding: 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; }
.toggle-status-box.active { border-color: #10b981; background: rgba(16, 185, 129, 0.05); }
.toggle-status-box .t-info { flex: 1; }
.toggle-status-box .t-info strong { display: block; font-size: 15px; color: #f1f5f9; margin-bottom: 4px; }
.toggle-status-box .t-info p { margin: 0; font-size: 12px; color: var(--text-muted); }
.toggle-status-box .t-control input { width: 24px; height: 24px; cursor: pointer; accent-color: #10b981; }

.adm.fin-tool-item { display: flex; flex-direction: column; gap: 4px; }
.fin-tool-item label { font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; }
.fin-tool-item input { 
    background: var(--bg-pane); border: 1.5px solid var(--border); border-radius: 12px; 
    padding: 8px 16px; color: var(--text-main); font-family: 'Outfit'; outline: none; transition: 0.3s;
}
.fin-tool-item input:focus { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.admin-input:focus { border-color: var(--accent); background: rgba(0,0,0,0.5); }
.admin-input.flex-grow { flex: 1; }
.admin-save-btn { background: var(--accent); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.3s; white-space: nowrap; }
.admin-save-btn:hover { transform: scale(1.05); filter: brightness(1.2); }

.card-table { padding: 0 !important; overflow: hidden; }
.card-table .card-head { padding: 20px 24px; background: rgba(255,255,255,0.02); margin: 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.card-table .head-title { font-weight: 700; color: #f1f5f9; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { background: rgba(0,0,0,0.1); padding: 14px 24px; text-align: left; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.admin-table td { padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 14px; vertical-align: middle; }
.admin-table tr:hover { background: rgba(255,255,255,0.01); }
.admin-table tr.row-admin { background: rgba(220, 38, 38, 0.05); }

.badge { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.b-pending { background: #92400e; color: #fef3c7; }
.b-active { color: #10b981; }
.b-disabled { color: var(--text-muted); }

.role-tag.admin { background: #dc2626; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.node-ghost { font-style: italic; color: var(--oxy-text-muted); }

.col-actions { text-align: right; }
.a-btn { padding: 6px 12px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: 8px; transition: 0.2s; }
.a-btn.approve { background: #10b981; color: #fff; }
.a-btn.reject { background: #be123c; color: #fff; }
.a-btn.disable { background: #a16207; color: #fff; }
.a-btn.enable { background: #0284c7; color: #fff; }
.a-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }

.col-monitor { padding-left: 30px !important; line-height: 1.4; color: var(--text-muted); font-size: 12px; }
.m-status { color: #10b981; font-weight: 700; }
.cal-weekday-header div { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.cal-grid-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-cell { 
    aspect-ratio: 1.1; min-height: 85px;
    background: var(--glass-bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px; cursor: pointer; transition: 0.1s; display: flex; flex-direction: column; justify-content: space-between;
}
.cal-cell:hover { border-color: var(--accent); background: var(--accent-glow); }
.cal-cell.is-selected { border-color: var(--accent); background: var(--accent-glow); box-shadow: inset 0 0 10px var(--accent-glow); outline: 1px solid var(--accent); }
.cal-cell.is-other-month { opacity: 0.15; }
.cal-cell.is-today { outline: 2px solid #fbbf24; background: rgba(251, 191, 36, 0.05); }

.cal-day-num { font-family: 'Outfit'; font-size: 16px; font-weight: 800; color: var(--text-main); line-height: 1; }
.cal-lunar-stack { font-size: 10px; line-height: 1.1; display: flex; flex-direction: column; gap: 2px; }
.cal-count-badge { 
    position: absolute; top: 6px; left: 6px; 
    width: 16px; height: 16px; background: #ef4444; color: #fff; 
    font-size: 10px; font-weight: 900; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); z-index: 10;
}

/* Lower Radar Area */
.affairs-radar-section { 
    flex: 1; min-height: 200px; display: flex; flex-direction: column; gap: 12px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
    box-shadow: var(--shadow);
}
.affairs-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border); padding-bottom: 10px; }
.affairs-title { font-family: 'Outfit'; font-size: 16px; font-weight: 800; color: var(--text-main); }
.radar-tag { font-size: 9px; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 10px; margin-left: 8px; }

.affairs-grid { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.affair-card { 
    background: var(--bg-pane); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
    transition: 0.2s; cursor: pointer; border-left: 3px solid var(--accent);
}
.affair-card:hover { transform: translateX(5px); background: var(--card-bg); border-left-width: 6px; }
.affair-time-tag { font-size: 10px; font-weight: 800; color: var(--accent); margin-bottom: 4px; font-family: 'Outfit'; }
.affair-content { font-size: 13px; color: var(--text-main); line-height: 1.5; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Right Column: Adaptive Detail Pane */
.cal-column-right { 
    flex: 1; min-width: 320px; background: var(--card-bg); border: 1px solid var(--border); 
    border-radius: 16px; padding: 24px; overflow-y: auto; box-shadow: var(--shadow);
    display: flex; flex-direction: column;
}

@media (max-width: 1400px) {
    .cal-column-left { width: 700px; }
}
@media (max-width: 1100px) {
    .cal-column-left { width: 600px; }
}

/* Glassmorphism Refinements */
.viewport-inner { padding: 32px; max-width: 100%; margin: 0 auto; }
.editor-wrap, .fin-view-wrap { background: rgba(255,255,255,0.01); border-radius: 16px; padding: 32px; border: 1px solid rgba(255,255,255,0.05); }

/* High-fidelity Toast */
.toast.success { border-left: 4px solid #10b981; }
.toast.error { border-left: 4px solid #ef4444; }



.fin-search.fin-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text);
    width: 100%;
    outline: none;
    transition: all 0.2s;
}

/* Force dark theme for select options to fix white-on-white bug */
.fin-input option {
    background-color: #1a1a2e !important;
    color: #ffffff !important;
}
.fin-search-input:focus { width: 300px; border-color: var(--accent); background: rgba(255,255,255,0.1); }

/* --- [V12-CORE] ⚙️ SETTINGS & DIMENSIONS --- */
.settings-wrap { padding: 12px 24px; width: 95%; max-width: 100%; margin: 0 auto; animation: fadeIn 0.4s ease-out; }
.settings-header { border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 16px; margin-bottom: 32px; }
.settings-header h1 { font-family: 'Outfit'; font-size: 28px; margin: 0 0 4px 0; color: var(--accent); }
.settings-header p { margin: 0; color: var(--text-muted); font-size: 13px; }

.settings-sect.fin-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.fin-card h3 { font-family: 'Outfit'; font-size: 18px; font-weight: 800; color: var(--accent); margin-bottom: 20px; border-bottom: 1px dashed var(--border); padding-bottom: 10px; }
.fin-card.dark h3 { color: var(--accent); }

.dim-form { display: flex; gap: 12px; margin-bottom: 20px; }
.dim-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

/* Dimension Manager Form Controls */
.dim-row-fields, .dim-add { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.dim-row-fields input, .dim-add input {
    background: var(--bg-pane); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 14px; color: var(--text-main); font-size: 14px; outline: none; transition: all 0.2s; flex: 1;
}
.dim-row-fields input:focus, .dim-add input:focus {
    border-color: var(--accent); background: var(--card-bg); box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}
.dim-row-fields button, .dim-add button {
    background: var(--accent); color: #fff; border: none; padding: 10px 20px; border-radius: 8px;
    font-weight: 600; cursor: pointer; transition: 0.2s; white-space: nowrap;
}
.dim-row-fields button:hover, .dim-add button:hover { filter: brightness(1.2); transform: translateY(-1px); }
.dim-tag {
    background: rgba(255,255,255,0.05); padding: 8px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
}
.dim-tag span { cursor: pointer; color: #ef4444; font-weight: bold; transition: 0.2s; }
.dim-tag span:hover { filter: brightness(1.5); transform: scale(1.1); }

.dim-item { 
    background: rgba(255,255,255,0.03); 
    padding: 8px 12px; 
    border-radius: 10px; 
    border: 1px solid rgba(255,255,255,0.05);
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    font-size: 13px;
    transition: 0.2s;
}
.dim-item:hover { border-color: var(--accent); background: rgba(255,255,255,0.06); }
.dim-del { background: none; border: none; color: #ef4444; font-size: 16px; cursor: pointer; padding: 0 4px; opacity: 0.6; transition: 0.2s; }
.dim-del:hover { opacity: 1; transform: scale(1.2); }

.pref-label {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
    padding: 12px 20px; border-radius: 12px; font-size: 14px; color: #fff;
    cursor: pointer; transition: 0.3s;
}
.pref-label:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.pref-label input { accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer; }

/* --- [V12-CORE] 🎨 THEME SELECTOR --- */
.theme-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px; padding: 16px; cursor: pointer; transition: 0.3s;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.theme-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.theme-card.active { border-color: var(--accent); background: rgba(139, 92, 246, 0.05); box-shadow: 0 0 20px rgba(139, 92, 246, 0.1); }

.theme-preview { width: 100%; height: 60px; border-radius: 8px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.theme-card span { font-size: 13px; font-weight: 700; color: #fff; }

@media (max-width: 768px) {
    .editor-title-row { flex-direction: column; gap: 16px; }
    .editor-title-input { font-size: 24px; }
}

/* --- [V12-CORE] 🌐 ADMIN DASHBOARD --- */
.admin-view-wrap { padding: 32px; max-width: 1200px; margin: 0 auto; animation: fadeIn 0.5s ease-out; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 20px; }
.admin-header h1 { font-family: 'Outfit'; font-size: 28px; color: #0ea5e9; margin: 0; }

.admin-top-cards { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-bottom: 32px; }
.admin-card { background: rgba(15, 23, 42, 0.4); border: 1px solid var(--border); border-radius: 16px; padding: 24px; backdrop-filter: blur(10px); }
.admin-card .card-head { margin-bottom: 16px; }
.admin-card .card-head h3 { margin: 0 0 8px 0; font-size: 18px; color: #f1f5f9; }
.admin-card .card-head p { margin: 0; font-size: 13px; color: var(--text-muted); }

.toggle-status-box { display: flex; align-items: center; background: rgba(0,0,0,0.2); padding: 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; }
.toggle-status-box.active { border-color: #10b981; background: rgba(16, 185, 129, 0.05); }
.toggle-status-box .t-info { flex: 1; }
.toggle-status-box .t-info strong { display: block; font-size: 15px; color: #f1f5f9; margin-bottom: 4px; }
.toggle-status-box .t-info p { margin: 0; font-size: 12px; color: var(--text-muted); }
.toggle-status-box .t-control input { width: 24px; height: 24px; cursor: pointer; accent-color: #10b981; }

.adm.fin-tool-item { display: flex; flex-direction: column; gap: 4px; }
.fin-tool-item label { font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; }
.fin-tool-item input { 
    background: var(--bg-pane); border: 1.5px solid var(--border); border-radius: 12px; 
    padding: 8px 16px; color: var(--text-main); font-family: 'Outfit'; outline: none; transition: 0.3s;
}
.fin-tool-item input:focus { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.admin-input:focus { border-color: var(--accent); background: rgba(0,0,0,0.5); }
.admin-input.flex-grow { flex: 1; }
.admin-save-btn { background: var(--accent); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.3s; white-space: nowrap; }
.admin-save-btn:hover { transform: scale(1.05); filter: brightness(1.2); }

.card-table { padding: 0 !important; overflow: hidden; }
.card-table .card-head { padding: 20px 24px; background: rgba(255,255,255,0.02); margin: 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.card-table .head-title { font-weight: 700; color: #f1f5f9; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { background: rgba(0,0,0,0.1); padding: 14px 24px; text-align: left; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.admin-table td { padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 14px; vertical-align: middle; }
.admin-table tr:hover { background: rgba(255,255,255,0.01); }
.admin-table tr.row-admin { background: rgba(220, 38, 38, 0.05); }

.badge { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.b-pending { background: #92400e; color: #fef3c7; }
.b-active { color: #10b981; }
.b-disabled { color: var(--text-muted); }

.role-tag.admin { background: #dc2626; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.node-ghost { font-style: italic; color: var(--oxy-text-muted); }

.col-actions { text-align: right; }
.a-btn { padding: 6px 12px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: 8px; transition: 0.2s; }
.a-btn.approve { background: #10b981; color: #fff; }
.a-btn.reject { background: #be123c; color: #fff; }
.a-btn.disable { background: #a16207; color: #fff; }
.a-btn.enable { background: #0284c7; color: #fff; }
.a-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }

.col-monitor { padding-left: 30px !important; line-height: 1.4; color: var(--text-muted); font-size: 12px; }
.m-status { color: #10b981; font-weight: 700; }

.admin-loading, .admin-error { padding: 80px; text-align: center; color: var(--text-muted); font-size: 18px; }

@media (max-width: 1100px) {
    .admin-top-cards { grid-template-columns: 1fr; }
}/* --- MODULE: CALENDAR RESTORATION --- */
.cal-view-wrap { padding: 24px; animation: fadeIn 0.4s ease-out; min-height: 100%; display: flex; flex-direction: column; padding-bottom: 60px;}
.cal-premium-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.cal-month-title { font-family: 'Outfit'; font-size: 28px; font-weight: 800; color: var(--text-main); text-shadow: 0 0 20px rgba(0,0,0,0.05); }
body.theme-jade .cal-month-title { color: #ef4444 !important; }
.cal-nav-pills { display: flex; gap: 8px; }
.nav-pill { background: var(--bg-pane); border: 1px solid var(--border); padding: 8px 16px; border-radius: 20px; color: var(--text-main); cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.nav-pill:hover { background: var(--card-bg); border-color: var(--accent); }
.cal-main-board { flex: 1; display: flex; flex-direction: column; background: transparent; padding: 0; overflow-y: auto; }
.cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px 6px; width: 100%; justify-items: stretch; border: 1.5px solid var(--border); border-radius: 20px; padding: 20px; background: rgba(255, 255, 255, 0.02); box-sizing: border-box; }

.cal-cell { position: relative; width: 100%; min-height: 75px; border-radius: 16px; background: var(--bg-pane); padding: 10px 4px; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.1), inset 0 2px 2px rgba(255,255,255,0.1); }
.cal-cell:hover { background: var(--card-bg); transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.2), 0 3px 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.1); }
.cal-cell.is-other-month { opacity: 0.3; }
.cal-cell.is-today { background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.3); }
.cal-cell.is-today .cal-day-num { color: var(--accent); }
.cal-cell.is-selected { box-shadow: inset 0 4px 8px rgba(0,0,0,0.2); transform: translateY(4px); border: 2px solid var(--accent); }

.cal-count-badge { position: absolute; top: -6px; right: -6px; background: #ef4444; color: #fff; font-size: 11px; font-weight: bold; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 2px 8px rgba(239,68,68,0.5); z-index: 2; pointer-events: none;}
.cal-day-num { font-family: 'Outfit'; font-size: 20px; font-weight: 700; color: var(--text-main); margin-bottom: 2px; pointer-events: none; line-height: 1;}
.cal-lunar-stack { display: flex; flex-direction: column; gap: 2px; align-items: center; pointer-events: none; width: 100%; overflow: hidden;}
.l-fest-term { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
.l-monthday { font-size: 10px; color: var(--text-muted); opacity: 0.8; }

.cal-sidebar-glass { height: 100%; display: flex; flex-direction: column; animation: slideInX 0.3s ease-out; }
.side-date-label { font-family: 'Outfit'; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 16px; padding: 16px 20px; border-bottom: 1px dashed rgba(255,255,255,0.05); }
.side-title { padding: 20px; font-weight: 600; color: var(--accent); letter-spacing: 2px; }
.side-entry-card { margin: 0 16px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; }
.side-entry-card:hover { background: rgba(255,255,255,0.08); transform: translateX(4px); border-color: rgba(255,255,255,0.1); }
.side-entry-card .t { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: #f8fafc; }
.side-entry-card .c { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.no-data { padding: 20px; text-align: center; color: var(--text-muted); opacity: 0.6; }

/* Native Dropdown Dark Theme Fixes */
select option { background-color: #0f172a; color: #f8fafc; }
select { color-scheme: dark; }

/* Finance Ledger Sub-System */
.ledger-scroll { overflow-y: auto; padding-right: 8px; margin-top: 16px; scrollbar-width: thin; }
.ledger-scroll::-webkit-scrollbar { width: 4px; }
.ledger-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.ledger-item {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 20px; margin-bottom: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px; cursor: pointer; transition: 0.3s cubic-bezier(0.2, 1, 0.2, 1);
}
.ledger-item:hover { 
    background: rgba(255,255,255,0.06); 
    transform: translateX(4px); 
    border-color: rgba(255,255,255,0.1); 
}
.ledger-item.is-in { border-left: 4px solid var(--accent-secondary); }
.ledger-item.is-out { border-left: 4px solid var(--accent); }

.l-main { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.l-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; }
.l-amt { font-family: 'Outfit'; font-size: 20px; font-weight: 700; color: #f8fafc; flex-shrink: 0; }
.ledger-item.is-in .l-amt { color: var(--accent-secondary); }
.ledger-item.is-out .l-amt { color: var(--accent); }

.l-tag { font-size: 11px; padding: 3px 8px; background: rgba(255,255,255,0.1); border-radius: 6px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.l-date { font-size: 11px; color: var(--text-muted); opacity: 0.7; white-space: nowrap; flex-shrink: 0; }
.l-remarks { font-size: 13px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.l-actions { display: flex; flex-direction: column; gap: 6px; opacity: 0; transition: opacity 0.2s; justify-content: center; }
.ledger-item:hover .l-actions { opacity: 1; }
.l-edit, .l-del { width: 32px; height: 32px; border-radius: 8px; border: none; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; background: rgba(255,255,255,0.05); color: var(--text-muted); }
.l-edit:hover { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.l-del:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* PERSONAL CENTER */
.pc-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 24px; padding: 20px; }
.pc-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 24px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; transition: transform 0.2s ease, border-color 0.2s ease; }
.pc-card:hover { border-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.pc-card.danger-zone { background: linear-gradient(180deg, rgba(239, 68, 68, 0.02) 0%, rgba(239, 68, 68, 0.05) 100%); border-color: rgba(239, 68, 68, 0.2); }
.pc-section-title { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); display: flex; align-items: center; gap: 8px; }
.cat-chip-array { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; font-size: 13px; color: var(--text-main); transition: background 0.2s ease; }
.cat-chip:hover { background: rgba(255, 255, 255, 0.1); }
.cat-chip button { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; }
.cat-chip button:hover { color: #ef4444; }

/* Custom Confirm UI Overlay */
.custom-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; animation: fade-in-confirm 0.2s forwards; }
@keyframes fade-in-confirm { to { opacity: 1; } }
.custom-confirm-box { background: var(--bg-surface, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 16px; width: 320px; padding: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); text-align: center; transform: scale(0.95); animation: pop-up-confirm 0.2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes pop-up-confirm { to { transform: scale(1); } }
.custom-confirm-box .c-msg { font-size: 15px; color: var(--text-main, #fff); margin-bottom: 24px; line-height: 1.6; font-weight: 500; }
.custom-confirm-box .c-actions { display: flex; gap: 12px; }
.custom-confirm-box .c-btn { flex: 1; padding: 10px 0; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; transition: 0.2s; font-size: 14px; }
.custom-confirm-box .c-btn.cancel { background: rgba(255,255,255,0.05); color: var(--text-muted, #999); border: 1px solid rgba(255,255,255,0.1); }
.custom-confirm-box .c-btn.cancel:hover { background: rgba(255,255,255,0.15); color: #fff; }
.custom-confirm-box .c-btn.confirm { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.custom-confirm-box .c-btn.confirm:hover { filter: brightness(1.1); transform: translateY(-1px); }
.custom-confirm-box .c-btn.danger { background: #ef4444; color: #fff; }
.custom-confirm-box .c-btn.danger:hover { background: #dc2626; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); }

.tab-label { display: none; } /* Hidden entirely on PC layout */
.mobile-back-btn { display: none !important; } /* Only used in mobile stack navigation */
.mobile-only-flex { display: none; } /* Hidden entirely on PC layout */

/* =========================================
   MOBILE RESPONSIVE OVERHAUL (LITERAL WHITE BOARD + 4 TABS)
   ========================================= */
@media (max-width: 768px) {
    /* 1. 绝对纯白底版 / Absolute White Board */
    body, html { 
        background: var(--bg-dark) !important; 
        margin: 0 !important; 
        padding: 0 !important;
        height: 100vh !important;
        overflow: hidden !important; 
    }
    
    #app-root {
        background: var(--bg-main) !important;
        height: 100vh !important;
        display: block !important;
        overflow-y: auto !important;
    }

    /* 极大缩小正文边距 */
    .viewport-inner {
        padding: 12px 8px !important;
    }
    
    /* 弱化或者消除所有可能会溢出引发滚动的内容边�?*/
    .editor-wrap {
        padding: 0 4px !important;
    }

    /* 隐藏目前所有未适配的复杂内容区块（白板化） - Note views omitted so they can render */
    .identity-header,
    .local-search-wrap,
    .fin-main-grid,
    .home-ultra-wrap,
    #mobile-almanac-section {
        display: none !important; 
    }

    /* 视图状态机切换逻辑 */
    /* 默认隐藏侧栏在非笔记界面 */
    body:not(.view-notes) .sidebar-pane { display: none !important; }

    /* 非笔记状态下，始终显示主内容区（因为日程和账本挂载在里面�?*/
    body:not(.view-notes) .content-stage { 
        display: block !important;
        overflow-y: auto !important; 
        flex: 1 !important; 
    }

    /* 处于笔记流视角：如果未打开任何笔记，则展示侧栏列表(Sidebar)，隐藏编辑区 */
    body.view-notes:not(.state-note-open) .content-stage { display: none !important; }
    body.view-notes:not(.state-note-open) .sidebar-pane { 
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; 
        flex: 1 !important; 
        height: 100vh !important; 
    }

    /* 处于笔记流视角：如果已打开具体笔记，则展示编辑?Content Stage)，隐藏列?*/
    body.view-notes.state-note-open .sidebar-pane { display: none !important; }
    body.view-notes.state-note-open .content-stage { 
        display: block !important;
        overflow-y: auto !important; 
        flex: 1 !important; 
    }

    /* 开启日程流视角：强制呈现日历并避免被底栏遮�?*/
    body.view-calendar .cal-view-wrap {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important; /* 允许它自然撑开，而不是被锁死�?00% */
        min-height: 100% !important;
        padding-bottom: 80px !important; /* 留出底部四大导航按钮的空�?*/
        overflow: visible !important; /* 让父容器去负责滚�?*/
        gap: 16px !important;
    }
    
    .cal-column-right {
        width: 100% !important; /* 手机端右侧栏自适应铺满 */
        max-height: none !important;
        position: static !important;
    }

    /* 2. 底部 4 按钮导航�?/ Bottom 4-Button Tab Bar */
    .activity-bar {
        position: fixed !important; 
        bottom: 0 !important; 
        left: 0 !important; 
        width: 100% !important; 
        height: auto !important;
        min-height: 72px !important; /* Increased for safety */
        background: var(--bg-pane) !important; /* Use theme pane color */
        border-top: 1px solid var(--border) !important; 
        padding-top: 10px !important;
        padding-bottom: 24px !important; /* Fallback for browsers without env() */
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 12px)) !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: flex-start !important; /* Align start so symbols don't sink down */
        z-index: 9999 !important;
        box-sizing: border-box !important;
    }

    /* 放弃之前�?contents 黑科技，强制重写结构使其成为绝对横�?Flex */
    .activity-bar .bar-top, 
    .activity-bar .bar-bottom #toggle-sidebar-btn, 
    .activity-bar .bar-bottom #logout-btn, 
    .activity-bar .bar-bottom #active-user-badge,
    .activity-bar .bar-main #quick-new-btn,
    .activity-bar [data-view="admin"] { 
        display: none !important; 
    }

    /* 利用 contents 黑科技使得四大按钮能够直接成为 activity-bar 的子元素，从而跨�?div 平均分布 */
    .activity-bar .bar-main, 
    .activity-bar .bar-bottom {
        display: contents !important;
    }

    /* 3. 按钮与图标修�?/ Button & Icon Styling */
    .activity-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Changed from center to push everything up */
        flex: 1 !important;
        color: var(--text-muted) !important;
        height: 100% !important; /* Explicitly take full height */
        background: transparent !important;
        border: none !important;
        color: var(--text-muted) !important; /* Use theme muted text */
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        gap: 6px !important; /* Increase gap slightly so text separates from icon */
    }

    .activity-btn.active { 
        color: var(--accent) !important; /* 采用系统的动态主色提�?*/
    }

    .activity-btn svg { 
        width: 26px !important; 
        height: 26px !important; 
        margin-bottom: 4px !important; 
        stroke-width: 1.5 !important;
        flex-shrink: 0 !important;
    }

    .tab-label { 
        display: block !important;
        overflow-y: auto !important; 
        font-size: 11px !important; 
        font-weight: 500 !important; 
        line-height: 1 !important; 
        margin-top: 2px !important;
    }
    
    /* 解决正文无法滑动的问题：确立滚动容器 */
    .content-stage, #active-item-container {
        height: 100% !important;
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 80px !important; /* 为底部四大按钮留出空�?*/
    }

    /* 手机端卡片按钮专用样�?*/
    .m-card-btn {
        padding: 5px 16px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border: 1px solid #eaeaea !important;
        background: #f9f9f9 !important;
        color: #333333 !important;
        transition: all 0.15s ease !important;
    }
    
    .m-edit { background: #f2f7ff !important; color: #007AFF !important; border-color: #d1e2ff !important; }
    .m-edit:active, .m-edit.active { background: #007AFF !important; color: #ffffff !important; border-color: #007AFF !important; }
    
    .m-del { background: #fff0f0 !important; color: #ef4444 !important; border-color: #ffe4e4 !important; }
    .m-del:active, .m-del.active { background: #ef4444 !important; color: #ffffff !important; border-color: #ef4444 !important; }

    /* 物理返回键（移动端专用） */
    .mobile-back-btn {
        display: none !important;
    }

    /* 编辑器整体布局调整 (隐藏富文本按钮，挪动标题与分�? */
    .ql-toolbar.ql-snow { display: none !important; }
    .editor-header { margin-bottom: 8px !important; }
    .cat-label { display: none !important; }
    
    .editor-title-row { 
        flex-direction: row !important; 
        align-items: center !important; 
        gap: 8px !important; 
        margin-bottom: 0 !important;
    }
    
    .editor-meta-row { display: none !important; } /* We will move the select into title row using flex order or positioning, wait, in HTML they are separate... */
    
    /* 由于隐藏了富文本工具栏，我们�?Header 和主体拼�?*/
    .editor-header { 
        display: flex !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important;
        align-items: center !important; 
        justify-content: space-between !important;
        gap: 8px !important; 
        border: 1px solid var(--border) !important;
        border-bottom: none !important; /* 底部无边距，与正文缝�?*/
        border-radius: 12px 12px 0 0 !important;
        padding: 10px 12px !important;
        background: var(--card-bg) !important;
        margin-bottom: 0 !important; /* 紧贴正文 */
    }
    .editor-title-row { 
        flex: 1 !important; 
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        margin-bottom: 0 !important;
    }
    .editor-title-input { 
        font-size: 16px !important; /* 稍微放大点适应框体 */
        padding: 0 !important;
        width: 100% !important;
        font-weight: 800 !important;
    }
    .editor-meta-row {
        padding: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .cat-select {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        background: var(--bg-pane) !important;
        color: var(--text-main) !important;
        border: 1px solid var(--border) !important;
        max-width: 100px !important;
    }
    
    /* 修正富文本框使其与上方标题框无缝衔接 */
    .ql-container.ql-snow {
        border: 1px solid var(--border) !important;
        border-radius: 0 0 12px 12px !important;
        background: var(--card-bg) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    }
    
    /* 隐藏原有的PC端操作按�?*/
    .pc-only-actions, .editor-actions, .pc-only-inline { display: none !important; }
    
    /* 圆角水晶底部四按�?(放在正文内容之下) - 强制单行 */
    .mobile-only-flex.m-crystal-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-top: 16px;
        margin-bottom: 8px !important; /* 减小下边距，使分隔线更靠近按�?*/
        justify-content: space-between;
        width: 100%;
    }
    
    /* 调整日志区域的顶部虚线距�?*/
    .log-section {
        margin-top: 12px !important; /* 原为24px，现拉近距离 */
        padding-top: 16px !important;
    }
    .m-crystal-btn {
        flex: 1;
        min-width: 0;
        background: var(--bg-pane);
        border: 1px solid var(--border);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: var(--text-main);
        padding: 8px 4px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        white-space: nowrap;
        text-align: center;
    }
    .m-crystal-btn:active { background: var(--bg-dark); transform: scale(0.98); }
    /* 通过不同的透明度或者使用更兼容模板的色�?*/
    .m-crystal-btn.m-step-edit { border-color: rgba(59, 130, 246, 0.4); color: #3b82f6; }
    .m-crystal-btn.m-step-save { border-color: rgba(16, 185, 129, 0.4); color: #10b981; }
    .m-crystal-btn.m-step-del { border-color: rgba(239, 68, 68, 0.4); color: #ef4444; }
    .m-crystal-btn.m-step-sub1, .m-crystal-btn.m-step-sub2 { border-color: var(--accent); color: var(--accent); }
    
    /* 日历手机端自适应修复 (防止方块逸出边框) */
    .cal-view-wrap { padding: 8px 4px !important; }
    
    /* 深层压缩日历外框距离，贴合屏�?*/
    .cal-grid-wrapper {
        padding: 12px 6px !important;
        border-width: 1px !important;
        border-radius: 16px !important;
    }
    
    /* 手机端专用跨月箭头按�?*/
    .m-cal-nav {
        background: var(--bg-pane);
        border: 1px solid var(--border);
        color: var(--text-main);
        font-size: 20px;
        line-height: 1;
        padding: 2px 14px;
        border-radius: 12px;
        cursor: pointer;
        font-family: monospace;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }
    .m-cal-nav:active {
        background: var(--bg-dark);
        transform: scale(0.95);
    }

    .cal-grid {
        gap: 4px !important;
        padding: 8px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    .cal-weekday-header { gap: 4px !important; padding-bottom: 6px !important; }
    .cal-cell {
        min-height: auto !important;
        aspect-ratio: auto !important;
        height: 52px !important; /* 更精致的扁型，确保竖向不拖沓 */
        padding: 4px 2px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }
    .cal-day-num { font-size: 14px !important; margin-bottom: 6px !important; }
    .cal-lunar-stack { font-size: 9px !important; gap: 0 !important; transform: scale(0.9); }
    /* 手机端设置界面竖向排版自适应 */
    .pc-dashboard {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 !important;
    }
    .pc-card {
        padding: 16px !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
    }
    .settings-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .settings-header > div:last-child {
        width: 100% !important;
    }
    .cal-nav-pills {
        width: 100% !important;
        display: flex !important;
    }
    .nav-pill {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .fin-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    /* 数据库管理页面的横向大间距也改为竖排 */
    #settings-content-area > div[style*="gap: 24px"] {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #settings-content-area > div[style*="gap: 24px"] > div:first-child {
        width: 100% !important;
        max-height: 150px !important;
        overflow-y: auto !important;
        padding-bottom: 8px !important;
    }
    #settings-content-area > div[style*="gap: 24px"] > div:last-child {
        flex: none !important;
        height: 60vh !important;
    }
    /* 修复设置页面卡片内的分类选项和主题选项过小被遮挡的问题 */
    .pc-card .cat-select, .fin-group .cat-select {
        max-width: none !important;
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }
    
    /* 财务管理面板手机自适应 */
    .fin-view-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding-bottom: 24px !important;
    }
    
    .pc-hide {
        display: block !important;
        overflow-y: auto !important;
    }
    .pc-show-only {
        display: none !important;
    }
    .fin-top-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.85) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 10000 !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 40px 24px !important;
        flex-direction: column !important;
        justify-content: center !important;
        pointer-events: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    .fin-top-bar.active {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .fin-top-bar .m-filter-close-header {
        display: flex !important;
    }
    
    .fin-top-bar .fin-tool-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    .fin-top-bar input, .fin-top-bar select, .fin-top-bar button {
        width: 100% !important;
        margin: 0 !important;
        height: 48px !important;
        font-size: 16px !important;
    }
    
    /* 主体录入区与流水�?*/
    .fin-view-wrap > div[style*="gap: 24px"] {
        order: 2 !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .fin-form-pane, .fin-list-pane {
        width: 100% !important;
        padding: 16px !important;
    }
    .ledger-scroll {
        max-height: 50vh !important; /* 解除高度硬编码，让其自适应或固定占屏一�?*/
    }

    /* 顶部数据看板被挪到最底端 */
    .fin-stats-row {
        order: 3 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
    }
    
    .fin-stats-row .fin-card {
        padding: 12px !important;
    }
    .fin-stats-row .tit {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }
    .fin-stats-row .val {
        font-size: 16px !important;
    }
    /* 账户管理移动端布局 */
    .dim-row-fields {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .dim-row-fields input, .dim-row-fields button {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .fin-meta-table, .fin-meta-table tbody, .fin-meta-table tr, .fin-meta-table td {
        display: block !important;
        overflow-y: auto !important;
        width: 100% !important;
    }
    .fin-meta-table thead {
        display: none !important;
    }
    .fin-meta-table tr {
        margin-bottom: 12px !important;
        background: rgba(255,255,255,0.02) !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }
    .fin-meta-table td {
        text-align: left !important;
        padding: 4px 0 !important;
        border: none !important;
    }
    .fin-meta-table td:first-child {
        font-weight: bold !important;
        font-size: 16px !important;
        color: var(--accent) !important;
    }
    .fin-meta-table td:last-child {
        margin-top: 8px !important;
        text-align: right !important;
    }
    
    /* 账户管理与分类管理上下堆�?*/
    .dim-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }
    .dim-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .dim-tag {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .dim-add {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .dim-add input, .dim-add button {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* 移动端锁定小标签字号 */
    .fin-label, .fin-tool-item label {
        font-size: 11px !important;
    }
    

    /* 移动端返回与保存按钮排版 */
    .fin-remark-group {
        gap: 12px !important;
    }
    .fin-btn-combo {
        width: 100% !important;
        flex-direction: row !important;
        height: 44px !important;
    }
    .fin-btn-combo button {
        margin: 0 !important;
        flex: 1 !important;
        background: transparent !important;
    }
    .fin-btn-combo .pc-hide {
        border: 1px solid var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .fin-btn-combo .fin-save-btn {
        border: 1px solid var(--accent) !important;
        color: var(--accent) !important;
    }
}

/* 调整电脑端主面板标签的大字号 */
.fin-label, .fin-tool-item label {
    font-size: 16px !important;
}

.fin-card .tit {
    font-size: 15px !important;
}
@media (max-width: 768px) {
    .pc-card {
        padding: 16px !important;
        margin-bottom: 0 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
        border: 1px solid #f1f5f9 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .pc-dashboard {
        padding: 16px !important;
        gap: 16px !important;
    }
    .fin-input {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #0f172a !important;
    }
    .fin-label {
        color: #475569 !important;
    }
}
@media (max-width: 768px) {
    #settings-content-area, .pc-dashboard {
        min-height: 100% !important;
        background: #f8fafc !important;
    }
    .settings-wrap {
        background: var(--bg-main) !important;
        padding-bottom: 80px !important; 
    }
    .settings-header {
        background: var(--surface) !important;
        padding: 20px 24px !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }
}
@media (max-width: 768px) {
    .settings-wrap {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .pc-card {
        border-radius: 12px !important;
    }
}
@media (max-width: 768px) {
    .fin-view-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .fin-card {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
@media (max-width: 768px) {
    .fin-stats-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
}
#mobile-fin-mng-btn {
    display: none !important;
}
@media (max-width: 768px) {
    .desktop-fin-mng {
        display: none !important;
    }
    #mobile-fin-mng-btn {
        display: inline-block !important;
    }
}
@media (max-width: 768px) {
    .fin-meta-table tr {
        position: relative !important;
    }
    .fin-meta-table td:last-child {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    .fin-meta-table td:first-child {
        padding-right: 70px !important;
        line-height: 1.4 !important;
    }
}
.fin-mobi-num-inline { display: none; }
@media (max-width: 768px) {
    .fin-desk-num { display: none !important; }
    .fin-mobi-num-inline { display: inline-block !important; }
}


/* MOBILE UI: Rounded wireframe wrapper and transparent background for tree list */
@media (max-width: 768px) {
    .sidebar-pane {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #module-context-list {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px;
        margin: 16px;
        margin-bottom: 96px !important; /* Push up above the bottom tab bar */
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        flex: 1 !important;
        height: 0 !important; /* Flex constraint */
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .node-actions-ribbon { opacity: 1 !important; flex-wrap: wrap !important; margin-top: 8px !important; }

    .modal-overlay { align-items: flex-start !important; padding-top: 20px !important; padding-bottom: 90px !important; }
    .modal-content { max-height: calc(100vh - 120px) !important; overflow-y: auto !important; margin: 0 auto !important; }
}

/* Quill Custom Fonts & Line Height UI */
.ql-snow .ql-picker.ql-lineheight { width: 70px; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before, .ql-snow .ql-picker.ql-lineheight .ql-picker-item::before { content: '行距'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before { content: '1.0'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.5"]::before, .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.5"]::before { content: '1.5'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before { content: '2.0'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2.5"]::before, .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2.5"]::before { content: '2.5'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3"]::before { content: '3.0'; }

.ql-toolbar.ql-snow {
    background: transparent !important;
    border: none !important;
    border-top: 1px dashed var(--border) !important;
    padding-top: 12px !important;
    padding-bottom: 0 !important;
    margin-top: 8px !important;
}

.ql-snow .ql-picker.ql-size { width: 72px; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: '默认'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="13px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="13px"]::before { content: '13px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { content: '28px'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px'; }


/* Fix for Sub-entry rich text formatting */
.node-body.ql-editor { font-family: 'Inter', sans-serif !important; font-size: 14px !important; line-height: 1.8 !important; padding-left: 6px !important; overflow-x: visible !important; }
.node-body.ql-editor ol, .node-body.ql-editor ul { padding-left: 1.2em; }
.node-body.ql-editor li { padding-bottom: 2px; }


/* --- Fullscreen Enhancements --- */

/* Modal Fullscreen */
.modal-content.modal-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 24px 32px !important;
    display: flex;
    flex-direction: column;
}
.modal-content.modal-fullscreen #modal-editor-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.modal-content.modal-fullscreen .ql-container.ql-snow {
    height: 100% !important;
    flex: 1;
}

/* Node Log Fullscreen (Reading Mode) */
.node-content-wrap.is-fullscreen {
    position: fixed !important;
    top: 3vh !important;
    left: 4vw !important;
    width: 92vw !important;
    height: 94vh !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    margin: 0 !important;
    padding: 60px 80px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5) !important;
    border: 1px solid var(--border) !important;
    background: var(--card-bg) !important;
}

.node-content-wrap.is-fullscreen .node-body {
    max-height: none !important;
}

.node-content-wrap.is-fullscreen .node-actions-ribbon {
    position: sticky;
    bottom: 20px;
    width: max-content;
    margin-left: auto;
    background: var(--card-bg);
    padding: 12px 24px;
    border-radius: 30px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    margin-top: 40px;
    z-index: 1000;
    opacity: 1;
}

@media (max-width: 768px) {
    .node-content-wrap.is-fullscreen {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        padding: 24px 16px !important;
        padding-bottom: 80px !important;
        border-radius: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }
    .node-content-wrap.is-fullscreen .node-actions-ribbon {
        position: fixed !important;
        bottom: 24px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 10001 !important;
    }
}