/* ─── app-ui.css ────────────────────────────────────────────────────────────
   TrackerFx "app-look" design system: faithful HTML/CSS recreation of the
   real app (sidebar, view shell, KPIs, calendars, tables, charts, etc.).

   Use it to drop app-UI blocks into marketing pages (features pages, SEO
   landings, blog posts) without screenshots. Pairs with site.css — load
   site.css FIRST so the :root tokens are available here.

   Tier 1 — interactive (homepage demo): sidebar + view switching JS,
   needs app-demo.js.
   Tier 2 — static: a single block (e.g. .jtable, .kpis, .dk-cal) embedded
   in any page; no JS required.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── App demo window ─── */
.demo-wrap { position: relative; z-index: 1; max-width: 1180px; margin: 30px auto 0; padding: 0 20px; }
.demo-hint { text-align: center; font-size: 13px; color: var(--muted-2); margin: 14px 0 0; }
.demo-hint b { color: var(--accent-2); font-weight: 600; }

/* Inner frame that keeps the desktop layout but scales down to fit.
   The .app-window stays at its desktop 1140x600 dimensions on every
   viewport — only its CSS transform shrinks it to fit the viewport.
   Mobile users see the desktop layout scaled down, not a reflowed
   mobile layout. */
.app-frame {
    width: 100%;
    aspect-ratio: 1140 / 600;
    overflow: hidden;
}

.app-window {
    display: flex;
    width: 1140px;
    height: 600px;
    border-radius: 16px;
    overflow: hidden;
    background: #0d0d12;
    border: 1px solid rgba(255, 255, 255, .08);
    transform-origin: top left;
    /* demo-wrap has 0 20px padding (40px total horizontal). At >=1180px
       viewport the wrap caps at 1180-40=1140, so scale = 1. Narrower,
       scale = (vw - 40) / 1140px to fit exactly. Note the divisor
       has px units so length/length yields a unitless number. */
    transform: scale(min(1, calc((100vw - 40px) / 1140px)));
}

