:root{
  --ink-900:#0B1E3D; --ink-700:#123B7A; --paper:#F6F8FC; --paper-line:#E4EAF2;
  --brass:#17B6A7; --sage:#17B6A7; --oxblood:#D64545; --ink-text:#1A2233; --muted:#8792A6;
  --gradient-brand:linear-gradient(120deg, #0B1E3D 0%, #123B7A 40%, #0F6FA8 70%, #17B6A7 100%);
  --shadow-sm:0 1px 3px rgba(11,30,61,.06), 0 1px 2px rgba(11,30,61,.04);
  --shadow-md:0 4px 16px rgba(11,30,61,.08), 0 2px 6px rgba(11,30,61,.04);
  --shadow-lg:0 16px 40px rgba(11,30,61,.14), 0 4px 12px rgba(11,30,61,.06);
  --shadow-glow:0 8px 24px rgba(23,182,167,.25);
  --radius:16px;
  --radius-sm:10px;
}
*{ -webkit-tap-highlight-color: transparent; }
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(23,182,167,.06), transparent),
    radial-gradient(900px 500px at -10% 10%, rgba(18,59,122,.05), transparent),
    var(--paper);
  color:var(--ink-text);
  font-family:'Inter', sans-serif;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
body.lang-ar, body.lang-ur{ font-family:'Noto Sans Arabic', 'Inter', sans-serif; }

h1, h2, h3, .h3, .h6{ letter-spacing:-.02em; font-weight:700; }
.text-muted{ color:var(--muted) !important; }

