/* ===================================================================== Lead Finder — design system Direction comes from ; never hard-code rtl/ltr for layout. Theme comes from (light|dark) or the OS preference. ===================================================================== */ :root { --font-latin: "Inter", "Segoe UI", system-ui, sans-serif; --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; /* ---- GitLab palette ---- */ --gl-orange: #FC6D26; --gl-orange-dark: #E24329; --gl-orange-light: #FCA326; --gl-purple: #6E49CB; --gl-purple-dark: #380D75; --gl-ink: #171321; --gl-green: #108548; --gl-red: #DD2B0E; --gl-blue: #1F75CB; /* Page shell (light theme). "on-dark" tokens name the text used directly on the page background; in the light theme that background is light, so they resolve to dark text. */ --bg: #F0F0F5; --bg-deep: #E4E4EA; --text-on-dark: #3A383F; --muted-on-dark: #737278; --border-on-dark: #DCDCDE; --glow-1: rgba(110,73,203,.10); --glow-2: rgba(252,109,38,.08); --topbar-bg: rgba(240,240,245,.85); /* Floating light surfaces (GitLab gray scale) */ --bg-elev: #FFFFFF; --bg-subtle: #FBFAFD; --bg-hover: #F0F0F5; --border: #DCDCDE; --border-strong: #BFBFC3; --text: #3A383F; --text-2: #535158; --muted: #737278; --faint: #C4C3C8; /* Primary — GitLab orange */ --primary: var(--gl-orange); --primary-hover: var(--gl-orange-dark); --primary-soft: #FDEEE5; --primary-text: #B0400E; --on-primary: #ffffff; --grad-brand: linear-gradient(135deg, #E24329 0%, #FC6D26 55%, #FCA326 100%); /* Buttons use the dark half of the orange range so white text meets AA. */ --grad-button: linear-gradient(135deg, #C93A20 0%, #E24329 100%); --grad-hero: linear-gradient(120deg, #380D75 0%, #6E49CB 45%, #FC6D26 100%); --grad-amber: linear-gradient(135deg, #FCA326, #FC6D26); --grad-teal: linear-gradient(135deg, #2DA160, #108548); --grad-purple: linear-gradient(135deg, #6E49CB, #380D75); --grad-pink: var(--grad-purple); --grad-cyan: linear-gradient(135deg, #428FDC, #1F75CB); --grad-green: var(--grad-teal); /* Tertiary — GitLab green (secondary actions, success) */ --teal: var(--gl-green); --teal-soft: #ECF4EE; --teal-text: #0D532A; --success: var(--gl-green); --success-soft: var(--teal-soft); --success-text: var(--teal-text); /* Secondary pop — GitLab light orange / yellow (sparingly) */ --amber: var(--gl-orange-light); --amber-soft: #FDF1DD; --amber-text: #8F4700; --warn: var(--gl-orange-light); --warn-soft: var(--amber-soft); --warn-text: var(--amber-text); --danger: var(--gl-red); --danger-soft: #FCF1EF; --danger-text: #A02300; --info-soft: #E9F3FC; --info-text: #0B5CAD; /* Sidebar (light): white panel, GitLab-style */ --sidebar-bg: #FFFFFF; --sidebar-text: #535158; --sidebar-text-strong: #3A383F; --sidebar-section: #89888D; --sidebar-hover: #F0F0F5; --sidebar-active: linear-gradient(90deg, rgba(226,67,41,.95), rgba(252,109,38,.85)); --sidebar-border: #DCDCDE; --sidebar-edge: #DCDCDE; --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 2px 6px rgba(15,12,23,.25); --shadow: 0 10px 30px rgba(15,12,23,.35); --shadow-lg: 0 20px 50px rgba(15,12,23,.5); --shadow-brand: 0 8px 24px rgba(252,109,38,.40); --shadow-amber: 0 8px 24px rgba(252,163,38,.40); --shadow-teal: 0 8px 24px rgba(16,133,72,.35); --sidebar-w: 256px; --topbar-h: 64px; } /* Dark theme: the whole page — shell, sidebar and surfaces. Applied for an explicit choice, or for the OS preference when nothing is chosen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #171321; --bg-deep: #0F0C17; --text-on-dark: #FBFAFD; --muted-on-dark: #BFB8CF; --border-on-dark: rgba(251,250,253,.10); --glow-1: rgba(110,73,203,.35); --glow-2: rgba(252,109,38,.14); --topbar-bg: rgba(23,19,33,.78); --sidebar-bg: linear-gradient(180deg, #2E1A5C 0%, #221542 55%, #171321 100%); --sidebar-text: #BFB8CF; --sidebar-text-strong: #FBFAFD; --sidebar-section: #8C86A3; --sidebar-hover: rgba(251,250,253,.07); --sidebar-border: rgba(251,250,253,.10); --sidebar-edge: transparent; --bg-elev: #1F1E24; --bg-subtle: #2B2A33; --bg-hover: #333238; --border: #3A383F; --border-strong: #535158; --text: #ECECEF; --text-2: #CBCBD2; --muted: #A4A3A8; --faint: #626168; --primary-soft: rgba(252,109,38,.18); --primary-text: #FFA980; --teal-soft: rgba(16,133,72,.22); --teal-text: #91D4A8; --success-soft: var(--teal-soft); --success-text: var(--teal-text); --amber-soft: rgba(252,163,38,.18); --amber-text: #FFD08A; --warn-soft: var(--amber-soft); --warn-text: var(--amber-text); --danger-soft: rgba(221,43,14,.2); --danger-text: #FF9A8A; --info-soft: rgba(31,117,203,.2); --info-text: #9DC7F1; --shadow-sm: 0 2px 6px rgba(0,0,0,.4); --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); } } :root[data-theme="dark"] { --bg: #171321; --bg-deep: #0F0C17; --text-on-dark: #FBFAFD; --muted-on-dark: #BFB8CF; --border-on-dark: rgba(251,250,253,.10); --glow-1: rgba(110,73,203,.35); --glow-2: rgba(252,109,38,.14); --topbar-bg: rgba(23,19,33,.78); --sidebar-bg: linear-gradient(180deg, #2E1A5C 0%, #221542 55%, #171321 100%); --sidebar-text: #BFB8CF; --sidebar-text-strong: #FBFAFD; --sidebar-section: #8C86A3; --sidebar-hover: rgba(251,250,253,.07); --sidebar-border: rgba(251,250,253,.10); --sidebar-edge: transparent; --bg-elev: #1F1E24; --bg-subtle: #2B2A33; --bg-hover: #333238; --border: #3A383F; --border-strong: #535158; --text: #ECECEF; --text-2: #CBCBD2; --muted: #A4A3A8; --faint: #626168; --primary-soft: rgba(252,109,38,.18); --primary-text: #FFA980; --teal-soft: rgba(16,133,72,.22); --teal-text: #91D4A8; --success-soft: var(--teal-soft); --success-text: var(--teal-text); --amber-soft: rgba(252,163,38,.18); --amber-text: #FFD08A; --warn-soft: var(--amber-soft); --warn-text: var(--amber-text); --danger-soft: rgba(221,43,14,.2); --danger-text: #FF9A8A; --info-soft: rgba(31,117,203,.2); --info-text: #9DC7F1; --shadow-sm: 0 2px 6px rgba(0,0,0,.4); --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); } /* Theme-conditional visibility (used by the toggle button) */ .only-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-dark { display: inline-flex; } :root:not([data-theme="light"]) .only-light { display: none; } } :root[data-theme="dark"] .only-dark { display: inline-flex; } :root[data-theme="dark"] .only-light { display: none; } /* ---------- Reset ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-latin); font-size: 14px; line-height: 1.5; background: var(--bg); background-image: radial-gradient(1000px 600px at 100% -10%, var(--glow-1), transparent 60%), radial-gradient(700px 500px at -10% 110%, var(--glow-2), transparent 60%); background-attachment: fixed; color: var(--text-on-dark); } [dir="rtl"] body { font-family: var(--font-arabic); } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; } p { margin: 0; } a { color: var(--primary-text); } .card a, .table-wrap a, .menu-panel a, .toast a { color: var(--primary-text); } .ico { flex-shrink: 0; } /* ---------- App shell ---------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text); border-inline-end: 1px solid var(--sidebar-edge); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 20px 14px; gap: 8px; } .brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; text-decoration: none; color: var(--sidebar-text-strong); } .brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--grad-brand); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--shadow-brand); outline: 2px solid rgba(252,163,38,.6); outline-offset: 2px; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-name { font-weight: 700; font-size: 16px; } .brand-tag { font-size: 11px; color: var(--sidebar-text); } .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-section); padding: 14px 12px 6px; font-weight: 600; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--sidebar-text); text-decoration: none; font-weight: 500; position: relative; transition: background .15s, color .15s; } .nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); } .nav-link:hover .ico { color: var(--amber); } .nav-link.active { background: var(--sidebar-active); color: #fff; box-shadow: var(--shadow-brand); } .nav-link.active::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--amber); } .nav-count { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .nav-link.active .nav-count { background: #FBFAFD; color: var(--gl-orange-dark); } .nav-dot { margin-inline-start: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,.3); } .sidebar-footer { border-top: 1px solid var(--sidebar-border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; } .sidebar-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lang-switch { display: inline-flex; background: var(--sidebar-hover); border-radius: 8px; padding: 3px; gap: 2px; } .lang-option { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; text-decoration: none; color: var(--sidebar-text); } .lang-option:hover { color: var(--sidebar-text-strong); } .lang-option.active { background: var(--gl-orange-dark); color: #fff; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; transition: background .15s; } .sidebar .icon-btn { background: var(--sidebar-hover); color: var(--sidebar-text); } .sidebar .icon-btn:hover { background: var(--bg-hover); color: var(--sidebar-text-strong); } .profile-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--sidebar-text-strong); transition: background .15s; } .profile-chip:hover { background: var(--sidebar-hover); } button.profile-chip { width: 100%; border: none; background: transparent; font: inherit; cursor: pointer; text-align: start; } button.profile-chip .ico-chevron { margin-inline-start: auto; color: var(--sidebar-text); flex-shrink: 0; transform: rotate(180deg); } .user-menu { position: relative; } .user-menu-panel { top: auto; bottom: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0; min-width: 0; } .user-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .google-off { opacity: .6; cursor: not-allowed; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-purple); color: #FFFFFF; font-weight: 700; box-shadow: 0 4px 12px rgba(110,73,203,.45); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; } .avatar.lg { width: 72px; height: 72px; font-size: 24px; } .profile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .profile-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-sub { font-size: 11px; color: var(--sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; min-height: var(--topbar-h); background: var(--topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-on-dark); display: flex; align-items: center; gap: 16px; padding: 12px 28px; } .menu-btn { display: none; color: var(--text-on-dark); border-color: var(--border-on-dark); } .page-head { flex: 1; min-width: 0; } .page-title { font-size: 20px; color: var(--text-on-dark); letter-spacing: -.02em; } .page-subtitle { color: var(--muted-on-dark); font-size: 13px; margin-top: 2px; } .page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .content { padding: 24px 28px 64px; width: 100%; } /* ---------- Banner ---------- */ .banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-weight: 500; } .banner span { flex: 1; } .banner-warn { background: var(--amber-soft); color: var(--amber-text); border: 1px solid rgba(252,163,38,.35); box-shadow: var(--shadow-sm); } .banner-warn .ico { color: var(--amber); } .banner-warn .btn { background: var(--grad-amber); color: #3A383F; box-shadow: var(--shadow-amber); } /* ---------- Cards ---------- */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; color: var(--text); box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s; } .card:hover { box-shadow: var(--shadow-lg); } .project-card:hover { transform: translateY(-2px); } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .card-head h2, .card h2 { font-size: 16px; } .card-head .hint, .card p.hint { margin-top: 3px; } .card.flush { padding: 0; overflow: hidden; } .card.flush .card-head { padding: 18px 20px 0; margin-bottom: 14px; } .hint { color: var(--muted); font-size: 13px; } .content > .hint, .content > p.hint { color: var(--muted-on-dark); } .divider { height: 1px; background: var(--border); margin: 20px 0; } .content > .divider { background: var(--border-on-dark); } /* ---------- Forms ---------- */ label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text-2); } input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: var(--bg-elev); color: var(--text); transition: border-color .15s, box-shadow .15s; } input::placeholder { color: var(--faint); } /* Masks secrets without using type=password (which browsers autofill with saved logins). */ input.masked { -webkit-text-security: disc; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(252,109,38,.28); } select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; padding-inline-end: 34px; } [dir="rtl"] select { background-position: left 10px center; } .field { margin-bottom: 16px; } .row { display: flex; gap: 16px; flex-wrap: wrap; } .row > .field { flex: 1; min-width: 200px; } .input-group { display: flex; gap: 8px; } .input-group input { flex: 1; } .form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .checkbox-field { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .checkbox-field input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } .checkbox-field label { margin: 0; font-weight: 500; color: var(--text); cursor: pointer; } /* Toggle switch */ .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 14px; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .track { width: 40px; height: 22px; background: var(--border-strong); border-radius: 999px; position: relative; transition: background .2s; flex-shrink: 0; } .switch .track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .switch input:checked + .track { background: var(--primary); } .switch input:checked + .track::after { transform: translateX(18px); } [dir="rtl"] .switch input:checked + .track::after { transform: translateX(-18px); } .switch .switch-label { font-weight: 500; } /* Segmented control (theme picker) */ .segmented { display: inline-flex; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; } .segmented label { margin: 0; cursor: pointer; } .segmented input { position: absolute; opacity: 0; pointer-events: none; } .segmented .seg { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; } .segmented input:checked + .seg { background: var(--grad-button); color: #fff; box-shadow: var(--shadow-brand); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--grad-brand); background-size: 150% 150%; color: var(--on-primary); border: 1px solid transparent; padding: 9px 16px; box-shadow: 0 4px 14px rgba(252,109,38,.35); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2; transition: background .15s, border-color .15s, transform .05s; } .btn:hover { background-position: 100% 50%; box-shadow: var(--shadow-brand); filter: saturate(1.1); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn.is-loading { opacity: .7; cursor: progress; } .btn.secondary { background: var(--teal-soft); color: var(--teal-text); border-color: rgba(16,133,72,.35); box-shadow: none; } .btn.secondary:hover { background: var(--grad-teal); color: #fff; border-color: transparent; box-shadow: var(--shadow-teal); filter: none; } .btn.ghost { background: transparent; color: var(--text-2); box-shadow: none; } .page-actions .btn.ghost { color: var(--muted-on-dark); } .btn.ghost:hover { background: var(--bg-hover); color: var(--text); box-shadow: none; filter: none; } .btn.green { background: var(--grad-teal); color: #fff; box-shadow: 0 4px 14px rgba(16,133,72,.3); } .btn.green:hover { box-shadow: var(--shadow-teal); } .btn.danger { background: transparent; color: var(--danger); border-color: transparent; box-shadow: none; } .btn.danger:hover { background: var(--danger-soft); box-shadow: none; filter: none; } .btn.small { padding: 6px 12px; font-size: 13px; } .btn.icon-only { padding: 6px; width: 32px; height: 32px; } .btn.block { width: 100%; } /* ---------- Badges & status ---------- */ .badge, .badge-status, .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .status-badge { padding: 6px 14px; font-size: 13px; } .badge-done, .status-valid { background: var(--success-soft); color: var(--success-text); } .badge-running .ico, .badge-running.badge-dot::before { animation: pulse 1.2s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .badge-running, .status-checking { background: var(--amber-soft); color: var(--amber-text); } .badge-error, .status-invalid { background: var(--danger-soft); color: var(--danger-text); } .badge-pending { background: var(--bg-subtle); color: var(--text-2); } .status-missing { background: var(--warn-soft); color: var(--warn-text); } .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ---------- Toasts ---------- */ .toasts { position: fixed; bottom: 20px; inset-inline-end: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 100; max-width: min(420px, calc(100vw - 40px)); } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-lg); font-weight: 500; animation: toast-in .25s ease; border-inline-start: 4px solid var(--primary); } .toast span { flex: 1; } .toast-success { border-inline-start-color: var(--teal); } .toast-success .ico { color: var(--teal-text); } .toast-error { border-inline-start-color: var(--danger); } .toast-error .ico { color: var(--danger); } .toast-info .ico { color: var(--primary); } .toast-close { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: inline-flex; font-size: 16px; } .toast.hide { opacity: 0; transform: translateY(8px); transition: all .25s; } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Inline flash (still used for in-form errors) */ .flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 10px; font-weight: 500; } .flash-success { background: var(--success-soft); color: var(--success-text); } .flash-error { background: var(--danger-soft); color: var(--danger-text); } .flash-info { background: var(--info-soft); color: var(--info-text); } /* ---------- Progress ---------- */ .progress-wrap { display: none; margin-top: 20px; } .progress-wrap.active { display: block; } .progress-bar-bg { background: var(--bg-subtle); border-radius: 999px; height: 10px; overflow: hidden; } .progress-bar-fill { background: linear-gradient(90deg, #E24329, #FC6D26 70%, #FCA326); height: 100%; width: 0%; transition: width .4s ease; border-radius: 999px; } .progress-text { margin-top: 8px; font-size: 13px; color: var(--muted); } /* ---------- KPI / stats ---------- */ .stats-row, .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 20px; } .stat-box, .kpi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; color: var(--text); box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px; } .kpi-icon { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--grad-brand); color: #fff; flex-shrink: 0; box-shadow: 0 6px 14px rgba(252,109,38,.3); } .kpi-icon.green { background: var(--grad-teal); color: #fff; box-shadow: 0 6px 14px rgba(16,133,72,.3); } .kpi-icon.cyan { background: var(--grad-cyan); color: #fff; box-shadow: 0 6px 14px rgba(31,117,203,.3); } .kpi-icon.amber { background: var(--grad-amber); color: #3A383F; box-shadow: 0 6px 14px rgba(252,163,38,.35); } .kpi-icon.violet { background: var(--grad-purple); color: #fff; box-shadow: 0 6px 14px rgba(110,73,203,.4); } .kpi, .stat-box { position: relative; overflow: hidden; } .kpi::after, .stat-box::after { content: ""; position: absolute; inset-inline-end: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--grad-brand); opacity: .07; pointer-events: none; } /* Clickable tiles: dashboard KPIs link to their detail page, results tiles filter the table. */ a.kpi, button.stat-box { text-decoration: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; } a.kpi:hover, button.stat-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary); } a.kpi:focus-visible, button.stat-box:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(252,109,38,.4), var(--shadow); } .kpi-arrow { margin-inline-start: auto; color: var(--faint); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s, color .15s; } [dir="rtl"] .kpi-arrow { transform: translateX(4px) scaleX(-1); } a.kpi:hover .kpi-arrow { opacity: 1; transform: none; color: var(--primary); } [dir="rtl"] a.kpi:hover .kpi-arrow { transform: scaleX(-1); } .stat-filter.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(252,109,38,.4), var(--shadow); } .stat-filter.active::after { opacity: .18; } .stat-box .num, .kpi .num { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .stat-box .label, .kpi .label { font-size: 12px; color: var(--muted); margin-top: 3px; } /* ---------- Tables ---------- */ .table-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; color: var(--text); box-shadow: var(--shadow); } table { width: 100%; border-collapse: collapse; font-size: 13px; } #results-table { table-layout: fixed; } th, td { padding: 11px 14px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; overflow-wrap: anywhere; } th { background: var(--bg-subtle); color: var(--text-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; white-space: nowrap; z-index: 1; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--bg-subtle); } td a { color: var(--primary); text-decoration: none; } td a:hover { text-decoration: underline; } .no-value { color: var(--faint); } td.ltr { direction: ltr; unicode-bidi: isolate; text-align: left; } [dir="rtl"] td.ltr { text-align: right; } .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; unicode-bidi: plaintext; } .cell-strong { font-weight: 600; color: var(--text); } .cell-muted { color: var(--muted); font-size: 12px; } col.col-check { width: 42px; } col.col-name { width: 17%; } col.col-mobile { width: 14%; } col.col-phone { width: 11%; } col.col-email { width: 15%; } col.col-address { width: 19%; } col.col-site { width: 48px; } .check-cell { text-align: center; padding-inline: 6px; } .check-cell input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Copyable cell: value + copy button revealed on hover */ .copyable { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; flex-wrap: wrap; } .copyable a { white-space: nowrap; } .copyable a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; } .copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; } tr:hover .copy-btn { opacity: 1; } .copy-btn:hover { background: var(--bg-hover); color: var(--text); } .copy-btn.done { color: var(--teal-text); opacity: 1; } /* ---------- Sidebar collapse + sortable headers ---------- */ .collapse-btn { color: var(--muted-on-dark); border-color: var(--border-on-dark); } .collapse-btn:hover { color: var(--text-on-dark); background: var(--sidebar-hover); } @media (min-width: 861px) { body.sidebar-collapsed .sidebar { display: none; } } @media (max-width: 860px) { .collapse-btn { display: none; } } col.col-contact { width: 17%; } .contact-cell { line-height: 1.4; } .contact-cell .copyable + .copyable { margin-top: 4px; } th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--primary-text); } th.sortable::after { content: " ↕"; opacity: .35; font-size: 11px; } th.sortable.asc::after { content: " ↑"; opacity: 1; } th.sortable.desc::after { content: " ↓"; opacity: 1; } /* ---------- Lead status, notes, rating ---------- */ col.col-rating { width: 8%; } col.col-status { width: 13%; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-subtle); color: var(--text-2); border: 1px solid var(--border); text-decoration: none; transition: background .15s, border-color .15s; } .chip b { font-weight: 700; opacity: .7; } .chip:hover { border-color: var(--primary); text-decoration: none; } .chip.active { background: var(--gl-orange-dark); color: #fff; border-color: var(--gl-orange-dark); } .chip-interested.active { background: var(--teal); color: #fff; border-color: var(--teal); } .chip-not_interested.active { background: var(--danger); border-color: var(--danger); } .chip-contacted.active { background: var(--amber); color: #3A383F; border-color: var(--amber); } .status-select { padding: 5px 26px 5px 9px; font-size: 12px; font-weight: 600; border-radius: 999px; width: 100%; max-width: 100%; text-overflow: ellipsis; background-position: right 8px center; } [dir="rtl"] .status-select { padding: 5px 9px 5px 28px; background-position: left 8px center; } .status-select.status-new { background-color: var(--bg-subtle); color: var(--text-2); } .status-select.status-contacted { background-color: var(--amber-soft); color: var(--amber-text); border-color: transparent; } .status-select.status-interested { background-color: var(--teal-soft); color: var(--teal-text); border-color: transparent; } .status-select.status-not_interested { background-color: var(--danger-soft); color: var(--danger-text); border-color: transparent; } .notes-toggle.has-notes { color: var(--primary); background: var(--primary-soft); } .notes-row td { background: var(--bg-subtle); padding-top: 6px; padding-bottom: 12px; } .notes-editor { display: flex; flex-direction: column; gap: 8px; } .notes-editor textarea { font-size: 13px; min-height: 52px; } .notes-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .notes-actions input[type="date"] { width: auto; padding: 6px 10px; font-size: 13px; } .rating { white-space: nowrap; font-weight: 600; } .rating .star { color: var(--amber); } .pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .pager .hint { color: var(--muted-on-dark); } .pager-btns { display: flex; gap: 8px; } /* ---------- System tab ---------- */ .usage-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding-top: 6px; } .usage-bars .ub { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .usage-bars .ub span { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--grad-brand); } .usage-bars .ub small { font-size: 10px; color: var(--muted); } .shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .shortcuts > div { display: flex; align-items: center; gap: 10px; font-size: 13px; } kbd { display: inline-block; min-width: 24px; text-align: center; padding: 2px 7px; border-radius: 6px; font: 600 12px var(--font-latin); background: var(--bg-subtle); border: 1px solid var(--border-strong); box-shadow: inset 0 -2px 0 var(--border-strong); color: var(--text); } input[type="file"] { flex: 1; padding: 7px; font-size: 13px; color: var(--text-2); } /* ---------- Credits ---------- */ .nav-count.low { background: var(--amber); color: #3A383F; } .rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .rule { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-subtle); border: 1px solid var(--border); font-size: 13px; color: var(--text-2); } .rule b { min-width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--grad-button); color: #fff; font-size: 15px; flex-shrink: 0; } .landing-rules { max-width: 900px; margin: 0 auto 28px; } .landing-rules .rule { background: var(--bg-elev); border-color: var(--border-on-dark); color: var(--text-on-dark); } .price-grid.packs { grid-template-columns: repeat(4, 1fr); max-width: none; } .price-grid.packs .amount { font-size: 34px; } .estimate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; background: var(--primary-soft); color: var(--primary-text); font-weight: 600; font-size: 13px; } .estimate.insufficient { background: var(--danger-soft); color: var(--danger-text); } .estimate span { flex: 1; } .bulk-actions { display: inline-flex; align-items: center; gap: 6px; } .city-chips .chip { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; } .bank div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .bank div:last-child { border-bottom: none; } @media (max-width: 1024px) { .price-grid.packs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .price-grid.packs { grid-template-columns: 1fr; } } /* ---------- Quota / billing ---------- */ .quota-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .hero-quota { flex: 1; min-width: 220px; max-width: 360px; color: #fff; } .hero-quota small { display: block; margin-top: 6px; color: rgba(255,255,255,.8); } .compare td { padding: 6px 8px; } .compare td:not(:first-child) { text-align: center; font-weight: 600; } img.avatar { object-fit: cover; } /* ---------- Onboarding ---------- */ .wizard { max-width: 640px; margin: 0 auto; } .wizard-steps { list-style: none; padding: 0; margin: 0 0 20px; display: flex; gap: 8px; } .wizard-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg-elev); color: var(--muted-on-dark); font-size: 13px; font-weight: 600; border: 1px solid var(--border-on-dark); } .wizard-steps li .n { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-subtle); font-size: 12px; } .wizard-steps li.active { background: var(--primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); } .wizard-steps li.active .n { background: rgba(255,255,255,.25); } .wizard-steps li.done { color: var(--text-on-dark); } .wizard-steps li.done .n { background: var(--teal); color: #fff; } .wizard-card { padding: 28px; } /* WhatsApp quick-connect (brand green kept on purpose so it's instantly recognisable) */ .wa-btn { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: #DCFCE7; color: #128C4A !important; text-decoration: none !important; white-space: nowrap; transition: background .12s; } .wa-btn:hover { background: #25D366; color: #062E2A !important; } :root[data-theme="dark"] .wa-btn { background: rgba(37,211,102,.18); color: #6EE7A0 !important; } textarea { resize: vertical; min-height: 72px; line-height: 1.5; } .mini-table { font-size: 13px; } .mini-table th, .mini-table td { padding: 8px 12px; } .mini-table th { position: static; } /* ---------- Toolbar / export ---------- */ .toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; } .toolbar-left { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .toolbar-right { display: flex; gap: 8px; flex-wrap: wrap; } .export-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 20px; } .export-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .search-input { position: relative; max-width: 360px; width: 100%; } .search-input .ico { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 11px; color: var(--muted); pointer-events: none; } .search-input input { padding-inline-start: 36px; } /* ---------- Empty state ---------- */ .empty-state { text-align: center; padding: 56px 20px; color: var(--muted); } .empty-state .icon { display: inline-flex; width: 56px; height: 56px; border-radius: 16px; background: var(--bg-subtle); align-items: center; justify-content: center; color: var(--muted); margin-bottom: 12px; } .empty-state .title { font-weight: 600; color: var(--text); margin-bottom: 4px; } /* ---------- Projects ---------- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; } .project-card { margin-bottom: 0; display: flex; flex-direction: column; } .project-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .project-title { font-size: 16px; display: flex; align-items: center; gap: 8px; min-width: 0; } .project-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; } .project-meta .m { display: flex; flex-direction: column; } .project-meta .m b { font-size: 18px; font-weight: 700; line-height: 1.1; } .project-meta .m small { font-size: 11px; color: var(--muted); } .project-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; } .history-actions { display: flex; gap: 6px; flex-wrap: wrap; } .schedule-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .schedule-status .hint { margin: 0; } .schedule-form { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); } .ltr-inline { direction: ltr; unicode-bidi: isolate; } .run-progress { margin-top: 14px; } .menu { position: relative; } .menu-panel { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; color: var(--text); box-shadow: var(--shadow-lg); min-width: 180px; padding: 6px; z-index: 30; } .menu-panel button, .menu-panel a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 6px; color: var(--text); font: inherit; text-align: start; cursor: pointer; text-decoration: none; } .menu-panel button:hover, .menu-panel a:hover { background: var(--bg-hover); } .menu-panel .danger { color: var(--danger); } .menu-panel .danger:hover { background: var(--danger-soft); } .inline-rename { display: flex; gap: 8px; margin-top: 12px; } /* ---------- Dashboard ---------- */ .dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; } .hero { background: var(--grad-hero); color: #fff; position: relative; overflow: hidden; border-radius: var(--radius); padding: 26px 28px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.12); border: 1px solid rgba(252,163,38,.35); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.12); } .hero::before { width: 260px; height: 260px; inset-inline-end: -80px; top: -120px; } .hero::after { width: 160px; height: 160px; inset-inline-start: 40%; bottom: -100px; } .hero > * { position: relative; } .hero h2 { font-size: 22px; color: #fff; } .hero p { color: rgba(255,255,255,.85); margin-top: 4px; } .hero .btn { background: #FFFFFF; color: var(--gl-orange-dark); box-shadow: 0 6px 18px rgba(0,0,0,.25); } .hero .btn:hover { filter: brightness(1.05); } .list { display: flex; flex-direction: column; } .list-item { color: var(--text); display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); text-decoration: none; color: inherit; transition: background .15s; } .list-item:hover { background: var(--bg-subtle); } .list-item .li-main { flex: 1; min-width: 0; } .list-item .li-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-item .li-sub { font-size: 12px; color: var(--muted); } .list-item .li-num { font-weight: 700; font-size: 15px; } /* ---------- Settings ---------- */ .settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; } /* Settings menu: a collapsible surface card, colored purely from theme tokens so it flips with light/dark like every other card. */ .settings-nav { position: sticky; top: calc(var(--topbar-h) + 24px); padding: 8px; margin: 0; display: flex; flex-direction: column; gap: 4px; } .settings-nav-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; text-align: start; } .settings-nav-head:hover { background: var(--bg-hover); } .settings-nav-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; } .settings-nav-current { margin-inline-start: auto; font-weight: 500; font-size: 12px; color: var(--muted); display: none; } .settings-nav-head .ico-chevron { transition: transform .2s; color: var(--muted); } .settings-nav.collapsed .settings-nav-head .ico-chevron { transform: rotate(-90deg); } [dir="rtl"] .settings-nav.collapsed .settings-nav-head .ico-chevron { transform: rotate(90deg); } .settings-nav.collapsed .settings-nav-current { display: inline; } .settings-nav-list { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; border-top: 1px solid var(--border); margin-top: 4px; max-height: 400px; overflow: hidden; transition: max-height .25s ease, opacity .2s ease, margin .2s, padding .2s; } .settings-nav.collapsed .settings-nav-list { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; border-top-color: transparent; } .settings-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-weight: 500; transition: background .15s, color .15s; } .settings-nav a:hover { background: var(--bg-hover); color: var(--text); } @media (prefers-reduced-motion: reduce) { .settings-nav-list, .settings-nav-head .ico-chevron { transition: none; } } .settings-nav a.active { background: var(--grad-button); color: #fff; box-shadow: var(--shadow-brand); } .settings-panel[hidden] { display: none; } .profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .steps li { display: flex; gap: 12px; align-items: flex-start; } .steps .n { width: 24px; height: 24px; border-radius: 50%; background: var(--grad-brand); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ---------- Accessibility & touch ---------- */ :focus-visible { outline: 2px solid var(--gl-orange); outline-offset: 2px; } .btn:focus-visible, .icon-btn:focus-visible { outline-offset: 3px; } /* Copy buttons are hover-revealed on desktop; touch devices have no hover. */ @media (hover: none) { .copy-btn { opacity: .8; } .btn, .icon-btn { min-height: 40px; } .btn.small { min-height: 36px; } .btn.icon-only { min-width: 36px; } .nav-link { padding: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .dash-grid { grid-template-columns: 1fr; } .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; } .settings-nav-list { flex-direction: row; flex-wrap: wrap; } } @media (max-width: 860px) { .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); } [dir="rtl"] .sidebar { transform: translateX(100%); } .sidebar.open { transform: none !important; } /* Dim the page behind the open drawer; tapping it closes the drawer (JS). */ .sidebar.open ~ .main::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; } .menu-btn { display: inline-flex; } .topbar { padding: 10px 16px; flex-wrap: wrap; row-gap: 8px; } .page-head { flex-basis: calc(100% - 60px); } .page-actions { flex-basis: 100%; justify-content: flex-start; } .page-actions:empty { display: none; } .content { padding: 16px 16px 48px; } .page-title { font-size: 17px; } .page-subtitle { display: none; } .project-grid { grid-template-columns: 1fr; } .hero { padding: 20px; } .hero h2 { font-size: 18px; } /* iOS zooms into inputs smaller than 16px */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea { font-size: 16px; } /* Toolbars stack instead of squeezing */ .export-bar, .toolbar { flex-direction: column; align-items: stretch; } .export-actions { justify-content: flex-start; } .search-input { max-width: none; } /* Data tables: keep full columns, scroll sideways, freeze the name column */ #results-table { table-layout: auto; min-width: 980px; } #results-table th:nth-child(2), #results-table td:nth-child(2) { position: sticky; inset-inline-start: 42px; z-index: 2; background: var(--bg-elev); box-shadow: 1px 0 0 var(--border); } [dir="rtl"] #results-table th:nth-child(2), [dir="rtl"] #results-table td:nth-child(2) { box-shadow: -1px 0 0 var(--border); } #results-table th:first-child, #results-table td:first-child { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--bg-elev); } #results-table thead th { z-index: 3; } tbody tr:hover td { background: var(--bg-elev); } #history-table, #schedule-table { min-width: 900px; } .mini-table { min-width: 640px; } .kpi-grid, .stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kpi, .stat-box { padding: 14px; gap: 10px; } .kpi .num, .stat-box .num { font-size: 20px; } .kpi-icon { width: 36px; height: 36px; } .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .chips .chip { white-space: nowrap; } .wizard-steps { flex-direction: column; } .toasts { inset-inline: 12px; bottom: 12px; max-width: none; } .pager { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .kpi-grid, .stats-row { grid-template-columns: 1fr 1fr; } .hero { flex-direction: column; align-items: stretch; } .hero .btn { justify-content: center; } .form-actions .btn { flex: 1; justify-content: center; } .price-grid.in-app { grid-template-columns: 1fr; } }