*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;background:#f5f7fa;color:#222;line-height:1.6}
.topbar{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.topbar h1{margin:0;font-size:1.4rem}
.search{display:flex;gap:8px;align-items:center}
.search input{padding:8px 12px;border:0;border-radius:6px;width:280px;font-size:.95rem}
.search button{padding:8px 16px;border:0;border-radius:6px;background:#fff;color:#667eea;font-weight:600;cursor:pointer}
.search .clear{color:#fff;text-decoration:underline;font-size:.85rem}
.container{max-width:960px;margin:24px auto;padding:0 16px}
.card{background:#fff;padding:16px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.add-form h2,.list h2,.tags h3{margin:0 0 10px;font-size:1.1rem;color:#333}
.row{margin-bottom:10px}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row input,.row textarea{width:100%;padding:9px 12px;border:1px solid #d0d7de;border-radius:6px;font-size:.95rem;font-family:inherit}
.btn-primary{background:#667eea;color:#fff;border:0;padding:9px 22px;border-radius:6px;font-weight:600;cursor:pointer;font-size:.95rem}
.btn-primary:hover{background:#5568d3}
.tags{margin-top:24px}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:#fff;padding:5px 12px;border-radius:14px;text-decoration:none;color:#555;border:1px solid #d0d7de;font-size:.85rem}
.tag.active{background:#667eea;color:#fff;border-color:#667eea}
.tag span{opacity:.6;margin-left:4px;font-size:.8em}
.list{margin-top:24px}
.count{color:#888;font-size:.85rem;font-weight:400;margin-left:6px}
.empty{color:#888;text-align:center;padding:30px;background:#fff;border-radius:8px}
.bm-card{background:#fff;padding:14px 18px;border-radius:10px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.05);border-left:3px solid #667eea}
.bm-head{display:flex;align-items:center;gap:8px}
.favicon{width:18px;height:18px;flex-shrink:0}
.bm-title{font-size:1.05rem;font-weight:600;color:#1f4abf;text-decoration:none;word-break:break-word}
.bm-title:hover{text-decoration:underline}
.bm-url{color:#888;font-size:.8rem;word-break:break-all;margin:2px 0 6px}
.bm-desc{color:#555;font-size:.9rem;margin:6px 0;white-space:pre-wrap}
.bm-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.bm-tags{display:flex;gap:5px;flex-wrap:wrap}
.tag-mini{font-size:.78rem;color:#667eea;background:#eef0fb;padding:2px 8px;border-radius:10px;text-decoration:none}
.bm-meta{display:flex;gap:10px;align-items:center;font-size:.78rem;color:#888}
.link{background:0;border:0;color:#667eea;cursor:pointer;font-size:.82rem;padding:0}
.link:hover{text-decoration:underline}
.link.danger{color:#d33}
.bm-edit{display:none;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed #eee}
.bm-edit input,.bm-edit textarea{padding:7px 10px;border:1px solid #d0d7de;border-radius:5px;font-family:inherit;font-size:.9rem}
.flash{padding:10px 16px;margin:0;text-align:center;font-size:.9rem}
.flash-success{background:#d1f5d3;color:#1d6b21}
.flash-error{background:#f8d7da;color:#841a23}
@media (max-width:600px){.row.two{grid-template-columns:1fr}.search input{width:auto;flex:1}}