*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary-50:#f3f5f9;--primary-100:#e1e7f1;--primary-200:#c3d0e3;
  --primary-300:#9cb3d1;--primary-400:#6c8fba;--primary-500:#416d9d;
  --primary-600:#305580;--primary-700:#254267;--primary-800:#1d3552;
  --primary-900:#192e45;
  --secondary-50:#fdf8f3;--secondary-100:#f6ede1;--secondary-200:#ead6ba;
  --accent-50:#f2faf6;--accent-100:#d9f0e5;--accent-500:#3c976d;
  --accent-600:#2e7755;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
  --gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;
  --gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;
  --sidebar-w:280px;--radius:14px;
  --shadow:0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:0 6px 20px rgba(0,0,0,0.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.1);
  --shadow-glow:0 0 0 1px rgba(65,109,157,.08),0 4px 16px rgba(65,109,157,.1);
  --bg:#fdf8f3;--bg-card:#fff;--bg-sidebar:#fff;
  --text:#1f2937;--text-secondary:#6b7280;
  --border:#e1e7f1;--card-hover-border:#c3d0e3;
}
html.dark{
  --primary-50:#1e293b;--primary-100:#1e3a5f;--primary-200:#2d4a7a;
  --primary-300:#3d5f96;--primary-400:#5a7db5;--primary-500:#6c8fba;
  --primary-600:#8aabcc;--primary-700:#a8c4dd;--primary-800:#c5d8eb;--primary-900:#e1ebf5;
  --secondary-50:#1a1a1a;--secondary-100:#2a2a2a;--secondary-200:#3a3a3a;
  --accent-50:#1a2e24;--accent-100:#2a4536;--accent-500:#4caf7a;--accent-600:#66bb8a;
  --gray-50:#1a1a1a;--gray-100:#2a2a2a;--gray-200:#3a3a3a;
  --gray-300:#5a5a5a;--gray-400:#7a7a7a;--gray-500:#9a9a9a;
  --gray-600:#b0b0b0;--gray-700:#d0d0d0;--gray-800:#e8e8e8;--gray-900:#f5f5f5;
  --bg:#1a1a1a;--bg-card:#222;--bg-sidebar:#1a1a1a;
  --text:#e8e8e8;--text-secondary:#9a9a9a;
  --border:#2a2a2a;--card-hover-border:#3a3a3a;
  --shadow:0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:0 6px 20px rgba(0,0,0,0.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.5);
  --shadow-glow:0 0 0 1px rgba(100,150,220,.12),0 4px 16px rgba(100,150,220,.15);
}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;
  transition:background .3s,color .3s
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--primary-200);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--primary-400)}
a{text-decoration:none;color:inherit}
.app{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:var(--bg-sidebar);border-right:1px solid var(--border);
  z-index:100;overflow-y:auto;transition:transform .3s,background .3s,border-color .3s;
  box-shadow:2px 0 12px rgba(0,0,0,.03)
}
.sidebar-inner{display:flex;flex-direction:column;height:100%;padding:1.75rem 1.25rem}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.sidebar-logo{font-size:1.5rem;font-weight:700;color:var(--primary-600)}
.sidebar-close-btn{
  display:none;font-size:1.6rem;color:var(--gray-400);cursor:pointer;
  width:34px;height:34px;border-radius:8px;border:none;background:transparent;
  align-items:center;justify-content:center
}
.sidebar-close-btn:hover{background:var(--gray-100);color:var(--gray-600)}

