:root {
  --navy: #081936;
  --blue: #1455d9;
  --blue-2: #0b3fb7;
  --cyan: #35a8ff;
  --ink: #182437;
  --muted: #8090a7;
  --surface: #f4f7fb;
  --line: #e4eaf2;
  --white: #fff;
  --green: #22a06b;
  --red: #d9485f;
  --shadow: 0 14px 34px rgba(15, 41, 95, .08);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 252px; background: var(--navy); color: #b7c4da; padding: 28px 18px; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 20; }
.brand { display: flex; gap: 10px; align-items: center; color: #fff; margin: 0 14px 36px; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #2b7cff, #72c7ff); color: #072250; font-weight: 800; }
.nav-label { padding: 0 14px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: #657b9f; }
.nav-item { border: 0; background: transparent; width: 100%; color: inherit; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; margin: 2px 0; text-align: left; }
.nav-item:hover, .nav-item.active { background: rgba(64, 133, 255, .19); color: #fff; }
.nav-icon { width: 20px; text-align: center; opacity: .9; }
.sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; }
.profile-mini { display: flex; gap: 10px; align-items: center; padding: 0 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #e2efff; color: var(--blue); display: grid; place-items: center; font-weight: 700; }
.profile-mini small { display:block; color: #7f92b5; margin-top: 2px; }
.main { margin-left: 252px; width: calc(100% - 252px); }
.topbar { height: 80px; background: var(--white); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 36px; position: sticky; top: 0; z-index: 10; }
.topbar h1 { margin: 0; font: 700 20px Manrope, sans-serif; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: #4d607a; }
.content { max-width: 1440px; margin: 0 auto; padding: 32px 36px 52px; }
.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 700; }
.page-heading { display:flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.page-heading h2 { margin: 5px 0 0; font: 800 27px Manrope, sans-serif; letter-spacing: -.035em; }
.subtle { color: var(--muted); font-size: 13px; }
.date-pill { background: var(--white); border: 1px solid var(--line); padding: 10px 14px; border-radius: 10px; color: #66758a; font-size: 13px; }
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { font: 800 24px Manrope, sans-serif; margin: 9px 0 9px; }
.stat-foot { font-size: 12px; color: var(--green); }
.stat-foot.neutral { color: #8190a6; }
.dashboard-grid { display:grid; grid-template-columns: 1.45fr .75fr; gap: 18px; margin-bottom: 24px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.panel-header { padding: 20px 22px; border-bottom: 1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.panel-header h3 { margin: 0; font: 700 16px Manrope, sans-serif; }
.panel-body { padding: 22px; }
.chart-wrap { height: 230px; position: relative; }
.chart-grid { position:absolute; inset: 12px 0 20px; display:flex; flex-direction:column; justify-content:space-between; }
.chart-grid span { border-top: 1px dashed #e7edf5; width:100%; }
.chart-svg { position:absolute; inset: 14px 0 20px; width:100%; height:calc(100% - 34px); overflow: visible; }
.chart-labels { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; color:#9aa9bd; font-size:11px; }
.portfolio-score { display:flex; align-items:center; gap: 18px; }
.score-ring { width: 112px; height:112px; border-radius:50%; background: conic-gradient(var(--blue) 0 74%, #e7eef9 74% 100%); display:grid; place-items:center; }
.score-ring::after { content:""; width:82px; height:82px; border-radius:50%; background:var(--white); position:absolute; }
.score-ring strong { position:relative; z-index:1; font: 800 23px Manrope; }
.score-copy strong { display:block; font: 700 16px Manrope; margin-bottom: 6px; }
.asset-section { margin-bottom: 24px; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.section-title h3 { margin:0; font: 700 18px Manrope; }
.link-btn { border:0; background:transparent; color:var(--blue); font-size:13px; font-weight:700; }
.asset-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.asset-card { background:var(--white); border:1px solid var(--line); border-radius:14px; padding: 18px; box-shadow:var(--shadow); }
.asset-top { display:flex; justify-content:space-between; align-items:flex-start; }
.asset-logo { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font:800 13px Manrope; color:#fff; }
.logo-mobic { background:#1455d9; }.logo-mdc { background:#16a085; }.logo-mbt { background:#a86f18; }.logo-mpt { background:#9134bd; }
.asset-symbol { font-size: 11px; color: var(--muted); letter-spacing:.12em; margin-top: 12px; }
.asset-card h4 { margin: 3px 0 11px; font: 700 15px Manrope; }
.price { font:800 20px Manrope; }.unit { color:var(--muted); font-size:11px; }
.asset-meta { border-top:1px solid var(--line); margin-top:14px; padding-top:13px; display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.asset-meta strong { display:block; color:var(--ink); margin-top:4px; font-size:13px; }
.card-actions { display:flex; gap:8px; margin-top:16px; }
.primary-btn, .secondary-btn { border-radius:9px; padding:10px 12px; border:1px solid transparent; font-size:12px; font-weight:700; }
.primary-btn { background:var(--blue); color:#fff; flex:1; }.primary-btn:hover { background:var(--blue-2); }
.secondary-btn { background:#fff; color:var(--blue); border-color:#cad8ec; }
.table-panel .panel-body { padding:0; }
table { width:100%; border-collapse:collapse; }
th, td { padding: 15px 22px; text-align:left; border-bottom:1px solid var(--line); font-size:13px; }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; background:#fbfcfe; }
td strong { font-weight:700; }.status { display:inline-flex; padding:5px 9px; border-radius:99px; font-size:11px; font-weight:700; }.status.completed { background:#e7f7ef; color:var(--green); }.status.pending { background:#fff6df; color:#b17b0d; }.status.active { background:#e8f0ff; color:var(--blue); }
.mobile-menu { display:none; }
.view-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; }.field label { font-size:12px; color:var(--muted); font-weight:700; }.field input, .field select { border:1px solid var(--line); border-radius:9px; padding:11px 12px; color:var(--ink); background:#fff; }
.notice { padding:13px 14px; border-radius:10px; background:#eef5ff; color:#3561a6; font-size:12px; line-height:1.55; }
.modal-backdrop { position:fixed; inset:0; background:rgba(9, 26, 58, .48); display:grid; place-items:center; padding:20px; z-index:40; }
.modal { width:min(560px, 100%); background:#fff; border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.2); overflow:hidden; }
.modal .panel-header { padding:20px 24px; }.modal .panel-body { padding:24px; }
.summary-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }.summary-row strong { font-weight:700; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }
@media (max-width: 1180px) { .stats-grid, .asset-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid, .view-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sidebar { transform:translateX(-100%); transition:.2s ease; }.sidebar.open { transform:translateX(0); }
  .main { margin-left:0; width:100%; }.topbar { padding:0 18px; }.mobile-menu { display:block; margin-right:10px; }.topbar h1 { font-size:17px; }.content { padding:24px 16px 40px; }.page-heading { align-items:flex-start; flex-direction:column; gap:13px; }.stats-grid, .asset-grid { grid-template-columns:1fr; }.form-grid { grid-template-columns:1fr; }.table-panel { overflow:auto; }.table-panel table { min-width:680px; }
}