/* ============================================================
   eNotePad — The Tactile Editorial Design System
   A bespoke, high-end stationery experience.
   Parchment tones, serif typography, paper-grain textures.
   ============================================================ */

/* ---------- Material Symbols ---------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  letter-spacing: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ---------- Screen Reader Utility (WCAG 2.1 AA) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ---------- Paper Grain Overlay ---------- */
.paper-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.02;
}

/* ---------- Paper Lines (for textarea) ---------- */
.paper-lines {
  background-image: linear-gradient(#51607015 1px, transparent 1px);
  background-size: 100% 2.5rem;
}

/* ---------- Note Textarea (rounded) ---------- */
.note-textarea {
  border-radius: 15px;
  padding: 16px;
  background: rgba(81, 96, 112, 0.03);
  color: #2e3640;
}

.note-textarea::placeholder {
  color: rgba(81, 96, 112, 0.35);
}

.dark .note-textarea {
  background: rgba(198, 214, 233, 0.03);
  color: #dde4ee;
}

.dark .note-textarea::placeholder {
  color: rgba(198, 214, 233, 0.25);
}

/* ---------- Editorial Shadow & Border (Tactile Editorial) ---------- */
.editorial-shadow {
  box-shadow: 0 12px 32px rgba(47, 52, 46, 0.06);
}

.dark .editorial-shadow {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

.editorial-border {
  border: 1px solid rgba(175, 179, 172, 0.15);
}

.dark .editorial-border {
  border: 1px solid rgba(112, 180, 248, 0.14) !important;
}

/* ---------- Tab Panel Visibility ----------
   Using a dedicated class instead of the generic .hidden
   to avoid conflicting with Tailwind's responsive utilities */
.tab-panel {
  animation: editorialFadeIn 0.4s ease;
}

.tab-panel[data-active="false"] {
  display: none !important;
}

.tab-panel[data-active="true"] {
  /* No explicit display here so that Tailwind's flex/block can work */
  opacity: 1;
}

.account-section[data-account-active="false"] {
  display: none !important;
}

.account-section[data-account-active="true"] {
  animation: editorialFadeIn 0.4s ease;
  opacity: 1;
}

@keyframes editorialFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-editorialFadeIn {
  animation: editorialFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ---------- Element-level hide (JS toggling) ----------
   Use data attribute instead of .hidden class for elements
   that JS shows/hides, to avoid !important conflicts */
[data-hidden="true"] {
  display: none !important;
}

/* ---------- Theme Toggle Button ---------- */
.theme-toggle-btn {
  color: #516070;
  border-color: rgba(81, 96, 112, 0.18);
  background: rgba(81, 96, 112, 0.05);
}

.theme-toggle-btn:hover {
  background: rgba(81, 96, 112, 0.10);
  border-color: rgba(81, 96, 112, 0.28);
}

/* Show/hide labels and icons based on mode and screen size */
.theme-toggle-label {
  display: none;
}

@media (max-width: 639px) {
  .theme-icon-light { display: none; }
  .theme-icon-dark  { display: inline-flex; }
  .dark .theme-icon-dark  { display: none; }
  .dark .theme-icon-light { display: inline-flex; }
}

@media (min-width: 640px) {
  .theme-icon-light,
  .theme-label-light { display: none; }

  .theme-icon-dark,
  .theme-label-dark  { display: inline-flex; }

  .dark .theme-icon-dark,
  .dark .theme-label-dark  { display: none; }

  .dark .theme-icon-light,
  .dark .theme-label-light { display: inline-flex; }
}

.dark .theme-toggle-btn {
  color: #c6d6e9;
  border-color: rgba(198, 214, 233, 0.15);
  background: rgba(198, 214, 233, 0.06);
}

.dark .theme-toggle-btn:hover {
  background: rgba(198, 214, 233, 0.12);
  border-color: rgba(198, 214, 233, 0.25);
}

/* ---------- Sidebar Nav & Mobile Off-Canvas Drawer ---------- */
.sidebar-aside {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

@media (max-width: 767px) {
  .sidebar-aside {
    transform: translateX(-100%) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
    z-index: 60 !important;
  }

  .sidebar-aside.mobile-open {
    transform: translateX(0) !important;
  }

  #sidebarBackdrop.active {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 768px) {
  .sidebar-aside {
    transform: translateX(0) !important;
    display: flex !important;
  }
  #sidebarBackdrop {
    display: none !important;
  }
}

.dark .sidebar-aside {
  background: #11141b !important;
  border-right: 1px solid rgba(198, 214, 233, 0.08) !important;
}

.sidebar-nav-btn.active {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(47, 52, 46, 0.08) !important;
  color: #364350 !important;
  font-weight: 700 !important;
}

.dark .sidebar-nav-btn.active {
  background: #232b36 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid rgba(198, 214, 233, 0.14) !important;
}

.dark .sidebar-nav-btn.active .material-symbols-outlined {
  color: #70b4f8 !important;
}

.sidebar-nav-btn:not(.active) {
  background: transparent !important;
  box-shadow: none !important;
}

.dark .sidebar-nav-btn:not(.active),
.dark .sidebar-quick-link:not(.active),
.dark .sidebar-footer-btn {
  color: rgba(198, 214, 233, 0.65) !important;
}

.sidebar-nav-btn,
.sidebar-quick-link,
.sidebar-footer-btn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0); /* Hardware acceleration */
}

/* Ensure child elements (icons, text) slide slightly and stay above the background */
.sidebar-nav-btn > *,
.sidebar-quick-link > *,
.sidebar-footer-btn > * {
  position: relative;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sidebar-nav-btn:not(.active):hover > *,
.sidebar-quick-link:hover > *,
.sidebar-footer-btn:hover > * {
  transform: translateX(6px);
}

/* Glassy background sweep (Light Mode) */
.sidebar-nav-btn::before,
.sidebar-quick-link::before,
.sidebar-footer-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; 
  width: 100%;
  background: linear-gradient(90deg, rgba(81, 96, 112, 0.12) 0%, rgba(81, 96, 112, 0.02) 100%);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 0;
  border-radius: inherit;
}

.dark .sidebar-nav-btn::before,
.dark .sidebar-quick-link::before,
.dark .sidebar-footer-btn::before {
  background: linear-gradient(90deg, rgba(198, 214, 233, 0.1) 0%, rgba(198, 214, 233, 0.01) 100%);
}

.sidebar-nav-btn:not(.active):hover::before,
.sidebar-quick-link:hover::before,
.sidebar-footer-btn:hover::before {
  transform: translateX(0);
}

/* Accent pill on the left */
.sidebar-nav-btn::after,
.sidebar-quick-link::after,
.sidebar-footer-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 4px;
  height: 0%;
  background: #516070; /* Primary brand color */
  border-radius: 0 4px 4px 0;
  transform: translateY(-50%);
  transition: height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  opacity: 0;
  z-index: 2;
}

.dark .sidebar-nav-btn::after,
.dark .sidebar-quick-link::after,
.dark .sidebar-footer-btn::after {
  background: #70b4f8;
}

.sidebar-nav-btn:not(.active):hover::after,
.sidebar-quick-link:hover::after,
.sidebar-footer-btn:hover::after {
  height: 60%;
  opacity: 1;
}

/* Hover text colors */
.sidebar-nav-btn:not(.active):hover,
.sidebar-quick-link:hover,
.sidebar-footer-btn:hover {
  background-color: transparent !important;
  color: #364350 !important;
}

.dark .sidebar-nav-btn:not(.active):hover,
.dark .sidebar-quick-link:hover,
.dark .sidebar-footer-btn:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Sidebar User Info & Logged Out Card (Dark & Light) */
#sidebarLoggedOutBtn,
#sidebarUserInfo {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(175, 179, 172, 0.2);
  transition: all 0.2s ease;
}

#sidebarLoggedOutBtn:hover,
#sidebarUserInfo:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(81, 96, 112, 0.3);
}

.dark #sidebarLoggedOutBtn,
.dark #sidebarUserInfo {
  background: #181d26 !important;
  border: 1px solid rgba(198, 214, 233, 0.1) !important;
}

.dark #sidebarLoggedOutBtn:hover,
.dark #sidebarUserInfo:hover {
  background: #202733 !important;
  border-color: rgba(198, 214, 233, 0.2) !important;
}

.dark #sidebarLoggedOutBtn .text-on-surface,
.dark #sidebarUserInfo .text-on-surface {
  color: #eef3f9 !important;
}

.dark #sidebarLoggedOutBtn .text-on-surface-variant,
.dark #sidebarUserInfo .text-on-surface-variant {
  color: #8fa0b5 !important;
}

.dark #sidebarLoggedOutBtn .material-symbols-outlined,
.dark #sidebarUserInfo .material-symbols-outlined {
  color: #70b4f8 !important;
}

/* Sidebar New Note Primary CTA Button */
#newNoteBtn {
  background: linear-gradient(135deg, #516070, #3e4c5b);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(81, 96, 112, 0.25);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#newNoteBtn:hover {
  background: linear-gradient(135deg, #445363, #323e4b);
  box-shadow: 0 6px 18px rgba(81, 96, 112, 0.35);
  transform: translateY(-1px);
}

.dark #newNoteBtn {
  background: linear-gradient(135deg, #2a3442, #1c232d) !important;
  color: #f0f6ff !important;
  border: 1px solid rgba(147, 197, 253, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

.dark #newNoteBtn:hover {
  background: linear-gradient(135deg, #354254, #242d3a) !important;
  border-color: rgba(147, 197, 253, 0.35) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55) !important;
  transform: translateY(-1px);
}

/* Sidebar Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(81, 96, 112, 0.18);
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(81, 96, 112, 0.35);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(198, 214, 233, 0.15);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(198, 214, 233, 0.3);
}

/* ---------- Top Nav Active (Floating Segmented Capsule) ---------- */
#topSegmentedNav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topnav-link {
  color: rgba(81, 96, 112, 0.75);
  text-decoration: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.topnav-link:hover {
  color: #2e3640;
  background: rgba(81, 96, 112, 0.08);
}

.topnav-link.active {
  color: #ffffff !important;
  font-weight: 700 !important;
  background: #516070 !important;
  box-shadow: 0 2px 8px rgba(81, 96, 112, 0.25);
}

.dark .topnav-link {
  color: rgba(198, 214, 233, 0.7);
}

.dark .topnav-link:hover {
  color: #70b4f8 !important;
  background: rgba(112, 180, 248, 0.12) !important;
  box-shadow: 0 0 10px rgba(112, 180, 248, 0.15);
}

.dark .topnav-link.active {
  background: #252e3b !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(112, 180, 248, 0.15);
  border: 1px solid rgba(112, 180, 248, 0.3) !important;
}

.dark .topnav-link.active:hover {
  background: #2c3746 !important;
  border-color: rgba(112, 180, 248, 0.5) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 16px rgba(112, 180, 248, 0.25);
}

.dark .topnav-link.active .material-symbols-outlined {
  color: #70b4f8 !important;
}

.top-nav-icon-btn {
  transition: all 0.15s ease;
}

.dark .top-nav-icon-btn:hover {
  color: #70b4f8 !important;
  background: rgba(112, 180, 248, 0.14) !important;
  box-shadow: 0 0 10px rgba(112, 180, 248, 0.2);
}

.top-nav-icon-btn:hover {
  transform: translateY(-1px);
}

.header-coffee-btn {
  transition: all 0.15s ease;
}

.header-coffee-btn:hover {
  transform: translateY(-1px);
}

/* ---------- Inline Tab Active ---------- */
.inline-tab {
  transition: all 0.2s ease;
  border-radius: 8px;
}

.inline-tab.active {
  background: #516070 !important;
  box-shadow: 0 4px 12px rgba(81, 96, 112, 0.2) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.inline-tab:not(.active) {
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(81, 96, 112, 0.6) !important;
}

.inline-tab:not(.active):hover {
  background: rgba(81, 96, 112, 0.05) !important;
  color: #516070 !important;
}

.dark .inline-tab.active {
  background: #3a4856 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  color: #ffffff !important;
}

.dark .inline-tab:not(.active) {
  color: rgba(198, 214, 233, 0.5) !important;
}

.dark .inline-tab:not(.active):hover {
  background: rgba(198, 214, 233, 0.05) !important;
  color: #c6d6e9 !important;
}

/* ---------- Type Button Active (pill) ---------- */
.type-btn {
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.type-btn.active {
  background: #516070 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(81, 96, 112, 0.2) !important;
  font-weight: 600 !important;
}

.type-btn:not(.active) {
  background: #f0f2ea !important;
  color: rgba(81, 96, 112, 0.6) !important;
  box-shadow: none !important;
  border-color: rgba(175, 179, 172, 0.2);
}

.type-btn:not(.active):hover {
  background: #e6e8e0 !important;
  color: #516070 !important;
  border-color: rgba(175, 179, 172, 0.4);
}

.dark .type-btn.active {
  background: #3a4856 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.dark .type-btn:not(.active) {
  background: #1e2230 !important;
  color: rgba(198, 214, 233, 0.5) !important;
  box-shadow: none !important;
  border-color: rgba(198, 214, 233, 0.08);
}

.dark .type-btn:not(.active):hover {
  background: #252836 !important;
  color: #c6d6e9 !important;
  border-color: rgba(198, 214, 233, 0.15);
}

/* ---------- Expiry Selector Active ---------- */
.expiry-btn {
  transition: all 0.2s ease;
  border-radius: 8px;
}

.expiry-btn.active {
  background: rgba(81, 96, 112, 0.1);
  color: #516070;
  font-weight: 600;
}

.expiry-btn:not(.active) {
  background: transparent;
  color: rgba(81, 96, 112, 0.6);
}

.expiry-btn:not(.active):hover {
  background: rgba(81, 96, 112, 0.05);
  color: #516070;
}

.dark .expiry-btn.active {
  background: rgba(198, 214, 233, 0.15);
  color: #c6d6e9;
}

.dark .expiry-btn:not(.active) {
  color: rgba(198, 214, 233, 0.5);
}

.dark .expiry-btn:not(.active):hover {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

/* ---------- Top Header Fixed / Sticky Navbar ---------- */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  width: 100% !important;
  will-change: transform, opacity, background-color, box-shadow;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease !important;
  background-color: rgba(250, 249, 245, 0.82) !important;
  backdrop-filter: blur(20px) saturate(190%) contrast(105%);
  -webkit-backdrop-filter: blur(20px) saturate(190%) contrast(105%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 20px -2px rgba(47, 52, 46, 0.06), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.3) !important;
}

#topAppBar {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  border-radius: 1.25rem !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 20px -2px rgba(30, 41, 59, 0.06), inset 0 1px 1px 0 rgba(255, 255, 255, 0.8) !important;
  will-change: transform, opacity, background-color, box-shadow;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease !important;
}

@media (min-width: 640px) {
  #topAppBar {
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    border-radius: 1.5rem !important;
  }
}

@media (min-width: 768px) {
  #topAppBar {
    top: 10px !important;
    left: calc(15rem + 16px) !important; /* Clean 16px gap from the 240px sidebar */
    right: 20px !important;
    border-radius: 1.5rem !important;
  }
}

.dark header, .dark #topAppBar {
  background-color: rgba(15, 20, 28, 0.72) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45), inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
}

header.header-scrolled, #topAppBar.header-scrolled {
  background-color: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(200%) contrast(102%);
  -webkit-backdrop-filter: blur(24px) saturate(200%) contrast(102%);
  box-shadow: 0 10px 30px -4px rgba(30, 41, 59, 0.1), 0 2px 6px rgba(0, 0, 0, 0.03), inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
}

.dark header.header-scrolled, .dark #topAppBar.header-scrolled {
  background-color: rgba(15, 20, 28, 0.88) !important;
  backdrop-filter: blur(24px) saturate(200%) contrast(102%);
  -webkit-backdrop-filter: blur(24px) saturate(200%) contrast(102%);
  box-shadow: 0 14px 38px -4px rgba(0, 0, 0, 0.65), inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Smart Scroll hide / reveal */
