/* main.css — all <style> blocks from speed.html (session 12) */


:root { --bg:#f5f3ef; --bg2:#eae6df; --bg3:#fff; --text:#1a1a1a; --text2:#666; --text3:#888; --accent:#7A8F54; --accent2:#5a6e3e; --accent3:#B8924D; --border:#ddd; --card-shadow:0 2px 12px rgba(0,0,0,.06); }
html.dark { --bg:#0c0c0e; --bg2:#151518; --bg3:#1c1c21; --text:#e8e6e1; --text2:#a0a0a0; --text3:#666; --border:#2a2a2e; --card-shadow:0 2px 12px rgba(0,0,0,.3); }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 14px/1.5 Manrope, -apple-system, Segoe UI, Arial, sans-serif; background: var(--bg); color: var(--text); }
.wm-page { max-width: 1300px; margin: 0 auto; padding: 24px 20px; }
.wm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 14px; }
.wm-head h1 { font-family:'Playfair Display',Georgia,serif; font-weight: 500; font-size: 26px; }
.wm-head-right { display: flex; align-items: center; gap: 10px; }
.wm-connect-btn { padding: 8px 16px; background: var(--accent); color: #fff; border: none; border-radius: 8px; cursor: pointer; font: 600 13px Manrope,sans-serif; display:flex;align-items:center;gap:6px; transition: background .15s; }
.wm-connect-btn:hover { background: var(--accent2); }
.wm-connect-btn svg { width:14px;height:14px; }
.wm-status { font-size: 12px; color: var(--text3); }
.wm-status.connected { color: var(--accent); }
.wm-tabs { display:flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.wm-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg3); color: var(--text2); cursor: pointer; font-size: 13px; font-weight: 500; transition: all .15s; font-family: inherit; }
.wm-tab:hover { color: var(--accent); border-color: var(--accent); }
.wm-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Totals grid */
.wm-totals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 24px; }
.wm-total { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.wm-total-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-bottom: 6px; font-weight: 700; }
.wm-total-value { font: 700 22px Manrope, sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.wm-total-sub { font-size: 11px; color: var(--text3); margin-top: 3px; }
.wm-total-trend { font-size: 11px; margin-top: 4px; font-weight: 600; }
.wm-total-trend.up { color: #16a34a; }
.wm-total-trend.down { color: #dc2626; }
.wm-total-trend.neutral { color: var(--text3); }

/* Sections */
.wm-section { margin-bottom: 24px; }
.wm-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 12px; display:flex;align-items:center;gap:8px; }
.wm-section-title svg { width:15px;height:15px;stroke:var(--accent); }

/* Table */
.wm-table-wrap { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wm-table th { padding: 10px 14px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); border-bottom: 1px solid var(--border); font-weight: 700; background: var(--bg2); }
.wm-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.wm-table tr:last-child td { border-bottom: none; }
.wm-table tr:hover td { background: var(--bg2); }
.wm-pos-badge { display:inline-flex;align-items:center;justify-content:center; width:32px;height:24px; border-radius:5px; font:700 12px Manrope,sans-serif; font-variant-numeric: tabular-nums; }
.pos-top3 { background:#dcfce7;color:#166534; }
.pos-top10 { background:#e0f2fe;color:#075985; }
.pos-top30 { background:#fef9c3;color:#854d0e; }
.pos-low { background:var(--bg2);color:var(--text3); }
.wm-delta { font-size:11px;font-weight:700; }
.wm-delta.up { color:#16a34a; }
.wm-delta.down { color:#dc2626; }
.wm-delta.eq { color:var(--text3); }
.wm-url { color:var(--accent);font-size:12px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.wm-keyword { font-weight:600;color:var(--text); }

/* Cards 2-col */
.wm-cards2 { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px; }
.wm-card { background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:18px 20px; }
.wm-card-title { font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:700;margin-bottom:14px; }
.wm-bar-item { display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px; }
.wm-bar-label { width:110px;flex-shrink:0;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.wm-bar-track { flex:1;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden; }
.wm-bar-fill { height:100%;background:var(--accent);border-radius:4px;transition:width .4s; }
.wm-bar-val { width:50px;text-align:right;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums; }

/* Errors */
.wm-error-item { display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border); }
.wm-error-item:last-child { border-bottom:none; }
.wm-error-icon { width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.wm-error-icon.err { background:#fee2e2; }
.wm-error-icon.warn { background:#fef3c7; }
.wm-error-icon.ok { background:#dcfce7; }
.wm-error-icon.info { background:#e0f2fe; }
.wm-error-icon svg { width:16px;height:16px; }
.wm-error-icon.err svg { stroke:#dc2626; }
.wm-error-icon.warn svg { stroke:#d97706; }
.wm-error-icon.ok svg { stroke:#16a34a; }
.wm-error-icon.info svg { stroke:#0284c7; }
.wm-error-text { flex:1;font-size:13px;color:var(--text); }
.wm-error-text b { display:block;font-weight:600;margin-bottom:2px; }
.wm-error-text span { color:var(--text3);font-size:12px; }
.wm-error-count { font:700 14px Manrope,sans-serif;color:var(--text);font-variant-numeric:tabular-nums; }

/* Connect banner */
.wm-connect-banner { background:var(--bg3);border:2px dashed var(--border);border-radius:12px;padding:40px;text-align:center; }
.wm-connect-banner h3 { font-family:'Playfair Display',serif;font-size:20px;font-weight:500;margin-bottom:10px; }
.wm-connect-banner p { color:var(--text2);font-size:14px;max-width:480px;margin:0 auto 20px; }
.wm-api-form { display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto; }
.wm-api-input { padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text);font:14px Manrope,sans-serif;width:100%; }
.wm-api-input:focus { outline:none;border-color:var(--accent); }
.wm-api-submit { padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font:600 14px Manrope,sans-serif;transition:background .15s; }
.wm-api-submit:hover { background:var(--accent2); }

/* Loading */
.wm-loading { text-align:center;padding:60px;color:var(--text3);font-size:14px; }
.wm-spinner { width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 14px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Search input */
.wm-search { padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);color:var(--text);font:14px Manrope,sans-serif;width:220px; }
.wm-search:focus { outline:none;border-color:var(--accent); }

.wm-section-toolbar { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px; }

@media(max-width:900px){
  .wm-totals { grid-template-columns:repeat(3,1fr); }
  .wm-cards2 { grid-template-columns:1fr; }
}
@media(max-width:600px){
  .wm-totals { grid-template-columns:repeat(2,1fr); }
  .wm-url { max-width:160px; }
}

/* ── АНИМАЦИИ ── */
@keyframes wmFadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes wmPop {
  0%   { opacity:0; transform:scale(.88); }
  60%  { transform:scale(1.04); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes wmSlide {
  from { opacity:0; transform:translateX(-14px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes wmCount {
  from { opacity:0; transform:translateY(8px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes wmBarGrow {
  from { width:0 !important; }
}
.wm-total {
  animation: wmPop .4s ease both;
}
.wm-total:nth-child(1) { animation-delay:.04s; }
.wm-total:nth-child(2) { animation-delay:.09s; }
.wm-total:nth-child(3) { animation-delay:.14s; }
.wm-total:nth-child(4) { animation-delay:.19s; }
.wm-total:nth-child(5) { animation-delay:.24s; }
.wm-total:nth-child(6) { animation-delay:.29s; }
.wm-total-value {
  animation: wmCount .5s ease both;
  animation-delay: .3s;
  opacity: 0;
  animation-fill-mode: both;
}
.wm-table-wrap {
  animation: wmFadeUp .45s ease both;
  animation-delay: .15s;
}
.wm-tabs {
  animation: wmFadeUp .35s ease both;
}
.wm-totals {
  animation: wmFadeUp .3s ease both;
}
.wm-section-toolbar {
  animation: wmSlide .35s ease both;
}
.wm-card {
  animation: wmFadeUp .45s ease both;
}
.wm-card:nth-child(2) { animation-delay:.1s; }
.wm-bar-fill {
  animation: wmBarGrow .7s cubic-bezier(.4,0,.2,1) both;
  animation-delay: .3s;
}
.wm-error-item {
  animation: wmSlide .3s ease both;
}
.wm-error-item:nth-child(1) { animation-delay:.05s; }
.wm-error-item:nth-child(2) { animation-delay:.10s; }
.wm-error-item:nth-child(3) { animation-delay:.15s; }
.wm-error-item:nth-child(4) { animation-delay:.20s; }
.wm-error-item:nth-child(5) { animation-delay:.25s; }
.wm-connect-banner {
  animation: wmFadeUp .5s ease both;
}
/* Строки таблицы */
.wm-table tbody tr {
  animation: wmSlide .28s ease both;
}
.wm-table tbody tr:nth-child(1)  { animation-delay:.05s; }
.wm-table tbody tr:nth-child(2)  { animation-delay:.08s; }
.wm-table tbody tr:nth-child(3)  { animation-delay:.11s; }
.wm-table tbody tr:nth-child(4)  { animation-delay:.14s; }
.wm-table tbody tr:nth-child(5)  { animation-delay:.17s; }
.wm-table tbody tr:nth-child(6)  { animation-delay:.20s; }
.wm-table tbody tr:nth-child(7)  { animation-delay:.23s; }
.wm-table tbody tr:nth-child(8)  { animation-delay:.26s; }
.wm-table tbody tr:nth-child(9)  { animation-delay:.29s; }
.wm-table tbody tr:nth-child(10) { animation-delay:.32s; }
.wm-table tbody tr:nth-child(n+11){ animation-delay:.34s; }
/* Ховер-эффект на тоталы */
.wm-total { transition: transform .18s ease, box-shadow .18s ease; }
.wm-total:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 6px 20px rgba(0,0,0,.1); }

/* speed-specific */
.sp-tabs { display: flex; gap: 8px; background: var(--bg2); padding: 6px; border-radius: 12px; margin-bottom: 24px; max-width: 360px; }
.sp-tab { flex: 1; padding: 10px 16px; border: none; background: transparent; color: var(--text2); font: 600 13px Manrope, sans-serif; border-radius: 8px; cursor: pointer; transition: all .2s; }
.sp-tab.active { background: var(--bg3); color: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.sp-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 880px) { .sp-grid4 { grid-template-columns: repeat(2, 1fr); } }
.sp-score-card { background: var(--bg3); border-radius: 12px; padding: 20px; text-align: center; box-shadow: var(--card-shadow); }
.sp-score-gauge { position: relative; width: 110px; height: 110px; margin: 0 auto 10px; }
.sp-score-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sp-score-gauge circle { fill: none; stroke-width: 8; }
.sp-score-gauge .bg { stroke: var(--bg2); }
.sp-score-gauge .fg { stroke-linecap: round; transition: stroke-dashoffset 1.4s ease; }
.sp-score-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 32px Manrope; }
.sp-score-label { font-size: 13px; color: var(--text2); font-weight: 600; }
.sp-card { background: var(--bg3); border-radius: 12px; padding: 20px; box-shadow: var(--card-shadow); margin-bottom: 18px; }
.sp-card h3 { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 20px; margin-bottom: 16px; }
.sp-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .sp-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
.sp-metric { background: var(--bg2); padding: 14px; border-radius: 10px; text-align: center; }
.sp-metric-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 4px; cursor: help; }
.sp-metric-val { font: 700 22px Manrope; }
.sp-metric-val.good { color: #2e7d32; }
.sp-metric-val.warn { color: #d97706; }
.sp-metric-val.bad { color: #c62828; }
.sp-metric-explain { font-size: 11px; color: var(--text3); margin-top: 4px; line-height: 1.3; }
.sp-issue { display: flex; gap: 14px; padding: 14px 16px; background: var(--bg2); border-radius: 10px; margin-bottom: 8px; align-items: flex-start; }
.sp-issue-savings { flex-shrink: 0; min-width: 90px; text-align: right; font: 700 13px Manrope; color: var(--accent2); }
.sp-issue-body { flex: 1; min-width: 0; }
.sp-issue-title { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.sp-issue-desc { color: var(--text2); font-size: 12px; line-height: 1.5; }
.sp-screenshot { max-width: 100%; max-height: 320px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.sp-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sp-resource { background: var(--bg2); padding: 10px 14px; border-radius: 8px; }
.sp-resource-name { font-size: 11px; color: var(--text3); text-transform: uppercase; font-weight: 700; }
.sp-resource-val { font: 700 18px Manrope; margin-top: 2px; }
.sp-resource-sub { font-size: 11px; color: var(--text2); }
.sp-loading { text-align: center; padding: 60px 20px; color: var(--text2); font-size: 14px; }
.sp-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--bg2); border-top-color: var(--accent); border-radius: 50%; animation: sp-spin 1s linear infinite; margin-bottom: 12px; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-url-bar { display: flex; gap: 10px; align-items: center; background: var(--bg3); padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; box-shadow: var(--card-shadow); }
.sp-url-input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 6px; font: 13px Manrope; }
.sp-url-go { padding: 8px 18px; background: var(--accent); color: #fff; border: none; border-radius: 6px; font: 600 13px Manrope; cursor: pointer; }
.sp-url-go:hover { background: var(--accent2); }
.sp-url-go:disabled { opacity: .5; cursor: not-allowed; }