*{box-sizing:border-box}html,body{margin:0;background:#050608;color:#e9edf2;font:14px Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app{display:flex;min-height:100vh}.sidebar{width:236px;background:#080a0d;border-right:1px solid #1a1d21;padding:22px 14px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:30}.brand{display:flex;gap:11px;align-items:center;padding:0 10px 26px}.brand-mark{font-size:31px;color:#47745F}.brand strong{display:block;font-size:16px}.brand span{font-size:10px;color:#707985}.sidebar nav{display:grid;gap:5px}.nav-item{border:0;background:transparent;color:#8d949e;text-align:left;padding:12px;border-radius:8px;font-size:14px;cursor:pointer}.nav-item span{margin-left:10px}.nav-item.active,.nav-item:hover{background:#15181d;color:#fff}.sidebar-note{margin-top:auto;border-top:1px solid #202328;padding:22px 10px 5px}.sidebar-note small{display:block;color:#68717d;line-height:1.55;margin-top:10px}.main{margin-left:236px;width:calc(100% - 236px)}.topbar{height:68px;border-bottom:1px solid #181b20;background:#080a0d;display:flex;justify-content:space-between;align-items:center;padding:0 24px;position:sticky;top:0;z-index:20}.topbar>div:first-child{display:flex;gap:14px;align-items:center}.muted{color:#646d78;font-size:11px}.top-actions{display:flex;align-items:center;gap:10px}.avatar{width:34px;height:34px;border-radius:50%;background:#202329;display:grid;place-items:center;font-size:10px}.add-btn,.primary-btn,.save-btn{border:0;border-radius:7px;background:#edf1f5;color:#080a0d;font-weight:700;padding:10px 15px;cursor:pointer}.content{padding:25px 24px 42px}.view{display:none}.active-view{display:block}.title-row,.workspace-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}.title-row h1,.workspace-head h1{font-size:22px;margin:0 0 4px}.title-row p,.workspace-head p{margin:0;color:#6d7580}.period-control{display:flex;align-items:center;gap:9px;margin-bottom:12px}.period-control label{color:#6d7580;font-size:11px}.period-control select,.period-control input,.filters input,.filters select,.text-input,.title-input,.description-input,.large-textarea,.board-title{background:#0d0f13;border:1px solid #24282e;color:#dce2e8;border-radius:7px;padding:10px 12px;outline:none}.period-control input{width:138px}.range-tabs,.chart-tabs{display:flex;border:1px solid #24282e;border-radius:8px;overflow:hidden}.range-tabs button,.chart-tabs button{background:transparent;color:#7d8692;border:0;padding:9px 13px;cursor:pointer}.range-tabs button.selected,.chart-tabs button.selected{background:#191d22;color:#fff}.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.card,.panel{background:#0b0d10;border:1px solid #1d2126;border-radius:9px;box-shadow:0 6px 28px #0005}.kpi{padding:17px 16px;min-height:103px}.kpi span,.kpi em{display:block;color:#747d89;font-size:12px;font-style:normal}.kpi strong{display:block;font-size:23px;margin:11px 0 6px}.kpi em{color:#4F806C}.grid-main{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:10px}.equity-card{height:340px;padding:17px}.card-head{display:flex;align-items:center;justify-content:space-between}.card h2{font-size:15px;margin:0}.equity-card canvas{width:100%;height:280px;display:block}.winloss{padding:17px}.donut-wrap{display:flex;align-items:center;gap:24px;margin-top:25px}.donut{width:130px;height:130px;border-radius:50%;background:conic-gradient(#315F4E 0 63%,#6C3037 63% 96%,#667386 96%);display:grid;place-items:center}.donut>div{width:92px;height:92px;border-radius:50%;background:#0b0d10;display:grid;place-items:center;align-content:center;text-align:center}.donut b{font-size:21px}.donut span{font-size:9px;color:#728094}.legend{flex:1}.legend div{display:grid;grid-template-columns:13px 1fr 30px 40px;gap:5px;margin:10px 0;color:#9da7b5}.legend b,.legend span{color:#d8e0ea}.dot{width:9px;height:9px;border-radius:50%;margin-top:4px}.dot.win{background:#315F4E}.dot.loss{background:#6C3037}.dot.be{background:#667386}.avg-results{border-top:1px solid #1a1d22;margin-top:22px;padding-top:16px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.avg-results b,.avg-results span{display:block}.avg-results b{color:#4F806C}.avg-results div:nth-child(2) b{color:#7E3F46}.avg-results span{color:#6f7c8e;font-size:10px;margin-top:5px}.grid-3{display:grid;grid-template-columns:1.25fr 1fr 1.25fr;gap:10px;margin-top:10px}.grid-3 .card{padding:17px;min-height:220px}.mini-table{width:100%;border-collapse:collapse;margin-top:15px}.mini-table th,.mini-table td{text-align:left;border-bottom:1px solid #1b1f24;padding:10px 4px;font-size:11px}.mini-table th{color:#6f7884;font-weight:500}.positive{color:#4F806C}.negative{color:#7E3F46}.side-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.side{border:1px solid #22262c;border-radius:7px;padding:16px}.side strong{display:block;font-size:24px;margin:10px 0 4px}.side span{color:#718093;font-size:11px}.side .rate{color:#4F806C;font-size:16px}.trades-card{margin-top:10px;padding:17px}.filters{display:flex;gap:7px}.filters input{width:150px}.table-wrap{overflow:auto;margin-top:15px}.trades-card table{width:100%;border-collapse:collapse;min-width:920px}.trades-card th,.trades-card td{padding:11px 8px;border-top:1px solid #1b1f24;text-align:left;font-size:11px;white-space:nowrap}.trades-card th{color:#68717d;font-weight:500}.long{color:#5E907A}.short{color:#87474E}.badge{padding:4px 7px;border-radius:20px;font-size:10px}.badge.win{background:#07382d;color:#6E9F89}.badge.loss{background:#3b131b;color:#95565C}.badge.be{background:#27313d;color:#aab4c1}.strategy-layout,.note-shell{display:grid;grid-template-columns:230px 1fr;gap:12px;min-height:690px}.strategy-list-panel,.note-list-panel{padding:13px;height:690px;overflow:auto}.panel-title{text-transform:uppercase;font-size:10px;letter-spacing:.12em;color:#656e79;padding:4px 5px 12px}.strategy-list{display:grid;gap:7px}.strategy-list-item{padding:11px 10px;border:1px solid #1d2126;border-radius:7px;color:#8c95a1;background:#0e1115;cursor:pointer}.strategy-list-item.active{border-color:#505862;color:#fff;background:#171b20}.strategy-list-item span{display:block;color:#646d78;font-size:10px;margin-top:4px}.strategy-editor{padding:22px;min-height:690px}.empty-state{height:100%;display:grid;place-items:center;align-content:center;text-align:center;color:#69727e}.empty-state h2{color:#cfd5dc;margin:10px 0 5px}.empty-state p{max-width:450px;line-height:1.55}.empty-icon{font-size:44px;color:#47745F}.strategy-top{display:flex;gap:10px}.title-input{font-size:20px;font-weight:700;flex:1}.description-input{display:block;width:100%;min-height:78px;resize:vertical;margin:12px 0 15px}.danger-ghost,.small-btn,.upload-btn,.tool{border:1px solid #2a2e34;background:#111419;color:#aeb6c0;border-radius:7px;padding:9px 11px;cursor:pointer}.danger-ghost{color:#87474E}.subtabs-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #20242a;padding-bottom:8px}.subtabs{display:flex;gap:5px;flex-wrap:wrap;flex:1}.subtab{border:0;background:#111419;color:#767f8a;border-radius:6px;padding:9px 11px;cursor:pointer}.subtab.active{background:#22272d;color:#fff}.strategy-tab-content{padding-top:18px}.field-label{font-size:11px;color:#707985;margin:13px 0 6px}.text-input{width:100%}.large-textarea{display:block;width:100%;min-height:220px;resize:vertical;line-height:1.55}.strategy-actions{display:flex;justify-content:space-between;margin:14px 0}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}.image-card{position:relative;border:1px solid #23272d;border-radius:8px;overflow:hidden;background:#090b0e}.image-card img{width:100%;height:160px;object-fit:cover;display:block}.image-card button{position:absolute;top:7px;right:7px;border:0;border-radius:50%;width:26px;height:26px;background:#000b;color:#fff;cursor:pointer}.note-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.board-area{min-width:0}.board-toolbar{display:flex;gap:6px;padding:8px;margin-bottom:8px;flex-wrap:wrap}.tool.active{background:#e9edf2;color:#080a0d}.board-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}.board-title{flex:1;font-size:16px;font-weight:700}.board-meta span{font-size:10px;color:#68717c}.board{height:600px;position:relative;overflow:hidden;background-color:#0b0d10;background-image:radial-gradient(#25292f 1px,transparent 1px);background-size:20px 20px;border:1px solid #23272d;border-radius:10px;cursor:default}.board.pen-mode{cursor:crosshair}.board canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}.board-objects{position:absolute;inset:0;z-index:2;pointer-events:none}.board-object{position:absolute;pointer-events:auto;user-select:none;border:1px solid transparent;min-width:80px;min-height:32px}.board-object.selected{border-color:#47745F}.board-text{color:#f2f5f7;padding:8px 10px;font-size:18px;white-space:pre-wrap;background:#0c0f1388;border-radius:6px}.board-sticky{width:220px;min-height:130px;background:#d9dde2;color:#16191d;border-radius:8px;padding:14px;box-shadow:0 10px 30px #0008;white-space:pre-wrap}.board-image{max-width:340px;max-height:280px;border-radius:7px;box-shadow:0 10px 30px #0008}.board-help{font-size:10px;color:#626b76;margin-top:7px}.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;padding:20px;z-index:100}.hidden{display:none!important}.modal-box{width:min(680px,100%);background:#0b0d10;border:1px solid #262b31;border-radius:10px;padding:22px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-head button{background:transparent;border:0;color:#aab4c0;font-size:25px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label{color:#7d8a9b;font-size:11px}.form-grid input,.form-grid select{display:block;width:100%;margin-top:6px;background:#080a0d;border:1px solid #24282e;color:#e7edf5;padding:11px;border-radius:6px}.hint{font-size:11px;color:#647184}.save-btn{width:100%}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.grid-3{grid-template-columns:1fr 1fr}.grid-3 .card:last-child{grid-column:1/-1}}
@media(max-width:850px){.sidebar{width:68px;padding:15px 8px}.brand div:last-child,.nav-item span,.sidebar-note{display:none}.main{margin-left:68px;width:calc(100% - 68px)}.kpis,.grid-main,.grid-3,.strategy-layout,.note-shell{grid-template-columns:1fr}.strategy-list-panel,.note-list-panel{height:auto;max-height:180px}.filters{flex-wrap:wrap}.workspace-head,.title-row{align-items:flex-start;gap:10px;flex-direction:column}.board{height:520px}}
.trade-journal-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}.journal-stat{padding:16px}.journal-stat span{display:block;color:#737d89;font-size:11px}.journal-stat strong{display:block;margin-top:8px;font-size:22px}.journal-card{margin-top:0}.trade-journal-list{display:grid;gap:8px;margin-top:14px}.journal-trade{display:grid;grid-template-columns:130px 1fr auto;gap:14px;align-items:center;border:1px solid #1d2228;background:#090b0e;border-radius:9px;padding:10px;cursor:pointer;transition:.15s}.journal-trade:hover{border-color:#353b43;background:#0e1115}.journal-thumb{height:82px;border-radius:7px;overflow:hidden;background:#101318;display:grid;place-items:center;color:#555f6c;font-size:10px}.journal-thumb img{width:100%;height:100%;object-fit:cover}.journal-title{display:flex;gap:9px;align-items:center}.journal-title strong{font-size:16px}.journal-meta,.journal-risk{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;color:#697480;font-size:11px}.journal-risk span{border:1px solid #1e2329;border-radius:6px;padding:6px 8px;background:#0d1014}.journal-risk b{color:#dbe2e9}.journal-open,.icon-btn{border:1px solid #252a30;background:#11151a;color:#aab4bf;border-radius:7px;padding:8px 10px;cursor:pointer}.empty-journal{padding:40px;text-align:center;color:#65707c}.trade-modal-box{width:min(900px,96vw);max-height:92vh;overflow:auto}.modal-head p{margin:4px 0 0;color:#687380;font-size:11px}.form-grid textarea{display:block;width:100%;margin-top:6px;background:#080a0d;border:1px solid #24282e;color:#e7edf5;padding:11px;border-radius:6px;min-height:90px;resize:vertical}.journal-text-grid{margin-top:10px}.outcome-picker{display:flex;gap:8px}.outcome-picker input{display:none}.outcome-picker span{display:block;border:1px solid #2a2f36;background:#101318;color:#8e98a4;padding:9px 14px;border-radius:7px;cursor:pointer}.outcome-picker input:checked+span{background:#e8edf2;color:#090b0e;border-color:#e8edf2;font-weight:700}.risk-preview{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0;padding:12px;border:1px solid #1f242a;border-radius:8px;background:#090b0e;color:#778391}.upload-zone{display:block;border:1px dashed #303740;border-radius:8px;padding:18px;text-align:center;color:#9ca6b1;background:#0a0d11;cursor:pointer}.trade-shot-preview{margin-top:10px}.detail-modal-box{width:min(920px,96vw);max-height:92vh;overflow:auto}.detail-hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid #20252b;padding-bottom:16px}.detail-hero h3{font-size:24px;margin:4px 0}.detail-hero p,.eyebrow{color:#707b87}.detail-pnl{font-size:26px;font-weight:700;text-align:right}.detail-pnl small{display:block;font-size:11px;color:#7b8793;margin-top:5px}.detail-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.detail-metrics div{border:1px solid #20252b;border-radius:8px;padding:12px;background:#0a0d10}.detail-metrics span,.detail-section span{display:block;color:#6f7a86;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.detail-metrics b{display:block;margin-top:6px}.detail-section{border-top:1px solid #1b2025;padding:13px 0}.detail-section p{white-space:pre-wrap;line-height:1.55;margin:6px 0 0;color:#cbd3db}.detail-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px}.detail-gallery img{width:100%;max-height:320px;object-fit:contain;background:#060709;border:1px solid #22272d;border-radius:8px}.detail-delete{margin-top:16px}
@media(max-width:850px){.trade-journal-summary{grid-template-columns:1fr 1fr}.journal-trade{grid-template-columns:90px 1fr}.journal-open{display:none}.detail-metrics{grid-template-columns:1fr 1fr}.outcome-picker{flex-wrap:wrap}}
/* v4 Trading Accounts */
.dashboard-controls{display:flex;gap:10px;align-items:center}.account-filter{min-width:180px}.accounts-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}.accounts-card{padding:17px}.account-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.account-card{border:1px solid #20252b;border-radius:10px;background:#090b0e;padding:16px}.account-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.account-card h3{font-size:18px;margin:4px 0 0}.account-type{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#66717d}.account-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.account-metrics div{border:1px solid #1d2228;border-radius:7px;padding:10px;background:#0d1014}.account-metrics span{display:block;color:#6f7b87;font-size:10px}.account-metrics b{display:block;margin-top:5px;font-size:14px}.field-help{display:block;margin-top:5px;color:#58636f;font-size:9px;line-height:1.4}.account-modal-box{width:min(700px,96vw)}.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.modal-actions .save-btn{width:auto;min-width:170px}.risk-preview{align-items:center}.risk-preview span:first-child{padding-right:12px;border-right:1px solid #20252b}
@media(max-width:1000px){.account-list{grid-template-columns:1fr}.accounts-summary{grid-template-columns:1fr 1fr}.account-metrics{grid-template-columns:1fr 1fr 1fr}.dashboard-controls{align-items:flex-end;flex-direction:column}}
@media(max-width:650px){.accounts-summary,.account-metrics{grid-template-columns:1fr 1fr}.modal-actions{flex-direction:column}.modal-actions .save-btn{width:100%}}
/* v5 trade preview */
.risk-preview{display:grid;grid-template-columns:1.35fr repeat(6,minmax(105px,1fr));gap:8px;align-items:stretch}
.risk-preview>span,.preview-main{border:1px solid #1d2228;background:#0d1014;border-radius:7px;padding:10px 11px;min-width:0}
.risk-preview>span{display:flex;flex-direction:column;gap:5px;color:#687481;font-size:10px}
.risk-preview>span b{color:#dce4eb;font-size:12px;white-space:nowrap}
.preview-main{display:flex;flex-direction:column;justify-content:center;gap:5px}
.preview-main span{color:#6e7a86;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.preview-main strong{font-size:15px}
@media(max-width:1100px){.risk-preview{grid-template-columns:repeat(4,1fr)}.preview-main{grid-column:span 2}}
@media(max-width:700px){.risk-preview{grid-template-columns:repeat(2,1fr)}.preview-main{grid-column:span 2}}
.chart-subtitle{display:block;color:#66717e;font-size:10px;margin-top:4px}
.equity-head{gap:12px;align-items:flex-start}
.equity-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:900px){.equity-head{align-items:flex-start;flex-direction:column}.equity-controls{justify-content:flex-start}}
.equity-canvas-wrap{position:relative}
.equity-tooltip{position:absolute;pointer-events:none;z-index:20;min-width:150px;padding:10px 12px;border:1px solid #2a3138;background:#0e1216;color:#eef2f6;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:11px;line-height:1.45;transform:translate(10px,-50%)}
.equity-tooltip.hidden{display:none}
.equity-tooltip .tt-date{font-weight:700;margin-bottom:4px}
.equity-tooltip .tt-pos{color:#4F806C}
.equity-tooltip .tt-neg{color:#95565C}
.equity-tooltip .tt-muted{color:#7f8994}
.badge.pending{background:#242b33;color:#cbd4dd;border:1px solid #3b4652}
.outcome-picker label:has(input[value="PENDING"]:checked) span{border-color:#596675;background:#20262d;color:#e1e7ed}
.pending-text{color:#a8b2bd!important}
.detail-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:18px}
/* =========================================================
v10 — Premium trading palette
Restrained emerald / oxblood accents instead of neon colors
========================================================= */
:root{
--premium-green:#3F705D;
--premium-green-strong:#6E9F89;
--premium-green-soft:rgba(114,165,141,.10);
--premium-green-border:rgba(114,165,141,.24);
--premium-red:#74373E;
--premium-red-strong:#9B5A60;
--premium-red-soft:rgba(181,111,115,.10);
--premium-red-border:rgba(181,111,115,.24);
--premium-neutral:#a9b0b8;
}
/* Profit / positive values: muted emerald, no neon glow */
.positive,
.pnl-positive,
.profit,
.win-text,
.text-green{
color:var(--premium-green-strong)!important;
text-shadow:none!important;
}
/* Loss / negative values: muted wine-red, no candy red */
.negative,
.pnl-negative,
.loss,
.loss-text,
.text-red{
color:var(--premium-red-strong)!important;
text-shadow:none!important;
}
/* Result badges */
.badge.win,
.status.win{
color:#9ABAA9!important;
background:linear-gradient(180deg,rgba(114,165,141,.11),rgba(114,165,141,.055))!important;
border-color:var(--premium-green-border)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.badge.loss,
.status.loss{
color:#B98589!important;
background:linear-gradient(180deg,rgba(181,111,115,.11),rgba(181,111,115,.055))!important;
border-color:var(--premium-red-border)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.badge.be,
.status.be{
color:#b6bdc5!important;
background:rgba(150,158,168,.07)!important;
border-color:rgba(150,158,168,.18)!important;
}
/* WIN / LOSS / BE / PENDING segmented control */
.outcome-picker label span{
transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease!important;
}
.outcome-picker label:has(input[value="WIN"]:checked) span{
color:#A7C2B4!important;
background:linear-gradient(180deg,rgba(114,165,141,.14),rgba(114,165,141,.07))!important;
border-color:rgba(114,165,141,.36)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 0 1px rgba(114,165,141,.025)!important;
}
.outcome-picker label:has(input[value="LOSS"]:checked) span{
color:#C18F93!important;
background:linear-gradient(180deg,rgba(181,111,115,.14),rgba(181,111,115,.07))!important;
border-color:rgba(181,111,115,.36)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 0 1px rgba(181,111,115,.025)!important;
}
.outcome-picker label:has(input[value="BE"]:checked) span{
color:#c1c7ce!important;
background:linear-gradient(180deg,rgba(151,159,168,.11),rgba(151,159,168,.055))!important;
border-color:rgba(151,159,168,.25)!important;
}
/* Buttons that use trading green */
.btn-primary,
.primary-btn,
button.primary,
.save-btn{
background:linear-gradient(180deg,#567E6C,#3E6554)!important;
border-color:#86ad9b!important;
color:#08100d!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 18px rgba(0,0,0,.18)!important;
}
.btn-primary:hover,
.primary-btn:hover,
button.primary:hover,
.save-btn:hover{
background:linear-gradient(180deg,#678F7C,#4B715F)!important;
}
/* Destructive controls: dark wine accent rather than bright red */
.danger,
.danger-ghost,
.delete-btn{
color:#B58286!important;
border-color:rgba(181,111,115,.28)!important;
background:rgba(181,111,115,.055)!important;
}
.danger:hover,
.danger-ghost:hover,
.delete-btn:hover{
color:#C99B9E!important;
border-color:rgba(181,111,115,.42)!important;
background:rgba(181,111,115,.10)!important;
}
/* Focus rings stay subtle and expensive-looking */
input:focus,
select:focus,
textarea:focus{
border-color:rgba(114,165,141,.48)!important;
box-shadow:0 0 0 3px rgba(114,165,141,.075)!important;
outline:none!important;
}
/* =========================================================
v10.1 — Dashboard-wide premium green/red accents
========================================================= */
/* Secondary KPI captions and rates */
.kpi em,
.side .rate{
color:#4F806C!important;
}
/* Long / Short accents */
.long{
color:#5E907A!important;
}
.short{
color:#87474E!important;
}
/* Win/Loss legend dots */
.dot.win{
background:#315F4E!important;
box-shadow:0 0 0 1px rgba(127,174,152,.18)!important;
}
.dot.loss{
background:#6C3037!important;
box-shadow:0 0 0 1px rgba(189,122,126,.18)!important;
}
.dot.be{
background:#697481!important;
}
/* Win/Loss average values */
.avg-results b{
color:#5E907A!important;
}
.avg-results div:nth-child(2) b{
color:#87474E!important;
}
/* Tooltip values */
.equity-tooltip .tt-pos{
color:#6E9F89!important;
}
.equity-tooltip .tt-neg{
color:#95565C!important;
}
/* Brand accent — calmer and less neon */
.brand-mark,
.empty-icon{
color:#47745F!important;
}
/* Selected object/board accent */
.board-object.selected{
border-color:#47745F!important;
}
/* Small premium tint for positive/negative table numbers */
.mini-table .positive,
.trades-card .positive,
.account-card .positive{
color:#6E9F89!important;
}
.mini-table .negative,
.trades-card .negative,
.account-card .negative{
color:#95565C!important;
}
/* =========================================================
v10.2 — true hue redesign
Jade green + oxblood/burgundy red
========================================================= */
:root{
--tmt-jade-deep:#24483c;
--tmt-jade:#315f4e;
--tmt-jade-mid:#4f806c;
--tmt-jade-light:#87ad9a;
--tmt-oxblood-deep:#4f2228;
--tmt-oxblood:#6c3037;
--tmt-oxblood-mid:#87474e;
--tmt-oxblood-light:#b77b80;
}
/* Main dashboard positive/negative language */
.positive,.pnl-positive,.profit,.win-text,.text-green,
.kpi em,.side .rate{
color:var(--tmt-jade-light)!important;
}
.negative,.pnl-negative,.loss,.loss-text,.text-red{
color:var(--tmt-oxblood-light)!important;
}
/* Long / Short */
.long{color:#7fa792!important}
.short{color:#ad6a70!important}
/* Donut legend */
.dot.win{
background:var(--tmt-jade)!important;
box-shadow:0 0 0 1px rgba(79,128,108,.28)!important;
}
.dot.loss{
background:var(--tmt-oxblood)!important;
box-shadow:0 0 0 1px rgba(135,71,78,.28)!important;
}
/* WIN / LOSS badges now use dark jewel tones, not pastel/neon */
.badge.win,.status.win{
color:#a8c3b5!important;
background:#10261f!important;
border:1px solid #274b3d!important;
}
.badge.loss,.status.loss{
color:#c58f94!important;
background:#291317!important;
border:1px solid #563039!important;
}
/* Selected outcomes */
.outcome-picker label:has(input[value="WIN"]:checked) span{
color:#b5cbbf!important;
background:#132a22!important;
border-color:#355f4e!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.outcome-picker label:has(input[value="LOSS"]:checked) span{
color:#cf9da1!important;
background:#2b161a!important;
border-color:#673941!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
/* Average result area */
.avg-results b{color:#7fa792!important}
.avg-results div:nth-child(2) b{color:#ad6a70!important}
/* Hover tooltip */
.equity-tooltip .tt-pos{color:#91b39f!important}
.equity-tooltip .tt-neg{color:#bc7d82!important}
/* Brand accent is jade rather than mint */
.brand-mark,.empty-icon{color:#4f806c!important}
/* Primary action: graphite/ivory, not green.
Green/red are reserved for trading meaning only. */
.btn-primary,.primary-btn,button.primary,.save-btn{
background:linear-gradient(180deg,#e6e8e9,#c9cdcf)!important;
border:1px solid #f0f1f2!important;
color:#101315!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px rgba(0,0,0,.2)!important;
}
.btn-primary:hover,.primary-btn:hover,button.primary:hover,.save-btn:hover{
background:linear-gradient(180deg,#f0f1f2,#d2d5d7)!important;
}
/* Delete controls: deep burgundy, discreet */
.danger,.danger-ghost,.delete-btn{
color:#b77b80!important;
border-color:#563039!important;
background:#1b1013!important;
}
.danger:hover,.danger-ghost:hover,.delete-btn:hover{
color:#c99296!important;
border-color:#714048!important;
background:#241317!important;
}
/* Inputs: neutral focus, avoid green UI everywhere */
input:focus,select:focus,textarea:focus{
border-color:#48515a!important;
box-shadow:0 0 0 3px rgba(110,120,130,.08)!important;
}
/* Premium table number tones */
.mini-table .positive,.trades-card .positive,.account-card .positive{color:#7fa792!important}
.mini-table .negative,.trades-card .negative,.account-card .negative{color:#ad6a70!important}
/* =========================================================
v11 — EMERALD CLASSIC
Bright premium emerald + deep ruby/wine red
========================================================= */
:root{
--ec-green-deep:#063d2f;
--ec-green:#008f68;
--ec-green-bright:#12d394;
--ec-green-highlight:#55e6b5;
--ec-green-glow:rgba(18,211,148,.20);
--ec-red-deep:#55171d;
--ec-red:#a92532;
--ec-red-bright:#e23c49;
--ec-red-highlight:#f06a74;
--ec-red-glow:rgba(226,60,73,.18);
}
/* Positive/negative typography */
.positive,.pnl-positive,.profit,.win-text,.text-green,
.kpi em,.side .rate{
color:var(--ec-green-bright)!important;
text-shadow:0 0 12px rgba(18,211,148,.10)!important;
}
.negative,.pnl-negative,.loss,.loss-text,.text-red{
color:var(--ec-red-highlight)!important;
text-shadow:0 0 12px rgba(226,60,73,.08)!important;
}
/* Win/Loss legend */
.dot.win{
background:linear-gradient(135deg,var(--ec-green-highlight),var(--ec-green))!important;
box-shadow:0 0 10px var(--ec-green-glow)!important;
}
.dot.loss{
background:linear-gradient(135deg,var(--ec-red-highlight),var(--ec-red))!important;
box-shadow:0 0 10px var(--ec-red-glow)!important;
}
/* Result badges */
.badge.win,.status.win{
color:#8ff0ca!important;
background:linear-gradient(135deg,rgba(0,143,104,.22),rgba(6,61,47,.42))!important;
border-color:rgba(18,211,148,.38)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 14px rgba(18,211,148,.06)!important;
}
.badge.loss,.status.loss{
color:#f18a92!important;
background:linear-gradient(135deg,rgba(169,37,50,.23),rgba(85,23,29,.42))!important;
border-color:rgba(226,60,73,.38)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 14px rgba(226,60,73,.05)!important;
}
/* Outcome selector */
.outcome-picker label:has(input[value="WIN"]:checked) span{
color:#9bf1cf!important;
background:linear-gradient(135deg,rgba(0,143,104,.32),rgba(6,61,47,.56))!important;
border-color:rgba(18,211,148,.52)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 18px rgba(18,211,148,.08)!important;
}
.outcome-picker label:has(input[value="LOSS"]:checked) span{
color:#f39aa1!important;
background:linear-gradient(135deg,rgba(169,37,50,.32),rgba(85,23,29,.56))!important;
border-color:rgba(226,60,73,.52)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 18px rgba(226,60,73,.07)!important;
}
/* Long / Short */
.long{color:#4be0ad!important;text-shadow:0 0 10px rgba(18,211,148,.10)!important}
.short{color:#ee6671!important;text-shadow:0 0 10px rgba(226,60,73,.08)!important}
/* Average results */
.avg-results b{color:var(--ec-green-bright)!important}
.avg-results div:nth-child(2) b{color:var(--ec-red-bright)!important}
/* Tooltip */
.equity-tooltip .tt-pos{color:var(--ec-green-highlight)!important}
.equity-tooltip .tt-neg{color:var(--ec-red-highlight)!important}
/* Brand mark */
.brand-mark,.empty-icon{
color:#2adca0!important;
filter:drop-shadow(0 0 7px rgba(18,211,148,.12));
}
/* Trading-specific cards receive only a very subtle jewel tint */
.account-card:has(.positive),
.trade-card:has(.positive){
box-shadow:inset 0 1px 0 rgba(18,211,148,.018);
}
/* Primary UI stays ivory/graphite: trading colors keep semantic meaning */
.btn-primary,.primary-btn,button.primary,.save-btn{
background:linear-gradient(180deg,#f1f3f4,#d8dcde)!important;
border-color:#f5f6f7!important;
color:#101315!important;
}
/* Destructive controls */
.danger,.danger-ghost,.delete-btn{
color:#ef7b84!important;
border-color:rgba(226,60,73,.34)!important;
background:linear-gradient(180deg,rgba(169,37,50,.10),rgba(85,23,29,.16))!important;
}
/* =========================================================
v12 — Win / Loss Streak
========================================================= */
.kpis{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.streak-kpi{
position:relative;
overflow:hidden;
}
.streak-kpi::after{
content:"";
position:absolute;
inset:auto -28px -45px auto;
width:110px;
height:110px;
border-radius:50%;
pointer-events:none;
filter:blur(8px);
opacity:.42;
}
.win-streak-kpi::after{
background:radial-gradient(circle,rgba(18,211,148,.18),rgba(18,211,148,0) 68%);
}
.loss-streak-kpi::after{
background:radial-gradient(circle,rgba(226,60,73,.16),rgba(226,60,73,0) 68%);
}
.win-streak-kpi strong{
color:var(--ec-green-highlight)!important;
text-shadow:0 0 14px rgba(18,211,148,.11);
}
.loss-streak-kpi strong{
color:var(--ec-red-highlight)!important;
text-shadow:0 0 14px rgba(226,60,73,.09);
}
.win-streak-kpi em{color:#7fae9a!important}
.loss-streak-kpi em{color:#b7777c!important}
@media(max-width:1100px){
.kpis{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:850px){
.kpis{grid-template-columns:1fr!important}
}
/* =========================================================
v13 — EMERALD CLASSIC A
Visual implementation matching selected concept A
========================================================= */
:root{
--a-emerald-1:#00f0a8;
--a-emerald-2:#00c98a;
--a-emerald-3:#009b6d;
--a-emerald-deep:#053b2d;
--a-red-1:#ff5261;
--a-red-2:#dc3545;
--a-red-3:#a91f2d;
--a-red-deep:#46151b;
--a-panel:#0c1115;
--a-panel-2:#0f151a;
--a-border:#202a31;
}
/* Background / panels */
body{
background:
radial-gradient(circle at 72% 7%,rgba(0,201,138,.035),transparent 26%),
#070a0d!important;
}
.card,
.panel,
.chart-card,
.side-card,
.strategy-card,
.account-card,
.trade-card{
background:
linear-gradient(145deg,rgba(255,255,255,.012),rgba(255,255,255,0) 42%),
linear-gradient(180deg,#0d1216,#0a0f13)!important;
border-color:#202930!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 10px 30px rgba(0,0,0,.10);
}
/* Selected navigation — exactly the green-tinted premium treatment from concept A */
.nav-item.active,
.nav a.active,
.sidebar a.active{
background:
linear-gradient(90deg,rgba(0,201,138,.18),rgba(0,201,138,.045) 72%,transparent)!important;
border-color:rgba(0,201,138,.16)!important;
box-shadow:inset 3px 0 0 #00c98a,0 0 22px rgba(0,201,138,.035)!important;
}
.nav-item.active svg,
.nav a.active svg,
.sidebar a.active svg{
color:#1ee3a5!important;
}
/* Main Add Trade / primary action should be emerald like the selected mockup */
.btn-primary,
.primary-btn,
button.primary,
.save-btn,
#addTradeBtn{
color:#eafff7!important;
background:
linear-gradient(180deg,#00ad79 0%,#007f59 100%)!important;
border:1px solid rgba(32,232,168,.42)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 8px 22px rgba(0,155,109,.16)!important;
}
.btn-primary:hover,
.primary-btn:hover,
button.primary:hover,
.save-btn:hover,
#addTradeBtn:hover{
background:linear-gradient(180deg,#00c489,#008d62)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.17),
0 9px 28px rgba(0,201,138,.20)!important;
}
/* Selected period/chart tabs */
.range-tabs .selected,
.segmented .selected,
.chart-tabs .selected,
[data-range].selected,
[data-chart].selected,
[data-chart-view].selected{
color:#dbfff3!important;
background:
linear-gradient(180deg,rgba(0,201,138,.22),rgba(0,123,86,.15))!important;
border-color:rgba(0,201,138,.30)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 14px rgba(0,201,138,.045)!important;
}
/* Positive / negative data */
.positive,.pnl-positive,.profit,.win-text,.text-green,
.kpi em,.side .rate{
color:#18dca0!important;
text-shadow:0 0 12px rgba(0,240,168,.13)!important;
}
.negative,.pnl-negative,.loss,.loss-text,.text-red{
color:#f0525f!important;
text-shadow:0 0 12px rgba(255,82,97,.10)!important;
}
/* Make KPI cards feel less flat, with very subtle emerald depth */
.kpi{
position:relative;
overflow:hidden;
}
.kpi::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(135deg,rgba(0,201,138,.025),transparent 42%);
}
.kpi strong{
position:relative;
z-index:1;
}
/* Streak cards keep semantic gradients */
.win-streak-kpi{
background:
radial-gradient(circle at 100% 100%,rgba(0,201,138,.12),transparent 38%),
linear-gradient(180deg,#0d1316,#0a0f12)!important;
}
.loss-streak-kpi{
background:
radial-gradient(circle at 100% 100%,rgba(220,53,69,.11),transparent 38%),
linear-gradient(180deg,#111014,#0b0e11)!important;
}
/* Donut legend */
.dot.win{
background:linear-gradient(135deg,#24edaf,#009b6d)!important;
box-shadow:0 0 12px rgba(0,240,168,.22)!important;
}
.dot.loss{
background:linear-gradient(135deg,#ff6370,#b82331)!important;
box-shadow:0 0 12px rgba(255,82,97,.18)!important;
}
/* Result badges */
.badge.win,.status.win{
color:#91f3cf!important;
background:linear-gradient(135deg,rgba(0,201,138,.24),rgba(5,59,45,.55))!important;
border-color:rgba(24,220,160,.42)!important;
}
.badge.loss,.status.loss{
color:#ff9aa2!important;
background:linear-gradient(135deg,rgba(220,53,69,.23),rgba(70,21,27,.56))!important;
border-color:rgba(240,82,95,.42)!important;
}
/* WIN / LOSS choice */
.outcome-picker label:has(input[value="WIN"]:checked) span{
color:#a0f6d7!important;
background:linear-gradient(135deg,rgba(0,201,138,.31),rgba(5,59,45,.58))!important;
border-color:rgba(24,220,160,.55)!important;
box-shadow:0 0 18px rgba(0,240,168,.07),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.outcome-picker label:has(input[value="LOSS"]:checked) span{
color:#ffabb1!important;
background:linear-gradient(135deg,rgba(220,53,69,.30),rgba(70,21,27,.58))!important;
border-color:rgba(240,82,95,.54)!important;
box-shadow:0 0 18px rgba(255,82,97,.06),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
/* Long / Short cards */
.long-short-card > div:first-child,
.long-card{
background:linear-gradient(145deg,rgba(0,201,138,.095),rgba(0,201,138,.015) 52%,transparent)!important;
}
.long-short-card > div:last-child,
.short-card{
background:linear-gradient(145deg,rgba(220,53,69,.085),rgba(220,53,69,.012) 52%,transparent)!important;
}
.long{color:#22e3a6!important}
.short{color:#f35b68!important}
/* Delete controls */
.danger,.danger-ghost,.delete-btn{
color:#f77983!important;
border-color:rgba(220,53,69,.36)!important;
background:linear-gradient(180deg,rgba(169,31,45,.12),rgba(70,21,27,.20))!important;
}
/* =========================================================
v14 — Reference Match / Emerald Classic A
========================================================= */
:root{
--ref-green:#00d894;
--ref-green-hi:#20f0b0;
--ref-green-deep:#006d4d;
--ref-red:#ee3f4f;
--ref-red-hi:#ff6573;
--ref-red-deep:#8f1e2b;
--ref-panel:#0b1115;
--ref-panel-2:#0d1519;
--ref-border:#1c2b31;
}
/* Verify deployment */
.build-tag{
font-size:9px;
letter-spacing:.08em;
color:#00d894;
border:1px solid rgba(0,216,148,.28);
background:rgba(0,216,148,.07);
padding:3px 6px;
border-radius:999px;
}
/* Main shell */
body{
background:
radial-gradient(900px 420px at 72% -5%,rgba(0,216,148,.055),transparent 55%),
#06090b!important;
}
.topbar{
background:rgba(7,11,14,.94)!important;
border-bottom-color:#172229!important;
}
.sidebar{
background:linear-gradient(180deg,#071014 0%,#080b0e 72%)!important;
border-right-color:#17242a!important;
}
.content{background:transparent!important}
/* Active navigation exactly like the selected visual */
.nav-item.active{
color:#effff9!important;
background:
linear-gradient(90deg,rgba(0,216,148,.20),rgba(0,216,148,.07) 63%,rgba(0,216,148,.015))!important;
box-shadow:
inset 3px 0 0 var(--ref-green),
inset 0 1px 0 rgba(255,255,255,.018),
0 0 20px rgba(0,216,148,.035)!important;
}
.nav-item:hover{
background:rgba(255,255,255,.035)!important;
}
/* Add Trade — selector in the real page is .add-btn */
.add-btn{
color:#eafff8!important;
background:linear-gradient(180deg,#00b97f 0%,#007e58 100%)!important;
border:1px solid rgba(32,240,176,.40)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 0 22px rgba(0,216,148,.13)!important;
}
.add-btn:hover{
background:linear-gradient(180deg,#00d18f,#008c62)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 27px rgba(0,216,148,.19)!important;
}
/* Actual dashboard card selectors */
.card,.panel{
background:
linear-gradient(145deg,rgba(0,216,148,.018),transparent 35%),
linear-gradient(180deg,#0c1216,#090e12)!important;
border-color:#1c282e!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018),
0 10px 28px rgba(0,0,0,.18)!important;
}
.kpis{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.kpi{
min-height:112px!important;
position:relative;
}
.kpi::after{
content:"";
position:absolute;
right:-20px;
bottom:-38px;
width:110px;
height:90px;
background:radial-gradient(circle,rgba(0,216,148,.07),transparent 68%);
pointer-events:none;
}
/* Emerald tab selections */
.range-tabs button.selected,
.chart-tabs button.selected{
color:#eafff8!important;
background:
linear-gradient(180deg,rgba(0,216,148,.22),rgba(0,126,88,.16))!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 0 16px rgba(0,216,148,.055)!important;
}
.range-tabs,.chart-tabs{
border-color:#26333a!important;
}
/* Brighter premium trading values */
.positive,
.kpi em,
.side .rate,
.avg-results b,
.equity-tooltip .tt-pos{
color:var(--ref-green-hi)!important;
text-shadow:0 0 10px rgba(0,216,148,.15)!important;
}
.negative,
.avg-results div:nth-child(2) b,
.equity-tooltip .tt-neg{
color:var(--ref-red-hi)!important;
text-shadow:0 0 10px rgba(238,63,79,.12)!important;
}
/* Donut */
.dot.win{
background:linear-gradient(135deg,#29f1b4,#00986b)!important;
box-shadow:0 0 10px rgba(0,216,148,.24)!important;
}
.dot.loss{
background:linear-gradient(135deg,#ff6976,#bb2735)!important;
box-shadow:0 0 10px rgba(238,63,79,.20)!important;
}
.donut{
filter:drop-shadow(0 0 9px rgba(0,216,148,.07));
}
/* Long / Short actual generated elements are .side */
.side-stats .side:first-child{
background:
radial-gradient(circle at 100% 0,rgba(0,216,148,.12),transparent 42%),
linear-gradient(180deg,#0d1718,#0b1114)!important;
border-color:rgba(0,216,148,.22)!important;
}
.side-stats .side:last-child{
background:
radial-gradient(circle at 100% 0,rgba(238,63,79,.13),transparent 42%),
linear-gradient(180deg,#171013,#0d0f12)!important;
border-color:rgba(238,63,79,.22)!important;
}
.long{color:#1ce4a4!important}
.short{color:#f05a67!important}
/* Dedicated streak strip: always visible and compact */
.streak-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:10px;
}
.streak-card{
min-height:82px;
padding:14px 16px;
display:grid;
grid-template-columns:1fr auto auto;
align-items:center;
gap:16px;
overflow:hidden;
position:relative;
}
.streak-card span{
display:block;
font-size:12px;
font-weight:700;
color:#e5edf1;
}
.streak-card small{
display:block;
margin-top:5px;
color:#6f7c86;
font-size:10px;
}
.streak-card strong{
font-size:30px;
line-height:1;
}
.streak-card>b{
font-size:22px;
font-weight:500;
}
.streak-win{
background:
radial-gradient(circle at 92% 50%,rgba(0,216,148,.16),transparent 30%),
linear-gradient(135deg,#0b1715,#0a1013 68%)!important;
border-color:rgba(0,216,148,.25)!important;
}
.streak-win strong,.streak-win>b{
color:var(--ref-green-hi);
text-shadow:0 0 15px rgba(0,216,148,.17);
}
.streak-loss{
background:
radial-gradient(circle at 92% 50%,rgba(238,63,79,.16),transparent 30%),
linear-gradient(135deg,#171012,#0a1013 68%)!important;
border-color:rgba(238,63,79,.25)!important;
}
.streak-loss strong,.streak-loss>b{
color:var(--ref-red-hi);
text-shadow:0 0 15px rgba(238,63,79,.14);
}
/* More luminous equity panel */
.equity-card{
background:
radial-gradient(700px 240px at 55% 95%,rgba(0,216,148,.065),transparent 70%),
linear-gradient(180deg,#0b1216,#091013)!important;
}
/* Responsive */
@media(max-width:1300px){
.kpis{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:850px){
.kpis{grid-template-columns:1fr!important}
.streak-row{grid-template-columns:1fr!important}
}
/* =========================================================
v15 — Privacy Mode
Eye button masks sensitive trading/account data for demos
========================================================= */
.privacy-toggle{
width:36px;
height:36px;
display:grid;
place-items:center;
border-radius:10px;
border:1px solid #263139;
background:linear-gradient(180deg,#11171b,#0b1014);
color:#9eabb4;
cursor:pointer;
transition:.18s ease;
box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.privacy-toggle:hover{
color:#e7f1f4;
border-color:#394750;
background:linear-gradient(180deg,#151d22,#0d1317);
}
.privacy-toggle[aria-pressed="true"]{
color:#ffcf70;
border-color:rgba(255,207,112,.30);
background:linear-gradient(180deg,rgba(92,69,25,.26),rgba(30,24,14,.48));
box-shadow:0 0 16px rgba(255,207,112,.06),inset 0 1px 0 rgba(255,255,255,.025);
}
.privacy-eye{
font-size:19px;
line-height:1;
}
.privacy-eye-closed{display:none}
.privacy-toggle[aria-pressed="true"] .privacy-eye-open{display:none}
.privacy-toggle[aria-pressed="true"] .privacy-eye-closed{display:block}
/* Mask exact values while preserving layout. */
body.privacy-mode #balance,
body.privacy-mode #balanceChange,
body.privacy-mode #pnl,
body.privacy-mode #pnlChange,
body.privacy-mode #winRate,
body.privacy-mode #tradeCount,
body.privacy-mode #profitFactor,
body.privacy-mode #maxDD,
body.privacy-mode #winStreak,
body.privacy-mode #lossStreak,
body.privacy-mode #donutTotal,
body.privacy-mode #wins,
body.privacy-mode #losses,
body.privacy-mode #bes,
body.privacy-mode #winPct,
body.privacy-mode #lossPct,
body.privacy-mode #bePct,
body.privacy-mode #avgWin,
body.privacy-mode #avgLoss,
body.privacy-mode #avgResult,
body.privacy-mode #journalCount,
body.privacy-mode #journalAvgRisk,
body.privacy-mode #journalAvgRR,
body.privacy-mode #journalPnl,
body.privacy-mode #accountsSummary,
body.privacy-mode #accountList,
body.privacy-mode #strategyTable,
body.privacy-mode #sideStats,
body.privacy-mode #instrumentTable,
body.privacy-mode #tradeBody,
body.privacy-mode #tradeJournalList{
filter:blur(7px)!important;
user-select:none!important;
pointer-events:none!important;
}
/* Charts can reveal performance even if text is hidden. */
body.privacy-mode #equityCanvas,
body.privacy-mode #donut{
filter:blur(12px) brightness(.52)!important;
opacity:.52!important;
}
body.privacy-mode #equityTooltip{
display:none!important;
}
/* Add a neutral privacy overlay over the chart and donut so exact curves are not readable. */
.equity-canvas-wrap,
.donut-wrap{
position:relative;
}
body.privacy-mode .equity-canvas-wrap::after,
body.privacy-mode .donut-wrap::after{
content:"PRIVATE";
position:absolute;
inset:0;
display:grid;
place-items:center;
z-index:8;
pointer-events:none;
font-size:11px;
font-weight:700;
letter-spacing:.18em;
color:rgba(219,228,232,.42);
background:linear-gradient(180deg,rgba(7,11,14,.18),rgba(7,11,14,.42));
backdrop-filter:blur(1.5px);
}
/* Keep labels/navigation visible so the journal can still be demonstrated. */
body.privacy-mode .kpi>span,
body.privacy-mode .streak-card span,
body.privacy-mode .streak-card small,
body.privacy-mode h1,
body.privacy-mode h2{
filter:none!important;
}
/* Small indicator in the header when privacy is active. */
body.privacy-mode .build-tag::after{
content:" · PRIVATE";
color:#ffcf70;
}
/* prevent accidental hover reveal */
body.privacy-mode .equity-canvas-wrap{cursor:default!important}
/* =========================================================
v16 — Individual privacy controls
========================================================= */
#privacyToggle{display:none!important}
.item-eye{
position:absolute;top:10px;right:10px;z-index:12;
width:27px;height:27px;border-radius:8px;
display:grid;place-items:center;
border:1px solid #27343b;background:#0b1115;color:#83919a;
font-size:14px;line-height:1;cursor:pointer;
opacity:.72;transition:.16s ease;
}
.item-eye:hover{opacity:1;color:#e9f3f5;border-color:#40505a;background:#11191e}
.privacy-item{position:relative!important}
.privacy-item.is-private>.item-eye{
opacity:1;color:#ffcf70;border-color:rgba(255,207,112,.32);
background:rgba(67,51,20,.28)
}
.streak-eye{top:50%;transform:translateY(-50%);right:12px}
.streak-card{padding-right:54px!important}
.section-eye{top:12px;right:12px}
.equity-card>.section-eye{top:13px;right:13px}
/* KPI: hide value only; label and card remain visible */
.kpi.is-private strong,.kpi.is-private em{
filter:blur(8px)!important;user-select:none!important;
}
.kpi.is-private strong::selection,.kpi.is-private em::selection{background:transparent}
/* Streak */
.streak-card.is-private strong,.streak-card.is-private>b:not(.item-eye){
filter:blur(8px)!important;user-select:none!important;
}
/* Equity chart */
.equity-card.is-private .equity-canvas-wrap{
filter:blur(12px) brightness(.48)!important;pointer-events:none!important;
}
.equity-card.is-private .equity-canvas-wrap::after{
content:"HIDDEN";position:absolute;inset:0;display:grid;place-items:center;
color:#78858d;font-size:10px;font-weight:700;letter-spacing:.18em;
}
/* Win/Loss section */
.winloss.is-private .donut-wrap,.winloss.is-private .avg-results{
filter:blur(10px)!important;user-select:none!important;pointer-events:none!important;
}
/* Analytics blocks */
[data-privacy-key="strategyPerf"].is-private #strategyTable,
[data-privacy-key="longShort"].is-private #sideStats,
[data-privacy-key="instrumentPerf"].is-private #instrumentTable{
filter:blur(9px)!important;user-select:none!important;pointer-events:none!important;
}
/* Old global privacy mode is disabled in v16 */
body.privacy-mode #balance,body.privacy-mode #pnl,body.privacy-mode #maxDD,
body.privacy-mode #equityCanvas,body.privacy-mode #donut{filter:none!important;opacity:1!important}
body.privacy-mode .equity-canvas-wrap::after,body.privacy-mode .donut-wrap::after{display:none!important}
/* =========================================================
v17 — Images inside every journal text field
========================================================= */
.journal-field-block{
min-width:0;
display:flex;
flex-direction:column;
gap:8px;
}
.journal-field-block>label{
display:flex;
flex-direction:column;
gap:7px;
}
.field-media-row{
display:flex;
align-items:center;
gap:10px;
min-height:30px;
}
.field-image-btn{
display:inline-flex!important;
flex-direction:row!important;
align-items:center;
justify-content:center;
width:max-content;
gap:6px;
padding:7px 10px;
border-radius:8px;
border:1px dashed #33424b;
background:#0b1115;
color:#a8b4bc;
font-size:11px;
cursor:pointer;
transition:.16s ease;
}
.field-image-btn:hover{
color:#dffcf2;
border-color:rgba(0,216,148,.40);
background:rgba(0,216,148,.055);
}
.field-image-hint{
font-size:10px;
color:#64717a;
}
.field-image-preview{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.field-image-card{
position:relative;
min-height:76px;
border-radius:9px;
overflow:hidden;
border:1px solid #26343b;
background:#080d10;
}
.field-image-card img{
width:100%;
height:96px;
display:block;
object-fit:cover;
}
.field-image-card button{
position:absolute;
top:5px;
right:5px;
width:24px;
height:24px;
border-radius:999px;
border:1px solid rgba(255,255,255,.17);
background:rgba(5,8,10,.78);
color:#eef4f6;
cursor:pointer;
}
.field-image-card button:hover{
background:rgba(169,31,45,.84);
border-color:rgba(255,101,115,.45);
}
.detail-section-images{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:10px;
}
.detail-section-images img{
width:100%;
max-height:360px;
object-fit:contain;
background:#070b0e;
border:1px solid #26333a;
border-radius:10px;
}
@media(max-width:850px){
.field-image-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-section-images{grid-template-columns:1fr}
}
/* =========================================================
v18 — Ctrl+V screenshot paste
========================================================= */
.paste-hint{
margin-left:8px;
color:#6f7c85;
font-size:11px;
font-weight:500;
}
.paste-zone:focus{
outline:none;
border-color:rgba(0,216,148,.46)!important;
box-shadow:0 0 0 3px rgba(0,216,148,.07)!important;
}
.journal-field-block.paste-active{
border-radius:10px;
box-shadow:0 0 0 1px rgba(0,216,148,.16);
background:rgba(0,216,148,.018);
}
.field-image-hint{
cursor:default;
}
.paste-toast{
position:fixed;
right:24px;
bottom:24px;
z-index:9999;
padding:10px 13px;
border-radius:10px;
border:1px solid rgba(0,216,148,.30);
background:rgba(8,17,15,.96);
color:#baf5df;
font-size:12px;
box-shadow:0 12px 34px rgba(0,0,0,.34);
opacity:0;
transform:translateY(8px);
pointer-events:none;
transition:.18s ease;
}
.paste-toast.show{
opacity:1;
transform:translateY(0);
}
/* =========================================================
v20 — FIXED: exactly 3 journal columns
========================================================= */
.journal-three-columns{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:14px;
width:100%;
}
.journal-column{
min-width:0;
padding:12px;
border:1px solid #243139;
border-radius:11px;
background:linear-gradient(180deg,#0b1115,#090e12);
transition:.16s ease;
}
.journal-column.paste-active{
border-color:rgba(0,216,148,.34);
box-shadow:0 0 0 1px rgba(0,216,148,.08),0 0 20px rgba(0,216,148,.035);
}
.journal-column-title{
display:block;
margin-bottom:8px;
color:#8e9ba5;
font-size:12px;
}
.journal-column textarea{
width:100%;
min-height:145px;
resize:vertical;
}
.journal-column-actions{
display:flex;
align-items:center;
gap:10px;
margin-top:9px;
}
.journal-column-actions>span{
color:#66737c;
font-size:10px;
}
.journal-column .field-image-preview{
grid-template-columns:repeat(2,minmax(0,1fr));
margin-top:9px;
}
@media(max-width:1050px){
.journal-three-columns{grid-template-columns:1fr}
}
/* =========================================================
v21 — Result thumbnail + no commission + dark journal fields
========================================================= */
.journal-column{
display:flex;
flex-direction:column;
}
.journal-column-title{
order:0;
}
.journal-image-top{
order:1;
margin:0 0 10px 0!important;
min-height:0;
}
.journal-column-actions{
order:2;
margin:0 0 10px 0!important;
}
.journal-column textarea{
order:3;
width:100%!important;
min-height:145px!important;
color:#edf4f6!important;
background:
linear-gradient(180deg,#090f13,#080d10)!important;
border:1px solid #29363e!important;
caret-color:#20efb0!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.012)!important;
}
.journal-column textarea::placeholder{
color:#68747d!important;
opacity:1!important;
}
.journal-column textarea:focus{
color:#ffffff!important;
background:#080e11!important;
border-color:rgba(0,216,148,.42)!important;
box-shadow:0 0 0 3px rgba(0,216,148,.055)!important;
}
/* Result/plan/entry screenshots are prominent above the text */
.journal-column .field-image-preview:empty{
display:none;
}
.journal-column .field-image-preview{
grid-template-columns:1fr!important;
}
.journal-column .field-image-card{
min-height:0;
}
.journal-column .field-image-card img{
width:100%;
height:180px;
object-fit:contain;
background:#05090b;
}
/* Trades Journal thumbnail: use Result screenshot and crop neatly */
.journal-thumb{
width:180px!important;
min-width:180px!important;
height:105px!important;
}
.journal-thumb img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
.journal-title{
gap:10px!important;
}
/* =========================================================
v22.1 — Trades Journal layout fix
========================================================= */
.journal-trade{
display:grid!important;
grid-template-columns:180px minmax(0,1fr) auto!important;
column-gap:18px!important;
row-gap:8px!important;
align-items:center!important;
padding:10px!important;
}
.journal-thumb{
width:180px!important;
min-width:180px!important;
height:105px!important;
grid-column:1!important;
align-self:center!important;
}
.journal-main{
grid-column:2!important;
min-width:0!important;
padding-left:0!important;
overflow:hidden;
}
.journal-title{
display:flex!important;
align-items:center!important;
gap:10px!important;
min-width:0!important;
margin:0!important;
}
.journal-title strong{
flex:0 1 auto;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.journal-meta,
.journal-risk{
min-width:0!important;
margin-left:0!important;
padding-left:0!important;
}
.journal-open{
grid-column:3!important;
justify-self:end!important;
align-self:center!important;
white-space:nowrap;
}
/* No-image placeholder stays fully inside the thumbnail box. */
.journal-thumb>span{
width:100%;
padding:0 10px;
text-align:center;
line-height:1.25;
overflow-wrap:anywhere;
}
/* Responsive layout */
@media(max-width:900px){
.journal-trade{
grid-template-columns:140px minmax(0,1fr)!important;
}
.journal-thumb{
width:140px!important;
min-width:140px!important;
height:90px!important;
}
.journal-open{
grid-column:2!important;
justify-self:start!important;
}
}
@media(max-width:620px){
.journal-trade{
grid-template-columns:1fr!important;
}
.journal-thumb{
grid-column:1!important;
width:100%!important;
min-width:0!important;
height:180px!important;
}
.journal-main,
.journal-open{
grid-column:1!important;
}
}
/* =========================================================
v25 — Trades Journal period grouping
========================================================= */
.journal-head{
align-items:flex-start!important;
gap:16px;
}
.journal-head-left{
display:flex;
flex-direction:column;
gap:11px;
min-width:0;
}
.journal-head-left h2{margin:0}
.journal-group-tabs{
display:flex;
align-items:center;
gap:4px;
width:max-content;
max-width:100%;
padding:3px;
border:1px solid #263139;
border-radius:9px;
background:#090e12;
overflow-x:auto;
}
.journal-group-tabs button{
border:0;
background:transparent;
color:#74818a;
padding:7px 11px;
border-radius:7px;
font-size:11px;
cursor:pointer;
white-space:nowrap;
transition:.16s ease;
}
.journal-group-tabs button:hover{
color:#d9e4e8;
background:rgba(255,255,255,.035);
}
.journal-group-tabs button.selected{
color:#dcfff3;
background:linear-gradient(180deg,rgba(0,216,148,.20),rgba(0,126,88,.13));
box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 0 13px rgba(0,216,148,.045);
}
.journal-period-group{
display:flex;
flex-direction:column;
gap:8px;
}
.journal-period-group + .journal-period-group{
margin-top:18px;
}
.journal-period-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:4px 2px 7px;
border-bottom:1px solid #1c272d;
}
.journal-period-header strong{
color:#dce6e9;
font-size:13px;
font-weight:700;
}
.journal-period-stats{
display:flex;
align-items:center;
gap:10px;
color:#66747d;
font-size:10px;
}
.journal-period-stats b{
font-size:11px;
}
.journal-period-stats b.positive{color:#20e9aa}
.journal-period-stats b.negative{color:#f36a75}
@media(max-width:850px){
.journal-head{flex-direction:column!important}
.journal-head .filters{width:100%}
.journal-group-tabs{width:100%}
}
/* =========================================================
v25.1 — Always-visible Trades Journal period switch
========================================================= */
.journal-period-control{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin:14px 0 12px;
padding:12px 14px;
border:1px solid #233139;
border-radius:10px;
background:
linear-gradient(180deg,rgba(0,216,148,.035),rgba(0,216,148,.012)),
#0a1014;
}
.journal-period-label{
color:#8f9da6;
font-size:12px;
font-weight:600;
white-space:nowrap;
}
.journal-group-tabs-main{
display:flex!important;
width:auto!important;
flex-wrap:nowrap!important;
gap:4px!important;
padding:4px!important;
border:1px solid #2a373f!important;
border-radius:9px!important;
background:#080d10!important;
}
.journal-group-tabs-main button{
display:block!important;
min-width:76px;
padding:8px 12px!important;
border:0!important;
border-radius:7px!important;
background:transparent!important;
color:#7d8a93!important;
font-size:11px!important;
font-weight:700!important;
cursor:pointer!important;
}
.journal-group-tabs-main button:hover{
color:#d8e3e7!important;
background:#10171c!important;
}
.journal-group-tabs-main button.selected{
color:#eafff8!important;
background:linear-gradient(180deg,#00a873,#00744f)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.11),
0 0 14px rgba(0,216,148,.10)!important;
}
@media(max-width:900px){
.journal-period-control{
align-items:flex-start;
flex-direction:column;
}
.journal-group-tabs-main{
width:100%!important;
overflow-x:auto;
}
.journal-group-tabs-main button{
flex:1 0 auto;
}
}
/* =========================================================
v26 — Exact period selector for Trades Journal
========================================================= */
.journal-period-options{
margin:-2px 0 12px;
padding:12px 14px;
border:1px solid #202d34;
border-top:0;
border-radius:0 0 10px 10px;
background:
linear-gradient(180deg,rgba(0,216,148,.018),transparent),
#090f13;
}
.journal-period-option{
display:none;
align-items:end;
gap:12px;
flex-wrap:wrap;
}
.journal-period-option.active{
display:flex;
}
.journal-period-option label{
display:flex;
flex-direction:column;
gap:6px;
min-width:150px;
color:#72808a;
font-size:10px;
font-weight:600;
}
.journal-period-option input,
.journal-period-option select{
min-width:160px;
height:36px;
padding:0 10px;
border:1px solid #2b3941;
border-radius:8px;
background:#080d10;
color:#dfe8eb;
font-size:12px;
outline:none;
}
.journal-period-option input:focus,
.journal-period-option select:focus{
border-color:rgba(0,216,148,.43);
box-shadow:0 0 0 3px rgba(0,216,148,.055);
}
.journal-period-all-note{
color:#74818a;
font-size:11px;
min-height:36px;
align-items:center;
}
.journal-period-all-note.active{
display:flex;
}
/* Slightly reduce button width so six modes fit comfortably */
.journal-group-tabs-main button{
min-width:70px!important;
}
@media(max-width:980px){
.journal-period-option label,
.journal-period-option input,
.journal-period-option select{
min-width:0;
width:100%;
}
.journal-period-option{
display:none;
grid-template-columns:1fr 1fr;
}
.journal-period-option.active{
display:grid;
}
.journal-period-all-note.active{
display:flex;
}
}
/* =========================================================
v26.1 — period selector visibility fix
========================================================= */
.journal-period-control{
display:grid!important;
grid-template-columns:auto 1fr!important;
align-items:center!important;
gap:12px 16px!important;
padding:12px 14px!important;
}
.journal-period-control .journal-period-label{
grid-column:1!important;
grid-row:1!important;
}
.journal-period-control .journal-group-tabs-main{
grid-column:2!important;
grid-row:1!important;
justify-self:end!important;
}
.journal-period-control .journal-period-options{
grid-column:1 / -1!important;
grid-row:2!important;
width:100%!important;
margin:0!important;
padding:12px 0 0!important;
border:0!important;
border-top:1px solid #1f2b32!important;
border-radius:0!important;
background:transparent!important;
}
.journal-period-option.active{
display:flex!important;
}
.journal-period-option label{
min-width:180px!important;
}
.journal-period-option input,
.journal-period-option select{
min-width:180px!important;
height:38px!important;
color:#eef5f6!important;
background:#080d10!important;
border:1px solid #314149!important;
}
@media(max-width:980px){
.journal-period-control{
grid-template-columns:1fr!important;
}
.journal-period-control .journal-period-label,
.journal-period-control .journal-group-tabs-main,
.journal-period-control .journal-period-options{
grid-column:1!important;
}
.journal-period-control .journal-group-tabs-main{
justify-self:stretch!important;
}
}
/* =========================================================
v27 — Strategy stability + Note undo/clipboard/text fixes
========================================================= */
.strategy-save-area{
display:flex;
align-items:center;
gap:10px;
}
.strategy-save-status{
min-width:82px;
text-align:right;
color:#66737d;
font-size:10px;
transition:.18s ease;
}
.strategy-save-status.dirty{color:#d5a75c}
.strategy-save-status.saved{color:#20dca0}
.strategy-save-status.error{color:#f06b76}
.toolbar-divider{
width:1px;
height:24px;
margin:0 2px;
background:#2a343b;
}
#undoNoteBtn:disabled,
#redoNoteBtn:disabled{
opacity:.35;
cursor:not-allowed;
}
.board-text[contenteditable="true"]:focus,
.board-sticky[contenteditable="true"]:focus{
outline:none;
border-color:#00c98a;
box-shadow:0 0 0 2px rgba(0,201,138,.08);
}
.board.paste-ready{
box-shadow:inset 0 0 0 1px rgba(0,216,148,.18);
}
.board-paste-toast{
position:absolute;
right:14px;
bottom:14px;
z-index:5;
padding:8px 11px;
border:1px solid rgba(0,216,148,.28);
border-radius:8px;
background:rgba(7,16,14,.94);
color:#aef1d8;
font-size:10px;
pointer-events:none;
opacity:0;
transform:translateY(6px);
transition:.16s ease;
}
.board-paste-toast.show{
opacity:1;
transform:translateY(0);
}
/* =========================================================
v28 — Note board zoom + layers + overlay on images
========================================================= */
.board-toolbar{align-items:center}
.board-zoom-value{min-width:54px;text-align:center;color:#8ea0ae;font-size:11px;font-weight:700}
.board{height:640px;overflow:auto;padding:16px;background:#0a0d10}
.board-zoom-wrap{position:relative;width:2400px;height:1600px}
.board-surface{position:absolute;left:0;top:0;width:2400px;height:1600px;transform-origin:top left;border-radius:12px;background-color:#0b0d10;background-image:radial-gradient(#25292f 1px,transparent 1px);background-size:20px 20px;box-shadow:inset 0 0 0 1px rgba(42,49,57,.85),0 18px 60px rgba(0,0,0,.35)}
.board canvas{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}
.board.pen-mode canvas{pointer-events:auto}
.board-layer{position:absolute;inset:0}
.board-image-layer{z-index:10}
.board-overlay-layer{z-index:30;pointer-events:none}
.board-object{position:absolute;pointer-events:auto;user-select:none;border:1px solid transparent;min-width:80px;min-height:32px;transform-origin:top left}
.board-object.selected{border-color:#47745F;box-shadow:0 0 0 1px rgba(71,116,95,.4)}
.board-text{color:#f2f5f7;padding:8px 10px;font-size:18px;white-space:pre-wrap;background:rgba(12,15,19,.68);backdrop-filter:blur(2px);border-radius:6px;max-width:520px}
.board-sticky{width:260px;min-height:150px;background:linear-gradient(180deg,#171d24 0%,#12171d 100%);color:#eef2f6;border:1px solid #2b343d;border-radius:10px;padding:14px;box-shadow:0 10px 30px #0008;white-space:pre-wrap}
.board-image{max-width:none;max-height:none;border:1px solid #2a3036;border-radius:8px;box-shadow:0 16px 42px #0009}
.board-help{line-height:1.55}
/* =========================================================
v29 — Hand tool + marquee selection delete
========================================================= */
.board.hand-mode{cursor:grab}
.board.hand-mode.panning{cursor:grabbing}
.board-marquee{
position:absolute;
z-index:40;
display:none;
pointer-events:none;
border:1px dashed rgba(40,199,111,.95);
background:rgba(40,199,111,.12);
box-shadow:0 0 0 1px rgba(40,199,111,.18);
border-radius:8px;
}
.board-marquee.show{display:block}
/* =========================================================
v30 — Figma-like frames / arrows / resize / layer order
========================================================= */
.board-frame-layer{z-index:5}
.board-image-layer{z-index:10}
.board-overlay-layer{z-index:30;pointer-events:none}
.board-frame{
min-width:180px;
min-height:120px;
border:1px solid #33414a;
border-radius:12px;
background:rgba(15,21,26,.34);
box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.board-frame.selected{border-color:#28c76f;box-shadow:0 0 0 1px rgba(40,199,111,.22)}
.board-frame-title{
position:absolute;
left:10px;
top:-25px;
min-width:90px;
padding:3px 7px;
border-radius:5px;
color:#9aa8b2;
background:#0a1014;
font-size:11px;
font-weight:700;
white-space:nowrap;
}
.board-frame-title:focus{outline:1px solid rgba(40,199,111,.5);color:#edf7f2}
.board-image{
display:block;
overflow:visible;
background:#05090b;
}
.board-image>img{
display:block;
width:100%;
height:100%;
object-fit:contain;
border-radius:7px;
pointer-events:none;
}
.board-resize-handle{
position:absolute;
right:-8px;
bottom:-8px;
width:16px;
height:16px;
border-radius:4px;
border:1px solid #49db8e;
background:#0a1210;
box-shadow:0 0 0 2px rgba(0,0,0,.55);
cursor:nwse-resize;
display:none;
z-index:8;
}
.board-object.selected>.board-resize-handle{display:block}
.board-arrow{
min-width:0!important;
min-height:0!important;
overflow:visible;
pointer-events:auto;
}
.board-arrow line{stroke:#f0f4f6;stroke-width:3;stroke-linecap:round;pointer-events:stroke}
.board-arrow polygon{fill:#f0f4f6;pointer-events:all}
.board-arrow.selected line{stroke:#28c76f}
.board-arrow.selected polygon{fill:#28c76f}
.board-layer-button-disabled{opacity:.35;pointer-events:none}
.board-frame-layer,.board-image-layer{pointer-events:none}
.board-frame-layer .board-object,.board-image-layer .board-object{pointer-events:auto}
/* =========================================================
v32 — Collapsible sidebar / expanded workspace
========================================================= */
:root{--sidebar-width:236px;--sidebar-transition:220ms cubic-bezier(.22,.8,.3,1)}
.sidebar{
width:var(--sidebar-width)!important;
transition:transform var(--sidebar-transition),opacity var(--sidebar-transition)!important;
will-change:transform;
}
.main{
margin-left:var(--sidebar-width)!important;
width:calc(100% - var(--sidebar-width))!important;
transition:margin-left var(--sidebar-transition),width var(--sidebar-transition)!important;
}
.brand{
position:relative;
padding-right:42px!important;
}
.brand-copy{min-width:0}
.sidebar-toggle{
width:36px;
height:36px;
flex:0 0 36px;
display:grid;
place-items:center;
border:1px solid #2a3138;
border-radius:9px;
background:#0d1115;
color:#aab3bc;
cursor:pointer;
transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.sidebar-toggle:hover{
background:#171c22;
border-color:#3b4650;
color:#eef3f5;
}
.sidebar-toggle:active{transform:scale(.96)}
.sidebar-toggle-close{
position:absolute;
top:-4px;
right:0;
}
.sidebar-toggle-open{display:none}
.sidebar-toggle-icon{
position:relative;
width:19px;
height:17px;
display:block;
border:1.5px solid currentColor;
border-radius:4px;
}
.sidebar-toggle-icon i{
position:absolute;
left:5px;
top:0;
bottom:0;
width:1.5px;
background:currentColor;
opacity:.85;
}
.sidebar-toggle-icon b{
position:absolute;
right:3px;
top:4px;
width:6px;
height:1.5px;
background:currentColor;
box-shadow:0 4px 0 currentColor;
opacity:.85;
}
.topbar-left{display:flex!important;align-items:center;gap:14px}
.app.sidebar-collapsed .sidebar{
transform:translateX(calc(-1 * var(--sidebar-width)));
opacity:0;
pointer-events:none;
}
.app.sidebar-collapsed .main{
margin-left:0!important;
width:100%!important;
}
.app.sidebar-collapsed .sidebar-toggle-open{display:grid}
.app.sidebar-collapsed .content{
max-width:none;
}
/* On narrow screens the panel behaves like an overlay instead of consuming workspace. */
@media(max-width:800px){
.main{margin-left:0!important;width:100%!important}
.sidebar{z-index:80;box-shadow:18px 0 50px rgba(0,0,0,.38)}
.app:not(.sidebar-collapsed)::after{
content:"";
position:fixed;
inset:0;
z-index:70;
background:rgba(0,0,0,.46);
backdrop-filter:blur(1px);
}
.sidebar-toggle-open{display:grid}
.app:not(.sidebar-collapsed) .sidebar-toggle-open{display:none}
}
/* =========================================================
v33 — Minimal TMT logo in sidebar
========================================================= */
.brand-logo{
width:40px;
height:34px;
flex:0 0 40px;
object-fit:contain;
object-position:center;
display:block;
filter:none!important;
box-shadow:none!important;
}
.brand{
gap:10px!important;
}
.brand-copy strong{
white-space:nowrap;
}
.brand-copy span{
white-space:nowrap;
}
@media(max-width:850px){
.brand-logo{
width:34px;
height:30px;
flex-basis:34px;
}
}
/* =========================================================
v34 — Minimal sidebar chevron + corrected win rate
========================================================= */
.brand{
padding-right:0!important;
}
.sidebar-toggle{
width:24px!important;
height:24px!important;
flex:0 0 24px!important;
border:1px solid #28323a!important;
border-radius:50%!important;
background:#10161b!important;
color:#7f8c95!important;
font-size:20px!important;
line-height:1!important;
font-weight:400!important;
display:grid!important;
place-items:center!important;
padding:0!important;
box-shadow:none!important;
}
.sidebar-toggle:hover{
background:#171f25!important;
border-color:#3a4650!important;
color:#e8eef0!important;
}
.sidebar-toggle span{
display:block;
transform:translateY(-1px);
}
.sidebar-toggle-close{
position:absolute!important;
top:20px!important;
right:-12px!important;
z-index:6;
}
.sidebar-toggle-open{
width:28px!important;
height:28px!important;
flex-basis:28px!important;
margin-right:2px;
}
.topbar-left{
gap:12px!important;
}
/* old compound icon is no longer used */
.sidebar-toggle-icon{display:none!important}
/* =========================================================
v36 — Color balance / unified dashboard tones
Make all trading numbers use one consistent premium palette
========================================================= */
:root{
--v36-green:#88e0bf;
--v36-green-deep:#143128;
--v36-green-border:rgba(136,224,191,.28);
--v36-red:#f08d95;
--v36-red-deep:#32161a;
--v36-red-border:rgba(240,141,149,.26);
--v36-neutral:#d7dde5;
--v36-muted:#8f98a4;
}
/* Global semantic values */
.positive,
.pnl-positive,
.profit,
.win-text,
.text-green,
.kpi em,
.side .rate,
.avg-results b,
.equity-tooltip .tt-pos,
.journal-period-stats .positive,
.journal-risk .positive,
.detail-pnl.positive,
.detail-pnl.win-text,
.preview-main .positive,
.risk-preview .positive,
.account-card .positive,
.trades-card .positive,
.mini-table .positive{
color:var(--v36-green)!important;
text-shadow:none!important;
font-weight:600;
}
.negative,
.pnl-negative,
.loss,
.loss-text,
.text-red,
.equity-tooltip .tt-neg,
.journal-period-stats .negative,
.journal-risk .negative,
.detail-pnl.negative,
.preview-main .negative,
.risk-preview .negative,
.account-card .negative,
.trades-card .negative,
.mini-table .negative{
color:var(--v36-red)!important;
text-shadow:none!important;
font-weight:600;
}
/* Long / short should match the same semantic family and not look washed out */
.long{
color:var(--v36-green)!important;
text-shadow:none!important;
font-weight:600;
}
.short{
color:var(--v36-red)!important;
text-shadow:none!important;
font-weight:600;
}
/* Table and stats clarity */
.mini-table td,
.trades-card td,
.account-metrics b,
.detail-metrics b,
.journal-risk b{
color:var(--v36-neutral);
}
.mini-table th,
.trades-card th,
.account-metrics span,
.detail-metrics span,
.journal-risk span,
.journal-meta span{
color:var(--v36-muted)!important;
}
/* Result badges: aligned to the same palette */
.badge.win,
.status.win{
color:#b8ead7!important;
background:linear-gradient(180deg,rgba(136,224,191,.16),rgba(20,49,40,.48))!important;
border:1px solid var(--v36-green-border)!important;
box-shadow:none!important;
}
.badge.loss,
.status.loss{
color:#f5b7bc!important;
background:linear-gradient(180deg,rgba(240,141,149,.15),rgba(50,22,26,.50))!important;
border:1px solid var(--v36-red-border)!important;
box-shadow:none!important;
}
.badge.be,
.status.be{
color:#c7d0d9!important;
background:rgba(140,149,162,.12)!important;
border:1px solid rgba(140,149,162,.18)!important;
}
.badge.pending,
.status.pending{
color:#d8e1ea!important;
background:rgba(95,107,122,.20)!important;
border:1px solid rgba(120,130,145,.22)!important;
}
/* Summary cards and side cards feel balanced, not overly bright or overly dull */
.side{
background:linear-gradient(180deg,#0d1216,#0a0f13)!important;
}
.side strong,
.kpi strong,
.journal-period-stats b,
.detail-pnl{
color:#edf2f7;
}
/* Keep performance tables visually even */
.mini-table td:last-child.positive,
.mini-table td:last-child.negative,
.trades-card td.positive,
.trades-card td.negative{
letter-spacing:.01em;
}
/* =========================================================
v38 — Supabase Cloud Auth + Invite Registration
========================================================= */
.cloud-auth-btn{
height:34px;
display:flex;
align-items:center;
gap:8px;
padding:0 12px;
border-radius:10px;
border:1px solid #273139;
background:linear-gradient(180deg,#11171c,#0c1115);
color:#aeb8c1;
font:inherit;
font-size:12px;
font-weight:700;
cursor:pointer;
transition:.16s ease;
}
.cloud-auth-btn:hover{border-color:#3a474f;color:#ecf3f5;background:#141b20}
.cloud-status-dot{width:7px;height:7px;border-radius:50%;background:#6e7781;box-shadow:0 0 0 3px rgba(110,119,129,.08)}
.cloud-auth-btn.is-ready .cloud-status-dot{background:#d0a85c;box-shadow:0 0 0 3px rgba(208,168,92,.09)}
.cloud-auth-btn.is-online{color:#bce8d7;border-color:rgba(136,224,191,.24);background:linear-gradient(180deg,rgba(30,70,56,.32),rgba(12,22,18,.54))}
.cloud-auth-btn.is-online .cloud-status-dot{background:#88e0bf;box-shadow:0 0 0 3px rgba(136,224,191,.10)}
.cloud-auth-btn.is-error .cloud-status-dot{background:#f08d95;box-shadow:0 0 0 3px rgba(240,141,149,.08)}
.cloud-auth-modal-box{width:min(520px,calc(100vw - 32px));padding:22px}
.cloud-auth-info{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid #253039;border-radius:12px;background:#0b1115;margin:4px 0 16px}
.cloud-auth-info b{display:block;color:#edf2f6;font-size:13px;margin-bottom:4px}
.cloud-auth-info small{display:block;color:#808c98;line-height:1.5}
.cloud-auth-shield{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#111a1f;border:1px solid #293640;color:#91bda9;font-size:17px;flex:0 0 34px}
.cloud-auth-form{display:grid;gap:12px}
.cloud-auth-form label{display:grid;gap:7px;color:#8d99a5;font-size:12px}
.cloud-auth-form input{width:100%;height:42px;border:1px solid #29333b;border-radius:9px;background:#080c0f;color:#edf2f6;padding:0 12px;font:inherit;outline:none}
.cloud-auth-form input:focus{border-color:#495861!important;box-shadow:0 0 0 3px rgba(110,130,140,.07)!important}
.cloud-signup-btn{height:40px;width:100%;margin-top:-2px}
.cloud-auth-message{min-height:18px;color:#8e99a4;font-size:12px;line-height:1.45}
.cloud-auth-message.error{color:#f0a0a7}
.cloud-auth-message.success{color:#9cd7c0}
.cloud-session-card{display:flex;align-items:center;gap:12px;padding:15px;border-radius:12px;border:1px solid rgba(136,224,191,.22);background:linear-gradient(135deg,rgba(38,83,66,.22),rgba(10,17,14,.55));margin-bottom:14px}
.cloud-session-card small{display:block;color:#7f8e97;margin-bottom:3px}
.cloud-session-card strong{color:#eaf5f0;font-size:14px;word-break:break-all}
.cloud-session-dot{width:10px;height:10px;border-radius:50%;background:#88e0bf;box-shadow:0 0 0 4px rgba(136,224,191,.08)}
.cloud-next-step{padding:14px;border:1px solid #253039;border-radius:12px;background:#0a0f13;margin-bottom:16px}
.cloud-next-step b{display:block;color:#dfe7eb;margin-bottom:5px}
.cloud-next-step p{margin:0;color:#7f8b96;font-size:12px;line-height:1.55}
@media(max-width:720px){.cloud-auth-btn{padding:0 9px}.cloud-auth-btn #cloudAuthLabel{display:none}}
/* v38 — invite-only signup */
.cloud-invite-hint{
margin-top:-3px;
padding:10px 11px;
border:1px solid #263039;
border-radius:9px;
background:#0a0f13;
color:#7f8b96;
font-size:11px;
line-height:1.5;
}
#cloudInviteCode{text-transform:uppercase;letter-spacing:.04em}
.cloud-user-role{
display:inline-flex;
width:max-content;
margin-top:6px;
padding:3px 7px;
border:1px solid #2b363e;
border-radius:999px;
color:#9aa5af;
background:#10161a;
font-size:10px;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
}
.cloud-user-role.is-owner{
color:#bce8d7;
border-color:rgba(136,224,191,.22);
background:rgba(31,77,59,.18);
}
/* v38.2 — clean start empty state */
.clean-start-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;min-height:150px;justify-content:center}.clean-start-empty strong{font-size:16px;color:#eef3f7}.clean-start-empty span{color:#8f98a4;max-width:560px;line-height:1.55}.clean-start-empty .primary-btn{margin-top:4px;width:auto}
/* =========================================================
v38.3 — Blurred authentication gate
Unauthenticated visitors can preview the workspace visually,
but the entire application is inert until Supabase confirms a session.
========================================================= */
body.auth-pending,
body.auth-locked{
overflow:hidden;
}
body.auth-pending .app,
body.auth-locked .app{
pointer-events:none !important;
user-select:none !important;
}
/* Keep the product visible, but make all operational data unreadable. */
body.auth-pending .content .card,
body.auth-locked .content .card,
body.auth-pending .content table,
body.auth-locked .content table,
body.auth-pending .content canvas,
body.auth-locked .content canvas,
body.auth-pending .content .period-control,
body.auth-locked .content .period-control,
body.auth-pending .content .dashboard-controls,
body.auth-locked .content .dashboard-controls,
body.auth-pending .content .journal-period-panel,
body.auth-locked .content .journal-period-panel,
body.auth-pending .content .summary-row,
body.auth-locked .content .summary-row,
body.auth-pending .top-actions,
body.auth-locked .top-actions{
filter:blur(7px) !important;
opacity:.48 !important;
}
body.auth-pending .content .chart-wrap,
body.auth-locked .content .chart-wrap,
body.auth-pending .content .donut-wrap,
body.auth-locked .content .donut-wrap{
filter:blur(9px) !important;
}
body.auth-pending .sidebar,
body.auth-locked .sidebar{
filter:blur(1.25px);
opacity:.42;
}
body.auth-pending .topbar,
body.auth-locked .topbar{
opacity:.72;
}
body.auth-pending .content .title-row,
body.auth-locked .content .title-row{
opacity:.62;
}
.auth-gate{
position:fixed;
inset:0;
z-index:9999;
display:none;
place-items:center;
padding:28px 18px;
background:
radial-gradient(circle at 50% 34%, rgba(25,88,67,.12), transparent 31%),
rgba(3,6,8,.36);
color:#f3f6f8;
}
body.auth-pending .auth-gate,
body.auth-locked .auth-gate{
display:grid;
}
.auth-gate-shell{
width:min(100%, 440px);
display:flex;
flex-direction:column;
gap:14px;
}
.auth-gate-brand{
display:flex;
align-items:center;
justify-content:center;
gap:11px;
text-shadow:0 2px 20px rgba(0,0,0,.75);
}
.auth-gate-logo{
width:40px;
height:40px;
object-fit:contain;
}
.auth-gate-brand div{
display:flex;
flex-direction:column;
gap:1px;
}
.auth-gate-brand strong{
font-size:16px;
letter-spacing:.01em;
}
.auth-gate-brand span{
color:#9aa4ae;
font-size:10px;
letter-spacing:.08em;
text-transform:uppercase;
}
.auth-gate-card{
border:1px solid rgba(255,255,255,.095);
background:linear-gradient(180deg, rgba(15,19,23,.975), rgba(10,13,16,.985));
border-radius:18px;
box-shadow:0 28px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(136,224,191,.025) inset;
padding:26px;
}
.auth-gate-loading{
min-height:170px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:8px;
}
.auth-gate-loading.hidden{display:none}
.auth-gate-loading strong{font-size:15px}
.auth-gate-loading small{color:#7f8995}
.auth-gate-spinner{
width:28px;
height:28px;
border-radius:50%;
border:2px solid rgba(255,255,255,.12);
border-top-color:#88e0bf;
animation:tmtGateSpin .8s linear infinite;
margin-bottom:6px;
}
@keyframes tmtGateSpin{to{transform:rotate(360deg)}}
.auth-gate-heading{margin-bottom:20px}
.auth-gate-kicker{
display:inline-block;
color:#88e0bf;
font-size:9px;
font-weight:800;
letter-spacing:.15em;
margin-bottom:9px;
}
.auth-gate-heading h1{
margin:0 0 7px;
font-size:23px;
line-height:1.18;
}
.auth-gate-heading p{
margin:0;
color:#8f98a4;
font-size:12px;
line-height:1.55;
}
.auth-gate-form{
display:flex;
flex-direction:column;
gap:13px;
}
.auth-gate-form label{
display:flex;
flex-direction:column;
gap:6px;
color:#adb5bf;
font-size:12px;
font-weight:650;
}
.auth-gate-form input{
width:100%;
box-sizing:border-box;
border:1px solid rgba(255,255,255,.09);
border-radius:10px;
background:#0b0f12;
color:#edf1f5;
padding:12px 13px;
outline:none;
transition:border-color .18s ease, box-shadow .18s ease;
}
.auth-gate-form input:focus{
border-color:rgba(136,224,191,.62);
box-shadow:0 0 0 3px rgba(136,224,191,.08);
}
.auth-gate-invite-hint{
margin-top:-5px;
color:#79838f;
font-size:11px;
line-height:1.45;
}
.auth-gate-primary{
width:100%;
min-height:43px;
margin-top:2px;
}
.auth-gate-mode{
width:100%;
min-height:40px;
}
.auth-gate-footer{
text-align:center;
color:#727c86;
font-size:10px;
letter-spacing:.12em;
text-transform:uppercase;
text-shadow:0 2px 14px #000;
}
@media (max-width:560px){
.auth-gate{padding:18px 12px}
.auth-gate-card{padding:22px 17px;border-radius:16px}
.auth-gate-heading h1{font-size:21px}
body.auth-pending .content .card,
body.auth-locked .content .card{filter:blur(8px)!important}
}
/* v39.3 cloud sync status */
.tmt-cloud-sync-notice{position:fixed;right:18px;bottom:18px;z-index:2600;max-width:min(520px,calc(100vw - 36px));padding:11px 14px;border:1px solid #26323a;border-radius:12px;background:rgba(10,16,20,.96);box-shadow:0 16px 44px rgba(0,0,0,.38);font-size:12px;line-height:1.45;color:#c9d2da;backdrop-filter:blur(14px)}
.tmt-cloud-sync-notice.info{border-color:rgba(83,201,163,.28);color:#b9d8cd}
.tmt-cloud-sync-notice.error{border-color:rgba(240,141,149,.42);color:#ffc0c5}
@media(max-width:800px){.tmt-cloud-sync-notice{left:14px;right:14px;bottom:14px;max-width:none}}
/* v39.6 password recovery */
.auth-recovery-link{
appearance:none;
border:0;
background:transparent;
color:#88e0bf;
font:inherit;
font-size:11px;
font-weight:700;
padding:0;
margin-top:-6px;
width:max-content;
cursor:pointer;
text-align:left;
}
.auth-recovery-link:hover{color:#b4f0d9;text-decoration:underline}
.auth-recovery-link.hidden{display:none!important}
.cloud-recovery-link{margin-top:-5px}
#authGateRecoveryPanel.hidden,
#authGateNormalPanel.hidden{display:none!important}
/* v39.7 — Total P&L $ / % toggle */
.pnl-kpi{padding-bottom:35px}
.pnl-unit-toggle{
position:absolute;
right:12px;
bottom:10px;
display:flex;
overflow:hidden;
border:1px solid #263038;
border-radius:6px;
background:#0a0e11;
z-index:3;
}
.pnl-unit-toggle button{
min-width:29px;
height:23px;
padding:0 8px;
border:0;
border-right:1px solid #263038;
background:transparent;
color:#73808c;
font:700 10px/1 Inter,ui-sans-serif,system-ui,sans-serif;
cursor:pointer;
}
.pnl-unit-toggle button:last-child{border-right:0}
.pnl-unit-toggle button:hover{color:#dce5eb;background:#11181c}
.pnl-unit-toggle button.selected{
color:#9ce9cc;
background:#103329;
}
.pnl-kpi.is-private .pnl-unit-toggle{opacity:.45}
@media(max-width:520px){
.pnl-unit-toggle{right:12px;bottom:9px}
}
/* =========================================================
v40 — Owner Admin
========================================================= */
.owner-only.hidden{display:none!important}
.admin-view{padding-bottom:60px}
.admin-workspace-head{align-items:flex-start}
.admin-owner-label{
display:inline-flex;
margin-bottom:7px;
padding:4px 7px;
border:1px solid #1d5a47;
border-radius:999px;
background:#0b251d;
color:#88e0bf;
font-size:9px;
font-weight:800;
letter-spacing:.14em;
}
.admin-message{
margin:0 0 14px;
padding:10px 12px;
border:1px solid #263038;
border-radius:8px;
background:#0d1317;
color:#b5c0c9;
font-size:12px;
}
.admin-message.error{border-color:#663038;background:#241015;color:#f3a5ab}
.admin-message.success{border-color:#1d5a47;background:#0b251d;color:#a8efd4}
.admin-kpis{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
margin-bottom:12px;
}
.admin-kpi{
min-height:112px;
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
}
.admin-kpi>span{color:#8f98a4;font-size:11px}
.admin-kpi>strong{font-size:28px;line-height:1;color:#eef3f6}
.admin-kpi>small{color:#6f7a84;font-size:10px}
.admin-grid{
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);
gap:12px;
margin-bottom:12px;
}
.admin-invite-create,.admin-summary-panel,.admin-table-panel{padding:14px}
.admin-panel-title{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:12px;
}
.admin-panel-title>div{display:flex;flex-direction:column;gap:3px}
.admin-panel-title strong{font-size:13px}
.admin-panel-title small{color:#76818b;font-size:10px;font-weight:500}
.admin-invite-form{
display:grid;
grid-template-columns:130px 150px minmax(180px,1fr) auto;
gap:9px;
align-items:end;
}
.admin-invite-form label{
display:flex;
flex-direction:column;
gap:5px;
color:#8e99a3;
font-size:10px;
font-weight:700;
}
.admin-invite-form input,.admin-invite-form select{
width:100%;
min-height:38px;
border:1px solid #263038;
border-radius:7px;
background:#0a0f12;
color:#e6edf1;
padding:0 10px;
outline:none;
}
.admin-invite-form input:focus,.admin-invite-form select:focus{border-color:#2b765e}
.admin-invite-result{
margin-top:12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:11px 12px;
border:1px solid #1d5a47;
border-radius:8px;
background:#0b211a;
}
.admin-invite-result>div{display:flex;flex-direction:column;gap:3px}
.admin-invite-result small{color:#76a997;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.admin-invite-result strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;color:#b7f1dc;letter-spacing:.06em}
.admin-security-list{display:grid;gap:10px}
.admin-security-list>div{display:grid;grid-template-columns:29px 1fr;gap:9px;align-items:start}
.admin-security-list span{
width:29px;height:29px;border-radius:7px;background:#10191d;border:1px solid #243038;
display:grid;place-items:center;color:#88e0bf;font-size:9px;font-weight:800
}
.admin-security-list p{margin:2px 0 0;color:#89949d;font-size:10px;line-height:1.55}
.admin-security-list b{color:#cdd5da}
.admin-table-panel{margin-bottom:12px}
.admin-count-pill{
display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:23px;padding:0 8px;
border-radius:999px;background:#10181d;border:1px solid #263038;color:#aab5bd;font-size:10px;font-weight:800
}
.admin-table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:collapse;min-width:760px}
.admin-table th,.admin-table td{
padding:10px 9px;border-top:1px solid #1c252b;text-align:left;vertical-align:middle;font-size:10px;white-space:nowrap
}
.admin-table th{color:#697681;font-weight:700}
.admin-table td{color:#c4cdd3}
.admin-table td.admin-muted{color:#6f7a84}
.admin-role-badge,.admin-status-badge{
display:inline-flex;align-items:center;height:21px;padding:0 7px;border-radius:999px;border:1px solid #2a343a;
font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em
}
.admin-role-badge.owner{border-color:#1d5a47;background:#0b251d;color:#88e0bf}
.admin-role-badge.student{background:#11181d;color:#9aa6ae}
.admin-status-badge.active{border-color:#1d5a47;background:#0b251d;color:#88e0bf}
.admin-status-badge.recent{border-color:#5e5225;background:#221e0d;color:#dbc46c}
.admin-status-badge.inactive{color:#74808a}
.admin-status-badge.disabled{border-color:#603039;background:#241015;color:#ef969f}
.admin-code-cell{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#b9e8d6!important;font-weight:700;letter-spacing:.03em}
.admin-row-actions{display:flex;gap:5px;justify-content:flex-end}
.admin-row-actions button{
min-height:27px;padding:0 8px;border:1px solid #28333a;border-radius:6px;background:#0d1317;color:#99a4ac;font-size:9px;cursor:pointer
}
.admin-row-actions button:hover{border-color:#3c4b54;color:#dce4e9}
.admin-row-actions button.danger{border-color:#4e2930;color:#d9828a}
.admin-empty-row td{text-align:center;color:#6c7882!important;padding:24px}
@media(max-width:1100px){
.admin-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-grid{grid-template-columns:1fr}
.admin-invite-form{grid-template-columns:1fr 1fr}
.admin-note-field{grid-column:1/-1}
}
@media(max-width:650px){
.admin-kpis{grid-template-columns:1fr 1fr}
.admin-invite-form{grid-template-columns:1fr}
.admin-note-field{grid-column:auto}
}
/* =========================================================
v40.1 — Account-scoped Dashboard + Trades
========================================================= */
.trades-head-actions{
display:flex;
align-items:flex-end;
gap:9px;
}
.journal-account-control{
display:flex;
flex-direction:column;
gap:4px;
color:#7f8b95;
font-size:9px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
}
.journal-account-control .account-filter{
min-width:180px;
}
@media(max-width:720px){
.trades-head-actions{
width:100%;
align-items:stretch;
flex-direction:column;
}
.journal-account-control .account-filter{width:100%;min-width:0}
}
/* =========================================================
v40.2 — Admin KPI alignment polish
========================================================= */
.admin-kpi{
min-height:118px;
padding:16px 18px;
justify-content:flex-start;
align-items:flex-start;
gap:0;
}
.admin-kpi>span{
display:block;
min-height:16px;
line-height:1.35;
margin:0 0 8px;
}
.admin-kpi>strong{
display:block;
margin:0 0 8px;
line-height:.95;
letter-spacing:-.02em;
}
.admin-kpi>small{
display:block;
margin-top:auto;
line-height:1.35;
}
/* v40.3 — Total P&L clean $ / % display */
.pnl-kpi #pnlChange{
display:none!important;
}
/* v40.4 — Avg Win / Loss / Result $ / % toggle */
.avg-unit-toggle{display:flex;justify-content:flex-end;margin-top:14px;margin-bottom:-4px}
.avg-unit-toggle button{background:#0f1418;color:#8f9ca9;border:1px solid #2a323a;padding:6px 11px;cursor:pointer;font-weight:700;line-height:1}
.avg-unit-toggle button:first-child{border-radius:8px 0 0 8px}
.avg-unit-toggle button:last-child{border-radius:0 8px 8px 0;border-left:0}
.avg-unit-toggle button:hover{color:#dce5eb;background:#11181c}
.avg-unit-toggle button.selected{background:#184b3b;color:#dff8ee}
.winloss.is-private .avg-unit-toggle{opacity:.45}
@media (max-width: 680px){.avg-unit-toggle{margin-top:12px}}
/* v40.9 — Trades Journal Net P&L toggle matches Dashboard exactly */
.journal-pnl-stat .journal-stat-value-row{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:10px;
margin-top:8px;
}
.journal-pnl-stat strong{margin-top:0}
.journal-pnl-toggle{
flex-shrink:0;
display:flex;
overflow:hidden;
border:1px solid #263038;
border-radius:6px;
background:#0a0e11;
}
.journal-pnl-toggle button{
min-width:29px;
height:23px;
padding:0 8px;
border:0;
border-right:1px solid #263038;
background:transparent;
color:#73808c;
font:700 10px/1 Inter,ui-sans-serif,system-ui,sans-serif;
cursor:pointer;
}
.journal-pnl-toggle button:last-child{border-right:0}
.journal-pnl-toggle button:hover{color:#dce5eb;background:#11181c}
.journal-pnl-toggle button.selected{
color:#9ce9cc;
background:#103329;
}
@media(max-width:560px){
.journal-pnl-stat .journal-stat-value-row{align-items:flex-end;flex-direction:row}
}
/* =========================================================
v40.11 — Dark account selector styled to match TMT controls
========================================================= */
.account-filter{
min-width:180px;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
height:41px;
padding:0 38px 0 12px;
border:1px solid #24282e;
border-radius:8px;
background-color:#0d0f13;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A8694' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:12px 8px;
color:#dce2e8;
font:600 13px/1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
outline:none;
box-shadow:none;
transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.account-filter:hover{
border-color:#2f3740;
background-color:#10141a;
color:#eef4f8;
}
.account-filter:focus{
border-color:rgba(0,201,138,.34);
background-color:#10141a;
box-shadow:0 0 0 3px rgba(0,201,138,.08), inset 0 1px 0 rgba(255,255,255,.03);
}
.account-filter option{
background:#0d0f13;
color:#dce2e8;
}
.dashboard-controls .account-filter{
min-width:196px;
}
.journal-account-control .account-filter{
min-width:196px;
}
/* =========================================================
v40.12 — Account selector height/size matched to range tabs
========================================================= */
.dashboard-controls{
align-items:stretch;
}
.dashboard-controls .range-tabs{
height:40px;
}
.dashboard-controls .range-tabs button{
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
.account-filter{
height:40px;
line-height:40px;
padding:0 38px 0 16px;
font-size:12px;
font-weight:600;
}
.dashboard-controls .account-filter,
.journal-account-control .account-filter{
min-width:196px;
height:40px;
}
/* =========================================================
v40.16 — Economic Calendar
========================================================= */
.calendar-view{padding-bottom:60px}
.calendar-workspace-head{align-items:flex-end}
.calendar-refresh-btn{
height:38px;
padding:0 13px;
border-color:#263038;
background:#0d1216;
color:#9ba6af;
font-size:11px;
font-weight:700;
}
.calendar-refresh-btn:hover{border-color:#34434b;color:#dbe4e9;background:#11181c}
.calendar-refresh-btn:disabled{opacity:.45;cursor:default}
.calendar-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.calendar-range-tabs,.calendar-impact-tabs{
display:flex;
overflow:hidden;
border:1px solid #263038;
border-radius:8px;
background:#090c0f;
}
.calendar-range-tabs button,.calendar-impact-tabs button{
min-height:38px;
padding:0 14px;
border:0;
border-right:1px solid #263038;
background:transparent;
color:#76828d;
font:700 10px/1 Inter,ui-sans-serif,system-ui,sans-serif;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
}
.calendar-range-tabs button:last-child,.calendar-impact-tabs button:last-child{border-right:0}
.calendar-range-tabs button:hover,.calendar-impact-tabs button:hover{color:#dce5eb;background:#11181c}
.calendar-range-tabs button.selected,.calendar-impact-tabs button.selected{
color:#dff8ee;
background:linear-gradient(180deg,rgba(72,139,113,.24),rgba(35,82,65,.22));
box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.calendar-impact-dot{width:6px;height:6px;border-radius:50%;display:inline-block;box-shadow:none}
.calendar-impact-dot.high{background:#c97b82}
.calendar-impact-dot.medium{background:#c4a56a}
.calendar-impact-dot.low{background:#7c8791}
.calendar-currency-row{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
margin-bottom:14px;
}
.calendar-currency-row button{
height:29px;
min-width:44px;
padding:0 10px;
border:1px solid #222a30;
border-radius:7px;
background:#0b0f12;
color:#73808a;
font:700 9px/1 Inter,ui-sans-serif,system-ui,sans-serif;
cursor:pointer;
transition:.16s ease;
}
.calendar-currency-row button:hover{color:#cdd6dc;border-color:#303b43;background:#10151a}
.calendar-currency-row button.selected{
color:#cfeadd;
border-color:#315745;
background:#10251d;
}
.calendar-meta-row{
min-height:29px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:0 2px 7px;
}
.calendar-meta-row>div{display:flex;align-items:center;gap:9px;min-width:0}
.calendar-period-label{color:#cfd7dd;font-size:11px;font-weight:750}
.calendar-timezone-label,.calendar-updated-label{color:#68747e;font-size:9px}
.calendar-card{padding:0;overflow:hidden;min-height:150px;position:relative}
.calendar-loading,.calendar-error,.calendar-empty{
min-height:150px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
color:#76828c;
font-size:11px;
}
.calendar-error{color:#d28a90;padding:24px;text-align:center}
.calendar-empty{padding:28px;text-align:center}
.calendar-spinner{
width:18px;height:18px;border-radius:50%;
border:2px solid #263038;border-top-color:#7fbba4;
animation:tmtCalendarSpin .8s linear infinite
}
@keyframes tmtCalendarSpin{to{transform:rotate(360deg)}}
.calendar-event-list{width:100%}
.calendar-day-group+.calendar-day-group{border-top:1px solid #1b2329}
.calendar-day-head{
min-height:38px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 16px;
background:#0b1013;
border-bottom:1px solid #1b2329;
}
.calendar-day-head strong{font-size:11px;color:#c9d1d7}
.calendar-day-head span{font-size:9px;color:#66727c}
.calendar-table-head,.calendar-event-row{
display:grid;
grid-template-columns:78px 72px 92px minmax(230px,1fr) 95px 95px 95px;
align-items:center;
gap:0;
}
.calendar-table-head{
min-height:32px;
padding:0 16px;
border-bottom:1px solid #192127;
color:#5f6c76;
font-size:8px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
}
.calendar-event-row{
min-height:50px;
padding:0 16px;
border-bottom:1px solid #171e23;
transition:background .15s ease,opacity .15s ease;
}
.calendar-event-row:last-child{border-bottom:0}
.calendar-event-row:hover{background:#0d1216}
.calendar-event-row.is-past{opacity:.58}
.calendar-event-row.is-next{
background:linear-gradient(90deg,rgba(93,154,130,.055),transparent 44%);
box-shadow:inset 2px 0 0 rgba(111,178,151,.38);
}
.calendar-time{color:#aeb7be;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.calendar-currency{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;height:23px;
border:1px solid #273139;
border-radius:6px;
background:#0f1418;
color:#c1cad0;
font-size:9px;font-weight:800;letter-spacing:.04em
}
.calendar-impact-badge{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
width:max-content;
min-width:66px;
height:23px;
padding:0 8px;
border:1px solid transparent;
border-radius:999px;
font-size:8px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.05em;
}
.calendar-impact-badge::before{content:"";width:6px;height:6px;border-radius:50%}
.calendar-impact-badge.high{color:#c89196;background:rgba(178,94,103,.075);border-color:rgba(201,123,130,.20)}
.calendar-impact-badge.high::before{background:#c97b82}
.calendar-impact-badge.medium{color:#c2aa7a;background:rgba(177,143,77,.07);border-color:rgba(196,165,106,.18)}
.calendar-impact-badge.medium::before{background:#c4a56a}
.calendar-impact-badge.low{color:#88939c;background:rgba(130,142,152,.055);border-color:rgba(130,142,152,.15)}
.calendar-impact-badge.low::before{background:#7c8791}
.calendar-impact-badge.holiday{color:#7b8790;background:rgba(120,132,142,.045);border-color:rgba(120,132,142,.12)}
.calendar-impact-badge.holiday::before{background:#68737c}
.calendar-event-title{min-width:0;padding-right:14px;color:#d9dfe4;font-size:10px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-value{color:#aeb7be;font-size:10px;font-weight:650;font-variant-numeric:tabular-nums}
.calendar-value.muted{color:#69757f;font-weight:550}
.calendar-source-note{
display:flex;
justify-content:space-between;
gap:16px;
margin-top:9px;
color:#59656f;
font-size:8px;
line-height:1.45;
}
.calendar-source-note span:first-child{color:#78848e;font-weight:700}
@media(max-width:1050px){
.calendar-toolbar{align-items:flex-start;flex-direction:column}
.calendar-table-head,.calendar-event-row{grid-template-columns:68px 62px 82px minmax(190px,1fr) 82px 82px 82px}
}
@media(max-width:800px){
.calendar-card{overflow:auto}
.calendar-event-list{min-width:780px}
.calendar-source-note{flex-direction:column;gap:4px}
.calendar-workspace-head{align-items:flex-start;gap:12px}
}
@media(max-width:520px){
.calendar-range-tabs,.calendar-impact-tabs{width:100%}
.calendar-range-tabs button,.calendar-impact-tabs button{flex:1;padding:0 7px}
.calendar-meta-row{align-items:flex-start;flex-direction:column;gap:3px}
}
/* =========================================================
v40.18 — Calendar readability + persistent multi-currency selection
========================================================= */
.calendar-range-tabs button,.calendar-impact-tabs button{
color:#8d99a4;
font-size:11px;
font-weight:750;
}
.calendar-range-tabs button.selected,.calendar-impact-tabs button.selected{
color:#edf8f4;
}
.calendar-impact-dot{width:7px;height:7px}
.calendar-impact-dot.high{background:#df8992;box-shadow:0 0 8px rgba(223,137,146,.14)}
.calendar-impact-dot.medium{background:#d9b86f;box-shadow:0 0 8px rgba(217,184,111,.12)}
.calendar-impact-dot.low{background:#91a0ac;box-shadow:0 0 7px rgba(145,160,172,.10)}
.calendar-currency-row button{
height:31px;
min-width:46px;
color:#87939d;
font-size:10px;
font-weight:750;
}
.calendar-currency-row button:hover{color:#d7e0e6}
.calendar-currency-row button.selected{
color:#d9f5ea;
border-color:#3b6a56;
background:linear-gradient(180deg,rgba(42,103,79,.34),rgba(18,58,43,.30));
box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 0 0 1px rgba(136,224,191,.025);
}
.calendar-period-label{font-size:12px;color:#dbe2e7}
.calendar-timezone-label,.calendar-updated-label{color:#7d8993;font-size:9.5px}
.calendar-day-head{min-height:41px}
.calendar-day-head strong{font-size:12px;color:#e0e6ea;font-weight:750}
.calendar-day-head span{font-size:9.5px;color:#7a8791}
.calendar-table-head{
min-height:34px;
color:#74818b;
font-size:8.5px;
letter-spacing:.085em;
}
.calendar-event-row{min-height:54px}
.calendar-event-row.is-past{opacity:.76}
.calendar-event-row:hover{background:#0f1519}
.calendar-time{color:#c4cdd3;font-size:11px;font-weight:700}
.calendar-currency{
width:40px;
height:24px;
color:#d1d9de;
font-size:10px;
border-color:#2e3a42;
background:#11171b;
}
.calendar-impact-badge{
min-width:72px;
height:25px;
padding:0 9px;
font-size:9px;
font-weight:850;
letter-spacing:.055em;
}
.calendar-impact-badge::before{width:7px;height:7px}
.calendar-impact-badge.high{
color:#e7a5ab;
background:rgba(183,83,94,.115);
border-color:rgba(223,137,146,.31);
}
.calendar-impact-badge.high::before{background:#df8992;box-shadow:0 0 7px rgba(223,137,146,.15)}
.calendar-impact-badge.medium{
color:#dfc48b;
background:rgba(171,132,55,.105);
border-color:rgba(217,184,111,.28);
}
.calendar-impact-badge.medium::before{background:#d9b86f;box-shadow:0 0 7px rgba(217,184,111,.13)}
.calendar-impact-badge.low{
color:#aab7c1;
background:rgba(112,132,147,.085);
border-color:rgba(145,160,172,.23);
}
.calendar-impact-badge.low::before{background:#91a0ac}
.calendar-impact-badge.holiday{
color:#98a5ae;
background:rgba(120,132,142,.07);
border-color:rgba(145,158,168,.18);
}
.calendar-event-title{
color:#e3e8ec;
font-size:11px;
font-weight:675;
}
.calendar-value{color:#c2cbd1;font-size:11px;font-weight:650}
.calendar-value.muted{color:#7e8a94;font-weight:575}
/* =========================================================
v40.19 — Calendar: brighter premium readability + impact focus
========================================================= */
.calendar-workspace-head h1{color:#f4f7f9}
.calendar-workspace-head p{color:#9aa5ae}
.calendar-period-label{color:#f0f4f6!important}
.calendar-timezone-label,.calendar-updated-label{color:#929da6!important}
.calendar-day-head strong{color:#f3f6f8!important}
.calendar-day-head span{color:#919ca5!important}
.calendar-table-head{
color:#94a0aa!important;
font-size:9px!important;
}
.calendar-event-row{min-height:56px}
.calendar-event-row.is-past{opacity:.88!important}
.calendar-time{
color:#e8edf0!important;
font-size:11.5px!important;
font-weight:750!important;
}
.calendar-currency{
color:#eef3f5!important;
font-size:10.5px!important;
font-weight:850!important;
border-color:#35434c!important;
background:#12191e!important;
}
.calendar-event-title{
color:#f2f5f7!important;
font-size:11.5px!important;
font-weight:700!important;
}
.calendar-value{
color:#e3e9ed!important;
font-size:11.5px!important;
font-weight:700!important;
}
.calendar-value.muted{color:#97a2aa!important;font-weight:600!important}
.calendar-impact-badge{
min-width:76px!important;
height:26px!important;
font-size:9.5px!important;
font-weight:900!important;
}
.calendar-impact-badge.high{
color:#ffd4d8!important;
background:rgba(203,70,84,.17)!important;
border-color:rgba(247,111,124,.46)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 0 12px rgba(221,73,89,.055)!important;
}
.calendar-impact-badge.high::before{
background:#f06f7b!important;
box-shadow:0 0 8px rgba(240,111,123,.28)!important;
}
.calendar-impact-badge.medium{
color:#ffe3a7!important;
background:rgba(183,132,38,.17)!important;
border-color:rgba(232,188,91,.45)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 0 11px rgba(217,172,73,.045)!important;
}
.calendar-impact-badge.medium::before{
background:#e9bd61!important;
box-shadow:0 0 8px rgba(233,189,97,.24)!important;
}
.calendar-impact-badge.low{
color:#d4dce2!important;
background:rgba(113,132,146,.11)!important;
border-color:rgba(158,174,186,.27)!important;
}
.calendar-impact-badge.low::before{background:#a5b2bc!important}
.calendar-impact-badge.holiday{color:#b8c2c9!important}
.calendar-impact-tabs button{font-size:11px!important}
.calendar-impact-tabs button[data-calendar-impact="high"].selected{
color:#ffd9dc!important;
background:linear-gradient(180deg,rgba(196,64,78,.25),rgba(109,34,44,.20))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 14px rgba(220,74,89,.07)!important;
}
.calendar-impact-tabs button[data-calendar-impact="medium"].selected{
color:#ffe5ad!important;
background:linear-gradient(180deg,rgba(184,134,42,.25),rgba(102,74,23,.20))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 14px rgba(219,173,75,.06)!important;
}
.calendar-impact-tabs button[data-calendar-impact="low"].selected{
color:#e4ebef!important;
background:linear-gradient(180deg,rgba(111,132,147,.22),rgba(59,72,82,.18))!important;
}
.calendar-impact-tabs button[data-calendar-impact="all"].selected{
color:#e9fff7!important;
background:linear-gradient(180deg,rgba(52,116,90,.27),rgba(26,72,55,.22))!important;
}
.calendar-impact-dot.high{background:#f06f7b!important;box-shadow:0 0 9px rgba(240,111,123,.28)!important}
.calendar-impact-dot.medium{background:#e9bd61!important;box-shadow:0 0 9px rgba(233,189,97,.24)!important}
.calendar-impact-dot.low{background:#a5b2bc!important}
.calendar-currency-row button{color:#9da8b1!important}
.calendar-currency-row button.selected{
color:#effff8!important;
border-color:#4b806a!important;
background:linear-gradient(180deg,rgba(45,116,88,.40),rgba(20,67,49,.34))!important;
}
/* =========================================================
v40.20 — Calendar readability: regular white type + stronger impact focus
========================================================= */
.calendar-day-head strong{
color:#f5f7f8!important;
font-size:12.5px!important;
font-weight:500!important;
}
.calendar-table-head{
color:#a7b0b7!important;
font-size:9.5px!important;
font-weight:500!important;
}
.calendar-event-row{
min-height:58px!important;
}
.calendar-event-row.is-past{
opacity:.92!important;
}
.calendar-time{
color:#f1f4f6!important;
font-size:12.5px!important;
font-weight:400!important;
}
.calendar-currency{
color:#f4f7f8!important;
font-size:11.5px!important;
font-weight:500!important;
}
.calendar-event-title{
color:#f7f9fa!important;
font-size:12.5px!important;
font-weight:400!important;
}
.calendar-value{
color:#f1f4f6!important;
font-size:12.5px!important;
font-weight:400!important;
}
.calendar-value.muted{
color:#aab4bc!important;
font-weight:400!important;
}
.calendar-impact-badge{
font-size:10.5px!important;
font-weight:500!important;
letter-spacing:.025em!important;
}
.calendar-impact-badge.high{
color:#ffe0e3!important;
background:rgba(215,64,80,.22)!important;
border-color:rgba(255,111,124,.58)!important;
}
.calendar-impact-badge.medium{
color:#ffe7ae!important;
background:rgba(195,139,34,.22)!important;
border-color:rgba(243,194,87,.56)!important;
}
.calendar-impact-tabs button{
font-weight:500!important;
}
.calendar-impact-tabs button[data-calendar-impact="high"].selected{
color:#fff0f2!important;
background:linear-gradient(180deg,rgba(213,61,78,.36),rgba(122,31,43,.30))!important;
border-color:rgba(245,95,110,.48)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 16px rgba(229,68,85,.10)!important;
}
.calendar-impact-tabs button[data-calendar-impact="medium"].selected{
color:#fff0c9!important;
background:linear-gradient(180deg,rgba(202,146,40,.36),rgba(119,82,19,.29))!important;
border-color:rgba(238,185,76,.46)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 16px rgba(224,171,66,.09)!important;
}
/* =========================================================
v40.25 — Economic Calendar event analysis
========================================================= */
.calendar-event-clickable{cursor:pointer;position:relative}
.calendar-event-clickable::after{
content:"›";
position:absolute;
right:9px;
top:50%;
transform:translateY(-50%);
color:#43515b;
font-size:17px;
opacity:0;
transition:opacity .16s ease,color .16s ease;
}
.calendar-event-clickable:hover::after{opacity:1;color:#91a39d}
.calendar-event-clickable:focus-visible{
outline:1px solid rgba(136,224,191,.45);
outline-offset:-2px;
}
.calendar-analysis-modal{
width:min(980px,96vw);
max-height:min(900px,92vh);
overflow:auto;
padding:0;
border-color:#26333a;
background:
radial-gradient(circle at 82% 0%,rgba(24,220,160,.045),transparent 28%),
linear-gradient(180deg,#0b0f12,#080b0e);
}
.calendar-analysis-head{
margin:0;
padding:22px 24px 18px;
border-bottom:1px solid #1d272d;
align-items:flex-start;
}
.calendar-analysis-head h2{margin:5px 0 4px;font-size:21px}
.calendar-analysis-head p{margin:0;color:#86929c;font-size:11px}
.calendar-analysis-kicker{
display:inline-flex;
color:#89dbc0;
font-size:9px;
font-weight:800;
letter-spacing:.14em;
}
.calendar-analysis-event-snapshot{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:16px 24px;
border-bottom:1px solid #192229;
background:rgba(255,255,255,.012);
}
.calendar-analysis-snapshot-main{display:flex;align-items:center;gap:10px;min-width:0}
.calendar-analysis-snapshot-main>strong{
min-width:0;
color:#f1f4f6;
font-size:13px;
font-weight:600;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.calendar-analysis-snapshot-values{display:flex;gap:8px;flex-shrink:0}
.calendar-analysis-snapshot-values>div{
min-width:84px;
padding:8px 10px;
border:1px solid #202b31;
border-radius:8px;
background:#0a0f12;
}
.calendar-analysis-snapshot-values span{
display:block;color:#72808a;font-size:8px;text-transform:uppercase;letter-spacing:.08em
}
.calendar-analysis-snapshot-values b{
display:block;margin-top:4px;color:#e8edf0;font-size:12px;font-weight:650
}
.calendar-analysis-instrument-wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:13px 24px;
border-bottom:1px solid #192229;
}
.calendar-analysis-instrument-wrap>span{
color:#7f8b95;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.09em
}
.calendar-analysis-instrument-tabs{
display:flex;
overflow:hidden;
border:1px solid #26333a;
border-radius:8px;
background:#0a0e11;
}
.calendar-analysis-instrument-tabs button{
min-width:82px;height:35px;padding:0 12px;border:0;border-right:1px solid #26333a;
background:transparent;color:#8d99a3;font:700 10px/1 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer
}
.calendar-analysis-instrument-tabs button:last-child{border-right:0}
.calendar-analysis-instrument-tabs button:hover{background:#10171b;color:#dce5ea}
.calendar-analysis-instrument-tabs button.selected{
color:#e6fff6;
background:linear-gradient(180deg,rgba(24,220,160,.18),rgba(10,98,72,.15));
}
.calendar-analysis-body{padding:18px 24px 22px}
.calendar-analysis-loading{
min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
color:#91a0aa;font-size:12px
}
.calendar-analysis-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:12px}
.calendar-analysis-bias-card,.calendar-analysis-context-card{
border:1px solid #202b31;border-radius:12px;background:#0a0f12;padding:16px
}
.calendar-analysis-bias-card.long{border-color:rgba(136,224,191,.27);background:linear-gradient(135deg,rgba(65,129,105,.13),#0a0f12 62%)}
.calendar-analysis-bias-card.short{border-color:rgba(240,141,149,.28);background:linear-gradient(135deg,rgba(123,55,62,.14),#0a0f12 62%)}
.calendar-analysis-bias-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.calendar-analysis-bias-top>div:first-child>span{
display:block;color:#74818b;font-size:8px;font-weight:800;letter-spacing:.11em
}
.calendar-analysis-bias-top strong{
display:block;margin-top:7px;font-size:27px;line-height:1;letter-spacing:-.02em
}
.calendar-analysis-bias-card.long .calendar-analysis-bias-top strong{color:#8edfc1}
.calendar-analysis-bias-card.short .calendar-analysis-bias-top strong{color:#eb9299}
.calendar-analysis-bias-card.neutral .calendar-analysis-bias-top strong{color:#d8dfe4}
.calendar-analysis-bias-top strong small{font-size:13px;color:#adb7be;font-weight:650}
.calendar-analysis-confidence{text-align:right}
.calendar-analysis-confidence b{display:block;color:#eef3f6;font-size:20px}
.calendar-analysis-confidence span{display:block;margin-top:2px;color:#6e7b85;font-size:8px;text-transform:uppercase}
.calendar-analysis-meter{
height:5px;margin:16px 0 10px;border-radius:999px;background:#151d22;overflow:hidden
}
.calendar-analysis-meter i{display:block;height:100%;border-radius:inherit;background:#6f9185}
.calendar-analysis-bias-card.long .calendar-analysis-meter i{background:#72bca1}
.calendar-analysis-bias-card.short .calendar-analysis-meter i{background:#c56f76}
.calendar-analysis-bias-meta{display:flex;justify-content:space-between;gap:10px;color:#7f8b94;font-size:9px}
.calendar-analysis-bias-meta b{color:#b8c2c8}
.calendar-analysis-context-card h3,.calendar-analysis-section h3{margin:0;color:#edf2f5;font-size:12px}
.calendar-analysis-context-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:13px}
.calendar-analysis-context-grid>div,.calendar-analysis-history-grid>div{
padding:9px;border:1px solid #1c272d;border-radius:8px;background:#0c1215
}
.calendar-analysis-context-grid span,.calendar-analysis-history-grid span{
display:block;color:#6f7d87;font-size:8px;text-transform:uppercase;letter-spacing:.05em
}
.calendar-analysis-context-grid b,.calendar-analysis-history-grid b{
display:block;margin-top:5px;color:#dde4e8;font-size:11px;font-weight:650
}
.calendar-analysis-context-card>p,.calendar-analysis-note{
margin:12px 0 0;color:#818d96;font-size:10px;line-height:1.55
}
.calendar-analysis-section{
margin-top:12px;padding:16px;border:1px solid #1f2a30;border-radius:12px;background:#090e11
}
.calendar-analysis-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.calendar-analysis-section-head span{color:#6b7882;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.calendar-analysis-reasons{margin:0;padding-left:18px;color:#b8c1c7;font-size:10.5px;line-height:1.7}
.calendar-analysis-history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.calendar-analysis-scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.calendar-analysis-scenario{
padding:12px;border:1px solid #202a30;border-radius:9px;background:#0b1013
}
.calendar-analysis-scenario>div span{display:block;color:#72808a;font-size:8px;text-transform:uppercase;letter-spacing:.06em}
.calendar-analysis-scenario>div b{display:block;margin-top:4px;color:#d9e0e4;font-size:10px;font-weight:600}
.calendar-analysis-scenario>strong{display:block;margin-top:12px;font-size:12px}
.calendar-analysis-scenario>strong.long{color:#8edfc1}
.calendar-analysis-scenario>strong.short{color:#eb9299}
.calendar-analysis-scenario>strong.neutral{color:#c7d0d6}
.calendar-analysis-scenario p{margin:7px 0 0;color:#7c8992;font-size:9px;line-height:1.45}
.calendar-analysis-footer-row{
display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;color:#65727c;font-size:8px
}
.calendar-analysis-error{
min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
color:#aab4bb;padding:24px
}
.calendar-analysis-error strong{color:#e5eaed}
.calendar-analysis-error p{max-width:520px;color:#87939c;line-height:1.55}
.calendar-analysis-disclaimer{
padding:12px 24px 16px;border-top:1px solid #182127;color:#64717b;font-size:8.5px;line-height:1.5
}
@media(max-width:760px){
.calendar-analysis-grid{grid-template-columns:1fr}
.calendar-analysis-event-snapshot{align-items:flex-start;flex-direction:column}
.calendar-analysis-snapshot-values{width:100%}
.calendar-analysis-snapshot-values>div{flex:1;min-width:0}
.calendar-analysis-instrument-wrap{align-items:flex-start;flex-direction:column}
.calendar-analysis-instrument-tabs{width:100%}
.calendar-analysis-instrument-tabs button{flex:1;min-width:0;padding:0 6px}
.calendar-analysis-context-grid,.calendar-analysis-history-grid{grid-template-columns:repeat(2,1fr)}
.calendar-analysis-scenarios{grid-template-columns:1fr}
}
/* =========================================================
v40.28 — RU / UA / EN language switch
========================================================= */
.tmt-language-switch{
display:inline-flex;
align-items:center;
overflow:hidden;
border:1px solid #26333a;
border-radius:8px;
background:#090e11;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.tmt-language-switch button{
min-width:34px;
height:30px;
padding:0 9px;
border:0;
border-right:1px solid #26333a;
background:transparent;
color:#73808b;
font:800 9px/1 Inter,ui-sans-serif,system-ui,sans-serif;
letter-spacing:.06em;
cursor:pointer;
transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.tmt-language-switch button:last-child{border-right:0}
.tmt-language-switch button:hover{color:#dfe7eb;background:#10171b}
.tmt-language-switch button.selected{
color:#dff8ee;
background:linear-gradient(180deg,rgba(24,220,160,.18),rgba(10,98,72,.14));
box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.auth-gate-brand{position:relative}
.auth-language-switch{margin-left:auto;flex-shrink:0}
.top-language-switch{flex-shrink:0}
@media(max-width:720px){
.top-language-switch{display:none}
.auth-language-switch button{min-width:32px;height:28px}
}