/* Exposed FX Journal: colour, type and the shared controls. Every page loads this first.
   Dark is the default; light comes from the toggle (data-mode on <html>). Blue is for actions, green for profit, red for
   loss, gold for VIP signals. The green and red are a teal-leaning pair, checked for colour-blind readers on both grounds. */
:root{color-scheme:dark;
  --bg:#000;--bg-rgb:0,0,0;--surface:#0B0B0B;--surface2:#1A1A1A;--line:#2A2A2A;--line2:#3A3A3A;--line3:#5A5A5A;
  --fg:#fff;--fg-rgb:255,255,255;--fg2:#E0E0E0;--muted:#9C9C9C;--shadow:rgba(0,0,0,.9);
  --accent:#00B4FF;--accent-rgb:0,180,255;--accent-hi:#5CCFFF;--accent-lo:#0090D4;--on-accent:#000;
  --gold:#D4AF37;--gold-rgb:212,175,55;--on-gold:#000;
  --up:#19AC8F;--up-rgb:25,172,143;--loss:#E5484D;--loss-rgb:229,72,77;
  --vip:#A88A24;--vip-rgb:168,138,36;--own:#0895D2;--own-rgb:8,149,210;
  --disp:"Inter","Helvetica Neue",Arial,sans-serif;--body:"Inter","Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",Consolas,monospace}
:root[data-mode=light]{color-scheme:light;
  --bg:#F3F4F5;--bg-rgb:243,244,245;--surface:#fff;--surface2:#EEF0F2;--line:#E0E3E6;--line2:#C8CDD2;--line3:#98A0A8;
  --fg:#0A0A0A;--fg-rgb:10,10,10;--fg2:#2E3238;--muted:#5A616B;--shadow:rgba(16,24,40,.16);
  --accent:#0077B6;--accent-rgb:0,119,182;--accent-hi:#0088CF;--accent-lo:#005F92;--on-accent:#fff;
  --gold:#735807;--gold-rgb:115,88,7;--on-gold:#fff;
  --up:#00846B;--up-rgb:0,132,107;--loss:#CC2B3E;--loss-rgb:204,43,62;
  --vip:#9A7A16;--vip-rgb:154,122,22;--own:#0077B6;--own-rgb:0,119,182;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;scrollbar-color:var(--line2) var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:rgba(var(--accent-rgb),.35);color:var(--fg)}
input,textarea{caret-color:var(--accent)}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-family:var(--disp);letter-spacing:-.02em}
p{text-wrap:pretty}
.wrap{max-width:1200px;margin:0 auto;padding-inline:28px}
@media (max-width:560px){.wrap{padding-inline:16px}}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up)}.dn{color:var(--loss)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* the mark: three rising candles, and the wordmark beside it */
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 17px/1 var(--disp);letter-spacing:-.025em;white-space:nowrap}
.mark svg{width:28px;height:28px;flex:none;color:var(--fg)}
.mark small{font:500 15px/1 var(--body);letter-spacing:0;color:var(--muted);margin-left:2px}

/* buttons: 10px corners, small controls 7px */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line2);background:transparent;border-radius:10px;padding:10px 18px;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,transform .18s cubic-bezier(.16,1,.3,1)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:hover{background:var(--surface2);border-color:var(--line3)}
.btn svg{width:18px;height:18px;flex:none}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn.sm{min-height:36px;padding:7px 13px;font-size:14px;border-radius:8px}
.btn.xs{min-height:30px;padding:4px 10px;font-size:13px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:default}
.btn.danger{color:var(--loss);border-color:rgba(var(--loss-rgb),.45)}
.btn.danger:hover{background:rgba(var(--loss-rgb),.1)}
.btn.ghost{border-color:transparent}
.btn.tg{background:#2AABEE;border-color:#2AABEE;color:#fff}
/* small labels inside the app: 6px corners, never round ends */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:3px 9px;font-size:13px;font-weight:600;background:rgba(var(--accent-rgb),.12);color:var(--accent);white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:2px;background:currentColor}
.chip.gold{background:rgba(var(--gold-rgb),.14);color:var(--gold)}
.chip.loss{background:rgba(var(--loss-rgb),.13);color:var(--loss)}
.chip.dim{background:rgba(var(--fg-rgb),.07);color:var(--fg2)}
.chip.sell{background:rgba(var(--fg-rgb),.1);color:var(--fg)}
.lab{font-size:13px;font-weight:500;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}
.fine{font-size:13px;color:var(--muted)}
.err{color:var(--loss)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--fg2)}
.form .full{grid-column:1/-1}
.field{background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;font-size:16px;width:100%;min-height:44px}
.field::placeholder{color:var(--muted)}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
textarea.field{min-height:96px;resize:vertical}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg2) 50%),linear-gradient(135deg,var(--fg2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--fg2);cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.check a{color:var(--fg)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(16px);background:var(--surface2);border:1px solid var(--line2);border-radius:10px;padding:12px 18px;font-size:14px;z-index:90;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1);box-shadow:0 18px 40px -16px var(--shadow);max-width:min(560px,calc(100vw - 32px))}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast.bad{border-color:rgba(var(--loss-rgb),.6)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:100;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:8px}

/* light and dark: one button, on every page */
.mode{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;color:var(--fg2)}
.mode:hover{border-color:var(--line3);color:var(--fg)}
.mode svg{width:18px;height:18px}
.mode .sun{display:none}
:root[data-mode=light] .mode .sun{display:block}
:root[data-mode=light] .mode .moon{display:none}

/* light mode: an accent used as text on its own tint needs a deeper shade */
:root[data-mode=light] :is(.j-seg button[aria-checked=true],.j-accbtn .btn.on,.j-tag.custom,.chip){color:var(--accent-lo)}
:root[data-mode=light] .j-dir.l{color:#006B57}
:root[data-mode=light] :is(.j-dir.s,.j-tag.mistake,.chip.loss){color:#B01F31}
:root[data-mode=light] :is(.j-org.vip,.chip.gold){color:var(--gold)}