header.header-hidden, #topAppBar.header-hidden {
  transform: translateY(calc(-100% - 24px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- Mobile Floating Translucent Capsule Nav Bar ---------- */
#mobileNav {
  background: linear-gradient(180deg, rgba(215, 225, 233, 0.42) 0%, rgba(155, 172, 186, 0.52) 100%) !important;
  backdrop-filter: blur(20px) saturate(190%) contrast(105%);
  -webkit-backdrop-filter: blur(20px) saturate(190%) contrast(105%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 9999px !important;
  box-shadow: 0 16px 36px -6px rgba(28, 38, 50, 0.25), inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.06) !important;
  padding: 6px !important;
}

.dark #mobileNav {
  background: linear-gradient(180deg, rgba(22, 33, 49, 0.62) 0%, rgba(10, 16, 26, 0.76) 100%) !important;
  backdrop-filter: blur(20px) saturate(190%) contrast(105%);
  -webkit-backdrop-filter: blur(20px) saturate(190%) contrast(105%);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.mobile-nav-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 9999px !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: rgba(255, 255, 255, 0.9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

.dark .mobile-nav-btn {
  color: rgba(215, 230, 248, 0.8) !important;
}

.mobile-nav-btn.active {
  background-color: #eff2eb !important;
  color: #2d3a47 !important;
  transform: scale(1.04);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), inset 0 1px 0.5px rgba(255, 255, 255, 0.9);
}

.dark .mobile-nav-btn.active {
  background-color: #eff2eb !important;
  color: #1e293b !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.mobile-nav-btn.active .material-symbols-outlined {
  color: #2d3a47 !important;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.dark .mobile-nav-btn.active .material-symbols-outlined {
  color: #1e293b !important;
}

.mobile-nav-btn:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.dark .mobile-nav-btn:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* ---------- Auth Segmented Tab Bar ---------- */
.auth-tab-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0.75rem;
}

.auth-tab-btn.active {
  background-color: #ffffff !important;
  color: #1a202c !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}

.dark .auth-tab-btn.active {
  background-color: #516070 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.auth-tab-btn:not(.active) {
  background-color: transparent !important;
  color: rgba(81, 96, 112, 0.6) !important;
  font-weight: 500 !important;
}

.dark .auth-tab-btn:not(.active) {
  color: rgba(198, 214, 233, 0.6) !important;
}

.auth-tab-btn:not(.active):hover {
  color: #516070 !important;
}

.dark .auth-tab-btn:not(.active):hover {
  color: #ffffff !important;
}

.dark #googleAuthBtn {
  background-color: #252a37 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Modern OTP Code Input Boxes ---------- */
.code-input-box {
  background: rgba(81, 96, 112, 0.05);
  border: 1.5px solid rgba(81, 96, 112, 0.16);
  color: #2f342e;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.code-input-box:focus {
  background: #ffffff !important;
  border-color: #516070 !important;
  box-shadow: 0 0 0 3px rgba(81, 96, 112, 0.18), 0 6px 16px rgba(81, 96, 112, 0.08) !important;
  transform: translateY(-2px);
  color: #2f342e !important;
}

.code-input-box.filled {
  background: rgba(81, 96, 112, 0.09) !important;
  border-color: rgba(81, 96, 112, 0.35) !important;
  color: #516070 !important;
  font-weight: 700;
}

.dark .code-input-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark .code-input-box:focus {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.3), 0 8px 20px rgba(0, 0, 0, 0.4) !important;
  color: #93c5fd !important;
  transform: translateY(-2px);
}

.dark .code-input-box.filled {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #bfdbfe !important;
  font-weight: 700;
}

@keyframes codeBoxPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(81, 96, 112, 0.25); }
  100% { transform: scale(1); }
}

.code-box-pulse {
  animation: codeBoxPulse 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.animate-shake {
  animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

#editorStarterChips {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
  max-width: 100%;
}

.starter-chip {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}
.starter-chip:hover {
  transform: translateY(-1px);
}

#starterToggleBtn {
  user-select: none;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
#starterToggleBtn:hover {
  transform: translateY(-1px);
}

#starterOptionsList {
  display: inline-flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  animation: fadeInStarters 0.2s ease-out forwards;
}

#starterOptionsList.hidden {
  display: none !important;
}

@keyframes fadeInStarters {
  from {
    opacity: 0;
    transform: scale(0.96) translateX(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

/* ---------- Access Fetch Button ---------- */
.access-fetch-btn {
  background: linear-gradient(135deg, #516070 0%, #3e4c5b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px -5px rgba(81, 96, 112, 0.35), 0 4px 6px -2px rgba(81, 96, 112, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.access-fetch-btn:hover {
  background: linear-gradient(135deg, #455464 0%, #34404e 100%) !important;
  box-shadow: 0 14px 30px -5px rgba(81, 96, 112, 0.45) !important;
  transform: translateY(-2px);
}

.dark .access-fetch-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px -4px rgba(37, 99, 235, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.dark .access-fetch-btn:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
  box-shadow: 0 14px 34px -4px rgba(37, 99, 235, 0.6) !important;
  transform: translateY(-2px);
}

/* ---------- Content Result Reader Body ---------- */
.content-text-display {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #2f342e;
  word-break: break-word;
  white-space: pre-wrap;
  user-select: text;
}

.dark .content-text-display {
  color: #e2e8f0;
}

.content-text-display pre,
.content-text-display code {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  background: rgba(81, 96, 112, 0.08);
  padding: 0.2em 0.4em;
  border-radius: 6px;
}

.dark .content-text-display pre,
.dark .content-text-display code {
  background: rgba(255, 255, 255, 0.08);
  color: #93c5fd;
}

/* ---------- Button Loading Spinner ---------- */
.btn-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.btn-loading * {
  visibility: hidden;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(244, 248, 255, 0.3);
  border-top-color: #f4f8ff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Toast Notifications ---------- */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(47, 52, 46, 0.1);
  font-size: 0.88rem;
  font-weight: 500;
  pointer-events: auto;
  animation: toastSlideIn 0.4s ease, toastSlideOut 0.4s ease 3.5s forwards;
  max-width: 360px;
  border: 1px solid rgba(175, 179, 172, 0.1);
  color: #2f342e;
}

.toast-success { border-left: 4px solid #516070; }
.toast-error { border-left: 4px solid #9f403d; }
.toast-warning { border-left: 4px solid #575e78; }

.toast-icon { font-size: 1.2rem; flex-shrink: 0; }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(100%) scale(0.9); }
}

/* ---------- Content Display Styles ---------- */
.content-text-display {
  font-family: 'Newsreader', serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #2f342e;
  white-space: pre-wrap;
  word-break: break-word;
}

.content-link-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f4f4ef;
  border-radius: 1rem;
  text-decoration: none;
  color: #516070;
  font-weight: 500;
  transition: all 0.2s ease;
  word-break: break-all;
  font-size: 0.95rem;
}

.content-link-display:hover {
  background: #e8e8e2;
  transform: translateY(-1px);
}

/* ---------- QR Code & Export Dropdown Custom Styles ---------- */
#shareQrCanvas img, #shareQrCanvas canvas {
  margin: 0 auto;
  border-radius: 8px;
}

.export-format-btn {
  transition: background-color 0.15s ease;
}

.dark #shareQrCanvas {
  background: #ffffff !important;
}

.content-image-display {
  text-align: center;
}

.content-image-display img {
  max-width: 100%;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(47, 52, 46, 0.06);
}

/* ---------- Notes History Items ---------- */
.note-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(175, 179, 172, 0.1);
}

.note-item:last-child {
  border-bottom: none;
}

.note-item:hover {
  opacity: 0.8;
}

.note-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 228, 248, 0.3);
  flex-shrink: 0;
  color: #516070;
}

.note-item-content {
  flex: 1;
  min-width: 0;
}

.note-item-text {
  font-family: 'Newsreader', serif;
  font-size: 0.95rem;
  color: #2f342e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.note-item-meta {
  font-size: 0.72rem;
  color: #5c605a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-item-code {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  padding: 2px 8px;
  background: rgba(212, 228, 248, 0.3);
  border-radius: 0.5rem;
  color: #516070;
  font-weight: 600;
}

/* ---------- Status Messages ---------- */
.status-expired {
  color: #575e78;
}

.status-error {
  color: #9f403d;
}

/* ---------- Animations ---------- */
@keyframes editorialFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- Feedback Modal ---------- */
#feedbackModal textarea {
  font-family: 'Newsreader', serif;
}

/* ==========================================================
   THEME VARIABLES & DARK MODE — Full theme overrides
   ========================================================== */
:root {
  --md-sys-color-surface: #faf9f5;
  --md-sys-color-surface-container-low: #f4f4ef;
  --md-sys-color-on-surface: #2f342e;
  --md-sys-color-on-surface-variant: #5c605a;
  --md-sys-color-primary: #516070;
}

.dark {
  --md-sys-color-surface: #161921;
  --md-sys-color-surface-container-low: #1e2230;
  --md-sys-color-on-surface: #e2e6ee;
  --md-sys-color-on-surface-variant: #94a3b8;
  --md-sys-color-primary: #c6d6e9;
}

.dark body,
.dark {
  background-color: #0f1117;
  color: #d4d8e0;
  color-scheme: dark;
}

.dark .paper-grain { opacity: 0.01; }

.dark .editorial-shadow {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.dark .editorial-border {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Sidebar */
.dark #sidebar {
  background: #161921;
}

.dark .sidebar-nav-btn.active {
  background: #1e2230 !important;
  color: #c6d6e9 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.dark .sidebar-nav-btn:not(.active) {
  color: rgba(198, 214, 233, 0.5) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- Amazing Hover Effect (Dark Mode) --- */
.dark .sidebar-nav-btn::before,
.dark .sidebar-quick-link::before,
.dark .sidebar-footer-btn::before {
  background: linear-gradient(90deg, rgba(198, 214, 233, 0.12) 0%, rgba(198, 214, 233, 0.02) 100%);
}

.dark .sidebar-nav-btn::after,
.dark .sidebar-quick-link::after,
.dark .sidebar-footer-btn::after {
  background: #93c5fd; /* Vibrant blue accent */
  box-shadow: 0 0 8px rgba(147, 197, 253, 0.5); /* Subtle glow */
}

.dark .sidebar-nav-btn:not(.active):hover,
.dark .sidebar-quick-link:hover,
.dark .sidebar-footer-btn:hover {
  background-color: transparent !important;
  color: #c6d6e9 !important;
}

.dark .sidebar-quick-link {
  color: rgba(198, 214, 233, 0.4);
}

.dark .sidebar-quick-link:hover {
  color: #c6d6e9;
  background: rgba(198, 214, 233, 0.06);
}

.dark #sidebarUserInfo {
  background: rgba(198, 214, 233, 0.04);
}

.dark #sidebarUserInfo:hover {
  background: rgba(198, 214, 233, 0.08);
}

/* Top nav / header */
.dark header {
  background: rgba(15, 17, 23, 0.95);
}

.dark .topnav-link.active {
  color: #c6d6e9;
  background: rgba(198, 214, 233, 0.1);
}

.dark .topnav-link:not(.active) {
  color: rgba(198, 214, 233, 0.4);
}

.dark .topnav-link:not(.active):hover {
  background: rgba(198, 214, 233, 0.06);
  color: #c6d6e9;
}

/* Cards */
.dark .bg-surface-container-lowest,
.dark [class*="bg-surface-container-lowest"] {
  background-color: #1a1d26 !important;
}

.dark .bg-surface-container-low,
.dark [class*="bg-surface-container-low"] {
  background-color: #14161e !important;
}

.dark .bg-surface-container {
  background-color: #1e2230 !important;
}

.dark .bg-surface-container-high {
  background-color: #252836 !important;
}

.dark .bg-surface,
.dark [class*="bg-surface "] {
  background-color: #121419 !important;
}

/* Inline tabs */
.dark .inline-tab.active {
  background: #3a4856 !important;
  color: #d4e4f8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.dark .inline-tab:not(.active) {
  color: rgba(198, 214, 233, 0.4) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Sidebar Feedback Button Hover Overrides */
#sidebarFeedbackBtn:hover {
  background-color: rgba(81, 96, 112, 0.05) !important;
  color: #516070 !important;
}

.dark #sidebarFeedbackBtn:hover {
  background-color: rgba(198, 214, 233, 0.08) !important;
  color: #c6d6e9 !important;
}

/* Expiry btns */
.dark .expiry-btn.active {
  background: rgba(198, 214, 233, 0.12);
  color: #c6d6e9;
}

.dark .expiry-btn:not(.active) {
  color: rgba(198, 214, 233, 0.4);
}

/* Inputs / textarea */
.dark textarea,
.dark select,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="url"],
.dark input[type="tel"] {
  color: #e2e6ee;
  background-color: #000000;
  border-color: rgba(198, 214, 233, 0.12);
}

.dark textarea:focus,
.dark select:focus,
.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="url"]:focus,
.dark input[type="tel"]:focus {
  background-color: #252836;
  border-color: rgba(198, 214, 233, 0.3);
  outline: none;
}

.dark option {
  background-color: #1e2230;
  color: #e2e6ee;
}

.dark textarea::placeholder,
.dark input::placeholder {
  color: rgba(212, 216, 224, 0.3);
}

.dark .paper-lines {
  background-image: linear-gradient(rgba(198, 214, 233, 0.06) 1px, transparent 1px);
}

