:root { --ink: #211D3D; --ink-soft: #4A4468; --paper: #F7F7FB; --line: #E4E3ED; --white: #FFFFFF; --accent: #4338CA; --accent-hover: #372DA3; --accent-soft: #EEF0FF; --good: #16A34A; --good-soft: #E9F8EF; --muted: #94A3B8; --danger: #B00020; --sidebar-bg: #211D3D; --sidebar-field-bg: rgba(255,255,255,0.06); --sidebar-field-border: rgba(255,255,255,0.14); --table-head-bg: #FBFBFD; --radius: 10px; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; } /* ---- Dark mode: applied to via data-theme="dark" ---- */ body[data-theme="dark"] { --ink: #EDEBF7; --ink-soft: #A8A2C4; --paper: #17152B; --line: #2E2A4A; --white: #201C3B; --accent: #7C6EF2; --accent-hover: #695CDB; --accent-soft: #2A2650; --good: #3ED17E; --good-soft: #163524; --muted: #6E6890; --sidebar-bg: #100E20; --sidebar-field-bg: rgba(255,255,255,0.05); --sidebar-field-border: rgba(255,255,255,0.1); --table-head-bg: #1B1834; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--font-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; transition: background-color 0.15s ease, color 0.15s ease; } .hidden { display: none !important; } button, input { font-family: inherit; } /* ============ AUTH SCREEN ============ */ .auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ink); background-image: radial-gradient(circle at 18% 20%, #322B5C 0%, var(--ink) 55%); padding: 24px; } .auth-card { width: 100%; max-width: 380px; background: var(--white); border-radius: 16px; padding: 36px 32px; box-shadow: 0 24px 60px rgba(15, 12, 41, 0.35); } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .auth-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; } .auth-brand h1 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; color: var(--ink); } .auth-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 22px 0; line-height: 1.5; } /* ============ SHARED: TABS, FORMS, BUTTONS ============ */ .tabs { display: flex; gap: 4px; background: var(--paper); border-radius: 8px; padding: 3px; margin-bottom: 18px; } .tab { flex: 1; border: none; background: transparent; padding: 9px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink-soft); } .tab.active { background: var(--white); font-weight: 600; color: var(--accent); box-shadow: 0 1px 3px rgba(33, 29, 61, 0.12); } label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; font-weight: 500; } input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 9px 10px; margin-top: 5px; border: 1px solid var(--line); border-radius: 7px; font-size: 13.5px; color: var(--ink); background: var(--white); } input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .btn-primary { width: 100%; padding: 10px; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-secondary { padding: 8px 14px; background: var(--accent-soft); color: var(--accent); border: none; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .btn-secondary:hover { filter: brightness(0.96); } .btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-link { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; } .btn-ghost-sm { background: none; border: 1px solid var(--line); color: var(--ink-soft); font-size: 11.5px; padding: 5px 10px; border-radius: 6px; cursor: pointer; } .btn-ghost-sm:hover { border-color: var(--ink-soft); color: var(--ink); } .btn-icon { background: none; border: 1px solid var(--sidebar-field-border); color: rgba(255,255,255,0.75); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; } .btn-icon:hover { border-color: rgba(255,255,255,0.4); color: white; } .message { font-size: 12px; color: var(--danger); min-height: 16px; margin: 10px 0 0 0; } .forgot-link { display: block; text-align: center; margin-top: 12px !important; width: 100%; } .policy-footer { display: flex; justify-content: center; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .policy-footer a { font-size: 11.5px; color: var(--ink-soft); text-decoration: none; } .policy-footer a:hover { color: var(--accent); text-decoration: underline; } /* ============ APP SHELL ============ */ .app-shell { display: grid; grid-template-columns: 300px 1fr; min-height: 100vh; } /* ============ SIDEBAR ============ */ .sidebar { background: var(--sidebar-bg); color: white; padding: 22px 20px; display: flex; flex-direction: column; overflow-y: auto; } .sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .sidebar-top-actions { display: flex; align-items: center; gap: 8px; } .brand { display: flex; align-items: center; gap: 9px; } .brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; } .sidebar .btn-ghost-sm { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); } .sidebar .btn-ghost-sm:hover { border-color: rgba(255,255,255,0.4); color: white; } .credits-badge { font-size: 11px; color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.08); border-radius: 20px; padding: 4px 10px; display: inline-block; margin-bottom: 10px; width: fit-content; } .btn-upgrade { width: 100%; padding: 9px; background: linear-gradient(135deg, #F5A623, #F76B1C); color: white; border: none; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; margin-bottom: 22px; } .btn-upgrade:hover { filter: brightness(1.05); } .btn-upgrade:disabled { opacity: 0.6; cursor: not-allowed; } .add-site { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 16px; margin-bottom: 24px; } .add-site h2 { font-family: var(--font-display); font-size: 13px; font-weight: 600; margin: 0 0 14px 0; color: rgba(255,255,255,0.9); } .add-site label { color: rgba(255,255,255,0.55); } .add-site input { background: var(--sidebar-field-bg); border-color: var(--sidebar-field-border); color: white; } .add-site input::placeholder { color: rgba(255,255,255,0.35); } .add-site input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 110, 242, 0.3); } .field-row { display: flex; gap: 8px; } .field-row label { flex: 1; } .site-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .site-list-head h2 { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55); margin: 0; } .site-list-head .btn-link { color: rgba(255,255,255,0.55); font-size: 11px; } .site-list-head .btn-link:hover { color: white; } .site-search { margin-bottom: 10px !important; background: var(--sidebar-field-bg); border-color: var(--sidebar-field-border); color: white; font-size: 12.5px !important; padding: 7px 10px !important; } .site-search::placeholder { color: rgba(255,255,255,0.35); } .site-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 110, 242, 0.3); } .site-list { list-style: none; margin: 0; padding: 0; flex: 1; } .site-item { padding: 10px 11px; border-radius: 8px; cursor: pointer; margin-bottom: 3px; } .site-item:hover { background: rgba(255,255,255,0.06); } .site-item.active { background: var(--accent); } .site-item-url { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-item-niche { display: block; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-item.active .site-item-niche { color: rgba(255,255,255,0.75); } .site-list-empty { font-size: 12px; color: rgba(255,255,255,0.4); padding: 6px 2px; } .sidebar .message { color: #FFB4C0; } /* ============ MAIN ============ */ .main { padding: 36px 44px; overflow-y: auto; position: relative; } .empty-state { max-width: 380px; margin-top: 90px; } .empty-mark { display: inline-block; font-size: 22px; color: var(--muted); margin-bottom: 10px; } .empty-state h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px 0; } .empty-state p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin: 0; } .loading { color: var(--accent); font-size: 14px; font-weight: 500; margin-top: 90px; } /* ============ REPORT VIEW ============ */ .report-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; gap: 20px; } .report-header h1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 0 0 4px 0; word-break: break-word; } .report-niche { font-size: 13px; color: var(--ink-soft); } #btn-rank-check { width: auto; padding: 10px 18px; white-space: nowrap; } .stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; } .stat { background: var(--white); padding: 16px 18px; } .stat-num { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); } .stat-good { color: var(--good); } .stat-muted { color: var(--muted); } .stat-label { font-size: 11.5px; color: var(--ink-soft); } /* ============ PANEL SECTIONS (history + GSC) ============ */ .panel-section { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; } .panel-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; } .panel-section-head h2 { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; margin: 0; } .panel-hint { font-size: 12px; color: var(--ink-soft); margin: 0; } .panel-empty { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0; } /* ---- history chart ---- */ .history-chart-wrap { position: relative; } .history-chart { width: 100%; height: 140px; display: block; } .history-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .history-area { fill: var(--accent); opacity: 0.08; } .history-dot { fill: var(--accent); } .history-axis-label { font-family: var(--font-body); font-size: 9px; fill: var(--ink-soft); } /* ---- GSC table shares .table-wrap / table styles below ---- */ /* ============ TABLE ============ */ .table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { text-align: left; padding: 12px 16px; font-size: 11px; color: var(--ink-soft); font-weight: 600; border-bottom: 1px solid var(--line); background: var(--table-head-bg); } td { padding: 12px 16px; border-bottom: 1px solid var(--line); } tr:last-child td { border-bottom: none; } .kw-type { font-size: 11.5px; color: var(--ink-soft); text-transform: capitalize; } .pos-good { color: var(--good); font-weight: 700; } .pos-bad { color: var(--muted); } .mini-btn { background: var(--accent-soft); color: var(--accent); border: none; border-radius: 6px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; cursor: pointer; } .mini-btn:hover { filter: brightness(0.96); } /* ============ RECOMMENDATION PANEL ============ */ .rec-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; background: var(--white); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(33, 29, 61, 0.08); display: flex; flex-direction: column; z-index: 20; } .rec-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); } #recommendation-keyword { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; } .rec-body { padding: 20px; overflow-y: auto; } .rec-block { margin-bottom: 20px; } .rec-block h3 { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px 0; } .rec-block p { font-size: 13.5px; line-height: 1.6; margin: 0; color: var(--ink); } /* ============ RESPONSIVE ============ */ @media (max-width: 880px) { .app-shell { grid-template-columns: 1fr; } .sidebar { max-height: 45vh; } .main { padding: 24px; } .stat-row { grid-template-columns: repeat(2, 1fr); } .rec-panel { width: 100%; } .panel-section-head { flex-direction: column; align-items: flex-start; } } /* ============ ACCESSIBILITY ============ */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }