/* ========================================================================== Web Scraper Studio - stylesheet ========================================================================== */ :root { /* Light theme (default). Swap in the dark palette by setting ``data-theme="dark"`` on — every rule below reads from these CSS custom properties, so no other styles need to change. */ --bg-0: #f5f7fb; --bg-1: #eef1f8; --bg-2: #e5e9f2; --panel: rgba(255, 255, 255, 0.85); --panel-solid: #ffffff; --panel-border: rgba(90, 105, 140, 0.16); --panel-border-strong: rgba(90, 105, 140, 0.32); --text: #0f172a; --text-muted: #475569; --text-dim: #64748b; --accent: #6d4dfa; --accent-2: #06b6d4; --accent-3: #ec4899; --success: #10b981; --warning: #d97706; --danger: #dc2626; --header-grad-a: #6d4dfa; --header-grad-b: #06b6d4; --hero-title-grad-a: #0f172a; --hero-title-grad-b: #4c1d95; --hero-title-grad-c: #0369a1; --table-head-grad-a: #eef1f8; --table-head-grad-b: #dee5f2; --drawer-grad-a: #ffffff; --drawer-grad-b: #f5f7fb; /* Theme-aware "translucent overlay" tokens. Everywhere the dark theme tinted with rgba(255,255,255,X) we tint with rgba(15,23,42,X/2-ish) so light surfaces subtly deepen instead of washing out. */ --tint-1: rgba(15, 23, 42, 0.035); --tint-2: rgba(15, 23, 42, 0.07); --tint-3: rgba(15, 23, 42, 0.12); --tint-strong: rgba(15, 23, 42, 0.22); --surface-inset: rgba(15, 23, 42, 0.04); --surface-inset-strong: rgba(15, 23, 42, 0.07); --shadow-strong: rgba(30, 41, 89, 0.18); --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --shadow-lg: 0 30px 80px -20px rgba(30, 41, 89, 0.18), 0 8px 30px -10px rgba(30, 41, 89, 0.12); --shadow-glow: 0 0 60px -10px rgba(109, 77, 250, 0.30); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Optional dark theme — set ```` to activate. */ [data-theme="dark"] { --bg-0: #06070d; --bg-1: #0b0f1c; --bg-2: #10152a; --panel: rgba(20, 26, 48, 0.72); --panel-solid: #141a30; --panel-border: rgba(140, 160, 220, 0.15); --panel-border-strong: rgba(140, 160, 220, 0.3); --text: #e7ecff; --text-muted: #9aa4c7; --text-dim: #6a7396; --accent: #7c5cff; --accent-2: #22d3ee; --accent-3: #f472b6; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --header-grad-a: #7c5cff; --header-grad-b: #22d3ee; --hero-title-grad-a: #ffffff; --hero-title-grad-b: #b6c1ff; --hero-title-grad-c: #a1e2ff; --table-head-grad-a: #1a2249; --table-head-grad-b: #131a34; --drawer-grad-a: #0f1428; --drawer-grad-b: #0a0e1e; --shadow-lg: 0 30px 80px -20px rgba(4, 6, 20, 0.8), 0 8px 30px -10px var(--surface-inset-strong); --shadow-glow: 0 0 60px -10px rgba(124, 92, 255, 0.55); --tint-1: var(--tint-1); --tint-2: var(--tint-2); --tint-3: rgba(255, 255, 255, 0.10); --tint-strong: var(--tint-strong); --surface-inset: var(--surface-inset); --surface-inset-strong: var(--surface-inset-strong); --shadow-strong: var(--shadow-strong); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; font-family: var(--font-sans); color: var(--text); background: radial-gradient(1200px 800px at 15% -10%, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 60%), radial-gradient(1000px 700px at 110% 10%, color-mix(in oklab, var(--accent-2) 22%, transparent) 0%, transparent 55%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%); background-attachment: fixed; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .hidden { display: none !important; } /* --- background orbs -------------------------------------------------- */ .bg-orbs { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); /* Softer on light so backgrounds don't feel muddy; the dark theme overrides bump it back up for the neon-glow effect. */ opacity: 0.28; animation: drift 22s ease-in-out infinite alternate; } [data-theme="dark"] .orb { opacity: 0.55; } .orb-a { width: 520px; height: 520px; left: -120px; top: 10%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); } .orb-b { width: 460px; height: 460px; right: -100px; top: 30%; background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%); animation-delay: -6s; } .orb-c { width: 380px; height: 380px; left: 40%; bottom: -160px; background: radial-gradient(circle, var(--accent-3) 0%, transparent 70%); animation-delay: -12s; } @keyframes drift { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(60px, -40px, 0); } } /* --- header ----------------------------------------------------------- */ .hero { position: relative; z-index: 1; padding: 32px 32px 24px; max-width: 1280px; margin: 0 auto; } .hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 16px; } .logo-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font-size: 28px; background: linear-gradient(135deg, var(--accent), var(--accent-2) 60%, var(--accent-3)); color: #ffffff; box-shadow: var(--shadow-glow); } .brand h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--hero-title-grad-a), var(--hero-title-grad-b) 60%, var(--hero-title-grad-c)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tagline { margin: 2px 0 0; color: var(--text-muted); font-size: 14px; } .hero-actions { display: flex; gap: 10px; } .ghost-btn { background: var(--panel-solid); border: 1px solid var(--panel-border); color: var(--text); padding: 10px 16px; border-radius: var(--radius-md); font-size: 14px; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.2s, border-color 0.2s; } .ghost-btn:hover { background: color-mix(in oklab, var(--accent) 8%, var(--panel-solid)); border-color: var(--panel-border-strong); transform: translateY(-1px); } /* --- input card ------------------------------------------------------- */ .scrape-card { margin-top: 32px; padding: 22px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow-lg); } .input-shell { display: flex; align-items: center; gap: 12px; background: var(--panel-solid); border: 1px solid var(--panel-border-strong); border-radius: var(--radius-md); padding: 6px 6px 6px 18px; transition: border-color 0.2s, box-shadow 0.2s; } .input-shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); } .input-icon { font-size: 18px; opacity: 0.8; } #urlInput { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 16px; padding: 14px 8px; min-width: 0; } #urlInput::placeholder { color: var(--text-dim); } #scrapeBtn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #7c5cff, #22d3ee); color: #fff; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(124, 92, 255, 0.7); transition: transform 0.15s, box-shadow 0.2s, filter 0.2s; } #scrapeBtn:hover { transform: translateY(-1px); filter: brightness(1.05); } #scrapeBtn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-arrow { transition: transform 0.2s; } #scrapeBtn:hover .btn-arrow { transform: translateX(3px); } .options-row { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--tint-1); border: 1px solid var(--panel-border); border-radius: 100px; cursor: pointer; user-select: none; transition: border-color 0.2s, background 0.2s; } .toggle:hover { border-color: var(--panel-border-strong); background: var(--tint-1); } .toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .toggle-slider { position: relative; display: inline-block; width: 36px; height: 20px; background: var(--tint-3); border-radius: 100px; transition: background 0.2s; flex-shrink: 0; } .toggle-slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; } .toggle input[type="checkbox"]:checked + .toggle-slider { background: linear-gradient(135deg, #7c5cff, #22d3ee); } .toggle input[type="checkbox"]:checked + .toggle-slider::before { transform: translateX(16px); } .toggle-label { color: var(--text); font-size: 13px; font-weight: 500; } .toggle-sub { color: var(--text-dim); font-weight: 400; font-size: 12px; } .toggle-disabled { opacity: 0.55; cursor: not-allowed; } .toggle-disabled .toggle-slider { background: rgba(248, 113, 113, 0.25); } .chip-render { border-color: rgba(124, 92, 255, 0.5) !important; color: var(--accent) !important; background: rgba(124, 92, 255, 0.1) !important; } .quick-samples { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .qs-label { color: var(--text-dim); font-size: 13px; margin-right: 4px; } .chip { background: var(--tint-1); border: 1px solid var(--panel-border); color: var(--text-muted); border-radius: 100px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; font-family: var(--font-mono); } .chip:hover { color: var(--text); background: rgba(124, 92, 255, 0.12); border-color: rgba(124, 92, 255, 0.5); } /* --- results ---------------------------------------------------------- */ .results { position: relative; z-index: 1; max-width: 1280px; margin: 8px auto 48px; padding: 0 32px; } /* Overview cards */ .overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 24px 0 20px; } .stat-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 16px 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.2s, border-color 0.2s; } .stat-card:hover { transform: translateY(-2px); border-color: var(--panel-border-strong); } .stat-card .stat-label { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .stat-card .stat-value { color: var(--text); font-size: 26px; font-weight: 700; margin-top: 4px; font-family: var(--font-mono); background: linear-gradient(135deg, #ffffff, #b6c1ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-card .stat-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; } .meta-hero { grid-column: 1 / -1; display: flex; gap: 18px; align-items: center; padding: 22px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); backdrop-filter: blur(14px); } .meta-hero .fav { width: 56px; height: 56px; border-radius: 12px; background: var(--tint-2); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; } .meta-hero .fav img { width: 100%; height: 100%; object-fit: contain; } .meta-hero h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.01em; } .meta-hero .meta-url { color: var(--accent-2); font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; } .meta-hero .meta-desc { color: var(--text-muted); margin-top: 6px; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .meta-hero .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; background: rgba(124, 92, 255, 0.15); color: var(--accent); border: 1px solid rgba(124, 92, 255, 0.35); font-size: 11.5px; font-family: var(--font-mono); } .badge.ok { background: rgba(52, 211, 153, 0.15); color: #7ff0c1; border-color: rgba(52, 211, 153, 0.35); } .badge.warn { background: rgba(251, 191, 36, 0.15); color: #ffde86; border-color: rgba(251, 191, 36, 0.35); } .badge.err { background: rgba(248, 113, 113, 0.15); color: #ffb3b3; border-color: rgba(248, 113, 113, 0.35); } /* Tabs */ .tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 12px; z-index: 5; } .tab { padding: 9px 14px; border-radius: 10px; color: var(--text-muted); background: transparent; border: 0; cursor: pointer; font-size: 13px; font-weight: 500; transition: color 0.15s, background 0.15s; display: inline-flex; align-items: center; gap: 8px; } .tab:hover { color: var(--text); background: var(--tint-1); } .tab.active { color: #fff; background: linear-gradient(135deg, rgba(124, 92, 255, 0.4), rgba(34, 211, 238, 0.3)); box-shadow: inset 0 0 0 1px var(--tint-2); } .tab .count { background: var(--tint-2); color: var(--text); font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 100px; } .tab.active .count { background: var(--tint-strong); } /* Panels */ .tab-panels { margin-top: 18px; } .panel { display: none; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); padding: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: fadeIn 0.25s ease; } .panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .panel-head h3 { margin: 0; font-size: 17px; } .panel-head .actions { display: flex; gap: 8px; flex-wrap: wrap; } .search-shell { display: flex; align-items: center; gap: 8px; background: var(--surface-inset); border: 1px solid var(--panel-border); border-radius: 10px; padding: 4px 10px; } .search-shell input { background: transparent; border: 0; outline: 0; color: var(--text); padding: 8px 4px; font-size: 13px; min-width: 220px; } .search-shell input::placeholder { color: var(--text-dim); } .mini-btn { background: var(--tint-1); border: 1px solid var(--panel-border); color: var(--text-muted); padding: 7px 12px; border-radius: 8px; font-size: 12.5px; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .mini-btn:hover { color: var(--text); background: var(--tint-2); border-color: var(--panel-border-strong); } .mini-btn.primary { background: linear-gradient(135deg, rgba(124, 92, 255, 0.7), rgba(34, 211, 238, 0.5)); color: #fff; border-color: transparent; } /* Tables */ .data-table-wrap { max-height: 620px; overflow: auto; border-radius: var(--radius-md); border: 1px solid var(--panel-border); } table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } table.data-table th, table.data-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--tint-1); vertical-align: top; max-width: 460px; overflow-wrap: anywhere; word-break: break-word; } table.data-table thead th { position: sticky; top: 0; background: var(--panel-solid); color: var(--text); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; z-index: 1; border-bottom: 1px solid var(--panel-border-strong); } table.data-table tbody tr:hover { background: rgba(124, 92, 255, 0.08); } table.data-table td.num, table.data-table th.num { text-align: right; font-family: var(--font-mono); color: var(--text-muted); width: 60px; } table.data-table a { color: var(--accent-2); text-decoration: none; } table.data-table a:hover { text-decoration: underline; } table.data-table code { font-family: var(--font-mono); font-size: 12px; color: #ffcf9e; background: var(--tint-1); padding: 1px 6px; border-radius: 6px; } /* Kind pills */ .pill { display: inline-flex; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-family: var(--font-mono); background: var(--tint-2); color: var(--text-muted); border: 1px solid var(--panel-border); text-transform: lowercase; } .pill.internal { color: #7ff0c1; border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.1); } .pill.external { color: #ffde86; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); } .pill.mail { color: var(--accent); border-color: rgba(124, 92, 255, 0.4); background: rgba(124, 92, 255, 0.1); } .pill.anchor, .pill.tel { color: var(--accent-2); border-color: rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.08); } /* Image grid */ .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .image-card { background: var(--surface-inset); border: 1px solid var(--panel-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; } .image-card:hover { transform: translateY(-2px); border-color: var(--panel-border-strong); } .image-card .thumb { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; background: linear-gradient(135deg, rgba(124, 92, 255, 0.1), rgba(34, 211, 238, 0.06)); overflow: hidden; } .image-card .thumb img { width: 100%; height: 100%; object-fit: contain; } .image-card .meta { padding: 10px 12px; font-size: 12px; color: var(--text-muted); } .image-card .alt { color: var(--text); font-weight: 500; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .image-card a.src { color: var(--accent-2); text-decoration: none; font-family: var(--font-mono); font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Metadata / structured data pretty view */ .kv-table { width: 100%; border-collapse: collapse; font-size: 13px; } .kv-table th, .kv-table td { padding: 8px 12px; border-bottom: 1px solid var(--tint-1); text-align: left; vertical-align: top; } .kv-table th { width: 220px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; } .kv-table td { color: var(--text); overflow-wrap: anywhere; } pre.code-block { background: var(--surface-inset); border: 1px solid var(--panel-border); border-radius: var(--radius-md); color: var(--text); padding: 14px 16px; overflow: auto; font-family: var(--font-mono); font-size: 12.5px; max-height: 500px; white-space: pre; } .subhead { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 22px 0 8px; } .empty { padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 14px; background: var(--tint-1); border-radius: var(--radius-md); border: 1px dashed var(--panel-border); } .empty strong { color: var(--text-muted); } /* Loader */ .loader { position: fixed; inset: 0; background: var(--surface-inset-strong); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 20; display: grid; place-items: center; } .loader-inner { text-align: center; } .scanner { width: 240px; height: 160px; margin: 0 auto 18px; position: relative; border-radius: 16px; background: var(--panel); border: 1px solid var(--panel-border-strong); overflow: hidden; box-shadow: var(--shadow-lg), var(--shadow-glow); } .scan-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(124, 92, 255, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.12) 1px, transparent 1px); background-size: 20px 20px; } .scan-beam { position: absolute; top: 0; left: -20%; width: 40%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(124, 92, 255, 0.35) 40%, rgba(34, 211, 238, 0.55) 50%, rgba(124, 92, 255, 0.35) 60%, transparent 100% ); filter: blur(6px); animation: sweep 1.6s ease-in-out infinite; } @keyframes sweep { 0% { left: -30%; } 100% { left: 100%; } } .loader-text { color: var(--text-muted); font-size: 14px; } /* Error banner */ .error-banner { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 25; background: linear-gradient(135deg, rgba(248, 113, 113, 0.2), var(--panel-solid)); border: 1px solid rgba(248, 113, 113, 0.4); border-radius: var(--radius-md); padding: 12px 16px; color: var(--danger); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; max-width: 720px; } .err-icon { font-size: 18px; } #errorClose { background: transparent; border: 0; color: var(--danger); cursor: pointer; font-size: 16px; } .site-footer { text-align: center; padding: 22px; color: var(--text-dim); font-size: 12.5px; position: relative; z-index: 1; } /* Responsive */ @media (max-width: 780px) { .hero { padding: 24px 18px 16px; } .brand h1 { font-size: 22px; } .results { padding: 0 18px; } #urlInput { font-size: 14px; } .kv-table th { width: 140px; } .meta-hero { flex-direction: column; align-items: flex-start; text-align: left; } } /* Inline diagnosis / warning notice */ .notice { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--panel-border-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-bottom: 0; } .notice-err { background: linear-gradient(135deg, rgba(248, 113, 113, 0.18), var(--panel-solid)); border-color: rgba(248, 113, 113, 0.4); } .notice-warn { background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), var(--panel-solid)); border-color: rgba(251, 191, 36, 0.4); } .notice-info { background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), var(--panel-solid)); border-color: rgba(34, 211, 238, 0.4); } .notice-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 18px; background: var(--tint-2); color: var(--text); } .notice-err .notice-icon { color: #ffb3b3; } .notice-warn .notice-icon { color: var(--warning); } .notice-info .notice-icon { color: var(--accent-2); } .notice-body { flex: 1; min-width: 0; } .notice-title { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 4px; } .notice-text { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; } .notice-sub { margin-top: 6px; font-size: 12.5px; color: var(--text-dim); } .notice-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .notice-attempts { margin: 10px 0 0; padding: 10px 14px 10px 32px; background: var(--tint-3); border-radius: var(--radius-sm); border: 1px solid var(--tint-2); color: var(--text-muted); font-size: 12.5px; line-height: 1.6; max-height: 200px; overflow-y: auto; } .notice-attempts code { color: var(--accent-2); font-family: var(--font-mono); font-size: 11.5px; background: rgba(34, 211, 238, 0.08); padding: 1px 6px; border-radius: 5px; } .attempt-time { color: var(--text-dim); font-family: var(--font-mono); font-size: 11.5px; } /* Hero export bar */ .hero-export { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-left: 18px; border-left: 1px solid var(--panel-border); flex-shrink: 0; } .he-label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .he-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } /* History drawer */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: linear-gradient(180deg, var(--drawer-grad-a) 0%, var(--drawer-grad-b) 100%); border-left: 1px solid var(--panel-border-strong); z-index: 30; box-shadow: -30px 0 80px -20px var(--shadow-strong); display: flex; flex-direction: column; animation: slideIn 0.25s ease; overflow: hidden; } .drawer.hidden { display: none; } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-scrim { position: fixed; inset: 0; background: var(--surface-inset-strong); backdrop-filter: blur(3px); z-index: 29; } .drawer-scrim.hidden { display: none; } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px; border-bottom: 1px solid var(--panel-border); gap: 12px; } .drawer-header h2 { margin: 0 0 4px; font-size: 20px; } .drawer-sub { color: var(--text-muted); font-size: 12.5px; } .drawer-actions { display: flex; gap: 6px; flex-shrink: 0; } .history-list { flex: 1; overflow-y: auto; padding: 8px 20px 20px; } .history-item { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: var(--tint-1); margin-bottom: 10px; transition: border-color 0.2s, transform 0.2s; } .history-item:hover { border-color: var(--panel-border-strong); transform: translateY(-1px); } .hi-main { flex: 1; min-width: 0; cursor: pointer; } .hi-title { color: var(--text); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hi-url { color: var(--accent-2); font-family: var(--font-mono); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hi-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-dim); font-size: 11.5px; margin-top: 6px; font-family: var(--font-mono); } .hi-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } @media (max-width: 780px) { .hero-export { border-left: 0; border-top: 1px solid var(--panel-border); padding-left: 0; padding-top: 12px; align-items: stretch; width: 100%; } .he-buttons { justify-content: stretch; } .he-buttons .mini-btn { flex: 1; } .meta-hero { flex-direction: column; } } /* Custom scrollbar */ * { scrollbar-width: thin; scrollbar-color: rgba(124, 92, 255, 0.4) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: rgba(124, 92, 255, 0.35); border-radius: 100px; } *::-webkit-scrollbar-thumb:hover { background: rgba(124, 92, 255, 0.55); } /* --- mode switch (Website / Google) ---------------------------------- */ .mode-switch { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-inset); border: 1px solid var(--panel-border); border-radius: 100px; margin-bottom: 14px; } .mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; background: transparent; color: var(--text-muted); border-radius: 100px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: color 0.2s, background 0.2s; font-family: inherit; } .mode-btn:hover { color: var(--text); } .mode-btn.active { color: #fff; background: linear-gradient(135deg, var(--accent) 0%, #5b3fd6 100%); box-shadow: 0 4px 18px -4px rgba(124, 92, 255, 0.5); } .mode-icon { font-size: 14px; } /* --- google-specific options row bits -------------------------------- */ .google-opts, .gmaps-opts { display: inline-flex; gap: 10px; align-items: center; margin-left: auto; flex-wrap: wrap; } .mini-select { display: inline-flex; align-items: center; gap: 6px; background: var(--tint-1); border: 1px solid var(--panel-border); border-radius: 10px; padding: 4px 10px; font-size: 12px; color: var(--text-muted); } .mini-select span { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; } .mini-select input, .mini-select select { background: transparent; border: none; color: var(--text); font-size: 13px; font-family: inherit; outline: none; padding: 2px 0; } .mini-select input { width: 44px; text-align: center; } .mini-select select { cursor: pointer; } .mini-select select option { background: var(--panel-solid); color: var(--text); } /* --- google SERP header --------------------------------------------- */ .google-header { display: flex; gap: 24px; align-items: flex-start; padding: 24px 26px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); margin: 24px 0 18px; flex-wrap: wrap; } .google-eyebrow { color: var(--accent-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 8px; } .google-query { margin: 0 0 10px; font-size: 26px; font-weight: 700; display: flex; align-items: center; gap: 10px; line-height: 1.25; word-break: break-word; } .google-q-icon { font-size: 22px; opacity: 0.85; } .hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .download-title { color: var(--text-dim); font-size: 10.5px; letter-spacing: 0.12em; font-weight: 600; } .download-row { display: flex; gap: 6px; flex-wrap: wrap; } .dl-btn { background: linear-gradient(135deg, var(--accent) 0%, #5b3fd6 100%); color: #fff; border: none; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; font-family: inherit; } .dl-btn:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 20px -4px rgba(124, 92, 255, 0.6); } .google-dym { padding: 12px 18px; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.25); border-radius: var(--radius-md); color: var(--text); margin-bottom: 18px; font-size: 14px; } .google-dym a { color: var(--accent-2); text-decoration: none; font-style: italic; font-weight: 600; } .google-dym a:hover { text-decoration: underline; } /* --- SERP wrapper ---------------------------------------------------- */ .serp-wrap { grid-column: 1 / -1; display: block; } .answer-box { padding: 18px 22px; background: linear-gradient( 135deg, rgba(52, 211, 153, 0.1) 0%, rgba(34, 211, 238, 0.08) 100% ); border: 1px solid rgba(52, 211, 153, 0.3); border-radius: var(--radius-md); margin-bottom: 18px; } .answer-eyebrow { color: var(--success); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; margin-bottom: 8px; } .answer-text { color: var(--text); font-size: 14.5px; line-height: 1.55; } .serp-filterbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .serp-count { color: var(--text-dim); font-size: 12.5px; letter-spacing: 0.03em; } .serp-results { display: flex; flex-direction: column; gap: 14px; } .serp-result { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 18px 22px; backdrop-filter: blur(10px); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; position: relative; } .serp-result:hover { transform: translateY(-2px); border-color: var(--panel-border-strong); box-shadow: 0 12px 30px -12px var(--shadow-strong); } .serp-site { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .serp-fav { width: 22px; height: 22px; border-radius: 6px; background: #fff; padding: 2px; flex-shrink: 0; } .serp-site-meta { flex: 1; min-width: 0; } .serp-site-name { color: var(--text); font-size: 13px; font-weight: 500; } .serp-displayed { color: var(--text-dim); font-size: 11.5px; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .serp-position { color: var(--text-dim); font-size: 11px; font-family: var(--font-mono); padding: 2px 8px; border: 1px solid var(--panel-border); border-radius: 100px; flex-shrink: 0; } .serp-title { display: block; color: #a8b7ff; font-size: 18px; font-weight: 600; margin: 4px 0 6px; text-decoration: none; line-height: 1.35; word-break: break-word; } .serp-title:hover { text-decoration: underline; color: var(--accent); } .serp-title:visited { color: color-mix(in oklab, var(--accent) 65%, var(--text-muted)); } .serp-snippet { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin: 0 0 10px; } .serp-snippet mark { background: rgba(124, 92, 255, 0.22); color: var(--text); padding: 0 2px; border-radius: 3px; } .serp-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } /* --- pagination ------------------------------------------------------ */ .serp-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 26px 0 12px; } .pager-btn { background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); padding: 10px 20px; border-radius: 12px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: transform 0.15s, border-color 0.15s, background 0.15s; font-family: inherit; } .pager-btn:hover:not(.disabled):not(:disabled) { transform: translateY(-1px); border-color: var(--accent); background: rgba(124, 92, 255, 0.15); } .pager-btn.disabled, .pager-btn:disabled { opacity: 0.35; cursor: not-allowed; } .pager-current { color: var(--text-muted); font-size: 13px; font-family: var(--font-mono); padding: 6px 14px; border-radius: 100px; background: rgba(124, 92, 255, 0.1); border: 1px solid rgba(124, 92, 255, 0.25); } /* --- related searches ------------------------------------------------ */ .related-block { margin-top: 28px; padding: 20px 22px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md); } .related-title { margin: 0 0 12px; font-size: 15px; color: var(--text); letter-spacing: 0.02em; } .related-chips { display: flex; flex-wrap: wrap; gap: 8px; } .related-chip { background: var(--tint-1); border: 1px solid var(--panel-border); color: var(--text-muted); border-radius: 100px; padding: 8px 14px; font-size: 13px; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; font-family: inherit; } .related-chip:hover { color: var(--text); background: rgba(124, 92, 255, 0.15); border-color: rgba(124, 92, 255, 0.5); } /* --- toast ----------------------------------------------------------- */ .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--panel-solid); border: 1px solid var(--panel-border-strong); color: var(--text); padding: 10px 18px; border-radius: 100px; font-size: 13px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 200; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 640px) { .google-header { flex-direction: column; padding: 20px; } .hero-side { align-items: flex-start; width: 100%; } .google-query { font-size: 22px; } .mode-switch { width: 100%; justify-content: stretch; } .mode-btn { flex: 1; justify-content: center; } .google-opts, .gmaps-opts { margin-left: 0; width: 100%; } } /* --- google maps mode (GM Extractor) -------------------------------- */ .add-btn { background: var(--tint-2); color: var(--text); border: 1px solid var(--panel-border); padding: 12px 18px; font-size: 14px; font-weight: 600; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; transition: background 0.15s, border-color 0.15s; font-family: inherit; } .add-btn:hover { background: rgba(124, 92, 255, 0.15); border-color: rgba(124, 92, 255, 0.5); } .gmaps-queue { margin-top: 10px; padding: 12px 16px; background: var(--surface-inset); border: 1px dashed var(--panel-border); border-radius: var(--radius-md); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; } .queue-hint { color: var(--text-dim); font-size: 12.5px; font-style: italic; } .queue-label { color: var(--text-dim); font-size: 12.5px; letter-spacing: 0.02em; margin-right: 4px; } .queue-item { background: rgba(124, 92, 255, 0.12); border: 1px solid rgba(124, 92, 255, 0.35); color: var(--text); border-radius: 100px; padding: 4px 6px 4px 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .queue-idx { color: var(--accent-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; } .queue-text { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-x { background: var(--tint-3); border: none; color: var(--text-muted); width: 22px; height: 22px; border-radius: 100px; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; transition: color 0.15s, background 0.15s; } .queue-x:hover { color: var(--danger); background: rgba(248, 113, 113, 0.15); } /* Step cards — mimic the video's numbered rows */ .gm-step-card { grid-column: 1 / -1; display: grid; grid-template-columns: 60px 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md); backdrop-filter: blur(10px); box-shadow: var(--shadow-lg); } .gm-step-num { width: 42px; height: 42px; border-radius: 100px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #10b981, #0ea5e9); box-shadow: 0 6px 20px -6px rgba(16, 185, 129, 0.6); } .gm-step-card:nth-of-type(2) .gm-step-num { background: linear-gradient(135deg, #7c5cff, #22d3ee); box-shadow: 0 6px 20px -6px rgba(124, 92, 255, 0.6); } .gm-step-title { font-size: 15px; color: var(--text); font-weight: 500; margin-bottom: 6px; } .gm-step-meta { display: flex; flex-wrap: wrap; gap: 6px; } .gm-tag { background: var(--tint-1); border: 1px solid var(--panel-border); color: var(--text-muted); border-radius: 100px; padding: 3px 10px; font-size: 11.5px; font-family: var(--font-mono); } .gm-step-buttons { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .gm-primary { background: linear-gradient(135deg, var(--accent) 0%, #5b3fd6 100%); color: #fff; border: none; padding: 10px 20px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; transition: filter 0.15s, transform 0.15s; } .gm-primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .gm-primary:disabled { opacity: 0.4; cursor: not-allowed; } .gm-secondary { background: rgba(248, 113, 113, 0.12); color: var(--danger); border: 1px solid rgba(248, 113, 113, 0.35); padding: 10px 20px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; } .gm-secondary:hover:not(:disabled) { background: rgba(248, 113, 113, 0.2); } .gm-secondary:disabled { opacity: 0.35; cursor: not-allowed; } .gm-step-status { min-width: 220px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .gm-status-line { display: flex; align-items: center; gap: 10px; } .gm-status-label { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .gm-status-value { font-size: 13.5px; font-weight: 600; } .gm-status-value.ok { color: var(--success); } .gm-status-value.running { color: var(--warning); } .gm-status-value.err { color: var(--danger); } .gm-status-value.muted { color: var(--text-muted); } .gm-status-count { font-family: var(--font-mono); font-size: 20px; color: var(--accent-2); font-weight: 700; } .gm-elapsed { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* Pulsing dot next to "Running" status so the screen visibly breathes even before any rows land. */ .gm-status-value.pulse-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; animation: gm-pulse 1.2s ease-in-out infinite; } @keyframes gm-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } } /* Live phase hint under the step-2 buttons. */ .gm-phase-hint { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); font-style: italic; line-height: 1.4; max-width: 460px; } /* Slim progress bar. During scraping the bar has an animated indeterminate shimmer overlay so it feels like progress is happening between polls. */ .gm-progress-wrap { position: relative; margin-top: 10px; height: 6px; background: var(--tint-2); border-radius: 100px; overflow: hidden; max-width: 460px; } .gm-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 100px; transition: width 0.6s ease; min-width: 4px; position: relative; } .gm-progress-bar.running::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%); animation: gm-shimmer 1.6s linear infinite; } @keyframes gm-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .gm-progress-text { position: absolute; right: 8px; top: -18px; font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); letter-spacing: 0.03em; } /* Results table matching the video */ .gm-table-wrap { grid-column: 1 / -1; margin-top: 6px; max-height: 560px; overflow: auto; border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: var(--surface-inset); backdrop-filter: blur(10px); } .gm-table { width: 100%; border-collapse: collapse; font-size: 13px; } .gm-table thead { position: sticky; top: 0; background: linear-gradient(180deg, var(--table-head-grad-a) 0%, var(--table-head-grad-b) 100%); z-index: 2; } .gm-table th { padding: 12px 14px; color: var(--text); font-weight: 600; text-align: left; font-size: 12px; letter-spacing: 0.03em; border-bottom: 1px solid var(--panel-border-strong); white-space: nowrap; } .gm-table td { padding: 10px 14px; color: var(--text-muted); border-bottom: 1px solid var(--panel-border); vertical-align: top; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gm-table tbody tr:hover td { background: rgba(124, 92, 255, 0.06); color: var(--text); } .gm-table td:nth-child(1) { color: var(--text-dim); font-family: var(--font-mono); width: 40px; } .gm-table td:nth-child(2) { color: var(--text); font-weight: 500; } .gm-table td:nth-child(5) { text-align: center; } .gm-empty { padding: 40px !important; text-align: center; color: var(--text-dim); font-style: italic; } .gm-link { color: var(--accent-2); text-decoration: none; } .gm-link:hover { text-decoration: underline; } .gm-rating { display: inline-flex; padding: 2px 8px; border-radius: 6px; font-family: var(--font-mono); font-weight: 600; font-size: 12px; } .gm-rating-high { background: rgba(16, 185, 129, 0.15); color: var(--success); } .gm-rating-mid { background: rgba(217, 119, 6, 0.13); color: var(--warning); } .gm-rating-low { background: rgba(251, 146, 60, 0.15); color: #b45309; } .gm-rating-meh { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); } [data-theme="dark"] .gm-rating-high { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; } [data-theme="dark"] .gm-rating-mid { background: rgba(251, 191, 36, 0.15); color: #fcd34d; } [data-theme="dark"] .gm-rating-low { background: rgba(251, 146, 60, 0.15); color: #fdba74; } [data-theme="dark"] .gm-rating-meh { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; } /* Export bar mimicking the video's blue "EXPORT JSON" / "EXPORT" buttons */ .gm-export-row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--panel-border); flex-wrap: wrap; gap: 12px; } .gm-export-label { color: var(--text-muted); font-size: 13px; } .gm-export-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .gm-export-btn { background: linear-gradient(135deg, #2e5cff 0%, #1e3a8a 100%); color: #fff; border: none; padding: 10px 20px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em; border-radius: 8px; cursor: pointer; font-family: inherit; transition: filter 0.15s, transform 0.15s; box-shadow: 0 4px 12px -4px rgba(46, 92, 255, 0.5); } .gm-export-btn:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); } .gm-export-btn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.4); } .gm-export-xlsx { background: linear-gradient(135deg, #10b981 0%, #047857 100%); } .gm-export-csv { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); } .gm-export-pdf { background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%); } @media (max-width: 800px) { .gm-step-card { grid-template-columns: 48px 1fr; row-gap: 12px; } .gm-step-status { grid-column: 1 / -1; align-items: flex-start; } } /* ===================================================================== Ai PropIntel — AI-first visual layer ===================================================================== */ .hero { max-width: 1180px; padding-top: 26px; } body { letter-spacing: -0.01em; } .brand { gap: 14px; } .logo-mark { width: 50px; height: 50px; border-radius: 15px; font-size: 22px; box-shadow: 0 14px 40px color-mix(in oklab, var(--accent) 28%, transparent); } .brand h1 { font-size: 28px; } .ai-status { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid color-mix(in oklab,var(--success) 25%,var(--panel-border)); background:color-mix(in oklab,var(--success) 7%,var(--panel-solid)); border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.09em; color:var(--success); } .status-dot { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 12px var(--success); } .ai-command-card { padding: 26px; border-radius: 24px; position:relative; overflow:hidden; } .ai-command-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,color-mix(in oklab,var(--accent) 7%,transparent),transparent 42%,color-mix(in oklab,var(--accent-2) 7%,transparent)); } .ai-command-head { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; } .eyebrow { display:inline-block; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.14em; margin-bottom:7px; } .ai-command-head h2 { margin:0; font-size:22px; letter-spacing:-.035em; } .ai-command-head p { margin:5px 0 0; color:var(--text-muted); font-size:13px; } .ai-orb { width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center; border-radius:18px; background:radial-gradient(circle at 30% 20%,#fff,transparent 16%),linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-size:22px; box-shadow:0 18px 42px color-mix(in oklab,var(--accent) 25%,transparent); position:relative; } .ai-orb span { position:absolute; bottom:7px; right:7px; font-size:8px; font-weight:900; letter-spacing:.08em; } .mode-switch { background:var(--tint-1); border:1px solid var(--panel-border); padding:4px; border-radius:13px; gap:4px; margin-bottom:14px; } .mode-btn { border-radius:10px; font-size:12px; font-weight:700; color:var(--text-muted); } .mode-btn.active { background:var(--panel-solid); color:var(--text); box-shadow:0 6px 18px color-mix(in oklab,var(--text) 7%,transparent); } .input-shell { padding:7px 7px 7px 17px; border-radius:16px; min-height:64px; box-shadow:0 8px 30px color-mix(in oklab,var(--text) 5%,transparent); } .input-shell input { font-size:15px !important; } /* --- Voice button (SVG mic icon) --- */ .voice-btn { width:44px; height:44px; border-radius:12px; border:1px solid var(--panel-border-strong); background: linear-gradient(135deg, color-mix(in oklab,var(--accent) 15%,var(--panel-solid)), color-mix(in oklab,var(--accent-2) 10%,var(--panel-solid))); color:var(--accent); cursor:pointer; font-size:14px; transition:.2s; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } .voice-btn:hover { background: linear-gradient(135deg, color-mix(in oklab,var(--accent) 22%,var(--panel-solid)), color-mix(in oklab,var(--accent-2) 18%,var(--panel-solid))); border-color:var(--accent); transform:translateY(-1px); box-shadow:0 4px 14px color-mix(in oklab,var(--accent) 20%,transparent); } .voice-btn.listening { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color:var(--accent); animation:pulseVoice 1s infinite; } @keyframes pulseVoice { 50% { box-shadow:0 0 0 8px color-mix(in oklab,var(--accent) 14%,transparent); } } #scrapeBtn,#googleBtn,#gmapsRunBtn { min-height:48px; border-radius:13px; padding:12px 20px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 12px 28px color-mix(in oklab,var(--accent) 23%,transparent); } .ai-suggestions { position:relative; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:15px 2px 3px; } .suggestion-label { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); } .ai-chip { border:1px solid var(--panel-border); background:var(--panel-solid); color:var(--text-muted); border-radius:999px; padding:7px 11px; font:600 11px var(--font-sans); cursor:pointer; transition:.2s; } .ai-chip:hover { color:var(--text); border-color:color-mix(in oklab,var(--accent) 45%,var(--panel-border)); transform:translateY(-1px); } .ai-hint { margin-left:auto; font-size:11px; color:var(--text-dim); } .site-footer { color:var(--text-dim); } @media(max-width:760px){ .ai-command-head h2{font-size:18px}.ai-orb{display:none}.ai-status{display:none}.ai-hint{width:100%;margin-left:0}.hero{padding-left:16px;padding-right:16px}.hero-actions{gap:6px}.ghost-btn{padding:8px 10px} } /* ============================================================ Broadcast button (header) ============================================================ */ .broadcast-btn { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important; border-color: #25d366 !important; color: #fff !important; font-weight: 600; } .broadcast-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } /* ============================================================ Modal overlay & panel ============================================================ */ .sc-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(10, 14, 30, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: scFadeIn .18s ease; } @keyframes scFadeIn { from { opacity:0 } to { opacity:1 } } .sc-overlay.hidden { display:none !important; } .sc-modal { background: var(--panel-solid); border: 1px solid var(--panel-border-strong); border-radius: 20px; box-shadow: 0 40px 100px -20px rgba(4,6,20,.55); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 24px; animation: scSlideUp .22s cubic-bezier(.22,1,.36,1); } .sc-modal-wide { max-width: 780px; } @keyframes scSlideUp { from { transform:translateY(24px); opacity:0 } to { transform:none; opacity:1 } } .sc-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .sc-modal-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--text); } .sc-close { background: var(--tint-1); border: 1px solid var(--panel-border); color: var(--text-muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; display: grid; place-items: center; transition: .15s; } .sc-close:hover { background: var(--tint-2); color: var(--text); } /* ============================================================ Channel tabs (WhatsApp, Email, Facebook, Instagram) ============================================================ */ .sc-channel-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--panel-border); } .sc-ch-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 2px solid var(--panel-border); border-radius: 12px; cursor: pointer; background: var(--tint-1); transition: all 0.2s ease; user-select: none; font-size: 13.5px; font-weight: 700; color: var(--text-muted); font-family: inherit; } .sc-ch-tab:hover { background: var(--tint-2); color: var(--text); } .sc-ch-tab[data-channel="whatsapp"].active { border-color: #25d366; background: rgba(37, 211, 102, 0.14); color: #25d366; box-shadow: 0 0 14px rgba(37, 211, 102, 0.25); } .sc-ch-tab[data-channel="email"].active { border-color: #ea4335; background: rgba(234, 67, 53, 0.14); color: #ea4335; box-shadow: 0 0 14px rgba(234, 67, 53, 0.25); } .sc-ch-tab[data-channel="facebook"].active { border-color: #1877f2; background: rgba(24, 119, 242, 0.14); color: #1877f2; box-shadow: 0 0 14px rgba(24, 119, 242, 0.25); } .sc-ch-tab[data-channel="instagram"].active { border-color: #e1306c; background: rgba(225, 48, 108, 0.14); color: #e1306c; box-shadow: 0 0 14px rgba(225, 48, 108, 0.25); } .sc-ch-tab .sc-channel-icon { line-height: 1; display: inline-flex; align-items: center; } .sc-count-badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: var(--accent-2); border: 1px solid var(--panel-border); } .sc-channel-section { display: flex; flex-direction: column; } .sc-dispatch-card { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--tint-1); border: 1px solid var(--panel-border); } .sc-dispatch-header { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .sc-dispatch-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .sc-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--panel-border-strong); border-radius: 10px; background: var(--tint-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.15s; font-family: inherit; } .sc-action-btn:hover { background: var(--tint-3, rgba(255,255,255,0.12)); border-color: var(--text-muted); } .sc-chip-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 6px; background: var(--tint-2); border: 1px solid var(--panel-border); color: var(--text); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .sc-chip-btn:hover { background: var(--tint-3, rgba(255, 255, 255, 0.15)); border-color: var(--text-muted); } .sc-queue-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--panel-border); } .sc-queue-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 2px; } .sc-queue-select-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; user-select: none; } .sc-queue-select-all input[type="checkbox"], .wa-contact-check { width: 17px; height: 17px; cursor: pointer; accent-color: #25d366; margin: 0; } .sc-queue-hint-text { font-size: 11.5px; color: var(--text-dim); } .sc-queue-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; padding-right: 4px; } .sc-queue-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 9px; background: var(--tint-1); border: 1px solid var(--panel-border); font-size: 12.5px; color: var(--text); transition: all 0.15s ease; } .sc-queue-item:hover { background: var(--tint-2); border-color: var(--panel-border-strong); } .sc-queue-item.active-target { border-color: #25d366 !important; background: rgba(37, 211, 102, 0.08) !important; box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.25); } .sc-queue-item.sent { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.35); } .sc-queue-item.unselected { opacity: 0.5; background: transparent; border-style: dashed; } .sc-contact-idx { font-size: 11px; font-weight: 600; color: var(--text-dim); min-width: 24px; } .sc-contact-phone { font-family: 'JetBrains Mono', monospace, Consolas, monospace; font-size: 12.5px; font-weight: 700; color: var(--text) !important; letter-spacing: 0.02em; } .sc-contact-title { font-size: 11.5px; color: var(--text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-contact-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; } .sc-contact-badge.sent { background: rgba(16, 185, 129, 0.15); color: #059669; } .sc-contact-badge.current { background: rgba(245, 158, 11, 0.15); color: #d97706; } .sc-contact-badge.ready { background: var(--tint-2); color: var(--text-dim); } .sc-contact-badge.unselected { background: var(--tint-1); color: var(--text-dim); } .sc-queue-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; background: rgba(37, 211, 102, 0.16); color: #15803d; font-weight: 700; font-size: 11px; text-decoration: none; border: 1px solid rgba(37, 211, 102, 0.4); transition: 0.15s; } [data-theme="dark"] .sc-queue-btn { color: #25d366; } .sc-queue-btn:hover { background: #25d366; color: #fff; border-color: #25d366; } /* ============================================================ Recipients & inputs ============================================================ */ .sc-section-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; } .sc-recip-hint { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); } .sc-recipients-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; } .sc-recip-block { width: 100%; } .sc-textarea, .sc-input { width: 100%; background: var(--tint-1); border: 1px solid var(--panel-border-strong); border-radius: 10px; color: var(--text); font-family: var(--font-mono); font-size: 13px; padding: 10px 12px; resize: vertical; outline: none; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; } .sc-textarea:focus, .sc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent); } .sc-input { resize: none; } /* ============================================================ Preview tabs ============================================================ */ .sc-preview-tabs { display: flex; gap: 4px; background: var(--tint-1); border: 1px solid var(--panel-border); border-radius: 10px; padding: 4px; margin-bottom: 10px; } .sc-ptab { flex: 1; border: none; background: transparent; border-radius: 7px; padding: 7px 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: .15s; } .sc-ptab:hover { color: var(--text); background: var(--tint-2); } .sc-ptab.active { background: var(--panel-solid); color: var(--text); box-shadow: 0 2px 8px color-mix(in oklab,var(--text) 8%,transparent); } .sc-preview-panel { width: 100%; } .sc-preview-ta { width: 100%; background: var(--tint-1); border: 1px solid var(--panel-border-strong); border-radius: 10px; color: var(--text); font-family: var(--font-mono); font-size: 12.5px; padding: 12px; resize: vertical; outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; line-height: 1.6; } .sc-preview-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent); } /* ============================================================ Status bar ============================================================ */ .sc-status { margin-top: 14px; padding: 12px 16px; border-radius: 10px; font-size: 13px; line-height: 1.5; background: var(--tint-1); border: 1px solid var(--panel-border); color: var(--text-muted); white-space: pre-wrap; } .sc-status.ok { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); color: #34d399; } .sc-status.err { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); color: #f87171; } .sc-launch-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .sc-launch-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .sc-launch-btn.sc-wa-btn { background: rgba(37, 211, 102, 0.18); border-color: rgba(37, 211, 102, 0.45); color: #25d366; } .sc-launch-btn.sc-wa-btn:hover { background: #25d366; color: #fff; transform: translateY(-1px); } .sc-launch-btn.sc-email-btn { background: rgba(234, 67, 53, 0.18); border-color: rgba(234, 67, 53, 0.45); color: #f87171; } .sc-launch-btn.sc-email-btn:hover { background: #ea4335; color: #fff; transform: translateY(-1px); } .sc-launch-btn.sc-fb-btn { background: rgba(24, 119, 242, 0.18); border-color: rgba(24, 119, 242, 0.45); color: #60a5fa; } .sc-launch-btn.sc-fb-btn:hover { background: #1877f2; color: #fff; transform: translateY(-1px); } .sc-launch-btn.sc-ig-btn { background: rgba(225, 48, 108, 0.18); border-color: rgba(225, 48, 108, 0.45); color: #f472b6; } .sc-launch-btn.sc-ig-btn:hover { background: #e1306c; color: #fff; transform: translateY(-1px); } /* ============================================================ Footer ============================================================ */ .sc-modal-footer { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--panel-border); flex-wrap: wrap; } .sc-send-btn { display: inline-flex; align-items: center; padding: 12px 24px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 10px 28px color-mix(in oklab,var(--accent) 22%,transparent); transition: .2s; } .sc-send-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .sc-send-btn:disabled { opacity:.6; cursor:not-allowed; } .sc-cancel-btn { padding: 12px 20px; border: 1px solid var(--panel-border-strong); border-radius: 12px; background: var(--tint-1); color: var(--text-muted); font-size: 13px; cursor: pointer; transition: .15s; } .sc-cancel-btn:hover { background: var(--tint-2); color: var(--text); } /* ============================================================ Settings details ============================================================ */ .sc-details { border: 1px solid var(--panel-border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .sc-details-summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text); background: var(--tint-1); list-style: none; transition: background .15s; user-select: none; } .sc-details-summary::-webkit-details-marker { display:none; } .sc-details-summary:hover { background: var(--tint-2); } .sc-details[open] .sc-details-summary { border-bottom: 1px solid var(--panel-border); } .sc-fields { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .sc-field-row { display: flex; gap: 12px; flex-wrap: wrap; } .sc-field-row label { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: .03em; } .sc-fields > label { font-size: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: .03em; } .sc-checkbox-label { display: inline-flex !important; align-items: center; gap: 8px; font-size: 13px !important; font-weight: 500 !important; color: var(--text-muted) !important; cursor: pointer; letter-spacing: 0 !important; } .sc-help { font-size: 12px; color: var(--text-dim); margin: 4px 0 0; } .sc-help a { color: var(--accent-2); } /* ========================================================================== AUTH PAGE (login.html) ========================================================================== */ body.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-0); } .auth-container { width: 100%; max-width: 420px; padding: 24px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; position: relative; z-index: 1; } .auth-brand { display: flex; align-items: center; gap: 14px; } .auth-logo-mark { font-size: 2.4rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-title { font-size: 1.6rem; font-weight: 800; margin: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-tagline { font-size: 0.78rem; color: var(--text-muted); margin: 2px 0 0; } .auth-card { width: 100%; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 18px; backdrop-filter: blur(16px); overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.10); } /* Auth tabs */ .auth-tabs { display: flex; border-bottom: 1px solid var(--panel-border); } .auth-tab { flex: 1; padding: 14px 12px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: all .18s; letter-spacing: .02em; } .auth-tab:hover { color: var(--accent); background: rgba(109,77,250,.06); } .auth-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); background: rgba(109,77,250,.06); } /* Auth panels */ .auth-panel { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 18px; } .auth-panel-hint { font-size: 0.83rem; color: var(--text-muted); margin: 0; line-height: 1.5; } /* Google button */ .auth-google-btn { display: flex; justify-content: center; } .auth-google-fallback-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 20px; background: var(--panel-solid); border: 1px solid var(--panel-border-strong); border-radius: 50px; font-size: 0.88rem; font-weight: 600; color: var(--text); cursor: pointer; transition: all .18s; box-shadow: 0 1px 6px rgba(0,0,0,.08); } .auth-google-fallback-btn:hover { background: var(--bg-1); box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-1px); } /* Mobile form */ .auth-label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); letter-spacing: .03em; } .auth-optional { font-weight: 400; opacity: .7; } .auth-required { color: var(--danger); } .auth-input { padding: 10px 14px; border: 1px solid var(--panel-border-strong); border-radius: 10px; background: var(--bg-1); color: var(--text); font-size: 0.9rem; outline: none; transition: border-color .18s, box-shadow .18s; width: 100%; box-sizing: border-box; } .auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,77,250,.15); } .auth-phone-wrap { display: flex; align-items: center; gap: 0; border: 1px solid var(--panel-border-strong); border-radius: 10px; overflow: hidden; background: var(--bg-1); transition: border-color .18s, box-shadow .18s; } .auth-phone-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,77,250,.15); } .auth-phone-prefix { padding: 10px 12px; background: var(--bg-2); border-right: 1px solid var(--panel-border); font-size: 0.88rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .auth-phone-input { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; flex: 1; } .auth-phone-input:focus { box-shadow: none !important; } .auth-otp-input { letter-spacing: 0.35em; font-size: 1.1rem; font-weight: 700; text-align: center; } .auth-submit-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 50px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all .2s; box-shadow: 0 4px 18px rgba(109,77,250,.35); letter-spacing: .03em; } .auth-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(109,77,250,.45); } .auth-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; } .auth-text-btn { background: transparent; border: none; color: var(--accent); font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; align-self: center; } .auth-otp-sent { font-size: 0.84rem; color: var(--text-muted); margin: 0; text-align: center; } .auth-error { padding: 9px 14px; background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.25); border-radius: 8px; color: var(--danger); font-size: 0.82rem; line-height: 1.4; } .auth-status { padding: 10px 16px; border-radius: 8px; font-size: 0.84rem; font-weight: 500; text-align: center; color: var(--text-muted); background: var(--bg-1); border: 1px solid var(--panel-border); margin: 0 28px 8px; } .auth-status.ok { color: var(--success); background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); } .auth-status.err { color: var(--danger); background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.25); } .auth-note { font-size: 0.76rem; color: var(--text-dim); margin: 0; text-align: center; line-height: 1.5; } .auth-footer-note { font-size: 0.76rem; color: var(--text-dim); text-align: center; margin: 0; } .auth-link { color: var(--accent); } .auth-step { display: flex; flex-direction: column; gap: 14px; } /* ========================================================================== USER AVATAR + DROPDOWN (index.html header) ========================================================================== */ .user-avatar-wrap { position: relative; display: flex; align-items: center; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; border: 2px solid rgba(255,255,255,.2); transition: box-shadow .18s; user-select: none; } .user-avatar:hover { box-shadow: 0 0 0 3px rgba(109,77,250,.35); } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-dropdown { position: absolute; top: calc(100% + 10px); right: 0; background: var(--panel-solid); border: 1px solid var(--panel-border-strong); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.18); min-width: 200px; padding: 14px; display: none; flex-direction: column; gap: 6px; z-index: 1000; } .user-dropdown.open { display: flex; } .user-dropdown-name { font-size: 0.88rem; font-weight: 700; color: var(--text); } .user-dropdown-email { font-size: 0.76rem; color: var(--text-muted); word-break: break-all; margin-bottom: 8px; } .user-dropdown-logout { padding: 8px 14px; background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.2); border-radius: 8px; color: var(--danger); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all .15s; text-align: left; } .user-dropdown-logout:hover { background: rgba(220,38,38,.18); } /* ========================================================================== HOT / WARM / COLD TAG BADGES ========================================================================== */ .tag-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: .03em; cursor: pointer; user-select: none; transition: all .15s; white-space: nowrap; } .tag-badge:hover { transform: scale(1.08); } .tag-none { background: var(--bg-2); color: var(--text-dim); border: 1px dashed var(--panel-border-strong); } .tag-hot { background: rgba(239,68,68,.15); color: #dc2626; border: 1px solid rgba(239,68,68,.35); } .tag-warm { background: rgba(245,158,11,.15); color: #b45309; border: 1px solid rgba(245,158,11,.35); } .tag-cold { background: rgba(6,182,212,.15); color: #0e7490; border: 1px solid rgba(6,182,212,.35); } /* ========================================================================== GMAPS TABLE CHECKBOX COLUMN ========================================================================== */ .gm-col-check { width: 36px; min-width: 36px; text-align: center; padding: 6px 4px !important; } .gm-row-check, #gmSelectAll { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); } /* ========================================================================== BROADCAST SELECTED FLOATING BUTTON (bottom of gmaps results) ========================================================================== */ .broadcast-sel-btn { display: flex; align-items: center; justify-content: center; margin: 16px auto 8px; padding: 13px 28px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; border: none; border-radius: 50px; font-size: 0.92rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: all .2s; letter-spacing: .03em; } .broadcast-sel-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,211,102,.5); } .broadcast-sel-btn.hidden { display: none; } /* ============================================================ Big Map Intelligence Textarea ============================================================ */ .gmaps-big-shell { background: var(--panel); border: 1.5px solid var(--panel-border); border-radius: var(--radius-md); padding: 18px 20px 16px; margin: 0; transition: border-color .2s, box-shadow .2s; } .gmaps-big-shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,77,250,.12); } .gmaps-big-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; flex-wrap: wrap; } .gmaps-big-hint { font-weight: 400; font-size: 11.5px; opacity: .65; margin-left: auto; } .gmaps-big-input-row { display: flex; gap: 12px; align-items: flex-start; } .gmaps-big-textarea { flex: 1; min-height: 110px; resize: vertical; background: var(--surface-inset); border: 1.5px solid var(--panel-border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; color: var(--text); font-family: var(--font-sans); line-height: 1.6; outline: none; transition: border-color .2s, box-shadow .2s; } .gmaps-big-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,77,250,.1); background: var(--panel-solid); } .gmaps-big-textarea::placeholder { color: var(--text-dim); opacity: .7; } .gmaps-big-actions { display: flex; flex-direction: column; gap: 8px; min-width: 110px; } .gmaps-explore-btn { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: var(--radius-sm); padding: 11px 16px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; justify-content: center; transition: all .2s; box-shadow: 0 4px 16px rgba(109,77,250,.3); } .gmaps-explore-btn:hover { opacity: .92; transform: translateY(-1px); } @media (max-width: 600px) { .gmaps-big-input-row { flex-direction: column; } .gmaps-big-actions { flex-direction: row; } .gmaps-big-textarea { min-height: 90px; } } /* ============================================================ Auth page additions — switch hint, required, optional ============================================================ */ .auth-switch-hint { text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 14px; } /* ============================================================ User dropdown — Preferences option ============================================================ */ .user-dropdown-pref { background: none; border: none; color: var(--text-muted); font-size: 13px; padding: 6px 0; cursor: pointer; text-align: left; width: 100%; display: block; transition: color .15s; } .user-dropdown-pref:hover { color: var(--accent); } /* Excel-only export button accent */ .gm-export-btn.gm-export-xlsx { background: linear-gradient(135deg,#217346,#0f5c2e); color: #fff; border: none; font-weight: 700; padding: 10px 22px; border-radius: 10px; cursor: pointer; font-size: 13px; transition: all .2s; box-shadow: 0 4px 14px rgba(33,115,70,.3); } .gm-export-btn.gm-export-xlsx:hover { opacity:.9; transform:translateY(-1px); } .gm-export-btn.gm-export-xlsx:disabled { opacity:.4; cursor:not-allowed; transform:none; } /* ============================================================ User pill button in header ============================================================ */ .user-pill-btn { display: flex; align-items: center; gap: 9px; background: var(--surface-inset); border: 1px solid var(--panel-border); border-radius: 50px; padding: 3px 12px 3px 4px; color: var(--text); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; transition: all .2s; } .user-pill-btn:hover { background: var(--surface-inset-strong); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(109,77,250,.15); } .user-name-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-caret { font-size: 10px; opacity: .6; margin-left: 2px; } /* ======================================================================= Workspace refinement — visual-only layer; existing application hooks stay unchanged. Keeps the research flow focused on ask → discover → act. ======================================================================= */ :root { --ai-ink: #17203a; --ai-violet: #6546e8; --ai-cyan: #12b9d1; --ai-soft: #f6f4ff; } .hero { max-width: min(1600px, 98vw); padding-top: 10px; } .hero-inner { padding: 4px 4px 10px; } .brand { gap: 10px; } .logo-mark { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; } .brand h1 { font-size: 20px; } .tagline { max-width: 560px; line-height: 1.35; font-size: 0.85rem; } .hero-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .ai-status { letter-spacing: .08em; font-size: 10px; font-weight: 800; padding: 6px 9px; } .ghost-btn { min-height: 34px; padding: 6px 12px; font-weight: 600; font-size: 12.5px; } .ai-command-card { position: relative; overflow: hidden; padding: 16px 20px; border-radius: 16px; margin-bottom: 12px; } .ai-command-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #2563eb, #38bdf8, #818cf8); } .ai-command-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; } .ai-command-head h2 { max-width: 650px; margin: 2px 0 3px; font-size: 1.32rem; letter-spacing: -.03em; line-height: 1.15; } .ai-command-head p { margin: 0; color: var(--text-muted); font-size: .82rem; } .eyebrow { color: var(--accent, #2563eb); font-size: .65rem; font-weight: 800; letter-spacing: .12em; } .ai-orb { flex: 0 0 auto; display: grid; place-content: center; width: 38px; height: 38px; border-radius: 11px; color: white; background: radial-gradient(circle at 30% 25%, #60a5fa, #2563eb 52%, #1e3a8a); box-shadow: 0 6px 16px rgba(37,99,235,.25); font-size: 16px; } .ai-orb span { font-size: 7px; font-weight: 800; letter-spacing: .1em; margin-top: -3px; } /* Compact Unified Search Shell */ .gmaps-big-shell { border-radius: 12px; padding: 10px 14px 12px; background: #f8faff; border: 1px solid #dce4f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } .gmaps-unified-bar { display: flex; align-items: flex-end; gap: 12px; width: 100%; } .gmaps-city-field { flex: 0 0 220px; display: flex; flex-direction: column; gap: 4px; } .gmaps-query-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .gmaps-actions-field { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .gmaps-inline-label { font-size: 11px; font-weight: 750; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 4px; } .gmaps-inline-label .default-tag { font-size: 10px; color: #2563eb; font-weight: 600; background: #eff6ff; padding: 1px 6px; border-radius: 6px; text-transform: none; letter-spacing: 0; margin-left: auto; } .gmaps-city-input, .gmaps-keyword-input { height: 40px; box-sizing: border-box; background: #ffffff; border: 1.5px solid #cbd5e1; border-radius: 8px; padding: 0 12px; color: #0f172a; font-size: 13.5px; font-weight: 500; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; width: 100%; } .gmaps-city-input:focus, .gmaps-keyword-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .gmaps-actions-field .add-btn { height: 40px; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1.5px solid #cbd5e1; background: #ffffff; color: #334155; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: all 0.15s ease; } .gmaps-actions-field .add-btn:hover { background: #f1f5f9; border-color: #94a3b8; } .gmaps-actions-field .voice-btn { height: 40px; width: 40px; min-height: 40px; border-radius: 8px; border: 1.5px solid #cbd5e1; background: #ffffff; color: #475569; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .gmaps-actions-field .voice-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #2563eb; } .gmaps-actions-field .gmaps-explore-btn { height: 40px; min-height: 40px; padding: 0 18px; border-radius: 8px; border: none; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; font-weight: 750; font-size: 13.5px; cursor: pointer; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: all 0.15s ease; } .gmaps-actions-field .gmaps-explore-btn:hover { background: linear-gradient(135deg, #1d4ed8, #2563eb); box-shadow: 0 5px 14px rgba(37, 99, 235, 0.32); } @media (max-width: 768px) { .gmaps-unified-bar { flex-direction: column; align-items: stretch; gap: 8px; } .gmaps-city-field, .gmaps-query-field, .gmaps-actions-field { width: 100%; flex: auto; } .gmaps-actions-field { display: flex; gap: 6px; } .gmaps-actions-field .add-btn, .gmaps-actions-field .gmaps-explore-btn { flex: 1; } } .quick-samples { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .quick-samples .qs-label { font-size: 11px; font-weight: 700; color: #64748b; margin-right: 4px; } .chip { font-size: 11.5px; min-height: 26px; padding: 2px 10px; border-radius: 6px; background: #ffffff; border: 1px solid #e2e8f0; color: #475569; font-weight: 500; cursor: pointer; transition: all 0.12s ease; } .chip:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; } .gmaps-queue { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #f1f5f9; border: 1px solid #e2e8f0; font-size: 12px; } .results { max-width: min(1600px, 98vw); margin-inline: auto; } .overview, .tab-panels { border-radius: 18px; } .tabs { position: sticky; top: 0; z-index: 20; padding: 9px; background: color-mix(in oklab, var(--bg) 90%, transparent); backdrop-filter: blur(16px); } .site-footer { margin-top: 34px; padding-bottom: 22px; } /* A friendly two-column sign-in experience. */ .auth-container { width: min(1040px, calc(100% - 32px)); display: grid; grid-template-columns: minmax(300px, .9fr) minmax(340px, 420px); gap: clamp(28px, 6vw, 84px); align-items: center; } .auth-form-side { width: 100%; } .auth-value-panel { padding: 18px; } .auth-value-panel h2 { margin: 13px 0; max-width: 500px; color: var(--text); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.055em; line-height: 1.02; } .auth-value-panel > p { max-width: 440px; color: var(--text-muted); line-height: 1.65; } .auth-value-badge { display: inline-block; padding: 7px 10px; border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); border-radius: 99px; color: var(--accent); font-size: .66rem; font-weight: 800; letter-spacing: .12em; } .auth-value-points { display: grid; gap: 12px; margin-top: 26px; } .auth-value-points > div { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px; background: color-mix(in oklab, var(--panel-solid) 75%, transparent); border: 1px solid var(--panel-border); border-radius: 13px; color: var(--text-muted); font-size: .8rem; line-height: 1.45; } .auth-value-points > div > span:first-child { color: var(--accent); font-size: 1rem; } .auth-value-points strong { color: var(--text); } .auth-card { box-shadow: 0 24px 64px rgba(26, 17, 74, .18); } .auth-title { font-size: 1.45rem; } @media (max-width: 820px) { .auth-container { grid-template-columns: 1fr; max-width: 500px; gap: 18px; padding-block: 28px; } .auth-value-panel { padding: 0; } .auth-value-panel h2 { font-size: 1.85rem; } .auth-value-points { display: none; } .auth-brand { margin-bottom: 18px; } .hero { padding: 18px 16px; } .hero-inner { align-items: flex-start; flex-direction: column; } .hero-actions { width: 100%; justify-content: flex-start; } .ai-guidance { grid-template-columns: 1fr; } } @media (max-width: 560px) { .ai-command-card { padding: 20px 15px; } .ai-command-head { align-items: flex-start; } .ai-orb { width: 42px; height: 42px; border-radius: 13px; font-size: 17px; } .gmaps-big-shell { padding: 13px; } .gmaps-big-actions { width: 100%; } .gmaps-big-actions > button { flex: 1; } .hero-actions .ai-status, .hero-actions #clearBtn, .hero-actions #socialSettingsBtn { display: none; } .auth-container { width: min(100% - 24px, 460px); } } /* Results clarity: a compact lead workspace above the complete data table. */ .gm-results-header { display:flex; justify-content:space-between; align-items:end; gap:18px; margin:30px 0 12px; padding:22px 22px 18px; background:linear-gradient(118deg,color-mix(in oklab,var(--panel-solid) 96%,#f3f0ff),color-mix(in oklab,var(--panel-solid) 92%,#e8fbff)); border:1px solid var(--panel-border); border-radius:18px 18px 12px 12px; } .gm-results-kicker { display:block; margin-bottom:5px; color:var(--accent); font-size:.65rem; font-weight:800; letter-spacing:.13em; } .gm-results-title { margin:0; color:var(--text); font-size:clamp(1.25rem,2vw,1.65rem); letter-spacing:-.035em; } .gm-results-subtitle { margin:5px 0 0; color:var(--text-muted); font-size:.82rem; } .gm-results-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .gm-result-search { display:flex; align-items:center; gap:8px; min-width:min(310px,100%); padding:0 11px; background:var(--panel-solid); border:1px solid var(--panel-border-strong); border-radius:10px; color:var(--accent); } .gm-result-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 15%,transparent); } .gm-result-search input { width:100%; min-width:0; padding:10px 0; border:0; outline:0; background:transparent; color:var(--text); font:500 .8rem var(--font-sans); } .gm-result-search input::placeholder { color:var(--text-dim); } .gm-result-count { white-space:nowrap; padding:8px 10px; border-radius:999px; background:color-mix(in oklab,var(--accent) 10%,transparent); color:var(--accent); font-size:.7rem; font-weight:750; } .gm-table-wrap { margin-top: 0; max-height: min(65vh, 580px); overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; border-radius: 12px; box-shadow: 0 12px 32px rgba(39,27,92,.07); border: 1px solid var(--panel-border-strong); position: relative; } .gm-table-wrap::-webkit-scrollbar { width: 10px; height: 12px; } .gm-table-wrap::-webkit-scrollbar-track { background: #eef2f8; border-radius: 6px; } .gm-table-wrap::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 6px; border: 2px solid #eef2f8; } .gm-table-wrap::-webkit-scrollbar-thumb:hover { background: #1d4ed8; } .gm-scroll-nav-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px; border: 1px solid #d1d5db; background: #ffffff; color: #374151; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .gm-scroll-nav-btn:hover { background: #eff6ff; color: #2563eb; border-color: #93c5fd; } .gm-table { min-width:1450px; font-size:12.5px; } .gm-table th { padding:13px 14px; color:var(--text-muted); background:var(--panel-solid); font-size:.67rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; } .gm-table td { padding:13px 14px; line-height:1.35; } .gm-table tbody tr { transition:background .15s ease,transform .15s ease; } .gm-table tbody tr:nth-child(even) td { background:color-mix(in oklab,var(--surface-inset) 50%,transparent); } .gm-table tbody tr:hover td { background:color-mix(in oklab,var(--accent) 8%,var(--panel-solid)); } .gm-table td:nth-child(3) { color:var(--text); font-weight:700; min-width:210px; } .gm-table td:nth-child(4) { min-width:145px; font-family:var(--font-mono); font-size:.78rem; } .gm-table td:nth-child(8) { min-width:220px; } .gm-table td:nth-child(9) { min-width:260px; white-space:normal; } .gm-table td:nth-child(10),.gm-table td:nth-child(11) { min-width:155px; } .gm-rating { display:inline-flex; align-items:center; min-width:35px; justify-content:center; padding:4px 7px; border-radius:7px; font-weight:800; } .gm-table a.gm-link { font-weight:650; } @media (max-width:760px) { .gm-results-header { align-items:stretch; flex-direction:column; padding:17px; } .gm-results-tools { justify-content:flex-start; } .gm-result-search { width:100%; } .gm-table-wrap { overflow:visible; max-height:none; border:0; background:transparent; box-shadow:none; } .gm-table,.gm-table tbody,.gm-table tr,.gm-table td { display:block; width:100%; min-width:0; } .gm-table thead { display:none; } .gm-table tbody { display:grid; gap:12px; } .gm-table tbody tr { position:relative; padding:13px 14px 12px 48px; border:1px solid var(--panel-border); border-radius:14px; background:var(--panel-solid); box-shadow:0 7px 18px rgba(43,31,91,.05); } .gm-table tbody tr[hidden] { display:none; } .gm-table tbody tr td { display:grid; grid-template-columns:112px 1fr; gap:10px; max-width:none; padding:7px 0; border:0; overflow:visible; text-overflow:clip; white-space:normal; background:transparent !important; } .gm-table tbody tr td::before { content:attr(data-label); color:var(--text-dim); font-size:.65rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .gm-table tbody tr td:nth-child(1),.gm-table tbody tr td:nth-child(2) { position:absolute; padding:0; } .gm-table tbody tr td:nth-child(1) { top:14px; left:14px; width:18px; } .gm-table tbody tr td:nth-child(2) { top:14px; left:38px; } .gm-table tbody tr td:nth-child(1)::before,.gm-table tbody tr td:nth-child(2)::before { display:none; } .gm-table tbody tr td:nth-child(3) { padding-top:0; padding-right:10px; color:var(--text); font-size:1rem; } .gm-table tbody tr td:nth-child(3)::before { content:"Business"; } .gm-table tbody tr td:nth-child(n+12) { display:none; } .gm-table .gm-empty { display:block; padding:30px !important; text-align:center; } } /* Clean light workspace alignment */ .ai-command-card { background:#fff !important; border:1px solid #dfe4f0; box-shadow:0 8px 24px rgba(38,53,93,.06); } /* Calm, light landing page — no dark overlays, blur, or decorative noise. */ .auth-page { display: block; min-height: 100vh; padding: 0; overflow: auto; background: #f7f8fc; color: #1b2740; } .auth-page .bg-orbs { display: none; } .auth-container { min-height: 100vh; width: min(1040px, calc(100% - 48px)); max-width: 1040px; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(42px, 7vw, 92px); padding: 42px 0; } .auth-value-panel { padding: 8px 0; } .auth-value-badge { background: #f1efff; border-color: #d4ccff; color: #6249e8; } .auth-value-panel h2 { max-width: 450px; margin: 12px 0 13px; color: #17213b; font-size: clamp(2rem, 3.5vw, 2.65rem); line-height: 1.06; } .auth-value-panel > p { max-width: 430px; margin: 0; color: #61708a; font-size: .95rem; line-height: 1.58; } .auth-value-points { gap: 9px; margin-top: 20px; max-width: 430px; } .auth-value-points > div { grid-template-columns: 22px 1fr; gap: 9px; padding: 10px 12px; background: #fff; border-color: #e0e5ef; border-radius: 11px; box-shadow: none; font-size: .74rem; line-height: 1.35; } .auth-value-points > div > span:first-child { color: #7458f5; font-size: .85rem; } .auth-value-points strong { color: #25324b; } .auth-form-side { align-self: center; } .auth-brand { margin: 0 0 13px; gap: 10px; } .auth-logo-mark { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; box-shadow: none; } .auth-title { color: #456fe6; font-size: 1.35rem; } .auth-tagline { margin-top: 2px; color: #68768e; font-size: .74rem; } .auth-card { padding: 0 0 18px; overflow: hidden; background: #fff; border: 1px solid #dfe5ef; border-radius: 18px; box-shadow: 0 18px 44px rgba(35, 52, 86, .10); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .auth-tabs { background: #fafbfe; border-bottom: 1px solid #e4e8f0; } .auth-tab { padding: 13px 12px; font-size: .8rem; } .auth-panel { padding: 20px 28px 0; } .auth-panel-hint { margin: 0 0 17px; color: #5f6d84; font-size: .8rem; } .auth-label { margin-bottom: 13px; color: #526078; font-size: .75rem; } .auth-input { background: #fff; border-color: #cdd6e5; color: #25324b; padding: 11px 13px; } .auth-input:focus { border-color: #7358f5; box-shadow: 0 0 0 3px rgba(115,88,245,.12); background: #fff; } .auth-phone-prefix { background: #f6f8fc; color: #40506c; border-color: #cdd6e5; } .auth-submit-btn { margin-top: 3px; padding: 12px; border-radius: 11px; background: linear-gradient(135deg, #7256f7, #1fa8d9); box-shadow: 0 9px 20px rgba(72, 91, 210, .21); } .auth-switch-hint { margin-top: 13px; } .auth-footer-note { margin: 11px 0 0; color: #79859a; font-size: .7rem; } @media (max-width:820px) { .auth-container { min-height: auto; width: min(460px, calc(100% - 32px)); padding: 30px 0; gap: 20px; } .auth-value-panel { padding: 0; } .auth-value-panel h2 { font-size: 1.85rem; } .auth-value-points { display: none; } } /* Final results treatment: full-width, solid, and deliberately quiet. */ .gm-results-header { grid-column: 1 / -1; width: 100%; margin: 24px 0 10px; padding: 14px 18px; border-radius: 14px; background: var(--panel-solid) !important; border-color: var(--panel-border-strong); box-shadow: 0 8px 20px rgba(23, 32, 58, .06); } .gm-results-title { font-size: 1.18rem; } .gm-results-subtitle { font-size: .78rem; } .gm-results-kicker { display: none; } .gm-table-wrap { grid-column: 1 / -1; width: 100%; max-height: min(65vh, 580px); overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; background: var(--panel-solid) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: var(--panel-border-strong); } .gm-table { background: var(--panel-solid) !important; } .gm-table thead, .gm-table th { background: #f4f6fb !important; } .gm-table td { background: #ffffff !important; color: #46516a; } .gm-table tbody tr:nth-child(even) td { background: #fafbfe !important; } .gm-table tbody tr:hover td { background: #f1efff !important; } .gm-table td:nth-child(3) { color: #1d2942; } .gm-table th { color: #34415d; border-bottom-color: #dce2ee; } .gm-table th.gm-col-check { position: sticky; left: 0; z-index: 5; background: #f4f6fb !important; width: 44px; min-width: 44px; max-width: 44px; text-align: center; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05); } .gm-table td.gm-col-check { position: sticky; left: 0; z-index: 4; background: #ffffff !important; width: 44px; min-width: 44px; max-width: 44px; text-align: center; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05); } .gm-table tbody tr:nth-child(even) td.gm-col-check { background: #fafbfe !important; } .gm-table tbody tr:hover td.gm-col-check { background: #f1efff !important; } .gm-result-search { background: #fff; border-color: #d6ddea; } .gm-result-search input { color: #24314a; } @media (max-width: 760px) { .gm-results-header { grid-column: auto; } .gm-table-wrap { grid-column: auto; } .gm-table tbody tr { background: #fff; } } /* ============================================================ REGISTRATION OVERLAY BANNER & COUPON SUCCESS MODAL ============================================================ */ .reg-overlay-banner { margin-bottom: 6px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .reg-overlay-img-container { position: relative; width: 100%; height: 120px; overflow: hidden; background: #0f172a; } .reg-overlay-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: brightness(0.7) contrast(1.1); transform: scale(1.02); transition: transform 0.4s ease; } .reg-overlay-banner:hover .reg-overlay-img { transform: scale(1.06); } .reg-overlay-backdrop { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.9) 100%); } .reg-overlay-content { position: absolute; bottom: 10px; left: 14px; right: 14px; z-index: 2; } .reg-overlay-tag { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; padding: 2px 7px; border-radius: 10px; margin-bottom: 4px; } .reg-overlay-title { font-size: 13.5px; font-weight: 700; color: #ffffff; margin: 0 0 2px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .reg-overlay-desc { font-size: 11px; color: #cbd5e1; margin: 0; line-height: 1.35; } .reg-success-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .reg-success-card { background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 32px 28px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes popIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .reg-success-icon { font-size: 44px; margin-bottom: 12px; } .reg-coupon-box { background: rgba(239, 68, 68, 0.08); border: 2px dashed rgba(239, 68, 68, 0.4); border-radius: 12px; padding: 16px; margin: 16px 0; } .reg-coupon-label { display: block; font-size: 10px; font-weight: 800; color: #fca5a5; letter-spacing: 0.8px; margin-bottom: 6px; } .reg-coupon-code-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; } .reg-coupon-code { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 800; color: #ef4444; letter-spacing: 1.5px; } .reg-copy-btn { background: #ef4444; color: #ffffff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background 0.15s; } .reg-copy-btn:hover { background: #dc2626; } /* --- Google Auth & Onboarding Styling --- */ .google-auth-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 11px 16px; background: #ffffff; color: #1f2937; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: all 0.2s ease; } .google-auth-btn:hover { background: #f8fafc; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transform: translateY(-1px); } .auth-divider { display: flex; align-items: center; text-align: center; margin: 16px 0; color: #64748b; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .auth-divider span { padding: 0 10px; } .google-demo-account-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: #e2e8f0; padding: 6px 12px; border-radius: 20px; font-size: 11.5px; cursor: pointer; transition: all 0.15s ease; text-align: left; } .google-demo-account-pill:hover { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ffffff; } /* User-wise History & Activity Styling */ .act-type-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; } .pill-prop { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .pill-web { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .pill-search { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; } .history-user-banner { display: flex; align-items: center; justify-content: space-between; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 8px; padding: 8px 14px; margin: 10px 20px; font-size: 12px; color: var(--text-main); } /* Light Theme City Input & Alignment */ .gmaps-city-row { width: 100%; box-sizing: border-box; } .gmaps-loc-input { background: #ffffff !important; border: 1.5px solid var(--panel-border-strong, #cbd5e1) !important; border-radius: 10px !important; padding: 11px 14px !important; color: var(--text, #0f172a) !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important; } .gmaps-loc-input:focus { border-color: var(--accent, #6d4dfa) !important; box-shadow: 0 0 0 3px rgba(109, 77, 250, 0.14) !important; background: #ffffff !important; } .gmaps-loc-input::placeholder { color: #94a3b8 !important; opacity: 0.85 !important; }