*{box-sizing:border-box}
html,body{margin:0;background:#fffaf2;color:#2b2118;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,"Noto Sans TC",sans-serif}
.box{border:1px solid #e5dccf;border-radius:16px;padding:24px;background:linear-gradient(145deg,#fffaf2,#fffdf8);box-shadow:0 5px 18px rgba(62,42,24,.08)}
h2{margin:0 0 8px;text-align:left;color:#204c43;font-size:26px;line-height:1.35;letter-spacing:.03em}
.lead{margin:0 0 22px;text-align:left;color:#6c5949;font-size:15px;line-height:1.7}
.search-sticky{position:relative;z-index:5;scroll-margin-top:16px;outline:none}
.search{display:flex;gap:10px}
.query-field{position:relative;flex:1;min-width:0;display:flex}
.query-field input{width:100%;height:58px;padding-left:44px}
.query-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#88776a;pointer-events:none}
.query-hint{display:none;position:absolute;left:44px;right:14px;top:50%;transform:translateY(-50%);color:#88776a;font-size:14px;line-height:1.55;pointer-events:none}
input:placeholder-shown + .query-hint{display:block}
#submit{background:#914635;min-width:96px}
#submit:hover{background:#78382b}
input{min-width:0;flex:1;border:1px solid #cdbda9;border-radius:11px;padding:13px 15px;background:#fff;color:#2b2118;font-size:16px;outline:none}
input:focus{border-color:#8b3329;box-shadow:0 0 0 3px rgba(139,51,41,.12)}
button{border:0;border-radius:11px;padding:0 22px;background:#7a2f25;color:#fff;font-size:16px;font-weight:700;cursor:pointer}
button:hover{background:#63251e}
button:disabled{cursor:default;opacity:.5}
#submit:disabled{cursor:wait;opacity:.7}
.status{min-height:25px;margin:10px 2px 4px;color:#786657;font-size:13px;overflow-wrap:anywhere}
.box.no-results .status{min-height:0;margin:14px 0 2px;padding:17px 18px;border:1px solid #d9afa5;border-left:5px solid #8b3329;border-radius:12px;background:#fff3f0;color:#53261f}
.empty-title{color:#7a2f25;font-size:17px;font-weight:800;line-height:1.4}
.empty-query{margin-top:7px;font-size:14px;font-weight:700;line-height:1.55;overflow-wrap:anywhere}
.empty-hint{margin-top:3px;color:#765b50;font-size:13px;line-height:1.6}
.empty-assistant{display:inline-flex;margin-top:13px;border-radius:10px;padding:10px 15px;background:#7a2f25;color:#fff;font-size:14px;font-weight:800;line-height:1.4;text-decoration:none}
.empty-assistant:hover{background:#63251e}
a:focus-visible,button:focus-visible{outline:3px solid #b99372;outline-offset:3px}
.results{display:grid;grid-auto-rows:max-content;align-content:start;gap:9px;margin-top:8px}
.box.has-results{height:auto;min-height:0;padding-top:12px;padding-bottom:14px}
.box.has-results h2,.box.has-results .lead{display:none}
.box.has-results .search-sticky{position:sticky;top:0;margin:0 -2px;padding:4px 2px 8px;background:linear-gradient(145deg,#fffaf2,#fffdf8)}
.result{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:13px;min-height:86px;border:1px solid #eadfd2;border-radius:11px;padding:8px 12px 8px 8px;background:#fff;color:inherit;text-decoration:none}
.result:hover{border-color:#b99372;box-shadow:0 3px 10px rgba(62,42,24,.07)}
.cover{display:flex;width:58px;height:76px;align-items:center;justify-content:center;overflow:hidden;border-radius:7px;background:#f1e7d9;color:#8b6d54;font-size:10px;font-weight:700;box-shadow:0 2px 7px rgba(62,42,24,.12)}
.cover img{display:block;width:100%;height:100%;object-fit:cover;background:#f5efe6}
.content{min-width:0;overflow-wrap:anywhere}
.title{display:block;font-size:15px;font-weight:700;line-height:1.45}
.meta{display:block;margin-top:4px;color:#786657;font-size:13px;line-height:1.45}
.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.pagination[hidden]{display:none}
.pagination button{min-width:88px;height:38px;padding:0 14px;border:1px solid #cdbda9;background:#fff;color:#7a2f25;font-size:14px}
.pagination button:hover:not(:disabled){border-color:#7a2f25;background:#fff8ef}
.page-label{min-width:70px;text-align:center;color:#786657;font-size:13px}
@media(max-width:520px){
  .box{padding:18px 14px}
  .box:not(.has-results){display:flex;flex-direction:column;padding:24px 18px}
  .box:not(.has-results) h2{margin:0 0 8px;font-size:23px;line-height:1.45}
  .box:not(.has-results) .lead{margin:0 0 18px;font-size:13.5px;line-height:1.6}
  .box:not(.has-results) .status{min-height:20px;margin:8px 2px 0;line-height:1.45}
  .box.no-results{justify-content:flex-start;padding-top:18px}
  .box.no-results .status{margin:12px 0 0;padding:15px 14px;text-align:left}
  .search{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:8px}
  input{padding:11px 13px;font-size:16px}
  .query-field input{height:88px;padding-left:35px}
  .query-icon{left:11px;width:17px;height:17px}
  .query-hint{left:35px;right:10px;font-size:12px;line-height:1.6}
  #submit{min-width:0;width:74px;height:88px;padding:0;margin:0;font-size:15px}
  .box.has-results{padding:8px 10px 12px}
  .box.has-results .search-sticky{margin:0 -2px;padding:3px 2px 7px}
  .result{grid-template-columns:50px minmax(0,1fr);gap:10px;min-height:78px;padding:7px 9px 7px 7px}
  .cover{width:50px;height:68px}
  .title{font-size:14px}
  .pagination{gap:8px}
  .pagination button{min-width:76px;height:40px;padding:0 10px}
}

/* Compact readable mobile search */
@media(max-width:520px){
 html,body{width:100%;min-width:0}
 .box:not(.has-results){min-height:0;padding:18px 16px;justify-content:flex-start}
 .box:not(.has-results) h2{font-size:24px;line-height:1.35;margin:0 0 8px}
 .box:not(.has-results) .lead{font-size:16px;line-height:1.5;margin:0 0 14px;padding:0;max-width:none}
 .search{grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
 .query-field{width:100%;min-width:0}
 .query-field input{height:76px;padding:10px 12px 10px 38px;font-size:18px}
 .query-icon{left:12px;width:18px;height:18px}
 .query-hint{left:38px;right:12px;font-size:16px;line-height:1.5;color:#67594d}
 #submit{width:100%;height:46px;min-width:0;font-size:18px;padding:0 16px}
 .box:not(.has-results) .status{font-size:14px;line-height:1.5;min-height:0;margin:8px 0 0}
 .box:not(.has-results) .results:empty{margin:0}
}