:root{
    --bg: #0b0f0d;
    --panel: #101613;
    --panel2: #0d1310;
    --line: #223028;
    --ink: #e9efe9;
    --ink-dim: #7c8d84;
    --profit: #3ddc84;
    --loss: #ff5c5c;
    --accent: #d4ff5a;
    --gold: #f2c94c;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;
    min-height:100vh;
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(61,220,132,0.06), transparent 60%),
      var(--bg);
    color:var(--ink);
    font-family:'Roboto', sans-serif;
    font-weight:600;
    padding:24px;
  }
  .layout{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    max-width:1300px;
    margin:0 auto;
    align-items:flex-start;
    justify-content:center;
  }
  .wrap{
    width:100%;
    max-width:560px;
    flex:1 1 480px;
  }
  .board{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    position:relative;
    overflow:hidden;
  }
  .board::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--accent), var(--profit), transparent);
  }
  header{
    padding:22px 24px 18px 24px;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  header.no-border{ border-bottom:none; padding-bottom:8px; }
  h1{
    font-weight:600;
    font-size:24px;
    margin:0 0 4px 0;
    letter-spacing:-0.01em;
  }
  .sub{
    font-size:12px;
    font-weight:400;
    color:var(--ink-dim);
  }
  .header-btns{ display:flex; gap:6px; }
  .icon-btn{
    background:none;
    border:1px solid var(--line);
    color:var(--ink-dim);
    font-family:inherit;
    font-weight:500;
    font-size:11px;
    padding:6px 10px;
    border-radius:3px;
    cursor:pointer;
    white-space:nowrap;
  }
  .icon-btn:hover{ border-color:var(--profit); color:var(--profit); }
  .icon-btn.danger:hover{ border-color:var(--loss); color:var(--loss); }

  /* Setup screen */
  .setup{ padding:24px; }
  .field{ position:relative; margin-bottom:14px; }
  .field::before{
    content:var(--currency-symbol, "$");
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--ink-dim); font-size:16px;
  }
  .field input{
    width:100%;
    background:var(--panel2);
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--ink);
    font-family:inherit;
    font-weight:600;
    font-size:18px;
    padding:12px 12px 12px 28px;
    outline:none;
  }
  .field input:focus{ border-color:var(--profit); box-shadow:0 0 0 3px rgba(61,220,132,0.12); }
  label.flabel{
    display:block; font-size:11px; letter-spacing:0.08em; color:var(--ink-dim);
    text-transform:uppercase; margin-bottom:6px; font-weight:500;
  }
  .primary-btn{
    width:100%;
    background:var(--profit);
    color:#06170e;
    border:none;
    border-radius:3px;
    padding:13px;
    font-family:inherit;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    letter-spacing:0.02em;
  }
  .primary-btn:hover{ filter:brightness(1.08); }
  .primary-btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .currency-toggle{ display:flex; gap:8px; margin-bottom:16px; }
  .currency-btn{
    flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--ink-dim);
    font-family:inherit; font-weight:700; font-size:13px; padding:11px; border-radius:3px;
    cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .currency-btn:hover{ border-color:var(--profit); color:var(--ink); }
  .currency-btn.active{ background:var(--profit); border-color:var(--profit); color:#06170e; }

  /* Milestone track */
  .milestones{
    display:flex;
    padding:18px 24px;
    gap:8px;
    border-bottom:1px solid var(--line);
  }
  .ms{
    flex:1;
    text-align:center;
    padding:10px 6px;
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--panel2);
  }
  .ms .n{ font-size:18px; font-weight:700; }
  .ms .l{ font-size:9px; color:var(--ink-dim); letter-spacing:0.08em; text-transform:uppercase; margin-top:2px; font-weight:500;}
  .ms.done{ border-color:var(--profit); }
  .ms.done .n{ color:var(--profit); }
  .ms.active{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,201,76,0.12); }
  .ms.active .n{ color:var(--gold); }
  .ms.locked{ opacity:0.35; }

  /* Stats */
  .stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--line);
    border-bottom:1px solid var(--line);
  }
  .stat{
    background:var(--panel);
    padding:16px 20px;
  }
  .stat .l{ font-size:10px; color:var(--ink-dim); letter-spacing:0.08em; text-transform:uppercase; font-weight:500; }
  .stat .v{ font-size:22px; margin-top:4px; }
  .v.profit{ color:var(--profit); }
  .v.loss{ color:var(--loss); }

  .progress-block{ padding:16px 24px 20px 24px; }
  .progress-label{
    display:flex; justify-content:space-between; font-size:11px; color:var(--ink-dim);
    margin-bottom:8px; font-weight:500;
  }
  .progress-label b{ color:var(--ink); font-weight:700; }
  .bar-wrap{
    height:8px; background:var(--panel2); border:1px solid var(--line);
    border-radius:99px; overflow:hidden;
  }
  .bar{ height:100%; width:0%; background:linear-gradient(90deg, var(--profit), var(--accent)); transition:width .4s ease; }

  /* Add trade */
  .add-trade{
    padding:20px 24px;
    display:flex;
    flex-direction:column;
    gap:14px;
    border-bottom:1px solid var(--line);
  }
  .add-trade-main{ display:flex; gap:10px; align-items:stretch; }
  .add-trade-main .field{ margin-bottom:0; flex:1; display:flex; }
  .add-trade-main .field input{ height:48px; padding-top:0; padding-bottom:0; }
  .add-trade-main .primary-btn{ width:auto; padding:0 18px; height:48px; white-space:nowrap; }

  .add-trade-extra{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }
  .mini-field{ display:flex; flex-direction:column; gap:5px; }
  .mini-field label{
    font-size:10px; color:var(--ink-dim); letter-spacing:0.05em;
    text-transform:uppercase; font-weight:500;
  }
  .add-trade-error{
    display:none;
    font-size:11px; font-weight:600; color:var(--loss);
    padding:8px 10px; border:1px solid rgba(255,92,92,0.35); background:rgba(255,92,92,0.08);
    border-radius:3px;
  }
  .add-trade-error.show{ display:block; }
  .mini-field input.field-error,
  .field input.field-error{
    border-color:var(--loss) !important;
    box-shadow:0 0 0 3px rgba(255,92,92,0.14) !important;
  }
  .mini-field .mini-input-wrap{ position:relative; }
  .mini-field input{
    width:100%;
    background:var(--panel2);
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--ink);
    font-family:inherit;
    font-weight:600;
    font-size:13px;
    padding:9px 10px;
    outline:none;
    height:40px;
    color-scheme: dark;
  }
  .mini-field input:focus{ border-color:var(--profit); box-shadow:0 0 0 3px rgba(61,220,132,0.12); }
  .mini-field input::placeholder{ color:var(--ink-dim); opacity:1; }
  .mini-field input[type="datetime-local"]{ color:var(--ink-dim); }
  .mini-field input[type="datetime-local"].has-value{ color:var(--ink); }
  .mini-field.leverage-field input{ padding-right:26px; }
  .mini-field.leverage-field .mini-input-wrap::after{
    content:"x"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
    color:var(--ink-dim); font-size:12px; pointer-events:none;
  }
  @media (max-width:560px){
    .add-trade-extra{ grid-template-columns:1fr; }
  }

  /* Trade log */
  .log-header{
    padding:14px 24px 8px 24px;
    display:flex; justify-content:space-between; align-items:center;
    font-size:11px; color:var(--ink-dim); letter-spacing:0.08em; text-transform:uppercase; font-weight:500;
  }
  .log{
    max-height:280px; overflow-y:auto; padding:0 24px 20px 24px;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent; /* Firefox */
  }
  .log::-webkit-scrollbar{ width:6px; }
  .log::-webkit-scrollbar-track{ background:transparent; }
  .log::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
  .log::-webkit-scrollbar-thumb:hover{ background:var(--ink-dim); }
  .trade-row{
    display:flex; align-items:center; gap:10px;
    padding-top:11px; padding-bottom:11px; border-bottom:1px dashed var(--line); font-size:12px;
  }
  .trade-row:last-child{ border-bottom:none; }
  .trade-row{ cursor:pointer; transition:background .12s ease; border-radius:4px; }
  .trade-row:hover{ background:rgba(61,220,132,0.07); }
  .trade-row .idx{ color:var(--ink-dim); flex:0 0 auto; font-weight:500; }
  .trade-middle{
    flex:1;
    display:flex; align-items:center; justify-content:flex-start;
    gap:0; min-width:0;
    overflow-x:auto; white-space:nowrap; scrollbar-width:none;
  }
  .trade-middle::-webkit-scrollbar{ display:none; }
  .trade-row .amt{ color:var(--ink-dim); flex:0 0 auto; font-weight:500; }
  .trade-row .pct{ flex:0 0 auto; }
  .row-pipe{ color:var(--line); flex:0 0 auto; font-weight:400; margin:0 7px; }
  .note-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 5px var(--gold); display:inline-block; flex:0 0 auto; }
  .leverage-badge{
    font-size:9px; font-weight:700; color:var(--gold);
    border:1px solid rgba(242,201,76,0.4); background:rgba(242,201,76,0.08);
    padding:3px 7px; border-radius:2px; letter-spacing:0.03em; flex:0 0 auto;
  }
  .position-time{ font-size:10px; color:var(--ink-dim); font-weight:400; flex:0 0 auto; }
  .trade-del{
    flex:0 0 auto;
    background:none; border:none; color:var(--ink-dim);
    font-size:14px; cursor:pointer; padding:4px;
    line-height:1;
  }
  .trade-del:hover{ color:var(--loss); }
  .empty{ color:var(--ink-dim); font-size:12px; text-align:center; padding:20px 0; font-weight:400; }

  footer{
    margin-top:36px;
    padding:12px 24px; font-size:10px; color:var(--ink-dim);
    letter-spacing:0.06em; text-align:center; font-weight:400;
  }
  .footer-links{
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:6px 16px; margin-bottom:8px;
  }
  .footer-links a{
    color:var(--ink-dim); text-decoration:none; font-size:11px; font-weight:500;
    letter-spacing:0; border-bottom:1px solid transparent;
  }
  .footer-links a:hover{ color:var(--profit); border-bottom-color:var(--profit); }

  /* Policy / about pages */
  .policy-section{ margin-bottom:22px; }
  .policy-section:last-child{ margin-bottom:0; }
  .policy-h2{ font-size:15px; font-weight:700; color:var(--ink); margin:0 0 8px 0; }
  .policy-p{ font-size:13.5px; color:var(--ink-dim); line-height:1.7; font-weight:400; margin-bottom:8px; }
  .policy-p:last-child{ margin-bottom:0; }
  .policy-ul{ margin:0; padding-left:18px; }
  .policy-ul li{ font-size:13.5px; color:var(--ink-dim); line-height:1.7; font-weight:400; margin-bottom:6px; }
  .policy-meta{ font-size:11px; color:var(--ink-dim); opacity:0.7; margin-top:24px; }
  .policy-email{ color:var(--profit); text-decoration:none; }
  .policy-email:hover{ text-decoration:underline; }

  /* Guide (docs-style) section */
  .guide-eyebrow{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
  .guide-lang-link{ font-size:11px; color:var(--ink-dim); text-decoration:none; border-bottom:1px solid transparent; }
  .guide-lang-link:hover{ color:var(--profit); border-bottom-color:var(--profit); }
  .guide-index-category{ margin-bottom:26px; }
  .guide-index-category:last-child{ margin-bottom:0; }
  .guide-index-category-title{ font-size:14px; font-weight:700; color:var(--gold); margin-bottom:10px; }
  .guide-index-list{ display:flex; flex-direction:column; gap:2px; }
  .guide-index-item{
    display:block; padding:11px 12px; border-radius:3px; text-decoration:none;
    border:1px solid transparent;
  }
  .guide-index-item:hover{ background:var(--panel2); border-color:var(--line); }
  .guide-index-item-title{ font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px; }
  .guide-index-item-desc{ font-size:12px; color:var(--ink-dim); line-height:1.5; font-weight:400; }
  .guide-prevnext{ display:flex; gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
  .guide-prevnext a{
    flex:1 1 0; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:3px;
    text-decoration:none; background:var(--panel2);
  }
  .guide-prevnext a:hover{ border-color:var(--profit); }
  .guide-prevnext .dir{ font-size:10px; color:var(--ink-dim); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:4px; }
  .guide-prevnext .ttl{ font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .guide-prevnext .next{ text-align:right; }
  .guide-back-link{ display:inline-block; margin-top:18px; font-size:12px; color:var(--ink-dim); text-decoration:none; }
  .guide-back-link:hover{ color:var(--profit); }

  .celebrate{
    display:none;
    background:linear-gradient(90deg, rgba(61,220,132,0.12), rgba(212,255,90,0.08));
    border:1px solid var(--profit);
    color:var(--profit);
    padding:12px 24px;
    font-size:13px;
    font-weight:700;
    text-align:center;
  }
  .celebrate.show{ display:block; }

  .status-line{
    padding:8px 24px; font-size:10px; color:var(--ink-dim); font-weight:500;
    display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line);
  }
  .status-dot{
    width:6px; height:6px; border-radius:50%; background:var(--profit);
    box-shadow:0 0 6px var(--profit);
  }
  .status-dot.bad{ background:var(--loss); box-shadow:0 0 6px var(--loss); }
  .status-dot.loading{ background:var(--gold); box-shadow:0 0 6px var(--gold); animation:pulse 1.2s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

  /* Custom confirm modal */
  .modal-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(5,8,6,0.72);
    z-index:1000;
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .modal-overlay.show{ display:flex; }
  .modal-box{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    max-width:340px;
    width:100%;
    overflow:hidden;
  }
  .modal-box::before{
    content:"";
    display:block;
    height:3px;
    background:linear-gradient(90deg, var(--loss), var(--gold));
  }
  .modal-body{ padding:22px 22px 18px 22px; }
  .modal-msg{ font-size:14px; font-weight:500; line-height:1.5; color:var(--ink); }
  .modal-actions{
    display:flex; gap:8px; padding:0 22px 20px 22px;
  }
  .modal-actions button{
    flex:1;
    font-family:inherit;
    font-weight:700;
    font-size:13px;
    padding:11px;
    border-radius:3px;
    cursor:pointer;
  }
  .modal-cancel{
    background:var(--panel2);
    border:1px solid var(--line);
    color:var(--ink-dim);
  }
  .modal-cancel:hover{ color:var(--ink); }
  .modal-confirm{
    background:var(--loss);
    border:none;
    color:#1a0606;
  }
  .modal-confirm:hover{ filter:brightness(1.1); }

  /* Note-editing modal */
  .note-modal-box{ max-width:420px; }
  .note-modal-box::before{ background:linear-gradient(90deg, var(--gold), var(--accent)); }
  .note-modal-title{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .note-modal-sub{ font-size:11px; color:var(--ink-dim); font-weight:500; margin-bottom:14px; }
  .note-textarea{
    width:100%;
    min-height:120px;
    background:var(--panel2);
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--ink);
    font-family:inherit;
    font-weight:500;
    font-size:13px;
    line-height:1.5;
    padding:12px;
    outline:none;
    resize:vertical;
  }
  .note-textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,201,76,0.12); }
  .note-modal-actions{ display:flex; gap:8px; padding:16px 22px 20px 22px; }
  .note-modal-actions button{
    flex:1; font-family:inherit; font-weight:700; font-size:13px;
    padding:11px; border-radius:3px; cursor:pointer;
  }
  .note-save-btn{ background:var(--profit); border:none; color:#06170e; }
  .note-save-btn:hover{ filter:brightness(1.08); }
  .note-cancel-btn{ background:var(--panel2); border:1px solid var(--line); color:var(--ink-dim); }
  .note-cancel-btn:hover{ color:var(--ink); }
  .note-modal-box .add-trade-extra{ grid-template-columns:1fr; gap:10px; margin-bottom:14px; }
  .note-modal-box .edit-after-field{ margin-bottom:12px; }
  .note-modal-box .edit-after-field .mini-input-wrap{ position:relative; }
  .note-modal-box .edit-after-field input{ padding-left:26px; }
  .note-modal-box .edit-after-field .mini-input-wrap::before{
    content:var(--currency-symbol, "$"); position:absolute; left:10px; top:50%; transform:translateY(-50%);
    color:var(--ink-dim); font-size:13px;
  }

  /* ===== Dashboard (full width, moved to former calendar spot) ===== */
  .dash-wrap{
    width:100%;
    max-width:1300px;
    flex:1 1 100%;
  }
  .dash-board{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    position:relative;
    overflow:hidden;
  }
  .dash-board::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--gold), var(--accent), transparent);
  }
  .dash-header{ padding:20px 24px 16px 24px; border-bottom:1px solid var(--line); }
  .dash-h1{ font-weight:600; font-size:22px; letter-spacing:-0.01em; }
  .dash-sub{ font-size:12px; color:var(--ink-dim); font-weight:400; margin-top:4px; }
  .dash-body{ padding:22px 24px 24px 24px; }
  .dash-empty{ color:var(--ink-dim); font-size:12px; text-align:center; padding:30px 0; font-weight:400; }
  .dash-chart-wrap{ margin-bottom:22px; }
  .dash-chart-label{
    font-size:11px; color:var(--ink-dim); letter-spacing:0.08em; text-transform:uppercase;
    font-weight:500; margin-bottom:10px;
  }
  .dash-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
  }
  .dash-stat{ background:var(--panel2); padding:14px 12px; text-align:center; }
  .dash-stat .l{ font-size:9px; color:var(--ink-dim); letter-spacing:0.06em; text-transform:uppercase; font-weight:500; }
  .dash-stat .v{ font-size:17px; margin-top:4px; }
  @media (max-width: 640px){
    .dash-stats{ grid-template-columns:repeat(2, 1fr); }
  }

  /* ===== Calendar (daily P&L, side panel next to journal) ===== */
  .cal-wrap{
    width:100%;
    max-width:720px;
    flex:1 1 600px;
  }
  .cal-board{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    position:relative;
    overflow:hidden;
  }
  .cal-board::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--profit), var(--gold), transparent);
  }
  .cal-header{
    padding:20px 24px 16px 24px; border-bottom:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  }
  .cal-h1{ font-weight:600; font-size:22px; letter-spacing:-0.01em; }
  .cal-sub{ font-size:12px; color:var(--ink-dim); font-weight:400; margin-top:4px; }
  .cal-nav{ display:flex; align-items:center; gap:10px; }
  .cal-nav button{
    background:var(--panel2); border:1px solid var(--line); color:var(--ink);
    font-family:inherit; font-weight:600; font-size:14px; width:30px; height:30px;
    border-radius:3px; cursor:pointer;
  }
  .cal-nav button:hover{ border-color:var(--profit); color:var(--profit); }
  .cal-month-label{ font-size:14px; font-weight:600; min-width:90px; text-align:center; }
  .cal-today-btn{
    background:none; border:1px solid var(--line); color:var(--ink-dim);
    font-family:inherit; font-weight:500; font-size:11px; padding:6px 10px;
    border-radius:3px; cursor:pointer; width:auto !important; height:auto !important;
  }
  .cal-today-btn:hover{ border-color:var(--gold); color:var(--gold); }
  .cal-body{ padding:20px 24px 24px 24px; }
  .cal-month-summary{
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 20px; margin-bottom:18px;
    background:linear-gradient(135deg, rgba(61,220,132,0.05), rgba(212,255,90,0.03));
    border:1px solid var(--line); border-radius:4px;
    position:relative; overflow:hidden;
  }
  .cal-month-summary::before{
    content:""; position:absolute; top:0; left:0; bottom:0; width:3px;
    background:linear-gradient(180deg, var(--accent), var(--profit));
  }
  .cal-ms-left{ display:flex; flex-direction:column; gap:5px; }
  .cal-ms-label{
    font-size:10px; color:var(--ink-dim); font-weight:500;
    letter-spacing:0.08em; text-transform:uppercase;
  }
  .cal-ms-amt{ font-size:24px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
  .cal-ms-amt.profit{ color:var(--profit); }
  .cal-ms-amt.loss{ color:var(--loss); }
  .cal-ms-pill{
    display:flex; align-items:center; gap:5px;
    padding:7px 13px; border-radius:99px;
    font-size:13px; font-weight:700;
    background:var(--panel2); border:1px solid var(--line); color:var(--ink-dim);
  }
  .cal-ms-pill.profit{ background:rgba(61,220,132,0.12); border-color:rgba(61,220,132,0.4); color:var(--profit); }
  .cal-ms-pill.loss{ background:rgba(255,92,92,0.12); border-color:rgba(255,92,92,0.4); color:var(--loss); }
  .cal-ms-arrow{ font-size:10px; }
  .cal-weekdays{
    display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;
    margin-bottom:8px;
  }
  .cal-weekdays div{
    text-align:center; font-size:10px; color:var(--ink-dim);
    letter-spacing:0.06em; text-transform:uppercase; font-weight:500;
  }
  .cal-grid{
    display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;
  }
  .cal-cell{
    aspect-ratio:1 / 0.82;
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--panel2);
    padding:6px 8px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative;
  }
  .cal-cell.empty{ background:transparent; border-color:transparent; }
  .cal-cell.today{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(242,201,76,0.15) inset; }
  .cal-cell.profit{ background:rgba(61,220,132,0.10); border-color:rgba(61,220,132,0.35); }
  .cal-cell.loss{ background:rgba(255,92,92,0.10); border-color:rgba(255,92,92,0.35); }
  .cal-hold-dot{
    position:absolute; top:5px; right:5px;
    width:6px; height:6px; border-radius:50%;
    background:var(--ink-dim);
  }
  .cal-hold-dot.profit{ background:var(--profit); box-shadow:0 0 4px rgba(61,220,132,0.7); }
  .cal-hold-dot.loss{ background:var(--loss); box-shadow:0 0 4px rgba(255,92,92,0.7); }
  .cal-daynum{ font-size:11px; color:var(--ink-dim); font-weight:500; }
  .cal-cell.profit .cal-daynum, .cal-cell.loss .cal-daynum{ color:var(--ink); }
  .cal-amt{ font-size:11px; font-weight:700; text-align:right; }
  .cal-cell.profit .cal-amt{ color:var(--profit); }
  .cal-cell.loss .cal-amt{ color:var(--loss); }
  .cal-count{ font-size:9px; color:var(--ink-dim); font-weight:400; text-align:right; }
  .cal-legend{
    display:flex; gap:16px; margin-top:16px; font-size:10px; color:var(--ink-dim); font-weight:500; flex-wrap:wrap;
  }
  .cal-legend span{ display:inline-flex; align-items:center; gap:5px; }
  .cal-legend i{ width:10px; height:10px; border-radius:2px; display:inline-block; }
  @media (max-width: 520px){
    .cal-amt{ font-size:9px; }
    .cal-daynum{ font-size:10px; }
  }

  /* ===== Calculators (수익률 계산기 + 목표 금액 계산기), below dashboard ===== */
  .clc-wrap{ width:100%; max-width:1300px; flex:1 1 100%; }
  .clc-toggle-btn{
    width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    color:var(--ink-dim);
    font-family:inherit;
    font-weight:600;
    font-size:13px;
    padding:14px 20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    letter-spacing:0.02em;
    transition:border-color .15s ease, color .15s ease;
  }
  .clc-toggle-btn:hover{ border-color:var(--profit); color:var(--profit); }
  .clc-toggle-arrow{ font-size:11px; transition:transform .2s ease; display:inline-block; }
  .clc-toggle-btn.open .clc-toggle-arrow{ transform:rotate(180deg); }
  .guide-link-btn{ margin-top:10px; text-decoration:none; }
  .guide-link-btn .clc-toggle-arrow{ transform:rotate(-90deg); }
  .clc-row{ display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; }
  .clc-board{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    position:relative;
    overflow:hidden;
    flex:1 1 380px;
    min-width:280px;
  }
  .clc-board::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--accent), var(--profit), transparent);
  }
  .clc-ticker{
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 24px 0 24px; font-size:11px; letter-spacing:0.14em;
    color:var(--ink-dim); text-transform:uppercase; font-weight:500;
  }
  .clc-dot{
    width:6px;height:6px;border-radius:50%; background:var(--profit); display:inline-block;
    margin-right:6px; box-shadow:0 0 6px var(--profit); animation:pulse 1.8s infinite ease-in-out;
  }
  .clc-header{ padding:6px 24px 22px 24px; border-bottom:1px solid var(--line); }
  .clc-h1{ font-weight:600; font-size:24px; margin:6px 0 4px 0; letter-spacing:-0.01em; }
  .clc-sub{ font-size:12px; color:var(--ink-dim); font-weight:400; }
  .clc-body{ padding:24px; }
  .clc-row-field{ display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:18px; }
  .clc-label{
    font-size:11px; letter-spacing:0.1em; color:var(--ink-dim); text-transform:uppercase;
    display:flex; justify-content:space-between; font-weight:500;
  }
  .clc-label .clc-tag{
    color:var(--ink-dim); border:1px solid var(--line); padding:1px 6px; border-radius:2px; font-size:10px;
  }
  .clc-field{ position:relative; }
  .clc-field input{
    width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:3px;
    color:var(--ink); font-family:inherit; font-weight:600; font-size:22px;
    padding:14px 14px 14px 32px; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .clc-field::before{
    content:var(--currency-symbol, "$"); position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--ink-dim); font-size:18px;
  }
  .clc-field input:focus{ border-color:var(--profit); box-shadow:0 0 0 3px rgba(61,220,132,0.12); }
  .clc-field.rate::before{ content:"%"; left:auto; right:14px; }
  .clc-field.rate input{ padding:14px 36px 14px 14px; }
  .clc-field.plain::before{ content:none; }
  .clc-field.plain input{ padding:14px; }
  .clc-arrow{ text-align:center; color:var(--ink-dim); font-size:12px; letter-spacing:0.15em; margin:2px 0 14px 0; }
  .clc-result{ margin-top:8px; border-top:1px dashed var(--line); padding-top:20px; }
  .clc-result-row{
    display:flex; justify-content:space-between; align-items:baseline; padding:6px 0;
    font-size:13px; color:var(--ink-dim); font-weight:500;
  }
  .clc-result-row .clc-val{ color:var(--ink); font-size:14px; }
  .clc-headline{ display:flex; align-items:baseline; justify-content:space-between; padding:14px 0 4px 0; }
  .clc-headline .clc-lbl{ font-size:14px; color:var(--ink-dim); font-weight:500; }
  .clc-pct{ font-size:42px; font-weight:700; letter-spacing:-0.02em; transition:color .2s ease; }
  .clc-pct.profit{ color:var(--profit); }
  .clc-pct.loss{ color:var(--loss); }
  .clc-pct.flat{ color:var(--ink-dim); }
  .clc-bar-wrap{
    height:6px; background:var(--panel2); border:1px solid var(--line); border-radius:99px;
    overflow:hidden; margin-top:10px;
  }
  .clc-bar{ height:100%; width:0%; transition:width .35s ease, background .2s ease; }
  .clc-bar.profit{ background:var(--profit); }
  .clc-bar.loss{ background:var(--loss); }
  .clc-footer{
    padding:14px 24px 20px 24px; display:flex; justify-content:space-between;
    font-size:10px; color:var(--ink-dim); letter-spacing:0.08em; border-top:1px solid var(--line); font-weight:500;
  }
  @media (max-width:760px){ .clc-row{ flex-direction:column; } }

  /* ===== Language selector ===== */
  .lang-select{
    background:var(--panel2);
    border:1px solid var(--line);
    color:var(--ink-dim);
    font-family:inherit;
    font-weight:500;
    font-size:11px;
    padding:6px 8px;
    border-radius:3px;
    cursor:pointer;
    outline:none;
  }
  .lang-select:hover{ border-color:var(--profit); color:var(--profit); }

  /* ===== Trade row edit button / image indicator ===== */
  .trade-edit{
    flex:0 0 auto;
    background:none;
    border:1px solid var(--line);
    color:var(--ink-dim);
    font-family:inherit;
    font-weight:600;
    font-size:10px;
    padding:4px 8px;
    border-radius:3px;
    cursor:pointer;
    white-space:nowrap;
  }
  .trade-edit:hover{ border-color:var(--gold); color:var(--gold); }
  .img-dot{
    width:6px; height:6px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 5px var(--accent); display:inline-block; flex:0 0 auto;
  }

  /* ===== Chart image upload (add / edit trade) ===== */
  .img-upload-field{ display:flex; flex-direction:column; gap:5px; }
  .img-upload-field label{
    font-size:10px; color:var(--ink-dim); letter-spacing:0.05em;
    text-transform:uppercase; font-weight:500;
  }
  .img-upload-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .img-upload-btn{
    background:var(--panel2);
    border:1px dashed var(--line);
    color:var(--ink-dim);
    font-family:inherit;
    font-weight:600;
    font-size:11px;
    padding:9px 12px;
    border-radius:3px;
    cursor:pointer;
    white-space:nowrap;
  }
  .img-upload-btn:hover{ border-color:var(--profit); color:var(--profit); }
  .img-upload-btn:disabled{ opacity:0.35; cursor:not-allowed; }
  .img-upload-btn:disabled:hover{ border-color:var(--line); color:var(--ink-dim); }
  .img-count{ font-size:10px; color:var(--ink-dim); font-weight:600; letter-spacing:0.03em; }
  .img-preview-list{ display:flex; flex-wrap:wrap; gap:10px; }
  .img-preview-wrap{ position:relative; display:none; }
  .img-preview-wrap.show{ display:inline-block; }
  .img-preview{
    height:44px; width:auto; max-width:120px; object-fit:cover;
    border:1px solid var(--line); border-radius:3px; display:block;
  }
  .img-preview-remove{
    position:absolute; top:-6px; right:-6px;
    width:18px; height:18px; border-radius:50%;
    background:var(--loss); color:#1a0606; border:none;
    font-size:11px; line-height:18px; text-align:center; padding:0; cursor:pointer;
  }

  /* ===== Detail (read-only) modal ===== */
  .detail-modal-box{ max-width:440px; }
  .detail-modal-box::before{ background:linear-gradient(90deg, var(--profit), var(--accent)); }
  .detail-title-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; gap:10px; }
  .detail-title-nav{ display:flex; align-items:center; gap:8px; min-width:0; }
  .detail-nav-btn{
    background:var(--panel2); border:1px solid var(--line); color:var(--ink);
    width:26px; height:26px; min-width:26px; border-radius:50%;
    cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
  }
  .detail-nav-btn:hover{ border-color:var(--profit); color:var(--profit); background:rgba(61,220,132,0.08); }
  .detail-nav-btn:disabled{ opacity:0.3; cursor:not-allowed; }
  .detail-nav-btn:disabled:hover{ border-color:var(--line); color:var(--ink); background:var(--panel2); }
  .detail-modal-title{ font-size:15px; font-weight:700; color:var(--ink); }
  .detail-edit-link{
    background:none; border:1px solid var(--line); color:var(--ink-dim);
    font-family:inherit; font-weight:600; font-size:11px; padding:5px 10px;
    border-radius:3px; cursor:pointer;
  }
  .detail-edit-link:hover{ border-color:var(--gold); color:var(--gold); }
  .detail-modal-sub{ font-size:11px; color:var(--ink-dim); font-weight:500; margin-bottom:16px; }
  .detail-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:3px;
    overflow:hidden; margin-bottom:14px;
  }
  .detail-cell{ background:var(--panel2); padding:10px 12px; }
  .detail-cell .l{ font-size:9px; color:var(--ink-dim); letter-spacing:0.06em; text-transform:uppercase; font-weight:500; }
  .detail-cell .v{ font-size:14px; margin-top:3px; font-weight:700; }
  .detail-note-block{ margin-bottom:14px; }
  .detail-note-label{ font-size:10px; color:var(--ink-dim); letter-spacing:0.05em; text-transform:uppercase; font-weight:500; margin-bottom:6px; }
  .detail-note-text{
    font-size:13px; line-height:1.6; color:var(--ink); font-weight:500;
    background:var(--panel2); border:1px solid var(--line); border-radius:3px; padding:10px 12px;
    white-space:pre-wrap; word-break:break-word;
  }
  .detail-note-text.empty{ color:var(--ink-dim); font-weight:400; }
  .detail-image-viewer{ position:relative; }
  .detail-image-viewer img{
    width:100%; height:200px; object-fit:contain; display:block;
    border:1px solid var(--line); border-radius:3px; background:var(--panel2); cursor:zoom-in;
  }
  .detail-img-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%;
    background:rgba(11,15,13,0.72); border:1px solid rgba(233,239,233,0.25); color:var(--ink);
    cursor:pointer; padding:0; box-shadow:0 1px 4px rgba(0,0,0,0.35);
    display:flex; align-items:center; justify-content:center;
  }
  .detail-img-nav:hover{ border-color:var(--profit); color:var(--profit); background:rgba(11,15,13,0.88); }
  .detail-img-prev{ left:8px; }
  .detail-img-next{ right:8px; }
  .detail-img-counter{
    position:absolute; bottom:8px; right:8px;
    font-size:10px; font-weight:700; color:var(--ink);
    background:rgba(5,8,6,0.6); padding:3px 8px; border-radius:99px;
  }
  .detail-modal-actions{ display:flex; gap:8px; padding:16px 22px 20px 22px; }
  .detail-modal-actions button{
    flex:1; font-family:inherit; font-weight:700; font-size:13px;
    padding:11px; border-radius:3px; cursor:pointer;
    background:var(--panel2); border:1px solid var(--line); color:var(--ink-dim);
  }
  .detail-modal-actions button:hover{ color:var(--ink); }

  /* Fullscreen image lightbox */
  .lightbox-overlay{
    display:none; position:fixed; inset:0; background:rgba(5,8,6,0.9);
    z-index:1100; align-items:center; justify-content:center; padding:20px; cursor:zoom-out;
  }
  .lightbox-overlay.show{ display:flex; }
  .lightbox-overlay img{ max-width:100%; max-height:100%; border-radius:4px; }
  .lightbox-nav{
    position:fixed; top:50%; transform:translateY(-50%);
    width:46px; height:46px; border-radius:50%;
    background:rgba(16,22,19,0.85); border:1px solid rgba(233,239,233,0.3); color:var(--ink);
    cursor:pointer; padding:0; z-index:1101; box-shadow:0 2px 8px rgba(0,0,0,0.4);
    display:none; align-items:center; justify-content:center;
  }
  .lightbox-overlay.show .lightbox-nav.multi{ display:flex; }
  .lightbox-nav:hover{ border-color:var(--profit); color:var(--profit); background:rgba(16,22,19,0.95); }
  .lightbox-prev{ left:20px; }
  .lightbox-next{ right:20px; }
  .lightbox-counter{
    display:none; position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    font-size:12px; font-weight:700; color:var(--ink);
    background:rgba(16,22,19,0.7); border:1px solid var(--line); padding:5px 12px; border-radius:99px; z-index:1101;
  }
  .lightbox-overlay.show .lightbox-counter.multi{ display:block; }

  /* ===== Help sections (usage guide / FAQ / cautions) — three separate boards, always visible ===== */
  .help-wrap{ width:100%; max-width:1300px; flex:1 1 100%; }
  .help-board{
    background:var(--panel); border:1px solid var(--line); border-radius:4px;
    position:relative; overflow:hidden;
  }
  .help-board::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--gold), var(--profit), transparent);
  }
  .help-caution-board::before{ background:linear-gradient(90deg, var(--loss), var(--gold), transparent); }
  .help-header{ padding:20px 24px 16px 24px; border-bottom:1px solid var(--line); }
  .help-h1{ font-weight:600; font-size:24px; letter-spacing:-0.01em; }
  .help-caution-h1{ color:var(--loss); }
  .help-sub{ font-size:13px; color:var(--ink-dim); font-weight:400; margin-top:5px; }
  .help-body{ padding:22px 24px 24px 24px; }
  .help-usage-item{ display:flex; gap:12px; margin-bottom:18px; }
  .help-usage-item:last-child{ margin-bottom:0; }
  .help-usage-num{
    flex:0 0 auto; width:24px; height:24px; margin-top:1px; border-radius:50%;
    background:var(--panel2); border:1px solid var(--line); color:var(--gold);
    font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  .help-usage-text{ min-width:0; }
  .help-usage-title{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .help-usage-body{ font-size:13.5px; color:var(--ink-dim); line-height:1.65; font-weight:400; }
  .help-faq-item{
    background:var(--panel2); border:1px solid var(--line); border-radius:3px;
    margin-bottom:10px; padding:13px 15px;
  }
  .help-faq-item:last-child{ margin-bottom:0; }
  .help-faq-item summary{
    font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none;
  }
  .help-faq-item summary::-webkit-details-marker{ display:none; }
  .help-faq-item summary::marker{ content:''; }
  .help-faq-q-mark{ color:var(--gold); font-weight:700; margin-right:5px; }
  .help-faq-item[open] summary{ margin-bottom:10px; }
  .help-faq-answer{ font-size:13.5px; color:var(--ink-dim); line-height:1.65; font-weight:400; }
  .help-faq-a-mark{ color:var(--profit); font-weight:700; margin-right:5px; }
  .help-caution-list{
    background:rgba(255,92,92,0.06); border:1px solid rgba(255,92,92,0.3); border-radius:3px;
    padding:16px 16px 16px 32px; margin:0; list-style:disc;
  }
  .help-caution-list li{ font-size:13.5px; color:var(--ink); line-height:1.7; margin-bottom:11px; font-weight:400; }
  .help-caution-list li:last-child{ margin-bottom:0; }