/* ═══════════════════════════════════════════════════════════
   BookmarkHub – Stylesheet
   ═══════════════════════════════════════════════════════════ */

:root {
  --primary:       #3B82F6;
  --primary-dark:  #2563EB;
  --primary-light: #EFF6FF;
  --primary-mid:   #BFDBFE;

  --sidebar-bg:     #0F2340;
  --sidebar-hover:  #1a3558;
  --sidebar-active: #1e4170;
  --sidebar-border: rgba(255,255,255,0.07);
  --sidebar-text:   #94A3B8;
  --sidebar-light:  #CBD5E1;
  --sidebar-white:  #F1F5F9;

  --bg:      #EEF4FB;
  --bg-card: #FFFFFF;

  --border:       #DDE6F0;
  --border-focus: #3B82F6;

  --text-1: #0F172A;
  --text-2: #475569;
  --text-3: #94A3B8;

  --success:     #10B981;
  --danger:      #EF4444;
  --danger-dark: #DC2626;

  --shadow-sm: 0 1px 2px rgba(15,35,64,.06);
  --shadow:    0 2px 8px rgba(15,35,64,.08), 0 1px 2px rgba(15,35,64,.04);
  --shadow-md: 0 4px 16px rgba(15,35,64,.10), 0 2px 4px rgba(15,35,64,.06);
  --shadow-lg: 0 12px 32px rgba(15,35,64,.14);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --sidebar-w: 260px;
  --topbar-h:  64px;
  --ease:      cubic-bezier(.4,0,.2,1);
  --t:         .18s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-1);
  background: var(--bg);
  overflow: hidden;
}
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea {
  font: inherit;
  color: var(--text-1);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  outline: none;
  width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
textarea { resize: vertical; }
.hidden { display: none !important; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500;
  transition: all var(--t); white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary  { background: var(--primary); color:#fff; box-shadow:0 1px 3px rgba(59,130,246,.3); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background:#fff; color:var(--text-2); border:1.5px solid var(--border); }
.btn-secondary:hover { background:var(--bg); color:var(--text-1); border-color:#c0cfe0; }
.btn-danger   { background: var(--danger); color:#fff; }
.btn-danger:hover { background: var(--danger-dark); }
.btn-full { width:100%; justify-content:center; padding:.65rem 1rem; }

.btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--radius-sm);
  color:var(--text-2); transition:all var(--t); flex-shrink:0;
}
.btn-icon:hover  { background:var(--bg); color:var(--text-1); }
.btn-icon.active { background:var(--primary-light); color:var(--primary); }

.btn-icon-sm {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:4px;
  color:var(--sidebar-text); transition:all var(--t);
}
.btn-icon-sm:hover { background:rgba(255,255,255,.12); color:var(--sidebar-white); }

/* ── Forms ──────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-group label { font-size:12.5px; font-weight:600; color:var(--text-2); }
.form-row  { display:flex; gap:.75rem; }
.form-row.two-cols > * { flex:1; min-width:0; }
.form-group.full { flex:1; }
.required { color:var(--danger); }

.input-icon { position:relative; }
.input-icon > i:first-child {
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); pointer-events:none;
}
.input-icon input { padding-left:2.25rem; }
.toggle-password {
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); padding:.25rem;
}
.toggle-password:hover { color:var(--text-2); }

.error-msg {
  color:var(--danger); font-size:12.5px;
  padding:.4rem .6rem; background:#FEF2F2;
  border-radius:var(--radius-sm); border-left:3px solid var(--danger);
}
.info-banner {
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem .75rem;
  background:var(--primary-light); border:1px solid var(--primary-mid);
  border-radius:var(--radius-sm); color:var(--primary-dark); font-size:13px;
}

/* ══════════════════════════════════════════════
   AUTH PAGE
   ══════════════════════════════════════════════ */
.auth-page { height:100vh; display:flex; }
.auth-bg {
  width:100%; height:100%; display:flex;
  align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0F2340 0%,#1e4a8c 55%,#3B82F6 100%);
  padding:1rem;
}
.auth-card {
  background:#fff; border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); padding:2.5rem 2rem;
  width:100%; max-width:400px;
  display:flex; flex-direction:column; gap:1.25rem;
}
.auth-logo { text-align:center; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.auth-logo i  { font-size:2.5rem; color:var(--primary); filter:drop-shadow(0 2px 8px rgba(59,130,246,.3)); }
.auth-logo h1 { font-size:1.6rem; font-weight:700; }
.auth-logo p  { color:var(--text-3); font-size:13px; }

/* ══════════════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════════════ */
.app { display:flex; height:100vh; overflow:hidden; }

/* ── Sidebar ────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); min-width:var(--sidebar-w);
  background:var(--sidebar-bg);
  display:flex; flex-direction:column; overflow:hidden;
  transition:width var(--t), min-width var(--t); z-index:100;
}
.sidebar.collapsed { width:64px; min-width:64px; }

.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1rem .9rem; border-bottom:1px solid var(--sidebar-border);
  flex-shrink:0;
}
.logo { display:flex; align-items:center; gap:.6rem; overflow:hidden; }
.logo i    { color:var(--primary); font-size:1.25rem; flex-shrink:0; }
.logo span { font-size:1rem; font-weight:700; color:var(--sidebar-white); white-space:nowrap; }

.sidebar-toggle {
  color:var(--sidebar-text); width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px; transition:all var(--t); flex-shrink:0;
}
.sidebar-toggle:hover { background:var(--sidebar-hover); color:var(--sidebar-white); }
.sidebar.collapsed .sidebar-toggle i { transform:rotate(180deg); }

.sidebar-search { padding:.75rem .75rem .5rem; flex-shrink:0; }
.search-box { position:relative; display:flex; align-items:center; }
.search-box > i:first-child {
  position:absolute; left:.65rem; color:var(--sidebar-text); font-size:12px; pointer-events:none;
}
.search-box input {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  color:var(--sidebar-white); padding:.45rem 1.8rem .45rem 2rem;
  font-size:13px; border-radius:20px;
}
.search-box input::placeholder { color:var(--sidebar-text); }
.search-box input:focus { background:rgba(255,255,255,.12); border-color:rgba(59,130,246,.5); box-shadow:none; }
.clear-search { position:absolute; right:.5rem; color:var(--sidebar-text); padding:.2rem; border-radius:4px; font-size:12px; }
.clear-search:hover { color:var(--sidebar-white); }

.sidebar-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:.25rem .5rem; }
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }

.nav-section { margin-bottom:.5rem; }
.nav-section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .5rem .25rem;
  color:var(--sidebar-text); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.nav-item {
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .6rem; border-radius:var(--radius-sm);
  color:var(--sidebar-light); font-size:13.5px;
  transition:all var(--t); cursor:pointer; user-select:none; position:relative;
}
.nav-item:hover  { background:var(--sidebar-hover); color:var(--sidebar-white); }
.nav-item.active { background:var(--sidebar-active); color:var(--sidebar-white); font-weight:600; }
.nav-item i { width:16px; text-align:center; flex-shrink:0; font-size:13px; }
.nav-label  { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-count  {
  background:rgba(255,255,255,.12); color:var(--sidebar-light);
  font-size:11px; font-weight:600; padding:1px 6px; border-radius:10px; flex-shrink:0;
}
.nav-item.active .nav-count { background:rgba(255,255,255,.2); }

.nav-col-item { position:relative; }
.nav-col-item:hover > .nav-col-link .col-actions { opacity:1; }
.nav-col-item.dragging { opacity:.4; }
.nav-col-item.drag-over > .nav-col-link { background:var(--sidebar-active); outline:1px dashed rgba(148,163,184,.5); }

/* ── Hierarquia de pastas ─── */
.col-children {
  margin-left:1.1rem;
  border-left:1px solid rgba(255,255,255,.1);
  padding-left:2px;
}
.col-toggle-btn {
  width:14px; height:14px; display:flex; align-items:center; justify-content:center;
  border-radius:3px; color:var(--sidebar-text); font-size:9px; flex-shrink:0;
  transition:transform var(--t), color var(--t); cursor:pointer;
}
.col-toggle-btn:hover { color:var(--sidebar-white); }
.nav-col-item.open > .nav-col-link .col-toggle-btn { transform:rotate(90deg); }
.col-spacer { width:14px; height:14px; flex-shrink:0; }

.drag-handle {
  color:var(--sidebar-text); font-size:10px; opacity:0;
  cursor:grab; transition:opacity var(--t); flex-shrink:0;
}
.nav-col-item:hover > .nav-col-link .drag-handle { opacity:1; }
.nav-col-item.dragging .drag-handle { cursor:grabbing; }
.col-actions {
  opacity:0; display:flex; gap:1px; transition:opacity var(--t);
  position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
}
.col-action-btn {
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  border-radius:4px; color:var(--sidebar-text); font-size:11px; transition:all var(--t);
}
.col-action-btn:hover          { background:rgba(255,255,255,.15); color:var(--sidebar-white); }
.col-action-btn.danger:hover   { background:rgba(239,68,68,.2); color:#fca5a5; }

/* ── Drag-and-drop: pasta como destino de bookmark ── */
.nav-item.bm-drop-target { background:var(--sidebar-hover); }
.nav-item.bm-drop-target.bm-drag-over { background:var(--primary) !important; color:#fff; outline:1px dashed rgba(255,255,255,.5); }

.tag-nav-item {
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem; border-radius:var(--radius-sm);
  color:var(--sidebar-light); font-size:13px; cursor:pointer; transition:all var(--t);
}
.tag-nav-item:hover  { background:var(--sidebar-hover); color:var(--sidebar-white); }
.tag-nav-item.active { background:var(--sidebar-active); color:var(--sidebar-white); }
.tag-nav-item i { color:var(--primary); font-size:11px; width:14px; }
.tag-nav-count { margin-left:auto; font-size:11px; color:var(--sidebar-text); }

/* Collapsed states */
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-count,
.sidebar.collapsed .nav-section-header span,
.sidebar.collapsed .logo span,
.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .col-actions,
.sidebar.collapsed .col-toggle-btn,
.sidebar.collapsed .col-spacer,
.sidebar.collapsed .drag-handle,
.sidebar.collapsed .col-children,
.sidebar.collapsed .tag-nav-item span,
.sidebar.collapsed .tag-nav-count  { display:none; }
.sidebar.collapsed .nav-section-header { justify-content:center; }
.sidebar.collapsed .btn-icon-sm  { display:none; }
.sidebar.collapsed .nav-item     { justify-content:center; padding:.55rem; }
.sidebar.collapsed .nav-item i   { width:auto; }
.sidebar.collapsed .tag-nav-item { justify-content:center; }

.sidebar-footer { border-top:1px solid var(--sidebar-border); padding:.6rem .5rem; flex-shrink:0; }
.sidebar-stats  { font-size:11px; color:var(--sidebar-text); padding:.2rem .5rem .4rem; }
.sidebar.collapsed .sidebar-stats { display:none; }

.user-menu-wrapper { position:relative; }
.user-btn {
  display:flex; align-items:center; gap:.6rem; padding:.5rem;
  border-radius:var(--radius-sm); width:100%;
  color:var(--sidebar-light); transition:all var(--t); font-size:13.5px;
}
.user-btn:hover { background:var(--sidebar-hover); color:var(--sidebar-white); }
.user-avatar {
  width:30px; height:30px; background:var(--sidebar-active);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#93C5FD; flex-shrink:0;
}
.user-dropdown {
  position:absolute; bottom:calc(100% + 4px); left:0; right:0;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  overflow:hidden; z-index:200;
}
.dropdown-item {
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .9rem; width:100%; font-size:13.5px;
  color:var(--text-2); transition:background var(--t);
}
.dropdown-item:hover { background:var(--bg); }
.dropdown-item.dropdown-danger { color:var(--danger); }
.dropdown-item.dropdown-danger:hover { background:#FEF2F2; }
.dropdown-sep { border:none; border-top:1px solid var(--border); margin:2px 0; }

/* ── Main Content ───────────────────────────── */
.main-content { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

.topbar {
  height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.25rem; gap:1rem; flex-shrink:0; box-shadow:var(--shadow-sm);
}
.topbar-left  { display:flex; align-items:center; gap:.75rem; min-width:0; }
.topbar-right { display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.mobile-menu-btn {
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-sm); color:var(--text-2);
}
.page-title { font-size:1rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-count {
  background:var(--primary-light); color:var(--primary-dark);
  font-size:12px; font-weight:600; padding:2px 8px; border-radius:12px; white-space:nowrap;
}
.toolbar-sep { width:1px; height:24px; background:var(--border); margin:0 .1rem; }
.sort-select {
  padding:.4rem .6rem; font-size:13px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:#fff; color:var(--text-2);
  cursor:pointer; width:auto;
}
.view-toggle { display:flex; gap:2px; background:var(--bg); border-radius:var(--radius-sm); padding:2px; }

.tag-filter-bar {
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 1.25rem;
  background:var(--primary-light); border-bottom:1px solid var(--primary-mid);
  font-size:13px; color:var(--primary-dark); flex-shrink:0;
}
.tag-pill {
  display:inline-flex; align-items:center;
  background:var(--primary); color:#fff;
  padding:2px 10px; border-radius:12px; font-size:12.5px; font-weight:500;
}
.tag-pill::before { content:'#'; }
.clear-tag-btn {
  margin-left:auto; color:var(--primary-dark); font-size:12.5px;
  display:flex; align-items:center; gap:.3rem;
  padding:3px 8px; border-radius:var(--radius-sm); transition:background var(--t);
}
.clear-tag-btn:hover { background:var(--primary-mid); }

#bookmarks-container { flex:1; overflow-y:auto; padding:1.25rem; }
#bookmarks-container::-webkit-scrollbar { width:6px; }
#bookmarks-container::-webkit-scrollbar-track { background:transparent; }
#bookmarks-container::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:6px; }

.bookmarks-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem; align-content:start;
}
.bookmarks-list { display:flex; flex-direction:column; gap:.5rem; }

/* ── Bookmark Card (grid) ──────────────────── */
.bm-card {
  background:var(--bg-card); border-radius:var(--radius);
  border:1.5px solid var(--border); padding:1rem;
  display:flex; flex-direction:column; gap:.6rem;
  transition:box-shadow var(--t), border-color var(--t), transform var(--t), opacity var(--t);
  position:relative; overflow:hidden; cursor:default;
}
.bm-card:hover { border-color:var(--primary-mid); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.bm-card-header { display:flex; align-items:flex-start; gap:.6rem; }
.bm-favicon {
  width:28px; height:28px; border-radius:6px; background:var(--bg);
  flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:14px;
}
.bm-favicon img { width:100%; height:100%; object-fit:contain; }
.bm-title-block  { flex:1; min-width:0; }
.bm-title {
  font-size:13.5px; font-weight:600; color:var(--text-1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4;
}
.bm-domain { font-size:11.5px; color:var(--text-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-description {
  font-size:12.5px; color:var(--text-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.5;
}
.bm-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; }
.tag-chip {
  display:inline-flex; align-items:center;
  background:var(--primary-light); color:var(--primary-dark);
  border-radius:10px; padding:2px 8px; font-size:11.5px; font-weight:500;
  cursor:pointer; transition:background var(--t);
}
.tag-chip::before { content:'#'; margin-right:1px; }
.tag-chip:hover { background:var(--primary-mid); }

.bm-actions {
  display:flex; gap:4px; opacity:0; transition:opacity var(--t);
  position:absolute; top:.6rem; right:.6rem;
  background:rgba(255,255,255,.95); border-radius:8px; padding:2px; box-shadow:var(--shadow);
}
.bm-card:hover .bm-actions { opacity:1; }
.bm-action-btn {
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; font-size:12px; color:var(--text-2); transition:all var(--t);
}
.bm-action-btn:hover          { background:var(--bg); color:var(--text-1); }
.bm-action-btn.danger:hover   { background:#FEF2F2; color:var(--danger); }
.bm-action-btn.open:hover     { color:var(--primary); background:var(--primary-light); }

/* ── Bookmark Row (list) ───────────────────── */
.bm-row {
  background:var(--bg-card); border-radius:var(--radius-sm);
  border:1.5px solid var(--border); padding:.65rem 1rem;
  display:flex; align-items:center; gap:.75rem;
  transition:box-shadow var(--t), border-color var(--t), opacity var(--t);
  cursor:default;
}
.bm-row:hover { border-color:var(--primary-mid); box-shadow:var(--shadow); }
.bm-row .bm-favicon  { width:22px; height:22px; }
.bm-row-title  { flex:1; min-width:0; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-row-domain { font-size:12px; color:var(--text-3); white-space:nowrap; width:120px; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.bm-row .bm-tags { margin-top:0; flex-wrap:nowrap; overflow:hidden; }
.bm-row-actions { display:flex; gap:4px; opacity:0; transition:opacity var(--t); flex-shrink:0; }
.bm-row:hover .bm-row-actions { opacity:1; }
.bm-row-actions .bm-action-btn { width:24px; height:24px; }

/* ── States ─────────────────────────────────── */
.state-box { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 2rem; color:var(--text-3); text-align:center; gap:.75rem; }
.state-icon { font-size:3rem; opacity:.35; }
.state-box h3 { font-size:1rem; font-weight:600; color:var(--text-2); }
.state-box p  { font-size:13.5px; max-width:320px; }
.spinner {
  width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--primary);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════ */
.modal { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay { position:absolute; inset:0; background:rgba(10,25,47,.55); backdrop-filter:blur(3px); }
.modal-box {
  position:relative; background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); width:100%; max-width:540px; max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden;
  animation:modal-in .2s var(--ease);
}
.modal-box.modal-sm { max-width:420px; }
.modal-box.modal-xs { max-width:340px; }
@keyframes modal-in { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }

.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.25rem .9rem; border-bottom:1px solid var(--border); flex-shrink:0;
}
.modal-header h3 { font-size:1rem; font-weight:700; }
.modal-body { padding:1.25rem; overflow-y:auto; display:flex; flex-direction:column; gap:.9rem; }
.modal-footer {
  display:flex; justify-content:flex-end; gap:.6rem;
  padding:.9rem 1.25rem; border-top:1px solid var(--border);
  flex-shrink:0; background:#fafbfc;
}

/* Tags input */
.tags-input-wrap {
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:.4rem .5rem; display:flex; flex-wrap:wrap; gap:4px; align-items:center;
  cursor:text; transition:border-color var(--t), box-shadow var(--t); min-height:40px;
}
.tags-input-wrap:focus-within { border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.tags-input-wrap input { border:none; background:transparent; box-shadow:none; padding:2px 4px; width:auto; flex:1; min-width:80px; font-size:13px; }
.tags-input-wrap input:focus { box-shadow:none; }
.tag-input-chip { display:inline-flex; align-items:center; gap:4px; background:var(--primary-light); color:var(--primary-dark); border-radius:10px; padding:2px 6px 2px 8px; font-size:12px; font-weight:500; }
.tag-input-chip::before { content:'#'; }
.remove-tag { color:var(--primary-dark); opacity:.6; font-size:10px; padding:1px 2px; border-radius:3px; }
.remove-tag:hover { opacity:1; background:rgba(37,99,235,.15); }

/* Emoji / Color pickers */
.emoji-picker { display:flex; flex-wrap:wrap; gap:4px; }
.emoji-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:17px; border-radius:6px; border:1.5px solid transparent; transition:all var(--t); cursor:pointer; }
.emoji-btn:hover  { background:var(--bg); border-color:var(--border); }
.emoji-btn.active { background:var(--primary-light); border-color:var(--primary); }

.color-swatch-row { display:flex; gap:6px; flex-wrap:wrap; }
.color-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2.5px solid transparent; transition:all var(--t); box-shadow:0 1px 3px rgba(0,0,0,.15); }
.color-swatch:hover  { transform:scale(1.1); }
.color-swatch.active { border-color:#fff; outline:2px solid var(--primary); }

/* ══════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════ */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:1000; display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast { display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; background:var(--text-1); color:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); font-size:13.5px; font-weight:500; max-width:320px; animation:toast-in .25s var(--ease); pointer-events:auto; }
.toast.success { background:#065f46; }
.toast.error   { background:#991b1b; }
.toast.warning { background:#78350f; }
@keyframes toast-in  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; transform:translateX(20px); } }
.toast.removing { animation:toast-out .2s var(--ease) forwards; }

/* ══════════════════════════════════════════════
   SEPARADOR (estilo Firefox)
   ══════════════════════════════════════════════ */
.bm-separator {
  grid-column: 1 / -1;
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem 0; cursor:grab; user-select:none;
  transition: opacity var(--t);
}
/* linha única quando não há label */
.bm-separator::before { content:''; flex:1; height:1px; background:var(--border); }
/* linha direita só aparece quando há label */
.bm-separator:has(.bm-separator-label)::after { content:''; flex:1; height:1px; background:var(--border); }

.bm-separator-label {
  font-size:11px; color:var(--text-3);
  white-space:nowrap; letter-spacing:.04em;
  text-transform:uppercase;
}

.bm-separator-row {
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem 0; cursor:grab; user-select:none;
  transition: opacity var(--t);
}
.bm-separator-row::before { content:''; flex:1; height:1px; background:var(--border); }
.bm-separator-row:has(.bm-separator-label)::after { content:''; flex:1; height:1px; background:var(--border); }

/* hover de separador para mostrar ações de exclusão */
.bm-separator-actions,
.bm-separator-row-actions {
  opacity:0; transition:opacity var(--t);
  display:flex; align-items:center; gap:2px;
}
.bm-separator:hover .bm-separator-actions,
.bm-separator-row:hover .bm-separator-row-actions { opacity:1; }

/* estado de arrastar */
.bm-separator.bm-dragging, .bm-separator-row.bm-dragging { opacity:.3; }
.bm-separator:active, .bm-separator-row:active { cursor:grabbing; }

/* indicadores de drop para separadores */
.bm-separator.drop-before  { box-shadow: 0 -2px 0 var(--primary); }
.bm-separator.drop-after   { box-shadow: 0  2px 0 var(--primary); }
.bm-separator-row.drop-before { box-shadow: 0 -2px 0 var(--primary); }
.bm-separator-row.drop-after  { box-shadow: 0  2px 0 var(--primary); }

/* ══════════════════════════════════════════════
   DRAG-AND-DROP DE BOOKMARKS
   ══════════════════════════════════════════════ */
.bm-card[draggable], .bm-row[draggable] { cursor:grab; }
.bm-card[draggable]:active, .bm-row[draggable]:active { cursor:grabbing; }

.bm-card.bm-dragging, .bm-row.bm-dragging { opacity:.35; }

/* indicador de inserção — grade */
.bookmarks-grid .bm-card.drop-before { box-shadow:-3px 0 0 var(--primary), var(--shadow-md); border-color:var(--primary-mid); }
.bookmarks-grid .bm-card.drop-after  { box-shadow: 3px 0 0 var(--primary), var(--shadow-md); border-color:var(--primary-mid); }

/* indicador de inserção — lista */
.bookmarks-list .bm-row.drop-before { box-shadow:0 -2px 0 var(--primary), var(--shadow); border-color:var(--primary-mid); }
.bookmarks-list .bm-row.drop-after  { box-shadow:0  2px 0 var(--primary), var(--shadow); border-color:var(--primary-mid); }

/* ══════════════════════════════════════════════
   MENU DE CONTEXTO
   ══════════════════════════════════════════════ */
.ctx-menu {
  position:fixed; z-index:900;
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  padding:4px; min-width:185px;
  animation:modal-in .12s var(--ease);
}
.ctx-item {
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .75rem; border-radius:var(--radius-sm);
  font-size:13.5px; color:var(--text-2); width:100%;
  transition:background var(--t); white-space:nowrap;
}
.ctx-item:hover    { background:var(--bg); color:var(--text-1); }
.ctx-item.ctx-danger       { color:var(--danger); }
.ctx-item.ctx-danger:hover { background:#FEF2F2; }
.ctx-item i { width:14px; text-align:center; flex-shrink:0; font-size:12px; }
.ctx-sep { border:none; border-top:1px solid var(--border); margin:3px 0; }

/* ══════════════════════════════════════════════
   MULTI-SELECT
   ══════════════════════════════════════════════ */

/* Checkbox nos cards (grade) — posicionado no canto superior esquerdo */
.bm-check-label {
  position: absolute;
  top: .45rem;
  left: .45rem;
  z-index: 5;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t);
  cursor: pointer;
}
.bm-card:hover .bm-check-label,
.bm-card.bm-selected .bm-check-label { opacity: 1; }

/* Checkbox nas linhas (lista) — inline na flex row */
.bm-row .bm-check-label {
  position: static;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--t);
}
.bm-row:hover .bm-check-label,
.bm-row.bm-selected .bm-check-label { opacity: 1; }

.bm-check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  border: none;
  padding: 0;
}

/* Estado selecionado */
.bm-card.bm-selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 2px rgba(59,130,246,.18), var(--shadow);
  transform: none;
}
.bm-row.bm-selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* Barra flutuante de ações em massa */
.bulk-bar {
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 700;
  background: var(--text-1);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06);
  padding: .55rem .7rem .55rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: 13.5px;
  white-space: nowrap;
  animation: bulk-in .2s var(--ease);
}
@keyframes bulk-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.bulk-info {
  font-weight: 600;
  padding-right: .75rem;
  border-right: 1px solid rgba(255,255,255,.15);
}
.bulk-actions { display: flex; gap: .4rem; align-items: center; }
.btn-sm { padding: .35rem .7rem; font-size: 12.5px; }
.bulk-bar .btn-secondary {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.bulk-bar .btn-secondary:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.bulk-bar .btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.bulk-cancel {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(255,255,255,.6);
  transition: all var(--t);
  flex-shrink: 0;
  margin-left: .1rem;
}
.bulk-cancel:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width:768px) {
  .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); transition:transform var(--t); z-index:300; }
  .sidebar.mobile-open { transform:translateX(0); }
  .mobile-menu-btn { display:flex; }
  .sidebar-toggle { display:none; }
  .topbar-right .btn span { display:none; }
  .topbar-right .btn { padding:.5rem; }
  .bookmarks-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .bm-row-domain { display:none; }
}
@media (max-width:480px) {
  .bookmarks-grid { grid-template-columns:1fr; }
  .form-row.two-cols { flex-direction:column; }
  .topbar { padding:0 .75rem; }
  #bookmarks-container { padding:.75rem; }
}