Two ways to theme MevaSearch

Choose your theme type

Your theme, your rules

Themes you create are yours. MevaSearch takes no fees and no share, and you never need our permission.

• You own it. Your theme is your work and your property.
• Sell it or give it away. Charge for it, publish it for free or ask for donations. All the money is yours; you send us nothing.
• Host it anywhere. On your own website, GitHub or any store. MevaSearch Marketplace accepts Simple themes only (colors and accents), so share Custom CSS themes on your own channels.
• No account needed. You do not have to be a MevaSearch user or pay for a plan to create themes. We do recommend a MevaSearch account for testing, so you can see your theme on real results.

You can copy this disclaimer into your theme’s description:

This is an independent, community-made theme for MevaSearch. It is not affiliated with, endorsed by or supported by MevaSearch Team or WebOrbiton. MevaSearch is a product of WebOrbiton.

Simple-CSS mode

Simple-CSS mode turns off all MevaSearch styles on the results page, the homepage and the AI chat, and leaves clean, semantic HTML. Your custom CSS is the only design on the page, so you build from a blank canvas instead of overriding hundreds of default rules.

1. Open Settings → Custom CSS.
2. Turn on Simple-CSS mode and save.
3. Paste your CSS into the Custom CSS field and open any search.

What stays on: a tiny functional base that keeps menus, popups and the floating search bar working (hidden by default, positioned when open), icons sized to 1.1em and images limited to their container. No colors, fonts, spacing or borders.

When Simple-CSS mode is on, the root element gets the class html.simple-css, so you can scope rules to it.

Custom CSS

For your safety, MevaSearch removes @import, expression(), behavior, -moz-binding and url() values pointing to javascript:, vbscript: or data:text/html. Comments are stripped before the CSS is applied.

State classes

Scripts show and hide parts of the page by toggling these classes. Style them as you like, but keep the hidden state hidden, or closed menus will stay on screen.

Page-level hooks

Set on <html> or <body> by MevaSearch. Use them to support light and dark mode and the user’s other settings.

Class reference: shared header

Used on the homepage and the AI chat.

Class reference: results page

These names are part of the public theme API. We keep them stable between releases; if one ever has to change, it will be listed here first.

Header and filters

Web results

Sitelinks and add-ons

Blocks inside results

Other tabs

Video carousel and free images strip

Wikipedia info panel

Floating search bar

Notifications

Search with a photo

Class reference: homepage

Search area

Quick links

Widgets and footer

Class reference: AI chat

Result card structure

Simplified HTML of one web result. Elements in brackets appear only when the user enables them or when data exists.

<div class="result-card" data-host="example.com" data-source="brave">
  <div class="result-breadcrumb">
    <img class="result-favicon">
    <i class="url-seg">example.com</i> <i class="url-seg">blog</i>
    <button class="domain-info-btn"></button>
    <button class="copy-link-btn"></button>
    [<a class="ghost-search-btn"></a>]
    <div class="domain-tooltip">…</div>
  </div>
  <div class="result-body [result-body--has-thumb]">
    <div class="result-body-text">
      <div class="result-title"><a href="…">Title</a></div>
      <div class="result-desc">[<span class="result-age">2 days ago</span> ·] Description</div>
      [<div class="sitelinks-row">
        <a class="sitelink-item">
          <span class="sitelink-item-title">Pricing</span>
          <span class="sitelink-item-desc">Plans and prices</span>
        </a>
      </div>]
    </div>
    [<a class="result-thumb-link"><img class="result-thumb"></a>]
  </div>
</div>

Tips

• Style light mode on :root and dark mode on html.dark; users switch with the theme button.
• Icons use currentColor, so they follow the color of their button or link.
• Popups (.dropdown, .domain-tooltip, .adv-pop, menus) are already positioned by the base; give them a background, border and padding.
• Never set display on [hidden] elements or on the closed state of menus.
• Test on a phone width (about 390 px): the tabs and filters scroll sideways.
• Keep your theme under 100 KB. Comments are removed automatically.

Starter theme

A small, readable base to copy and grow. Paste it into Custom CSS with Simple-CSS mode on.

html.simple-css body {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
  font: 16px/1.6 Georgia, serif;
  background: #fffdf7;
  color: #222;
}

.nav-btn, .time-btn {
  border: 0;
  background: none;
  padding: 4px 8px;
  cursor: pointer;
}

.nav-btn.active, .time-btn.active {
  border-bottom: 2px solid #c2410c;
}

