:root{
  --ink:#182338; --paper:#FAF6ED; --card:#FFFFFF; --gold:#AD8A54;
  --gold-light:#F1E4C8; --slate:#5B6270; --sage:#4C7A5A; --sage-light:#E4EEE3; --line:#E6DFC9;
}
*{box-sizing:border-box;}
html{overflow-x:hidden;width:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;overflow-x:hidden;width:100%;}
.font-display{font-family:'Fraunces',serif;}
a{text-decoration:none;color:inherit;}
button,select,input{font-family:inherit;}

/* header */
header{position:sticky;top:0;z-index:40;background:rgba(250,246,237,0.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
.header-inner{max-width:1152px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
.logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:24px;letter-spacing:0.06em;}
.logo i{color:var(--gold);font-size:20px;}
.logo-img{height:36px;width:auto;display:block;}
nav{display:none;gap:32px;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--slate);}
nav a{display:flex;align-items:center;gap:4px;}
nav a:hover{opacity:0.7;}
/* hamburger toggle */
.nav-toggle{display:flex;width:40px;height:40px;border:none;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;border-radius:8px;flex-shrink:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.nav-toggle:hover{background:var(--gold-light);}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);margin:3px 0;transition:transform .25s ease,opacity .25s ease;border-radius:1px;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* menu-overlay + slide-in mobile-nav */
.menu-overlay{position:fixed;inset:0;background:rgba(13,22,38,0.45);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:98;}
.menu-overlay.is-open{opacity:1;pointer-events:auto;}
.mobile-nav{position:fixed;top:0;right:0;height:100%;width:78%;max-width:320px;background:var(--ink);z-index:99;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);padding:24px 22px;display:flex;flex-direction:column;overflow-y:auto;}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}
.mobile-nav-logo{font-family:'Fraunces',serif;font-size:22px;color:var(--paper);display:flex;align-items:center;gap:8px;}
.mobile-nav-logo img{height:28px;width:auto;}
.mobile-nav-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;background:none;padding:0;flex-shrink:0;}
.mobile-nav-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.mobile-nav ul{list-style:none;padding:0;margin:0;}
.mobile-nav li{border-bottom:1px solid rgba(255,255,255,0.08);}
.mobile-nav li a{display:block;padding:14px 2px;font-family:'Fraunces',serif;font-size:20px;color:#f4ede0;}
.mobile-nav-footer{margin-top:auto;padding-top:16px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(244,237,224,0.45);border-top:1px solid rgba(255,255,255,0.08);}

/* hero */
.hero{max-width:1152px;margin:0 auto;padding:56px 24px 32px;}
.hero h1{font-family:'Fraunces',serif;font-size:42px;line-height:1.15;margin:0 0 14px;}.hero-sub{font-size:14px;color:var(--slate);margin:0 0 20px;max-width:560px;line-height:1.6;}
@media(max-width:768px){.hero{padding:40px 16px 24px;}}

/* search + filter */
.search-shell{max-width:1152px;position:relative;}
.search-label{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.16em;color:var(--gold);margin-bottom:8px;}
.search-row{display:flex;gap:10px;align-items:center;}
.search-box{flex:1;display:flex;align-items:center;gap:10px;border:2px solid var(--gold);border-radius:8px;background:var(--card);padding:12px 16px;position:relative;}
.search-box i{color:var(--slate);font-size:16px;flex-shrink:0;}
.search-box input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--ink);min-width:0;}
.search-box .clear-x{cursor:pointer;color:var(--slate);font-size:14px;flex-shrink:0;display:none;}
.filter-toggle{position:relative;display:flex;align-items:center;gap:6px;padding:12px 16px;border-radius:8px;border:2px solid var(--line);background:var(--card);cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink);white-space:nowrap;flex-shrink:0;}
.filter-toggle.active{border-color:var(--gold);background:var(--gold-light);}
.filter-toggle .badge{background:var(--ink);color:var(--paper);border-radius:999px;font-size:10px;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;}
.search-btn{display:flex;align-items:center;gap:6px;padding:12px 18px;border-radius:8px;border:2px solid var(--gold);background:var(--gold);cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink);white-space:nowrap;flex-shrink:0;}
.search-btn:hover{opacity:0.85;}
@media(min-width:481px){.search-btn{display:none;}}

