/* PasswordKeeper — Multi-Theme Stylesheet Themes: dark (default) | light | 80s | fun | christmas | halloween | summer Applied via */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600;700&family=Press+Start+2P&family=Fredoka+One&family=Mountains+of+Christmas:wght@400;700&family=Creepster&family=Pacifico&display=swap'); /* ════════════════════════════════════════════ THEME: DARK (default — slate & terracotta) ════════════════════════════════════════════ */ :root, [data-theme="dark"] { --bg-base: #0e1117; --bg-surface: #131920; --bg-card: #181f2a; --bg-card-hover: #1e2738; --bg-input: #111620; --bg-modal: #161d28; --border: #232e3f; --border-accent: #2e3d54; --primary: #c9703a; --primary-light: #e08555; --primary-dim: #7a3f1e; --primary-glow: rgba(201,112,58,0.15); --primary-subtle: rgba(201,112,58,0.08); --secondary: #4a7fa8; --secondary-light:#6a9fc8; --green: #4caf7d; --green-dim: rgba(76,175,125,0.12); --red: #d95f4b; --red-dim: rgba(217,95,75,0.12); --text-primary: #e4e8ef; --text-secondary: #8a9ab5; --text-muted: #4e607a; --font-head: 'DM Serif Display', serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-accent: 'DM Serif Display', serif; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow-md: 0 4px 24px rgba(0,0,0,0.5); --shadow-lg: 0 8px 48px rgba(0,0,0,0.6); --shadow-primary: 0 0 32px rgba(201,112,58,0.1); --navbar-bg: rgba(13,17,23,0.96); --navbar-border: linear-gradient(90deg, transparent, rgba(201,112,58,0.3), transparent); --card-top-bar: linear-gradient(90deg, #7a3f1e, #c9703a, #d4953a, #7a3f1e); --transition: 0.18s ease; --body-extra-bg: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(201,112,58,0.07) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 10% 20%, rgba(74,127,168,0.05) 0%, transparent 60%); --scrollbar-thumb: #2e3d54; --stat-bar: linear-gradient(90deg, #7a3f1e, #c9703a); } /* ════════════════════════════════════════════ THEME: LIGHT ════════════════════════════════════════════ */ [data-theme="light"] { --bg-base: #f5f4f0; --bg-surface: #edeae3; --bg-card: #ffffff; --bg-card-hover: #faf8f4; --bg-input: #f0ede6; --bg-modal: #ffffff; --border: #ddd8ce; --border-accent: #c9bfb0; --primary: #b85c28; --primary-light: #d4703a; --primary-dim: #8a3f18; --primary-glow: rgba(184,92,40,0.12); --primary-subtle: rgba(184,92,40,0.07); --secondary: #2d6a9a; --secondary-light:#3a82ba; --green: #2e8a5c; --green-dim: rgba(46,138,92,0.1); --red: #c0392b; --red-dim: rgba(192,57,43,0.1); --text-primary: #1a1612; --text-secondary: #5a4e42; --text-muted: #9a8c7e; --shadow-sm: 0 1px 4px rgba(0,0,0,0.1); --shadow-md: 0 4px 16px rgba(0,0,0,0.12); --shadow-lg: 0 8px 32px rgba(0,0,0,0.15); --shadow-primary: 0 0 24px rgba(184,92,40,0.1); --navbar-bg: rgba(245,244,240,0.97); --navbar-border: linear-gradient(90deg, transparent, rgba(184,92,40,0.25), transparent); --card-top-bar: linear-gradient(90deg, #8a3f18, #b85c28, #d4703a, #8a3f18); --body-extra-bg: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(184,92,40,0.06) 0%, transparent 70%); --scrollbar-thumb: #c9bfb0; --stat-bar: linear-gradient(90deg, #8a3f18, #b85c28); } /* ════════════════════════════════════════════ THEME: 80s ════════════════════════════════════════════ */ [data-theme="80s"] { --bg-base: #0a0015; --bg-surface: #0d0020; --bg-card: #100025; --bg-card-hover: #160030; --bg-input: #08001a; --bg-modal: #0d0022; --border: #3d0080; --border-accent: #6600cc; --primary: #ff00ff; --primary-light: #ff55ff; --primary-dim: #990099; --primary-glow: rgba(255,0,255,0.2); --primary-subtle: rgba(255,0,255,0.08); --secondary: #00ffff; --secondary-light:#55ffff; --green: #00ff88; --green-dim: rgba(0,255,136,0.12); --red: #ff2255; --red-dim: rgba(255,34,85,0.12); --text-primary: #ffffff; --text-secondary: #cc88ff; --text-muted: #7744aa; --font-head: 'Press Start 2P', monospace; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-accent: 'Press Start 2P', monospace; --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 4px; --shadow-sm: 0 0 8px rgba(255,0,255,0.3); --shadow-md: 0 0 20px rgba(255,0,255,0.4); --shadow-lg: 0 0 40px rgba(255,0,255,0.5); --shadow-primary: 0 0 40px rgba(255,0,255,0.4), 0 0 80px rgba(0,255,255,0.2); --navbar-bg: rgba(10,0,21,0.98); --navbar-border: linear-gradient(90deg, transparent, rgba(255,0,255,0.8), rgba(0,255,255,0.8), transparent); --card-top-bar: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff); --body-extra-bg: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,0,255,0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 0%, rgba(0,255,255,0.06) 0%, transparent 50%), repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,0,255,0.015) 2px, rgba(255,0,255,0.015) 4px); --scrollbar-thumb: #6600cc; --stat-bar: linear-gradient(90deg, #ff00ff, #00ffff); } /* ════════════════════════════════════════════ THEME: FUN ════════════════════════════════════════════ */ [data-theme="fun"] { --bg-base: #1a0533; --bg-surface: #220840; --bg-card: #2a0d50; --bg-card-hover: #340f60; --bg-input: #180430; --bg-modal: #220840; --border: #4a1a80; --border-accent: #6a2aaa; --primary: #ff6b35; --primary-light: #ff8c5a; --primary-dim: #cc4422; --primary-glow: rgba(255,107,53,0.2); --primary-subtle: rgba(255,107,53,0.08); --secondary: #ffd700; --secondary-light:#ffe44d; --green: #44ff88; --green-dim: rgba(68,255,136,0.12); --red: #ff4466; --red-dim: rgba(255,68,102,0.12); --text-primary: #fff8f0; --text-secondary: #d4aaff; --text-muted: #8855cc; --font-head: 'Fredoka One', cursive; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-accent: 'Fredoka One', cursive; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --shadow-sm: 0 3px 10px rgba(0,0,0,0.4); --shadow-md: 0 6px 24px rgba(0,0,0,0.5); --shadow-lg: 0 12px 48px rgba(0,0,0,0.6); --shadow-primary: 0 0 30px rgba(255,107,53,0.25), 0 0 60px rgba(255,215,0,0.1); --navbar-bg: rgba(26,5,51,0.97); --navbar-border: linear-gradient(90deg, transparent, rgba(255,107,53,0.5), rgba(255,215,0,0.5), rgba(255,107,53,0.5), transparent); --card-top-bar: linear-gradient(90deg, #ff6b35, #ffd700, #ff6b35); --body-extra-bg: radial-gradient(ellipse 70% 50% at 30% 10%, rgba(255,107,53,0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 70% 80%, rgba(255,215,0,0.06) 0%, transparent 50%); --scrollbar-thumb: #6a2aaa; --stat-bar: linear-gradient(90deg, #ff6b35, #ffd700); } /* ════════════════════════════════════════════ THEME: CHRISTMAS ════════════════════════════════════════════ */ [data-theme="christmas"] { --bg-base: #0a1f0a; --bg-surface: #0f280f; --bg-card: #142e14; --bg-card-hover: #1a381a; --bg-input: #0a1e0a; --bg-modal: #122812; --border: #1e4a1e; --border-accent: #2a6a2a; --primary: #cc2222; --primary-light: #ee4444; --primary-dim: #881414; --primary-glow: rgba(204,34,34,0.2); --primary-subtle: rgba(204,34,34,0.08); --secondary: #f5c842; --secondary-light:#f7d96a; --green: #44cc66; --green-dim: rgba(68,204,102,0.12); --red: #ff3333; --red-dim: rgba(255,51,51,0.12); --text-primary: #f0f8e8; --text-secondary: #a8c8a0; --text-muted: #507850; --font-head: 'Mountains of Christmas', cursive; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-accent: 'Mountains of Christmas', cursive; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.5); --shadow-md: 0 4px 20px rgba(0,0,0,0.55); --shadow-lg: 0 8px 40px rgba(0,0,0,0.6); --shadow-primary: 0 0 30px rgba(204,34,34,0.2), 0 0 60px rgba(245,200,66,0.1); --navbar-bg: rgba(10,20,10,0.97); --navbar-border: linear-gradient(90deg, transparent, rgba(204,34,34,0.5), rgba(245,200,66,0.5), rgba(204,34,34,0.5), transparent); --card-top-bar: linear-gradient(90deg, #881414, #cc2222, #f5c842, #cc2222, #881414); --body-extra-bg: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,200,66,0.04) 0%, transparent 60%); --scrollbar-thumb: #2a6a2a; --stat-bar: linear-gradient(90deg, #cc2222, #f5c842); } /* ════════════════════════════════════════════ THEME: HALLOWEEN ════════════════════════════════════════════ */ [data-theme="halloween"] { --bg-base: #080808; --bg-surface: #0f0a00; --bg-card: #140d00; --bg-card-hover: #1c1200; --bg-input: #090600; --bg-modal: #110900; --border: #2a1800; --border-accent: #4a2e00; --primary: #ff6600; --primary-light: #ff8833; --primary-dim: #993d00; --primary-glow: rgba(255,102,0,0.2); --primary-subtle: rgba(255,102,0,0.07); --secondary: #8822aa; --secondary-light:#aa44cc; --green: #44aa22; --green-dim: rgba(68,170,34,0.12); --red: #cc1111; --red-dim: rgba(204,17,17,0.12); --text-primary: #f0e0cc; --text-secondary: #cc9944; --text-muted: #665522; --font-head: 'Creepster', cursive; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-accent: 'Creepster', cursive; --radius-sm: 2px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --shadow-sm: 0 2px 8px rgba(255,102,0,0.15); --shadow-md: 0 4px 20px rgba(255,102,0,0.2); --shadow-lg: 0 8px 40px rgba(255,102,0,0.25); --shadow-primary: 0 0 30px rgba(255,102,0,0.3), 0 0 60px rgba(136,34,170,0.15); --navbar-bg: rgba(8,8,8,0.99); --navbar-border: linear-gradient(90deg, transparent, rgba(255,102,0,0.6), transparent); --card-top-bar: linear-gradient(90deg, #4a2e00, #ff6600, #8822aa, #ff6600, #4a2e00); --body-extra-bg: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,102,0,0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 30% at 80% 20%, rgba(136,34,170,0.05) 0%, transparent 50%); --scrollbar-thumb: #4a2e00; --stat-bar: linear-gradient(90deg, #993d00, #ff6600); } /* ════════════════════════════════════════════ THEME: SUMMER ════════════════════════════════════════════ */ [data-theme="summer"] { --bg-base: #0a2a4a; --bg-surface: #0d3358; --bg-card: #103d6a; --bg-card-hover: #154878; --bg-input: #082240; --bg-modal: #0d3358; --border: #1a5080; --border-accent: #2470aa; --primary: #f5a623; --primary-light: #f7bc55; --primary-dim: #b87a10; --primary-glow: rgba(245,166,35,0.2); --primary-subtle: rgba(245,166,35,0.08); --secondary: #40e0d0; --secondary-light:#6eeee0; --green: #2ecc87; --green-dim: rgba(46,204,135,0.12); --red: #ff6b6b; --red-dim: rgba(255,107,107,0.12); --text-primary: #e8f4ff; --text-secondary: #89c4e8; --text-muted: #3a7aaa; --font-head: 'Pacifico', cursive; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-accent: 'Pacifico', cursive; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --shadow-sm: 0 2px 12px rgba(0,0,0,0.3); --shadow-md: 0 4px 24px rgba(0,0,0,0.4); --shadow-lg: 0 8px 48px rgba(0,0,0,0.5); --shadow-primary: 0 4px 24px rgba(245,166,35,0.25), 0 0 40px rgba(64,224,208,0.1); --navbar-bg: rgba(8,30,58,0.97); --navbar-border: linear-gradient(90deg, transparent, rgba(64,224,208,0.5), rgba(245,166,35,0.4), rgba(64,224,208,0.5), transparent); --card-top-bar: linear-gradient(90deg, #1a5080, #f5a623, #40e0d0, #f5a623, #1a5080); --body-extra-bg: radial-gradient(ellipse 100% 40% at 50% 0%, rgba(64,224,208,0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 30% at 20% 80%, rgba(245,166,35,0.06) 0%, transparent 50%); --scrollbar-thumb: #2470aa; --stat-bar: linear-gradient(90deg, #40e0d0, #f5a623); } /* Summer wave animation on body */ [data-theme="summer"] body::after { content: ''; position: fixed; bottom: 0; left: -50%; right: -50%; height: 120px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='rgba(64,224,208,0.06)' d='M0,60 C240,100 480,20 720,60 C960,100 1200,20 1440,60 L1440,120 L0,120 Z'/%3E%3C/svg%3E") repeat-x bottom, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='rgba(245,166,35,0.04)' d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,30 1440,40 L1440,120 L0,120 Z'/%3E%3C/svg%3E") repeat-x bottom; background-size: 1440px 80px, 1440px 60px; animation: waves 8s linear infinite; pointer-events: none; z-index: 0; } @keyframes waves { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } } /* Sun glow in top-right corner */ [data-theme="summer"] body::before { content: ''; position: fixed; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(245,166,35,0.18) 0%, rgba(245,166,35,0.06) 40%, transparent 70%); pointer-events: none; z-index: 0; border-radius: 50%; } /* Ocean shimmer on cards */ [data-theme="summer"] .card { background: linear-gradient(145deg, #103d6a, #0d3a62); border-color: #1a5080; } [data-theme="summer"] .card:hover { border-color: rgba(64,224,208,0.4); box-shadow: 0 4px 20px rgba(64,224,208,0.1); } /* Sandy stat values */ [data-theme="summer"] .stat-value { color: var(--primary); } /* Turquoise active nav */ [data-theme="summer"] .nav-link.active { color: var(--secondary); background: rgba(64,224,208,0.1); } /* Wave-coloured sidebar active */ [data-theme="summer"] .sidebar-link.active { color: var(--secondary); background: rgba(64,224,208,0.08); border-left-color: var(--secondary); } /* Teal access entry dot */ [data-theme="summer"] .access-entry .dot { background: rgba(64,224,208,0.4); } /* Summer client card hover */ [data-theme="summer"] .client-card:hover { border-color: rgba(64,224,208,0.35); box-shadow: 0 6px 24px rgba(64,224,208,0.12), 0 0 0 1px rgba(245,166,35,0.1); } /* Summer badge teal variant */ [data-theme="summer"] .badge-blue { background: rgba(64,224,208,0.1); color: var(--secondary-light); border-color: rgba(64,224,208,0.2); } /* ════════════════════════════════════════════ RESET & BASE ════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--bg-base); color: var(--text-primary); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color 0.3s ease, color 0.3s ease; } body::before { content: ''; position: fixed; inset: 0; background: var(--body-extra-bg); pointer-events: none; z-index: 0; } /* 80s scanlines */ [data-theme="80s"] body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px); pointer-events: none; z-index: 1; } /* Christmas snow particles (CSS only) */ [data-theme="christmas"] body::after { content: '❄ ❅ ❆ ❄ ❅ ❆ ❄'; position: fixed; top: -20px; left: 0; right: 0; font-size: 18px; color: rgba(255,255,255,0.15); letter-spacing: 40px; pointer-events: none; z-index: 0; animation: snowfall 8s linear infinite; } @keyframes snowfall { to { transform: translateY(110vh); } } /* ════════════════════════════════════════════ TYPOGRAPHY ════════════════════════════════════════════ */ h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; } [data-theme="80s"] h1, [data-theme="80s"] h2 { font-size: 1rem; letter-spacing: 0.05em; } [data-theme="halloween"] h1 { font-size: 2.4rem; } [data-theme="christmas"] h1 { font-size: 2.2rem; } [data-theme="summer"] h1 { font-size: 1.8rem; } [data-theme="fun"] h1 { font-size: 2rem; letter-spacing: 0.02em; } a { color: var(--primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--primary-light); } code, .mono { font-family: var(--font-mono); font-size: 0.88em; } /* ════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════ */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .page-wrapper { position: relative; z-index: 1; } /* ════════════════════════════════════════════ NAVIGATION ════════════════════════════════════════════ */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 62px; background: var(--navbar-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 100; transition: background 0.3s ease; } .navbar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--navbar-border); } .navbar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 1.15rem; color: var(--text-primary); letter-spacing: 0.01em; } [data-theme="80s"] .navbar-brand { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; } [data-theme="halloween"] .navbar-brand { font-size: 1.4rem; } [data-theme="christmas"] .navbar-brand { font-size: 1.4rem; } [data-theme="summer"] .navbar-brand { font-size: 1.1rem; } [data-theme="fun"] .navbar-brand { font-size: 1.3rem; } .navbar-brand .brand-icon { width: 30px; height: 30px; background: linear-gradient(135deg, var(--primary), var(--primary-dim)); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 2px 8px var(--primary-glow); } [data-theme="80s"] .navbar-brand .brand-icon { border-radius: 0; border: 1px solid var(--primary); box-shadow: 0 0 10px var(--primary); } [data-theme="fun"] .navbar-brand .brand-icon { border-radius: 50%; } .navbar-brand span.accent { color: var(--primary); } [data-theme="80s"] .navbar-brand span.accent { text-shadow: 0 0 10px var(--primary); } .navbar-nav { display: flex; align-items: center; gap: 2px; } .nav-link { padding: 7px 15px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; transition: all var(--transition); } .nav-link:hover { background: var(--bg-card); color: var(--text-primary); } .nav-link.active { color: var(--primary); background: var(--primary-subtle); } [data-theme="80s"] .nav-link { font-family: var(--font-mono); font-size: 0.7rem; border-radius: 0; } [data-theme="80s"] .nav-link.active { box-shadow: 0 0 8px var(--primary); } /* ─── THEME TOGGLE BUTTON ─── */ .theme-toggle-btn { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-accent); color: var(--text-secondary); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .theme-toggle-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-subtle); } .theme-toggle-btn .theme-icon { font-size: 14px; } /* Theme picker dropdown */ .theme-picker-wrap { position: relative; } .theme-picker-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-modal); border: 1px solid var(--border-accent); border-radius: var(--radius-lg); padding: 8px; box-shadow: var(--shadow-lg); min-width: 200px; z-index: 200; animation: dropIn 0.18s ease; } .theme-picker-dropdown.open { display: block; } @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .theme-picker-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 4px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .theme-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition); font-size: 0.875rem; color: var(--text-secondary); border: none; background: none; width: 100%; text-align: left; font-family: var(--font-body); } .theme-option:hover { background: var(--primary-subtle); color: var(--text-primary); } .theme-option.active { color: var(--primary); background: var(--primary-subtle); font-weight: 600; } .theme-option .swatch { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.1); } .navbar-user { display: flex; align-items: center; gap: 8px; } .user-badge { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px 4px 5px; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-secondary); } .user-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dim)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; border: 1px solid var(--primary-glow); } /* ════════════════════════════════════════════ CARDS ════════════════════════════════════════════ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: border-color var(--transition), box-shadow var(--transition); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--card-top-bar); opacity: 0.5; } .card:hover { border-color: var(--border-accent); } [data-theme="80s"] .card { border-color: var(--primary); box-shadow: 0 0 10px var(--primary-glow); } [data-theme="80s"] .card::before { opacity: 1; height: 1px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .card-title { font-family: var(--font-head); font-size: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } /* ════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all var(--transition); white-space: nowrap; text-decoration: none; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 12px var(--primary-glow); } .btn-primary:hover:not(:disabled) { background: var(--primary-light); border-color: var(--primary-light); box-shadow: 0 4px 20px var(--primary-glow); color: #fff; transform: translateY(-1px); } [data-theme="80s"] .btn-primary { border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); font-size: 0.7rem; box-shadow: 0 0 15px var(--primary); } [data-theme="fun"] .btn-primary { border-radius: var(--radius-xl); } [data-theme="summer"] .btn-primary { color: #fff; } .btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-accent); } .btn-secondary:hover:not(:disabled) { background: var(--bg-card-hover); border-color: var(--primary-dim); color: var(--text-primary); } .btn-danger { background: transparent; color: var(--red); border-color: var(--red); } .btn-danger:hover:not(:disabled) { background: var(--red-dim); } .btn-success { background: transparent; color: var(--green); border-color: var(--green); } .btn-success:hover:not(:disabled) { background: var(--green-dim); } .btn-sm { padding: 5px 12px; font-size: 0.8rem; } .btn-lg { padding: 13px 28px; font-size: 1rem; } .btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; background: var(--bg-surface); border-color: var(--border); color: var(--text-secondary); } .btn-icon:hover { border-color: var(--primary-dim); color: var(--primary); background: var(--bg-card); } /* ════════════════════════════════════════════ FORMS ════════════════════════════════════════════ */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; } [data-theme="80s"] .form-label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--secondary); } .form-control { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.9rem; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-control:focus { border-color: var(--primary-dim); box-shadow: 0 0 0 3px var(--primary-glow); } .form-control.mono { font-family: var(--font-mono); } textarea.form-control { resize: vertical; min-height: 80px; } .form-control::placeholder { color: var(--text-muted); } [data-theme="80s"] .form-control { border-radius: 0; border-color: var(--primary-dim); font-family: var(--font-mono); background: #050010; } [data-theme="80s"] .form-control:focus { border-color: var(--secondary); box-shadow: 0 0 8px var(--secondary); } select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a9ab5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .search-wrap { position: relative; flex: 1; max-width: 480px; } .search-wrap .search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .search-wrap .form-control { padding-left: 38px; } /* ════════════════════════════════════════════ TABLES ════════════════════════════════════════════ */ .table-wrap { overflow-x: auto; } table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; } .data-table th { padding: 10px 14px; text-align: left; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid var(--border); white-space: nowrap; } [data-theme="80s"] .data-table th { font-family: var(--font-mono); color: var(--secondary); font-size: 0.6rem; } .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background var(--transition); } .data-table tbody tr:hover { background: var(--primary-subtle); } /* ════════════════════════════════════════════ BADGES ════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } [data-theme="80s"] .badge { border-radius: 0; font-family: var(--font-mono); font-size: 0.6rem; } .badge-terra { background: var(--primary-subtle); color: var(--primary-light); border: 1px solid var(--primary-glow); } .badge-blue { background: rgba(74,127,168,0.1); color: var(--secondary-light); border: 1px solid rgba(74,127,168,0.2); } .badge-green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(76,175,125,0.2); } .badge-red { background: var(--red-dim); color: var(--red); border: 1px solid rgba(217,95,75,0.2); } .badge-gray { background: rgba(138,154,181,0.08); color: var(--text-secondary); border: 1px solid var(--border); } .badge-amber { background: rgba(212,149,58,0.12); color: var(--secondary); border: 1px solid rgba(212,149,58,0.2); } .badge-admin { background: var(--primary-subtle); color: var(--primary-light); border: 1px solid var(--primary-glow); } .type-badge { padding: 3px 9px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; } .type-wordpress { background: rgba(74,127,168,0.1); color: var(--secondary-light); border: 1px solid rgba(74,127,168,0.2); } .type-ftp { background: var(--primary-subtle); color: var(--primary-light); border: 1px solid var(--primary-glow); } .type-other { background: rgba(138,154,181,0.07); color: var(--text-secondary); border: 1px solid var(--border); } /* ════════════════════════════════════════════ PASSWORD FIELDS ════════════════════════════════════════════ */ .password-field { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 12px; transition: border-color var(--transition); } .password-field:hover { border-color: var(--border-accent); } .password-value { flex: 1; font-family: var(--font-mono); font-size: 0.84rem; color: var(--text-primary); letter-spacing: 0.08em; word-break: break-all; } .password-value.hidden { letter-spacing: 0.28em; color: var(--text-muted); } .btn-reveal { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 5px; border-radius: var(--radius-sm); transition: color var(--transition); font-size: 14px; } .btn-reveal:hover { color: var(--primary); } .btn-copy { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 8px; border-radius: var(--radius-sm); transition: all var(--transition); font-size: 0.78rem; font-weight: 600; font-family: var(--font-body); } .btn-copy:hover { color: var(--green); } .btn-copy.copied { color: var(--green); } /* ════════════════════════════════════════════ ALERTS ════════════════════════════════════════════ */ .alert { padding: 12px 16px; border-radius: var(--radius-md); font-size: 0.875rem; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; } .alert-error { background: var(--red-dim); border: 1px solid rgba(217,95,75,0.3); color: var(--red); } .alert-success { background: var(--green-dim); border: 1px solid rgba(76,175,125,0.3); color: var(--green); } .alert-warning { background: rgba(212,149,58,0.1); border: 1px solid rgba(212,149,58,0.3); color: var(--secondary); } .alert-info { background: var(--primary-subtle); border: 1px solid var(--primary-glow); color: var(--primary-light); } /* ════════════════════════════════════════════ MODALS ════════════════════════════════════════════ */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); z-index: 1000; align-items: center; justify-content: center; padding: 24px; } .modal-overlay.active { display: flex; } .modal { background: var(--bg-modal); border: 1px solid var(--border-accent); border-radius: var(--radius-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg), var(--shadow-primary); animation: modalIn 0.22s ease; } @keyframes modalIn { from { opacity:0; transform:translateY(-12px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); } .modal-title { font-family: var(--font-head); font-size: 1.1rem; color: var(--text-primary); } .modal-close { width: 28px; height: 28px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all var(--transition); font-size: 14px; } .modal-close:hover { color: var(--text-primary); border-color: var(--primary-dim); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } /* ════════════════════════════════════════════ LOGIN / SET PASSWORD PAGES ════════════════════════════════════════════ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; } .login-page::before { content: ''; position: fixed; inset: 0; background: var(--body-extra-bg); pointer-events: none; } .login-card, .setpw-card { width: 100%; max-width: 400px; background: var(--bg-card); border: 1px solid var(--border-accent); border-radius: var(--radius-xl); padding: 40px 36px; box-shadow: var(--shadow-lg), var(--shadow-primary); position: relative; z-index: 1; } .login-card::before, .setpw-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-top-bar); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } [data-theme="80s"] .login-card, [data-theme="80s"] .setpw-card { border-radius: 0; border-color: var(--primary); box-shadow: 0 0 30px var(--primary-glow); } [data-theme="80s"] .login-card::before { height: 2px; } .login-logo { text-align: center; margin-bottom: 32px; } .login-logo .logo-icon { width: 68px; height: 68px; background: linear-gradient(145deg, var(--primary-glow), var(--primary-subtle)); border: 1px solid var(--primary-glow); border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 16px; box-shadow: 0 4px 20px var(--primary-glow); } [data-theme="80s"] .login-logo .logo-icon { border-radius: 0; } [data-theme="fun"] .login-logo .logo-icon { border-radius: 50%; } .login-logo h1 { font-size: 1.6rem; font-weight: 400; color: var(--text-primary); } [data-theme="80s"] .login-logo h1 { font-size: 0.8rem; color: var(--secondary); text-shadow: 0 0 10px var(--secondary); } .login-logo p { font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; } /* ════════════════════════════════════════════ MAIN CONTENT ════════════════════════════════════════════ */ .main-content { padding: 32px; max-width: 1280px; margin: 0 auto; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .page-title { font-size: 1.7rem; font-weight: 400; letter-spacing: 0.01em; } .page-title span { color: var(--primary); font-style: italic; } [data-theme="80s"] .page-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; } [data-theme="80s"] .page-title span { text-shadow: 0 0 10px var(--primary); font-style: normal; } .page-subtitle { font-size: 0.875rem; color: var(--text-muted); margin-top: 3px; } /* ════════════════════════════════════════════ CLIENT GRID ════════════════════════════════════════════ */ .clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .client-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; cursor: pointer; transition: all var(--transition); text-decoration: none; display: block; } .client-card:hover { border-color: var(--primary-dim); box-shadow: var(--shadow-md), var(--shadow-primary); transform: translateY(-2px); color: var(--text-primary); } [data-theme="80s"] .client-card { border-radius: 0; border-color: var(--primary-dim); } [data-theme="80s"] .client-card:hover { box-shadow: 0 0 20px var(--primary-glow); transform: none; border-color: var(--primary); } .client-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .client-avatar { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 1.1rem; color: white; flex-shrink: 0; } [data-theme="80s"] .client-avatar { border-radius: 0; } [data-theme="fun"] .client-avatar { border-radius: 50%; } .client-info { flex: 1; min-width: 0; } .client-name { font-family: var(--font-head); font-size: 1rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .client-url { font-size: 0.76rem; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .client-meta { display: flex; gap: 8px; margin-top: 14px; font-size: 0.75rem; color: var(--text-muted); padding-top: 12px; border-top: 1px solid var(--border); } /* ════════════════════════════════════════════ CREDENTIALS ════════════════════════════════════════════ */ .credential-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; transition: border-color var(--transition); } .credential-item:hover { border-color: var(--border-accent); } .cred-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cred-label { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; } .cred-meta { font-size: 0.74rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .cred-fields { display: flex; flex-direction: column; gap: 8px; } .cred-field-row { display: flex; flex-direction: column; gap: 4px; } .cred-field-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); } /* ════════════════════════════════════════════ ACCESS HISTORY ════════════════════════════════════════════ */ .access-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .access-history-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); font-weight: 600; margin-bottom: 7px; } .access-entry { display: flex; align-items: center; gap: 8px; font-size: 0.77rem; color: var(--text-muted); padding: 3px 0; } .access-entry .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary-dim); flex-shrink: 0; } /* ════════════════════════════════════════════ ONE-TIME SECRET ════════════════════════════════════════════ */ .secret-view-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .secret-card { width: 100%; max-width: 560px; background: var(--bg-card); border: 1px solid var(--border-accent); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-lg); text-align: center; } .secret-icon { font-size: 48px; margin-bottom: 16px; } .secret-text { background: var(--bg-input); border: 1px solid var(--border-accent); border-radius: var(--radius-md); padding: 20px; font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.7; text-align: left; word-break: break-word; white-space: pre-wrap; margin: 24px 0; color: var(--text-primary); } /* ════════════════════════════════════════════ ADMIN LAYOUT ════════════════════════════════════════════ */ .admin-layout { display: flex; min-height: calc(100vh - 62px); } .admin-sidebar { width: 216px; background: var(--bg-surface); border-right: 1px solid var(--border); padding: 20px 0; flex-shrink: 0; } .admin-sidebar .sidebar-section-title { padding: 0 18px 10px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 6px; } [data-theme="80s"] .admin-sidebar .sidebar-section-title { color: var(--secondary); font-family: var(--font-mono); font-size: 0.58rem; } .sidebar-link { display: flex; align-items: center; gap: 9px; padding: 9px 18px; font-size: 0.86rem; color: var(--text-secondary); transition: all var(--transition); border-left: 2px solid transparent; } .sidebar-link:hover { background: var(--bg-card); color: var(--text-primary); } .sidebar-link.active { background: var(--primary-subtle); color: var(--primary-light); border-left-color: var(--primary); } [data-theme="80s"] .sidebar-link.active { color: var(--primary); box-shadow: inset 0 0 10px var(--primary-glow); } .admin-main { flex: 1; padding: 32px; overflow-x: hidden; } /* ════════════════════════════════════════════ STATS ════════════════════════════════════════════ */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--stat-bar); opacity: 0.7; } [data-theme="80s"] .stat-card { border-radius: 0; border-color: var(--primary-dim); } .stat-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 10px; } .stat-value { font-family: var(--font-head); font-size: 2.1rem; color: var(--primary); line-height: 1; } [data-theme="80s"] .stat-value { font-size: 1.4rem; text-shadow: 0 0 10px var(--primary); } .stat-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 5px; } .invite-pending { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--secondary); background: rgba(212,149,58,0.1); border: 1px solid rgba(212,149,58,0.2); border-radius: 20px; padding: 3px 9px; font-weight: 600; } /* ════════════════════════════════════════════ SCROLLBAR ════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-dim); } /* ════════════════════════════════════════════ UTILITIES ════════════════════════════════════════════ */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .mt-1{margin-top:4px;}.mt-2{margin-top:8px;}.mt-3{margin-top:12px;}.mt-4{margin-top:16px;} .mb-2{margin-bottom:8px;}.mb-4{margin-bottom:16px;} .text-muted{color:var(--text-muted);}.text-terra{color:var(--primary);}.text-green{color:var(--green);}.text-red{color:var(--red);} .text-sm{font-size:0.875rem;}.text-xs{font-size:0.75rem;}.font-mono{font-family:var(--font-mono);} .w-full{width:100%;}.text-center{text-align:center;}.d-none{display:none !important;} /* ════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════ */ @media (max-width: 900px) { .admin-layout { flex-direction: column; } .admin-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 8px 0; display: flex; flex-wrap: wrap; } .clients-grid { grid-template-columns: 1fr; } .main-content { padding: 16px; } .navbar { padding: 0 16px; } .theme-picker-dropdown { right: -60px; } } @media (max-width: 600px) { .login-card, .setpw-card { padding: 28px 20px; } .page-header { flex-direction: column; align-items: flex-start; } .stats-grid { grid-template-columns: 1fr 1fr; } .navbar-brand span:not(.accent) { display: none; } }