:root{
  --brand: #0b61d6;
  --muted: #6c757d;
}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f4f7fb;
  padding-bottom: 90px;
}

/* Header */
.app-header{ 
  background:#fff; 
  box-shadow:0 2px 10px rgba(0,0,0,0.05); 
  position:fixed; top:0; left:0; right:0; z-index:1030; 
}
.app-header .brand { 
  display:flex; align-items:center; gap:10px; 
  font-weight:700; font-size:1.2rem; 
  color:var(--brand); 
}

/* Layout */
.app-main{ margin-top:74px; margin-bottom:74px; }
.sidebar { 
  background:#fff; padding:16px; border-radius:12px; 
  box-shadow:0 2px 12px rgba(12,18,36,0.06); 
  position:sticky; top:90px; 
  height:calc(100vh - 120px); 
  width: 250px;;
  overflow:auto; 
}
.sidebar .nav-link { font-size:1rem; font-weight:500; }
.sidebar .nav-link i { font-size:1.3rem; }

/* Cards */
.card-pro { 
  background:#fff; border-radius:14px; 
  box-shadow:0 3px 14px rgba(0,0,0,0.06); 
  padding:16px; margin-bottom:20px; 
}
.small-muted { color:var(--muted); font-size:.9rem; }

/* Loader */
.loader { display: none; justify-content: center; align-items: center; height: 200px; }
.spinner-border { width: 3rem; height: 3rem; color: var(--brand); }

/* Suggestions dropdown */
#suggestionsList {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 2000;
  max-height: 220px; overflow-y: auto;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: none;
}
#suggestionsList li:hover { background: #f1f5ff; }

/* Responsive */
@media (max-width: 756px) {
  .sidebar-left, .sidebar-right { display:none; }
  .app-main{ margin-bottom:92px; }
  #mobile-tools { display:block; }
}
@media (min-width:757px){
  #mobile-tools { display:none; }
}

/* Bottom nav */
.bottom-nav { display:none; }
@media (max-width:756px){
  .bottom-nav { 
    display:flex; position:fixed; bottom:0; left:0; right:0; 
    background:#fff; border-top:1px solid #e9eef7; 
    z-index:1040; padding:.45rem 0; justify-content:space-around; 
  }
  .bottom-nav a { 
    color:#6b7280; text-decoration:none; font-size:15px; 
    display:flex; flex-direction:column; align-items:center; 
  }
  .bottom-nav a i { font-size:24px; margin-bottom:2px; }
  .bottom-nav a.active { color:var(--brand); font-weight:600; }
}

/* Floating buttons */
.floating-buttons {
  display: none;
}
@media (max-width:756px){
  .floating-buttons {
    display: flex; flex-direction: column;
    gap: 14px; position: fixed;
    bottom: 70px; right: 16px; z-index: 1050;
  }
  .floating-buttons button {
    border-radius: 50%; width: 64px; height: 64px;
    font-size: 30px; 
    background: linear-gradient(135deg, var(--brand), #2563eb);
    color: #fff;
    box-shadow: 0 5px 14px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: center;
  }
  .floating-buttons button.btn-success {
    background: linear-gradient(135deg,#16a34a,#22c55e);
  }
}