/* autocomplete */
.autocomplete-box{position:absolute;top:100%;left:-2px;right:-2px;background:var(--card);border:2px solid var(--gold);border-top:none;border-radius:0 0 8px 8px;max-height:280px;overflow-y:auto;display:none;z-index:50;}
.autocomplete-box.open{display:block;}
.autocomplete-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;font-size:13px;color:var(--ink);border-bottom:1px solid var(--line);}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item:hover,.autocomplete-item.highlighted{background:var(--gold-light);}
.autocomplete-item .ac-icon{color:var(--gold);font-size:14px;flex-shrink:0;}
.autocomplete-item .ac-text{flex:1;}
.autocomplete-item .ac-text .match{font-weight:600;}
.autocomplete-item .ac-type{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;color:var(--slate);flex-shrink:0;}

/* filter panel */
.filter-panel{max-width:1152px;margin:14px auto 0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;text-align:left;display:none;}
.filter-panel.open{display:block;}
.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.filter-group .filter-label{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--slate);margin-bottom:8px;}
.chip-set{display:flex;flex-wrap:wrap;gap:6px;}
.chip-opt{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--slate);cursor:pointer;}
.chip-opt.on{background:var(--ink);border-color:var(--ink);color:var(--paper);}
select.filter-select{width:100%;font-size:13px;border-radius:6px;border:1px solid var(--line);padding:7px 8px;background:transparent;color:var(--ink);}
.filter-panel-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.clear-all-btn{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;color:var(--gold);background:none;border:none;cursor:pointer;padding:0;}
.apply-btn{font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;padding:8px 18px;border-radius:6px;background:var(--ink);color:var(--paper);border:none;cursor:pointer;}

/* active chips */
.active-chips{max-width:1152px;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;}
.active-chip{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;background:var(--gold-light);border:1px solid var(--gold);color:var(--ink);padding:5px 10px;border-radius:999px;}
.active-chip i{cursor:pointer;font-size:11px;}

/* results */
.app{max-width:1000px;margin:0 auto;padding:32px 24px 96px;}
.results-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:6px;}
.results-title{font-family:'Fraunces',serif;font-size:22px;display:flex;align-items:center;gap:8px;}
.results-title i{color:var(--gold);}
.sort-select{font-family:'IBM Plex Mono',monospace;font-size:12px;border-radius:6px;border:1px solid var(--line);padding:6px 8px;background:transparent;color:var(--slate);}
.result-count{font-size:13px;color:var(--slate);margin-bottom:20px;}
#backHomeBar{display:none;margin-bottom:12px;}
#backHomeBtn{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--slate);text-decoration:none;cursor:pointer;}
#backHomeBtn i{font-size:12px;}
#backHomeBtn:hover{color:var(--ink);}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

.card{position:relative;border:1px solid var(--line);border-radius:8px;padding:20px;background:var(--card);transition:transform 0.15s, box-shadow 0.15s;}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,35,56,0.08);}
.stamp{position:absolute;top:16px;right:16px;width:60px;height:60px;border:2px solid var(--gold);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-9deg);color:var(--gold);z-index:1;background:var(--card);}
.stamp span{font-family:'IBM Plex Mono',monospace;font-size:8px;text-transform:uppercase;letter-spacing:0.08em;line-height:1.4;}
.card .category{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--gold);margin:6px 0 8px;padding-right:60px;}
.card h4{font-family:'Fraunces',serif;font-size:18px;line-height:1.3;margin:0 0 4px;padding-right:60px;}
.card .desc{font-size:13px;color:var(--slate);line-height:1.5;margin:0 0 14px;}
.provider-row{display:flex;align-items:center;gap:8px;margin:0 0 16px;}
.provider-logo{width:24px;height:24px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:3px;flex-shrink:0;}
.provider-fallback{width:24px;height:24px;border-radius:6px;background:var(--gold-light);color:var(--gold);font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;align-items:center;justify-content:center;flex-shrink:0;}
.provider-name{font-size:14px;color:var(--slate);}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.meta-pill{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--slate);border:1px solid var(--line);border-radius:999px;padding:4px 10px;}
.card-foot{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line);gap:8px;flex-wrap:wrap;}
.cert-badge{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;padding:4px 8px;border-radius:4px;display:flex;align-items:center;gap:4px;}
.cert-free{background:var(--sage-light);color:var(--sage);}
.cert-other{color:var(--slate);border:1px solid var(--line);}
.visit-btn{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:6px;border:1px solid var(--ink);color:var(--ink);background:transparent;transition:background 0.15s,color 0.15s;}
.visit-btn:hover{background:var(--ink);color:var(--paper);}

