/* Myfxbook look-alike. The real site is a Bootstrap 3 build, so the chrome here
   copies its measurements: 12px Helvetica/Arial, 1px #ddd borders at 3px radius,
   panel headings on a light grey gradient, #337ab7 links, dense striped tables,
   and a Highcharts-shaped growth plot (grey gridlines, gradient area, range
   selector, clickable legend).

   Two palettes, selected by the data-theme attribute on <html>. Light is the
   default because that is the one that matches Myfxbook; dark is ours. Every
   colour below is a variable — never hard-code one in a rule, or a theme breaks. */

:root,
html[data-theme="light"] {
    color-scheme: light;

    --page: #f5f6f7;
    --panel: #ffffff;
    --line: #dddddd;
    --line-soft: #eeeeee;
    --text: #333333;
    --heading: #2c3e50;
    --label: #555555;
    --dim: #999999;
    --link: #337ab7;
    --link-hover: #23527c;
    --up: #5ba717;
    --down: #cc3333;

    /* top bar */
    --navy: linear-gradient(#2c4055, #223444);
    --navy-edge: #16232f;
    --navy-fg: #b9c4d0;
    --navy-ctl: #1d2d3c;
    --navy-ctl-fg: #dfe6ee;
    --navy-ctl-line: #3a5470;

    /* tabs */
    --tab-fg: #337ab7;
    --tab-hover: #eeeeee;

    /* panels + tables */
    --panel-head: linear-gradient(#f5f5f5, #e9e9e9);
    --th-bg: #f5f5f5;
    --row-odd: #fafafa;
    --row-hover: #f0f4f8;
    --control: #ffffff;
    --control-fg: #333333;
    --control-hover: #e6e6e6;

    /* badges */
    --real-bg: #eaf4dd; --real-fg: #4a8c14; --real-line: #cbe3ad;
    --demo-bg: #f0f2f4; --demo-fg: #6b7885; --demo-line: #d8dde2;
    --cent-bg: #e4eef8; --cent-fg: #2c6fad; --cent-line: #bcd5ea;
    --buy-bg: #eaf4dd;  --buy-fg: #4a8c14;
    --sell-bg: #fbe6e6; --sell-fg: #b32222;

    /* bars: the "won vs lost" track is red and the green fill eats into it */
    --bar-track: #e9ebee;
    --bar-win-grad: linear-gradient(#7cc63f, #5ba717);
    --bar-loss-grad: linear-gradient(#dd5a5a, #cc3333);

    /* chart. Three hues — green, violet, blue — checked as a set against the
       colourblind separation and contrast gates in both themes. Profit, the
       series the page opens on, wears the green the rest of the app already
       reads as money made; growth takes the violet. Each is a single line whose
       sign changes along it, so the colour marks identity, not state. */
    --c-grid: #e6e6e6;
    --c-axis: #ccd6eb;
    --c-zero: #c0c0c0;
    --profit: #5ba717;
    --growth: #4a3aa7;
    --area-p0: rgba(91, 167, 23, 0.38);
    --area-p1: rgba(91, 167, 23, 0.02);
    --area-g0: rgba(74, 58, 167, 0.34);
    --area-g1: rgba(74, 58, 167, 0.02);
    --area-b0: rgba(51, 122, 183, 0.34);
    --area-b1: rgba(51, 122, 183, 0.02);
    --crosshair: #c2c8d0;
    --dot-fill: #ffffff;
    --tip-bg: rgba(247, 247, 247, 0.95);
    --tip-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --page: #12161c;
    --panel: #1a1f27;
    --line: #2c333d;
    --line-soft: #232932;
    --text: #d6dbe1;
    --heading: #eaeff5;
    --label: #9aa5b1;
    --dim: #7f8a97;
    --link: #5b9fd6;
    --link-hover: #86bce8;
    --up: #6fc832;
    --down: #ef5b5b;

    --navy: linear-gradient(#161c24, #0d1117);
    --navy-edge: #05080b;
    --navy-fg: #a8b3c0;
    --navy-ctl: #1b222b;
    --navy-ctl-fg: #cbd3dc;
    --navy-ctl-line: #333c47;

    --tab-fg: #8fb8da;
    --tab-hover: #1f252e;

    --panel-head: linear-gradient(#232a33, #1c222a);
    --th-bg: #1f252e;
    --row-odd: #1d232b;
    --row-hover: #222a34;
    --control: #232a34;
    --control-fg: #cbd3dc;
    --control-hover: #2c3543;

    --real-bg: #1c3320; --real-fg: #7fce4a; --real-line: #2c5233;
    --demo-bg: #22282f; --demo-fg: #8e9aa7; --demo-line: #333b45;
    --cent-bg: #1b2a3a; --cent-fg: #6fb0e0; --cent-line: #2e4a66;
    --buy-bg: #1c3320;  --buy-fg: #7fce4a;
    --sell-bg: #3a1f1f; --sell-fg: #e87373;

    --bar-track: #2a313b;
    --bar-win-grad: linear-gradient(#7fce4a, #4f9a20);
    --bar-loss-grad: linear-gradient(#f07070, #c93b3b);

    --c-grid: #262d36;
    --c-axis: #39424e;
    --c-zero: #3c4450;
    --profit: #6fc832;
    --growth: #6a5ad0;
    --area-p0: rgba(111, 200, 50, 0.34);
    --area-p1: rgba(111, 200, 50, 0.02);
    --area-g0: rgba(106, 90, 208, 0.32);
    --area-g1: rgba(106, 90, 208, 0.02);
    --area-b0: rgba(91, 159, 214, 0.32);
    --area-b1: rgba(91, 159, 214, 0.02);
    --crosshair: #4b5563;
    --dot-fill: #1a1f27;
    --tip-bg: rgba(35, 42, 52, 0.96);
    --tip-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font: 12px/1.42857 "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 14px; }

/* ---------- top bar ---------- */
.topbar { background: var(--navy); border-bottom: 3px solid var(--navy-edge); }
.topbar-in { display: flex; align-items: center; gap: 26px; height: 44px; }

.logo {
    color: #fff;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: -0.4px;
}
.logo:hover { text-decoration: none; color: #fff; }

.topnav { display: flex; gap: 20px; }
.topnav a { color: var(--navy-fg); font-size: 12px; }
.topnav a:hover { color: #fff; text-decoration: none; }

.acc-switch { margin-left: auto; }
.acc-switch select {
    background: var(--navy-ctl); color: var(--navy-ctl-fg); border: 1px solid var(--navy-ctl-line);
    font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 3px 6px; border-radius: 3px;
}

/* Theme toggle. margin-left:auto pushes it right when it is the last flex item;
   the account switcher keeps its own auto margin when both are present. */
.theme-btn {
    margin-left: auto;
    background: var(--navy-ctl); color: var(--navy-ctl-fg);
    border: 1px solid var(--navy-ctl-line); border-radius: 3px;
    width: 28px; height: 24px; line-height: 1;
    font-size: 13px; cursor: pointer; padding: 0;
}
.theme-btn:hover { color: #fff; border-color: #5a6d84; }
.acc-switch + .theme-btn { margin-left: 0; }

/* ---------- system header ---------- */
.crumb { color: var(--dim); padding: 12px 0 8px; font-size: 11px; }
.crumb span { color: var(--text); }

.sys-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px; flex-wrap: wrap; padding-bottom: 12px;
}
.sys-head h1 {
    margin: 0; font-size: 24px; font-weight: bold; color: var(--heading);
    display: flex; align-items: center; gap: 8px; line-height: 1.1;
}
.sys-sub { color: var(--dim); font-size: 11px; margin-top: 4px; }

.pill {
    font-size: 10px; font-weight: bold; text-transform: uppercase;
    padding: 2px 7px; border-radius: 9px; letter-spacing: 0.4px;
}
.pill-real { background: var(--real-bg); color: var(--real-fg); border: 1px solid var(--real-line); }
.pill-demo { background: var(--demo-bg); color: var(--demo-fg); border: 1px solid var(--demo-line); }
.pill-cent { background: var(--cent-bg); color: var(--cent-fg); border: 1px solid var(--cent-line); }

.sys-gain { text-align: right; line-height: 1.05; }
.sys-gain-v { font-size: 32px; font-weight: bold; }
.sys-gain-l { color: var(--dim); font-size: 11px; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------- tabs (Bootstrap 3 nav-tabs) ---------- */
.tabs {
    display: flex; gap: 2px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin-bottom: -1px; position: relative; z-index: 1;
}
.tab {
    background: transparent; border: 1px solid transparent; border-bottom: none;
    color: var(--tab-fg); font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    cursor: pointer; padding: 8px 14px; border-radius: 3px 3px 0 0; margin-bottom: -1px;
}
.tab:hover { background: var(--tab-hover); border-color: var(--line) var(--line) transparent; }
.tab.active {
    background: var(--panel); border-color: var(--line) var(--line) var(--panel);
    color: var(--heading); font-weight: bold; cursor: default;
}

/* ---------- panels ---------- */
.panel {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 3px; margin-bottom: 16px;
}
/* The summary panel sits right under the tab strip, welded to the active tab. */
.tabs + .panel { border-top-left-radius: 0; }

.panel-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: var(--panel-head);
    border-bottom: 1px solid var(--line);
    border-radius: 2px 2px 0 0;
    padding: 8px 12px; font-weight: bold; color: var(--heading); font-size: 12px;
}
.panel-body { padding: 12px; }
.panel-foot { padding: 8px 12px; border-top: 1px solid var(--line-soft); background: var(--th-bg); border-radius: 0 0 2px 2px; }

/* ---------- summary strip ---------- */
/* Eight cells per row on a full-width container, the way the Myfxbook header
   box breaks: 1180px / 8 ≈ 147px. */
.summary { display: flex; flex-wrap: wrap; }
.sc {
    flex: 1 1 12.5%; min-width: 118px; padding: 9px 12px;
    border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.sc-l { color: var(--dim); font-size: 11px; }
.sc-v { font-size: 15px; font-weight: bold; margin-top: 1px; white-space: nowrap; }
.sc-s { color: var(--dim); font-size: 10px; }

/* ---------- chart ---------- */
/* Inline SVG chart. The plot is 260px tall and stretches horizontally, so the
   viewBox y unit stays equal to one CSS pixel — the hover code relies on it. */
.chartwrap { padding: 4px 0 2px; }

.chart-range { display: flex; align-items: center; gap: 4px; padding: 0 6px 6px 52px; }
.chart-range .rlabel { color: var(--dim); font-size: 11px; margin-right: 4px; }

.svgchart { position: relative; height: 282px; padding: 6px 6px 0 52px; }
.svgchart .plot { display: block; width: 100%; height: 260px; overflow: visible; }

.c-grid line { stroke: var(--c-grid); stroke-width: 1; }
.c-axis { stroke: var(--c-axis); stroke-width: 1; }
.c-zero { stroke: var(--c-zero); stroke-width: 1; stroke-dasharray: 3 3; }
.c-area { stroke: none; }
.c-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.c-area.s-p { fill: url(#area-p); }
.c-line.s-p { stroke: var(--profit); }
.c-area.s-g { fill: url(#area-g); }
.c-line.s-g { stroke: var(--growth); }
.c-area.s-b { fill: url(#area-b); }
.c-line.s-b { stroke: var(--link); }
.gs-p0 { stop-color: var(--area-p0); }
.gs-p1 { stop-color: var(--area-p1); }
.gs-g0 { stop-color: var(--area-g0); }
.gs-g1 { stop-color: var(--area-g1); }
.gs-b0 { stop-color: var(--area-b0); }
.gs-b1 { stop-color: var(--area-b1); }
.off { display: none; }

.ylabels { position: absolute; top: 6px; left: 0; width: 48px; height: 260px; }
.ylabels span {
    position: absolute; right: 8px; transform: translateY(-50%);
    color: var(--dim); font-size: 11px; white-space: nowrap;
}

.xlabels { position: relative; height: 18px; }
.xlabels span {
    position: absolute; top: 4px; transform: translateX(-50%);
    color: var(--dim); font-size: 11px; white-space: nowrap;
}
.xlabels span:first-child { transform: none; }
.xlabels span:last-child { transform: translateX(-100%); }

.crosshair { position: absolute; top: 6px; width: 1px; height: 260px; background: var(--crosshair); pointer-events: none; }
.cdot {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--dot-fill); border: 2px solid var(--profit);
    transform: translate(-50%, -50%); pointer-events: none;
}
.cdot.p { border-color: var(--profit); }
.cdot.g { border-color: var(--growth); }
.cdot.b { border-color: var(--link); }
.ctip {
    position: absolute; background: var(--tip-bg); border: 1px solid var(--line);
    box-shadow: var(--tip-shadow); border-radius: 3px; color: var(--text);
    padding: 5px 9px; font-size: 11px; line-height: 1.4; white-space: nowrap;
    transform: translate(-50%, -130%); pointer-events: none; z-index: 2;
}

/* Highcharts-style legend: swatch + name, centred under the plot, greyed when
   its series is hidden. It doubles as the series switch. */
.chart-legend { display: flex; justify-content: center; gap: 22px; padding: 6px 0 2px; }
.lg {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: none; border: 0; padding: 2px 4px;
    color: var(--label); font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.lg:hover { color: var(--heading); }
.lg-swatch { width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.lg[data-series="p"] .lg-swatch { background: var(--profit); }
.lg[data-series="g"] .lg-swatch { background: var(--growth); }
.lg[data-series="b"] .lg-swatch { background: var(--link); }
.lg.dimmed { color: var(--dim); text-decoration: line-through; }
.lg.dimmed .lg-swatch { background: var(--dim); }

.chart-empty {
    height: 260px; display: flex; align-items: center; justify-content: center;
    color: var(--dim); font-size: 12px; text-align: center; padding: 0 20px;
}

/* ---------- buttons (Bootstrap 3 btn-default / btn-primary) ---------- */
.cbtn {
    background: var(--control); border: 1px solid var(--line); color: var(--control-fg);
    font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 3px 9px; cursor: pointer; border-radius: 3px;
}
.cbtn:hover { background: var(--control-hover); }
.cbtn.active { background: var(--link); border-color: var(--link); color: #fff; }
.cbtn.active:hover { background: var(--link-hover); border-color: var(--link-hover); }

/* ---------- statistics rows ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.srow { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.srow-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.srow-l { color: var(--label); }
.srow-v { font-weight: bold; text-align: right; }

.bar { height: 8px; background: var(--bar-track); border-radius: 2px; margin-top: 5px; overflow: hidden; }
/* Won-vs-lost bars: the remainder is the loss colour, so the row reads as a
   split the way Myfxbook draws profitability. */
.bar.two-tone { background: var(--bar-loss-grad); }
.bar-win { height: 100%; background: var(--bar-win-grad); }
.bar-loss { height: 100%; background: var(--bar-loss-grad); }

/* ---------- tables ---------- */
/* Cells never wrap, so a wide table would push itself out of its panel. Every
   table sits in a .tscroll instead, which scrolls on its own when the columns do
   not fit. It has to be the wrapper and not the panel: a scrolling panel would
   also clip the chart tooltip, which is drawn above the plot. */
.tscroll { overflow-x: auto; }

table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
    text-align: right; color: var(--label); font-size: 11px; font-weight: bold;
    background: var(--th-bg); border-bottom: 2px solid var(--line);
    padding: 7px 10px; white-space: nowrap;
}
table.grid td {
    text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid tbody tr:nth-child(even) { background: var(--row-odd); }
table.grid tbody tr:hover { background: var(--row-hover); }
table.grid tbody tr:last-child td { border-bottom: none; }

.act {
    display: inline-block; min-width: 34px; text-align: center;
    font-size: 10px; font-weight: bold; text-transform: uppercase;
    padding: 1px 6px; border-radius: 3px;
}
.act.buy  { background: var(--buy-bg); color: var(--buy-fg); }
.act.sell { background: var(--sell-bg); color: var(--sell-fg); }

.month-grid td, .month-grid th { text-align: right; font-size: 11px; }

/* Each month cell stacks its gain over the money it made. The profit is set
   back and inherits the cell's colour, so a column still reads as one figure at
   a glance and the twelve months keep their width. */
.mprofit {
    display: block; font-size: 10px; font-weight: normal;
    opacity: 0.65; margin-top: 1px;
}

/* Periods table: value then its change in brackets, the change set back so the
   figure itself stays the thing the eye lands on. Columns are centred — each
   holds a pair, not a single number to line up on the decimal point. */
.periods th, .periods td { text-align: center; }
.periods td { font-weight: bold; }
.periods td:first-child { color: var(--label); }
.pdiff { font-weight: normal; opacity: 0.8; }

/* Portfolio table footer: the combined line, visually detached from the rows. */
table.grid tfoot td {
    text-align: right; padding: 8px 10px; white-space: nowrap;
    background: var(--th-bg); border-top: 2px solid var(--line);
}
table.grid tfoot td:first-child { text-align: left; }

/* Systems table sections, one band per account group. The band is a label and
   not data, so it drops the numeric right-alignment the other cells carry. Its
   subtotal is set apart by a rule above it rather than a fill, which keeps the
   group header the strongest horizontal line in the table. */
table.grid tr.grp td {
    text-align: left; background: var(--th-bg); color: var(--heading);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    /* Matches the panel head and the rows it covers. Shrinking it below the data
       put the heading under its own content in the hierarchy; the fill, the
       weight and the caps carry the distinction instead of a size drop. */
    font-weight: bold; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 7px 10px;
}
table.grid tr.grp .dim {
    text-transform: none; letter-spacing: 0; font-size: 11px; margin-left: 8px;
}
table.grid tr.grp-total td { border-top: 1px solid var(--line); }

/* The only cell allowed to wrap: a long broker name would otherwise set the
   width of the whole first column. */
.sys-cell { line-height: 1.35; white-space: normal; min-width: 130px; }
.sys-cell .dim { font-size: 10px; }

/* ---------- portfolio page ---------- */
.notice {
    background: var(--th-bg); border: 1px solid var(--line); border-left: 3px solid var(--link);
    border-radius: 3px; color: var(--label); padding: 9px 12px; margin-bottom: 12px; font-size: 11px;
}
.notice b { color: var(--heading); }
.notice-warn { border-left-color: var(--down); }

.picker { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pick {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    flex: 0 1 240px; padding: 3px 0;
}
.pick input { margin: 0; }
/* Group heading in the picker. flex-basis 100% is what breaks the wrap so the
   accounts of a group start on their own row. */
.pick-group {
    flex: 1 1 100%; color: var(--heading); font-weight: bold; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.04em; padding-top: 8px;
}
.pick-group:first-child { padding-top: 0; }
.picker-foot { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.picker-foot a.cbtn { display: inline-block; text-decoration: none; }
.picker-foot a.cbtn:hover { text-decoration: none; }

/* ---------- sign-in, sign-up, installer ---------- */
/* One narrow column, centred: these pages ask for four fields and nothing else,
   and stretched across a 1180px container they read as a mistake. */
.authwrap { max-width: 460px; margin: 40px auto; }

.aform { display: flex; flex-direction: column; gap: 12px; }
.afield { display: flex; flex-direction: column; gap: 3px; }
.afield label { color: var(--label); font-weight: bold; }
.afield input, .afield select {
    background: var(--control); border: 1px solid var(--line); color: var(--control-fg);
    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 6px 8px; border-radius: 3px; width: 100%; box-sizing: border-box;
}
.afield input:focus, .afield select:focus { outline: none; border-color: var(--link); }
.afield .dim { font-size: 11px; line-height: 1.45; }
.afoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.afoot .cbtn { padding: 6px 14px; font-size: 12px; text-decoration: none; }

/* A form squeezed into a table cell: no wrapping, no vertical rhythm. */
.inline-form { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.inline-form select {
    background: var(--control); border: 1px solid var(--line); color: var(--control-fg);
    font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 2px 4px; border-radius: 3px;
}

/* Keys and share links: monospace so a mistyped character is visible, and
   full-width so the whole value can be selected in one click. */
.keyrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.keyfield {
    flex: 1 1 320px; min-width: 0;
    background: var(--th-bg); border: 1px solid var(--line); color: var(--heading);
    font: 12px/1.4 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    padding: 6px 8px; border-radius: 3px;
}

/* ---------- who is signed in ---------- */
/* The top bar right-aligns whichever of these comes first, so each one cancels
   the auto margin of the next — the same trick .acc-switch + .theme-btn uses. */
.userbox { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; }
.acc-switch + .userbox { margin-left: 0; }
.userbox + .theme-btn { margin-left: 0; }

.userbox-name { color: var(--navy-fg); text-decoration: none; display: flex; align-items: center; gap: 6px; }
.userbox-name:hover { color: #fff; text-decoration: none; }
.userbox .pill { font-size: 9px; padding: 1px 4px; }
/* Controls on the navy bar wear the navy palette, not the panel one. */
.userbox .cbtn {
    background: var(--navy-ctl); color: var(--navy-ctl-fg); border-color: var(--navy-ctl-line);
}
.userbox .cbtn:hover { background: var(--navy-edge); color: #fff; border-color: #5a6d84; }

.topnav a.on { color: #fff; font-weight: bold; }

/* ---------- helpers ---------- */
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--dim); }
.dim { color: var(--dim); font-weight: normal; }
.strong { font-weight: bold; }

.footer {
    color: var(--dim); font-size: 11px; text-align: center;
    padding: 14px 0 30px;
}

@media (max-width: 860px) {
    .stat-grid { grid-template-columns: 1fr; }
    .sys-gain { text-align: left; }
}