/* Trading Journal V3 — Traivend-Crypto-Design (dunkel, grün) */
:root{
  --c-accent:#30C431; --c-accent-2:#219826; --c-accent-3:#63D963; --c-head:#78DB76;
  --c-bg:#0c0c12; --c-bg-soft:#16161f; --c-band:#13131b; --c-line:#2a2a36;
  --c-text:#d7d7df; --c-muted:#8b8b97; --c-tri-back:#1C6B1F;
  --c-red:#c0453e; --c-red-soft:#3a1c1c; --c-green-soft:#142b16; --c-amber:#d4a13a;
  --grad:linear-gradient(90deg,#63D963,#30C431,#219826);
  --font-head:'BankGothic','Transducer',system-ui,sans-serif;
  --font-text:'Transducer',system-ui,sans-serif;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--c-bg);color:var(--c-text);font-family:var(--font-text);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;font-weight:500;color:var(--c-head)}
a{color:var(--c-accent3,#63D963)}
em{color:var(--c-accent);font-style:normal;font-weight:600}
.pos{color:var(--c-accent)} .neg{color:var(--c-red)} .zero{color:var(--c-muted)}
.hidden{display:none!important}
.muted{color:var(--c-muted)}
.small{font-size:12px}

/* ---------- Grundgerüst ---------- */
#app{max-width:1560px;margin:0 auto;padding:14px 20px 96px}
header.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0 14px}
.logo{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.24em;font-size:15px;color:#fff;white-space:nowrap}
.logo b{color:var(--c-accent);font-weight:500}
.logo.brand{font-size:24px;letter-spacing:.22em;display:inline-flex;align-items:center;gap:12px}
.logoimg{height:40px;width:auto;display:block}
@media (max-width:720px){.logo.brand{font-size:16px;letter-spacing:.16em;gap:8px}.logoimg{height:28px}}
.top .spacer{flex:1}

.btn{background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:9px;color:var(--c-text);
  padding:7px 13px;cursor:pointer;transition:border-color .15s}
.btn:hover{border-color:var(--c-accent)}
.btn.primary{background:var(--c-accent);border-color:var(--c-accent);color:#06130a;font-weight:600}
.btn.danger{border-color:var(--c-red);color:var(--c-red)}
.btn.small{padding:4px 9px;font-size:12.5px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:default}

select,input[type=text],input[type=password],input[type=number],input[type=date],textarea{
  background:var(--c-band);border:1px solid var(--c-line);border-radius:9px;padding:7px 10px;color:var(--c-text)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--c-accent)}
input:disabled{opacity:.45;cursor:not-allowed}
textarea{width:100%;min-height:90px;resize:vertical}
label.fld{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--c-muted)}

.card{background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:var(--radius);border-top:3px solid var(--c-accent);padding:16px}

/* ---------- Navigation ---------- */
nav.views{display:flex;gap:8px;margin:2px 0 14px;flex-wrap:wrap}
nav.views button{background:none;border:1px solid var(--c-line);border-radius:999px;padding:6px 16px;color:var(--c-muted);cursor:pointer}
nav.views button.active{border-color:var(--c-accent);color:var(--c-accent)}

/* ---------- Warnbanner ---------- */
.banner{border:1px solid var(--c-red);background:var(--c-red-soft);border-radius:10px;padding:9px 13px;margin-bottom:12px;font-size:13.5px}
.banner.warn{border-color:var(--c-amber);background:#2b2413;color:#e8d29a}

/* ---------- Kalender ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:12px;padding:10px 12px;position:relative}
.kpieye{position:absolute;top:5px;right:7px;background:none;border:none;cursor:pointer;font-size:11px;
  opacity:0;transition:opacity .15s;filter:grayscale(1);padding:2px}
.kpi:hover .kpieye{opacity:.55}
.kpieye:hover{opacity:1!important}
.kpieye.censored{opacity:.5}
@media (hover:none){.kpieye{opacity:.4}}
.kpi .v{font-size:20px;font-weight:600;font-family:var(--font-head);letter-spacing:.02em}
.kpi .l{font-size:11.5px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.08em}

.calhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.calhead h2{font-size:19px;flex:1;text-align:center}
.calgrid{display:grid;grid-template-columns:repeat(5,1fr) 12px repeat(2,1fr) 14px minmax(64px,.9fr);gap:5px}
.gapcol{pointer-events:none}
.calgrid .dow{font-size:11px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.08em;text-align:center;padding:2px 0}
.daycell{min-height:86px;background:var(--c-band);border:1px solid var(--c-line);border-radius:10px;padding:6px 8px;
  cursor:pointer;position:relative;display:flex;flex-direction:column;transition:border-color .12s}
.daycell:hover{border-color:var(--c-accent)}
.daycell.out{opacity:.32;cursor:default}
.daycell.pos{background:var(--c-green-soft);border-color:#1d4a20}
.daycell.neg{background:var(--c-red-soft);border-color:#4a2020}
.daycell.today{outline:2px solid #E6C94C}
.modalwrap{position:relative;width:min(960px,100%);display:flex;justify-content:center}
.modalwrap .modal{width:100%}
.navarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:41;
  background:var(--c-bg-soft);border:1px solid var(--c-line);color:var(--c-text);
  border-radius:50%;width:38px;height:38px;font-size:16px;cursor:pointer;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.5)}
.navarrow:hover{border-color:var(--c-accent);color:var(--c-accent)}
.navarrow.prev{left:-17px}.navarrow.next{right:-17px}
@media (max-width:720px){.navarrow{width:30px;height:30px;font-size:13px}.navarrow.prev{left:-6px}.navarrow.next{right:-6px}}
.daycell.slcheck{background:#2b2144;border-color:#A98BDB}
table.trades tr.slcheck td{background:#A98BDB14}
table.trades tr.slcheck:hover td{background:#A98BDB26}
.daycell .dnum{font-size:11px;color:var(--c-muted)}
.daycell .main{font-size:13.5px;font-weight:700;margin-top:2px}
.daycell .sub{font-size:10px;color:var(--c-muted)}
.daycell .notedot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--c-accent-3)}
.weekcell{min-height:86px;border-radius:10px;border:1px dashed var(--c-line);padding:5px 7px;display:flex;flex-direction:column;justify-content:center}
.weekcell .r{font-weight:700;font-size:18px}
.weekcell .s{font-size:12px;color:var(--c-muted)}

.minigrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media (max-width:820px){.minigrid{grid-template-columns:1fr}}
.rulebar{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px}
.rulebar .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rulebar .track{width:120px;height:7px;border-radius:4px;background:#20202b;overflow:hidden;flex-shrink:0}
.rulebar .fillbar{height:100%;background:var(--grad);border-radius:4px}
.rulebar .pct{width:74px;text-align:right;color:var(--c-muted);font-size:12px;flex-shrink:0}

/* ---------- Modale ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,4,8,.72);display:flex;align-items:center;justify-content:center;z-index:40;padding:14px}
.overlay:not(.hidden){animation:ovfade .15s ease-out}
.overlay:not(.hidden) .modal{animation:pop .18s ease-out}
@keyframes ovfade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
/* Dunkle Scrollbalken */
*{scrollbar-width:thin;scrollbar-color:#2f2f3c var(--c-bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--c-bg)}
::-webkit-scrollbar-thumb{background:#2f2f3c;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#3d3d4e}
.modal{background:var(--c-bg-soft);border:1px solid var(--c-line);border-top:3px solid var(--c-accent);border-radius:var(--radius);
  width:min(960px,100%);max-height:92vh;overflow:auto;padding:18px}
.modal h3{margin-bottom:12px;font-size:15px}
.modal .close{float:right;background:none;border:none;color:var(--c-muted);font-size:22px;cursor:pointer;line-height:1}

table.trades{width:100%;border-collapse:collapse;font-size:13px;min-width:660px}
.tablewrap{overflow-x:auto}
table.trades th{color:var(--c-muted);font-weight:500;text-align:left;padding:5px 8px;border-bottom:1px solid var(--c-line);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
table.trades td{padding:6px 8px;border-bottom:1px solid #20202b;white-space:nowrap}
table.trades tr.row{cursor:pointer}
table.trades tr.row:hover td{background:#1b1b26}
table.trades tr.sum td{font-weight:700;border-bottom:none}
.tagchip{display:inline-block;background:#20301f;border:1px solid var(--c-tri-back);color:var(--c-accent-3);
  border-radius:999px;padding:1px 8px;font-size:11px;margin:1px 2px 1px 0}
.norhint{cursor:help;text-decoration:underline dotted var(--c-muted);text-underline-offset:3px}
.flag{display:inline-block;font-size:10.5px;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.flag.check{background:#33270f;color:var(--c-amber);border:1px solid #6b5420}

/* Trade-Detail */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:14px}
.dfield .l{font-size:11px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.06em}
.dfield .v{font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.shots{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.shots .shot{position:relative}
.shots img{height:86px;border-radius:8px;border:1px solid var(--c-line);cursor:pointer;display:block}
.shots .del{position:absolute;top:-6px;right:-6px;background:var(--c-red);border:none;color:#fff;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:11px}
.dropzone{border:2px dashed var(--c-line);border-radius:10px;padding:14px;text-align:center;color:var(--c-muted);font-size:13px;margin-top:8px}
.dropzone.drag{border-color:var(--c-accent);color:var(--c-accent)}

/* ---------- Auswertung ---------- */
.statgrid{display:grid;grid-template-columns:1fr;gap:14px}
table.stats{width:100%;border-collapse:collapse;font-size:13.5px}
table.stats th{color:var(--c-muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--c-line);font-size:11.5px;text-transform:uppercase}
table.stats td{padding:7px 8px;border-bottom:1px solid #20202b}
#equity{width:100%;height:240px}
.filterrow{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:12px}

/* ---------- Einstellungen ---------- */
.setgrid{display:grid;gap:14px}
.acctrow{display:grid;grid-template-columns:1.4fr 1fr .8fr .9fr .6fr auto;gap:8px;align-items:end;padding:8px 0;border-bottom:1px solid #20202b}
.acctrow .conn{font-size:11px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.05em;grid-column:1/-1;margin-top:2px}
.fab{position:fixed;bottom:16px;z-index:30;border-radius:999px;padding:11px 20px;box-shadow:0 4px 18px rgba(0,0,0,.55)}
.fab.fabright{right:18px}
.fab.fableft{left:18px}
.fab.active{border-color:var(--c-accent);color:var(--c-accent)}
@media (max-width:720px){.fab{padding:9px 14px;font-size:13px;bottom:10px}.fab.fabright{right:8px}.fab.fableft{left:8px}}
.kpibar{display:flex;justify-content:flex-end;margin-bottom:4px}
.kpitoggle{background:none;border:none;color:var(--c-muted);cursor:pointer;font-size:12px}
.kpitoggle:hover{color:var(--c-accent)}
.taglist{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.taglist .tagchip{font-size:12.5px;padding:3px 10px;cursor:default}
.taglist .tagchip button{background:none;border:none;color:inherit;cursor:pointer;margin-left:4px}
#tagList{display:block}
details summary{cursor:pointer;list-style:none;user-select:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--c-accent);transition:transform .15s}
details[open] summary::before{transform:rotate(90deg)}
.tagrow{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid #20202b;width:100%}
.tagrow .tagchip{min-width:130px;text-align:center}
.tagrow .dots{display:flex;gap:5px;flex-wrap:wrap}
.colordot{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.colordot.sel{border-color:#fff;transform:scale(1.15)}
.tagrow .t-del{margin-left:auto}
.rulerow{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;font-size:13.5px}
.rulerow input{width:16px;height:16px;accent-color:var(--c-accent);cursor:pointer}

/* ---------- Login ---------- */
#login{position:fixed;inset:0;background:var(--c-bg);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
#login .card{width:min(400px,100%);text-align:center}
#login .logo{display:block;margin-bottom:14px;font-size:17px}
#login input{width:100%;margin:8px 0;text-align:center}
#login .err{color:var(--c-red);font-size:13px;min-height:18px;margin-top:4px}

/* ---------- Mobil ---------- */
@media (max-width:720px){
  #app{padding:10px 8px 70px}
  .daycell{min-height:56px;padding:3px 5px;border-radius:8px}
  .daycell .main{font-size:11.5px}
  .daycell .sub{font-size:8.5px}
  .daycell .dnum{font-size:9px}
  .calhead h2{font-size:15px}
  .calgrid{gap:3px;grid-template-columns:repeat(5,1fr) 5px repeat(2,1fr) 6px minmax(44px,.8fr)}
  .weekcell{min-height:56px;padding:3px 5px}
  .weekcell .r{font-size:13px}.weekcell .s{font-size:9.5px}
  .kpi .v{font-size:16px}
  .modal{padding:12px;max-height:96vh;border-radius:10px}
  .acctrow{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  header.top{gap:8px}
  .logo{font-size:12px;letter-spacing:.18em}
}