:root{--bg:#faf8f5;--surface:#fff;--text:#1e1c1a;--muted:#767068;--border:#e8e3dc;--accent:#8b6f47;--star:#d4a72c;--danger:#b5484a;}
@media (prefers-color-scheme: dark){:root{--bg:#181614;--surface:#242220;--text:#f2ede6;--muted:#a39a8e;--border:#38332c;--accent:#d3ab74;--star:#e0b840;--danger:#e07577;}}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.muted{color:var(--muted);}

.loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.loginBox{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;width:100%;max-width:340px;text-align:center;}
.loginBox h1{margin:0 0 6px;font-size:20px;}
.loginBox input{width:100%;padding:10px;margin:14px 0;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);font-size:15px;}
.loginBox .primary{width:100%;}
.error{color:var(--danger);font-size:13px;min-height:18px;}

header{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--border);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;z-index:10;}
header h1{font-size:18px;margin:0;}
.headerBtns{display:flex;gap:8px;}
.addBtn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;}
.iconBtn{background:none;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:14px;cursor:pointer;color:var(--text);}

.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;-webkit-overflow-scrolling:touch;}
.chip{flex:none;padding:6px 14px;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;cursor:pointer;white-space:nowrap;}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent);}

main{padding:0 16px 40px;max-width:900px;margin:0 auto;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;}
.card img{width:100%;height:110px;object-fit:cover;background:var(--bg);}
.noimg{width:100%;height:110px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;background:var(--bg);}
.cbody{padding:8px 10px;}
.cname{font-size:14px;font-weight:600;margin:0 0 2px;}
.ccat{font-size:11px;color:var(--muted);margin:0 0 4px;}
.stars{color:var(--star);font-size:13px;letter-spacing:1px;}
.empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:14px;}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:100;}
.sheet{background:var(--surface);width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:18px;max-height:88vh;overflow-y:auto;}
.sheetHead{position:relative;}
.sheet h2{margin:0 0 14px;font-size:17px;}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px;}
input[type=text],textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;}
textarea{min-height:70px;resize:vertical;}
.starPick{font-size:26px;color:var(--border);cursor:pointer;user-select:none;}
.starPick span.on{color:var(--star);}
.photoRow{display:flex;align-items:center;gap:10px;margin-top:6px;}
.photoRow img{width:56px;height:56px;object-fit:cover;border-radius:8px;}
.smallBtn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;}
.actions{display:flex;gap:10px;margin-top:18px;}
.primary{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:11px;font-size:14px;font-weight:600;cursor:pointer;flex:1;}
.deleteBtn{background:none;border:1px solid var(--danger);color:var(--danger);border-radius:10px;padding:11px 14px;font-size:14px;cursor:pointer;}
.closeX{position:absolute;right:0;top:-2px;background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;}