/* ─── Static app block (sidebar-free, JS-free wrapper for app-blocks/*) ─── */
.app-block {
    background: linear-gradient(206deg, #262626 50%, #333 93%, #3d3d3d 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 22px 26px 26px;
    display: flex; flex-direction: column;
    overflow: hidden;
    color: var(--text); font-family: var(--font);
}

/* Sidebar — faithful replica of the real app menu (snav, dark mode) */
.snav {
    width: 232px; flex-shrink: 0;
    background: linear-gradient(116deg, #262626 50%, #333 93%, #3d3d3d 100%);
    border-right: 1px solid rgba(255, 255, 255, .05);
    display: flex; flex-direction: column;
}
.snav-logo { display: flex; align-items: center; padding: 18px 18px 14px; min-height: 58px; }
.snav-logo--full { height: 25px; width: auto; max-width: 150px; object-fit: contain; }
.snav-logo--icon { display: none; width: 26px; height: 26px; }
.snav-sync-cta {
    margin: 0 12px 12px; padding: 0 12px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, #7c5af0 0%, #5b4cf5 60%, #4338ca 100%);
    box-shadow: 0 2px 10px rgba(91, 76, 245, .35);
    display: flex; align-items: center; gap: 9px; cursor: pointer; transition: filter .15s, box-shadow .15s;
}
.snav-sync-cta:hover { filter: brightness(1.06); box-shadow: 0 4px 16px rgba(91, 76, 245, .5); }
.snav-sync-cta svg { width: 15px; height: 15px; flex-shrink: 0; }
.snav-sync-label { font-size: 13px; font-weight: 500; color: #fff; }
.snav-nav { flex: 1; padding: 6px 10px; overflow: hidden; }
.snav-item {
    display: flex; align-items: center; height: 36px; padding: 0 10px; border-radius: 8px;
    cursor: pointer; color: #8a8a8a; margin-bottom: 3px; transition: background .15s, color .15s;
}
.snav-item:hover { background: rgba(255, 255, 255, .08); color: #ddd; }
.snav-item--active { background: rgba(255, 255, 255, .12); color: #fff; }
.snav-icon { width: 16px; height: 16px; flex-shrink: 0; margin-right: 11px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.snav-label { font-size: 13.5px; font-weight: 400; white-space: nowrap; }
.snav-item--active .snav-label { font-weight: 500; }
.snav-footer { padding: 8px 10px 12px; border-top: 1px solid rgba(255, 255, 255, .05); }
.snav-account-row { display: flex; align-items: center; height: 44px; padding: 0 10px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.snav-account-row:hover { background: rgba(255, 255, 255, .07); }
.snav-avatar { width: 26px; height: 26px; border-radius: 50%; background: #424242; display: flex; align-items: center; justify-content: center; color: #ced4da; font-size: 11px; flex-shrink: 0; margin-right: 10px; }
.snav-account-name { font-size: 13px; color: #ccc; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav-account-chevron { color: #888; display: flex; }

/* main body */
.app-body { flex: 1; min-width: 0; position: relative; }
.view { display: none; padding: 18px 22px 22px; }
.view.active { display: block; min-height: 100%; animation: viewIn .26s ease both; }
.view[data-panel="journal"].active { display: flex; flex-direction: column; }
.view[data-panel="analytics"].active { display: flex; flex-direction: column; }
.view[data-panel="performance"].active { display: flex; flex-direction: column; }
.view[data-panel="economic"].active { display: flex; flex-direction: column; }
.view[data-panel="charts"].active { display: flex; flex-direction: column; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.view-title { display: flex; align-items: center; gap: 12px; }
.view-title h2 { font-size: 24px; font-weight: 700; color: var(--head); letter-spacing: -.5px; }
.pro-pill { background: linear-gradient(135deg, #7c75ff, #a89fff); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 10px; border-radius: 7px; }
.head-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tool {
    display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-soft); border-radius: 9px; padding: 7px 12px; font-size: 12.5px; color: var(--muted); cursor: default;
}
.tool svg { width: 14px; height: 14px; opacity: .7; }
.tool.range { color: var(--text); font-variant-numeric: tabular-nums; }
.hello { color: var(--head); font-size: 15px; font-weight: 600; margin: 14px 0 2px; }
.records { color: var(--muted); font-size: 13px; margin-bottom: 18px; }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.kpi { background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); border: 1px solid #4f4f4f; border-radius: 10px; padding: 14px 16px; }
.kpi .lbl { font-size: 12.5px; color: #a1a1a6; margin-bottom: 9px; }
.kpi .val { font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.kpi .val.pos { color: #208757; }
.kpi .val.neg { color: #ff2727; }

/* dashboard 2-col */
.dash-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
.card-block { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px; }
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-nav { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, .03); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cal-month { font-weight: 600; color: var(--head); font-size: 15px; }
.cal-summary { margin-left: auto; display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.cal-summary b { color: var(--green-2); font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 10.5px; color: var(--muted-2); font-weight: 600; letter-spacing: .04em; padding-bottom: 4px; }
.cal-cell { aspect-ratio: 1.35; border-radius: 8px; background: rgba(255, 255, 255, .025); border: 1px solid var(--border-soft); display: flex; align-items: flex-start; justify-content: flex-start; padding: 6px 8px; font-size: 12px; color: var(--muted); }
.cal-cell.win { background: rgba(16, 185, 129, .22); border-color: rgba(16, 185, 129, .35); color: #b7f0da; }
.cal-cell.loss { background: rgba(239, 68, 68, .20); border-color: rgba(239, 68, 68, .32); color: #f6c9c9; }
.cal-cell.muted { opacity: .4; }

/* trades table */
.block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.tabs { display: inline-flex; background: rgba(255, 255, 255, .03); border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px; }
.tab { font-size: 13px; color: var(--muted); padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.tab.active { background: rgba(108, 99, 255, .18); color: var(--accent-2); font-weight: 600; }
.trade-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 11px 6px; border-bottom: 1px solid var(--border-soft); }
.trade-row:last-child { border-bottom: none; }
.t-sym { font-weight: 600; color: var(--head); font-size: 14px; }
.t-date { color: var(--muted); font-size: 12.5px; }
.t-side { font-size: 12px; font-weight: 600; }
.t-side.buy { color: #208757; }
.t-side.sell { color: #ff2727; }
.pnl { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 8px; font-variant-numeric: tabular-nums; text-align: right; }
.pnl.pos { background: rgba(16, 185, 129, .16); color: var(--green-2); }
.pnl.neg { background: rgba(239, 68, 68, .16); color: #fb7185; }
.col-head { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; padding: 0 6px 8px; font-size: 11px; color: var(--muted-2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.pb-list { margin-top: 14px; }
.pb-list .pb-lbl { font-size: 12px; color: var(--muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.pb { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; color: var(--text); }
.pb-dot { width: 9px; height: 9px; border-radius: 50%; }

/* journal table */
.jtable-wrap { overflow-x: auto; border: 1px solid #4f4f4f; border-radius: 12px; background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); flex: 1; min-height: 0; }
table.jtable { width: 100%; border-collapse: collapse; min-width: 760px; height: 100%; }
.jtable th { text-align: left; font-size: 11px; color: #a1a1a6; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; }
.jtable td { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 13px; color: #e5e7eb; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jtable tr:last-child td { border-bottom: none; }
.jtable tr:hover td { background: rgba(255, 255, 255, .03); }
.badge-res { font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 7px; }
.badge-res.won { background: #208757; color: #fff; }
.badge-res.lost { background: #ff2727; color: #fff; }
.tag-pb { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 7px; }
.tag-pb.blue { background: rgba(59, 130, 246, .9); color: #fff; }
.tag-pb.cyan { background: rgba(34, 211, 238, .85); color: #06222b; }
.jtable td.num-pos { color: #208757; font-weight: 600; }
.jtable td.num-neg { color: #ff2727; font-weight: 600; }

/* analytics */
.an-sub { font-size: 17px; font-weight: 600; color: var(--head); margin: 16px 0 14px; }
.an-grid { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: stretch; flex: 1; min-height: 0; }
.bal-col { display: flex; flex-direction: column; gap: 12px; }
.bal-card { background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); border: 1px solid #4f4f4f; border-radius: 10px; padding: 14px 16px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bal-card .v { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
.bal-card .l { font-size: 12.5px; color: #a1a1a6; margin-top: 4px; }
.chart-card { background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); border: 1px solid #4f4f4f; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; }
.chart-card .ttl { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.chart-card svg { width: 100%; flex: 1; min-height: 0; }

/* Analytics — Performance by Symbol + Win/Loss donut */
.an-grid2 { grid-template-columns: 1fr 300px; }
.an-symcard { padding: 16px 18px; display: flex; flex-direction: column; }
.an-symlist { display: flex; flex-direction: column; flex: 1; justify-content: space-around; gap: 8px; }
.an-sym-row { display: grid; grid-template-columns: 66px 1fr 74px; align-items: center; gap: 12px; }
.an-sym-name { font-size: 13px; font-weight: 600; color: #e5e7eb; }
.an-sym-track { height: 9px; border-radius: 6px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.an-sym-fill { height: 100%; border-radius: 6px; }
.an-sym-fill.pos { background: linear-gradient(90deg, #1b6b46, #208757); }
.an-sym-fill.neg { background: linear-gradient(90deg, #b91c1c, #ff2727); }
.an-sym-val { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.an-sym-val.pos { color: #208757; }
.an-sym-val.neg { color: #ff2727; }
.an-donutcard { padding: 16px 18px; display: flex; flex-direction: column; }
.an-donut-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.an-donut-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.an-donut { width: 156px; height: 156px; border-radius: 50%; background: conic-gradient(#208757 0 71.43%, #ff2727 71.43% 100%); position: relative; }
.an-donut::after { content: ''; position: absolute; inset: 26px; border-radius: 50%; background: #232325; }
.an-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.an-donut-pct { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.an-donut-lbl { font-size: 10.5px; color: #a1a1a6; text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }
.an-legend { display: flex; gap: 20px; }
.an-leg-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #a1a1a6; }
.an-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ─── Performance view (overview) ─── */
.pf-records { font-size: 13px; color: #a1a1a6; margin: 6px 0 14px; }
.pf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.pf-trades-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-wl { display: flex; flex-direction: column; gap: 4px; }
.pf-wl-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #a1a1a6; white-space: nowrap; }
.pf-wl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pf-grid { display: grid; grid-template-columns: 290px 1fr; gap: 14px; flex: 1; min-height: 0; }
.pf-metrics { padding: 16px 18px; display: flex; flex-direction: column; }
.pf-mtitle { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 12px; }
.pf-mlist { display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.pf-metric .mv { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.1; }
.pf-metric .mv.pos { color: #208757; }
.pf-metric .mv.neg { color: #ff2727; }
.pf-metric .ml { font-size: 12.5px; color: #a1a1a6; margin-top: 2px; }
.pf-body { display: flex; gap: 16px; flex: 1; min-height: 0; }
.pf-railv { width: 170px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-railv-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: #8a8a8a; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; }
.pf-railv-item:not(.active):hover { background: rgba(255, 255, 255, .06); color: #ddd; }
.pf-railv-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pf-railv-item.active { background: rgba(255, 255, 255, .12); color: #fff; }
.pf-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-content-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pf-content-head h3 { font-size: 17px; font-weight: 700; color: #fff; }
.pf-dw-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pf-chartbox { padding: 14px 16px; }
.pf-chartbox .ttl { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.pf-chartbox svg { width: 100%; height: 128px; display: block; }
.pf-chart-labels { display: flex; margin-top: 6px; }
.pf-chart-labels span { flex: 1; text-align: center; font-size: 11px; color: #a1a1a6; }
.pf-dwtable { padding: 0; overflow: hidden; flex: 1; min-height: 0; }
.pf-dwtable table { width: 100%; border-collapse: collapse; }
.pf-dwtable th { text-align: left; font-size: 11px; color: #a1a1a6; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pf-dwtable td { padding: 9px 16px; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 13px; color: #e5e7eb; white-space: nowrap; }
.pf-dwtable tr:last-child td { border-bottom: none; }
.pf-dwtable .num.pos { color: #208757; font-weight: 600; }
.pf-dwtable .num.neg { color: #ff2727; font-weight: 600; }

/* ─── Notes view ─── */
.nm-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.nm-card { border-radius: 14px; border: 1px solid #4f4f4f; background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); overflow: hidden; display: flex; flex-direction: column; min-height: 172px; transition: transform .2s, border-color .2s; cursor: pointer; }
.nm-card:hover { transform: translateY(-3px); border-color: #6a6a6a; }
.nm-card-stripe { height: 3px; width: 100%; flex-shrink: 0; }
.nm-card-body { padding: 15px 16px 13px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.nm-card-folder { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 3px 10px; border-radius: 20px; background: rgba(255, 255, 255, .06); align-self: flex-start; }
.nm-card-folder::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.nm-card-title { font-size: 14.5px; font-weight: 500; color: #f3f4f6; line-height: 1.35; }
.nm-card-preview { font-size: 12.5px; font-weight: 300; color: #9ca3af; line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nm-card-date { font-size: 11px; color: #6b7280; margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .06); display: flex; align-items: center; gap: 5px; }
.nm-newbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 9px; cursor: pointer; box-shadow: 0 4px 16px var(--accent-g); }

/* ─── Playbook view ─── */
.pb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.pb-card { background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); border: 1px solid #4f4f4f; border-radius: 14px; padding: 18px; }
.pb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pb-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .06); display: flex; align-items: center; justify-content: center; color: #cbd0d8; flex-shrink: 0; }
.pb-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pb-name { font-size: 15px; font-weight: 600; color: #fff; flex: 1; }
.pb-actions { display: flex; gap: 11px; color: #6b7280; }
.pb-actions svg { width: 15px; height: 15px; cursor: pointer; }
.pb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.pb-stat { text-align: center; }
.pb-stat .sv { font-size: 19px; font-weight: 700; color: #fff; line-height: 1.1; }
.pb-stat .sv.pos { color: #208757; }
.pb-stat .sv.neg { color: #ff2727; }
.pb-stat .sl { font-size: 12.5px; color: #a1a1a6; margin-top: 3px; }
.pb-addbtn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .05); border: 1px solid #4f4f4f; color: #e5e7eb; font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 9px; cursor: pointer; }

/* ─── Economic Calendar view ─── */
.ec-wrap { border: 1px solid #4f4f4f; border-radius: 12px; background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); overflow: hidden; flex: 1; min-height: 0; }
.ec-table { width: 100%; border-collapse: collapse; }
.ec-table th { text-align: left; font-size: 11px; color: #a1a1a6; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 11px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ec-table td { padding: 9px 16px; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 13px; color: #e5e7eb; white-space: nowrap; }
.ec-daterow td { background: rgba(255, 255, 255, .035); font-weight: 700; color: #fff; font-size: 12px; }
.ec-cur { display: inline-flex; align-items: center; gap: 7px; }
.ec-cur-code { color: #cbd0d8; font-weight: 600; }
.ec-impact { display: inline-flex; align-items: center; gap: 6px; color: #f87171; font-size: 12.5px; }
.ec-impact-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }
.ec-num.pos { color: #208757; font-weight: 600; }
.ec-num.neg { color: #ff2727; font-weight: 600; }

/* ─── Live Charts view ─── */
.lc-panel { flex: 1; min-height: 0; position: relative; background: #0e0f14; border: 1px solid #4f4f4f; border-radius: 12px; overflow: hidden; }
.lc-panel #tv-widget { position: absolute; inset: 0; height: 100%; width: 100%; }
.lc-panel #tv-widget .tradingview-widget-container__widget,
.lc-panel #tv-widget iframe { height: 100% !important; width: 100% !important; }
.lc-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.lc-tf { font-size: 12px; color: #a1a1a6; padding: 4px 9px; border-radius: 6px; cursor: pointer; }
.lc-tf.active { background: rgba(255, 255, 255, .1); color: #fff; }
.lc-tdiv { width: 1px; height: 16px; background: rgba(255, 255, 255, .1); margin: 0 4px; }
.lc-indicators { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #a1a1a6; cursor: pointer; }
.lc-indicators svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lc-symline { display: flex; align-items: center; gap: 16px; padding: 8px 14px; font-size: 12px; flex-wrap: wrap; }
.lc-sym { color: #fff; font-weight: 600; }
.lc-ohlc { display: flex; gap: 12px; color: #787b86; }
.lc-ohlc b { color: #26a69a; font-weight: 600; }
.lc-ohlc b.dn, .lc-ohlc .dn { color: #ef5350; }
.lc-chart { flex: 1; min-height: 0; position: relative; }
.lc-chart svg { display: block; }

/* ─── Dashboard view — faithful 1:1 replica of the real app ─── */
.view[data-panel="dashboard"], .view[data-panel="calendar"], .view[data-panel="journal"], .view[data-panel="analytics"], .view[data-panel="performance"], .view[data-panel="notes"], .view[data-panel="playbook"], .view[data-panel="economic"], .view[data-panel="charts"] { background: linear-gradient(206deg, #262626 50%, #333 93%, #3d3d3d 100%); }
.dk-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.dk-card { background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); border: 1px solid #4f4f4f; border-radius: 10px; }
.dk-kpi { padding: 11px 13px 12px; min-width: 0; }
.dk-kpi .lbl { font-size: 12px; color: #fff; margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-kpi .val { font-size: 19px; font-weight: 700; letter-spacing: .01em; line-height: 1.05; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-kpi .val.pos { color: #208757; }
.dk-kpi .val.neg { color: #ff2727; }

.dk-row { display: grid; grid-template-columns: 1.7fr 1.12fr 0.86fr; gap: 10px; align-items: stretch; min-width: 0; }
.dk-row > * { min-width: 0; }

/* Calendar */
.dk-cal { background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); border: 1px solid #4f4f4f; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; }
.dk-cal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.dk-cal-left { display: flex; align-items: center; gap: 10px; }
.dk-navbtns { display: flex; gap: 5px; }
.dk-navbtn { width: 26px; height: 26px; border-radius: 6px; background: #3a3a3c; color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.dk-navbtn svg { width: 12px; height: 12px; }
.dk-navbtn:hover { background: #505050; }
.dk-month { font-size: 15px; font-weight: 500; color: #fff; }
.dk-summary { display: flex; align-items: center; gap: 14px; font-size: 12px; border: 1px solid #4f4f4f; border-radius: 9px; padding: 5px 12px; }
.dk-si { display: flex; align-items: center; gap: 5px; }
.dk-sl { color: #a1a1a6; white-space: nowrap; }
.dk-sv { color: #fff; white-space: nowrap; }
.dk-sv.pos { color: #208757; }
.dk-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; }
.dk-weekday { text-align: center; font-size: 11px; font-weight: 500; text-transform: uppercase; color: #a1a1a6; padding: 4px 0; letter-spacing: .4px; }
.dk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; flex: 1; }
.dk-day { background: #262626; border: 1px solid #3a3a3c; border-radius: 8px; padding: 6px 8px; min-height: 44px; display: flex; align-items: flex-start; font-size: 12.5px; color: #e5e5ea; }
.dk-day.other { background: #151515; opacity: .5; }
.dk-day.win { background: linear-gradient(to bottom right, #064e3b, #065f46); border-color: #059669; color: #fff; }
.dk-day.loss { background: linear-gradient(to bottom right, #7f1d1d, #991b1b); border-color: #b91c1c; color: #fff; }

/* Recent / Open trades */
.dk-trades { background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); border: 1px solid #4f4f4f; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; }
.dk-tabs { display: flex; background: #1a1a1c; border: 1px solid #3a3a3c; border-radius: 9px; padding: 4px; margin-bottom: 6px; }
.dk-tab { flex: 1; text-align: center; font-size: 12.5px; color: #a1a1a6; padding: 7px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; }
.dk-tab.active { background: #3a3a3c; color: #fff; }
.dk-thead { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 9px 6px; font-size: 11.5px; color: #a1a1a6; text-align: center; }
.dk-trow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: center; justify-items: center; padding: 8px 6px; border-top: 1px solid rgba(255, 255, 255, .05); }
.dk-sym { color: #fff; font-size: 13px; }
.dk-type { font-size: 12.5px; }
.dk-type.buy { color: #208757; }
.dk-type.sell { color: #ff2727; }
.dk-chip { font-size: 12.5px; color: #fff; padding: 4px 8px; border-radius: 7px; text-align: center; width: 70px; font-variant-numeric: tabular-nums; }
.dk-chip.pos { background: linear-gradient(to bottom right, #064e3b, #065f46); border: 1px solid #198754; }
.dk-chip.neg { background: linear-gradient(to bottom right, #7f1d1d, #991b1b); border: 1px solid #ff1818; }

/* Average Win/Loss + Playbooks */
.dk-side { display: flex; flex-direction: column; gap: 12px; }
.dk-stat { padding: 13px 15px; }
.dk-stat .lbl { font-size: 12.5px; color: #fff; margin-bottom: 7px; }
.dk-stat .val { font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.dk-stat .val.pos { color: #208757; }
.dk-stat .val.neg { color: #ff2727; }
.dk-pb { background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%); border: 1px solid #4f4f4f; border-radius: 10px; padding: 13px 8px 8px; flex: 1; }
.dk-pb-title { font-size: 13px; color: #fff; margin: 0 0 6px 8px; }
.dk-pb-row { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.dk-pb-row:hover { background: #18181B; }
.dk-pb-left { display: flex; align-items: center; gap: 9px; }
.dk-pb-sq { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dk-pb-name { font-size: 12.5px; color: #fff; }
.dk-pb-ext { color: #888; flex-shrink: 0; }

/* ─── Calendar view — faithful 1:1 (cpg, dark) ─── */
.cpg-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 12px; }
.cpg-kpi { background: linear-gradient(135deg, #2a2a2c, #1c1c1e); border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; padding: 13px 16px; display: flex; flex-direction: column; gap: 3px; }
.cpg-kpi-lbl { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: rgba(255, 255, 255, .32); }
.cpg-kpi-val { font-size: 20px; font-weight: 700; line-height: 1.1; color: #fff; }
.cpg-kpi-val.pos { color: #34d399; }
.cpg-kpi-val.neg { color: #f87171; }
.cpg-kpi-sub { font-size: 11px; color: rgba(255, 255, 255, .28); margin-top: 1px; }
.cpg-main { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; align-items: stretch; height: 498px; }
.cpg-cal-col { min-width: 0; display: flex; flex-direction: column; }
.cpg-side { display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.cpg-cal-card { background: linear-gradient(160deg, #2a2a2c, #1c1c1e); border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; flex: 1; }
.cpg-cal-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; flex-wrap: wrap; gap: 10px; }
.cpg-cal-hdr-l { display: flex; align-items: center; gap: 10px; }
.cpg-nav-grp { display: flex; gap: 4px; }
.cpg-nav-btn { background: rgba(255, 255, 255, .08); border: none; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: background .15s, color .15s; }
.cpg-nav-btn svg { width: 11px; height: 11px; }
.cpg-nav-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.cpg-month-title { font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; }
.cpg-cal-stats { display: flex; gap: 16px; }
.cpg-cal-stat { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.cpg-stat-lbl { color: #9ca3af; }
.cpg-stat-val { font-weight: 600; color: #e5e7eb; }
.cpg-wdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; }
.cpg-wday { text-align: center; font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .6px; padding: 4px 0; }
.cpg-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; flex: 1; grid-auto-rows: 1fr; }
.cpg-cell { border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; border: 1.5px solid transparent; min-height: 58px; }
.cpg-cell.cpg-base { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.cpg-cell.cpg-other { opacity: .25; background: rgba(255, 255, 255, .02); }
.cpg-cell.cpg-win { background: linear-gradient(to bottom right, #064e3b, #065f46); border-color: #059669; }
.cpg-cell.cpg-loss { background: linear-gradient(to bottom right, #7f1d1d, #991b1b); border-color: #b91c1c; }
.cpg-day-num { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .3); line-height: 1; }
.cpg-cell.cpg-win .cpg-day-num, .cpg-cell.cpg-loss .cpg-day-num { color: rgba(255, 255, 255, .5); }
.cpg-day-body { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.cpg-day-pnl { font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; color: #fff; }
.cpg-day-tc { font-size: 9.5px; line-height: 1; white-space: nowrap; color: rgba(255, 255, 255, .6); }
.wk-card { background: linear-gradient(135deg, #2a2a2c, #1c1c1e); border: 1.5px solid rgba(255, 255, 255, .08); border-left-width: 4px; border-radius: 14px; padding: 10px 14px; }
.wk-card.wk-win { border-left-color: #22c55e; }
.wk-card.wk-loss { border-left-color: #ef4444; }
.wk-card.wk-none { border-left-color: rgba(255, 255, 255, .12); }
.wk-hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.wk-label { font-size: 12.5px; font-weight: 700; color: #fff; }
.wk-range { font-size: 9.5px; color: rgba(255, 255, 255, .28); }
.wk-pnl { font-size: 17px; font-weight: 700; margin-bottom: 7px; line-height: 1; }
.wk-pnl.pos { color: #34d399; }
.wk-pnl.neg { color: #f87171; }
.wk-divider { height: 1px; background: rgba(255, 255, 255, .07); margin-bottom: 7px; }
.wk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wk-stat { display: flex; flex-direction: column; gap: 1px; }
.wk-stat-lbl { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255, 255, 255, .28); }
.wk-stat-val { font-size: 13px; font-weight: 700; color: #e5e7eb; }
.wk-stat-val.pos { color: #34d399; }
.wk-empty { font-size: 12px; color: rgba(255, 255, 255, .2); font-style: italic; }

/* ─── Responsive (app-ui rules only — site.css has its own) ─── */
/* The .app-window itself stays at fixed 1140x600 desktop dimensions at
   every breakpoint. The .app-frame container query above scales the
   whole window down proportionally on narrower viewports — so mobile
   users see the desktop layout shrunken, not a reflowed mobile layout.
   Only the static helpers below (used outside the demo by app-blocks
   on other pages) keep their previous breakpoints. */
@media (max-width: 900px) {
    .kpis { grid-template-columns: repeat(3, 1fr); }
    .dash-grid { grid-template-columns: 1fr; }
    .an-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kpis { grid-template-columns: repeat(2, 1fr); }
}