.empty{text-align:center;padding:64px 24px;border:1px solid var(--line);border-radius:8px;}
.empty p.title{font-family:'Fraunces',serif;font-size:18px;margin:0 0 8px;}
.empty p.sub{font-size:14px;color:var(--slate);margin:0 0 16px;}
.reset-btn{font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--paper);border:none;cursor:pointer;}
.result-section{margin-bottom:32px;}
.result-section-header{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.result-section-title{font-family:'Fraunces',serif;font-size:20px;margin:0;}
.result-section-count{font-size:12px;color:var(--slate);}
.result-section-viewall{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--gold);margin-left:auto;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.result-section-viewall:hover{opacity:0.7;}
@media(max-width:480px){
  .result-section-title{font-size:17px;}
  .result-section-count{font-size:11px;}
  .result-section-header{margin-bottom:10px;}
}

/* Trending section */
.trending-section{max-width:1152px;margin:0 auto;padding:0 24px 32px;}.trending-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}.trending-header h2{font-family:'Fraunces',serif;font-size:22px;margin:0;}.trending-header .trending-date{font-size:11px;color:var(--slate);font-family:'IBM Plex Mono',monospace;}.trending-header-right{display:flex;align-items:center;gap:10px;}.trending-refresh-badge{font-size:10px;font-family:'IBM Plex Mono',monospace;color:#2563eb;background:transparent;padding:2px 0;white-space:nowrap;letter-spacing:0.04em;line-height:1.5;}.trending-viewall{font-size:11px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap;}.trending-viewall:hover{text-decoration:underline;}.trending-viewall .icon-arrow-right{font-size:10px;}.trending-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:0;}.trending-tabs{display:flex;gap:8px;margin-bottom:16px;}.trending-tab{padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;cursor:pointer;transition:all 0.15s;color:var(--slate);}.trending-tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}.trending-tab:hover:not(.active){border-color:var(--slate);color:var(--ink);}.trending-empty{text-align:center;padding:40px 24px;color:var(--slate);font-size:13px;grid-column:1/-1;}.result-type-scholarship{background:var(--ink);color:var(--paper);}.result-type-internship{background:#dbeafe;color:#2563eb;}@media(max-width:900px){.trending-grid{grid-template-columns:repeat(2,1fr);}.trending-section{padding:0 24px 24px;}}@media(max-width:500px){.trending-grid{grid-template-columns:1fr;}}

footer{background:var(--ink);color:var(--paper);padding:48px 24px 28px;}
.footer-container{max-width:1152px;margin:0 auto;}
.footer-logo{display:inline-flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:22px;letter-spacing:0.06em;color:var(--paper);}
.footer-logo img{height:32px;width:auto;display:block;}
.footer-tagline{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#8892A5;margin:8px 0 0;line-height:1.6;}
.footer-block{border-top:1px solid rgba(255,255,255,0.08);padding:20px 0;}
.footer-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.footer-links{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.footer-links a{font-size:14px;color:#e6dfd0;}
.footer-links a:hover{color:var(--paper);}
.footer-dev-name{font-family:'Fraunces',serif;font-size:16px;margin:0 0 2px;color:var(--paper);}
.footer-dev-company{font-size:12px;color:#8892A5;margin:0 0 10px;}
.footer-email-link{font-size:13px;color:var(--gold);}
.footer-email-link:hover{opacity:0.8;text-decoration:underline;}
.footer-trust{font-size:12px;line-height:1.6;color:rgba(230,223,208,0.55);margin:0 0 6px;}
.footer-copy{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(230,223,208,0.4);}
@media(min-width:769px){
  .footer-block:first-of-type{border-top:none;padding-top:0;}
  .footer-grid-desktop{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:48px;}
  .footer-tagline{max-width:260px;}
}

/* -------- responsive ---------- */
@media(min-width:769px){
  nav{display:flex !important;}
  .nav-toggle{display:none !important;}
}
@media(max-width:900px){
  .search-shell,.filter-panel,.active-chips{max-width:100%;}
  .search-box{max-width:100%;}
  .sg-home-cta{max-width:100%;}
}
@media(max-width:768px){
  .hero h1{font-size:28px;}
  .filter-grid{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr;}
  .hero-sub{font-size:13px;}
  .app{padding:24px 16px 80px;}
  .header-inner{padding:14px 16px;}
  .results-title{font-size:18px;}
  .card{padding:16px;}
  .card h4{font-size:16px;padding-right:50px;}
  .card .category{padding-right:50px;}
  .stamp{width:48px;height:48px;top:12px;right:12px;}
  .stamp span{font-size:7px;}
  .filter-panel{padding:16px;}
  .filter-toggle{padding:12px 14px;font-size:11px;}
  .footer-grid-desktop{grid-template-columns:1fr 1fr;gap:36px;}
}

@media(max-width:560px){
  .search-row{gap:8px;}
  .search-box{padding:10px 12px;}
  .search-box input{font-size:13px;}
  .filter-toggle span.badge{display:none !important;}
  .filter-toggle{padding:10px 12px;font-size:10px;}
  .hero h1{font-size:26px;word-break:break-word;overflow-wrap:break-word;}
  .hero-sub{font-size:12px;}
  .trending-header{flex-direction:column;align-items:flex-start;gap:6px;}
  .trending-header-right{align-self:flex-start;}
  .trending-tab{padding:6px 12px;font-size:11px;}
  .results-title{font-size:16px;}
  .sort-select{font-size:11px;padding:5px 6px;}
  .sg-home-cta-inner{flex-wrap:wrap;padding:12px 14px;}
  .sg-home-cta-btn{width:100%;justify-content:center;}
  .footer-grid-desktop{grid-template-columns:1fr;gap:16px;}
  .footer-links{align-items:flex-start;}
  .footer-tagline{max-width:none;}
  .footer-dev-name{font-size:14px;}
  .footer-dev-company{font-size:11px;}
  .footer-trust{font-size:11px;}
  .footer-copy{font-size:10px;}
}

@media(max-width:480px){
  .search-row{flex-wrap:wrap;gap:6px;}
  .search-box{flex:1 1 auto;}
  .search-btn{justify-content:center;padding:8px 10px;font-size:0;gap:0;flex-shrink:0;}
  .filter-toggle{justify-content:center;padding:8px 10px;font-size:0;gap:0;flex-shrink:0;flex-basis:100%;margin-top:4px;}
  .search-btn i,.filter-toggle i{font-size:14px;}
  .filter-toggle .badge{font-size:10px;}
  .search-box input{font-size:13px;}
  .hero h1{font-size:22px;}
  .hero{padding:28px 12px 20px;}
  .header-inner{padding:10px 12px;}
  .logo{font-size:18px;gap:6px;}
  .logo-img{height:28px;}
  .card{padding:14px;}
  .card h4{font-size:15px;padding-right:44px;}
  .card .category{padding-right:44px;font-size:10px;}
  .stamp{width:40px;height:40px;top:10px;right:10px;}
  .stamp span{font-size:6px;}
  .meta-pill{font-size:10px;padding:3px 7px;}
  .visit-btn{font-size:10px;padding:5px 10px;}
  .cert-badge{font-size:9px;padding:3px 6px;}
  .app{padding:16px 12px 64px;}
  .trending-section{padding:0 12px 20px;}
  .trending-tabs{gap:4px;}
  .trending-tab{padding:5px 10px;font-size:10px;}
  .hero-footnote{font-size:10px;}
  .ask-input-shell{padding:12px 12px 24px;}
  .ask-hero{padding:24px 12px 12px;}
  .ask-hero h1{font-size:20px;}
  .resource-card{padding:10px 12px;}
  .footer-grid-desktop{grid-template-columns:1fr;gap:20px;}
}

@media(max-width:360px){
  .hero h1{font-size:20px;}
  .logo{font-size:16px;}
  .logo-img{height:24px;}
  .card{padding:12px;}
  .card h4{font-size:14px;padding-right:40px;}
  .stamp{width:36px;height:36px;top:8px;right:8px;}
  .stamp span{font-size:5px;}
  .card .category{font-size:9px;padding-right:40px;}
  .meta-pill{font-size:9px;padding:2px 6px;gap:3px;}
  .trending-tab{font-size:9px;padding:4px 8px;}
  .search-box{padding:8px 10px;}
  .filter-toggle{padding:8px;}
  .search-btn{padding:8px;}
  .sg-privacy-note{font-size:9px;}
}

/* -------- course/book type badge (mixed results) ---------- */
.result-type{position:absolute;top:10px;right:10px;font-family:'IBM Plex Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:0.05em;padding:3px 7px;border-radius:4px;z-index:2;}
.result-type-course{background:var(--sage-light);color:var(--sage);}
.result-type-book{background:var(--gold-light);color:var(--gold);}

/* -------- book card in mixed results ---------- */
.card-book-mix{padding:0;overflow:hidden;}
.card-book-mix .book-mix-row{display:flex;gap:14px;padding:16px;}
.card-book-mix .book-mix-cover{width:60px;flex-shrink:0;}
.card-book-mix .book-mix-cover img{width:60px;height:80px;object-fit:cover;border-radius:4px;display:block;}
.book-mini-cover-fallback{width:60px;height:80px;background:var(--gold-light);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;font-family:'Fraunces',serif;font-size:9px;line-height:1.2;color:var(--ink);}
.card-book-mix .book-mix-info{flex:1;min-width:0;}
.card-book-mix .book-mix-info h4{font-family:'Fraunces',serif;font-size:15px;line-height:1.3;margin:0 0 2px;padding:0;}
.card-book-mix .book-mix-author{font-size:12px;color:var(--slate);margin-bottom:4px;}
.card-book-mix .book-mix-desc{font-size:12px;color:var(--slate);line-height:1.4;margin:0 0 8px;}
.card-book-mix .book-mix-meta{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.book-mix-topic{font-family:'IBM Plex Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:0.05em;padding:2px 6px;border-radius:4px;background:var(--gold-light);color:var(--gold);}
.book-mix-format{font-family:'IBM Plex Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:0.05em;padding:2px 6px;border-radius:4px;background:#E8EEF5;color:#5A6C8A;}
.card-book-mix .visit-btn{font-size:10px;padding:4px 10px;}

/* -------- top 10 books preview strip ---------- */
.book-preview-strip{margin-top:48px;}
.book-strip-header{font-family:'Fraunces',serif;font-size:20px;display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.book-strip-header i{color:var(--gold);}
.book-count-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);letter-spacing:0.03em;}
.book-strip-link{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--gold);margin-left:auto;display:flex;align-items:center;gap:4px;}
.book-strip-link:hover{opacity:0.7;}
.book-strip-scroll{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:14px;}
.book-preview-card{border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden;transition:transform 0.15s,box-shadow 0.15s;display:flex;flex-direction:column;cursor:pointer;}
.book-preview-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(24,35,56,0.08);}
.book-preview-cover{width:100%;aspect-ratio:1.4/2;background:var(--gold-light);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.book-preview-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.book-preview-cover.fallback,
.book-preview-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:28px;opacity:0.5;}
.book-preview-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--gold-light);font-family:'Fraunces',serif;font-size:28px;font-weight:600;color:var(--ink);letter-spacing:0.04em;}
.book-mix-cover-fallback-inline{width:60px;height:80px;background:var(--gold-light);border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--ink);}
.book-preview-title{font-family:'Fraunces',serif;font-size:12px;line-height:1.3;padding:8px 10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);}
.book-preview-author{font-size:10px;color:var(--slate);padding:2px 10px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media(max-width:900px){
  .book-strip-scroll{grid-template-columns:1fr 1fr 1fr;}
}

@media(max-width:560px){
  .book-strip-scroll{grid-template-columns:1fr 1fr;}
  .card-book-mix .book-mix-row{padding:12px;gap:10px;}
  .card-book-mix .book-mix-cover{width:48px;}
  .card-book-mix .book-mix-cover img{width:48px;height:64px;}
  .book-mini-cover-fallback{width:48px;height:64px;font-size:8px;}
}

/* refresh status */
.refresh-status{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#2563eb;background:transparent;padding:2px 0;display:inline-block;margin:6px 0 10px;letter-spacing:0.02em;line-height:1.5;}

/* floating feedback widget */
/* homepage skill-gap CTA */
.sg-home-cta{max-width:1152px;margin:0 auto 24px;padding:0 24px;}
.sg-home-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;background:var(--gold-light);border-radius:10px;border:1px solid var(--gold);}
.sg-home-cta-inner i{font-size:24px;color:var(--gold);flex-shrink:0;}
.sg-home-cta-title{font-family:'Fraunces',serif;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 2px;}
.sg-home-cta-text{font-size:12px;color:var(--slate);margin:0;line-height:1.4;}
.sg-home-cta-btn{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;padding:8px 16px;background:var(--gold);color:#fff;border-radius:6px;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:5px;flex-shrink:0;transition:opacity 0.15s;}
.sg-home-cta-btn:hover{opacity:0.85;}
@media(max-width:600px){
  .sg-home-cta-inner{flex-wrap:wrap;}
  .sg-home-cta-btn{width:100%;justify-content:center;}
}

/* -------- desktop hero centering (1024px and up, mobile untouched) ---------- */
@media(min-width:1024px){
  .hero{text-align:center;}
  .hero h1{margin:0 0 16px;}
  .hero-sub{max-width:620px;margin:0 auto 26px;}
  .search-shell{max-width:720px;margin:0 auto;}
  .filter-panel{max-width:720px;margin:16px auto 0;}
  .active-chips{max-width:720px;margin:14px auto 0;}
  .sg-home-cta{max-width:720px;margin:0 auto 28px;padding:0;}
}