/* ===================== Merdot Search · world-class UI ===================== */
:root{
  --bg:#ffffff; --panel:#ffffff; --text:#202124; --muted:#5f6368; --faint:#70757a;
  --line:#dfe1e5; --line2:#ebeced; --soft:#f1f3f4; --blue:#1a73e8; --blue2:#1877ff;
  --blued:#0f5fe0; --visited:#681da8; --green:#188038; --ring:rgba(26,115,232,.35);
  --shadow:0 1px 6px rgba(32,33,36,.16);
}
:root[data-theme="dark"], html.theme-dark{
  --bg:#0f1420; --panel:#171d2b; --text:#e8eaed; --muted:#9aa0a6; --faint:#9aa0a6;
  --line:#2a3345; --line2:#232a3a; --soft:#1a2130; --blue:#8ab4f8; --blue2:#8ab4f8;
  --blued:#a9c7ff; --visited:#c58af9; --green:#81c995; --shadow:0 1px 6px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* wordmark (real SVG · light/dark) */
.wm{display:inline-block;background:url("/assets/word-light.svg") center/contain no-repeat;vertical-align:middle}
:root[data-theme="dark"] .wm,html.theme-dark .wm{background-image:url("/assets/word-dark.svg")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wm{background-image:url("/assets/word-dark.svg")}}
.home .logo .wm{width:380px;max-width:84vw;height:112px}
.rtop .logo .wm{width:150px;height:34px}

/* ---------- top-right controls ---------- */
#top{position:fixed;top:12px;right:14px;z-index:40;display:flex;align-items:center;gap:8px}
#ai{background:var(--blue2);color:#fff;border-radius:20px;padding:8px 15px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:5px}
#ai:hover{background:var(--blued);text-decoration:none}
#theme,#waffle{width:38px;height:38px;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:16px}
#theme{border-color:var(--line);background:var(--panel)}
#waffle:hover,#theme:hover{background:var(--soft)}

/* ---------- app launcher ---------- */
#apps{position:fixed;top:58px;right:16px;z-index:50;width:312px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.22);padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#apps[hidden]{display:none}
#apps a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:12px;color:var(--text);font-size:12px;text-align:center;line-height:1.2}
#apps a:hover{background:var(--soft);text-decoration:none}
#apps .ci{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border:1px solid var(--line2);color:#fff;font-weight:800;font-size:18px}
#apps .ci img{width:30px;height:30px;object-fit:contain}

/* ===================== HOME ===================== */
#app{flex:1 0 auto;width:100%;display:flex;flex-direction:column}
.home{flex:1;width:100%;max-width:680px;margin:0 auto;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.home .logo{margin-bottom:30px;line-height:0}
.bar{display:flex;align-items:center;gap:14px;width:100%;height:50px;padding:0 20px;border:1px solid var(--line);border-radius:26px;background:var(--panel);box-shadow:var(--shadow);position:relative}
.bar:hover{box-shadow:0 1px 10px rgba(32,33,36,.28)}
.bar:focus-within{border-color:transparent;box-shadow:0 1px 14px var(--ring)}
.bar .mag{color:var(--muted);flex:none;display:flex}
.bar input{flex:1;border:none;outline:none;background:transparent;color:var(--text);font-size:16px;min-width:0}
.bar .ic{flex:none;display:flex;color:var(--blue2);cursor:pointer;padding:2px}
.bar .sep{width:1px;height:26px;background:var(--line);flex:none}
.acx{position:absolute;top:52px;left:0;right:0;background:var(--panel);border:1px solid var(--line);border-top:none;border-radius:0 0 20px 20px;box-shadow:var(--shadow);overflow:hidden;z-index:5}
.acx .item{padding:10px 20px;display:flex;align-items:center;gap:12px;cursor:pointer;color:var(--text)}
.acx .item:hover,.acx .item.sel{background:var(--soft)}
.acx .item svg{color:var(--muted);flex:none}
.btns{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.btns button,.btns a{border:1px solid var(--line);background:var(--soft);border-radius:8px;padding:10px 20px;font-weight:500;font-size:14px;color:var(--text)}
.btns button:hover,.btns a:hover{border-color:#c9d3e6;box-shadow:0 1px 6px rgba(0,0,0,.1);text-decoration:none}
.btns .ai{background:var(--blue2);color:#fff;border-color:var(--blue2);display:inline-flex;gap:6px;align-items:center}
.btns .ai:hover{background:var(--blued)}
.langs{margin-top:36px;font-size:14px;color:var(--faint);line-height:2.2}
.langs a{color:var(--blue);margin:0 7px}
.langs a.on{font-weight:700}

/* ===================== RESULTS ===================== */
.rhead{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line2);padding:14px 24px 0}
.rtop{display:flex;align-items:center;gap:26px}
.rtop .logo{flex:none;line-height:0}
.rtop form{flex:1;max-width:600px}
.rbar{display:flex;align-items:center;gap:12px;height:44px;padding:0 8px 0 18px;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow)}
.rbar:focus-within{box-shadow:0 1px 10px var(--ring)}
.rbar input{flex:1;border:none;outline:none;background:transparent;color:var(--text);font-size:16px;min-width:0}
.rbar .go{width:40px;height:36px;border:none;background:transparent;color:var(--blue2);border-radius:20px;display:flex;align-items:center;justify-content:center}
.rbar .clear{border:none;background:transparent;color:var(--muted);font-size:18px;line-height:1}
.tabs{display:flex;gap:26px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{color:var(--muted);padding:8px 2px 12px;font-size:13px;white-space:nowrap;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:6px}
.tabs a.on{color:var(--blue);border-bottom-color:var(--blue)}
.tabs a:hover{text-decoration:none;color:var(--text)}

.rwrap{display:flex;gap:40px;max-width:1120px;margin:0 auto;padding:22px 24px 40px;width:100%}
.rmain{flex:1;min-width:0;max-width:640px}
.rside{width:360px;flex:none}
.meta{color:var(--faint);font-size:13px;margin-bottom:18px}

.res{margin-bottom:26px}
.res .u{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.res .u .fav{width:26px;height:26px;border-radius:50%;background:var(--soft);border:1px solid var(--line2);flex:none;object-fit:contain}
.res .u .site{font-size:12px;color:var(--text);line-height:1.2}
.res .u .site .host{font-weight:500}
.res .u .site .path{color:var(--faint);font-size:12px}
.res h3{margin:2px 0 3px;font-size:20px;font-weight:400;line-height:1.3}
.res h3 a{color:#1a0dab}
:root[data-theme="dark"] .res h3 a,html.theme-dark .res h3 a{color:var(--blue)}
.res h3 a:visited{color:var(--visited)}
.res .snip{color:var(--muted);font-size:14px;line-height:1.58}
.res .date{color:var(--faint)}

/* images grid */
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.imgs a{display:block;border-radius:10px;overflow:hidden;background:var(--soft);aspect-ratio:1;border:1px solid var(--line2)}
.imgs img{width:100%;height:100%;object-fit:cover;display:block}

/* infobox */
.infobox{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.infobox .ib-img{width:100%;max-height:220px;object-fit:cover;display:block}
.infobox .ib-body{padding:18px}
.infobox h2{margin:0 0 8px;font-size:22px}
.infobox p{color:var(--muted);font-size:14px;margin:0 0 12px}
.infobox .attr{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line2);font-size:13px}
.infobox .attr .k{color:var(--faint)}
.infobox .links{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px 16px}

/* suggestions */
.sugg{margin:26px 0}
.sugg h4{font-size:16px;font-weight:500;margin:0 0 12px}
.sugg .chips{display:flex;flex-wrap:wrap;gap:10px}
.sugg .chips a{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:8px 16px;color:var(--text);font-size:13px}
.sugg .chips a:hover{border-color:#c9d3e6;text-decoration:none}

/* pagination */
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin:30px 0 6px}
.pager a,.pager span{padding:8px 12px;border-radius:8px;color:var(--blue);font-size:14px}
.pager a:hover{background:var(--soft);text-decoration:none}
.pager .cur{color:var(--text);font-weight:700}

.loading{padding:40px 0;color:var(--faint);text-align:center}
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--blue2);border-radius:50%;animation:sp .8s linear infinite;margin:0 auto 12px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===================== FOOTER ===================== */
#foot{flex:none;background:var(--soft);border-top:1px solid var(--line);color:var(--faint);font-size:14px;margin-top:auto}
#foot .country{padding:15px 24px;border-bottom:1px solid var(--line)}
#foot .country b{color:var(--blue2)}
#foot .links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:13px 24px}
#foot .links .grp{display:flex;flex-wrap:wrap;gap:10px 26px}
#foot .links a{color:var(--faint)}
body.home-mode #foot{background:transparent;border-top-color:var(--line2)}

/* ===================== MOBILE ===================== */
@media (max-width:820px){
  .rwrap{flex-direction:column;gap:24px;padding:18px 16px 40px}
  .rside{width:100%;order:-1}
}
@media (max-width:640px){
  #ai{padding:7px 12px;font-size:12px}
  .home{padding:32px 16px}
  .home .logo{font-size:44px;margin-bottom:26px}
  .bar{height:48px;gap:10px;padding:0 16px}
  .btns button,.btns a{padding:9px 16px;font-size:13px}
  .rhead{padding:12px 14px 0}
  .rtop{gap:14px}
  .rtop .logo{font-size:20px}
  .rwrap{padding:16px 14px 40px}
  .res h3{font-size:18px}
  #foot .links{flex-direction:column;gap:12px}
  #apps{right:8px;width:calc(100vw - 20px);max-width:312px}
}

/* ===== bar width fix (form must stretch) ===== */
.home form{width:100%}

/* ===== favicons over globe ===== */
.res .u .fav{position:relative;width:26px;height:26px;flex:none;border-radius:50%;background:var(--soft);border:1px solid var(--line2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.res .u .fav svg{width:16px;height:16px}
.res .u .fav img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--panel)}

/* ===== knowledge panel ===== */
.kp .ib-body{padding:18px}
.kp-desc{color:var(--faint);font-size:13px;margin:-2px 0 10px;text-transform:capitalize}
.kp-more{display:inline-block;margin-top:6px;font-weight:600}
.kp-src{margin-top:14px;color:var(--faint);font-size:12px;border-top:1px solid var(--line2);padding-top:10px}
.mk .mk-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.mk .mk-head img{width:44px;height:44px;border-radius:11px}
.mk .mk-head h2{margin:0}
.kp-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
.kp-links a{font-size:13px}

/* ===== knowledge panel · brand logo + facts table ===== */
.mk-brand{height:26px;width:auto;display:block;margin-bottom:10px}
.mk-title{margin:0 0 2px;font-size:22px}
.kp-facts{margin-top:12px}
.kp-facts .attr{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--line2);font-size:13px}
.kp-facts .attr .k{color:var(--faint);flex:none;min-width:92px}
.kp-facts .attr span:last-child{text-align:right}

/* mobile wordmark sizing */
@media (max-width:640px){
  .home .logo .wm{height:78px}
  .rtop .logo .wm{width:120px;height:28px}
}