.result-card {
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.result-title a {
  font-size: 1.15rem;
  color: #c2410c;
}

.result-desc {
  color: #555;
}

Full example: Aurora

A complete theme for the results page, homepage and AI chat, with light and dark mode and a phone layout. Copy it as a base for your own design: change the variables at the top to recolor everything.

/* Aurora — example theme for MevaSearch Simple-CSS mode (results, homepage, AI chat) */
:root {
  --a-bg: #f6f7fb;
  --a-card: rgba(255, 255, 255, .78);
  --a-card-hover: #ffffff;
  --a-line: rgba(15, 23, 42, .09);
  --a-text: #141824;
  --a-muted: #5d6475;
  --a-accent: #6d5dfc;
  --a-accent-2: #0ea5e9;
  --a-glow-1: rgba(109, 93, 252, .16);
  --a-glow-2: rgba(14, 165, 233, .12);
  --a-pop: rgba(255, 255, 255, .96);
  --a-shadow: 0 10px 40px rgba(15, 23, 42, .08);
  --a-radius: 16px;
}

html.dark {
  --a-bg: #0b0d12;
  --a-card: rgba(255, 255, 255, .045);
  --a-card-hover: rgba(255, 255, 255, .075);
  --a-line: rgba(255, 255, 255, .09);
  --a-text: #e8eaf0;
  --a-muted: #8b90a0;
  --a-accent: #8b7bff;
  --a-accent-2: #38bdf8;
  --a-glow-1: rgba(139, 123, 255, .22);
  --a-glow-2: rgba(56, 189, 248, .14);
  --a-pop: rgba(20, 22, 30, .96);
  --a-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}

/* Base */
html.simple-css body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--a-glow-1), transparent 60%),
    radial-gradient(700px 420px at 95% 10%, var(--a-glow-2), transparent 60%),
    var(--a-bg);
  background-attachment: fixed;
  color: var(--a-text);
  font: 15px/1.6 Inter, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--a-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; }
button {
  font: inherit;
  color: var(--a-text);
  background: var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
button:hover { background: var(--a-card-hover); border-color: var(--a-accent); }
input, textarea { font: inherit; color: var(--a-text); background: transparent; border: 0; outline: none; }
input::placeholder, textarea::placeholder { color: var(--a-muted); }
.icon-btn { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; }

/* Shared header (homepage, AI chat) */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}
.header-left, .header-right { display: flex; align-items: center; gap: 10px; }
.logo-small { font-weight: 700; color: var(--a-text); }
.dropdown {
  min-width: 230px;
  margin-top: 8px;
  padding: 6px;
  background: var(--a-pop);
  backdrop-filter: blur(20px);
  border: 1px solid var(--a-line);
  border-radius: 14px;
  box-shadow: var(--a-shadow);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--a-text);
}
.dropdown-item:hover { background: var(--a-card-hover); text-decoration: none; }
.dropdown-item .item-label { flex: 1; }
.dropdown-item .item-arrow { opacity: .4; }
.dropdown-sep { height: 1px; margin: 6px 4px; background: var(--a-line); }
#notifBtn { position: relative; align-items: center; justify-content: center; }
.notif-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }

/* Search box (homepage, results, floating bar) */
.search-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  background: var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: 999px;
  backdrop-filter: blur(18px);
  box-shadow: var(--a-shadow);
  transition: border-color .2s, box-shadow .2s;
}
.search-inner:focus-within {
  border-color: var(--a-accent);
  box-shadow: 0 0 0 4px var(--a-glow-1), var(--a-shadow);
}
.search-inner input { flex: 1; min-width: 0; font-size: 1.05rem; padding: 6px 0; }
.search-actions { display: flex; gap: 6px; }
.search-btn, .search-submit, .mis-header-btn { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; }
.search-submit, .search-actions .search-btn:last-child, .action-btn {
  border: 0;
  background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2));
  color: #fff;
}
.suggestions-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  background: var(--a-pop);
  backdrop-filter: blur(20px);
  border: 1px solid var(--a-line);
  border-radius: 16px;
  box-shadow: var(--a-shadow);
}
.suggestions-list li { padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.suggestions-list li:hover { background: var(--a-card-hover); }

/* Homepage */
.main { max-width: 760px; margin: 0 auto; padding: 8vh 20px 40px; }
.search-container { position: relative; }
.logo-wrap { text-align: center; margin-bottom: 28px; }
.logo-line { display: flex; align-items: center; justify-content: center; gap: 12px; }
.logo-icon { width: 48px; height: 48px; }
.logo { margin: 0; font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; }
.orange-text { background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { margin: 6px 0 0; color: var(--a-muted); }
.action-row { display: flex; justify-content: center; margin-top: 18px; }
.action-btn { padding: 10px 22px; font-weight: 600; }
.lang-row { display: flex; justify-content: center; gap: 6px; margin-top: 14px; color: var(--a-muted); font-size: .88rem; }
.lang-label, .lang-links { margin: 0; }

/* Quick links */
.ql-bar { margin-top: 34px; }
.ql-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ql-item, .ql-add-wrap {
  position: relative;
  width: 92px;
  padding: 12px 6px 10px;
  text-align: center;
  border-radius: 16px;
  cursor: pointer;
  transition: background .2s;
}
.ql-item:hover, .ql-add-wrap:hover { background: var(--a-card); }
.ql-item a { color: var(--a-text); text-decoration: none; }
.ql-icon-wrap {
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--a-card);
  border: 1px solid var(--a-line);
  overflow: hidden;
}
.ql-icon-img { width: 26px; height: 26px; }
.ql-icon-letter { font-weight: 700; color: var(--a-accent); }
.ql-label { font-size: .82rem; color: var(--a-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-add-icon { width: 22px; height: 22px; color: var(--a-muted); }
.ql-item-actions { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; }
.ql-act-btn { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; font-size: .7rem; }
.ql-modal-backdrop { display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); }
.ql-modal { width: min(420px, 100%); padding: 20px; background: var(--a-pop); border: 1px solid var(--a-line); border-radius: 18px; box-shadow: var(--a-shadow); }
.ql-modal input { width: 100%; box-sizing: border-box; margin: 6px 0 12px; padding: 10px 12px; border: 1px solid var(--a-line); border-radius: 10px; }

/* Homepage widgets */
#home-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 30px; }
#home-widgets > * { padding: 16px; background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-radius); }
.hw-head { font-weight: 600; margin-bottom: 8px; }
.hw-days, .hw-fx-list, .hw-news-list { display: grid; gap: 6px; }
.hw-article { display: flex; gap: 10px; color: var(--a-text); }
.hw-article-img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.hw-article-meta, .hw-note { font-size: .8rem; color: var(--a-muted); }

/* Footer */
.footer { padding: 30px 20px 40px; text-align: center; color: var(--a-muted); font-size: .88rem; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0; }
.footer-link { color: var(--a-muted); }
.customize-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--a-pop);
  border: 1px solid var(--a-line);
  box-shadow: var(--a-shadow);
}

/* Results: header */
.search-header {
  display: grid;
  grid-template-columns: auto minmax(0, 680px) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 6px;
}
.search-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--a-text); }
.header-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.search-nav, .time-filter-bar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 6px 16px;
}
.nav-btn, .time-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--a-muted);
  border-radius: 10px;
  padding: 6px 12px;
}
.nav-btn:hover, .time-btn:hover { background: var(--a-card); }
.nav-btn.active, .time-btn.active { color: var(--a-text); background: var(--a-glow-1); }
.time-btn-x { margin-left: 4px; opacity: .6; }

/* Results: content */
.content { max-width: 760px; margin: 0 auto; padding: 10px 16px 100px; }
#resultsMain { padding: 0; }
.ai-response-box, .ai-summary-content {
  margin: 4px 0 18px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--a-glow-1), var(--a-glow-2)), var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
}
.result-card {
  padding: 18px 20px;
  margin-bottom: 12px;
  background: var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
  transition: background .2s, transform .2s, border-color .2s;
}
.result-card:hover { background: var(--a-card-hover); border-color: var(--a-accent); transform: translateY(-2px); }
.result-breadcrumb { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .82rem; color: var(--a-muted); }
.result-breadcrumb button, .ghost-search-btn { padding: 2px 6px; border: 0; background: none; color: var(--a-muted); }
.result-favicon { border-radius: 6px; background: #fff; padding: 2px; }
.url-seg { font-style: normal; }
.url-seg + .url-seg::before { content: " › "; opacity: .5; }
.result-title a { display: block; margin: 6px 0 4px; font-size: 1.15rem; font-weight: 600; color: var(--a-text); }
.result-title a:hover { color: var(--a-accent); text-decoration: none; }
.result-desc { color: var(--a-muted); }
.result-desc b, .result-desc strong { color: var(--a-text); font-weight: 600; }
.result-body--has-thumb { display: flex; gap: 14px; }
.result-body-text { flex: 1; min-width: 0; }
.result-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: 12px; }

/* Sitelinks */
.sitelinks-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 14px; }
.sitelink-item { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--a-line); border-radius: 12px; color: var(--a-text); }
.sitelink-item:hover { border-color: var(--a-accent); text-decoration: none; }
.sitelink-item-title { font-weight: 600; }
.sitelink-item-desc { font-size: .82rem; color: var(--a-muted); }
.sitelink-pill { display: inline-block; max-width: 100%; margin: 8px 6px 0 0; padding: 4px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--a-line); border-radius: 999px; font-size: .85rem; color: var(--a-text); }

/* Blocks inside results */
.video-carousel, .commons-strip, .discussions-block, .related-searches-block { margin: 16px 0; padding: 16px; background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-radius); }
.vc-item, .cs-item { border-radius: 12px; overflow: hidden; }
.related-chip { margin: 4px 6px 0 0; }
.show-more-wrapper { text-align: center; margin: 20px 0; }

/* Popups keep working, just look nicer */
.domain-tooltip, .addon-factcheck-menu, .adv-pop, #suggestionsList.visible {
  background: var(--a-pop);
  backdrop-filter: blur(20px);
  border: 1px solid var(--a-line);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--a-shadow);
}
#stickySearch { width: min(560px, calc(100% - 24px)); }

/* Loading */
.skeleton {
  height: 12px;
  margin: 8px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--a-line), var(--a-card-hover), var(--a-line));
  background-size: 200% 100%;
  animation: aurora-shimmer 1.6s infinite;
}
@keyframes aurora-shimmer { to { background-position: -200% 0; } }

/* AI chat */
.chat-messages-inner { max-width: 760px; margin: 0 auto; padding: 24px 16px 150px; }
.chat-user-msg {
  margin: 18px 0 18px auto;
  max-width: 80%;
  width: fit-content;
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  background: linear-gradient(135deg, var(--a-accent), #6d5dfc);
  color: #fff;
}
.ai-response-box-inner { padding: 18px 20px; background: var(--a-card); border: 1px solid var(--a-line); border-radius: 18px 18px 18px 4px; }
.ai-sources-block { margin-top: 12px; }
.ai-source-card { display: block; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--a-line); border-radius: 12px; color: var(--a-text); }
.ai-source-desc { color: var(--a-muted); font-size: .85rem; }
.ai-followup-chip { margin: 8px 6px 0 0; }
.chat-input-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(760px, calc(100% - 24px)); }
.chat-input-wrap { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--a-pop); backdrop-filter: blur(18px); border: 1px solid var(--a-line); border-radius: 22px; box-shadow: var(--a-shadow); }
.chat-textarea { flex: 1; resize: none; max-height: 160px; }
.chat-send-btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); border: 0; color: #fff; }
.chat-consent-overlay { display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .45); }
.chat-consent { width: min(440px, 100%); padding: 20px; background: var(--a-pop); border: 1px solid var(--a-line); border-radius: 18px; }

/* Phone */
@media (max-width: 640px) {
  .search-header { grid-template-columns: 1fr auto; }
  .search-header form { grid-column: 1 / -1; order: 3; }
  .result-body--has-thumb { flex-direction: column; }
  .result-thumb { width: 100%; height: 160px; }
  .main { padding-top: 4vh; }
  .ql-item, .ql-add-wrap { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .result-card, .skeleton { transition: none; animation: none; }
}

/* Notifications */
.notif-overlay { display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); }
.notif-overlay-inner { display: flex; flex-direction: column; width: min(920px, 100%); max-height: min(640px, 90vh); overflow: hidden; background: var(--a-pop); border: 1px solid var(--a-line); border-radius: 20px; box-shadow: var(--a-shadow); }
.notif-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--a-line); }
.notif-overlay-title { font-weight: 700; font-size: 1.05rem; }
.notif-overlay-actions { display: flex; gap: 8px; }
.notif-overlay-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); min-height: 0; flex: 1; }
.notif-overlay-list { overflow-y: auto; border-right: 1px solid var(--a-line); }
.notif-overlay-list > * { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--a-line); cursor: pointer; }
.notif-overlay-list > *:hover { background: var(--a-card-hover); }
.notif-item-title { font-weight: 600; }
.notif-item-preview, .notif-item-meta, .notif-preview-date { font-size: .82rem; color: var(--a-muted); }
.notif-unread-dot { width: 8px; height: 8px; flex-shrink: 0; margin-top: 7px; border-radius: 50%; background: var(--a-accent); }
.notif-overlay-preview { overflow-y: auto; padding: 22px 26px; }
.notif-preview-title { margin: 10px 0 4px; font-size: 1.25rem; }
.notif-preview-desc { margin: 14px 0; line-height: 1.7; }
.notif-preview-empty, .notif-empty { color: var(--a-muted); padding: 24px; text-align: center; }
@media (max-width: 680px) {
  .notif-overlay { padding: 0; }
  .notif-overlay-inner { max-height: none; height: 100%; border-radius: 0; }
  .notif-overlay-body { grid-template-columns: 1fr; }
  .notif-overlay-list { border-right: 0; }
}

