/* ============================================================ StakeholderMap SaaS — Global Styles Aesthetic: Dark Enterprise — deep slate, electric indigo accents Fonts: Syne (headings) + DM Sans (body) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap'); /* — Variables ——————————————————————————————————————————————— */ :root { --bg: #0b0f1a; --bg2: #111827; --bg3: #1c2436; --surface: #1e2740; --surface2: #263354; --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.14); --text: #e8edf8; --text2: #8a9bc4; --text3: #5b6a8e; --accent: #6366f1; --accent-h: #4f52e0; --accent-glow: rgba(99,102,241,0.35); --green: #10b981; --red: #ef4444; --amber: #f59e0b; --blue: #3b82f6; --purple: #a855f7; --teal: #14b8a6; --radius: 12px; --radius-sm: 8px; --shadow: 0 4px 24px rgba(0,0,0,0.5); --shadow-lg: 0 8px 48px rgba(0,0,0,0.7); /* Role colors */ --role-economic: #6366f1; --role-user: #10b981; --role-technical: #f59e0b; --role-coach: #a855f7; --role-unknown: #5b6a8e; /* Sentiment colors */ --sent-supporter: #10b981; --sent-detractor: #ef4444; --sent-neutral: #6b7280; --sent-unknown: #374151; } /* — Light Theme ————————————————————————————————————————————— */ /* Applied to element so variables cascade to all children */ html.theme-light { --bg: #f0f2f8; --bg2: #ffffff; --bg3: #e8ebf4; --surface: #dde2f0; --surface2: #cdd4e8; --border: rgba(0,0,0,0.09); --border2: rgba(0,0,0,0.16); --text: #0f1523; --text2: #3d4d6e; --text3: #7a8aae; --accent-glow: rgba(99,102,241,0.2); --shadow: 0 4px 24px rgba(0,0,0,0.1); --shadow-lg: 0 8px 48px rgba(0,0,0,0.18); } html.theme-light body { background: var(--bg); color: var(--text); } html.theme-light .map-container { background: #e8ebf6; background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.08) 1px, transparent 0); background-size: 32px 32px; } html.theme-light .contact-node { box-shadow: 0 2px 12px rgba(0,0,0,0.12); } html.theme-light .contact-node[data-sentiment="supporter"] { box-shadow: 0 0 0 2px rgba(16,185,129,0.5), 0 2px 12px rgba(0,0,0,0.1); } html.theme-light .contact-node[data-sentiment="detractor"] { box-shadow: 0 0 0 2px rgba(239,68,68,0.5), 0 2px 12px rgba(0,0,0,0.1); } /* — Theme Toggle ————————————————————————————————————————————*/ .theme-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-size: 0.8rem; color: var(--text2); font-weight: 600; transition: all 0.15s; margin-bottom: 8px; user-select: none; width: 100%; } .theme-toggle:hover { border-color: var(--border2); color: var(--text); } .toggle-track { width: 34px; height: 18px; border-radius: 9px; background: var(--surface2); position: relative; transition: background 0.2s; flex-shrink: 0; } .toggle-track.on { background: var(--accent); } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: white; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .toggle-track.on .toggle-thumb { left: 19px; } /* — Reset —————————————————————————————————————————————————— */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: #818cf8; } img { max-width: 100%; display: block; } input, textarea, select { font-family: inherit; font-size: inherit; } button { cursor: pointer; font-family: inherit; } /* — Typography ——————————————————————————————————————————————*/ h1,h2,h3,h4,h5 { font-family: 'Syne', sans-serif; font-weight: 700; line-height: 1.2; } h1 { font-size: 2.4rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.25rem; } p { color: var(--text2); } /* — Layout ——————————————————————————————————————————————————*/ .app-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } /* — Sidebar ——————————————————————————————————————————————————*/ .sidebar { background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-logo { padding: 24px 20px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); } .sidebar-logo .logo-icon { width: 36px; height: 36px; background: var(--accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px var(--accent-glow); } .sidebar-logo .logo-icon svg { color: white; } .sidebar-logo span { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--text); letter-spacing: -0.02em; } .sidebar-nav { flex: 1; padding: 16px 12px; } .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text2); font-size: 0.9rem; font-weight: 500; transition: all 0.15s; margin-bottom: 2px; } .sidebar-nav a:hover { background: var(--surface); color: var(--text); } .sidebar-nav a.active { background: var(--surface); color: var(--accent); } .sidebar-nav a svg { opacity: 0.7; flex-shrink: 0; } .sidebar-nav a.active svg { opacity: 1; } .sidebar-section-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); padding: 16px 12px 6px; } .sidebar-footer { padding: 16px 12px; border-top: 1px solid var(--border); } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); } .sidebar-user .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: white; flex-shrink: 0; } .sidebar-user .user-info { flex: 1; min-width: 0; } .sidebar-user .user-name { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user .user-plan { font-size: 0.7rem; color: var(--text3); } /* — Main Content ————————————————————————————————————————————*/ .main-content { min-height: 100vh; display: flex; flex-direction: column; } .topbar { padding: 20px 32px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--bg); position: sticky; top: 0; z-index: 10; } .topbar h2 { font-size: 1.3rem; font-weight: 700; } .topbar p { font-size: 0.85rem; color: var(--text2); margin-top: 2px; } .page-content { flex: 1; padding: 32px; } /* — Cards ——————————————————————————————————————————————————*/ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color 0.2s; } .card:hover { border-color: var(--border2); } .account-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; } .account-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--purple)); transform: scaleX(0); transition: transform 0.2s; transform-origin: left; } .account-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: var(--shadow); } .account-card:hover::before { transform: scaleX(1); } .account-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; } .account-card .meta { font-size: 0.8rem; color: var(--text3); } .account-card .count-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--text2); border-radius: 20px; padding: 3px 10px; font-size: 0.75rem; margin-top: 12px; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; } /* — Buttons ——————————————————————————————————————————————————*/ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; border: none; transition: all 0.15s; cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--accent); color: white; box-shadow: 0 0 0 0 var(--accent-glow); } .btn-primary:hover { background: var(--accent-h); box-shadow: 0 0 16px var(--accent-glow); } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text2); } .btn-ghost:hover { border-color: var(--border2); color: var(--text); background: var(--surface); } .btn-danger { background: var(--red); color: white; } .btn-danger:hover { background: #dc2626; } .btn-sm { padding: 6px 12px; font-size: 0.8rem; } .btn-icon { padding: 8px; border-radius: var(--radius-sm); } /* — Forms ——————————————————————————————————————————————————*/ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text2); margin-bottom: 7px; letter-spacing: 0.02em; } .form-control { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 14px; font-size: 0.9rem; transition: border-color 0.15s, box-shadow 0.15s; outline: none; } .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-control::placeholder { color: var(--text3); } select.form-control option { background: var(--bg3); } .form-hint { font-size: 0.78rem; color: var(--text3); margin-top: 5px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* — Badges ——————————————————————————————————————————————————*/ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .badge-economic { background: rgba(99,102,241,0.2); color: #818cf8; } .badge-user { background: rgba(16,185,129,0.2); color: #34d399; } .badge-technical { background: rgba(245,158,11,0.2); color: #fbbf24; } .badge-coach { background: rgba(168,85,247,0.2); color: #c084fc; } .badge-unknown { background: rgba(91,106,142,0.2); color: #8a9bc4; } .badge-supporter { background: rgba(16,185,129,0.2); color: #34d399; } .badge-detractor { background: rgba(239,68,68,0.2); color: #f87171; } .badge-neutral { background: rgba(107,114,128,0.2);color: #9ca3af; } /* — Alert banner ————————————————————————————————————————————*/ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.875rem; margin-bottom: 20px; } .alert-warning { background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3); color: #fbbf24; } .alert-error { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #f87171; } .alert-success { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; } .alert-info { background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); color: #818cf8; } /* — Modal ———————————————————————————————————————————————————*/ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-backdrop.open { opacity: 1; pointer-events: all; } .modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px; padding: 32px; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; transform: translateY(20px); transition: transform 0.2s; box-shadow: var(--shadow-lg); } .modal-backdrop.open .modal { transform: translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .modal-header h3 { font-size: 1.2rem; } .modal-close { width: 32px; height: 32px; border-radius: 8px; background: var(--surface); border: none; color: var(--text2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; transition: background 0.15s; } .modal-close:hover { background: var(--surface2); color: var(--text); } .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } /* — Stakeholder Map Canvas ——————————————————————————————————*/ .map-container { position: relative; width: 100%; height: calc(100vh - 130px); background: var(--bg); background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0); background-size: 32px 32px; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); } .map-canvas { position: absolute; width: 3000px; height: 2000px; transform-origin: 0 0; } .map-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } /* — Contact Node Cards ——————————————————————————————————————*/ .contact-node { position: absolute; width: 230px; background: var(--bg2); border-radius: 14px; border: 2px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.4); cursor: grab; user-select: none; transition: box-shadow 0.2s, border-color 0.2s, transform 0.1s; z-index: 2; } .contact-node:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.6); z-index: 3; } .contact-node.dragging { cursor: grabbing; z-index: 100; transform: scale(1.03); box-shadow: 0 12px 40px rgba(0,0,0,0.7); } .contact-node.selected { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow); } /* Role border colors */ .contact-node[data-role="economic_buyer"] { border-color: rgba(99,102,241,0.5); } .contact-node[data-role="user_buyer"] { border-color: rgba(16,185,129,0.5); } .contact-node[data-role="technical_buyer"]{ border-color: rgba(245,158,11,0.5); } .contact-node[data-role="coach"] { border-color: rgba(168,85,247,0.5); } /* Sentiment glow */ .contact-node[data-sentiment="supporter"] { box-shadow: 0 0 0 2px rgba(16,185,129,0.4), 0 4px 20px rgba(0,0,0,0.4); } .contact-node[data-sentiment="detractor"] { box-shadow: 0 0 0 2px rgba(239,68,68,0.4), 0 4px 20px rgba(0,0,0,0.4); } .node-header { padding: 14px 14px 10px; display: flex; align-items: center; gap: 10px; } .node-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface2); flex-shrink: 0; object-fit: cover; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; color: var(--text2); overflow: hidden; } .node-info { flex: 1; min-width: 0; } .node-name { font-size: 0.78rem; font-weight: 700; font-family: 'Syne', sans-serif; color: var(--text); white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } .node-title { font-size: 0.68rem; color: var(--text3); white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; margin-top: 2px; } .node-footer { padding: 8px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .node-actions { display: flex; gap: 4px; } .node-action-btn { width: 26px; height: 26px; border-radius: 6px; background: transparent; border: 1px solid var(--border); color: var(--text3); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.7rem; transition: all 0.15s; } .node-action-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border2); } .node-connect-btn { color: var(--accent); border-color: rgba(99,102,241,0.3); } .node-connect-btn:hover { background: rgba(99,102,241,0.1); } /* Sentiment indicator dot */ .sentiment-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sentiment-dot.supporter { background: var(--green); box-shadow: 0 0 6px var(--green); } .sentiment-dot.detractor { background: var(--red); box-shadow: 0 0 6px var(--red); } .sentiment-dot.neutral { background: var(--text3); } .sentiment-dot.unknown { background: var(--text3); opacity: 0.4; } /* — Map Toolbar ——————————————————————————————————————————————*/ .map-toolbar { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: var(--bg2); border: 1px solid var(--border); border-radius: 40px; padding: 6px 10px; display: flex; align-items: center; gap: 6px; z-index: 20; box-shadow: var(--shadow); } .toolbar-btn { padding: 7px 14px; border-radius: 30px; border: none; background: transparent; color: var(--text2); font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.15s; } .toolbar-btn:hover { background: var(--surface); color: var(--text); } .toolbar-btn.active { background: var(--accent); color: white; } .toolbar-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; } /* — Map Mini-legend ——————————————————————————————————————————*/ .map-legend { position: absolute; bottom: 16px; right: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; z-index: 20; min-width: 200px; } .map-legend h4 { font-size: 0.78rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text2); margin-bottom: 6px; } .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .legend-line { width: 20px; height: 2px; border-radius: 2px; flex-shrink: 0; } /* — Landing Page ——————————————————————————————————————————————*/ .landing { min-height: 100vh; } .landing-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 5vw; border-bottom: 1px solid var(--border); } .hero { text-align: center; padding: 100px 5vw 60px; max-width: 860px; margin: 0 auto; } .hero-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); color: #818cf8; padding: 5px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 24px; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; background: linear-gradient(135deg, #e8edf8 0%, #818cf8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 20px; } .hero p { font-size: 1.1rem; color: var(--text2); max-width: 600px; margin: 0 auto 36px; } .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .pricing-section { padding: 80px 5vw; } .pricing-section h2 { text-align: center; margin-bottom: 8px; } .pricing-section > p { text-align: center; color: var(--text2); margin-bottom: 48px; } .pricing-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 40px; max-width: 400px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; } .pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--purple)); } .pricing-price { font-family: 'Syne', sans-serif; font-size: 3.5rem; font-weight: 800; color: var(--text); line-height: 1; margin: 20px 0 4px; } .pricing-price sup { font-size: 1.5rem; vertical-align: top; margin-top: 10px; } .pricing-price sub { font-size: 1rem; color: var(--text2); font-weight: 400; } .pricing-trial { color: var(--green); font-size: 0.9rem; font-weight: 600; margin-bottom: 28px; } .pricing-features { text-align: left; margin: 24px 0 32px; } .pricing-feature { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 0.9rem; color: var(--text2); border-bottom: 1px solid var(--border); } .pricing-feature:last-child { border-bottom: none; } .pricing-feature .check { color: var(--green); font-size: 1rem; } /* — Auth Pages ——————————————————————————————————————————————*/ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg); } .auth-box { width: 100%; max-width: 440px; } .auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; } .auth-logo .logo-icon { width: 36px; height: 36px; background: var(--accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px var(--accent-glow); } .auth-logo span { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem; } .auth-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 36px; } .auth-card h2 { margin-bottom: 6px; } .auth-card > p { margin-bottom: 28px; font-size: 0.9rem; } .auth-footer { text-align: center; margin-top: 20px; font-size: 0.875rem; color: var(--text3); } /* — Stats / Counters ————————————————————————————————————————*/ .stats-row { display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; flex: 1; min-width: 140px; } .stat-value { font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 4px; } .stat-label { font-size: 0.78rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; } /* — Scrollbar ————————————————————————————————————————————————*/ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text3); } /* — Animations ——————————————————————————————————————————————*/ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.3s ease forwards; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } .pulse { animation: pulse 2s infinite; } /* — Responsive ——————————————————————————————————————————————*/ @media (max-width: 768px) { .app-layout { grid-template-columns: 1fr; } .sidebar { display: none; } .form-row { grid-template-columns: 1fr; } .page-content { padding: 20px; } } /* — Utilities ————————————————————————————————————————————————*/ .flex { display: flex; } .flex-center { display: flex; align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; } .text-muted { color: var(--text3); } .text-sm { font-size: 0.85rem; } .text-right { text-align: right; } .w-full { width: 100%; } .hidden { display: none !important; } .photo-preview { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 1.5rem; overflow: hidden; } .photo-preview img { width: 100%; height: 100%; object-fit: cover; } /* LinkedIn fetch button */ .linkedin-fetch { margin-top: 6px; }