:root{--primary:#FFA94D;--bg:#FFF9F2;--text:#4A3B41;--muted:#FFC1D6}
*{box-sizing:border-box}
body{margin:0;font-family: "Microsoft JhengHei", Arial, sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header{background:#fff;border-bottom:1px solid rgba(0,0,0,0.03);}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:900;font-size:20px}
.controls{display:flex;gap:10px;align-items:center}
.controls input{padding:8px 12px;border-radius:10px;border:1px solid #f0d7df;background:#fff}
.controls button{background:var(--primary);color:#fff;padding:8px 12px;border-radius:10px;border:none;font-weight:800}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(0,0,0,0.04);padding:8px;border-radius:10px;cursor:pointer;margin-left:6px}
.icon-btn svg{display:block}

/* admin panel */
.admin-panel{position:fixed;inset:60px 20px 20px 20px;z-index:80;display:flex;align-items:flex-start;justify-content:center}
.admin-panel.hidden{display:none}
.admin-inner{background:#fff;padding:20px;border-radius:12px;width:100%;max-width:980px;box-shadow:0 8px 30px rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.04)}
.admin-inner h2{margin:0 0 8px}
.admin-inner .muted{color:rgba(0,0,0,0.45);margin-bottom:12px}
.admin-actions{display:flex;gap:8px}
.btn-primary{background:var(--primary);color:#fff;padding:8px 14px;border-radius:10px;border:none}
.btn-ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px 12px;border-radius:10px}
.banner{background:#fff;padding:36px;border-radius:18px;margin:20px 0;border:1px solid rgba(0,0,0,0.03)}
.banner h1{margin:0;font-size:28px}
.categories{display:flex;gap:8px;overflow:auto;padding:12px 0}
.categories button{padding:8px 14px;border-radius:999px;border:1px solid rgba(0,0,0,0.05);background:#fff;font-weight:800;cursor:pointer}
.categories button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin:18px 0}
.card{background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,0.03);overflow:hidden;display:flex;flex-direction:column}
.card .cover{height:260px;background:linear-gradient(180deg,#ffeef3,#fff);display:flex;align-items:center;justify-content:center}
.card img{width:100%;height:100%;object-fit:cover}
.card .body{padding:18px;flex:1;display:flex;flex-direction:column}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0 0 8px;color:var(--muted)}
.card .meta{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:12px}
.card .actions{display:flex;gap:8px}
.btn-icon{background:#fff;border:1px solid rgba(0,0,0,0.04);padding:8px;border-radius:8px;cursor:pointer}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35)}
.modal.hidden{display:none}
.modal-inner{background:#fff;padding:20px;border-radius:14px;max-width:520px;width:100%;position:relative}
.modal-close{position:absolute;right:12px;top:12px;border:none;background:transparent;font-size:18px;cursor:pointer}
#add-form input,#add-form select,#add-form textarea{width:100%;padding:10px;margin:8px 0;border-radius:10px;border:1px solid rgba(0,0,0,0.06)}
#add-form button{background:var(--primary);color:#fff;padding:10px 12px;border-radius:10px;border:none;width:100%;font-weight:900}
@media (max-width:600px){.banner h1{font-size:20px}.container{padding:12px}}