:root{--pink:#f0a8b8;--pink-light:#fce4ec;--pink-dark:#d48595;--lavender:#b8b8f0;--lavender-light:#e8e8fc;--mint:#a8d8c8;--mint-light:#e0f5ed;--peach:#f5c8a8;--peach-light:#fff0e8;--bg:#fdf6f3;--card:#ffffff;--text:#4a4a5a;--text-light:#9898a8;--radius:20px;--radius-sm:12px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh}
a{color:var(--pink-dark);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 24px;border-radius:50px;border:none;cursor:pointer;font-size:14px;font-weight:600;transition:all .25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.btn:active{transform:translateY(0)}
.btn-pri{background:linear-gradient(135deg,var(--pink),var(--peach));color:#fff}
.btn-out{background:#fff;border:2px solid var(--pink);color:var(--pink-dark)}
.btn-out:hover{background:var(--pink-light)}
.btn-danger{background:#ff8a95;color:#fff}
.btn-sm{padding:6px 16px;font-size:12px}
.btn-block{width:100%}
.input{width:100%;padding:12px 18px;border:2px solid #f0e0e5;border-radius:var(--radius-sm);font-size:14px;outline:none;transition:border .25s;background:#fefefe}
.input:focus{border-color:var(--pink)}
textarea.input{resize:vertical;min-height:80px}
.card{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:0 2px 16px rgba(0,0,0,.04)}
.card:hover{box-shadow:0 6px 24px rgba(0,0,0,.08)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:50px;font-size:12px;font-weight:500;cursor:pointer;user-select:none}.tag:hover{opacity:0.85}
.tag-0{background:var(--pink-light);color:var(--pink-dark)}
.tag-1{background:var(--lavender-light);color:#7878c0}
.tag-2{background:var(--mint-light);color:#609080}
.tag-3{background:var(--peach-light);color:#c88060}
.tag.active{font-weight:700;border:2px solid currentColor}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:13px;color:#666}
.navbar{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0e0e5;position:sticky;top:0;z-index:100}
.navbar .logo{font-size:20px;font-weight:800;color:var(--pink-dark);letter-spacing:-.5px}
.nav-right{display:flex;align-items:center;gap:12px}
.search-inp{width:200px;padding:8px 14px;border-radius:50px;font-size:13px;border:2px solid #f0e0e5;outline:none}
.search-inp:focus{border-color:var(--pink)}
.dash-layout{display:flex;min-height:calc(100vh - 60px)}
.sidebar{width:200px;background:#fff;border-right:1px solid #f0e0e5;padding:16px 0;flex-shrink:0}
.sidebar a{display:flex;align-items:center;gap:8px;padding:12px 20px;color:var(--text);font-size:14px;transition:all .2s;border-radius:0 24px 24px 0;margin-right:8px}
.sidebar a:hover,.sidebar a.active{background:var(--pink-light);color:var(--pink-dark);font-weight:600;text-decoration:none}
.main{flex:1;padding:24px;overflow-y:auto}
.bm-card{background:#fff;border-radius:var(--radius);padding:20px;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.04);transition:all .25s;border:1px solid transparent}
.bm-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.08);border-color:var(--pink-light)}
.bm-domain{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.bm-favicon{width:20px;height:20px;border-radius:4px}
.bm-domain-text{font-size:12px;color:var(--text-light)}
.bm-title{font-size:16px;font-weight:700;margin-bottom:8px;line-height:1.4}
.bm-summary{font-size:13px;color:#777;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bm-footer{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.bkmlt-btn{display:inline-block;padding:14px 32px;border-radius:50px;background:linear-gradient(135deg,var(--lavender),var(--pink));color:#fff;font-size:16px;font-weight:700;cursor:grab;box-shadow:0 4px 20px rgba(180,150,200,.4);transition:all .25s}
.bkmlt-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 30px rgba(180,150,200,.5);text-decoration:none;color:#fff}
.auth-box{max-width:420px;margin:40px auto}
.auth-box .card{padding:36px}
.auth-box h2{text-align:center;margin-bottom:24px;font-size:24px}
.hero{text-align:center;padding:60px 20px}
.hero h1{font-size:42px;font-weight:900;background:linear-gradient(135deg,var(--pink-dark),var(--peach));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:18px;color:var(--text-light);max-width:500px;margin:16px auto}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;background:#fff;padding:12px 28px;border-radius:50px;box-shadow:0 4px 24px rgba(0,0,0,.12);font-size:14px;font-weight:600}
.toast-ok{border:2px solid var(--mint);color:#609080}
.toast-err{border:2px solid var(--pink);color:var(--pink-dark)}
.empty{text-align:center;padding:60px 20px;color:var(--text-light)}
.empty-icon{font-size:64px;margin-bottom:16px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;padding:0 6px;background:var(--pink-light);color:var(--pink-dark);font-size:11px;font-weight:700}
.detail-section{margin-top:20px}
.detail-section h3{font-size:14px;color:var(--text-light);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .4s ease}
[v-cloak]{display:none}
@media(max-width:768px){.dash-layout{flex-direction:column}.sidebar{width:100%;display:flex;overflow-x:auto;padding:8px;border-right:none;border-bottom:1px solid #f0e0e5}.sidebar a{white-space:nowrap;border-radius:50px;margin:0 4px;padding:8px 16px}.card-grid{grid-template-columns:1fr}.hero h1{font-size:32px}}