/* Theme Toggle */
.theme-toggle{
  width:34px;height:34px;border-radius:8px;border:none;font-size:1.1rem;
  cursor:pointer;background:var(--gray-100);color:var(--gray-600);
  display:flex;align-items:center;justify-content:center;transition:all .2s
}
.theme-toggle:hover{background:var(--primary-100);color:var(--primary-600)}
.hero .theme-toggle{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.hero .theme-toggle:hover{background:rgba(255,255,255,.2)}
.hero-top-row{display:flex;align-items:center;gap:10px}
.hero-theme-btn{display:none}
@media(max-width:768px){.hero-theme-btn{display:inline-flex}}

/* Sidebar Section (Recent) */
.sidebar-section{margin-bottom:1rem}
.recent-list{display:flex;flex-direction:column;gap:2px;max-height:140px;overflow-y:auto}
.recent-item{
  display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;
  font-size:.82rem;color:var(--text-secondary);cursor:pointer;transition:all .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.recent-item:hover{background:var(--gray-100);color:var(--text)}
.recent-item .recent-dot{width:6px;height:6px;border-radius:50%;background:var(--primary-400);flex-shrink:0}
.recent-empty{font-size:.8rem;color:var(--gray-400);padding:4px 8px}

/* Search */
.search-wrap{position:relative;margin-bottom:1rem}
.search-wrap .search-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--gray-400);pointer-events:none
}
.search-wrap input{
  width:100%;padding:12px 14px 12px 44px;border:1.5px solid var(--border);
  border-radius:12px;font-size:1rem;background:var(--bg-card);color:var(--text);
  outline:none;transition:border-color .2s,background .3s
}
.search-wrap input:focus{border-color:var(--primary-400);box-shadow:0 0 0 3px var(--primary-100)}
.search-wrap input::placeholder{color:var(--gray-400)}

/* Category Nav */
.cat-nav{flex:1;overflow-y:auto}
.cat-nav-title{
  font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gray-400);margin-bottom:.6rem
}
.cat-item{
  display:flex;align-items:center;width:100%;padding:.5rem .75rem;
  border-radius:8px;font-size:.9rem;color:var(--text-secondary);
  cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);border:none;background:none;text-align:left;gap:.5rem;
  position:relative;overflow:hidden
}
.cat-item::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0 3px 3px 0;
  background:var(--primary-500);transform:scaleY(0);transition:transform .2s;transform-origin:center
}
.cat-item:hover{background:var(--gray-100);color:var(--text);padding-left:1rem}
.cat-item.active{background:var(--primary-100);color:var(--primary-600);font-weight:600}
.cat-item.active::after{transform:scaleY(1)}
.cat-item .cat-badge{
  margin-left:auto;font-size:.74rem;color:var(--gray-400);
  background:var(--gray-100);padding:1px 7px;border-radius:4px;transition:background .3s
}
.cat-item.active .cat-badge{background:var(--primary-200);color:var(--primary-600)}
.cat-item-svg{width:18px;height:18px;flex-shrink:0;color:var(--text-secondary)}
.cat-item.active .cat-item-svg{color:var(--primary-500)}

/* Sidebar Footer */
.sidebar-footer{padding-top:.8rem;margin-top:auto;border-top:1px solid var(--border)}
.sidebar-actions{display:flex;gap:6px;margin-bottom:8px}
.sidebar-action-btn{
  flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--border);
  font-size:.8rem;cursor:pointer;background:var(--bg-card);color:var(--text-secondary);
  transition:all .2s;font-weight:500
}
.sidebar-action-btn:hover{background:var(--primary-100);color:var(--primary-600);transform:translateY(-1px);box-shadow:0 2px 8px rgba(65,109,157,.12)}
.sidebar-msg{font-size:.78rem;color:var(--gray-400)}
.sidebar-msg kbd{
  display:inline-block;padding:1px 5px;border-radius:3px;font-size:.72rem;
  background:var(--gray-100);border:1px solid var(--border);font-family:inherit;margin:0 1px
}

/* Mobile Overlay */
.mobile-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90;
  opacity:0;pointer-events:none;transition:opacity .3s
}
.mobile-overlay.open{opacity:1;pointer-events:auto}

/* Main */
.main{margin-left:var(--sidebar-w);flex:1;min-width:0}

/* Hero */
.hero{
  background:linear-gradient(135deg,#1e3a5f 0%,#2d4a7a 25%,#1a4a6e 50%,#254267 75%,#1d3552 100%);
  color:#fff;padding:2.5rem 2.5rem 2rem;transition:background .3s;position:relative;overflow:hidden
}
.hero::before{
  content:'';position:absolute;top:-40%;right:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(60,151,109,.25) 0%,transparent 70%);
  border-radius:50%;pointer-events:none
}
.hero::after{
  content:'';position:absolute;bottom:-30%;left:10%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(108,143,186,.2) 0%,transparent 70%);
  border-radius:50%;pointer-events:none
}
.hero-inner{max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:2.5rem}
.hero-text{flex:1}
.hero-menu-btn{
  display:none;width:40px;height:40px;padding:8px;border-radius:10px;
  cursor:pointer;color:rgba(255,255,255,.8);background:rgba(255,255,255,.1);border:none
}
.hero-menu-btn:hover{background:rgba(255,255,255,.2)}
.hero-menu-btn svg{width:100%;height:100%}
.hero-badge{
  display:inline-flex;align-items:center;border-radius:999px;
  background:rgba(255,255,255,.1);padding:4px 14px;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--secondary-200);margin-bottom:.75rem
}
.hero-title{font-size:2.2rem;font-weight:700;margin-bottom:.5rem}
.hero-desc{font-size:1rem;color:rgba(255,255,255,.75);max-width:520px;line-height:1.7;margin-bottom:1rem}

/* Search Engine Bar */
.hero-search-bar{max-width:580px}
.engine-tabs{display:flex;gap:2px;margin-bottom:4px}
.engine-tab{
  padding:4px 14px;border-radius:6px 6px 0 0;border:none;font-size:.78rem;
  cursor:pointer;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);
  transition:all .2s;font-weight:500
}
.engine-tab:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.engine-tab.active{background:rgba(255,255,255,.18);color:#fff}
.hero-search-row{display:flex;gap:0;border-radius:10px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.hero-search-row input{
  flex:1;padding:12px 16px;border:none;font-size:1rem;outline:none;background:#fff;color:#333
}
.hero-search-row input::placeholder{color:#999}
.hero-search-btn{
  padding:12px 24px;border:none;font-size:1rem;font-weight:600;
  cursor:pointer;background:var(--accent-500);color:#fff;transition:background .2s
}
.hero-search-btn:hover{background:var(--accent-600)}

.hero-stats{
  flex-shrink:0;background:rgba(255,255,255,.1);backdrop-filter:blur(16px);
  border-radius:18px;padding:1.5rem 2rem;border:1px solid rgba(255,255,255,.18);
  text-align:right;min-width:170px;
  box-shadow:0 4px 24px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s
}
.hero-stats:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.15)}
.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.55)}
.stat-number{font-size:2.2rem;font-weight:700;margin:.25rem 0;line-height:1.2}
.stat-sub{font-size:.85rem;color:rgba(255,255,255,.65)}

/* Content */
.content{max-width:1300px;margin:0 auto;padding:1.5rem 2.5rem 4rem}
.content-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.content-title{font-size:1.2rem;font-weight:600;color:var(--text)}
.content-controls{display:flex;gap:8px;align-items:center}
.pagination-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  cursor:pointer;background:var(--bg-card);color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .15s
}
.pagination-btn:hover{background:var(--primary-100);color:var(--primary-600)}
.pagination-btn.active{background:var(--primary-100);color:var(--primary-600);border-color:var(--primary-400)}

/* Pinned Section */
.pinned-section{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.pinned-header{font-size:.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem}
.pinned-header::before{content:'📌 '}
.pinned-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}

/* Card Grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.2rem}

/* Card */
.card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow);
  transition:all .3s cubic-bezier(.4,0,.2,1),background .3s,border-color .3s;
  display:flex;flex-direction:column;position:relative;cursor:pointer;overflow:hidden
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius);opacity:0;
  background:linear-gradient(135deg,rgba(65,109,157,.06),rgba(60,151,109,.06));
  transition:opacity .3s;pointer-events:none
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow);border-color:var(--primary-300)}
.card:hover::before{opacity:1}
.card-top{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}
.card-icon{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:600;color:#fff;overflow:hidden;
  background:var(--primary-500);position:relative;
  transition:transform .3s,box-shadow .3s
}
.card:hover .card-icon{transform:scale(1.08);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.grad-0{background:linear-gradient(135deg,#667eea,#764ba2)!important}
.grad-1{background:linear-gradient(135deg,#f093fb,#f5576c)!important}
.grad-2{background:linear-gradient(135deg,#4facfe,#00f2fe)!important}
.grad-3{background:linear-gradient(135deg,#43e97b,#38f9d7)!important}
.grad-4{background:linear-gradient(135deg,#fa709a,#fee140)!important}
.grad-5{background:linear-gradient(135deg,#a18cd1,#fbc2eb)!important}
.grad-6{background:linear-gradient(135deg,#fccb90,#d57eeb)!important}
.grad-7{background:linear-gradient(135deg,#e0c3fc,#8ec5fc)!important}
.grad-8{background:linear-gradient(135deg,#f5576c,#ff6a88)!important}
.grad-9{background:linear-gradient(135deg,#667eea,#43e97b)!important}
.grad-10{background:linear-gradient(135deg,#ff9a9e,#fecfef)!important}
.grad-11{background:linear-gradient(135deg,#a1c4fd,#c2e9fb)!important}
.grad-12{background:linear-gradient(135deg,#d4fc79,#96e6a1)!important}
.grad-13{background:linear-gradient(135deg,#84fab0,#8fd3f4)!important}
.grad-14{background:linear-gradient(135deg,#fbc2eb,#a6c1ee)!important}
.grad-15{background:linear-gradient(135deg,#fdcbf1,#e6dee9)!important}
.grad-16{background:linear-gradient(135deg,#ffecd2,#fcb69f)!important}
.grad-17{background:linear-gradient(135deg,#ff8a80,#ff80ab)!important}
.grad-18{background:linear-gradient(135deg,#82aaff,#b388ff)!important}
.grad-19{background:linear-gradient(135deg,#69f0ae,#b9f6ca)!important}
.card-icon img{width:100%;height:100%;object-fit:cover}
.card-icon .letter{font-size:1.1rem;font-weight:600;color:#fff;position:relative;z-index:1}
.card-pin-btn{
  position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg-card);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  opacity:0;transition:opacity .2s;z-index:2;color:var(--text-secondary)
}
.card:hover .card-pin-btn{opacity:1}
.card-pin-btn.pinned{opacity:1;background:var(--primary-100);border-color:var(--primary-400)}
.card-info{flex:1;min-width:0}
.card-title{font-size:1rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.card-badge{
  display:inline-block;margin-top:4px;font-size:.74rem;color:var(--primary-600);
  background:var(--primary-50);padding:2px 9px;border-radius:4px;white-space:nowrap;transition:background .3s,color .3s
}
.card-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.6;margin-bottom:.6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s}
.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto}
.card-url{font-size:.78rem;color:var(--primary-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;transition:color .3s}
.copy-btn{
  flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:4px 11px;
  border-radius:7px;font-size:.78rem;font-weight:500;cursor:pointer;
  background:var(--accent-50);color:var(--accent-600);border:1px solid var(--accent-100);transition:all .15s
}
.copy-btn:hover{background:var(--accent-100)}
.copy-btn.copied{background:var(--accent-500);color:#fff;border-color:var(--accent-500)}

/* Hot marker */
.card-hot{position:absolute;top:8px;right:8px;font-size:.65rem;padding:2px 8px;border-radius:4px;background:#fef3c7;color:#d97706;font-weight:600;pointer-events:none}
html.dark .card-hot{background:rgba(217,119,6,.2);color:#fbbf24}

/* Card action buttons */
.card-actions{display:flex;gap:4px}
.card-action{
  width:28px;height:28px;border-radius:6px;border:none;font-size:.8rem;
  cursor:pointer;background:var(--gray-100);color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;transition:all .15s
}
.card-action:hover{background:var(--primary-100);color:var(--primary-600)}
.card-action.del:hover{background:#fee2e2;color:#dc2626}

/* Pagination */
.pagination-bar{
  display:flex;align-items:center;justify-content:center;gap:6px;margin-top:1.5rem;flex-wrap:wrap
}
.page-btn{
  min-width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  font-size:.85rem;cursor:pointer;background:var(--bg-card);color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;padding:0 8px;transition:all .15s
}
.page-btn:hover{background:var(--primary-100);color:var(--primary-600);border-color:var(--primary-300)}
.page-btn.active{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}
.page-btn:disabled{opacity:.4;cursor:default;background:var(--gray-100)}
.page-info{font-size:.82rem;color:var(--text-secondary);margin:0 8px}

/* FAB */
.fab{
  position:fixed;bottom:2.5rem;right:2.5rem;width:52px;height:52px;
  border-radius:14px;background:var(--primary-500);color:#fff;border:none;
  cursor:pointer;box-shadow:0 4px 20px rgba(65,109,157,.35);
  transition:all .3s;z-index:50;display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;font-weight:300;line-height:1
}
.fab:hover{transform:scale(1.08) rotate(90deg);box-shadow:0 6px 28px rgba(65,109,157,.45);background:var(--primary-600)}
.fab:active{transform:scale(0.95) rotate(90deg)}

/* Back to Top */
.back-to-top{
  position:fixed;bottom:2.5rem;left:calc(var(--sidebar-w) + 2.5rem);width:44px;height:44px;
  border-radius:12px;background:var(--bg-card);color:var(--text-secondary);
  border:1px solid var(--border);cursor:pointer;box-shadow:var(--shadow-md);
  transition:all .3s;z-index:50;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;opacity:0;pointer-events:none;transform:translateY(10px)
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--primary-100);color:var(--primary-600);transform:translateY(-2px)}
@media(max-width:768px){.back-to-top{left:1.5rem;bottom:1.5rem;width:40px;height:40px}}

/* Shortcut Hint */
.shortcut-hint{
  position:fixed;bottom:5.5rem;left:calc(var(--sidebar-w) + 1rem);z-index:40;
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
  padding:1rem;box-shadow:var(--shadow-md);min-width:180px;transition:opacity .3s,background .3s;
  opacity:0;pointer-events:none
}
.shortcut-hint.show{opacity:1;pointer-events:auto}
.shortcut-hint-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.shortcut-hint-header strong{font-size:.85rem;color:var(--text)}
.shortcut-hint-header button{
  border:none;background:none;font-size:1.2rem;cursor:pointer;color:var(--text-secondary);padding:0 4px
}
.shortcut-row{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:.82rem;color:var(--text-secondary)}
.shortcut-row kbd{
  display:inline-block;padding:2px 7px;border-radius:4px;font-size:.75rem;
  background:var(--gray-100);border:1px solid var(--border);font-family:inherit;min-width:30px;text-align:center;color:var(--text)
}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;z-index:1000;
  opacity:0;pointer-events:none;transition:opacity .3s
}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal{
  background:var(--bg-card);border-radius:18px;padding:1.75rem 2rem 2rem;
  width:92%;max-width:480px;box-shadow:0 25px 60px rgba(0,0,0,.2);
  border:1px solid var(--border);transform:scale(.92) translateY(15px);
  transition:transform .3s,background .3s
}
.modal-overlay.active .modal{transform:scale(1) translateY(0)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.modal-header h2{font-size:1.25rem;font-weight:600;color:var(--text);transition:color .3s}
.modal-close{
  width:32px;height:32px;border-radius:8px;border:none;font-size:1.4rem;
  cursor:pointer;color:var(--gray-400);background:transparent;
  display:flex;align-items:center;justify-content:center;transition:all .2s
}
.modal-close:hover{background:var(--gray-100);color:var(--gray-600)}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.35rem;color:var(--text-secondary)}
.form-group input,.form-group select{
  width:100%;padding:.75rem 1rem;border:1.5px solid var(--border);
  border-radius:10px;font-size:.9rem;background:var(--bg);color:var(--text);outline:none;transition:border-color .2s,background .3s,color .3s
}
.form-group input:focus,.form-group select:focus{border-color:var(--primary-400);box-shadow:0 0 0 3px var(--primary-100)}
.form-group select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.5rem
}
.btn-primary{
  width:100%;padding:.85rem;border:none;border-radius:11px;
  background:linear-gradient(135deg,var(--primary-500),var(--primary-600));
  color:#fff;font-size:1rem;font-weight:600;
  cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(65,109,157,.25)
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(65,109,157,.35)}
.btn-primary:active{transform:translateY(0)}

/* Toast */
.toast{
  position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(1rem);
  background:var(--gray-800);color:#fff;padding:.65rem 1.5rem;border-radius:10px;
  font-size:.88rem;z-index:2000;opacity:0;pointer-events:none;
  transition:all .35s cubic-bezier(.4,0,.2,1);white-space:nowrap;max-width:90vw;
  overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 20px rgba(0,0,0,.2);
  backdrop-filter:blur(8px)
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.toast-success{background:linear-gradient(135deg,#2e7755,#3c976d)}
.toast.toast-error{background:linear-gradient(135deg,#dc2626,#ef4444)}

/* Loading Skeleton */
.loading-skeleton{display:contents}
.sk-card{
  height:150px;border-radius:var(--radius);background:var(--gray-100);
  position:relative;overflow:hidden
}
.sk-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:sk-shimmer 1.5s infinite
}
@keyframes sk-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Empty */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-secondary)}
.empty-state-icon{font-size:2.5rem;margin-bottom:.6rem}
.empty-state p{font-size:.95rem}
.empty-state-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:1rem}
.empty-state-suggestions button{
  padding:6px 16px;border-radius:8px;border:1px solid var(--border);
  font-size:.85rem;cursor:pointer;background:var(--bg-card);color:var(--text-secondary);transition:all .15s
}
.empty-state-suggestions button:hover{background:var(--primary-100);color:var(--primary-600)}

/* File input hidden */
.file-input-hidden{display:none}

/* Card fade-in animation */
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.card-grid .card{animation:cardIn .4s cubic-bezier(.4,0,.2,1) both}
.card-grid .card:nth-child(1){animation-delay:0ms}
.card-grid .card:nth-child(2){animation-delay:40ms}
.card-grid .card:nth-child(3){animation-delay:80ms}
.card-grid .card:nth-child(4){animation-delay:120ms}
.card-grid .card:nth-child(5){animation-delay:160ms}
.card-grid .card:nth-child(6){animation-delay:200ms}
.card-grid .card:nth-child(7){animation-delay:240ms}
.card-grid .card:nth-child(8){animation-delay:280ms}
.card-grid .card:nth-child(9){animation-delay:320ms}
.card-grid .card:nth-child(10){animation-delay:360ms}

/* Responsive */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close-btn{display:flex}
  .hero-theme-btn{display:inline-flex}
  .mobile-overlay.open{opacity:1;pointer-events:auto}
  .main{margin-left:0}
  .hero{padding:1.5rem 1.25rem 1.5rem}
  .hero-inner{flex-direction:column;align-items:stretch;text-align:center}
  .hero-title{font-size:1.6rem}
  .hero-desc{max-width:none;margin-left:auto;margin-right:auto}
  .hero-search-bar{max-width:100%}
  .hero-stats{text-align:center;min-width:0;margin-top:.5rem}
  .hero-menu-btn{display:inline-flex}
  .content{padding:1rem 1rem 3rem}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .card{padding:.9rem 1rem}
  .card-icon{width:38px;height:38px;border-radius:8px;font-size:1rem}
  .card-title{font-size:.9rem}
  .card-desc{font-size:.8rem;-webkit-line-clamp:1}
  .card-url{font-size:.72rem;max-width:100px}
  .fab{bottom:1.25rem;right:1.25rem;width:48px;height:48px;font-size:1.6rem}
  .shortcut-hint{bottom:5rem;left:1rem;right:1rem;min-width:auto}
  .stat-number{font-size:1.8rem}
  .pinned-grid{grid-template-columns:1fr}
  .back-to-top{left:1.25rem;bottom:1.25rem}
}
@media(max-width:480px){
  .hero-title{font-size:1.4rem}
  .stat-number{font-size:1.5rem}
  .hero{padding:1.25rem 1rem}
  .content{padding:.75rem}
  .hero-search-btn{padding:12px 16px}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
}

/* Context Menu */
.ctx-menu{
  position:fixed;z-index:2000;background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;padding:6px;box-shadow:var(--shadow-lg);min-width:180px;
  opacity:0;transform:scale(.95);pointer-events:none;transition:all .15s;
  transform-origin:top left
}
.ctx-menu.show{opacity:1;transform:scale(1);pointer-events:auto}
.ctx-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;
  border:none;background:none;font-size:.85rem;color:var(--text-secondary);
  border-radius:7px;cursor:pointer;transition:all .12s;text-align:left
}
.ctx-menu-item:hover{background:var(--primary-100);color:var(--primary-600)}
.ctx-menu-item.danger:hover{background:#fee2e2;color:#dc2626}
.ctx-menu-sep{height:1px;background:var(--border);margin:4px 8px}

/* Empty State Improved */
.empty-state{text-align:center;padding:4rem 1.5rem;color:var(--text-secondary)}
.empty-state-icon{
  font-size:3.5rem;margin-bottom:1rem;
  animation:float 3s ease-in-out infinite
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.empty-state p{font-size:1rem;line-height:1.7;max-width:360px;margin:0 auto}
.empty-state-suggestions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:1.25rem}
.empty-state-suggestions button{
  padding:8px 20px;border-radius:10px;border:1px solid var(--border);
  font-size:.88rem;cursor:pointer;background:var(--bg-card);color:var(--text-secondary);
  transition:all .2s;font-weight:500
}
.empty-state-suggestions button:hover{background:var(--primary-100);color:var(--primary-600);transform:translateY(-1px)}