/* Code input boxes */
.dark .code-input-box,
.dark .pin-box {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.dark .code-input-box:focus,
.dark .pin-box:focus {
  box-shadow: 0 0 0 2px rgba(198, 214, 233, 0.15);
}

.dark .code-input-box.filled {
  background: rgba(198, 214, 233, 0.15);
}

/* Auth input */
.dark .bg-surface-dim\/30 {
  background-color: rgba(198, 214, 233, 0.08);
}

/* Buttons */
.dark .bg-primary {
  background-color: #3a4856;
}

.dark .hover\:bg-primary-dim:hover {
  background-color: #2f3c49;
}

/* Text colors - High Contrast Dark Mode */
.dark .text-on-surface {
  color: #f8fafc !important;
}

.dark .text-on-surface-variant {
  color: #cbd5e1 !important;
}

.dark .text-primary {
  color: #93c5fd !important;
}

.dark [class*="text-on-surface-variant/"] {
  color: rgba(226, 232, 240, 0.85) !important;
}

.dark .text-on-surface-variant\/60,
.dark .text-on-surface-variant\/50 {
  color: rgba(148, 163, 184, 0.8) !important;
}

.dark .text-primary\/50,
.dark .text-primary\/60,
.dark .text-primary\/70 {
  color: rgba(147, 197, 253, 0.8) !important;
}

.dark .text-primary\/40 {
  color: rgba(147, 197, 253, 0.6) !important;
}

.dark #sectionHistory {
  background-color: #131622 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark #historyTimelineList::before {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.dark #reverifyPinBtn {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.dark #reverifyPinBtn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Primary container */
.dark .bg-primary-container {
  background: rgba(198, 214, 233, 0.12);
}

.dark .bg-primary-container\/40 {
  background: rgba(198, 214, 233, 0.08);
}

/* Tertiary container */
.dark .bg-tertiary-container {
  background: rgba(198, 214, 233, 0.1);
}

/* Content display */
.dark .content-text-display {
  color: #d4d8e0;
}

.dark .content-link-display {
  background: rgba(198, 214, 233, 0.06);
  color: #c6d6e9;
}

.dark .content-link-display:hover {
  background: rgba(198, 214, 233, 0.1);
}

/* Notes */
.dark .note-item-text {
  color: #d4d8e0;
}

.dark .note-item-meta {
  color: #8890a0;
}

.dark .note-item-icon {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.dark .note-item-code {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.dark .note-item {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

/* Toast */
.dark .toast {
  background: #1e2230;
  color: #d4d8e0;
  border-color: rgba(255, 255, 255, 0.05);
}


/* Footer */
.dark footer {
  color: rgba(198, 214, 233, 0.4);
}

/* Dropzone */
.dark #dropzone {
  border-color: rgba(198, 214, 233, 0.12);
  background: rgba(198, 214, 233, 0.03);
}

.dark #dropzone:hover {
  background: rgba(198, 214, 233, 0.06);
}

/* Borders in dark */
.dark .border-b,
.dark .border-outline-variant\/15 {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Scrollbar dark */
.dark ::-webkit-scrollbar-thumb {
  background: #3a3f4f;
}

/* Theme Toggle Icon Switching */
.theme-icon-light { display: none; }
.theme-icon-dark { display: inline; }
.dark .theme-icon-light { display: inline; }
.dark .theme-icon-dark { display: none; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #afb3ac; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #787c75; }

/* ---------- Selection ---------- */
::selection {
  background: rgba(81, 96, 112, 0.2);
}

/* ==========================================================
/* ==========================================================
   ADMIN PANEL v4.0 — Unified Light & Dark Design System
   ========================================================== */

#panelAdmin {
  max-width: 1400px;
  margin: 0 auto;
}

.admin-card {
  background: white;
  border: 1px solid rgba(175, 179, 172, 0.15);
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px rgba(47, 52, 46, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .admin-card {
  background: #1e2230;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Admin Tab Buttons */
.admin-tab-btn {
  color: var(--md-sys-color-on-surface-variant, #5c605a);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-tab-btn.active {
  background: #ffffff !important;
  color: #516070 !important;
  box-shadow: 0 2px 10px rgba(47, 52, 46, 0.08);
  border: 1px solid rgba(175, 179, 172, 0.2);
}

.admin-tab-btn:not(.active):hover {
  color: #2f342e;
  background: rgba(81, 96, 112, 0.06);
}

.dark .admin-tab-btn {
  color: rgba(198, 214, 233, 0.4);
}

.dark .admin-tab-btn.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .admin-tab-btn:not(.active):hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

/* Admin Table */
.admin-table thead {
  border-bottom: 1px solid rgba(175, 179, 172, 0.15);
}

.dark .admin-table thead {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-table tbody tr {
  transition: background 0.2s ease;
}

.admin-table tbody tr:hover {
  background: rgba(81, 96, 112, 0.03);
}

.dark .admin-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Active Pill Buttons */
.admin-broadcast-type.active,
.admin-feedback-filter.active {
  background: #516070 !important;
  color: #ffffff !important;
  border-color: #516070 !important;
}

.dark .admin-broadcast-type.active,
.dark .admin-feedback-filter.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}


.dark .admin-tab-btn:not(.active):hover {
  background: rgba(198, 214, 233, 0.05);
}

.dark .stat-card-gradient-1 {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.dark .stat-card-gradient-2 {
  background: linear-gradient(135deg, #2d1b10 0%, #1e110a 100%);
}

.dark .stat-card-gradient-3 {
  background: linear-gradient(135deg, #311111 0%, #1a0808 100%);
}

.dark .bg-white\/30 {
  background-color: rgba(30, 34, 48, 0.4) !important;
}

/* Table Styles */
.admin-table th {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.1em;
}

.admin-table tr:hover {
  background: rgba(81, 96, 112, 0.02);
}

.dark .admin-table tr:hover {
  background: rgba(198, 214, 233, 0.02);
}

/* Broadcast Live Card */
#adminCurrentBroadcast {
  border-left: 4px solid #9f403d;
  background: rgba(159, 64, 61, 0.03);
}

.dark #adminCurrentBroadcast {
  background: rgba(159, 64, 61, 0.08);
  border-left-color: #ff5252;
}

.dark #adminCurrentBroadcast .text-error {
  color: #ff8a80 !important;
  text-shadow: 0 0 8px rgba(255, 138, 128, 0.3);
}

.dark #adminCurrentBroadcast .admin-card {
  background: rgba(159, 64, 61, 0.05);
  border-color: rgba(255, 82, 82, 0.2);
}

/* ---------- Account Tab Active ---------- */
.account-tab.active {
  background: #516070 !important;
  box-shadow: 0 2px 8px rgba(81, 96, 112, 0.3) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.account-tab:not(.active) {
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(81, 96, 112, 0.6) !important;
}

/* ---------- Account Section Visibility ---------- */
.account-section {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.account-section[data-account-active="false"] {
  display: none;
}

.account-section[data-account-active="true"] {
  display: block;
  animation: editorialFadeIn 0.3s ease;
}

/* File manager needs flex, override display:block */
#sectionFiles[data-account-active="true"] {
  display: flex !important;
  flex-direction: column;
}

/* ---------- Saved Note Items ---------- */
.saved-note-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(175, 179, 172, 0.1);
  transition: all 0.2s ease;
}

.saved-note-item:last-child {
  border-bottom: none;
}

.saved-note-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(213, 220, 251, 0.3);
  flex-shrink: 0;
  color: #575e78;
}

.saved-note-item-content {
  flex: 1;
  min-width: 0;
}

.saved-note-item-text {
  font-family: 'Newsreader', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2f342e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.saved-note-item-snippet {
  font-size: 0.78rem;
  color: #787c75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  font-family: 'Inter', sans-serif;
}

.saved-note-cat-badge {
  display: inline-flex;
  font-size: 0.65rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(213, 220, 251, 0.3);
  color: #575e78;
  font-weight: 600;
  white-space: nowrap;
}

/* Category filter pills */
.cat-filter-btn.active {
  background: rgba(213, 220, 251, 0.4);
  color: #516070;
}

.cat-filter-btn:not(.active) {
  background: transparent;
}

/* Select dropdown custom arrow */
select.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'%3E%3Cpath fill='%23787c75' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.saved-note-item-meta {
  font-size: 0.72rem;
  color: #5c605a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.saved-note-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-self: center;
}

.saved-note-action {
  width: 32px;
  height: 32px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #787c75;
  transition: all 0.15s ease;
}

.saved-note-action:hover {
  background: rgba(81, 96, 112, 0.08);
  color: #516070;
}

.saved-note-action.delete:hover {
  background: rgba(159, 64, 61, 0.08);
  color: #9f403d;
}

/* ---------- Dark Mode: Account Dashboard ---------- */
.dark .account-tab.active {
  background: #3a4856 !important;
  color: #d4e4f8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.dark .account-tab:not(.active) {
  color: rgba(198, 214, 233, 0.4) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dark .saved-note-item-icon {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.dark .saved-note-item-text {
  color: #d4d8e0;
}

.dark .saved-note-item-meta {
  color: #8890a0;
}

.dark .saved-note-item {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.dark .saved-note-action {
  color: rgba(198, 214, 233, 0.4);
}

.dark .saved-note-action:hover {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.dark .saved-note-action.delete:hover {
  background: rgba(159, 64, 61, 0.15);
  color: #fe8983;
}

.dark .saved-note-item-snippet {
  color: #6a7080;
}

.dark .saved-note-cat-badge {
  background: rgba(198, 214, 233, 0.08);
  color: #8890a0;
}

.dark .cat-filter-btn.active {
  background: rgba(198, 214, 233, 0.1);
  color: #c6d6e9;
}

.dark .cat-filter-btn:not(.active) {
  color: rgba(198, 214, 233, 0.3);
}

select.appearance-none {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23787c75' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.dark select.appearance-none {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23a0a8b4' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

.dark .pin-change-box {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.dark .pin-change-box:focus {
  box-shadow: 0 0 0 2px rgba(198, 214, 233, 0.15);
}

/* ---------- Mobile Bottom Spacing ---------- */
@media (max-width: 767px) {
  main {
    padding-bottom: 80px;
  }
}

/* ---------- Admin Dashboard v3.0 ---------- */
.admin-tab-btn.active {
  background: white !important;
  box-shadow: 0 4px 12px rgba(47, 52, 46, 0.08);
  color: #9f403d !important; /* admin-error-red */
  transform: translateX(4px);
}

.dark .admin-tab-btn.active {
  background: #1e2230 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.admin-section {
  animation: editorialFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-section.hidden {
  display: none;
}

#adminUserList tr:last-child td {
  border-bottom: none;
}

@keyframes spring-up {
  0% { transform: translateY(40px) scale(0.9); opacity: 0; }
  70% { transform: translateY(-5px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.animate-spring-up {
  animation: spring-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Feedback Modal ---------- */
#feedbackModal textarea {
  box-shadow: inset 0 2px 4px rgba(47, 52, 46, 0.05);
}

.feedback-chip.active {
  box-shadow: 0 4px 12px rgba(104, 112, 103, 0.15);
}

.dark #feedbackModal .bg-surface-container-lowest {
  background: #1a1d27;
}

.dark #feedbackModal textarea {
  background: #11141d !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ---------- Edit Note Modal ---------- */
#editNoteModalBox {
  animation: spring-up 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.dark #editNoteModalBox {
  background: #121419;
  border-color: rgba(255,255,255,0.06);
}

.dark #editNoteModalBox .border-b,
.dark #editNoteModalBox .border-t {
  border-color: rgba(198, 214, 233, 0.08);
}

.dark #editNoteModalBox h3 { color: #c6d6e9; }
.dark #editNoteModalBox label { color: rgba(198, 214, 233, 0.5); }
.dark #editNoteTypeLabel { color: rgba(198, 214, 233, 0.4); }
.dark #editNoteCharCount { color: rgba(198, 214, 233, 0.3); }

.dark #editNoteSaveBtn {
  background: #3a4856 !important;
  color: #d4e4f8 !important;
}
.dark #editNoteSaveBtn:hover { background: #2f3c49 !important; }

.dark #editNoteCancelBtn { color: rgba(198, 214, 233, 0.5); }
.dark #editNoteCancelBtn:hover {
  background: rgba(198, 214, 233, 0.06);
  color: #c6d6e9;
}

.dark #editNoteImageInfo {
  background: rgba(198, 214, 233, 0.05);
  border-color: rgba(198, 214, 233, 0.08);
  color: rgba(198, 214, 233, 0.5);
}

.dark #editNoteModalClose { color: rgba(198, 214, 233, 0.4); }
.dark #editNoteModalClose:hover {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

/* ============================================================
   RICH TEXT EDITOR — Toolbar, Dropdowns, Editor Surface
   ============================================================ */

/* ---------- Toolbar Container ---------- */
.editor-toolbar-container {
  display: flex;
  flex-direction: column;
  background: rgba(81, 96, 112, 0.03);
  border-bottom: 1px solid rgba(175, 179, 172, 0.12);
  border-radius: 20px 20px 0 0;
  transition: all 0.3s ease;
}

.dark .editor-toolbar-container {
  background: rgba(198, 214, 233, 0.04);
  border-bottom-color: rgba(198, 214, 233, 0.08);
}

.editor-toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 12px;
}

@media (max-width: 639px) {
  .editor-toolbar-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 8px !important;
    gap: 3px !important;
  }

  .editor-toolbar-row::-webkit-scrollbar {
    display: none;
  }
}

.toolbar-secondary {
  border-top: 1px dashed rgba(175, 179, 172, 0.15);
  padding-top: 6px;
  padding-bottom: 6px;
  background: rgba(81, 96, 112, 0.015);
}

.dark .toolbar-secondary {
  border-top-color: rgba(198, 214, 233, 0.06);
  background: rgba(198, 214, 233, 0.02);
}

/* ---------- Toolbar Groups ---------- */
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.toolbar-divider {
  width: 1px;
  height: 22px;
  background: rgba(175, 179, 172, 0.2);
  margin: 0 6px;
  flex-shrink: 0;
}

.dark .toolbar-divider {
  background: rgba(198, 214, 233, 0.12);
}

.toolbar-spacer {
  flex-grow: 1;
}

/* ---------- Toolbar Buttons ---------- */
.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(81, 96, 112, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.toolbar-btn .material-symbols-outlined {
  font-size: 19px;
  transition: transform 0.2s ease;
}

.toolbar-btn.has-caret::after {
  content: 'arrow_drop_down';
  font-family: 'Material Symbols Outlined';
  font-size: 14px;
  margin-left: -2px;
  opacity: 0.7;
}

.toolbar-btn:hover {
  background: rgba(81, 96, 112, 0.08);
  color: #3b4652;
  border-color: rgba(81, 96, 112, 0.05);
}

.toolbar-btn.active {
  background: rgba(81, 96, 112, 0.12);
  color: #2e3640;
  font-weight: 600;
  border-color: rgba(81, 96, 112, 0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.dark .toolbar-btn {
  color: rgba(198, 214, 233, 0.6);
}

.dark .toolbar-btn:hover {
  background: rgba(198, 214, 233, 0.1);
  color: #ffffff;
  border-color: rgba(198, 214, 233, 0.08);
}

.dark .toolbar-btn.active {
  background: rgba(198, 214, 233, 0.15);
  color: #ffffff;
  border-color: rgba(198, 214, 233, 0.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

/* Voice Active Pulse */
.toolbar-btn.voice-active {
  color: #c62828 !important;
  animation: voicePulse 1.2s ease-in-out infinite;
}

@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(198, 40, 40, 0); }
}

/* ---------- Dropdown Wrapper ---------- */
.toolbar-dropdown-wrap {
  position: relative;
}

/* ---------- Dropdown Panels ---------- */
.editor-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid rgba(175, 179, 172, 0.15);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(47, 52, 46, 0.12), 0 2px 8px rgba(47, 52, 46, 0.06);
  z-index: 100;
  padding: 6px;
  min-width: 140px;
  animation: dropdownFadeIn 0.15s ease;
}

.editor-dropdown.open {
  display: block;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.dark .editor-dropdown {
  background: #1a1d24;
  border-color: rgba(198, 214, 233, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* ---------- Dropdown Items ---------- */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 13px;
  color: #2e3640;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
}

.dropdown-item:hover {
  background: rgba(81, 96, 112, 0.06);
}

.dark .dropdown-item {
  color: #c6d6e9;
}

.dark .dropdown-item:hover {
  background: rgba(198, 214, 233, 0.08);
}

/* Heading styles in dropdown */
.heading-h1 { font-size: 20px; font-weight: 700; }
.heading-h2 { font-size: 17px; font-weight: 600; }
.heading-h3 { font-size: 15px; font-weight: 600; }

/* ---------- Color Picker ---------- */
.color-dropdown {
  min-width: 200px;
  padding: 10px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.12s;
}

.color-swatch:hover {
  border-color: rgba(81, 96, 112, 0.4);
  transform: scale(1.15);
}

.custom-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(175, 179, 172, 0.12);
}

.custom-color-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(81, 96, 112, 0.5);
}

.dark .custom-color-label { color: rgba(198, 214, 233, 0.4); }
.dark .custom-color-row { border-top-color: rgba(198, 214, 233, 0.08); }

.custom-color-input {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  background: transparent;
}

/* ---------- Table Grid Picker ---------- */
.table-dropdown {
  min-width: 160px;
  padding: 10px;
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.table-grid-cell {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(175, 179, 172, 0.25);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.1s;
}

.table-grid-cell.active,
.table-grid-cell:hover {
  background: rgba(81, 96, 112, 0.15);
  border-color: #516070;
}

.dark .table-grid-cell {
  border-color: rgba(198, 214, 233, 0.15);
}

.dark .table-grid-cell.active,
.dark .table-grid-cell:hover {
  background: rgba(198, 214, 233, 0.15);
  border-color: #c6d6e9;
}

.table-grid-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(81, 96, 112, 0.5);
  margin-top: 6px;
}

.dark .table-grid-label { color: rgba(198, 214, 233, 0.4); }

/* ---------- Emoji Picker ---------- */
.emoji-dropdown {
  min-width: 220px;
  padding: 8px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
}

.emoji-item:hover {
  background: rgba(81, 96, 112, 0.08);
}

.dark .emoji-item:hover {
  background: rgba(198, 214, 233, 0.08);
}

/* ---------- Title & Link Area Outline ---------- */
#noteTitle,
.shareLinkInput,
#noteMeta > div,
.link-input-row {
  outline: 1px solid rgba(81, 96, 112, 0.1);
  outline-offset: 2px;
}

.dark #noteTitle,
.dark .shareLinkInput,
.dark #noteMeta > div,
.dark .link-input-row {
  outline: 1px solid rgba(198, 214, 233, 0.1);
  outline-offset: 2px;
}

/* ---------- Accessed Note Header (Title & Category Tag) ---------- */
.accessed-note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(81, 96, 112, 0.05);
  border: 1px solid rgba(81, 96, 112, 0.12);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dark .accessed-note-meta {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.accessed-note-title {
  font-family: var(--font-headline, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1e293b;
  letter-spacing: -0.015em;
  margin: 0;
  word-break: break-word;
  max-width: 100%;
}

.dark .accessed-note-title {
  color: #f1f5f9;
}

.accessed-note-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 9999px;
  background: rgba(81, 96, 112, 0.09);
  color: #516070;
  border: 1px solid rgba(81, 96, 112, 0.18);
  white-space: nowrap;
  flex-shrink: 0;
}

.dark .accessed-note-tag {
  background: rgba(198, 214, 233, 0.12);
  color: #c6d6e9;
  border-color: rgba(198, 214, 233, 0.22);
}

.shareLinkInput {
  color: #1063c9;
  background-color: transparent !important;
}

.dark .shareLinkInput {
  color: #93c5fd;
  background-color: transparent !important;
}

.dark .shareLinkInput::placeholder {
  color: rgba(147, 197, 253, 0.4);
}

/* ---------- Rich Editor Surface ---------- */
.rich-editor {
  position: relative;
  min-height: 240px;
  outline: none;
  font-family: 'Newsreader', serif;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--md-sys-color-on-surface, #2f342e);
  padding: 20px;
  border-radius: 16px;
  background: #f6f6f6;
  border: 1px solid rgba(175, 179, 172, 0.2);
  word-wrap: break-word;
  overflow-wrap: break-word;
  transition: all 0.2s ease;
}

.rich-editor:focus {
  border-color: rgba(81, 96, 112, 0.3);
  box-shadow: 0 0 0 3px rgba(81, 96, 112, 0.06);
}

.rich-editor:empty:before,
.rich-editor.is-empty:before {
  content: attr(data-placeholder);
  color: var(--md-sys-color-on-surface-variant, #5c605a);
  opacity: 0.45;
  pointer-events: none;
  position: absolute;
  left: 20px;
  top: 20px;
}

.dark .rich-editor {
  background: #1a1d26;
  border-color: rgba(255, 255, 255, 0.08);
  color: #dde4ee;
}

.dark .rich-editor:focus {
  border-color: rgba(198, 214, 233, 0.3);
  box-shadow: 0 0 0 3px rgba(198, 214, 233, 0.06);
}

.dark .rich-editor:empty:before,
.dark .rich-editor.is-empty:before {
  color: rgba(198, 214, 233, 0.4);
}

/* Editor content styles */
.rich-editor h1 { font-family: 'Inter', sans-serif; font-size: 1.75rem; font-weight: 700; margin: 1em 0 0.4em; line-height: 1.3; }
.rich-editor h2 { font-family: 'Inter', sans-serif; font-size: 1.4rem; font-weight: 600; margin: 0.9em 0 0.35em; line-height: 1.35; }
.rich-editor h3 { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 600; margin: 0.8em 0 0.3em; line-height: 1.4; }

.rich-editor blockquote {
  border-left: 3px solid rgba(81, 96, 112, 0.25);
  padding-left: 16px;
  margin: 0.8em 0;
  color: rgba(81, 96, 112, 0.75);
  font-style: italic;
}

.dark .rich-editor blockquote {
  border-left-color: rgba(198, 214, 233, 0.2);
  color: rgba(198, 214, 233, 0.6);
}

.rich-editor ul, .rich-editor ol {
  padding-left: 24px;
  margin: 0.5em 0;
}

.rich-editor ul { list-style: disc; }
.rich-editor ol { list-style: decimal; }

.rich-editor a {
  color: #1565c0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dark .rich-editor a { color: #90caf9; }

/* Code blocks */
.editor-code-block {
  background: #f4f4ef;
  border: 1px solid rgba(175, 179, 172, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-x: auto;
  margin: 0.8em 0;
  white-space: pre-wrap;
}

.dark .editor-code-block {
  background: rgba(198, 214, 233, 0.06);
  border-color: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

/* Inline code */
.editor-inline-code {
  background: rgba(81, 96, 112, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.875em;
  color: #ad1457;
}

.dark .editor-inline-code {
  background: rgba(198, 214, 233, 0.08);
  color: #f48fb1;
}

/* Tables */
.editor-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 0.9em;
}

.editor-table td {
  border: 1px solid rgba(175, 179, 172, 0.25);
  padding: 8px 12px;
  min-width: 60px;
}

.editor-table tr:first-child td {
  font-weight: 600;
  background: rgba(81, 96, 112, 0.05);
}

.dark .editor-table td {
  border-color: rgba(198, 214, 233, 0.12);
}

.dark .editor-table tr:first-child td {
  background: rgba(198, 214, 233, 0.06);
}

/* Horizontal rule */
.editor-hr {
  border: none;
  border-top: 1px solid rgba(175, 179, 172, 0.2);
  margin: 1.5em 0;
}

.dark .editor-hr {
  border-top-color: rgba(198, 214, 233, 0.1);
}

/* Inline images */
.editor-inline-img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 10px;
  margin: 0.5em 0;
  box-shadow: 0 4px 12px rgba(47, 52, 46, 0.08);
}

/* Checklist */
.editor-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.editor-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  accent-color: #516070;
  cursor: pointer;
  flex-shrink: 0;
}

.editor-checklist-item span[contenteditable="true"] {
  flex: 1;
  outline: none;
}

/* Find highlight */
.find-highlight {
  background: #fff176;
  border-radius: 2px;
  padding: 0 1px;
}

.dark .find-highlight {
  background: rgba(255, 241, 118, 0.3);
  color: #fff;
}

/* ---------- Find & Replace Panel ---------- */
.find-replace-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(81, 96, 112, 0.03);
  border: 1px solid rgba(175, 179, 172, 0.15);
  border-radius: 16px;
  margin: 8px 12px;
}

.dark .find-replace-panel {
  background: rgba(198, 214, 233, 0.03);
  border-color: rgba(198, 214, 233, 0.08);
}

.find-replace-input {
  flex: 1;
  min-width: 80px;
  padding: 5px 10px;
  border: 1px solid rgba(175, 179, 172, 0.2);
  border-radius: 8px;
  font-size: 12px;
  background: transparent;
  color: #2e3640;
  outline: none;
}

.find-replace-input:focus {
  border-color: #516070;
}

.dark .find-replace-input {
  border-color: rgba(198, 214, 233, 0.12);
  color: #c6d6e9;
}

.dark .find-replace-input:focus {
  border-color: #c6d6e9;
}

.find-replace-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(81, 96, 112, 0.5);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}

.find-replace-btn:hover {
  background: rgba(81, 96, 112, 0.08);
  color: #516070;
}

.dark .find-replace-btn { color: rgba(198, 214, 233, 0.4); }
.dark .find-replace-btn:hover { background: rgba(198, 214, 233, 0.08); color: #c6d6e9; }

/* ---------- AI Assist Panel ---------- */
.ai-assist-panel {
  padding: 14px 18px;
  background: #ffffff;
  border-radius: 18px;
  margin: 10px 14px;
  border: 1px solid rgba(175, 179, 172, 0.18);
  box-shadow: 0 4px 16px rgba(47, 52, 46, 0.06);
  transition: all 0.2s ease;
}

.dark .ai-assist-panel {
  background: #1a1d24;
  border-color: rgba(198, 214, 233, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.ai-panel-animate-in {
  animation: aiSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes aiSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ai-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #516070;
}

.dark .ai-panel-title {
  color: #c6d6e9;
}

.dark .ai-badge-gemini {
  background: rgba(198, 214, 233, 0.08) !important;
  color: #c6d6e9 !important;
  border-color: rgba(198, 214, 233, 0.15) !important;
}

.ai-panel-title-icon {
  font-size: 17px !important;
  color: #8ba4b8;
}

.dark .ai-panel-title-icon {
  color: #9cb5cb;
}

.ai-change-key-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(175, 179, 172, 0.25);
  background: transparent;
  color: #516070;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-change-key-btn:hover {
  background: rgba(81, 96, 112, 0.08);
}

.dark .ai-change-key-btn {
  border-color: rgba(198, 214, 233, 0.15);
  color: #c6d6e9;
}

.dark .ai-change-key-btn:hover {
  background: rgba(198, 214, 233, 0.08);
}

/* API Key Setup Section */
.ai-key-setup {
  padding: 14px 16px;
  background: rgba(81, 96, 112, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(175, 179, 172, 0.18);
  margin-bottom: 8px;
}

.dark .ai-key-setup {
  background: rgba(15, 18, 24, 0.6);
  border-color: rgba(198, 214, 233, 0.08);
}

.ai-key-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #516070;
  margin-bottom: 4px;
}

.dark .ai-key-title {
  color: #c6d6e9;
}

.ai-key-desc {
  font-size: 11px;
  color: #5c605a;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.dark .ai-key-desc {
  color: #8b9bb0;
}

.ai-key-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.ai-key-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid rgba(175, 179, 172, 0.25);
  border-radius: 8px;
  font-size: 12px;
  font-family: monospace;
  background: #ffffff;
  color: #2e3640;
  outline: none;
  transition: border-color 0.15s;
}

.ai-key-input:focus {
  border-color: #516070;
}

.dark .ai-key-input {
  background: #0f1218;
  border-color: rgba(198, 214, 233, 0.15);
  color: #c6d6e9;
}

.dark .ai-key-input:focus {
  border-color: #9cb5cb;
}

.ai-key-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: #516070;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-key-save-btn:hover {
  background: #414e5c;
}

.dark .ai-key-save-btn {
  background: #3a4856;
  color: #d4e4f8;
}

.dark .ai-key-save-btn:hover {
  background: #47586a;
}

.ai-key-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #8ba4b8;
  text-decoration: none;
  transition: color 0.15s;
}

.ai-key-link:hover {
  color: #516070;
  text-decoration: underline;
}

.dark .ai-key-link:hover {
  color: #c6d6e9;
}

/* Action Section */
.ai-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(81, 96, 112, 0.08);
  color: #516070;
}

.dark .ai-scope-badge {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.ai-scope-badge.has-selection {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
}

.dark .ai-scope-badge.has-selection {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
}

.ai-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 8px;
  padding: 10px 0 8px;
}

.ai-action-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1.5px solid rgba(175, 179, 172, 0.22);
  border-radius: 10px;
  background: rgba(81, 96, 112, 0.04);
  color: #516070;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.ai-action-chip:hover {
  border-color: #8ba4b8;
  background: rgba(81, 96, 112, 0.08);
  transform: translateY(-1px);
}

.dark .ai-action-chip {
  background: rgba(198, 214, 233, 0.04);
  border-color: rgba(198, 214, 233, 0.12);
  color: #c6d6e9;
}

.dark .ai-action-chip:hover {
  border-color: #8ba4b8;
  background: rgba(198, 214, 233, 0.08);
}

.ai-action-chip.active {
  background: #516070 !important;
  color: #ffffff !important;
  border-color: #516070 !important;
  box-shadow: 0 2px 8px rgba(81, 96, 112, 0.28);
}

.dark .ai-action-chip.active {
  background: #3a4856 !important;
  color: #d4e4f8 !important;
  border-color: #4f6377 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ai-action-chip .chip-icon {
  font-size: 13px;
  line-height: 1;
}

.ai-custom-prompt-row {
  margin: 6px 0 10px;
}

.ai-custom-prompt-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid rgba(175, 179, 172, 0.25);
  border-radius: 10px;
  font-size: 12px;
  background: #ffffff;
  color: #2e3640;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s;
}

.ai-custom-prompt-input:focus {
  border-color: #516070;
}

.dark .ai-custom-prompt-input {
  background: #0f1218;
  border-color: rgba(198, 214, 233, 0.15);
  color: #c6d6e9;
}

.dark .ai-custom-prompt-input:focus {
  border-color: #9cb5cb;
}

.ai-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.ai-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #516070 0%, #3a4856 100%);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(81, 96, 112, 0.25);
}

.ai-run-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.ai-run-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.dark .ai-run-btn {
  background: linear-gradient(135deg, #3a4856 0%, #293540 100%);
  color: #d4e4f8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ai-btn-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: aiSpin 0.6s linear infinite;
}

@keyframes aiSpin {
  to { transform: rotate(360deg); }
}

/* Preview Section */
.ai-preview-section {
  margin-top: 14px;
  border: 1.5px solid rgba(175, 179, 172, 0.2);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.dark .ai-preview-section {
  border-color: rgba(198, 214, 233, 0.1);
  background: #0f1218;
}

.ai-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(81, 96, 112, 0.06);
  font-size: 11px;
  font-weight: 700;
  color: #516070;
  border-bottom: 1px solid rgba(175, 179, 172, 0.15);
}

.dark .ai-preview-header {
  background: rgba(198, 214, 233, 0.04);
  color: #c6d6e9;
  border-bottom-color: rgba(198, 214, 233, 0.08);
}

.ai-preview-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-preview-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.12s;
}

.ai-preview-action-btn.apply {
  background: #2e7d32;
  color: #ffffff;
}

.ai-preview-action-btn.apply:hover {
  background: #256628;
}

.ai-preview-action-btn.discard {
  background: rgba(81, 96, 112, 0.08);
  color: #516070;
}

.dark .ai-preview-action-btn.discard {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.ai-preview-action-btn.copy {
  background: rgba(81, 96, 112, 0.08);
  color: #516070;
}

.dark .ai-preview-action-btn.copy {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.ai-preview-action-btn.regenerate {
  background: rgba(81, 96, 112, 0.08);
  color: #516070;
  padding: 4px 6px;
}

.dark .ai-preview-action-btn.regenerate {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
}

.ai-preview-content {
  padding: 12px 14px;
  max-height: 240px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: #2e3640;
}

.dark .ai-preview-content {
  color: #d4e4f8;
}

/* AI Floating Button in Textarea */
.ai-floating-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1.5px solid rgba(81, 96, 112, 0.2);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #516070;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(47, 52, 46, 0.08);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.ai-floating-btn .ai-floating-icon {
  font-size: 15px !important;
  color: #516070;
  transition: transform 0.3s ease;
}

.ai-floating-btn:hover {
  transform: translateY(-2px);
  border-color: #8ba4b8;
  box-shadow: 0 6px 18px rgba(81, 96, 112, 0.18);
  background: #ffffff;
  color: #364350;
}

.ai-floating-btn:hover .ai-floating-icon {
  transform: rotate(18deg) scale(1.12);
}

.ai-floating-btn:active {
  transform: translateY(0);
}

.ai-floating-btn.active {
  background: linear-gradient(135deg, #516070 0%, #3a4856 100%);
  color: #ffffff;
  border-color: #516070;
  box-shadow: 0 4px 16px rgba(81, 96, 112, 0.3);
}

.ai-floating-btn.active .ai-floating-icon {
  color: #ffffff;
}

.dark .ai-floating-btn {
  background: rgba(26, 29, 36, 0.88);
  border-color: rgba(198, 214, 233, 0.14);
  color: #c6d6e9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.dark .ai-floating-btn .ai-floating-icon {
  color: #9cb5cb;
}

.dark .ai-floating-btn:hover {
  background: #232731;
  border-color: #8ba4b8;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.dark .ai-floating-btn.active {
  background: linear-gradient(135deg, #3a4856 0%, #293540 100%);
  color: #d4e4f8;
  border-color: #4f6377;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

.dark .ai-floating-btn.active .ai-floating-icon {
  color: #d4e4f8;
}

@media (max-width: 480px) {
  .ai-floating-btn {
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* Note Expiry Timer Badge in Access Result */
#contentExpiryTimerBadge {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
}

#contentExpiryTimerBadge .material-symbols-outlined {
  font-size: 14px;
}

/* ---------- Link Dialog ---------- */
.link-dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  border-radius: 20px;
}

.link-dialog {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  width: 320px;
  box-shadow: 0 16px 48px rgba(47, 52, 46, 0.15);
}

.dark .link-dialog {
  background: #1a1d24;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.link-dialog-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #516070;
  margin-bottom: 12px;
}

.dark .link-dialog-title { color: #c6d6e9; }

.link-dialog-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(175, 179, 172, 0.25);
  border-radius: 10px;
  font-size: 13px;
  background: transparent;
  color: #2e3640;
  outline: none;
  margin-bottom: 12px;
}

.link-dialog-input:focus {
  border-color: #516070;
}

.dark .link-dialog-input {
  border-color: rgba(198, 214, 233, 0.15);
  color: #c6d6e9;
}

.link-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.link-dialog-cancel,
.link-dialog-insert {
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.link-dialog-cancel {
  background: rgba(81, 96, 112, 0.06);
  color: rgba(81, 96, 112, 0.6);
}

.link-dialog-cancel:hover {
  background: rgba(81, 96, 112, 0.1);
}

.link-dialog-insert {
  background: #516070;
  color: #f4f8ff;
}

.link-dialog-insert:hover {
  background: #455464;
}

.dark .link-dialog-cancel {
  background: rgba(198, 214, 233, 0.06);
  color: rgba(198, 214, 233, 0.5);
}

.dark .link-dialog-insert {
  background: #3a4856;
  color: #d4e4f8;
}

/* ---------- Fullscreen / Focus Mode ---------- */
.editor-fullscreen {
  position: fixed !important;
  inset: 0;
  z-index: 9998;
  background: #faf9f5;
  display: flex;
  flex-direction: column;
  border-radius: 0 !important;
}

.dark .editor-fullscreen {
  background: #0d0f12;
}

.editor-fullscreen .editor-toolbar {
  border-radius: 0;
}

.editor-fullscreen #inputText {
  flex: 1;
  overflow-y: auto;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.editor-fullscreen .rich-editor {
  min-height: 100%;
}

/* ---------- Keyboard Shortcuts Panel ---------- */
.shortcuts-panel {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  border-radius: 20px;
}

.shortcuts-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  width: 360px;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(47, 52, 46, 0.15);
}

.dark .shortcuts-card {
  background: #1a1d24;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.shortcuts-header h3 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #516070;
}

.dark .shortcuts-header h3 { color: #c6d6e9; }

.shortcuts-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(81, 96, 112, 0.4);
  border-radius: 6px;
  cursor: pointer;
}

.shortcuts-close:hover {
  background: rgba(81, 96, 112, 0.08);
  color: #516070;
}

.dark .shortcuts-close { color: rgba(198, 214, 233, 0.4); }
.dark .shortcuts-close:hover { background: rgba(198, 214, 233, 0.08); color: #c6d6e9; }

.shortcuts-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
}

.shortcut-row:hover {
  background: rgba(81, 96, 112, 0.04);
}

.dark .shortcut-row:hover {
  background: rgba(198, 214, 233, 0.04);
}

.shortcut-row kbd {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  background: rgba(81, 96, 112, 0.06);
  color: #516070;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(175, 179, 172, 0.15);
}

.dark .shortcut-row kbd {
  background: rgba(198, 214, 233, 0.06);
  color: #c6d6e9;
  border-color: rgba(198, 214, 233, 0.1);
}

.shortcut-row span:last-child {
  font-size: 12px;
  color: rgba(81, 96, 112, 0.55);
}

.dark .shortcut-row span:last-child {
  color: rgba(198, 214, 233, 0.45);
}

/* ---------- Markdown Textarea ---------- */
.markdown-textarea {
  width: 100%;
  min-height: 240px;
  outline: none;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--md-sys-color-on-surface, #2f342e);
  padding: 20px;
  border-radius: 16px;
  background: rgb(237 246 251);
  border: 1px solid rgba(175, 179, 172, 0.2);
  resize: vertical;
}

.dark .markdown-textarea {
  background: #1a1d26;
  border-color: rgba(255, 255, 255, 0.08);
  color: #dde4ee;
}

/* ---------- Editor Stats in Bottom Bar ---------- */
.editor-stats {
  text-transform: uppercase;
}

/* ---------- Responsive: Mobile Toolbar ---------- */
@media (max-width: 640px) {
  .editor-toolbar {
    padding: 6px 8px;
    gap: 1px;
  }

  .toolbar-btn {
    width: 28px;
    height: 28px;
  }

  .toolbar-btn .material-symbols-outlined {
    font-size: 16px;
  }

  .toolbar-divider {
    height: 16px;
    margin: 0 2px;
  }
}


/* ============================================================
   FILE MANAGER — eNotePad
   ============================================================ */

/* ── Layout ────────────────────────────────────────────────── */
#sectionFiles {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 520px;
}

.fm-layout {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 460px;
  background: var(--fm-bg, #faf9f5);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

/* ── Toolbar ───────────────────────────────────────────────── */
.fm-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--fm-surface, #f4f4ef);
  border-bottom: 1px solid rgba(175,179,172,0.15);
  flex-wrap: wrap;
}

.fm-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(81,96,112,0.7);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.fm-toolbar-btn:hover { background: rgba(81,96,112,0.08); color: #516070; }
.fm-toolbar-btn.primary { background: #516070; color: #f4f8ff; }
.fm-toolbar-btn.primary:hover { background: #455464; }
.fm-toolbar-btn .material-symbols-outlined { font-size: 16px; }

.fm-toolbar-sep { width: 1px; height: 24px; background: rgba(175,179,172,0.3); margin: 0 2px; }
.fm-toolbar-spacer { flex: 1; }

/* Search */
.fm-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.fm-search-wrap .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(81,96,112,0.5);
  pointer-events: none;
  z-index: 2;
}
.fm-search-input {
  padding: 8px 16px 8px 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(175,179,172,0.3);
  background: rgba(255,255,255,0.7);
  font-size: 13px;
  color: #2f342e;
  width: 190px;
  outline: none;
  transition: all 0.2s ease;
}
.fm-search-input:focus { border-color: rgba(81,96,112,0.6); background: #fff; box-shadow: 0 0 0 3px rgba(81,96,112,0.12); }
.fm-search-input::placeholder { color: rgba(81,96,112,0.45); }

/* Sort dropdown */
.fm-sort-wrap { position: relative; }
.fm-sort-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid rgba(175,179,172,0.2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 140px;
  z-index: 200;
  overflow: hidden;
}
.fm-sort-dropdown.open { display: block; }
.fm-sort-dropdown button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 14px;
  font-size: 12px; font-weight: 500; color: #516070;
  border: none; background: transparent; cursor: pointer; text-align: left;
}
.fm-sort-dropdown button:hover { background: rgba(81,96,112,0.06); }

/* ── Breadcrumb ────────────────────────────────────────────── */
.fm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(175,179,172,0.1);
  font-size: 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.fm-crumb {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  color: rgba(81,96,112,0.55); border: none; background: transparent; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.fm-crumb:hover { background: rgba(81,96,112,0.08); color: #516070; }
.fm-crumb.active { color: #516070; font-weight: 700; pointer-events: none; }
.fm-crumb-sep { color: rgba(81,96,112,0.3); font-size: 14px; }

/* ── Tree Sidebar ──────────────────────────────────────────── */
.fm-tree-sidebar {
  width: 180px;
  min-width: 180px;
  border-right: 1px solid rgba(175,179,172,0.12);
  background: rgba(244,244,239,0.6);
  overflow-y: auto;
  padding: 8px 0;
}
.fm-tree-sidebar-title {
  padding: 6px 12px 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(81,96,112,0.4);
}
.fm-tree-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  margin: 1px 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: rgba(81,96,112,0.65);
  transition: background 0.12s, color 0.12s;
  user-select: none;
}
.fm-tree-item:hover { background: rgba(81,96,112,0.07); color: #516070; }
.fm-tree-item.active { background: rgba(81,96,112,0.12); color: #516070; font-weight: 700; }
.fm-tree-toggle { font-size: 14px; color: rgba(81,96,112,0.3); flex-shrink: 0; }
.fm-tree-folder-icon { font-size: 16px; color: rgba(81,96,112,0.5); flex-shrink: 0; }
.fm-tree-label { truncate: true; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-tree-children { margin-left: 0; }

/* ── Main Content Area ─────────────────────────────────────── */
.fm-main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Grid View ─────────────────────────────────────────────── */
.fm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px;
  align-content: start;
}

/* ── List View ─────────────────────────────────────────────── */
.fm-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}
.fm-list .fm-card {
  flex-direction: row;
  height: auto;
  padding: 10px 12px;
  align-items: center;
  border-radius: 10px;
}
.fm-list .fm-card-icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.fm-list .fm-card-meta { flex: 1; gap: 0; }
.fm-list .fm-card-name { font-size: 13px; }
.fm-list .fm-card-preview { display: none; }
.fm-list .fm-card-footer { display: flex; align-items: center; gap: 8px; }
.fm-list .fm-card-menu { opacity: 1; }

/* ── Cards (shared) ────────────────────────────────────────── */
.fm-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid rgba(175,179,172,0.15);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
  position: relative;
  overflow: hidden;
  user-select: none;
  gap: 8px;
}
.fm-card:hover {
  border-color: rgba(81,96,112,0.25);
  box-shadow: 0 4px 16px rgba(81,96,112,0.1);
  transform: translateY(-1px);
}
.fm-card.selected {
  border-color: rgba(81,96,112,0.5);
  box-shadow: 0 0 0 2px rgba(81,96,112,0.15), 0 4px 16px rgba(81,96,112,0.08);
  background: rgba(81,96,112,0.03);
}
.fm-card.pinned { border-color: rgba(255,152,0,0.35); }

.fm-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(81,96,112,0.06);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.fm-card-icon .material-symbols-outlined { font-size: 22px; }
.fm-folder-card .fm-card-icon { background: rgba(255,152,0,0.1); color: #ff9800; }
.fm-folder-card .fm-card-icon .material-symbols-outlined { font-size: 22px; color: #ff9800; }

.fm-pin-badge {
  position: absolute;
  top: -4px; right: -4px;
  font-size: 11px !important;
  background: rgba(255,152,0,0.9);
  color: #fff;
  border-radius: 50%;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}

.fm-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.fm-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #2f342e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.fm-card-preview {
  font-size: 11px;
  color: rgba(81,96,112,0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.fm-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}
.fm-card-info {
  font-size: 10px;
  color: rgba(81,96,112,0.4);
  font-weight: 500;
}
.fm-type-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
}
.fm-type-badge.note { background: rgba(81,96,112,0.1); color: #516070; }
.fm-type-badge.link { background: rgba(21,101,192,0.1); color: #1565c0; }
.fm-type-badge.image { background: rgba(173,20,87,0.1); color: #ad1457; }

.fm-card-menu {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(81,96,112,0.4);
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}
.fm-card:hover .fm-card-menu { opacity: 1; }
.fm-card-menu:hover { background: rgba(81,96,112,0.1); color: #516070; }
.fm-card-menu .material-symbols-outlined { font-size: 14px; }

/* ── Empty State ───────────────────────────────────────────── */
.fm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: rgba(81,96,112,0.4);
  text-align: center;
  grid-column: 1 / -1;
}
.fm-empty .material-symbols-outlined { font-size: 48px; margin-bottom: 12px; color: rgba(81,96,112,0.2); }
.fm-empty p { font-size: 14px; font-weight: 500; }
.fm-empty-hint { font-size: 12px; color: rgba(81,96,112,0.3); margin-top: 4px; }

/* ── Drag & Drop ───────────────────────────────────────────── */
.fm-dragging { opacity: 0.45; transform: scale(0.96); }
.fm-drag-over {
  border-color: rgba(81,96,112,0.6) !important;
  background: rgba(81,96,112,0.06) !important;
  box-shadow: 0 0 0 2px rgba(81,96,112,0.2) !important;
}

/* ── Context Menu ──────────────────────────────────────────── */
#fmContextMenu {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid rgba(175,179,172,0.2);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
  min-width: 190px;
  overflow: visible;
  display: none;
  padding: 6px;
}
#fmContextMenu.open { display: block; animation: fm-ctx-in 0.15s ease; }
@keyframes fm-ctx-in {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.fm-ctx-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  border: none; background: transparent;
  font-size: 12px; font-weight: 500; color: #516070;
  cursor: pointer; border-radius: 8px; text-align: left;
  transition: background 0.1s;
}
.fm-ctx-item:hover { background: rgba(81,96,112,0.07); }
.fm-ctx-item .material-symbols-outlined { font-size: 15px; color: rgba(81,96,112,0.6); }
.fm-ctx-danger { color: #9f403d !important; }
.fm-ctx-danger .material-symbols-outlined { color: #9f403d !important; }
.fm-ctx-danger:hover { background: rgba(159,64,61,0.07) !important; }

.fm-ctx-separator { height: 1px; background: rgba(175,179,172,0.2); margin: 4px 6px; }

/* Submenu */
.fm-ctx-submenu-wrap { position: relative; }
.fm-ctx-has-sub { justify-content: space-between; }
.fm-ctx-arrow { font-size: 14px !important; margin-left: auto; }
.fm-ctx-submenu {
  display: none;
  position: absolute;
  left: calc(100% + 4px);
  top: 0;
  background: #fff;
  border: 1px solid rgba(175,179,172,0.2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 170px;
  padding: 6px;
  z-index: 10000;
}
.fm-ctx-submenu-wrap:hover .fm-ctx-submenu { display: block; }

/* ── Editor Pane ───────────────────────────────────────────── */
#fmEditorPane {
  display: none;
  flex-direction: column;
  border-top: 1px solid rgba(175,179,172,0.15);
  background: #faf9f5;
}
#fmEditorPane.open { display: flex; }

.fm-editor-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(244,244,239,0.8);
  border-bottom: 1px solid rgba(175,179,172,0.15);
}
#fmEditorTitle {
  flex: 1;
  border: none; background: transparent; outline: none;
  font-size: 14px; font-weight: 700; color: #2f342e;
}
#fmEditorTitle::placeholder { color: rgba(81,96,112,0.3); }

.fm-editor-close-btn, .fm-editor-save-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; border: none;
}
.fm-editor-close-btn { background: transparent; color: rgba(81,96,112,0.5); }
.fm-editor-close-btn:hover { background: rgba(81,96,112,0.08); color: #516070; }
.fm-editor-save-btn { background: #516070; color: #f4f8ff; }
.fm-editor-save-btn:hover { background: #455464; }
.fm-editor-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fm-editor-save-btn .material-symbols-outlined, .fm-editor-close-btn .material-symbols-outlined { font-size: 14px; }

#fmEditorContent {
  flex: 1;
  min-height: 280px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 20px 24px;
  font-family: 'Newsreader', serif;
  font-size: 15px;
  line-height: 1.7;
  color: #2f342e;
  outline: none;
}
#fmEditorContent:empty::before { content: 'Start writing…'; color: rgba(81,96,112,0.3); }

/* ── Modals (shared base) ──────────────────────────────────── */
.fm-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.fm-modal-overlay[style*="flex"] { display: flex; }
.fm-modal-box {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  animation: fm-modal-in 0.2s ease;
}
@keyframes fm-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.fm-modal-header {
  padding: 20px 20px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.fm-modal-title {
  font-size: 15px; font-weight: 700; color: #2f342e;
}
.fm-modal-body { padding: 0 20px 8px; }
.fm-modal-footer { padding: 12px 20px 20px; display: flex; gap: 10px; justify-content: flex-end; }

.fm-modal-input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid rgba(175,179,172,0.3);
  border-radius: 12px; font-size: 13px; color: #2f342e;
  background: rgba(81,96,112,0.03); outline: none;
  transition: border-color 0.15s;
}
.fm-modal-input:focus { border-color: rgba(81,96,112,0.45); background: #fff; }

.fm-file-type-group {
  display: flex; gap: 8px; margin-top: 12px;
}
.fm-file-type-label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; border-radius: 10px;
  border: 1.5px solid rgba(175,179,172,0.2);
  cursor: pointer; font-size: 12px; font-weight: 600; color: rgba(81,96,112,0.6);
  transition: all 0.12s;
}
.fm-file-type-label input { display: none; }
.fm-file-type-label:has(input:checked) { border-color: #516070; background: rgba(81,96,112,0.08); color: #516070; }
.fm-file-type-label .material-symbols-outlined { font-size: 16px; }

.fm-btn { padding: 10px 20px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; }
.fm-btn-cancel { background: rgba(81,96,112,0.08); color: #516070; }
.fm-btn-cancel:hover { background: rgba(81,96,112,0.14); }
.fm-btn-primary { background: #516070; color: #f4f8ff; }
.fm-btn-primary:hover { background: #455464; }
.fm-btn-danger { background: #9f403d; color: #fff7f6; }
.fm-btn-danger:hover { background: #7a302e; }

/* Move modal tree */
.fm-move-tree { max-height: 240px; overflow-y: auto; }
.fm-move-option {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px;
  border: none; background: transparent;
  font-size: 12px; font-weight: 500; color: #516070;
  cursor: pointer; border-radius: 8px; text-align: left;
  transition: background 0.1s;
}
.fm-move-option:hover { background: rgba(81,96,112,0.07); }
.fm-move-option .material-symbols-outlined { font-size: 15px; }

/* ── Dark Mode ─────────────────────────────────────────────── */
.dark #sectionFiles { /* Inherit from bg-surface-container-lowest */ }
.dark .fm-layout { background: transparent; }
.dark .fm-toolbar { border-color: rgba(255,255,255,0.06); }
.dark .fm-toolbar-btn { color: rgba(255,255,255,0.5); }
.dark .fm-toolbar-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
.dark .fm-toolbar-btn.primary { background: #516070; color: #f4f8ff; }
.dark .fm-search-wrap .material-symbols-outlined {
  color: #93c5fd !important;
}
.dark .fm-search-input {
  background: #161921 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #f1f5f9 !important;
  border-radius: 999px !important;
  padding-left: 38px !important;
}
.dark .fm-search-input:focus {
  background: #1e2230 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}
.dark .fm-search-input::placeholder {
  color: rgba(198, 214, 233, 0.45) !important;
}
.dark .fm-breadcrumb { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
.dark .fm-crumb { color: rgba(255,255,255,0.4); }
.dark .fm-crumb:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); }
.dark .fm-crumb.active { color: rgba(255,255,255,0.8); }
.dark .fm-tree-sidebar { background: transparent; border-color: rgba(255,255,255,0.06); }
.dark .fm-tree-item { color: rgba(255,255,255,0.4); }
.dark .fm-tree-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
.dark .fm-tree-item.active { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
.dark .fm-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }
.dark .fm-card:hover { border-color: rgba(255,255,255,0.18); box-shadow: 0 4px 16px rgba(0,0,0,0.3); background: rgba(255,255,255,0.05); }
.dark .fm-card.selected { border-color: rgba(81,96,112,0.7); background: rgba(81,96,112,0.15); }
.dark .fm-card-name { color: rgba(255,255,255,0.85); }
.dark .fm-card-preview { color: rgba(255,255,255,0.35); }
.dark .fm-card-info { color: rgba(255,255,255,0.25); }
.dark #fmContextMenu { background: #1e2230; border-color: rgba(255,255,255,0.08); }
.dark .fm-ctx-item { color: rgba(255,255,255,0.7); }
.dark .fm-ctx-item:hover { background: rgba(255,255,255,0.07); }
.dark .fm-ctx-item .material-symbols-outlined { color: rgba(255,255,255,0.4); }
.dark .fm-ctx-submenu { background: #1e2230; border-color: rgba(255,255,255,0.08); }
.dark .fm-ctx-separator { background: rgba(255,255,255,0.08); }
.dark #fmEditorPane { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
.dark .fm-editor-header { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
.dark #fmEditorTitle { color: rgba(255,255,255,0.85); }
.dark #fmEditorContent { color: rgba(255,255,255,0.8); }
.dark .fm-modal-box { background: #1e2230; }
.dark .fm-modal-title { color: rgba(255,255,255,0.85); }
.dark .fm-modal-input { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.dark .fm-modal-input:focus { background: rgba(255,255,255,0.08); }
.dark .fm-file-type-label { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.45); }
.dark .fm-file-type-label:has(input:checked) { border-color: #7a9ab0; background: rgba(81,96,112,0.2); color: rgba(255,255,255,0.85); }
.dark .fm-move-option { color: rgba(255,255,255,0.6); }
.dark .fm-move-option:hover { background: rgba(255,255,255,0.07); }
.dark .fm-btn-cancel { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.dark .fm-sort-dropdown { background: #262a26; border-color: rgba(255,255,255,0.08); }
.dark .fm-sort-dropdown button { color: rgba(255,255,255,0.6); }
.dark .fm-sort-dropdown button:hover { background: rgba(255,255,255,0.07); }
.dark .fm-empty { color: rgba(255,255,255,0.3); }
.dark .fm-empty .material-symbols-outlined { color: rgba(255,255,255,0.12); }

/* ── Sidebar "My Files" link ───────────────────────────────── */
.sidebar-files-link {
  display: flex; align-items: center; gap: 3px;
  width: 100%;
  flex-direction: row;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(81,96,112,0.55);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  border: none; background: transparent;
}
.sidebar-files-link:hover { color: #516070; background: rgba(255,255,255,0.5); }

/* ── Utilities & Responsive ────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media (max-width: 640px) {
  .fm-tree-sidebar { display: none; }
  .fm-toolbar { gap: 6px; padding: 8px 10px; flex-wrap: wrap; }
  .fm-search-wrap { flex: 1; min-width: 110px; }
  .fm-search-input { width: 100% !important; min-width: 100px; font-size: 11px; }
  .fm-toolbar-spacer { display: none; }
  .fm-toolbar-btn { padding: 6px 8px; font-size: 11px; }
  .fm-toolbar-btn span:last-child { display: none; }
  .fm-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 8px; }
}

/* ============================================================
   Save to Folder Modal (.sfm-*)
   ============================================================ */
.sfm-box {
  background: #f4f4ef;
  border-radius: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 64px rgba(47,52,46,0.22), 0 4px 16px rgba(47,52,46,0.1);
  overflow: hidden;
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
}
#saveFolderModal.sfm-open .sfm-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Header */
.sfm-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
  background: rgba(81,96,112,0.06);
  border-bottom: 1px solid rgba(175,179,172,0.25);
}
.sfm-header-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #516070;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sfm-type-icon { font-size: 22px; color: #f4f4ef; }
.sfm-eyebrow {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(81,96,112,0.45);
  margin: 0;
}
.sfm-title {
  font-size: 15px;
  font-weight: 700;
  color: #2e3640;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* Section label */
.sfm-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(81,96,112,0.4);
  padding: 12px 20px 6px;
  margin: 0;
}

/* Folder list */
.sfm-folder-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 10px 4px;
}
.sfm-folder-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(81,96,112,0.65);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s, color 0.14s;
}
.sfm-folder-item:hover { background: rgba(81,96,112,0.08); color: #2e3640; }
.sfm-folder-item.selected {
  background: #516070;
  color: #f4f4ef;
}
.sfm-folder-item.selected .sfm-folder-icon { color: rgba(244,244,239,0.7); }
.sfm-folder-icon { font-size: 17px; color: rgba(81,96,112,0.45); flex-shrink: 0; }

/* New Folder Row */
.sfm-new-folder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 20px 2px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(81,96,112,0.06);
  border: 1.5px dashed rgba(81,96,112,0.22);
}
.sfm-new-folder-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: #2e3640;
  outline: none;
}
.sfm-new-folder-input::placeholder { color: rgba(81,96,112,0.35); }

/* Footer */
.sfm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(175,179,172,0.2);
  margin-top: 8px;
  gap: 10px;
}
.sfm-footer-actions { display: flex; gap: 8px; }
.sfm-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.sfm-btn-add {
  background: rgba(81,96,112,0.1);
  color: #516070;
}
.sfm-btn-add:hover { background: rgba(81,96,112,0.18); }
.sfm-btn-cancel {
  background: rgba(81,96,112,0.07);
  color: rgba(81,96,112,0.6);
}
.sfm-btn-cancel:hover { background: rgba(81,96,112,0.14); color: #516070; }
.sfm-btn-save {
  background: #516070;
  color: #f4f4ef;
  box-shadow: 0 2px 10px rgba(81,96,112,0.3);
}
.sfm-btn-save:hover { background: #3d4d5c; box-shadow: 0 4px 14px rgba(81,96,112,0.4); }
.sfm-btn-save:active { transform: scale(0.97); }

/* Dark mode */
.dark .sfm-box { background: #1e2226; }
.dark .sfm-header { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }
.dark .sfm-title { color: rgba(255,255,255,0.88); }
.dark .sfm-eyebrow { color: rgba(255,255,255,0.25); }
.dark .sfm-section-label { color: rgba(255,255,255,0.25); }
.dark .sfm-folder-item { color: rgba(255,255,255,0.45); }
.dark .sfm-folder-item:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.dark .sfm-folder-item.selected { background: #516070; color: #f4f4ef; }
.dark .sfm-new-folder-row { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.dark .sfm-new-folder-input { color: rgba(255,255,255,0.8); }
.dark .sfm-footer { border-color: rgba(255,255,255,0.07); }
.dark .sfm-btn-add { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); }
.dark .sfm-btn-add:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }
.dark .sfm-btn-cancel { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
.dark .sfm-btn-cancel:hover { color: rgba(255,255,255,0.75); }

/* Sort dropdown positioning fix */
.fm-sort-wrap {
  position: relative;
  display: inline-block;
}

.fm-sort-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: none;
  flex-direction: column;
  z-index: 100;
  min-width: 120px;
  overflow: hidden;
  margin-top: 4px;
}
.fm-sort-dropdown.open { display: flex; }

.fm-sort-dropdown button {
  padding: 10px 16px;
  border: none;
  background: transparent;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #516070;
  width: 100%;
}
.fm-sort-dropdown button:hover {
  background: rgba(81,96,112,0.05);
}

.dark .fm-sort-dropdown { background: #262a26; border: 1px solid rgba(255,255,255,0.08); }
.dark .fm-sort-dropdown button { color: rgba(255,255,255,0.6); }
.dark .fm-sort-dropdown button:hover { background: rgba(255,255,255,0.07); }

/* Fix search input overlapping icon and square edges */
.fm-search-wrap .material-symbols-outlined {
  position: absolute;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  pointer-events: none;
  z-index: 2;
}
.fm-search-input {
  padding: 8px 16px 8px 38px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  outline: none;
  transition: all 0.2s ease;
}
.fm-search-input:focus {
  box-shadow: 0 0 0 3px rgba(81,96,112,0.15) !important;
}

/* ============================================================
   USERS FEATURE — Search, Profile Modal, Inbox, Send-to-user
   ============================================================ */

/* --- Spin animation --- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- User Search Cards (Tactile Editorial) ---- */
.user-search-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  background: var(--md-sys-color-surface, #ffffff);
  border-radius: 20px;
  border: 1px solid rgba(175, 179, 172, 0.14);
  box-shadow: 0 4px 20px rgba(47, 52, 46, 0.04);
  cursor: pointer;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, background 0.22s ease;
}
.user-search-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(47, 52, 46, 0.08);
  border-color: rgba(81, 96, 112, 0.25);
  background: var(--md-sys-color-surface-container-lowest, #ffffff);
}
.usc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease, border-radius 0.2s ease;
}
.user-search-card:hover .usc-avatar {
  transform: scale(1.05) rotate(-2deg);
}
.usc-info {
  flex: 1;
  min-width: 0;
}
.usc-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--md-sys-color-on-surface, #1a1c18);
  letter-spacing: -0.01em;
}
.usc-dev-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}
.usc-self-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
  display: inline-block;
  line-height: 1;
}
.dark .usc-self-badge {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}
.usc-handle {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-sys-color-primary, #516070);
  opacity: 0.85;
  margin-top: 1px;
}
.usc-bio {
  font-size: 12px;
  line-height: 1.45;
  color: var(--md-sys-color-on-surface-variant, #5c605a);
  margin-top: 4px;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.usc-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.usc-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(175, 179, 172, 0.15);
  background: var(--md-sys-color-surface-container-low, #f4f4ef);
  color: var(--md-sys-color-on-surface-variant, #5c605a);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}
.usc-action-btn:hover {
  background: var(--md-sys-color-primary, #516070);
  color: #ffffff;
  border-color: var(--md-sys-color-primary, #516070);
  transform: translateY(-1px);
}
.usc-follow-btn.following {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}
.usc-tag-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(81, 96, 112, 0.06);
  color: var(--md-sys-color-primary, #516070);
  border: 1px solid rgba(81, 96, 112, 0.12);
  cursor: pointer;
  transition: all 0.15s ease;
}
.usc-tag-chip:hover {
  background: var(--md-sys-color-primary, #516070);
  color: #ffffff;
  border-color: var(--md-sys-color-primary, #516070);
  transform: translateY(-1px);
}
.dark .usc-tag-chip {
  background: rgba(198, 214, 233, 0.08);
  color: #c6d6e9;
  border-color: rgba(198, 214, 233, 0.15);
}
.dark .usc-tag-chip:hover {
  background: rgba(198, 214, 233, 0.18);
}

.user-search-loading { text-align: center; padding: 32px; color: rgba(81,96,112,0.4); }
.user-search-loading .material-symbols-outlined { animation: spin 1s linear infinite; font-size: 28px; }

/* ---- Filter Buttons ---- */
.user-filter-btn { transition: all 0.2s; }
.user-filter-btn.active { background: var(--md-sys-color-primary, #516070) !important; color: #fff !important; }

/* ---- User Profile Modal Redesign ---- */
.upm-modal {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(.34,1.56,.64,1), opacity 0.22s;
  overflow: hidden;
  border-radius: 28px;
}
#userProfileModal.upm-open .upm-modal {
  transform: scale(1);
  opacity: 1;
}

.upm-banner {
  height: 95px;
  position: relative;
  overflow: hidden;
}
.upm-banner-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.2) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15) 0%, transparent 40%);
}

.upm-body-content {
  padding: 0 20px 20px 20px;
}

.upm-avatar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -38px;
  margin-bottom: 14px;
}

.upm-avatar-wrap {
  position: relative;
}
.upm-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 28px;
  color: #fff;
  border: 4px solid var(--md-sys-color-surface-container-lowest, #ffffff);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.dark .upm-avatar {
  border-color: #161921;
}

.upm-status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10b981;
  border: 2.5px solid var(--md-sys-color-surface-container-lowest, #ffffff);
  position: absolute;
  bottom: 4px;
  right: 2px;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}
.dark .upm-status-dot {
  border-color: #161921;
}

.upm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 42px;
}

.upm-follow-btn, .upm-edit-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  position: relative;
}
.upm-follow-btn {
  background: var(--md-sys-color-primary, #516070);
  color: #fff;
}
.upm-follow-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(81, 96, 112, 0.3);
}
.upm-follow-btn.following {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  border: 1px solid rgba(39, 174, 96, 0.3);
}
.upm-edit-profile-btn {
  background: rgba(81,96,112,0.1);
  color: #516070;
}
.upm-edit-profile-btn:hover {
  background: rgba(81,96,112,0.18);
}
.upm-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(175,179,172,0.2);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant, #516070);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.upm-share-btn:hover {
  background: rgba(81,96,112,0.1);
}

.upm-user-identity {
  margin-bottom: 12px;
}
.upm-display-name {
  font-weight: 800;
  font-size: 20px;
  color: var(--md-sys-color-on-surface, #1a1c18);
  line-height: 1.2;
}
.upm-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant, #516070);
  margin-top: 2px;
}
.upm-join {
  font-size: 11px;
  color: rgba(81,96,112,0.6);
  margin-top: 4px;
}

.upm-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.upm-role-badge.dev {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
}
.upm-role-badge.pro {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.upm-role-badge.member {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.upm-bio-box {
  background: rgba(81, 96, 112, 0.04);
  border: 1px solid rgba(175, 179, 172, 0.15);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.upm-bio-icon {
  font-size: 16px;
  color: var(--md-sys-color-primary, #516070);
  opacity: 0.5;
  margin-top: 1px;
}
.upm-bio-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--md-sys-color-on-surface, #2f342e);
  font-style: italic;
}

.upm-tags-section {
  margin-bottom: 16px;
}
.upm-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(81, 96, 112, 0.55);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.upm-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.upm-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(81, 96, 112, 0.08);
  color: var(--md-sys-color-primary, #516070);
  border: 1px solid rgba(175, 179, 172, 0.18);
  transition: all 0.18s;
  cursor: pointer;
}
.upm-tag:hover {
  background: rgba(81, 96, 112, 0.16);
  transform: translateY(-1px);
}

.upm-stats {
  display: flex;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(175, 179, 172, 0.18);
  background: rgba(81, 96, 112, 0.03);
  margin-bottom: 16px;
}
.upm-stat {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-right: 1px solid rgba(175, 179, 172, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upm-stat:last-child { border-right: none; }
.upm-stat-icon {
  font-size: 16px;
  color: var(--md-sys-color-primary, #516070);
  opacity: 0.6;
  margin-bottom: 2px;
}
.upm-stat-value {
  font-weight: 800;
  font-size: 18px;
  color: var(--md-sys-color-on-surface, #1a1c18);
}
.upm-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(81, 96, 112, 0.55);
  font-weight: 700;
  margin-top: 1px;
}

.upm-actions { display: flex; gap: 10px; }
.upm-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; border-radius: 999px; border: none;
  font-weight: 700; font-size: 12px; cursor: pointer; transition: all 0.2s;
}
.upm-send-btn { background: var(--md-sys-color-primary, #516070); color: #fff; }
.upm-send-btn:hover { opacity: 0.85; }
.upm-invite-btn { background: rgba(81,96,112,0.1); color: #516070; }
.upm-invite-btn:hover { background: rgba(81,96,112,0.18); }

.upm-loading { text-align: center; padding: 32px; color: rgba(81,96,112,0.4); }
.upm-error { text-align: center; padding: 32px; color: rgba(159,64,61,0.6); font-size: 13px; }

/* ---- Inbox Items ---- */
.inbox-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(175,179,172,0.10);
  background: var(--md-sys-color-surface, #fff);
  cursor: pointer; transition: background 0.18s, box-shadow 0.18s;
  position: relative;
}
.inbox-item:hover { background: var(--md-sys-color-surface-container-low, #f5f5f5); box-shadow: 0 2px 12px rgba(47,52,46,0.06); }
.inbox-item-unread { background: rgba(81,96,112,0.05); border-color: rgba(81,96,112,0.15); }
.inbox-item-unread .inbox-title { font-weight: 800; }

.inbox-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff;
}
.inbox-content { flex: 1; min-width: 0; }
.inbox-header-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.inbox-from { font-weight: 700; font-size: 12px; color: var(--md-sys-color-primary, #516070); }
.inbox-time { font-size: 10px; color: rgba(81,96,112,0.4); margin-left: auto; }
.inbox-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--md-sys-color-primary, #516070); flex-shrink: 0; }
.inbox-title { font-size: 13px; font-weight: 600; color: var(--md-sys-color-on-surface, #1a1c18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-preview { font-size: 11px; color: rgba(81,96,112,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.inbox-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.inbox-view-btn, .inbox-save-btn, .inbox-delete-btn {
  width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: rgba(81,96,112,0.5);
  transition: all 0.15s; font-size: 16px;
}
.inbox-view-btn:hover { background: rgba(81,96,112,0.1); color: #516070; }
.inbox-save-btn:hover { background: rgba(81,96,112,0.1); color: #516070; }
.inbox-delete-btn:hover { background: rgba(159,64,61,0.1); color: #9f403d; }
.inbox-loading { text-align: center; padding: 32px; color: rgba(81,96,112,0.35); }

/* ---- Inbox Note Modal ---- */
.inm-modal { transform: scale(0.95); opacity: 0; transition: transform 0.26s cubic-bezier(.34,1.56,.64,1), opacity 0.22s; }
#inboxNoteModal.inm-open .inm-modal { transform: scale(1); opacity: 1; }

/* ---- Send to User Panel ---- */
.stu-autocomplete {
  position: absolute; left: 0; right: 0;
  top: calc(100% + 4px);
  background: var(--md-sys-color-surface-container-low, #f8f8f8);
  border: 1px solid rgba(175,179,172,0.2);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(47,52,46,0.12);
  z-index: 99;
  overflow: hidden;
}
.stu-autocomplete-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  transition: background 0.15s;
}
.stu-autocomplete-item:hover { background: rgba(81,96,112,0.08); }
.stu-ac-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0;
}
.stu-ac-info { display: flex; flex-direction: column; gap: 1px; }
.stu-ac-name { font-size: 13px; font-weight: 600; color: var(--md-sys-color-on-surface, #1a1c18); }
.stu-ac-handle { font-size: 11px; color: rgba(81,96,112,0.55); }

.send-to-user-toggle.active { background: rgba(81,96,112,0.15) !important; color: var(--md-sys-color-primary, #516070) !important; }

/* ---- Avatar Color Swatches ---- */
.avatar-color-swatch { outline: none; cursor: pointer; }
.avatar-color-swatch.active {
  box-shadow: 0 0 0 3px rgba(81,96,112,0.4), 0 0 0 5px var(--md-sys-color-surface, #fff);
  transform: scale(1.2);
}

/* ---- Dark mode overrides for user feature components ---- */
.dark .user-search-card {
  background: #14171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.dark .user-search-card:hover {
  background: #1b1f2b;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  border-color: rgba(212, 228, 248, 0.2);
}
.dark .usc-name {
  color: #f1f5f9 !important;
}
.dark .usc-handle {
  color: #93c5fd !important;
}
.dark .usc-bio {
  color: #cbd5e1 !important;
  opacity: 0.9;
}
.dark .usc-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.dark .usc-action-btn:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}
.dark .usc-follow-btn.following {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

/* User Filter Buttons */
.dark .user-filter-btn.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
}
.dark .user-filter-btn:not(.active) {
  background: transparent !important;
  color: rgba(198, 214, 233, 0.75) !important;
}
.dark .user-filter-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

/* Search input & wrapper in search panel */
.user-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--md-sys-color-surface-container-lowest, #ffffff);
  border: 1.5px solid rgba(175, 179, 172, 0.2);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(47, 52, 46, 0.04);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.user-search-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 24px rgba(47, 52, 46, 0.06);
}

#userSearchInput {
  width: 100%;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 14px;
  line-height: 1.5;
  padding: 13px 75px 13px 44px;
  color: var(--md-sys-color-on-surface, #1a1c18);
  border-radius: 18px;
}

#userSearchInput:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  ring: 0 !important;
}

.dark .user-search-wrapper {
  background: #14171f;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.dark .user-search-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25), 0 8px 32px rgba(0, 0, 0, 0.5);
  background: #181c26;
}

.dark #userSearchInput {
  color: #f1f5f9 !important;
  background: transparent !important;
  border: none !important;
}

.dark #userSearchInput::placeholder {
  color: rgba(148, 163, 184, 0.5) !important;
}
.dark #panelSearch .material-symbols-outlined {
  color: rgba(198, 214, 233, 0.6);
}
.dark #userSearchPrompt p.text-on-surface {
  color: #f1f5f9 !important;
}
.dark #userSearchPrompt p.text-on-surface-variant\/70 {
  color: #94a3b8 !important;
}

/* User Profile Modal Dark Mode */
.dark .upm-modal {
  background: #161921;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.dark .upm-display-name { color: #f1f5f9 !important; }
.dark .upm-username { color: #94a3b8 !important; }
.dark .upm-join { color: #64748b !important; }
.dark .upm-bio-box {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.dark .upm-bio-icon { color: #93c5fd; }
.dark .upm-bio-text { color: #e2e8f0 !important; }
.dark .upm-section-label { color: #64748b; }
.dark .upm-tag {
  background: rgba(198, 214, 233, 0.08);
  color: #93c5fd;
  border-color: rgba(198, 214, 233, 0.15);
}
.dark .upm-tag:hover {
  background: rgba(198, 214, 233, 0.18);
  color: #ffffff;
}
.dark .upm-stats {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.dark .upm-stat { border-color: rgba(255, 255, 255, 0.08); }
.dark .upm-stat-icon { color: #93c5fd; }
.dark .upm-stat-value { color: #f1f5f9 !important; }
.dark .upm-stat-label { color: #94a3b8 !important; }
.dark .upm-follow-btn { background: #3a4856; color: #ffffff; }
.dark .upm-follow-btn.following { background: rgba(39, 174, 96, 0.2); color: #4ade80; border-color: rgba(39, 174, 96, 0.4); }
.dark .upm-edit-profile-btn { background: rgba(198, 214, 233, 0.1); color: #c6d6e9; }
.dark .upm-edit-profile-btn:hover { background: rgba(198, 214, 233, 0.18); }
.dark .upm-share-btn { border-color: rgba(255, 255, 255, 0.12); color: #94a3b8; }
.dark .upm-share-btn:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.dark .upm-send-btn { background: #3a4856; color: #ffffff; }
.dark .upm-invite-btn { background: rgba(198, 214, 233, 0.1); color: #c6d6e9; }

/* Top Header Left Inbox Button Dark Mode */
.dark #topNavInboxBtn {
  color: #93c5fd !important;
}
.dark #topNavInboxBtn:hover {
  background: rgba(147, 197, 253, 0.12) !important;
}
.dark #topNavInboxBtn .inbox-badge {
  background: #60a5fa !important;
  color: #0f172a !important;
}
.dark #topNavSearchBtn {
  color: #93c5fd !important;
}
.dark #topNavSearchBtn:hover {
  background: rgba(147, 197, 253, 0.12) !important;
}
.dark #topNavSearchBtn.active {
  background: rgba(147, 197, 253, 0.2) !important;
  color: #ffffff !important;
}

/* Guest Nudge Banner — Shimmer animation */
@keyframes gnbShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Guest Nudge Banner — Layered behind work panel */
#guestNudgeBanner {
  z-index: 20 !important;
}

@media (max-width: 767px) {
  #guestNudgeBanner,
  #guestNudgeBanner.gnb-visible {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
}

/* Work Panel Layer — Stays elevated in front so no alert blocks note editor buttons */
.work-panel-container,
.tab-panel,
#panelShare,
#panelAccess,
#panelSearch,
#panelHistory,
#panelAccount,
#panelSettings,
#panelDocs {
  position: relative;
  z-index: 30;
}

/* Guest Nudge Banner — Visible state */
@media (min-width: 768px) {
  #guestNudgeBanner.gnb-visible {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* Guest Nudge Banner — Dark mode inner card */
.dark #guestNudgeBanner > div:last-child {
  background: rgba(18, 21, 30, 0.97) !important;
  border-color: rgba(147, 197, 253, 0.12) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
.dark #guestNudgeTitle {
  color: #c6d6e9 !important;
}
.dark #guestNudgeText {
  color: #94a3b8 !important;
}
.dark #guestNudgeIconWrap {
  background: rgba(147, 197, 253, 0.1) !important;
  color: #93c5fd !important;
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.15) !important;
}
.dark #guestNudgeActionBtn {
  background: linear-gradient(135deg, #3a4856, #4b526c) !important;
  color: #f0f4ff !important;
}
.dark #guestNudgeActionBtn:hover {
  background: linear-gradient(135deg, #4a5a6c, #575e78) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.dark #guestNudgeBadge {
  background: rgba(147, 197, 253, 0.12) !important;
  color: #93c5fd !important;
  border-color: rgba(147, 197, 253, 0.2) !important;
}
.dark #guestNudgeLoginBtn {
  color: #93c5fd !important;
}

/* Guest Alert Modal — Complete Light & Dark Mode Theming */
#guestAlertModal .modal-dialog-card {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid rgba(81, 96, 112, 0.18) !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

#guestAlertModalTitle {
  color: #0f172a !important;
}

#guestAlertModalText {
  color: #475569 !important;
}

#guestAlertModal .guest-modal-badge {
  background: rgba(81, 96, 112, 0.1) !important;
  color: #334155 !important;
  border: 1px solid rgba(81, 96, 112, 0.2) !important;
}

#guestAlertModal .guest-modal-icon-pill {
  background: rgba(81, 96, 112, 0.08) !important;
  color: #516070 !important;
  border: 1px solid rgba(81, 96, 112, 0.2) !important;
}

#guestAlertModal .guest-feature-pill {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}
#guestAlertModal .guest-feature-pill span:last-child {
  color: #1e293b !important;
}
#guestAlertModal .guest-feature-pill .material-symbols-outlined {
  color: #516070 !important;
}

#guestAlertModalClose {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}
#guestAlertModalClose:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

#guestAlertModalSignupBtn {
  background: linear-gradient(135deg, #516070 0%, #3e4a59 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(81, 96, 112, 0.35) !important;
}
#guestAlertModalSignupBtn:hover {
  filter: brightness(1.08);
}

#guestAlertModalLoginBtn {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
#guestAlertModalLoginBtn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

#guestAlertModalSkipBtn {
  color: #64748b !important;
}
#guestAlertModalSkipBtn:hover {
  color: #0f172a !important;
}

/* Dark Mode Overrides */
.dark #guestAlertModal .modal-dialog-card {
  background: #181d28 !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 65px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.dark #guestAlertModalTitle {
  color: #f8fafc !important;
}

.dark #guestAlertModalText {
  color: #94a3b8 !important;
}

.dark #guestAlertModal .guest-modal-badge {
  background: rgba(147, 197, 253, 0.12) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(147, 197, 253, 0.25) !important;
}

.dark #guestAlertModal .guest-modal-icon-pill {
  background: rgba(147, 197, 253, 0.12) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(147, 197, 253, 0.25) !important;
}

.dark #guestAlertModal .guest-feature-pill {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}
.dark #guestAlertModal .guest-feature-pill span:last-child {
  color: #e2e8f0 !important;
}
.dark #guestAlertModal .guest-feature-pill .material-symbols-outlined {
  color: #93c5fd !important;
}

.dark #guestAlertModalClose {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.dark #guestAlertModalClose:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.dark #guestAlertModalSignupBtn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
}

.dark #guestAlertModalLoginBtn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(147, 197, 253, 0.25) !important;
}
.dark #guestAlertModalLoginBtn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #bfdbfe !important;
}

.dark #guestAlertModalSkipBtn {
  color: #94a3b8 !important;
}
.dark #guestAlertModalSkipBtn:hover {
  color: #f1f5f9 !important;
}

/* Access Invalid Code Alert Popup (Top-Right Corner below Header) */
#accessAlertModal {
  top: 5rem !important;
  will-change: transform, opacity;
}

#accessAlertCard {
  box-shadow: 0 16px 40px -10px rgba(225, 29, 72, 0.25), 0 0 0 1px rgba(244, 63, 94, 0.15) !important;
}

.dark #accessAlertCard {
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(244, 63, 94, 0.25) !important;
}


/* Account Card & Stats Dark Mode Overrides */
.dark #statShared,
.dark #statSaved,
.dark #statTotal {
  color: #f1f5f9 !important;
}
.dark #userRoleText,
.dark #userJoinDate,
.dark #userRoleContainer {
  color: #94a3b8 !important;
}
.dark #logoutOtherBtn {
  color: #93c5fd !important;
  background: rgba(147, 197, 253, 0.08) !important;
}
.dark #logoutOtherBtn:hover {
  background: rgba(147, 197, 253, 0.16) !important;
}
.dark #logoutBtn {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}
.dark #logoutBtn:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}

/* Account Tabs Bar */
.account-tab {
  transition: all 0.2s ease;
}
.account-tab.active {
  background: #516070 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(81, 96, 112, 0.25) !important;
  font-weight: 700 !important;
}
.account-tab:not(.active) {
  background: transparent !important;
  color: rgba(81, 96, 112, 0.7) !important;
  box-shadow: none !important;
}
.account-tab:not(.active):hover {
  background: rgba(81, 96, 112, 0.08) !important;
  color: #516070 !important;
}

.dark .account-tab.active {
  background: #3a4856 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
.dark .account-tab:not(.active) {
  color: rgba(198, 214, 233, 0.75) !important;
}
.dark .account-tab:not(.active):hover {
  background: rgba(198, 214, 233, 0.08) !important;
  color: #ffffff !important;
}

/* Dark Mode Inbox Overrides */
.dark .inbox-item {
  background: #161921 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
.dark .inbox-item:hover {
  background: #1e2230 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.dark .inbox-item-unread {
  background: rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}
.dark .inbox-from {
  color: #93c5fd !important;
}
.dark .inbox-title {
  color: #f1f5f9 !important;
}
.dark .inbox-preview {
  color: #cbd5e1 !important;
}
.dark .inbox-time {
  color: #94a3b8 !important;
}
.dark .inbox-unread-dot {
  background: #60a5fa !important;
}
.dark .inbox-view-btn,
.dark .inbox-save-btn,
.dark .inbox-delete-btn {
  color: rgba(198, 214, 233, 0.6) !important;
}
.dark .inbox-view-btn:hover,
.dark .inbox-save-btn:hover {
  background: rgba(198, 214, 233, 0.12) !important;
  color: #ffffff !important;
}
.dark .inbox-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}
.dark #inboxNoteModalSave {
  background: rgba(198, 214, 233, 0.1) !important;
  color: #c6d6e9 !important;
}
.dark #inboxNoteModalSave:hover {
  background: rgba(198, 214, 233, 0.18) !important;
  color: #ffffff !important;
}

/* Send to User Autocomplete */
.dark .stu-autocomplete {
  background: #161921;
  border-color: rgba(255, 255, 255, 0.1);
}
.dark .stu-autocomplete-item:hover {
  background: rgba(198, 214, 233, 0.1);
}
.dark .stu-ac-name {
  color: #f1f5f9 !important;
}
.dark .stu-ac-handle {
  color: #94a3b8 !important;
}
.dark .inm-modal {
  background: #161921;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---- Tab panel visibility fix ---- */
#panelSearch[data-active="false"] { display: none; }
#panelSearch[data-active="true"] { display: block; }

/* ============================================================
   MOBILE RESPONSIVENESS OVERRIDES FOR ACCOUNT & DASHBOARD PAGES
   ============================================================ */

/* Line clamp fallback utilities */
.line-clamp-1 {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Global Smooth Scrolling & Fixed Header Offset */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 5.5rem !important;
}

/* Guarantee zero horizontal page overflow */
html, body {
  scroll-behavior: smooth;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

#contentResult,
#codeDisplay,
#shareForm,
#accessInputSection,
.tab-panel {
  scroll-margin-top: 5.5rem;
}

#accountView, 
.account-section, 
#sectionHistory,
#sectionSaved,
#sectionInbox,
#sectionSettings,
#sectionFiles,
#historySavedGrid,
#historySavedGrid > div,
#historyTimelineList,
#historyTimelineList > div,
#panelAccount {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive fixes for viewports <= 640px */
@media (max-width: 640px) {
  /* Main Section & Outer Cards */
  .account-section {
    padding: 14px 14px !important;
    border-radius: 20px !important;
  }

  /* File Manager Inner Left Alignment */
  #sectionFiles {
    padding: 12px 12px !important;
  }

  .fm-toolbar {
    padding: 10px 12px !important;
    gap: 8px !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
  }

  .fm-breadcrumb {
    padding: 8px 12px !important;
    gap: 6px !important;
  }

  .fm-grid {
    padding: 12px 12px !important;
    gap: 10px !important;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)) !important;
  }

  .fm-search-wrap {
    width: 100% !important;
    flex: 1 1 100% !important;
    margin-top: 4px !important;
  }

  .fm-search-input {
    width: 100% !important;
    padding-left: 36px !important;
  }

  .fm-layout {
    min-height: 380px !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
  }

  /* Account Tab Bar 5-Column Mobile Fit */
  #accountTabBar {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important;
    padding: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .account-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 6px 2px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 0% !important;
  }

  .account-tab .material-symbols-outlined {
    font-size: 18px !important;
  }

  /* History Grid & Saved Notes Cards */
  #historySavedGrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #historySavedGrid > div {
    padding: 14px !important;
    min-height: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #historySavedGrid h4 {
    font-size: 14px !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  #historySavedGrid p {
    font-size: 11px !important;
    margin-bottom: 10px !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Recent History Timeline Left Margin */
  #historyTimelineList {
    padding-left: 22px !important;
  }

  #historyTimelineList > div {
    gap: 8px !important;
  }

  /* Saved Notes Items Fit */
  .saved-note-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
  }

  .saved-note-item-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .saved-note-item-text {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .saved-note-item-snippet {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .saved-note-item-meta {
    display: flex !important;
    align-items: center !important;
    gap: 4px 6px !important;
    font-size: 10px !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .saved-note-item-actions {
    display: flex !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin-left: 4px !important;
  }

  .saved-note-action {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .saved-note-action .material-symbols-outlined {
    font-size: 16px !important;
  }

  /* Category Filter Scroll Container */
  #categoryFilter {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 6px !important;
    margin-bottom: 14px !important;
    padding-left: 2px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  #accountTabBar {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .cat-filter-btn {
    scroll-snap-align: start;
    flex-shrink: 0 !important;
  }

  /* Modals Cap */
  .sfm-box,
  .upm-modal,
  .inm-modal,
  #feedbackModal > div:last-child {
    max-width: calc(100vw - 20px) !important;
    margin: 0 auto !important;
  }
}

/* Extra small devices <= 400px */
@media (max-width: 400px) {
  .account-tab {
    padding: 6px 2px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 0% !important;
  }

  .account-tab .material-symbols-outlined {
    font-size: 16px !important;
  }

  #reverifyPinBtn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Custom Cursor Styles */
body.hide-native-cursor,
body.hide-native-cursor * {
  cursor: none !important; 
}

body.hide-native-cursor input:disabled,
body.hide-native-cursor textarea:disabled,
body.hide-native-cursor button:disabled,
body.hide-native-cursor [disabled] {
  cursor: not-allowed !important;
}

.custom-cursor-dot {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 7px;
  height: 7px;
  background-color: #516070;
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 9999999 !important;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.2s ease;
  will-change: transform;
}

.dark .custom-cursor-dot {
  background-color: #daeafe;
}

.custom-cursor-dot.cursor-hidden {
  opacity: 0 !important;
}

.custom-cursor-outline {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(81, 96, 112, 0.45);
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 9999998 !important;
  opacity: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-radius 0.16s ease,
              background-color 0.16s ease,
              border-color 0.16s ease,
              box-shadow 0.16s ease,
              opacity 0.15s ease;
  will-change: transform;
}

.custom-cursor-outline .custom-cursor-ibeam-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: #0f172a;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
}

.dark .custom-cursor-outline {
  border-color: rgba(218, 234, 254, 0.45);
}

.dark .custom-cursor-outline .custom-cursor-ibeam-svg {
  color: #f8fafc;
  filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.6));
}

/* Hover states for interactive clickable elements */
.custom-cursor-outline.hover {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(81, 96, 112, 0.1);
  border-color: rgba(81, 96, 112, 0.65);
}

.dark .custom-cursor-outline.hover {
  background-color: rgba(218, 234, 254, 0.12);
  border-color: rgba(218, 234, 254, 0.65);
}

/* Beautiful Custom I-Beam Cursor on all text inputs, textareas & editable fields */
.custom-cursor-outline.ibeam {
  width: 12px !important;
  height: 20px !important;
  border-radius: 0 !important;
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.custom-cursor-outline.ibeam .custom-cursor-ibeam-svg {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

  /* =========================================================
     INTERACTIVE BUY ME A COFFEE WIDGET & MODAL
     ========================================================= */
  #sidebarCoffeeBtn,
  .sidebar-coffee-pill {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    position: relative;
    overflow: visible !important;
    z-index: 10;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  #sidebarCoffeeBtn:hover,
  .sidebar-coffee-pill:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #ea580c 55%, #c2410c 100%) !important;
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
    transform: translateY(-1.5px) scale(1.02);
  }

  #sidebarCoffeeBtn:active,
  .sidebar-coffee-pill:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
  }

  .sidebar-coffee-badge {
    background: rgba(0, 0, 0, 0.28);
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
  }

  /* Visible Fluid Rising Vapor / Steam Animation */
  .sidebar-coffee-steam-svg {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 20px;
    pointer-events: none;
    overflow: visible;
    z-index: 50;
  }

  .steam-path-1 {
    stroke-dasharray: 14 26;
    stroke-dashoffset: 26;
    animation: smoothSteamFlow1 2.4s infinite linear;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
  }

  .steam-path-2 {
    stroke-dasharray: 16 28;
    stroke-dashoffset: 28;
    animation: smoothSteamFlow2 2.8s infinite linear 0.7s;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
  }

  @keyframes smoothSteamFlow1 {
    0% {
      stroke-dashoffset: 40;
      opacity: 0;
      transform: translateY(3px) scaleX(0.85);
    }
    15% {
      opacity: 0.95;
    }
    60% {
      opacity: 0.8;
      transform: translateY(-5px) scaleX(1.1);
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 0;
      transform: translateY(-13px) scaleX(1.3);
    }
  }

  @keyframes smoothSteamFlow2 {
    0% {
      stroke-dashoffset: 44;
      opacity: 0;
      transform: translateY(3px) scaleX(0.85);
    }
    18% {
      opacity: 0.9;
    }
    65% {
      opacity: 0.75;
      transform: translateY(-6px) scaleX(1.15);
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 0;
      transform: translateY(-14px) scaleX(1.35);
    }
  }

  @keyframes coffeeSteamRise {
    0% { transform: translateY(0) scaleX(0.9); opacity: 0; }
    25% { opacity: 0.75; }
    60% { transform: translateY(-14px) scaleX(1.2) rotate(6deg); opacity: 0.45; }
    100% { transform: translateY(-26px) scaleX(0.8) rotate(-6deg); opacity: 0; }
  }

  .coffee-steam-particle-1 { animation: coffeeSteamRise 2.2s infinite ease-out; }
  .coffee-steam-particle-2 { animation: coffeeSteamRise 2.2s infinite ease-out 0.65s; }
  .coffee-steam-particle-3 { animation: coffeeSteamRise 2.2s infinite ease-out 1.3s; }

  @keyframes coffeeWiggle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-10deg) scale(1.05); }
    30% { transform: rotate(8deg) scale(1.05); }
    45% { transform: rotate(-6deg); }
    60% { transform: rotate(4deg); }
    75% { transform: rotate(0deg); }
  }

  .coffee-wiggle {
    animation: coffeeWiggle 1.2s ease-in-out;
  }

  .coffee-mug-container {
    perspective: 600px;
  }

  .coffee-liquid-wave {
    transition: height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .coffee-chip {
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 1.5px solid rgba(175, 179, 172, 0.25);
  }

  .coffee-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(217, 119, 6, 0.4);
  }

  .coffee-chip.active {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
    transform: translateY(-2px) scale(1.02);
  }

  .dark .coffee-chip {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
  }

  .dark .coffee-chip.active {
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.4);
  }

  @keyframes floatHeart {
    0% { transform: translate(-50%, 0) scale(0.6); opacity: 1; }
    50% { opacity: 0.9; transform: translate(-50%, -30px) scale(1.15) rotate(12deg); }
    100% { transform: translate(-50%, -60px) scale(0.8) rotate(-15deg); opacity: 0; }
  }

  .floating-heart {
    position: absolute;
    animation: floatHeart 1.4s ease-out forwards;
    pointer-events: none;
    z-index: 50;
  }

  /* Copy button in UPI tab */
  #coffeeCopyUpiBtn {
    background-color: #516070 !important;
    color: #ffffff !important;
  }

  .dark #coffeeCopyUpiBtn {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35) !important;
  }

  #coffeeCopyUpiBtn:hover {
    filter: brightness(1.1);
  }

  #coffeeCopyUpiBtn.copied {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
  }



  /* ========================================
     AI ASSIST PANEL STYLES
     ======================================== */

  /* Panel container */
  .ai-assist-panel {
    background: var(--surface-container-lowest, #ffffff);
    border: 1px solid rgba(175, 179, 172, 0.2);
    border-top: 2px solid #516070;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(81, 96, 112, 0.12);
  }

  @keyframes aiPanelSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .ai-panel-animate-in {
    animation: aiPanelSlideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  /* Panel header */
  .ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(81,96,112,0.08), rgba(81,96,112,0.04));
    border-bottom: 1px solid rgba(175, 179, 172, 0.15);
  }

  .ai-panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #516070;
  }

  .ai-panel-title-icon {
    font-size: 16px;
    background: linear-gradient(135deg, #516070, #8ba4b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Scope badge */
  .ai-scope-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(81,96,112,0.08);
    color: #5c605a;
    font-weight: 600;
    border: 1px solid rgba(175,179,172,0.2);
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-scope-badge.has-selection {
    background: rgba(81,96,112,0.12);
    color: #516070;
    border-color: rgba(81,96,112,0.3);
  }

  /* Action chips */
  .ai-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 12px 14px;
  }

  @media (min-width: 480px) {
    .ai-actions-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .ai-action-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 12px;
    border: 1.5px solid rgba(175, 179, 172, 0.25);
    background: #f4f4ef;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5c605a;
    text-align: center;
    line-height: 1.2;
  }

  .ai-action-chip:hover {
    border-color: rgba(81, 96, 112, 0.4);
    background: #edeee8;
    transform: translateY(-1px);
    color: #516070;
  }

  .ai-action-chip.active {
    background: linear-gradient(135deg, #516070, #455464) !important;
    border-color: #455464 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 12px rgba(81, 96, 112, 0.35);
    transform: translateY(-2px) scale(1.02);
  }

  .ai-action-chip .chip-icon {
    font-size: 18px;
    line-height: 1;
  }

  /* Dark mode chips */
  .dark .ai-action-chip {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
  }
  .dark .ai-action-chip:hover {
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.9);
  }
  .dark .ai-action-chip.active {
    background: linear-gradient(135deg, #6b8090, #516070) !important;
  }

  /* Custom prompt row */
  .ai-custom-prompt-row {
    padding: 0 14px 10px;
  }

  .ai-custom-prompt-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(81, 96, 112, 0.2);
    background: rgba(81, 96, 112, 0.04);
    font-size: 12px;
    color: #2f342e;
    outline: none;
    resize: none;
    font-family: inherit;
    transition: border-color 0.2s;
  }

  .ai-custom-prompt-input:focus {
    border-color: #516070;
    background: rgba(81, 96, 112, 0.07);
  }

  /* Run button row */
  .ai-run-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 12px;
    flex-wrap: wrap;
  }

  .ai-run-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #516070, #455464);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(81, 96, 112, 0.3);
    flex-shrink: 0;
  }

  .ai-run-btn:hover {
    background: linear-gradient(135deg, #455464, #3a4a58);
    box-shadow: 0 4px 14px rgba(81, 96, 112, 0.4);
    transform: translateY(-1px);
  }

  .ai-run-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  /* Spinner inside run button */
  @keyframes aiSpinnerRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .ai-btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: aiSpinnerRotate 0.7s linear infinite;
    flex-shrink: 0;
  }

  /* Scope badge in run row */
  .ai-scope-info {
    flex: 1;
    min-width: 0;
  }

  /* Preview section */
  .ai-preview-section {
    margin: 0 14px 12px;
    border-radius: 12px;
    border: 1.5px solid rgba(81, 96, 112, 0.2);
    overflow: hidden;
  }

  .ai-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(81, 96, 112, 0.06);
    border-bottom: 1px solid rgba(175, 179, 172, 0.2);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #516070;
  }

  .ai-preview-actions {
    display: flex;
    gap: 4px;
  }

  .ai-preview-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
  }

  .ai-preview-action-btn.apply {
    background: #516070;
    border-color: #516070;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(81,96,112,0.25);
  }
  .ai-preview-action-btn.apply:hover {
    background: #455464;
    border-color: #455464;
    transform: translateY(-1px);
  }

  .ai-preview-action-btn.discard {
    background: transparent;
    border-color: rgba(175,179,172,0.4);
    color: #5c605a;
  }
  .ai-preview-action-btn.discard:hover {
    background: #f4f4ef;
    border-color: rgba(81,96,112,0.3);
    color: #516070;
  }

  .ai-preview-action-btn.copy {
    background: transparent;
    border-color: rgba(175,179,172,0.4);
    color: #5c605a;
  }
  .ai-preview-action-btn.copy:hover {
    background: #f4f4ef;
    color: #516070;
  }

  .ai-preview-action-btn.regenerate {
    background: transparent;
    border-color: rgba(175,179,172,0.4);
    color: #5c605a;
  }
  .ai-preview-action-btn.regenerate:hover {
    background: #f4f4ef;
    color: #516070;
  }
  .ai-preview-action-btn.regenerate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .ai-preview-content {
    max-height: 240px;
    overflow-y: auto;
    padding: 14px;
    background: #faf9f5;
    font-size: 13px;
    line-height: 1.65;
    color: #2f342e;
  }

  .ai-preview-content::-webkit-scrollbar {
    width: 4px;
  }
  .ai-preview-content::-webkit-scrollbar-thumb {
    background: rgba(81,96,112,0.2);
    border-radius: 4px;
  }

  /* Dark mode preview */
  .dark .ai-preview-content {
    background: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.85);
  }
  .dark .ai-preview-section {
    border-color: rgba(255,255,255,0.12);
  }
  .dark .ai-preview-header {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
  }

  /* API Key setup section */
  .ai-key-setup {
    padding: 14px;
    background: linear-gradient(135deg, rgba(81,96,112,0.05), transparent);
    border-bottom: 1px solid rgba(175,179,172,0.15);
  }

  .ai-key-title {
    font-size: 11px;
    font-weight: 700;
    color: #516070;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .ai-key-desc {
    font-size: 10px;
    color: #5c605a;
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .ai-key-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }

  .ai-key-input {
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(81, 96, 112, 0.2);
    background: rgba(81, 96, 112, 0.04);
    font-size: 11px;
    color: #2f342e;
    outline: none;
    font-family: 'Courier New', monospace;
    transition: border-color 0.2s;
  }

  .ai-key-input:focus {
    border-color: #516070;
  }

  .ai-key-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 20px;
    background: #516070;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .ai-key-save-btn:hover {
    background: #455464;
  }

  .ai-key-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #516070;
    text-decoration: underline;
    margin-top: 6px;
  }

  /* Change key button */
  .ai-change-key-btn {
    font-size: 9px;
    color: #516070;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    text-decoration: underline;
    opacity: 0.7;
    transition: opacity 0.15s;
  }

  .ai-change-key-btn:hover {
    opacity: 1;
  }

  /* Toolbar AI button glow */
  [data-cmd="aiAssist"].active {
    background: linear-gradient(135deg, rgba(81,96,112,0.15), rgba(81,96,112,0.08)) !important;
    color: #516070 !important;
    border-color: rgba(81,96,112,0.3) !important;
  }

  [data-cmd="aiAssist"] .material-symbols-outlined {
    background: linear-gradient(135deg, #516070, #8ba4b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }