/* =========================================================
   Weblime v0.35 · Public Search Experience
   Independent frontend design system.
   ========================================================= */

:root{
  --accent:#4f7cff;
  --accent-2:#785cf3;
  --bg:#f8f9fc;
  --surface:#ffffff;
  --surface-soft:#f2f5fa;
  --surface-glass:rgba(255,255,255,.82);
  --text:#161d29;
  --text-2:#505c6d;
  --muted:#8c97a7;
  --line:#e3e8ef;
  --line-strong:#d6dde8;
  --link:#315fcb;
  --success:#12855f;
  --warning:#c78117;
  --danger:#cf4f5a;
  --shadow-search:0 14px 44px rgba(25,34,49,.10),0 2px 5px rgba(25,34,49,.035);
  --shadow-float:0 24px 70px rgba(20,28,42,.15);
  --shadow-card:0 1px 2px rgba(20,28,42,.03),0 8px 28px rgba(20,28,42,.045);
  --radius-sm:10px;
  --radius-md:15px;
  --radius-lg:22px;
  --ease:cubic-bezier(.2,.75,.25,1);
  --font:"Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

html[data-theme="dark"]{
  --bg:#10141a;
  --surface:#181d25;
  --surface-soft:#202630;
  --surface-glass:rgba(24,29,37,.84);
  --text:#f2f4f7;
  --text-2:#b8c0cb;
  --muted:#8e98a6;
  --line:#303844;
  --line-strong:#3d4653;
  --link:#8ca9ff;
  --shadow-search:0 16px 50px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18);
  --shadow-float:0 28px 80px rgba(0,0,0,.48);
  --shadow-card:0 1px 2px rgba(0,0,0,.18),0 8px 28px rgba(0,0,0,.11);
}

*{box-sizing:border-box}
html{
  min-height:100%;
  background:var(--bg);
  color-scheme:light;
  scroll-behavior:smooth;
}
html[data-theme="dark"]{color-scheme:dark}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input{font:inherit}
button,input,a{outline:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--accent) 20%,transparent)}
:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent)!important;
  outline-offset:2px!important;
}

.public-app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
  background:var(--bg);
}

.public-icon{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------------------------------------------------------
   Ambient background
   --------------------------------------------------------- */

.home-page:before,
.home-page:after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  filter:blur(4px);
}

.home-page:before{
  width:620px;
  height:620px;
  left:50%;
  top:14%;
  transform:translateX(-58%);
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accent) 10%,transparent) 0%,
    color-mix(in srgb,var(--accent) 4%,transparent) 38%,
    transparent 70%);
}

.home-page:after{
  width:520px;
  height:520px;
  left:50%;
  top:24%;
  transform:translateX(18%);
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accent-2) 7%,transparent) 0%,
    transparent 68%);
}

/* ---------------------------------------------------------
   Common brand
   --------------------------------------------------------- */

.public-brand{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.public-brand-mark{
  width:39px;
  height:39px;
  flex:0 0 39px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:
    radial-gradient(circle at 26% 18%,rgba(255,255,255,.42),transparent 34%),
    linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 47%,var(--accent-2)));
  color:#fff;
  box-shadow:0 9px 23px color-mix(in srgb,var(--accent) 17%,transparent);
}

.public-brand-mark .public-icon{
  width:20px;
  height:20px;
  stroke-width:2.25;
}

.public-brand-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:14px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.35px;
}

.theme-button{
  width:40px;
  height:40px;
  min-width:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--muted);
  transition:.16s var(--ease);
}

.theme-button:hover{
  background:var(--surface-soft);
  border-color:var(--line);
  color:var(--accent);
}
.theme-button .public-icon{width:18px;height:18px}

/* ---------------------------------------------------------
   Home
   --------------------------------------------------------- */

.home-header{
  min-height:68px;
  padding:14px 24px;
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.home-main{
  width:min(900px,calc(100% - 34px));
  min-height:calc(100vh - 124px);
  margin:-34px auto 0;
  padding:90px 0 130px;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
}

.home-hero{
  width:100%;
  display:grid;
  justify-items:center;
  text-align:center;
}

.hero-brand{
  display:grid;
  justify-items:center;
  gap:17px;
  margin-bottom:34px;
}

.hero-logo{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  position:relative;
  border-radius:25px;
  background:
    radial-gradient(circle at 25% 18%,rgba(255,255,255,.48),transparent 32%),
    linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--accent-2)));
  color:#fff;
  box-shadow:
    0 18px 42px color-mix(in srgb,var(--accent) 20%,transparent),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.hero-logo .public-icon{width:35px;height:35px;stroke-width:2.15}

.hero-copy h1{
  margin:0;
  color:var(--text);
  font-size:clamp(42px,6.2vw,64px);
  line-height:.98;
  font-weight:680;
  letter-spacing:-2.4px;
}

.hero-copy p{
  max-width:580px;
  margin:12px auto 0;
  color:var(--text-2);
  font-size:12px;
  line-height:1.65;
}

/* ---------------------------------------------------------
   Search box
   --------------------------------------------------------- */

.public-search-form{
  width:min(760px,100%);
  position:relative;
}

.public-search-shell{
  min-height:66px;
  padding:7px 8px 7px 18px;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 38px auto;
  align-items:center;
  gap:9px;
  position:relative;
  border:1px solid color-mix(in srgb,var(--line-strong) 88%,transparent);
  border-radius:22px;
  background:var(--surface-glass);
  box-shadow:var(--shadow-search);
  backdrop-filter:blur(22px) saturate(130%);
  transition:border-color .17s var(--ease),box-shadow .17s var(--ease),transform .17s var(--ease);
}

.public-search-shell:hover{
  border-color:color-mix(in srgb,var(--accent) 12%,var(--line));
  box-shadow:0 18px 50px rgba(25,34,49,.12),0 2px 6px rgba(25,34,49,.035);
}

.public-search-shell:focus-within{
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--accent) 6%,transparent),
    0 20px 52px rgba(25,34,49,.12);
  transform:translateY(-1px);
}

.public-search-leading{
  color:var(--muted);
}
.public-search-leading.public-icon{width:20px;height:20px}

.public-search-input{
  min-width:0;
  width:100%;
  height:50px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--text);
  caret-color:var(--accent);
  font-size:16px;
  line-height:1;
}
.public-search-input::placeholder{color:var(--muted);opacity:.86}

.public-clear{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--muted);
  opacity:0;
  pointer-events:none;
  transition:.14s var(--ease);
}
.public-clear.show{opacity:1;pointer-events:auto}
.public-clear:hover{background:var(--surface-soft);color:var(--text)}
.public-clear .public-icon{width:16px;height:16px}

.public-submit{
  height:50px;
  min-width:116px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:15px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 68%,var(--accent-2)));
  color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 19%,transparent);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05px;
  transition:.15s var(--ease);
}
.public-submit:hover{
  transform:translateY(-1px);
  filter:brightness(1.035);
  box-shadow:0 11px 25px color-mix(in srgb,var(--accent) 23%,transparent);
}
.public-submit .public-icon{width:16px;height:16px}

.search-help{
  min-height:29px;
  margin-top:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted);
  font-size:11px;
}
.search-help kbd,
.result-shortcut kbd{
  padding:3px 6px;
  border:1px solid var(--line);
  border-radius:6px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  color:var(--muted);
  box-shadow:none;
  font:700 8px/1 var(--font);
}

/* ---------------------------------------------------------
   Suggestions
   --------------------------------------------------------- */

.public-suggestions{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 9px);
  z-index:90;
  padding:8px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-float);
  text-align:left;
}

.public-suggestions.show{
  display:block;
  animation:suggestions-in .14s var(--ease);
}

@keyframes suggestions-in{
  from{opacity:0;transform:translateY(-6px) scale(.993)}
  to{opacity:1;transform:none}
}

.public-suggestions button{
  width:100%;
  min-height:45px;
  padding:9px 11px;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--text);
  font-size:11px;
  font-weight:540;
  text-align:left;
  transition:.13s var(--ease);
}
.public-suggestions button:hover,
.public-suggestions button.active{
  background:var(--surface-soft);
}
.public-suggestions button .public-icon{
  width:16px;
  height:16px;
  color:var(--muted);
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.public-footer{
  min-height:56px;
  padding:0 25px;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent);
  background:color-mix(in srgb,var(--surface-soft) 65%,var(--bg));
  color:var(--muted);
  font-size:11px;
}

.public-footer-location{
  display:flex;
  align-items:center;
  gap:6px;
}
.public-footer .public-icon{width:14px;height:14px}

/* =========================================================
   RESULTS HEADER
   ========================================================= */

.results-header{
  min-height:78px;
  position:sticky;
  top:0;
  z-index:75;
  padding:12px 24px;
  display:grid;
  grid-template-columns:145px minmax(380px,760px) minmax(120px,1fr);
  align-items:center;
  gap:14px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 92%,transparent);
  background:color-mix(in srgb,var(--bg) 91%,transparent);
  backdrop-filter:blur(24px) saturate(140%);
}

.results-header .public-brand-mark{
  width:35px;
  height:35px;
  flex-basis:35px;
  border-radius:12px;
  box-shadow:none;
}
.results-header .public-brand-mark .public-icon{width:18px;height:18px}
.results-header .public-brand-name{font-size:13px}

.results-search-form{
  width:100%;
  position:relative;
}

.results-search-form .public-search-shell{
  min-height:50px;
  padding:4px 5px 4px 14px;
  grid-template-columns:19px minmax(0,1fr) 34px 42px;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 3px 13px rgba(25,34,49,.055);
  backdrop-filter:none;
}
.results-search-form .public-search-shell:hover{box-shadow:0 5px 17px rgba(25,34,49,.075)}
.results-search-form .public-search-shell:focus-within{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 5%,transparent),0 6px 20px rgba(25,34,49,.075);
  transform:none;
}
.results-search-form .public-search-input{
  height:40px;
  font-size:13.5px;
}
.results-search-form .public-clear{width:32px;height:32px}
.results-search-form .public-submit{
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  border-radius:12px;
}
.results-search-form .public-submit span{display:none}

.results-header-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

/* =========================================================
   RESULTS CONTENT
   ========================================================= */

.results-main{
  width:min(1160px,calc(100% - 48px));
  margin:0 auto;
  padding:30px 0 76px;
}

.results-grid{
  display:grid;
  grid-template-columns:minmax(0,735px) minmax(230px,300px);
  gap:52px;
  align-items:start;
}

.results-list{
  min-width:0;
}

.results-meta{
  min-height:32px;
  margin-bottom:23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:var(--muted);
  font-size:11px;
}

.results-count{
  display:flex;
  align-items:center;
  gap:8px;
}

.results-count strong{
  color:var(--text-2);
  font-size:11px;
  font-weight:650;
}

.results-context{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}

.context-chip{
  min-height:27px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  font-size:10px;
  font-weight:650;
}
.context-chip .public-icon{width:13px;height:13px}

.result-shortcut{
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:3px;
}

/* ---------------------------------------------------------
   Search notices
   --------------------------------------------------------- */

.query-notice{
  margin:0 0 10px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-soft);
  color:var(--text-2);
  font-size:9.5px;
}
.query-notice .public-icon{width:15px;height:15px;color:var(--muted)}
.query-notice a{color:var(--link);font-weight:680}

/* ---------------------------------------------------------
   Featured / AI answer
   --------------------------------------------------------- */

.answer-panel{
  margin:0 0 25px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 16rem),
    var(--surface);
  box-shadow:var(--shadow-card);
}

.answer-panel.ai{
  background:
    radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--accent-2) 8%,transparent),transparent 16rem),
    var(--surface);
}

.answer-panel-header{
  min-height:52px;
  padding:14px 18px 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.answer-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  font-size:9px;
  font-weight:750;
  letter-spacing:.15px;
}

.answer-label-icon{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  color:var(--accent);
}
.answer-label-icon .public-icon{width:15px;height:15px}

.answer-confidence{
  color:var(--muted);
  font-size:10px;
}

.answer-panel-body{
  padding:4px 18px 18px;
  color:var(--text);
  font-size:13.5px;
  line-height:1.68;
}

.answer-consensus{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--success);
  font-size:8px;
  font-weight:680;
}
.answer-consensus .public-icon{width:13px;height:13px}

.answer-panel-footer{
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surface-soft) 65%,transparent);
  color:var(--muted);
  font-size:10px;
}

.answer-panel-footer a{
  color:var(--link);
  font-weight:650;
}

.answer-warning{
  margin:12px 18px 0;
  padding:9px 10px;
  border:1px solid color-mix(in srgb,var(--warning) 15%,var(--line));
  border-radius:9px;
  background:color-mix(in srgb,var(--warning) 7%,var(--surface));
  color:var(--warning);
  font-size:11px;
}

.answer-sources{
  padding:0 18px 17px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.answer-sources a{
  min-height:30px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-soft);
  color:var(--text-2);
  font-size:8px;
  font-weight:600;
}
.answer-sources a:hover{border-color:color-mix(in srgb,var(--accent) 18%,var(--line));color:var(--link)}

/* ---------------------------------------------------------
   Result item
   --------------------------------------------------------- */

.result-item{
  max-width:735px;
  padding:0 0 30px;
  margin:0 0 8px;
  position:relative;
}

.result-source{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:7px;
}

.result-favicon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 1px 3px rgba(20,28,42,.035);
}

.result-favicon img{
  width:20px;
  height:20px;
  object-fit:contain;
}

.result-favicon-fallback{
  width:18px;
  height:18px;
  color:var(--muted);
}
.result-favicon-fallback .public-icon{width:18px;height:18px}

.result-source-copy{min-width:0}

.result-host{
  display:block;
  color:var(--text);
  font-size:10.5px;
  line-height:1.25;
  font-weight:680;
}

.result-url{
  display:block;
  max-width:645px;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:8.6px;
  line-height:1.3;
}

.result-title{
  margin:7px 0 5px;
  color:var(--link);
  font-size:20.5px;
  line-height:1.31;
  font-weight:560;
  letter-spacing:-.28px;
}

.result-title a{color:var(--link)}
.result-title a:hover{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

.result-snippet{
  max-width:700px;
  margin:0;
  color:var(--text-2);
  font-size:12.7px;
  line-height:1.62;
}

mark{
  padding:0;
  background:transparent;
  color:inherit;
  font-weight:720;
}

.result-actions{
  min-height:31px;
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:5px;
  opacity:.62;
  transition:.15s var(--ease);
}
.result-item:hover .result-actions{opacity:1}

.feedback-button{
  min-height:29px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:9.5px;
  font-weight:620;
}
.feedback-button:hover{
  border-color:var(--line);
  background:var(--surface-soft);
  color:var(--text);
}
.feedback-button.selected{
  border-color:color-mix(in srgb,var(--accent) 16%,var(--line));
  background:color-mix(in srgb,var(--accent) 6%,var(--surface));
  color:var(--accent);
}
.feedback-button .public-icon{width:13px;height:13px}

.empty-results{
  padding:28px 0;
}
.empty-results-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border-radius:15px;
  background:var(--surface-soft);
  color:var(--muted);
}
.empty-results-icon .public-icon{width:21px;height:21px}
.empty-results h2{
  margin:0;
  color:var(--text);
  font-size:17px;
  font-weight:650;
}
.empty-results p{
  margin:6px 0 0;
  color:var(--text-2);
  font-size:10px;
}

/* ---------------------------------------------------------
   Right rail
   --------------------------------------------------------- */

.results-rail{
  position:sticky;
  top:102px;
  display:grid;
  gap:12px;
}

.rail-card{
  padding:15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(20,28,42,.025);
}

.rail-card-header{
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}

.rail-card-icon{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
  color:var(--accent);
}
.rail-card-icon .public-icon{width:15px;height:15px}

.rail-card h3{
  margin:0;
  color:var(--text);
  font-size:13px;
  font-weight:700;
}
.rail-card p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}

.rail-related{
  display:grid;
  gap:3px;
}

.rail-related a{
  min-height:39px;
  padding:7px 8px;
  display:grid;
  grid-template-columns:17px minmax(0,1fr);
  align-items:center;
  gap:7px;
  border-radius:9px;
  color:var(--text-2);
  font-size:11px;
  line-height:1.4;
}

.rail-related a:hover{
  background:var(--surface-soft);
  color:var(--link);
}
.rail-related .public-icon{width:14px;height:14px;color:var(--muted)}

.context-list{
  display:grid;
  gap:7px;
}
.context-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:10px;
}
.context-row strong{
  color:var(--text-2);
  font-size:10.5px;
  font-weight:650;
}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */

.results-pagination{
  margin-top:21px;
  display:flex;
  align-items:center;
  gap:6px;
}

.results-pagination a{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11px;
  font-weight:680;
  transition:.14s var(--ease);
}

.results-pagination a:hover:not(.active){
  border-color:color-mix(in srgb,var(--accent) 18%,var(--line));
  color:var(--link);
}

.results-pagination a.active{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
  box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 16%,transparent);
}

/* ---------------------------------------------------------
   Mobile related section (hidden on desktop)
   --------------------------------------------------------- */

.mobile-related{
  display:none;
  margin-top:25px;
  padding-top:21px;
  border-top:1px solid var(--line);
}

.mobile-related h3{
  margin:0 0 10px;
  color:var(--text);
  font-size:14px;
  font-weight:650;
}

.mobile-related-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.mobile-related-grid a{
  min-height:41px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:10px;
  background:var(--surface-soft);
  color:var(--text-2);
  font-size:9px;
}
.mobile-related-grid a:hover{border-color:var(--line);color:var(--link)}
.mobile-related-grid .public-icon{width:14px;height:14px;color:var(--muted)}

/* ---------------------------------------------------------
   Progress / toast / to top
   --------------------------------------------------------- */

.search-progress{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:3px;
  z-index:900;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.search-progress.show{opacity:1}
.search-progress span{
  display:block;
  width:32%;
  height:100%;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  animation:progress-run 1s linear infinite;
}
@keyframes progress-run{from{transform:translateX(-120%)}to{transform:translateX(420%)}}

.front-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:950;
  max-width:min(520px,calc(100% - 30px));
  padding:10px 14px;
  border-radius:11px;
  background:#20252d;
  color:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,12px);
  transition:.18s var(--ease);
  font-size:9.5px;
}
.front-toast.show{opacity:1;transform:translate(-50%,0)}

.to-top{
  width:43px;
  height:43px;
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:80;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  color:var(--muted);
  box-shadow:0 9px 26px rgba(20,28,42,.12);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:.16s var(--ease);
}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{color:var(--accent);transform:translateY(-1px)}
.to-top .public-icon{width:17px;height:17px}

/* =========================================================
   Responsive
   ========================================================= */

@media(max-width:1050px){
  .results-grid{
    grid-template-columns:minmax(0,735px) minmax(210px,250px);
    gap:34px;
  }
  .results-header{
    grid-template-columns:160px minmax(320px,1fr) auto;
    gap:14px;
  }
}

@media(max-width:860px){
  .results-header{
    position:relative;
    grid-template-columns:1fr auto;
    gap:10px;
    padding:12px 16px;
  }
  .results-header .public-brand{grid-column:1;grid-row:1}
  .results-header-actions{grid-column:2;grid-row:1}
  .results-search-form{grid-column:1/-1;grid-row:2}
  .results-main{width:calc(100% - 30px);padding-top:23px}
  .results-grid{display:block}
  .results-rail{display:none}
  .mobile-related{display:block}
  .results-list{width:min(735px,100%)}
}

@media(max-width:650px){
  .home-header{padding:12px 15px}
  .home-main{
    width:calc(100% - 26px);
    min-height:calc(100vh - 110px);
    margin:-22px auto 0;
    padding:68px 0 105px;
  }
  .hero-brand{gap:14px;margin-bottom:27px}
  .hero-logo{
    width:62px;
    height:62px;
    border-radius:21px;
  }
  .hero-logo .public-icon{width:30px;height:30px}
  .hero-copy h1{
    font-size:42px;
    letter-spacing:-1.65px;
  }
  .hero-copy p{
    max-width:410px;
    margin-top:10px;
    font-size:10.5px;
  }
  .public-search-shell{
    min-height:59px;
    padding:5px 6px 5px 14px;
    grid-template-columns:20px minmax(0,1fr) 34px 44px;
    gap:6px;
    border-radius:18px;
  }
  .public-search-input{
    height:47px;
    font-size:14px;
  }
  .public-submit{
    width:42px;
    min-width:42px;
    height:46px;
    padding:0;
    border-radius:13px;
  }
  .public-submit span{display:none}
  .search-help{margin-top:9px}
  .public-footer{padding:0 15px}
  .results-meta{
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:20px;
  }
  .results-context{justify-content:flex-start}
  .result-shortcut{display:none}
  .answer-panel{border-radius:16px}
  .answer-panel-header{padding-inline:15px}
  .answer-panel-body{padding:4px 15px 15px;font-size:12.7px}
  .answer-panel-footer{padding-inline:15px;display:block}
  .answer-panel-footer>span+span{display:block;margin-top:5px}
  .answer-warning{margin-inline:15px}
  .answer-sources{padding-inline:15px}
  .result-item{padding-bottom:27px}
  .result-title{font-size:18.5px}
  .result-snippet{font-size:12px}
  .result-actions{opacity:1}
  .mobile-related-grid{grid-template-columns:1fr}
}

@media(max-width:430px){
  .theme-button{width:38px;height:38px}
  .hero-logo{width:57px;height:57px;border-radius:19px}
  .hero-logo .public-icon{width:27px;height:27px}
  .hero-copy h1{font-size:36px;letter-spacing:-1.3px}
  .hero-copy p{font-size:10px}
  .search-help{display:none}
  .public-search-shell{
    grid-template-columns:19px minmax(0,1fr) 31px 41px;
    padding-left:12px;
  }
  .public-search-leading.public-icon{width:18px;height:18px}
  .public-search-input{font-size:13.5px}
  .results-main{width:calc(100% - 24px)}
  .results-header{padding-inline:12px}
  .results-header .public-brand-name{max-width:150px}
  .context-chip{min-height:25px;padding-inline:7px}
  .result-favicon{width:34px;height:34px;flex-basis:34px}
  .result-title{font-size:18px}
  .feedback-button{padding-inline:7px}
  .public-footer{font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}


/* =========================================================
   v0.35.1 · Screenshot-guided frontend corrections
   ========================================================= */

/* A suggestions panel közvetlenül a keresősáv alatt jelenjen meg,
   ne a form teljes magassága alatt. */
.home-page .public-suggestions{
  top:75px;
  max-height:min(330px,calc(100vh - 305px));
  overflow-y:auto;
  overscroll-behavior:contain;
}

.results-search-form .public-suggestions{
  top:59px;
  max-height:min(330px,calc(100vh - 150px));
  overflow-y:auto;
  overscroll-behavior:contain;
}

.public-suggestions{
  padding:7px;
}

.public-suggestions button{
  min-height:44px;
  padding:9px 11px;
  font-size:11.5px;
}

/* A főoldalról eltávolított ikon/alcím után természetesebb vertikális arány. */
.home-main{
  margin:-44px auto 0;
  padding-top:80px;
}

.hero-brand{
  margin-bottom:34px;
}

.hero-copy h1{
  font-size:clamp(48px,6.4vw,66px);
  letter-spacing:-2.5px;
}

/* A találati fejléc keresőmezője a márkához közelebb kezdődjön. */
.results-header{
  grid-template-columns:145px minmax(380px,760px) minmax(120px,1fr);
  gap:14px;
}

/* A kékkel jelölt információs elemek olvashatóbb mérete. */
.results-meta{
  font-size:11px;
}

.results-count strong{
  font-size:11.5px;
}

.context-chip{
  min-height:30px;
  padding:0 10px;
  font-size:10px;
}

.context-chip .public-icon{
  width:14px;
  height:14px;
}

.rail-card{
  padding:17px;
}

.rail-card h3{
  font-size:13px;
}

.rail-card p{
  font-size:10px;
}

.rail-related a{
  min-height:43px;
  font-size:11px;
}

.context-row{
  font-size:10px;
}

.context-row strong{
  font-size:10.5px;
}

.results-pagination a{
  width:39px;
  height:39px;
  font-size:11px;
}

.public-footer{
  min-height:58px;
  font-size:11px;
}

.public-footer .public-icon{
  width:15px;
  height:15px;
}

.feedback-button{
  min-height:31px;
  font-size:9.5px;
}

.result-url{
  font-size:9.5px;
}

@media(max-width:1050px){
  .results-header{
    grid-template-columns:130px minmax(320px,1fr) auto;
    gap:12px;
  }
}

@media(max-width:860px){
  .results-header{
    grid-template-columns:1fr auto;
  }

  .results-search-form .public-suggestions{
    top:59px;
    max-height:min(310px,calc(100vh - 190px));
  }
}

@media(max-width:650px){
  .home-main{
    margin:-28px auto 0;
    padding-top:66px;
  }

  .hero-brand{
    margin-bottom:27px;
  }

  .hero-copy h1{
    font-size:42px;
    letter-spacing:-1.65px;
  }

  .home-page .public-suggestions{
    top:68px;
    max-height:min(300px,calc(100vh - 210px));
  }

  .public-footer{
    font-size:10px;
  }
}

@media(max-width:430px){
  .hero-copy h1{
    font-size:36px;
    letter-spacing:-1.3px;
  }

  .home-page .public-suggestions{
    top:66px;
  }

  .results-meta,
  .results-count strong{
    font-size:10px;
  }
}


/* =========================================================
   v0.35.2 · Home autocomplete / footer layout fix
   ========================================================= */

/*
 * A főoldali javaslatlista nem lebeg többé a footer fölött/alatt.
 * A normál dokumentumfolyam része, ezért valóban helyet foglal.
 */
.home-page .public-search-form{
  display:block;
}

.home-page .public-suggestions{
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  width:100%;
  margin-top:9px;
  max-height:min(330px,42vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  z-index:20;
}

/* A fő tartalom nőhessen a javaslatokkal együtt. */
.home-page .home-main{
  flex:1 0 auto;
  min-height:calc(100dvh - 124px);
  height:auto;
  overflow:visible;
}

/* A footer mindig a tartalom UTÁN maradjon. */
.home-page .public-footer{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  margin-top:auto;
}

/* Korábbi abszolút pozicionálás felülírása. */
@media(max-width:650px){
  .home-page .public-suggestions{
    top:auto;
    max-height:min(300px,40vh);
  }
}

@media(max-width:430px){
  .home-page .public-suggestions{
    top:auto;
    max-height:min(270px,38vh);
  }
}

/* =========================================================
   v0.37 · Live Knowledge / Smart Answers
   ========================================================= */

.live-answer{
  margin:0 0 26px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 5%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 18rem),
    var(--surface);
  box-shadow:var(--shadow-card);
}

.live-answer-header{
  min-height:58px;
  padding:14px 18px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.live-answer-label{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.live-answer-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  color:var(--accent);
}
.live-answer-icon .public-icon{width:17px;height:17px}

.live-answer-label>div{min-width:0;display:grid;gap:2px}
.live-answer-label span{
  color:var(--text);
  font-size:9.5px;
  font-weight:740;
}
.live-answer-label strong{
  color:var(--muted);
  font-size:8px;
  font-weight:620;
}

.live-answer-live{
  min-height:25px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid color-mix(in srgb,var(--success) 18%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--success) 7%,var(--surface));
  color:var(--success);
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.55px;
}
.live-answer-live i{
  width:6px;height:6px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 10%,transparent);
}

.live-answer-content{
  padding:4px 18px 18px;
}

.live-answer-content.has-image{
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  gap:17px;
  align-items:start;
}

.live-answer-image{
  width:116px;
  min-height:116px;
  max-height:168px;
  overflow:hidden;
  display:block;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
}
.live-answer-image img{
  width:100%;
  height:100%;
  min-height:116px;
  max-height:168px;
  object-fit:cover;
}

.live-answer-main{min-width:0}
.live-answer-main h2{
  margin:0;
  color:var(--text);
  font-size:21px;
  line-height:1.25;
  font-weight:630;
  letter-spacing:-.35px;
}
.live-answer-main>p{
  max-width:690px;
  margin:8px 0 0;
  color:var(--text-2);
  font-size:12px;
  line-height:1.62;
}

