/* Dashboard — blue/graphite theme, greed-style sidebar and login. Loaded last. */
:root {
  --bg: #08090c; --side: #0b0c10; --panel: #0e1015; --panel-2: #12141a; --panel-3: #171a21;
  --line: #1a1d25; --line-2: #242833; --text: #f3f5fa; --muted: #a3abbd; --dim: #697184;
  --chart: #7aa2ff; --teal: #7aa2ff; --accent: #4f7cff;
  --b-bg: linear-gradient(180deg, #1b2030 0%, #141824 100%); --b-line: rgba(122, 162, 255, .16); --b-icon: #9db8ff;
  --b-on: linear-gradient(180deg, #5b84ff 0%, #3f66e6 100%); --b-on-line: rgba(122, 162, 255, .5);
}
html { background: radial-gradient(1000px 600px at 90% -10%, rgba(79,124,255,.13), transparent 60%), #08090c !important; background-attachment: fixed; }
::selection { background: rgba(79,124,255,.45); }
.btn:not(.ghost) { background: var(--b-on) !important; border-color: transparent !important; color: #fff !important; }

/* ---------------- sidebar */
@media (min-width: 981px) { .app { grid-template-columns: 290px 1fr; } }
.side { background: #0b0c10 !important; border-right: 1px solid #15171d !important; padding: 0 12px 12px !important; backdrop-filter: none !important; }
.side .brand { display: none; }
.side-hero { position: relative; margin: 0 -12px 6px; padding: 14px 14px 12px; min-height: 178px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.side-banner { position: absolute; inset: 0; background: #11141b center / cover no-repeat; mask-image: linear-gradient(180deg, #000 10%, rgba(0,0,0,.55) 55%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 10%, rgba(0,0,0,.55) 55%, transparent 100%); opacity: .9; }
.side-banner:not([style*="url"]) { background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) !important; background-size: 14px 14px !important; }
.side-banner.blur { filter: blur(18px) saturate(1.4); transform: scale(1.4); opacity: .6; }
.side-hero-top { position: relative; display: flex; justify-content: space-between; }
.side-hero .sq { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(8,9,12,.7); border: 1px solid rgba(255,255,255,.06); color: #e6e9f2; backdrop-filter: blur(8px); }
.side-hero .switcher { position: relative; background: transparent !important; border: 0 !important; padding: 0 4px !important; margin-top: 40px; }
.side-hero .switcher .gicon { width: 50px !important; height: 50px !important; border-radius: 50% !important; box-shadow: 0 0 0 3px #0b0c10; }
.side-hero .switcher b { font-size: 17px !important; }
.side-hero .switcher small { display: flex !important; align-items: center; gap: 6px; font-size: 12.5px !important; color: #c3c9d6 !important; }
.switcher .dot, .gl-g .dot { width: 8px; height: 8px; border-radius: 50%; background: #3ba55d; display: inline-block; }
.sw-menu-wrap { position: relative; }
.side-search { background: transparent !important; border: 0 !important; padding: 8px 10px !important; margin: 4px 0 8px !important; }
.side-search input { font-size: 15px !important; }
.nav-groups .group h6 { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; color: #7a8294 !important; padding: 12px 10px 6px !important; font-weight: 600 !important; }
.nav-groups .group h6 i { font-size: 10px; transition: transform .25s; }
.nav-groups .group.shut h6 i { transform: rotate(-90deg); }
.nav-groups .group.shut a { display: none !important; }
.group a { color: #b4bbca !important; font-size: 14.5px !important; padding: 10px 12px !important; border-radius: 12px !important; }
.group a i { color: #8a93a6 !important; width: 18px; }
.group a:hover { background: rgba(255,255,255,.03) !important; color: #fff !important; }
.group a.on { color: #fff !important; background: transparent !important; }
.group a.on i { color: #9db8ff !important; }
.nav-indicator { background: #1b1e26 !important; border: 1px solid #242833 !important; border-radius: 12px !important; box-shadow: inset 3px 0 0 #4f7cff !important; }
.side .me { display: none !important; }
.me-pill { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 6px; border-radius: 999px; background: rgba(22, 25, 33, .9); border: 1px solid #232733; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 30px -12px rgba(0,0,0,.8); }
.me-pill .av { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #1a2238; box-shadow: 0 0 0 2px #4f7cff; }
.me-pill .av img { width: 100%; height: 100%; object-fit: cover; }
.me-txt { min-width: 0; flex: 1; }
.me-txt b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-txt small { display: block; color: #8a93a6; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-pill button { flex: none; width: 36px; height: 36px; border-radius: 50%; color: #a3abbd; display: grid; place-items: center; }
.me-pill button:hover { background: rgba(255,255,255,.06); color: #fff; }
.topbar { background: rgba(8,9,12,.75) !important; }
.card, .kpi, .panel { border-color: #191c24 !important; }

/* ---------------- login (greed style) */
.gl-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 56px; max-width: 1180px; margin: 0 auto; padding: 40px 28px; }
.gl-prev { position: relative; border-radius: 30px; padding: 26px 0 0 26px; background: #0d0f14; border: 1px solid #1a1d25; overflow: hidden; }
.gl-segs { display: flex; gap: 10px; }
.gl-segs span { width: 56px; height: 4px; border-radius: 4px; background: #262a34; overflow: hidden; }
.gl-segs span i { display: block; height: 100%; width: 0; background: #e8ecf5; }
.gl-segs span.done i { width: 100%; }
.gl-segs span.now i { animation: seg 3.2s linear forwards; }
@keyframes seg { to { width: 100%; } }
.gl-title { margin: 22px 0 18px; font-size: 22px; color: #c3c9d6; }
.gl-mock { display: grid; grid-template-columns: 210px 1fr; border-top-left-radius: 20px; border: 1px solid #1a1d25; border-right: 0; border-bottom: 0; overflow: hidden; background: #08090c; min-height: 300px; }
.gl-side { border-right: 1px solid #1a1d25; padding-bottom: 12px; }
.gl-ban { position: relative; height: 110px; }
.gl-ban > img { width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(180deg, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); }
.gl-g { position: absolute; left: 10px; bottom: 6px; display: flex; gap: 8px; align-items: center; }
.gl-g img { width: 30px; height: 30px; border-radius: 50%; background: #11141b; }
.gl-g b { font-size: 13px; display: block; } .gl-g small { font-size: 10px; color: #c3c9d6; display: flex; align-items: center; gap: 4px; }
.gl-g .dot { width: 6px; height: 6px; }
.gl-srch { margin: 12px 10px 6px; font-size: 12px; color: #a3abbd; display: flex; gap: 8px; align-items: center; }
.gl-h { display: block; font-size: 11px; color: #697184; padding: 8px 12px 4px; }
.gl-it { margin: 2px 8px; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; color: #a3abbd; display: flex; gap: 8px; align-items: center; transition: background .3s, color .3s; }
.gl-it.on { background: #1b1e26; color: #fff; box-shadow: inset 2px 0 0 #4f7cff; }
.gl-main { padding: 14px 18px; min-width: 0; }
.gl-crumb { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #8a93a6; }
.gl-crumb img { width: 16px; height: 16px; } .gl-crumb b { color: #fff; }
.gl-hi { margin-top: 26px; display: flex; gap: 8px; align-items: center; font-size: 17px; }
.gl-hi i { color: #4f7cff; }
.gl-sub { font-size: 12.5px; color: #8a93a6; margin-top: 4px; }
.gl-kpis { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gl-kpis > div { border-radius: 14px; background: #0e1015; border: 1px solid #1a1d25; padding: 12px; }
.gl-kpis small { font-size: 11px; color: #8a93a6; display: flex; gap: 6px; align-items: center; }
.gl-kpis em { margin-left: auto; font-style: normal; color: #4ade80; background: rgba(74,222,128,.1); padding: 1px 6px; border-radius: 6px; }
.gl-kpis b { font-size: 22px; display: block; margin-top: 6px; }
.spk svg { width: 100%; height: 44px; } .spk path { fill: none; stroke: #9db8ff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.gl-form { max-width: 460px; }
.gl-brand { display: flex; gap: 16px; align-items: center; font-size: 22px; font-weight: 700; }
.gl-brand img { width: 52px; height: 52px; object-fit: contain; }
.gl-form h1 { margin-top: 40px; font-size: clamp(34px, 4.4vw, 46px); letter-spacing: -.03em; line-height: 1.05; }
.gl-lead { margin-top: 14px; color: #c3c9d6; font-size: 18px; }
.gl-card { margin-top: 28px; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 20px; background: #0d0f14; border: 1px solid #1a1d25; }
.gl-card b { font-size: 16px; } .gl-card p { margin-top: 4px; color: #8a93a6; font-size: 14px; }
.gl-tg { flex: none; width: 50px; height: 30px; border-radius: 999px; background: #2a2e38; position: relative; transition: background .25s; }
.gl-tg::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.gl-tg.on { background: #4f7cff; } .gl-tg.on::after { transform: translateX(20px); }
.gl-go { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; height: 58px; border-radius: 16px; background: #fff; color: #08090c !important; font-weight: 800; font-size: 17px; transition: transform .2s; }
.gl-go:hover { transform: translateY(-1px); }
.gl-go.ghost { background: #12141a; color: #fff !important; border: 1px solid #242833; }
.gl-bar { margin-top: 22px; height: 4px; border-radius: 4px; background: #1d2029; overflow: hidden; }
.gl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f7cff, #9db8ff); transition: width 1s linear; }
.gl-note { margin-top: 12px; color: #8a93a6; font-size: 15px; }
.gl-terms { margin-top: 36px; color: #697184; font-size: 13.5px; text-align: center; }
.gl-terms a { color: #a3abbd; text-decoration: underline; text-underline-offset: 3px; }
.gl-back { margin-top: 10px; text-align: center; font-size: 13px; color: #8a93a6; }
.gl-form .err { margin-top: 18px; }
@media (max-width: 900px) {
  .gl-wrap { grid-template-columns: 1fr; gap: 26px; padding: 22px 18px; }
  .gl-prev { max-height: 360px; }
  .gl-mock { grid-template-columns: 150px 1fr; }
}
.me-pill { background: #161921; }
.me-pill::before { content: ""; position: absolute; left: -12px; right: -12px; bottom: 100%; height: 34px; background: linear-gradient(180deg, transparent, #0b0c10); pointer-events: none; }
.me-pill::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 12px; background: #0b0c10; }
.nav-groups { padding-bottom: 20px; }