*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #101014;
  --surface: #18181c;
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.1);
  --accent: #22d375;
  --accent2: #4facfe;
  --accent3: #d161ff;
  --c-link: 34, 211, 117;
  --c-note: 79, 172, 254;
  --c-checklist: 245, 158, 11;
  --c-page: 209, 97, 255;
  --c-server: 251, 146, 60;
  --c-command: 139, 92, 246;
  --c-quicktext: 236, 72, 153;
  --c-countdown: 234, 179, 8;
  --c-status: 20, 184, 166;
  --c-linkgroup: 59, 130, 246;
  --c-markdown: 168, 85, 247;
  --c-reminder: 239, 100, 80;
  --c-subscription: 52, 211, 153;
  --c-document: 251, 146, 60;
  --c-fields: 129, 140, 248;
  --c-tracker: 6, 182, 212;
  --c-wifi: 34, 197, 94;
  --c-counter: 251, 191, 36;
  --c-contact: 244, 114, 182;
  --c-expense: 74, 222, 128;
  --c-routine: 251, 113, 133;
  --text: #ffffff;
  --muted: #8c8c9a;
  --danger: #ef4444;
  --radius: 20px;
  --font-en: 'Inter', 'Syne', sans-serif;
  --font-ar: 'Tajawal', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --accent-light: rgba(34, 211, 117, 0.1);
}

html,body{min-height:100vh;background-color:var(--bg);background-image:linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);background-size:40px 40px;background-position: center center;color:var(--text);font-family:var(--font-ar);overflow-x:hidden;}
.hidden{display:none!important;}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }

body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.01) 2px,rgba(255,255,255,0.01) 4px);pointer-events:none;z-index:9999;}

.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center, transparent 0%, var(--bg) 100%);z-index:100;overflow:hidden;}
.login-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:48px 56px;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:0 12px 40px rgba(0,0,0,0.5);animation:fadeUp .6s cubic-bezier(0.16, 1, 0.3, 1);}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}

.login-logo, .dash-logo { font-family: var(--font-en); font-weight: 800; cursor: pointer; display: flex; align-items: baseline; letter-spacing: 2px; }
.login-logo { font-size: 2.8rem; }
.dash-logo { font-size: 1.4rem; letter-spacing: 1px; }
.logo-letter { color: var(--text); background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.logo-dot { color: var(--accent2); margin: 0 1px; opacity: 0.8; }
.login-sub{color:var(--muted);font-size:1rem;letter-spacing:1px;font-weight:500;}
.pin-inputs{display:flex;gap:12px;direction:ltr;}
.pin-digit{width:56px;height:68px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:var(--font-mono);font-size:2rem;font-weight:600;text-align:center;outline:none;transition:all .2s;}
.pin-digit:focus{border-color:var(--accent);background:rgba(255,255,255,0.06);}
.pin-error{color:var(--danger);font-size:.9rem;opacity:0;transition:opacity .3s;font-weight:600;}
.pin-error.show{opacity:1;}
.login-box.shake{animation:shake .4s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

.dashboard { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 10% 10%, rgba(79,172,254,0.05), transparent 50%), radial-gradient(circle at 90% 90%, rgba(34,211,117,0.03), transparent 50%); }

/* ─── HEADER ──────────────────────────────────────────────── */
.dash-header {
  height: 58px;
  min-height: 58px;
  width: 100%;
  background: rgba(13,13,17,0.97);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 20px;
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(24px);
}
.dash-header-right { display: flex; align-items: center; gap: 14px; }
.dash-header-left { display: flex; align-items: center; gap: 12px; }
.header-divider { width: 1px; height: 20px; background: var(--border2); }
.header-section-label { font-size: 0.85rem; color: var(--muted); font-family: var(--font-ar); font-weight: 500; }
.header-date { font-size: 0.8rem; color: var(--muted); font-family: var(--font-ar); }
.header-clock { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-weight: 700; letter-spacing: 0.5px; min-width: 62px; text-align: center; }

/* Header search */
.header-search-wrap { position: relative; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; height: 34px; min-width: 200px; transition: border-color .2s; }
.header-search-wrap:focus-within { border-color: var(--border2); background: rgba(255,255,255,0.06); }
.header-search-icon { color: var(--muted); flex-shrink: 0; }
.header-search-input { background: none; border: none; outline: none; color: var(--text); font-family: var(--font-ar); font-size: 0.85rem; width: 100%; }
.header-search-input::placeholder { color: rgba(255,255,255,0.2); }
.search-clear-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.75rem; padding: 0; line-height: 1; transition: color .15s; flex-shrink: 0; }
.search-clear-btn:hover { color: var(--text); }
/* Search history dropdown */
.search-history-drop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  background: #1e1e26;
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 6px;
  z-index: 999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-hist-item {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-ar);
  font-size: 0.82rem;
  text-align: right;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.search-hist-item::before { content: '🕐 '; }
.search-hist-item:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.search-hist-clear {
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-ar);
  font-size: 0.75rem;
  padding: 7px 12px;
  margin-top: 2px;
  cursor: pointer;
  text-align: right;
  transition: color .15s;
}
.search-hist-clear:hover { color: var(--danger); }
.header-icon-btn {
  width: 34px; height: 34px; border-radius: 10px;
  background: none; border: none; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; position: relative;
}
.header-icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.header-icon-btn.active { background: rgba(79,172,254,0.12); color: var(--accent2); }

/* Header button tooltip — appears below */
.header-icon-btn::before {
  content: attr(title);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e1e24;
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-ar);
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 200;
}
.header-icon-btn:hover::before { opacity: 1; }

/* ─── BODY ROW ─────────────────────────────────────────────── */
.dash-body { display: flex; flex-direction: row; flex: 1; min-height: 0; }

.main-content { flex: 1; padding: 28px 32px; overflow-y: auto; }

/* ─── SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
  width: 68px;
  height: calc(100vh - 58px);
  background: rgba(13,13,17,0.97);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  position: sticky;
  top: 58px;
  flex-shrink: 0;
  backdrop-filter: blur(24px);
  z-index: 50;
  gap: 4px;
  transition: width .25s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}

/* Expanded sidebar */
.sidebar.expanded {
  width: 160px;
  align-items: flex-start;
}
.sidebar.expanded .sidebar-top,
.sidebar.expanded .sidebar-filters,
.sidebar.expanded .sidebar-bottom {
  align-items: flex-start;
  padding-right: 12px;
  padding-left: 12px;
  width: 100%;
}
.sidebar.expanded .sidebar-nav-btn,
.sidebar.expanded .sidebar-icon-btn {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px;
  border-radius: 12px;
}
.sidebar-label {
  display: none;
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.sidebar.expanded .sidebar-label { display: block; }
/* Hide tooltip when expanded */
.sidebar.expanded .sidebar-icon-btn::before,
.sidebar.expanded .sidebar-nav-btn::before { display: none; }

.sidebar-top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); width: 100%; }
.sidebar-logo { font-family: var(--font-en); font-weight: 800; font-size: 0.65rem; color: var(--text); letter-spacing: 1px; cursor: pointer; display: flex; align-items: baseline; gap: 1px; padding: 8px 0; }
.sidebar-logo .logo-dot { color: var(--accent2); }

.sidebar-filters { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; padding: 12px 0; }

.sidebar-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); width: 100%; }

.sidebar-clock-wrap { display: flex; flex-direction: column; align-items: center; }
.sidebar-clock { font-family: var(--font-mono); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.5px; font-weight: 700; }

.sidebar-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  position: relative;
}
.sidebar-icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.sidebar-icon-btn.active { background: rgba(79,172,254,0.12); color: var(--accent2); }
.sidebar-danger { color: rgba(239,68,68,0.6); }
.sidebar-danger:hover { background: rgba(239,68,68,0.1) !important; color: var(--danger) !important; }

/* Tooltip on hover */
.sidebar-icon-btn::before, .sidebar-nav-btn::before {
  content: attr(title);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e1e24;
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-ar);
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 100;
}
.sidebar-icon-btn:hover::before, .sidebar-nav-btn:hover::before { opacity: 1; }

.sidebar-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  position: relative;
}
.sidebar-nav-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.sidebar-nav-btn.active { background: rgba(79,172,254,0.12); color: var(--accent2); box-shadow: inset 0 0 0 1px rgba(79,172,254,0.2); }

