/* ===== Tokens ===== */
:root{
  --bg-0:#0f0705;
  --bg-1:#1a0d09;
  --panel:#1e0f0c;
  --panel-2:#2a1610;
  --border:rgba(255,138,61,0.16);
  --border-strong:rgba(255,138,61,0.32);
  --text:#fff1e6;
  --text-dim:#c99a86;
  --accent:#ff6a3d;
  --accent-2:#ff2e7e;
  --accent-3:#00e5ff;
  --gold:#ffd23f;
  --good:#3ddc84;
  --bad:#ff4d6d;
  --shadow-deep: 0 30px 60px -20px rgba(0,0,0,0.75), 0 0 0 1px var(--border);
  --pop-gradient: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

/* ===== Scrollbars ===== */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(0,0,0,0.3);
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: rgba(0,0,0,0.25); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--accent), var(--accent-2));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{ background: var(--accent-2); }
::-webkit-scrollbar-button{ display: none; height: 0; width: 0; }
::-webkit-scrollbar-corner{ background: transparent; }
body{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,106,61,0.24), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(255,46,126,0.18), transparent 55%),
    radial-gradient(900px 500px at 50% 110%, rgba(0,229,255,0.10), transparent 55%),
    var(--bg-0);
  color:var(--text);
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow-x:hidden;
}

/* ===== Background 3D grid floor ===== */
.scene{
  position:fixed;
  inset:0;
  z-index:-1;
  perspective:600px;
  overflow:hidden;
}
.grid-floor{
  position:absolute;
  left:-50%;
  right:-50%;
  bottom:-10%;
  height:70%;
  background-image:
    linear-gradient(rgba(0,229,255,0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.3) 1px, transparent 1px);
  background-size:60px 60px;
  transform: rotateX(75deg);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent 80%);
  animation: floorScroll 6s linear infinite;
  opacity:0.5;
}
@keyframes floorScroll{
  from{ background-position: 0 0; }
  to{ background-position: 0 60px; }
}

/* ===== Brand watermark ===== */
.brand-watermark{
  position:fixed;
  bottom:22px;
  right:22px;
  z-index:40;
  opacity:0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events:none;
}
.watermark-frame{
  width:68px;height:68px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:3px;
  background:
    linear-gradient(var(--panel-2), var(--panel-2)) content-box,
    conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  box-shadow:
    0 0 22px -2px rgba(255,46,126,0.55),
    0 0 30px -4px rgba(0,229,255,0.4),
    0 8px 20px rgba(0,0,0,0.5);
}
.watermark-logo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

/* ===== Topbar ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:18px 32px;
  backdrop-filter: blur(14px);
  background:rgba(15,7,5,0.55);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.2rem; letter-spacing:0.5px;}
.brand-logo-frame{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  padding:3px;
  background:
    linear-gradient(var(--panel-2), var(--panel-2)) content-box,
    conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  box-shadow:
    0 0 16px -2px rgba(255,46,126,0.6),
    0 0 22px -4px rgba(0,229,255,0.35),
    0 4px 10px rgba(0,0,0,0.4);
}
.brand-logo{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.accent{ color:var(--accent-2); }
.topbar-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.sync-btn{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.sync-btn:disabled{ opacity:0.5; cursor:not-allowed; }
.sync-btn:disabled:hover{ transform:none; box-shadow: 0 4px 0 0 rgba(0,0,0,0.35), 0 8px 16px -6px rgba(0,0,0,0.5); }
.sync-dot{
  width:8px; height:8px; border-radius:50%;
  background:#6b5347;
  flex-shrink:0;
}
.sync-dot.off{ background:#6b5347; }
.sync-dot.busy{ background:var(--gold); animation:syncPulse 1s ease-in-out infinite; }
.sync-dot.on{ background:var(--good); box-shadow:0 0 8px rgba(61,220,132,0.7); }
.sync-dot.error{ background:var(--bad); box-shadow:0 0 8px rgba(255,77,109,0.7); }
@keyframes syncPulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.3; }
}

/* ===== Buttons ===== */
.btn{
  font-family:inherit;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.3px;
  padding:10px 18px;
  border-radius:10px;
  cursor:pointer;
  border:1px solid var(--border-strong);
  background:var(--panel-2);
  color:var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 4px 0 0 rgba(0,0,0,0.35), 0 8px 16px -6px rgba(0,0,0,0.5);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 0 rgba(0,0,0,0.35), 0 14px 22px -6px rgba(0,0,0,0.55);}