/* --- Navbar: glass / elevated --- */
.sfn-navbar{
  background:var(--gradient-brand) !important;
  padding-block:.85rem;
  box-shadow:0 4px 24px rgba(11,30,61,.22);
  position:sticky; top:0; z-index:1030;
  backdrop-filter:saturate(160%) blur(8px);
}
.sfn-brand{ color:#fff !important; font-weight:800; font-size:1.05rem; }
.sfn-brand span{ letter-spacing:-.02em; }
.sfn-navbar .nav-link{ color:rgba(255,255,255,.88) !important; font-size:.9rem; font-weight:500; transition:color .15s ease; }
.sfn-navbar .nav-link:hover{ color:#fff !important; }
.sfn-navbar .dropdown-toggle::after{ opacity:.65; }
.sfn-main{ max-width:1120px; }

/* --- Cards: soft elevation, no harsh borders --- */
.card, .sfn-card{
  background:#fff;
  border:1px solid rgba(220,230,239,.6);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, transform .25s ease;
}
.card:hover, .stat-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.sfn-card-ink{ background:var(--gradient-brand); color:var(--paper); border:none; border-radius:var(--radius); box-shadow:var(--shadow-lg); }

/* --- Buttons: premium CTA feel --- */
.btn{ border-radius:var(--radius-sm); font-weight:600; letter-spacing:-.01em; padding:.55rem 1.2rem; transition:all .18s ease; }
.btn-brass{
  background:linear-gradient(135deg, #17B6A7, #0F9E93);
  border:none; color:#fff;
  box-shadow:var(--shadow-glow);
}
.btn-brass:hover{
  background:linear-gradient(135deg, #14A395, #0C8A80);
  color:#fff; transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(23,182,167,.32);
}
.btn-brass:active{ transform:translateY(0) scale(.98); box-shadow:var(--shadow-sm); }
.btn-outline-brass{ border:1.5px solid var(--brass); color:var(--brass); background:transparent; }
.btn-outline-brass:hover{ background:var(--brass); color:#fff; border-color:var(--brass); }

/* --- Stat cards: refined with accent bar --- */
.stat-card{
  border-radius:var(--radius); padding:1.3rem 1.4rem;
  background:#fff; border:1px solid rgba(220,230,239,.6);
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.stat-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gradient-brand); opacity:.85;
}
.stat-card .stat-label{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.stat-card .stat-value{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin-top:.3rem; font-family:'Inter',sans-serif; }
.stat-card.positive .stat-value{ color:#0F9E93; }
.stat-card.negative .stat-value{ color:var(--oxblood); }

.category-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-inline-end:6px; }

/* --- Progress bars --- */
.budget-bar{ height:9px; border-radius:99px; background:var(--paper-line); overflow:hidden; }
.budget-bar > div{ height:100%; background:linear-gradient(90deg, #17B6A7, #0F9E93); border-radius:99px; transition:width .4s ease; }
.budget-bar.over > div{ background:linear-gradient(90deg, #E5533D, #D64545); }
.budget-bar.warn > div{ background:linear-gradient(90deg, #F2A93B, #E8963C); }

/* --- AI summary / highlight box --- */
.ai-summary-box{
  background:var(--gradient-brand); color:#fff; border-radius:var(--radius);
  padding:1.4rem 1.6rem; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.ai-summary-box::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(400px 200px at 90% -20%, rgba(255,255,255,.12), transparent);
}
.ai-summary-box .badge-ai{ background:rgba(255,255,255,.95); color:var(--ink-900); font-weight:700; }

/* --- Chat --- */
.chat-bubble{ max-width:80%; padding:.7rem 1.05rem; border-radius:16px; margin-bottom:.6rem; font-size:.92rem; }
.chat-bubble.user{ background:linear-gradient(135deg, #17B6A7, #0F9E93); color:#fff; margin-inline-start:auto; box-shadow:var(--shadow-sm); }
.chat-bubble.assistant{ background:#fff; border:1px solid var(--paper-line); box-shadow:var(--shadow-sm); }
.chat-window{ height:420px; overflow-y:auto; padding:1.1rem; background:var(--paper); border:1px solid var(--paper-line); border-radius:var(--radius); }

/* --- Tables --- */
.table-sfn{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.table-sfn thead{ background:var(--gradient-brand); color:#fff; }
.table-sfn thead th{ font-weight:600; font-size:.82rem; letter-spacing:.02em; padding:.75rem 1rem; border:none; }
.table-sfn tbody td{ padding:.7rem 1rem; vertical-align:middle; }
.table-sfn tbody tr{ transition:background-color .15s ease; }
.table-sfn tbody tr:hover{ background-color:rgba(23,182,167,.04); }

/* --- Auth screens --- */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--gradient-brand); padding:2rem; position:relative; overflow:hidden; }
.auth-shell::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(600px 400px at 20% 20%, rgba(255,255,255,.06), transparent),
             radial-gradient(500px 400px at 80% 80%, rgba(255,255,255,.05), transparent);
}
.auth-card{ background:#fff; border-radius:20px; padding:2.6rem; max-width:420px; width:100%; box-shadow:0 30px 60px rgba(0,0,0,.35); position:relative; z-index:1; }
.auth-card h1{ font-size:1.5rem; font-weight:800; }

.sfn-footer{ color:var(--muted); font-size:.85rem; }

/* --- Form controls: refined --- */
.form-control, .form-select{
  border-radius:var(--radius-sm); border:1.5px solid var(--paper-line);
  padding:.6rem .85rem; font-size:.92rem; transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus{
  border-color:var(--brass); box-shadow:0 0 0 3px rgba(23,182,167,.12);
}
.form-label{ font-weight:600; font-size:.85rem; color:var(--ink-text); margin-bottom:.35rem; }

/* --- Badges --- */
.badge{ font-weight:600; letter-spacing:.01em; border-radius:8px; padding:.4em .7em; }

.spinner-ai{ width:1rem; height:1rem; border:2px solid var(--brass); border-inline-end-color:transparent; border-radius:50%; display:inline-block; animation:sfn-spin .7s linear infinite; }
@keyframes sfn-spin{ to{ transform:rotate(360deg); } }

/* --- Navbar dropdown styling --- */
.sfn-navbar .dropdown-menu{
  border-radius:14px; border:1px solid var(--paper-line);
  box-shadow:var(--shadow-lg); padding:.5rem;
  margin-top:.5rem;
}
.sfn-navbar .dropdown-item{
  border-radius:9px; padding:.6rem .85rem; font-size:.9rem; font-weight:500;
  color:var(--ink-text); transition:background-color .12s ease;
}
.sfn-navbar .dropdown-item:hover, .sfn-navbar .dropdown-item:focus{
  background-color:rgba(23,182,167,.1); color:var(--ink-900);
}
.sfn-navbar .dropdown-item.text-danger:hover{ background-color:rgba(214,69,69,.08); }
.sfn-navbar .nav-link.dropdown-toggle::after{ opacity:.7; vertical-align:.1em; }
@media (min-width:992px){
  .sfn-navbar .nav-link{ padding-inline:.9rem; }
}

/* --- Scrollbar polish (desktop) --- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(23,182,167,.35); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(23,182,167,.55); }