/* === Reset === */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f172a;color:#e2e8f0;line-height:1.5}
a{color:#4A9EF5;text-decoration:none}
a:hover{color:#60b0ff;text-decoration:underline}

/* === Login === */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%)}
.login-container{width:100%;max-width:400px;padding:20px}
.login-box{background:#1e293b;padding:40px;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.4);text-align:center}
.login-box h1{color:#4A9EF5;margin-bottom:8px;font-size:26px}
.login-box p{color:#94a3b8;margin-bottom:24px}
.login-box input{width:100%;padding:12px 16px;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#fff;font-size:16px;margin-bottom:16px;outline:none;transition:border .2s}
.login-box input:focus{border-color:#4A9EF5}
.login-box button{width:100%;padding:12px;background:#4A9EF5;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:background .2s}
.login-box button:hover{background:#2563eb}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;background:#fff;color:#333;border-radius:8px;font-size:16px;font-weight:500;transition:background .2s}
.btn-google:hover{background:#f1f5f9;text-decoration:none}
.link-muted{display:block;margin-top:16px;color:#64748b;font-size:14px}

/* === Alerts === */
.alert{padding:10px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}
.alert-error{background:#7f1d1d;color:#fca5a5}

/* === Dashboard layout === */
.dashboard,.detail-page{max-width:1440px;margin:0 auto;padding:20px 24px}

/* === Header === */
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #1e293b;flex-wrap:wrap;gap:12px}
.header-left{display:flex;align-items:center;gap:14px}
.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-header h1{font-size:24px;font-weight:700;color:#f1f5f9}
.site-count{background:#1e293b;color:#94a3b8;padding:2px 10px;border-radius:12px;font-size:13px}
.last-updated{color:#64748b;font-size:12px}
.back-link{color:#4A9EF5;font-weight:500;white-space:nowrap}

/* === Buttons === */
.btn-sm{padding:6px 14px;background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s;text-decoration:none;display:inline-block;white-space:nowrap}
.btn-sm:hover{background:#334155;text-decoration:none}
.btn-muted{color:#64748b}
.btn-icon{font-size:18px;text-decoration:none;padding:4px}
.btn-danger{border-color:#7f1d1d;color:#fca5a5}
.btn-danger:hover{background:#7f1d1d}

/* === Summary bar === */
.summary-bar{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.summary-item{background:#1e293b;border-radius:10px;padding:14px 20px;flex:1;min-width:140px;text-align:center}
.summary-value{font-size:22px;font-weight:700;color:#4A9EF5}
.summary-label{font-size:12px;color:#64748b;text-transform:uppercase;margin-top:2px}

/* === Type tabs === */
.type-tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;justify-content:center;padding:12px 0;background:#1e293b;border-radius:10px}
.type-tab{padding:10px 20px;background:#0f172a;color:#94a3b8;border:1px solid #334155;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;white-space:nowrap}
.type-tab:hover{background:#1e293b;color:#e2e8f0;border-color:#4A9EF5}
.type-tab.active{background:#4A9EF5;color:#fff;border-color:#4A9EF5}

/* === Controls === */
.controls{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;align-items:center}
.controls select,.search-input{padding:8px 12px;background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:6px;font-size:14px;outline:none;transition:border .2s}
.controls select:focus,.search-input:focus{border-color:#4A9EF5}
.search-input{flex:1;min-width:180px;max-width:320px}

/* === Grid === */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid{grid-template-columns:1fr}}

/* === Card === */
.card{background:#1e293b;border-radius:12px;padding:18px;box-shadow:0 2px 12px rgba(0,0,0,.2);transition:transform .2s,box-shadow .2s;opacity:0;animation:cardIn .4s ease forwards}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}
.card-enter{transform:translateY(12px)}

.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.favicon{width:24px;height:24px;border-radius:4px}
.card-domain{flex:1;font-size:15px;font-weight:600;color:#f1f5f9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-domain:hover{color:#4A9EF5;text-decoration:none}
.fav-btn{background:none;border:none;font-size:18px;color:#475569;cursor:pointer;transition:color .2s;padding:2px}
.fav-btn.active{color:#fbbf24}
.fav-btn:hover{color:#fbbf24}

/* Metrics row */
.metrics-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.metric{text-align:center}
.m-val{font-size:22px;font-weight:700;color:#f1f5f9}
.m-label{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.5px}
.m-delta{font-size:12px;font-weight:500;margin-top:2px}
.m-delta.up{color:#22c55e}
.m-delta.down{color:#ef4444}
.m-abs{color:#64748b;font-size:11px;margin-left:4px}

.sparkline-wrap{height:55px}
.sparkline-wrap canvas{width:100%!important}

/* Skeleton loading */
.skeleton-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.sk-block{height:60px;background:linear-gradient(90deg,#1e293b 25%,#283548 50%,#1e293b 75%);background-size:200%;border-radius:8px;animation:shimmer 1.5s infinite}
.sk-chart{height:55px;background:linear-gradient(90deg,#1e293b 25%,#283548 50%,#1e293b 75%);background-size:200%;border-radius:8px;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.card-error{color:#fca5a5;font-size:13px;padding:10px 0;text-align:center}

/* === Detail: overview cards === */
.overview-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:680px){.overview-cards{grid-template-columns:repeat(2,1fr)}}
.ov-card{background:#1e293b;border-radius:10px;padding:18px;text-align:center}
.ov-val{font-size:26px;font-weight:700;color:#4A9EF5}
.ov-label{font-size:12px;color:#64748b;text-transform:uppercase;margin-top:4px}

/* === Chart box === */
.chart-box{background:#1e293b;border-radius:12px;padding:20px;margin-bottom:24px;height:320px}
.chart-box canvas{width:100%!important;height:100%!important}

/* === Tabs === */
.tabs-section{background:#1e293b;border-radius:12px;overflow:hidden}
.tabs-bar{display:flex;align-items:center;border-bottom:1px solid #334155;padding:0 16px;gap:0;flex-wrap:wrap}
.tab{padding:14px 20px;color:#64748b;font-weight:500;font-size:15px;border-bottom:2px solid transparent;transition:all .2s}
.tab:hover{color:#e2e8f0;text-decoration:none}
.tab.active{color:#4A9EF5;border-bottom-color:#4A9EF5}
.tabs-right{margin-left:auto;display:flex;align-items:center;gap:10px;padding:8px 0}
.tab-search input{padding:6px 10px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:13px;width:180px;outline:none}
.tab-search input:focus{border-color:#4A9EF5}

/* === Data table === */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th{background:#0f172a;padding:10px 14px;text-align:left;font-weight:600;color:#94a3b8;font-size:13px;border-bottom:1px solid #334155;white-space:nowrap;user-select:none}
.data-table th a{color:#94a3b8;text-decoration:none}
.data-table th a:hover{color:#e2e8f0}
.data-table td{padding:10px 14px;border-bottom:1px solid #1e293b;font-size:14px}
.data-table tbody tr{transition:background .15s}
.data-table tbody tr:hover{background:#253348}
.cell-key{max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-key a{color:#4A9EF5}
.sort-arrow{font-size:12px;opacity:.4;margin-left:4px}
.sort-arrow.active{opacity:1;color:#4A9EF5}

/* === Pagination === */
.pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px}

/* === Settings === */
.settings-section{background:#1e293b;border-radius:12px;padding:24px;margin-bottom:20px}
.settings-section h2{font-size:18px;font-weight:600;margin-bottom:16px;color:#f1f5f9}
.account-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #334155}
.account-row:last-child{border-bottom:none}
.account-info{display:flex;flex-direction:column;gap:4px}
.account-info strong{color:#f1f5f9}
.badge{font-size:11px;padding:2px 8px;border-radius:10px;display:inline-block;width:fit-content}
.badge-ok{background:#14532d;color:#4ade80}
.badge-warning{background:#713f12;color:#fbbf24}

/* === Misc === */
.text-muted{color:#64748b;font-size:13px}
.empty-state{text-align:center;padding:60px 20px;color:#64748b}
.empty-state h2{color:#94a3b8;margin-bottom:8px}

/* === Responsive === */
@media(max-width:768px){
    .dash-header{flex-direction:column;align-items:flex-start}
    .header-right{width:100%;justify-content:flex-start}
    .controls{flex-direction:column}
    .search-input{max-width:100%}
    .summary-bar{flex-direction:column}
    .tabs-bar{flex-wrap:wrap}
    .tabs-right{margin-left:0;width:100%;padding:8px 0}
    .tab-search input{width:100%}
}

/* Archive button */
.archive-btn {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.2s;
    padding: 2px 4px;
    filter: grayscale(1);
}
.archive-btn:hover {
    opacity: 0.7;
}
.archive-btn.active {
    opacity: 0.8;
    filter: none;
}

/* Archived separator */
.archived-separator {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    margin: 10px 0;
    border-top: 1px solid #334155;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}
.archived-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #334155;
}

/* Archived cards */
.card-archived {
    opacity: 0.5;
    filter: saturate(0.4);
    transition: opacity 0.2s, filter 0.2s;
}
.card-archived:hover {
    opacity: 0.8;
    filter: saturate(0.7);
}


/* SEOGets-style card layout */
.card-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.card-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 1;
}
.card-head-right {
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}
.card-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.card-domain {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-domain:hover { color: #4A9EF5; }

/* Inline stats in header */
.stat-line {
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
}
.stat-icon { font-size: 11px; opacity: 0.6; }
.stat-val { font-weight: 600; color: #e2e8f0; }
.stat-pct { font-size: 12px; font-weight: 500; }
.stat-pct.up { color: #22c55e; }
.stat-pct.down { color: #ef4444; }
.sk-inline { width: 80px; height: 32px; background: #1e293b; border-radius: 4px; animation: shimmer 1.5s infinite; }

/* Big sparkline chart */
.sparkline-big { width: 100%; height: 90px; }
.sparkline-big canvas { width: 100% !important; }
.sk-chart-big { width: 100%; height: 90px; background: #1e293b; border-radius: 6px; animation: shimmer 1.5s infinite; }

/* Card footer */
.card-footer {
    font-size: 11px;
    color: #64748b;
    padding-top: 8px;
    border-top: 1px solid #1e293b;
    margin-top: 8px;
    min-height: 18px;
}
.ft-clicks { color: #4A9EF5; font-weight: 500; }
.ft-impr { color: #94a3b8; }
.ft-delta { color: #64748b; }

/* Reduce card padding for tighter layout */
.card { padding: 14px 16px; }

.card-muted {
    color: #475569;
    font-size: 12px;
    text-align: center;
    padding: 30px 10px;
    font-style: italic;
}

.loading-msg { grid-column: 1/-1; text-align: center; color: #64748b; padding: 40px; font-size: 16px; }

.archive-btn {
    font-size: 16px;
    font-weight: bold;
    filter: none;
    opacity: 0.3;
    color: #94a3b8;
}
.archive-btn.active {
    opacity: 0.8;
    color: #ef4444;
}
.archive-btn:hover {
    opacity: 0.7;
    color: #ef4444;
}