.btn:active{ transform: translateY(1px); box-shadow: 0 2px 0 0 rgba(0,0,0,0.35);}
.btn.ghost{ background:rgba(255,255,255,0.03); }
.btn.ghost:hover{ border-color:var(--accent-3); box-shadow: 0 6px 0 0 rgba(0,0,0,0.35), 0 14px 22px -6px rgba(0,229,255,0.35), 0 0 16px -4px rgba(0,229,255,0.5); }
.btn.danger-ghost{ background:rgba(255,77,109,0.08); border-color:rgba(255,77,109,0.35); color:#ffb3c0; }
.btn.primary{
  background:linear-gradient(135deg, var(--accent), #c81f5e);
  border-color:rgba(255,255,255,0.25);
  box-shadow: 0 4px 0 0 rgba(110,20,40,0.9), 0 10px 24px -6px rgba(255,106,61,0.5);
}
.btn.primary:hover{ box-shadow: 0 6px 0 0 rgba(110,20,40,0.9), 0 16px 30px -6px rgba(255,106,61,0.6); }

/* ===== Layout ===== */
.wrap{ max-width:1180px; margin:0 auto; padding:20px 24px 80px; position:relative; z-index:1;}
.hero{ text-align:center; padding:50px 10px 20px; }
.hero h1{
  font-size:3rem;
  margin:0;
  font-weight:900;
  letter-spacing:1px;
  background:linear-gradient(135deg, #fff6ee, #ffb27a 55%, var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 20px 40px rgba(255,106,61,0.3);
}
.hero p{ color:var(--text-dim); font-size:1.05rem; margin-top:8px; }

/* ===== Tabs ===== */
.tabs{
  display:flex;
  gap:6px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;
  overflow-x:auto;
}
.tab-btn{
  font-family:inherit;
  background:transparent;
  border:none;
  color:var(--text-dim);
  font-weight:800;
  font-size:0.95rem;
  letter-spacing:0.3px;
  padding:12px 20px;
  cursor:pointer;
  position:relative;
  white-space:nowrap;
  transition:color 0.15s ease;
}
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ color:var(--text); }
.tab-btn.active::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:-1px;
  height:3px;
  border-radius:3px 3px 0 0;
  background:var(--pop-gradient);
  box-shadow:0 0 12px -2px rgba(255,106,61,0.7);
}
.tab-panel[hidden]{ display:none; }

/* ===== 3D tilt cards ===== */
.tilt-card{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.1s ease-out, box-shadow 0.2s ease;
}

/* ===== Stats grid ===== */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:18px;
  margin:30px 0 40px;
}
.stat-card{
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px 18px;
  box-shadow: var(--shadow-deep);
  position:relative;
  overflow:hidden;
}
.stat-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--pop-gradient);
}
.stat-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), transparent 40%);
  pointer-events:none;
}
.stat-label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); font-weight:700;}
.stat-value{ font-size:1.9rem; font-weight:800; margin-top:6px; }
.stat-value.good{ color:var(--good); }
.stat-value.bad{ color:var(--bad); }
.stat-value.pop-cyan{ color:var(--accent-3); text-shadow:0 0 18px rgba(0,229,255,0.35); }
.stat-value.pop-gold{ color:var(--gold); text-shadow:0 0 18px rgba(255,210,63,0.3); }
.stat-sub{ font-size:0.78rem; color:var(--text-dim); margin-top:4px; }

/* ===== Panels ===== */
.panel{
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px 26px;
  margin-bottom:28px;
  box-shadow: var(--shadow-deep);
  position:relative;
}
.panel::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:20px 20px 0 0;
  background:var(--pop-gradient);
}
.panel-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:20px;}
.panel-head h2{ margin:0; font-size:1.3rem; font-weight:800; }
.panel-hint{ color:var(--text-dim); font-size:0.85rem; }

/* ===== Chart ===== */
.chart-holder{ position:relative; min-height:120px; }

/* ===== Form ===== */
.trade-form{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px 20px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field.wide{ grid-column:1 / -1; }
.field label{ font-size:0.8rem; font-weight:700; color:var(--text-dim); letter-spacing:0.3px;}
.field .optional{ font-weight:400; text-transform:none; color:#8a6153;}
.field input, .field textarea, .field select{
  font-family:inherit;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--border-strong);
  border-radius:10px;
  padding:11px 12px;
  color:var(--text);
  font-size:0.95rem;
  outline:none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--accent);
  box-shadow: 0 0 0 3px rgba(255,106,61,0.2);
}
.field textarea{ min-height:70px; resize:vertical; }

.dir-toggle{ display:flex; gap:8px; }
.dir-btn{
  flex:1;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--border-strong);
  background:rgba(0,0,0,0.25);
  color:var(--text-dim);
  font-weight:700;
  cursor:pointer;
  transition: all 0.15s ease;
}
.dir-btn.long.active{ background:rgba(61,220,132,0.15); border-color:var(--good); color:var(--good); }
.dir-btn.short.active{ background:rgba(255,77,109,0.15); border-color:var(--bad); color:var(--bad); }
.dir-btn.status-btn.active{ background:rgba(255,106,61,0.18); border-color:var(--accent); color:#ffd2b3; }

.form-actions{ display:flex; align-items:center; gap:16px; margin-top:6px;}
.calc-preview{ font-size:0.9rem; font-weight:700; color:var(--text-dim); }
.calc-preview.good{ color:var(--good); }
.calc-preview.bad{ color:var(--bad); }

/* ===== Log table ===== */
.log-controls{ display:flex; gap:10px; }
.log-controls input, .log-controls select{
  background:rgba(0,0,0,0.25);
  border:1px solid var(--border-strong);
  border-radius:10px;
  padding:9px 12px;
  color:var(--text);
  font-family:inherit;
  font-size:0.85rem;
  outline:none;
}
.table-holder{ overflow-x:auto; border-radius:14px; }
table{ width:100%; border-collapse:collapse; min-width:720px; }
thead th{
  text-align:left;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:var(--text-dim);
  padding:10px 12px;
  border-bottom:1px solid var(--border-strong);
}
tbody td{
  padding:12px;
  font-size:0.9rem;
  border-bottom:1px solid var(--border);
}
tbody tr{ transition: background 0.15s ease; }
tbody tr:hover{ background:rgba(255,106,61,0.07); }
.pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:0.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.pill.long{ background:rgba(61,220,132,0.15); color:var(--good); }
.pill.short{ background:rgba(255,77,109,0.15); color:var(--bad); }
.pill.open{ background:rgba(255,106,61,0.18); color:#ffd2b3; }
.pill.closed{ background:rgba(255,255,255,0.08); color:var(--text-dim); }
.pnl-cell.good{ color:var(--good); font-weight:800; }
.pnl-cell.bad{ color:var(--bad); font-weight:800; }
.row-actions{ display:flex; gap:8px; justify-content:flex-end;}
.icon-btn{
  background:transparent;
  border:1px solid var(--border-strong);
  color:var(--text-dim);
  border-radius:8px;
  width:30px; height:30px;
  cursor:pointer;
  font-size:0.9rem;
  transition: all 0.15s ease;
}
.icon-btn:hover{ color:var(--accent-3); border-color:var(--accent-3); }
.icon-btn.del:hover{ color:var(--bad); border-color:var(--bad); }

.empty-state{
  text-align:center;
  color:var(--text-dim);
  padding:40px 10px;
  font-size:0.9rem;
}

/* ===== Calendar ===== */
.cal-nav{ display:flex; align-items:center; gap:12px; }
.cal-month-label{ font-weight:800; font-size:0.95rem; min-width:140px; text-align:center; }
.cal-summary{
  display:flex; gap:20px; flex-wrap:wrap;
  font-size:0.85rem; color:var(--text-dim);
  margin-bottom:18px; padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.cal-summary strong{ color:var(--text); font-size:1rem; }
.cal-summary .good{ color:var(--good); }
.cal-summary .bad{ color:var(--bad); }

.cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}
.cal-dow{
  text-align:center;
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-dim);
  padding-bottom:6px;
  font-weight:700;
}
.cal-day{
  position:relative;
  min-height:70px;
  border-radius:10px;
  background:rgba(0,0,0,0.2);
  border:1px solid var(--border);
  padding:8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cal-day.empty{ background:transparent; border-color:transparent; }
.cal-day.pos{ background:rgba(61,220,132,0.12); border-color:rgba(61,220,132,0.4); }
.cal-day.neg{ background:rgba(255,77,109,0.12); border-color:rgba(255,77,109,0.4); }
.cal-day.today{ box-shadow:0 0 0 2px var(--accent-3); }
.cal-daynum{ font-size:0.72rem; color:var(--text-dim); font-weight:700; }
.cal-total{ font-size:0.82rem; font-weight:800; margin-top:6px; }
.cal-day.pos .cal-total{ color:var(--good); }
.cal-day.neg .cal-total{ color:var(--bad); }

.cal-day.has-trades{ cursor:default; }
.cal-day.has-trades:hover{
  transform:scale(1.18);
  z-index:20;
  box-shadow: var(--shadow-deep), 0 0 22px -4px rgba(255,106,61,0.55);
}

.cal-detail{
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%) translateY(8px);
  width:230px;
  background:var(--panel-2);
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:12px;
  box-shadow: var(--shadow-deep);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.15s ease;
  z-index:30;
}
.cal-day.align-left .cal-detail{ left:0; transform:translateY(8px); }
.cal-day.align-right .cal-detail{ left:auto; right:0; transform:translateY(8px); }
.cal-day.has-trades:hover .cal-detail{ opacity:1; visibility:visible; }
.cal-detail-title{
  font-size:0.68rem; color:var(--text-dim); text-transform:uppercase;
  letter-spacing:0.5px; margin-bottom:8px; font-weight:700;
}
.cal-detail-row{
  display:flex; align-items:center; gap:8px;
  font-size:0.8rem; padding:5px 0;
  border-bottom:1px solid var(--border);
}
.cal-detail-row:last-child{ border-bottom:none; }
.cal-detail-symbol{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-detail-pnl{ font-weight:800; }
.cal-detail-pnl.good{ color:var(--good); }
.cal-detail-pnl.bad{ color:var(--bad); }

.site-footer{ text-align:center; color:#8a6153; font-size:0.8rem; margin-top:30px; }

/* ===== Mobile ===== */
@media (max-width:760px){
  .topbar{ padding:14px 16px; }
  .hero h1{ font-size:2.1rem; }
  .trade-form{ grid-template-columns:1fr; }
  .panel{ padding:20px 16px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .watermark-frame{ width:48px; height:48px; }
  .watermark-logo{ width:40px; height:40px; }
  .brand-watermark{ bottom:14px; right:14px; }
  .cal-day{ min-height:44px; padding:4px; }
  .cal-total{ font-size:0.68rem; }
  .cal-detail{ width:180px; }
  .tab-btn{ padding:10px 14px; font-size:0.85rem; }
}