/* Video carousel and free images strip */
.vc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.vc-heading { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; }
.vc-tools { display: flex; gap: 6px; }
.vc-nav { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }
.vc-nav:disabled { opacity: .35; cursor: default; }
.vc-track { padding-bottom: 6px; scrollbar-width: thin; }
.vc-item, .cs-item { color: var(--a-text); text-decoration: none; }
.vc-item:hover, .cs-item:hover { text-decoration: none; }
.vc-thumb, .cs-item img { border-radius: 12px; background: var(--a-line); }
.vc-duration { padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: .72rem; font-weight: 600; }
.vc-play { color: #fff; opacity: 0; background: rgba(0, 0, 0, .25); transition: opacity .2s; }
.vc-play svg { width: 34px; height: 34px; }
.vc-item:hover .vc-play { opacity: 1; }
.vc-title { margin-top: 8px; font-size: .88rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vc-meta, .cs-caption { margin-top: 4px; font-size: .78rem; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Floating search bar */
#stickySearch { bottom: 18px; }
.fsearch-inner-box { padding: 8px; background: var(--a-pop); backdrop-filter: blur(18px); border: 1px solid var(--a-line); border-radius: 24px; box-shadow: var(--a-shadow); }
.fsearch-top-row { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; }
.fsearch-input-field { flex: 1; min-width: 0; padding: 8px 0; }
.fsearch-submit-trigger { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; border: 0; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); color: #fff; }
.fsearch-nav-row { display: flex; gap: 4px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.fsearch-nav-btn { flex-shrink: 0; border: 0; background: none; color: var(--a-muted); padding: 4px 10px; font-size: .82rem; }
.fsearch-nav-btn.is-active { color: var(--a-text); background: var(--a-glow-1); }

/* Wikipedia info panel */
#wiki-infobox { padding: 18px; background: var(--a-pop); backdrop-filter: blur(20px); border: 1px solid var(--a-line); border-radius: 18px; box-shadow: var(--a-shadow); }
#wiki-infobox img { border-radius: 12px; }
#wiki-infobox h2, #wiki-infobox h3 { margin: 10px 0 6px; }
#wiki-infobox table { width: 100%; border-collapse: collapse; font-size: .85rem; }
#wiki-infobox td, #wiki-infobox th { padding: 4px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--a-line); }
#wiki-overlay { background: rgba(0, 0, 0, .45); }
#wiki-mobile-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--a-pop); box-shadow: var(--a-shadow); }
@media (max-width: 1099px) {
  #wiki-infobox.wi-visible { border-radius: 20px 20px 0 0; }
}

/* Search with a photo */
.mis-backdrop { background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); }
.mis-modal { width: min(440px, 100%); padding: 22px; background: var(--a-pop); border: 1px solid var(--a-line); border-radius: 20px; box-shadow: var(--a-shadow); }
.mis-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mis-head h2, .mis-head h3 { margin: 0; font-size: 1.15rem; }
.mis-ico { color: var(--a-accent); }
.mis-lead, .mis-points { color: var(--a-muted); font-size: .9rem; }
.mis-drop { margin: 14px 0; padding: 20px; text-align: center; border: 2px dashed var(--a-line); border-radius: 16px; transition: border-color .2s, background .2s; }
.mis-drop.mis-dropping, .mis-drop.mis-dropping-zone { border-color: var(--a-accent); background: var(--a-glow-1); }
.mis-drop.has-image { border-style: solid; }
.mis-drop-text { margin: 0 0 12px; color: var(--a-muted); }
.mis-drop-actions, .mis-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mis-actions { justify-content: flex-end; margin-top: 14px; }
.mis-actions .mis-btn:last-child { border: 0; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); color: #fff; }
.mis-preview { margin: 0 auto; border-radius: 12px; }
.mis-note { display: grid; gap: 6px; }
.mis-note-label { font-size: .85rem; font-weight: 600; }
.mis-note input { padding: 10px 12px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-card); }
.mis-error { margin-top: 10px; color: #ef4444; font-size: .85rem; }
.mis-busy { text-align: center; color: var(--a-muted); }
.mis-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-radius); }
.mis-banner img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }

Roadmap

Simple-CSS mode covers the results page, the homepage and the AI chat. Other pages keep the MevaSearch design; new class names will be listed here before they ship.