:root { color-scheme: light; --ink:#24182d; --muted:#756b79; --wine:#751b36; --violet:#3d2c68; --cream:#faf7f1; --line:#e8e0e3; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:ui-sans-serif,system-ui,-apple-system,"Noto Sans Thai",sans-serif; color:var(--ink); background:radial-gradient(circle at 20% 0%,#fff 0,#faf7f1 42%,#f3edf3 100%); }
.shell { width:min(1080px,calc(100% - 32px)); margin:auto; padding:24px 0 80px; }
header { display:flex; align-items:center; justify-content:space-between; min-height:48px; }
.brand { font-family:Georgia,serif; letter-spacing:.18em; font-weight:700; color:var(--wine); }
.intro,.connect { text-align:center; padding:11vh 0 30px; }
.connect { max-width:680px; margin:auto; }
.eyebrow { font-size:.72rem; letter-spacing:.2em; font-weight:700; color:var(--wine); }
h1 { margin:12px 0 8px; font:clamp(2rem,6vw,4rem)/1.1 Georgia,"Noto Serif Thai",serif; letter-spacing:-.04em; }
.intro p,.connect p { margin:0; color:var(--muted); }
.search-box { display:flex; align-items:center; gap:12px; margin:22px auto 28px; max-width:850px; padding:10px 10px 10px 20px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px rgba(67,38,61,.11); }
.search-box svg { width:24px; fill:none; stroke:var(--muted); stroke-width:1.8; }
.search-box input { min-width:0; flex:1; border:0; outline:0; font:inherit; font-size:1.05rem; color:var(--ink); background:transparent; }
button,.google-button { border:0; border-radius:12px; padding:12px 20px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
.search-box button,.google-button { color:#fff; background:linear-gradient(135deg,var(--wine),var(--violet)); }
.google-button { display:inline-block; margin-top:28px; }
.quiet { color:var(--muted); background:transparent; padding:8px; }
.state { min-height:28px; text-align:center; color:var(--muted); }
.results { display:grid; gap:12px; margin-top:26px; }
.result-card { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:16px; align-items:start; padding:20px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); transition:.18s ease; }
.result-card:hover { transform:translateY(-2px); border-color:#cfb8c2; box-shadow:0 12px 30px rgba(67,38,61,.08); }
.file-icon img { width:28px; height:28px; }
.result-card h2 { margin:5px 0 8px; font-size:1.05rem; }
.meta { display:flex; flex-wrap:wrap; gap:7px 14px; color:var(--muted); font-size:.72rem; }
.snippet,.no-snippet { margin:0; color:#594e5c; line-height:1.65; font-size:.9rem; }
.no-snippet { color:#938994; }
.preview { margin-top:8px; padding:0; color:var(--violet); background:transparent; font-size:.82rem; }
.preview:disabled { color:var(--muted); cursor:wait; }
.open { align-self:center; white-space:nowrap; color:var(--wine); font-size:.86rem; font-weight:700; text-decoration:none; }
.hidden { display:none !important; }
.disabled { opacity:.45; pointer-events:none; }
.setup { margin-top:16px !important; color:#9a5c2e !important; }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid #d8cbd0; border-top-color:var(--wine); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:640px) {
  .intro,.connect { padding-top:7vh; }
  .search-box { display:grid; grid-template-columns:24px 1fr; }
  .search-box button { grid-column:1/-1; }
  .result-card { grid-template-columns:32px minmax(0,1fr); }
  .open { grid-column:2; justify-self:start; }
}