/* ========================================================================= DEAL VAULT — DESIGN SYSTEM Dark-first (default). Light theme via [data-theme="light"] on . ========================================================================= */ :root { /* Brand */ --accent: #3B7BFF; --accent-2: #6FA1FF; --accent-soft: rgba(59,123,255,0.14); /* Dark surfaces */ --bg: #070b14; --bg-2: #0b1322; --panel: rgba(255,255,255,0.04); --panel-2: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.14); /* Text */ --text: #E2E8F0; --text-2: #94A3B8; --text-3: #64748B; --text-mute: #334155; /* States */ --success: #10B981; --warning: #F59E0B; --error: #F43F5E; --info: #38BDF8; /* Radii */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px rgba(0,0,0,.5); /* Type */ --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: 'Fira Code', 'Consolas', ui-monospace, monospace; /* Layout */ --sidebar-w: 264px; --topbar-h: 60px; } html[data-theme="light"] { --bg: #F6F8FB; --bg-2: #FFFFFF; --panel: rgba(15,23,42,0.03); --panel-2: rgba(15,23,42,0.05); --border: rgba(15,23,42,0.10); --border-2: rgba(15,23,42,0.18); --text: #0F172A; --text-2: #475569; --text-3: #64748B; --text-mute:#94A3B8; --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow: 0 8px 24px rgba(15,23,42,.08); --shadow-lg: 0 24px 60px rgba(15,23,42,.12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Body background gradient for depth */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(900px 600px at 10% -10%, rgba(59,123,255,0.08), transparent 60%), radial-gradient(800px 500px at 110% 110%, rgba(99,102,241,0.06), transparent 60%); pointer-events: none; z-index: 0; } html[data-theme="light"] body::before { opacity: .5; } /* ------------------------- Typography ------------------------- */ h1,h2,h3,h4,h5 { margin: 0 0 var(--s-3); font-weight: 700; letter-spacing: -0.01em; color: var(--text); } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 17px; } h4 { font-size: 14px; } p { margin: 0 0 var(--s-3); color: var(--text-2); } small, .muted { color: var(--text-2); } .text-dim { color: var(--text-3); } .text-mute { color: var(--text-mute); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, pre, .mono { font-family: var(--font-mono); font-size: 12.5px; } /* ------------------------- Layout shell ------------------------- */ .app-layout { display: flex; min-height: 100vh; position: relative; z-index: 1; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; } .main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); border-bottom: 1px solid var(--border); background: var(--bg-2); display: flex; align-items: center; padding: 0 var(--s-6); gap: var(--s-4); position: sticky; top: 0; z-index: 10; } .topbar h1, .topbar .title { font-size: 16px; margin: 0; } .topbar .spacer { flex: 1; } .page { padding: var(--s-6); max-width: 1400px; width: 100%; margin: 0 auto; } /* ------------------------- Sidebar ------------------------- */ .sb-brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--border); } .sb-brand .mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #6366f1); display: grid; place-items: center; color: #fff; font-weight: 800; box-shadow: 0 4px 14px rgba(59,123,255,0.4); } .sb-brand .name { font-weight: 700; letter-spacing: .2px; } .sb-brand .name small { display: block; color: var(--text-3); font-weight: 500; font-size: 11px; } .sb-nav { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-3); } .sb-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); padding: var(--s-4) var(--s-3) var(--s-2); } .sb-link { display: flex; align-items: center; gap: var(--s-3); padding: 9px var(--s-3); border-radius: var(--r-sm); color: var(--text-2); cursor: pointer; font-weight: 500; font-size: 14px; transition: background .15s, color .15s; } .sb-link:hover { background: var(--panel); color: var(--text); text-decoration: none; } .sb-link.active { background: var(--accent-soft); color: var(--accent-2); } .sb-link i, .sb-link svg { width: 18px; text-align: center; } .sb-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--s-3); background: var(--bg-2); } .sb-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, var(--accent)); display: grid; place-items: center; color: #fff; font-weight: 700; } .sb-foot .meta { line-height: 1.2; } .sb-foot .meta b { display: block; font-size: 13px; } .sb-foot .meta small { font-size: 11px; color: var(--text-3); } /* ------------------------- Glass panels ------------------------- */ .glass-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .kpi-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); } .kpi-card .label { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .kpi-card .value { font-size: 24px; font-weight: 700; color: var(--text); } .kpi-card .delta { font-size: 12px; color: var(--success); } .kpi-card .delta.neg { color: var(--error); } .grid { display: grid; gap: var(--s-4); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } /* ------------------------- Buttons ------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 9px 14px; border-radius: var(--r-sm); border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text); cursor: pointer; font-weight: 600; font-size: 13.5px; font-family: inherit; transition: transform .08s, background .15s, border-color .15s, box-shadow .15s; white-space: nowrap; text-decoration: none; } .btn:hover { background: var(--panel); border-color: var(--accent); color: var(--text); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--accent), #6366f1); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(59,123,255,0.32); } .btn-primary:hover { filter: brightness(1.05); color: #fff; box-shadow: 0 8px 22px rgba(59,123,255,0.45); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--panel); border-color: var(--border); color: var(--text); } .btn-danger { background: rgba(244,63,94,0.12); border-color: rgba(244,63,94,0.4); color: #FFB1C0; } .btn-danger:hover { background: rgba(244,63,94,0.2); border-color: var(--error); color: #FFDCE3; } .btn-success { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.4); color: #6EE7B7; } .btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 7px; } .btn-lg { padding: 12px 20px; font-size: 15px; } .btn-block { width: 100%; } /* ------------------------- Inputs ------------------------- */ .input, textarea.input, select.input { width: 100%; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-2); background: var(--bg-2); color: var(--text); font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; } .field { margin-bottom: var(--s-4); } /* ------------------------- Tabs ------------------------- */ .tab-nav { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--s-5); overflow-x: auto; } .tab-btn { background: transparent; border: none; color: var(--text-2); padding: 12px var(--s-4); cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .15s, border-color .15s; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--accent-2); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ------------------------- Badges & chips ------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-2); font-weight: 600; letter-spacing: .02em; } .badge.success { background: rgba(16,185,129,.12); color: #6EE7B7; border-color: rgba(16,185,129,.35); } .badge.warning { background: rgba(245,158,11,.12); color: #FCD34D; border-color: rgba(245,158,11,.35); } .badge.error { background: rgba(244,63,94,.12); color: #FFB1C0; border-color: rgba(244,63,94,.35); } .badge.info { background: rgba(56,189,248,.12); color: #7DD3FC; border-color: rgba(56,189,248,.35); } .badge.brand { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(59,123,255,.35); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ------------------------- Tables ------------------------- */ .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } .tbl th { color: var(--text-3); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; } .tbl tr:hover td { background: var(--panel); } /* =========================================================== VDR — the centerpiece =========================================================== */ .vdr-shell { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-4); min-height: 540px; } @media (max-width: 900px) { .vdr-shell { grid-template-columns: 1fr; } } .vdr-folder-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-3); display: flex; flex-direction: column; } .vdr-folder-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-3) var(--s-3); border-bottom: 1px solid var(--border); margin-bottom: var(--s-2); } .vdr-folder-panel-header h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); } .vdr-folder-list { flex: 1; overflow-y: auto; } .vdr-folder-row { display: flex; align-items: center; gap: var(--s-2); padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text-2); font-size: 13.5px; font-weight: 500; position: relative; transition: background .12s, color .12s; } .vdr-folder-row:hover { background: var(--panel-2); color: var(--text); } .vdr-folder-row.active { background: var(--accent-soft); color: var(--accent-2); } .vdr-folder-arrow { width: 12px; color: var(--text-3); } .vdr-folder-icon { color: var(--accent); width: 16px; } .vdr-folder-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vdr-folder-badge { background: var(--panel-2); border: 1px solid var(--border); color: var(--text-3); font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 600; } .vdr-folder-row.active .vdr-folder-badge { background: rgba(59,123,255,.18); color: var(--accent-2); border-color: rgba(59,123,255,.4); } .vdr-folder-delete { opacity: 0; background: transparent; border: none; color: var(--error); cursor: pointer; padding: 2px 4px; font-size: 12px; } .vdr-folder-row:hover .vdr-folder-delete { opacity: .7; } .vdr-folder-delete:hover { opacity: 1 !important; } .vdr-add-folder { margin-top: var(--s-2); display: flex; gap: 6px; padding: var(--s-2); border-top: 1px solid var(--border); } .vdr-add-folder input { flex: 1; padding: 7px 10px; font-size: 13px; } /* File panel */ .vdr-file-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 540px; } .vdr-file-header { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); } .vdr-file-header h3 { margin: 0; font-size: 15px; } .vdr-file-header .spacer { flex: 1; } .vdr-file-body { flex: 1; padding: var(--s-3) var(--s-3) var(--s-4); overflow-y: auto; } .file-row { display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid transparent; margin-bottom: 4px; transition: background .12s, border-color .12s; } .file-row:hover { background: var(--panel-2); border-color: var(--border); } .file-icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #fff; flex: 0 0 38px; background: linear-gradient(135deg, #6366f1, var(--accent)); } .file-icon.pdf { background: linear-gradient(135deg, #ef4444, #f59e0b); } .file-icon.xls, .file-icon.xlsx { background: linear-gradient(135deg, #10b981, #059669); } .file-icon.doc, .file-icon.docx { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .file-icon.ppt, .file-icon.pptx { background: linear-gradient(135deg, #f97316, #ea580c); } .file-icon.img { background: linear-gradient(135deg, #ec4899, #a855f7); } .file-icon.zip { background: linear-gradient(135deg, #6b7280, #374151); } .file-info { flex: 1; min-width: 0; } .file-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; } .file-actions { display: flex; gap: 4px; } .file-action-btn { background: transparent; border: 1px solid transparent; color: var(--text-3); width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; transition: color .12s, background .12s, border-color .12s; } .file-action-btn:hover { color: var(--text); background: var(--panel); border-color: var(--border); } .file-action-btn.danger:hover { color: var(--error); background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.3); } .vdr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-8) var(--s-5); color: var(--text-3); text-align: center; } .vdr-empty i, .vdr-empty .ico { font-size: 36px; margin-bottom: var(--s-3); opacity: .5; } /* Drop zone */ .dropzone { border: 2px dashed var(--border-2); border-radius: var(--r); padding: var(--s-6); text-align: center; color: var(--text-2); transition: border-color .15s, background .15s; cursor: pointer; margin: var(--s-3) var(--s-3) 0; } .dropzone:hover, .dropzone.is-drag { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .dropzone i, .dropzone .ico { font-size: 26px; display: block; margin-bottom: 8px; color: var(--accent); } /* Drive status pill */ .drive-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); color: #6EE7B7; } .drive-pill.syncing { background: rgba(245,158,11,.12); color: #FCD34D; border-color: rgba(245,158,11,.35); } .drive-pill.error { background: rgba(244,63,94,.12); color: #FFB1C0; border-color: rgba(244,63,94,.35); } .drive-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } } /* Modal */ .modal-bg { position: fixed; inset: 0; background: rgba(7,11,20,0.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 999; padding: var(--s-5); } .modal-bg.open { display: flex; } .modal { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; overflow: hidden; animation: modalIn .18s ease-out; } @keyframes modalIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-head { padding: var(--s-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; } .modal-head h3 { margin: 0; flex: 1; } .modal-body { padding: var(--s-5); } .modal-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); display: flex; gap: var(--s-2); justify-content: flex-end; } /* Toast */ .toast-stack { position: fixed; bottom: var(--s-5); right: var(--s-5); display: flex; flex-direction: column; gap: 8px; z-index: 9999; max-width: 360px; } .toast { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r); padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); font-size: 13.5px; color: var(--text); animation: toastIn .2s ease-out; border-left: 3px solid var(--accent); } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--error); } .toast.warning { border-left-color: var(--warning); } .toast .ico { font-size: 16px; } .toast.success .ico { color: var(--success); } .toast.error .ico { color: var(--error); } .toast.warning .ico { color: var(--warning); } @keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Skeleton */ .skel { display: inline-block; background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: skel 1.4s infinite; border-radius: 6px; height: 14px; } @keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Utility */ .row { display: flex; align-items: center; gap: var(--s-3); } .col { display: flex; flex-direction: column; gap: var(--s-3); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .flex-1 { flex: 1; } .hidden { display: none !important; } .text-right { text-align: right; } .text-center { text-align: center; } .right { margin-left: auto; } /* Scrollbars (subtle) */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--border-2); } /* Auth pages */ .auth-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--s-6); position: relative; z-index: 1; } .auth-card { width: 100%; max-width: 440px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-7); box-shadow: var(--shadow); backdrop-filter: blur(14px); } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-6); } .auth-brand .mark { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #6366f1); display: grid; place-items: center; color: #fff; font-weight: 800; }