.hub-search-trigger { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--green); min-height:40px; padding:8px 12px; margin-left:auto; white-space:nowrap; font-size:13px; }
.hub-search-trigger kbd { font:11px var(--font-body); border:1px solid var(--line); padding:2px 5px; border-radius:4px; color:var(--muted); }
.hub-search-trigger + .top-product-link { margin-left:0; }
.hub-guide { border:1px solid var(--line); background:var(--surface); border-radius:16px; margin:0 0 44px; padding:28px; }
.guide-intro { display:flex; gap:30px; justify-content:space-between; align-items:center; margin-bottom:22px; }
.guide-intro h2 { font-size:25px; letter-spacing:-.8px; margin:8px 0 0; }
.guide-intro > p { max-width:310px; font-size:14px; line-height:1.7; color:var(--muted); }
.guide-options { display:flex; gap:8px; flex-wrap:wrap; }
.guide-options button { border:1px solid var(--line); border-radius:7px; padding:11px 15px; min-height:44px; background:var(--paper); color:var(--ink); font-size:14px; }
.guide-options button[aria-pressed=true] { background:var(--green); color:var(--white); border-color:var(--green); }
.guide-detail { margin-top:24px; display:grid; grid-template-columns:1fr 1.6fr; gap:30px; border-top:1px solid var(--line); padding-top:24px; }
.guide-detail h3 { font-size:22px; line-height:1.4; letter-spacing:-.5px; max-width:320px; }
.guide-detail p { font-size:14px; line-height:1.7; color:var(--muted); margin-top:12px; }
.guide-detail ol { list-style:none; margin:0; padding:0; }
.guide-detail li + li { border-top:1px solid var(--line); }
.guide-detail a { display:flex; gap:15px; align-items:center; color:var(--ink); text-decoration:none; border-radius:6px; padding:14px 6px; }
.guide-detail a:hover { background:var(--surface-muted); }
.guide-step { color:var(--copper); font-size:13px; font-weight:600; }
.guide-detail a > svg { margin-left:auto; flex-shrink:0; }
.guide-detail a strong { font-size:14px; }
.guide-detail small { display:block; color:var(--muted); font-size:13px; line-height:1.6; margin-top:3px; }
.hub-search-note { margin:12px 0 20px; color:var(--muted); font-size:14px; line-height:1.65; }
.hub-search-field { display:flex; align-items:center; gap:12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--paper); padding:13px; }
.hub-search-field input { border:0; background:transparent; color:var(--ink); font-size:16px; width:100%; min-width:0; }
#hub-search-count, .hub-search-help { font-size:12px; color:var(--muted); margin:15px 0; }
#hub-search-results { display:grid; gap:6px; }
.hub-search-result { position:relative; padding:13px 38px 13px 13px; border:1px solid var(--line); border-radius:8px; background:white; text-align:left; color:var(--ink); }
.hub-search-result:hover, .hub-search-result:focus-visible { background:var(--green-light); }
.hub-result-kind { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--copper); }
.hub-search-result strong { display:block; font-size:15px; margin:5px 0; line-height:1.4; }
.hub-search-result small { font-size:12px; color:var(--muted); line-height:1.5; }
.hub-search-result > svg { position:absolute; right:13px; top:20px; }
.hub-search-empty { padding:24px 0; }
.hub-search-empty p { color:var(--muted); line-height:1.6; }
@media(max-width:1100px) { .hub-search-trigger kbd { display:none; } .top-product-link { display:none; } }
@media(max-width:700px) { .topbar { height:auto; min-height:54px; flex-wrap:wrap; gap:8px 12px; padding-block:9px; } .topbar > span { margin-right:auto; } .hub-search-trigger { margin-left:0; } .hub-search-trigger span { font-size:12px; } .topbar [data-ops-check-top] { width:100%; margin-left:0; justify-content:flex-end; } .hub-guide { padding:22px; } .guide-intro { display:block; } .guide-intro > p { margin-top:12px; max-width:none; } .guide-detail { grid-template-columns:1fr; gap:15px; } .guide-options { flex-direction:column; } .guide-options button { text-align:left; } }