/* Search bar */
.sidebar-search-bar {
  position: fixed;
  top: 58px;
  right: 68px;
  left: 0;
  height: 52px;
  background: rgba(13,13,17,0.97);
  border-bottom: 1px solid var(--border2);
  backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  z-index: 49;
  animation: slideDown .2s cubic-bezier(0.16,1,0.3,1);
  color: var(--muted);
}
.sidebar-search-bar.hidden { display: none; }
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sidebar-search-input { flex: 1; background: none; border: none; color: var(--text); font-family: var(--font-ar); font-size: 0.95rem; font-weight: 500; outline: none; }
.sidebar-search-input::placeholder { color: rgba(255,255,255,0.2); }
.sidebar-search-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 4px 8px; border-radius: 6px; transition: color .2s; }
.sidebar-search-close:hover { color: var(--danger); }

/* quick-add-trigger in sidebar */
.quick-add-trigger { color: var(--accent2) !important; }
.quick-add-trigger.active { background: rgba(79,172,254,0.12) !important; }
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
}

/* Card type colors */
.card[data-type="link"]         { --card-color: var(--c-link); }
.card[data-type="note"]         { --card-color: var(--c-note); }
.card[data-type="checklist"]    { --card-color: var(--c-checklist); }
.card[data-type="page"]         { --card-color: var(--c-page); }
.card[data-type="server"]       { --card-color: var(--c-server); }
.card[data-type="command"]      { --card-color: var(--c-command); }
.card[data-type="quicktext"]    { --card-color: var(--c-quicktext); }
.card[data-type="countdown"]    { --card-color: var(--c-countdown); }
.card[data-type="status"]       { --card-color: var(--c-status); }
.card[data-type="linkgroup"]    { --card-color: var(--c-linkgroup); }
.card[data-type="markdown"]     { --card-color: var(--c-markdown); }
.card[data-type="reminder"]     { --card-color: var(--c-reminder); }
.card[data-type="tracker"]      { --card-color: var(--c-tracker); }
.card[data-type="wifi"]         { --card-color: var(--c-wifi); }
.card[data-type="subscription"] { --card-color: var(--c-subscription); }
.card[data-type="document"]     { --card-color: var(--c-document); }
.card[data-type="fields"]       { --card-color: var(--c-fields); }
.card[data-type="routine"]      { --card-color: var(--c-routine); }
.card[data-type="counter"]      { --card-color: var(--c-counter); }
.card[data-type="contact"]      { --card-color: var(--c-contact); }
.card[data-type="expense"]      { --card-color: var(--c-expense); }