.live-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:8px;
  margin-top:15px;
}
.live-facts>div{
  min-height:58px;
  padding:10px 11px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-soft);
}
.live-facts span{
  color:var(--muted);
  font-size:7.5px;
  font-weight:650;
}
.live-facts strong{
  margin-top:4px;
  color:var(--text);
  font-size:11.5px;
  line-height:1.25;
  font-weight:680;
  overflow-wrap:anywhere;
}

.weather-forecast{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:13px;
}
.weather-forecast>div{
  min-height:77px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-soft);
}
.weather-forecast span,.weather-forecast strong,.weather-forecast small{display:block}
.weather-forecast span{color:var(--muted);font-size:7.5px}
.weather-forecast strong{margin-top:4px;color:var(--text);font-size:12px;font-weight:680}
.weather-forecast small{margin-top:5px;color:var(--text-2);font-size:8px;line-height:1.35}

.live-list{
  display:grid;
  gap:3px;
  margin-top:13px;
}
.live-list>div{
  min-height:39px;
  padding:7px 9px;
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  align-items:center;
  gap:9px;
  border-radius:9px;
}
.live-list>div:nth-child(odd){background:var(--surface-soft)}
.live-list time{color:var(--muted);font-size:8.5px}
.live-list strong{color:var(--text-2);font-size:9.5px;font-weight:640}

.live-answer-footer{
  min-height:46px;
  padding:9px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surface-soft) 65%,transparent);
}
.live-answer-footer a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--link);
  font-size:8.5px;
  font-weight:680;
}
.live-answer-footer a .public-icon{width:13px;height:13px}
.live-answer-footer span{
  max-width:72%;
  color:var(--muted);
  text-align:right;
  font-size:7.5px;
  line-height:1.4;
}

.live-answer-weather{
  background:
    radial-gradient(circle at 92% 5%,color-mix(in srgb,#50a7ff 10%,transparent),transparent 18rem),
    var(--surface);
}
.live-answer-currency{
  background:
    radial-gradient(circle at 92% 5%,color-mix(in srgb,var(--success) 9%,transparent),transparent 18rem),
    var(--surface);
}
.live-answer-media{
  background:
    radial-gradient(circle at 92% 5%,color-mix(in srgb,var(--accent-2) 9%,transparent),transparent 18rem),
    var(--surface);
}

@media(max-width:650px){
  .live-answer{border-radius:16px}
  .live-answer-header{padding-inline:15px}
  .live-answer-content{padding:3px 15px 15px}
  .live-answer-content.has-image{grid-template-columns:86px minmax(0,1fr);gap:13px}
  .live-answer-image{width:86px;min-height:108px;max-height:130px;border-radius:11px}
  .live-answer-image img{min-height:108px;max-height:130px}
  .live-answer-main h2{font-size:18px}
  .live-answer-main>p{font-size:11px}
  .weather-forecast{grid-template-columns:1fr}
  .live-answer-footer{padding-inline:15px;align-items:flex-start;flex-direction:column}
  .live-answer-footer span{max-width:none;text-align:left}
}

@media(max-width:430px){
  .live-answer-content.has-image{display:block}
  .live-answer-image{width:82px;height:108px;min-height:0;margin-bottom:12px}
  .live-answer-image img{height:108px;min-height:0}
  .live-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .live-list>div{grid-template-columns:80px minmax(0,1fr)}
}

/* =========================================================
   Weblime v0.41 · Media & News Search
   ========================================================= */

.search-modes{
  display:flex;
  align-items:center;
  gap:6px;
}
.search-modes a{
  min-height:36px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--text-2);
  font-size:11px;
  font-weight:680;
  transition:.15s var(--ease);
}
.search-modes a:hover{
  background:var(--surface-soft);
  color:var(--text);
}
.search-modes a.active{
  border-color:color-mix(in srgb,var(--accent) 23%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
  color:var(--accent);
}
.search-modes .public-icon{width:15px;height:15px}
.home-search-modes{
  justify-content:center;
  margin-top:14px;
}
.results-search-modes{
  width:min(1180px,calc(100% - 36px));
  margin:8px auto 0;
  padding-left:165px;
}

.image-results-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 13px;
  padding-top:4px;
}
.image-result-card{min-width:0}
.image-result-preview{
  position:relative;
  min-height:150px;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-soft);
}
.image-result-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .22s var(--ease);
}
.image-result-preview:hover img{transform:scale(1.025)}
.media-preview-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--muted);
}
.media-preview-fallback .public-icon{width:34px;height:34px}
.image-result-copy{
  min-width:0;
  padding:8px 3px 0;
}
.media-result-title{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:11px;
  font-weight:680;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.media-result-source{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--muted);
  font-size:9px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.video-results-list,
.news-results-list{
  display:grid;
  gap:12px;
}
.video-result-card{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:17px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface);
  box-shadow:var(--shadow-card);
}
.video-result-preview{
  position:relative;
  min-height:128px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:13px;
  background:var(--surface-soft);
}
.video-result-preview>img{
  width:100%;
  height:100%;
  min-height:128px;
  object-fit:cover;
}
.video-play{
  position:absolute;
  inset:50% auto auto 50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  color:var(--accent);
  box-shadow:var(--shadow-card);
}
.video-play .public-icon{width:20px;height:20px}
.video-result-preview>time{
  position:absolute;
  right:7px;
  bottom:7px;
  padding:4px 6px;
  border-radius:7px;
  background:color-mix(in srgb,var(--text) 82%,transparent);
  color:var(--surface);
  font-size:9px;
  font-weight:700;
}
.video-result-copy{
  min-width:0;
  align-self:center;
}
.video-result-copy h2,
.news-result-copy h2{
  margin:6px 0 7px;
  color:var(--text);
  font-size:18px;
  line-height:1.28;
}
.video-result-copy h2 a:hover,
.news-result-copy h2 a:hover{color:var(--link)}
.video-result-copy p,
.news-result-copy p{
  margin:0;
  color:var(--text-2);
  font-size:11px;
  line-height:1.55;
}
.media-date,
.news-author{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:9px;
}

