:root{
  --bg:#f5f1e8;
  --card:#fffaf2;
  --ink:#24313a;
  --muted:#66727a;
  --accent:#b46f3c;
  --accent-2:#2f6d67;
  --line:rgba(36,49,58,.12);
  --shadow:0 18px 45px rgba(36,49,58,.12);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Noto Sans TC",system-ui,sans-serif;
  color:var(--ink);
  background:
    linear-gradient(rgba(245,241,232,.58), rgba(245,241,232,.58)),
    url("bg.jpg") center center / cover fixed no-repeat;
}

.hero,.container{
  width:min(1120px,calc(100% - 32px));
  margin:0 auto;
}

.hero{
  display:grid;
  grid-template-columns:1.35fr .85fr;
  gap:24px;
  padding:48px 0 24px;
}

.hero__content,.hero__panel,.toolbar,.book-card{
  background:rgba(255,250,242,.9);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

.hero__content,.hero__panel{border-radius:28px;padding:28px}
.badge,.panel__label{
  display:inline-block;
  margin:0 0 12px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(180,111,60,.14);
  color:var(--accent);
  font-weight:700;
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:8px;
}

.brand__logo{
  width:84px;
  height:84px;
  object-fit:contain;
  flex:none;
}

h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2rem,4vw,4rem);line-height:1.05;margin-bottom:14px}
.hero__text{font-size:1.05rem;color:var(--muted);max-width:34rem}

.search-bar{
  display:flex;
  gap:10px;
  margin:24px 0 16px;
}

.search-bar input,.toolbar select{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  font-size:1rem;
  background:#fff;
  color:var(--ink);
}

.search-bar button,.filter{
  border:0;
  border-radius:16px;
  padding:14px 16px;
  font-size:1rem;
  cursor:pointer;
  transition:.2s ease;
}

.search-bar button{
  background:var(--accent-2);
  color:#fff;
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.filter{
  background:rgba(47,109,103,.12);
  color:var(--accent-2);
}
.filter.is-active,.filter:hover,.search-bar button:hover{
  transform:translateY(-1px);
  filter:saturate(1.08);
}
.filter.is-active{background:var(--accent-2);color:#fff}

.hero__panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100%;
}
.stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px;
}
.stats div{
  padding:18px;
  border-radius:20px;
  background:rgba(36,49,58,.05);
}
.stats strong{display:block;font-size:1.5rem}
.stats span{color:var(--muted)}

.container{padding:10px 0 48px}
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border-radius:22px;
  margin-bottom:18px;
}
.toolbar p{margin:0;color:var(--muted)}
.toolbar select{max-width:220px}

.book-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.book-card{
  overflow:hidden;
  border-radius:24px;
}

.book-card__cover{
  height:170px;
  background:linear-gradient(135deg,var(--accent),#f0c59b 55%,#2f6d67);
}
.book-card__body{padding:18px}
.book-card__category{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(47,109,103,.12);
  color:var(--accent-2);
  font-size:.9rem;
  font-weight:700;
}
.book-card h3{margin:12px 0 8px;font-size:1.2rem}
.book-card__author,.book-card__desc,.book-card__meta{color:var(--muted)}
.book-card__desc{min-height:3.5em}
.book-card__meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.empty-state{
  grid-column:1 / -1;
  padding:36px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:24px;
  background:rgba(255,255,255,.6);
  color:var(--muted);
}

.feedback{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:18px;
  margin-top:22px;
  padding:24px;
  border-radius:28px;
  background:rgba(255,250,242,.9);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

.feedback__info h2{
  margin-bottom:10px;
  font-size:1.7rem;
}

.feedback__info p:last-child{
  color:var(--muted);
  line-height:1.8;
}

.feedback__form{
  display:grid;
  gap:14px;
}

.feedback__form label{
  display:grid;
  gap:8px;
  font-weight:700;
}

.feedback__form input,
.feedback__form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  font:inherit;
  background:#fff;
  color:var(--ink);
}

.feedback__message textarea{
  resize:vertical;
  min-height:140px;
}

.feedback__form button{
  width:fit-content;
  border:0;
  border-radius:16px;
  padding:14px 20px;
  background:var(--accent);
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.feedback__msg{
  margin:0;
  color:var(--accent-2);
  font-weight:700;
}

@media (max-width: 900px){
  .brand{align-items:flex-start}
  .hero,.book-grid{grid-template-columns:1fr}
  .feedback{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar select{max-width:none}
}