.card{position:relative;background:#1a1c23;border:1px solid rgba(255,255,255,0.04);border-right:2px solid rgba(var(--card-color,255,255,255), 0.2);border-radius:20px;padding:18px;height:200px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:all .3s cubic-bezier(0.16, 1, 0.3, 1);overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);}
.card:hover{border-color:rgba(var(--card-color,255,255,255), 0.25);border-right-color:rgba(var(--card-color,255,255,255), 0.6);transform:translateY(-5px);box-shadow:0 24px 45px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 20px rgba(var(--card-color,255,255,255), 0.1);}

.card-icon{width:34px;height:34px;background:rgba(var(--card-color), 0.1);border:1px solid rgba(var(--card-color), 0.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:rgb(var(--card-color));line-height:1;}
.card-title{font-size:1.05rem;font-weight:700;color:#F8F9FA;line-height:1.2;letter-spacing:0.2px;}
.card-meta{font-size:0.75rem;color:var(--muted);font-weight:500;font-family:var(--font-ar);display:block;overflow-y:auto;white-space:normal;line-height:1.5;flex:1;scrollbar-width:none;padding-right:2px;}
.card-meta::-webkit-scrollbar{display:none;}

.card-type-badge{position:absolute;top:24px;left:24px;font-size:.62rem;font-weight:600;font-family:var(--font-mono);letter-spacing:0.5px;text-transform:uppercase;color:rgb(var(--card-color));background:transparent;border:none;opacity:0.7;transition:opacity .2s;}
.card-type-badge::after { content: ' /'; opacity: 0.4; }
.card:hover .card-type-badge { opacity: 1; }

.card-actions{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:flex-end;gap:6px;opacity:0;transition:all .2s;background:linear-gradient(transparent, #1a1c23 40%);padding:20px 18px 14px;transform:translateY(10px);pointer-events:none;z-index:10;}
.card:hover .card-actions{opacity:1;transform:translateY(0);pointer-events:auto;}
.card-delete, .card-edit, .card-reset, .card-copy{background:rgba(var(--card-color),0.05);border:none;border-radius:6px;color:rgba(var(--card-color), 0.8);font-size:.7rem;cursor:pointer;transition:all .2s;padding:5px 12px;font-family:var(--font-ar);font-weight:600;}
.card-delete{color:rgba(239,68,68,0.7);background:rgba(239,68,68,0.05);}
.card-delete:hover{color:var(--danger);background:rgba(239,68,68,0.15);}
.card-edit:hover, .card-reset:hover, .card-copy:hover{color:rgb(var(--card-color));background:rgba(var(--card-color), 0.15);}

/* Card meta special types */
.card-meta-mono { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.countdown-live { color: rgb(var(--c-countdown)); font-weight: 700; font-size: 0.85rem; font-family: var(--font-mono); }
.countdown-expired { color: var(--muted); font-style: italic; }
.countdown-progress { background: linear-gradient(90deg, rgb(var(--c-countdown)), rgba(var(--c-countdown),0.4)) !important; }
.status-meta { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.status-dot.online { background: rgb(var(--c-status)); box-shadow: 0 0 6px rgba(20, 184, 166, 0.7); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.status-dot.unknown { background: var(--muted); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.fab{position:fixed;bottom:32px;left:32px;width:60px;height:60px;border-radius:18px;background:var(--accent2);color:#fff;border:none;cursor:pointer;transition:all .4s cubic-bezier(0.16, 1, 0.3, 1);z-index:60;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px rgba(79, 172, 254, 0.4);}
.fab svg { width: 22px; height: 22px; }
.fab:hover{transform:scale(1.1) rotate(90deg); background:#3da0eb;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:rgba(24, 24, 28, 0.98);border:1px solid var(--border2);border-radius:24px;padding:24px;width:100%;max-width:460px;display:flex;flex-direction:column;gap:20px;box-shadow:0 30px 60px rgba(0,0,0,0.5);animation:fadeUp .4s cubic-bezier(0.16, 1, 0.3, 1);max-height:85vh;overflow-y:auto;backdrop-filter:blur(20px);}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-header{border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:-4px;}
.modal-title{font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:4px;}
.modal-subtitle{font-size:0.85rem;color:var(--muted);font-weight:500;}

.field-group{display:flex;flex-direction:column;gap:8px;text-align:right;}
.collapse-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:4px 0;user-select:none;transition:all .2s;gap:8px;}
.collapse-header label{cursor:pointer;margin:0;flex-shrink:0;}
.chevron-icon{width:16px;height:16px;color:var(--muted);transition:transform .3s ease;flex-shrink:0;}
.collapse-content{overflow:hidden;transition:max-height .35s cubic-bezier(0,1,0,1);max-height:800px;opacity:1;}
.collapse-content.collapsed{max-height:0;opacity:0;transition:max-height .35s cubic-bezier(1,0,1,0), opacity .2s ease;}
.field-group:has(.collapsed) .chevron-icon{transform:rotate(-90deg);}

/* Selected type pill — shows in header when collapsed */
.selected-type-pill {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.field-group:has(.collapsed) .selected-type-pill { opacity: 1; }
#selected-type-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent2);
  background: rgba(79,172,254,0.1);
  border: 1px solid rgba(79,172,254,0.25);
  border-radius: 8px;
  padding: 3px 10px;
  font-family: var(--font-ar);
}

.field-row{display:flex;gap:16px;align-items:flex-start;}
.flex-1{flex:1;}
.width-auto{width:auto;}
.center-align{align-items:center;text-align:center;}

.field-group label{font-size:.85rem;font-weight:700;color:#a1a1aa;font-family:var(--font-ar);letter-spacing:0.5px;}
.modal-input{background:rgba(255,255,255,0.02);border:1px solid var(--border2);border-radius:14px;color:var(--text);padding:12px 16px;font-family:var(--font-ar);font-size:0.95rem;font-weight:500;outline:none;transition:all .2s;width:100%;resize:none;}
.modal-input:focus{border-color:var(--accent2);background:rgba(79, 172, 254, 0.05);box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);}
.modal-input::placeholder{color:rgba(255,255,255,0.2);}
select.modal-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8c9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-left:36px;cursor:pointer;}
select.modal-input option{background:#1a1c23;color:var(--text);}
select.modal-input:focus{border-color:var(--accent2);background-color:rgba(79,172,254,0.05);}
.mono-input { font-family: var(--font-mono); font-size: 0.85rem; }

/* Filter dropdown */
.filter-select { background: rgba(255,255,255,0.03); border: 1px solid var(--border2); border-radius: 12px; color: var(--text); font-family: var(--font-ar); font-size: 0.9rem; font-weight: 700; padding: 8px 16px; cursor: pointer; outline: none; transition: all .2s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8c9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; padding-left: 32px; }
.filter-select:hover { border-color: var(--accent2); background-color: rgba(79,172,254,0.05); }
.filter-select:focus { border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(79,172,254,0.1); background-color: rgba(79,172,254,0.05); }
.filter-select option { background: #18181c; color: var(--text); }

/* Type groups */
.type-groups { display: flex; flex-direction: column; gap: 0; background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 4px; }
.type-group { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; }
.type-group + .type-group { border-top: 1px solid var(--border); }
.type-group-label { font-size: 0.62rem; font-weight: 800; color: var(--muted); font-family: var(--font-ar); letter-spacing: 0.5px; opacity: 0.55; padding: 1px 0; }
.type-group-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.type-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; height: 34px;
  background: none; border: 1px solid transparent; border-radius: 10px;
  color: var(--muted); cursor: pointer; transition: all .15s;
  font-family: var(--font-ar); font-size: 0.78rem; font-weight: 600;
  flex-shrink: 0; white-space: nowrap;
}
.tab-icon { width: 14px; height: 14px; opacity: 0.5; transition: all .15s; flex-shrink: 0; }
.type-tab:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.type-tab:hover .tab-icon { opacity: 1; }
.type-tab.active { border-color: var(--accent2); color: var(--accent2); background: rgba(79,172,254,0.1); box-shadow: 0 2px 8px rgba(79,172,254,0.12); }
.type-tab.active .tab-icon { opacity: 1; stroke: var(--accent2); }

/* Type description bar */
.type-desc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(79,172,254,0.05);
  border: 1px solid rgba(79,172,254,0.12);
  border-radius: 10px;
  margin-top: 6px;
  min-height: 36px;
  transition: all .2s;
}
#type-desc-icon { font-size: 0.9rem; flex-shrink: 0; }
#type-desc-text { font-size: 0.78rem; color: var(--muted); font-family: var(--font-ar); line-height: 1.4; }

.icon-selection-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.icon-display-btn {
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  transition: all .2s;
}
.icon-display-btn:hover { border-color: var(--accent2); background: rgba(79, 172, 254, 0.08); transform: translateY(-2px); }

.checklist-inputs-list { display: flex; flex-direction: column; gap: 8px; }
.checklist-input-row { display: flex; gap: 8px; align-items: center; animation: slideUp .2s ease; background: rgba(255,255,255,0.01); border: 1px solid transparent; padding: 4px; border-radius: 12px; transition: all 0.2s; }
.checklist-input-row:hover { background: rgba(255,255,255,0.03); border-color: var(--border); }
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.drag-handle { width: 28px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; opacity: 0.3; transition: opacity 0.2s, color 0.2s; flex-shrink: 0; }
.checklist-input-row:hover .drag-handle { opacity: 0.8; }
.drag-handle:hover { opacity: 1 !important; color: var(--text); }
.drag-handle:active { cursor: grabbing; color: var(--accent2); }
.drag-handle svg { width: 14px; height: 14px; }

.checklist-input-row.sortable-ghost { opacity: 0.4; outline: 2px dashed var(--accent2); background: var(--surface); border-color: transparent; }
.checklist-input-row.sortable-drag { opacity: 1 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border-color: var(--accent2); cursor: grabbing; }

.btn-remove-item { width: 32px; height: 32px; flex-shrink: 0; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all .2s; }
.btn-remove-item:hover { color: var(--danger); border-color: var(--danger); background: rgba(239, 68, 68, 0.08); }

.btn-add-item { width: 100%; padding: 12px; background: none; border: 2px dashed var(--border2); border-radius: 14px; color: var(--accent2); font-family: var(--font-ar); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px;}
.btn-add-item svg { width: 16px; height: 16px; }
.btn-add-item:hover { border-color: var(--accent2); background: rgba(79, 172, 254, 0.05); }

/* Subscription Multi-items */
.sub-item-row { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; position: relative; animation: slideDown 0.3s ease; }
.sub-item-top { display: flex; gap: 10px; align-items: center; }
.sub-item-grid { display: grid; grid-template-columns: 1fr 100px; gap: 10px; }
.sub-item-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-remove-sub { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: #ef4444; border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); opacity: 0; transition: all 0.2s; z-index: 5; }
.sub-item-row:hover .btn-remove-sub { opacity: 1; transform: scale(1.1); }
.sub-item-row .modal-input { padding: 8px 12px; font-size: 0.85rem; }

/* Dashboard Subscription Preview */
.subs-preview-list { display: flex; flex-direction: column; gap: 6px; width: 100%; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 8px; margin-top: 4px; }
.sub-item-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.8rem; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.sub-item-preview:last-child { border-bottom: none; }
.sub-name { font-weight: 700; color: var(--text); text-align: right; width: 100%; white-space: normal; line-height: 1.3; }
.sub-price { font-family: var(--font-mono); color: var(--accent2); font-weight: 700; align-self: flex-start; }
.sub-urgency { font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.sub-urgency.ok { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.sub-urgency.soon30 { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.sub-urgency.soon7 { background: rgba(249, 115, 22, 0.1); color: #f97316; }
.sub-urgency.soon3 { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.sub-urgency.overdue { background: #ef4444; color: white; }

/* Document Multi-items */
.doc-item-row { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; position: relative; animation: slideDown 0.3s ease; }
.btn-remove-doc { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: #ef4444; border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); opacity: 0; transition: all 0.2s; z-index: 5; }
.doc-item-row:hover .btn-remove-doc { opacity: 1; transform: scale(1.1); }
.doc-item-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }

/* Dashboard Document Preview */
.docs-preview-list { display: flex; flex-direction: column; gap: 6px; width: 100%; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 8px; margin-top: 4px; }
.doc-item-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.8rem; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.doc-item-preview:last-child { border-bottom: none; }
.doc-name { font-weight: 700; color: var(--text); text-align: right; width: 100%; white-space: normal; line-height: 1.3; }
.doc-urgency { font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.doc-urgency.safe { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.doc-urgency.warning { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.doc-urgency.critical { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.doc-urgency.expired { background: #ef4444; color: white; }

.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.btn-cancel{padding:12px 24px;background:none;border:none;color:var(--muted);font-weight:700;cursor:pointer;font-family:var(--font-ar);font-size:0.95rem;transition:all .2s;}
.btn-cancel:hover{color:var(--text);}
.btn-save{padding:12px 36px;background:var(--accent2);border:none;border-radius:14px;color:#fff;font-family:var(--font-ar);font-size:1rem;font-weight:800;cursor:pointer;transition:all .2s;box-shadow:0 8px 20px rgba(79, 172, 254, 0.25);}
.btn-save:hover{background:#3da0eb;transform:translateY(-1px);box-shadow:0 12px 28px rgba(79, 172, 254, 0.35);}

.emoji-picker-container {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
  width: fit-content;
  line-height: 0;
  animation: fadeUp .2s cubic-bezier(0.16,1,0.3,1);
}
/* Emoji Mart dark theme overrides */
em-emoji-picker {
  --rgb-background: 26, 28, 35;
  --rgb-input: 16, 16, 20;
  --rgb-color: 255, 255, 255;
  --rgb-accent: 79, 172, 254;
  --border-radius: 12px;
  width: 352px;
  height: 420px;
}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--border2);}

.dash-grid.reorder-mode .card { cursor: grab; border-color: var(--accent2); box-shadow:0 8px 24px rgba(79, 172, 254, 0.1); transform: scale(1.02); }
.dash-grid.reorder-mode .card:active { cursor: grabbing; transform: scale(1.05); }
.dash-grid.reorder-mode .card:hover { transform: scale(1.02); }
.dash-grid.reorder-mode .card-actions, .dash-grid.reorder-mode .card:hover .card-actions { opacity: 0; pointer-events: none; }
.sortable-ghost { opacity: 0.4; outline: 3px dashed var(--accent2); background: var(--bg) !important; transform: scale(1); box-shadow: none; border-color: transparent;}

/* Page view */
.page-view{position:fixed;inset:0;background:var(--bg);z-index:80;display:flex;flex-direction:column;animation:slideIn .4s cubic-bezier(0.16, 1, 0.3, 1);}
@keyframes slideIn{from{transform:translateX(60px);opacity:0}to{transform:translateX(0);opacity:1}}
.page-header{display:flex;align-items:center;gap:24px;padding:24px 40px;border-bottom:1px solid var(--border);background:var(--surface);}
.back-btn{background:rgba(255,255,255,0.05);border:none;color:var(--text);padding:10px 24px;border-radius:12px;cursor:pointer;font-family:var(--font-ar);font-weight:700;transition:all .2s;direction:ltr;}
.back-btn:hover{color:var(--accent2);background:rgba(255,255,255,0.1);}
.page-heading{font-size:1.4rem;font-weight:800;color:var(--text);}
.page-empty { grid-column: 1/-1; text-align: center; color: var(--muted); font-size: 1rem; font-weight: 600; padding: 80px 0; }
.page-content{flex:1;padding:48px 40px;overflow-y:auto;background:var(--bg);}
.page-placeholder{color:var(--muted);font-size:1.1rem;font-weight:600;text-align:center;margin-top:120px;}

/* Checklist cards */
.card-checklist-preview{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.preview-item{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.preview-item.done{text-decoration:line-through;opacity:0.5;}
.preview-dot{width:6px;height:6px;border-radius:50%;border:1px solid var(--muted);}
.preview-item.done .preview-dot{background:var(--accent);border-color:var(--accent);}

.card-progress-container{width:100%;height:4px;background:rgba(255,255,255,0.05);border-radius:2px;margin-top:auto;}
.card-progress-bar{height:100%;background:rgb(var(--card-color));border-radius:2px;transition:width .3s ease;}

/* Checklist modal */
.checklist-items-container{display:flex;flex-direction:column;gap:12px;max-width:600px;margin:0 auto;}
.checklist-label-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all .2s;}
.checklist-label-item:hover{border-color:var(--border2);background:rgba(255,255,255,0.02);}
.checklist-cb{width:22px;height:22px;border:2px solid var(--border2);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.checklist-label-item.done .checklist-cb{background:rgb(var(--c-checklist));border-color:rgb(var(--c-checklist));}
.checklist-cb::after{content:'✓';color:#000;font-size:14px;display:none;font-weight:900;}
.checklist-label-item.done .checklist-cb::after{display:block;}
.checklist-text{font-size:1.1rem;font-weight:500;color:var(--text);transition:all .2s;}
.checklist-label-item.done .checklist-text{color:var(--muted);text-decoration:line-through;}

.flex-between { display: flex; align-items: center; justify-content: space-between; }
.close-btn { background: rgba(255,255,255,0.05); border: none; color: var(--muted); cursor: pointer; padding: 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.close-btn:hover { background: rgba(239, 68, 68, 0.15); color: var(--danger); transform: scale(1.05); }

.checklist-modal-box { max-width: 600px !important; padding: 24px 32px !important; }
.modal-content { max-height: 60vh; overflow-y: auto; padding-right: 8px; margin-top: 16px; margin-right: -8px; }
.modal-content::-webkit-scrollbar { width: 6px; }
.modal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ─── SERVER MODAL ─────────────────────────────────────────── */
.server-fields { display: flex; flex-direction: column; gap: 12px; }
.server-field-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; }
.server-field-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); font-family: var(--font-ar); min-width: 64px; text-align: right; }
.server-field-val { flex: 1; font-family: var(--font-mono); font-size: 0.88rem; color: var(--text); word-break: break-all; }
.server-field-val.server-field-desc { font-family: var(--font-ar); font-size: 0.9rem; }
.copy-field-btn { background: rgba(79,172,254,0.1); border: 1px solid rgba(79,172,254,0.2); border-radius: 8px; color: var(--accent2); font-family: var(--font-ar); font-size: 0.75rem; font-weight: 700; padding: 5px 12px; cursor: pointer; transition: all .2s; flex-shrink: 0; }
.copy-field-btn:hover { background: rgba(79,172,254,0.2); border-color: var(--accent2); }
.server-ssh-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.2); border-radius: 12px; }
.server-ssh-cmd { flex: 1; font-family: var(--font-mono); font-size: 0.88rem; color: rgb(var(--c-command)); word-break: break-all; }

/* ─── LINKGROUP MODAL ──────────────────────────────────────── */
.linkgroup-item { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; transition: all .2s; margin-bottom: 8px; }
.linkgroup-item:hover { border-color: rgba(var(--c-linkgroup), 0.4); background: rgba(var(--c-linkgroup), 0.05); transform: translateX(-3px); }
.linkgroup-item-label { font-size: 1rem; font-weight: 700; color: var(--text); }
.linkgroup-item-url { font-size: 0.75rem; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── MARKDOWN MODAL ───────────────────────────────────────── */
.markdown-modal-box { max-width: 700px !important; }
.markdown-content { color: var(--text); line-height: 1.8; font-family: var(--font-ar); text-align: right; }
.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6 { color: var(--text); font-weight: 800; margin: 1.2em 0 0.5em; line-height: 1.3; }
.markdown-content h1 { font-size: 1.8rem; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.markdown-content h2 { font-size: 1.4rem; }
.markdown-content h3 { font-size: 1.15rem; }
.markdown-content p { margin: 0.8em 0; color: rgba(255,255,255,0.85); }
.markdown-content a { color: var(--accent2); text-decoration: underline; }
.markdown-content a:hover { color: var(--accent); }
.markdown-content strong { color: var(--text); font-weight: 800; }
.markdown-content em { color: rgba(255,255,255,0.7); font-style: italic; }
.markdown-content ul,.markdown-content ol { padding-right: 1.5em; margin: 0.8em 0; }
.markdown-content li { margin: 0.4em 0; }
.markdown-content code { font-family: var(--font-mono); font-size: 0.85em; background: rgba(255,255,255,0.07); border: 1px solid var(--border2); border-radius: 6px; padding: 2px 6px; color: rgb(var(--c-command)); }
.markdown-content pre { background: rgba(0,0,0,0.4); border: 1px solid var(--border2); border-radius: 12px; padding: 16px; overflow-x: auto; margin: 1em 0; }
.markdown-content pre code { background: none; border: none; padding: 0; font-size: 0.88rem; color: rgb(var(--c-command)); }
.markdown-content blockquote { border-right: 3px solid var(--accent2); padding-right: 16px; color: var(--muted); margin: 1em 0; font-style: italic; }
.markdown-content hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
.markdown-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.markdown-content th,.markdown-content td { padding: 10px 14px; border: 1px solid var(--border2); text-align: right; }
.markdown-content th { background: rgba(255,255,255,0.04); font-weight: 700; }

/* ─── TOAST ────────────────────────────────────────────────── */
/* ─── QUICK ADD ────────────────────────────────────────────── */
.quick-add-trigger { display: flex; align-items: center; gap: 6px; color: var(--accent2) !important; border-color: rgba(79,172,254,0.3) !important; }
.quick-add-trigger.active { background: rgba(79,172,254,0.1) !important; border-color: var(--accent2) !important; }
.quick-add-trigger svg { flex-shrink: 0; }

.quick-add-panel {
  position: fixed;
  bottom: 80px;
  right: 76px;
  width: 300px;
  background: #1a1a1f;
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  animation: fadeUp .25s cubic-bezier(0.16,1,0.3,1);
}

.quick-add-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 3px; }
.quick-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; background: none; border: none; border-radius: 9px; color: var(--muted); font-family: var(--font-ar); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.quick-tab:hover { color: var(--text); }
.quick-tab.active { background: var(--surface); color: var(--accent2); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }

.quick-input { background: rgba(255,255,255,0.03); border: 1px solid var(--border2); border-radius: 12px; color: var(--text); padding: 10px 14px; font-family: var(--font-ar); font-size: 0.9rem; font-weight: 500; outline: none; transition: all .2s; width: 100%; resize: none; }
.quick-input:focus { border-color: var(--accent2); background: rgba(79,172,254,0.05); }
.quick-input::placeholder { color: rgba(255,255,255,0.2); }
.quick-textarea { min-height: 64px; }

.quick-add-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.quick-cancel { background: none; border: none; color: var(--muted); font-family: var(--font-ar); font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 8px 12px; transition: color .2s; }
.quick-cancel:hover { color: var(--text); }
.quick-save { background: var(--accent2); border: none; border-radius: 10px; color: #fff; font-family: var(--font-ar); font-size: 0.88rem; font-weight: 800; padding: 8px 20px; cursor: pointer; transition: all .2s; box-shadow: 0 4px 14px rgba(79,172,254,0.3); }
.quick-save:hover { background: #3da0eb; transform: translateY(-1px); }

/* FAB stays bottom-left (already defined above with fixed positioning) */

.toast { position: fixed; bottom: 32px; right: 32px; background: var(--accent2); color: #fff; font-family: var(--font-ar); font-weight: 700; font-size: 0.9rem; padding: 12px 24px; border-radius: 14px; z-index: 9000; box-shadow: 0 8px 24px rgba(79,172,254,0.4); opacity: 0; transform: translateY(10px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; max-width: 300px; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.celebration { background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6) !important; box-shadow: 0 8px 30px rgba(245,158,11,0.5) !important; animation: toastCelebrate .6s ease !important; font-size: 1rem !important; }
@keyframes toastCelebrate { 0%{transform:scale(0.8) translateY(10px)} 60%{transform:scale(1.05) translateY(-2px)} 100%{transform:scale(1) translateY(0)} }

/* Reminder card urgency */
.reminder-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reminder-urgency-badge { font-size: 0.65rem; font-weight: 800; font-family: var(--font-mono); padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.reminder-urgency-badge.overdue { background: rgba(239,68,68,0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.reminder-urgency-badge.today { background: rgba(245,158,11,0.2); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.reminder-urgency-badge.tomorrow { background: rgba(34,211,117,0.15); color: #22d375; border: 1px solid rgba(34,211,117,0.25); }
.reminder-urgency-badge.soon { background: rgba(79,172,254,0.15); color: #4facfe; border: 1px solid rgba(79,172,254,0.25); }
.reminder-urgency-badge.future { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--border); }
.reminder-date { font-size: 0.7rem; color: var(--muted); font-family: var(--font-mono); }
.reminder-details-preview { font-size: 0.73rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Reminder done state */
.card-reminder-done { opacity: 0.45; }
.card-reminder-done .card-title { text-decoration: line-through; color: var(--muted); }

/* Subscription urgency */
.sub-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; font-size:0.7rem; font-weight:700; font-family:var(--font-mono); }
.sub-badge.overdue,.sub-badge.soon3 { background:rgba(239,68,68,0.15); color:#ef4444; }
.sub-badge.soon7 { background:rgba(249,115,22,0.15); color:#f97316; }
.sub-badge.soon30 { background:rgba(234,179,8,0.15); color:#eab308; }
.sub-badge.ok { background:rgba(52,211,153,0.15); color:#34d399; }

/* Document urgency */
.doc-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; font-size:0.7rem; font-weight:700; font-family:var(--font-mono); }
.doc-badge.expired,.doc-badge.critical { background:rgba(239,68,68,0.15); color:#ef4444; }
.doc-badge.warning { background:rgba(249,115,22,0.15); color:#f97316; }
.doc-badge.caution { background:rgba(234,179,8,0.15); color:#eab308; }
.doc-badge.safe { background:rgba(52,211,153,0.15); color:#34d399; }

.doc-holder { font-size:0.78rem; color:var(--muted); margin-top:2px; }
.sub-amount { font-family:var(--font-mono); font-size:0.85rem; color:var(--text); }
.sub-cycle { font-size:0.72rem; color:var(--muted); }

/* Document progress bar */
.doc-progress-wrap { width:100%; height:5px; background:rgba(255,255,255,0.06); border-radius:99px; overflow:hidden; margin-top:8px; }
.doc-progress-fill { height:100%; border-radius:99px; transition:width .4s ease; }
.doc-progress-fill.safe    { background:#34d399; }
.doc-progress-fill.caution { background:#eab308; }
.doc-progress-fill.warning { background:#f97316; }
.doc-progress-fill.critical,.doc-progress-fill.expired { background:#ef4444; }
.doc-progress-pct { font-family:var(--font-mono); font-size:0.65rem; color:var(--muted); margin-top:3px; display:block; }

/* ─── Fields card ────────────────────────────────────────────── */
.card[data-type="fields"] .card-meta { display: block; overflow-y: auto; flex: 1; padding-right: 4px; }
.card[data-type="fields"] .card-meta::-webkit-scrollbar { width: 4px; }
.card[data-type="fields"] .card-meta::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.card-fields-list { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.card-field-row { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.card-field-label { font-size: 0.7rem; color: var(--muted); min-width: 72px; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.card-field-value { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-field-copy { flex-shrink: 0; padding: 2px 9px; background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.25); border-radius: 6px; color: rgba(129,140,248,0.9); font-size: 0.68rem; font-family: var(--font-ar); cursor: pointer; transition: all .15s; line-height: 1.6; }
.card-field-copy:hover { background: rgba(129,140,248,0.25); border-color: rgba(129,140,248,0.6); color: #fff; }

/* Modal: fields input rows */
.fi-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fi-row .modal-input { flex: 1; }
.fi-row .fi-label { flex: 0 0 130px; }
.fi-row .btn-remove-item { flex-shrink: 0; }

/* Reminder overdue/today card glow */
.card[data-urgency="overdue"] { border-color: rgba(239,68,68,0.25); }
.card[data-urgency="overdue"]:hover { border-color: rgba(239,68,68,0.5); box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 16px rgba(239,68,68,0.2); }
.card[data-urgency="today"] { border-color: rgba(245,158,11,0.25); }
.card[data-urgency="today"]:hover { border-color: rgba(245,158,11,0.5); box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 16px rgba(245,158,11,0.2); }

/* Done button - always visible on reminder cards */
.reminder-done-row { margin-top: auto; padding-top: 8px; display: flex; justify-content: flex-end; }
.card-done-btn { background: rgba(34,211,117,0.1); border: 1px solid rgba(34,211,117,0.25); border-radius: 8px; color: #22d375; font-size: 0.72rem; font-weight: 800; font-family: var(--font-ar); padding: 5px 14px; cursor: pointer; transition: all .2s; }
.card-done-btn:hover { background: rgba(34,211,117,0.2); border-color: rgba(34,211,117,0.5); }
.card-undone-btn { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 0.72rem; font-weight: 700; font-family: var(--font-ar); padding: 5px 14px; cursor: pointer; transition: all .2s; }
.card-undone-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); }

/* ─── TRACKER CARD ──────────────────────────────────────────── */
.tracker-value-big { font-size: 2rem; font-weight: 800; color: rgb(var(--c-tracker)); font-family: var(--font-mono); line-height: 1; }
.tracker-unit { font-size: 0.8rem; color: var(--muted); margin-right: 4px; font-family: var(--font-ar); }
.tracker-progress-wrap { width: 100%; height: 6px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.tracker-progress-fill { height: 100%; background: rgb(var(--c-tracker)); border-radius: 99px; transition: width .4s ease; }
.tracker-target-label { font-size: 0.7rem; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); }

/* ─── WIFI CARD ─────────────────────────────────────────────── */
.wifi-name { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.wifi-password-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.wifi-password-dots { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); flex: 1; letter-spacing: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wifi-toggle-btn, .wifi-copy-btn { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); border-radius: 6px; color: rgb(var(--c-wifi)); font-size: 0.68rem; font-family: var(--font-ar); font-weight: 700; padding: 3px 8px; cursor: pointer; transition: all .2s; flex-shrink: 0; }
.wifi-toggle-btn:hover, .wifi-copy-btn:hover { background: rgba(34,197,94,0.2); border-color: rgb(var(--c-wifi)); }

/* ─── SEARCH HIGHLIGHT ──────────────────────────────────────── */
mark { background: rgba(79,172,254,0.25); color: var(--text); border-radius: 3px; padding: 0 2px; }

/* ─── EMPTY STATE ───────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 80px 20px; opacity: 0.5; grid-column: 1 / -1; }
.empty-icon { font-size: 3rem; }
.empty-title { font-size: 1.1rem; font-weight: 700; color: var(--muted); }
.empty-sub { font-size: 0.85rem; color: var(--muted); }

/* ─── COLOR SWATCHES ────────────────────────────────────────── */
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all .2s; }
.color-swatch:hover, .color-swatch.active { border-color: white; transform: scale(1.15); }

/* ─── MOBILE BOTTOM NAV ─────────────────────────────────────── */
.mobile-bottom-nav { display: none; }

/* ─── MOBILE SIDEBAR OVERLAY ────────────────────────────────── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 49; backdrop-filter: blur(4px); }
.sidebar-overlay.show { display: block; }

/* ─── MODAL SCROLLING ───────────────────────────────────────── */
.modal-overlay { overflow-y: auto; }

/* ─── RESPONSIVE: TABLETS & PHONES ─────────────────────────── */
@media (max-width: 768px) {

  /* Header on mobile */
  .dash-header { height: 52px; min-height: 52px; padding: 0 12px; }
  .header-section-label, .header-section-label + .header-divider { display: none; }
  .header-date { display: none; }
  .header-search-wrap { min-width: 120px; }
  .dash-header-right { gap: 8px; }
  .dash-header-left { gap: 8px; }

  /* Hamburger button for mobile sidebar */
  .mobile-menu-btn { display: flex; }

  /* Sidebar: hidden off-screen, slides in when open */
  .sidebar {
    position: fixed;
    top: 0;
    right: -200px;
    height: 100vh;
    width: 180px;
    z-index: 55;
    transition: right .3s cubic-bezier(0.16,1,0.3,1);
    padding-top: 60px;
  }
  .sidebar.mobile-open { right: 0; }
  .sidebar.expanded { width: 180px; }

  /* Main content full width, bottom padding for nav bar */
  .main-content { padding: 16px 12px; padding-bottom: 76px; }

  /* Cards: 1 column default, 2 columns at 480px+ */
  .dash-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Card actions always visible on mobile */
  .card-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* Modals: near full-screen */
  .modal-box { max-width: 100%; border-radius: 16px; max-height: 90vh; overflow-y: auto; margin: 8px; }
  .modal-overlay { align-items: flex-end; padding-bottom: 0; }

  /* Quick-add panel: full width, at bottom */
  .quick-add-panel { right: 8px !important; left: 8px !important; bottom: 70px !important; top: auto !important; width: auto; }

  /* Page view full width */
  .page-header { padding: 16px 20px; }
  .page-content { padding: 20px 12px; padding-bottom: 76px; }

  /* FAB hidden on mobile (bottom nav has add button) */
  .fab { display: none; }

  /* Bottom nav visible */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 55;
    background: rgba(13,13,17,0.97);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(20px);
    align-items: stretch;
  }
  .mob-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--muted);
    font-family: var(--font-ar);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    padding: 6px 2px;
  }
  .mob-nav-btn:hover { color: var(--text); }
  .mob-nav-btn.active { color: var(--accent2); }
  .mob-nav-btn.mob-nav-add { color: var(--accent); }
  .mob-nav-btn svg { width: 20px; height: 20px; }

  /* Sidebar toggle only for desktop */
  .sidebar-top { display: none; }
}

@media (min-width: 480px) and (max-width: 768px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
}

.mobile-menu-btn { display: none; width: 34px; height: 34px; border-radius: 10px; background: none; border: none; color: var(--muted); cursor: pointer; align-items: center; justify-content: center; transition: all .2s; }
.mobile-menu-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }

/* ─── NEW v19 STYLES ─────────────────────────────────────── */

/* Routine card type color */
:root { --c-routine: 251, 113, 133; --c-expense: 251, 113, 133; --c-contact: 168, 85, 247; }
.card[data-type="routine"] { --card-color: var(--c-routine); }
.card[data-type="expense"] { --card-color: var(--c-expense); }
.card[data-type="contact"] { --card-color: var(--c-contact); }

/* Tracker controls */
.tracker-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding:6px 0 2px; border-top:1px solid var(--border); }
.tracker-btn { width:32px; height:32px; border-radius:10px; background:rgba(6,182,212,0.1); border:1px solid rgba(6,182,212,0.2); color:rgb(6,182,212); font-size:1.2rem; font-weight:700; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.tracker-btn:hover { background:rgba(6,182,212,0.25); }
.tracker-val-display { font-family:var(--font-mono); font-size:1rem; font-weight:700; color:var(--text); flex:1; text-align:center; }

/* Tracker card height auto */
.card[data-type="tracker"] { height:auto; min-height:185px; }
.card[data-type="tracker"] .card-meta { display:block; overflow:visible; }

/* Routine card height auto */
.card[data-type="routine"] { height:auto; min-height:185px; }
.card[data-type="routine"] .card-meta { display:block; overflow:visible; }

/* Pinned cards */
.card { position: relative; }
.card.pinned-card { border-color: rgba(251,191,36,0.3); }
.card.pinned-card::after { content:'📌'; position:absolute; top:10px; left:10px; font-size:0.75rem; opacity:0.7; pointer-events:none; }
.card-pin-btn { background:none; border:none; color:var(--muted); cursor:pointer; font-size:0.8rem; padding:4px 8px; border-radius:8px; transition:all .15s; }
.card-pin-btn:hover, .card-pin-btn.active { color:#fbbf24; }

/* Shortcuts overlay */
.shortcuts-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.shortcuts-box { background:var(--surface); border:1px solid var(--border2); border-radius:20px; padding:24px; min-width:280px; }
.shortcuts-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-weight:700; font-size:1rem; }
.shortcuts-header button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; }
.shortcuts-list { display:flex; flex-direction:column; gap:12px; }
.shortcut-row { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.shortcut-row span { color:var(--muted); font-size:0.9rem; }
kbd { background:rgba(255,255,255,0.08); border:1px solid var(--border2); border-radius:6px; padding:3px 10px; font-family:var(--font-mono); font-size:0.8rem; color:var(--text); }

/* Search count */
.search-count { font-size:0.72rem; color:var(--muted); white-space:nowrap; }

/* Sidebar count badges */
.sidebar-count { font-size:0.6rem; background:rgba(255,255,255,0.1); border-radius:99px; padding:1px 5px; color:var(--muted); font-family:var(--font-mono); min-width:16px; text-align:center; transition: background .3s, color .3s; }
.sidebar-count-urgent { background: rgba(239,100,80,0.25) !important; color: #ef6450 !important; font-weight:700; animation: pulseBadge 1.5s ease infinite; }
@keyframes pulseBadge { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* WiFi modal eye button */
.wifi-modal-eye-btn { width:42px; height:42px; flex-shrink:0; background:rgba(255,255,255,0.03); border:1px solid var(--border2); border-radius:12px; color:var(--muted); cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.wifi-modal-eye-btn:hover { border-color:rgb(var(--c-wifi)); color:rgb(var(--c-wifi)); }

/* ─── NEW v20 STYLES ─────────────────────────────────────── */

/* Counter card color */
:root { --c-counter: 251, 191, 36; }
.card[data-type="counter"] { --card-color: var(--c-counter); }
.card[data-type="counter"] { height:auto; min-height:185px; }
.card[data-type="counter"] .card-meta { display:block; overflow:visible; -webkit-line-clamp:unset; }

/* Counter display */
.counter-display { display:flex; align-items:baseline; gap:6px; justify-content:center; padding:12px 0 8px; cursor:pointer; user-select:none; }
.counter-number { font-family:var(--font-mono); font-size:2.8rem; font-weight:700; color:var(--text); line-height:1; transition:transform .1s; }
.counter-display:active .counter-number { transform:scale(0.92); }
.counter-max { font-family:var(--font-mono); font-size:1rem; color:var(--muted); }

/* Card duplicate button */
.card-text-copy { background:none; border:none; color:var(--muted); cursor:pointer; font-size:0.78rem; padding:5px 10px; border-radius:8px; transition:all .15s; white-space:nowrap; }
.card-text-copy:hover { color:var(--text); background:rgba(255,255,255,0.06); }

/* Card timestamp */
.card-timestamp { font-size:0.62rem; color:rgba(255,255,255,0.15); font-family:var(--font-mono); text-align:left; padding:4px 14px 6px; margin-top:-4px; }

/* Card new highlight animation */
@keyframes cardHighlight { 0% { box-shadow:0 0 0 2px var(--accent2), 0 8px 30px rgba(0,0,0,0.3); } 100% { box-shadow:0 8px 30px rgba(0,0,0,0.3); } }
.card-new-highlight { animation:cardHighlight 1.2s ease-out forwards; }

/* PIN Change Panel */
.pin-change-panel { position:fixed; z-index:200; background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:20px; width:280px; box-shadow:0 20px 50px rgba(0,0,0,0.7); display:flex; flex-direction:column; gap:10px; }
.pin-change-header { display:flex; justify-content:space-between; align-items:center; font-weight:700; margin-bottom:4px; }
.pin-change-header button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; }
.pin-change-error { color:var(--danger); font-size:0.82rem; text-align:center; }

/* Settings Overlay & Drawer */
.settings-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:150; backdrop-filter:blur(4px); }
.settings-drawer { position:fixed; top:0; left:0; bottom:0; width:300px; background:var(--surface); border-right:1px solid var(--border2); z-index:151; padding:24px; display:flex; flex-direction:column; gap:0; transform:translateX(-100%); transition:transform .3s cubic-bezier(0.16,1,0.3,1); }
.settings-drawer:not(.hidden) { transform:translateX(0); }
.settings-drawer.hidden { transform:translateX(-100%); display:flex!important; }
.settings-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.settings-header span { font-size:1.1rem; font-weight:700; }
.settings-header button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; }
.settings-list { display:flex; flex-direction:column; gap:4px; flex:1; }
.settings-item { display:flex; align-items:center; gap:12px; padding:14px 16px; background:none; border:none; border-radius:12px; color:var(--text); font-family:var(--font-ar); font-size:0.95rem; cursor:pointer; transition:all .15s; width:100%; text-align:right; }
.settings-item:hover { background:rgba(255,255,255,0.06); }
.settings-item.danger { color:var(--danger); }
.settings-item.danger:hover { background:rgba(239,68,68,0.08); }
.settings-footer { border-top:1px solid var(--border); padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.settings-footer span { font-family:var(--font-en); font-weight:700; font-size:0.9rem; }
.settings-section-title { font-size:0.72rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:1px; padding: 14px 16px 6px; border-top:1px solid var(--border); margin-top:4px; }
.settings-accent-row { display:flex; gap:10px; padding:6px 16px 12px; flex-wrap:wrap; }
.accent-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.accent-swatch:hover { transform: scale(1.15); }
.accent-swatch.active { border-color: white; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
.accent-swatch.active::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.75rem; color:#fff; font-weight:900; }

/* ─── NEW v21 STYLES ─────────────────────────────────────── */

/* Expense card */
.expense-summary { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.expense-row { display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; }
.expense-row span:first-child { color:var(--muted); }
.expense-spent { font-family:var(--font-mono); font-weight:700; color:#f97316; }
.expense-remaining { font-family:var(--font-mono); font-weight:700; color:#34d399; }
.expense-remaining.negative { color:var(--danger); }
.card[data-type="expense"] { height:auto; min-height:185px; }
.card[data-type="expense"] .card-meta { display:block; overflow:visible; -webkit-line-clamp:unset; }

/* Progress bar urgency states */
.card-progress-bar.warning { background:#eab308; }
.card-progress-bar.critical { background:#ef4444; }
.card-progress-bar.safe { background:rgb(var(--card-color)); }

/* Contact card */
.contact-info { display:flex; flex-direction:column; gap:6px; }
.contact-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.contact-phone { font-family:var(--font-mono); font-size:0.9rem; direction:ltr; }
.contact-email { font-size:0.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.contact-note { font-size:0.75rem; color:var(--muted); }
.card[data-type="contact"] { height:auto; min-height:145px; }
.card[data-type="contact"] .card-meta { display:block; overflow:visible; -webkit-line-clamp:unset; }

/* Empty state quick create */
.empty-quick-create { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.empty-quick-btn { padding:8px 16px; background:rgba(255,255,255,0.05); border:1px solid var(--border2); border-radius:12px; color:var(--muted); font-family:var(--font-ar); font-size:0.85rem; cursor:pointer; transition:all .2s; }
.empty-quick-btn:hover { background:rgba(255,255,255,0.1); color:var(--text); }

/* FAB mobile fix */
@media (max-width: 768px) {
  .fab { bottom: 76px !important; right: 20px !important; left: auto !important; }
}

/* ─── Pinned section separator ─────────────────────────────── */
.pinned-section-sep {
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(79,172,254,0.3), transparent);
  margin: 4px 0;
  position: relative;
}
.pinned-section-sep::before {
  content: '📌 مثبّت';
  position: absolute;
  top: -9px;
  right: 0;
  font-size: 0.64rem;
  font-weight: 700;
  color: rgba(79,172,254,0.6);
  font-family: var(--font-ar);
  letter-spacing: 0.5px;
  background: var(--bg);
  padding: 0 8px;
}

/* ─── Daily Summary Bar ────────────────────────────────────── */
.daily-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 16px;
  animation: fadeUp .4s cubic-bezier(0.16,1,0.3,1);
}
.summary-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-ar);
  margin-left: 4px;
}
.summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-ar);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.summary-chip:hover { transform: scale(1.04); }
.chip-danger { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.chip-warn   { background: rgba(234,179,8,0.12); color: #fbbf24; border: 1px solid rgba(234,179,8,0.25); }
.chip-success{ background: rgba(34,211,117,0.12); color: var(--accent); border: 1px solid rgba(34,211,117,0.25); }
.chip-info   { background: rgba(79,172,254,0.12); color: var(--accent2); border: 1px solid rgba(79,172,254,0.25); }
.chip-muted  { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--border); }

/* ─── Link Card Favicon ────────────────────────────────────── */
.link-meta-row { display: flex; align-items: center; gap: 6px; }
.link-favicon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; opacity: 0.85; }
.link-url-text { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Note View Modal ──────────────────────────────────────── */
.note-modal-box { max-width: 500px; }
.note-view-content {
  white-space: pre-wrap;
  font-family: var(--font-ar);
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
  direction: rtl;
  text-align: right;
}
.modal-footer-actions {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.btn-copy-all-fields {
  background: rgba(79,172,254,0.1);
  border: 1px solid rgba(79,172,254,0.25);
  color: var(--accent2);
  border-radius: 10px;
  padding: 8px 18px;
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.btn-copy-all-fields:hover { background: rgba(79,172,254,0.2); }

/* ─── Contact Card Meta ────────────────────────────────────── */
.contact-meta { display: flex; flex-direction: column; gap: 4px; }
.contact-phone-meta { font-family: var(--font-mono); font-size: 0.88rem; direction: ltr; unicode-bidi: embed; }
.contact-email-meta { font-size: 0.78rem; color: var(--muted); }
.contact-action-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ─── Expense Card Meta ────────────────────────────────────── */
.expense-summary-meta { display: flex; align-items: baseline; gap: 4px; }
.expense-spent-meta { font-size: 1.3rem; font-weight: 800; color: var(--text); font-family: var(--font-mono); }
.expense-sep-meta { color: var(--muted); font-size: 0.85rem; }
.expense-budget-meta { font-size: 0.82rem; color: var(--muted); }
.card-progress-bar.expense-over { background: var(--danger); }

/* ─── Expense Modal ────────────────────────────────────────── */
.expense-view-header { padding: 4px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.expense-view-totals { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.expense-view-spent { font-size: 2rem; font-weight: 800; color: var(--text); font-family: var(--font-mono); }
.expense-view-slash { color: var(--muted); }
.expense-view-budget { font-size: 1rem; color: var(--muted); }
.expense-view-remaining { font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.expense-view-remaining.over { color: var(--danger); }
.expense-items-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.expense-item-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid var(--border); }
.expense-item-name { font-size: 0.88rem; color: var(--text); }
.expense-item-amount { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent2); font-weight: 600; }

/* ─── EXPENSE LIVE PREVIEW ────────────────────────────────── */
.expense-live-preview {
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.15);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 6px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.expense-live-spent { font-weight: 700; color: var(--accent); }
.expense-live-budget { color: var(--muted); }

/* ─── DRAFT INDICATOR ────────────────────────────────────── */
.draft-indicator {
  font-size: 0.68rem;
  color: var(--accent2);
  opacity: 0.7;
  font-family: var(--font-ar);
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(79,172,254,0.08);
  border: 1px solid rgba(79,172,254,0.2);
  animation: pulseFade 2s ease infinite;
}
@keyframes pulseFade { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ─── SIDEBAR STATS ──────────────────────────────────────── */
.sidebar-stats {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sidebar-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
}
.sidebar-stat-row.danger { background: rgba(239,100,80,0.08); }
.sidebar-stat-row.success { background: rgba(34,211,117,0.06); }
.sidebar-stat-label { color: var(--muted); }
.sidebar-stat-val { font-family: var(--font-mono); color: var(--text); font-size: 0.68rem; }
.sidebar-stat-row.danger .sidebar-stat-val { color: #ef6450; }
.sidebar-stat-row.success .sidebar-stat-val { color: var(--accent); }

/* When sidebar is collapsed, hide stats */
.sidebar.collapsed .sidebar-stats { display: none; }

/* ─── FOCUS MODE ─────────────────────────────────────────── */
body.focus-mode .dash-header { transform: translateY(-100%); opacity: 0; transition: all .4s ease; pointer-events: none; }
body.focus-mode .sidebar { transform: translateX(100%); opacity: 0; transition: all .4s ease; pointer-events: none; }
body.focus-mode .main-content { margin-right: 0 !important; padding-top: 20px; transition: all .4s ease; }
body.focus-mode .fab { bottom: 24px; }
body:not(.focus-mode) .dash-header,
body:not(.focus-mode) .sidebar { transition: all .3s ease; }

/* ─── CARDS TOOLBAR ──────────────────────────────────────── */
.cards-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px;
  gap: 10px;
}
.cards-toolbar-right { display: flex; align-items: center; gap: 8px; }
.cards-toolbar-left  { display: flex; align-items: center; gap: 6px; }
.toolbar-label { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sort-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-family: var(--font-ar);
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, color .2s;
  direction: rtl;
}
.sort-select:hover { border-color: var(--border2); color: var(--text); }
.sort-select:focus { border-color: var(--accent); color: var(--text); }
.sort-select option { background: #1e1e24; }
.toolbar-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.73rem;
  font-family: var(--font-ar);
  padding: 4px 10px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.toolbar-btn:hover { border-color: var(--border2); color: var(--text); background: rgba(255,255,255,0.07); }
.toolbar-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(34,211,117,0.08); }
@media(max-width:600px) {
  .toolbar-btn span, .sort-select { display: none; }
  .toolbar-btn { padding: 5px 7px; }
}

/* ─── MOVE TO PAGE MODAL ─────────────────────────────────── */
.move-page-list { display: flex; flex-direction: column; gap: 6px; }
.move-page-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 0.88rem;
  font-family: var(--font-ar);
  cursor: pointer;
  transition: all .2s;
  text-align: right;
  width: 100%;
}
.move-page-btn:hover { background: rgba(79,172,254,0.08); border-color: rgba(79,172,254,0.3); color: var(--accent2); }
.move-page-icon { font-size: 1.1rem; }
.move-page-name { flex: 1; }
.move-page-arrow { color: var(--muted); font-size: 1rem; }
.move-no-pages { color: var(--muted); font-size: 0.82rem; text-align: center; padding: 20px; line-height: 1.7; }

/* ─── NOTE EDIT ──────────────────────────────────────────── */
.note-edit-area {
  width: 100%;
  min-height: 200px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-ar);
  font-size: 0.9rem;
  line-height: 1.75;
  padding: 14px;
  resize: vertical;
  outline: none;
  transition: border-color .2s;
}
.note-edit-area:focus { border-color: var(--accent2); }
.note-word-count {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.note-edit-toggle-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 3px 8px;
  cursor: pointer;
  transition: all .2s;
}
.note-edit-toggle-btn:hover { color: var(--accent2); border-color: var(--accent2); background: rgba(79,172,254,0.08); }
.btn-note-save {
  background: rgba(34,211,117,0.12);
  border: 1px solid rgba(34,211,117,0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.8rem;
  font-family: var(--font-ar);
  padding: 6px 14px;
  cursor: pointer;
  transition: all .2s;
}
.btn-note-save:hover { background: rgba(34,211,117,0.22); }

/* ─── CARD TAGS ──────────────────────────────────────────── */
.card-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.card-tag {
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font-ar);
}
.card-tag:hover { background: rgba(79,172,254,0.12); border-color: rgba(79,172,254,0.3); color: var(--accent2); }

/* Tags bar */
.tags-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 4px 10px;
}
.tags-bar-label { font-size: 0.72rem; color: var(--muted); padding-left: 2px; flex-shrink: 0; }
.tag-filter-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.72rem;
  font-family: var(--font-ar);
  padding: 3px 10px;
  cursor: pointer;
  transition: all .15s;
}
.tag-filter-chip:hover { background: rgba(79,172,254,0.1); border-color: rgba(79,172,254,0.3); color: var(--accent2); }
.tag-filter-chip.active { background: rgba(79,172,254,0.15); border-color: var(--accent2); color: var(--accent2); font-weight: 700; }
.tag-filter-clear {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 99px;
  color: #ef4444;
  font-size: 0.7rem;
  font-family: var(--font-ar);
  padding: 3px 10px;
  cursor: pointer;
  transition: all .15s;
}
.tag-filter-clear:hover { background: rgba(239,68,68,0.15); }

/* Tag suggestions */
.tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 0 2px;
}
.tag-sug-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.75rem;
  font-family: var(--font-ar);
  padding: 3px 10px;
  cursor: pointer;
  transition: all .15s;
}
.tag-sug-btn:hover { background: rgba(79,172,254,0.1); border-color: rgba(79,172,254,0.3); color: var(--accent2); }

/* Tags field in modal */
.tags-field-group { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }

/* ─── CARD MOVE BTN ──────────────────────────────────────── */
.card-move-btn {
  background: rgba(79,172,254,0.08);
  border: 1px solid rgba(79,172,254,0.2);
  border-radius: 6px;
  color: var(--accent2);
  font-size: 0.7rem;
  padding: 3px 7px;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font-en);
}
.card-move-btn:hover { background: rgba(79,172,254,0.18); }

/* ─── LIST VIEW MODE ─────────────────────────────────────── */
.dash-grid.list-mode {
  grid-template-columns: 1fr !important;
  max-width: 800px;
  margin: 0 auto;
  gap: 6px !important;
}
.dash-grid.list-mode .card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 10px 14px;
  min-height: 0;
}
.dash-grid.list-mode .card-type-badge { display: none; }
.dash-grid.list-mode .card-icon {
  font-size: 1.15rem;
  grid-row: 1 / 3;
  grid-column: 1;
}
.dash-grid.list-mode .card-title {
  font-size: 0.88rem;
  font-weight: 600;
  grid-row: 1;
  grid-column: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-grid.list-mode .card-meta {
  font-size: 0.75rem;
  grid-row: 2;
  grid-column: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}
.dash-grid.list-mode .card-actions {
  position: static !important;
  opacity: 0;
  grid-row: 1 / 3;
  grid-column: 3;
  flex-direction: row;
  gap: 4px;
  padding: 0;
  background: transparent;
}
.dash-grid.list-mode .card:hover .card-actions { opacity: 1; }
.dash-grid.list-mode .card-timestamp { display: none; }
.dash-grid.list-mode .card-checklist-preview { display: none; }
.dash-grid.list-mode .card-progress-container { display: none; }
.dash-grid.list-mode .reminder-done-row { grid-column: 2 / 4; margin-top: 0; }
.dash-grid.list-mode .pinned-section-sep { grid-column: 1 / -1; }
.dash-grid.list-mode .card-fields-list { display: none; }
.dash-grid.list-mode .tracker-controls { display: none; }
.dash-grid.list-mode .subs-preview-list { display: none; }
.dash-grid.list-mode .docs-preview-list { display: none; }

/* ─── COMPACT DENSITY MODE ──────────────────────────────── */
.dash-grid.compact-mode {
  gap: 8px !important;
}
.dash-grid.compact-mode .card {
  padding: 10px 14px;
}
.dash-grid.compact-mode .card-icon { font-size: 1.1rem; }
.dash-grid.compact-mode .card-title { font-size: 0.83rem; }
.dash-grid.compact-mode .card-meta { font-size: 0.72rem; }
.dash-grid.compact-mode .card-type-badge { font-size: 0.6rem; padding: 1px 5px; }
.dash-grid.compact-mode .card-timestamp { display: none; }
.dash-grid.compact-mode .card-actions button { font-size: 0.68rem !important; padding: 3px 6px !important; }

/* ─── WiFi QR Modal ────────────────────────────────────────── */
.wifi-qr-box { max-width: 320px; }
.wifi-qr-canvas { display: flex; justify-content: center; align-items: center; padding: 12px; background: rgba(255,255,255,0.04); border-radius: 16px; border: 1px solid var(--border); }
.wifi-qr-canvas img, .wifi-qr-canvas canvas { border-radius: 8px; }
.wifi-qr-ssid { font-weight: 700; font-size: 1rem; color: var(--text); margin-top: 4px; }
.wifi-qr-hint { font-size: 0.78rem; color: var(--muted); max-width: 220px; line-height: 1.5; }
.wifi-qr-btn { font-size: 0.72rem !important; padding: 3px 8px !important; background: rgba(34,197,94,0.1) !important; border: 1px solid rgba(34,197,94,0.3) !important; color: #22c55e !important; border-radius: 6px !important; }
.wifi-qr-btn:hover { background: rgba(34,197,94,0.2) !important; }

/* ─── Reminder Detail Modal ────────────────────────────────── */
.reminder-detail-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--accent2);
  background: rgba(79,172,254,0.08);
  border: 1px solid rgba(79,172,254,0.2);
  border-radius: 10px;
  padding: 6px 14px;
  margin-bottom: 12px;
  font-family: var(--font-ar);
}
.reminder-detail-date::before { content: '📅 '; }
.reminder-detail-body {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 14px;
  border: 1px solid var(--border);
}

/* ─── CLOUD SYNC DOT ─────────────────────────────────────── */
.cloud-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 6px;
  flex-shrink: 0;
  transition: background 0.4s;
  background: var(--muted);
}
.cloud-dot.syncing {
  background: #3b82f6;
  animation: cloudPulse 0.9s ease-in-out infinite;
}
.cloud-dot.synced  { background: #10b981; }
.cloud-dot.error   { background: #ef4444; }
@keyframes cloudPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}