.news-result-card{
  min-height:142px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 176px;
  gap:18px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.news-result-card:has(.news-result-image) .news-result-copy{grid-column:1;grid-row:1}
.news-result-image{
  grid-column:2;
  grid-row:1;
  overflow:hidden;
  align-self:stretch;
  min-height:112px;
  max-height:145px;
  border-radius:13px;
  background:var(--surface-soft);
}
.news-result-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.news-result-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  color:var(--muted);
  font-size:9px;
  font-weight:620;
}

@media(max-width:980px){
  .results-search-modes{padding-left:0}
  .image-results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .search-modes{
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
  }
  .search-modes::-webkit-scrollbar{display:none}
  .home-search-modes{width:auto;max-width:100%;padding:0 4px}
  .results-search-modes{width:calc(100% - 24px);margin-top:6px}
  .search-modes a{flex:0 0 auto;padding-inline:10px}
  .image-results-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 9px}
  .image-result-preview{min-height:110px;border-radius:12px}
  .video-result-card{grid-template-columns:1fr;gap:10px}
  .video-result-preview{min-height:180px}
  .news-result-card{
    grid-template-columns:minmax(0,1fr) 112px;
    gap:12px;
  }
  .news-result-image{min-height:88px;max-height:112px}
  .video-result-copy h2,.news-result-copy h2{font-size:16px}
}
@media(max-width:420px){
  .image-results-grid{grid-template-columns:1fr}
  .image-result-preview{aspect-ratio:16/10;min-height:170px}
  .news-result-card{grid-template-columns:1fr}
  .news-result-card:has(.news-result-image) .news-result-copy{grid-column:1;grid-row:2}
  .news-result-image{grid-column:1;grid-row:1;max-height:170px}
}

/* =========================================================
   Weblime v0.42 · Vertical Search Intelligence
   ========================================================= */

.vertical-filter-wrap{
  width:min(1180px,calc(100% - 36px));
  margin:8px auto 0;
  padding-left:165px;
}
.vertical-filters{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.vertical-filters label{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.vertical-filters label>span{
  padding-left:2px;
  color:var(--muted);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.02em;
}
.vertical-filters select{
  min-height:34px;
  padding:0 30px 0 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-2);
  font:650 10px/1 var(--font);
  outline:none;
}
.vertical-filters select:focus{
  border-color:color-mix(in srgb,var(--accent) 32%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent);
}
.vertical-filter-reset{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:10px;
  color:var(--muted);
  font-size:9.5px;
  font-weight:650;
}
.vertical-filter-reset:hover{
  background:var(--surface-soft);
  color:var(--text);
}

.breaking-badge{
  padding:3px 6px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
  color:var(--accent);
  font-size:8px;
  font-weight:760;
  line-height:1;
}
.story-source-count{
  color:var(--text-2);
  font-weight:680;
}
.story-alternates{
  margin-top:9px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 8px;
  color:var(--muted);
  font-size:9px;
}
.story-alternates>span{font-weight:650}
.story-alternates a{
  padding:3px 6px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-soft);
  color:var(--text-2);
  font-weight:650;
}
.story-alternates a:hover{
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  color:var(--accent);
}

@media(max-width:980px){
  .vertical-filter-wrap{padding-left:0}
}
@media(max-width:650px){
  .vertical-filter-wrap{
    width:calc(100% - 24px);
    margin-top:5px;
  }
  .vertical-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    align-items:flex-end;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .vertical-filters::-webkit-scrollbar{display:none}
  .vertical-filters label,
  .vertical-filter-reset{flex:0 0 auto}
}