/* ============================================================
 *  RankSphere AI — Stylesheet
 * ============================================================ */
:root{--bg:#f4f6f8;--panel:#fff;--panel-2:#f8fafb;--text:#19231d;--muted:#728078;--line:#e5eae7;--green:#22a55d;--green-dark:#137841;--green-soft:#e9f8ef;--orange:#f59e42;--red:#e85d58;--shadow:0 1px 2px rgba(18,35,25,.04),0 8px 28px rgba(18,35,25,.04);--sidebar:#f7f9f8}
[data-theme="dark"]{--bg:#111714;--panel:#18201c;--panel-2:#1d2722;--text:#edf4ef;--muted:#90a298;--line:#2a3730;--green:#31c875;--green-dark:#45d985;--green-soft:#173a27;--shadow:0 8px 28px rgba(0,0,0,.2);--sidebar:#141c18}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;font-size:14px;transition:background .2s,color .2s}
a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}
.app{min-height:100vh;display:grid;grid-template-columns:246px 1fr}
.sidebar{position:fixed;inset:0 auto 0 0;width:246px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 14px 18px;z-index:20;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 10px 25px;font:800 18px 'Manrope',sans-serif;letter-spacing:-.6px;color:var(--text);text-decoration:none}
.logo{width:31px;height:31px;border-radius:9px;background:#183d2a;display:grid;place-items:center;color:#8ff0ae;position:relative;overflow:hidden;flex:0 0 auto}
.logo:before,.logo:after{content:"";position:absolute;border:2px solid currentColor;border-radius:50%}
.logo:before{width:17px;height:17px}.logo:after{width:7px;height:7px;background:currentColor}
.workspace{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:9px 10px;margin:0 3px 18px;display:flex;align-items:center;gap:9px}
.workspace-mark{width:28px;height:28px;border-radius:8px;background:#183d2a;color:#a1efb9;display:grid;place-items:center;font-weight:700}
.workspace-copy{min-width:0;flex:1}.workspace-copy b{display:block;font-size:12px}.workspace-copy span{font-size:10px;color:var(--muted)}.workspace i{width:14px}
.nav-label{font-size:9px;text-transform:uppercase;letter-spacing:1.4px;color:#9aa69f;font-weight:700;padding:0 12px;margin:5px 0 7px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;color:var(--muted);text-decoration:none;border-radius:8px;font-size:12px;font-weight:500;transition:.15s}
.nav-item i{width:16px;height:16px}
.nav-item:hover{background:var(--panel);color:var(--text)}
.nav-item.active{background:#e3f4e9;color:#176c3a;font-weight:700}
[data-theme="dark"] .nav-item.active{background:var(--green-soft);color:var(--green-dark)}
.nav-badge{margin-left:auto;background:#f2e9d6;color:#a36716;padding:2px 6px;border-radius:6px;font-size:9px}
.sidebar-bottom{margin-top:auto}
.upgrade{margin:10px 3px 14px;padding:12px;background:#173c29;color:#fff;border-radius:10px;position:relative;overflow:hidden}
.upgrade:after{content:"";position:absolute;width:70px;height:70px;border:12px solid rgba(255,255,255,.05);border-radius:50%;right:-29px;top:-30px}
.upgrade b{font-size:11px;display:block}.upgrade p{font-size:9px;color:#b9d8c5;line-height:1.45;margin:4px 0 9px}
.upgrade button{border:0;background:#fff;color:#173c29;border-radius:6px;padding:6px 9px;font-weight:700;font-size:9px}
.user{display:flex;align-items:center;gap:9px;padding:9px;text-decoration:none;color:inherit}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#ddf4e6,#8dd2a6);display:grid;place-items:center;color:#176c3a;font-weight:700}
.user-copy{flex:1;min-width:0}.user-copy b{display:block;font-size:11px}.user-copy span{font-size:9px;color:var(--muted)}
.main{grid-column:2;min-width:0}
.topbar{height:69px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;position:sticky;top:0;z-index:10}
.site-select{display:flex;align-items:center;gap:10px;position:relative}
.site-favicon{width:31px;height:31px;border-radius:8px;background:#e8f7ed;display:grid;place-items:center;color:#18814a;font-weight:800}
.site-copy b{font-size:12px;display:block}.site-copy span{font-size:10px;color:var(--muted)}
.site-dropdown{position:absolute;top:44px;left:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:220px;padding:6px;display:none;z-index:30}
.site-dropdown.open{display:block}
.site-dropdown a{display:block;padding:8px 10px;border-radius:7px;font-size:11px;text-decoration:none;color:var(--text)}
.site-dropdown a:hover{background:var(--panel-2)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);display:grid;place-items:center}.icon-btn i{width:15px}
.primary-btn{border:0;border-radius:8px;background:#1f9d58;color:#fff;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;font-size:11px;font-weight:700;text-decoration:none;box-shadow:0 4px 12px rgba(31,157,88,.18)}.primary-btn i{width:14px}
.content{padding:28px 30px 40px;max-width:1600px;margin:auto}
.page-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:23px;gap:15px;flex-wrap:wrap}
.page-head h1{font:700 23px 'Manrope',sans-serif;letter-spacing:-.7px;margin:0 0 4px}
.page-head p{margin:0;color:var(--muted);font-size:11px}
.range{display:flex;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:3px}
.range button{border:0;background:transparent;color:var(--muted);font-size:10px;padding:6px 9px;border-radius:6px}
.range button.active{background:var(--green-soft);color:var(--green-dark);font-weight:700}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow)}
.metric{padding:15px 16px;min-height:120px}
.metric-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:600}
.metric-icon{width:27px;height:27px;border-radius:7px;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center}.metric-icon i{width:13px}
.metric-value{font:700 25px 'Manrope',sans-serif;letter-spacing:-1px;margin-top:12px}
.metric-foot{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:9px;color:var(--muted)}
.delta{color:var(--green-dark);font-weight:700;background:var(--green-soft);padding:3px 5px;border-radius:5px}
.delta.warn{color:#b76b14;background:#fff3df}.delta.down{color:var(--red);background:#fdeceb}
.score-wrap{display:flex;align-items:center;gap:12px;margin-top:9px}
.score-ring{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;position:relative}
.score-ring:after{content:"";width:38px;height:38px;border-radius:50%;background:var(--panel)}
.score-ring b{position:absolute;z-index:1;font:700 14px 'Manrope'}
.score-copy strong{display:block;font-size:11px}.score-copy span{font-size:9px;color:var(--muted)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);gap:14px}
.panel-head{padding:15px 17px 12px;display:flex;align-items:center;justify-content:space-between}
.panel-head h2{font:700 13px 'Manrope';margin:0}.panel-head p{font-size:9px;color:var(--muted);margin:3px 0 0}
.panel-link{border:0;background:transparent;color:var(--green-dark);font-size:9px;font-weight:700;text-decoration:none}
.chart-card{min-height:280px}
.chart-summary{display:flex;gap:28px;padding:0 17px 5px}
.chart-summary b{display:block;font:700 17px 'Manrope'}.chart-summary span{font-size:9px;color:var(--muted)}
.chart{height:175px;padding:10px 16px 16px;position:relative}
.chart-grid{position:absolute;inset:10px 17px 27px 43px;display:flex;flex-direction:column;justify-content:space-between}
.gridline{border-top:1px dashed var(--line);position:relative}
.gridline span{position:absolute;right:calc(100% + 8px);top:-6px;font-size:8px;color:var(--muted)}
.chart svg{position:absolute;left:43px;right:17px;top:10px;width:calc(100% - 60px);height:138px;overflow:visible}
.axis{position:absolute;bottom:10px;left:43px;right:17px;display:flex;justify-content:space-between;color:var(--muted);font-size:8px}
.recommendations{grid-row:span 2}
.rec-list{padding:0 10px 11px}
.rec{display:flex;gap:10px;padding:11px 7px;border-top:1px solid var(--line)}
.rec-icon{flex:0 0 27px;height:27px;border-radius:7px;background:#edf8f1;color:#228250;display:grid;place-items:center}
.rec-icon.orange{background:#fff4e5;color:#d18125}.rec-icon.blue{background:#edf5fb;color:#4380a8}.rec-icon i{width:13px}
.rec-body{flex:1}.rec-body b{font-size:10px;display:block;margin-bottom:3px}.rec-body p{font-size:9px;line-height:1.4;color:var(--muted);margin:0}
.rec-meta{display:flex;align-items:center;gap:6px;margin-top:7px}
.impact{font-size:8px;background:var(--green-soft);color:var(--green-dark);padding:3px 5px;border-radius:4px}
.fix-btn{margin-left:auto;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:5px;padding:3px 7px;font-size:8px;font-weight:600}
.fix-btn.done{background:var(--green-soft);color:var(--green-dark);border-color:transparent}
.rankings,.activity-card{min-height:280px}
.ranking-table{width:100%;border-collapse:collapse}
.ranking-table th{text-align:left;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;padding:8px 17px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ranking-table td{padding:11px 17px;border-bottom:1px solid var(--line);font-size:9px}
.ranking-table tr:last-child td{border-bottom:0}
.keyword{font-weight:600}.keyword span{display:block;color:var(--muted);font-weight:400;margin-top:2px;font-size:8px}
.position{font-weight:700;font-size:11px}
.move{color:var(--green-dark);font-weight:700}.move.down{color:var(--red)}
.intent{padding:3px 5px;border-radius:4px;background:#edf5fb;color:#437393;font-size:8px}
.intent.commercial{background:#f4edfb;color:#7a51a3}.intent.transactional{background:#eaf7ee;color:#2f8a52}.intent.local{background:#fff3df;color:#a36716}
.activity-list{padding:0 16px}
.activity{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--green);margin-top:5px;box-shadow:0 0 0 4px var(--green-soft);flex:0 0 auto}
.activity-copy{flex:1}.activity-copy b{font-size:9px;display:block}.activity-copy p{font-size:8px;color:var(--muted);margin:3px 0}
.activity time{font-size:8px;color:var(--muted)}
/* Generic tables + forms */
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;padding:11px 17px;border-bottom:1px solid var(--line)}
.data-table td{padding:13px 17px;border-bottom:1px solid var(--line);font-size:11px}
.data-table tr:last-child td{border-bottom:0}
.pill{display:inline-block;font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--green-soft);color:var(--green-dark)}
.pill.gray{background:var(--panel-2);color:var(--muted)}.pill.warn{background:#fff3df;color:#a36716}
.form-card{max-width:560px}
.form-row{padding:0 20px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:10px;font-weight:600;color:var(--muted);margin-bottom:6px}
.form-control{width:100%;border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:8px;padding:10px 12px;font-size:12px;outline:none;transition:.15s}
.form-control:focus{border-color:var(--green);background:var(--panel)}
.form-actions{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--line);margin-top:8px}
.btn{border:0;border-radius:8px;padding:10px 16px;font-size:11px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.btn-primary{background:#1f9d58;color:#fff}.btn-ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
.alert{padding:11px 14px;border-radius:8px;font-size:11px;margin-bottom:16px}
.alert-error{background:#fdeceb;color:#c0392b}.alert-ok{background:var(--green-soft);color:var(--green-dark)}
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty i{width:34px;height:34px;color:var(--green);margin-bottom:10px}
.empty h3{margin:0 0 6px;font:700 15px 'Manrope';color:var(--text)}.empty p{margin:0 0 16px;font-size:11px}
/* Module pages */
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:14px}
.tool-grid.c3{grid-template-columns:repeat(3,1fr)}
.stat{padding:15px 16px}
.stat .s-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:600}
.stat .s-ico{width:27px;height:27px;border-radius:7px;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center}.stat .s-ico i{width:13px}
.stat b{display:block;font:700 24px 'Manrope';letter-spacing:-1px;margin-top:11px}
.stat small{font-size:9px;color:var(--muted)}
.bar{height:7px;border-radius:6px;background:var(--panel-2);overflow:hidden;margin-top:9px}
.bar>i{display:block;height:100%;background:var(--green);border-radius:6px}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:14px 17px}
.chip{font-size:10px;font-weight:600;padding:6px 11px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);color:var(--text)}
.chip b{color:var(--green-dark);margin-left:5px}
.pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;padding:15px}
.pipe-col{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:12px;min-height:120px}
.pipe-col h4{font:700 11px 'Manrope';margin:0 0 10px;display:flex;justify-content:space-between}
.pipe-col h4 span{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:1px 8px;font-size:9px;color:var(--muted)}
.pipe-item{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin-bottom:8px;font-size:10px}
.pipe-item span{display:block;color:var(--muted);font-size:8px;margin-top:3px}
.audit-row{display:flex;align-items:center;gap:12px;padding:12px 17px;border-bottom:1px solid var(--line)}
.audit-row:last-child{border-bottom:0}
.audit-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}
.audit-ico.ok{background:var(--green-soft);color:var(--green-dark)}.audit-ico.warn{background:#fff3df;color:#a36716}.audit-ico.err{background:#fdeceb;color:#c0392b}
.audit-ico i{width:14px}
.audit-copy{flex:1}.audit-copy b{font-size:11px}.audit-copy p{font-size:9px;color:var(--muted);margin:2px 0 0}
.audit-status{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px}
.audit-status.ok{background:var(--green-soft);color:var(--green-dark)}.audit-status.warn{background:#fff3df;color:#a36716}.audit-status.err{background:#fdeceb;color:#c0392b}
.seg{display:flex;height:26px;border-radius:8px;overflow:hidden;margin:14px 17px}
.seg>i{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}
.integration{display:flex;align-items:center;gap:12px;padding:14px 17px;border-bottom:1px solid var(--line)}
.integration:last-child{border-bottom:0}
.int-logo{width:34px;height:34px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--green-dark);font-weight:800;flex:0 0 auto}
.int-copy{flex:1}.int-copy b{font-size:12px}.int-copy p{font-size:9px;color:var(--muted);margin:2px 0 0}
.toggle-btn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px;padding:6px 12px;font-size:10px;font-weight:700}
.toggle-btn.on{background:var(--green-soft);color:var(--green-dark);border-color:transparent}
@media(max-width:1100px){.tool-grid,.tool-grid.c3{grid-template-columns:repeat(2,1fr)}.pipeline{grid-template-columns:1fr}}
@media(max-width:600px){.tool-grid,.tool-grid.c3{grid-template-columns:1fr}}
/* Assistant */
.assistant{position:fixed;right:26px;bottom:24px;z-index:30}
.assistant-btn{height:43px;border:0;border-radius:22px;background:#173c29;color:#fff;padding:0 17px;display:flex;align-items:center;gap:9px;box-shadow:0 10px 30px rgba(10,45,27,.25);font-size:11px;font-weight:700}.assistant-btn i{width:16px;color:#8ce9a9}
.assistant-panel{position:absolute;right:0;bottom:53px;width:330px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(12,30,20,.2);overflow:hidden;display:none}
.assistant-panel.open{display:block;animation:up .2s ease}
.assistant-head{background:#173c29;color:#fff;padding:15px;display:flex;align-items:center;gap:10px}
.assistant-head .spark{width:31px;height:31px;border-radius:9px;background:#29583c;display:grid;place-items:center}
.assistant-head b{display:block;font-size:12px}.assistant-head span{font-size:9px;color:#b8d3c2}
.assistant-body{padding:15px}
.bubble{background:var(--panel-2);padding:10px;border-radius:8px 8px 8px 2px;font-size:10px;line-height:1.5}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.quick button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px;padding:7px;text-align:left;font-size:8px}
.chat-input{display:flex;gap:7px;padding:10px;border-top:1px solid var(--line)}
.chat-input input{flex:1;border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:7px;padding:8px 9px;font-size:9px;outline:none}
.chat-input button{border:0;border-radius:7px;width:31px;background:var(--green);color:#fff;display:grid;place-items:center}
.mobile-toggle{display:none}
.toast{position:fixed;top:82px;right:28px;background:#173c29;color:#fff;border-radius:9px;padding:10px 14px;font-size:10px;box-shadow:var(--shadow);transform:translateY(-20px);opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{transform:translateY(0);opacity:1}
.proc{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);width:340px;max-width:calc(100vw - 30px);background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:0 20px 50px rgba(12,30,20,.22);padding:15px 16px;opacity:0;pointer-events:none;transition:.28s cubic-bezier(.2,.8,.2,1);z-index:70}
.proc.show{opacity:1;transform:translateX(-50%) translateY(0)}
.proc-top{display:flex;align-items:center;justify-content:space-between;font:700 12px 'Manrope';margin-bottom:10px}
.proc-eta{color:var(--muted);font-size:10px;font-weight:600}
.proc-bar{height:8px;border-radius:6px;background:var(--panel-2);overflow:hidden}
.proc-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22a55d,#31c875);border-radius:6px;transition:width .18s linear}
.proc-sub{font-size:9px;color:var(--muted);margin-top:9px}
.proc.done .proc-bar>i{background:var(--green-dark)}
.proc.done .proc-eta{color:var(--green-dark)}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Auth screens */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-aside{background:#132e20;color:#fff;padding:52px 48px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-aside:after{content:"";position:absolute;width:360px;height:360px;border:60px solid rgba(255,255,255,.04);border-radius:50%;right:-160px;bottom:-140px}
.auth-aside .brand{color:#fff;padding:0;margin-bottom:auto}
.auth-aside h2{font:800 30px 'Manrope';letter-spacing:-1px;line-height:1.2;margin:0 0 16px;max-width:420px}
.auth-aside p{color:#bcd7c8;font-size:13px;line-height:1.6;max-width:400px}
.auth-points{list-style:none;padding:0;margin:26px 0 0}
.auth-points li{display:flex;gap:10px;align-items:center;font-size:12px;color:#d7ebe0;margin-bottom:12px}
.auth-points i{width:16px;color:#7fe4a2}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-card{width:100%;max-width:380px}
.auth-card h1{font:800 24px 'Manrope';letter-spacing:-.6px;margin:0 0 6px}
.auth-card .sub{color:var(--muted);font-size:12px;margin:0 0 26px}
.auth-card .switch{margin-top:20px;font-size:12px;color:var(--muted);text-align:center}
.auth-card .switch a{color:var(--green-dark);font-weight:700;text-decoration:none}
.auth-btn{width:100%;justify-content:center;margin-top:6px}
.demo-note{margin-top:18px;padding:11px 13px;background:var(--panel-2);border:1px dashed var(--line);border-radius:9px;font-size:10px;color:var(--muted);line-height:1.5}
.demo-note b{color:var(--text)}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}.auth-aside{display:none}}
@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.recommendations{grid-row:auto}.app{grid-template-columns:210px 1fr}.sidebar{width:210px}}
@media(max-width:760px){.app{display:block}.sidebar{transform:translateX(-100%);transition:.25s;width:246px}.sidebar.open{transform:none;box-shadow:15px 0 40px rgba(0,0,0,.15)}.main{grid-column:auto}.mobile-toggle{display:grid}.topbar{padding:0 15px;gap:10px}.content{padding:20px 15px 90px}.primary-btn span{display:none}.metrics{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:13px;min-height:112px}.metric-value{font-size:21px}.dashboard-grid{display:block}.dashboard-grid>.card{margin-bottom:10px}.chart-summary{gap:15px}.assistant{right:15px;bottom:15px}.assistant-panel{position:fixed;left:12px;right:12px;bottom:68px;width:auto}.site-copy{display:none}}
@media(max-width:430px){.metrics{grid-template-columns:1fr}.welcome{display:block}.ranking-table th:nth-child(4),.ranking-table td:nth-child(4){display:none}}